:root{
  --ink:#0B1F2E; --ink-soft:#4B5D6B; --ink-faint:#7C8B96;
  --accent:#5C8A94; --accent-dark:#456670;
  --gold:#B08D57; --gold-dark:#8f7145;
  --cta:#E8890C; --cta-dark:#C4720A;
  --bg:#F7F4EE; --bg-alt:#EFEAE0; --bg-dark:#0F2530; --bg-dark-alt:#132E3A;
  --line:#DCD5C6; --line-dark:rgba(255,255,255,.14);
  --max:1200px; --radius:0px;
  --font-head:'Space Grotesk','Century Gothic','Trebuchet MS',sans-serif;
  --font-body:'Inter',-apple-system,'Segoe UI',Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;font-size:106%}
/* Base 17px (from the 106% root bump) + 1.75 line-height: mentor feedback —
   target market skews 40+, prioritize legibility/contrast/breathing room on
   mobile and desktop over dense/tiny editorial type. */
body{font-family:var(--font-body);color:#33424D;line-height:1.75;background:var(--bg);font-weight:400;font-size:1.05rem}
.wrap{max-width:var(--max);margin:0 auto;padding:0 24px}
h1,h2,h3,h4{font-family:var(--font-head);line-height:1.15;color:var(--ink);font-weight:300}
h1{font-size:clamp(2.3rem,5.5vw,3.4rem);text-transform:uppercase;letter-spacing:.03em}
h2{font-size:clamp(1.6rem,3.2vw,2rem);margin-bottom:.7em;text-transform:uppercase;letter-spacing:.02em}
h3{font-size:1.05rem;margin-bottom:.5em;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--ink)}
p{margin-bottom:1.15rem;color:#33424D;font-size:1.05rem}
a{color:var(--accent-dark);text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%;height:auto;display:block}

.btn{display:inline-flex;align-items:center;gap:8px;padding:16px 32px;border-radius:var(--radius);
  font-family:var(--font-body);font-weight:700;font-size:.92rem;letter-spacing:.08em;text-transform:uppercase;
  border:1px solid transparent;cursor:pointer;transition:all .18s ease;white-space:nowrap;min-height:52px}
.btn:hover{text-decoration:none}
.btn--red{background:var(--cta);color:var(--ink);border-color:var(--cta);font-weight:800}
.btn--red:hover{background:var(--cta-dark);border-color:var(--cta-dark)}
.btn--navy{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn--navy:hover{background:var(--ink);color:var(--bg)}
.btn--gold{background:var(--cta);color:var(--ink);border-color:var(--cta);font-weight:800}
.btn--gold:hover{background:var(--cta-dark);border-color:var(--cta-dark)}
.btn--teal{background:transparent;color:var(--bg);border-color:rgba(247,244,238,.4)}
.btn--teal:hover{background:rgba(247,244,238,.12)}
.btn--lg{padding:19px 38px;font-size:1rem}
@media(max-width:600px){
  .btn{width:100%;justify-content:center}
}

.site-header{position:sticky;top:0;z-index:50;background:rgba(247,244,238,.94);backdrop-filter:blur(6px);border-bottom:1px solid var(--line)}
.site-nav{padding:0}
.nav{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:18px 24px}
.nav__logo{font-family:var(--font-head);font-weight:500;font-size:1.05rem;text-transform:uppercase;letter-spacing:.08em;color:var(--ink);white-space:nowrap}
.nav__links{display:flex;align-items:center;gap:26px;list-style:none}
.nav__links a{color:#33424D;font-weight:600;font-size:.85rem;text-transform:uppercase;letter-spacing:.06em}
.nav__links a:hover{color:var(--ink);text-decoration:none}
.has-dropdown{position:relative}
/* Dropdown visibility is JS-driven (see steps.js __initDropdown), not pure
   CSS :hover — a plain :hover dropdown closes the instant the cursor leaves
   the trigger's exact box, which is fragile to normal imprecise mouse
   movement (user-reported: "whenever I try to click any of these it
   disappears"). JS adds a short grace period before closing so the cursor
   has room to travel down into the submenu. The `.open` class below is
   toggled by JS; :hover is kept as a harmless progressive-enhancement
   fallback for the brief moment before JS attaches. */
.dropdown{display:none;position:absolute;top:100%;left:0;background:var(--bg);border:1px solid var(--line);min-width:220px;padding:6px 0;margin-top:14px}
.has-dropdown:hover .dropdown,.has-dropdown.open .dropdown{display:block}
.dropdown li{list-style:none}
.dropdown a{display:block;padding:12px 18px;color:#33424D;font-weight:500;letter-spacing:.02em;text-transform:none;font-size:.95rem}
.dropdown a:hover{background:var(--bg-alt);text-decoration:none}
/* Nav phone button: solid CTA orange, always visible in the sticky header —
   mentor feedback: "can I reach you immediately" needs to be answerable
   without scrolling, on every page, at all times. */
.nav__call{background:var(--cta);border:1px solid var(--cta);padding:11px 20px;color:var(--ink)!important;font-weight:800;letter-spacing:.04em}
.nav__call:hover{background:var(--cta-dark);border-color:var(--cta-dark);color:var(--ink)!important}
.nav__toggle{display:none;background:none;border:0;font-size:1.7rem;color:var(--ink);cursor:pointer;padding:6px}
@media(max-width:900px){
  .nav__links{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;background:var(--bg);border-bottom:1px solid var(--line);padding:16px 24px;gap:4px;max-height:calc(100vh - 70px);overflow-y:auto}
  .nav__links.open{display:flex}
  .nav__links li{width:100%}
  .nav__links > li > a{display:block;padding:14px 4px;border-bottom:1px solid var(--line);font-size:.95rem}
  .dropdown{position:static;display:block;border:0;padding:4px 0 4px 14px;min-width:0;margin-top:6px}
  .nav__toggle{display:block}
  .nav__call{display:inline-block;margin-top:10px;text-align:center;border-bottom:none!important}
}

.hero{background:var(--bg)}
.hero__split{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center;padding:72px 24px}
.hero__inner{padding:72px 24px}
.hero__eyebrow{display:block;font-size:.85rem;font-weight:700;text-transform:uppercase;letter-spacing:.14em;color:var(--accent-dark);margin-bottom:18px}
.hero h1{margin:0 0 22px}
.hero__checklist{list-style:none;margin:22px 0;display:flex;flex-wrap:wrap;gap:0;font-size:.88rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:#3A4A56}
.hero__checklist li{display:inline}
.hero__checklist li:not(:last-child)::after{content:"  \2022  ";color:var(--accent)}
.hero__cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:30px}
.hero__photo img{border-radius:var(--radius);border:1px solid var(--line)}
@media(max-width:900px){.hero__split{grid-template-columns:1fr;padding:48px 20px;gap:36px}.hero__inner{padding:0}}
@media(max-width:600px){
  .hero__cta{flex-direction:column;align-items:stretch}
  /* The 8-word uppercase display H1 wraps to ~6 lines at the 375px floor
     size, eating ~28% of the first mobile screen before any CTA or photo is
     visible. Tighten just the hero headline on small screens — body/button
     text stays at the larger sizes set for the 40+ audience; this is a
     display-heading proportion fix, not a legibility regression. */
  .hero h1{font-size:1.7rem;letter-spacing:.01em}
}

.section{padding:72px 0}
.section--alt{background:var(--bg-alt)}
.section__lead{max-width:62ch;color:#33424D;font-size:1.08rem}
.center{text-align:center}
.center .section__lead{margin:0 auto}
@media(max-width:600px){.section{padding:52px 0}}

.split{display:grid;grid-template-columns:58fr 42fr;gap:48px;align-items:center}
@media(max-width:900px){.split{grid-template-columns:1fr}}

.grid{display:grid;gap:1px;background:var(--line)}
.grid--2{grid-template-columns:repeat(2,1fr)}
.grid--3{grid-template-columns:repeat(3,1fr)}
@media(max-width:900px){.grid--3{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.grid--2,.grid--3{grid-template-columns:1fr}}
.card{background:var(--bg);border-top:3px solid var(--accent);padding:32px 28px}
.section--alt .card{background:var(--bg-alt)}
.card h3{margin-bottom:.6em;font-size:1.1rem}
.card p{font-size:1rem;margin-bottom:.6em}
.card a{font-size:.85rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em}

.linklist{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;list-style:none;background:var(--line)}
@media(max-width:800px){.linklist{grid-template-columns:repeat(2,1fr)}}
@media(max-width:500px){.linklist{grid-template-columns:1fr}}
.linklist a{display:block;padding:18px 18px;background:var(--bg);color:#33424D;font-weight:600;font-size:.98rem}
.linklist a:hover{background:var(--bg-alt);color:var(--ink);text-decoration:none}

.faq details{background:var(--bg);border:1px solid var(--line);padding:6px 22px;margin-bottom:1px;text-align:left}
.faq summary{cursor:pointer;font-weight:600;font-family:var(--font-body);font-size:1.1rem;padding:20px 0;list-style:none;color:var(--ink)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";float:right;color:var(--accent);font-weight:300}
.faq details[open] summary::after{content:"\2013"}
.faq details>p{padding-bottom:20px;font-size:1.02rem}

.phone-strip{background:var(--bg-dark);color:#fff;padding:64px 0;text-align:center}
.phone-strip h2{color:#fff}
.phone-strip .sub{color:rgba(247,244,238,.75);font-size:1.02rem}
.phone-strip .btns{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:24px}
.phone-strip .btn--navy{background:transparent;color:#fff;border-color:rgba(247,244,238,.5)}
.phone-strip .btn--navy:hover{background:rgba(247,244,238,.12);color:#fff}
@media(max-width:600px){.phone-strip .btns{flex-direction:column;align-items:stretch;max-width:340px;margin-left:auto;margin-right:auto}}

.form-card--teal{background:var(--bg-dark);color:#fff;padding:32px;border:1px solid var(--line-dark)}
.form-card--teal h3{color:#fff}
.field{margin-bottom:16px}
.field label{display:block;font-weight:600;font-size:.85rem;text-transform:uppercase;letter-spacing:.04em;margin-bottom:8px}
.field input,.field textarea,.field select{width:100%;padding:14px;border:1px solid var(--line);border-radius:0;font-family:var(--font-body);font-size:1.05rem;background:var(--bg)}
.field textarea{min-height:110px;resize:vertical}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:600px){.form-row{grid-template-columns:1fr}}

/* ---------- 3-step quote form ---------- */
.growth-form{background:var(--bg-dark);color:#fff;padding:40px 36px;border:1px solid var(--line-dark)}
@media(max-width:600px){.growth-form{padding:30px 22px}}
.form-progress{display:flex;gap:10px;margin-bottom:28px}
.form-progress span{width:34px;height:34px;border-radius:50%;border:1px solid rgba(247,244,238,.35);display:flex;align-items:center;justify-content:center;font-family:var(--font-head);font-size:.9rem;color:rgba(247,244,238,.5)}
.form-progress span.is-active{border-color:var(--cta);color:var(--cta);font-weight:700}
.form-step legend{font-family:var(--font-head);font-weight:300;text-transform:uppercase;letter-spacing:.02em;font-size:1.3rem;color:#fff;margin-bottom:22px;padding:0}
.form-step legend span{display:block;font-family:var(--font-body);font-size:.72rem;font-weight:700;letter-spacing:.14em;color:var(--cta);margin-bottom:8px;text-transform:uppercase}
.form-step label{display:block;font-weight:600;font-size:.82rem;text-transform:uppercase;letter-spacing:.04em;margin-bottom:20px;color:rgba(247,244,238,.85)}
.form-step > label > input[type=text],.form-step > label > input[type=email],.form-step > label > input[type=tel],.form-step textarea{
  width:100%;margin-top:9px;padding:14px;border:1px solid var(--line-dark);border-radius:0;
  font-family:var(--font-body);font-size:1.05rem;font-weight:400;text-transform:none;letter-spacing:normal;
  background:rgba(247,244,238,.06);color:#fff}
.form-step textarea{min-height:100px;resize:vertical}
.choice-group{margin-bottom:22px}
.choice-group>p{font-weight:600;font-size:.82rem;text-transform:uppercase;letter-spacing:.04em;margin-bottom:14px;color:rgba(247,244,238,.85)}
.choice-group label{display:flex;align-items:center;gap:10px;border:1px solid var(--line-dark);padding:13px 16px;margin-bottom:8px;
  font-weight:500;font-size:.98rem;text-transform:none;letter-spacing:normal;cursor:pointer;transition:border-color .15s ease;color:#fff}
.choice-group label:hover{border-color:var(--cta)}
.choice-group input[type=checkbox]{width:18px;height:18px;accent-color:var(--cta);flex-shrink:0}
.choice-group.two-col{display:grid;grid-template-columns:1fr 1fr;gap:0 12px}
@media(max-width:600px){.choice-group.two-col{grid-template-columns:1fr}}
.field-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px 14px;margin-bottom:24px}
@media(max-width:600px){.field-grid{grid-template-columns:1fr}}
.field-grid label{margin-bottom:0}
.field-grid input{width:100%;margin-top:9px;padding:14px;border:1px solid var(--line-dark);border-radius:0;font-family:var(--font-body);font-size:1.05rem;font-weight:400;text-transform:none;letter-spacing:normal;background:rgba(247,244,238,.06);color:#fff}
.form-actions{margin-top:8px}
.form-actions.split{display:flex;justify-content:space-between;align-items:center;gap:14px}
@media(max-width:600px){.form-actions.split{flex-direction:column-reverse;align-items:stretch}}
.growth-form .btn--navy{color:#fff;border-color:rgba(247,244,238,.4)}
.growth-form .btn--navy:hover{background:rgba(247,244,238,.12);color:#fff}
.trust-line{margin-top:16px;font-size:.85rem;color:rgba(247,244,238,.55);text-align:center}

/* VAPI widget floating fix — the SDK's own injected CSS sets #vapi-support-btn
   to position:absolute (anchored to the document, so it scrolls away with
   the page instead of floating). Force it fixed with !important so it wins
   over their stylesheet regardless of load order. Reported by user 2026-08-28
   ("as I scroll down, the number stays in view"). */
#vapi-support-btn{position:fixed !important;bottom:40px !important;right:40px !important;top:auto !important}
@media(max-width:600px){#vapi-support-btn{bottom:20px !important;right:20px !important}}

.site-footer{background:var(--bg-dark);color:rgba(247,244,238,.75);padding:64px 0 30px}
.site-footer h4{color:#fff;margin-bottom:16px;font-size:.85rem;text-transform:uppercase;letter-spacing:.08em;font-weight:600}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px}
@media(max-width:800px){.footer-grid{grid-template-columns:1fr 1fr}}
@media(max-width:480px){.footer-grid{grid-template-columns:1fr}}
.site-footer ul{list-style:none}
.site-footer li{margin-bottom:11px}
.site-footer a{color:rgba(247,244,238,.72);font-size:.98rem}
.site-footer a:hover{color:#fff}
.footer-bottom{border-top:1px solid var(--line-dark);margin-top:40px;padding-top:22px;font-size:.85rem;color:rgba(247,244,238,.5)}
.footer-disclaimer{font-size:.92rem;color:rgba(247,244,238,.6);margin-top:10px;line-height:1.65}
.wc-phone{font-weight:700}