/* ============================================================
   Stoneforge Group – site.css
   Design system lifted from the Method Onion / BrandScript
   prototypes. Newsreader (display serif) + Montserrat (sans).
   ============================================================ */

/* ---- Fonts (self-hosted) ---- */
@font-face{font-family:"Newsreader";src:url("../fonts/newsreader-latin-300-normal.woff2") format("woff2");font-weight:300;font-style:normal;font-display:swap;}
@font-face{font-family:"Newsreader";src:url("../fonts/newsreader-latin-400-normal.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:"Newsreader";src:url("../fonts/newsreader-latin-300-italic.woff2") format("woff2");font-weight:300;font-style:italic;font-display:swap;}
@font-face{font-family:"Newsreader";src:url("../fonts/newsreader-latin-400-italic.woff2") format("woff2");font-weight:400;font-style:italic;font-display:swap;}
@font-face{font-family:"Montserrat";src:url("../fonts/montserrat-latin-300-normal.woff2") format("woff2");font-weight:300;font-style:normal;font-display:swap;}
@font-face{font-family:"Montserrat";src:url("../fonts/montserrat-latin-400-normal.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:"Montserrat";src:url("../fonts/montserrat-latin-500-normal.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap;}
@font-face{font-family:"Montserrat";src:url("../fonts/montserrat-latin-600-normal.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap;}
@font-face{font-family:"Montserrat";src:url("../fonts/montserrat-latin-700-normal.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap;}

/* ---- Tokens ---- */
:root{
  --ground:#0a0f0d; --panel:#161d1a; --panel2:#1b231f;
  --ink:#eef3f1; --ink-soft:#c4d0cb; --ink-dim:#85968e;
  --line:rgba(150,180,165,0.13); --line-strong:rgba(150,180,165,0.26);
  --g1:#8DC63F; --g2:#56a83f; --g3:#2E7D32;
  --grad:linear-gradient(135deg,#8DC63F 0%,#2E7D32 100%);
  --maxw:1120px;
  --serif:"Newsreader",Georgia,"Times New Roman",serif;
  --sans:"Montserrat",-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;
}

/* ---- Base ---- */
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
html,body{overflow-x:clip;}
/* Announce-only: the result panel is too verbose to be a live region on a control
   that fires on every pointer sample, so a short summary carries the announcement. */
.sc-live{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;}
body{margin:0;background:var(--ground);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.65;-webkit-font-smoothing:antialiased;position:relative;overflow-x:hidden;}
body.modal-open{overflow:hidden;}
img{max-width:100%;display:block;height:auto;}
.cfo-strip .photo img,.guide .photo img{width:100%;height:100%;object-fit:cover;}
a{color:var(--g1);}
:focus-visible{outline:2px solid var(--g1);outline-offset:3px;}
.skip{position:absolute;left:-9999px;top:0;background:var(--panel);color:var(--ink);padding:10px 16px;z-index:100;border-radius:0 0 8px 0;}
.skip:focus{left:0;}
.wrap{position:relative;z-index:1;max-width:var(--maxw);margin:0 auto;padding:0 24px;}

/* ---- Header / nav ---- */
.site-head{position:relative;z-index:5;border-bottom:1px solid var(--line);}
.site-head .bar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-top:20px;padding-bottom:20px;}
.site-head .head-cta{display:none;}
@media(max-width:1240px){
  .site-head .head-cta{display:inline-flex;margin-left:auto;white-space:nowrap;}
  .site-head .head-cta,.site-head .nav-toggle{height:42px;padding:0 18px;display:inline-flex;align-items:center;justify-content:center;font-size:12px;box-sizing:border-box;}
  .site-head .bar{gap:10px;}
}
@media(max-width:600px){
  .site-head .mark img{height:28px;}
  .site-head .bar{padding-top:14px;padding-bottom:14px;}
}
/* The bar needs 387px of content and never wrapped, so below 390px the Menu button
   was sliced by the viewport edge - 12px at 375, 67px at 320, where the nav became
   untappable. Shrink the mark and the chrome rather than the tap targets. */
@media(max-width:389px){
  .site-head .wrap{padding-left:16px;padding-right:16px;}
  .site-head .mark img{height:26px;}
  .site-head .head-cta,.site-head .nav-toggle{padding:0 12px;letter-spacing:.03em;}
  .site-head .bar{gap:8px;}
}
/* Under ~345px even that will not seat both. The open menu carries "Talk to us" as
   its last item and every page ends with an onramp, so the header CTA is the one
   element that can go without costing a route to contact. */
@media(max-width:344px){
  .site-head .head-cta{display:none;}
}
.mark{display:flex;align-items:center;gap:12px;text-decoration:none;flex:none;min-height:42px;}
.site-head .mark img{max-width:none;transform:translateY(-7%);}
.mark img{height:34px;width:auto;flex:none;}
.site-foot .mark img{height:28px;}
.mark .name{font-size:15px;font-weight:600;letter-spacing:.04em;color:var(--ink);line-height:1.1;}
.mark .name span{display:block;font-size:9.5px;letter-spacing:.32em;text-transform:uppercase;color:var(--ink-dim);font-weight:500;margin-top:3px;}
.nav{display:flex;align-items:center;gap:20px;}
.nav a{font-size:12px;letter-spacing:.06em;text-transform:uppercase;font-weight:500;color:var(--ink-soft);text-decoration:none;transition:color .18s;white-space:nowrap;}
.nav a.btn{color:#0a0f0d;padding:12px 18px;}
.nav a:hover{color:var(--g1);}
.nav a[aria-current="page"]{color:var(--g1);}
.nav a.nav-score{color:var(--g1);}
.nav .btn{margin-left:6px;}
.nav-toggle{display:none;background:transparent;border:1px solid var(--line-strong);border-radius:7px;color:var(--ink-soft);font-family:var(--sans);font-size:12px;letter-spacing:.06em;font-weight:600;text-transform:uppercase;padding:11px 18px;cursor:pointer;}
@media(max-width:1240px){
  .nav-toggle{display:inline-block;}
  .nav{display:none;position:absolute;left:0;right:0;top:100%;flex-direction:column;align-items:stretch;gap:0;background:var(--panel);border-bottom:1px solid var(--line-strong);padding:10px 24px 22px;}
  .nav.open{display:flex;}
  .nav a{padding:13px 2px;border-bottom:1px solid var(--line);font-size:13px;}
  .nav .btn{margin:16px 0 0;text-align:center;justify-content:center;}
}

/* ---- Buttons ---- */
.btn{display:inline-flex;align-items:center;gap:10px;font-family:var(--sans);font-size:13px;letter-spacing:.06em;text-transform:uppercase;font-weight:600;color:#0a0f0d;background:var(--grad);border:none;border-radius:7px;padding:14px 24px;cursor:pointer;text-decoration:none;transition:transform .18s,box-shadow .18s;}
.btn:hover{transform:translateY(-1px);box-shadow:0 10px 24px rgba(141,198,63,.18);}
.btn .ch{font-size:15px;}
.btn-ghost{display:inline-flex;align-items:center;gap:10px;font-size:13px;letter-spacing:.06em;text-transform:uppercase;font-weight:500;color:var(--ink-soft);background:transparent;border:1px solid var(--line-strong);border-radius:7px;padding:13px 22px;cursor:pointer;text-decoration:none;transition:all .18s;}
.btn-ghost:hover{border-color:var(--g1);color:var(--g1);}
.btn-row{display:flex;gap:14px;flex-wrap:wrap;align-items:center;}
/* The [hidden] trap: the display:inline-flex above beats the UA sheet's [hidden]{display:none},
   so a button JS hides stays laid out and clickable – a dead control the owner can press
   (scorecard print button on an untouched page, the tools' calendar buttons in their off states).
   Every element toggled with [hidden] needs an explicit override; these are the shared ones. */
.btn[hidden],.btn-ghost[hidden]{display:none !important;}

/* ---- Typography ---- */
.eyebrow{display:inline-flex;align-items:center;gap:11px;font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--ink-dim);margin-bottom:28px;}
.eyebrow::before{content:"";width:26px;height:1px;background:var(--g2);}
h1.lead{font-family:var(--serif);font-weight:400;font-size:clamp(30px,4.8vw,54px);line-height:1.16;letter-spacing:-.012em;margin:0;color:var(--ink);}
h1.lead .dim{color:var(--ink-dim);font-style:italic;}
h1.lead .lift{color:var(--g1);font-style:italic;}
.hero-subrole{margin:16px 0 0;max-width:52ch;font-size:14px;line-height:1.55;font-weight:400;}
.standfirst{margin-top:28px;max-width:52ch;font-size:17px;line-height:1.7;color:var(--ink-soft);font-weight:300;}
section{padding:56px 0;border-top:1px solid var(--line);}
section.no-line{border-top:none;}
.sec-eyebrow{display:flex;align-items:center;gap:11px;font-size:11px;letter-spacing:.26em;text-transform:uppercase;color:var(--g1);margin-bottom:22px;}
.sec-eyebrow .no{font-weight:700;color:var(--ink-dim);}
h2.sec{font-family:var(--serif);font-weight:400;font-size:clamp(23px,3vw,33px);line-height:1.25;letter-spacing:-.01em;margin:0 0 20px;color:var(--ink);max-width:26ch;}
h3.sub{font-family:var(--serif);font-weight:400;font-size:21px;line-height:1.3;color:var(--ink);margin:34px 0 12px;}
.prose{max-width:58ch;font-size:16.5px;line-height:1.75;color:var(--ink-soft);font-weight:300;}
.prose p{margin:0 0 1.05em;}
.prose p:last-child{margin-bottom:0;}
.prose em{color:var(--g1);font-style:italic;}
.prose b,.prose strong{color:var(--ink);font-weight:600;}
.prose ul{margin:0 0 1.05em;padding-left:0;list-style:none;}
.prose li{position:relative;padding-left:18px;margin:9px 0;}
.prose li::before{content:"";position:absolute;left:0;top:11px;width:6px;height:6px;border-radius:1px;background:var(--g2);}
.fine{font-size:13px;color:var(--ink-dim);}
.citation{overflow-wrap:anywhere;}

/* ---- Research data table (research/* study pages) ---- */
.data-table-wrap{overflow-x:auto;margin:20px 0;}
.data-table{border-collapse:collapse;width:100%;min-width:540px;font-size:13.5px;}
.data-table caption{caption-side:top;text-align:left;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-dim);margin-bottom:10px;}
.data-table th,.data-table td{padding:8px 14px;text-align:right;border-bottom:1px solid var(--line);}
.data-table thead th{padding:9px 14px;border-bottom:1px solid var(--line-strong);color:var(--ink);font-weight:600;}
.data-table thead th:first-child,.data-table td:first-child,.data-table th[scope="row"]{text-align:left;}
.data-table th[scope="row"]{font-weight:400;color:var(--ink-soft);}
.data-table tbody tr:last-child th,.data-table tbody tr:last-child td{border-bottom:none;}

/* ---- Chart legend + direct endpoint labels (research/* study pages) ---- */
.chart-legend{list-style:none;display:flex;flex-wrap:wrap;gap:10px 22px;margin:16px 0 0;padding:0;font-family:var(--sans);font-size:12.5px;color:var(--ink-soft);}
.chart-legend li{display:flex;align-items:center;gap:8px;}
.chart-legend .sw{width:18px;height:0;display:inline-block;flex:none;}
.exhibit-chart{position:relative;}
.exhibit-chart .pt-label{position:absolute;right:2px;transform:translateY(-50%);white-space:nowrap;font-family:var(--sans);font-size:11px;font-weight:600;background:var(--panel);padding:1px 5px;border-radius:3px;pointer-events:none;}
@media(max-width:480px){.exhibit-chart .pt-label{font-size:9.5px;padding:1px 4px;}}

/* ---- Hero ---- */
.hero{padding:64px 0 40px;position:relative;z-index:1;}
@media(max-width:600px){.hero{padding:30px 0 28px;}.eyebrow{margin-bottom:18px;}.legend{display:none;}.fine{font-size:13.5px;}a.q-card .meta,.watch .m{font-size:11.5px;}}
.hero h1.lead{max-width:24ch;}
@media(max-width:1240px){.nav a.btn{color:#0a0f0d;}}
.hero .doors{margin-top:30px;max-width:660px;}
.door-lead{margin:0 0 14px;font-family:var(--serif);font-size:26px;font-weight:500;color:var(--ink);}
.door-lead em{color:var(--g1);}
.door-pair{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.door-pair .door-q{flex:1 0 auto;margin-bottom:16px;}
.door-pair .door-a{align-self:center;}
.door-pair .door-role{text-align:center;}
.door-pair .door-role{margin-top:10px;min-height:2.7em;}
a.door{display:flex;flex-direction:column;text-decoration:none;border:1px solid var(--line-strong);border-radius:12px;background:linear-gradient(180deg,var(--panel2),var(--panel));padding:20px 22px;transition:border-color .18s,transform .18s,box-shadow .18s;}
a.door:hover{border-color:var(--g1);transform:translateY(-3px);box-shadow:0 16px 34px rgba(0,0,0,.18);}
a.door:hover .door-a .ch{transform:translateX(4px);}
.door-q{display:block;font-family:var(--serif);font-style:italic;font-size:17.5px;line-height:1.45;color:var(--ink);}
.door-a{display:inline-flex;align-items:center;gap:9px;align-self:flex-start;margin-top:0;background:var(--grad);color:#0a0f0d;border-radius:7px;padding:10px 16px;font-family:var(--sans);font-size:11.5px;letter-spacing:.07em;text-transform:uppercase;font-weight:700;}
.door-a .ch{transition:transform .18s;}
.door-role{display:block;margin-top:10px;font-size:12.5px;color:var(--ink-dim);}
a.door-both{flex-direction:column;align-items:center;text-align:center;margin-top:14px;border-style:dashed;padding:18px 22px;}
a.door-both .door-q{font-size:16px;margin-bottom:14px;}
a.door-both .door-a{margin-top:0;align-self:center;background:transparent;color:var(--g1);border:1.5px solid var(--g1);padding:9px 15px;border-radius:7px;}
@media(max-width:640px){.door-pair{grid-template-columns:1fr;}.door-lead{font-size:23px;}}
@media (prefers-reduced-motion: reduce){a.door,a.door .ch{transition:none;}a.door:hover{transform:none;}}
.hero .btn-row{margin-top:26px;}

/* ---- Hero two-column with featured video ---- */
.hero-grid{display:grid;grid-template-columns:1.15fr .85fr;grid-template-areas:"copy media" "roles media";column-gap:56px;row-gap:0;align-items:center;}
.hero-copy{grid-area:copy;}
.hero-media{grid-area:media;align-self:center;}
.hero-media .feature-card{margin:0 36px 0 auto;}
.hero-grid .doors{grid-area:roles;align-self:start;}
@media(max-width:980px){.hero-grid{grid-template-columns:1fr;grid-template-areas:"copy" "roles" "media";}.hero-media{margin-top:34px;}.hero-media .feature-card{margin:0 auto;}}
.feature-card{display:block;text-decoration:none;border-radius:16px;overflow:hidden;border:1px solid var(--line-strong);box-shadow:0 18px 44px rgba(28,36,32,.16);transition:transform .25s,box-shadow .25s;position:relative;}
.feature-card:hover{transform:translateY(-4px);box-shadow:0 22px 52px rgba(28,36,32,.20);}
.feature-card svg{display:block;width:100%;height:auto;}
.feature-card .cap{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 18px;background:var(--panel);text-decoration:none;}
a.cap:hover .m{color:var(--g1);}
.feature-card .video{margin:0;border:none;border-radius:0;}
.feature-card .cap .t{font-family:var(--serif);font-size:16px;line-height:1.35;color:var(--ink);font-weight:400;}
.feature-card .cap .m{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-dim);white-space:nowrap;}

/* ---- Pull quote ---- */
.pull{font-family:var(--serif);font-style:italic;font-weight:300;font-size:clamp(24px,3.2vw,36px);line-height:1.35;color:var(--ink);max-width:26ch;margin:34px 0 0;}
.pull em{color:var(--g1);font-style:italic;}
/* A pull quote carries no bottom margin, which is right where it closes a
   section and wrong where the argument carries on underneath it - the next
   paragraph sat flush against the quote on five insight pages. Slightly less
   than the 34px above, so the quote stays attached to the line that set it up. */
.pull + .prose{margin-top:30px;}

/* ---- Stand diagram ---- */
.stand-row{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:34px;}
@media(max-width:880px){.stand-row{grid-template-columns:1fr;max-width:420px;}}
.stand{text-align:left;}
/* Stand section: pair the pull-quote and the "where should the owner stand" video side-by-side on desktop */
.stand-watch{margin-top:36px;}
.stand-watch .pull{margin:0;}
.stand-watch .feature-card{max-width:360px;margin:24px auto 0;}
@media(min-width:721px){
  .stand-watch{display:grid;grid-template-columns:1fr 360px;gap:52px;align-items:center;}
  .stand-watch .feature-card{margin:0;}
}
.stand svg{display:block;width:100%;height:auto;border:1px solid var(--line);border-radius:12px;}
.stand .c1,.stand .c2,.stand .c3{animation:hitFly 3.4s cubic-bezier(.45,0,.55,1) infinite;}
.stand .c2{animation-delay:.8s;}
.stand .c3{animation-delay:1.6s;}
@keyframes hitFly{0%{transform:translate(-26px,-18px);opacity:0;}28%{opacity:1;}55%{transform:translate(0,0);opacity:1;}68%{opacity:0;}100%{transform:translate(0,0);opacity:0;}}
.stand .imp{animation:impPulse 3.4s ease-in-out infinite;}
.stand .imp.i2{animation-delay:.8s;}
.stand .imp.i3{animation-delay:1.6s;}
@keyframes impPulse{0%,48%{opacity:0;}58%{opacity:.95;}78%,100%{opacity:0;}}
.stand .ring{animation:standRing 3.4s ease-in-out infinite;transform-origin:center;transform-box:fill-box;}
@keyframes standRing{0%,100%{opacity:.4;transform:scale(1);}50%{opacity:.1;transform:scale(1.16);}}
.stand .step{opacity:0;animation:stepGo 2.6s ease-in-out infinite;}
.stand .s2{animation-delay:.35s;}
.stand .s3{animation-delay:.7s;}
@keyframes stepGo{0%{opacity:0;transform:translateX(7px);}22%{opacity:.9;transform:translateX(0);}55%{opacity:.9;}80%,100%{opacity:0;transform:translateX(0);}}
.stand .grow{stroke-dasharray:300;stroke-dashoffset:300;animation:growDraw 4.2s ease-out infinite;}
@keyframes growDraw{0%{stroke-dashoffset:300;opacity:0;}12%{opacity:1;}55%{stroke-dashoffset:0;opacity:1;}88%{opacity:1;}100%{stroke-dashoffset:0;opacity:0;}}
.stand .growhead{animation:growHead 4.2s ease-out infinite;}
@keyframes growHead{0%,45%{opacity:0;}60%,88%{opacity:1;}100%{opacity:0;}}
@media (prefers-reduced-motion: reduce){.stand .c1,.stand .c2,.stand .c3,.stand .imp,.stand .ring,.stand .step{animation:none;opacity:.85;}.stand .grow{animation:none;stroke-dasharray:none;opacity:1;}.stand .growhead{animation:none;opacity:1;}}
.stand h3{font-family:var(--serif);font-weight:400;font-size:19px;color:var(--ink);margin:16px 0 6px;}
.stand p{margin:0;font-size:13.5px;line-height:1.6;color:var(--ink-dim);font-weight:300;}
.stand .tag{display:inline-block;font-size:10.5px;font-weight:700;letter-spacing:.18em;color:var(--g1);margin-top:14px;text-transform:uppercase;}

/* ---- Exhibit frame (dashboard mock) ---- */
.exhibit-frame.compact,.exhibit-cap.compact{max-width:760px;margin-left:auto;margin-right:auto;}
.reads{display:grid;grid-template-columns:1fr 1fr;gap:14px 28px;margin-top:22px;max-width:920px;}
.reads .r{position:relative;padding-left:36px;font-size:14.5px;line-height:1.6;color:var(--ink-soft);}
.reads .r b{color:var(--ink);}
.reads .n{position:absolute;left:0;top:0;width:24px;height:24px;border-radius:50%;border:1px solid var(--line-strong);display:inline-flex;align-items:center;justify-content:center;font-family:var(--sans);font-size:10.5px;font-weight:700;color:var(--g1);}
@media(max-width:600px){.reads{grid-template-columns:1fr;}}
.case{display:grid;grid-template-columns:1fr 360px;gap:44px;align-items:center;margin-top:6px;}
.case .stage{font-family:var(--sans);font-size:11px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:var(--g1);margin:24px 0 8px;}
.case .stage:first-child{margin-top:0;}
@media(max-width:860px){.case{grid-template-columns:1fr;}.case > div:last-child{max-width:360px;margin:0 auto;}}
.exhibit-frame{margin-top:30px;border:1px solid var(--line-strong);border-radius:14px;overflow:hidden;box-shadow:0 16px 40px rgba(28,36,32,.14);}
.exhibit-frame .chrome{display:flex;align-items:center;gap:7px;padding:11px 16px;background:var(--panel2);border-bottom:1px solid var(--line);}
.exhibit-frame .chrome i{width:9px;height:9px;border-radius:50%;background:var(--line-strong);display:block;}
.exhibit-frame .chrome .url{margin-left:10px;font-size:10.5px;letter-spacing:.08em;color:var(--ink-dim);text-transform:uppercase;}
.exhibit-frame svg{display:block;width:100%;height:auto;}
.exhibit-cap{display:flex;gap:14px;align-items:baseline;margin-top:16px;}
.exhibit-cap .tag{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--g1);border:1px solid rgba(141,198,63,.4);border-radius:3px;padding:5px 9px;flex:none;}
.exhibit-cap p{margin:0;font-size:13.5px;line-height:1.6;color:var(--ink-dim);font-weight:300;}
.exhibit-cap p b{color:var(--ink);font-weight:600;}

/* ---- The cash-view exhibit (/financial-leadership/, /fractional-cfo-sarasota/).
   The house card, no browser chrome: the chrome belongs to the real dashboard
   screenshot on / and /proof/, and this is a drawn exhibit, not a screenshot.
   Built in HTML rather than a fixed-viewBox SVG so the type holds real sizes at
   the ~430px the hero column gives it - the SVG it replaced scaled to 0.672 and
   set its annotations at 8.7px. ---- */
.cashv{margin-top:30px;background:rgba(20,28,24,.45);border:1px solid var(--line-strong);
       border-radius:12px;padding:20px 20px 18px;box-shadow:0 16px 40px rgba(0,0,0,.18);}
.cashv.compact{max-width:640px;}
.cashv-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;
            padding-bottom:14px;border-bottom:1px solid var(--line);}
.cashv-head .t{font-size:10.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-dim);}
.cashv-head .m{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-dim);opacity:.75;}
.cashv-wrap{position:relative;padding-right:62px;margin-top:18px;}
.cashv-plot{position:relative;height:112px;display:flex;align-items:flex-end;gap:5px;}
.cashv-plot i{flex:1;display:block;background:var(--line-strong);border-radius:2px 2px 0 0;}
.cashv-plot i.low{background:var(--g1);opacity:.55;}
.cashv-floor{position:absolute;left:0;right:-62px;bottom:41px;border-top:1px dashed var(--ink-dim);opacity:.6;}
.cashv-floor span{position:absolute;right:0;top:-14px;width:52px;font-size:9.5px;line-height:1.3;
                  letter-spacing:.08em;text-transform:uppercase;color:var(--ink-dim);text-align:right;}
.cashv-ticks{display:flex;gap:5px;margin-top:7px;}
.cashv-ticks span{flex:1;text-align:center;font-size:9px;color:var(--ink-dim);opacity:.7;}
.cashv-ticks span.on{color:var(--g1);font-weight:700;opacity:1;}
.cashv-stats{display:flex;margin-top:18px;border-top:1px solid var(--line);padding-top:14px;}
.cashv-stats div{flex:1;display:flex;flex-direction:column;}
.cashv-stats div + div{border-left:1px solid var(--line);padding-left:16px;}
.cashv-stats .k{display:block;flex:1;font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-dim);margin-bottom:7px;}
.cashv-stats .v{font-size:21px;font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums;}
.cashv-stats .v.acc{color:var(--g1);}
/* Why the trough happens. A thirteen-week that does not name its cause is a shape,
   not a forecast - and the right answer depends on the cause. */
.cashv-why{margin:12px 0 0;font-size:12.5px;line-height:1.55;color:var(--ink-soft);}
.cashv-why b{color:var(--ink);font-weight:600;}
/* The decision, answered four ways with no recommendation. A verdict ("not yet") both
   made the seat look thin and broke helpful-never-prescriptive; the options do neither. */
.cashv-dec{margin-top:16px;border-top:1px solid var(--line);padding-top:15px;}
.cashv-dec .d{display:block;font-size:14.5px;font-weight:600;line-height:1.35;color:var(--ink);}
.cashv-opts{margin-top:12px;}
.cashv-opts .o{padding:11px 0;}
.cashv-opts .o + .o{border-top:1px solid var(--line);}
.cashv-opts .w{display:block;font-size:13.5px;font-weight:600;line-height:1.35;color:var(--ink);}
.cashv-opts .r{display:block;margin-top:3px;font-size:12.5px;line-height:1.55;color:var(--ink-soft);}
.cashv-opts .r b{color:var(--ink);font-weight:600;}
.cashv-note{margin:14px 0 0;padding-top:12px;border-top:1px solid var(--line);
            font-size:11.5px;line-height:1.55;color:var(--ink-dim);}
.cashv-cap{margin:14px 2px 0;font-size:12.5px;line-height:1.6;color:var(--ink-dim);font-weight:300;}
.cashv-cap b{color:var(--ink-soft);font-weight:600;}

/* Hero portrait. /financial-leadership/ leads with the person, not the instrument:
   the revenue side sells a system and shows a dashboard, this side sells judgment
   and the H1 says so. Same house card as .cashv - hairline, radius, no edge accent. */
.hero-port{margin:0;border:1px solid var(--line-strong);border-radius:12px;overflow:hidden;
           background:rgba(20,28,24,.45);box-shadow:0 16px 40px rgba(0,0,0,.18);}
.hero-port img{display:block;width:100%;aspect-ratio:1/1.08;object-fit:cover;object-position:50% 12%;}
.hero-port figcaption{padding:13px 18px 14px;border-top:1px solid var(--line);}
.hero-port figcaption b{display:block;font-size:15px;font-weight:600;color:var(--ink);}
.hero-port figcaption span{display:block;margin-top:3px;font-size:10.5px;letter-spacing:.14em;
                           text-transform:uppercase;color:var(--ink-dim);}
.cashv.compact + .cashv-cap{max-width:640px;}
@media(max-width:430px){
  .cashv{padding:18px 16px 16px;}
  .cashv-wrap{padding-right:48px;}
  .cashv-plot{gap:3px;}
  .cashv-floor{right:-48px;}
  .cashv-floor span{width:40px;letter-spacing:.04em;}
  .cashv-ticks{gap:3px;}
  .cashv-stats div + div{padding-left:12px;}
  .cashv-stats .v{font-size:19px;}
}

/* ---- Watch row (video cards) ---- */
.watch-row{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:30px;}
@media(max-width:880px){.watch-row{grid-template-columns:1fr;max-width:360px;margin-left:auto;margin-right:auto;}}
a.watch{display:block;text-decoration:none;border:1px solid var(--line-strong);border-radius:13px;overflow:hidden;background:var(--panel);transition:transform .2s,border-color .2s;}
a.watch:hover{transform:translateY(-3px);border-color:rgba(141,198,63,.5);}
a.watch svg{display:block;width:100%;height:auto;}
a.watch .t{padding:15px 18px 4px;font-family:var(--serif);font-size:16.5px;line-height:1.35;color:var(--ink);display:block;}
a.watch .m{padding:0 18px 16px;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-dim);display:block;}

/* ---- Poster thumb (real video stills, shared by watch cards / q-cards / hero card) ---- */
.thumb{position:relative;display:block;aspect-ratio:4/5;overflow:hidden;background:#0b1210;}
@supports not (aspect-ratio:4/5){.thumb{height:0;padding-top:125%;}}
.thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;}
.thumb .pb{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:56px;height:56px;border-radius:50%;background:var(--grad);display:flex;align-items:center;justify-content:center;box-shadow:0 10px 26px rgba(5,8,7,.35);transition:transform .18s;}
a.watch:hover .thumb .pb,a.q-card:hover .thumb .pb{transform:translate(-50%,-50%) scale(1.07);}
.thumb .pb::before{content:"";display:block;width:0;height:0;border-left:17px solid #0a0f0d;border-top:10px solid transparent;border-bottom:10px solid transparent;margin-left:4px;}
a.watch:hover .thumb img,.feature-card:hover .thumb img{transform:scale(1.025);}
.thumb img{transition:transform .35s ease;}
@media (prefers-reduced-motion: reduce){.thumb img,a.watch:hover .thumb img,.feature-card:hover .thumb img{transition:none;transform:none;}.thumb .pb{transition:none;}a.watch:hover .thumb .pb,a.q-card:hover .thumb .pb{transform:translate(-50%,-50%);}}

/* ---- Fit chips ---- */
.fit{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px;}
.fit .it{font-size:13px;color:var(--ink-soft);border:1px solid var(--line-strong);border-radius:30px;padding:9px 16px;background:rgba(20,28,24,.4);}
.fit .it b{color:var(--ink);font-weight:600;}

/* ---- Tiles (face-and-reveal) ---- */
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:28px;align-items:stretch;}
.grid.two{grid-template-columns:repeat(2,1fr);}
@media(max-width:880px){.grid{grid-template-columns:1fr;}}
@media(max-width:640px){.grid.two{grid-template-columns:1fr;}}
button{font-family:var(--sans);}
.tile{display:flex;flex-direction:column;width:100%;text-align:left;margin:0;border:1px solid rgba(150,180,165,0.22);border-radius:13px;background:linear-gradient(180deg,var(--panel2),var(--panel));padding:26px 24px 20px;cursor:pointer;position:relative;overflow:hidden;transition:border-color .2s,transform .2s,box-shadow .2s;color:inherit;font:inherit;box-shadow:0 14px 30px rgba(0,0,0,.34);}
.tile::before{content:"";position:absolute;left:0;top:0;height:3px;width:0;background:var(--grad);transition:width .4s ease;}
.tile:hover{border-color:rgba(141,198,63,.5);transform:translateY(-3px);box-shadow:0 18px 38px rgba(0,0,0,.42);}
.tile:hover::before{width:100%;}
.tile .step{font-size:11px;font-weight:700;letter-spacing:.18em;color:var(--g1);margin-bottom:14px;}
.tile .role{font-family:var(--serif);font-style:italic;font-size:14px;color:var(--ink-dim);margin-bottom:6px;}
.tile h3,.tile .tile-h{display:block;font-family:var(--serif);font-weight:400;font-size:21px;line-height:1.22;color:var(--ink);margin:0 0 12px;}
.tile .step,.tile .role,.tile .face,.tile .promise{display:block;}
.tile .face{font-size:14px;line-height:1.6;color:var(--ink-soft);font-weight:300;margin:0;}
.tile .promise{margin-top:14px;font-size:12.5px;color:var(--ink-dim);font-style:italic;font-family:var(--serif);}
.tile-foot{margin-top:auto;padding-top:18px;display:flex;align-items:center;gap:7px;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-dim);}
.tile:hover .tile-foot{color:var(--g1);}
.tile-foot .ch{font-size:14px;}

/* ---- Practice cards (two seats) ---- */
a.pcard{text-decoration:none;color:inherit;}
a.pcard:hover{border-color:var(--g1);transform:translateY(-2px);}
.pcard{transition:border-color .2s,transform .2s;border:1px solid var(--line-strong);border-radius:13px;background:linear-gradient(180deg,var(--panel2),var(--panel));padding:26px 26px 22px;display:flex;flex-direction:column;}
.pcard .fit{margin-top:auto;padding-top:18px;flex-direction:column;align-items:stretch;}
.pcard .fit .it{width:100%;box-sizing:border-box;text-align:left;}
.pcard-head{display:flex;gap:16px;align-items:center;margin-bottom:14px;}
.pcard-head img{width:56px;height:56px;border-radius:50%;object-fit:cover;border:1px solid var(--line-strong);flex:none;}
.pcard-eyebrow{display:block;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--g1);margin-bottom:6px;font-weight:600;}
.pcard h3{font-family:var(--serif);font-weight:400;font-size:20px;line-height:1.25;color:var(--ink);margin:0;}
.pcard p{font-size:14px;line-height:1.65;color:var(--ink-soft);font-weight:300;margin:0;}
.pcard .fit{margin-top:14px;margin-bottom:22px;}
.pcard .fit + .btn{margin-top:auto;}
.pcard .plink{display:inline-flex;align-items:center;gap:8px;margin-top:auto;padding-top:18px;font-size:12px;letter-spacing:.08em;text-transform:uppercase;font-weight:600;text-decoration:none;color:var(--g1);}

/* ---- Question links (home library block) ---- */
.q-group{font-family:var(--sans);font-size:11px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:var(--g1);margin:30px 0 0;}
.q-group:first-of-type{margin-top:22px;}
.q-links{display:grid;grid-template-columns:repeat(2,1fr);gap:0 30px;margin-top:14px;}
@media(max-width:760px){.q-links{grid-template-columns:1fr;}}
a.q-link{display:flex;justify-content:space-between;align-items:baseline;gap:14px;padding:13px 2px;border-bottom:1px solid var(--line);text-decoration:none;font-family:var(--serif);font-size:16.5px;line-height:1.35;color:var(--ink);transition:color .15s;}
a.q-link:hover{color:var(--g1);}
a.q-link .ch{color:var(--g1);flex:none;}

/* ---- Legend chips ---- */
.legend{display:flex;gap:18px;flex-wrap:wrap;margin-top:22px;}
.legend .it{display:flex;align-items:center;gap:8px;font-size:10.5px;letter-spacing:.04em;color:var(--ink-soft);text-transform:uppercase;}
.chip{width:12px;height:12px;border-radius:3px;flex:none;}
.chip.face{background:transparent;border:1px solid var(--g1);}
.chip.mach{background:rgba(86,168,63,.22);border:1px solid var(--g2);}
.chip.evi{background:rgba(141,198,63,.12);border:1px solid var(--g1);border-style:dashed;}

/* ---- Proof ---- */
.proof-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:26px;}
@media(max-width:880px){.proof-grid{grid-template-columns:1fr;}}
.proof{border:1px solid var(--line-strong);border-radius:11px;background:rgba(20,28,24,.45);padding:22px 22px 20px;}
.proof .big{font-family:var(--serif);font-size:30px;color:var(--g1);line-height:1;margin-bottom:6px;}
.proof .lbl{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-dim);margin-bottom:12px;}
.proof p{margin:0;font-size:13.5px;line-height:1.6;color:var(--ink-soft);font-weight:300;}
.proof .cases{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px;}
.proof .cases li{font-size:13.5px;line-height:1.6;color:var(--ink-soft);font-weight:300;border-left:2px solid var(--line-strong);padding-left:12px;}
.proof .cases li b{color:var(--ink);font-weight:600;}
.exhibit{margin-top:24px;border:1px dashed var(--line-strong);border-radius:11px;padding:22px 24px;background:rgba(20,28,24,.3);display:flex;gap:20px;align-items:flex-start;flex-wrap:wrap;}
.exhibit .tag{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--g1);border:1px solid rgba(141,198,63,.4);border-radius:3px;padding:6px 10px;flex:none;}
.exhibit p{margin:0;font-size:14px;line-height:1.65;color:var(--ink-soft);font-weight:300;flex:1;min-width:240px;}
.exhibit p b{color:var(--ink);font-weight:600;}

/* ---- Guide ---- */
.guide{display:grid;grid-template-columns:220px 1fr;gap:36px;align-items:start;margin-top:8px;}
@media(max-width:760px){.guide{grid-template-columns:1fr;}.guide .photo{max-width:260px;margin-left:auto;margin-right:auto;}}
.guide .photo{border-radius:12px;overflow:hidden;border:1px solid var(--line-strong);aspect-ratio:220/261;}
.guide-credits{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px;}
.guide-credits .c{font-size:12.5px;color:var(--ink-soft);border-left:2px solid var(--g2);padding:3px 0 3px 13px;}
.guide-credits .c b{color:var(--ink);font-weight:600;}
/* Standing alone (no portrait beside it) the credits row would run the full column
   while the prose above sits at 58ch. Only /financial-leadership/ uses this. */
.guide-credits.solo{max-width:58ch;}

/* ---- Testimonials ---- */
.quotes{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin-top:26px;}
@media(max-width:760px){.quotes{grid-template-columns:1fr;}}
.quote{border:1px solid var(--line-strong);border-radius:11px;background:rgba(20,28,24,.45);padding:22px 24px;}
.quote p{margin:0 0 14px;font-family:var(--serif);font-weight:300;font-size:16.5px;line-height:1.6;color:var(--ink-soft);}
.quote .who{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-dim);}
.quote .who b{color:var(--g1);font-weight:600;}

/* ---- Scorecard ---- */
.sc{margin-top:28px;border:1px solid var(--line-strong);border-radius:14px;background:linear-gradient(180deg,var(--panel2),var(--panel));padding:28px 28px 24px;}
@media(max-width:600px){.sc{padding:20px 16px 18px;}}
.sc-head{display:flex;align-items:baseline;justify-content:space-between;flex-wrap:wrap;gap:10px;margin-bottom:6px;}
.sc-head h2,.sc-head h3{font-family:var(--serif);font-weight:400;font-size:20px;color:var(--ink);margin:0;}
.sc-reset{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-dim);background:transparent;border:1px solid var(--line-strong);border-radius:6px;padding:13px 16px;cursor:pointer;transition:all .18s;}
.sc-reset:hover{border-color:var(--g1);color:var(--g1);}
.sc-sub{font-size:13px;color:var(--ink-dim);margin:0 0 18px;font-weight:300;}
.sc-area{padding:15px 0;border-top:1px solid var(--line);}
.sc-head{display:flex;align-items:center;justify-content:space-between;gap:14px;width:100%;text-align:left;background:transparent;border:none;padding:0;margin:0;cursor:pointer;font:inherit;color:inherit;}
.sc-head .sc-q{margin-bottom:0;flex:1;}
.sc-state{font-family:var(--sans);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--g1);flex:none;}
.sc-head .faq-chev{width:30px;height:30px;}
.sc-area:not(.collapsed) .sc-head .faq-chev{transform:rotate(180deg);}
.sc-area .sc-body{padding-top:12px;}
.sc-area.collapsed .sc-body{display:none;}
.sc-area:first-of-type{border-top:none;}
.sc-q{font-size:14px;color:var(--ink-soft);margin-bottom:10px;line-height:1.5;}
.sc-q b{color:var(--ink);font-weight:600;}
.sc-dots{display:flex;gap:8px;flex-wrap:wrap;}
.sc-dot{width:44px;height:44px;border-radius:8px;border:1px solid var(--line-strong);background:transparent;color:var(--ink-dim);font-size:12px;cursor:pointer;transition:all .15s;}
.sc-dot:hover{border-color:var(--g1);color:var(--g1);}
.sc-dot.on{background:var(--grad);border-color:transparent;color:#0a0f0d;font-weight:700;}
.sc-scale{display:flex;justify-content:space-between;font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-dim);margin-top:7px;max-width:260px;}
.sc-out{margin-top:22px;border-top:1px solid var(--line);padding-top:20px;}
.sc-band{font-family:var(--serif);font-size:18px;color:var(--ink-dim);margin:0 0 6px;}
.sc-band b{color:var(--g1);font-style:italic;font-weight:400;}
.sc-desc{font-size:14px;line-height:1.6;color:var(--ink-soft);font-weight:300;margin:0;}

/* ---- Scorecard sliders ---- */
.sc-area[data-area]{padding:26px 0 24px;border-top:1px solid var(--line);}
.sc-area[data-area]:first-of-type{border-top:none;padding-top:6px;}
.sc-no{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;border:1px solid var(--line-strong);font-size:12px;font-weight:700;color:var(--g1);margin-right:10px;flex:none;}
.sc-title{font-family:var(--serif);font-size:19px;color:var(--ink);}
.sc-area .sc-q{display:flex;align-items:center;margin-bottom:10px;}
.sc-prompt{margin:0 0 12px;font-size:13.5px;line-height:1.65;color:var(--ink-dim);font-weight:300;max-width:64ch;}
.sc-stmts{margin:0;padding:0;list-style:none;max-width:64ch;}
.sc-stmt{position:relative;padding-left:18px;margin:7px 0;font-size:14px;line-height:1.55;color:var(--ink-soft);}
.sc-stmt::before{content:"";position:absolute;left:0;top:9px;width:6px;height:6px;border-radius:1px;background:var(--g2);}
.sc-sliderwrap{margin-top:18px;max-width:520px;}
.sc-word{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-dim);margin-bottom:10px;}
.sc-sliderwrap.answered .sc-word{color:var(--g1);}
.sc-slider{-webkit-appearance:none;appearance:none;width:100%;height:6px;border-radius:5px;background:var(--sc-track,rgba(28,36,32,.14));outline:none;cursor:pointer;display:block;}
.sc-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:26px;height:26px;border-radius:50%;background:#fff;border:3px solid var(--g2);box-shadow:0 2px 8px rgba(28,36,32,.35);cursor:pointer;transition:transform .12s;}
.sc-slider::-webkit-slider-thumb:hover{transform:scale(1.1);}
.sc-slider::-moz-range-thumb{width:26px;height:26px;border-radius:50%;background:#fff;border:3px solid var(--g2);box-shadow:0 2px 8px rgba(28,36,32,.35);cursor:pointer;}
.sc-sliderwrap:not(.answered) .sc-slider::-webkit-slider-thumb{background:#cfd6cf;border-color:#8a988f;}
.sc-sliderwrap:not(.answered) .sc-slider::-moz-range-thumb{background:#cfd6cf;border-color:#8a988f;}
.sc-slider:focus-visible{outline:2px solid var(--g1);outline-offset:4px;}
.sc-slabels{display:flex;justify-content:space-between;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-dim);margin-top:8px;}
@media (prefers-reduced-motion: reduce){.sc-slider::-webkit-slider-thumb{transition:none;}.sc-slider::-webkit-slider-thumb:hover{transform:none;}}

/* ---- Scorecard spectrum readout ---- */
.sc-spectrum{margin:6px 0 18px;}
.sc-track{position:relative;height:8px;border-radius:5px;background:linear-gradient(90deg,rgba(28,36,32,.16),rgba(86,168,63,.45),#2E7D32);}
.sc-marker{position:absolute;top:50%;width:18px;height:18px;border-radius:50%;background:#fff;border:3px solid var(--g3,#2E7D32);transform:translate(-50%,-50%);box-shadow:0 2px 8px rgba(28,36,32,.35);opacity:0;transition:left .35s ease,opacity .3s;}
.sc-zonelabels{display:flex;justify-content:space-between;margin-top:10px;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-dim);}
.sc-zonelabels span.on{color:var(--g1);font-weight:700;}
.sc-banddesc{font-size:14px;line-height:1.65;color:var(--ink-soft);font-weight:300;margin:8px 0 0;max-width:64ch;}
.sc-thin{margin-top:16px;border:1px dashed var(--line-strong);border-radius:10px;padding:14px 18px;font-size:14px;line-height:1.6;color:var(--ink-soft);max-width:64ch;}
.sc-thin-lbl{display:block;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--g1);margin-bottom:7px;}
.sc-orient,.sc-compound{font-size:13.5px;line-height:1.65;color:var(--ink-dim);font-weight:300;margin:14px 0 0;max-width:64ch;}
.sc-foot-note{margin-top:18px;font-size:13px;line-height:1.65;color:var(--ink-dim);font-weight:300;max-width:64ch;}
@media (prefers-reduced-motion: reduce){.sc-marker{transition:none;}}

/* ---- Scorecard strip (the reusable invitation) ---- */
.svc-q{font-family:var(--serif);font-style:italic;font-size:15.5px;line-height:1.5;margin:0 0 8px;color:var(--g1);}
.ph-head{display:flex;align-items:center;gap:20px;margin:6px 0 18px;}
.ph-icon{flex:none;width:64px;height:64px;border:2px solid var(--ink);border-radius:10px;display:flex;align-items:center;justify-content:center;color:var(--g1);}
.ph-icon svg{width:32px;height:32px;display:block;}
@media(max-width:600px){.ph-icon{width:54px;height:54px;}.ph-icon svg{width:27px;height:27px;}.ph-head{gap:14px;}}
.seat-tag{display:inline-block;font-family:var(--sans);font-size:10px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--g1);border:1px solid rgba(141,198,63,.4);border-radius:3px;padding:4px 8px;margin-bottom:12px;}
.phase-art{margin:24px 0 28px;max-width:360px;}
.phase-art svg{display:block;width:100%;height:auto;border:1px solid var(--line);border-radius:12px;}
.split{display:grid;grid-template-columns:1fr 396px;gap:48px;align-items:center;}
.split-media{justify-self:end;margin-right:36px;}
@media(max-width:980px){.split{grid-template-columns:1fr;gap:30px;}.split-media{justify-self:center;margin-right:0;}}
.proof-mix{display:grid;grid-template-columns:1fr 360px;gap:22px 44px;margin-top:18px;align-items:start;}
.pm-video{min-width:0;grid-column:2;grid-row:1 / span 3;align-self:center;}
@media(max-width:980px){.proof-mix{grid-template-columns:1fr;}.pm-video{grid-column:1;grid-row:auto;order:-1;justify-self:center;max-width:360px;}}
.rq-scale{display:flex;gap:6px;margin-top:12px;}
.rq-opt{flex:1;min-height:46px;border:1px solid var(--line-strong);border-radius:8px;background:transparent;font-family:var(--sans);font-size:12.5px;font-weight:600;color:var(--ink-dim);cursor:pointer;padding:4px 2px;line-height:1.15;transition:border-color .15s,background .15s,color .15s;}
.rq-opt[aria-pressed="true"]{background:var(--g2);border-color:var(--g2);color:#0a0f0d;}
.rq-ends{display:flex;justify-content:space-between;font-size:11px;color:var(--ink-dim);margin-top:7px;}
@media(max-width:480px){.rq-opt{font-size:11px;}}
.rq-result{margin-top:18px;border:1px solid var(--line-strong);border-radius:12px;padding:24px 26px;background:linear-gradient(180deg,var(--panel2),var(--panel));}
.rq-result h3{margin:0 0 10px;font-family:var(--serif);font-size:24px;font-weight:500;}
.rq-result p{margin:0;font-size:15.5px;line-height:1.7;color:var(--ink-soft);max-width:64ch;}
.rq-result .btn-row{margin-top:18px;}
.sc-strip{margin-top:30px;border:1px solid var(--line-strong);border-radius:12px;background:rgba(20,28,24,.4);padding:22px 26px;display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;}
.sc-strip .txt{flex:1;min-width:240px;}
.sc-strip .btn{min-width:min(280px,100%);justify-content:center;box-sizing:border-box;}
.sc-strip h3{font-family:var(--serif);font-weight:400;font-size:19px;color:var(--ink);margin:0 0 6px;}
.sc-strip p{margin:0;font-size:13.5px;color:var(--ink-dim);font-weight:300;}

/* ---- On-ramp ---- */
.onramp{margin-top:30px;border:1px solid var(--line-strong);border-radius:14px;background:rgba(20,28,24,.4);padding:30px 30px 28px;}
@media(max-width:600px){.onramp{padding:24px 20px;}}
.onramp h3{font-family:var(--serif);font-weight:400;font-size:24px;color:var(--ink);margin:0 0 14px;max-width:46ch;text-wrap:balance;}
.onramp .prose{max-width:58ch;}
.onramp .btn{margin-top:22px;}
.onramp .fine{margin-top:14px;}

/* ---- CFO strip ---- */
.cfo-strip{border:1px solid var(--line-strong);border-radius:14px;background:linear-gradient(180deg,var(--panel2),var(--panel));padding:28px 30px;display:grid;grid-template-columns:96px 1fr auto;gap:26px;align-items:center;}
@media(max-width:760px){.cfo-strip{grid-template-columns:1fr;gap:18px;}}
.cfo-strip .photo{width:96px;height:96px;border-radius:50%;overflow:hidden;border:1px solid var(--line-strong);}
.cfo-strip h3,.cfo-strip h2.strip-h{font-family:var(--serif);font-weight:400;font-size:21px;line-height:1.3;color:var(--ink);margin:0 0 8px;max-width:none;}
.cfo-strip p{margin:0;font-size:14px;line-height:1.65;color:var(--ink-soft);font-weight:300;max-width:56ch;}

/* ---- Question library ---- */
.q-list{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:28px;}
@media(max-width:980px){.q-list{grid-template-columns:repeat(2,1fr);}}
@media(max-width:600px){.pcard .fit{justify-content:center;}}
@media(max-width:640px){.q-list{grid-template-columns:1fr;max-width:360px;margin-left:auto;margin-right:auto;}}
a.q-card{display:flex;flex-direction:column;border:1px solid var(--line-strong);border-radius:12px;background:linear-gradient(180deg,var(--panel2),var(--panel));padding:0;text-decoration:none;overflow:hidden;transition:border-color .2s,transform .2s;}
a.q-card:hover{border-color:rgba(141,198,63,.5);transform:translateY(-2px);}
a.q-card:hover .thumb img{transform:scale(1.025);}
a.q-card .body{padding:18px 20px 20px;display:flex;flex-direction:column;flex:1;}
a.q-card h3{font-family:var(--serif);font-weight:400;font-size:19px;line-height:1.3;color:var(--ink);margin:0 0 8px;}
a.q-card p{margin:0;font-size:13.5px;color:var(--ink-dim);font-weight:300;line-height:1.6;}
a.q-card .meta{margin-top:auto;padding-top:14px;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--g1);}
/* Flagship card: dark card with the full landscape 16:9 poster as a banner above the text – never cropped, stacks the same on every width. Capped + centred so it isn't a full-bleed slab. */
a.q-card.flag{flex-direction:column;align-items:stretch;max-width:880px;margin-inline:auto;background:linear-gradient(135deg,#1c2721,#0b1210);border-color:rgba(141,198,63,.3);}
a.q-card.flag .thumb{aspect-ratio:16/9;}
@supports not (aspect-ratio:16/9){a.q-card.flag .thumb{padding-top:56.25%;}}
a.q-card.flag .body{padding:22px 26px 24px;}
a.q-card.flag h3{font-size:clamp(21px,2.4vw,26px);color:#f2f6f3;max-width:26ch;}
a.q-card.flag p{color:#a9b8af;max-width:64ch;}
a.q-card.flag .meta{color:#8DC63F;}
@media(min-width:641px){a.q-card.flag .body{padding:26px 34px 28px;}}
.q-list.indepth{grid-template-columns:repeat(2,1fr);}
.q-list.indepth .q-card.flag{max-width:none;margin-inline:0;}
.q-list.indepth .q-card.flag h3{font-size:clamp(19px,2vw,23px);}
@media(max-width:640px){.q-list.indepth{grid-template-columns:1fr;max-width:520px;margin-inline:auto;}}

/* ---- Next question ---- */
.q-next{margin-top:34px;display:grid;grid-template-columns:1fr auto;gap:18px;align-items:center;border:1px solid var(--line-strong);border-radius:12px;background:linear-gradient(180deg,var(--panel2),var(--panel));padding:20px 24px;text-decoration:none;transition:border-color .2s,transform .2s;}
.q-next:hover{border-color:rgba(141,198,63,.5);transform:translateY(-2px);}
.q-next .lbl{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-dim);display:block;margin-bottom:7px;}
.q-next .qq{font-family:var(--serif);font-size:19px;line-height:1.3;color:var(--ink);}
.q-next .ch{font-size:22px;color:var(--g1);}
@media(max-width:640px){.q-next{grid-template-columns:1fr;}.q-next .ch{display:none;}}

/* ---- Seat panel (dark media exhibit, HTML not SVG) ---- */
.seat-panel{margin-top:34px;border-radius:14px;overflow:hidden;border:1px solid var(--line-strong);background:linear-gradient(135deg,#141b17,#0b1210);padding:30px 30px 26px;box-shadow:0 16px 40px rgba(28,36,32,.14);}
.seat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
@media(max-width:760px){.seat-grid{grid-template-columns:1fr;}}
.seat{background:#17201b;border-radius:10px;padding:20px 22px;}
.seat .no{font-size:10.5px;font-weight:700;letter-spacing:.22em;color:#8DC63F;text-transform:uppercase;display:block;margin-bottom:10px;}
.seat h3{font-family:var(--serif);font-style:italic;font-weight:400;font-size:20px;line-height:1.25;color:#f2f6f3;margin:0 0 9px;}
.seat p{margin:0;font-size:13px;line-height:1.6;color:#a9b8af;font-weight:300;}
.seat-panel .rule{height:3px;border-radius:2px;background:linear-gradient(90deg,#2E7D32,#8DC63F);margin:24px 0 14px;}
.seat-panel .foot{font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:#8fa397;}

/* ---- Video facade ---- */
.video{position:relative;border-radius:12px;overflow:hidden;border:1px solid var(--line-strong);background:#000;aspect-ratio:16/9;margin:26px 0;box-shadow:0 14px 34px rgba(28,36,32,.14);}
@supports not (aspect-ratio:16/9){.video{height:0;padding-top:56.25%;}.video.vertical{padding-top:177%;}}
.video.vertical{aspect-ratio:9/16;max-width:380px;}
.video .poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.video .play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:linear-gradient(180deg,transparent 55%,rgba(5,8,7,.28));border:none;cursor:pointer;width:100%;}
.video .play .pbtn{width:72px;height:72px;border-radius:50%;background:var(--grad);display:flex;align-items:center;justify-content:center;box-shadow:0 10px 26px rgba(28,36,32,.30);transition:transform .18s;}
.video .play:hover .pbtn{transform:scale(1.07);}
.video .play .pbtn::before{content:"";display:block;width:0;height:0;border-left:22px solid #0a0f0d;border-top:13px solid transparent;border-bottom:13px solid transparent;margin-left:5px;}
.video iframe,.video video{position:absolute;inset:0;width:100%;height:100%;border:0;}
.video video{object-fit:contain;background:#000;}
.video.four-five{aspect-ratio:4/5;max-width:420px;margin-left:auto;margin-right:auto;}
@supports not (aspect-ratio:4/5){.video.four-five{height:0;padding-top:125%;}}
/* Inside a flex card, give the facade a resolved width so auto-margins don't collapse it to 0. */
.pcard>.video.four-five{width:100%;margin:0 auto;}
.video .dur{position:absolute;right:12px;bottom:12px;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:#f0f4f1;background:rgba(5,8,7,.55);border-radius:4px;padding:5px 9px;pointer-events:none;}

/* ---- Booking calendar facade ---- */
.cal-facade{position:relative;margin-top:26px;border:1px solid var(--line-strong);border-radius:14px;overflow:hidden;background:var(--panel);min-height:220px;display:flex;align-items:center;justify-content:center;}
.cal-facade.loaded{min-height:76vh;display:block;background:#fff;}
.cal-facade iframe{position:absolute;inset:0;width:100%;height:100%;border:0;}
.cal-facade .cal-inner{text-align:center;padding:44px 24px;}
.cal-facade .cal-inner p{margin:0 0 18px;font-size:14px;color:var(--ink-dim);max-width:44ch;}
/* Two seats, two calendars. Named by person rather than by problem, so nobody
   has to diagnose themselves before they can book. Each button carries its own
   data-cal; the joint session stays inside James's schedule, where it lives. */
.cal-pick{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;max-width:720px;margin:0 auto;}
@media(max-width:740px){.cal-pick{grid-template-columns:1fr;max-width:420px;}}
.cal-opt{display:block;width:100%;text-align:left;cursor:pointer;font-family:var(--sans);
         background:var(--card);border:1px solid var(--line-strong);border-radius:11px;
         padding:16px 18px;transition:border-color .15s,box-shadow .15s;}
.cal-opt:hover,.cal-opt:focus-visible{border-color:var(--g1);}
.cal-opt .who{display:block;font-size:15px;font-weight:600;color:var(--ink);line-height:1.3;}
.cal-opt .what{display:block;margin-top:5px;font-size:10.5px;font-weight:500;letter-spacing:.11em;
               text-transform:uppercase;color:var(--ink-dim);}

/* ---- Forms ------------------------------------------------------------------
   Both form components shipped with no base styling whatsoever: browser-default
   inputs at Arial 13.3px inside a Montserrat 16.5px page, 147px wide in a 327px
   form, 2px inset bevels, and under 16px - which makes iOS Safari zoom the page
   the moment a field takes focus. Structure lives here; colour stays in
   variant-light.css, which already had the only three rules these fields had.

   The honeypot mattered more than the styling. `.hp-field` had NO hiding rule on
   any of the 37 pages carrying a form, so "Company website" rendered as a real,
   inviting input - and a visitor who filled it in had their message dropped as
   spam. `aria-hidden="true"` had it exactly backwards: screen readers skipped it
   and only sighted people could see it. ---------------------------------------- */
.hp-field{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
          overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;}

.contact-form{display:flex;flex-direction:column;gap:17px;margin-top:22px;}
.contact-form .ff{display:block;}
.contact-form .fl{display:block;font-size:11px;font-weight:600;letter-spacing:.12em;
                  text-transform:uppercase;color:var(--ink-dim);margin-bottom:8px;}
.contact-form .fl .opt{font-weight:400;letter-spacing:.06em;text-transform:none;opacity:.8;}
.contact-form input,.contact-form textarea{display:block;width:100%;
  font-family:var(--sans);font-size:16px;line-height:1.5;font-weight:400;
  border:1px solid var(--line-strong);border-radius:10px;padding:13px 15px;
  -webkit-appearance:none;appearance:none;transition:border-color .15s,box-shadow .15s;}
.contact-form textarea{resize:vertical;min-height:136px;}
.contact-form button[type="submit"]{align-self:flex-start;}
@media(max-width:520px){
  .contact-form button[type="submit"]{align-self:stretch;justify-content:center;}
}

.email-form{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px;max-width:460px;}
.email-form input{flex:1 1 220px;min-width:0;display:block;
  font-family:var(--sans);font-size:16px;line-height:1.5;
  border:1px solid var(--line-strong);border-radius:10px;padding:12px 14px;
  -webkit-appearance:none;appearance:none;}
.email-form button{flex:0 0 auto;}

/* ---- Footer ----
   Restored 26 Aug 2026. The whole footer block was dropped by 8bdda6c (17 Aug);
   4fe46f4 later re-added only the FORM rules from it, so forms kept working while
   the footer lost its grid, its block links and its legal row. Colors are
   overridden downstream by variant-light.css - this is the base layer only. */
.site-foot{margin-top:70px;border-top:1px solid var(--line-strong);background:linear-gradient(180deg,rgba(22,29,26,.35),rgba(10,15,13,0));}
.site-foot .cols{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px;padding:52px 0 40px;}
@media(max-width:860px){.site-foot .cols{grid-template-columns:1fr;gap:32px;}}
.site-foot h4{font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-dim);font-weight:600;margin:0 0 16px;}
.site-foot a{color:var(--ink-soft);text-decoration:none;font-size:13.5px;font-weight:300;}
.site-foot a:hover{color:var(--g1);}
.site-foot .lnk{display:block;padding:9px 0;}
.site-foot .legal{border-top:1px solid var(--line);padding:22px 0 34px;display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;font-size:12px;color:var(--ink-dim);}
.site-foot .legal-links a{text-decoration:none;}
.site-foot .legal-links a:hover{text-decoration:underline;}
.email-form input::placeholder{color:var(--ink-dim);}
.ts-widget{margin:8px 0;}
.email-form .ts-widget{flex-basis:100%;margin:8px 0 0;}

/* ---- Insights (the newsletter, on the site) ---- */
/* One measure for the whole article. The hero was at wrap width (1072px) while the
   prose sat at 58ch (653px) and h2.sec at 26ch (589px) - five different widths down
   one page, so the picture read as detached from the words and the headings looked
   smaller than the text they headed. Everything now shares .ins-wrap. The pull-quote
   keeps its own narrower measure: that one IS deliberate emphasis. */
.ins-wrap > *{max-width:700px;}
.ins-wrap .prose,
.ins-wrap h2.sec,
.ins-wrap .ins-email,
.ins-wrap .ins-def,
.ins-wrap h1.lead{max-width:none;}
.ins-wrap h2.sec{margin-top:6px;}
/* Long-form gets larger type than a 200-word answer does. 18px over a 700px
   column sets at about 72 characters - inside the comfortable range, and the
   column still starts on the same left edge as every other page. */
.ins-wrap .prose{font-size:18px;line-height:1.78;}
.ins-wrap .sc-strip{flex-direction:column;align-items:flex-start;gap:16px;}
.ins-hero{margin:26px 0 0;border-radius:13px;overflow:hidden;line-height:0;}
.ins-hero img{display:block;width:100%;height:auto;}
.ins-meta{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:18px;
  font-size:12px;letter-spacing:.08em;text-transform:uppercase;}
.ins-meta .dot{opacity:.5;}
.ins-email{margin:22px 0 0;border:1px solid var(--line-strong);border-radius:12px;
  padding:24px 26px;max-width:58ch;}
.ins-email p{margin:0 0 .95em;font-size:15.5px;line-height:1.7;font-weight:300;}
.ins-email p:last-child{margin-bottom:0;}
.ins-email-sub{font-family:var(--sans);font-size:12px;letter-spacing:.14em;
  text-transform:uppercase;font-weight:600;margin-bottom:1.2em!important;}
/* A definition set off from the prose - a term and what it means. Plain paragraphs
   rather than a <dl>, because Medium's importer flattens a <dl> subtree to one text
   run and welds the term to its definition; _middleware.js maps .ins-def-term to a
   heading so a crawler still gets one per term. The label is deliberately NOT
   text-transform:uppercase: the newsletter's two labor efficiency ratios are dLER
   and mLER, and uppercasing prints both as "...LER" and loses the only thing that
   tells them apart. Margin on both edges, not just the top: a box lands mid-argument
   with prose on either side, and adjacent boxes collapse to a single 22px gutter. */
.ins-def{margin:22px 0;border:1px solid var(--line-strong);border-radius:12px;
  padding:22px 26px;max-width:58ch;}
.ins-def p{margin:0 0 .9em;font-size:16px;line-height:1.72;font-weight:300;}
.ins-def p:last-child{margin-bottom:0;}
.ins-def p.ins-def-term{font-family:var(--sans);font-size:13.5px;font-weight:600;
  line-height:1.45;margin:0 0 .75em;}
.ins-def p.ins-def-term strong{font-weight:inherit;}
.ins-wrap .ins-def p{font-size:17px;line-height:1.75;}
.ins-wrap .ins-def p.ins-def-term{font-size:13.5px;line-height:1.45;}
.ins-src{margin-top:30px;font-size:13px;}
.ins-sub{margin-top:34px;border:1px solid var(--line-strong);border-radius:13px;padding:26px 28px;}
.ins-sub h3{font-family:var(--serif);font-weight:400;font-size:20px;line-height:1.3;margin:0 0 8px;}
.ins-sub p{font-size:14.5px;line-height:1.65;font-weight:300;margin:0;}
.ins-sub .email-form{margin-top:16px;max-width:none;}
.ins-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:30px;}
.ins-card{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:13px;
  overflow:hidden;text-decoration:none;transition:border-color .18s,transform .18s;}
.ins-card:hover{transform:translateY(-2px);}
.ins-card .shot{line-height:0;}
.ins-card .shot img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;}
.ins-card .body{padding:20px 22px 24px;display:flex;flex-direction:column;flex:1;}
.ins-card .when{font-size:11px;letter-spacing:.2em;text-transform:uppercase;margin-bottom:10px;}
.ins-card h3{font-family:var(--serif);font-weight:400;font-size:19px;line-height:1.3;margin:0 0 10px;}
.ins-card p{font-size:14.5px;line-height:1.6;font-weight:300;margin:0 0 16px;}
.ins-card .go{margin-top:auto;font-size:12px;letter-spacing:.08em;text-transform:uppercase;font-weight:600;}
@media(max-width:900px){.ins-grid{grid-template-columns:1fr;gap:22px;}}

/* ---- Modal ---- */
.modal{position:fixed;inset:0;z-index:50;display:none;align-items:flex-start;justify-content:center;padding:5vh 22px;background:rgba(5,8,7,.78);backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);overflow:auto;}
.modal.open{display:flex;animation:fade .2s ease;}
@keyframes fade{from{opacity:0}to{opacity:1}}
.modal-card{position:relative;max-width:800px;width:100%;background:linear-gradient(180deg,#171f1b,#0f1513);border:1px solid var(--line-strong);border-radius:16px;padding:46px 50px 50px;box-shadow:0 36px 90px rgba(0,0,0,.6);animation:liftup .28s cubic-bezier(.2,.7,.2,1);}
@media(max-width:600px){.modal-card{padding:34px 24px 36px;}}
@keyframes liftup{from{transform:translateY(16px);opacity:0}to{transform:none;opacity:1}}
.modal-close{position:absolute;top:16px;right:18px;width:36px;height:36px;border-radius:50%;background:transparent;border:1px solid var(--line-strong);color:var(--ink-dim);font-size:20px;line-height:1;cursor:pointer;transition:all .18s;}
.modal-close:hover{border-color:var(--g1);color:var(--g1);}
.modal-head{padding-right:34px;margin-bottom:8px;}
.modal-head .step{font-size:12px;font-weight:700;letter-spacing:.18em;color:var(--g1);}
.modal-head .role{font-family:var(--serif);font-style:italic;font-size:15px;color:var(--ink-dim);margin-top:8px;}
.modal-head h2{font-family:var(--serif);font-weight:400;font-size:27px;color:var(--ink);margin:6px 0 0;line-height:1.2;}
.layer{margin-top:22px;}
.layer-lbl{display:block;font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;margin-bottom:11px;}
/* No left bars - locked aesthetic. The labels carry the distinction. */
.layer.face{padding-left:0;}
.layer.face .layer-lbl{color:var(--g1);}
.layer.face .body{font-family:var(--serif);font-weight:300;font-size:18px;line-height:1.65;color:var(--ink-soft);}
.layer.face .body em{color:var(--g1);font-style:italic;}
.layer.mach{padding-left:0;}
.layer.mach .layer-lbl{color:var(--g2);}
.layer.mach ul{margin:0;padding:0;list-style:none;}
.layer.mach li{position:relative;padding-left:18px;margin:9px 0;font-size:14.5px;line-height:1.55;color:var(--ink-soft);font-weight:300;}
.layer.mach li::before{content:"";position:absolute;left:0;top:8px;width:6px;height:6px;border-radius:1px;background:var(--g2);}
.layer.mach li b{color:var(--ink);font-weight:600;}
.layer.evi{border:1px solid var(--line);border-radius:10px;background:rgba(20,28,24,.45);padding:20px 22px;}
.layer.evi .layer-lbl{color:var(--g1);}
.layer.evi .body{font-size:14.5px;line-height:1.7;color:var(--ink-soft);font-weight:300;}
.layer.evi .body b{color:var(--ink);font-weight:600;}

/* ---- /method/ phase composition ------------------------------------------
   The page set its hero at a 61-character measure and then ran the phase text
   at 103 across nine full-width bands. Cap the measure everywhere, and at
   desktop turn each phase into a title rail plus a content column so the width
   is used instead of stretching the lines. The two worked examples per phase
   sit side by side, which makes the both-seats claim visible rather than only
   stated. .layer/.ph-head/.phase exist on /method/ only. */
.layer .body{max-width:64ch;}
.layer.mach li{max-width:62ch;}
.layer.evi .body + .body{margin-top:14px;}

@media(min-width:1000px){
  .phase{display:grid;grid-template-columns:minmax(260px,340px) minmax(0,1fr);
         column-gap:60px;align-items:start;position:relative;}
  .phase > .sec-eyebrow{grid-column:1;grid-row:1;margin-bottom:16px;}
  .phase > .ph-head{grid-column:1;grid-row:2;flex-direction:column;align-items:flex-start;gap:16px;margin:0;}
  /* two lines is fine in a rail; "Identify the root / cause" is not */
  .phase > .ph-head h2{font-size:31px;line-height:1.15;text-wrap:balance;}
  .phase > .layer.face{grid-column:2;grid-row:1 / span 2;margin-top:0;}
  .phase > .layer.mach{grid-column:2;grid-row:3;margin-top:26px;}
  .phase > .layer.evi{grid-column:2;grid-row:4;margin-top:22px;}
  /* the phase number, set large and faint in the space the rail leaves */
  /* a grid item, not absolutely positioned - it cannot then collide with a
     title that wraps to a second line. */
  .phase::after{content:attr(data-n);grid-column:1;grid-row:3;align-self:start;
                margin-top:26px;font-family:var(--serif);font-weight:300;
                font-size:132px;line-height:.8;color:var(--g1);opacity:.12;
                pointer-events:none;user-select:none;}
  /* the pair of worked examples, selling and numbers, read together */
  .layer.evi{display:grid;grid-template-columns:1fr 1fr;column-gap:28px;align-items:start;}
  .layer.evi .layer-lbl{grid-column:1 / -1;}
  .layer.evi .body + .body{margin-top:0;}
}
@media(min-width:1000px) and (max-width:1180px){
  .phase::after{font-size:112px;}
}

/* ---- FAQ / anchor pages ---- */
details.faq-item{border-top:1px solid var(--line);}
details.faq-item:first-of-type{border-top:none;}
details.faq-item summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:26px 0;}
details.faq-item summary::-webkit-details-marker{display:none;}
details.faq-item summary:hover h2{color:var(--g1);}
.faq-item h2{font-family:var(--serif);font-weight:400;font-size:clamp(21px,2.6vw,27px);line-height:1.3;color:var(--ink);margin:0;max-width:30ch;transition:color .18s;}
.faq-chev{flex:none;width:36px;height:36px;border:1px solid var(--line-strong);border-radius:50%;position:relative;transition:transform .25s,border-color .18s;}
.faq-chev::before{content:"";position:absolute;left:50%;top:50%;width:9px;height:9px;border-right:2px solid var(--g1);border-bottom:2px solid var(--g1);transform:translate(-50%,-65%) rotate(45deg);}
details[open] > summary .faq-chev{transform:rotate(180deg);}
details.faq-item summary:hover .faq-chev{border-color:var(--g1);}
details.faq-item > .prose{padding-bottom:28px;}
@media (prefers-reduced-motion: reduce){.faq-chev{transition:none;}}

/* ---- Service grid (financial leadership) ---- */
.svc-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin-top:26px;}
@media(max-width:760px){.svc-grid{grid-template-columns:1fr;}}
.svc{border:1px solid var(--line-strong);border-radius:11px;background:rgba(20,28,24,.45);padding:22px 24px;}
.svc h3{font-family:var(--serif);font-weight:400;font-size:18px;color:var(--ink);margin:0 0 10px;}
.svc p{margin:0;font-size:13.5px;line-height:1.6;color:var(--ink-soft);font-weight:300;}

/* ---- Rhythm ---- */
.rhythm{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:26px;}
@media(max-width:760px){.rhythm{grid-template-columns:1fr;}}
.rhythm .r{border-left:2px solid var(--g2);padding:4px 0 4px 18px;}
.rhythm .r h3{font-family:var(--serif);font-weight:400;font-size:18px;color:var(--ink);margin:0 0 8px;}
.rhythm .r p{margin:0;font-size:13.5px;line-height:1.6;color:var(--ink-soft);font-weight:300;}

/* ---- /financial-leadership/ cost -> change pairs -------------------------
   The four costs and the four things that change are the same four subjects.
   They used to sit three sections apart, so the page never showed that it
   answered its own problem. Four rows, cost then change, sharing a subject.
   Both labels carry heading weight: they are what a skimmer reads. */
.pairs{margin-top:30px;}
.pair{padding:26px 0;display:grid;gap:16px;}
.pair + .pair{border-top:1px solid var(--line);}
.pair .pl{display:block;font-size:10px;letter-spacing:.2em;text-transform:uppercase;
          margin-bottom:9px;}
.pair h3{font-family:var(--serif);font-weight:400;font-size:21px;line-height:1.25;
         margin:0 0 9px;text-wrap:balance;}
.pair p{margin:0;font-size:14px;line-height:1.65;font-weight:300;max-width:58ch;}

/* The cost sits plainly on the page and is deliberately the dimmer of the two.
   What changes lifts off it - brighter ground, full-strength ink, green edge.
   The contrast is the argument: unclear becomes clear. Do not level them. */
.pair .pc .pl{color:var(--ink-dim);}
.pair .pc h3{color:var(--ink-dim);}
.pair .pc p{color:var(--ink-dim);}
/* Hairline all round, no left stripe. James has rejected accent bars repeatedly;
   emphasise with tint, label weight and spacing. Matches .svc, the house card. */
.pair .pk{background:var(--card);border:1px solid var(--line-strong);
          border-radius:11px;padding:20px 24px;}
.pair .pk .pl{color:var(--g1);}
.pair .pk h3{color:var(--ink);}
.pair .pk p{color:var(--ink-soft);}

@media(min-width:900px){
  .pair{grid-template-columns:1fr auto 1fr;gap:0 20px;align-items:center;padding:20px 0;}
  .pair .pc{grid-column:1;padding-right:4px;}
  .pair .pk{grid-column:3;}
  .pair::before{content:"";grid-column:2;grid-row:1;align-self:center;
                width:40px;height:40px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232E7D32' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E") no-repeat center/contain;
                opacity:.8;pointer-events:none;}
}

/* ---- Breadcrumb ---- */
.crumb{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-dim);padding-top:34px;}
.crumb a{color:var(--ink-dim);text-decoration:none;}
.crumb a:hover{color:var(--g1);}

/* ---- 404 ---- */
.err{padding:110px 0 60px;text-align:left;}

/* ---- Partnership ladder (four tiers, /fractional-cro/) ----
   Cards are the control; the panel each one opens spans the full row beneath them,
   so all four prices stay on screen while the detail is read. */
.tier-row{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:30px;align-items:stretch;}
.tier{display:flex;flex-direction:column;border:1px solid var(--line-strong);border-radius:12px;background:linear-gradient(180deg,var(--panel2),var(--panel));padding:20px 20px 16px;cursor:pointer;transition:border-color .18s,box-shadow .18s,transform .18s;}
.tier:hover{border-color:var(--g1);transform:translateY(-3px);box-shadow:0 10px 24px rgba(28,36,32,.10);}
.tier:hover .tm-ch{border-color:var(--g1);background:rgba(46,125,50,.08);}
.tier[data-open="1"],.tier[data-open="1"]:hover{border-color:var(--g1);box-shadow:0 0 0 1px var(--g1);transform:none;}
.tier-top{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin-bottom:13px;}
.tier .tno{font-size:10.5px;font-weight:700;letter-spacing:.22em;color:var(--ink-dim);line-height:1;}
.tier-steps{display:flex;align-items:flex-end;gap:3px;height:15px;}
.tier-steps i{width:7px;border-radius:1px;background:var(--line-strong);}
.tier-steps i:nth-child(1){height:6px;}
.tier-steps i:nth-child(2){height:9px;}
.tier-steps i:nth-child(3){height:12px;}
.tier-steps i:nth-child(4){height:15px;}
.tier-steps i.on{background:var(--g1);}
.tier h3{font-family:var(--serif);font-weight:400;font-size:22px;line-height:1.2;color:var(--ink);margin:0 0 5px;}
.tier .tline{font-family:var(--serif);font-style:italic;font-size:14.5px;line-height:1.45;color:var(--g1);margin:0 0 16px;}
.tier .trow{border-top:1px solid var(--line);padding-top:11px;margin-top:11px;}
.tier .trow:first-of-type{border-top:none;padding-top:0;margin-top:0;}
.tier .trow.pin{margin-top:auto;}
.tier .tk{display:block;font-size:9.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-dim);margin-bottom:5px;}
.tier .tv{display:block;font-size:13.5px;line-height:1.55;color:var(--ink-soft);font-weight:300;}
.tier .tv.price{font-family:var(--serif);font-size:19px;line-height:1.25;color:var(--ink);font-weight:400;}
.tier-more{margin-top:17px;width:100%;display:flex;align-items:center;justify-content:space-between;gap:10px;background:rgba(46,125,50,.06);border:1px solid rgba(46,125,50,.30);border-radius:8px;padding:11px 13px;cursor:pointer;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;font-weight:700;color:var(--acc-deep,var(--g1));text-align:left;transition:background .18s,border-color .18s,color .18s;}
.tier-more:hover,.tier:hover .tier-more{background:rgba(46,125,50,.13);border-color:var(--g1);}
.tier[data-open="1"] .tier-more{background:rgba(46,125,50,.16);border-color:var(--g1);}
.tm-vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;}
.tm-ch{flex:none;width:19px;height:19px;border:1px solid rgba(46,125,50,.45);border-radius:50%;position:relative;transition:transform .25s,border-color .18s,background .18s;}
.tm-ch::before{content:"";position:absolute;left:50%;top:50%;width:5px;height:5px;border-right:1.5px solid var(--g1);border-bottom:1.5px solid var(--g1);transform:translate(-50%,-65%) rotate(45deg);}
.tier-more[aria-expanded="true"] .tm-ch{transform:rotate(180deg);border-color:var(--g1);}
.tier-more:hover .tm-ch{border-color:var(--g1);}
.tier-panel{display:none;position:relative;border:1px solid var(--g1);border-radius:12px;background:var(--panel);padding:26px 28px 24px;}
.tier-panel.is-open{display:block;}
.tp-head{display:flex;align-items:baseline;gap:12px;margin-bottom:14px;}
.tp-no{font-size:10.5px;font-weight:700;letter-spacing:.22em;color:var(--g1);}
.tp-head h4{font-family:var(--serif);font-weight:400;font-size:23px;line-height:1.2;color:var(--ink);margin:0;}
.tp-head h4 span{color:var(--ink-dim);font-style:italic;font-size:17px;}
.tp-lede{font-size:15.5px;line-height:1.7;color:var(--ink-soft);font-weight:300;margin:0 0 22px;max-width:76ch;}
.tp-cols{display:grid;grid-template-columns:1fr 1fr;gap:4px 48px;padding-bottom:22px;border-bottom:1px solid var(--line);}
.tp-cols ul{margin:0;padding-left:0;list-style:none;}
.tp-cols li{position:relative;padding-left:18px;margin:9px 0;font-size:14.5px;line-height:1.6;color:var(--ink-soft);font-weight:300;}
.tp-cols li::before{content:"";position:absolute;left:0;top:9px;width:6px;height:6px;border-radius:1px;background:var(--g2);}
.tp-changes{margin:22px 0 0;font-size:15px;line-height:1.7;color:var(--ink-soft);font-weight:300;max-width:80ch;}
.tp-changes b{color:var(--ink);font-weight:600;}
.tier-sub{display:block;font-size:10.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-dim);margin:0 0 4px;}
p.tier-note{margin-top:22px;max-width:74ch;line-height:1.65;}
p.tier-hint{margin:26px 0 -14px;color:var(--ink-dim);}

/* Cards keep their row; the open panel spans the full width beneath its own row,
   with a pointer up at the card that opened it. Explicit placement at both the
   four-up and two-up widths, so opening a panel never reflows the cards. */
.tier-panel::before{content:"";position:absolute;top:-8px;left:var(--cx);width:14px;height:14px;background:var(--panel);border-left:1px solid var(--g1);border-top:1px solid var(--g1);transform:translateX(-50%) rotate(45deg);}
@media(min-width:1081px){
  .tier-row > .tier{grid-row:1;}
  .tier-row > .tier.c1{grid-column:1;}
  .tier-row > .tier.c2{grid-column:2;}
  .tier-row > .tier.c3{grid-column:3;}
  .tier-row > .tier.c4{grid-column:4;}
  .tier-row > .tier-panel{grid-row:2;grid-column:1/-1;margin-top:8px;}
  .tier-panel.p1{--cx:12.5%;}
  .tier-panel.p2{--cx:37.5%;}
  .tier-panel.p3{--cx:62.5%;}
  .tier-panel.p4{--cx:87.5%;}
}
@media(min-width:641px) and (max-width:1080px){
  .tier-row{grid-template-columns:repeat(2,1fr);gap:18px;}
  .tier-row > .tier.c1{grid-row:1;grid-column:1;}
  .tier-row > .tier.c2{grid-row:1;grid-column:2;}
  .tier-row > .tier.c3{grid-row:3;grid-column:1;}
  .tier-row > .tier.c4{grid-row:3;grid-column:2;}
  .tier-row > .tier-panel.p1,.tier-row > .tier-panel.p2{grid-row:2;grid-column:1/-1;}
  .tier-row > .tier-panel.p3,.tier-row > .tier-panel.p4{grid-row:4;grid-column:1/-1;}
  .tier-row > .tier-panel{margin-top:8px;}
  .tier-panel.p1,.tier-panel.p3{--cx:25%;}
  .tier-panel.p2,.tier-panel.p4{--cx:75%;}
}
@media(max-width:640px){
  .tier-row{grid-template-columns:1fr;max-width:420px;margin-left:auto;margin-right:auto;}
  .tier-panel{margin-top:-16px;border-top:none;border-top-left-radius:0;border-top-right-radius:0;padding:20px 20px 20px;}
  .tier-panel::before{display:none;}
  .tier[data-open="1"]{border-bottom-left-radius:0;border-bottom-right-radius:0;}
  .tp-cols{grid-template-columns:1fr;gap:0;padding-bottom:18px;}
  .tp-head h4{font-size:19px;}
  .tp-head h4 span{display:none;}  /* the card directly above already carries the tagline */
}
@media (prefers-reduced-motion: reduce){.tm-ch{transition:none;}.tier{transition:none;}.tier:hover{transform:none;}}
@media print{.tier-panel{display:block !important;}.tier-panel::before{display:none;}.tier-more{display:none;}}

/* ---- Both-ladders summary (/business-growth-sarasota/) ---- */
.pl-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:30px;align-items:start;}
@media(max-width:760px){.pl-grid{grid-template-columns:1fr;max-width:460px;margin-left:auto;margin-right:auto;}}
.pl-col{border:1px solid var(--line-strong);border-radius:12px;background:linear-gradient(180deg,var(--panel2),var(--panel));padding:22px 22px 18px;}
.pl-col h3{font-family:var(--serif);font-weight:400;font-size:20px;line-height:1.2;color:var(--ink);margin:0 0 14px;}
.pl-row{display:grid;grid-template-columns:1fr auto;gap:2px 14px;border-top:1px solid var(--line);padding-top:11px;margin-top:11px;}
.pl-row:first-of-type{border-top:none;padding-top:0;margin-top:0;}
.pl-n{font-size:14.5px;line-height:1.3;color:var(--ink);font-weight:600;}
.pl-p{font-family:var(--serif);font-size:15.5px;line-height:1.25;color:var(--ink);white-space:nowrap;text-align:right;}
.pl-w{grid-column:1/-1;font-size:12.5px;line-height:1.5;color:var(--ink-dim);font-weight:300;}

/* ---- Glossary term, defined in place ----
   The reader stays on the page. Button + panel, same mechanic as the (i) hints;
   hover peeks on pointer devices, click pins it, and print shows neither. */
.gt{font:inherit;color:inherit;background:none;border:0;padding:0;margin:0;cursor:help;border-bottom:1px dotted var(--g1);transition:color .18s,background .18s;}
.gt:hover,.gt[aria-expanded="true"]{color:var(--g1);}
.gt:focus-visible{outline:2px solid var(--g1);outline-offset:2px;border-radius:2px;}
.gd{display:none;margin:12px 0 4px;padding:12px 16px;background:rgba(46,125,50,.06);border-left:2px solid var(--g1);border-radius:0 7px 7px 0;font-size:14.5px;line-height:1.65;color:var(--ink-soft);font-weight:300;}
.gd.is-open{display:block;}
.gd .gd-t{color:var(--ink);font-weight:600;}
.gd a{color:var(--acc-deep,var(--g1));white-space:nowrap;}
/* Peek is JS-driven (.is-peek), not a sibling selector: the selector could only ever
   reach ONE panel per paragraph, which forced 'bookkeeper and your accountant' to
   define one and not the other. */
.gd.is-peek{display:block;}
@media print{.gt{border-bottom:none;color:inherit;}.gd{display:none !important;}}