/* Your Senior Health Benefits Review - landing page design system
   Senior-optimized: nothing here is allowed to be small.
   Body 20px, tap targets 44px+, WCAG AA minimum and AAA on body text. */

:root{
  --navy:#122844; --navy-deep:#0c1c30; --navy-soft:#1d3a5f;
  --cream:#e8e2d3; --cream-lt:#f5f1e8;
  --red:#a02828; --red-dk:#8a2222;
  --ink:#16202b; --ink-soft:#43536a;
  --white:#fff; --line:#d6cfc0;
  --ok:#1f6b45;
  --shadow:0 2px 4px rgba(12,28,48,.06),0 8px 24px rgba(12,28,48,.10);
  --shadow-lg:0 4px 8px rgba(12,28,48,.08),0 16px 48px rgba(12,28,48,.16);
  --r:10px; --r-lg:16px;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --serif:Georgia,"Iowan Old Style","Times New Roman",serif;
  --wrap:1120px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;font-size:20px}  /* rem base = 20px so every rem size below is senior-scale. Do not change. */
body{
  margin:0;font-family:var(--sans);font-size:1rem;line-height:1.6;
  color:var(--ink);background:var(--white);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--navy);text-underline-offset:3px}

/* ---------- layout ---------- */
.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 20px}
.section{padding:56px 0}
.section--tight{padding:40px 0}
.section--cream{background:var(--cream-lt)}
.section--navy{background:var(--navy);color:var(--cream-lt)}
.section--navy h2,.section--navy h3{color:var(--white)}

/* ---------- type ---------- */
h1,h2,h3{font-family:var(--serif);line-height:1.18;margin:0 0 .5em;color:var(--navy);letter-spacing:-.01em}
h1{font-size:clamp(2rem,5.4vw,3.15rem);font-weight:700}
h2{font-size:clamp(1.6rem,3.6vw,2.35rem)}
h3{font-size:clamp(1.2rem,2.2vw,1.45rem)}
p{margin:0 0 1.1em}
.lede{font-size:clamp(1.1rem,2.1vw,1.32rem);line-height:1.55;color:var(--ink-soft)}
.section--navy .lede{color:#c8d4e4}
.eyebrow{
  font-family:var(--sans);font-size:.82rem;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;color:var(--red);margin:0 0 .8em
}
.section--navy .eyebrow{color:#f0c9c9}
.center{text-align:center}
.mw-60{max-width:62ch}
.mw-60.center{margin-left:auto;margin-right:auto}

/* ---------- flag accent ---------- */
.flag{display:inline-flex;height:5px;width:52px;border-radius:3px;overflow:hidden;vertical-align:middle}
.flag i{flex:1}
.flag i:nth-child(1){background:#a02828}
.flag i:nth-child(2){background:#f5f1e8}
.flag i:nth-child(3){background:#122844}

/* ---------- header ---------- */
.hdr{background:var(--navy);color:var(--white);position:relative;z-index:20}
.hdr__in{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:76px;padding:10px 20px;max-width:var(--wrap);margin:0 auto}
.hdr__brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--white)}
.hdr__mark{width:44px;height:44px;flex:none}
.hdr__name{font-family:var(--serif);font-size:1.06rem;line-height:1.2;font-weight:700}
.hdr__name small{display:block;font-family:var(--sans);font-size:.72rem;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:#a9bdd6;margin-top:3px}
.hdr__tel{
  display:inline-flex;align-items:center;gap:9px;min-height:48px;padding:0 20px;
  background:var(--red);color:var(--white);border-radius:var(--r);
  font-size:1.06rem;font-weight:700;text-decoration:none;white-space:nowrap
}
.hdr__tel:hover{background:var(--red-dk)}
.hdr__tel svg{width:19px;height:19px;flex:none}

/* ---------- hero ---------- */
.hero{background:linear-gradient(168deg,var(--navy) 0%,var(--navy-deep) 100%);color:var(--white);padding:52px 0 60px;position:relative;overflow:hidden}
.hero::after{content:"";position:absolute;right:-12%;top:-30%;width:640px;height:640px;border-radius:50%;background:radial-gradient(circle,rgba(232,226,211,.09),transparent 62%);pointer-events:none}
.hero__grid{display:grid;grid-template-columns:1fr;gap:36px;position:relative;z-index:2}
.hero h1{color:var(--white)}
.hero .lede{color:#cdd9e8}
.hero__trust{display:flex;flex-wrap:wrap;gap:10px 22px;margin-top:24px;padding-top:22px;border-top:1px solid rgba(232,226,211,.22)}
.hero__trust span{display:inline-flex;align-items:center;gap:8px;font-size:.95rem;color:#c8d4e4;font-weight:600}
.hero__trust svg{width:17px;height:17px;flex:none;color:#8fd1a8}

/* ---------- form card ---------- */
.card{background:var(--white);border-radius:var(--r-lg);box-shadow:var(--shadow-lg);overflow:hidden}
.card__top{background:var(--cream);padding:22px 26px;border-bottom:3px solid var(--red)}
.card__top h2{font-size:1.42rem;margin:0 0 4px}
.card__top p{margin:0;font-size:.98rem;color:var(--ink-soft)}
.card__body{padding:26px}

.field{margin-bottom:19px}
.field:last-of-type{margin-bottom:22px}
label{display:block;font-size:1rem;font-weight:700;color:var(--navy);margin-bottom:7px}
label .opt{font-weight:500;color:var(--ink-soft);font-size:.9rem}
input[type=text],input[type=tel],input[type=email],select{
  width:100%;min-height:54px;padding:13px 15px;font-size:1.06rem;font-family:var(--sans);
  color:var(--ink);background:var(--white);border:2px solid var(--line);border-radius:var(--r);
  transition:border-color .14s,box-shadow .14s
}
input:focus,select:focus{outline:none;border-color:var(--navy);box-shadow:0 0 0 3px rgba(18,40,68,.15)}
input::placeholder{color:#9aa6b5}
select{appearance:none;background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2343536a' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;background-size:20px;padding-right:44px}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:14px}

/* radio pills */
.pills{display:flex;flex-wrap:wrap;gap:9px}
.pill{position:relative}
.pill input{position:absolute;opacity:0;width:0;height:0}
.pill span{
  display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 18px;
  border:2px solid var(--line);border-radius:var(--r);font-size:1rem;font-weight:600;
  color:var(--ink-soft);background:var(--white);cursor:pointer;transition:.14s
}
.pill input:checked+span{border-color:var(--navy);background:var(--navy);color:var(--white)}
.pill input:focus-visible+span{box-shadow:0 0 0 3px rgba(18,40,68,.28)}

/* consent */
.consent{display:flex;gap:12px;align-items:flex-start;background:var(--cream-lt);border:1px solid var(--line);border-radius:var(--r);padding:15px}
.consent input{width:24px;height:24px;margin:2px 0 0;flex:none;accent-color:var(--navy)}
.consent label{font-size:.88rem;font-weight:500;color:var(--ink-soft);line-height:1.5;margin:0}

/* buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:60px;padding:0 30px;width:100%;
  background:var(--red);color:var(--white);border:none;border-radius:var(--r);
  font-family:var(--sans);font-size:1.16rem;font-weight:700;cursor:pointer;
  text-decoration:none;transition:background .14s,transform .08s
}
.btn svg{width:21px;height:21px;flex:none}   /* unconstrained SVGs blew up the hero CTA */
.btn{white-space:nowrap}
.btn:hover{background:var(--red-dk)}
.btn:active{transform:translateY(1px)}
.btn[disabled]{opacity:.6;cursor:not-allowed}
.btn--ghost{background:transparent;color:var(--white);border:2px solid rgba(232,226,211,.5)}
.btn--ghost:hover{background:rgba(232,226,211,.12)}
.btn--navy{background:var(--navy)}
.btn--navy:hover{background:var(--navy-deep)}
.btn--auto{width:auto}
.formnote{font-size:.86rem;color:var(--ink-soft);text-align:center;margin:14px 0 0;line-height:1.5}

/* ---------- steps ---------- */
.steps{display:grid;grid-template-columns:1fr;gap:24px;counter-reset:s}
.step{position:relative;padding-left:66px}
.step::before{
  counter-increment:s;content:counter(s);
  position:absolute;left:0;top:-4px;width:48px;height:48px;border-radius:50%;
  background:var(--navy);color:var(--white);font-family:var(--serif);font-size:1.35rem;font-weight:700;
  display:flex;align-items:center;justify-content:center
}
.step h3{margin-bottom:.3em}
.step p{margin:0;color:var(--ink-soft);font-size:1.02rem}

/* ---------- checklist ---------- */
.checks{list-style:none;margin:0;padding:0;display:grid;gap:15px}
.checks li{display:flex;gap:13px;align-items:flex-start;font-size:1.06rem;line-height:1.5}
.checks svg{width:26px;height:26px;flex:none;margin-top:1px;color:var(--ok)}
.section--navy .checks svg{color:#8fd1a8}

/* ---------- agent ---------- */
.agent{display:grid;grid-template-columns:1fr;gap:28px;align-items:center}
.agent__photo{border-radius:var(--r-lg);box-shadow:var(--shadow);width:100%;max-width:330px;margin:0 auto;background:var(--cream);aspect-ratio:4/5;object-fit:cover}
.agent__ph{display:flex;align-items:center;justify-content:center;text-align:center;padding:24px;font-size:.9rem;color:var(--ink-soft);border:2px dashed var(--line)}

/* ---------- alt path ---------- */
.alt{background:var(--cream);border-left:5px solid var(--red);border-radius:var(--r);padding:22px 24px}
.alt p{margin:0;font-size:1.06rem}
.alt strong{color:var(--navy)}

/* ---------- footer ---------- */
.ftr{background:var(--navy-deep);color:#a9bdd6;padding:44px 0 36px;font-size:.9rem;line-height:1.65}
.ftr a{color:#cdd9e8}
.ftr__brand{display:flex;align-items:center;gap:12px;margin-bottom:20px}
.ftr__brand img,.ftr__brand svg{width:40px;height:40px}
.ftr__name{font-family:var(--serif);color:var(--white);font-size:1.02rem;font-weight:700}
.ftr__disc{border-top:1px solid rgba(169,189,214,.22);margin-top:24px;padding-top:20px;font-size:.83rem;color:#8ba3c0}
.ftr__disc p{margin:0 0 .8em}
.ftr__links{display:flex;flex-wrap:wrap;gap:8px 20px;margin-top:16px}

/* ---------- sticky mobile CTA ---------- */
.sticky{
  position:fixed;left:0;right:0;bottom:0;z-index:40;display:none;gap:10px;padding:10px 14px;
  background:rgba(18,40,68,.97);backdrop-filter:blur(6px);
  box-shadow:0 -3px 18px rgba(0,0,0,.24)
}
.sticky .btn{min-height:52px;font-size:1.04rem;padding:0 16px}
.sticky .btn--ghost{border-color:rgba(232,226,211,.45)}

/* ---------- success ---------- */
.done{display:none;text-align:center;padding:16px 4px}
.done svg{width:60px;height:60px;color:var(--ok);margin:0 auto 14px}
.done h2{font-size:1.5rem}
.err{display:none;background:#fdecec;border:2px solid #e5a3a3;color:#7d1d1d;border-radius:var(--r);padding:13px 15px;font-size:.96rem;margin-bottom:16px}

/* ---------- responsive ---------- */
@media (min-width:900px){
  .hero{padding:72px 0 80px}
  .hero__grid{grid-template-columns:1.05fr .95fr;gap:52px;align-items:start}
  .section{padding:76px 0}
  .steps{grid-template-columns:repeat(3,1fr);gap:34px}
  .agent{grid-template-columns:330px 1fr;gap:44px}
  .checks{grid-template-columns:1fr 1fr;gap:16px 34px}
}
@media (max-width:899px){
  body{padding-bottom:98px}          /* clears the sticky bar (87px) with room */
  .sticky{display:flex}
  .sticky .btn{flex:1;white-space:nowrap}
  .hdr__name small{display:none}
  /* Mobile hero: the h1 was eating the entire first screen at 40px x 5 lines.
     Smaller head + tighter padding puts the form one thumb-flick away, and the
     sticky Start Review button jumps straight to it. */
  .hero{padding:32px 0 40px}
  h1{font-size:clamp(1.68rem,7vw,2.3rem)}
  .hero .lede{font-size:1.02rem}
  .hero__trust{margin-top:20px;padding-top:18px;gap:8px 18px}
  .hero__trust span{font-size:.86rem}
  .section{padding:44px 0}
}
@media (max-width:560px){
  /* Brand name was wrapping to 5 lines and pushing the phone button off screen. */
  .hdr__in{min-height:66px;gap:10px}
  .hdr__mark{width:38px;height:38px}
  .hdr__name{font-size:.8rem;line-height:1.22;max-width:8.2em}
  .hdr__tel{padding:0 13px;font-size:.92rem;min-height:46px;gap:7px}
  .hdr__tel svg{width:17px;height:17px}
  .card__top,.card__body{padding-left:19px;padding-right:19px}
}
@media (max-width:420px){
  .row2{grid-template-columns:1fr}
  .hdr__name{font-size:.75rem;max-width:7.4em}
  .hdr__tel{padding:0 11px;font-size:.86rem}
}
/* Reduced motion is handled by INVERSION, not override: nothing animates by
   default, and every animation lives inside a (prefers-reduced-motion:
   no-preference) block further down. See the MOTION SYSTEM section.
   The competitor site this was benchmarked against has exactly one
   prefers-reduced-motion block whose entire content is a Tailwind utility, and
   zero rules that stop any of its 11 running animations. */

/* ══════════════════════════════════════════════════════════════════════
   SITE COMPONENTS - added for the full site rebuild (2026-08-29).
   Everything above is the shared landing-page design system.
   ══════════════════════════════════════════════════════════════════ */

/* ---------- site nav ---------- */
.nav{display:flex;align-items:center;gap:4px;flex-wrap:wrap}
.nav a{
  color:#c8d4e4;text-decoration:none;font-size:.8rem;font-weight:600;
  padding:10px 13px;border-radius:8px;min-height:44px;display:inline-flex;align-items:center
}
.nav a:hover{background:rgba(232,226,211,.12);color:#fff}
.nav a[aria-current=page]{color:#fff;background:rgba(232,226,211,.16)}
.hdr__in--site{flex-wrap:wrap}
.navtoggle{
  display:none;background:none;border:2px solid rgba(232,226,211,.4);color:#fff;
  border-radius:8px;min-height:44px;min-width:44px;cursor:pointer;align-items:center;justify-content:center
}
.navtoggle svg{width:24px;height:24px}

/* ---------- generic page head ---------- */
.phead{background:linear-gradient(168deg,var(--navy) 0%,var(--navy-deep) 100%);color:#fff;padding:48px 0 52px}
.phead h1{color:#fff;margin-bottom:.35em}
.phead .lede{color:#cdd9e8;max-width:60ch}

/* ---------- cards grid ---------- */
.grid{display:grid;grid-template-columns:1fr;gap:22px}
.grid--3{grid-template-columns:1fr}
.tile{background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);padding:26px;box-shadow:var(--shadow)}
.tile--cream{background:var(--cream-lt)}
.tile h3{margin-bottom:.4em}
.tile p:last-child{margin-bottom:0}
.tile__ico{width:46px;height:46px;border-radius:10px;background:var(--navy);color:var(--cream-lt);display:flex;align-items:center;justify-content:center;margin-bottom:16px}
.tile__ico svg{width:25px;height:25px}

/* ---------- compare table (workshop vs us) ---------- */
.vs{display:grid;grid-template-columns:1fr;gap:22px}
.vs__col{border-radius:var(--r-lg);padding:26px;border:1px solid var(--line)}
.vs__col--bad{background:#f7f4f1}
.vs__col--good{background:var(--navy);color:var(--cream-lt);border-color:var(--navy)}
.vs__col--good h3{color:#fff}
.vs ul{list-style:none;margin:0;padding:0;display:grid;gap:13px}
.vs li{display:flex;gap:11px;align-items:flex-start;font-size:1rem;line-height:1.5}
.vs svg{width:22px;height:22px;flex:none;margin-top:2px}
.vs__col--bad svg{color:#9b3535}
.vs__col--good svg{color:#8fd1a8}

/* ---------- FAQ ---------- */
.faq{display:grid;gap:12px;max-width:78ch;margin:0 auto}
.faq details{border:1px solid var(--line);border-radius:var(--r);background:var(--white);overflow:hidden}
.faq details[open]{border-color:var(--navy);box-shadow:var(--shadow)}
.faq summary{
  cursor:pointer;list-style:none;padding:19px 54px 19px 21px;position:relative;
  font-weight:700;font-size:1.04rem;color:var(--navy);min-height:44px
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";position:absolute;right:21px;top:50%;width:12px;height:12px;
  border-right:3px solid var(--red);border-bottom:3px solid var(--red);
  transform:translateY(-70%) rotate(45deg);transition:transform .16s
}
.faq details[open] summary::after{transform:translateY(-30%) rotate(225deg)}
.faq .faq__a{padding:0 21px 20px;color:var(--ink-soft);font-size:1rem}
.faq .faq__a p:last-child{margin-bottom:0}

/* ---------- state list ---------- */
.states{display:grid;grid-template-columns:repeat(auto-fill,minmax(155px,1fr));gap:11px;list-style:none;margin:0;padding:0}
.states a{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  min-height:56px;padding:0 17px;background:var(--white);border:1px solid var(--line);
  border-radius:var(--r);text-decoration:none;color:var(--navy);font-weight:700;font-size:1rem
}
.states a:hover{border-color:var(--navy);box-shadow:var(--shadow)}
.states a span{color:var(--ink-soft);font-weight:600;font-size:.85rem}

/* ---------- carriers ---------- */
.carriers{display:grid;grid-template-columns:1fr;gap:26px}
.carriers h3{font-size:1.1rem;margin-bottom:.6em;padding-bottom:.5em;border-bottom:2px solid var(--line)}
.carriers ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.carriers li{font-size:1rem;color:var(--ink-soft)}

/* ---------- stat strip ---------- */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:20px;text-align:center}
.stat b{display:block;font-family:var(--serif);font-size:2.1rem;color:var(--navy);line-height:1.1}
.section--navy .stat b{color:#fff}
.stat span{font-size:.92rem;color:var(--ink-soft)}
.section--navy .stat span{color:#c8d4e4}

/* ---------- callout ---------- */
.callout{background:var(--cream);border-left:5px solid var(--red);border-radius:var(--r);padding:24px 26px}
.callout h3{margin-top:0}
.callout p:last-child{margin-bottom:0}

/* ---------- prose (guides / legal) ---------- */
.prose{max-width:72ch}
.prose h2{margin-top:1.5em}
.prose h3{margin-top:1.3em}
.prose ul,.prose ol{padding-left:1.3em;margin:0 0 1.1em}
.prose li{margin-bottom:.55em}
.prose a{color:var(--red);font-weight:600}

/* ---------- footer nav ---------- */
.ftr__cols{display:grid;grid-template-columns:1fr;gap:26px;margin-bottom:26px}
.ftr__cols h4{color:#fff;font-family:var(--sans);font-size:.78rem;font-weight:700;letter-spacing:.11em;text-transform:uppercase;margin:0 0 12px}
.ftr__cols ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.ftr__cols a{text-decoration:none}
.ftr__cols a:hover{text-decoration:underline}

@media (min-width:760px){
  .grid--3{grid-template-columns:repeat(3,1fr)}
  .grid--2{grid-template-columns:repeat(2,1fr)}
  .vs{grid-template-columns:1fr 1fr;gap:26px}
  .carriers{grid-template-columns:repeat(3,1fr)}
  .ftr__cols{grid-template-columns:2fr 1fr 1fr}
  .phead{padding:66px 0 70px}
}
@media (max-width:759px){
  .nav{display:none;width:100%;flex-direction:column;align-items:stretch;padding-bottom:10px}
  .nav.open{display:flex}
  .nav a{font-size:1rem;padding:13px}
  .navtoggle{display:inline-flex}
}

/* ══════════════════════════════════════════════════════════════════════
   HERO v2 (2026-08-29) — depth, accent headline, stat chips, badge.
   Design language only. Their copy patterns ($0 premiums, "free quote",
   dollar-savings testimonials, unverifiable ratings) are deliberately NOT
   carried over; see BUILD_LOG.
   ══════════════════════════════════════════════════════════════════ */
.hero--v2{
  position:relative;overflow:hidden;
  background:
    radial-gradient(900px 480px at 78% 8%, rgba(90,140,210,.20), transparent 62%),
    radial-gradient(700px 420px at 8% 92%, rgba(160,40,40,.16), transparent 60%),
    linear-gradient(165deg,#16304f 0%,var(--navy) 42%,var(--navy-deep) 100%);
}
.hero--v2::before{           /* faint texture, adds depth without an image */
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:
    radial-gradient(1.5px 1.5px at 18% 22%, rgba(255,255,255,.30), transparent),
    radial-gradient(1.5px 1.5px at 62% 14%, rgba(255,255,255,.22), transparent),
    radial-gradient(1.5px 1.5px at 84% 44%, rgba(255,255,255,.26), transparent),
    radial-gradient(1.5px 1.5px at 34% 68%, rgba(255,255,255,.18), transparent),
    radial-gradient(1.5px 1.5px at 72% 78%, rgba(255,255,255,.22), transparent);
}
.hero--v2 .wrap{position:relative;z-index:2}

/* pill eyebrow with a live dot */
.pill-eyebrow{
  display:inline-flex;align-items:center;gap:9px;padding:8px 16px;
  border:1px solid rgba(232,226,211,.26);border-radius:999px;
  background:rgba(232,226,211,.07);
  font-size:.78rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:#cdd9e8;margin:0 0 22px
}
.pill-eyebrow i{width:8px;height:8px;border-radius:50%;background:#8fd1a8;flex:none}

/* the accent word */
.accent{color:#7fb0e8;position:relative;white-space:nowrap}
.accent::after{
  content:"";position:absolute;left:0;right:0;bottom:-.10em;height:.075em;
  border-radius:3px;background:linear-gradient(90deg,#7fb0e8,rgba(127,176,232,.15))
}

/* rounded CTAs */
.btn--pill{border-radius:999px;padding:0 30px}
.btn--pill svg{width:19px;height:19px}

/* stat chips */
.chips{display:flex;flex-wrap:wrap;gap:11px;margin-top:30px}
.chip{
  display:inline-flex;align-items:center;gap:11px;padding:11px 17px;
  border:1px solid rgba(232,226,211,.20);border-radius:14px;
  background:rgba(232,226,211,.06)
}
.chip svg{width:19px;height:19px;flex:none;color:#8fd1a8}
.chip b{color:#fff;font-family:var(--serif);font-size:1.12rem;line-height:1}
.chip span{color:#a9bdd6;font-size:.78rem;font-weight:600;line-height:1.25}

/* floating credential badge */
.badge-float{
  display:inline-flex;align-items:center;gap:13px;padding:15px 20px;
  border:1px solid rgba(232,226,211,.22);border-radius:16px;
  background:rgba(12,28,48,.72);backdrop-filter:blur(8px);box-shadow:var(--shadow-lg)
}
.badge-float__ico{
  width:42px;height:42px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(140deg,#2c5c96,#1b3c66)
}
.badge-float__ico svg{width:21px;height:21px;color:#cfe3ff}
.badge-float b{display:block;color:#fff;font-size:.94rem;line-height:1.3}
.badge-float span{display:block;color:#a9bdd6;font-size:.79rem;margin-top:2px}

/* service cards */
.svc{display:grid;grid-template-columns:1fr;gap:22px}
.svc__card{
  background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:28px;box-shadow:var(--shadow);display:flex;flex-direction:column
}
.svc__card:hover{border-color:var(--navy);box-shadow:var(--shadow-lg)}
.svc__ico{
  width:50px;height:50px;border-radius:13px;display:flex;align-items:center;justify-content:center;
  background:var(--navy);color:var(--cream-lt);margin-bottom:17px
}
.svc__ico svg{width:26px;height:26px}
.svc__card h3{margin-bottom:.45em}
.svc__card>p{color:var(--ink-soft);font-size:1rem}
.svc__list{list-style:none;margin:0 0 20px;padding:0;display:grid;gap:9px}
.svc__list li{display:flex;gap:9px;align-items:center;font-size:.94rem;font-weight:600;color:var(--navy)}
.svc__list svg{width:17px;height:17px;flex:none;color:var(--ok)}
.svc__card .btn{margin-top:auto}

@media (min-width:900px){
  .svc{grid-template-columns:repeat(3,1fr)}
  .hero--v2{padding:84px 0 92px}
}
@media (max-width:899px){
  .chips{gap:9px}
  .chip{padding:9px 13px}
  .badge-float{margin-top:26px}
}

/* ---- photography ---- */
picture{display:block}
.ph{display:block;width:100%;height:auto;border-radius:var(--r-lg);object-fit:cover}
.ph--hero{border-radius:var(--r-lg);box-shadow:var(--shadow-lg);aspect-ratio:3/2}
.ph--portrait{aspect-ratio:4/5;box-shadow:var(--shadow-lg)}
.ph--wide{aspect-ratio:16/9}
.ph--card{border-radius:var(--r-lg) var(--r-lg) 0 0;aspect-ratio:16/9;margin:-26px -26px 20px}
.ph--band{aspect-ratio:21/9;border-radius:0}

/* photo + copy split */
.split{display:grid;grid-template-columns:1fr;gap:32px;align-items:center}
.split--rev .split__media{order:-1}
@media (min-width:900px){
  .split{grid-template-columns:1fr 1fr;gap:52px}
  .split--rev .split__media{order:0}
}

/* page hero with a photo */
.phead--photo{padding-bottom:0}
.phead__img{margin-top:40px;margin-bottom:-90px;position:relative;z-index:3}
.section--after-photo{padding-top:120px}

/* guide cards with images */
.tile--img{padding:26px;overflow:hidden}

/* ══════════════════════════════════════════════════════════════════════════
   MOTION SYSTEM  (2026-08-29)

   THE RULE: motion is opt-IN. Everything below the base layer sits inside
   @media (prefers-reduced-motion: no-preference). A visitor who has told their
   OS they get motion sick gets a completely static site, and it is structurally
   impossible to ship an animation that ignores that — you would have to put it
   outside the block on purpose.

   This audience is over 65. Vestibular sensitivity rises sharply with age, so
   this is the one audience where it matters most.

   PERFORMANCE RULE: animate `transform` and `opacity` ONLY. Both are
   GPU-composited and skip layout and paint entirely. Blur stays on a STATIC
   parent while only the child's transform moves. Animating a blurred element
   forces the browser to re-rasterise a large blurred surface every frame, which
   is what makes the benchmarked site expensive on the older phones and tablets
   its own audience actually uses.
   BUDGET: <=10 running animations, ZERO animated blur over 80px.
   ══════════════════════════════════════════════════════════════════════ */

/* ---- base (always applied, no motion) ---- */
.fx{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.fx>*{position:absolute;border-radius:50%}
.orb{filter:blur(120px);opacity:.5}          /* blur on the STATIC wrapper */
.orb>i{display:block;width:100%;height:100%;border-radius:50%}
.orb--1{width:620px;height:620px;top:-14%;right:-8%;background:rgba(70,120,190,.42)}
.orb--2{width:520px;height:520px;bottom:-18%;left:-10%;background:rgba(160,40,40,.26)}
.orb--3{width:440px;height:440px;top:38%;left:44%;background:rgba(120,90,190,.22)}
.aurora{left:-10%;right:-10%;top:22%;height:320px;border-radius:0;
  background:linear-gradient(90deg,transparent,rgba(120,170,235,.16),transparent);filter:blur(70px)}
.beam{width:150%;height:190px;top:8%;left:-25%;border-radius:0;transform:rotate(24deg);
  background:linear-gradient(90deg,transparent,rgba(210,228,255,.07),transparent);filter:blur(7px);opacity:.05}
.dust{width:3px;height:3px;background:rgba(220,235,255,.85);opacity:.35}
.dust:nth-child(4){top:70%;left:12%}   .dust:nth-child(5){top:32%;left:26%}
.dust:nth-child(6){top:82%;left:47%}   .dust:nth-child(7){top:24%;left:63%}
.dust:nth-child(8){top:60%;left:78%}   .dust:nth-child(9){top:44%;left:88%}

/* reveal: visible by default so a JS failure can never hide content */
.rv{opacity:1;transform:none}

/* ---- motion, opt-in ---- */
@media (prefers-reduced-motion: no-preference){

  /* Three orbs. Blur is on .orb (static); only the inner <i> transforms.
     24/30/36s — deliberately slower than the 15-22s benchmarked, because calmer
     reads as more premium and is far gentler for this audience. */
  .orb>i{will-change:transform}
  .orb--1>i{animation:drift1 24s ease-in-out infinite}
  .orb--2>i{animation:drift2 30s ease-in-out infinite}
  .orb--3>i{animation:drift3 36s ease-in-out infinite}
  @keyframes drift1{0%,100%{transform:translate3d(0,0,0) scale(1)}
    33%{transform:translate3d(52px,-38px,0) scale(1.12)}
    66%{transform:translate3d(-30px,26px,0) scale(.93)}}
  @keyframes drift2{0%,100%{transform:translate3d(0,0,0) scale(1)}
    33%{transform:translate3d(-44px,28px,0) scale(1.09)}
    66%{transform:translate3d(34px,-22px,0) scale(.95)}}
  @keyframes drift3{0%,100%{transform:translate3d(0,0,0) scale(1)}
    50%{transform:translate3d(28px,-30px,0) scale(1.14)}}

  /* one aurora band, not two — two competing bands is noise */
  .aurora{will-change:transform;animation:breathe 26s ease-in-out infinite}
  @keyframes breathe{0%,100%{transform:translate3d(0,0,0) scaleY(1)}
    50%{transform:translate3d(4%,0,0) scaleY(1.35)}}

  .beam{will-change:transform,opacity;animation:sweep 22s ease-in-out infinite}
  @keyframes sweep{0%,100%{opacity:.04;transform:rotate(24deg) translate3d(0,0,0)}
    50%{opacity:.08;transform:rotate(24deg) translate3d(70px,0,0)}}

  /* Six dust motes. Staggered durations AND delays so the loop never visibly
     repeats — the one genuinely clever thing on the benchmarked site. */
  .dust{will-change:transform,opacity}
  .dust:nth-child(4){animation:rise1  9s ease-in-out 0s   infinite}
  .dust:nth-child(5){animation:rise2 13s ease-in-out 1.5s infinite}
  .dust:nth-child(6){animation:rise3 11s ease-in-out 3s   infinite}
  .dust:nth-child(7){animation:rise1 15s ease-in-out 2s   infinite}
  .dust:nth-child(8){animation:rise2  8s ease-in-out 4.5s infinite}
  .dust:nth-child(9){animation:rise3 12s ease-in-out 1s   infinite}
  @keyframes rise1{0%,100%{opacity:.25;transform:translate3d(0,0,0) scale(1)}
    30%{opacity:.7;transform:translate3d(22px,-46px,0) scale(1.5)}
    70%{opacity:.35;transform:translate3d(-14px,-78px,0) scale(1)}}
  @keyframes rise2{0%,100%{opacity:.3;transform:translate3d(0,0,0) scale(1)}
    45%{opacity:.65;transform:translate3d(-28px,-56px,0) scale(1.3)}}
  @keyframes rise3{0%,100%{opacity:.35;transform:translate3d(0,0,0) scale(1)}
    50%{opacity:.75;transform:translate3d(18px,-64px,0) scale(1.45)}}

  /* Scroll reveal. THREE guards, because the failure mode is invisible content:
       1. .rv is hidden ONLY under html.js-rv, a class JS adds at runtime. No JS,
          no hiding — the page is simply complete.
       2. The observer only ADDS .is-rv, never removes it, so nothing can flicker
          or vanish on scroll-up.
       3. A failsafe timer in the script reveals everything after 2.5s no matter
          what. Verified necessary: IntersectionObserver does not fire at all in
          some headless/background contexts, and a reveal that depends on it
          firing would leave the page blank there. */
  html.js-rv .rv{opacity:0;transform:translate3d(0,16px,0);
      transition:opacity .6s cubic-bezier(.22,.61,.36,1),transform .6s cubic-bezier(.22,.61,.36,1)}
  html.js-rv .rv.is-rv{opacity:1;transform:translate3d(0,0,0)}

  /* micro-interactions */
  .tile,.svc__card,.states a,.faq details{transition:transform .22s cubic-bezier(.22,.61,.36,1),
    box-shadow .22s ease,border-color .22s ease}
  .tile:hover,.svc__card:hover,.states a:hover{transform:translateY(-3px)}
  .btn{transition:background .16s ease,transform .12s ease,box-shadow .2s ease}
  .btn:hover{transform:translateY(-1px)}
  .nav a::after{content:"";position:absolute;left:13px;right:13px;bottom:6px;height:2px;
    background:var(--red);transform:scaleX(0);transform-origin:left;transition:transform .22s ease}
  .nav a{position:relative}
  .nav a:hover::after,.nav a[aria-current=page]::after{transform:scaleX(1)}
}

/* internal page heroes: same language, dialled down. A full hero treatment on a
   200px header reads as noise rather than atmosphere. */
.phead{position:relative;overflow:hidden}
.phead .wrap{position:relative;z-index:2}
.fx--page .orb{filter:blur(90px);opacity:.42}
.fx--page .orb--1{width:420px;height:420px;top:-30%;right:-6%}
.fx--page .orb--2{width:340px;height:340px;bottom:-40%;left:-8%}
.fx--page .aurora{height:200px;top:10%;filter:blur(55px)}
.fx--page .beam{opacity:.035}
.fx--page .dust:nth-child(3){top:30%;left:18%}
.fx--page .dust:nth-child(4){top:62%;left:52%}
.fx--page .dust:nth-child(5){top:38%;left:81%}

/* ══════════════════════════════════════════════════════════════════════
   FOCUS + KEYBOARD  — WCAG 2.4.7.
   Previously only form inputs had a focus style, so a keyboard user tabbing
   through links, buttons and nav had no idea where they were. That matters
   more for this audience than most: keyboard and assistive-tech use is
   markedly higher over 65.
   :focus-visible so a mouse click never draws a ring, but every keyboard
   focus does.
   ══════════════════════════════════════════════════════════════════ */
:where(a,button,summary,[tabindex]):focus-visible{
  outline:3px solid var(--red);
  outline-offset:3px;
  border-radius:4px;
}
/* on navy, red-on-navy is too low contrast for an outline — use cream */
.hdr :focus-visible,.hero :focus-visible,.section--navy :focus-visible,
.ftr :focus-visible,.sticky :focus-visible{
  outline-color:#f0e6d2;
}
.faq summary:focus-visible{outline-offset:-3px}

/* skip link: first tab stop, hidden until focused */
.skip{
  position:absolute;left:12px;top:-60px;z-index:100;
  background:var(--red);color:#fff;padding:13px 20px;border-radius:0 0 var(--r) var(--r);
  font-weight:700;text-decoration:none;transition:top .18s ease;
}
.skip:focus{top:0}

/* footer group labels: h2 for correct document outline, styled small */
.ftr__h{color:#fff;font-family:var(--sans);font-size:.78rem;font-weight:700;
  letter-spacing:.11em;text-transform:uppercase;margin:0 0 12px}