/* Zemma Productions - schools landing page
   All dark, matching zemma.co. The body panels keep an alternating rhythm,
   stepped in dark shades rather than light ones:

     hero          #000000  pure black
     films         #0c1116  base panel
     films.alt     #151b22  one step up
     process       #0c1116  base panel
     closing       #000000  pure black

   Black bookends the page and the middle alternates, so the sections still
   separate without any of them going light. Six film sections means the last
   one is the alt shade, so the process block goes back to base. Flip it if a
   section is ever added or removed. */

:root {
  color-scheme: dark;

  /* black panels: hero and closing */
  --ink:        #000000;
  --ink-2:      #1b232b;
  --on-ink:     #ffffff;
  --on-ink-dim: #a7b0b8;

  /* body panels */
  --paper:      #0c1116;
  --paper-2:    #151b22;
  --text:       #eef2f5;
  --text-dim:   #9aa7b2;
  --rule:       #222b34;

  /* Brand blue, sampled from the zemma.co wordmark and links.
     On a light page this needed a deeper variant for small text, since
     #0099ff only reaches 3:1 on white. Now that every panel is dark both
     roles collapse to the one brand blue: it clears 6.3:1 on the base
     panel and 5.8:1 on the lighter one. */
  --accent:      #0099ff;
  --accent-ink:  #0099ff;

  --wrap: 1080px;
  --gutter: 16px;

  /* Poppins is zemma.co's primary face. System stack carries the page
     if the webfont is slow or blocked. */
  --sans: "Poppins", ui-sans-serif, system-ui, -apple-system, "Segoe UI",
          Roboto, "Helvetica Neue", Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--text);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  overflow-x: hidden;
}

h1, h2, h3 {
  margin: 0;
  line-height: 1.15;
  letter-spacing: -0.015em;
  font-weight: 650;
  text-wrap: balance;
}

p { margin: 0; text-wrap: pretty; }

a { color: var(--accent-ink); }
a:hover { color: var(--text); }

img { display: block; max-width: 100%; height: auto; }

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

:where(a, button):focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
  border-radius: 3px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 10;
  background: var(--accent);
  color: #06232a;
  padding: 10px 16px;
  font-weight: 600;
  text-decoration: none;
}
.skip-link:focus { left: 8px; top: 8px; }

/* ---------- hero ---------- */

.hero {
  background: var(--ink);
  color: var(--on-ink);
  padding: clamp(56px, 11vw, 112px) 0 clamp(48px, 9vw, 88px);
  background-image:
    radial-gradient(120% 90% at 8% -10%, rgba(0, 153, 255, 0.22), transparent 60%);
}

.hero-eyebrow {
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--accent);
  margin-bottom: 20px;
}

.hero h1 {
  font-size: clamp(2rem, 6.2vw, 3.6rem);
  max-width: 20ch;
}

.hero-lede {
  margin-top: 22px;
  max-width: 56ch;
  font-size: clamp(1.02rem, 2.2vw, 1.2rem);
  color: var(--on-ink-dim);
}

.hero-jump {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 36px;
  padding-top: 26px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.hero-jump a {
  padding: 10px 18px;
  border: 1px solid rgba(0, 153, 255, 0.45);
  border-radius: 999px;
  background: rgba(0, 153, 255, 0.08);
  color: var(--on-ink);
  font-size: 0.88rem;
  font-weight: 500;
  line-height: 1.2;
  text-decoration: none;
  transition: background-color 0.18s ease, border-color 0.18s ease,
              color 0.18s ease;
}

.hero-jump a:hover,
.hero-jump a:focus-visible {
  background: var(--accent);
  border-color: var(--accent);
  color: #06232a;
}

/* ---------- film sections ---------- */

.films {
  padding: clamp(52px, 8vw, 88px) 0;
  scroll-margin-top: 8px;
}
.films.alt { background: var(--paper-2); }

.sec-head { max-width: 62ch; margin-bottom: clamp(30px, 5vw, 46px); }

.sec-kicker {
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 650;
  color: var(--accent-ink);
  margin-bottom: 12px;
}

.sec-head h2 { font-size: clamp(1.5rem, 4vw, 2.15rem); }

.sec-lede {
  margin-top: 14px;
  color: var(--text-dim);
  font-size: clamp(1rem, 2vw, 1.12rem);
  max-width: 54ch;
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(400px, 100%), 1fr));
  gap: clamp(28px, 4vw, 44px) clamp(20px, 3vw, 32px);
}

.film-title {
  margin-top: 16px;
  font-size: 1.06rem;
  font-weight: 650;
}

.film-school {
  margin-top: 4px;
  font-size: 0.85rem;
  color: var(--text-dim);
}

/* ---------- click-to-play facade ---------- */

.facade,
.player {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 6px;
  overflow: hidden;
  background: var(--ink-2);
}

.facade {
  cursor: pointer;
  appearance: none;
  -webkit-tap-highlight-color: transparent;
}

.facade-img {
  position: absolute;
  inset: 0;
  background: var(--ink-2) center / cover no-repeat;
  opacity: 0;
  transition: opacity 0.4s ease;
}
.facade-img.is-loaded { opacity: 1; }

/* Shown only when the poster fetch fails, which on a school network usually
   means Vimeo is blocked. Names the film so the card reads as intentional
   rather than as an image that failed to load. Sits top left, clear of the
   play button in the middle and the duration badge in the corner. */
.facade-img.is-fallback {
  opacity: 1;
  display: grid;
  place-content: start;
  padding: 16px 18px;
  padding-right: 34%;
  text-align: left;
  font-size: 0.92rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--text-dim);
  background-image:
    linear-gradient(140deg, rgba(0, 153, 255, 0.10), transparent 70%);
}

.facade-play {
  position: absolute;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background: rgba(10, 20, 24, 0.55);
  border: 2px solid rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(2px);
  transition: background-color 0.18s ease, scale 0.18s ease, border-color 0.18s ease;
}
.facade-play::after {
  content: "";
  position: absolute;
  left: 54%;
  top: 50%;
  translate: -50% -50%;
  border-style: solid;
  border-width: 9px 0 9px 15px;
  border-color: transparent transparent transparent #ffffff;
}

.facade:hover .facade-play,
.facade:focus-visible .facade-play {
  background: var(--accent);
  border-color: var(--accent);
  scale: 1.08;
}
.facade:hover .facade-play::after,
.facade:focus-visible .facade-play::after {
  border-left-color: #06232a;
}

.facade-time {
  position: absolute;
  right: 10px;
  bottom: 10px;
  padding: 3px 8px;
  border-radius: 4px;
  background: rgba(10, 20, 24, 0.78);
  color: #ffffff;
  font-size: 0.75rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}

.player iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ---------- process ---------- */

.process {
  padding: clamp(52px, 8vw, 88px) 0;
  background: var(--paper);
}

.steps {
  list-style: none;
  counter-reset: step;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: clamp(28px, 4vw, 40px);
}

.steps li { counter-increment: step; }

.steps li::before {
  content: counter(step);
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  margin-bottom: 16px;
  border-radius: 50%;
  border: 1.5px solid var(--accent);
  color: var(--accent-ink);
  font-size: 0.85rem;
  font-weight: 650;
}

.steps h3 { font-size: 1.04rem; }

.steps p {
  margin-top: 10px;
  color: var(--text-dim);
  font-size: 0.95rem;
}

/* ---------- closing ---------- */

.closing {
  background: var(--ink);
  color: var(--on-ink);
  padding: clamp(56px, 9vw, 96px) 0 clamp(40px, 6vw, 64px);
  background-image:
    radial-gradient(110% 80% at 92% 110%, rgba(0, 153, 255, 0.20), transparent 60%);
}

.closing h2 {
  font-size: clamp(1.5rem, 4vw, 2.15rem);
  max-width: 28ch;
}

.closing-lede {
  margin-top: 20px;
  max-width: 56ch;
  color: var(--on-ink-dim);
  font-size: clamp(1rem, 2vw, 1.12rem);
}

.closing-fallback {
  margin-top: 26px;
  font-size: 0.95rem;
  color: var(--on-ink-dim);
}

.closing a { color: var(--accent); }
.closing a:hover { color: var(--on-ink); }

.colophon {
  margin-top: clamp(40px, 6vw, 64px);
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  font-size: 0.82rem;
  line-height: 1.8;
  color: var(--on-ink-dim);
}

/* ---------- client pull quotes ---------- */

/* The card is tinted with the brand blue rather than a flat colour, so it
   lifts off both panel shades without needing to know which one is behind
   it. At 7% the tint barely moves luminance, so every contrast ratio on
   the page survives: body text 15.7:1, muted 7.2:1, blue 5.9:1. */
.quote {
  position: relative;
  margin: clamp(40px, 6vw, 64px) 0 0;
  padding: clamp(30px, 4vw, 40px) clamp(26px, 3.5vw, 38px)
           clamp(26px, 3.5vw, 34px);
  display: grid;
  grid-template-columns: minmax(0, 234px) minmax(0, 1fr);
  gap: 0;
  align-items: start;
  background: rgba(0, 153, 255, 0.07);
  border: 1px solid rgba(0, 153, 255, 0.22);
  border-left: 4px solid var(--accent);
  border-radius: 10px;
  box-shadow: 0 18px 40px -28px rgba(0, 0, 0, 0.9);
}

/* The attribution sits left of the quote. DOM order is unchanged, so a
   screen reader still reads the quote before who said it. */
.quote blockquote {
  margin: 0;
  grid-column: 2;
  grid-row: 1;
  padding-left: clamp(20px, 3vw, 34px);
  border-left: 1px solid rgba(0, 153, 255, 0.22);
}

.quote p {
  font-size: clamp(1.12rem, 2.5vw, 1.36rem);
  line-height: 1.5;
  font-weight: 400;
  letter-spacing: -0.005em;
  text-wrap: pretty;
}

.quote figcaption {
  grid-column: 1;
  grid-row: 1;
  padding-right: clamp(22px, 2.5vw, 32px);
  font-size: 0.85rem;
  line-height: 1.5;
}

.quote-photo {
  flex: 0 0 auto;
  width: 88px;
  height: 88px;
  margin-bottom: 14px;
  border-radius: 50%;
  object-fit: cover;
  /* Sources vary: school portraits, a studio headshot, a LinkedIn photo.
     The ring keeps them reading as one set on the dark card. */
  border: 2px solid rgba(0, 153, 255, 0.55);
  background: var(--ink-2);
}

.quote-name {
  display: block;
  font-weight: 600;
  color: var(--accent);
}

.quote-role { display: block; color: var(--text-dim); }

.quote-who { display: block; min-width: 0; }

/* ---------- narrow screens ---------- */

@media (max-width: 760px) {
  .quote {
    grid-template-columns: minmax(0, 1fr);
    border-radius: 8px;
  }
  .quote blockquote {
    grid-column: 1;
    grid-row: 2;
    padding-left: 0;
    border-left: 0;
  }
  .quote figcaption {
    grid-column: 1;
    grid-row: 1;
    display: flex;
    align-items: center;
    gap: 14px;
    padding-right: 0;
    padding-bottom: clamp(16px, 3vw, 20px);
    border-bottom: 1px solid rgba(0, 153, 255, 0.22);
  }
  .quote-photo { width: 56px; height: 56px; margin-bottom: 0; }
}

@media (max-width: 700px) {
  body { font-size: 16px; }
  .grid { grid-template-columns: 1fr; }
  .hero-jump { gap: 8px; }
  .hero-jump a { padding: 9px 15px; font-size: 0.83rem; }
  .facade-play { width: 54px; height: 54px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
  .facade:hover .facade-play,
  .facade:focus-visible .facade-play { scale: 1; }
}

@media print {
  /* The screen design is dark throughout. Printing that would empty a
     toner cartridge, so flatten every panel back to white on black. */
  :root {
    --ink: #ffffff; --ink-2: #eeeeee; --on-ink: #000000; --on-ink-dim: #444444;
    --paper: #ffffff; --paper-2: #ffffff; --text: #000000; --text-dim: #444444;
    --rule: #cccccc; --accent-ink: #005c99;
  }
  body, .hero, .closing, .films, .films.alt, .process {
    background: #ffffff !important;
    color: #000000;
  }
  .hero, .closing { background-image: none !important; }
  .facade-play { display: none; }
}