/* ============================================================
   v2.css — loaded ONLY by index_v2.html.
   Design ported from the Claude Design draft (NS-site-cd.html).

   Everything is scoped to .nds-scope so nothing leaks into
   index.html / index_B.html, which share assets/css/styles.css.
   The draft's base tokens are identical to styles.css :root, so
   only the tokens styles.css lacks are declared here.
   ============================================================ */

.nds-scope{
  --cyan-deep:#006e6e;
  --font-display:"Agrandir Wide","Outfit","Manrope","Inter",system-ui,-apple-system,sans-serif;
  --text-section:clamp(34px,4.4vw,60px);
  --text-eyebrow:12px;
  --text-lead:clamp(16px,1.25vw,19px);
  --tracking-eyebrow:0.22em;
  --tracking-tight:-0.02em;
  --leading-display:1.05;
  --leading-lead:1.55;
  --r-pill:999px;
  --text-primary:var(--text);
  --text-secondary:var(--muted);
}
.nds-scope.on-light,
.nds-scope .on-light{
  --text-primary:#000000;
  --text-secondary:rgba(0,0,0,0.62);
}

/* ---------- ported primitives ---------- */
.nds-eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--font-display);font-weight:500;
  font-size:var(--text-eyebrow);letter-spacing:var(--tracking-eyebrow);
  text-transform:uppercase;color:var(--cyan-hi);margin-bottom:22px;
}
.nds-eyebrow::before{content:"";width:28px;height:1px;background:var(--cyan);}
.nds-section-title{
  font-family:var(--font-display);font-weight:500;
  font-size:var(--text-section);line-height:var(--leading-display);
  letter-spacing:var(--tracking-tight);margin:0 0 18px;
  color:var(--text-primary);text-wrap:balance;
}
.nds-section-title em{font-style:normal;color:var(--cyan-hi);display:block;}
.nds-section-lead{
  font-size:var(--text-lead);color:var(--text-secondary);
  max-width:720px;line-height:var(--leading-lead);margin:0 auto;
}
.nds-section-lead + .nds-section-lead{margin-top:18px;}

/* ---------- split hero ---------- */
/* Black strip the transparent fixed header sits on. Height tracks the header
   (14px padding + 71px pill + 14px padding = 99px). */
/* styles.css sets a global section{padding:90px 0}. The hero is edge to edge. */
.nds-hero-wrap{padding:0;}
.nds-hero-bar{background:#000;height:99px;}
.nds-hero{display:grid;grid-template-columns:1fr 1fr;align-items:stretch;min-height:calc(82vh - 99px);}
@media (max-width:900px){
  .nds-hero{grid-template-columns:1fr;min-height:0;}
  .nds-hero-art{min-height:300px;}
}
@media (max-width:720px){
  .nds-hero-bar{height:86px;}
}

/* ---------- Read This First panel ----------
   The draft renders this section dark, but only because that whole site is
   dark. This page runs body[data-mood="daylight"], which remaps --bg to beige
   and --muted to black, so a transplanted dark band would be a lone inversion.
   It uses the same white panel treatment as .ccs in daylight instead.
   To restore the draft's dark treatment, swap the .nds-panel block for:
     .nds-panel{background:#050505;--text:#fff;--muted:rgba(255,255,255,0.66);
                --line:rgba(255,255,255,0.08);--cyan-hi:#00b0b0;}
     .nds-panel .nds-quote{color:#fff;}
     .nds-panel .spots-left{color:#ff6f62;}
     .nds-panel .spots-bar{background:rgba(255,255,255,0.16);}                */
.nds-panel{background:#ffffff;}
.nds-quote{
  margin:44px auto 0;max-width:820px;
  font-family:var(--font-display);font-weight:500;
  font-size:clamp(22px,2.4vw,32px);line-height:1.35;
  color:var(--text-primary);
}

@keyframes nero-dots{0%{background-position:0 0;}100%{background-position:28px 28px;}}
@keyframes nero-word-in{0%{opacity:0;transform:translateY(14px);}100%{opacity:1;transform:translateY(0);}}

/* ---------- nav over the black hero bar ----------
   main.js sets data-compact = scrollY > 32. While it is "false" the pill is
   transparent and sits on the black bar, so its dark-on-light nav would be
   invisible. Lift it to white for that state only; the compact white-glass
   pill keeps the stylesheet defaults. */
.pill[data-compact="false"] .pill-logo{color:#00b0b0;}
.pill[data-compact="false"] .pill-nav a{color:rgba(255,255,255,0.82);}
.pill[data-compact="false"] .pill-nav a:hover{color:#fff;}
.pill[data-compact="false"] .pill-burger span{background:#fff;}
@media (max-width:900px){
  /* mobile menu opens into a light glass card, so links go dark again there */
  .pill[data-compact="false"] .pill-nav[data-open="true"] a{color:#000;}
}

/* ---------- vertical rhythm (v2 only) ----------
   styles.css sets section{padding:90px 0}, so neighbours sit 180px apart.
   Tightened here; the hero stays edge to edge and .vsl matches so the gap
   above the video box equals the gap below it. */
body > section{padding:64px 0;}
.vsl{padding:64px 0;}
.nds-hero-wrap{padding:0;}
@media (max-width:720px){
  body > section{padding:44px 0;}
  .vsl{padding:44px 0;}
  .nds-hero-wrap{padding:0;}
}

/* ---------- hero wave ----------
   Container for dotted-surface-v2.js. The three.js canvas fills it. */
.hero-wave{position:absolute;inset:0;}
.hero-wave canvas{display:block;width:100%;height:100%;}

/* ---------- VSL panel ----------
   styles.css gives .vsl-inner a white-to-beige gradient in daylight; flatten
   it to pure white, and match the section behind it. */
.vsl{background:#ffffff;}
body[data-mood="daylight"] .vsl-inner{background:#f8f3ec;}

/* ---------- FAQ toggle ----------
   styles.css fills the open toggle with var(--cyan). The icon strokes
   currentColor, so a dark glyph landed on a dark fill and vanished, taking the
   plus-to-X rotation with it. Keep the rotation, drop the colour change. */
.faq-item[open] .faq-toggle{
  background:transparent;
  border-color:var(--line-2);
  rotate:45deg;                 /* individual property; the transform shorthand is inert here */
}
.faq-toggle{transition:rotate .25s ease, background .2s ease, border-color .2s ease;}