/* How we work together */
.w-hero{padding:clamp(140px,17vh,180px) 0 clamp(36px,5vw,56px)}
.w-hero .eyebrow{display:inline-block;margin:0 0 14px}
.w-hero h1{font-size:clamp(36px,4.6vw,56px);line-height:1.07;margin:0 0 18px;max-width:18ch}
.w-hero .lead{font-size:clamp(17px,1.5vw,19px);line-height:1.65;color:var(--ink-copy);max-width:62ch;margin:0}
.w-path{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.w-path li{background:var(--surface-raised);border:1px solid var(--hairline);border-radius:var(--r-lg);padding:22px 22px 24px}
.w-n{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--ink);color:#fff;font-weight:700;font-size:15px;margin-bottom:14px}
.w-path b{display:block;font-size:18px;margin-bottom:6px}
.w-path p{margin:0;font-size:15.5px;line-height:1.6;color:var(--ink-copy)}
.w-build{background:var(--surface-sunken)}
.we-tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:0 0 22px}
.we-tab{text-align:left;padding:16px 18px;border-radius:var(--r-lg);border:1px solid var(--hairline);background:var(--surface-raised);cursor:pointer;font:inherit;color:var(--ink)}
.we-tab b{display:block;font-size:17px;margin-bottom:4px}
.we-tab span{font-size:14.5px;line-height:1.5;color:var(--ink-copy)}
.we-tab.on{background:var(--ink);border-color:var(--ink);color:#fff}
.we-tab.on span{color:rgba(255,255,255,.8)}
.we-grid{display:grid;grid-template-columns:1.25fr .75fr;gap:22px;align-items:start}
.we-lever{margin-bottom:22px}
.we-lever h3{font-size:17px;margin:0 0 10px}
.we-opts{display:grid;gap:9px}
.we-opt{text-align:left;padding:13px 16px;border-radius:var(--r-md);border:1px solid var(--hairline);background:var(--surface-raised);cursor:pointer;font:inherit;color:var(--ink)}
.we-opt b{display:block;font-size:15.5px}
.we-opt span{font-size:14.5px;line-height:1.5;color:var(--ink-copy)}
.we-opt.on{border-color:var(--brand);box-shadow:inset 0 0 0 1px var(--brand)}
.we-out{position:sticky;top:124px;background:var(--surface-raised);border:1px solid var(--hairline);border-radius:var(--r-xl);padding:24px 26px;box-shadow:var(--shadow-float)}
.we-out .eyebrow{display:block;margin:0 0 4px;font-size:12px}
.we-out h3{font-size:20px;margin:0 0 14px}
.we-scope{list-style:none;margin:0 0 16px;padding:0;display:grid;gap:11px}
.we-scope li{font-size:15px;line-height:1.55;color:var(--ink-copy);padding-left:18px;position:relative}
.we-scope li::before{content:"";position:absolute;left:0;top:8px;width:7px;height:7px;border-radius:50%;background:var(--sonar,#0167BB)}
.we-scope b{color:var(--ink)}
.we-size{margin:0 0 8px;font-size:15px;line-height:1.6;color:var(--ink)}
.we-term{margin:0 0 20px;font-size:14.5px;line-height:1.6;color:var(--ink-muted)}
.we-out .btn{width:100%;text-align:center}
.we-out .secondroute{margin-top:12px;font-size:14px}
.w-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.w-cards .card{background:var(--surface-raised);border:1px solid var(--hairline);border-radius:var(--r-lg);padding:20px 22px}
.w-cards h3{font-size:17px;margin:0 0 6px}
.w-cards p{margin:0;font-size:15px;line-height:1.55;color:var(--ink-copy)}
.w-band{background:var(--surface-sunken)}
@media(max-width:1000px){.w-path,.w-cards{grid-template-columns:1fr 1fr}}
@media(max-width:820px){
  .we-grid{grid-template-columns:1fr}.we-out{position:static}
  .we-tabs{grid-template-columns:1fr}
  .w-path,.w-cards{grid-template-columns:1fr}
}

/* the simplified page: three steps, two short columns */
.w-steps{padding-top:0}
.w-two .wrap-narrow{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,64px)}
/* these two are labels over a list, not headlines: sans, smaller, quieter */
.w-two h2{font-family:var(--font-sans);font-size:13px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;margin:0 0 16px;color:rgba(239,234,226,.62)}
.w-two .c-list li{font-size:16px}
@media(max-width:820px){.w-two .wrap-narrow{grid-template-columns:1fr}}

.we-nudge{margin:14px 0 0;padding:12px 14px;border-radius:var(--r-md);background:var(--surface-sunken);
  font-size:14.5px;line-height:1.55;color:var(--ink-copy);animation:weFade .4s ease}
@keyframes weFade{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.we-nudge{animation:none}}

/* each engine keeps its own colour while it is the one being shaped */
#shape[data-engine="sonar"]{--eng:var(--sonar);--eng-soft:var(--surface-sonar-soft);--eng-rgb:1,103,187}
#shape[data-engine="relay"]{--eng:var(--relay);--eng-soft:var(--surface-relay-soft);--eng-rgb:123,48,65}
#shape[data-engine="gravity"]{--eng:var(--gravity);--eng-soft:var(--surface-gravity-soft);--eng-rgb:88,114,77}
.we-tab{border-top:2px solid transparent}
.we-tab[data-engine="sonar"]{border-top-color:rgba(1,103,187,.35)}
.we-tab[data-engine="relay"]{border-top-color:rgba(123,48,65,.35)}
.we-tab[data-engine="gravity"]{border-top-color:rgba(88,114,77,.35)}
/* the selected engine is marked, not painted: white card, its colour on the edge */
.we-tab{border-top-width:3px;transition:transform .18s ease,box-shadow .18s ease}
.we-tab.on{background:var(--surface-raised);color:var(--ink);transform:translateY(-2px);box-shadow:var(--shadow-float)}
.we-tab.on span{color:var(--ink-copy)}
.we-tab[data-engine="sonar"].on{border-top-color:var(--sonar);box-shadow:0 10px 26px rgba(1,103,187,.18)}
.we-tab[data-engine="relay"].on{border-top-color:var(--relay);box-shadow:0 10px 26px rgba(123,48,65,.18)}
.we-tab[data-engine="gravity"].on{border-top-color:var(--gravity);box-shadow:0 10px 26px rgba(88,114,77,.18)}
.we-tab.on b{color:var(--eng-tab)}
.we-tab[data-engine="sonar"].on b{--eng-tab:var(--sonar)}
.we-tab[data-engine="relay"].on b{--eng-tab:var(--relay)}
.we-tab[data-engine="gravity"].on b{--eng-tab:var(--gravity)}
.we-tab:not(.on){background:transparent;border-color:var(--hairline)}
.we-tab:not(.on):hover{background:var(--surface-raised)}
#shape .we-opt.on{border-color:var(--eng);box-shadow:inset 0 0 0 1px var(--eng);background:var(--eng-soft)}
#shape .we-out{border-top:3px solid var(--eng)}
#shape .we-out .eyebrow{color:var(--eng)}
#shape .we-scope li::before{background:var(--eng)}
#shape .we-out .btn-primary{background:var(--eng);border-color:var(--eng)}
#shape .we-out .btn-primary:hover{filter:brightness(.92)}
#shape .we-nudge{background:var(--eng-soft)}

/* the second column follows the first, so the pair reads left to right */
.w-two .reveal-2{transition-delay:.09s}

/* the builder sits on the page's own paper, one shade warmer than the rest */
.w-build{background:var(--surface-sunken)}
.w-build .head h2{line-height:1.08}   /* same size as every other section heading */
/* the questions are interface, like the options under them: sans */
.we-lever h3{display:flex;align-items:center;gap:10px;font-family:var(--font-sans);font-size:17px;
  font-weight:700;letter-spacing:-.01em;margin-bottom:12px}
#shape .we-opt.on{background:var(--eng-soft);border-color:var(--eng);box-shadow:inset 0 0 0 1px var(--eng)}
#shape .we-out{border-top:4px solid var(--eng)}
#shape .we-out h3{font-family:var(--font-sans);font-size:19px;font-weight:700;letter-spacing:-.01em}
.we-out.just-changed{animation:weBump .45s cubic-bezier(.2,.9,.3,1)}
@keyframes weBump{0%{transform:scale(.995)}60%{transform:scale(1.008)}100%{transform:none}}
@media(prefers-reduced-motion:reduce){.we-out.just-changed{animation:none}}

/* the promises go dark, just before the questions */
.w-two{background:var(--ink-deep,#1c1a17);color:#efeae2}
.w-two .c-list{margin-top:0}
.w-two .c-list li{color:rgba(239,234,226,.82)}
.w-two .c-list b{color:#fff}
.w-two .c-list li::before{background:var(--brand)}
.w-two .c-not li::before{background:rgba(239,234,226,.45)}


/* hero: words first, then the picture full width, with the steps riding its lower edge */
/* the hero shares the illustration's own cream, so the picture has no visible edge */
.w-hero,.w-art,.w-steps{background:#f9ead8}
.w-hero{padding-bottom:clamp(28px,4vw,48px);text-align:center}
.w-hero h1{max-width:20ch;margin-left:auto;margin-right:auto}
.w-hero .lead{margin-left:auto;margin-right:auto;max-width:62ch}
.w-art{width:100%;margin:0;padding:0;line-height:0}
.w-art img{display:block;width:min(1240px,100%);margin:0 auto;height:auto;aspect-ratio:1672/941;object-fit:cover;object-position:50% 46%}
.w-steps{padding-top:0;position:relative;z-index:2}
.w-art + .w-steps{margin-top:clamp(-64px,-4.5vw,-40px)}   /* only overlap once the illustration is in */
.w-path li{box-shadow:var(--shadow-float)}
@media(max-width:820px){
  .w-art img{aspect-ratio:4/5;object-position:50% 50%}
  .w-art + .w-steps{margin-top:-28px}
}
}