/* ==========================================================
   FYD STUDIO · main.css
   Single stylesheet, organised by section. Use Find (Ctrl+F)
   on any "==========" header below to jump around.

      01. DESIGN TOKENS         ← edit colors / fonts here
      02. RESET + BASE
      03. PERSISTENT BACKGROUND (bg-cosmic, bg-grain)
      04. NAVIGATION
      05. HERO
      06. TICKER
      07. SHARED — Section heads, kicker, h2/h3, btn, lede
      08. PILLARS (What we do)
      09. STATS BAR
      10. PACK CARDS (production / marketing / real estate)
      11. PROCESS TIMELINE
      12. WORK GRID (lazy-loaded videos)
      13. WHY GRID
      14. QUOTES
      15. FAQ ACCORDION
      16. CONTACT (form + direct card)
      17. FOOTER
      18. REVEAL ANIMATIONS
      19. RESPONSIVE
   ========================================================== */


/* ==========================================================
   01. DESIGN TOKENS
   Change these to retheme the entire site.
   ========================================================== */
:root{
  /* color */
  --bg:        #04050a;
  --bg-2:      #0a0c14;
  --ink:       #ece5d7;
  --ink-soft:  #c9c2b3;
  --dim:       #7a7268;
  --line:      rgba(236,229,215,.10);
  --line-2:    rgba(236,229,215,.20);
  --panel:     rgba(8,10,16,.75);

  --amber:     #ff8a3d;
  --amber-2:   #ff6f1f;
  --cyan:      #5df2e6;
  --violet:    #8a5cff;
  --rose:      #ff4d6d;

  /* type */
  --serif:    'Fraunces', Georgia, serif;
  --sans:     'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --ital:     'Instrument Serif', Georgia, serif;
  --mono:     'JetBrains Mono', ui-monospace, 'Cascadia Mono', monospace;

  /* layout */
  --maxw:     1480px;
  --pad-x:    6vw;
  --section-y:    96px;   /* vertical breathing per section (was a flat 140px) */
  --grid-gap-top: 40px;   /* gap between a section head and its grid */

  /* motion */
  --ease:     cubic-bezier(.16,.84,.32,1);
}


/* ==========================================================
   02. RESET + BASE
   ========================================================== */
*{margin:0;padding:0;box-sizing:border-box}
/* scroll-behavior handled by Lenis (app.js bootMotion); native smooth removed
   so it doesn't fight Lenis. Anchor clicks are routed through Lenis / a smooth
   fallback in JS. */
html{}
html,body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.6;
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
body{overflow-x:hidden}
img,video{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;border:none;background:none;color:inherit}
::selection{background:var(--amber);color:#04050a}
:focus-visible{outline:2px solid var(--amber);outline-offset:3px;border-radius:2px}

/* ----------------------------------------------------------
   CUSTOM CURSOR (app.js bootCursor)
   A dot + a lagging ring, mix-blend-mode:difference so it
   inverts over both themes. Auto-disabled on touch / reduced
   motion. Native cursor stays on text fields.
   ---------------------------------------------------------- */
.fyd-cursor{ position:fixed;top:0;left:0;z-index:9999;pointer-events:none;mix-blend-mode:difference; }
.fyd-cursor-dot,.fyd-cursor-ring{ position:absolute;top:0;left:0;border-radius:50%;will-change:transform; }
.fyd-cursor-dot{ width:8px;height:8px;margin:-4px 0 0 -4px;background:#fff; }
.fyd-cursor-ring{
  width:34px;height:34px;margin:-17px 0 0 -17px;border:1px solid #fff;
  display:flex;align-items:center;justify-content:center;
  transition:width .3s var(--ease),height .3s var(--ease),margin .3s var(--ease),
             opacity .3s,background-color .3s var(--ease),border-color .3s var(--ease);
}
.fyd-cursor-label{
  font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:#fff;white-space:nowrap;
  opacity:0;transform:scale(.8);transition:opacity .25s,transform .25s var(--ease);
}
/* Hide the native cursor on EVERYTHING (links, buttons, inputs, logos, cards)
   so the custom cursor is the only one shown — many elements set their own
   cursor:pointer/text which would otherwise leak through. */
body.cursor-on, body.cursor-on *{ cursor:none !important; }
body.cursor-on.cursor-hover .fyd-cursor-ring{ width:54px;height:54px;margin:-27px 0 0 -27px;opacity:.55; }
/* Per-film state — over a showreel tile the cursor drops the difference blend,
   fills with that film's colour, grows, and shows the film label. */
body.cursor-film .fyd-cursor{ mix-blend-mode:normal; }
body.cursor-film .fyd-cursor-dot{ opacity:0; }
body.cursor-film .fyd-cursor-ring{
  width:88px;height:88px;margin:-44px 0 0 -44px;
  background:var(--cursor-col,#ff8a3d);border-color:var(--cursor-col,#ff8a3d);opacity:1;
}
body.cursor-film .fyd-cursor-label{ opacity:1;transform:scale(1); }
@media (prefers-reduced-motion:reduce){ .fyd-cursor{ display:none; } body.cursor-on{ cursor:auto; } }
@media (pointer:coarse){ .fyd-cursor{ display:none!important; } body.cursor-on{ cursor:auto!important; } }


/* ==========================================================
   03. PERSISTENT BACKGROUND
   Multi-layer radial gradients + svg noise overlay.
   No canvas, no WebGL, fully GPU-composited by browser.
   ========================================================== */
.bg-cosmic{
  position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:
    radial-gradient(ellipse 90% 50% at 50% 0%,    rgba(255,138,61,.12), transparent 60%),
    radial-gradient(ellipse 80% 60% at 100% 100%, rgba(138,92,255,.10), transparent 60%),
    radial-gradient(ellipse 70% 50% at 0% 80%,    rgba(93,242,230,.06), transparent 70%),
    var(--bg);
}
.bg-grain{
  position:fixed;inset:0;z-index:-1;pointer-events:none;
  mix-blend-mode:overlay;opacity:.42;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .14 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}


/* ==========================================================
   04. NAVIGATION
   Fixed glass pill at top. Logo · links · CTA.
   ========================================================== */
/* Minimal, transparent, full-width header (litmus-style). No pill, no strip —
   logo left, controls right; the fullscreen menu carries all navigation. */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:60;
  display:flex;align-items:center;justify-content:space-between;
  padding:24px var(--pad-x);
  pointer-events:none;               /* clicks pass through the empty middle */
}
.nav > *{ pointer-events:auto; }
.nav-logo{
  display:flex;align-items:center;color:var(--amber);
  transition:opacity .4s var(--ease);
}
.nav-logo:hover{ opacity:.7; }
.nav-logo .logo-mark{ height:26px;width:auto;display:block; }
.nav-actions{ display:flex;align-items:center;gap:16px; }
/* The desktop link strip + header CTA are retired — all nav lives in the
   fullscreen overlay menu now. Kept as no-ops in case markup lingers. */
.nav-links{ display:none; }
.nav-cta{ display:none; }


/* ==========================================================
   07. SHARED — Section heads, kicker, headlines, lede, button
   (Defined before HERO so HERO can reference)
   ========================================================== */
.section{
  position:relative;
  max-width:var(--maxw);
  margin:0 auto;
  padding:var(--section-y) var(--pad-x);
}
.section-head{
  max-width:62ch;
  margin-bottom:40px;
}
.section-head-center{margin-left:auto;margin-right:auto;text-align:center}

.kicker{
  display:inline-flex;align-items:center;gap:14px;
  font-family:var(--mono);font-size:12px;font-weight:500;
  letter-spacing:.22em;text-transform:uppercase;
  color:var(--ink-soft);margin-bottom:18px;
}
.kicker::before{
  content:"";width:40px;height:1px;background:var(--amber);
  box-shadow:0 0 8px rgba(255,138,61,.5);
}
.kicker b{color:var(--amber);font-weight:600;font-size:13px}
.kicker-amber{color:var(--amber)}
.kicker-amber b{color:var(--amber)}

h2{
  font-family:var(--sans);font-weight:700;font-optical-sizing:auto;
  font-size:clamp(40px,5.2vw,84px);
  line-height:1.02;letter-spacing:-.03em;text-wrap:balance;
  color:#fff;max-width:16ch;
  /* Same descender treatment as .hero-h — Instrument Serif italic
     swashes on y/g/p/f reach well below the line box, so we add
     bottom padding and keep overflow visible. */
  padding-bottom:.32em;
  overflow:visible;
}
h2 em{
  font-family:var(--ital);font-style:italic;
  background:linear-gradient(120deg, var(--amber), var(--rose) 40%, var(--violet) 70%, var(--cyan));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  display:inline-block;
  line-height:1.12;
}
h3{
  font-family:var(--sans);font-weight:600;
  font-size:clamp(22px,2.2vw,30px);
  line-height:1.15;letter-spacing:-.018em;color:#fff;
  /* Make sure italic descenders aren't cropped */
  overflow:visible;
}
h3 em{
  font-family:var(--ital);font-style:italic;
  color:var(--amber);
  display:inline-block;
  line-height:1.2;
}

.lede{
  max-width:54ch;margin-top:22px;
  color:var(--ink-soft);font-size:16px;line-height:1.65;text-wrap:balance;
}
.lede em{color:var(--amber);font-style:italic;font-family:var(--ital)}

.btn{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--mono);font-size:12px;
  letter-spacing:.16em;text-transform:uppercase;
  padding:18px 26px;border-radius:99px;
  background:rgba(10,12,18,.5);
  border:1px solid var(--line-2);color:var(--ink);
  position:relative;overflow:hidden;
  transition:.3s var(--ease);
  backdrop-filter:blur(8px);
}
.btn:hover{border-color:var(--amber);color:var(--amber);transform:translateY(-2px)}
.btn-prim{background:var(--amber);color:#04050a;border-color:transparent;box-shadow:0 0 50px rgba(255,138,61,.5)}
.btn-prim:hover{background:var(--amber-2);color:#04050a;box-shadow:0 0 80px rgba(255,138,61,.75)}
.btn::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(120deg, transparent 30%, rgba(255,255,255,.2), transparent 70%);
  transform:translateX(-100%);transition:.7s;
}
.btn:hover::before{transform:translateX(100%)}
.btn .arrow{transition:transform .3s var(--ease)}
.btn:hover .arrow{transform:translateX(4px)}


/* ==========================================================
   05. HERO
   Massive serif headline with per-word reveal + 4 corner overlays.
   ========================================================== */
.hero{
  position:relative;
  min-height:100vh;
  display:flex;align-items:center;justify-content:center;
  padding:120px var(--pad-x) 120px;
  overflow:hidden;
  /* perspective for hero-inner 3D tilt */
  perspective:1400px;
}

/* WebGL canvas behind the hero text — cosmic flow shader */
.hero-shader{
  position:absolute;inset:0;
  width:100%;height:100%;
  z-index:0;
  /* fade in once shader has rendered first frame (set by JS) */
  opacity:0;transition:opacity 1.2s var(--ease);
  pointer-events:none;
  /* soft fade at top + bottom so shader blends with sections above/below */
  -webkit-mask-image:linear-gradient(180deg, transparent 0%, #000 14%, #000 86%, transparent 100%);
          mask-image:linear-gradient(180deg, transparent 0%, #000 14%, #000 86%, transparent 100%);
}
.hero-shader.on{opacity:1}

/* ----- Floating hero card stack (right side, 3 video tiles) ----- */
.hero-stack{
  position:absolute;
  top:50%;right:5vw;
  width:380px;height:540px;
  transform:translateY(-50%);
  perspective:1400px;
  z-index:1;
  pointer-events:none;
  /* fade in once images settle */
  opacity:0;transform:translateY(-50%) scale(.96);
  transition:opacity 1.2s 1.2s var(--ease), transform 1.2s 1.2s var(--ease);
}
body.ready .hero-stack{opacity:1;transform:translateY(-50%) scale(1)}

.hero-card{
  position:absolute;
  width:230px;
  border:1px solid var(--line-2);border-radius:14px;
  overflow:hidden;
  background:#0a0c14;
  box-shadow:
    0 30px 80px rgba(0,0,0,.55),
    0 0 0 1px rgba(255,255,255,.03) inset;
  transition:transform .6s var(--ease), box-shadow .4s var(--ease);
  transform-style:preserve-3d;
  pointer-events:auto;
}
.hero-card video{
  width:100%;height:100%;
  display:block;
  object-fit:cover;
  aspect-ratio:9/16;
}
/* small floating tag at bottom of each card */
.hc-tag{
  position:absolute;
  left:14px;bottom:12px;
  font-family:var(--mono);font-size:9px;
  letter-spacing:.24em;text-transform:uppercase;
  color:var(--ink);
  background:rgba(8,10,16,.78);
  padding:5px 10px;border-radius:99px;
  border:1px solid var(--line-2);
  backdrop-filter:blur(6px);
}
.hc-tag b{color:var(--amber);margin-right:8px;font-weight:500}

/* layout each card with a different rotation + position + accent glow */
.hero-card-1{
  top:8%;right:0;
  height:54%;
  transform:rotate(4deg) translateZ(40px);
  box-shadow:
    0 30px 80px rgba(0,0,0,.55),
    0 0 40px rgba(255,138,61,.20),
    0 0 0 1px rgba(255,138,61,.18) inset;
}
.hero-card-2{
  top:30%;left:0;
  height:60%;
  transform:rotate(-6deg) translateZ(80px);
  width:240px;
  box-shadow:
    0 30px 80px rgba(0,0,0,.55),
    0 0 50px rgba(255,77,109,.20),
    0 0 0 1px rgba(255,77,109,.18) inset;
}
.hero-card-3{
  bottom:0;right:8%;
  height:50%;
  transform:rotate(10deg) translateZ(20px);
  width:200px;
  box-shadow:
    0 30px 80px rgba(0,0,0,.55),
    0 0 40px rgba(93,242,230,.18),
    0 0 0 1px rgba(93,242,230,.18) inset;
}

/* gentle continuous float — staggered timing per card */
@keyframes float-1{0%,100%{transform:rotate(4deg)  translateZ(40px) translateY(0)}50%{transform:rotate(4deg)  translateZ(40px) translateY(-12px)}}
@keyframes float-2{0%,100%{transform:rotate(-6deg) translateZ(80px) translateY(0)}50%{transform:rotate(-6deg) translateZ(80px) translateY(-16px)}}
@keyframes float-3{0%,100%{transform:rotate(10deg) translateZ(20px) translateY(0)}50%{transform:rotate(10deg) translateZ(20px) translateY(-10px)}}
.hero-card-1{animation:float-1 6.5s ease-in-out infinite}
.hero-card-2{animation:float-2 7.5s ease-in-out -2s infinite}
.hero-card-3{animation:float-3 5.8s ease-in-out -4s infinite}

/* small label below the stack */
.hero-stack-label{
  position:absolute;
  left:0;bottom:-28px;
  font-family:var(--mono);font-size:9px;
  letter-spacing:.30em;text-transform:uppercase;
  color:var(--dim);
}

/* mouse parallax — JS sets --sx / --sy on the .hero-stack */
.hero-stack{
  transform:translateY(-50%) scale(1) translate3d(var(--sx,0px), var(--sy,0px), 0);
}

/* ----- Mobile-only video carousel (auto-slides) -----
   Layout:
     .hero-mobile-video → fixed-aspect rounded shell with shadow
       └ .hmv-track     → horizontal scroll-snap container (5 slides)
           └ .hmv-slide → one slide per video (100% width)
       └ .hmv-dots      → progress indicators at bottom-right
*/
.hero-mobile-video{
  display:none; /* shown only on mobile via @media below */
  position:relative;
  margin-top:32px;
  border-radius:14px;
  overflow:hidden;
  border:1px solid var(--line-2);
  background:#0a0c14;
  aspect-ratio:16/9;
  box-shadow:
    0 30px 60px rgba(0,0,0,.55),
    0 0 40px rgba(255,138,61,.18),
    0 0 0 1px rgba(255,138,61,.18) inset;
}
.hmv-track{
  display:flex;
  width:100%;height:100%;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.hmv-track::-webkit-scrollbar{display:none}
.hmv-slide{
  flex:0 0 100%;
  scroll-snap-align:center;
  scroll-snap-stop:always;
  position:relative;
  height:100%;
}
.hmv-slide video{
  width:100%;height:100%;
  object-fit:cover;display:block;
}
.hmv-tag{
  position:absolute;left:14px;bottom:14px;
  font-family:var(--mono);font-size:10px;
  letter-spacing:.24em;text-transform:uppercase;
  color:var(--ink);
  background:rgba(8,10,16,.78);
  padding:7px 12px;border-radius:99px;
  border:1px solid var(--line-2);
  backdrop-filter:blur(6px);
  z-index:2;
}
.hmv-tag b{color:var(--amber);margin-right:8px;font-weight:500}

/* progress dots */
.hmv-dots{
  position:absolute;
  bottom:14px;right:14px;
  display:flex;align-items:center;gap:6px;
  padding:8px 10px;
  background:rgba(8,10,16,.78);
  border:1px solid var(--line-2);
  border-radius:99px;
  backdrop-filter:blur(6px);
  z-index:2;
}
.hmv-dot{
  width:5px;height:5px;border-radius:50%;
  background:rgba(236,229,215,.32);
  transition:.4s var(--ease);
}
.hmv-dot.active{
  width:18px;border-radius:99px;
  background:var(--amber);
  box-shadow:0 0 12px rgba(255,138,61,.6);
}

.hero-inner{
  position:relative;
  width:100%;max-width:var(--maxw);
  z-index:1;
  /* tilt baseline — JS updates --tx / --ty on mousemove */
  transform-style:preserve-3d;
  transform:rotateX(var(--ty,0deg)) rotateY(var(--tx,0deg));
  transition:transform .35s var(--ease);
}
.hero-inner > *{transform:translateZ(0)}
.hero-inner .hero-h{transform:translateZ(40px)}
.hero-inner .hero-sub{transform:translateZ(20px)}
.hero-inner .hero-ctas{transform:translateZ(30px)}

.eyebrow{
  display:inline-flex;align-items:center;gap:14px;
  font-family:var(--mono);font-size:12px;font-weight:500;
  letter-spacing:.22em;text-transform:uppercase;
  color:var(--ink-soft);margin-bottom:26px;
}
.eyebrow .bar{
  display:inline-block;width:40px;height:1px;background:var(--amber);
  box-shadow:0 0 8px rgba(255,138,61,.5);
}

.hero-h{
  font-family:var(--sans);font-weight:800;
  font-size:clamp(56px,9vw,148px);
  line-height:.94;letter-spacing:-.04em;
  color:#fff;max-width:14ch;
  /* Instrument Serif's italic y/g/p have a long ornamental swash that
     dips ~38% below the baseline. With line-height:.92 the line box is
     shorter than the glyph, so we add bottom padding + overflow:visible
     to make sure nothing clips. */
  padding-bottom:.42em;
  overflow:visible;
}
/* The italic span's own line-height needs a touch more room too —
   otherwise its line box clips its descender independently. */
.hero-h em{
  line-height:1.15;
  display:inline-block;
  /* The italic swash on the last letter (sell / stay) overhangs the glyph
     box; with -webkit-background-clip:text that overhang falls outside the
     gradient box and renders empty, reading as a clipped letter. A little
     right padding extends the box so the whole swash gets the gradient. */
  padding-right:.14em;
}
.hero-h em{
  font-family:var(--ital);font-style:italic;
  background:linear-gradient(120deg, var(--amber), var(--rose) 35%, var(--violet) 65%, var(--cyan));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.hero-h-indent{display:block;padding-left:5vw}

/* per-word reveal animation */
.hero-h .word{
  display:inline-block;opacity:0;
  transform:translateY(48px);
  filter:blur(8px);
  transition:opacity 1s var(--ease), transform 1.1s var(--ease), filter 1s var(--ease);
}
body.ready .hero-h .word{opacity:1;transform:none;filter:blur(0)}
body.ready .hero-h .word:nth-child(2){transition-delay:.10s}
body.ready .hero-h .word:nth-child(3){transition-delay:.20s}
body.ready .hero-h-indent .word:nth-child(1){transition-delay:.34s}
body.ready .hero-h-indent .word:nth-child(2){transition-delay:.44s}
body.ready .hero-h-indent .word:nth-child(3){transition-delay:.54s}

/* When GSAP owns the hero intro (bootHeroIntro adds body.gsap-hero), kill the
   CSS reveal transitions so the two systems don't double-animate. */
body.gsap-hero .hero-h .word,
body.gsap-hero .eyebrow,
body.gsap-hero .hero-sub,
body.gsap-hero .hero-ctas{ transition:none !important; }

/* Theme-locked pages (homepage / clients) are dark-only — hide the toggle. */
body.dark-locked .theme-toggle{ display:none; }

/* Header contrast: while over the dark hero video in LIGHT theme, the Menu
   trigger + theme toggle need light ink (the logo is amber, fine either way).
   Reverts to themed ink once scrolled past the hero, and never applies while
   the (cream) fullscreen menu is open. */
body.light.over-hero:not(.menu-open) .nav-menu-toggle,
body.light.over-hero:not(.menu-open) .theme-toggle{ color:#ece5d7; }

.hero-sub{
  margin-top:34px;max-width:50ch;
  color:var(--ink-soft);font-size:16px;line-height:1.6;
  opacity:0;transform:translateY(20px);
  transition:opacity 1s .9s var(--ease), transform 1s .9s var(--ease);
}
.hero-sub b{color:var(--ink);font-weight:500}
body.ready .hero-sub{opacity:1;transform:none}

.hero-ctas{
  display:flex;gap:14px;margin-top:36px;flex-wrap:wrap;
  opacity:0;transform:translateY(20px);
  transition:opacity 1s 1.1s var(--ease), transform 1s 1.1s var(--ease);
}
body.ready .hero-ctas{opacity:1;transform:none}

/* corner overlays */
.hero-corner{
  position:absolute;
  font-family:var(--mono);font-size:10px;
  letter-spacing:.24em;text-transform:uppercase;
  color:var(--dim);line-height:1.7;
  opacity:0;transition:opacity 1s 1.4s var(--ease);
}
body.ready .hero-corner{opacity:1}
.hero-corner b{color:var(--ink);font-weight:500}
.hero-corner span{color:var(--ink)}
.hero-corner-tl{top:36px;left:36px}
.hero-corner-tl .dot{
  display:inline-block;width:6px;height:6px;border-radius:50%;
  background:var(--cyan);margin-right:8px;
  box-shadow:0 0 12px var(--cyan);
  animation:pulse 1.6s infinite;
}
@keyframes pulse{0%,100%{opacity:.4}50%{opacity:1}}
.hero-corner-tr{top:36px;right:36px;text-align:right}
.hero-corner-tr .live{color:var(--cyan)}
.hero-corner-bl{
  bottom:32px;left:36px;
  font-family:var(--ital);font-style:italic;
  font-size:18px;letter-spacing:0;text-transform:none;
  color:var(--ink);
}
.hero-corner-bl small{
  font-family:var(--mono);font-style:normal;
  display:block;margin-top:6px;
  font-size:10px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--dim);
}
.hero-corner-br{bottom:36px;right:36px;display:flex;align-items:center;gap:14px}
.hero-corner-br .line{
  display:inline-block;width:48px;height:1px;
  background:linear-gradient(90deg, transparent, var(--ink), transparent);
  animation:slide 2.2s infinite;
}
@keyframes slide{
  0%{transform:translateX(-12px);opacity:.3}
  50%{opacity:1}
  100%{transform:translateX(12px);opacity:.3}
}


/* ==========================================================
   05b. HERO BACKGROUND VIDEO + FILM SECTIONS
   The showreel plays behind the hero; each brand film gets its own
   section (alternating sides). Videos auto-play in view (app.js
   bootVideoTiles); the cursor recolours per film on hover.
   ========================================================== */
/* --- Hero background video --- */
.hero-video{ position:absolute; inset:0; z-index:0; overflow:hidden; }
.hero-video video{ width:100%; height:100%; object-fit:cover; display:block; }
.hero-video::after{
  content:""; position:absolute; inset:0;
  /* darker at the very top (keeps the nav legible over bright frames) and at
     the bottom, letting the video breathe through the middle */
  background:linear-gradient(180deg, rgba(4,5,10,.8), rgba(4,5,10,.6) 42%, rgba(4,5,10,.82));
}
/* Hero text stays light over the video in BOTH themes (the hero is a dark
   cinematic block even in light mode). */
.hero-sub{ color:rgba(236,229,215,.86); }
.hero-sub b{ color:#fff; }
.hero .eyebrow{ color:rgba(236,229,215,.86); }
.hero-corner-bl{ color:rgba(236,229,215,.72); }
body.light .hero-h .word:not(em){ color:#fff; }
body.light .hero-sub{ color:rgba(236,229,215,.86); }
body.light .hero-sub b{ color:#fff; }
body.light .hero .eyebrow{ color:rgba(236,229,215,.86); }
body.light .hero-corner-bl{ color:rgba(236,229,215,.72); }

/* --- Selected Work — captionless film grid (videos auto-play in view) --- */
.film-grid{
  display:grid; grid-template-columns:repeat(2,1fr); gap:18px;
  margin-top:var(--grid-gap-top);
}
.film-media{
  position:relative; aspect-ratio:16/9; overflow:hidden; border-radius:16px;
  background:#0a0c14; border:1px solid var(--line);
}
.film-media video{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .7s var(--ease); }
.film-media:hover video{ transform:scale(1.04); }
@media (max-width:760px){ .film-grid{ grid-template-columns:1fr; } }


/* ==========================================================
   06. CLIENT LOGO MARQUEE
   JS-driven (app.js bootLogoMarquee) so it can smoothly ease its
   speed to a crawl on hover — not a hard CSS pause. White chips
   because the brand PNGs are dark-on-transparent.
   ========================================================== */
.logo-marquee{
  overflow:hidden;position:relative;z-index:1;padding:38px 0;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  background:rgba(6,9,14,.55);
}
.logo-marquee-track{
  display:flex;align-items:center;gap:66px;width:max-content;will-change:transform;
}
/* Logos are pre-processed white transparent silhouettes (assets/clients/mono),
   shown big directly on the band — no chips. Light theme inverts them to dark. */
.logo-item{
  flex:0 0 auto;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;
}
.logo-item img{
  max-height:60px;max-width:340px;width:auto;height:auto;object-fit:contain;display:block;
  opacity:.72;transition:opacity .35s var(--ease);
}
/* Compact / icon / stacked logos get an optical size boost so they carry the
   same visual weight as the wide wordmarks (a square mark must be taller than
   a wide wordmark to read as the same "size"). */
.logo-item.lg img{ max-height:90px;max-width:260px; }
.logo-item:hover img{ opacity:1; }
.logo-name{
  font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:#fff;opacity:.55;white-space:nowrap;
}
@media (max-width:680px){
  .logo-marquee-track{ gap:40px; }
  .logo-item img{ max-height:46px;max-width:250px; }
  .logo-item.lg img{ max-height:68px;max-width:190px; }
}


/* ==========================================================
   08. PILLARS
   Three columns — what we do.
   ========================================================== */
.pillars{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:8px;
  overflow:hidden;
}
.pillars-4{grid-template-columns:repeat(4,1fr)}
.pillar{
  background:rgba(8,10,16,.78);
  padding:48px 36px;min-height:340px;
  display:flex;flex-direction:column;justify-content:space-between;
  position:relative;transition:.5s var(--ease);
}
.pillar::before{
  content:"";position:absolute;left:0;right:0;top:0;height:1px;
  background:linear-gradient(90deg, transparent, var(--amber), transparent);
  transform:translateX(-100%);transition:.7s var(--ease);
}
.pillar:hover{background:rgba(14,16,24,.95);transform:translateY(-2px)}
.pillar:hover::before{transform:translateX(0)}
.pillar-head{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:24px}
.pillar-num{
  font-family:var(--ital);font-style:italic;
  color:var(--amber);font-size:30px;line-height:1;opacity:.6;
}
.pillar-glyph{
  color:var(--amber);font-family:var(--serif);font-weight:300;
  font-size:36px;line-height:1;opacity:.5;
}
.pillar h3{margin-bottom:14px}
.pillar p{color:var(--ink-soft);font-size:14px;line-height:1.75}
.pillar-link{
  display:inline-block;margin-top:20px;
  font-family:var(--mono);font-size:11px;
  letter-spacing:.18em;text-transform:uppercase;
  color:var(--amber);transition:.3s var(--ease);
}
.pillar-link:hover{transform:translateX(6px)}


/* ==========================================================
   09. STATS BAR
   Six numbers, equal columns.
   ========================================================== */
.stats{
  max-width:var(--maxw);margin:80px auto;
  display:grid;grid-template-columns:repeat(6,1fr);
  gap:1px;background:var(--line);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
}
.stat{background:rgba(8,10,16,.78);padding:32px 22px;text-align:left}
.stat b{
  font-family:var(--serif);font-weight:300;
  font-size:48px;letter-spacing:-.04em;
  color:#fff;display:inline-block;line-height:.95;
  font-variant-numeric:tabular-nums;
}
.stat i{
  font-family:var(--ital);font-style:italic;
  color:var(--amber);font-size:48px;line-height:1;letter-spacing:-.04em;
}
.stat span{
  display:block;margin-top:10px;
  font-size:9px;letter-spacing:.30em;text-transform:uppercase;
  color:var(--dim);
}

/* ==========================================================
   09b. WHY FYD — full-canvas asymmetric split
   Headline commands the left; the one-line body + an oversized
   translucent "FYD" wordmark fill the right (no empty gutter).
   ========================================================== */
.manifesto-split{
  display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(40px,6vw,96px);align-items:center;
}
.manifesto-split .section-head{ max-width:none;margin-bottom:0; }
.manifesto-split .manifesto-h{ max-width:15ch;font-size:clamp(46px,5.6vw,88px); }
.manifesto-aside{
  display:flex;flex-direction:column;justify-content:center;
  align-items:flex-start;gap:30px;
}
.mf-logo{
  width:clamp(190px,58%,300px);height:auto;display:block;
  align-self:center;   /* centre the logo within the right column */
}
.mf-body{
  max-width:42ch;
  color:var(--ink-soft);font-size:clamp(16px,1.5vw,19px);line-height:1.65;
}
@media (max-width:1000px){
  .manifesto-split{ grid-template-columns:1fr;gap:30px; }
  .manifesto-aside{ gap:24px; }
  .mf-logo{ width:200px; }
}

/* ==========================================================
   09c. AUDIENCES — who it's for
   ========================================================== */
.aud-grid{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:8px;overflow:hidden;margin-top:var(--grid-gap-top);
}
.aud-card{
  background:rgba(8,10,16,.78);padding:40px 30px;min-height:240px;
  display:flex;flex-direction:column;transition:.45s var(--ease);
}
.aud-card:hover{ background:rgba(14,16,24,.95);transform:translateY(-2px); }
.aud-icon{ font-family:var(--serif);font-size:34px;color:var(--amber);opacity:.6;line-height:1;margin-bottom:auto; }
.aud-card h3{ font-size:clamp(19px,1.7vw,23px);margin:26px 0 8px; }
.aud-card p{ color:var(--ink-soft);font-size:13.5px;line-height:1.7; }

/* ==========================================================
   09d. CASE STUDIES — proof
   ========================================================== */
.case-grid{ display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:var(--grid-gap-top); }
.case-card{
  display:flex;flex-direction:column;
  border:1px solid var(--line);border-radius:12px;overflow:hidden;
  background:var(--bg-2);transition:.45s var(--ease);
}
.case-card:hover{ transform:translateY(-4px);border-color:var(--line-2);box-shadow:0 30px 60px -32px rgba(0,0,0,.85); }
.case-media{
  position:relative;aspect-ratio:4/3;
  background:#0a0c14 center/cover no-repeat;   /* stays dark in both themes — cinematic strip */
  display:flex;align-items:flex-end;border-bottom:1px solid var(--line);
}
.case-media::after{
  content:"";position:absolute;inset:0;
  background:radial-gradient(120% 80% at 18% 0%, rgba(255,138,61,.12), transparent 58%),
             linear-gradient(180deg, transparent 32%, rgba(0,0,0,.6));
}
.case-figure{ position:relative;z-index:1;padding:26px;display:flex;flex-direction:column;gap:4px; }
.case-result{
  font-family:var(--serif);font-weight:300;font-size:clamp(30px,3vw,46px);
  line-height:.95;letter-spacing:-.03em;color:#fff;
}
.case-detail{ font-family:var(--mono);font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--amber); }
.case-body{ padding:26px 26px 30px;display:flex;flex-direction:column;flex:1; }
.case-tag{ font-family:var(--mono);font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--dim);margin-bottom:12px; }
.case-body h3{ font-size:clamp(20px,1.9vw,26px);margin-bottom:10px; }
.case-body p{ color:var(--ink-soft);font-size:13.5px;line-height:1.7;flex:1; }
.case-link{
  margin-top:18px;font-family:var(--mono);font-size:11px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--amber);transition:.3s var(--ease);
}
.case-card:hover .case-link{ transform:translateX(6px); }

/* Proof — condensed one-line result strip (replaces the 3 image cards) */
.proof-strip{ margin-top:var(--grid-gap-top);border-top:1px solid var(--line); }
.proof-row{
  display:flex;align-items:baseline;gap:10px 28px;flex-wrap:wrap;
  padding:24px 0;border-bottom:1px solid var(--line);
  transition:padding-left .4s var(--ease),background .4s var(--ease);
}
.proof-row:hover{ padding-left:12px; }
.proof-result{
  font-family:var(--sans);font-weight:700;font-size:clamp(28px,3.4vw,52px);
  line-height:1;letter-spacing:-.03em;color:#fff;flex:0 0 auto;min-width:38%;
}
.proof-client{ color:var(--ink-soft);font-size:clamp(14px,1.3vw,16px);line-height:1.4; }
.proof-foot{
  margin-top:24px;font-family:var(--mono);font-size:12px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--amber);
}
@media (max-width:680px){ .proof-result{ min-width:100%; } }

/* ==========================================================
   09e. SIGNATURE — kinetic FYD → Follow Your Dreams
   ========================================================== */
.signature{
  max-width:var(--maxw);margin:0 auto;padding:var(--section-y) var(--pad-x);
  text-align:center;position:relative;overflow:hidden;
}
.sig-words{
  display:flex;justify-content:center;align-items:baseline;
  gap:clamp(12px,2.2vw,34px);flex-wrap:wrap;
  font-family:var(--serif);font-weight:300;
  font-size:clamp(46px,9vw,124px);line-height:.92;letter-spacing:-.04em;color:#fff;
}
.sig-word{ display:inline-flex;align-items:baseline; }
.sig-word b{ font-weight:300;color:#fff; }
.sig-word i{
  font-family:var(--ital);font-style:italic;
  display:inline-block;overflow:hidden;white-space:nowrap;
  max-width:0;opacity:0;
  background:linear-gradient(120deg,var(--amber),var(--rose) 45%,var(--violet) 75%,var(--cyan));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  transition:max-width 1s var(--ease), opacity .9s var(--ease);
}
.signature.in .sig-word i{ max-width:8ch;opacity:1; }
.sig-line{
  max-width:46ch;margin:46px auto 0;color:var(--ink-soft);
  font-family:var(--ital);font-style:italic;font-size:clamp(15px,1.4vw,19px);line-height:1.75;
}
@media (prefers-reduced-motion:reduce){
  .sig-word i{ transition:none; }
}

/* ==========================================================
   09f. TESTIMONIALS
   ========================================================== */
.quote-grid{ display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:var(--grid-gap-top); }
.quote-card{
  background:rgba(8,10,16,.78);border:1px solid var(--line);border-radius:12px;
  padding:40px 32px 32px;display:flex;flex-direction:column;justify-content:space-between;
  transition:.45s var(--ease);position:relative;
}
.quote-card::before{
  content:"\201C";position:absolute;top:8px;left:24px;
  font-family:var(--ital);font-style:italic;font-size:90px;line-height:1;color:var(--amber);opacity:.16;
}
.quote-card:hover{ border-color:var(--line-2);transform:translateY(-3px); }
.quote-card blockquote{
  font-family:var(--serif);font-weight:300;font-size:clamp(18px,1.55vw,22px);
  line-height:1.5;color:#fff;letter-spacing:-.01em;position:relative;z-index:1;
}
.quote-card figcaption{ margin-top:28px;display:flex;flex-direction:column;gap:4px; }
.quote-card figcaption b{ font-weight:500;color:var(--ink);font-size:14px; }
.quote-card figcaption span{ font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--amber); }

/* ==========================================================
   09g. TEAM / FOUNDERS — human connection
   ========================================================== */
.team-grid{ display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:var(--grid-gap-top); }
.team-card{
  background:rgba(8,10,16,.78);border:1px solid var(--line);border-radius:12px;
  padding:28px;transition:.45s var(--ease);
}
.team-card:hover{ border-color:var(--line-2);transform:translateY(-3px); }
.team-photo{
  width:100%;aspect-ratio:4/5;border-radius:10px;overflow:hidden;
  background:#0a0c14 center/cover no-repeat;margin-bottom:22px;
  display:flex;align-items:center;justify-content:center;border:1px solid var(--line);
}
.team-initials{ font-family:var(--serif);font-weight:300;font-size:64px;color:var(--amber);opacity:.4; }
.team-card h3{ font-size:clamp(20px,1.8vw,24px); }
.team-role{
  display:block;margin:6px 0 14px;font-family:var(--mono);font-size:10px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--amber);
}
.team-card p{ color:var(--ink-soft);font-size:13.5px;line-height:1.7; }

/* ----- Responsive: new home sections ----- */
@media (max-width:1000px){
  .manifesto-points,.aud-grid{ grid-template-columns:repeat(2,1fr); }
  .case-grid,.quote-grid,.team-grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:680px){
  .manifesto-points,.aud-grid,.case-grid,.quote-grid,.team-grid{ grid-template-columns:1fr; }
  .signature{ padding:78px var(--pad-x); }
  .signature.in .sig-word i{ max-width:7ch; }
}


/* ==========================================================
   10. PACK CARDS
   Used in three sections — production, marketing, real estate.
   Variants: .pack-dark, .pack-amber, .pack-featured.
   ========================================================== */
.packs{
  display:grid;gap:18px;margin-top:48px;
  grid-template-columns:repeat(4,1fr);
}
.packs-prod,.packs-marketing{grid-template-columns:repeat(4,1fr)}
.packs-realestate{grid-template-columns:repeat(2,1fr);gap:24px}

.pack{
  display:flex;flex-direction:column;
  padding:32px 28px;border-radius:10px;
  background:linear-gradient(180deg, rgba(255,233,210,.85), rgba(255,255,255,.95));
  color:#1a1410;
  border:1px solid rgba(0,0,0,.08);
  transition:.4s var(--ease);
}
.pack:hover{transform:translateY(-4px);box-shadow:0 30px 60px rgba(255,138,61,.18)}

.pack header{margin-bottom:20px}
.pack-icon{
  font-size:24px;display:inline-block;margin-bottom:14px;
  filter:drop-shadow(0 2px 8px rgba(0,0,0,.15));
}
.pack-num{
  display:inline-block;
  font-family:var(--mono);font-size:9px;
  letter-spacing:.30em;text-transform:uppercase;
  color:var(--amber-2);font-weight:500;margin-bottom:14px;
  padding:5px 10px;background:rgba(255,138,61,.12);
  border-radius:99px;
}
.pack h3{
  font-family:var(--serif);font-weight:400;
  font-size:24px;line-height:1.15;color:#1a1410;
  margin-bottom:8px;
}
.pack h3 em{font-family:var(--ital);font-style:italic;color:var(--amber-2)}
.pack-tag{
  font-family:var(--mono);font-size:10px;
  letter-spacing:.20em;text-transform:uppercase;
  color:var(--dim);
}

.pack dl{margin:0}
.pack dt{
  font-family:var(--mono);font-size:9px;
  letter-spacing:.28em;text-transform:uppercase;
  color:var(--amber-2);font-weight:500;
  margin-top:14px;
}
.pack dt:first-child{margin-top:0}
.pack dd{
  margin-left:0;margin-top:4px;
  font-family:var(--serif);font-size:14px;line-height:1.55;
  color:#2a2018;
}

.pack ul{
  list-style:none;padding:0;margin:0;
}
.pack ul li{
  padding:7px 0;font-family:var(--serif);font-size:14px;
  line-height:1.55;color:#2a2018;
}
.pack ul li b{
  display:block;
  font-family:var(--mono);font-size:9px;
  letter-spacing:.28em;text-transform:uppercase;
  color:var(--amber-2);font-weight:500;
  margin-top:14px;margin-bottom:2px;
}
.pack ul li:first-child b{margin-top:0}

.pack-ideal{
  margin-top:18px;padding-top:14px;
  border-top:1px solid rgba(0,0,0,.10);
  font-family:var(--serif);font-size:13px;
  line-height:1.5;color:#3a2c20;
}
.pack-ideal b{color:var(--amber-2)}

.pack-cta{
  margin-top:auto;padding-top:18px;
  font-family:var(--mono);font-size:11px;
  letter-spacing:.22em;text-transform:uppercase;
  color:var(--amber-2);font-weight:500;
  align-self:flex-start;transition:.3s var(--ease);
}
.pack-cta:hover{transform:translateX(6px);color:var(--amber)}

/* dark variant for marketing packs */
.pack-dark{
  background:linear-gradient(180deg, rgba(14,16,24,.92), rgba(8,10,16,.95));
  color:var(--ink);border:1px solid var(--line-2);
}
.pack-dark:hover{box-shadow:0 30px 60px rgba(0,0,0,.4)}
.pack-dark h3{color:#fff}
.pack-dark h3 em{color:var(--amber)}
.pack-dark .pack-num{color:var(--amber);background:rgba(255,138,61,.18)}
.pack-dark .pack-tag{color:var(--dim)}
.pack-dark dt{color:var(--amber)}
.pack-dark dd{color:var(--ink-soft)}
.pack-dark ul li{color:var(--ink-soft)}
.pack-dark ul li b{color:var(--amber)}
.pack-dark .pack-ideal{border-top-color:var(--line);color:var(--ink-soft)}
.pack-dark .pack-ideal b{color:var(--amber)}
.pack-dark .pack-cta{color:var(--amber)}

/* amber variant for real estate */
.pack-amber{
  background:linear-gradient(180deg, var(--amber-2) 0%, var(--amber) 100%);
  color:#fff;border:none;
  box-shadow:0 20px 60px rgba(255,138,61,.25);
}
.pack-amber h3{color:#fff}
.pack-amber h3 em{color:#fff;text-decoration:underline;text-decoration-color:rgba(255,255,255,.5);text-underline-offset:6px}
.pack-amber .pack-num{color:#fff;background:rgba(255,255,255,.18)}
.pack-amber ul{margin-top:14px}
.pack-amber ul li{
  display:flex;align-items:flex-start;gap:14px;
  padding:14px 0;border-bottom:1px solid rgba(255,255,255,.20);
  color:rgba(255,255,255,.95);font-size:15px;line-height:1.5;
}
.pack-amber ul li:last-child{border-bottom:none}
.pack-amber ul li .ic{
  flex-shrink:0;width:36px;height:36px;
  background:rgba(255,255,255,.18);border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:14px;
}
.pack-amber ul li b{color:#fff;font-weight:600;display:inline}
.pack-amber .li-guarantee{
  background:rgba(255,255,255,.12);
  margin-top:8px;padding:14px 16px;border-radius:8px;
  border-bottom:none;
}
.pack-amber .li-guarantee .ic{background:#fff;color:var(--amber-2);font-weight:700}
.pack-amber .pack-cta{color:#fff;margin-top:24px}
.pack-amber .pack-cta:hover{color:rgba(255,255,255,.85)}

/* featured ribbon */
.pack-featured{
  position:relative;outline:2px solid var(--amber);outline-offset:-2px;
  transform:translateY(-4px);
}
.pack-featured:hover{transform:translateY(-8px)}


/* ==========================================================
   10b. SERVICES IN DETAIL
   Long list of specific services (replaces the old packages
   sections). Each row: number + body + capability list.
   ========================================================== */
.services-list{
  margin-top:var(--grid-gap-top);
  border-top:1px solid var(--line);
}
.service-row{
  display:grid;
  grid-template-columns:80px minmax(0,1.4fr) minmax(0,1fr);
  gap:48px;align-items:start;
  padding:42px 4px;
  border-bottom:1px solid var(--line);
  position:relative;
  transition:.4s var(--ease);
}
.service-row:hover{
  background:linear-gradient(90deg, rgba(255,138,61,.04), transparent 60%);
}
.service-row::before{
  /* slim left accent bar that grows on hover */
  content:"";position:absolute;left:0;top:0;bottom:0;
  width:0;background:var(--amber);
  transition:.5s var(--ease);
}
.service-row:hover::before{width:3px;box-shadow:0 0 16px rgba(255,138,61,.4)}
.sv-num{
  font-family:var(--ital);font-style:italic;
  color:var(--amber);font-size:48px;line-height:.95;
  letter-spacing:-.02em;
}
.sv-body h3{margin-bottom:14px}
.sv-body h3 em{font-family:var(--ital);font-style:italic;color:var(--amber)}
.sv-body p{
  color:var(--ink-soft);font-size:14px;line-height:1.75;
  max-width:60ch;
}
.sv-body p em{color:var(--amber);font-style:italic;font-family:var(--ital)}
.sv-caps{
  list-style:none;padding:0;margin:0;
  font-family:var(--mono);font-size:11px;
  letter-spacing:.06em;line-height:2;
  color:var(--ink-soft);
}
.sv-caps li{
  position:relative;padding-left:18px;
}
.sv-caps li::before{
  content:"·";position:absolute;left:4px;top:0;
  color:var(--amber);font-weight:700;font-size:14px;
}
.services-cta{
  margin-top:var(--grid-gap-top);padding:32px;
  background:rgba(255,138,61,.06);
  border:1px solid rgba(255,138,61,.20);
  border-radius:10px;
  display:flex;align-items:center;justify-content:space-between;
  flex-wrap:wrap;gap:18px;
}
.services-cta p{
  font-family:var(--ital);font-style:italic;
  color:var(--ink);font-size:20px;line-height:1.4;
  margin:0;max-width:40ch;
}


/* ==========================================================
   11. PROCESS TIMELINE
   Six-step horizontal row with glowing nodes.
   ========================================================== */
.process{
  display:grid;grid-template-columns:repeat(6,1fr);gap:24px;
  margin-top:60px;list-style:none;position:relative;
}
.process::before{
  content:"";position:absolute;left:0;right:0;top:46px;height:1px;
  background:linear-gradient(90deg, transparent, var(--line-2) 8%, var(--line-2) 92%, transparent);
}
.process li{padding-top:80px;position:relative}
.process li::before{
  content:"";position:absolute;top:42px;left:0;
  width:9px;height:9px;border-radius:50%;
  background:var(--bg);border:1px solid var(--amber);
  box-shadow:0 0 14px var(--amber);
}
.process .step-num{
  position:absolute;top:0;left:0;
  font-family:var(--ital);font-style:italic;
  color:var(--amber);font-size:34px;line-height:1;
}
.step-day{
  font-family:var(--mono);font-size:9px;
  letter-spacing:.30em;text-transform:uppercase;
  color:var(--cyan);margin-bottom:12px;
}
.process h4{
  font-family:var(--sans);font-weight:600;
  font-size:18px;line-height:1.2;letter-spacing:-.01em;
  color:#fff;margin-bottom:10px;
}
.process p{color:var(--ink-soft);font-size:13px;line-height:1.65}


/* ==========================================================
   12. WORK GRID
   Bento-style layout. Real videos auto-played on visibility.
   ========================================================== */
.work-grid{
  display:grid;grid-template-columns:repeat(12,1fr);
  grid-auto-rows:130px;gap:14px;margin-top:var(--grid-gap-top);
  /* Pack tiles into any earlier gaps so a tall tile next to short
     ones doesn't leave empty cells in the previous row. */
  grid-auto-flow:dense;
}
.work-tile{
  position:relative;overflow:hidden;
  border:1px solid var(--line);border-radius:8px;
  background:#0a0c14;
  transition:.5s var(--ease);
  cursor:pointer;
  display:flex;align-items:flex-end;
  padding:22px;
}
.work-tile:hover{
  border-color:var(--line-2);
  transform:translateY(-3px);
  box-shadow:0 30px 60px rgba(0,0,0,.4);
}
.work-tile video{
  position:absolute;inset:0;
  width:100%;height:100%;object-fit:cover;
  z-index:0;opacity:.85;transition:.5s;
}
.work-tile:hover video{opacity:1}
.work-tile::before{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(0deg, rgba(4,5,10,.85), transparent 55%);
}
.work-tile::after{
  content:"↗ PLAY";position:absolute;top:14px;right:16px;z-index:2;
  font-family:var(--mono);font-size:10px;
  letter-spacing:.22em;color:var(--ink);
  background:rgba(8,10,16,.75);
  padding:6px 12px;border-radius:99px;
  border:1px solid var(--line-2);
  opacity:0;transform:translateY(-4px);transition:.3s var(--ease);
}
.work-tile:hover::after{opacity:1;transform:none}

.work-meta{position:relative;z-index:2}
.work-meta .cat{
  display:block;
  font-family:var(--mono);font-size:9px;
  letter-spacing:.28em;text-transform:uppercase;
  color:var(--cyan);margin-bottom:8px;
}
.work-meta h3{
  font-family:var(--sans);font-weight:600;
  font-size:22px;line-height:1.15;letter-spacing:-.02em;
  color:#fff;
}
.work-meta h3 em{font-family:var(--ital);font-style:italic;color:var(--amber)}

/* tile size variants */
.work-lg{grid-column:span 6;grid-row:span 3}
.work-md{grid-column:span 4;grid-row:span 3}
.work-sm{grid-column:span 3;grid-row:span 2}
.work-wide{grid-column:span 5;grid-row:span 2}
.work-tall{grid-column:span 4;grid-row:span 4}


/* ==========================================================
   13. WHY GRID
   Six differentiators in a 3-column grid.
   ========================================================== */
.why-grid{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:8px;
  margin-top:var(--grid-gap-top);overflow:hidden;
}
.why{
  background:rgba(8,10,16,.78);
  padding:42px 32px;min-height:260px;
  transition:.4s var(--ease);
}
.why:hover{background:rgba(14,16,24,.95)}
.why-num{
  display:inline-flex;align-items:center;justify-content:center;
  width:42px;height:42px;border-radius:50%;
  border:1px solid var(--amber);color:var(--amber);
  font-family:var(--ital);font-style:italic;font-size:20px;
  margin-bottom:22px;box-shadow:0 0 24px rgba(255,138,61,.18);
}
/* Clients page — square monogram badge used in place of a logo.
   Mirrors .why-num's amber accent but sized to fit 2-3 letters
   and uses mono type so it reads as a wordmark, not a number. */
.client-mark{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:62px;height:46px;padding:0 14px;
  border:1px solid var(--line);border-radius:10px;
  background:rgba(255,138,61,.04);
  color:var(--amber);
  font-family:var(--mono);font-size:14px;font-weight:700;
  letter-spacing:.08em;
  margin-bottom:22px;
  transition:.3s var(--ease);
}
.why:hover .client-mark{
  background:rgba(255,138,61,.12);
  border-color:rgba(255,138,61,.45);
}
.why h3{font-size:22px;margin-bottom:12px}
.why p{color:var(--ink-soft);font-size:13px;line-height:1.75}


/* ==========================================================
   14. QUOTES
   Pulled testimonials. Italic serif blockquotes.
   ========================================================== */
.section-quotes{
  background:linear-gradient(180deg, transparent, rgba(8,10,16,.4) 40%, rgba(8,10,16,.4) 60%, transparent);
}
.quotes{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:24px;margin-top:var(--grid-gap-top);
}
.quote{
  padding:38px 30px;
  background:rgba(8,10,16,.78);
  border:1px solid var(--line);border-radius:10px;
  position:relative;transition:.4s var(--ease);
}
.quote:hover{border-color:var(--line-2);background:rgba(14,16,24,.95);transform:translateY(-3px)}
.quote::before{
  content:"\201C";
  position:absolute;top:30px;left:20px;
  font-family:var(--ital);color:var(--amber);
  font-size:80px;line-height:0;opacity:.5;
}
.quote blockquote{
  padding-top:30px;
  font-family:var(--sans);font-weight:400;
  font-size:18px;line-height:1.5;letter-spacing:-.005em;
  color:#fff;
}
.quote blockquote em{font-family:var(--ital);font-style:italic;color:var(--amber)}
.quote figcaption{
  margin-top:24px;padding-top:16px;
  border-top:1px solid var(--line);
  font-family:var(--mono);font-size:10px;
  letter-spacing:.24em;text-transform:uppercase;
  color:var(--dim);
}
.quote figcaption b{color:var(--ink);display:block;margin-bottom:4px;font-weight:500}


/* ==========================================================
   15. FAQ ACCORDION
   Native <details> elements. No JS needed.
   ========================================================== */
.faq{
  margin-top:48px;
  border-top:1px solid var(--line);
}
.faq details{
  border-bottom:1px solid var(--line);
  padding:24px 0;
}
.faq summary{
  list-style:none;
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  font-family:var(--sans);font-weight:600;
  font-size:22px;letter-spacing:-.01em;
  color:#fff;cursor:pointer;
}
.faq summary::-webkit-details-marker{display:none}
.faq .ico{
  flex-shrink:0;width:36px;height:36px;
  border:1px solid var(--line-2);border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--ital);font-style:italic;
  color:var(--amber);font-size:22px;
  transition:.3s var(--ease);
}
.faq details[open] .ico{
  transform:rotate(45deg);background:var(--amber);color:#04050a;
  box-shadow:0 0 24px rgba(255,138,61,.4);
}
.faq details p{
  margin-top:14px;max-width:80ch;
  color:var(--ink-soft);font-size:14px;line-height:1.7;
}


/* ==========================================================
   16. CONTACT
   Form + direct contact card, side by side.
   ========================================================== */
.section-contact{padding-top:160px;padding-bottom:160px;text-align:center}
.section-contact .section-head{margin-left:auto;margin-right:auto}
.section-contact h2{margin-left:auto;margin-right:auto;text-align:center}
.section-contact .lede{margin-left:auto;margin-right:auto;text-align:center}

.contact-grid{
  display:grid;grid-template-columns:1.2fr 1fr;
  gap:48px;margin-top:60px;align-items:start;
  text-align:left;
}

.contact-form{
  display:flex;flex-direction:column;gap:14px;
  padding:32px;
  background:rgba(8,10,16,.78);
  border:1px solid var(--line);border-radius:10px;
}
.contact-form label{
  display:block;font-size:10px;
  letter-spacing:.24em;text-transform:uppercase;
  color:var(--dim);
}
.contact-form input,
.contact-form textarea,
.contact-form select{
  width:100%;margin-top:6px;
  background:rgba(4,5,10,.4);
  border:1px solid var(--line);
  color:var(--ink);
  font-family:var(--mono);font-size:13px;
  padding:14px 16px;border-radius:6px;
  transition:.3s var(--ease);
  outline:none;
}
.contact-form input:focus,
.contact-form textarea:focus,
.contact-form select:focus{
  border-color:var(--amber);
  background:rgba(20,14,12,.6);
  box-shadow:0 0 0 3px rgba(255,138,61,.18);
}
.contact-form textarea{min-height:120px;resize:vertical;font-family:var(--mono)}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.form-thanks{
  margin-top:14px;padding:14px 18px;
  background:rgba(255,138,61,.12);
  border:1px solid rgba(255,138,61,.3);border-radius:6px;
  font-family:var(--ital);font-style:italic;
  font-size:14px;color:var(--ink);
  display:none;
}
.form-thanks.on{display:block}

.contact-direct{
  padding:32px;
  background:rgba(8,10,16,.78);
  border:1px solid var(--line);border-radius:10px;
}
.contact-direct h3{font-size:24px;margin-bottom:24px}
.contact-line{
  display:flex;align-items:center;gap:14px;
  padding:14px 0;border-top:1px solid var(--line);
  color:var(--ink);
}
.contact-line:first-of-type{border-top:none}
.contact-line:hover{color:var(--amber)}
.contact-line .ic{
  flex-shrink:0;width:36px;height:36px;
  border-radius:50%;border:1px solid var(--line-2);
  display:inline-flex;align-items:center;justify-content:center;
  color:var(--amber);font-size:14px;
}
.contact-line .lbl{
  display:block;font-family:var(--mono);font-size:9px;
  letter-spacing:.28em;text-transform:uppercase;
  color:var(--dim);margin-bottom:4px;
}
.promise{
  margin-top:24px;padding:20px 22px;
  background:rgba(255,138,61,.10);
  border:1px solid rgba(255,138,61,.25);border-radius:8px;
  font-family:var(--ital);font-style:italic;
  font-size:16px;line-height:1.45;color:#fff;
}
.promise em{color:var(--amber);font-style:italic}


/* ==========================================================
   17. FOOTER
   ========================================================== */
footer{
  position:relative;padding:80px var(--pad-x) 32px;
  background:rgba(4,5,10,.92);
  border-top:1px solid var(--line);
  backdrop-filter:blur(8px);
}
.footer-inner{
  max-width:var(--maxw);margin:0 auto;
  display:grid;grid-template-columns:2fr 1fr 1fr 1fr;
  gap:48px;padding-bottom:42px;
  border-bottom:1px solid var(--line);
}
.footer-logo-svg{
  display:block;height:88px;width:auto;
  color:var(--amber);
}
.footer-tag{
  margin-top:12px;
  font-family:var(--ital);font-style:italic;
  color:var(--dim);font-size:20px;
}
.footer-blurb{
  margin-top:18px;max-width:34ch;
  color:var(--ink-soft);font-size:13px;line-height:1.6;
}
.footer-col h5{
  font-family:var(--mono);font-size:10px;
  letter-spacing:.30em;text-transform:uppercase;
  color:var(--dim);margin-bottom:18px;
}
.footer-col a{
  display:block;
  font-size:13px;line-height:2;letter-spacing:.04em;
  color:var(--ink);opacity:.8;
  transition:.3s var(--ease);
}
.footer-col a:hover{opacity:1;color:var(--amber);transform:translateX(3px)}
.footer-bot{
  max-width:var(--maxw);margin:0 auto;
  padding-top:22px;
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:14px;
  font-family:var(--mono);font-size:10px;
  letter-spacing:.24em;text-transform:uppercase;
  color:var(--dim);
}
.footer-bot a:hover{color:var(--ink)}


/* ==========================================================
   18. REVEAL ANIMATIONS
   Triggered by IntersectionObserver in app.js.
   ========================================================== */
.reveal{
  opacity:0;transform:translateY(40px);
  transition:opacity .9s var(--ease), transform 1s var(--ease);
}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    transition-duration:.01ms !important;
  }
  .reveal{opacity:1;transform:none}
}


/* ==========================================================
   19. RESPONSIVE
   Mid (laptop) → Small (mobile) breakpoints.
   ========================================================== */

/* Mid — laptops (~13"–15") */
@media (max-width:1100px){
  /* Hero stack: shrink + nudge inward so it doesn't overlap the headline */
  .hero-stack{width:300px;height:440px;right:3vw;transform:translateY(-50%) scale(.85);opacity:.85}
  body.ready .hero-stack{transform:translateY(-50%) scale(.85) translate3d(var(--sx,0px), var(--sy,0px), 0)}

  .pillars,.pillars-4{grid-template-columns:1fr 1fr}
  .pillars:not(.pillars-4) .pillar:last-child{grid-column:span 2}
  /* Services list — collapse to 2-row layout (number+body, then caps below) */
  .service-row{grid-template-columns:60px 1fr;gap:24px}
  .sv-caps{grid-column:1 / -1;margin-left:84px;font-size:12px}
  .sv-num{font-size:38px}
  .stats{grid-template-columns:repeat(3,1fr)}
  .packs-prod,.packs-marketing{grid-template-columns:1fr 1fr}
  .process{grid-template-columns:repeat(3,1fr);row-gap:48px}
  .process::before{display:none}
  .work-lg{grid-column:span 12}
  .work-md{grid-column:span 6}
  .work-wide{grid-column:span 8}
  .work-tall{grid-column:span 6;grid-row:span 3}
  .work-sm{grid-column:span 4}
  .why-grid{grid-template-columns:1fr 1fr}
  .quotes{grid-template-columns:1fr 1fr}
  .quotes .quote:last-child{grid-column:span 2}
  .contact-grid{grid-template-columns:1fr;gap:32px}
}

/* Small — phones */
@media (max-width:720px){
  :root{--pad-x:5vw}
  html,body{font-size:14px}

  /* Nav */
  .nav{top:14px;padding:6px 6px 6px 14px}
  .nav-links{display:none}
  .nav-cta{font-size:10px;padding:8px 14px;letter-spacing:.14em}

  /* Hero */
  .hero{min-height:88svh;padding:104px 5vw 64px}
  .hero-h{font-size:clamp(34px,11vw,56px);line-height:1.0;max-width:none}
  .hero-h-indent{padding-left:0}
  .hero-sub{font-size:14px;margin-top:24px}
  .hero-sub b{color:var(--amber)}
  .hero-ctas{flex-direction:column;align-items:stretch;margin-top:28px}
  .hero-ctas .btn{justify-content:center}
  .eyebrow{margin-bottom:24px}
  .hero-corner-tl,.hero-corner-tr,.hero-corner-bl,.hero-corner-br{display:none}
  .hero-stack{display:none}
  .hero-shader{display:none}
  /* Show the single mobile hero video instead */
  .hero-mobile-video{display:block}
  /* Disable 3D parallax on mobile (no more rotateX/rotateY tilt) */
  .hero-inner{transform:none !important}
  .hero-inner > *{transform:none !important}

  /* Sections */
  .section{padding:80px 5vw}
  h2{font-size:38px}
  h3{font-size:22px}
  .section-head{margin-bottom:32px}

  /* Pillars / packs / why grid */
  .pillars,.pillars-4,.packs,.packs-prod,.packs-marketing,.packs-realestate,
  .why-grid,.quotes{grid-template-columns:1fr}
  .pillars .pillar:last-child{grid-column:auto}
  /* Tighter pillar cards on phones — was 340px min-height, 48px padding */
  .pillar{min-height:auto;padding:32px 24px}
  .why{min-height:auto;padding:32px 24px}

  /* Services list — full single column on phones */
  .service-row{grid-template-columns:1fr;gap:14px;padding:32px 4px}
  .sv-caps{margin-left:0}
  .sv-num{font-size:32px}
  .services-cta{flex-direction:column;align-items:stretch;text-align:center}
  .quotes .quote:last-child{grid-column:auto}

  /* Stats — 2 columns */
  .stats{grid-template-columns:1fr 1fr;margin:48px auto}
  .stat b,.stat i{font-size:36px}

  /* Process — clean two-column rows on mobile.
     Number sits in its own narrow left column;
     DAY badge / heading / paragraph stack in the right column. */
  .process{
    display:flex;flex-direction:column;gap:0;
    margin-top:36px;
    border-top:1px solid var(--line);
  }
  .process::before{display:none} /* horizontal timeline line — desktop only */
  .process li{
    display:grid;
    grid-template-columns:54px 1fr;
    column-gap:18px;
    padding:24px 0;
    border-bottom:1px solid var(--line);
    min-height:0;
  }
  .process li::before{display:none} /* small timeline node — desktop only */
  .process .step-num{
    grid-column:1;
    grid-row:1 / span 3;
    position:static;
    font-size:42px;line-height:1;
    align-self:start;
    padding-top:4px;
  }
  .process .step-day{
    grid-column:2;grid-row:1;
    margin-bottom:6px;
    font-size:9px;
  }
  .process h4{
    grid-column:2;grid-row:2;
    font-size:20px;margin-bottom:8px;
  }
  .process li > p{
    grid-column:2;grid-row:3;
    font-size:13px;line-height:1.65;
  }

  /* Work grid — single column, fixed-aspect */
  .work-grid{grid-template-columns:1fr;grid-auto-rows:auto;gap:14px}
  .work-tile{grid-column:auto !important;grid-row:auto !important;aspect-ratio:16/9;padding:18px}
  .work-tile.work-tall{aspect-ratio:9/16}

  /* FAQ */
  .faq summary{font-size:18px;gap:14px}
  .faq .ico{width:32px;height:32px;font-size:18px}

  /* Contact */
  .form-row{grid-template-columns:1fr;gap:12px}
  .contact-form,.contact-direct{padding:24px}
  .section-contact{padding:80px 5vw}

  /* Footer */
  .footer-inner{grid-template-columns:1fr;gap:30px}
  .footer-logo-svg{height:64px}
  .footer-bot{flex-direction:column;text-align:left;gap:8px}
}


/* ==========================================================
   20. THEME TOGGLE BUTTON  (lives in the nav)
   ========================================================== */
.theme-toggle{
  position:relative;
  width:36px;height:36px;
  background:transparent;
  border:1px solid var(--line-2);
  border-radius:99px;
  color:var(--ink);
  cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;
  margin:0 12px 0 0;
  padding:0;
  transition:.25s var(--ease);
  flex-shrink:0;
}
.theme-toggle:hover{
  border-color:var(--amber);
  color:var(--amber);
  transform:scale(1.06);
}
.theme-toggle-icon{ width:16px; height:16px; }
.theme-toggle .moon{ display:none; }
.theme-toggle .sun{  display:block; }
body.light .theme-toggle .moon{ display:block; }
body.light .theme-toggle .sun{  display:none; }


/* ==========================================================
   21. LIGHT THEME  — body.light overrides
       Single-source-of-truth: just remap the CSS variables.
       A few section backgrounds also need explicit overrides
       because they hardcode dark colours via gradients.
   ========================================================== */
body.light{
  --bg:        #fafaf6;
  --bg-2:      #ffffff;
  --ink:       #15141c;
  --ink-soft:  #2a2730;
  --dim:       #6b6b6b;
  --line:      rgba(0,0,0,.10);
  --line-2:    rgba(0,0,0,.18);
  --panel:     rgba(255,255,255,.85);
  color-scheme: light;
}

/* Fade out cosmic background + grain in light mode (they're built for dark) */
body.light .bg-cosmic{ opacity:.08; filter:saturate(.4); }
body.light .bg-grain{  opacity:.05; }

/* Hero gets a clean light background, hide the WebGL dark shader canvas */
body.light .hero{
  background: linear-gradient(180deg, #ffffff 0%, #f4f1ea 100%);
}
body.light .hero-shader{ opacity:.15; }

/* Nav glass becomes white-tinted */
body.light .nav{
  background: rgba(255,255,255,.78);
  border-color: rgba(0,0,0,.06);
}

/* Cards and tiles get white surfaces with soft borders */
body.light .pillar,
body.light .service-row,
body.light .why,
body.light .stat,
body.light .work-tile,
body.light .quote,
body.light .contact-direct,
body.light .contact-form,
body.light details{
  background:#ffffff;
  border-color:var(--line);
}

/* Logo marquee gets a light backdrop; the white silhouettes invert to dark. */
body.light .logo-marquee{
  background:#f5f3ec;
  border-color:var(--line);
}
body.light .logo-item img{ filter:invert(1); opacity:1; }   /* completely black, not grey */
body.light .logo-name{ color:var(--ink); }
body.light .proof-result{ color:var(--ink); }
body.light .proof-client{ color:var(--ink-soft); }

/* Section backgrounds */
body.light section.section-quotes,
body.light section.section-contact{
  background:#ffffff;
}

/* Footer — original CSS targets the element <footer>, not .footer.
   We override with both selectors to be safe. */
body.light footer,
body.light .footer{
  background:#f0ede4;
  color:var(--ink);
  border-top:1px solid var(--line);
}
body.light footer .footer-inner,
body.light footer .footer-bot{
  border-color:rgba(0,0,0,.10);
}
body.light footer h5,
body.light .footer h5{
  color:var(--ink);
  opacity:1;
}
body.light footer .footer-tag,
body.light .footer-tag{ color:var(--ink-soft); }
body.light footer .footer-blurb,
body.light .footer-blurb{ color:var(--ink-soft); }
body.light footer .footer-col a,
body.light .footer-col a{
  color:var(--ink);
  opacity:.78;
}
body.light footer .footer-col a:hover{ color:var(--amber); opacity:1; }
body.light footer .footer-bot{ color:var(--dim); }
body.light footer .footer-bot a{ color:var(--ink); }
body.light footer .footer-bot a:hover{ color:var(--amber); }
/* Footer logo color in light mode — amber stays amber */
body.light footer .footer-logo-svg{ color:var(--amber); }

/* Reverse the grain blend modes that look weird on light */
body.light .bg-grain{ mix-blend-mode:multiply; }

/* Small print and dim labels */
body.light .eyebrow,
body.light .kicker,
body.light .lede,
body.light .lbl{ color:var(--dim); }

/* Buttons keep their amber on either theme — no override needed */

/* Logo image — the size is driven by the admin sliders, applied as an
   inline style on the <img> by render.js. The CSS rules below are
   ONLY fallback defaults (no !important) so that whatever value the
   admin chose always wins over the stylesheet. */
.nav-logo .logo-img{
  height:28px;
  max-width:160px;
  width:auto;
  display:block;
  object-fit:contain;
}
.footer-logo-svg.logo-img{
  height:64px;
  max-width:280px;
  width:auto;
  display:block;
  object-fit:contain;
}


/* ==========================================================
   22. LIGHT MODE  ·  comprehensive override pass
       Catches the spots where colors were hardcoded as #fff or
       rgba(dark, ...) and would otherwise look broken on white.
   ========================================================== */

/* HERO HEADLINE — disable the screen blend (washes out dark text on
   white) and switch plain words to dark ink. Italic words KEEP their
   gradient (which uses color:transparent + background-clip). */
body.light .hero-h{
  color:var(--ink);
  mix-blend-mode:normal;            /* was: screen — washes out on white */
}
body.light .hero-h .word{ color:var(--ink); }
body.light .hero-h em.word,
body.light .hero-h em{
  color:transparent !important;
  background:linear-gradient(120deg, var(--amber-2), var(--rose) 35%, var(--violet) 65%, #2dbfb6) !important;
  -webkit-background-clip:text !important;
  background-clip:text !important;
  mix-blend-mode:normal;
}

/* HERO sub paragraph */
body.light .hero-sub{ color:var(--ink-soft); }
body.light .hero-sub b{ color:var(--ink); font-weight:600; }

/* Mobile-specific: the global mobile rule sets .hero-sub b to amber,
   which is illegible on a light/cream background. Force dark ink here
   so the bold service words stay readable on phones in light mode. */
@media (max-width: 720px) {
  body.light .hero-sub b{ color:var(--ink) !important; font-weight:700; }
  body.light .hero-sub{ color:var(--ink-soft) !important; font-weight:500; }
}

/* HERO corners (the small text in the four corners of hero) */
body.light .hero-corner{ color:var(--dim); }
body.light .hero-corner-tl,
body.light .hero-corner-tr,
body.light .hero-corner-bl,
body.light .hero-corner-br{ color:var(--dim); }
body.light .hero-corner b{ color:var(--ink); }
body.light .hero-corner .live{ color:var(--amber); }
body.light .hero-corner .dot{ background:var(--amber); }
body.light .hero-corner .line{ background:var(--ink); }

/* HERO CTAs — secondary button */
body.light .hero-ctas .btn:not(.btn-prim){
  background:transparent;
  color:var(--ink);
  border-color:var(--line-2);
}
body.light .hero-ctas .btn:not(.btn-prim):hover{
  border-color:var(--ink);
  background:rgba(0,0,0,.04);
}

/* NAV buttons */
body.light .nav-cta{
  background:var(--amber);
  color:#fff;
}
body.light .nav-links a{ color:var(--ink); }
body.light .nav-links a:hover{ background:rgba(0,0,0,.05); color:var(--ink); }

/* STATS — big numbers were #fff */
body.light .stat b{ color:var(--ink); }
body.light .stat i{ color:var(--amber); }
body.light .stat span{ color:var(--dim); }

/* SERVICES list */
body.light .service-row h3{ color:var(--ink); }
body.light .service-row h3 em{ color:var(--amber); }
body.light .service-row p{ color:var(--ink-soft); }
body.light .service-row .sv-num{ color:var(--amber); }
body.light .service-row .sv-caps li{ color:var(--ink-soft); }

/* PILLARS */
body.light .pillar h3{ color:var(--ink); }
body.light .pillar h3 em{ color:var(--amber); }
body.light .pillar p{ color:var(--ink-soft); }
body.light .pillar-num{ color:var(--amber); }
body.light .pillar-glyph{ color:var(--amber); }
body.light .pillar-link{ color:var(--ink); }
body.light .pillar-link:hover{ color:var(--amber); }
body.light .pillar:hover{ background:#fafafa; }

/* PROCESS steps */
body.light .process h4{ color:var(--ink); }
body.light .process p{ color:var(--ink-soft); }
body.light .step-num{ color:var(--amber); }
body.light .step-day{ color:var(--dim); }

/* WORK tile meta text — KEEP white because the tile has a dark gradient
   overlay (.work-tile::before) so the text is always on a dark surface
   regardless of the page theme. Dark text would be illegible on light
   parts of the video. */
body.light .work-tile,
body.light .work-tile.work-tile{        /* extra specificity vs my generic light card override */
  background:#0a0c14;                   /* keep dark backdrop */
  border-color:var(--line);
}
body.light .work-meta .cat{ color:var(--cyan); }
body.light .work-meta h3{ color:#fff; }
body.light .work-meta h3 em{ color:var(--amber); }
body.light .work-tile::before{
  background:linear-gradient(0deg, rgba(4,5,10,.85), transparent 55%);
}
body.light .work-tile::after{
  color:var(--ink);             /* the "↗ PLAY" pill */
  background:rgba(8,10,16,.75);
}

/* WHY items */
body.light .why h3{ color:var(--ink); }
body.light .why h3 em{ color:var(--amber); }
body.light .why p{ color:var(--ink-soft); }
body.light .why-num{ color:var(--amber); }

/* TESTIMONIALS / quotes */
body.light .quote blockquote{ color:var(--ink); }
body.light .quote blockquote em{ color:var(--amber); }
body.light .quote figcaption{ color:var(--dim); }
body.light .quote figcaption b{ color:var(--ink); }

/* FAQ details */
body.light details summary{ color:var(--ink); }
body.light details p{ color:var(--ink-soft); }
body.light details[open] summary{ color:var(--amber); }
body.light .ico{ color:var(--ink); }

/* CONTACT block */
body.light .contact-direct .lbl{ color:var(--dim); }
body.light .contact-line{ color:var(--ink); }
body.light .contact-line a{ color:var(--amber); }
body.light .promise{ color:var(--ink); }
body.light .promise em{ color:var(--amber); }

/* Contact form inputs */
body.light .contact-form input,
body.light .contact-form textarea,
body.light .contact-form select{
  background:#ffffff;
  color:var(--ink);
  border-color:var(--line-2);
}
body.light .contact-form input::placeholder,
body.light .contact-form textarea::placeholder{ color:var(--dim); }
body.light .contact-form input:focus,
body.light .contact-form textarea:focus{ border-color:var(--amber); }
body.light .contact-form label{ color:var(--ink); }

/* Section headings — plain text darkens, italic accent keeps its gradient. */
body.light h2{ color:var(--ink); }
body.light .section-head h2{ color:var(--ink); }
body.light h2 em,
body.light .section-head h2 em{
  color:transparent !important;
  background:linear-gradient(120deg, var(--amber-2), var(--rose) 35%, var(--violet) 65%, #2dbfb6);
  -webkit-background-clip:text; background-clip:text;
}
body.light .section-head p,
body.light .section-head .lede,
body.light .section-head .kicker{ color:var(--dim); }

/* Hero stack labels (the floating cards on the right) */
body.light .hero-stack-label{ color:var(--dim); }
body.light .hc-tag{ color:#fff; }   /* card tags overlay video, keep white */

/* Mobile hero slider tag — pill bg is hardcoded dark, so text MUST stay
   light or it becomes invisible in light mode. Same for the dots row
   background pill. */
body.light .hmv-tag{ color:#fff; border-color:rgba(255,255,255,.18); }
body.light .hmv-tag b{ color:var(--amber); }
body.light .hmv-dot{ background:rgba(255,255,255,.32); }
body.light .hmv-dot.active{ background:var(--amber); }

/* Footer details */
body.light .footer-blurb{ color:var(--ink-soft); }
body.light .footer-bot{ color:var(--dim); }
body.light .footer-bot a{ color:var(--ink); }
body.light .footer-bot a:hover{ color:var(--amber); }

/* Selection — needs updating for light */
/* New home sections (manifesto / audiences / cases / testimonials / team) */
body.light .mf-point,
body.light .aud-card,
body.light .quote-card,
body.light .team-card,
body.light .case-card{ background:#ffffff; border-color:var(--line); }
body.light .mf-point h3,
body.light .aud-card h3,
body.light .case-body h3,
body.light .team-card h3{ color:var(--ink); }
body.light .quote-card blockquote{ color:var(--ink); }
body.light .sig-word b{ color:var(--ink); }        /* full-bleed band → flip to dark ink in light */
body.light .team-photo{ background:#efece3; }       /* lighten the empty photo placeholder */

body.light ::selection{ background:var(--amber); color:#fff; }

/* Toggle button accent — sun glows in dark, moon glows in light */
body.light .theme-toggle{ border-color:var(--line-2); }
body.light .theme-toggle:hover{ border-color:var(--amber); }


/* ==========================================================
   23. MOBILE NAV  —  bigger, easier-to-tap touch targets
       Force "Book a Call" onto one line and give everything
       enough size to feel comfortable on phones.
   ========================================================== */
@media (max-width: 720px) {
  .nav{
    top:14px;
    padding:8px 8px 8px 18px;
    gap:10px;
  }
  .nav-logo{ margin-right:8px; }
  .nav-logo .logo-mark{ height:28px; }
  .theme-toggle{
    width:40px; height:40px;
    margin:0 4px 0 0;
  }
  .theme-toggle-icon{ width:18px; height:18px; }
  .nav-cta{
    white-space:nowrap;
    font-size:13px;
    letter-spacing:.14em;
    padding:12px 20px;
  }
}

@media (max-width: 380px) {
  /* Slightly trim for very narrow phones (<380px) */
  .nav{ padding:7px 7px 7px 16px; gap:8px; }
  .nav-logo .logo-mark{ height:24px; }
  .theme-toggle{ width:36px; height:36px; }
  .theme-toggle-icon{ width:16px; height:16px; }
  .nav-cta{ font-size:11px; padding:10px 16px; }
  /* Hide the trailing arrow only on the very smallest screens */
  .nav-cta .arrow{ display:none; }
}


/* ==========================================================
   24. ACTIVE NAV LINK  (multi-page)
       Highlights the link that matches the current page in
       the nav pill. Set via PHP partial _nav.php.
   ========================================================== */
.nav-links a.current{
  color:var(--amber);
  background:rgba(255,138,61,.10);
  opacity:1;
}
body.light .nav-links a.current{
  color:var(--amber-2);
  background:rgba(255,138,61,.14);
}


/* ==========================================================
   25. TOUR CARDS  (homepage "five-minute tour" section)
       Three big clickable cards that link to the deeper pages.
       3-up on desktop · 1-up on anything narrower (no
       awkward intermediate 2-column state that was making
       cards different sizes on phones).
   ========================================================== */
.tour-cards{
  display:grid !important;
  grid-template-columns:repeat(3, 1fr) !important;
  gap:24px;
}
.tour-cards .pillar{
  text-decoration:none;
  color:inherit;
  cursor:pointer;
  transition:.3s var(--ease);
  width:100%;
  box-sizing:border-box;
}
.tour-cards .pillar:hover{
  transform:translateY(-4px);
  border-color:var(--amber);
}
.tour-cards .pillar h3 em{ color:var(--amber); }

/* Anything narrower than 900px → single column, full width. */
@media (max-width: 900px){
  .tour-cards{
    grid-template-columns:1fr !important;
    gap:18px;
  }
  .tour-cards .pillar{
    max-width:100%;
    width:100%;
  }
}


/* ==========================================================
   MEDIA SPLIT — a content column paired with one autoplaying
   brand film, the film alternating left/right down the page.
   Used by the homepage WHY / Results / Signature / Go-Deeper
   sections (each embeds its own video, not a background, not
   one crammed grid).
   ========================================================== */
.media-split{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(32px,5vw,80px);
  align-items:center;
}
.media-split .ms-text{
  display:flex;flex-direction:column;align-items:flex-start;
  gap:22px;min-width:0;
}
.media-split--media-left .ms-media{ order:-1; }   /* flip the film to the left */
.media-split .ms-media{
  position:relative;width:100%;
  aspect-ratio:16/10;
  border-radius:16px;overflow:hidden;
  background:#080a12;border:1px solid var(--line);
}
.media-split .ms-media video{ width:100%;height:100%;object-fit:cover;display:block; }
/* WHY heading keeps the larger manifesto sizing (was .manifesto-split .manifesto-h) */
.media-split .manifesto-h{ max-width:16ch;font-size:clamp(40px,5vw,82px);margin:0; }
.media-split .mf-body{ margin:0; }
.media-split .proof-strip{ margin-top:4px;width:100%; }
/* Signature in a split → left-align the kinetic line, film on the right */
.signature.media-split{ text-align:left;overflow:visible; }
.signature.media-split .ms-text{ gap:30px; }
.signature.media-split .sig-words{ justify-content:flex-start; }
.signature.media-split .sig-line{ margin:0;text-align:left; }
/* Go-Deeper tour cards stacked beside the film (compact, not the 3-up grid).
   Drop the section's banded gradient in this split + give the stacked cards an
   OPAQUE fill + border, so the 14px gaps read as card separation instead of
   faint lighter strips that visually bleed across the film next to them. */
.section-quotes.media-split{ background:none; }
.tour-cards--stack{
  display:flex !important;grid-template-columns:none !important;
  flex-direction:column;gap:14px;width:100%;
}
.tour-cards--stack .pillar{
  min-height:0;padding:24px 28px;
  background:#0c0e16;
  border:1px solid var(--line);
  border-radius:12px;
}
@media (max-width: 860px){
  .media-split{ grid-template-columns:1fr;gap:34px; }
  .media-split--media-left .ms-media{ order:0; }   /* film below the text on phones */
  .media-split .ms-media{ max-height:62vh; }        /* don't let a stacked film swallow the screen */
  .signature.media-split{ text-align:center; }
  .signature.media-split .sig-words{ justify-content:center; }
  .signature.media-split .sig-line{ margin:0 auto;text-align:center; }
  .signature.media-split .ms-text{ align-items:center; }
  /* When the Results strip is single-column, give the number + client each a full row */
  .media-split .proof-result{ min-width:100%; }
}


/* ==========================================================
   26. MOBILE MENU  (hamburger + slide-down panel)
       Visible only on phones / narrow screens. Lets visitors
       jump between Services / Work / Studio without scrolling
       to the footer.
   ========================================================== */

/* The hamburger button — hidden on desktop, shown on ≤900px. */
.nav-menu-toggle{
  display:inline-flex;align-items:center;gap:13px;
  background:transparent;border:none;cursor:pointer;
  padding:8px 2px;
  font-family:var(--mono);font-size:12px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ink);
  transition:color .3s var(--ease);
}
.nav-menu-toggle:hover{ color:var(--amber); }
.nmt-bars{
  display:flex;flex-direction:column;justify-content:center;align-items:flex-end;
  gap:6px;width:28px;
}
.nav-menu-toggle .hb-bar{
  display:block;height:2px;width:28px;
  background:currentColor;border-radius:2px;
  transition:.4s var(--ease);
}
.nav-menu-toggle .hb-bar:nth-child(2){ width:19px; }     /* uneven bars (litmus) */
.nav-menu-toggle:hover .hb-bar:nth-child(2){ width:28px; }
/* Bars morph to an X while the fullscreen menu is open */
body.menu-open .nav-menu-toggle .hb-bar{ width:28px; }
body.menu-open .nav-menu-toggle .hb-bar:nth-child(1){ transform:translateY(8px) rotate(45deg); }
body.menu-open .nav-menu-toggle .hb-bar:nth-child(2){ opacity:0; }
body.menu-open .nav-menu-toggle .hb-bar:nth-child(3){ transform:translateY(-8px) rotate(-45deg); }

/* Scrolled header — the FYD logo + the "Menu" word smoothly animate away as
   you scroll past the top, leaving only the hamburger icon pinned top-right.
   They come back when the menu opens (so the overlay still shows branding). */
.nav-logo{ transition:opacity .45s var(--ease), transform .45s var(--ease); }
.nmt-label{
  display:inline-block;overflow:hidden;white-space:nowrap;
  max-width:120px;
  transition:opacity .4s var(--ease), max-width .45s var(--ease), margin .4s var(--ease);
}
body.nav-min .nav-logo{ opacity:0;transform:translateY(-16px);pointer-events:none; }
body.nav-min .nmt-label{ opacity:0;max-width:0;margin:0; }
body.nav-min .nav-menu-toggle{ gap:0; }
/* Menu open beats the scrolled state — bring the logo back behind the overlay */
body.nav-min.menu-open .nav-logo{ opacity:1;transform:none;pointer-events:auto; }

/* The full-height slide-in panel — hidden until body.menu-open */
.menu-panel{
  position:fixed; inset:0; z-index:55;
  background:var(--bg);
  padding:clamp(110px,16vh,170px) var(--pad-x) 44px;
  display:flex; flex-direction:column;
  pointer-events:none;
  transform:translateY(-100%);
  transition:transform .8s cubic-bezier(.645,.045,.355,1);
  overflow-y:auto;
}
body.light .menu-panel{ background:#fafaf6; }

body.menu-open .menu-panel{
  opacity:1;
  pointer-events:auto;
  transform:none;
}
body.menu-open{ overflow:hidden; }   /* lock body scroll while menu open */

/* Dedicated close button — hidden visually because the hamburger
   button in the nav pill morphs into an X when the menu is open.
   Two X buttons at once was confusing. We keep this in the DOM
   (just for the keyboard shortcut listener) but render it invisibly. */
.menu-close{
  position:absolute; top:0; left:0;
  width:1px; height:1px;
  opacity:0;
  pointer-events:none;
  background:transparent;
  border:none;
  color:transparent;
  font-size:1px;
}

.menu-links{
  display:flex; flex-direction:column; gap:8px;
  margin-top:40px;
}
.menu-links a{
  position:relative;
  display:flex; align-items:baseline; gap:22px;
  padding:clamp(13px,1.9vh,22px) 6px;
  font-family:var(--sans); font-weight:700; letter-spacing:-.02em;
  font-size:clamp(38px,6.4vw,80px); line-height:1.04;
  color:var(--ink);
  border-bottom:1px solid var(--line);
  transition:color .3s var(--ease), padding-left .45s var(--ease);
}
.menu-links a::after{
  content:"→"; margin-left:auto; align-self:center;
  font-size:.38em; color:var(--amber);
  opacity:0; transform:translateX(-16px);
  transition:opacity .35s var(--ease), transform .4s var(--ease);
}
.menu-links a:not(.menu-cta):hover,
.menu-links a:not(.menu-cta):active{ color:var(--amber); padding-left:26px; }
.menu-links a:not(.menu-cta):hover::after{ opacity:1; transform:translateX(0); }
.menu-links a .num{
  font-family:var(--mono); font-size:11px;
  letter-spacing:.20em;
  color:var(--dim);
  font-weight:400;
}
.menu-links a.current{ color:var(--amber); }
.menu-links a.current .num{ color:var(--amber); }

.menu-links .menu-cta{
  margin-top:30px;
  background:var(--amber);
  color:#04050a;
  border-radius:99px;
  padding:20px 28px;
  font-family:var(--mono); font-size:13px;
  letter-spacing:.16em; text-transform:uppercase;
  font-weight:600;
  border-bottom:none;
  display:inline-flex; justify-content:center; align-items:center;
  gap:12px;
}
.menu-links .menu-cta:hover{ padding-left:28px; }
.menu-links a.menu-cta:hover,
.menu-links a.menu-cta:active{ color:#04050a; }   /* keep dark text on the amber pill (was turning amber→invisible) */
.menu-links a.menu-cta::after{ display:none; }     /* it already has its own arrow */

.menu-foot{
  margin-top:auto;
  padding-top:30px;
  font-family:var(--ital); font-style:italic;
  color:var(--dim); font-size:14px;
}

/* The fullscreen menu + its "Menu" trigger now show on ALL viewports
   (litmus-style). The desktop link strip was retired. */
@media (max-width: 600px){
  .nav-menu-toggle .nmt-label{ display:none; }   /* tiny phones: bars only */
  /* Keep a ≥44px touch target even when only the bars show */
  .nav-menu-toggle{ padding:11px;min-width:44px;min-height:44px;justify-content:center;gap:0; }
}

/* iOS-safe background scroll lock while the fullscreen menu is open (JS adds
   this on touch; saves/restores scrollY). overflow:hidden alone rubber-bands. */
body.scroll-locked{ position:fixed;left:0;right:0;width:100%; }

/* ==========================================================
   27. CLIENTS WALL — the /clients logo grid
   Uniform 4:3 brand tiles (pre-rendered PNGs in assets/clients/),
   subtle alternating rotation echoing the hero reel cards,
   mono uppercase captions, amber lift on hover.
   ========================================================== */
/* Litmus-style client wall — clean spaced grid of monochrome white logos on
   the page bg (NO white tiles/boxes), exactly like the homepage marquee.
   Light theme inverts them to dark. */
.clients-wall{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:clamp(24px,3vw,44px);margin-top:var(--grid-gap-top);
}
.client-tile{
  margin:0;cursor:default;
  display:flex;align-items:center;justify-content:center;
  aspect-ratio:3/2;
  transition:opacity .9s var(--ease), transform .4s var(--ease);
}
.client-tile-img{ width:100%;height:100%;display:flex;align-items:center;justify-content:center; }
.client-tile-img img{
  max-width:74%;max-height:54%;width:auto;height:auto;object-fit:contain;display:block;
  opacity:.66;transition:opacity .35s var(--ease), transform .4s var(--ease);
}
.client-tile:hover .client-tile-img img{ opacity:1;transform:scale(1.06); }
.client-tile figcaption{ display:none; }   /* logos only, like the motion strip */
body.light .client-tile-img img{ filter:invert(1); }   /* white mono → dark on cream */

@media (max-width:1100px){ .clients-wall{grid-template-columns:repeat(3,1fr)} }
@media (max-width:720px){ .clients-wall{grid-template-columns:repeat(2,1fr)} }