/* ============================================================================
   RAE & CO CAPITAL — rebuild design system, 2026-08-07
   ONE stylesheet for every rebuilt page, so branding cannot drift page to page.

   Brand tokens are lifted EXACTLY from the live styles.css :root, not
   approximated: navy #06111f, navy-2 #0a192b, ink #111927, cream #f6efe3,
   paper #fbf7ef, gold #c8a15a, gold-2 #efd8a4, max 1180px. Tyler: "make sure
   proper branding and all is there like our real current rcowealth.com live
   version. the live version is good."

   What the rebuild adds on top of the live brand, per Tyler: motion, a
   new-age layout, self-guidedness, and pages that are not crammed onto one
   home screen. What it must NOT do is bury wealth management: "this new revamp
   takes away a bit from wealth management which aum is still needed."
   ========================================================================= */
:root{
  --navy:#06111f; --navy-2:#0a192b; --ink:#111927; --muted:#5f6a7d;
  --cream:#f6efe3; --paper:#fbf7ef; --white:#fff;
  --line:rgba(17,25,39,.13); --line-dark:rgba(246,239,224,.16);
  /* gold-ink darkened from #8c6b32: at 12px on the cream band it computed
   4.31:1 against the 4.5 floor. #7d5f2c clears it on both cream and paper. */
  --gold:#c8a15a; --gold-2:#efd8a4; --gold-ink:#7d5f2c;
  --max:1180px; --shadow:0 30px 90px rgba(6,17,31,.28);
  --ease:cubic-bezier(.16,1,.3,1);
  --serif:Georgia,"Times New Roman",serif;
  --sans:"Avenir Next","Segoe UI",system-ui,-apple-system,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
.wrap{width:min(var(--max),calc(100% - 40px));margin:0 auto}
a{color:inherit}
.skip{position:absolute;left:-9999px}
.skip:focus{left:12px;top:12px;z-index:99;background:var(--ink);color:var(--paper);padding:10px 14px;border-radius:8px}

/* ---- header: real logo, sticky, glass on scroll ---- */
.hd{position:sticky;top:0;z-index:40;background:rgba(251,247,239,.86);
  -webkit-backdrop-filter:saturate(180%) blur(12px);backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid transparent;transition:border-color .25s,box-shadow .25s}
.hd.scrolled{border-bottom-color:var(--line);box-shadow:0 8px 30px -22px rgba(6,17,31,.5)}
.hd .bar{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:14px 0}
.hd .brand img{display:block;width:172px;height:auto}
.hd nav{display:flex;align-items:center;gap:24px}
.hd nav a{font:600 13.5px/1 var(--sans);color:var(--muted);text-decoration:none;transition:color .18s}
.hd nav a:hover,.hd nav a[aria-current="page"]{color:var(--ink)}
.hd nav a[aria-current="page"]{box-shadow:inset 0 -2px 0 var(--gold)}
.hd .callbtn{display:inline-flex;align-items:center;min-height:42px;border:1.5px solid var(--ink);
  border-radius:999px;padding:0 18px;font:700 13.5px/1 var(--sans);color:var(--ink);text-decoration:none}
.hd .menu{display:none;appearance:none;background:transparent;border:1.5px solid var(--ink);
  border-radius:10px;min-width:44px;min-height:44px;font:700 12px/1 var(--sans);cursor:pointer}
@media(max-width:900px){
  .hd nav{position:absolute;left:0;right:0;top:100%;flex-direction:column;align-items:stretch;gap:0;
    background:var(--paper);border-bottom:1px solid var(--line);padding:6px 20px 14px;display:none}
  .hd nav.open{display:flex}
  .hd nav a{min-height:46px;display:flex;align-items:center;font-size:15px}
  .hd .menu{display:inline-flex;align-items:center;justify-content:center}
  .hd .callbtn{display:none}
  .hd .brand img{width:148px}
}

/* ---- shared type ---- */
.kicker{display:inline-flex;align-items:center;gap:10px;font:700 12px/1 var(--sans);letter-spacing:.18em;
  text-transform:uppercase;color:var(--gold-ink);margin:0 0 22px}
.kicker::before{content:"";width:34px;height:2px;background:var(--gold)}
.kicker.center{justify-content:center}
h1{font-family:var(--serif);font-weight:400;font-size:clamp(46px,6.4vw,92px);line-height:.94;
  letter-spacing:-.05em;margin:0 0 22px}
h2{font-family:var(--serif);font-weight:400;font-size:clamp(38px,4.8vw,66px);line-height:.97;
  letter-spacing:-.045em;margin:0 0 16px}
h3,h2.sub{font-family:var(--serif);font-weight:400;font-size:clamp(23px,2.3vw,30px);letter-spacing:-.03em;margin:0 0 10px}
/* h2.sub: a real second-level heading that reads at h3 size. Several sections
   led with an h3 under the h1, which left six pages with no h2 at all and made
   every page jump a heading level. Semantics fixed, visuals unchanged. */
em.g{font-style:italic;color:var(--gold-ink)}
.lede{font:400 clamp(16.5px,1.4vw,19.5px)/1.6 var(--sans);color:var(--muted);max-width:56ch;margin:0 0 26px}
.section{padding:clamp(66px,8vw,110px) 0}
.section.cream{background:var(--cream)}
.section.dark{background:var(--navy);color:#f4efe4}
.section.dark h2,.section.dark h3{color:#fff}
.section.dark .kicker{color:var(--gold-2)}
.section.dark .lede{color:rgba(244,239,228,.74)}
.center{text-align:center}
.center .lede{margin-left:auto;margin-right:auto}

/* ---- buttons ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:50px;
  border-radius:999px;padding:0 26px;font:800 15px/1 var(--sans);text-decoration:none;border:0;cursor:pointer;
  transition:transform .18s var(--ease),box-shadow .2s}
.btn:hover{transform:translateY(-2px)}
.btn-ink{background:var(--ink);color:var(--paper)}
.btn-ink:hover{box-shadow:0 18px 40px -18px rgba(6,17,31,.6)}
.btn-gold{background:linear-gradient(135deg,#e7cf9c,var(--gold));color:#14202e}
.btn-line{display:inline-flex;align-items:center;min-height:46px;font:700 14.5px/1 var(--sans);
  color:var(--ink);text-decoration:none;box-shadow:inset 0 -2px 0 var(--gold)}
.section.dark .btn-line{color:#fff}
.arr{transition:transform .22s var(--ease)}
.btn:hover .arr{transform:translateX(5px)}
.acts{display:flex;gap:14px;flex-wrap:wrap;align-items:center}

/* ---- cards ---- */
.grid{display:grid;gap:16px}
.g2{grid-template-columns:repeat(2,1fr)} .g3{grid-template-columns:repeat(3,1fr)}
@media(max-width:940px){.g3{grid-template-columns:1fr}.g2{grid-template-columns:1fr}}
.card{background:var(--white);border:1px solid var(--line);border-radius:20px;padding:26px 24px;
  transition:box-shadow .25s,border-color .25s,transform .25s var(--ease)}
.card:hover{box-shadow:0 26px 60px -34px rgba(6,17,31,.4);border-color:rgba(200,161,90,.5);transform:translateY(-3px)}
.card .tag{font:800 10.5px/1 var(--sans);letter-spacing:.15em;text-transform:uppercase;color:var(--gold-ink);margin:0 0 12px}
.card p{font:400 14.5px/1.6 var(--sans);color:var(--muted);margin:0}
.section.dark .card{background:rgba(244,239,228,.05);border-color:var(--line-dark)}
.section.dark .card p{color:rgba(244,239,228,.76)}
.ticks{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.ticks li{position:relative;padding-left:21px;font:400 13.5px/1.5 var(--sans);color:var(--muted)}
.ticks li::before{content:"";position:absolute;left:0;top:6px;width:9px;height:9px;border-radius:50%;border:2px solid var(--gold)}
.section.dark .ticks li{color:rgba(244,239,228,.76)}

/* ---- reveal: IO plus a rect check, because IO callbacks do not fire in the
   headless preview pane this site is verified in ----
   Selector targets [data-rv], the attribute the markup actually uses. It
   originally targeted a .rv CLASS that appears nowhere in the built pages, so
   nothing was ever hidden and the entire scroll-reveal system silently did
   nothing outside the stagger grids - the site shipped with almost no motion
   while every check passed, because checks look for visible elements and
   permanently-visible is very visible. */
[data-rv]{opacity:0;transform:translateY(18px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
[data-rv].inview{opacity:1;transform:none}
.stagger>*{opacity:0;transform:translateY(14px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.inview.stagger>*,.stagger.inview>*{opacity:1;transform:none}
.stagger.inview>*:nth-child(2){transition-delay:.09s}
.stagger.inview>*:nth-child(3){transition-delay:.18s}
.stagger.inview>*:nth-child(4){transition-delay:.27s}

/* ---- footer ---- */
.ft{background:var(--navy);color:rgba(246,239,224,.72);padding:56px 0 30px}
.ft .cols{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:30px}
@media(max-width:900px){.ft .cols{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.ft .cols{grid-template-columns:1fr}}
.ft img{width:170px;margin-bottom:14px}
.ft .ftlabel{font:800 11px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--gold-2);margin:0 0 14px}
.ft a{display:flex;align-items:center;min-height:44px;font:400 14px/1.4 var(--sans);
  color:rgba(246,239,224,.72);text-decoration:none}
.ft a:hover{color:#fff}
.ft .legal{margin-top:34px;padding-top:22px;border-top:1px solid var(--line-dark);
  font:400 11.5px/1.65 var(--sans);color:rgba(246,239,224,.5)}

/* Social row. Icons only, footer only. Sized to the 44px tap target the rest of
   the footer links already use, so thumbs do not miss on mobile. */
.social{display:flex;gap:10px;margin-top:18px}
.social a{width:44px;height:44px;min-height:44px;justify-content:center;
  border:1px solid var(--line-dark);border-radius:50%;
  transition:border-color .25s var(--ease),background .25s var(--ease)}
.social a:hover{border-color:var(--gold);background:rgba(200,161,90,.14)}
.social svg{width:18px;height:18px;fill:currentColor;display:block}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .rv,.stagger>*{opacity:1!important;transform:none!important}
}

/* ============================================================================
   COMPONENTS — the coverage instrument, protection explorer, planning tiers,
   advisor badges and lead form. Shared so any page can use them.
   ========================================================================= */

/* coverage instrument */
.tool{background:var(--white);border:1px solid var(--line);border-radius:22px;
  padding:clamp(22px,2.6vw,32px);box-shadow:0 40px 90px -50px rgba(6,17,31,.45)}
.chips{display:flex;gap:9px;flex-wrap:wrap;margin:0 0 22px}
.chip{appearance:none;border:1.5px solid rgba(17,25,39,.22);background:transparent;border-radius:999px;
  padding:13px 17px;min-height:44px;font:700 13.5px/1 var(--sans);color:var(--muted);cursor:pointer;
  transition:transform .15s cubic-bezier(.34,1.56,.64,1),background .18s,border-color .18s,color .18s}
.chip:hover{transform:translateY(-2px)}
.chip[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.chip[aria-pressed="true"]::before{content:"\2713 ";color:var(--gold-2)}
.frow{margin:0 0 8px}
.frow label{display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  font:700 13px/1 var(--sans);color:var(--muted);margin-bottom:9px}
.frow label output{font-family:var(--serif);font-size:24px;letter-spacing:-.03em;color:var(--ink);font-variant-numeric:tabular-nums}
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:34px;background:transparent;cursor:pointer;margin:0}
/* Fallback is 0, not .2. A slider whose --p was never painted used to render a
   fixed 20% of gold regardless of the thumb, which reads as a broken control
   rather than an unpainted one. Empty is the honest default. */
input[type=range]::-webkit-slider-runnable-track{height:9px;border-radius:99px;
  background:linear-gradient(90deg,var(--gold) 0 calc(var(--p,0)*100%),rgba(17,25,39,.12) calc(var(--p,0)*100%) 100%)}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:30px;height:30px;border-radius:50%;
  background:#fff;border:2.5px solid var(--gold-ink);margin-top:-10.5px;box-shadow:0 4px 14px rgba(6,17,31,.25);transition:transform .12s}
input[type=range]:active::-webkit-slider-thumb{transform:scale(1.15)}
input[type=range]:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 4px rgba(200,161,90,.4)}
input[type=range]::-moz-range-track{height:9px;border-radius:99px;background:rgba(17,25,39,.12)}
/* Firefox got no gold at all before this: the webkit gradient trick does not
   apply to a moz track, and ::-moz-range-progress is the supported equivalent. */
input[type=range]::-moz-range-progress{height:9px;border-radius:99px;background:var(--gold)}
input[type=range]::-moz-range-thumb{width:30px;height:30px;border:2.5px solid var(--gold-ink);background:#fff;border-radius:50%}
.readout{margin-top:20px;padding-top:20px;border-top:1px solid var(--line);
  display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap}
.readout small{display:block;font:800 11px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--gold-ink);margin-bottom:8px}
.num{font-family:var(--serif);font-size:clamp(38px,4.2vw,56px);line-height:1;letter-spacing:-.045em;
  font-variant-numeric:tabular-nums;display:inline-block}
.num.roll{animation:roll .4s cubic-bezier(.16,1,.3,1)}
@keyframes roll{from{transform:translateY(10px);opacity:.2}to{transform:none;opacity:1}}
.readout a{background:linear-gradient(135deg,#e7cf9c,var(--gold));color:#14202e;font:800 13.5px/1 var(--sans);
  border-radius:999px;padding:15px 22px;text-decoration:none;white-space:nowrap;transition:transform .18s var(--ease)}
.readout a:hover{transform:translateY(-2px)}
.fine{margin:14px 0 0;font:400 12px/1.55 var(--sans);color:#6d7787}

/* protection explorer */
.pgrid{display:grid;grid-template-columns:300px minmax(0,1fr);gap:clamp(20px,3vw,44px);align-items:start}
@media(max-width:900px){.pgrid{grid-template-columns:1fr}}
.plist{display:flex;flex-direction:column;gap:7px}
@media(max-width:900px){.plist{flex-direction:row;flex-wrap:wrap}}
.pbtn{appearance:none;text-align:left;background:var(--white);border:1px solid var(--line);
  border-radius:12px;padding:14px 16px;min-height:46px;color:var(--muted);
  font:700 14px/1.25 var(--sans);cursor:pointer;
  transition:background .2s,border-color .2s,color .2s,transform .15s cubic-bezier(.34,1.56,.64,1)}
.pbtn:hover{transform:translateX(3px);color:var(--ink);border-color:rgba(200,161,90,.55)}
.pbtn[aria-selected="true"]{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.pbtn small{display:block;font:800 10px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;opacity:.62;margin-bottom:5px}
.ppanel{background:var(--white);border:1px solid var(--line);border-radius:20px;
  padding:clamp(22px,2.6vw,34px);min-height:330px}
.ppanel h3{margin-bottom:12px}
.ppanel .lead2{font:400 16px/1.6 var(--sans);color:var(--muted);margin:0 0 22px;max-width:62ch}
.pboxes{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media(max-width:760px){.pboxes{grid-template-columns:1fr}}
.pbox{background:var(--paper);border:1px solid var(--line);border-radius:13px;padding:16px}
.pbox b{display:block;font:800 10.5px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--gold-ink);margin-bottom:8px}
.pbox span{font:400 13.5px/1.55 var(--sans);color:var(--muted)}
.pfade{animation:pfade .45s cubic-bezier(.16,1,.3,1)}
@keyframes pfade{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
/* Carrier wall. Approved layout 2026-08-10: gold numeral, serif claim line,
   rule-flanked proof strip, 5x2 logo grid on hairlines, expandable full list. */
.cnum{font-family:var(--serif);font-size:clamp(78px,11vw,150px);line-height:.9;letter-spacing:-.04em;margin:0;
  background:linear-gradient(168deg,#f7e6bd 6%,var(--gold-2) 30%,#c8a15a 58%,#9a763a 84%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  -webkit-text-fill-color:transparent;padding-bottom:.06em}
.cclaim{font:400 clamp(24px,3.4vw,42px)/1.24 var(--serif);color:#fff;margin:2px 0 0;letter-spacing:-.015em}
.section.dark .cclaim{color:#fff}

/* proof strip with a hairline running out to either side */
.cstrip{display:flex;align-items:center;gap:18px;margin:30px auto 0;max-width:900px;
  color:var(--gold-2);font:600 11px/1.5 var(--sans);letter-spacing:.13em;text-transform:uppercase}
.cstrip::before,.cstrip::after{content:"";flex:1;height:1px;background:rgba(244,239,228,.16)}
.cstrip b{font-weight:600}
.cstrip i{font-style:normal;color:rgba(200,161,90,.5);padding:0 12px}
@media(max-width:640px){.cstrip{flex-wrap:wrap;justify-content:center;gap:6px;letter-spacing:.09em}
  .cstrip::before,.cstrip::after{flex-basis:100%;flex-grow:0}}

.cgrid{display:grid;grid-template-columns:repeat(5,1fr);margin-top:26px;
  border-top:1px solid rgba(244,239,228,.11)}
.cgrid .cell{display:flex;align-items:center;justify-content:center;min-height:104px;padding:18px 14px;
  border-bottom:1px solid rgba(244,239,228,.11);border-right:1px solid rgba(244,239,228,.11);
  transition:background .3s var(--ease)}
.cgrid .cell:nth-child(5n){border-right:0}
.cgrid .cell:hover{background:rgba(244,239,228,.035)}
/* Art ships pre-coloured cream, so no invert filter here - inverting would
   flatten it to pure white and lose the warm tone the rest of the band uses. */
.cgrid img{max-width:100%;width:auto;opacity:.9;transition:opacity .3s var(--ease)}
.cgrid .cell:hover img{opacity:1}
/* Wordmark fallback until real carrier art is dropped into assets/carriers/. */
.cgrid .wm{font:400 23px/1.12 var(--serif);color:rgba(246,239,224,.9);letter-spacing:-.012em;text-align:center}
.cgrid .wm.s{font-family:var(--sans);font-weight:700;font-size:19px;letter-spacing:-.005em}
@media(max-width:900px){.cgrid{grid-template-columns:repeat(3,1fr)}
  .cgrid .cell:nth-child(5n){border-right:1px solid rgba(244,239,228,.11)}
  .cgrid .cell:nth-child(3n){border-right:0}}
@media(max-width:560px){.cgrid{grid-template-columns:repeat(2,1fr)}
  .cgrid .cell{min-height:88px}
  .cgrid .cell:nth-child(3n){border-right:1px solid rgba(244,239,228,.11)}
  .cgrid .cell:nth-child(2n){border-right:0}}

.cmore{display:flex;align-items:center;gap:18px;margin:26px auto 0;max-width:760px;
  color:var(--gold-2);font:600 13px/1.5 var(--sans)}
.cmore::before,.cmore::after{content:"";flex:1;height:1px;background:rgba(244,239,228,.16)}

/* full roster, revealed by the "See all carriers" toggle */
.cnames{display:none;grid-template-columns:repeat(4,1fr);margin-top:26px;
  border-top:1px solid rgba(244,239,228,.11);text-align:left}
.cnames.open{display:grid;animation:pfade .45s cubic-bezier(.16,1,.3,1)}
.cnames span{font:600 13px/1.3 var(--sans);color:rgba(244,239,228,.62);padding:12px 12px 12px 0;
  border-bottom:1px solid rgba(244,239,228,.08)}
@media(max-width:900px){.cnames.open{grid-template-columns:repeat(3,1fr)}}
@media(max-width:560px){.cnames.open{grid-template-columns:repeat(2,1fr)}}

/* geo landing pages: sibling service links, so the four Greenville pages feed
   each other instead of each being a dead end */
.xrow{display:flex;flex-wrap:wrap;gap:10px;margin-top:34px;padding-top:26px;border-top:1px solid var(--line)}
.xlink{display:inline-flex;align-items:center;gap:8px;min-height:46px;padding:0 20px;
  border:1px solid var(--line);border-radius:999px;background:var(--white);
  font:700 13.5px/1 var(--sans);color:var(--ink);text-decoration:none;
  transition:border-color .25s var(--ease),transform .25s var(--ease)}
.xlink:hover{border-color:var(--gold);transform:translateY(-2px)}

/* planning tiers */
.tiergrid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;align-items:stretch}
@media(max-width:940px){.tiergrid{grid-template-columns:1fr}}
.tier{position:relative;display:flex;flex-direction:column;background:var(--white);
  border:1px solid var(--line);border-radius:20px;padding:28px 24px 24px;transition:box-shadow .25s,border-color .25s}
.tier:hover{box-shadow:0 26px 60px -34px rgba(6,17,31,.4);border-color:rgba(200,161,90,.5)}
.tier.best{background:linear-gradient(180deg,#fffdf8,#f7f0df);border-color:rgba(200,161,90,.55)}
.tbadge{position:absolute;top:-11px;left:24px;background:var(--ink);color:var(--paper);
  font:800 10px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;border-radius:999px;padding:7px 12px;margin:0}
.ttag{font:800 10.5px/1 var(--sans);letter-spacing:.15em;text-transform:uppercase;color:var(--gold-ink);margin:0 0 10px}
.tprice{font-family:var(--serif);font-size:40px;line-height:1;letter-spacing:-.04em;color:var(--ink);margin:0 0 8px}
.tprice small{font:600 12.5px/1 var(--sans);color:var(--muted);letter-spacing:0}
.tfor{font:400 14.5px/1.55 var(--sans);color:var(--muted);margin:0 0 16px}
.tier .ticks{margin-bottom:22px}
.tbuy{margin-top:auto;display:flex;align-items:center;justify-content:center;gap:9px;min-height:48px;
  background:var(--ink);color:var(--paper);border-radius:999px;font:800 14px/1 var(--sans);text-decoration:none;
  transition:transform .18s var(--ease)}
.tier.best .tbuy{background:linear-gradient(135deg,#e7cf9c,var(--gold));color:#14202e}
.tbuy:hover{transform:translateY(-2px)}
.tnote{margin:26px auto 0;max-width:70ch;text-align:center;font:400 13px/1.6 var(--sans);color:var(--muted)}

/* advisor badges */
.badges{display:grid;grid-template-columns:repeat(3,1fr);margin:32px 0 0;border-top:1px solid var(--line);padding-top:26px}
.badge{padding:0 22px;border-left:1px solid var(--line)}
.badge:first-child{border-left:0;padding-left:0}
.badge svg{width:34px;height:34px;color:var(--gold-ink);margin-bottom:10px}
.badge b{display:block;font:800 13px/1.3 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--ink);margin-bottom:5px}
.badge span{display:block;font:400 13.5px/1.5 var(--sans);color:var(--muted)}
@media(max-width:640px){.badges{grid-template-columns:1fr;gap:18px}.badge{border-left:0;padding:0}}

/* contact + lead form */
.clines{display:grid;gap:2px;margin:0;border-top:1px solid var(--line)}
.clines a,.clines span{display:flex;align-items:center;min-height:48px;gap:12px;border-bottom:1px solid var(--line);
  font:600 15px/1.4 var(--sans);color:var(--ink);text-decoration:none}
.clines a:hover{color:var(--gold-ink)}
.clines b{font:800 10.5px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--gold-ink);min-width:64px}
.lform{background:var(--white);border:1px solid var(--line);border-radius:22px;
  padding:clamp(22px,2.6vw,32px);box-shadow:0 40px 90px -50px rgba(6,17,31,.45)}
.lform h3{margin:0 0 4px}
.lsub{font:400 14.5px/1.55 var(--sans);color:var(--muted);margin:0 0 20px}
.fgrid{display:grid;grid-template-columns:1fr 1fr;gap:13px}
.fld2{display:grid;gap:6px}
.fld2.full{grid-column:1/-1}
.fld2 label{font:800 11px/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.fld2 input,.fld2 select,.fld2 textarea{width:100%;min-height:46px;border:1px solid rgba(17,25,39,.16);
  border-radius:11px;background:#fff;padding:12px 13px;color:var(--ink);font:400 15px/1.4 var(--sans);outline:none;
  transition:border-color .18s,box-shadow .18s}
.fld2 textarea{min-height:104px;resize:vertical}
.fld2 input:focus,.fld2 select:focus,.fld2 textarea:focus{border-color:var(--gold);box-shadow:0 0 0 4px rgba(200,161,90,.16)}
.checks2{grid-column:1/-1;display:grid;gap:11px;margin-top:4px}
.ckline{display:flex;gap:11px;align-items:flex-start;font:400 12.5px/1.5 var(--sans);color:#5b6675}
.ckline input{width:19px;height:19px;min-height:0;margin-top:1px;accent-color:var(--ink);flex-shrink:0}
.lfine{margin:16px 0 0;font:400 11.5px/1.6 var(--sans);color:#6d7787}
.hp2{position:absolute;left:-9999px}
@media(max-width:560px){.fgrid{grid-template-columns:1fr}}

/* ---- calculator page ---- */
.calcgrid{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:30px;align-items:start}
@media(max-width:940px){.calcgrid{grid-template-columns:1fr}}
.calcpanel{background:var(--white);border:1px solid var(--line);border-radius:22px;padding:clamp(22px,2.6vw,32px)}
.calcgroup{border-top:1px solid var(--line);padding:22px 0}
.calcgroup:first-of-type{border-top:0;padding-top:0}
.calcgroup h3{font-size:20px;margin:0 0 4px}
.ghint{margin:0 0 16px;color:var(--muted);font:400 13.5px/1.6 var(--sans)}
.calcrow{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
@media(max-width:600px){.calcrow{grid-template-columns:1fr}}
.slide-field{display:grid;gap:8px}
.slide-field label{font:800 11px/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.sf-val{display:flex;align-items:baseline;gap:2px;font-family:var(--serif);font-size:28px;line-height:1.05;
  letter-spacing:-.035em;color:var(--ink)}
.sf-val .sf-cur{font-size:19px;color:var(--gold-ink)}
.sf-val input{font:inherit;color:inherit;width:100%;border:0;background:transparent;padding:2px 0;
  border-bottom:1px dashed rgba(17,25,39,.22);outline:none}
.sf-val input:focus{border-bottom-color:var(--gold);background:rgba(200,161,90,.07)}
.sf-range{width:100%}
.resultcard{position:sticky;top:96px;border:1px solid rgba(200,161,90,.45);border-radius:22px;
  background:linear-gradient(180deg,#fffdf8,#fbf5e9);padding:26px;height:max-content}
.resultcard.covered{border-color:rgba(47,191,130,.5);background:linear-gradient(180deg,#f8fdfa,#eef8f2)}
@media(max-width:940px){.resultcard{position:static}}
.rlabel{font:800 11px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--gold-ink);margin:0 0 8px}
.rbig{font-family:var(--serif);font-size:46px;line-height:1;letter-spacing:-.04em;color:var(--ink);margin:0 0 6px;
  font-variant-numeric:tabular-nums}
.rsub{color:var(--muted);font:400 14px/1.5 var(--sans);margin:0 0 20px}
.rline{display:flex;justify-content:space-between;gap:14px;border-top:1px solid var(--line);padding:11px 0;
  font:400 14px/1.4 var(--sans);color:var(--muted)}
.rline b{color:var(--ink);font-variant-numeric:tabular-nums}
.ractions{display:grid;gap:10px;margin-top:20px}
.ractions .btn{width:100%}
.ractions .btn-line{justify-content:center}

/* ---- click to call / text ---- */
.reachrow{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:0 0 22px}
@media(max-width:560px){.reachrow{grid-template-columns:1fr}}
.reach{display:flex;align-items:center;gap:13px;min-height:64px;padding:0 18px;border-radius:14px;
  border:1px solid var(--line);background:var(--white);text-decoration:none;
  transition:border-color .2s,box-shadow .2s,transform .18s var(--ease)}
.reach:hover{border-color:rgba(200,161,90,.6);box-shadow:0 18px 40px -26px rgba(6,17,31,.45);transform:translateY(-2px)}
.reach svg{width:22px;height:22px;color:var(--gold-ink);flex-shrink:0}
.reach b{display:block;font:800 10.5px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--gold-ink);margin-bottom:3px}
.reach span{display:block;font:700 15px/1.2 var(--sans);color:var(--ink)}
.section.dark .reach{background:rgba(244,239,228,.05);border-color:var(--line-dark)}
.section.dark .reach span{color:#fff}
.hdreach{display:flex;align-items:center;gap:8px}
.hdreach .callbtn:first-child{border-color:var(--gold);color:var(--gold-ink)}
@media(max-width:900px){.hdreach{display:none}}

/* Two-column splits. These were inline grid-template-columns, which CANNOT
   carry a media query, so every one of them stayed two-up at 390px and squeezed
   the form and the portrait into unusable columns. Caught on the contact page
   at phone width. Class-based so the collapse actually happens. */
.split{display:grid;gap:clamp(26px,4vw,56px);align-items:center}
.split.a{grid-template-columns:minmax(0,1.05fr) minmax(320px,.95fr)}
.split.b{grid-template-columns:minmax(260px,.8fr) minmax(0,1.2fr)}
.split.c{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);align-items:start}
.split.top{align-items:start}
@media(max-width:900px){
  .split.a,.split.b,.split.c{grid-template-columns:1fr}
  .split .portrait,.split figure{max-width:340px;position:static}
}

/* types-of-life-insurance: the solves / costs / wrong-tool triad, and the
   callouts that carry the honest bits (why term is recommended even though it
   pays least, how to read an IUL illustration). */
.prow{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:26px}
.prow>div{border-top:2px solid var(--gold);padding-top:14px}
.prow b{display:block;font:800 10.5px/1.3 var(--sans);letter-spacing:.15em;
  text-transform:uppercase;color:var(--gold-ink);margin-bottom:8px}
.prow p{font:400 14.5px/1.6 var(--sans);color:var(--muted);margin:0}
@media(max-width:820px){.prow{grid-template-columns:1fr}}
.callout{margin-top:24px;border-left:3px solid var(--gold);background:rgba(200,161,90,.09);
  border-radius:0 14px 14px 0;padding:18px 22px;font:400 14.5px/1.65 var(--sans);color:var(--ink);max-width:76ch}
.callout b{display:block;font:800 12px/1.4 var(--sans);letter-spacing:.06em;color:var(--gold-ink);margin-bottom:5px}

/* Retirement income check (wealth page). Reuses the coverage instrument's
   tool/frow/readout shell; only the age chips and the gap bar are new. */
.rchip{appearance:none;border:1.5px solid rgba(17,25,39,.22);background:transparent;border-radius:999px;
  min-height:44px;padding:0 18px;font:700 13.5px/1 var(--sans);color:var(--ink);cursor:pointer;
  transition:transform .2s var(--ease),background .2s,border-color .2s}
.rchip:hover{transform:translateY(-2px)}
.rchip[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.wbar{position:relative;height:7px;border-radius:99px;background:rgba(17,25,39,.1);
  margin:16px 0 0;overflow:hidden}
.wbar span{display:block;height:100%;width:0;border-radius:99px;background:var(--gold);
  transition:width .45s var(--ease),background .45s var(--ease)}
@media(prefers-reduced-motion:reduce){.wbar span{transition:none}}

/* Shown with the expanded roster: the named list is a selection, and saying so
   is cheaper than letting someone count 22 names under a "40+" headline. */
.cnote{display:none;max-width:70ch;margin:18px auto 0;
  font:400 12.5px/1.65 var(--sans);color:rgba(244,239,228,.55)}
.cnote.open{display:block}

/* Wealth tool readout. Reuses the coverage calculator's result hierarchy on
   purpose: label describes the headline number, then the target and the gap
   as their own labelled lines. The first version put the gap in the caption
   above a headline showing the supported income, so the two never matched. */
.wresult{margin-top:22px;padding-top:20px;border-top:1px solid var(--line)}
.wresult .rbig{margin-bottom:12px}
.wresult .wbar{margin:0 0 6px}
.wresult .rline b.good{color:var(--gold-ink)}

/* Top-align a split row whose right column is much taller than its left, so
   the left text does not float in the middle with dead space above and below. */
.split.a.top{align-items:start}

/* Advisor credentials: two-column full-width grid. The single-column list
   hung off the left edge under a full-width icon row and read lopsided. */
.clines.two{display:grid;grid-template-columns:1fr 1fr;gap:0 40px;max-width:none}
@media(max-width:760px){.clines.two{grid-template-columns:1fr}}