/* ==========================================================================
   VOICES IN MOTION × ON — shared design system (v4: editorial restraint)
   Direction: fewer competing elements, bigger type, real full-bleed
   photography, solid-color statement bands, generous pacing — one idea
   per section instead of stacked card grids.
   ========================================================================== */

@font-face{
  font-family:'On Diatype Standard';
  src:url('../fonts/OnDiatypeStd-Regular.woff2') format('woff2');
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'On Diatype Standard';
  src:url('../fonts/OnDiatypeStd-Bold.woff2') format('woff2');
  font-weight:700; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'On Diatype Mono';
  src:url('../fonts/OnDiatypeMono-Regular.woff2') format('woff2');
  font-weight:400; font-style:normal; font-display:swap;
}

:root{
  --paper:      #faf9f5;
  --paper-2:    #f2efe7;
  --ink:        #14140f;
  --ink-2:      #1d1c15;
  --steel:      #6b675c;
  --steel-2:    #9a9587;
  --line:       rgba(20,20,15,.14);
  --line-soft:  rgba(20,20,15,.09);
  --line-dark:  rgba(250,249,245,.16);
  --on-dark-2:  rgba(250,249,245,.66);
  --signal:     #d63832;
  --signal-hi:  #e2645e;
  --white:      #ffffff;

  --font-display:'On Diatype Standard', 'Helvetica Neue', Arial, sans-serif;
  --font-body:'On Diatype Standard', 'Helvetica Neue', Arial, sans-serif;
  --font-mono:'On Diatype Mono', 'Roboto Mono', ui-monospace, SFMono-Regular, monospace;

  --wrap: 90%;
  --gutter: clamp(20px, 5vw, 64px);
  --radius: 8px;
  --ease-out: cubic-bezier(.16,.84,.28,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; }
h1,h2,h3,h4{ margin:0; font-family:var(--font-display); font-weight:700; text-wrap:balance; letter-spacing:-.015em; }
p{ margin:0; }
button, input, select, textarea{ font-family:inherit; }
:focus-visible{ outline:2px solid var(--signal); outline-offset:3px; }

.wrap{
  max-width:var(--wrap);
  margin-inline:auto;
  padding-inline:var(--gutter);
}

.eyebrow{
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--signal);
  display:flex; align-items:center; gap:10px;
}
.eyebrow.on-dark{ color:var(--signal-hi); }

/* ---------- buttons: quiet outline, rectangular, arrow-led ---------- */
.btn{
  display:inline-flex; align-items:center; gap:12px;
  font-family:var(--font-body);
  font-size:15px; font-weight:700;
  padding:15px 24px;
  border-radius:var(--radius);
  border:1.5px solid var(--ink);
  cursor:pointer;
  text-decoration:none;
  color:var(--ink);
  background:transparent;
  transition:background .3s var(--ease-out), color .3s var(--ease-out), border-color .3s var(--ease-out), transform .3s var(--ease-out);
  white-space:nowrap;
}
.btn:hover{ background:var(--ink); color:var(--paper); transform:translateY(-1px); }
.btn-fill{ background:var(--ink); color:var(--paper); }
.btn-fill:hover{ background:var(--ink-2); }
.btn-signal{ border-color:var(--signal); color:var(--signal); }
.btn-signal:hover{ background:var(--signal); color:var(--white); }
.btn-signal-fill{ border-color:var(--signal); background:var(--signal); color:var(--white); }
.btn-signal-fill:hover{ background:var(--signal-hi); border-color:var(--signal-hi); color:var(--white); }
.btn.on-dark{ border-color:rgba(250,249,245,.55); color:var(--paper); }
.btn.on-dark:hover{ background:var(--paper); color:var(--ink); }
.btn-plain{ border:none; padding:15px 0; color:var(--steel); background:none; }
.btn-plain:hover{ background:none; color:var(--ink); }
.btn[disabled]{ opacity:.4; cursor:not-allowed; }
.btn svg{ width:14px; height:14px; flex:none; transition:transform .3s var(--ease-out); }
.btn:hover svg{ transform:translateX(4px); }

/* ---------- nav: minimal, transparent over the hero, solid once scrolled past it ---------- */
.site-nav{
  position:fixed; top:env(safe-area-inset-top,0px); left:0; right:0; z-index:40;
  background:transparent;
  border-bottom:1px solid transparent;
  transition:background-color .3s ease, border-color .3s ease;
}
.site-nav.nav-solid{
  background:#ffffff;
  border-bottom-color:var(--line);
}
.site-nav .wrap{
  display:flex; align-items:center; justify-content:space-between;
  padding-block:18px;
  gap:24px;
}
.brand-lockup{ display:flex; align-items:center; gap:16px; text-decoration:none; }
.brand-lockup .on-mark{ width:24px; height:auto; color:var(--ink); }
.brand-lockup .div{ width:1px; height:26px; background:var(--line); }
.brand-lockup .wordmark{
  font-family:var(--font-mono); font-size:15px; letter-spacing:.08em;
  color:var(--ink); white-space:nowrap;
}
.nav-links{ display:flex; align-items:center; gap:34px; font-size:14.5px; }
.nav-links a{ text-decoration:none; color:var(--steel); transition:color .2s; white-space:nowrap; }
.nav-links a:hover{ color:var(--ink); }
@media (max-width:900px){
  .nav-links{ display:none; }
}

/* ---------- hero: full-bleed photo background, copy overlaid on top ---------- */
:root{
  --hero-mark: #fbdfbd;
}
.hero-centered{
  position:relative;
  background:var(--paper);
  overflow:hidden;
  text-align:center;
  aspect-ratio:2000 / 1404;
  border-bottom-left-radius:clamp(28px,7vw,120px);
  border-bottom-right-radius:clamp(28px,7vw,120px);
}
@media (min-width:761px) and (max-width:1180px){
  .hero-centered{ aspect-ratio:auto; min-height:clamp(620px,82vw,800px); }
}
.hero-bg{
  position:absolute; inset:0; z-index:0;
  line-height:0;
}
.hero-bg img{
  width:100%; height:100%; object-fit:cover; display:block;
}
.hero-centered-copy{
  position:relative; z-index:1;
  max-width:1180px; margin:0 auto;
  padding:clamp(116px,13vw,160px) var(--gutter) 0;
}
.hero-centered-copy .eyebrow{ justify-content:center; }
.hero-centered-copy h1{
  margin-top:20px;
  color:var(--ink);
  font-size:clamp(26px, 4vw, 54px);
  line-height:1.12;
  white-space:nowrap;
}
@media (max-width:640px){
  .hero-centered-copy h1{
    font-size:clamp(28px, 7.2vw, 40px);
    white-space:normal;
  }
}
.split-line{ overflow:hidden; display:block; }
.split-line > span{ display:block; transform:translateY(110%); }
.mark{ position:relative; white-space:nowrap; }
.mark::after{
  content:'';
  position:absolute; left:-.05em; right:-.08em; bottom:.02em; height:.4em;
  background:var(--hero-mark);
  z-index:-1; border-radius:2px 8px 2px 8px;
  transform:rotate(-1deg);
}
.hero-sub{
  margin:22px auto 0; max-width:60ch;
  font-size:19.5px; color:var(--steel); line-height:1.65;
}
.hero-actions{ margin-top:30px; display:flex; align-items:center; justify-content:center; gap:26px; flex-wrap:wrap; }
.btn-pill{ border-radius:999px; padding:15px 34px; }
.btn-text{
  display:inline-flex; align-items:center; gap:8px;
  color:var(--signal); font-weight:700; font-size:15px; text-decoration:none;
}
.btn-text:hover{ color:var(--signal-hi); }
.btn-text svg{ width:14px; height:14px; flex:none; transition:transform .3s var(--ease-out); }
.btn-text:hover svg{ transform:translateX(4px); }

@media (max-width:640px){
  .hero-centered-copy h1{ margin-top:14px; }
  .hero-sub{ margin-top:14px; font-size:15.5px; }
  .hero-actions{ margin-top:20px; gap:14px; }
  .btn-pill{ padding:13px 28px; }
}

/* Mobile hero: full-bleed background image behind the overlaid copy, same pattern as
   desktop — per the client's request, using their own hero-mobile-sm/md.webp export
   uncropped, at its native aspect ratio, so it always renders starting from the top with
   nothing trimmed off. The copy block gets a slightly larger top offset than desktop so it
   sits lower on the image, with breathing room above and below it. */
@media (max-width:760px){
  .hero-centered{ aspect-ratio:1400 / 2718; }
  .hero-centered-copy{ padding-top:clamp(125px, 18vw, 175px); }
}

/* ---------- statement band: full-bleed solid ink, one big line ---------- */
.statement-band{
  background:var(--ink); color:var(--paper);
  padding-block:clamp(70px,12vw,130px);
}
.statement-band .wrap{ display:flex; flex-direction:column; align-items:flex-start; gap:34px; }
.statement-band h2{
  color:var(--paper);
  font-size:clamp(30px,5vw,58px);
  line-height:1.08;
  max-width:16ch;
}

/* ---------- statement split: contained black card, copy panel + photo panel ---------- */
.statement-split{
  background:var(--paper);
  padding-block:clamp(56px,9vw,110px);
}
.statement-split-inner{
  max-width:var(--wrap);
  margin-inline:auto;
  padding-inline:var(--gutter);
  display:grid; grid-template-columns:1fr 1fr;
  min-height:clamp(400px,44vw,540px);
  border-radius:20px;
  overflow:hidden;
}
.statement-copy{
  background:#000000;
  display:flex; flex-direction:column; justify-content:center;
  padding:clamp(44px,6vw,90px) clamp(28px,6vw,72px);
}
.dash-accent{
  display:block; width:56px; height:3px; border-radius:2px;
  background:var(--signal); margin-bottom:26px;
}
.statement-copy h2{
  color:var(--paper);
  max-width:20ch;
  font-size:clamp(26px,3.2vw,40px);
  line-height:1.15;
}
.statement-copy p{
  margin-top:20px; max-width:52ch;
  font-size:16.5px; color:var(--on-dark-2); line-height:1.7;
}
.statement-copy .btn{ margin-top:32px; align-self:flex-start; }
.statement-media{ position:relative; overflow:hidden; background:#000000; }
.statement-media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }

@media (max-width:860px){
  .statement-split-inner{ grid-template-columns:1fr; min-height:0; border-radius:16px; }
  .statement-media{ height:clamp(220px,60vw,340px); order:-1; }
}

/* ---------- section shells ---------- */
.section{ padding-block:clamp(80px,10vw,150px); position:relative; }
#mission, #pillars, #experience, #prize, #gallery, #notes{ scroll-margin-top:88px; }
.section-paper{ background:var(--paper); color:var(--ink); }
.section-alt{ background:var(--paper-2); color:var(--ink); }
.section + .section{ border-top:1px solid var(--line); }
.statement-band + .section, .section + .statement-band{ border-top:none; }
.section-head{ max-width:640px; margin-bottom:64px; }
.section-head h2{
  font-size:clamp(30px,3.6vw,44px);
  line-height:1.1;
  margin-top:18px;
}
.section-head p{ margin-top:20px; font-size:16.5px; max-width:56ch; color:var(--steel); }

.reveal{ opacity:0; transform:translateY(24px); transition:opacity .8s var(--ease-out), transform .8s var(--ease-out); }
.reveal.is-visible{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
}

/* ---------- programme: copy + asymmetric feature-card grid ---------- */
#pillars{ padding-top:clamp(40px,5vw,75px); }
.pillars-split{
  display:grid; grid-template-columns:minmax(260px,360px) 1fr;
  gap:clamp(40px,6vw,90px); align-items:start;
}
.pillars-copy h2{
  font-size:clamp(30px,3.4vw,42px); line-height:1.14; margin-top:18px;
}
.pillars-copy p{ margin-top:20px; font-size:16.5px; color:var(--steel); line-height:1.6; max-width:38ch; }
.pillars-grid{ display:grid; grid-template-columns:repeat(6,1fr); gap:20px; }
.pillar-card{
  grid-column:span 3;
  background:#fef4e2;
  border:1.5px solid #fcdfbd;
  border-radius:20px;
  padding:clamp(24px,2.6vw,34px);
  display:flex; flex-direction:column; gap:14px;
}
.pillar-card--lg{ padding-bottom:clamp(28px,3vw,38px); }
.pillar-card:not(.pillar-card--lg){ grid-column:span 2; }
.pillar-icon{ width:44px; height:44px; color:var(--ink); flex:none; }
.pillar-icon svg{ width:100%; height:100%; }
.pillar-card h3{ font-size:19px; font-weight:700; line-height:1.22; }
.pillar-card p{ font-size:14.5px; color:var(--steel); line-height:1.55; }
@media (max-width:1240px){
  .pillars-split{ grid-template-columns:1fr; }
  .pillars-copy{ max-width:640px; }
}
@media (max-width:640px){
  .pillars-grid{ grid-template-columns:1fr; }
  .pillar-card, .pillar-card--lg, .pillar-card:not(.pillar-card--lg){ grid-column:span 1; }
}

/* ---------- experience rows: full-bleed alternating image/copy (the five days) ----------
   Replaces the earlier stacked "story card" list. The page now ends after this section — the
   "who it's for" section, the outcomes strip, the gallery, and the footer were all removed at
   the client's request, along with their CSS below this comment used to cover (dead rules for
   DOM that no longer exists would just be confusing to a future editor). */
#experience{ padding-bottom:0; }
.exp-rows{ display:flex; flex-direction:column; }
.exp-row{
  display:grid; grid-template-columns:1fr 1fr; align-items:stretch;
  min-height:clamp(360px,40vw,560px);
  border-top:1px solid var(--line);
}
.exp-copy{
  display:flex; flex-direction:column; justify-content:center;
  padding:clamp(40px,6vw,90px) clamp(28px,6vw,90px);
}
.exp-copy h3{ font-size:clamp(24px,3vw,36px); line-height:1.16; max-width:16ch; }
.exp-copy p{ margin-top:18px; font-size:16px; color:var(--steel); line-height:1.65; max-width:46ch; }
.exp-media{ position:relative; overflow:hidden; background:#000; }
.exp-media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
@media (max-width:860px){
  .exp-row{ grid-template-columns:1fr; min-height:0; }
  .exp-media{ height:clamp(240px,62vw,360px); order:-1; }
}

/* ---------- the prize: two-up feature cards ---------- */
.prize-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:24px; margin-top:56px; }
.prize-card{
  background:#fef4e2; border:1.5px solid #fcdfbd; border-radius:20px;
  padding:clamp(28px,3vw,40px);
  display:flex; flex-direction:column; gap:18px;
}
.prize-icon{ width:48px; height:48px; flex:none; color:var(--ink); }
.prize-icon svg{ width:100%; height:100%; }
.prize-card h3{ font-size:clamp(19px,2vw,23px); font-weight:700; line-height:1.28; }
.prize-card p{ font-size:15px; color:var(--steel); line-height:1.6; }
@media (max-width:760px){
  .prize-grid{ grid-template-columns:1fr; }
}

/* ---------- gallery: manual masonry, full-bleed ----------
   CSS multi-column (the previous approach) only balances total height per column — it can
   never break the TOP alignment, which is why the old grid still read as "four aligned rows"
   at the top even with varied image ratios. A real Pinterest-style stagger needs each column
   to start at a different offset, which multi-column has no way to express. So this is built
   as four explicit columns (in the HTML: .masonry-col wrapping a fixed set of .masonry-item
   images) with a baked-in margin-top per column. The whole grid also sits outside .wrap here
   (a sibling of it in the HTML, not nested inside) so it runs edge-to-edge instead of stopping
   at the contained width, matching the reference's full-bleed look.
   Below 760px, .masonry-col switches to `display:contents` — it disappears from layout
   entirely and its .masonry-item children become direct flex children of .masonry-grid again,
   which is what turns this back into the flat, individually-scrollable list the horizontal
   auto-scroll carousel (see main.js) needs. No scroll-snap on that carousel on purpose: it
   fights the continuous auto-scroll — a scroll-snap-type actively snaps a programmatic
   scrollLeft nudge straight back to the nearest snap point every frame, which reads as the
   carousel refusing to move at all. */
.masonry-grid{ display:flex; align-items:flex-start; gap:14px; margin-top:56px; }
.masonry-col{ display:flex; flex-direction:column; gap:14px; flex:1 1 0; min-width:0; }
/* Column contents (see the HTML) are grouped by combined aspect ratio, not just image
   count, so the 3-image column isn't automatically the tallest — the two square + one
   landscape crop in it add up close to the other columns' two-portrait totals. Offsets
   are kept modest for the same reason: with the columns already close in height, a big
   offset here is what actually causes a visible gap at the bottom, not the image count. */
.masonry-col:nth-child(1){ margin-top:0; }
.masonry-col:nth-child(2){ margin-top:32px; }
.masonry-col:nth-child(3){ margin-top:56px; }
.masonry-col:nth-child(4){ margin-top:16px; }
.masonry-item{
  border-radius:12px; overflow:hidden; background:var(--paper-2);
}
.masonry-item img{ width:100%; display:block; transition:transform .6s var(--ease-out); }
.masonry-item:hover img{ transform:scale(1.035); }
@media (max-width:1024px){
  .masonry-grid{ flex-wrap:wrap; padding-inline:var(--gutter); }
  .masonry-col{ flex-basis:46%; }
  .masonry-col:nth-child(2){ margin-top:16px; }
  .masonry-col:nth-child(3){ margin-top:0; }
  .masonry-col:nth-child(4){ margin-top:16px; }
}
@media (max-width:760px){
  .masonry-grid{
    flex-wrap:nowrap;
    overflow-x:auto;
    gap:14px;
    margin-top:36px;
    padding-inline:var(--gutter);
    padding-bottom:6px;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    cursor:grab;
  }
  .masonry-grid::-webkit-scrollbar{ display:none; }
  .masonry-col{
    display:contents;
    margin-top:0;
  }
  .masonry-item{
    flex:0 0 auto;
    width:70vw;
    max-width:300px;
    height:340px;
    margin-bottom:0;
  }
  .masonry-item img{ width:100%; height:100%; object-fit:cover; }
}

/* ---------- to note: dash-list of logistics ---------- */
.note-list{ display:flex; flex-direction:column; gap:0; border-top:1px solid var(--line); margin-top:44px; max-width:78ch; }
.note-list li{ list-style:none; padding-block:20px; border-bottom:1px solid var(--line); display:flex; gap:18px; align-items:baseline; }
.note-list li::before{ content:'—'; color:var(--signal); font-family:var(--font-mono); flex:none; }
.note-list p{ font-size:15.5px; color:var(--steel); line-height:1.6; }
.note-list strong{ color:var(--ink); font-weight:700; }

/* ---------- minimal footer: one row, copyright + partner logos ---------- */
.footer-min{ background:var(--ink); border-top:1px solid var(--line-dark); padding-block:34px; }
.footer-min-inner{ display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; }
.footer-copy{ font-size:13.5px; color:var(--steel-2); }
.footer-links{ display:flex; align-items:center; gap:24px; flex-wrap:wrap; }
.footer-links a{ font-size:13px; color:var(--steel-2); text-decoration:none; transition:color .2s; }
.footer-links a:hover{ color:var(--paper); }
.partner-logos{ display:flex; align-items:center; gap:36px; flex-wrap:wrap; }
.partner-logos .p-logo{ display:flex; align-items:center; height:24px; opacity:.85; transition:opacity .2s; }
.partner-logos .p-logo:hover{ opacity:1; }
.partner-logos .p-logo.rsa{ background:var(--paper); height:auto; padding:7px 12px; border-radius:4px; }
.partner-logos .p-logo.rsa img{ height:13px; }
.partner-logos .p-logo.mwamko{ background:var(--paper); height:auto; padding:6px; border-radius:4px; }
.partner-logos .p-logo.mwamko img{ height:20px; width:20px; }
.partner-logos .p-logo img, .partner-logos .p-logo svg{ height:100%; width:auto; }
.partner-logos .on-mark{ color:var(--paper); width:14px; height:auto; }
@media (max-width:560px){
  .footer-min-inner{ justify-content:center; text-align:center; }
}

/* ==========================================================================
   Application wizard (apply.html) — same restrained system
   ========================================================================== */
.app-shell{ min-height:100%; display:flex; flex-direction:column; background:var(--paper); color:var(--ink); }
.app-header{
  position:sticky; top:env(safe-area-inset-top,0px); z-index:40;
  background:rgba(250,249,245,.94); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.app-header .wrap{ display:flex; align-items:center; justify-content:space-between; padding-block:18px; gap:20px; }
.app-close{ font-family:var(--font-mono); font-size:12px; letter-spacing:.06em; color:var(--steel); text-decoration:none; display:flex; align-items:center; gap:8px; }
.app-close:hover{ color:var(--ink); }

.progress-track{ height:2px; background:var(--line); position:relative; overflow:hidden; }
.progress-fill{ position:absolute; inset:0 auto 0 0; width:11%; background:var(--signal); transition:width .5s var(--ease-out); }

.app-main{ flex:1; padding-block:64px 100px; }
.step-index{ font-family:var(--font-mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--signal); margin-bottom:16px; }
.step-title{ font-size:clamp(26px,3.8vw,40px); line-height:1.1; max-width:22ch; color:var(--ink); }
.step-desc{ margin-top:16px; color:var(--steel); max-width:60ch; font-size:15.5px; }
.step-desc + .field-group{ margin-top:46px; }
.step-title + .field-group{ margin-top:46px; }

.step{ display:none; }
.step.is-active{ display:block; }
.step.is-anim-in{ animation:step-in .55s var(--ease-out); }
@keyframes step-in{
  from{ opacity:0; transform:translateY(18px); }
  to{ opacity:1; transform:none; }
}
@media (prefers-reduced-motion:reduce){
  .step.is-anim-in{ animation:none; }
}

.field-group{ display:grid; grid-template-columns:1fr 1fr; gap:30px 28px; }
.field-group.single{ grid-template-columns:1fr; }
.field{ display:flex; flex-direction:column; gap:9px; }
.field.span-2{ grid-column:1 / -1; }
@media (max-width:700px){
  .field-group{ grid-template-columns:1fr; }
  .field.span-2{ grid-column:auto; }
}

.field label{ font-family:var(--font-mono); font-size:12px; letter-spacing:.02em; color:var(--steel); }
.field label .req{ color:var(--signal); margin-left:4px; }
.field label .opt{ color:var(--steel-2); text-transform:none; letter-spacing:0; margin-left:6px; font-size:11px; }

.input, .textarea{
  background:transparent; border:none; border-bottom:1px solid var(--line);
  color:var(--ink); font-size:16px; padding:12px 2px; width:100%;
  transition:border-color .2s;
}
.input:focus, .textarea:focus{ border-color:var(--signal); outline:none; }
.textarea{ resize:vertical; min-height:96px; font-family:var(--font-body); line-height:1.5; }
.field-hint{ font-size:12px; color:var(--steel-2); }
.field-error{ font-size:12px; color:var(--signal); display:none; }
.field.has-error .input, .field.has-error .textarea{ border-color:var(--signal); }
.field.has-error .field-error{ display:block; }

.choice-group{ display:flex; flex-wrap:wrap; gap:10px; }
.choice-group.stack{ flex-direction:column; align-items:flex-start; }
.chip-radio, .chip-check{ position:relative; }
.chip-radio input, .chip-check input{ position:absolute; opacity:0; width:1px; height:1px; }
.chip-radio label, .chip-check label{
  display:flex; align-items:center; gap:9px;
  font-size:14px;
  padding:12px 18px; border:1px solid var(--line); border-radius:var(--radius);
  cursor:pointer; transition:border-color .2s, background .2s, color .2s;
  color:var(--ink);
}
.chip-radio label:hover, .chip-check label:hover{ border-color:var(--ink); }
.choice-group.stack .chip-radio label, .choice-group.stack .chip-check label{ width:100%; box-sizing:border-box; }
.chip-radio input:checked + label, .chip-check input:checked + label{ background:var(--ink); border-color:var(--ink); color:var(--paper); }
.chip-radio input:focus-visible + label, .chip-check input:focus-visible + label{ outline:2px solid var(--signal); outline-offset:2px; }
.chip-check .box{ width:14px; height:14px; border:1px solid currentColor; border-radius:3px; flex:none; display:flex; align-items:center; justify-content:center; }
.chip-check input:checked + label .box::after{ content:''; width:7px; height:7px; background:var(--signal-hi); border-radius:1px; }

.conditional{ overflow:hidden; max-height:0; opacity:0; transition:max-height .4s ease, opacity .3s ease; }
.conditional.is-open{ max-height:600px; opacity:1; margin-top:22px; }

.consent-block{
  border:1px solid var(--line); padding:28px; border-radius:var(--radius); background:var(--paper-2);
  font-size:14px; line-height:1.7; color:var(--steel); max-height:260px; overflow-y:auto;
}
.consent-block p{ margin-bottom:10px; }
.consent-block ul{ margin:0 0 12px; padding-left:20px; }
.consent-check{ margin-top:24px; display:flex; gap:14px; align-items:flex-start; padding:18px; border:1px solid var(--line); border-radius:var(--radius); cursor:pointer; }
.consent-check input{ margin-top:3px; width:16px; height:16px; accent-color:var(--signal); flex:none; }
.consent-check span{ font-size:14px; color:var(--ink); }

.step-nav{ margin-top:56px; display:flex; align-items:center; justify-content:space-between; gap:20px; border-top:1px solid var(--line); padding-top:32px; }
.step-count{ font-family:var(--font-mono); font-size:11.5px; color:var(--steel-2); letter-spacing:.05em; }

.success-screen{ display:none; text-align:left; padding-block:60px; }
.success-screen.is-active{ display:block; }
.success-screen .mark-circle{ width:52px; height:52px; border-radius:50%; background:var(--signal); display:flex; align-items:center; justify-content:center; margin-bottom:32px; }
.success-screen .mark-circle svg{ width:22px; height:22px; color:var(--white); }
.success-screen h2{ font-size:clamp(28px,4.2vw,44px); line-height:1.1; max-width:16ch; color:var(--ink); }
.success-screen p{ margin-top:18px; max-width:52ch; color:var(--steel); font-size:16px; }

.submitting-note{ font-family:var(--font-mono); font-size:12px; color:var(--steel-2); margin-top:16px; display:none; }
.submitting-note.is-active{ display:block; }