/* ============================================================
   XEMYA G2 — image-forward, soft-layered, motion-led.
   No black borders, no double borders, no heavy black panels.
   Depth comes from warm shadow and layering, never from outline.
   ============================================================ */
@import url("https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&display=swap");

:root{
  --paper:#faf7f0; --paper-2:#f4efe4; --card:#fff;
  --ink:#211e1a; --mid:#5d564d; --faint:#696158; --hair:rgba(33,30,26,.09);
  --strategist:#7d59db; --architect:#0075b7; --operator:#008429; --steward:#007b7e;
  --guide:#8f6900; --connector:#c24b00; --maverick:#d40029; --artisan:#6c2448;
  --accent:var(--steward);
  /* warm shadows — black shadow reads as grime on paper */
  --sh1:0 1px 2px rgba(60,45,30,.05), 0 4px 14px rgba(60,45,30,.05);
  --sh2:0 2px 6px rgba(60,45,30,.06), 0 16px 38px rgba(60,45,30,.09);
  --sh3:0 8px 20px rgba(60,45,30,.08), 0 34px 70px rgba(60,45,30,.14);
  --ground:var(--paper);
  --r:22px; --r-lg:30px; --tabs:60px; --gut:44px;
  --ease:cubic-bezier(.22,1,.36,1);
}
*{box-sizing:border-box}

/* Layout classes that set `display` outrank the browser's built-in rule for
   [hidden], so a hidden payment button stayed rendered and clickable — the
   purchase screen was failing open. This is the one place !important is
   correct: it is what keeps a screened-out visitor away from a payment page. */
[hidden]{display:none!important}
html{scroll-behavior:smooth}
body{margin:0;background:var(--ground,var(--paper));color:var(--ink);
  font:400 17px/1.6 Outfit,system-ui,sans-serif;-webkit-font-smoothing:antialiased;
  transition:background-color .75s var(--ease)}

/* ---------- ground tone: the page takes the hue of the archetype in view ----------
   Generated in OKLCH at fixed L .945 / C .030, hue inherited from each ink. Fixed
   lightness is the whole point: mixing raw ink into paper made dark inks (Artisan,
   L .38) dim the page instead of colouring it. Regenerate if an ink changes. */
[data-tone]{--tone:var(--paper)}
[data-tone="strategist"]{--tone:#edeaff}
[data-tone="architect"]{--tone:#ddf0ff}
[data-tone="operator"]{--tone:#e1f3e1}
[data-tone="steward"]{--tone:#d7f3f4}
[data-tone="guide"]{--tone:#f7ecd7}
[data-tone="connector"]{--tone:#ffe7dd}
[data-tone="maverick"]{--tone:#ffe6e3}
[data-tone="artisan"]{--tone:#fee5ef}
[data-tone="paper"]{--tone:var(--paper)}
/* tinted bands ride the ground rather than covering it */
.tint{background:color-mix(in srgb,var(--ink) 4%,var(--ground,var(--paper)));
  transition:background-color .75s var(--ease)}
@media (prefers-reduced-motion:reduce){body,.tint{transition:none}}
h1,h2,h3,h4,p,ul,ol,figure{margin:0}ul,ol{padding:0;list-style:none}
a{color:inherit;text-decoration:none}img{display:block;max-width:100%}
main{margin-right:var(--tabs);position:relative;z-index:1}
.wrap{max-width:1180px;margin:0 auto;padding:0 var(--gut)}
.narrow{max-width:820px}
.eyebrow{font:600 11.5px/1 Outfit;letter-spacing:.22em;text-transform:uppercase;color:var(--accent)}
h1{font:600 clamp(42px,6vw,76px)/1.02 Outfit;letter-spacing:-.04em}
h2{font:600 clamp(30px,3.8vw,50px)/1.06 Outfit;letter-spacing:-.035em}
h3{font:600 21px/1.2 Outfit;letter-spacing:-.02em}
.lead{font-size:19.5px;color:var(--mid);max-width:46ch}
.muted{color:var(--mid)}
section{padding:clamp(64px,8vw,116px) 0;position:relative}

/* ---------- edge tabs, softened ---------- */
.tabs{position:fixed;right:0;top:0;bottom:0;width:var(--tabs);display:flex;flex-direction:column;z-index:60}
.tabs a{flex:1;background:var(--c);display:flex;align-items:center;justify-content:center;
  transition:flex-grow .34s var(--ease)}
.tabs a span{writing-mode:vertical-rl;color:#fff;font:700 12px/1 Outfit;letter-spacing:.18em;
  text-transform:uppercase;background:var(--c);padding:16px 4px;border-radius:4px}
.tabs a:hover,.tabs a.on{flex-grow:1.7}
.tabs a.on::before{content:"";position:absolute;left:-7px;top:50%;transform:translateY(-50%);
  border:7px solid transparent;border-right-color:var(--c);border-left:0}
.tabs a{position:relative}

/* ---------- nav ---------- */
.nav{position:sticky;top:0;z-index:50;backdrop-filter:blur(14px);
  background:rgba(255,255,255,.93);transition:box-shadow .3s var(--ease);
  border-bottom:1px solid var(--hair)}
.nav.stuck{box-shadow:var(--sh1)}
.nav .in{display:flex;align-items:center;gap:32px;height:74px}
.logo{font:600 24px/1 Outfit;letter-spacing:-.03em}
.nav nav{display:flex;gap:26px;margin-left:8px}
.nav nav a{font-size:15px;font-weight:500;color:var(--mid);position:relative;padding:4px 0}
.nav nav a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:2px;
  background:var(--accent);border-radius:2px;transition:right .34s var(--ease)}
.nav nav a:hover::after,.nav nav a.on::after{right:0}
.nav nav a.on{color:var(--ink)}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:9px;background:var(--accent);color:#fff;
  padding:15px 27px;border-radius:999px;font-weight:600;font-size:16px;
  box-shadow:var(--sh1);transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.btn:hover{transform:translateY(-2px);box-shadow:var(--sh2)}
.btn i{transition:transform .3s var(--ease);font-style:normal}
.btn:hover i{transform:translateX(4px)}
.btn.soft{background:rgba(33,30,26,.05);color:var(--ink);box-shadow:none}
.btn.soft:hover{background:rgba(33,30,26,.09)}
.btn.on-dark{background:#fff;color:var(--ink)}

/* ---------- media: photo slots. drop <img> in, tint stays ---------- */
.ph{position:relative;overflow:hidden;border-radius:var(--r-lg);background:var(--c,var(--steward));
  box-shadow:var(--sh2);isolation:isolate}
.ph img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease)}
.ph::after{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(150deg,rgba(255,255,255,.24),transparent 46%),
             linear-gradient(20deg,rgba(0,0,0,.34),transparent 58%)}
/* Neutral slot: real photography reads true, colour comes from the picture.
   Saturated ink is reserved for archetype-specific moments. */
.ph.neutral{background:#cfc6b6}
.ph.neutral::after{background:linear-gradient(15deg,rgba(0,0,0,.46),transparent 62%)}

/* full-bleed hero, text over image */
.hero-full{position:relative;min-height:min(88vh,860px);display:flex;align-items:flex-end;
  border-radius:0 0 var(--r-lg) 0;overflow:hidden;
  /* Fallback ground until hero photography ships. It has to be dark: the copy
     is white, and ::after only darkens the lower half - that overlay is sized
     for legibility OVER a photo, not instead of one. Against the old light
     placeholder the eyebrow and headline sat at roughly 2:1. Per-page grounds
     below override this; it is the floor for any hero that names no variant. */
  background:linear-gradient(158deg,#3a332b 0%,#262019 46%,#1a1613 100%)}
.hero-full>.bg{position:absolute;inset:0;z-index:0}
.hero-full>.bg img{width:100%;height:100%;object-fit:cover}
.hero-full::after{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(8deg,rgba(20,16,12,.72),rgba(20,16,12,.18) 52%,transparent 76%)}
/* The hero is a flex row, so this wrap was a shrink-to-fit flex item: `margin:0 auto`
   centred it on the width of the longest headline line and zeroed padding pulled the
   copy off the page gutter. Every other section sits on --gut; the hero has to as
   well, or the first thing on the page is the one thing out of line. Worst at tablet,
   where the shrink-wrapped column was inset 78px against the site's 20px. */
.hero-full>.in{position:relative;z-index:2;color:#fff;width:100%;min-width:0;
  padding:0 var(--gut) clamp(46px,6vw,84px)}
.hero-full h1{max-width:15ch}
.hero-full .lead{color:rgba(255,255,255,.9);max-width:44ch}
.hero-full .eyebrow{color:#fff;opacity:.85}
.cue{position:absolute;right:var(--gut);bottom:38px;z-index:2;color:#fff;font:600 11px/1 Outfit;
  letter-spacing:.22em;text-transform:uppercase;display:flex;align-items:center;gap:10px;opacity:.9}
.cue::after{content:"";width:1px;height:34px;background:currentColor;animation:cue 1.9s var(--ease) infinite}
@keyframes cue{0%,100%{transform:scaleY(.35);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}}
.ph:hover img{transform:scale(1.045)}
.ph .cap{position:absolute;left:22px;bottom:20px;z-index:2;color:#fff}
.ph .cap b{display:block;font:600 22px/1.15 Outfit;letter-spacing:-.02em}
.ph .cap span{font-size:14px;opacity:.9}
.ph.tall{aspect-ratio:3/4}.ph.wide{aspect-ratio:16/10}.ph.sq{aspect-ratio:1}

/* Step label. A real ordinal because the method runs in order — carried as a
   typographic eyebrow, never a filled chip. */
.stepn{display:flex;align-items:center;gap:10px;font:600 11.5px/1 Outfit;
  letter-spacing:.2em;text-transform:uppercase;color:var(--c,var(--accent));margin-bottom:14px}
.stepn::after{content:"";flex:1;height:1px;background:currentColor;opacity:.28}

.panel{background:var(--card);transition:background-color .75s var(--ease)}

/* ---------- cards: shadow + layering, no outline ---------- */
.card{background:var(--card);border-radius:var(--r);padding:28px;box-shadow:var(--sh1);
  transition:transform .38s var(--ease),box-shadow .38s var(--ease)}
.card:hover{transform:translateY(-5px);box-shadow:var(--sh2)}
.card p{color:var(--mid);font-size:15.5px;margin-top:7px}

/* animated gradient edge — used sparingly, one element per page */
/* Animated gradient ring. Clipped by overflow, so nothing bleeds onto the page. */
.glow{position:relative;border-radius:var(--r);overflow:hidden;box-shadow:var(--sh2);background:var(--card)}
.glow::before{content:"";position:absolute;inset:-65%;z-index:0;
  background:conic-gradient(from 0deg,var(--steward),var(--guide),var(--connector),var(--maverick),var(--strategist),var(--steward));
  animation:spin 9s linear infinite}
.glow::after{content:"";position:absolute;inset:2px;z-index:1;background:var(--card);
  border-radius:calc(var(--r) - 2px)}
.glow>*{position:relative;z-index:2}
@keyframes spin{to{transform:rotate(1turn)}}

/* ---------- layout helpers ---------- */
.grid{display:grid;gap:26px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(34px,6vw,80px);align-items:center}
.stack{display:flex;flex-direction:column;gap:18px;align-items:flex-start}
.offset{margin-top:56px}          /* layering: break the baseline */
.overlap{margin-top:-84px;position:relative;z-index:2}

/* ---------- scroll motion ---------- */
/* Content is visible by default. Only once JS confirms it is running do we hide
   and animate — so a JS failure degrades to a plain readable page, never a blank one. */
.js .rv{opacity:0;transform:translateY(22px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.js .rv.in{opacity:1;transform:none}
.rv.d1{transition-delay:.09s}.rv.d2{transition-delay:.18s}.rv.d3{transition-delay:.27s}
@media (prefers-reduced-motion:reduce){
  .rv{opacity:1;transform:none;transition:none}
  .glow::before{animation:none}
  *{scroll-behavior:auto}
}

/* ---------- scroll-driven shape: arch + morphing section edge ----------
   Baseline uses the .in class (works everywhere). Where the browser supports
   scroll-driven timelines the shape tracks scroll position continuously. */
/* A radius far wider than the element cuts a shallow arc across the section's
   top edge — a slice of a very large circle, not a dome. The arc is deep as the
   section approaches and relaxes as it settles, so the boundary reshapes on scroll. */
.curve{position:relative;margin-top:-2px}
.js .curve{border-radius:100% 100% 0 0 / 180px 180px 0 0;transition:border-radius 1.2s var(--ease)}
.js .curve.in{border-radius:100% 100% 0 0 / 68px 68px 0 0}

/* inverted: the arc bulges upward out of the preceding section */
.js .curve.up{border-radius:100% 100% 0 0 / 20px 20px 0 0}
.js .curve.up.in{border-radius:100% 100% 0 0 / 118px 118px 0 0}

@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .js .curve{animation:arcSettle linear both;animation-timeline:view();animation-range:entry 0% cover 38%;transition:none}
    .js .curve.up{animation:arcRise linear both}
  }
}
@keyframes arcSettle{
  from{border-radius:100% 100% 0 0 / 180px 180px 0 0}
  to{border-radius:100% 100% 0 0 / 68px 68px 0 0}
}
@keyframes arcRise{
  from{border-radius:100% 100% 0 0 / 20px 20px 0 0}
  to{border-radius:100% 100% 0 0 / 118px 118px 0 0}
}
@media (prefers-reduced-motion:reduce){
  .js .curve{border-radius:100% 100% 0 0 / 68px 68px 0 0;transition:none;animation:none}
  .js .curve.up{border-radius:100% 100% 0 0 / 118px 118px 0 0;animation:none}
}

/* ---------- footer ---------- */
/* Chrome sits on the card plane, content on the tinted ground. White clears every
   archetype ground by ΔE 11+ and is always the lighter of the two, so the header and
   footer never blend into whichever profile is in view. */
footer{padding:56px 0 76px;color:var(--faint);font-size:13.5px;line-height:1.7;
  background:var(--card);border-top:1px solid var(--hair);margin-top:clamp(40px,6vw,90px)}
footer .fin{max-width:70ch}
@media(max-width:980px){
  .g4{grid-template-columns:repeat(2,1fr)}.g3{grid-template-columns:1fr}
  .split{grid-template-columns:1fr}.overlap{margin-top:0}.offset{margin-top:0}
  .nav nav{display:none}
}

/* ---------- intake form ---------- */
.intake{background:var(--card);border-radius:var(--r-lg);box-shadow:var(--sh3);padding:clamp(26px,3.4vw,40px)}
.field{margin-bottom:15px}
.field label{display:block;font:600 12px/1 Outfit;letter-spacing:.1em;text-transform:uppercase;
  color:var(--faint);margin-bottom:8px}
.field input,.field textarea{width:100%;font:400 16px/1.5 Outfit;color:var(--ink);
  background:color-mix(in srgb,var(--ink) 3%,var(--card));border:1px solid var(--hair);
  border-radius:14px;padding:13px 15px;transition:border-color .25s var(--ease),box-shadow .25s var(--ease)}
.field textarea{min-height:78px;resize:vertical}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--accent);
  box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 14%,transparent)}
/* ---------- forms and notices outside the assessment mount ----------
   g2-quiz.css carries these scoped to #app, where they have to outrank
   g2.css's own `.card p`. The intake on start.html is a plain form in a
   card, not an engine render, so it needs them unscoped as well. Keep the
   two in step: a .field-error that is not display:none by default shows
   every validation message at once. */
.field select{width:100%;font:400 16px/1.5 Outfit;color:var(--ink);
  background:color-mix(in srgb,var(--ink) 3%,var(--card));border:1px solid var(--hair);
  border-radius:14px;padding:13px 15px;appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--faint) 50%),linear-gradient(135deg,var(--faint) 50%,transparent 50%);
  background-position:calc(100% - 19px) calc(50% + 2px),calc(100% - 14px) calc(50% + 2px);
  background-size:5px 5px,5px 5px;background-repeat:no-repeat}
.field select:focus{outline:none;border-color:var(--accent);
  box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 14%,transparent)}
.field__opt{font-weight:500;text-transform:none;letter-spacing:0;color:var(--faint)}
.field-error{display:none;font-size:13px;color:var(--maverick);margin-top:7px}
.field-error.show{display:block}
.send-warn{background:color-mix(in srgb,var(--connector) 10%,var(--card));
  border-radius:14px;padding:14px 16px;font-size:14.5px;line-height:1.55;color:var(--ink);margin-top:16px}
.send-warn a{color:var(--accent);font-weight:600}
/* The milestone breakdown on the intake. A buyer clicking a five-figure CTA
   needs the 40% figure in front of the payment page, not behind it. */
.planbox{background:color-mix(in srgb,var(--accent) 7%,var(--card));
  border-radius:16px;padding:18px 20px;margin-bottom:22px}
.planbox__head{font:600 11.5px/1 Outfit;letter-spacing:.18em;text-transform:uppercase;
  color:var(--accent);margin:0 0 12px}
.planbox__rows{list-style:none;margin:0;padding:0}
.planbox__rows li{display:flex;justify-content:space-between;gap:14px;align-items:baseline;
  padding:7px 0;font-size:14.6px;color:var(--mid);border-bottom:1px solid var(--hair)}
.planbox__rows li:last-child{border-bottom:0}
.planbox__rows b{color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap}
.planbox__rows b.due{color:var(--accent)}
.planbox__due{margin:12px 0 0;font-size:15px;font-weight:600;color:var(--ink)}
.planbox__pick{margin-top:14px;display:flex;flex-direction:column;gap:9px}
.planbox__opt{display:flex;gap:11px;align-items:flex-start;cursor:pointer;
  background:var(--card);border:1px solid var(--hair);border-radius:12px;
  padding:12px 14px;font-size:14.4px;line-height:1.45;color:var(--ink);
  transition:border-color .2s var(--ease)}
.planbox__opt:hover{border-color:var(--accent)}
.planbox__opt input{margin-top:2px;accent-color:var(--accent);flex:0 0 auto}
.planbox__opt:has(input:checked){border-color:var(--accent);
  background:color-mix(in srgb,var(--accent) 8%,var(--card))}
.planbox__prepay{margin:8px 0 0;font-size:13.8px;line-height:1.55;color:var(--faint)}
.intake__legend{font:600 11.5px/1 Outfit;letter-spacing:.22em;text-transform:uppercase;
  color:var(--accent);margin:30px 0 14px;padding-top:20px;border-top:1px solid var(--hair)}
.intake__legend:first-of-type{margin-top:0;padding-top:0;border-top:0}
.intake__tier{display:inline-block;font:600 12.5px/1 Outfit;letter-spacing:.04em;color:var(--accent);
  background:color-mix(in srgb,var(--accent) 11%,var(--card));padding:10px 14px;border-radius:99px;margin-bottom:22px}
.btn--full{width:100%;justify-content:center;margin-top:8px}
.ticks{list-style:none;padding:0;margin:14px 0 0}
.ticks li{position:relative;padding-left:26px;margin-bottom:10px;color:var(--mid);font-size:15.4px;line-height:1.55}
.ticks li:before{content:"";position:absolute;left:2px;top:.55em;width:9px;height:5px;
  border-left:2px solid var(--accent);border-bottom:2px solid var(--accent);transform:rotate(-45deg)}
.helper{font-size:13.5px;color:var(--faint);margin-top:12px}
/* ---------- legal footer ---------- */
.legal{margin-top:22px;display:grid;gap:13px;max-width:88ch}
.legal p{font-size:12.8px;line-height:1.62}
.legal strong{color:var(--mid)}
.legal a{border-bottom:1px solid var(--hair)}
.legal a:hover{border-color:var(--mid)}
.teamlink{margin-left:auto;font-size:14.5px;font-weight:600;color:var(--accent);white-space:nowrap}
@media(max-width:1100px){.teamlink{display:none}}

/* ---------- share the test ---------- */
.share{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.share .lbl{font:600 11.5px/1 Outfit;letter-spacing:.2em;text-transform:uppercase;color:var(--faint)}
.share a,.share button{display:inline-flex;align-items:center;gap:7px;font:600 14px/1 Outfit;
  color:var(--ink);background:var(--card);border:0;border-radius:999px;padding:10px 16px;
  box-shadow:var(--sh1);cursor:pointer;transition:transform .28s var(--ease),box-shadow .28s var(--ease)}
.share a:hover,.share button:hover{transform:translateY(-2px);box-shadow:var(--sh2)}
.share svg{width:15px;height:15px;fill:currentColor}
.share.on-dark .lbl{color:rgba(255,255,255,.72)}
.share.on-dark a,.share.on-dark button{background:rgba(255,255,255,.14);color:#fff;box-shadow:none}
.share.on-dark a:hover,.share.on-dark button:hover{background:rgba(255,255,255,.24)}
.share .ok{color:var(--operator);font-weight:600;font-size:14px}

/* Cards sitting on the white panel need their own ground, and a short rule in the
   card's colour carries identity now that the numbered chip is gone. */
.panel .card{background:color-mix(in srgb,var(--ink) 3.5%,var(--card))}
.svc .card h3{padding-top:16px;position:relative}
.svc .card h3::before{content:"";position:absolute;top:0;left:0;width:30px;height:3px;
  border-radius:2px;background:var(--c,var(--accent))}

/* ================= ACCESSIBILITY & RESPONSIVE FIXES ================= */

/* Keyboard focus. The design is custom, so the focus ring should be too. */
:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:6px}
.tabs a:focus-visible{outline-offset:-4px}

.skip{position:absolute;left:16px;top:-70px;z-index:100;background:var(--ink);color:var(--paper);
  padding:12px 20px;border-radius:0 0 12px 12px;font-weight:600;transition:top .2s var(--ease)}
.skip:focus{top:0}

/* The scroll cue pulses forever — must stop for reduced-motion users. */
@media (prefers-reduced-motion:reduce){
  .cue::after{animation:none}
  .ph img{transition:none}
  .btn,.card,.jump a,.eight a{transition:none}
}

/* Legal type was running 122ch. Cap the measure. */
.legal p{max-width:56ch}
.narrow p:not(.lead):not(.eyebrow):not(.helper){max-width:54ch}

/* ---- mobile navigation ---- */
.navtoggle{display:none;margin-left:auto;background:none;border:0;padding:10px;cursor:pointer;
  width:44px;height:44px;align-items:center;justify-content:center}
.navtoggle span{display:block;width:22px;height:2px;background:var(--ink);border-radius:2px;position:relative;
  transition:background .2s var(--ease)}
.navtoggle span::before,.navtoggle span::after{content:"";position:absolute;left:0;width:22px;height:2px;
  background:var(--ink);border-radius:2px;transition:transform .28s var(--ease)}
.navtoggle span::before{top:-7px}.navtoggle span::after{top:7px}
.navtoggle[aria-expanded="true"] span{background:transparent}
.navtoggle[aria-expanded="true"] span::before{transform:translateY(7px) rotate(45deg)}
.navtoggle[aria-expanded="true"] span::after{transform:translateY(-7px) rotate(-45deg)}

@media(max-width:980px){
  /* The band is the site's identity, not decoration, so it stays through the
     tablet and half-screen range rather than vanishing at the first breakpoint.
     It narrows instead: 34px is legible as colour and costs 4.5% of a 750px
     half-screen window, where 60px cost 8%. The labels go - vertical type at
     this width is unreadable and was only ever a hover affordance. */
  :root{--tabs:34px}
  /* archetypes.html builds the band from <button> (they turn the dial) while
     every other page uses <a>. Both, or the labels survive on the one page
     where the band is widest. */
  .tabs a span,.tabs button span{display:none}
  .tabs a:hover,.tabs a.on,.tabs button:hover,.tabs button.on{flex-grow:1}
  .navtoggle{display:flex}
  /* Header row, right to left: close, then the action, then everything else.
     The toggle was picking up margin-left:auto and landing BEFORE the button,
     which put the X in the middle of the bar and the CTA hard against the
     edge. Order is stated here rather than left to source order. */
  .nav .in{gap:14px;min-height:64px;height:auto;flex-wrap:wrap;row-gap:0}
  .logo{order:1;margin-right:auto}
  .nav .btn{order:2}
  .navtoggle{order:3;margin-left:0}
  .nav nav{display:none;position:absolute;left:0;right:0;top:100%;background:var(--card);
    flex-direction:column;gap:0;padding:8px 20px 18px;box-shadow:var(--sh2);
    border-bottom:1px solid var(--hair)}
  .nav.open nav{display:flex}
  .nav nav a{font-size:17px;padding:14px 0;border-bottom:1px solid var(--hair)}
  .nav nav a::after{display:none}
  /* Its own full-width row under the header, centred, only while the menu is
     open. In the header flex row it was being squeezed between the nav links
     and the button with nowhere to go. */
  .nav.open .teamlink{display:block;order:4;width:100%;margin:0;text-align:center;
    padding:13px 0 15px;border-top:1px solid var(--hair)}
  .nav .btn{padding:12px 18px;font-size:14.5px}
  :root{--gut:20px}
  .hero-full>.in{padding-bottom:44px}
  .legal p,.narrow p:not(.lead){max-width:none}
}
@media(max-width:620px){
  /* Below this the band stops being a signature and starts being a margin
     nobody asked for. A phone needs every pixel of measure it has. */
  :root{--tabs:0px}
  .tabs{display:none}
  .g4,.g2{grid-template-columns:1fr}
  .strip,.jump,.grid.eight{grid-template-columns:repeat(2,1fr)!important}
  .stats{flex-wrap:wrap;gap:26px}
  .share{gap:9px}
}

/* ---------- compact hero ----------
   .hero-full is a full-bleed photo hero, and with no photography shipped yet
   every page carrying it renders the same 88vh block of placeholder brown.
   Arriving at /discovery from / therefore looked like the page had failed to
   change - same height, same colour, same scroll cue, and the actual content
   pushed off-screen underneath.

   The home page keeps the full statement hero. Pages people arrive at to DO
   something get this instead: roughly half the height, its own ground, and no
   scroll cue, because the thing worth scrolling to should already be visible. */
.hero-full.hero-compact{min-height:min(50vh,420px)}

/* ---------- one ground per page ----------
   Every hero used to share a single placeholder colour, so moving between
   them looked like the page had not changed. Each now carries the ink of the
   archetype family its subject belongs to, dark enough to hold white copy on
   its own. A real photograph, when one ships, covers this entirely. */
/* Named once here because a hero slide picks its ground the same way a page
   does. Without the names, a slide about spend on the home page and the systems
   page it links to would be two unrelated hex triplets that have to be kept
   equal by hand. Four more follow the same recipe - the archetype ink darkened
   until white copy clears it on its own - for subjects that have a slide but
   not yet a page. */
:root{
  --g-home:linear-gradient(158deg,#4a4136 0%,#2e2820 46%,#1d1915 100%);
  --g-discovery:linear-gradient(152deg,#0e2c2d 0%,#13403f 48%,#092021 100%);
  --g-systems:linear-gradient(152deg,#0b2a42 0%,#0f3d5e 48%,#071d2e 100%);
  --g-services:linear-gradient(152deg,#3f2f10 0%,#5a4415 48%,#251b09 100%);
  --g-team:linear-gradient(152deg,#241a44 0%,#332561 48%,#161029 100%);
  --g-operator:linear-gradient(152deg,#0c2a16 0%,#123f20 48%,#071f0f 100%);
  --g-steward:linear-gradient(152deg,#08292c 0%,#0d3d42 48%,#051d20 100%);
  --g-connector:linear-gradient(152deg,#3d1e0a 0%,#592c10 48%,#210f05 100%);
  --g-maverick:linear-gradient(152deg,#3b0f18 0%,#591522 48%,#20080f 100%);
}
.hero-full.hero--home{background:var(--g-home)}
.hero-full.hero--discovery{background:var(--g-discovery)}
.hero-full.hero--systems{background:var(--g-systems)}
.hero-full.hero--services{background:var(--g-services)}
.hero-full.hero--team{background:var(--g-team)}
.hero-full.hero-compact::after{
  background:linear-gradient(6deg,rgba(6,18,18,.5),rgba(6,18,18,.1) 62%,transparent 84%)}
.hero-full.hero-compact>.in{padding:clamp(26px,3.2vw,40px) var(--gut) clamp(26px,3.2vw,42px)}
.hero-full.hero-compact h1{max-width:19ch;font-size:clamp(28px,3.6vw,44px);margin:14px 0 18px!important}
.hero-full.hero-compact .lead{max-width:52ch}
.hero-full.hero-compact .cue{display:none}

/* ---------- band dial ----------
   The archetypes-page ring, reused on the home page to show what an archetype
   is rather than assert it.

   The gradient is built in g2.js the same way that page builds it: three full
   cycles of the eight inks, each a SINGLE stop rather than a range, so the
   conic gradient blends between neighbours. Stated as ranges you get eight
   flat wedges with hard seams, which is what the first version of this did and
   why it read as a cheap imitation of the real one.

   Rotation is a transform driven by rAF, not a CSS animation - same as the
   archetypes page, so the two rings behave identically. */
.bandpick{position:relative;width:min(330px,74vw);aspect-ratio:1;margin:0 auto;
  isolation:isolate;justify-self:center}
.bandpick__ring{position:absolute;inset:0;border-radius:50%;z-index:1;
  -webkit-mask:radial-gradient(circle,transparent 55.5%,#000 56%);
          mask:radial-gradient(circle,transparent 55.5%,#000 56%);
  filter:saturate(1.14);will-change:transform}
/* Flat by intent, exactly as on the archetypes page: the band is the colour and
   nothing else, and a hairline at the outer edge is what keeps it crisp
   instead of fading out. */
.bandpick__gloss{position:absolute;inset:0;border-radius:50%;z-index:2;
  pointer-events:none;
  background:radial-gradient(circle at 50% 50%,transparent 98.6%,rgba(33,30,26,.18) 99.4%,transparent 100%)}
/* the indicator the band turns under */
.bandpick__marker{position:absolute;left:50%;top:-7%;width:0;height:0;z-index:4;
  transform:translateX(-50%);border:7px solid transparent;border-top-color:var(--ink)}
.bandpick__marker::after{content:"";position:absolute;left:50%;top:5px;width:2px;
  height:calc(7% + 14px);transform:translateX(-50%);background:rgba(255,255,255,.85);
  border-radius:2px;box-shadow:0 0 0 1px rgba(0,0,0,.28)}
/* sized to meet the band's inner edge, so the middle is one clean disc */
.bandpick__hub{position:absolute;inset:10.4%;border-radius:50%;z-index:3;
  display:grid;place-content:center;text-align:center;background:var(--card);padding:9%}
.bandpick__hub .k{font:600 10px/1 Outfit;letter-spacing:.24em;text-transform:uppercase;
  color:var(--faint)}
.bandpick__hub b{display:block;font:600 clamp(20px,2.2vw,27px)/1.15 Outfit;
  letter-spacing:-.025em;color:var(--live,var(--accent));margin:9px 0 7px;
  transition:color .5s var(--ease)}
.bandpick__hub .t{font-size:13.5px;line-height:1.45;color:var(--mid)}
/* The grabbable annulus. Masked to the band itself so the hub stays selectable
   and the page behind it stays scrollable - you are grabbing the ring, not a
   square over the middle of the section. */
.bandpick__hit{position:absolute;inset:0;border-radius:50%;z-index:5;cursor:grab;
  touch-action:none;
  -webkit-mask:radial-gradient(circle,transparent 55.5%,#000 56.5%);
          mask:radial-gradient(circle,transparent 55.5%,#000 56.5%)}
.bandpick__hit:active{cursor:grabbing}
.bandpick__hit:focus-visible{outline:3px solid var(--live,var(--accent));outline-offset:6px}

/* the section ground follows the named archetype */
#eight{transition:background-color .8s var(--ease)}
@media(prefers-reduced-motion:reduce){#eight{transition:none}}
@media(max-width:980px){.bandpick{width:min(280px,68vw);margin-top:34px}}

/* ---------- hero slider ----------
   A hero that carries more than one offer.

   Every slide is in the DOM at load. With JS off they stack and all of them
   read, each on its own ground - the same progressive shape the share row and
   the band dial already use, and the reason a crawler is never shown one
   headline while a visitor is shown four.

   Rotation is an accessibility surface, not a decoration. WCAG 2.2.2 wants a
   pause for anything that moves for more than five seconds, so the strip
   carries one, and rotation also stops on hover, on focus, off-screen, in a
   hidden tab, and for anyone who has asked for reduced motion.

   The strip names its slides rather than dotting them. Anonymous dots are the
   reason most hero carousels are never clicked past the first slide; a label
   is the only thing that tells someone the next one is about their problem. */
.hs{position:relative}
/* Two ground layers, swapped alternately, so a crossfade costs two elements
   rather than one per slide. Painted only once JS is driving them - without it
   each slide paints its own ground instead, further down. */
.hs__ground{position:absolute;inset:0;z-index:0;opacity:0;display:none;
  transition:opacity .85s var(--ease)}
.js .hs__ground{display:block}
.js .hs__ground.on{opacity:1}
.hs__stage{position:relative;z-index:2;width:100%;min-width:0;
  display:flex;flex-direction:column;justify-content:flex-end}
.hs__track{position:relative;min-width:0}
.js .hs__track{display:grid}

/* No JS: every slide is a readable panel with its own ground and its own
   overlay. --g is set per slide in the markup, next to the copy it belongs to. */
.hs__slide{position:relative;min-width:0;background-image:var(--g);background-size:cover}
.hs__slide::before{content:"";position:absolute;inset:0;z-index:0;
  background:linear-gradient(8deg,rgba(20,16,12,.72),rgba(20,16,12,.18) 52%,transparent 76%)}
/* Stacked in one grid cell, every slide is as tall as the tallest one. Copy
   sits at the bottom of that cell rather than the top, so a short slide
   keeps the hero's own bottom-aligned line instead of floating above it. */
.js .hs__slide{background-image:none;grid-area:1/1;display:flex;flex-direction:column;justify-content:flex-end}
.js .hs__slide::before{display:none}
.hs__slide>.in{position:relative;z-index:1;color:#fff;width:100%;min-width:0;
  padding:0 var(--gut) clamp(30px,3.4vw,44px)}
.hs:not(.hero-compact) .hs__slide:first-child>.in{padding-top:clamp(40px,6vw,84px)}
.hs.hero-compact .hs__slide>.in{padding-top:clamp(26px,3.2vw,40px)}

/* Hidden slides keep their box - the track is as tall as the tallest slide, so
   changing slide never resizes the hero - but lose paint, hit-testing and
   focus. `inert` is set alongside this in JS; visibility alone still lets a
   screen reader walk the text. */
.js .hs__slide{opacity:0;visibility:hidden;pointer-events:none;transform:translateY(14px);
  transition:opacity .55s var(--ease),transform .55s var(--ease),visibility 0s .55s}
.js .hs__slide.on{opacity:1;visibility:visible;pointer-events:auto;transform:none;
  transition:opacity .65s var(--ease) .05s,transform .65s var(--ease) .05s,visibility 0s}

/* The strip. Sits on the hero's own gutter, on the same line the copy starts. */
.hs__ui{position:relative;z-index:3;display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  padding:0 var(--gut) clamp(22px,3vw,34px)}
.hs__labels{display:flex;align-items:stretch;gap:4px;flex-wrap:wrap;min-width:0}
.hs__label{appearance:none;border:0;background:none;cursor:pointer;color:rgba(255,255,255,.62);
  font:600 11.5px/1 Outfit;letter-spacing:.14em;text-transform:uppercase;
  padding:11px 2px 13px;position:relative;transition:color .3s var(--ease);
  margin-right:18px;white-space:nowrap}
.hs__label:last-child{margin-right:0}
.hs__label::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
  background:#fff;transform:scaleX(0);transform-origin:left;
  transition:transform .5s var(--ease);border-radius:2px}
.hs__label:hover{color:#fff}
.hs__label[aria-current="true"]{color:#fff}
.hs__label[aria-current="true"]::after{transform:scaleX(1)}
.hs__label:focus-visible{outline:2px solid #fff;outline-offset:3px;border-radius:3px}
/* The bar fills across the dwell so the strip says how long is left rather than
   moving on without warning. Zeroed whenever rotation is paused or unavailable. */
.hs__label[aria-current="true"].timing::after{transform:scaleX(1);
  animation:hsDwell linear forwards;animation-duration:var(--dwell,9s)}
@keyframes hsDwell{from{transform:scaleX(0)}to{transform:scaleX(1)}}

.hs__ctrls{display:flex;align-items:center;gap:6px;margin-left:auto}
.hs__btn{appearance:none;width:38px;height:38px;border-radius:50%;cursor:pointer;
  border:1px solid rgba(255,255,255,.32);background:rgba(255,255,255,.06);color:#fff;
  display:grid;place-items:center;transition:background .3s var(--ease),border-color .3s var(--ease)}
.hs__btn:hover{background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.6)}
.hs__btn:focus-visible{outline:2px solid #fff;outline-offset:3px}
.hs__btn svg{width:15px;height:15px;fill:currentColor;pointer-events:none}
.hs__live{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Two affordances at the bottom edge is one too many: the strip already says
   the hero has more in it, and it says so more usefully than the scroll rule. */
.hs .cue{display:none}

@media(max-width:900px){
  .hs__slide>.in{padding-bottom:34px}
  .hs__ui{padding-bottom:26px}
  .hs__label{font-size:10.5px;margin-right:13px;letter-spacing:.1em}
  .hs__ctrls{margin-left:0;width:100%;justify-content:flex-start}
}
@media(prefers-reduced-motion:reduce){
  .js .hs__slide{transform:none;transition:opacity .01s,visibility 0s .01s}
  .js .hs__slide.on{transform:none;transition:opacity .01s,visibility 0s}
  .hs__ground{transition:none}
  .hs__label::after{transition:none}
  .hs__label[aria-current="true"].timing::after{animation:none}
}