/* ==========================================================================
   NSR prototype - home page
   hero stair, doors, pinned pillars strip, approach, light factual zone, decision, founders, FAQ, closing, footer
   ========================================================================== */

/* ---------- hero ------------------------------------------------------------ */
.hero { position: relative; height: calc(100vh - var(--frame) * 2); height: calc(100svh - var(--frame) * 2); min-height: 600px; --hero-fs: min(5.3vw, 15vh, 132px); --hero-fs: min(5.3vw, 15svh, 132px); }
#topline { top: calc(46px - var(--frame)); }
.hero-stack { position: absolute; left: var(--col); bottom: 8vh; bottom: 8svh; width: calc(100% - var(--col) * 2); }
.hero-title { display: block; }
.hl { position: relative; display: flex; line-height: 1; }
.hl-1 { margin-left: 0.045em; } /* optical: the Y's overhang would otherwise sit left of the logo's edge */
.hl-2, .hl-3, .hl-4 { margin-left: 3.6em; } /* the first line hangs left; the other three share one indent, so the pink sentence sits under the white one's second line */
.word { position: relative; display: inline-block; white-space: nowrap; }
.word.accent { color: var(--accent); }
.hero-echo { pointer-events: none; }
.hero-echo::before { content: attr(data-t); }
.hero-aside {
  position: absolute;
  right: var(--col);
  bottom: calc(8vh + var(--hero-fs) * 3 + var(--hero-fs) * 0.14);
  bottom: calc(8svh + var(--hero-fs) * 3 + var(--hero-fs) * 0.14); /* sits on the first line's baseline (three lines of 1em stand below it), clear of the second line */
  width: min(30vw, 440px);
  display: flex;
  flex-direction: column;
  gap: 26px;
}
.hero-lede { font-size: clamp(16px, 1.25vw, 19px); line-height: 1.5; text-wrap: balance; }
.hero-ctas { gap: 10px; }
.gl-still { display: none; position: absolute; left: 5%; bottom: 5%; width: min(30vw, 430px); height: auto; }
html.no-webgl .gl-still { display: block; }

@media (min-width: 769px) and (max-height: 820px) {
  .hero-lede { font-size: 15px; line-height: 1.45; }
  .hero-aside { gap: 20px; }
  .hero-ctas .btn { min-height: 46px; padding: 0 16px; font-size: 15px; }
}
/* tablets: the column moves above the headline on the left, where the stair leaves room */
@media (min-width: 769px) and (max-width: 1180px) {
  .hero-aside { right: auto; left: var(--col); bottom: auto; top: 122px; width: min(54vw, 540px); }
}
/* ...and in a short window of that width (a small laptop, a tablet on its side) the headline gives up some height instead of running up into the buttons */
@media (min-width: 769px) and (max-width: 1180px) and (max-height: 700px) {
  .hero { --hero-fs: min(5.3vw, 11.5vh); --hero-fs: min(5.3vw, 11.5svh); }
}

/* ---------- section scaffolding ------------------------------------------------ */
.inner-pad { padding-top: clamp(110px, 17vh, 190px); padding-bottom: clamp(110px, 17vh, 190px); position: relative; }
.sec-head { display: grid; grid-template-columns: calc(var(--col) * 1.6) minmax(0, 1fr); gap: 0 calc(var(--col) * 0.5); align-items: start; margin-bottom: clamp(48px, 8vh, 96px); }
.sec-head .idx { padding-top: 1.4em; }
.sec-head .idx::before { content: ""; display: inline-block; width: 28px; height: 1px; margin-right: 12px; vertical-align: middle; background: var(--accent); transform: translateY(-1px); }
.sec-head h2 { max-width: 13.875em; } /* em, not ch: 15ch of Unbounded 700 (digit = .925em); the fallback face has a narrower 0, which made every ch width ~19% short before the font arrived */
.text-link { font-size: 17px; }
em { font-style: normal; }

/* ---------- A2 two doors -------------------------------------------------------- */
.door-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
.door { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 18px; padding: 40px calc(var(--col) * 1) 8px 0; }
.door + .door { padding: 40px 0 8px calc(var(--col) * 1); border-left: 1px solid var(--hair-strong); }
.door p { max-width: 34em; }
.door .text-link { margin-top: auto; padding-top: 6px; }
.door .text-link::after { content: ""; position: absolute; inset: 0; }
.door-note { margin-top: clamp(40px, 6vh, 64px); font-size: 19px; }


/* ---------- A3 pillars: a pinned horizontal strip on desktop, a stacked list elsewhere -------------------------------- */
.pillars { position: relative; padding: clamp(110px, 17vh, 190px) var(--pad-x); }
.pillars-strip { position: relative; z-index: 1; display: flex; flex-direction: column; gap: clamp(48px, 8vh, 96px); }
.pillars-intro { display: grid; gap: 22px; justify-items: start; max-width: 62rem; }
.pillars-intro .idx::before { content: ""; display: inline-block; width: 28px; height: 1px; margin-right: 12px; vertical-align: middle; background: var(--accent); transform: translateY(-1px); }
.pillars-intro h2 { max-width: 12.95em; } /* 14ch of Unbounded 700 */
.pillars-intro .f-lede { max-width: 40rem; }
.pillar-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--col); }
.pillar { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.pillar .pnum { font-family: var(--f-index); font-weight: var(--w-label); font-size: 12px; line-height: 1; letter-spacing: 0.08em; color: var(--meta); font-variant-numeric: tabular-nums; }
.pillar p { max-width: 32em; }

/* rich desktop: the section is pinned and a strip of photograph cards slides across it */
html.js:not(.native) .pillars { height: calc(100vh - var(--frame) * 2); height: calc(100svh - var(--frame) * 2); padding: 0; overflow: hidden; }
html.js:not(.native) .pillars-strip { position: absolute; left: 0; top: 0; height: 100%; flex-direction: row; align-items: center; gap: calc(var(--col) * 1.4); padding: 0 var(--pad-x); width: max-content; will-change: transform; }
html.js:not(.native) .pillars-intro { flex: 0 0 calc(var(--col) * 10); gap: 18px; }
html.js:not(.native) .pillars-intro h2 { font-size: clamp(28px, 3.1vw, 56px); max-width: 12.025em; } /* 13ch of Unbounded 700 */
html.js:not(.native) .pillars-intro .f-lede { font-size: clamp(17px, 1.25vw, 21px); }
html.js:not(.native) .pillar-list { display: flex; gap: calc(var(--col) * 1.4); }
html.js:not(.native) .pillar { flex: 0 0 calc(var(--col) * 6.2); min-height: 0; }
html.js:not(.native) .pillar.is-active .pnum { color: var(--fg); }

/* ---------- A4 approach ------------------------------------------------------------ */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(var(--col) * 0.8); }
.step p { max-width: 30em; }
.step strong { display: block; margin-bottom: 14px; color: var(--fg); }


/* rich desktop: the approach is pinned. The three steps share one stage; a single signal line goes from noise to order to ticks as you scroll */
html.js:not(.native) .approach { height: calc(100vh - var(--frame) * 2); height: calc(100svh - var(--frame) * 2); padding-top: clamp(96px, 13vh, 150px); padding-bottom: 7vh; padding-bottom: 7svh; display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; }
html.js:not(.native) .approach .sec-head { margin-bottom: 0; }
html.js:not(.native) .steps { position: relative; display: grid; grid-template-columns: 1fr; gap: 0; }
html.js:not(.native) .step { grid-area: 1 / 1; }
html.js:not(.native) .step strong { font-size: clamp(24px, 2.7vw, 48px); line-height: 1.04; margin-bottom: 18px; }
html.js:not(.native) .step p { max-width: 46rem; }
html.js:not(.native) .step p .f-body { display: block; max-width: 34rem; font-size: 18px; }

/* ---------- A5 / A6: the factual zone, on paper ------------------------------------------------ */
.expect-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(var(--col) * 0.8); }
.expect-row { border-top: 1.5px solid var(--fg); padding-top: 24px; display: flex; flex-direction: column; gap: 18px; }
.expect-row dt { font-size: clamp(22px, 2.1vw, 36px); line-height: 1.06; color: var(--fg); }
.expect-row dd { max-width: 30em; }

.relation-lede { margin-bottom: clamp(36px, 5vh, 56px); max-width: 44rem; }
.rel-rows { border-bottom: 1px solid var(--hair-strong); }
.rel-row { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: calc(var(--col) * 0.8); align-items: center; padding: 30px 0; border-top: 1px solid var(--hair-strong); }
.rel-text { display: grid; gap: 8px; }
.rel-text p { max-width: 40em; }
.rel-text strong { color: var(--fg); }
.rel-term { margin: 30px 0 22px; max-width: 44rem; }


/* rich desktop: project or ongoing is pinned too; the three arrangements arrive one after another */
html.js:not(.native) .relation { height: calc(100vh - var(--frame) * 2); height: calc(100svh - var(--frame) * 2); padding-top: clamp(92px, 12vh, 140px); padding-top: clamp(92px, 12svh, 140px); padding-bottom: 5vh; padding-bottom: 5svh; display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; }
html.js:not(.native) .relation .sec-head { margin-bottom: 0; }
html.js:not(.native) .relation .sec-head h2 { font-size: clamp(28px, 3.7vw, 68px); }
html.js:not(.native) .relation-lede { margin-bottom: 0; }
html.js:not(.native) .rel-row { padding: 16px 0; }
html.js:not(.native) .rel-term { margin: 14px 0 12px; }

/* ---------- A7 decide ------------------------------------------------------------------- */
.decide-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: calc(var(--col) * 0.4); align-items: start; border-top: 1px solid var(--hair-strong); padding-top: clamp(40px, 6vh, 72px); }
.decide h2 { grid-column: 1 / span 6; max-width: 10ch; }
.decide-body { grid-column: 8 / span 5; display: grid; gap: 22px; }
.decide-body .ctas { margin-top: 10px; gap: 26px; align-items: center; }

/* ---------- A8 founders ------------------------------------------------------------------ */
.founders-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: calc(var(--col) * 0.4); align-items: center; }
.founders-text { grid-column: 1 / span 6; display: grid; gap: 22px; justify-items: start; }
.founders-text .idx::before { content: ""; display: inline-block; width: 28px; height: 1px; margin-right: 12px; vertical-align: middle; background: var(--accent); transform: translateY(-1px); }
.founders-text h2 { max-width: 11.1em; } /* 12ch of Unbounded 700 */

/* ---------- A9 FAQ -------------------------------------------------------------------------- */
.faq-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: calc(var(--col) * 0.4); }
.faq h2 { grid-column: 1 / span 5; font-size: clamp(56px, 9vw, 150px); line-height: 1; }
.faq-list { grid-column: 6 / span 7; }
.faq details { border-bottom: 1px solid var(--hair-strong); }
.faq details:first-child { border-top: 1px solid var(--hair-strong); }
.faq summary {
  position: relative;
  list-style: none;
  padding: 26px 56px 26px 0;
  font-family: var(--f-display);
  font-weight: var(--disp-wght);
  font-stretch: var(--disp-wdth);

  letter-spacing: -0.01em;
  font-size: clamp(16px, 1.3vw, 21px);
  line-height: 1.4;
  color: var(--fg);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after, .faq summary::before { content: ""; position: absolute; right: 8px; top: 50%; width: 16px; height: 1.5px; margin-top: -0.75px; background: var(--fg); transition: transform 0.18s var(--e-ui); }
.faq summary::before { transform: rotate(90deg); }
.faq details[open] summary::before { transform: rotate(0); }
.faq details p { padding: 0 56px 28px 0; max-width: 42em; animation: faq-in 0.26s var(--e-out); }
@keyframes faq-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }

/* ---------- A10 closing ------------------------------------------------------------------------- */
.closing { overflow: hidden; min-height: calc(100vh - var(--frame) * 2); min-height: calc(100svh - var(--frame) * 2); display: flex; align-items: center; }
.closing-inner { position: relative; z-index: 1; width: 100%; }
.closing-h { font-size: clamp(32px, 5.4vw, 100px); line-height: 1.04; max-width: 10.4062em; margin-bottom: 30px; }
.closing-lede { margin-bottom: 36px; max-width: 38rem; }

/* ---------- footer --------------------------------------------------------------------------------- */
.site-footer { padding-top: 72px; padding-bottom: 56px; border-top: 1px solid var(--hair); }
.foot-top { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: calc(var(--col) * 0.4); align-items: start; margin-bottom: 56px; }
.foot-logo { grid-column: 1 / span 4; color: var(--fg); display: block; width: clamp(190px, 17vw, 250px); }
.foot-logo svg { display: block; width: 100%; height: auto; }
.foot-desc { grid-column: 6 / span 6; max-width: 40rem; color: var(--meta); }
.foot-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(var(--col) * 0.5); padding-top: 32px; border-top: 1px solid var(--hair); }
.foot-h { margin: 0 0 16px; font-family: var(--f-index); font-weight: var(--w-label); font-size: 11.5px; line-height: 1; letter-spacing: 0.08em; text-transform: uppercase; color: var(--meta); }
.foot-cols ul { display: grid; gap: 10px; font-size: 16px; }
.foot-cols a { display: inline-block; padding: 2px 0; color: var(--fg); }
.foot-cols a:hover, .foot-cols a:focus-visible { color: var(--accent-text); }
.muted { color: var(--meta); }
.foot-place { display: flex; align-items: center; gap: 12px; margin: 40px 0 0; padding-top: 24px; border-top: 1px solid var(--hair); font-size: 12.5px; color: var(--meta); }
.foot-place .hm-dot { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--infrared); }
.proto-foot { margin: 36px 0 0; max-width: 78ch; font-family: var(--f-body); font-size: 12.5px; line-height: 1.45; color: var(--meta); }
.legal { margin-top: 12px; font-size: 14px; color: var(--meta); }
.legal a { display: inline-block; padding: 3px 0; }
.legal a:hover { color: var(--accent-text); }

/* ---------- tablet ------------------------------------------------------------------------------------ */
@media (max-width: 1024px) {
  .steps, .expect-list { gap: 28px; }
  .door { padding-right: 28px; }
  .door + .door { padding-left: 28px; }
  .faq h2 { grid-column: 1 / span 12; margin-bottom: 36px; }
  .faq-list { grid-column: 1 / span 12; }
  .founders-text { grid-column: 1 / span 12; }
  .leaders { grid-column: 1 / span 12; margin-top: 40px; }
  .decide h2, .decide-body { grid-column: 1 / span 12; }
  .decide-body { margin-top: 28px; }
}

/* ---------- phone: full-bleed, object first, centred type ------------------------------------------------ */
@media (max-width: 768px) {
  /* never shorter than the stack of eyebrow, object, headline, paragraph and buttons needs: in a short window (a landscape phone, a side pane) the page scrolls instead of the lines landing on one another.
     That height is 480 px (eyebrow, a 150 px object at the least, the paragraph, the buttons and the padding) plus the four headline lines (3.6 x the headline size), so it follows the type;
     on a 375 x 667 phone the buttons end 30 px inside the window, which the copy deck's first-screen test needs (tools/first-screen.cjs) */
  .hero { height: auto; min-height: max(100vh, calc(480px + 4 * var(--hero-fs))); min-height: max(100svh, calc(480px + 4 * var(--hero-fs))); display: flex; flex-direction: column; justify-content: flex-end; padding: 0 20px 30px; }
  /* the eyebrow is the first thing IN the hero's column (it was pinned to the top), kept 72 px down by its margin and pushed to the top by the auto margin below it, so the headline, paragraph
     and buttons, which sit at the bottom, can never run up into it: in a window too short for all of it the hero simply grows (round 11; it used to print the eyebrow over the headline at 254x287 and 280x500) */
  #topline { position: relative; top: auto; left: auto; right: auto; width: auto; max-width: none; transform: none; margin: 72px 0 auto; font-size: 12.5px; text-align: center; }
  .hero-stack { margin-top: 28px; }
  .hero { --hero-fs: min(7.4vw, max(5vh, 28px)); --hero-fs: min(7.4vw, max(5svh, 28px)); } /* the height term (7.6% of the window, never under 57.8 px) only bites on a tablet in portrait; below 452 px the width sets the size, and the hero is never shorter than 480 px plus the four lines, so a short window scrolls instead of overlapping */
  .hero-stack { position: relative; left: auto; bottom: auto; width: 100%; }
  .hero-title { text-align: center; }
  .hl { justify-content: center; }
  .hl-1, .hl-2, .hl-3, .hl-4 { margin-left: 0; }
  .hero-aside { position: relative; right: auto; left: auto; top: auto; bottom: auto; width: 100%; margin-top: 22px; gap: 20px; }
  .hero-lede { font-size: 16px; }
  .hero-ctas { gap: 10px; }
  .hero-ctas .btn { flex: 1 1 auto; padding: 0 14px; }
  .gl-still { left: 50%; transform: translateX(-50%); bottom: auto; top: 110px; width: 240px; }
  .sec-head { grid-template-columns: 1fr; gap: 14px; margin-bottom: 36px; }
  .sec-head .idx { padding-top: 0; }
  .inner-pad { padding-top: 84px; padding-bottom: 84px; }
  .door-grid { grid-template-columns: 1fr; }
  .door, .door + .door { padding: 32px 0 28px; border-left: 0; }
  .door + .door { border-top: 1px solid var(--hair-strong); }
  .pillars { padding: 84px var(--pad-x); }
  .pillar-list { grid-template-columns: 1fr; gap: 12px; }
  .steps { grid-template-columns: 1fr; gap: 40px; }
  .expect-list { grid-template-columns: 1fr; gap: 36px; }
  .expect-row dt { font-size: 24px; }
  .rel-row { grid-template-columns: 1fr; gap: 16px; padding: 24px 0; }
  .decide-grid { padding-top: 32px; }
  .founders-grid, .faq-grid, .foot-top { display: block; }
  .founders-text { gap: 18px; }
  .faq h2 { margin-bottom: 28px; }
  .faq summary { padding: 22px 44px 22px 0; font-size: 17px; }
  .faq details p { padding-right: 20px; }
  .closing { min-height: 0; }
  .closing-h { font-size: clamp(30px, 9.4vw, 52px); }
  .site-footer { padding-top: 56px; }
  .foot-logo { width: 140px; margin-bottom: 24px; }
  .foot-desc { margin-bottom: 36px; }
  .foot-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 20px; }
  .foot-cols a { overflow-wrap: anywhere; }
}
@media (prefers-reduced-motion: reduce) {
  .faq details p { animation: none; }
}