/* ============================================================
   SOLSEN MEDIA — LANDING PAGE
   styles.css

   Structure:
   1. Fonts (@font-face)
   2. Brand tokens (CSS custom properties) + theming
   3. Reset / base
   4. Typography helpers
   5. Layout helpers (container, section)
   6. Buttons
   7. Navigation (condense-on-scroll, theme toggle)
   8. Page-load loader (hero sequence)
   9. Section scaffolding placeholders
   10. Reduced-motion
============================================================ */

/* ============================================================
   1. FONTS
   LT Superior (TypeMates) — self-hosted woff2 in /fonts.
   Bebas Neue is loaded from Google Fonts in index.html.
============================================================ */
@font-face {
  font-family: "LT Superior";
  src: url("../fonts/LTSuperior-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "LT Superior";
  src: url("../fonts/LTSuperior-Italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "LT Superior";
  src: url("../fonts/LTSuperior-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "LT Superior";
  src: url("../fonts/LTSuperior-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "LT Superior";
  src: url("../fonts/LTSuperior-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ============================================================
   2. BRAND TOKENS + THEMING
============================================================ */
:root {
  /* --- Locked brand palette --- */
  --solsen-black: #060D0C;
  --warm-white:   #F0EDE5;
  --solsen-orange:#FF4A01;
  --mid-grey:     #818181;

  /* Supporting darks used in Proof / cards (derived) */
  --surface-raise: #171717;   /* row hover lift */
  --hairline:      #313033;   /* thin dividers on dark */

  /* --- Fonts --- */
  --font-body: "LT Superior", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-display: "Bebas Neue", "LT Superior", system-ui, sans-serif;

  /* --- UI --- */
  --radius-btn: 10px;
  --radius-card: 15px;
  --radius-tab: 24px;

  /* --- Rhythm --- */
  --maxw: 1280px;
  --gutter: clamp(1.25rem, 5vw, 4rem);
  --section-pad: clamp(4rem, 10vw, 9rem);

  /* --- Motion --- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --nav-h: 84px;
  --nav-h-condensed: 60px;

  /* --- Semantic theme vars (DARK is default) --- */
  --bg:        var(--solsen-black);
  --bg-elev:   #0c1413;
  --text:      var(--warm-white);
  --text-muted:var(--mid-grey);
  --accent:    var(--solsen-orange);
  --border:    rgba(240, 237, 229, 0.12);
  --nav-bg:    rgba(6, 13, 12, 0.55);
  --glass:     rgba(240, 237, 229, 0.10);
  color-scheme: dark;
}

/* --- LIGHT THEME --- */
[data-theme="light"] {
  --bg:        var(--warm-white);
  --bg-elev:   #e7e3d8;
  --text:      var(--solsen-black);
  --text-muted:#5d5d5d;
  --accent:    var(--solsen-orange);
  --border:    rgba(6, 13, 12, 0.14);
  --nav-bg:    rgba(240, 237, 229, 0.6);
  --glass:     rgba(6, 13, 12, 0.06);
  color-scheme: light;
}

/* ============================================================
   3. RESET / BASE
============================================================ */
*, *::before, *::after { box-sizing: border-box; }

* { margin: 0; }

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

body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--text);
  line-height: 1.55;
  font-size: 1rem;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  transition: background-color 0.5s var(--ease-out), color 0.5s var(--ease-out);
}

img, video, svg { display: block; max-width: 100%; }

a { color: inherit; text-decoration: none; }

button { font: inherit; color: inherit; cursor: pointer; background: none; border: none; }

ul { list-style: none; padding: 0; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ============================================================
   4. TYPOGRAPHY HELPERS
============================================================ */
.display {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 0.92;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}

.eyebrow {
  font-size: 0.8rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-muted);
  font-weight: 500;
}

/* ============================================================
   5. LAYOUT HELPERS
============================================================ */
.container {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section {
  position: relative;
  padding-block: var(--section-pad);
}

/* Hero + full-bleed sections opt out of default padding */
.section--hero,
.section--ticker {
  padding-block: 0;
}

/* Scaffold placeholder visuals (REMOVE as each section is built) */
.section:not(.section--hero):not(.section--ticker)::after {
  content: attr(aria-label);
  display: block;
  font-family: var(--font-display);
  font-size: clamp(2rem, 6vw, 4rem);
  color: var(--text-muted);
  opacity: 0.25;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  text-align: center;
  padding-inline: var(--gutter);
}
.section--ticker { min-height: 30vh; display: grid; place-items: center; }

/* ============================================================
   6. BUTTONS
============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  padding: 0.85em 1.6em;
  border-radius: var(--radius-btn);
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.01em;
  line-height: 1;
  white-space: nowrap;
  transition: transform 0.25s var(--ease-out),
              background-color 0.25s var(--ease-out),
              color 0.25s var(--ease-out),
              border-color 0.25s var(--ease-out);
  will-change: transform;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn--primary {
  background: var(--accent);
  color: var(--warm-white);
}
.btn--primary:hover {
  background: #ff5e1f;
  box-shadow: 0 8px 28px -8px rgba(255, 74, 1, 0.6);
}

.btn--secondary {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--text);
}
.btn--secondary:hover {
  border-color: var(--accent);
  color: var(--accent);
}

/* ============================================================
   7. NAVIGATION
   Reference: metalab.com — condenses on scroll, blur backdrop.
============================================================ */
.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  transition: height 0.35s var(--ease-out),
              background-color 0.35s var(--ease-out),
              backdrop-filter 0.35s var(--ease-out),
              border-color 0.35s var(--ease-out),
              transform 0.6s var(--ease-out),
              opacity 0.6s var(--ease-out);
  border-bottom: 1px solid transparent;

  /* Starts hidden above the viewport; JS adds .is-in to drop it down (step 3) */
  transform: translateY(-100%);
  opacity: 0;
}
.nav.is-in { transform: translateY(0); opacity: 1; }

/* If reduced motion, never hide the nav (no drop animation) */
@media (prefers-reduced-motion: reduce) {
  .nav { transform: none; opacity: 1; }
}

/* At the TOP the nav is transparent and sits over the always-dark hero, so its
   text must stay light in BOTH themes (otherwise light mode turns the wordmark
   and links Solsen Black against the dark hero and they vanish). Once condensed,
   the nav has a themed frosted backdrop over content and uses the theme colour. */
.nav[data-state="top"] { color: var(--warm-white); }
.nav[data-state="top"] .nav__links a { color: rgba(240, 237, 229, 0.7); }
.nav[data-state="top"] .nav__links a:hover { color: var(--warm-white); }

/* Condensed state — set by JS on scroll down */
.nav[data-state="condensed"] {
  height: var(--nav-h-condensed);
  background: var(--nav-bg);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
  border-bottom-color: var(--border);
}

.nav__inner {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

/* Logo */
.nav__logo {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  margin-right: auto;
}
/* Real Solsen logo (black S on white) shown as a white rounded tile */
.nav__logo-img {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  object-fit: contain;
  background: var(--warm-white);
}
.nav__logo-word {
  font-family: var(--font-display);
  font-size: 1.5rem;
  letter-spacing: 0.12em;
}

/* Links */
.nav__links {
  display: flex;
  gap: 1.75rem;
}
.nav__links a {
  font-size: 0.9rem;
  color: var(--text-muted);
  transition: color 0.2s var(--ease-out);
}
.nav__links a:hover { color: var(--text); }

.nav__actions {
  display: flex;
  align-items: center;
  gap: 1rem;
}

/* Theme toggle (switch) */
.theme-toggle {
  --tt-w: 46px;
  --tt-h: 26px;
  padding: 4px;
  border-radius: 999px;
}
.theme-toggle__track {
  display: block;
  width: var(--tt-w);
  height: var(--tt-h);
  border-radius: 999px;
  background: var(--glass);
  border: 1px solid var(--border);
  position: relative;
  transition: background-color 0.3s var(--ease-out);
}
.theme-toggle__thumb {
  position: absolute;
  top: 50%;
  left: 3px;
  width: calc(var(--tt-h) - 8px);
  height: calc(var(--tt-h) - 8px);
  border-radius: 50%;
  background: var(--text);
  transform: translateY(-50%);
  transition: transform 0.3s var(--ease-out), background-color 0.3s var(--ease-out);
}
/* In LIGHT theme the thumb slides right */
[data-theme="light"] .theme-toggle__thumb {
  transform: translate(calc(var(--tt-w) - var(--tt-h)), -50%);
  background: var(--accent);
}

/* CTA hides its label on small screens? keep visible per brief */
.nav__cta { padding-block: 0.6em; }

/* ============================================================
   8. PAGE-LOAD LOADER (Hero sequence step 1 + 2)
============================================================ */
.loader {
  position: fixed;
  inset: 0;
  z-index: 1000;
  pointer-events: none;
}
.loader__bar {
  position: absolute;
  top: 0; left: 0;
  height: 3px;
  width: 0%;
  background: var(--accent);
  z-index: 2;
}
.loader__overlay {
  position: absolute;
  inset: 0;
  background: var(--solsen-black);
  z-index: 1;
}
/* JS adds .is-done to fade the whole loader away */
.loader.is-done { opacity: 0; transition: opacity 0.6s var(--ease-out); }

/* ============================================================
   GLOBAL — SPINNING BACKGROUND LOGO
   Large, slow, low-opacity "planet" behind all content.
============================================================ */
.bg-spin {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: -1;             /* below all content and the nav (nav z-index: 100) */
  pointer-events: none;    /* never blocks clicks / text selection */
  display: grid;
  place-items: center;
  overflow: hidden;
}
.bg-spin__video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  opacity: 0.09;           /* visible but subtle (within 0.06–0.12) */
  transition: opacity 0.4s linear;   /* smooths the JS-driven loop fade */
  pointer-events: none;    /* never interactive — no tap-to-show-controls on touch */
}
/* Mobile / iOS only (≤820px) — desktop styles above are left completely untouched.
   1. `contain` letterboxes the landscape clip → `cover` fills the viewport.
   2. iOS draws a native play-button glyph over a background <video> unless it's
      forced onto a hardware-accelerated compositing layer. The -webkit-mask-image
      radial-gradient hack forces that GPU layer (and translateZ(0) reinforces it),
      which suppresses the play button. */
@media (max-width: 820px) {
  /* Hide the spinning <video> entirely on mobile (no video element = iOS can never
     draw a play button) and swap in a static logo watermark with the same feel. */
  .bg-spin__video { display: none; }
  .bg-spin {
    position: fixed;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    pointer-events: none;
    background-image: url("../assets/img/Solsen-Logo.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 60vw;         /* large, centred */
    opacity: 0.08;                 /* low, subtle watermark */
  }
  /* The mark is black-on-white; invert it on the dark theme so the watermark reads
     as a faint light logo (matching the spinning version) instead of a pale box. */
  [data-theme="dark"] .bg-spin { filter: invert(1); }
}

/* ============================================================
   9. SECTION 1 — HERO
   Full 100vh · showreel video bg · top-down dark gradient · content.
   (Animations + mouse-blur added in a later pass.)
============================================================ */
.section--hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;          /* avoids mobile URL-bar jump where supported */
  display: flex;
  align-items: center;          /* content centred in the viewport */
  overflow: hidden;
  isolation: isolate;           /* keeps overlay/content stacking self-contained */

  /* The hero always sits over the showreel video + a dark gradient overlay,
     so it stays a DARK section in both themes — its text must remain light,
     independent of the page --text colour. Otherwise light mode turns the
     headline Solsen Black against the dark overlay and it vanishes. */
  color: var(--warm-white);
}

/* Background video — covers the section */
.hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
  background: var(--solsen-black);  /* fallback while video loads / if missing */
  pointer-events: none;
  display: none;                    /* hidden until JS confirms the source can play —
                                       stops a missing/placeholder file showing iOS's
                                       broken play-button glyph through the overlay */
}
.hero__video.is-ready { display: block; }
/* Mobile: keep the hero on its clean dark gradient — never show the video here */
@media (max-width: 820px) {
  .hero__video,
  .hero__video.is-ready { display: none; }
}

/* Gradient overlay: darkest at top fading down so the headline stays legible.
   Second layer lifts the bottom slightly behind the content. */
.hero__overlay {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(
      to bottom,
      rgba(6, 13, 12, 0.92) 0%,
      rgba(6, 13, 12, 0.45) 38%,
      rgba(6, 13, 12, 0.35) 62%,
      rgba(6, 13, 12, 0.85) 100%
    );
}

.hero__content {
  position: relative;
  padding-top: calc(var(--nav-h) + 2rem);
  max-width: var(--maxw);
  text-align: center;          /* centre headline, subhead, CTA */
}

.hero__title {
  font-size: clamp(3.25rem, 12vw, 10rem);
  margin-bottom: 1.25rem;
  text-wrap: balance;
}
/* Clip-mask: outer line clips, inner slides up from y:100% -> 0 (set by GSAP) */
.hero__line {
  display: block;
  overflow: hidden;
  padding-bottom: 0.04em;   /* prevents descenders/letterforms being clipped */
}
.hero__line-inner {
  display: block;
  will-change: transform;
}

.hero__subhead {
  font-size: clamp(1.05rem, 2.2vw, 1.5rem);
  color: var(--warm-white);   /* stays light over the dark hero in both themes */
  max-width: 34ch;
  margin: 0 auto 2rem;        /* centred */
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;    /* centre the CTA */
}
.hero__cta {
  font-size: 1.05rem;
  padding: 1.05em 2.1em;
}

/* --- Mouse-follow blur spotlight --- */
/* Cursor position, defaulting to centre until the mouse moves. */
.section--hero { --mouse-x: 50%; --mouse-y: 50%; }

.hero__blur {
  position: absolute;
  inset: 0;
  z-index: 4;                 /* above video, overlay AND content -> blurs them */
  pointer-events: none;        /* clicks/hover pass through to the CTA */
  display: none;               /* enabled by JS only on fine-pointer + hover devices */
}
/* JS adds this once it confirms a hover-capable, fine pointer (non-touch) */
.section--hero.hero--spotlight .hero__blur { display: block; }

.hero__blur-layer {
  position: absolute;
  inset: 0;
  will-change: transform;      /* promote to its own layer for smoother compositing */
}

/* Each layer: a different blur strength + a radial mask that is TRANSPARENT
   (hides the layer -> sharp) at the cursor and OPAQUE (shows the blur) outward.
   Staggered start/end stops give a soft, layered falloff:
   light blur appears closest to the cursor, heavy blur only far out. */
.hero__blur-layer--1 {
  -webkit-backdrop-filter: blur(2.8px);
          backdrop-filter: blur(2.8px);
  -webkit-mask-image: radial-gradient(circle at var(--mouse-x) var(--mouse-y),
            transparent 0%, transparent 14%, #000 28%);
          mask-image: radial-gradient(circle at var(--mouse-x) var(--mouse-y),
            transparent 0%, transparent 14%, #000 28%);
}
.hero__blur-layer--2 {
  -webkit-backdrop-filter: blur(4px);
          backdrop-filter: blur(4px);
  -webkit-mask-image: radial-gradient(circle at var(--mouse-x) var(--mouse-y),
            transparent 0%, transparent 16%, #000 38%);
          mask-image: radial-gradient(circle at var(--mouse-x) var(--mouse-y),
            transparent 0%, transparent 16%, #000 38%);
}
.hero__blur-layer--3 {
  -webkit-backdrop-filter: blur(7px);
          backdrop-filter: blur(7px);
  -webkit-mask-image: radial-gradient(circle at var(--mouse-x) var(--mouse-y),
            transparent 0%, transparent 18%, #000 50%);
          mask-image: radial-gradient(circle at var(--mouse-x) var(--mouse-y),
            transparent 0%, transparent 18%, #000 50%);
}

/* Reduced motion: never run the tracking blur — show the sharp hero. */
@media (prefers-reduced-motion: reduce) {
  .section--hero.hero--spotlight .hero__blur { display: none; }
}

@media (max-width: 720px) {
  .section--hero { align-items: center; }
  .hero__content { padding-bottom: 0; }
}

/* Built sections opt out of the scaffold placeholder label */
.section.is-built::after { content: none !important; }

/* ============================================================
   SECTION 2 — WHO THIS IS FOR  (centred, tight under the hero)
============================================================ */
.section--who { padding-top: clamp(2rem, 5vw, 3.5rem); }
.who { text-align: center; }
.who__eyebrow { margin-bottom: 1.25rem; }

.who__heading {
  font-size: clamp(2rem, 5vw, 3.75rem);
  max-width: 20ch;
  margin: 0 auto clamp(2.5rem, 6vw, 4.5rem);
}

.who__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(2rem, 5vw, 4rem);   /* more breathing room between tiles */
}

/* Shared cinematic image treatment — identical for WHO cards AND HOW step media.
   Same filter + same overlay so every photo reads like one cohesive shoot. */
.cine { position: relative; overflow: hidden; }
.cine__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(20%) contrast(1.1) brightness(0.7);
  transition: transform 0.4s ease, filter 0.4s ease;
}
.cine::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(rgba(6, 13, 12, 0.6), rgba(6, 13, 12, 0.2));
  transition: background 0.4s ease;
}

/* WHO cinematic image cards */
.who__card {
  position: relative;
  aspect-ratio: 3 / 4;
  border-radius: var(--radius-card);
  border: 1px solid var(--border);
  background: var(--solsen-black);   /* dark fallback until/if image is present */
  transition: transform 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease;
}
.who__card-label {
  position: absolute;
  z-index: 2;
  left: 0;
  right: 0;
  bottom: clamp(1.25rem, 2.5vw, 1.75rem);
  padding-inline: clamp(1.1rem, 2.2vw, 1.6rem);
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2.4vw, 2rem);
  line-height: 1.05;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--warm-white);
  text-align: left;
  transition: transform 0.4s ease;
}
/* Hover: image scales, overlay lightens, card lifts + shadow, label rises, orange border */
.who__card:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 50px -22px rgba(0, 0, 0, 0.7);
  border-color: var(--accent);
}
.who__card:hover .cine__img { transform: scale(1.05); }
.who__card:hover::after { background: linear-gradient(rgba(6, 13, 12, 0.45), rgba(6, 13, 12, 0.1)); }
.who__card:hover .who__card-label { transform: translateY(-4px); }

.who__note {
  margin: clamp(2rem, 4vw, 3rem) auto 0;
  font-size: clamp(1.1rem, 2vw, 1.5rem);
  color: var(--text-muted);
  max-width: 36ch;
}

@media (max-width: 720px) {
  .who__grid { grid-template-columns: 1fr; }
  .who__card { aspect-ratio: 4 / 3; }
}

/* ============================================================
   SECTION 3 — LOGO TICKER
   Infinite, seamless CSS marquee with fade edges.
============================================================ */
.section--ticker {
  /* override the scaffold's centred-grid placeholder layout */
  display: block;
  min-height: 0;
  padding-block: clamp(2.5rem, 6vw, 4.5rem);
}

.ticker__label {
  margin-bottom: clamp(1.25rem, 3vw, 2rem);
}

/* Full-bleed viewport with soft fade-in/out at both edges.
   width/max-width pin the clipping box to its parent so the max-content track
   inside is clipped (and faded) rather than expanding the box to its own width. */
.ticker__viewport {
  position: relative;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 8%, #000 92%, transparent 100%);
          mask-image: linear-gradient(to right, transparent 0%, #000 8%, #000 92%, transparent 100%);
}

.ticker__track {
  display: flex;
  align-items: center;
  width: max-content;             /* never shrink — lets the duplicated set sit end-to-end */
  animation: ticker-scroll 45s linear infinite;
  /* The marquee is a core brand element and must auto-scroll on EVERY device.
     The global reduced-motion reset (`* { animation-duration:.001ms!important }`)
     would otherwise freeze it on reduce-motion phones, so override just the
     duration + iteration-count with higher specificity + !important. We leave
     animation-play-state untouched so the desktop hover-pause still works. */
  animation-duration: 45s !important;
  animation-iteration-count: infinite !important;
  will-change: transform;
}

/* Pause on hover (nice-to-have) — only on real hover/fine-pointer devices.
   On touchscreens :hover "sticks" after a tap/scroll-touch, which would freeze
   the marquee permanently, so it must be gated out for coarse pointers. */
@media (hover: hover) and (pointer: fine) {
  .ticker__viewport:hover .ticker__track { animation-play-state: paused; }
}

@keyframes ticker-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }   /* exactly one full set -> seamless wrap */
}

/* Each item: a uniform-size logo box with the client name underneath.
   Per-item padding (not flex gap) keeps both sets identical for a seamless loop. */
.ticker__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.65rem;
  padding-inline: clamp(1.5rem, 3vw, 2.75rem);
  text-align: center;
}

/* Uniform footprint so every logo occupies the same space regardless of shape.
   Flexbox (not grid) so the image's max-height:100% resolves against the box's
   fixed 56px height — under grid+place-items the row grew to the image's
   intrinsic size, which let tall logos overflow and get clipped. */
.ticker__logo-box {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 176px;
  height: 68px;
}
.ticker__logo-box img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;     /* full logo always shown, never cropped */
  transition: opacity 0.3s var(--ease-out);
}

/* Captions removed per request */
.ticker__name { display: none; }

/* Recolour the transparent (silhouette-able) logos to the brand text colour so
   they're uniform and visible: Warm White on dark, Solsen Black on light.
   Only the 6 logos with transparent backgrounds can be recoloured this way —
   the 7 flat JPEGs have baked-in white/dark/colour backgrounds and would just
   turn into solid blocks, so they're intentionally left native here. */
/* Isle of Man FC and Manx Hockey are kept in their original colours (crests). */
[data-theme="dark"] .ticker__logo-box img[src*="Dedicated"],
[data-theme="dark"] .ticker__logo-box img[src*="swift_supps"],
[data-theme="dark"] .ticker__logo-box img[src*="Hansard"],
[data-theme="dark"] .ticker__logo-box img[src*="captive"] {
  filter: brightness(0) invert(1);
}
[data-theme="light"] .ticker__logo-box img[src*="Dedicated"],
[data-theme="light"] .ticker__logo-box img[src*="swift_supps"],
[data-theme="light"] .ticker__logo-box img[src*="Hansard"],
[data-theme="light"] .ticker__logo-box img[src*="captive"] {
  filter: brightness(0);
}

/* (Ticker auto-scroll under reduced-motion is handled directly on .ticker__track
   via !important duration/iteration-count above — no separate override needed.
   .ticker__viewport keeps overflow:hidden from its base rule, so it is never a
   manual scroll container.) */

/* ============================================================
   SECTION 4 — THE PROBLEM + COST OF INACTION
   Emotional core. Big opening statement, house analogy revealed
   line-by-line, then the cost of staying invisible.
============================================================ */
/* Centred emotional core; reduced bottom padding tightens the gap to What We Do */
.problem { text-align: center; }
.section--problem { padding-bottom: clamp(2.5rem, 5vw, 4rem); }

.problem__statement {
  font-size: clamp(2.75rem, 7.5vw, 6.5rem);   /* bigger */
  line-height: 0.98;
  max-width: 22ch;
  margin: 0 auto clamp(3rem, 8vw, 6rem);
}

/* House analogy — punchy story lines, centred */
.problem__line {
  font-size: clamp(1.4rem, 3.2vw, 2.4rem);
  font-weight: 500;
  line-height: 1.28;
  max-width: 26ch;
  margin: 0 auto clamp(1.5rem, 3.5vw, 2.75rem);
  color: var(--text-muted);
  transition: color 0.4s var(--ease-out);
}
/* The line that lands the point reads in full strength */
.problem__line--key {
  color: var(--text);
  max-width: 28ch;
}

/* Three story image placeholders alongside the analogy */
.problem__visuals {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1rem, 2.5vw, 2rem);
  margin-top: clamp(2.5rem, 6vw, 4.5rem);
}
.problem__shot { display: flex; flex-direction: column; gap: 0.75rem; }
.problem__shot-box {
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-card);
  border: 1px solid var(--border);
  background:
    radial-gradient(120% 120% at 30% 20%, rgba(255, 74, 1, 0.08), transparent 60%),
    var(--glass);
}
.problem__shot figcaption {
  font-size: 0.8rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* The cost — short, confronting, big Bebas consequences, centred */
.problem__cost {
  margin-top: clamp(4rem, 10vw, 8rem);
}
.problem__cost-label {
  display: block;
  color: var(--accent);
  margin-bottom: clamp(1.5rem, 3.5vw, 2.5rem);
}
.problem__cost ul {
  display: flex;
  flex-direction: column;
  align-items: center;            /* centre the consequence lines */
  gap: clamp(0.75rem, 2vw, 1.5rem);
}
.problem__cost-line {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 7vw, 6rem);   /* bigger */
  line-height: 0.98;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}
.accent { color: var(--accent); }

@media (max-width: 640px) {
  .problem__visuals { grid-template-columns: 1fr; }
}

/* ============================================================
   SECTION 5 — WHAT WE DO (THE LAYER STACK)
   Fallback-first: static stacked accordion always works; JS adds
   the sticky scroll-driven reveal as progressive enhancement.
============================================================ */
/* Reduced top space + tighter intro */
.section--stack { padding-top: clamp(1.5rem, 4vw, 3rem); }
.stack-intro {
  margin-bottom: clamp(1.5rem, 3.5vw, 2.5rem);
  text-align: center;
}
.stack-intro .eyebrow { margin-bottom: 1rem; }
.stack__heading {
  font-size: clamp(2rem, 5vw, 4rem);
  max-width: 22ch;
  margin-inline: auto;
}

.stack { position: relative; }

/* Scroll mode (JS adds .is-scroll on capable, non-touch, motion-OK setups):
   tall scroll track + sticky pin. Aligned toward the top so the tabs sit
   high (less empty dark space above). */
.stack.is-scroll { min-height: 160vh; }
.stack.is-scroll .stack__pin {
  position: sticky;
  top: 0;
  min-height: 100vh;
  display: flex;
  align-items: flex-start;
  padding-top: clamp(2rem, 5vh, 4rem);
}

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

/* "Package complete" wordmark above the stack — centred block */
.stack__wordmark {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  letter-spacing: 0.14em;
  color: var(--accent);
  margin: 0 auto clamp(1.25rem, 2.5vw, 2rem);
  max-width: 760px;
}

.stack__list {
  display: flex;
  flex-direction: column;
  gap: clamp(0.7rem, 1.4vw, 1.1rem);
  max-width: 760px;        /* larger tabs */
  margin-inline: auto;     /* centred on the page, content stays left-aligned */
}

/* Frosted glass pill */
.layer {
  border-radius: 24px;
  border: 1px solid var(--border);
  background: var(--glass);
  -webkit-backdrop-filter: blur(27px);
  backdrop-filter: blur(27px);
  overflow: hidden;
  transition: border-color 0.3s var(--ease-out), background-color 0.3s var(--ease-out);
}
.layer.is-open { border-color: rgba(255, 74, 1, 0.5); }

.layer__head {
  width: 100%;
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2vw, 1.5rem);
  padding: clamp(1.5rem, 2.8vw, 2.1rem) clamp(1.5rem, 3vw, 2.4rem);
  text-align: left;
}
.layer__index {
  font-family: var(--font-display);
  font-size: 1rem;
  color: var(--text-muted);
  letter-spacing: 0.05em;
  flex: none;
}
.layer__titles { display: flex; flex-direction: column; gap: 0.2rem; margin-right: auto; }
.layer__title {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 3vw, 2.6rem);
  line-height: 1;
  letter-spacing: 0.02em;
}
.layer__tagline {
  font-size: clamp(0.85rem, 1.4vw, 1rem);
  color: var(--text-muted);
}

/* + icon, drawn with two bars; rotates 45deg -> x on open */
.layer__icon {
  position: relative;
  width: 26px;
  height: 26px;
  flex: none;
  color: var(--text);
  transition: transform 0.4s var(--ease-out), color 0.3s var(--ease-out);
}
.layer__icon::before,
.layer__icon::after {
  content: "";
  position: absolute;
  background: currentColor;
  border-radius: 2px;
}
.layer__icon::before { top: 50%; left: 2px; right: 2px; height: 2px; transform: translateY(-50%); }
.layer__icon::after { left: 50%; top: 2px; bottom: 2px; width: 2px; transform: translateX(-50%); }
.layer.is-open .layer__icon { transform: rotate(45deg); color: var(--accent); }

/* Expanding panel — grid-rows 0fr->1fr with an overshoot ease for spring feel */
.layer__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.42s cubic-bezier(0.34, 1.4, 0.64, 1);
}
.layer__panel-inner { overflow: hidden; opacity: 0; transition: opacity 0.3s var(--ease-out); }
.layer.is-open .layer__panel { grid-template-rows: 1fr; }
.layer.is-open .layer__panel-inner { opacity: 1; transition-delay: 0.1s; }

.layer__desc {
  padding: 0 clamp(1.25rem, 2.5vw, 2rem) clamp(1.25rem, 2.5vw, 1.75rem);
  padding-left: calc(clamp(1.25rem, 2.5vw, 2rem) + 1rem);
  font-size: clamp(1rem, 1.5vw, 1.15rem);
  color: var(--text-muted);
  max-width: 56ch;
}
.layer__included {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0 clamp(1.25rem, 2.5vw, 2rem) clamp(1.5rem, 3vw, 2rem);
  padding-left: calc(clamp(1.25rem, 2.5vw, 2rem) + 1rem);
}
.layer__included li {
  position: relative;
  padding-left: 1.25rem;
  font-size: clamp(0.95rem, 1.4vw, 1.05rem);
}
.layer__included li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
}

.stack__footnote {
  margin: clamp(1.25rem, 2.5vw, 1.75rem) auto 0;   /* directly beneath the tabs */
  color: var(--text-muted);
  font-size: clamp(1rem, 1.6vw, 1.25rem);
  max-width: 760px;
  text-align: left;
}

/* Reduced motion: instant accordion */
@media (prefers-reduced-motion: reduce) {
  .layer__panel { transition: none; }
  .layer__panel-inner, .layer__icon { transition: none; }
}

/* ============================================================
   SECTION 6 — HOW IT WORKS
   Clean numbered steps, image placeholder alongside (alternating),
   light reveal-on-scroll per step.
============================================================ */
.section--how { padding-top: clamp(2rem, 4vw, 3rem); }
.how__header {
  margin-bottom: clamp(2.5rem, 6vw, 4.5rem);
  text-align: center;
}
.how__heading {
  font-size: clamp(2.5rem, 7vw, 5.5rem);
  margin-bottom: 1rem;
}
.how__subline {
  font-size: clamp(1.1rem, 2vw, 1.5rem);
  color: var(--text-muted);
  max-width: 36ch;
  margin-inline: auto;
}

.how__steps {
  display: flex;
  flex-direction: column;
  gap: clamp(3.5rem, 8vw, 7rem);
}

.step {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: clamp(2rem, 5vw, 5rem);
}
/* Grid safety: stop either column forcing overflow / clipping its content */
.step > * { min-width: 0; }
/* Alternate the media side for editorial rhythm */
.step:nth-child(even) .step__media { order: -1; }

.step__content {
  text-align: center;
  padding-inline: clamp(0.75rem, 2vw, 1.75rem);   /* breathing room; never clip the text */
}
.step__num {
  display: block;
  font-size: clamp(3rem, 7vw, 6rem);
  line-height: 0.9;
  color: var(--accent);
  margin-bottom: clamp(1rem, 2vw, 1.5rem);
}
.step__title {
  font-size: clamp(1.6rem, 3vw, 2.6rem);
  font-weight: 600;
  line-height: 1.05;
  margin-bottom: 0.75rem;
}
.step__desc {
  font-size: clamp(1.05rem, 1.7vw, 1.3rem);
  color: var(--text-muted);
  max-width: 34ch;
  margin-inline: auto;
}

/* Image / short-clip placeholder */
.step__media {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-card);
  border: 1px solid var(--border);
  background: var(--solsen-black);   /* dark fallback behind the image */
  overflow: hidden;
}
/* Step 3 — position the crop so the camera reads clearly */
.cine__img--bottom { object-position: 50% 82%; }
/* Canada Life logo badge, bottom-right of the filming card */
.step__brand {
  position: absolute;
  z-index: 3;
  right: clamp(0.6rem, 1.4vw, 1rem);
  bottom: clamp(0.6rem, 1.4vw, 1rem);
  height: 26px;
  width: auto;
  border-radius: 6px;
}
/* Step 4 — clear (no dark filter/overlay) so the results image reads clearly */
.step__media--clear.cine::after { content: none; }
.step__media--clear .cine__img { filter: none; }

@media (max-width: 760px) {
  .step { grid-template-columns: 1fr; gap: 1.5rem; }
  /* Media always below the text on mobile, regardless of alternation */
  .step:nth-child(even) .step__media { order: 0; }
}

/* ============================================================
   SECTION 7 — PROOF (THE WORK)
   Full-width rows, 1px dividers, hover bg lift + preview expand.
   Renders immediately (no scroll entrance) — fast and clean.
============================================================ */
.work__header { margin-bottom: clamp(2.5rem, 6vw, 4.5rem); }
.work__header .eyebrow { margin-bottom: 1rem; }
.work__heading { font-size: clamp(2.5rem, 8vw, 6rem); }

/* Full-bleed list with a hairline at the top; each row gets a bottom divider */
.work__list {
  border-top: 1px solid var(--hairline);
}

.work__row {
  display: grid;
  grid-template-columns: 170px minmax(0, 1fr) 300px 210px;
  align-items: start;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  padding: clamp(1.5rem, 2.6vw, 2rem) var(--gutter);
  border-bottom: 1px solid var(--hairline);
  transition: background-color 0.3s var(--ease-out);
}
.work__row:hover { background: var(--surface-raise); }
/* Light mode: lift to a clearly contrasting warm tone so text stays legible */
[data-theme="light"] .work__row:hover { background: #E0DDD6; }

/* Logo column */
.work__logo {
  display: flex;
  align-items: center;
  min-height: 32px;
}
.work__logo img {
  max-height: 30px;
  max-width: 100%;
  width: auto;
  object-fit: contain;
}
.work__logo-text {
  font-family: var(--font-display);
  font-size: 1.05rem;
  line-height: 1.05;
  letter-spacing: 0.03em;
  color: var(--text-muted);
  text-transform: uppercase;
}

/* Tint only the transparent logos to the theme text colour (warm white on dark,
   Solsen Black on light); leave the JPEG / crest logos in their own colours. */
[data-theme="dark"] .logo-tint { filter: brightness(0) invert(1); }
[data-theme="light"] .logo-tint { filter: brightness(0); }

/* Name + description */
.work__name {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.4vw, 2.1rem);
  line-height: 1;
  letter-spacing: 0.02em;
  margin-bottom: 0.6rem;
}
.work__desc {
  font-size: clamp(0.95rem, 1.3vw, 1.05rem);
  color: var(--text-muted);
  max-width: 60ch;
}

/* Hover-reveal preview — expands height 0 -> 16rem */
.work__media { align-self: stretch; }
.work__media-inner {
  width: 100%;
  height: 0;
  overflow: hidden;
  border-radius: 12px;
  background:
    radial-gradient(120% 120% at 30% 20%, rgba(255, 74, 1, 0.10), transparent 60%),
    var(--glass);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: height 0.4s var(--ease-out);
}
.work__media-inner span {
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted);
  opacity: 0;
  transition: opacity 0.3s var(--ease-out);
}
.work__row:hover .work__media-inner { height: 16rem; }
.work__row:hover .work__media-inner span { opacity: 1; transition-delay: 0.15s; }

/* Preview media (video + image) — identical size + cohesive on-brand filter */
.work__preview {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(15%) contrast(1.05) brightness(0.85);
}

/* Service tags */
.work__tags {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.work__tags li {
  font-size: 0.9rem;
  color: var(--text-muted);
}

/* Mobile: stack to single column, images always visible, tags comma-separated */
@media (max-width: 820px) {
  .work__row {
    grid-template-columns: 1fr;
    gap: 1rem;
    padding-block: 1.75rem;
  }
  /* No hover on touch — show the preview as a clean, intentional resting thumbnail.
     Lighter filter (the desktop grayscale + 0.85 brightness reads as murky/broken
     on a small screen) and a fixed, comfortable height. */
  .work__media-inner {
    height: 13rem;                                     /* always visible, generous */
    background: var(--surface-raise);                 /* solid backing, no glass blur */
  }
  .work__media-inner span { display: none; }          /* drop the LOADING-style label */
  .work__preview {
    filter: contrast(1.02) brightness(0.98) saturate(1.02);  /* crisp, near-true colour */
  }
  .work__tags { flex-direction: row; flex-wrap: wrap; gap: 0; }
  .work__tags li:not(:last-child)::after { content: ",\00A0"; }
}

/* ============================================================
   SECTION 8 — TESTIMONIALS
   Sticky scaling background heading + two parallax columns of
   frosted-glass quote cards (right column slightly faster).
============================================================ */
.section--testimonials {
  position: relative;
  padding-block: 0;          /* spacing handled internally */
  overflow: clip;            /* keep the sticky heading + parallax strictly inside this section.
                                overflow:clip (not hidden) doesn't create a scroll container,
                                so the child's position:sticky keeps working. */
}

/* Sticky background heading (sits behind the cards) */
.tst__bg {
  position: sticky;
  top: 0;
  height: 100vh;
  display: grid;
  place-items: end center;   /* heading sits LOWER in the viewport */
  padding-bottom: clamp(3rem, 9vh, 8rem);
  z-index: 0;
  perspective: 800px;        /* slight perspective for the scale */
  overflow: hidden;
}
.tst__heading {
  font-family: var(--font-display);
  font-size: clamp(4rem, 15vw, 15rem);   /* unmissable */
  line-height: 0.86;
  text-align: center;
  color: var(--warm-white);
  opacity: 1;                /* full Warm White, clearly readable */
  max-width: 15ch;
  padding-inline: var(--gutter);
  transform: scale(1);       /* JS scrubs 0.9 -> 1.1 */
  will-change: transform;
}
/* Light mode: switch to Solsen Black so it stays readable */
[data-theme="light"] .tst__heading { color: var(--solsen-black); }

/* Cards overlap the sticky heading and scroll over it */
.tst__cards {
  position: relative;
  z-index: 2;
  margin-top: -100vh;
  min-height: 100vh;         /* guarantees the section is ≥100vh tall so it fully contains
                                the 100vh sticky heading — stops it bleeding into the next section */
  padding-block: 14vh;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  align-items: start;
}
.tst__col {
  display: flex;
  flex-direction: column;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  will-change: transform;
}
/* Right column starts staggered lower (JS then parallaxes it faster) */
.tst__col--right { margin-top: clamp(3rem, 10vw, 8rem); }

/* Frosted dark glass card */
.tst__card {
  background: rgba(240, 237, 229, 0.10);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border: 1px solid var(--border);
  border-radius: 15px;
  padding: clamp(1.5rem, 2.6vw, 2rem);
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
}
.tst__quote {
  font-size: clamp(1.05rem, 1.6vw, 1.3rem);
  line-height: 1.45;
  color: var(--text);
}
.tst__person {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: auto;
}
.tst__avatar {
  flex: none;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--accent);
  color: var(--warm-white);
  font-family: var(--font-display);
  font-size: 1.5rem;
  line-height: 1;
}
.tst__meta { display: flex; flex-direction: column; }
.tst__name { font-weight: 600; }
.tst__role { font-size: 0.9rem; color: var(--text-muted); }

/* Placeholder card — clearly not a real quote */
.tst__card--placeholder {
  border-style: dashed;
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  align-items: center;
  justify-content: center;
  min-height: 8rem;
}
.tst__placeholder-text {
  color: var(--text-muted);
  font-size: 0.95rem;
  letter-spacing: 0.04em;
}

/* Tablet / mobile: drop the overlap + parallax, single column */
@media (max-width: 820px) {
  .tst__bg {
    position: static;
    height: auto;
    padding-block: clamp(3rem, 12vw, 6rem);
    perspective: none;
  }
  .tst__heading { transform: none !important; }
  .tst__cards {
    margin-top: 0;
    min-height: 0;           /* no forced 100vh on mobile — section flows to content height */
    grid-template-columns: 1fr;
    padding-block: 0 clamp(4rem, 12vw, 7rem);
  }
  .tst__col { transform: none !important; }
  .tst__col--right { margin-top: 0; }
}

/* ============================================================
   SECTION 9 — THE SOLSEN WAY
   Two-column contrast: Solsen (bright, confident) vs Typical (muted).
============================================================ */
.way__header { margin-bottom: clamp(2.5rem, 6vw, 4.5rem); }
.way__header .eyebrow { margin-bottom: 1rem; }
.way__heading {
  font-size: clamp(2.5rem, 7vw, 5.5rem);
  margin-bottom: 1.25rem;
}
.way__intro {
  font-size: clamp(1.1rem, 1.8vw, 1.4rem);
  color: var(--text-muted);
  max-width: 40ch;
}

.way__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: clamp(1.25rem, 4vw, 4rem);
}

/* Column headers */
.way__head {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2.6vw, 2.2rem);
  letter-spacing: 0.02em;
  padding-bottom: clamp(1rem, 2vw, 1.5rem);
  border-bottom: 1px solid var(--border);
}
.way__head--solsen { color: var(--text); }
.way__head--typical { color: var(--mid-grey); }

/* Contrast cells */
.way__cell {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  padding-block: clamp(1.1rem, 2.4vw, 1.6rem);
  border-bottom: 1px solid var(--hairline);
  font-size: clamp(1.05rem, 1.8vw, 1.45rem);
  line-height: 1.25;
}
.way__cell--solsen { color: var(--text); font-weight: 600; }
.way__cell--typical { color: var(--text-muted); font-weight: 400; }

.way__mark {
  flex: none;
  width: 24px;
  height: 24px;
  margin-top: 0.05em;
}
.way__cell--solsen .way__mark { color: var(--accent); }
.way__cell--typical .way__mark { color: var(--mid-grey); }

@media (max-width: 600px) {
  .way__grid { column-gap: 1rem; }
  .way__cell { gap: 0.5rem; }
  .way__mark { width: 20px; height: 20px; }
}

/* ============================================================
   SECTION 10 — FAQ
   GSAP accordion: clean type, thin dividers, no boxes.
============================================================ */
.faq__header { margin-bottom: clamp(2.5rem, 6vw, 4rem); text-align: center; }
.faq__header .eyebrow { margin-bottom: 1rem; }
.faq__heading { font-size: clamp(2.5rem, 7vw, 5.5rem); }

.faq__list {
  max-width: 920px;
  margin-inline: auto;          /* centred on the page */
  border-top: 1px solid var(--hairline);
}
.faq__item { border-bottom: 1px solid var(--hairline); }  /* thin 1px divider beneath each */

.faq__q {
  width: 100%;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;       /* centre the question */
  gap: 1rem;
  padding: clamp(1.25rem, 2.6vw, 1.85rem) 2.75rem;
  text-align: center;
}
.faq__q-text {
  font-size: clamp(1.2rem, 2.2vw, 1.7rem);
  font-weight: 500;
  line-height: 1.2;
  transition: color 0.3s var(--ease-out);
}
.faq__q:hover .faq__q-text { color: var(--accent); }

/* + icon (two bars); GSAP rotates it 45deg -> x on open.
   Pinned right via top/margin (not transform) so GSAP's rotation stays clean. */
.faq__icon {
  position: absolute;
  right: 0;
  top: 50%;
  margin-top: -12px;
  flex: none;
  width: 24px;
  height: 24px;
  color: var(--text);
  transition: color 0.3s var(--ease-out);
}
.faq__icon::before,
.faq__icon::after {
  content: "";
  position: absolute;
  background: currentColor;
  border-radius: 2px;
}
.faq__icon::before { top: 50%; left: 1px; right: 1px; height: 2px; transform: translateY(-50%); }
.faq__icon::after { left: 50%; top: 1px; bottom: 1px; width: 2px; transform: translateX(-50%); }
.faq__item.is-open .faq__icon { color: var(--accent); }

/* Answer — collapsed by default (also correct before GSAP / with no JS) */
.faq__a {
  height: 0;
  overflow: hidden;
}
.faq__a-inner {
  opacity: 0;
  padding-bottom: clamp(1.25rem, 2.6vw, 1.85rem);
  max-width: 68ch;
  margin-inline: auto;
  text-align: center;
}
.faq__a-inner p {
  font-size: clamp(1rem, 1.5vw, 1.15rem);
  line-height: 1.55;
  color: var(--text-muted);
}

/* No-GSAP fallback: class-driven open (instant, still usable) */
.no-gsap .faq__item.is-open .faq__a { height: auto; }
.no-gsap .faq__item.is-open .faq__a-inner { opacity: 1; }
.no-gsap .faq__item.is-open .faq__icon { transform: rotate(45deg); }

/* ============================================================
   SECTION 11 — FINAL CTA
   Big dark full-width close: video, script lines, headline, CTA.
============================================================ */
.section--cta {
  text-align: center;
  padding-block: clamp(4rem, 10vw, 9rem);
}
.cta { display: flex; flex-direction: column; align-items: center; }

/* Shae-to-camera video placeholder */
.cta__video {
  width: 100%;
  max-width: 1000px;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-card);
  border: 1px solid var(--border);
  background:
    radial-gradient(120% 120% at 50% 30%, rgba(255, 74, 1, 0.10), transparent 60%),
    var(--glass);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  color: var(--text-muted);
}
.cta__play { width: 64px; height: 64px; opacity: 0.7; }
.cta__video-label {
  font-size: 0.8rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* Script, line by line */
.cta__script {
  max-width: 760px;
  margin-top: clamp(3rem, 7vw, 5.5rem);
  display: flex;
  flex-direction: column;
  gap: clamp(1rem, 2.4vw, 1.6rem);
}
.cta__line {
  font-size: clamp(1.2rem, 2.4vw, 1.9rem);
  line-height: 1.3;
  color: var(--text-muted);
}
.cta__line--key { color: var(--text); font-weight: 600; }

/* Reflective quote block — LT Superior italic, centred.
   Theme-aware: Warm White on dark, Solsen Black on light (sits on the page bg). */
.cta__quote {
  margin: clamp(3.5rem, 9vw, 7rem) auto 0;
  max-width: 30ch;
  font-family: var(--font-body);
  font-style: italic;
  font-size: clamp(1.3rem, 2.6vw, 2.1rem);
  line-height: 1.55;
  color: var(--text);
  text-align: center;
}

/* Big close + CTA */
.cta__close { margin-top: clamp(3rem, 7vw, 5rem); }
.cta__headline {
  font-size: clamp(2.75rem, 9vw, 8rem);
  line-height: 0.95;
  max-width: 16ch;
  margin: 0 auto clamp(2rem, 4vw, 2.75rem);
}
.cta__btn { font-size: 1.1rem; padding: 1.1em 2.4em; }

/* ============================================================
   FOOTER
============================================================ */
.footer {
  border-top: 1px solid var(--hairline);
  padding-block: clamp(3rem, 6vw, 5rem);
}
.footer__inner { display: flex; flex-direction: column; gap: clamp(2.5rem, 6vw, 4rem); }
.footer__top {
  display: flex;
  justify-content: space-between;
  gap: clamp(2rem, 6vw, 4rem);
  flex-wrap: wrap;
}
.footer__logo { display: inline-flex; align-items: center; gap: 0.55rem; }
.footer__logo-img {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  object-fit: contain;
  background: var(--warm-white);
}
.footer__logo-word { font-family: var(--font-display); font-size: 1.5rem; letter-spacing: 0.12em; }
.footer__tagline {
  margin-top: 1rem;
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2.4vw, 1.9rem);
  color: var(--text);
}

.footer__cols { display: flex; gap: clamp(2.5rem, 6vw, 5rem); }
.footer__col { display: flex; flex-direction: column; gap: 0.6rem; }
.footer__label {
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 0.25rem;
}
.footer__col a { color: var(--text); transition: color 0.2s var(--ease-out); }
.footer__col a:hover { color: var(--accent); }

.footer__bottom {
  display: flex;
  justify-content: space-between;
  gap: 1rem 2rem;
  flex-wrap: wrap;
  padding-top: clamp(1.5rem, 3vw, 2rem);
  border-top: 1px solid var(--hairline);
}
.footer__copy { color: var(--text-muted); font-size: 0.9rem; }
.footer__disclaimer { color: var(--mid-grey); font-size: 0.8rem; max-width: 52ch; }

@media (max-width: 600px) {
  .footer__cols { flex-direction: column; gap: 1.75rem; }
}


/* ============================================================
   10. REDUCED MOTION
============================================================ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* ============================================================
   RESPONSIVE
============================================================ */
@media (max-width: 720px) {
  :root { --nav-h: 64px; --nav-h-condensed: 54px; }
  .nav__links { display: none; }
  .nav__logo-word { display: none; }
}