/* ============================================================
   Mission-Minded Bookkeeping — brand system
   Rouse Design Studio identity, applied verbatim.
   Ivory / Sky Blue / Neutral / Royal / Blue-Grey / Navy Blue.
   Gelasio (Georgia metric twin) headings, Open Sans everything else.
   ============================================================ */
@font-face{font-family:"Gelasio";src:url("/assets/fonts/gelasio-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Gelasio";src:url("/assets/fonts/gelasio-400i.woff2") format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Gelasio";src:url("/assets/fonts/gelasio-600.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Gelasio";src:url("/assets/fonts/gelasio-700.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Open Sans";src:url("/assets/fonts/opensans-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Open Sans";src:url("/assets/fonts/opensans-400i.woff2") format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Open Sans";src:url("/assets/fonts/opensans-500.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Open Sans";src:url("/assets/fonts/opensans-600.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Open Sans";src:url("/assets/fonts/opensans-700.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
:root{
  /* --- Rouse palette, exact --- */
  --ivory:#EFEFED; --sky-brand:#A4B4C3; --neutral:#B59C74;
  --royal:#033363; --bluegrey:#343D46; --navy-brand:#031A2D;

  /* --- role tokens --- */
  --paper:#EFEFED; --paper-2:#E4E4E1; --cream:#EFEFED;
  --navy:#031A2D; --navy-2:#02121F; --navy-3:#033363;
  --ink:#343D46; --mut:#54606B;
  --brass:#B59C74; --brass-2:#7A5C33; --brass-soft:#D3C0A2;
  --brass-ink:#031A2D; --brass-on-dark:#D3C0A2;
  --sky:#A4B4C3; --sky-soft:#C9D3DD;
  --line:rgba(3,26,45,.14); --line-2:rgba(3,26,45,.08);
  --line-cream:rgba(239,239,237,.18);

  /* --- type: the kit names two faces, so the site runs two --- */
  --serif:"Gelasio",Georgia,"Times New Roman",serif;
  --sans:"Open Sans",system-ui,-apple-system,sans-serif;
  --label:"Open Sans",system-ui,-apple-system,sans-serif;

  --maxw:1200px; --gut:clamp(20px,5vw,64px);
  --e-reveal:cubic-bezier(.22,1,.36,1);
  --e-hero:cubic-bezier(.65,0,.35,1);
  --e-snap:cubic-bezier(.34,1.56,.64,1);
  --r:3px;
  --shadow-hard:5px 5px 0 var(--navy);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--sans);font-size:17.5px;line-height:1.68;font-variant-numeric:tabular-nums;
  font-weight:400;-webkit-font-smoothing:antialiased;overflow-x:hidden;
}
body::before{ /* fine grain */
  content:"";position:fixed;inset:0;z-index:9999;pointer-events:none;opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{font-family:var(--serif);font-weight:600;line-height:1.12;letter-spacing:-.004em;color:var(--navy);margin:0 0 .4em}
h1{font-size:clamp(2.5rem,5.5vw,4.5rem);font-weight:600;letter-spacing:-.012em;line-height:1.08}
h2{font-size:clamp(1.85rem,3.6vw,2.9rem)}
h3{font-size:clamp(1.28rem,2vw,1.62rem)}
p{margin:0 0 1.1em}
.i{font-style:italic}
.accent{color:var(--brass)}
strong{font-weight:700;color:var(--navy)}
::selection{background:var(--sky);color:var(--navy)}

.container{max-width:var(--maxw);margin:0 auto;padding-inline:var(--gut)}
.wide{max-width:1360px}
section{position:relative}
.pad{padding-block:clamp(64px,9vw,128px)}
.pad-s{padding-block:clamp(48px,6vw,80px)}

/* ---- eyebrow / section head ---- */
.eyebrow{font-family:var(--label);font-size:.72rem;font-weight:500;
  letter-spacing:.26em;text-transform:uppercase;color:var(--brass-2);display:inline-flex;
  align-items:center;gap:.65em;margin:0 0 1.1rem}
.eyebrow::before{content:"";width:26px;height:1px;background:var(--brass);opacity:.7}
.eyebrow.on-dark{color:var(--brass-soft)}
.eyebrow.center{justify-content:center}
.lede{font-size:clamp(1.12rem,1.7vw,1.32rem);color:var(--mut);max-width:60ch;line-height:1.55}
.sec-head{max-width:760px;margin-bottom:clamp(36px,4vw,58px)}
.sec-head.center{margin-inline:auto;text-align:center}

/* ---- buttons ---- */
.btn{display:inline-flex;align-items:center;gap:.6em;font-family:var(--sans);
  font-weight:600;font-size:1rem;letter-spacing:.005em;padding:.92em 1.5em;border-radius:var(--r);
  border:1.5px solid transparent;cursor:pointer;transition:transform .5s var(--e-reveal),background .35s ease,color .35s ease,box-shadow .5s var(--e-reveal);
  line-height:1}
.btn svg{width:16px;height:16px;transition:transform .5s var(--e-snap)}
.btn-royal{background:var(--royal);color:var(--ivory);box-shadow:0 1px 0 var(--navy)}
.btn-royal:hover{background:var(--navy);transform:translateY(-2px)}
.btn-royal:hover svg{transform:translateX(4px)}
.btn-navy{background:var(--navy);color:var(--cream)}
.btn-navy:hover{background:var(--navy-2);transform:translateY(-2px)}
.btn-ghost{border-color:var(--line);color:var(--navy);background:transparent}
.btn-ghost:hover{border-color:var(--navy);transform:translateY(-2px)}
.btn-ghost.on-dark{border-color:var(--line-cream);color:var(--cream)}
.btn-ghost.on-dark:hover{border-color:var(--brass-soft);background:rgba(255,255,255,.05)}
.textlink{font-weight:600;color:var(--brass-2);display:inline-flex;align-items:center;gap:.4em;border-bottom:1.5px solid var(--brass-soft);padding-bottom:2px;transition:border-color .4s ease,gap .4s var(--e-snap)}
.textlink:hover{border-color:var(--brass);gap:.7em}
.textlink svg{width:14px;height:14px}

/* ---- header ---- */
.site-head{position:sticky;top:0;z-index:200;background:rgba(239,239,237,.86);
  backdrop-filter:blur(14px);border-bottom:1px solid var(--line-2);transition:box-shadow .4s ease,background .4s ease}
.site-head.scrolled{box-shadow:0 1px 22px rgba(3,26,45,.09);background:rgba(239,239,237,.96)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:24px;
  height:80px;max-width:1360px;margin:0 auto;padding-inline:var(--gut)}
.brand{display:flex;align-items:center;gap:12px;flex-shrink:0}
.brand img{width:40px;height:40px}
.brand-txt{display:flex;flex-direction:column;line-height:1}
.brand-txt b{font-family:var(--serif);font-weight:600;font-size:1.12rem;color:var(--navy);letter-spacing:-.01em}
.brand-txt span{font-family:var(--label);font-size:.56rem;letter-spacing:.28em;
  text-transform:uppercase;color:var(--brass-2);margin-top:3px}
.nav-links{display:flex;align-items:center;gap:4px;list-style:none;margin:0;padding:0}
.nav-links>li{position:relative}
.nav-links>li>a,.nav-links>li>button{font-family:inherit;font-size:.98rem;font-weight:600;color:var(--navy);
  background:none;border:0;cursor:pointer;padding:.6em .85em;border-radius:var(--r);display:inline-flex;
  align-items:center;gap:.35em;transition:color .3s ease}
.nav-links>li>a:hover,.nav-links>li>button:hover,.nav-links>li.open>button{color:var(--brass-2)}
.nav-links .caret{width:11px;height:11px;transition:transform .4s var(--e-reveal)}
.nav-links>li.open .caret{transform:rotate(180deg)}
.nav-cta{display:flex;align-items:center;gap:14px}
/* dropdown */
.dropdown{position:absolute;top:calc(100% + 10px);left:50%;transform:translate(-50%,8px);
  min-width:320px;background:var(--cream);border:1px solid var(--line);border-radius:6px;
  box-shadow:0 24px 60px -22px rgba(3,26,45,.4);padding:12px;opacity:0;visibility:hidden;
  transition:opacity .35s var(--e-reveal),transform .35s var(--e-reveal);z-index:210}
.nav-links>li.open .dropdown{opacity:1;visibility:visible;transform:translate(-50%,0)}
.dropdown.wide2{min-width:560px;display:grid;grid-template-columns:1fr 1fr;gap:6px}
.dd-item{display:flex;gap:12px;padding:11px 12px;border-radius:var(--r);transition:background .3s ease}
.dd-item:hover{background:var(--paper-2)}
.dd-item .ic{flex-shrink:0;width:34px;height:34px;color:var(--brass-2);margin-top:2px}
.dd-item b{display:block;font-family:var(--sans);font-weight:700;color:var(--navy);font-size:.96rem}
.dd-item small{color:var(--mut);font-size:.82rem;line-height:1.4;display:block;margin-top:2px}
.dd-foot{grid-column:1/-1;margin-top:6px;padding:13px 12px;border-top:1px solid var(--line-2);
  display:flex;justify-content:space-between;align-items:center;gap:12px}
.dd-foot span{font-size:.85rem;color:var(--mut)}
.burger{display:none;background:none;border:0;cursor:pointer;width:44px;height:44px;color:var(--navy)}
.burger svg{width:26px;height:26px}

/* mobile nav */
.mnav{position:fixed;inset:0;z-index:250;background:var(--navy);color:var(--cream);
  transform:translateX(100%);transition:transform .5s var(--e-hero);overflow-y:auto;display:flex;flex-direction:column}
.mnav.open{transform:none}
.mnav-top{display:flex;justify-content:space-between;align-items:center;height:80px;padding-inline:var(--gut)}
.mnav-top .brand-txt b{color:var(--cream)}
.mnav-close{background:none;border:0;color:var(--cream);cursor:pointer;width:44px;height:44px}
.mnav-close svg{width:28px;height:28px}
.mnav-body{padding:12px var(--gut) 40px;display:flex;flex-direction:column;gap:2px}
.mnav-body a{font-family:var(--serif);font-size:1.5rem;padding:.5em 0;border-bottom:1px solid var(--line-cream);color:var(--cream)}
.mnav-body .sub{font-family:var(--sans);font-size:1rem;padding-left:16px;color:var(--sky-soft);font-weight:600}
.mnav-body .mlabel{font-family:var(--label);font-size:.68rem;letter-spacing:.24em;text-transform:uppercase;color:var(--brass-soft);margin-top:20px}
.mnav .btn{margin-top:26px;justify-content:center}

/* ---- hero ---- */
.hero{position:relative;background:var(--navy);color:var(--cream);overflow:hidden;isolation:isolate}
.hero-bg{position:absolute;inset:0;z-index:-2}
.hero-bg img{width:100%;height:100%;object-fit:cover;opacity:.24;filter:saturate(.85)}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(107deg,var(--navy-2) 18%,rgba(3,26,45,.72) 55%,rgba(30,51,82,.45))}
.hero-inner{max-width:1360px;margin:0 auto;padding:clamp(80px,12vw,150px) var(--gut) clamp(64px,9vw,120px)}
.hero-grid{display:grid;grid-template-columns:1.35fr .9fr;gap:clamp(40px,6vw,90px);align-items:end}
.hero h1{color:var(--cream);max-width:14ch}
.hero .lede{color:var(--sky-soft);max-width:46ch;margin-bottom:2rem}
.hero-scripture{font-family:var(--serif);font-style:italic;font-size:1.06rem;color:var(--brass-soft);
  border-left:2px solid var(--brass);padding-left:18px;margin-bottom:2rem;max-width:40ch;line-height:1.5}
.hero-scripture cite{display:block;font-style:normal;font-family:var(--label);font-size:.68rem;
  letter-spacing:.2em;text-transform:uppercase;color:var(--sky);margin-top:8px;opacity:.8}
.hero-cta{display:flex;flex-wrap:wrap;gap:14px}
.hero-side{border-left:1px solid var(--line-cream);padding-left:clamp(24px,3vw,40px)}
.hero-side .eyebrow{margin-bottom:1.6rem}
.hstat{padding:16px 0;border-bottom:1px solid var(--line-cream)}
.hstat:last-child{border-bottom:0}
.hstat b{font-family:var(--serif);font-size:2.6rem;font-weight:600;color:var(--cream);display:block;line-height:1}
.hstat span{font-size:.92rem;color:var(--sky-soft)}
.scroll-cue{position:absolute;bottom:22px;left:50%;transform:translateX(-50%);font-family:var(--label);
  font-size:.62rem;letter-spacing:.24em;text-transform:uppercase;color:var(--sky);display:flex;flex-direction:column;
  align-items:center;gap:8px;opacity:.7}
.scroll-cue .ln{width:1px;height:36px;background:linear-gradient(var(--brass),transparent);animation:cue 2.4s var(--e-reveal) infinite}
@keyframes cue{0%,100%{transform:scaleY(.4);transform-origin:top;opacity:.4}50%{transform:scaleY(1);opacity:1}}

/* ---- trust strip ---- */
.trust{background:var(--paper-2);border-block:1px solid var(--line-2)}
.trust-row{display:flex;flex-wrap:wrap;align-items:center;gap:clamp(20px,4vw,54px);justify-content:space-between;padding-block:26px}
.trust-item{display:flex;align-items:center;gap:11px;font-weight:600;color:var(--navy);font-size:.98rem}
.trust-item svg{width:22px;height:22px;color:var(--brass-2);flex-shrink:0}

/* ---- ascending-bars motif ---- */
.bars{display:inline-flex;align-items:flex-end;gap:3px;height:1em}
.bars i{width:4px;background:var(--brass);border-radius:1px;display:block}
.bars i:nth-child(1){height:40%}.bars i:nth-child(2){height:66%}.bars i:nth-child(3){height:100%}

/* ---- cards ---- */
.grid{display:grid;gap:clamp(16px,2vw,26px)}
.g-2{grid-template-columns:repeat(2,1fr)}.g-3{grid-template-columns:repeat(3,1fr)}.g-4{grid-template-columns:repeat(4,1fr)}
.card{background:var(--cream);border:1px solid var(--line);border-radius:var(--r);padding:clamp(24px,2.4vw,34px);
  transition:transform .55s var(--e-reveal),box-shadow .55s var(--e-reveal),border-color .4s ease;position:relative}
.card:hover{transform:translateY(-5px);box-shadow:var(--shadow-hard);border-color:var(--navy)}
.card .num{font-family:var(--label);font-size:.72rem;letter-spacing:.18em;color:var(--brass-2)}
.card .cic{width:40px;height:40px;color:var(--brass-2);margin-bottom:18px}
.card h3{margin-bottom:.4em}
.card p{font-size:.98rem;color:var(--mut);margin-bottom:1em}
.card .textlink{font-size:.92rem}
.svc-card{display:flex;flex-direction:column}
.svc-card .tag{font-family:var(--label);font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--brass-2);margin-bottom:14px}
.svc-card .foot{margin-top:auto;padding-top:16px}

/* value cards (numbered, roman) */
.value{padding:30px 0;border-top:1px solid var(--line);display:grid;grid-template-columns:64px 1fr;gap:20px;align-items:start}
.value .rn{font-family:var(--serif);font-style:italic;font-size:1.7rem;color:var(--brass)}
.value h3{font-size:1.3rem;margin-bottom:.25em}
.value p{color:var(--mut);margin:0}

/* ---- split feature ---- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,74px);align-items:center}
.split.rev .split-media{order:2}
.split-media{position:relative}
.split-media img{width:100%;border-radius:6px;border:1px solid var(--line);aspect-ratio:4/3;object-fit:cover}
.split-media .badge{position:absolute;bottom:-18px;left:-18px;background:var(--navy);color:var(--cream);
  padding:16px 20px;border-radius:var(--r);max-width:220px}
.split-media .badge b{font-family:var(--serif);font-size:1.5rem;color:var(--brass-soft);display:block;line-height:1}
.split-media .badge span{font-size:.8rem;color:var(--sky-soft)}
.ticks{list-style:none;margin:1.4em 0 0;padding:0;display:grid;gap:13px}
.ticks li{display:flex;gap:12px;align-items:flex-start;font-size:1rem}
.ticks svg{width:20px;height:20px;color:var(--brass-2);flex-shrink:0;margin-top:3px}

/* ---- process / steps ---- */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,2vw,28px);counter-reset:s}
.step{position:relative;padding-top:26px;border-top:2px solid var(--line)}
.step.act{border-top-color:var(--brass)}
.step .sn{font-family:var(--label);font-size:.72rem;letter-spacing:.18em;color:var(--brass-2);margin-bottom:12px}
.step h3{font-size:1.24rem}
.step p{font-size:.95rem;color:var(--mut);margin:0}

/* ---- pricing ---- */
.tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,1.6vw,22px);align-items:start}
.tier{background:var(--cream);border:1px solid var(--line);border-radius:6px;padding:clamp(26px,2.4vw,36px);display:flex;flex-direction:column;height:100%}
.tier.feat{background:var(--navy);color:var(--sky-soft);border-color:var(--navy);position:relative}
.tier.feat h3,.tier.feat .price b{color:var(--cream)}
.tier .flag{position:absolute;top:-13px;left:50%;transform:translateX(-50%);background:var(--brass);color:#fff;
  font-family:var(--label);font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;padding:6px 14px;border-radius:100px}
.tier .tname{font-family:var(--serif)}
.tier .tsub{font-size:.92rem;color:var(--mut);margin:.2em 0 1.1em}
.tier.feat .tsub{color:var(--sky-soft)}
.price{margin-bottom:1.1em}
.price small{font-size:.74rem;text-transform:uppercase;letter-spacing:.14em;font-family:var(--label);color:var(--brass-2);display:block;margin-bottom:4px}
.price b{font-family:var(--serif);font-size:2.7rem;font-weight:600;color:var(--navy);line-height:1}
.price span{font-size:.95rem;color:var(--mut)}
.tier.feat .price small{color:var(--brass-soft)}
.plist{list-style:none;margin:0 0 1.6em;padding:1.2em 0 0;border-top:1px solid var(--line);display:grid;gap:11px}
.tier.feat .plist{border-color:var(--line-cream)}
.plist li{display:flex;gap:10px;font-size:.95rem;align-items:flex-start}
.plist svg{width:17px;height:17px;color:var(--brass);flex-shrink:0;margin-top:4px}
.tier .btn{margin-top:auto;justify-content:center}
.price-note{text-align:center;color:var(--mut);font-size:.92rem;margin-top:26px}

/* ---- scripture / quote band ---- */
.verse{background:var(--paper-2);border-block:1px solid var(--line-2);text-align:center}
.verse blockquote{font-family:var(--serif);font-style:italic;font-weight:400;
  font-size:clamp(1.7rem,3.4vw,2.9rem);line-height:1.25;color:var(--navy);max-width:20ch;margin:0 auto;letter-spacing:-.01em}
.verse cite{display:block;font-family:var(--label);font-style:normal;font-size:.72rem;letter-spacing:.24em;
  text-transform:uppercase;color:var(--brass-2);margin-top:26px}

/* ---- stat band ---- */
.statband{background:var(--navy);color:var(--sky-soft)}
.statgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,40px)}
.statgrid .st{border-left:1px solid var(--line-cream);padding-left:24px}
.statgrid .st b{font-family:var(--serif);font-size:clamp(2.6rem,4.4vw,3.8rem);font-weight:600;color:var(--cream);display:block;line-height:1}
.statgrid .st span{font-size:.95rem;color:var(--sky-soft)}

/* ---- CTA band ---- */
.cta{background:var(--navy);color:var(--cream);text-align:center;overflow:hidden;position:relative}
.cta::before{content:"";position:absolute;inset:0;background:radial-gradient(120% 90% at 50% 0%,rgba(185,135,59,.16),transparent 60%)}
.cta .container{position:relative}
.cta h2{color:var(--cream);max-width:18ch;margin-inline:auto}
.cta p{color:var(--sky-soft);max-width:52ch;margin-inline:auto;margin-bottom:2rem}
.cta .hero-cta{justify-content:center}

/* ---- FAQ ---- */
.faq{max-width:840px;margin:0 auto}
.qa{border-bottom:1px solid var(--line)}
.qa button{width:100%;background:none;border:0;cursor:pointer;text-align:left;display:flex;justify-content:space-between;
  align-items:center;gap:20px;padding:26px 0;font-family:var(--serif);font-size:clamp(1.15rem,1.8vw,1.4rem);
  color:var(--navy);font-weight:500;line-height:1.25}
.qa .pm{flex-shrink:0;width:26px;height:26px;position:relative}
.qa .pm::before,.qa .pm::after{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  background:var(--brass-2);transition:transform .45s var(--e-reveal)}
.qa .pm::before{width:16px;height:2px}.qa .pm::after{width:2px;height:16px}
.qa.open .pm::after{transform:translate(-50%,-50%) scaleY(0)}
.qa .ans{max-height:0;overflow:hidden;transition:max-height .5s var(--e-reveal)}
.qa .ans-in{padding:0 0 26px;color:var(--mut);max-width:70ch}
.qa .ans-in p{margin-bottom:.7em}
.qa .ans-in p:last-child{margin-bottom:0}

/* ---- resources / blog ---- */
.rcard{background:var(--cream);border:1px solid var(--line);border-radius:6px;overflow:hidden;display:flex;flex-direction:column;
  transition:transform .55s var(--e-reveal),box-shadow .55s var(--e-reveal)}
.rcard:hover{transform:translateY(-5px);box-shadow:var(--shadow-hard)}
.rcard .thumb{aspect-ratio:16/10;overflow:hidden;background:var(--paper-2)}
.rcard .thumb img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--e-reveal)}
.rcard:hover .thumb img{transform:scale(1.05)}
.rcard .rc-body{padding:24px 26px 28px;display:flex;flex-direction:column;flex:1}
.rcard .kicker{font-family:var(--label);font-size:.64rem;letter-spacing:.2em;text-transform:uppercase;color:var(--brass-2);margin-bottom:12px}
.rcard h3{font-size:1.3rem;margin-bottom:.4em}
.rcard p{font-size:.95rem;color:var(--mut);margin-bottom:1em}
.rcard .textlink{margin-top:auto;font-size:.9rem}

/* ---- article body ---- */
.article{max-width:740px;margin:0 auto}
.article .lead{font-size:1.24rem;color:var(--navy);line-height:1.5;font-weight:400}
.article h2{font-size:clamp(1.6rem,2.6vw,2.1rem);margin-top:1.8em}
.article h3{margin-top:1.4em}
.article p,.article li{color:#333c49}
.article ul,.article ol{padding-left:1.2em;margin:0 0 1.3em}
.article li{margin-bottom:.5em}
.article blockquote{border-left:3px solid var(--brass);padding:6px 0 6px 22px;margin:1.6em 0;
  font-family:var(--serif);font-style:italic;font-size:1.3rem;color:var(--navy)}
.article .callout{background:var(--paper-2);border:1px solid var(--line);border-radius:6px;padding:24px 26px;margin:1.8em 0}
.article .callout b{color:var(--navy)}
.crumbs{font-family:var(--label);font-size:.72rem;letter-spacing:.1em;color:var(--mut);margin-bottom:20px;text-transform:uppercase}
.crumbs a{color:var(--brass-2)}
.meta-row{display:flex;gap:18px;align-items:center;font-size:.86rem;color:var(--mut);margin-bottom:30px;font-family:var(--label);letter-spacing:.06em}
.toc{background:var(--cream);border:1px solid var(--line);border-radius:6px;padding:22px 26px;margin-bottom:36px}
.toc b{font-family:var(--label);font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--brass-2)}
.toc ul{list-style:none;padding:0;margin:12px 0 0;display:grid;gap:8px}
.toc a{color:var(--navy);font-weight:600;border-bottom:1px solid transparent}
.toc a:hover{border-color:var(--brass)}

/* ---- page hero (interior) ---- */
.phead{background:var(--navy);color:var(--cream);position:relative;overflow:hidden;isolation:isolate}
.phead.img::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(100deg,var(--navy-2) 30%,rgba(3,26,45,.7))}
.phead-bg{position:absolute;inset:0;z-index:-2}
.phead-bg img{width:100%;height:100%;object-fit:cover;opacity:.2}
.phead .inner{max-width:var(--maxw);margin:0 auto;padding:clamp(60px,8vw,112px) var(--gut) clamp(48px,6vw,84px)}
.phead h1{color:var(--cream);max-width:18ch;font-size:clamp(2.5rem,5vw,4.2rem)}
.phead .lede{color:var(--sky-soft);max-width:56ch}
.phead .crumbs{color:var(--sky)}
.phead .crumbs a{color:var(--brass-soft)}

/* ---- forms ---- */
.form-wrap{background:var(--cream);border:1px solid var(--line);border-radius:8px;padding:clamp(26px,3vw,44px)}
.field{margin-bottom:18px}
.field label{display:block;font-weight:600;font-size:.9rem;color:var(--navy);margin-bottom:7px}
.field input,.field select,.field textarea{width:100%;padding:.8em .9em;border:1.5px solid var(--line);border-radius:var(--r);
  background:var(--paper);font-family:inherit;font-size:1rem;color:var(--ink);transition:border-color .3s ease,box-shadow .3s ease}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--brass);box-shadow:0 0 0 3px rgba(185,135,59,.14)}
.field textarea{min-height:130px;resize:vertical}
.field.two{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.form-ok{display:none;background:var(--navy);color:var(--cream);padding:20px 24px;border-radius:6px;margin-bottom:20px}
.form-ok.show{display:block}
.contact-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(30px,5vw,64px);align-items:start}
.cinfo .citem{padding:20px 0;border-top:1px solid var(--line)}
.cinfo .citem:first-of-type{border-top:0}
.cinfo .citem .lab{font-family:var(--label);font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--brass-2);margin-bottom:6px}
.cinfo .citem a,.cinfo .citem p{font-size:1.05rem;color:var(--navy);font-weight:600;margin:0}

/* ---- footer ---- */
.site-foot{background:var(--navy-2);color:var(--sky-soft);padding-top:clamp(56px,7vw,88px)}
.foot-top{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:clamp(24px,3vw,48px);padding-bottom:52px;border-bottom:1px solid var(--line-cream)}
.foot-brand img{width:172px;margin-bottom:20px}
.foot-brand p{font-size:.95rem;color:var(--sky-soft);max-width:34ch}
.foot-verse{font-family:var(--serif);font-style:italic;color:var(--brass-soft);font-size:1rem;margin-top:18px;line-height:1.4}
.fcol h4{font-family:var(--label);font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--brass-soft);margin:0 0 16px;font-weight:500}
.fcol ul{list-style:none;padding:0;margin:0;display:grid;gap:11px}
.fcol a{font-size:.96rem;color:var(--sky-soft);transition:color .3s ease}
.fcol a:hover{color:var(--cream)}
.foot-bot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:14px;padding-block:26px;
  font-size:.84rem;color:var(--sky);font-family:var(--label);letter-spacing:.04em}
.foot-bot a{color:var(--sky)}
.foot-area{font-size:.9rem;color:var(--sky-soft);margin-top:14px}

/* ---- reveal ---- */
.rv{opacity:0;transform:translateY(26px);transition:opacity .8s var(--e-reveal),transform .8s var(--e-reveal)}
.rv.in{opacity:1;transform:none}
.rv.d1{transition-delay:.08s}.rv.d2{transition-delay:.16s}.rv.d3{transition-delay:.24s}.rv.d4{transition-delay:.32s}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}*{scroll-behavior:auto!important}}

/* ---- responsive ---- */
@media(max-width:1020px){
  .hero-grid{grid-template-columns:1fr;gap:44px}
  .hero-side{border-left:0;border-top:1px solid var(--line-cream);padding-left:0;padding-top:30px;
    display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
  .hstat{border-bottom:0;padding:0}
  .steps{grid-template-columns:repeat(2,1fr)}
  .foot-top{grid-template-columns:1fr 1fr}
  .foot-brand{grid-column:1/-1}
}
@media(max-width:860px){
  .nav-links,.nav-cta .btn{display:none}
  .burger{display:inline-flex}
  .g-3,.g-4,.tiers,.statgrid{grid-template-columns:1fr}
  .g-4{gap:16px}
  .split{grid-template-columns:1fr;gap:34px}
  .split.rev .split-media{order:0}
  .split-media img{aspect-ratio:16/10}
  .contact-grid{grid-template-columns:1fr}
  .verse blockquote{max-width:none}
}
@media(max-width:560px){
  body{font-size:17px}
  .g-2,.hero-side{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr}
  .field.two{grid-template-columns:1fr}
  .hero-side{gap:0}
  .hstat{border-bottom:1px solid var(--line-cream);padding:14px 0}
  .foot-top{grid-template-columns:1fr}
  .split-media .badge{position:static;margin-top:16px;max-width:none}
}

/* ---- real form states (added with the lead flow) ---- */
.form-err{display:none;background:#7A2E2E;color:var(--cream);padding:18px 22px;border-radius:6px;margin-bottom:20px;font-size:.95rem}
.form-err.show{display:block}
.form-err a{color:var(--brass-soft)}
.hp-field{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}
.path-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px;margin-top:8px}
.path{display:flex;flex-direction:column;gap:10px;padding:26px 24px;border:1.5px solid var(--line);background:var(--paper);border-radius:var(--r)}
.path .pn{font-family:var(--label);font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--brass-2)}
.path h3{margin:0;font-size:1.28rem}
.path p{margin:0;color:var(--mut);font-size:.95rem;flex:1}
.path .btn{align-self:flex-start;margin-top:6px}
.news-wrap{border-top:1px solid var(--line-2);margin-top:30px;padding-top:26px}
.news-form{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end}
.news-form .field{margin-bottom:0;flex:1 1 190px}
.stock-badge{position:absolute;left:14px;bottom:12px;z-index:4;font-family:var(--label);font-size:.6rem;
  letter-spacing:.08em;text-transform:uppercase;background:rgba(3,26,45,.92);color:var(--cream);padding:5px 9px;border-radius:2px}

/* =====================================================================
   GATE A REMEDIATION 2026-07-28
   Found by a fresh-context reviewer on the deployed build. Every rule
   below fixes something that shipped visibly wrong or fails WCAG AA.
   ===================================================================== */

/* 1. ICON SIZING. `.card .cic` set width/height on an inline <span>, which is
   ignored, so the SVG expanded to the card's content width and rendered at
   453x453px on 28 cards. `.svc-card` escaped only because it is display:flex. */
.cic{display:inline-flex;align-items:center;justify-content:center}
.card .cic{width:40px;height:40px;flex:0 0 40px}
.card .cic svg{width:100%;height:100%;display:block}
/* Same class of bug on the page-header eyebrows: an unsized inline SVG rendered
   at 81px and wrapped "WHO WE SERVE" onto three lines. */
.eyebrow svg{width:15px;height:15px;flex:0 0 15px;display:block}
.dd-item .ic svg{width:20px;height:20px;display:block}
.trust-item svg{width:22px;height:22px;flex:0 0 22px}

/* 2. CONTRAST. the accent was 3.77:1 on paper and 3.45:1 on paper-2, carrying every
   eyebrow, textlink and tag on the site. White on the accent-filled button was 3.13:1,
   and that button is the primary CTA on all 25 pages. Fourth repeat of this trap
   (Preferred Cleaning 4.38, Pro-Line 4.61), so measure the accent on every ground
   it sits on, at the moment it is chosen. */
:root{
  --brass-2:#7A5C33;        /* darkened Neutral. 5.35:1 on Ivory, 4.84:1 on paper-2 */
  --brass-ink:#031A2D;      /* Navy Blue, for any Neutral-filled control */
}
.btn-royal{color:var(--ivory);box-shadow:0 1px 0 var(--navy)}
.btn-royal:hover{background:var(--navy);color:var(--ivory)}
.accent{color:var(--brass-2)}
.plist li svg{color:var(--brass-2)}

/* 3. DEAD SPACE, at its three structural sources.
   (a) align-items:end on a hero grid whose columns have different natural
       heights leaves an empty rectangle in the top right. Same failure Jeff
       rejected on Pro-Line. */
.hero-grid{align-items:stretch}
.hero-side{display:flex;flex-direction:column;justify-content:center}
/* (b) a media column shorter than its text column, centred, leaves dead space
       above AND below the image on 15 split instances. */
.split{align-items:start}
.split-media img{aspect-ratio:4/3;height:100%}
/* (c) a 760px-capped lede stacked above a multi-column row guarantees an empty
       top-right corner. 14 occurrences. Put the heading and the lede in ONE grid
       so the right side starts level with the first line. */
@media(min-width:900px){
  .sec-head:not(.center){max-width:none;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    gap:clamp(28px,4vw,60px);align-items:end}
  .sec-head:not(.center) .eyebrow{grid-column:1/-1}
  .sec-head:not(.center) h2{margin-bottom:0}
  .sec-head:not(.center) .lede{max-width:52ch;padding-bottom:.35em}
  .sec-head:not(.center) > h2:only-of-type:last-child{grid-column:1/-1;max-width:20ch}
}

/* 4. ORPHANED GRID CARDS (doctrine 15). Fixed repeat(N,1fr) stranded 2 cells on
   the 7-card services grid, 3 on the 5-step journey and 1 column on each
   "Not quite your situation?" row. Auto-fit on a 12-col track instead. */
@media(min-width:900px){
  .g-3{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
  .g-2{grid-template-columns:repeat(auto-fit,minmax(340px,1fr))}
  .steps{grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
}

/* 5. The stock badge is required by doctrine so a placeholder can never be
   forgotten, but it was rendering over the middle of three client pages at full
   size. Keep it visible, make it read as an internal marker. */
.split-media .stock-badge{left:auto;right:8px;bottom:8px;font-size:.55rem;padding:4px 8px;opacity:.9}

/* ---- CTA variants + service spec strip (sameness remediation) ---- */
.cta-rule{border-top:1px solid var(--line-2)}
.cta-rule-in{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(28px,5vw,70px);align-items:start}
.cta-rule-in h2{margin:0;max-width:16ch}
.cta-rule-rows{border-top:1px solid var(--line)}
.cta-row{display:grid;grid-template-columns:auto 1fr auto;gap:18px;align-items:center;padding:20px 0;
  border-bottom:1px solid var(--line);text-decoration:none;color:var(--navy);transition:padding-left .45s var(--e-reveal)}
.cta-row:hover{padding-left:10px}
.cta-row .cn{font-family:var(--label);font-size:.72rem;color:var(--brass-2);letter-spacing:.14em}
.cta-row b{font-family:var(--serif);font-size:1.22rem;display:block;font-weight:600}
.cta-row small{display:block;color:var(--mut);font-size:.93rem;margin-top:3px}
.cta-row svg{width:18px;height:18px;color:var(--brass-2);flex:0 0 18px}

.cta-aside-in{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);align-items:stretch;gap:0}
.cta-aside-copy{background:var(--navy);color:var(--cream);padding:clamp(32px,4vw,54px)}
.cta-aside-copy h2{color:var(--cream);margin:0 0 .55em;max-width:17ch}
.cta-aside-copy p{color:var(--sky-soft);margin:0 0 1.6em}
.cta-aside-card{background:var(--paper-2);border:1px solid var(--line);border-left:0;padding:clamp(28px,3vw,44px);
  display:flex;flex-direction:column;justify-content:center}
.cta-line{display:flex;align-items:center;gap:12px;padding:13px 0;border-bottom:1px solid var(--line);
  text-decoration:none;color:var(--navy);font-weight:600;word-break:break-word;min-height:44px}
.cta-line svg{width:18px;height:18px;color:var(--brass-2);flex:0 0 18px}
.cta-line:hover{color:var(--brass-2)}
.cta-note{font-size:.88rem;color:var(--mut);margin:18px 0 0;line-height:1.5}

.svc-head .svc-head-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);
  gap:clamp(30px,5vw,70px);align-items:center}
.svc-spec{border-top:1px solid var(--line-cream)}
.specrow{display:flex;justify-content:space-between;gap:16px;padding:12px 0;border-bottom:1px solid var(--line-cream);
  font-family:var(--label);font-size:.8rem}
.specrow span{color:var(--sky-soft);letter-spacing:.04em}
.specrow b{color:var(--brass-soft);font-weight:500;text-align:right}

@media(max-width:900px){
  .cta-rule-in,.cta-aside-in,.svc-head .svc-head-grid{grid-template-columns:1fr;gap:26px}
  .cta-aside-card{border-left:1px solid var(--line);border-top:0}
  .svc-spec{margin-top:6px}
}

/* ---- vertical page headers: the photo was at opacity .2 under a navy gradient,
   so the right two thirds read as an empty navy rectangle for ~570px. Let the
   photograph actually carry that side, and scrim only the copy side. ---- */
.phead.img .phead-bg img{opacity:.62}
.phead.img::after{background:linear-gradient(96deg,rgba(3,26,45,.94) 0%,rgba(3,26,45,.86) 34%,rgba(3,26,45,.42) 66%,rgba(3,26,45,.28) 100%)}
@media(max-width:900px){
  .phead.img .phead-bg img{opacity:.42}
  .phead.img::after{background:linear-gradient(180deg,rgba(3,26,45,.92),rgba(3,26,45,.8))}
}

/* ---- 390px tap targets. Measured in a real same-origin iframe: the brand lockup
   was 40px tall and the mobile nav sub-links 43px, both under the 44px floor. ---- */
@media(max-width:900px){
  .brand{min-height:44px}
  .mnav .sub,.mnav-body>a{min-height:44px;display:flex;align-items:center}
  .mnav-close{min-width:44px;min-height:44px}
}

/* =====================================================================
   GATE A ROUND 2 — three of these are regressions I introduced in round 1.
   ===================================================================== */

/* N1. Darkening --brass-2 globally fixed the paper grounds and broke every navy
   one. The token sits on BOTH. On navy the accent must go lighter, not darker,
   so split it by ground instead of by name. The hero brand word measured 2.47:1. */
:root{--brass-on-dark:#D3C0A2}                      /* Neutral tint, 9.95:1 on Navy Blue */
.hero .accent,.phead .accent,.cta .accent,.cta-aside-copy .accent,
.hero .i.accent,.site-foot .accent{color:var(--brass-on-dark)}
.tier .flag{background:var(--brass-on-dark);color:var(--navy)}
.tier.feat .price span,.tier.feat .price small{color:var(--brass-on-dark)}
.value .rn{color:var(--brass-2)}
/* .mnav-body a wins on specificity (0,2,1) over .btn-royal (0,1,0), so the mobile
   CTA was still shipping cream on the accent at 2.77:1. */
.mnav-body a.btn-royal{color:var(--ivory);background:var(--royal)}
.mnav .brand-txt span{color:var(--brass-on-dark)}

/* N2. My own round-1 rule reintroduced align-items:end two rules after removing it
   from the hero. When the lede is taller than the h2 it pushes the HEADLINE BELOW
   its own paragraph: 112px on /pricing/. This is the Tiny Hearts rejection verbatim. */
@media(min-width:900px){
  .sec-head:not(.center){align-items:start}
  .sec-head:not(.center) h2{margin-bottom:0;align-self:start}
  .sec-head:not(.center) .lede{padding-bottom:0}
}

/* N3. auto-fit does NOT prevent orphans, it only collapses empty tracks, and
   minmax(340px) resolved .g-2 to THREE columns at 1072px, turning ten clean 2x2
   grids into 3+1. Revert, then let a stranded last card span the row. */
@media(min-width:900px){
  .g-2{grid-template-columns:repeat(2,1fr)}
  .g-2>*:last-child:nth-child(odd){grid-column:1/-1}
  .g-3{grid-template-columns:repeat(3,1fr)}
  .g-3>*:last-child:nth-child(3n+1){grid-column:1/-1}
  .g-3>*:nth-last-child(2):nth-child(3n+1){grid-column:span 2}
  .steps{grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
}

/* N4. The email wrapped mid-word ("...bookkeepi / ng.com") in the 342px CTA column,
   on all three vertical pages, in the page's only conversion point. */
.cta-line{word-break:normal;overflow-wrap:anywhere;hyphens:none}
.cta-line span{font-size:.94rem;line-height:1.35}

/* N8. Footer links measured 22px tall at 390px. */
@media(max-width:900px){
  .site-foot .fcol a,.site-foot li a{min-height:44px;display:inline-flex;align-items:center}
}

/* =====================================================================
   ORPHANED GRID ROWS — measured at 1440px, five real cases. Round 2's
   auto-fit approach did not clear them; these are explicit per-count rules
   placed last so they win the cascade.
   ===================================================================== */
@media(min-width:900px){
  /* 7 service cards in 3 columns -> the 7th sat alone. Let it run the full width. */
  .grid.g-3 > *:last-child:nth-child(3n+1){grid-column:1 / -1}
  /* 2 cards in a 3-column track ("If that is not quite you") -> use 2 columns. */
  .grid.g-3:has(> *:last-child:nth-child(2)){grid-template-columns:repeat(2,1fr)}
  /* 7 "what is not included" cards in 2 columns -> the 7th sat alone. */
  .grid.g-2 > *:last-child:nth-child(odd){grid-column:1 / -1}
}
/* 5 journey steps in a 4-column track stranded step 05 with three empty cells.
   Five columns fits: the copy is two short lines each. */
@media(min-width:1180px){ .steps{grid-template-columns:repeat(5,1fr)} }
@media(min-width:900px) and (max-width:1179px){
  .steps{grid-template-columns:repeat(3,1fr)}
  .steps > *:nth-last-child(2):nth-child(3n+1){grid-column:span 2}
}
@media(min-width:560px) and (max-width:899px){
  .steps{grid-template-columns:repeat(2,1fr)}
  .steps > *:last-child:nth-child(odd){grid-column:1 / -1}
}

/* A round-2 rule (`.g-3 > *:nth-last-child(2):nth-child(3n+1){grid-column:span 2}`)
   was written for the 7-card case, but with only TWO cards the first item matches it
   too. Combined with the 2-column override above, span 2 = full width, so card one
   ran the full row and card two sat alone underneath. Reset spans when there are
   exactly two children. */
@media(min-width:900px){
  .grid.g-3:has(> *:last-child:nth-child(2)) > *{grid-column:auto}
}

/* Scroll lock for the mobile panel. body{overflow:hidden} makes body its own scroll
   container (kills sticky) and loses scroll position on iOS. Lock on <html>, pin the
   body, restore the offset on close. */
html.nav-locked{overflow:hidden}
html.nav-locked body{position:fixed;left:0;right:0;width:100%}
.mnav[aria-hidden="true"]{visibility:hidden;pointer-events:none}
.mnav[aria-hidden="false"]{visibility:visible}
.mnav a:focus-visible,.mnav button:focus-visible,.burger:focus-visible{outline:2px solid var(--brass-on-dark);outline-offset:3px}

/* The split photo was 374px tall against a ~520px text column. With align-items:start
   that leaves dead space under the image; with center it leaves it above AND below.
   Locked pattern: the media column stretches, the photo is absolutely positioned inside
   it, so the photo fills the row and can never drive its height. */
@media(min-width:900px){
  .split{align-items:stretch}
  .split-media{align-self:stretch;position:relative;overflow:hidden;min-height:380px;border-radius:6px}
  .split-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;aspect-ratio:auto;border-radius:0}
  .split-media .badge{z-index:3}
  .split > *:not(.split-media){align-self:center}
  /* Give the heading the wider column; a 4-line wrap in a 506px box reads cramped. */
  .sec-head:not(.center){grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)}
}


/* =====================================================================
   LANE SPLIT — Max, 2026-08-04, in both screen recordings. The three
   non-profit tiers and the two small business tiers were reading as one
   undifferentiated list of five, and his own tier names carry no signal
   about who they are for. Each group now opens with a labelled band.
   ===================================================================== */
.lane{border-top:2px solid var(--navy);padding-top:clamp(22px,2.6vw,34px);margin-bottom:clamp(26px,3vw,40px)}

.lane-mark{width:58px;height:auto;display:block;margin-bottom:16px;opacity:.85}
.lane h2{margin:0 0 .25em}
.lane .lane-for{font-family:var(--label);font-size:.72rem;font-weight:600;letter-spacing:.22em;
  text-transform:uppercase;color:var(--brass-2);display:block;margin-bottom:10px}
.lane p{color:var(--mut);max-width:82ch;margin:0}
.lane.on-dark{border-top-color:var(--brass-on-dark)}
.lane.on-dark h2{color:var(--cream)}
.lane.on-dark .lane-for{color:var(--brass-on-dark)}
.lane.on-dark p{color:var(--sky-soft)}
.lane-addon{border-top-style:dashed;border-top-width:1px;border-top-color:var(--line)}
.addon-note{font-family:var(--label);font-size:.78rem;letter-spacing:.06em;color:var(--brass-2);
  font-weight:600;margin:0 0 6px}
.svc-card .tag.tag-addon{color:var(--brass-2)}
@media(max-width:600px){ .lane-mark{width:46px;margin-bottom:12px} }

/* pricing hero ledger: group labels inside the spec strip */
.specrow.lab{border-bottom-color:var(--brass-on-dark);padding-top:20px}
.specrow.lab span{color:var(--brass-on-dark);font-weight:700;letter-spacing:.16em;text-transform:uppercase;font-size:.68rem}
.specrow.lab:first-child{padding-top:0}

/* hero credential blocks: the descriptions inherit body leading, which strands a
   one-word last line under each figure. Tighter and narrower reads as a caption. */
.hstat span{line-height:1.42;max-width:34ch;display:block}

/* =====================================================================
   CONTACT BLOCK, 390px. The email address is a 38-character unbreakable
   string, so the grid track resolved to its min-content width of 372.78px
   inside a 335px container and pushed the whole .cinfo column past the
   viewport. Same failure class as the N4 .cta-line fix, on a selector that
   fix did not cover. The link was also 23px tall on the page whose entire
   job is getting contacted.
   ===================================================================== */
.contact-grid{min-width:0}
.contact-grid>*{min-width:0}
.cinfo,.citem{min-width:0}
.citem a{overflow-wrap:anywhere;word-break:normal;hyphens:none;
  display:inline-flex;align-items:center;min-height:44px;line-height:1.35}

/* Card-footer and inline CTA links were 25 to 32px tall at 390px. They are real
   tap targets on pricing, the resource pages and the blog posts. */
@media(max-width:900px){
  .card .foot.textlink,.card .foot a,.rcard .textlink,.prose > p > a.textlink{
    min-height:44px;display:inline-flex;align-items:center}
}

/* =====================================================================
   NAV DROPDOWN — THE HOVER GAP. Reported by Jeff 2026-08-12.
   `.dropdown` sat at `top:calc(100% + 10px)`, so there were 10 pixels of
   dead, unhoverable space between the trigger and the panel. Moving the
   pointer down from the button crossed that gap, `mouseleave` fired on the
   li, and the panel vanished before it could be reached. The menu was
   literally unusable with a mouse.
   Two fixes, both needed. The bridge makes the gap hoverable. The JS close
   delay forgives a diagonal path off the button's edge, which the bridge
   alone does not cover.
   ===================================================================== */
/* Padding on the li looked like the obvious fix and was wrong: it makes the li
   taller, and the panel is offset from the li, so the panel moved DOWN by exactly
   the padding and the gap grew from 10px to 32px. Measured, not assumed. Leave the
   li alone and bridge from the panel instead. */
.nav-links>li.has-dd{padding-bottom:0;margin-bottom:0}
.dropdown{padding-top:12px}
.dropdown::before{content:"";position:absolute;left:0;right:0;top:-18px;height:20px}

/* Closed dropdowns must not be tabbable. visibility:hidden already removes them
   from the tab order; state it on the items too so nothing inside stays focusable
   if a future rule reintroduces visibility. */
.nav-links>li:not(.open) .dropdown{pointer-events:none}
.nav-links>li.open .dropdown{pointer-events:auto}
/* Keyboard parity with hover: focus anywhere inside opens and holds it open. */
.nav-links>li.has-dd:focus-within .dropdown{opacity:1;visibility:visible;transform:translate(-50%,0);pointer-events:auto}

/* =====================================================================
   MOBILE PANEL. The closed panel was translated off-canvas but every link
   inside it stayed in the tab order, so tabbing from the page fell into an
   invisible menu. Scrolling the open panel also chained to the page behind.
   ===================================================================== */
.mnav{visibility:hidden;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
  transition:transform .5s var(--e-hero),visibility 0s linear .5s}
.mnav.open{visibility:visible;transition:transform .5s var(--e-hero),visibility 0s}
.mnav-body a{min-height:44px;display:flex;align-items:center}
.mnav-body .mlabel{min-height:0;display:block}
.mnav .btn{min-height:48px}
@media(prefers-reduced-motion:reduce){
  .mnav{transition:none} .dropdown{transition:opacity .01s} html{scroll-behavior:auto}
}

/* The in-article callout ends with an inline CTA link that measured 32px on the six
   long-form pages. It is the only conversion point in the article body, so it gets a
   real target. Last element in the callout, so giving it its own line costs nothing. */
@media(max-width:900px){
  .callout .textlink{display:inline-flex;align-items:center;min-height:44px;margin-top:.5em}
}

/* =====================================================================
   TAP TARGETS, second sweep. The first pass excluded anything inside a
   <p> or <li> on the theory that those are prose links. Wrong: the house
   pattern for a section CTA is a paragraph containing nothing but a
   .textlink, and breadcrumbs are links inside a <p class="crumbs">. Both
   are real controls. `:only-child` picks out the standalone CTAs and
   leaves genuinely inline prose links alone.
   ===================================================================== */
@media(max-width:900px){
  p > a.textlink:only-child,
  .crumbs a,
  .dd-foot .textlink,
  .rcard .textlink{
    display:inline-flex;align-items:center;min-height:44px}
  .crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:0 .35em}
}

/* Table-of-contents links on the six long-form pages measured 24px. That clears the
   WCAG 2.2 AA floor of 24 but not the house floor of 44, and a TOC is pure navigation. */
@media(max-width:900px){
  .toc a{display:flex;align-items:center;min-height:44px}
  .toc li{margin:0}
}

/* =====================================================================
   PORTRAIT. Max sent a headshot 2026-08-12, the first real photograph of
   him we have had. The source is 400x400, so it is displayed at 300 to
   stay crisp on a 2x screen rather than stretched into a split-media slot.
   Framed as a portrait card, which is what a one-person practice wants
   anyway: this is the person you are hiring.
   ===================================================================== */
.portrait-col{display:flex;justify-content:center;align-items:flex-start}
.portrait{margin:0;max-width:300px;width:100%}
.portrait img{width:100%;height:auto;display:block;border-radius:2px;
  border:1px solid var(--line);background:var(--paper-2)}
.portrait figcaption{margin-top:16px;padding-top:14px;border-top:2px solid var(--navy)}
.portrait figcaption b{display:block;font-family:var(--serif);font-size:1.22rem;
  font-weight:600;color:var(--navy);line-height:1.2}
.portrait figcaption span{display:block;font-family:var(--label);font-size:.7rem;
  letter-spacing:.2em;text-transform:uppercase;color:var(--brass-2);margin-top:6px;font-weight:600}
.portrait figcaption .p-loc{font-family:var(--sans);font-size:.86rem;letter-spacing:0;
  text-transform:none;color:var(--mut);margin-top:12px;line-height:1.45;font-weight:400}
@media(max-width:900px){ .portrait{max-width:260px} .portrait-col{justify-content:flex-start} }

/* =====================================================================
   QUOTE ESTIMATOR. Runs Max's own rate card live inside the quote form,
   so the visitor sees a number and Max receives the inputs that produced it.
   ===================================================================== */
.calc{border:1px solid var(--line);border-top:2px solid var(--navy);background:var(--paper-2);
  padding:clamp(20px,3vw,30px);margin:0 0 22px}
.calc-head{margin-bottom:18px}
.calc-head h3{margin:0 0 .4em}
.calc-head p{color:var(--mut);font-size:.94rem;margin:0;line-height:1.55}
.calc .field small{display:block;font-family:var(--label);font-size:.68rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--brass-2);margin-top:6px;font-weight:600}
.calc-addons{border:0;border-top:1px solid var(--line);margin:20px 0 0;padding:18px 0 0}
.calc-addons legend{font-family:var(--label);font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--brass-2);font-weight:700;padding:0}
.cbx{display:flex;align-items:center;gap:12px;min-height:44px;cursor:pointer;font-size:.96rem;color:var(--ink)}
.cbx input{width:24px;height:24px;flex:0 0 24px;accent-color:var(--royal);cursor:pointer;margin:0}
.calc-note{font-size:.84rem;color:var(--mut);line-height:1.5;margin:12px 0 0}
.calc-out{margin-top:22px;padding-top:18px;border-top:2px solid var(--navy)}
.calc-total{display:flex;justify-content:space-between;align-items:baseline;gap:16px}
.calc-total span{font-family:var(--label);font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--mut);font-weight:600}
.calc-total b{font-family:var(--serif);font-size:clamp(1.9rem,4vw,2.5rem);font-weight:600;color:var(--navy);line-height:1}
.calc-lines{list-style:none;margin:16px 0 0;padding:0}
.calc-lines li{display:flex;justify-content:space-between;gap:16px;padding:9px 0;
  border-bottom:1px solid var(--line-2);font-size:.9rem;color:var(--mut)}
.calc-lines li b{color:var(--navy);font-weight:600;white-space:nowrap;font-variant-numeric:tabular-nums}
.calc-lines .calc-round span,.calc-lines .calc-round b{color:var(--brass-2)}
.calc-fine{font-size:.84rem;color:var(--mut);line-height:1.5;margin:14px 0 0}
.calc [hidden]{display:none!important}
@media(max-width:600px){ .calc-total{flex-direction:column;align-items:flex-start;gap:4px} }

/* The portrait column is shorter than the copy beside it, which leaves the exact
   dead rectangle doctrine forbids. Fill it with substance rather than padding:
   the credentials are already facts on this page. */
.p-facts{margin:22px 0 0;padding:0}
.p-facts>div{display:grid;grid-template-columns:minmax(0,1fr);gap:2px;
  padding:11px 0;border-bottom:1px solid var(--line)}
.p-facts>div:first-child{border-top:1px solid var(--line)}
.p-facts dt{font-family:var(--label);font-size:.64rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--mut);font-weight:600}
.p-facts dd{margin:0;font-size:.92rem;color:var(--navy);font-weight:600;line-height:1.4}

/* Estimator v2. Max, 2026-08-12: the visitor should not have to pick a plan
   before seeing a number, so the tiers are the OUTPUT and get priced side by side. */
.calc-lead{font-family:var(--label);font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--mut);font-weight:600;margin:0 0 16px;line-height:1.5}
.calc-tiers{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.ct{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 18px;align-items:baseline;
  padding:14px 16px;background:var(--paper);border:1px solid var(--line);border-left:3px solid var(--royal)}
.ct-name{font-family:var(--serif);font-size:1.06rem;font-weight:600;color:var(--navy);line-height:1.25}
.ct-price{font-family:var(--serif);font-size:1.6rem;font-weight:600;color:var(--navy);
  line-height:1;white-space:nowrap;text-align:right;font-variant-numeric:tabular-nums}
.ct-price span{font-family:var(--sans);font-size:.78rem;font-weight:600;color:var(--mut)}
.ct small{grid-column:1/-1;font-size:.84rem;color:var(--mut);line-height:1.45}
.ct-out{border-left-color:var(--sky);background:transparent}
.ct-out .ct-price{font-family:var(--label);font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--mut);font-weight:700}
.calc-lines .calc-cap span{font-family:var(--label);font-size:.66rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--brass-2);font-weight:700}
.calc-lines{margin-top:20px}
.cbx.locked{opacity:.72;cursor:default}
.cbx em{font-style:normal;font-family:var(--label);font-size:.62rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--brass-2);display:block;margin-top:2px;font-weight:600}
.cbx span{line-height:1.3}
@media(max-width:600px){
  .ct{grid-template-columns:1fr}
  .ct-price{text-align:left}
}

/* =====================================================================
   ESTIMATOR v3. Max, 2026-08-12: the quote appears only after submit, and
   nothing on the page may reveal how it is calculated. So the live output,
   the per-item breakdown and every "first N included" allowance hint are
   gone. What is left is a questionnaire; the figures render into the
   success message once the POST succeeds.
   ===================================================================== */
.quote-result{margin-top:18px;padding-top:16px;border-top:1px solid var(--line-cream)}
.qr-lead{font-family:var(--label);font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--brass-on-dark);font-weight:700;margin:0 0 12px}   /* 9.95:1 on Navy */
.qr-list{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.qr-list li{display:flex;justify-content:space-between;align-items:baseline;gap:16px;
  padding:12px 14px;background:var(--paper);border:1px solid var(--line);border-left:3px solid var(--royal)}
.qr-list li>span{font-family:var(--serif);font-size:1rem;font-weight:600;color:var(--navy);line-height:1.25}
.qr-list li b{font-family:var(--serif);font-size:1.34rem;font-weight:600;color:var(--navy);
  white-space:nowrap;font-variant-numeric:tabular-nums;line-height:1}
.qr-list li b span{font-family:var(--sans);font-size:.72rem;font-weight:600;color:var(--mut)}
.qr-fine{font-size:.84rem;color:var(--sky-soft);line-height:1.5;margin:14px 0 0}  /* 11.64:1 on Navy */
@media(max-width:520px){
  .qr-list li{flex-direction:column;align-items:flex-start;gap:4px}
}