/* ---------------- Hero: pinned for --hero-pin of scroll ---------------- */
.hero-pin { height: var(--hero-pin); position: relative; }
.hero { position: sticky; top: 0; height: 100vh; height: 100dvh; overflow: hidden; background: var(--hero-bg); }
.hero__ambient { position: absolute; z-index: 1; pointer-events: none; width: 44%; height: 56%; right: 7%; top: 16%;
  background: radial-gradient(closest-side, rgba(99,102,241,.20), rgba(168,85,247,.09) 55%, transparent 72%); filter: blur(46px); transform: translateZ(0);
  transition: opacity .3s linear; }
.particle-hero { position: absolute; inset: 0; z-index: 10; }
.particle-hero__canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero__veil { position: absolute; left: 0; bottom: 0; width: 60%; height: 60%; z-index: 11; pointer-events: none;
  background: radial-gradient(120% 120% at 0% 100%, rgba(8,7,17,.9) 0%, rgba(8,7,17,0) 60%); }
.hero__layer { position: absolute; inset: 0; z-index: 20; pointer-events: none; }
.hero__layer a, .hero__layer button { pointer-events: auto; }
.hero__copy { position: absolute; left: var(--side); bottom: 72px; max-width: 560px; will-change: transform, opacity; }
.hero__copy .eyebrow { margin-bottom: 20px; }
.hero__title { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-hero); letter-spacing: -.01em; line-height: 1.02; }
.hero__sub { margin-top: 18px; font-size: 20px; line-height: 1.5; color: var(--text-subhead); max-width: 30ch; }
.hero__cta { margin-top: 32px; }
.hero__meta { position: absolute; right: var(--side); bottom: 72px; font-family: var(--font-display); font-weight: 500; font-size: 12px; text-transform: uppercase; letter-spacing: .12em; color: var(--text-meta); }
.hero__scroll { position: absolute; left: 50%; bottom: 28px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 10px; font-family: var(--font-display); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--text-meta); }
.hero__scroll i { width: 1px; height: 36px; background: linear-gradient(180deg, var(--accent), transparent); animation: scrollhint 1.8s var(--ease-inout) infinite; transform-origin: top; }
@keyframes scrollhint { 0% { transform: scaleY(0); opacity: 0 } 30% { opacity: 1 } 100% { transform: scaleY(1); opacity: 0 } }

/* the line the particles become, handed to the next section as a real divider */
.hero__horizon-title { position: absolute; left: 0; right: 0; top: 56%; transform: translateY(-50%); z-index: 12; text-align: center; pointer-events: none; opacity: 0; }
.hero__horizon-title .h2 { font-size: clamp(38px, 6vw, 92px); letter-spacing: -.02em; }
.hero__horizon-title .eyebrow { margin-bottom: 18px; }

/* staged-entrance: elements slide up when the hero mounts */
.hero__copy > * { animation: heroIn 1.1s var(--ease-out) both; }
.hero__copy > :nth-child(1) { animation-delay: .25s } .hero__copy > :nth-child(2) { animation-delay: .35s } .hero__copy > :nth-child(3) { animation-delay: .45s } .hero__copy > :nth-child(4) { animation-delay: .55s }
@keyframes heroIn { from { opacity: 0; transform: translateY(22px) } to { opacity: 1; transform: none } }
@media (prefers-reduced-motion: reduce) { .hero__copy > * { animation: none } .hero__scroll i { animation: none } }

@media (max-width: 760px) {
  .hero__copy { bottom: 88px; }
  .hero__sub { font-size: 17px; }
  .hero__meta, .hero__scroll { display: none; }
}

/* ---------------- Snapshot ---------------- */
.snapshot { padding-top: calc(var(--section-y) * .55); }
.snapshot__grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(32px, 6vw, 96px); align-items: start; }
.snapshot__statement { font-family: var(--font-display); font-weight: 500; font-size: clamp(26px, 3.1vw, 44px); line-height: 1.2; letter-spacing: -.012em; }
.snapshot__statement em { font-style: normal; color: var(--text-meta); }
.snapshot .marquee { margin-top: clamp(48px, 7vw, 96px); }
@media (max-width: 900px) { .snapshot__grid { grid-template-columns: 1fr; } }

/* ---------------- About ---------------- */
.about__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 96px); align-items: start; }
.about__col p + p { margin-top: 16px; }
@media (max-width: 900px) { .about__grid { grid-template-columns: 1fr; } }

/* ---------------- Contact ---------------- */
.contact { text-align: left; overflow: hidden; }
.contact__glow { position: absolute; left: 50%; bottom: -30%; width: 70vw; height: 60vh; transform: translateX(-50%); pointer-events: none; background: radial-gradient(closest-side, rgba(84,112,255,.18), rgba(138,108,240,.08) 55%, transparent 75%); filter: blur(60px); }
.contact__title { font-size: clamp(44px, 7vw, 112px); line-height: .98; letter-spacing: -.025em; max-width: 12ch; }
.contact__row { margin-top: 40px; display: flex; flex-wrap: wrap; gap: 24px; align-items: center; }
.contact__email { font-family: var(--font-display); font-weight: 500; font-size: clamp(18px, 2vw, 24px); border-bottom: 1px solid var(--line-strong); padding-bottom: 4px; transition: border-color var(--dur-fast), color var(--dur-fast); }
.contact__email:hover { color: var(--accent); border-color: var(--accent); }
.contact__links { display: flex; gap: 20px; font-size: var(--fs-small); color: var(--text-body); }
.contact__links a:hover { color: var(--text-primary); }

/* Work follows the hero directly; the pinned title is its heading */
.work { padding-top: clamp(40px, 5vw, 64px); }
.work .sec-head { margin-bottom: clamp(28px, 4vw, 44px); }
.snapshot { padding-top: var(--section-y); }

/* ---------------- Spotlight: the section lights up (dark → cool white) as it scrolls in ----------------
   --lp is driven by scroll in home.js (0 = dark, 1 = fully lit). Tokens are remapped inside
   the section with color-mix so every child re-colours in sync. Deliberately monochrome:
   same ink/blue as the rest of the site, no warm tones, no blooms. */
.spotlight {
  --lp: 0;
  --text-primary: color-mix(in srgb, var(--ink) calc(var(--lp) * 100%), #FFFFFF);
  --text-subhead: color-mix(in srgb, var(--ink-2) calc(var(--lp) * 100%), #B7B7C2);
  --text-body: color-mix(in srgb, var(--ink-2) calc(var(--lp) * 100%), #9A9AA6);
  --text-meta: color-mix(in srgb, var(--ink-3) calc(var(--lp) * 100%), #6E6E78);
  --bg-elev: color-mix(in srgb, var(--paper-elev) calc(var(--lp) * 100%), #0E0D1A);
  --line: color-mix(in srgb, var(--ink-line) calc(var(--lp) * 100%), rgba(255,255,255,.08));
  --line-strong: color-mix(in srgb, rgba(11,10,20,.14) calc(var(--lp) * 100%), rgba(255,255,255,.14));
  --accent: color-mix(in srgb, var(--accent-lit) calc(var(--lp) * 100%), #7FB0FF);
  background: color-mix(in srgb, var(--paper) calc(var(--lp) * 100%), transparent);
  color: var(--text-primary);
  position: relative; isolation: isolate;
}
/* a single cool vignette at the top edge so the lit panel reads as a surface, not a flat fill */
.spotlight::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: var(--lp);
  background: linear-gradient(180deg, rgba(61,91,255,.05) 0%, transparent 28%, transparent 78%, rgba(11,10,20,.04) 100%);
}
.spotlight .svc { box-shadow: 0 1px 0 rgba(255,255,255, calc(var(--lp) * .8)) inset, 0 24px 60px -40px rgba(11,10,20, calc(var(--lp) * .35)); }
.spotlight .svc::before { background: var(--accent-lit); }         /* hover ring: solid blue, not the rainbow */
.spotlight .svc:hover::before { opacity: calc(.5 + var(--lp) * .5); }
.spotlight .tag { background: color-mix(in srgb, rgba(11,10,20,.035) calc(var(--lp) * 100%), rgba(255,255,255,.02)); }
.spotlight .process__step i { background: var(--accent); }        /* solid dot, not the gradient */
.spotlight .process { border-top-color: var(--line); }

/* nav follows: dark text over the lit section */
body.is-light .nav.is-solid { background: rgba(244,245,250,.74); border-color: var(--ink-line); }
body.is-light .nav { color: var(--ink); }
body.is-light .nav .wordmark span { color: var(--accent-lit); }
body.is-light .nav__links a { color: var(--ink-2); }
body.is-light .nav__links a:hover { color: var(--ink); }
body.is-light .nav__links a::after { background: var(--accent-lit); }
body.is-light .nav .btn { border-color: rgba(11,10,20,.16); color: var(--ink); }
body.is-light .nav .btn .arrow { color: var(--accent-lit); }
.nav, .nav__links a, .nav .btn, .nav .wordmark span { transition: color var(--dur) var(--ease-out), background var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out); }