/* ─────────────────────────────────────────────────────────────────────
   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")}

/* ══════════════════════════════════════════════════════════════════
   PALETTE — revised 4 August 2026
 
   The old scheme was deep navy with gold accents on pure white. It was
   competent and it was the single most generic combination in professional
   services: every law firm, wealth manager and appraiser in the country is
   wearing it. Nothing about the site would be remembered an hour later.
 
   Three changes, none of which touch the logo:
 
   1. GREEN LEADS, GOLD ACCENTS. Green was already in the NextPhase mark and
      was being used as a minor UI colour while gold — the generic one — did
      the identity work. That is backwards. Green now carries the brand
      moments; gold is kept for the rare highlight where warmth is wanted.
      This is more branded, not less: it is his own colour.
 
   2. PAPER, NOT SCREEN WHITE. #FFFFFF is the default surface of every
      template ever shipped. A warm off-white reads as document rather than
      dashboard, which is the correct association for a practice whose entire
      product is a signed piece of paper. The shift is small enough that
      nobody names it and large enough that everything sits differently.
 
   3. INK WARMED OFF PURE BLACK-BLUE. Cool near-black on cool white is
      clinical. Warming both ends slightly makes long-form reading — and this
      site is now long-form — noticeably easier.
 
   Every value below was checked against the WCAG AA floor; _smoke.py measures
   contrast on 18 pages and will fail the build if any of this regresses.
   ══════════════════════════════════════════════════════════════════ */
:root{
  --navy:#10261C; --navy-d:#08150F; --navy-l:#1B3A2B; --navy-x:#245039;
  --navy-t:#123024;         /* deep green-black, used as ink on dark panels */
  /* Gold survives as a highlight only. --gold-d is the one that carries text
     on light panels; #8F6F10 measured 4.43:1, a hair under the 4.5:1 floor,
     so it stays darkened. */
  --gold:#C9A227; --gold-l:#E8CE72; --gold-d:#84670E;
  --green:#2F6B3F; --green-l:#4E9A5E; --green-d:#1F4C2C;
  --green-ui:#2C6539;       /* green that carries white text — AA with margin */
  --ink:#161A14;            /* headings — warmed off pure blue-black */
  --body:#31382E;           /* body copy */
  --mute:#5F6A6C;           /* secondary */
  --line:#E0DED7; --line-d:#C9C6BC;
  --bg:#FCFBF7; --bg2:#F4F2EB; --bg3:#EAE7DD;   /* paper, not screen white */
  --card:#FFFFFF; --card2:#FBFAF6;
  /* 14px radius on everything read as 2018 SaaS. Editorial work is squarer:
     enough to look intentional, not enough to look like a chat bubble. */
  --wrap:1200px; --r:6px;
  --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 1px 2px rgba(20,24,26,.04);
  --sh-lg:0 24px 56px -24px rgba(8,21,15,.45);
  --focus:#2AD91E;
  --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(47,107,63,.22);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(38px,5.6vw,66px);letter-spacing:-.03em;line-height:1.03;font-weight:600}
h2{font-size:clamp(28px,3.7vw,43px);letter-spacing:-.024em;line-height:1.1}
h3{font-size:22px;letter-spacing:-.011em;font-weight:620;line-height:1.26}
h4{font-family:var(--sans);font-size:12px;letter-spacing:.18em;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:11.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--green-d);font-weight:800;margin-bottom:16px}
.sec{padding:88px 0}
.sec.tight{padding:58px 0}
.sec.alt{background:var(--bg2)}
/* Squarer, quieter cards — hairline first, shadow barely there. */
.svc,.icard,.aud,.acard,.cap,.pgrp,.pick{border-radius:var(--r)}
.sec.navy{background:var(--navy);color:#D5EBD3}
.sec.navy h2,.sec.navy h3{color:#fff}
.sec.navy .eyebrow{color:var(--green-l)}
/* Anything sitting on the dark green: light green, never the dark one. */
.hero .eyebrow,.phero .eyebrow,.sec.navy .eyebrow,.band .eyebrow{color:#8FCB9B}
.sec.navy .lead{color:#BFDCBC}
.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}
/* ── the header, enlarged 4 August ─────────────────────────────────────
   The bar was the weakest thing on the page: a 46px logo whose monogram is
   too dense to resolve at that size, and 15px nav labels — both small enough
   that the top of the site read as an afterthought under a very confident
   hero.
   Both grew. That costs horizontal room, and the only honest way to pay for
   it is to carry fewer links at any given width, so the secondary items now
   drop one breakpoint earlier than they did. Capability, Tools and Knowledge
   all appear in the footer, so nothing becomes unreachable — the header just
   stops trying to hold ten things and holds seven properly instead. */
.hdr .in{display:flex;align-items:center;gap:22px;height:94px;max-width:1440px}
/* 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}   /* sizing lives in LOGO_CSS, with the mark */
.nav{display:flex;gap:22px;margin-left:auto;align-items:center;flex:0 0 auto}
.nav a{font-size:17px;font-weight:650;color:var(--navy-t);white-space:nowrap;letter-spacing:-.005em}
.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:16px;padding:13px 26px}

/* ── hero ───────────────────────────────────────────── */
.hero{background:linear-gradient(155deg,var(--navy-d) 0%,var(--navy) 46%,var(--navy-l) 100%);color:#CBD6CE;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:#B6D8B3;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:#DFF2DD}
.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:#97BE93;font-weight:640}

/* ── grids / cards ──────────────────────────────────── */
.grid{display:grid;gap:24px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
/* The four asset disciplines. Adding machinery made this five items in a
   three-column grid, which left machinery alone on row two — the exact
   orphaned-row problem the wide Expert Witness card was built to solve.
   Two columns gives a clean 2x2 of disciplines with the wide services card
   underneath, and lets each card carry a bigger photograph. */
.g2disc{grid-template-columns:repeat(2,1fr)}
.g2disc .svc .art{height:210px}
@media(max-width:860px){.g2disc{grid-template-columns:1fr}.g2disc .svc .art{height:180px}}
.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:#CEE7CB}
.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:#FAFEFA}

.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:#B6D8B3;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:#B6D8B3;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:#B6D8B3}
/* 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:#80AC7C;margin-bottom:14px}
.crumb a{color:#80AC7C}
.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}
/* "What helps most" — Jeremy 2026-08-13: very prominent, bolder. The photo
   guidance decides whether an order is quotable. */
.note.helpmost{background:#FFF9EC;border:2px solid var(--gold);border-left-width:6px;
  padding:18px 22px;font-size:16.5px;line-height:1.65;
  box-shadow:0 2px 10px rgba(160,120,30,.12)}
.note.helpmost .hm-head{margin:0 0 8px;font-weight:800;letter-spacing:1.6px;
  font-size:14px;color:#84670E}
.note.helpmost strong{color:var(--ink)}
.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:#C8E3C6;border-radius:16px;padding:34px 36px;margin:30px 0}
.subdisc h3{color:#fff;margin-bottom:6px}
.subdisc p{margin:0;color:#B6D8B3;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. */
/* ── group heading inside a discipline page ──────────────────────────────
   Marks the second block ("Collections & household contents") as a PEER of the
   machinery band above it rather than a continuation of it. Without a heading
   the tiles read as though machinery were one more item in the same list, which
   is the confusion this whole restructure exists to remove. */
.grphead{margin:44px 0 20px;max-width:62ch}
.grphead h3{font-size:clamp(19px,2.2vw,24px);margin-bottom:6px}
.grphead p{color:var(--mute);font-size:15.5px;margin:0}

/* Chattel-vs-real-property pointer under the collections grid. A quiet aside,
   not a tile: it is a routing rule, not a category to pick. */
.crossref{margin:22px 0 0;font-size:15px;line-height:1.62;color:var(--mute);
  padding-left:16px;border-left:2px solid var(--line-d);max-width:70ch}
.crossref a{font-weight:700}

/* ── what is referred out ────────────────────────────────────────────────
   Deliberately styled as a note, not a warning. It is a competence statement,
   and up-front disclosure of limits reads as credibility rather than as a gap. */
.refnote{display:flex;gap:16px;align-items:flex-start;margin-top:34px;padding:20px 22px;
  background:var(--card2);border:1px solid var(--line);border-radius:var(--r)}
.refnote .ic{flex:0 0 auto;width:34px;height:34px;color:var(--green-ui);opacity:.85}
.refnote .ic svg{width:100%;height:100%}
.refnote b{display:block;margin-bottom:5px;color:var(--navy-t);font-size:16px}
.refnote p{margin:0;font-size:15px;line-height:1.62;color:var(--body)}
@media(max-width:560px){.refnote{flex-direction:column;gap:10px}}

/* ── proof strip (sits directly under the CTA band) ──────────────────────
   Quiet on purpose. It follows the loudest element on the page, so competing
   with it would flatten both; the job here is to be read by somebody who has
   just decided they are interested and wants one more reason. Left rule and a
   small caps label give it the look of a case note rather than an advert. */
.proofsec{padding-top:0}
.pf-head{max-width:60ch;margin-bottom:26px}
.pf-head h2{font-size:clamp(21px,2.4vw,27px);margin-bottom:8px}
.pf-head p{color:var(--mute);font-size:15.5px;margin:0}
.pfgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:22px}
.pf{border-left:2px solid var(--gold);padding:2px 0 2px 18px}
.pf-k{display:block;font-size:11.5px;font-weight:750;letter-spacing:.11em;
  text-transform:uppercase;color:var(--green-ui);margin-bottom:7px}
.pf p{font-size:15.5px;line-height:1.62;color:var(--body);margin:0}
.pf-more{margin-top:24px;font-size:15px}
.pf-more a{font-weight:700}
@media(max-width:620px){.pfgrid{gap:18px}.pf{padding-left:14px}}

.btn{max-width:100%}
@media(max-width:420px){.btn.lg{white-space:normal;text-align:center}}

/* footer */
footer.ft{background:var(--navy-d);color:#91BA8D;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:#B6D8B3;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:#6F9C6B}
.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:#B6D8B3;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:#92BC8F}
.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:#DEF2DC;
  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:1860px){
  .nav a.opt-lnk{display:none}     /* Capability — also in the footer */
}
@media(max-width:1620px){
  .hdr .in{height:88px;gap:18px}
  .nav{gap:18px}
  .nav a{font-size:16.5px}
  .nav a.opt2-lnk{display:none}    /* Tools, Knowledge — also in the footer */
}
@media(max-width:1340px){
  .hdr .in{height:84px;gap:15px}
  .nav{gap:15px}
  .nav a{font-size:16px}
}
@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:100%;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:#C8E3C6;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:#ADD2A9;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:#91BA8D;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:#BFDCBC}
.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:#82AC7E;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:#C8E3C6;
  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:#ADD2A9;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:#DFF2DD}
.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:#DFF2DD!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:#91BA8D;
  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:#B6D8B3;font-weight:640}
.treq span{display:block;font-size:13.5px;color:#A4CBA0;line-height:1.55;margin-top:3px}
.treq .cite{display:block;font-size:11.5px;font-style:normal;color:#82AC7E;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:#BFDCBC;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:#77B86E}

.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-fee{display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:end;margin-bottom:16px}
.frow-fee 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-fee 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:#ADD2A9;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:#97BE93;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:#91BA8D}
.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:#82AC7E;margin-top:4px}
#vbody{position:relative;z-index:1;margin-top:20px;font-size:14.5px;line-height:1.62;color:#BFDCBC}
#vbody p{margin:0 0 .85em}
#vbody a{color:#E8CE72;text-decoration:underline}
#vbody .ticks li{font-size:14px;color:#BFDCBC;margin:9px 0;padding-left:26px}
#vbody .ticks li:before{border-color:var(--green-l)}
#vbody strong,#vbody b{color:#fff}
#vbody em{color:#DFF2DD}
#vbody .tnote{background:rgba(255,255,255,.06);border-left-color:var(--green-l);
  color:#BFDCBC;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:#BFDCBC;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:#ADD2A9;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:#EEF8ED; --body:#C5DAC3; --mute:#8EAC8B;
    --line:#213E1F; --line-d:#30562E;
    --bg:#0B1D0A; --bg2:#11260F; --bg3:#192F16;
    --card:#122710; --card2:#152C13;
    --navy-t:#D8F1D5;   /* only the INK token flips — --navy stays brand navy
                           so hero/band/est-card gradients render dark */
    --gold-d:#D9B647; --green-d:#7FBB53; --focus:#68F05A;
    --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:#BEF0B9}
  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:#0E3A0B}
  .cmp thead th{background-color:#0E3A0B;color:#fff}
  .cmp thead th.us{background-color:#072306}
  .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:1260px){
  .nav{display:none}
  .nav.open{display:flex;position:absolute;top:100%;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:#92BC8F}
.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}
}


/* ── 2026-08-27, Jeremy: "there's not a lot of color or enough pizzazz" ──
   The palette was already here — gold and green — it was just barely used
   outside the buttons. This puts it on the surfaces people actually touch.
   Restrained on purpose: an appraisal report is a document of record and the
   site should not read like a coupon. */

/* Asset tiles: a gold icon, and a green wash that arrives on hover. */
/* White cards on a near-white page had no edge at all — Jeremy: "this white on
   white box is not attractive". Tabs were considered and rejected: they would
   hide most of these categories behind a click, and the tile labels are the
   exact words people search for. Contrast instead of concealment.
   The group panel goes soft green, the cards stay white, and the icon sits in
   a tinted disc so each tile has a focal point. */
.pick{background:#fff;border:1px solid var(--line-d);box-shadow:0 1px 2px rgba(16,38,28,.05)}
.pick b{color:var(--navy)}
.pick svg{color:var(--green);stroke:var(--green);background:#EDF4EC;border-radius:50%;
          padding:9px;box-sizing:content-box;width:22px;height:22px}
.pick{transition:border-color .16s,transform .16s,box-shadow .16s,background .16s}
.pick:hover{background:#fff;border-color:var(--green);box-shadow:0 6px 18px rgba(16,38,28,.13)}
.pick:hover svg{color:#fff;stroke:#fff;background:var(--green)}
/* A gold rule under each group heading, so the sections read as sections. */
.pgrp-h b{color:var(--navy)}

/* The "also appraised" line: present, linked, deliberately quiet. */
.pgrp-also{margin:14px 2px 0;font-size:14.5px;line-height:1.6;color:var(--mute)}
.pgrp-also a{color:var(--green);font-weight:660;text-decoration:none;border-bottom:1px solid #CFE0D2}
.pgrp-also a:hover{border-bottom-color:var(--green)}

/* The ask box — type what you have, land in the form with it already filled. */
.askbox{margin:22px auto 0;max-width:760px;background:var(--navy);border-radius:12px;
        padding:20px 22px 18px}
.askbox label{display:block;color:#fff;font-weight:740;font-size:17px;margin-bottom:11px}
.askrow{display:flex;gap:10px}
.askrow input{flex:1;min-width:0;border:1px solid var(--navy-x);border-radius:8px;
              padding:13px 14px;font:inherit;font-size:16px;background:#fff;color:var(--ink)}
.askrow input:focus{outline:2px solid var(--gold);outline-offset:1px;border-color:var(--gold)}
.askrow button{flex:0 0 auto;border:0;border-radius:8px;cursor:pointer;
               background:var(--gold);color:var(--navy-d);font:inherit;font-weight:760;
               font-size:16px;padding:13px 20px}
.askrow button:hover{background:var(--gold-l)}
.askhint{display:block;margin-top:9px;color:#B8CDBB;font-size:13.5px}
@media(max-width:560px){.askrow{flex-direction:column}.askrow button{width:100%}}

/* "Not sure what you have?" — this is the catch-all for everyone the tiles
   missed, and it was styled quieter than the tiles it rescues. */
.notlisted.hot a{border-left:5px solid var(--gold);background:linear-gradient(180deg,#FFFDF5,#FFF9E8)}
.notlisted.hot b{color:var(--navy)}
.notlisted.hot em{color:var(--green);font-style:normal;font-weight:760}
.notlisted.hot a:hover{border-left-color:var(--green);box-shadow:var(--sh)}

/* Footer: "Where We Work" was a 7th child in a 6-column grid, so it wrapped
   onto its own row under the logo and added a whole band of scroll. Seven
   columns, one row. */
.fgrid{grid-template-columns:1.25fr repeat(6,.78fr);gap:24px}
@media(max-width:1180px){.fgrid{grid-template-columns:1.3fr repeat(3,1fr);gap:26px}}

.stu{max-width:620px;margin:0 auto;padding:12px 14px 130px}
.stu .card{border:1px solid var(--line);border-radius:12px;background:#fff;padding:16px;margin:0 0 14px}
.stu .card h2{font-size:12.5px;letter-spacing:1.5px;text-transform:uppercase;color:var(--mute);margin:0 0 12px;font-family:inherit;font-weight:700}
.stu label{display:block;font-size:12.5px;letter-spacing:.6px;text-transform:uppercase;color:var(--mute);margin:0 0 5px;font-weight:700}
.stu input[type=text],.stu input[type=number],.stu input[type=date],.stu select,.stu textarea{
  width:100%;box-sizing:border-box;border:1px solid var(--line);border-radius:8px;
  padding:12px 13px;font:16px inherit;color:var(--ink);background:#fff;min-height:48px}
.stu textarea{min-height:72px;resize:vertical;line-height:1.5}
.stu .row{margin-bottom:14px}
.stu .two{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.stu .fee input{font:700 30px ui-monospace,Menlo,Consolas,monospace;padding:12px;letter-spacing:.02em}
.stu .fee{border:2px solid var(--gold);border-radius:10px;padding:13px 14px 15px;background:#FFFDF5;margin-bottom:14px}
.stu .fee label{color:#84670E}
.stu .hint{font-size:12.5px;line-height:1.5;color:var(--mute);margin:6px 0 0}
/* a. photos — large, tappable, first thing on the page */
.stu .pgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin:0 0 14px}
@media(min-width:520px){.stu .pgrid{grid-template-columns:repeat(3,1fr)}}
.stu .pgrid a{display:block}
.stu .pgrid img{width:100%;height:150px;object-fit:cover;border-radius:10px;border:1px solid var(--line);display:block;background:#EEF1F5}
.stu .pnote{font-size:13.5px;color:var(--mute);margin:0 0 12px;padding:10px 2px}
/* b. assignment details — read-only labeled rows */
.stu .detrows>div{padding:9px 0;border-bottom:1px solid #EEF1F5}
.stu .detrows>div:last-child{border-bottom:0;padding-bottom:0}
.stu .detrows b{display:block;font:700 11px/1.5 Arial,sans-serif;letter-spacing:1.2px;color:var(--mute);text-transform:uppercase}
.stu .detrows span{display:block;font-size:15.5px;line-height:1.45;color:var(--ink);word-break:break-word}
/* c. collapsed secondary fields inside the edit card */
.stu .editwrap{border-top:1px solid var(--line);margin-top:2px}
.stu .editwrap>summary{list-style:none;cursor:pointer;padding:12px 0;font:700 13px Arial,sans-serif;color:var(--navy)}
.stu .editwrap>summary::-webkit-details-marker{display:none}
.stu .editwrap>summary:before{content:'+ '}
.stu .editwrap[open]>summary:before{content:'\2013 '}
/* d. the preview, one tap to open */
.stu details.prevwrap{padding:0}
.stu .prevwrap>summary{list-style:none;cursor:pointer;padding:16px;font:700 15px Arial,sans-serif;color:var(--navy)}
.stu .prevwrap>summary::-webkit-details-marker{display:none}
.stu .prevwrap>summary:before{content:'\25B8 '}
.stu .prevwrap[open]>summary:before{content:'\25BE '}
.stu .prevwrap .bd{padding:0 12px 10px}
.stu .prevwrap .rungs{padding:0 16px 14px}
.stu pre.mail{margin:0;white-space:pre-wrap;word-wrap:break-word;font:14px/1.62 ui-monospace,Menlo,Consolas,monospace;color:var(--ink);background:#F7FAFD;border:1px solid var(--line);border-radius:8px;padding:15px}
.stu .facts{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:8px;overflow:hidden;margin-bottom:12px}
.stu .facts div{background:#fff;padding:10px 12px}
.stu .facts b{display:block;font:700 11px/1.4 Arial,sans-serif;letter-spacing:1.3px;color:var(--mute);margin-bottom:3px}
.stu .facts span{font:15px ui-monospace,Menlo,Consolas,monospace;color:var(--ink);word-break:break-word}
.stu .s{display:inline-block;border:1px solid var(--line);border-radius:7px;background:#EEF3F9;color:var(--navy);font:700 13.5px Arial,sans-serif;cursor:pointer}
.stu .warn{margin:0 0 14px;padding:11px 14px;border-left:4px solid #B4372F;background:#FDF2F2;
  font:14px/1.55 Arial,sans-serif;color:#8E2B24;border-radius:0 6px 6px 0}
.stu .idle{padding:24px 16px;text-align:center;color:var(--mute);font-size:15px;line-height:1.6}
.stu .lk{font:13px ui-monospace,Menlo,Consolas,monospace;word-break:break-all;color:var(--navy)}
.stu .rungs{font-size:12.5px;color:var(--mute);line-height:1.7;margin:8px 0 0}
.stu .rungs b{color:var(--ink)}
.stu .statusline{font:14px/1.5 Arial,sans-serif;margin:2px 2px 0;min-height:1px}
/* e. SEND QUOTE — full width, stuck to the bottom of the screen */
.stu .sendspacer{height:6px}
.sendbar{position:fixed;left:0;right:0;bottom:0;z-index:50;background:rgba(255,255,255,.97);
  border-top:1px solid var(--line);padding:10px 14px calc(10px + env(safe-area-inset-bottom));
  box-shadow:0 -4px 14px rgba(15,30,50,.07)}
.sendbar button{display:block;width:100%;max-width:592px;margin:0 auto;border:0;border-radius:10px;
  background:var(--green);color:#fff;font:700 17px/1.25 Arial,sans-serif;padding:16px;min-height:56px;cursor:pointer}
.sendbar button:disabled{background:#B9C4D2;cursor:default}
.stu .toast{position:fixed;left:50%;bottom:96px;transform:translateX(-50%) translateY(14px);
  background:var(--ink);color:#fff;padding:11px 20px;border-radius:8px;font:14px Arial,sans-serif;
  opacity:0;pointer-events:none;transition:opacity .18s,transform .18s;z-index:60}
.stu .toast.on{opacity:1;transform:translateX(-50%) translateY(0)}
.stu .bar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;border-bottom:1px solid var(--line);
  padding:0 2px 12px;margin-bottom:14px}
.stu .bar .logo{display:flex;align-items:center;gap:10px}
.stu .bar .logo .logo-mark{height:30px;width:30px;flex:0 0 auto}
.stu .bar .logo .logo-txt b{font-size:18px}
.stu .bar .logo .logo-txt>i{font-size:7px;letter-spacing:.16em;margin-top:3px}
.stu .bar .tag{font:700 10.5px Arial,sans-serif;letter-spacing:1.4px;color:var(--mute)}

.spwrap{background:#EDF1F6;padding:34px 0 60px}
.spdoc{max-width:860px;margin:0 auto;background:#fff;border:1px solid #C9D4E2;
  box-shadow:0 2px 22px rgba(11,31,58,.09);position:relative;overflow:hidden}
.spdoc .pad{padding:44px 54px 50px}
@media(max-width:720px){.spdoc .pad{padding:28px 22px 34px}.spwrap{padding:18px 0 40px}}
.spmark{position:absolute;inset:0;pointer-events:none;
  background-image:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='560' height='400'%3E%3Ctext x='0' y='190' transform='rotate(-27 0 190)' font-family='Arial,Helvetica,sans-serif' font-size='54' font-weight='700' letter-spacing='11' fill='%2310261C' fill-opacity='0.035'%3ESPECIMEN%3C/text%3E%3C/svg%3E")}
@media(max-width:720px){.spmark{background-size:340px 245px}}
.spdoc .rule{height:3px;background:linear-gradient(90deg,var(--navy) 0 62%,var(--gold) 62% 100%)}
.sphd{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;
  flex-wrap:wrap;border-bottom:1px solid var(--line);padding-bottom:20px;margin-bottom:26px}
.sphd img{height:46px;width:auto}
.sphd .rt{text-align:right;font:12px/1.65 Arial,sans-serif;color:var(--mute)}
@media(max-width:720px){.sphd .rt{text-align:left}}
.spdoc h2.dt{font-size:23px;line-height:1.25;margin:0 0 4px}
.spdoc .dsub{color:var(--mute);font-size:14px;margin:0 0 26px}
.spsec{margin:0 0 30px}
.spsec > h3{font:700 11.5px/1.4 Arial,sans-serif;letter-spacing:1.9px;text-transform:uppercase;
  color:var(--mute);margin:0 0 12px;padding-bottom:7px;border-bottom:1px solid var(--line)}
.spsec p{font-size:15px;line-height:1.68;margin:0 0 11px;color:var(--body)}
.spkv{display:grid;grid-template-columns:190px minmax(0,1fr);gap:7px 18px;font-size:14.5px;line-height:1.6}
@media(max-width:620px){.spkv{grid-template-columns:1fr;gap:2px 0}
  .spkv dt{margin-top:11px}}
.spkv dt{color:var(--mute);font-weight:700;font-size:12.5px;letter-spacing:.5px;text-transform:uppercase}
.spkv dd{margin:0;color:var(--ink)}
.splot{border:1px solid var(--line);border-radius:9px;padding:16px 18px;margin:0 0 14px}
.splot .lh{display:flex;justify-content:space-between;align-items:baseline;gap:14px;flex-wrap:wrap;margin-bottom:8px}
.splot .ln{font:700 11.5px Arial,sans-serif;letter-spacing:1.6px;color:var(--mute)}
.splot .lv{font:700 20px ui-monospace,Menlo,Consolas,monospace;color:var(--navy)}
.splot .ld{font-size:15px;line-height:1.62;margin:0 0 9px;color:var(--ink)}
.splot .lc{font-size:13.5px;line-height:1.62;margin:0 0 9px;color:var(--body)}
.splot .lw{font-size:13.5px;line-height:1.62;margin:0;padding:10px 12px;background:#F5F8FC;
  border-left:3px solid var(--gold);border-radius:0 6px 6px 0;color:var(--body)}
.spshot{width:100%;height:150px;border-radius:7px;margin:0 0 11px;background:#F0F4F9;
  border:1px dashed #BECBDA;display:flex;align-items:center;justify-content:center;
  font:11.5px Arial,sans-serif;letter-spacing:1.4px;color:#8896A8;text-align:center;padding:0 14px}
.sptot{display:flex;justify-content:space-between;align-items:baseline;gap:16px;flex-wrap:wrap;
  border-top:2px solid var(--navy);padding-top:14px;margin-top:6px}
.sptot b{font:700 12px Arial,sans-serif;letter-spacing:1.8px;color:var(--mute)}
.sptot span{font:700 27px ui-monospace,Menlo,Consolas,monospace;color:var(--navy)}
.spcert{margin:0;padding:0;list-style:none;counter-reset:c}
.spcert li{counter-increment:c;position:relative;padding:0 0 11px 34px;font-size:14.5px;
  line-height:1.62;color:var(--body)}
.spcert li:before{content:counter(c);position:absolute;left:0;top:1px;width:22px;height:22px;
  border-radius:50%;background:#F0F4F9;color:var(--mute);font:700 11px/22px Arial,sans-serif;
  text-align:center}
.spsig{border:2px dashed #C2CEDD;border-radius:9px;padding:20px 22px;margin-top:18px;background:#FAFCFE}
.spsig p{margin:0;font-size:14px;line-height:1.65;color:var(--mute)}
.spsig b{color:var(--ink)}
.spn{border-left:3px solid var(--green);background:#F4F9EF;border-radius:0 8px 8px 0;
  padding:13px 16px;margin:0 0 22px}
.spn b{display:block;font:700 11px Arial,sans-serif;letter-spacing:1.5px;text-transform:uppercase;
  color:#3F7021;margin-bottom:5px}
.spn p{margin:0;font-size:14px;line-height:1.62;color:var(--body)}
.spbanner{background:#8E2B24;color:#fff;padding:13px 20px;font:700 12.5px/1.5 Arial,sans-serif;
  letter-spacing:1.2px;text-align:center}
.spbanner span{display:block;font-weight:400;letter-spacing:0;font-size:13px;opacity:.92;margin-top:4px}
@media print{.spwrap{background:#fff;padding:0}.spdoc{box-shadow:none;border:0}
  .spn{display:none}.hdr,.buybar,.ftr{display:none}}

.dv{margin:16px 0 0;border-top:1px solid var(--line)}
.dv-i{padding:20px 0 18px;border-bottom:1px solid var(--line)}
.dv-i h3{font-size:18.5px;line-height:1.35;margin:0 0 8px;letter-spacing:-.01em}
.dv-i p{font-size:16.5px;line-height:1.68;margin:0;color:var(--body)}

/* Who reads it, and how the fee is set — two facts a buyer wants before
   they will fill in a form, given equal weight and put side by side. */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin:22px 0 0}
@media(max-width:760px){.duo{grid-template-columns:1fr}}
.duo>div{background:var(--bg2);border-radius:12px;padding:22px 24px}
.duo h3{font:700 11.5px/1.4 Arial,sans-serif;letter-spacing:1.8px;text-transform:uppercase;
  color:var(--mute);margin:0 0 10px}
.duo p{font-size:16px;line-height:1.66;margin:0;color:var(--body)}

/* The worked example. Numbered, because the point is that it is a sequence —
   an owner should be able to see where a conclusion came from, and where they
   would disagree with it. */
.wex{border:1px solid var(--line);border-radius:13px;overflow:hidden;margin:24px 0 0}
.wex-h{background:var(--navy);color:#fff;padding:15px 22px}
.wex-h b{display:block;font-family:Lora,Georgia,serif;font-size:19px;font-weight:600;line-height:1.3}
.wex-h span{display:block;font:12.5px/1.5 Arial,sans-serif;color:#A1CB9D;margin-top:4px}
.wex-b{padding:6px 22px 20px;counter-reset:wx}
.wex-b .st{counter-increment:wx;position:relative;padding:16px 0 0 42px;border-top:1px solid var(--line)}
.wex-b .st:first-child{border-top:0}
.wex-b .st:before{content:counter(wx);position:absolute;left:0;top:16px;width:26px;height:26px;
  border-radius:50%;background:var(--green);color:#fff;font:700 13px/26px Arial,sans-serif;text-align:center}
.wex-b .st h4{font-size:16px;margin:0 0 5px;letter-spacing:-.01em}
.wex-b .st p{font-size:16px;line-height:1.66;margin:0 0 16px;color:var(--body)}

/* Mistakes. Amber rather than red: these are things people do with good
   intentions, and scolding reads badly on a page you want them to trust. */
.mst{margin:18px 0 0;padding:0;list-style:none}
.mst li{position:relative;padding:14px 0 14px 34px;border-bottom:1px solid var(--line)}
.mst li:last-child{border-bottom:0}
.mst li:before{content:"!";position:absolute;left:0;top:15px;width:22px;height:22px;border-radius:50%;
  background:#FBF0D8;color:#84670E;font:700 13px/22px Arial,sans-serif;text-align:center}
.mst b{display:block;font-size:16.5px;margin-bottom:4px;color:var(--ink);letter-spacing:-.01em}
.mst p{font-size:16px;line-height:1.66;margin:0;color:var(--body)}

@media print{.wex-h{background:#fff;color:#000;border-bottom:1pt solid #000}
  .wex-h span{color:#444}.wex-b .st:before{background:#000}}

.rowlead{display:flex;align-items:center;gap:18px;margin:46px 0 26px}
.rowlead:before,.rowlead:after{content:"";flex:1;height:1px;background:var(--line)}
.rowlead span{font:700 11.5px Arial,sans-serif;letter-spacing:2px;text-transform:uppercase;
  color:var(--mute);white-space:nowrap}
@media(max-width:560px){.rowlead span{white-space:normal;text-align:center}}

/* Tinted panel so the white cards inside it have an edge to sit against.
   Was var(--card) on a var(--bg) page -- white on white, no separation. */
.pgrp{border:1px solid #DCE6DA;border-radius:15px;background:#F2F6F1;
  padding:20px 22px 22px;margin:0 0 18px}
.pgrp-h{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin:0 0 15px;
  padding-bottom:13px;border-bottom:2px solid var(--gold)}
.pgrp-h b{font-family:Lora,Georgia,serif;font-size:20px;font-weight:600;color:var(--ink);
  letter-spacing:-.01em}
.pgrp-h span{font:13.5px Arial,sans-serif;color:var(--mute)}
.pgrp .picks{display:grid;gap:10px;grid-template-columns:repeat(4,1fr)}
.pgrp.w .picks{grid-template-columns:repeat(3,1fr)}
@media(min-width:1100px){.pgrp.w .picks{grid-template-columns:repeat(4,1fr)}}
@media(max-width:900px){.pgrp .picks,.pgrp.w .picks{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.pgrp .picks,.pgrp.w .picks{grid-template-columns:1fr}}
@media(max-width:760px){.pgrp{padding:16px 15px 18px}}

.hers{margin:26px 0 0;border:1px solid var(--line);border-radius:var(--r);padding:26px 26px 20px;background:var(--card)}
.hers-bar{position:relative;height:9px;border-radius:5px;margin:0 0 16px;
  background:linear-gradient(90deg,var(--green) 0%,var(--green-l) 45%,var(--gold) 78%,#B4372F 100%)}
.hers-bar span{position:absolute;top:50%;width:15px;height:15px;margin:-7.5px 0 0 -7.5px;
  border-radius:50%;background:var(--card);border:3px solid var(--ink)}
.hers-marks{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.hers-marks div{border-top:2px solid var(--line);padding-top:11px}
.hers-marks b{display:block;font-family:var(--serif);font-size:31px;line-height:1;color:var(--ink);margin-bottom:6px}
.hers-marks span{font-size:14.5px;line-height:1.5;color:var(--mute)}
.hers-note{margin:16px 0 0;font-size:15px;line-height:1.6;color:var(--body)}
@media(max-width:660px){.hers-marks{grid-template-columns:1fr;gap:12px}
  .hers{padding:20px 18px 16px}.hers-marks b{font-size:26px}}

.eyebrow{position:relative;padding-bottom:13px}
.eyebrow:after{content:"";position:absolute;left:0;bottom:0;width:86px;height:7px;
  background:
    repeating-linear-gradient(90deg,var(--green) 0 1px,transparent 1px 8px) bottom left/100% 4px no-repeat,
    linear-gradient(90deg,var(--green),var(--green)) bottom left/100% 1px no-repeat;
  opacity:.8}
.center .eyebrow:after{left:50%;transform:translateX(-50%)}
.sec.navy .eyebrow:after,.hero .eyebrow:after,.phero .eyebrow:after{
  background:
    repeating-linear-gradient(90deg,#8FCB9B 0 1px,transparent 1px 8px) bottom left/100% 4px no-repeat,
    linear-gradient(90deg,#8FCB9B,#8FCB9B) bottom left/100% 1px no-repeat;
  opacity:.75}

/* The band that closes the page carries the same rule, full width, as a lid. */
.stats{position:relative}
.stats:before{content:"";position:absolute;top:0;left:0;right:0;height:7px;
  background:
    repeating-linear-gradient(90deg,rgba(143,203,155,.55) 0 1px,transparent 1px 9px) top left/100% 5px no-repeat;
  pointer-events:none}

/* Section divider. Used sparingly — between the argument and the evidence. */
.mrule{height:9px;margin:0 auto;max-width:var(--wrap);
  background:
    repeating-linear-gradient(90deg,var(--line-d) 0 1px,transparent 1px 9px) center left/100% 6px no-repeat,
    linear-gradient(90deg,var(--line),var(--line)) center left/100% 1px no-repeat}
@media print{.eyebrow:after,.stats:before,.mrule{display:none}}

.logo{display:flex;align-items:center;gap:13px;color:inherit}
.logo:hover{color:inherit}
.logo .logo-mark{flex:0 0 auto;display:block;height:52px;width:52px;max-width:none}
.logo-txt{display:block;line-height:1}
.logo-txt b{display:block;font-family:var(--serif);font-weight:640;font-size:30px;
  line-height:1;letter-spacing:-.022em;color:var(--navy-t);white-space:nowrap}
.logo-txt b i{font-style:normal;color:var(--green)}
.logo-txt>i{display:block;font-style:normal;font-family:var(--sans);font-size:10.5px;
  font-weight:750;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-d);
  margin-top:7px;white-space:nowrap}
/* Steps down before the nav runs out of room, not after — see the ladder. */
@media(max-width:1860px){
  .logo .logo-mark{height:48px;width:48px}
  .logo-txt b{font-size:28px}
}
@media(max-width:1620px){
  .logo{gap:12px}
  .logo .logo-mark{height:45px;width:45px}
  .logo-txt b{font-size:26.5px}
  .logo-txt>i{font-size:10px;letter-spacing:.185em;margin-top:6px}
}
@media(max-width:1340px){
  .logo .logo-mark{height:42px;width:42px}
  .logo-txt b{font-size:25px}
}
@media(max-width:900px){
  .logo{gap:11px}
  .logo .logo-mark{height:38px;width:38px}
  .logo-txt b{font-size:23px}
  .logo-txt>i{font-size:9px;letter-spacing:.17em;margin-top:5px}
}
@media(max-width:380px){
  .logo{gap:9px}
  .logo .logo-mark{height:33px;width:33px}
  .logo-txt b{font-size:20px}
  .logo-txt>i{font-size:8px;letter-spacing:.15em;margin-top:4px}
}
/* Footer sits on --navy-d. The tile lifts one step so the mark reads as an
   object on the panel rather than a hole in it, and the type inverts. */
.flogo .logo{margin-bottom:18px}
.flogo .logo .logo-mark{height:50px;width:50px}
.flogo .logo-mark .tile{fill:#1D4231}
.flogo .logo-txt b{font-size:29px;color:#fff}
.flogo .logo-txt b i{color:#8FCB9B}
.flogo .logo-txt>i{color:var(--gold-l)}

.pjump{display:none}
.pgrp{scroll-margin-top:86px}
@media(max-width:900px){
  .pjump{display:flex;gap:8px;overflow-x:auto;padding:0 0 18px;margin:0 0 4px;
    -webkit-overflow-scrolling:touch;scrollbar-width:none}
  .pjump::-webkit-scrollbar{display:none}
  .pjump a{flex:0 0 auto;border:1px solid var(--line-d);border-radius:100px;
    padding:9px 16px;font:600 14px Arial,sans-serif;color:var(--navy-t);
    background:var(--card);white-space:nowrap}
  .pjump a:active{background:var(--bg3)}
}
/* ── the escape hatch ──────────────────────────────────────────────
   A grey line of text reading "not sure? start the form anyway" is where an
   unusual item goes to die — it looks like a disclaimer, so nobody with a
   genuinely odd thing believes it applies to them. The odd things are often
   the profitable ones. So it gets a card of its own, the same weight as a
   category tile, and it says plainly that the list is examples rather than
   limits. */
.notlisted{margin:34px auto 0;max-width:760px}
.notlisted a{display:block;background:var(--card);border:1.5px solid var(--line-d);
  border-left:4px solid var(--gold);border-radius:0 12px 12px 0;padding:24px 28px;
  transition:.16s var(--ease)}
.notlisted a:hover{border-color:var(--green-l);border-left-color:var(--gold);
  box-shadow:0 14px 30px -18px rgba(8,21,15,.4);transform:translateY(-1px)}
.notlisted b{display:block;font-family:var(--serif);font-size:21px;font-weight:640;
  color:var(--ink);margin-bottom:7px;letter-spacing:-.01em}
.notlisted span{display:block;font-size:15.5px;line-height:1.6;color:var(--body)}
.notlisted em{display:inline-block;margin-top:13px;font-style:normal;font-weight:720;
  font-size:15px;color:var(--green-d)}
.notlisted a:hover em{color:var(--green)}
@media(max-width:560px){.notlisted a{padding:20px 22px}.notlisted b{font-size:19px}}