/* WOLFCREST COMMERCIAL v3.
   Art direction: editorial and photographic, PAPER-FIRST. Dark is used exactly
   once, as punctuation under the hero, not as a premium signal. One warm accent
   drawn from the photography rather than a corporate blue. Layout is asymmetric
   by intent: uneven columns, a text-only pause, full-bleed image interruptions.
   Cards exist ONLY where selection is functional.

   ⛔ Palette is generated from a validated table in the build step. Do not
   hand-add a raw hex below. */

:root{
  --paper:#FBFAF8;
  --paper-2:#F3F2EE;
  --paper-3:#E9E7E1;
  --sage:#E7ECE0;
  --sage-2:#CFDAC0;
  --sage-ink:#3A4632;
  --cool:#EAEDEF;
  --ink:#14171A;
  --ink-2:#474D53;
  /* Muted ink. #6B7178 cleared 4.5:1 on paper only (4.73) and failed on every
     tinted surface in the palette: paper-2 4.40, sage 4.10, paper-3 and
     brass-soft 3.99. #5A6068 clears 4.5:1 on ALL six surfaces, worst case
     5.13 on paper-3. Do not lighten without re-running the surface matrix. */
  --ink-3:#5A6068;
  --line:#E0DED8;
  --line-2:#C4C1B9;
  --brass:#A9762F;
  /* Readable brass. --brass itself is 3.28:1 on the hero and 3.78 on paper, so
     it fails 4.5 as TEXT. Measured across every surface an eyebrow can sit on:
     #7A541F gives 5.61 hero, 6.46 paper, 6.02 paper-2, 5.61 sage.
     ⛔ Do not use --brass for small text. Do not lighten this without re-running
     the surface matrix. */
  --brass-ink:#7A541F;
  --brass-soft:#EFE6D7;
  --on-ink:#FFFFFF;
  --on-ink-2:#B9BCBF;
  --err:#8C2A17;

  --r-pill:999px;
  --r-card:20px;
  --r-img:16px;
  --maxw:1280px;
  --gutter:26px;
  --measure:58ch;
}

*{box-sizing:border-box;}
html{scroll-padding-top:clamp(96px,11vh,124px);-webkit-text-size-adjust:100%;}
body{margin:0;background:var(--paper);color:var(--ink);
  font-family:"Figtree",system-ui,sans-serif;
  font-size:16.5px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden;}

/* Display face carries the character. Body face stays quiet. */
/* Light serif display. Weight 300 with a near-1.0 line height is what makes
   these headings read as editorial rather than as a product-page hero. */
h1,h2,h3{font-family:"Newsreader",Georgia,serif;font-weight:300;
  color:var(--ink);margin:0;text-wrap:balance;letter-spacing:-0.006em;}
/* Display scale measured against the reference: its h1 runs 56-64px at weight
   300 with line-height EQUAL to the font size, and its section h2 runs 48-64px.
   Ours were h1 54px and h2 38px. The h2 was the real gap: small section
   headings are what made the page read as a brochure rather than a
   destination. Line-height 1.0 on display type is the other half. */
/* h1 tested at 64 / 68 / 72 against the benchmark's measured 56-64px range.
   All three wrapped to 3 lines, so balance decided it: at 72px the headline
   measured 562px against a 554px photograph beside it, so the type block was
   WIDER than its counterweight and the pair stopped reading as a composition.
   At 64px it is 493px inside a 602px column, which keeps the right-hand air.
   ⛔ Chosen for proportion, not for maximum scale. Do not raise it back. */
h1{font-size:clamp(38px,4.6vw,64px);line-height:1.0;letter-spacing:-0.012em;}
h2{font-size:clamp(30px,3.6vw,52px);line-height:1.0;letter-spacing:-0.01em;}
h3{font-size:clamp(21px,2.2vw,28px);line-height:1.12;}
h4{font-family:"Figtree",sans-serif;font-size:12.5px;font-weight:600;margin:0;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);}
p{margin:0;}
img{max-width:100%;display:block;}
a{color:var(--sage-ink);}
*:focus-visible{outline:3px solid var(--sage-ink);outline-offset:3px;}
.on-dark *:focus-visible{outline-color:#FFFFFF;}

.wrap{max-width:var(--maxw);margin:0 auto;padding-left:var(--gutter);padding-right:var(--gutter);}

/* Section rhythm. There was NO rule for this: sections were spaced only by the
   default margins of whatever heading happened to be first, which is why the
   page read as cramped next to the reference. Whitespace is the single
   cheapest signal of editorial confidence. */
main > section{padding:clamp(72px,9vw,150px) 0;}
main > section + section{padding-top:0;}
main > figure.bleed{margin:clamp(48px,6vw,96px) 0;}
.skip{position:absolute;left:-9999px;}
.skip:focus{left:14px;top:10px;z-index:90;background:var(--paper);padding:12px 18px;color:var(--ink);}

/* The one repeated graphic motif: a hairline with a short rust tick. */
.tick{display:block;height:1px;background:var(--line);position:relative;}
.tick::before{content:"";position:absolute;left:0;top:-1px;width:38px;height:3px;background:var(--sage-ink);}

.label{font-size:12.5px;font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:var(--ink-3);}
.lede{font-size:clamp(16.5px,1.4vw,19px);line-height:1.55;color:var(--ink-2);}

/* ── TOP + NAV. Paper, thin, quiet. Deliberately not a dark slab. ── */

nav.sitenav{background:var(--paper);position:sticky;top:0;z-index:70;}
nav.sitenav .wrap{display:flex;align-items:center;gap:18px;
  min-height:96px;flex-wrap:wrap;}
.wordmark{flex:0 1 auto;}
.menu-btn{flex:0 0 auto;}
.wordmark{display:flex;align-items:center;gap:15px;text-decoration:none;
  color:var(--ink);margin-right:auto;min-height:60px;}
.wordmark .shield{height:54px;width:auto;flex-shrink:0;}
.wordmark .lock{display:flex;flex-direction:column;gap:6px;}
.wordmark .word{height:22px;width:auto;display:block;}
.wordmark .tag{font-size:10px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--ink-3);font-weight:600;line-height:1;}
.navlinks{display:flex;align-items:center;gap:6px;}
.navlinks a{color:var(--ink-2);text-decoration:none;font-size:15px;font-weight:500;
  padding:10px 14px;border-bottom:2px solid transparent;}
.navlinks a:hover{color:var(--ink);}
.navlinks a[aria-current="page"]{color:var(--ink);border-bottom-color:var(--sage-2);}
.navlinks a.btn{margin-left:14px;border-bottom:none;}
.navlinks a.btn-primary{color:var(--on-ink);}
.nav-phone{display:none;}

/* Circular control, no outlined box. */
.menu-btn{display:none;align-items:center;justify-content:center;
  width:56px;height:56px;border-radius:50%;background:var(--ink);border:none;
  color:var(--on-ink);cursor:pointer;padding:0;flex-shrink:0;}
.menu-btn .bars{position:relative;width:19px;height:2px;background:currentColor;display:block;
  box-shadow:0 6px 0 currentColor,0 -6px 0 currentColor;transition:box-shadow .12s;}
.menu-btn .mlabel{position:absolute;left:-9999px;}
nav.sitenav.open .menu-btn .bars{box-shadow:none;transform:rotate(45deg);}
nav.sitenav.open .menu-btn .bars::after{content:"";position:absolute;left:0;top:0;
  width:19px;height:2px;background:currentColor;transform:rotate(90deg);}

@media(max-width:980px){
  nav.sitenav .wrap{min-height:84px;}
  .menu-btn{display:inline-flex;}
  .navlinks{display:none;flex:0 0 100%;width:100%;flex-direction:column;
    align-items:stretch;gap:0;padding:14px 0 30px;}
  nav.sitenav.open .navlinks{display:flex;}
  .navlinks a{padding:20px 2px;border-bottom:1px solid var(--line);
    font-size:23px;font-weight:400;font-family:"Newsreader",Georgia,serif;
    color:var(--ink);letter-spacing:-0.005em;}
  .navlinks a[aria-current="page"]{border-bottom-color:var(--line);}
  .navlinks a.btn{margin-left:0;margin-top:22px;justify-content:center;
    font-family:"Figtree",sans-serif;font-size:15px;font-weight:600;}
  .nav-phone{display:block;margin-top:22px;font-size:15px;color:var(--ink-3);line-height:1.6;}
  /* .navlinks a leaks into this one (it is a descendant), which rendered the
     number at 23px Newsreader with a nav border under a 15px Figtree label.
     Reset every property that rule sets, not just the colour. */
  .nav-phone a{color:var(--ink-2);text-decoration:none;
    font-family:"Figtree",sans-serif;font-size:16px;font-weight:600;
    border-bottom:none;padding:0;display:inline-flex;align-items:center;min-height:44px;}
}
@media(max-width:560px){
  nav.sitenav .wrap{min-height:76px;gap:12px;}
  .wordmark{gap:12px;}
  .wordmark .shield{height:46px;}
  .wordmark .word{height:19px;}
  .wordmark .tag{font-size:8.5px;letter-spacing:.21em;}
  .menu-btn{width:50px;height:50px;}
}

/* ── BUTTONS ─────────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;font:inherit;
  font-size:15px;font-weight:600;letter-spacing:.01em;padding:0 28px;min-height:52px;text-decoration:none;
  border-radius:var(--r-pill);
  border:1.5px solid transparent;cursor:pointer;transition:background .14s,color .14s,border-color .14s;}
.btn-primary{background:var(--ink);color:var(--on-ink);border-color:var(--ink);}
.btn-primary:hover{background:var(--sage-ink);border-color:var(--sage-ink);}
.btn-ghost{background:none;color:var(--ink);border-color:var(--line-2);}
.btn-ghost:hover{border-color:var(--ink);background:var(--paper-2);}
.btn-onDark{background:#FFFFFF;color:var(--ink);border-color:#FFFFFF;}
.btn-onDark:hover{background:var(--paper-3);border-color:var(--paper-3);}
.btn-onDarkGhost{background:none;color:#FFFFFF;border-color:rgba(255,255,255,.4);}
.btn-onDarkGhost:hover{border-color:#FFFFFF;background:var(--line-2);}
.btn-sm{font-size:15px;padding:0 20px;min-height:44px;}
/* Disabled state: a muted solid, not 40% opacity. Opacity made the label
   3.82:1. WCAG exempts inactive controls, but the user still has to be able to
   read what the button will do. White on --ink-3 measures 6.35:1, and the
   grey still reads as inactive against the active button's 17.99:1. */
.btn[disabled]{cursor:not-allowed;}
.btn-primary[disabled]{background:var(--ink-3);border-color:var(--ink-3);color:var(--on-ink);}
.tcta{display:inline-flex;align-items:center;gap:7px;min-height:44px;font-size:15.5px;
  font-weight:600;color:var(--ink);text-decoration:none;border-bottom:2px solid var(--line-2);}
.tcta:hover{border-bottom-color:var(--ink);}
.arrow{font-size:1.05em;line-height:1;}

/* ── HERO. No photograph at the top. A typographic composition on a sage
   field with an original line motif drawn from the brand's own shield
   geometry. Photography now supports sections lower down instead. */
.hero{position:relative;background:var(--sage);overflow:hidden;}
.hero .wrap{position:relative;z-index:2;
  padding-top:clamp(40px,5.4vw,86px);padding-bottom:clamp(36px,4.6vw,72px);}
.hero-eyebrow{font-size:12.5px;font-weight:600;letter-spacing:.15em;
  text-transform:uppercase;color:var(--sage-ink);margin-bottom:18px;}
.hero h1{color:var(--ink);max-width:16ch;}
.hero-sub{color:var(--ink-2);font-size:clamp(16.5px,1.5vw,19px);line-height:1.55;
  margin-top:18px;max-width:50ch;}
.hero-card{background:var(--paper);border-radius:var(--r-card);
  padding:clamp(22px,2.4vw,30px);max-width:min(100%,860px);margin-top:clamp(26px,3vw,40px);
  box-shadow:0 18px 44px rgba(20,23,26,.07);}
@media(max-width:760px){
    .hero h1{max-width:100%;}
}

/* ── MARKETPLACE. A rounded panel on a warm tint band. ───────────── */
.picker{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;}
@media(max-width:820px){
  .picker{grid-template-columns:1fr;}
  }

/* ── MARKETPLACE ENTRIES. A bordered row carrying an original category mark,
   the name, one plain line, the select control and a Learn more path. The
   mark is what makes this a shop rather than a checklist. Selection is
   signalled three ways and never by colour alone: the tick appears, the name
   goes semibold, and the border turns. ──────────────────────────── */
.picker,.picker-form{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;margin-top:16px;}
.pcell{display:flex;flex-direction:column;gap:0;}
.pick{display:flex;align-items:flex-start;gap:13px;cursor:pointer;flex:1;
  padding:18px 18px 14px;background:var(--paper);
  border:1px solid var(--line-2);border-radius:var(--r-img);
  transition:background .13s,border-color .13s;}
.pick:hover{background:var(--paper-2);border-color:var(--ink-3);}
.pick.on{background:var(--sage);border-color:var(--sage-ink);}
.pick-box{appearance:none;-webkit-appearance:none;margin:2px 0 0;flex-shrink:0;
  width:22px;height:22px;border:2px solid var(--line-2);border-radius:6px;
  background:var(--paper);cursor:pointer;position:relative;}
.pick:hover .pick-box{border-color:var(--ink-3);}
.pick-box:checked{background:var(--ink);border-color:var(--ink);}
.pick-box:checked::after{content:"";position:absolute;left:6px;top:2px;width:5px;height:11px;
  border:solid #FFFFFF;border-width:0 2.5px 2.5px 0;transform:rotate(43deg);}
.pick-t{display:flex;flex-direction:column;gap:4px;min-width:0;flex:1;}
.pick-main{font-size:17.5px;font-weight:500;color:var(--ink);line-height:1.25;}
.pick.on .pick-main{font-weight:600;}
.pick-sub{font-size:14.5px;color:var(--ink-2);line-height:1.4;}
.pick-ico{width:46px;height:auto;flex-shrink:0;align-self:flex-start;opacity:.9;}
.pick-more{display:inline-flex;align-items:center;gap:6px;align-self:flex-start;
  min-height:44px;padding:0 4px;margin-top:2px;font-size:14.5px;font-weight:600;
  color:var(--ink-2);text-decoration:none;border-bottom:2px solid transparent;}
.pick-more:hover{color:var(--ink);border-bottom-color:var(--ink);}
.pick-hint{font-size:15px;color:var(--ink-3);margin:0;}
.pick-lead{font-size:16px;color:var(--ink-2);margin-top:24px;}
.pick-count{font-variant-numeric:tabular-nums;}
.picker-form.cols-1{grid-template-columns:minmax(0,1fr);}
.picker-form.cols-2{grid-template-columns:repeat(2,minmax(0,1fr));}
.picker-form.cols-3{grid-template-columns:repeat(3,minmax(0,1fr));}
.pick-act{display:flex;flex-wrap:wrap;align-items:center;gap:16px;margin-top:22px;}
@media(max-width:820px){
  .picker,.picker-form,.picker-form.cols-1,.picker-form.cols-2,.picker-form.cols-3{
    grid-template-columns:1fr;gap:10px;}
  .pick-act .btn{width:100%;}
}

/* Category blocks: two plain rows, not feature cards. */
.cats{border-top:1px solid var(--line);}
.cat{display:grid;grid-template-columns:minmax(0,.44fr) minmax(0,1fr) auto;
  gap:clamp(16px,3vw,44px);align-items:center;padding:clamp(24px,3vw,40px) 0;
  border-bottom:1px solid var(--line);}
.cat h2{font-size:clamp(23px,2.4vw,31px);}
.cat p{color:var(--ink-2);font-size:16.5px;max-width:52ch;}
@media(max-width:820px){
  .cat{grid-template-columns:1fr;gap:12px;}
  .cat .btn{justify-self:start;}
}

/* Verified facts, one compressed row. */
.fctrow{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,3vw,40px);
  padding-top:clamp(30px,3.4vw,48px);}
.fctrow p{color:var(--ink-2);font-size:16px;}
.fctrow strong{display:block;color:var(--ink);font-weight:650;margin-bottom:5px;}
@media(max-width:820px){.fctrow{grid-template-columns:1fr;gap:16px;}}

/* ── SECTION RHYTHM. Deliberately uneven. ─────────────────────── */

/* Asymmetric split: narrow image, wide copy, or the reverse. */
.split{padding-top:clamp(44px,5.4vw,84px);padding-bottom:clamp(44px,5.4vw,84px);}
.split .wrap{display:grid;gap:clamp(26px,4.4vw,68px);align-items:center;}
.split-a .wrap{grid-template-columns:minmax(0,.62fr) minmax(0,1fr);}
.split-b .wrap{grid-template-columns:minmax(0,1fr) minmax(0,.86fr);}
.split-b .split-img{order:2;}
.split-img img{width:100%;height:auto;border-radius:var(--r-img);}
.split-copy{max-width:46ch;}
.split-copy h2{margin-top:14px;}
.split-copy p{margin-top:18px;color:var(--ink-2);}
.split-copy .split-act{margin-top:26px;display:flex;flex-wrap:wrap;gap:12px;align-items:center;}
.split-copy .tick{max-width:120px;}
@media(max-width:860px){
  .split-a .wrap,.split-b .wrap{grid-template-columns:1fr;}
  .split-b .split-img{order:0;}
}

.bleed{padding:0;}
.bleed img{width:100%;height:clamp(220px,32vw,420px);object-fit:cover;}
.bleed .wrap-img{max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter);}
.bleed .wrap-img img{border-radius:var(--r-img);}
.bleed figcaption{max-width:var(--maxw);margin:12px auto 0;padding:0 var(--gutter);
  font-size:14px;color:var(--ink-3);}

/* Inline process: editorial sentence, not a card row. */

/* A small, honest facts block. Text, not boxes. */

/* Closing action, on paper not a dark band. */

/* ── PAGE HEAD, type only. No dark slab. ─────────────────────── */
.phead{padding-top:clamp(34px,4.4vw,66px);padding-bottom:clamp(26px,3vw,42px);}
.crumbs{font-size:14.5px;color:var(--ink-3);margin:0 0 18px;}
.crumbs a{color:var(--ink-2);text-decoration:none;display:inline-flex;align-items:center;min-height:44px;}
.crumbs a:hover{color:var(--ink);}
.crumbs .sep{color:var(--ink-3);margin:0 10px;}
/* Breadcrumbs on the light sage band. The band is lighter than paper, so the
   default muted ink drops to 4.10:1 there. Measured, not eyeballed. */
.crumbs-lt{color:var(--ink-2);}
.crumbs-lt a{color:var(--sage-ink);}
.crumbs-lt a:hover{color:var(--ink);}
.crumbs-lt .sep{color:var(--ink-3);}
.phead h1{font-size:clamp(40px,5.6vw,78px);max-width:16ch;}
.phead .lede{margin-top:20px;max-width:50ch;}
.phead .hero-act{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px;}

/* ── INQUIRY ─────────────────────────────────────────────────── */
.form-shell{max-width:760px;}
.progress{display:flex;gap:5px;margin-bottom:32px;}
.progress .pip{flex:1;height:2px;background:var(--line-2);}
.progress .pip.on{background:var(--sage-ink);}
.fstep{display:none;}
.fstep.active{display:block;}
.fstep h2{font-size:clamp(28px,3.6vw,44px);}
.fstep .fhint{margin-top:14px;color:var(--ink-2);}
.fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin-top:28px;}
@media(max-width:640px){.fields{grid-template-columns:1fr;}}
.field{display:flex;flex-direction:column;gap:8px;}
.field.full{grid-column:1/-1;}
.field label{font-size:15.5px;font-weight:650;}
.field .opt{font-weight:400;color:var(--ink-3);}
.field input,.field textarea,.field select{font:inherit;font-size:17px;padding:14px 17px;min-height:52px;
  border-radius:14px;
  border:1px solid var(--line-2);background:var(--paper);color:var(--ink);width:100%;}
.field input:hover,.field textarea:hover,.field select:hover{border-color:var(--ink-3);}
.field textarea{min-height:126px;resize:vertical;}
.err{color:var(--err);font-size:16px;margin-top:10px;display:none;font-weight:600;}
.err.show{display:block;}
.err::before{content:"! ";font-weight:700;}
.fnav{display:flex;flex-wrap:wrap;gap:13px;align-items:center;margin-top:30px;}
.fnav .back{background:none;border:none;font:inherit;font-size:15.5px;color:var(--ink-2);
  cursor:pointer;text-decoration:underline;padding:0 6px;min-height:46px;}
.review{border:1px solid var(--line);border-radius:var(--r-card);background:var(--paper-2);padding:26px 28px;margin-top:24px;}
.review dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:13px 24px;}
.review dt{font-weight:650;color:var(--ink-2);font-size:15.5px;}
.review dd{margin:0;font-size:16.5px;word-break:break-word;}
.privacy-note{margin-top:20px;font-size:15.5px;color:var(--ink-3);}
/* Phone links that sit inside a sentence cannot be made 44px tall by layout
   without breaking the line. Vertical padding on an inline box grows the tap
   target and leaves line height untouched. 18px text + 26px padding = 44px. */
.pick-hint a[href^="tel:"],.privacy-note a[href^="tel:"],.fhint a[href^="tel:"]{
  padding:13px 4px;margin:0 -4px;}

/* ── FOOTER ──────────────────────────────────────────────────── */
footer{background:var(--ink);color:var(--on-ink-2);padding-top:clamp(48px,5.4vw,76px);
  padding-bottom:42px;font-size:16px;}
footer .cols{display:grid;grid-template-columns:1.7fr 1fr 1fr;gap:clamp(24px,4vw,52px);}
@media(max-width:840px){footer .cols{grid-template-columns:1fr 1fr;}}
@media(max-width:560px){footer .cols{grid-template-columns:1fr;}}
/* Reversed lockup. The supplied wordmark is near-black and was invisible
   on this footer, which is the other half of Wolf's visibility note. */
.footer-logo{height:96px;width:auto;}
footer h3{color:#FFFFFF;margin:0 0 12px;font-family:"Inter Tight",sans-serif;font-size:13px;
  font-weight:650;letter-spacing:.13em;text-transform:uppercase;}
footer ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px;}
footer a{color:var(--on-ink-2);text-decoration:none;display:inline-flex;align-items:center;min-height:44px;}
footer a:hover{color:#FFFFFF;text-decoration:underline;}
.foot-sub{color:var(--on-ink-2);font-size:15.5px;}
/* ⛔ CA Ins Code 1726: all four elements render at the SAME size. Do not
   shrink, split or move any part of this block. */
footer .legal{margin-top:clamp(32px,3.6vw,52px);padding-top:26px;border-top:1px solid rgba(255,255,255,.16);
  display:flex;flex-direction:column;gap:12px;}
footer .legal p{font-size:16px;line-height:1.6;color:var(--on-ink-2);max-width:104ch;}
footer .legal .license{color:#FFFFFF;}

/* Verified coverage lines. A plain scannable list, no cards, no claims
   attached to any item. */
.lines{list-style:none;margin:clamp(24px,3vw,38px) 0 0;padding:0;display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));gap:0;
  border-top:1px solid var(--line);}
.lines li{display:flex;flex-direction:column;gap:3px;padding:18px 20px 18px 0;
  border-bottom:1px solid var(--line);}
.ln-name{font-size:17.5px;color:var(--ink);}
.ln-x{font-size:14.5px;color:var(--ink-3);}

/* Employer-oriented category sections on Employee Benefits. Two columns of
   process, not a product grid: a benefits buyer needs to know what to bring and
   what happens, which is a different information need from the P&C line list. */
.prep-lede{margin-top:14px;max-width:62ch;}
.prep{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(26px,4vw,64px);margin-top:clamp(28px,3.4vw,44px);}
.prep h3{font-size:15px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-3);margin:0 0 16px;}
/* ⛔ CLIENT-OBSERVED DEFECT, Wolf: "what is up with these weird lines".
   ROOT CAUSE, measured not guessed: every li carried border-top and the last
   carried border-bottom, on TWO INDEPENDENT LISTS OF UNEQUAL LENGTH sitting in
   a two-column grid. Group Health is 5 items against 3, Group Life 4 against 3,
   and the text wraps to different depths, so the rules in the left column could
   never line up with the rules in the right. Measured at 1280px: Group Life
   rows unaligned, columns ending 29px apart, which reads as a mistake rather
   than a device. At 390px the columns stack and the rules become a ladder.
   ⛔ THE FIX IS NOT TO HIDE THE BORDERS. Row rules are the wrong system for
   this content. Separation is now spacing and typography, which cannot
   misalign because there is nothing to align. */
.ready,.next{margin:0;padding:0;list-style:none;}
.ready li,.next li{font-size:18px;line-height:1.55;color:var(--ink);
  padding:0 0 18px;max-width:46ch;}
.ready li:last-child,.next li:last-child{padding-bottom:0;}
.next{counter-reset:step;}
.next li{counter-increment:step;display:flex;gap:16px;}
.next li::before{content:counter(step);flex:0 0 auto;color:var(--brass);
  font-variant-numeric:tabular-nums;font-size:14px;padding-top:4px;}
.prep-cta{margin-top:clamp(28px,3.4vw,44px);}
@media(max-width:720px){.prep{grid-template-columns:1fr;}}
@media(max-width:860px){.lines{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media(max-width:560px){.lines{grid-template-columns:1fr;}}

/* ══ EDITORIAL FIDELITY PASS ══════════════════════════════════════════════
   Benchmark grammar, measured not guessed: display type 56-64px at weight 300
   with line-height 1.0, generous section air, illustration at real scale, and
   a Business / Personal master architecture in the nav. Translated into
   Wolfcrest's own sage-and-brass system. No benchmark copy, artwork, geometry
   or imagery is reproduced. The benchmark is named only in the build notes,
   which do not ship: a reference brand name in a served file is itself a leak. */

/* ── Master architecture: Business / Personal ── */
.branch{position:relative;display:flex;align-items:center;}
.branch-t{color:var(--ink-2);text-decoration:none;font-size:15px;font-weight:500;
  padding:10px 14px;display:inline-flex;align-items:center;min-height:44px;}
.branch > a.branch-t:hover{color:var(--ink);}
.branch-menu{position:absolute;top:100%;left:0;min-width:232px;background:var(--paper);
  border:1px solid var(--line);border-radius:12px;padding:8px;z-index:60;
  display:none;box-shadow:0 18px 44px rgba(20,23,26,.10);}
.branch:hover .branch-menu,.branch:focus-within .branch-menu{display:block;}
.branch-menu a{display:flex;align-items:center;min-height:44px;padding:8px 12px;
  border-radius:8px;color:var(--ink-2);text-decoration:none;font-size:15px;border-bottom:none;}
.branch-menu a:hover{background:var(--paper-2);color:var(--ink);}
/* ⛔ Personal is a NAMED BRANCH WITH NO PRODUCTS. It is deliberately inert and
   labelled, so the architecture is visible without implying an offering that
   does not exist and has never been approved. Do not add products here. */
.branch-off .branch-t{color:var(--ink-3);cursor:default;}
.branch-note{font-size:12px;color:var(--ink-3);letter-spacing:.04em;margin-left:-8px;}

/* ── Hero: editorial split, type-led, photo as counterweight ── */
.hero-lead .hero-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.92fr);
  gap:clamp(30px,5vw,80px);align-items:center;
  padding-top:clamp(40px,6vw,92px);padding-bottom:clamp(48px,7vw,116px);}
/* ⛔ The measure belongs on the H1, not on its container. `ch` on .hero-copy
   resolves against the BODY font size (17.5px), not the 72px display size, so
   17ch came out ~145px and broke the headline into five words on five lines.
   Same unit trap as the earlier `em` bug. Put ch where the font-size is. */
.hero-lead .hero-copy{max-width:none;}
.hero-lead h1{max-width:13ch;}
.hero-lead .hero-eyebrow{max-width:30ch;}
.hero-lead h1{margin:14px 0 0;max-width:13ch;}
.hero-lead .hero-sub{margin-top:22px;max-width:34ch;font-size:clamp(17px,1.5vw,20px);
  line-height:1.5;color:var(--ink-2);}
.hero-cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:clamp(26px,3vw,40px);}
.hero-shot{margin:0;}
.hero-shot img{width:100%;height:clamp(300px,42vw,520px);object-fit:cover;
  object-position:58% 4%;border-radius:var(--r-img);display:block;}
@media(max-width:900px){
  .hero-lead .hero-split{grid-template-columns:1fr;}
  .hero-lead .hero-copy{max-width:100%;}
  .hero-shot img{height:clamp(240px,58vw,340px);}
}

/* ── Solutions: the main shopping surface. Large illustration is the point. ── */
.sol-sec .label{margin-bottom:16px;}
.sols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(18px,2.2vw,30px);margin-top:clamp(34px,4.4vw,60px);}
.sol{display:flex;flex-direction:column;}
.sol-pick{position:relative;display:flex;flex-direction:column;cursor:pointer;
  border:1px solid var(--line);border-radius:var(--r-card);background:var(--paper);
  overflow:hidden;transition:border-color .14s,box-shadow .14s;height:100%;}
.sol-pick:hover{border-color:var(--line-2);box-shadow:0 14px 40px rgba(20,23,26,.07);}
.sol-pick input{position:absolute;opacity:0;width:1px;height:1px;}
.sol-art{display:block;background:var(--paper-2);}
/* ⛔ aspect-ratio plus the width/height attributes reserve the space before
   the photograph arrives. Without both, the cards painted empty and then
   jumped 291px. Measured on the live site. */
.sol-art img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;}
.sol-body{display:flex;flex-direction:column;gap:10px;
  padding:clamp(20px,2vw,28px) clamp(20px,2vw,28px) clamp(22px,2.2vw,30px);flex:1;}
.sol-name{font-family:"Newsreader",Georgia,serif;font-weight:300;
  font-size:clamp(23px,2vw,29px);line-height:1.08;color:var(--ink);}
.sol-desc{font-size:16.5px;line-height:1.5;color:var(--ink-2);flex:1;}
.sol-sel{display:inline-flex;align-items:center;gap:11px;margin-top:6px;
  font-size:15px;font-weight:600;color:var(--ink-2);min-height:44px;}
.sol-mark{width:22px;height:22px;border:1.5px solid var(--line-2);border-radius:6px;
  flex:0 0 auto;display:inline-block;position:relative;background:var(--paper);}
/* clear selected state, required by the brief */
.sol.on .sol-pick{border-color:var(--sage-ink);box-shadow:0 0 0 1px var(--sage-ink);}
.sol.on .sol-art{background:var(--sage);}
.sol.on .sol-sel{color:var(--sage-ink);}
.sol.on .sol-mark{background:var(--sage-ink);border-color:var(--sage-ink);}
.sol.on .sol-mark::after{content:"";position:absolute;left:7px;top:3px;
  width:6px;height:11px;border:solid var(--on-ink);border-width:0 2px 2px 0;
  transform:rotate(43deg);}
.sol-pick:focus-within{outline:3px solid var(--sage-ink);outline-offset:3px;}
.sol-more{display:inline-flex;align-items:center;min-height:44px;margin-top:12px;
  color:var(--ink-2);text-decoration:none;font-size:15px;font-weight:600;}
.sol-more:hover{color:var(--ink);}
.sol-act{margin-top:clamp(30px,3.4vw,46px);}
.facts-sec{padding-top:0;}
@media(max-width:900px){.sols{grid-template-columns:1fr;}}

/* ── Product pages: editorial hero with the illustration as counterweight ── */
.hero-prod .hero-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.86fr);
  gap:clamp(28px,4.4vw,72px);align-items:center;
  padding-top:clamp(26px,3vw,48px);padding-bottom:clamp(44px,6vw,92px);}
.hero-prod h1{margin:12px 0 0;max-width:15ch;}
.hero-prod .hero-sub{margin-top:20px;max-width:38ch;font-size:clamp(16.5px,1.4vw,19px);
  line-height:1.5;color:var(--ink-2);}
.hero-art{margin:0;}
.hero-art img{display:block;width:100%;height:auto;border-radius:var(--r-img);}
.hero-prod .hero-shot img{width:100%;height:clamp(260px,32vw,420px);object-fit:cover;
  border-radius:var(--r-img);display:block;}
.cat-art{margin-top:clamp(28px,3.4vw,44px);max-width:560px;}
.cat-art img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:var(--r-img);}
.wrap-narrow{max-width:760px;}
@media(max-width:900px){
  .hero-prod .hero-split{grid-template-columns:1fr;}
  .hero-prod h1{max-width:100%;}
}

/* ── Verified lines, grouped for scanning ──────────────────────────────────
   ⛔ NO ROW BORDERS. Groups hold 3, 2 and 4 items, so any horizontal rule
   would misalign across columns, which is precisely the defect the client
   spotted on the benefits page. Spacing separates; nothing can fail to line up. */
.lngrps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(24px,3.4vw,52px);margin-top:clamp(30px,3.6vw,50px);}
/* ⛔ min-height is a GUARD, not a fix. A group title that wrapped to two lines
   pushed its rule below the neighbouring columns' rules, which is the same
   misalignment the client objected to, in a new place. The titles are kept
   short enough to sit on one line; this stops a future edit breaking it. */
.lngrp h3{font-family:"Figtree",sans-serif;font-size:13px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);line-height:1.3;
  margin:0 0 18px;padding-bottom:14px;border-bottom:1px solid var(--line);
  min-height:calc(1.3em + 14px);display:flex;align-items:flex-end;}
.lines-g{display:block;border-top:none;margin:0;}
.lines-g li{display:flex;flex-direction:column;gap:2px;padding:0 0 16px;
  border-bottom:none;}
.lines-g li:last-child{padding-bottom:0;}
@media(max-width:860px){.lngrps{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media(max-width:560px){.lngrps{grid-template-columns:1fr;}}

/* Honeypot. Off-screen rather than display:none, because some bots skip
   display:none fields. Never announced, never tabbable, never autofilled. */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}

/* Conditional quote-detail blocks and the line checkboxes. */
.cond{display:none;}
.cond.on{display:grid;}
.chkgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 18px;margin-top:8px;}
/* Specificity, not order. `.field label` is (0,1,1) and beat `.chk` at (0,1,0),
   so the intended 16px silently never applied to ANY checkbox label, the P&C
   picker included. `.field .chk` is (0,2,0) and wins. Caught by measuring on
   the live page Sept 23 2026, not by reading the CSS. */
.chk,.field .chk{display:flex;align-items:center;gap:10px;min-height:44px;font-size:16px;color:var(--ink);cursor:pointer;}
.chk input{width:20px;height:20px;flex:0 0 auto;accent-color:var(--sage-ink);}
@media(max-width:560px){.chkgrid{grid-template-columns:1fr;}}

/* ── Line-of-business tiles (referral page) ──────────────────
   Mirrors the wholesale quote form's clickable boxes: a row of tiles you click,
   which highlight when selected. STRUCTURE and INTERACTION are replicated; the
   vendor's own colours are NOT, because copying a vendor's branding is a
   different thing from matching how the form works. Selected state uses the
   Wolfcrest sage accent.
   ⛔ The real <input type=checkbox> stays in the DOM and is only visually
   hidden, so the control remains keyboard-operable and screen-reader correct.
   A div-with-onclick would have looked identical and been unusable. */
.tilegrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(132px,1fr));gap:10px;margin-top:8px;}
.tile{position:relative;display:flex;align-items:center;justify-content:center;
  text-align:center;min-height:76px;padding:14px 10px;border:1px solid var(--line-2);
  border-radius:3px;background:var(--paper);color:var(--ink-2);font-size:15px;
  line-height:1.25;cursor:pointer;transition:background .12s,border-color .12s,color .12s;}
.tile input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none;}
.tile:hover{border-color:var(--sage-ink);}
.tile.on{background:var(--sage);border-color:var(--sage-ink);color:var(--sage-ink);font-weight:600;}
.tile:focus-within{outline:2px solid var(--sage-ink);outline-offset:2px;}
@media(max-width:560px){.tilegrid{grid-template-columns:repeat(2,minmax(0,1fr));}}

/* Physical-address block. The source form fences this off with its own heading
   because supplying a mailing address there blocks the quote. Same fence here. */
.subblock{border:1px solid var(--line);border-radius:3px;margin-top:8px;}
.subblock > .sub-h{background:var(--paper-2);padding:12px 16px;font-size:15px;
  color:var(--ink-2);border-bottom:1px solid var(--line);}
.subblock > .fields{padding:16px;}

/* Field-level validation. One error line at the bottom of a long form makes the
   person hunt for which question is wrong, so the message sits on the field. */
.field.bad input,.field.bad select,.field.bad textarea{border-color:var(--err);}
.field-msg{color:var(--err);font-size:14px;line-height:1.4;margin-top:6px;}
.tilegrid.bad{outline:1px solid var(--err);outline-offset:6px;border-radius:3px;}
.req-note{font-size:15px;color:var(--ink-2);margin-top:6px;}

/* ⛔ [hidden] IS ONLY display:none IN THE UA STYLESHEET, so ANY author rule that
   sets display on the element beats it. `.field{display:...}` did exactly that,
   and the result was Contact Options rendering on the PARTNER form, which is the
   one thing the mode split exists to prevent. Caught by measuring the live page,
   not by reading the markup. Do not remove this. */
[hidden]{display:none !important;}

/* ⛔ Grid and flex children default to min-width:auto, so a long value or a
   nested block can push them past their track. That is what put the address
   subblock's fields 1px beyond the viewport at 375. min-width:0 is the fix for
   this whole class of overflow, not a nudge. */
.field,.fields{min-width:0;}
.subblock{max-width:100%;}
.subblock > .fields{margin-top:0;}

/* Form identifier. Two intake forms now share a look, so each states which one
   it is above the heading. Small, quiet, and the first thing read. */
.eyebrow{font-size:14px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--brass-ink);font-weight:600;margin-bottom:10px;}

/* ── Master site: Business / Personal paths + Personal (Medicare). Sept 29 2026 ── */
.paths-sec{padding-top:clamp(40px,5vw,64px);padding-bottom:clamp(20px,3vw,34px);}
.paths2{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2vw,28px);margin-top:18px;}
.path2{display:flex;flex-direction:column;gap:8px;padding:clamp(22px,2.4vw,34px);border:1px solid var(--line);
  border-radius:var(--r-card);background:var(--paper);text-decoration:none;color:var(--ink);
  transition:border-color .14s,box-shadow .14s;min-height:190px;}
.path2:hover,.path2:focus-visible{border-color:var(--line-2);box-shadow:0 14px 40px rgba(20,23,26,.07);outline:none;}
.path2-k{font-size:12.5px;font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:var(--ink-3);}
.path2-t{font-family:"Newsreader",Georgia,serif;font-weight:300;font-size:clamp(24px,2.2vw,31px);line-height:1.1;}
.path2-l{font-size:16px;color:var(--ink-2);}
.path2-go{margin-top:auto;font-size:15.5px;font-weight:600;color:var(--ink);min-height:44px;display:flex;align-items:flex-end;}
.personal-sec .med-card{display:grid;grid-template-columns:1.4fr .8fr;gap:clamp(20px,3vw,48px);align-items:center;
  margin-top:clamp(24px,3vw,40px);padding:clamp(24px,3vw,44px);border:1px solid var(--line);border-radius:var(--r-card);background:var(--paper-2);}
.med-t{font-family:"Newsreader",Georgia,serif;font-weight:300;font-size:clamp(24px,2.2vw,32px);line-height:1.12;color:var(--ink);margin:0 0 12px;}
.med-d{font-size:17px;line-height:1.55;color:var(--ink-2);margin:0;}
.med-note{margin:10px 0 0;font-size:14.5px;color:var(--ink-3);}
@media(max-width:760px){.paths2,.personal-sec .med-card{grid-template-columns:1fr;}}
/* Mobile menu: show each branch's items inline so Medicare (and the two
   business pages) are one tap away, not hidden behind a hover dropdown. */
@media(max-width:980px){
  .navlinks .branch{display:block;}
  .navlinks .branch-menu{display:block !important;position:static;min-width:0;background:transparent;
    border:0;box-shadow:none;padding:0 0 0 18px;}
  .navlinks .branch-menu a{font-size:19px;padding:14px 2px;min-height:48px;}
}

/* ── What we do: Insurance / Business Financing / Payment Solutions. Oct 2 2026 (Wolf). ── */
.areas-sec{padding-top:clamp(24px,3vw,40px);}
.areas{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2vw,28px);margin-top:clamp(24px,3vw,40px);}
.area{display:flex;flex-direction:column;gap:10px;padding:clamp(22px,2.4vw,32px);border:1px solid var(--line);border-radius:var(--r-card);background:var(--paper);scroll-margin-top:110px;}
.area-k{font-size:12.5px;font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:var(--ink-3);margin:0;}
.area-t{font-family:"Newsreader",Georgia,serif;font-weight:300;font-size:clamp(23px,2vw,29px);line-height:1.12;color:var(--ink);margin:0;}
.area-list{margin:6px 0 0;padding-left:1.1em;color:var(--ink-2);font-size:16.5px;line-height:1.7;}
.area-list a{color:var(--ink);font-weight:600;}
.area-note{font-size:16px;color:var(--ink-2);margin:4px 0 0;}
.area-act{display:flex;flex-wrap:wrap;gap:10px;margin-top:auto;padding-top:14px;}
.area-act .btn{min-height:46px;}
@media(max-width:900px){.areas{grid-template-columns:1fr;}}
.area-list a{display:inline-flex;align-items:center;min-height:44px;}
/* Oct 2 2026 QA: with Financing + Payments added, the open mobile menu outgrew a
   phone screen and the page cannot scroll while it is open, so Get Started and the
   phone number fell below the fold. Let the open menu scroll inside the viewport,
   and trim row padding (still >=44px targets). */
@media(max-width:980px){
  nav.sitenav.open{max-height:100dvh;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;}
  .navlinks a{padding:14px 2px;}
  .navlinks .branch-menu a{padding:10px 2px;min-height:44px;}
}

/* ── "What we do" as offers (Dave, Oct 6 2026): the cards blended into the page.
   Sage band behind, white raised cards, brass top accent, brass-ink label.
   Grid: 3 across then 2 across, so the second row has no empty slot. */
.areas-sec{background:var(--sage);padding-top:clamp(44px,5vw,72px);padding-bottom:clamp(48px,5.5vw,80px);margin-top:clamp(20px,3vw,36px);}
.areas-sec .label{color:var(--sage-ink);}
.areas{grid-template-columns:repeat(6,minmax(0,1fr));}
.area{grid-column:span 2;background:#FFFFFF;border:1px solid var(--line);border-top:4px solid var(--brass);
  box-shadow:0 1px 2px rgba(20,23,26,.05),0 10px 28px rgba(20,23,26,.08);transition:transform .16s ease,box-shadow .16s ease;}
.area:nth-child(n+4){grid-column:span 3;}
.area:hover{transform:translateY(-3px);box-shadow:0 2px 4px rgba(20,23,26,.06),0 16px 36px rgba(20,23,26,.12);}
.area-k{color:var(--brass-ink);font-size:13.5px;}
@media(max-width:900px){.areas{grid-template-columns:1fr;}.area,.area:nth-child(n+4){grid-column:auto;}}
@media(prefers-reduced-motion:reduce){.area,.area:hover{transition:none;transform:none;}}

/* Homepage: a shorter opening and clearly separated routes. */
.home-polish .hero-lead{background:var(--sage);border-bottom:1px solid var(--sage-2);}
.home-polish .hero-lead .hero-split{grid-template-columns:minmax(0,1.08fr) minmax(0,1fr);gap:clamp(32px,4.5vw,64px);padding-top:56px;padding-bottom:64px;}
.home-polish .hero-lead h1{max-width:none;font-size:clamp(40px,4.45vw,64px);line-height:1.04;letter-spacing:-.025em;}
.home-polish .hero-lead h1 span{color:var(--sage-ink);}
.home-polish .hero-lead .hero-eyebrow{max-width:none;margin-bottom:22px;font-size:13px;letter-spacing:.13em;}
.home-polish .hero-lead .hero-sub{max-width:43ch;margin-top:24px;font-size:18px;line-height:1.6;}
.home-polish .hero-shot img{height:490px;border-radius:12px;object-position:58% 25%;}
.home-polish .hero-cta{gap:12px;margin-top:30px;}
.home-polish .paths-sec{padding-top:42px;padding-bottom:44px;}
.home-polish .paths2{gap:24px;}
.home-polish .path2{position:relative;border-radius:12px;padding:28px 32px;gap:14px;min-height:240px;}
.home-polish .path2-k{font-size:13px;color:var(--brass-ink);}
.home-polish .path2-k span{margin-right:8px;}
.home-polish .path2-t{font-size:clamp(28px,2.5vw,36px);line-height:1.12;letter-spacing:-.015em;}
.home-polish .path2-go{align-items:center;margin-top:6px;}
.home-polish .path2:focus-visible{outline:2px solid var(--sage-ink);outline-offset:4px;}
.home-polish .areas-sec{margin-top:0;padding-top:64px;padding-bottom:64px;}
.home-polish .areas-sec h2{max-width:20ch;line-height:1.08;}
.home-polish .area{border-radius:12px;border-top-width:3px;box-shadow:0 4px 16px rgba(20,23,26,.04);gap:14px;}
.home-polish .area:hover{transform:none;box-shadow:0 8px 24px rgba(20,23,26,.08);}
.home-polish .area-t{line-height:1.18;}
.home-polish .area-list{line-height:1.6;}
.home-polish .area-act{border-top:1px solid var(--line);margin-top:auto;padding-top:20px;}
.home-polish .area-act .btn{padding-left:16px;padding-right:16px;}
.home-polish .sol-sec{padding-top:80px;}
.home-polish .sol{border-radius:12px;}
.home-polish .personal-sec{padding-bottom:64px;}
.home-polish .personal-sec .med-card{border-radius:12px;}
.home-polish .med-note{font-size:15px;}
.home-polish .home-contact{padding-top:48px;padding-bottom:48px;background:var(--sage);}
.home-contact-inner{display:flex;align-items:center;justify-content:space-between;gap:36px;}
.home-contact h2{font-size:clamp(32px,3.3vw,46px);line-height:1.1;margin-bottom:16px;}
.home-contact p:not(.label){font-size:17px;color:var(--ink-2);max-width:45ch;}
.home-contact-actions{display:flex;flex-direction:column;align-items:flex-start;gap:12px;flex-shrink:0;}
.home-polish .facts-sec{padding-top:48px;padding-bottom:48px;}
@media(max-width:900px){
 .home-polish .hero-lead .hero-split{grid-template-columns:1fr;gap:32px;padding-top:38px;padding-bottom:38px;}
 .home-polish .hero-lead h1{font-size:clamp(40px,6.6vw,58px);}
 .home-polish .hero-shot img{height:clamp(260px,48vw,380px);object-position:58% 30%;}
 .home-polish .hero-lead .hero-sub{max-width:48ch;}
 .home-contact-inner{align-items:flex-start;flex-direction:column;gap:24px;}
}
@media(max-width:560px){
 .home-polish .hero-lead .hero-eyebrow{font-size:12px;letter-spacing:.09em;}
 .home-polish .hero-lead h1{font-size:clamp(36px,10vw,44px);}
 .home-polish .hero-lead .hero-sub{font-size:17px;}
 .home-polish .hero-cta{flex-direction:column;align-items:stretch;}
 .home-polish .hero-cta .btn{justify-content:center;}
 .home-polish .path2{padding:24px;min-height:220px;}
 .home-polish .paths2{gap:16px;}
 .home-polish .areas-sec{padding-top:44px;padding-bottom:44px;}
 .home-polish .sol-sec{padding-top:48px;}
 .home-polish .home-contact{padding-top:36px;padding-bottom:36px;}
}

/* ── Oct 9 2026 revamp (Wolf's Master Implementation Guide §2-4) ──────────────
   "One relationship" homepage section + dedicated service pages. Same tokens as
   the approved system: paper / sage / brass, Newsreader 300 + Figtree. */
.one-sec{padding-top:clamp(56px,6vw,96px);padding-bottom:clamp(56px,6vw,96px);}
main > .one-sec + section{padding-top:clamp(44px,5vw,72px);}
.one-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(20px,4vw,64px);align-items:end;}
.one-head .label{grid-column:1/-1;margin:0;color:var(--brass-ink);}
.one-head h2{margin:0;font-size:clamp(34px,4.2vw,58px);line-height:1.02;letter-spacing:-.02em;}
.one-head .lede{margin:0;max-width:52ch;}
.one-grid{list-style:none;margin:clamp(30px,3.6vw,52px) 0 0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:var(--r-card);overflow:hidden;}
.one-card{background:var(--paper);padding:clamp(22px,2.2vw,30px);display:flex;flex-direction:column;gap:10px;min-height:280px;}
.one-n{font-family:"Newsreader",Georgia,serif;font-weight:300;font-size:clamp(34px,3vw,44px);line-height:1;color:var(--brass-ink);}
.one-k{margin:6px 0 0;font-size:15px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);}
.one-t{margin:0;font-size:16.5px;line-height:1.55;color:var(--ink-2);}
.one-links{margin:auto 0 0;padding-top:12px;display:flex;flex-direction:column;}
.one-links a{display:flex;align-items:center;min-height:44px;color:var(--ink);font-weight:600;font-size:16px;text-decoration:none;border-top:1px solid var(--line);}
.one-links a::after{content:"\2192";margin-left:auto;color:var(--brass-ink);}
.one-links a:hover{color:var(--sage-ink);}
.one-links a:focus-visible{outline:3px solid var(--sage-ink);outline-offset:2px;}
@media(max-width:1100px){.one-grid{grid-template-columns:repeat(2,minmax(0,1fr));}.one-card:last-child{grid-column:1/-1;min-height:0;}}
@media(max-width:700px){.one-head{grid-template-columns:1fr;}.one-grid{grid-template-columns:1fr;}.one-card{min-height:0;}}

/* Service pages */
.svc-solo .hero-split{grid-template-columns:minmax(0,1fr);}
.svc-solo .hero-copy{max-width:820px;}
.svc-solo h1{max-width:20ch;}
.svc-help-in{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1fr);gap:clamp(24px,4vw,64px);align-items:start;}
.svc-help-in h2{margin-top:10px;}
.svc-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--line-2);}
.svc-list li{display:flex;align-items:center;gap:14px;min-height:60px;padding:12px 0;border-bottom:1px solid var(--line);
  font-family:"Newsreader",Georgia,serif;font-weight:400;font-size:clamp(21px,1.9vw,26px);color:var(--ink);}
.svc-list li::before{content:"";flex:0 0 10px;height:10px;border-radius:50%;background:var(--brass);}
main > .svc-extra,main > .svc-medicare{padding:0 0 clamp(56px,6vw,96px);}
.svc-extra-in,.svc-medicare-in{border-radius:var(--r-card);padding:clamp(24px,3vw,40px);display:grid;gap:12px;justify-items:start;}
.svc-extra{scroll-margin-top:110px;}
.svc-extra-in{background:var(--ink);color:#fff;}
.svc-extra-in .label{color:#D9B47A;margin:0;}
.svc-extra-t{margin:0;max-width:62ch;font-size:clamp(17px,1.5vw,20px);line-height:1.55;color:#E7E9EB;}
.svc-extra-in .btn-ghost{color:#fff;border-color:rgba(255,255,255,.55);}
.svc-extra-in .btn-ghost:hover{border-color:#fff;background:rgba(255,255,255,.08);}
.svc-medicare-in{background:var(--sage);}
.svc-medicare-in .label{color:var(--sage-ink);margin:0;}
.svc-medicare-in p{margin:0;font-size:17px;color:var(--ink);}
.svc-steps{list-style:none;margin:20px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2vw,28px);}
.svc-steps li{display:flex;flex-direction:column;gap:8px;padding:clamp(20px,2.2vw,28px);border:1px solid var(--line);border-radius:var(--r-card);background:var(--paper);}
.svc-steps b{font-family:"Newsreader",Georgia,serif;font-weight:400;font-size:clamp(21px,1.8vw,25px);color:var(--ink);}
.svc-steps span:not(.svc-n){font-size:16.5px;line-height:1.55;color:var(--ink-2);}
.svc-n{font-family:"Newsreader",Georgia,serif;font-weight:300;font-size:40px;line-height:1;color:var(--brass-ink);}
main > .svc-start{background:var(--sage);padding:clamp(56px,6vw,96px) 0;}
.svc-start-in{display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1fr);gap:clamp(24px,4vw,64px);align-items:start;scroll-margin-top:90px;}
.svc-start-in .label{color:var(--sage-ink);}
.svc-start-copy h2{margin-top:10px;}
.svc-start-copy p{font-size:17px;color:var(--ink-2);}
.svc-start-copy a{color:var(--ink);font-weight:600;display:inline-flex;align-items:center;min-height:44px;}
.svc-start .form-shell{background:#fff;border-radius:var(--r-card);padding:clamp(20px,2.6vw,36px);border:1px solid var(--line);
  box-shadow:0 1px 2px rgba(20,23,26,.05),0 10px 28px rgba(20,23,26,.08);max-width:none;}
.svc-start .fields{margin-top:0;}
.svc-fine{color:var(--ink-2);}
.svc-done h3{font-family:"Newsreader",Georgia,serif;font-weight:400;font-size:clamp(24px,2.2vw,30px);margin:0 0 10px;}
.svc-done p{font-size:17px;color:var(--ink-2);margin:0;}
.svc-done:focus{outline:none;}
.svc-err:empty{display:none;}
@media(max-width:900px){.svc-help-in,.svc-start-in{grid-template-columns:1fr;}.svc-steps{grid-template-columns:1fr;}}

/* ═══════════════════════════════════════════════════════════════════════════
   v4 OVERHAUL, Oct 9 2026. Wolf's brief: Farther for the interface, HUB for the
   service architecture, Ramp/Stripe for form controls. Measured off farther.com
   the same day: light serif display (theirs Arizona 200-300, ours Newsreader
   300), warm cream #F8F4F0 and charcoal chapters, a soft sky accent #B6D0ED,
   8px-radius buttons, ~112px section rhythm.
   Contrast measured, not eyeballed (Sessions/2026-10-09.md): ink 13.1:1 on
   cream, ink-3 5.55:1 worst case (cream-2), cream on deep navy 16:1, ink on sky
   9.0:1. ⛔ No muted ink on --sky (4.21:1, fails).
   ═══════════════════════════════════════════════════════════════════════════ */
:root{
  --paper:#FCFBFA;
  --paper-2:#F8F4F0;
  --paper-3:#EFE9E2;
  --sage:#F8F4F0;
  --sage-2:#B6D0ED;
  --sage-ink:#12305A;
  --ink:#2A2A2A;
  --ink-2:#474747;
  --ink-3:#5C5C5C;
  --line:#E7E1DA;
  --line-2:#CFC8BF;
  --brass-ink:#12305A;
  --brass-soft:#DCE7F3;
  --sky:#B6D0ED;
  --sky-2:#A4C3E8;
  --sky-soft:#DCE7F3;
  --navy:#12305A;
  --navy-deep:#0E1A2B;
  --r-pill:8px;
  --r-card:14px;
  --r-img:14px;
}

/* Buttons: Farther's rounded rectangle. Dark on light surfaces, sky on dark ones. */
.btn{border-radius:8px;}
.btn-primary{background:var(--ink);color:var(--paper-2);border-color:var(--ink);}
.btn-primary:hover{background:var(--navy);border-color:var(--navy);}
.navlinks a.btn-primary{color:var(--navy-deep);background:var(--sky);border-color:var(--sky);}
.navlinks a.btn-primary:hover{background:var(--sky-2);border-color:var(--sky-2);}
.fx-hero .btn-primary,.fx-close .btn-primary{background:var(--sky);color:var(--navy-deep);border-color:var(--sky);}
.fx-hero .btn-primary:hover,.fx-close .btn-primary:hover{background:var(--sky-2);border-color:var(--sky-2);}
.fx-btn-ghost{background:none;color:var(--paper-2);border-color:rgba(248,244,240,.55);}
.fx-btn-ghost:hover{border-color:var(--paper-2);background:rgba(248,244,240,.08);}
.fx-hero *:focus-visible,.fx-close *:focus-visible{outline-color:var(--sky);}

/* Type: lighter and larger, Farther's scale. */
h2{font-size:clamp(32px,3.9vw,50px);line-height:1.08;letter-spacing:-0.018em;}

/* ── Header + HUB "Solutions" panel ───────────────────────────────── */
nav.fx-nav{background:rgba(252,251,250,.97);border-bottom:1px solid var(--line);
  -webkit-backdrop-filter:saturate(1.2) blur(10px);backdrop-filter:saturate(1.2) blur(10px);}
.fx-nav .nav-tel{font-weight:600;color:var(--ink);}
.fx-mega .branch-menu{left:50%;transform:translateX(-50%);min-width:0;width:min(780px,92vw);
  padding:26px 28px 24px;border-radius:14px;border:1px solid var(--line);
  box-shadow:0 24px 60px -24px rgba(14,26,43,.28);background:var(--paper);}
.fx-mega:hover .branch-menu,.fx-mega:focus-within .branch-menu{display:grid;
  grid-template-columns:1fr 1fr 1.1fr;gap:8px 28px;}
.mega-col{display:flex;flex-direction:column;min-width:0;}
.mega-h{margin:0 0 6px;padding:0 12px;font-size:12.5px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--navy);}
.mega-med{background:var(--paper-2);border-radius:12px;padding:16px 6px 14px;}
.mega-note{margin:4px 0 0;padding:0 12px;font-size:15px;line-height:1.5;color:var(--ink-2);}
@media(max-width:980px){
  .fx-nav .nav-tel{display:none;}
  .fx-mega .branch-menu,.fx-mega:hover .branch-menu,.fx-mega:focus-within .branch-menu{
    display:block !important;transform:none;width:auto;padding:0;border:0;box-shadow:none;background:transparent;}
  .fx-mega > .branch-t{display:none;}
  .mega-col{margin-top:18px;}
  .mega-h{padding:0 2px;}
  .mega-med{background:transparent;padding:0;}
  .mega-note{padding:0 2px;margin-top:10px;}
}

/* ── Sections ─────────────────────────────────────────────────────── */
.fx-sec{padding:clamp(72px,8.8vw,112px) 0;}
.fx-cream{background:var(--paper-2);}
.fx-head{max-width:760px;margin-bottom:clamp(34px,4.4vw,56px);}
.fx-head h2{margin-top:14px;}
.fx-label{margin:0;font-size:12.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--navy);}
.fx-lede{font-size:clamp(17px,1.45vw,20px);line-height:1.6;color:var(--ink-2);max-width:46ch;margin:22px 0 0;}
.fx-cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:clamp(26px,3vw,38px);}
.fx-cta .btn{min-height:52px;padding:0 26px;}

/* Hero: full-bleed photograph, deep-navy veil, cream type. The veil is at least
   .72 wherever text sits, which keeps cream at 6:1+ even over a white pixel. */
.fx-hero{position:relative;overflow:hidden;background:var(--navy-deep);color:var(--paper-2);
  min-height:clamp(560px,80vh,760px);display:flex;align-items:flex-end;}
.fx-hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:62% 40%;}
.fx-hero::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(14,26,43,.9) 0%,rgba(14,26,43,.78) 48%,rgba(14,26,43,.34) 100%);}
.fx-hero-in{position:relative;z-index:2;width:100%;padding-top:clamp(120px,14vw,170px);padding-bottom:clamp(64px,8vw,104px);}
.fx-eyebrow{margin:0;font-size:12.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--sky);}
.fx-hero h1{color:var(--paper-2);font-size:clamp(44px,6.2vw,80px);line-height:1.02;letter-spacing:-0.022em;
  font-weight:300;max-width:15ch;margin:18px 0 0;}
.fx-hero-sub{margin:24px 0 0;max-width:44ch;font-size:clamp(17px,1.5vw,20px);line-height:1.6;color:var(--paper-2);}
@media(max-width:760px){
  .fx-hero::after{background:linear-gradient(180deg,rgba(14,26,43,.55) 0%,rgba(14,26,43,.8) 38%,rgba(14,26,43,.9) 100%);}
  .fx-hero{min-height:620px;}
}

/* Verified facts strip. */
.fx-facts{border-bottom:1px solid var(--line);background:var(--paper);}
.fx-facts-in{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));}
.fx-fact{padding:clamp(26px,3vw,38px) clamp(18px,2.4vw,34px) clamp(26px,3vw,38px) 0;}
.fx-fact + .fx-fact{border-left:1px solid var(--line);padding-left:clamp(18px,2.4vw,34px);}
.fx-fact-k{margin:0;font-family:"Newsreader",Georgia,serif;font-size:22px;font-weight:400;color:var(--ink);}
.fx-fact-t{margin:8px 0 0;font-size:16px;line-height:1.55;color:var(--ink-2);}
@media(max-width:820px){
  .fx-facts-in{grid-template-columns:1fr;}
  .fx-fact,.fx-fact + .fx-fact{border-left:0;padding:22px 0;}
  .fx-fact + .fx-fact{border-top:1px solid var(--line);}
}

/* HUB solution tiles: hairlines, not boxes. */
.fx-tiles{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  column-gap:clamp(22px,3vw,40px);}
.fx-tile{display:flex;flex-direction:column;gap:12px;height:100%;padding:28px 0 34px;border-top:1px solid var(--line-2);
  text-decoration:none;color:var(--ink);}
.fx-tile-k{font-family:"Newsreader",Georgia,serif;font-size:clamp(25px,2.2vw,30px);font-weight:300;line-height:1.15;letter-spacing:-0.01em;}
.fx-tile-t{font-size:16.5px;line-height:1.55;color:var(--ink-2);flex:1;}
.fx-tile-go{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-size:15.5px;font-weight:600;color:var(--navy);}
.fx-tile-go span{transition:transform .2s ease;}
.fx-tile:hover .fx-tile-k,.fx-pcard:hover .fx-tile-k{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px;}
.fx-tile:hover .fx-tile-go span,.fx-pcard:hover .fx-tile-go span{transform:translateX(4px);}
.fx-tile-med{background:var(--sky-soft);border-top-color:transparent;border-radius:14px;padding:28px 26px 30px;}
@media(max-width:980px){.fx-tiles{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media(max-width:620px){.fx-tiles{grid-template-columns:1fr;}.fx-tile-med{margin-top:10px;}}

/* Farther "ecosystem": asymmetric split, numbered rows. */
.fx-split{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(36px,6vw,96px);align-items:start;}
.fx-split-l h2{margin-top:14px;}
.fx-eco{list-style:none;margin:0;padding:0;}
.fx-eco li{display:grid;grid-template-columns:52px minmax(0,1fr);gap:8px;padding:26px 0;border-top:1px solid var(--line-2);}
.fx-eco li:last-child{border-bottom:1px solid var(--line-2);}
.fx-eco-n{font-family:"Newsreader",Georgia,serif;font-size:18px;color:var(--navy);padding-top:4px;}
.fx-eco-k{margin:0;font-family:"Newsreader",Georgia,serif;font-size:clamp(24px,2.1vw,28px);font-weight:300;line-height:1.15;}
.fx-eco-t{margin:8px 0 0;font-size:16.5px;line-height:1.55;color:var(--ink-2);}
.fx-eco-links{display:flex;flex-wrap:wrap;gap:4px 18px;margin:8px 0 0;}
.fx-eco-links a{display:inline-flex;align-items:center;min-height:44px;font-size:15.5px;font-weight:600;color:var(--navy);
  text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px;}
@media(max-width:900px){.fx-split{grid-template-columns:1fr;}}

/* The human advisor. */
.fx-person-in{display:grid;grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);gap:clamp(32px,6vw,96px);align-items:center;}
.fx-person-img{margin:0;}
.fx-person-img img{display:block;width:100%;max-width:440px;height:auto;border-radius:14px;}
.fx-person-copy h2{margin-top:14px;max-width:16ch;}
.fx-sig{margin:26px 0 0;font-size:16px;color:var(--ink-2);line-height:1.5;}
.fx-sig strong{display:block;font-family:"Newsreader",Georgia,serif;font-weight:400;font-size:22px;color:var(--ink);}
.fx-person .btn-ghost{min-height:52px;}
@media(max-width:820px){.fx-person-in{grid-template-columns:1fr;}.fx-person-img img{max-width:340px;}}

/* Personal lines + Medicare. */
.fx-personal{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;}
.fx-pcard{display:flex;flex-direction:column;gap:12px;padding:28px 26px 26px;background:var(--paper);
  border:1px solid var(--line);border-radius:14px;text-decoration:none;color:var(--ink);}
.fx-pcard:hover{border-color:var(--line-2);box-shadow:0 18px 44px -24px rgba(14,26,43,.25);}
.fx-med{margin-top:18px;background:var(--paper);border:1px solid var(--line);border-radius:14px;}
@media(max-width:860px){.fx-personal{grid-template-columns:1fr;}}

/* Consulting + retirement: quiet, two columns, hairlines. */
.fx-more{padding-top:clamp(56px,6vw,80px);padding-bottom:clamp(56px,6vw,80px);}
.fx-more-in{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,72px);}
.fx-more-i{border-top:1px solid var(--line-2);padding-top:24px;}
.fx-more-t{margin:12px 0 0;font-family:"Newsreader",Georgia,serif;font-size:clamp(24px,2.1vw,28px);font-weight:300;line-height:1.2;color:var(--ink);}
.fx-more-i > p:not(.fx-label):not(.fx-more-t){margin:10px 0 0;font-size:16.5px;line-height:1.55;color:var(--ink-2);max-width:46ch;}
.fx-links-row{display:flex;flex-wrap:wrap;gap:4px 22px;margin-top:10px;}
.fx-links-row a{display:inline-flex;align-items:center;min-height:44px;font-weight:600;font-size:15.5px;color:var(--navy);
  text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px;}
@media(max-width:760px){.fx-more-in{grid-template-columns:1fr;}}

/* Dark closing chapter. */
.fx-close{background:var(--navy-deep);color:var(--paper-2);padding:clamp(80px,9vw,120px) 0;}
.fx-close h2{color:var(--paper-2);font-size:clamp(36px,4.6vw,60px);max-width:14ch;}
.fx-close p{margin:20px 0 0;font-size:clamp(17px,1.5vw,20px);line-height:1.6;color:#C9C3BB;max-width:44ch;}

/* ── Inner pages pick up the same language ───────────────────────── */
.hero{background:var(--paper-2);}
.hero-eyebrow,.label{color:var(--navy);}

/* Ramp/Stripe-style form controls. Navy border on focus gives the 3:1 ring
   contrast the pale sky halo alone would not. */
.form-shell{background:var(--paper);border:1px solid var(--line);border-radius:16px;
  padding:clamp(22px,3vw,36px);box-shadow:0 1px 2px rgba(14,26,43,.04),0 18px 44px -26px rgba(14,26,43,.28);}
.field input,.field textarea,.field select{border-radius:10px;background:#FFFFFF;}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--navy);
  box-shadow:0 0 0 3px var(--sky);}
footer{background:#232323;}
/* 15px floor (Role 1b): breadcrumbs were 14.5px, footer column labels 13px. */
.crumbs,.crumbs a,.crumbs .sep{font-size:15px;}
footer h3{font-size:15px;}
/* Medicare card inside the new Personal chapter (its old rules were scoped to .personal-sec). */
.fx-med{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:18px 40px;align-items:center;padding:clamp(24px,3vw,34px) clamp(22px,3vw,36px);}
.fx-med .med-t{margin:0;font-family:"Newsreader",Georgia,serif;font-size:clamp(22px,2vw,27px);font-weight:300;line-height:1.25;color:var(--ink);}
.fx-med .med-d{margin:10px 0 0;font-size:16.5px;line-height:1.55;color:var(--ink-2);max-width:60ch;}
.fx-med .med-act{display:flex;flex-direction:column;align-items:flex-start;gap:10px;}
.fx-med .med-note{margin:0;font-size:15px;color:var(--ink-3);}
@media(max-width:760px){.fx-med{grid-template-columns:1fr;}}
/* An older section rule padded the facts strip like a full chapter. It is a band. */
.fx-facts{padding:0;}

/* ═══════════════════════════════════════════════════════════════════════════
   MOTION SYSTEM, Oct 9 2026 (Farther-level restraint: one cinematic moment,
   everything else quiet). transform + opacity only. Nothing is hidden unless
   script.js has confirmed IntersectionObserver AND no reduced-motion
   preference, by adding html.js-reveal. No JS = everything visible.
   ═══════════════════════════════════════════════════════════════════════════ */
:root{
  --motion-instant:100ms;--motion-fast:160ms;--motion-standard:240ms;--motion-slow:420ms;
  --ease-out:cubic-bezier(0.22,1,0.36,1);--ease-standard:cubic-bezier(0.2,0,0,1);--ease-in-out:cubic-bezier(0.4,0,0.2,1);
  --motion-shift-sm:4px;--motion-shift-md:8px;--motion-shift-lg:12px;
  --motion-stagger:60ms;--motion-stagger-max:180ms;
}

/* Solutions panel: fades and settles 6px instead of popping. visibility (not
   display) keeps hidden links out of the tab order and still lets it animate. */
@media(min-width:981px){
  .fx-mega .branch-menu,.fx-mega:hover .branch-menu,.fx-mega:focus-within .branch-menu{display:grid;grid-template-columns:1fr 1fr 1.1fr;gap:8px 28px;}
  .fx-mega .branch-menu{visibility:hidden;opacity:0;transform:translate(-50%,6px);pointer-events:none;
    transition:opacity 140ms var(--ease-standard),transform 140ms var(--ease-standard),visibility 0s linear 140ms;}
  .fx-mega:hover .branch-menu,.fx-mega:focus-within .branch-menu{visibility:visible;opacity:1;transform:translate(-50%,0);pointer-events:auto;
    transition:opacity 180ms var(--ease-out),transform 180ms var(--ease-out),visibility 0s;}
  .fx-mega.is-closed .branch-menu{visibility:hidden;opacity:0;transform:translate(-50%,6px);pointer-events:none;}
}
.navlinks > a:not(.btn),.branch-t{text-decoration:underline;text-decoration-color:transparent;text-decoration-thickness:1px;
  text-underline-offset:6px;transition:color var(--motion-fast) var(--ease-standard),text-decoration-color var(--motion-fast) var(--ease-standard);}
.navlinks > a:not(.btn):hover,.branch-t:hover{text-decoration-color:currentColor;}

/* Scroll reveals: once, 12px, 420ms, stagger capped at 180ms (set by JS). */
html.js-reveal [data-rv]:not(.rv-in){opacity:0;transform:translateY(var(--motion-shift-lg));}
html.js-reveal [data-rv]{transition:opacity var(--motion-slow) var(--ease-out),transform var(--motion-slow) var(--ease-out);
  transition-delay:var(--rv-delay,0ms);}

/* Hover: 2px lift on real pointers only, same feedback for keyboard focus. */
.btn{transition:background-color var(--motion-fast) var(--ease-standard),border-color var(--motion-fast) var(--ease-standard),color var(--motion-fast) var(--ease-standard);}
.fx-tile,.fx-pcard,.sol-pick{transition:transform var(--motion-standard) var(--ease-out),box-shadow var(--motion-standard) var(--ease-out),border-color var(--motion-standard) var(--ease-out);}
.sol-art{overflow:hidden;}
.sol-art img{transition:transform var(--motion-slow) var(--ease-out);}
@media(hover:hover) and (pointer:fine){
  .fx-tile:hover,.fx-pcard:hover,.sol-pick:hover{transform:translateY(-2px);}
  .sol-pick:hover .sol-art img{transform:scale(1.02);}
}
.fx-tile:focus-visible,.fx-pcard:focus-visible{transform:translateY(-2px);}

/* Form feedback: the field in error says so, not only the line under it. */
.field.bad input,.field.bad select,.field.bad textarea,
.field input[aria-invalid="true"],.field select[aria-invalid="true"],.field textarea[aria-invalid="true"]{
  border-color:var(--err);box-shadow:0 0 0 3px rgba(140,42,23,.14);}
.field input,.field select,.field textarea{transition:border-color var(--motion-fast) var(--ease-standard),box-shadow var(--motion-fast) var(--ease-standard);}
.svc-done:focus{outline:none;}

/* Reduced motion: everything visible, nothing moves. */
@media(prefers-reduced-motion:reduce){
  html.js-reveal [data-rv]:not(.rv-in){opacity:1;transform:none;}
  .fx-mega .branch-menu,.fx-mega:hover .branch-menu,.fx-mega:focus-within .branch-menu{transition:none !important;}
  .fx-tile,.fx-pcard,.sol-pick,.sol-art img,.btn,.field input,.field select,.field textarea,[data-rv]{transition:none !important;}
  .fx-tile:hover,.fx-pcard:hover,.sol-pick:hover,.fx-tile:focus-visible,.fx-pcard:focus-visible{transform:none !important;}
  .sol-pick:hover .sol-art img{transform:none !important;}
}
/* Printing never waits for a scroll that will not happen. */
@media print{html.js-reveal [data-rv]{opacity:1 !important;transform:none !important;}}

/* Hero video layer. Sits between the poster and the navy veil (::after), so
   text contrast is identical with or without it. Fades in only once playing. */
.fx-hero-img{object-position:50% 58%;}
.fx-hero-vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 58%;
  opacity:0;transition:opacity 600ms var(--ease-out);pointer-events:none;}
.fx-hero-vid.is-playing{opacity:1;}
.fx-vid-btn{position:absolute;z-index:3;right:var(--gutter);bottom:22px;display:inline-flex;align-items:center;gap:10px;
  min-height:46px;padding:0 18px;border-radius:8px;border:1px solid rgba(248,244,240,.75);
  background:rgba(14,26,43,.78);color:var(--paper-2);font:inherit;font-size:15px;font-weight:600;cursor:pointer;}
.fx-vid-btn:hover{background:rgba(14,26,43,.85);border-color:var(--paper-2);}
.fx-vid-btn::before{content:"";width:10px;height:12px;border-left:3px solid currentColor;border-right:3px solid currentColor;box-sizing:border-box;}
.fx-vid-btn.is-paused::before{border:0;width:0;height:0;border-top:6px solid transparent;border-bottom:6px solid transparent;border-left:10px solid currentColor;}
.fx-vid-btn[hidden]{display:none;}
@media(prefers-reduced-motion:reduce){.fx-hero-vid{display:none;}.fx-hero-vid{transition:none;}}
/* Phones: pin the hero text to the top, so the heading font arriving late on a
   slow connection shortens the block from the bottom instead of sliding it
   (measured CLS 0.041 -> see Sessions/2026-10-09.md). */
@media(max-width:760px){.fx-hero{align-items:flex-start;}.fx-hero-in{padding-top:clamp(108px,30vw,140px);}}
/* 15px floor (Role 1b) on the older catalogue and picker text the overhaul did
   not touch: line-group labels 13px, line notes and picker subtitles 14.5px.
   Uppercase eyebrow labels (.label, .mega-h, .fx-label) stay as small caps. */
.lngrp h3{font-size:15px;}
.ln-x,.pick-sub,.pick-more{font-size:15px;}

/* ── Hero entrance (Oct 10 2026, Dave: "no animations on the upper part when I reload").
   Every load, every device: the photograph/video settles from 1.06 to 1 over 4.5s
   (under WCAG 2.2.2's 5s, so no pause control is needed for it), and the copy rises
   in, staggered 90ms. CSS-only: if animations are unsupported, everything simply
   shows. The hero image stays the LCP element; text is not hidden from it. */
.fx-hero-media{position:absolute;inset:0;overflow:hidden;}
.fx-hero-media .fx-hero-img,.fx-hero-media .fx-hero-vid{position:absolute;inset:0;}
@keyframes fx-settle{from{transform:scale(1.06);}to{transform:scale(1);}}
@keyframes fx-rise{from{opacity:0;transform:translateY(14px);}to{opacity:1;transform:none;}}
.fx-hero-media{animation:fx-settle 4.5s var(--ease-out) both;}
.fx-hero-in > *{animation:fx-rise 760ms var(--ease-out) both;}
.fx-hero-in > :nth-child(1){animation-delay:120ms;}
.fx-hero-in > :nth-child(2){animation-delay:210ms;}
.fx-hero-in > :nth-child(3){animation-delay:300ms;}
.fx-hero-in > :nth-child(4){animation-delay:390ms;}
.fx-vid-btn{animation:fx-rise 760ms var(--ease-out) 600ms both;}
@media(prefers-reduced-motion:reduce){.fx-hero-media,.fx-hero-in > *,.fx-vid-btn{animation:none !important;}}

/* ═══════════════════════════════════════════════════════════════════════════
   CARDS PASS, Oct 10 2026 (Dave: "text looks embedded in the background, put it
   in a card so users know it's clickable"). References measured the same night:
   HUB "card-pictogram" (tinted panels rotating blue/lavender/aqua, 16px radius,
   40px padding, pictogram, navy title), Farther pillars (tonal cream cards, 12px
   radius, 32/28 padding), Stripe (explicit arrow + action word on every card).
   Tints measured: ink on every tint >= 12:1, navy >= 11:1.
   ═══════════════════════════════════════════════════════════════════════════ */
:root{--tint-1:#EAF1FA;--tint-2:#F2EDE4;--tint-3:#E7F2EF;}
.fx-ico{display:inline-grid;place-items:center;flex:0 0 auto;width:52px;height:52px;border-radius:50%;
  background:#FFFFFF;color:var(--navy);box-shadow:0 1px 2px rgba(14,26,43,.08),0 0 0 1px rgba(18,48,90,.06);}
.fx-ico svg{display:block;}

/* 1. Facts: a floating white panel lifted over the hero's lower edge. */
.fx-facts{background:transparent;border:0;position:relative;z-index:4;margin-top:clamp(-76px,-5.4vw,-44px);}
.fx-facts-in{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));background:#FFFFFF;border-radius:18px;
  border:1px solid var(--line);box-shadow:0 30px 70px -34px rgba(14,26,43,.55),0 2px 8px rgba(14,26,43,.06);}
.fx-fact{display:flex;gap:16px;align-items:flex-start;padding:clamp(24px,2.6vw,34px) clamp(20px,2.4vw,32px);}
.fx-fact + .fx-fact{border-left:1px solid var(--line);padding-left:clamp(20px,2.4vw,32px);}
.fx-fact .fx-ico{width:46px;height:46px;background:var(--tint-1);box-shadow:none;}
.fx-hero-in{padding-bottom:clamp(120px,12vw,168px);}
@media(max-width:820px){
  .fx-facts-in{grid-template-columns:1fr;}
  .fx-fact,.fx-fact + .fx-fact{border-left:0;padding:22px 22px;}
  .fx-fact + .fx-fact{border-top:1px solid var(--line);}
}
@media(max-width:760px){.fx-hero-in{padding-bottom:88px;}}

/* 2. Solution tiles: HUB-style tinted, clickable cards. */
.fx-solutions .fx-tiles{gap:20px;}
.fx-solutions .fx-tile{position:relative;gap:14px;padding:30px 28px 26px;border:1px solid rgba(18,48,90,.07);border-radius:16px;
  background:var(--tint,var(--tint-1));}
.fx-tiles > li:nth-child(3n+1) .fx-tile{--tint:var(--tint-1);}
.fx-tiles > li:nth-child(3n+2) .fx-tile{--tint:var(--tint-2);}
.fx-tiles > li:nth-child(3n+3) .fx-tile{--tint:var(--tint-3);}
.fx-solutions .fx-tile .fx-ico{margin-bottom:6px;}
.fx-solutions .fx-tile-k{font-size:clamp(26px,2.3vw,31px);color:var(--ink);}
.fx-tile-go,.fx-pcard .fx-tile-go{align-self:flex-start;margin-top:6px;padding:0 18px;min-height:46px;border-radius:999px;
  background:#FFFFFF;border:1px solid rgba(18,48,90,.2);color:var(--navy);font-size:15.5px;font-weight:600;
  transition:background-color var(--motion-fast) var(--ease-standard),color var(--motion-fast) var(--ease-standard),border-color var(--motion-fast) var(--ease-standard);}
.fx-tile:hover .fx-tile-go,.fx-tile:focus-visible .fx-tile-go,.fx-pcard:hover .fx-tile-go,.fx-pcard:focus-visible .fx-tile-go{
  background:var(--navy);border-color:var(--navy);color:var(--paper-2);}
.fx-tile:hover .fx-tile-k,.fx-pcard:hover .fx-tile-k{text-decoration:none;}
.fx-solutions .fx-tile-med{background:var(--navy-deep);border-color:var(--navy-deep);padding:30px 28px 26px;color:var(--paper-2);}
.fx-tile-med .fx-tile-k{color:var(--paper-2);}
.fx-tile-med .fx-tile-t{color:#C9C3BB;}
.fx-tile-med .fx-ico{background:rgba(248,244,240,.1);color:var(--sky);box-shadow:0 0 0 1px rgba(248,244,240,.18);}
.fx-tile-med .fx-tile-go{background:var(--sky);border-color:var(--sky);color:var(--navy-deep);}
.fx-tile-med:hover .fx-tile-go,.fx-tile-med:focus-visible .fx-tile-go{background:var(--paper-2);border-color:var(--paper-2);color:var(--navy-deep);}
.fx-tile-med:focus-visible{outline-color:var(--sky);}
@media(hover:hover) and (pointer:fine){
  .fx-solutions .fx-tile:hover,.fx-pcard:hover{transform:translateY(-4px);box-shadow:0 26px 50px -26px rgba(14,26,43,.42);}
}
.fx-solutions .fx-tile:focus-visible,.fx-pcard:focus-visible{transform:translateY(-4px);box-shadow:0 26px 50px -26px rgba(14,26,43,.42);}
@media(max-width:620px){.fx-tile-med{margin-top:0;}}

/* 3. One relationship: each row a white card, number in a badge, links as pills. */
@media(min-width:901px){.fx-one .fx-split-l{position:sticky;top:132px;}}
.fx-eco{display:grid;gap:14px;}
.fx-eco li,.fx-eco li:last-child{border:1px solid var(--line);border-radius:16px;background:#FFFFFF;padding:26px 28px;
  grid-template-columns:56px minmax(0,1fr);box-shadow:0 1px 2px rgba(14,26,43,.04);}
.fx-eco-n{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:var(--tint-1);
  font-size:16px;color:var(--navy);padding-top:0;}
.fx-eco-links{gap:10px;margin-top:14px;}
.fx-eco-links a{text-decoration:none;padding:0 16px;border-radius:999px;border:1px solid rgba(18,48,90,.22);background:#FFFFFF;
  transition:background-color var(--motion-fast) var(--ease-standard),color var(--motion-fast) var(--ease-standard),border-color var(--motion-fast) var(--ease-standard);}
.fx-eco-links a::after{content:"\2192";margin-left:8px;font-weight:600;}
.fx-eco-links a:hover,.fx-eco-links a:focus-visible{background:var(--navy);border-color:var(--navy);color:var(--paper-2);}
@media(max-width:560px){.fx-eco li,.fx-eco li:last-child{grid-template-columns:1fr;padding:22px 20px;}.fx-eco-n{margin-bottom:6px;}}

/* 4. Personal cards: same icon + pill language. */
.fx-pcard{gap:14px;padding:30px 28px 26px;border-radius:16px;}
.fx-pcard .fx-ico{background:var(--tint-1);box-shadow:none;margin-bottom:6px;}
.fx-pcard .fx-tile-k{font-size:clamp(25px,2.2vw,29px);}

@media(prefers-reduced-motion:reduce){
  .fx-solutions .fx-tile:hover,.fx-pcard:hover,.fx-solutions .fx-tile:focus-visible,.fx-pcard:focus-visible{transform:none !important;}
  .fx-tile-go,.fx-eco-links a{transition:none !important;}
}
/* The facts panel now overlaps the hero's lower edge, so the video control moves
   to the top-right corner of the hero where nothing can cover it (WCAG 2.4.11). */
.fx-vid-btn{top:22px;bottom:auto;}

/* "Three ways we help your business" in the same card language (Dave, Oct 10 2026).
   Styling only: selection still runs through .pick-box + .sol.on (script.js). */
.sols .sol:nth-child(3n+1){--tint:var(--tint-1);}
.sols .sol:nth-child(3n+2){--tint:var(--tint-2);}
.sols .sol:nth-child(3n+3){--tint:var(--tint-3);}
.sol-pick{background:var(--tint,var(--tint-1));border:1px solid rgba(18,48,90,.07);border-radius:16px;
  transition:transform var(--motion-standard) var(--ease-out),box-shadow var(--motion-standard) var(--ease-out),border-color var(--motion-standard) var(--ease-out);}
.sol-art{margin:10px 10px 0;border-radius:12px;overflow:hidden;background:rgba(255,255,255,.5);}
.sol-body{padding:22px 24px 24px;gap:12px;}
.sol-name{font-size:clamp(26px,2.3vw,31px);line-height:1.12;}
.sol-desc{font-size:16.5px;line-height:1.55;color:var(--ink-2);}
.sol-sel{align-self:flex-start;gap:10px;margin-top:8px;padding:0 18px 0 14px;min-height:46px;border-radius:999px;
  background:#FFFFFF;border:1px solid rgba(18,48,90,.2);color:var(--navy);font-size:15.5px;
  transition:background-color var(--motion-fast) var(--ease-standard),color var(--motion-fast) var(--ease-standard),border-color var(--motion-fast) var(--ease-standard);}
.sol-mark{width:20px;height:20px;border-radius:6px;border:1.5px solid rgba(18,48,90,.45);background:#FFFFFF;}
.sol-pick:hover .sol-sel{border-color:var(--navy);}
.sol.on .sol-pick{border-color:var(--navy);box-shadow:0 0 0 2px var(--navy),0 22px 44px -26px rgba(14,26,43,.4);}
.sol.on .sol-art{background:transparent;}
.sol.on .sol-sel{background:var(--navy);border-color:var(--navy);color:var(--paper-2);}
.sol.on .sol-mark{background:var(--paper-2);border-color:var(--paper-2);}
.sol.on .sol-mark::after{border-color:var(--navy);left:6px;top:2px;}
.sol-pick:focus-within{outline:3px solid var(--navy);outline-offset:3px;}
.sol-more{align-self:flex-start;margin-top:14px;padding:0 16px;min-height:44px;border-radius:999px;
  border:1px solid rgba(18,48,90,.22);background:#FFFFFF;color:var(--navy);font-size:15px;
  transition:background-color var(--motion-fast) var(--ease-standard),color var(--motion-fast) var(--ease-standard),border-color var(--motion-fast) var(--ease-standard);}
.sol-more .arrow{margin-left:8px;}
.sol-more:hover,.sol-more:focus-visible{background:var(--navy);border-color:var(--navy);color:var(--paper-2);}
@media(hover:hover) and (pointer:fine){.sol-pick:hover{transform:translateY(-4px);box-shadow:0 26px 50px -26px rgba(14,26,43,.42);}
  .sol.on .sol-pick:hover{box-shadow:0 0 0 2px var(--navy),0 26px 50px -26px rgba(14,26,43,.42);}}
.sol-act .btn[disabled]{background:#E7E1DA;border-color:#E7E1DA;color:#474747;}
@media(prefers-reduced-motion:reduce){.sol-pick:hover{transform:none !important;}.sol-sel,.sol-more{transition:none !important;}}
/* Focus ring for keyboard use only, so a mouse click does not draw a second
   outline around the selected border. */
.sol-pick:focus-within{outline:none;}
.sol-pick:has(input:focus-visible){outline:3px solid var(--navy);outline-offset:3px;}
/* DVH quote section (Oct 10 2026) sits in the dark svc-extra panel: its heading takes the panel's light ink. */
.svc-extra-h{color:inherit;margin:10px 0 0;}
.svc-extra-in .hero-cta + .svc-extra-t{margin-top:22px;}

/* ── Oct 11 2026: a dropdown on every top item (Wolf: "do the same for wolfcrest.com").
   Built by tools/wolfcrest_nav.py. Panel links sit inside .navlinks, so every rule is
   scoped .navlinks .wn-* to beat the .navlinks a rules above (specificity trap). ── */
.wn-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}
.wn-nav .navlinks{gap:20px;}
.wn{display:inline-flex;align-items:center;}
.navlinks .wn-top{color:var(--ink);font-size:16px;font-weight:600;white-space:nowrap;border-bottom:0;padding:0;}
.navlinks .wn-top:hover{color:var(--navy);}
.wn-open .wn-top{text-decoration:underline;text-underline-offset:6px;}
.wn-btn{display:inline-flex;align-items:center;justify-content:center;width:30px;min-height:45px;margin-right:-8px;padding:0;border:0;background:none;color:var(--ink);cursor:pointer;border-radius:8px;}
.wn-btn svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:transform .15s ease;}
.wn-btn[aria-expanded="true"] svg{transform:rotate(180deg);}
.wn-btn:hover{background:var(--paper-2);}
.wn-panel{position:absolute;left:0;right:0;top:100%;background:var(--paper);border-top:1px solid var(--line);border-bottom:1px solid var(--line);box-shadow:0 24px 44px -20px rgba(14,26,43,.28);z-index:80;}
.wn-panel[hidden]{display:none;}
.wn-in{max-width:1180px;margin:0 auto;display:grid;padding:32px clamp(16px,4vw,48px) 28px;}
.wn-in-3{grid-template-columns:1.1fr 1.1fr .9fr;}
.wn-in-2{grid-template-columns:repeat(2,minmax(0,1fr));max-width:900px;}
.wn-in-1{grid-template-columns:minmax(0,1fr);max-width:520px;}
.wn-col{padding:0 30px;border-left:1px solid var(--line);}
.wn-col:first-child{border-left:0;padding-left:0;}
.navlinks .wn-h{margin:0 0 12px;font-size:15px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--navy);}
.wn-col ul{list-style:none;margin:0;padding:0;display:grid;gap:4px;}
.navlinks .wn-panel a{display:flex;align-items:center;gap:14px;min-height:52px;padding:8px 10px;margin-left:-10px;border-radius:10px;border-bottom:0;color:var(--ink);font-size:16px;font-weight:500;}
.navlinks .wn-panel a:hover,.navlinks .wn-panel a:focus-visible{background:var(--paper-2);}
.navlinks .wn-panel a:hover b{text-decoration:underline;text-underline-offset:4px;}
.wn-ico{flex:none;display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:10px;background:var(--tint-1,#EAF1FA);color:var(--navy);}
.wn-ico svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;}
.wn-txt{display:flex;flex-direction:column;line-height:1.3;}
.navlinks .wn-txt b{font-weight:600;font-size:16.5px;color:var(--ink);}
.navlinks .wn-txt small{font-size:15px;color:var(--ink-2);margin-top:2px;font-weight:400;}
.wn-call{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:8px 28px;padding:16px clamp(16px,4vw,48px);background:var(--navy-deep,#0E1A2B);color:#fff;}
.navlinks .wn-call p{margin:0;font-size:16px;color:#fff;}
.navlinks .wn-panel .wn-call p a{display:inline;min-height:0;padding:0;margin:0;color:#fff;font-weight:600;text-decoration:underline;text-underline-offset:3px;}
.navlinks .wn-call p span{color:#C9D3DF;margin-left:6px;}
.navlinks .wn-panel a.wn-call-go{min-height:45px;margin:0;padding:0 20px;border:1px solid #fff;border-radius:8px;color:#fff;}
.navlinks .wn-panel a.wn-call-go:hover,.navlinks .wn-panel a.wn-call-go:focus-visible{background:#fff;color:var(--navy-deep,#0E1A2B);}
@media(prefers-reduced-motion:no-preference){.wn-panel:not([hidden]){animation:wn-in .16s ease-out;}}
@keyframes wn-in{from{opacity:0;transform:translateY(-4px);}to{opacity:1;transform:none;}}
.wn-mob{display:none;}
@media(max-width:1180px){
  .wn{display:none;}
  .wn-mob{display:block;}
  .wn-acc{border-bottom:1px solid var(--line);}
  .wn-acc summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;min-height:60px;padding:0 2px;font-family:"Newsreader",Georgia,serif;font-size:23px;font-weight:400;color:var(--ink);}
  .wn-acc summary::-webkit-details-marker{display:none;}
  .wn-acc summary::after{content:"";width:10px;height:10px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);margin:-5px 6px 0 12px;transition:transform .15s ease;}
  .wn-acc[open] summary::after{transform:rotate(-135deg);margin-top:5px;}
  .navlinks .wn-acc > div a{display:flex;align-items:center;min-height:48px;padding:6px 2px 6px 14px;border-bottom:0;font-family:"Figtree",sans-serif;font-size:17px;font-weight:500;color:var(--ink-2);}
  .wn-acc > div{padding-bottom:10px;}
}
@media print{.wn-panel,.wn-btn{display:none !important;}}
/* Five dropdowns + phone + Get Started need ~1180px. Between 981px and 1180px the header
   switches to the Menu button too; these mirror the <=980px menu rules above. */
@media(min-width:981px) and (max-width:1180px){
  nav.sitenav .wrap{min-height:84px;flex-wrap:wrap;}
  .menu-btn{display:inline-flex;margin-left:auto;}
  .navlinks{display:none;flex:0 0 100%;width:100%;flex-direction:column;align-items:stretch;gap:0;padding:14px 0 30px;}
  nav.sitenav.open .navlinks{display:flex;}
  nav.sitenav.open{max-height:100dvh;overflow-y:auto;overscroll-behavior:contain;}
  .navlinks a{padding:14px 2px;border-bottom:1px solid var(--line);font-size:23px;font-weight:400;font-family:"Newsreader",Georgia,serif;color:var(--ink);}
  .navlinks a.btn{margin-left:0;margin-top:22px;justify-content:center;font-family:"Figtree",sans-serif;font-size:15px;font-weight:600;}
  .wn-nav .nav-tel{display:none;}
  .nav-phone{display:block;margin-top:22px;font-size:15px;color:var(--ink-3);line-height:1.6;}
  .nav-phone a{color:var(--ink-2);text-decoration:none;font-family:"Figtree",sans-serif;font-size:16px;font-weight:600;border-bottom:none;padding:0;display:inline-flex;align-items:center;min-height:44px;}
}

/* Oct 13 2026: life insurance product explainers (life-insurance.html, staging flag WC_LIFEQ).
   Reuses the homepage .fx-personal grid and .fx-pcard cards; only spacing and the h3 reset here. */
.lq-prods{padding:clamp(56px,7vw,96px) 0;}
.lq-prods h2{font-size:clamp(30px,3.4vw,44px);margin:10px 0 12px;}
.lq-prods-lede{font-size:clamp(16.5px,1.4vw,19px);line-height:1.55;color:var(--ink-2);max-width:62ch;margin:0 0 32px;}
.lq-card h3.fx-tile-k{margin:0;color:var(--ink);}
.lq-src{font-size:15px;line-height:1.55;color:var(--ink-3);max-width:80ch;margin:28px 0 0;}
/* Oct 13 2026: life product pages + FAQ (staging flag WC_LIFEQ). */
.lq-note{font-size:15px;line-height:1.5;color:var(--ink-2);margin:14px 0 0;}
.lq-faq{padding:clamp(48px,6vw,88px) 0;border-top:1px solid var(--line);}
.lq-faq-in{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1fr);gap:clamp(24px,4vw,64px);align-items:start;}
.lq-faq h2{margin-top:10px;font-size:clamp(28px,3vw,40px);}
.lq-qs{border-top:1px solid var(--line-2);}
.lq-q{border-bottom:1px solid var(--line);}
.lq-q summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:60px;padding:14px 0;
  font-family:"Newsreader",Georgia,serif;font-size:clamp(19px,1.6vw,22px);font-weight:400;color:var(--ink);}
.lq-q summary::-webkit-details-marker{display:none;}
.lq-q summary::after{content:"";flex:0 0 10px;width:10px;height:10px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);margin:-5px 6px 0 0;}
.lq-q[open] summary::after{transform:rotate(-135deg);margin-top:5px;}
.lq-q p{font-size:16.5px;line-height:1.6;color:var(--ink-2);margin:0 0 18px;max-width:62ch;}
.lq-related{padding:0 0 clamp(48px,6vw,88px);}
.lq-related-links{display:flex;flex-wrap:wrap;gap:12px;margin-top:14px;}
@media(max-width:860px){.lq-faq-in{grid-template-columns:1fr;}}
.lq-related .btn-sm{min-height:48px;}
.lq-what p:not(.label){font-size:16.5px;line-height:1.6;color:var(--ink-2);margin:14px 0 0;max-width:48ch;}

/* Oct 14 2026: refer.html, space between the call line and the Medicare pointer. */
.svc-start-copy p + p{margin-top:12px;}
.svc-start-copy .refer-medicare{margin-top:20px;padding-top:16px;border-top:1px solid rgba(0,0,0,.12);}

/* Oct 16 2026, Wolf: "the dark box for DVH and hosptial indemify i think looks a little werid".
   Light card for these two only; the live life-quote box keeps the dark panel. */
#dental-vision .svc-extra-in,#hospital-illness-accident .svc-extra-in{background:var(--paper-2);color:var(--ink);border:1px solid var(--line);}
#dental-vision .svc-extra-in .label,#hospital-illness-accident .svc-extra-in .label{color:var(--ink-3);}
#dental-vision .svc-extra-t,#hospital-illness-accident .svc-extra-t{color:var(--ink-2);}
#dental-vision .svc-extra-in .btn-ghost,#hospital-illness-accident .svc-extra-in .btn-ghost{color:var(--ink);border-color:var(--line-2);}
#dental-vision .svc-extra-in .btn-ghost:hover,#hospital-illness-accident .svc-extra-in .btn-ghost:hover{border-color:var(--ink);background:var(--paper);}

/* ── INVOICE FACTORING APPLICATION (Oct 20 2026) ─────────────────
   Scoped to factoring-application.html. The brief's floor is 16px, so the
   15.5px labels and 14px field messages the shared form rules use are lifted
   here only. Every other form keeps its measured sizes. */
.fa-form .field label,.fa-form .privacy-note{font-size:16px;}
.fa-form .field-msg{font-size:16px;}
.fa-req,.fa-hint{font-size:16px;color:var(--ink-2);margin:0;}
.fa-req{margin-bottom:20px;}
.fa-star{color:var(--err);}
.fa-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}
.fa-form .field select{appearance:none;-webkit-appearance:none;padding-right:46px;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5' fill='none' stroke='%232A2A2A' stroke-width='1.6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 17px center;background-size:14px;}
.fa-form .btn{min-height:52px;font-size:16px;}
.hero .fa-eyebrow{font-size:16px;}
.svc-start-copy .fa-call a{min-height:46px;}
/* Factoring link on business-financing.html, 46px target. */
.svc-start-copy .svc-start-alt a{min-height:46px;gap:6px;}
.fa-steps{list-style:none;margin:22px 0 8px;padding:0;display:grid;gap:18px;}
.fa-steps li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:16px;align-items:baseline;
  font-size:17px;line-height:1.55;color:var(--ink-2);padding-top:18px;border-top:1px solid var(--line);}
.fa-steps b{color:var(--ink);font-weight:650;}
.fa-n{font-family:"Newsreader",Georgia,serif;font-weight:300;font-size:30px;line-height:1;color:var(--brass-ink);}