/* ============================================================
   OUR STORY / NEXT — scroll-journey redesign (story-next.css)
   Loaded AFTER styles.css. Only touches our-story-next.html.
   Tercero CI: charcoal-navy + single teal, Archivo family,
   JetBrains Mono wayfinding, flat, hairline rules, sharp corners.

   Motion model: each [data-scene] is a tall section with a sticky
   100vh .stage inside. story-next.js writes the scene's scroll
   progress to --p (0..1) and flips phase classes (.q1/.gp1/.sg1…).
   ============================================================ */

.st2{--vh:100svh;}

/* ---------- shared scene scaffolding ---------- */
.sc{position:relative;}
.sc .stage{position:sticky;top:0;height:100vh;height:var(--vh);overflow:hidden;
  display:flex;align-items:center;justify-content:center;}

/* ---------- mono field-log layer ---------- */
.fieldnote{display:flex;flex-wrap:wrap;align-items:center;gap:.7em 1em;
  font-family:var(--mono);font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--teal);font-weight:500;margin-bottom:2rem;}
.fieldnote .sep{width:34px;height:1px;background:var(--rule-d);flex:none;}
.fieldnote span:not(.sep):not(:first-child){color:var(--snow-soft);}

.chap{display:flex;align-items:baseline;gap:1em;font-family:var(--mono);
  font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;margin-bottom:2.2rem;}
.chap b{color:var(--teal);font-weight:600;}
.chap span{color:var(--snow-soft);position:relative;padding-left:1em;}
.chap span::before{content:"";position:absolute;left:0;top:50%;width:1px;height:1em;
  transform:translateY(-50%);background:var(--rule-d);}

/* ============================================================
   SCENE 01 — CÓRDOBA NIGHT
   ============================================================ */
.sc-hero{height:230vh;}
.sc-hero .stage{background:
  radial-gradient(120% 90% at 50% 110%,#13212e 0%,var(--deep) 58%);}
.stars{position:absolute;inset:0;width:100%;height:100%;}
.hills{position:absolute;inset:auto 0 0 0;height:34vh;pointer-events:none;}
.hill{position:absolute;left:-2%;right:-2%;width:104%;bottom:0;height:100%;}
.hill path{fill:#0a141c;}
.hill.h3{opacity:.55;transform:translateY(calc(var(--p,0)*-3vh));}
.hill.h3 path{fill:#16242f;}
.hill.h2{opacity:.8;transform:translateY(calc(var(--p,0)*-6vh));}
.hill.h2 path{fill:#101c26;}
.hill.h1{transform:translateY(calc(var(--p,0)*-10vh));}
.hero-copy{position:relative;text-align:left;width:100%;
  opacity:calc(1 - var(--p,0)*1.7);
  transform:translateY(calc(var(--p,0)*-8vh));}
.hero-copy h1{font-size:clamp(2.6rem,1.4rem + 6vw,5.6rem);max-width:14ch;}
.hero-copy .lead{margin-top:1.6rem;max-width:52ch;}
.cue{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:.7em;
  font-family:var(--mono);font-size:.66rem;letter-spacing:.3em;text-transform:uppercase;
  color:var(--snow-soft);opacity:calc(1 - var(--p,0)*4);}
.cue i{width:1px;height:44px;background:linear-gradient(var(--teal),transparent);
  display:block;animation:cueDrop 2.2s var(--e-out) infinite;}
@keyframes cueDrop{0%{transform:scaleY(0);transform-origin:top}45%{transform:scaleY(1);transform-origin:top}55%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* ============================================================
   EDITORIAL PASSAGES
   ============================================================ */
.sc-ed{padding:clamp(5rem,12vh,9rem) 0;position:relative;background:var(--deep);}
.ed-col{max-width:62ch;}
.ed-col p{font-size:clamp(1.06rem,1rem + .32vw,1.22rem);line-height:1.78;color:var(--snow);margin:0 0 1.5rem;}
.ed-col p b{font-weight:600;}
.ed-col p.first::first-letter{font-family:var(--exp);font-weight:900;float:left;
  font-size:3.6rem;line-height:.8;padding:.06em .14em 0 0;color:var(--teal);}
.ed-col .said{font-weight:600;font-size:1.14rem;}
.ed-col .beat{font-family:var(--exp);font-weight:700;
  font-size:clamp(1.4rem,1rem + 1.5vw,2.05rem);line-height:1.3;letter-spacing:-.01em;
  margin:2.2rem 0 1.7rem;}

/* ============================================================
   SCENE 02 — THE ANSWER (quote)
   ============================================================ */
.sc-quote{height:260vh;}
.sc-quote .stage{background:
  radial-gradient(70% 60% at 50% 46%,rgba(0,184,148,.07),transparent 70%),var(--deep);}
.q-wrap{text-align:center;}
.q-line{font-family:var(--exp);font-weight:900;letter-spacing:-.02em;line-height:1.02;
  opacity:0;transform:translateY(26px) scale(.98);
  transition:opacity .7s var(--e-out),transform .7s var(--e-out);}
.q-no{font-size:clamp(3.4rem,2rem + 9vw,9rem);color:var(--snow);}
.q-gpt{font-size:clamp(2.4rem,1.4rem + 6.4vw,6.4rem);color:var(--teal);margin-top:.15em;}
.q-who{font-family:var(--mono);font-size:.74rem;letter-spacing:.24em;text-transform:uppercase;
  color:var(--snow-soft);margin-top:2.4rem;opacity:0;transition:opacity .8s var(--e-out) .1s;}
.sc-quote.q1 .q-no{opacity:1;transform:none;}
.sc-quote.q2 .q-gpt{opacity:1;transform:none;}
.sc-quote.q3 .q-who{opacity:1;}

/* ============================================================
   SCENE 03 — THE GAP (route arc + miles counter)
   ============================================================ */
.sc-gap{height:340vh;}
.sc-gap .stage{background:var(--deep);}
.gap-inner{width:100%;display:flex;flex-direction:column;justify-content:center;gap:1rem;padding-top:84px;}
.gap-inner .chap{margin-bottom:1rem;}
.route{position:relative;width:100%;max-width:980px;margin:0 auto;}
.route svg{display:block;width:100%;height:auto;overflow:visible;}
.r-base{fill:none;stroke:var(--rule-d);stroke-width:1;stroke-dasharray:.008 .012;}
.r-draw{fill:none;stroke:var(--teal);stroke-width:2;stroke-linecap:round;
  stroke-dasharray:1;stroke-dashoffset:calc(1 - var(--dp,0));}
.r-node{fill:var(--deep);stroke:var(--snow-soft);stroke-width:2;}
.r-node.r-a{fill:var(--teal);stroke:var(--teal);}
.r-node.r-b{stroke:var(--snow-soft);}
.sc-gap.gp-done .r-node.r-b{fill:var(--teal);stroke:var(--teal);transition:fill .5s,stroke .5s;}
.r-label{position:absolute;bottom:2%;display:flex;flex-direction:column;gap:.35em;max-width:220px;}
.r-label b{font-family:var(--mono);font-size:.78rem;letter-spacing:.2em;text-transform:uppercase;color:var(--snow);font-weight:600;}
.r-label span{font-size:.85rem;line-height:1.45;color:var(--snow-soft);}
.r-la{left:0;transform:translateY(115%);}
.r-lb{right:0;text-align:right;transform:translateY(115%);}
.r-count{position:absolute;left:50%;top:-6%;transform:translateX(-50%);text-align:center;white-space:nowrap;}
.r-count .n{display:block;font-family:var(--mono);font-weight:600;font-size:clamp(1.9rem,1rem + 3.4vw,3.4rem);
  letter-spacing:-.01em;color:var(--snow);font-variant-numeric:tabular-nums;}
.r-count .u{display:block;font-family:var(--mono);font-size:.68rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--snow-soft);margin-top:.6em;}
.gap-beats{position:relative;width:100%;margin:5.5rem auto 0;max-width:56ch;min-height:9.5em;text-align:center;}
.g-beat{position:absolute;inset:0;margin:0 auto;font-size:clamp(1.06rem,1rem + .4vw,1.28rem);
  line-height:1.7;color:var(--snow);opacity:0;transform:translateY(18px);
  transition:opacity .6s var(--e-out),transform .6s var(--e-out);}
.g-beat.big{font-family:var(--exp);font-weight:800;font-size:clamp(2rem,1.2rem + 3.4vw,3.6rem);
  line-height:1.1;letter-spacing:-.02em;color:var(--teal);display:flex;align-items:flex-start;justify-content:center;}
.sc-gap.gp1 .gb1{opacity:1;transform:none;}
.sc-gap.gp2 .gb1{opacity:0;transform:translateY(-14px);}
.sc-gap.gp2 .gb2{opacity:1;transform:none;}
.sc-gap.gp3 .gb2{opacity:0;transform:translateY(-14px);}
.sc-gap.gp3 .gb3{opacity:1;transform:none;}

/* ============================================================
   SCENE 04 — SIGNAL FROM NOISE (canvas signature)
   ============================================================ */
.sc-signal{height:380vh;}
.sc-signal .stage{background:var(--deep);}
.sig{position:absolute;inset:0;width:100%;height:100%;}
.sig-cap{position:absolute;left:50%;bottom:9vh;transform:translate(-50%,14px);
  width:min(92vw,640px);text-align:center;opacity:0;
  transition:opacity .6s var(--e-out),transform .6s var(--e-out);pointer-events:none;}
.sig-cap .chap{justify-content:center;margin-bottom:1.2rem;}
.sig-cap h2{font-size:clamp(1.7rem,1.1rem + 2.6vw,2.9rem);}
.sig-cap p.muted{margin-top:1rem;font-size:clamp(.98rem,.92rem + .3vw,1.12rem);line-height:1.65;}
.sc-signal.sg1 .sig-c1{opacity:1;transform:translate(-50%,0);}
.sc-signal.sg2 .sig-c1,.sc-signal.sg3 .sig-c1{opacity:0;transform:translate(-50%,-14px);}
.sc-signal.sg2 .sig-c2{opacity:1;transform:translate(-50%,0);}
.sc-signal.sg3 .sig-c2{opacity:0;transform:translate(-50%,-14px);}
.sc-signal.sg3 .sig-c3{opacity:1;transform:translate(-50%,0);}
.sig-c3 h2{color:var(--teal);}

/* ============================================================
   FOUNDERS
   ============================================================ */
.sc-founders{padding:clamp(5rem,12vh,9rem) 0;background:var(--deep-2);
  border-top:1px solid var(--rule-d);border-bottom:1px solid var(--rule-d);}
.sc-founders h2{max-width:20ch;}
.sc-founders .lead{margin-top:1rem;}
.f2-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(18px,2.4vw,28px);margin-top:clamp(2.4rem,5vw,3.6rem);}
.f2{border:1px solid var(--rule-d);background:var(--deep);display:flex;flex-direction:column;
  transition:border-color .35s,transform .35s var(--e-out);}
.f2:hover{border-color:color-mix(in srgb,var(--teal) 45%,transparent);transform:translateY(-3px);}
.f2-photo{aspect-ratio:5/4;overflow:hidden;border-bottom:1px solid var(--rule-d);
  background:linear-gradient(150deg,var(--deep-3),var(--deep-2));}
.f2-photo img{width:100%;height:100%;object-fit:cover;object-position:center 22%;
  filter:saturate(.92);transition:transform .6s var(--e-out);}
.f2:hover .f2-photo img{transform:scale(1.025);}
.f2-body{padding:clamp(1.3rem,2.4vw,1.8rem);display:flex;flex-direction:column;gap:.55rem;flex:1;}
.f2-body h3{font-family:var(--exp);font-weight:800;font-size:clamp(1.25rem,1rem + 1vw,1.6rem);letter-spacing:-.01em;}
.f2-role{font-family:var(--mono);font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--teal);}
.f2-bio{font-size:.97rem;line-height:1.65;color:var(--snow-soft);margin-top:.35rem;}
.f2 .f-link{margin-top:auto;align-self:flex-start;margin-top:1.1rem;}

/* ============================================================
   BARBER CARD (ported from story.css, unchanged look)
   ============================================================ */
.sc-barber{padding:clamp(4rem,10vh,7rem) 0;background:var(--deep);}
.barber{max-width:62ch;margin:0 auto;border:1px solid var(--rule-l);background:var(--cloud);color:var(--ink);
  border-radius:6px;padding:clamp(1.5rem,3vw,2.1rem);display:grid;grid-template-columns:46px 1fr;gap:1.1rem 1.2rem;
  align-items:start;box-shadow:0 24px 50px -34px rgba(0,0,0,.5);position:relative;overflow:hidden;}
.barber::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(60% 120% at 100% -10%,rgba(0,184,148,.12),transparent 60%);}
.barber .b-ic{position:relative;width:46px;height:46px;border-radius:4px;display:flex;align-items:center;justify-content:center;
  color:var(--teal-deep);border:1px solid color-mix(in srgb,var(--teal) 42%,transparent);background:color-mix(in srgb,var(--teal) 12%,transparent);}
.barber .b-ic svg{width:24px;height:24px;}
.barber .b-tag{position:relative;font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--teal-deep);}
.barber h3{position:relative;font-family:var(--exp);font-weight:800;font-size:clamp(1.2rem,1rem + .9vw,1.55rem);
  letter-spacing:-.01em;color:var(--ink);margin:.3rem 0 .5rem;}
.barber p{position:relative;font-size:.98rem;line-height:1.6;color:var(--ink-soft);margin:0;}
.barber .b-link{position:relative;grid-column:1 / -1;margin-top:.4rem;display:inline-flex;align-items:center;gap:.5em;
  align-self:start;justify-self:start;font-weight:700;font-size:.94rem;color:var(--teal-deep);}
.barber .b-link .arw{transition:transform .3s var(--e-out);}
.barber .b-link:hover .arw{transform:translate(3px,-3px);}

/* f-link (borrowed from story.css so founders keep the site pattern) */
.f-link{display:inline-flex;align-items:center;gap:.5em;font-family:var(--mono);font-size:.74rem;
  letter-spacing:.04em;color:var(--snow-soft);border:1px solid var(--rule-d);
  padding:.5em .85em;border-radius:3px;transition:color .25s,border-color .25s,background .25s,transform .25s var(--e-out);}
.f-link svg{width:14px;height:14px;flex:none;}
.f-link:hover{color:var(--teal);border-color:color-mix(in srgb,var(--teal) 50%,transparent);
  background:rgba(0,184,148,.06);transform:translateY(-1px);}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:860px){
  .f2-grid{grid-template-columns:1fr;}
  .r-label{position:static;transform:none;max-width:none;margin-top:.6rem;}
  .r-lb{text-align:left;}
  .route{display:flex;flex-direction:column;}
  .r-count{position:static;transform:none;margin:1rem 0 .4rem;white-space:normal;}
  .gap-beats{margin-top:2.6rem;min-height:12.5em;}
  .sc-gap{height:300vh;}
}
@media (max-width:560px){
  .barber{grid-template-columns:1fr;}
  .barber .b-ic{margin-bottom:-.2rem;}
  .fieldnote{gap:.5em .8em;font-size:.62rem;}
  .fieldnote .sep{display:none;}
  .hero-copy h1 br{display:none;}
}

/* ============================================================
   REDUCED MOTION — everything static at its final state
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  .sc{height:auto!important;}
  .sc .stage{position:relative;height:auto;min-height:60vh;padding:5rem 0;}
  .hero-copy,.cue{opacity:1;transform:none;}
  .cue{display:none;}
  .hill{transform:none!important;}
  .q-line,.q-who{opacity:1!important;transform:none!important;}
  .r-draw{stroke-dashoffset:0;}
  .g-beat{position:static;opacity:1!important;transform:none!important;margin-bottom:1.4rem;}
  .gap-beats{min-height:0;}
  .sig-cap{position:static;opacity:1!important;transform:none!important;margin:1.2rem auto;}
  .sc-signal .stage{display:flex;flex-direction:column;justify-content:center;}
  .f2:hover{transform:none;}
  .f-link:hover,.barber .b-link:hover .arw{transform:none!important;}
}