/* ─── Fonts ──────────────────────────────────────────────────── */
@font-face{
  font-family:ArcSans;
  src:url("/_next/static/media/27834908180db20f-s.p.woff2") format("woff2");
  font-display:swap;
  font-weight:100 900;
}
@font-face{
  font-family:ArcMono;
  src:url("/_next/static/media/78fec81b34c4a365.p.woff2") format("woff2");
  font-display:swap;
  font-weight:100 900;
}

/* ─── Design Tokens ──────────────────────────────────────────── */
/* Dark editorial system. One warm near-black base, one brass accent.
   Semantic tokens are the source of truth; the legacy names below
   them are aliases kept so existing rules keep working.
   Full reference: DESIGN-SYSTEM.md at the repo root. */
:root{
  /* Surfaces. Light base; the deep tone is reserved for the hero,
     footer, splash curtain, and inversion panels. */
  --bg-deep:#101018;      /* hero, splash curtain, footer, inversion panels */
  --bg:#fbf8f3;           /* page base, warm paper */
  --bg-2:#f4efe6;         /* alternating sections */
  --surface:#ffffff;      /* cards, tiles, panels */
  --surface-2:#faf5ec;    /* hover states, lifted panels */
  --surface-3:#ece5d8;    /* deepest raised tone, decorative fills */

  /* Text, strongest to faintest */
  --text:#12121a;         /* headlines, primary copy */
  --text-2:#3c3c47;       /* body copy, leads */
  --text-3:#6b6b77;       /* secondary copy, nav links */
  --text-4:#9897a0;       /* captions, meta, labels */

  /* Lines and accent */
  --rule:rgba(18,18,26,.1);
  --accent:#f6a21d;       /* vivid amber. Primary accent */
  --accent-deep:#e8641f;  /* hot orange. Gradient partner and hover tone */

  /* Legacy aliases. Old rules read these names; values now point
     at the dark system above. Do not add new rules with these. */
  --ink:var(--text);
  --ink-2:var(--text-2);
  --ink-3:var(--text-3);
  --ink-4:var(--text-4);
  --fog:var(--bg);
  --fog-2:var(--bg-2);
  --fog-3:var(--surface-3);
  --paper:var(--surface-2);
  --white:var(--surface);
  --amber:var(--accent);
  --pink:var(--accent);
  --blue:var(--accent-deep);
  --grad:linear-gradient(90deg,var(--accent) 0%,var(--accent-deep) 100%);
  /* Display gradient. The flat two-stop ramp above is fine on a 2px
     rule but reads cheap blown up across a 74px serif: two colours,
     one direction, no light in it. This one is angled so the light
     falls from upper-left, opens on a pale gold, holds the brand
     amber through the middle, and closes on an ember — six stops so
     the letterforms pick up a gradient across their own strokes
     rather than the phrase just changing colour left to right.
     Dark backgrounds only; the pale opening stop would disappear
     on cream, so light-ground .gt keeps --grad. */
  --grad-display:linear-gradient(104deg,#ffd489 0%,#fbb43f 20%,#f6a21d 40%,#f2861f 62%,#e8641f 82%,#d44e15 100%);
  --grad-soft:linear-gradient(135deg,rgba(246,162,29,.14),rgba(232,100,31,.06) 60%,transparent);

  /* Depth */
  --shadow:0 24px 80px rgba(18,18,26,.1);
  --shadow-sm:0 4px 20px rgba(18,18,26,.07);
  --shadow-lg:0 40px 120px rgba(18,18,26,.14);

  /* Type */
  --serif:Georgia,"Times New Roman",serif;
  --sans:ArcSans,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --mono:ArcMono,"SFMono-Regular",Consolas,monospace;

  /* Type scale (mobile-first clamps, documented in DESIGN-SYSTEM.md) */
  --text-display:clamp(46px,7.5vw,92px);
  --text-title:clamp(34px,4.5vw,58px);
  --text-title-sm:clamp(30px,3.8vw,50px);
  --text-card:24px;
  --text-lead:18px;
  --text-body:15px;
  --text-small:13px;
  --text-caption:12px;
  --text-label:10px;

  /* Spacing scale, 4px base */
  --space-1:4px;
  --space-2:8px;
  --space-3:12px;
  --space-4:16px;
  --space-5:24px;
  --space-6:32px;
  --space-7:48px;
  --space-8:64px;
  --space-9:96px;
  --space-10:112px;

  --radius:14px;
  --radius-sm:8px;
  --radius-lg:20px;

  /* ── Motion curves ──────────────────────────────────────────
     Four hand-built curves, not library presets. The shared trait
     is a weighted start and a long settle: everything begins with
     a little mass behind it and comes to rest slowly, the way a
     heavy, well-damped object does. Nothing overshoots.

     --ease-arc     the signature. Barely moves for the first few
                    frames, gathers, then glides a long way out.
                    Reveals, entrances, anything that travels.
     --ease-glide   answers the pointer on frame one, then takes
                    its time landing. Hover, focus, state changes.
     --ease-settle  heaviest. Slow to leave, very slow to arrive.
                    Curtain, hero arc, full-page moves.
     --ease-lift    the mirror: slow start, accelerating exit.

     --ease-out / --ease-spring are kept as aliases so the ~90
     existing rules inherit the new feel. Nothing springs. */
  --ease-arc:cubic-bezier(0.30,0.09,0.18,1);
  --ease-glide:cubic-bezier(0.18,0.72,0.22,1);
  --ease-settle:cubic-bezier(0.44,0.02,0.06,1);
  --ease-lift:cubic-bezier(0.62,0,0.86,0.06);
  --ease-out:var(--ease-arc);
  --ease-spring:var(--ease-glide);

  /* Durations. Slower than a typical site by roughly half again.
     --dur-micro stays short on purpose: a control that answers a
     click must feel instant, or "premium" just reads as "laggy."
     Everything that travels through space gets real time. */
  --dur-micro:.32s;
  --dur-quick:.52s;
  --dur-fast:var(--dur-quick);
  --dur-base:1.1s;
  --dur-slow:1.7s;
  --dur-epic:2.4s;
  /* The curtain lift. Its own token because site.js schedules the
     whole opening off this number — change it here and the intro
     follows. Keep CURTAIN_LIFT_MS in site.js in step. */
  --dur-curtain:1.4s;
}

/* ─── Reset & Base ───────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--fog);
  color:var(--ink);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
body.no-scroll{overflow:hidden}
a{color:inherit;text-decoration:none}
img,svg,video{display:block;max-width:100%}
button,input,textarea{font:inherit}
button{cursor:pointer}
button:disabled{cursor:not-allowed;opacity:.45}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px}

/* ─── Skip Link ──────────────────────────────────────────────── */
.skip-link{
  position:absolute;
  left:18px;
  top:14px;
  z-index:999;
  transform:translateY(-140%);
  background:var(--ink);
  color:var(--white);
  padding:9px 13px;
  border-radius:999px;
  font-size:13px;
}
.skip-link:focus{transform:none}

/* ─── Gradient Text ──────────────────────────────────────────── */
.gt{
  background:var(--grad);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
  color:transparent;
}
.display .gt,.section-title .gt{font-style:italic}
/* Hero only — the dark ground the pale opening stop needs. */
.hero .display .gt{background-image:var(--grad-display)}

/* ═══════════════════════════════════════════════════════════════
   NAVIGATION
══════════════════════════════════════════════════════════════ */
.site-nav{
  position:fixed;
  top:0;
  left:0;
  right:0;
  z-index:100;
  height:66px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding:0 52px;
  border-bottom:1px solid var(--rule);
  /* Near-opaque on purpose. At .86 the bar composited the near-black
     hero through itself into a muddy grey, which dropped the ink
     wordmark and the nav links onto a dim ground. Holding the cream
     keeps the bar reading as paper over every section. */
  background:rgba(251,248,243,.97);
  backdrop-filter:blur(20px) saturate(180%);
  -webkit-backdrop-filter:blur(20px) saturate(180%);
  transition:height var(--dur-quick) var(--ease-glide),box-shadow var(--dur-quick) var(--ease-glide),background var(--dur-quick) var(--ease-glide);
}
.site-nav.scrolled{
  height:54px;
  background:rgba(251,248,243,.99);
  box-shadow:0 1px 0 var(--rule),0 4px 32px rgba(18,18,26,.08);
}

.brand{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
  text-decoration:none;
}
/* Full wordmark logo — SVG is 1643×164 (≈10:1 ratio) */
.brand-logo{
  display:block;
  height:22px;
  width:auto;
}
/* Keep legacy fallback for any icon.svg that might still exist */
.brand img:not(.brand-logo){width:28px;height:28px}
.brand-word{
  font-family:var(--serif);
  font-size:16px;
  letter-spacing:-.01em;
  white-space:nowrap;
  color:var(--ink);
  display:none;
}

.nav-links{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:6px;
  min-width:0;
}
.nav-links a{
  position:relative;
  display:inline-flex;
  align-items:center;
  /* --ink-3 on the cream bar sat at ~4.9:1. --ink-2 takes it to
     ~9.5:1 and lets the ink logo hold the row. */
  color:var(--ink-2);
  font-size:13px;
  letter-spacing:.02em;
  white-space:nowrap;
  padding:6px 10px;
  border-radius:6px;
  transition:color var(--dur-quick) var(--ease-glide),background var(--dur-quick) var(--ease-glide);
}
.nav-links a:hover{
  color:var(--ink);
  background:rgba(18,18,26,.05);
}
.nav-links a[aria-current="page"]{
  color:var(--ink);
}
.nav-links a[aria-current="page"]:not(.btn)::after{
  content:"";
  position:absolute;
  bottom:0;
  left:10px;
  right:10px;
  height:2px;
  background:var(--grad);
  border-radius:2px;
}
.nav-links .btn,
.nav-links .btn-nav{
  margin-left:8px;
  padding:9px 20px;
  min-height:auto;
  font-size:13px;
  border-radius:999px;
}
.nav-links .btn:hover,
.nav-links .btn-nav:hover{
  background:var(--ink)!important;
  border-color:transparent!important;
}
.nav-links .btn-primary:hover{background:var(--ink-2)!important}

/* Hamburger */
.nav-toggle{
  display:none;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  width:40px;
  height:40px;
  border:1px solid var(--rule);
  border-radius:var(--radius-sm);
  background:transparent;
  color:var(--ink-3);
  cursor:pointer;
  gap:5px;
  padding:0;
  transition:color var(--dur-quick) var(--ease-glide),border-color var(--dur-quick) var(--ease-glide),background var(--dur-quick) var(--ease-glide);
}
.nav-toggle:hover{color:var(--ink);border-color:var(--ink-3);background:rgba(18,18,26,.04)}
.nav-toggle span{
  display:block;
  width:18px;
  height:1.5px;
  background:currentColor;
  border-radius:2px;
  transition:transform var(--dur-micro) var(--ease-glide),opacity var(--dur-quick) var(--ease-glide);
  transform-origin:center;
}
.nav-toggle.open span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.nav-toggle.open span:nth-child(2){opacity:0;transform:scaleX(0)}
.nav-toggle.open span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

/* ═══════════════════════════════════════════════════════════════
   BUTTONS
══════════════════════════════════════════════════════════════ */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:44px;
  border-radius:999px;
  padding:12px 24px;
  border:1.5px solid var(--rule);
  background:transparent;
  color:var(--ink);
  font-size:14px;
  font-weight:520;
  letter-spacing:.01em;
  white-space:nowrap;
  transition:transform var(--dur-micro) var(--ease-glide),opacity var(--dur-quick) var(--ease-glide),border-color var(--dur-quick) var(--ease-glide),background var(--dur-quick) var(--ease-glide),box-shadow var(--dur-quick) var(--ease-glide);
}
.btn:hover{transform:translateY(-2px);border-color:rgba(18,18,26,.26)}

.btn-primary{
  color:var(--white)!important;
  border-color:transparent!important;
  background:var(--ink);
  box-shadow:none;
  font-weight:500;
}
.btn-primary:hover{
  background:var(--ink-2);
  transform:translateY(-1px);
  box-shadow:none;
}
.btn-primary:active{transform:translateY(0);background:var(--ink)}

.btn-nav{
  color:var(--white)!important;
  border-color:transparent!important;
  background:var(--ink)!important;
  box-shadow:none;
  font-weight:500;
  font-size:13px;
  padding:9px 20px;
  min-height:auto;
}
.btn-nav:hover{
  opacity:.82;
  transform:none;
  background:var(--ink)!important;
}

.btn-dark{
  color:var(--white);
  border-color:var(--ink)!important;
  background:var(--ink);
}
.btn-dark:hover{opacity:.82;transform:translateY(-1px)}

.btn-line{
  background:transparent;
  border:1px solid rgba(18,18,26,.18);
  color:var(--ink);
  font-weight:400;
}
.btn-line:hover{
  border-color:var(--ink);
  background:var(--fog-2);
  transform:translateY(-1px);
}

.btn-lg{
  padding:15px 34px;
  font-size:15px;
  min-height:50px;
}

/* ═══════════════════════════════════════════════════════════════
   LAYOUT UTILITIES
══════════════════════════════════════════════════════════════ */
.wrap{
  width:min(1120px,100%);
  margin:0 auto;
  padding:0 clamp(20px,5vw,52px);
}
.wide-wrap{
  width:min(1240px,100%);
  margin:0 auto;
  padding:0 clamp(20px,5vw,52px);
}
section{border-bottom:1px solid var(--rule);scroll-margin-top:90px}
.section-pad{padding:112px 0}
.page-main{padding-top:0}

/* ─── Inner page hero ───────────────────────────────────────── */
.page-hero{
  padding:118px 0 82px;
  text-align:center;
  position:relative;
  overflow:hidden;
  background:var(--paper);
}
.page-hero::before{
  content:"";
  position:absolute;
  inset:0;
  background-image:linear-gradient(var(--rule) 1px,transparent 1px),linear-gradient(90deg,var(--rule) 1px,transparent 1px);
  background-size:76px 76px;
  mask-image:radial-gradient(ellipse 70% 65% at 50% 25%,black 20%,transparent 100%);
  opacity:.6;
  pointer-events:none;
}
.page-hero .wrap{position:relative}

/* ─── Typography Primitives ─────────────────────────────────── */
.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:10px;
  margin:0 0 28px;
  color:var(--ink-4);
  font-family:var(--mono);
  font-size:10px;
  font-weight:650;
  letter-spacing:.18em;
  text-transform:uppercase;
}
.eyebrow::before{
  content:"";
  width:22px;
  height:2px;
  background:var(--grad);
  border-radius:2px;
  flex-shrink:0;
}
h1,h2,h3,p{margin:0}

/* ─── Hero entrance animation ───────────────────────────────── */
/* Fallback entrance for when GSAP is unavailable. Longer travel and
   wider spacing between lines than the old cascade: each element
   should finish arriving before the eye moves to the next. */
@keyframes heroFadeUp{
  from{opacity:0;transform:translateY(30px)}
  to{opacity:1;transform:none}
}
.hero .hero-tag{animation:heroFadeUp var(--dur-slow) var(--ease-arc) .15s both}
.hero .display{animation:heroFadeUp var(--dur-slow) var(--ease-arc) .34s both}
.hero .lead{animation:heroFadeUp var(--dur-slow) var(--ease-arc) .58s both}
.hero .hero-actions{animation:heroFadeUp var(--dur-slow) var(--ease-arc) .8s both}
.hero .stats{animation:heroFadeUp var(--dur-slow) var(--ease-arc) .98s both}
.hero .showreel-card{animation:heroFadeUp var(--dur-slow) var(--ease-arc) 1.16s both}

.display{
  max-width:940px;
  margin:0 auto;
  font-family:var(--serif);
  font-size:clamp(42px,6.4vw,74px);
  font-weight:300;
  line-height:1.02;
  letter-spacing:-.03em;
}
.display em,.section-title em{font-style:italic}
.lead{
  max-width:620px;
  margin:22px auto 0;
  color:var(--ink-2);
  font-size:17px;
  font-weight:300;
  line-height:1.7;
  letter-spacing:.005em;
}
.section-title{
  font-family:var(--serif);
  font-size:clamp(34px,4.5vw,58px);
  font-weight:300;
  line-height:1.08;
  letter-spacing:-.025em;
}
.section-copy{
  color:var(--ink-2);
  font-size:15px;
  font-weight:300;
  line-height:1.9;
}
.section-copy p+p{margin-top:18px}

/* ─── Grid Layouts ──────────────────────────────────────────── */
.two-col{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:72px;
  align-items:start;
}
.intro-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:18px;
  max-width:820px;
  margin:0 auto 64px;
  text-align:center;
}
.intro-grid .section-copy{max-width:660px;margin:0 auto}

/* ═══════════════════════════════════════════════════════════════
   HERO SECTION
══════════════════════════════════════════════════════════════ */
/* Dark stage over a light site. The golden horizon arc at the base
   is the brand move: the page rises out of it. */
.hero{
  min-height:96svh;
  display:flex;
  align-items:center;
  padding:80px 52px 190px;
  position:relative;
  overflow:hidden;
  background:var(--bg-deep);
}

/* Faint grid on the dark stage */
.hero::before{
  content:"";
  position:absolute;
  inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:72px 72px;
  mask-image:radial-gradient(ellipse 90% 80% at 55% 40%,black 10%,transparent 75%);
  /* Vars let GSAP fade the grid in on load and drift it with the
     cursor (site.js). Fallbacks keep the no-JS render identical. */
  opacity:var(--grid-o,.6);
  transform:translate3d(var(--grid-x,0px),var(--grid-y,0px),0);
  pointer-events:none;
}

/* The horizon arc: the grained silver crescent, sunk low at the base
   of the stage so only its shallow crest shows below the CTAs — never
   touching them. Sinking (rather than shrinking) keeps the wide, gentle
   curve; overflow:hidden on .hero crops the surplus, which is solid
   fill anyway, so nothing but --bg-deep is lost. No glow at rest — a
   warm spotlight follows the cursor (see .hero-arc-glow + site.js). */
.hero-arc{
  position:absolute;
  left:50%;
  bottom:clamp(-60px,-6vw,-16px);
  width:160%;
  max-width:2000px;
  transform:translateX(-50%);
  pointer-events:none;
  z-index:0;
  animation:heroArcRise var(--dur-epic) var(--ease-settle) .1s both;
}
.hero-arc img{
  display:block;
  width:100%;
  height:auto;
}
@keyframes heroArcRise{
  from{opacity:0;transform:translateX(-50%) translateY(44px)}
  to{opacity:1;transform:translateX(-50%) translateY(0)}
}
/* Cursor-follow glow: a champagne-to-orange radial that tracks the
   pointer, clipped to the crescent so only the arc lights up, and only
   where the cursor is near it (the radial falloff handles proximity).
   Kept soft — a shine, not a spotlight. site.js sets --mx/--my and
   toggles .glow-on while the pointer is inside the hero. */
.hero-arc-glow{
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:0;
  transition:opacity var(--dur-base) var(--ease-arc);
  background:radial-gradient(circle 210px at var(--mx,50%) var(--my,50%),rgba(247,231,206,.6),rgba(230,152,90,.26) 45%,transparent 72%);
  mix-blend-mode:screen;
  -webkit-mask-image:url(/assets/hero-arc-shape.svg);
  mask-image:url(/assets/hero-arc-shape.svg);
  -webkit-mask-size:100% 100%;
  mask-size:100% 100%;
  -webkit-mask-repeat:no-repeat;
  mask-repeat:no-repeat;
}
.hero-arc.glow-on .hero-arc-glow{opacity:1}

/* ─── GSAP living stage (site.js hero module) ────────────────── */
/* When JS is on, an inline <head> script adds .gsap-armed and GSAP
   owns the hero intro: pre-hide the text and cancel the CSS-keyframe
   fallbacks above so nothing double-plays. No-JS never gets the
   class, so the plain CSS entrance still runs. */
html.gsap-armed .hero .hero-tag,
html.gsap-armed .hero .display,
html.gsap-armed .hero .lead,
html.gsap-armed .hero .hero-actions{animation:none;opacity:0}
html.gsap-armed .hero-arc{animation:none}
/* The curtain lifts upward, so it uncovers the nav last. Rather than
   have a fully formed bar appear the instant the edge passes it, hold
   the nav back and let site.js slide it down as the curtain leaves. */
html.gsap-armed .site-nav{opacity:0}
html.gsap-armed .site-nav.nav-in{opacity:1}

/* Headline reveal. SplitText wraps each word in .hero-word and site.js
   resolves them out of a blur on --ease-arc, heavily overlapped so the
   line reads as one travelling wave rather than separate arrivals.
   inline-block because transforms do not apply to inline boxes, and
   per-word rather than per-phrase because a phrase-level inline-block
   would stop the headline wrapping on narrow screens. */
.hero-word{display:inline-block;will-change:transform,opacity,filter}
/* Only while the headline is split: the words carry their own slices
   of the phrase's gradient, so the parent must stop painting or it
   would show through words that have not resolved yet. Removed with
   the split, which restores .gt to painting the whole ramp itself. */
.display .gt.gt-split{background-image:none}

/* Crest stroke: the luminous line the intro draws along the arc's
   crest; afterwards it breathes and the spark rides it (MotionPath).
   The path mirrors the crescent's outer circle (r≈2214, apex y≈5). */
.hero-arc-crest{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  pointer-events:none;
  filter:drop-shadow(0 0 7px rgba(247,231,206,.5));
}
.hero-spark{
  position:absolute;
  top:0;
  left:0;
  width:12px;
  height:12px;
  border-radius:50%;
  background:radial-gradient(circle,#fff,rgba(247,231,206,.85) 35%,rgba(232,100,31,0) 70%);
  opacity:0;
  pointer-events:none;
}
.hero-embers{
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
}
.hero-embers .ember{
  position:absolute;
  bottom:0;
  width:4px;
  height:4px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(247,231,206,.9),rgba(246,162,29,0) 70%);
  filter:blur(1px);
  opacity:0;
}
@media (prefers-reduced-motion: reduce){
  html.gsap-armed .hero .hero-tag,
  html.gsap-armed .hero .display,
  html.gsap-armed .hero .lead,
  html.gsap-armed .hero .hero-actions{opacity:1}
  .hero-spark,.hero-embers{display:none}
}

.hero-inner{
  position:relative;
  z-index:1;
  width:min(1080px,100%);
  margin:0 auto;
  text-align:center;
}

/* Light type on the dark stage */
.hero .display{color:var(--bg)}
.hero .lead{color:rgba(255,255,255,.72)}
/* Frosted-glass primary CTA on the dark stage. Kept dominant over the
   outlined secondary with a fuller fill and a soft drop shadow. */
.hero .btn-primary{
  background:rgba(255,255,255,.14)!important;
  color:var(--bg)!important;
  border:1px solid rgba(255,255,255,.28)!important;
  -webkit-backdrop-filter:blur(14px) saturate(1.2);
  backdrop-filter:blur(14px) saturate(1.2);
  box-shadow:0 8px 30px rgba(0,0,0,.25);
}
.hero .btn-primary:hover{
  background:rgba(255,255,255,.22)!important;
  border-color:rgba(255,255,255,.4)!important;
}
.hero .btn-line{
  border-color:rgba(255,255,255,.32);
  color:var(--bg);
}
.hero .btn-line:hover{border-color:rgba(255,255,255,.8);background:rgba(255,255,255,.06)}

/* Eyebrow. The gradient dot that used to lead this line pulled the
   label off-centre under a centred headline and read as a bullet
   rather than a mark. Replaced with a hairline capsule — border
   only, no fill, so it draws an edge without adding a surface.
   Brighter ink and wider tracking do the emphasis the dot was
   trying to do. */
.hero-tag{
  display:inline-flex;
  align-items:center;
  margin:0 0 22px;
  padding:7px 16px;
  border:1px solid rgba(255,255,255,.16);
  border-radius:999px;
  color:rgba(255,255,255,.82);
  font-size:11px;
  font-weight:500;
  letter-spacing:.16em;
  text-transform:uppercase;
}

.hero-actions{
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  gap:12px;
  margin:28px 0 0;
}

/* ─── Stats Bar ─────────────────────────────────────────────── */
.stats{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  max-width:420px;
  margin:0 auto;
  overflow:hidden;
  border-radius:16px;
  background:rgba(255,255,255,.92);
  box-shadow:0 0 0 1px var(--rule),0 20px 60px rgba(18,18,26,.09);
  backdrop-filter:blur(16px);
  position:relative;
  outline:none;
}
/* Gradient top border without mask — use a pseudo on parent */
.stats::after{
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:3px;
  background:var(--grad);
  border-radius:16px 16px 0 0;
  pointer-events:none;
  z-index:1;
}
.stat{
  padding:22px 20px;
  border-right:1px solid rgba(18,18,26,.08);
  text-align:center;
  transition:background var(--dur-quick) var(--ease-glide);
}
.stat:hover{background:rgba(18,18,26,.02)}
.stat:last-child{border-right:0}
.stat strong{
  display:block;
  font-family:var(--serif);
  font-size:clamp(26px,3vw,40px);
  font-weight:300;
  line-height:1;
  letter-spacing:-.02em;
  color:var(--ink);
}
.stat span{
  display:block;
  margin-top:6px;
  color:var(--ink-4);
  font-size:11px;
  letter-spacing:.04em;
  line-height:1.4;
}

/* ─── Showreel Card ─────────────────────────────────────────── */
.showreel-card{
  max-width:900px;
  margin:60px auto 0;
  border:1px solid rgba(18,18,26,.1);
  border-radius:20px;
  background:rgba(255,255,255,.78);
  backdrop-filter:blur(16px);
  overflow:hidden;
  padding:0;
  box-shadow:0 32px 80px rgba(18,18,26,.1);
  transition:transform var(--dur-quick) var(--ease-glide),box-shadow var(--dur-quick) var(--ease-glide);
}
.showreel-card:hover{
  transform:translateY(-3px);
  box-shadow:0 48px 100px rgba(18,18,26,.13);
}
.showreel-stage{
  min-height:260px;
  position:relative;
  background:
    linear-gradient(90deg,rgba(18,18,26,.04) 1px,transparent 1px),
    linear-gradient(rgba(18,18,26,.04) 1px,transparent 1px),
    radial-gradient(circle at 15% 20%,rgba(246,162,29,.22),transparent 32%),
    radial-gradient(circle at 82% 40%,rgba(232,100,31,.18),transparent 34%),
    radial-gradient(circle at 50% 80%,rgba(246,162,29,.12),transparent 40%),
    var(--fog-2);
  background-size:54px 54px,54px 54px,auto,auto,auto,auto;
  overflow:hidden;
}
.showreel-track{
  position:absolute;
  inset:34px 0;
  display:flex;
  gap:16px;
  width:max-content;
  min-width:200%;
  align-items:center;
  animation:reel 46s linear infinite;
}
.reel-panel{
  width:260px;
  min-height:172px;
  padding:22px;
  border:1px solid rgba(18,18,26,.1);
  border-radius:12px;
  background:rgba(255,255,255,.95);
  box-shadow:0 4px 20px rgba(18,18,26,.07);
  transition:transform var(--dur-quick) var(--ease-glide);
}
.reel-panel:hover{transform:scale(1.02)}
.reel-panel small{
  color:var(--ink-4);
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:.14em;
  text-transform:uppercase;
}
.reel-panel p{
  margin-top:18px;
  font-family:var(--serif);
  font-size:21px;
  line-height:1.22;
  color:var(--ink);
}
@keyframes reel{to{transform:translateX(-50%)}}
.showreel-caption{
  display:flex;
  justify-content:space-between;
  gap:18px;
  padding:14px 22px;
  color:var(--ink-4);
  font-size:12px;
  border-top:1px solid var(--rule);
  background:rgba(255,255,255,.5);
}

/* ═══════════════════════════════════════════════════════════════
   LOGO MARQUEE
══════════════════════════════════════════════════════════════ */
.logo-marquee{
  padding:36px 0;
  overflow:hidden;
  background:var(--white);
  border-bottom:1px solid var(--rule);
}
.marquee-label{
  margin-bottom:20px;
  color:var(--ink-4);
  font-family:var(--mono);
  font-size:10px;
  font-weight:650;
  letter-spacing:.16em;
  text-align:center;
  text-transform:uppercase;
}
.logo-track{
  display:flex;
  width:max-content;
  min-width:200%;
  gap:14px;
  animation:marquee 58s linear infinite;
}
.logo-chip{
  display:flex;
  align-items:center;
  justify-content:center;
  min-width:180px;
  height:48px;
  border:1px solid var(--rule);
  border-radius:999px;
  background:var(--fog);
  color:var(--ink-3);
  filter:grayscale(1);
  transition:color var(--dur-quick) var(--ease-glide),filter var(--dur-quick) var(--ease-glide),background var(--dur-quick) var(--ease-glide),border-color var(--dur-quick) var(--ease-glide),transform var(--dur-micro) var(--ease-glide);
  font-family:var(--serif);
  font-size:16px;
  cursor:default;
}
.logo-chip:hover{color:var(--ink);filter:none;background:var(--white);border-color:rgba(18,18,26,.2);transform:scale(1.04)}
@keyframes marquee{to{transform:translateX(-50%)}}

/* ═══════════════════════════════════════════════════════════════
   GRID COMPONENTS (symptom, card, etc.)
══════════════════════════════════════════════════════════════ */
.symptom-list,.card-grid,.signal-grid,.timeline,.resource-grid,.post-grid,.stats-row,.principle-list,.legal-list{
  display:grid;
  gap:1px;
  border:1px solid var(--rule);
  border-radius:var(--radius);
  overflow:hidden;
  background:var(--rule);
}
.signal-grid{grid-template-columns:repeat(3,1fr)}
.symptom-list{grid-template-columns:1fr}
.symptom-row{
  display:grid;
  grid-template-columns:44px 1fr auto;
  align-items:center;
  gap:16px;
  padding:18px 24px;
  background:var(--white);
  transition:background var(--dur-quick) var(--ease-glide);
}
.symptom-row:hover{background:var(--paper)}
.symptom-icon{
  display:grid;
  place-items:center;
  width:36px;
  height:36px;
  border:1px solid var(--rule);
  border-radius:var(--radius-sm);
  color:var(--blue);
  background:var(--fog);
  font-family:var(--mono);
  font-size:11px;
  font-weight:650;
}
.symptom-row h3{font-size:14px;font-weight:560;line-height:1.3}
.symptom-row p{color:var(--ink-4);font-size:12px;line-height:1.5;margin-top:2px}

/* ─── Tag ────────────────────────────────────────────────────── */
.tag{
  display:inline-flex;
  width:max-content;
  align-items:center;
  border:0;
  border-radius:0;
  padding:0;
  color:var(--accent-deep);
  background:transparent;
  font-family:var(--mono);
  font-size:10px;
  font-weight:650;
  letter-spacing:.16em;
  text-transform:uppercase;
}

/* ─── Mini Card ─────────────────────────────────────────────── */
.mini-card{
  padding:32px;
  background:var(--white);
  transition:background var(--dur-quick) var(--ease-glide);
}
.mini-card:hover{background:var(--paper)}
.mini-card h3{
  margin-top:14px;
  font-family:var(--serif);
  font-size:24px;
  font-weight:300;
  line-height:1.18;
}
.mini-card p{
  margin-top:12px;
  color:var(--ink-3);
  font-size:14px;
  font-weight:300;
  line-height:1.78;
}

/* ═══════════════════════════════════════════════════════════════
   OFFER CARDS
══════════════════════════════════════════════════════════════ */
.offers{grid-template-columns:repeat(4,1fr)}
.offer{
  display:flex;
  min-height:300px;
  flex-direction:column;
  padding:34px 28px;
  background:var(--white);
  transition:background var(--dur-quick) var(--ease-glide),transform var(--dur-micro) var(--ease-glide);
  cursor:default;
}
.offer:hover{background:var(--paper);transform:translateY(-2px)}
.offer h3{
  font-family:var(--sans);
  font-size:21px;
  font-weight:560;
  letter-spacing:-.012em;
  line-height:1.2;
  color:var(--text);
}
.offer-meta{
  margin-top:9px;
  font-family:var(--mono);
  font-size:12px;
  font-weight:500;
  letter-spacing:.04em;
  color:var(--text-4);
}
/* "Free" reads as the enticing entry point: a small gradient pill. */
.offer-meta.is-free{
  display:inline-flex;
  align-self:flex-start;
  align-items:center;
  gap:6px;
  padding:4px 11px 4px 10px;
  border-radius:999px;
  color:var(--surface);
  background:var(--grad);
  font-weight:650;
  letter-spacing:.1em;
  text-transform:uppercase;
}
.offer-meta.is-free::before{
  content:"";
  width:5px;
  height:5px;
  border-radius:50%;
  background:var(--surface);
}
.offer p{
  margin-top:18px;
  color:var(--text-3);
  font-size:14px;
  font-weight:300;
  line-height:1.65;
  flex:1;
}
.offer a{
  margin-top:26px;
  color:var(--text-2);
  font-size:13px;
  font-weight:600;
  display:inline-flex;
  align-items:center;
  gap:5px;
  transition:gap var(--dur-quick) var(--ease-glide),color var(--dur-quick) var(--ease-glide);
}
.offer a:hover{gap:9px;color:var(--accent-deep)}
/* Featured: the recommended engagement, gently emphasized by a single
   amber accent bar while staying consistent with the other boxes. */
.offer.featured{position:relative}
.offer.featured::before{
  content:"";
  position:absolute;
  top:0;left:0;right:0;
  height:3px;
  background:var(--grad);
}

/* ═══════════════════════════════════════════════════════════════
   TIMELINE
══════════════════════════════════════════════════════════════ */
.timeline{
  grid-template-columns:repeat(5,1fr);
  position:relative;
}
.timeline::before{
  content:"";
  position:absolute;
  top:38px;
  left:10%;
  right:10%;
  height:1px;
  background:var(--grad);
  opacity:.25;
  pointer-events:none;
  z-index:0;
}
.day{
  padding:32px 22px;
  background:var(--white);
  transition:background var(--dur-quick) var(--ease-glide);
  position:relative;
  z-index:1;
}
.day:hover{background:var(--paper)}
.day i{
  width:16px;
  height:16px;
  border-radius:50%;
  background:var(--grad);
  display:block;
  margin:0 auto 18px;
  box-shadow:0 0 0 4px rgba(246,162,29,.12);
}
.day span{
  display:block;
  color:var(--ink-4);
  font-family:var(--mono);
  font-size:10px;
  font-weight:650;
  letter-spacing:.14em;
  text-transform:uppercase;
  text-align:center;
}
.day h3{
  margin-top:10px;
  font-family:var(--serif);
  font-size:19px;
  font-weight:300;
  text-align:center;
}
.day p{
  margin-top:10px;
  color:var(--ink-4);
  font-size:12px;
  font-weight:300;
  line-height:1.65;
  text-align:center;
}

/* ═══════════════════════════════════════════════════════════════
   HOW IT WORKS — Quote + Number List
══════════════════════════════════════════════════════════════ */
.quote{
  position:sticky;
  top:120px;
  font-family:var(--serif);
  font-size:clamp(22px,2.6vw,34px);
  font-style:italic;
  font-weight:300;
  line-height:1.46;
  color:var(--ink-2);
  padding:48px 0 48px;
}
.quote::before{
  content:"\201C";
  display:block;
  font-family:var(--serif);
  font-size:72px;
  font-style:normal;
  line-height:1;
  margin-bottom:4px;
  background:var(--grad);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  letter-spacing:-.02em;
}
.number-list{
  list-style:none;
  margin:0;
  padding:0;
  border-top:1px solid var(--rule);
}
.number-list li{
  display:grid;
  grid-template-columns:42px 1fr;
  gap:16px;
  padding:26px 0;
  border-bottom:1px solid var(--rule);
  transition:background var(--dur-quick) var(--ease-glide);
}
.number-list li:hover{background:rgba(18,18,26,.02)}
.number-list span{
  color:var(--ink-4);
  font-family:var(--mono);
  font-size:10px;
  font-weight:650;
  letter-spacing:.1em;
  padding-top:4px;
}
.number-list p{
  color:var(--ink-2);
  font-size:15px;
  font-weight:300;
  line-height:1.78;
}

/* ═══════════════════════════════════════════════════════════════
   TESTIMONIALS
══════════════════════════════════════════════════════════════ */
.testimonial-strip{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:24px;
}
.testimonial{
  padding:36px 36px 36px 44px;
  border:1px solid rgba(18,18,26,.08);
  border-radius:var(--radius);
  background:var(--white);
  position:relative;
  transition:transform var(--dur-micro) var(--ease-glide),box-shadow var(--dur-quick) var(--ease-glide);
  overflow:hidden;
}
/* Gradient left accent bar */
.testimonial::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  width:3px;
  bottom:0;
  background:var(--grad);
  border-radius:var(--radius) 0 0 var(--radius);
}
.testimonial:hover{
  transform:translateY(-4px);
  box-shadow:0 24px 64px rgba(18,18,26,.1);
}
.testimonial blockquote{
  margin:0;
  font-family:var(--serif);
  font-size:18px;
  font-style:italic;
  font-weight:300;
  line-height:1.62;
  color:var(--ink-2);
}
.testimonial blockquote::before{
  content:"";
  display:block;
  width:28px;
  height:3px;
  background:var(--grad);
  border-radius:2px;
  margin-bottom:16px;
}
.testimonial p{
  margin-top:20px;
  color:var(--ink-4);
  font-family:var(--mono);
  font-size:10px;
  font-weight:650;
  letter-spacing:.1em;
  text-transform:uppercase;
}

/* ═══════════════════════════════════════════════════════════════
   FINAL CTA
══════════════════════════════════════════════════════════════ */
.final-cta{
  padding:96px 0;
  text-align:center;
  background:var(--fog);
  border-bottom:0;
  position:relative;
  overflow:hidden;
}
.final-cta::after{
  content:"";
  position:absolute;
  width:600px;
  height:300px;
  top:-60px;
  left:50%;
  transform:translateX(-50%);
  background:radial-gradient(ellipse,rgba(246,162,29,.1) 0%,transparent 70%);
  pointer-events:none;
}
.final-cta .wrap{
  max-width:620px;
  position:relative;
  z-index:1;
}
.final-cta .section-title{color:var(--ink)}
.final-cta .lead{color:var(--ink-2);font-size:17px}
.cta-actions{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:14px;
  margin-top:40px;
}
.cta-note{
  margin-top:14px;
  font-size:12px;
  font-weight:300;
  color:var(--ink-4);
}

/* ─── Section Rhythm ───────────────────────────────────────── */
#problem{background:var(--fog)}

/* Problem section — symptom list on a slightly warmer bg.
   Title and framing sit side by side above a full-width 2x2 grid, so
   neither column is left holding empty space. */
#problem .symptom-list{
  border-color:rgba(18,18,26,.08);
  grid-template-columns:1fr 1fr;
}
#problem .symptom-row{
  background:var(--paper);
  align-items:start;
  padding:26px 28px;
}
#problem .symptom-row:hover{
  background:var(--white);
}
#problem .symptom-icon{
  color:var(--ink-3);
  background:var(--white);
  border-color:rgba(18,18,26,.08);
}

/* Split header: section title left, framing paragraph right. Shared by
   any section that needs a full-width header over a full-width grid. */
.split-head{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:24px 72px;
  align-items:end;
  margin-bottom:52px;
}
.split-head .section-title{font-size:clamp(30px,3.8vw,50px)}
.split-lead{max-width:480px;padding-bottom:4px}

#system{background:var(--fog-2)}

/* Why Now — full dark inversion */
#why-now{
  background:var(--ink);
  color:var(--white);
}
#why-now .section-title{color:var(--white)}
#why-now .section-copy,
#why-now .intro-grid .section-copy{color:rgba(255,255,255,.6)}
#why-now .mini-card{
  background:rgba(255,255,255,.05);
  color:var(--white);
}
#why-now .mini-card:hover{background:rgba(255,255,255,.09)}
#why-now .mini-card p{color:rgba(255,255,255,.5)}
#why-now .mini-card h3{color:var(--white)}
#why-now .tag{
  background:transparent;
  color:var(--accent);
}
#why-now .card-grid{
  border-color:rgba(255,255,255,.08);
  background:rgba(255,255,255,.06);
}

/* ═══════════════════════════════════════════════════════════════
   ARC DELIVERABLES SECTION
══════════════════════════════════════════════════════════════ */
.arc-section{background:var(--white)}
.arc-header{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:32px 72px;
  align-items:start;
  margin-bottom:56px;
}
.arc-title{grid-column:1;font-size:clamp(30px,3.8vw,50px)}
.arc-lead{
  grid-column:2;
  align-self:end;
  max-width:460px;
  color:var(--ink-2);
  font-size:15px;
  line-height:1.85;
  font-weight:300;
  padding-top:8px;
}
.arc-grid{
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:1px;
  border:1px solid rgba(18,18,26,.08);
  border-radius:var(--radius);
  background:rgba(18,18,26,.06);
  overflow:hidden;
}
.arc-tile{
  display:flex;
  flex-direction:column;
  gap:8px;
  padding:32px 28px;
  background:var(--white);
  transition:background var(--dur-quick) var(--ease-glide);
  cursor:default;
  grid-column:span 2;
}
.arc-tile:hover{background:var(--paper)}
.arc-tile strong{
  display:block;
  font-size:14px;
  font-weight:600;
  color:var(--ink);
  font-family:var(--sans);
  letter-spacing:.01em;
}
.arc-tile span{
  display:block;
  font-size:12px;
  color:var(--ink-4);
  font-weight:300;
  line-height:1.5;
}
/* Five tiles on a six-column grid: three span two columns each in
   the first row, and the last two span three each to balance the
   second row without a stranded empty cell. */
.arc-grid .arc-tile:nth-last-child(-n+2){grid-column:span 3}

#process{background:var(--fog-2)}

#trust{background:var(--paper)}
#how{background:var(--fog)}
/* ─── Arc Chat — elevated interactive panel ───────────────── */
#arc-chat{background:var(--paper)}
#arc-chat .mini-card{
  border:1px solid rgba(18,18,26,.1)!important;
  border-radius:18px!important;
  background:var(--white)!important;
  box-shadow:0 20px 60px rgba(18,18,26,.1)!important;
  padding:40px!important;
  transition:transform var(--dur-micro) var(--ease-glide),box-shadow var(--dur-micro) var(--ease-glide)!important;
}
#arc-chat .mini-card:hover{
  transform:translateY(-3px)!important;
  box-shadow:0 32px 80px rgba(18,18,26,.13)!important;
}
#arc-chat .mini-card h3{
  font-size:26px;
  margin-top:18px;
}
#arc-chat .mini-card .btn{
  margin-top:28px;
}

/* ═══════════════════════════════════════════════════════════════
   FOOTER
══════════════════════════════════════════════════════════════ */
.site-footer{
  background:var(--bg-deep);
  color:rgba(255,255,255,.68);
}
.footer-grid{
  display:grid;
  grid-template-columns:2fr 1fr 1fr 1fr 1fr;
  gap:48px;
  padding:72px 52px 56px;
  max-width:1120px;
  margin:0 auto;
}
.footer-brand img{
  width:auto;
  height:22px;
  filter:brightness(0) invert(1);
  opacity:.88;
}
/* brand-logo class in footer also gets inversion */
.site-footer .brand-logo{
  filter:brightness(0) invert(1);
  opacity:.88;
}
.footer-brand p{
  max-width:260px;
  margin-top:20px;
  color:rgba(255,255,255,.35);
  font-size:13px;
  line-height:1.75;
}
.footer-col h3{
  font-size:10px;
  font-weight:650;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:rgba(255,255,255,.3);
  margin:0 0 18px;
  font-family:var(--mono);
}
.footer-col a{
  display:block;
  color:rgba(255,255,255,.55);
  font-size:14px;
  margin-bottom:11px;
  transition:color var(--dur-quick) var(--ease-glide),transform var(--dur-quick) var(--ease-glide);
}
.footer-col a:hover{color:var(--white);transform:translateX(2px)}
.footer-bottom{
  border-top:1px solid rgba(255,255,255,.08);
  padding:24px 52px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  color:rgba(255,255,255,.22);
  font-size:12px;
  gap:20px;
  max-width:100%;
}
.footer-bottom a{color:rgba(255,255,255,.4);transition:color var(--dur-quick) var(--ease-glide)}
.footer-bottom a:hover{color:rgba(255,255,255,.7)}

/* ═══════════════════════════════════════════════════════════════
   CASE CARDS / BLOG / RESOURCES / ABOUT
══════════════════════════════════════════════════════════════ */
.case-grid{grid-template-columns:repeat(2,1fr)}
.case-card{
  padding:32px;
  background:var(--white);
  transition:background var(--dur-quick) var(--ease-glide);
}
.case-card:hover{background:var(--paper)}
.case-card h2{
  margin-top:14px;
  font-family:var(--serif);
  font-size:28px;
  font-weight:300;
  line-height:1.15;
}
.case-card p{
  margin-top:14px;
  color:var(--ink-3);
  font-size:14px;
  font-weight:300;
  line-height:1.78;
}
.case-card.reveal:nth-child(2){--reveal-delay:.13s}
.case-card.reveal:nth-child(3){--reveal-delay:.26s}
.case-card.reveal:nth-child(4){--reveal-delay:.39s}
.case-result{
  display:flex;
  align-items:baseline;
  gap:8px;
  margin-top:16px;
  padding-top:14px;
  border-top:1px solid var(--rule);
  font-family:var(--mono);
  font-size:12px;
  font-weight:650;
  letter-spacing:.02em;
  color:var(--ink-2);
}
.case-result .gt{font-family:var(--serif);font-size:19px;font-weight:400;letter-spacing:0}
.case-toggle{
  margin-top:22px;
  border:1px solid var(--rule);
  border-radius:10px;
  overflow:hidden;
  background:var(--fog);
}
.toggle-buttons{
  display:grid;
  grid-template-columns:1fr 1fr;
  border-bottom:1px solid var(--rule);
}
.toggle-buttons button{
  border:0;
  padding:11px;
  background:transparent;
  color:var(--ink-4);
  font-family:var(--mono);
  font-size:10px;
  font-weight:650;
  letter-spacing:.12em;
  text-transform:uppercase;
  transition:background var(--dur-quick) var(--ease-glide),color var(--dur-quick) var(--ease-glide);
}
.toggle-buttons button.active{background:var(--ink);color:var(--white)}
.toggle-body{
  min-height:118px;
  padding:18px;
  color:var(--ink-2);
  font-family:var(--serif);
  font-size:21px;
  font-weight:300;
  line-height:1.35;
}
.about-grid{
  display:grid;
  grid-template-columns:.8fr 1.2fr;
  gap:72px;
  align-items:stretch;
}
.portrait{
  min-height:560px;
  height:100%;
  border:1px solid var(--rule);
  border-radius:16px;
  background:var(--fog-2);
  overflow:hidden;
}
.portrait img{
  width:100%;
  height:100%;
  object-fit:cover;
  /* Anchored left so the lit color arc (top-left of the source image)
     stays fully in frame; the crop eats into the unlit grey arc
     on the right instead. */
  object-position:0% 50%;
}
.stat-row{grid-template-columns:repeat(3,1fr)}
.stat-card{padding:28px;background:var(--white)}
.stat-card strong{
  display:block;
  font-family:var(--serif);
  font-size:42px;
  font-weight:300;
}
.stat-card span{color:var(--ink-4);font-size:13px}

/* ═══════════════════════════════════════════════════════════════
   CONTACT WIZARD
══════════════════════════════════════════════════════════════ */
.contact-shell{
  max-width:820px;
  margin:0 auto;
  border:1px solid var(--rule);
  border-radius:20px;
  background:var(--white);
  box-shadow:var(--shadow);
  overflow:hidden;
}
.progress{height:4px;background:var(--fog-2)}
.progress span{
  display:block;
  width:20%;
  height:100%;
  background:var(--grad);
  transition:width var(--dur-quick) var(--ease-glide);
}
.wizard{padding:52px;min-height:520px}
.wizard-step{
  display:none;
  border-bottom:0;
  scroll-margin-top:0;
  animation:stepIn var(--dur-quick) var(--ease-glide) both;
}
.wizard-step.active{display:block}
@keyframes stepIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.wizard h1,.wizard h2{
  font-family:var(--serif);
  font-size:clamp(30px,4vw,48px);
  font-weight:300;
  line-height:1.12;
}
.wizard h1:focus,.wizard h2:focus{outline:none}
.wizard label{display:block;margin-top:30px;color:var(--ink-3);font-size:13px}
.wizard textarea,.wizard input[type="email"]{
  width:100%;
  margin-top:10px;
  border:1px solid var(--rule);
  border-radius:10px;
  background:var(--fog);
  padding:16px;
  color:var(--ink);
  transition:border-color var(--dur-quick) var(--ease-glide),background var(--dur-quick) var(--ease-glide);
}
.wizard textarea:focus,.wizard input[type="email"]:focus{
  border-color:rgba(18,18,26,.3);
  background:var(--white);
}
.wizard textarea{min-height:150px;resize:vertical}
.pill-group{display:flex;flex-wrap:wrap;gap:10px;margin-top:30px}
.pill,.choice-card{
  border:1px solid rgba(18,18,26,.16);
  border-radius:999px;
  background:transparent;
  padding:11px 16px;
  color:var(--ink-3);
  transition:background var(--dur-quick) var(--ease-glide),color var(--dur-quick) var(--ease-glide),border-color var(--dur-quick) var(--ease-glide),transform var(--dur-micro) var(--ease-glide);
}
.pill:hover,.choice-card:hover{transform:scale(1.02)}
.pill.selected{
  border-color:transparent;
  background:var(--grad);
  color:var(--white);
}
.choice-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:30px}
.choice-card{
  border-radius:12px;
  padding:24px;
  text-align:left;
}
.choice-card strong{display:block;font-family:var(--serif);font-size:22px;font-weight:300}
.choice-card span{display:block;margin-top:8px;color:var(--ink-4);font-size:13px;line-height:1.55}
.choice-card.selected{border-color:var(--ink);background:var(--ink);color:var(--white)}
.choice-card.selected span{color:rgba(255,255,255,.55)}
.wizard-actions{display:flex;justify-content:space-between;gap:14px;margin-top:36px}
.success-state{display:none;padding:52px;min-height:420px}
.success-state.active{display:grid;place-items:center;text-align:center}

/* ═══════════════════════════════════════════════════════════════
   RESOURCES / BLOG
══════════════════════════════════════════════════════════════ */
/* Two-up gives each serif title room to sit on one or two lines; the
   4-up grid capped them to ~250px, forcing three-line wraps. */
.resource-grid{grid-template-columns:repeat(2,1fr)}
.resource-card{
  display:flex;
  min-height:186px;
  flex-direction:column;
  padding:32px 34px 28px;
  background:var(--white);
  transition:background var(--dur-quick) var(--ease-glide);
}
.resource-card:hover{background:var(--paper)}
/* File-type label, anchored with the brand gradient dot. */
.resource-card .tag{gap:7px}
.resource-card .tag::before{
  content:"";
  width:5px;
  height:5px;
  border-radius:50%;
  background:var(--grad);
}
.resource-card h2{
  margin-top:16px;
  font-family:var(--serif);
  font-size:25px;
  font-weight:300;
  line-height:1.16;
  letter-spacing:-.014em;
}
.resource-card p{margin-top:12px;max-width:44ch;color:var(--ink-3);font-size:14.5px;line-height:1.7}
.resource-card button{margin-top:auto;align-self:flex-start}

/* ─── Modal ─────────────────────────────────────────────────── */
.modal{
  position:fixed;
  inset:0;
  z-index:300;
  display:none;
  place-items:center;
  padding:24px;
  background:rgba(18,18,26,.5);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}
.modal.active{display:grid}
.modal-card{
  width:min(520px,100%);
  border:1px solid rgba(18,18,26,.14);
  border-radius:20px;
  background:var(--paper);
  box-shadow:0 32px 100px rgba(0,0,0,.28);
  padding:36px;
  animation:stepIn var(--dur-micro) var(--ease-glide) both;
}
.modal-top{display:flex;justify-content:space-between;gap:20px;align-items:flex-start}
.modal h2{font-family:var(--serif);font-size:34px;font-weight:300}
.modal p{margin-top:10px;color:var(--ink-3);font-size:14px}
.modal input{
  width:100%;
  margin-top:24px;
  border:1px solid var(--rule);
  border-radius:10px;
  background:var(--fog);
  padding:14px 15px;
  transition:border-color var(--dur-quick) var(--ease-glide);
}
.modal input:focus{border-color:rgba(18,18,26,.3)}
.modal .btn{margin-top:16px;width:100%}
.close-btn{
  width:34px;height:34px;
  display:grid;place-items:center;
  border:1px solid rgba(18,18,26,.12);
  border-radius:50%;
  background:var(--white);
  color:var(--ink-3);
  line-height:1;
  flex-shrink:0;
  transition:background var(--dur-quick) var(--ease-glide),color var(--dur-quick) var(--ease-glide),border-color var(--dur-quick) var(--ease-glide);
}
.close-btn:hover{background:var(--fog);color:var(--ink);border-color:rgba(18,18,26,.24)}
.close-btn svg{display:block}

/* ─── Blog Intro ────────────────────────────────────────────── */
.blog-intro{max-width:720px;margin:0 auto 48px;text-align:center}
.blog-intro .eyebrow{justify-content:center;width:100%}

/* ─── Blog Layout ───────────────────────────────────────────── */
.blog-layout{display:grid;grid-template-columns:.82fr 1.4fr;gap:40px;align-items:start}
.featured-post{
  position:sticky;
  top:96px;
  padding:28px 28px 32px;
  border:1px solid var(--rule);
  border-radius:var(--radius);
  background:var(--ink);
  color:var(--white);
  overflow:hidden;
  transition:transform var(--dur-quick) var(--ease-glide),box-shadow var(--dur-quick) var(--ease-glide);
}
.featured-post:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg)}
.featured-post h1,.featured-post h2{margin-top:20px;font-family:var(--serif);font-size:32px;font-weight:300;line-height:1.14}
.featured-post p{margin-top:14px;color:rgba(255,255,255,.55);font-weight:300}
.featured-post .post-meta{color:rgba(255,255,255,.4)}
.featured-post .tag{background:transparent;color:var(--accent)}

/* ─── Blog Toolbar (filter + sort) ───────────────────────────── */
.blog-toolbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:14px;
  margin-bottom:26px;
}
.blog-filters{display:flex;flex-wrap:wrap;gap:8px}
.chip{
  border:1px solid rgba(18,18,26,.14);
  background:transparent;
  color:var(--ink-3);
  border-radius:999px;
  padding:8px 16px;
  font-size:12px;
  font-weight:500;
  letter-spacing:.01em;
  transition:background var(--dur-quick) var(--ease-glide),color var(--dur-quick) var(--ease-glide),border-color var(--dur-quick) var(--ease-glide);
}
.chip:hover{border-color:var(--ink-3);color:var(--ink)}
.chip.active{background:var(--ink);border-color:var(--ink);color:var(--white)}
.blog-sort{display:flex;align-items:center;gap:8px;color:var(--ink-4);font-size:12px}
.blog-sort select{
  border:1px solid rgba(18,18,26,.14);
  border-radius:8px;
  background:var(--white);
  color:var(--ink);
  padding:8px 12px;
  font-size:12px;
  font-family:inherit;
}
.blog-empty{
  padding:34px;
  border:1px dashed rgba(18,18,26,.24);
  border-radius:12px;
  background:rgba(18,18,26,.03);
  color:var(--ink-4);
  font-size:14px;
  text-align:center;
}

/* ─── Post Cover (image slot + arc watermark) ────────────────── */
.post-cover{
  position:relative;
  aspect-ratio:16/10;
  border-radius:12px;
  overflow:hidden;
  margin:-2px -2px 20px;
  background-size:cover;
  background-position:center;
}
.featured-post .post-cover{margin:-2px -2px 22px}
.post-cover img{width:100%;height:100%;object-fit:cover;display:block}
.post-cover .arc-mark{position:absolute;right:-10px;bottom:-10px;width:86px;height:86px;opacity:.9}
.cover-a{background:linear-gradient(135deg,rgba(246,162,29,.35),rgba(246,162,29,.25) 55%,rgba(232,100,31,.3)),var(--ink-2)}
.cover-b{background:linear-gradient(135deg,var(--fog-3),var(--fog-2));position:relative}
.cover-b::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 25% 30%,rgba(246,162,29,.28),transparent 55%)}
.cover-c{background:linear-gradient(135deg,var(--fog-3),var(--fog-2));position:relative}
.cover-c::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 75% 30%,rgba(232,100,31,.24),transparent 55%)}
.cover-d{background:linear-gradient(135deg,var(--fog-3),var(--fog-2));position:relative}
.cover-d::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 30% 75%,rgba(246,162,29,.26),transparent 55%)}
.cover-e{background:linear-gradient(135deg,var(--fog-3),var(--fog-2));position:relative}
.cover-e::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 70% 70%,rgba(246,162,29,.24),transparent 55%)}
.cover-f{background:linear-gradient(135deg,var(--fog-3),var(--fog-2));position:relative}
.cover-f::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 40%,rgba(232,100,31,.24),transparent 55%)}

.post-grid{grid-template-columns:repeat(2,1fr)}
.post-card{
  padding:22px 22px 26px;
  background:var(--white);
  transition:background var(--dur-quick) var(--ease-glide),transform var(--dur-micro) var(--ease-glide),box-shadow var(--dur-quick) var(--ease-glide);
}
.post-card:hover{background:var(--paper);transform:translateY(-3px);box-shadow:var(--shadow-sm)}
.post-card h2{margin-top:2px;font-family:var(--serif);font-size:23px;font-weight:300;line-height:1.18}
.post-card p{margin-top:10px;color:var(--ink-3);font-size:14px;line-height:1.6}
.post-meta{display:flex;gap:16px;margin-top:18px;color:var(--ink-4);font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase}

/* ─── Blog Post Detail ───────────────────────────────────────── */
.post-hero-cover{
  margin:32px 0 8px;
  border-radius:var(--radius);
  overflow:hidden;
  aspect-ratio:16/8;
}
.post-hero-cover img{width:100%;height:100%;object-fit:cover;display:block}
.post-hero-cover-fallback{
  display:grid;
  place-items:center;
  background:linear-gradient(135deg,rgba(246,162,29,.16),rgba(246,162,29,.12) 55%,rgba(232,100,31,.14)),var(--fog-2);
}
.post-hero-cover-fallback .arc-mark{width:120px;height:120px;opacity:.85}
.post-body{margin-top:32px}
.post-body p{color:var(--ink-2);font-size:16px;font-weight:300;line-height:1.85;margin-top:20px}
.post-body h2{margin-top:44px;font-family:var(--serif);font-size:28px;font-weight:300;line-height:1.2}
.post-body h3{margin-top:32px;font-family:var(--serif);font-size:22px;font-weight:300;line-height:1.25}
.post-body blockquote{margin:28px 0;padding-left:20px;border-left:2px solid var(--ink);font-family:var(--serif);font-style:italic;font-size:20px;color:var(--ink-2)}
.post-body ul,.post-body ol{margin-top:20px;padding-left:22px;color:var(--ink-2);font-size:16px;line-height:1.8}
.post-body li{margin-top:8px}
.post-body a{text-decoration:underline;text-underline-offset:3px}
.post-body-image{margin:32px 0}
.post-body-image img{width:100%;border-radius:12px;display:block}

/* Responsive 16:9 iframe wrapper, shared by inline body video
   embeds and the work detail page's external-video hero. */
.video-frame{position:relative;aspect-ratio:16/9;border-radius:12px;overflow:hidden;background:var(--bg-deep)}
.video-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
.post-body-video{margin:32px 0}
.post-body-video figcaption{margin-top:10px;color:var(--ink-4);font-size:13px}

/* ─── Work Detail: hero media, gallery ───────────────────────── */
.work-hero-media{
  margin:28px 0 8px;
  border-radius:var(--radius);
  overflow:hidden;
  aspect-ratio:16/9;
  background:var(--bg-deep);
}
.work-hero-media img,
.work-hero-media video{width:100%;height:100%;object-fit:cover;display:block}
.work-hero-media .video-frame{aspect-ratio:auto;height:100%;border-radius:0}
.work-hero-media-fallback{
  display:grid;
  place-items:center;
  background:linear-gradient(135deg,rgba(246,162,29,.16),rgba(246,162,29,.12) 55%,rgba(232,100,31,.14)),var(--fog-2);
}
.work-hero-media-fallback .arc-mark{width:120px;height:120px;opacity:.85}

.work-gallery{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:20px;
  margin-top:40px;
}
.work-gallery-item{border-radius:12px;overflow:hidden;background:var(--surface-3)}
.work-gallery-item img{width:100%;display:block}

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

/* ─── Job Cards (Careers) ────────────────────────────────────── */
.job-grid{display:flex;flex-direction:column;gap:1px;background:var(--rule);border:1px solid var(--rule);border-radius:var(--radius);overflow:hidden}
.job-card{padding:26px 28px;background:var(--white);transition:background var(--dur-quick) var(--ease-glide)}
.job-card:hover{background:var(--paper)}
.job-card-top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.job-type{color:var(--ink-4);font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase}
.job-card h2{margin-top:14px;font-family:var(--serif);font-size:22px;font-weight:300;line-height:1.2}
.job-card p{margin-top:8px;color:var(--ink-3);font-size:14px;line-height:1.6}

/* ─── FAQ ───────────────────────────────────────────────────── */
.faq-list{display:grid;gap:0;border-top:1px solid var(--rule)}
.faq-row{display:grid;grid-template-columns:.92fr 1.08fr;gap:64px;padding:42px 0;border-bottom:1px solid var(--rule)}
.faq-row h2{font-family:var(--serif);font-size:31px;font-weight:300;line-height:1.16}
.faq-row p{color:var(--ink-3);font-size:15px;font-weight:300;line-height:1.82}
.empty-role{padding:34px;border:1px dashed rgba(18,18,26,.24);border-radius:12px;background:rgba(18,18,26,.03)}

/* ─── Legal ─────────────────────────────────────────────────── */
.legal-page{max-width:820px;margin:0 auto}
.legal-page h1{font-family:var(--serif);font-size:clamp(40px,6vw,66px);font-weight:300;line-height:1.05}
.legal-page h2{margin-top:42px;font-family:var(--serif);font-size:28px;font-weight:300}
.legal-page p,.legal-page li{color:var(--ink-3);font-size:15px;font-weight:300;line-height:1.84}
.legal-page p{margin-top:16px}
.legal-page ul{padding-left:20px}

/* ═══════════════════════════════════════════════════════════════
   SCROLL REVEAL
══════════════════════════════════════════════════════════════ */
.reveal{
  opacity:0;
  transform:translateY(22px);
  transition:opacity var(--dur-base) var(--ease-arc),transform var(--dur-base) var(--ease-arc);
}
.reveal.in{opacity:1;transform:none}

/* ═══════════════════════════════════════════════════════════════
   REDUCED MOTION
══════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation:none!important;transition:none!important}
}

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE — 768px MOBILE
══════════════════════════════════════════════════════════════ */
@media (max-width:768px){
  .site-nav{padding:0 20px}
  .nav-toggle{display:flex}
  .nav-links{
    position:absolute;
    left:0;
    right:0;
    top:66px;
    display:none;
    flex-direction:column;
    align-items:stretch;
    gap:0;
    padding:16px 20px 24px;
    border-bottom:1px solid var(--rule);
    background:var(--paper);
    box-shadow:0 12px 32px rgba(18,18,26,.12);
    z-index:99;
  }
  .site-nav.scrolled .nav-links{top:54px}
  .nav-links.open{display:flex}
  .nav-links a{
    padding:14px 8px;
    font-size:16px;
    border-radius:0;
    border-bottom:1px solid var(--rule);
  }
  .nav-links a:last-child{border-bottom:0}
  .nav-links a[aria-current="page"]::after{display:none}
  .nav-links .btn,
  .nav-links .btn-nav{
    margin-top:14px;
    width:100%;
    justify-content:center;
    border-radius:12px;
  }
  .hero{
    padding:90px 24px 56px;
    align-items:flex-start;
    min-height:auto;
  }
  .hero-inner{text-align:left}
  .hero .hero-tag{display:inline-flex}
  .hero-actions{justify-content:flex-start}
  .hero-actions .btn{flex:1;max-width:200px;justify-content:center}
  .two-col{grid-template-columns:1fr;gap:48px}
  .card-grid{grid-template-columns:1fr}
  .testimonial-strip{grid-template-columns:1fr}
  .footer-grid{
    grid-template-columns:1fr 1fr;
    gap:36px;
    padding:48px 24px 40px;
  }
  .footer-bottom{
    padding:20px 24px;
    flex-direction:column;
    gap:10px;
    text-align:center;
  }
  .final-cta{padding:80px 0}
  .section-pad{padding:80px 0}
}

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE — 600px
══════════════════════════════════════════════════════════════ */
@media (max-width:600px){
  .stats{grid-template-columns:repeat(2,1fr)}
  .stat:nth-child(2){border-right:0}
  .stat:nth-child(3){border-top:1px solid var(--rule)}
  .stat{text-align:center}
}

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE — 980px TABLET
══════════════════════════════════════════════════════════════ */
@media (max-width:980px){
  .hero{padding-left:32px;padding-right:32px;padding-top:120px}
  .offers,.resource-grid,.post-grid,.stat-row,.signal-grid{grid-template-columns:1fr 1fr}
  .timeline{grid-template-columns:1fr 1fr}
  .two-col,.about-grid,.blog-layout,.faq-row{grid-template-columns:1fr;gap:40px}
  .quote,.featured-post{position:static}
  .footer-grid{grid-template-columns:1fr 1fr}
  .about-grid{align-items:start}
  /* Partners responsive */
  .arc-header{grid-template-columns:1fr;gap:20px}
  .arc-title,.arc-lead{grid-column:1}
  .arc-grid{grid-template-columns:repeat(2,1fr)}
  .arc-tile{grid-column:auto}
  .arc-grid .arc-tile:nth-last-child(-n+2){grid-column:auto}
  .arc-grid .arc-tile:last-child:nth-child(odd){grid-column:1/-1}
  .split-head{grid-template-columns:1fr;gap:20px;align-items:start;margin-bottom:40px}
  .split-lead{max-width:none;padding-bottom:0}
}

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE — 680px
══════════════════════════════════════════════════════════════ */
@media (max-width:680px){
  body{font-size:15px}
  .site-nav{height:60px}
  .nav-links{top:60px}
  .brand-word{font-size:15px}
  .brand-logo{height:16px}
  .page-main{padding-top:0}
  .page-hero{padding:88px 0 56px}
  .section-pad{padding:64px 0}
  .display{font-size:clamp(38px,11vw,56px)}
  .lead{font-size:17px}
  .hero{padding-top:96px;padding-bottom:76px}
  .hero-actions{margin-bottom:0}
  .stats,.offers,.timeline,.resource-grid,.post-grid,.case-grid,.stat-row,.choice-grid,.signal-grid{grid-template-columns:1fr}
  .stat{border-right:0;border-bottom:1px solid var(--rule)}
  .stat:last-child{border-bottom:0}
  .symptom-row{grid-template-columns:38px 1fr;align-items:start}
  .symptom-row .tag{grid-column:2}
  .showreel-stage{min-height:220px}
  .showreel-caption{flex-direction:column;gap:6px}
  .reel-panel{width:220px;min-height:150px}
  .wizard{padding:28px 20px;min-height:calc(100vh - 170px)}
  .contact-shell{border-radius:0;border-left:0;border-right:0}
  .pill,.choice-card{width:100%;text-align:left}
  .wizard-actions{flex-direction:column-reverse}
  .wizard-actions .btn{width:100%}
  .resource-card button{align-self:stretch}
  .post-meta{flex-wrap:wrap}
  .faq-row h2{font-size:26px}
  .site-footer{padding:0}
  .footer-grid{grid-template-columns:1fr;padding:40px 24px 32px}
  .footer-bottom{flex-direction:column;padding:18px 24px}
  .modal-card{padding:28px 20px;border-radius:16px}
  .quote::before{font-size:54px}
  .testimonial{padding:24px}
  .testimonial blockquote{font-size:16px}
  .final-cta{padding:72px 0}
  /* Partners responsive */
  .arc-grid{grid-template-columns:1fr}
  .arc-tile,.arc-grid .arc-tile:nth-last-child(-n+2),.arc-grid .arc-tile:last-child:nth-child(odd){grid-column:auto}
  .arc-header{gap:16px}
  #problem .symptom-list{grid-template-columns:1fr}
  #problem .symptom-row{padding:20px 22px}
}

/* Chat widget "try it" highlight */
@keyframes arcFabRing{
  0%{box-shadow:0 0 0 0 rgba(246,162,29,.55)}
  70%{box-shadow:0 0 0 18px rgba(246,162,29,0)}
  100%{box-shadow:0 0 0 0 rgba(246,162,29,0)}
}
#ra-fab.ra-fab-highlight{
  animation:arcFabRing var(--dur-slow) var(--ease-arc) 0s 3;
  outline:2px solid var(--pink);
  outline-offset:4px;
}

/* ═══════════════════════════════════════════════════════════════
   SPLASH CURTAIN
   A curtain that lifts, not a loading gimmick. Shown once per
   browser session on the homepage. Skipped entirely for repeat
   views, reduced-motion users, and no-JS visitors.
══════════════════════════════════════════════════════════════ */
.splash{
  position:fixed;
  inset:0;
  z-index:1000;
  display:grid;
  place-items:center;
  background:var(--bg-deep);
  will-change:transform;
}
.splash.splash-skip{display:none}
/* The curtain uses --ease-settle: it hesitates before it moves, so
   the lift reads as weight rather than a slide. The mark inside
   settles first and holds a beat before the curtain goes. */
.splash.lift{
  transform:translateY(-101%);
  transition:transform var(--dur-curtain) var(--ease-settle);
}
.splash-mark{
  height:24px;
  width:auto;
  filter:brightness(0) invert(.92);
  opacity:0;
  animation:splashMark var(--dur-slow) var(--ease-arc) .15s both;
}
@keyframes splashMark{
  from{opacity:0;transform:translateY(18px) scale(.985)}
  to{opacity:1;transform:none}
}

/* ═══════════════════════════════════════════════════════════════
   MOTION LANGUAGE
   Curves: --ease-arc for travel, --ease-glide for response,
   --ease-settle for weight. Durations: --dur-micro for controls
   that must answer instantly, --dur-quick for hover and state,
   --dur-base for reveals, --dur-slow and --dur-epic for the
   curtain and hero. Movement is vertical and unhurried. Nothing
   bounces, nothing pulses for attention, nothing arrives fast.
══════════════════════════════════════════════════════════════ */

/* Reveal. Three things resolve at once and on the same curve:
   the element rises, fades up, and comes into focus from a slight
   blur. The blur is what separates this from a stock fade — it
   reads as an element settling into the page rather than being
   switched on. Kept to 7px and paired with a fractional scale so
   the whole thing resolves as one gesture.

   --reveal-delay is set per element by site.js so items in the
   same group cascade instead of firing as a block. */
.reveal{
  opacity:0;
  transform:translateY(30px) scale(.992);
  filter:blur(7px);
  transition:
    opacity var(--dur-base) var(--ease-arc) var(--reveal-delay,0s),
    transform var(--dur-base) var(--ease-arc) var(--reveal-delay,0s),
    filter var(--dur-base) var(--ease-arc) var(--reveal-delay,0s);
  will-change:opacity,transform,filter;
}
.reveal.in{opacity:1;transform:none;filter:blur(0)}
/* Once settled, drop the compositor hint so long pages don't hold
   a layer per revealed element. */
.reveal.settled{will-change:auto}
/* Feeds the same custom property rather than overriding
   transition-delay, so a late element can still take a stagger
   offset on top of its own head start. */
.reveal-late{--reveal-delay:.24s}

/* Grids and lists hand their reveal down to their children: the
   container stops moving entirely and each item arrives on its own
   beat. A five-day timeline that draws itself day by day reads as a
   sequence; the same five cards arriving as one slab reads as a page
   load. site.js tags these containers and sets each child's offset. */
.reveal-stagger{
  opacity:1!important;
  transform:none!important;
  filter:none!important;
  will-change:auto;
}
.reveal-stagger>*{
  opacity:0;
  transform:translateY(26px) scale(.994);
  filter:blur(6px);
  transition:
    opacity var(--dur-base) var(--ease-arc) var(--child-delay,0s),
    transform var(--dur-base) var(--ease-arc) var(--child-delay,0s),
    filter var(--dur-base) var(--ease-arc) var(--child-delay,0s);
}
.reveal-stagger.in>*{opacity:1;transform:none;filter:blur(0)}

/* Link micro-interaction: underline draws in from the left */
.footer-col a,.post-body a{
  background-image:linear-gradient(currentColor,currentColor);
  background-repeat:no-repeat;
  background-size:0% 1px;
  background-position:0 100%;
  transition:background-size var(--dur-quick) var(--ease-glide),color var(--dur-quick) var(--ease-glide);
}
.footer-col a:hover,.post-body a:hover{background-size:100% 1px}

/* Card lift: shared depth response for interactive surfaces */
.case-card,.mini-card,.offer,.arc-tile,.post-card,.resource-card{
  transition:background var(--dur-quick) var(--ease-glide),transform var(--dur-quick) var(--ease-glide),box-shadow var(--dur-quick) var(--ease-glide),border-color var(--dur-quick) var(--ease-glide);
}

/* Focus: same brass line everywhere, no glow */
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* Depth layer: hero content drifts slower than the scroll.
   Driven by site.js with transform only; disabled under
   reduced motion and on small screens. */
.parallax-drift{will-change:transform}

/* ═══════════════════════════════════════════════════════════════
   WORK PAGE
   Image-led project grid. Each card carries a swappable visual
   slot (.work-thumb): drop an <img> in to replace the branded
   placeholder. Filter chips reuse .chip; wiring lives in site.js.
══════════════════════════════════════════════════════════════ */
.work-toolbar{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:8px;
  margin-top:clamp(40px,6vw,64px);
  margin-bottom:clamp(32px,4vw,52px);
}
.work-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:clamp(24px,3vw,44px);
}
.work-card{
  position:relative;
  display:flex;
  flex-direction:column;
  transition:transform var(--dur-quick) var(--ease-glide);
}
.work-card:hover{transform:translateY(-6px)}
/* Full-card click target for projects with a detail page. Sits
   above the thumb but below nothing else, since cards have no
   other interactive children. */
.work-card-link{position:absolute;inset:0;z-index:1;border-radius:var(--radius)}
.work-card-link:focus-visible{outline-offset:6px}

/* Play badge for cards whose project has a cover video */
.work-video-badge{
  position:absolute;
  right:14px;
  bottom:14px;
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:rgba(16,16,24,.72);
  color:var(--bg);
  backdrop-filter:blur(4px);
}
.work-video-badge svg{margin-left:2px}

/* The image slot. Replace .work-ph with <img> for real visuals. */
.work-thumb{
  position:relative;
  aspect-ratio:4/3;
  border-radius:var(--radius);
  overflow:hidden;
  background:var(--surface-3);
  border:1px solid var(--rule);
}
.work-thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition:transform var(--dur-base) var(--ease-glide);
}
.work-card:hover .work-thumb img,
.work-card:hover .work-ph{transform:scale(1.055)}

/* Branded placeholder: warm gradient, faint grid, an arc mark,
   and a mono label so it reads as a slot, not a broken image. */
.work-ph{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  transition:transform var(--dur-base) var(--ease-glide);
}
.work-ph::before{
  content:"";
  position:absolute;
  inset:0;
  background-image:
    linear-gradient(rgba(18,18,26,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(18,18,26,.05) 1px,transparent 1px);
  background-size:38px 38px;
  opacity:.5;
}
.work-ph .arc-mark{
  position:relative;
  width:clamp(76px,10vw,112px);
  height:auto;
  opacity:.92;
}
.work-ph small{
  position:absolute;
  bottom:16px;
  left:18px;
  color:var(--ink-4);
  font-family:var(--mono);
  font-size:10px;
  font-weight:650;
  letter-spacing:.14em;
  text-transform:uppercase;
}
.work-ph-a{background:radial-gradient(circle at 32% 26%,rgba(246,162,29,.34),transparent 60%),radial-gradient(circle at 78% 74%,rgba(232,100,31,.24),transparent 58%),var(--surface-2)}
.work-ph-b{background:radial-gradient(circle at 72% 24%,rgba(232,100,31,.28),transparent 60%),radial-gradient(circle at 24% 78%,rgba(246,162,29,.26),transparent 58%),var(--surface-2)}
.work-ph-c{background:radial-gradient(circle at 26% 72%,rgba(246,162,29,.3),transparent 60%),radial-gradient(circle at 80% 30%,rgba(232,100,31,.2),transparent 56%),var(--surface-2)}
.work-ph-d{background:radial-gradient(circle at 50% 28%,rgba(246,162,29,.3),transparent 58%),radial-gradient(circle at 50% 88%,rgba(232,100,31,.2),transparent 60%),var(--surface-2)}
.work-ph-e{background:radial-gradient(circle at 22% 30%,rgba(232,100,31,.3),transparent 58%),radial-gradient(circle at 76% 66%,rgba(246,162,29,.3),transparent 60%),var(--surface-2)}

.work-body{padding:22px 4px 0}
.work-kicker{
  display:block;
  margin-bottom:12px;
  color:var(--accent-deep);
  font-family:var(--mono);
  font-size:10px;
  font-weight:650;
  letter-spacing:.16em;
  text-transform:uppercase;
}
.work-card h2{
  font-family:var(--serif);
  font-size:clamp(24px,2.6vw,32px);
  font-weight:300;
  line-height:1.14;
  letter-spacing:-.02em;
  color:var(--ink);
}
.work-metaline{
  margin-top:14px;
  color:var(--ink-4);
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.06em;
  text-transform:uppercase;
}
.work-result{
  display:flex;
  align-items:baseline;
  gap:10px;
  margin-top:18px;
  padding-top:16px;
  border-top:1px solid var(--rule);
  color:var(--ink-2);
  font-size:14px;
  font-weight:400;
  line-height:1.4;
}
.work-result .gt{
  font-family:var(--serif);
  font-size:26px;
  font-weight:400;
  letter-spacing:0;
  flex-shrink:0;
}

/* Featured project spans the grid, image beside content. */
.work-card.featured{
  grid-column:1/-1;
  display:grid;
  grid-template-columns:1.08fr .92fr;
  gap:clamp(28px,4vw,56px);
  align-items:center;
}
.work-card.featured .work-thumb{aspect-ratio:16/11}
.work-card.featured .work-body{padding-top:0}
.work-card.featured h2{font-size:clamp(30px,3.6vw,46px)}

/* Dark CTA band closes the grid regardless of card count: it always
   spans the full row, so the grid never leaves an orphan cell. */
.work-cta{
  grid-column:1/-1;
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:clamp(24px,4vw,64px);
  align-items:center;
  padding:clamp(36px,4vw,56px);
  border-radius:var(--radius);
  background:var(--bg-deep);
  color:var(--bg);
}
.work-cta .work-kicker{color:var(--accent)}
.work-cta h2{
  margin-top:12px;
  font-family:var(--serif);
  font-size:clamp(26px,3vw,38px);
  font-weight:300;
  line-height:1.1;
  letter-spacing:-.02em;
  color:var(--bg);
}
.work-cta-action p{color:rgba(255,255,255,.62);font-size:15px;font-weight:300;line-height:1.7}
.work-cta .btn{margin-top:20px;background:var(--accent);color:var(--bg-deep);border-color:transparent}
.work-cta .btn:hover{opacity:.82}

@media (max-width:900px){
  .work-grid{grid-template-columns:1fr;gap:36px}
  .work-card.featured{grid-template-columns:1fr;gap:22px}
  .work-card.featured .work-thumb{aspect-ratio:16/10}
  .work-cta{grid-template-columns:1fr;padding:34px;text-align:left}
  .work-cta .btn{align-self:flex-start}
}