/* Paramus Moving — design system. See DESIGN.md.
   NOT the Mills system: cool paper (not cream), royal blue (not slate navy), gothic display over
   serif body (Mills is the inverse), signal red reserved for the tag device and the primary CTA.
   The numbered inventory tag is the signature — everything accounted for, including the company. */
:root{
  --royal:#24409A;
  --royal-d:#182C6E;
  --ink:#111827;
  --paper:#F7F8FA;
  --steel:#49535F;
  --line:#D8DDE4;
  --red:#C8102E;
  --red-d:#A00D25;
  --kraft:#E9DFCE;
  --kraft-d:#D9C9AC;
  --white:#fff;
  --shadow:0 1px 2px rgba(17,24,39,.05),0 10px 30px rgba(24,44,110,.08);
  --shadow-lg:0 6px 18px rgba(24,44,110,.10),0 26px 60px rgba(24,44,110,.12);
  --r:10px;
  --wrap:1200px;
  --d:"Archivo",system-ui,sans-serif;
  --s:"Source Serif 4",Georgia,serif;
  --m:"IBM Plex Mono",ui-monospace,monospace;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:140px}
body{margin:0;background:var(--white);color:var(--ink);
  font:400 17.5px/1.7 var(--s);-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:var(--royal);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3,h4{font-family:var(--d);font-weight:800;color:var(--royal);line-height:1.05;
  letter-spacing:-.01em;margin:0 0 .5em;text-wrap:balance}
h1{font-size:clamp(40px,5.6vw,68px);font-weight:900;font-stretch:106%}
h2{font-size:clamp(28px,3.4vw,42px)}
h3{font-size:20px;letter-spacing:0}
p{margin:0 0 1em}
.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 26px}
:focus-visible{outline:3px solid var(--red);outline-offset:2px;border-radius:3px}
/* red outlines vanish on royal/near-black grounds — white wins there (WCAG 1.4.11) */
.hero :focus-visible,.sec-royal :focus-visible,.ft :focus-visible,.cbar :focus-visible,
.calc-out :focus-visible,.band :focus-visible,.d-hd :focus-visible{outline-color:#fff}
.skip{position:absolute;left:-9999px;top:0;background:var(--royal);color:#fff;padding:10px 16px}
.skip:focus{left:12px;top:12px;z-index:999}

/* ---------- the tag ---------- */
.tag{display:inline-flex;align-items:center;font:600 12.5px/1 var(--m);letter-spacing:.04em;
  padding:6px 10px;border-radius:6px;white-space:nowrap;
  border:1.5px solid var(--red);color:var(--red);background:#fff;
  box-shadow:2px 2px 0 rgba(200,16,46,.14)}
.tag-line{border-color:rgba(255,255,255,.55);color:#fff;background:transparent;box-shadow:none;
  font-size:11.5px;padding:4px 8px}
.tag-royal{border-color:var(--royal);color:var(--royal);box-shadow:2px 2px 0 rgba(36,64,154,.14)}
.tag-invert{border-color:rgba(255,255,255,.7);color:#fff;background:transparent;box-shadow:none}
a.tag:hover{text-decoration:none;background:var(--red);color:#fff}
a.tag-invert:hover{background:#fff;color:var(--royal)}

/* ---------- buttons ---------- */
.btn{display:inline-block;font:700 15.5px/1 var(--d);letter-spacing:.01em;padding:16px 26px;
  border-radius:8px;border:1.5px solid transparent;cursor:pointer}
.btn:hover{text-decoration:none}
.btn-red{background:var(--red);color:#fff;box-shadow:0 4px 14px rgba(200,16,46,.28)}
.btn-red:hover{background:var(--red-d)}
.btn-royal{background:var(--royal);color:#fff}
.btn-royal:hover{background:var(--royal-d)}
.btn-line{border-color:var(--royal);color:var(--royal);background:transparent}
.btn-line:hover{background:var(--royal);color:#fff}
.btn-ghost{border-color:rgba(255,255,255,.6);color:#fff}
.btn-ghost:hover{background:#fff;color:var(--royal)}

/* ---------- topline + header ---------- */
.topline{background:var(--royal-d);color:#fff;font-family:var(--d);font-size:13px}
.topline-in{display:flex;justify-content:space-between;align-items:center;gap:14px;min-height:44px;
  flex-wrap:wrap;padding-top:5px;padding-bottom:5px}
.tl-tags{display:flex;gap:7px;flex-wrap:wrap}
.tl-r{display:flex;align-items:center;gap:16px}
.tl-hrs{color:rgba(255,255,255,.75)}
.tl-ph{font-weight:800;color:#fff;font-size:15px}
.hd{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.97);
  backdrop-filter:saturate(180%) blur(10px);border-bottom:1px solid var(--line)}
.hd-in{display:flex;align-items:center;justify-content:space-between;gap:18px;min-height:78px}
.brand{display:flex;align-items:center;gap:12px}
.brand:hover{text-decoration:none}
.brand-logo{width:52px;height:52px;border-radius:10px}
.brand-t{display:flex;flex-direction:column;line-height:1.15}
.brand-t b{font:800 20px/1.1 var(--d);color:var(--royal)}
.brand-t i{font:500 11px/1.3 var(--m);font-style:normal;color:var(--steel);letter-spacing:.06em;
  text-transform:uppercase;margin-top:3px}
.nv>ul{display:flex;list-style:none;margin:0;padding:0;gap:2px;font-family:var(--d)}
.nv>ul>li{position:relative}
.nv>ul>li>a{display:block;padding:10px 11px;font-weight:600;font-size:15px;color:var(--ink);
  border-radius:8px}
.nv>ul>li>a:hover,.nv>ul>li>a.on{color:var(--royal);background:var(--paper);text-decoration:none}
.nv-home{display:none}
.dd{position:absolute;top:100%;left:0;min-width:250px;background:#fff;border:1px solid var(--line);
  border-radius:10px;box-shadow:var(--shadow-lg);padding:8px;opacity:0;visibility:hidden;
  transform:translateY(6px);transition:.16s ease}
.dd::before{content:"";position:absolute;left:0;right:0;top:-10px;height:10px}
.nv>ul>li.has:hover .dd,.nv>ul>li.has:focus-within .dd{opacity:1;visibility:visible;transform:none}
.dd ul{list-style:none;margin:0;padding:0}
.dd a{display:block;padding:10px 12px;border-radius:7px;font-size:15px;color:var(--ink)}
.dd a:hover{background:var(--paper);color:var(--royal);text-decoration:none}
/* Desktop: the CTA lives in the HEADER ROW, not inside the nav — the first deploy had it inside
   .nv and it wrapped underneath (Rob's screenshot). .nv-cta only exists in the mobile panel. */
.nv-cta{display:none}
.hd-cta{flex:0 0 auto;white-space:nowrap;padding:14px 22px}
.burger{display:none;flex-direction:column;justify-content:center;gap:5px;background:none;border:0;
  padding:10px;cursor:pointer;min-width:44px;min-height:44px}
.burger span{width:24px;height:2.5px;background:var(--royal);border-radius:2px}

/* ---------- hero ---------- */
.hero{background:var(--royal);color:#fff;position:relative;overflow:hidden}
/* road-line texture: a single dashed centre line, not a photo we don't have yet */
.hero::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.16;
  background-image:repeating-linear-gradient(105deg,transparent 0 46px,rgba(255,255,255,.9) 46px 52px,transparent 52px 240px)}
.hero::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(900px 600px at 88% 0%,rgba(200,16,46,.35),transparent 62%),
             radial-gradient(700px 500px at 0% 100%,rgba(24,44,110,.8),transparent 66%)}
.hero-in{position:relative;z-index:2;display:grid;grid-template-columns:1.1fr .9fr;gap:56px;
  align-items:center;padding:86px 0 92px}
.hero h1{color:#fff}
.hero .kicker{display:inline-flex;flex-wrap:wrap;gap:8px;margin-bottom:20px}
.hero-lead{font-size:19px;line-height:1.65;color:rgba(255,255,255,.92);max-width:56ch}
.hero-ctas{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px}
.hero-note{font:500 13.5px/1.5 var(--m);color:rgba(255,255,255,.75);margin-top:20px}
.hero-note a{color:#fff;text-decoration:underline}
.hero-card{background:#fff;border-radius:14px;box-shadow:var(--shadow-lg);padding:30px 28px;
  color:var(--ink)}
.hero-card h2{font-size:21px;margin-bottom:16px}
.hero-card ul{list-style:none;margin:0;padding:0;display:grid;gap:13px}
.hero-card li{display:flex;gap:12px;align-items:flex-start;font-size:16px;line-height:1.55}
.hero-card .tag{flex:0 0 auto;margin-top:1px}
.hero-card .hc-foot{margin:18px 0 0;padding-top:16px;border-top:1px solid var(--line);
  font-size:15px;color:var(--steel)}

/* ---------- sections ---------- */
.sec{padding:84px 0}
.sec-paper{background:var(--paper)}
.sec-royal{background:var(--royal);color:#fff}
.sec-royal h2,.sec-royal h3{color:#fff}
.sec-royal p{color:rgba(255,255,255,.92)}
.sec-kraft{background:var(--kraft)}
.sec-head{max-width:820px;margin-bottom:46px}
.sec-head .tag{margin-bottom:14px}
.sec-lead{font-size:18.5px;color:var(--steel);line-height:1.7}
.sec-royal .sec-lead{color:rgba(255,255,255,.85)}

/* ---------- service cards ---------- */
.svc{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.svc a{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:26px 24px;
  color:var(--ink);display:flex;flex-direction:column;gap:10px;transition:.18s ease;
  position:relative}
.svc a:hover{text-decoration:none;transform:translateY(-3px);box-shadow:var(--shadow-lg);
  border-color:var(--royal)}
.svc h3{margin:0;color:var(--royal)}
.svc p{margin:0;font-size:15.5px;color:var(--steel);flex:1}
.svc .more{font:700 14px var(--d);color:var(--red)}

/* ---------- process steps as tags ---------- */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;counter-reset:step}
.step{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:26px 24px;
  box-shadow:var(--shadow)}
.step .tag{margin-bottom:14px}
.step h3{color:var(--ink)}
.step p{font-size:15.5px;color:var(--steel);margin:0}

/* ---------- checklist ---------- */
.list{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:16px;max-width:880px}
.list li{display:flex;gap:14px;align-items:flex-start}
.list .tag{flex:0 0 auto;margin-top:2px}
.list b{display:block;font-family:var(--d);font-weight:700;color:var(--royal);margin-bottom:2px}
.list span{font-size:16px;color:var(--steel);line-height:1.6}

/* ---------- forms ---------- */
.frm{background:#fff;border:1px solid var(--line);border-radius:12px;padding:28px 26px;
  box-shadow:var(--shadow)}
.frm label{display:block;font:600 14px var(--d);color:var(--ink);margin-bottom:14px}
.frm input,.frm select,.frm textarea{display:block;width:100%;margin-top:6px;padding:13px 14px;
  font:400 16px var(--s);color:var(--ink);background:#fff;border:1.5px solid #767F8C;
  border-radius:8px}
.frm input:focus-visible,.frm textarea:focus-visible{outline:3px solid var(--red);outline-offset:1px}
.frm .row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
/* Grid children default to min-width:auto and refuse to shrink below their content — the
   two-column input rows forced the hero card to 402px inside a 390px phone (Rob's 8/12
   go-live screenshot; iOS pans to the overflow that desktop clip hides). min-width:0 lets
   every grid cell actually shrink. */
.hero-in>*,.calc>*,.frm .row>label{min-width:0}
.frm input,.frm select{min-width:0}
.cf-turnstile{max-width:100%}
.frm .hp{position:absolute;left:-9999px;top:-9999px}
.frm-note{font-size:14px;color:var(--steel);margin:14px 0 0}

/* ---------- footer ---------- */
.ft{background:#0E1830;color:rgba(255,255,255,.85);padding:64px 0 40px;font-size:15.5px}
.ft a{color:rgba(255,255,255,.88)}
.ft-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:44px}
.ft-name{font:800 22px var(--d);color:#fff;margin-bottom:8px}
.ft-line{color:rgba(255,255,255,.75);max-width:44ch}
.ft-ph a{font:800 20px var(--d);color:#fff}
.ft-col h2{font:700 13px var(--d);letter-spacing:.12em;text-transform:uppercase;
  color:var(--kraft-d);margin:0 0 14px}
.ft-col ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.ft-verify{margin-top:44px;padding-top:26px;border-top:1px solid rgba(255,255,255,.16)}
.ft-verify-h{font:600 13.5px var(--m);color:rgba(255,255,255,.7);margin-bottom:10px}
.ft-verify-tags{display:flex;gap:9px;flex-wrap:wrap;margin:0}
.ft-legal{margin-top:26px;font-size:13.5px;color:rgba(255,255,255,.55)}

/* ---------- responsive ---------- */
@media (max-width:960px){
  .hero-in{grid-template-columns:1fr;gap:40px;padding:60px 0 66px}
  .svc,.steps{grid-template-columns:1fr 1fr}
  .ft-grid{grid-template-columns:1fr 1fr}
  .burger{display:flex;position:relative;z-index:80}
  .nv{position:fixed;top:0;right:0;bottom:0;width:min(340px,88vw);background:#fff;
    padding:20px 20px calc(110px + env(safe-area-inset-bottom));overflow-y:auto;
    overscroll-behavior:contain;transform:translateX(105%);visibility:hidden;
    transition:transform .22s ease,visibility .22s;box-shadow:var(--shadow-lg);z-index:70}
  .nv.open{transform:none;visibility:visible}
  .nv-home{display:flex;align-items:center;gap:11px;padding:2px 0 16px 2px;margin:0 52px 8px 0;
    border-bottom:2px solid var(--line)}
  .nv-home span{display:flex;flex-direction:column;line-height:1.15}
  .nv-home b{font:800 18px var(--d);color:var(--royal)}
  .nv-home i{font:500 11px var(--m);font-style:normal;color:var(--steel);text-transform:uppercase}
  .nv>ul{flex-direction:column;gap:0}
  .nv>ul>li>a{padding:14px 8px;font-size:17px;border-bottom:1px solid var(--line);border-radius:0}
  .dd{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border:0;
    min-width:0;padding:2px 0 8px 8px}
  .nv-cta{display:block;margin:18px 0 0;width:100%;text-align:center}
  .hd-cta{display:none}
}
@media (max-width:640px){
  .topline .tl-hrs,.topline .tl-tags{display:none}
  .topline-in{justify-content:center}
  .svc,.steps,.frm .row,.ft-grid{grid-template-columns:1fr}
  .sec{padding:56px 0}
  h1{font-size:clamp(34px,9vw,44px)}
  .wrap{padding:0 18px}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}

/* ================= v2: hero form, photo hero, reviews, fleet footer, cbar ================= */
.hero-photo{position:relative}
.hero-photo::before{content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,rgba(14,24,48,.92) 0%,rgba(24,44,110,.82) 45%,rgba(24,44,110,.45) 100%),
             var(--hero-img) center 38%/cover no-repeat;}
.hero-photo::after{display:none}
.qform label{margin-bottom:11px}
.qform input,.qform select{padding:11px 12px;font-size:16px}
.qform .btn{width:100%;margin-top:4px}
.hero-form{background:#fff;border-radius:14px;box-shadow:var(--shadow-lg);padding:26px 24px}
.hero-form h2{font-size:20px;margin-bottom:4px}
.hero-form .hf-sub{font-size:14.5px;color:var(--steel);margin:0 0 16px}
.hero-tags{display:flex;gap:8px;flex-wrap:wrap;margin-top:22px}
.hero-tags .tag-line{font-size:12px}

/* trust strip under the hero */
.strip{background:var(--royal-d);color:#fff;padding:16px 0}
.strip-in{display:flex;gap:28px;align-items:center;justify-content:space-between;flex-wrap:wrap;
  font:600 14px var(--d)}
.strip a{color:#fff;text-decoration:underline;text-underline-offset:3px}
.strip .s-item{display:flex;gap:9px;align-items:center}
.strip .s-item svg{flex:0 0 auto;opacity:.8}

/* service cards with photos */
.svc a .svc-ph{margin:-26px -24px 14px;border-radius:var(--r) var(--r) 0 0;overflow:hidden;
  aspect-ratio:16/9;background:var(--paper)}
.svc a .svc-ph img{width:100%;height:100%;object-fit:cover;transition:.25s ease}
.svc a:hover .svc-ph img{transform:scale(1.04)}

/* reviews */
.revs{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.rev{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:26px 24px;
  box-shadow:var(--shadow);display:flex;flex-direction:column;border-top:4px solid var(--red)}
.rev p{font-size:16px;line-height:1.65;flex:1}
.rev cite{font-style:normal;border-top:1px solid var(--line);padding-top:14px;margin-top:6px}
.rev cite b{display:block;font:700 15px var(--d);color:var(--royal)}
.rev cite span{font:500 12.5px var(--m);color:var(--steel)}
.rev-links{margin-top:26px;font-size:15px}
.pull{max-width:820px;margin:40px auto 0;text-align:center}
.pull p{font-family:var(--d);font-weight:700;font-size:clamp(20px,2.6vw,27px);line-height:1.35;
  color:var(--royal)}
.pull cite{font:500 13.5px var(--m);font-style:normal;color:var(--steel)}

/* photo band */
.band{position:relative;color:#fff;padding:100px 0}
.band::before{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(14,24,48,.9),rgba(24,44,110,.55)),
             var(--band-img) center/cover no-repeat}
.band .wrap{position:relative;z-index:2}
.band h2{color:#fff}
.band p{color:rgba(255,255,255,.92);max-width:60ch}

/* fleet footer */
.ft{background:#0E1830;color:rgba(255,255,255,.82);padding:64px 0 36px;font-size:15.5px}
.ft-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:40px}
.ft-brand img{border-radius:12px;margin-bottom:14px}
.ft-tagline{font:700 15px var(--d);color:var(--kraft-d);margin:0 0 10px}
.ft-social{display:flex;gap:9px;margin:18px 0 0}
.ft-social a{display:flex;align-items:center;justify-content:center;width:34px;height:34px;
  border-radius:50%;color:#fff}
.ft-social a:hover{transform:translateY(-2px)}
.ft-review{display:inline-flex;align-items:center;gap:7px;margin-top:16px;font:600 13.5px var(--d);
  color:#F4C542;border-bottom:1px dashed transparent}
.ft-review:hover{border-bottom-color:currentColor;text-decoration:none}
.ft-addr,.ft-hrs{color:rgba(255,255,255,.75);margin:0 0 10px}
.ft-visit-l{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:8px}
.ft-credit{margin-top:10px;font-size:13.5px;color:rgba(255,255,255,.55)}
.cr-yp{color:#F4C542;font-weight:700}
.cr-ada{color:#7FD1AE;font-weight:700}
.cr-tag{color:rgba(255,255,255,.7);font-style:italic}
.ft-legal{display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;margin-top:26px;
  padding-top:22px;border-top:1px solid rgba(255,255,255,.14);font-size:13.5px;
  color:rgba(255,255,255,.55)}

/* mobile call bar */
.cbar{position:fixed;left:0;right:0;bottom:0;z-index:1500;display:none;gap:10px;
  background:rgba(14,24,48,.97);backdrop-filter:blur(10px);
  border-top:1px solid rgba(255,255,255,.2);
  padding:10px 12px calc(10px + env(safe-area-inset-bottom))}
.cbar a{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;min-height:48px;
  border-radius:9px;font:700 15px var(--d);color:#fff;border:1.5px solid rgba(255,255,255,.25)}
.cbar a:hover{text-decoration:none}
.cbar .cbar-hot{background:var(--red);border-color:var(--red)}
@media (max-width:960px){
  .revs{grid-template-columns:1fr}
  .ft-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  .cbar{display:flex}
  .ft{padding-bottom:120px}
  .ft-grid{grid-template-columns:1fr}
  .strip-in{justify-content:flex-start;gap:12px}
  .hero-photo::before{background-position:70% 38%, center}
}

/* ================= v3: tag mark, ticker, calculator, Q&A, footer chip ================= */
.brand-mark{flex:0 0 auto;filter:drop-shadow(0 1px 2px rgba(24,44,110,.18))}
.brand:hover .brand-mark{transform:translateX(2px);transition:.18s ease}
.ft-logochip{display:inline-block;background:#fff;border-radius:10px;padding:10px 14px;
  margin-bottom:14px;box-shadow:0 2px 10px rgba(0,0,0,.25)}
.ft-logochip img{display:block;width:210px;height:auto}

/* town ticker — motion with a local accent; dies under prefers-reduced-motion via the global kill */
.ticker{background:#fff;border-bottom:1px solid var(--line);overflow:hidden;padding:13px 0}
.ticker-in{display:flex;gap:38px;white-space:nowrap;animation:tick 46s linear infinite;
  font:600 13.5px var(--m);color:var(--steel);letter-spacing:.05em}
.ticker-in span{display:inline-flex;align-items:center;gap:10px}
.ticker-in i{font-style:normal;color:var(--red)}
.ticker:hover .ticker-in{animation-play-state:paused}
@keyframes tick{to{transform:translateX(-50%)}}

/* the calculator */
.calc{display:grid;grid-template-columns:1fr 1.1fr;gap:34px;align-items:start}
.calc-card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:30px 28px;
  box-shadow:var(--shadow-lg)}
.calc-card h3{color:var(--ink);margin-bottom:14px}
.calc-card label{display:block;font:600 14px var(--d);margin-bottom:14px}
.calc-card select{display:block;width:100%;margin-top:6px;padding:13px 14px;font:400 16px var(--s);
  border:1.5px solid #767F8C;border-radius:8px;background:#fff}
.calc-out{background:var(--royal);color:#fff;border-radius:14px;padding:30px 28px;
  box-shadow:var(--shadow-lg)}
.calc-out .co-label{font:600 12px var(--m);letter-spacing:.1em;text-transform:uppercase;
  color:rgba(255,255,255,.7)}
.calc-range{font:900 clamp(34px,4vw,52px)/1.1 var(--d);margin:8px 0 2px;font-variant-numeric:tabular-nums}
.calc-typ{font:500 14px var(--m);color:rgba(255,255,255,.8)}
.calc-out .btn{margin-top:20px}
.calc-disc{font-size:13.5px;color:var(--steel);line-height:1.6;margin-top:18px;max-width:66ch}
.calc-disc a{text-decoration:underline}

/* Q&A — native accordion, styled */
.qa{max-width:880px}
.qa details{background:#fff;border:1px solid var(--line);border-radius:10px;margin-bottom:12px;
  box-shadow:var(--shadow)}
.qa summary{display:flex;gap:14px;align-items:center;cursor:pointer;list-style:none;
  padding:18px 20px;font:700 17px var(--d);color:var(--royal)}
.qa summary::-webkit-details-marker{display:none}
.qa summary .tag{flex:0 0 auto}
.qa summary::after{content:"+";margin-left:auto;font:700 22px var(--d);color:var(--red)}
.qa details[open] summary::after{content:"–"}
.qa .qa-a{padding:0 20px 20px;color:var(--steel);font-size:16.5px;line-height:1.7}
@media (max-width:960px){.calc{grid-template-columns:1fr}}
@media (max-width:640px){.qa .qa-a{padding-left:20px}}


/* ================= v4: logotype, calc detail, blog ================= */
/* the v2 rule set .brand-logo to a 52px square for the old webp — the drawn logotype needs its
   natural size, and this later rule wins the cascade */
.brand-logo{display:block;width:192px;height:49px;border-radius:0}
.nv-home .brand-logo{width:164px;height:42px}
.brand .brand-t{display:none}   /* the logotype carries the words now */
@media (max-width:400px){.brand-logo{width:164px;height:42px}}
.calc-specials{border:1px solid var(--line);border-radius:8px;padding:12px 14px;margin:0}
.calc-specials legend{font:600 13px var(--d);color:var(--steel);padding:0 6px}
.chk{display:inline-flex!important;align-items:center;gap:7px;margin:4px 14px 4px 0!important;
  font:500 15px var(--s)!important;color:var(--ink)}
.chk input{width:17px;height:17px;accent-color:var(--red)}
.calc-notes{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:8px}
.calc-notes li{font:500 13.5px/1.5 var(--m);color:rgba(255,255,255,.85);display:flex;gap:8px}
.calc-notes li::before{content:"\2192";color:var(--kraft-d)}
.calc-send{margin-top:20px;padding-top:18px;border-top:1px solid rgba(255,255,255,.25)}
.calc-send label{color:#fff;font:600 13.5px var(--d);display:block;margin-bottom:12px}
.calc-send input{display:block;width:100%;margin-top:5px;padding:11px 12px;font:400 16px var(--s);
  border:1.5px solid rgba(255,255,255,.4);border-radius:8px;background:#fff;color:var(--ink)}
.calc-send .row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.calc-send .btn{width:100%;margin-top:4px}
.calc-status{font:500 14px var(--m);color:#fff;margin:10px 0 0;min-height:1.2em}

/* blog — the Red Umbrella layout, Paramus skin */
.blog-feat{display:grid;grid-template-columns:1.12fr 1fr;background:#fff;border:1px solid var(--line);
  border-radius:16px;overflow:hidden;margin-bottom:44px;box-shadow:var(--shadow-lg);color:var(--ink)}
.blog-feat:hover{text-decoration:none;transform:translateY(-2px)}
.blog-feat .ph{min-height:300px;background:var(--paper)}
.blog-feat .ph img{width:100%;height:100%;object-fit:cover}
.blog-feat .bd{padding:34px 32px;display:flex;flex-direction:column;gap:12px}
.blog-feat h3{font-size:clamp(22px,2.4vw,30px);margin:0;color:var(--royal)}
.blog-feat p{margin:0;color:var(--steel)}
.bcat{font:600 12px var(--m);letter-spacing:.08em;text-transform:uppercase;color:var(--red)}
.read{font:700 14.5px var(--d);color:var(--red);margin-top:auto}
.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.bcard{background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden;
  display:flex;flex-direction:column;color:var(--ink);transition:.18s ease}
.bcard:hover{text-decoration:none;transform:translateY(-3px);box-shadow:var(--shadow-lg);
  border-color:var(--royal)}
.bcard .ph{aspect-ratio:3/2;overflow:hidden;background:var(--paper)}
.bcard .ph img{width:100%;height:100%;object-fit:cover}
.bcard .bd{padding:20px 22px 22px;display:flex;flex-direction:column;gap:9px;flex:1}
.bcard h3{margin:0;font-size:18.5px;color:var(--royal)}
.bcard p{margin:0;font-size:15px;color:var(--steel);flex:1}

/* post page */
.post-hero{padding-bottom:24px}
.post-hero .tag{margin-bottom:16px}
.post-ph .wrap img{border-radius:14px;box-shadow:var(--shadow-lg);max-height:480px;
  object-fit:cover;width:100%}
.post-body{padding-top:48px}
.prose{max-width:720px;font-size:18px;line-height:1.8}
.prose h2{font-size:clamp(23px,2.6vw,30px);margin:1.6em 0 .5em}
.prose a{text-decoration:underline;text-underline-offset:3px}
.prose strong{color:var(--royal)}
.post-cta{max-width:720px;margin-top:44px;background:var(--paper);border:1px solid var(--line);
  border-radius:12px;padding:24px;display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.post-cta p{margin:0;flex:1 1 100%}
@media (max-width:960px){.blog-feat{grid-template-columns:1fr}.blog-grid{grid-template-columns:1fr}}

/* v6: footer logotype; brand-logo height follows viewBox */
.brand-logo{height:auto}
.ft-logo{display:inline-block;margin-bottom:16px}
.ft-logo .brand-logo{width:250px}

/* v7: hero video sits under the gradient overlays; ::before carries the poster/overlay already */
.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;
  opacity:0;transition:opacity .8s ease}
.hero-video.on{opacity:1}
.hero-photo::before{z-index:1}
.hero-photo .hero-in{z-index:2}

/* v8: 5-step journey, comparison table, chunked form */
.steps-5{grid-template-columns:repeat(5,1fr);gap:16px}
@media (max-width:1100px){.steps-5{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.steps-5{grid-template-columns:1fr}}
.tblwrap{overflow-x:auto}
.cmp{width:100%;border-collapse:collapse;font-size:15.5px;min-width:760px;background:#fff;
  border:1px solid var(--line);border-radius:12px;overflow:hidden}
.cmp th,.cmp td{padding:14px 16px;text-align:left;border-bottom:1px solid var(--line);
  vertical-align:top}
.cmp thead th{background:var(--royal);color:#fff;font-family:var(--d);font-size:14px}
.cmp thead th span{font:500 11px var(--m);color:var(--kraft-d)}
.cmp tbody td:first-child{font-family:var(--d);font-weight:700;color:var(--royal)}
.cmp tbody td:nth-child(2){background:#F3F6FF;font-weight:600}
/* chunked form */
.qform .fstep2{display:none}
.qform.step2 .fstep1{display:none}
.qform.step2 .fstep2{display:block}
.fprog{font:600 12px var(--m);letter-spacing:.08em;color:var(--steel);margin:0 0 12px;
  text-transform:uppercase}
.hero-form .fprog{color:var(--steel)}
.btn-next{width:100%}

/* v9: form status line (conversion-chain handler) */
.frm-status{margin:10px 0 0;font:600 14.5px/1.5 Archivo,sans-serif;color:var(--royal)}

/* v9: checklist + non-allowables pages */
.ck-block{margin:0 0 34px}
.ck-head{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin-bottom:12px}
.ck-head h2{margin:0}
.ck-list{list-style:none;margin:0;padding:0;max-width:70ch}
.ck-list li{margin:0 0 2px}
.ck{display:flex;gap:12px;align-items:flex-start;padding:10px 12px;border-radius:8px;cursor:pointer}
.ck:hover{background:#EEF1F7}
.ck input{width:19px;height:19px;margin-top:3px;flex:none;accent-color:var(--royal)}
.ck input:checked + span{color:var(--steel);text-decoration:line-through}
.na-grid{align-items:stretch}
.na-card h2{margin-top:0;font-size:20px}
.na-list{margin:10px 0;padding-left:20px}
.na-list li{margin:0 0 4px}
.na-instead{background:#F3EFE6;border-left:4px solid var(--kraft,#E9DFCE);border-radius:0 6px 6px 0;padding:10px 14px;font-size:15px}
@media print{
  header,footer,.cbar,.noprint,#pm-a11y-trigger,#pm-chat-btn,#pm-chat-box,.skip{display:none!important}
  .ck:hover{background:none}
  body{background:#fff}
  .post-hero{padding:0}
  .sec{padding:8px 0}
  .ck-block{break-inside:avoid}
}

/* v10: Google G chip on the review link (white ground so the four brand colors read on navy) */
.ft-gchip{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;background:#fff;border-radius:50%;flex:none}

/* v11: photo strips (small source images — tiles, never banners) */
.pstrip{display:flex;gap:16px;flex-wrap:wrap;margin:26px 0}
.pstrip-t{margin:0;flex:1 1 260px;max-width:430px}
.pstrip-t img{width:100%;height:250px;object-fit:cover;border-radius:12px;display:block;box-shadow:0 3px 14px rgba(17,24,39,.12)}
@media (max-width:640px){.pstrip-t{flex:1 1 46%;max-width:none}.pstrip-t img{height:160px}}
@media print{.pstrip{display:none}}

/* v13: widget hide/restore (fleet pattern) + legal link row */
body.pm-hide-ada #pm-a11y-trigger{display:none!important}
.ft-restore{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;padding:16px 0 2px}
.restore-pill{display:inline-flex;align-items:center;gap:8px;color:#BFD0F5;font-size:13.5px;
  padding:7px 14px;border:1px solid rgba(191,208,245,.35);border-radius:100px;cursor:pointer}
.restore-pill:hover{background:rgba(191,208,245,.12);text-decoration:none}
.ft-legal-l{list-style:none;display:flex;gap:18px;margin:8px 0 0;padding:0;flex-wrap:wrap}
.ft-legal-l a{color:rgba(255,255,255,.75);font-size:12.5px}

/* v14: mobile widget choreography + overflow containment.
   - clip, NOT hidden: overflow-x:hidden makes body a scroll container and silently kills every
     position:sticky on the page (the Mills lesson, learned twice).
   - The a11y trigger and chat launcher must clear the always-on .cbar under 640px. The engine
     injects its own styles at runtime, so the stylesheet needs `body #pm-a11y-trigger`
     specificity to win. */
html,body{overflow-x:clip}
@media (max-width:640px){
  body #pm-a11y-trigger{left:12px!important;transition:bottom .26s ease}
  body.has-cbar #pm-a11y-trigger{bottom:92px!important}
  body{padding-bottom:64px}
}

/* v15: cbar auto-hide on scroll (Mills choreography). The bar slides off while scrolling down and
   returns on scroll-up, near the top, and at the bottom. Widgets ride via body.has-cbar —
   animating `bottom`, never transform (the hover lift and the a11y engine both own transform). */
.cbar{transition:transform .26s ease}
.cbar.down{transform:translateY(115%)}
@media (prefers-reduced-motion:reduce){.cbar{transition:none}}

/* v16: law-firm legal pages + human sitemap */
.ltoc{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.ltoc-chip{display:inline-block;padding:7px 14px;border:1.5px solid var(--royal);color:var(--royal);border-radius:100px;font:600 13px Archivo,sans-serif;text-decoration:none}
.ltoc-chip:hover{background:var(--royal);color:#fff;text-decoration:none}
.lnum{font:600 13px 'IBM Plex Mono',monospace;letter-spacing:3px;color:var(--red);margin:0 0 4px}
.ltbl{width:100%;border-collapse:collapse;margin:18px 0;font-size:15px}
.ltbl th{text-align:left;background:var(--royal);color:#fff;padding:10px 14px;font:700 12.5px Archivo,sans-serif;letter-spacing:.5px;text-transform:uppercase}
.ltbl td{padding:11px 14px;border-bottom:1px solid #DFE3EA;vertical-align:top;line-height:1.55}
.ltbl tr td:first-child{font-weight:700;color:var(--ink);white-space:nowrap}
.lcheck{list-style:none;margin:16px 0;padding:0;max-width:72ch}
.lcheck li{padding:12px 0 12px 30px;border-bottom:1px solid #E5E8EF;position:relative;line-height:1.6}
.lcheck li::before{content:"\2713";position:absolute;left:2px;top:12px;color:var(--red);font-weight:900}
.lcheck li b{display:block;color:var(--ink);margin-bottom:2px}
.lcheck li span{color:var(--steel);font-size:15px}
.lupdated{margin-top:30px;padding:14px 18px;background:#F3EFE6;border-left:4px solid var(--red);border-radius:0 6px 6px 0;font-size:14px;max-width:70ch}
.smap-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.smap-chip{display:inline-flex;align-items:center;gap:8px;padding:8px 15px;border:1.5px solid var(--royal);color:var(--royal);border-radius:100px;font:600 13.5px Archivo,sans-serif;text-decoration:none}
.smap-chip b{background:var(--royal);color:#fff;border-radius:100px;padding:1px 9px;font-size:12px}
.smap-chip:hover{background:var(--royal);color:#fff;text-decoration:none}
.smap-list{list-style:none;margin:14px 0 0;padding:0;max-width:74ch}
.smap-list li{padding:11px 0;border-bottom:1px solid #E5E8EF}
.smap-list a{font:700 16.5px Archivo,sans-serif;color:var(--royal)}
.smap-list span{display:block;color:var(--steel);font-size:14.5px;margin-top:2px}
@media (max-width:640px){.ltbl tr td:first-child{white-space:normal}}

/* ---------- v21: exit-intent panel (Mills port, royal/red) ---------- */
.pm-exit{position:fixed;inset:0;z-index:100002;display:flex;align-items:center;justify-content:center;
  padding:24px;opacity:0;transition:opacity .2s ease}
/* while it is open, nothing else floats over the page */
body.pm-exit-open .cbar,
body.pm-exit-open #pm-chat-btn,
body.pm-exit-open #pm-chat-box,
body.pm-exit-open #pm-a11y-trigger{display:none!important}
.pm-exit.open{opacity:1}
.pm-exit-bd{position:absolute;inset:0;background:rgba(17,24,39,.6);backdrop-filter:blur(3px)}
.pm-exit-box{position:relative;max-width:540px;width:100%;background:#fff;border-radius:14px;
  box-shadow:0 30px 80px rgba(24,44,110,.4);padding:36px 38px 30px;
  max-height:calc(100vh - 48px);max-height:calc(100dvh - 48px);overflow-y:auto;
  transform:translateY(14px) scale(.985);transition:transform .22s cubic-bezier(.2,.8,.3,1)}
.pm-exit.open .pm-exit-box{transform:none}
.pm-exit-x{position:sticky;float:right;top:0;margin:-8px -12px 0 0;width:40px;height:40px;border:0;
  background:#fff;font-size:26px;line-height:1;color:var(--steel);cursor:pointer;border-radius:50%;z-index:1}
.pm-exit-x:hover{background:var(--paper);color:var(--royal)}
.pm-exit-eb{display:inline-flex;align-items:center;gap:9px;font:600 12px/1 var(--m);
  letter-spacing:.14em;text-transform:uppercase;color:var(--red);margin-bottom:12px}
.pm-exit-eb::before{content:"";width:24px;height:2px;background:var(--red)}
.pm-exit-box h2{font-size:clamp(24px,3vw,30px);margin-bottom:10px}
.pm-exit-box p{font-size:15.5px;color:var(--steel);margin-bottom:18px}
.pm-exit-note{font-size:14px;margin:14px 0 0!important}
.pm-exit-frm{margin-top:4px}
.pm-exit-frm label{font-size:13px}
/* 16px inputs: below that iOS zooms on focus and pushes the submit off-screen */
.pm-exit-frm input{padding:10px 12px;font-size:16px}
.pm-exit-frm .row{gap:10px;margin-bottom:6px}
.pm-exit-frm .btn{width:100%;margin-top:10px}

/* ---------- v24: round-2 audit fixes ---------- */
/* Turnstile renders ~70px after api.js runs — reserve the space so nothing below shifts */
.cf-turnstile{min-height:70px}
/* /non-allowables/ card grid: .cols2/.card were emitted by build_guides but never defined */
.cols2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media (max-width:700px){.cols2{grid-template-columns:1fr}}
.card{background:#fff;border:1px solid var(--line);border-radius:12px;padding:22px 20px;
  box-shadow:var(--shadow)}
/* calculator contact row: collapse on the narrowest phones instead of squeezing to 134px */
@media (max-width:400px){.calc-send .row{grid-template-columns:1fr}}