/* self-hosted, instanced and subset from the Google Fonts files (OFL): see v23/fonts/ */
@font-face{font-family:"Source Serif 4";font-style:normal;font-weight:400 600;font-display:swap;src:url(/assets/fonts/sourceserif.woff2) format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:400 700;font-display:swap;src:url(/assets/fonts/inter.woff2) format("woff2")}
@font-face{font-family:"Fraunces";font-style:normal;font-weight:400 500;font-display:swap;src:url(/assets/fonts/fraunces.woff2) format("woff2")}
@font-face{font-family:"Fraunces";font-style:italic;font-weight:400;font-display:swap;src:url(/assets/fonts/fraunces-italic.woff2) format("woff2")}
@font-face{font-family:"Figtree";font-style:normal;font-weight:400 600;font-display:swap;src:url(/assets/fonts/figtree.woff2) format("woff2")}
@font-face{font-family:"Caveat";font-style:normal;font-weight:400 700;font-display:swap;src:url(/assets/fonts/caveat.woff2) format("woff2")}

/* ============================================================
   PRETARIS v11 · editorial consulting design system
   Serif: Source Serif 4 (display) · Sans: Inter (UI, body)
   ============================================================ */
:root{
  color-scheme: light;
  --paper:#FCFCFA;
  --band:#F5F4EF;
  --ink:#141412;
  --ink-2:#54544C;
  --ink-3:#8B8B81;
  --hairline:#E6E5DE;
  --hairline-dark:#D2D1C8;
  --accent:#157147;
  --accent-deep:#0F5A38;
  --accent-tint:#EAF2ED;
  --control:#3E76B4;
  --blue-tint:#E9F0F7;
  --amber:#B8862B;
  --amber-deep:#96690F;
  --amber-tint:#F8F1DF;
  --black:#121210;
  --black-2:#1A1A17;
  --dk-hair:#2B2B27;
  --dk-ink:#F2F1EC;
  --dk-ink2:#B9B8AE;
  --dk-ink3:#84837A;
  --green-lt:#8FD4AE;
  --serif:"Source Serif 4", Georgia, "Times New Roman", serif;
  --sans:"Inter", -apple-system, "Segoe UI", system-ui, sans-serif;
  --max:1220px;
}
*{margin:0; padding:0; box-sizing:border-box}
[hidden]{display:none !important}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} }
body{
  font-family:var(--sans); font-size:15.5px; line-height:1.68; color:var(--ink);
  background:var(--paper); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
::selection{background:#CFE6DA}
.wrap{max-width:var(--max); margin:0 auto; padding:0 30px}
.serif{font-family:var(--serif)}

/* ---------- type system ---------- */
.eyebrow{
  font-size:11px; font-weight:700; letter-spacing:.2em; text-transform:uppercase;
  color:var(--accent-deep); margin-bottom:22px; display:flex; align-items:center; gap:12px;
}
.eyebrow::before{content:""; width:26px; height:2px; background:var(--accent); flex:none}
.dark-sec .eyebrow, .plat .eyebrow{color:var(--green-lt)}
.section-title{
  font-family:var(--serif); font-weight:600; font-size:clamp(30px, 3.4vw, 44px);
  line-height:1.12; letter-spacing:-.01em; margin-bottom:18px; max-width:22ch;
}
.section-lede{font-size:17px; line-height:1.66; color:var(--ink-2); max-width:62ch; margin-bottom:8px}
.section-lede strong{color:var(--ink); font-weight:600}
.dark-sec .section-lede strong{color:var(--dk-ink)}
.sechead{display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,1fr); gap:26px 72px; align-items:end; margin-bottom:54px}
.sechead .section-title{margin-bottom:0}
.sechead .section-lede{margin-bottom:4px}
section{padding:110px 0}
.pg-first{padding-top:158px}

/* ---------- buttons & links ---------- */
.btn{
  display:inline-block; font-family:var(--sans); font-size:13.5px; font-weight:600;
  letter-spacing:.02em; padding:15px 30px; border:1px solid transparent; border-radius:2px;
  cursor:pointer; transition:background .18s, color .18s, border-color .18s;
}
.btn-primary{background:var(--accent); color:#fff}
.btn-primary:hover{background:var(--accent-deep)}
.btn-light{border-color:var(--hairline-dark); color:var(--ink); background:transparent}
.btn-light:hover{border-color:var(--ink)}
.dark-sec .btn-light, .cta-band .btn-light, .hero6 .btn-light{border-color:rgba(255,255,255,.38); color:#fff}
.dark-sec .btn-light:hover, .cta-band .btn-light:hover, .hero6 .btn-light:hover{border-color:#fff}
.btn-ghost{background:transparent; color:var(--ink-2); border-color:transparent}
.btn-ghost:hover{color:var(--ink)}
.tlink{
  display:inline-flex; align-items:center; gap:10px; font-size:13px; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; color:var(--ink);
}
.tlink .arr{transition:transform .2s}
.tlink:hover .arr{transform:translateX(5px)}
.tlink.on-dark{color:#fff}
.why-more a{font-weight:600; color:var(--accent-deep); border-bottom:1px solid var(--hairline-dark); padding-bottom:2px}
.why-more a:hover{border-color:var(--accent-deep)}
.dark-sec .why-more a{color:var(--green-lt); border-color:var(--dk-hair)}

/* ---------- illustrative tag ---------- */
.mock-tag{
  font-size:9.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-3); border:1px solid var(--hairline-dark); padding:4px 9px; border-radius:2px; white-space:nowrap;
}
.plat .mock-tag, .dark-sec .mock-tag{color:var(--dk-ink3); border-color:var(--dk-hair)}

/* ---------- nav ---------- */
nav#nav{
  position:fixed; top:0; left:0; right:0; z-index:60;
  background:transparent; transition:background .25s, border-color .25s, box-shadow .25s;
  border-bottom:1px solid transparent;
}
nav#nav.scrolled:not(.on-dark){background:var(--paper); border-bottom-color:var(--hairline)}
.nav-inner{max-width:var(--max); margin:0 auto; padding:0 30px; height:78px; display:flex; align-items:center; gap:44px}
.brand{display:flex; align-items:baseline; gap:14px; margin-right:auto}
.brand .mono{font-family:var(--serif); font-weight:600; font-size:24px; letter-spacing:.01em; color:var(--ink)}
.brand .name{font-size:10px; font-weight:700; letter-spacing:.22em; text-transform:uppercase; color:var(--ink-3); padding-left:14px; border-left:1px solid var(--hairline-dark)}
.nav-links{display:flex; align-items:center; gap:34px; list-style:none}
.nav-links a{font-size:13.5px; font-weight:500; color:var(--ink-2); padding:6px 0; border-bottom:2px solid transparent; transition:color .15s, border-color .15s}
.nav-links a:hover{color:var(--ink)}
.nav-links a.active{color:var(--ink); border-bottom-color:var(--accent)}
.nav-cta{background:transparent !important; border:1px solid var(--hairline-dark); border-radius:2px; padding:10px 20px !important; font-weight:600; color:var(--ink) !important}
.nav-cta:hover{border-color:var(--ink); background:transparent}
.menu-btn{display:none; font-family:var(--sans); font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; background:none; border:1px solid var(--hairline-dark); border-radius:2px; padding:9px 16px; cursor:pointer; color:var(--ink)}
/* over the dark hero */
nav#nav.on-dark .brand .mono{color:#fff}
nav#nav.on-dark .brand .name{color:rgba(255,255,255,.55); border-left-color:rgba(255,255,255,.25)}
nav#nav.on-dark .nav-links a{color:rgba(255,255,255,.75)}
nav#nav.on-dark .nav-links a:hover{color:#fff}
nav#nav.on-dark .nav-links a.active{color:#fff}
nav#nav.on-dark .nav-cta{border-color:rgba(255,255,255,.38); color:#fff !important}
nav#nav.on-dark .nav-cta:hover{border-color:#fff}
nav#nav.on-dark .menu-btn{color:#fff; border-color:rgba(255,255,255,.38)}

/* ---------- page transitions ---------- */
.page{display:none}
.page.active{display:block}
@keyframes pg-fwd{from{opacity:0; transform:translateX(26px)} to{opacity:1; transform:none}}
@keyframes pg-back{from{opacity:0; transform:translateX(-26px)} to{opacity:1; transform:none}}
.page.enter-fwd{animation:pg-fwd .4s ease both}
.page.enter-back{animation:pg-back .4s ease both}

/* ---------- reveal ---------- */
.reveal{opacity:0; transform:translateY(16px); transition:opacity .7s ease, transform .7s ease}
.reveal.in{opacity:1; transform:none}
@media (prefers-reduced-motion: reduce){ .reveal{opacity:1; transform:none; transition:none} }

/* ============================================================
   HERO · rotating cinematic scenes
   ============================================================ */
.hero6{position:relative; min-height:100vh; min-height:100svh; background:var(--black); color:#fff; display:flex; flex-direction:column; overflow:hidden}
.h6-scene{position:absolute; inset:0; opacity:0; transition:opacity 1.6s ease; z-index:0}
.h6-scene.on{opacity:1}
.h6-scene img{width:100%; height:100%; object-fit:cover}
@keyframes kenburns{from{transform:scale(1.0)} to{transform:scale(1.07)}}
.h6-scene.on img{animation:kenburns 9s ease-out forwards}
@media (prefers-reduced-motion: reduce){ .h6-scene.on img{animation:none} .h6-scene{transition:none} }
.h6-scrim{position:absolute; inset:0; z-index:1;
  background:linear-gradient(88deg, rgba(10,10,8,.9) 0%, rgba(10,10,8,.72) 46%, rgba(10,10,8,.34) 78%, rgba(10,10,8,.22) 100%);}
.h6-scrim::after{content:""; position:absolute; inset:auto 0 0 0; height:220px;
  background:linear-gradient(180deg, rgba(10,10,8,0), rgba(10,10,8,.72))}
.h6-copy{position:relative; z-index:2; max-width:var(--max); width:100%; margin:auto auto 0; padding:170px 30px 60px}
.h6-kicker{font-size:11.5px; font-weight:700; letter-spacing:.22em; text-transform:uppercase; color:rgba(255,255,255,.66); margin-bottom:26px; display:flex; align-items:center; gap:12px}
.h6-kicker::before{content:""; width:26px; height:2px; background:var(--green-lt)}
.hero6 h1{
  font-family:var(--serif); font-weight:600; font-size:clamp(40px, 5.1vw, 68px);
  line-height:1.06; letter-spacing:-.012em; max-width:24ch; margin-bottom:26px;
}
.hero6 h1 em{font-style:normal; color:var(--green-lt)}
.hero6 .sub{font-size:17.5px; line-height:1.6; color:rgba(255,255,255,.82); max-width:52ch; margin-bottom:38px}
.hero6 .sub strong{color:#fff; font-weight:600}
.hero-ctas{display:flex; gap:16px; align-items:center; flex-wrap:wrap}
/* scene tabs */
.h6-tabs{position:relative; z-index:2; max-width:var(--max); width:100%; margin:0 auto; padding:0 30px 34px; display:flex; gap:44px}
.h6-tab{background:none; border:none; cursor:pointer; text-align:left; padding:14px 0 0; position:relative; color:rgba(255,255,255,.68); font-family:var(--sans); flex:1; max-width:200px}
.h6-tab .tt{display:block; font-size:12.5px; font-weight:600; letter-spacing:.06em; transition:color .3s}
.h6-tab .bar{position:absolute; top:0; left:0; right:0; height:2px; background:rgba(255,255,255,.22)}
.h6-tab .bar i{display:block; height:100%; width:0; background:#fff}
.h6-tab.on{color:#fff}
.h6-tab.on .bar i{animation:tabfill var(--h6dur, 7.5s) linear forwards}
@keyframes tabfill{from{width:0} to{width:100%}}
@media (prefers-reduced-motion: reduce){ .h6-tab.on .bar i{animation:none; width:100%} }
.h6-scroll{position:absolute; right:34px; bottom:36px; z-index:2; font-size:10.5px; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:rgba(255,255,255,.5); writing-mode:vertical-rl}

/* ============================================================
   INTRO STATEMENT
   ============================================================ */
.intro-sec{padding:120px 0 104px}
.intro-grid{display:grid; grid-template-columns:minmax(0,7fr) minmax(0,4fr); gap:40px 90px; align-items:start}
.intro-stmt{font-family:var(--serif); font-weight:500; font-size:clamp(24px, 2.5vw, 33px); line-height:1.38; letter-spacing:-.005em}
.intro-stmt strong{font-weight:600; color:var(--accent-deep)}
.intro-side{border-top:2px solid var(--ink); padding-top:22px}
.intro-side p{font-size:14.5px; color:var(--ink-2); margin-bottom:16px}
.intro-side .tlink{font-size:12px}

/* ============================================================
   PROBLEM · map + store ledger
   ============================================================ */
.prob-grid{display:flex; flex-direction:column; gap:46px}
.prob-low{display:grid; grid-template-columns:minmax(0,7fr) minmax(0,4fr); gap:40px 90px; align-items:start}
.bigmap{border:1px solid var(--hairline); background:#fff}
.bigmap svg{display:block; width:100%; height:auto}
.map-cards{display:flex; flex-direction:column}
.map-card{display:grid; grid-template-columns:86px 130px 1fr; gap:18px; align-items:baseline; padding:20px 2px; border-top:1px solid var(--hairline); transition:background .2s; cursor:default}
.map-card:last-child{border-bottom:1px solid var(--hairline)}
.map-card .st{font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3)}
.map-card h3{font-family:var(--serif); font-size:19px; font-weight:600; position:relative; padding-left:16px}
.map-card h3::before{content:""; position:absolute; left:0; top:50%; transform:translateY(-50%); width:7px; height:7px; border-radius:50%}
.map-card.g h3::before{background:var(--accent)}
.map-card.b h3::before{background:var(--control)}
.map-card.a h3::before{background:var(--amber)}
.map-card.n h3::before{background:var(--ink-3)}
.map-card p{font-size:14.5px; color:var(--ink-2)}
.map-card.on{background:var(--band)}
.prob-note{font-size:15px; color:var(--ink-2); border-top:2px solid var(--ink); padding-top:20px}
.prob-note strong{color:var(--ink)}

/* ============================================================
   PLATFORM DEMO · full-bleed dark product section
   ============================================================ */
.plat{background:var(--black); color:var(--dk-ink); padding:120px 0}
.plat .section-title{color:#fff}
.plat .section-lede{color:var(--dk-ink2)}
.plat-head{display:flex; align-items:flex-end; justify-content:space-between; gap:18px 30px; margin-bottom:20px; flex-wrap:wrap}
.pd-frame{border:1px solid var(--dk-hair); background:var(--black-2); border-radius:4px; overflow:hidden; margin-top:44px}
.pd-top{display:flex; align-items:center; justify-content:space-between; gap:18px; padding:15px 24px; border-bottom:1px solid var(--dk-hair); background:#161613}
.pd-crumb{font-size:12.5px; color:var(--dk-ink3); letter-spacing:.02em}
.pd-crumb b{color:var(--dk-ink); font-weight:600}
.pd-crumb .sep{margin:0 8px; opacity:.5}
.pd-kpis{display:grid; grid-template-columns:repeat(4,1fr); border-bottom:1px solid var(--dk-hair)}
.pd-kpi{padding:22px 24px; border-right:1px solid var(--dk-hair)}
.pd-kpi:last-child{border-right:none}
.pd-kpi .k{display:block; font-size:10.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--dk-ink3); margin-bottom:6px}
.pd-kpi b{font-family:var(--serif); font-size:27px; font-weight:600; color:#fff}
.pd-kpi b.pos{color:var(--green-lt)}
.pd-kpi b small{font-size:14px; color:var(--dk-ink2); font-weight:400}
.pd-body{display:grid; grid-template-columns:minmax(0,2fr) minmax(0,3fr)}
.pd-list{border-right:1px solid var(--dk-hair)}
.pd-lh{padding:14px 24px 10px; font-size:10.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--dk-ink3)}
.pd-row{display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) 74px; align-items:center; gap:14px; width:100%; text-align:left; background:none; border:none; border-top:1px solid var(--dk-hair); padding:15px 24px; cursor:pointer; font-family:var(--sans); color:var(--dk-ink2); transition:background .18s}
.pd-row:hover{background:#20201C}
.pd-row.sel{background:#20201C; box-shadow:inset 3px 0 0 var(--accent)}
.pd-row .nm{font-size:13.5px; font-weight:600; color:var(--dk-ink)}
.pd-row .nm small{display:block; font-weight:400; font-size:11.5px; color:var(--dk-ink3); margin-top:1px}
.pd-row .bar{height:3px; background:#33332D; border-radius:2px; overflow:hidden}
.pd-row .bar i{display:block; height:100%; background:var(--green-lt); border-radius:2px}
.pd-row .val{font-size:13px; font-weight:600; color:var(--green-lt); text-align:right; font-variant-numeric:tabular-nums}
.pd-detail{padding:26px 30px 30px; min-height:340px}
.pd-dh{display:flex; align-items:baseline; justify-content:space-between; gap:14px; margin-bottom:20px}
.pd-dh .t{font-family:var(--serif); font-size:21px; font-weight:600; color:#fff}
.pd-dh .s{font-size:11px; font-weight:700; letter-spacing:.13em; text-transform:uppercase; color:var(--dk-ink3)}
.pd-dkpis{display:grid; grid-template-columns:repeat(4,1fr); gap:0 22px; padding:18px 0; border-top:1px solid var(--dk-hair); border-bottom:1px solid var(--dk-hair); margin-bottom:22px}
.pd-dkpi .k{display:block; font-size:10px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--dk-ink3); margin-bottom:5px}
.pd-dkpi b{font-size:17px; font-weight:600; color:var(--dk-ink); font-variant-numeric:tabular-nums}
.pd-dkpi b.pos{color:var(--green-lt)}
.pd-rec{border-left:2px solid var(--accent); background:rgba(21,113,71,.12); padding:15px 19px; border-radius:0 3px 3px 0; margin-bottom:16px}
.pd-rec.test{border-left-color:var(--control); background:rgba(62,118,180,.12)}
.pd-rec.watch{border-left-color:var(--amber); background:rgba(184,134,43,.1)}
.pd-rec .ak{display:block; font-size:10px; font-weight:700; letter-spacing:.13em; text-transform:uppercase; color:var(--dk-ink3); margin-bottom:5px}
.pd-rec .av{font-size:15px; font-weight:600; color:#fff; line-height:1.45}
.pd-why{font-size:13.5px; line-height:1.6; color:var(--dk-ink2)}
.pd-why b{color:var(--dk-ink)}
.pd-fade{opacity:0; transform:translateY(6px)}
.pd-anim{transition:opacity .28s ease, transform .28s ease}
.plat-foot{display:flex; justify-content:space-between; align-items:center; gap:20px; margin-top:26px; font-size:13.5px; color:var(--dk-ink3)}
.plat-foot a{color:var(--green-lt); font-weight:600; border-bottom:1px solid var(--dk-hair); padding-bottom:2px}
.plat-foot a:hover{border-color:var(--green-lt)}

/* ============================================================
   SIX MODULES · numbered editorial index
   ============================================================ */
.modx{display:grid; grid-template-columns:1fr 1fr; column-gap:90px; border-top:1px solid var(--hairline)}
.mod{display:grid; grid-template-columns:56px 1fr 150px; gap:20px; align-items:center; padding:26px 0; border-bottom:1px solid var(--hairline)}
.mod .no{font-family:var(--serif); font-size:15px; color:var(--ink-3)}
.mod h3{font-family:var(--serif); font-size:21px; font-weight:600; margin-bottom:4px}
.mod p{font-size:13.5px; color:var(--ink-2); line-height:1.5}
.mod svg{width:100%; height:auto; opacity:.9}

/* ============================================================
   OBJECTIVES · split interactive
   ============================================================ */
.gl-grid{display:grid; grid-template-columns:minmax(0,5fr) minmax(0,6fr); gap:50px 90px; align-items:center}
.objpanel{border:1px solid var(--hairline-dark); background:#fff; border-radius:4px; overflow:hidden}
.op-head{display:flex; align-items:center; justify-content:space-between; gap:14px; padding:15px 22px; border-bottom:1px solid var(--hairline); background:var(--band)}
.op-title{font-weight:600; font-size:14px}
.op-sub{font-size:11.5px; color:var(--ink-3); margin-right:auto; margin-left:4px}
.op-body{padding:24px 24px 20px}
.op-presets{display:flex; align-items:center; gap:10px; margin-bottom:24px}
.op-lbl{font-size:10.5px; font-weight:700; letter-spacing:.13em; text-transform:uppercase; color:var(--ink-3); margin-right:8px}
.op-preset{font-family:var(--sans); font-size:13px; font-weight:600; padding:9px 20px; background:none; border:1px solid var(--hairline-dark); border-radius:2px; cursor:pointer; color:var(--ink-2); transition:all .18s}
.op-preset:hover{border-color:var(--ink)}
.op-preset.on{background:var(--ink); border-color:var(--ink); color:#fff}
.op-bars{display:flex; flex-direction:column; gap:14px; margin-bottom:20px}
.op-bar{display:grid; grid-template-columns:64px 1fr 48px; gap:16px; align-items:center}
.ob-name{font-size:13px; font-weight:600}
.ob-track{height:8px; background:var(--band); border-radius:2px; overflow:hidden}
.ob-track i{display:block; height:100%; border-radius:2px; transition:width .6s cubic-bezier(.2,.7,.2,1)}
.ob-track i.g{background:var(--accent)}
.ob-track i.b{background:var(--control)}
.ob-track i.a{background:var(--amber)}
.op-bar b{font-size:13px; font-variant-numeric:tabular-nums; text-align:right}
.op-note{font-size:13.5px; line-height:1.6; color:var(--ink-2); border-top:1px solid var(--hairline); padding-top:16px; min-height:66px}
.op-note b{color:var(--ink)}

/* ============================================================
   PROCESS STRIP (home) · plain flow
   ============================================================ */
.proc{display:flex; align-items:stretch; gap:0; border-top:1px solid var(--hairline); border-bottom:1px solid var(--hairline); margin-top:48px}
.proc .st{flex:1; padding:30px 26px 30px 0; border-right:1px solid var(--hairline); margin-right:26px; position:relative}
.proc .st:last-child{border-right:none; margin-right:0; padding-right:0}
.proc .st .t{display:block; font-family:var(--serif); font-size:18px; font-weight:600; margin-bottom:5px}
.proc .st .s{font-size:13px; color:var(--ink-2); line-height:1.5}
.proc .st.hl .t{color:var(--accent-deep)}

/* ============================================================
   BIG NUMBERS (dark proof)
   ============================================================ */
.dark-sec{background:var(--black); color:var(--dk-ink)}
.dark-sec .section-title{color:#fff}
.dark-sec .section-lede{color:var(--dk-ink2)}
.bignum-row{display:grid; grid-template-columns:repeat(4,1fr); gap:0; border-top:1px solid var(--dk-hair); margin-top:52px}
.bignum{padding:34px 34px 6px 0; border-right:1px solid var(--dk-hair); margin-right:34px}
.bignum:last-child{border-right:none; margin-right:0}
.bignum b{font-family:var(--serif); font-weight:600; font-size:clamp(44px,4.6vw,64px); line-height:1; color:#fff; display:block; margin-bottom:14px}
.bignum b em{font-style:normal; font-size:.55em; color:var(--dk-ink2)}
.bignum p{font-size:13.5px; color:var(--dk-ink2); line-height:1.55}

/* ============================================================
   PHOTO BANDS
   ============================================================ */
.photo-state{position:relative; height:440px; overflow:hidden}
.photo-state img{width:100%; height:100%; object-fit:cover}
.photo-state .scrim{position:absolute; inset:0; background:linear-gradient(180deg, rgba(10,10,8,.28), rgba(10,10,8,.62))}
.photo-state .inner{position:absolute; inset:0; display:flex; align-items:flex-end}
.photo-state .inner .wrap{width:100%; padding-bottom:54px}
.photo-state h2{font-family:var(--serif); font-weight:600; font-size:clamp(28px,3.4vw,44px); color:#fff; max-width:20ch; line-height:1.12}
.photo-band{position:relative; height:400px; overflow:hidden}
.photo-band img{width:100%; height:100%; object-fit:cover}
.photo-band .cap{position:absolute; left:0; right:0; bottom:0; background:linear-gradient(180deg, rgba(10,10,8,0), rgba(10,10,8,.7)); padding:70px 0 30px}
.photo-band .cap p{max-width:var(--max); margin:0 auto; padding:0 30px; color:rgba(255,255,255,.92); font-size:15.5px; max-width:60ch}
.cta-band{position:relative; overflow:hidden; background:var(--black)}
.cta-band .bgimg{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.5}
.cta-band .scrim{position:absolute; inset:0; background:linear-gradient(88deg, rgba(10,10,8,.9), rgba(10,10,8,.55) 60%, rgba(10,10,8,.35))}
.cta-band .inner{position:relative; padding:120px 0}
.cta-band h2{font-family:var(--serif); font-weight:600; font-size:clamp(30px,3.6vw,48px); line-height:1.1; color:#fff; max-width:19ch; margin-bottom:18px}
.cta-band .sub{font-size:16.5px; color:rgba(255,255,255,.8); margin-bottom:34px; max-width:50ch}
.zoom-sec{display:none}

/* ============================================================
   PAGER
   ============================================================ */
.pager{display:flex; align-items:center; justify-content:space-between; gap:20px; padding-top:34px; padding-bottom:44px; border-top:1px solid var(--hairline); margin-top:12px}
.pager-no{font-size:11.5px; letter-spacing:.16em; color:var(--ink-3); font-weight:600}
.pager-link{display:flex; flex-direction:column; gap:2px}
.pager-link.next{text-align:right}
.pager-k{font-size:10.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3)}
.pager-t{font-family:var(--serif); font-size:17px; font-weight:600; color:var(--ink)}
.pager-link:hover .pager-t{color:var(--accent-deep)}
.dark-pager{background:var(--black)}
.dark-pager .pager{border-top-color:var(--dk-hair)}
.dark-pager .pager-t{color:var(--dk-ink)}
.dark-pager .pager-no,.dark-pager .pager-k{color:var(--dk-ink3)}
.dark-pager .pager-link:hover .pager-t{color:var(--green-lt)}

/* ============================================================
   WHAT WE DO
   ============================================================ */
.goalquotes{display:grid; grid-template-columns:1fr 1fr; column-gap:90px; border-top:1px solid var(--hairline); margin-top:44px}
.gq{padding:24px 0; border-bottom:1px solid var(--hairline)}
.gq p{font-family:var(--serif); font-size:19px; font-weight:500; line-height:1.4; margin-bottom:7px}
.gq .who{font-size:11px; font-weight:700; letter-spacing:.13em; text-transform:uppercase; color:var(--accent-deep)}
.value-grid{display:grid; grid-template-columns:1fr 1fr; border:1px solid var(--hairline); margin-top:44px; background:#fff}
.vcard{padding:38px 42px}
.vcard.old{border-right:1px solid var(--hairline); background:var(--band)}
.v-tag{display:block; font-size:11px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; margin-bottom:22px; color:var(--ink-3)}
.vcard.new .v-tag{color:var(--accent-deep)}
.v-list{list-style:none}
.v-list li{padding:12px 0 12px 24px; border-top:1px solid var(--hairline); font-size:14.5px; color:var(--ink-2); position:relative; line-height:1.55}
.v-list li::before{content:""; position:absolute; left:2px; top:21px; width:6px; height:6px; border-radius:50%; background:var(--hairline-dark)}
.vcard.new .v-list li::before{background:var(--accent)}
.vcard.new .v-list li{color:var(--ink)}
.v-list li b{font-weight:600; color:var(--ink)}
.v-body{font-size:14.5px; color:var(--ink-2); margin-top:18px; line-height:1.6}
.v-body b{color:var(--ink)}
.v-chips{display:flex; flex-wrap:wrap; gap:0 18px; margin-bottom:20px}
.v-chip{font-size:12.5px; font-weight:600; color:var(--ink-2); padding:7px 0; border-bottom:2px solid var(--accent-tint)}
.v-price{font-family:var(--serif); font-size:34px; font-weight:600; color:var(--accent-deep); margin:8px 0 4px}
.v-price small{font-family:var(--sans); font-size:13px; color:var(--ink-3); font-weight:400}
.value-foot{margin-top:40px; border-top:2px solid var(--ink); padding-top:22px; max-width:64ch}
.value-foot p{font-family:var(--serif); font-size:21px; line-height:1.45}
.value-foot strong{color:var(--accent-deep); font-weight:600}
.wgrid{display:grid; grid-template-columns:repeat(3,1fr); column-gap:70px; border-top:1px solid var(--hairline); margin-top:44px}
.wcard{padding:30px 0; border-bottom:1px solid var(--hairline)}
.wtag{display:inline-block; font-size:10.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; margin-bottom:14px; padding-bottom:6px; border-bottom:2px solid var(--hairline-dark)}
.wcard.g .wtag{border-color:var(--accent); color:var(--accent-deep)}
.wcard.b .wtag{border-color:var(--control); color:var(--control)}
.wcard.a .wtag{border-color:var(--amber); color:var(--amber-deep)}
.wcard h3{font-family:var(--serif); font-size:22px; font-weight:600; margin-bottom:10px}
.wcard p{font-size:14px; color:var(--ink-2); line-height:1.6}
.collab-grid{margin-top:20px}
.mix-steps{list-style:none; max-width:760px}
.mix-steps li{display:grid; grid-template-columns:60px 1fr; gap:22px; padding:24px 0; border-bottom:1px solid var(--hairline)}
.mix-steps .pn{font-family:var(--serif); font-size:26px; font-weight:600; color:var(--ink-3)}
.mix-steps h3{font-family:var(--serif); font-size:20px; font-weight:600; margin-bottom:5px}
.mix-steps p{font-size:14.5px; color:var(--ink-2)}
.collab-note{margin-top:28px; font-size:15.5px; color:var(--ink-2)}
.collab-note strong{color:var(--ink)}
.lever-cols{display:grid; grid-template-columns:repeat(3,1fr); column-gap:64px; margin-top:48px}
.obj-card{padding-top:26px; border-top:3px solid var(--hairline-dark)}
.obj-card.g{border-top-color:var(--accent)}
.obj-card.b{border-top-color:var(--control)}
.obj-card.a{border-top-color:var(--amber)}
.obj-card h3{font-family:var(--serif); font-size:24px; font-weight:600; margin-bottom:12px}
.obj-card .define{font-size:14.5px; color:var(--ink-2); margin-bottom:16px; line-height:1.6}
.obj-card .when{font-size:14px; color:var(--ink-2); margin-bottom:18px; line-height:1.6}
.obj-card .when b{display:block; font-size:10.5px; font-weight:700; letter-spacing:.13em; text-transform:uppercase; color:var(--ink-3); margin-bottom:3px}
.obj-card .when strong{font-family:var(--serif); font-size:19px; color:var(--ink)}
.acts-label{font-size:10.5px; font-weight:700; letter-spacing:.13em; text-transform:uppercase; color:var(--ink-3); margin-bottom:8px}
.obj-card ul{list-style:none}
.obj-card ul li{font-size:13.5px; color:var(--ink-2); padding:9px 0 9px 18px; border-top:1px solid var(--hairline); position:relative; line-height:1.55}
.obj-card ul li::before{content:""; position:absolute; left:0; top:17px; width:6px; height:2px; background:var(--hairline-dark)}
.obj-statement{margin-top:52px; border-left:3px solid var(--accent); padding:6px 0 6px 28px; max-width:70ch}
.obj-statement p{font-family:var(--serif); font-size:20px; line-height:1.5}
.obj-statement strong{color:var(--accent-deep); font-weight:600}
.objectives-foot p{font-family:var(--serif); font-size:20px}
.objectives-foot strong{color:var(--accent-deep)}

/* ============================================================
   HOW IT WORKS
   ============================================================ */
.howsteps-grid{display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:50px 80px; align-items:start; margin-top:14px}
.bigsteps{display:flex; flex-direction:column}
.bigstep{display:grid; grid-template-columns:96px 1fr; gap:26px; padding:30px 0; border-bottom:1px solid var(--hairline)}
.bigstep:first-child{border-top:1px solid var(--hairline)}
.bs-no{font-family:var(--serif); font-size:34px; font-weight:600; color:var(--ink-3); line-height:1}
.bs-no small{display:block; font-family:var(--sans); font-size:10px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--accent-deep); margin-top:8px}
.bigstep h3{font-family:var(--serif); font-size:21px; font-weight:600; margin-bottom:7px}
.bigstep p{font-size:14.5px; color:var(--ink-2); line-height:1.62}
.figure{position:relative}
.figure img{width:100%; height:auto; display:block}
.intel-band{background:var(--band); border-top:1px solid var(--hairline); border-bottom:1px solid var(--hairline)}
.intel-chips{display:flex; flex-wrap:wrap; gap:10px 26px; margin:38px 0 44px; max-width:900px}
.ichip{font-size:13px; font-weight:600; color:var(--ink-2); padding-bottom:5px; border-bottom:2px solid var(--hairline-dark)}
.intel-pipe{display:flex; align-items:stretch; gap:16px}
.ip-box{flex:1; border-top:2px solid var(--hairline-dark); padding-top:14px}
.ip-box.hl{border-top-color:var(--accent)}
.ip-box .t{display:block; font-weight:600; font-size:14px; margin-bottom:5px}
.ip-box.hl .t{color:var(--accent-deep)}
.ip-box p{font-size:12.5px; color:var(--ink-2); line-height:1.5}
.ip-arr{align-self:flex-start; padding-top:12px; color:var(--ink-3); font-size:15px}
.principles{display:grid; grid-template-columns:1fr 1fr; gap:0 90px; border-top:1px solid var(--dk-hair); margin-top:48px}
.principle{display:grid; grid-template-columns:52px 1fr; gap:6px 18px; padding:30px 0; border-bottom:1px solid var(--dk-hair)}
.principle .p-no{grid-row:1 / span 2}
.principle p{grid-column:2}
.p-no{font-family:var(--serif); font-size:21px; color:var(--dk-ink3)}
.principle h3{font-family:var(--serif); font-size:20px; font-weight:600; color:#fff; margin-bottom:7px}
.principle p{font-size:14px; color:var(--dk-ink2); line-height:1.6}
.principle strong{color:var(--dk-ink); font-weight:600}
.engine{background:var(--band); border-top:1px solid var(--hairline); border-bottom:1px solid var(--hairline)}
.models{border:1px solid var(--hairline-dark); background:#fff; border-radius:3px; margin-top:30px}
.models summary{cursor:pointer; padding:20px 26px; font-weight:600; font-size:15px; list-style:none; display:flex; align-items:center; justify-content:space-between}
.models summary::after{content:"+"; font-family:var(--serif); font-size:22px; color:var(--ink-3)}
.models[open] summary::after{content:"−"}
.models summary::-webkit-details-marker{display:none}
.models-body{padding:6px 26px 30px; border-top:1px solid var(--hairline)}
.models-open-note{font-size:12.5px; color:var(--ink-3); margin:14px 0 18px}
.models-grid{display:grid; grid-template-columns:minmax(0,3fr) minmax(0,2fr); gap:30px 50px; align-items:start}
.layer-list{list-style:none}
.layer-list li{display:grid; grid-template-columns:34px 1fr; gap:12px; padding:11px 0; border-bottom:1px solid var(--hairline); font-size:14px; color:var(--ink-2); line-height:1.55}
.layer-list .ln{font-family:var(--serif); font-weight:600; color:var(--accent-deep)}
.layer-list b{color:var(--ink)}
.models-note{margin-top:18px; font-size:13.5px; color:var(--ink-2); line-height:1.6}
.models-note strong{color:var(--ink)}
.models-fig figcaption{font-size:12px; color:var(--ink-3); margin-top:10px}
.fly-grid{display:grid; grid-template-columns:minmax(0,6fr) minmax(0,5fr); gap:50px 90px; align-items:center; margin-top:10px}
.fly-points{list-style:none; margin-top:26px}
.fly-points li{padding:16px 0; border-top:1px solid var(--dk-hair); font-size:14.5px; color:var(--dk-ink2); line-height:1.6}
.fly-points strong{color:var(--dk-ink); font-weight:600}
.fly-art{width:100%; max-width:440px; height:auto; justify-self:center}

/* ============================================================
   INSIGHTS
   ============================================================ */
.rec-pair{display:grid; grid-template-columns:1fr 1fr; gap:34px; margin-top:48px}
.rec-card{border:1px solid var(--hairline-dark); background:#fff; border-radius:3px}
.rc-head{display:flex; align-items:center; gap:12px; padding:16px 24px; border-bottom:1px solid var(--hairline)}
.rc-loc{font-family:var(--serif); font-size:19px; font-weight:600; margin-right:auto}
.rc-kind{font-size:10.5px; font-weight:700; letter-spacing:.13em; text-transform:uppercase; padding-bottom:3px; border-bottom:2px solid}
.rc-kind.g{color:var(--accent-deep); border-color:var(--accent)}
.rc-kind.b{color:var(--control); border-color:var(--control)}
.rc-body{padding:22px 24px 24px}
.rc-facts{display:grid; grid-template-columns:1fr 1fr; gap:14px 20px; margin-bottom:20px}
.rc-fact .fk{display:block; font-size:10px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3); margin-bottom:3px}
.rc-fact .fv{font-size:15px; font-weight:600; color:var(--ink); font-variant-numeric:tabular-nums}
.rc-fact .fv.pos{color:var(--accent-deep)}
.rc-fact .fv.low{color:var(--ink-2)}
.rc-action{border-left:2px solid var(--accent); background:var(--accent-tint); padding:13px 17px; border-radius:0 3px 3px 0; margin-bottom:16px}
.rc-action.b{border-left-color:var(--control); background:var(--blue-tint)}
.rc-action .ak{display:block; font-size:10px; font-weight:700; letter-spacing:.13em; text-transform:uppercase; color:var(--ink-3); margin-bottom:4px}
.rc-action .av{font-size:15px; font-weight:600; line-height:1.45}
.rc-why{font-size:13.5px; color:var(--ink-2); line-height:1.62; border-top:1px solid var(--hairline); padding-top:14px}
.rc-why b{color:var(--ink)}
.rec-contrast{margin-top:30px; font-size:15.5px; color:var(--ink-2); max-width:66ch}
.rec-contrast strong{color:var(--ink)}
.artifacts{display:grid; grid-template-columns:1fr 1fr; gap:34px; margin-top:48px}
.acard{border:1px solid var(--hairline-dark); background:#fff; border-radius:3px; padding:26px 28px; min-width:0}
.acard.full{grid-column:1/-1}
.tag{display:inline-block; font-size:10px; font-weight:700; letter-spacing:.13em; text-transform:uppercase; padding-bottom:4px; border-bottom:2px solid; margin-bottom:16px}
.tag-action{color:var(--accent-deep); border-color:var(--accent)}
.tag-exp{color:var(--control); border-color:var(--control)}
.acard h4{font-family:var(--serif); font-size:19px; font-weight:600; margin-bottom:6px}
.acard .meta{font-size:12px; color:var(--ink-3); margin-bottom:14px}
.acard .impact{font-family:var(--serif); font-size:29px; font-weight:600; color:var(--accent-deep); margin-bottom:12px}
.acard .impact small{font-family:var(--sans); font-size:12.5px; color:var(--ink-3); font-weight:400}
.acard .why{font-size:13.5px; color:var(--ink-2); line-height:1.6}
.chart-head{display:flex; align-items:baseline; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:4px}
.legend{display:flex; gap:22px}
.legend .key{display:flex; align-items:center; gap:7px; font-size:12px; color:var(--ink-2)}
.legend .key i{width:16px; height:2.5px; display:inline-block}
.legend .dotk{width:7px; height:7px; border-radius:50%; display:inline-block; margin-left:-14px}
.chart-sub{font-size:12px; color:var(--ink-3); margin-bottom:16px}
.chart-box{position:relative; overflow-x:auto}
.chart-box svg{min-width:640px; width:100%; height:auto; display:block}
.tooltip{position:absolute; background:var(--ink); color:#fff; font-size:12px; padding:7px 11px; border-radius:3px; pointer-events:none; opacity:0; transition:opacity .15s; white-space:nowrap; z-index:5}
.artifact-note{grid-column:1/-1; font-size:12.5px; color:var(--ink-3)}

/* ============================================================
   ABOUT
   ============================================================ */
.about-grid{display:grid; grid-template-columns:minmax(0,6fr) minmax(0,5fr); gap:50px 90px; align-items:start; margin-top:14px}
.about-story p{font-size:15.5px; color:var(--ink-2); line-height:1.75; margin-bottom:20px}
.about-story strong{color:var(--ink); font-weight:600}
.founders2{display:grid; grid-template-columns:1fr 1fr; gap:26px}
.fcard img{width:100%; height:auto; filter:saturate(.92)}
.fcard h3{font-family:var(--serif); font-size:19px; font-weight:600; margin-top:16px}
.fcard .role{font-size:11px; font-weight:700; letter-spacing:.13em; text-transform:uppercase; color:var(--accent-deep); margin:3px 0 2px}
.fcard .school{font-size:12.5px; color:var(--ink-3); margin-bottom:8px}
.fcard .li{font-size:12.5px; font-weight:600; color:var(--ink-2); border-bottom:1px solid var(--hairline-dark); padding-bottom:2px}
.fcard .li:hover{color:var(--ink); border-color:var(--ink)}
.name-origin{background:var(--black); color:var(--dk-ink); padding:110px 0}
.orig-word{font-family:var(--serif); font-size:clamp(52px,7vw,96px); font-weight:600; color:#fff; display:block; line-height:1; margin-bottom:10px}
.orig-def{font-size:12px; font-weight:700; letter-spacing:.22em; text-transform:uppercase; color:var(--green-lt); margin-bottom:28px}
.orig-note{font-size:16px; line-height:1.7; color:var(--dk-ink2); max-width:62ch}
.orig-note strong{color:#fff; font-weight:600}

/* ============================================================
   CONTACT
   ============================================================ */
.audit-grid{display:grid; grid-template-columns:minmax(0,6fr) minmax(0,5fr); gap:44px 90px; margin-top:40px; align-items:start}
.audit-list{list-style:none}
.audit-list li{display:grid; grid-template-columns:46px 1fr; gap:16px; padding:16px 0; border-top:1px solid var(--hairline); font-size:14.5px; color:var(--ink-2); line-height:1.6}
.audit-list .n{font-family:var(--serif); font-size:22px; font-weight:600; color:var(--ink-3)}
.audit-list b{color:var(--ink); font-weight:600}
.audit-aside{border-top:2px solid var(--ink); padding-top:22px}
.audit-aside h3{font-family:var(--serif); font-size:21px; font-weight:600; margin-bottom:12px}
.audit-aside p{font-size:14px; color:var(--ink-2); line-height:1.65; margin-bottom:14px}
.audit-aside .small{font-size:12.5px; color:var(--ink-3)}
.faq{max-width:820px; margin-top:40px}
.faq details{border-bottom:1px solid var(--hairline)}
.faq details:first-child{border-top:1px solid var(--hairline)}
.faq summary{cursor:pointer; padding:20px 30px 20px 0; font-family:var(--serif); font-weight:600; font-size:17.5px; list-style:none; position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; position:absolute; right:4px; top:50%; transform:translateY(-50%); font-family:var(--serif); font-size:22px; color:var(--ink-3)}
.faq details[open] summary::after{content:"−"}
.faq .a{padding:0 0 22px; font-size:14.5px; color:var(--ink-2); line-height:1.65; max-width:66ch}
.contact-grid{display:grid; grid-template-columns:minmax(0,7fr) minmax(0,4fr); gap:44px 80px; margin-top:44px; align-items:start}
form .row{display:grid; grid-template-columns:1fr 1fr; gap:18px}
.field{margin-bottom:18px; display:flex; flex-direction:column; gap:7px}
.field label{font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-2)}
.field input,.field select,.field textarea{
  font-family:var(--sans); font-size:14.5px; color:var(--ink); background:#fff;
  border:1px solid var(--hairline-dark); border-radius:2px; padding:13px 14px; width:100%;
}
.field textarea{min-height:110px; resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:none; border-color:var(--accent)}
.form-note{font-size:12.5px; color:var(--ink-3); margin:6px 0 20px}
.hp-field{position:absolute; left:-10000px; width:1px; height:1px; overflow:hidden}
.form-status{font-size:13.5px; margin-top:14px; color:var(--accent-deep)}
.book-card{border-top:2px solid var(--ink); padding-top:22px}
.book-card h3{font-family:var(--serif); font-size:21px; font-weight:600; margin-bottom:10px}
.book-card p{font-size:14px; color:var(--ink-2); line-height:1.6; margin-bottom:18px}
.book-card .or{font-size:11px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-3); margin:20px 0 14px}
.book-card .mail{font-weight:600; color:var(--accent-deep); border-bottom:1px solid var(--hairline-dark)}
.book-card .mail:hover{border-color:var(--accent-deep)}

/* ============================================================
   LEGAL
   ============================================================ */
.legal-wrap{max-width:820px}
.legal-toc{display:flex; gap:26px; margin:26px 0 44px; flex-wrap:wrap}
.legal-toc a{font-size:13px; font-weight:600; color:var(--ink-2); border-bottom:2px solid var(--hairline-dark); padding-bottom:4px}
.legal-toc a:hover{color:var(--ink); border-color:var(--accent)}
.legal-wrap h3{font-family:var(--serif); font-size:27px; font-weight:600; margin:54px 0 18px; padding-top:34px; border-top:1px solid var(--hairline)}
.legal-wrap h4{font-size:15px; font-weight:600; margin:24px 0 8px}
.legal-wrap p, .legal-wrap li{font-size:14.5px; color:var(--ink-2); line-height:1.7; margin-bottom:13px}
.legal-wrap b{color:var(--ink); font-weight:600}
.legal-wrap ul{padding-left:20px; margin-bottom:14px}
.legal-wrap a{color:var(--accent-deep); border-bottom:1px solid var(--hairline-dark)}
.legal-wrap table{width:100%; border-collapse:collapse; font-size:13px; margin:14px 0 20px}
.legal-wrap th,.legal-wrap td{text-align:left; padding:9px 12px; border:1px solid var(--hairline); color:var(--ink-2); vertical-align:top}
.legal-wrap th{background:var(--band); color:var(--ink); font-weight:600}

/* ============================================================
   FOOTER (dark)
   ============================================================ */
footer{background:var(--black); color:var(--dk-ink2); padding:84px 0 42px; border-top:1px solid var(--dk-hair)}
.foot-grid{display:grid; grid-template-columns:minmax(0,5fr) repeat(3, minmax(0,2.4fr)); gap:44px 60px; padding-bottom:54px; border-bottom:1px solid var(--dk-hair)}
.lockup .l3{font-family:var(--serif); font-size:30px; font-weight:600; color:#fff}
.lockup .bar{width:26px; height:2px; background:var(--accent); margin:12px 0}
.lockup .l2{font-size:10px; font-weight:700; letter-spacing:.22em; text-transform:uppercase; color:var(--dk-ink3)}
.fg-brand p{font-size:13.5px; line-height:1.65; color:var(--dk-ink3); margin-top:18px; max-width:34ch}
.fg-h{display:block; font-size:10.5px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--dk-ink3); margin-bottom:16px}
.fg-col a{display:block; font-size:13.5px; color:var(--dk-ink2); padding:5px 0; transition:color .15s}
.fg-col a:hover{color:#fff}
.foot-legal{display:flex; justify-content:space-between; gap:16px; padding-top:26px; font-size:12px; color:var(--dk-ink3)}

/* ============================================================
   CONSENT BANNER + PREFERENCES
   ============================================================ */
.cbanner{position:fixed; left:22px; bottom:22px; z-index:80; max-width:400px; background:#fff; border:1px solid var(--hairline-dark); border-radius:3px; padding:22px 24px; box-shadow:0 18px 50px -18px rgba(18,18,16,.28)}
.cbanner p{font-size:13px; line-height:1.6; color:var(--ink-2); margin-bottom:14px}
.cbanner b{color:var(--ink)}
.cbanner a{color:var(--accent-deep); border-bottom:1px solid var(--hairline-dark)}
.cb-actions{display:flex; gap:10px; margin-bottom:10px}
.cb-btn{padding:10px 20px; font-size:12.5px}
.cb-legal{font-size:11px !important; color:var(--ink-3) !important; margin-bottom:0 !important}
.cb-legal a{color:var(--ink-3); border-bottom:1px solid var(--hairline)}
.cpref-overlay{position:fixed; inset:0; z-index:90; background:rgba(18,18,16,.5); display:flex; align-items:center; justify-content:center; padding:22px}
.cpref{background:#fff; border-radius:4px; max-width:520px; width:100%; padding:30px 32px; max-height:90vh; overflow:auto}
.cpref-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:8px}
.cpref-head h3{font-family:var(--serif); font-size:22px; font-weight:600}
.cpref-x{background:none; border:none; font-size:26px; color:var(--ink-3); cursor:pointer; line-height:1}
.cpref-x:hover{color:var(--ink)}
.cpref-intro{font-size:13.5px; color:var(--ink-2); margin-bottom:18px}
.cpref-row{display:flex; align-items:center; justify-content:space-between; gap:18px; padding:15px 0; border-top:1px solid var(--hairline)}
.cpref-row b{font-size:14px}
.cpref-row p{font-size:12.5px; color:var(--ink-2); margin-top:3px; max-width:40ch}
.cpref-status{font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--accent-deep); white-space:nowrap}
.tgl{position:relative; display:inline-block; width:44px; height:24px; flex:none}
.tgl input{opacity:0; width:0; height:0}
.tgl i{position:absolute; inset:0; background:var(--hairline-dark); border-radius:24px; transition:background .2s; cursor:pointer}
.tgl i::before{content:""; position:absolute; left:3px; top:3px; width:18px; height:18px; background:#fff; border-radius:50%; transition:transform .2s}
.tgl input:checked + i{background:var(--accent)}
.tgl input:checked + i::before{transform:translateX(20px)}
.cpref-actions{display:flex; gap:10px; margin-top:20px}
.cpref-note{font-size:11.5px; color:var(--ink-3); margin-top:14px}
.cpref-note a{color:var(--accent-deep); border-bottom:1px solid var(--hairline)}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1080px){
  .sechead{grid-template-columns:1fr; align-items:start; gap:14px}
  .modx{grid-template-columns:1fr}
  .principles{grid-template-columns:1fr; gap:0}
  .goalquotes{grid-template-columns:1fr}
  .bignum-row{grid-template-columns:1fr 1fr; row-gap:0}
  .bignum{border-bottom:1px solid var(--dk-hair); padding-bottom:28px}
  .lever-cols{grid-template-columns:1fr; row-gap:44px}
  .wgrid{grid-template-columns:1fr}
  .pd-kpis{grid-template-columns:1fr 1fr}
  .pd-kpi:nth-child(2){border-right:none}
  .pd-kpi{border-bottom:1px solid var(--dk-hair)}
  .intro-grid,.prob-low,.gl-grid,.howsteps-grid,.models-grid,.fly-grid,.about-grid,.audit-grid,.contact-grid{grid-template-columns:1fr}
  .intro-side{max-width:56ch}
  .h6-tabs{gap:26px}
}
@media (max-width: 760px){
  section{padding:76px 0}
  .pg-first{padding-top:120px}
  .wrap{padding:0 22px}
  .nav-inner{padding:0 22px; height:66px}
  .brand .name{display:none}
  .nav-links{
    position:fixed; top:66px; left:0; right:0; background:var(--paper);
    flex-direction:column; align-items:flex-start; gap:0; padding:10px 22px 22px;
    border-bottom:1px solid var(--hairline); display:none;
  }
  .nav-links.open{display:flex}
  .nav-links li{width:100%}
  .nav-links a{display:block; padding:13px 0; font-size:16px; border-bottom:none}
  .nav-cta{margin-top:10px; text-align:center; width:100%}
  .menu-btn{display:block}
  nav#nav:has(.nav-links.open){background:var(--paper); border-bottom-color:var(--hairline)}
  nav#nav.on-dark:has(.nav-links.open) .brand .mono{color:var(--ink)}
  nav#nav.on-dark:has(.nav-links.open) .menu-btn{color:var(--ink); border-color:var(--hairline-dark)}
  nav#nav.on-dark:has(.nav-links.open) .nav-links a{color:var(--ink-2)}
  nav#nav.on-dark:has(.nav-links.open) .nav-cta{color:var(--ink) !important; border-color:var(--hairline-dark)}
  .hero6{min-height:100svh}
  .h6-copy{padding:130px 22px 40px}
  .hero6 .sub{font-size:16px}
  .h6-tabs{padding:0 22px 24px; gap:16px}
  .h6-tab .tt{font-size:10.5px; letter-spacing:.03em}
  .h6-scroll{display:none}
  .proc{flex-direction:column}
  .proc .st{border-right:none; border-bottom:1px solid var(--hairline); margin-right:0; padding:20px 0}
  .proc .st:last-child{border-bottom:none}
  .mod{grid-template-columns:44px 1fr; }
  .mod svg{display:none}
  .map-card{grid-template-columns:70px 1fr; grid-template-rows:auto auto}
  .map-card p{grid-column:2}
  .pd-body{grid-template-columns:1fr}
  .pd-list{border-right:none; border-bottom:1px solid var(--dk-hair)}
  .pd-dkpis{grid-template-columns:1fr 1fr; gap:16px 22px}
  .value-grid{grid-template-columns:1fr}
  .vcard.old{border-right:none; border-bottom:1px solid var(--hairline)}
  .vcard{padding:28px 24px}
  .rec-pair,.artifacts{grid-template-columns:1fr}
  .founders2{grid-template-columns:1fr 1fr; gap:18px}
  .intel-pipe{flex-direction:column; gap:18px}
  .ip-arr{display:none}
  form .row{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr 1fr; gap:36px 30px}
  .cbanner{left:14px; right:14px; bottom:14px; max-width:none}
  .photo-state{height:340px}
  .photo-band{height:300px}
  .bignum-row{grid-template-columns:1fr}
  .bignum{margin-right:0; border-right:none; padding-right:0}
  .pager{flex-wrap:wrap}
}

/* ============================================================
   v12 · interactive map readout
   ============================================================ */
.bigmap{position:relative}
.mpin{cursor:pointer}
.mpin .core, .mpin .ring, .mpin .ping{transform-box:fill-box; transform-origin:center}
.mpin .core{transition:transform .25s}
.mpin .ring{transition:stroke-opacity .25s}
.mpin.sel .core{transform:scale(1.3)}
.mpin.sel .ring{stroke-opacity:.65}
@keyframes mping{0%{transform:scale(.6); opacity:.55} 80%{transform:scale(2.1); opacity:0} 100%{opacity:0}}
.mpin .ping{opacity:0}
.mpin.sel .ping{animation:mping 2.2s ease-out infinite}
@media (prefers-reduced-motion: reduce){ .mpin.sel .ping{animation:none} }
.map-read{
  position:absolute; width:284px; background:#fff; border:1px solid var(--hairline-dark);
  border-radius:3px; padding:16px 18px 14px; box-shadow:0 18px 44px -22px rgba(18,18,16,.28);
  transition:left .35s ease, top .35s ease, opacity .25s; z-index:3;
}
.map-read .mr-h{display:block; font-family:var(--serif); font-size:16.5px; font-weight:600; margin-bottom:10px; padding-left:15px; position:relative}
.map-read .mr-h::before{content:""; position:absolute; left:0; top:50%; transform:translateY(-50%); width:7px; height:7px; border-radius:50%; background:var(--ink-3)}
.map-read.g .mr-h::before{background:var(--accent)}
.map-read.b .mr-h::before{background:var(--control)}
.map-read.a .mr-h::before{background:var(--amber)}
.map-read dl{display:grid; grid-template-columns:auto 1fr; gap:4px 14px; margin-bottom:10px}
.map-read dt{font-size:10px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-3); align-self:baseline; padding-top:2px}
.map-read dd{font-size:12.5px; font-weight:600; color:var(--ink); text-align:right; font-variant-numeric:tabular-nums}
.map-read p{font-size:12.5px; color:var(--ink-2); line-height:1.5; border-top:1px solid var(--hairline); padding-top:9px; margin-bottom:9px}
.map-read .mock-tag{font-size:8.5px; padding:3px 7px}
.map-card{cursor:pointer}
.map-card.sel{background:var(--band)}

/* ============================================================
   v12 · platform: projection + actions
   ============================================================ */
.pd-proj{border-top:1px solid var(--dk-hair); margin-top:18px; padding-top:14px}
.pp-head{display:flex; justify-content:space-between; align-items:baseline; margin-bottom:8px}
.pp-head .k{font-size:10px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--dk-ink3)}
.pd-proj svg{width:100%; height:auto; display:block}
.pp-note{font-size:11.5px; color:var(--dk-ink3); margin-top:6px; line-height:1.5}
.pd-actions{display:flex; gap:10px; margin-top:16px; flex-wrap:wrap}
.pbtn{font-family:var(--sans); font-size:12px; font-weight:600; letter-spacing:.02em; padding:10px 16px; border-radius:2px; cursor:pointer; border:1px solid var(--dk-hair); background:transparent; color:var(--dk-ink); transition:border-color .18s, background .18s}
.pbtn:hover{border-color:var(--dk-ink2)}
.pbtn.pri{background:var(--accent); border-color:var(--accent); color:#fff}
.pbtn.pri:hover{background:var(--accent-deep)}
.pd-status{margin-top:14px; font-size:12.5px; line-height:1.55; color:var(--dk-ink2); border-left:2px solid var(--green-lt); padding:10px 14px; background:rgba(21,113,71,.1); border-radius:0 3px 3px 0}
.pd-status b{color:var(--dk-ink)}
.pd-status .pd-reset{background:none; border:none; color:var(--dk-ink3); font-size:11px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; cursor:pointer; margin-left:10px; padding:0; border-bottom:1px solid var(--dk-hair)}
.pd-status .pd-reset:hover{color:var(--dk-ink)}

/* ============================================================
   v12 · what we do: problem picker
   ============================================================ */
.probq-grid{display:grid; grid-template-columns:minmax(0,6fr) minmax(0,5fr); gap:44px 80px; margin-top:44px; align-items:start}
.goalquotes{display:block; border-top:1px solid var(--hairline); margin-top:0}
.gq{display:block; width:100%; text-align:left; background:none; border:none; border-bottom:1px solid var(--hairline); padding:20px 16px 20px 18px; cursor:pointer; font-family:var(--sans); position:relative; transition:background .18s}
.gq::before{content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:transparent; transition:background .18s}
.gq:hover{background:var(--band)}
.gq.on{background:var(--band)}
.gq.on::before{background:var(--accent)}
.gq p{font-family:var(--serif); font-size:18.5px; font-weight:500; line-height:1.4; margin-bottom:6px; color:var(--ink)}
.gq .who{font-size:10.5px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3); transition:color .18s}
.gq.on .who{color:var(--accent-deep)}
.qpanel{border:1px solid var(--hairline-dark); background:#fff; border-radius:3px; position:sticky; top:104px}
.qp-head{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:13px 20px; border-bottom:1px solid var(--hairline); background:var(--band)}
.qp-head .t{font-size:13px; font-weight:600}
.qp-mods{display:flex; flex-wrap:wrap; gap:8px 18px; padding:18px 20px 4px}
.qp-mod{font-size:12px; font-weight:600; color:var(--ink-3); padding-bottom:4px; border-bottom:2px solid var(--hairline); transition:color .2s, border-color .2s}
.qp-mod.on{color:var(--accent-deep); border-bottom-color:var(--accent)}
.qp-plan{font-size:13.5px; color:var(--ink-2); line-height:1.62; padding:14px 20px 20px; min-height:118px}
.qp-plan b{color:var(--ink)}
.qp-foot{font-size:11px; color:var(--ink-3); padding:0 20px 16px}

/* ============================================================
   v12 · what we do: collab figure + pillar images
   ============================================================ */
.collab-grid{display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:44px 80px; align-items:center}
.collab-fig img{width:100%; height:auto}
.obj-card .pimg{margin:20px 0 18px}
.obj-card .pimg img{width:100%; aspect-ratio:4/3; object-fit:cover; filter:saturate(.94)}

/* ============================================================
   v12 · insights: life of a recommendation
   ============================================================ */
.lifebar{display:flex; gap:34px; margin-top:46px}
.lstep{flex:1; max-width:230px; background:none; border:none; border-top:2px solid var(--hairline-dark); padding:12px 0 0; text-align:left; cursor:pointer; font-family:var(--sans); transition:border-color .2s}
.lstep .ln{display:block; font-family:var(--serif); font-size:14px; color:var(--ink-3); margin-bottom:2px}
.lstep .lt{display:block; font-size:13px; font-weight:600; color:var(--ink-2)}
.lstep:hover .lt{color:var(--ink)}
.lstep.on{border-top-color:var(--accent)}
.lstep.on .ln{color:var(--accent-deep)}
.lstep.on .lt{color:var(--ink)}
.lpanes{margin-top:30px; border:1px solid var(--hairline-dark); background:#fff; border-radius:3px}
.lpane{display:grid; grid-template-columns:minmax(0,6fr) minmax(0,5fr); gap:20px 50px; padding:30px 32px; align-items:center; min-height:212px}
.lpane .lp-t h3{font-family:var(--serif); font-size:21px; font-weight:600; margin-bottom:10px}
.lpane .lp-t p{font-size:14.5px; color:var(--ink-2); line-height:1.65}
.lpane .lp-t b{color:var(--ink)}
.lp-v .rc-action{margin-bottom:0}
.lp-list{list-style:none; border-top:1px solid var(--hairline)}
.lp-list li{display:flex; justify-content:space-between; gap:16px; font-size:13px; color:var(--ink-2); padding:9px 2px; border-bottom:1px solid var(--hairline)}
.lp-list li b{color:var(--ink); font-weight:600}
.lp-list .ok{color:var(--accent-deep); font-weight:700}
.lp-field{width:100%; height:auto}
.lp-big{font-family:var(--serif); font-size:38px; font-weight:600; color:var(--accent-deep); line-height:1.05}
.lp-big small{display:block; font-family:var(--sans); font-size:12.5px; color:var(--ink-3); font-weight:400; margin-top:8px}
.linklike{background:none; border:none; padding:0; margin-top:14px; font-family:var(--sans); font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--accent-deep); cursor:pointer; border-bottom:1px solid var(--hairline-dark); padding-bottom:3px}
.linklike:hover{border-color:var(--accent-deep)}

/* ============================================================
   v12 responsive
   ============================================================ */
@media (max-width: 1080px){
  .probq-grid{grid-template-columns:1fr}
  .qpanel{position:static}
  .collab-grid{grid-template-columns:1fr}
  .lpane{grid-template-columns:1fr}
}
@media (max-width: 760px){
  .map-read{position:static; width:auto; margin-top:14px; box-shadow:none}
  .lifebar{flex-wrap:wrap; gap:14px}
  .lstep{flex:1 1 40%; max-width:none}
  .lpane{padding:22px 20px}
  .pd-actions .pbtn{flex:1 1 100%; text-align:center}
}

/* ---------- v13 polish: a11y + consistency ---------- */
.skiplink{position:absolute; left:-9999px; top:0; z-index:200; background:var(--ink); color:#fff; padding:12px 20px; font-size:13px; font-weight:600; border-radius:0 0 3px 0}
.skiplink:focus{left:0}
a:focus-visible, button:focus-visible, summary:focus-visible, [tabindex]:focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:2px}
.dark-sec :focus-visible, .plat :focus-visible, .hero6 :focus-visible, footer :focus-visible{outline-color:var(--green-lt)}
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible{outline:2px solid var(--accent); outline-offset:1px}
[id]{scroll-margin-top:96px}
.h6-tab{padding-bottom:10px}

/* ---------- v14: subpage heroes ---------- */
.pghero{position:relative; min-height:66vh; min-height:66svh; max-height:760px; background:var(--black); color:#fff; display:flex; flex-direction:column; justify-content:flex-end; overflow:hidden}
.pghero .ph-img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0}
.pghero .ph-scrim{position:absolute; inset:0; z-index:1; background:linear-gradient(88deg, rgba(10,10,8,.86) 0%, rgba(10,10,8,.6) 42%, rgba(10,10,8,.3) 76%, rgba(10,10,8,.22) 100%)}
.pghero .ph-scrim::after{content:""; position:absolute; inset:auto 0 0 0; height:180px; background:linear-gradient(180deg, rgba(10,10,8,0), rgba(10,10,8,.6))}
.pghero .ph-copy{position:relative; z-index:2; width:100%; padding-top:150px; padding-bottom:44px}
.pghero .eyebrow{color:var(--green-lt)}
.pghero .eyebrow::before{background:var(--green-lt)}
.pghero .ph-title{color:#fff; font-size:clamp(36px, 4.6vw, 60px); max-width:20ch; margin-bottom:20px}
.pghero .section-lede{color:rgba(255,255,255,.82); max-width:58ch; font-size:17px}
.pghero .section-lede strong{color:#fff}
.pghero .tlink{margin-top:26px; background:none; border:none; cursor:pointer; padding:0}
.pghero .tlink.on-dark{color:#fff}
.ph-after{padding-top:84px}
.ph-strip{position:relative; z-index:2; width:100%; display:flex; gap:28px; padding-bottom:34px}
.ph-step{flex:1; max-width:210px; background:none; border:none; border-top:2px solid rgba(255,255,255,.28); padding:12px 0 0; text-align:left; cursor:pointer; font-family:var(--sans); color:rgba(255,255,255,.72); transition:color .2s, border-color .2s}
.ph-step .n{display:block; font-family:var(--serif); font-size:13px; color:var(--green-lt); margin-bottom:2px}
.ph-step .t{display:block; font-size:13px; font-weight:600; letter-spacing:.04em}
.ph-step:hover{color:#fff; border-top-color:#fff}
.pghero.data .ph-art{position:absolute; inset:0; width:100%; height:100%; z-index:0}
.pghero.data .ph-scrim{background:linear-gradient(88deg, rgba(10,10,8,.9) 0%, rgba(10,10,8,.55) 46%, rgba(10,10,8,.1) 100%)}
@keyframes phdraw{from{stroke-dashoffset:2200} to{stroke-dashoffset:0}}
.pghero.data .ph-line{stroke-dasharray:2200; stroke-dashoffset:2200; animation:phdraw 2.4s cubic-bezier(.4,0,.2,1) .3s forwards}
.pghero.data .ph-line.c{animation-delay:.15s}
@keyframes phfade{to{opacity:1}}
.pghero.data .ph-dot{opacity:0; animation:phfade .5s ease 2.5s forwards}
@media (prefers-reduced-motion: reduce){ .pghero.data .ph-line{animation:none; stroke-dashoffset:0} .pghero.data .ph-dot{animation:none; opacity:1} }
@media (max-width: 760px){
  .pghero{min-height:76svh; max-height:none}
  .pghero .ph-copy{padding-top:118px; padding-bottom:36px}
  .pghero .ph-title{font-size:clamp(32px, 9vw, 42px)}
  .ph-strip{flex-wrap:wrap; gap:14px 22px; padding-bottom:26px}
  .ph-step{flex:1 1 40%; max-width:none}
  .ph-after{padding-top:56px}
}


/* ============================================================
   v18 · restructure on the v15 system
   header affordance · language switch · solid CTA · hero lines
   ============================================================ */

/* ---------- page transitions: the slide must never widen the layout viewport ---------- */
main#app{overflow-x:clip}

/* ---------- header: the wordmark is clearly a link ---------- */
.brand{padding:6px 0; cursor:pointer}
.brand .mono{position:relative; transition:color .2s}
.brand .mono::after{content:""; position:absolute; left:0; right:0; bottom:-4px; height:2px; background:var(--accent); transform:scaleX(0); transform-origin:left; transition:transform .25s ease}
.brand:hover .mono::after, .brand:focus-visible .mono::after{transform:scaleX(1)}
nav#nav.on-dark .brand .mono::after{background:var(--green-lt)}
.brand .name{position:relative; display:inline-block; white-space:nowrap}
.brand .name .n1, .brand .name .n2{display:block; transition:opacity .22s ease, transform .22s ease}
.brand .name .n2{position:absolute; left:14px; top:0; opacity:0; transform:translateY(5px); color:var(--accent-deep); white-space:nowrap}
.brand:hover .name .n1, .brand:focus-visible .name .n1{opacity:0; transform:translateY(-5px)}
.brand:hover .name .n2, .brand:focus-visible .name .n2{opacity:1; transform:none}
body:not([data-route="home"]) .brand .name .n1{opacity:0; transform:translateY(-5px)}
body:not([data-route="home"]) .brand .name .n2{opacity:1; transform:none}
nav#nav.on-dark .brand .name .n2{color:var(--green-lt)}
nav#nav.on-dark .brand:hover .mono{color:#fff}

/* ---------- language switch ---------- */
.nav-links .langpill{display:inline-flex; align-items:center; gap:9px; font-size:10.5px; font-weight:700; letter-spacing:.18em; text-transform:uppercase}
.nav-links .langpill a{font-size:10.5px; font-weight:700; letter-spacing:.18em; color:var(--ink-3); padding:4px 0; border-bottom:2px solid transparent}
.nav-links .langpill a:hover{color:var(--ink)}
.nav-links .langpill a.on{color:var(--ink); border-bottom-color:var(--accent)}
.nav-links .langpill i{width:1px; height:12px; background:var(--hairline-dark); display:inline-block}
nav#nav.on-dark .nav-links .langpill a{color:rgba(255,255,255,.58)}
nav#nav.on-dark .nav-links .langpill a:hover{color:#fff}
nav#nav.on-dark .nav-links .langpill a.on{color:#fff; border-bottom-color:var(--green-lt)}
nav#nav.on-dark .nav-links .langpill i{background:rgba(255,255,255,.3)}
.nav-links li.li-lang{margin-left:6px}

/* ---------- Talk with us: a real button ---------- */
.nav-links .nav-cta, nav#nav.on-dark .nav-links .nav-cta{
  background:var(--accent) !important; border-color:var(--accent) !important; color:#fff !important;
  padding:11px 22px !important; font-weight:600; border-bottom:1px solid var(--accent) !important;
}
.nav-links .nav-cta:hover, nav#nav.on-dark .nav-links .nav-cta:hover{background:var(--accent-deep) !important; border-color:var(--accent-deep) !important}
.nav-cta-m{display:none}

/* ---------- hero: three lines, lit in turn ---------- */
.hero6 h1.three{max-width:none; margin-bottom:22px}
.hero6 h1 .ln{display:block; color:rgba(255,255,255,.94); transition:color .9s ease}
.hero6 h1 .ln.on{color:var(--green-lt)}
.hero6 .sub.powered{font-size:17px; color:rgba(255,255,255,.72); max-width:62ch; margin-bottom:36px; transition:color .9s ease}
.hero6 .sub.powered.on{color:#fff}
.hero6 .sub.powered::before{content:""; display:inline-block; width:22px; height:2px; background:rgba(255,255,255,.4); vertical-align:middle; margin-right:12px; transition:background .9s}
.hero6 .sub.powered.on::before{background:var(--green-lt)}

/* ---------- home: numbered index rows as links ---------- */
a.mod{position:relative; transition:background .18s; margin:0 -12px; padding-left:12px; padding-right:12px}
a.mod:hover, a.mod:focus-visible{background:var(--band)}
a.mod h3{transition:color .18s}
a.mod:hover h3{color:var(--accent-deep)}
a.mod h3::after{content:" →"; color:var(--accent-deep); opacity:0; transition:opacity .18s}
a.mod:hover h3::after{opacity:1}
.modx.four{grid-template-columns:1fr 1fr}
.modx.four .mod{grid-template-columns:56px 1fr 130px}

/* ---------- process strip as links ---------- */
.proc a.st{display:flex; flex-direction:column; transition:background .18s}
.proc a.st .t{transition:color .18s}
.proc a.st:hover .t{color:var(--accent-deep)}
.proc a.st .more{display:block; margin-top:auto; padding-top:14px; font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--accent-deep); opacity:.75; transition:opacity .18s}
.proc a.st:hover .more{opacity:1}
.dark-sec .proc{border-color:var(--dk-hair)}
.dark-sec .proc .st{border-right-color:var(--dk-hair)}
.dark-sec .proc .st .t{color:#fff}
.dark-sec .proc .st .s{color:var(--dk-ink2)}
.dark-sec .proc a.st:hover .t, .dark-sec .proc a.st .more{color:var(--green-lt)}
.dark-sec .proc a.st:hover{background:#181816}
.dark-sec .sechead .section-lede{color:var(--dk-ink2)}

/* ---------- section number in the eyebrow ---------- */
.eyebrow .num{font-family:var(--serif); font-size:15px; font-weight:600; letter-spacing:0; color:var(--ink-3); text-transform:none; margin-right:2px}
.dark-sec .eyebrow .num, .plat .eyebrow .num{color:var(--dk-ink3)}

/* ---------- Talk with us band ---------- */
.cta-band.talk .inner{padding:130px 0}
.cta-band .eyebrow{color:var(--green-lt); margin-bottom:24px}
.cta-band .eyebrow::before{background:var(--green-lt)}
.cta-band .mails{font-size:13.5px; color:rgba(255,255,255,.72); display:inline-flex; flex-wrap:wrap; gap:6px 10px; align-items:center}
.cta-band .mails a{color:rgba(255,255,255,.9); font-weight:600; border-bottom:1px solid rgba(255,255,255,.3); padding-bottom:2px}
.cta-band .mails a:hover{border-color:#fff}

/* ============================================================
   HOW WE HELP YOU · "one raise, four rooms"
   ============================================================ */
.uni{border:1px solid var(--hairline-dark); background:#fff; border-radius:4px; overflow:hidden; margin-top:48px}
.uni-head{display:flex; align-items:center; justify-content:space-between; gap:16px 24px; padding:16px 24px; border-bottom:1px solid var(--hairline); background:var(--band); flex-wrap:wrap}
.uni-t{display:block; font-weight:600; font-size:14.5px}
.uni-s{display:block; font-size:11.5px; color:var(--ink-3); margin-top:2px}
.uni-tabs{display:flex; gap:8px}
.uni-tab{font-family:var(--sans); font-size:13px; font-weight:600; padding:9px 18px; background:none; border:1px solid var(--hairline-dark); border-radius:2px; cursor:pointer; color:var(--ink-2); transition:all .18s}
.uni-tab:hover{border-color:var(--ink)}
.uni-tab.on{background:var(--ink); border-color:var(--ink); color:#fff}
.uni-body{display:grid; grid-template-columns:repeat(4,1fr)}
.uni-store{padding:22px 22px 20px; border-right:1px solid var(--hairline); min-width:0}
.uni-store:last-child{border-right:none}
.us-name{display:block; font-size:10.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); margin-bottom:6px}
.us-move{display:block; font-family:var(--serif); font-size:17.5px; font-weight:600; line-height:1.3; min-height:46px; margin-bottom:16px; transition:opacity .25s}
.us-bar{display:grid; grid-template-columns:48px 1fr 60px; gap:10px; align-items:center; margin-bottom:9px}
.us-bar .k{font-size:11px; font-weight:600; color:var(--ink-2)}
.us-bar .tr{position:relative; height:8px; background:var(--band); border-radius:2px; overflow:hidden}
.us-bar .tr::before{content:""; position:absolute; left:50%; top:0; bottom:0; width:1px; background:var(--hairline-dark)}
.us-bar .tr i{position:absolute; top:0; bottom:0; border-radius:2px; background:var(--accent); transition:left .6s cubic-bezier(.2,.7,.2,1), width .6s cubic-bezier(.2,.7,.2,1), background .3s}
.us-bar .tr i.neg{background:var(--amber)}
.us-bar .tr i.na{background:repeating-linear-gradient(135deg, var(--hairline-dark) 0 3px, transparent 3px 6px)}
.us-bar .v{font-size:12px; font-weight:600; text-align:right; font-variant-numeric:tabular-nums; color:var(--ink); white-space:nowrap}
.us-bar .v.neg{color:var(--amber-deep)}
.us-bar .v.na{color:var(--ink-3)}
.us-verdict{font-size:13px; line-height:1.5; color:var(--ink-2); border-top:1px solid var(--hairline); padding-top:12px; margin-top:12px; min-height:74px; transition:opacity .25s}
.us-verdict b{display:block; font-size:10.5px; font-weight:700; letter-spacing:.13em; text-transform:uppercase; margin-bottom:4px}
.us-verdict.ok b{color:var(--accent-deep)}
.us-verdict.warn b{color:var(--amber-deep)}
.us-verdict.na b{color:var(--ink-3)}
.uni.swap .us-move, .uni.swap .us-verdict{opacity:0}
.uni-foot{padding:16px 24px; border-top:1px solid var(--hairline); font-size:13.5px; color:var(--ink-2); line-height:1.6; display:flex; justify-content:space-between; gap:20px; align-items:center; flex-wrap:wrap}
.uni-foot b{color:var(--ink)}

/* ---------- value grid: light variant tweaks ---------- */
.value-grid.seen .vcard.old .v-tag{color:var(--ink-3)}
.value-grid.seen .vcard.new .v-list li::before{background:var(--amber)}
.value-grid.seen .vcard.new .v-tag{color:var(--amber-deep)}

/* ---------- pillars: compact photo cards keep the v15 look ---------- */
.lever-cols.compact{margin-top:56px}

/* ============================================================
   HOW IT WORKS · cleaning your data
   ============================================================ */
.clean{display:grid; grid-template-columns:minmax(0,1fr) 44px minmax(0,1fr); gap:0 12px; align-items:stretch; margin-top:48px}
.cl-src, .cl-out{border:1px solid var(--hairline-dark); background:#fff; border-radius:3px; overflow:hidden; min-width:0}
.cl-h{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:13px 18px; border-bottom:1px solid var(--hairline); background:var(--band); font-size:13px; font-weight:600}
.cl-h .mock-tag.ok{color:var(--accent-deep); border-color:var(--accent)}
.cl-rows{padding:8px 0}
.cl-row{display:grid; grid-template-columns:64px minmax(0,1fr) auto; gap:12px; align-items:center; padding:8px 18px; font-size:12px; color:var(--ink-2); border-left:3px solid transparent; transition:border-color .3s, color .3s, background .3s, opacity .3s}
.cl-row code{font-family:ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size:11.5px; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.cl-tag{font-size:9.5px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3)}
.cl-note{font-size:10.5px; font-weight:600; color:var(--amber-deep); white-space:nowrap; opacity:0; transition:opacity .3s}
.cl-row.done{border-left-color:var(--accent); background:rgba(21,113,71,.05)}
.cl-row.done .cl-note{opacity:1}
.cl-row.done.strike code{text-decoration:line-through; color:var(--ink-3)}
.cl-row.done.strike{border-left-color:var(--amber)}
.cl-arrow{display:flex; align-items:center; justify-content:center; color:var(--ink-3); font-size:22px}
.cl-scroll{overflow-x:auto}
.cl-table{width:100%; border-collapse:collapse; font-size:12px; table-layout:auto}
.cl-table th{font-size:9px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); text-align:left; padding:12px 8px 8px; border-bottom:1px solid var(--hairline)}
.cl-table th:first-child, .cl-table td:first-child{padding-left:18px}
.cl-table td{padding:11px 8px; border-bottom:1px solid var(--hairline); color:var(--ink-2); font-variant-numeric:tabular-nums; white-space:nowrap}
.cl-table td:nth-child(5){white-space:normal; min-width:70px}
.cl-table td:first-child{color:var(--ink); font-weight:600}
.cl-table tr.out{opacity:0; transform:translateX(-10px); transition:opacity .45s ease, transform .45s ease}
.cl-table tr.out.in{opacity:1; transform:none}
.cl-foot{padding:14px 18px; font-size:12px; color:var(--ink-3); line-height:1.55; opacity:0; transition:opacity .5s}
.cl-foot.in{opacity:1}
.cl-replay{margin:0 18px 16px; font-family:var(--sans); font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--accent-deep); background:none; border:none; border-bottom:1px solid var(--hairline-dark); padding:0 0 3px; cursor:pointer}
.cl-replay:hover{border-color:var(--accent-deep)}

/* ============================================================
   HOW IT WORKS · six layers, one at a time
   ============================================================ */
.stack6{display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:0; border:1px solid var(--hairline-dark); background:#fff; border-radius:4px; overflow:hidden; margin-top:48px}
.s6-list{list-style:none; border-right:1px solid var(--hairline)}
.s6-btn{display:grid; grid-template-columns:38px 1fr; gap:2px 14px; width:100%; text-align:left; background:none; border:none; border-bottom:1px solid var(--hairline); padding:17px 22px; cursor:pointer; font-family:var(--sans); position:relative; transition:background .18s}
.s6-list li:last-child .s6-btn{border-bottom:none}
.s6-btn::before{content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:transparent; transition:background .18s}
.s6-btn:hover{background:var(--band)}
.s6-btn.on{background:var(--band)}
.s6-btn.on::before{background:var(--accent)}
.s6-btn .n{grid-row:1 / span 2; font-family:var(--serif); font-size:22px; font-weight:600; color:var(--ink-3); line-height:1.1}
.s6-btn.on .n{color:var(--accent-deep)}
.s6-btn .t{font-size:15px; font-weight:600; color:var(--ink)}
.s6-btn .s{font-size:12.5px; color:var(--ink-2)}
.s6-panel{padding:30px 34px 32px; display:flex; flex-direction:column; gap:22px; min-height:420px}
.s6-art{border:1px solid var(--hairline); background:var(--paper); border-radius:3px; padding:14px 18px}
.s6-art svg{width:100%; height:auto; display:block; max-height:190px}
.s6-k{display:block; font-size:10.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--accent-deep); margin-bottom:8px}
.s6-copy h3{font-family:var(--serif); font-size:24px; font-weight:600; margin-bottom:10px}
.s6-copy p{font-size:14.5px; line-height:1.65; color:var(--ink-2)}
.s6-copy p b{color:var(--ink)}
.s6-needs{margin-top:14px; font-size:13px; color:var(--ink-2); border-top:1px solid var(--hairline); padding-top:12px}
.s6-fade{opacity:0; transform:translateY(6px)}
.s6-anim{transition:opacity .25s ease, transform .25s ease}
.s6-foot{margin-top:22px; display:flex; justify-content:space-between; gap:20px; align-items:center; flex-wrap:wrap; font-size:13.5px; color:var(--ink-2)}
.s6-foot a{font-weight:600; color:var(--accent-deep); border-bottom:1px solid var(--hairline-dark); padding-bottom:2px}

/* ============================================================
   HOW IT WORKS · guardrail gates (dark)
   ============================================================ */
.gates{margin-top:48px; border:1px solid var(--dk-hair); background:var(--black-2); border-radius:4px; padding:28px 28px 22px; overflow:hidden}
.gates-track{position:relative; height:190px}
.gates-track::before{content:""; position:absolute; left:0; right:0; top:50%; height:1px; background:#3A3A34}
.gate{position:absolute; top:22%; bottom:22%; width:2px; background:#3F3F38; transform:translateX(-50%); transition:background .3s}
.gate.lit{background:var(--green-lt)}
.gate.hit{background:var(--amber)}
.gate-l{position:absolute; top:calc(100% + 12px); left:50%; transform:translateX(-50%); white-space:nowrap; font-size:9.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--dk-ink3); transition:color .3s; text-align:center}
.gate.up .gate-l{top:auto; bottom:calc(100% + 12px)}
.gate.lit .gate-l{color:var(--green-lt)}
.gate.hit .gate-l{color:var(--amber)}
.gate-l small{display:block; font-weight:500; letter-spacing:.04em; text-transform:none; color:#6E6E66; margin-top:2px}
.chip{position:absolute; left:0; transform:translate(-50%,-50%); background:#1A2B22; border:1px solid var(--accent); border-radius:2px; padding:8px 12px; font-size:12px; color:#fff; white-space:nowrap; opacity:0; display:flex; gap:8px; align-items:baseline}
.chip b{font-weight:600}
.chip span{color:var(--green-lt); font-variant-numeric:tabular-nums}
.chip.a{top:34%}
.chip.b{top:66%; background:#1E1F1B; border-color:var(--dk-ink3)}
.chip.b span{color:var(--dk-ink2)}
.chip.b.stop{border-color:var(--amber); background:#2A2318}
.chip.b.stop span{color:var(--amber)}
/* chip motion is driven by the Web Animations API in v18.js (positions depend on gate count) */
.chip.static{opacity:1}
.gates-out{display:grid; grid-template-columns:1fr 1fr; gap:0 28px; margin-top:38px; border-top:1px solid var(--dk-hair)}
.gates-out>div{padding:16px 0; display:flex; flex-direction:column; gap:4px; border-bottom:1px solid var(--dk-hair)}
.gates-out .k{font-size:10.5px; font-weight:700; letter-spacing:.13em; text-transform:uppercase; color:var(--dk-ink3)}
.gates-out .v{font-size:14px; color:var(--dk-ink); opacity:0; transition:opacity .5s}
.gates.done .gates-out .v{opacity:1}
.gates-out .v.ok b{color:var(--green-lt)}
.gates-out .v.no b{color:var(--amber)}
.gates-foot{display:flex; justify-content:space-between; align-items:center; gap:16px; margin-top:16px; font-size:12.5px; color:var(--dk-ink3); flex-wrap:wrap}
.gfam{display:grid; grid-template-columns:1fr 1fr; gap:0 90px; border-top:1px solid var(--dk-hair); margin-top:56px}
.gfam .principle{grid-template-columns:44px 1fr; padding:22px 0}
.gfam .p-no{font-size:14px; letter-spacing:.06em; padding-top:4px}
.gfam h3{font-size:18px}
.gfam p{font-size:13.5px}

/* ---------- flywheel: the arcs turn, the words stay ---------- */
.fw-spin{transform-origin:220px 225px; animation:fwspin 36s linear infinite}
@keyframes fwspin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion: reduce){ .fw-spin{animation:none} }

/* ---------- models disclosure on the band ---------- */
.engine .models{margin-top:36px}

/* ---------- letter section: deliverables grid on band ---------- */
.wgrid.tight{margin-top:40px}

/* ---------- pagers with fewer pages ---------- */
.pager-link.prev{text-align:left}

/* ---------- header below 1100px: the labels are long, so the menu collapses early ---------- */
.nav-links a, .nav-cta-m{white-space:nowrap}
@media (max-width: 1100px){
  .nav-inner{gap:12px}
  .nav-links{
    position:fixed; top:78px; left:0; right:0; background:var(--paper);
    flex-direction:column; align-items:flex-start; gap:0; padding:10px 30px 22px;
    border-bottom:1px solid var(--hairline); display:none;
  }
  .nav-links.open{display:flex}
  .nav-links li{width:100%}
  .nav-links a{display:block; padding:13px 0; font-size:16px; border-bottom:none}
  .nav-links a.active{color:var(--accent-deep)}
  .menu-btn{display:block}
  nav#nav:has(.nav-links.open){background:var(--paper); border-bottom-color:var(--hairline)}
  nav#nav.on-dark:has(.nav-links.open) .brand .mono{color:var(--ink)}
  nav#nav.on-dark:has(.nav-links.open) .brand .name{color:var(--ink-3); border-left-color:var(--hairline-dark)}
  nav#nav.on-dark:has(.nav-links.open) .brand .name .n2{color:var(--accent-deep)}
  nav#nav.on-dark:has(.nav-links.open) .menu-btn{color:var(--ink); border-color:var(--hairline-dark)}
  nav#nav.on-dark:has(.nav-links.open) .nav-links a{color:var(--ink-2)}
  nav#nav.on-dark:has(.nav-links.open) .nav-cta-m{background:var(--accent)}
  .nav-cta-m{display:inline-block; margin-left:auto; padding:10px 16px; font-size:12px; background:var(--accent); color:#fff; border-radius:2px; font-weight:600; letter-spacing:.02em}
  .nav-cta-m:hover{background:var(--accent-deep)}
  .brand{margin-right:0}
  .nav-links li.li-lang{margin:12px 0 0; padding-top:12px; border-top:1px solid var(--hairline)}
  .nav-links .langpill a{font-size:12px; display:inline-block; padding:6px 0}
  nav#nav:has(.nav-links.open) .nav-links .langpill a, nav#nav.on-dark:has(.nav-links.open) .nav-links .langpill a{color:var(--ink-3)}
  nav#nav:has(.nav-links.open) .nav-links .langpill a.on, nav#nav.on-dark:has(.nav-links.open) .nav-links .langpill a.on{color:var(--ink); border-bottom-color:var(--accent)}
  nav#nav:has(.nav-links.open) .nav-links .langpill i, nav#nav.on-dark:has(.nav-links.open) .nav-links .langpill i{background:var(--hairline-dark)}
  .nav-links .nav-cta{display:none !important}
}
@media (max-width: 760px){
  .nav-links{top:66px; padding:10px 22px 22px}
  .nav-cta-m{padding:9px 14px; font-size:11.5px}
}

/* ============================================================
   RESPONSIVE (v18)
   ============================================================ */
@media (max-width: 1080px){
  .uni-body{grid-template-columns:1fr 1fr}
  .uni-store:nth-child(2){border-right:none}
  .uni-store{border-bottom:1px solid var(--hairline)}
  .uni-store:nth-child(3), .uni-store:nth-child(4){border-bottom:none}
  .stack6{grid-template-columns:1fr}
  .s6-list{border-right:none; border-bottom:1px solid var(--hairline)}
  .s6-panel{min-height:0}
  .clean{grid-template-columns:1fr}
  .cl-arrow{transform:rotate(90deg); height:44px}
  .gfam{grid-template-columns:1fr}
  .gates-out{grid-template-columns:1fr}
  .modx.four{grid-template-columns:1fr}
}
@media (max-width: 760px){
  .brand .name{display:none}
  .hero6 h1.three{font-size:clamp(34px, 9.4vw, 44px)}
  .hero6 .sub.powered{font-size:15px}
  .hero6 .sub.powered::before{display:none}
  .uni-body{grid-template-columns:1fr}
  .uni-store{border-right:none !important; border-bottom:1px solid var(--hairline) !important}
  .uni-store:last-child{border-bottom:none !important}
  .us-move{min-height:0}
  .us-verdict{min-height:0}
  .uni-head{padding:14px 18px}
  .uni-foot{padding:14px 18px}
  .cl-row{grid-template-columns:52px minmax(0,1fr)}
  .cl-note{grid-column:2}
  .s6-btn{padding:14px 18px}
  .s6-panel{padding:22px 20px 24px}
  .gates{padding:22px 16px 18px}
  .gates-track{height:170px}
  .gate-l{font-size:8.5px}
  .gate-l small{display:none}
  .chip{font-size:11px; padding:6px 9px}
  .cta-band.talk .inner{padding:96px 0}
  .modx.four .mod{grid-template-columns:44px 1fr}
  .modx.four .mod svg{display:none}
  a.mod{margin:0; padding-left:0; padding-right:0}
  .proc a.st .more{margin-top:8px}
}


/* ============================================================
   v19 · calmer rhythm, fluid motion
   ============================================================ */
:root{--ease:cubic-bezier(.2,.7,.2,1); --card-r:6px; --card-sh:0 1px 2px rgba(18,18,16,.04), 0 34px 70px -48px rgba(18,18,16,.38)}

/* ---------- rhythm ---------- */
section.calm{padding:128px 0}
section.calm.tight{padding-top:0}
section.calm.band{background:var(--band); border-top:1px solid var(--hairline); border-bottom:1px solid var(--hairline)}
.sechead{margin-bottom:64px}
.section-lede{font-size:17.5px; line-height:1.7}
.section-lede.after{margin-top:64px; max-width:62ch; font-family:var(--serif); font-size:21px; line-height:1.5; color:var(--ink); border-top:2px solid var(--ink); padding-top:24px}
.section-lede.after strong{color:var(--accent-deep)}
.prob-grid{margin-top:0}
.intro-sec{padding:120px 0 56px}
#home-help{padding-top:72px}
.pghero{min-height:62vh; min-height:62svh}
.pghero .section-lede{max-width:60ch}
#pg-help section[id], #pg-how section[id]{scroll-margin-top:150px}
.gl-grid{margin-bottom:72px}
.lever-cols.compact{margin-top:0}
.obj-card ul li{padding:10px 0 10px 18px}
.rec-contrast{margin-top:34px; font-size:14.5px; color:var(--ink-3); max-width:70ch}
.plat{padding:128px 0}
.plat .sechead .section-lede{color:var(--dk-ink2)}
.plat .pd-frame{margin-top:0}
.dark-sec .sechead .section-lede strong{color:var(--dk-ink)}

/* ---------- header: frosted, hides on the way down, returns on the way up ---------- */
nav#nav{transition:transform .5s var(--ease), background .35s, border-color .35s, box-shadow .35s}
nav#nav.scrolled:not(.on-dark){background:rgba(252,252,250,.84); -webkit-backdrop-filter:saturate(1.4) blur(16px); backdrop-filter:saturate(1.4) blur(16px); border-bottom-color:rgba(230,229,222,.9)}
nav#nav.on-dark.scrolled{background:rgba(18,18,16,.32); -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px)}
nav#nav.hide{transform:translateY(-100%)}
nav#nav.hide:has(.nav-links.open){transform:none}

/* ---------- page change: crossfade, not a slide ---------- */
@keyframes pg-fade{from{opacity:0; transform:translateY(12px)} to{opacity:1; transform:none}}
.page.enter-fwd, .page.enter-back{animation:pg-fade .55s var(--ease) both}

/* ---------- reveals: slower, softer ---------- */
.reveal{transform:translateY(22px); transition:opacity .95s var(--ease), transform .95s var(--ease)}

/* ---------- hero: the lines rise one after another ---------- */
@keyframes rise{from{opacity:0; transform:translateY(28px)} to{opacity:1; transform:none}}
.hero6 h1 .ln{animation:rise 1s var(--ease) both}
.hero6 h1 .ln:nth-child(1){animation-delay:.2s}
.hero6 h1 .ln:nth-child(2){animation-delay:.38s}
.hero6 h1 .ln:nth-child(3){animation-delay:.56s}
.hero6 .sub.powered{animation:rise 1s var(--ease) .78s both}
.hero6 .hero-ctas{animation:rise 1s var(--ease) .95s both}
.hero6 .h6-tabs{animation:rise 1s var(--ease) 1.15s both}
.h6-scene{transition:opacity 2s ease}
@keyframes kenburns{from{transform:scale(1.0)} to{transform:scale(1.06)}}
.h6-scene.on img{animation:kenburns 11s ease-out forwards}
@media (prefers-reduced-motion: reduce){ .hero6 h1 .ln, .hero6 .sub.powered, .hero6 .hero-ctas, .hero6 .h6-tabs{animation:none} }

/* ---------- parallax layers ---------- */
.photo-band, .photo-state, .pghero, .cta-band{overflow:hidden}
.plx{will-change:transform; transform:translate3d(0,0,0) scale(1.12)}
.pghero .ph-img.plx{transform:translate3d(0,0,0) scale(1.08)}

/* ---------- four steps, joined by a line ---------- */
.steps4{display:grid; grid-template-columns:repeat(4,1fr); gap:0 44px; position:relative; padding-top:34px}
.steps4::before{content:""; position:absolute; left:0; right:0; top:0; height:1px; background:var(--hairline-dark)}
.s4{display:flex; flex-direction:column; position:relative; min-width:0; padding-right:8px}
.s4::before{content:""; position:absolute; top:-39px; left:0; width:9px; height:9px; border-radius:50%; background:var(--paper); border:2px solid var(--hairline-dark); transition:background .25s, border-color .25s, transform .25s}
.s4:hover::before, .s4:focus-visible::before{background:var(--accent); border-color:var(--accent); transform:scale(1.15)}
.s4-n{font-family:var(--serif); font-size:15px; color:var(--ink-3); margin-bottom:12px}
.s4-t{font-family:var(--serif); font-size:23px; font-weight:600; line-height:1.2; margin-bottom:10px; transition:color .2s}
.s4:hover .s4-t{color:var(--accent-deep)}
.s4-d{font-size:14px; color:var(--ink-2); line-height:1.6; margin-bottom:20px}
.s4-go{margin-top:auto; font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--accent-deep)}
.s4-go i{display:inline-block; font-style:normal; margin-left:4px; transition:transform .25s var(--ease)}
.s4:hover .s4-go i{transform:translateX(5px)}

/* ---------- section rail ---------- */
.srail{position:sticky; top:var(--rail-top, 78px); z-index:40; background:rgba(252,252,250,.86); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); border-bottom:1px solid var(--hairline); transition:top .5s var(--ease)}
.srail .wrap{display:flex; gap:36px; height:54px; align-items:stretch; overflow-x:auto; scrollbar-width:none}
.srail .wrap::-webkit-scrollbar{display:none}
.srail a{display:inline-flex; align-items:center; gap:9px; font-size:12.5px; font-weight:600; color:var(--ink-3); border-bottom:2px solid transparent; white-space:nowrap; transition:color .2s, border-color .2s}
.srail a span{font-family:var(--serif); font-size:13px; color:var(--ink-3); transition:color .2s}
.srail a:hover{color:var(--ink)}
.srail a.on{color:var(--ink); border-bottom-color:var(--accent)}
.srail a.on span{color:var(--accent-deep)}

/* ---------- what you can see / what stays out of view ---------- */
.seen2{display:grid; grid-template-columns:1fr 1fr; gap:40px 90px; margin-bottom:72px}
.seen2 .v-tag{margin-bottom:6px}
.seen2 .v-list li::before{background:var(--hairline-dark)}
.seen2 .hid .v-tag{color:var(--accent-deep)}
.seen2 .hid .v-list li{color:var(--ink)}
.seen2 .hid .v-list li::before{background:var(--accent)}

/* ---------- three deliverables, open columns ---------- */
.deliv3{display:grid; grid-template-columns:repeat(3,1fr); gap:0 60px; border-top:1px solid var(--hairline); padding-top:34px}
.deliv3 h3{font-family:var(--serif); font-size:22px; font-weight:600; margin:14px 0 10px}
.deliv3 p{font-size:14.5px; color:var(--ink-2); line-height:1.65}
.wtag.g{border-color:var(--accent); color:var(--accent-deep)}
.wtag.b{border-color:var(--control); color:var(--control)}
.wtag.a{border-color:var(--amber); color:var(--amber-deep)}

/* ---------- five-step flow on a line ---------- */
.flow5{list-style:none; display:grid; grid-template-columns:repeat(5,1fr); gap:0 30px; position:relative; padding-top:34px}
.flow5::before{content:""; position:absolute; left:0; right:0; top:0; height:2px; background:linear-gradient(90deg, var(--hairline-dark) 0%, var(--hairline-dark) 60%, var(--accent) 100%)}
.flow5 li{position:relative}
.flow5 li::before{content:""; position:absolute; top:-39px; left:0; width:10px; height:10px; border-radius:50%; background:var(--band); border:2px solid var(--hairline-dark)}
.flow5 li.hl::before{background:var(--accent); border-color:var(--accent)}
.f-t{display:block; font-weight:600; font-size:14.5px; margin-bottom:6px}
.flow5 li.hl .f-t{color:var(--accent-deep)}
.f-s{font-size:13px; color:var(--ink-2); line-height:1.55}
.cta-row{margin-top:52px; display:flex; gap:22px; align-items:center; flex-wrap:wrap; font-size:13.5px; color:var(--ink-2)}

/* ---------- guardrail families, compact ---------- */
.gfam2{display:grid; grid-template-columns:repeat(4,1fr); gap:30px 40px; margin-top:60px; border-top:1px solid var(--dk-hair); padding-top:32px}
.gfam2 div b{display:block; font-size:11.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--green-lt); margin-bottom:8px}
.gfam2 div span{font-size:14px; color:var(--dk-ink2); line-height:1.6}

/* ---------- input chips row ---------- */
.chips-row{margin-top:60px; display:grid; grid-template-columns:230px 1fr; gap:20px 40px; align-items:start; border-top:1px solid var(--hairline); padding-top:28px}
.chips-k{font-size:11px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--accent-deep); padding-top:7px}
.chips-row .intel-chips{margin:0; max-width:none}

/* ---------- cards: one soft treatment everywhere ---------- */
.uni, .stack6, .objpanel, .rec-card, .lpanes, .acard, .cl-src, .cl-out, .qpanel, .models, .map-read{border-radius:var(--card-r); box-shadow:var(--card-sh); border-color:var(--hairline)}
.pd-frame{border-radius:var(--card-r)}
.rec-card, .obj-card, .acard{transition:transform .35s var(--ease), box-shadow .35s var(--ease)}
.rec-card:hover{transform:translateY(-3px); box-shadow:0 1px 2px rgba(18,18,16,.04), 0 40px 70px -44px rgba(18,18,16,.45)}
.cl-hs{font-size:10.5px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3)}
.cl-hs.ok{color:var(--accent-deep)}
.chart-card{margin-top:44px}
.uni-foot{justify-content:flex-start}
.gates{border-radius:var(--card-r)}

/* ---------- buttons and links: smoother ---------- */
.btn{transition:background .25s var(--ease), color .25s, border-color .25s, transform .25s var(--ease)}
.btn-primary:hover{transform:translateY(-1px)}
.tlink .arr{transition:transform .3s var(--ease)}
.op-preset, .uni-tab, .lstep, .h6-tab .tt, .s6-btn, .pd-row, .map-card{transition-timing-function:var(--ease)}

/* ---------- talk band: calmer photo ---------- */
.cta-band .bgimg{opacity:.55}
.cta-band .scrim{background:linear-gradient(88deg, rgba(10,10,8,.92), rgba(10,10,8,.6) 60%, rgba(10,10,8,.4))}

/* ============================================================
   RESPONSIVE (v19)
   ============================================================ */
@media (max-width: 1080px){
  section.calm{padding:104px 0}
  .steps4{grid-template-columns:1fr 1fr; gap:40px 40px}
  .steps4::before{display:none}
  .s4{padding-top:22px; border-top:1px solid var(--hairline-dark)}
  .s4::before{top:-5px}
  .seen2{grid-template-columns:1fr; gap:34px}
  .deliv3{grid-template-columns:1fr; gap:34px}
  .flow5{grid-template-columns:1fr; gap:22px; padding-top:0; padding-left:26px}
  .flow5::before{left:0; right:auto; top:0; bottom:0; width:2px; height:auto; background:linear-gradient(180deg, var(--hairline-dark) 0%, var(--hairline-dark) 60%, var(--accent) 100%)}
  .flow5 li::before{top:4px; left:-30px}
  .gfam2{grid-template-columns:1fr 1fr}
  .chips-row{grid-template-columns:1fr}
  .gl-grid{margin-bottom:56px}
}
@media (max-width: 760px){
  section.calm{padding:84px 0}
  .sechead{margin-bottom:40px}
  .steps4{grid-template-columns:1fr; gap:30px}
  .gfam2{grid-template-columns:1fr}
  .srail .wrap{gap:24px; height:48px}
  .srail a{font-size:12px}
  #pg-help section[id], #pg-how section[id]{scroll-margin-top:120px}
  .section-lede.after{font-size:18px; margin-top:44px}
  .pghero{min-height:70svh}
}

/* ===== v20: plain-English pass ===== */
/* single list + a short conclusion, side by side */
.seen2.one{grid-template-columns:1.2fr .8fr; align-items:center; gap:30px 80px; margin-bottom:64px}
.seen2.one .v-list li{font-size:16px; padding:14px 0 14px 26px; color:var(--ink)}
.seen2.one .v-list li::before{background:var(--accent); top:23px}
.seen-note{font-family:var(--serif); font-size:1.35rem; line-height:1.45; color:var(--ink); margin:0; padding-left:28px; border-left:2px solid var(--accent)}
@media (max-width:820px){
  .seen2.one{grid-template-columns:1fr; gap:26px; margin-bottom:48px}
  .seen-note{font-size:1.15rem; padding-left:20px}
}
/* hero kicker above the three lines */
.hero6 .h6-kicker{margin-bottom:18px}
/* objective presets wrap on narrow panels */
.op-presets{flex-wrap:wrap; row-gap:8px}
.op-preset{padding:9px 16px; white-space:nowrap}
@media (max-width:480px){ .op-lbl{width:100%; margin-right:0; margin-bottom:2px} .op-preset{padding:8px 12px; font-size:12.5px} }

/* ===== v22 · home body: the letter, the slider, two people, cream and deep green (scoped to the home page) ===== */
:root{--hm-serif:"Fraunces", "Source Serif 4", Georgia, serif; --hm-sans:"Figtree", Inter, -apple-system, system-ui, sans-serif; --hm-hand:"Caveat", "Segoe Print", "Bradley Hand", cursive;
  --cream:#F5EFE3; --cream-2:#EDE5D5; --paper2:#FFFDF8; --rule:#E4DCCB; --rule-2:#EFE8D9; --green:#0F5A38; --green-2:#0B4A2E; --cream-ink:#F6F0E4; --pen:#2F5D9E;
  --hm-sh:0 30px 60px -32px rgba(40,30,10,.35), 0 2px 4px rgba(40,30,10,.06)}
.hm{padding:82px 0; font-family:var(--hm-sans); color:var(--ink)}
.hm-wrap{max-width:1140px; margin:0 auto; padding:0 30px}
.hm h2{font-family:var(--hm-serif); font-variation-settings:"SOFT" 70, "WONK" 1, "opsz" 60; font-weight:500; font-size:44px; line-height:1.1; letter-spacing:-.012em; color:var(--ink); margin:0}
.hm h3{font-family:var(--hm-serif); font-variation-settings:"SOFT" 70, "WONK" 1; font-weight:500; font-size:26px; line-height:1.2; color:var(--ink); margin:0 0 10px}
.hm p{font-size:17px; line-height:1.6; color:var(--ink-2); margin:0}
.hm-k{font-size:14.5px; font-weight:500; color:var(--accent); margin:0 0 12px; line-height:1.3}
.hm-lead{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:20px 64px; align-items:end; margin-bottom:40px}
.hm-intro{font-size:18px; color:var(--ink-2)}
.hand{font-family:var(--hm-hand); font-weight:500; color:var(--pen); font-size:24px; line-height:1.05; display:inline-block; transform:rotate(-3deg)}
.hm-link{display:inline-flex; gap:8px; align-items:center; font-weight:600; font-size:16px; margin-top:30px; color:var(--accent)}
.hm-link.light{color:var(--green-lt)}
.hm-link .arr, .hm-btn .arr{transition:transform .25s var(--ease)}
.hm-link:hover .arr, .hm-btn:hover .arr{transform:translateX(4px)}
.hm-btn{display:inline-flex; gap:8px; align-items:center; margin-top:26px; background:var(--cream-ink); color:var(--green-2); font-weight:600; font-size:15px; padding:14px 22px; border-radius:10px; line-height:1}
.hm-btn:hover{background:#fff}

/* ---- the letter ---- */
.hm-letter{background:var(--cream); padding-bottom:96px}
.lt-desk{position:relative; display:grid; grid-template-columns:1fr 1fr; gap:34px; align-items:start; padding:14px 26px 30px}
.lt-page{position:relative; background:var(--paper2); border:1px solid var(--rule); box-shadow:var(--hm-sh); padding:40px 44px 58px; font-size:14.5px; line-height:1.55; color:var(--ink)}
.lt-page.p1{transform:rotate(-.6deg)}
.lt-page.p2{transform:rotate(.7deg) translateY(30px)}
.lt-head{display:flex; justify-content:space-between; align-items:flex-start; gap:20px; padding-bottom:16px; border-bottom:1px solid var(--rule); margin-bottom:22px}
.lt-brand{font-family:var(--serif); font-weight:600; font-size:24px; letter-spacing:-.01em; color:var(--ink)}
.lt-meta{font-size:12.5px; color:var(--ink-3); text-align:right; line-height:1.45}
.lt-greet{font-size:15px; margin-bottom:10px; color:var(--ink)}
.lt-p{font-size:14.5px; color:var(--ink-2); margin-bottom:18px}
.lt-page h4{font-family:var(--hm-serif); font-variation-settings:"SOFT" 70, "WONK" 1; font-weight:500; font-size:19px; margin:22px 0 10px; color:var(--ink)}
.lt-recs{list-style:none; counter-reset:rec; margin:0; padding:0}
.lt-recs.test{counter-reset:rec 3}
.lt-recs li{position:relative; padding:12px 0 14px 34px; border-top:1px solid var(--rule-2); counter-increment:rec}
.lt-recs li::before{content:counter(rec); position:absolute; left:0; top:13px; font-family:var(--hm-serif); font-size:16px; color:var(--ink-3)}
.lt-r{display:flex; justify-content:space-between; gap:12px; align-items:baseline; margin-bottom:4px}
.lt-store{font-weight:600; font-size:14px; color:var(--ink)}
.lt-money{font-weight:600; font-size:14px; color:var(--accent); white-space:nowrap}
.lt-money.warn{color:var(--amber)}
.lt-money.test{color:var(--control)}
.lt-what{font-size:15px; color:var(--ink); margin:0 0 4px}
.lt-why{font-size:13.5px; color:var(--ink-2); margin:0; line-height:1.5}
.lt-results{list-style:none; margin:0; padding:0}
.lt-results li{display:grid; grid-template-columns:82px 1fr; gap:14px; padding:12px 0; border-top:1px solid var(--rule-2)}
.lt-results p{font-size:14px; color:var(--ink-2); line-height:1.5}
.lt-results b{color:var(--ink)}
.lt-tag{font-size:11.5px; font-weight:600; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-3); padding-top:3px}
.lt-tag.win{color:var(--accent)}
.lt-tag.null{color:var(--amber)}
.lt-sign{margin-top:26px}
.lt-sign p{font-size:14.5px; color:var(--ink); margin:0}
.sig{display:block; font-size:38px; color:#1E2A44; transform:rotate(-4deg); margin:6px 0 2px 4px; line-height:1}
.lt-role{font-size:12.5px !important; color:var(--ink-3) !important; margin-top:6px !important}
.lt-foot{margin-top:28px; font-size:11.5px; color:var(--ink-3); font-style:italic}
.lt-pageno{position:absolute; bottom:18px; right:24px; font-size:11px; color:var(--ink-3)}
.lt-note{position:absolute; font-size:22px; width:150px; text-align:left}
.lt-note svg{width:42px; height:30px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; display:block; margin:4px 0 0 30px}
.lt-note.n1{left:-136px; top:31%}
.lt-note.n2{right:-166px; bottom:9%; transform:rotate(-5deg); width:150px}
.lt-note.n3{right:-136px; top:22%; transform:rotate(3deg)}

/* ---- photo bands ---- */
.hm-band{height:min(56vh, 480px)}
.hm-band .cap{padding:90px 0 34px}
.hm-band .cap p{font-family:var(--hm-serif); font-variation-settings:"SOFT" 80, "WONK" 1; font-style:italic; font-weight:400; font-size:27px; line-height:1.25; max-width:1140px; color:rgba(255,255,255,.94)}

/* ---- the slider ---- */
.hm-play{background:var(--cream-2)}
.play{display:grid; grid-template-columns:minmax(0,.86fr) minmax(0,1.5fr); gap:26px; align-items:start}
.play-ctl{position:relative; background:var(--paper2); border:1px solid var(--rule); border-radius:14px; padding:26px 26px 30px; box-shadow:var(--hm-sh)}
.play-ctl label{display:block; font-size:14px; color:var(--ink-3); margin-bottom:6px}
.play-price{display:flex; align-items:baseline; gap:12px; margin-bottom:16px; flex-wrap:wrap}
.play-price b{font-family:var(--hm-serif); font-variation-settings:"SOFT" 70, "WONK" 1; font-weight:500; font-size:54px; letter-spacing:-.02em; line-height:1; color:var(--ink); font-variant-numeric:tabular-nums}
.play-price span{font-size:14px; color:var(--ink-3)}
#pxSlider{width:100%; height:34px; accent-color:var(--accent); cursor:pointer; margin:0}
.play-scale{display:flex; justify-content:space-between; font-size:12px; color:var(--ink-3); margin-top:2px}
.play-sum{margin-top:18px; font-size:15px; color:var(--ink); line-height:1.5; min-height:46px}
.play-note{position:absolute; left:22px; bottom:-62px; font-size:21px; line-height:1.05; transform:rotate(-3deg)}
.play-stores{display:grid; grid-template-columns:repeat(2,1fr); gap:16px}
.ps{background:var(--paper2); border:1px solid var(--rule); border-radius:14px; padding:20px 22px 22px; transition:border-color .25s var(--ease)}
.ps.on{border-color:var(--accent)}
.ps-h{display:flex; justify-content:space-between; align-items:baseline; gap:10px; margin-bottom:2px}
.ps-n{font-family:var(--hm-serif); font-variation-settings:"SOFT" 70, "WONK" 1; font-size:21px; font-weight:500; color:var(--ink)}
.ps-city{font-size:13px; color:var(--ink-3)}
.ps-react{font-size:13.5px; color:var(--ink-2); margin:0 0 14px}
.ps-row{display:grid; grid-template-columns:84px 1fr 62px; gap:10px; align-items:center; font-size:13px; color:var(--ink-3); margin-bottom:8px}
.ps-track{height:6px; background:var(--cream-2); border-radius:3px; position:relative; overflow:hidden}
.ps-track::after{content:""; position:absolute; left:50%; top:-2px; bottom:-2px; width:1px; background:var(--hairline-dark)}
.ps-track i{position:absolute; top:0; bottom:0; left:50%; width:0; background:var(--accent); transition:width .25s var(--ease), left .25s var(--ease), background .25s var(--ease)}
.ps-track i.neg{background:var(--amber)}
.ps-track i.na{background:repeating-linear-gradient(90deg, var(--hairline-dark) 0 4px, transparent 4px 8px); left:0; width:100%}
.ps-val{text-align:right; font-weight:600; color:var(--ink); font-variant-numeric:tabular-nums}
.ps-v{display:inline-block; margin-top:10px; padding:6px 10px; border-radius:8px; font-size:13px; font-weight:600; line-height:1.3}
.ps-v.rec{background:var(--accent-tint); color:var(--accent-deep)}
.ps-v.test{background:var(--blue-tint); color:#2C5C8F}
.ps-v.hold{background:var(--rule-2); color:var(--ink-2)}
.ps-v.rule{background:var(--amber-tint); color:var(--amber-deep)}
.ps-v.now{background:var(--rule-2); color:var(--ink-3)}
.hm-fine{margin-top:24px; font-size:13.5px; color:var(--ink-3)}

/* ---- who we are (deep green) ---- */
.hm-green{background:var(--green); color:var(--cream-ink)}
.hm-green .hm-k{color:var(--green-lt)}
.hm-green h2, .hm-green h3{color:#fff}
.hm-green p, .hm-green li{color:rgba(246,240,228,.84)}
.who{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.1fr); gap:40px 72px; margin-top:8px; padding-top:36px; border-top:1px solid rgba(246,240,228,.18)}
.who-people{display:flex; gap:22px; align-items:flex-start}
.who-faces{display:flex; flex:none; padding-top:4px}
.who-faces img{width:74px; height:74px; border-radius:50%; object-fit:cover; border:3px solid var(--green); box-shadow:0 0 0 1px rgba(246,240,228,.4)}
.who-faces img+img{margin-left:-18px}
.who-people p{font-size:16.5px}
.who-steps{list-style:none; counter-reset:st; margin:0; padding:0}
.who-steps li{position:relative; padding:14px 0 14px 44px; border-top:1px solid rgba(246,240,228,.14); font-size:16px; line-height:1.55; counter-increment:st}
.who-steps li:first-child{border-top:0; padding-top:0}
.who-steps li::before{content:counter(st); position:absolute; left:0; top:14px; font-family:var(--hm-serif); font-size:22px; color:var(--green-lt); line-height:1.1}
.who-steps li:first-child::before{top:0}
.who-steps b{color:#fff; font-weight:600}

/* ---- the command center ---- */
.hm-plat{background:var(--cream); padding-bottom:110px}
.hm-shot{position:relative; margin-top:6px}
.hm-shot .pd-frame{margin-top:0; border-radius:14px; color:var(--dk-ink); box-shadow:0 40px 80px -40px rgba(20,20,18,.5), 0 2px 6px rgba(20,20,18,.08)}
.hm-shot .mock-tag{color:var(--dk-ink3); border-color:var(--dk-hair)}
.shot-note{position:absolute; left:22px; bottom:-46px; font-size:22px; transform:rotate(-2deg)}

/* ---- a note from us ---- */
.hm-note{background:var(--cream-2)}
.note-card{position:relative; background:var(--paper2); border:1px solid var(--rule); padding:46px 56px 44px; max-width:920px; margin:0 auto; box-shadow:var(--hm-sh)}
.note-card .hm-k{margin-bottom:18px}
.note-body p{font-family:var(--hm-serif); font-variation-settings:"SOFT" 80, "WONK" 1, "opsz" 20; font-size:20px; line-height:1.55; color:var(--ink); margin:0 0 16px}
.note-sign{display:flex; gap:44px; margin-top:28px; flex-wrap:wrap}
.note-who{display:grid; grid-template-columns:54px auto; grid-template-rows:auto auto; column-gap:14px; align-items:center}
.note-who img{grid-row:1 / span 2; width:54px; height:54px; border-radius:50%; object-fit:cover}
.note-who .sig{font-size:34px; margin:0; transform:rotate(-4deg); align-self:end}
.note-name{font-size:12.5px; color:var(--ink-3); align-self:start}

/* ---- closing ---- */
.hm-close{background:var(--green-2); color:var(--cream-ink); padding:92px 0 100px}
.close-grid{display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:40px 84px; align-items:start}
.close-cta h2{color:#fff; font-size:40px; margin-bottom:18px}
.close-cta p{color:rgba(246,240,228,.84)}
.close-mail{margin-top:18px; font-size:14px}
.close-mail a{color:var(--green-lt); font-weight:500}
.close-mail a:hover{color:#fff}
.close-faq{margin:0}
.close-faq dt{font-family:var(--hm-serif); font-variation-settings:"SOFT" 70, "WONK" 1; font-weight:500; font-size:20px; color:#fff; margin:0 0 6px; padding-top:18px; border-top:1px solid rgba(246,240,228,.16)}
.close-faq dt:first-child{border-top:0; padding-top:0}
.close-faq dd{margin:0 0 18px; font-size:15.5px; line-height:1.55; color:rgba(246,240,228,.8)}

@media (max-width:1180px){
  .lt-note, .play-note, .shot-note{display:none}
}
@media (max-width:900px){
  .hm{padding:64px 0}
  .hm h2{font-size:34px}
  .hm-lead, .play, .who, .close-grid, .lt-desk{grid-template-columns:1fr}
  .hm-lead{gap:14px; margin-bottom:28px}
  .lt-desk{padding:0; gap:22px}
  .lt-page{padding:30px 26px 50px}
  .lt-page.p1, .lt-page.p2{transform:none}
  .play-stores{grid-template-columns:1fr 1fr}
  .note-card{padding:32px 26px 30px}
  .note-body p{font-size:18px}
  .close-cta h2{font-size:32px}
  .hm-band{height:300px}
  .hm-band .cap p{font-size:21px}
}
@media (max-width:560px){
  .play-stores{grid-template-columns:1fr}
  .hm-wrap{padding:0 22px}
  .lt-r{flex-direction:column; align-items:flex-start; gap:2px}
  .lt-results li{grid-template-columns:1fr; gap:4px}
}

/* ===== v23 · motion layer: only transform, opacity and clip-path move; three tiers
   (scroll-driven CSS where supported, timed animations elsewhere, the finished state under reduced motion) ===== */

/* ---- rendering budget: sections below the first screen are laid out when they come near ---- */
.hm-play, .hm-green, .hm-rcpt, .hm-note, .hm-close{content-visibility:auto}
.hm-play{contain-intrinsic-size:auto none auto 940px}
.hm-green{contain-intrinsic-size:auto none auto 770px}
.hm-rcpt{contain-intrinsic-size:auto none auto 680px}
.hm-note{contain-intrinsic-size:auto none auto 700px}
.hm-close{contain-intrinsic-size:auto none auto 620px}

/* ---- hero: the underline under "The right price" draws itself once the line has risen ---- */
.uln{position:relative; display:inline-block; font-style:normal}
.uln svg{position:absolute; left:-.03em; width:calc(100% + .06em); bottom:-.08em; height:.3em; overflow:visible; pointer-events:none}
.uln path{fill:none; stroke:var(--green-lt); stroke-width:3.5px; stroke-linecap:round; vector-effect:non-scaling-stroke; stroke-dasharray:100; stroke-dashoffset:0}
@media (prefers-reduced-motion: no-preference){
  .uln path{stroke-dashoffset:100; animation:uln-draw .9s var(--ease) 1.6s forwards}
}
@keyframes uln-draw{to{stroke-dashoffset:0}}

/* ---- what we do (right under the hero): four questions in handwriting, four answers in the serif ---- */
.hm-sum{background:var(--paper2); padding:60px 0 56px; border-bottom:1px solid var(--rule)}
.hm-sum .hm-k{margin-bottom:4px}
.qa{margin:0; padding:0}
.qa-row{display:grid; grid-template-columns:minmax(0,.55fr) minmax(0,1.45fr); gap:8px 48px; align-items:baseline; padding:22px 0; border-top:1px solid var(--rule)}
.qa-row:first-child{border-top:0; padding-top:14px}
.qa dt{margin:0}
.qa dt .hand{font-size:28px; line-height:1.05; transform:rotate(-2deg); color:var(--pen)}
.hm-sum .qa dd{margin:0; font-family:var(--hm-serif); font-variation-settings:"SOFT" 70, "WONK" 1, "opsz" 30; font-weight:400; font-size:29px; line-height:1.32; letter-spacing:-.005em; color:var(--ink)}
.hm-sum .qa dd b{font-weight:500; color:var(--accent)}
/* motion: each question writes itself on, its answer follows; one row after another */
.m-on .qa dd{opacity:0; transform:translateY(8px); transition:opacity .7s var(--ease), transform .7s var(--ease)}
.m-on .qa.in dd{opacity:1; transform:none}
.m-on .qa.in .qa-row:nth-child(1) .ink{transition-delay:.1s}   .m-on .qa.in .qa-row:nth-child(1) dd{transition-delay:.45s}
.m-on .qa.in .qa-row:nth-child(2) .ink{transition-delay:.6s}   .m-on .qa.in .qa-row:nth-child(2) dd{transition-delay:.95s}
.m-on .qa.in .qa-row:nth-child(3) .ink{transition-delay:1.1s}  .m-on .qa.in .qa-row:nth-child(3) dd{transition-delay:1.45s}
.m-on .qa.in .qa-row:nth-child(4) .ink{transition-delay:1.6s}  .m-on .qa.in .qa-row:nth-child(4) dd{transition-delay:1.95s}
@media (max-width:1180px){ .hm-sum .qa dd{font-size:25px} }
@media (max-width:900px){
  .hm-sum{padding:44px 0 40px}
  .qa-row{grid-template-columns:1fr; gap:4px; padding:16px 0}
  .qa dt .hand{font-size:24px}
  .hm-sum .qa dd{font-size:21px}
}
@media (max-width:560px){ .hm-sum .qa dd{font-size:19.5px} }

/* ---- How it works: one line where the mathematics disclosure used to be ---- */
.s6-plain{margin:18px 0 0; font-size:14.5px; line-height:1.6; color:var(--ink-2); max-width:62ch}
.s6-plain a{font-weight:600; color:var(--accent-deep); border-bottom:1px solid var(--hairline-dark); padding-bottom:1px}

/* ---- page heroes (How we help you, How it works): the four-step strip is gone, the copy keeps its distance from the edge ---- */
.pghero .ph-copy{padding-bottom:72px}
@media (max-width:760px){ .pghero .ph-copy{padding-bottom:52px} }

/* ---- the letter: envelope, pages, ink ---- */
.lt-page.p1{z-index:2}
.lt-page.p2{z-index:1}
.lt-page{transform-origin:50% 0}
.lt-env{display:none; position:absolute; left:calc(25% + 6px); top:44px; width:440px; height:270px; margin-left:-220px; z-index:3; pointer-events:none; perspective:900px}
.lt-env svg{position:absolute; left:0; top:0; width:100%; height:auto; display:block; overflow:visible}
.env-body{filter:drop-shadow(0 18px 22px rgba(40,30,10,.18)) drop-shadow(0 1px 2px rgba(40,30,10,.08))}
.env-body rect:first-child{fill:#EFE6D2; stroke:#D6CBB0; stroke-width:1.5}
.env-fold{fill:none; stroke:#D6CBB0; stroke-width:1.5}
.env-stamp{fill:#DCEBE0; stroke:#B9CDBF; stroke-width:1.5}
.env-brand{font-family:var(--serif); font-weight:600; font-size:21px; fill:var(--ink); letter-spacing:-.01em}
.env-line{font-family:var(--hm-sans); font-size:11.5px; fill:var(--ink-3)}
.env-flap{z-index:2; transform-origin:50% 3px}
.env-flap path{fill:#E7DCC4; stroke:#D6CBB0; stroke-width:1.5; stroke-linejoin:round}
@keyframes lt-p1{from{opacity:0; transform:translate(0,150px) scale(.55) rotate(0deg)} 30%{opacity:1} to{opacity:1; transform:translate(0,0) scale(1) rotate(-.6deg)}}
@keyframes lt-p2{from{opacity:0; transform:translate(-44%,44px) scale(.92) rotate(-.6deg)} 40%{opacity:1} to{opacity:1; transform:translate(0,30px) scale(1) rotate(.7deg)}}
@keyframes lt-flap{from{transform:rotateX(0)} to{transform:rotateX(-176deg)}}
@keyframes lt-env{from{opacity:1; transform:none} to{opacity:0; transform:translateY(-36px)}}
@media (min-width:901px){
  .m-on .lt-env{display:block}
  /* tier 2: the scroll position is the timeline ("entry" runs over one viewport height here, since the desk is taller than the viewport; the closed envelope is fully in view from about 35%) */
  @media (prefers-reduced-motion: no-preference){
    @supports ((animation-timeline: view()) and (animation-range: entry)){
      .lt-desk{view-timeline:--desk block}
      .lt-page.p1{animation:lt-p1 linear both; animation-timeline:--desk; animation-range:entry 38% entry 70%}
      .lt-page.p2{animation:lt-p2 linear both; animation-timeline:--desk; animation-range:entry 48% entry 76%}
      .env-flap{animation:lt-flap linear both; animation-timeline:--desk; animation-range:entry 30% entry 48%}
      .lt-env{animation:lt-env linear both; animation-timeline:--desk; animation-range:entry 54% entry 72%}
    }
  }
  /* tier 1: a timed sequence once the desk is in view */
  @supports not ((animation-timeline: view()) and (animation-range: entry)){
    .m-on .lt-desk:not(.in) .lt-page.p1{opacity:0; transform:translate(0,150px) scale(.55)}
    .m-on .lt-desk:not(.in) .lt-page.p2{opacity:0; transform:translate(-44%,44px) scale(.92)}
    .m-on .lt-desk.in .lt-page.p1{animation:lt-p1 1.15s var(--ease) .7s both}
    .m-on .lt-desk.in .lt-page.p2{animation:lt-p2 .9s var(--ease) 1.3s both}
    .m-on .lt-desk.in .env-flap{animation:lt-flap .7s ease-in-out .45s both}
    .m-on .lt-desk.in .lt-env{animation:lt-env .6s var(--ease) 1.45s both}
  }
}

/* ink: handwriting and signatures write themselves on; arrows and the sparkline draw */
.hand .ink{display:inline-block}
.m-on .ink{clip-path:inset(-25% 100% -35% -6%); transition:clip-path .85s cubic-bezier(.4,.1,.6,.9) .15s}
.m-on .in .ink, .m-on .in.ink{clip-path:inset(-25% -10% -35% -6%)}
.m-on .in .sig.ink{transition-duration:1.1s}
.m-on .draw path{stroke-dasharray:100; stroke-dashoffset:100; transition:stroke-dashoffset .6s ease-out}
.m-on .in .draw path{stroke-dashoffset:0; transition-delay:.85s}
.m-on .in .draw path + path{transition-delay:1.3s; transition-duration:.3s}
.spark{display:block; width:62px; height:20px; margin-top:7px; fill:none; stroke:var(--accent); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; overflow:visible}
.m-on .in .spark path{transition-duration:1.2s; transition-delay:.4s}
[data-money]{font-variant-numeric:tabular-nums}

/* ---- the slider: burger, price tag, customer dots ---- */
.burger{position:relative; width:96px; height:78px; margin:-6px 0 8px}
.burger svg{display:block; width:100%; height:100%; overflow:visible}
.burger .bun{fill:#D9A05B}
.burger .seed{fill:#F7E9CB}
.burger .lettuce{fill:#79B563}
.burger .cheese{fill:#F0B93A}
.burger .patty{fill:#7B4C2C}
.ptag{position:absolute; left:calc(100% + 22px); top:4px; font-family:var(--hm-sans); font-size:13px; font-weight:600; line-height:1; color:#fff; background:var(--accent); padding:8px 9px 7px; border-radius:5px; box-shadow:0 2px 5px rgba(40,30,10,.18); transform-origin:50% -20px; font-variant-numeric:tabular-nums; white-space:nowrap}
.ptag::before{content:""; position:absolute; left:50%; bottom:100%; width:1px; height:20px; background:var(--ink-3); opacity:.6}
.ptag::after{content:""; position:absolute; left:50%; top:2px; width:3px; height:3px; margin-left:-1.5px; border-radius:50%; background:rgba(255,255,255,.7)}
@keyframes tag-swing{0%{transform:rotate(0)} 28%{transform:rotate(-8deg)} 62%{transform:rotate(4.5deg)} 100%{transform:rotate(0)}}
.m-on .ptag.swing{animation:tag-swing .9s var(--ease)}
.ps-dots{display:flex; flex-wrap:wrap; gap:3px; margin-top:14px}
.ps-dots i{display:block; width:6px; height:6px; border-radius:50%; background:var(--accent); box-shadow:inset 0 0 0 1px var(--accent); transition:background .35s var(--ease), box-shadow .35s var(--ease), transform .35s var(--ease)}
.ps-dots i.grow{background:#fff; box-shadow:inset 0 0 0 1.5px var(--accent)}
.ps-dots i.off{background:transparent; box-shadow:inset 0 0 0 1px var(--hairline-dark); transform:scale(.8)}
.ps-dots i.na{background:transparent; box-shadow:inset 0 0 0 1px var(--hairline-dark); opacity:.6}
.ps-dl{display:block; font-size:11.5px; color:var(--ink-3); margin-top:5px}

/* ---- two receipts: printed line by line ---- */
.hm-rcpt{background:var(--cream)}
.rcpts{position:relative; display:grid; grid-template-columns:repeat(2, minmax(0, 340px)); gap:30px; justify-content:center; padding:8px 0 66px}
.rcpt{position:relative; isolation:isolate; padding-top:10px; transition:transform .35s var(--ease)}
.rcpt::before{content:""; position:absolute; left:-10px; right:-10px; top:0; height:9px; border-radius:3px; background:#3B3531; box-shadow:inset 0 -3px 0 rgba(0,0,0,.35); z-index:2}
.rc-paper{margin-top:-3px; filter:drop-shadow(0 16px 20px rgba(40,30,10,.16)) drop-shadow(0 1px 2px rgba(40,30,10,.08))}
.rcpt ul{list-style:none; margin:0; padding:22px 22px 30px; background:#FFFDF8; font-family:ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; font-size:13px; line-height:1.4; color:var(--ink);
  clip-path:polygon(0 0, 100% 0, 100% 100%, 94.444% calc(100% - 9px), 88.889% 100%, 83.333% calc(100% - 9px), 77.778% 100%, 72.222% calc(100% - 9px), 66.667% 100%, 61.111% calc(100% - 9px), 55.556% 100%, 50% calc(100% - 9px), 44.444% 100%, 38.889% calc(100% - 9px), 33.333% 100%, 27.778% calc(100% - 9px), 22.222% 100%, 16.667% calc(100% - 9px), 11.111% 100%, 5.556% calc(100% - 9px), 0 100%)}
.rcpt li{display:flex; justify-content:space-between; align-items:baseline; gap:8px; padding:5px 0}
.rcpt li::before{content:""; order:1; flex:1; min-width:14px; border-bottom:1px dotted rgba(18,18,16,.4); margin:0 2px 3px}
.rcpt li span:last-child{order:2; font-variant-numeric:tabular-nums; white-space:nowrap}
.rcpt .rc-h{text-transform:uppercase; letter-spacing:.08em; font-size:11px; color:var(--ink-3); border-bottom:1px dashed var(--rule); padding-bottom:10px; margin-bottom:6px}
.rcpt .rc-h::before, .rcpt .rc-f::before{content:none}
.rcpt .rc-t{border-top:1px dashed var(--rule); margin-top:6px; padding-top:12px; font-weight:700; font-size:14.5px}
.rcpt .rc-f{justify-content:center; font-family:var(--hm-serif); font-variation-settings:"SOFT" 80, "WONK" 1; font-style:italic; font-size:19px; color:var(--accent); margin-top:8px}
.rcpt.d .rc-f{color:var(--amber-deep)}
.rc-note{position:absolute; left:50%; bottom:6px; transform:translateX(-50%) rotate(-2deg); font-size:22px; white-space:nowrap}
@keyframes rc-print{from{clip-path:inset(-6% 0 100% 0)} to{clip-path:inset(-6% 0 -18% 0)}}
.m-on .rc-paper{clip-path:inset(-6% 0 100% 0)}
.m-on .rcpts.in .rc-paper{animation:rc-print 1.5s steps(20, end) both}
.m-on .rcpts.in .rcpt.d .rc-paper{animation-delay:.45s}

/* ---- photography: drifts with the scroll; captions arrive with it ---- */
@keyframes kb-drift{from{transform:translate3d(0,34px,0) scale(1.12)} to{transform:translate3d(0,-34px,0) scale(1.2)}}
@media (prefers-reduced-motion: no-preference){
  @supports ((animation-timeline: view()) and (animation-range: entry)){
    .hm-band .plx{animation:kb-drift linear both; animation-timeline:view(); animation-range:cover 0% cover 100%}
  }
}
.m-on .hm-band .cap p{opacity:0; transform:translateY(14px); transition:opacity .9s var(--ease) .1s, transform .9s var(--ease) .1s}
.m-on .hm-band.in .cap p{opacity:1; transform:none}

/* ---- deep green: the colour arrives with the section ---- */
.hm-green, .hm-close{position:relative; isolation:isolate}
@keyframes sweep-y{from{transform:scaleY(0)} to{transform:scaleY(1)}}
@media (prefers-reduced-motion: no-preference){
  @supports ((animation-timeline: view()) and (animation-range: entry)){
    .hm-green{background:#0A4029}
    .hm-close{background:#07361F}
    .hm-green::before, .hm-close::before{content:""; position:absolute; inset:0; z-index:-1; background:var(--green); transform-origin:50% 0; animation:sweep-y linear both; animation-timeline:view(); animation-range:entry 0% entry 75%}
    .hm-close::before{background:var(--green-2)}
  }
}

/* ---- small things that answer the cursor ---- */
.who-faces .face{position:relative; display:block; transition:transform .3s var(--ease)}
.who-faces .face + .face{margin-left:-18px}
.who-faces img{display:block}
.who-faces .face::after{content:attr(data-cap); position:absolute; left:50%; top:calc(100% + 8px); transform:translate(-50%, 4px); white-space:nowrap; font-size:12.5px; line-height:1; color:var(--cream-ink); background:rgba(0,0,0,.42); padding:6px 9px; border-radius:6px; opacity:0; pointer-events:none; transition:opacity .25s var(--ease), transform .25s var(--ease)}
@media (hover:hover) and (pointer:fine){
  .who-faces .face:hover{transform:translateY(-3px); z-index:1}
  .who-faces .face:hover::after{opacity:1; transform:translate(-50%, 0)}
  .rcpt:hover{transform:translateY(-4px) rotate(-.5deg)}
  .rcpt.d:hover{transform:translateY(-4px) rotate(.5deg)}
  .lt-note{transition:color .3s var(--ease), transform .3s var(--ease)}
  .lt-page:has(.lt-recs:not(.test) > li:first-child:hover) .lt-note.n1{color:#1E2A44; transform:rotate(-1deg) scale(1.05)}
  .lt-page:has(.lt-recs.test > li:hover) .lt-note.n2{color:#1E2A44; transform:rotate(-4deg) scale(1.05)}
  .lt-recs li{transition:background .25s var(--ease)}
  .lt-recs li:hover{background:rgba(15,90,56,.04)}
}

/* ---- the finished state, always, when motion is reduced (belt and braces next to the .m-on gate) ---- */
@media (prefers-reduced-motion: reduce){
  .ink, .in .ink{clip-path:none; transition:none}
  .draw path, .spark path{stroke-dashoffset:0; transition:none}
  .lt-env{display:none}
  .lt-page, .env-flap, .rc-paper, .hm-band .plx, .hm-green::before, .hm-close::before{animation:none}
  .rc-paper{clip-path:none}
  .hm-band .cap p{opacity:1; transform:none; transition:none}
  .ptag{animation:none}
}

/* ---- widths ---- */
@media (max-width:900px){
  .lt-env{display:none !important}
  .lt-page.p1, .lt-page.p2{animation:none !important; opacity:1 !important; transform:none !important}
  .hm-play{contain-intrinsic-size:auto none auto 1950px}
  .hm-green{contain-intrinsic-size:auto none auto 1350px}
  .hm-rcpt{contain-intrinsic-size:auto none auto 1160px}
  .hm-note{contain-intrinsic-size:auto none auto 1100px}
  .hm-close{contain-intrinsic-size:auto none auto 1030px}
}
@media (max-width:700px){
  .rcpts{grid-template-columns:minmax(0, 340px); gap:44px; padding-bottom:70px}
}
@media (max-width:560px){
  .burger{display:none}
  .rc-note{font-size:20px}
}

/* ===== v24 · everything points at the free audit ===== */

/* ---- hero: the offer under the buttons ---- */
.hero6 .h6-offer{margin:18px 0 0; font-size:13.5px; line-height:1.5; color:rgba(255,255,255,.66); max-width:52ch; animation:rise 1s var(--ease) 1.08s both}
@media (prefers-reduced-motion: reduce){ .hero6 .h6-offer{animation:none} }
@media (max-width:760px){ .hero6 .h6-offer{font-size:13px; margin-top:14px} }

/* ---- the one line that asks, after the letter and after the receipts ---- */
.hm-cta-line{margin:44px 0 0; text-align:center; font-family:var(--hm-sans); font-size:18px; line-height:1.5; color:var(--ink-2)}
.hm-cta-line a{display:inline-flex; gap:8px; align-items:center; font-weight:600; color:var(--accent-deep); border-bottom:1px solid var(--rule); padding-bottom:1px; transition:border-color .25s var(--ease)}
.hm-cta-line a:hover{border-color:var(--accent-deep)}
.hm-cta-line .arr{transition:transform .25s var(--ease)}
.hm-cta-line a:hover .arr{transform:translateX(4px)}
.hm-rcpt .hm-cta-line{margin-top:30px}
@media (max-width:900px){ .hm-cta-line{font-size:16.5px; margin-top:34px} .hm-cta-line a{display:inline} }

/* ---- phones: a small bar with the one ask, once the hero has gone by ---- */
.sticky-cta{position:fixed; left:0; right:0; bottom:0; z-index:70; display:none; align-items:center; justify-content:space-between; gap:14px; padding:10px 16px calc(10px + env(safe-area-inset-bottom)); background:rgba(245,239,227,.96); border-top:1px solid var(--rule); box-shadow:0 -12px 30px -18px rgba(40,30,10,.35); transform:translateY(110%)}
.sticky-cta .t{font-family:var(--hm-sans); font-size:12.5px; line-height:1.35; color:var(--ink-2)}
.sticky-cta .btn{flex:none; padding:11px 16px !important; font-size:14px; white-space:nowrap}
.sticky-cta.show{transform:none}
body[data-route="talk"] .sticky-cta{display:none !important}
@media (max-width:760px){ .sticky-cta{display:flex} }
@media (prefers-reduced-motion: no-preference){ .sticky-cta{transition:transform .4s var(--ease)} }
@supports (backdrop-filter: blur(8px)){ .sticky-cta{background:rgba(245,239,227,.88); backdrop-filter:blur(8px)} }

/* ---- Talk with us: the sample readout, a sibling of the letter ---- */
.rd-wrap{margin-top:60px; padding-top:44px; border-top:1px solid var(--hairline); scroll-margin-top:110px}
.rd-lead{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.15fr); gap:16px 64px; align-items:end; margin-bottom:36px}
.rd-h{font-family:var(--serif); font-size:26px; font-weight:600; line-height:1.25; letter-spacing:-.01em; color:var(--ink); margin:0}
.rd-intro{font-size:15.5px; line-height:1.65; color:var(--ink-2); margin:0}
.rd-desk{position:relative; display:flex; justify-content:center; padding:6px 0 24px}
.rd-page{width:100%; max-width:760px; font-family:var(--hm-sans); transform:rotate(-.4deg)}
.rd-page .lt-head{margin-bottom:6px}
.rd-page h4{margin-top:26px}
.rd-rows{list-style:none; margin:0; padding:0}
.rd-rows li{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:2px 16px; align-items:baseline; padding:11px 0 12px; border-top:1px solid var(--rule-2)}
.rd-what{font-weight:600; font-size:14px; color:var(--ink)}
.rd-res{font-size:11.5px; font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-3); white-space:nowrap}
.rd-res.win{color:var(--accent)}
.rd-res.loss{color:var(--amber-deep)}
.rd-res.warn{color:var(--amber)}
.rd-rows li p{grid-column:1 / -1; font-size:13.5px; line-height:1.5; color:var(--ink-2); margin:0}
.rd-rows li p b{color:var(--ink); font-weight:600}
.rd-page .lt-p{margin-top:8px}
.rd-note{right:-160px; top:16%; transform:rotate(4deg); width:160px}
.m-on .rd-page{opacity:0; transform:translateY(26px) rotate(-.4deg); transition:opacity .9s var(--ease), transform .9s var(--ease)}
.m-on .rd-desk.in .rd-page{opacity:1; transform:rotate(-.4deg)}
@media (max-width:900px){
  .rd-wrap{margin-top:44px; padding-top:34px}
  .rd-lead{grid-template-columns:1fr; gap:10px; margin-bottom:26px}
  .rd-h{font-size:22px}
  .rd-page{transform:none}
  .m-on .rd-page{transform:translateY(20px)}
  .m-on .rd-desk.in .rd-page{transform:none}
}
@media (max-width:560px){ .rd-rows li{grid-template-columns:1fr; gap:2px} }

/* ---- home closing: the readout link under the button ---- */
.close-more{margin:14px 0 0 !important; font-size:15px !important}
.close-more a{display:inline-flex; gap:8px; align-items:center; color:var(--green-lt); font-weight:600}
.close-more a:hover{color:#fff}
.close-more .arr{transition:transform .25s var(--ease)}
.close-more a:hover .arr{transform:translateX(4px)}

/* ---- Talk with us: the lighter form, what happens next, the phones ---- */
.fit-line{font-size:14.5px; line-height:1.6; color:var(--ink-3); margin:10px 0 0; max-width:66ch}
.field label .opt{font-weight:400; color:var(--ink-3); font-size:12px; margin-left:6px}
.f-more{margin:2px 0 18px}
.f-more summary{cursor:pointer; list-style:none; font-size:13.5px; font-weight:600; color:var(--accent-deep); padding:6px 0 14px; display:inline-block; border-bottom:1px solid var(--hairline-dark); margin-bottom:16px}
.f-more summary::-webkit-details-marker{display:none}
.f-more summary::after{content:" +"; color:var(--ink-3)}
.f-more[open] summary::after{content:" −"}
.next-steps{list-style:none; margin:0 0 6px; padding:0; counter-reset:ns}
.next-steps li{position:relative; padding:0 0 12px 30px; font-size:14px; line-height:1.6; color:var(--ink-2); counter-increment:ns}
.next-steps li::before{content:counter(ns); position:absolute; left:0; top:1px; font-family:var(--serif); font-size:18px; font-weight:600; color:var(--ink-3)}
.next-steps b{color:var(--ink); font-weight:600}
.book-phones{font-size:14px; line-height:1.9; margin:16px 0 16px !important}
.book-phones .k{display:inline-block; min-width:48px; font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3)}
.book-phones .via{font-size:12px; color:var(--ink-3)}
.book-phones a{font-weight:600; color:var(--accent-deep); border-bottom:1px solid var(--hairline-dark)}
.book-phones a:hover{border-color:var(--accent-deep)}
@media (max-width:760px){ .fit-line{margin-top:8px} }

/* ---- home: the sample letter as a PDF, under the ask ---- */
.hm .lt-dl{margin:12px 0 0; text-align:center; font-size:14px; color:var(--ink-3)}
.lt-dl a{font-weight:600; color:var(--ink-2); border-bottom:1px solid var(--rule); padding-bottom:1px}
.lt-dl a:hover{color:var(--accent-deep); border-color:var(--accent-deep)}

.book-mails{margin:0 0 18px !important; line-height:1.9}

/* ---- Talk with us, part one: what you have to do, with two photographs in frames ---- */
.tk-grid{display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:40px 80px; align-items:center}
.tk-one .section-lede{margin-bottom:6px}
.tk-steps{list-style:none; margin:26px 0 0; padding:0}
.tk-steps li{display:grid; grid-template-columns:40px minmax(0,1fr); gap:14px; padding:16px 0 18px; border-top:1px solid var(--hairline)}
.tk-steps li:first-child{border-top:0; padding-top:4px}
.tk-steps .n{font-family:var(--serif); font-size:26px; font-weight:600; line-height:1.15; color:var(--accent)}
.tk-steps b{display:block; font-family:var(--serif); font-size:19.5px; font-weight:600; line-height:1.3; color:var(--ink); margin-bottom:5px}
.tk-steps p{font-size:15px; line-height:1.6; color:var(--ink-2); margin:0; max-width:52ch}
.tk-act{display:flex; align-items:center; gap:18px; flex-wrap:wrap; margin-top:24px}
.tk-fit{font-size:13.5px; line-height:1.5; color:var(--ink-3); max-width:36ch}
.tk-photos{position:relative; height:600px}
.tk-photo{position:absolute; margin:0; width:min(340px, 72%); background:#fff; padding:10px 10px 8px; box-shadow:0 30px 60px -28px rgba(18,18,16,.5), 0 2px 6px rgba(18,18,16,.08)}
.tk-photo img{display:block; width:100%; aspect-ratio:4 / 3; object-fit:cover; filter:saturate(.94)}
.tk-photo figcaption{font-family:var(--hm-hand); font-size:21px; line-height:1.05; color:var(--pen); padding:12px 4px 4px; transform:rotate(-1.5deg)}
.tk-photo.a{left:0; top:0; transform:rotate(-3deg); z-index:1}
.tk-photo.b{right:0; top:305px; transform:rotate(2.5deg); z-index:2}
.tk-know{list-style:none; margin:0; padding:0}
.tk-know li{position:relative; padding:9px 0 9px 18px; font-size:13.5px; line-height:1.55; color:var(--ink-2); border-top:1px solid var(--hairline)}
.tk-know li:first-child{border-top:0; padding-top:0}
.tk-know li::before{content:""; position:absolute; left:0; top:15px; width:7px; height:7px; border-radius:50%; background:var(--accent)}
.tk-know li:first-child::before{top:7px}
.tk-two .book-card .btn-light{margin-bottom:6px}
@media (max-width:1180px){ .tk-photos{height:540px} .tk-photo{width:min(300px, 72%)} .tk-photo.b{top:275px} }
@media (max-width:900px){
  .tk-grid{grid-template-columns:1fr; gap:30px}
  .tk-photos{height:auto; display:grid; grid-template-columns:1fr 1fr; gap:18px; padding:8px 6px 10px}
  .tk-photo{position:static; width:auto}
  .tk-photo.a{transform:rotate(-2deg)} .tk-photo.b{transform:rotate(1.5deg)}
  .tk-photo figcaption{font-size:18px}
}
@media (max-width:560px){ .tk-photos{grid-template-columns:1fr; max-width:320px} .tk-steps b{font-size:17.5px} }

/* ---- How it works · guardrails as a plain diagram on cream: one change, sixteen rules, three outcomes ---- */
.gf-sec{background:var(--cream)}
.gflow{display:grid; grid-template-columns:minmax(0,.85fr) 44px minmax(0,1fr) 44px minmax(0,1.5fr); align-items:center; margin-top:44px; font-family:var(--hm-sans)}
.gf-node{position:relative; background:var(--paper2); border:1px solid var(--rule); border-radius:12px; box-shadow:var(--hm-sh); padding:20px 22px 19px}
.gf-k{display:block; font-size:10.5px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3); margin-bottom:8px}
.gf-node b{display:block; font-family:var(--hm-serif); font-variation-settings:"SOFT" 70, "WONK" 1; font-weight:500; font-size:21px; line-height:1.25; color:var(--ink); margin-bottom:6px}
.gf-eg{display:block; font-size:13.5px; line-height:1.55; color:var(--ink-2)}
.gf-ticks{display:grid; grid-template-columns:repeat(8, 16px); gap:5px; margin:2px 0 12px}
.gf-ticks i{position:relative; display:block; width:16px; height:16px; border-radius:4px; background:var(--accent-tint); border:1px solid var(--accent)}
.gf-ticks i::after{content:""; position:absolute; left:4px; top:1px; width:5px; height:9px; border:solid var(--accent); border-width:0 2px 2px 0; transform:rotate(42deg)}
.gf-hand{position:absolute; right:14px; bottom:-30px; font-size:20px; transform:rotate(-2deg)}
.gf-link{position:relative; height:1px; background:var(--ink-3); opacity:.7}
.gf-link::after{content:""; position:absolute; right:-1px; top:-4px; width:0; height:0; border-left:7px solid var(--ink-3); border-top:4.5px solid transparent; border-bottom:4.5px solid transparent}
.gf-out{position:relative; display:grid; gap:14px; padding-left:36px}
.gf-out::before{content:""; position:absolute; left:0; top:calc(14% + 8px); bottom:calc(14% + 8px); width:1px; background:var(--ink-3); opacity:.7}
.gf-out .gf-node::before{content:""; position:absolute; left:-36px; top:50%; width:36px; height:1px; background:var(--ink-3); opacity:.7}
.gf-out .gf-node::after{content:""; position:absolute; left:-8px; top:calc(50% - 4px); width:0; height:0; border-left:7px solid var(--ink-3); border-top:4.5px solid transparent; border-bottom:4.5px solid transparent}
.gf-out .gf-node{border-left-width:4px}
.gf-node.ok{border-left-color:var(--accent); background:linear-gradient(90deg, var(--accent-tint), var(--paper2) 55%)} .gf-node.ok .gf-k{color:var(--accent-deep)}
.gf-node.test{border-left-color:var(--amber); background:linear-gradient(90deg, var(--amber-tint), var(--paper2) 55%)} .gf-node.test .gf-k{color:var(--amber-deep)}
.gf-node.no{border-left-color:var(--ink-3); background:var(--cream-2)} .gf-node.no b{color:var(--ink-2)}
.gf-sec .gf-h{margin:64px 0 -34px; font-size:11.5px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3)}
.gf-sec .gfam2{border-top-color:var(--rule)}
.gf-sec .gfam2 div b{color:var(--accent-deep)}
.gf-sec .gfam2 div span{color:var(--ink-2)}
@media (max-width:1000px){
  .gflow{grid-template-columns:1fr; gap:0; margin-top:34px}
  .gf-link{width:1px; height:36px; margin:0 auto}
  .gf-link::after{right:auto; left:-4px; top:auto; bottom:-1px; border-left:4.5px solid transparent; border-right:4.5px solid transparent; border-top:7px solid var(--ink-3); border-bottom:0}
  .gf-out{padding-left:0; gap:12px}
  .gf-out::before, .gf-out .gf-node::before, .gf-out .gf-node::after{display:none}
  .gf-hand{position:static; display:block; margin-top:10px}
}

/* ---- language pill: the flag under each code ---- */
.nav-links .langpill a{display:inline-flex; flex-direction:column; align-items:center; gap:4px; padding:2px 0 0; border-bottom:0; line-height:1}
.nav-links .langpill .lc{display:block; padding-bottom:2px; border-bottom:2px solid transparent}
.nav-links .langpill a.on .lc{border-bottom-color:var(--accent)}
nav#nav.on-dark .nav-links .langpill a.on .lc{border-bottom-color:var(--green-lt)}
.nav-links .langpill .flag{display:block; width:18px; height:12.6px; border-radius:2px; box-shadow:0 0 0 1px rgba(18,18,16,.14); opacity:.55; transition:opacity .15s}
.nav-links .langpill a.on .flag, .nav-links .langpill a:hover .flag{opacity:1}
.nav-links .langpill i{height:22px}
@media (max-width:1100px){
  .nav-links .langpill a{flex-direction:row; gap:8px; padding:6px 0}
  .nav-links .langpill .flag{width:20px; height:14px}
  .nav-links .langpill i{height:14px}
}

/* ---- hero: the four scene bars without their words ---- */
.h6-tabs.bars-only{gap:10px; padding-bottom:30px}
.h6-tabs.bars-only .h6-tab{padding:0; height:16px; max-width:64px; flex:1}
.h6-tabs.bars-only .h6-tab .bar{top:7px; border-radius:2px; overflow:hidden}
.h6-tabs.bars-only .h6-tab:hover .bar{background:rgba(255,255,255,.4)}
@media (max-width:760px){ .h6-tabs.bars-only{padding-bottom:22px; gap:8px} .h6-tabs.bars-only .h6-tab{max-width:48px} }

/* ---- How we help you · the test readout chart folds away, closed by default ---- */
.chart-details summary{list-style:none; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:4px 24px; align-items:center; cursor:pointer; margin:-26px -28px; padding:22px 28px; border-radius:var(--card-r)}
.chart-details summary::-webkit-details-marker{display:none}
.chart-details summary:hover{background:var(--band)}
.chart-details summary:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.chart-details .cd-t{font-family:var(--serif); font-size:19px; font-weight:600; color:var(--ink)}
.chart-details .cd-s{grid-column:1; font-size:13px; color:var(--ink-3); line-height:1.5}
.chart-details .cd-btn{grid-column:2; grid-row:1 / span 2; display:inline-flex; align-items:center; gap:8px; font-size:13px; font-weight:600; color:var(--accent-deep); border:1px solid var(--hairline-dark); border-radius:999px; padding:9px 16px; white-space:nowrap; background:#fff}
.chart-details .cd-btn::after{content:""; width:7px; height:7px; border:solid var(--accent-deep); border-width:0 1.5px 1.5px 0; transform:rotate(45deg) translateY(-2px); transition:transform .25s var(--ease)}
.chart-details[open] .cd-btn::after{transform:rotate(-135deg) translateY(-2px)}
.chart-details .cd-hide{display:none}
.chart-details[open] .cd-show{display:none}
.chart-details[open] .cd-hide{display:inline}
.chart-details .cd-body{margin-top:34px}
@media (max-width:760px){
  .chart-details summary{grid-template-columns:1fr; margin:-26px -28px; padding:22px 28px}
  .chart-details .cd-btn{grid-column:1; grid-row:auto; justify-self:start; margin-top:8px}
}

/* ---- the language switch in the phone header: a round flag, one tap to the other edition ----
   It shows the flag of the edition you would switch to (Spain on /, the US on /es/) and sits
   immediately left of the green button. No code text, so the bar holds four controls. */
.nav-lang-m{display:none}
@media (max-width:1100px){
  .nav-inner{gap:8px}
  .nav-lang-m{display:inline-flex; align-items:center; justify-content:center; flex:none; margin-left:auto; width:40px; height:40px; padding:0; background:transparent; border:0; border-radius:50%; -webkit-tap-highlight-color:transparent}
  .nav-lang-m .flag{display:block; width:27px; height:27px; border-radius:50%; box-shadow:0 0 0 1px rgba(18,18,16,.22); transition:box-shadow .18s var(--ease), transform .18s var(--ease)}
  .nav-lang-m:hover .flag, .nav-lang-m:active .flag{transform:scale(1.06); box-shadow:0 0 0 1px rgba(18,18,16,.42)}
  .nav-lang-m:focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:50%}
  .nav-cta-m{margin-left:0; padding:10px 13px}
  .menu-btn{letter-spacing:.08em; padding-left:2px}
  nav#nav.on-dark .nav-lang-m .flag{box-shadow:0 0 0 1.5px rgba(255,255,255,.55)}
  nav#nav.on-dark .nav-lang-m:hover .flag{box-shadow:0 0 0 1.5px #fff}
  nav#nav:has(.nav-links.open) .nav-lang-m .flag, nav#nav.on-dark:has(.nav-links.open) .nav-lang-m .flag{box-shadow:0 0 0 1px rgba(18,18,16,.22)}
}
/* below 340px the bar cannot hold four controls; the sticky bar carries the ask instead */
@media (max-width:340px){ .nav-cta-m{display:none} }

/* ---- How we help you 03: the three deliverables as tinted boxes ---- */
.dcards{border-top:0; padding-top:0; gap:18px}
.dcards .dcard{position:relative; background:var(--paper2); border:1px solid var(--rule); border-left:4px solid var(--rule); border-radius:var(--card-r); box-shadow:var(--hm-sh); padding:22px 24px 20px; display:flex; flex-direction:column}
.dcards .dcard.g{border-left-color:var(--accent); background:linear-gradient(180deg, var(--accent-tint), var(--paper2) 62%)}
.dcards .dcard.b{border-left-color:var(--control); background:linear-gradient(180deg, #E7EFF8, var(--paper2) 62%)}
.dcards .dcard.a{border-left-color:var(--amber); background:linear-gradient(180deg, var(--amber-tint), var(--paper2) 62%)}
/* the period label reads as a colored chip rather than an underlined caption */
.dcards .wtag{border-bottom:0; padding:6px 11px; margin-bottom:14px; border-radius:999px; font-size:10px; letter-spacing:.12em; align-self:flex-start}
.dcards .dcard.g .wtag{background:#DCEBE3; color:var(--accent-deep)}
.dcards .dcard.b .wtag{background:#DDE9F5; color:#2C5A8F}
.dcards .dcard.a .wtag{background:#F2E7CB; color:var(--amber-deep)}
.dcards .dcard.g h3{color:var(--accent-deep)}
.dcards .dcard.b h3{color:#2C5A8F}
.dcards .dcard.a h3{color:var(--amber-deep)}
.dcards h3{font-family:var(--hm-serif); font-variation-settings:"SOFT" 70, "WONK" 1; font-weight:500; font-size:22px; line-height:1.2; margin:0 0 8px}
.dcards p{margin:0}
.dcards .dc-eg{display:block; margin-top:14px; padding-top:12px; border-top:1px solid var(--rule-2); font-family:var(--hm-hand); font-size:17px; line-height:1.25; color:var(--pen)}
.dcards .dcard.g .dc-eg{color:var(--accent-deep)}
.dcards .dcard.b .dc-eg{color:var(--control)}
.dcards .dcard.a .dc-eg{color:var(--amber-deep)}
@media (max-width:900px){ .dcards{gap:14px} }

/* ---- the letter's second page folds away on phones (JS adds .lt-fold; without JS the whole letter shows) ---- */
.lt-more{display:none}
@media (max-width:900px){
  .lt-desk.lt-fold .lt-more{display:inline-flex; align-items:center; justify-content:center; gap:9px; width:100%; margin:0; padding:15px 18px; background:var(--paper2); border:1px solid var(--rule); border-radius:var(--card-r); box-shadow:var(--hm-sh); cursor:pointer; font-family:var(--hm-sans); font-size:15px; font-weight:600; color:var(--accent-deep); line-height:1.2}
  .lt-desk.lt-fold .lt-more:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
  .lt-more-i{width:8px; height:8px; border:solid var(--accent-deep); border-width:0 2px 2px 0; transform:rotate(45deg) translate(-2px,-2px); transition:transform .25s var(--ease)}
  .lt-desk.lt-fold.open .lt-more-i{transform:rotate(-135deg) translate(-1px,-1px)}
  .lt-desk.lt-fold:not(.open) .lt-page.p2{display:none}
}

/* ---- phones: bigger touch targets, readable labels, tighter vertical rhythm ---- */
@media (max-width:760px){
  /* the four hero scene bars are 16px tall; extend the hit area without moving them */
  .h6-tabs.bars-only .h6-tab::after{content:""; position:absolute; left:0; right:0; top:-12px; bottom:-12px}
  /* contact links on the conversion page were 18px tall */
  .book-card .mail, .book-phones a, .fcard .li, .lt-dl a, .hm-cta-line a{display:inline-block; padding-top:4px; padding-bottom:4px}
  .close-mail a, .s6-plain a{display:inline-block; padding-top:4px; padding-bottom:4px}
  .cl-replay{padding:7px 12px}
  .book-mails{line-height:1.6 !important}
  /* uppercase 11px form labels are hard to read at arm's length */
  .field label{font-size:12.5px; letter-spacing:.08em}
  /* the hero's secondary link sat on a 22px target */
  .hero-ctas .tlink{padding:6px 0}
  /* a fifth of the vertical padding back, on the longest pages */
  section.calm{padding:66px 0}
  .hm{padding:58px 0}
}

/* ============================================================
   v24.18 · warmer, boxier: 02 the models, the lifecycle,
   and the home page's "Common questions" label
   ============================================================ */

/* ---- How we help you 02: the five steps become paper cards on a green ramp ---- */
.flow5.fcards{grid-template-columns:repeat(5,1fr); gap:14px; padding-top:0; counter-reset:fstep}
.flow5.fcards::before{content:none}
.flow5.fcards li{position:relative; background:var(--paper2); border:1px solid var(--rule); border-radius:var(--card-r); box-shadow:0 1px 2px rgba(18,18,16,.04), 0 20px 38px -32px rgba(18,18,16,.42); padding:34px 17px 20px; display:flex; flex-direction:column}
/* the step number, from the CSS counter so it needs no markup and no translation */
.flow5.fcards li::before{content:counter(fstep, decimal-leading-zero); counter-increment:fstep; position:absolute; top:13px; left:17px; width:auto; height:auto; border:0; border-radius:0; background:none; font-family:var(--hm-serif); font-variation-settings:"SOFT" 70, "WONK" 1; font-size:14px; font-weight:600; color:var(--ink-3); line-height:1}
/* the colored cap deepens across the five, so the ramp still reads left to right */
.flow5.fcards li::after{content:""; position:absolute; left:-1px; right:-1px; top:-1px; height:3px; border-radius:var(--card-r) var(--card-r) 0 0}
.flow5.fcards li:nth-child(1)::after{background:#D3E2D9}
.flow5.fcards li:nth-child(2)::after{background:#B2D0C0}
.flow5.fcards li:nth-child(3)::after{background:#82B99D}
.flow5.fcards li:nth-child(4)::after{background:#41996E}
.flow5.fcards li.hl::after{background:var(--accent)}
.flow5.fcards li.hl{border-color:#C7DCD1; background:linear-gradient(180deg, var(--accent-tint), var(--paper2) 58%)}
.flow5.fcards li.hl::before{color:var(--accent-deep)}
.flow5.fcards .f-t{font-size:15.5px; margin-bottom:7px}
.flow5.fcards .f-s{font-size:13.5px}
.flow5.fcards .f-note{display:block; margin-top:auto; padding-top:14px; font-family:var(--hm-hand); font-size:17px; line-height:1.2; color:var(--accent-deep)}
@media (max-width:1080px){
  .flow5.fcards{grid-template-columns:1fr 1fr; gap:12px; padding-left:0; padding-top:0}
  .flow5.fcards li::before{top:13px; left:17px}
}
@media (max-width:620px){ .flow5.fcards{grid-template-columns:1fr} }

/* ---- the lifecycle: the four stages become cards, each pane gets a tinted panel ---- */
#lifecycle .lifebar{gap:12px; margin-top:40px}
#lifecycle .lstep{position:relative; max-width:none; background:var(--paper2); border:1px solid var(--rule); border-radius:var(--card-r); padding:15px 15px 14px; transition:border-color .2s var(--ease), background .2s var(--ease), box-shadow .2s var(--ease)}
#lifecycle .lstep::after{content:""; position:absolute; left:-1px; right:-1px; top:-1px; height:3px; border-radius:var(--card-r) var(--card-r) 0 0; background:var(--rule); transition:background .2s var(--ease)}
#lifecycle .lstep.on::after{background:var(--accent)}
#lifecycle .lstep:hover{border-color:var(--hairline-dark)}
#lifecycle .lstep .ln{font-size:13px; letter-spacing:.04em}
#lifecycle .lstep .lt{font-size:13.5px}
#lifecycle .lstep.on{border-color:#BFD8CB; background:linear-gradient(180deg, var(--accent-tint), var(--paper2) 70%); box-shadow:0 1px 2px rgba(18,18,16,.04), 0 16px 28px -24px rgba(18,18,16,.45)}
#lifecycle .lstep.on .ln{color:var(--accent-deep)}
#lifecycle .lpane{min-height:196px}
#lifecycle .lstep:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
#lifecycle .lpanes{background:var(--paper2); border-color:var(--rule)}
/* pane 01 already carries its own blue tint, so it only needs rounding */
#lifecycle .lp-v .rc-action{border-radius:0 var(--card-r) var(--card-r) 0; padding:16px 20px}
/* panes 02 and 03 sit on cream */
#lifecycle .lpane:nth-child(2) .lp-v, #lifecycle .lpane:nth-child(3) .lp-v{background:var(--cream); border:1px solid var(--rule-2); border-radius:var(--card-r); padding:16px 20px 18px}
#lifecycle .lpane:nth-child(2) .lp-list{border-top:0}
#lifecycle .lpane:nth-child(2) .lp-list li:last-child{border-bottom:0; padding-bottom:0}
#lifecycle .lpane:nth-child(3) .lp-v{padding:14px 16px 10px}
/* pane 04: the number that matters gets a green box of its own */
#lifecycle .lp-big{background:linear-gradient(180deg, var(--accent-tint), #F8FBF9); border:1px solid #C7DCD1; border-radius:var(--card-r); padding:20px 22px 18px}
#lifecycle .lp-big small{color:var(--ink-2)}
/* the link down to the chart becomes a real target, not a 12px caption */
#lifecycle .linklike{display:inline-flex; align-items:center; margin-top:16px; padding:10px 16px; border:1px solid #C7DCD1; border-radius:999px; background:var(--accent-tint); font-size:12px; letter-spacing:.1em; color:var(--accent-deep)}
#lifecycle .linklike:hover{background:#DCEBE3; border-color:#A9CBBA}
#lifecycle .linklike:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
@media (max-width:760px){
  #lifecycle .lifebar{gap:10px}
  #lifecycle .lstep{flex:1 1 44%; padding:11px 12px 12px}
}

/* ============================================================
   v24.20 · say what the company does, in the first screen
   ============================================================ */

/* ---- hero: the category line is readable, the headline is a sentence ---- */
.hero6 .h6-kicker{font-size:13px; letter-spacing:.2em; color:rgba(255,255,255,.84); margin-bottom:22px}
.hero6 .h6-kicker::before{width:34px}
.hero6 h1.three{max-width:none; margin-bottom:22px; font-size:clamp(37px, 5.2vw, 68px); line-height:1.04}
.hero6 h1.three .ln{display:block; color:rgba(255,255,255,.96); transition:color .9s ease}
.hero6 h1.three .ln.on{color:var(--green-lt)}
.hero6 .sub.powered{font-size:18.5px; line-height:1.55; color:rgba(255,255,255,.86); max-width:58ch}
@media (max-width:900px){ .hero6 .sub.powered{font-size:16px; line-height:1.5} }
@media (max-width:760px){
  .hero6 h1.three{font-size:clamp(26px, 7.4vw, 38px); margin-bottom:16px}
  .hero6 .h6-kicker{font-size:11.5px; letter-spacing:.16em; margin-bottom:16px}
  .hero6 .sub.powered{font-size:15.5px}
}

/* ---- the whole business in one screen, straight under the hero ----
   Warm white here, so the cream letter section below it still reads as its own band. */
.hm-spine{background:var(--paper2); padding:76px 0 80px; border-bottom:1px solid var(--rule)}
.hm-spine .hm-k{font-family:var(--hm-serif); font-variation-settings:"SOFT" 70, "WONK" 1; font-size:27px; font-weight:500; letter-spacing:-.005em; line-height:1.15; color:var(--accent); margin:0 0 20px; display:flex; align-items:center; gap:14px}
.hm-spine .hm-k::before{content:""; flex:0 0 auto; width:30px; height:2px; background:var(--accent); opacity:.55}
.spine-h{font-family:var(--hm-serif); font-variation-settings:"SOFT" 70, "WONK" 1, "opsz" 60; font-weight:500; font-size:clamp(31px, 4.5vw, 58px); line-height:1.06; letter-spacing:-.018em; color:var(--ink); max-width:none; margin:0}
.spine-h b{font-weight:500; color:var(--accent)}
.spine3{list-style:none; margin:42px 0 0; padding:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px}
.spine3 .sp{position:relative; background:linear-gradient(180deg, #FAF5EA, #FCFAF3); border:1px solid var(--rule); border-radius:var(--card-r); box-shadow:var(--hm-sh); padding:22px 24px 26px; display:flex; flex-direction:column}
.spine3 .sp-n{font-family:var(--hm-serif); font-size:14px; font-weight:600; letter-spacing:.04em; color:var(--ink-3); line-height:1}
.spine3 .sp-art{margin:14px 0 18px; padding:15px 0; background:var(--paper2); border:1px solid var(--rule-2); border-radius:var(--card-r)}
.spine3 .sp-art svg{display:block; width:100%; max-width:182px; height:auto; margin:0 auto}
.spine3 .sp h3{font-family:var(--hm-serif); font-variation-settings:"SOFT" 70, "WONK" 1; font-weight:500; font-size:23px; line-height:1.2; letter-spacing:-.005em; color:var(--ink); margin:0 0 8px}
.spine3 .sp p{margin:0; font-size:15px; line-height:1.6; color:var(--ink-2)}
@media (max-width:980px){
  .hm-spine{padding:52px 0 56px}
  .spine-h{font-size:clamp(23px, 4.4vw, 30px); line-height:1.3}
  .spine3{grid-template-columns:1fr; gap:12px; margin-top:30px}
  /* on phones the picture moves beside the words, so the band stays one screen-ish */
  .spine3 .sp{display:grid; grid-template-columns:104px minmax(0,1fr); gap:4px 18px; padding:18px 20px 20px}
  .spine3 .sp-n{grid-column:1 / -1; margin-bottom:4px}
  .spine3 .sp-art{grid-column:1; grid-row:2 / span 2; align-self:start; margin:5px 0 0; padding:10px 6px}
  .spine3 .sp h3{grid-column:2; grid-row:2; font-size:20px}
  .spine3 .sp p{grid-column:2; grid-row:3; font-size:14.5px}
}
@media (max-width:420px){
  .spine3 .sp{grid-template-columns:80px minmax(0,1fr); gap:4px 14px}
  .spine3 .sp h3{font-size:18.5px}
}
@media (max-width:560px){
  .spine-h{font-size:21px; line-height:1.32}
  .spine3 .sp-art svg{max-width:none}
}

/* ============================================================
   v24.22 · rhythm: the demo is the dark centerpiece, the
   explainer carries more weight
   ============================================================ */

/* ---- "Move the price" is the product moment, so it gets the spotlight ----
   Dark hero, warm-white explainer, cream letter, THIS, cream note, green close. */
.hm-play{background:var(--black); color:var(--dk-ink)}
.hm-play .hm-k{color:var(--green-lt)}
.hm-play h2{color:#fff}
.hm-play .hm-intro{color:var(--dk-ink2)}
.hm-play .hm-fine{color:var(--dk-ink3)}
.hm-play .play-ctl{background:var(--black-2); border-color:var(--dk-hair); box-shadow:0 30px 60px -34px rgba(0,0,0,.8)}
.hm-play .play-ctl label{color:var(--dk-ink3)}
.hm-play .play-price b{color:#fff}
.hm-play .play-price span, .hm-play .play-scale{color:var(--dk-ink3)}
.hm-play .play-sum{color:var(--dk-ink)}
.hm-play #pxSlider{accent-color:var(--green-lt)}
.hm-play .play-note{color:var(--green-lt)}
.hm-play .ptag{background:var(--green-lt); color:var(--black); box-shadow:0 2px 6px rgba(0,0,0,.5)}
.hm-play .ptag::before{background:var(--dk-ink3)}
.hm-play .ptag::after{background:rgba(18,18,16,.45)}
.hm-play .ps{background:var(--black-2); border-color:var(--dk-hair)}
.hm-play .ps.on{border-color:var(--green-lt)}
.hm-play .ps-n{color:#fff}
.hm-play .ps-city, .hm-play .ps-row{color:var(--dk-ink3)}
.hm-play .ps-react{color:var(--dk-ink2)}
.hm-play .ps-val{color:#fff}
.hm-play .ps-track{background:#26261F}
.hm-play .ps-track::after{background:#3B3A33}
.hm-play .ps-track i{background:var(--green-lt)}
.hm-play .ps-track i.neg{background:#E0B15C}
.hm-play .ps-track i.na{background:repeating-linear-gradient(90deg, #3B3A33 0 4px, transparent 4px 8px)}
.hm-play .ps-v.rec{background:rgba(143,212,174,.16); color:var(--green-lt)}
.hm-play .ps-v.test{background:rgba(120,170,225,.18); color:#9EC5EC}
.hm-play .ps-v.hold{background:#26261F; color:var(--dk-ink2)}
.hm-play .ps-v.rule{background:rgba(224,177,92,.16); color:#E0B15C}
.hm-play .ps-v.now{background:#26261F; color:var(--dk-ink3)}

/* ---- the explainer earns more room: bigger pictures, and a flow between them ---- */
.spine3{gap:34px}
.spine3 .sp h3 b{color:var(--accent); font-weight:500}
@media (min-width:981px){ .spine3 .sp h3{min-height:2.4em} }
.spine3 .sp-art{padding:22px 0}
.spine3 .sp-art svg{max-width:none; width:min(100%, 210px)}
.spine3 .sp-n{font-size:15px; color:var(--ink-3); letter-spacing:.06em}
/* a chevron in the gap, so three cards read as one sequence */
/* a drawn arrow in each gap, so the three panels read as one sentence */
.spine3 .sp:not(:last-child)::after{content:""; position:absolute; right:-34px; top:127px; width:34px; height:18px; z-index:2; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 18'%3E%3Cg fill='none' stroke='%23157147' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' opacity='.6'%3E%3Cpath d='M2 9.6c7.5-2.4 15.6-2.9 27.4-1.2'/%3E%3Cpath d='M23.8 4.2l6.4 4.2-6.9 4.4'/%3E%3C/g%3E%3C/svg%3E") no-repeat center/contain}
@media (max-width:980px){ .spine3{gap:12px} .spine3 .sp:not(:last-child)::after{display:none} .spine3 .sp-art{padding:10px 6px} }

/* ---- page heroes that carry the title alone: bigger, with the count in green ---- */
.pghero .ph-title.big{font-size:clamp(38px, 5.4vw, 76px); line-height:1.04; letter-spacing:-.018em; max-width:22ch; margin-bottom:0}
/* the count always starts its own line, in both languages */
.pghero .ph-title.big b{display:block; font-weight:600; color:var(--green-lt)}
@media (max-width:760px){ .pghero .ph-title.big{font-size:clamp(30px, 8vw, 42px); max-width:none} }