:root{
  --ink:#10231F;
  --euca:#0E3B33;        /* deep eucalyptus */
  --euca-2:#155248;
  --foam:#EDF7F2;        /* mint foam tint */
  --sky:#E2F1F5;         /* sky wash tint */
  --sun:#FFB933;         /* sunshine gold */
  --sun-deep:#F59E0B;
  --sun-text:#B45309;    /* amber dark enough to read as text (5:1 on white) */
  --white:#ffffff;
  --line:#D8E7DF;
  --muted:#5B7269;
  --radius:18px;
  --shadow:0 10px 30px rgba(14,59,51,.10);
  --display:'Bricolage Grotesque', sans-serif;
  --body:'Instrument Sans', sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
}
body{font-family:var(--body);color:var(--ink);background:var(--white);line-height:1.55;font-size:16.5px}
h1,h2,h3{font-family:var(--display);color:var(--euca);line-height:1.08;letter-spacing:-.01em}
img{max-width:100%;height:auto}
a{color:inherit}
a:focus-visible,button:focus-visible,[tabindex]:focus-visible{outline:3px solid var(--sun-deep);outline-offset:2px}
.skip{position:absolute;left:-999px;top:10px;z-index:100;background:var(--euca);color:#fff;font-weight:700;padding:10px 16px;border-radius:999px;text-decoration:none}
.skip:focus{left:12px}
.wrap{max-width:1180px;margin:0 auto;padding:0 22px}

/* ---------- header ---------- */
header{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;height:70px}
.logo{font-family:var(--display);font-weight:800;font-size:26px;color:var(--euca);text-decoration:none;display:flex;align-items:center;gap:10px}
.logo-mark{width:38px;height:38px;flex:none;display:block}
.logo-word{display:flex;flex-direction:column;align-items:flex-start;line-height:1}
.logo-au{font-family:var(--display);font-weight:800;font-size:23px;letter-spacing:-.02em;color:var(--euca)}
.logo-au i{font-style:normal;color:var(--sun-deep)}
.logo-sub{font-family:var(--body);font-weight:700;font-size:8.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--muted);margin-top:3px;white-space:nowrap}
.foot .logo-mark{width:32px;height:32px}
.nav-links{display:flex;gap:26px;align-items:center;font-weight:500;font-size:15.5px}
.nav-links a{position:relative;text-decoration:none;color:var(--ink);opacity:.85;padding:6px 0}
.nav-links a:hover{opacity:1;color:var(--euca)}
/* current page indicator */
.nav-links a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2.5px;border-radius:2px;background:var(--sun-deep);transform:scaleX(0);transform-origin:center;transition:transform .18s ease}
.nav-links a:hover::after{transform:scaleX(.45);background:var(--line)}
.nav-links a.on{color:var(--euca);opacity:1;font-weight:700}
.nav-links a.on::after,.nav-links a.on:hover::after{transform:scaleX(1);background:var(--sun-deep)}
.nav-cta{display:flex;gap:12px;align-items:center}
.phone{display:flex;align-items:center;gap:7px;font-weight:700;color:var(--euca);text-decoration:none;font-size:15.5px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:var(--body);font-weight:700;font-size:16px;padding:13px 24px;border-radius:999px;border:0;cursor:pointer;text-decoration:none;transition:transform .15s ease, box-shadow .15s ease}
.btn:focus-visible{outline:3px solid var(--sun-deep);outline-offset:2px}
.btn-sun{background:var(--sun);color:var(--euca)}
.btn-sun:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(245,158,11,.35)}
.btn-ghost{background:transparent;color:var(--euca);border:2px solid var(--euca)}
.btn-ghost:hover{background:var(--foam)}
.btn-euca{background:var(--euca);color:#fff}
.btn-euca:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(14,59,51,.3)}
@media(max-width:900px){.nav-links{display:none}}
@media(max-width:760px){
  .phone{display:none}
  .nav-cta .btn{padding:10px 18px;font-size:14.5px}
  .logo{font-size:22px}
  .nav{height:62px}
}

/* ---------- hero ---------- */
section.hero{padding:0}
.hero{background:linear-gradient(180deg,var(--foam) 0%, #fff 100%)}
.hero .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,560px);gap:40px;padding-top:64px;padding-bottom:80px;align-items:start}
.eyebrow{display:inline-flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--line);border-radius:999px;padding:7px 16px;font-size:13.5px;font-weight:600;color:var(--euca);margin-bottom:20px}
.eyebrow .dot{width:8px;height:8px;border-radius:50%;background:#2EAE6E}
h1{font-size:clamp(38px,4.6vw,58px);font-weight:800;margin-bottom:18px}
.hl{position:relative;white-space:nowrap}
.hl em{font-style:normal;position:relative;z-index:1}
.hl::after{content:"";position:absolute;left:-2%;right:-2%;bottom:6%;height:38%;background:var(--sun);z-index:0;border-radius:4px;transform:skew(-6deg)}
.sub{font-size:19px;color:var(--muted);max-width:52ch;margin-bottom:26px}
.trust-row{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:30px}
.chip{display:inline-flex;align-items:center;gap:7px;background:#fff;border:1px solid var(--line);padding:8px 14px;border-radius:999px;font-size:13.5px;font-weight:600;color:var(--euca)}
.chip svg{flex:none}
/* inline line icons ({% icon %} and the same markup from main.js) — sized to the text they sit in */
.ico-svg{display:inline-block;width:1em;height:1em;flex:none;vertical-align:-.16em}
.ico-star{color:var(--sun-deep,#F59E0B)}
.chip .ico-svg{width:15px;height:15px;color:var(--euca)}
.chip .ico-star{color:var(--sun-deep,#F59E0B)}
.hstat b .ico-svg{width:.68em;height:.68em;vertical-align:.02em;margin-left:1px}
.svc .ico .ico-svg{width:24px;height:24px;color:var(--euca)}
.svc.featured .ico .ico-svg{color:#fff}
.locate-btn .ico-svg{width:15px;height:15px;margin-right:5px}
.qc-success .tick .ico-svg,.th-tick .ico-svg{width:.95em;height:.95em;stroke-width:3}
.ba-meta .ico-svg{width:13px;height:13px;margin-right:2px}
.sched-confirm .ico-svg{margin-right:5px}
.inc-h .ico-svg,.step h3 .ico-svg{color:var(--euca);margin-right:4px;stroke-width:3}
.bcard-emoji .ico-svg{width:44px;height:44px;color:var(--euca);opacity:.6}
.hero-stats{display:flex;gap:34px;margin-top:8px}
.hstat b{font-family:var(--display);font-size:26px;color:var(--euca);display:block;line-height:1}
.hstat span{font-size:13px;color:var(--muted)}
.hero-home .wrap{grid-template-areas:"copy card" "proof card";grid-template-rows:auto 1fr;row-gap:0}
.hero-copy{grid-area:copy}
.hero-proof{grid-area:proof}
.hero-home .quote-card{grid-area:card}
/* single-column hero (index pages): copy only, no card beside it */
.hero-solo .wrap{display:block;padding-top:56px;padding-bottom:40px}
.hero-solo.narrow .wrap{max-width:820px}
.h1-md{font-size:clamp(32px,4vw,48px)}
.h1-sm{font-size:clamp(28px,3.6vw,42px)}
@media(max-width:900px){
  .hero .wrap{grid-template-columns:1fr;padding-top:40px}
  /* phones: headline, then the estimate card, then the trust chips and stats */
  .hero-home .wrap{grid-template-areas:"copy" "card" "proof";grid-template-rows:auto;row-gap:26px}
  .hero-home .sub{margin-bottom:0}
  .hero-proof{margin-top:4px}
}

/* ---------- contact channels (contact page hero) ---------- */
.cways{display:grid;gap:10px;margin-bottom:18px;max-width:52ch}
.cway{display:flex;align-items:center;gap:14px;background:#fff;border:1px solid var(--line);border-radius:16px;padding:13px 18px;text-decoration:none;transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease}
.cway:hover{transform:translateY(-2px);box-shadow:var(--shadow);border-color:var(--euca)}
.cway:focus-visible{outline:3px solid var(--sun-deep);outline-offset:2px}
.cway-ico{width:42px;height:42px;flex:none;border-radius:12px;background:var(--foam);color:var(--euca);display:flex;align-items:center;justify-content:center}
.cway-ico svg{width:20px;height:20px}
.cway-body{min-width:0}
.cway-body b{display:block;font-family:var(--display);font-size:17px;color:var(--euca);line-height:1.2;overflow-wrap:anywhere}
.cway-body span{display:block;font-size:13.5px;color:var(--muted);margin-top:2px}
.cway-go{margin-left:auto;font-size:19px;font-weight:700;color:var(--sun-deep);transition:transform .15s ease}
.cway:hover .cway-go{transform:translateX(3px)}
.cway-areas{font-size:14.5px;color:var(--muted);max-width:52ch;margin-bottom:26px}
.cway-areas a{color:var(--euca);font-weight:600;text-decoration:none;border-bottom:1.5px solid var(--line)}
.cway-areas a:hover{border-color:var(--sun-deep)}
.cway-handy{margin-top:26px;max-width:52ch;background:var(--foam);border:1px solid var(--line);border-radius:16px;padding:18px 22px}
.cway-handy b{font-family:var(--display);font-size:16.5px;color:var(--euca)}
.cway-handy ul{margin:10px 0 0;padding-left:18px}
.cway-handy li{font-size:14.5px;color:var(--muted);margin-bottom:4px}
.cway-handy span{display:block;margin-top:10px;font-size:13.5px;color:var(--euca);font-weight:600}
/* The prompt list balances the two-column hero against the tall quote card.
   Once the hero stacks there is no gap left to fill and it only pushes the
   form further down the phone, so it steps aside — the form asks for the
   same details anyway. */
@media(max-width:900px){.cway-handy{display:none}}
@media(max-width:520px){
  .cways{max-width:none}
  .cway{padding:12px 14px;gap:11px}
  .cway-ico{width:36px;height:36px;border-radius:10px}
  .cway-body b{font-size:15.5px}
  .cway-body span{font-size:12.5px}
}

/* ---------- quote card (signature) ---------- */
.quote-card{background:#fff;border-radius:24px;box-shadow:var(--shadow);border:1px solid var(--line);overflow:hidden;scroll-margin-top:74px}
.qc-head{background:var(--euca);color:#fff;padding:18px 26px;display:flex;justify-content:space-between;align-items:center}
.qc-head h2{color:#fff;font-size:19px}
.qc-head .tag{background:var(--sun);color:var(--euca);font-size:12px;font-weight:700;padding:4px 11px;border-radius:999px}
.qc-body{padding:24px 26px 26px}
.qc-label{display:block;font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin:16px 0 8px}
.qc-label:first-child{margin-top:0}
.qc-label[hidden]{display:none}
/* ---------- the booking steps: rooms → extras → book ---------- */
/* progress stepper: numbered dots joined by a track that fills as steps are done */
.qsteps{display:flex;gap:0;border-bottom:1px solid var(--line);padding:2px 0 16px;margin-bottom:18px}
.qsteps button{position:relative;flex:1;display:flex;flex-direction:column;align-items:center;gap:8px;padding:2px 4px 0;border:0;background:none;border-radius:10px;font-family:var(--body);font-size:12.5px;font-weight:700;color:var(--muted);cursor:pointer;transition:color .15s}
.qsteps button::after{content:"";position:absolute;top:16px;right:50%;width:100%;height:3px;border-radius:999px;background:var(--line);transition:background .25s}
.qsteps button:first-child::after{display:none}
.qsteps button.on::after,.qsteps button.done::after{background:var(--euca)}
.qsteps button:hover{color:var(--euca)}
.qsteps button:focus-visible{outline:3px solid var(--sun-deep);outline-offset:1px}
.qsteps-n{position:relative;z-index:1;flex:none;display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;border:2px solid var(--line);background:#fff;font-size:13px;font-weight:800;color:var(--muted);transition:background .15s,border-color .15s,color .15s,box-shadow .15s}
.qsteps-t{white-space:nowrap}
.qsteps button.on{color:var(--euca)}
.qsteps button.on .qsteps-n{background:var(--euca);border-color:var(--euca);color:#fff;box-shadow:0 0 0 4px rgba(14,59,51,.14)}
.qsteps button.done{color:var(--euca)}
.qsteps button.done .qsteps-n{background:var(--euca);border-color:var(--euca);color:#fff;font-size:0}
.qsteps button.done .qsteps-n::before{content:"✓";font-size:13px;font-weight:800}
.qsteps button.on .qsteps-t::after{content:attr(data-pos);display:block;font-size:11px;font-weight:600;color:var(--muted);margin-top:2px}
/* bedrooms & bathrooms: a label + stepper row each, so nothing ever wraps */
.room-rows{display:flex;flex-direction:column;gap:8px}
.room-row{display:flex;align-items:center;justify-content:space-between;gap:12px;border:1.5px solid var(--line);border-radius:14px;background:#fff;padding:9px 9px 9px 13px}
.room-lab{font-size:14.5px;font-weight:600;color:var(--ink)}
.room-row .xstep-n{min-width:58px}
.qstep{padding:0}  /* the global section band padding has no business in here */
.qstep[hidden]{display:none}
@media (prefers-reduced-motion:no-preference){.qstep{animation:qstep-in .18s ease}}
@keyframes qstep-in{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
.qstep .qc-fields{margin-top:2px}
/* the extras step reminds you what it's pricing (service · beds · baths) */
.stepx-ctx{font-size:13px;font-weight:600;color:var(--muted);margin:-2px 0 10px}
.stepx-ctx:empty{display:none}
/* persistent footer: Back beside Continue/Confirm, under the live price */
.qstep-nav{display:flex;gap:10px;margin-top:16px}
.qstep-nav .qc-cta{margin-top:0;flex:1;width:auto}
.qc-back{flex:none;margin-top:0;padding:13px 20px;font-size:15.5px}
.qc-back[hidden]{display:none}
.seg{display:flex;gap:8px;flex-wrap:wrap}
.seg button{flex:1;min-width:86px;padding:11px 10px;border-radius:12px;border:1.5px solid var(--line);background:#fff;font-family:var(--body);font-weight:600;font-size:14.5px;cursor:pointer;color:var(--ink);transition:all .12s ease}
.seg button:hover{border-color:var(--euca)}
.seg button.on{background:var(--euca);border-color:var(--euca);color:#fff}
.seg button:focus-visible{outline:3px solid var(--sun-deep);outline-offset:1px}
.qc-select{appearance:none;-webkit-appearance:none;display:block;width:100%;min-height:50px;padding:11px 52px 11px 15px;border:1.5px solid #BFD3C9;border-radius:14px;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28'%3E%3Ccircle cx='14' cy='14' r='14' fill='%23E5F2EC'/%3E%3Cpath d='M9 12l5 5 5-5' fill='none' stroke='%230e3b33' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 11px center/28px;font-family:var(--body);font-weight:600;font-size:15.5px;color:var(--ink);cursor:pointer}
.qc-select:hover{border-color:var(--euca)}
.qc-select:focus-visible{outline:none;border-color:var(--euca);box-shadow:0 0 0 3px rgba(14,59,51,.12)}
.qstep .fld{margin-bottom:10px}
.fld[hidden],.qc-select[hidden],.pick-list[hidden]{display:none}
/* the in-flow picker: a field-shaped button, and an option list that
   unfolds beneath it and pushes the form down rather than floating over it */
.pick{position:relative}
.pick-btn{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;min-height:50px;padding:11px 12px 11px 15px;border:1.5px solid #BFD3C9;border-radius:14px;background:#fff;font-family:var(--body);font-weight:600;font-size:15.5px;color:var(--ink);text-align:left;cursor:pointer;transition:border-color .12s,box-shadow .12s}
.pick-btn:hover{border-color:var(--euca)}
.pick-btn:focus-visible{outline:none;border-color:var(--euca);box-shadow:0 0 0 3px rgba(14,59,51,.12)}
.pick-val{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pick-chev{flex:none;width:28px;height:28px;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;background:#E5F2EC;color:var(--euca);transition:transform .16s ease}
.pick-chev svg{width:16px;height:16px}
.pick.open .pick-btn{border-color:var(--euca);border-bottom-left-radius:6px;border-bottom-right-radius:6px}
.pick.open .pick-chev{transform:rotate(180deg)}
.pick-list{display:flex;flex-direction:column;gap:4px;margin-top:6px;padding:6px;border:1.5px solid var(--euca);border-radius:14px;background:#fff}
.pick-opt{display:flex;align-items:center;gap:10px;width:100%;min-height:46px;padding:10px 12px;border:1.5px solid transparent;border-radius:10px;background:#fff;font-family:var(--body);font-size:15px;font-weight:500;color:var(--ink);text-align:left;cursor:pointer;transition:background .12s,border-color .12s}
.pick-opt::before{content:"";flex:none;width:18px;height:18px;border-radius:50%;border:2px solid #BFD3C9;background:#fff;transition:border-color .12s,background .12s}
.pick-opt:hover{background:#F2F8F5;border-color:#D8E7DF}
.pick-opt:focus-visible{outline:none;border-color:var(--euca);box-shadow:0 0 0 3px rgba(14,59,51,.12)}
.pick-opt.on{font-weight:700;background:#E5F2EC;border-color:#E5F2EC}
.pick-opt.on::before{border-color:var(--euca);background:radial-gradient(circle,var(--euca) 45%,#fff 50%)}
.extras{display:flex;gap:8px;flex-wrap:wrap}
.extras label{display:inline-flex;align-items:center;gap:7px;border:1.5px solid var(--line);border-radius:12px;padding:9px 13px;font-size:14px;font-weight:600;cursor:pointer;user-select:none}
.extras input{accent-color:var(--euca);width:16px;height:16px}
.extras label:has(input:checked){background:var(--foam);border-color:var(--euca)}
/* admin-toggled pets question — folded away, off by default, priced only when on */
.pet-q{margin:14px 0 0;border:1.5px solid var(--line);border-radius:14px;padding:10px 13px}
.pet-q summary{display:flex;align-items:center;gap:10px;list-style:none;cursor:pointer;font-size:13.5px;font-weight:700;color:var(--muted)}
.pet-q summary::-webkit-details-marker{display:none}
.pet-q summary::after{content:"+";margin-left:auto;font-family:var(--display);font-size:19px;line-height:1;color:var(--sun-deep);transition:transform .15s}
.pet-q[open] summary{color:var(--euca)}
.pet-q[open] summary::after{transform:rotate(45deg)}
.pet-q__title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pet-q__flag{display:none;flex:none;font-size:11px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--euca);background:var(--foam);border-radius:999px;padding:3px 9px}
.pet-q:has(input[value="1"]:checked) .pet-q__flag{display:inline-block}
.pet-q:has(input[value="1"]:checked){border-color:var(--euca)}
/* the answer itself: two plain radios, stacked so neither label has to wrap */
.pet-choice{display:flex;flex-direction:column;gap:8px;margin-top:11px}
.pet-choice__opt{display:flex;align-items:center;gap:10px;min-height:44px;padding:9px 13px;border:1.5px solid var(--line);border-radius:12px;background:#fff;font-size:14px;font-weight:600;color:var(--ink);cursor:pointer;user-select:none;transition:background .12s,border-color .12s,color .12s}
.pet-choice__opt:hover{border-color:var(--euca)}
.pet-choice__opt input{flex:none;width:17px;height:17px;margin:0;accent-color:var(--euca)}
.pet-choice__opt:has(input:checked){background:var(--foam);border-color:var(--euca);color:var(--euca)}
.pet-choice__opt:has(input:focus-visible){outline:3px solid var(--sun-deep);outline-offset:2px}
.pet-price{display:none;margin-top:9px;font-size:13.5px;font-weight:700;color:var(--euca)}
.pet-q:has(input[value="1"]:checked) .pet-price{display:block}
.pet-hint{font-size:12.5px;color:var(--muted);margin-top:6px}
.key-q:has([data-key-input][type="checkbox"]:checked) .pet-q__flag{display:inline-block}
.key-q:has([data-key-input][type="checkbox"]:checked){border-color:var(--euca)}
.key-opt__price{margin-left:auto;flex:none;font-style:normal;font-size:13px;font-weight:800;color:var(--euca)}
.key-dist{display:none;margin-top:12px}
.key-q:has([data-key-input][type="checkbox"]:checked) .key-dist{display:block}
.key-dist__lab{font-size:13px;font-weight:700;color:var(--muted);margin-bottom:2px}
.key-dist__opts{flex-direction:row;margin-top:8px}
.key-dist__opts .pet-choice__opt{flex:1 1 0;min-width:0;padding:9px 11px;font-size:13.5px}
.key-price{display:block}
.key-price[hidden]{display:none}
/* ---------- the extras catalogue: banner, category groups, cards ---------- */
/* what every clean already covers — the reassurance before the upsell */
.inc-banner{border:1.5px solid var(--euca);background:var(--foam);border-radius:14px;padding:12px 14px;margin-bottom:10px}
.inc-title{display:flex;align-items:center;gap:8px;font-size:13.5px;font-weight:800;color:var(--euca)}
.inc-title::before{content:"✓";flex:none;display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:50%;background:var(--euca);color:#fff;font-size:11px}
.inc-items{display:flex;flex-wrap:wrap;gap:4px 14px;margin-top:8px}
.inc-item{font-size:13px;font-weight:600;color:var(--ink);animation:incIn .32s ease both}
.inc-item::before{content:"✓ ";color:var(--euca);font-weight:800}
.inc-item .cd{margin:0 0 0 8px;vertical-align:middle}
.inc-note{font-size:12.5px;color:var(--muted);margin-top:8px}
@keyframes incIn{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
/* ---------- limited-time extras: the ticking countdown ----------
   A chip under the name — the admin's words, then a flip clock of days,
   hours, minutes, seconds in little boxes. A figure that changes flips over.
   The tile itself gets a warm tint and a slow shine sweep so the offer
   stands out from the plain add-ons; inside the last hour the boxes turn
   amber and the chip pulses, inside the last minute red. At zero the tile
   or banner entry folds away. */
.cd{display:inline-flex;align-items:center;flex-wrap:wrap;gap:4px 8px;margin-top:5px;line-height:1}
.cd-label{font-size:10.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--sun-text)}
.cd-clock{display:inline-flex;align-items:stretch;gap:3px}
.cd-seg{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;min-width:31px;padding:3px 4px 2px;border-radius:7px;background:var(--euca);color:#fff;perspective:80px;transition:background .3s}
.cd-seg[hidden]{display:none}
.cd-num{display:block;font-size:13px;font-weight:800;font-variant-numeric:tabular-nums;line-height:1;transform-origin:50% 100%;backface-visibility:hidden}
.cd-num.is-flip{animation:cdFlip .42s cubic-bezier(.2,.7,.3,1)}
.cd-unit{font-size:7.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;opacity:.72;margin-top:2px;line-height:1}
.cd.is-soon .cd-seg{background:var(--sun-deep);color:#1f1300}
.cd.is-soon .cd-clock{animation:cdPulse 1.3s ease-in-out infinite}
.cd.is-critical .cd-seg{background:#dc2626;color:#fff}
.cd.is-critical .cd-clock{animation-duration:.7s}
@keyframes cdFlip{0%{transform:rotateX(-90deg);opacity:0}55%{transform:rotateX(14deg);opacity:1}100%{transform:none}}
@keyframes cdPulse{0%,100%{transform:none}50%{transform:scale(1.06)}}
.xtile.has-cd{overflow:hidden;border-color:#F0CF7C;background:linear-gradient(135deg,#fff 0%,#FFF7E3 100%)}
.xtile.has-cd::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.7) 50%,transparent 65%);transform:translateX(-100%);animation:cdShine 3.6s ease-in-out infinite}
.xtile.has-cd:has(input:checked){background:var(--foam)}
.xtile.has-cd:has(input:checked)::after{animation:none}
@keyframes cdShine{0%,55%{transform:translateX(-100%)}100%{transform:translateX(100%)}}
.xtile.is-gone,.inc-item.is-gone,.xoffer.is-gone{animation:cdGone .45s ease forwards;pointer-events:none}
/* ---------- an offer: heading, one clock, its extras ----------
   Sits at the top of the extras step. A warm card with a soft shine
   sweeping across the head; the paid extras are ordinary tiles inside it,
   the free ones a row of green "Free" pills in the head. */
.xoffer{position:relative;overflow:hidden;border:1.5px solid #F0CF7C;border-radius:16px;background:linear-gradient(135deg,#FFFBF0 0%,#FFF3D6 100%);padding:14px 14px 12px;margin-bottom:12px;animation:incIn .35s ease both}
.xoffer[hidden]{display:none}
.xoffer::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.6) 50%,transparent 65%);transform:translateX(-100%);animation:cdShine 4.2s ease-in-out infinite}
.xoffer-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 16px}
.xoffer-copy{display:flex;flex-direction:column;gap:2px;min-width:0}
.xoffer-eyebrow{font-size:10.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--sun-text)}
.xoffer-title{font-family:var(--body);font-size:16px;font-weight:800;color:var(--ink);line-height:1.25}
.xoffer-tag{font-size:12.5px;color:var(--muted)}
.xoffer-head .cd{margin-top:0}
.xoffer-head .cd-seg{min-width:36px;padding:5px 5px 3px}
.xoffer-head .cd-num{font-size:16px}
.xoffer-free{display:flex;flex-wrap:wrap;gap:6px 8px}
.xoffer-free:not(:empty){margin-top:10px}
.xoffer-freeitem{display:inline-flex;align-items:center;gap:6px;padding:4px 10px 4px 8px;border-radius:999px;background:#fff;border:1.5px solid var(--euca);font-size:12.5px;font-weight:600;color:var(--ink)}
.xoffer-freeitem::before{content:"✓";color:var(--euca);font-weight:800}
.xoffer-freeitem b{font-size:10.5px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--euca)}
.xoffer .xgrid{margin-top:12px;position:relative;z-index:1}
.xoffer .xgrid[hidden]{display:none}
.xoffer .xtile{border-color:#EAD9A6}
/* a tile free with the chosen service, or a run-out offer, leaves the grid —
   the display rules above would otherwise beat the hidden attribute */
.xtile[hidden],.xgrid[hidden]{display:none}
@keyframes cdGone{to{opacity:0;transform:scale(.94) translateY(-6px)}}
/* ---------- the extras step: "Additional areas" tile rows ----------
   A heading with an "Optional" hint, then a grid of row tiles: the line
   drawing in a tinted square, the name, the price and a tick box on the
   right. The grid reflows by container width — three across on a wide
   card, two on a tablet, one on a phone. Tap tints the row mint and fills
   the tick. */
.xtras{display:flex;flex-direction:column;gap:14px}
.xtras-intro{font-size:13px;color:var(--muted);margin:-4px 0 6px}
.xhead{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:14px 0 10px}
.xhead:first-child{margin-top:0}
.xhead-t{font-family:var(--body);font-size:15.5px;font-weight:700;color:var(--ink);line-height:1.3}
.xhead-opt{font-size:13px;font-weight:500;color:var(--muted)}
/* tiles sit two across whenever the grid has room for two 230px tiles — the
   desktop card (~500px inside), a tablet, the sheet on a wide phone — and one
   per row on a narrow phone. Narrow tiles (under ~300px) swap to the compact
   shape: tighter gaps and a smaller name. Tiles carry no price — the summary
   card shows every figure. */
.xcat{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin:2px 0 -6px}
.xcat:first-child{margin-top:0}
.xgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:10px;container-type:inline-size}
@container (max-width:620px){
  .xtile{grid-template-columns:auto minmax(0,1fr) auto;column-gap:12px;padding:10px 12px}
  .xtile-name{font-size:14.5px}
  /* a per-unit tile (it carries a stepper), or the only tile under its
     heading, takes the whole row — a half-width tile beside an empty slot
     is the worst of both */
  .xgrid>.xtile:only-child,.xgrid>.xtile:last-child:nth-child(odd),.xgrid>.xtile:has(.units-panel){column-gap:14px;padding:10px 14px 10px 12px}
  .xtile:has(.units-panel){grid-template-columns:auto minmax(0,1fr) auto auto}
  .xgrid>.xtile:only-child .xtile-name,.xgrid>.xtile:last-child:nth-child(odd) .xtile-name{font-size:15px}
}
.xgrid>.xtile:only-child,.xgrid>.xtile:last-child:nth-child(odd),.xgrid>.xtile:has(.units-panel){grid-column:1/-1}
.xtile{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) auto;}
.xtile:has(.units-panel){grid-template-columns:auto minmax(0,1fr) auto auto}
.xtile{align-items:center;column-gap:14px;min-height:60px;padding:10px 14px 10px 12px;border:1.5px solid var(--line);border-radius:14px;background:#fff;cursor:pointer;user-select:none;transition:background .12s,border-color .12s,box-shadow .12s}
.xtile:hover{border-color:var(--euca)}
/* the real checkbox stays in the tab order for keyboards; the tile draws its state */
.xtile input{position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none}
.xtile:has(input:checked){background:var(--foam);border-color:var(--euca)}
.xtile:has(input:focus-visible){outline:3px solid var(--sun-deep);outline-offset:2px}
.xtile-ico{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:9px;background:var(--foam);color:var(--euca);transition:background .12s,color .12s}
.xtile-ico svg{width:20px;height:20px}
.xtile-ico img{width:24px;height:24px;object-fit:contain;display:block}
.xtile-ico:has(img){background:#fff;border:1.5px solid var(--line)}
.xtile:has(input:checked) .xtile-ico:has(img){background:#fff;border-color:var(--euca)}
.xtile:has(input:checked) .xtile-ico{background:var(--euca);color:#fff}
.xtile-body{display:flex;flex-direction:column;gap:2px;min-width:0}
.xtile-name{display:flex;align-items:center;flex-wrap:wrap;gap:4px 8px;font-size:15px;font-weight:600;color:var(--ink);line-height:1.25}
.xtile:has(input:checked) .xtile-name{color:var(--euca)}
/* the offer's "Free" / "1 free" flag: the same quiet pill as a badge, in
   green — a tick mark, then the words, on a mint tint that turns white when
   the tile is ticked */
.xtile-deal{display:inline-flex;align-items:baseline;gap:5px;font-size:11.5px;font-weight:700;letter-spacing:.01em;padding:2px 8px;border-radius:999px;background:var(--foam);border:1px solid #BFDCCB;color:var(--euca);white-space:nowrap;line-height:1.3;font-variant-numeric:tabular-nums}
.xtile-deal s{font-weight:500;color:var(--muted);text-decoration-thickness:1.5px}
.xtile-free{display:inline-flex;align-items:center;gap:3px;font-size:11px;font-weight:700;letter-spacing:.01em;padding:2px 8px 2px 6px;border-radius:999px;background:var(--foam);border:1px solid #BFDCCB;color:var(--euca);white-space:nowrap;line-height:1.3}
.xtile-free::before{content:"✓";font-size:10px;font-weight:800}
.xtile:has(input:checked) .xtile-deal,.xtile:has(input:checked) .xtile-free{background:#fff;border-color:var(--euca)}
.xtile-badge{font-size:10.5px;font-weight:700;letter-spacing:.01em;padding:2px 8px;border-radius:999px;background:#FFF3D6;color:var(--sun-text);white-space:nowrap}
.xtile-hint{font-size:12px;color:var(--muted);line-height:1.3}
.xtile-check{position:relative;width:22px;height:22px;border:1.5px solid #B9CBC2;border-radius:6px;background:#fff;transition:background .12s,border-color .12s}
.xtile-check::after{content:"";position:absolute;left:7px;top:3px;width:5px;height:10px;border:solid #fff;border-width:0 2.5px 2.5px 0;transform:rotate(45deg);opacity:0;transition:opacity .12s}
.xtile:has(input:checked) .xtile-check{background:var(--euca);border-color:var(--euca)}
.xtile:has(input:checked) .xtile-check::after{opacity:1}
/* the how-many stepper unfolds under the name once the tile is ticked */
.xtile .units-panel{margin-top:8px;gap:8px 10px;flex-wrap:wrap}
.xtile .units-panel[hidden]{display:none}
.xtile .xstep button{width:32px;min-height:30px;font-size:16px}
.xtile .xstep-n{min-width:32px;font-size:13px}
/* phones: single column, tighter rows, a slimmer banner and card padding */
@media(max-width:520px){
  .xgrid{grid-template-columns:minmax(0,1fr);gap:8px}
  .xtile{grid-template-columns:auto minmax(0,1fr) auto;min-height:58px;padding:10px 12px;border-radius:12px;column-gap:10px}
  .xtile:has(.units-panel){grid-template-columns:auto minmax(0,1fr) auto auto}
  .xstep button{width:34px;min-height:34px}
  .xstep-n{min-width:32px}
  .xtile-ico{width:34px;height:34px}
  .xtile-name{font-size:14.5px}
  .xtras-intro{display:none}
  .inc-banner{padding:9px 11px;margin-bottom:6px}
  .inc-title{font-size:12.5px}
  .inc-items{gap:2px 10px;margin-top:5px}
  .inc-item{font-size:12px}
  .inc-note{display:none}
  .qc-body{padding:18px 16px 20px}
  .qc-head{padding:15px 18px}
}
/* per-unit extras: the how-many stepper lives on the tile at all times —
   greyed until the tile is ticked, so a tap never reflows the grid */
.units-panel{display:flex;align-items:center;transition:opacity .12s}
.units-panel.is-off{opacity:.45}
.xstep{display:inline-flex;align-items:stretch;border:1.5px solid var(--line);border-radius:12px;overflow:hidden;background:#fff}
.xstep button{width:40px;min-height:36px;border:0;background:#fff;font-family:var(--body);font-size:19px;font-weight:700;color:var(--euca);cursor:pointer;transition:background .12s ease}
.xstep button:hover{background:var(--foam)}
.xstep button:disabled{color:var(--line);cursor:default;background:#fff}
.xstep button:focus-visible{outline:3px solid var(--sun-deep);outline-offset:-3px}
.xstep-n{min-width:40px;display:inline-flex;align-items:center;justify-content:center;border-left:1.5px solid var(--line);border-right:1.5px solid var(--line);font-size:14.5px;font-weight:800;color:var(--ink)}
/* terms & conditions tick box — the last thing before the booking button */
.consent{gap:0}
.consent-row{display:flex;align-items:flex-start;gap:11px;min-height:44px;padding:11px 13px;border:1.5px solid var(--line);border-radius:14px;background:#fff;cursor:pointer;user-select:none;transition:border-color .12s,background .12s}
.consent-row:hover{border-color:var(--euca)}
.consent-row input{flex:none;width:18px;height:18px;margin:2px 0 0;accent-color:var(--euca);cursor:pointer}
.consent-row:has(input:checked){background:var(--foam);border-color:var(--euca)}
.consent-row:has(input:focus-visible){outline:3px solid var(--sun-deep);outline-offset:2px}
.consent-text{font-size:13.5px;font-weight:600;line-height:1.5;color:var(--ink);text-transform:none;letter-spacing:0}
.consent-text a{color:var(--euca);font-weight:700;text-decoration:underline;text-underline-offset:2px}
.consent-text .req{color:var(--sun-deep)}
.consent:has(input.err) .consent-row{border-color:#DC2626;background:rgba(220,38,38,.04)}
.consent .err-msg{margin-top:6px}
.qc-price{background:var(--foam);border-radius:16px;padding:14px 18px 16px;margin-top:20px}
/* itemised breakdown above the total — every line is written by main.js */
.qc-sum__head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-bottom:10px;margin-bottom:12px;border-bottom:1px solid rgba(14,59,51,.15)}
.qc-sum__title{font-family:var(--display);font-weight:800;font-size:17px;line-height:1.2;color:var(--euca)}
.qc-sum__close{display:none}
.qc-lines{list-style:none;margin:0 0 12px;padding:0 0 12px;border-bottom:1px solid rgba(14,59,51,.15)}
.qc-lines:empty{display:none}
.qc-rows{display:flex;flex-direction:column;gap:7px;margin:0}
.qc-row{display:grid;grid-template-columns:minmax(84px,auto) auto minmax(0,1fr);column-gap:10px;align-items:start;font-size:13.5px;line-height:1.4;color:var(--ink)}
.qc-row dt{font-weight:500;color:var(--muted);white-space:nowrap}
.qc-row__c{color:var(--muted)}
.qc-row dd{display:flex;flex-direction:column;gap:5px;margin:0;font-weight:700;min-width:0}
.qc-row dd.is-muted{font-weight:500;color:var(--muted)}
/* an extra with its price: the name on the left, what it adds pushed to the
   right, so "(3 rooms)" is never read as a multiplier of the figure */
.qc-row__item{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.qc-row__price{flex:none;font-weight:600;font-variant-numeric:tabular-nums;color:var(--euca)}
.qc-row__item .qc-row__was{flex:none;margin-left:auto;margin-right:-6px;font-weight:500;font-variant-numeric:tabular-nums;color:var(--muted);text-decoration-thickness:1.5px}
.qc-total{display:flex;align-items:flex-end;justify-content:space-between;gap:14px}
.qc-total__note{display:none;font-size:12px;font-weight:600;color:var(--muted);margin-top:3px}
.qc-price .lab{font-size:13px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.05em}
.qc-price .amt{font-family:var(--display);font-weight:800;font-size:38px;color:var(--euca);line-height:1}
.qc-price .amt small{font-size:16px;font-weight:600;color:var(--muted)}
.qc-cta{margin-top:16px;width:100%;font-size:17px;padding:16px}
.qc-fields{display:none;margin-top:16px;gap:10px;flex-direction:column}
.qc-fields.open{display:flex}
/* text-ish fields only — tick boxes and radios keep their own sizing below,
   otherwise width:100% stretches them across the row. :where() keeps the
   specificity at .qc-fields input so base.html's overrides still win. */
.qc-fields input:where(:not([type=checkbox],[type=radio])),.qc-fields textarea{padding:13px 15px;border-radius:12px;border:1.5px solid var(--line);font-family:var(--body);font-size:15.5px;width:100%}
.qc-fields input:where(:not([type=checkbox],[type=radio])):focus,.qc-fields textarea:focus{outline:2px solid var(--euca);border-color:var(--euca)}
/* ---------- booking date & time picker ---------- */
.sched[hidden]{display:none}
.sched-title{margin-top:4px}
.sched-req{color:var(--sun-deep)}
.sched-opt{font-weight:500;color:var(--muted);text-transform:none;letter-spacing:0}
/* dates scroll sideways — unavailable days stay visible but unclickable */
.sched-dates{display:flex;gap:8px;overflow-x:auto;padding:2px 2px 8px;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;scrollbar-width:thin}
.sched-dates::-webkit-scrollbar{height:5px}
.sched-dates::-webkit-scrollbar-thumb{background:var(--line);border-radius:99px}
.sched-chip{flex:0 0 auto;width:60px;scroll-snap-align:start;display:flex;flex-direction:column;align-items:center;gap:1px;padding:9px 6px;border-radius:14px;border:1.5px solid var(--line);background:#fff;font-family:var(--body);cursor:pointer;color:var(--ink);transition:all .12s ease}
.sched-chip .dow{font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}
.sched-chip .dnum{font-family:var(--display);font-size:20px;font-weight:800;line-height:1.1}
.sched-chip .mon{font-size:11px;font-weight:600;color:var(--muted)}
.sched-chip:hover:not(.off){border-color:var(--euca)}
.sched-chip.on{background:var(--euca);border-color:var(--euca);color:#fff}
.sched-chip.on .dow,.sched-chip.on .mon{color:#CFE4DA}
.sched-chip:focus-visible{outline:3px solid var(--sun-deep);outline-offset:1px}
/* unavailable: greyed, struck through, not focusable */
.sched-chip.off{cursor:not-allowed;background:var(--foam);border-color:transparent;color:#B6C4BE;opacity:.72;position:relative}
.sched-chip.off .dow,.sched-chip.off .mon{color:#B6C4BE}
.sched-chip.off .dnum{text-decoration:line-through;text-decoration-thickness:1.5px}
/* time windows */
.sched-slots{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:2px}
.sched-slots[hidden]{display:none}
.sched-slot{flex:1 1 132px;display:flex;flex-direction:column;align-items:flex-start;gap:1px;padding:10px 13px;border-radius:13px;border:1.5px solid var(--line);background:#fff;font-family:var(--body);cursor:pointer;color:var(--ink);text-align:left;transition:all .12s ease}
.sched-slot .sl-label{font-size:14.5px;font-weight:700}
.sched-slot .sl-time{font-size:12.5px;font-weight:600;color:var(--muted)}
.sched-slot .sl-why{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:#B6C4BE}
.sched-slot:hover:not(.off){border-color:var(--euca)}
.sched-slot.on{background:var(--euca);border-color:var(--euca);color:#fff}
.sched-slot.on .sl-time{color:#CFE4DA}
.sched-slot:focus-visible{outline:3px solid var(--sun-deep);outline-offset:1px}
.sched-slot.off{cursor:not-allowed;background:var(--foam);border-color:transparent;color:#B6C4BE}
.sched-slot.off .sl-label{text-decoration:line-through;text-decoration-thickness:1.5px}
.sched-slot.off .sl-time{color:#B6C4BE}
.sched-wait{font-size:13px;font-weight:600;color:var(--muted);padding:12px 0}
.sched-retry{font-family:var(--body);background:none;border:0;cursor:pointer;color:var(--euca);text-decoration:underline;text-underline-offset:3px}
.sched-retry:focus-visible{outline:3px solid var(--sun-deep);outline-offset:1px;border-radius:6px}
.sched-hint{font-size:12.5px;color:var(--muted);margin-top:2px}
.sched-hint.fail{color:#D14343;font-weight:600}
.sched.has-err .sched-dates{border-radius:14px;box-shadow:0 0 0 2px #D1434333}
.sched-confirm{display:inline-block;margin:0 0 12px;padding:8px 16px;border-radius:999px;background:var(--foam);color:var(--euca);font-weight:700;font-size:14.5px}
@media(max-width:520px){.sched-slot{flex:1 1 100%}}

.qc-success{display:none;text-align:center;padding:34px 10px}
.qc-success.show{display:block}
.qc-success .tick{width:64px;height:64px;border-radius:50%;background:#2EAE6E;color:#fff;font-size:32px;display:inline-flex;align-items:center;justify-content:center;margin-bottom:14px}
.qc-success h3{font-family:var(--display);font-size:22px;color:var(--euca);margin-bottom:6px}
.qc-success p{color:var(--muted);font-size:15px}

/* ---------- sections ---------- */
section{padding:76px 0}
.sec-head{max-width:640px;margin-bottom:42px}
.sec-eyebrow{font-size:13.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--sun-text);margin-bottom:10px}
.sec-head h2{font-size:clamp(28px,3.4vw,40px);font-weight:800;margin-bottom:12px}
.sec-head p{color:var(--muted);font-size:17.5px}

/* services */
.svc-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.svc{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:24px;transition:transform .18s ease, box-shadow .18s ease;position:relative}
.svc:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.svc.featured{background:var(--euca);border-color:var(--euca)}
.svc.featured h3,.svc.featured .from b{color:#fff}
.svc.featured p{color:#CFE4DA}
.svc .ico{width:46px;height:46px;border-radius:13px;background:var(--foam);display:flex;align-items:center;justify-content:center;font-size:22px;margin-bottom:14px}
.svc.featured .ico{background:rgba(255,255,255,.14)}
.svc h3{font-size:18.5px;margin-bottom:6px}
.svc p{font-size:14.5px;color:var(--muted);margin-bottom:14px}
.svc .from{font-size:13px;color:var(--muted)}
.svc .from b{font-family:var(--display);font-size:19px;color:var(--euca)}
.svc .star{position:absolute;top:16px;right:16px;background:var(--sun);color:var(--euca);font-size:11px;font-weight:700;padding:3px 9px;border-radius:999px}
/* services page: cards with a full-width feature image on top */
.svc-card{padding:0;display:flex;flex-direction:column;overflow:hidden}
.svc-card .svc-media{position:relative;aspect-ratio:16/10;background:var(--foam);overflow:hidden}
.svc-card .svc-media img{width:100%;height:100%;object-fit:cover;display:block}
.svc-card .svc-body{padding:18px 20px 20px;display:flex;flex-direction:column;flex:1}
.svc-card .ico{margin-bottom:12px}
.svc-card h3{font-size:19px}
.svc-card p{margin-bottom:16px}
.svc-card .from{margin-top:auto;border-top:1px solid var(--line);padding-top:12px;display:flex;align-items:baseline;gap:5px}
.svc-card .from .arr{margin-left:auto;color:var(--euca);font-size:16px;transition:transform .18s ease}
.svc-card:hover .from .arr{transform:translateX(4px)}
.svc-card.featured .from{color:#CFE4DA;border-top-color:rgba(255,255,255,.2)}
.svc-card.featured .from .arr{color:var(--sun)}
.svc-card .star{top:12px;right:12px;z-index:2;box-shadow:0 2px 10px rgba(0,0,0,.2)}

/* steps */
.steps-band{background:var(--sky)}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.step{background:#fff;border-radius:var(--radius);padding:28px;border:1px solid var(--line)}
.step .n{font-family:var(--display);font-weight:800;font-size:15px;color:var(--euca);background:var(--sun);width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin-bottom:16px}
.step h3{font-size:19px;margin-bottom:8px}
.step p{color:var(--muted);font-size:15px}
@media(max-width:820px){.steps{grid-template-columns:1fr}}

/* pricing */
.price-table{width:100%;border-collapse:separate;border-spacing:0;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow)}
.price-table th{background:var(--euca);color:#fff;text-align:left;padding:15px 20px;font-size:14.5px}
.price-table td{padding:15px 20px;border-top:1px solid var(--line);font-size:15.5px}
.price-table tr td:last-child{font-family:var(--display);font-weight:700;color:var(--euca);font-size:17px}
.price-table tr:nth-child(even) td{background:var(--foam)}
.price-split{display:grid;grid-template-columns:minmax(0,640px) 1fr;gap:26px;align-items:start}
.price-aside{background:var(--foam);border:1px solid var(--line);border-radius:var(--radius);padding:26px 28px}
.price-aside h3{font-size:18px;margin-bottom:8px}
.price-aside p{font-size:15px;color:var(--muted)}
@media(max-width:900px){.price-split{grid-template-columns:1fr}}
.price-note{font-size:13.5px;color:var(--muted);margin-top:12px}

/* guarantee */
.guarantee{background:var(--euca);color:#fff;border-radius:26px;padding:52px 48px;display:grid;grid-template-columns:auto 1fr auto;gap:36px;align-items:center}
.guarantee .seal{width:110px;height:110px;border-radius:50%;background:var(--sun);color:var(--euca);display:flex;flex-direction:column;align-items:center;justify-content:center;font-family:var(--display);font-weight:800;text-align:center;font-size:13px;line-height:1.15;transform:rotate(-6deg);box-shadow:0 8px 24px rgba(0,0,0,.25)}
.guarantee .seal b{font-size:26px}
.guarantee h2{color:#fff;font-size:clamp(24px,3vw,34px);margin-bottom:10px}
.guarantee p{color:#CFE4DA;font-size:16.5px;max-width:56ch}
@media(max-width:820px){.guarantee{grid-template-columns:1fr;text-align:center;justify-items:center}}

/* ---------- reviews ----------
   Google-widget style: a soft grey card with the person up top (photo, source
   badge, verified tick), a row of stars, the words clamped to three lines with
   an inline "Read more", and any photos in a 2x2 grid underneath. Cards hug
   their own content so a wordy card without photos doesn't drag a row down. */
.rev-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;align-items:start}
.rev-embed{min-width:0;overflow-x:hidden}.rev-embed iframe{max-width:100%}
.rev{background:#F4F5F7;border-radius:22px;padding:28px 28px 26px;display:flex;flex-direction:column;min-width:0}

.rev-head{display:flex;align-items:center;gap:14px}
.rev-av-wrap{position:relative;flex:0 0 64px;width:64px;height:64px}
.rev-av{width:64px;height:64px;border-radius:50%;object-fit:cover;background:#fff;display:block}
.rev-av-ph{display:flex;align-items:center;justify-content:center;background:#6B7A86;color:#fff;
  font-family:var(--display);font-size:28px;font-weight:700;line-height:1}
.rev-src{position:absolute;right:-3px;bottom:-3px;width:26px;height:26px;border-radius:50%;background:#fff;
  display:flex;align-items:center;justify-content:center;box-shadow:0 1px 3px rgba(0,0,0,.18)}
.rev-src svg{width:16px;height:16px;display:block}
.rev-who{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px;line-height:1.2}
.rev-who b{display:flex;align-items:center;gap:7px;min-width:0;
  font-family:var(--display);font-size:19px;font-weight:700;color:var(--ink)}
.rev-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rev-verified{flex:none;width:18px;height:18px;color:#1A73E8}
.rev-ctx{font-size:14.5px;color:#5B6A76;line-height:1.3}

.rev-stars{display:flex;gap:3px;margin:16px 0 12px}
.rev-stars svg{width:24px;height:24px;color:#F5B400;flex:none}
.rev-stars svg.off{color:#D9DCE1}

.rev-text{font-size:16px;line-height:1.5;color:var(--ink);margin:0;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;line-clamp:3;
  overflow:hidden;white-space:pre-line}
.rev.open .rev-text{display:block;overflow:visible;-webkit-line-clamp:unset;line-clamp:unset}
.rev-more{align-self:flex-start;margin-top:6px;padding:0;border:0;background:none;
  font-family:var(--body);font-size:16px;font-weight:500;color:#1A73E8;cursor:pointer}
.rev-more:hover{text-decoration:underline;text-underline-offset:3px}
.rev-more[hidden]{display:none}
.rev-more:focus-visible{outline:3px solid var(--sun-deep);outline-offset:3px;border-radius:4px}

/* photo grid — four tiles at most; the fourth wears a "+N" for the rest,
   and any tile opens the dialog where every shot sits at full size */
.rev-photos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:16px}
.rp-tile{position:relative;display:block;width:100%;min-width:0;padding:0;border:0;
  background:#E4E7EB;border-radius:12px;overflow:hidden;aspect-ratio:1;cursor:pointer}
.rp-tile img,.rp-tile video{width:100%;height:100%;object-fit:cover;display:block}
.rp-tile:nth-child(n+5){display:none}
.rp-tile:focus-visible{outline:3px solid var(--sun-deep);outline-offset:2px}
.rev-photos[data-count="1"] .rp-tile{grid-column:span 2;aspect-ratio:16/10}
.rev-photos[data-count="3"] .rp-tile:first-child{grid-column:span 2;aspect-ratio:2/1}
.rp-more{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  background:rgba(0,0,0,.42);color:#fff;font-family:var(--display);font-size:30px;font-weight:700}
.rp-tile.is-video::after{content:"";position:absolute;left:50%;top:50%;width:44px;height:44px;
  margin:-22px 0 0 -22px;border-radius:50%;pointer-events:none;
  background:rgba(0,0,0,.5) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M8 5v14l11-7z'/%3E%3C/svg%3E") center/20px no-repeat}

/* ---------- review detail dialog ---------- */
html.rv-locked,html.rv-locked body{overflow:hidden}
.rv-modal{position:fixed;inset:0;z-index:200;display:flex;padding:20px;
  align-items:center;justify-content:center}
.rv-modal[hidden]{display:none}
.rv-scrim{position:absolute;inset:0;background:rgba(10,35,31,.66);
  -webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px);
  opacity:0;transition:opacity .22s ease}
.rv-modal.show .rv-scrim{opacity:1}
.rv-panel{position:relative;z-index:1;background:#fff;
  width:min(620px,100%);max-height:100%;overflow-y:auto;overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  border-radius:24px;padding:26px 28px 28px;
  box-shadow:0 26px 70px rgba(10,35,31,.34);
  opacity:0;transform:translateY(14px) scale(.97);
  transition:opacity .24s ease,transform .28s cubic-bezier(.16,1,.3,1)}
.rv-modal.show .rv-panel{opacity:1;transform:none}
.rv-panel:focus{outline:none}
.rv-x{position:absolute;top:14px;right:14px;width:38px;height:38px;padding:0;
  display:flex;align-items:center;justify-content:center;
  border:0;border-radius:50%;background:var(--foam);color:var(--euca);cursor:pointer;
  transition:background .15s;z-index:2}
.rv-x svg{width:19px;height:19px}
.rv-x:hover{background:var(--line)}
.rv-x:focus-visible{outline:3px solid var(--sun-deep);outline-offset:2px}

.rv-head{display:flex;align-items:center;gap:12px;padding-right:44px}
/* the card's avatar is cloned in whole, so the slot itself must not be a box */
.rv-av{display:contents}
.rv-head .rev-av{flex:0 0 46px;width:46px;height:46px;font-size:20px}
.rv-who{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.25}
.rv-who b{font-family:var(--display);font-size:18px;color:var(--euca)}
.rv-modal .rev-ctx{font-size:13.5px}
.rv-rating{flex:none}
.rv-rating .rev-stars{margin:0}
.rv-rating .rev-stars svg{width:18px;height:18px}
.rv-date{font-size:12.5px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;
  color:var(--muted);margin-top:14px}
.rv-date[hidden]{display:none}
.rv-text{font-size:16px;color:var(--ink);margin-top:8px;white-space:pre-line}
.rv-gallery{display:grid;gap:10px;margin-top:18px}
.rv-gallery:empty{display:none}
.rv-gallery img,.rv-gallery video{width:100%;border-radius:14px;display:block;background:var(--foam)}

@media(max-width:640px){
  .rv-modal{padding:0}
  .rv-panel{width:100%;height:100%;max-height:none;border-radius:0;
    padding:22px 18px calc(22px + env(safe-area-inset-bottom));
    transform:translateY(20px)}
  .rv-x{top:calc(10px + env(safe-area-inset-top));right:10px}
  .rv-who b{font-size:17px}
  .rv-text{font-size:15.5px}
}
/* narrow cards keep the rating on the name's line — the name ellipses instead */
@media(max-width:420px){
  .rev{padding:22px 20px 20px;border-radius:18px}
  .rev-av-wrap,.rev-av{flex-basis:56px;width:56px;height:56px}
  .rev-av-ph{font-size:24px}
  .rev-who b{font-size:17.5px}
  .rev-stars svg{width:22px;height:22px}
}
@media (prefers-reduced-motion: reduce){.rv-panel{transform:none}}


/* pagination */
.pager{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:8px;margin-top:28px}
.pg-nums{display:flex;align-items:center;gap:6px}
.pg-step,.pg-num{display:inline-flex;align-items:center;justify-content:center;min-width:40px;height:40px;padding:0 14px;border-radius:999px;border:1px solid var(--line);background:#fff;font-size:14px;font-weight:700;color:var(--euca);text-decoration:none;transition:all .12s}
.pg-num{padding:0}
.pg-step:hover,.pg-num:hover{background:var(--foam)}
.pg-num.on{background:var(--euca);color:#fff;border-color:var(--euca)}
.pg-step.off{opacity:.4;pointer-events:none}
.pg-gap{color:var(--muted);padding:0 2px}
.pg-count{text-align:center;margin-top:20px}
@media(max-width:520px){.pg-step{padding:0 12px}}

/* ------------------------------------------------------------------ blog
   Cards lead with a real 1200x630 thumbnail rather than an icon: every post
   has one (uploaded, or drawn on save — see blog/thumbnails.py), so the grid
   is a wall of images and the same file is what gets shared to social.
   The picture box owns the aspect ratio, so a cover of any shape crops to the
   same rectangle and nothing shifts while images load. */
.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.bcard{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
  transition:transform .18s ease, box-shadow .18s ease;display:flex}
.bcard:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.bcard-hit{display:flex;flex-direction:column;width:100%;text-decoration:none;color:inherit}
.bcard-thumb{position:relative;aspect-ratio:1200/630;background:var(--foam);overflow:hidden;flex:none}
.bcard-thumb picture{display:block;width:100%;height:100%}
.bcard-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.bcard-emoji{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:44px}
.bcard-badge{position:absolute;left:12px;top:12px;background:rgba(255,255,255,.94);
  color:var(--euca);font-size:11.5px;font-weight:700;letter-spacing:.02em;
  padding:5px 11px;border-radius:999px;backdrop-filter:blur(4px);max-width:calc(100% - 24px);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bcard-body{padding:18px 20px 22px;display:flex;flex-direction:column;flex:1}
.bcard-meta{font-size:12.5px;color:var(--muted);display:flex;gap:6px;margin-bottom:7px}
.bcard-title{font-size:18px;line-height:1.28;margin-bottom:7px;color:var(--ink)}
.bcard:hover .bcard-title{color:var(--euca)}
.bcard-excerpt{font-size:14.5px;color:var(--muted);margin-bottom:14px}
.bcard-more{margin-top:auto;font-size:13.5px;font-weight:700;color:var(--euca)}

/* the newest post leads the front page: image beside the text on desktop,
   an ordinary (taller) card once there is no room for two columns */
.blog-lead{margin-bottom:20px}
.bcard-wide .bcard-hit{flex-direction:row}
.bcard-wide .bcard-thumb{width:52%}
.bcard-wide .bcard-body{padding:28px 30px;justify-content:center}
.bcard-wide .bcard-title{font-size:26px;line-height:1.22}
.bcard-wide .bcard-excerpt{font-size:16px;margin-bottom:18px}

/* topic filter bar */
.blog-tags .wrap{display:flex;flex-wrap:wrap;gap:9px;padding-top:4px;padding-bottom:4px}
.btag{display:inline-flex;align-items:center;gap:7px;background:#fff;border:1px solid var(--line);
  border-radius:999px;padding:8px 15px;font-size:13.5px;font-weight:600;color:var(--euca);
  text-decoration:none;transition:all .12s;white-space:nowrap}
.btag:hover{background:var(--foam)}
.btag.on{background:var(--euca);color:#fff;border-color:var(--euca)}
.btag-n{font-size:11.5px;font-weight:700;opacity:.6}
.blog-search{margin-top:18px;display:flex;gap:10px;align-items:center;max-width:460px}
.blog-search input{flex:1;min-width:0;padding:12px 16px;border-radius:999px;border:1.5px solid var(--line);
  font-family:var(--body);font-size:15px;background:#fff}
.blog-search-clear{font-size:13.5px;font-weight:600;color:var(--muted);text-decoration:none;white-space:nowrap}
.blog-search-clear:hover{color:var(--euca)}
.blog-result-line{font-size:14.5px;color:var(--muted);margin-bottom:16px}
.blog-empty{grid-column:1/-1;font-size:15px;color:var(--muted);text-align:center;padding:36px 0}
.blog-empty a{color:var(--euca);font-weight:700;text-decoration:none}

/* article page */
.post-cover{margin:0 auto;max-width:820px;border-radius:var(--radius);overflow:hidden;
  border:1px solid var(--line);background:var(--foam);aspect-ratio:1200/630}
.post-cover picture{display:block;width:100%;height:100%}
.post-cover img{width:100%;height:100%;object-fit:cover;display:block}
.post-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}

/* `.post a` underlines every link in the article body, which is right for
   prose and wrong for everything the article is wrapped in: the CTA button
   comes out underlined and the navigation cards read as raw links. These are
   controls, so they take the underline on hover only.
   Each selector is qualified with .post deliberately — .post a scores (0,1,1),
   so a bare .post-nav-item loses on specificity and a bare .post-back a ties
   and loses on source order. */
.post .btn,
.post .post-nav-item,
.post .post-back a,
.post .post-service a{text-decoration:none}
.post .post-back a:hover,
.post .post-service a:hover{text-decoration:underline;text-underline-offset:2px}

.post-service{max-width:760px;font-size:14.5px;color:var(--muted);margin-top:22px}
.post-service a{color:var(--euca);font-weight:600}
.post-back{max-width:760px;margin-top:24px;font-size:14.5px}
.post-back a{color:var(--euca);font-weight:700}
.post-nav{max-width:760px;display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:24px}
.post-nav-item{display:flex;flex-direction:column;gap:4px;background:#fff;border:1px solid var(--line);
  border-radius:14px;padding:14px 18px;text-decoration:none;transition:all .14s}
.post-nav-item:hover{background:var(--foam);border-color:var(--euca)}
.post-nav-next{text-align:right;align-items:flex-end}
.post-nav-dir{font-size:12px;font-weight:700;color:var(--muted);letter-spacing:.03em}
.post-nav-title{font-family:var(--display);font-size:15.5px;font-weight:700;color:var(--euca);line-height:1.3}

@media(max-width:960px){
  .blog-grid{grid-template-columns:repeat(2,1fr)}
  .bcard-wide .bcard-title{font-size:22px}
  .bcard-wide .bcard-body{padding:22px 24px}
}
@media(max-width:720px){
  /* below two columns the split feature card would leave both halves too
     narrow to read — it becomes a normal card, just first in the list */
  .bcard-wide .bcard-hit{flex-direction:column}
  .bcard-wide .bcard-thumb{width:100%}
  .bcard-wide .bcard-body{padding:18px 20px 22px}
  .bcard-wide .bcard-title{font-size:20px}
  .bcard-wide .bcard-excerpt{font-size:15px}
  .post-nav{grid-template-columns:1fr}
  .post-nav-next{text-align:left;align-items:flex-start}
}
@media(max-width:560px){
  .blog-grid{grid-template-columns:1fr;gap:16px}
  .blog-search{flex-wrap:wrap}
  .blog-search input{flex:1 1 100%}
  .blog-tags .wrap{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;
    -webkit-overflow-scrolling:touch;padding-bottom:6px}
  .blog-tags .wrap::-webkit-scrollbar{display:none}
}
@media (prefers-reduced-motion: reduce){.bcard:hover{transform:none}}

/* suburbs */
.sub-band{background:var(--foam)}
.sub-chips{display:flex;flex-wrap:wrap;gap:9px}
.sub-chips a{background:#fff;border:1px solid var(--line);border-radius:999px;padding:8px 16px;font-size:14px;font-weight:600;color:var(--euca);text-decoration:none;transition:all .12s}
.sub-chips a:hover{background:var(--euca);color:#fff;border-color:var(--euca)}
/* "View all N suburbs" — the last chip, deliberately reading as the way out
   of a shortened list rather than as another suburb. */
.sub-chips a.sub-all{background:var(--euca);color:#fff;border-color:var(--euca)}
.sub-chips a.sub-all:hover{background:var(--ink);border-color:var(--ink)}

/* breadcrumb trail (service pages) */
.crumbs{font-size:13.5px;color:var(--muted);margin-bottom:14px}
.crumbs a{color:var(--euca);font-weight:600;text-decoration:none}
.crumbs a:hover{text-decoration:underline}
.crumbs span{margin:0 4px}

/* faq */
.faq{max-width:820px}
.faq details{border:1px solid var(--line);border-radius:14px;margin-bottom:10px;background:#fff;overflow:hidden}
.faq summary{padding:18px 22px;font-weight:700;font-size:16.5px;cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;color:var(--euca)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--display);font-size:22px;color:var(--sun-deep);transition:transform .15s}
.faq details[open] summary::after{transform:rotate(45deg)}
/* Answers arrive as a rich-text block wrapped in `.rt`, which already carries
   the 22px inset — the child combinator keeps this padding off the paragraphs
   inside it, which used to inherit it a second time and sit 44px in. */
.faq details > p{padding:0 22px 18px;color:var(--muted);font-size:15.5px}

/* final cta */
.final{background:linear-gradient(135deg,var(--euca) 0%, var(--euca-2) 100%);border-radius:26px;padding:60px 48px;text-align:center;color:#fff}
.final h2{color:#fff;font-size:clamp(26px,3.4vw,40px);margin-bottom:12px}
.final p{color:#CFE4DA;font-size:17px;margin-bottom:26px}
.final .btns{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

/* footer */
footer{border-top:1px solid var(--line);padding:44px 0 90px;font-size:14.5px;color:var(--muted)}
.foot{display:flex;justify-content:space-between;gap:26px;flex-wrap:wrap}
.foot .logo{font-size:21px}
.foot a{color:var(--euca);text-decoration:none;font-weight:600}

/* mobile booking dock — on a service page (or once the estimate is being
   filled in) the bottom edge belongs to a price card + one button. It steps
   aside while the booking form's own button is on screen or the keyboard
   is up. */
.bdock{display:none;position:fixed;bottom:0;left:0;right:0;z-index:70;
  align-items:center;gap:12px;
  padding:10px 16px calc(10px + env(safe-area-inset-bottom));
  background:rgba(255,255,255,.94);
  -webkit-backdrop-filter:saturate(180%) blur(16px);backdrop-filter:saturate(180%) blur(16px);
  border-top:1px solid var(--line);box-shadow:0 -8px 28px rgba(14,59,51,.10);
  transform:translate3d(0,105%,0);backface-visibility:hidden;visibility:hidden;
  transition:transform .34s cubic-bezier(.32,.72,.28,1),visibility .34s}
.bdock.show{transform:translate3d(0,0,0);visibility:visible}
.bdock-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px;text-decoration:none}
.bdock-lab{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bdock-amt{font-family:var(--display);font-weight:800;font-size:21px;line-height:1.15;color:var(--euca);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bdock-amt small{font-family:var(--body);font-size:12px;font-weight:700;color:var(--muted)}
.bdock-gst{font-size:11px;font-weight:600;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bdock-cta{flex:none;min-height:50px;padding:14px 24px;font-size:16px}
.bdock-cta:active{transform:scale(.96)}
@media(max-width:760px){
  body.dock-on .bdock{display:flex}
}
@media(max-width:360px){
  .bdock{gap:10px;padding-left:12px;padding-right:12px}
  .bdock-amt{font-size:19px}
  .bdock-cta{padding:13px 18px;font-size:15px}
}

/* reveal on scroll */
.reveal{opacity:0;transform:translateY(10px);transition:opacity .35s ease, transform .35s ease}
.reveal.in{opacity:1;transform:none}

/* ================= mobile & iOS usability patch ================= */
*{-webkit-tap-highlight-color:transparent}
header{-webkit-backdrop-filter:blur(8px)}
/* iOS zooms any focused input under 16px — never let that happen */
.qc-fields input, .qc-fields textarea, .lead-form input, .lead-form textarea{font-size:16px}
/* iPhone home-indicator safe area; the footer clears the dock when it is up */
@media(max-width:760px){
  footer{padding-bottom:calc(40px + env(safe-area-inset-bottom))}
  body.dock-on footer{padding-bottom:calc(110px + env(safe-area-inset-bottom))}
}
/* hamburger */
.menu-btn{display:none;width:44px;height:44px;border:0;background:none;cursor:pointer;
  flex-direction:column;align-items:center;justify-content:center;gap:5px;border-radius:10px}
.menu-btn span{display:block;width:22px;height:2.5px;border-radius:2px;background:var(--euca);
  transition:transform .25s ease, opacity .2s ease}
.menu-btn.open span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
.menu-btn.open span:nth-child(2){opacity:0}
.menu-btn.open span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}
/* right-side drawer (~half screen) with dimmed backdrop */
.m-nav{--mw:min(78vw,326px);
  position:fixed;top:70px;right:calc(-1 * var(--mw));bottom:0;width:var(--mw);z-index:59;
  background:#fff;border-left:1px solid var(--line);box-shadow:-16px 0 50px rgba(6,20,17,.16);
  padding:10px 18px calc(90px + env(safe-area-inset-bottom));overflow-y:auto;
  visibility:hidden;
  transition:right .3s cubic-bezier(.4,0,.2,1),visibility .3s}
/* scrim sits strictly LEFT of the panel — it must never overlap the white sheet */
.m-nav::before{content:"";position:fixed;top:70px;bottom:0;left:0;right:var(--mw);z-index:-1;
  background:rgba(6,20,17,.38);opacity:0;transition:opacity .3s}
.m-nav.open{right:0;visibility:visible}
.m-nav.open::before{opacity:1}
.m-nav .m-link{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:14px 12px;font-size:16px;font-weight:600;color:var(--euca);text-decoration:none;
  border-radius:13px;transition:background .15s,opacity .12s}
.m-nav .m-link + .m-link{position:relative}
.m-nav .m-link + .m-link::before{content:"";position:absolute;top:0;left:12px;right:12px;height:0;
  border-top:1.5px dotted rgba(14,59,51,.30)}
.m-nav .m-link:active{opacity:.65}
.m-nav .m-row{display:flex;align-items:center;gap:13px;min-width:0}
.m-nav .m-ico{display:flex;align-items:center;justify-content:center;width:34px;height:34px;
  flex:none;border-radius:10px;background:rgba(14,59,51,.07);color:var(--euca)}
.m-nav .m-ico svg{width:18px;height:18px}
/* trailing chevron icon */
.m-nav .m-link::after{content:"";flex:none;width:18px;height:18px;opacity:.55;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%230E3B33' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat}
/* current page highlighted */
.m-nav .m-link.on{background:rgba(14,59,51,.06);font-weight:700}
.m-nav .m-link.on::before,.m-nav .m-link.on + .m-link::before{display:none}
.m-nav .m-link.on .m-ico{background:var(--euca);color:#fff}
.m-nav .m-link.on::after{opacity:1}
@media(max-width:900px){
  .menu-btn{display:flex}
}
@media(max-width:760px){
  /* blur on a sticky header repaints every scroll frame on mid-range phones —
     a near-opaque background reads the same and scrolls smoother */
  header{background:rgba(255,255,255,.97);-webkit-backdrop-filter:none;backdrop-filter:none}
  /* comfortable tap targets */
  .seg button{min-height:46px}
  .extras label{min-height:44px}
  .pet-q summary{min-height:44px}
  .xstep button{min-height:44px}
  .qsteps button{min-height:44px}
  .btn{min-height:46px}
  /* tighter rhythm */
  section{padding:52px 0}
  .hero .wrap{padding-top:26px;padding-bottom:46px;gap:26px}
  h1{font-size:clamp(32px,9vw,42px)}
  .sub{font-size:16.5px}
  .hero-stats{gap:18px;flex-wrap:wrap}
  .sec-head h2{font-size:clamp(25px,7vw,32px)}
  /* price tables: stay real tables, wrap text, keep the price on one line */
  .price-table th,.price-table td{padding:11px 12px;font-size:14px}
  .price-table tr td:last-child{white-space:nowrap;font-size:16px}
  /* 3-column tables (.stack — label · includes · price) restack as cards */
  .price-table.stack{display:block;border:0;border-radius:0;box-shadow:none}
  .price-table.stack tr{display:block;position:relative;background:#fff;border:1px solid var(--line);border-radius:14px;padding:13px 15px;margin-bottom:10px}
  .price-table.stack tr:first-child{display:none}
  .price-table.stack td{display:block;border:0;padding:0;background:transparent!important}
  .price-table.stack td:first-child{font-weight:700;color:var(--euca);font-size:15.5px;padding-right:92px}
  .price-table.stack td:nth-child(2){color:var(--muted);font-size:13.5px;margin-top:3px;padding-right:92px}
  .price-table.stack tr td:last-child{position:absolute;top:13px;right:15px;padding:0}
  /* admin-authored rich-text tables scroll inside their own box */
  .post table,.rt table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .guarantee{padding:36px 24px}
  .final{padding:44px 24px}
}

/* ================= before/after gallery ================= */
.ba-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media(max-width:1020px){.ba-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.ba-grid{grid-template-columns:1fr}}
.ba-card{margin:0;background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow)}
.ba-frame{position:relative;aspect-ratio:4/3;overflow:hidden;--pos:50%;touch-action:pan-y;cursor:ew-resize}
.ba-frame:focus-visible{outline:3px solid var(--sun-deep);outline-offset:-3px}
.ba-layer{position:absolute;inset:0}
.ba-layer svg{width:100%;height:100%;display:block}
.ba-before{clip-path:inset(0 calc(100% - var(--pos)) 0 0)}
.ba-handle{position:absolute;top:0;bottom:0;left:var(--pos);width:3px;background:#fff;
  box-shadow:0 0 0 1px rgba(14,59,51,.15);transform:translateX(-1.5px);pointer-events:none}
.ba-handle span{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:38px;height:38px;border-radius:50%;background:#fff;color:var(--euca);
  display:flex;align-items:center;justify-content:center;font-size:17px;font-weight:700;
  box-shadow:0 4px 12px rgba(14,59,51,.3)}
.ba-range{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;margin:0}
.ba-tag{position:absolute;top:10px;padding:4px 12px;border-radius:999px;font-size:11.5px;font-weight:700;
  letter-spacing:.04em;text-transform:uppercase}
.ba-tag-b{left:10px;background:#5C4A2E;color:#fff}
.ba-tag-a{right:10px;background:#2EAE6E;color:#fff}
/* a job without a before photo: the finished photos as a swipeable set */
.ba-solo{cursor:default;touch-action:auto}
.ba-track{display:flex;height:100%;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;
  scrollbar-width:none;-webkit-overflow-scrolling:touch}
.ba-track::-webkit-scrollbar{display:none}
.ba-track:focus-visible{outline:3px solid var(--sun-deep);outline-offset:-3px}
.ba-slide{flex:0 0 100%;height:100%;scroll-snap-align:start;scroll-snap-stop:always}
.ba-slide picture{display:block;width:100%;height:100%}
.ba-slide img{width:100%;height:100%;object-fit:cover;display:block}
.ba-nav{position:absolute;top:50%;transform:translateY(-50%);width:36px;height:36px;border-radius:50%;
  border:0;background:rgba(255,255,255,.92);color:var(--euca);font-size:22px;line-height:1;font-weight:700;
  display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 4px 12px rgba(14,59,51,.3);
  padding:0 0 3px}
.ba-nav:hover{background:#fff}
.ba-prev{left:10px}.ba-next{right:10px}
.ba-nav[disabled]{opacity:.35;cursor:default}
.ba-count{position:absolute;right:10px;bottom:10px;padding:3px 10px;border-radius:999px;font-size:11.5px;
  font-weight:700;background:rgba(16,35,31,.7);color:#fff;letter-spacing:.04em}
.ba-card figcaption{padding:14px 18px 18px;display:flex;flex-direction:column;gap:4px}
.ba-card figcaption strong{font-family:var(--display);color:var(--euca);font-size:16.5px}
.ba-meta{font-size:13px;color:var(--muted);font-weight:600}
.ba-note{font-size:13.5px;color:var(--muted)}

/* ================= rich text (TinyMCE output) =================
   The global `*{margin:0;padding:0}` reset strips list indentation and
   paragraph spacing, so every admin-authored HTML block needs these back.
   `.post` = long-form (blog body, service long description);
   `.rt`   = FAQ answers plus short intro blocks (footer, hero sub, checklist
             intro). FAQ answers get the full TinyMCE toolbar, so `.rt` has to
             cover every element `.post` does. */
.post,.rt{overflow-wrap:break-word}
/* Headings match TINYMCE_CONTENT_STYLE, so the admin editor previews the real
   thing. Without them the `*` reset collapses every heading into the paragraph
   above it, and h4 loses the display face as well (only h1-h3 get it globally). */
.post h2,.rt h2{font-size:22px;margin:28px 0 8px;color:var(--euca)}
.post h3,.rt h3{font-family:var(--display);font-size:18.5px;margin:22px 0 6px;color:var(--euca)}
.post h4,.rt h4{font-family:var(--display);font-size:16.5px;margin:18px 0 6px;color:var(--euca)}
.post p,.rt p{margin:8px 0 16px}
.post p:last-child,.rt p:last-child{margin-bottom:0}
.post ul,.post ol,.rt ul,.rt ol{margin:8px 0 16px;padding-left:22px}
.post li,.rt li{margin:4px 0}
.post a,.rt a{color:var(--euca);text-decoration:underline;text-underline-offset:2px}
.post a:hover,.rt a:hover{text-decoration-thickness:2px}
.post strong,.rt strong{font-weight:700;color:var(--ink)}
.post blockquote,.rt blockquote{margin:18px 0;padding:12px 20px;border-left:4px solid var(--sun);
  background:var(--foam);border-radius:0 14px 14px 0;color:#33454f}
.post blockquote p:last-child,.rt blockquote p:last-child{margin-bottom:0}
.post hr,.rt hr{border:0;border-top:1px solid var(--line);margin:26px 0}
.post code,.rt code{background:var(--foam);border-radius:6px;padding:2px 6px;font-size:.92em}
.post pre,.rt pre{background:var(--foam);border-radius:10px;padding:12px 14px;margin:8px 0 16px;overflow-x:auto}
.post pre code,.rt pre code{background:none;padding:0}
.post table,.rt table{width:100%;border-collapse:collapse;margin:18px 0;font-size:15.5px}
.post th,.post td,.rt th,.rt td{border:1px solid var(--line);padding:9px 12px;text-align:left}
.post th,.rt th{background:var(--foam);color:var(--euca);font-weight:700}
/* short blocks sit on one line by default — no leading gap, whatever the
   editor put first (a heading opening an FAQ answer would otherwise push a
   28px gap below the summary) */
.rt > :first-child{margin-top:0}
/* tables scroll rather than blowing out the page on mobile */
@media(max-width:640px){
  .post table,.rt table{display:block;overflow-x:auto}
}

/* ================= blog article ================= */
.post{max-width:760px}
.post p{font-size:16.5px;color:#33454f;margin:8px 0 16px}
.post-cta{background:var(--foam);border:1px solid var(--line);border-radius:16px;
  padding:22px 24px;margin-top:30px;display:flex;align-items:center;gap:18px;justify-content:space-between;flex-wrap:wrap}
.post-cta strong{font-family:var(--display);color:var(--euca);font-size:17px;max-width:32ch}

/* ================= booking success overlay =================
   A booking used to end at a small panel inside the form card, which on a
   long page reads as "nothing happened". It now takes the whole screen:
   what we received, when we're calling, and what to do if it was a mistake. */
html.bk-locked,html.bk-locked body{overflow:hidden}
.bk-modal{position:fixed;inset:0;z-index:200;display:flex;padding:20px;
  align-items:center;justify-content:center}
.bk-modal[hidden]{display:none}
.bk-scrim{position:absolute;inset:0;background:rgba(10,35,31,.66);
  -webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px);
  opacity:0;transition:opacity .22s ease}
.bk-modal.show .bk-scrim{opacity:1}

.bk-panel{position:relative;z-index:1;background:#fff;
  width:min(548px,100%);max-height:100%;overflow-y:auto;overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  border-radius:26px;padding:30px 30px 24px;text-align:center;
  box-shadow:0 26px 70px rgba(10,35,31,.34);
  opacity:0;transform:translateY(14px) scale(.97);
  transition:opacity .24s ease,transform .28s cubic-bezier(.16,1,.3,1)}
.bk-modal.show .bk-panel{opacity:1;transform:none}
.bk-panel:focus{outline:none}

.bk-x{position:absolute;top:13px;right:13px;width:38px;height:38px;padding:0;
  display:flex;align-items:center;justify-content:center;
  border:0;border-radius:50%;background:var(--foam);color:var(--euca);cursor:pointer;
  transition:background .15s}
.bk-x svg{width:19px;height:19px}
.bk-x:hover{background:var(--line)}
.bk-x:focus-visible{outline:3px solid var(--sun-deep);outline-offset:2px}

.bk-art{position:relative;width:clamp(96px,26vw,130px);height:clamp(96px,26vw,130px);
  margin:2px auto 12px;display:flex;align-items:center;justify-content:center;flex:none}
.bk-art::before{content:"";position:absolute;inset:-16%;border-radius:50%;
  background:radial-gradient(circle,rgba(46,174,110,.17) 0%,rgba(46,174,110,0) 68%)}
.bk-tick{position:relative;width:100%;height:100%}
.bk-tick-disc{fill:#2EAE6E;transform-origin:60px 60px;transform:scale(0)}
.bk-tick-mark{stroke-dasharray:82;stroke-dashoffset:82}
.bk-modal.show .bk-tick-disc{animation:bkPop .42s cubic-bezier(.2,1.4,.4,1) forwards}
.bk-modal.show .bk-tick-mark{animation:bkDraw .4s .28s ease-out forwards}
@keyframes bkPop{0%{transform:scale(0)}62%{transform:scale(1.1)}100%{transform:scale(1)}}
@keyframes bkDraw{to{stroke-dashoffset:0}}

.bk-title{font-family:var(--display);font-size:clamp(23px,5.2vw,30px);color:var(--euca);
  line-height:1.1;margin-bottom:9px}
.bk-lead{font-size:15.5px;color:var(--muted);max-width:42ch;margin:0 auto}
.bk-lead strong{color:var(--euca);white-space:nowrap}

.bk-facts{list-style:none;margin:18px 0 0;padding:13px 15px;text-align:left;
  background:var(--foam);border:1px solid var(--line);border-radius:16px;
  display:grid;gap:8px}
.bk-facts:empty{display:none}
.bk-facts li{display:flex;align-items:baseline;gap:10px;font-size:15px;line-height:1.4}
.bk-facts .bk-fk{flex:none;width:88px;font-size:11.5px;font-weight:800;text-transform:uppercase;
  letter-spacing:.05em;color:var(--muted)}
.bk-facts .bk-fv{flex:1;min-width:0;font-weight:600;color:var(--euca);overflow-wrap:anywhere}

.bk-next{margin-top:18px;text-align:left}
.bk-next-h{font-size:11.5px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;
  color:var(--muted);margin-bottom:9px}
.bk-next ol{list-style:none;display:grid;gap:10px;counter-reset:bk}
.bk-next li{display:flex;gap:10px;font-size:14.5px;line-height:1.45;color:#33454f}
.bk-next li[hidden]{display:none}
/* counter, not hard-coded digits — the email step is conditional, and a fixed
   "2" left the sequence reading 1, 3 whenever it was hidden */
.bk-next li::before{counter-increment:bk;content:counter(bk);
  flex:none;width:22px;height:22px;border-radius:50%;background:var(--euca);color:#fff;
  font-size:11.5px;font-weight:800;display:flex;align-items:center;justify-content:center;margin-top:2px}
.bk-next strong{color:var(--euca);overflow-wrap:anywhere}

.bk-actions{display:flex;gap:10px;margin-top:20px;justify-content:center}
.bk-actions .btn{flex:1;min-width:0;max-width:280px;white-space:nowrap;padding:13px 16px}
.bk-fineprint{font-size:12.5px;color:var(--muted);margin-top:12px;line-height:1.45}
.bk-fineprint a{color:var(--euca);font-weight:700;white-space:nowrap}

/* phones: a full-bleed sheet rather than a card floating on a scrim.
   `safe center` matters — plain centring makes a taller-than-screen panel
   scroll off the top with no way back to it. */
@media(max-width:640px){
  .bk-modal{padding:0}
  .bk-panel{width:100%;height:100%;max-height:none;border-radius:0;
    padding:24px 18px calc(24px + env(safe-area-inset-bottom));
    display:flex;flex-direction:column;align-items:center;
    justify-content:flex-start;
    justify-content:safe center;
    transform:translateY(20px)}
  .bk-panel > :not(.bk-x):not(.bk-art){width:100%;max-width:440px;flex:none}
  .bk-x{top:calc(8px + env(safe-area-inset-top));right:8px}
  .bk-art{margin-top:8px}
  /* every step tightens a little so the buttons land on the first screen of
     a normal phone rather than below the fold */
  .bk-facts{margin-top:15px;padding:12px 14px;gap:7px}
  .bk-facts li{font-size:14.5px}
  .bk-next{margin-top:15px}
  .bk-next ol{gap:9px}
  .bk-next li{font-size:14px}
  .bk-actions{margin-top:17px}
}
@media(max-width:430px){
  .bk-actions .btn{max-width:none}
  .bk-facts li{flex-direction:column;gap:1px}
  .bk-facts .bk-fk{width:auto}
}
@media (prefers-reduced-motion: reduce){
  .bk-panel{transform:none}
  .bk-tick-disc{transform:scale(1)}
  .bk-tick-mark{stroke-dashoffset:0}
}

/* ---- modern lead-form fields ---- */
.qc-fields{gap:14px}
.fld{display:flex;flex-direction:column;gap:6px}
.fld-pair{display:grid;grid-template-columns:1fr 128px;gap:10px}
.fld-pair .fld{min-width:0}
@media(max-width:380px){.fld-pair{grid-template-columns:1fr 1fr}}
/* Three tiers a visitor can tell apart at a glance: a section heading is
   small, muted and uppercase; a field label is dark sentence case; what is
   typed is dark and bold, while the example text is grey italic. */
.fld label{font-size:14px;font-weight:700;color:var(--ink);line-height:1.3}
.fld label .req{color:var(--sun-deep)}
.fld label .opt,.fld label .fld-how{font-weight:500;font-size:12.5px;color:var(--muted);margin-left:2px}
.qc-fields input:where(:not([type=checkbox],[type=radio])),.qc-fields textarea,.qc-select{color:var(--ink);font-weight:600;background-color:#fff;border-color:#BFD3C9}
.qc-fields input::placeholder,.qc-fields textarea::placeholder{color:#8DA39A;font-weight:400;font-style:italic;opacity:1}
/* anything the visitor fills in or picks has a dotted edge; cards and
   panels keep solid ones — the border alone says "this one is yours" */
.qc-fields input:where(:not([type=checkbox],[type=radio])),.qc-fields textarea,.pick-btn,.room-row .xstep{border-width:2px;border-style:dotted;border-color:#9FBDB1}
.qc-fields input:where(:not([type=checkbox],[type=radio])):focus,.qc-fields textarea:focus,.pick-btn:focus-visible,.pick.open .pick-btn{border-style:solid;border-width:2px}
.qc-req-note{font-size:12px;color:var(--muted);font-weight:600}
/* “?” beside a label — explains the field on hover, focus or tap */
.fld-help{position:relative;display:inline-flex;vertical-align:middle;margin-left:2px}
.help-btn{width:17px;height:17px;padding:0;display:flex;align-items:center;justify-content:center;border:1.5px solid var(--line);border-radius:50%;background:#fff;color:var(--muted);font-family:var(--body);font-size:11px;font-weight:800;line-height:1;cursor:help;transition:border-color .12s,color .12s}
.help-btn:hover,.help-btn:focus-visible{border-color:var(--euca);color:var(--euca)}
.help-tip{position:absolute;bottom:calc(100% + 9px);left:-16px;width:min(230px,60vw);background:var(--ink);color:#fff;border-radius:10px;padding:9px 11px;font-size:12px;font-weight:600;line-height:1.45;text-transform:none;letter-spacing:0;box-shadow:0 8px 24px rgba(11,47,41,.22);opacity:0;visibility:hidden;transform:translateY(4px);transition:opacity .14s,transform .14s;pointer-events:none;z-index:5}
.help-tip::after{content:"";position:absolute;top:100%;left:20px;border:5px solid transparent;border-top-color:var(--ink)}
.fld-help:hover .help-tip,.help-btn:focus .help-tip,.help-btn:focus+.help-tip{opacity:1;visibility:visible;transform:translateY(0)}
.qc-fields input[type=text],.qc-fields input[type=tel],.qc-fields input[type=email]{min-height:50px;border-radius:14px}
/* tick boxes / radios sit this one out — they get a focus ring on their row instead */
.qc-fields input:where(:not([type=checkbox],[type=radio])):focus{outline:none;border-color:var(--euca);box-shadow:0 0 0 3px rgba(14,59,51,.12)}
.qc-fields input:where(:not([type=checkbox],[type=radio])).err{border-color:#DC2626;box-shadow:0 0 0 3px rgba(220,38,38,.10)}
.fld .err-msg{display:none;font-size:12.5px;color:#B91C1C;font-weight:600}
.fld.has-err .err-msg{display:block}
.loc-row{display:flex;gap:8px}
.loc-row input{flex:1;min-width:0}
.locate-btn{flex:none;border:1.5px solid var(--line);background:var(--foam);color:var(--euca);font-family:var(--body);font-weight:700;font-size:13px;border-radius:14px;padding:0 14px;cursor:pointer;white-space:nowrap;min-height:50px;transition:all .15s}
.locate-btn:hover{border-color:var(--euca)}
.locate-btn:disabled{opacity:.6;cursor:wait}
.locate-btn.ok{background:#2EAE6E1a;border-color:#2EAE6E;color:#1d7a4c}
.loc-hint{font-size:12px;color:var(--muted)}
.loc-hint.ok{color:#1d7a4c;font-weight:600}
.loc-hint.fail{color:#B45309;font-weight:600}
/* open by default — the summary reads as the field's label, not a toggle */
.fld-more summary{font-size:14px;font-weight:700;color:var(--ink);cursor:pointer;list-style:none;padding:2px 0}
.fld-more summary::-webkit-details-marker{display:none}
.fld-more summary .opt{font-weight:500;font-size:12.5px;color:var(--muted);margin-left:2px}
.fld-more input,.fld-more textarea{margin-top:8px;width:100%}
.qc-fields textarea{min-height:88px;border-radius:14px;resize:vertical;line-height:1.45}
.qc-fields textarea:focus{outline:none;border-color:var(--euca);box-shadow:0 0 0 3px rgba(14,59,51,.12)}
@media(max-width:420px){.locate-btn{font-size:12px;padding:0 10px}}

/* ================= responsive layout system =================
   Breakpoints: ≤420 small phone · ≤760 phone · ≤900 tablet portrait ·
   ≤1020 tablet landscape / small laptop · >1020 desktop.               */

/* split hero (service-city + contact pages): 2 columns → stacked */
.hero-split{display:grid;grid-template-columns:1.05fr .95fr;gap:44px;padding-top:56px;padding-bottom:64px;align-items:start}
@media(max-width:900px){.hero-split{grid-template-columns:1fr;gap:28px;padding-top:36px;padding-bottom:44px}}

/* card grids: 4 → 3 → 2 → 1 with even steps */
@media(max-width:1020px){.svc-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:860px){.svc-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.svc-grid{grid-template-columns:1fr}}

/* inclusion checklist on service pages: 3 → 2 → 1 */
.steps-3{grid-template-columns:repeat(3,1fr)}
@media(max-width:1020px){.steps-3{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.steps-3{grid-template-columns:1fr}}

/* reviews: 3 → 2 (tablet) → 1 */
@media(max-width:1020px){.rev-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:680px){.rev-grid{grid-template-columns:minmax(0,1fr)}}

/* home steps: 3 → 1, roomier cards on tablet */
@media(max-width:1020px) and (min-width:821px){.steps{gap:14px}.step{padding:22px}}

/* ---- gallery filter: modern, touch-friendly select fields ---- */
.gallery-filters{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:26px}
.gf-field{display:flex;flex-direction:column;gap:6px;flex:1;min-width:180px}
.gf-label{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
.gallery-filters select{
  appearance:none;-webkit-appearance:none;
  width:100%;min-height:50px;padding:0 42px 0 16px;
  border-radius:14px;border:1.5px solid var(--line);background:#fff;
  font-family:var(--body);font-weight:600;font-size:16px;color:var(--euca);cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%230E3B33' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;
  transition:border-color .15s,box-shadow .15s}
.gallery-filters select:focus{outline:none;border-color:var(--euca);box-shadow:0 0 0 3px rgba(14,59,51,.12)}
/* forms & filters go full-width on phones */
@media(max-width:640px){
  .gallery-filters{gap:10px}
  .gf-field{flex:1 1 calc(50% - 5px);min-width:0}
  .blog-search{max-width:none!important}
}

/* small-phone rhythm */
@media(max-width:480px){
  .final .btns{flex-direction:column}
  .final .btns .btn{width:100%}
  .trust-row{gap:8px}
  .chip{font-size:12.5px;padding:7px 12px}
}
@media(max-width:420px){.wrap{padding:0 16px}}

/* comfier stacked hero + section rhythm on small screens */
@media(max-width:760px){
  .quote-card{margin-top:6px}
  .sub-chips a{padding:9px 14px}
  .foot{gap:20px}
  .foot > div{min-width:46%}
  .hero-stats{width:100%;justify-content:space-between}
}

/* ================= header, drawer & footer (moved out of base.html) =================
   Everything here used to be inlined in the page head; only the colour tokens
   still are. Order matters: these override the header rules above. */
.brand-powered{display:block;font-family:var(--body);font-weight:500;font-size:9.5px;color:var(--muted);letter-spacing:.02em;margin-top:3px}
.quick-answer{background:var(--foam);border:1px solid var(--line);border-left:4px solid var(--sun);border-radius:14px;padding:16px 20px;margin:18px 0 8px;font-size:16.5px}
.toc{background:#fff;border:1px solid var(--line);border-radius:14px;padding:14px 20px;margin:14px 0;font-size:14.5px}
.toc strong{color:var(--euca)}
.toc a{color:var(--euca);text-decoration:none;font-weight:600;display:inline-block;margin-right:14px}
.ba-layer picture{display:block;width:100%;height:100%}
.ba-layer img{width:100%;height:100%;object-fit:cover;display:block}
.logo{flex:none}
.nav-links a{white-space:nowrap}
.nav-links{gap:18px}
.phone{white-space:nowrap}
.nav{gap:10px}
.nav-cta{flex:none}
/* header steps down gracefully: phone number → compact type → menu-only */
@media(max-width:1280px){.phone{display:none}}
@media(max-width:1120px){
  .nav-links{gap:10px;font-size:13.5px}
  .logo-au{font-size:21px}
  .nav-cta .btn{padding:11px 16px;font-size:14px}
}
@media(max-width:900px){
  /* tablet: logo — spacer — CTA — hamburger (grouped at the right) */
  .nav-cta{order:2;margin-left:auto}
  .menu-btn{order:3}
}
@media(max-width:760px){
  .logo{gap:8px}
  .logo-mark{width:32px;height:32px}
  .brand-powered{font-size:9px;margin-top:2px}
  /* the sticky call bar + menu carry the CTAs on phones — drop the header button */
  .nav-cta{display:none}
  .nav{gap:6px}
  .m-nav,.m-nav::before{top:62px}
}
/* brand kit: <480px shows the 30px mark + "AU." only */
@media(max-width:480px){
  .logo-mark{width:30px;height:30px}
  header .logo-sub{display:none}
}
@media(max-width:360px){.brand-powered{display:none}}
/* city switcher at the top of the drawer */
.m-cities{padding:14px 4px 4px;border-bottom:1px solid var(--line);margin-bottom:6px}
.m-cities .lbl{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin-bottom:10px}
.m-cities .chips{display:flex;gap:8px;flex-wrap:wrap;padding-bottom:14px}
.m-cities a{display:inline-flex;align-items:center;min-height:40px;border:1.5px solid var(--line);border-radius:999px;padding:6px 16px;font-size:14.5px;font-weight:600;color:var(--euca);text-decoration:none}
.m-cities a.on{background:var(--euca);color:#fff;border-color:var(--euca)}
/* call + estimate at the foot of the drawer */
.m-actions{display:flex;flex-direction:column;gap:10px;padding:18px 4px 4px;margin-top:6px;border-top:1px solid var(--line)}
.m-actions .btn{width:100%}
/* footer: stacked text links get padding so each tap target clears 24px (WCAG 2.5.8) */
.foot-links{list-style:none;margin-top:3px}
.foot-links a{display:inline-block;padding:5px 0;line-height:1.2}
.foot-cities{display:flex;flex-wrap:wrap;gap:0 10px;margin-top:3px}
.foot-cities a{padding:5px 0;line-height:1.2}
.foot-social{display:flex;gap:8px;margin-top:12px}
.foot-social a{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:50%;border:1px solid var(--line);color:var(--euca)}
.foot-social a:hover{background:var(--foam);border-color:var(--euca)}
.foot-social svg{width:18px;height:18px}
@media(max-width:420px){.foot > div{min-width:100%}}
/* ================= utilities =================
   Replace the one-off inline styles the templates used to carry. */
.sec-flush{padding-top:0}
.sec-tight{padding-top:24px}
.sec-intro{padding:36px 0 0}
.sec-none{padding:0}
.link{color:var(--euca);font-weight:700}
/* ================= forms: sending & error states ================= */
.btn.busy,.btn:disabled{opacity:.65;cursor:progress;transform:none;box-shadow:none}
.form-err{display:none;background:#FEF2F2;border:1.5px solid #FCA5A5;color:#991B1B;border-radius:12px;padding:11px 14px;font-size:14px;font-weight:600;line-height:1.45}
.form-err.show{display:block}
.form-err a{color:inherit;font-weight:800}
.faq .faq-a{padding:0 22px 18px;color:var(--muted);font-size:15.5px}

/* ================= ad landing pages: section blocks =================
   Admin-arranged sections (funnels.LandingBlock). Each is a band; two plain
   bands in a row share one gap rather than doubling it. */
.lp-deadline{background:#FFF6E3;border-color:#F5D48A;color:#8A5A00}
/* the builder form as a wizard */
.qc-scrim{display:none}
.bdock-sum{display:none}

/* ---------- /quote/ survey — one short slide at a time ----------
   A single card, a footer bar with Back and Next, a thin progress line on
   top. Labels read as questions, so they sit larger and in sentence case
   rather than the estimate card's small caps. */
.qs-hero .wrap{text-align:center}
.qs-intro{max-width:720px;margin:0 auto 30px}
.qs-intro h1{font-size:clamp(32px,4.6vw,50px);margin-bottom:14px}
.qs-intro .sub{margin:0 auto}
.qs-under{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 22px;margin:18px auto 0;font-size:13.5px;font-weight:600;color:var(--muted)}
.qs{position:relative;max-width:650px;margin:0 auto;background:#fff;border:1.5px dashed rgba(14,59,51,.3);border-radius:28px;box-shadow:var(--shadow);text-align:left;overflow:hidden;scroll-margin-top:84px}
.qs-progress{height:5px;background:var(--foam)}
.qs-progress__fill{display:block;height:100%;background:var(--sun);border-radius:0 4px 4px 0;transition:width .35s ease}
.qs-form{padding:26px 28px 20px;display:block}
.qs-live{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.qs-slide{display:flex;flex-direction:column;gap:18px;padding:0}   /* a <section>, but not a page band */
.qs-slide[hidden]{display:none}
.qs-fld{gap:8px;min-width:0}
.qs-fld label,.qs-fld legend{font-family:var(--body);font-size:16.5px;font-weight:700;letter-spacing:0;text-transform:none;color:var(--euca);line-height:1.35}
.qs-fld legend{padding:0;margin-bottom:8px}
.qs-fld .req{color:var(--sun-deep)}
.qs-fld input:where(:not([type=checkbox])),.qs-fld select{width:100%;padding:13px 16px;border-radius:16px;border:1.5px solid var(--line);background:#fff;font-family:var(--body);font-size:16px;color:var(--ink);transition:border-color .12s,box-shadow .12s}
.qs-fld input::placeholder{color:#8DA39A;font-weight:400}
.qs-fld input:focus,.qs-fld select:focus{outline:none;border-color:var(--euca);box-shadow:0 0 0 3px rgba(14,59,51,.12)}
.qs-fld input.err,.qs-fld select.err{border-color:#DC2626}
.qs-fld select{appearance:none;-webkit-appearance:none;padding-right:44px;cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230E3B33' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center;background-size:18px}
.qs-fld select:invalid,.qs-fld select option[value=""]{color:#8DA39A}
.qs-fld select option{color:var(--ink)}
.qs-icon-wrap{position:relative;display:block}
.qs-icon{position:absolute;left:15px;top:50%;width:18px;height:18px;transform:translateY(-50%);color:#8DA39A;pointer-events:none}
.qs-icon-wrap input{padding-left:42px!important}
.qs-hint{font-size:13px;color:var(--muted);font-weight:600}
.qs-eyebrow{font-size:12.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--sun-text)}
.qs-fld .err-msg{display:none;font-size:13px;color:#B91C1C;font-weight:600}
.qs-fld.has-err .err-msg{display:block}
.qs-group{border:0;padding:0;margin:0;min-width:0}
.qs-choices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
.qs-choice{display:flex;align-items:center;gap:10px;min-height:50px;padding:10px 13px;border:1.5px solid var(--line);border-radius:14px;background:#fff;cursor:pointer;user-select:none;transition:border-color .12s,background .12s}
.qs-choice:hover{border-color:var(--euca)}
.qs-choice input{flex:none;width:18px;height:18px;margin:0;accent-color:var(--euca);cursor:pointer}
.qs-choice span{font-size:14.5px;font-weight:600;color:var(--ink);line-height:1.3}
.qs-choice em{margin-left:auto;font-style:normal;font-size:12.5px;font-weight:700;color:var(--sun-text);white-space:nowrap}
.qs-choice:has(input:checked){background:var(--foam);border-color:var(--euca)}
.qs-choice:has(input:focus-visible){outline:3px solid var(--sun-deep);outline-offset:2px}
.qs-choice--none{grid-column:1 / -1}
.qs-group.has-err .qs-choices{border-radius:16px;box-shadow:0 0 0 2px #DC262633}
.qs .consent{margin-top:2px}
.qs .form-err{margin-top:16px}
.qs .form-err.show{display:block}
.qs-foot{position:sticky;bottom:0;z-index:2;display:flex;align-items:stretch;justify-content:space-between;min-height:56px;background:var(--foam);border-top:1px solid var(--line)}
.qs-prev,.qs-next{display:inline-flex;align-items:center;gap:8px;border:0;padding:0 24px;font-family:var(--body);font-size:14px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;cursor:pointer;transition:background .15s,opacity .15s}
.qs-prev{background:transparent;color:var(--euca);opacity:.75}
.qs-prev:hover{opacity:1}
.qs-prev[hidden]{display:none}
.qs-next{margin-left:auto;background:var(--euca);color:#fff;min-width:130px;justify-content:center}
.qs-next:hover{background:var(--euca-2)}
.qs-next--submit{background:var(--sun);color:var(--euca)}
.qs-next--submit:hover{background:var(--sun-deep)}
.qs-next:disabled,.qs-prev:disabled{opacity:.6;cursor:wait}
.qs-prev svg,.qs-next svg{width:18px;height:18px;flex:none}
.qs-prev:focus-visible,.qs-next:focus-visible{outline:3px solid var(--sun-deep);outline-offset:-3px}
.qs-sec-head{max-width:720px;margin-left:auto;margin-right:auto;text-align:center}
.qs-sec-head p{color:var(--muted);margin-top:10px}
@media(max-width:760px){
  .qs-hero .wrap{padding-top:34px;padding-bottom:36px}
  .qs{border-radius:22px}
  .qs-form{padding:20px 18px 16px}
  .qs-choices{grid-template-columns:1fr}
  .qs-fld label,.qs-fld legend{font-size:15.5px}
  /* the footer bar is arrow-only on a phone — except when it's the Submit */
  .qs-prev span,.qs-next:not(.qs-next--submit) span{position:absolute;left:-9999px}
  .qs-prev,.qs-next{padding:0 22px}
  .qs-next{min-width:74px}
  .qs-next--submit{padding:0 26px}
}

/* ---------- /quote/thanks/ ---------- */
.qt-hero .wrap{text-align:center;padding-bottom:36px}
.qt-title{font-size:clamp(52px,11vw,104px);line-height:1;margin-bottom:22px}
.qt-sub{font-family:var(--display);font-size:clamp(20px,2.6vw,26px);font-weight:700;color:var(--ink)}
.qt-ref{margin-top:10px;font-size:14.5px;font-weight:600;color:var(--muted)}
.qt-ref b{color:var(--euca)}
.qt-next{display:inline-flex;align-items:flex-start;gap:10px;margin-top:38px;font-weight:700;color:var(--euca);font-size:15px}
.qt-next svg{width:22px;height:54px;stroke:var(--euca)}
.qt-band{background:var(--foam);padding:64px 0 70px;text-align:center}
.qt-band h2{font-size:clamp(26px,3.4vw,38px);margin-bottom:14px}
.qt-band p{max-width:60ch;margin:0 auto;color:var(--muted);font-size:17px}
.qt-email{margin-top:14px!important;font-size:15px!important}
.qt-email b{color:var(--ink)}
.qt-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:28px}

/* ---- landing pages: the chips under the headline ----
   Each chip carries an inline SVG (no icon font). */
.chip-ic{flex:none;width:15px;height:15px;color:currentColor}
.chip-star{color:var(--sun-deep,#F59E0B)}
.chip-offer{background:var(--foam);border-color:transparent;color:var(--euca)}
.lp-trust{margin:0 0 26px}
.lp-trust:last-child{margin-bottom:0}

/* ================= /lp/ funnel pages =================
   The page is the form. The admin picks where the copy sits (above the
   card, beside it, or nowhere), how wide the card may grow, and whether the
   live summary shows — a sticky card beside the form on desktop; on phones
   the booking dock and the pull-up sheet carry it, so the aside hides.
   Breakpoints match the site: ≤760 phone (the sheet), ≤900 tablet. */
.fn{padding:0;background:linear-gradient(180deg,var(--foam) 0%,#fff 100%)}  /* the grid owns the band's padding, not section{} */
.fn-grid{display:grid;gap:28px 36px;padding-top:44px;padding-bottom:72px;align-items:start;justify-content:center}
.fn-w-narrow{--fn-w:520px}.fn-w-regular{--fn-w:620px}.fn-w-wide{--fn-w:760px}
.fn-copy{grid-area:copy;min-width:0}
.fn-main{grid-area:main;min-width:0;width:100%}
.fn-aside{grid-area:aside;position:sticky;top:84px;min-width:0}
/* the copy above, then the form on the left and the summary on its right */
.fn-copy-above .fn-grid{grid-template-columns:minmax(0,var(--fn-w));grid-template-areas:"copy" "main"}
.fn-copy-none .fn-grid{grid-template-columns:minmax(0,var(--fn-w));grid-template-areas:"main"}
.fn-has-aside.fn-copy-above .fn-grid{grid-template-columns:minmax(0,var(--fn-w)) 320px;grid-template-areas:"copy copy" "main aside"}
.fn-has-aside.fn-copy-none .fn-grid{grid-template-columns:minmax(0,var(--fn-w)) 320px;grid-template-areas:"main aside"}
/* copy below: the form on top, the headline's line and chips under it */
.fn-copy-below .fn-grid{grid-template-columns:minmax(0,var(--fn-w));grid-template-areas:"main" "copy"}
.fn-has-aside.fn-copy-below .fn-grid{grid-template-columns:minmax(0,var(--fn-w)) 320px;grid-template-areas:"main aside" "copy copy"}
.fn-copy-above .fn-copy,.fn-copy-below .fn-copy{max-width:760px;justify-self:center;width:100%}
.qc-head .qc-h1{color:#fff;font-size:19px;margin:0}
.fn-align-left .fn-copy{justify-self:start}
.fn-align-center .fn-copy{text-align:center}
.fn-align-center .fn-copy .sub{margin-left:auto;margin-right:auto}
.fn-align-center .fn-copy .trust-row{justify-content:center}
.fn-copy .sub{margin-bottom:18px}
.fn-copy .lp-trust{margin-bottom:0}
/* the card's own price box is for phones and tablets; a desktop with the
   aside reads the summary there instead */
@media(min-width:901px){.fn-has-aside .fn-main .qc-price{display:none}}
/* the screens: everything on one stacks with an even gap, the way the
   estimate card's own steps do */
.fn-pane{display:flex;flex-direction:column;gap:14px;padding:0}  /* a <section>, but not a page band */
.fn-pane>:empty,.fn-pane>[hidden]{display:none}
.fn-pane .xhead,.fn-pane .xtras-intro,.fn-pane .pet-q,.fn-pane .stepx-ctx,.fn-pane .inc-banner{margin:0}
.fn-pane .qc-req-note{margin-bottom:-6px}
.fn-group{display:flex;flex-direction:column;gap:14px}
.fn-group-title{font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
/* the place step already wears the screen's heading — the rooms partial's
   own section labels would only say it twice */
.fn-pane-property>.qc-label{display:none}
.fn-pane[hidden]{display:none}
@media (prefers-reduced-motion:no-preference){.fn-wizard .fn-pane{animation:qstep-in .18s ease}}
.fn-pane-head{margin:0}
.fn-pane-title{font-family:var(--display);font-size:20px;font-weight:800;color:var(--euca);line-height:1.15;letter-spacing:-.01em}
.fn-final{margin-top:4px}
.fn-final[hidden]{display:none}
.fn-live{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.fn-bar{height:6px;border-radius:999px;background:var(--line);margin:0 0 20px;overflow:hidden}
.fn-bar__fill{display:block;height:100%;width:0;background:var(--euca);border-radius:999px;transition:width .3s ease}
/* five or more steps: only the current step keeps its label */
.qsteps.many .qsteps-t{display:none}
.qsteps.many button.on .qsteps-t{display:inline}
.qsteps button[hidden]{display:none}
/* an offer on the page: the full price struck through beside the amount
   to pay, and the offer's own row in the breakdown */
.qc-was{display:inline-block;margin-right:8px;font-family:var(--body);font-size:16px;font-weight:600;color:var(--muted);text-decoration:line-through;vertical-align:baseline}
.qc-was[hidden]{display:none}
.bdock-was{font-family:var(--body);font-size:13px;font-weight:600;color:var(--muted);text-decoration:line-through;margin-right:5px}
.qc-row.is-offer dt,.qc-row.is-offer dd{color:#1d7a4c}
.qc-row.is-offer dt{font-weight:700}
/* the summary beside the form: one soft panel, nothing around it */
.fn-sum{margin-top:0;padding:18px 20px 20px}
.fn-sum .qc-sum__title{font-size:19px}
.fn-wait{font-size:13px;font-weight:600;color:var(--muted)}
.fn-wait[hidden]{display:none}
/* the custom questions: the site's own widgets — choice buttons, tick
   chips, the in-flow dropdown, the room-row stepper */
.ff-q[hidden]{display:none}
.ff-q .seg,.ff-q .extras{margin-top:2px}
.seg button small{display:block;font-size:11px;font-weight:700;opacity:.8;line-height:1.2;margin-top:1px}
.extras label small{font-weight:700;color:var(--euca)}
.ff-hint{font-size:12.5px;color:var(--muted);margin-top:2px}
.ff-per{font-size:12.5px;font-weight:600;color:var(--muted);margin-left:6px}
.ff-q .room-row{padding-right:9px}
.ff-q.has-err .room-row,.ff-q.has-err .seg button,.ff-q.has-err .extras label,.ff-q.has-err .pick-btn{border-color:#DC2626}
.ff-q .err-msg{display:block;font-size:12.5px;color:#B91C1C;font-weight:600}
@media(max-width:900px){
  .fn-copy-above .fn-grid,.fn-has-aside.fn-copy-above .fn-grid{grid-template-columns:minmax(0,1fr);grid-template-areas:"copy" "main";gap:22px;padding-top:34px;padding-bottom:48px}
  .fn-copy-below .fn-grid,.fn-has-aside.fn-copy-below .fn-grid{grid-template-columns:minmax(0,1fr);grid-template-areas:"main" "copy";gap:22px;padding-top:34px;padding-bottom:48px}
  .fn-copy-none .fn-grid,.fn-has-aside.fn-copy-none .fn-grid{grid-template-columns:minmax(0,1fr);grid-template-areas:"main";gap:22px;padding-top:34px;padding-bottom:48px}
  .fn-aside{display:none}
  .fn-copy .sub{margin-bottom:14px}
}
/* phones: a card that runs with the dock (the estimate card, the funnel
   form — class qc-flow) hands its button to the dock: Continue, then the
   booking. The card's own Continue steps aside once the dock is up, and a
   tap on the dock's price pulls the summary panel up over the page — the
   form itself stays inline, nothing takes over the screen. On a generic
   page the dock only comes up with the first tap on the form, so until
   then the card keeps its own button. */
@media(max-width:760px){
  body.dock-on .qc-flow .qstep-nav .qc-cta{display:none}
  body.dock-on .qc-flow .qstep-nav .qc-back{flex:1;padding:13px 20px}
  body.dock-on .qc-flow .qstep-nav:has(.qc-back[hidden]){display:none}
  .qc-flow .qc-price{position:fixed;left:0;right:0;bottom:var(--dock-h,84px);z-index:74;margin:0;border-radius:24px 24px 0 0;background:#fff;box-shadow:0 -14px 44px rgba(14,59,51,.2);padding:18px 20px 18px;max-height:68vh;overflow-y:auto;overscroll-behavior:contain;transform:translate3d(0,100%,0);backface-visibility:hidden;visibility:hidden;transition:transform .3s cubic-bezier(.32,.72,.28,1),visibility .3s}
  .qc-flow .qc-price::before{content:"";position:absolute;top:7px;left:50%;width:40px;height:4px;margin-left:-20px;border-radius:2px;background:var(--line)}
  html.sum-open .qc-flow .qc-price{transform:translate3d(0,0,0);visibility:visible}
  .qc-flow .qc-sum__head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:6px 0 14px;padding-bottom:12px;border-bottom:1px solid var(--line)}
  .qc-flow .qc-sum__title{font-size:20px}
  .qc-flow .qc-sum__close{flex:none;display:flex;align-items:center;justify-content:center;width:44px;height:44px;margin:-8px -12px -8px 0;padding:0;border:0;border-radius:50%;background:transparent;color:var(--muted);cursor:pointer}
  .qc-flow .qc-sum__close svg{width:18px;height:18px}
  .qc-flow .qc-lines{margin:0 0 14px;padding:0 0 14px;border-bottom:1px solid var(--line)}
  .qc-flow .qc-row{grid-template-columns:104px auto minmax(0,1fr);column-gap:12px;font-size:16px}
  .qc-flow .qc-total{align-items:center;padding:2px 0}
  .qc-flow .qc-total .lab{font-size:15px;font-weight:700;letter-spacing:0;text-transform:none;color:var(--ink)}
  .qc-flow .qc-total__note{display:block;font-size:12.5px;line-height:1.3;max-width:170px;margin-top:2px}
  .qc-flow .qc-price .amt{font-size:30px;white-space:nowrap}
  .qc-flow .qc-price .amt small{font-size:14px}
  .qc-flow .qc-scrim{display:block;position:fixed;left:0;right:0;top:0;bottom:var(--dock-h,84px);z-index:73;background:rgba(6,20,17,.42);opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s}
  html.sum-open .qc-flow .qc-scrim{opacity:1;visibility:visible}
  @media (prefers-reduced-motion:reduce){.qc-flow .qc-price,.qc-flow .qc-scrim{transition:none}}
  .bdock.bdock-has-sum{z-index:76}
  .bdock.bdock-has-sum .bdock-info[data-has-sum]{cursor:pointer;gap:3px}
  .bdock.bdock-has-sum .bdock-info[data-has-sum] .bdock-gst{display:none}
  .bdock.bdock-has-sum .bdock-info[data-has-sum] .bdock-sum{display:inline-flex;align-self:flex-start;align-items:center;gap:5px;margin-top:2px;padding:5px 10px 5px 8px;border-radius:999px;background:var(--foam);border:1.5px solid rgba(14,59,51,.25);color:var(--euca);font-size:12px;font-weight:800;line-height:1;white-space:nowrap;transition:background .2s,border-color .2s,color .2s}
  .bdock.bdock-has-sum .bdock-info[data-has-sum] .bdock-sum svg{width:14px;height:14px;transition:transform .25s}
  html.sum-open .bdock.bdock-has-sum .bdock-info[data-has-sum] .bdock-sum{background:var(--euca);border-color:var(--euca);color:#fff}
  html.sum-open .bdock.bdock-has-sum .bdock-info[data-has-sum] .bdock-sum svg{transform:rotate(180deg)}
  .bdock.bdock-has-sum .bdock-cta{min-width:44%}
  .fn .wrap.fn-grid{padding-top:18px;padding-bottom:40px;gap:18px}  /* over the ≤900 rule, aside or not */
  .fn-copy h1{font-size:clamp(28px,7.4vw,36px)}
  .fn-copy .sub{font-size:16.5px}
  .fn-pane-title{font-size:18px}
    /* in the sheet the screen title sits under the sticky stepper */
}

/* ---------- /cleaning-cost-calculator/ ----------
   Two forms: the calculator (inputs left, live estimate right) and the
   regular-service booking below it. Prefixed .cc so nothing here leaks
   into the estimate card or the quote survey. */
.cc-hero .wrap{padding-bottom:28px}
.cc-intro{max-width:760px}
.cc-intro h1{font-size:clamp(32px,4.6vw,52px);margin-bottom:14px}
.cc-intro .sub{margin-bottom:18px}
.cc-under{display:flex;flex-wrap:wrap;gap:8px 22px;font-size:13.5px;font-weight:600;color:var(--muted)}
.cc-under span{display:inline-flex;align-items:center;gap:6px}
.cc-under .ico-svg{width:15px;height:15px;color:#2EAE6E}
.cc{scroll-margin-top:84px}
.cc-form{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:28px;align-items:start}
.cc-main{display:flex;flex-direction:column;gap:22px}
.cc-step{background:#fff;border:1px solid var(--line);border-radius:22px;padding:22px 24px 24px;box-shadow:0 4px 18px rgba(14,59,51,.05)}
.cc-step__head{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.cc-step__head h2{font-size:20px;margin:0}
.cc-step__n{flex:none;width:30px;height:30px;border-radius:50%;background:var(--sun);color:var(--euca);font-family:var(--display);font-weight:800;font-size:14px;display:inline-flex;align-items:center;justify-content:center}
.cc-step__opt{margin-left:auto;font-size:12.5px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.cc-fld label{font-size:14.5px}
.cc-fld .opt,.cc-fld .fld-how{font-weight:500;font-size:12.5px;color:var(--muted)}
/* premises tiles */
.cc-tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.cc-tile{position:relative;display:flex;flex-direction:column;gap:3px;padding:14px 14px 13px;border:2px dotted #9FBDB1;border-radius:16px;background:#fff;cursor:pointer;user-select:none;transition:border-color .12s,background .12s,transform .12s}
.cc-tile:hover{border-color:var(--euca)}
.cc-tile input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.cc-tile__ico{font-size:24px;line-height:1;margin-bottom:4px}
.cc-tile__name{font-weight:700;font-size:15px;color:var(--ink);line-height:1.25}
.cc-tile__sub{font-size:12px;color:var(--muted);line-height:1.35}
.cc-tile:has(input:checked){border-style:solid;border-color:var(--euca);background:var(--foam)}
.cc-tile:has(input:checked)::after{content:"";position:absolute;top:10px;right:10px;width:18px;height:18px;border-radius:50%;background:var(--euca) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E") no-repeat center/11px}
.cc-tile:has(input:focus-visible){outline:3px solid var(--sun-deep);outline-offset:2px}
/* floor area */
.cc-area{position:relative;max-width:260px}
.cc-area input{width:100%;min-height:52px;padding:12px 52px 12px 16px;border:2px dotted #9FBDB1;border-radius:14px;font-family:var(--display);font-weight:700;font-size:22px;color:var(--ink);background:#fff;-moz-appearance:textfield}
.cc-area input::-webkit-outer-spin-button,.cc-area input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.cc-area input:focus{outline:none;border-style:solid;border-color:var(--euca);box-shadow:0 0 0 3px rgba(14,59,51,.12)}
.cc-area input::placeholder{font-family:var(--body);font-weight:400;font-size:16px;color:#8DA39A;font-style:italic}
.cc-area__unit{position:absolute;right:16px;top:50%;transform:translateY(-50%);font-weight:700;color:var(--muted)}
.cc-presets{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.cc-preset{border:1.5px solid var(--line);background:#fff;border-radius:999px;padding:7px 13px;font-family:var(--body);font-size:13px;font-weight:600;color:var(--euca);cursor:pointer;transition:all .12s}
.cc-preset b{font-weight:800}
.cc-preset:hover{border-color:var(--euca)}
.cc-preset.on{background:var(--euca);border-color:var(--euca);color:#fff}
.cc-hint{font-size:13px;color:var(--muted);font-weight:500;margin-top:6px;min-height:1em}
.cc-two{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.cc-two .qc-select{border-width:2px;border-style:dotted;border-color:#9FBDB1}
.cc-two .qc-select:focus-visible{border-style:solid}
/* add-ons */
.cc-addons{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.cc-addon{display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"box body price" "box units units";column-gap:11px;row-gap:8px;align-items:center;padding:11px 13px;border:1.5px solid var(--line);border-radius:14px;background:#fff;cursor:pointer;user-select:none;transition:border-color .12s,background .12s}
.cc-addon:hover{border-color:var(--euca)}
.cc-addon input{grid-area:box;width:18px;height:18px;margin:0;accent-color:var(--euca);cursor:pointer;align-self:start;margin-top:2px}
.cc-addon__body{grid-area:body;display:flex;flex-direction:column;gap:2px;min-width:0}
.cc-addon__name{font-size:14.5px;font-weight:700;color:var(--ink);line-height:1.3}
.cc-addon__once{font-style:normal;white-space:nowrap;font-size:10.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--sun-text);background:#FFF3D6;border-radius:999px;padding:1px 7px;margin-left:4px;vertical-align:middle}
.cc-addon__sub{font-size:12.5px;color:var(--muted);line-height:1.35}
.cc-addon__price{grid-area:price;font-size:12.5px;font-weight:800;color:var(--sun-text);white-space:nowrap;align-self:start;margin-top:2px}
.cc-addon:has(input:checked){background:var(--foam);border-color:var(--euca)}
.cc-addon:has(input:focus-visible){outline:3px solid var(--sun-deep);outline-offset:2px}
.cc-units{grid-area:units;display:inline-flex;align-items:center;gap:6px}
.cc-units[hidden]{display:none}
.cc-units__btn{width:30px;height:30px;border-radius:50%;border:1.5px solid var(--euca);background:#fff;color:var(--euca);font-size:18px;font-weight:700;line-height:1;cursor:pointer;display:inline-flex;align-items:center;justify-content:center}
.cc-units__btn:hover{background:var(--euca);color:#fff}
.cc-units__n{min-width:22px;text-align:center;font-weight:800;color:var(--ink)}
.cc-units__lab{font-size:12.5px;color:var(--muted);font-weight:600}
/* the estimate */
.cc-side{position:sticky;top:86px;display:flex;flex-direction:column;gap:14px}
.cc-result{background:var(--euca);color:#fff;border-radius:22px;padding:22px 22px 20px;box-shadow:var(--shadow)}
.cc-result__lab{font-size:12.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#CFE4DA}
.cc-result__lab small{font-size:11px;letter-spacing:0;text-transform:none;font-weight:600;opacity:.85;margin-left:6px}
.cc-result__amt{font-family:var(--display);font-weight:800;font-size:clamp(34px,4vw,44px);line-height:1.05;margin-top:8px;letter-spacing:-.01em}
.cc-result__per{font-size:14px;font-weight:600;color:#CFE4DA;margin-top:2px}
.cc-result__month{margin-top:14px;padding-top:14px;border-top:1px solid rgba(255,255,255,.18);font-size:15px;color:#CFE4DA}
.cc-result__month b{font-family:var(--display);font-size:24px;color:#fff;font-weight:800}
.cc-result__month small{font-size:12.5px;opacity:.85}
.cc-result__month[hidden],.cc-oneoff[hidden]{display:none}
.cc-lines{list-style:none;margin:14px 0 0;padding:12px 0 0;border-top:1px solid rgba(255,255,255,.18);display:flex;flex-direction:column;gap:6px;font-size:13px;color:#CFE4DA}
.cc-lines:empty{display:none}
.cc-lines li{padding-left:16px;position:relative}
.cc-lines li::before{content:"";position:absolute;left:2px;top:.6em;width:6px;height:6px;border-radius:50%;background:var(--sun)}
.cc-lines li.is-saving{color:#9EE2BF}
.cc-oneoff{margin-top:10px;font-size:13px;color:#CFE4DA}
.cc-oneoff b{color:#fff}
.cc-note{margin-top:14px;font-size:12.5px;line-height:1.45;color:#CFE4DA;opacity:.9}
.cc-cta{width:100%;margin-top:14px;font-size:16px;padding:15px 20px}
.cc-cta--call{margin-top:8px;border-color:rgba(255,255,255,.55);color:#fff}
.cc-cta--call:hover{background:rgba(255,255,255,.1)}
.cc-cta--call .ico-svg{width:16px;height:16px}
.cc-save{background:var(--foam);border-radius:18px;padding:16px 18px}
.cc-save__t{font-family:var(--display);font-weight:800;font-size:15.5px;color:var(--euca);margin-bottom:8px}
.cc-save ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:7px}
.cc-save li{font-size:13.5px;line-height:1.45;color:var(--ink);padding-left:18px;position:relative}
.cc-save li::before{content:"";position:absolute;left:0;top:.5em;width:9px;height:9px;border-radius:50%;background:var(--sun)}
.cc-save b{color:var(--euca)}
/* rate guide */
.cc-band{background:var(--sky);padding:64px 0}
.cc-table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:var(--radius)}
.cc-table{min-width:720px}
.cc-table th:not(:first-child),.cc-table td:not(:first-child){text-align:left;width:22%}
.cc-table td{vertical-align:top;font-size:14.5px}
.cc-table tr td:last-child{font-family:var(--body);font-weight:400;font-size:14.5px;color:var(--ink)}
.cc-table__space{font-weight:700;color:var(--euca)}
.cc-table__space small{display:block;font-weight:500;font-size:12px;color:var(--muted);margin-top:2px}
.cc-table__ico{margin-right:4px}
.cc-table__size{display:block;font-size:12px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;margin-bottom:5px}
.cc-table__price{display:block;font-family:var(--display);font-weight:700;color:var(--euca);font-size:16px;line-height:1.3}
.cc-table__price em{font-family:var(--body);font-style:normal;font-weight:600;font-size:12px;color:var(--muted);margin-left:4px}
/* booking */
.cc-book-sec{padding:72px 0}
.cc-book{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:44px;align-items:start}
.cc-book__intro h2{font-size:clamp(28px,3.4vw,40px);margin-bottom:12px}
.cc-book__intro p{color:var(--muted);font-size:17px}
.cc-summary{margin-top:20px;background:var(--foam);border-radius:16px;padding:14px 18px;display:flex;flex-direction:column;gap:3px}
.cc-summary[hidden]{display:none}
.cc-summary__l{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--sun-text)}
.cc-summary b{font-family:var(--display);font-size:24px;color:var(--euca);font-weight:800;line-height:1.1}
.cc-summary span:last-child{font-size:13.5px;color:var(--muted);font-weight:500}
.cc-book__points{list-style:none;margin:22px 0 0;padding:0;display:flex;flex-direction:column;gap:9px}
.cc-book__points li{display:flex;align-items:center;gap:9px;font-size:15px;font-weight:600;color:var(--ink)}
.cc-book__points .ico-svg{width:17px;height:17px;color:#2EAE6E;flex:none}
.cc-book__form{position:relative;background:#fff;border:1px solid var(--line);border-radius:24px;padding:26px 26px 24px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:14px}
.cc-book__grid{display:grid;grid-template-columns:1fr 1fr;gap:12px 14px}
.cc-book__form input:where(:not([type=checkbox],[type=radio],[type=hidden])),.cc-book__form textarea,.cc-book__form .qc-select{width:100%;min-height:50px;padding:12px 15px;border:2px dotted #9FBDB1;border-radius:14px;font-family:var(--body);font-size:15.5px;font-weight:600;color:var(--ink);background:#fff}
.cc-book__form .qc-select{padding-right:52px}
.cc-book__form textarea{min-height:88px;resize:vertical;line-height:1.45}
.cc-book__form input::placeholder,.cc-book__form textarea::placeholder{color:#8DA39A;font-weight:400;font-style:italic}
.cc-book__form input:where(:not([type=checkbox],[type=radio])):focus,.cc-book__form textarea:focus,.cc-book__form .qc-select:focus-visible{outline:none;border-style:solid;border-color:var(--euca);box-shadow:0 0 0 3px rgba(14,59,51,.12)}
.cc-book__form input.err,.cc-book__form select.err{border-color:#DC2626;border-style:solid}
.cc-book__form fieldset{border:0;padding:0;margin:0;min-width:0}
.cc-book__form legend{font-size:14px;font-weight:700;color:var(--ink);padding:0;margin-bottom:8px}
.cc-book__form legend .opt{font-weight:500;font-size:12.5px;color:var(--muted)}
.cc-chips{display:flex;flex-wrap:wrap;gap:8px}
.cc-chip{position:relative;display:inline-flex;align-items:center;min-height:40px;padding:8px 14px;border:1.5px solid var(--line);border-radius:999px;background:#fff;font-size:14px;font-weight:700;color:var(--euca);cursor:pointer;user-select:none;transition:all .12s}
.cc-chip input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.cc-chip:hover{border-color:var(--euca)}
.cc-chip:has(input:checked){background:var(--euca);border-color:var(--euca);color:#fff}
.cc-chip:has(input:focus-visible){outline:3px solid var(--sun-deep);outline-offset:2px}
.cc-chip em{font-style:normal;font-size:11.5px;font-weight:800;color:var(--sun-text);background:#FFF3D6;border-radius:999px;padding:2px 7px;margin-left:7px}
.cc-chip:has(input:checked) em{background:var(--sun);color:var(--euca)}
.cc-chips--wide .cc-chip{flex:1 1 auto;justify-content:center}
.cc-book__form .loc-row input{min-height:50px}
.cc-book__form .locate-btn{border-width:1.5px;border-style:solid}
.cc-submit{width:100%;font-size:17px;padding:16px;margin-top:4px}
.cc-book__fine{font-size:12.5px;color:var(--muted);text-align:center;margin:0}
.cc-book__form .form-err.show{display:block}
@media(max-width:980px){
  .cc-form{grid-template-columns:1fr}
  .cc-side{position:static}
  .cc-book{grid-template-columns:1fr;gap:26px}
  .cc-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:640px){
  .cc-step{padding:18px 16px 20px;border-radius:18px}
  .cc-two,.cc-addons,.cc-book__grid{grid-template-columns:1fr}
  .cc-book__form{padding:20px 16px 18px;border-radius:20px}
  .cc-band,.cc-book-sec{padding:52px 0}
  .cc-tile__sub{display:none}
}