/* ─────────────────────────────────────────────────────────────────────
   Type: Lora (SIL OFL 1.1) self-hosted, subset to Latin, variable weight.
   Self-hosted rather than CDN-loaded so the site has zero third-party
   requests, works behind a strict CSP, and does not depend on Google's
   uptime. Body copy uses the platform UI sans, which renders natively and
   costs nothing to download.
   ──────────────────────────────────────────────────────────────────── */
@font-face{font-family:"Lora";font-style:normal;font-weight:400 700;font-display:swap;
  src:url("/assets/fonts/lora-latin.75584d207f.woff2") format("woff2")}
@font-face{font-family:"Lora";font-style:italic;font-weight:400 700;font-display:swap;
  src:url("/assets/fonts/lora-latin-italic.b4eea8de63.woff2") format("woff2")}

:root{
  --navy:#0B1F3A; --navy-d:#061223; --navy-l:#16304F; --navy-x:#1E3C61;
  --navy-t:#0B1F3A;         /* navy used as INK (see dark mode) */
  /* --gold-d is the gold used for text on light panels. #8F6F10 measured
     4.43:1 against the section background — a hair under the 4.5:1 floor,
     and every eyebrow label on the site uses it. Darkened until it clears
     with margin; against navy and in the gradients the change is invisible. */
  --gold:#C9A227; --gold-l:#E8CE72; --gold-d:#84670E;
  --green:#4C8B2B; --green-l:#6FA83F; --green-d:#356320;
  --green-ui:#427826;       /* green that carries white text — AA at 5.3:1 */
  --ink:#0C1218;            /* headings */
  --body:#2A323C;           /* body copy — darkened for contrast */
  --mute:#5B6673;           /* secondary */
  --line:#DCE3EC; --line-d:#C3CEDB;
  --bg:#FFFFFF; --bg2:#F5F8FC; --bg3:#E9EFF6;
  --card:#FFFFFF; --card2:#FAFCFE;
  --wrap:1200px; --r:14px;
  --serif:"Lora",ui-serif,"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,Cambria,serif;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI Variable Text","Segoe UI",Inter,Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;
  --sh:0 2px 4px rgba(11,31,58,.04),0 12px 28px -12px rgba(11,31,58,.16);
  --sh-lg:0 30px 64px -22px rgba(4,14,30,.5);
  --focus:#1E6FD9;
  --ease:cubic-bezier(.22,.61,.36,1);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--sans);font-size:17.5px;line-height:1.68;color:var(--body);background:var(--bg);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;
  font-variant-numeric:normal;overflow-x:hidden}
img,svg{max-width:100%;display:block}
a{color:var(--navy-t);text-decoration:none}
a:hover{color:var(--green-d)}
strong{font-weight:700;color:var(--ink)}
::selection{background:rgba(201,162,39,.28);color:var(--ink)}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 26px}
.narrow{max-width:840px}

/* headings — serif display face, optical sizing, balanced wraps */
h1,h2,h3,legend,.amt,.est-num,.stat b{font-family:var(--serif);font-feature-settings:"kern" 1,"liga" 1,"clig" 1}
h1,h2,h3{color:var(--ink);line-height:1.14;margin:0 0 .5em;letter-spacing:-.014em;
  font-weight:640;text-wrap:balance;-webkit-hyphens:none;hyphens:none}
h1{font-size:clamp(34px,4.9vw,57px);letter-spacing:-.022em;line-height:1.07}
h2{font-size:clamp(26px,3.3vw,38px);letter-spacing:-.018em;line-height:1.13}
h3{font-size:21.5px;letter-spacing:-.008em;font-weight:620;line-height:1.28}
h4{font-family:var(--sans);font-size:12.5px;letter-spacing:.15em;text-transform:uppercase;color:var(--green-d);font-weight:800;margin:0 0 10px}
p{margin:0 0 1.05em;text-wrap:pretty}
.lead{font-size:20px;color:var(--body);line-height:1.6;text-wrap:pretty}

/* ── accessibility: skip link + visible focus ─────────── */
.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--navy);color:#fff;
  padding:14px 22px;border-radius:0 0 10px 0;font-weight:700;font-size:15.5px}
.skip:focus{left:0;color:#fff}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px;border-radius:4px}
.btn:focus-visible,.est-c:focus-visible{outline-offset:3px}
a:focus-visible{outline-color:var(--focus)}
[tabindex="-1"]:focus{outline:0}

/* ── reading progress ─────────────────────────────────── */
.rpwrap{position:fixed;left:0;right:0;top:0;height:3px;z-index:120;pointer-events:none;background:transparent}
#rp{height:100%;transform-origin:0 50%;transform:scaleX(0);
  background:linear-gradient(90deg,var(--gold),var(--green-l));will-change:transform}

/* ── scroll reveal ────────────────────────────────────── */
.rv{opacity:0;transform:translateY(16px);transition:opacity .62s var(--ease),transform .62s var(--ease)}
.rv.in{opacity:1;transform:none}
.eyebrow{font-size:12.5px;letter-spacing:.19em;text-transform:uppercase;color:var(--gold-d);font-weight:800;margin-bottom:15px}
.sec{padding:88px 0}
.sec.tight{padding:58px 0}
.sec.alt{background:var(--bg2)}
.sec.navy{background:var(--navy);color:#D3DEEB}
.sec.navy h2,.sec.navy h3{color:#fff}
.sec.navy .eyebrow{color:var(--gold-l)}
.sec.navy .lead{color:#BCCBDC}
.center{text-align:center}
.center>p,.center>.lead{margin-left:auto;margin-right:auto;max-width:690px}

/* ── header ─────────────────────────────────────────── */
.hdr{position:sticky;top:0;z-index:90;background:color-mix(in srgb,var(--bg) 94%,transparent);background:rgba(255,255,255,.94);
  backdrop-filter:saturate(180%) blur(16px);-webkit-backdrop-filter:saturate(180%) blur(16px);
  border-bottom:1px solid var(--line);transition:box-shadow .25s var(--ease),border-color .25s}
.hdr.down{box-shadow:0 10px 30px -18px rgba(6,18,35,.45);border-bottom-color:transparent}
.hdr .in{display:flex;align-items:center;gap:20px;height:80px;max-width:1340px}
/* The header row carries more than the content column does (logo + 7 links +
   CTA + search), so it is allowed to run wider than --wrap. */
.logo{flex:0 0 auto;display:block}
.logo img{height:46px;width:auto;max-width:none}
.nav{display:flex;gap:20px;margin-left:auto;align-items:center;flex:0 0 auto}
.nav a{font-size:15px;font-weight:650;color:var(--navy-t);white-space:nowrap}
.nav a:hover{color:var(--green-d)}
.burger{display:none;margin-left:auto;background:0;border:0;font-size:27px;color:var(--navy-t);cursor:pointer;line-height:1}
.btn{display:inline-block;background:var(--green-ui);color:#fff!important;padding:13px 27px;border-radius:9px;font-weight:720;font-size:16px;border:0;cursor:pointer;transition:.16s;text-align:center;line-height:1.3}
.btn:hover{background:var(--green-d);color:#fff!important;transform:translateY(-1px);box-shadow:0 8px 20px -8px rgba(53,99,32,.7)}
.btn.gold{background:var(--gold);color:var(--navy)!important}
.btn.gold:hover{background:var(--gold-l);color:var(--navy)!important;box-shadow:0 8px 20px -8px rgba(201,162,39,.8)}
.btn.ghost{background:transparent;border:1.6px solid rgba(255,255,255,.55);color:#fff!important}
.btn.ghost:hover{background:rgba(255,255,255,.13);border-color:#fff;box-shadow:none}
.btn.out{background:#fff;border:1.6px solid var(--line-d);color:var(--navy-t)!important}
.btn.out:hover{border-color:var(--navy-t);background:#fff;color:var(--navy-t)!important}
.btn.lg{padding:17px 38px;font-size:17.5px}
.nav .btn{font-size:14.5px;padding:11px 22px}

/* ── hero ───────────────────────────────────────────── */
.hero{background:linear-gradient(155deg,var(--navy-d) 0%,var(--navy) 44%,var(--navy-x) 100%);color:#C6D3E3;padding:84px 0 92px;position:relative;overflow:hidden}
.hero:before{content:"";position:absolute;inset:auto 0 0 0;height:5px;background:linear-gradient(90deg,var(--gold-d),var(--gold-l) 42%,var(--green) 100%);z-index:3}
.hero .glow{position:absolute;width:820px;height:820px;right:-280px;top:-340px;border-radius:50%;background:radial-gradient(circle,rgba(201,162,39,.15),transparent 64%);pointer-events:none}
.hero .glow2{position:absolute;width:620px;height:620px;left:-260px;bottom:-320px;border-radius:50%;background:radial-gradient(circle,rgba(76,139,43,.17),transparent 66%);pointer-events:none}
/* Named areas rather than source order, so mobile can put the quote card
   directly under the headline instead of behind five lines of prose and six
   credential chips. On a 390px screen the card was starting ~830px down —
   below the fold — which is the wrong place for the only conversion widget
   on the page. */
.hero .in{position:relative;z-index:2;display:grid;grid-template-columns:1.06fr .94fr;
  grid-template-areas:"head sel" "body sel";column-gap:56px;row-gap:0;align-content:center}
.hero-head{grid-area:head}
.hero-body{grid-area:body}
.hero .sel{grid-area:sel;align-self:center}
.hero h1{color:#fff;margin-bottom:20px}
.hero h1 em{font-style:normal;color:var(--gold-l)}
.hero .lead{color:#B3C4D8;max-width:580px}
.chips{display:flex;flex-wrap:wrap;gap:9px;margin-top:26px}
.chip{font-size:12.5px;font-weight:680;letter-spacing:.02em;padding:7px 14px;border-radius:40px;background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.20);color:#DDE7F2}
.chip.g{background:rgba(76,139,43,.22);border-color:rgba(111,168,63,.5);color:#CFE6BC}

/* selector */
.sel{background:#fff;border-radius:18px;padding:32px 32px 28px;box-shadow:var(--sh-lg)}
.sel h3{font-size:21px;margin-bottom:4px}
.sel .sub{font-size:14.5px;color:var(--mute);margin-bottom:18px}
.sel label{display:block;font-size:12px;letter-spacing:.12em;text-transform:uppercase;font-weight:800;color:var(--green-d);margin:16px 0 7px}
.sel select{width:100%;padding:14px 15px;border:1.6px solid var(--line-d);border-radius:9px;font-size:16px;font-family:inherit;color:var(--ink);background:#fff;appearance:none;font-weight:560;
 background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B1F3A' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
 background-repeat:no-repeat;background-position:right 13px center;background-size:19px}
.sel select:focus{outline:0;border-color:var(--green);box-shadow:0 0 0 3px rgba(76,139,43,.14)}
.sel .btn{width:100%;margin-top:22px}
.sel .fine{font-size:12.5px;color:var(--mute);text-align:center;margin:12px 0 0}

/* ── stat bar ───────────────────────────────────────── */
.stats{background:var(--navy-d);border-top:1px solid rgba(255,255,255,.09)}
.stats .in{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;padding:34px 0}
.stat{text-align:center;padding:0 8px;border-right:1px solid rgba(255,255,255,.11)}
.stat:last-child{border-right:0}
.stat b{display:block;font-size:31px;font-weight:780;color:var(--gold-l);letter-spacing:-.03em;line-height:1.1}
.stat span{font-size:12.5px;letter-spacing:.07em;text-transform:uppercase;color:#93A7BE;font-weight:640}

/* ── grids / cards ──────────────────────────────────── */
.grid{display:grid;gap:24px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}

.svc{display:block;background:var(--card);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;position:relative;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s}
.svc:hover{border-color:var(--line-d);box-shadow:var(--sh);transform:translateY(-4px)}
.svc:after{content:"";position:absolute;inset:0;border-radius:var(--r);pointer-events:none;opacity:0;transition:opacity .3s;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6),inset 0 0 0 1px rgba(201,162,39,.35)}
.svc:hover:after{opacity:1}
.svc:hover .art svg{transform:scale(1.045)}
.svc .art svg{transition:transform .55s var(--ease)}
.svc:hover .more{color:var(--green)}
.svc .more:after{content:"";display:inline-block;width:0;transition:width .25s var(--ease)}
.svc:hover .more:after{width:5px}
.svc .art{height:150px;background:linear-gradient(150deg,var(--navy) 0%,var(--navy-x) 100%);position:relative;overflow:hidden}
.svc .art svg{position:absolute;inset:0;width:100%;height:100%}
/* Photographic card art. Jeremy: "you basically used almost none of the photos
   I've sent you... the site looks pretty juvenile." He is right — the cards were
   flat vector illustrations of a house and a bar chart, which is what a template
   looks like. Where a real photograph of the actual subject exists it is used;
   the navy wash keeps a photo card and a vector card reading as one set, and
   keeps the white scope tag legible over any image. */
.svc .art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform .55s var(--ease)}
.svc:hover .art img{transform:scale(1.05)}
.svc .art.ph:after{content:"";position:absolute;inset:0;
  background:linear-gradient(155deg,rgba(0,23,46,.62),rgba(0,23,46,.28) 55%,rgba(0,23,46,.5))}
/* The card body is a flex column and the meta row is pushed to the bottom, so
   the "From $X" / "Explore" line sits on the same baseline across a row even
   when one title wraps to two lines and its neighbours do not. Without this the
   footers stagger, which is small but reads as sloppy on every grid. */
.svc{display:flex;flex-direction:column}
.svc .bd{padding:24px 26px 28px;display:flex;flex-direction:column;flex:1 1 auto}
.svc .bd p{margin-bottom:16px}
.svc .meta{margin-top:auto}
/* Full-width service card: art beside the copy rather than above it, so a
   single item spanning the row reads as a designed feature instead of a
   leftover. Collapses back to the stacked card on narrow screens. */
.svc-wide{grid-column:1/-1;display:grid;grid-template-columns:minmax(240px,.42fr) 1fr;align-items:stretch}
.svc-wide .art{height:100%;min-height:190px}
.svc-wide .bd{padding:30px 34px;display:flex;flex-direction:column;justify-content:center}
.svc-wide .bd h3{font-size:24px;margin-bottom:8px}
.svc-wide .bd p{max-width:62ch}
/* keep the footer row aligned with the copy above it rather than stretching
   the full card width, which flung "CV on request" and "Explore" apart */
.svc-wide .meta{max-width:62ch}
/* Representative assignments: a quiet list of capability, not six more picture
   tiles. Deliberately lighter than .svc so the services grid stays dominant. */
.acard{display:grid;grid-template-columns:44px 1fr;gap:16px;align-items:start;
  background:var(--card);border:1px solid var(--line);border-radius:12px;padding:22px 22px;
  transition:border-color .18s,box-shadow .18s}
.acard:hover{border-color:var(--line-d);box-shadow:var(--sh-sm,0 6px 18px -12px rgba(11,31,58,.30))}
.acard-i{width:44px;height:44px;border-radius:11px;background:#F1F8EC;display:grid;place-items:center}
.acard-i svg{width:22px;height:22px;stroke:var(--green-d);fill:none;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}
.acard h3{font-size:17.5px;margin:2px 0 6px;letter-spacing:-.005em}
.acard p{margin:0;font-size:15px;color:var(--mute);line-height:1.6}
.svc-wide .eyebrow{margin-bottom:6px}
@media(max-width:820px){
  .svc-wide{grid-template-columns:1fr}
  .svc-wide .art{min-height:150px;height:150px}
  .svc-wide .bd{padding:24px 26px 28px}
  .svc-wide .bd h3{font-size:21px}
}
.svc h3{margin-bottom:8px;color:var(--navy-t)}
.svc p{font-size:15.5px;margin-bottom:14px;color:var(--body)}
.svc .meta{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.svc .from{font-size:13.5px;color:var(--mute);font-weight:680}
.svc .more{font-size:14.5px;font-weight:740;color:var(--green-d)}
.scope-tag{position:absolute;top:12px;left:12px;z-index:2;font-size:11px;letter-spacing:.08em;text-transform:uppercase;font-weight:800;padding:5px 11px;border-radius:30px;background:rgba(255,255,255,.94);color:var(--navy)}
.scope-tag.w{background:var(--green-ui);color:#fff}

/* scope banner */
.scope{display:flex;gap:16px;align-items:flex-start;background:var(--bg2);border:1px solid var(--line);border-left:4px solid var(--green);border-radius:0 12px 12px 0;padding:20px 24px;margin:26px 0}
.scope .ic{flex:0 0 auto;width:34px;height:34px;border-radius:8px;background:var(--green-ui);display:grid;place-items:center;margin-top:2px}
.scope .ic svg{width:19px;height:19px;stroke:#fff;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.scope b{display:block;font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--green-d);margin-bottom:5px}
.scope p{margin:0;font-size:16px}
.scope.az{border-left-color:var(--gold)}
.scope.az .ic{background:var(--gold)}
.scope.az b{color:var(--gold-d)}

/* process */
.proc{counter-reset:s;display:grid;gap:2px}
.pstep{display:grid;grid-template-columns:64px 1fr;gap:20px;align-items:start;padding:20px 0;border-bottom:1px solid var(--line)}
.pstep:last-child{border-bottom:0}
.pstep .n{width:46px;height:46px;border-radius:50%;background:var(--bg3);color:var(--navy-t);font-weight:790;font-size:17px;display:grid;place-items:center;border:1.5px solid var(--line-d)}
.pstep h3{font-size:18.5px;margin-bottom:3px}
.pstep p{margin:0;font-size:16px;color:var(--body)}

/* lists */
.ticks{list-style:none;padding:0;margin:0}
.ticks li{position:relative;padding-left:31px;margin:11px 0;font-size:16.5px}
.ticks li:before{content:"";position:absolute;left:1px;top:9px;width:15px;height:8px;border-left:2.6px solid var(--green);border-bottom:2.6px solid var(--green);transform:rotate(-45deg)}
.sec.navy .ticks li{color:#CBD8E7}
.pills{display:flex;flex-wrap:wrap;gap:9px;margin:16px 0 0;padding:0;list-style:none}
.pills li a,.pills li span{display:block;font-size:14.5px;padding:9px 17px;border-radius:40px;background:var(--bg3);color:var(--navy-t);font-weight:640}
.pills li a:hover{background:var(--navy);color:#fff}

/* price table */
.ptab td,.ptab th,.stat b,.amt,.est-num,.prog{font-variant-numeric:tabular-nums lining-nums}
/* A two-column money table cannot compress below its content. Wrap it so it
   scrolls inside its own box instead of pushing the whole page sideways. */
.ptabwrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:18px 0;
  border:1px solid var(--line);border-radius:12px;background:#fff}
.ptabwrap .ptab{margin:0;border:0;border-radius:0;min-width:270px}
.ptab{width:100%;border-collapse:collapse;margin:18px 0;font-size:16px;background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden}
.ptab th{background:var(--navy);color:#fff;text-align:left;padding:13px 18px;font-size:13px;letter-spacing:.09em;text-transform:uppercase;font-weight:720}
.ptab td{padding:13px 18px;border-top:1px solid var(--line)}
.ptab td:last-child{text-align:right;font-weight:720;color:var(--navy-t);white-space:nowrap}
.ptab tr:nth-child(even) td{background:#FAFCFE}

.pcard{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:28px 24px;text-align:center;transition:.18s}
.pcard:hover{border-color:var(--line-d);box-shadow:var(--sh)}
.pcard .amt{font-size:33px;font-weight:790;color:var(--navy-t);letter-spacing:-.035em;line-height:1.15}
.pcard .amt small{display:block;font-size:13.5px;font-weight:640;color:var(--mute);letter-spacing:0;margin-top:5px}
.pcard h3{font-size:17.5px;margin-bottom:12px}

/* faq */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;list-style:none;padding:23px 46px 23px 0;font-weight:720;font-size:18px;color:var(--navy-t);position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--green-d)}
.faq summary:after{content:"+";position:absolute;right:8px;top:19px;font-size:27px;font-weight:300;color:var(--gold-d);transition:.22s}
.faq details[open] summary:after{transform:rotate(45deg)}
.faq .a{padding:0 46px 25px 0;font-size:16.5px}
.faq .a p:last-child{margin-bottom:0}

/* band */
.band{background:linear-gradient(125deg,var(--navy-d),var(--navy) 68%);color:#fff;border-radius:18px;padding:54px 48px;display:flex;align-items:center;gap:40px;flex-wrap:wrap;position:relative;overflow:hidden}
.band:after{content:"";position:absolute;right:-130px;bottom:-180px;width:470px;height:470px;border-radius:50%;background:radial-gradient(circle,rgba(76,139,43,.3),transparent 65%)}
.band .t{flex:1 1 430px;position:relative;z-index:2}
.band h2{color:#fff;margin-bottom:8px;font-size:clamp(24px,3vw,33px)}
.band p{color:#B3C4D8;margin:0;font-size:17px}
.band .acts{display:flex;gap:13px;flex-wrap:wrap;position:relative;z-index:2}

/* page hero */
.phero{background:linear-gradient(148deg,var(--navy-d),var(--navy) 76%);color:#B3C4D8;padding:52px 0 64px;position:relative;overflow:hidden}
.phero:after{content:"";position:absolute;inset:auto 0 0 0;height:4px;background:linear-gradient(90deg,var(--gold-d),var(--gold-l) 48%,var(--green))}
.phero .bgart{position:absolute;right:-40px;top:0;bottom:0;width:44%;opacity:.5;pointer-events:none}
.phero .bgart svg{width:100%;height:100%}
/* Photographic hero. The photo occupies the right ~58% and is dissolved into
   the navy by a horizontal gradient rather than sitting in a hard-edged box —
   a rectangle of stock photography next to text reads as a slideshow, a
   dissolve reads as one composition. The gradient is opaque at the left edge
   so headline contrast never depends on what happens to be in the image. */
.phero .shotbg{position:absolute;inset:0 0 0 auto;width:64%;pointer-events:none;overflow:hidden}
.phero .shotbg img{width:100%;height:100%;object-fit:cover;display:block;
  filter:saturate(.82) contrast(1.04)}
.phero .shotbg:after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,var(--navy-d) 0%,rgba(6,18,35,.94) 22%,rgba(6,18,35,.55) 58%,rgba(6,18,35,.34) 100%)}
@media(max-width:900px){
  /* On a phone the text occupies the full width, so the photo becomes a wash
     behind it rather than a panel beside it. */
  .phero .shotbg{width:100%;opacity:.42}
  .phero .shotbg:after{background:linear-gradient(180deg,rgba(6,18,35,.86),rgba(6,18,35,.96))}
}
.phero .in{position:relative;z-index:2;max-width:760px}
.phero h1{color:#fff;font-size:clamp(31px,4.3vw,50px)}
.phero .lead{color:#B3C4D8}
/* strong{} pins dark ink for body copy, which turned <strong> inside a dark
   hero into navy-on-navy — the emphasised words were the least readable ones
   on the page. Anything emphasised on a dark panel goes white. */
.phero strong,.phero b,.hero strong,.hero b{color:#fff}
.crumb{font-size:13.5px;color:#7C92AC;margin-bottom:14px}
.crumb a{color:#7C92AC}
.crumb a:hover{color:var(--gold-l)}
.phero .acts{display:flex;gap:13px;flex-wrap:wrap;margin-top:26px}
/* On a 320–380px phone two side-by-side buttons overflowed by a few pixels
   because nothing was allowed to shrink. Let them, and let a long label wrap. */
@media(max-width:420px){
  .band .acts,.phero .acts{gap:10px}
  .band .acts .btn,.phero .acts .btn{flex:1 1 100%;justify-content:center;white-space:normal}
}

/* about */
.abt{display:grid;grid-template-columns:330px 1fr;gap:48px;align-items:start}
.shot{border-radius:16px;overflow:hidden;box-shadow:var(--sh);border:1px solid var(--line)}
/* height:auto is load-bearing. The <img> carries width/height attributes for
   layout stability; without height:auto the height attribute survives as a
   presentational hint, CSS width:100% overrides only the width, and the photo
   renders at the wrong aspect ratio. */
.shot img{display:block;width:100%;height:auto}
.shotcap{padding:16px 18px;background:var(--navy);color:#fff}
.shotcap b{display:block;font-size:18px;font-weight:740}
.shotcap span{font-size:13px;color:var(--gold-l);letter-spacing:.07em;text-transform:uppercase;font-weight:660}

/* form */
.fwrap{max-width:780px;margin:0 auto}
.fcard{background:#fff;border:1px solid var(--line);border-radius:16px;padding:38px 40px;box-shadow:var(--sh)}
.prog{display:flex;gap:8px;margin-bottom:30px}
.prog i{flex:1;height:5px;border-radius:3px;background:var(--bg3);transition:.3s}
.prog i.on{background:var(--green)}
fieldset{border:0;padding:0;margin:0}
legend{font-size:23px;font-weight:770;color:var(--ink);margin-bottom:6px;letter-spacing:-.022em}
.fhint{font-size:15.5px;color:var(--mute);margin-bottom:22px}
.field{margin-bottom:18px}
.field label{display:block;font-size:14.5px;font-weight:680;color:var(--ink);margin-bottom:7px}
.field input,.field select,.field textarea{width:100%;padding:13px 15px;border:1.6px solid var(--line-d);border-radius:9px;font-size:16px;font-family:inherit;color:var(--ink);background:#fff}
.field input:focus,.field select:focus,.field textarea:focus{outline:0;border-color:var(--green);box-shadow:0 0 0 3px rgba(76,139,43,.14)}
.field textarea{min-height:106px;resize:vertical}
/* Only two of the six options carry a sub-label, so left to themselves the
   tiles came out at two different heights and the grid looked ragged on the
   one page where confidence matters most. Stretch them and centre the text. */
.opts{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;align-items:stretch;grid-auto-rows:1fr}
.opt{display:flex}
.opt input{position:absolute;opacity:0;pointer-events:none}
.opt span{display:flex;flex-direction:column;justify-content:center;width:100%;padding:15px 17px;border:1.6px solid var(--line-d);border-radius:10px;font-size:15.5px;font-weight:650;color:var(--ink);cursor:pointer;transition:.15s;background:#fff}
.opt input:checked+span{border-color:var(--green);background:#F1F8EC;color:var(--green-d);box-shadow:0 0 0 2px rgba(76,139,43,.18)}
.opt span:hover{border-color:var(--navy-x)}
/* machinery & equipment sits under personal property in the discipline tree.
   It keeps its own tappable option, but is visibly a child rather than a peer. */
.opt-child span{border-left-width:4px;border-left-color:var(--green-l,#B9DCA4)}
.optsub{display:block;font-style:normal;font-size:12.5px;font-weight:600;color:var(--mute);
        letter-spacing:.01em;margin-top:3px}
.opt input:checked+span .optsub{color:var(--green-d)}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.facts{display:flex;gap:12px;margin-top:28px;flex-wrap:wrap;align-items:center}
.lnk{background:0;border:0;font:inherit;font-weight:720;color:var(--mute);cursor:pointer;padding:13px 4px}
.lnk:hover{color:var(--navy-t)}
.hide{display:none}
/* form-level error, shown beside the button that refused to submit */
.ferr{margin:0 0 14px;padding:12px 15px;border-radius:9px;background:#FDF2F2;
  border:1px solid #E9C4C4;border-left:4px solid #B4372F;color:#8E2B24;
  font-size:15px;font-weight:600;line-height:1.5}
.field input.bad,.field select.bad,.field textarea.bad{border-color:#B4372F;
  box-shadow:0 0 0 2px rgba(180,55,47,.14)}
.note{background:var(--bg2);border-left:3px solid var(--gold);padding:15px 20px;border-radius:0 9px 9px 0;font-size:15.5px;margin:20px 0}
.note p:last-child{margin-bottom:0}
.todo{color:#8A5F00;font-weight:750;background:#FFF6DC;padding:1px 7px;border-radius:4px;font-size:.92em}

/* capability statement */
.cap{background:#fff;border:1px solid var(--line);border-left:5px solid var(--gold);border-radius:0 14px 14px 0;padding:34px 38px;margin:26px 0;box-shadow:var(--sh)}
.cap h3{font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-d);font-weight:800;margin-bottom:12px}
.cap p:last-child{margin-bottom:0}
.pull{border-left:4px solid var(--green);padding:6px 0 6px 24px;margin:30px 0;font-size:21px;line-height:1.5;color:var(--ink);font-weight:600;letter-spacing:-.01em}
.aud{display:block;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:26px 26px 28px;transition:.18s}
.aud:hover{border-color:var(--line-d);box-shadow:var(--sh);transform:translateY(-3px)}
.aud .ic{width:46px;height:46px;border-radius:11px;background:var(--navy);display:grid;place-items:center;margin-bottom:16px}
.aud .ic svg{width:23px;height:23px;stroke:var(--gold-l);fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.aud h3{font-size:19px;margin-bottom:6px;color:var(--navy-t)}
.aud p{font-size:15.5px;margin-bottom:10px}
.aud .more{font-size:14.5px;font-weight:740;color:var(--green-d)}
.subdisc{display:grid;grid-template-columns:1fr auto;gap:26px;align-items:center;background:linear-gradient(120deg,var(--navy-d),var(--navy) 72%);color:#C6D3E3;border-radius:16px;padding:34px 36px;margin:30px 0}
.subdisc h3{color:#fff;margin-bottom:6px}
.subdisc p{margin:0;color:#B3C4D8;font-size:16.5px}
/* Two columns cannot hold a 166px button next to a paragraph on a 360px phone.
   Stack, and let the button fill the width rather than hang off the page. */
@media(max-width:560px){
  .subdisc{grid-template-columns:1fr;gap:20px;padding:26px 22px}
  .subdisc .btn{width:100%;justify-content:center}
}
/* Belt and braces: no button, anywhere, may be wider than what contains it.
   This is the class of defect that produced a horizontal scrollbar on a phone. */
.btn{max-width:100%}
@media(max-width:420px){.btn.lg{white-space:normal;text-align:center}}

/* footer */
footer.ft{background:var(--navy-d);color:#8DA2BA;padding:66px 0 30px;font-size:15px}
footer.ft h4{color:#fff;font-size:12.5px;letter-spacing:.14em;margin-bottom:15px}
footer.ft a{color:#B3C4D8;display:block;padding:4px 0;font-size:14.5px}
footer.ft a:hover{color:var(--gold-l)}
.fgrid{display:grid;grid-template-columns:1.5fr .9fr .9fr .9fr .9fr;gap:32px;padding-bottom:38px}
.fgrid{display:grid;grid-template-columns:1.42fr .82fr .82fr .82fr .82fr .82fr;gap:28px;padding-bottom:38px}
.fbot{border-top:1px solid rgba(255,255,255,.11);padding-top:24px;display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;font-size:13.5px;color:#6B819C}
.flogo img{height:54px;margin-bottom:16px}

/* ── machinery & equipment band ───────────────────────────────
   Machinery is a sub-discipline of personal property with its own $295
   floor, its own six categories and its own 7–14 day turnaround — and it
   was reachable only by scrolling past eight tiles of jewellery and coins,
   or by spotting a small link in the footer. A tractor owner arriving on
   the personal property page would reasonably conclude the firm does not
   appraise tractors. This band exists so that cannot happen: full width,
   photographic, and impossible to scroll past. */
.meband{position:relative;overflow:hidden;border-radius:16px;margin:26px 0 0;
  background:linear-gradient(140deg,var(--navy-d),var(--navy) 72%);
  box-shadow:0 20px 44px -26px rgba(11,31,58,.55)}
.meband .shot{position:absolute;inset:0 0 0 auto;width:52%;pointer-events:none}
.meband .shot img{width:100%;height:100%;object-fit:cover;display:block}
.meband .shot:after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,var(--navy-d) 4%,rgba(0,23,46,.86) 42%,rgba(0,23,46,.34) 100%)}
.meband .in{position:relative;z-index:2;padding:30px 32px 32px;max-width:660px}
.meband .kick{font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;
  font-weight:800;color:var(--gold-l);margin-bottom:10px}
.meband h3{color:#fff;font-size:clamp(23px,2.6vw,31px);margin:0 0 10px;letter-spacing:-.015em}
.meband p{color:#B3C4D8;font-size:16.5px;line-height:1.55;margin:0 0 16px;max-width:560px}
.meband .mefacts{display:flex;flex-wrap:wrap;gap:7px 24px;margin:0 0 18px}
.meband .mefacts span{font-size:14px;color:#8FA3BC}
.meband .mefacts b{color:#fff;font-weight:740}
.meband .mecats{display:flex;flex-wrap:wrap;gap:7px;margin:0 0 20px}
.meband .mecats a{font-size:13.5px;font-weight:650;color:#DCE6F2;
  background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.17);
  padding:6px 12px;border-radius:999px;transition:.15s}
.meband .mecats a:hover{background:rgba(255,255,255,.18);color:#fff;border-color:rgba(255,255,255,.34)}
.meband .acts{display:flex;flex-wrap:wrap;gap:11px;margin:0}
@media(max-width:900px){
  .meband .shot{width:100%;opacity:.42}
  .meband .shot:after{background:linear-gradient(180deg,rgba(0,23,46,.55),var(--navy-d) 78%)}
  .meband .in{max-width:none;padding:26px 22px 28px}
}

/* ── desktop buy bar ─────────────────────────────────────────
   The mobile .mcta has always been there; desktop had nothing, so on a
   1440px screen the only way to act was to scroll back up to the hero or
   hunt the header. People do not scroll back up — they leave. This slides
   in once the hero is gone and carries the two facts that actually decide
   the purchase (what it costs to start, how fast it comes back) next to
   the button, so the decision and the action are in the same place. */
.buybar{position:fixed;left:0;right:0;bottom:0;z-index:94;display:none;
  background:rgba(255,255,255,.97);backdrop-filter:blur(12px);
  border-top:1px solid var(--line);box-shadow:0 -8px 30px -14px rgba(11,31,58,.28);
  transform:translateY(102%);transition:transform .34s var(--ease)}
.buybar.up{transform:none}
.buybar .in{max-width:1240px;margin:0 auto;padding:11px 24px;
  display:flex;align-items:center;gap:24px;white-space:nowrap}
.buybar .bb-t{font:750 15.5px/1 var(--sans);color:var(--ink);letter-spacing:-.01em}
.buybar .bb-f{display:flex;gap:24px;margin-left:auto;align-items:center}
.buybar .bb-f>div{line-height:1.15}
.buybar .bb-f i{font-style:normal;display:block;font-size:10px;letter-spacing:1.2px;
  font-weight:700;color:var(--mute);text-transform:uppercase;margin-bottom:2px}
.buybar .bb-f b{font-size:15px;color:var(--ink);font-weight:740;letter-spacing:-.01em}
.buybar .btn{padding:11px 22px;font-size:15px}
.buybar .bb-call{font-size:13.5px;color:var(--mute)}
.buybar .bb-call a{color:var(--ink);font-weight:700}
.buybar .qnow{font-size:13.5px}
@media(min-width:861px){.buybar{display:block} body:has(.buybar){padding-bottom:0}}
@media(max-width:1260px){.buybar .bb-call{display:none}}
@media(max-width:1140px){.buybar .qnow{display:none}}
@media(max-width:980px){.buybar .bb-t{display:none} .buybar .bb-f{gap:18px}}

/* Live, and honest about it: computed from the visitor's clock against
   Arizona business hours. "Same day" printed at 11pm is a promise the
   business has to keep at 11pm. This says what is actually true now. */
.qnow{display:inline-flex;align-items:center;gap:8px;font-size:14px;color:var(--mute)}
.qnow em{font-style:normal}
.qnow s{width:8px;height:8px;border-radius:50%;background:#3E9B4F;text-decoration:none;
  box-shadow:0 0 0 0 rgba(62,155,79,.55);animation:qpulse 2.4s infinite}
.qnow.off s{background:#B9902C;animation:none}
@keyframes qpulse{0%{box-shadow:0 0 0 0 rgba(62,155,79,.5)}
  70%{box-shadow:0 0 0 7px rgba(62,155,79,0)}100%{box-shadow:0 0 0 0 rgba(62,155,79,0)}}
@media(prefers-reduced-motion:reduce){.qnow s{animation:none}}

.mcta{display:none;position:fixed;left:0;right:0;bottom:0;z-index:95;padding:11px 16px;background:rgba(255,255,255,.98);border-top:1px solid var(--line);backdrop-filter:blur(10px)}
.mcta .btn{width:100%}

/* ── header width ladder ─────────────────────────────────────
   Adding Commercial, Energy and Services took the nav from seven items to
   ten, which pushed the row past the viewport at 1366 and 1440 — the two
   most common laptop widths — and left the search control hanging off the
   right edge with a horizontal scrollbar on every page. The ladder below is
   measured, not guessed: _smoke.py asserts zero horizontal overflow at
   every width from 320 to 1920, so a future nav item cannot quietly
   reintroduce this. Each step drops the least load-bearing links first;
   all of them remain in the footer, the burger menu and the search palette. */
@media(max-width:1520px){
  .nav{gap:16px}
  .nav a{font-size:14.5px}
  .logo img{height:42px}
  .nav a.opt-lnk{display:none}     /* Capability — also in the footer */
}
@media(max-width:1340px){
  .nav{gap:13px}
  .nav a{font-size:14px}
  .logo img{height:40px}
  .nav a.opt2-lnk{display:none}    /* Tools, Knowledge — also in the footer */
}
@media(max-width:1040px){
  .hero .in{grid-template-columns:1fr;grid-template-areas:"head" "sel" "body";row-gap:32px}
  .g4{grid-template-columns:repeat(2,1fr)}
  .g3{grid-template-columns:repeat(2,1fr)}
  .abt{grid-template-columns:1fr;gap:30px}
  .shot{max-width:330px}
  .stats .in{grid-template-columns:repeat(3,1fr);gap:22px 8px}
  .stat:nth-child(3){border-right:0}
  .fgrid{grid-template-columns:1fr 1fr 1fr}
  .phero .bgart{opacity:.22}
}
@media(max-width:760px){
  body{font-size:16.5px}
  body:has(.mcta){padding-bottom:68px}
  .nav{display:none}
  .nav.open{display:flex;position:absolute;top:80px;left:0;right:0;background:#fff;flex-direction:column;padding:16px 26px 24px;gap:2px;border-bottom:1px solid var(--line);box-shadow:0 20px 34px -20px rgba(11,31,58,.35)}
  .nav.open a{padding:12px 0;width:100%}
  .nav.open .btn{margin-top:10px}
  .burger{display:block}
  .sec{padding:56px 0}
  .g2,.g3,.g4{grid-template-columns:1fr}
  .opts,.frow{grid-template-columns:1fr}
  .band{padding:36px 26px}
  .fcard{padding:26px 22px}
  .fgrid{grid-template-columns:1fr;gap:26px}
  .stats .in{grid-template-columns:repeat(2,1fr)}
  .stat{border-right:0}
  .pstep{grid-template-columns:48px 1fr;gap:14px}
  .mcta{display:block}
  .phero .bgart{display:none}
}
/* ══════════════════════════════════════════════════════════════════
   COMMAND PALETTE / SITE SEARCH
   ══════════════════════════════════════════════════════════════════ */
.searchbtn{display:flex;align-items:center;gap:8px;background:var(--bg2);border:1px solid var(--line);
  border-radius:40px;padding:8px 10px 8px 13px;cursor:pointer;color:var(--mute);font:inherit;font-size:14px;
  font-weight:620;transition:.18s var(--ease);white-space:nowrap}
.searchbtn:hover{border-color:var(--line-d);background:var(--bg3);color:var(--navy-t)}
.searchbtn svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;flex:0 0 auto}
.searchbtn kbd{font-family:var(--mono);font-size:11px;background:var(--bg);border:1px solid var(--line-d);
  border-bottom-width:2px;border-radius:5px;padding:1px 6px;color:var(--mute);line-height:1.5}
kbd{font-family:var(--mono);font-size:11px;background:var(--bg2);border:1px solid var(--line-d);
  border-bottom-width:2px;border-radius:5px;padding:1px 6px;color:var(--mute)}

.pal{position:fixed;inset:0;z-index:140;display:flex;justify-content:center;align-items:flex-start;padding:9vh 18px 18px}
.pal[hidden]{display:none}
.pal-bd{position:absolute;inset:0;background:rgba(6,18,35,.55);backdrop-filter:blur(4px);animation:palfade .18s var(--ease)}
.pal-in{position:relative;width:100%;max-width:660px;background:var(--card);border:1px solid var(--line-d);
  border-radius:16px;box-shadow:0 40px 90px -26px rgba(4,14,30,.62);overflow:hidden;
  animation:palpop .2s var(--ease);display:flex;flex-direction:column;max-height:78vh}
@keyframes palfade{from{opacity:0}to{opacity:1}}
@keyframes palpop{from{opacity:0;transform:translateY(-14px) scale(.985)}to{opacity:1;transform:none}}
.pal-top{display:flex;align-items:center;gap:11px;padding:15px 16px;border-bottom:1px solid var(--line);flex:0 0 auto}
.pal-top svg{width:19px;height:19px;stroke:var(--mute);fill:none;stroke-width:2.2;stroke-linecap:round;flex:0 0 auto}
.pal-top input{flex:1;border:0;outline:0;font:inherit;font-size:17px;color:var(--ink);background:transparent;min-width:0}
.pal-top input::placeholder{color:var(--mute);opacity:.85}
.pal-top input::-webkit-search-cancel-button{display:none}
.pal-x{background:var(--bg2);border:1px solid var(--line-d);border-radius:6px;font:inherit;font-size:11.5px;
  font-weight:700;color:var(--mute);padding:4px 9px;cursor:pointer;flex:0 0 auto}
.pal-x:hover{color:var(--navy-t);border-color:var(--navy-t)}
.pal-res{list-style:none;margin:0;padding:7px;overflow-y:auto;flex:1 1 auto;overscroll-behavior:contain}
.pal-hd{font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:800;color:var(--mute);padding:9px 11px 6px}
.pal-msg{padding:26px 14px;text-align:center;color:var(--mute);font-size:15.5px;line-height:1.7}
.pal-msg a{font-weight:700;color:var(--green-d)}
.pal-item>a{display:block;padding:11px 13px;border-radius:9px;color:var(--ink)}
.pal-item.on>a{background:var(--bg3)}
.pal-item.on>a b{color:var(--navy-t)}
.pal-k{display:inline-block;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;font-weight:800;
  color:var(--green-d);background:rgba(76,139,43,.10);border-radius:20px;padding:2px 9px;margin-bottom:5px}
.pal-item b{display:block;font-size:16px;font-weight:680;color:var(--ink);line-height:1.35;font-family:var(--serif)}
.pal-d{display:block;font-size:13.5px;color:var(--mute);line-height:1.5;margin-top:3px;
  overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.pal-res mark{background:rgba(201,162,39,.30);color:inherit;border-radius:3px;padding:0 1px;font-weight:750}
.pal-foot{display:flex;gap:18px;padding:10px 16px;border-top:1px solid var(--line);background:var(--bg2);
  font-size:12px;color:var(--mute);flex:0 0 auto;flex-wrap:wrap}
.pal-foot kbd{margin-right:3px}

/* ══════════════════════════════════════════════════════════════════
   FEE ESTIMATOR
   ══════════════════════════════════════════════════════════════════ */
.est{display:grid;grid-template-columns:1.15fr .85fr;gap:32px;align-items:start}
.est-q{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:30px 32px 34px;box-shadow:var(--sh)}
.est-q h4{margin-bottom:12px}
.est-opts{display:flex;flex-wrap:wrap;gap:9px}
.est-c{font:inherit;font-size:14.5px;font-weight:640;padding:10px 17px;border-radius:40px;cursor:pointer;
  background:var(--bg2);border:1.5px solid var(--line-d);color:var(--ink);transition:.16s var(--ease);text-align:left}
.est-c:hover{border-color:var(--navy-x);background:var(--bg3)}
.est-c.on{background:var(--green-ui);border-color:var(--green-ui);color:#fff;box-shadow:0 6px 16px -8px rgba(53,99,32,.8)}
.est-out{position:sticky;top:104px}
.est-card{background:linear-gradient(160deg,var(--navy-d),var(--navy) 72%);color:#C6D3E3;border-radius:18px;
  padding:30px 30px 26px;box-shadow:var(--sh-lg);position:relative;overflow:hidden}
.est-card:before{content:"";position:absolute;right:-90px;top:-110px;width:300px;height:300px;border-radius:50%;
  background:radial-gradient(circle,rgba(201,162,39,.20),transparent 66%);pointer-events:none}
.est-lbl{display:block;font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;font-weight:800;color:var(--gold-l)}
.est-num{font-size:clamp(30px,3.6vw,42px);font-weight:640;color:#fff;letter-spacing:-.03em;line-height:1.14;
  margin:9px 0 10px;font-variant-numeric:lining-nums}
.est-note{font-size:14.5px;color:#A9BCD2;line-height:1.55;min-height:44px}
.est-bars{margin:18px 0 4px}
.est-bar{display:flex;align-items:center;gap:11px;font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:#8DA2BA;font-weight:700}
.est-bar i{flex:1;height:7px;border-radius:5px;background:rgba(255,255,255,.13);overflow:hidden;display:block}
.est-bar b{display:block;height:100%;width:0;border-radius:5px;background:linear-gradient(90deg,var(--gold-d),var(--gold-l));
  transition:width .8s var(--ease)}
.est-inc{list-style:none;margin:16px 0 0;padding:16px 0 0;border-top:1px solid rgba(255,255,255,.13)}
.est-inc li{position:relative;padding-left:25px;margin:8px 0;font-size:14.5px;color:#BCCBDC}
.est-inc li:before{content:"";position:absolute;left:1px;top:7px;width:12px;height:6px;
  border-left:2.4px solid var(--green-l);border-bottom:2.4px solid var(--green-l);transform:rotate(-45deg)}
.est-fine{font-size:12.5px;color:#7E93AC;margin:14px 0 0;line-height:1.55}
@media(max-width:900px){
  .est{grid-template-columns:1fr;gap:22px}
  .est-out{position:static}
  .est-q{padding:24px 22px 28px}
}


/* ══════════════════════════════════════════════════════════════════
   DECISION TOOLS
   ══════════════════════════════════════════════════════════════════ */
.tool{display:grid;grid-template-columns:1.08fr .92fr;gap:34px;align-items:start}
.tool.wide{grid-template-columns:1.28fr .72fr}
.tool-in{min-width:0}
.tool-out{position:sticky;top:104px}
.tstep{margin-bottom:34px}
.tstep:last-child{margin-bottom:0}
.tstep h4{margin-bottom:14px}
.tstep h4 .u{text-decoration:underline;text-decoration-color:var(--gold);
  text-decoration-thickness:2px;text-underline-offset:3px}
.thint{font-size:15px;color:var(--mute);line-height:1.6;margin:0 0 16px}

.tcards{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.tcards.small{grid-template-columns:1fr}
.tcard{display:block;text-align:left;font:inherit;cursor:pointer;color:var(--ink);
  background:var(--card);
  border:1.6px solid var(--line-d);border-radius:12px;padding:14px 16px;
  transition:border-color .16s var(--ease),background .16s,box-shadow .16s,transform .16s}
.tcard:hover{border-color:var(--navy-x);transform:translateY(-1px)}
.tcard b{display:block;font-size:15.5px;font-weight:700;color:var(--ink);line-height:1.32}
.tcard span{display:block;font-size:13.5px;color:var(--mute);line-height:1.5;margin-top:4px}
.tcard.on{border-color:var(--green-ui);background:#F1F8EC;
  box-shadow:0 0 0 2px rgba(76,139,43,.2),0 8px 18px -10px rgba(53,99,32,.5)}
.tcard.on b{color:var(--green-d)}

.tmoney{display:flex;align-items:center;gap:2px;background:var(--card);
  border:1.6px solid var(--line-d);border-radius:11px;padding:0 16px;max-width:320px}
.tmoney>span{font-size:20px;font-weight:700;color:var(--mute);font-variant-numeric:lining-nums}
.tmoney input{flex:1;min-width:0;border:0;outline:0;background:transparent;font:inherit;
  font-size:22px;font-weight:700;color:var(--ink);padding:13px 8px;font-family:var(--serif);
  font-variant-numeric:tabular-nums lining-nums}
.tmoney:focus-within{border-color:var(--green-ui);box-shadow:0 0 0 3px rgba(76,139,43,.14)}
.tmoney.big input{font-size:27px}
.tmoney.pct{max-width:130px}
.tmoney.pct input{text-align:right}
.tquick{display:flex;gap:7px;flex-wrap:wrap;margin-top:12px}
.tq{font:inherit;font-size:13px;font-weight:650;padding:6px 13px;border-radius:30px;
  cursor:pointer;background:var(--bg2);border:1px solid var(--line-d);color:var(--mute)}
.tq:hover{border-color:var(--navy-x);color:var(--ink)}
.tdate{font:inherit;font-size:17px;font-weight:650;color:var(--ink);background:var(--card);
  border:1.6px solid var(--line-d);border-radius:11px;padding:12px 15px;max-width:260px;width:100%}
.tdate:focus{outline:0;border-color:var(--green-ui);box-shadow:0 0 0 3px rgba(76,139,43,.14)}

/* result panel */
.tres{background:linear-gradient(162deg,var(--navy-d),var(--navy) 74%);color:#C6D3E3;
  border-radius:18px;padding:28px 28px 24px;box-shadow:var(--sh-lg);position:relative;overflow:hidden}
.tres:before{content:"";position:absolute;right:-100px;top:-120px;width:320px;height:320px;
  border-radius:50%;background:radial-gradient(circle,rgba(201,162,39,.18),transparent 66%);
  pointer-events:none}
.tres-hd{position:relative;z-index:1}
.tres h3{color:#fff;font-size:23px;margin:8px 0 6px;line-height:1.22}
.tres-hd p{font-size:14.5px;color:#A9BCD2;margin:0;line-height:1.55}
/* the global `strong` rule paints --ink, which is near-black — unreadable on
   the dark result card. Every emphasis inside .tres has to be re-lit. */
.tres strong,.tres b,.tres .caveat strong,.tres em{color:#fff}
.tres .est-fine strong{color:#DDE7F2}
.needs .tres h3{color:#F2DE9C}
.tres-ft{display:flex;gap:9px;flex-wrap:wrap;margin-top:20px;position:relative;z-index:1;
  padding-top:18px;border-top:1px solid rgba(255,255,255,.13)}
.tres-ft .btn{font-size:14px;padding:10px 17px}
.tres-ft .btn.out{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.24);
  color:#DDE7F2!important}
.tres-ft .btn.out:hover{background:rgba(255,255,255,.14);border-color:#fff;color:#fff!important}

.treq{list-style:none;margin:20px 0 0;padding:0;position:relative;z-index:1}
.treq li{display:flex;gap:12px;align-items:flex-start;padding:13px 0;
  border-top:1px solid rgba(255,255,255,.11)}
.treq li>i{flex:0 0 auto;width:22px;height:22px;border-radius:50%;display:grid;
  place-items:center;font-size:11.5px;font-weight:800;font-style:normal;margin-top:2px}
.treq li.yes>i{background:rgba(140,200,95,.18);color:#9FD37A;
  box-shadow:inset 0 0 0 1.4px rgba(140,200,95,.5)}
.treq li.no>i{background:rgba(255,255,255,.07);color:#8DA2BA;
  box-shadow:inset 0 0 0 1.4px rgba(255,255,255,.18)}
.treq li.ask>i{background:rgba(201,162,39,.2);color:#E8CE72;
  box-shadow:inset 0 0 0 1.4px rgba(201,162,39,.5)}
.treq b{display:block;font-size:15.5px;font-weight:700;color:#fff;line-height:1.38}
.treq li.no b{color:#B3C4D8;font-weight:640}
.treq span{display:block;font-size:13.5px;color:#A0B4CB;line-height:1.55;margin-top:3px}
.treq .cite{display:block;font-size:11.5px;font-style:normal;color:#7E93AC;margin-top:5px;
  letter-spacing:.03em;font-family:var(--mono)}

/* caveats */
.caveat{border-radius:0 12px 12px 0;padding:18px 22px;margin:20px 0;font-size:15.5px;
  line-height:1.62;background:var(--bg2);border:1px solid var(--line);border-left:4px solid var(--mute)}
.caveat b{display:block;font-size:16px;color:var(--ink);margin-bottom:7px;font-weight:750}
.caveat p{margin:0 0 .7em}
.caveat p:last-child{margin-bottom:0}
.caveat.warn{border-left-color:var(--gold);background:#FFFBEF}
.caveat.info{border-left-color:var(--navy-x);background:var(--bg2)}
.caveat.ok{border-left-color:var(--green-ui);background:#F3F9EE}
.caveat.conflict{border-left-color:#B4402A;background:#FFF4F1}
.caveat.conflict b{color:#8A2E1D}
.caveat.slim{padding:13px 17px;font-size:14.5px;margin:14px 0 0}
.caveat.slim b{font-size:14.5px;margin-bottom:4px}
.tres .caveat{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.12);
  color:#BCCBDC;margin:18px 0 0;position:relative;z-index:1}
.tres .caveat b{color:#fff}
.tres .caveat.warn{border-left-color:var(--gold);background:rgba(201,162,39,.1)}
.tres .caveat.conflict{border-left-color:#E07A5F;background:rgba(224,122,95,.12)}
.tres .caveat.conflict b{color:#FFC4B2}
.tres .caveat.info{border-left-color:#6E93B8}

.srcs{list-style:none;padding:0;margin:18px 0 0}
.srcs li{padding:11px 0;border-top:1px solid var(--line);font-size:15.5px;line-height:1.55}
.srcs a{font-weight:700;color:var(--green-d);text-decoration:underline;
  text-decoration-color:rgba(76,139,43,.3);text-underline-offset:2px}
.srcs a:hover{text-decoration-color:var(--green-ui)}
.tdisc{font-size:13.5px;color:var(--mute);line-height:1.6;margin-top:34px;
  padding-top:18px;border-top:1px solid var(--line)}
.tnote{background:var(--bg2);border-left:3px solid var(--green-ui);padding:13px 18px;
  border-radius:0 8px 8px 0;font-size:15px;margin:18px 0}
.ptab.tiers td:last-child{text-align:right;font-weight:600;font-size:12.5px;
  color:var(--mute);font-family:var(--mono);white-space:normal;max-width:150px}
.cite{font-family:var(--mono);font-size:12px;color:var(--mute);font-style:normal;letter-spacing:.02em}

/* FEMA cost lines */
.flines{display:grid;gap:2px;margin:6px 0 0}
.fline{display:grid;grid-template-columns:1fr 148px;gap:16px;align-items:center;
  padding:12px 0;border-top:1px solid var(--line)}
.fl-t{font-size:15px;font-weight:640;color:var(--ink);line-height:1.4}
.fl-t em{display:block;font-size:13px;font-weight:400;color:var(--mute);font-style:normal;
  line-height:1.5;margin-top:3px}
.fl-m{display:flex;align-items:center;gap:3px;background:var(--card);border:1.4px solid var(--line-d);
  border-radius:9px;padding:0 11px;font-size:15px;font-weight:700;color:var(--mute)}
.fl-m input{flex:1;min-width:0;border:0;outline:0;background:transparent;font:inherit;
  font-size:16px;font-weight:700;color:var(--ink);padding:9px 4px;text-align:right;
  font-variant-numeric:tabular-nums lining-nums}
.fl-m:focus-within{border-color:var(--green-ui);box-shadow:0 0 0 3px rgba(76,139,43,.13)}
.fline.opt .fl-t{color:var(--mute)}
.fdet{border:1px solid var(--line);border-radius:12px;padding:0 20px;margin-top:16px;
  background:var(--bg2)}
.fdet summary{cursor:pointer;list-style:none;padding:16px 0;font-weight:700;font-size:15.5px;
  color:var(--navy-t);position:relative;padding-right:30px}
.fdet summary::-webkit-details-marker{display:none}
.fdet summary em{font-style:normal;font-weight:400;color:var(--mute)}
.fdet summary:after{content:"+";position:absolute;right:2px;top:12px;font-size:23px;
  font-weight:300;color:var(--gold-d);transition:.22s}
.fdet[open] summary:after{transform:rotate(45deg)}
.fdet[open]{padding-bottom:20px}
.fswitch{display:flex;gap:11px;align-items:center;margin-top:18px;font-size:15px;
  font-weight:640;color:var(--ink);cursor:pointer}
.fswitch input{width:19px;height:19px;accent-color:var(--green-ui);flex:0 0 auto}
.frow{display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:end;margin-bottom:16px}
.frow label,.fbasis label{display:block;font-size:13px;letter-spacing:.1em;text-transform:uppercase;
  font-weight:800;color:var(--green-d);margin-bottom:7px}
.frow select,.fbasis select,#flook,#fbasis{width:100%;padding:12px 14px;border:1.6px solid var(--line-d);
  border-radius:10px;font-size:15.5px;font-family:inherit;font-weight:600;color:var(--ink);
  background:var(--card);appearance:none;
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B1F3A' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;background-size:18px}
.fbasis{margin-top:18px;max-width:420px}
#fpriorwrap{margin-top:14px}
#fpriorwrap label{display:block;font-size:13px;letter-spacing:.1em;text-transform:uppercase;
  font-weight:800;color:var(--green-d);margin-bottom:7px}

/* gauge */
.gauge{margin:18px 0 10px;position:relative;z-index:1}
.gauge-track{position:relative;height:13px;border-radius:8px;background:rgba(255,255,255,.12);
  overflow:visible}
.gauge-fill{height:100%;width:0;border-radius:8px;transition:width .6s var(--ease);
  background:linear-gradient(90deg,#4C8B2B,#8CC85F)}
.gauge-fill.warn{background:linear-gradient(90deg,#8F6F10,#E8CE72)}
.gauge-fill.bad{background:linear-gradient(90deg,#8A2E1D,#E07A5F)}
.gauge-mark{position:absolute;top:-6px;bottom:-6px;width:2px;background:#fff;opacity:.85}
.gauge-mark span{position:absolute;top:-24px;left:50%;transform:translateX(-50%);
  font-size:10.5px;font-weight:800;letter-spacing:.08em;color:#fff;white-space:nowrap;
  background:rgba(4,14,30,.9);padding:2px 7px;border-radius:5px;
  box-shadow:0 0 0 1px rgba(255,255,255,.2)}
.gauge-card .est-num{margin:4px 0 12px}
.fverdict{font-size:14.5px;line-height:1.6;color:#A9BCD2;position:relative;z-index:1;min-height:58px}
.fverdict b{color:#fff}
.fverdict.good b{color:#9FD37A}
.fverdict.warn b{color:#F2DE9C}
.fverdict.bad b{color:#FFB49F}
.fmath{margin:18px 0 0;padding:16px 0 0;border-top:1px solid rgba(255,255,255,.13);
  position:relative;z-index:1;display:grid;gap:7px}
.fmath>div{display:flex;justify-content:space-between;gap:14px;font-size:13.5px}
.fmath dt{color:#93A7BE;margin:0;line-height:1.45}
.fmath dd{margin:0;color:#fff;font-weight:700;white-space:nowrap;
  font-variant-numeric:tabular-nums lining-nums}
.fmath>div:last-child dd{color:#F2DE9C}

/* valuation dates */
.vdates{display:grid;gap:2px;margin:18px 0 0;position:relative;z-index:1}
.vd{padding:13px 0;border-top:1px solid rgba(255,255,255,.11)}
.vd-l{display:block;font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;
  font-weight:750;color:#8DA2BA}
.vd-v{display:block;font-size:20px;font-weight:640;color:#fff;font-family:var(--serif);
  margin-top:3px;line-height:1.28}
.vd .cite{display:block;color:#7E93AC;margin-top:4px}
#vbody{position:relative;z-index:1;margin-top:20px;font-size:14.5px;line-height:1.62;color:#BCCBDC}
#vbody p{margin:0 0 .85em}
#vbody a{color:#E8CE72;text-decoration:underline}
#vbody .ticks li{font-size:14px;color:#BCCBDC;margin:9px 0;padding-left:26px}
#vbody .ticks li:before{border-color:var(--green-l)}
#vbody strong,#vbody b{color:#fff}
#vbody em{color:#DDE7F2}
#vbody .tnote{background:rgba(255,255,255,.06);border-left-color:var(--green-l);
  color:#BCCBDC;font-size:14px}
.tool[data-kind="discretionary"] .tres h3,.tool[data-kind="order"] .tres h3{color:#F2DE9C}

/* checklist */
.chkgrp{margin-top:20px;position:relative;z-index:1}
.chkgrp h5{font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:800;
  color:var(--gold-l);margin:0 0 8px}
.chk{list-style:none;margin:0;padding:0}
.chk li{display:flex;gap:11px;align-items:flex-start;padding:8px 0;font-size:14.5px;
  line-height:1.5;color:#BCCBDC;border-top:1px solid rgba(255,255,255,.08)}
.chk li:first-child{border-top:0}
.chkbox{flex:0 0 auto;width:15px;height:15px;border-radius:3.5px;margin-top:3px;
  box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.28)}
.chk li.req .chkbox{box-shadow:inset 0 0 0 1.5px rgba(201,162,39,.75);
  background:rgba(201,162,39,.14)}
.chk li.req{color:#fff}
.chk li em{font-style:normal;font-size:11px;font-weight:800;letter-spacing:.08em;
  text-transform:uppercase;color:#E8CE72;white-space:nowrap}

/* tools hub cards */
.toolcard .tc-h{font-size:16.5px;font-weight:700;color:var(--navy-t);line-height:1.35;
  margin-bottom:8px;font-family:var(--serif)}
.toolcard .art{height:168px}
.toolcard .from{font-size:12.5px;font-style:italic}

@media(max-width:980px){
  .tool,.tool.wide{grid-template-columns:1fr;gap:26px}
  .tool-out{position:static}
  .tcards{grid-template-columns:1fr}
  .fline{grid-template-columns:1fr 128px;gap:12px}
  .frow{grid-template-columns:1fr}
}
@media(max-width:560px){
  .fline{grid-template-columns:1fr;gap:8px}
  .fl-m{max-width:160px}
  .tres{padding:22px 20px 20px}
}

/* the printed result is a leave-behind for a CPA or an attorney */
@media print{
  /* Scroll-reveal elements start at opacity 0 and are revealed by an
     IntersectionObserver. Printing does not scroll, so anything the reader had
     not yet reached printed as a blank slab — on the fee page that meant
     printing the fees and getting empty space. Reveal everything for print. */
  .rv{opacity:1!important;transform:none!important;transition:none!important}
  .tool,.tool.wide{display:block}
  .tool-in{display:none!important}
  .tool-out{position:static}
  .tres{background:#fff!important;color:#000;box-shadow:none;border:1pt solid #999;
    border-radius:0;padding:12pt}
  .tres:before{display:none}
  .tres h3,.treq b,.fmath dd,.vd-v,.chk li.req,.fverdict b{color:#000!important}
  .tres-hd p,.treq span,.fmath dt,.vd-l,.chk li,#vbody{color:#333!important}
  .tres-ft{display:none!important}
  .treq li,.vd,.chk li,.fmath{border-color:#bbb!important}
  .treq li>i{background:#eee!important;color:#000!important;box-shadow:inset 0 0 0 1pt #666!important}
  .chkbox{box-shadow:inset 0 0 0 1pt #333!important;background:#fff!important}
  .gauge-track{background:#ddd!important}
  .gauge-fill{background:#666!important}
  .caveat{background:#fff!important;border:1pt solid #999;border-left:3pt solid #333;
    page-break-inside:avoid}
  .fdet,.tquick,.noscript{display:none!important}
  .tres .caveat{border-color:#999!important;color:#333!important}
  .tres .caveat b{color:#000!important}
}


.icard{background:var(--card);border:1px solid var(--line);border-radius:14px;
  padding:26px 28px 28px;box-shadow:var(--sh);transition:.2s var(--ease)}
.icard:hover{box-shadow:0 4px 8px rgba(11,31,58,.05),0 18px 40px -18px rgba(11,31,58,.24);
  transform:translateY(-2px)}
.icard h3{font-size:20px;margin-bottom:10px;letter-spacing:-.01em}
.icard p{font-size:15.5px;line-height:1.62;margin-bottom:.8em}
.icard p:last-child{margin-bottom:0}
.icard .ticks li{font-size:15px;margin:9px 0}
.icard .ticks li:before{top:8px}
.icard>p:last-of-type strong{color:var(--green-d)}

.tstrip{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.tstrip-c{display:flex;flex-direction:column;background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.13);border-radius:14px;overflow:hidden;
  transition:.24s var(--ease)}
.tstrip-c:hover{background:rgba(255,255,255,.09);border-color:rgba(201,162,39,.5);
  transform:translateY(-4px);box-shadow:0 24px 44px -22px rgba(0,0,0,.7)}
.tstrip-a{height:112px;position:relative;overflow:hidden;background:var(--navy-d)}
.tstrip-a svg{position:absolute;inset:0;width:100%;height:100%;
  transition:transform .55s var(--ease)}
.tstrip-c:hover .tstrip-a svg{transform:scale(1.06)}
.tstrip-b{padding:18px 20px 20px;display:flex;flex-direction:column;flex:1}
.tstrip-b h3{font-size:18px;color:#fff!important;margin-bottom:7px;line-height:1.28}
.tstrip-b p{font-size:14.5px;color:#A9BCD2;line-height:1.5;margin-bottom:14px;flex:1}
.tstrip-b .more{font-size:14px;font-weight:740;color:var(--gold-l)}
.tstrip-c:hover .tstrip-b .more{color:#F2DE9C}
@media(max-width:1040px){.tstrip{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.tstrip{grid-template-columns:1fr}.tstrip-a{height:132px}}

/* ══════════════════════════════════════════════════════════════════
   LONG-FORM PAGES — anatomy, comparison, case studies
   ══════════════════════════════════════════════════════════════════ */
.anatlist{display:grid;gap:2px}
.anat{display:grid;grid-template-columns:64px 1fr;gap:22px;padding:24px 0;
  border-top:1px solid var(--line)}
.anat-n{font-family:var(--serif);font-size:24px;font-weight:640;color:var(--line-d);
  line-height:1;letter-spacing:-.03em;font-variant-numeric:tabular-nums lining-nums}
.anat.core .anat-n{color:var(--gold-d)}
.anat h3{font-size:20px;margin-bottom:7px}
.anat-tag{font-family:var(--sans);font-size:10.5px;font-weight:800;letter-spacing:.1em;
  text-transform:uppercase;color:var(--mute);background:var(--bg3);padding:3px 9px;
  border-radius:20px;vertical-align:middle;margin-left:6px}
.anat-w{font-size:16.5px;color:var(--body);margin-bottom:12px}
.anat-y{background:var(--bg2);border-left:3px solid var(--green-ui);padding:13px 18px;
  border-radius:0 9px 9px 0}
.anat-y b{display:block;font-size:11.5px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--green-d);font-weight:800;margin-bottom:5px}
.anat-y p{margin:0;font-size:15.5px;line-height:1.6}

.flags{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.flag{background:var(--card);border:1px solid var(--line);border-top:3px solid #B4402A;
  border-radius:0 0 12px 12px;padding:20px 22px 22px;transition:.2s var(--ease)}
.flag:hover{box-shadow:var(--sh);transform:translateY(-2px)}
.flag-h{font-family:var(--serif);font-size:17.5px;font-weight:640;color:var(--ink);
  line-height:1.34;margin-bottom:8px}
.flag p{margin:0;font-size:15px;color:var(--body);line-height:1.6}

/* comparison table */
.cmpwrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 -4px;padding:0 4px;
  position:relative;scrollbar-width:thin}
.cmpwrap:after{content:"";position:sticky;right:0;top:0;display:block;width:34px;
  pointer-events:none}
.cmphint{display:none;font-size:13.5px;color:var(--mute);text-align:center;margin:12px 0 0}
.cmphint b{color:var(--gold-d)}
@media(max-width:900px){.cmphint{display:block}}
.cmp{width:100%;min-width:820px;border-collapse:separate;border-spacing:0;
  background:var(--card);border:1px solid var(--line);border-radius:14px;overflow:hidden}
.cmp th,.cmp td{padding:14px 12px;text-align:center;border-top:1px solid var(--line);
  font-size:14.5px;vertical-align:middle}
.cmp thead th{border-top:0;background:var(--navy);color:#fff;font-size:13px;font-weight:700;
  line-height:1.34;vertical-align:bottom;padding:16px 12px}
.cmp thead th.us{background:var(--navy-d);color:#F2DE9C;position:relative}
.cmp thead th.us:after{content:"";position:absolute;inset:auto 0 0 0;height:3px;
  background:linear-gradient(90deg,var(--gold-d),var(--gold-l))}
.cmp .cmp-lbl{background:var(--navy);min-width:250px}
.cmp tbody th{text-align:left;font-weight:640;font-size:15px;color:var(--ink);
  min-width:250px;background:var(--bg2)}
.cmp td span{font-size:19px;font-weight:800;line-height:1}
.cmp-yes span{color:var(--green-d)}
.cmp-no span{color:var(--mute)}
.cmp-some span{color:var(--gold-d)}
.cmp-na span{font-size:12.5px;font-weight:650;color:var(--mute);opacity:.7;
  font-family:var(--sans);letter-spacing:.04em}
.cmp td.us{background:rgba(201,162,39,.07)}
.cmp td.us.cmp-yes span{color:var(--green-d)}
.cmp tbody tr:hover th,.cmp tbody tr:hover td{background:var(--bg3)}
.cmp tbody tr:hover td.us{background:rgba(201,162,39,.13)}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);
  white-space:nowrap;border:0;padding:0;margin:-1px}
.cmpkey{display:flex;gap:22px;flex-wrap:wrap;justify-content:center;margin-top:20px;
  font-size:14px;color:var(--mute)}
.cmpkey .k{font-weight:800;font-size:16px;margin-right:5px}
.cmpkey .k.yes{color:var(--green-d)}
.cmpkey .k.some{color:var(--gold-d)}
.cmpkey .k.no{color:var(--mute)}

.alt{background:var(--card);border:1px solid var(--line);border-radius:16px;
  padding:28px 30px 30px;margin-bottom:20px;box-shadow:var(--sh)}
.alt h3{font-size:23px;margin-bottom:18px;padding-bottom:14px;border-bottom:1px solid var(--line)}
.alt>div{margin-bottom:16px}
.alt>div:last-child{margin-bottom:0}
.alt b{display:block;font-size:11.5px;letter-spacing:.13em;text-transform:uppercase;
  font-weight:800;margin-bottom:6px}
.alt p{margin:0;font-size:16px;line-height:1.62}
.alt-g b{color:var(--green-d)}
.alt-b b{color:#A0491F}
.alt-w{background:var(--bg2);border-left:3px solid var(--gold);padding:15px 19px;
  border-radius:0 9px 9px 0}
.alt-w b{color:var(--gold-d)}

/* case studies */
/* Case studies carry their weight in the writing, not in pictures. They used to
   open with a 340px full-height navy illustration panel — six of them down the
   page, drawing on the same artwork already used twice elsewhere on the site.
   It read as decoration covering for thin content, which is the opposite of
   true here. A numbered rule and a tag do the same structural job in a
   twentieth of the space. */
.cases{display:grid;gap:26px;counter-reset:cs}
.case{background:var(--card);border:1px solid var(--line);border-radius:16px;
  box-shadow:var(--sh);overflow:hidden;border-left:4px solid var(--green)}
.case-h{display:flex;align-items:center;gap:14px;padding:18px 34px 0}
.case-n{font-family:var(--serif);font-size:26px;font-weight:700;color:var(--green);
  line-height:1;font-variant-numeric:normal}
.case-tag{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;font-weight:800;
  padding:6px 12px;border-radius:30px;background:var(--bg2);color:var(--navy-t);
  border:1px solid var(--line-d)}
.case-b{padding:14px 34px 32px;min-width:0}
/* Without the old art column the card runs the full container width, which put
   the body text at ~120 characters a line. Cap the measure; long-form reading
   is the entire point of this page. */
.case-b h3,.case-setup,.beat p,.case .more{max-width:74ch}
.case-b h3{font-size:25px;margin-bottom:12px}
.case-setup{font-size:16.5px;color:var(--body);line-height:1.62;padding-bottom:18px;
  margin-bottom:0;border-bottom:1px solid var(--line)}
.beats{display:grid;gap:0}
.beat{padding:16px 0;border-bottom:1px solid var(--line)}
.beat:last-child{border-bottom:0;padding-bottom:4px}
.beat b{display:block;font-size:11.5px;letter-spacing:.13em;text-transform:uppercase;
  font-weight:800;color:var(--green-d);margin-bottom:6px}
.beat p{margin:0;font-size:15.5px;line-height:1.64}
.case .more{display:inline-block;margin-top:14px;font-size:15px;font-weight:740;
  color:var(--green-d)}
@media(max-width:900px){
  .case-h{padding:16px 22px 0}
  .case-b{padding:12px 22px 26px}
  .flags{grid-template-columns:1fr}
  .anat{grid-template-columns:44px 1fr;gap:14px}
  .anat-n{font-size:19px}
  .alt{padding:22px 22px 24px}
}
@media print{
  .cmpwrap{overflow:visible}
  .cmp{min-width:0;border:1pt solid #999}
  .cmp thead th{background:#eee!important;color:#000!important}
  .cmp thead th.us{background:#ddd!important;color:#000!important}
  .case,.flag,.alt,.anat{page-break-inside:avoid;box-shadow:none}
  .case-art{display:none}
  .case{grid-template-columns:1fr}
}

/* ══════════════════════════════════════════════════════════════════
   DARK MODE — token remap only, so every component follows
   ══════════════════════════════════════════════════════════════════ */
@media(prefers-color-scheme:dark){
  :root{
    --ink:#EDF2F8; --body:#C3CDDA; --mute:#8B9AAC;
    --line:#1F2C3E; --line-d:#2E3F56;
    --bg:#0A121D; --bg2:#0F1926; --bg3:#16222F;
    --card:#101A27; --card2:#131E2C;
    --navy-t:#D5E2F1;   /* only the INK token flips — --navy stays brand navy
                           so hero/band/est-card gradients render dark */
    --gold-d:#D9B647; --green-d:#7FBB53; --focus:#5AA0F0;
    --sh:0 2px 4px rgba(0,0,0,.3),0 14px 32px -14px rgba(0,0,0,.7);
    --sh-lg:0 30px 70px -24px rgba(0,0,0,.85);
  }
  body{background:var(--bg)}
  a{color:#B9D2F0}
  a:hover{color:var(--green-d)}
  .hdr{background:rgba(10,18,29,.9);border-bottom-color:var(--line)}
  .searchbtn kbd{background-color:var(--bg3)}
  .acard{background-color:var(--card2);border-color:var(--line-d)}
  .acard-i{background-color:rgba(76,139,43,.18)}
  .acard-i svg{stroke:#9FD37A}
  .case-tag{background-color:var(--card2);color:var(--ink);border-color:var(--line-d)}
  .svc,.aud,.pcard,.fcard,.cap,.est-q,.ptab{background-color:var(--card)}
  .svc:after{box-shadow:inset 0 0 0 1px rgba(201,162,39,.28)}
  .ptab tr:nth-child(even) td{background-color:var(--card2)}
  /* background-color, NOT the `background` shorthand — the shorthand resets
     background-image/position/repeat/size and tiles the select chevron. */
  .field input,.field select,.field textarea,.sel select,.opt span{background-color:var(--card2);color:var(--ink);border-color:var(--line-d)}
  .sel{background-color:var(--card)}
  .sel select{background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C3CDDA' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E")}
  .opt input:checked+span{background-color:rgba(76,139,43,.20);color:#9FD37A;border-color:var(--green)}
  .btn.out{background-color:var(--card);border-color:var(--line-d)}
  .btn.out:hover{background-color:var(--card);border-color:#9FD37A}
  .note,.scope{background-color:var(--bg2)}
  .tcard,.fl-m,.tmoney,.tdate,.frow select,.fbasis select{background-color:var(--card)}
  .tcard.on{background-color:rgba(76,139,43,.18)}
  .tcard.on b{color:#9FD37A}
  .caveat.warn{background-color:#241D06}
  .caveat.ok{background-color:#0F2109}
  .caveat.conflict{background-color:#2A1109}
  .caveat.conflict b{color:#FFB49F}
  .fdet{background-color:var(--bg2)}
  .flag,.alt,.case,.cmp,.icard{background-color:var(--card)}
  .cmp tbody th{background-color:var(--bg2)}
  .cmp .cmp-lbl{background-color:#0B1F3A}
  .cmp thead th{background-color:#0B1F3A;color:#fff}
  .cmp thead th.us{background-color:#061223}
  .cmp tbody tr:hover th,.cmp tbody tr:hover td{background-color:var(--bg3)}
  .anat-y,.alt-w{background-color:var(--bg2)}
  .flag-h{color:var(--ink)}
  .alt-b b{color:#E8927A}
  .anat-tag{background-color:var(--bg3)}
  .frow select,.fbasis select,#flook,#fbasis{background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C3CDDA' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E")}
  .srcs a{color:#9FD37A}
  .todo{background-color:#3A2E08;color:#F0CE60}
  .mcta{background:rgba(10,18,29,.97);border-top-color:var(--line)}
  .buybar{background:rgba(10,18,29,.97);border-top-color:var(--line)}
  .nav.open{background-color:var(--bg)}
  ::selection{background:rgba(201,162,39,.34);color:#fff}
  img.dimmable{filter:brightness(.92)}
}

/* ── responsive overrides for the interactive layer ──────
   Declared after the components above so source order works in our favour. */
/* The search control is icon-only at every width, deliberately.
   Its wide "Search  /" form was the single most fragile thing in the header:
   with the logo, nine nav links and a call-to-action in the same flex row,
   every viewport band where it fit had to be found and patched separately, and
   two of them (1200px and 1366px — both extremely common laptop widths) shipped
   with a horizontal scrollbar on every page. An icon that is always the same
   size cannot cause that class of bug. The "/" shortcut still works and the
   palette itself advertises it. */
.searchbtn span,.searchbtn kbd{display:none}
.searchbtn{padding:9px;border-radius:50%}
/* Below this the five disciplines alone no longer fit beside the logo and
   the search control, so the whole row becomes the burger rather than
   shedding the disciplines themselves. */
@media(max-width:1180px){
  .nav{display:none}
  .nav.open{display:flex;position:absolute;top:80px;left:0;right:0;background:var(--bg);
    flex-direction:column;padding:16px 26px 24px;gap:2px;border-bottom:1px solid var(--line);
    box-shadow:0 20px 34px -20px rgba(11,31,58,.35);z-index:5;max-width:none}
  .nav.open a{padding:12px 0;width:100%;font-size:16px}
  .nav.open a.opt-lnk,.nav.open a.opt2-lnk{display:block}
  .nav.open .btn{margin-top:10px}
  .burger{display:block;margin-left:0}
  .searchbtn{margin-left:auto}
  .hdr .in{gap:12px}
}
@media(max-width:760px){
  .hdr .in{gap:12px}
  .searchbtn{margin-left:auto}
  .burger{margin-left:0}
  .pal{padding:0;align-items:stretch}
  .pal-in{max-width:none;border-radius:0;max-height:none;height:100%;border:0;box-shadow:none}
  .pal-bd{display:none}
  .pal-foot{display:none}
  .pal-top{padding:13px 14px}
  .pal-top input{font-size:16px}
  .est-num{font-size:32px}
}

/* ── honour reduced motion globally ─────────────────────── */
@media(prefers-reduced-motion:reduce){
  *,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important}
  .rv{opacity:1!important;transform:none!important}
}

@media print{
  .rpwrap,.searchbtn,.pal,.est,#estimate{display:none!important}
  .hdr,.mcta,.buybar,.band,.burger,.nav,.bgart,.phero:after,footer.ft .fgrid{display:none!important}
  body{font-size:11.5pt;line-height:1.45;color:#000;padding:0}
  .sec{padding:14pt 0}
  .phero{background:#fff!important;color:#000;padding:0 0 10pt}
  .phero h1,.phero .lead,.crumb{color:#000!important}
  .stats{background:#fff!important;border-top:1pt solid #000;border-bottom:1pt solid #000}
  .stat b{color:#000!important;font-size:16pt}
  .stat span{color:#333!important}
  .stat{border-right:1pt solid #ccc}
  .cap{box-shadow:none;border:1pt solid #999;border-left:3pt solid #000;page-break-inside:avoid;padding:12pt 14pt}
  .pull{border-left:3pt solid #000;font-size:12.5pt}
  .shot{box-shadow:none;border:1pt solid #999;max-width:150pt}
  .shot img{max-height:200pt;object-fit:cover;object-position:center 22%}
  .shotcap{padding:6pt 8pt}.shotcap b{font-size:11pt}.shotcap span{font-size:8pt;letter-spacing:.06em}
  .shotcap{background:#fff;color:#000;border-top:1pt solid #999}
  .shotcap span{color:#444!important}
  .abt{grid-template-columns:170pt 1fr;gap:20pt}
  h1{font-size:24pt}h2{font-size:14pt;margin-top:14pt}h3{font-size:12pt}
  .ticks li{page-break-inside:avoid}
  .todo{background:none;color:#000;font-weight:700}
  a{color:#000;text-decoration:none}
  a[href^="/"]:after{content:" (veridicalvaluations.com" attr(href) ")";font-size:8.5pt;color:#555}
  a[href^="tel:"]:after,a[href^="mailto:"]:after,.pills a:after,.ticks a:after{content:""}
  footer.ft{background:#fff!important;color:#000;padding:10pt 0 0;border-top:1pt solid #000}
  footer.ft .fbot{color:#000;border:0}
  .svc,.aud{page-break-inside:avoid;box-shadow:none}
  .pick{page-break-inside:avoid;box-shadow:none}
}

/* Hero facts. Visually separated from the credential chips beneath because
   they answer a different question — chips say "is he any good", these say
   "what will it cost and when do I get it". Conflating them buries both. */
.hfacts{display:flex;flex-wrap:wrap;gap:9px 26px;margin:20px 0 4px;
  padding:15px 0 0;border-top:1px solid rgba(255,255,255,.14)}
.hfacts span{font-size:14.5px;line-height:1.45;color:#8FA3BC}
.hfacts b{display:block;font-size:16.5px;font-weight:750;color:#fff;letter-spacing:-.01em}
@media(max-width:640px){.hfacts{gap:11px 0;flex-direction:column}}

/* ── asset picker ─────────────────────────────────────────────────────
   The first thing a personal-property buyer sees. Someone with four
   rifles is not reading a page — they are scanning for the word that
   matches what is sitting on their table, and then they want a price.
   So these are large, high-contrast, and every one of them lands in the
   order form with the asset already chosen. Prose comes after. */
.picks{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
@media(max-width:980px){.picks{grid-template-columns:repeat(3,1fr)}}
@media(max-width:680px){.picks{grid-template-columns:repeat(2,1fr);gap:11px}}
.pick{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;
  text-align:center;gap:9px;padding:22px 12px 18px;background:var(--card);
  border:1.5px solid var(--line);border-radius:13px;text-decoration:none;
  transition:border-color .18s var(--ease),transform .18s var(--ease),box-shadow .18s var(--ease)}
.pick:hover{border-color:var(--gold);transform:translateY(-3px);box-shadow:var(--sh)}
.pick svg{width:34px;height:34px;stroke:var(--gold-d);fill:none;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round;transition:stroke .18s var(--ease)}
.pick:hover svg{stroke:var(--green-ui)}
/* text-transform:none is deliberate — a <b> inside this section inherits an
   uppercase rule from elsewhere in the sheet, and shouting eight asset names
   at someone who is scanning for their own is the opposite of helpful. */
.fnote{display:block;margin-top:6px;font-size:13px;line-height:1.45;color:var(--mute)}
.pick b{font-size:15px;font-weight:700;color:var(--ink);line-height:1.28;
  letter-spacing:-.01em;text-transform:none}
.pick span{font-size:12.5px;color:var(--mute);line-height:1.4;text-transform:none}
/* The escape-hatch tile spans the full row rather than sitting orphaned at the
   start of a new one. It is a footer to the grid, not a ninth category. */
.pick.more{grid-column:1/-1;flex-direction:row;justify-content:center;
  gap:13px;padding:15px 18px;border-style:dashed;background:var(--bg2)}
.pick.more svg{width:22px;height:22px}
.pick.more b{color:var(--navy-t);font-size:14.5px}
.pick.more span{max-width:none}
@media(max-width:680px){.pick.more{flex-direction:column;gap:7px;text-align:center}}
@media(prefers-color-scheme:dark){
  .pick{background:var(--card);border-color:var(--line)}
  .pick.more{background:transparent}
}