/* ==========================================================
   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;
  --ital:     'Instrument Serif', Georgia, serif;
  --mono:     'JetBrains Mono', ui-monospace, 'Cascadia Mono', monospace;

  /* layout */
  --maxw:     1480px;
  --pad-x:    6vw;

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


/* ==========================================================
   02. RESET + BASE
   ========================================================== */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--mono);
  font-size:15px;
  line-height:1.65;
  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}


/* ==========================================================
   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.
   ========================================================== */
.nav{
  position:fixed;top:24px;left:50%;z-index:60;
  transform:translateX(-50%);
  display:flex;align-items:center;gap:8px;
  padding:8px 8px 8px 22px;
  background:rgba(8,10,16,.55);
  border:1px solid var(--line-2);
  border-radius:99px;
  backdrop-filter:blur(20px) saturate(1.1);
  -webkit-backdrop-filter:blur(20px) saturate(1.1);
}
.nav-logo{
  display:flex;align-items:center;
  margin-right:14px;color:var(--amber);
  transition:.3s var(--ease);
}
.nav-logo:hover{color:#fff;transform:scale(1.04)}
.nav-logo .logo-mark{
  height:24px;width:auto;display:block;
}
.nav-links{display:flex;gap:2px}
.nav-links a{
  font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  padding:9px 14px;border-radius:99px;color:var(--ink);
  opacity:.78;transition:.3s var(--ease);
}
.nav-links a:hover{opacity:1;background:rgba(236,229,215,.06)}
.nav-cta{
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  padding:10px 18px;border-radius:99px;
  background:var(--amber);color:#04050a;font-weight:500;
  box-shadow:0 0 30px rgba(255,138,61,.55);
  transition:.3s var(--ease);
}
.nav-cta:hover{transform:translateY(-1px);box-shadow:0 0 50px rgba(255,138,61,.8)}


/* ==========================================================
   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:140px var(--pad-x);
}
.section-head{
  max-width:62ch;
  margin-bottom:54px;
}
.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:10px;
  letter-spacing:.32em;text-transform:uppercase;
  color:var(--dim);margin-bottom:28px;
}
.kicker::before{
  content:"";width:32px;height:1px;background:var(--amber);
  box-shadow:0 0 8px rgba(255,138,61,.5);
}
.kicker b{color:var(--ink);font-weight:500}
.kicker-amber{color:var(--amber)}
.kicker-amber b{color:var(--amber)}

h2{
  font-family:var(--serif);font-weight:300;
  font-size:clamp(44px,5.6vw,92px);
  line-height:.98;letter-spacing:-.035em;
  color:#fff;max-width:18ch;
  /* 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(--serif);font-weight:300;
  font-size:clamp(24px,2.4vw,32px);
  line-height:1.18;letter-spacing:-.02em;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:60ch;margin-top:24px;
  color:var(--ink-soft);font-size:15px;line-height:1.85;
}
.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:10px;
  letter-spacing:.32em;text-transform:uppercase;
  color:var(--dim);margin-bottom:34px;
}
.eyebrow .bar{
  display:inline-block;width:36px;height:1px;background:var(--amber);
  box-shadow:0 0 8px rgba(255,138,61,.5);
}

.hero-h{
  font-family:var(--serif);font-weight:300;
  font-size:clamp(64px,9.6vw,176px);
  line-height:.92;letter-spacing:-.045em;
  color:#fff;max-width:14ch;
  mix-blend-mode:screen;
  /* 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;
}
.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}

.hero-sub{
  margin-top:40px;max-width:55ch;
  color:var(--ink-soft);font-size:15px;line-height:1.85;
  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}
}


/* ==========================================================
   06. TICKER
   Auto-scrolling band of services. CSS-only animation.
   ========================================================== */
.ticker{
  padding:30px 0;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  background:rgba(6,9,14,.6);
  overflow:hidden;position:relative;z-index:1;
}
.ticker-row{
  display:flex;gap:48px;white-space:nowrap;
  font-family:var(--serif);font-weight:300;
  font-size:42px;letter-spacing:-.02em;color:var(--ink);
  /* Animation duration is driven by --ticker-speed, which the admin
     can change. Updating the CSS variable applies live without a
     page reload (no animation restart hop). Default 18s. */
  animation:tickerRoll var(--ticker-speed, 18s) linear infinite;
  will-change:transform;
}
.ticker-row em{
  font-family:var(--ital);font-style:italic;
  color:var(--amber);margin:0 6px;font-size:36px;
}
.ticker-row span{flex-shrink:0;opacity:.85}
@keyframes tickerRoll{
  from{transform:translateX(0)}
  to  {transform:translateX(-50%)}
}


/* ==========================================================
   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);
}


/* ==========================================================
   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:54px;
  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:54px;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(--serif);font-weight:400;
  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:54px;
  /* 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(--serif);font-weight:300;
  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:54px;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);
}
.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:54px;
}
.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(--serif);font-weight:300;
  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(--serif);font-weight:400;
  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:auto;padding:120px 5vw 70px}
  .hero-h{font-size:50px;line-height:.96;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}

  /* Ticker */
  .ticker-row{font-size:30px}
  .ticker-row em{font-size:24px}

  /* 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);
}

/* Ticker gets a light backdrop */
body.light .ticker{
  background:#f5f3ec;
  border-color:var(--line);
}

/* 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); }

/* TICKER text */
body.light .ticker-row span{ color:var(--ink); }
body.light .ticker-row em{ color:var(--amber); }

/* 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 */
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%;
  }
}


/* ==========================================================
   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:none;
  width:38px;height:38px;
  flex-direction:column;
  justify-content:center;align-items:center;
  gap:5px;
  background:transparent;
  border:1px solid var(--line-2);
  border-radius:99px;
  cursor:pointer;
  padding:0;
  margin-left:4px;
  transition:.25s var(--ease);
}
.nav-menu-toggle:hover{ border-color:var(--amber); }
.nav-menu-toggle .hb-bar{
  display:block;
  width:16px; height:2px;
  background:var(--ink);
  border-radius:2px;
  transition:.3s var(--ease);
}
/* Animated X when menu open */
body.menu-open .nav-menu-toggle .hb-bar:nth-child(1){
  transform:translateY(7px) 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(-7px) rotate(-45deg);
}

/* The full-height slide-in panel — hidden until body.menu-open */
.menu-panel{
  position:fixed; inset:0; z-index:55;
  background:var(--bg);
  padding:90px 28px 32px;
  display:flex; flex-direction:column;
  opacity:0; pointer-events:none;
  transform:translateY(-12px);
  transition:opacity .35s var(--ease), transform .35s var(--ease);
  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{
  display:flex; align-items:baseline; gap:18px;
  padding:18px 8px;
  font-family:var(--serif); font-weight:300;
  font-size:38px; line-height:1.1;
  color:var(--ink);
  border-bottom:1px solid var(--line);
  transition:.2s var(--ease);
}
.menu-links a:hover,
.menu-links a:active{ color:var(--amber); padding-left:18px; }
.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-foot{
  margin-top:auto;
  padding-top:30px;
  font-family:var(--ital); font-style:italic;
  color:var(--dim); font-size:14px;
}

@media (max-width: 900px){
  .nav-menu-toggle{ display:flex; }
  /* Free up nav space — hide the inline nav-links + the CTA on mobile;
     they live inside the menu-panel instead. */
  .nav-links{ display:none; }
  .nav-cta{ display:none; }
  .nav{ padding-right:6px; }
}

@media (min-width: 901px){
  /* Ensure menu-panel never appears on desktop, even if class added */
  .menu-panel{ display:none; }
}