/* ─────────────────────────────────────────────────────────────────────
   Intelleco — light palette
   Loaded only when the URL carries ?light, scoped to body.theme-light.
   main.css is untouched, so the dark site is unaffected.

   The hero is the one structural change. Measurement of the actual film
   (assets are in video_clips/) showed the frame holds near-black and
   near-white in every region: 5th percentile 3, 95th percentile 230.
   Light type on it needs a 0.63 knock-down; dark type on a lightened
   version needs a 0.52 white veil. Either way roughly half the image is
   destroyed, and no placement escapes it.

   So here the type comes off the film entirely and sits in a solid card
   over it. The film runs at full strength with nothing laid over it, and
   the contrast comes from the card instead. Both of the client's asks are
   met at once: the film is untouched and the copy is dark on white.
   ──────────────────────────────────────────────────────────────────── */

body.theme-light {
  /*
   * Ground colour supplied by the client: #f5f4f1. Everything else steps
   * down from it, so panels and cards read as slightly recessed rather
   * than as white boxes floating on a tint.
   */
  --bg: #f5f4f1;
  --bg-tint: #edebe5;
  --bg-raise: #e3e0d8;
  --line: rgba(26, 26, 26, 0.16);
  --text: #1a1a1a;
  --muted: rgba(26, 26, 26, 0.66);
  --faint: rgba(26, 26, 26, 0.62);   /* 0.46 measured 2.91:1 on this ground and failed */
  /* #93aec4 measures 2.31:1 on white and fails. Same family, more weight. */
  --accent: #46688a;          /* 5.82:1 on white */
  --accent-strong: #2f4c6b;   /* 8.87:1 on white */

  padding-top: 76px;          /* the header is opaque here, so make room */
}

/* ── Header: solid from the first pixel ─────────────────────────────── */

body.theme-light .site-header {
  background: #ffffff;
  border-bottom: 1px solid var(--line);
}
body.theme-light .site-header.is-scrolled {
  background: rgba(255, 255, 255, 0.92);
  border-bottom-color: var(--line);
}
body.theme-light .site-nav__list a { color: var(--muted); }
body.theme-light .site-nav__list a:hover,
body.theme-light .site-nav__list .current-menu-item > a,
body.theme-light .site-nav__list .current_page_item > a { color: var(--text); }
body.theme-light .nav-toggle__bar { background: var(--text); }

@media (max-width: 1160px) {
  body.theme-light .site-nav { background: rgba(255, 255, 255, 0.98); }
}

/* ── Hero ───────────────────────────────────────────────────────────── */

/*
 * The filter is not removed, it is confined. Measurement of the film
 * showed no fixed text colour survives all five beats unaided: the frame
 * runs from near-black to near-white, so the best any beat manages with
 * nothing behind the type is 2.3:1 against a 4.5:1 requirement.
 *
 * So instead of a sheet over the whole picture, a translucent plate sits
 * behind the words only. At 62% it gives roughly 6:1 on the brightest
 * beat, and the image still reads through it. Everything outside the
 * plate, the gear and the aperture included, has nothing over it.
 *
 * It bleeds off the left edge deliberately. A block with air on all four
 * sides reads as something stuck onto a photograph; with three sides it
 * reads as part of the frame.
 */
body.theme-light .hero {
  min-height: calc(100svh - 76px);
  align-items: center;
  justify-content: flex-start;
  text-align: left;
  padding: 100px var(--pad) 80px 0;
}

body.theme-light .hero__scrim { display: none; }

body.theme-light .hero__content {
  max-width: 780px;
  background: rgba(14, 16, 22, 0.62);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  padding: clamp(36px, 4vw, 60px) clamp(36px, 4vw, 64px) clamp(36px, 4vw, 60px) var(--pad);
}

body.theme-light .hero__kicker {
  color: #cfe0ec;
  text-shadow: none;
  letter-spacing: 0.13em;
  font-size: 14.5px;
}
body.theme-light .hero__headline {
  color: #ffffff;
  font-size: clamp(34px, 4.2vw, 62px);
  text-shadow: none;
}
body.theme-light .hero__sub {
  color: rgba(255, 255, 255, 0.92);
  margin: 0 0 34px;
  max-width: 40ch;
  text-shadow: none;
}
body.theme-light .hero .button {
  border-color: rgba(255, 255, 255, 0.7);
  background: none;
  color: #ffffff;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
body.theme-light .hero .button:hover,
body.theme-light .hero .button:focus-visible {
  background: #ffffff;
  border-color: #ffffff;
  color: #111111;
}

body.theme-light .hero__scroll span {
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.7), transparent);
}

body.theme-light .hero__still--empty {
  background: radial-gradient(ellipse at 50% 40%, var(--bg-raise) 0%, var(--bg-tint) 70%);
  color: var(--faint);
}

/*
 * Phones. The film is 16:9 and a portrait viewport crops 71% of its width
 * away with object-fit: cover, which reduces the gear to a vertical sliver.
 * So on narrow screens it stops filling the screen and shows at its own
 * ratio, with the copy underneath. Nothing is cropped and nothing is
 * scaled down; it is the same file, framed honestly.
 */
@media (max-width: 860px) {
  body.theme-light .hero {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    min-height: 0;
    /* body.theme-light already reserves the header's height. */
    padding: 0;
  }
  body.theme-light .hero__video,
  body.theme-light .hero__still {
    position: relative;
    inset: auto;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
  }
  body.theme-light .hero__content {
    max-width: none;
    width: 100%;
    background: var(--bg);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    padding: 36px var(--pad) 44px;
  }
  /* On white the plate is gone, so the type goes back to dark. */
  body.theme-light .hero__kicker   { color: var(--accent); }
  body.theme-light .hero__headline { color: var(--text); }
  body.theme-light .hero__sub      { color: var(--muted); max-width: none; }
  body.theme-light .hero__lead     { color: var(--text); max-width: none; }
  body.theme-light .hero .button   {
    border-color: var(--text);
    background: var(--text);
    color: var(--bg);
  }
  body.theme-light .hero .button:hover,
  body.theme-light .hero .button:focus-visible {
    background: transparent;
    color: var(--text);
  }
  body.theme-light .hero__scroll { display: none; }
}

/* ── Page heads sit under an opaque header now ──────────────────────── */

body.theme-light .page-head { padding-top: clamp(48px, 7vw, 96px); }

/* ── Components that carried baked-in dark values ───────────────────── */

body.theme-light ::selection { background: rgba(70, 104, 138, 0.22); }

body.theme-light .button {
  border-color: rgba(26, 26, 26, 0.32);
  color: var(--text);
}
body.theme-light .button:hover,
body.theme-light .button:focus-visible {
  background: var(--text);
  border-color: var(--text);
  color: var(--bg);
}
body.theme-light .button--solid {
  background: var(--text);
  border-color: var(--text);
  color: var(--bg);
}
body.theme-light .button--solid:hover,
body.theme-light .button--solid:focus-visible {
  background: transparent;
  color: var(--text);
}

body.theme-light .prose a { border-bottom-color: rgba(70, 104, 138, 0.4); }

body.theme-light .img-placeholder {
  background:
    linear-gradient(135deg, rgba(70, 104, 138, 0.06), transparent 60%),
    var(--bg-raise);
}

/* Dark footage on a white page wants an edge, or it floats. */
body.theme-light .service-row__video,
body.theme-light .service-row__img,
body.theme-light .audience__media,
body.theme-light .project-card__media,
body.theme-light .intro__media img,
body.theme-light .intro__img {
  border: 1px solid var(--line);
}

body.theme-light .cta-band {
  background:
    radial-gradient(ellipse at 50% 120%, rgba(70, 104, 138, 0.07), transparent 60%),
    var(--bg-tint);
}

body.theme-light .form-notice--success { border-color: rgba(52, 120, 76, 0.45); color: #2f6b46; }
body.theme-light .form-notice--error   { border-color: rgba(150, 54, 54, 0.45); color: #8c3535; }

/* The footer needs to separate from a white page. */
body.theme-light .site-footer { background: var(--bg-raise); }
body.theme-light .site-footer__legal { border-top-color: var(--line); }