/* Care Advance — site stylesheet. Concept merge: Elsa's Option 1 look (type, pill buttons, photo hero, bands)
   applied to the real site. Palette unchanged from the live landing page; logo and palette still to be agreed. */
:root{--teal:#1A5E6E;--teal-deep:#134A57;--teal-mid:#2A6272;--ink:#1C1C1C;--head:#1E3A42;--seafoam:#7FB3AE;--seafoam-soft:#D2E3E0;--mist:#E9F1EF;--grey:#F1F2F0;--accent:#E8DCC8;--accent-hover:#DDCDB2;--accent-ink:#134A57;--accent-line:#8A7356;--accent-tint:#EFE6D7;--solid-hover:#0E3A44;--sand:#EAD9B4;--ground:#FFFFFF;--card:#FFFFFF;--line:#DFE4E2;--muted:#454545;--edge:#2E7A74;--field:#6B8088;--on-dark:#D2E3E0;--band:#134A57;--solid:#134A57;--on-solid:#FFFFFF;--surface:#FFFFFF;--shadow:0 24px 48px -24px rgba(19,74,87,.4);--r:16px;--display:"Plus Jakarta Sans",-apple-system,"Segoe UI",Arial,sans-serif;--logotype:"Newsreader",Georgia,"Times New Roman",serif;--sans:"Inter",-apple-system,"Segoe UI",Arial,sans-serif}
:root{--sans-features:"cv05","cv08"}
/* accent trial (concept only): three muted neutrals, never a status colour (green and red stay for form feedback) */
:root{--accent:#F5C451;--accent-hover:#EDB53A;--accent-ink:#0B323B;--accent-line:#C9961F;--accent-tint:#FBE7B5}
  /* Inter: I with bars, l with a tail */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--sans);font-feature-settings:var(--sans-features,normal);font-size:20px;line-height:32px;color:var(--ink);background:var(--ground);-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:var(--display);color:var(--head);text-wrap:balance;font-weight:700}
h1{font-size:64px;letter-spacing:0;line-height:72px}
h2{font-size:40px;letter-spacing:0;line-height:48px}
h3{font-size:20px;font-weight:700;letter-spacing:0;line-height:32px}
p{max-width:64ch}
ul,ol{max-width:64ch}
a{color:var(--teal)}
img{max-width:100%}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,summary:focus-visible,select:focus-visible,label:focus-visible{outline:3px solid var(--teal-deep);outline-offset:3px;border-radius:8px}
:is(.hero,.band,.cta,.enq-intro,footer,.calc-result) :focus-visible{outline-color:var(--accent-tint)}
:focus-visible{scroll-margin-top:144px;scroll-margin-bottom:96px}
.wrap{max-width:1240px;margin:0 auto;padding:0 40px}
.skip{position:absolute;left:-1000px;top:0;background:var(--surface);padding:8px 16px;z-index:99}
.skip:focus{left:16px;top:16px}
.phone{color:var(--teal-deep);font-weight:700;text-decoration:none;white-space:nowrap}
@media (hover:hover) and (min-width:961px){.phone:hover{text-decoration:underline}}

/* ---------- motion (CSS only; honours reduced motion) ---------- */
@keyframes rise{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.rise{animation:none}*{transition-duration:.01ms!important}}

/* ---------- wordmark (placeholder until the logo is agreed): house mark + stacked serif ---------- */
.wordmark{display:flex;align-items:center;gap:8px;text-decoration:none;line-height:1;color:var(--teal-deep);flex:none}
.wordmark .mark{width:48px;height:48px;flex:none}
.wordmark .wm-text{display:block}
.wordmark .c{display:block;font-family:var(--logotype);font-weight:600;font-size:24px;letter-spacing:-1px;line-height:24px}
.wordmark .a{display:block;font-family:var(--logotype);font-weight:400;font-size:20px;margin-top:0;line-height:24px}

/* ---------- header: white on inner pages; over the photo on the home page until you scroll ---------- */
.site-head{background:var(--surface);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:60;transition:background .25s ease,box-shadow .25s ease,border-color .25s ease}
.bar{display:flex;align-items:center;justify-content:space-between;gap:8px 16px;padding:16px 0 0;flex-wrap:wrap}
.bar .right{display:flex;align-items:center;gap:16px}
.callus{font-size:16px;color:var(--muted);line-height:24px}
nav.main{display:flex;flex-wrap:wrap;gap:8px 24px;align-items:center;width:100%;padding:8px 0 8px;font-size:16px;line-height:24px}
nav.main a{display:inline-flex;align-items:center;min-height:48px;color:var(--teal-deep);text-decoration:none;font-weight:600;padding:8px 0;border-bottom:3px solid transparent;transition:border-color .2s}
nav.main a[aria-current="page"]{border-bottom-color:var(--accent-line)}@media (hover:hover) and (min-width:961px){nav.main a:hover{border-bottom-color:var(--accent-line)}}
.navtoggle{position:absolute;opacity:0;width:8px;height:8px}
.navbtn{display:none;font-weight:700;color:var(--teal-deep);cursor:pointer;min-height:48px;padding:0 24px;align-items:center;border:2px solid var(--edge);border-radius:999px;margin:0}
@media (max-width:960px){
  nav.main a{min-height:48px;width:100%}
  .bar{padding:8px 0}
  .navbtn{display:inline-flex}
  nav.main{display:none;flex-direction:column;align-items:flex-start;padding:8px 0 16px;border-top:1px solid var(--line);gap:8px}
  .navtoggle:checked ~ nav.main{display:flex}
  .callus{display:none}
}
@media (max-width:480px){.bar .right .btn{display:none}.wordmark .mark{width:40px;height:40px}}
/* home: the header sits over the hero photo, then turns white once the hero has scrolled past */
body:has(.hero-full) .site-head{position:fixed;left:0;right:0;background:transparent;border-color:transparent}
body:has(.hero-full) .site-head:not(.solid):not(:has(.navtoggle:checked)) :is(.wordmark,nav.main a,.navbtn,.callus,.phone){color:#fff}
body:has(.hero-full) .site-head:not(.solid):not(:has(.navtoggle:checked)) .navbtn{border-color:rgba(255,255,255,.6)}
body:has(.hero-full) .site-head:not(.solid):not(:has(.navtoggle:checked)) nav.main a{text-shadow:0 1px 12px rgba(8,36,43,.6)}
body:has(.hero-full) .site-head.solid,body:has(.hero-full) .site-head:has(.navtoggle:checked){background:var(--surface);border-color:var(--line);box-shadow:0 8px 32px -24px rgba(19,74,87,.6)}

/* ---------- buttons: pills, with tap targets of at least 52px ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;background:var(--accent);color:var(--accent-ink);font-weight:700;padding:0 24px;border-radius:999px;text-decoration:none;border:0;cursor:pointer;font-size:16px;font-family:var(--sans);transition:transform .18s ease,background .18s;line-height:24px}
@media (hover:hover) and (min-width:961px){.btn:hover{background:var(--accent-hover);color:var(--accent-ink);transform:none}}
.btn-lg{padding:0 32px}
.btn-quiet{display:inline-flex;align-items:center;min-height:48px;background:transparent;color:var(--teal-deep);font-weight:700;padding:0 24px;border-radius:999px;text-decoration:none;border:2px solid var(--edge);transition:background .18s}
@media (hover:hover) and (min-width:961px){.btn-quiet:hover{background:var(--grey)}}
.btn-ghost{display:inline-flex;align-items:center;min-height:48px;color:#fff;font-weight:700;padding:0 24px;border-radius:999px;text-decoration:none;border:2px solid rgba(255,255,255,.7)}
@media (hover:hover) and (min-width:961px){.btn-ghost:hover{background:rgba(255,255,255,.12)}}

/* ---------- hero (home): full-bleed photo, centred type over a scrim ---------- */
.hero{position:relative;min-height:944px;display:grid;place-items:center;padding:192px 0 88px;overflow:hidden;isolation:isolate}
.hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 38%;z-index:-2}
@media (max-width:760px){.hero-img{object-position:33% 42%}}
.hero-scrim{position:absolute;inset:0;z-index:-1;background:radial-gradient(ellipse 92% 74% at 50% 52%,rgba(8,36,43,.7) 0%,rgba(8,36,43,.38) 58%,rgba(8,36,43,.1) 100%),
  linear-gradient(180deg,rgba(8,36,43,.7) 0%,rgba(8,36,43,.18) 26%,rgba(8,36,43,0) 42%),
  linear-gradient(0deg,rgba(8,36,43,.5) 0%,rgba(8,36,43,0) 32%),rgba(8,36,43,.12)}
.hero-inner{position:relative;text-align:center;max-width:896px;padding-inline:40px;margin:0 auto}
.hero .eyebrow{color:var(--accent-tint);text-shadow:0 1px 14px rgba(8,36,43,.7)}
.hero h1{color:#fff;text-shadow:0 2px 30px rgba(8,36,43,.55)}
.hero p.lede{font-size:20px;color:rgba(255,255,255,.95);max-width:54ch;margin:16px auto 32px;text-shadow:0 1px 18px rgba(8,36,43,.65);line-height:32px}
.hero .cta-row{justify-content:center}
.hero .or{color:#fff;margin-top:24px;text-shadow:0 1px 14px rgba(8,36,43,.7)}
.hero .or .phone{color:#fff}
.eyebrow{display:block;font-family:var(--sans);font-size:16px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--muted);margin-bottom:16px;line-height:24px}
.cta-row{display:flex;flex-wrap:wrap;gap:16px;align-items:center}
.cta-row .or{color:var(--muted);font-size:16px;line-height:24px}

/* ---------- inner page head ---------- */
.pagehead{position:relative;background:var(--grey);padding:56px 0 48px}
.pagehead .grid{display:grid;grid-template-columns:7fr 5fr;gap:48px;align-items:center}
@media (max-width:860px){.pagehead .grid{grid-template-columns:1fr}}
.pagehead p.lede{font-size:20px;color:var(--muted);margin-top:16px;max-width:56ch;line-height:32px}
.pagephoto{position:relative;border-radius:var(--r);overflow:hidden;aspect-ratio:5/4;border:1px solid var(--line)}
.pagephoto img{width:100%;height:100%;object-fit:cover;display:block}

/* ---------- sections ---------- */
section{padding:88px 0;scroll-margin-top:120px}
section.alt{background:var(--grey)}
section.band{background:var(--band);color:var(--seafoam-soft)}
section.band h2,section.band h3{color:#fff}
section.band p{color:var(--seafoam-soft)}
section.band a{color:var(--sand)}
.kicker{display:flex;flex-direction:column;gap:8px;margin-bottom:32px;max-width:60ch}
.pathline{display:none}
.intro{font-size:20px;max-width:64ch;line-height:32px}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:32px;margin-top:32px}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:32px 24px 24px;display:flex;flex-direction:column;gap:8px}
.card h3{margin-bottom:8px}
.card p{font-size:16px;color:var(--muted);flex:1;line-height:24px}
.card .btn-quiet{align-self:flex-start}
.card .ic{display:block;color:var(--teal-deep);margin-bottom:8px}
.card .ic svg{width:32px;height:32px}









.trust{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:24px}
.trust b{display:block;font-family:var(--display);font-size:24px;color:var(--teal-deep);line-height:32px}
.trust span{color:var(--muted);font-size:16px;display:block;margin-top:8px;line-height:24px}
.prose{max-width:70ch}
.prose h2{margin:40px 0 16px}
.prose h3{margin:24px 0 8px}
.prose p,.prose li{margin-bottom:16px}
.prose ul,.prose ol{padding-left:24px}
.prose .note{color:var(--muted);font-size:16px;line-height:24px}
.two{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:start}
.two h2{margin-bottom:8px}
@media (max-width:860px){.two{grid-template-columns:1fr}}
.callout{background:var(--card);border:1px solid var(--line);border-left:6px solid var(--seafoam);border-radius:16px;padding:16px 24px;margin:24px 0;max-width:70ch}
.callout.accent,.callout.gold{border-left-color:var(--accent-line)}

/* benefits */
.benefits{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:24px;margin-top:32px}
.benefit{display:flex;gap:16px;align-items:flex-start;padding:16px;border-radius:16px;transition:background .2s}
@media (hover:hover) and (min-width:961px){.benefit:hover{background:var(--surface)}}
.benefit .ic{flex:0 0 48px;width:48px;height:48px;border-radius:16px;background:var(--mist);display:flex;align-items:center;justify-content:center;color:var(--teal)}
.benefit .ic svg{width:24px;height:24px}
.benefit h3{font-size:16px;margin-bottom:8px;line-height:24px}
.benefit p{font-size:16px;color:var(--muted);line-height:24px}

/* stories */
/* stories: one wide slide at a time, stepped with large buttons (Elsa's carousel); without JS all three stack */
.stories{margin-top:32px}
.storynav{display:none;align-items:center;gap:16px;justify-content:flex-end;margin-bottom:16px}
.js .storynav{display:flex}
.storycount{font-size:16px;font-weight:700;letter-spacing:1px;color:var(--muted);margin-right:8px;font-variant-numeric:tabular-nums;line-height:24px}
.storycount b{color:var(--teal-deep)}
.cbtn{width:48px;height:48px;border-radius:50%;cursor:pointer;display:grid;place-items:center;background:var(--surface);border:2px solid var(--edge);color:var(--teal-deep);transition:background .18s,color .18s,border-color .18s}
@media (hover:hover) and (min-width:961px){.cbtn:hover{background:var(--solid);border-color:var(--solid);color:var(--on-solid)}}
.storyframe{display:grid;gap:24px}
.js .storyframe{gap:0;border-radius:24px;overflow:hidden;box-shadow:0 32px 64px -40px rgba(19,74,87,.55)}
.story{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);background:var(--card);border-radius:24px;overflow:hidden;border:1px solid var(--line)}
.js .story{grid-area:1/1;border:0;border-radius:0;opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .4s ease,transform .4s ease,visibility .4s}
.js .story.is-on{opacity:1;visibility:visible;transform:none}
.story .photo-cell{position:relative;min-height:440px}
.story img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.story .body{background:var(--grey);display:flex;flex-direction:column;padding:48px 48px}
.story .body{justify-content:center}
.story .tag{align-self:flex-start;font-size:16px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--teal-deep);background:var(--mist);padding:8px 16px;border-radius:999px;margin-bottom:16px;line-height:24px}
.story h3{font-size:24px;margin-bottom:8px;line-height:32px}
.story .body p{font-size:16px;color:var(--ink);line-height:24px}
.story blockquote{font-family:var(--display);font-size:20px;line-height:32px;font-weight:500;color:var(--ink);max-width:46ch}
.story figcaption{margin-top:auto;padding-top:24px}
.story cite{font-style:normal;font-family:var(--display);font-weight:700;font-size:16px;color:var(--ink);line-height:24px}
@media (max-width:900px){.story{grid-template-columns:1fr}.story .photo-cell{min-height:0;aspect-ratio:16/10}}
@media (prefers-reduced-motion:reduce){.js .story{transition:none}}

@media (max-width:960px){}
@media (max-width:560px){}

/* video slot */
.video{position:relative;border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow);aspect-ratio:16/9;background:#000}
.video img{width:100%;height:100%;object-fit:cover;display:block;opacity:.9}
.video .play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;text-decoration:none}
.video .play span{width:88px;height:88px;border-radius:50%;background:var(--accent-line);display:flex;align-items:center;justify-content:center;box-shadow:0 16px 32px rgba(0,0,0,.35);transition:transform .2s}
@media (hover:hover) and (min-width:961px){.video .play:hover span{transform:scale(1.06)}}
.video .play svg{width:32px;height:32px;margin-left:8px}
.video .cap{position:absolute;left:0;right:0;bottom:0;padding:16px 24px;background:linear-gradient(0deg,rgba(19,74,87,.9),transparent);color:#fff;font-weight:600}

/* reviews strip */
.reviews{background:var(--card);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:32px 0}
.reviews .in{display:flex;flex-wrap:wrap;gap:24px 48px;align-items:center;justify-content:space-between}
.stars{display:flex;gap:8px}
.stars svg{width:24px;height:24px}
.reviews blockquote{font-family:var(--display);font-size:20px;color:var(--teal-deep);max-width:56ch;line-height:32px}
.reviews cite{font-style:normal;color:var(--muted);font-size:16px;display:block;margin-top:8px;line-height:24px}

/* FAQ */
.faq details{border-bottom:1px solid var(--line);max-width:80ch}
.faq details:first-of-type{border-top:1px solid var(--line)}
.faq summary{cursor:pointer;font-family:var(--display);font-weight:600;color:var(--ink);padding:24px 48px 24px 0;font-size:20px;list-style:none;position:relative;line-height:32px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:8px;top:50%;width:8px;height:8px;border-right:2px solid var(--teal);border-bottom:2px solid var(--teal);transform:translateY(-70%) rotate(45deg);transition:transform .2s ease}
.faq details[open] summary::after{transform:translateY(-30%) rotate(225deg)}
.faq .a{padding:0 0 24px;color:var(--muted)}
.faq .a p{margin-bottom:8px;max-width:70ch}

/* CTA band: a photograph closes every page */
.cta{position:relative;overflow:hidden;isolation:isolate;background:var(--band);padding:104px 0;color:#fff}
.cta-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 62%;z-index:-2}
.cta::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(100deg,rgba(11,45,53,.86) 0%,rgba(11,45,53,.7) 50%,rgba(11,45,53,.45) 100%)}
.cta .in{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:24px}
.cta h2{color:#fff;font-size:40px;line-height:48px}
.cta .or{color:#fff}
.cta .phone{color:#fff}

/* ---------- enquiry form ---------- */
.formwrap{display:grid;grid-template-columns:4fr 8fr;gap:48px;align-items:start}
@media (max-width:900px){.formwrap{grid-template-columns:1fr}}
.formintro h1{font-size:40px;margin-bottom:8px;line-height:48px}
.formintro p{color:var(--muted)}
.formintro .call-big{margin-top:24px;font-size:16px;line-height:24px}
.formintro .call-big a{font-family:var(--display);font-size:24px;font-weight:700;color:var(--teal-deep);text-decoration:none;line-height:32px}
.formcard{background:var(--card);border:1px solid var(--line);border-radius:24px;padding:32px;box-shadow:var(--shadow)}
form.enq fieldset{border:0;padding:0;margin:0 0 32px}
form.enq legend{font-family:var(--display);font-size:20px;color:var(--teal-deep);font-weight:700;margin-bottom:16px;line-height:32px}
form.enq fieldset.cond{border-top:1px solid var(--line);padding-top:24px}
label,.lbl{font-weight:600;font-size:16px;display:block;margin-bottom:8px;line-height:24px}
.optional{color:var(--muted);font-weight:400}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px}
.frow.three{grid-template-columns:2fr 1fr 1.2fr}
@media (max-width:560px){.frow,.frow.three{grid-template-columns:1fr}}
.field{display:flex;flex-direction:column}
.field.full{grid-column:1/-1}
.field small{color:var(--muted);font-size:16px;margin-top:8px;line-height:24px}
input[type=text],input[type=tel],input[type=email],input[type=date],textarea,select{font:inherit;min-height:48px;padding:16px 16px;border:2px solid var(--field);border-radius:16px;background:var(--surface);color:var(--ink);width:100%;transition:border-color .15s,box-shadow .15s}
input:focus,textarea:focus,select:focus{border-color:var(--teal);box-shadow:0 0 0 8px rgba(127,179,174,.25)}
.field.postcode input{border-color:var(--edge);font-weight:700;letter-spacing:2px;font-size:20px;max-width:176px;line-height:32px}
.picks{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media (max-width:640px){.picks{grid-template-columns:1fr}}
.picks input{position:absolute;opacity:0;width:8px;height:8px}
.pick{display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding:16px 16px 16px;border:2px solid var(--field);border-radius:16px;background:var(--surface);cursor:pointer;min-height:152px;transition:border-color .15s,box-shadow .15s,transform .15s;margin:0;font-weight:400}
.pick b{font-family:var(--display);font-size:16px;color:var(--teal-deep);line-height:24px}
.pick span{color:var(--muted);font-size:16px;line-height:24px}
.pick .pick-ic{width:40px;height:40px;border-radius:16px;background:var(--mist);display:flex;align-items:center;justify-content:center;color:var(--teal);margin-bottom:8px}
.pick .pick-ic svg{width:24px;height:24px}
@media (hover:hover) and (min-width:961px){.pick:hover{border-color:var(--edge);transform:none}}
.picks input:checked + .pick{border-color:var(--accent-line);box-shadow:0 0 0 8px color-mix(in srgb,var(--accent-line) 22%,transparent);background:color-mix(in srgb,var(--accent-line) 6%,#fff)}
.picks input:focus-visible + .pick{outline:3px solid var(--teal-deep);outline-offset:3px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips input{position:absolute;opacity:0;width:8px;height:8px}
.chips label{margin:0;min-height:48px;display:inline-flex;align-items:center;padding:8px 16px;border:2px solid var(--field);border-radius:999px;background:var(--surface);cursor:pointer;font-weight:600;font-size:16px;transition:all .15s;line-height:24px}
@media (hover:hover) and (min-width:961px){.chips label:hover{border-color:var(--edge)}}
.chips input:checked + label{background:var(--solid);border-color:var(--solid);color:var(--on-solid)}
.chips input:focus-visible + label{outline:3px solid var(--teal-deep);outline-offset:3px}
.consent{display:flex;gap:16px;align-items:flex-start;margin:16px 0 24px}
.consent input{width:24px;height:24px;margin-top:8px;accent-color:var(--teal)}
.consent label{font-weight:400;font-size:16px;color:var(--muted);margin:0;line-height:24px}
.form-msg{color:var(--ink);background:transparent;border:0;border-left:3px solid var(--accent-line);border-radius:0;padding:8px 0 8px 8px;margin:0 0 16px;color:var(--accent-line);font-weight:500;font-size:16px;line-height:24px}

/* ---------- calculator ---------- */
.calc{display:grid;grid-template-columns:5fr 7fr;gap:40px;align-items:start}
@media (max-width:900px){.calc{grid-template-columns:1fr}}
.calc-card{background:var(--card);border:1px solid var(--line);border-radius:24px;padding:32px;box-shadow:var(--shadow);position:sticky;top:88px}
@media (max-width:900px){.calc-card{position:static}}
.calc-step{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:16px;letter-spacing:2px;text-transform:uppercase;font-weight:700;margin-bottom:16px;line-height:24px}
.calc-step b{width:32px;height:32px;border-radius:50%;background:var(--accent);color:var(--accent-ink);display:inline-flex;align-items:center;justify-content:center;font-family:var(--display)}
.calc-row{margin-bottom:24px}
.calc-label{display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin-bottom:8px}
.calc-label label{margin:0}
.calc-label output{font-family:var(--display);font-size:24px;font-weight:700;color:var(--teal-deep);font-variant-numeric:lining-nums;line-height:32px}
.calc-ticks{display:flex;justify-content:space-between;color:var(--muted);font-size:16px;margin-top:8px;line-height:24px}
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:8px;border-radius:999px;background:linear-gradient(90deg,var(--seafoam),var(--teal));outline:none;margin:8px 0}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:32px;height:32px;border-radius:50%;background:var(--accent-line);border:3px solid #fff;box-shadow:0 8px 16px rgba(0,0,0,.25);cursor:pointer}
input[type=range]::-moz-range-thumb{width:32px;height:32px;border-radius:50%;background:var(--accent-line);border:3px solid #fff;box-shadow:0 8px 16px rgba(0,0,0,.25);cursor:pointer}
input[type=range]:focus-visible{outline:3px solid var(--teal-deep);outline-offset:4px}
.calc-card .fine{font-size:16px;color:var(--muted);margin-top:16px;line-height:24px}
.calc-result{background:linear-gradient(160deg,var(--band),var(--teal));color:#fff;border-radius:24px;padding:32px;opacity:0;transform:translateY(16px);transition:opacity .55s ease,transform .55s ease}
.calc-result.show{opacity:1;transform:none}
.calc-result .eyebrow{color:var(--on-dark)}
.calc-result .eyebrow::before{background:var(--accent-tint)}
.calc-result h2{color:#fff;margin-bottom:8px;font-size:40px;line-height:48px}
.calc-result .sub{color:#fff;margin-bottom:24px;max-width:none}
.seg{display:inline-flex;background:rgba(255,255,255,.12);border-radius:999px;padding:8px;margin-bottom:16px}
.seg button{font:inherit;font-weight:700;border:0;background:transparent;color:#fff;padding:8px 16px;border-radius:999px;cursor:pointer}
.seg button[aria-pressed="true"]{background:var(--accent-tint);color:var(--teal-deep)}
.big{font-family:var(--display);font-size:64px;font-weight:700;color:var(--accent-tint);line-height:72px;letter-spacing:0;font-variant-numeric:lining-nums}
.big-label{color:var(--on-dark);font-size:16px;letter-spacing:2px;text-transform:uppercase;font-weight:700;margin-top:8px;line-height:24px}
.ring{display:flex;align-items:center;gap:24px;margin:16px 0 24px;flex-wrap:wrap}
.ring svg{width:152px;height:152px;flex:0 0 auto}
.calc-lines{list-style:none;max-width:none;margin:0 0 16px}
.calc-lines li{display:flex;justify-content:space-between;gap:16px;padding:8px 0;border-top:1px solid rgba(255,255,255,.15)}
.calc-lines b{color:#fff;font-variant-numeric:tabular-nums}
.calc-lines span{color:#fff;font-size:16px;line-height:24px}
.calc-note{color:#fff;font-size:16px;margin-bottom:24px;max-width:none;line-height:24px}
.calc-note a{color:#fff}
.calc-result .or{color:var(--on-dark)}
.calc-tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:24px}
.calc-tabs button{font:inherit;font-weight:700;border:2px solid rgba(255,255,255,.35);background:transparent;color:#fff;padding:8px 16px;border-radius:16px;cursor:pointer}
.calc-tabs button[aria-selected="true"]{background:var(--surface);color:var(--teal-deep);border-color:#fff}
.calc-assume{margin-top:24px;padding-top:16px;border-top:1px solid rgba(255,255,255,.18);font-size:16px;color:var(--on-dark);line-height:24px}
.calc-assume h3{color:#fff;font-size:16px;margin-bottom:8px;line-height:24px}
.calc-assume ul{padding-left:16px;max-width:none}
.calc-assume li{margin-bottom:8px}
.restart{font:inherit;background:transparent;border:0;color:#fff;text-decoration:underline;cursor:pointer;padding:0}
.calc-how{max-width:74ch}
.calc-how table{border-collapse:collapse;width:100%;font-size:16px;margin:16px 0;line-height:24px}
.calc-how th,.calc-how td{text-align:left;padding:8px 8px;border-bottom:1px solid var(--line)}
.calc-how th{color:var(--muted);font-weight:600}
@media (prefers-reduced-motion:reduce){.calc-result{transition:none;transform:none}}

/* thanks */
.thanks{min-height:60vh;display:flex;align-items:center;justify-content:center;padding:48px 24px}
.thanks .card{max-width:600px;width:100%;text-align:center;padding:48px 48px 48px;border-radius:var(--r);gap:0}
@media (hover:hover) and (min-width:961px){.thanks .card:hover{transform:none;box-shadow:none;border-color:var(--line)}}
.thanks .card h1{font-size:40px;margin-bottom:16px;line-height:48px}
.thanks .card p{margin:0 auto 16px;color:var(--muted);font-size:16px;max-width:44ch;line-height:24px}
.thanks .card p strong{color:var(--ink)}
.thanks .actions{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;margin-top:24px}
.thanks .actions a{flex:1 1 200px;max-width:256px;text-align:center;padding:16px 16px;font-size:16px;line-height:24px}
@media (hover:hover) and (min-width:961px){.thanks .actions a:hover{transform:none}}
@media (max-width:560px){.thanks .card{padding:32px 24px 32px}.thanks .actions a{max-width:none}}
.tick{width:64px;height:64px;margin:0 auto 24px}

/* ---------- footer ---------- */
footer{background:var(--band);color:var(--on-dark);padding:56px 0 32px;font-size:16px;line-height:24px}
footer a{color:#fff}
.f-top{display:flex;flex-wrap:wrap;gap:32px;justify-content:space-between;align-items:flex-start;margin-bottom:32px}
.f-brand .wordmark{color:#fff}
.f-brand p{color:var(--on-dark);margin-top:16px;font-size:16px;letter-spacing:2px;text-transform:uppercase;line-height:24px}
.f-links{display:flex;flex-wrap:wrap;gap:16px 32px;align-items:center;font-weight:600}
.f-links a{text-decoration:none;display:inline-flex;align-items:center;min-height:48px}
@media (hover:hover) and (min-width:961px){.f-links a:hover{text-decoration:underline}}
.legal{max-width:78ch;line-height:24px;color:var(--on-dark);font-size:16px}
.legal p{margin-bottom:8px;max-width:none}
.fsg{margin:40px 0 24px;display:flex;align-items:center;gap:16px;justify-content:center}
.fsg::before,.fsg::after{content:"";height:8px;flex:1;max-width:176px;background:linear-gradient(90deg,transparent,var(--accent-tint) 60%,var(--accent-tint))}
.fsg::after{background:linear-gradient(270deg,transparent,var(--accent-line) 60%,var(--accent-line))}
.fsg a{color:#EAD9B4;text-decoration:none;font-size:16px;letter-spacing:2px;text-transform:uppercase;white-space:nowrap;line-height:24px}
.fsg a b{color:#fff;font-weight:700}
@media (hover:hover) and (min-width:961px){.fsg a:hover b{color:var(--accent-tint)}}
.fine{border-top:1px solid #2A6272;padding-top:16px;color:var(--on-dark);font-size:16px;display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between;line-height:24px}
.fine .credits{max-width:60ch}

/* ---------- enquiry wizard ---------- */
.pagehead.compact{padding:48px 0 32px}
.wizard-wrap{padding:40px 0 64px}
.wizcard{background:var(--card);border:1px solid var(--line);border-radius:24px;padding:32px;box-shadow:var(--shadow);max-width:896px;margin:0 auto}
@media (max-width:560px){.wizcard{padding:24px}}
.sr{position:absolute;left:-10000px}
.progress{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:0 0 32px;max-width:none;counter-reset:none}
.progress li{display:flex;align-items:center;gap:8px;font-size:16px;font-weight:600;color:var(--muted);padding-bottom:8px;border-bottom:4px solid var(--line);transition:border-color .2s,color .2s;line-height:24px}
.progress li span{width:32px;height:32px;border-radius:50%;border:2px solid var(--line);display:inline-flex;align-items:center;justify-content:center;font-family:var(--display);font-weight:700;flex:0 0 auto}
.progress li.current{color:var(--teal-deep);border-bottom-color:var(--accent-line)}
.progress li.current span{background:var(--accent);border-color:var(--accent-line);color:var(--accent-ink)}
.progress li.done{color:var(--teal);border-bottom-color:var(--seafoam)}
.progress li.done span{background:var(--edge);border-color:var(--edge);color:#fff}
.progress li.skipped{opacity:.45;text-decoration:line-through}
@media (max-width:640px){.progress li{font-size:0}.progress li span{font-size:16px;line-height:24px}}
.wq{font-size:32px;margin-bottom:8px;line-height:40px}
.wq:focus{outline:none}
.whint{color:var(--muted);margin-bottom:24px}
.wstep{animation:rise .45s ease both}
.js .wstep:not(.active){display:none}
.wnav{display:none;justify-content:space-between;align-items:center;gap:16px;margin-top:32px;padding-top:24px;border-top:1px solid var(--line)}
.js .wnav{display:flex}
.qgrid{display:flex;flex-direction:column;gap:24px}
.q{padding:16px 16px;border:1px solid var(--line);border-radius:16px;background:var(--surface)}
.q label,.q .lbl{margin-bottom:8px}
.q select,.q input[type=date]{max-width:416px}
.review{background:var(--mist);border-radius:16px;padding:16px 24px;margin:16px 0}
.review h3{margin-bottom:8px}
.review dl{display:grid;grid-template-columns:1fr;gap:8px;max-width:none}
.review dl div{display:flex;justify-content:space-between;gap:16px;padding:8px 0;border-bottom:1px solid rgba(19,74,87,.08);font-size:16px;line-height:24px}
.review dt{color:var(--muted)}
.review dd{font-weight:600;text-align:right}

/* ---------- wizard estimate step ---------- */
.progress{grid-template-columns:repeat(5,1fr)}
.wstep[data-step="4"] .calc-result{padding:32px}
.adjust{margin:16px 0 0;border:1px solid rgba(255,255,255,.25);border-radius:16px;background:rgba(255,255,255,.06)}
.adjust summary{cursor:pointer;color:#fff;font-weight:700;padding:16px 16px;list-style:none;display:flex;justify-content:space-between}
.adjust summary::-webkit-details-marker{display:none}
.adjust summary::after{content:"+";color:var(--accent-tint);font-weight:800}
.adjust[open] summary::after{content:"–"}
.adjust-in{padding:8px 16px 16px}
.adjust-in label{color:#fff}
.adjust-in .calc-label output{color:var(--accent-tint);font-size:20px;line-height:32px}
.adjust-in .calc-row{margin-bottom:16px}
.q small{display:block;color:var(--muted);font-size:16px;margin-top:8px;line-height:24px}

/* ---------- calculator embedded in the wizard ---------- */
.wstep .calc{grid-template-columns:1fr;gap:24px}
.wstep .calc-card{position:static;box-shadow:none;padding:24px}
.wstep .calc-cta{display:none}
.wstep .calc-result{padding:32px}

/* ---------- v7: enquiry modal (Household-Capital style, one idea per screen) ---------- */
body.modal-open{overflow:hidden}
.modal{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;padding:16px}
.modal[hidden]{display:none}
.modal-backdrop{position:absolute;inset:0;background:rgba(19,74,87,.62);backdrop-filter:blur(8px);animation:fade .3s ease both}
.modal-card{position:relative;background:var(--card);border-radius:32px;width:min(100%,760px);max-height:min(92vh,896px);display:flex;flex-direction:column;box-shadow:0 40px 88px -32px rgba(0,0,0,.55);animation:pop .35s cubic-bezier(.2,.8,.2,1) both}
@keyframes fade{from{opacity:0}}
@keyframes pop{from{opacity:0;transform:translateY(16px) scale(.985)}}
.modal-top{display:flex;justify-content:space-between;align-items:center;padding:16px 24px 8px}
.modal-brand{font-family:var(--logotype);font-size:20px;color:var(--teal-deep);font-weight:600;line-height:32px}
.modal-brand .modal-sub{font-family:var(--sans);font-size:16px;color:var(--muted);font-weight:400;line-height:24px}
.modal-close{font:inherit;font-size:32px;line-height:1;width:48px;height:48px;border-radius:50%;border:0;background:var(--mist);color:var(--teal-deep);cursor:pointer;transition:background .15s,transform .15s}
@media (hover:hover) and (min-width:961px){.modal-close:hover{background:var(--solid);color:var(--on-solid);transform:rotate(90deg)}}
.modal-body{overflow:auto;padding:8px 40px 32px}
@media (max-width:560px){.modal-body{padding:8px 24px 24px}.modal-card{border-radius:24px;max-height:96vh}}

/* screens */
.scr{display:none}
.js .scr.active{display:block}
.js .scr{animation-duration:.42s;animation-timing-function:cubic-bezier(.2,.8,.2,1);animation-fill-mode:both}
.js .scr.fwd{animation-name:slide-in}
.js .scr.bwd{animation-name:slide-back}
@keyframes slide-in{from{opacity:0;transform:translateX(32px)}}
@keyframes slide-back{from{opacity:0;transform:translateX(-32px)}}
.sq{font-size:40px;line-height:48px;margin:8px 0 8px;color:var(--teal-deep)}
.sq:focus{outline:none}
.shint{color:var(--muted);margin-bottom:24px;font-size:16px;line-height:24px}
.scr .q{border:0;padding:0;margin:0 0 24px;background:transparent}
.scr .q label,.scr .q .lbl{font-size:16px;line-height:24px}
.scr .frow{margin-bottom:16px}
/* dropdowns: where the browser allows it (Chrome / Edge), the list opens as a panel BELOW the control instead of the
   Mac-style menu that anchors on the selected item and slides up over the label. Safari / Firefox keep their own menu. */
@supports (appearance: base-select) {form.enq select, form.enq select::picker(select) { appearance: base-select}
  form.enq select {display:flex;align-items:center;justify-content:space-between}
  form.enq select::picker-icon {color:var(--muted)}
  form.enq select::picker(select) {position-area:block-end span-inline-end;position-try-order:normal;position-try-fallbacks:flip-block;max-height:min(60vh,352px);overflow:auto;margin-top:8px;padding:8px;border:2px solid var(--line);border-radius:16px;background:var(--surface);box-shadow:0 16px 40px -16px rgba(19,74,87,.4);font:inherit;color:var(--ink)}
  form.enq select option {padding:8px 16px;border-radius:8px;cursor:pointer}
  form.enq select option:focus-visible{background:var(--mist);outline:none}@media (hover:hover) and (min-width:961px){form.enq select option:hover{background:var(--mist);outline:none}}
  form.enq select option:checked {background:var(--solid);color:var(--on-solid)}
  form.enq select option::checkmark {display:none}
}
.scr .picks{grid-template-columns:1fr;gap:16px}
.scr .pick{flex-direction:row;align-items:center;gap:16px;min-height:0;padding:16px 16px}
.scr .pick .pick-ic{margin:0;flex:0 0 48px;width:48px;height:48px}
.scr .pick b{font-size:20px;line-height:32px}
.scr .pick .pick-txt{display:flex;flex-direction:column;gap:8px;min-width:0;text-align:left}
.scr .pick .pick-txt b{display:block}
.scr .pick .pick-txt span{display:block;font-size:16px;line-height:24px}
.pick .pick-txt{display:flex;flex-direction:column;gap:8px}
.snav{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:24px;padding-top:16px;border-top:1px solid var(--line)}
.back-link{font:inherit;font-weight:700;color:var(--teal);background:transparent;border:0;cursor:pointer;padding:8px 0}
@media (hover:hover) and (min-width:961px){.back-link:hover{text-decoration:underline}}
.snav .btn{margin-left:auto}
.form-msg{margin:8px 0 16px}

/* no-JS fallback (/enquire/): every screen shown in order as one plain form */
html:not(.js) .scr{display:block;margin-bottom:32px}
html:not(.js) .scr.path{display:none}
html:not(.js) .snav [data-next],html:not(.js) .snav [data-back]{display:none}
html:not(.js) #send{display:inline-block!important}
.nojs-form .sq{font-size:24px;line-height:32px}
@media (prefers-reduced-motion:reduce){.modal-backdrop,.modal-card,.js .scr{animation:none}}

/* global: the hidden attribute always wins (author display rules on .btn etc. were overriding the UA default) */
[hidden]{display:none!important}
/* demo-only test filler — REMOVE BEFORE GO-LIVE */
.demo-fill{position:absolute;left:16px;bottom:8px;z-index:2;font:inherit;font-size:12px;letter-spacing:0;color:var(--muted);opacity:.55;background:transparent;border:1px dashed var(--line);border-radius:8px;padding:8px 8px;cursor:pointer;line-height:16px}
@media (hover:hover) and (min-width:961px){.demo-fill:hover{opacity:1}}

.calc-link{margin:24px 0 8px;padding:16px 16px;border:1px solid var(--line);border-radius:16px;background:var(--mist)}
.btn-quiet{background:transparent;color:var(--teal-deep);border:2px solid var(--edge);box-shadow:none}
@media (hover:hover) and (min-width:961px){.btn-quiet:hover{background:var(--grey)}}

/* teal result panel: keep every link and the phone number legible */
.calc-result a{color:#fff;text-decoration:underline;text-decoration-color:var(--accent-tint);text-underline-offset:8px}
@media (hover:hover) and (min-width:961px){.calc-result a:hover{color:var(--accent-tint)}}
.calc-result .or b,.calc-result .or a,.calc-result .or span,.calc-result .or strong{color:#fff}
/* zero-state panel shown before Calculate */
.calc-idle{background:var(--card);border:1px solid var(--line);border-radius:24px;padding:32px;height:100%;display:flex;flex-direction:column;justify-content:center}
.calc-idle-ring{width:120px;height:120px;margin-bottom:16px}
.calc-idle h3{font-size:24px;color:var(--teal-deep);margin:0 0 8px;line-height:32px}
.calc-idle ul{margin:8px 0 16px 16px;padding:0}
.calc-idle li{margin:8px 0}
.calc-idle .note{color:var(--muted);font-size:16px;line-height:24px}
.calc-idle[hidden]{display:none}

/* ---------- conversion: calculator in the header, enquiry starter, phone action bar ---------- */
.bar .right .head-calc{min-height:48px}
@media (min-width:961px){nav.main .nav-calc{display:none}}
@media (max-width:960px){.bar .right .head-calc{display:none}}
body:has(.hero-full) .site-head:not(.solid):not(:has(.navtoggle:checked)) .head-calc{color:#fff;border-color:rgba(255,255,255,.7)}
@media (hover:hover) and (min-width:961px){body:has(.hero-full) .site-head:not(.solid):not(:has(.navtoggle:checked)) .head-calc:hover{background:rgba(255,255,255,.12)}}

/* home: the calculator sits on a grey band right under the hero */
.calc-home .calc-card{top:136px}
.calc-card{top:136px}

/* home: the enquiry closes the page over a photograph; the first question starts here and opens the form on question 2 */
.enquire-band{position:relative;overflow:hidden;isolation:isolate;background:var(--band);padding:104px 0}
.enquire-band::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(100deg,rgba(11,45,53,.86) 0%,rgba(11,45,53,.7) 46%,rgba(11,45,53,.45) 100%)}
.enq-grid{display:grid;grid-template-columns:5fr 7fr;gap:72px;align-items:center}
@media (max-width:860px){.enq-grid{grid-template-columns:1fr}}
.enq-intro .eyebrow{color:var(--accent-tint)}
.enq-intro h2{color:#fff}
.enq-intro p{color:#fff;margin-top:16px}
.enq-intro .call-big{margin-top:24px}
.enq-intro .call-big em{display:block;font-style:normal;font-size:16px;color:rgba(255,255,255,.8);line-height:24px}
.enq-intro .call-big a{display:inline-block;margin-top:8px;font-family:var(--display);font-size:24px;font-weight:700;color:#fff;text-decoration:none;line-height:32px}
.enq-intro .call-big a[href^="mailto"]{font-size:20px;line-height:32px}
.enq-start{background:var(--card);border-radius:24px;padding:40px;box-shadow:0 32px 72px -32px rgba(0,0,0,.55)}
.enq-start h3{font-size:32px;color:var(--teal-deep);line-height:40px}
.enq-start .shint{color:var(--muted);margin:8px 0 24px}
.start-picks{display:flex;flex-direction:column;gap:16px}
.start-pick{display:flex;align-items:center;gap:16px;padding:16px 16px;border:2px solid var(--field);border-radius:16px;text-decoration:none;color:var(--ink);background:var(--surface);transition:border-color .15s,box-shadow .15s,transform .15s}
@media (hover:hover) and (min-width:961px){.start-pick:hover{border-color:var(--accent-line);box-shadow:0 0 0 8px color-mix(in srgb,var(--accent-line) 22%,transparent);transform:none}}
.start-pick .pick-ic{flex:0 0 48px;width:48px;height:48px;border-radius:16px;background:var(--mist);display:flex;align-items:center;justify-content:center;color:var(--teal)}
.start-pick .pick-ic svg{width:24px;height:24px}
.start-pick .pick-txt{display:flex;flex-direction:column;gap:8px;flex:1}
.start-pick b{font-size:20px;color:var(--teal-deep);line-height:32px}
.start-pick .pick-txt span{color:var(--muted);font-size:16px;line-height:24px}
.start-pick::after{content:"";flex:none;width:8px;height:8px;border-right:2px solid var(--teal);border-bottom:2px solid var(--teal);transform:rotate(-45deg);margin-right:8px}

/* phones: Call and Enquire always one tap away */
.actionbar{display:none}
@media (max-width:760px){
  .actionbar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:70;gap:8px;padding:8px 16px calc(8px + env(safe-area-inset-bottom));background:var(--surface);border-top:1px solid var(--line);box-shadow:0 -8px 32px -16px rgba(19,74,87,.5)}
  .actionbar .ab-call,.actionbar .btn{flex:1}
  .actionbar .btn{min-height:48px}
  .actionbar .ab-call .phone{display:flex;align-items:center;justify-content:center;min-height:48px;border:2px solid var(--edge);border-radius:999px;font-size:16px;line-height:24px}
  body{padding-bottom:80px}
}

/* type trial switch (concept only, remove before go-live) */

/* calculator: a typed box beside every slider, so nobody has to drag (WCAG 2.5.7) */
.calc-label input.typed{width:152px;min-height:48px;padding:8px 8px;text-align:right;font-family:var(--display);font-size:20px;font-weight:700;color:var(--teal-deep);border:2px solid var(--field);border-radius:8px;background:var(--surface);line-height:32px}
.calc-label input.typed.age{width:88px}
.calc-label{align-items:center}

/* ---------- mobile: 16px floor, full-height slider targets, tappable links, header that tucks away ---------- */
.eyebrow{font-size:16px;letter-spacing:2px;line-height:24px}
.f-brand p{font-size:16px;letter-spacing:1px;line-height:24px}
footer{font-size:16px;line-height:24px}
.f-links{font-size:16px;line-height:24px}
.legal,.fine,.calc-ticks,.calc-step,.story .tag,.storycount,.note,.calc-card .fine,.field small,.calc-how table{font-size:16px;line-height:24px}
.calc-step b{font-size:16px;line-height:24px}
.phone{display:inline-flex;align-items:center;min-height:48px}
.fsg a{display:inline-flex;align-items:center;min-height:48px}
.enq-intro .call-big a{min-height:48px;display:inline-flex;align-items:center}
/* range: the whole 44px row is the target; the track is drawn inside it */
input[type=range]{height:48px;background:transparent;margin:0}
input[type=range]::-webkit-slider-runnable-track{height:8px;border-radius:999px;background:linear-gradient(90deg,var(--edge),var(--teal-deep))}
input[type=range]::-moz-range-track{height:8px;border-radius:999px;background:linear-gradient(90deg,var(--edge),var(--teal-deep))}
input[type=range]::-webkit-slider-thumb{margin-top:-16px}
/* phones: the header slides away while you read down, and comes back as soon as you scroll up */
@media (max-width:760px){.site-head{transition:transform .25s ease,background .25s ease}
  .site-head.tuck:not(:has(.navtoggle:checked)){transform:translateY(-100%)}
}
@media (prefers-reduced-motion:reduce){.site-head{transition:none}}
.fsg a{font-size:16px;letter-spacing:2px;line-height:24px}
.benefit p,.calc-card .fine,p.note{font-size:16px;line-height:24px}

/* ---------- small screens: the low end of each size, snapped to the grid ---------- */
@media (max-width:760px){
  h1{font-size:40px;line-height:48px}
  h2{font-size:32px;line-height:40px}
  .wrap{padding:0 16px}
  .hero{min-height:640px;padding:128px 0 56px}
  .hero-inner{padding-inline:16px}
  section{padding:56px 0}
  .cards{gap:16px}
  
  .story .body{padding:32px 24px}
  .story h3{font-size:20px;line-height:32px}
  .cta{padding:64px 0}
  .cta h2{font-size:32px;line-height:40px}
  .formintro h1{font-size:32px;line-height:40px}
  .calc-result h2{font-size:24px;line-height:32px}
  .big{font-size:40px;line-height:48px}
  .thanks .card h1{font-size:32px;line-height:40px}
  .wq{font-size:24px;line-height:32px}
  .sq{font-size:24px;line-height:32px}
  .enquire-band{padding:64px 0}
  .enq-grid{gap:40px}
  .enq-start{padding:24px}
  .enq-start h3{font-size:24px;line-height:32px}
}

/* 48px controls everywhere (touch targets 44 to 48px, on the 8px grid) */
.btn,.btn-quiet,.btn-ghost{font-size:16px;line-height:24px}
.seg button,.calc-tabs button,.back-link,.restart{min-height:48px}
.chips label{min-height:48px}
/* header: the menu row sits centred under the logo and actions */
@media (min-width:961px){nav.main{justify-content:center}}

.wordmark .mark .tick{stroke:var(--accent-line)}
footer .wordmark .mark .tick,body:has(.hero-full) .site-head:not(.solid) .wordmark .mark .tick{stroke:var(--accent-tint)}
.calc-result .ring #ring-arc{stroke:var(--accent-tint)}

/* ---------- steps: one row of cards on a single line; a vertical timeline below 1080px ---------- */
section{--sec:var(--ground)}
section.alt{--sec:var(--grey)}
.steps{list-style:none;counter-reset:s;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:16px;margin-top:32px;max-width:none}
.steps li{counter-increment:s;position:relative;padding-top:72px;display:flex;flex-direction:column}
.steps li::before{content:counter(s);position:absolute;top:0;left:16px;width:48px;height:48px;border-radius:50%;background:var(--solid);color:var(--on-solid);font:700 20px/48px var(--display);text-align:center;box-shadow:0 0 0 8px var(--sec)}
.steps li::after{content:"";position:absolute;top:23px;left:72px;right:-24px;height:2px;background:var(--accent-line);z-index:-1}
.steps li:last-child::after{display:none}
.steps{position:relative;z-index:0}
.phases{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:8px}
.phases span{font-size:16px;line-height:24px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--teal-deep);padding-bottom:8px;border-bottom:2px solid var(--accent-line)}
@media (max-width:1080px){
  .phases{display:none}
  .steps{grid-auto-flow:row;grid-auto-columns:auto;gap:24px}
  .steps li{padding:0 0 0 72px}
  .steps li::before{left:0}
  .steps li::after{top:56px;left:23px;right:auto;bottom:-24px;width:2px;height:auto}
}

/* light green buttons: a 2px deep-green edge keeps them visible on white for people with low contrast sensitivity */
.btn{box-shadow:inset 0 0 0 2px var(--accent-line)}
:is(.hero,.band,.cta,.calc-result,.enq-intro) .btn{box-shadow:none}
@media (hover:hover) and (min-width:961px){.btn:hover{background:var(--accent-hover)}}

/* ---------- micro-interactions: small, calm, and always confirming something the visitor did ---------- */
:root{--lift:0 16px 32px -16px rgba(19,74,87,.35);--ease:cubic-bezier(.2,.7,.3,1)}
/* cards: a soft shadow settles underneath on hover, so it is clear they respond */
.card,.est-card,.start-pick,.benefit,.story,.faq details,.steps li{transition:box-shadow .25s var(--ease),border-color .25s var(--ease),background-color .25s var(--ease)}
@media (hover:hover) and (min-width:961px){.card:hover,.est-card:hover,.start-pick:hover{box-shadow:var(--lift)}}
@media (hover:hover) and (min-width:961px){.benefit:hover{background:var(--card);box-shadow:var(--lift)}}
@media (hover:hover) and (min-width:961px){.steps li:hover .step-card{border-color:var(--edge);box-shadow:var(--lift)}}
@media (hover:hover) and (min-width:961px){.steps li:hover::before{background:var(--accent);color:var(--accent-ink)}}
.steps li::before{transition:background-color .25s var(--ease),color .25s var(--ease)}
@media (hover:hover) and (min-width:961px){.faq details:hover summary{color:var(--teal-deep)}}
/* buttons: colour deepens on hover, and a pressed look on tap */
.btn,.btn-quiet,.btn-ghost,.step-btn,.cbtn,.toggle label,.chips label{transition:background-color .2s var(--ease),box-shadow .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease)}
.btn:active{box-shadow:inset 0 0 0 2px var(--accent-line),inset 0 8px 16px -8px rgba(13,58,68,.35)}
.btn-quiet:active,.step-btn:active{background:var(--line)}
/* links: the underline thickens on hover */
a{text-underline-offset:4px;text-decoration-thickness:1px;transition:text-decoration-thickness .15s,color .15s}
@media (hover:hover) and (min-width:961px){a:hover{text-decoration-thickness:2px}}
/* fields: the edge turns teal and a soft ring appears while you type */
input,select,textarea{transition:border-color .2s var(--ease),box-shadow .2s var(--ease)}
input:focus,select:focus,textarea:focus{border-color:var(--teal-deep);box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 45%,transparent)}
/* estimate: results rise in once, and a figure glows briefly when it changes */
@keyframes settle{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes glow{0%{background-color:color-mix(in srgb,var(--accent) 55%,transparent)}100%{background-color:transparent}}
/* the step you are on in the enquiry form stays clearly marked */
@media (hover:hover) and (min-width:961px){.start-pick:hover .pick-ic{background:var(--accent);color:var(--accent-ink)}}
.start-pick .pick-ic{transition:background-color .2s var(--ease),color .2s var(--ease)}
.start-pick::after{transition:transform .2s var(--ease)}
@media (hover:hover) and (min-width:961px){.start-pick:hover::after{transform:rotate(-45deg) translate(2px,2px)}}
@media (prefers-reduced-motion:reduce){
    @media (hover:hover) and (min-width:961px){.start-pick:hover::after{transform:rotate(-45deg)}}
}

/* ---------- dark mode: same 7:1 targets as light. Off-white on dark teal-grey, never pure white on black (glare for older eyes) ---------- */
:root[data-theme="dark"]{
  color-scheme:dark;
  --ground:#0F1B1E;--surface:#172629;--card:#172629;--grey:#13221F;--mist:#1E3439;
  --ink:#E8EFEE;--head:#E8EFEE;--muted:#B4C6C4;--line:#2B3F43;--field:#7E989D;--edge:#7CC4B4;
  --teal-deep:#9ED8CB;--teal:#9ED8CB;--solid:#9ED8CB;--on-solid:#0F1B1E;--band:#0E3540;
  --accent-line:#D9CBB2;--on-dark:#D2E3E0;--solid-hover:#B8E4DA;
  --shadow:0 24px 48px -24px rgba(0,0,0,.6);--lift:0 16px 32px -16px rgba(0,0,0,.7)
}
:root[data-theme="dark"] body{background:var(--ground)}
:root[data-theme="dark"] :is(section.band,.cta,.enquire-band,footer){border-top:1px solid var(--line)}
:root[data-theme="dark"] img:not(.hero-img){filter:brightness(.9)}
:root[data-theme="dark"] .tick circle{fill:var(--mist)}
:root[data-theme="dark"] .tick path{stroke:var(--teal-deep)}
:root[data-theme="dark"] .site-head{background:var(--surface)}
:root[data-theme="dark"] body:has(.hero-full) .site-head:not(.solid):not(:has(.navtoggle:checked)){background:transparent}
/* on the dark bands the light-teal text role would be too faint to matter, so bands keep their own light text */
:root[data-theme="dark"] :is(section.band,.cta,.enquire-band,footer,.est-talk,.calc-result) :is(h2,h3,b,strong){color:#fff}

/* theme button: text label as well as an icon, 48px, in the menu row */
.theme-btn{display:inline-flex;align-items:center;gap:8px;min-height:48px;padding:0 16px;border:2px solid var(--edge);border-radius:999px;background:transparent;color:var(--teal-deep);font:600 16px/24px var(--sans);cursor:pointer;margin-left:8px}
@media (hover:hover) and (min-width:961px){.theme-btn:hover{background:var(--grey)}}
.theme-btn svg{width:24px;height:24px}
body:has(.hero-full) .site-head:not(.solid):not(:has(.navtoggle:checked)) .theme-btn{color:#fff;border-color:rgba(255,255,255,.7)}
@media (max-width:960px){.theme-btn{margin:8px 0 0}}
.theme-btn[aria-pressed="true"]{background:var(--solid);color:var(--on-solid);border-color:var(--solid)}
/* links: the deeper teal reaches 7:1 on the grey bands as well as on white */
a{color:var(--teal-deep)}
/* the trust row sits on the teal band: light text there */
section.band .trust b{color:#fff}
section.band .trust span{color:var(--on-dark)}

/* inline call to action inside long pages: button, then the phone as the gentler alternative */
.cta-inline{display:flex;flex-wrap:wrap;align-items:center;gap:16px;margin:32px 0;max-width:none}
.cta-inline span{color:var(--muted)}
.start-note{margin-top:16px;font-size:16px;line-height:24px;color:var(--muted)}
.callout a{display:inline-flex;align-items:center;min-height:48px}

/* ---------- borrowed from the reference sites ---------- */
/* hero: the promise in the accent colour (Fitlitter) */
.hero h1 .hl{font-style:normal;color:var(--accent-tint)}
/* reassurance ticks (Fitlitter, Reckon) */
.assure{list-style:none;display:flex;flex-wrap:wrap;gap:8px 24px;padding:0;margin:24px 0 0;max-width:none}
.assure li{display:inline-flex;align-items:center;gap:8px;font-size:16px;line-height:24px;font-weight:600;color:var(--ink)}
.assure li::before{content:"";flex:none;width:24px;height:24px;border-radius:50%;background:var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 12.5l3 3 7-7' fill='none' stroke='%230D3A44' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/24px no-repeat}
.hero .assure{justify-content:center}
.hero .assure li{color:#fff;text-shadow:0 1px 8px rgba(8,36,43,.7)}
.assure-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 24px;margin-top:40px;padding:24px 32px;border:1px solid var(--line);border-radius:16px;background:var(--surface)}
.assure-bar .assure{margin:0}
@media (max-width:760px){.assure-bar{padding:24px 16px}.assure-bar .btn{width:100%}}
/* figures strip (Fitlitter): real, sourced numbers only */
section.facts{padding:40px 0;border-bottom:1px solid var(--line)}
.facts-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:32px}
.facts-row div{display:flex;flex-direction:column;gap:8px}
.facts-row b{font:700 40px/48px var(--display);color:var(--teal-deep)}
.facts-row span{font-size:16px;line-height:24px;color:var(--muted)}
@media (max-width:900px){.facts-row{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* side-by-side comparison (Reckon, NRMA, Fitlitter) */
.compare-wrap{margin-top:32px}
.compare{width:100%;border-collapse:separate;border-spacing:0;background:var(--surface);border:1px solid var(--line);border-radius:24px;overflow:hidden}
.compare th,.compare td{padding:16px 24px;text-align:left;vertical-align:top;font-size:16px;line-height:24px;border-bottom:1px solid var(--line)}
.compare thead th{font:700 24px/32px var(--display);color:var(--teal-deep);padding-top:24px;width:37%}
.compare thead td{width:26%}
.compare .col-kicker{display:block;font:700 16px/24px var(--sans);letter-spacing:1px;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.compare tbody th{font-weight:600;color:var(--ink)}
.compare tbody th small{display:block;font-weight:400;color:var(--muted);margin-top:8px;font-size:16px;line-height:24px}
.compare tbody td{color:var(--ink)}
@media (hover:hover) and (min-width:961px){.compare tbody tr:hover{background:var(--grey)}}
.compare tbody tr{transition:background-color .2s var(--ease)}
.compare .yes{display:inline-flex;align-items:center;gap:8px;font-weight:600}
.compare .yes::before{content:"";width:24px;height:24px;flex:none;border-radius:50%;background:var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 12.5l3 3 7-7' fill='none' stroke='%230D3A44' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/24px no-repeat}
.compare tfoot td{border-bottom:0;padding:24px}
.compare-note{margin-top:16px;font-size:16px;line-height:24px;color:var(--muted);max-width:none}
@media (max-width:760px){
  .compare,.compare thead,.compare tbody,.compare tfoot{display:block}
  .compare tr{display:grid;grid-template-columns:1fr 1fr}
  .compare thead td,.compare tfoot td:first-child{display:none}
  .compare tbody th{grid-column:1/-1;padding-bottom:0;border-bottom:0;background:var(--grey)}
  .compare tbody td{background:var(--grey)}
  .compare tbody tr{border-bottom:8px solid var(--surface)}
  .compare th,.compare td{padding:16px}
  .compare thead th{width:auto;font-size:20px;line-height:32px}
  .compare tfoot tr{grid-template-columns:1fr 1fr;gap:8px;padding:16px}
  .compare tfoot td{padding:0}
  .compare tfoot .btn{width:100%;padding:0 16px;text-align:center}
}
/* closing question with large answer tiles (Fitlitter) */
.ask .enq-grid{grid-template-columns:1fr;justify-items:center;text-align:center;gap:32px}
.ask .enq-intro{display:flex;flex-direction:column;align-items:center}
.ask .enq-intro p{max-width:56ch}
.ask .enq-intro .call-big{display:none}
.ask .enq-start{background:transparent;box-shadow:none;padding:0;width:100%;max-width:1040px}
.ask .enq-start h3{color:#fff;font-size:32px;line-height:40px}
.ask .enq-start .shint,.ask .start-note{color:var(--on-dark)}
.ask .start-picks{flex-direction:row;gap:16px}
.ask .start-pick{flex:1;flex-direction:column;align-items:flex-start;text-align:left;padding:24px;border:0;min-height:160px}
.ask .start-pick::after{position:absolute;right:24px;bottom:32px}
.ask .start-pick{position:relative}
.ask .ask-call{margin-top:8px;color:#fff;font-size:20px;line-height:32px}
.ask .ask-call .phone{color:#fff}
@media (max-width:860px){.ask .start-picks{flex-direction:column}.ask .start-pick{min-height:0;flex-direction:row;align-items:center}.ask .start-pick::after{position:static}}
.ask .enq-start{text-align:center}
.ask .start-picks{text-align:left}
@media (max-width:760px){.compare tfoot tr{grid-template-columns:1fr}}

/* ---------- main buttons: solid teal with white text (9.8:1); the neutral accent is for surfaces only ---------- */
.btn{background:var(--solid);color:var(--on-solid);box-shadow:none}
@media (hover:hover) and (min-width:961px){.btn:hover{background:var(--solid-hover);color:var(--on-solid)}}
.btn:active{box-shadow:inset 0 8px 16px -8px rgba(0,0,0,.35)}
/* on teal or photo grounds the button turns sand with teal text (7:1 or better) */
.actionbar .btn{background:var(--solid);color:var(--on-solid)}
/* the hero promise: a soft sand marker under the words instead of a colour change */
.hero h1 .hl{color:#fff;background:linear-gradient(transparent 72%,color-mix(in srgb,var(--accent) 70%,transparent) 72%,color-mix(in srgb,var(--accent) 70%,transparent) 92%,transparent 92%);padding:0 8px;-webkit-box-decoration-break:clone;box-decoration-break:clone}
/* fields: a teal focus ring, not an accent one */
input:focus,select:focus,textarea:focus{box-shadow:0 0 0 4px color-mix(in srgb,var(--teal-deep) 22%,transparent)}
/* placeholder logo tick in teal, not taupe */
.wordmark .mark .tick{stroke:var(--edge)}
.hero h1 .hl{background:none;padding:0;text-decoration:underline;text-decoration-color:var(--accent);text-decoration-thickness:4px;text-underline-offset:8px;text-decoration-skip-ink:none}
.assure-bar .assure{gap:8px 16px}
.ask .shint,.ask .start-note,.ask .ask-call{margin-left:auto;margin-right:auto}

/* ---------- two option cards, a main button at the bottom of each ---------- */
.options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;margin-top:32px}
.option{display:flex;flex-direction:column;gap:16px;background:var(--surface);border:1px solid var(--line);border-radius:24px;padding:32px;transition:box-shadow .25s var(--ease)}
@media (hover:hover) and (min-width:961px){.option:hover{box-shadow:var(--lift)}}
.option h3{font-size:32px;line-height:40px;color:var(--teal-deep)}
.option .col-kicker{display:block;font:700 16px/24px var(--sans);letter-spacing:1px;text-transform:uppercase;color:var(--muted)}
.option-lede{color:var(--muted);font-size:20px;line-height:32px}
.ticks{list-style:none;padding:0;margin:8px 0 0;display:flex;flex-direction:column;gap:16px;flex:1;max-width:none}
.ticks li{display:flex;gap:16px;align-items:flex-start;font-size:16px;line-height:24px;color:var(--ink)}
.ticks li::before{content:"";flex:none;width:24px;height:24px;border-radius:50%;background:var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 12.5l3 3 7-7' fill='none' stroke='%23134A57' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/24px no-repeat}
.option .btn{margin-top:8px;width:100%}
@media (max-width:860px){.options{grid-template-columns:1fr}.option{padding:24px}}


/* ---------- dark mode: a discreet outline icon fixed at the bottom of the screen ---------- */
.theme-fab{position:fixed;right:24px;bottom:24px;z-index:75;width:48px;height:48px;display:grid;place-items:center;background:var(--surface);color:var(--muted);border:1px solid var(--line);cursor:pointer;transition:color .2s var(--ease),border-color .2s var(--ease),box-shadow .2s var(--ease)}
@media (hover:hover) and (min-width:961px){.theme-fab:hover{color:var(--teal-deep);border-color:var(--edge);box-shadow:var(--lift)}}
.theme-fab svg{width:24px;height:24px}
.theme-fab .i-sun{display:none}
.theme-fab[aria-pressed="true"] .i-moon{display:none}
.theme-fab[aria-pressed="true"] .i-sun{display:block}
@media (max-width:760px){.theme-fab{right:16px;bottom:88px}}

/* ---------- estimate: three short questions, then the results ---------- */
.est{margin-top:32px;background:var(--surface);border:1px solid var(--line);border-radius:24px;padding:40px;box-shadow:var(--shadow)}
.est-progress{display:flex;align-items:center;gap:16px;max-width:640px;margin:0 auto 32px}
.est-count{font-size:16px;line-height:24px;font-weight:600;color:var(--muted);white-space:nowrap}
.est-count b{color:var(--teal-deep)}
.est-bar{list-style:none;display:flex;gap:8px;flex:1;padding:0;margin:0;max-width:none}
.est-bar li{flex:1;height:8px;border-radius:8px;background:var(--line);transition:background-color .3s var(--ease)}
.est-bar li.on{background:var(--teal-deep)}
.est-step{max-width:640px;margin:0 auto}
.est-q{font-size:32px;line-height:40px;color:var(--teal-deep);margin-bottom:24px}
.est-q:focus{outline:none}
.est-label{display:block;margin:32px 0 8px;font-size:20px;line-height:32px;font-weight:600;color:var(--ink)}
.est-help{font-size:16px;line-height:24px;color:var(--muted);margin:8px 0 0}
.est-q + .est-help{margin:-16px 0 24px}
.tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.tiles.five{grid-template-columns:repeat(5,minmax(0,1fr))}
.tile{position:relative;min-height:64px;padding:16px;border:2px solid var(--field);border-radius:12px;background:var(--surface);color:var(--teal-deep);font:600 20px/32px var(--sans);cursor:pointer;transition:border-color .2s var(--ease),background-color .2s var(--ease),box-shadow .2s var(--ease)}
@media (hover:hover) and (min-width:961px){.tile:hover{border-color:var(--teal-deep);box-shadow:var(--lift)}}
.tile[aria-pressed="true"]{border-color:var(--teal-deep);background:color-mix(in srgb,var(--accent) 45%,var(--surface));box-shadow:inset 0 0 0 1px var(--teal-deep)}
.tile[aria-pressed="true"]::after{content:"";position:absolute;top:8px;right:8px;width:24px;height:24px;border-radius:50%;background:var(--teal-deep) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 12.5l3 3 7-7' fill='none' stroke='%23fff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/24px no-repeat}
:root[data-theme="dark"] .tile[aria-pressed="true"]::after{background-color:var(--solid)}
.stepper{display:flex;align-items:center;gap:16px}
.stepper input{width:104px;text-align:center;font:700 24px/32px var(--display);color:var(--teal-deep)}
.step-btn{width:56px;height:56px;flex:none;border:2px solid var(--edge);background:var(--surface);color:var(--teal-deep);font:700 24px/1 var(--display);cursor:pointer}
@media (hover:hover) and (min-width:961px){.step-btn:hover{background:var(--grey)}}
.money{position:relative;max-width:360px}
.money span{position:absolute;left:16px;top:50%;transform:translateY(-50%);font:700 20px/32px var(--display);color:var(--muted);pointer-events:none}
.money input{padding-left:40px;font:700 20px/32px var(--display);color:var(--teal-deep)}
.est-nav{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:40px;padding-top:24px;border-top:1px solid var(--line)}
.est-nav .btn{margin-left:auto;min-width:200px}
.est-back{min-height:48px;padding:0 8px;background:none;border:0;font:600 16px/24px var(--sans);color:var(--teal-deep);text-decoration:underline;text-underline-offset:4px;cursor:pointer}
.est-results{animation:settle .4s var(--ease) both}
.est-results:focus,#r-title:focus{outline:none}
.est-summary{font-size:20px;line-height:32px;color:var(--ink);max-width:none;margin-bottom:24px}
.est-summary button{background:none;border:0;padding:0 4px;min-height:48px;font:700 20px/32px var(--sans);color:var(--teal-deep);text-decoration:underline;text-decoration-style:dotted;text-underline-offset:6px;cursor:pointer}
@media (hover:hover) and (min-width:961px){.est-summary button:hover{text-decoration-style:solid}}
.est-summary span{display:block;font-size:16px;line-height:24px;color:var(--muted)}
.est-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.est-card{display:flex;flex-direction:column;gap:8px;background:var(--grey);border-radius:16px;padding:32px;transition:box-shadow .25s var(--ease)}
@media (hover:hover) and (min-width:961px){.est-card:hover{box-shadow:var(--lift)}}
.est-kicker{font-size:16px;line-height:24px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--muted)}
.est-big{font:700 40px/48px var(--display);color:var(--teal-deep);max-width:none}
.est-sub{font-size:16px;line-height:24px;color:var(--ink)}
.est-best{flex:1;font-size:16px;line-height:24px;color:var(--muted);padding-top:8px;border-top:1px solid var(--line);margin-top:8px}
.est-card .btn-quiet{align-self:flex-start;margin-top:8px}
.est-next{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 32px;margin-top:24px;padding:24px 32px;border-radius:16px;background:var(--band);color:var(--on-dark)}
.est-next p{font-size:16px;line-height:24px;color:var(--on-dark);max-width:56ch}
.est-next b{color:#fff}
.est-next-cta{display:flex;flex-wrap:wrap;align-items:center;gap:16px}
.est-next-cta span,.est-next-cta .phone{color:#fff}
.est-how{margin-top:24px;border-top:1px solid var(--line);padding-top:8px}
.est-how summary{cursor:pointer;min-height:48px;display:flex;align-items:center;font-weight:600;color:var(--teal-deep)}
.est-how ul{padding-left:24px;margin:8px 0 16px;max-width:80ch}
.est-how li,.est-how p{font-size:16px;line-height:24px;color:var(--muted);margin-bottom:8px}
.est-restart{margin-top:16px}
@media (max-width:900px){.tiles.five{grid-template-columns:repeat(3,minmax(0,1fr))}.est-cards{grid-template-columns:1fr}}
@media (max-width:560px){
  .est{padding:24px 16px}
  .est-q{font-size:24px;line-height:32px}
  .tiles,.tiles.five{grid-template-columns:1fr 1fr}
  .est-nav .btn{min-width:0;flex:1}
  .est-big{font-size:32px;line-height:40px}
  .est-card,.est-next{padding:24px}
}

/* ---------- steps: four explicit cards, each with a title, a subtitle and the detail ---------- */
.step-card{flex:1;display:flex;flex-direction:column;gap:8px;background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:24px;transition:border-color .25s var(--ease),box-shadow .25s var(--ease)}
.step-card h3{font-size:24px;line-height:32px;color:var(--teal-deep)}
.step-card .step-sub{font-size:16px;line-height:24px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--muted)}
.step-card p{font-size:16px;line-height:24px;color:var(--ink)}

/* ---------- situations: three cards, photo on top ---------- */
.situations{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-top:32px}
.situation{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);border-radius:16px;overflow:hidden;transition:box-shadow .25s var(--ease)}
@media (hover:hover) and (min-width:961px){.situation:hover{box-shadow:var(--lift)}}
.situation img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block}
.situation-body{display:flex;flex-direction:column;gap:8px;padding:24px}
.situation-tag{align-self:flex-start;font-size:16px;line-height:24px;font-weight:700;color:var(--teal-deep);background:var(--accent);padding:0 8px;border-radius:8px}
.situation h3{font-size:24px;line-height:32px}
.situation p{font-size:16px;line-height:24px;color:var(--ink)}
@media (max-width:900px){.situations{grid-template-columns:1fr}}

/* ---------- promises: two rows, a photo then three cards ---------- */
.promises{display:flex;flex-direction:column;gap:24px;margin-top:32px}
.promise-row{display:grid;grid-template-columns:minmax(0,1.3fr) repeat(3,minmax(0,1fr));gap:24px}
.promise-photo{width:100%;height:100%;min-height:256px;object-fit:cover;border-radius:16px;display:block}
.promise{display:flex;flex-direction:column;gap:8px;background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:24px;transition:box-shadow .25s var(--ease)}
@media (hover:hover) and (min-width:961px){.promise:hover{box-shadow:var(--lift)}}
.promise .ic{display:grid;place-items:center;width:48px;height:48px;border-radius:12px;background:var(--accent);color:#134A57;margin-bottom:8px}
.promise .ic svg{width:24px;height:24px}
.promise h3{font-size:20px;line-height:32px}
.promise p{font-size:16px;line-height:24px;color:var(--muted)}
@media (max-width:1080px){.promise-row{grid-template-columns:repeat(3,minmax(0,1fr))}.promise-photo{grid-column:1/-1;height:256px}}
@media (max-width:760px){.promise-row{grid-template-columns:1fr}}

/* reassurance points: small line icons, three at most */
.assure li::before{content:none}
.assure li svg{width:24px;height:24px;flex:none;color:var(--teal-deep)}
.hero .assure li svg{color:var(--accent)}
.hero .assure{gap:8px 32px}
/* the underline highlight: one key phrase per section at most */
.hl{text-decoration:underline;text-decoration-color:var(--accent-line);text-decoration-thickness:4px;text-underline-offset:8px;text-decoration-skip-ink:none}
.hero .hl{text-decoration-color:var(--accent)}
/* the phone number inside a sentence flows inline */
p .phone,.promise p .phone{display:inline;min-height:0}
.est-summary button{padding:0}

/* promises: one photo bleeding to the left edge, as tall as both rows of cards */
.promises{display:grid;grid-template-columns:minmax(0,1.3fr) repeat(3,minmax(0,1fr));grid-auto-rows:auto;gap:24px;margin-top:32px}
.promises .promise-photo{grid-row:1/3;grid-column:1;height:100%;min-height:0;width:calc(100% + max(0px,(100vw - 1240px) / 2) + 40px);margin-left:calc(-1 * (max(0px,(100vw - 1240px) / 2) + 40px));border-radius:0 24px 24px 0;object-fit:cover}
@media (max-width:1080px){.promises{grid-template-columns:repeat(2,minmax(0,1fr))}.promises .promise-photo{grid-row:auto;grid-column:1/-1;height:320px;width:100%;margin-left:0;border-radius:16px}}
@media (max-width:760px){.promises{grid-template-columns:1fr}}
/* the calculator sits on the teal band */
#estimate .kicker h2,#estimate .intro{color:#fff}
#estimate .eyebrow{color:var(--accent-tint)}
#estimate .intro{color:var(--on-dark)}
#estimate > .wrap > .note a{color:#fff}
/* phone in the header and under the hero: 14px, quieter */
.callus,.callus .phone{font-size:14px;line-height:24px;font-weight:500}
.hero .or,.hero .or .phone{font-size:14px;line-height:24px}
.hero .or .phone{font-weight:600}
/* fixes from the contrast sweep */
.situation-tag{color:#134A57}
.tile[aria-pressed="true"]{background:var(--accent-tint)}
:root[data-theme="dark"] .tile[aria-pressed="true"]{background:var(--mist)}

/* inside the calculator card on the teal band, text keeps its normal colours */
.est{color:var(--ink)}
section.band .est h3{color:var(--teal-deep)}
section.band .est p{color:var(--ink)}
section.band .est .est-help,section.band .est .est-best,section.band .est .est-summary span,section.band .est .est-how p,section.band .est .est-how li{color:var(--muted)}
section.band .est .est-next p{color:var(--on-dark)}
section.band .est a:not(.btn):not(.btn-quiet):not(.phone){color:var(--teal-deep)}
section.band .est .est-next .phone{color:#fff}

/* slim full-width enquiry banners at decision points */
.banner{background:var(--accent);color:#134A57}
.banner-in{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 32px;padding-top:24px;padding-bottom:24px}
.banner p{font-size:20px;line-height:32px;color:#134A57;max-width:none}
.banner b{font-weight:700}
.banner-cta{display:flex;flex-wrap:wrap;align-items:center;gap:16px}
.banner-cta span,.banner-cta .phone{font-size:16px;line-height:24px;color:#134A57}
.banner .btn{background:#134A57;color:#fff}
@media (hover:hover) and (min-width:961px){.banner .btn:hover{background:#0E3A44}}
@media (max-width:760px){.banner-cta{width:100%}.banner .btn{flex:1}}

/* ---------- scrolled header: teal, white text, tighter rows ---------- */
.site-head.solid,body:has(.hero-full) .site-head.solid{background:var(--band);border-color:transparent;box-shadow:0 8px 24px -16px rgba(0,0,0,.5)}
.site-head.solid .bar{padding-top:8px}
.site-head.solid nav.main{padding:0 0 8px}
.site-head.solid :is(.wordmark,nav.main a,.callus,.phone,.navbtn){color:#fff}
.site-head.solid nav.main a[aria-current="page"]{border-bottom-color:var(--accent)}@media (hover:hover) and (min-width:961px){.site-head.solid nav.main a:hover{border-bottom-color:var(--accent)}}
.site-head.solid .head-calc{color:#fff;border-color:rgba(255,255,255,.7)}
@media (hover:hover) and (min-width:961px){.site-head.solid .head-calc:hover{background:rgba(255,255,255,.12)}}
.site-head.solid .navbtn{border-color:rgba(255,255,255,.7)}
.site-head.solid .wordmark .mark .tick{stroke:var(--accent)}
.site-head.solid :focus-visible{outline-color:var(--accent)}
.site-head.solid:has(.navtoggle:checked){background:var(--band)}
.promises .promise-photo{max-width:none}
.est section{padding:0;scroll-margin-top:160px}

/* ---------- button hierarchy: primary (solid teal), secondary (sand with a teal outline), tertiary (ghost); 8px corners ---------- */
.btn,.btn-quiet,.btn-ghost,.btn-tertiary,.est-back,.navbtn,.head-calc,.step-btn,.cbtn,.toggle,.theme-fab,.actionbar .ab-call .phone{border-radius:8px}
.toggle label:first-of-type{border-radius:6px 0 0 6px}
.toggle label:last-of-type{border-radius:0 6px 6px 0}
.btn{background:var(--solid);color:var(--on-solid);border:2px solid var(--solid)}
@media (hover:hover) and (min-width:961px){.btn:hover{background:var(--solid-hover);border-color:var(--solid-hover);color:var(--on-solid)}}
.btn-quiet{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 24px;background:var(--accent);color:#134A57;border:2px solid #134A57;font-weight:700;text-decoration:none}
@media (hover:hover) and (min-width:961px){.btn-quiet:hover{background:var(--accent-hover);color:#134A57}}
.btn-tertiary,.est-back{display:inline-flex;align-items:center;min-height:48px;padding:0 16px;background:transparent;border:0;color:var(--teal-deep);font:600 16px/24px var(--sans);text-decoration:underline;text-underline-offset:4px;cursor:pointer}
@media (hover:hover) and (min-width:961px){.btn-tertiary:hover,.est-back:hover{background:var(--grey)}}
/* on teal or photo grounds: the primary turns white, the secondary becomes a white outline */
:is(.hero,section.band,.cta,.enq-intro,.est-next,.site-head.solid) .btn,body:has(.hero-full) .site-head:not(.solid):not(:has(.navtoggle:checked)) .btn{background:#fff;border-color:#fff;color:#134A57}
@media (hover:hover) and (min-width:961px){:is(.hero,section.band,.cta,.enq-intro,.est-next,.site-head.solid) .btn:hover,body:has(.hero-full) .site-head:not(.solid):not(:has(.navtoggle:checked)) .btn:hover{background:var(--accent-tint);border-color:var(--accent-tint);color:#134A57}}
:is(.hero,section.band,.cta,.site-head.solid) :is(.btn-ghost,.head-calc),body:has(.hero-full) .site-head:not(.solid):not(:has(.navtoggle:checked)) .head-calc{background:transparent;color:#fff;border:2px solid #fff}
/* inside the white calculator card on the band, buttons keep their light-ground look */
section.band .est .est-nav .btn{background:var(--solid);border-color:var(--solid);color:var(--on-solid)}
@media (hover:hover) and (min-width:961px){section.band .est .est-nav .btn:hover{background:var(--solid-hover);border-color:var(--solid-hover)}}
section.band .est .est-back{color:var(--teal-deep)}
/* the header Calculator link is the secondary on light grounds */
.head-calc{background:var(--accent);color:#134A57;border:2px solid #134A57}
.banner .btn{background:#134A57;border-color:#134A57;color:#fff}
.situation-tag{border-radius:999px;font-weight:500;padding:0 16px;line-height:32px}

/* ---------- hero: 640px tall, so the reassurances and figures show on arrival ---------- */
@media (min-width:761px){
  .hero{min-height:0;height:640px;padding:128px 0 40px;place-items:center}
  .hero .eyebrow{margin-bottom:8px}
  .hero h1{font-size:48px;line-height:56px}
  .hero p.lede{max-width:720px;margin:16px auto 24px;font-size:20px;line-height:32px}
  .hero .assure{margin-top:16px}
}
@media (max-width:760px){
  .hero{min-height:0;padding:104px 0 40px}
}

/* ---------- section labels as accent pills; text on the accent uses the darker ink (7:1 on gold) ---------- */
.eyebrow,.hero .eyebrow,.enq-intro .eyebrow,#estimate .eyebrow,.calc-result .eyebrow{display:inline-block;background:var(--accent);color:var(--accent-ink);border-radius:999px;padding:0 16px;font-size:14px;line-height:32px;font-weight:500;letter-spacing:1px;text-shadow:none;margin-bottom:16px}
.situation-tag,.promise .ic,.banner,.head-calc,.btn-quiet{color:var(--accent-ink)}@media (hover:hover) and (min-width:961px){.btn-quiet:hover{color:var(--accent-ink)}}
.form-msg{color:var(--teal-deep)}
@media (min-width:761px){.hero h1{font-size:56px;line-height:64px}}

/* ---------- how it works at a glance: one panel, four columns, number beside the title ---------- */
.steps{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:0;margin-top:32px;background:var(--surface);border:1px solid var(--line);border-radius:16px;overflow:hidden}
.steps li{padding:24px;display:grid;grid-template-columns:40px 1fr;column-gap:16px;align-content:start;border-left:1px solid var(--line)}
.steps li:first-child{border-left:0}
.steps li::before{position:static;width:40px;height:40px;font:700 16px/40px var(--display);box-shadow:none;grid-row:1}
.steps li::after{display:none}
.steps .step-card{display:contents}
.steps .step-card h3{grid-column:2;grid-row:1;align-self:center;font-size:20px;line-height:24px}
.steps .step-card .step-sub,.steps .step-card p{grid-column:1/-1}
.steps .step-card .step-sub{margin-top:16px;font-size:16px;line-height:24px;font-weight:600;letter-spacing:0;text-transform:none;color:var(--teal-deep)}
.steps .step-card p:not(.step-sub){margin-top:8px;color:var(--muted)}
@media (hover:hover) and (min-width:961px){.steps li:hover{background:var(--grey)}}
@media (hover:hover) and (min-width:961px){.steps li:hover .step-card{box-shadow:none}}
@media (max-width:900px){
  .steps{grid-auto-flow:row;grid-template-columns:1fr 1fr}
  .steps li{border-left:1px solid var(--line);border-top:1px solid var(--line)}
  .steps li:nth-child(odd){border-left:0}
  .steps li:nth-child(-n+2){border-top:0}
}
@media (max-width:560px){
  .steps{grid-template-columns:1fr}
  .steps li{padding:16px;border-left:0}
  .steps li:nth-child(2){border-top:1px solid var(--line)}
  .steps .step-card .step-sub{margin-top:8px}
}

/* footer: FSG line sits where the photo credits were */
.fine{align-items:center}
.fine .f-fsg{display:inline-flex;align-items:center;min-height:48px;color:var(--on-dark);text-decoration:none;font-size:16px;line-height:24px}
.fine .f-fsg b{color:#fff;font-weight:600;margin-left:4px}
@media (hover:hover) and (min-width:961px){.fine .f-fsg:hover b{text-decoration:underline;text-underline-offset:4px}}
.banner,.banner p,.banner b,.banner span,.banner .phone{color:var(--accent-ink)}
@media (min-width:761px){.hero p.lede{margin-bottom:40px}}
@media (max-width:760px){.hero p.lede{margin-bottom:32px}}

/* ---------- gold is a highlight only (labels, tags, underlines, hero icons). Supporting surfaces use a soft green ---------- */
:root{--soft:#DCEAE7;--soft-hover:#D2E3E0;--soft-ink:#134A57}
.btn-quiet,.head-calc,.banner{background:var(--soft);color:var(--soft-ink)}
@media (hover:hover) and (min-width:961px){.btn-quiet:hover,.head-calc:hover{background:var(--soft-hover);color:var(--soft-ink)}}
.banner p,.banner b,.banner span,.banner .phone{color:var(--soft-ink)}
.promise .ic{background:var(--soft);color:var(--soft-ink)}@media (hover:hover) and (min-width:961px){.start-pick:hover .pick-ic{background:var(--soft);color:var(--soft-ink)}}
.tile[aria-pressed="true"]{background:var(--soft)}
.assure li::before,.compare .yes::before,.ticks li::before{background-color:var(--soft)}
.eyebrow{width:max-content;max-width:100%;align-self:flex-start}
.hero .eyebrow,.pagehead .eyebrow{align-self:auto}

/* ---------- nav: the two pathways sit under "Your options" ---------- */
.nav-drop{position:relative}
.nav-drop-btn{display:inline-flex;align-items:center;gap:8px;min-height:48px;padding:8px 0;background:none;border:0;border-bottom:3px solid transparent;font:600 16px/24px var(--sans);color:var(--teal-deep);cursor:pointer}
.nav-drop-btn svg{transition:transform .2s}
.nav-drop-btn[aria-expanded="true"] svg{transform:rotate(180deg)}
.nav-drop:has([aria-current]) .nav-drop-btn{border-bottom-color:var(--accent-line)}@media (hover:hover) and (min-width:961px){.nav-drop-btn:hover{border-bottom-color:var(--accent-line)}}
.site-head.solid .nav-drop-btn,body:has(.hero-full) .site-head:not(.solid):not(:has(.navtoggle:checked)) .nav-drop-btn{color:#fff}
.site-head.solid .nav-drop:has([aria-current]) .nav-drop-btn{border-bottom-color:var(--accent)}@media (hover:hover) and (min-width:961px){.site-head.solid .nav-drop-btn:hover{border-bottom-color:var(--accent)}}
body:has(.hero-full) .site-head:not(.solid) .nav-drop-btn{text-shadow:0 1px 12px rgba(8,36,43,.6)}
.nav-menu{position:absolute;top:calc(100% + 8px);left:50%;transform:translateX(-50%);z-index:60;width:360px;display:grid;gap:0;padding:8px;background:var(--surface);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow)}
.nav-menu[hidden]{display:none}
.site-head nav.main .nav-menu a{display:grid;gap:0;width:100%;min-height:48px;padding:16px;border:0;border-radius:8px;color:var(--teal-deep);text-shadow:none}
.site-head nav.main .nav-menu a b{font-weight:600;color:var(--teal-deep)}
.site-head nav.main .nav-menu a span{font-weight:400;font-size:14px;line-height:24px;color:var(--muted)}
.site-head nav.main .nav-menu a[aria-current="page"]{background:var(--soft)}@media (hover:hover) and (min-width:961px){.site-head nav.main .nav-menu a:hover{background:var(--soft)}}
@media (max-width:960px){
  .nav-drop{width:100%}
  .nav-drop-btn{width:100%;justify-content:space-between}
  .nav-menu{position:static;transform:none;width:100%;box-shadow:none;border:0;padding:0 0 0 16px;background:transparent}
}
:root[data-theme="dark"] .site-head nav.main .nav-menu a[aria-current="page"]{background:var(--mist)}@media (hover:hover) and (min-width:961px){:root[data-theme="dark"] .site-head nav.main .nav-menu a:hover{background:var(--mist)}}
.site-head nav.main .nav-menu a,.site-head nav.main .nav-menu a *{text-shadow:none!important}
/* pills: soft gold fill with a gold outline */
.eyebrow,.hero .eyebrow,.enq-intro .eyebrow,#estimate .eyebrow,.calc-result .eyebrow,.situation-tag{background:var(--accent-tint);border:1px solid #D9A22B;color:var(--accent-ink)}
.situation-tag{line-height:30px}
.eyebrow{line-height:30px}
/* situations: heading and intro centred */
.situations-sec .kicker,.situations-sec .intro{text-align:center;margin-left:auto;margin-right:auto}
.situations-sec .kicker{align-items:center;justify-content:center}
.situations-sec .sec-more{margin:32px auto 0;text-align:center}
.faq .intro{margin-bottom:48px}
/* pills: on light grounds soft gold with gold outline and dark gold text (7.4:1); on dark grounds the full gold fill */
.eyebrow,.situation-tag{color:#5E4500}
:is(.hero,section.band,#estimate,.enq-intro,.enquire-band,.cta,.calc-result,footer) .eyebrow,
:root[data-theme="dark"] :is(.eyebrow,.situation-tag){background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
/* promises: photo stays inside the content width, aligned with the cards */
.promises .promise-photo{width:100%;margin-left:0;border-radius:16px}
.ask .enq-intro .eyebrow,.situations-sec .eyebrow,.hero .eyebrow{align-self:center}
/* section-end links sit centred under their section */
p.sec-more{margin:32px auto 0;max-width:none;text-align:center}
.faq p.sec-more{margin-top:32px}

/* ---------- calculator: age slider, photo column on wide screens ---------- */
.age-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px}
.age-out{font:700 32px/40px var(--display);color:var(--teal-deep)}
.est input[type=range]{display:block;width:100%;height:48px;margin:8px 0 0}
.est input[type=range]::-webkit-slider-runnable-track{height:8px;border-radius:999px;background:var(--line)}
.est input[type=range]::-moz-range-track{height:8px;border-radius:999px;background:var(--line)}
.est input[type=range]::-moz-range-progress{height:8px;border-radius:999px;background:var(--teal-deep)}
.est input[type=range]::-webkit-slider-thumb{width:32px;height:32px;margin-top:-12px;background:var(--teal-deep);border:4px solid #fff;box-shadow:0 0 0 2px var(--teal-deep)}
.est input[type=range]::-moz-range-thumb{width:24px;height:24px;background:var(--teal-deep);border:4px solid #fff;box-shadow:0 0 0 2px var(--teal-deep)}
.age-scale{display:flex;justify-content:space-between;font-size:14px;line-height:24px;color:var(--muted)}
.est-photo{display:none}
@media (min-width:961px){
  .est{display:grid;grid-template-columns:minmax(0,1fr) 400px;gap:48px;overflow:hidden}
  .est .est-progress,.est .est-step{max-width:none;margin-left:0;margin-right:0}
  .est-photo{display:block;width:calc(100% + 40px);height:calc(100% + 80px);margin:-40px -40px -40px 0;object-fit:cover;object-position:62% 30%;max-width:none}
  .est:has(#e-results:not([hidden])){grid-template-columns:1fr}
  .est:has(#e-results:not([hidden])) .est-photo{display:none}
}
/* hero: more air around the buttons */
@media (min-width:761px){.hero p.lede{margin-bottom:48px}.hero .assure{margin-top:32px}}
@media (max-width:760px){.hero .assure{margin-top:24px}}
.facts b{font-variant-numeric:tabular-nums}
.facts b i{font-style:normal}
.est input[type=range]{border:0;padding:0;background:transparent;box-shadow:none;border-radius:0}
.est input[type=range]:focus-visible{outline:3px solid var(--teal-deep);outline-offset:4px;border-radius:8px}
p.sec-more .sep{display:inline-block;width:32px}
@media (max-width:560px){p.sec-more .sep{display:block;height:16px}}
section.band .est a.btn-quiet{color:var(--soft-ink);text-decoration:none}@media (hover:hover) and (min-width:961px){section.band .est a.btn-quiet:hover{color:var(--soft-ink);text-decoration:none}}
/* option pages: the calculator as the main action */
.calc-band{padding-top:64px;padding-bottom:64px}
.calc-band-in{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:32px 64px;align-items:center}
.calc-band h2{margin-top:0}
.calc-band p{margin-top:16px;font-size:20px;line-height:32px}
.calc-band-cta{display:flex;flex-direction:column;align-items:center;gap:8px}
.calc-band-cta span{font-size:16px;line-height:24px;color:var(--on-dark)}
@media (max-width:760px){.calc-band-in{grid-template-columns:1fr}.calc-band-cta{align-items:stretch;text-align:center}}
section.band .est{border:0}
/* calculator: every step and the results share one grid cell, so the card keeps the same size throughout */
@media (min-width:761px){
  .est-main{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto 1fr}
  .est-main > .est-progress{grid-row:1;grid-column:1}
  .est-main > .est-progress[hidden]{display:flex!important;visibility:hidden}
  .est-main > section{grid-row:2;grid-column:1;display:flex;flex-direction:column}
  .est-main > .est-results{grid-row:1/3}
  .est-main > section[hidden]{display:flex!important;visibility:hidden}
  .est-step .est-nav{margin-top:auto;padding-top:24px}
  .est-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .est .est-big{font-size:32px;line-height:40px}
}
@media (min-width:961px){
  .est{grid-template-columns:minmax(0,1fr) 320px}
  .est:has(#e-results:not([hidden])){grid-template-columns:minmax(0,1fr) 320px}
  .est:has(#e-results:not([hidden])) .est-photo{display:block}
}
/* results: full card width and compact, so the shared height stays close to the question steps */
@media (min-width:961px){
  .est:has(#e-results:not([hidden])){grid-template-columns:1fr}
  .est:has(#e-results:not([hidden])) .est-photo{display:none}
  .est .est-big{font-size:40px;line-height:48px}
}
.est-results .est-summary{margin-bottom:16px}
.est-results .est-cards{gap:16px}
.est-results .est-card{padding:24px;gap:8px}
.est-results .est-next{margin-top:16px;padding:16px 24px}
.est-foot{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:8px 24px;margin-top:16px}
.est-foot .est-how{margin:0;border:0;padding:0;flex:1 1 320px}
.est-foot .est-restart{margin:0}
/* type colour: titles and their intro in green; smaller titles and body in black */
h1,h2{color:var(--teal-deep)}
h3,h4,.option h3,.step-card h3,.steps .step-card h3,section.band .est h3,.calc-idle h3,.enq-start h3{color:var(--ink)}
.intro,.pagehead p.lede{color:var(--teal-deep)}
section.band .intro,#estimate .intro,section.band h2,section.band h3,.ask .enq-start h3{color:#fff}
section.band .intro,#estimate .intro{color:var(--on-dark)}
/* results, compact: the card's locked height follows the question steps, not a tall results view */
.est-results .est-summary{font-size:16px;line-height:24px;margin-bottom:8px}
.est-results .est-summary button{min-height:40px;font-size:16px;line-height:24px}
.est-results .est-summary span{display:inline;font-size:14px;margin-left:8px}
.est-results .est-card{padding:24px;gap:4px}
.est-results .est-sub,.est-results .est-best{font-size:14px;line-height:24px}
.est-results .est-best{padding-top:4px;margin-top:4px}
.est-results .est-card .btn-quiet{margin-top:8px;align-self:flex-start}
.est-results .est-next{margin-top:16px;padding:16px 24px;flex-wrap:nowrap}
.est-results .est-next p{max-width:none}
.est-results .est-next-cta{flex-wrap:nowrap;white-space:nowrap}
.est-results .est-foot{margin-top:8px}
@media (max-width:960px){.est-results .est-next,.est-results .est-next-cta{flex-wrap:wrap;white-space:normal}}
@media (min-width:761px){.est-main > .est-results[hidden]{display:none!important}}
/* about: four promise cards */
.cards4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;margin-top:32px}
@media (max-width:1080px){.cards4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.cards4{grid-template-columns:1fr}}
/* FAQ page: sticky topic nav on the left */
.faq-layout{display:grid;grid-template-columns:256px minmax(0,1fr);gap:64px;align-items:start}
.faq-nav{position:sticky;top:160px}
.faq-nav-title{font-size:14px;line-height:24px;font-weight:600;letter-spacing:1px;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.faq-nav ul{list-style:none;padding:0;margin:0;border-left:2px solid var(--line)}
.faq-nav a{display:flex;align-items:center;min-height:48px;padding:8px 16px;margin-left:-2px;border-left:2px solid transparent;color:var(--ink);text-decoration:none;font-size:16px;line-height:24px}
@media (hover:hover) and (min-width:961px){.faq-nav a:hover{color:var(--teal-deep);border-left-color:var(--edge)}}
.faq-nav a[aria-current]{color:var(--teal-deep);font-weight:600;border-left-color:var(--teal-deep)}
.faq-list h2{scroll-margin-top:160px;margin:48px 0 16px}
.faq-list h2:first-child{margin-top:0}
@media (max-width:960px){
  .faq-layout{grid-template-columns:1fr;gap:32px}
  .faq-nav{position:static}
  .faq-nav ul{border-left:0;display:flex;flex-wrap:wrap;gap:8px}
  .faq-nav a{margin:0;border:1px solid var(--line);border-radius:999px;padding:8px 16px}
}
.cards3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-top:32px}
@media (max-width:900px){.cards3{grid-template-columns:1fr}}
/* FAQ search */
.faq-search{margin-bottom:48px}
.faq-search label{display:block;font-weight:600;font-size:16px;line-height:24px;margin-bottom:8px;color:var(--ink)}
.faq-search-box{position:relative;display:flex;align-items:center}
.faq-search-box svg{position:absolute;left:16px;color:var(--muted);pointer-events:none}
.faq-search-box input{width:100%;min-height:56px;padding:0 96px 0 56px;font-size:20px;line-height:32px;border:2px solid var(--field);border-radius:8px;background:var(--surface);color:var(--ink)}
.faq-search-box input::-webkit-search-cancel-button{display:none}
.faq-clear{position:absolute;right:8px;min-height:40px;padding:0 16px;border:0;background:none;color:var(--teal-deep);font:600 16px/24px var(--sans);text-decoration:underline;cursor:pointer}
.faq-suggest{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:16px}
.faq-suggest span{font-size:16px;line-height:24px;color:var(--muted)}
.faq-suggest button{min-height:40px;padding:0 16px;border:1px solid var(--line);border-radius:999px;background:var(--surface);color:var(--teal-deep);font:500 16px/24px var(--sans);cursor:pointer}
@media (hover:hover) and (min-width:961px){.faq-suggest button:hover{border-color:var(--edge);background:var(--soft)}}
.faq-count{margin-top:16px;font-size:16px;line-height:24px;color:var(--muted)}
.faq-count:empty{display:none}
.faq-none{margin-top:16px;padding:16px 24px;border-radius:16px;background:var(--surface);border:1px solid var(--line);font-size:16px;line-height:24px}
.faq-list summary mark{background:var(--accent-tint);color:inherit;border-radius:4px;padding:0 2px}
@media (hover:hover) and (min-width:961px){:root[data-theme="dark"] .faq-suggest button:hover{background:var(--mist)}}
/* how it works: quiet, informative notes */
.info3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px;margin-top:32px}
.info3 > div{padding-top:24px;border-top:1px solid var(--line)}
.info3 h3{font-size:20px;line-height:32px;color:var(--ink)}
.info3 p{margin-top:8px;font-size:16px;line-height:24px;color:var(--muted)}
@media (max-width:900px){.info3{grid-template-columns:1fr;gap:24px}}
/* calculator: method link sits beside Continue as a quiet tertiary */
.est-nav .est-howlink{margin-left:auto;display:inline-flex;align-items:center;min-height:48px;padding:0 8px;font-size:14px;line-height:24px;color:var(--muted);text-decoration:underline;text-underline-offset:4px}
section.band .est .est-nav .est-howlink{color:var(--muted)}
@media (hover:hover) and (min-width:961px){.est-nav .est-howlink:hover{color:var(--ink)}}
.est-nav .est-howlink + .btn{margin-left:0}
@media (max-width:560px){.est-nav{flex-wrap:wrap}.est-nav .est-howlink{order:3;width:100%;justify-content:center;margin:0}}
/* popular searches: full touch target */
.faq-suggest button{min-height:48px}
#method{scroll-margin-top:160px}
#calc-widget .est-nav .est-howlink{color:var(--muted)}
@media (hover:hover) and (min-width:961px){#calc-widget .est-nav .est-howlink:hover{color:var(--ink)}}
/* step 3: guidance on what counts as owing */
.est-guide{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 32px;margin-top:24px;padding:16px 24px;border-radius:16px;background:var(--grey)}
.est-guide-h{font-size:14px;line-height:24px;font-weight:600;letter-spacing:1px;text-transform:uppercase;color:var(--muted)}
section.band .est .est-guide-h{color:var(--muted)}
.est-guide ul{margin:8px 0 0;padding-left:24px}
.est-guide li{font-size:16px;line-height:24px;color:var(--ink)}
.est-guide li + li{margin-top:4px}
#e-owing-wrap{margin-top:24px}
#e-owing-wrap .est-help{margin-top:8px}
@media (max-width:560px){.est-guide{grid-template-columns:1fr}}
.owing-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px;align-items:start;margin-top:24px}
.owing-row .est-guide{display:block;margin:0;padding:16px 24px}
.owing-row .est-guide ul{margin:4px 0 8px}
.owing-row .est-guide ul:last-child{margin-bottom:0}
.owing-row .money input{width:100%}
@media (min-width:761px){#e-owing-wrap[hidden]{display:grid!important;visibility:hidden}}
@media (max-width:760px){.owing-row{grid-template-columns:1fr}}
.calc-band-cta span{font-size:12px;line-height:16px}
.owing-row .est-label{margin-top:0}
.owing-row{margin-bottom:24px}
/* about: photo beside Who we are */
.who-we-are{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:64px;align-items:center}
.wwa-photo{width:100%;height:100%;min-height:320px;max-height:480px;object-fit:cover;object-position:60% 50%;border-radius:16px}
.who-we-are .prose{max-width:none}
@media (max-width:900px){.who-we-are{grid-template-columns:1fr;gap:32px}.wwa-photo{min-height:0;aspect-ratio:3/2}}
/* focus: a slim 2px ring, offset from the element (WCAG 2.2 focus visible) */
a:focus-visible,button:focus-visible,summary:focus-visible,select:focus-visible,label:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--teal-deep);outline-offset:2px}
input:focus-visible,textarea:focus-visible,select:focus-visible{outline:none}
input:focus,select:focus,textarea:focus{border-color:var(--teal-deep);box-shadow:inset 0 0 0 1px var(--teal-deep)}
.est input[type=range]:focus-visible,input[type=range]:focus-visible{outline:2px solid var(--teal-deep);outline-offset:2px;box-shadow:none}
.picks input:focus-visible + .pick,.chips input:focus-visible + label{outline-width:2px;outline-offset:2px}
:is(.hero,.band,.cta,.enq-intro,footer,.calc-result,.site-head.solid) :focus-visible{outline-color:var(--accent)}
section.band .est :focus-visible{outline-color:var(--teal-deep)}
/* FAQ search: small, inside the sticky nav */
.faq-nav .faq-search{margin:24px 0 0}
.faq-nav .faq-search label{font-size:14px;line-height:24px;font-weight:600;letter-spacing:1px;text-transform:uppercase;color:var(--muted)}
.faq-nav .faq-search-box svg{left:12px;width:16px;height:16px}
.faq-nav .faq-search-box input{min-height:48px;padding:0 64px 0 36px;font-size:16px;line-height:24px;border-width:1px;border-color:var(--field)}
.faq-nav .faq-clear{font-size:14px;padding:0 8px;min-height:44px}
.faq-nav .faq-suggest{margin-top:8px;gap:4px 8px}
.faq-nav .faq-suggest span{width:100%;font-size:14px}
.faq-nav .faq-suggest button{min-height:44px;padding:0 12px;font-size:14px;line-height:24px;font-weight:400}
.faq-nav .faq-count{margin-top:8px;font-size:14px}
.faq-list > .faq-none{margin:0 0 32px}
@media (max-width:960px){.faq-nav .faq-search{max-width:480px}}
/* calculator: method link sits on the left of the button row */
#calc-widget .est-nav .est-howlink{margin-left:0}
#calc-widget .est-nav .est-howlink + .btn{margin-left:auto}
.est-nav .est-back + .est-howlink{margin-left:8px}
/* FAQ side panel never runs off the screen */
@media (min-width:961px){.faq-nav{max-height:calc(100vh - 176px);overflow-y:auto;padding:4px 4px 16px 4px;margin:-4px}}
/* section header: title on the left, its tertiary link far right */
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px 32px;margin-bottom:32px}
.sec-head .kicker{margin-bottom:0}
.sec-links{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:0 24px;flex:none}
.sec-link{display:inline-flex;align-items:center;min-height:48px;font-size:16px;line-height:24px;font-weight:500;color:var(--teal-deep);text-decoration:underline;text-underline-offset:4px;white-space:nowrap}
@media (hover:hover) and (min-width:961px){.sec-link:hover{color:var(--ink)}}
.situations-sec .sec-head{display:grid;grid-template-columns:1fr auto 1fr;align-items:end}
.situations-sec .sec-head::before{content:""}
.situations-sec .sec-links{justify-self:end}
.sec-head + .intro{margin-top:-16px}
@media (max-width:760px){
  .sec-head,.situations-sec .sec-head{display:flex;flex-direction:column;align-items:flex-start;gap:8px}
  .situations-sec .sec-head{align-items:center}
  .situations-sec .sec-head::before{display:none}
  .sec-links{justify-content:flex-start}
}
/* about: business details */
.biz{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 32px;margin:24px 0 0;padding:24px;border:1px solid var(--line);border-radius:16px;background:var(--grey)}
.biz dt{font-size:14px;line-height:24px;font-weight:600;letter-spacing:1px;text-transform:uppercase;color:var(--muted)}
.biz dd{margin:0;font-size:16px;line-height:24px;color:var(--ink);font-weight:600}
.biz dd .phone{min-height:0}
.who-we-are .prose .eyebrow{margin-bottom:16px}
/* option pages: space after the step panel */
.after-steps{margin-top:32px}
.wrap.prose.after-steps{max-width:1240px}
.after-steps > *{max-width:70ch}
.who-we-are .prose h2{margin-top:0}
/* popular search tags: 8px by 6px inside, hit area kept at 44px */
.faq-nav .faq-suggest button{min-height:0;padding:8px 6px;position:relative}
.faq-nav .faq-suggest button::after{content:"";position:absolute;inset:-2px 0}
.wrap.prose{max-width:1240px}
.wrap.prose > *{max-width:70ch}
.wrap.prose > .steps,.wrap.prose > .info3{max-width:none}
/* calculator page: method in cards */
.calc-how{max-width:1240px}
.how-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;margin-top:32px}
.how-card{display:flex;flex-direction:column;gap:8px;padding:32px;background:var(--surface);border:1px solid var(--line);border-radius:16px}
.how-card h3{font-size:24px;line-height:32px;color:var(--ink)}
.how-list{list-style:none;padding:0;margin:8px 0 0;display:grid;gap:16px}
.how-list li{position:relative;padding-left:24px;font-size:16px;line-height:24px;color:var(--muted)}
.how-list li::before{content:"";position:absolute;left:0;top:8px;width:8px;height:8px;border-radius:50%;background:var(--teal-deep)}
.how-list b{color:var(--ink);font-weight:600}
.how-example{margin-top:auto;padding:16px 24px;border-radius:8px;background:var(--grey)}
.how-card .how-list{margin-bottom:16px}
.how-example-h{font-size:14px;line-height:24px;font-weight:600;letter-spacing:1px;text-transform:uppercase;color:var(--muted)}
.how-example p:not(.how-example-h){font-size:16px;line-height:24px;color:var(--ink)}
.table-card{margin-top:24px;padding:32px;background:var(--surface);border:1px solid var(--line);border-radius:16px}
.table-card h3{font-size:24px;line-height:32px;color:var(--ink);margin-bottom:16px}
.table-card table{width:100%;border-collapse:collapse;font-size:16px;line-height:24px}
.table-card th{text-align:left;font-size:14px;line-height:24px;font-weight:600;letter-spacing:1px;text-transform:uppercase;color:var(--muted);padding:8px 16px 8px 0;border-bottom:2px solid var(--line)}
.table-card td{padding:16px 16px 16px 0;border-bottom:1px solid var(--line);vertical-align:top;color:var(--ink)}
.table-card td:first-child{font-weight:600}
.table-card td:last-child{color:var(--muted)}
.table-card tr:last-child td{border-bottom:0}
.table-card .note{margin-top:16px;color:var(--muted)}
@media (max-width:760px){
  .how-cards{grid-template-columns:1fr}
  .how-card,.table-card{padding:24px 16px}
  .table-card thead{position:absolute;left:-10000px}
  .table-card tr{display:grid;gap:4px;padding:16px 0;border-bottom:1px solid var(--line)}
  .table-card td{padding:0;border:0}
}
/* calculator buttons: method link far left, Back beside Continue */
#calc-widget .est-nav .est-howlink{margin-right:auto;margin-left:0}
#calc-widget .est-nav .est-howlink + .btn,#calc-widget .est-nav .est-back + .btn{margin-left:0}
#calc-widget .est-nav .est-howlink + .est-back{margin-left:0}
.how-card .col-kicker{font-size:14px;line-height:24px;font-weight:600;letter-spacing:1px;text-transform:uppercase;color:var(--muted)}
/* popular search tags: exactly 6px top/bottom, 4px left/right, text centred; invisible hit area keeps 44px */
.faq-nav .faq-suggest{gap:8px}
.faq-nav .faq-suggest button{display:inline-flex;align-items:center;justify-content:center;min-height:0;padding:6px 4px;font-size:14px;line-height:16px;border-radius:8px;vertical-align:top}
.faq-nav .faq-suggest button::after{inset:-7px -4px}
.wwa-photo{object-position:50% 50%}
.wrap.prose > .sec-head{max-width:none;margin-bottom:16px}
.sec-head > h2{margin:0}
/* ---------- calculator results: same patterns as the rest of the site ---------- */
.est-results{gap:0}
.res-head{display:flex;align-items:center;justify-content:space-between;gap:16px}
.res-head .est-restart{margin:0;font-size:16px}
.res-answers{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:16px}
.res-answers-h{font-size:14px;line-height:24px;font-weight:600;letter-spacing:1px;text-transform:uppercase;color:var(--muted);margin-right:8px}
#e-summary{display:contents}
.res-chip{position:relative;display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border:1px solid var(--line);border-radius:999px;background:var(--surface);color:var(--teal-deep);font:500 14px/16px var(--sans);cursor:pointer}
.res-chip svg{color:var(--muted)}
@media (hover:hover) and (min-width:961px){.res-chip:hover{border-color:var(--edge);background:var(--soft)}}
.res-chip::after{content:"";position:absolute;inset:-7px 0}
.res-options{margin-top:24px;gap:16px}
.res-options .option{padding:24px;gap:8px;border-radius:16px}
.res-options .option h4{font:700 20px/32px var(--display);color:var(--ink)}
.res-options .col-kicker{font-size:14px;line-height:24px;font-weight:600}
.res-big{font:500 20px/40px var(--display);color:var(--muted);max-width:none}
.res-big b{font-size:32px;font-weight:700;color:var(--teal-deep)}
.res-options .ticks{gap:8px;margin:8px 0 16px}
.res-options .ticks li{font-size:14px;line-height:24px;gap:8px;color:var(--ink)}
.res-options .ticks li::before{width:24px;height:24px;background-size:24px}
.res-options .btn-quiet{width:100%;margin-top:auto}
.res-nav{margin-top:24px}
.res-nav .btn{margin-left:auto;min-width:200px}
.res-note{max-width:56ch;font-size:14px;line-height:24px;color:var(--muted)}
section.band .est .res-note{color:var(--muted)}
.res-note a{color:var(--muted);text-decoration:underline;text-underline-offset:4px;white-space:nowrap}
section.band .est .res-note a{color:var(--muted)}
@media (hover:hover) and (min-width:961px){.res-note a:hover{color:var(--ink)}}
section.band .est .res-nav .btn{background:var(--solid);border-color:var(--solid);color:var(--on-solid)}
@media (hover:hover) and (min-width:961px){section.band .est .res-nav .btn:hover{background:var(--solid-hover);border-color:var(--solid-hover)}}
section.band .est .res-chip{color:var(--teal-deep)}
@media (min-width:761px){.res-options{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:760px){
  .res-nav{flex-direction:column;align-items:stretch}
  .res-nav .btn{margin:0;width:100%}
  .res-answers-h{width:100%}
}
.res-head .est-q{margin:0}
.res-head .est-restart{min-height:48px;padding:0 8px}
.res-options .btn-quiet{text-align:center;line-height:24px;padding:8px 16px;height:auto;min-height:48px}
.res-big > span:only-child{font-size:24px;line-height:40px;font-weight:700;color:var(--ink)}
.calc-page-band{padding:64px 0}
.calc-page-band .est{margin-top:0}
/* ---------- secondary = outline only: transparent fill, teal border and text (option cards, results, header Calculator on light) ---------- */
.btn-quiet,.head-calc,section.band .est a.btn-quiet{background:transparent;color:var(--teal-deep);border:2px solid var(--teal-deep)}
@media (hover:hover) and (min-width:961px){.btn-quiet:hover,.head-calc:hover,section.band .est a.btn-quiet:hover{background:var(--soft);color:var(--soft-ink)}}
@media (hover:hover) and (min-width:961px){:root[data-theme="dark"] :is(.btn-quiet,.head-calc):hover,:root[data-theme="dark"] section.band .est a.btn-quiet:hover{background:var(--mist);color:var(--teal-deep)}}
/* on teal or photo grounds the header Calculator keeps its white outline */
.site-head.solid .head-calc,body:has(.hero-full) .site-head:not(.solid):not(:has(.navtoggle:checked)) .head-calc{background:transparent;color:#fff;border-color:rgba(255,255,255,.7)}
@media (hover:hover) and (min-width:961px){.site-head.solid .head-calc:hover,body:has(.hero-full) .site-head:not(.solid):not(:has(.navtoggle:checked)) .head-calc:hover{background:rgba(255,255,255,.12);color:#fff}}

/* ---------- enquiry pop-up: same patterns as the calculator ---------- */
/* selected card: soft green fill and teal border with a tick, like the calculator tiles */
.picks input:checked + .pick{border-color:var(--teal-deep);box-shadow:inset 0 0 0 1px var(--teal-deep);background:var(--soft);position:relative}
.picks input:checked + .pick::after{content:"";position:absolute;top:12px;right:12px;width:24px;height:24px;border-radius:50%;background:var(--teal-deep) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 12.5l3 3 7-7' fill='none' stroke='%23fff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/24px no-repeat}
:root[data-theme="dark"] .picks input:checked + .pick{background:var(--mist)}
@media (hover:hover) and (min-width:961px){.pick:hover{border-color:var(--teal-deep)}}
/* keyboard focus: the same slim 2px teal ring */
.picks input:focus-visible + .pick,.chips input:focus-visible + label{outline:2px solid var(--teal-deep);outline-offset:2px}
/* titles that receive focus when a screen changes get no box */
h1[tabindex]:focus,h2[tabindex]:focus,h3[tabindex]:focus,.wq:focus,.sq:focus{outline:none}
/* Back: the same underlined tertiary as the calculator */
.back-link{background:none;border:0;min-height:48px;padding:0 8px;font:600 16px/24px var(--sans);color:var(--teal-deep);text-decoration:underline;text-underline-offset:4px;cursor:pointer}
@media (hover:hover) and (min-width:961px){.back-link:hover{color:var(--ink)}}
/* option pages: small supporting notes under the steps */
.info2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px;margin-top:8px}
.info2 > div{padding-top:24px;border-top:1px solid var(--line)}
.info2 h3{font-size:20px;line-height:32px;color:var(--ink)}
.info2 p{margin-top:8px;font-size:16px;line-height:24px;color:var(--muted)}
.after-steps .cta-inline{margin-top:32px}
@media (max-width:760px){.info2{grid-template-columns:1fr;gap:24px}}
.after-steps > .info2{max-width:none}
/* calculator tiles with an icon: icon beside the label, same tile height */
.tile:has(.tile-ic){display:flex;align-items:center;justify-content:center;gap:16px}
.tile-ic{flex:none;width:32px;height:32px;color:var(--teal-deep)}
.tile:has(.tile-ic) span{text-align:left}
@media (max-width:560px){.tile:has(.tile-ic){flex-direction:column;gap:8px}.tile:has(.tile-ic) span{text-align:center}}
.tile .tile-ic{box-sizing:content-box;width:32px!important;height:32px!important;padding:8px;border-radius:50%;background:var(--soft);color:var(--teal-deep)}
.tile[aria-pressed="true"] .tile-ic{background:var(--surface)}
:root[data-theme="dark"] .tile .tile-ic{background:var(--mist)}
.tile:has(.tile-ic){min-height:80px;padding:8px 16px}
/* tile icons: no circle, just the line icon */
.tile .tile-ic,.tile[aria-pressed="true"] .tile-ic,:root[data-theme="dark"] .tile .tile-ic{background:none;padding:0;width:32px!important;height:32px!important}
.tile:has(.tile-ic){min-height:72px;gap:12px}
/* calculator: two lines of context under each question */
.est-ctx{max-width:60ch;margin:8px 0 24px;font-size:16px;line-height:24px;color:var(--muted)}
/* ---------- enquiry pop-up: same patterns as the calculator ---------- */
/* opens near the top of the screen, content starts under the header */
.modal{align-items:flex-start;padding:48px 16px 16px;overflow-y:auto}
@media (max-width:560px){.modal{padding:8px}}
.modal .sq{margin-top:8px}
.modal .shint{max-width:60ch;margin:8px 0 24px;font-size:16px;line-height:24px;color:var(--muted)}
/* required answers: an asterisk after the label (hidden from screen readers, which already announce "required") */
.scr .field:has(:required) > label::after,.scr .q:has(> :required) > label::after,.scr .consent:has(:required) > label::after{content:" *" / "";color:var(--teal-deep);font-weight:700}
/* button row: Back beside Continue, on the right */
.snav{display:flex;align-items:center;justify-content:flex-end;gap:16px;margin-top:24px;padding-top:24px;border-top:1px solid var(--line)}
.snav .btn{min-width:200px}
/* Continue / Send look disabled until the required answers are filled */
.snav .btn[aria-disabled="true"]{background:var(--line);border-color:var(--line);color:var(--muted);cursor:not-allowed;box-shadow:none}
@media (hover:hover) and (min-width:961px){.snav .btn[aria-disabled="true"]:hover{background:var(--line);color:var(--muted)}}
@media (max-width:560px){.snav{flex-direction:column-reverse;align-items:stretch}.snav .btn{width:100%}.snav .back-link{align-self:center}}

/* pop-up screens sit at the top: no section padding inside the form */
.modal .scr,.modal section.scr{padding:0}
.snav{justify-content:flex-end}
.snav .btn{margin-left:0}
.snav .back-link{margin:0}
/* who and when: friendly cards with icons, soft gold circles as the accent */
.scr[data-scr="who"] .q{margin-bottom:32px}
.scr[data-scr="who"] .q > .lbl{display:block;margin-bottom:8px;font-weight:600}
.scr[data-scr="who"] .chips{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.scr[data-scr="who"] .q:has(#bt-m) .chips{grid-template-columns:repeat(4,minmax(0,1fr))}
.scr[data-scr="who"] .chips label{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;min-height:112px;padding:16px;border:2px solid var(--field);border-radius:16px;background:var(--surface);color:var(--teal-deep);font:600 16px/24px var(--sans);text-align:center}
.scr[data-scr="who"] .chips label::before{content:"";width:48px;height:48px;border-radius:50%;background-color:var(--accent-tint);background-position:center;background-repeat:no-repeat;background-size:24px}
@media (hover:hover) and (min-width:961px){.scr[data-scr="who"] .chips label:hover{border-color:var(--teal-deep)}}
.scr[data-scr="who"] .chips input:checked + label{background:var(--soft);border-color:var(--teal-deep);box-shadow:inset 0 0 0 1px var(--teal-deep);color:var(--teal-deep)}
.scr[data-scr="who"] .chips input:checked + label::after{content:"";position:absolute;top:8px;right:8px;width:24px;height:24px;border-radius:50%;background:var(--teal-deep) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 12.5l3 3 7-7' fill='none' stroke='%23fff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/24px no-repeat}
.scr[data-scr="who"] .chips input:checked + label::before{background-color:var(--accent)}
:root[data-theme="dark"] .scr[data-scr="who"] .chips input:checked + label{background:var(--mist)}
@media (max-width:560px){.scr[data-scr="who"] .q:has(#bt-m) .chips{grid-template-columns:repeat(2,minmax(0,1fr))}.scr[data-scr="who"] .chips label{min-height:96px}}

.scr[data-scr="who"] label[for="enq-me"]::before{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23134A57%27%20stroke-width%3D%271.75%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%228%22%20r%3D%224%22/%3E%3Cpath%20d%3D%22M5%2021v-1a6%206%200%200%201%206-6h2a6%206%200%200%201%206%206v1%22/%3E%3C/svg%3E")}
.scr[data-scr="who"] label[for="enq-rep"]::before{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23134A57%27%20stroke-width%3D%271.75%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Ccircle%20cx%3D%228%22%20cy%3D%228%22%20r%3D%223.5%22/%3E%3Cpath%20d%3D%22M2%2021v-1a5%205%200%200%201%205-5h2a5%205%200%200%201%205%205v1%22/%3E%3Ccircle%20cx%3D%2217%22%20cy%3D%227%22%20r%3D%223%22/%3E%3Cpath%20d%3D%22M16%2013h1.5a4.5%204.5%200%200%201%204.5%204.5V19%22/%3E%3C/svg%3E")}
.scr[data-scr="who"] label[for="bt-m"]::before{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23134A57%27%20stroke-width%3D%271.75%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%22M12%204v3M5.6%209.6l1.4%201.4M18.4%209.6L17%2011M3%2018h18M7.5%2018a4.5%204.5%200%200%201%209%200M9%2021h6%22/%3E%3C/svg%3E")}
.scr[data-scr="who"] label[for="bt-a"]::before{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23134A57%27%20stroke-width%3D%271.75%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%224%22/%3E%3Cpath%20d%3D%22M12%202v2M12%2020v2M4.9%204.9l1.4%201.4M17.7%2017.7l1.4%201.4M2%2012h2M20%2012h2M4.9%2019.1l1.4-1.4M17.7%206.3l1.4-1.4%22/%3E%3C/svg%3E")}
.scr[data-scr="who"] label[for="bt-e"]::before{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23134A57%27%20stroke-width%3D%271.75%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%22M20%2014.5A8%208%200%200%201%209.5%204a8%208%200%201%200%2010.5%2010.5z%22/%3E%3C/svg%3E")}
.scr[data-scr="who"] label[for="bt-any"]::before{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23134A57%27%20stroke-width%3D%271.75%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%229%22/%3E%3Cpath%20d%3D%22M12%207v5l3%202%22/%3E%3C/svg%3E")}
.demo-fill{position:static!important;display:block;margin:16px auto 0}
/* results: the suggested option gets a gold pill, a stronger border and the primary button */
.res-options .option{position:relative}
.res-pick{position:absolute;top:-16px;left:24px;display:inline-block;padding:0 12px;border-radius:999px;background:var(--accent);color:var(--accent-ink);font:600 14px/32px var(--sans)}
.res-options .option.is-pick{border:2px solid var(--teal-deep);padding:23px}
.res-options .option .btn{width:100%;margin-top:auto;justify-content:center}
section.band .est .res-options .btn{background:var(--solid);border-color:var(--solid);color:var(--on-solid)}
@media (hover:hover) and (min-width:961px){section.band .est .res-options .btn:hover{background:var(--solid-hover);border-color:var(--solid-hover)}}
.res-nav .btn-quiet{margin-left:auto;min-width:200px}
section.band .est .res-nav .btn-quiet{color:var(--teal-deep);border-color:var(--teal-deep)}
.res-options{margin-top:32px}
@media (max-width:760px){.res-nav .btn-quiet{margin:0;width:100%}}
/* results: Book a call as a tertiary text link */
.res-call{margin-left:auto;display:inline-flex;align-items:center;min-height:48px;padding:0 8px;font:600 16px/24px var(--sans);color:var(--teal-deep);text-decoration:underline;text-underline-offset:4px;white-space:nowrap}
section.band .est .res-call{color:var(--teal-deep)}
@media (hover:hover) and (min-width:961px){.res-call:hover{color:var(--ink)}}
@media (max-width:760px){.res-call{margin:0;align-self:center}}

/* ---------- enquiry form: every choice is a card (same pattern as who and when) ---------- */
.scr .chips{display:grid;grid-template-columns:repeat(auto-fit,minmax(144px,1fr));gap:16px}
.scr .chips label{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;min-height:64px;padding:16px;border:2px solid var(--field);border-radius:16px;background:var(--surface);color:var(--teal-deep);font:600 16px/24px var(--sans);text-align:center}
@media (hover:hover) and (min-width:961px){.scr .chips label:hover{border-color:var(--teal-deep)}}
.scr .chips input:checked + label{background:var(--soft);border-color:var(--teal-deep);box-shadow:inset 0 0 0 1px var(--teal-deep);color:var(--teal-deep)}
.scr .chips input:checked + label::after{content:"";position:absolute;top:8px;right:8px;width:24px;height:24px;border-radius:50%;background:var(--teal-deep) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 12.5l3 3 7-7' fill='none' stroke='%23fff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/24px no-repeat}
.scr .chips label[data-ic]::before,.scr .chips label.has-ic::before{content:""}
.scr .chips label::before{width:48px;height:48px;border-radius:50%;background-color:var(--accent-tint);background-position:center;background-repeat:no-repeat;background-size:24px}
.scr .chips input:checked + label::before{background-color:var(--accent)}
:root[data-theme="dark"] .scr .chips input:checked + label{background:var(--mist)}
.scr .q > .lbl,.scr .q > label{display:block;margin-bottom:8px;font-weight:600}
.scr .q{margin-bottom:32px}
/* dropdowns shown as cards; the select stays in the form, hidden */
.q select.enhanced{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.opt-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:16px}
.opt-card{position:relative;display:flex;align-items:center;justify-content:center;min-height:64px;padding:16px 32px;border:2px solid var(--field);border-radius:16px;background:var(--surface);color:var(--teal-deep);font:600 16px/24px var(--sans);text-align:center;cursor:pointer}
@media (hover:hover) and (min-width:961px){.opt-card:hover{border-color:var(--teal-deep)}}
.opt-card[aria-pressed="true"]{background:var(--soft);border-color:var(--teal-deep);box-shadow:inset 0 0 0 1px var(--teal-deep)}
.opt-card[aria-pressed="true"]::after{content:"";position:absolute;top:8px;right:8px;width:24px;height:24px;border-radius:50%;background:var(--teal-deep) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 12.5l3 3 7-7' fill='none' stroke='%23fff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/24px no-repeat}
:root[data-theme="dark"] .opt-card[aria-pressed="true"]{background:var(--mist)}
@media (max-width:560px){.scr .chips,.opt-cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* step indicator: small text and a thin bar under the pop-up header */
.enq-progress{display:flex;align-items:center;gap:16px;margin:0 0 24px}
.enq-step{flex:none;font-size:14px;line-height:24px;color:var(--muted)}
.enq-step b{color:var(--ink);font-weight:600}
.enq-bar{flex:1;height:4px;border-radius:999px;background:var(--line);overflow:hidden}
.enq-bar i{display:block;height:100%;border-radius:999px;background:var(--teal-deep);transition:width .3s var(--ease)}
@media (prefers-reduced-motion:reduce){.enq-bar i{transition:none}}

.scr .chips label[for="pn-y"]::before{content:"";background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23134A57%27%20stroke-width%3D%271.75%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%22M5%2012.5l4.5%204.5L19%207.5%22/%3E%3C/svg%3E")}
.scr .chips label[for="pn-n"]::before{content:"";background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23134A57%27%20stroke-width%3D%271.75%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%22M7%207l10%2010M17%207L7%2017%22/%3E%3C/svg%3E")}
.scr .chips label[for="pn-u"]::before{content:"";background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23134A57%27%20stroke-width%3D%271.75%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%229%22/%3E%3Cpath%20d%3D%22M9.5%209.5a2.5%202.5%200%201%201%203.5%202.3c-.6.3-1%20.8-1%201.5v.7%22/%3E%3Cpath%20d%3D%22M12%2017h.01%22/%3E%3C/svg%3E")}
.scr .chips label[for="ap-y"]::before{content:"";background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23134A57%27%20stroke-width%3D%271.75%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%22M5%2012.5l4.5%204.5L19%207.5%22/%3E%3C/svg%3E")}
.scr .chips label[for="ap-n"]::before{content:"";background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23134A57%27%20stroke-width%3D%271.75%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%22M7%207l10%2010M17%207L7%2017%22/%3E%3C/svg%3E")}
.scr .chips label[for="own-y"]::before{content:"";background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23134A57%27%20stroke-width%3D%271.75%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%22M5%2012.5l4.5%204.5L19%207.5%22/%3E%3C/svg%3E")}
.scr .chips label[for="own-n"]::before{content:"";background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23134A57%27%20stroke-width%3D%271.75%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%22M7%207l10%2010M17%207L7%2017%22/%3E%3C/svg%3E")}
.scr .chips label[for="own-u"]::before{content:"";background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23134A57%27%20stroke-width%3D%271.75%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%229%22/%3E%3Cpath%20d%3D%22M9.5%209.5a2.5%202.5%200%201%201%203.5%202.3c-.6.3-1%20.8-1%201.5v.7%22/%3E%3Cpath%20d%3D%22M12%2017h.01%22/%3E%3C/svg%3E")}
.scr .chips label[for="mg-no"]::before{content:"";background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23134A57%27%20stroke-width%3D%271.75%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%22M3%2011l9-7%209%207%22/%3E%3Cpath%20d%3D%22M5%2010v10h14V10%22/%3E%3Cpath%20d%3D%22M9%2015l2%202%204-4%22/%3E%3C/svg%3E")}
.scr .chips label[for="mg-yes"]::before{content:"";background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23134A57%27%20stroke-width%3D%271.75%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%22M7%203h7l5%205v13H7z%22/%3E%3Cpath%20d%3D%22M14%203v5h5%22/%3E%3Cpath%20d%3D%22M13%2011v8M15%2012.5c0-.8-.9-1.5-2-1.5s-2%20.7-2%201.5%201%201.2%202%201.5%202%20.7%202%201.5-.9%201.5-2%201.5-2-.7-2-1.5%22/%3E%3C/svg%3E")}
.scr .chips label[for="lp-ac"]::before{content:"";background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23134A57%27%20stroke-width%3D%271.75%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%22M3%2021h18M5%2021V5a2%202%200%200%201%202-2h10a2%202%200%200%201%202%202v16M9%207h2M13%207h2M9%2011h2M13%2011h2M10%2021v-4h4v4%22/%3E%3C/svg%3E")}
.scr .chips label[for="lp-hc"]::before{content:"";background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23134A57%27%20stroke-width%3D%271.75%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%22M3%2011l9-7%209%207%22/%3E%3Cpath%20d%3D%22M5%2010v10h14V10%22/%3E%3Cpath%20d%3D%22M12%2017.5l-2.6-2.5a1.6%201.6%200%200%201%202.6-1.8%201.6%201.6%200%200%201%202.6%201.8z%22/%3E%3C/svg%3E")}
.scr .chips label[for="lp-lc"]::before{content:"";background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23134A57%27%20stroke-width%3D%271.75%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%22M4%207h14a2%202%200%200%201%202%202v9a2%202%200%200%201-2%202H6a2%202%200%200%201-2-2z%22/%3E%3Cpath%20d%3D%22M4%207l11-3v3%22/%3E%3Ccircle%20cx%3D%2216%22%20cy%3D%2213.5%22%20r%3D%221%22/%3E%3C/svg%3E")}
.scr .chips label[for="lp-ot"]::before{content:"";background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23134A57%27%20stroke-width%3D%271.75%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Ccircle%20cx%3D%226%22%20cy%3D%2212%22%20r%3D%221.2%22/%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%221.2%22/%3E%3Ccircle%20cx%3D%2218%22%20cy%3D%2212%22%20r%3D%221.2%22/%3E%3C/svg%3E")}
.scr .chips label[for="ct-h"]::before{content:"";background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23134A57%27%20stroke-width%3D%271.75%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%22M3%2011l9-7%209%207%22/%3E%3Cpath%20d%3D%22M5%2010v10h14V10%22/%3E%3Cpath%20d%3D%22M10%2020v-5h4v5%22/%3E%3C/svg%3E")}
.scr .chips label[for="ct-r"]::before{content:"";background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23134A57%27%20stroke-width%3D%271.75%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%22M3%2021h18M5%2021V5a2%202%200%200%201%202-2h10a2%202%200%200%201%202%202v16M9%207h2M13%207h2M9%2011h2M13%2011h2M10%2021v-4h4v4%22/%3E%3C/svg%3E")}
.scr .chips label[for="ct-c"]::before{content:"";background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23134A57%27%20stroke-width%3D%271.75%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Ccircle%20cx%3D%228%22%20cy%3D%228%22%20r%3D%223.5%22/%3E%3Cpath%20d%3D%22M2%2021v-1a5%205%200%200%201%205-5h2a5%205%200%200%201%205%205v1%22/%3E%3Ccircle%20cx%3D%2217%22%20cy%3D%227%22%20r%3D%223%22/%3E%3Cpath%20d%3D%22M16%2013h1.5a4.5%204.5%200%200%201%204.5%204.5V19%22/%3E%3C/svg%3E")}
.scr .chips label[for="ct-d"]::before{content:"";background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23134A57%27%20stroke-width%3D%271.75%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%22M12%203l7%203v6c0%204.5-3%207.5-7%209-4-1.5-7-4.5-7-9V6z%22/%3E%3Cpath%20d%3D%22M12%208.5l1.2%202.4%202.6.4-1.9%201.8.5%202.6-2.4-1.3-2.4%201.3.5-2.6-1.9-1.8%202.6-.4z%22/%3E%3C/svg%3E")}
.scr .chips label[for="ct-nd"]::before{content:"";background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23134A57%27%20stroke-width%3D%271.75%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%22M12%2020l-7-6.8A4.3%204.3%200%200%201%2012%207a4.3%204.3%200%200%201%207%206.2z%22/%3E%3C/svg%3E")}
.scr .chips label[for="ct-o"]::before{content:"";background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23134A57%27%20stroke-width%3D%271.75%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Ccircle%20cx%3D%226%22%20cy%3D%2212%22%20r%3D%221.2%22/%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%221.2%22/%3E%3Ccircle%20cx%3D%2218%22%20cy%3D%2212%22%20r%3D%221.2%22/%3E%3C/svg%3E")}
.scr .chips label[for="ct-n"]::before{content:"";background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23134A57%27%20stroke-width%3D%271.75%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%229%22/%3E%3Cpath%20d%3D%22M12%207v5l3%202%22/%3E%3C/svg%3E")}
.scr .chips label[for="enq-me"]::before{content:""}
.scr .chips label[for="enq-rep"]::before{content:""}
.scr .chips label[for="bt-m"]::before{content:""}
.scr .chips label[for="bt-a"]::before{content:""}
.scr .chips label[for="bt-e"]::before{content:""}
.scr .chips label[for="bt-any"]::before{content:""}
.snav .est-back{margin:0}
/* enquiry form: one icon style everywhere, the rounded square from the first screen's cards */
.scr .chips label::before,.scr[data-scr="who"] .chips label::before{width:48px;height:48px;border-radius:16px;background-color:var(--mist)}
.scr .chips input:checked + label::before,.scr[data-scr="who"] .chips input:checked + label::before{background-color:var(--surface)}
:root[data-theme="dark"] .scr .chips input:checked + label::before{background-color:var(--ground)}
/* enquiry: property value slider (same look as the calculator's age slider) */
.val-slider{max-width:480px}
.val-out{display:block;font:700 24px/32px var(--display);color:var(--muted)}
.val-slider.is-set .val-out{color:var(--teal-deep)}
.val-slider input[type=range]{display:block;width:100%;height:48px;margin:8px 0 0;border:0;padding:0;background:transparent;box-shadow:none}
.val-slider input[type=range]::-webkit-slider-runnable-track{height:8px;border-radius:999px;background:var(--line)}
.val-slider input[type=range]::-moz-range-track{height:8px;border-radius:999px;background:var(--line)}
.val-slider input[type=range]::-webkit-slider-thumb{width:32px;height:32px;margin-top:-12px;background:var(--teal-deep);border:4px solid #fff;box-shadow:0 0 0 2px var(--teal-deep)}
.val-slider input[type=range]::-moz-range-thumb{width:24px;height:24px;background:var(--teal-deep);border:4px solid #fff;box-shadow:0 0 0 2px var(--teal-deep)}
.val-slider input[type=range]:focus-visible{outline:2px solid var(--teal-deep);outline-offset:2px;border-radius:8px}
.val-scale{display:flex;justify-content:space-between;font-size:14px;line-height:24px;color:var(--muted)}
/* Back: no underline (calculator and enquiry) */
.est-back,#calc-widget .est-back,section.band .est .est-back{text-decoration:none}
@media (hover:hover) and (min-width:961px){.est-back:hover{text-decoration:underline;text-underline-offset:4px}}
/* enquiry: inputs fill the width, like the cards */
.scr .q select,.scr .q input[type=date],.scr .q input[type=text],.val-slider{width:100%;max-width:none}
/* enquiry: who and when icons and grids no longer depend on which screen they sit on */
.scr .chips label[for="enq-me"]::before{content:"";background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23134A57%27%20stroke-width%3D%271.75%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%228%22%20r%3D%224%22/%3E%3Cpath%20d%3D%22M5%2021v-1a6%206%200%200%201%206-6h2a6%206%200%200%201%206%206v1%22/%3E%3C/svg%3E")}
.scr .chips label[for="enq-rep"]::before{content:"";background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23134A57%27%20stroke-width%3D%271.75%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Ccircle%20cx%3D%228%22%20cy%3D%228%22%20r%3D%223.5%22/%3E%3Cpath%20d%3D%22M2%2021v-1a5%205%200%200%201%205-5h2a5%205%200%200%201%205%205v1%22/%3E%3Ccircle%20cx%3D%2217%22%20cy%3D%227%22%20r%3D%223%22/%3E%3Cpath%20d%3D%22M16%2013h1.5a4.5%204.5%200%200%201%204.5%204.5V19%22/%3E%3C/svg%3E")}
.scr .chips label[for="bt-m"]::before{content:"";background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23134A57%27%20stroke-width%3D%271.75%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%22M12%204v3M5.6%209.6l1.4%201.4M18.4%209.6L17%2011M3%2018h18M7.5%2018a4.5%204.5%200%200%201%209%200M9%2021h6%22/%3E%3C/svg%3E")}
.scr .chips label[for="bt-a"]::before{content:"";background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23134A57%27%20stroke-width%3D%271.75%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%224%22/%3E%3Cpath%20d%3D%22M12%202v2M12%2020v2M4.9%204.9l1.4%201.4M17.7%2017.7l1.4%201.4M2%2012h2M20%2012h2M4.9%2019.1l1.4-1.4M17.7%206.3l1.4-1.4%22/%3E%3C/svg%3E")}
.scr .chips label[for="bt-e"]::before{content:"";background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23134A57%27%20stroke-width%3D%271.75%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%22M20%2014.5A8%208%200%200%201%209.5%204a8%208%200%201%200%2010.5%2010.5z%22/%3E%3C/svg%3E")}
.scr .chips label[for="bt-any"]::before{content:"";background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23134A57%27%20stroke-width%3D%271.75%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%229%22/%3E%3Cpath%20d%3D%22M12%207v5l3%202%22/%3E%3C/svg%3E")}
.scr .chips label{min-height:64px}
.scr .q:has(#bt-m) .chips,.scr .q-care .chips{grid-template-columns:repeat(4,minmax(0,1fr))}
.scr .q:has(#enq-me) .chips{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:560px){.scr .q:has(#bt-m) .chips,.scr .q-care .chips{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* applying with a partner: two people for yes, one for no */
.scr .chips label[for="ap-y"]::before{content:"";background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23134A57%27%20stroke-width%3D%271.75%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Ccircle%20cx%3D%228%22%20cy%3D%228%22%20r%3D%223.5%22/%3E%3Cpath%20d%3D%22M2%2021v-1a5%205%200%200%201%205-5h2a5%205%200%200%201%205%205v1%22/%3E%3Ccircle%20cx%3D%2217%22%20cy%3D%227%22%20r%3D%223%22/%3E%3Cpath%20d%3D%22M16%2013h1.5a4.5%204.5%200%200%201%204.5%204.5V19%22/%3E%3C/svg%3E")}
.scr .chips label[for="ap-n"]::before{content:"";background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23134A57%27%20stroke-width%3D%271.75%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%228%22%20r%3D%224%22/%3E%3Cpath%20d%3D%22M5%2021v-1a6%206%200%200%201%206-6h2a6%206%200%200%201%206%206v1%22/%3E%3C/svg%3E")}
/* short answers: icon on the left, label on the right, so the cards take less space */
.scr :is(.q-pension,.q-partner,.q-own,.q-mortgage) .chips label{flex-direction:row;justify-content:flex-start;gap:16px;min-height:64px;padding:8px 16px;text-align:left}
.scr :is(.q-pension,.q-partner,.q-own,.q-mortgage) .chips label::before{flex:none;width:40px;height:40px;border-radius:12px;background-size:24px}
.scr :is(.q-pension,.q-partner,.q-own,.q-mortgage) .chips input:checked + label::after{top:50%;right:16px;transform:translateY(-50%)}
.scr :is(.q-pension,.q-partner,.q-own,.q-mortgage) .chips label{padding-right:48px}
@media (max-width:560px){.scr .q-mortgage .chips{grid-template-columns:1fr}}
/* thank-you card: gold accents */
.thanks .tick-bg{fill:var(--accent-tint)}
.thanks .tick{display:block;margin:0 auto 16px}
.thanks .eyebrow{display:block;width:max-content;margin:0 auto 16px}
.thanks .hl{color:var(--ink);font-weight:600}
.thanks .hl{text-underline-offset:4px;text-decoration-thickness:3px}
.thanks .card > p:first-of-type{line-height:32px}
/* pills on light grounds: soft gold fill, gold outline, dark gold text */
.res-pick{background:var(--accent-tint);border:1px solid #D9A22B;color:#5E4500;line-height:30px}
:root[data-theme="dark"] .res-pick{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
/* enquiry form: field text 16px, field labels 14px */
form.enq :is(input[type=text],input[type=tel],input[type=email],input[type=date],select,textarea){font-size:16px;line-height:24px;min-height:48px;padding:8px 16px}
form.enq textarea{min-height:96px}
form.enq :is(.field > label,.q > label,.q > .lbl){font-size:14px;line-height:24px;font-weight:600}
form.enq :is(.field > label,.q > label,.q > .lbl) .optional{font-size:14px}
/* the button row stays pinned to the bottom of the pop-up while the questions scroll */
.modal .snav{position:sticky;bottom:-32px;z-index:3;margin:24px 0 -32px;padding:16px 0 32px;background:var(--card);border-top:1px solid var(--line)}
.modal .snav[hidden]{display:none}
@media (max-width:560px){.modal .snav{bottom:-24px;margin-bottom:-24px;padding-bottom:24px}}
@media (max-width:560px){.snav{flex-direction:row;align-items:center}.snav .btn{flex:1;width:auto;min-width:0}.snav .est-back{align-self:center}}
/* thank-you: success in green, not gold; the timeframe stands out by weight alone */
.thanks .hl{text-decoration:none}
.thanks .tick-bg{fill:var(--soft)}
.thanks .eyebrow{background:var(--soft);border-color:var(--edge);color:var(--teal-deep)}
:root[data-theme="dark"] .thanks .tick-bg{fill:var(--mist)}
:root[data-theme="dark"] .thanks .eyebrow{background:var(--mist);border-color:var(--edge);color:var(--teal-deep)}
.thanks .card p b{font-weight:600;color:var(--ink)}
.thanks .card > p:first-of-type{line-height:24px}
/* calculator choices: same card as the enquiry form (icon square on the left, label beside it, tick on the right) */
.est .tile{border-radius:16px;font:600 16px/24px var(--sans);min-height:64px;padding:8px 16px}
.est .tile:has(.tile-ic){flex-direction:row;justify-content:flex-start;gap:16px;min-height:64px;padding:8px 48px 8px 16px;text-align:left}
.est .tile .tile-ic,.est .tile[aria-pressed="true"] .tile-ic{box-sizing:border-box;flex:none;width:40px!important;height:40px!important;padding:8px;border-radius:12px;background:var(--mist);color:var(--teal-deep)}
.est .tile[aria-pressed="true"] .tile-ic{background:var(--surface)}
.est .tile[aria-pressed="true"]{background:var(--soft);border-color:var(--teal-deep);box-shadow:inset 0 0 0 1px var(--teal-deep)}
.est .tile:has(.tile-ic)[aria-pressed="true"]::after{top:50%;right:16px;transform:translateY(-50%)}
:root[data-theme="dark"] .est .tile .tile-ic{background:var(--ground)}
@media (max-width:560px){.est .tile:has(.tile-ic){flex-direction:row;gap:12px}.est .tile:has(.tile-ic) span{text-align:left}}
/* calculator step 2: value slider shares the age slider's look; the typed amount fills the width */
.est #e-value-range{display:block;width:100%;height:48px;margin:8px 0 0;border:0;padding:0;background:transparent;box-shadow:none}
.est #e-value-range + .age-scale{margin-bottom:24px}
.est .money-full,.est .money-full input{width:100%;max-width:none}
/* phones: choice cards stack so the labels stay on one line */
@media (max-width:560px){.est .tiles:has(.tile-ic){grid-template-columns:1fr}}
.est .money-full{margin-bottom:24px}
/* Back (calculator, enquiry, thank-you): no underline, ever; a soft green background on hover */
.est-back,#calc-widget .est-back,section.band .est .est-back{text-decoration:none}@media (hover:hover) and (min-width:961px){.est-back:hover,section.band .est .est-back:hover{text-decoration:none}}
.est-back{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 16px;border-radius:8px;font:600 16px/24px var(--sans);color:var(--teal-deep);background:transparent;border:0;cursor:pointer;transition:background-color .2s var(--ease)}
@media (hover:hover) and (min-width:961px){.est-back:hover{background:var(--soft);color:var(--teal-deep)}}
@media (hover:hover) and (min-width:961px){:root[data-theme="dark"] .est-back:hover{background:var(--mist)}}
.thanks .actions .est-back{width:auto;flex:none}
/* calculator: 60% questions, 40% photo */
@media (min-width:961px){
  .est{grid-template-columns:minmax(0,3fr) minmax(0,2fr)}
  .est:has(#e-results:not([hidden])){grid-template-columns:1fr}
}
/* thank-you: buttons size to their text, equal padding left and right, centred together */
.thanks .actions{justify-content:center;align-items:center;gap:16px}
.thanks .actions .btn{flex:none;width:auto;max-width:none;padding:12px 24px}
.thanks .actions .est-back{flex:none;padding:12px 16px}
/* calculator uses the enquiry step indicator */
.est .enq-progress{display:flex;align-items:center;gap:16px;max-width:none;margin:0 0 24px}
/* how it works page: a vertical timeline with big numbers and a connecting line */
.timeline{list-style:none;counter-reset:tl;padding:0;margin:40px 0 0;max-width:880px}
.tl-step{counter-increment:tl;position:relative;display:grid;grid-template-columns:72px minmax(0,1fr);gap:24px;padding-bottom:32px}
.tl-step:last-child{padding-bottom:0}
.tl-step::before{content:counter(tl);grid-column:1;display:grid;place-items:center;width:72px;height:72px;border-radius:50%;background:var(--solid);color:var(--on-solid);font:700 32px/40px var(--display);position:relative;z-index:1}
.tl-step::after{content:"";position:absolute;left:35px;top:72px;bottom:0;width:2px;background:var(--line)}
.tl-step:last-child::after{display:none}
.tl-card{grid-column:2;padding:24px 32px;background:var(--surface);border:1px solid var(--line);border-radius:16px;transition:box-shadow .25s var(--ease)}
@media (hover:hover) and (min-width:961px){.tl-card:hover{box-shadow:var(--lift)}}
.tl-sub{display:inline-block;margin-bottom:8px;padding:0 12px;border-radius:999px;background:var(--accent-tint);border:1px solid #D9A22B;color:#5E4500;font:500 14px/30px var(--sans)}
.tl-card h3{font-size:24px;line-height:32px;color:var(--ink)}
.tl-card > p:not(.tl-sub){margin-top:8px;font-size:16px;line-height:24px;color:var(--muted);max-width:60ch}
.tl-roles{list-style:none;padding:16px 0 0;margin:16px 0 0;border-top:1px solid var(--line);display:grid;grid-template-columns:1fr 1fr;gap:16px}
.tl-roles li{font-size:16px;line-height:24px;color:var(--ink)}
.tl-roles b{display:block;font-size:14px;line-height:24px;font-weight:600;letter-spacing:1px;text-transform:uppercase;color:var(--muted)}
:root[data-theme="dark"] .tl-sub{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
@media (max-width:560px){
  .tl-step{grid-template-columns:48px minmax(0,1fr);gap:16px}
  .tl-step::before{width:48px;height:48px;font-size:20px;line-height:32px}
  .tl-step::after{left:23px;top:48px}
  .tl-card{padding:16px}
  .tl-roles{grid-template-columns:1fr}
}
/* timeline uses the full width: description on the left, who does what on the right */
.timeline{max-width:none}
@media (min-width:861px){
  .tl-card{display:grid;grid-template-columns:minmax(0,1fr) 320px;column-gap:48px;align-items:start}
  .tl-card > :not(.tl-roles){grid-column:1}
  .tl-card .tl-sub{justify-self:start}
  .tl-roles{grid-column:2;grid-row:1/4;grid-template-columns:1fr;margin:0;padding:0 0 0 32px;border-top:0;border-left:1px solid var(--line);align-self:stretch;align-content:center}
}
/* pop-up close: no rotation, the X centred in its circle */
.modal-close{display:grid;place-items:center;padding:0;font-size:0;line-height:0}
.modal-close svg{display:block}
@media (hover:hover) and (min-width:961px){.modal-close:hover{transform:none}}
.nav-menu{margin-top:0}
.nav-drop::after{content:"";position:absolute;left:0;right:0;top:100%;height:8px}
/* timeline numbers: smaller; the number turns gold while its card is hovered */
.tl-step{grid-template-columns:48px minmax(0,1fr)}
.tl-step::before{width:48px;height:48px;font:700 20px/32px var(--display);transition:color .2s var(--ease)}
.tl-step::after{left:23px;top:48px}
@media (hover:hover) and (min-width:961px){.tl-step:hover::before{color:var(--accent)}}
@media (hover:hover) and (min-width:961px){:root[data-theme="dark"] .tl-step:hover::before{color:var(--accent-ink);background:var(--accent)}}
@media (prefers-reduced-motion:reduce){.tl-step::before{transition:none}}

/* phone number: plain text at normal weight everywhere (only the phone action bar keeps a tap-to-call button) */
.phone,p .phone,.callus .phone,.hero .or .phone,.banner-cta .phone,.est-next-cta .phone,.ask-call .phone,.cta .phone{font-weight:400;min-height:0;display:inline;text-decoration:none}
@media (hover:hover) and (min-width:961px){.phone:hover{text-decoration:none}}
.actionbar .ab-call .phone{display:flex;font-weight:600}
/* nav dropdown: one green highlight at a time; hovering another choice clears the current page's */
@media (hover:hover) and (min-width:961px){.site-head nav.main .nav-menu:hover a[aria-current="page"]:not(:hover){background:transparent}}
/* timeline: on card hover the circle turns gold with a dark number */
@media (hover:hover) and (min-width:961px){.tl-step:hover::before{background:var(--accent);color:var(--accent-ink)}}
.tl-step::before{transition:background-color .2s var(--ease),color .2s var(--ease)}
/* timeline cards without the You/Us column */
.tl-card{display:block}
.tl-card > p:not(.tl-sub){max-width:72ch}
/* ---------- footer: compact; brand and short legal note left, link columns right, one slim bottom row ---------- */
footer{padding:48px 0 16px}
footer .f-top{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:48px;align-items:start;margin-bottom:32px}
footer .f-legal{margin-top:16px;max-width:52ch;font-size:14px;line-height:24px;color:var(--on-dark);letter-spacing:0;text-transform:none}
.f-cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.f-cols > div{display:flex;flex-direction:column;align-items:flex-start}
.f-h{margin-bottom:8px;font-size:14px;line-height:24px;font-weight:600;letter-spacing:1px;text-transform:uppercase;color:var(--on-dark)}
.f-cols a{display:inline-flex;align-items:center;min-height:40px;font-size:16px;line-height:24px;font-weight:500;color:#fff;text-decoration:none}
@media (hover:hover) and (min-width:961px){.f-cols a:hover{text-decoration:underline;text-underline-offset:4px}}
footer .fine{padding-top:16px;font-size:14px;line-height:24px}
.f-fine-links{display:flex;flex-wrap:wrap;align-items:center;gap:0 24px}
.f-fine-links a{display:inline-flex;align-items:center;min-height:44px;color:#fff;text-decoration:none;font-size:14px}
@media (hover:hover) and (min-width:961px){.f-fine-links a:hover{text-decoration:underline;text-underline-offset:4px}}
footer .fine .f-fsg{font-size:14px;min-height:44px}
@media (max-width:900px){footer .f-top{grid-template-columns:1fr;gap:32px}}
@media (max-width:560px){.f-cols{grid-template-columns:1fr 1fr}.f-cols > div:last-child{grid-column:1/-1}footer .fine{flex-direction:column;align-items:flex-start;gap:0}}
.f-cols a{min-height:44px}
/* outline buttons on dark grounds (hero, teal header, bands): a 10% white tint on hover */
:is(.hero,section.band,.cta,.enq-intro) .btn-ghost,.site-head.solid .head-calc,body:has(.hero-full) .site-head:not(.solid):not(:has(.navtoggle:checked)) .head-calc{transition:background-color .2s var(--ease),border-color .2s var(--ease)}
@media (hover:hover) and (min-width:961px){:is(.hero,section.band,.cta,.enq-intro) .btn-ghost:hover,.site-head.solid .head-calc:hover,body:has(.hero-full) .site-head:not(.solid):not(:has(.navtoggle:checked)) .head-calc:hover{background:rgba(255,255,255,.1);border-color:#fff;color:#fff}}
/* ---------- gold gradient trial: full-strength gold becomes a light-to-deep gradient (ink stays 7.3:1 or more across it) ---------- */
:root{--gold-grad:linear-gradient(120deg,#FADD8A 0%,#F5C451 50%,#EDB53A 100%)}
/* pills on dark grounds */
:is(.hero,section.band,#estimate,.enq-intro,.enquire-band,.cta,.calc-result,footer) .eyebrow,:root[data-theme="dark"] :is(.eyebrow,.situation-tag,.res-pick,.tl-sub){background:var(--gold-grad);border-color:transparent}
/* timeline number on card hover */
@media (hover:hover) and (min-width:961px){.tl-step:hover::before{background:var(--gold-grad)}}
/* highlight underlines: a gradient bar instead of a flat line */
.hl,.hero .hl,.hero h1 .hl{text-decoration:none;background:var(--gold-grad) no-repeat 0 100%/100% 4px;padding-bottom:6px;-webkit-box-decoration-break:clone;box-decoration-break:clone}
/* on light grounds the highlight uses a deeper gold gradient so it stays visible (decorative; the text itself keeps 7:1) */
.hl{background-image:linear-gradient(120deg,#E8B13A 0%,#C9961F 100%)}
:is(.hero,section.band,.cta,.enq-intro,.enquire-band) .hl,.hero h1 .hl,:root[data-theme="dark"] .hl{background-image:var(--gold-grad)}

/* highlight: a hand-drawn gold brush stroke under the phrase (deeper gold on light grounds, bright gold on dark) */
.hl,.hero .hl,.hero h1 .hl{text-decoration:none;background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%20200%2016%27%20preserveAspectRatio%3D%27none%27%3E%3Cdefs%3E%3ClinearGradient%20id%3D%27g%27%20x1%3D%270%27%20x2%3D%271%27%20y1%3D%270%27%20y2%3D%270%27%3E%3Cstop%20offset%3D%270%27%20stop-color%3D%27%23E8B13A%27/%3E%3Cstop%20offset%3D%271%27%20stop-color%3D%27%23C9961F%27/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath%20d%3D%27M3%2011%20C%2040%205%2C%2090%204%2C%20130%207%20S%20185%2012%2C%20197%206%27%20fill%3D%27none%27%20stroke%3D%27url%28%23g%29%27%20stroke-width%3D%274%27%20stroke-linecap%3D%27round%27%20vector-effect%3D%27non-scaling-stroke%27/%3E%3Cpath%20d%3D%27M14%2013.5%20C%2060%209%2C%20120%209%2C%20170%2011%27%20fill%3D%27none%27%20stroke%3D%27url%28%23g%29%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20opacity%3D%27.7%27%20vector-effect%3D%27non-scaling-stroke%27/%3E%3C/svg%3E") no-repeat 0 100%/100% 14px;padding-bottom:12px;-webkit-box-decoration-break:clone;box-decoration-break:clone}
:is(.hero,section.band,.cta,.enq-intro,.enquire-band) .hl,.hero h1 .hl,:root[data-theme="dark"] .hl{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%20200%2016%27%20preserveAspectRatio%3D%27none%27%3E%3Cdefs%3E%3ClinearGradient%20id%3D%27g%27%20x1%3D%270%27%20x2%3D%271%27%20y1%3D%270%27%20y2%3D%270%27%3E%3Cstop%20offset%3D%270%27%20stop-color%3D%27%23FADD8A%27/%3E%3Cstop%20offset%3D%271%27%20stop-color%3D%27%23EDB53A%27/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath%20d%3D%27M3%2011%20C%2040%205%2C%2090%204%2C%20130%207%20S%20185%2012%2C%20197%206%27%20fill%3D%27none%27%20stroke%3D%27url%28%23g%29%27%20stroke-width%3D%274%27%20stroke-linecap%3D%27round%27%20vector-effect%3D%27non-scaling-stroke%27/%3E%3Cpath%20d%3D%27M14%2013.5%20C%2060%209%2C%20120%209%2C%20170%2011%27%20fill%3D%27none%27%20stroke%3D%27url%28%23g%29%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20opacity%3D%27.7%27%20vector-effect%3D%27non-scaling-stroke%27/%3E%3C/svg%3E")}

/* menu: the same brush stroke draws in under the hovered item and stays under the current page */
nav.main > a,.nav-drop-btn{border-bottom-color:transparent!important;background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%20200%2016%27%20preserveAspectRatio%3D%27none%27%3E%3Cdefs%3E%3ClinearGradient%20id%3D%27g%27%20x1%3D%270%27%20x2%3D%271%27%20y1%3D%270%27%20y2%3D%270%27%3E%3Cstop%20offset%3D%270%27%20stop-color%3D%27%23E8B13A%27/%3E%3Cstop%20offset%3D%271%27%20stop-color%3D%27%23C9961F%27/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath%20d%3D%27M3%2011%20C%2040%205%2C%2090%204%2C%20130%207%20S%20185%2012%2C%20197%206%27%20fill%3D%27none%27%20stroke%3D%27url%28%23g%29%27%20stroke-width%3D%273%27%20stroke-linecap%3D%27round%27%20vector-effect%3D%27non-scaling-stroke%27/%3E%3C/svg%3E") no-repeat 0 calc(100% - 2px)/0% 10px;transition:background-size .25s var(--ease)}
nav.main > a[aria-current="page"],.nav-drop:has([aria-current]) .nav-drop-btn,.nav-drop-btn[aria-expanded="true"]{background-size:100% 10px}@media (hover:hover) and (min-width:961px){nav.main > a:hover,.nav-drop-btn:hover{background-size:100% 10px}}
.site-head.solid :is(nav.main > a,.nav-drop-btn),body:has(.hero-full) .site-head:not(.solid):not(:has(.navtoggle:checked)) :is(nav.main > a,.nav-drop-btn),:root[data-theme="dark"] :is(nav.main > a,.nav-drop-btn){background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%20200%2016%27%20preserveAspectRatio%3D%27none%27%3E%3Cdefs%3E%3ClinearGradient%20id%3D%27g%27%20x1%3D%270%27%20x2%3D%271%27%20y1%3D%270%27%20y2%3D%270%27%3E%3Cstop%20offset%3D%270%27%20stop-color%3D%27%23FADD8A%27/%3E%3Cstop%20offset%3D%271%27%20stop-color%3D%27%23EDB53A%27/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath%20d%3D%27M3%2011%20C%2040%205%2C%2090%204%2C%20130%207%20S%20185%2012%2C%20197%206%27%20fill%3D%27none%27%20stroke%3D%27url%28%23g%29%27%20stroke-width%3D%273%27%20stroke-linecap%3D%27round%27%20vector-effect%3D%27non-scaling-stroke%27/%3E%3C/svg%3E")}
@media (prefers-reduced-motion:reduce){nav.main > a,.nav-drop-btn{transition:none}}
@media (max-width:960px){nav.main > a,.nav-drop-btn{background-position:0 calc(100% - 4px)}}
:root{--gold-grad:linear-gradient(45deg,#FADD8A 0%,#F5C451 50%,#EDB53A 100%)}

/* menu stroke: whole stroke fades in at once (no left-to-right draw) */
nav.main > a,.nav-drop-btn{position:relative;background:none!important;transition:none}
nav.main > a::after,.nav-drop-btn::after{content:"";position:absolute;left:0;right:0;bottom:2px;height:10px;background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%20200%2016%27%20preserveAspectRatio%3D%27none%27%3E%3Cdefs%3E%3ClinearGradient%20id%3D%27g%27%20x1%3D%270%27%20x2%3D%271%27%20y1%3D%270%27%20y2%3D%270%27%3E%3Cstop%20offset%3D%270%27%20stop-color%3D%27%23E8B13A%27/%3E%3Cstop%20offset%3D%271%27%20stop-color%3D%27%23C9961F%27/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath%20d%3D%27M3%2011%20C%2040%205%2C%2090%204%2C%20130%207%20S%20185%2012%2C%20197%206%27%20fill%3D%27none%27%20stroke%3D%27url%28%23g%29%27%20stroke-width%3D%273%27%20stroke-linecap%3D%27round%27%20vector-effect%3D%27non-scaling-stroke%27/%3E%3C/svg%3E") no-repeat 0 0/100% 100%;opacity:0;transition:opacity .2s var(--ease);pointer-events:none}
nav.main > a[aria-current="page"]::after,.nav-drop:has([aria-current]) .nav-drop-btn::after,.nav-drop-btn[aria-expanded="true"]::after{opacity:1}@media (hover:hover) and (min-width:961px){nav.main > a:hover::after,.nav-drop-btn:hover::after{opacity:1}}
.site-head.solid :is(nav.main > a,.nav-drop-btn)::after,body:has(.hero-full) .site-head:not(.solid):not(:has(.navtoggle:checked)) :is(nav.main > a,.nav-drop-btn)::after,:root[data-theme="dark"] :is(nav.main > a,.nav-drop-btn)::after{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%20200%2016%27%20preserveAspectRatio%3D%27none%27%3E%3Cdefs%3E%3ClinearGradient%20id%3D%27g%27%20x1%3D%270%27%20x2%3D%271%27%20y1%3D%270%27%20y2%3D%270%27%3E%3Cstop%20offset%3D%270%27%20stop-color%3D%27%23FADD8A%27/%3E%3Cstop%20offset%3D%271%27%20stop-color%3D%27%23EDB53A%27/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath%20d%3D%27M3%2011%20C%2040%205%2C%2090%204%2C%20130%207%20S%20185%2012%2C%20197%206%27%20fill%3D%27none%27%20stroke%3D%27url%28%23g%29%27%20stroke-width%3D%273%27%20stroke-linecap%3D%27round%27%20vector-effect%3D%27non-scaling-stroke%27/%3E%3C/svg%3E")}
@media (prefers-reduced-motion:reduce){nav.main > a::after,.nav-drop-btn::after{transition:none}}
@media (max-width:960px){nav.main > a::after,.nav-drop-btn::after{bottom:4px;right:auto;width:160px}}

/* ---------- touch screens: no hover, so every hover effect has a tap (pressed) equivalent ---------- */
@media (hover:none){
  html{-webkit-tap-highlight-color:transparent}
  /* hover effects would stick after a tap: switch them off and show them while pressed instead */
  :is(.card,.est-card,.option,.promise,.situation,.tl-card,.tile,.theme-fab):hover{box-shadow:none}
  /* buttons */
  .btn:active{background:var(--solid-hover);border-color:var(--solid-hover);color:var(--on-solid)}
  :is(.hero,section.band,.cta,.enq-intro,.est-next,.site-head.solid) .btn:active{background:var(--accent-tint);border-color:var(--accent-tint);color:#134A57}
  :is(.btn-quiet,.head-calc):active{background:var(--soft);color:var(--soft-ink)}
  :is(.hero,section.band,.cta,.enq-intro) .btn-ghost:active,.site-head.solid .head-calc:active,.actionbar .ab-call .phone:active{background:rgba(255,255,255,.1)}
  .actionbar .ab-call .phone:active{background:var(--soft)}
  :is(.est-back,.btn-tertiary,.back-link):active{background:var(--soft);color:var(--teal-deep)}
  .modal-close:active{background:var(--solid);color:var(--on-solid)}
  .theme-fab:active{border-color:var(--edge);color:var(--teal-deep)}
  /* choices */
  :is(.tile,.opt-card,.pick,.start-pick,.scr .chips label):active{border-color:var(--teal-deep);background:var(--soft)}
  :is(.res-chip,.faq-suggest button):active{border-color:var(--edge);background:var(--soft)}
  /* links */
  :is(.sec-link,.res-call,.res-note a,.est-howlink,.f-cols a,.f-fine-links a,.faq-nav a):active{color:var(--ink);text-decoration:underline;text-underline-offset:4px}
  footer :is(.f-cols a,.f-fine-links a):active{color:#fff}
  nav.main > a:active::after,.nav-drop-btn:active::after{opacity:1}
  .site-head nav.main .nav-menu a:active{background:var(--soft)}
  .faq details summary:active{color:var(--teal-deep)}
}
.compare-note{text-align:center;margin-left:auto;margin-right:auto;max-width:none}
.compare-note{margin-top:24px}
/* enquiry banners: button on the right, the phone line small underneath it */
.banner-in{flex-wrap:nowrap}
.banner-cta{flex-direction:column;align-items:center;gap:4px;margin-left:auto;flex:none}
.banner-cta span,.banner-cta .phone{font-size:12px;line-height:16px}
@media (max-width:760px){.banner-in{flex-wrap:wrap}.banner-cta{width:100%;align-items:stretch;text-align:center;margin-left:0}}
/* hero: taller on taller screens, but always leaves the figures in view on arrival */
@media (min-width:761px){.hero{height:clamp(560px,calc(100svh - 128px),760px)}}
/* hero: leave room for the whole figures strip and the top of the calculator section on arrival */
@media (min-width:761px){.hero{height:clamp(560px,calc(100svh - 280px),720px)}}
.facts{padding-top:32px;padding-bottom:32px}
/* ---------- header: one row on desktop. Logo left, menu in the middle, buttons right ---------- */
@media (min-width:961px){
  .bar{flex-wrap:nowrap;padding:12px 0;gap:24px}
  .bar .wordmark{order:1;flex:none}
  .bar nav.main{order:2;flex:1;width:auto;justify-content:center;flex-wrap:nowrap;gap:0 24px;padding:0;border:0}
  .bar .right{order:3;flex:none}
  .site-head.solid .bar,.site-head.solid nav.main{padding-top:8px;padding-bottom:8px}
  .site-head.solid nav.main{padding:0}
  nav.main > a,.nav-drop-btn{white-space:nowrap}
}
/* mid-size screens: tighter menu, and Calculator moves into the menu so everything stays on one row */
@media (min-width:961px) and (max-width:1199px){
  .bar nav.main{gap:0 16px}
  .bar .right .head-calc{display:none}
  nav.main .nav-calc{display:inline-flex!important}
}
@media (min-width:761px){.hero{padding-top:96px}}
/* header buttons: an icon in front of the label */
.bar .right :is(.btn,.head-calc){gap:8px}
.b-ic{display:inline-flex;flex:none}
.b-ic svg{width:20px;height:20px}
/* section label pills: semi-bold, no outline, background kept */
.eyebrow,.hero .eyebrow,.enq-intro .eyebrow,#estimate .eyebrow,.calc-result .eyebrow,.thanks .eyebrow{font-weight:600;border:0;line-height:32px}
/* thank-you: both buttons the same height */
.thanks .actions .btn,.thanks .actions .est-back{min-height:48px;height:48px;padding-top:0;padding-bottom:0;box-sizing:border-box;display:inline-flex;align-items:center}
/* header: 16px above and below its content, in every state and size */
.site-head .bar,.site-head.solid .bar{padding-top:16px;padding-bottom:16px}
@media (min-width:961px){.site-head .bar nav.main,.site-head.solid .bar nav.main{padding-top:0;padding-bottom:0}}
.site-head .bar{min-height:70px;box-sizing:border-box}
/* type: two families only. Plus Jakarta Sans for headings and the wordmark, Inter for everything else, form controls included */
:root{--logotype:var(--display)}
button,input,select,textarea,optgroup{font-family:inherit}
.wordmark .c{letter-spacing:-.5px;font-weight:800}
.wordmark .a{font-weight:500;font-size:16px}
/* hero: shorter, so the figures strip and the calculator's heading are both in view on arrival */
@media (min-width:761px){.hero{height:clamp(520px,calc(100svh - 400px),640px);padding-top:88px}}
@media (min-width:761px){.hero{height:clamp(500px,calc(100svh - 400px),640px)} #estimate{padding-top:80px}}
@media (min-width:761px){.hero{padding-top:104px;padding-bottom:24px} .hero .lede{margin-bottom:40px} .hero .assure{margin-top:24px}}
/* hero: tall again, cut only so the calculator pill shows below the figures on arrival */
@media (min-width:761px){.hero{height:clamp(520px,calc(100svh - 340px),680px);padding-top:96px;padding-bottom:40px} .hero .assure{margin-top:32px}}
/* hero: tall enough that the calculator pill shows by half below the figures on arrival */
@media (min-width:761px){.hero{height:clamp(520px,calc(100svh - 304px),760px)}}

/* 6 Oct 2026: the home-page strip carries four plain benefits instead of figures */
.facts.benefits b{font-family:var(--display);font-size:24px;line-height:32px;letter-spacing:0}
.facts.benefits span{display:block;margin-top:4px}
/* 7 Oct 2026: an icon above each benefit, and more room between them */
.facts.benefits .facts-row{gap:56px}
.facts.benefits .b-ic{font-style:normal;width:48px;height:48px;border-radius:12px;background:var(--mist);color:var(--teal-deep);display:grid;place-items:center;margin-bottom:8px}
.facts.benefits .b-ic svg{width:24px;height:24px}
@media (max-width:900px){.facts.benefits .facts-row{gap:40px 32px}}
@media (max-width:600px){.facts.benefits .facts-row{grid-template-columns:1fr;gap:32px}}
/* 7 Oct 2026: "What we offer" opens on hover instead of showing the underline (the underline stays when you are on one of its pages) */
@media (hover:hover) and (min-width:961px){.nav-drop:not(:has([aria-current])) .nav-drop-btn:is(:hover,[aria-expanded="true"])::after{opacity:0}}
/* benefits: icons, titles and text line up across each row whatever the copy length */
.facts.benefits .facts-row > div{display:grid;grid-template-rows:subgrid;grid-row:span 3;row-gap:8px;align-content:start}
.facts.benefits .b-ic{margin-bottom:0}
.facts.benefits span{margin-top:0}
@media (max-width:1180px){.facts.benefits .facts-row{grid-template-columns:repeat(2,minmax(0,1fr));gap:48px 40px}}
@media (max-width:600px){.facts.benefits .facts-row{grid-template-columns:1fr;gap:32px}}
/* 7 Oct 2026: a more compact benefits strip, so the calculator pill peeks above the fold again */
.facts.benefits{padding-top:32px;padding-bottom:32px}
.facts.benefits + #estimate{padding-top:56px}
@media (min-width:761px){.hero{height:clamp(440px,calc(100svh - 400px),760px)}}
.facts.benefits{margin-top:0}
/* 7 Oct 2026: the sticky bar carries the hero's two actions, on every screen where the menu collapses */
@media (max-width:960px){
  .actionbar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:70;gap:8px;justify-content:center;padding:8px 16px calc(8px + env(safe-area-inset-bottom));background:var(--surface);border-top:1px solid var(--line);box-shadow:0 -8px 32px -16px rgba(19,74,87,.5)}
  .actionbar > a{flex:1 1 0;max-width:320px;min-height:48px;display:inline-flex;align-items:center;justify-content:center;padding:0 8px;white-space:nowrap}
  .actionbar[data-path="/calculator/"] .ab-calc{display:none}
  .site-head .right a[data-enquire]{display:none}
  body{padding-bottom:80px}
  .theme-fab{right:16px;bottom:88px}
}
/* 7 Oct 2026: small screens get a burger button and a full-page menu that slides in from the left */
.nav-top,.nav-cta{display:none}
@media (max-width:960px){
  .navbtn{width:48px;height:48px;padding:0;justify-content:center;background:transparent}
  .navbtn svg,.nav-close svg{width:24px;height:24px}
  .site-head:has(.navtoggle:checked){z-index:90}
  body:has(.navtoggle:checked){overflow:hidden}
  #main-nav{display:flex;position:fixed;inset:0;z-index:1;flex-direction:column;align-items:stretch;flex-wrap:nowrap;gap:8px;margin:0;padding:8px 24px calc(24px + env(safe-area-inset-bottom));border:0;background:var(--surface);overflow-y:auto;transform:translateX(-100%);visibility:hidden;transition:transform .3s var(--ease),visibility 0s linear .3s}
  .navtoggle:checked ~ #main-nav{transform:none;visibility:visible;transition:transform .3s var(--ease)}
  #main-nav .nav-top{display:flex;align-items:center;justify-content:space-between;min-height:64px;margin-bottom:16px}
  #main-nav .nav-top .wordmark{color:var(--teal-deep);width:auto;text-shadow:none}
  #main-nav .nav-top .wordmark::after{content:none}
  #main-nav .nav-close{display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;padding:0;border:2px solid var(--edge);border-radius:8px;background:transparent;color:var(--teal-deep);cursor:pointer}
  #main-nav > a:not(.nav-cta),#main-nav .nav-drop-btn{min-height:56px;font-size:20px;line-height:28px;color:var(--teal-deep);text-shadow:none}
  #main-nav .nav-cta{display:inline-flex;align-items:center;justify-content:center;flex:none;margin-top:auto;min-height:56px;width:100%;background:var(--solid)!important;color:var(--on-solid);border:2px solid var(--solid);text-shadow:none}
  #main-nav .nav-cta::after{content:none}
  .hero .cta-row{display:none}
}
@media (max-width:960px) and (prefers-reduced-motion:reduce){#main-nav,.navtoggle:checked ~ #main-nav{transition:none}}
@media (min-width:961px){#main-nav .nav-top,#main-nav .nav-cta{display:none}}
/* 7 Oct 2026: phones show the four benefits as stacked cards; desktop and tablet stay open */
@media (max-width:600px){
  .facts.benefits .facts-row{gap:16px}
  .facts.benefits .facts-row > div{padding:24px;border:1px solid var(--line);border-radius:16px;background:var(--surface)}
}
/* 7 Oct 2026: mobile menu: no hover underline, a right-pointing chevron, and the two products slide in from the right */
.nav-menu .sub-top,.nav-menu .sub-title{display:none}
@media (max-width:960px){
  @media (hover:hover) and (min-width:961px){#main-nav > a:not([aria-current]):is(:hover,:active)::after,#main-nav .nav-drop-btn:is(:hover,:active,[aria-expanded="true"])::after{opacity:0}}
  #main-nav .nav-drop:not(:has([aria-current])) .nav-drop-btn::after{opacity:0}
  #main-nav .nav-drop-btn svg,#main-nav .nav-drop-btn[aria-expanded="true"] svg{width:24px;height:24px;transform:rotate(-90deg)}
  #main-nav #nav-options{display:flex!important;flex-direction:column;gap:8px;position:fixed;inset:0;z-index:2;margin:0;padding:8px 24px calc(24px + env(safe-area-inset-bottom));background:var(--surface);overflow-y:auto;transform:translateX(100%);visibility:hidden;transition:transform .3s var(--ease),visibility 0s linear .3s}
  #main-nav .nav-drop-btn[aria-expanded="true"] + #nav-options{transform:none;visibility:visible;transition:transform .3s var(--ease)}
  #main-nav .sub-top{display:flex;align-items:center;justify-content:space-between;min-height:64px}
  #main-nav .nav-back{display:inline-flex;align-items:center;gap:4px;min-height:48px;min-width:48px;padding:0 8px 0 0;border:0;background:none;color:var(--teal-deep);font:600 16px/24px var(--sans);cursor:pointer}
  #main-nav .sub-title{display:block;margin:16px 0 8px;font:700 24px/32px var(--display);color:var(--teal-deep)}
  #main-nav #nav-options a{display:grid;gap:4px;padding:16px 0;border-radius:0;background:transparent}
  #main-nav #nav-options a b{font-size:20px;line-height:28px}
  #main-nav #nav-options a span{font-size:16px;line-height:24px}
}
@media (max-width:960px) and (prefers-reduced-motion:reduce){#main-nav #nav-options,#main-nav .nav-drop-btn[aria-expanded="true"] + #nav-options{transition:none}}
/* 7 Oct 2026: on phones the section link ("See every step", "All questions") moves to the end of its section, on the right */
.sec-links-end{display:none}
@media (max-width:760px){
  .sec-head:has(~ .sec-links-end) .sec-links{display:none}
  .sec-links-end{display:flex;justify-content:flex-end;margin-top:24px}
}
/* 7 Oct 2026: on small screens the enquiry form and the calculator open as sheets that slide up from the bottom */
.calc-sheet .modal-brand{font-family:var(--display);font-weight:700;font-size:20px;line-height:28px}
@keyframes sheet-up{from{transform:translateY(100%)}to{transform:none}}
@media (max-width:960px){
  .modal{align-items:flex-end;justify-content:center;padding:0;overflow:hidden}
  .modal .modal-card{width:100%;max-width:none;max-height:calc(100dvh - 24px);border-radius:24px 24px 0 0;animation:sheet-up .35s var(--ease) both}
  .modal .modal-body{padding:8px 24px calc(24px + env(safe-area-inset-bottom))}
  .modal .snav{bottom:calc(-24px - env(safe-area-inset-bottom));margin-bottom:calc(-24px - env(safe-area-inset-bottom));padding-bottom:calc(24px + env(safe-area-inset-bottom))}
}
@media (max-width:960px) and (prefers-reduced-motion:reduce){.modal .modal-card{animation:none}}
/* 7 Oct 2026: three benefits ("Never owe more" removed): three columns, and one stacked column of cards on phones and small tablets */
.facts.benefits .facts-row{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:1180px){.facts.benefits .facts-row{grid-template-columns:repeat(3,minmax(0,1fr));gap:40px 32px}}
@media (max-width:760px){.facts.benefits .facts-row{grid-template-columns:1fr;gap:16px}.facts.benefits .facts-row > div{padding:24px;border:1px solid var(--line);border-radius:16px;background:var(--surface)}}
@media (min-width:1181px){.facts.benefits b{max-width:270px}}
/* 7 Oct 2026: four situations (Lifestyle added): four across on desktop, two on tablets, one on phones */
.situations{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:1180px){.situations{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.situations{grid-template-columns:1fr}}
.option .option-link{align-self:flex-start;margin-top:auto}

/* ---------- address lookup (enquiry form, Screen 3): suggestions drop down under the street field. Script: partials/address-lookup.html ---------- */
.addr-wrap{position:relative}
.addr-sugg{position:absolute;left:0;right:0;top:calc(100% + 8px);z-index:5;margin:0;padding:8px;list-style:none;background:var(--surface);border:2px solid var(--line);border-radius:16px;box-shadow:0 16px 40px -16px rgba(19,74,87,.45);max-height:min(50vh,352px);overflow:auto}
.addr-sugg[hidden]{display:none}
.addr-sugg li{padding:8px 16px;border-radius:8px;cursor:pointer;font-size:16px;line-height:24px;color:var(--ink)}
.addr-sugg li b{display:block;font-weight:600;color:var(--teal-deep)}
.addr-sugg li span{display:block;color:var(--muted);font-size:14px;line-height:20px}
.addr-sugg li[aria-selected="true"]{background:var(--mist)}
@media (hover:hover) and (min-width:961px){.addr-sugg li[role="option"]:hover{background:var(--mist)}}
.addr-sugg .addr-attr{position:sticky;bottom:-8px;background:var(--surface);cursor:default;margin:4px 0 -8px;padding:8px 16px 8px;border-top:1px solid var(--line);border-radius:0;text-align:right;font-size:14px;line-height:20px;color:var(--muted)}
form.enq .field #street-help{margin-top:8px}