/* index.css — page-specific styles (loaded after main.css) */
body{
  font-family:var(--ff-body);
  background:var(--ink);color:var(--chalk);
  overflow-x:hidden;cursor:none;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
h1,h2,h3,h4{font-family:var(--ff-display);font-weight:700;line-height:1;letter-spacing:-.04em;color:var(--chalk)}
@media(hover:none){body{cursor:auto}button,a{cursor:pointer}}
/* ── CURSOR — minimal, confident ──────────────────────────── */
#cur {
  position:fixed;width:6px;height:6px;
  background:var(--volt);border-radius:50%;
  pointer-events:none;z-index:9999;
  transform:translate(-50%,-50%);
  will-change:transform;
  transition:width .2s var(--ease-out),height .2s var(--ease-out),
             background .2s,border-radius .3s;
}
#cur-f {
  position:fixed;width:32px;height:32px;
  border:1px solid rgba(64,102,255,.38);
  border-radius:50%;
  pointer-events:none;z-index:9998;
  transform:translate(-50%,-50%);
  will-change:transform;
  transition:width .35s var(--ease-out),height .35s var(--ease-out),
             border-color .2s,opacity .2s,border-radius .3s;
}
body.s-btn  #cur-f{width:52px;height:52px;border-color:rgba(255,255,255,.25)}
/* Work hover — cursor becomes a label */
body.s-work #cur{
  width:80px;height:80px;
  background:var(--volt);border-radius:var(--r-lg);opacity:.9;
}
body.s-work #cur-f{opacity:0}
/* The big number counts up — creates drama */
.ldr-inner{text-align:center;position:relative}
.ldr-label{
  font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--chalk4);font-family:var(--ff-body);font-weight:500;
  margin-top:1rem;opacity:0;
}
.ldr-bar{
  position:absolute;bottom:0;left:0;right:0;height:1px;
  background:var(--line2);overflow:hidden;
}
.ldr-bar-fill{
  height:100%;background:var(--volt);width:0%;
  transition:width .08s linear;
}
.section{padding-block:clamp(6rem,12vw,11rem);position:relative}
.section--sm{padding-block:clamp(4rem,7vw,6rem)}
.nav__wordmark{
  font-family:var(--ff-body);font-size:10px;font-weight:600;
  letter-spacing:.22em;text-transform:uppercase;color:var(--chalk);
}
.nav__link{
  font-size:12.5px;font-weight:500;color:var(--chalk3);
  transition:color .18s;letter-spacing:.015em;
  position:relative;
}
.nav__link:hover{color:var(--chalk)}
.nav__avail{
  display:flex;align-items:center;gap:7px;
  font-size:11px;color:var(--chalk4);letter-spacing:.04em;
}
.nav__dot{
  width:6px;height:6px;border-radius:50%;background:#22c55e;
  box-shadow:0 0 0 0 rgba(34,197,94,.3);
  animation:ping 2.5s ease-in-out infinite;
}
.mnav__link:hover{color:var(--chalk)}
.btn:active{transform:scale(.96) !important}
.btn--primary{
  background:var(--volt);color:#fff;border:1px solid rgba(64,102,255,.5);
  padding:14px 26px;font-size:13.5px;
  box-shadow:0 0 0 0 rgba(64,102,255,0);
}
.btn--outline{
  background:transparent;color:var(--chalk);
  border:1px solid var(--line2);
  padding:14px 26px;font-size:13.5px;
}
.btn--ghost{
  background:transparent;color:var(--chalk3);
  border:none;padding:14px 0;font-size:13px;
  font-weight:500;
}
.btn--ghost:hover{color:var(--chalk)}
.btn--sm{padding:10px 18px;font-size:12.5px}
.btn--lg{padding:17px 34px;font-size:15px;border-radius:var(--r-md)}
.btn--full{width:100%;justify-content:center}
/* ══════════════════════════════════════════════════════════════
   HERO — The provocation
══════════════════════════════════════════════════════════════ */
.hero{
  min-height:100svh;
  display:grid;align-items:center;
  padding-top:var(--nav-h);
  position:relative;overflow:hidden;
  background:var(--ink);
}
/* Deep background — radial vignette + subtle texture */
.hero::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse 80% 65% at 68% 38%,rgba(64,102,255,.07) 0%,transparent 65%),
             radial-gradient(ellipse 60% 40% at 10% 80%,rgba(64,102,255,.04) 0%,transparent 60%);
  pointer-events:none;
}
.hero::after{
  content:'';position:absolute;inset:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.025'/%3E%3C/svg%3E");
  background-size:180px;pointer-events:none;opacity:.7;
}
/* Horizontal rule that spans full width — editorial device */
.hero__rule{
  position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent 0%,var(--volt) 40%,var(--volt2) 60%,transparent 100%);
  opacity:.4;
}
/* Grid — precise, architectural */
.hero__grid{
  position:absolute;inset:0;z-index:0;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),
                   linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:100px 100px;
  mask-image:radial-gradient(ellipse 75% 70% at 72% 35%,black 10%,transparent 72%);
  -webkit-mask-image:radial-gradient(ellipse 75% 70% at 72% 35%,black 10%,transparent 72%);
}
.hero__inner{
  position:relative;z-index:2;
  display:grid;grid-template-columns:1fr 1.1fr;
  gap:clamp(2rem,5vw,7rem);align-items:center;
  padding-block:clamp(5rem,9vw,9rem);
}
/* ── LEFT: The Statement ── */
.hero__l{}
/* Studio era badge — small, precise */
.hero__era{
  display:inline-flex;align-items:center;gap:10px;
  margin-bottom:clamp(1.5rem,3vw,2.5rem);opacity:0;
}
.era__line{width:28px;height:1px;background:var(--volt);opacity:.7}
.era__text{
  font-size:10px;font-weight:500;letter-spacing:.18em;
  text-transform:uppercase;color:var(--chalk4);font-family:var(--ff-body);
}
/* THE HEADLINE — this is everything */
.hero__h1{
  font-family:var(--ff-display);
  font-size:clamp(3.2rem,7vw,7.5rem);
  font-weight:700;letter-spacing:-.05em;
  line-height:.95;color:var(--chalk);
  margin-bottom:clamp(1.5rem,3vw,2.5rem);
}
.hero__h1 .reveal-line{display:block;overflow:hidden;padding-bottom:.05em}
.hero__h1 .rw{display:inline-block}
/* The twist — the italic counterpoint in the headline */
.hero__h1 em{
  font-style:italic;
  color:var(--chalk3);
  font-weight:400;
  /* Slightly different letter-spacing to breathe */
  letter-spacing:-.03em;
}
/* Bold accent — restrained, not shimmering */
.hero__h1 .hot{color:var(--volt)}
/* Sub — writes like a confident human, not an agency */
.hero__sub{
  font-size:clamp(1rem,1.3vw,1.15rem);
  color:var(--chalk3);line-height:1.75;
  max-width:44ch;margin-bottom:clamp(2rem,4vw,3rem);
  opacity:0;font-weight:400;
}
.hero__ctas{
  display:flex;align-items:center;gap:1.5rem;flex-wrap:wrap;
  margin-bottom:clamp(3rem,6vw,5rem);opacity:0;
}
/* The "or" between CTAs — adds humanity */
.hero__ctas .or{
  font-size:12px;color:var(--chalk4);font-style:italic;
}
/* Proof strip — horizontal, data only, no fluff */
.hero__proof{
  display:flex;align-items:stretch;gap:0;
  border-top:1px solid var(--line);
  padding-top:clamp(1.5rem,3vw,2.5rem);
  opacity:0;
}
.proof-item{
  display:flex;flex-direction:column;gap:4px;
  padding-right:clamp(1.5rem,3vw,2.5rem);
  margin-right:clamp(1.5rem,3vw,2.5rem);
  border-right:1px solid var(--line);
}
.proof-item:last-child{border-right:none;padding-right:0;margin-right:0}
.proof-item__n{
  font-family:var(--ff-display);
  font-size:clamp(1.2rem,2vw,1.75rem);
  font-weight:700;letter-spacing:-.035em;
  color:var(--chalk);line-height:1;
}
.proof-item__l{
  font-size:10.5px;color:var(--chalk4);
  letter-spacing:.04em;line-height:1.4;
  font-family:var(--ff-body);
}
/* ── RIGHT: The Work — actual screenshots, not decoration ── */
.hero__r{position:relative;opacity:0}
/* Primary window */
.hero__window{
  position:relative;
  transform:perspective(1400px) rotateY(-7deg) rotateX(2.5deg);
  transition:transform 1s var(--ease-out);
  will-change:transform;
}
.hero__window:hover{
  transform:perspective(1400px) rotateY(-2deg) rotateX(.5deg);
}
.hw-frame{
  background:var(--ink3);
  border:1px solid var(--line2);
  border-radius:var(--r-lg);overflow:hidden;
  box-shadow:
    0 60px 140px rgba(0,0,0,.7),
    0 0 0 1px rgba(255,255,255,.05),
    0 0 100px rgba(64,102,255,.08),
    inset 0 1px 0 rgba(255,255,255,.06);
  aspect-ratio:16/10;
}
/* Screen reflection */
.hw-frame::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(145deg,rgba(255,255,255,.032) 0%,transparent 40%);
  border-radius:inherit;pointer-events:none;z-index:2;
}
/* Chrome bar — realistic, precise */
.hw-bar{
  display:flex;align-items:center;gap:6px;
  padding:10px 14px;
  background:rgba(255,255,255,.022);
  border-bottom:1px solid rgba(255,255,255,.055);
  position:relative;z-index:3;flex-shrink:0;
}
.hw-dot{width:9px;height:9px;border-radius:50%}
.hw-dot:nth-child(1){background:#FF5F57}
.hw-dot:nth-child(2){background:#FFBD2E}
.hw-dot:nth-child(3){background:#28CA41}
.hw-url{
  margin-left:8px;flex:1;
  font-size:9px;font-family:var(--ff-mono);
  color:var(--chalk4);background:rgba(255,255,255,.04);
  padding:3px 12px;border-radius:3px;text-align:center;
  letter-spacing:.02em;
}
/* Screen — show ACTUAL design quality */
.hw-screen{
  display:flex;flex-direction:column;
  height:calc(100% - 34px);overflow:hidden;
  position:relative;z-index:1;
}
/* The website preview inside the frame — this IS the proof of craft */
.site-preview{
  flex:1;position:relative;overflow:hidden;
  background:var(--ink2);
}
/* Hero image fill */
.sp-img{
  position:absolute;top:0;left:0;right:0;height:55%;
  overflow:hidden;
}
.sp-img img{
  width:100%;height:100%;
  filter:brightness(.55) saturate(.7);
}
/* Gradient mask over photo */
.sp-img::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(11,12,15,.3) 0%,rgba(11,12,15,.97) 85%);
}
/* Overlay content on image */
.sp-hero-text{
  position:absolute;top:18%;left:14px;right:14px;z-index:1;
}
.sp-ht-eyebrow{
  display:flex;align-items:center;gap:5px;margin-bottom:6px;
}
.sp-ht-dot{width:5px;height:5px;border-radius:50%;background:var(--volt)}
.sp-ht-label{font-size:7px;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.35);font-family:var(--ff-mono)}
/* Typography simulation — show the actual scale */
.sp-h1{height:11px;background:rgba(255,255,255,.82);border-radius:2px;width:80%;margin-bottom:4px}
.sp-h2{height:11px;background:rgba(255,255,255,.82);border-radius:2px;width:62%;margin-bottom:8px}
.sp-p{height:5.5px;background:rgba(255,255,255,.3);border-radius:2px;width:90%;margin-bottom:3px}
.sp-p2{height:5.5px;background:rgba(255,255,255,.25);border-radius:2px;width:72%;margin-bottom:10px}
.sp-cta-row{display:flex;gap:7px}
.sp-cta{
  height:20px;width:68px;border-radius:4px;
  background:var(--volt);opacity:.75;
}
.sp-cta-ghost{
  height:20px;width:54px;border-radius:4px;
  border:1px solid rgba(255,255,255,.18);
}
/* Content section below image */
.sp-content{
  position:absolute;bottom:0;left:0;right:0;
  padding:12px 14px;
  display:flex;flex-direction:column;gap:9px;
}
/* Services grid */
.sp-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.sp-card{
  background:rgba(255,255,255,.032);border:1px solid rgba(255,255,255,.055);
  border-radius:5px;padding:8px 6px;display:flex;flex-direction:column;gap:3px;
}
.sp-card-icon{width:14px;height:14px;border-radius:3px;background:var(--volt-dim);margin-bottom:2px}
.sp-card-l{height:5px;border-radius:2px;background:rgba(255,255,255,.12)}
.sp-card-l2{height:5px;border-radius:2px;background:rgba(255,255,255,.07);width:60%}
.sp-card--hi{border-color:rgba(64,102,255,.28);background:rgba(64,102,255,.09)}
.sp-card--hi .sp-card-icon{background:rgba(64,102,255,.35)}
/* Stats */
.sp-stats{display:flex;gap:6px}
.sp-stat{
  flex:1;background:rgba(255,255,255,.022);
  border:1px solid rgba(255,255,255,.04);
  border-radius:5px;padding:7px 6px;
}
.sp-stat-n{height:10px;width:28px;background:var(--volt);opacity:.45;border-radius:2px;margin-bottom:3px}
.sp-stat-l{height:4.5px;background:rgba(255,255,255,.06);border-radius:2px}
/* Floating indicators — data-forward, no decoration */
.hero-pip{
  position:absolute;
  display:flex;align-items:center;gap:8px;
  padding:10px 15px;
  background:rgba(9,10,13,.95);
  backdrop-filter:blur(20px);
  border:1px solid var(--line2);
  border-radius:var(--r-md);
  font-size:11px;font-weight:600;color:var(--chalk);
  white-space:nowrap;
  box-shadow:0 12px 36px rgba(0,0,0,.55);
  will-change:transform;
}
.pip-icon{
  width:18px;height:18px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.pip-icon svg{width:9px;height:9px}
.pip-g{background:rgba(34,197,94,.15);color:#22c55e}
.pip-b{background:var(--volt-dim);color:var(--volt)}
.pip-gold{background:var(--gold-dim);color:var(--gold)}
.pip-1{bottom:-20px;left:-32px;animation:pip-float 4.2s ease-in-out infinite}
.pip-2{top:-20px;right:-20px;animation:pip-float 3.6s ease-in-out infinite .8s}
.pip-3{right:-28px;top:38%;animation:pip-float 5s ease-in-out infinite 1.5s}
@keyframes pip-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
/* Canvas for particles */
#c{position:absolute;inset:0;pointer-events:none;z-index:0;opacity:.65}
/* ══════════════════════════════════════════════════════════════
   TICKER — editorial magazine strip
══════════════════════════════════════════════════════════════ */
.ticker{
  background:var(--ink2);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  padding-block:13px;overflow:hidden;
  position:relative;
}
.ticker::before,.ticker::after{
  content:'';position:absolute;top:0;bottom:0;width:100px;z-index:1;pointer-events:none;
}
.ticker::before{left:0;background:linear-gradient(90deg,var(--ink2),transparent)}
.ticker::after{right:0;background:linear-gradient(-90deg,var(--ink2),transparent)}
.ticker__track{overflow:hidden}
.ticker__inner{
  display:flex;align-items:center;gap:clamp(1.5rem,3vw,3rem);
  white-space:nowrap;width:max-content;
  animation:ticker-run 35s linear infinite;
}
.ticker:hover .ticker__inner{animation-play-state:paused}
.ticker__item{
  font-size:10.5px;font-weight:500;letter-spacing:.16em;
  text-transform:uppercase;color:var(--chalk4);flex-shrink:0;
  font-family:var(--ff-body);
}
.ticker__sep{
  color:var(--volt);opacity:.6;font-size:12px;
}
@keyframes ticker-run{from{transform:translateX(0)}to{transform:translateX(-50%)}}
/* ══════════════════════════════════════════════════════════════
   MANIFESTO STRIP — the differentiator
   This is what makes people stop. Copy-first design.
══════════════════════════════════════════════════════════════ */
.manifesto{
  background:var(--ink);
  padding-block:clamp(6rem,11vw,10rem);
  border-bottom:1px solid var(--line);
  position:relative;overflow:hidden;
}
.manifesto::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse 50% 60% at 20% 50%,rgba(64,102,255,.05) 0%,transparent 60%);
  pointer-events:none;
}
.manifesto__inner{
  display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(4rem,8vw,10rem);align-items:center;
}
/* The big provocative statement */
.mani__statement{
  font-family:var(--ff-display);
  font-size:clamp(2rem,4vw,3.8rem);
  font-weight:700;letter-spacing:-.045em;
  line-height:1.08;color:var(--chalk);
}
.mani__statement em{
  font-style:italic;color:var(--chalk3);font-weight:400;
}
/* Four truths on the right */
.mani__truths{display:flex;flex-direction:column;gap:0}
.mani__truth{
  display:flex;align-items:flex-start;gap:1.25rem;
  padding-block:clamp(1.2rem,2vw,1.6rem);
  border-bottom:1px solid var(--line);
}
.mani__truth:first-child{padding-top:0}
.mani__truth:last-child{border-bottom:none}
.truth-n{
  font-family:var(--ff-mono);font-size:10px;
  color:var(--chalk4);flex-shrink:0;padding-top:4px;
  width:16px;
}
.truth-body__title{
  font-size:15px;font-weight:600;
  letter-spacing:-.02em;color:var(--chalk);
  margin-bottom:5px;font-family:var(--ff-display);
}
.truth-body__p{font-size:13px;color:var(--chalk3);line-height:1.7}
/* ══════════════════════════════════════════════════════════════
   SERVICES — Architectural. Numbered. No cards.
══════════════════════════════════════════════════════════════ */
.services{background:var(--ink2)}
.svc__head{
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:2rem;flex-wrap:wrap;
  margin-bottom:clamp(3rem,6vw,5rem);
}
.svc__intro{}
.section-title{
  font-family:var(--ff-display);
  font-size:clamp(2.2rem,4.5vw,4rem);
  letter-spacing:-.045em;line-height:1.06;
  color:var(--chalk);margin-bottom:18px;
}
.section-sub{
  font-size:clamp(.92rem,1.1vw,1.05rem);
  color:var(--chalk3);line-height:1.78;max-width:45ch;
}
/* The service list — editorial rows, not cards */
.svc-list{}
.svc-item{
  display:grid;grid-template-columns:72px 1fr auto;
  gap:clamp(2rem,4vw,5rem);align-items:start;
  padding-block:clamp(2.5rem,5vw,4rem);
  border-bottom:1px solid var(--line);
  position:relative;overflow:hidden;
  transition:background .3s;cursor:none;
}
.svc-item:first-child{border-top:1px solid var(--line)}
/* Hover — the accent bar sweeps in from left */
.svc-item::before{
  content:'';position:absolute;left:0;top:0;bottom:0;
  width:2px;background:var(--volt);
  transform:scaleY(0);transform-origin:top;
  transition:transform .4s var(--ease-out);
}
.svc-item:hover::before{transform:scaleY(1)}
.svc-item:hover{background:rgba(64,102,255,.025)}
.svc-item__n{
  font-family:var(--ff-mono);font-size:11px;
  color:var(--chalk4);padding-top:5px;
  transition:color .3s;
}
.svc-item:hover .svc-item__n{color:var(--volt)}
.svc-item__body{}
.svc-item__title{
  font-family:var(--ff-display);
  font-size:clamp(1.2rem,2vw,1.7rem);
  font-weight:700;letter-spacing:-.025em;
  color:var(--chalk);margin-bottom:12px;
}
.svc-item__desc{
  font-size:13.5px;color:var(--chalk3);
  line-height:1.72;max-width:50ch;margin-bottom:18px;
}
.svc-item__chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:20px}
.chip{
  font-size:10.5px;font-weight:500;letter-spacing:.04em;
  color:var(--chalk4);background:var(--ink3);
  border:1px solid var(--line);border-radius:var(--r-f);
  padding:4px 11px;transition:border-color .2s,color .2s;
}
.svc-item:hover .chip{border-color:var(--line2)}
.svc-item__link{
  display:inline-flex;align-items:center;gap:6px;
  font-size:12px;font-weight:600;color:var(--volt);
  letter-spacing:.02em;transition:gap .2s;
}
.svc-item__link:hover{gap:10px}
/* Right — result data */
.svc-item__stat{
  display:flex;flex-direction:column;align-items:flex-end;
  gap:4px;padding-top:3px;text-align:right;
  opacity:.7;transition:opacity .3s;
}
.svc-item:hover .svc-item__stat{opacity:1}
.svc-stat-n{
  font-family:var(--ff-display);
  font-size:clamp(1.8rem,3.5vw,3rem);
  font-weight:700;letter-spacing:-.05em;
  color:var(--chalk);line-height:1;
}
.svc-stat-l{font-size:11px;color:var(--chalk4);letter-spacing:.04em;line-height:1.4}
/* ══════════════════════════════════════════════════════════════
   WORK — Full-bleed editorial reveal
══════════════════════════════════════════════════════════════ */
.work{background:var(--ink)}
.work__head{
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:2rem;flex-wrap:wrap;margin-bottom:clamp(3rem,6vw,5.5rem);
}
/* Featured case — horizontal, cinema ratio */
.case-hero{
  position:relative;
  border-radius:var(--r-xl);overflow:hidden;
  margin-bottom:16px;
  background:var(--ink3);border:1px solid var(--line);
  transition:border-color .4s,transform .55s var(--ease-out),box-shadow .55s;
}
.case-hero:hover{
  border-color:var(--line2);
  transform:translateY(-4px);
  box-shadow:0 40px 100px rgba(0,0,0,.55);
}
.case-hero__img{
  height:clamp(340px,45vw,580px);overflow:hidden;position:relative;
}
.case-hero__img img{
  width:100%;height:100%;
  transition:transform 1s var(--ease-out),filter .7s;
  filter:brightness(.6) saturate(.75);
}
.case-hero:hover .case-hero__img img{
  transform:scale(1.04);filter:brightness(.72) saturate(.9);
}
/* Cinematic gradient — image fades into content */
.case-hero__img::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,
    rgba(6,6,8,0) 30%,
    rgba(6,6,8,.6) 60%,
    rgba(6,6,8,.98) 100%);
}
/* Content pinned over the image bottom */
.case-hero__body{
  position:absolute;bottom:0;left:0;right:0;z-index:2;
  padding:clamp(1.5rem,3vw,3rem) clamp(1.5rem,3vw,3rem) clamp(2rem,4vw,4rem);
  display:flex;align-items:flex-end;justify-content:space-between;gap:2rem;
  flex-wrap:wrap;
}
.chb-left{}
.chb-chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:16px}
/* Light chip for dark image */
.chip-light{
  font-size:10px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  color:rgba(255,255,255,.5);background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.12);
  border-radius:var(--r-f);padding:4px 12px;
}
.chip-light--volt{
  color:var(--volt2);background:var(--volt-dim);
  border-color:rgba(64,102,255,.25);
}
.case-hero__title{
  font-family:var(--ff-display);
  font-size:clamp(1.6rem,3.5vw,3.2rem);
  font-weight:700;letter-spacing:-.04em;
  color:#fff;margin-bottom:10px;
}
.case-hero__desc{
  font-size:14px;color:rgba(255,255,255,.5);
  line-height:1.65;max-width:44ch;
}
/* Stats — right aligned on desktop */
.chb-right{display:flex;flex-direction:column;align-items:flex-end;gap:12px;flex-shrink:0}
.chb-stats{display:flex;gap:clamp(1rem,2.5vw,2.5rem);align-items:flex-start}
.chb-stat{text-align:right}
.chb-stat__n{
  font-family:var(--ff-display);font-size:clamp(1.4rem,2.5vw,2.2rem);
  font-weight:700;letter-spacing:-.04em;color:var(--volt2);
  display:block;line-height:1;
}
.chb-stat__l{font-size:10px;color:rgba(255,255,255,.35);margin-top:3px}
/* Award badge — premium gold */
.award-badge{
  display:inline-flex;align-items:center;gap:7px;
  padding:7px 13px;
  background:rgba(184,150,90,.1);border:1px solid rgba(184,150,90,.25);
  border-radius:var(--r-f);font-size:10px;font-weight:600;
  color:var(--gold);letter-spacing:.05em;
}
/* View hover overlay */
.case-hero__view{
  position:absolute;inset:0;z-index:3;
  display:flex;align-items:center;justify-content:center;
  background:rgba(6,6,8,.45);backdrop-filter:blur(8px);
  opacity:0;transition:opacity .3s;
}
.case-hero:hover .case-hero__view{opacity:1}
/* Secondary grid — 2 × 1 with different aspect ratios for visual rhythm */
.work-grid{
  display:grid;grid-template-columns:1.2fr 1fr;
  gap:16px;
}
.work-card{
  background:var(--ink3);border:1px solid var(--line);
  border-radius:var(--r-xl);overflow:hidden;
  transition:border-color .35s,transform .5s var(--ease-out),box-shadow .5s;
}
.work-card:hover{
  border-color:var(--line2);
  transform:translateY(-5px);
  box-shadow:0 28px 70px rgba(0,0,0,.5);
}
.work-card__img{overflow:hidden;position:relative}
.work-card--a .work-card__img{height:240px}
.work-card--b .work-card__img{height:240px}
.work-card__img img{
  width:100%;height:100%;
  transition:transform .9s var(--ease-out),filter .6s;
  filter:brightness(.6) saturate(.75);
}
.work-card:hover .work-card__img img{transform:scale(1.05);filter:brightness(.75) saturate(.95)}
.work-card__img::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 40%,rgba(17,19,24,.9) 100%);
}
.wc-view{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  background:rgba(6,6,8,.5);backdrop-filter:blur(10px);
  opacity:0;transition:opacity .28s;z-index:2;
}
.work-card:hover .wc-view{opacity:1}
.work-card__body{padding:clamp(1.2rem,2vw,1.6rem)}
.work-card__chips{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:11px}
.work-card__title{
  font-family:var(--ff-display);
  font-size:clamp(1rem,1.5vw,1.25rem);
  font-weight:700;letter-spacing:-.02em;margin-bottom:8px;
}
.work-card__desc{font-size:12.5px;color:var(--chalk3);line-height:1.65}
/* ══════════════════════════════════════════════════════════════
   RESULTS — Full width, raw numbers, no decoration
══════════════════════════════════════════════════════════════ */
.results{
  background:var(--ink2);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  padding-block:0;
}
.results__grid{display:grid;grid-template-columns:repeat(4,1fr)}
.result-col{
  padding:clamp(2.5rem,5vw,5rem) clamp(1.5rem,3vw,3rem);
  border-right:1px solid var(--line);
  position:relative;overflow:hidden;
  transition:background .3s;
}
.result-col:last-child{border-right:none}
.result-col::after{
  content:'';position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--volt),transparent);
  transform:scaleX(0);transform-origin:left;
  transition:transform .5s var(--ease-out);
}
.result-col:hover::after{transform:scaleX(1)}
.result-col:hover{background:rgba(64,102,255,.02)}
.rc-n{
  font-family:var(--ff-display);
  font-size:clamp(3rem,6vw,5.5rem);
  font-weight:700;letter-spacing:-.06em;
  color:var(--chalk);line-height:.95;
  margin-bottom:12px;display:block;
}
.rc-label{font-size:13px;color:var(--chalk3);line-height:1.5;max-width:20ch}
.rc-sub{font-size:11px;color:var(--chalk4);margin-top:5px}
/* ══════════════════════════════════════════════════════════════
   PROCESS — Vertical, left-pinned, clean
══════════════════════════════════════════════════════════════ */
.process{background:var(--ink)}
.process__layout{
  display:grid;grid-template-columns:360px 1fr;
  gap:clamp(4rem,9vw,12rem);align-items:start;
}
.process__pin{position:sticky;top:calc(var(--nav-h) + 3rem)}
.process__steps{display:flex;flex-direction:column;gap:0}
.pstep{
  display:grid;grid-template-columns:44px 1fr;
  gap:clamp(1.5rem,3vw,2.5rem);
  padding-block:clamp(2rem,4vw,3.5rem);
  border-bottom:1px solid var(--line);
  transition:background .3s;
}
.pstep:first-child{padding-top:0}
.pstep:last-child{border-bottom:none}
.pstep:hover{background:linear-gradient(90deg,rgba(64,102,255,.02),transparent)}
.pstep__node{display:flex;flex-direction:column;align-items:center;padding-top:2px}
.pstep__num{
  width:36px;height:36px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--ff-mono);font-size:10.5px;font-weight:500;
  color:var(--volt);background:var(--ink);
  border:1px solid rgba(64,102,255,.22);
  border-radius:var(--r-sm);
  transition:background .3s,box-shadow .3s;
}
.pstep:hover .pstep__num{background:var(--volt-dim);box-shadow:0 0 14px var(--volt-glow)}
.pstep__line{
  width:1px;flex:1;margin-top:8px;min-height:20px;
  background:linear-gradient(180deg,rgba(64,102,255,.2),rgba(64,102,255,.04));
}
.pstep:last-child .pstep__line{display:none}
.pstep__body h3{
  font-family:var(--ff-display);
  font-size:clamp(1.05rem,1.7vw,1.4rem);
  font-weight:700;letter-spacing:-.025em;
  margin-bottom:10px;
}
.pstep__body p{font-size:13.5px;color:var(--chalk3);line-height:1.72;margin-bottom:14px;max-width:48ch}
.pstep__chips{display:flex;flex-wrap:wrap;gap:6px}
/* ══════════════════════════════════════════════════════════════
   TESTIMONIALS — The editorial quote approach
══════════════════════════════════════════════════════════════ */
.testi{background:var(--ink2)}
/* Big pull quote — no card, no border, just the words */
.testi__lead{
  padding-block:clamp(5rem,9vw,8rem);
  border-bottom:1px solid var(--line);
  margin-bottom:clamp(4rem,7vw,6rem);
  position:relative;
}
/* Opening mark — decorative only, very large */
.testi__lead::before{
  content:'\201C';
  position:absolute;
  top:clamp(2rem,4vw,4rem);left:-8px;
  font-family:var(--ff-display);
  font-size:clamp(8rem,20vw,20rem);
  font-weight:700;line-height:1;
  color:rgba(64,102,255,.06);
  pointer-events:none;user-select:none;
}
.testi__quote{
  font-family:var(--ff-display);
  font-size:clamp(1.4rem,3.2vw,2.8rem);
  font-weight:400;letter-spacing:-.03em;
  line-height:1.4;color:var(--chalk);
  max-width:960px;margin-bottom:clamp(2rem,4vw,3.5rem);
}
/* Bold key phrase — editorial emphasis */
.testi__quote strong{font-weight:700;color:var(--chalk)}
.testi__quote em{font-style:italic;color:var(--chalk3)}
.testi__author{display:flex;align-items:center;gap:16px}
.ta-avatar{
  width:52px;height:52px;border-radius:var(--r-sm);
  overflow:hidden;border:1px solid var(--line2);flex-shrink:0;
}
.ta-avatar img{width:100%;height:100%}
.ta-name{
  font-family:var(--ff-display);
  font-size:15px;font-weight:700;
  letter-spacing:-.02em;display:block;margin-bottom:2px;
}
.ta-role{font-size:12px;color:var(--chalk4);letter-spacing:.02em}
.ta-stars{display:flex;gap:3px;margin-bottom:4px}
.ta-stars svg{width:12px;height:12px;fill:var(--gold)}
/* Grid — 3 secondary testimonials */
.testi__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line)}
.testi-card{
  background:var(--ink2);
  padding:clamp(1.5rem,2.5vw,2.2rem);
  transition:background .3s;
}
.testi-card:hover{background:var(--ink3)}
.tc-quote{
  font-size:13.5px;color:var(--chalk);line-height:1.78;
  font-weight:400;margin-bottom:clamp(1.2rem,2.5vw,2rem);flex:1;
  /* No card decoration — let the words breathe */
}
.tc-author{display:flex;align-items:center;gap:12px}
.tc-av{
  width:36px;height:36px;border-radius:var(--r-sm);
  overflow:hidden;flex-shrink:0;border:1px solid var(--line);
}
.tc-av img{width:100%;height:100%}
.tc-av--init{
  background:var(--volt-dim);color:var(--volt);
  display:flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:700;
}
.tc-name{font-size:13px;font-weight:700;display:block;margin-bottom:1px;font-family:var(--ff-display);letter-spacing:-.01em}
.tc-role{font-size:11px;color:var(--chalk4)}
/* ══════════════════════════════════════════════════════════════
   STUDIO — Who we are, no photos of laptops
══════════════════════════════════════════════════════════════ */
.studio{background:var(--ink)}
.studio__layout{
  display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(4rem,8vw,11rem);align-items:start;
}
.studio__l{}
.studio__l .section-sub{margin-bottom:clamp(2rem,4vw,3rem)}
/* Principle list */
.principles{display:flex;flex-direction:column;gap:0;margin-bottom:clamp(2rem,4vw,3rem)}
.principle{
  display:flex;align-items:flex-start;gap:1.25rem;
  padding-block:clamp(1.2rem,2.2vw,1.7rem);
  border-bottom:1px solid var(--line);
  transition:background .3s;
}
.principle:first-child{padding-top:0}
.principle:last-child{border-bottom:none}
.principle:hover{background:linear-gradient(90deg,rgba(64,102,255,.02),transparent)}
.principle__n{
  font-family:var(--ff-mono);font-size:10px;
  color:var(--chalk4);flex-shrink:0;padding-top:4px;width:18px;
}
.principle__title{
  font-family:var(--ff-display);font-size:15px;font-weight:700;
  letter-spacing:-.02em;color:var(--chalk);margin-bottom:5px;
}
.principle__p{font-size:13px;color:var(--chalk3);line-height:1.68}
.studio__r{}
/* The key visual: workspace image, not stock */
.studio__img-wrap{
  position:relative;margin-bottom:16px;
}
.studio__img{
  width:100%;aspect-ratio:4/3;border-radius:var(--r-xl);
  overflow:hidden;border:1px solid var(--line);
  box-shadow:0 28px 70px rgba(0,0,0,.45);position:relative;
}
.studio__img img{
  width:100%;height:100%;
  filter:brightness(.65) saturate(.75);
}
/* Caption over image */
.studio__img::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 50%,rgba(6,6,8,.85) 100%);
}
.studio__img-caption{
  position:absolute;bottom:0;left:0;right:0;z-index:1;
  padding:clamp(1.5rem,3vw,2.5rem);
}
.sic-top{
  font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(255,255,255,.3);margin-bottom:6px;font-family:var(--ff-body);
}
.sic-bottom{
  font-family:var(--ff-display);
  font-size:clamp(1rem,1.8vw,1.5rem);
  font-weight:700;letter-spacing:-.025em;color:#fff;
}
/* Metric grid */
.studio-metrics{
  display:grid;grid-template-columns:repeat(2,1fr);gap:10px;
}
.smet{
  background:var(--ink3);border:1px solid var(--line);
  border-radius:var(--r-md);padding:clamp(1.2rem,2vw,1.6rem);
  transition:border-color .25s,transform .35s var(--ease-out);
}
.smet:hover{border-color:var(--line2);transform:translateY(-2px)}
.smet__n{
  font-family:var(--ff-display);
  font-size:clamp(1.6rem,3vw,2.4rem);
  font-weight:700;letter-spacing:-.04em;
  color:var(--chalk);line-height:1;margin-bottom:5px;
}
.smet__l{font-size:11px;color:var(--chalk4)}
/* ══════════════════════════════════════════════════════════════
   CTA — Scarcity + Emotion, not just a form
══════════════════════════════════════════════════════════════ */
.cta{
  background:var(--ink2);
  position:relative;overflow:hidden;
  padding-block:clamp(7rem,13vw,12rem);
  border-top:1px solid var(--line);
}
/* Atmospheric glow */
.cta::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse 60% 80% at 50% 50%,rgba(64,102,255,.07) 0%,transparent 65%);
  pointer-events:none;
}
/* Top accent line */
.cta::after{
  content:'';position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent 10%,var(--volt) 50%,transparent 90%);
  opacity:.35;
}
.cta__inner{max-width:820px;margin-inline:auto;text-align:center;position:relative;z-index:1}
/* Scarcity badge — the most important conversion element on the page */
.cta__scarcity{
  display:inline-flex;align-items:center;gap:9px;
  padding:8px 16px;
  background:rgba(184,150,90,.08);
  border:1px solid rgba(184,150,90,.22);
  border-radius:var(--r-f);
  font-size:11px;font-weight:600;
  color:var(--gold);letter-spacing:.06em;
  margin-bottom:2.5rem;
}
.cta__scarcity-dot{
  width:6px;height:6px;border-radius:50%;background:var(--gold);
  animation:ping-gold 2s ease-in-out infinite;
}
.cta__h{
  font-family:var(--ff-display);
  font-size:clamp(2.5rem,6vw,5.5rem);
  font-weight:700;letter-spacing:-.055em;
  line-height:1;color:var(--chalk);
  margin-bottom:1.5rem;
}
/* The sub copy — honest, direct */
.cta__p{
  font-size:clamp(.95rem,1.2vw,1.1rem);
  color:var(--chalk3);line-height:1.75;
  max-width:48ch;margin-inline:auto;
  margin-bottom:clamp(2.5rem,5vw,4rem);
}
.cta__actions{
  display:flex;align-items:center;justify-content:center;gap:1.25rem;
  flex-wrap:wrap;margin-bottom:1.5rem;
}
.cta__note{
  font-size:11.5px;color:var(--chalk4);
  display:flex;align-items:center;justify-content:center;gap:8px;
}
.footer__tagline{font-size:12px;color:var(--chalk4);letter-spacing:.01em}
/* ── RESPONSIVE ─────────────────────────────────────────────── */
@media(max-width:1100px){
  .hero__inner{grid-template-columns:1fr;text-align:center}
  .hero__sub,.hero__proof{margin-inline:auto}
  .hero__proof{justify-content:center;flex-wrap:wrap}
  .hero__ctas{justify-content:center}
  .hero__r{max-width:600px;margin-inline:auto;display:none}
  .manifesto__inner{grid-template-columns:1fr;gap:clamp(3rem,6vw,5rem)}
  .svc-item{grid-template-columns:60px 1fr}
  .svc-item__stat{display:none}
  .work-grid{grid-template-columns:1fr}
  .results__grid{grid-template-columns:repeat(2,1fr)}
  .result-col:nth-child(2){border-right:none}
  .result-col:nth-child(3){border-top:1px solid var(--line)}
  .result-col:nth-child(4){border-top:1px solid var(--line);border-right:none}
  .process__layout{grid-template-columns:1fr}
  .process__pin{position:static}
  .testi__grid{grid-template-columns:1fr}
  .studio__layout{grid-template-columns:1fr}
  .footer__top{grid-template-columns:1fr}
  .footer__nav{grid-template-columns:repeat(2,1fr)}
  .pip-1,.pip-2,.pip-3{display:none}
}
@media(max-width:768px){
  .nav__links,.nav__r{display:none}
  .burger{display:flex}
  .case-hero__body{flex-direction:column;gap:1rem}
  .chb-right{align-items:flex-start}
  .testi__grid{background:none;gap:14px}
  .testi-card{border:1px solid var(--line);border-radius:var(--r-lg)}
  .footer__nav{grid-template-columns:1fr}
  .footer__bottom{flex-direction:column;align-items:flex-start}
}
@media(max-width:480px){
  .hero__ctas{flex-direction:column;width:100%}
  .hero__ctas .btn{width:100%;justify-content:center}
  .svc-item{grid-template-columns:1fr;gap:1rem}
  .svc-item__n{display:none}
  .results__grid{grid-template-columns:1fr}
  .result-col{border-right:none;border-bottom:1px solid var(--line)}
  .result-col:last-child{border-bottom:none}
  .cta__actions{flex-direction:column;align-items:stretch}
  .cta__actions .btn{justify-content:center}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important}
}
/* ══════════════════════════════════════════════════════════════
   SERVICES — LIGHT CREAM
   Section rhythm: Dark hero → Dark manifesto → LIGHT services
══════════════════════════════════════════════════════════════ */
.services {
  background: var(--lt-bg);
  /* Top border transitions from dark to light — acts as a visual seal */
  border-top: 1px solid var(--lt-line);
}
/* Section titles, subs within light sections — override dark tokens */
.services .section-title,
.services .svc-item__title,
.services h2, .services h3 {
  color: var(--lt-text);
}
.services .section-sub,
.services .svc-item__desc {
  color: var(--lt-text2);
}
.services .eyebrow {
  color: var(--lt-volt);
}
.services .eyebrow__mark {
  background: var(--lt-volt);
}
/* Service item rows on light bg */
.services .svc-item {
  border-bottom: 1px solid var(--lt-line);
}
.services .svc-item:first-child {
  border-top: 1px solid var(--lt-line);
}
.services .svc-item:hover {
  background: rgba(51,88,240,.04);
}
.services .svc-item::before {
  background: var(--lt-volt);
}
.services .svc-item__n {
  color: var(--lt-text4);
}
.services .svc-item:hover .svc-item__n {
  color: var(--lt-volt);
}
/* Chips — light context */
.services .chip {
  color: var(--lt-text3);
  background: var(--lt-bg2);
  border-color: var(--lt-line);
}
.services .svc-item:hover .chip {
  border-color: var(--lt-line2);
  color: var(--lt-text2);
}
/* Link */
.services .svc-item__link {
  color: var(--lt-volt);
}
/* Stat numbers — the big data points on right */
.services .svc-stat-n {
  color: var(--lt-text);
}
.services .svc-stat-l {
  color: var(--lt-text4);
}
/* "All Services" button in services head — light context */
.services .btn--outline {
  color: var(--lt-text);
  border-color: var(--lt-line2);
}
.services .btn--outline:hover {
  border-color: var(--lt-line3);
  background: rgba(0,0,0,.03);
}
/* ══════════════════════════════════════════════════════════════
   RESULTS BAND — WARM LIGHT
   Numbers on cream are unmissable — high contrast data
══════════════════════════════════════════════════════════════ */
.results {
  background: var(--lt-bg);
  border-top: 1px solid var(--lt-line);
  border-bottom: 1px solid var(--lt-line);
}
.result-col {
  border-right-color: var(--lt-line);
}
.result-col:hover {
  background: rgba(51,88,240,.035);
}
/* The sweep line on hover — light context */
.result-col::after {
  background: linear-gradient(90deg, transparent, var(--lt-volt), transparent);
}
/* Numbers — dark on light, massive impact */
.rc-n {
  color: var(--lt-text);
}
/* On light bg, use the blue volt for numbers for punch */
.result-col:nth-child(2) .rc-n {
  color: var(--lt-volt);
}
.rc-label {
  color: var(--lt-text2);
}
/* ══════════════════════════════════════════════════════════════
   TESTIMONIALS — LIGHT CREAM
   Human warmth. Cream feels trusted, not cold.
══════════════════════════════════════════════════════════════ */
.testi {
  background: var(--lt-bg);
  border-top: 1px solid var(--lt-line);
}
/* The giant quote mark — subtle on light */
.testi__lead::before {
  color: rgba(51,88,240,.05);
}
.testi__lead {
  border-bottom-color: var(--lt-line);
}
/* The hero quote text — dark on cream */
.testi__quote {
  color: var(--lt-text);
}
.testi__quote strong {
  color: var(--lt-text);
}
.testi__quote em {
  color: var(--lt-text3);
}
/* Author */
.ta-avatar {
  border-color: var(--lt-line2);
}
.ta-name {
  color: var(--lt-text);
}
.ta-role {
  color: var(--lt-text3);
}
/* Stars — gold on light bg pops beautifully */
.ta-stars svg {
  fill: var(--gold);
}
/* Eyebrow on light */
.testi .eyebrow {
  color: var(--lt-volt);
}
.testi .eyebrow__mark {
  background: var(--lt-volt);
}
/* Secondary testimonial grid — uses a dividing line system on light */
.testi__grid {
  background: var(--lt-line);  /* the 1px gap between cards shows as line */
}
.testi-card {
  background: var(--lt-bg);
}
.testi-card:hover {
  background: var(--lt-bg4);  /* pure white on hover — premium lift */
}
.tc-quote {
  color: var(--lt-text2);
}
.tc-name {
  color: var(--lt-text);
}
.tc-role {
  color: var(--lt-text3);
}
.tc-av {
  border-color: var(--lt-line2);
}
.tc-av--init {
  background: var(--lt-volt-dim);
  color: var(--lt-volt);
}
/* Stars in secondary cards */
.testi-card .ta-stars svg {
  fill: var(--gold);
}
/* ══════════════════════════════════════════════════════════════
   SECTION TRANSITION EDGES
   The seam between dark and light — razor sharp, intentional
══════════════════════════════════════════════════════════════ */

/* Manifesto → Services (dark→light) */
/* The ticker acts as a natural divider */
.ticker {
  border-top-color: rgba(255,255,255,.05);
  border-bottom-color: rgba(255,255,255,.05);
}
/* Work (dark) → Results (light) — the edge is the contrast itself */
.work {
  /* Bottom border that bleeds into the light section */
  padding-bottom: clamp(6rem,12vw,11rem);
}
/* Results (light) → Process (dark) — add a strong visual close */
.process {
  /* Process re-enters dark — reinforce with a thin volt line at top */
  border-top: 1px solid var(--line);
  position: relative;
}
.process::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent 5%, var(--volt) 50%, transparent 95%);
  opacity: .25;
  z-index: 1;
}
/* Testimonials (light) → Studio (dark) */
.studio {
  border-top: 1px solid var(--line);
  position: relative;
}
.studio::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent 5%, rgba(64,102,255,.3) 50%, transparent 95%);
  z-index: 1;
}
/* ══════════════════════════════════════════════════════════════
   NAV — adapts on light/dark scroll context
══════════════════════════════════════════════════════════════ */
/* When scrolled into a light section, nav gets warm tint */
/* We'll handle this via JS class toggle */
.nav.on-light {
  background: rgba(244,242,238,.92);
  backdrop-filter: blur(28px) saturate(1.4);
  border-bottom-color: rgba(0,0,0,.08);
}
.nav.on-light .nav__wordmark,
.nav.on-light .nav__link {
  color: var(--lt-text2);
}
.nav.on-light .nav__link:hover {
  color: var(--lt-text);
}
/* Logo mark fill on light — inverts to dark */
.nav.on-light .logo-path-a,
.nav.on-light .logo-path-b {
  fill: var(--lt-text);
}
.nav.on-light .btn--outline {
  color: var(--lt-text);
  border-color: rgba(0,0,0,.18);
}
.nav.on-light .btn--outline:hover {
  background: rgba(0,0,0,.05);
  border-color: rgba(0,0,0,.3);
}
/* ══════════════════════════════════════════════════════════════
   REFINED TYPOGRAPHY SCALE for light sections
   Headings get slightly tighter on light — more editorial feel
══════════════════════════════════════════════════════════════ */
.services .section-title,
.testi .section-title {
  letter-spacing: -.048em;
  /* Light sections: title can go darker for max contrast */
  color: #0A0908;
}
/* ══════════════════════════════════════════════════════════════
   LIGHT SECTION MICRO-DETAILS
   The small things that separate premium from standard
══════════════════════════════════════════════════════════════ */

/* Service stat numbers on hover — volt accent for data moments */
.services .svc-item:hover .svc-stat-n {
  color: var(--lt-volt);
  transition: color .3s;
}
/* Light selection highlight */
.services ::selection,
.results ::selection,
.testi ::selection {
  background: rgba(51,88,240,.12);
  color: var(--lt-text);
}
/* Scrollbar on light sections */
.services::-webkit-scrollbar-track,
.testi::-webkit-scrollbar-track {
  background: var(--lt-bg);
}
/* ══════════════════════════════════════════════════════════════
   TICKER — sits between dark manifesto and light services
   Needs its own special treatment as a bridge element
══════════════════════════════════════════════════════════════ */
.ticker {
  /* Neutral — sits between two different section types */
  background: var(--ink3);
}
.ticker::before {
  background: linear-gradient(90deg, var(--ink3), transparent);
}
.ticker::after {
  background: linear-gradient(-90deg, var(--ink3), transparent);
}
/* ══════════════════════════════════════════════════════════════
   RESPONSIVE ADJUSTMENTS FOR LIGHT SECTIONS
══════════════════════════════════════════════════════════════ */
@media (max-width: 1100px) {
  .services .svc-item {
    grid-template-columns: 50px 1fr;
  }
  .results__grid {
    grid-template-columns: repeat(2,1fr);
  }
  .result-col:nth-child(2) {
    border-right: none;
  }
  .result-col:nth-child(3) {
    border-top: 1px solid var(--lt-line);
  }
  .result-col:nth-child(4) {
    border-top: 1px solid var(--lt-line);
    border-right: none;
  }
}
@media (max-width: 768px) {
  .testi__grid {
    background: none;
    gap: 14px;
  }
  .testi-card {
    border: 1px solid var(--lt-line);
    border-radius: var(--r-lg);
  }
}
@media (max-width: 480px) {
  .results__grid {
    grid-template-columns: 1fr;
  }
  .result-col {
    border-right: none;
    border-bottom: 1px solid var(--lt-line);
  }
  .result-col:last-child {
    border-bottom: none;
  }
}