/* Round 9 "Modern, the one page" (2026-10-03). Built on r6-b-modern after the Oct 2 founder review. Tokens only; Oswald and
   Source Sans 3 only (Option D). No pinned scroll. Paper the whole way, charcoal twice: the inset value panel and the close.
   The wave (E01 and Astra's E01 family) carries the flow. Switches come in as html[data-r9open], [data-r9hero].
   r9c: titles a step bigger, charcoal also arrives on hover (how we think, the services steps), the close fades up out of the paper. */
:root{
  --s1:8px;--s2:16px;--s3:24px;--s4:32px;--s5:48px;--s6:64px;--s7:96px;--s8:128px;
  --max:1240px;
  --lift:cubic-bezier(.22,.61,.36,1);
  --shadow-lift:0 22px 40px -26px color-mix(in srgb,var(--tz-charcoal) 45%,transparent);
  --slash:.5317; /* tan(28deg): the wordmark slash, 28 degrees from vertical */
}
.section{padding:clamp(104px,15vh,160px) var(--gut)}
h2{font-size:clamp(2.4rem,4.4vw,3.9rem);line-height:1.04;letter-spacing:-.01em}
.eyebrow{margin-bottom:var(--s3)}
.eyebrow-n{margin-left:10px;color:var(--tz-charcoal);opacity:.55}
.vh{position:absolute!important;left:-10000px!important;width:1px;height:1px;overflow:hidden}
input,textarea,button{font-family:'Source Sans 3',sans-serif}

/* copy status chips: Draft = our words, not approved; Monday = needs the Oct 5 session */
.draft{display:inline-block;vertical-align:middle;margin:0 10px 0 0;padding:2px 7px;border:1px dashed var(--tz-oxblood);color:var(--tz-oxblood);font-family:'Oswald',sans-serif;font-weight:400;font-size:11px;letter-spacing:.1em;text-transform:uppercase;line-height:1.4;position:relative;top:-.1em}
.draft.mon{border-color:var(--tz-amber);color:var(--tz-charcoal);background:color-mix(in srgb,var(--tz-amber) 32%,transparent)}
[data-ground="charcoal"] .draft{border-color:var(--tz-stone);color:var(--tz-stone)}
[data-ground="charcoal"] .draft.mon{color:var(--tz-paper);background:color-mix(in srgb,var(--tz-amber) 40%,transparent)}

/* ---------- nav: the docked 100 left, the links centred, Book a call alone on the right ---------- */
.nav{justify-content:space-between}
.nav-links{position:absolute;left:50%;top:0;bottom:0;transform:translateX(-50%);margin:0;gap:40px}
.nav-cta{margin-left:auto}
@media (max-width:760px){.nav-links{display:none}}

/* ---------- openings (both locked, copied as is) ---------- */
.opening{color:var(--tz-paper);overflow:hidden}
.opening .wipe{position:absolute;top:-30%;bottom:-30%;left:-150%;width:300%;background:var(--tz-paper);transform:skewX(-28deg)}
/* open=100 (r2-7): the compact 100 large on charcoal */
.open-mark{position:relative;z-index:1;color:var(--tz-paper);transition:color .18s linear;width:min(46vw,calc(58svh * 1.3252));transform-origin:50% 50%}
.opening.flip .open-mark{color:var(--tz-oxblood)}
html[data-r9open="lockup"] .open-mark{display:none}
/* open=lockup (r2-1): the full lockup assembles on charcoal */
.opening .op-mark{position:relative;z-index:1;width:min(72vw,760px);color:var(--tz-paper);transition:color .18s linear;will-change:transform}
.opening.flip .op-mark{color:var(--tz-oxblood)}
@media (max-width:760px){
  .open-mark{width:min(84vw,calc(52svh * 1.3252))}
  .opening .op-mark{width:82vw}
  .opening .wipe{left:-350%;width:600%}
}
@media (max-aspect-ratio:1/1){.opening .wipe{left:calc(-150% - 110vh);width:calc(300% + 110vh)}}
html.rm #nav-mark > .tz-lockup{width:53px!important}

/* ---------- hero ---------- */
.hero{position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:center;padding:calc(var(--nav-h) + clamp(40px,8vh,88px)) var(--gut) clamp(56px,10vh,104px)}
.hero-in{position:relative;z-index:1;width:100%;max-width:var(--max);margin:0 auto}
.cue{display:none}
.hero-h1{font-size:clamp(2.4rem,4.9vw,4.4rem);line-height:1.02;letter-spacing:.005em;color:var(--tz-charcoal);max-width:none;text-wrap:initial}
.hl{display:block;overflow:hidden;padding-bottom:.04em;margin-bottom:-.04em}
.hl-in{display:block}
.hero-line{font-size:clamp(1.1rem,1.45vw,1.3rem);line-height:1.5;max-width:46ch;color:var(--tz-charcoal)}
.hero-act{gap:32px}
.hero-act .quiet{font-size:clamp(1.1rem,1.45vw,1.3rem)}
html.js:not(.rm) .hl-in{transform:translateY(108%)}
html.js:not(.rm) .hero-line,html.js:not(.rm) .hero-act{opacity:0;visibility:hidden;transform:translateY(10px)}

html[data-r9hero="edge"] #hero-mark{width:min(340px,24vw,calc((100svh - var(--nav-h)) * .235 * 1.6418))}
html[data-r9hero="edge"] .hero-h1{margin-top:clamp(40px,8.5vh,84px)}
html[data-r9hero="edge"] .hero-line{margin-top:clamp(22px,3.4vh,32px)}
html[data-r9hero="edge"] .hero-act{margin-top:clamp(28px,4.6vh,44px)}

/* hero=big: the full lockup alone on the first screen, centred on the wide sweep; the copy sits in the flow below and rises in
   as the lockup docks. Two screens, no pin. */
html[data-r9hero="big"] .hero{display:block;padding:0;min-height:0}
html[data-r9hero="big"] .hero-top{position:relative;min-height:100svh;display:grid;place-items:center;padding:var(--nav-h) var(--gut) 0}
html[data-r9hero="big"] #hero-mark{width:min(820px,74vw)}
html[data-r9hero="big"] .hero-copy{max-width:var(--max);margin:0 auto;padding:clamp(24px,6vh,64px) var(--gut) clamp(96px,16vh,160px);display:flex;flex-direction:column;align-items:center;text-align:center;gap:0}
html[data-r9hero="big"] .hero-h1{font-size:clamp(2.4rem,4.4vw,4rem);max-width:32ch}
html[data-r9hero="big"] .hero-line{margin-top:clamp(22px,3.4vh,32px);max-width:52ch}
html[data-r9hero="big"] .hero-act{margin-top:clamp(28px,4.6vh,44px);justify-content:center}
html[data-r9hero="big"].js:not(.rm) .cue{display:flex;position:absolute;left:0;right:0;bottom:clamp(20px,4vh,40px);margin:0 auto;width:max-content;flex-direction:column;align-items:center;gap:10px;color:var(--tz-charcoal);opacity:.7;font-size:12px;letter-spacing:.16em}
.cue i{display:block;width:1.5px;height:42px;background:var(--tz-charcoal);opacity:.5;transform-origin:50% 0;animation:cue 2.4s var(--ease) infinite}
@keyframes cue{0%{transform:scaleY(0)}45%{transform:scaleY(1);transform-origin:50% 0}55%{transform:scaleY(1);transform-origin:50% 100%}100%{transform:scaleY(0);transform-origin:50% 100%}}

/* ---------- what we do: the statement with the three things in oxblood, then three drawn icons ---------- */
.what .statement{font-size:clamp(1.7rem,2.95vw,2.65rem);line-height:1.22;letter-spacing:0;max-width:34ch;color:var(--tz-charcoal)}
.what .statement em{font-style:normal;color:var(--tz-oxblood)}
.pillars{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(28px,4vw,64px);margin-top:clamp(56px,9vh,96px)}
.pillar{border-top:1px solid var(--hair);padding-top:28px}
.pic{width:64px;height:64px;display:block;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;overflow:visible}
.pic .p-frame,.pic .p-box,.pic .p-people circle,.pic .p-people path{stroke:var(--tz-charcoal);stroke-opacity:.5}
.pic .p-box{fill:var(--tz-stone)}
.pic .p-route,.pic .p-wire,.pic .p-under{stroke:var(--tz-amber)}
.pic .p-end,.pic .p-dot{fill:var(--tz-amber)}
.pic .p-start{fill:var(--tz-charcoal);fill-opacity:.5}
.pillar h3.label{font-size:1.15rem;letter-spacing:.1em;color:var(--tz-oxblood);margin:24px 0 10px}
.pillar p{font-size:clamp(1.02rem,1.2vw,1.12rem);line-height:1.5;max-width:30ch}

/* ---------- the problem: the paper band carries the transition in; scattered tiles settle into one row ---------- */
.problem{position:relative;padding-top:clamp(150px,24vh,240px)}
.problem h2{max-width:30ch;font-size:clamp(2.3rem,3.9vw,3.5rem)}
.problem-line{margin-top:clamp(40px,6vh,56px);max-width:48ch}

/* ---------- why this matters: three values, one statement and one drawing each ---------- */
.value{padding-top:clamp(88px,12vh,128px);padding-bottom:clamp(88px,12vh,128px)}
.v-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(40px,7vw,120px);align-items:center}
.v-flip .v-text{order:2}
.v-text h2{font-size:clamp(2.8rem,5.2vw,4.8rem);line-height:1.01;max-width:12ch}
.v-text .lede{margin-top:var(--s3);max-width:40ch}
.v-art{margin:0}
.vg{display:block;width:100%;height:auto;overflow:visible;fill:none;--k:1;--fs:15px}
.vg text,.dia text{font-family:'Source Sans 3',sans-serif;font-weight:400;font-size:calc(var(--fs) * var(--k));fill:var(--tz-charcoal);stroke:none}
.v-art figcaption{margin-top:14px;font-style:italic;opacity:.6}
/* 01 grow (r9c): two lines over time. The team stays level in charcoal; the work climbs past it in amber; the room between is
   a pale amber field. No numbers. */
.vg-grow{aspect-ratio:360/230}
.vg-grow .g-cap,.dia .d-cap,.dia .d-label{font-family:'Oswald',sans-serif;font-size:calc(13px * var(--k));letter-spacing:.12em;fill:var(--tz-oxblood)}
.vg-grow .g-axis{stroke:var(--tz-charcoal);stroke-opacity:.3;stroke-width:1}
.vg-grow .g-team-l{stroke:var(--tz-charcoal);stroke-opacity:.7;stroke-width:2.5;stroke-linecap:round}
.vg-grow .g-work{stroke:var(--tz-amber);stroke-width:3;stroke-linecap:round}
.vg-grow .g-gap{fill:var(--tz-amber);fill-opacity:.14;stroke:none}
.vg-grow .g-start,.vg-grow .g-tend{fill:var(--tz-charcoal);fill-opacity:.7}
.vg-grow .g-wend{fill:var(--tz-amber)}
.vg-grow .g-t{font-size:calc(16px * var(--k))}
.vg-grow .g-wl{font-weight:600;fill:var(--tz-oxblood)}
.vg-grow .g-tl{fill-opacity:.78}
.vc-time{aspect-ratio:336/182;--k:.92}
/* 03 the document that writes itself from your tools (r8 drawing) */
.dia{aspect-ratio:300/200;--k:1;--fs:15px;display:block;width:100%;height:auto;fill:none;overflow:visible}
.dia .d-m{fill-opacity:.72}
.dia .d-s{font-weight:600}
.dia .d-plate{fill:var(--tz-stone);stroke:none}
.dia .d-src rect,.dia .d-page,.dia .d-fold,.dia .d-track{fill:none;stroke:var(--tz-charcoal);stroke-opacity:.42;stroke-width:1.5;stroke-linejoin:round}
.dia .d-src rect,.dia .d-page{fill:var(--tz-paper)}
.dia .d-wires path{fill:none;stroke:var(--tz-charcoal);stroke-opacity:.32;stroke-width:1.5}
.dia .d-ln{stroke:var(--tz-sage);stroke-width:1.5;stroke-linecap:round}
.dia .d-cur{fill:var(--tz-amber)}
.dia .d-cur.blink{animation:tz-blink 1.1s steps(1) infinite}
@keyframes tz-blink{50%{opacity:0}}
.v3 .dia-doc{aspect-ratio:300/200}

/* ---------- what we offer: the five services as one horizontal journey ---------- */
.svc-head h2{max-width:22ch}
.svc-wrap{position:relative;padding-top:8px}
.railh{position:absolute;left:0;right:0;top:15px;height:1.5px;background:var(--hair);transform:translateY(-.75px)}
.railh-fill{position:absolute;inset:0;background:var(--tz-amber);transform-origin:0 50%;transform:scaleX(1)}
.railh-arrow{position:absolute;right:-3px;top:50%;width:10px;height:14px;transform:translateY(-50%);fill:none;stroke:var(--tz-amber);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;overflow:visible}
html.js:not(.rm) .railh-fill{transform:scaleX(0)}
.svc{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(20px,2.6vw,40px);margin:0}
.step{position:relative;padding-top:38px}
.step-dot,.step-ring{position:absolute;left:0;top:0;width:15px;height:15px;border-radius:50%;pointer-events:none}
.step-dot{background:var(--tz-amber);border:1.5px solid var(--tz-amber);transition:background-color .25s linear,border-color .25s linear}
.step-ring{left:7.5px;top:7.5px;transform:translate(-50%,-50%);border:1.5px solid var(--tz-amber);opacity:0}
html.js:not(.rm) .step:not(.on) .step-dot{background:var(--tz-paper);border-color:var(--tz-oxblood)}
.svc-gn{display:block;font-family:'Source Sans 3',sans-serif;text-transform:none;letter-spacing:0;font-size:13px;opacity:.85;margin-top:2px}
.step-n{display:block;margin-bottom:10px;font-size:clamp(1.25rem,1.65vw,1.6rem);letter-spacing:.06em;line-height:1.2;color:var(--tz-oxblood);overflow:hidden;padding-bottom:.06em}
.sn-in{display:inline-block}
.step p{font-size:clamp(1rem,1.15vw,1.1rem);line-height:1.45;max-width:30ch}
.svc-get{margin-top:14px;font-weight:600;color:var(--tz-oxblood)}
.svc-get .label{display:block;font-size:11px;letter-spacing:.14em;color:var(--tz-charcoal);opacity:.6;margin-bottom:3px}
.svc-foot{margin-top:clamp(48px,7vh,72px);display:flex;gap:12px;align-items:flex-start;padding:16px 20px;background:var(--tz-stone);max-width:76ch;font-size:16px;line-height:1.45}
.lock{flex:none;width:20px;height:20px;margin-top:2px;fill:none;stroke:var(--tz-oxblood);stroke-width:1.5;stroke-linejoin:round}

/* ---------- how we think: three cards, each with a quiet drawing (amber alive, sage only in here) ---------- */
.dia-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2vw,28px);margin-top:var(--s6)}
.dia-item{padding:clamp(22px,2.2vw,32px);border:1px solid var(--hair);background:var(--tz-paper);transition:box-shadow .6s var(--lift)}
.dia-stage{margin:0 0 26px}
.dia-item h3{font-size:clamp(1.2rem,1.5vw,1.4rem);line-height:1.25;margin-bottom:8px}
.dia-item p{font-size:17px;line-height:1.45;max-width:34ch}
.dia .d-tier circle,.dia .d-tier path,.dia .d-team circle,.dia .d-team path{fill:none;stroke:var(--tz-charcoal);stroke-opacity:.5;stroke-width:1.5;stroke-linecap:round}
.dia .d-tools rect{fill:var(--tz-stone);stroke:var(--tz-charcoal);stroke-opacity:.42;stroke-width:1.5}
.dia .d-line{fill:none;stroke:var(--tz-amber);stroke-width:1.5;stroke-linecap:round}
.dia .d-slash{stroke:var(--tz-charcoal);stroke-opacity:.5;stroke-width:1.5}
.dia .d-team circle,.dia .d-team path{stroke:var(--tz-sage);stroke-opacity:1}
.dia .d-us{fill:var(--tz-paper);stroke:var(--tz-charcoal);stroke-opacity:.45;stroke-width:1.5;stroke-dasharray:4 4}
.dia .d-acc,.dia .d-link{fill:none;stroke:var(--tz-charcoal);stroke-opacity:.45;stroke-width:1.5;stroke-dasharray:4 4}
.dia .d-gate{fill:var(--tz-paper);stroke:var(--tz-charcoal);stroke-opacity:.7;stroke-width:1.5}
.dia .d-mark{opacity:.72}
.dia .d-key .d-bow,.dia .d-key .d-shaft{fill:none;stroke:var(--tz-amber);stroke-width:1.5;stroke-linecap:round}
.dia .d-key .d-bow-in{fill:var(--tz-amber)}
.dia .d-node{fill:var(--tz-paper);stroke:var(--tz-sage);stroke-width:1.5;transition:fill .3s linear}
.dia .d-node.hit{fill:var(--tz-sage)}
.dia .d-runner{fill:var(--tz-amber)}
@media (prefers-reduced-motion:reduce){.dia .d-cur.blink{animation:none}}
html.js:not(.rm) .dia-item[data-revealed]{transform:none}
@media (hover:hover){
  .dia-item{transition:transform .6s var(--lift),box-shadow .6s var(--lift)}
  .dia-item:hover{transform:translateY(-6px)!important;box-shadow:var(--shadow-lift)}
}

/* ---------- who we work with: the kinds, two quote slots, the upper-left flow behind ---------- */
.proof{position:relative}
.proof-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(40px,7vw,120px);align-items:center}
.proof h2{max-width:16ch}
.kinds{margin-top:var(--s4);display:grid;gap:12px}
.kinds li{position:relative;padding-left:24px;font-size:clamp(1.05rem,1.3vw,1.2rem);line-height:1.4}
.kinds li::before{content:"";position:absolute;left:6px;top:.3em;width:1.5px;height:.9em;background:var(--tz-amber);transform:skewX(-28deg)}
.quotes{display:grid;gap:20px}
.quote{position:relative;padding:30px 30px 26px 40px;background:var(--tz-stone)}
.q-slash{position:absolute;left:16px;top:30px;width:1.5px;height:30px;background:var(--tz-amber);transform:skewX(-28deg)}
.quote blockquote{margin:0}
.quote blockquote p{font-size:19px;line-height:1.45;color:var(--tz-charcoal)}
.q-who{margin-top:14px;opacity:.7}

/* the bar: charcoal on every ground, a thin strip under the nav (phones: bottom, from capture.css) */
.cap-bar{--cap-bar-bg:var(--tz-charcoal);--cap-bar-ink:var(--tz-paper);--cap-bar-hair:color-mix(in srgb,var(--tz-paper) 18%,transparent)}
.cap-bar[data-pos=top]{z-index:39;justify-content:center;padding:3px var(--gut)}
.cap-bar[data-pos=top] p{flex:0 1 auto;text-align:left}
.cap-bar .cap-bar-go:hover,.cap-bar .cap-bar-go:focus-visible{background:var(--tz-paper);color:var(--tz-charcoal)}
.cap-bar-x{opacity:.85}

/* ---------- the close: how to start, then the band line and the form, on the charcoal corner flow ---------- */
.contact{position:relative;isolation:isolate;padding-top:clamp(112px,16vh,176px);padding-bottom:clamp(104px,15vh,160px)}
.start{padding-bottom:clamp(64px,9vh,96px);margin-bottom:clamp(72px,10vh,120px);border-bottom:1px solid var(--hair-d)}
.start h2{max-width:18ch}
.start-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,3vw,40px);margin-top:var(--s5)}
.start-steps li{padding:24px 24px 26px;border-top:1.5px solid var(--tz-amber);background:color-mix(in srgb,var(--tz-paper) 6%,transparent)}
.start-n{display:block;font-family:'Oswald',sans-serif;font-size:1.6rem;letter-spacing:.04em;color:var(--tz-amber);margin-bottom:10px}
.start-steps h3{font-size:1.25rem;line-height:1.25;color:var(--tz-paper);margin-bottom:8px}
.start-steps p{font-size:17px;line-height:1.45;max-width:30ch}
.contact-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,6vw,96px);align-items:start}
.contact-copy{display:flex;flex-direction:column;gap:20px}
.band-mark{width:66px;height:auto}
.band-line{overflow:hidden;padding-bottom:.06em;margin-bottom:0}
.bl-in{display:inline-block}
.contact .band-line{color:var(--tz-paper)}
.direct a{color:var(--tz-amber)}
.form{display:grid;gap:18px;background:var(--tz-stone);color:var(--tz-charcoal);padding:clamp(24px,3.2vw,44px)}
.form label{display:grid;gap:6px;font-family:'Oswald',sans-serif;font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--tz-oxblood)}
.form input:not([type=hidden]),.form textarea{font:inherit;font-family:'Source Sans 3',sans-serif;font-size:17px;padding:12px 14px;border:1px solid color-mix(in srgb,var(--tz-charcoal) 22%,transparent);background:var(--tz-paper);color:var(--tz-charcoal);border-radius:0}
.form input:focus,.form textarea:focus{outline:2px solid var(--tz-amber);outline-offset:0;border-color:var(--tz-amber)}
.form .btn{justify-self:start}
.form .f-field{display:grid;gap:6px}
.form input[aria-invalid=true]{border-color:var(--tz-oxblood);box-shadow:inset 3px 0 0 var(--tz-oxblood)}
.contact .form .cap-err{color:var(--tz-oxblood)}
.contact .form .cap-consent{color:var(--tz-charcoal);margin-top:-4px}
.form .form-thanks{color:var(--tz-oxblood)}
.footer{border-top:1px solid var(--hair-d);background:var(--tz-charcoal);color:var(--tz-paper)}
.footer a{color:inherit}
.footer .foot-mark{width:56px}
.foot-draft{flex-basis:100%;font-size:14px}
.footer .draft{border-color:var(--tz-stone);color:var(--tz-stone)}

/* ---------- review options (this round): a pill bottom left, a small charcoal panel ---------- */
.opts{position:fixed;left:16px;bottom:16px;z-index:70;font-family:'Source Sans 3',sans-serif}
.opts-pill{font-family:'Oswald',sans-serif;text-transform:uppercase;letter-spacing:.1em;font-size:12px;padding:9px 13px;background:var(--tz-charcoal);color:var(--tz-paper);border:1px solid color-mix(in srgb,var(--tz-paper) 30%,transparent);cursor:pointer}
.opts-pill[aria-expanded="true"]{background:var(--tz-amber);color:var(--tz-charcoal);border-color:var(--tz-amber)}
.opts-panel{position:absolute;left:0;bottom:46px;width:250px;background:var(--tz-charcoal);color:var(--tz-paper);padding:16px 18px;display:grid;gap:14px;font-size:14px;border:1px solid color-mix(in srgb,var(--tz-paper) 18%,transparent)}
.opts-panel[hidden]{display:none}
.opts-panel fieldset{border:0;padding:0;margin:0;display:grid;gap:5px}
.opts-panel legend{font-family:'Oswald',sans-serif;text-transform:uppercase;letter-spacing:.12em;font-size:11px;color:var(--tz-amber);padding:0;margin-bottom:6px}
.opts-panel label{display:flex;align-items:center;gap:8px;cursor:pointer}
.opts-panel input{accent-color:var(--tz-amber);margin:0}
@media (max-width:760px){.opts{left:12px;bottom:70px}}

/* ---------- phones ---------- */
@media (max-width:760px){
  .section{padding:88px var(--gut)}
  h2{font-size:clamp(2.1rem,9.4vw,2.6rem)}
  .hero{padding-top:calc(var(--nav-h) + 40px);padding-bottom:56px}
  html[data-r9hero="edge"] #hero-mark{width:min(64vw,260px);margin-inline:auto} /* Oct 7 (Brayden): centred on phones only */
  html[data-r9hero="edge"] .hero-h1{margin-top:44px}
  .hero-h1{font-size:clamp(2rem,8.6vw,2.35rem);line-height:1.04}
  .hero-line{margin-top:22px;font-size:1.1rem}
  .hero-act{margin-top:30px;gap:24px}
  .hero-act .quiet{font-size:1.1rem}
  html[data-r9hero="big"] .hero-top{min-height:92svh}
  html[data-r9hero="big"] #hero-mark{width:calc(100vw - 2 * var(--gut))}
  html[data-r9hero="big"] .hero-copy{padding-top:12px;padding-bottom:80px;text-align:left;align-items:flex-start}
  html[data-r9hero="big"] .hero-h1{font-size:clamp(2.1rem,9.6vw,2.6rem)}
  html[data-r9hero="big"] .hero-act{justify-content:flex-start}

  .what .statement{font-size:clamp(1.4rem,6.4vw,1.7rem)}
  .pillars{grid-template-columns:1fr;gap:32px;margin-top:48px}
  .pillar p{max-width:none}

  .problem{padding-top:120px}
  .problem h2{font-size:clamp(2rem,8.6vw,2.4rem)}

  .value{padding-top:72px;padding-bottom:72px}
  .v-grid{grid-template-columns:1fr;gap:40px}
  .v-flip .v-text{order:0}
  .v-text h2{font-size:clamp(2.4rem,11vw,3rem);max-width:none}
  .vc-time{--k:1}
  .vc-key{flex-direction:column;gap:8px}

  /* services: a swipe row, each card with its own amber top line */
  .svc-wrap{padding-top:0;margin-top:40px}
  .railh{display:none}
  .svc{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:16px;margin:0 calc(-1 * var(--gut));padding:0 var(--gut) 12px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .svc::-webkit-scrollbar{display:none}
  .step{flex:0 0 78vw;scroll-snap-align:start;padding-top:30px;border-top:1.5px solid var(--tz-amber)}
  .step-dot,.step-ring{top:-8.25px}
  .step-ring{top:-.75px}
  .step p{max-width:none}
  .svc-foot{margin-top:36px}

  .dia-row{grid-template-columns:1fr;gap:16px}
  .dia-item{padding:22px}
  .dia{--k:.9}

  .proof-grid{grid-template-columns:1fr;gap:48px}
  .proof h2{max-width:none}
  .quote{padding:24px 22px 22px 34px}
  .quote blockquote p{font-size:17px}


  .start-steps{grid-template-columns:1fr;gap:14px;margin-top:32px}
  .start-steps p{max-width:none}
  .contact-grid{grid-template-columns:1fr}
}

/* =====================================================================================================================
   Round 9b (2026-10-03): the ribbon. Astra's light layouts (L01-L10) carry one wave down the page. Every light wave blends
   with "darken": its ivory ground is lighter than the paper token on every channel (measured), so the ground disappears into
   the page and only the ribbon shows. No section paints its own paper any more, so the ribbon can run across boundaries and
   nothing ends on a hard line; each wave still feathers out where its box is cropped.
   ===================================================================================================================== */
.hero[data-ground="paper"],main [data-ground="paper"]{background:transparent}
.hero,main{overflow-x:clip}
.hero-in{position:relative;z-index:1}
.wave{position:absolute;z-index:-1;pointer-events:none;mix-blend-mode:darken;
  --ft:16%;--fb:24%;--fl:0%;--fr:0%;
  -webkit-mask-image:linear-gradient(to bottom,transparent,#000 var(--ft),#000 calc(100% - var(--fb)),transparent),linear-gradient(to right,transparent,#000 var(--fl),#000 calc(100% - var(--fr)),transparent);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(to bottom,transparent,#000 var(--ft),#000 calc(100% - var(--fb)),transparent),linear-gradient(to right,transparent,#000 var(--fl),#000 calc(100% - var(--fr)),transparent);
  mask-composite:intersect}
.wave-in{position:absolute;inset:0;will-change:transform}
.wave img{position:absolute;inset:-3%;width:106%;height:106%;max-width:none;object-fit:cover;will-change:transform}
/* hero=edge: L02, the right expanse; its quiet left third holds the copy; the ribbon runs out of the bottom into What we do */
html[data-r9hero="edge"] .wave-hero{top:0;left:-4vw;right:-4vw;height:calc(100% + 34vh);--ft:0%;--fb:30%}
html[data-r9hero="edge"] .wave-hero img{object-position:22% 100%;transform-origin:70% 80%}
.wave-hero2{display:none}
/* hero=big: L03, the horizontal flow, crosses the lockup's lower half; L08, the basin, sits under the copy and runs on */
html[data-r9hero="big"] .wave-hero{top:34svh;left:-4vw;right:-4vw;height:calc(108vw / 3);--ft:22%;--fb:22%}
html[data-r9hero="big"] .wave-hero img{object-position:50% 50%}
html[data-r9hero="big"] .wave-hero2{display:block;top:calc(100svh - 18vh);bottom:-26vh;left:-4vw;right:-4vw;--ft:30%;--fb:34%}
html[data-r9hero="big"] .wave-hero2 img{object-position:50% 70%}
/* the problem: L04, right to left, straddles the way in (the curve sits in its upper half; its quiet lower third is the heading) */
/* r9i: the problem's ribbon comes in from the LEFT (LTR06, the descending crossing) and reaches up through the cards, so the
   stretch under the hero never goes blank; it runs out past the problem's drawing */
.wave-band{left:-4vw;right:-4vw;top:-52%;bottom:-8%;--ft:18%;--fb:34%;opacity:.8}
.wave-band img{object-position:0% 22%}
/* hero=big (r9c): L09 mirrored, so it runs top right to bottom left after the big hero's horizontal; a taller box for its 16:9 */

/* value 02 (r9c): L09, the descending diagonal, enters top left behind the chart and runs down and out into value 03 */
.v2{position:relative}
.wave-v2{top:-16%;bottom:-40%;left:-4vw;right:-4vw;--ft:20%;--fb:36%}
.wave-v2 img{object-position:0% 50%}
/* services: back to the right (L10, the rising diagonal), its mass behind the right-hand steps */
.services{position:relative}
.wave-svc{top:-20%;bottom:-14%;left:-4vw;right:-4vw;--ft:26%;--fb:30%;opacity:.85}
.wave-svc img{object-position:80% 60%}
/* who we work with: L10, the ascending diagonal; quiet upper-left = the heading; it feathers out before the charcoal close */
.wave-proof{top:-14%;bottom:-6%;left:-4vw;right:-4vw;--ft:24%;--fb:34%}
.wave-proof img{object-position:50% 40%}
/* the close (r9c): E01-v04, the charcoal horizontal, the full width of the screen. Its upper part sits above the close, over the
   paper, and fades in from nothing, so the page turns charcoal over a tall stretch with no edge; its lower edge fades into the
   section's own charcoal. Never upscaled on a laptop (native 2172 wide). The section above leaves the room for the turn. */
.contact{overflow:hidden}
.wave-dark{position:absolute;left:50%;top:0;width:max(124vw,1100px);aspect-ratio:2172/724;transform:translate(-50%,-20%);z-index:0;pointer-events:none;overflow:hidden;
  -webkit-mask-image:linear-gradient(to bottom,#000 70%,transparent);mask-image:linear-gradient(to bottom,#000 70%,transparent)}
.wave-dark img{position:absolute;inset:-3%;width:106%;height:106%;max-width:none;object-fit:cover}

.contact .wrap{position:relative;z-index:1;max-width:var(--max)}
html.rm .wave img,html.rm .wave-dark img{transform:none!important}

/* ---------- the problem visual (r9b): Today, scattered; across the slash, one plan. Built by d.js from .plan-list ---------- */
.plan{margin:clamp(48px,7vh,72px) 0 0}
.plan-list{display:flex;flex-wrap:wrap;gap:10px 28px}
.plan-list li{position:relative;padding-left:20px;font-size:17px}
.plan-list li::before{content:"";position:absolute;left:4px;top:.3em;width:1.5px;height:.9em;background:var(--tz-amber);transform:skewX(-28deg)}
.plan.built .plan-list{position:absolute!important;left:-10000px!important;width:1px;height:1px;overflow:hidden}
.plan-svg{display:block;width:100%;height:auto;overflow:visible;fill:none;--k:1;--fs:17px}
.plan-svg text{font-family:'Source Sans 3',sans-serif;font-weight:400;font-size:calc(var(--fs) * var(--k));fill:var(--tz-charcoal);stroke:none}
.plan-svg .pl-cap{font-family:'Oswald',sans-serif;font-size:calc(14px * var(--k));letter-spacing:.14em;fill:var(--tz-oxblood)}
.plan-svg .pl-end{font-weight:600;fill:var(--tz-oxblood)}
.plan-svg .pl-sub{fill-opacity:.7}
.plan-svg .pl-box{fill:var(--tz-paper);stroke:var(--tz-charcoal);stroke-opacity:.45;stroke-width:1.5}
.plan-svg .pl-mk{stroke:var(--tz-charcoal);stroke-opacity:.45;stroke-width:1.5;stroke-linecap:round}
.plan-svg .pl-brk{stroke:var(--tz-charcoal);stroke-opacity:.32;stroke-width:1.5;stroke-dasharray:4 6;stroke-linecap:round}
.plan-svg .pl-slash{stroke:var(--tz-charcoal);stroke-opacity:.35;stroke-width:1.5}
.plan-svg .pl-line{stroke:var(--tz-amber);stroke-width:2;stroke-linecap:round}
.plan-svg .pl-arrow{stroke:var(--tz-amber);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.plan-svg .pl-on .pl-box{stroke:var(--tz-amber);stroke-opacity:1}
.plan-svg .pl-on .pl-mk{stroke:var(--tz-amber);stroke-opacity:1}
.plan-svg .pl-n{font-family:'Oswald',sans-serif;font-size:calc(12px * var(--k));letter-spacing:.1em;fill:var(--tz-oxblood);text-anchor:middle}

/* ---------- value 02 on paper: the week chart restyled for a light ground ---------- */
.vc-time{aspect-ratio:336/182;--k:.92}
.vc-days text{font-family:'Oswald',sans-serif;font-size:calc(13px * var(--k));letter-spacing:.12em;fill:var(--tz-charcoal);fill-opacity:.6;text-anchor:middle}
.vc-floor{stroke:var(--tz-charcoal);stroke-opacity:.3;stroke-width:1}
.vc-kp{fill:var(--tz-charcoal);fill-opacity:.2;stroke:none}
.vc-rt rect{fill:var(--tz-paper);stroke:var(--tz-charcoal);stroke-opacity:.45;stroke-width:1.5}
.vc-rt line{stroke:var(--tz-charcoal);stroke-opacity:.6;stroke-width:1.5;stroke-linecap:round}
.vc-rt{display:none}
.vc-room rect{fill:none;stroke:var(--tz-amber);stroke-width:1.5;stroke-dasharray:3 3}
.vc-scan{stroke:var(--tz-charcoal);stroke-opacity:.3;stroke-width:1;opacity:0}
.vc-key{display:flex;flex-wrap:wrap;gap:8px 22px;margin:22px 0 0;padding:0;list-style:none}
.vc-key li{display:flex;align-items:center;gap:8px;font-size:15px;line-height:1.3;color:var(--tz-charcoal)}
.k-sw{flex:none;width:22px;height:16px;overflow:visible;fill:none}
.k-rt{fill:var(--tz-paper);stroke:var(--tz-charcoal);stroke-opacity:.45;stroke-width:1.5}
.k-rs{stroke:var(--tz-charcoal);stroke-opacity:.6;stroke-width:1.5;stroke-linecap:round}
.k-kp{fill:var(--tz-charcoal);fill-opacity:.2}
.k-room{stroke:var(--tz-amber);stroke-width:1.5;stroke-dasharray:3 3}

/* ---------- services (r9b): the group names once, above the rail, each over the steps it covers ---------- */
.svc-groups{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:0 clamp(20px,2.6vw,40px);margin:clamp(48px,8vh,80px) 0 clamp(40px,5.5vh,56px)}
.svc-grp{grid-column:var(--c);position:relative;padding:0 0 12px;border-bottom:1.5px solid var(--hair);display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.svc-grp::before,.svc-grp::after{content:"";position:absolute;bottom:-6px;width:1.5px;height:10px;background:color-mix(in srgb,var(--tz-charcoal) 30%,transparent)}
.svc-grp::before{left:0}.svc-grp::after{right:0}
.svc-grp .label{font-size:13px;letter-spacing:.14em;color:var(--tz-oxblood)}
.svc-gn{font-family:'Source Sans 3',sans-serif;text-transform:none;letter-spacing:0;font-size:14px;opacity:.7}
.svc .svc-g{display:none}

@media (max-width:760px){
  html[data-r9hero="edge"] .wave-hero,html[data-r9hero="big"] .wave-hero{top:6%;height:auto;bottom:-16vh;left:-14vw;right:-14vw;--ft:18%;--fb:28%}
  html[data-r9hero="edge"] .wave-hero img,html[data-r9hero="big"] .wave-hero img{object-position:62% 60%}
  html[data-r9hero="big"] .wave-hero2{display:none}
  /* phones: the problem's wave reaches all the way up through the cards (the portrait flow, full strength) */
  .wave-band{top:-85%;bottom:-6%;left:-10vw;right:-10vw;--ft:14%;--fb:26%;opacity:1}
  .wave-band img{object-position:50% 50%}
  .wave-v2{top:-8%;bottom:-8%}
  .wave-v2 img{object-position:50% 50%}
  .wave-svc{top:-10%;bottom:-6%;left:-10vw;right:-10vw;opacity:1}
  .wave-svc img{object-position:50% 50%}
  .svc-groups{display:none}
  .svc .svc-g{display:block;margin:0 0 12px;font-size:12px;letter-spacing:.14em;color:var(--tz-charcoal);opacity:.75;line-height:1.3}
  .svc .svc-g .svc-gn{display:block;margin-top:2px}
  .plan-list li{font-size:15px}
}

/* =====================================================================================================================
   Round 9c (2026-10-03): charcoal on hover. A card lifts, its ground turns charcoal, the words turn paper and the drawing flips to
   paper and amber; leaving reverses it. How we think (the three cards) and the five services steps. Phones have no hover: the
   card nearest the middle of the screen takes the same state (.lit, set by d.js).
   ===================================================================================================================== */
.dia-item{position:relative;transition:transform .6s var(--lift),box-shadow .6s var(--lift),background-color .5s var(--lift),border-color .5s var(--lift)}
.dia-item h3,.dia-item p{transition:color .45s var(--lift)}
.dia-item .dia *{transition:fill .45s var(--lift),stroke .45s var(--lift),fill-opacity .45s var(--lift),stroke-opacity .45s var(--lift),opacity .45s var(--lift)}
.dia .d-mark-dk{opacity:0}
@media (hover:hover){.dia-item:hover{transform:translateY(-12px)!important}}
.dia-item:is(.lit,:hover){background:var(--tz-charcoal);border-color:var(--tz-charcoal);box-shadow:var(--shadow-lift)}
.dia-item:is(.lit,:hover) h3{color:var(--tz-paper)}
.dia-item:is(.lit,:hover) p{color:var(--tz-stone)}
.dia-item:is(.lit,:hover) .dia text{fill:var(--tz-paper)}
.dia-item:is(.lit,:hover) .dia .d-cap,.dia-item:is(.lit,:hover) .dia .d-label{fill:var(--tz-amber)}
.dia-item:is(.lit,:hover) .dia :is(.d-tier circle,.d-tier path,.d-team circle,.d-team path,.d-tools rect,.d-slash,.d-track,.d-us,.d-acc,.d-link,.d-gate){stroke:var(--tz-paper);stroke-opacity:.7}
.dia-item:is(.lit,:hover) .dia :is(.d-tools rect,.d-us,.d-gate,.d-node){fill:var(--tz-charcoal)}
.dia-item:is(.lit,:hover) .dia .d-node{stroke:var(--tz-amber)}
.dia-item:is(.lit,:hover) .dia .d-node.hit{fill:var(--tz-amber)}
.dia-item:is(.lit,:hover) .dia .d-mark{opacity:0}
.dia-item:is(.lit,:hover) .dia .d-mark-dk{opacity:.9}
.dia-item:is(.lit,:hover) .dia .d-team :is(circle,path){stroke:var(--tz-amber);stroke-opacity:1}

/* the services steps: a charcoal plate rises behind the step (under the rail, so the line and dot stay where they are) */
@media (hover:hover) and (min-width:761px){
  .step{isolation:isolate}
  .step::before{content:"";position:absolute;z-index:-1;left:-16px;right:-16px;top:28px;bottom:-18px;background:var(--tz-charcoal);opacity:0;transform:translateY(10px);transition:opacity .45s var(--lift),transform .55s var(--lift);box-shadow:var(--shadow-lift)}
  .step p,.step .step-n,.svc-get .label{transition:color .4s var(--lift),opacity .4s var(--lift)}
  .step:hover::before{opacity:1;transform:none}
  .step:hover .step-n{color:var(--tz-amber)}
  .step:hover p{color:var(--tz-stone)}
  .step:hover .svc-get{color:var(--tz-amber)}
  .step:hover .svc-get .label{color:var(--tz-paper);opacity:.7}
  .svc{padding-bottom:18px}
}
@media (max-width:760px){
  .wave-v2{bottom:-30%}
  .wave-dark{width:260vw;transform:translate(-50%,-8%)}
}

/* =====================================================================================================================
   Round 9d (2026-10-03)
   ===================================================================================================================== */
/* the close: a clean line at the top now (r9c's fade read muddy). The corner flow (E01-v05, mirrored) in the bottom left, under
   the band line, at well under its own size; feathered top and right so it has no edge */
.wave-corner{left:0;top:auto;bottom:0;width:min(64vw,1100px);aspect-ratio:1672/941;transform:none;
  -webkit-mask-image:linear-gradient(to bottom,transparent,#000 45%),linear-gradient(to right,#000 55%,transparent);-webkit-mask-composite:source-in;
  mask-image:linear-gradient(to bottom,transparent,#000 45%),linear-gradient(to right,#000 55%,transparent);mask-composite:intersect}
.wave-flip{position:absolute;inset:0;transform:scaleX(-1)}

/* services: as a group's steps finish, its label lights: a charcoal tag with amber words, the bracket line goes amber */
.svc-grp{transition:border-color .5s var(--lift)}
.svc-grp::before,.svc-grp::after{transition:background-color .5s var(--lift)}
.svc-grp .label{padding:4px 8px;margin-left:-8px;transition:background-color .5s var(--lift),color .5s var(--lift)}
.svc-grp .svc-gn{transition:opacity .5s var(--lift)}
.svc-grp.lit,html.rm .svc-grp{border-color:var(--tz-amber)}
.svc-grp.lit::before,.svc-grp.lit::after,html.rm .svc-grp::before,html.rm .svc-grp::after{background:var(--tz-amber)}
.svc-grp.lit .label,html.rm .svc-grp .label{background:var(--tz-charcoal);color:var(--tz-amber)}
.svc-grp.lit .svc-gn{opacity:1}

/* who we work with: the quotes rise in with the scroll (d.js); a quiet open-quote mark on each */
.quote{will-change:transform}
.q-who strong{font-weight:600;color:var(--tz-oxblood)}

/* how to start: the reverse of the hover above. On the charcoal, a step lifts and turns paper; number and heading oxblood */
.start-steps li{transition:transform .55s var(--lift),background-color .45s var(--lift),box-shadow .55s var(--lift)}
.start-steps li :is(.start-n,h3,p){transition:color .4s var(--lift)}
@media (hover:hover){.start-steps li:hover{transform:translateY(-10px)!important}}
.start-steps li:is(:hover,.lit){background:var(--tz-paper)}
.start-steps li:is(:hover,.lit) .start-n{color:var(--tz-oxblood)}
.start-steps li:is(:hover,.lit) h3{color:var(--tz-oxblood)}
.start-steps li:is(:hover,.lit) p{color:var(--tz-charcoal)}
@media (max-width:760px){.wave-corner{width:150vw;left:-20vw}}

/* r9e: the hero's waves wait hidden until the hero lands, then fade in once (no flash as the opening lifts) */
html.js:not(.rm) .hero .wave{opacity:0;visibility:hidden}

/* r9g, what we do: the reverse hover. No box at rest; on hover a charcoal plate comes up behind the pillar, words to paper,
   the heading and the drawing's lines to amber and paper */
@media (hover:hover) and (min-width:761px){
  .pillar{position:relative;isolation:isolate}
  .pillar::before{content:"";position:absolute;z-index:-1;inset:-1px -22px -24px;background:var(--tz-charcoal);opacity:0;transform:translateY(10px);transition:opacity .45s var(--lift),transform .55s var(--lift);box-shadow:var(--shadow-lift)}
  .pillar h3.label,.pillar p{transition:color .4s var(--lift)}
  .pillar .pic *{transition:stroke .4s var(--lift),fill .4s var(--lift),stroke-opacity .4s var(--lift)}
  .pillar:hover::before{opacity:1;transform:none}
  .pillar:hover h3.label{color:var(--tz-amber)}
  .pillar:hover p{color:var(--tz-stone)}
  .pillar:hover .pic :is(.p-frame,.p-people circle,.p-people path){stroke:var(--tz-paper);stroke-opacity:.8}
  .pillar:hover .pic .p-box{fill:var(--tz-charcoal);stroke:var(--tz-paper);stroke-opacity:.8}
  .pillar:hover .pic .p-start{fill:var(--tz-paper)}
}

/* =====================================================================================================================
   Round 9i, step 2: the three cards straight under the subhero; the gap under the hero closed
   ===================================================================================================================== */
html[data-r9hero="edge"] .hero{min-height:min(100svh,880px);padding-bottom:clamp(28px,5vh,56px)}
.what.section{padding-top:clamp(64px,9vh,104px)} /* r9i: a touch of air back (Brayden), room for a title later */
.what .pillars{margin-top:0}
.pillars-note{margin-top:22px;font-size:13px;opacity:.75}
@media (max-width:760px){
  html[data-r9hero="edge"] .hero{min-height:0;padding-bottom:40px}
  .what.section{padding-top:48px}
  .what .pillars{gap:28px}
}
@media (max-width:760px){.hero-h1{font-size:clamp(1.8rem,7.7vw,2.2rem)}}
@media (max-width:760px){.opts{left:auto;right:12px}.opts-panel{left:auto;right:0}}

/* =====================================================================================================================
   Round 9i, step 3: the problem. Centred statement + one subheading (the section-head pattern the rest will follow), then the
   list as the graphic: five solid tiles, scattered, settling into one ordered row on an amber line. Charcoal on hover.
   ===================================================================================================================== */
.sec-head{text-align:center;max-width:58rem;margin:0 auto}
.sec-head .eyebrow{margin-bottom:var(--s2)}
.sec-head h2{margin:0 auto;max-width:20ch;font-size:clamp(2.5rem,4.6vw,4.1rem);line-height:1.03}
.sec-sub{margin:var(--s3) auto 0;max-width:46ch;font-size:clamp(1.12rem,1.45vw,1.3rem);line-height:1.5;color:var(--tz-charcoal)}
.problem{padding-top:clamp(120px,17vh,190px)}

.mess{position:relative;margin:clamp(56px,9vh,96px) 0 0}
.mess-row{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(12px,1.4vw,20px);margin:0;padding:0;list-style:none;position:relative;z-index:1}
.tile{position:relative;display:flex;flex-direction:column;gap:12px;min-height:112px;padding:18px 20px 20px;background:var(--tz-paper);
  border:1px solid color-mix(in srgb,var(--tz-charcoal) 14%,transparent);border-top:2px solid var(--tz-amber);
  box-shadow:0 18px 36px -26px color-mix(in srgb,var(--tz-charcoal) 55%,transparent);
  font-size:clamp(1.02rem,1.2vw,1.12rem);font-weight:600;line-height:1.3;color:var(--tz-charcoal);
  transition:background-color .45s var(--lift),color .45s var(--lift),border-color .45s var(--lift),transform .55s var(--lift)}
.tile-n{font-family:'Oswald',sans-serif;font-weight:400;font-size:13px;letter-spacing:.14em;color:var(--tz-oxblood);transition:color .45s var(--lift)}
@media (hover:hover){
  .tile:hover{background:var(--tz-charcoal);color:var(--tz-paper);border-color:var(--tz-charcoal);border-top-color:var(--tz-amber)}
  .tile:hover .tile-n{color:var(--tz-amber)}
}
.mess-line{position:relative;height:2px;margin-top:28px;background:color-mix(in srgb,var(--tz-charcoal) 12%,transparent)}
.mess-fill{position:absolute;inset:0;background:var(--tz-amber);transform-origin:0 50%}
.mess-arrow{position:absolute;right:-4px;top:50%;width:10px;height:14px;transform:translateY(-50%);fill:none;stroke:var(--tz-amber);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.mess-end{margin-top:14px;text-align:right}
.mess-end .label{font-size:14px;letter-spacing:.14em;color:var(--tz-oxblood)}
.mess-sub{display:block;margin-top:2px;font-size:15px;opacity:.75}
.problem .draft{vertical-align:middle}

@media (max-width:760px){
  .sec-head h2{font-size:clamp(2.1rem,9vw,2.6rem)}
  .sec-sub{font-size:1.08rem}
  .problem{padding-top:110px}
  .mess{margin-top:44px;padding-left:22px}
  .mess-row{grid-template-columns:1fr;gap:12px}
  .tile{min-height:0;flex-direction:row;align-items:baseline;gap:14px;padding:16px 18px}
  /* phones: the line runs down the left of the stack, the end label under it */
  .mess-line{position:absolute;left:0;top:0;bottom:56px;width:2px;height:auto;margin:0}
  .mess-fill{transform-origin:50% 0}
  .mess-arrow{display:none}
  .mess-end{text-align:left;margin-top:16px}
}

/* =====================================================================================================================
   Round 9i, step 4: services as five spotlight cards. A row of five equal cards; hover or focus one and it widens (flex), turns
   charcoal and opens "Includes things like" (grid-rows 0fr to 1fr); the other four narrow and fade. The row keeps one height so
   nothing below it moves. Phones: a stack; the middle card lights charcoal on scroll; "What's included" opens the detail.
   ===================================================================================================================== */
.tbd{opacity:.62;font-style:italic;font-weight:400} /* [to come] placeholders (".ph" is the kit's image placeholder) */
.svs{display:flex;gap:clamp(10px,1.2vw,16px);margin:clamp(48px,8vh,80px) 0 0;padding:0;list-style:none;min-height:clamp(290px,34vh,320px)}
.sv{position:relative;flex:1 1 0;min-width:0;display:flex;flex-direction:column;padding:26px 24px 24px;background:var(--tz-paper);
  border:1px solid color-mix(in srgb,var(--tz-charcoal) 14%,transparent);border-top:2px solid var(--tz-amber);outline:none;cursor:default;
  box-shadow:0 18px 36px -28px color-mix(in srgb,var(--tz-charcoal) 50%,transparent);
  transition:flex-grow .65s var(--lift),opacity .5s var(--lift),background-color .45s var(--lift),color .45s var(--lift),border-color .45s var(--lift),box-shadow .6s var(--lift)}
.sv-mark{display:block;width:1.5px;height:22px;background:var(--tz-amber);transform:skewX(-28deg);margin:0 0 18px 6px}
.sv-t{font-family:'Source Sans 3',sans-serif;font-weight:600;font-size:clamp(1.2rem,1.5vw,1.45rem);line-height:1.18;color:var(--tz-oxblood);transition:color .45s var(--lift)}
.sv-line{margin-top:12px;font-size:clamp(.98rem,1.1vw,1.06rem);line-height:1.45;color:var(--tz-charcoal);transition:color .45s var(--lift),opacity .4s var(--lift)}
.sv-more{display:grid;grid-template-rows:0fr;opacity:0;transition:grid-template-rows .55s var(--lift),opacity .4s var(--lift)}
.sv-more-in{overflow:hidden;min-height:0}
.sv-inc{margin:22px 0 10px;font-size:12px;letter-spacing:.14em;color:var(--tz-amber)}
.sv-list{display:grid;gap:8px;margin:0;padding:0;list-style:none}
.sv-list li{position:relative;padding-left:20px;font-size:1rem;line-height:1.4;color:var(--tz-stone);white-space:normal}
.sv-list li::before{content:"";position:absolute;left:4px;top:.2em;width:1.5px;height:.95em;background:var(--tz-amber);transform:skewX(-28deg)}
.sv-tap{display:none}
/* the spotlight */
.sv:is(:hover,:focus-visible,.open){flex-grow:2.7;background:var(--tz-charcoal);border-color:var(--tz-charcoal);border-top-color:var(--tz-amber);box-shadow:0 26px 48px -26px color-mix(in srgb,var(--tz-charcoal) 70%,transparent)}
.sv:is(:hover,:focus-visible,.open) .sv-t{color:var(--tz-paper)}
.sv:is(:hover,:focus-visible,.open) .sv-line{color:var(--tz-stone)}
.sv:is(:hover,:focus-visible,.open) .sv-more{grid-template-rows:1fr;opacity:1;transition-delay:.12s}
.svs:has(.sv:is(:hover,:focus-visible)) .sv:not(:hover):not(:focus-visible){flex-grow:.72;opacity:.42}
.svs:has(.sv:is(:hover,:focus-visible)) .sv:not(:hover):not(:focus-visible) .sv-line{opacity:0}
.sv:focus-visible{outline:2px solid var(--tz-amber);outline-offset:3px}
.svs-note{margin-top:22px;font-size:13px;opacity:.75;text-align:center}

/* step 5: the CTA break under services */
.cta-break.section{padding-top:clamp(56px,8vh,88px);padding-bottom:clamp(72px,10vh,112px)}
.cta-in{text-align:center}
.cta-line{font-size:clamp(1.1rem,1.4vw,1.25rem);margin-bottom:var(--s3)}
.cta-act .btn{font-size:17px;padding:16px 30px}
.cta-guide{margin-top:var(--s3);font-size:16px}
.cta-guide a{color:var(--tz-oxblood);text-decoration:underline;text-underline-offset:4px}

/* r9i Oct 6: the stack (tap to open, scroll-lit) runs up to 1100px, so half a desktop window and tablets in portrait get it too,
   not five squeezed columns */
@media (max-width:1100px){
  .svs{flex-direction:column;min-height:0;margin-top:40px;gap:12px;max-width:44rem;margin-left:auto;margin-right:auto}
  .sv{padding:22px 20px 20px}
  .sv-mark{margin-bottom:14px}
  .sv.lit{background:var(--tz-charcoal);border-color:var(--tz-charcoal);border-top-color:var(--tz-amber)}
  .sv.lit .sv-t{color:var(--tz-paper)}
  .sv.lit .sv-line{color:var(--tz-stone)}
  .sv-tap{display:inline-flex;align-items:center;gap:8px;align-self:flex-start;margin-top:14px;padding:6px 0;background:none;border:0;cursor:pointer;
    font-family:'Oswald',sans-serif;font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--tz-oxblood)}
  .sv-tap::after{content:"+";font-size:16px;line-height:1;transition:transform .3s var(--lift)}
  .sv-tap[aria-expanded="true"]::after{transform:rotate(45deg)}
  .sv:is(.lit,.open) .sv-tap{color:var(--tz-amber)}
  .sv-inc{margin-top:16px}
  .svs:has(.sv:is(:hover,:focus-visible)) .sv:not(:hover):not(:focus-visible){flex-grow:1;opacity:1}
  .svs:has(.sv:is(:hover,:focus-visible)) .sv:not(:hover):not(:focus-visible) .sv-line{opacity:1}
  .sv:is(:hover,:focus-visible):not(.open) .sv-more{grid-template-rows:0fr;opacity:0}
  .sv:is(:hover,:focus-visible):not(.open):not(.lit){background:var(--tz-paper);border-color:color-mix(in srgb,var(--tz-charcoal) 14%,transparent);border-top-color:var(--tz-amber)}
  .sv:is(:hover,:focus-visible):not(.open):not(.lit) .sv-t{color:var(--tz-oxblood)}
  .sv:is(:hover,:focus-visible):not(.open):not(.lit) .sv-line{color:var(--tz-charcoal)}
}
@media (max-width:760px){.cta-break.section{padding-top:48px;padding-bottom:64px}}
/* the CTA break: the ribbon swings back in from the LEFT (LTR01, the low sweep; its quiet upper half holds the button) and runs
   on under the section into what follows */
.cta-break{position:relative}
.wave-cta{top:-30%;bottom:-70%;left:-4vw;right:-4vw;--ft:26%;--fb:36%}
.wave-cta img{object-position:0% 60%}
@media (max-width:760px){.wave-cta{top:-10%;bottom:-30%;left:-10vw;right:-10vw}.wave-cta img{object-position:50% 50%}}

/* =====================================================================================================================
   Round 9i, steps 6 to 8
   ===================================================================================================================== */
/* 6: the quotes as a strip, two cards side by side, tighter than the old section */
.quotes-strip.section{padding-top:clamp(24px,4vh,48px);padding-bottom:clamp(56px,8vh,88px)}
.quotes-strip .quotes{grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(14px,1.6vw,22px);max-width:var(--max);margin:0 auto}
.quotes-strip .quote{padding:24px 26px 22px 40px;background:color-mix(in srgb,var(--tz-stone) 82%,transparent)}
.quotes-strip .quote blockquote p{font-size:18px}

/* 7: why 10zero, a centred statement and five one-line reasons in a row (two rows on a laptop, a list on phones) */
.why{position:relative}
.why .sec-head h2{max-width:22ch}
.reasons{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(12px,1.4vw,20px);margin:clamp(44px,7vh,72px) 0 0;padding:0;list-style:none}
.reason{position:relative;padding:20px 20px 22px;border-top:2px solid var(--tz-amber);background:color-mix(in srgb,var(--tz-paper) 70%,transparent);
  font-size:clamp(1.02rem,1.2vw,1.12rem);font-weight:600;line-height:1.35;color:var(--tz-charcoal);transition:background-color .45s var(--lift),color .45s var(--lift)}
.reason-mark{display:block;width:1.5px;height:18px;background:var(--tz-amber);transform:skewX(-28deg);margin:0 0 14px 6px}
@media (hover:hover){.reason:hover{background:var(--tz-charcoal);color:var(--tz-paper)}}
.wave-why{top:-20%;bottom:-30%;left:-4vw;right:-4vw;--ft:24%;--fb:34%}
.wave-why img{object-position:100% 40%}

/* 8: how to start, the head centred like the rest; the guide line under the submit */
.start .eyebrow,.start h2{text-align:center;margin-left:auto;margin-right:auto}
.start h2{max-width:18ch}
.contact .form .form-guide{margin-top:-4px;font-size:15px;color:var(--tz-charcoal)}
.form-guide a{color:var(--tz-oxblood);text-decoration:underline;text-underline-offset:4px}

@media (max-width:1100px) and (min-width:761px){.reasons{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:760px){
  .quotes-strip .quotes{grid-template-columns:1fr;gap:12px}
  .quotes-strip .quote{padding:20px 20px 18px 34px}
  .quotes-strip .quote blockquote p{font-size:17px}
  .reasons{grid-template-columns:1fr;gap:10px;margin-top:36px}
  .reason{padding:16px 18px;display:flex;gap:14px;align-items:baseline}
  .reason-mark{margin:0;flex:none;height:16px}
  .reason.lit{background:var(--tz-charcoal);color:var(--tz-paper)}
  .wave-why{top:-10%;bottom:-10%;left:-10vw;right:-10vw}
  .wave-why img{object-position:50% 50%}
}

/* r9i: less space between sections (Brayden, Oct 6) */
.section{padding-top:clamp(72px,10vh,112px);padding-bottom:clamp(72px,10vh,112px)}
.problem{padding-top:clamp(80px,11vh,124px)}
.svs{margin-top:clamp(36px,5.5vh,56px)}
.quotes-strip.section{padding-top:clamp(16px,3vh,32px);padding-bottom:clamp(48px,7vh,72px)}
.cta-break.section{padding-top:clamp(40px,6vh,64px);padding-bottom:clamp(48px,7vh,72px)}
.reasons{margin-top:clamp(36px,5.5vh,56px)}
.contact{padding-top:clamp(88px,12vh,128px)}
@media (max-width:760px){
  .section{padding-top:60px;padding-bottom:60px}
  .problem{padding-top:76px}
  .cta-break.section{padding-top:36px;padding-bottom:48px}
  .quotes-strip.section{padding-top:12px;padding-bottom:44px}
}

/* =====================================================================================================================
   Round 9i, Oct 6: Tianna's copy in, the chips gone, a touch more room, every width checked (not only 390 and 1440)
   ===================================================================================================================== */
/* the problem: her six "Today" lines, between the subheading and Josh's graphic */
.today{max-width:60rem;margin:clamp(32px,5vh,48px) auto 0}
.today-label{text-align:center;font-size:13px;letter-spacing:.16em;color:var(--tz-oxblood);margin-bottom:18px}
.today-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px clamp(20px,3vw,40px);margin:0;padding:0;list-style:none}
.today-list li{position:relative;padding-left:22px;font-size:clamp(1rem,1.15vw,1.08rem);line-height:1.4;color:var(--tz-charcoal)}
.today-list li::before{content:"";position:absolute;left:5px;top:.22em;width:1.5px;height:.95em;background:var(--tz-amber);transform:skewX(-28deg)}
@media (max-width:900px){.today-list{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.today-list{grid-template-columns:1fr;gap:10px;max-width:24rem;margin:0 auto}}

/* services: the sentence above "Includes things like"; in the row the open card is wide, so its list runs in two columns.
   The row's height is set by d.js to the tallest opened card, so opening one never moves the page below. */
.sv-desc{margin-top:18px;font-size:clamp(.98rem,1.1vw,1.04rem);line-height:1.45;color:var(--tz-paper)}
.sv-inc{margin-top:18px}
@media (min-width:1101px){.sv-list{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:20px}}
.svs.sv-measuring .sv,.svs.sv-measuring .sv *{transition:none!important}
.svs.sv-measuring .sv{opacity:1!important}
.svs.sv-measuring .sv.sv-m{flex-grow:2.7}
.svs.sv-measuring .sv:not(.sv-m){flex-grow:.72}
.svs.sv-measuring .sv.sv-m .sv-more{grid-template-rows:1fr}
@media (max-width:1100px){.sv-desc{margin-top:14px}}

/* how to start: the longer question, her line under it on the charcoal */
.start h2{max-width:22ch}
.start .start-sub{color:var(--tz-stone);text-align:center}

/* a touch more room between sections than the Oct 6 tightening (not back to r9h's) */
.section{padding-top:clamp(84px,11.5vh,128px);padding-bottom:clamp(84px,11.5vh,128px)}
.problem{padding-top:clamp(92px,12.5vh,140px)}
.quotes-strip.section{padding-top:clamp(24px,4vh,44px);padding-bottom:clamp(56px,8vh,84px)}
.cta-break.section{padding-top:clamp(48px,7vh,76px);padding-bottom:clamp(56px,8vh,84px)}
.contact{padding-top:clamp(100px,13.5vh,144px)}
@media (max-width:760px){
  .section{padding-top:70px;padding-bottom:70px}
  .problem{padding-top:86px}
  .cta-break.section{padding-top:42px;padding-bottom:56px}
  .quotes-strip.section{padding-top:16px;padding-bottom:52px}
}
/* the close: with the old paragraph gone, the band line sits level with the middle of the form (stacks as before on phones) */
@media (min-width:761px){.contact-grid{align-items:center}}
/* short screens (a laptop with its toolbars, a browser window cut in half top to bottom): the hero scales to the height too,
   so the headline, the line and Book a call all land on the first screen */
@media (min-width:761px) and (max-height:760px){
  .hero-h1{font-size:clamp(2.2rem,min(4.9vw,8.6vh),4.4rem)}
  html[data-r9hero="edge"] .hero-h1{margin-top:clamp(20px,4.5vh,84px)}
  html[data-r9hero="edge"] .hero-line{margin-top:clamp(14px,2.4vh,32px)}
  html[data-r9hero="edge"] .hero-act{margin-top:clamp(18px,3.2vh,44px)}
  .hero{padding-top:calc(var(--nav-h) + clamp(24px,5vh,88px))}
}

/* =====================================================================================================================
   Oct 6, Brayden's pass on the copy round: no small titles anywhere, the two-line hero, premium drawings on the three cards,
   the six as the star of the problem, the Book a call box, the five reasons as a ribbon
   ===================================================================================================================== */
@media (min-width:761px){.hero-h1 .hl{white-space:nowrap}}

/* the three cards: solid forms cut by the logo's 28-degree slash, amber the one accent; bigger, punchier words */
.pillar .pic{width:clamp(96px,8.4vw,124px);height:auto;aspect-ratio:112/88;overflow:visible}
.pic .ic-k{fill:var(--tz-charcoal);stroke:none}
.pic .ic-a{fill:var(--tz-amber);stroke:none}
.pic .ic-ks{fill:none;stroke:var(--tz-charcoal);stroke-width:6}
.pic .ic-as{fill:none;stroke:var(--tz-amber);stroke-width:3}
.pic .ic-as.ic-thick{stroke-width:6}
.pic .ic-cut{fill:none;stroke:var(--tz-paper);stroke-width:9}
.pic .ic-cut.ic-thin{stroke-width:4}
.pic .ic-base{fill:none;stroke:var(--tz-charcoal);stroke-opacity:.25;stroke-width:1.5}
.pillar h3.label{font-size:clamp(1.4rem,1.9vw,1.75rem);letter-spacing:.08em;margin:30px 0 12px}
.pillar p{font-size:clamp(1.12rem,1.35vw,1.3rem);font-weight:600;line-height:1.4;max-width:32ch;color:var(--tz-charcoal)}
@media (hover:hover) and (min-width:761px){
  .pillar .pic *{transition:fill .4s var(--lift),stroke .4s var(--lift),stroke-opacity .4s var(--lift)}
  .pillar:hover .pic .ic-k{fill:var(--tz-paper)}
  .pillar:hover .pic .ic-ks{stroke:var(--tz-paper)}
  .pillar:hover .pic .ic-cut{stroke:var(--tz-charcoal)}
  .pillar:hover .pic .ic-base{stroke:var(--tz-paper);stroke-opacity:.4}
}
@media (max-width:760px){.pillar h3.label{font-size:1.4rem;margin-top:22px}.pillar p{font-size:1.12rem}}

/* the problem: the six, big and bold, one at a time; the line nearest the middle of the screen full, the rest faded */
.pts{list-style:none;margin:clamp(44px,6.5vh,72px) auto 0;padding:0;width:fit-content;max-width:100%;display:grid;gap:clamp(12px,2.2vh,24px)}
.pt{display:flex;align-items:center;gap:clamp(16px,1.8vw,26px);font-size:clamp(1.5rem,2.6vw,2.4rem);font-weight:600;line-height:1.18;letter-spacing:-.005em;color:var(--tz-charcoal);transition:opacity .5s var(--lift)}
.pt-slash{flex:none;position:relative;width:.42em;height:1.05em;transform:skewX(-28deg)}
.pt-slash i{position:absolute;left:50%;top:0;bottom:0;width:4px;margin-left:-2px;background:var(--tz-amber);transform-origin:50% 0}
.pt-t{display:block}
html.js:not(.rm) .pt-slash i{transform:scaleY(0)}
html.js:not(.rm) .pt-t{clip-path:inset(0% 100% 0% 0%)}
html.js:not(.rm) .pts.on .pt{opacity:.26}
html.js:not(.rm) .pts.on .pt.lit{opacity:1}
@media (max-width:760px){
  .pts{gap:16px;margin-top:40px}
  .pt{font-size:clamp(1.25rem,5.6vw,1.5rem);align-items:flex-start;gap:14px}
  .pt-slash{margin-top:.08em}
}

/* Book a call: one charcoal box, the line and the cheat sheet on the left, the button on the right, the wave faint inside */
.cta-box{position:relative;overflow:hidden;isolation:isolate;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:clamp(24px,4vw,64px);
  padding:clamp(40px,5.4vw,76px) clamp(28px,5vw,72px);background:var(--tz-charcoal);color:var(--tz-paper);border-top:2px solid var(--tz-amber);
  box-shadow:0 40px 70px -44px color-mix(in srgb,var(--tz-charcoal) 60%,transparent)}
.cta-box-wave{position:absolute;inset:0;z-index:-1;opacity:.8;-webkit-mask-image:linear-gradient(to right,transparent 10%,#000 70%);mask-image:linear-gradient(to right,transparent 10%,#000 70%)}
.cta-box-wave img{width:100%;height:100%;object-fit:cover;object-position:70% 50%;max-width:none}
.cta-box .cta-h{margin:0;max-width:18ch;font-size:clamp(2rem,3.6vw,3.2rem);line-height:1.06;color:var(--tz-paper);text-align:left}
.cta-box .cta-guide{margin-top:16px;font-size:clamp(1rem,1.2vw,1.12rem);color:var(--tz-stone);text-align:left}
.cta-box .cta-guide a{color:var(--tz-amber);text-decoration:underline;text-underline-offset:4px}
.cta-box .cta-btn{font-size:18px;padding:18px 34px}
.cta-box .btn::after{background:var(--tz-paper)}
.cta-box .btn:hover,.cta-box .btn:focus-visible{color:var(--tz-charcoal)}
@media (max-width:760px){
  .cta-box{grid-template-columns:1fr;gap:26px;padding:36px 24px}
  .cta-box .cta-btn{justify-self:start}
  .cta-box-wave{-webkit-mask-image:linear-gradient(to bottom,transparent 20%,#000 90%);mask-image:linear-gradient(to bottom,transparent 20%,#000 90%)}
}

/* why 10zero: one line, then the five reasons as a ribbon across the full width */
.why .sec-head h2{max-width:none}
@media (min-width:761px){.why .sec-head h2{white-space:nowrap}}
.ribbon{position:relative;margin-top:clamp(36px,5.5vh,60px);overflow:hidden;border-top:1px solid var(--hair);border-bottom:1px solid var(--hair);padding:clamp(18px,2.6vh,28px) 0}
.rb-track{display:flex;width:max-content;will-change:transform}
.rb-set{display:flex;align-items:center;flex:none;margin:0;padding:0;list-style:none}
.rb-set li{display:flex;align-items:center;white-space:nowrap;font-size:clamp(1.6rem,3vw,2.7rem);font-weight:600;line-height:1.15;color:var(--tz-charcoal)}
.rb-slash{display:block;flex:none;width:3px;height:1.05em;background:var(--tz-amber);transform:skewX(-28deg);margin:0 clamp(28px,3.4vw,56px)}
html.rm .rb-track,html:not(.js) .rb-track{width:auto;justify-content:center;padding:0 var(--gut)}
html.rm .rb-set[aria-hidden],html:not(.js) .rb-set[aria-hidden]{display:none}
html.rm .rb-set,html:not(.js) .rb-set{flex:1 1 auto;flex-wrap:wrap;justify-content:center;row-gap:14px}
html.rm .rb-set li,html:not(.js) .rb-set li{white-space:normal;font-size:clamp(1.2rem,2vw,1.6rem)}
html.rm .rb-set li:last-child .rb-slash,html:not(.js) .rb-set li:last-child .rb-slash{display:none}
@media (max-width:760px){.rb-set li{font-size:1.5rem}.rb-slash{margin:0 24px}}
.why .ribbon{margin-left:calc(-1 * var(--gut));margin-right:calc(-1 * var(--gut))}

/* Oct 7 (Brayden): why 10zero as a still list, not the ribbon. Desktop and tablet: three on top, two centred below (a six-column
   grid, each reason spans two; the fourth starts at column two). Phones: one column. A hairline over each, the amber slash first. */
.why-list{list-style:none;margin:clamp(36px,5.5vh,60px) 0 0;padding:0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));column-gap:clamp(24px,3.4vw,56px);row-gap:clamp(28px,4vh,44px)}
.why-list li{grid-column:span 2;display:flex;align-items:flex-start;gap:clamp(14px,1.4vw,20px);padding-top:clamp(18px,2.4vh,24px);border-top:1px solid var(--hair);font-size:clamp(1.2rem,1.65vw,1.6rem);font-weight:600;line-height:1.22;color:var(--tz-charcoal)}
.why-list li span{text-wrap:balance}
.why-list li:nth-child(4){grid-column:2 / span 2}
.wl-slash{display:block;flex:none;width:3px;height:1.1em;margin-top:.05em;background:var(--tz-amber);transform:translateX(.3em) skewX(-28deg)}
@media (max-width:760px){
  .why-list{grid-template-columns:1fr;row-gap:0}
  .why-list li,.why-list li:nth-child(4){grid-column:auto;padding:18px 0;font-size:1.3rem}
  .why-list li:last-child{border-bottom:1px solid var(--hair)}
}

/* =====================================================================================================================
   Oct 6 (final pass): the three cards' drawings show their line. Capability: leadership at the top, the signal running down
   to every person on the front line. Strategy: from your goals, around the roadblocks, to where AI makes or saves money.
   Systems: the boring work goes in, AI (the zero, slashed) takes it on, growth comes out. Each sits on a soft stone plate.
   ===================================================================================================================== */
.pillar .pic{display:block;width:100%;height:auto;aspect-ratio:320/180;overflow:visible;background:color-mix(in srgb,var(--tz-stone) 46%,transparent);transition:background-color .45s var(--lift)}
.pic .ic-line{fill:none;stroke:var(--tz-charcoal);stroke-opacity:.28;stroke-width:1.5}
.pic .ic-ring{fill:none;stroke:var(--tz-charcoal);stroke-opacity:.22;stroke-width:1.5}
.pic .ic-k{fill:var(--tz-charcoal);stroke:none}
.pic .ic-a{fill:var(--tz-amber);stroke:none}
.pic .ic-as{fill:none;stroke:var(--tz-amber);stroke-width:3;stroke-linecap:round}
.pic .ic-core{stroke-width:3.5}
.pic .ic-st{fill:var(--tz-paper);stroke:var(--tz-charcoal);stroke-opacity:.22;stroke-width:1}
.pic .ic-ln2{fill:none;stroke:var(--tz-charcoal);stroke-opacity:.35;stroke-width:2.5;stroke-linecap:round}
.pic .ic-arrow{fill:none;stroke:var(--tz-charcoal);stroke-opacity:.45;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.pic .ic-lbl{font-family:'Oswald',sans-serif;font-weight:400;font-size:10.5px;letter-spacing:.14em;fill:var(--tz-charcoal);fill-opacity:.62}
.pic .ic-cur{font-family:'Oswald',sans-serif;font-weight:400;font-size:15px;fill:var(--tz-charcoal)}
.pic .cap-route{fill:none;stroke:none}
.pic .cap-f{transition:fill .35s var(--lift)}
.pic .cap-f.hit{fill:var(--tz-amber)}
.pic .cap-pulse,.pic .stg-head,.pic .sys-out{fill:var(--tz-amber)}
.pic .cap-ring,.pic .stg-rip{fill:none;stroke:var(--tz-amber);stroke-width:1.5}
.pic .sys-chip{fill:var(--tz-paper);stroke:var(--tz-charcoal);stroke-opacity:.5;stroke-width:1}
.pillar h3.label{margin-top:26px}
@media (hover:hover) and (min-width:761px){
  .pillar .pic *{transition:fill .4s var(--lift),stroke .4s var(--lift),fill-opacity .4s var(--lift),stroke-opacity .4s var(--lift)}
  .pillar:hover .pic{background:color-mix(in srgb,var(--tz-paper) 7%,transparent)}
  .pillar:hover .pic :is(.ic-line,.ic-ring,.ic-arrow){stroke:var(--tz-paper);stroke-opacity:.4}
  .pillar:hover .pic .ic-k{fill:var(--tz-paper)}
  .pillar:hover .pic .cap-f.hit{fill:var(--tz-amber)}
  .pillar:hover .pic .ic-st{fill:color-mix(in srgb,var(--tz-paper) 12%,transparent);stroke:var(--tz-paper);stroke-opacity:.3}
  .pillar:hover .pic .ic-ln2{stroke:var(--tz-paper);stroke-opacity:.5}
  .pillar:hover .pic .ic-lbl{fill:var(--tz-paper);fill-opacity:.7}
  .pillar:hover .pic .sys-chip{fill:var(--tz-charcoal);stroke:var(--tz-paper)}
}

/* Book a call: the cheat sheet line sits under the button, the pair centred on the right */
.cta-box-act{display:flex;flex-direction:column;align-items:center;gap:16px;text-align:center}
.cta-box .cta-box-act .cta-guide{margin:0;text-align:center;font-size:clamp(.98rem,1.1vw,1.06rem)}
@media (max-width:760px){
  .cta-box-act{align-items:flex-start;text-align:left}
  .cta-box .cta-box-act .cta-guide{text-align:left}
}