/* ============================================================
   AKSHAT TAMBI — NEO · CASE STUDY layer
   Extends neo.css. Light, image-led, system type, blue accent.
   Bridge project accents (navy / orange) used sparingly as brand.
   ============================================================ */

:root{
  --bridge:    #ef5a1e;   /* Bridge action orange (brand) */
  --bridge-2:  #122236;   /* Bridge navy */
  --ok:        #1ca45c;
}

/* ---- generic case section ---- */
.cs-sec{ max-width:var(--maxw); margin:0 auto; padding:clamp(84px,10.5vw,164px) var(--gutter) 0; }
.cs-sec.tight{ padding-top:clamp(48px,5.5vw,84px); }
.cs-head{ display:block; }
.cs-idx{
  display:block; font-family:var(--mono); font-size:13px; font-weight:500; letter-spacing:.04em;
  text-transform:uppercase; color:var(--accent); margin-bottom:16px;
}
.cs-head h2{ font-size:clamp(34px,5vw,68px); font-weight:600; letter-spacing:-.03em; line-height:1.02; max-width:16ch; }
.cs-head h2 em{ color:var(--accent); }
.cs-body{ max-width:62ch; margin-top:clamp(22px,2.6vw,36px); }
.cs-body.full{ max-width:none; }
.cs-body p{ font-size:clamp(17px,1.4vw,19px); color:var(--ink-2); line-height:1.55; }
.cs-body p + p{ margin-top:16px; }
.cs-body .big-lead{
  font-size:clamp(24px,3.1vw,42px); font-weight:600; letter-spacing:-.025em;
  line-height:1.12; color:var(--ink); margin-bottom:22px; max-width:22ch;
}
.cs-body .big-lead em{ color:var(--accent); }
.cs-body .serif{ font-style:italic; }
@media (max-width:780px){
  .cs-body .big-lead{ max-width:none; }
}

/* ============================================================
   HERO
   ============================================================ */
.cs-hero{ padding:clamp(118px,15vw,168px) var(--gutter) 0; max-width:1480px; margin:0 auto; }
.cs-chips{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; }
.chip{
  font-size:13px; font-weight:500; letter-spacing:-.005em; color:var(--ink-2);
  border:1px solid var(--line); border-radius:980px; padding:7px 15px;
  display:inline-flex; align-items:center; gap:.5em; background:var(--bg);
}
.chip.solid{ background:var(--ink); color:var(--bg); border-color:var(--ink); }
.chip.live{ color:var(--ok); border-color:color-mix(in srgb,var(--ok) 45%,transparent); }
.chip .pulse{ width:7px; height:7px; border-radius:50%; background:var(--ok); position:relative; }
.chip .pulse::after{ content:""; position:absolute; inset:-4px; border-radius:50%; border:1px solid var(--ok); animation:pulse 2.6s var(--ease) infinite; }
.cs-hero h1{
  text-align:center; font-size:clamp(48px,9vw,124px); font-weight:600;
  letter-spacing:-.04em; line-height:.98; margin:clamp(22px,3vw,34px) auto 0; max-width:14ch;
}
.cs-hero h1 em{ color:var(--accent); }
.cs-hero .lead{ max-width:46ch; margin:26px auto 0; text-align:center; }
.cs-cover{
  position:relative; margin:clamp(40px,5.5vw,72px) auto 0; border-radius:var(--radius);
  overflow:hidden; background:var(--bg-2); box-shadow:0 40px 100px -50px rgba(0,0,0,.5);
  will-change:transform; aspect-ratio:2200/1313;
}
.cs-cover img, .cs-cover image-slot{ display:block; width:100%; height:100%; object-fit:cover; }

/* award lockup */
.cs-award{
  display:flex; align-items:center; justify-content:center; gap:6px;
  margin:clamp(26px,3vw,40px) auto 0; color:var(--ink);
}
.cs-award .laurel{ width:34px; height:84px; flex:none; opacity:.95; color:#b8923f; }
[data-theme="dark"] .cs-award .laurel{ color:#d8b765; }
.cs-award .laurel.r{ transform:scaleX(-1); }
.cs-award .aw-text{ text-align:center; padding:0 6px; }
.cs-award .aw-k{ display:block; font-family:var(--mono); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--accent); }
.cs-award .aw-t{ display:block; font-size:clamp(18px,2vw,24px); font-weight:600; letter-spacing:-.02em; margin-top:2px; }
.cs-award .aw-s{ display:block; font-size:12.5px; color:var(--muted); margin-top:3px; }

/* ============================================================
   META BLOCK
   ============================================================ */
.cs-meta{
  max-width:var(--maxw); margin:clamp(60px,8vw,104px) auto 0; padding-inline:var(--gutter);
  display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(20px,3vw,48px);
  border-top:1px solid var(--line); padding-top:34px;
}
.cs-meta .mi .k{ font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--faint); margin-bottom:10px; }
.cs-meta .mi .v{ font-size:16px; font-weight:500; line-height:1.35; letter-spacing:-.01em; }
.cs-meta .mi .v em{ color:var(--accent); }
@media (max-width:720px){ .cs-meta{ grid-template-columns:1fr 1fr; gap:28px 24px; } }

/* ============================================================
   FIGURE + CAPTION
   ============================================================ */
.cs-figure{ max-width:var(--maxw); margin:clamp(56px,7vw,104px) auto 0; padding-inline:var(--gutter); }
.cs-figure.bleed{ max-width:1480px; }
.cs-frame{ border-radius:var(--radius); overflow:hidden; background:var(--bg-2); aspect-ratio:16/9; }
.cs-frame.ar-43{ aspect-ratio:4/3; }
.cs-frame.ar-cinema{ aspect-ratio:21/9; }
.cs-frame img, .cs-frame image-slot{ display:block; width:100%; height:100%; object-fit:cover; transition:transform 1.6s var(--ease); }
.cs-frame:hover img{ transform:scale(1.03); }

/* two-up figure row */
.cs-figrow{
  max-width:var(--maxw); margin:clamp(40px,5vw,72px) auto 0; padding-inline:var(--gutter);
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(16px,2vw,24px);
}
.cs-figrow.bleed{ max-width:1480px; }
@media (max-width:760px){ .cs-figrow{ grid-template-columns:1fr; } }

/* persona card */
.cs-persona{
  max-width:var(--maxw); margin:clamp(40px,5vw,72px) auto 0; padding-inline:var(--gutter);
}
.cs-persona-in{
  display:grid; grid-template-columns:auto 1fr; gap:clamp(24px,3.4vw,52px); align-items:center;
  background:var(--bg-2); border-radius:var(--radius); padding:clamp(26px,3vw,44px);
}
.cs-persona .pf{ width:clamp(120px,16vw,168px); aspect-ratio:1/1; border-radius:24px; overflow:hidden; flex:none; background:var(--bg-3); }
.cs-persona .pf img, .cs-persona .pf image-slot{ width:100%; height:100%; object-fit:cover; display:block; }
.cs-persona .pk{ font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--accent); }
.cs-persona h3{ font-size:clamp(24px,2.8vw,38px); font-weight:600; letter-spacing:-.025em; margin-top:8px; }
.cs-persona .pq{ font-size:clamp(17px,1.7vw,21px); color:var(--ink-2); line-height:1.4; margin-top:14px; max-width:46ch; }
.cs-persona .pq em{ color:var(--accent); font-style:italic; }
.cs-persona .ptags{ display:flex; flex-wrap:wrap; gap:8px; margin-top:20px; }
.cs-persona .ptag{ font-size:13px; color:var(--ink-2); border:1px solid var(--line); border-radius:980px; padding:6px 13px; }
@media (max-width:640px){ .cs-persona-in{ grid-template-columns:1fr; gap:22px; } }
.cs-cap{ display:flex; gap:10px; margin-top:16px; font-size:13.5px; color:var(--muted); align-items:baseline; }
.cs-cap span{ font-family:var(--mono); font-size:11px; letter-spacing:.04em; color:var(--faint); flex:none; }
.cs-cap b{ color:var(--ink-2); font-weight:600; }

/* ============================================================
   METRICS (count-up)
   ============================================================ */
.cs-metrics{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(20px,3vw,40px); margin-top:8px; }
.cs-metric{ border-top:2px solid var(--ink); padding-top:20px; }
.cs-metric .mv{ font-size:clamp(40px,5.5vw,76px); font-weight:600; letter-spacing:-.035em; line-height:1; }
.cs-metric .mv em{ color:var(--accent); }
.cs-metric .ml{ font-size:15px; color:var(--muted); line-height:1.45; margin-top:14px; max-width:24ch; }
@media (max-width:720px){ .cs-metrics{ grid-template-columns:1fr; gap:28px; } }

/* ============================================================
   BEFORE / AFTER REPAIR SLIDER (inside a phone)
   ============================================================ */
/* Centered, device-framed before/after — calm and balanced */
.ba-fig{ display:flex; flex-direction:column; align-items:center; }
.ba-head{ display:flex; justify-content:space-between; align-items:baseline; width:min(300px,80vw); margin:0 auto clamp(18px,2.2vw,28px); }
.ba-lab{ font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--faint); }
.ba-lab.after{ color:var(--ink); font-weight:600; }

/* shared premium device frame */
.phone.device{
  padding:11px;
  background:linear-gradient(155deg,#26262a 0%,#101012 48%,#050506 100%);
  border-radius:48px;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.05),
    0 1px 1px rgba(255,255,255,.10) inset,
    0 46px 90px -40px rgba(0,0,0,.6),
    0 18px 40px -30px rgba(0,0,0,.45);
}
.phone.device .scr{ border-radius:38px; overflow:hidden; background:#000; }
.phone.device .island{
  display:block; position:absolute; top:20px; left:50%; transform:translateX(-50%);
  width:84px; height:24px; background:#000; border-radius:13px; z-index:9;
}
.ba-phonewrap .phone{ width:min(300px,80vw); }

.ba{ position:relative; width:100%; height:100%; overflow:hidden; touch-action:none; user-select:none; }
.ba-layer{ position:absolute; inset:0; }
.ba-layer img{ width:100%; height:100%; object-fit:cover; object-position:top; display:block; pointer-events:none; }
.ba-before{ clip-path:inset(0 calc(100% - var(--pos,50%)) 0 0); }
.ba-divider{ position:absolute; top:0; bottom:0; left:var(--pos,50%); width:2px; background:rgba(255,255,255,.92); box-shadow:0 0 14px rgba(0,0,0,.28); z-index:6; transform:translateX(-1px); }
.ba-handle{
  position:absolute; top:50%; left:var(--pos,50%); z-index:7;
  width:40px; height:40px; border-radius:50%;
  background:rgba(255,255,255,.94); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  color:#1a1a1a; display:grid; place-items:center; transform:translate(-50%,-50%);
  box-shadow:0 6px 20px -4px rgba(0,0,0,.42), 0 0 0 1px rgba(0,0,0,.06); cursor:ew-resize; touch-action:none;
}
.ba-handle svg{ width:19px; height:19px; }
.ba-cap-center{ justify-content:center; text-align:center; }
@media (max-width:780px){ .ba-head{ width:min(280px,82vw); } }

/* ---- insight cards (what broke) ---- */
.cs-insights{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(20px,3vw,40px); margin-top:8px; }
.cs-insight{ display:flex; gap:18px; padding-top:22px; border-top:1px solid var(--line); }
.cs-insight .n{ font-family:var(--mono); font-size:13px; color:var(--accent); flex:none; padding-top:.2em; }
.cs-insight h4{ font-size:19px; font-weight:600; letter-spacing:-.02em; }
.cs-insight p{ font-size:15px; color:var(--muted); line-height:1.5; margin-top:8px; }
@media (max-width:720px){ .cs-insights{ grid-template-columns:1fr; } }

/* ============================================================
   RESEARCH ACCORDION
   ============================================================ */
.rgrid{ border-top:1px solid var(--line); margin-top:6px; }
.rrow{ border-bottom:1px solid var(--line); }
.rr-head{ display:flex; align-items:center; gap:clamp(16px,2.4vw,30px); width:100%; text-align:left; cursor:pointer; padding:clamp(22px,2.6vw,32px) 2px; color:var(--ink); }
.rr-n{ font-family:var(--mono); font-size:13px; color:var(--muted); flex:none; width:28px; transition:color .3s var(--ease); }
.rr-title{ flex:1; font-size:clamp(20px,2.4vw,32px); font-weight:600; letter-spacing:-.025em; line-height:1.12; transition:color .3s var(--ease); }
.rr-chev{ flex:none; width:24px; height:24px; color:var(--muted); transition:transform .45s var(--ease), color .3s var(--ease); }
.rr-chev svg{ width:100%; height:100%; }
.rrow:hover .rr-n, .rrow:hover .rr-title, .rrow.is-open .rr-n{ color:var(--accent); }
.rrow.is-open .rr-chev{ transform:rotate(45deg); color:var(--accent); }
.rr-detail{ overflow:hidden; max-height:0; transition:max-height .5s var(--ease); }
.rrow.is-open .rr-detail{ max-height:340px; }
.gaplist{ list-style:none; padding:0 0 30px 56px; max-width:64ch; display:flex; flex-direction:column; gap:12px; }
.gaplist li{ position:relative; padding-left:18px; font-size:16px; line-height:1.5; color:var(--ink-2); }
.gaplist li::before{ content:""; position:absolute; left:0; top:.62em; width:6px; height:6px; border-radius:50%; background:var(--accent); }
html:not(.js) .rr-detail{ max-height:none; }
@media (max-width:600px){ .gaplist{ padding-left:0; } }

/* ---- principles / brief ---- */
.cs-principles{ display:flex; flex-direction:column; border-top:1px solid var(--line); margin-top:8px; }
.cs-principle{ display:flex; gap:clamp(16px,2.4vw,30px); align-items:baseline; padding:20px 2px; border-bottom:1px solid var(--line-2); }
.cs-principle .pk{ font-family:var(--mono); font-size:13px; color:var(--accent); flex:none; width:28px; }
.cs-principle .pt{ font-size:clamp(18px,2vw,24px); font-weight:500; letter-spacing:-.02em; }
.cs-principle .pt .serif{ font-style:italic; color:var(--accent); }

/* ============================================================
   KEY INSIGHT — statement + shift
   ============================================================ */
.cs-statement{ font-size:clamp(30px,4.6vw,60px); font-weight:600; letter-spacing:-.03em; line-height:1.08; max-width:20ch; }
.cs-statement em{ color:var(--accent); }
.cs-shift{ display:flex; align-items:stretch; gap:18px; margin-top:clamp(34px,4vw,56px); flex-wrap:wrap; }
.cs-shift .from, .cs-shift .to{ flex:1; min-width:200px; border:1px solid var(--line); border-radius:20px; padding:24px 26px; }
.cs-shift .to{ border-color:var(--accent); background:color-mix(in srgb,var(--accent) 6%,transparent); }
.cs-shift .lab{ display:block; font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--faint); margin-bottom:12px; }
.cs-shift .ph{ font-size:clamp(20px,2.4vw,30px); font-weight:600; letter-spacing:-.02em; }
.cs-shift .from .ph{ color:var(--muted); text-decoration:line-through; text-decoration-color:color-mix(in srgb,var(--muted) 50%,transparent); }
.cs-shift .to .ph em{ color:var(--accent); }
.cs-shift .ar{ align-self:center; color:var(--accent); flex:none; }
.cs-shift .ar svg{ width:34px; height:34px; }
@media (max-width:640px){ .cs-shift .ar{ transform:rotate(90deg); } }

/* ============================================================
   PHONE FRAME + INTERACTIVE PROTOTYPE
   ============================================================ */
.phone{
  position:relative; width:min(266px,74vw); aspect-ratio:9/19.3; flex:none;
  background:transparent; border-radius:6px; padding:0;
  box-shadow:0 26px 56px -30px rgba(0,0,0,.42);
}
.phone .scr{ position:relative; width:100%; height:100%; border-radius:6px; overflow:hidden; background:#000; }
.phone .scr > img{ width:100%; height:100%; object-fit:cover; object-position:top; }
.phone .scr > image-slot{ display:block; width:100%; height:100%; }
.phone .island{ display:none; }

.proto{ max-width:1080px; margin:0 auto; }
.proto-bar{ display:flex; gap:8px; justify-content:center; flex-wrap:wrap; margin-bottom:clamp(30px,4vw,48px); }
.proto-tab{
  font-size:14px; font-weight:500; letter-spacing:-.01em; color:var(--ink-2);
  border:1px solid var(--line); border-radius:980px; padding:9px 18px; background:var(--bg);
  transition:all .3s var(--ease);
}
.proto-tab:hover{ border-color:var(--ink-2); }
.proto-tab.active{ background:var(--ink); color:var(--bg); border-color:var(--ink); }
.proto-stage{ display:flex; justify-content:center; }
.proto .track{ position:absolute; inset:0; display:flex; transition:transform .55s var(--ease); }
.proto .track > .shotpane{ flex:0 0 100%; width:100%; height:100%; }
.proto .track > .shotpane img{ width:100%; height:100%; object-fit:cover; object-position:top; }
.proto .scr{ cursor:grab; }
.proto .scr.drag{ cursor:grabbing; }
.proto .scr.drag .track{ transition:none; }
.proto-dots{ display:flex; gap:8px; justify-content:center; margin-top:clamp(26px,3vw,38px); }
.proto-dots b{ width:7px; height:7px; border-radius:50%; background:var(--line); transition:.3s var(--ease); cursor:pointer; }
.proto-dots b.on{ background:var(--accent); width:22px; border-radius:980px; }
.proto-hint{ text-align:center; margin-top:18px; font-size:13.5px; color:var(--muted); }
.proto-hint b{ color:var(--ink-2); font-weight:600; }

/* ============================================================
   FEATURE ROWS (copy + phones, parallax)
   ============================================================ */
.cs-feat{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(34px,5vw,80px); align-items:center; max-width:var(--maxw); margin:clamp(70px,9vw,128px) auto 0; padding-inline:var(--gutter); }
.cs-feat.rev .cs-feat-media{ order:-1; }
.cs-feat .fk{ font-family:var(--mono); font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--accent); margin-bottom:18px; }
.cs-feat .fk .num{ color:var(--ink-2); }
.cs-feat h3{ font-size:clamp(30px,3.8vw,52px); font-weight:600; letter-spacing:-.03em; line-height:1.04; }
.cs-feat h3 em{ color:var(--accent); }
.cs-feat p{ font-size:clamp(16px,1.5vw,19px); color:var(--muted); line-height:1.55; margin-top:18px; max-width:40ch; }
.ftags{ display:flex; flex-wrap:wrap; gap:9px; margin-top:26px; }
.ftag{ font-size:13px; font-weight:500; color:var(--ink-2); border:1px solid var(--line); border-radius:980px; padding:7px 14px; transition:all .3s var(--ease); }
.ftag[data-goto]{ cursor:pointer; }
.ftag[data-goto]:hover{ border-color:var(--accent); color:var(--accent); }
.cs-feat-media{ display:flex; justify-content:center; gap:clamp(14px,2vw,26px); }
.cs-feat-media .phone:nth-child(2){ margin-top:clamp(28px,5vw,64px); }
.cs-feat-media.single{ }
@media (max-width:820px){
  .cs-feat{ grid-template-columns:1fr; gap:40px; }
  .cs-feat.rev .cs-feat-media{ order:0; }
  .cs-feat-media .phone:nth-child(2){ margin-top:0; }
}

/* ============================================================
   VISUAL SYSTEM GRID
   ============================================================ */
.dsgrid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(16px,2vw,24px); margin-top:8px; }
.dscard{ background:var(--bg-2); border-radius:var(--radius); padding:clamp(24px,2.6vw,38px); }
.dscard h4{ font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--faint); font-weight:500; margin-bottom:22px; }
.swatches{ display:flex; gap:10px; flex-wrap:wrap; }
.swatch{ width:84px; height:84px; border-radius:16px; display:flex; align-items:flex-end; padding:10px; font-size:11px; font-weight:600; letter-spacing:-.01em; }
.type-spec{ display:flex; flex-direction:column; gap:18px; }
.ts{ display:flex; align-items:baseline; justify-content:space-between; gap:16px; border-bottom:1px solid var(--line-2); padding-bottom:14px; }
.ts .lab{ font-family:var(--mono); font-size:11px; color:var(--faint); flex:none; }
.comp-row{ display:flex; gap:12px; align-items:center; flex-wrap:wrap; }
.mini-btn{ font-size:13px; font-weight:600; border-radius:980px; padding:9px 16px; }
.mini-btn.fill{ background:var(--bridge); color:#fff; }
.mini-btn.out{ border:1px solid var(--line); color:var(--ink-2); }
.mini-card{ display:flex; flex-direction:column; gap:3px; border:1px solid var(--line); border-radius:12px; padding:10px 14px; background:var(--bg); }
.mini-card .mc-t{ font-size:12px; color:var(--muted); }
.mini-card .mc-s{ font-size:13px; font-weight:600; color:var(--ok); }
.prin-list{ display:flex; flex-direction:column; gap:14px; }
.prin-list .p{ display:flex; gap:12px; align-items:center; font-size:15px; color:var(--ink-2); }
.prin-list .p span{ width:7px; height:7px; border-radius:50%; background:var(--accent); flex:none; }
@media (max-width:720px){ .dsgrid{ grid-template-columns:1fr; } }

/* ============================================================
   IMPACT
   ============================================================ */
.cs-impact{ display:grid; grid-template-columns:auto 1fr; gap:clamp(28px,4vw,64px); align-items:center; margin-top:8px; padding:clamp(34px,4vw,56px) 0; border-top:2px solid var(--ink); border-bottom:1px solid var(--line); }
.cs-impact .num{ font-size:clamp(72px,12vw,168px); font-weight:600; letter-spacing:-.05em; line-height:.9; color:var(--accent); display:flex; align-items:flex-start; }
.cs-impact .num .pc{ font-size:.42em; margin-top:.25em; }
.cs-impact .il{ font-size:clamp(22px,2.6vw,34px); font-weight:600; letter-spacing:-.02em; }
.cs-impact .id{ font-size:16px; color:var(--muted); line-height:1.55; margin-top:14px; max-width:46ch; }
@media (max-width:720px){ .cs-impact{ grid-template-columns:1fr; gap:18px; } }
.cs-qual{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(20px,3vw,40px); margin-top:clamp(40px,5vw,64px); }
.cs-q .qt{ font-size:clamp(19px,2vw,24px); font-weight:600; letter-spacing:-.02em; }
.cs-q .qt em{ color:var(--accent); }
.cs-q p{ font-size:15px; color:var(--muted); line-height:1.5; margin-top:12px; }
@media (max-width:720px){ .cs-qual{ grid-template-columns:1fr; gap:26px; } }

/* ============================================================
   BEHIND THE SCENES — v1 panel
   ============================================================ */
.cs-v1{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(40px,6vw,88px); align-items:center; background:var(--bg-2); border-radius:var(--radius); padding:clamp(44px,5.5vw,80px) clamp(32px,4.5vw,72px); overflow:hidden; }
.cs-v1 .v1img{ display:flex; justify-content:center; align-items:center; }
.cs-v1 .v1img .phone{ width:min(284px,72vw); }
.cs-v1 .v1copy{ max-width:30ch; }
.cs-v1 .v1tag{ font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--faint); margin-bottom:18px; }
.cs-v1 h3{ font-size:clamp(28px,3.2vw,44px); font-weight:600; letter-spacing:-.03em; line-height:1.04; }
.cs-v1 h3 em{ color:var(--accent); font-style:normal; }
.cs-v1 p{ font-size:clamp(15px,1.25vw,17px); color:var(--muted); line-height:1.6; margin-top:20px; }
@media (max-width:780px){ .cs-v1{ grid-template-columns:1fr; gap:36px; text-align:center; } .cs-v1 .v1copy{ max-width:none; margin-inline:auto; } }
.roadmap-scroll{ overflow-x:auto; border-radius:var(--radius); background:var(--bg-2); -webkit-overflow-scrolling:touch; }
.roadmap-scroll img{ display:block; width:100%; min-width:1040px; }
.roadmap-scroll::-webkit-scrollbar{ height:8px; }
.roadmap-scroll::-webkit-scrollbar-thumb{ background:var(--line); border-radius:8px; }

/* ============================================================
   NEXT PROJECT
   ============================================================ */
.cs-next{ background:var(--night); color:var(--on-dark); padding:clamp(70px,9vw,120px) 0 clamp(60px,7vw,90px); margin-top:clamp(80px,10vw,140px); }
.cs-next .mono{ font-family:var(--mono); font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--on-dark-mut); }
.cs-next a.nlink{ display:block; margin-top:18px; }
.cs-next .nt{ display:flex; align-items:center; gap:.3em; font-size:clamp(40px,7vw,96px); font-weight:600; letter-spacing:-.035em; line-height:1; color:#fff; transition:color .3s var(--ease); }
.cs-next .nt em{ color:var(--accent-d); }
.cs-next a.nlink:hover .nt{ color:var(--accent-d); }
.cs-next .arr{ display:inline-grid; place-items:center; color:var(--accent-d); transition:transform .4s var(--ease); }
.cs-next .arr svg{ width:.7em; height:.7em; }
.cs-next a.nlink:hover .arr{ transform:translate(6px,-6px); }
.cs-next .next-cover{ margin-top:clamp(30px,4vw,52px); border-radius:var(--radius); overflow:hidden; aspect-ratio:16/8; background:#141416; }
.cs-next .next-cover image-slot, .cs-next .next-cover img{ width:100%; height:100%; object-fit:cover; }

/* ============================================================
   HIGHLIGHTS CAROUSEL  (Apple “Get the highlights” style)
   ============================================================ */
.hl{ width:100%; overflow:hidden; margin-top:clamp(48px,6vw,88px); }
.hl-viewport{ overflow:visible; }
.hl-track{ display:flex; gap:clamp(16px,2vw,30px); transition:transform .66s var(--ease); will-change:transform; touch-action:pan-y; }
.hl-card{
  flex:0 0 auto; height:min(64vh,560px); aspect-ratio:4/5;
  background:var(--bg-2); border-radius:var(--radius); overflow:hidden;
  display:flex; flex-direction:column;
  padding:clamp(24px,2.6vw,40px) clamp(24px,2.6vw,40px) 0;
  opacity:.4; transform:scale(.95); cursor:grab;
  transition:opacity .6s var(--ease), transform .6s var(--ease);
}
.hl-card:active{ cursor:grabbing; }
.hl-card.is-active{ opacity:1; transform:none; }
.hl-k{ font-family:var(--mono); font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--accent); }
.hl-copy p{ font-size:clamp(18px,1.7vw,25px); font-weight:600; letter-spacing:-.025em; line-height:1.16; color:var(--ink); margin-top:11px; max-width:22ch; }
.hl-copy p em{ color:var(--accent); }
.hl-stage{ flex:1; display:flex; justify-content:center; align-items:flex-end; margin-top:clamp(18px,2vw,28px); min-height:0; }
.hl-stage .phone{ width:min(196px,52%); transform:translateY(9%); }
.hl-controls{ display:flex; align-items:center; justify-content:center; gap:16px; margin-top:clamp(34px,4vw,56px); }
.hl-dots{ display:flex; gap:9px; align-items:center; background:var(--bg-2); padding:12px 18px; border-radius:980px; }
.hl-dots b{ width:8px; height:8px; border-radius:50%; background:var(--line); transition:.4s var(--ease); cursor:pointer; }
.hl-dots b.on{ background:var(--accent); width:26px; border-radius:980px; }
.hl-play{ width:46px; height:46px; border-radius:50%; background:var(--bg-2); display:grid; place-items:center; color:var(--ink-2); transition:.3s var(--ease); }
.hl-play:hover{ background:var(--line-2); color:var(--ink); }
.hl-play svg{ width:19px; height:19px; fill:currentColor; }
.hl-play .ic-play{ display:none; }
.hl.paused .hl-play .ic-play{ display:block; }
.hl.paused .hl-play .ic-pause{ display:none; }
@media (max-width:640px){
  .hl-card{ height:auto; flex-basis:78vw; aspect-ratio:4/5; }
  .hl-stage .phone{ width:min(196px,58%); }
}

/* ============================================================
   EDITORIAL KIT v2 — scannable, rhythmic devices
   TL;DR snapshot · stat ticker · pull-quote · sticky split ·
   chip strip · numbered ladder. Used to balance text + visual.
   ============================================================ */

/* ---- TL;DR / "in short" snapshot ---- */
.cs-tldr{ max-width:var(--maxw); margin:clamp(48px,6vw,84px) auto 0; padding-inline:var(--gutter); }
.cs-tldr-in{
  display:grid; grid-template-columns:1.5fr 1fr; gap:clamp(28px,4vw,64px); align-items:stretch;
  background:var(--bg-2); border-radius:var(--radius); padding:clamp(30px,3.6vw,52px);
}
.cs-tldr .tl-k{ font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); }
.cs-tldr .tl-lead{ font-size:clamp(21px,2.3vw,30px); font-weight:600; letter-spacing:-.025em; line-height:1.2; margin:14px 0 22px; max-width:26ch; }
.cs-tldr .tl-lead em{ color:var(--accent); }
.cs-tldr .tl-list{ list-style:none; display:flex; flex-direction:column; gap:13px; margin:0; padding:0; }
.cs-tldr .tl-list li{ position:relative; padding-left:22px; font-size:15.5px; color:var(--ink-2); line-height:1.5; }
.cs-tldr .tl-list li::before{ content:""; position:absolute; left:0; top:.55em; width:7px; height:7px; border-radius:50%; background:var(--accent); }
.cs-tldr .tl-stat{
  display:flex; flex-direction:column; justify-content:center; align-items:flex-start; gap:6px;
  border-left:2px solid var(--accent); padding-left:clamp(22px,2.6vw,36px);
}
.cs-tldr .tl-stat .sv{ font-size:clamp(54px,7vw,104px); font-weight:600; letter-spacing:-.05em; line-height:.86; color:var(--accent); }
.cs-tldr .tl-stat .sl{ font-size:15px; color:var(--ink-2); line-height:1.4; max-width:20ch; }
.cs-tldr .tl-stat .sn{ font-family:var(--mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--faint); }
@media (max-width:760px){ .cs-tldr-in{ grid-template-columns:1fr; gap:28px; } .cs-tldr .tl-stat{ border-left:none; border-top:2px solid var(--accent); padding-left:0; padding-top:24px; } }

/* ---- bold stat ticker band ---- */
.cs-ticker{ max-width:1480px; margin:clamp(56px,7vw,104px) auto 0; padding-inline:var(--gutter); }
.cs-ticker-in{ display:grid; grid-auto-flow:column; grid-auto-columns:1fr; border-top:2px solid var(--ink); border-bottom:1px solid var(--line); }
.cs-tk{ padding:clamp(26px,3vw,44px) clamp(16px,2vw,32px); border-right:1px solid var(--line); }
.cs-tk:last-child{ border-right:none; }
.cs-tk .tv{ font-size:clamp(38px,5.2vw,72px); font-weight:600; letter-spacing:-.045em; line-height:.9; }
.cs-tk .tv em{ color:var(--accent); }
.cs-tk .tl{ font-size:14px; color:var(--muted); line-height:1.4; margin-top:14px; max-width:22ch; }
@media (max-width:760px){ .cs-ticker-in{ grid-auto-flow:row; } .cs-tk{ border-right:none; border-bottom:1px solid var(--line); } .cs-tk:last-child{ border-bottom:none; } }

/* ---- pull-quote / statement break ---- */
.cs-pull{ max-width:1080px; margin:clamp(76px,10vw,140px) auto; padding-inline:var(--gutter); text-align:center; }
.cs-pull .pq-mark{ display:block; font-family:Georgia, "Times New Roman", serif; font-size:clamp(60px,9vw,120px); line-height:.5; color:var(--accent); height:.5em; }
.cs-pull blockquote{ font-size:clamp(28px,4.4vw,58px); font-weight:600; letter-spacing:-.03em; line-height:1.1; margin:0; }
.cs-pull blockquote em{ color:var(--accent); }
.cs-pull cite{ display:block; font-family:var(--mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--faint); font-style:normal; margin-top:30px; }

/* ---- sticky split: prose scrolls past a pinned visual ---- */
.cs-stick{ max-width:var(--maxw); margin:clamp(56px,7vw,104px) auto 0; padding-inline:var(--gutter);
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(34px,5vw,80px); align-items:stretch; }
.cs-stick.rev .cs-stick-media{ order:-1; }
.cs-stick-media{ position:static; border-radius:var(--radius); overflow:hidden; background:var(--bg-2); }
.cs-stick-media img, .cs-stick-media image-slot{ display:block; width:100%; height:100%; }
.cs-stick-copy .cs-idx{ margin-bottom:16px; }
@media (max-width:860px){ .cs-stick{ grid-template-columns:1fr; gap:28px; align-items:start; } .cs-stick-media{ aspect-ratio:4/3; } .cs-stick.rev .cs-stick-media{ order:0; } }

/* ---- keyword chip strip (replaces texty bullet lists) ---- */
.cs-chipstrip{ display:flex; flex-wrap:wrap; gap:10px; margin-top:clamp(26px,3.2vw,42px); }
.cs-chipstrip .ck{ display:inline-flex; align-items:center; gap:9px; font-size:14.5px; font-weight:500; color:var(--ink-2); border:1px solid var(--line); border-radius:980px; padding:11px 19px; background:var(--bg); transition:border-color .3s var(--ease), color .3s var(--ease); }
.cs-chipstrip .ck::before{ content:""; width:7px; height:7px; border-radius:50%; background:var(--accent); flex:none; }
.cs-chipstrip .ck:hover{ border-color:var(--accent); color:var(--ink); }