/* ---------- self-hosted web fonts (latin subset only) ---------- */
@font-face{font-family:"Fraunces"; src:url("/assets/fonts/fraunces-500.woff2") format("woff2"); font-weight:500; font-style:normal; font-display:swap;}
@font-face{font-family:"Fraunces"; src:url("/assets/fonts/fraunces-500italic.woff2") format("woff2"); font-weight:500; font-style:italic; font-display:swap;}
@font-face{font-family:"Source Sans 3"; src:url("/assets/fonts/sourcesans3-400.woff2") format("woff2"); font-weight:400; font-style:normal; font-display:swap;}
@font-face{font-family:"Source Sans 3"; src:url("/assets/fonts/sourcesans3-600.woff2") format("woff2"); font-weight:600; font-style:normal; font-display:swap;}
@font-face{font-family:"Source Sans 3"; src:url("/assets/fonts/sourcesans3-400italic.woff2") format("woff2"); font-weight:400; font-style:italic; font-display:swap;}
@font-face{font-family:"IBM Plex Mono"; src:url("/assets/fonts/ibmplexmono-400.woff2") format("woff2"); font-weight:400; font-style:normal; font-display:swap;}
@font-face{font-family:"IBM Plex Mono"; src:url("/assets/fonts/ibmplexmono-500.woff2") format("woff2"); font-weight:500; font-style:normal; font-display:swap;}

:root{
  --pine:#1B4D3A; --pine-deep:#123527; --pine-black:#0C241B;
  /* --faint is the smallest type on the page (the nav wordmark subtitle, the step
     counters). The nav sits on a translucent, blurred background, so its effective
     backdrop lightens and darkens as sections scroll under it; this value clears
     4.5:1 at the darkest composite, not just against the paper at the top. */
  --ink:#1C211F; --muted:#626F6A; --faint:#566360;
  --paper:#F7F8F7; --card:#FFFFFF; --line:#DCE0DE; --line-soft:#E7E9E8;
  --amber:#AD6A1F; --amber-bright:#C88434; --amber-tint:#F6E7D2;
  --err:#A5402F; --err-tint:#F5E1DD;
  --soft:#EAF0E9; --cream:#EFF1F0;
  --shadow-sm:0 1px 2px rgba(18,53,39,.06), 0 4px 14px rgba(18,53,39,.05);
  --shadow-md:0 2px 4px rgba(18,53,39,.07), 0 12px 32px rgba(18,53,39,.09);
  --ease:cubic-bezier(.22,.8,.32,1);
  --frame:10px;
}
@media(max-width:760px){:root{--frame:6px;}}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0; padding:var(--frame); background:var(--paper); color:var(--ink); font:16.5px/1.3 "Source Sans 3",system-ui,sans-serif; -webkit-font-smoothing:antialiased;}
.pageframe{position:fixed; inset:0; border:var(--frame) solid var(--pine-deep); pointer-events:none; z-index:70;}
.framerules{position:relative;}
.framerules::before,.framerules::after{content:""; position:absolute; top:0; bottom:0; width:1px; background:var(--line); pointer-events:none;}
.framerules::before{left:calc(50% - 540px);}
.framerules::after{right:calc(50% - 540px);}
@media(max-width:1128px){.framerules::before,.framerules::after{display:none;}}
img{max-width:100%}
a{color:var(--pine)}
::selection{background:var(--pine); color:#fff}
.wrap{max-width:1080px; margin:0 auto; padding:0 24px;}
.mono{font-family:"IBM Plex Mono",monospace; font-variant-numeric:tabular-nums; text-transform:uppercase; letter-spacing:.02em; font-weight:500;}

/* ---------- mono label convention: nav, buttons, eyebrows, tags, pills, captions, labels, footer meta ---------- */
.eyebrow,.kick,.navlinks a,.btn,.offer .tag,.bespoke .tag,.pstat span,.metric span,
label,footer.site .mono{
  font-family:"IBM Plex Mono",monospace; font-weight:500; letter-spacing:.02em; text-transform:uppercase;
}

/* ---------- reveal motion ---------- */
.rv{transition:opacity .7s var(--ease), transform .7s var(--ease);}
.js .rv{opacity:0; transform:translateY(18px);}
.rv.in{opacity:1; transform:none;}
.rv.d1{transition-delay:.08s}.rv.d2{transition-delay:.16s}.rv.d3{transition-delay:.24s}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .rv{opacity:1; transform:none; transition:none}
  *{animation:none!important}
}

/* ---------- nav ---------- */
nav{position:sticky; top:var(--frame); z-index:50; background:rgba(247,248,247,.88); backdrop-filter:blur(10px); border-bottom:1px solid transparent; transition:border-color .3s, box-shadow .3s;}
nav.scrolled{border-bottom-color:var(--line); box-shadow:0 1px 12px rgba(18,53,39,.06);}
/* This div is class="wrap navin". .wrap supplies the page's 24px side gutter, but this
   rule's padding shorthand used to reset it to 0, making the nav the only .wrap on the
   page flush to the edge. Since body is inset by exactly --frame, that put the wordmark
   hard against the page frame's inner edge with no gutter at all. Keep the side value
   in the shorthand so the nav gutters like every other section. */
.navin{display:flex; align-items:center; justify-content:space-between; padding:16px 24px; gap:16px;}
.logo{display:inline-flex; align-items:flex-start; gap:.35em;
  font:500 21px/1 "Fraunces",Georgia,serif; color:var(--pine-deep); text-decoration:none; letter-spacing:.01em; flex-shrink:0;}
.logotype{display:block;}
/* Cap-height alignment, not box-centring. The mark is bottom-weighted because the dot
   hangs below the pin, so centring its box makes it sag beside the type. Derived from
   the Fraunces metrics this page actually loads (upem 2000, cap 1400, asc 1956,
   desc -510) with line-height:1:
     capTop = (1 - (asc+desc))/2 + asc - cap = 0.1615em below the top of the line box
     pinTop = (2.6/64) * height              = 0.0658em at height 1.62em
     margin = capTop - pinTop                = 0.0957em
   That puts the top of the pin on the top of the M and lets the dot fall below the
   baseline. Everything is in em, so it holds if the wordmark size changes. */
.logo .mark{height:1.62em; width:auto; margin-top:.0957em; flex:0 0 auto; overflow:visible;}
.logo small{display:block; font:500 8.5px/1 "IBM Plex Mono",monospace; letter-spacing:.34em; color:var(--faint); margin-top:5px; text-transform:uppercase; white-space:nowrap;}
.navlinks{display:flex; gap:26px; align-items:center; font-size:15px;}
.navlinks a{text-decoration:none; color:var(--ink); font-size:13.5px; position:relative;}
.navlinks a:not(.btn)::after{content:""; position:absolute; left:0; right:100%; bottom:-5px; height:2px; background:var(--amber); transition:right .25s var(--ease);}
.navlinks a:not(.btn):hover::after{right:0}
.btn{display:inline-block; font-size:14px; background:var(--pine); color:#fff; text-decoration:none; padding:13px 24px; border-radius:7px; border:none; cursor:pointer; transition:background .2s, transform .2s var(--ease), box-shadow .2s;}
.btn:hover{background:var(--pine-deep); transform:translateY(-1px); box-shadow:var(--shadow-md);}
.btn:active{transform:none}
.btn.ghost{background:transparent; color:var(--pine); border:1.5px solid var(--pine); box-shadow:none;}
.btn.ghost:hover{background:var(--soft); transform:translateY(-1px);}
/* nowrap at every width, not just mobile. The full desktop label used to break onto a
   second line in the narrow desktop band just above the 760px breakpoint, which doubled
   the button's height and shoved the nav out of proportion. */
.navlinks .btn{background:var(--amber-bright); color:var(--pine-black); padding:11px 20px; font-size:13px; white-space:nowrap; box-shadow:0 2px 10px rgba(173,106,31,.28);}
.navlinks .btn:hover{background:#D7973F; color:var(--pine-black);}
@media(max-width:760px){
  .navlinks a:not(.btn){display:none}
  /* The header CTA is a persistent reminder, not the primary call to action: the hero
     carries the full-length button. Shortened to "Free Audit" so it holds one line and
     stays smaller than the wordmark. The words hidden here are display:none, which also
     removes them from the accessible name, so the link carries an explicit aria-label. */
  .navcta-long{display:none;}
  /* The 45% cap belongs on .navlinks, not the button: .navlinks is the flex item whose
     containing block is the header, so a percentage there measures against the header.
     On the button itself a percentage would resolve against .navlinks, which is sized by
     the button, and collapse it. */
  .navlinks{max-width:45%; min-width:0; justify-content:flex-end;}
  .navlinks .btn{display:inline-flex; align-items:center; justify-content:center;
    white-space:nowrap; font-size:11.5px; letter-spacing:.06em;
    padding:0 14px; height:44px; max-width:100%;
    box-shadow:0 2px 8px rgba(173,106,31,.24);}
  .navin{gap:12px;}
}

/* ---------- hero ---------- */
.hero{position:relative; padding:104px 0 76px; overflow:hidden;
  background:
    radial-gradient(900px 480px at 88% -10%, rgba(27,77,58,.10), transparent 60%),
    radial-gradient(700px 420px at -8% 8%, rgba(173,106,31,.07), transparent 55%),
    linear-gradient(180deg, var(--cream), var(--paper) 75%);
  border-bottom:1px solid var(--line);}
.hero::before{content:""; position:absolute; inset:0; pointer-events:none; opacity:.5;
  background-image:linear-gradient(var(--line-soft) 1px, transparent 1px), linear-gradient(90deg, var(--line-soft) 1px, transparent 1px);
  background-size:56px 56px;
  -webkit-mask-image:radial-gradient(720px 480px at 75% 0%, #000 0%, transparent 75%);
          mask-image:radial-gradient(720px 480px at 75% 0%, #000 0%, transparent 75%);}
.hero .wrap{position:relative}
.kick{display:inline-flex; align-items:center; gap:10px; font-size:13px; line-height:1; color:var(--amber); margin:0 0 22px;}
.kick::before{content:""; width:26px; height:1.5px; background:var(--amber);}
h1{font:500 clamp(42px,6.4vw,72px)/1.0 "Fraunces",Georgia,serif; color:var(--pine-deep); margin:0 0 22px; max-width:14ch; text-wrap:balance; letter-spacing:-.04em;}
h1 em{font-style:italic; font-weight:500; color:var(--pine);}
.lede{font-size:19.5px; line-height:1.25; color:var(--muted); max-width:56ch; margin:0 0 34px;}
.heroctas{display:flex; gap:14px; flex-wrap:wrap; margin-bottom:40px;}
.proof{display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:0; max-width:860px; background:var(--card); border:1px solid var(--line); border-radius:10px; overflow:hidden; box-shadow:var(--shadow-sm);}
.pstat{padding:20px 22px; border-right:1px solid var(--line-soft);}
.pstat:last-child{border-right:none}
@media(max-width:640px){.pstat{border-right:none; border-bottom:1px solid var(--line-soft)} .pstat:last-child{border-bottom:none}}
.pstat b{display:block; font:500 27px/1.1 "Fraunces",Georgia,serif; color:var(--pine); font-variant-numeric:tabular-nums;}
.pstat span{font-size:13px; line-height:1.5; color:var(--muted); display:block; margin-top:6px;}

/* ---------- Site Check widget (demo-as-hero) ---------- */
.audit{background:var(--card); border:1px solid var(--line); border-radius:12px; padding:26px 28px; box-shadow:var(--shadow-sm); max-width:640px; margin:0 0 40px;}
/* Darker than --amber: this eyebrow is 11px on the widget's pure white card, where
   --amber measures 4.32:1 and misses 4.5. This value clears it on both the card and
   the page background. */
.audit-eyebrow{font:500 11px/1 "IBM Plex Mono",monospace; letter-spacing:.16em; text-transform:uppercase; color:#9C5E16; margin:0 0 9px;}
.audit-head{font:500 21px/1.25 "Fraunces",Georgia,serif; color:var(--pine-deep); margin:0 0 18px;}
.auditform{display:flex; flex-direction:row; align-items:flex-end; gap:12px;}
.auditfield{flex:1; min-width:220px;}
.auditfield label{display:block; font-size:12.5px; margin-bottom:6px;}
.auditfield input{margin-top:0;}
.auditform .btn{flex-shrink:0;}
@media(max-width:520px){.auditform{flex-direction:column; align-items:stretch;}}
.audit-error{color:var(--amber); font-size:14px; margin:12px 0 0;}
.auditresults{margin-top:22px;}
.arow{display:grid; grid-template-columns:minmax(140px,auto) auto; column-gap:12px; align-items:center; padding:13px 0; border-top:1px solid var(--line-soft);}
.arow:first-child{border-top:none}
.arow-label{font-family:"IBM Plex Mono",monospace; font-weight:500; font-size:13px; letter-spacing:.02em; text-transform:uppercase; color:var(--pine-deep); overflow-wrap:anywhere;}
.arow-state{font-family:"IBM Plex Mono",monospace; font-weight:500; font-size:12px; letter-spacing:.02em; text-transform:uppercase; padding:3px 9px; border-radius:5px; justify-self:start; white-space:nowrap; background:var(--line-soft); color:var(--muted);}
.arow-state.pass{background:var(--soft); color:var(--pine-deep);}
.arow-state.warn{background:var(--amber-tint); color:var(--amber);}
.arow-state.fail{background:var(--err-tint); color:var(--err);}
.arow-state.na{background:var(--line-soft); color:var(--muted);}
.arow-msg{grid-column:1/-1; margin:6px 0 0; color:var(--muted); font-size:14.5px;}
.arow-why{grid-column:1/-1; margin:8px 0 0; color:var(--muted); font-size:13.5px; line-height:1.55; border-left:2px solid var(--amber-tint); padding-left:12px;}
.arow-why:empty{display:none;}
.audit-cta-line{font:500 17px/1.35 "Fraunces",Georgia,serif; color:var(--pine-deep); margin:22px 0 14px;}

/* Locked rows: the four things the free Site Check cannot reach. Deliberately dimmed
   and never given a pass/warn state, because they are not measured. The lock glyph is
   decorative; the state is announced by the visually hidden text beside it. */
.lockedrows{margin-top:4px; border-top:1px dashed var(--line); padding-top:4px;}
.arow.locked{opacity:.62;}
.arow.locked .arow-label{color:var(--muted);}
.arow-state.locked{background:transparent; border:1px dashed var(--line); color:var(--faint); display:inline-flex; align-items:center; justify-content:center; padding:4px 9px;}
.arow-state.locked svg{display:block;}
.arow.locked .arow-msg{color:var(--muted); font-size:14px;}
.locked-note{font:500 16px/1.4 "Fraunces",Georgia,serif; color:var(--pine-deep); margin:16px 0 14px;}
.sr-only{position:absolute; width:1px; height:1px; margin:0; padding:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0;}

/* ---------- sections ---------- */
section{padding:84px 0}
.eyebrow{display:inline-flex; align-items:center; gap:10px; font-size:13px; line-height:1; color:var(--amber); margin:0 0 14px;}
.eyebrow::before{content:""; width:26px; height:1.5px; background:var(--amber);}
h2{font:500 clamp(30px,4vw,42px)/1.05 "Fraunces",Georgia,serif; margin:0 0 18px; color:var(--pine-deep); text-wrap:balance; letter-spacing:-.02em;}
.sub{color:var(--muted); max-width:62ch; margin:0 0 40px; font-size:17.5px;}

/* ---------- offers ---------- */
.offers{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(310px,100%),1fr)); gap:22px;}
.offer{background:var(--card); border:1px solid var(--line); border-radius:12px; padding:34px 32px; display:flex; flex-direction:column; gap:13px; box-shadow:var(--shadow-sm); transition:transform .3s var(--ease), box-shadow .3s;}
.offer:hover{transform:translateY(-3px); box-shadow:var(--shadow-md);}
.offer.hot{border:2px solid var(--pine); position:relative;}
.offer.hot::before{content:"Most clients start here"; position:absolute; top:-13px; left:28px; background:var(--pine); color:#fff; font:500 10.5px/1 "IBM Plex Mono",monospace; letter-spacing:.1em; text-transform:uppercase; padding:7px 12px; border-radius:99px;}
.offer .tag{align-self:flex-start; font-size:12px; padding:6px 11px; background:var(--soft); color:var(--pine-deep); border-radius:99px;}
.offer h3{font:500 25px/1.2 "Fraunces",Georgia,serif; margin:4px 0 0;}
.offer .price{font:500 31px/1.1 "Fraunces",Georgia,serif; color:var(--pine); font-variant-numeric:tabular-nums;}
.offer .price small{font:400 15px/1.4 "Source Sans 3",sans-serif; color:var(--muted); font-weight:400;}
.offer .window{align-self:flex-start; display:inline-flex; align-items:center; gap:7px; font:500 11px/1 "IBM Plex Mono",monospace; letter-spacing:.09em; text-transform:uppercase; color:var(--pine-deep); background:var(--soft); border:1px solid var(--line); border-radius:99px; padding:7px 12px;}
.offer .window b{font-weight:600; color:var(--pine);}
.offer p.for{color:var(--muted); font-size:15px; margin:0; font-style:italic;}
.offer ul{margin:8px 0 20px; padding-left:0; list-style:none; flex:1;}
.offer li{margin-bottom:11px; padding-left:26px; position:relative;}
.offer li::before{content:"•"; position:absolute; left:0; color:var(--amber); font-weight:600;}
.offer .btn{align-self:flex-start}
/* bespoke inquiry band */
.bespoke{margin-top:22px; background:var(--pine-deep); color:#E8EFE8; border-radius:12px; padding:34px 38px; display:flex; align-items:center; justify-content:space-between; gap:36px; box-shadow:var(--shadow-md); position:relative; overflow:hidden;}
.bespoke::before{content:""; position:absolute; inset:0; background:radial-gradient(560px 220px at 92% 0%, rgba(200,132,52,.16), transparent 60%); pointer-events:none;}
.bespoke-txt{position:relative}
.bespoke .tag{display:inline-block; font-size:12px; background:rgba(255,255,255,.1); color:#E9BE7B; padding:6px 11px; border-radius:99px;}
.bespoke h3{font:500 22px/1.25 "Fraunces",Georgia,serif; margin:12px 0 8px; color:#fff;}
.bespoke p{color:#B9C7BB; font-size:15.5px; max-width:66ch; margin:0;}
.bespoke .scoped{font:500 11px/1 "IBM Plex Mono",monospace; letter-spacing:.09em; text-transform:uppercase; color:#E9BE7B; margin:12px 0 0;}
.bespoke .lead{color:#E8EFE8; font-size:16.5px; margin:10px 0 6px;}
.bespoke .btn{position:relative; background:var(--amber-bright); color:var(--pine-black); white-space:nowrap; flex-shrink:0;}
.bespoke .btn:hover{background:#D7973F; color:var(--pine-black);}
@media(max-width:760px){.bespoke{flex-direction:column; align-items:flex-start;}}

/* ---------- case study ---------- */
.case{position:relative; background:var(--pine-deep); color:#EDF2EC; overflow:hidden;}
.case::before{content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(800px 500px at 100% 100%, rgba(200,132,52,.12), transparent 60%),
             radial-gradient(600px 400px at 0% 0%, rgba(255,255,255,.05), transparent 55%);}
.case .wrap{position:relative}
.case .eyebrow{color:#D9A85C}.case .eyebrow::before{background:#D9A85C}
.case h2{color:#F6F8F4}
.case .sub{color:#AFC0B1}
.casegrid{display:grid; grid-template-columns:1.05fr .95fr; gap:52px; align-items:center;}
@media(max-width:860px){.casegrid{grid-template-columns:1fr}}
.case p{max-width:58ch}
.bigpull{font:500 clamp(22px,2.6vw,28px)/1.35 "Fraunces",Georgia,serif; color:#F6F8F4; margin:26px 0; max-width:26ch;}
.bigpull b{color:#E9BE7B}
.metricrow{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:30px;}
.metric{background:rgba(255,255,255,.055); border:1px solid rgba(255,255,255,.13); border-radius:10px; padding:18px 20px; backdrop-filter:blur(2px);}
.metric b{display:block; font:500 30px/1.1 "Fraunces",Georgia,serif; color:#fff; font-variant-numeric:tabular-nums;}
.metric span{font-size:13px; line-height:1.55; color:#9FB3A2; display:block; margin-top:6px;}
/* browser frame */
.frame{background:#0E2A1F; border:1px solid rgba(255,255,255,.16); border-radius:12px; overflow:hidden; box-shadow:0 24px 60px rgba(0,0,0,.35); transform:rotate(.4deg);}
.framebar{display:flex; align-items:center; gap:8px; padding:11px 14px; background:rgba(255,255,255,.06); border-bottom:1px solid rgba(255,255,255,.1);}
.framebar i{width:10px; height:10px; border-radius:50%; background:rgba(255,255,255,.22); display:inline-block;}
.frameurl{margin-left:8px; font:400 12px/1 "IBM Plex Mono",monospace; color:#9FB3A2; background:rgba(0,0,0,.25); padding:6px 12px; border-radius:6px; flex:1;}
.framecap{font:400 12.5px/1.6 "IBM Plex Mono",monospace; color:#8FA396; margin-top:14px; text-align:center;}
.framecap a{color:#D9A85C}

/* ---------- live Site Check pinned sequence ---------- */
/* Layout mode (pinned vs. flat) is decided purely by CSS (.js scope + media query),
   never by JS after the fetch resolves: the section reserves its final height from
   first paint and it never changes again, whether the fetch succeeds, fails, or is
   still pending. JS only ever swaps text/state inside the rows already on the page. */
.liveaudit{position:relative; background:var(--pine-deep); color:#EDF2EC;}
.liveaudit .eyebrow{color:#D9A85C}
.liveaudit .eyebrow::before{background:#D9A85C}

/* No-JS default: a short, honest static invite. Nothing here can shift after load,
   since there is no fetch without JS, so there is no "before/after" to reconcile. */
/* Shader layer. Stays an empty div unless the Paper library actually loads and mounts,
   which only happens on wide viewports with motion allowed. Until then, and forever if
   the CDN is unreachable, the section's flat pine background is what shows, which is a
   finished look on its own. The scrim sits between shader and copy and guarantees a
   contrast floor no matter which frame the shader happens to be on. */
.la-shader{position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden;}
.la-shader canvas{display:block; width:100%; height:100%;}
.la-scrim{position:absolute; inset:0; z-index:1; pointer-events:none; opacity:0; transition:opacity .8s var(--ease);}
.liveaudit.shader-on .la-scrim{opacity:1; background:linear-gradient(180deg, rgba(12,36,27,.70) 0%, rgba(12,36,27,.60) 45%, rgba(12,36,27,.73) 100%);}

.la-fallback{padding:84px 24px; max-width:56ch; margin:0 auto;}
.la-fallback p{font:500 clamp(20px,2.6vw,26px)/1.4 "Fraunces",Georgia,serif; color:#F6F8F4; margin:0 0 20px;}
.la-pin-content{display:none;}

/* JS present: the full stage structure is always rendered, immediately, in a skeleton
   state, and that is the ONLY thing that decides height: a static CSS ruleset. */
.js .liveaudit .la-fallback{display:none;}
.js .liveaudit .la-pin-content{display:block;}
.js .liveaudit{padding:84px 0;}
.js .liveaudit .la-pin-in{position:relative; z-index:2; width:100%;}
.js .liveaudit .la-stage{position:static; opacity:1; margin-bottom:36px;}
.js .liveaudit .la-stage:last-child{margin-bottom:0;}
.js .liveaudit .la-stage[data-la="1"] .la-mockinput{display:none;}
.js .liveaudit .la-results .arow{opacity:1; transform:none; transition:none;}

/* Stacked default (mobile, reduced motion, no pinning): every check is followed by its
   own explainer and all six are readable at once. The shared detail panel is redundant
   here, so it is removed from the flow entirely. */
.la-insight{display:block;}
.la-detail{display:none;}
.liveaudit .arow-why{grid-column:1/-1; margin:8px 0 0; font-size:14px; line-height:1.55; color:#9FB3A4; border-left:2px solid rgba(233,190,123,.45); padding-left:12px;}

/* Pinned override: desktop widths with motion allowed only. Same markup, same rows,
   just staged via scroll progress instead of shown all at once, with the per-row
   explainers collapsed into one panel that swaps as the active row advances. */
@media(min-width:760px) and (prefers-reduced-motion:no-preference){
  .js .liveaudit{height:260vh; padding:0;}
  .js .liveaudit .la-pin-content{position:sticky; top:0; height:100vh; display:flex; align-items:center;}
  .js .liveaudit .la-pin-in{height:66vh;}
  .js .liveaudit .la-stage{position:absolute; inset:0; display:flex; flex-direction:column; justify-content:center; opacity:0; transform:translateY(18px); transition:opacity .35s var(--ease), transform .35s var(--ease); pointer-events:none; margin-bottom:0;}
  .js .liveaudit .la-stage[data-la="1"] .la-mockinput{display:inline-flex;}
  .js .liveaudit .la-stage.active{opacity:1; transform:none; pointer-events:auto;}
  .js .liveaudit .la-stage.active .la-results .arow{opacity:1; transform:none;}
  .js .liveaudit .la-results .arow{opacity:0; transform:translateY(10px); transition:opacity .3s var(--ease), transform .3s var(--ease);}

  .js .liveaudit .la-insight{display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); gap:40px; align-items:start;}
  .js .liveaudit .la-detail{display:block;}
  /* Visually replaced by the detail panel, but kept in the accessibility tree: a screen
     reader user scrolling this band gets all six explanations inline, instead of only
     whichever one the scroll position happens to have made active. The panel itself is
     aria-hidden, so nothing is announced twice. */
  .js .liveaudit .arow-why{position:absolute; width:1px; height:1px; margin:0; padding:0;
    overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0;}
  .js .liveaudit .la-results .arow{padding:10px 0 10px 14px; border-left:2px solid transparent; transition:opacity .3s var(--ease), transform .3s var(--ease), border-color .3s var(--ease), opacity .3s;}
  .js .liveaudit .la-results .arow .arow-label,
  .js .liveaudit .la-results .arow .arow-msg{transition:color .3s var(--ease), opacity .3s var(--ease);}
  .js .liveaudit .la-stage.active .la-results .arow:not(.is-active){opacity:.45;}
  .js .liveaudit .la-results .arow.is-active{border-left-color:var(--amber-bright); background:rgba(255,255,255,.04);}
  .js .liveaudit .la-results .arow.is-active .arow-label{color:#FFFFFF;}
}

/* The swapping detail panel. Only ever rendered in the pinned layout. */
.la-detail{border-left:1px solid rgba(255,255,255,.16); padding-left:32px;}
.la-detail-label{font:500 21px/1.25 "Fraunces",Georgia,serif; color:#F6F8F4; margin:0 0 20px;}
.la-detail-eyebrow{font:500 10px/1 "IBM Plex Mono",monospace; letter-spacing:.16em; text-transform:uppercase; color:#D9A85C; margin:0 0 8px;}
.la-detail-body{font-size:15px; line-height:1.6; color:#C3D2C6; margin:0 0 22px;}
.la-detail-body:last-child{margin-bottom:0;}

/* "Your turn" preview list */
.la-preview{list-style:none; margin:0 0 26px; padding:0; display:grid; grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr)); gap:10px 26px;}
.la-preview li{padding-left:15px; border-left:2px solid rgba(233,190,123,.45);}
.la-preview b{display:block; font-family:"IBM Plex Mono",monospace; font-weight:500; font-size:12px; letter-spacing:.04em; text-transform:uppercase; color:#EDF2EC;}
.la-preview span{display:block; margin-top:3px; font-size:13.5px; line-height:1.5; color:#9FB3A4;}
.la-preview-intro{font-size:15.5px; line-height:1.6; color:#C3D2C6; margin:0 0 20px; max-width:52ch;}
.la-preview-note{font-size:13.5px; line-height:1.6; color:#9FB3A4; margin:18px 0 0; max-width:60ch;}

.la-line{font:500 clamp(22px,3vw,30px)/1.3 "Fraunces",Georgia,serif; color:#F6F8F4; max-width:26ch; margin:0 0 28px;}
.la-mockinput{display:inline-flex; align-items:center; gap:2px; max-width:420px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.18); border-radius:7px; padding:13px 15px; font-family:"IBM Plex Mono",monospace; font-size:14px; color:#EDF2EC;}
.la-cursor{display:inline-block; width:2px; height:16px; background:#E9BE7B; animation:laBlink 1s step-end infinite;}
@keyframes laBlink{50%{opacity:0}}

.liveaudit .arow{border-top-color:rgba(255,255,255,.14);}
.liveaudit .arow-label{color:#EDF2EC;}
.liveaudit .arow-msg{color:#AFC0B1;}
.liveaudit .arow-state{background:rgba(255,255,255,.08); color:#C9D3CC;}
.liveaudit .arow-state.pass{background:rgba(143,217,182,.16); color:#8FD9B6;}
.liveaudit .arow-state.warn{background:rgba(233,190,123,.2); color:#E9BE7B;}
.liveaudit .arow-state.fail{background:rgba(229,115,90,.2); color:#E5735A;}
.liveaudit .la-results .arow:nth-child(1){transition-delay:.02s}
.liveaudit .la-results .arow:nth-child(2){transition-delay:.08s}
.liveaudit .la-results .arow:nth-child(3){transition-delay:.14s}
.liveaudit .la-results .arow:nth-child(4){transition-delay:.2s}
.liveaudit .la-results .arow:nth-child(5){transition-delay:.26s}
.liveaudit .la-results .arow:nth-child(6){transition-delay:.32s}

.la-turn{font:500 clamp(30px,4vw,42px)/1.05 "Fraunces",Georgia,serif; color:#F6F8F4; margin:0 0 14px;}
.la-cta{align-self:flex-start; background:var(--amber-bright); color:var(--pine-black);}
.la-cta:hover{background:#D7973F; color:var(--pine-black);}

/* ---------- process ---------- */
.steps{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(230px,100%),1fr)); gap:0; counter-reset:step; border:1px solid var(--line); border-radius:12px; overflow:hidden; background:var(--card); box-shadow:var(--shadow-sm);}
.step{padding:30px 28px; position:relative; border:1px solid transparent; border-right-color:var(--line-soft); transition:opacity .3s var(--ease), border-color .3s var(--ease);}
.step:last-child{border-right:none}
@media(max-width:900px){.steps{grid-template-columns:1fr 1fr}.step:nth-child(2){border-right:none}.step:nth-child(-n+2){border-bottom:1px solid var(--line-soft)}}
@media(max-width:520px){.steps{grid-template-columns:1fr}.step{border-right:none; border-bottom:1px solid var(--line-soft)}.step:last-child{border-bottom:none}}
.step::before{counter-increment:step; content:"[0" counter(step) "]"; font:500 13px/1 "IBM Plex Mono",monospace; color:var(--faint); letter-spacing:.1em; transition:color .3s var(--ease);}
.step.active{border-color:var(--pine);}
.step.active::before{color:var(--amber);}
.step.dim{opacity:.55;}
@media(prefers-reduced-motion:reduce){
  .step{border-color:var(--pine); opacity:1;}
  .step::before{color:var(--amber);}
}
.step h3{font:500 18.5px/1.3 "Fraunces",Georgia,serif; margin:12px 0 8px;}
.step p{font-size:15px; color:var(--muted); margin:0;}
.step .days{display:inline-block; margin-top:14px; font:500 11px/1 "IBM Plex Mono",monospace; letter-spacing:.1em; text-transform:uppercase; color:var(--pine); background:var(--soft); padding:6px 10px; border-radius:99px;}

/* ---------- about ---------- */
.about{background:var(--cream); border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
.aboutgrid{display:grid; grid-template-columns:1.2fr .8fr; gap:52px; align-items:start;}
@media(max-width:780px){.aboutgrid{grid-template-columns:1fr}}
.about p{max-width:60ch}
.credo{background:var(--card); border:1px solid var(--line); border-left:3px solid var(--amber); border-radius:0 10px 10px 0; padding:24px 26px; box-shadow:var(--shadow-sm);}
.credo p{font:500 18px/1.5 "Fraunces",Georgia,serif; font-style:italic; color:var(--pine-deep); margin:0;}
.credo footer{margin-top:10px; font-size:13.5px; color:var(--muted);}

/* ---------- contact ---------- */
.contactgrid{display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:start;}
@media(max-width:780px){.contactgrid{grid-template-columns:1fr}}
form{display:flex; flex-direction:column; gap:15px;}
label{font-size:13.5px;}
input,textarea{width:100%; padding:13px 15px; border:1px solid var(--line); border-radius:7px; font:inherit; background:var(--card); color:var(--ink); margin-top:6px; transition:border-color .2s, box-shadow .2s;}
input:focus,textarea:focus{outline:none; border-color:var(--pine); box-shadow:0 0 0 3px rgba(27,77,58,.14);}
.contactalt{background:var(--pine-deep); color:#E8EFE8; border-radius:12px; padding:32px; box-shadow:var(--shadow-md);}
.contactalt h3{font:500 21px/1.3 "Fraunces",Georgia,serif; margin:0 0 16px; color:#fff;}
.contactalt .cline{font-size:15px; margin:0 0 12px; display:flex; align-items:baseline; gap:12px;}
.contactalt .clab{color:#AFC0B1; font-family:"IBM Plex Mono",monospace; font-weight:500; font-size:13px; letter-spacing:.02em; text-transform:uppercase; min-width:74px;}
.contactalt a{font-family:"IBM Plex Mono",monospace; font-weight:500; text-decoration:none; color:#E9BE7B; font-variant-numeric:tabular-nums;}
.contactalt p.note{color:#AFC0B1; font-size:15px;}
.finequiet{font-size:13.5px; color:var(--muted); margin-top:4px;}
.finemono{font-family:"IBM Plex Mono",monospace; font-size:12.5px; line-height:1.5; color:var(--muted); margin:10px 0 0;}

/* Two checks comparison. Two cards with matching row labels rather than a real table,
   so it stacks at narrow widths without ever forcing a horizontal scroll. */
.compare{margin:0 0 44px;}
.compare-head{font:500 clamp(24px,3vw,32px)/1.15 "Fraunces",Georgia,serif; color:var(--pine-deep); margin:0 0 22px; text-wrap:balance;}
.compare-cols{display:grid; grid-template-columns:1fr 1fr; gap:20px; align-items:stretch;}
.compare-col{border:1px solid var(--line); border-radius:12px; padding:24px 26px; background:var(--card);}
.compare-col.muted{background:var(--cream); color:var(--muted);}
.compare-col.lead{border:2px solid var(--pine); box-shadow:var(--shadow-sm);}
.compare-col h3{font:500 21px/1.25 "Fraunces",Georgia,serif; margin:0 0 4px; color:var(--pine-deep);}
.compare-col.muted h3{color:var(--muted);}
.compare-col .ctag{display:block; font:500 10.5px/1 "IBM Plex Mono",monospace; letter-spacing:.14em; text-transform:uppercase; margin:0 0 12px; color:var(--faint);}
.compare-col.lead .ctag{color:var(--amber);}
.compare-row{border-top:1px solid var(--line-soft); padding:12px 0 0; margin:12px 0 0;}
.compare-row dt{font:500 10.5px/1 "IBM Plex Mono",monospace; letter-spacing:.12em; text-transform:uppercase; color:var(--faint); margin:0 0 6px;}
.compare-row dd{margin:0; font-size:15px; line-height:1.55;}
.compare-col.lead .compare-row dd{color:var(--ink);}
.compare-col dl{margin:0;}
@media(max-width:760px){
  .compare-cols{grid-template-columns:1fr;}
}

/* ---------- texture canvases + interactive proof ---------- */
.shader{position:absolute; inset:0; width:100%; height:100%; z-index:0; pointer-events:none;}
.hero::before{z-index:1}
.hero .wrap{z-index:2}
.case::before{z-index:1}
.case .wrap{z-index:2}
.tprog{height:3px; background:var(--line-soft); border-radius:99px; margin:0 0 26px; overflow:hidden;}
.tprog i{display:block; height:100%; width:0%; background:linear-gradient(90deg,var(--pine),var(--amber-bright)); border-radius:99px;}
.ba-body{position:relative; background:linear-gradient(180deg,#16211B,#101915); min-height:300px; overflow:hidden;}
.ba-after{position:absolute; inset:0;}
.ba-after img{width:100%; height:100%; object-fit:cover; display:block;}
.ba-before{position:absolute; top:0; left:0; bottom:0; width:50%; overflow:hidden; border-right:2px solid #E9BE7B; box-shadow:2px 0 14px rgba(0,0,0,.35); z-index:1;}
.ba-before-in{height:100%;}
.ba-before-in img{width:100%; height:100%; object-fit:cover; display:block;}
.ba-handle{position:absolute; top:0; bottom:0; left:50%; width:36px; margin-left:-18px; cursor:ew-resize; display:flex; align-items:center; justify-content:center; touch-action:none; z-index:3;}
.ba-knob{width:30px; height:30px; border-radius:50%; background:#E9BE7B; color:#0C241B; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:13px; box-shadow:0 2px 10px rgba(0,0,0,.4);}
.ba-tag{position:absolute; top:10px; font:500 9.5px/1 "IBM Plex Mono",monospace; letter-spacing:.12em; text-transform:uppercase; padding:5px 9px; border-radius:99px; z-index:2;}
.ba-tag.tbefore{left:10px; background:rgba(255,255,255,.88); color:#555;}
.ba-tag.tafter{right:10px; background:rgba(12,36,27,.72); color:#E9BE7B;}

/* ---------- service-area marquee ---------- */
.marquee{border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:var(--cream); overflow:hidden; padding:14px 0;}
.marquee-track{display:flex; width:max-content; white-space:nowrap; font-family:"IBM Plex Mono",monospace; font-weight:500; letter-spacing:.08em; font-size:12.5px; color:var(--muted); animation:marqueeScroll 34s linear infinite;}
.marquee:hover .marquee-track{animation-play-state:paused;}
@keyframes marqueeScroll{from{transform:translateX(0)} to{transform:translateX(-50%)}}
.marquee-static{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;}
@media(prefers-reduced-motion:reduce){
  .marquee-track{animation:none; flex-wrap:wrap; white-space:normal;}
  .marquee-track span:nth-child(2){display:none;}
}

/* ---------- footer: full-bleed pine band + ghost wordmark ---------- */
footer.site{position:relative; background:var(--pine-deep); color:#C9D3CC; padding:64px 0 0; overflow:hidden; font-size:14px;}
.footin{display:flex; flex-wrap:wrap; gap:48px; padding-bottom:48px; border-bottom:1px solid rgba(255,255,255,.12);}
.footcol{display:flex; flex-direction:column; gap:10px; min-width:160px;}
.footcol a{color:#C9D3CC; text-decoration:none; font-size:14px;}
.footcol a:hover{color:#E9BE7B;}
.footlabel{color:#8FA396; font-size:11px; margin:0 0 4px;}
.footmeta{color:#8FA396; font-size:13px; margin-left:auto; align-self:flex-end;}
@media(max-width:640px){.footin{flex-direction:column; gap:28px;} .footmeta{margin-left:0; align-self:flex-start;}}
.footghost{height:110px; overflow:hidden; font:500 clamp(48px,18vw,240px)/1 "Fraunces",Georgia,serif;
  display:flex; align-items:flex-start; justify-content:center; gap:.35em;
  color:transparent; -webkit-text-stroke:1px rgba(220,224,222,.18); letter-spacing:-.02em;
  margin:24px 0 0; user-select:none; white-space:nowrap;}
/* Same cap-height rule as the nav, but this band is deliberately cropped to 110px and
   the mark must never be: cropping the dot off is one of the brand kit's explicit
   do-nots. min() caps the mark so cap-top + mark height always clears 110px, even at
   the 240px ceiling of the fluid wordmark. The margin tracks whichever value min()
   picks. currentColor would be transparent here, so the ghost ink is set explicitly. */
.footghost .mark{height:min(1.62em,68px); width:auto; flex:0 0 auto;
  margin-top:calc(.1615em - .040625 * min(1.62em,68px));
  color:rgba(220,224,222,.18); -webkit-text-stroke:0;}
:focus-visible{outline:2px solid var(--amber); outline-offset:2px;}