:root{
  --navy:#12233f;
  --navy-2:#1b3055;
  --navy-3:#0c1a30;
  --paper:#f7f6f3;
  --paper-2:#eeece6;
  --white:#fff;
  --ink:#16203a;
  --ink-soft:#4a5670;
  --line:#e0dcd3;
  --line-dark:rgba(255,255,255,.18);
  --cta:#c2410c;
  --cta-hover:#9a3412;
  --gold:#d97706;          /* decorative / large text only */
  --gold-dark:#7d5206;     /* small text on light — clears 4.5:1 */
  --gold-light:#f0a92a;    /* small text on navy — clears 4.5:1 */
  --link:#9a3412;          /* body links on light backgrounds */
  --gold-soft:#fdf6ec;
  --header-bg:#e9f0fb;     /* the utility bar is light, not navy */
  --header-accent:#ee7600; /* everything that used to be white on the dark bar */
  --header-ink:#33405a;    /* header text that is not the accent */
  --header-muted:#5a6b86;
  --header-line:#d2dff1;
  --ok:#0f6b52;
  --radius:12px;
  --radius-sm:8px;
  --pill:999px;
  --read:680px;
  --wide:1440px;
  --sans:"Segoe UI",Optima,Candara,"Trebuchet MS",system-ui,sans-serif;
  --serif:Georgia,"Iowan Old Style","Times New Roman",serif;
  --mono:"Cascadia Mono","Segoe UI Mono",Consolas,ui-monospace,monospace;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);
  font:400 17px/1.62 var(--sans);padding-bottom:76px}
img{max-width:100%;height:auto}
p{margin:0 0 1em}
a{color:var(--link)}
h1,h2,h3{margin:0;font-family:var(--sans);font-weight:800;letter-spacing:-.022em;line-height:1.12}
/* Headings are held to two lines (one where marked). assets/js/home.js shrinks any that
   overrun; balance splits the lines evenly so a two-line heading never leaves one word
   stranded. Both need a stable line-height, which is why it is set above and not 'normal'. */
h1,h2{text-wrap:balance}
h1{font-size:clamp(2rem,5.2vw,3.4rem)}
h2{font-size:clamp(1.55rem,3.4vw,2.35rem);margin-bottom:.5em}
h3{font-size:1.13rem;font-weight:700;letter-spacing:-.01em;margin-bottom:.35em}

.wrap{max-width:var(--wide);margin:0 auto;padding:0 22px}
.narrow{max-width:var(--read);margin:0 auto}
section{padding:58px 0}
.band-paper{background:var(--paper)}
.band-paper2{background:var(--paper-2)}
.band-white{background:var(--white)}
.band-navy{background:var(--navy);color:#dbe3ef}
.band-navy h2,.band-navy h3{color:#fff}

/* ---------- utility trust bar ---------- */
.util{background:var(--header-bg);color:var(--header-accent);padding:6px 0;font-size:.98rem;
  border-bottom:1px solid var(--header-line)}
.util .wrap{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.util .brand{font:800 1.05rem/1 var(--sans);letter-spacing:-.02em;display:flex;align-items:center;gap:9px;
  color:var(--header-accent)}
.util .brand span{font:600 .66rem/1.3 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--header-muted)}
.util .rating{display:flex;align-items:center;gap:9px;color:var(--header-ink);font-weight:600}
.util .stars{color:var(--gold);letter-spacing:1.5px;font-size:1.05em}
.util .acts{display:flex;align-items:center;gap:12px}
.util .tel{color:var(--header-accent);text-decoration:none;font-weight:800;font-size:1.12rem;
  min-height:44px;padding:0 4px;display:inline-flex;align-items:center;letter-spacing:-.01em}
.util .tel:hover{text-decoration:underline}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  min-height:54px;padding:14px 24px;border-radius:var(--radius-sm);
  font:700 1.02rem/1.2 var(--sans);text-decoration:none;text-align:center;
  border:2px solid transparent;cursor:pointer;
  transition:background-color .16s ease,border-color .16s ease,transform .16s ease}
.btn-cta{background:var(--cta);color:#fff}
.btn-cta:hover{background:var(--cta-hover);transform:translateY(-1px)}
.btn-line{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn-line:hover{background:rgba(22,32,58,.06)}
.band-navy .btn-line,.hero .btn-line,.ctablock .btn-line{color:#fff;border-color:rgba(255,255,255,.55)}
.band-navy .btn-line:hover,.hero .btn-line:hover,.ctablock .btn-line:hover{background:rgba(255,255,255,.12)}
.btn-sm{min-height:44px;padding:10px 18px;font-size:.94rem}
.btn-row{display:flex;flex-wrap:wrap;gap:12px;margin:1.3em 0 0}
.btn-row .btn{flex:1 1 210px}
a:focus-visible,button:focus-visible,summary:focus-visible,
input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:3px solid var(--gold);outline-offset:3px;border-radius:6px}
.reassure{font-style:italic;color:var(--ink-soft);font-size:.93rem;margin:.9em 0 0}
.hero .reassure,.band-navy .reassure{color:#a8b6cd}

/* ---------- pills & chips ---------- */
.pill{display:inline-flex;align-items:center;gap:8px;border-radius:var(--pill);
  padding:8px 16px;font:700 .78rem/1.3 var(--sans);letter-spacing:.06em;text-transform:uppercase}
.pill-line{border:1px solid rgba(255,255,255,.35);color:#cddaee}
.chips{display:flex;flex-wrap:wrap;gap:9px;list-style:none;padding:0;margin:1.2em 0 0}
/* The parish list reads as a set, so it is laid out as a set: three equal columns,
   two tidy rows, instead of flex-wrap leaving a single orphan on the last line.
   Scoped to the modifier — the hero chips beside the calculator still wrap freely. */
.chips--grid{display:grid;grid-template-columns:1fr;gap:9px}
@media(min-width:560px){.chips--grid{grid-template-columns:repeat(3,1fr)}}
.chips--grid li{text-align:center;display:flex;align-items:center;justify-content:center}
.chips li{border-radius:var(--pill);padding:9px 16px;font:700 .82rem/1.3 var(--sans);
  background:var(--white);border:1px solid var(--line);color:var(--ink)}
.chips li.hot{background:var(--cta);border-color:var(--cta);color:#fff}
.hero .chips li{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.28);color:#fff}
.hero .chips li.hot{background:var(--cta);border-color:var(--cta)}

/* ---------- hero ---------- */
.hero{background:linear-gradient(160deg,var(--navy-2),var(--navy) 55%,var(--navy-3));
  color:#dbe3ef;padding:34px 0 52px;position:relative;overflow:hidden}
@media(min-width:980px){.hero{padding:52px 0 60px}}
.hero::after{content:"";position:absolute;right:-14%;top:-18%;width:760px;height:760px;
  background:radial-gradient(circle,rgba(217,119,6,.16),transparent 62%);pointer-events:none}
.hero .wrap{position:relative;z-index:2}
.hero-grid{display:grid;gap:34px}
/* The split starts at 1280px, not 980px. The headline lives in the left column, and below
   1280 that column is too narrow to hold it in two lines without shrinking it past the h2s
   further down the page. Stacked, the headline gets the full container and fits at full
   size, and the calculator simply follows it. */
@media(min-width:1280px){.hero-grid{grid-template-columns:1.05fr .95fr;gap:52px;align-items:start}}
.hero h1{color:#fff;margin:.35em 0 .4em}
.hero .lede{font-size:1.1rem;color:#c3cfe2;max-width:34em}
.checks{list-style:none;margin:1.5em 0 0;padding:0;display:grid;gap:12px}
.checks li{position:relative;padding-left:32px;color:#dde5f0;font-size:1rem;line-height:1.5}
.checks li::before{content:"";position:absolute;left:0;top:.28em;width:19px;height:19px;
  border-radius:50%;background:rgba(217,119,6,.22);border:1px solid rgba(217,119,6,.5)}
.checks li::after{content:"";position:absolute;left:6px;top:.52em;width:5px;height:9px;
  border-right:2px solid var(--gold);border-bottom:2px solid var(--gold);transform:rotate(42deg)}
.hero-review{margin-top:1.7em;background:rgba(255,255,255,.07);border:1px solid var(--line-dark);
  border-radius:var(--radius);padding:16px 18px;max-width:34em}
.hero-review .stars{color:var(--gold-light);letter-spacing:2px;font-size:.95rem}
.hero-review p{font-style:italic;color:#e3eaf4;margin:.4em 0 .5em;font-size:.98rem}
.hero-review cite{font-style:normal;font-size:.82rem;color:#9fb0c9}

/* ---------- the calculator card (hero proof element) ---------- */
.calc-card{background:var(--white);color:var(--ink);border-radius:var(--radius);
  box-shadow:0 24px 60px rgba(6,14,28,.4);overflow:hidden}
.calc-head{background:var(--gold-soft);border-bottom:1px solid #f0e0c8;padding:18px 22px}
.calc-head h2{font-size:1.16rem;margin:0 0 .25em;color:var(--ink)}
.calc-head p{margin:0;font-size:.9rem;color:var(--ink-soft)}
.calc-body{padding:22px}
.calc-body label{display:block;font:700 .78rem/1.4 var(--sans);letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-soft);margin-bottom:.5em}
.calc-body input[type=date]{width:100%;min-height:54px;padding:12px 14px;
  font:600 1.05rem/1 var(--mono);color:var(--ink);
  border:2px solid var(--line);border-radius:var(--radius-sm);background:#fff}
.calc-body input[type=date]:hover{border-color:var(--gold)}
.calc-note{font-size:.84rem;color:var(--ink-soft);margin:.7em 0 0}
.readout{margin-top:18px;padding-top:18px;border-top:1px dashed var(--line)}
.readout[hidden]{display:none}
.readout .label{font:700 .74rem/1.4 var(--sans);letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-soft);margin:0 0 .4em}
.readout .date{display:block;font:800 clamp(1.5rem,4vw,2rem)/1.1 var(--sans);
  color:var(--cta);letter-spacing:-.02em;margin:0 0 .5em}
.counter{display:inline-flex;align-items:baseline;gap:.4em;padding:9px 15px;border-radius:var(--pill);
  background:var(--gold-soft);border:1px solid #f0d9b4;margin-bottom:.7em}
.counter b{font:800 1.5rem/1 var(--sans);color:var(--gold);font-variant-numeric:tabular-nums}
.counter span{font:700 .74rem/1.3 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft)}
.readout p{font-size:.96rem;margin:.5em 0 0}
.readout .alert{color:var(--cta);font-weight:700}
.calc-foot{padding:0 22px 22px}
.calc-legal{font-size:.8rem;line-height:1.5;color:var(--ink-soft);margin:1em 0 0}

/* ---------- trust strip ---------- */
.trust{background:var(--white);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:22px 0}
.trust .wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:14px 26px}
.trust img{height:52px;width:auto;display:block}
.trust .seal{background:#fff;border:1px solid var(--line);border-radius:var(--radius-sm);padding:8px 12px;display:flex;align-items:center}
.trust .txt{font:700 .86rem/1.3 var(--sans);color:var(--ink-soft);max-width:19ch}

/* ---------- stat band ---------- */
/* This was the one block on the page with no .wrap, so it ran edge to edge while every
   other section stopped at the container. Wrapped, it lines up with the rest; the radius
   plus overflow:hidden keep the hairline grid clipped to the rounded corners. */
.stats-band{background:var(--paper);padding:26px 0}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:1px;
  background:var(--line-dark);border-radius:var(--radius);overflow:hidden}
.stat{background:var(--navy);padding:26px 16px;text-align:center}
.stat b{display:block;font:800 2.1rem/1 var(--sans);color:var(--gold);margin-bottom:6px;
  letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.stat span{font:700 .72rem/1.35 var(--sans);letter-spacing:.11em;text-transform:uppercase;color:#a9b8cf}

/* ---------- cards ---------- */
.grid{display:grid;gap:16px}
@media(min-width:640px){.g2{grid-template-columns:1fr 1fr}}
@media(min-width:900px){.g3{grid-template-columns:repeat(3,1fr)}.g4{grid-template-columns:repeat(4,1fr)}}
.card{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:24px;
  transition:transform .16s ease,box-shadow .16s ease}
.card:hover{transform:translateY(-2px);box-shadow:0 14px 34px rgba(22,32,58,.09)}
.card .ic{width:44px;height:44px;border-radius:var(--radius-sm);background:var(--gold-soft);
  border:1px solid #f0e0c8;display:flex;align-items:center;justify-content:center;
  font:800 1.05rem/1 var(--sans);color:var(--gold);margin-bottom:14px;position:relative}

/* ---------- icon tiles ---------- */
/* The tile is the same object everywhere; only its colour changes with the card.
   .ic--num is the plain numeral tile the design started with, kept for the case where
   an editor picks "No icon". */
.ic svg{width:22px;height:22px;display:block;flex:none}
.ic--soft{background:var(--gold-soft);border:1px solid #f0e0c8;color:var(--gold-dark)}
/* The step number rides on the tile so a sequence still reads as a sequence. The white
   ring is the card behind it, so the badge reads as sitting on top of the tile. */
.ic__n{position:absolute;top:-7px;right:-7px;min-width:21px;height:21px;padding:0 5px;
  border-radius:var(--pill);background:var(--navy);color:#fff;border:2px solid var(--white);
  font:800 .68rem/1 var(--sans);display:flex;align-items:center;justify-content:center;
  letter-spacing:0;font-variant-numeric:tabular-nums}
.rev-card .stars{color:var(--gold-dark);letter-spacing:2px;margin-bottom:.5em;display:block}
.rev-card p{font-style:italic;margin-bottom:.7em}
.rev-card cite{font-style:normal;font-size:.85rem;color:var(--ink-soft);font-weight:600}

/* ---------- steps / timeline ---------- */
.steps{list-style:none;margin:0;padding:0;display:grid;gap:16px}
@media(min-width:900px){.steps{grid-template-columns:repeat(3,1fr)}}
.steps li{background:var(--white);border:1px solid var(--line);
  border-radius:var(--radius);padding:24px;position:relative}
.steps li .ic{position:relative;width:46px;height:46px;border-radius:50%;background:var(--navy);
  color:#fff;display:flex;align-items:center;justify-content:center;margin-bottom:14px}
.timeline{list-style:none;margin:0;padding:0;position:relative}
.timeline::before{content:"";position:absolute;left:8px;top:12px;bottom:12px;width:2px;background:var(--line)}
.timeline li{position:relative;padding:0 0 24px 38px}
.timeline li::before{content:"";position:absolute;left:0;top:6px;width:18px;height:18px;
  border-radius:50%;background:var(--white);border:3px solid var(--gold)}
.timeline b{display:block;font:700 .76rem/1.4 var(--sans);letter-spacing:.12em;
  text-transform:uppercase;color:var(--gold-dark);margin-bottom:.35em}

/* ---------- CTA block (repeated) ---------- */
.ctablock{background:var(--navy);color:#dbe3ef;border-radius:var(--radius);
  padding:32px 28px;text-align:center}
.ctablock h2{color:#fff;font-size:clamp(1.3rem,2.6vw,1.75rem);margin-bottom:.4em}
.ctablock p{color:#bccbe0;max-width:44ch;margin:0 auto}
.ctablock .btn-row{max-width:520px;margin:1.4em auto 0}

/* ---------- accordions ---------- */
details{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);margin-bottom:10px}
summary{padding:18px 46px 18px 20px;cursor:pointer;font-weight:700;position:relative;
  list-style:none;min-height:56px;display:flex;align-items:center;font-size:1.02rem}
summary::-webkit-details-marker{display:none}
summary:hover{color:var(--cta)}
summary::after{content:"";position:absolute;right:20px;top:50%;width:10px;height:10px;
  border-right:2px solid var(--gold);border-bottom:2px solid var(--gold);
  transform:translateY(-70%) rotate(45deg);transition:transform .2s ease}
details[open] summary::after{transform:translateY(-25%) rotate(225deg)}
details .body{padding:0 20px 20px}
details .body>:last-child{margin-bottom:0}

/* ---------- about / media ---------- */
.split{display:grid;gap:28px;align-items:center}
@media(min-width:860px){.split{grid-template-columns:340px 1fr}}
.portrait{border-radius:var(--radius);display:block;width:100%;border:1px solid var(--line)}

/* text + image side by side. Text is always FIRST in the DOM so mobile and
   screen readers get the content before the picture; .media--left just swaps
   the visual order on desktop. */
.media{display:grid;gap:34px;align-items:center}
@media(min-width:900px){
  .media{grid-template-columns:1fr 1fr;gap:48px}
  .media--left > *:first-child{order:2}
}
.media figure{margin:0}
.media img{width:100%;height:100%;max-height:520px;object-fit:cover;
  border-radius:var(--radius);border:1px solid var(--line);display:block}
.media figcaption{font-size:.8rem;color:var(--ink-soft);margin-top:.6em}

/* two stacks side by side in one section */
.duo-cols{display:grid;gap:36px}
@media(min-width:960px){.duo-cols{grid-template-columns:1fr 1fr;gap:44px;align-items:start}}

/* ---------- form ---------- */
form .field{margin-bottom:16px}
form label{display:block;font:700 .8rem/1.4 var(--sans);letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-soft);margin-bottom:.4em}
form input,form select,form textarea{width:100%;min-height:52px;padding:12px 14px;
  font:400 1rem/1.4 var(--sans);border:2px solid var(--line);border-radius:var(--radius-sm);
  background:#fff;color:var(--ink)}
form textarea{min-height:100px;resize:vertical}

/* ---------- sticky ---------- */
.sticky{position:fixed;left:0;right:0;bottom:0;z-index:70;background:var(--navy-3);
  border-top:1px solid var(--line-dark);padding:9px 12px;display:flex;gap:9px}
.sticky .btn{flex:1;min-height:50px;font-size:.98rem}
.sticky .btn-line{color:#fff;border-color:rgba(255,255,255,.6)}
@media(min-width:980px){.sticky{display:none}body{padding-bottom:0}}

footer{background:var(--navy-3);color:#a9b8cf;padding:44px 0 34px}
footer h2{color:#fff;font-size:1.2rem;margin-bottom:.5em}
footer a{color:#fff}
.fine{font-size:.85rem;line-height:1.55;color:var(--ink-soft)}
.band-navy .fine,footer .fine{color:#a9b8cf}
.lede{font-size:1.08rem;color:var(--ink-soft)}
.eyebrow-txt{font:700 .76rem/1.4 var(--sans);letter-spacing:.15em;text-transform:uppercase;
  color:var(--gold-dark);margin:0 0 .7em}
/* dark gold is for light backgrounds only — flip it on every navy surface */
.band-navy .eyebrow-txt,.hero .eyebrow-txt,.ctablock .eyebrow-txt{color:var(--gold-light)}

@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important;scroll-behavior:auto!important}}