/* TOKENS */
@font-face{font-family:'Clash Display';src:url('/assets/ClashDisplay-Variable.woff2') format('woff2');font-weight:200 700;font-display:swap}
@font-face{font-family:'Satoshi';src:url('/assets/Satoshi-Variable.woff2') format('woff2');font-weight:300 900;font-display:swap}
@font-face{font-family:'JetBrains Mono';src:url('/assets/JetBrainsMono-Variable.woff2') format('woff2');font-weight:100 800;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
:root{
  --leaf-mark:url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%22204.71%20124.46%2066.61%2041.60%22%3E%3Cpath%20d=%22%20%20%20M%20251.86%20135.69%20%20%20Q%20251.22%20135.80%20250.30%20136.31%20%20%20Q%20238.39%20142.89%20228.09%20148.63%20%20%20Q%20213.78%20156.61%20205.91%20162.39%20%20%20Q%20205.53%20162.67%20205.17%20162.67%20%20%20A%200.47%200.46%20-81.6%200%201%20204.73%20162.07%20%20%20C%20206.56%20156.00%20209.25%20150.31%20213.21%20145.36%20%20%20Q%20234.58%20118.72%20270.33%20126.03%20%20%20A%201.25%201.24%20-76.0%200%201%20271.27%20127.61%20%20%20Q%20267.84%20138.96%20260.42%20148.19%20%20%20C%20246.97%20164.91%20226.06%20167.67%20206.11%20165.33%20%20%20A%200.28%200.28%200.0%200%201%20205.99%20164.81%20%20%20Q%20221.43%20155.54%20230.95%20150.18%20%20%20Q%20241.45%20144.26%20251.98%20135.95%20%20%20A%200.15%200.15%200.0%200%200%20251.86%20135.69%20%20%20Z%22%20fill=%22%234C8A28%22/%3E%3C/svg%3E");
  color-scheme:light;
  --canvas:#F7FAF8;--canvas-2:#EFF4F1;--surface:#FFFFFF;
  --ink:#0B1A17;--ink-2:#33423E;--ink-3:#4D5B56;--ink-4:#5F6E68;--border:#DFE7E2;
  --gold:#D4AF37;--gold-display:#A8801C;--gold-ink:#8A6A10;--emerald:#3F7A38;--leaf:#3F7A38;--leaf-bright:#4E9A45;--leaf-glow:#4E9A45;--gold-soft:#C89F28;--bg-2:#FFFFFF;
  --shadow:0 20px 25px -5px rgba(11,26,23,.05),0 8px 10px -6px rgba(11,26,23,.04);
  --shadow-lift:0 28px 40px -12px rgba(11,26,23,.12);
  --ease:cubic-bezier(.16,1,.3,1);--spring:cubic-bezier(.34,1.4,.5,1);
  --display:'Clash Display',sans-serif;--body:'Satoshi',sans-serif;--mono:'JetBrains Mono',monospace;
}/* COMPONENTS */

*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:112px}
body{margin:0;background:var(--canvas);color:var(--ink);font-family:var(--body);font-size:15px;line-height:1.6;-webkit-font-smoothing:antialiased}
::selection{background:#E7EFD9;color:var(--ink)}
a{color:inherit;text-decoration:none}
button,input{font:inherit}
button,a,input,summary{-webkit-tap-highlight-color:transparent}
button{color:inherit;cursor:pointer}
button:disabled{cursor:wait}
:focus-visible{outline:2px solid var(--emerald);outline-offset:5px}
[hidden]{display:none!important}
img,svg{max-width:100%}
p{margin:0;color:var(--ink-2);font-size:15px;line-height:1.6}
h1,h2,h3,blockquote{font-family:var(--display);font-weight:500;margin:0}
h1{font-size:clamp(44px,7vw,88px);line-height:1.01;letter-spacing:-.04em}
h2{font-size:clamp(32px,4.6vw,56px);line-height:1.07;letter-spacing:-.028em}
h3{font-size:clamp(21px,2.7vw,28px);line-height:1.15;letter-spacing:-.018em}
ul{margin:0;padding:0;list-style:none}
.shell{max-width:1408px;width:calc(100% - 160px);margin-inline:auto}
.mono{font-family:var(--mono);font-weight:400;font-size:10px;line-height:1.5;letter-spacing:.1em;text-transform:uppercase}
.section-label{display:block;font-size:11px;letter-spacing:.18em;color:var(--emerald);margin-bottom:22px}
.section-label:before{content:'';display:inline-block;width:20px;height:1px;background:var(--emerald);margin-right:12px;vertical-align:middle}
.sub-eyebrow{font-size:11px;letter-spacing:.12em}
.callout{font-size:10px;letter-spacing:.16em}
.caption{font-size:9.5px;letter-spacing:.08em;color:var(--ink-3)}
.chip{font-size:10px;letter-spacing:.06em}
.skip-link{position:fixed;left:20px;top:12px;z-index:100;transform:translateY(-150%);padding:12px 20px;background:var(--surface);border:1px solid var(--ink)}
.skip-link:focus{transform:translateY(0)}

.brand img{display:block;width:194px;height:auto}

.site-footer nav a{font-family:var(--mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;display:inline-flex;align-items:center;min-height:44px}
.menu-toggle{display:none}
.hero{padding-top:57px;padding-bottom:0}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.14fr) minmax(0,.86fr);gap:58px;align-items:center}
.hero-turn{display:block}
h1 em{font:inherit;color:var(--gold-display)}
.hero-lead{font-size:19px;line-height:1.55;max-width:52ch;margin:30px 0 28px}
.button{position:relative;display:inline-flex;align-items:center;justify-content:space-between;gap:56px;min-height:54px;padding:14px 22px;border:1px solid transparent;border-radius:5px;font-family:var(--body);font-weight:600;font-size:15px;line-height:1.4;transition:transform .35s var(--ease),box-shadow .35s var(--ease);isolation:isolate;overflow:hidden}
.primary-button{background:var(--ink);color:var(--surface)}
.primary-button>span{position:relative;z-index:1}
.primary-button>span:last-child{font-size:22px;line-height:1}
.primary-button:before{content:'';position:absolute;inset:0;border:1px solid var(--gold);border-radius:inherit;clip-path:inset(0 100% 0 0);transition:clip-path .65s var(--ease)}
.primary-button:hover:before,.primary-button:focus-visible:before{clip-path:inset(0)}
.primary-button:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.hero-tool{padding-top:5px;min-width:0}
.tool-stage{background:var(--surface);border:1px solid var(--gold);box-shadow:var(--shadow-lift);border-radius:14px;position:relative;padding:32px;min-height:320px;animation:audit-breathe 6s ease-in-out infinite}
@keyframes audit-breathe{0%,100%{box-shadow:var(--shadow-lift),0 0 0 0 rgba(212,175,55,.02)}50%{box-shadow:var(--shadow-lift),0 0 24px 1px rgba(212,175,55,.13)}}
.audit-fallback{color:var(--ink-2);padding:12px 0}

.section{padding:110px 0;scroll-margin-top:20px}
.band{background:var(--canvas-2);border-block:1px solid var(--border)}
.section-heading{margin-bottom:46px}
.split-heading{display:block}
.split-heading>div{margin:0}
.split-heading>p{margin:20px 0 0;max-width:60ch;font-size:17px;line-height:1.6;color:var(--ink-2)}
.split-heading>p{max-width:43ch;padding-bottom:3px}
.scan-panel{background:var(--surface);border:1px solid var(--border);border-radius:12px;box-shadow:var(--shadow);overflow:hidden}
.scan-header{padding:22px 28px;display:flex;align-items:center;justify-content:space-between;gap:20px;border-bottom:1px solid var(--border)}
.scan-header .chip{background:var(--canvas-2);border:1px solid var(--border);padding:5px 10px;border-radius:4px;color:var(--ink-3)}
.scan-body{position:relative;overflow:hidden}
.scan-row{display:grid;grid-template-columns:16px 148px minmax(0,1fr) 148px;gap:18px;align-items:center;padding:17px 28px;border-bottom:1px solid var(--border);min-height:67px}
.scan-row:last-child{border-bottom:0}
.scan-mark{font-size:16px;color:var(--emerald)}
.scan-label{font-size:14px;font-weight:500;line-height:1.4}
.scan-row p{font-size:14px;line-height:1.4;color:var(--ink-3)}
.status{justify-self:end;font:400 9.5px/1.4 var(--mono);letter-spacing:.06em;text-transform:uppercase;padding:5px 9px;border-radius:4px;border:1px solid var(--border);white-space:nowrap}
.status.ok{color:#315F2C;background:#F0F6ED;border-color:#D9E6D4}
.status.warn{color:#765B15;background:#FAF6E8;border-color:#EDE3C4}
.status.neutral{color:var(--ink-3);background:var(--canvas)}
.scan-footer{border-top:1px solid var(--border);padding:20px 28px;display:flex;gap:40px;justify-content:space-between;align-items:center}
.scan-footer p{max-width:73ch;font-size:14px;line-height:1.4;color:var(--ink-3)}
.scan-beam{position:absolute;z-index:1;inset:-1px 0 auto;height:2px;background:linear-gradient(90deg,transparent,var(--gold),transparent);opacity:0;pointer-events:none}
.scan-panel.play .scan-beam{animation:scan-pass 1.9s var(--ease) both}
@keyframes scan-pass{0%{top:0;opacity:0}10%{opacity:1}85%{opacity:1}100%{top:100%;opacity:0}}
.diagnostic{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:64px;align-items:center}
.radar{position:relative;max-width:450px;aspect-ratio:1;margin-inline:auto}
@keyframes diagnosis-sweep{from{transform:rotate(-324deg)}to{transform:rotate(36deg)}}.node-understood{top:50%;left:84.25%}.node-chosen{top:84.25%;left:50%}.node-followed-up{top:50%;left:15.75%}
.diagnostic-details{background:var(--surface);border:1px solid var(--border);border-radius:12px;box-shadow:var(--shadow);min-width:0;overflow:hidden}
.diagnostic-panel{padding:34px;min-height:370px}
.diagnostic-panel .callout{color:var(--emerald);display:block;margin-bottom:20px}
.diagnostic-panel h3{margin-bottom:16px;max-width:21ch}
.diagnostic-panel>p{margin-bottom:24px}
.diagnostic-panel>.caption{display:block;margin-bottom:12px}
.check-list li{font-size:14px;line-height:1.4;position:relative;padding-left:21px;color:var(--ink-2)}
.check-list li+li{margin-top:13px}
.check-list li:before{content:'✓';position:absolute;left:0;color:var(--emerald);font-size:13px}
.detail-footer{border-top:1px solid var(--border);display:block;margin-top:24px;padding-top:17px;color:var(--ink-3);font-size:9.5px;letter-spacing:.08em}
.panels.is-switching{animation:panel-enter .42s var(--spring)}
@keyframes panel-enter{from{transform:translateY(7px)}to{transform:translateY(0)}}
.operating-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.94fr);gap:84px;align-items:start;margin:0 0 46px}
.operator-quote{max-width:1120px;margin-bottom:48px}
.operator-quote h2{font-size:clamp(30px,3.4vw,44px);line-height:1.2}
.stance-head{max-width:930px}
.stance-head h2{max-width:24ch}
.stance-head h2 span{color:var(--emerald)}
.stance-head p{max-width:62ch;margin-top:28px}
.root-timeline{position:relative}
.roots{display:block;width:100%;height:210px;overflow:visible;fill:none;stroke-linecap:round;stroke-linejoin:round}
.roots path{stroke-dasharray:1;stroke-dashoffset:0;vector-effect:non-scaling-stroke}
.root-timeline.play .roots path{animation:root-draw 2.2s var(--ease) both}
@keyframes root-draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
.phase-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.phase{position:relative;padding:34px 26px 29px;border:1px solid var(--border);border-radius:10px;background:var(--surface)}
.phase-node{position:absolute;top:-6px;left:calc(50% - 5px);border:2px solid #B8912A;border-radius:50%;height:10px;width:10px;background:var(--surface)}
.phase>.sub-eyebrow{display:block;font-size:10px;color:var(--emerald);margin-bottom:14px}
.phase h3{margin-bottom:16px}
.phase p{margin-bottom:22px}
.phase p:last-child{margin-bottom:0}
.timeline-note{max-width:74ch;color:var(--ink-3);margin-top:28px}
.about-grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:100px;align-items:center}
.about-grid h2{margin-bottom:26px}
.about-grid p{max-width:56ch}
.about-grid p+p{margin-top:17px}
.operator-card{background:var(--surface);border:1px solid var(--border);border-radius:12px;box-shadow:var(--shadow);padding:36px}
.operator-card>.callout{color:var(--emerald);display:block;margin-bottom:21px}
.operator-card h3{font-size:clamp(21px,2.7vw,28px);line-height:1.1;margin-bottom:30px}
.operator-card dl{margin:0}
.operator-card dl>div{border-top:1px solid var(--border);padding:19px 0}
.operator-card dl>div:last-child{padding-bottom:0}
.operator-card dt{margin-bottom:7px}
.operator-card dd{margin:0;font-size:15px;line-height:1.4;color:var(--ink-2)}
.site-footer{border-top:1px solid var(--border);padding:40px 0 0;background:var(--canvas-2)}
.site-footer nav{display:flex;flex-wrap:wrap;gap:23px;max-width:50%;justify-content:flex-end}
.site-footer nav a{color:var(--ink-2)}
.site-footer nav a:hover{color:var(--emerald)}
.footer-bottom{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-block:22px;border-top:1px solid var(--border)}/* Native content stays visible if JavaScript fails. Builds only run on entry. */

[data-motion='reveal'].play{animation:content-enter .65s var(--ease) both}
@keyframes content-enter{from{transform:translateY(15px)}to{transform:translateY(0)}}/* Production widget compatibility.
   The current production CSS hardcodes dark surfaces and cream alpha colors.
   These host-scoped rules replace those hardcodes; markup, API and event wiring
   remain owned by widget.js. All elevation and border motion live on tool-stage. */

#audit [data-pmc-aw]{--pmc-aw-cream:var(--ink);--pmc-aw-gold:#8A6A10;--pmc-aw-ok:var(--emerald);--pmc-aw-warn:#936D15;--pmc-aw-error:#B73535;--pmc-aw-none:var(--ink-3);--pmc-aw-surface:var(--surface);--pmc-aw-surface-muted:var(--canvas);--pmc-aw-text:var(--ink-2);--pmc-aw-muted:var(--ink-3);--pmc-aw-border:var(--border);background:var(--surface);border:0;box-shadow:none;padding:0;border-radius:0;min-width:0}
#audit .pmc-aw-top{align-items:flex-start;margin-bottom:18px;gap:20px}
#audit .pmc-aw-h{font-family:var(--display);font-weight:500;font-size:clamp(21px,2.7vw,28px);line-height:1.12;letter-spacing:-.018em;max-width:13ch}
#audit .pmc-aw-chip{letter-spacing:.06em;padding:5px 9px;font-size:9.5px;background:#F0F6ED;border-color:#D9E6D4}
#audit .pmc-aw-sub{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);margin-bottom:15px}
#audit .pmc-aw-lead{font-size:15px;line-height:1.6;color:var(--ink-2);margin-bottom:21px}
#audit .pmc-aw-pills{gap:6px;margin-bottom:24px}
#audit .pmc-aw-pill{font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;background:var(--canvas-2);color:var(--ink-3);border-radius:4px;padding:5px 8px}
#audit .pmc-aw-form,#audit .pmc-aw-capture-row{gap:9px}
#audit .pmc-aw-input,#audit .pmc-aw-share-field{font-family:var(--body);font-size:16px;line-height:1.4;background:var(--canvas);color:var(--ink);border-color:#CDD7E1;min-width:0;min-height:50px;border-radius:5px;max-width:100%}
#audit .pmc-aw-input::placeholder{color:var(--ink-3);opacity:1}
#audit .pmc-aw-input:focus{border-color:var(--emerald);outline:2px solid #DCE9D5;outline-offset:1px}
#audit .pmc-aw-btn,#audit .pmc-aw-book{background:var(--gold);color:var(--ink);font:600 15px/1.4 var(--body);border-radius:5px;min-height:50px;display:inline-flex;align-items:center;justify-content:center}
#audit .pmc-aw-btn{padding-inline:17px}
#audit .pmc-aw-btn:disabled,#audit .pmc-aw-capture-btn:disabled{opacity:1;background:var(--canvas-2);color:var(--ink-3)}
#audit .pmc-aw-progress,#audit .pmc-aw-tile,#audit .pmc-aw-notice{background:var(--canvas);border-color:var(--border)}
#audit .pmc-aw-track{background:var(--border)}
#audit .pmc-aw-fill{background:var(--gold)}
#audit .pmc-aw-sub,#audit .pmc-aw-overall-label,#audit .pmc-aw-tile-label,#audit .pmc-aw-tile-hint,#audit .pmc-aw-progress-step{color:var(--ink-3)}
#audit .pmc-aw-overall,#audit .pmc-aw-why,#audit .pmc-aw-field,#audit .pmc-aw-row,#audit .pmc-aw-cta{border-color:var(--border)}
#audit .pmc-aw-progress-note,#audit .pmc-aw-msg,#audit .pmc-aw-note,#audit .pmc-aw-why-p,#audit .pmc-aw-field,#audit .pmc-aw-row-meta,#audit .pmc-aw-cta-copy,#audit .pmc-aw-capture-label,#audit .pmc-aw-capture-msg,#audit .pmc-aw-share-hint,#audit .pmc-aw-notice{color:var(--ink-2);font:400 15px/1.6 var(--body)}
#audit .pmc-aw-overall-score,#audit .pmc-aw-tile-score,#audit .pmc-aw-tile-unavailable{color:var(--ink-2);font:400 14px/1.4 var(--body)}
#audit .pmc-aw-progress-title,#audit .pmc-aw-row-title{font:500 14px/1.4 var(--body)}
#audit .pmc-aw-field b{color:var(--ink)}
#audit .pmc-aw-overall-label{letter-spacing:.12em}
#audit .pmc-aw-why-sum{min-height:44px;font-size:10px;letter-spacing:.12em}
#audit .pmc-aw-why-sum:after{font-size:11px;opacity:1}
#audit .pmc-aw-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
#audit .pmc-aw-tile:last-child{grid-column:span 2}
#audit .pmc-aw-tile-hint{font:400 9.5px/1.4 var(--mono);text-transform:uppercase;letter-spacing:.08em}
#audit .pmc-aw-atag{color:var(--ink-3);border-color:var(--border);font-size:10px;letter-spacing:.06em}
#audit .pmc-aw-atag[data-tone="ok"]{color:var(--emerald);border-color:#A9C7A2;background:#F0F6ED;font-weight:600}
#audit .pmc-aw-atag[data-tone="ok"]::before{content:'';display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--emerald);margin-right:7px;vertical-align:middle}
#audit .pmc-aw-atag[data-tone="warn"]{color:var(--gold-ink);border-color:#DCCB9A;background:#FAF6EA}
#audit .pmc-aw-atag[data-tone="warn"]::before{content:'';display:inline-block;width:6px;height:6px;border-radius:50%;border:1.5px solid var(--gold-ink);margin-right:7px;vertical-align:middle}
#audit .pmc-aw-atag::before{content:'';display:inline-block;width:6px;height:6px;border-radius:50%;border:1.5px dashed var(--ink-4);margin-right:7px;vertical-align:middle}
#audit .pmc-aw-capture-btn,#audit .pmc-aw-ghost{color:var(--ink);background:var(--surface);border-color:#CDD7E1;font:500 14px/1.4 var(--body);min-height:46px;display:inline-flex;align-items:center;border-radius:5px}
#audit .pmc-aw-row-metric{font-family:var(--display);font-weight:600}
#audit .pmc-aw-hp{display:none}/* ============================================================
   ICONS: solid mass, not hairline.
   Every element is filled. Paint comes from classes, never from
   the markup, so one set serves every size and ground:
     .m / .md  gradient mass, the two directions separating
               adjacent shapes without a keyline between them
     .u / .u2  structure, the neutral the mass sits against
     .f        the faint field a signal travels through
     .k        the one accent, one per icon, never two
     .on/.mkl  knockouts
     .mk       the only stroked detail, 1.5, round
   Composed at rest. One build on scroll-in, replayed on hover.
   ============================================================ */

.ico svg{--i-struct:#647469;--i-mark:#A3B1AA;--i-acc:#C89F28}
.ico .m{fill:url(#gMass)}
.ico .md{fill:url(#gMassD)}
.ico .u{fill:var(--i-struct)}
.ico .u2{fill:var(--i-mark)}
.ico .f{fill:url(#gField)}
.ico .k{fill:url(#gAcc)}
.ico .on{fill:#FFFFFF}
.ico .mk{fill:none;stroke:var(--i-mark);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.ico .mkl{fill:none;stroke:#FFFFFF;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;opacity:.86}
.ico .mk-fill{fill:var(--i-mark);opacity:.45}
.ico .on-line{fill:none;stroke:#FFFFFF;stroke-width:3.4;stroke-linecap:round;stroke-linejoin:round}
.ico .ring{fill:none;stroke:var(--i-acc);stroke-width:1.6;opacity:0}/* ===== MOTION =====
   Calm at rest: every mass is already composed. One shot on
   scroll-in, replayed on hover. Nothing loops. */

.ico .grow,.ico .drop,.ico .slide,.ico .ping,.ico .sweep,.ico .ring,.ico .wave{
  transform-box:fill-box;transform-origin:center}
.ico .rise{transform-box:fill-box;transform-origin:bottom center}
@keyframes icoGrow{from{transform:scale(.5);opacity:0}to{transform:scale(1);opacity:1}}
@keyframes icoRise{from{transform:scaleY(.15);opacity:.25}to{transform:scaleY(1);opacity:1}}
@keyframes icoDrop{from{transform:translateY(-10px);opacity:0}to{transform:translateY(0);opacity:1}}
@keyframes icoSlide{from{transform:translateX(-9px);opacity:0}to{transform:translateX(0);opacity:1}}
@keyframes icoPing{0%{transform:scale(.25);opacity:0}55%{transform:scale(1.28);opacity:1}100%{transform:scale(1);opacity:1}}
@keyframes icoSweep{from{transform:rotate(0)}to{transform:rotate(360deg)}}
@keyframes icoRing{0%{opacity:0;transform:scale(.5)}42%{opacity:.85}100%{opacity:0;transform:scale(1.35)}}
@keyframes icoWave{0%{opacity:0;transform:scale(.7)}60%{opacity:1}100%{opacity:1;transform:scale(1)}}
.ico.go .grow{animation:icoGrow .62s var(--spring) .08s both}
.ico.go .rise{animation:icoRise .55s var(--spring) both}
.ico.go .drop{animation:icoDrop .58s var(--spring) .1s both}
.ico.go .slide{animation:icoSlide .5s var(--ease) .06s both}
.ico.go .ping{animation:icoPing .85s var(--ease) .36s both}
.ico.go .sweep{animation:icoSweep 1.7s var(--ease) .1s}
.ico.go .ring{animation:icoRing 1s var(--ease) .42s}
.ico.go .wave{animation:icoWave .6s var(--ease) both}
.ico .d1{animation-delay:.16s!important}
.ico .d2{animation-delay:.28s!important}
.ico .d3{animation-delay:.40s!important}
.ico.go .ping.d1{animation-delay:.5s!important}
@media(prefers-reduced-motion:reduce){
  .ico *{animation:none!important;opacity:1;transform:none}
  .ico .ring{opacity:0}
}
.ico{position:relative;width:78px;height:78px;display:grid;place-items:center;margin:22px 0 19px}
.ico svg{width:48px;height:48px;overflow:visible}/* At the compact floor, remove interior detail without editing canonical SVGs. *//* Every reveal shares app.js's observer + scroll sweep. Fast skips force finals. */

.motion-complete{animation:none!important}
.motion-complete .transient{opacity:0!important}
.motion-complete .scan-beam{opacity:0!important}
/* MOBILE LAYER: intentionally follows the entire icon system. */
@media(min-width:1600px){.hero-grid{gap:90px}.hero{padding-top:70px}.hero-lead{max-width:48ch}}
@media(max-width:1199px){
  .shell{width:calc(100% - 96px)}
  .header-inner{gap:22px}.brand,.brand img{width:173px;flex-basis:173px}
  .hero-grid{gap:40px}.hero-lead{margin-top:25px}.tool-stage{padding:25px}
  .split-heading{gap:55px}.diagnostic{gap:35px}.diagnostic-panel{padding:27px}
  .operating-grid{gap:52px}.about-grid{gap:65px}.site-footer nav{gap:15px}
}
@media(max-width:899px){
  *{backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
  .shell{width:calc(100% - 64px)}
  .site-header{height:88px}
  .menu-toggle{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:6px;width:44px;height:44px;flex-shrink:0;background:transparent;border:1px solid var(--border);border-radius:5px;padding:10px}
  .menu-toggle span{width:19px;height:1px;background:var(--ink);transition:transform .25s}
  .menu-toggle[aria-expanded='true'] span:first-child{transform:translateY(3.5px) rotate(45deg)}
  .menu-toggle[aria-expanded='true'] span:last-child{transform:translateY(-3.5px) rotate(-45deg)}
  
  .mobile-menu a{display:flex;align-items:center;justify-content:space-between;min-height:52px;padding:11px 0;font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;border-bottom:1px solid var(--border)}
  .mobile-menu a:last-child{color:var(--emerald);border-bottom:0}
  .hero{padding-top:44px}.hero-grid{gap:30px}
  .hero-grid{grid-template-columns:1fr}.hero-copy{max-width:700px}.hero-copy h1{max-width:16ch}.hero-lead{max-width:53ch}
  .hero-tool{max-width:none;padding-top:0}.tool-stage{padding:32px;min-height:0}
  #audit .pmc-aw-h{max-width:18ch}#audit .pmc-aw-tiles{grid-template-columns:repeat(3,minmax(0,1fr))}#audit .pmc-aw-tile:last-child{grid-column:auto}
  .section{padding:82px 0}.split-heading{grid-template-columns:1fr;gap:24px}.split-heading>p{max-width:63ch}.section-heading{margin-bottom:36px}
  .diagnostic{gap:24px}.diagnostic-panel{padding:24px;min-height:420px}
  .scan-row{grid-template-columns:14px 130px minmax(0,1fr);gap:14px;padding:17px 22px}.scan-row .status{grid-column:2;grid-row:auto;justify-self:start}.scan-row p{grid-column:3;grid-row:span 2}.scan-label{align-self:end}
  .scan-footer{gap:22px;padding:20px 22px}.scan-footer p{font-size:14px}
  .operating-grid{gap:38px}.phase-grid{gap:14px}.phase{padding:30px 20px 23px}.phase p{font-size:15px}.phase h3{font-size:24px}.phase .check-list li{font-size:14px}
  .about-grid{gap:35px;grid-template-columns:1fr 1fr}.operator-card{padding:27px}.site-footer nav{max-width:100%;width:100%;justify-content:flex-start;gap:28px}.footer-bottom{align-items:flex-start}
}
@media(max-width:599px){
  html{scroll-padding-top:24px}.shell{width:calc(100% - 40px)}
  .site-header{height:82px}.header-inner{gap:12px}.brand,.brand img{width:166px;flex-basis:166px}.menu-toggle{margin-left:auto}.mobile-menu{padding-inline:20px;max-height:calc(100svh - 82px)}
  .hero{padding-top:31px}.hero-grid{gap:35px}
  .hero-copy h1{max-width:15ch}.hero-lead{font-size:19px;line-height:1.55;margin:24px 0}.button{min-height:54px}
  .tool-stage{padding:23px 20px;border-radius:11px}
  #audit .pmc-aw-top{gap:14px}#audit .pmc-aw-h{max-width:13ch;font-size:24px}
  #audit .pmc-aw-input{width:100%;flex-basis:100%;min-height:50px}#audit .pmc-aw-btn{width:100%;min-height:50px}
  #audit .pmc-aw-pills{gap:5px}#audit .pmc-aw-pill{padding:4px 7px}#audit .pmc-aw-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}#audit .pmc-aw-tile:last-child{grid-column:span 2}
  #audit .pmc-aw-row{gap:9px;flex-wrap:wrap}#audit .pmc-aw-row-metric{padding-left:19px}#audit .pmc-aw-capture-btn{justify-content:center;width:100%}
  .section{padding:68px 0}.section-label{font-size:10px;margin-bottom:18px}.section-heading{margin-bottom:29px}.split-heading{gap:22px}
  .scan-header{padding:17px;flex-wrap:wrap;gap:9px}.scan-header .sub-eyebrow{font-size:10px}
  .scan-row{padding:17px;grid-template-columns:13px minmax(0,1fr) auto;gap:9px 8px}
  .scan-label{align-self:center;grid-column:2;grid-row:1}
  .scan-mark{grid-row:1}.scan-row .status{grid-column:3;grid-row:1;font-size:9.5px;padding:4px 5px;letter-spacing:.06em;max-width:100%;white-space:normal;text-align:center}
  .scan-row p{grid-row:2;grid-column:2 / -1;color:var(--ink-2)}
  .scan-footer{padding:19px 17px;flex-direction:column;align-items:flex-start;gap:12px}.scan-footer p{font-size:14px;line-height:1.4}
  .diagnostic{grid-template-columns:1fr;gap:29px}.radar{max-width:340px}
  .diagnostic-panel{min-height:0;padding:27px 23px}.diagnostic-panel h3{font-size:28px}.diagnostic-panel .callout{margin-bottom:17px}
  .ico{width:56px;height:56px}
  .operator-quote{margin-bottom:32px}.operator-quote h2{font-size:30px;line-height:1.23}.stance-head p{margin-top:22px}.control-column>.sub-eyebrow{margin-bottom:20px}
  .roots-desktop{display:none}.phase-grid{grid-template-columns:1fr;gap:22px;padding-top:18px}.phase{padding:27px 22px;min-height:0}.phase h3{font-size:28px}.timeline-note{margin-top:26px}
  .about-grid{grid-template-columns:1fr;gap:32px}.about-grid h2{margin-bottom:23px}.operator-card{padding:30px}.operator-card h3{font-size:28px}.site-footer .brand,.site-footer .brand img{width:150px;flex-basis:150px}.site-footer nav{display:grid;grid-template-columns:1fr 1fr;gap:0 24px}.footer-bottom{flex-direction:column;gap:12px;padding-block:22px}.site-footer{padding-top:29px}
}
@media(hover:none){.primary-button:hover{transform:none}}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  [data-motion]{transform:none!important}
  .ico .transient,.scan-beam{opacity:0!important}
  .i-ads .trend,.i-cal .check,.i-pin .route{stroke-dashoffset:0!important}
  .roots path{stroke-dashoffset:0!important}
}/* ============================================================
   DIAGNOSIS: the leak path. Replaces the radar, which read as a
   hairline wireframe on a near-white ground. The band thins at
   every gate and some of the flow drops out, which is the actual
   argument the section is making.
   ============================================================ */

.diagnostic{display:block}
.path-stage{margin-bottom:38px}

.path-track{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:1px solid var(--border)}
.path-stop{display:flex;flex-direction:column;align-items:flex-start;gap:6px;
  padding:20px 22px 22px;background:transparent;border:0;border-right:1px solid var(--border);
  text-align:left;cursor:pointer;position:relative;min-height:44px;
  transition:background .35s var(--ease)}
.path-stop:last-child{border-right:0}
.path-stop::before{content:"";position:absolute;left:0;right:0;top:-1px;height:2px;background:transparent;transition:background .35s var(--ease)}
.path-stop:hover{background:var(--canvas-2)}
.path-stop[aria-selected="true"]{background:var(--surface)}
.path-stop[aria-selected="true"]::before{background:var(--gold)}
.ps-idx{font-size:10px;letter-spacing:.14em;color:var(--ink-4)}
.path-stop[aria-selected="true"] .ps-idx{color:var(--gold-ink)}
.ps-name{font-family:var(--display);font-weight:500;font-size:21px;line-height:1.1;color:var(--ink-3);letter-spacing:-.01em;transition:color .35s var(--ease)}
.path-stop[aria-selected="true"] .ps-name{color:var(--ink)}
.ps-leak{font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-4)}

@media(max-width:760px){
  .path-track{grid-template-columns:repeat(2,1fr)}
  .path-stop{border-bottom:1px solid var(--border);padding:16px 14px 18px}
  .path-stop:nth-child(2n){border-right:0}
  .ps-name{font-size:18px}
}

.diagnostic-details{margin-top:0}
.path-stage{margin-bottom:0}
.path-track{border-bottom:1px solid var(--border)}
.diagnostic-details{margin-top:20px}/* ============================================================
   NAV: floating pill. Three-zone flex (1fr / auto / 1fr) so the
   link group centres on the PILL, not on the gap between the
   logo and the CTA.
   ============================================================ */

body{padding-top:92px}
.site-header{position:fixed;top:0;left:0;right:0;z-index:60;padding:14px 0;background:transparent;border:0;height:auto;pointer-events:none}
.navbar{pointer-events:auto;width:calc(100% - 108px);max-width:1460px;margin-inline:auto;display:flex;align-items:center;gap:18px;
  background:var(--surface);border:1px solid var(--border);border-radius:999px;padding:9px 9px 9px 26px;
  box-shadow:0 4px 16px rgba(11,26,23,.05),0 1px 2px rgba(11,26,23,.04);
  transition:box-shadow .35s var(--ease),border-color .35s var(--ease)}
.site-header.scrolled .navbar{box-shadow:0 14px 34px rgba(11,26,23,.10),0 2px 6px rgba(11,26,23,.05);border-color:#DAE2DD}

.brand{flex:1 1 0;display:flex;align-items:center;justify-content:flex-start;min-width:0;min-height:44px}
.brand img{height:46px;width:auto;display:block}
.nav-links{flex:0 0 auto;display:flex;align-items:center;gap:2px}
.nav-actions{flex:1 1 0;display:flex;align-items:center;justify-content:flex-end;gap:8px}

.nav-links a,.nav-trigger{display:inline-flex;align-items:center;gap:7px;font-family:var(--body);font-size:14.5px;
  font-weight:500;color:var(--ink-2);background:transparent;border:0;padding:10px 15px;border-radius:999px;
  cursor:pointer;min-height:44px;white-space:nowrap;transition:color .2s,background .2s}
.nav-links a:hover,.nav-trigger:hover{color:var(--ink);background:var(--canvas-2)}
.nav-trigger svg{transition:transform .3s var(--ease);opacity:.7}
.nav-item{position:relative}
.nav-item[data-open="true"] .nav-trigger{color:var(--ink);background:var(--canvas-2)}
.nav-item[data-open="true"] .nav-trigger svg{transform:rotate(180deg)}
.nav-panel{position:absolute;top:calc(100% + 16px);left:50%;transform:translateX(-50%) translateY(-6px);
  width:min(580px,88vw);background:var(--surface);border:1px solid var(--border);border-radius:20px;
  box-shadow:0 26px 52px -18px rgba(11,26,23,.20),0 2px 6px rgba(11,26,23,.05);padding:16px;
  display:block;
  opacity:0;visibility:hidden;transition:opacity .25s var(--ease),transform .25s var(--ease),visibility .25s}
.nav-item[data-open="true"] .nav-panel{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}


.nav-cta{display:inline-flex;align-items:center;gap:10px;background:var(--ink);color:#fff;font-weight:600;
  font-size:14.5px;padding:12px 21px;border-radius:999px;min-height:44px;white-space:nowrap;
  transition:transform .25s var(--ease),box-shadow .25s var(--ease)}
.nav-cta:hover{transform:translateY(-1px);box-shadow:0 12px 26px -10px rgba(11,26,23,.5)}

.menu-toggle{display:none;width:44px;height:44px;align-items:center;justify-content:center;flex-direction:column;gap:5px;
  background:transparent;border:1px solid var(--border);border-radius:999px;cursor:pointer;padding:0}
.menu-toggle span{display:block;width:16px;height:1.5px;background:var(--ink);border-radius:2px;transition:transform .3s var(--ease),opacity .2s}
.menu-toggle[aria-expanded="true"] span:first-child{transform:translateY(3.25px) rotate(45deg)}
.menu-toggle[aria-expanded="true"] span:last-child{transform:translateY(-3.25px) rotate(-45deg)}
.mobile-menu{position:absolute;top:calc(100% + 6px);left:24px;right:24px;pointer-events:auto;
  background:var(--surface);border:1px solid var(--border);border-radius:22px;padding:12px;
  box-shadow:0 26px 52px -18px rgba(11,26,23,.22);display:flex;flex-direction:column;gap:2px}
.mobile-menu a{display:flex;align-items:center;min-height:52px;padding:0 16px;border-radius:14px;
  font-family:var(--display);font-weight:500;font-size:18px;color:var(--ink)}
.mobile-menu a:hover{background:var(--canvas-2)}

@media(max-width:1020px){
  .nav-links{display:none}
  .menu-toggle{display:flex}
  .navbar{width:calc(100% - 48px);padding:9px 9px 9px 20px}
}
@media(max-width:560px){
  body{padding-top:80px}
  .site-header{padding:10px 0}
  .navbar{width:calc(100% - 28px)}
  .nav-cta{font-size:13.5px;padding:11px 16px}
  .mobile-menu{left:12px;right:12px}
}/* ============================================================
   ROOTS: below the cards, because roots grow down. Four stroke
   weights give it taper, and the branching is deliberately
   asymmetric. A uniform-width symmetrical drawing is what read
   as unnatural.
   ============================================================ */

.roots{display:block;width:100%;height:250px;overflow:visible;fill:none;stroke-linecap:round;stroke-linejoin:round;margin-top:-1px}
.phase-node{top:auto;bottom:-6px}
@media(max-width:860px){.roots{display:none}}/* ============================================================
   HIERARCHY: the page was ten sections of equal weight. Evidence
   becomes the one dark, full-bleed moment, and section padding
   now varies so the page has rhythm instead of a constant beat.
   ============================================================ */

.section{padding:96px 0}
#install,#underneath{padding:126px 0}
#stance{padding:118px 0}
#evidence{padding:132px 0;background:var(--ink);border-block:0}
#evidence h2{color:#fff}
#evidence .split-heading>p{color:rgba(255,255,255,.7)}
#evidence .note,#evidence p{color:rgba(255,255,255,.7)}
#evidence .card,#evidence .panel{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.14)}

/* ---- pill width tracks the content shell at every breakpoint, so the logo
        lands on the same left edge as the H1. Also neutralises the stale
        fixed-height header rules left inside the old media queries. ---- */
@media(max-width:1199px){
  .site-header{height:auto}
  .brand,.brand img{width:auto;flex-basis:auto}
  .brand img{height:41px}
  .navbar{width:calc(100% - 44px)}
}
@media(max-width:1020px){
  .navbar{width:calc(100% - 44px)}
}
@media(max-width:899px){
  .site-header{height:auto}
  .navbar{width:calc(100% - 24px)}
  .menu-toggle{border-radius:999px;padding:0;gap:5px}
}
@media(max-width:599px){
  .site-header{height:auto}
  .brand,.brand img{width:auto;flex-basis:auto}
  .brand img{height:37px}
  .nav-cta{display:inline-flex}
  .menu-toggle{margin-left:0}
  .navbar{width:calc(100% - 24px)}
  .mobile-menu{left:12px;right:12px;padding-inline:12px;max-height:none}
}/* ============================================================
   HERO CANOPY. Built by subtraction from the canonical
   assets/pmc-icon.svg: the baked #050b0b background path and the
   #313334 trunk removed, trunk outline strokes dropped. No tree
   was drawn, generated or substituted, so LOGO-CANONICAL holds.
   Kept faint and masked so it reads as atmosphere and never as a
   second mark competing with the wordmark in the nav.
   ============================================================ */

body{overflow-x:clip;position:relative}
html{overflow-x:clip}
.canopy-clip{position:absolute;top:0;left:0;right:0;height:1040px;overflow:hidden;z-index:0;pointer-events:none}/* The artwork is placed by where its dense centre lands, not by its corner.
   --cw is the art's width, --cy the page position its centre should sit at,
   and the offsets below solve back to those. The mask focus at 58%/50% is
   the point being aimed, so the two move together. The target is the lower
   right of the hero: clear of the wordmark, clear of the headline column,
   filling the quarter the audit card leaves empty. */

/* .hero-leaf-canopy replaces a page-top-anchored fixed-height clip: the old
   .canopy-clip's height was a guess at the hero's height, and the hero's real
   height moves with content/viewport, so the artwork routinely ran 150-290px
   past the hero into the section below - which clips it (see .section rule
   further down) mid-fade, as a hard flat edge instead of the artwork's own
   soft taper. Nesting this inside .hero with inset:0 makes the clip box
   exactly match the hero's real height at every width, and the mask fades
   the last ~1/4 of that box to transparent so nothing ever ends on a hard
   edge, however tall the hero turns out to be. */
.hero-leaf-canopy{position:absolute;inset:0;overflow:hidden;z-index:-1;pointer-events:none;
  -webkit-mask-image:linear-gradient(to bottom,#000 0,#000 76%,transparent 96%);
          mask-image:linear-gradient(to bottom,#000 0,#000 76%,transparent 96%)}

.canopy-layer{position:absolute;line-height:0;
  --cw:min(960px,63vw);--cy:448px;
  width:var(--cw);
  right:calc(72% - 0.42 * var(--cw));
  top:calc(var(--cy) - 0.5 * var(--cw))}
.canopy-layer img,.canopy-layer svg{display:block;width:100%;height:auto;opacity:.12;
  -webkit-mask-image:radial-gradient(64% 60% at 50% 50%,#000 34%,rgba(0,0,0,.3) 66%,transparent 88%);
          mask-image:radial-gradient(64% 60% at 50% 50%,#000 34%,rgba(0,0,0,.3) 66%,transparent 88%)}/* dappled light under the canopy, so the corner has warmth as well as shape */

.canopy-wash{position:absolute;top:-140px;left:0;right:0;height:900px;
  background:
    radial-gradient(46% 40% at 74% 18%,rgba(79,154,69,.15),transparent 70%),
    radial-gradient(34% 30% at 90% 6%,rgba(212,175,55,.16),transparent 72%),
    radial-gradient(42% 38% at 16% 2%,rgba(212,175,55,.05),transparent 74%)}
main,.site-footer,footer{position:relative;z-index:1}
.hero{position:relative;z-index:1}
@media(max-width:1200px){
  .canopy-clip{height:1000px}
  .canopy-layer{--cw:92vw;--cy:286px;right:calc(28% - 0.42 * var(--cw))}
  .canopy-layer img,.canopy-layer svg{opacity:.14;
    -webkit-mask-image:radial-gradient(70% 66% at 58% 50%,#000 28%,rgba(0,0,0,.34) 62%,transparent 85%);
            mask-image:radial-gradient(70% 66% at 58% 50%,#000 28%,rgba(0,0,0,.34) 62%,transparent 85%)}
}
@media(max-width:1020px){
  .canopy-clip{height:960px}
  .canopy-layer{--cw:102vw;--cy:313px}
  .canopy-layer img,.canopy-layer svg{opacity:.13}
}
@media(max-width:640px){
  .canopy-clip{height:780px}
  .canopy-layer{--cw:118vw;--cy:210px;right:calc(30% - 0.42 * var(--cw))}
  .canopy-layer img,.canopy-layer svg{opacity:.09}
  .canopy-wash{height:620px}
}/* ============================================================
   BENTO: scale the icons by role. Every card was rendering its
   icon at 48px, so the three-tier hierarchy existed in the markup
   and nowhere on screen. Anchors also get real elevation instead
   of just extra width.
   ============================================================ *//* the three smallest pieces sit in a quiet strip, not in the bento */

/* ---- nav runs off the top edge, the way Viktor's does ---- */

.site-header{position:fixed;top:0;padding:18px 0 0;z-index:60}
body{padding-top:112px}
@media(max-width:560px){body{padding-top:96px}.site-header{position:fixed;top:0;padding:12px 0 0}}/* ============================================================
   AUDIT CARD. This is the fallback inside the widget root:
   widget.js overwrites it on an authorised origin. It exists so
   the hero is never an empty box on a preview domain.
   ============================================================ */

.aw{display:flex;flex-direction:column;gap:0}
.aw-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}
.aw-chip{font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--emerald);
  border:1px solid rgba(63,122,56,.3);background:rgba(63,122,56,.07);padding:4px 10px;border-radius:999px}
.aw-h{font-family:var(--display);font-weight:500;font-size:26px;line-height:1.12;letter-spacing:-.02em;margin:0 0 10px;color:var(--ink)}
.aw-lead{font-size:14.5px;line-height:1.55;color:var(--ink-3);margin:0 0 20px}
.aw-form{display:flex;gap:9px;align-items:stretch;margin-bottom:20px}
.aw-input{flex:1;min-width:0;font-family:var(--body);font-size:16px;color:var(--ink);
  background:var(--canvas);border:1px solid var(--border);border-radius:12px;padding:13px 15px;min-height:48px;
  transition:border-color .25s,box-shadow .25s}
.aw-input::placeholder{color:var(--ink-4)}
.aw-input:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(212,175,55,.14)}
.aw-go{flex:none;font-family:var(--body);font-weight:600;font-size:15px;color:#fff;background:var(--ink);
  border:0;border-radius:12px;padding:0 22px;min-height:48px;cursor:pointer;
  transition:transform .25s var(--ease),box-shadow .25s var(--ease)}
.aw-go:hover{transform:translateY(-1px);box-shadow:0 10px 22px -8px rgba(11,26,23,.45)}
.aw-checks{list-style:none;margin:0 0 16px;padding:16px 0 0;border-top:1px solid var(--border);
  display:grid;grid-template-columns:1fr 1fr;gap:9px 18px}
.aw-checks li{display:flex;align-items:baseline;gap:9px;font-size:13.5px;line-height:1.4;color:var(--ink-2)}
.aw-checks li span{font-size:9.5px;letter-spacing:.1em;color:var(--ink-4);flex:none}
.aw-note{font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-4);margin:0}
.aw-note.said{color:var(--emerald);text-transform:none;letter-spacing:.02em;font-size:12.5px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media(max-width:480px){.aw-checks{grid-template-columns:1fr}.aw-form{flex-direction:column}.aw-go{padding:14px 22px}}/* ============================================================
   THE BOUGH. Wood is hand-drawn linework, but every leaf is a
   <use> of a path lifted straight out of the canonical icon, so
   no foliage was invented. Density increases left to right: the
   ninety days leaf out as they go.
   ============================================================ */
.phase-node{bottom:-6px}
/* ============================================================
   FOOTER. Was one cramped row with the links jammed right. Now a
   brand block plus three named columns, with a bottom bar.
   ============================================================ */

.site-footer{border-top:1px solid var(--border);background:var(--canvas-2);padding:74px 0 0}
.footer-top{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,2.4fr);gap:56px;padding-bottom:56px}
.footer-brand{display:flex;flex-direction:column;align-items:flex-start;gap:18px}
.footer-brand .brand img{height:56px}
.footer-cta{display:inline-flex;align-items:center;gap:10px;background:var(--ink);color:#fff;font-weight:600;
  font-size:14.5px;padding:13px 22px;border-radius:999px;min-height:46px;margin-top:4px;
  transition:transform .25s var(--ease),box-shadow .25s var(--ease)}
.footer-cta:hover{transform:translateY(-1px);box-shadow:0 12px 26px -10px rgba(11,26,23,.45)}
.footer-cols{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:30px}
.footer-col{display:flex;flex-direction:column;gap:2px}
.footer-head{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-4);margin-bottom:14px}
.footer-col a{display:flex;align-items:center;min-height:40px;font-size:15px;color:var(--ink-2);transition:color .2s}
.footer-col a:hover{color:var(--gold-soft, #C89F28)}
.footer-bottom{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 28px;
  padding-block:26px;border-top:1px solid var(--border)}
.footer-bottom a{min-height:44px;display:inline-flex;align-items:center}
@media(max-width:980px){
  .footer-top{grid-template-columns:1fr;gap:44px;padding-bottom:44px}
  .footer-cols{gap:28px}
}
@media(max-width:620px){
  .site-footer{padding-top:56px}
  .footer-cols{grid-template-columns:1fr;gap:26px}
  .footer-brand .brand img{height:48px}
  .footer-bottom{flex-direction:column;align-items:flex-start;gap:6px}
}/* one button shape across the page */

.button.primary-button,.aw-go{border-radius:999px}/* ---- neutralise the retired footer-nav rules: the new columns are their own
        component and must not inherit the old mono/uppercase link styling ---- */

.site-footer .footer-cols{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:30px;
  max-width:none;flex-wrap:nowrap;justify-content:stretch}
.site-footer .footer-cols a{font-family:var(--body);font-size:15px;letter-spacing:0;text-transform:none;
  color:var(--ink-2);min-height:44px;display:flex;align-items:center}
.site-footer .footer-cols a:hover{color:var(--gold-ink)}
.site-footer .footer-col{display:flex;flex-direction:column;gap:2px}
.site-footer .footer-head{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-4);margin-bottom:14px;min-height:0;display:block}
.site-footer .brand,.site-footer .brand img{width:auto;flex-basis:auto}
.site-footer .footer-brand .brand img{height:56px}
@media(max-width:980px){.site-footer .footer-cols{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px}}
@media(max-width:620px){
  .site-footer .footer-cols{grid-template-columns:1fr;gap:24px}
  .site-footer .footer-brand .brand img{height:48px}
}

.footer-cta{display:inline-flex;align-items:center;gap:9px;min-height:44px;
  padding:12px 20px;border-radius:999px;background:var(--ink);color:#F4F8F5;
  font-size:14.5px;font-weight:600;
  transition:transform .25s var(--ease),box-shadow .25s var(--ease)}
.footer-cta span{transition:transform .25s var(--ease)}
@media(hover:hover){.footer-cta:hover{transform:translateY(-1px);box-shadow:var(--shadow)}
  .footer-cta:hover span{transform:translateX(3px)}}
@media(prefers-reduced-motion:reduce){.footer-cta,.footer-cta span{transition:none}
  .footer-cta:hover{transform:none}}
.button.primary-button,.aw-go,.button{border-radius:999px}/* ============================================================
   SERVICES ACCORDION. Replaces nine cards. Closed, a row is one
   line you can scan; open, the icon grows and replays its build
   and the detail unfolds. Height animates with grid-template-rows
   0fr to 1fr, so no max-height guessing.
   ============================================================ */

.acc{border-top:1px solid var(--border)}
.acc-row{border-bottom:1px solid var(--border);position:relative;transition:background .4s var(--ease)}
.acc-row::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:transparent;transition:background .4s var(--ease)}
.acc-row[data-open="true"]{background:var(--surface)}
.acc-row[data-open="true"]::before{background:var(--gold)}
.acc-h{margin:0;font:inherit}
.acc-head{display:grid;grid-template-columns:44px 56px minmax(0,1fr) auto 28px;align-items:center;gap:20px;
  width:100%;background:transparent;border:0;cursor:pointer;text-align:left;padding:22px 26px;min-height:44px;
  font-family:var(--body);transition:padding .4s var(--ease)}
.acc-row[data-open="true"] .acc-head{padding-bottom:16px}
.acc-idx{font-size:10px;letter-spacing:.14em;color:var(--ink-4);transition:color .3s}
.acc-row[data-open="true"] .acc-idx{color:var(--gold-ink)}
.acc-head .ico{width:56px;height:56px;margin:0;display:grid;place-items:center;transition:width .4s var(--ease),height .4s var(--ease)}
.acc-head .ico svg{width:46px;height:46px;overflow:visible;transition:width .4s var(--ease),height .4s var(--ease)}
.acc-row[data-open="true"] .acc-head .ico{width:74px;height:74px}
.acc-row[data-open="true"] .acc-head .ico svg{width:74px;height:74px}
.acc-text{display:flex;flex-direction:column;gap:3px;min-width:0}
.acc-name{font-family:var(--display);font-weight:500;font-size:22px;line-height:1.2;letter-spacing:-.01em;color:var(--ink)}
.acc-tag{font-size:14.5px;line-height:1.45;color:var(--ink-3)}
.acc-eye{font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-4);white-space:nowrap}
.acc-chev{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;color:var(--ink-3);
  border:1px solid var(--border);transition:transform .4s var(--ease),border-color .3s,color .3s}
.acc-row[data-open="true"] .acc-chev{transform:rotate(180deg);color:#C89F28;border-color:rgba(212,175,55,.45)}
.acc-head:hover .acc-chev{border-color:var(--ink-4)}

.acc-panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s var(--ease)}
.acc-row[data-open="true"] .acc-panel{grid-template-rows:1fr}
.acc-inner{overflow:hidden;display:block;
  padding:0 26px 0 146px}
.acc-row[data-open="true"] .acc-inner{padding-bottom:30px}
.acc-detail{font-size:16px;line-height:1.62;color:var(--ink-2);margin:0;max-width:62ch}
.acc-covers{list-style:none;margin:22px 0 0;padding:19px 0 0;border-top:1px solid var(--border);
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:11px 26px;align-items:baseline}
.acc-covers li{font-size:14px;line-height:1.4;color:var(--ink-2);display:flex;align-items:baseline;gap:9px}
.acc-covers li::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--gold);flex:none;transform:translateY(-2px)}
.acc-covers li.mono{grid-column:1/-1;font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-4);margin-bottom:2px}
.acc-covers li.mono::before{display:none}

@media(max-width:900px){
  .acc-head{grid-template-columns:34px 46px minmax(0,1fr) 26px;gap:14px;padding:18px 16px}
  .acc-eye{display:none}
  .acc-inner{padding:0 16px 0 94px}
  .acc-covers{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 22px}
}
@media(max-width:560px){
  .acc-head{grid-template-columns:28px minmax(0,1fr) 26px;gap:12px}
  .acc-head .ico{display:none}
  .acc-name{font-size:19px}
  .acc-inner{padding:0 16px 0 52px}
}/* ============================================================
   NINETY DAYS: arrows between the phases instead of the bough.
   The vine read as clip-art; a drawn arrow states the sequence
   without pretending to be an illustration.
   ============================================================ */

.phase-grid{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr) auto minmax(0,1fr);
  gap:0 18px;align-items:stretch}
.phase-node{display:none}
 as the list marker: the motif,used once,small */
.check-list li{list-style:none;position:relative;padding-left:26px}
.check-list li::before{content:"";position:absolute;left:0;top:.42em;width:15px;height:10px;
  background-image:var(--leaf-mark);background-size:contain;background-repeat:no-repeat;opacity:.95}
.check-list{padding-left:0}/* ============================================================
   EVIDENCE: two cases, each sitting next to the dashboard the
   numbers came from. The screenshots carry the colour, so the
   section no longer needs a dark band to have weight.
   ============================================================ */

#evidence{background:var(--canvas-2);border-block:1px solid var(--border);padding:118px 0}
#evidence h2,#evidence .section-label,#evidence p{color:inherit}
#evidence h2{color:var(--ink)}
#evidence .split-heading>p{color:var(--ink-2)}
.case-honesty{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;margin-top:26px}
.case-honesty p{font-size:14px;line-height:1.55;color:var(--ink-3);margin:0}
.case-honesty .mono{display:block;font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-4);margin-bottom:7px}
@media(max-width:900px){
  .cases,.case-honesty{grid-template-columns:1fr}
  #evidence{padding:88px 0}
}
@media(max-width:480px){
  .case{padding:22px 20px 20px}
  .case-stats{grid-template-columns:1fr 1fr;gap:12px}
  .case-stats .cs:last-child{grid-column:1/-1}
}/* ============================================================
   SPRINT 2026-09-17
   Eight notes from Joe: the control boundary, a solid arrow,
   a portrait, one stray alignment, a smaller closer, and the
   evidence cards rebuilt so the proof sits inside the card.
   ============================================================ *//* --- 1. THE LINE ------------------------------------------------
   Two lists became one diagram. Each lever on the left is wired to
   the verdict it feeds on the right, and the wire stops at the line.
   That is the argument the section is making, drawn once.          */

.boundary{margin:50px 0 0;max-width:1010px}
.bd-head{display:grid;grid-template-columns:minmax(0,1fr) 154px minmax(0,1fr);
  align-items:end;padding-bottom:15px}
.bd-h-l{color:var(--emerald)}
.bd-h-r{color:var(--ink-3);padding-left:4px}
.bd-h-m{justify-self:center;font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink-4);white-space:nowrap}/* the two zones: mine has a faint wash, the far side is hatched out */

.bd-rows{position:relative;border-top:1px solid var(--border);
  background:linear-gradient(90deg,rgba(63,122,56,.05) 0 50%,transparent 50% 100%)}
.bd-rows::before{content:"";position:absolute;inset:0 0 0 50%;pointer-events:none;
  background:repeating-linear-gradient(135deg,rgba(11,26,23,.05) 0 1px,transparent 1px 8px)}
.bd-rows::after{content:"";position:absolute;top:-1px;bottom:0;left:50%;width:1.5px;
  transform:translateX(-.75px);pointer-events:none;
  background:linear-gradient(180deg,var(--ink-3) 0%,var(--ink-3) 88%,rgba(11,26,23,0) 100%);
  opacity:.62}
.bd-row{position:relative;z-index:1;display:grid;
  grid-template-columns:minmax(0,1fr) 154px minmax(0,1fr);
  align-items:center;padding:17px 0;border-bottom:1px solid var(--border)}
.bd-row:last-child{border-bottom:0}
.bd-lever,.bd-outcome{margin:0;font-size:15px;line-height:1.4}
.bd-lever{color:var(--ink);position:relative;padding:0 18px 0 30px}
.bd-lever::before{content:"";position:absolute;left:6px;top:.28em;width:15px;height:10px;
  background-image:var(--leaf-mark);background-size:contain;background-repeat:no-repeat;opacity:.95}
.bd-outcome{color:var(--ink-3);padding-left:6px}/* the wire: solid gold up to the line, ghosted past it */

.bd-link{position:relative;align-self:center;height:12px;display:block}
.bd-link::before{content:"";position:absolute;left:0;right:50%;top:5px;height:2px;border-radius:2px;
  background:linear-gradient(90deg,rgba(200,159,40,.22) 0%,#C89F28 62%,#C89F28 100%);
  transform-origin:left center}
.bd-link::after{content:"";position:absolute;left:calc(50% + 9px);right:0;top:5px;height:0;
  border-top:2px dashed var(--ink-4);opacity:.6}
.bd-link i{position:absolute;left:50%;top:6px;width:8px;height:8px;margin:-4px 0 0 -4px;border-radius:50%;
  background:#C89F28;box-shadow:0 0 0 3px rgba(212,175,55,.18)}
@keyframes bdWire{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes bdNode{from{opacity:0;transform:scale(.3)}to{opacity:1;transform:scale(1)}}
.boundary.play .bd-row:nth-child(1) .bd-link::before{animation:bdWire .75s var(--ease) .10s both}
.boundary.play .bd-row:nth-child(2) .bd-link::before{animation:bdWire .75s var(--ease) .22s both}
.boundary.play .bd-row:nth-child(3) .bd-link::before{animation:bdWire .75s var(--ease) .34s both}
.boundary.play .bd-row:nth-child(4) .bd-link::before{animation:bdWire .75s var(--ease) .46s both}
.boundary.play .bd-row:nth-child(5) .bd-link::before{animation:bdWire .75s var(--ease) .58s both}
.boundary.play .bd-row:nth-child(1) .bd-link i{animation:bdNode .35s var(--ease) .72s both}
.boundary.play .bd-row:nth-child(2) .bd-link i{animation:bdNode .35s var(--ease) .84s both}
.boundary.play .bd-row:nth-child(3) .bd-link i{animation:bdNode .35s var(--ease) .96s both}
.boundary.play .bd-row:nth-child(4) .bd-link i{animation:bdNode .35s var(--ease) 1.08s both}
.boundary.play .bd-row:nth-child(5) .bd-link i{animation:bdNode .35s var(--ease) 1.20s both}
.bd-foot{margin:24px 0 0;max-width:76ch;font-size:14px;line-height:1.55;color:var(--ink-3)}
@media(prefers-reduced-motion:reduce){.boundary *{animation:none!important}}/* --- 3. THE PORTRAIT --------------------------------------------
   A signature, not a hero image. Sixty-six pixels is the whole ask. */

.op-id{display:flex;align-items:center;gap:16px;padding-bottom:21px;
  border-bottom:1px solid var(--border);margin-bottom:24px}
.op-portrait{flex:0 0 auto;width:66px;height:66px;border-radius:50%;overflow:hidden;
  background:var(--canvas-2);display:grid;place-items:center;
  box-shadow:0 0 0 1px var(--border),0 0 0 5px var(--surface),0 0 0 6px rgba(212,175,55,.40)}
.op-portrait img{width:100%;height:100%;object-fit:cover;display:block}
.op-id-text{display:block;min-width:0}
.op-id-text strong{display:block;font-family:var(--display);font-weight:500;font-size:19px;
  line-height:1.15;letter-spacing:-.012em;color:var(--ink)}
.op-id-text .caption{display:block;margin-top:6px;color:var(--ink-4)}/* --- 6. THE CLOSER ----------------------------------------------
   It was a full section for one instruction. One bar does the job,
   and the contact page takes it from there.                        */

.closer{padding-block:76px 88px}
.closer-bar{display:flex;align-items:center;justify-content:flex-start;gap:44px;
  background:var(--surface);border:1px solid var(--border);border-radius:22px;
  box-shadow:var(--shadow);padding:32px 36px}
.closer-copy{min-width:0;flex:1 1 auto;max-width:640px}
/* The closer heading is short and its payoff phrase must not orphan a word
   onto a line of its own at phone width. Balance beats a hard <br> here,
   because the heading is reused on four pages at four column widths. */
.closer-copy h2{text-wrap:balance}
.closer-copy .section-label{display:block;margin-bottom:12px}
.closer h2{font-size:clamp(25px,3.1vw,38px);line-height:1.06;margin:0;letter-spacing:-.028em}
.closer-actions{flex:0 0 auto;display:flex;align-items:center;gap:26px}
.closer .button{margin:0}
.closer-alt{position:relative;display:inline-flex;align-items:center;gap:7px;
  min-height:44px;white-space:nowrap;transition:color .2s var(--ease)}
.closer-alt::after{content:"";position:absolute;left:0;right:0;
  top:calc(50% + 11px);height:1px;background:var(--border);transition:background .2s var(--ease)}
.closer-alt{font-size:14px;color:var(--ink-3)}
.closer-alt:hover{color:var(--emerald)}
.closer-alt:hover::after{background:var(--emerald)}/* --- 7 and 8. EVIDENCE ------------------------------------------
   Window first, then the numbers, then the screen the numbers came
   from, held in a padded well so nothing squares off inside the
   rounded card. Every figure names the system that reported it.    */

.cases{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;margin-top:10px;
  align-items:stretch}
.case{background:var(--surface);border:1px solid var(--border);border-radius:20px;
  box-shadow:var(--shadow);padding:26px 26px 25px;display:flex;flex-direction:column;gap:21px;
  overflow:hidden}
.case-head{display:flex;flex-direction:column;gap:13px}
.case-rail{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.case-idx{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-ink)}
.case-win{font-size:9.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3);
  background:var(--canvas-2);border:1px solid var(--border);border-radius:999px;
  padding:5px 12px;white-space:nowrap}
.case-who{margin:0;font-family:var(--display);font-weight:500;font-size:clamp(17px,1.9vw,21px);
  line-height:1.2;letter-spacing:-.014em;color:var(--ink)}
.case-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;
  padding:19px 0;border-block:1px solid var(--border)}
.cs{display:flex;flex-direction:column;gap:7px;min-width:0;padding-right:15px}
.cs+.cs{border-left:1px solid var(--border);padding-left:17px}
.cs:last-child{padding-right:0}
.cs-v{font-family:var(--display);font-weight:600;font-size:clamp(25px,2.8vw,35px);line-height:1;
  letter-spacing:-.032em;color:var(--ink);font-variant-numeric:tabular-nums}
.cs-l{font-size:9.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-2);line-height:1.35}
.cs-s{font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-4);line-height:1.3}
.proof{margin:0;display:flex;flex-direction:column;gap:11px}
.proof-plate{background:var(--canvas-2);border:1px solid var(--border);border-radius:16px;
  padding:12px;overflow:hidden;display:flex;flex-direction:column;gap:12px}
.proof-plate img{display:block;width:100%;height:auto;border-radius:9px;background:#fff;
  box-shadow:0 0 0 1px rgba(11,26,23,.07)}
/* proof-compact: render a small dashboard crop near its native size instead
   of stretching it to fill the card, which is what makes a low-resolution
   screenshot look oversized and blurry. */
.proof-compact{align-items:center}
.proof-compact .proof-zoom{width:auto;max-width:100%}
.proof-compact .proof-zoom img{width:auto;max-width:100%;height:auto}
.proof figcaption{font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-4);
  padding-left:2px}
.case-note{margin:auto 0 0;padding-top:19px;border-top:1px solid var(--border);
  font-size:14px;line-height:1.55;color:var(--ink-3)}
/* ============================================================
   CASE STUDIES (index + individual pages)
   Reuses the .case card from the homepage evidence section: as a
   link for the index list, and as a wider single panel on each
   client's own page.
   ============================================================ */

.evidence-cta{margin-top:30px}
.case-head .ico{width:46px;height:46px;margin:0}
.case-head .ico svg{width:38px;height:38px}
/* rank table: native rebuild of a Semrush position-tracking export,
   used instead of a raw screenshot so the client domain never renders. */
.rank-plate{padding:4px}
.rank-table{width:100%;border-collapse:collapse}
.rank-table th{font-family:var(--mono);font-weight:400;font-size:9px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-4);text-align:center;padding:12px 10px 10px;
  border-bottom:1px solid var(--border)}
.rank-table th:first-child{text-align:left;padding-left:14px}
.rank-table td{padding:10px;font-size:13.5px;color:var(--ink-2);border-bottom:1px solid var(--border);
  text-align:center;font-variant-numeric:tabular-nums}
.rank-table tbody tr:last-child td{border-bottom:0}
.rank-table td:first-child{text-align:left;padding-left:14px;color:var(--ink);font-weight:500}
.rank-table .rk-was{color:var(--ink-4)}
.rank-table .rk-now{font-family:var(--display);font-weight:600;font-size:15px;color:var(--ink)}
.rank-table .rk-up{display:inline-flex;align-items:center;gap:3px;color:var(--leaf-bright);
  font-family:var(--mono);font-size:11px;letter-spacing:.02em}
.rank-table .rk-flat{color:var(--ink-4);font-family:var(--mono);font-size:12px}
.rank-table .rk-new{display:inline-block;padding:3px 8px;border-radius:20px;
  background:rgba(212,175,55,.14);color:var(--gold-ink);font-family:var(--mono);
  font-size:8.5px;letter-spacing:.09em;text-transform:uppercase}
@media(max-width:560px){
  .rank-table th,.rank-table td{padding:8px 6px;font-size:12px}
  .rank-table th:first-child,.rank-table td:first-child{padding-left:10px}
}
/* ai-plate: a single-metric highlight (e.g. a new acquisition source) sized
   to its content instead of stretching a small screenshot full-width. */
.ai-plate{padding:22px 24px;gap:11px}
.ai-stat-top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.ai-stat-tag{display:inline-block;padding:3px 9px;border-radius:20px;background:rgba(212,175,55,.14);
  color:var(--gold-ink);font-family:var(--mono);font-size:8.5px;letter-spacing:.09em;text-transform:uppercase}
.ai-stat-row{display:flex;align-items:baseline;gap:12px}
.ai-stat-row .cs-v{font-size:clamp(28px,3.2vw,38px)}
.ai-stat-d{display:inline-flex;align-items:center;gap:4px;font-family:var(--mono);
  font-size:14px;font-weight:600;color:var(--leaf-bright)}
/* case-scope: which of the five (or ten) service pieces show up in this
   engagement's data, linked back to the services page rather than
   re-explained here. */
.case-scope{margin-top:28px;padding-top:24px;border-top:1px solid var(--border)}
.case-scope>.mono{display:block;margin-bottom:13px;color:var(--ink-4)}
.scope-tags{display:flex;flex-wrap:wrap;gap:10px}
.scope-tag{display:inline-flex;align-items:center;gap:10px;padding:7px 16px 7px 7px;
  border:1px solid var(--border);border-radius:30px;background:var(--surface);
  color:var(--ink-2);text-decoration:none;font-size:13px;font-weight:500;line-height:1.3;
  transition:border-color .3s var(--ease),color .3s var(--ease)}
.scope-tag .ico{width:30px;height:30px;margin:0;flex:none}
.scope-tag .ico svg{width:26px;height:26px}
.scope-tag:hover{border-color:var(--gold);color:var(--ink)}
.case-scope-note{margin:13px 0 0;font-size:12px;line-height:1.5;color:var(--ink-4)}
a.case-link{color:inherit;text-decoration:none;cursor:pointer}
@media(hover:hover) and (pointer:fine){
  a.case-link:hover{transform:translateY(-3px);box-shadow:var(--shadow-lift);border-color:#D7C79B}
}
.case-full{max-width:860px}
.breadcrumb-back{display:inline-flex;align-items:center;gap:8px;margin-bottom:22px;
  font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-4);
  transition:color .2s var(--ease)}
.breadcrumb-back:hover{color:var(--emerald)}
.case-honesty-solo{grid-template-columns:1fr;max-width:860px;margin-top:26px}
.case-next{margin:28px 0 0;font-size:10px;letter-spacing:.14em;text-transform:uppercase}
.case-next a{display:inline-flex;align-items:center;gap:8px;color:var(--gold-ink)}
.case-next a:hover{color:var(--emerald)}

@media(max-width:1100px){
  .bd-head,.bd-row{grid-template-columns:minmax(0,1fr) 116px minmax(0,1fr)}
  .closer-bar{gap:30px;padding:28px 28px}
  .closer-actions{gap:20px}
}
@media(max-width:900px){
  .phase-grid{grid-template-columns:1fr;gap:12px 0}
  .cases{grid-template-columns:1fr}
  .case-note{margin-top:0}
  .closer-bar{flex-direction:column;align-items:flex-start;gap:24px}
  .closer-actions{width:100%;justify-content:flex-start}
}
@media(max-width:760px){/* Stacked, the two zones cannot be left and right, so they become two
     chips per row: mine washed green under a leaf, theirs hatched out.
     The gold wire still runs from one to the other and stops. */
  
  .boundary{margin-top:34px}
  .bd-head{grid-template-columns:auto auto;justify-content:space-between;gap:14px;padding-bottom:12px}
  .bd-h-m{display:none}
  .bd-h-r{text-align:right;padding-left:0}
  .bd-rows{background:none;border-top:0}
  .bd-rows::before,.bd-rows::after{display:none}
  .bd-row{grid-template-columns:1fr;padding:0;border-bottom:0;margin-bottom:18px}
  .bd-row:last-child{margin-bottom:0}
  .bd-lever{padding:11px 13px 11px 34px;border-radius:9px;
    background:rgba(63,122,56,.07);border:1px solid rgba(63,122,56,.14)}
  .bd-lever::before{left:12px;top:.85em}
  .bd-outcome{padding:11px 13px;border-radius:9px;border:1px solid var(--border);
    background:repeating-linear-gradient(135deg,rgba(11,26,23,.05) 0 1px,transparent 1px 8px)}
  .bd-link{height:22px;margin-left:21px}
  .bd-link::before{left:0;right:auto;top:0;width:2px;height:11px;border-radius:2px;
    background:linear-gradient(180deg,rgba(200,159,40,.22) 0%,#C89F28 100%);
    transform-origin:top center}
  .boundary.play .bd-row .bd-link::before{animation:none}
  .bd-link::after{left:0;right:auto;top:15px;width:0;height:7px;
    border-top:0;border-left:2px dashed var(--ink-4)}
  .bd-link i{left:0;top:11px;margin:-4px 0 0 -3px}
  .bd-foot{margin-top:24px;font-size:13.5px}
  .closer{padding-block:58px 66px}
  .closer-bar{padding:26px 22px;border-radius:18px}
}
@media(max-width:700px){/* the screenshots are the proof; at phone width they are read by swiping */
  
  .proof-plate{overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none}
  .proof-plate::-webkit-scrollbar{display:none}
  .proof-plate img{width:520px;max-width:none;flex:0 0 auto}
  .proof-compact .proof-zoom img{width:auto;max-width:100%;flex:0 0 auto}
  .proof figcaption::after{content:" \00B7 swipe to read";opacity:.72}
}
@media(max-width:560px){
  .case{padding:22px 20px 21px;border-radius:18px;gap:18px}
  .case-stats{grid-template-columns:1fr 1fr;gap:16px 0;padding:17px 0}
  .cs:nth-child(odd){padding-right:14px;padding-left:0;border-left:0}
  .cs:nth-child(even){border-left:1px solid var(--border);padding-left:16px;padding-right:0}
  .cs:last-child{grid-column:1/-1;border-left:0;padding-left:0;padding-top:16px;
    border-top:1px solid var(--border)}
  .case-win{white-space:normal}
  .proof-plate{padding:9px;border-radius:13px}
  .closer-actions{flex-direction:column;align-items:stretch;gap:16px}
  .closer .button{width:100%;justify-content:center}
  .closer-alt{align-self:flex-start}
}/* ============================================================
   THE OPERATING LAYER
   Four channels taper into one shared record. The bands are
   clip-path trapezoids that chain by inset, so the wall of the
   funnel is continuous rather than four stacked cards. Rebuilt
   from the retired #pmc-engine embed, in the light palette.
   ============================================================ */

.funnel{margin:0;position:relative;width:100%;max-width:470px;margin-inline:auto}
.fn-stack{position:relative;height:460px}
.fn-band{position:absolute;left:0;right:0;height:104px}
.fn-b1{top:0;clip-path:polygon(0 0,100% 0,94.5% 100%,5.5% 100%);
  background:linear-gradient(180deg,rgba(63,122,56,.17),rgba(63,122,56,.10));
  border-top:1.5px solid rgba(63,122,56,.62)}
.fn-b2{top:104px;clip-path:polygon(5.5% 0,94.5% 0,89% 100%,11% 100%);
  background:linear-gradient(180deg,rgba(76,138,40,.17),rgba(108,146,46,.11));
  border-top:1.5px solid rgba(76,138,40,.6)}
.fn-b3{top:208px;clip-path:polygon(11% 0,89% 0,83.5% 100%,16.5% 100%);
  background:linear-gradient(180deg,rgba(150,152,50,.17),rgba(190,163,52,.12));
  border-top:1.5px solid rgba(150,152,50,.62)}
.fn-b4{top:312px;clip-path:polygon(16.5% 0,83.5% 0,78% 100%,22% 100%);
  background:linear-gradient(180deg,rgba(212,175,55,.22),rgba(212,175,55,.11));
  border-top:1.5px solid rgba(200,159,40,.75)}
.fn-spout{position:absolute;top:416px;left:0;right:0;height:44px;
  clip-path:polygon(22% 0,78% 0,61% 100%,39% 100%);
  background:linear-gradient(180deg,rgba(212,175,55,.16),rgba(212,175,55,.04))}
@keyframes fnIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
.funnel.play .fn-b1{animation:fnIn .62s var(--ease) .06s both}
.funnel.play .fn-b2{animation:fnIn .62s var(--ease) .18s both}
.funnel.play .fn-b3{animation:fnIn .62s var(--ease) .30s both}
.funnel.play .fn-b4{animation:fnIn .62s var(--ease) .42s both}
.funnel.play .fn-spout{animation:fnIn .55s var(--ease) .56s both}/* the flow: one repeating chevron, marched by background-position.
   No DOM, no script, and the mask breaks it into four runs so the
   stream reads as four separate channels arriving. */

.fn-flow{position:absolute;top:6px;bottom:0;left:50%;transform:translateX(-50%);width:14px;z-index:1;
  opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='14'%20height='22'%20viewBox='0%200%2014%2022'%3E%3Cpath%20d='M3.2%207%20L7%2011.4%20L10.8%207'%20fill='none'%20stroke='%23C89F28'%20stroke-width='1.8'%20stroke-linecap='round'%20stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:repeat-y;background-size:14px 22px;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 6%,#000 94%,transparent);
          mask-image:linear-gradient(180deg,transparent,#000 6%,#000 94%,transparent)}
.fn-flow{animation:fn-march 1.35s linear infinite}
@keyframes fn-march{from{background-position-y:0}to{background-position-y:22px}}/* labels: one pill, one size, dead centre of its own band */

.fn-label{position:absolute;left:0;right:0;height:104px;z-index:3;display:flex;align-items:center;
  justify-content:center;pointer-events:none}
.fn-l1{top:0}.fn-l2{top:104px}.fn-l3{top:208px}.fn-l4{top:312px}
@keyframes fnLabelIn{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:translateY(0)}}
.funnel.play .fn-l1{animation:fnLabelIn .5s var(--ease) .26s both}
.funnel.play .fn-l2{animation:fnLabelIn .5s var(--ease) .38s both}
.funnel.play .fn-l3{animation:fnLabelIn .5s var(--ease) .50s both}
.funnel.play .fn-l4{animation:fnLabelIn .5s var(--ease) .62s both}
.fn-pill{display:inline-flex;align-items:center;gap:10px;padding:9px 19px 9px 14px;border-radius:999px;
  background:var(--surface);border:1px solid var(--border);box-shadow:0 3px 12px rgba(11,26,23,.07);
  font:500 15px/1 var(--body);letter-spacing:-.008em;color:var(--ink);white-space:nowrap}
.fn-pill i{font-family:var(--mono);font-style:normal;font-weight:500;font-size:9.5px;
  letter-spacing:.14em;color:var(--gold-ink)}/* the catch plate the spout lands on */

.fn-base{margin:10px 0 0;text-align:center;border:1.5px solid var(--gold);border-radius:13px;
  background:linear-gradient(180deg,#FCF6E3,#F7EDC9);padding:15px 20px 16px;
  box-shadow:0 10px 22px -14px rgba(120,94,16,.5)}
.funnel.play .fn-base{animation:fnIn .55s var(--ease) .68s both}
.fn-base-label{display:block;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:#6F550F}
.fn-base-note{display:block;margin-top:7px;font-size:14px;line-height:1.4;color:var(--ink-2)}/* what the layer holds: four cards hung off a gold rail */

.opl{min-width:0}
.opl-rows{list-style:none;margin:0;padding:0 0 0 30px;position:relative;
  display:flex;flex-direction:column;gap:12px}
.opl-rows::before{content:"";position:absolute;left:5px;top:24px;bottom:24px;width:1.5px;border-radius:2px;
  background:linear-gradient(180deg,var(--gold) 0%,rgba(212,175,55,.22) 100%)}
.opl-row{position:relative}
.opl-node{position:absolute;left:-30px;top:24px;width:12px;height:12px;border-radius:50%;
  background:var(--surface);border:2px solid var(--gold);z-index:1}
.opl-node::after{content:"";position:absolute;left:10px;top:50%;width:19px;height:1px;
  background:var(--border);transform:translateY(-.5px)}
.opl-card{background:var(--surface);border:1px solid var(--border);border-radius:14px;
  padding:19px 23px 20px;box-shadow:var(--shadow);
  transition:transform .25s var(--ease),box-shadow .25s var(--ease),border-color .25s var(--ease)}
.opl-card header{display:flex;align-items:baseline;gap:12px;margin-bottom:7px}
.opl-ix{font-size:9.5px;letter-spacing:.14em;color:var(--gold-ink)}
.opl-card h3{margin:0;font-family:var(--display);font-weight:500;font-size:21px;line-height:1.1;
  letter-spacing:-.018em;color:var(--ink)}
.opl-card p{margin:0;font-size:15px;line-height:1.5;color:var(--ink-3)}
@media(hover:hover) and (pointer:fine){
  .opl-card:hover{transform:translateX(4px);box-shadow:var(--shadow-lift);border-color:#D7C79B}
}
@media(prefers-reduced-motion:reduce){
  .funnel *{animation:none!important}
  .opl-card{transition:none}
}
@media(max-width:1100px){
  .fn-pill{font-size:14px;padding:8px 16px 8px 12px;gap:8px}
}
@media(max-width:900px){
  .operating-grid{grid-template-columns:1fr;gap:44px}
  .funnel{max-width:430px}
  .opl-rows{padding-left:28px}
}
@media(max-width:560px){
  .fn-stack{height:392px}
  .fn-band{height:88px}
  .fn-b2{top:88px}.fn-b3{top:176px}.fn-b4{top:264px}
  .fn-spout{top:352px;height:40px}
  .fn-label{height:88px}
  .fn-l2{top:88px}.fn-l3{top:176px}.fn-l4{top:264px}
  .fn-pill{font-size:13.5px;padding:7px 14px 7px 11px}
  .fn-base{padding:13px 16px 14px}
  .fn-base-note{font-size:13.5px}
  .opl-rows{padding-left:24px;gap:10px}
  .opl-node{left:-24px;width:10px;height:10px}
  .opl-node::after{left:8px;width:14px}
  .opl-card{padding:15px 17px 16px}
}/* ============================================================
   READING PASS
   Green on the phrase that carries each heading. One plate for
   every honest note, so the asides stop being loose paragraphs.
   Nothing quiet enough to squint at.
   ============================================================ */

h1 .gr,h2 .gr,h3 .gr{color:var(--emerald)}/* the note plate: a labelled aside, used wherever the page owns up to
   something. Gold rule on the reading edge so it is not a card. */

.note-plate{background:var(--surface);border:1px solid var(--border);
  border-left:3px solid var(--gold);border-radius:0 13px 13px 0;padding:19px 24px 20px}
.note-plate>.mono{display:block;font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-4);margin-bottom:9px}
.note-plate p{margin:0;font-size:14.5px;line-height:1.6;color:var(--ink-2);max-width:74ch}
.case-honesty{align-items:start}
.case-honesty .note-plate p{font-size:14px}
.timeline-note,.bd-foot,.operator-fair{max-width:860px}
.timeline-note{margin-top:34px}
.bd-foot{margin-top:28px}
.operator-fair{margin-top:34px}/* the quote, shortened, with the reasoning below it rather than inside it */

.operator-quote h2{max-width:26ch;text-wrap:balance}
.operator-sub{margin:20px 0 0;max-width:62ch;font-size:16px;line-height:1.55;color:var(--ink-2)}/* the closer: the two promises belong under the line, not in a run-on row */

.closer-sub{margin:13px 0 0;font-size:14.5px;line-height:1.5;color:var(--ink-3);max-width:44ch}/* the stance verdicts sat on a hatch that ate them */

.bd-rows::before{background:repeating-linear-gradient(135deg,rgba(11,26,23,.035) 0 1px,transparent 1px 9px)}
.bd-outcome{color:var(--ink-2)}/* proof screenshots open full size */

.proof-zoom{position:relative;display:block;width:100%;padding:0;border:0;background:none;
  border-radius:9px;cursor:zoom-in;-webkit-appearance:none;appearance:none}
.proof-zoom img{display:block;width:100%;height:auto;border-radius:9px;background:#fff;
  box-shadow:0 0 0 1px rgba(11,26,23,.07);transition:box-shadow .2s var(--ease)}
.proof-zoom:hover img{box-shadow:0 0 0 1px rgba(200,159,40,.75)}
.proof-zoom:focus-visible{outline:2px solid var(--emerald);outline-offset:3px}
.pz-cue{position:absolute;right:9px;bottom:9px;width:27px;height:27px;border-radius:8px;
  display:grid;place-items:center;background:rgba(11,26,23,.74);color:#fff;opacity:.9;
  transition:opacity .2s var(--ease),transform .2s var(--ease)}
.proof-zoom:hover .pz-cue{opacity:1;transform:scale(1.08)}
.lightbox{border:0;padding:0;background:transparent;max-width:min(94vw,1240px);
  max-height:92vh;overflow:visible}
.lightbox::backdrop{background:rgba(11,26,23,.74)}
.lightbox figure{position:relative;margin:0;background:var(--surface);border:1px solid var(--border);
  border-radius:17px;padding:15px;box-shadow:var(--shadow-lift)}
.lightbox img{display:block;width:100%;height:auto;max-height:78vh;object-fit:contain;border-radius:9px;background:#fff}
.lightbox figcaption{margin-top:12px;font-size:10px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--ink-3);text-align:center}
.lb-close{position:absolute;top:-16px;right:-16px;width:44px;height:44px;border-radius:50%;
  border:1px solid var(--border);background:var(--surface);color:var(--ink);
  display:grid;place-items:center;cursor:pointer;box-shadow:var(--shadow);
  transition:color .2s var(--ease),border-color .2s var(--ease)}
.lb-close:hover{color:var(--emerald);border-color:var(--emerald)}

@media(max-width:900px){
  .note-plate{padding:17px 19px 18px}
  .operator-sub{font-size:15px;margin-top:17px}
  .closer-sub{max-width:none}
}
@media(max-width:560px){
  .note-plate{border-radius:0 11px 11px 0;padding:15px 16px 16px}
  .note-plate p{font-size:14px;line-height:1.55}
  .lightbox{max-width:94vw}
  .lightbox figure{padding:11px;border-radius:14px}
  .lb-close{top:-12px;right:-12px;width:44px;height:44px}
}/* what arrived at each gate, behind what survived it *//* the line the section is really making, lifted out of the paragraph run */

.about-stand{margin-top:24px!important;padding:16px 0 0;border-top:1px solid var(--border);
  font-family:var(--display);font-weight:500;font-size:clamp(17px,1.9vw,20px);line-height:1.35;
  letter-spacing:-.014em;color:var(--ink);max-width:40ch}
@media(max-width:560px){.about-stand{font-size:17px;margin-top:20px!important}}/* ============================================================
   THE LEAK BANDS
   Built in markup rather than a stretched SVG, so the bars keep
   their proportions, the labels below line up with them, and the
   selected stage reads as green rather than a black block.
   ============================================================ */

.leakbars{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:28px;height:184px;margin:6px 0 0}
.lb-col{position:relative;display:flex;flex-direction:column;height:100%}
.lb-lost{flex-grow:0;flex-shrink:0;border:1px dashed rgba(11,26,23,.2);border-bottom:0;
  border-radius:7px 7px 0 0}
.lb-fill{flex-grow:0;flex-shrink:0;border-radius:7px;background:rgba(63,122,56,.12);
  border:1px solid rgba(63,122,56,.25);
  transition:background .4s var(--ease),border-color .4s var(--ease),box-shadow .4s var(--ease)}
.lb-col.on .lb-fill{background:rgba(63,122,56,.3);border-color:rgba(63,122,56,.55);
  box-shadow:inset 0 3px 0 var(--gold),0 6px 18px -12px rgba(63,122,56,.55)}
.lb-leak{position:absolute;right:-28px;bottom:2px;width:28px;display:grid;place-items:center;
  color:var(--gold-ink);opacity:.85}
.leakbars+.path-track{margin-top:20px}/* ============================================================
   THE STEP BETWEEN PHASES
   A drawn rule that ends in a mark, in the same hairline language
   as the rest of the page. No extrusion, no shine.
   ============================================================ */

.phase-arrow{display:flex;align-items:center;justify-content:center;min-width:92px;
  padding:0 8px;color:var(--gold-ink)}
.pa-rail{flex:1 1 auto;height:1.5px;border-radius:2px;transform-origin:left center;
  background:linear-gradient(90deg,rgba(11,26,23,.09),var(--gold-ink))}
.pa-tip{flex:0 0 auto;display:grid;place-items:center;margin-left:2px}
@keyframes paDraw{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes paDrawV{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes paTip{from{opacity:0;transform:translateX(-6px)}to{opacity:1;transform:translateX(0)}}
.phase-arrow.go .pa-rail{animation:paDraw .75s var(--ease) both}
.phase-arrow.go .pa-tip{animation:paTip .4s var(--ease) .5s both}
.phase-node{display:none}/* ============================================================
   THE STANCE
   The diagram was floating in a third of a screen of nothing.
   The footnote moves into that space as a proper sidebar.
   ============================================================ */

.stance-head{margin-bottom:0}
.stance-grid{display:grid;grid-template-columns:minmax(0,1fr) 306px;gap:58px;
  align-items:start;margin-top:46px}
.boundary{max-width:none;margin:0}
.bd-head,.bd-row{grid-template-columns:minmax(0,1fr) 150px minmax(0,1fr)}
.stance-grid .bd-foot{margin:0;max-width:none}/* ============================================================
   WHO YOU ARE HIRING
   Tops flush, and the line that matters anchored to the bottom so
   the two columns close together instead of drifting.
   ============================================================ */

.about-grid{grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr);gap:76px;align-items:stretch}
.about-grid>div:first-child{display:flex;flex-direction:column}
.about-grid p{max-width:52ch}
.about-stand{margin-top:auto!important;padding-top:22px;max-width:46ch}
.operator-card{align-self:stretch;display:flex;flex-direction:column}
.operator-card dl>div:last-child{margin-top:auto}

@media(max-width:1100px){
  .stance-grid{grid-template-columns:1fr;gap:34px}
  .stance-grid .bd-foot{max-width:860px}
  .bd-head,.bd-row{grid-template-columns:minmax(0,1fr) 116px minmax(0,1fr)}
}
@media(max-width:900px){
  .leakbars{height:132px;column-gap:18px}
  .lb-leak{right:-18px;width:18px}
  .phase-arrow{min-width:0;height:46px;flex-direction:column;padding:6px 0}
  .pa-rail{width:1.5px;height:auto;flex:1 1 auto;transform-origin:top center;
    background:linear-gradient(180deg,rgba(11,26,23,.09),var(--gold-ink))}
  .pa-tip{margin:2px 0 0}
  .pa-tip svg{transform:rotate(90deg)}
  .phase-arrow.go .pa-rail{animation:paDrawV .75s var(--ease) both}
  .phase-arrow.go .pa-tip{animation:none}
  .about-grid{gap:44px;align-items:start}
  .about-stand{margin-top:24px!important}
}
@media(max-width:760px){
  .leakbars{height:104px;margin-top:2px;column-gap:12px}
  .lb-leak{right:-12px;width:12px;bottom:0}
  .lb-leak svg{width:9px;height:16px}
  .about-grid{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){.phase-arrow *{animation:none!important}}/* the panel copy now owns the full width, so it needs a measure */

.acc-detail{max-width:78ch}
@media(max-width:560px){.acc-covers{grid-template-columns:1fr;gap:9px}}/* the operator card ran taller than the copy beside it, which left a hole
   in the middle of the left column once the tops were flush */

.operator-card{padding:32px}
.operator-card h3{margin-bottom:24px}
.operator-card dl>div{padding:16px 0}
.op-id{padding-bottom:18px;margin-bottom:20px}
.about-grid>div:first-child>p:first-of-type{margin-top:0}
.about-grid h2{margin-bottom:22px}/* the drop marks between bands were too quiet to read as loss */

.lb-leak{opacity:1}
.lb-leak svg{width:13px;height:23px;stroke-width:2}
@media(max-width:760px){.lb-leak svg{width:9px;height:16px;stroke-width:2.2}}/* ------------------------------------------------------------
   The audit card's eyebrow carries the section-label bottom
   margin, so the flex row was centring a taller box than the
   chip beside it and the two sat off by half that margin.
   ------------------------------------------------------------ */

.aw-top{align-items:center}
.aw-top .section-label{margin-bottom:0;line-height:1}
.aw-top .aw-chip{line-height:1}/* the three phase cards were reading as three separate things */

.phase-grid{gap:0 10px}
.phase-arrow{min-width:56px;padding:0 4px}/* the two honest notes read better stacked than side by side */

.case-honesty{grid-template-columns:1fr;gap:14px;margin-top:24px}
.case-honesty .note-plate p{max-width:96ch}

@media(max-width:1100px){.phase-arrow{min-width:44px;padding:0 2px}}/* ------------------------------------------------------------
   The panel's links are inside .nav-links, so they were picking
   up the top-level nav's white-space:nowrap and running past the
   panel edge instead of wrapping.
   ------------------------------------------------------------ */

.nav-panel{width:min(660px,92vw);padding:22px 20px 16px}
.nav-panel a{white-space:normal;min-width:0}/* the label was pinned left with the mark pushed to the far edge; the pair
   now sits centred, with even padding on both sides */

.button{justify-content:center;gap:16px;padding:14px 30px}
.closer .button{padding:14px 30px}
@media(max-width:560px){.button{gap:13px;padding:14px 24px}}/* what the scan costs you sits with the button, not orphaned under the
   checklist. Three chips, and the same node carries the fallback message. */

.aw-assure{display:flex;flex-wrap:wrap;align-items:center;gap:7px;margin:14px 0 0}
.aw-assure span{font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-3);background:var(--canvas-2);border:1px solid var(--border);
  border-radius:999px;padding:5px 11px;white-space:nowrap}
.aw-assure.said{display:block;font-family:var(--body);font-size:12.5px;line-height:1.45;
  letter-spacing:.02em;text-transform:none;color:var(--emerald)}
.aw-checks{margin-bottom:0;padding-top:22px;margin-top:4px}/* the funnel now closes the section, and one honest note stands alone */

.operating-grid{margin-bottom:0}
.case-honesty{margin-top:22px}/* the footnote reads as part of the diagram, so it sits under it.
   The diagram takes the full shell instead, and the longer middle
   track keeps the wires long and the phrases near the line. */

.stance-grid{display:block}
.bd-head,.bd-row{grid-template-columns:minmax(0,1fr) 300px minmax(0,1fr)}
.stance-grid .bd-foot{margin:30px 0 0;max-width:920px}
@media(max-width:1100px){
  .bd-head,.bd-row{grid-template-columns:minmax(0,1fr) 150px minmax(0,1fr)}
}
@media(max-width:760px){
  .bd-head,.bd-row{grid-template-columns:1fr}
}/* the closing line is part of the paragraph run now, quoted, with no rule
   dividing it off, so the column ends where the copy ends */

.about-grid{align-items:start}
.about-stand{margin-top:20px!important;padding-top:0;border-top:0;max-width:44ch}/* nothing sits under the closing bar, so the section pads evenly around it */

.closer{padding-block:84px}/* ------------------------------------------------------------
   Click to call. The number is the CallRail tracking line
   already published in the footer, so both places report the
   same source. Collapses to the icon when the bar gets tight.
   ------------------------------------------------------------ */

.nav-call{display:inline-flex;align-items:center;gap:9px;min-height:44px;padding:10px 15px;
  border-radius:999px;font-family:var(--body);font-size:14.5px;font-weight:500;
  color:var(--ink-2);white-space:nowrap;
  transition:color .2s var(--ease),background .2s var(--ease)}
.nav-call:hover{color:var(--ink);background:var(--canvas-2)}
.nav-call svg{flex:none;opacity:.8}
.nav-call:hover svg{opacity:1}
.mobile-menu .mm-call{justify-content:flex-start;gap:10px}
@media(max-width:1240px){.nav-call span{display:none}.nav-call{padding:10px 12px}}
@media(max-width:900px){.nav-call{padding:10px}}/* ------------------------------------------------------------
   The two columns now start level and finish level: the cards
   distribute into whatever height the funnel sets, so the last
   card's base sits on the same line as the catch plate.
   ------------------------------------------------------------ */

.operating-grid{align-items:stretch}
.opl{display:flex;flex-direction:column}
.opl-rows{flex:1 1 auto;justify-content:space-between}
.funnel{display:flex;flex-direction:column}
.fn-stack{flex:0 0 auto}
.fn-base{margin-top:auto}/* the rule under the audit chips had 4px above it and 22 below */

.aw-checks{margin-top:18px;padding-top:18px}

@media(max-width:900px){
  .opl-rows{flex:0 1 auto;justify-content:flex-start}
  .fn-base{margin-top:10px}
}/* the spare height goes into the cards, not into the gaps between them:
   four equal plates, content centred, bases level with the catch plate */

.opl-rows{justify-content:flex-start;gap:12px}
.opl-row{flex:1 1 0;display:flex;min-height:0}
.opl-card{flex:1 1 auto;display:flex;flex-direction:column;justify-content:center}
.opl-node{top:50%;transform:translateY(-50%)}
@media(max-width:900px){
  .opl-row{flex:0 0 auto;display:block}
  .opl-card{display:block}
  .opl-node{top:24px;transform:none}
}/* the hero opens on the headline now, and closes on one line of
   positioning rather than a three-part strip */
/* the third proof strip is short, so the button needed a real target */

.proof-zoom{min-height:44px;display:flex;flex-direction:column;justify-content:center}/* ------------------------------------------------------------
   The mark signs off the column the founder's statement sits in.
   ------------------------------------------------------------ */

.about-grid{align-items:stretch}/* ------------------------------------------------------------
   THE LEDGER
   The right column reads as one raised plate running the height
   of the comparison, with a green head, rather than four loose
   tinted cells. Each side gets its own mark: a leaf for the work
   that is mine, a dash for the work that travels.
   ------------------------------------------------------------ *//* the raised plate: borders on every cell, corners on the ends *//* the cells are the paragraphs themselves, so the marks hang off them */

@media(max-width:760px){
  .about-grid{align-items:start}
}

/* ------------------------------------------------------------
   The ledger on a phone: two narrow columns turned every answer
   into one word per line. It stacks instead, the marks carry the
   two sides, and the head becomes the legend for them.
   ------------------------------------------------------------ */
/* the mark sits with the statement it belongs to, and the two columns
   finish on the same line */
.about-stand{display:flex;align-items:center;gap:22px;margin-top:auto!important;
  padding-top:30px;max-width:none}
.about-stand img{width:76px;height:auto;flex:none;opacity:.95}
.about-stand p{margin:0;font-family:var(--display);font-weight:500;
  font-size:clamp(17px,1.9vw,20px);line-height:1.35;letter-spacing:-.014em;
  color:var(--ink);max-width:36ch}
.operator-card{padding:30px}
.operator-card h3{margin-bottom:21px}
.operator-card dl>div{padding:15px 0}
@media(max-width:900px){
  .about-stand{gap:17px;padding-top:24px}
  .about-stand img{width:62px}
}
@media(max-width:760px){
  .about-stand{margin-top:24px!important;padding-top:22px;border-top:1px solid var(--border)}
}/* ------------------------------------------------------------
   The nav links were centred by flex, which only works when the
   two outer zones happen to be the same width. They are not, so
   the links drifted right by as much as 67px at medium widths.
   They are now pinned to the bar's true centre, and they tighten
   just above the breakpoint so they never meet the wordmark.
   ------------------------------------------------------------ */

.navbar{position:relative}
.nav-links{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}
.nav-actions{margin-left:auto}
@media(max-width:1080px){
  .nav-links a,.nav-trigger{padding:10px 11px;font-size:14px}
  .nav-links{gap:0}
}/* ------------------------------------------------------------
   Click to call reads as a button now: a secondary pill beside
   the primary one, with the handset in the leaf green so it is
   obviously an action.
   ------------------------------------------------------------ */

.nav-call{padding:11px 19px;border:1px solid var(--border);background:var(--surface);
  color:var(--ink);font-weight:500;
  transition:border-color .2s var(--ease),color .2s var(--ease),
             background .2s var(--ease),transform .25s var(--ease)}
.nav-call svg{color:var(--emerald);opacity:1}
.nav-call:hover{background:#F3F8F1;border-color:#A9C7A2;color:var(--ink);transform:translateY(-1px)}
.nav-call:hover svg{opacity:1}
.nav-call:focus-visible{outline:2px solid var(--emerald);outline-offset:2px}
@media(max-width:1240px){
  .nav-call{width:44px;height:44px;padding:0;justify-content:center;border-radius:50%}
}
@media(prefers-reduced-motion:reduce){.nav-call:hover{transform:none}}/* the chip's padding was even but its line box was not, so the label
   sat below centre next to the eyebrow */

.aw-chip{display:inline-flex;align-items:center;line-height:1;padding:7px 11px 6px}/* ============================================================
   INNER PAGES
   Services, contact and the writing index, on the same tokens,
   components and rhythm as the homepage.
   ============================================================ */

.page-hero{padding:74px 0 8px}
.page-hero h1{font-family:var(--display);font-weight:500;font-size:clamp(38px,5.6vw,72px);
  line-height:1.02;letter-spacing:-.035em;color:var(--ink);margin:0;max-width:17ch;text-wrap:balance}
.page-lead{margin:28px 0 0;max-width:58ch;font-size:clamp(17px,1.9vw,19px);line-height:1.55;color:var(--ink-2)}
[aria-current="page"]{color:var(--ink)!important;background:var(--canvas-2)}/* the four jobs */

.sys-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.sys-card{background:var(--surface);border:1px solid var(--border);border-radius:16px;
  padding:24px 24px 26px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:9px;
  transition:transform .25s var(--ease),box-shadow .25s var(--ease)}
.sys-ix{font-size:9.5px;letter-spacing:.16em;color:var(--gold-ink)}
.sys-card h3{margin:0;font-family:var(--display);font-weight:500;font-size:21px;line-height:1.1;
  letter-spacing:-.018em;color:var(--ink)}
.sys-verb{font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--emerald)}
.sys-card p{margin:6px 0 0;font-size:14px;line-height:1.5;color:var(--ink-3)}
@media(hover:hover) and (pointer:fine){.sys-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lift)}}/* the six pieces */

.svc-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.svc-card{background:var(--surface);border:1px solid var(--border);border-radius:14px;
  padding:21px 24px 22px;box-shadow:var(--shadow);scroll-margin-top:150px;
  transition:transform .25s var(--ease),box-shadow .25s var(--ease),border-color .25s var(--ease)}
.svc-card header{display:flex;align-items:baseline;gap:12px;margin-bottom:7px}
/* evidence cards (homepage): title leads, the case index sits underneath it
   rather than inline before it. */
#evidence .svc-card header{flex-direction:column;align-items:flex-start;gap:5px}
/* The service cards carry the same icon vocabulary as the homepage accordion,
   at the compact step, in a left column beside the headline so the title and
   the description share one clean left edge. */
.svc-card.has-ico{display:grid;grid-template-columns:52px minmax(0,1fr);grid-template-rows:auto 1fr;column-gap:18px;align-items:start}
.svc-card.has-ico .ico{grid-row:1 / span 2;width:52px;height:52px;margin:-6px 0 0}
.svc-card.has-ico .ico svg{width:42px;height:42px}
.svc-card.has-ico header,.svc-card.has-ico p{grid-column:2}
@media(max-width:560px){
  .svc-card.has-ico{grid-template-columns:42px minmax(0,1fr);column-gap:14px}
  .svc-card.has-ico .ico{width:42px;height:42px;margin-top:-4px}
  .svc-card.has-ico .ico svg{width:34px;height:34px}
}
.svc-card h3{margin:0;font-family:var(--display);font-weight:500;font-size:20px;line-height:1.12;
  letter-spacing:-.016em;color:var(--ink)}
.svc-card p{margin:0;font-size:14.5px;line-height:1.5;color:var(--ink-3)}
@media(hover:hover) and (pointer:fine){
  .svc-card:hover{transform:translateX(4px);box-shadow:var(--shadow-lift);border-color:#D7C79B}}
.svc-card:target{border-color:var(--emerald);box-shadow:0 0 0 3px rgba(63,122,56,.12)}/* contact *//* the writing index */
.post-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;align-items:stretch}
.post-card{display:flex}
.post-card>a{display:flex;flex-direction:column;gap:11px;width:100%;
  background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:22px 24px 24px;
  box-shadow:var(--shadow);color:inherit;
  transition:transform .25s var(--ease),box-shadow .25s var(--ease),border-color .25s var(--ease)}
.pc-top{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.pc-cat{font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--emerald)}
.pc-date{font-size:9.5px;letter-spacing:.09em;color:var(--ink-4)}
.post-card h3{margin:0;font-family:var(--display);font-weight:500;font-size:19px;line-height:1.18;
  letter-spacing:-.016em;color:var(--ink);text-wrap:pretty}
.post-card p{margin:0;font-size:14px;line-height:1.5;color:var(--ink-3)}
.pc-more{margin-top:auto;padding-top:6px;font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold-ink)}
@media(hover:hover) and (pointer:fine){
  .post-card>a:hover{transform:translateY(-3px);box-shadow:var(--shadow-lift);border-color:#D7C79B}}

@media(max-width:1100px){
  .sys-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .post-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:900px){
  .page-hero{padding:56px 0 4px}
}
@media(max-width:700px){
  .svc-grid{grid-template-columns:1fr}
  .post-grid{grid-template-columns:1fr}
  .sys-grid{grid-template-columns:1fr;gap:12px}
}/* the window chip sits with the case index now, left aligned, so the
   eye reads index, window, then who it was. */

.case-rail{justify-content:flex-start;gap:10px}/* the row labels were centred, so a two-line answer pushed its label
   lower than the rest. They align to the first line instead. */
/* ------------------------------------------------------------
   The hero's bottom spacing used to come from the strip that sat
   under it. With that gone the CTA landed flush on the next
   section. The padding is explicit now, and because the grid
   centres, the audit card can grow through a live scan and the
   hero grows with it instead of running into what follows.
   ------------------------------------------------------------ */

.hero{padding-bottom:92px}
.hero-grid{align-items:center}
.tool-stage{min-height:340px}
@media(min-width:1600px){.hero{padding-bottom:112px}}
@media(max-width:900px){.hero{padding-bottom:68px}.tool-stage{min-height:0}}
@media(max-width:560px){.hero{padding-bottom:54px}}/* ------------------------------------------------------------
   The menu mark was two spans whose 1.5px height rounded to 1px
   on one and 2px on the other. It is one SVG now, so both rules
   are the same stroke by construction.
   ------------------------------------------------------------ */

.menu-toggle{gap:0!important;color:var(--ink)}
.menu-toggle span{display:none!important}
.menu-toggle svg{display:block;overflow:visible}
.menu-toggle svg path{transform-box:view-box;transform-origin:12px 12px;
  transition:transform .3s var(--ease)}
.menu-toggle[aria-expanded="true"] .mt-a{transform:translateY(3px) rotate(45deg)}
.menu-toggle[aria-expanded="true"] .mt-b{transform:translateY(-3px) rotate(-45deg)}
@media(prefers-reduced-motion:reduce){.menu-toggle svg path{transition:none}}/* ------------------------------------------------------------
   The hero columns start together rather than centring. At rest
   the card's top edge sits on the headline's first line; when a
   scan returns and the card runs to a thousand pixels, the copy
   stays where it was and the extra height goes below it, instead
   of the copy drifting down the page with it.
   ------------------------------------------------------------ */

.hero-grid{align-items:start}
.hero-tool{padding-top:6px}
/* The audit card starting level with the h1 made the hero read as two
   competing columns. Dropping it clear of the headline gives the eye an
   order: read the promise, then see the tool. Desktop only - the columns
   stack below 1200 and the offset would just be dead space. */
@media(min-width:1201px){.hero-tool{padding-top:62px}}
@media(max-width:900px){.hero-tool{padding-top:0}}/* ------------------------------------------------------------
   The right hero column ended at the scanner while the left ran
   on to the button, leaving a large empty block bottom right on
   wide screens. This card closes that column and gives the audit
   page its entry point from the homepage.
   ------------------------------------------------------------ */

.hero-tool{display:flex;flex-direction:column;gap:16px}
.ha-eyebrow{font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-ink)}
.ha-title{font-family:var(--display);font-weight:500;font-size:clamp(16px,1.6vw,19px);
  line-height:1.24;letter-spacing:-.012em;color:var(--ink)}
.ha-go{display:inline-flex;align-items:center;gap:7px;margin-top:2px;
  font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--emerald)}
.ha-go span{transition:transform .25s var(--ease)}
@media(hover:hover){.pr-audit:hover .ha-go span{transform:translateX(3px)}}
@media(prefers-reduced-motion:reduce){.ha-go span{transition:none}}/* ============================================================
   PAGE HEROES
   The inner pages opened on a thin text block that started too
   high. They get real vertical presence, a closing hairline and
   a meta column so the hero is composed rather than stacked.
   ============================================================ */

.page-hero{padding:112px 0 76px;position:relative}
.page-hero::after{content:'';position:absolute;left:50%;bottom:0;transform:translateX(-50%);
  width:calc(100% - 160px);max-width:1408px;height:1px;background:var(--border)}
.ph-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr);
  gap:clamp(32px,5vw,88px);align-items:end}
.ph-grid.ph-solo{grid-template-columns:minmax(0,1fr)}
.ph-copy{min-width:0}
.page-hero h1{font-family:var(--display);font-weight:500;font-size:clamp(40px,6vw,76px);
  line-height:1.02;letter-spacing:-.038em;margin:0 0 24px}
.page-lead{max-width:60ch;font-size:clamp(15px,1.4vw,17px);line-height:1.6;color:var(--ink-2)}
.ph-meta{display:flex;flex-direction:column;gap:16px;padding:24px 26px;
  border:1px solid var(--border);border-radius:18px;background:var(--surface);
  box-shadow:var(--shadow)}
.phm-cap{font-size:9.5px;letter-spacing:.16em;color:var(--gold-ink)}
.phm-list{display:flex;flex-direction:column;gap:1px;list-style:none;margin:0;padding:0}
.phm-list a{display:flex;align-items:center;gap:12px;min-height:44px;padding:7px 10px;
  margin-inline:-10px;border-radius:9px;font-size:14px;color:var(--ink-2);
  transition:background .2s var(--ease),color .2s var(--ease)}
.phm-ix{flex:none;font-size:9.5px;letter-spacing:.12em;color:var(--gold-ink)}
@media(hover:hover){.phm-list a:hover{background:#F3F8F1;color:var(--ink)}}
.phm-stats{display:flex;gap:30px}
.phm-stat{display:flex;flex-direction:column;gap:5px}
.phm-n{font-family:var(--display);font-weight:600;font-size:38px;line-height:1;
  letter-spacing:-.03em;color:var(--ink);font-variant-numeric:tabular-nums}
.phm-l{font-size:9.5px;letter-spacing:.14em;color:var(--ink-4)}
.phm-range{font-size:9.5px;letter-spacing:.1em;color:var(--ink-4);
  padding-top:14px;border-top:1px solid var(--border)}
@media(max-width:1000px){
  .ph-grid{grid-template-columns:minmax(0,1fr);gap:34px;align-items:start}
  .page-hero{padding:84px 0 56px}
}
@media(max-width:640px){
  .page-hero{padding:64px 0 44px}
  .page-hero::after{width:calc(100% - 44px)}
  .phm-stats{gap:24px}.phm-n{font-size:32px}
}/* ============================================================
   BLOG INDEX
   ============================================================ */

.lead-wrap{padding:60px 0 86px}
.lead-post{display:grid;grid-template-columns:minmax(0,1fr) 156px;gap:0;
  border:1px solid var(--border);border-radius:22px;background:var(--surface);
  box-shadow:var(--shadow);overflow:hidden;color:inherit;
  transition:border-color .25s var(--ease),box-shadow .3s var(--ease),transform .3s var(--ease)}
.lp-body{display:flex;flex-direction:column;gap:15px;padding:clamp(28px,3.4vw,44px)}
.lp-top{display:flex;align-items:baseline;gap:16px}
.lead-post h2{margin:0;font-family:var(--display);font-weight:500;
  font-size:clamp(25px,3.4vw,42px);line-height:1.08;letter-spacing:-.028em;
  color:var(--ink);text-wrap:balance;max-width:20ch}
.lead-post p{max-width:62ch;font-size:15.5px;line-height:1.58;color:var(--ink-3)}
.lp-mark{position:relative;background:linear-gradient(160deg,rgba(63,122,56,.14),rgba(63,122,56,.04));
  border-left:1px solid var(--border);display:flex;align-items:flex-start;justify-content:center;
  padding-top:28px}
.lp-mark::before{content:'';position:absolute;inset:0;
  background-image:var(--leaf-mark);background-repeat:no-repeat;background-position:center 62%;
  background-size:84px auto;opacity:.16}
.lp-mark span{position:relative;font-size:9.5px;letter-spacing:.2em;color:var(--emerald)}
@media(hover:hover){
  .lead-post:hover{border-color:#D7C79B;box-shadow:var(--shadow-lift);transform:translateY(-3px)}
  .lead-post:hover .pc-more span{transform:translateX(4px)}
}
.lead-post:focus-visible{outline:2px solid var(--emerald);outline-offset:4px}
@media(max-width:760px){
  .lead-wrap{padding:40px 0 58px}
  .lead-post{grid-template-columns:minmax(0,1fr)}
  .lp-mark{border-left:0;border-top:1px solid var(--border);min-height:74px;padding-top:0;
    align-items:center}
  .lp-mark::before{background-size:52px auto;background-position:calc(50% + 66px) center}
}

.blog-bar{display:flex;align-items:center;justify-content:space-between;gap:20px;
  flex-wrap:wrap;padding-bottom:18px;border-bottom:1px solid var(--border)}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{display:inline-flex;align-items:center;gap:9px;min-height:44px;padding:10px 18px;
  border:1px solid var(--border);border-radius:999px;background:var(--surface);
  font-family:var(--body);font-size:14px;font-weight:500;color:var(--ink-2);
  transition:background .2s var(--ease),border-color .2s var(--ease),color .2s var(--ease)}
.chip-n{font-size:9.5px;letter-spacing:.1em;color:var(--ink-4);
  padding:2px 7px;border-radius:999px;background:var(--canvas-2)}
@media(hover:hover){.chip:hover{border-color:#A9C7A2;background:#F3F8F1;color:var(--ink)}}
.chip[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#EEF3F0}
.chip[aria-pressed="true"] .chip-n{background:rgba(255,255,255,.16);color:#DCE6E0}
.sorter{display:flex;align-items:center;gap:11px}
.sort-label{font-size:9.5px;letter-spacing:.16em;color:var(--ink-4)}
.sort-select{min-height:44px;padding:10px 38px 10px 16px;border:1px solid var(--border);
  border-radius:999px;background:var(--surface);color:var(--ink);
  font-family:var(--body);font-size:14px;font-weight:500;appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%235F6E68' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1.5 2 6 6.2 10.5 2'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 15px center;background-size:11px auto;
  transition:border-color .2s var(--ease)}
@media(hover:hover){.sort-select:hover{border-color:#A9C7A2}}
.post-count{padding:16px 0 26px;font-size:9.5px;letter-spacing:.14em;color:var(--ink-4)}
.post-empty{padding:40px 0;font-size:15px;color:var(--ink-3)}

.post-card>a{position:relative}
.post-card>a::before{content:'';position:absolute;left:0;top:26px;width:2px;height:20px;
  border-radius:2px;background:var(--emerald);opacity:0;
  transition:opacity .25s var(--ease)}
.post-card[data-cat="seo-analytics"]>a::before{background:var(--gold-soft)}
.post-card[data-cat="crm-follow-up"]>a::before{background:var(--ink-4)}
.post-card[data-cat="seo-analytics"] .pc-cat{color:var(--gold-ink)}
.post-card[data-cat="crm-follow-up"] .pc-cat{color:var(--ink-3)}
@media(hover:hover){.post-card>a:hover::before{opacity:1}}/* ============================================================
   FREE SITE AUDIT PAGE
   ============================================================ */

.audit-hero{padding:96px 0 84px;position:relative}
.ah-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.92fr);
  gap:clamp(32px,4.5vw,72px);align-items:start}
.ah-copy h1{font-family:var(--display);font-weight:500;font-size:clamp(36px,4.5vw,60px);
  line-height:1.05;letter-spacing:-.034em;margin:0 0 24px;text-wrap:balance;max-width:15ch}
.ah-tool{padding-top:6px}
@media(max-width:1000px){
  .audit-hero{padding:72px 0 56px}
  .ah-grid{grid-template-columns:minmax(0,1fr);gap:36px}
  .ah-tool{padding-top:0}
}
@media(max-width:560px){.audit-hero{padding:56px 0 44px}}

.read-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:16px}
.read-card{grid-column:span 2}/* five cards in a three-up grid left a hole; the last two take the
   bottom row at half width each instead */

.read-card:nth-child(4),.read-card:nth-child(5){grid-column:span 3}
.read-card{display:flex;flex-direction:column;gap:11px;padding:26px 26px 27px;
  border:1px solid var(--border);border-radius:18px;background:var(--surface);
  box-shadow:var(--shadow)}
.read-card header{display:flex;align-items:baseline;gap:13px}
.read-card h3{margin:0;font-size:clamp(19px,2vw,23px);line-height:1.16;letter-spacing:-.016em}
.read-src{font-size:9.5px;letter-spacing:.11em;color:var(--gold-ink);line-height:1.45}
.read-card p{font-size:14.5px;line-height:1.56;color:var(--ink-3)}
@media(max-width:1000px){
  .read-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .read-card,.read-card:nth-child(4),.read-card:nth-child(5){grid-column:auto}
  .read-card:last-child{grid-column:span 2}
}
@media(max-width:680px){
  .read-grid{grid-template-columns:1fr}
  .read-card:last-child{grid-column:auto}
}

.grade-plate{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.82fr);
  gap:clamp(30px,4vw,64px);align-items:center;padding:clamp(30px,3.6vw,52px);
  border:1px solid var(--border);border-radius:22px;background:var(--surface);
  box-shadow:var(--shadow)}
.gp-copy{display:flex;flex-direction:column;gap:17px}
.gp-copy h2{font-size:clamp(28px,3.6vw,44px)}
.gp-why{padding-top:17px;border-top:1px solid var(--border);font-size:14.5px;color:var(--ink-3)}
.gp-viz{display:grid;grid-template-columns:auto minmax(0,1fr) auto;
  gap:11px 14px;align-items:center}
.gpv-k{font-size:9.5px;letter-spacing:.1em;color:var(--ink-3);white-space:nowrap}
.gpv-mute{color:var(--ink-4)}
.gpv-bar{height:10px;border-radius:999px}
.gpv-in{background:linear-gradient(90deg,rgba(63,122,56,.5),rgba(63,122,56,.22));
  border:1px solid rgba(63,122,56,.4)}
.gpv-outb{background:repeating-linear-gradient(135deg,rgba(11,26,23,.07) 0 5px,transparent 5px 10px);
  border:1px dashed rgba(11,26,23,.22)}/* the four contributing rows are bracketed into one grade; content sits
   outside the bracket, which is the whole point of the diagram */

.gpv-brace{grid-column:3;grid-row:1/5;align-self:stretch;display:flex;align-items:center;
  padding-left:15px;border-left:2px solid rgba(63,122,56,.45);border-radius:2px}
.gpv-brace .mono{font-size:9px;letter-spacing:.13em;color:var(--emerald);
  max-width:64px;line-height:1.55}
.gpv-tag{grid-column:3;padding-left:15px;font-size:9px;letter-spacing:.13em;
  color:var(--ink-4);max-width:78px;line-height:1.55}
@media(max-width:900px){.grade-plate{grid-template-columns:minmax(0,1fr)}}
@media(max-width:520px){.gpv-k{font-size:9px;letter-spacing:.06em}}

.blind-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.blind-card{display:flex;flex-direction:column;gap:10px;padding:25px 24px 26px;
  border:1px dashed rgba(11,26,23,.22);border-radius:18px;background:transparent}
.blind-card h3{margin:0;font-size:clamp(17px,1.8vw,20px);line-height:1.18;letter-spacing:-.014em}
.blind-card p{font-size:14.5px;line-height:1.55;color:var(--ink-3)}
@media(max-width:1080px){.blind-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.blind-grid{grid-template-columns:1fr}}

.get-layout{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);
  gap:clamp(30px,4.5vw,76px);align-items:start}
.get-head{display:flex;flex-direction:column;gap:17px}
.get-head h2{font-size:clamp(28px,3.6vw,44px)}
.get-list{display:flex;flex-direction:column}
.get-row{display:grid;grid-template-columns:44px minmax(0,1fr);gap:16px;
  padding:22px 0;border-top:1px solid var(--border)}
.get-row:first-child{border-top:0;padding-top:0}
.get-ix{font-size:9.5px;letter-spacing:.14em;color:var(--gold-ink);padding-top:5px}
.get-row h3{margin:0 0 7px;font-size:clamp(17px,1.9vw,21px);line-height:1.2;letter-spacing:-.014em}
.get-row p{font-size:14.5px;line-height:1.56;color:var(--ink-3)}
@media(max-width:860px){.get-layout{grid-template-columns:minmax(0,1fr);gap:32px}}

.note-strip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;margin-top:56px;
  border:1px solid var(--border);border-radius:18px;background:var(--canvas-2);overflow:hidden}
.note-item{display:flex;flex-direction:column;gap:7px;padding:22px 24px}
.note-item+.note-item{border-left:1px solid var(--border)}
.ni-k{font-size:9.5px;letter-spacing:.14em;color:var(--emerald)}
.ni-v{font-size:14px;line-height:1.5;color:var(--ink-3)}
@media(max-width:1000px){
  .note-strip{grid-template-columns:repeat(2,minmax(0,1fr))}
  .note-item:nth-child(odd){border-left:0}
  .note-item:nth-child(n+3){border-top:1px solid var(--border)}
}
@media(max-width:560px){
  .note-strip{grid-template-columns:1fr}
  .note-item+.note-item{border-left:0;border-top:1px solid var(--border)}
}/* ============================================================
   UTILITY PAGE HEADS
   meeting, contact, thank-you, legal and 404 use .page-head.
   They get the same opening treatment as .page-hero.
   ============================================================ */

.page-head{padding:112px 0 56px;position:relative}
.page-head h1{font-family:var(--display);font-weight:500;font-size:clamp(38px,5.4vw,66px);
  line-height:1.03;letter-spacing:-.036em;margin:0 0 22px;text-wrap:balance;max-width:17ch}
.page-head>p{max-width:60ch;font-size:clamp(15px,1.4vw,17px);line-height:1.6;color:var(--ink-2)}
@media(max-width:1000px){.page-head{padding:84px 0 44px}}
@media(max-width:640px){.page-head{padding:64px 0 36px}}

.ty-list{list-style:none;padding:0;margin:8px 0 30px;max-width:66ch;counter-reset:ty}
.ty-list li{counter-increment:ty;position:relative;display:block;padding:20px 0 20px 54px;
  border-top:1px solid var(--border);font-size:15.5px;line-height:1.6;color:var(--ink-2)}
.ty-list li:first-child{border-top:0}
.ty-list li::before{content:counter(ty,decimal-leading-zero);position:absolute;left:0;top:25px;
  font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;color:var(--gold-ink)}
.ty-list b{color:var(--ink);font-weight:600}
.ty-actions{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:24px}
.ty-meta{font-size:9.5px;letter-spacing:.12em;color:var(--ink-4)}
.ty-meta a{color:var(--emerald)}
.ghost-button{background:var(--surface);border-color:var(--border);color:var(--ink);gap:16px}
.ghost-button:hover{border-color:#A9C7A2;background:#F3F8F1}

.booking-wrap,.contact-form-wrap,.pmc-aw-shell{padding-bottom:92px}
.booking-wrap iframe,.contact-form-wrap iframe{border:1px solid var(--border);border-radius:18px;
  background:var(--surface);box-shadow:var(--shadow)}
/* the scheduler draws its own bordered card inside a transparent page with
   padding above and below it, so a frame on the iframe read as a second
   layer behind the embed. The embed's own card is the only frame now. */
.booking-wrap iframe{border:0;border-radius:0;background:transparent;box-shadow:none}
.booking-fallback{margin-top:16px;font-size:14px;color:var(--ink-3)}
.booking-fallback a{color:var(--emerald);text-decoration:underline;text-underline-offset:3px}
.contact-alt{padding-bottom:92px}
.contact-alt p{font-size:15.5px;color:var(--ink-2)}
.contact-alt a{color:var(--emerald);text-decoration:underline;text-underline-offset:3px}/* ============================================================
   ARTICLE
   ============================================================ */

.post-hero{padding:96px 0 44px;border-bottom:1px solid var(--border)}
.post-crumb{display:block;margin-bottom:26px;font-size:9.5px;letter-spacing:.14em;color:var(--ink-4)}/* the trail reads as small text but still needs a real hit area, so the
   padding is cancelled by an equal negative margin and nothing shifts */

.post-crumb a{color:var(--emerald);display:inline-block;padding-block:17px;margin-block:-17px}
.post-crumb span[aria-hidden]{padding:0 7px;opacity:.5}
.post-hero h1{font-family:var(--display);font-weight:500;font-size:clamp(33px,4.6vw,60px);
  line-height:1.05;letter-spacing:-.034em;margin:0 0 20px;text-wrap:balance;max-width:19ch}
.post-sum{max-width:62ch;font-size:clamp(16px,1.5vw,19px);line-height:1.58;color:var(--ink-2)}
.post-byline{display:flex;align-items:center;gap:13px;margin-top:32px}
.post-face{width:42px;height:42px;border-radius:50%;object-fit:cover;flex:none;
  box-shadow:0 0 0 1px var(--border)}
.post-byline>div{display:flex;flex-direction:column;gap:3px}
.post-author{font-size:14.5px;font-weight:600;color:var(--ink)}
.post-date{font-size:9.5px;letter-spacing:.12em;color:var(--ink-4)}

.post-layout{display:grid;grid-template-columns:minmax(0,1fr) 268px;
  gap:clamp(34px,5vw,80px);align-items:start;padding-block:64px 88px}
.post-rail{position:sticky;top:112px;display:flex;flex-direction:column;gap:14px}
.pr-card{padding:22px 24px;border:1px solid var(--border);border-radius:18px;
  background:var(--surface);box-shadow:var(--shadow)}
.pr-toc{display:flex;flex-direction:column;gap:1px;margin-top:13px}
.pr-toc a{display:flex;align-items:center;min-height:44px;padding:8px 10px;
  margin-inline:-10px;border-radius:9px;
  font-size:13.5px;line-height:1.4;color:var(--ink-3);
  transition:background .2s var(--ease),color .2s var(--ease)}
@media(hover:hover){.pr-toc a:hover{background:#F3F8F1;color:var(--ink)}}
.pr-toc a.is-current{color:var(--ink);background:var(--canvas-2)}
.pr-audit{display:flex;flex-direction:column;gap:7px;padding:20px 22px;
  border:1px solid var(--border);border-radius:18px;background:var(--surface);
  box-shadow:var(--shadow);color:inherit;
  transition:border-color .2s var(--ease),box-shadow .25s var(--ease),transform .25s var(--ease)}
@media(hover:hover){.pr-audit:hover{border-color:#D7C79B;box-shadow:var(--shadow-lift);transform:translateY(-2px)}}
@media(max-width:1000px){
  .post-hero{padding:72px 0 36px}
  .post-layout{grid-template-columns:minmax(0,1fr);padding-block:44px 64px}
  .post-rail{position:static;flex-direction:row;flex-wrap:wrap}
  .pr-card,.pr-audit{flex:1 1 260px}
}
@media(max-width:560px){.post-hero{padding:56px 0 30px}}/* prose */

.prose{max-width:68ch;font-size:17px;line-height:1.72;color:var(--ink-2)}
.prose>*+*{margin-top:1.35em}
.prose h2{font-family:var(--display);font-weight:500;font-size:clamp(25px,3vw,34px);
  line-height:1.14;letter-spacing:-.024em;color:var(--ink);margin-top:2.1em;
  padding-top:1.1em;border-top:1px solid var(--border);text-wrap:balance;scroll-margin-top:118px}
.prose h2:first-child{margin-top:0;padding-top:0;border-top:0}
.prose h3{font-family:var(--display);font-weight:500;font-size:clamp(19px,2.1vw,24px);
  line-height:1.2;letter-spacing:-.018em;color:var(--ink);margin-top:1.8em;scroll-margin-top:118px}
.prose h4{font-family:var(--body);font-weight:600;font-size:16.5px;color:var(--ink);margin-top:1.7em}
.prose p{font-size:17px;line-height:1.72;color:var(--ink-2)}
.prose a{color:var(--emerald);text-decoration:underline;text-decoration-thickness:1px;
  text-underline-offset:3px}
@media(hover:hover){.prose a:hover{color:var(--ink);text-decoration-color:var(--gold)}}
.prose strong,.prose b{color:var(--ink);font-weight:600}
.prose ul,.prose ol{display:flex;flex-direction:column;gap:.6em;padding-left:0;margin-left:0}
/* Numbered lists draw their own mono 01/02 counter below, so the browser's
   native marker has to go or both render. A zero-width marker rather than
   list-style:none, because Safari drops list semantics for VoiceOver on none. */
.prose ul,.prose ol{list-style-type:"\200B"}
.prose li{position:relative;padding-left:27px;font-size:17px;line-height:1.66;color:var(--ink-2)}
.prose ul>li::before{content:'';position:absolute;left:3px;top:.62em;width:13px;height:9px;
  background-image:var(--leaf-mark);background-repeat:no-repeat;background-size:contain;opacity:.85}
.prose ol{counter-reset:pl}
.prose ol>li{counter-increment:pl}
.prose ol>li::before{content:counter(pl,decimal-leading-zero);position:absolute;left:0;top:.16em;
  font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;color:var(--gold-ink)}
.prose li>ul,.prose li>ol{margin-top:.55em}
.prose blockquote{margin:0;padding:6px 0 6px 26px;border-left:2px solid var(--emerald);
  font-size:19px;line-height:1.55;color:var(--ink)}
.prose blockquote p{font-size:inherit;line-height:inherit;color:inherit}
.prose hr{height:1px;border:0;background:var(--border);margin-block:2.4em}
.prose img{display:block;width:100%;height:auto;border-radius:14px;
  box-shadow:0 0 0 1px var(--border)}
.prose figure{margin:0}
.prose figcaption{margin-top:10px;font-family:var(--mono);font-size:9.5px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-4)}
.prose code{font-family:var(--mono);font-size:.86em;padding:2px 6px;border-radius:5px;
  background:var(--canvas-2);color:var(--ink);border:1px solid var(--border)}
.prose pre{overflow-x:auto;padding:20px 22px;border-radius:14px;background:var(--canvas-2);
  border:1px solid var(--border)}
.prose pre code{padding:0;border:0;background:none;font-size:13.5px;line-height:1.65}
.prose table{width:100%;border-collapse:collapse;font-size:15px;
  font-variant-numeric:tabular-nums}
.prose .table-wrap{overflow-x:auto;border:1px solid var(--border);border-radius:14px;
  background:var(--surface)}
.prose .table-wrap>table{margin:0}
.prose th,.prose td{padding:13px 16px;text-align:left;border-bottom:1px solid var(--border)}
.prose th{font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-3);background:var(--canvas-2);white-space:nowrap}
.prose tr:last-child td{border-bottom:0}
/* On a phone the unbreakable uppercase headers were setting every column's
   width, so a three-column table needed a sideways swipe to see its last
   column. Headers may wrap here, and cells give back a little padding. */
@media(max-width:560px){.prose th{white-space:normal}.prose th,.prose td{padding:12px 12px}}
@media(max-width:640px){
  .prose{font-size:16.5px}
  .prose p,.prose li{font-size:16.5px}
  .prose blockquote{font-size:17.5px;padding-left:19px}
}/* legal pages: the prose column, plus room under the heading */

.legal{padding-bottom:96px}
.legal-date{font-size:9.5px;letter-spacing:.14em;color:var(--ink-4)}
.legal .prose{max-width:74ch}
.legal .prose h2{font-size:clamp(21px,2.3vw,27px)}
.legal .prose h3{font-size:clamp(16px,1.7vw,19px);margin-top:1.5em}
.legal .prose,.legal .prose p,.legal .prose li{font-size:16px;line-height:1.68}
@media(max-width:640px){.legal{padding-bottom:64px}
  .legal .prose,.legal .prose p,.legal .prose li{font-size:15.5px}}/* The settled headline is longer than the one this scale was set for, so it
   was running to five lines with an orphan. Slightly smaller type and a
   balanced wrap put it back on four even lines, which also shortens the left
   column and closes most of the gap beside the scanner. */

.hero-copy h1{font-size:clamp(40px,5.2vw,70px);text-wrap:balance}
.tool-stage{min-height:428px}
@media(max-width:1200px){.hero-copy h1{font-size:clamp(38px,5.6vw,60px)}}
@media(max-width:900px){.tool-stage{min-height:0}}/* The canopy is a positioned decorative layer, so it was painting over the
   opaque background of the section below and the leaves crossed the band
   edge. Lifting the content sections above it clips the art at the hero
   without shortening the artwork itself. The hero is not a .section, so it
   still lets the canopy show through behind its text. */

.section{position:relative;z-index:1}/* ---- audit result state (app.js sets .has-result on the hero section while
   the widget is showing a scorecard). Pre-scan, the card is a narrow column
   beside the headline. With a result in it the card ran to ~1,170px beside a
   400px headline, so the hero grew past the viewport with an empty column.
   In result state the hero collapses to one column, the pre-scan pitch lines
   step aside, the five tiles sit in one row and the two CTA blocks sit side by
   side. The !important on .pmc-aw-cta beats the inline display:block the
   widget sets when it reveals that block. ---- */

.hero.has-result .hero-grid,.audit-hero.has-result .ah-grid{grid-template-columns:minmax(0,1fr);gap:26px}
.hero.has-result .hero-lead,.hero.has-result .hero-copy>.button,.audit-hero.has-result .page-lead{display:none}
.hero.has-result .hero-copy h1,.audit-hero.has-result .ah-copy h1{font-size:clamp(30px,3.4vw,44px);max-width:none}
.hero.has-result .hero-copy,.audit-hero.has-result .ah-copy{max-width:none}
.has-result .tool-stage{animation:none}
.has-result #audit .pmc-aw-lead,.has-result #audit .pmc-aw-pills{display:none}
.has-result #audit .pmc-aw-top{margin-bottom:10px}
.has-result #audit .pmc-aw-h{max-width:none}
.has-result #audit .pmc-aw-tiles{grid-template-columns:repeat(5,minmax(0,1fr))}
.has-result #audit .pmc-aw-tile:last-child{grid-column:auto}
.has-result #audit .pmc-aw-cta{display:block!important}
@media(max-width:900px){
  .has-result #audit .pmc-aw-tiles{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:560px){
  .has-result #audit .pmc-aw-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
  .has-result #audit .pmc-aw-tile:last-child{grid-column:span 2}
}

/* ---- nav pill: hug the contents on desktop. The links were absolutely
   centred in a pill stretched to the shell width, which put ~300px of empty
   pill on either side of them. Static links, fixed gaps, fit-content width;
   the pill stays centred by its auto margins. Mobile rules are untouched. ---- */
@media(min-width:1021px){
  .navbar{width:fit-content;max-width:calc(100% - 108px);gap:34px;padding-left:22px}
  .brand,.nav-actions{flex:0 0 auto}
  .nav-links{position:static;transform:none}
}/* ---- section bands: a 110px feather into and out of the tint instead of a
   hard edge and a 1px rule. Sections carry 96-110px of padding, so the
   content always sits on the solid part of the tint. ---- */

.band{border-block:0;background:linear-gradient(180deg,var(--canvas) 0,var(--canvas-2) 110px,var(--canvas-2) calc(100% - 110px),var(--canvas) 100%)}
@media(max-width:900px){.band{background:linear-gradient(180deg,var(--canvas) 0,var(--canvas-2) 72px,var(--canvas-2) calc(100% - 72px),var(--canvas) 100%)}}/* ---- blog index previews: each card carries its share image, served as a
   960px JPEG (~44KB) from assets/blog-thumbs rather than the 2x PNG in /og.
   Cards keep their padding; the image bleeds to the card edge above it. The
   lead post's mark column widens to carry the image behind the Latest label. ---- */

.post-card>a{padding-top:0;overflow:hidden}
.post-card>a::before{display:none}/* the 2px category bar sat where the image now is; .pc-cat still carries the colour */ 
.pc-img{display:block;width:calc(100% + 48px);max-width:none;height:auto;aspect-ratio:1200/630;object-fit:cover;
  margin:0 -24px 8px;border-bottom:1px solid var(--border);background:var(--canvas)}/* The lead post's image is a text card, so it is never cropped: it sits whole,
   framed, in the tinted panel, with the Latest pill in the corner. */

.lead-post{grid-template-columns:minmax(0,1fr) minmax(320px,46%)}
.lp-mark{padding:26px;display:flex;align-items:center;justify-content:center}
.lp-mark::before{display:none}
.lp-img{display:block;width:100%;height:auto;object-fit:contain;border-radius:10px;border:1px solid var(--border);box-shadow:var(--shadow)}
.lp-mark span{position:absolute;top:18px;right:18px;background:var(--surface);border:1px solid var(--border);
  border-radius:999px;padding:6px 10px}
@media(max-width:900px){
  .lead-post{grid-template-columns:1fr}
  .lp-mark{order:-1;border-left:0;border-bottom:1px solid var(--border);padding:22px}
}/* ---- section edges, the rest of them. #evidence carried its own flat tint
   and 1px rules, and the footer a flat tint with a top rule, so those two
   edges stayed hard after .band was feathered. Same 110px feather; the
   footer fades in from the page canvas over its top padding. ---- */

#evidence{border-block:0;background:linear-gradient(180deg,var(--canvas) 0,var(--canvas-2) 110px,var(--canvas-2) calc(100% - 110px),var(--canvas) 100%)}
.site-footer{border-top:0;background:linear-gradient(180deg,var(--canvas) 0,var(--canvas-2) 120px,var(--canvas-2) 100%)}
@media(max-width:900px){
  #evidence{background:linear-gradient(180deg,var(--canvas) 0,var(--canvas-2) 72px,var(--canvas-2) calc(100% - 72px),var(--canvas) 100%)}
  .site-footer{background:linear-gradient(180deg,var(--canvas) 0,var(--canvas-2) 80px,var(--canvas-2) 100%)}
}/* ---- diagnosis leak bars: people, not blocks. Each column is the crowd
   that found you; the ghosted figures above the fill are the ones who left
   at that step. The figure is a mask-image tile so the fill colour stays a
   plain background and the tab's .on state still works. mask-repeat:space
   keeps whole figures only. ---- */

.lb-fill,.lb-lost{position:relative;overflow:hidden}
.lb-fill::after,.lb-lost::after{content:"";position:absolute;inset:7px 9px;
  -webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 14'><circle cx='6' cy='3.1' r='2.5'/><path d='M1.4 13.4c0-3.4 2.1-5.4 4.6-5.4s4.6 2 4.6 5.4z'/></svg>");mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 14'><circle cx='6' cy='3.1' r='2.5'/><path d='M1.4 13.4c0-3.4 2.1-5.4 4.6-5.4s4.6 2 4.6 5.4z'/></svg>");
  -webkit-mask-size:19px 22px;mask-size:19px 22px;-webkit-mask-repeat:space;mask-repeat:space}
.lb-fill{background:rgba(63,122,56,.06)}
.lb-fill::after{background:rgba(63,122,56,.5)}
.lb-col.on .lb-fill{background:rgba(63,122,56,.11)}
.lb-col.on .lb-fill::after{background:var(--leaf)}
.lb-lost::after{background:rgba(11,26,23,.13)}
@media(max-width:760px){.lb-fill::after,.lb-lost::after{inset:5px 6px;-webkit-mask-size:14px 16px;mask-size:14px 16px}}/* ---- operating layer: the gold rail sits in the middle of the gutter
   between the funnel and the cards. The funnel column is sized to the
   funnel (470px) so the gutter is exactly the grid gap, and the rail,
   nodes and connectors are placed at half of it. Single-column layout under
   900px keeps the rail hugging the cards as before. ---- */

.operating-grid{--opl-gap:84px}
@media(max-width:1199px){.operating-grid{--opl-gap:52px}}
@media(min-width:901px){
  .operating-grid{grid-template-columns:minmax(0,470px) minmax(0,1fr);gap:var(--opl-gap)}
  .opl-rows{padding-left:0}
  .opl-rows::before{left:calc(var(--opl-gap) / -2 - 1px)}
  .opl-node{left:calc(var(--opl-gap) / -2 - 6px)}
  .opl-node::after{left:12px;width:calc(var(--opl-gap) / 2 - 8px)}
}/* ---- services panel: the markup hook was .nav-drop while the rules and the
   script looked for .nav-item, so the panel never opened. The trigger is a
   link to /services. ---- */



/* ---- operating layer: cards at their natural height again, spaced down the
   funnel's height rather than stretched into it; a wider gutter so the rail
   sits further out and the connectors read as lines, not ticks. ---- */
@media(min-width:901px){
  .operating-grid{--opl-gap:112px}
  .opl-rows{justify-content:space-between;gap:12px}
  .opl-row{flex:0 0 auto;display:block}
  .opl-card{display:block}
}
@media(min-width:901px) and (max-width:1199px){.operating-grid{--opl-gap:76px}}/* ---- footnote plates share one measure: 860px wide, 74ch text, on every
   page. Spanning the full shell read as a banner on wide screens, so the
   evidence note comes in to match the rest rather than the rest going out.
   text-wrap:pretty stops the last line dropping a single short word. ---- */

.note-plate,.timeline-note,.operator-fair,.stance-grid .bd-foot,.case-honesty .note-plate{max-width:860px}
.note-plate p,.timeline-note p,.operator-fair p,.stance-grid .bd-foot p,.case-honesty .note-plate p{max-width:74ch}
.note-plate p{text-wrap:pretty}
#evidence .case-honesty .note-plate p{font-size:14.5px;line-height:1.6;color:var(--ink-2)}
@media(max-width:560px){#evidence .case-honesty .note-plate p{font-size:14px;line-height:1.55}}

/* ---- services hero carries the audit card where the jump list was, so the
   page-hero now behaves like the other two audit surfaces. ---- */
.ph-grid.has-tool{grid-template-columns:minmax(0,1fr) minmax(0,.92fr);align-items:center}
@media(max-width:900px){.ph-grid.has-tool{grid-template-columns:minmax(0,1fr)}}
.page-hero.has-result .ph-grid{grid-template-columns:minmax(0,1fr);gap:26px}
.page-hero.has-result .page-lead{display:none}
.page-hero.has-result .ph-copy h1{font-size:clamp(30px,3.4vw,44px);max-width:none}
.page-hero.has-result .ph-copy{max-width:none}

/* ---- the contact form, posting to /api/lead rather than an embedded iframe.
   Field sizes follow the canonical steps in DESIGN.md: 15px inputs, 11px mono
   labels, 14px helper text. Radius is the card step for the panel and the inner
   step for controls. ---- */
.lead-form{max-width:760px;margin:0;display:flex;flex-direction:column;gap:18px;
  background:var(--surface);border:1px solid var(--border);border-radius:14px;
  box-shadow:var(--shadow);padding:32px}
.lf-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.lf-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.lf-field{margin:0;display:flex;flex-direction:column;gap:7px;min-width:0}
.lf-field label,.lf-consent label{font-family:var(--mono);font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-3)}
.lf-req{color:var(--emerald)}
.lf-opt{text-transform:none;letter-spacing:.04em;color:var(--ink-4)}
.lead-form input[type=text],.lead-form input[type=email],.lead-form input[type=tel],
.lead-form textarea{
  font-family:var(--body);font-size:15px;line-height:1.5;color:var(--ink);
  background:var(--canvas);border:1px solid var(--border);border-radius:10px;
  padding:13px 15px;width:100%;min-width:0;min-height:48px;
  transition:border-color .2s var(--ease),box-shadow .2s var(--ease),background .2s var(--ease)}
.lead-form textarea{min-height:124px;resize:vertical}
.lead-form ::placeholder{color:var(--ink-4);opacity:1}
.lead-form input:hover,.lead-form textarea:hover{border-color:#CBD8D0}
.lead-form input:focus,.lead-form textarea:focus{outline:none;background:var(--surface);
  border-color:var(--emerald);box-shadow:0 0 0 3px rgba(63,122,56,.12)}
.lf-consent{margin:2px 0 0;display:flex;align-items:flex-start;gap:11px}
.lf-consent input{flex:none;width:17px;height:17px;margin-top:2px;accent-color:var(--emerald)}
.lf-consent label{text-transform:none;font-family:var(--body);font-size:14px;letter-spacing:0;
  line-height:1.5;color:var(--ink-3)}
.lf-foot{display:flex;flex-wrap:wrap;align-items:center;gap:16px 20px;margin-top:6px}
.lf-note{font-size:9.5px;letter-spacing:.12em;color:var(--ink-4)}
.lf-error{margin:0 0 20px;max-width:760px;font-size:14.5px;line-height:1.6;color:var(--ink-2);
  background:var(--surface);border:1px solid var(--border);border-left:3px solid var(--gold);
  border-radius:0 14px 14px 0;padding:16px 20px}
@media(max-width:640px){
  .lead-form{padding:22px 20px;gap:16px}
  .lf-row{grid-template-columns:minmax(0,1fr);gap:16px}
  .lead-form textarea{min-height:110px}
}

/* ---- archive search. Sits with the sorter so the bar stays two groups:
   what you are looking at on the left, how you are looking at it on the right. ---- */
.bar-tools{display:flex;align-items:center;flex-wrap:wrap;gap:12px 18px}
.searcher{margin:0}
.search-input{min-height:44px;width:200px;max-width:100%;padding:10px 16px;
  border:1px solid var(--border);border-radius:999px;background:var(--surface);
  font-family:var(--body);font-size:14px;font-weight:500;color:var(--ink);
  transition:border-color .2s var(--ease),box-shadow .2s var(--ease)}
.search-input::placeholder{color:var(--ink-4);font-weight:400}
.search-input::-webkit-search-cancel-button{cursor:pointer}
@media(hover:hover){.search-input:hover{border-color:#A9C7A2}}
.search-input:focus{outline:none;border-color:var(--emerald);box-shadow:0 0 0 3px rgba(63,122,56,.12)}
.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
@media(max-width:640px){.bar-tools{width:100%;justify-content:space-between}.search-input{width:100%}}

/* ---- services panel, Kelly pattern: a lead line with the way out, a hairline,
   then the six in two columns, each with the same icon it carries on the
   homepage and the services page. Hovering a row replays that icon's build. ---- */
.np-lead{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:baseline;gap:6px 18px;
  padding:0 6px 16px;margin-bottom:10px;border-bottom:1px solid var(--border)}
.np-kick{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--emerald)}
.np-lead p{grid-column:1 / -1;margin:0;font-size:14px;line-height:1.5;color:var(--ink-3);max-width:52ch}
/* scoped under .nav-panel: the plain .nav-links a rule would otherwise win */
.nav-panel .np-more{display:inline-flex;align-items:center;gap:7px;font-size:13.5px;font-weight:600;color:var(--emerald);
  padding:4px 0;min-height:0;background:none;white-space:nowrap}
.nav-panel .np-more svg{transition:transform .25s var(--ease)}
.nav-panel .np-more:hover{color:var(--ink);background:none}
.nav-panel .np-more:hover svg{transform:translateX(3px)}
.np-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px 6px}
.np-grid a{display:grid;grid-template-columns:38px minmax(0,1fr);align-items:center;gap:12px;
  padding:10px 12px;border-radius:12px;min-height:0;transition:background .2s}
.np-grid a:hover,.np-grid a:focus-visible{background:var(--canvas-2)}
.np-grid .ico{width:38px;height:38px;margin:0}
.np-grid .ico svg{width:32px;height:32px}
.np-txt{display:flex;flex-direction:column;gap:2px;min-width:0}
.np-name{font-size:14.5px;font-weight:600;color:var(--ink);line-height:1.3}
.np-txt .np-desc{font-size:13px;line-height:1.4;color:var(--ink-4)}

/* ============================================================
   THE SYSTEM - four jobs that only work in order, and measurement
   that runs across all four rather than after them. The design says
   both: a gold rail on top that only runs one way, lighting each job
   in turn, and a dashed green rail underneath that every job touches.
   On a phone the order rail runs down the left instead of across.
   ============================================================ */
.sys-flow{--node:56px;--g:30px;position:relative;background:var(--surface);border:1px solid var(--border);
  border-radius:14px;box-shadow:var(--shadow);padding:38px 34px 0;overflow:hidden}
.sys-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  column-gap:var(--g);position:relative}
.sys-step{position:relative;min-width:0;padding-bottom:54px}
/* the order rail: one segment per hand-off, from this job's node to the next */
.sys-step:not(:last-child)::before,.sys-fill{position:absolute;top:calc(var(--node) / 2 - 1px);
  left:calc(var(--node) + 8px);width:calc(100% + var(--g) - var(--node) - 16px);height:2px;border-radius:2px}
.sys-step:not(:last-child)::before{content:'';background:var(--border)}
.sys-fill{background:linear-gradient(90deg,var(--gold-soft),var(--gold));transform-origin:left center}
.sys-step:last-child .sys-fill{display:none}
.sys-fill::after{content:'';position:absolute;right:0;top:50%;width:7px;height:7px;
  border-top:2px solid var(--gold);border-right:2px solid var(--gold);transform:translate(0,-50%) rotate(45deg)}
.sys-node{position:relative;z-index:1;display:grid;place-items:center;width:var(--node);height:var(--node);
  border-radius:50%;background:var(--surface);border:1px solid var(--border);
  box-shadow:0 8px 18px -12px rgba(11,26,23,.4);transition:border-color .5s var(--ease),box-shadow .5s var(--ease)}
.sys-node .ico{width:40px;height:40px;margin:0}
.sys-node .ico svg{width:36px;height:36px}
.sys-kick{display:block;margin:22px 0 8px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--emerald)}
.sys-kick b{font-weight:400;color:var(--gold-ink);margin-right:9px}
.sys-step h3{margin:0 0 10px}
.sys-step p{margin:0;font-size:15px;line-height:1.55;color:var(--ink-3)}
/* measurement: every job drops a line to the same rail */
.sys-tick{position:absolute;z-index:1;left:calc(var(--node) / 2 - 5px);bottom:-5px;width:10px;height:10px;
  border-radius:50%;background:var(--surface);border:2px solid var(--emerald)}
.sys-tick::before{content:'';position:absolute;left:2px;bottom:8px;height:30px;border-left:1px dashed #A9C7A2;
  transform-origin:center bottom}
.sys-meas{display:flex;align-items:center;gap:16px;margin:0 -34px;padding:24px 34px 26px;
  background:var(--canvas-2);border-top:1px dashed #A9C7A2}
.sys-meas .ico{flex:none;width:44px;height:44px;margin:0}
.sys-meas .ico svg{width:38px;height:38px}
.sys-meas p{margin:0;font-size:15px;line-height:1.55;color:var(--ink-2)}
.sys-meas .mono{display:block;margin-bottom:3px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--emerald)}

/* in order, when it scrolls in: rail by rail, then the measurement ticks.
   "armed" is only ever set by JS with motion allowed, so without either
   the section simply renders complete. */
.sys-flow.armed .sys-fill{transform:scaleX(0)}
.sys-flow.armed .sys-tick{transform:scale(0)}
.sys-flow.armed .sys-tick::before{transform:scaleY(0)}
.sys-flow.armed.lit .sys-fill{transform:none;transition:transform .5s var(--ease)}
.sys-flow.armed.lit .sys-tick{transform:none;transition:transform .45s var(--spring)}
.sys-flow.armed.lit .sys-tick::before{transform:none;transition:transform .4s var(--ease)}
.sys-flow.lit .sys-step:nth-child(1) .sys-fill{transition-delay:.25s}
.sys-flow.lit .sys-step:nth-child(2) .sys-fill{transition-delay:.7s}
.sys-flow.lit .sys-step:nth-child(3) .sys-fill{transition-delay:1.15s}
.sys-flow.lit .sys-step .sys-node{border-color:#E4D3A0;box-shadow:0 8px 20px -12px rgba(168,128,28,.55)}
.sys-flow.lit .sys-step:nth-child(1) .sys-node{transition-delay:.1s}
.sys-flow.lit .sys-step:nth-child(2) .sys-node{transition-delay:.7s}
.sys-flow.lit .sys-step:nth-child(3) .sys-node{transition-delay:1.15s}
.sys-flow.lit .sys-step:nth-child(4) .sys-node{transition-delay:1.6s}
.sys-flow.lit .sys-step:nth-child(1) .sys-tick,.sys-flow.lit .sys-step:nth-child(1) .sys-tick::before{transition-delay:1.95s}
.sys-flow.lit .sys-step:nth-child(2) .sys-tick,.sys-flow.lit .sys-step:nth-child(2) .sys-tick::before{transition-delay:2.07s}
.sys-flow.lit .sys-step:nth-child(3) .sys-tick,.sys-flow.lit .sys-step:nth-child(3) .sys-tick::before{transition-delay:2.19s}
.sys-flow.lit .sys-step:nth-child(4) .sys-tick,.sys-flow.lit .sys-step:nth-child(4) .sys-tick::before{transition-delay:2.31s}

@media(max-width:1100px){.sys-flow{--g:22px;padding:32px 26px 0}.sys-meas{margin:0 -26px;padding:22px 26px 24px}}
@media(max-width:900px){
  .sys-flow{--node:48px;padding:28px 22px 0}
  .sys-steps{grid-template-columns:minmax(0,1fr);row-gap:30px}
  .sys-step{display:grid;grid-template-columns:var(--node) minmax(0,1fr);grid-template-rows:auto auto 1fr;
    column-gap:18px;padding-bottom:0}
  .sys-node{grid-row:1 / span 3;align-self:start}
  .sys-kick,.sys-step h3,.sys-step p{grid-column:2}
  .sys-kick{margin-top:2px}
  .sys-node .ico{width:34px;height:34px}.sys-node .ico svg{width:30px;height:30px}
  /* the order rail runs down the left */
  .sys-step:not(:last-child)::before,.sys-fill{top:calc(var(--node) + 8px);left:calc(var(--node) / 2 - 1px);
    width:2px;height:calc(100% - var(--node) + 30px - 16px)}
  .sys-fill{background:linear-gradient(180deg,var(--gold-soft),var(--gold));transform-origin:center top}
  .sys-fill::after{right:auto;top:auto;left:50%;bottom:0;transform:translate(-50%,0) rotate(135deg)}
  .sys-flow.armed .sys-fill{transform:scaleY(0)}
  .sys-tick{display:none}
  .sys-meas{display:grid;grid-template-columns:var(--node) minmax(0,1fr);column-gap:18px;margin:30px -22px 0;padding:20px 22px 22px;align-items:start}
  .sys-meas .ico{justify-self:center}
  .sys-meas .ico{width:38px;height:38px}.sys-meas .ico svg{width:32px;height:32px}
}
@media(prefers-reduced-motion:reduce){.sys-flow *{transition:none!important}}

/* five scanner categories: the fifth spans the row instead of sitting alone */
.aw-checks li:nth-child(5):last-child{grid-column:1 / -1}

/* ============================================================
   FREE SITE AUDIT, rebuilt 2026-09-22 on the Services vocabulary:
   the System flow for how it works, icon cards for the five
   categories, svc-cards and a note plate for the limits, and an
   illustrated report beside what comes back.
   ============================================================ */
/* five categories: icon column, then index + name, source line, paragraph */
.svc-card.has-ico.read-ico{grid-template-rows:auto auto 1fr}
.svc-card.has-ico.read-ico .ico{grid-row:1 / span 3}
.read-ico .read-src{grid-column:2;display:block;margin:-1px 0 9px}
.read-ico p{font-size:14.5px;line-height:1.56}
@media(min-width:901px){.read-grid2>.svc-card:nth-child(5):last-child{grid-column:1 / -1}
  .read-grid2>.svc-card:nth-child(5) p{max-width:78ch}}
.blind-grid2 .svc-card h3{font-size:clamp(18px,1.9vw,21px)}
.cannot-note{margin-top:28px;max-width:860px}
/* the illustrated report */
.rep-mock{margin:14px 0 0;background:var(--surface);border:1px solid var(--border);border-radius:14px;
  box-shadow:var(--shadow);padding:20px 22px 18px;max-width:430px}
.rm-top{display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding-bottom:14px;border-bottom:1px solid var(--border)}
.rm-tag{font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--emerald)}
.rm-url{font-size:9.5px;letter-spacing:.08em;color:var(--ink-4)}
.rm-overall{display:flex;align-items:center;gap:15px;padding:16px 0 14px}
.rm-grade{flex:none;display:grid;place-items:center;width:52px;height:52px;border-radius:50%;
  font-family:var(--display);font-weight:500;font-size:28px;line-height:1;color:var(--ink);
  background:#F3F8F1;border:1px solid #D3E1CE}
.rm-overall .mono{display:block;font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-4);margin-bottom:3px}
.rm-overall p{margin:0;font-size:15px;line-height:1.4;color:var(--ink)}
.rm-cats{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.rm-cats li{display:grid;grid-template-columns:minmax(0,9.5em) minmax(0,1fr) 1.4em;align-items:center;gap:12px}
.rm-k{font-size:13px;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rm-bar{height:5px;border-radius:2px;background:var(--canvas-2);overflow:hidden}
.rm-bar i{display:block;height:100%;width:calc(var(--v) * 100%);border-radius:2px;background:#A9C7A2}
.rm-cats b{font-family:var(--display);font-weight:500;font-size:15px;color:var(--ink);text-align:right}
.rm-mute .rm-k,.rm-mute b{color:var(--ink-4)}
.rm-mute .rm-bar i{background:repeating-linear-gradient(90deg,#D3E1CE 0 5px,transparent 5px 8px)}
.rm-finds{list-style:none;margin:16px 0 0;padding:14px 0 0;border-top:1px solid var(--border);
  display:flex;flex-direction:column;gap:9px}
.rm-finds li{display:grid;grid-template-columns:22px minmax(0,1fr);gap:8px;font-size:13.5px;line-height:1.45;color:var(--ink-2)}
.rm-finds .mono{font-size:9.5px;letter-spacing:.1em;color:var(--ink-4);padding-top:3px}
.rm-finds li:first-child .mono{color:var(--gold-ink)}
.rep-mock figcaption{margin-top:14px;font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-4)}
@media(max-width:560px){.rep-mock{padding:18px 16px 16px}.rm-cats li{grid-template-columns:minmax(0,8em) minmax(0,1fr) 1.2em;gap:9px}}

/* ---- audit result footer, 2026-09-22: one column, three rows in order.
   1 talk it through (Book a call stays the gold action), 2 the write-up by
   email in its own inset panel so it reads as a separate offer, 3 the saved
   link as a quiet utility row at the bottom. ---- */
#audit .pmc-aw-cta-main{gap:14px}
#audit .pmc-aw-capture{margin-top:20px;padding:18px 20px 20px;background:var(--canvas);
  border:1px solid var(--border);border-radius:10px}
#audit .pmc-aw-capture-label{margin-bottom:12px;max-width:62ch}
#audit .pmc-aw-capture-h{color:var(--ink);font-weight:600}
#audit .pmc-aw-capture-row .pmc-aw-input{flex:1 1 240px}
#audit .pmc-aw-capture-btn{color:var(--emerald);border-color:#A9C7A2;font-weight:600;padding-inline:18px}
#audit .pmc-aw-share{display:flex;align-items:center;justify-content:space-between;gap:10px 14px;flex-wrap:wrap;
  margin-top:18px;padding-top:14px;border-top:1px solid var(--border)}
#audit .pmc-aw-share[hidden]{display:none}
#audit .pmc-aw-share-copy{font-size:13.5px;line-height:1.45;color:var(--ink-3)}
#audit .pmc-aw-share .pmc-aw-ghost{min-height:40px;padding:8px 14px}
#audit .pmc-aw-share-field,#audit .pmc-aw-share-hint{flex:1 1 100%;margin-top:0}
@media(max-width:560px){#audit .pmc-aw-capture{padding:16px 14px 16px}
  #audit .pmc-aw-share .pmc-aw-ghost{width:100%;justify-content:center}}

/* ============================================================
   CONTACT, rebuilt 2026-09-22: headline and what happens next on
   the left, the form on the right. Under 1000px the form moves up
   to sit straight after the intro, so nobody scrolls past the steps
   to reach it.
   ============================================================ */
.contact-hero{padding:96px 0 104px;position:relative}
.ct-grid{display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);
  grid-template-areas:"copy form" "next form";column-gap:clamp(32px,5vw,84px);row-gap:36px;align-items:start}
.ct-copy{grid-area:copy}
.ct-form{grid-area:form;scroll-margin-top:120px}
.ct-next{grid-area:next}
.ct-copy h1{font-family:var(--display);font-weight:500;font-size:clamp(38px,4.8vw,64px);
  line-height:1.04;letter-spacing:-.034em;margin:0 0 22px;text-wrap:balance;max-width:12ch}
.ct-copy .page-lead{max-width:44ch}
.ct-form .lead-form{max-width:none}
.ct-k{display:block;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--emerald);margin-bottom:14px}
.ct-steps{list-style:none;margin:0 0 34px;padding:0;display:flex;flex-direction:column}
.ct-steps li{display:grid;grid-template-columns:34px minmax(0,1fr);gap:12px;padding:16px 0;border-top:1px solid var(--border)}
.ct-steps li:first-child{border-top:0;padding-top:4px}
.ct-steps .mono{font-size:9.5px;letter-spacing:.12em;color:var(--gold-ink);padding-top:6px}
.ct-steps h2{margin:0 0 5px;font-size:clamp(17px,1.9vw,21px);line-height:1.2;letter-spacing:-.014em}
.ct-steps p{margin:0;font-size:15px;line-height:1.55;color:var(--ink-3)}
.ct-direct{display:flex;flex-direction:column;gap:8px}
.ct-line{display:grid;grid-template-columns:minmax(0,8.5em) minmax(0,1fr) auto;align-items:center;gap:14px;
  padding:14px 18px;background:var(--surface);border:1px solid var(--border);border-radius:10px;
  color:var(--ink);text-decoration:none;box-shadow:var(--shadow);
  transition:border-color .2s var(--ease),transform .2s var(--ease)}
.ct-line .mono{font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-4)}
.ct-line span:nth-child(2){font-size:15px;overflow-wrap:anywhere}
.ct-go{color:var(--emerald)}
@media(hover:hover) and (pointer:fine){.ct-line:hover{border-color:#A9C7A2;transform:translateX(3px)}}
.ct-line:focus-visible{outline:2px solid var(--emerald);outline-offset:2px}
@media(max-width:1000px){
  .contact-hero{padding:72px 0 80px}
  .ct-grid{grid-template-columns:minmax(0,1fr);grid-template-areas:"copy" "form" "next";row-gap:32px}
  .ct-copy h1{max-width:14ch}
}
@media(max-width:560px){
  .contact-hero{padding:56px 0 64px}
  .ct-line{grid-template-columns:minmax(0,1fr) auto;row-gap:2px;padding:13px 16px}
  .ct-line .mono{grid-column:1 / -1}
  .ct-line span:nth-child(2){grid-column:1}
}

/* ============================================================
   BLOG INDEX, 2026-09-22: the lead card lists what is inside the
   newest piece instead of repeating its title as an image, cards
   carry reading time, and card summaries stop at three lines so
   the grid keeps one rhythm.
   ============================================================ */
.lp-side{position:relative;display:flex;flex-direction:column;gap:14px;padding:clamp(26px,3vw,40px);
  background:linear-gradient(160deg,rgba(63,122,56,.10),rgba(63,122,56,.03));border-left:1px solid var(--border)}
.lp-flag{align-self:flex-start;font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--emerald);
  background:var(--surface);border:1px solid var(--border);border-radius:999px;padding:6px 11px}
.lp-in{font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-4);margin-top:6px}
.lp-toc{list-style:none;margin:0;padding:0;counter-reset:lptoc;display:flex;flex-direction:column}
.lp-toc li{counter-increment:lptoc;display:grid;grid-template-columns:28px minmax(0,1fr);gap:10px;
  padding:11px 0;border-top:1px solid rgba(63,122,56,.14);font-size:15px;line-height:1.4;color:var(--ink-2)}
.lp-toc li:first-child{border-top:0;padding-top:2px}
.lp-toc li::before{content:counter(lptoc,decimal-leading-zero);font-family:var(--mono);font-size:9.5px;
  letter-spacing:.1em;color:var(--gold-ink);padding-top:4px}
.post-card p{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
@media(max-width:900px){.lp-side{border-left:0;border-top:1px solid var(--border)}}

/* ---- hero rest state, refitted to the shorter headline. The card's 428px
   floor was set when the headline ran to four lines, so with the new copy it
   carried about 90px of empty card and held the hero open well below the
   button. The card now takes its own height, and the hero closes 60px under
   whichever column ends lower. ---- */
@media(min-width:901px){
  .tool-stage{min-height:0}
  .hero{padding-bottom:60px}
}
@media(min-width:1600px){.hero{padding-bottom:72px}}

/* ---- blog hero: the archive totals gave way to a way in. Four owner
   questions, each opening the guide that answers it, and a quiet link down
   to the full archive. ---- */
.ph-start{gap:14px;padding:24px 26px 20px}
.start-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.start-list li+li{border-top:1px solid var(--border)}
.start-list a{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:14px;
  min-height:54px;padding:10px 12px;margin-inline:-12px;border-radius:10px;
  font-size:15px;line-height:1.35;color:var(--ink);
  transition:background .2s var(--ease),color .2s var(--ease)}
.start-list .sl-go{color:var(--emerald);transition:transform .25s var(--ease)}
@media(hover:hover){
  .start-list a:hover{background:#F3F8F1}
  .start-list a:hover .sl-go{transform:translateX(3px)}
}
.start-list a:focus-visible{outline:2px solid var(--emerald);outline-offset:2px}
.start-all{display:inline-flex;align-items:center;gap:8px;align-self:flex-start;
  font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-4);
  padding-top:4px;transition:color .2s var(--ease)}
.start-all:hover{color:var(--emerald)}
@media(max-width:560px){.start-list a{font-size:14.5px;gap:12px}}

/* ---- what-it-reads grid: a sixth card closes the 2 x 3 grid instead of the
   fifth category stretching across both columns on its own. It sends the
   reader back up to the scanner, in the scanner's own gold. ---- */
.read-cta{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:0;
  border-color:var(--gold);color:var(--ink);text-decoration:none;
  background:linear-gradient(160deg,#FFFDF6 0%,var(--surface) 60%);
  transition:transform .25s var(--ease),box-shadow .25s var(--ease)}
.read-cta-k{font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-ink);margin-bottom:10px}
.read-cta h3{font-size:clamp(20px,2vw,24px);margin:0 0 8px}
.read-cta p{max-width:44ch;margin:0 0 16px}
.read-cta-go{display:inline-flex;align-items:center;gap:9px;min-height:46px;padding:11px 18px;
  border-radius:5px;background:var(--gold);color:var(--ink);font:600 15px/1.3 var(--body)}
@media(hover:hover){.read-cta:hover{transform:translateY(-2px);box-shadow:var(--shadow-lift)}}
.read-cta:focus-visible{outline:2px solid var(--emerald);outline-offset:3px}
#audit{scroll-margin-top:120px}

/* ---- operating layer cards: sized to their one line of copy instead of
   running to the edge of the shell, so the rail, the funnel and the cards
   read as one diagram. ---- */
@media(min-width:901px){.opl-rows{max-width:520px}}

/* ---- blog hero: the card sat on the bottom edge of the copy, so on desktop
   it rose above the headline. The label now spans the grid on its own row,
   the card starts level with the h1, and the rows are a touch tighter so its
   foot lands close to the end of the lead. ---- */
.ph-grid.ph-blog{align-items:start;row-gap:0}
.ph-blog>.ph-kicker{grid-column:1 / -1}
.ph-start{padding:22px 24px 18px;gap:10px}
.start-list a{min-height:46px;padding:8px 12px}
@media(max-width:1000px){.ph-blog>.ph-start{margin-top:32px}}

/* ============================================================
   POST FIGURES
   Inline figures a post can opt into: an "In short" box, a hand-built
   column chart, a stat row, a chain diagram and a before/after. Nothing
   here touches a post that does not use these classes.
   ============================================================ */
.prose .pf-tldr{padding:20px 24px 22px;border:1px solid var(--border);border-left:3px solid var(--gold);
  border-radius:0 14px 14px 0;background:var(--surface)}
.prose .pf-tldr-k{display:block;font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-ink);margin-bottom:12px}
.prose .pf-tldr ul{gap:.55em}
.prose .pf-tldr li{font-size:16px;line-height:1.55}

.prose .pf-figure{margin-block:2.1em;padding:22px 24px 18px;border:1px solid var(--border);border-radius:16px;
  background:var(--surface);box-shadow:var(--shadow)}
.prose .pf-fig-head{display:flex;flex-direction:column;gap:3px;margin-bottom:20px}
.prose .pf-fig-k{font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-ink);margin-bottom:6px}
.prose .pf-fig-head strong{font-family:var(--display);font-weight:500;font-size:clamp(18px,2vw,21px);line-height:1.2;color:var(--ink)}
.prose .pf-fig-head>span:last-child{font-size:14px;line-height:1.45;color:var(--ink-3)}
.prose .pf-figure figcaption{margin-top:16px;padding-top:12px;border-top:1px solid var(--border);
  font-family:var(--body);font-size:13px;letter-spacing:0;text-transform:none;line-height:1.5;color:var(--ink-4)}

/* column chart: one series, the hour that matters in emerald, the rest in the
   context gray; value and note sit on the highlighted cap only. */
.prose .pfc-plot{position:relative;height:230px;padding:0 0 0 30px}
.prose .pfc-grid{position:absolute;inset:0 0 28px 30px}
.prose .pfc-grid span{position:absolute;left:-30px;right:0;bottom:calc(var(--g) / 12 * 100%);
  height:0;border-top:1px solid var(--border);font-family:var(--mono);font-size:10px;line-height:0;color:var(--ink-4)}
.prose .pfc-grid span[style*="--g:0"]{border-top-color:#C9D4CE}
.prose .pfc-cols{position:relative;display:grid;grid-template-columns:repeat(9,minmax(0,1fr));height:100%}
.prose .pfc-col{position:relative;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;
  padding-bottom:28px;outline:none}
.prose .pfc-bar{width:min(24px,70%);height:calc(var(--v) / 12 * (230px - 28px));border-radius:4px 4px 0 0;
  background:#7F958A;transition:filter .15s}
.prose .pfc-col.is-key .pfc-bar{background:var(--emerald)}
.prose .pfc-x{position:absolute;bottom:6px;left:0;right:0;text-align:center;font-family:var(--mono);font-size:10.5px;color:var(--ink-4)}
.prose .pfc-val{font-family:var(--body);font-weight:600;font-size:15px;color:var(--ink);line-height:1;margin-bottom:4px}
.prose .pfc-note{position:absolute;bottom:calc(28px + var(--v) / 12 * (230px - 28px) + 26px);right:50%;
  white-space:nowrap;font-size:12px;line-height:1.2;color:var(--ink-3)}
.prose .pfc-tip{position:absolute;bottom:calc(28px + var(--v) / 12 * (230px - 28px) + 8px);left:50%;transform:translate(-50%,4px);
  white-space:nowrap;padding:6px 9px;border-radius:7px;background:var(--ink);color:#fff;font-size:12.5px;line-height:1.2;
  opacity:0;pointer-events:none;transition:opacity .15s,transform .15s;z-index:2}
.prose .pfc-col:hover .pfc-tip,.prose .pfc-col:focus-visible .pfc-tip{opacity:1;transform:translate(-50%,0)}
.prose .pfc-col:hover .pfc-bar,.prose .pfc-col:focus-visible .pfc-bar{filter:brightness(.9)}
.prose .pfc-col.is-key:hover .pfc-note,.prose .pfc-col.is-key:focus-visible .pfc-note{opacity:0}
.prose .pfc-col:first-child .pfc-tip{left:0;transform:translate(0,4px)}
.prose .pfc-col:first-child:hover .pfc-tip,.prose .pfc-col:first-child:focus-visible .pfc-tip{transform:translate(0,0)}
.prose .pfc-col:last-child .pfc-tip{left:auto;right:0;transform:translate(0,4px)}
.prose .pfc-col:last-child:hover .pfc-tip,.prose .pfc-col:last-child:focus-visible .pfc-tip{transform:translate(0,0)}

.prose .pf-data{margin-top:14px}
.prose .pf-data summary{cursor:pointer;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--emerald);width:max-content}
.prose .pf-data table{margin-top:10px;font-size:14px}
.prose .pf-data th,.prose .pf-data td{padding:7px 12px}

/* stat row */
.prose .pfk-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;margin:0;
  border:1px solid var(--border);border-radius:12px;overflow:hidden}
.prose .pfk{display:flex;flex-direction:column-reverse;gap:6px;padding:16px 18px;background:var(--canvas)}
.prose .pfk+.pfk{border-left:1px solid var(--border)}
.prose .pfk dt{font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-4);line-height:1.35}
.prose .pfk dd{margin:0;font-family:var(--body);font-weight:600;font-size:34px;line-height:1;color:var(--ink)}
.prose .pfk.is-key{background:#F1F7EF}
.prose .pfk.is-key dd{color:var(--emerald)}

/* chain of command */
.prose .pch{display:flex;flex-direction:column;align-items:center}
.prose .pch-node{display:flex;flex-direction:column;align-items:center;gap:3px;min-width:220px;padding:12px 20px;
  border:1px solid var(--border);border-radius:12px;background:var(--canvas);text-align:center}
.prose .pch-node .mono,.prose .pch-gate .mono{font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-4)}
.prose .pch-node strong{font-family:var(--display);font-weight:500;font-size:19px;color:var(--ink)}
.prose .pch-top{border-color:var(--emerald);background:#F1F7EF}
.prose .pch-link{display:block;width:1.5px;height:22px;background:var(--gold)}
.prose .pch-lanes{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;width:100%;margin:0;padding:0}
.prose .pch-lanes li{padding:10px 8px;border:1px solid var(--border);border-radius:10px;background:var(--surface);
  text-align:center;font-size:14.5px;line-height:1.3;color:var(--ink-2)}
.prose .pch-lanes li::before{display:none}
.prose .pch-gate{display:flex;flex-direction:column;align-items:center;gap:5px;width:100%;padding:16px 18px;
  border:1px solid var(--gold);border-radius:12px;background:linear-gradient(160deg,#FFFBEE 0%,#FFFFFF 70%);text-align:center}
.prose .pch-gate strong{font-family:var(--display);font-weight:500;font-size:18px;line-height:1.25;color:var(--ink)}
.prose .pch-items{font-size:14px;color:var(--ink-3)}
.prose .pch-gate .pch-rel{color:var(--emerald);margin-top:4px}

/* before and after */
.prose .pfd{border:1px solid var(--border);border-radius:12px;overflow:hidden}
.prose .pfd-line{display:grid;grid-template-columns:34px minmax(0,1fr);align-items:start}
.prose .pfd-line+.pfd-line{border-top:1px solid var(--border)}
.prose .pfd-sign{padding:14px 0;text-align:center;font-family:var(--mono);font-size:15px;font-weight:600}
.prose .pfd-text{padding:13px 16px 14px 0;font-size:15.5px;line-height:1.6;color:var(--ink-2)}
.prose .pfd-del{background:#FBF1F0}
.prose .pfd-del .pfd-sign{color:#A23B32}
.prose .pfd-del .pfd-text{text-decoration:line-through;text-decoration-color:rgba(162,59,50,.45);text-decoration-thickness:1px}
.prose .pfd-add{background:#F1F7EF}
.prose .pfd-add .pfd-sign{color:var(--emerald)}

.prose .pf-pull{padding:10px 0 10px 26px;border-left:3px solid var(--gold);font-family:var(--display);font-weight:500;
  font-size:clamp(21px,2.4vw,26px);line-height:1.3;letter-spacing:-.01em;color:var(--ink)}
.prose .pf-pull p{font-size:inherit;line-height:inherit;color:inherit;margin:0}

@media(max-width:640px){
  .prose .pf-figure{padding:18px 16px 14px;border-radius:14px}
  .prose .pfk-row{grid-template-columns:repeat(2,minmax(0,1fr))}
  .prose .pfk:nth-child(3){border-left:0}
  .prose .pfk:nth-child(n+3){border-top:1px solid var(--border)}
  .prose .pfk dd{font-size:30px}
  .prose .pch-lanes{grid-template-columns:repeat(2,minmax(0,1fr))}
  .prose .pfc-plot{height:210px}
  .prose .pfc-bar{height:calc(var(--v) / 12 * (210px - 28px))}
  .prose .pfc-note{bottom:calc(28px + var(--v) / 12 * (210px - 28px) + 26px)}
  .prose .pfc-tip{bottom:calc(28px + var(--v) / 12 * (210px - 28px) + 8px)}
}

/* ---- post hero: an optional "In short" card beside the headline, for posts
   that set tldr in their front matter. Posts without it are unchanged. ---- */
.post-hero .shell.has-tldr{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,380px);gap:clamp(40px,5vw,80px);align-items:end}
.post-tldr{padding:22px 24px 22px;border:1px solid var(--border);border-top:3px solid var(--gold);border-radius:14px;
  background:var(--surface);box-shadow:var(--shadow)}
.post-tldr-k{display:block;font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-ink);margin-bottom:12px}
.post-tldr ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.post-tldr li{position:relative;padding-left:22px;font-size:15px;line-height:1.5;color:var(--ink-2)}
.post-tldr li::before{content:'';position:absolute;left:0;top:.5em;width:10px;height:10px;border-radius:50%;
  background:var(--emerald);box-shadow:0 0 0 3px #E4EFE1}
@media(max-width:1000px){.post-hero .shell.has-tldr{grid-template-columns:minmax(0,1fr);gap:30px}}

/* shared-tools hub: four assistants over one shared context over one set of tools */
.prose .phb{display:flex;flex-direction:column;align-items:stretch}
.prose .phb-row{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:0;padding:0}
.prose .phb-row li{padding:10px 8px;border-radius:10px;text-align:center;font-size:14.5px;line-height:1.3}
.prose .phb-row li::before{display:none}
.prose .phb-ais li{border:1px solid var(--emerald);background:#F1F7EF;color:var(--ink);font-family:var(--display);font-weight:500;font-size:16px}
.prose .phb-tools li{border:1px solid var(--border);background:var(--surface);color:var(--ink-2)}
.prose .phb-links{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;height:22px}
.prose .phb-links span{justify-self:center;width:1.5px;height:100%;background:var(--gold)}
.prose .phb-ctx{display:flex;flex-direction:column;align-items:center;gap:4px;padding:14px 18px;border:1px solid var(--gold);
  border-radius:12px;background:linear-gradient(160deg,#FFFBEE 0%,#FFFFFF 70%);text-align:center}
.prose .phb-ctx .mono{font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-ink)}
.prose .phb-ctx strong{font-family:var(--display);font-weight:500;font-size:18px;line-height:1.25;color:var(--ink)}
.prose .phb>.pch-link{align-self:center}
@media(max-width:640px){
  .prose .phb-row{grid-template-columns:repeat(2,minmax(0,1fr))}
  .prose .phb-links{grid-template-columns:1fr}
  .prose .phb-links span:not(:first-child){display:none}
}

/* ---- quotes: .prose blockquote{margin:0} outranked the prose rhythm, so every
   quote sat flush under the paragraph above it. Quotes take the normal gap, and
   the pull quote gets more air above and below. ---- */
.prose>*+blockquote{margin-top:1.35em}
.prose>blockquote.pf-pull{margin-block:1.9em}
.prose .pf-pull p{text-wrap:balance}

/* ---- more post figures: horizontal bars, a step flow, email cards and a
   checklist. Same opt-in rule: only posts that use the classes see them. ---- */
.prose .pfh{display:flex;flex-direction:column;gap:12px;margin:0;padding:0;list-style:none}
.prose .pfh li{display:grid;grid-template-columns:150px minmax(0,1fr) 44px;align-items:center;gap:14px;padding:0}
.prose .pfh li::before{display:none}
.prose .pfh-l{font-size:14.5px;line-height:1.3;color:var(--ink-2)}
.prose .pfh-t{position:relative;height:24px;border-radius:0 4px 4px 0;background:var(--canvas-2)}
.prose .pfh-b{position:absolute;inset:0 auto 0 0;width:calc(var(--v) * 1%);border-radius:0 4px 4px 0;background:#7F958A}
.prose .pfh li.is-key .pfh-b{background:var(--emerald)}
.prose .pfh-v{font-family:var(--body);font-weight:600;font-size:15px;color:var(--ink);text-align:right}
.prose .pfh li.is-key .pfh-l{color:var(--ink);font-weight:600}

.prose .pfs{list-style:none;margin:0;padding:0;counter-reset:pfs;display:flex;flex-direction:column}
.prose .pfs>li{position:relative;padding:0 0 18px 46px;counter-increment:pfs}
.prose .pfs>li::before{content:counter(pfs);position:absolute;left:0;top:0;width:28px;height:28px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;background:#F1F7EF;border:1px solid var(--emerald);
  font-family:var(--mono);font-size:12px;color:var(--emerald)}
.prose .pfs>li::after{content:'';position:absolute;left:14px;top:32px;bottom:4px;width:1.5px;background:var(--border)}
.prose .pfs>li:last-child{padding-bottom:0}
.prose .pfs>li:last-child::after{display:none}
.prose .pfs strong{display:block;font-family:var(--display);font-weight:500;font-size:17px;line-height:1.3;color:var(--ink);margin-bottom:3px}
.prose .pfs span{display:block;font-size:15px;line-height:1.55;color:var(--ink-3)}
.prose .pfs>li.is-guard::before{content:'!';background:#FFF8E6;border-color:var(--gold);color:var(--gold-ink)}
.prose .pfs>li.is-guard strong{color:var(--gold-ink)}

.prose .pfm-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.prose .pfm{border:1px solid var(--border);border-radius:12px;background:var(--surface);overflow:hidden}
.prose .pfm-tag{display:block;padding:8px 14px;font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-4);background:var(--canvas-2);border-bottom:1px solid var(--border)}
.prose .pfm.is-bad .pfm-tag{background:#FBF1F0;color:#A23B32}
.prose .pfm.is-good .pfm-tag{background:#F1F7EF;color:var(--emerald)}
.prose .pfm-subj{padding:12px 14px 4px;font-weight:600;font-size:15px;color:var(--ink)}
.prose .pfm dl{margin:0;padding:6px 14px 14px;display:grid;grid-template-columns:auto minmax(0,1fr);gap:5px 12px;font-size:14px;line-height:1.45}
.prose .pfm dt{color:var(--ink-4)}
.prose .pfm dd{margin:0;color:var(--ink-2);overflow-wrap:anywhere}
.prose .pfm dd.is-empty{color:#A23B32;font-style:italic}
.prose .pfm-body{padding:12px 16px 16px;font-size:15px;line-height:1.6;color:var(--ink-2)}
.prose .pfm-body p{margin:0 0 .8em;font-size:15px;line-height:1.6}
.prose .pfm-body p:last-child{margin-bottom:0}
.prose .pfm-body mark{background:#FFF3C8;color:var(--ink);padding:1px 2px;margin:0 -2px;border-radius:3px;-webkit-box-decoration-break:clone;box-decoration-break:clone}

.prose .pf-check{padding:20px 22px 20px;border:1px solid var(--border);border-top:3px solid var(--emerald);border-radius:14px;background:var(--surface);box-shadow:var(--shadow)}
.prose .pf-check-k{display:block;font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--emerald);margin-bottom:12px}
.prose .pf-check ol{counter-reset:none;gap:.7em}
.prose .pf-check ol>li{padding-left:34px;font-size:16px;line-height:1.55}
.prose .pf-check ol>li::before{content:'';top:.25em;left:0;width:18px;height:18px;border-radius:5px;border:1.5px solid var(--emerald);background:var(--surface)}

@media(max-width:640px){
  .prose .pfh li{grid-template-columns:minmax(0,1fr) 40px;gap:6px 10px}
  .prose .pfh-l{grid-column:1 / -1}
  .prose .pfm-pair{grid-template-columns:minmax(0,1fr)}
}

/* Figure kit, round three: evidence rows, column chart, grouped bars, source window. Opt in, scoped to .prose. */
.prose .pfh-b{width:calc(var(--v) * 100% / var(--max, 100))}
.prose .pfh.is-wide li{grid-template-columns:150px minmax(0,1fr) 58px}
.prose .pfh-l em{display:block;margin-top:2px;font-style:normal;font-size:12.5px;line-height:1.35;color:var(--ink-4)}
.prose .pfh li.is-base .pfh-b{background:#C89F28}
.prose .pfh li:hover .pfh-b{filter:brightness(.92)}

.prose .pfe{display:flex;flex-direction:column;border-top:1px solid var(--border)}
.prose .pfe-row{display:grid;grid-template-columns:178px minmax(0,1fr) minmax(0,1fr);gap:18px;padding:16px 0;border-bottom:1px solid var(--border)}
.prose .pfe-name{display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.prose .pfe-name strong{font-family:var(--display);font-weight:500;font-size:18px;line-height:1.2;color:var(--ink)}
.prose .pfe-pill{display:inline-block;padding:4px 9px;border-radius:999px;font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;line-height:1.2;border:1px solid}
.prose .pfe-pill.is-doc{color:var(--emerald);background:#F1F7EF;border-color:#CFE3CB}
.prose .pfe-pill.is-part{color:var(--gold-ink);background:#FFF8E6;border-color:#EEDCA6}
.prose .pfe-pill.is-none{color:var(--ink-4);background:var(--canvas-2);border-color:var(--border)}
.prose .pfe-pill.is-own{color:var(--ink-2);background:var(--surface);border-color:#C9D4CE}
.prose .pfe-row p{margin:0;font-size:14.5px;line-height:1.55;color:var(--ink-2)}
.prose .pfe-row p>b{display:block;margin-bottom:4px;font-family:var(--mono);font-weight:500;font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-4)}

.prose .pfv{position:relative;display:flex;align-items:flex-end;justify-content:space-around;gap:14px;height:236px;margin:4px 0 34px;padding:0 6px;border-bottom:1px solid #C9D4CE}
.prose .pfv-col{position:relative;flex:1 1 0;max-width:132px;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;outline:none}
.prose .pfv-v{font-family:var(--body);font-weight:600;font-size:15px;line-height:1;color:var(--ink);margin-bottom:7px}
.prose .pfv-b{display:block;width:100%;max-width:76px;height:calc(var(--v) / var(--max, 100) * 190px);background:#7F958A;border-radius:4px 4px 0 0;transition:filter .15s}
.prose .pfv-col.is-key .pfv-b{background:var(--emerald)}
.prose .pfv-col:hover .pfv-b,.prose .pfv-col:focus-visible .pfv-b{filter:brightness(.9)}
.prose .pfv-x{position:absolute;top:calc(100% + 9px);left:50%;transform:translateX(-50%);white-space:nowrap;font-family:var(--mono);font-size:10.5px;letter-spacing:.04em;color:var(--ink-4)}
.prose .pfv-col.is-key .pfv-x{color:var(--ink);font-weight:600}

.prose .pf-key{display:flex;flex-wrap:wrap;gap:6px 18px;margin:-6px 0 16px;font-size:13.5px;color:var(--ink-2)}
.prose .pf-key span{display:inline-flex;align-items:center;gap:7px}
.prose .pf-key span::before{content:'';width:12px;height:12px;border-radius:3px;background:var(--c)}
.prose .pfg{display:flex;flex-direction:column;gap:18px;margin:0;padding:0;list-style:none}
.prose .pfg>li{display:grid;grid-template-columns:200px minmax(0,1fr);gap:14px;align-items:center;padding:0}
.prose .pfg>li::before{display:none}
.prose .pfg-l strong{display:block;font-weight:600;font-size:15px;line-height:1.3;color:var(--ink)}
.prose .pfg-l em{display:block;margin-top:2px;font-style:normal;font-size:13px;line-height:1.35;color:var(--ink-4)}
.prose .pfg-bars{display:flex;flex-direction:column;gap:4px}
.prose .pfg-r{display:grid;grid-template-columns:86px minmax(0,1fr) 44px;align-items:center;gap:10px}
.prose .pfg-s{font-family:var(--mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-4)}
.prose .pfg-t{position:relative;height:18px;border-radius:0 4px 4px 0;background:var(--canvas-2)}
.prose .pfg-b{position:absolute;inset:0 auto 0 0;width:calc(var(--v) * 1%);border-radius:0 4px 4px 0;background:var(--c)}
.prose .pfg-r:hover .pfg-b{filter:brightness(.92)}
.prose .pfg-v{font-weight:600;font-size:14.5px;color:var(--ink);text-align:right}

.prose .pfcode{border:1px solid #1E3430;border-radius:12px;overflow:hidden;background:#0E1D19}
.prose .pfcode-bar{display:flex;align-items:center;gap:6px;padding:9px 14px;background:#15282A;border-bottom:1px solid #1E3430;font-family:var(--mono);font-size:10.5px;letter-spacing:.03em;color:#8FA59A}
.prose .pfcode-bar i{width:9px;height:9px;border-radius:50%;background:#2C4440}
.prose .pfcode-bar span{margin-left:8px}
.prose .pfcode pre{margin:0;padding:16px 18px;border:0;border-radius:0;background:none;white-space:pre-wrap;overflow-wrap:anywhere}
.prose .pfcode pre code{font-size:12.5px;line-height:1.75;color:#C9DCD2}
.prose .pfcode .c{color:#6F8A7E}
.prose .pfcode mark{background:rgba(212,175,55,.26);color:#FBE7A6;border-radius:3px;padding:0 2px}

.prose pre.pf-pre{white-space:pre-wrap;overflow-wrap:anywhere}

@media(max-width:760px){
  .prose .pfe-row{grid-template-columns:minmax(0,1fr);gap:10px}
  .prose .pfe-name{flex-direction:row;align-items:center;justify-content:space-between}
  .prose .pfg>li{grid-template-columns:minmax(0,1fr);gap:8px}
}
@media(max-width:640px){
  .prose .pfh.is-wide li{grid-template-columns:minmax(0,1fr) 52px}
  .prose .pfv{gap:10px;height:216px}
  .prose .pfv-b{height:calc(var(--v) / var(--max, 100) * 170px)}
  .prose .pfv-x{font-size:10px}
  .prose .pfg-r{grid-template-columns:72px minmax(0,1fr) 40px;gap:8px}
}
.prose .pfcode pre code{line-height:1.6}
.prose .pfcode .l{display:block;padding-left:2.2ch;text-indent:-2.2ch;margin-bottom:7px}
.prose .pfcode .l:last-child{margin-bottom:0}
.prose .pfcode pre,.prose pre.pf-pre{overflow-wrap:break-word}
.prose .pfe-pill{white-space:nowrap}
@media(max-width:640px){
  .prose .pfg-r{grid-template-columns:84px minmax(0,1fr) 40px}
  .prose .pfg-s{font-size:9.5px;letter-spacing:.03em}
}

/* Figure kit, round four: threshold bands, bucket cards. Opt in, scoped to .prose. */
.prose .pftz{display:flex;flex-direction:column;gap:20px;margin:0;padding:0;list-style:none}
.prose .pftz>li{display:grid;grid-template-columns:180px minmax(0,1fr);gap:16px;align-items:start;padding:0}
.prose .pftz>li::before{display:none}
.prose .pftz-l strong{display:block;font-weight:600;font-size:15px;line-height:1.3;color:var(--ink)}
.prose .pftz-l em{display:block;margin-top:2px;font-style:normal;font-size:13px;line-height:1.35;color:var(--ink-4)}
.prose .pftz-bar{display:flex;gap:2px;height:30px}
.prose .pftz-z{flex:var(--w) 1 0;min-width:0;display:flex;align-items:center;padding:0 10px;border-radius:4px;font-family:var(--mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;overflow:hidden}
.prose .pftz-z.is-g{background:#DDEDD8;color:#2E5E29}
.prose .pftz-z.is-n{background:#F7EAC0;color:#6E520A}
.prose .pftz-z.is-p{background:#F5D9D5;color:#8E332B}
.prose .pftz-ticks{position:relative;height:18px;margin-top:5px;font-family:var(--mono);font-size:10.5px;color:var(--ink-3)}
.prose .pftz-ticks span{position:absolute;top:0;left:var(--at);transform:translateX(-50%);white-space:nowrap}

.prose .pfb{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.prose .pfb-card{display:flex;flex-direction:column;gap:8px;padding:16px;border:1px solid var(--border);border-radius:12px;background:var(--surface)}
.prose .pfb-card.is-key{border-color:#EEDCA6;background:#FFFBF0}
.prose .pfb-n{font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-4)}
.prose .pfb-card strong{font-family:var(--display);font-weight:500;font-size:17px;line-height:1.25;color:var(--ink)}
.prose .pfb-card p{margin:0;font-size:14px;line-height:1.5;color:var(--ink-3)}
.prose .pfb-who{margin-top:auto;padding-top:10px;border-top:1px solid var(--border);font-size:14px;line-height:1.4;font-weight:600;color:var(--emerald)}
.prose .pfb-who.is-me{color:var(--ink)}
.prose .pfb-card.is-key .pfb-n{color:var(--gold-ink)}

@media(max-width:760px){
  .prose .pftz>li{grid-template-columns:minmax(0,1fr);gap:8px}
  .prose .pfb{grid-template-columns:minmax(0,1fr)}
}
@media(max-width:640px){
  .prose .pftz-z{padding:0 6px;font-size:9px;letter-spacing:.03em}
}

/* ============================================================
   SERVICES, the detailed page (copy pass, 23 Sep 2026).
   svd: one row per service, head on the left (icon, index, name,
   tag) and the detail, Start here if, Covers and Ongoing on the
   right. ws: the symptom to service map under the four jobs.
   faq: Common questions on Services and the audit page.
   ============================================================ */
.svd-list{display:flex;flex-direction:column;gap:14px}
.svd{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.4fr);gap:24px 44px;
  background:var(--surface);border:1px solid var(--border);border-radius:16px;box-shadow:var(--shadow);
  padding:30px 32px 30px;scroll-margin-top:150px;transition:border-color .25s var(--ease)}
.svd:target{border-color:var(--emerald);box-shadow:0 0 0 3px rgba(63,122,56,.12)}
.svd-head{display:grid;grid-template-columns:64px minmax(0,1fr);grid-template-rows:auto auto auto;column-gap:18px;align-items:start;align-content:start}
.svd-head .ico{grid-row:1 / span 3;width:64px;height:64px;margin:-6px 0 0}
.svd-head .ico svg{width:56px;height:56px;overflow:visible}
.svd-head .opl-ix{grid-column:2;display:block;margin-bottom:8px}
.svd-head h3{grid-column:2;margin:0 0 8px;font-family:var(--display);font-weight:500;font-size:clamp(21px,2.2vw,26px);line-height:1.12;letter-spacing:-.016em;color:var(--ink)}
.svd-tag{grid-column:2;margin:0;font-size:15px;line-height:1.45;color:var(--ink-3);max-width:34ch}
.svd-detail{margin:0;font-size:16px;line-height:1.62;color:var(--ink-2);max-width:66ch}
.svd-meta{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px 22px;margin:22px 0 0;padding:19px 0 0;border-top:1px solid var(--border)}
.svd-m dt{font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-ink);margin:0 0 8px}
.svd-m dd{margin:0;font-size:14px;line-height:1.5;color:var(--ink-2)}
.svd-covers dd ul{list-style:none;margin:0;padding:0}
.svd-covers dd li{display:flex;align-items:baseline;gap:9px;line-height:1.4}
.svd-covers dd li+li{margin-top:6px}
.svd-covers dd li::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--gold);flex:none;transform:translateY(-2px)}
@media(max-width:900px){
  .svd{grid-template-columns:minmax(0,1fr);gap:18px;padding:24px 22px}
  .svd-meta{grid-template-columns:repeat(2,minmax(0,1fr))}
  .svd-covers{grid-column:1 / -1}
}
@media(max-width:560px){
  .svd-head{grid-template-columns:46px minmax(0,1fr);column-gap:14px}
  .svd-head .ico{width:46px;height:46px;margin-top:-4px}
  .svd-head .ico svg{width:40px;height:40px}
  .svd-meta{grid-template-columns:minmax(0,1fr)}
}

.ws{margin-top:38px;background:var(--surface);border:1px solid var(--border);border-radius:16px;box-shadow:var(--shadow);padding:26px 32px 24px}
.ws-h{margin:0 0 12px;font:inherit}
.ws-h .section-label{margin-bottom:0}
.ws-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 44px}
.ws-list li{border-top:1px solid var(--border)}
.ws-list li:nth-child(-n+2){border-top:0}
.ws-row{display:grid;grid-template-columns:minmax(0,1fr) 28px minmax(0,1fr);align-items:center;gap:12px;min-height:56px;padding:12px 0;
  text-decoration:none;color:inherit;border-radius:8px}
.ws-sym{font-family:var(--display);font-weight:500;font-size:clamp(17px,1.8vw,20px);line-height:1.2;letter-spacing:-.014em;color:var(--ink)}
.ws-arrow{color:var(--gold-ink);font-size:18px;text-align:center;transition:transform .25s var(--ease)}
.ws-svc{font-size:14.5px;line-height:1.35;color:var(--ink-2)}
@media(hover:hover) and (pointer:fine){.ws-row:hover .ws-arrow{transform:translateX(4px)}.ws-row:hover .ws-svc{color:var(--ink)}}
.ws-row:focus-visible{outline:2px solid var(--emerald);outline-offset:2px}
.ws-note{margin:14px 0 0;padding-top:16px;border-top:1px solid var(--border);font-size:14.5px;line-height:1.55;color:var(--ink-3);max-width:66ch}
@media(max-width:760px){
  .ws{padding:22px 20px 20px}
  .ws-list{grid-template-columns:minmax(0,1fr);gap:0}
  .ws-list li:nth-child(2){border-top:1px solid var(--border)}
  .ws-row{grid-template-columns:minmax(0,1fr) 22px minmax(0,1fr)}
}

.faq{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.faq-item{background:var(--surface);border:1px solid var(--border);border-radius:14px;box-shadow:var(--shadow);padding:22px 24px 22px}
.faq-item h3{margin:0 0 9px;font-family:var(--display);font-weight:500;font-size:clamp(18px,1.9vw,21px);line-height:1.2;letter-spacing:-.014em;color:var(--ink)}
.faq-item p{margin:0;font-size:14.5px;line-height:1.55;color:var(--ink-2)}
.faq-item p a{color:var(--emerald);text-decoration:underline;text-underline-offset:3px}
.faq-more{margin:18px 0 0;font-size:14.5px;line-height:1.5;color:var(--ink-3)}
.faq-more a{color:var(--emerald);text-decoration:underline;text-underline-offset:3px}
@media(max-width:760px){.faq{grid-template-columns:minmax(0,1fr)}}

/* the homepage six, one line each, each card a link to its Services row */
a.svc-card{display:grid;text-decoration:none;color:inherit}
a.svc-card:focus-visible{outline:2px solid var(--emerald);outline-offset:3px}
/* .read-cta wants its own flex column, not the grid above - a.svc-card.read-cta
   outranks a.svc-card so the pill stops stretching to the card's full width */
a.svc-card.read-cta{display:flex}
.install-more{margin:34px 0 0;max-width:860px}
.install-more a{color:var(--emerald);text-decoration:underline;text-underline-offset:3px}
.ninety-more{margin:22px 0 0;font-size:15px;line-height:1.5}
.ninety-more a{color:var(--emerald);text-decoration:underline;text-underline-offset:3px}

/* the audit page: questions beside this site's own scan result */
.aq-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:22px;align-items:start}
.aq-proof{position:sticky;top:120px}
.aq-proof-note{margin:4px 0 0;font-size:14px;line-height:1.55;color:var(--ink-3)}
.aq-proof-note a{color:var(--emerald);text-decoration:underline;text-underline-offset:3px}
@media(max-width:900px){.aq-grid{grid-template-columns:minmax(0,1fr)}.aq-proof{position:static}}
.split-heading>p a{text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(63,122,56,.55)}

/* ============================================================
   DIAGNOSIS: the walk. The four leaks are read by scrolling, not
   by clicking tabs. The rail stays put on desktop and shows where
   the reader is on the path; on phones it becomes four chips and
   every panel reads at full strength.
   ============================================================ */
.walk{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:56px;align-items:start}
.walk-rail{position:sticky;top:112px}
.walk-rail .leakbars{height:184px;margin:0 0 26px}
.walk-rail .lb-fill::after,.walk-rail .lb-lost::after{-webkit-mask-position:center;mask-position:center}
.walk-steps{list-style:none;margin:0;padding:0;position:relative}
.walk-steps::before{content:"";position:absolute;left:11px;top:16px;bottom:16px;width:1.5px;background:var(--border)}
.walk-steps::after{content:"";position:absolute;left:11px;top:16px;width:1.5px;height:calc((100% - 32px) * var(--progress,0));background:var(--gold);transition:height .6s var(--ease)}
.walk-steps li{margin:0;padding:0;display:grid}
.walk-step{display:grid;grid-template-columns:24px 1fr;grid-template-rows:auto auto auto;column-gap:16px;row-gap:1px;align-items:center;width:100%;height:100%;padding:11px 0;border:0;background:transparent;text-align:left;cursor:pointer;position:relative}
.walk-step::before{content:"";grid-row:1/4;width:10px;height:10px;border-radius:50%;border:1.5px solid var(--border);background:var(--canvas);justify-self:center;position:relative;z-index:1;transition:border-color .35s var(--ease),background .35s var(--ease),box-shadow .35s var(--ease)}
.ws-idx{font-size:10px;letter-spacing:.14em;color:var(--ink-4);grid-column:2}
.ws-name{font-family:var(--display);font-weight:500;font-size:22px;line-height:1.1;color:var(--ink-3);letter-spacing:-.01em;transition:color .35s var(--ease);grid-column:2}
.ws-leak{font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-4);grid-column:2}
.walk-step.is-done::before{border-color:var(--gold);background:var(--gold)}
.walk-step[aria-current="step"]::before{border-color:var(--emerald);background:var(--emerald);box-shadow:0 0 0 4px rgba(63,122,56,.14)}
.walk-step[aria-current="step"] .ws-name{color:var(--ink)}
.walk-step[aria-current="step"] .ws-idx{color:var(--gold-ink)}
.walk-panels{display:grid;gap:22px}
.diagnostic-panel.walk-panel{min-height:clamp(300px,46vh,420px)}
.walk-panel{background:var(--surface);border:1px solid var(--border);border-radius:12px;box-shadow:var(--shadow);opacity:.42;transform:translateY(10px);transition:opacity .55s var(--ease),transform .55s var(--ease),border-color .55s var(--ease)}
.walk-panel.is-active{opacity:1;transform:none;border-color:rgba(63,122,56,.4)}
.walk-panel.is-done{opacity:.68;transform:none}
.lb-col.done .lb-fill::after{background:rgba(63,122,56,.32)}
@media(max-width:900px){
  .walk{grid-template-columns:1fr;gap:26px}.walk-rail{position:static}.walk-rail .leakbars{height:132px;margin-bottom:18px}
  .walk-rail .lb-fill::after,.walk-rail .lb-lost::after{inset:5px 6px;-webkit-mask-size:14px 16px;mask-size:14px 16px}
  .walk-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}.walk-steps::before,.walk-steps::after{display:none}
  .walk-step{grid-template-columns:1fr;grid-template-rows:auto auto;column-gap:0;align-content:start;padding:10px 8px;min-height:44px;border-radius:10px;border:1px solid var(--border);background:var(--surface)}
  .walk-step::before{display:none}.ws-idx{grid-column:1}.ws-name{grid-column:1;font-size:15px}.ws-leak{display:none}
  .walk-step[aria-current="step"]{border-color:var(--emerald);box-shadow:inset 0 2px 0 var(--gold)}
  .diagnostic-panel.walk-panel{min-height:0}
  .walk-panel,.walk-panel.is-done{opacity:1;transform:none}
}
@media(prefers-reduced-motion:reduce){
  .walk-panel,.walk-step::before,.walk-steps::after,.ws-name{transition:none}
  .walk-panel,.walk-panel.is-done{opacity:1;transform:none}
}
@media(max-width:480px){.walk-steps{grid-template-columns:repeat(2,1fr)}}