:root{
  --paper:#f7ead4;
  --paper-2:#fdf3e3;
  --teal:#2f6d80;
  --teal-ink:#173842;
  --teal-line:#3f7e91;
  --amber:#e8943a;
  --amber-ink:#c9761f;
  --chalk:#fdf3e3;
  --ink:#21342b;
  --muted:#606d66;
  --line:rgba(23,56,66,.16);
  --brick:#b4442c;        /* the urgent choice only; 5.6:1 on white */
  --wrap:1160px;          
  --gutter:24px;
  --measure-read:680px;   
  --disp:'Saira Condensed',Impact,sans-serif;
  --body:'Figtree',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --hand:'Caveat','Comic Sans MS',cursive;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--body);color:var(--ink);background:var(--paper);line-height:1.6;-webkit-font-smoothing:antialiased}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gutter)}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}

.disp{font-family:var(--disp);text-transform:uppercase;font-weight:700;letter-spacing:.4px;line-height:.98}
.hand{font-family:var(--hand);font-weight:600}

.btn{display:inline-flex;align-items:center;gap:.5em;font-family:var(--disp);text-transform:uppercase;letter-spacing:1px;font-size:1.05rem;font-weight:600;padding:14px 28px;border:0;border-radius:6px;cursor:pointer;transition:transform .12s,box-shadow .12s}
.btn:hover{transform:translateY(-2px)}
.btn--amber{background:var(--amber);color:#231a0e;box-shadow:0 6px 0 var(--amber-ink)}
.btn--amber:hover{box-shadow:0 8px 0 var(--amber-ink)}
.btn--line{background:transparent;color:var(--chalk);border:2px solid rgba(253,243,227,.5)}

.demo-flag{background:var(--teal-ink);color:#f3c98a;text-align:center;font:600 .74rem/1 var(--body);letter-spacing:2px;text-transform:uppercase;padding:7px}

.head{position:sticky;top:0;z-index:60;background:var(--paper);border-bottom:2px solid var(--teal-ink)}
.head .wrap{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:12px 24px}
.logo{display:flex;align-items:center;gap:12px}
.logo .wordmark{display:flex;flex-direction:column;line-height:.8}
.logo .wordmark b{font-family:var(--disp);font-weight:700;text-transform:uppercase;font-size:1.85rem;letter-spacing:1px;color:var(--teal-ink)}
.logo .wordmark i{font-family:var(--disp);font-style:normal;text-transform:uppercase;font-size:.72rem;letter-spacing:6px;color:#9a5a17;margin-top:2px}  /* WCAG AA 4.59:1 on paper. Deliberately NOT var(--amber-ink): the token stays #c9761f everywhere else so the handwritten eyebrows keep their warmth (they clear the 3:1 large-text floor at 1.55-1.6rem). */
.head-r{display:flex;align-items:center;gap:18px}
.phone{font-family:var(--disp);font-size:1.4rem;color:var(--teal-ink);line-height:.9}
.phone small{display:block;font:600 .62rem/1 var(--body);letter-spacing:2px;color:var(--teal-ink);text-transform:uppercase;margin-top:3px}  /* 11.9:1. At 10px uppercase the large-text allowance cannot apply, so it had to change colour. */

.hero{background:var(--teal);color:var(--chalk);position:relative;overflow:hidden}
.hero .wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:24px;align-items:center;padding:56px 24px 64px}
.hero-eyebrow{font-family:var(--hand);font-size:1.5rem;color:#f3c98a;transform:rotate(-2deg);display:inline-block;margin-bottom:6px}
.hero h1{font-family:var(--disp);font-weight:700;text-transform:uppercase;font-size:clamp(3rem,8vw,6rem);line-height:.9;letter-spacing:1px}
.hero h1 .strike{position:relative;color:#bcd2d8}
.hero h1 .strike::after{content:"";position:absolute;left:-2%;right:-2%;top:52%;height:.09em;background:var(--amber);transform:rotate(-3deg)}
.hero h1 .pop{color:var(--amber)}
.hero p{font-size:1.18rem;max-width:480px;margin:20px 0 26px;color:#e7f0f1}
.hero-cta{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.hero-rate{margin-top:22px;font-family:var(--hand);font-size:1.3rem;color:#f8e0bc}
.hero-rate b{color:#fff}
.hero-art{position:relative;min-height:340px;display:flex;justify-content:center}
.hero-art svg{width:100%;height:auto;overflow:visible}
.apprentice-card{width:100%;max-width:430px;height:auto;display:block;transform:rotate(-1.6deg);filter:drop-shadow(0 20px 34px rgba(0,0,0,.30));border-radius:18px}

.ink{stroke:var(--chalk);stroke-width:2.2;fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;animation:draw 1.5s ease forwards}
.ink.fillchalk{fill:var(--chalk);stroke:none;opacity:0;animation:fillin .6s ease forwards 1.2s}
.ink.amber{stroke:var(--amber)}
.d1{animation-delay:.05s}.d2{animation-delay:.25s}.d3{animation-delay:.45s}.d4{animation-delay:.65s}.d5{animation-delay:.85s}.d6{animation-delay:1.05s}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes fillin{to{opacity:1}}

.ribbon{background:var(--teal-ink);color:var(--chalk)}
.ribbon .wrap{display:flex;flex-wrap:wrap;gap:8px 26px;justify-content:center;padding:13px 24px;font-family:var(--disp);text-transform:uppercase;letter-spacing:1px;font-size:.92rem}
.ribbon b{color:var(--amber)}

.sec{padding:70px 0}
.sec--paper2{background:var(--paper-2)}
.sec-eyebrow{font-family:var(--hand);font-size:1.6rem;color:var(--amber-ink);transform:rotate(-1.5deg);display:inline-block}
.sec-title{font-family:var(--disp);text-transform:uppercase;font-size:clamp(2rem,4.5vw,3rem);color:var(--teal-ink);margin:4px 0 8px}
.sec-lead{color:var(--muted)}
.center{text-align:center;margin:0 auto 40px;max-width:var(--measure-read)}

.notepad{background:#fff;border:2px solid var(--teal-ink);border-radius:10px;box-shadow:10px 12px 0 rgba(23,56,66,.14);overflow:hidden}
.notepad-top{background:var(--teal-ink);color:var(--chalk);padding:16px 26px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.notepad-top .disp{font-size:1.5rem}
.notepad-top .hand{font-family:var(--hand);font-size:1.4rem;color:#f3c98a}
.checks{list-style:none;columns:2;column-gap:0;padding:10px 0}
@media(min-width:1000px){.checks{columns:3}}
@media(max-width:640px){.checks{columns:1}}
.checks li{break-inside:avoid;display:flex;gap:14px;align-items:flex-start;padding:14px 26px;border-bottom:1px dashed var(--line)}
.checks li .tick{flex:0 0 26px;height:26px;margin-top:2px}
.checks li b{font-family:var(--disp);text-transform:uppercase;letter-spacing:.5px;font-size:1.18rem;color:var(--teal-ink);display:block;line-height:1}
.checks li span{color:var(--muted);font-size:.95rem}

.blue{background:var(--teal);color:var(--chalk);border-radius:14px;padding:42px;display:grid;grid-template-columns:1.05fr .95fr;gap:34px;align-items:center;background-image:linear-gradient(rgba(253,243,227,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(253,243,227,.06) 1px,transparent 1px);background-size:26px 26px}
.blue h2{font-family:var(--disp);text-transform:uppercase;font-size:clamp(1.8rem,4vw,2.6rem);line-height:1}
.blue ul{list-style:none;margin-top:16px;display:grid;gap:11px}
.blue li{padding-left:28px;position:relative;color:#e7f0f1}
.blue li::before{content:"✓";position:absolute;left:0;color:var(--amber);font-weight:700}
.hoods{background:rgba(23,56,66,.4);border:1.5px dashed rgba(253,243,227,.4);border-radius:10px;padding:22px}
.hoods .lab{font-family:var(--hand);font-size:1.4rem;color:#f3c98a}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.chip{border:1.5px solid rgba(253,243,227,.45);border-radius:30px;padding:6px 13px;font-family:var(--disp);text-transform:uppercase;letter-spacing:.5px;font-size:.82rem}

.notes{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:24px;align-items:stretch}
.note{background:#fff;border:1px solid var(--line);border-radius:8px;padding:24px;box-shadow:5px 6px 0 rgba(23,56,66,.1);position:relative;transform:rotate(-1deg)}
.note:nth-child(2){transform:rotate(1.2deg)}
.note:nth-child(3){transform:rotate(-.6deg)}
.note .stars{color:var(--amber);letter-spacing:2px}
.note p{margin:10px 0 14px;color:#33443b}
.note .who{font-family:var(--disp);text-transform:uppercase;letter-spacing:.5px;color:var(--teal-ink)}
.note .where{font-family:var(--hand);font-size:1.15rem;color:var(--amber-ink)}

.note--first{background:transparent;border:2px dashed var(--teal-line);box-shadow:none;transform:rotate(-.5deg);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:6px}
.note--first .cutout{width:72px;height:72px;color:var(--teal);opacity:.8;margin-bottom:2px}
.note--first .bf-hand{font-family:var(--hand);font-size:1.3rem;color:var(--amber-ink);transform:rotate(-2deg)}
.note--first .bf-title{font-family:var(--disp);text-transform:uppercase;letter-spacing:.5px;color:var(--teal-ink);font-size:1.55rem;line-height:1}
.note--first p{margin:2px 0 4px;color:#33443b;font-size:.95rem}
.note--first .bf-cta{font-family:var(--disp);text-transform:uppercase;letter-spacing:1px;font-size:.82rem;color:var(--amber-ink)}

.faq{display:grid;grid-template-columns:1fr;gap:14px}
.faq-item{background:#fff;border:1px solid var(--line);border-radius:10px;padding:20px 24px;box-shadow:4px 5px 0 rgba(23,56,66,.07)}
.faq-item b{display:block;font-family:var(--disp);text-transform:uppercase;letter-spacing:.5px;color:var(--teal-ink);font-size:1.12rem;margin-bottom:6px}
.faq-item p{color:#33443b;margin:0}

.quote{background:var(--teal-ink);color:var(--chalk)}
.quote .wrap{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center;padding:64px 24px}
.quote h2{font-family:var(--disp);text-transform:uppercase;font-size:clamp(1.9rem,4vw,2.8rem)}
.quote p{color:#cfe0e3;margin-top:10px}
.form{background:var(--paper-2);color:var(--ink);border-radius:10px;padding:26px;box-shadow:8px 10px 0 rgba(0,0,0,.25)}
.form .row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.form label{display:block;font-family:var(--disp);text-transform:uppercase;letter-spacing:1px;font-size:.78rem;color:var(--teal);margin:12px 0 5px}
.form input,.form select,.form textarea{width:100%;padding:12px;border:1.5px solid #cdbfa6;border-radius:7px;font-family:var(--body);font-size:1rem;background:#fff;color:var(--ink)}
.form .btn{width:100%;justify-content:center;margin-top:16px}
.form .fineprint{font-size:.78rem;color:var(--muted);margin-top:10px}

.quote .wrap>div{text-align:center}
.quote-logo{width:320px;max-width:80%;height:auto;display:block;margin:34px auto 0}

.foot{background:var(--teal-ink);color:#cfe0e3;padding:52px 0 24px;font-size:.94rem}
.foot .cols{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:32px}
.foot h4{font-family:var(--disp);text-transform:uppercase;color:#fff;letter-spacing:.5px;margin-bottom:12px}
.foot a:hover{color:var(--amber)}
.foot .tag{font-family:var(--hand);font-size:1.5rem;color:var(--amber);margin-top:8px}
.foot .legal{border-top:1px solid rgba(255,255,255,.13);margin-top:26px;padding-top:16px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;color:#8aa6ac;font-size:.8rem}

@media(max-width:840px){
  .hero .wrap,.blue,.quote .wrap{grid-template-columns:1fr}
  .hero-art{order:-1;min-height:240px}
  .checks{columns:1}
  .foot .cols{grid-template-columns:1fr 1fr}
  .phone small{display:none}
}
@media(max-width:520px){.foot .cols{grid-template-columns:1fr}.head-r .btn{display:none}}

@media(prefers-reduced-motion:reduce){
  .ink{animation:none;stroke-dashoffset:0}
  .ink.fillchalk{animation:none;opacity:1}
  .btn:hover{transform:none}
}

.home-hero{background:var(--teal);color:var(--chalk);overflow:hidden}
.home-hero .wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:40px;align-items:center;padding:52px 24px 30px}
.hh-left h1{font-family:var(--disp);text-transform:uppercase;font-size:clamp(2.8rem,7vw,5.2rem);line-height:.9;letter-spacing:1px}
.hh-left h1 .strike{position:relative;color:#bcd2d8}
.hh-left h1 .strike::after{content:"";position:absolute;left:-2%;right:-2%;top:52%;height:.09em;background:var(--amber);transform:rotate(-3deg)}
.hh-left h1 .pop{color:var(--amber)}
.hh-rot{font-family:var(--disp);text-transform:uppercase;font-size:clamp(1.1rem,2.4vw,1.6rem);letter-spacing:.5px;margin:18px 0 6px;color:#e7f0f1}
.rot-word{color:var(--amber);transition:opacity .22s ease;display:inline-block;min-width:6ch}
.hh-sub{color:#e7f0f1;max-width:460px;margin-bottom:22px}
.home-hero .hero-cta{display:flex;flex-wrap:wrap;gap:14px}

.marquee{margin-top:30px;background:var(--teal-ink);border-top:2px solid var(--amber);border-bottom:2px solid var(--amber);overflow:hidden;white-space:nowrap}
.marquee-track{display:inline-block;padding:11px 0;animation:scrollx 52s linear infinite;font-family:var(--disp);text-transform:uppercase;letter-spacing:1.5px;font-size:.96rem;opacity:.92}
.marquee-track span{color:var(--chalk)}
.marquee-track .loc{color:var(--amber)}
.marquee-track .dot{color:#76a3b0;margin:0 14px}
@keyframes scrollx{from{transform:translateX(0)}to{transform:translateX(-50%)}}

.hh-right{display:flex;flex-direction:column}
.helper{background:#fff;border-radius:16px;box-shadow:0 22px 44px rgba(0,0,0,.28);overflow:hidden;border:1px solid rgba(0,0,0,.06)}
.helper-top{background:var(--teal-ink);color:var(--chalk);padding:14px 18px;display:flex;align-items:center;gap:12px}
.helper-top b{font-family:var(--disp);text-transform:uppercase;letter-spacing:.5px;font-size:1.1rem;display:block}
.helper-top small{color:#bcd2d8;font-size:.8rem}
.helper-dot{width:12px;height:12px;border-radius:50%;background:#5fd08a;box-shadow:0 0 0 4px rgba(95,208,138,.25);flex:0 0 auto}
.helper-body{padding:18px;max-height:360px;overflow-y:auto;color:var(--ink)}
.bubble{background:var(--paper-2);border:1px solid var(--line);border-radius:14px 14px 14px 4px;padding:12px 14px;margin-bottom:12px;font-size:.98rem;max-width:92%}
.opts{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:6px}
.opt{border:1.5px solid var(--teal);color:var(--teal);background:#fff;border-radius:30px;padding:8px 14px;font-family:var(--disp);text-transform:uppercase;letter-spacing:.5px;cursor:pointer;font-size:.86rem;transition:.12s}
.opt:hover{background:var(--teal);color:#fff;transform:translateY(-1px)}
.helper-form{display:grid;gap:8px;margin-top:4px}
.helper-form input{padding:11px 12px;border:1.5px solid #d8d2c8;border-radius:10px;font-family:var(--body);font-size:1rem}
.helper-form .btn{justify-content:center}
.helper-foot{color:#cfe0e3;font-size:.85rem;margin-top:12px;text-align:center}

@keyframes dotpulse{0%{box-shadow:0 0 0 0 rgba(95,208,138,.6)}70%{box-shadow:0 0 0 11px rgba(95,208,138,0)}100%{box-shadow:0 0 0 0 rgba(95,208,138,0)}}
.helper-dot{animation:dotpulse 2s ease-out infinite}
@keyframes helperglow{0%,100%{box-shadow:0 22px 44px rgba(0,0,0,.28),0 0 0 0 rgba(232,148,58,0)}50%{box-shadow:0 22px 44px rgba(0,0,0,.28),0 0 0 5px rgba(232,148,58,.18)}}
.helper{animation:helperglow 3.6s ease-in-out infinite}

.helper-ask{display:flex;align-items:center;gap:8px;border-top:1px solid var(--line);padding:12px 14px;background:#fff}
.ask-field{position:relative;flex:1;min-width:0}
.helper-ask input{width:100%;border:1.5px solid #d8d2c8;border-radius:30px;padding:10px 15px;font-family:var(--body);font-size:.93rem;color:var(--ink);background:#fbf7ef}
.helper-ask input:focus{outline:none;border-color:var(--teal);background:#fff}
.ask-ghost{position:absolute;left:16px;right:14px;top:50%;transform:translateY(-50%);display:flex;align-items:center;pointer-events:none;color:#8a9aa0;font:.93rem var(--body);white-space:nowrap;overflow:hidden}
.ask-field.is-active .ask-ghost{display:none}
.ask-caret{flex:0 0 auto;display:inline-block;width:2px;height:1.05em;background:var(--teal);margin-left:2px;animation:caretblink 1.06s infinite}
@keyframes caretblink{0%,50%{opacity:1}50.01%,100%{opacity:0}}
.helper-ask-go{flex:0 0 auto;width:40px;height:40px;border-radius:50%;border:none;background:var(--amber);color:#231a0e;font-size:1.2rem;cursor:pointer;box-shadow:0 4px 0 var(--amber-ink);line-height:1;transition:.12s}
.helper-ask-go:hover{transform:translateY(-1px)}
.bubble--me{background:var(--teal);color:#fff;border-color:var(--teal);border-radius:14px 14px 4px 14px;margin-left:auto}
.opts--nudge .opt{animation:optnudge .5s ease 2}
@keyframes optnudge{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
@media(prefers-reduced-motion:reduce){.helper-dot,.helper,.opts--nudge .opt,.ask-caret{animation:none}}

.lead-tag{background:var(--paper-2);border:1px dashed var(--teal);border-radius:12px;padding:14px}
.lead-tag-h{font-family:var(--disp);text-transform:uppercase;letter-spacing:.5px;color:var(--teal-ink);font-size:.92rem;margin-bottom:8px}
.pill{display:inline-block;background:var(--teal);color:#fff;border-radius:20px;padding:4px 11px;font-family:var(--disp);text-transform:uppercase;letter-spacing:.5px;font-size:.78rem;margin:0 6px 6px 0}
.pill-home{background:#2f7d5b}.pill-corp{background:#b9542f}
.lead-note{font-size:.8rem;color:var(--muted);margin-top:6px}

@media(max-width:860px){ .home-hero .wrap{grid-template-columns:1fr} .hh-right{order:-1} }
@media(prefers-reduced-motion:reduce){ .marquee-track{animation:none} .rot-word{transition:none} }

.rev-stage{margin-top:6px}
.rev-track{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px}
.rev-card{background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:0 10px 24px rgba(0,0,0,.10);padding:26px;display:flex;flex-direction:column}
.rev-ctrls{display:none;align-items:center;justify-content:center;gap:20px;margin-top:20px}

.rev-stage.is-live{perspective:1500px;height:330px;position:relative;overflow:hidden}
.rev-stage.is-live .rev-track{display:block;position:absolute;inset:0;transform-style:preserve-3d;gap:0}
.rev-stage.is-live .rev-card{position:absolute;top:50%;left:50%;width:340px;height:272px;margin:-136px 0 0 -170px;box-shadow:0 22px 44px rgba(0,0,0,.16);transition:transform .7s cubic-bezier(.2,.7,.2,1),opacity .6s;backface-visibility:hidden}
.rev-stage.is-live + .rev-ctrls{display:flex}

.rev-card--end{background:var(--teal-ink);color:var(--chalk);border-color:var(--teal-ink)}
.rev-stars{color:var(--amber);font-size:1.15rem;letter-spacing:3px}
.rev-area{font-family:var(--hand);color:var(--amber-ink);font-size:1.55rem;margin-top:2px}
.rev-card--end .rev-area{color:#f3c98a}
.rev-text{color:#33443b;margin:12px 0;flex:1;font-size:.98rem}
.rev-card--end .rev-text{color:#cfe0e3}
.rev-name{font-family:var(--disp);text-transform:uppercase;letter-spacing:.5px;color:var(--teal-ink)}
.rev-card--end .rev-name{color:#fff}
.rev-btn{width:46px;height:46px;border-radius:50%;border:2px solid var(--teal);background:#fff;color:var(--teal);font-size:1.5rem;cursor:pointer;line-height:1;transition:.12s}
.rev-btn:hover{background:var(--teal);color:#fff}
.rev-btn:focus-visible{outline:3px solid var(--amber);outline-offset:2px}
.rev-meta{font-family:var(--disp);color:var(--muted);letter-spacing:1px;min-width:64px;text-align:center}
@media(prefers-reduced-motion:reduce){.rev-stage.is-live .rev-card{transition:opacity .3s}}

.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px;align-items:stretch}
.card{background:#fff;border:1px solid var(--line);border-radius:10px;padding:22px 24px;box-shadow:4px 5px 0 rgba(23,56,66,.07);transition:transform .12s,box-shadow .12s}
a.card:focus-visible{outline:3px solid var(--amber);outline-offset:2px}

.area-card{text-decoration:none;display:flex;flex-direction:column}
.area-card h3{font-size:1.3rem;color:var(--teal-ink);letter-spacing:.5px}
.area-card p{color:var(--muted);font-size:.95rem;margin:6px 0 14px;flex:1}
.area-go{font-family:var(--disp);text-transform:uppercase;letter-spacing:.5px;color:var(--amber-ink);font-size:.85rem}
a.area-card:hover{transform:translateY(-4px)}
.area-soon{opacity:.72}
.area-soon .area-go{color:var(--muted)}

h1 .hero-eyebrow{display:block;line-height:1.1;margin-bottom:8px}

.sec--near{background:var(--paper-2);border-top:1px solid var(--line)}
.near-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px}
.near-card{display:flex;flex-direction:column;gap:4px;text-decoration:none;background:#fff;border:1px solid var(--line);border-radius:10px;padding:18px 20px;box-shadow:4px 5px 0 rgba(23,56,66,.07);transition:transform .12s,box-shadow .12s}
.near-card b{font-family:var(--disp);text-transform:uppercase;letter-spacing:.5px;color:var(--teal-ink);font-size:1.08rem}
.near-card span{color:var(--muted);font-size:.9rem}
.near-card:hover{transform:translateY(-3px);box-shadow:6px 8px 0 rgba(23,56,66,.11)}
.near-card:focus-visible{outline:3px solid var(--amber);outline-offset:2px}
.near-card--all{background:var(--teal-ink)}
.near-card--all b{color:#fff}
.near-card--all span{color:#cfe0e3}

.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.lead-status{margin-top:10px;font-size:.92rem;min-height:1.2em}
.lead-status.is-ok{color:#1c6b45;font-weight:600}
.lead-status.is-error,.lead-status.is-warn{color:#9d3421;font-weight:600}
.lead-status.is-busy{color:var(--muted)}

.feature{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center}
@media(max-width:860px){.feature{grid-template-columns:1fr;gap:28px}}

.town-links{margin-top:12px;font-size:.9rem;line-height:1.8}
.town-links b{color:#cfe0e3;display:block;margin-bottom:2px;font-size:.82rem;text-transform:uppercase;letter-spacing:1px}
.town-links a{color:#f3c98a;text-decoration:none}
.town-links a:hover{text-decoration:underline}
.town-links .sep{color:#5f7f86}
.crumb{background:var(--paper-2);border-bottom:1px solid var(--line)}
.crumb .wrap{padding-top:12px;padding-bottom:12px;font-size:.9rem;color:var(--muted)}
.crumb a{color:var(--teal);text-decoration:none;font-weight:600}
.crumb a:hover{text-decoration:underline}
.crumb a:focus-visible{outline:3px solid var(--amber);outline-offset:2px}
.crumb-sep{margin:0 8px;color:var(--muted)}
.crumb [aria-current="page"]{color:var(--teal-ink);font-weight:600}

.sec--scale{background:var(--teal-ink);color:var(--chalk)}
.sec--scale .sec-title{color:#fff}
.sec--scale .sec-eyebrow{color:var(--amber)}
.sec--scale .sec-lead{color:#cfe0e3}
.scale-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:40px}
@media(max-width:720px){.scale-grid{grid-template-columns:repeat(2,1fr)}}
.scale-card{background:rgba(253,243,227,.06);border:1.5px dashed rgba(253,243,227,.35);border-radius:12px;padding:26px 20px;text-align:center;display:flex;flex-direction:column;gap:8px}
.scale-num{font-family:var(--disp);font-size:clamp(2.6rem,6vw,3.6rem);line-height:1;color:var(--amber);font-weight:700}
.scale-star{font-size:.5em;vertical-align:super;margin-left:2px}
.scale-lab{color:#cfe0e3;font-size:.92rem;line-height:1.35}
.scale-fam{color:var(--amber)}
.range-lead{color:#cfe0e3;text-align:center;max-width:var(--measure-read);margin:0 auto 28px}
.range3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media(max-width:760px){.range3{grid-template-columns:1fr}}
.range-card{background:rgba(253,243,227,.05);border:1px solid rgba(253,243,227,.16);border-radius:12px;padding:26px}
.range-tag{display:inline-block;font-family:var(--disp);text-transform:uppercase;letter-spacing:1px;font-size:.72rem;color:var(--teal-ink);background:var(--amber);border-radius:20px;padding:3px 10px;margin-bottom:10px}
.range-card h3{font-family:var(--disp);text-transform:uppercase;letter-spacing:.5px;color:#fff;font-size:1.3rem;margin-bottom:8px}
.range-card p{color:#cfe0e3;font-size:.96rem}

.scale-strip{background:var(--paper-2);border-bottom:1px solid var(--line)}
.scale-strip .wrap{display:flex;flex-wrap:wrap;gap:10px 30px;justify-content:center;padding:14px 24px;font-size:.94rem;color:var(--muted)}
.scale-strip b{color:var(--teal-ink)}

.sec--census{background:var(--paper-2);border-top:1px solid var(--line)}
.cx-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media(max-width:720px){.cx-grid{grid-template-columns:repeat(2,1fr)}}
.cx-card{background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:4px 5px 0 rgba(23,56,66,.07);padding:24px 18px;text-align:center;display:flex;flex-direction:column;gap:4px}
.cx-num{font-family:var(--disp);font-size:clamp(1.9rem,4.5vw,2.6rem);line-height:1;color:var(--teal-ink);font-weight:700}
.cx-lab{font-family:var(--disp);text-transform:uppercase;letter-spacing:.5px;color:var(--amber-ink);font-size:.9rem;margin-top:4px}
.cx-sub{color:var(--muted);font-size:.8rem}
.cx-src{text-align:center;color:var(--muted);font-size:.8rem;margin-top:18px}

@media(max-width:640px){
  .head .phone{padding:10px 6px;min-height:44px;justify-content:center}
  .crumb a,.crumb [aria-current="page"]{display:inline-block;padding:11px 4px;min-height:40px}
  .town-links a,.town-links [aria-current="page"]{display:inline-block;padding:9px 4px;min-height:40px}
  .foot a[href^="tel:"]{display:inline-block;padding:9px 0;min-height:40px}
  .foot .cols a{display:inline-block;min-height:40px;padding:4px 0}
  .foot .legal a{display:inline-block;padding:10px 0;min-height:40px}
  /* Inline links inside policy sentences: vertical padding grows the tap area to clear the
     24px floor without changing the line height, so the paragraph does not reflow. */
  .policy p a{padding:4px 0}
}

/* Helper end step: always offer a human. */
.helper-callout{margin-top:12px;padding:14px 16px;background:var(--paper-2);border:1px solid var(--line);border-radius:10px}
.helper-callout p{margin:0 0 10px;color:#33443b}
.helper-call{display:inline-block;min-height:44px;line-height:44px;padding:0 20px}


/* ======================================================================
   Review cards: expandable, CSS only, zero JavaScript.
   The full review text is ALWAYS in the DOM. Only the DISPLAY collapses,
   so a crawler with JS off reads every word. A script-driven expander
   would hide the text from Google, which on this site defeats the point.
   ====================================================================== */
.rev-x{position:relative;overflow:hidden}
.rev-x .rvt{position:absolute;opacity:0;width:0;height:0;pointer-events:none}
.rev-x .rev-text{display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden;margin-bottom:34px}
.rev-x .rvt:checked ~ .rev-text{-webkit-line-clamp:unset;display:block}
.rev-more{position:absolute;right:16px;bottom:16px;width:30px;height:30px;border-radius:50%;background:rgba(23,56,66,.07);border:1px solid var(--line);display:grid;place-items:center;cursor:pointer;transition:background .14s,transform .14s}
.rev-more:hover{background:rgba(23,56,66,.14);transform:translateY(-1px)}
.rvt:focus-visible ~ .rev-more{outline:3px solid var(--amber);outline-offset:2px}
.rev-more .pl{position:relative;width:12px;height:12px;display:block}
.rev-more .pl::before,.rev-more .pl::after{content:'';position:absolute;background:var(--teal-ink);border-radius:1px;transition:transform .18s}
.rev-more .pl::before{left:0;right:0;top:5px;height:2px}
.rev-more .pl::after{top:0;bottom:0;left:5px;width:2px}
.rvt:checked ~ .rev-more .pl::after{transform:scaleY(0)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Ghost text in the Helper. Was an orphan class with no rule anywhere, which is
   why it rendered at 2.91:1. Uses the muted token, 5.4:1 on the white panel. */
.ask-ghost-text{color:#606d66}

/* Hero proof block: the 4.5 aggregate. The half star is a left-to-right gradient
   clipped to one real glyph, so it stays crisp at any size and is not an image.
   4.5 from 124 is Google's published figure, read off the profile 2026-10-05. */
.proof{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.proof-stars{font-size:1.9rem;letter-spacing:3px;line-height:1;white-space:nowrap}
.proof-stars .full{color:var(--amber);-webkit-text-stroke:.8px var(--teal-ink)}
.proof-stars .half{background:linear-gradient(90deg,var(--amber) 50%,#c9bda6 50%);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-stroke:.8px var(--teal-ink)}
.proof-num{font-family:var(--disp);font-size:1.9rem;line-height:1;color:var(--teal-ink)}
.proof-sub{font-size:.85rem;color:var(--muted)}
@media(prefers-reduced-motion:reduce){.rev-more,.rev-more .pl::after{transition:none}}

/* Suburb review notes: same clamp-and-expand contract as the homepage cards.
   Without this the grid goes ragged, because a 94-character review and a 547-character
   one sit in the same row. Uneven card heights are the defect the operator flagged on
   the FAQ, and reintroducing it here would be the same mistake twice. */
.note{display:flex;flex-direction:column;position:relative;overflow:hidden}
.note .rvt{position:absolute;opacity:0;width:0;height:0;pointer-events:none}
.note p{display:-webkit-box;-webkit-line-clamp:6;-webkit-box-orient:vertical;overflow:hidden;flex:0 1 auto}
.note .rvt:checked ~ p{-webkit-line-clamp:unset;display:block}
.note .rev-more{right:14px;bottom:14px}
.note .who{margin-top:auto;padding-right:40px}

/* The be-the-next card carries no review text, so the clamp-and-expand rules above
   must not reach it: .note p sets a 6 line webkit-box and flex:1, which would stretch
   its short paragraph and push the CTA away from the centred stack. */
.note--first p{display:block;-webkit-line-clamp:unset;overflow:visible;flex:0 0 auto}
.note--first .bf-cta{text-decoration:none;border-bottom:1.5px solid var(--amber-ink);padding-bottom:2px;transition:color .14s,border-color .14s}
.note--first .bf-cta:hover{color:var(--teal-ink);border-color:var(--teal-ink)}


/* ======================================================================
   Review lightbox: a full review that will not fit the carousel card
   opens as a panel over the page. Pure CSS, checkbox + label, no JS.

   WHY THE PANELS LIVE OUTSIDE .rev-stage: the carousel uses 3D transforms,
   and a transformed ancestor becomes the containing block for any
   position:fixed descendant. A panel inside a card would be pinned to the
   card, not the viewport. So the toggles and the panels are siblings of the
   stage, and the card only carries the label that points at them.
   ====================================================================== */
.rv-t{position:absolute;width:0;height:0;opacity:0;pointer-events:none}
.rv-modal{display:none;position:fixed;inset:0;z-index:1000;align-items:center;justify-content:center;padding:24px}
.rv-backdrop{position:absolute;inset:0;background:rgba(23,56,66,.74);cursor:pointer;border:0}
.rv-panel{position:relative;background:#fff;border-radius:16px;padding:38px 34px 30px;max-width:620px;
  max-height:82vh;overflow:auto;box-shadow:0 30px 70px rgba(0,0,0,.42);text-align:left}
.rv-panel .rev-stars{font-size:1.15rem;letter-spacing:3px}
.rv-panel .rv-text{color:#33443b;font-size:1.02rem;line-height:1.62;margin:14px 0 18px}
.rv-panel .rv-who{font-family:var(--disp);text-transform:uppercase;letter-spacing:.5px;color:var(--teal-ink);font-size:1.05rem}
.rv-panel .rv-where{font-family:var(--hand);font-size:1.3rem;color:var(--amber-ink);margin-top:2px}
.rv-x{position:absolute;top:8px;right:14px;width:34px;height:34px;display:grid;place-items:center;
  border-radius:50%;cursor:pointer;color:var(--muted);font-size:1.5rem;line-height:1}
.rv-x:hover{background:rgba(23,56,66,.08);color:var(--teal-ink)}
.rv-t:focus-visible ~ .rev-stage .rev-more{outline:3px solid var(--amber);outline-offset:2px}
@media(max-width:640px){.rv-panel{padding:32px 22px 24px;max-height:86vh}}

/* carousel card text: clamp so nothing is ever cut mid-word inside the fixed box */
.rev-stage.is-live .rev-card .rev-text{display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden}
.rev-stage.is-live .rev-card .rev-more{position:absolute;right:14px;bottom:14px}

#rvm1:checked ~ .rv-modals #rvbox1{display:flex}
#rvm2:checked ~ .rv-modals #rvbox2{display:flex}
#rvm3:checked ~ .rv-modals #rvbox3{display:flex}
#rvm4:checked ~ .rv-modals #rvbox4{display:flex}
#rvm6:checked ~ .rv-modals #rvbox6{display:flex}
#rvm8:checked ~ .rv-modals #rvbox8{display:flex}
#rvm9:checked ~ .rv-modals #rvbox9{display:flex}
#rvm10:checked ~ .rv-modals #rvbox10{display:flex}
#rvm11:checked ~ .rv-modals #rvbox11{display:flex}
#rvm12:checked ~ .rv-modals #rvbox12{display:flex}
#rvm13:checked ~ .rv-modals #rvbox13{display:flex}
#rvm14:checked ~ .rv-modals #rvbox14{display:flex}
#rvm15:checked ~ .rv-modals #rvbox15{display:flex}

/* ======================================================================
   The reviews page wall.
   A column FLOW, not a grid. Sections hold 5, 7, 10, 11 and 23 reviews,
   and none of those divides by three. In a grid that leaves an orphan on
   the last row, which is the exact defect the operator flagged on the
   suburb pages. In a flow the last column simply ends, which reads as
   deliberate. break-inside keeps a review whole across the column break.
   ====================================================================== */
.rw-wall{column-count:3;column-gap:24px;margin-top:34px}
.rw{break-inside:avoid;-webkit-column-break-inside:avoid;page-break-inside:avoid;
    background:#fff;border:1px solid var(--line);border-radius:8px;padding:22px 22px 18px;
    box-shadow:5px 6px 0 rgba(23,56,66,.1);margin:0 0 24px;transform:rotate(-.4deg)}
.rw:nth-child(3n+2){transform:rotate(.5deg)}
.rw:nth-child(3n){transform:rotate(-.2deg)}
.rw .stars{color:var(--amber);letter-spacing:2px;font-size:.95rem}
.rw blockquote{margin:0}
.rw p{margin:10px 0 14px;color:#33443b}
.rw figcaption{display:flex;flex-direction:column;gap:2px}
.rw .who{font-family:var(--disp);text-transform:uppercase;letter-spacing:.5px;color:var(--teal-ink)}
.rw .where{font-family:var(--hand);font-size:1.12rem;color:var(--amber-ink)}

/* The jump index under the H1, and the town list at the foot. */
.rw-index{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:30px}
.rw-chip,.rw-town{display:inline-flex;align-items:center;gap:8px;background:#fff;
  border:1px solid var(--line);border-radius:999px;padding:9px 18px;color:var(--teal-ink);
  text-decoration:none;font-size:.92rem;transition:border-color .14s,transform .14s}
.rw-chip b,.rw-town b{font-family:var(--disp);color:var(--amber-ink)}
a.rw-chip:hover,a.rw-town:hover{border-color:var(--teal);transform:translateY(-1px)}
.rw-towns{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:34px}
.rw-town--flat{background:transparent;border-style:dashed;color:var(--muted);cursor:default}

@media(max-width:1000px){.rw-wall{column-count:2}}
@media(max-width:640px){.rw-wall{column-count:1}}
@media(prefers-reduced-motion:reduce){.rw-chip,.rw-town{transition:none}}

/* Privacy policy: a reading page, so it gets the reading measure, not the full wrap. */
.policy{max-width:var(--measure-read);margin:0 auto}
.policy h2{font-family:var(--disp);text-transform:uppercase;letter-spacing:.5px;color:var(--teal-ink);font-size:1.35rem;margin:34px 0 10px}
.policy p,.policy li{color:#33443b;line-height:1.65}
.policy ul{padding-left:20px;margin:0 0 12px}
.policy li{margin-bottom:8px}
.policy a{color:var(--teal-ink)}
.policy-short{background:var(--paper-2);border:1px dashed var(--teal-line);border-radius:10px;padding:4px 24px 14px;margin-top:34px}
.policy-contact{display:flex;flex-direction:column;gap:4px;margin-top:4px}
.policy-contact a{display:inline-block;padding:10px 0;min-height:40px;font-weight:600}
.policy-date{color:var(--muted);font-size:.9rem;margin-top:18px}
.foot .legal a{color:inherit;text-decoration:underline;text-underline-offset:2px}

/* The route from the homepage carousel to the full reviews page. */
.rev-all{text-align:center;margin:22px 0 0}
.rev-all a{display:inline-block;min-height:40px;padding:10px 4px;font-family:var(--disp);text-transform:uppercase;letter-spacing:1px;font-size:.92rem;color:var(--amber-ink);text-decoration:none}
.rev-all a:hover{color:var(--teal-ink)}

/* A town name never breaks across lines in the footer list (American / Fork did). */
.town-links a,.town-links [aria-current="page"]{white-space:nowrap}

/* Reviews chip in the header. Hidden at the top of the page so the first screen stays clear;
   site.js adds .is-scrolled once the visitor has scrolled. visibility, not just opacity, so a
   hidden chip cannot be tabbed to or read out.
   Positioned absolutely so it takes NO room in the header row: in normal flow it squeezed the
   phone number on a phone until it broke across two lines, even while the chip was hidden.
   Wide screens: on the page's centre line. 900px and below: a tab hanging under the header. */
.head .wrap{position:relative}
.head-rev{position:absolute;left:50%;top:50%;display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:8px 16px;border:1.5px solid var(--teal-ink);border-radius:6px;background:#fff;color:var(--teal-ink);font-family:var(--disp);text-transform:uppercase;letter-spacing:1px;font-size:.88rem;text-decoration:none;white-space:nowrap;opacity:0;visibility:hidden;transform:translate(-50%,-50%) translateY(-8px);transition:opacity .22s ease,transform .22s ease,visibility 0s linear .22s,background .14s,color .14s}
.head.is-scrolled .head-rev{opacity:1;visibility:visible;transform:translate(-50%,-50%);transition:opacity .22s ease,transform .22s ease,visibility 0s,background .14s,color .14s}
.head-rev .hr-star{color:var(--amber)}
.head-rev:hover{background:var(--teal-ink);color:var(--paper)}
.head-rev:focus-visible{outline:3px solid var(--amber);outline-offset:2px}
.head-rev .hr-short{display:none}
@media(max-width:900px){
  .head-rev{top:100%;box-shadow:0 6px 16px rgba(23,56,66,.18);transform:translate(-50%,-6px)}
  .head.is-scrolled .head-rev{transform:translate(-50%,10px)}
}
@media(max-width:520px){.head-rev{padding:8px 14px;font-size:.8rem}.head-rev .hr-long{display:none}.head-rev .hr-short{display:inline}}

/* The 4.5 panel links to the reviews. At rest it is identical to its three neighbours; only on
   hover or keyboard focus does it light up to show it can be clicked. */
a.scale-card--link{color:inherit;text-decoration:none;transition:border-color .18s,background .18s,box-shadow .18s,transform .18s}
a.scale-card--link:hover,a.scale-card--link:focus-visible{border-style:solid;border-color:var(--amber);background:rgba(253,243,227,.12);box-shadow:0 0 0 4px rgba(232,148,58,.18),0 14px 30px rgba(0,0,0,.25);transform:translateY(-3px);outline:none}

@media(prefers-reduced-motion:reduce){
  .head-rev,.head.is-scrolled .head-rev{transform:translate(-50%,-50%);transition:none}
  a.scale-card--link,a.scale-card--link:hover,a.scale-card--link:focus-visible{transform:none;transition:none}
}
@media(prefers-reduced-motion:reduce) and (max-width:900px){.head-rev,.head.is-scrolled .head-rev{transform:translate(-50%,10px)}}


/* Quote fields v2 (spec Amendment A, 2026-10-09): timing, customer, address, photos */
.form fieldset{border:0;padding:0;margin:12px 0 0;min-width:0}
.pick-legend{display:block;padding:0;font-family:var(--disp);text-transform:uppercase;letter-spacing:1px;font-size:.78rem;color:var(--teal);margin:0 0 4px}
.form label.pick-legend{margin:12px 0 4px}
.picks{display:flex;flex-wrap:wrap;gap:8px}
.form .pick{position:relative;display:inline-block;margin:0}
.pick input{position:absolute;opacity:0;width:1px;height:1px}
.pick span{display:inline-flex;align-items:center;min-height:40px;padding:8px 16px;border:1.5px solid var(--teal);border-radius:30px;background:#fff;color:var(--teal);font-family:var(--disp);text-transform:uppercase;letter-spacing:.5px;font-size:.86rem;cursor:pointer;transition:background .12s,color .12s}
.pick span:hover{background:#eef4f6}
.pick input:checked+span{background:var(--teal);color:#fff}
.pick input:focus-visible+span{outline:3px solid var(--amber);outline-offset:2px}
.pick--urgent span{border-color:var(--brick);color:var(--brick)}
.pick--urgent span:hover{background:#fbeeea}
.pick--urgent input:checked+span{background:var(--brick);color:#fff}
.form .opt-note{font-family:var(--body);text-transform:none;letter-spacing:0;color:var(--muted)}
.photos{position:relative;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
/* Beats .form input{width:100%} and .helper-form input, which otherwise stretch this hidden input past the page edge. */
.form .photo-input,.helper-form .photo-input,.photo-input{position:absolute;left:0;top:0;opacity:0;width:1px;height:1px;padding:0;border:0}
.form .photo-add,.photo-add{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;margin:0;padding:8px 16px;border:1.5px dashed var(--teal);border-radius:7px;background:#fff;color:var(--teal);font-family:var(--disp);text-transform:uppercase;letter-spacing:.5px;font-size:.86rem;cursor:pointer}
.photo-add:hover{background:#eef4f6}
.photo-input:focus-visible+.photo-add{outline:3px solid var(--amber);outline-offset:2px}
.photo-thumbs{display:flex;gap:8px;flex-wrap:wrap}
.photo-thumb{position:relative;width:56px;height:56px;padding:0;border:1.5px solid #cdbfa6;border-radius:7px;overflow:hidden;background:#e9dcc4;cursor:pointer}
.photo-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.photo-thumb span{position:absolute;top:0;right:0;width:20px;height:20px;line-height:20px;background:rgba(23,56,66,.85);color:#fff;font-size:.8rem;border-bottom-left-radius:7px}
.photo-thumb:hover span,.photo-thumb:focus-visible span{background:var(--brick)}
.photo-help,.form .photo-help{font-size:.78rem;color:var(--muted);margin-top:8px}
.opt--urgent{border-color:var(--brick);color:var(--brick)}
.opt--urgent:hover{background:var(--brick);color:#fff}
.helper-form .photos{flex-wrap:nowrap}
.helper-form .photo-add{flex:1 1 auto}
.helper-form .photo-thumb{width:44px;height:44px}
@media(max-width:560px){.form .row--stack{grid-template-columns:1fr}}
.form .field-note{font-size:.78rem;color:var(--muted);margin-top:4px}
.helper-row{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.helper-row input{min-width:0}
.helper-form .photo-help{margin-top:0}
.pill-urgent{background:var(--brick);color:#fff;border-color:var(--brick)}
/* Helper, one step at a time (2026-10-09): a fixed panel that never grows; each step replaces the last. */
.helper-body{height:376px;max-height:none}
.helper-trail{display:flex;flex-wrap:wrap;margin-bottom:8px}
.helper-trail .pill{font-size:.72rem;padding:4px 8px;margin:0 4px 4px 0;background:var(--paper-2);color:var(--teal-ink);border:1px solid var(--line)}
.bubble--warn{border-color:var(--brick);color:var(--brick);background:#fbeeea}

/* Quote section, layout D (operator-chosen 2026-10-17): what happens next, held level with the form. */
.quote .wrap{align-items:start}
.quote .wrap>.q-left{text-align:left;padding-top:24px;position:sticky;top:120px}
.q-steps{list-style:none;margin:28px 0 0;padding:0;display:grid;gap:16px}
.q-steps li{display:flex;gap:16px;align-items:flex-start}
.q-steps li>b{flex:0 0 40px;height:40px;border-radius:50%;background:var(--amber);color:#231a0e;display:grid;place-items:center;font-family:var(--disp);font-size:1.2rem}
.q-steps strong{display:block;font-family:var(--disp);text-transform:uppercase;letter-spacing:.5px;color:var(--chalk);font-size:1.05rem}
.q-steps span{color:#cfe0e3;font-size:.95rem}
.q-quote{margin:32px 0 0;padding:20px 24px;border-left:4px solid var(--amber);background:#25444d;font-family:var(--hand);font-size:1.6rem;color:var(--chalk)}
.q-quote cite{display:block;font-family:var(--body);font-style:normal;font-size:.85rem;color:#cfe0e3;margin-top:8px}
@media(max-width:900px){.quote .wrap>.q-left{position:static}}

/* Homepage only (option C, operator-approved 2026-10-20): the quote section returns to the hero teal so
   the page opens and closes in the same colour. Town and service pages keep the navy. Body text moves to
   chalk because #cfe0e3 is 4.26:1 on teal, under AA; chalk is 5.28:1. */
.quote.quote--home{background:var(--teal)}
.quote--home p,.quote--home .q-steps span,.quote--home .q-quote cite{color:var(--chalk)}