/* Easigrass™ Somerset West – site.css v1 ("Measured lawn"). One file, no framework. */

/* ---------- 1. Tokens ---------- */
:root{
  --dusk:#373F51;--dusk-deep:#262C39;--dusk-rule:#4B5367;
  --sun:#FADC5B;--sun-press:#EBC53C;
  --lush:#88BF55;--lush-ink:#4A7A28;
  --paper:#F5F6F4;--white:#FFFFFF;--slate:#5F6677;--mist:#C3C8D1;--line:#D6DBD9;
  --error:#B42318;--wa:#25D366;--ink:#1D1D1D;
  --font:Urbanist,"Urbanist fb",system-ui,-apple-system,"Segoe UI",sans-serif;
  --maxw:1200px;--gut:16px;--section:64px;--k:2.2px;--bar-h:60px;--cg:12px;
  /* blade rule tiles (scratchpad/gen_blades.py, seamless) */
  --blades-front:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='96'%3E%3Cpath fill='%2388BF55' d='M0 96h3L26.9 52.0zM8 96h3L39.5 44.0zM16 96h3L44.6 49.0zM24 96h3L57.8 40.0zM32 96h3L75.1 24.0zM40 96h3L69.2 48.0zM48 96h3L81.3 41.0zM-32 96h3L1.3 41.0zM56 96h3L86.4 46.0zM-24 96h3L6.4 46.0zM64 96h3L100.1 36.0zM-16 96h3L20.1 36.0zM72 96h3L127.8 2.0zM-8 96h3L47.8 2.0z'/%3E%3C/svg%3E");
  --blades-back:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='80'%3E%3Cpath fill='%234A7A28' d='M4 80h2.5L26.0 44.0zM12 80h2.5L37.5 38.0zM20 80h2.5L40.3 47.0zM28 80h2.5L57.0 32.0zM-28 80h2.5L1.0 32.0zM36 80h2.5L59.8 41.0zM-20 80h2.5L3.8 41.0zM44 80h2.5L71.2 35.0zM-12 80h2.5L15.2 35.0zM52 80h2.5L93.7 10.0zM-4 80h2.5L37.7 10.0z'/%3E%3C/svg%3E");
  --rule-on:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='16'%3E%3Cpath fill='%234A7A28' d='M0 16h2.5L5.9 8.0zM8 16h2.5L15.0 6.0zM16 16h2.5L22.4 7.0zM24 16h2.5L31.6 5.0zM32 16h2.5L42.5 0.0zM-8 16h2.5L2.5 0.0z'/%3E%3C/svg%3E");
  --rule-lush:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='16'%3E%3Cpath fill='%2388BF55' d='M0 16h2.5L5.9 8.0zM8 16h2.5L15.0 6.0zM16 16h2.5L22.4 7.0zM24 16h2.5L31.6 5.0zM32 16h2.5L42.5 0.0zM-8 16h2.5L2.5 0.0z'/%3E%3C/svg%3E");
  --rule-off:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='16'%3E%3Cpath fill='%23D6DBD9' d='M0 16h2.5L5.9 8.0zM8 16h2.5L15.0 6.0zM16 16h2.5L22.4 7.0zM24 16h2.5L31.6 5.0zM32 16h2.5L42.5 0.0zM-8 16h2.5L2.5 0.0z'/%3E%3C/svg%3E");
  --rule-dusk:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='16'%3E%3Cpath fill='%23373F51' d='M0 16h2.5L5.9 8.0zM8 16h2.5L15.0 6.0zM16 16h2.5L22.4 7.0zM24 16h2.5L31.6 5.0zM32 16h2.5L42.5 0.0zM-8 16h2.5L2.5 0.0z'/%3E%3C/svg%3E");
  --blades-dry:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='40'%3E%3Cpath fill='%23C3C8D1' d='M0 40h2.5L9.3 26.0zM16 40h2.5L30.0 18.0zM40 40h2.5L51.6 22.0zM56 40h2.5L62.4 31.0z'/%3E%3C/svg%3E");
  --plus:linear-gradient(currentColor,currentColor) center/2px 14px no-repeat,linear-gradient(currentColor,currentColor) center/14px 2px no-repeat;
}

/* Metric-matched fallback so the swap to Urbanist doesn't shift layout */
@font-face{font-family:"Urbanist fb";src:local("Arial"),local("ArialMT");size-adjust:97%;ascent-override:98%;descent-override:26%;line-gap-override:0%}
@font-face{font-family:"Urbanist fb";font-weight:700;src:local("Arial Bold"),local("Arial-BoldMT");size-adjust:94%;ascent-override:101%;descent-override:27%;line-gap-override:0%}

/* ---------- 2. Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{margin:0;background:var(--white);color:var(--dusk);font-family:var(--font);font-size:1.0625rem;font-weight:450;line-height:1.55;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
h1,h2,h3,p,ul,ol,figure,fieldset,blockquote{margin:0}
ul,ol{padding:0;list-style:none}
fieldset{border:0;padding:0;min-width:0}
legend{padding:0}
svg{display:block}
img{display:block;max-width:100%;height:auto}
button,input,select,textarea{font:inherit;color:inherit;letter-spacing:inherit}
a{color:inherit;text-underline-offset:3px;text-decoration-thickness:1px}
b,strong{font-weight:700}
p{max-width:62ch}
::selection{background:var(--sun);color:var(--dusk)}
:focus-visible{outline:3px solid var(--dusk);outline-offset:2px}
.on-dark :focus-visible{outline-color:var(--sun)}
.on-light :focus-visible{outline-color:var(--dusk)}
[hidden]{display:none!important}
[tabindex="-1"]:focus{outline:none}

/* ---------- 3. Utilities ---------- */
.vh{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.wrap{width:min(100% - 2*var(--gut),var(--maxw));margin-inline:auto}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.skip{position:absolute;left:8px;top:-200px;z-index:100;display:inline-flex;align-items:center;min-height:44px;padding:0 16px;background:var(--sun);color:var(--dusk);font-weight:700;text-decoration:none}
.skip:focus{top:8px}
.tm{font-size:.45em;font-weight:500;vertical-align:.9em;line-height:0}
.ico{fill:currentColor;flex:none}
.ico-s{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:square;stroke-linejoin:miter;flex:none}

/* ---------- 4. Type ---------- */
.h1{font-size:clamp(2rem,1.35rem + 2.8vw,3.75rem);line-height:1.06;letter-spacing:-.02em;font-weight:300;text-wrap:balance}
.h1 .b,.h2 .b{display:block;font-weight:700}
.h1 .b{letter-spacing:-.025em}
.h2{font-size:clamp(1.625rem,1.25rem + 1.6vw,2.5rem);line-height:1.12;letter-spacing:-.015em;font-weight:300;text-wrap:balance}
.h2 .b{letter-spacing:-.02em}
.h3{font-size:clamp(1.3125rem,1.2rem + .4vw,1.5rem);line-height:1.2;letter-spacing:-.01em;font-weight:700}
.lead{font-size:clamp(1.125rem,1.03rem + .4vw,1.3125rem);line-height:1.45;max-width:42ch}
.small{font-size:.9375rem;line-height:1.4;letter-spacing:.01em;font-weight:500}
.micro{font-size:.875rem;line-height:1.45;letter-spacing:.01em}
.num{font-size:clamp(2.5rem,2rem + 2vw,3.5rem);font-weight:300;line-height:1;letter-spacing:-.02em;font-variant-numeric:tabular-nums}

/* ---------- 5. Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 24px;border:2px solid transparent;border-radius:0;background:transparent;font-family:inherit;font-size:1.0625rem;font-weight:700;line-height:1.1;letter-spacing:.005em;text-align:center;text-decoration:none;cursor:pointer;transition:background-color .12s ease-out;-webkit-tap-highlight-color:transparent}
.btn:active{transform:translateY(1px)}
.btn .ico{width:20px;height:20px}
.btn--primary{background:var(--sun);color:var(--dusk);border-color:var(--dusk)}
.on-dark .btn--primary{border-color:var(--sun)}
.on-light .btn--primary{border-color:var(--dusk)}
.btn--primary:hover{background:var(--sun-press)}
.btn--secondary{color:var(--dusk);border-color:var(--dusk)}
.btn--secondary:hover{background:var(--paper)}
.btn--ghost{color:#fff;border-color:var(--mist)}
.btn--ghost:hover{background:var(--dusk-deep)}
.btn--ghost.btn--wa .ico{color:var(--wa)}
.btn--text{min-height:44px;padding:0;border:0;color:var(--dusk);font-size:1rem;font-weight:600;text-decoration:underline;text-underline-offset:3px}
.btn--text:hover{text-decoration-thickness:2px}
.btn[disabled]{cursor:progress;opacity:.75}

/* ---------- 6. Header ---------- */
.hdr{background:var(--dusk);color:#fff;border-bottom:1px solid var(--dusk-rule)}
.hdr__in{display:flex;align-items:center;gap:8px;min-height:56px}
.lockup{display:inline-flex;align-items:center;min-height:44px;margin-right:auto;color:#fff;text-decoration:none;white-space:nowrap}
.lockup__word{font-size:22px;font-weight:700;letter-spacing:-.02em;line-height:1}
.lockup__branch{margin-left:10px;padding-left:10px;border-left:1px solid var(--mist);font-size:15px;font-weight:500;line-height:20px;color:var(--mist)}
.hdr__nav{display:none}
.hdr__tel{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 14px;border:2px solid var(--mist);color:#fff;font-size:1rem;font-weight:700;text-decoration:none;white-space:nowrap}
.hdr__tel:hover{background:var(--dusk-deep)}
.hdr__tel .ico{width:18px;height:18px}
.hdr__tel-d{display:none}
.hdr__cta{display:none;min-height:44px;padding:0 18px;font-size:1rem}

/* ---------- 7. Hero ---------- */
.hero{background:var(--dusk);color:#fff;padding-top:20px}
.hero__copy .h1{margin-bottom:12px}
.hero__sub{margin-bottom:14px}
.trust{display:flex;flex-wrap:wrap;gap:4px 20px;margin-bottom:16px;color:var(--mist)}
.trust li:first-child{flex-basis:100%}
.trust a{position:relative;display:inline-flex;align-items:center;gap:6px;color:#fff;font-weight:600;text-decoration:underline;text-underline-offset:3px}
.trust a::after{content:"";position:absolute;inset:-12px -6px}
.trust__star{width:16px;height:16px}
.hero__wa{display:none}
.field{position:relative;overflow:hidden;height:40px;margin-inline:calc(-1*var(--gut));background:var(--blades-front) 0 100%/50px 60px repeat-x,var(--blades-back) 0 100%/35px 50px repeat-x,var(--dusk)}
.field::after{content:"";position:absolute;top:0;bottom:0;left:-12px;right:0;background:var(--dusk);border-left:12px solid var(--lush-ink);animation:unroll 900ms cubic-bezier(.25,.8,.25,1) 150ms both}
@keyframes unroll{to{transform:translateX(100%)}}
.field--d{display:none}
.panel{position:relative;z-index:1;margin-inline:calc(-1*var(--gut));padding:16px var(--gut) 24px;background:#fff;color:var(--dusk)}
.panel a{color:var(--dusk)}
.ribbon{display:none}

/* ---------- 8. Quote form ---------- */
.qform{max-width:640px}
.qprog{display:none;align-items:center;gap:12px;margin-bottom:6px}
.js .qprog{display:flex}
.qprog__txt{font-size:.9375rem;font-weight:500;letter-spacing:.01em;color:var(--slate);white-space:nowrap}
.qprog__txt span{display:none}
html:not([data-step]) .qprog__s1,[data-step="1"] .qprog__s1,[data-step="2"] .qprog__s2,[data-step="3"] .qprog__s3{display:inline}
.prog{position:relative;flex:1;height:16px;background:var(--rule-off) 0 100%/40px 16px repeat-x}
.prog__fill{position:absolute;left:0;top:0;bottom:0;width:8%;background:var(--rule-on) 0 100%/40px 16px repeat-x;transition:width .4s ease-out}
.is-p1 .prog__fill,[data-step="2"] .prog__fill{width:40%}
[data-step="3"] .prog__fill{width:75%}
.js .qstep{display:none}
html:not([data-step]) .qstep--1,[data-step="1"] .qstep--1,[data-step="2"] .qstep--2,[data-step="3"] .qstep--3{display:block}
html:not(.js) .qstep--2,html:not(.js) .qstep--3{margin-top:40px;padding-top:24px;border-top:2px solid var(--line)}
.q{margin:6px 0 14px;font-size:1.3125rem;font-weight:700;line-height:1.2;letter-spacing:-.01em;scroll-margin-top:16px}
.qset__legend{display:block;width:100%}
.form-alert{display:flex;gap:10px;align-items:flex-start;margin:6px 0 12px;padding:10px 0 10px 12px;border-left:2px solid var(--error);font-size:.9375rem;font-weight:500;line-height:1.45;color:var(--dusk)}
.form-alert:empty{margin:0;padding:0;border:0}
.form-alert .ico-s{width:18px;height:18px;margin-top:2px;color:var(--error)}
.form-alert a{font-weight:600}
.form-alert--return{display:none}
html[data-error] .form-alert--return{display:flex}

/* Tiles (radio cards). The input comes first so sibling selectors style state without :has(). */
.tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.tile{position:relative;z-index:0;display:flex;align-items:center;gap:10px;min-height:64px;padding:10px 12px;color:var(--dusk);font-size:1.0625rem;font-weight:600;line-height:1.15;cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}
.tile__input{position:absolute;top:50%;left:12px;width:1px;height:1px;margin:0;opacity:0}
.tile__bg{position:absolute;inset:0;z-index:-1;border:2px solid var(--dusk);background:#fff}
.tile:hover .tile__bg{background:var(--paper)}
.tile__icon{width:24px;height:24px}
.tile__label{flex:1;min-width:0}
.tile__check{display:none;width:16px;height:16px;stroke-width:2.5}
.tile__input:focus-visible~.tile__bg{outline:3px solid var(--dusk);outline-offset:2px}
.tile__input:checked~.tile__bg{background:var(--dusk)}
.tile__input:checked~.tile__label{color:#fff}
.tile__input:checked~.tile__icon{color:var(--lush)}
.tile__input:checked~.tile__check{display:block;color:#fff}
.tile--slim{grid-column:1/-1;min-height:48px}
.tiles--area .tile{min-height:56px}
.tiles--chips{grid-template-columns:repeat(3,minmax(0,1fr))}
.tiles--chips .tile{min-height:56px;padding:8px 10px;font-size:1rem}
.tiles--chips .tile__check{position:absolute;top:5px;right:5px;width:14px;height:14px}

/* Fields */
.fld{margin-top:20px}
.fld__label{display:block;margin-bottom:4px;font-size:1rem;font-weight:600;line-height:1.3}
.fld__req{font-weight:500;color:var(--slate)}
.fld__help{margin-bottom:8px;font-size:.9375rem;font-weight:500;line-height:1.4;color:var(--slate)}
.fld__box{position:relative}
.fld__row{display:flex;align-items:center;gap:10px}
.fld__box--m2{width:140px}
.fld__suffix{font-size:1.0625rem;font-weight:600}
.inp{display:block;width:100%;height:52px;padding:0 14px;border:2px solid var(--slate);border-radius:0;background:#fff;color:var(--dusk);font-size:1.0625rem;font-weight:450;line-height:1.3;-webkit-appearance:none;appearance:none;box-shadow:none}
.inp:hover,.inp:focus{border-color:var(--dusk)}
textarea.inp{height:auto;min-height:112px;padding:12px 14px;resize:vertical}
.fld__ok{display:none;position:absolute;top:50%;right:14px;width:20px;height:20px;margin-top:-10px;color:var(--lush-ink);stroke-width:2.5;pointer-events:none}
.is-valid .fld__ok{display:block}
.is-valid>.fld__box>.inp,.is-valid .fld__box--m2 .inp{padding-right:42px}
.is-invalid .inp{border-color:var(--error)}
.fld__err{display:flex;gap:6px;align-items:flex-start;margin-top:6px;font-size:.9375rem;font-weight:500;line-height:1.4;color:var(--error)}
.fld__err .ico-s{width:16px;height:16px;margin-top:2px}
.hp{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}

/* Estimator and size helper */
.est{margin-top:12px;padding:16px;background:var(--paper);font-size:1rem;line-height:1.5}
.est__main{display:block}
.est b{font-weight:700;font-variant-numeric:tabular-nums}
.est__note{margin-top:6px;font-size:.875rem;line-height:1.45;letter-spacing:.01em;color:var(--slate)}
.calc{margin-top:6px}
html:not(.js) .calc{display:none}
.calc__sum{display:inline-flex;align-items:center;gap:10px;min-height:44px;font-size:1rem;font-weight:600;text-decoration:underline;text-underline-offset:3px;cursor:pointer;list-style:none}
.calc__sum::-webkit-details-marker{display:none}
.calc__sum::after,.faq summary::after{content:"";flex:none;width:14px;height:14px;background:var(--plus);transition:transform .15s ease-out}
.calc[open]>.calc__sum::after,.faq details[open]>summary::after{transform:rotate(45deg)}
.calc__body{padding:4px 0 8px}
.calc__row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.calc__out{display:block;margin-top:12px;font-weight:600}
.calc__use{margin-top:12px}

/* Step navigation */
.qnav{display:flex;flex-wrap:wrap;align-items:center;gap:8px 24px;margin-top:24px}
.qnav .btn--primary{flex:1 1 100%}
.qnav--1{margin-top:4px}
.qnav__next{display:none}
.is-p1 .qnav__next{display:inline-flex}
.qhelp{margin-top:12px;font-size:.9375rem;font-weight:500;line-height:1.4;color:var(--slate)}
.qhelp a{font-weight:600}
.btn--submit{min-height:56px}

/* Checkbox */
.check{position:relative;display:flex;gap:12px;align-items:flex-start;min-height:44px;padding:8px 0;font-size:1rem;line-height:1.45;cursor:pointer}
.check__input{position:absolute;top:10px;left:0;width:24px;height:24px;margin:0;opacity:0}
.check__box{display:grid;place-items:center;flex:none;width:24px;height:24px;margin-top:1px;border:2px solid var(--dusk);background:#fff}
.check__box .ico-s{width:16px;height:16px;color:#fff;stroke-width:2.5;visibility:hidden}
.check__input:checked+.check__box{background:var(--dusk)}
.check__input:checked+.check__box .ico-s{visibility:visible}
.check__input:focus-visible+.check__box{outline:3px solid var(--dusk);outline-offset:2px}
.notice{margin-top:16px;color:var(--slate)}
.notice a{color:var(--dusk)}

/* ---------- 9. Sections ---------- */
.sec{padding-block:var(--section)}
.sec--paper{background:var(--paper)}
.sec--dusk{background:var(--dusk);color:#fff}
.sec__head{margin-bottom:32px}
.sec__intro{margin-top:16px}
.sec__cta{margin-top:32px}

/* Proof */
.proof{display:grid;gap:24px}
.proof__rating{margin-top:16px}
.themes li{display:flex;gap:12px;align-items:flex-start;min-height:48px;padding:10px 0}
.themes .ico-s{width:20px;height:20px;margin-top:3px;color:var(--lush-ink);stroke-width:2.5}
.proof__btn{max-width:none}

/* Benefits */
.ben{display:grid;gap:32px 24px}
.ben li{padding-top:16px;border-top:2px solid var(--dusk)}
.ben p{margin-top:8px}

/* Before / after */
.results{display:grid;gap:32px}
.results__cap{margin:16px 0 24px;color:var(--mist)}
.results__cap a{color:#fff;font-weight:600}
.compare{--pos:50%;position:relative;aspect-ratio:3/2;overflow:hidden;background:var(--dusk-deep);touch-action:pan-y;cursor:ew-resize;-webkit-user-select:none;user-select:none}
.compare__media,.compare__after,.compare__before{position:absolute;inset:0}
.compare__before{clip-path:inset(0 calc(100% - var(--pos)) 0 0)}
.compare svg:not(.ico-s),.compare img{width:100%;height:100%;object-fit:cover}
.compare__tag{position:absolute;top:12px;padding:6px 10px;background:var(--dusk-deep);color:#fff;font-size:.9375rem;font-weight:600;line-height:1.2;pointer-events:none}
.compare__tag--b{left:12px}
.compare__tag--a{right:12px}
.compare__range{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;pointer-events:none;-webkit-appearance:none;appearance:none;background:none}
.compare__handle{position:absolute;top:0;bottom:0;left:var(--pos);width:2px;margin-left:-1px;background:#fff;pointer-events:none}
.compare__knob{position:absolute;top:50%;left:50%;display:grid;place-items:center;width:44px;height:44px;margin:-22px 0 0 -22px;background:var(--sun);color:var(--dusk)}
.compare__knob .ico-s{width:24px;height:24px;stroke-linecap:butt}
.compare__range:focus-visible~.compare__handle .compare__knob{outline:3px solid var(--sun);outline-offset:3px;box-shadow:0 0 0 3px var(--dusk)}

/* Grass range: pile gauge + cards */
.gauge-fig{margin-bottom:32px}
.gauge{position:relative;padding-left:52px}
.gauge__plot{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:var(--cg);height:calc(40*var(--k));border-bottom:2px solid var(--dusk)}
.gauge__ruler{position:absolute;top:0;bottom:0;left:-52px;width:44px}
.gauge__ruler::after{content:"";position:absolute;top:0;right:0;bottom:0;width:8px;background:repeating-linear-gradient(to top,var(--slate) 0 1px,transparent 1px calc(5*var(--k)))}
.gauge__n{position:absolute;right:12px;transform:translateY(50%);font-size:.875rem;font-weight:500;line-height:1;color:var(--slate);font-variant-numeric:tabular-nums;white-space:nowrap}
.gauge__n--0{bottom:0}.gauge__n--10{bottom:calc(10*var(--k))}.gauge__n--20{bottom:calc(20*var(--k))}.gauge__n--30{bottom:calc(30*var(--k))}.gauge__n--40{bottom:calc(40*var(--k))}
.gauge__guide{position:absolute;left:0;right:0;height:0;border-top:1px dashed var(--slate)}
.gauge__guide--25{bottom:calc(25*var(--k))}.gauge__guide--30{bottom:calc(30*var(--k))}.gauge__guide--38{bottom:calc(38*var(--k))}
.tuft{position:relative;z-index:1;align-self:end;width:calc(30*var(--k));height:calc(40*var(--k));overflow:visible}
.tuft path{fill:var(--lush);transition:fill .15s}
.gauge__labels{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:var(--cg);padding-top:8px;font-size:.9375rem;line-height:1.3}
.gauge__labels b{display:block;font-weight:600;-webkit-hyphens:manual;hyphens:manual}
.gauge__mm{display:none;font-weight:500;color:var(--slate)}
.gauge__cap{margin-top:12px;color:var(--slate)}
.range:has(.card[data-key="knightsbridge"]:is(:hover,:focus-within)) .tuft:not([data-key="knightsbridge"]) path,
.range:has(.card[data-key="kensington"]:is(:hover,:focus-within)) .tuft:not([data-key="kensington"]) path,
.range:has(.card[data-key="pet"]:is(:hover,:focus-within)) .tuft:not([data-key="pet"]) path,
.range:has(.card[data-key="windsor"]:is(:hover,:focus-within)) .tuft:not([data-key="windsor"]) path{fill:var(--line)}
.cards{display:grid;gap:12px}
.card{display:flex;flex-direction:column;padding:24px;background:#fff}
.card__media{display:block;margin:-24px -24px 16px;background:#fff}
.card__media img{width:100%;aspect-ratio:12/5;object-fit:cover}
.card__pile{margin-top:12px}
.card__mm{font-size:.5em;font-weight:500;letter-spacing:0}
.card__role{margin-top:8px;font-size:.9375rem;font-weight:600;line-height:1.4;color:var(--slate)}
.card__body{margin:12px 0 16px}
.card__feats{display:grid;gap:8px;margin:0 0 24px;padding-top:16px;border-top:1px solid var(--line);font-size:.9375rem;line-height:1.4}
.card__feats li{position:relative;padding-left:22px}
.card__feats li::before{content:"";position:absolute;left:1px;top:.3em;width:11px;height:11px;border-radius:50%;background:var(--sun);box-shadow:0 0 0 1.5px var(--dusk)}
.card__btn{margin-top:auto;align-self:flex-start}
.card__btn:hover,.card__btn:focus-visible{background:var(--sun)}
.range__foot{margin-top:32px}

/* How it works */
.steps{display:grid;gap:32px 24px}
.steps li{padding-top:16px;border-top:2px solid var(--dusk)}
.steps__n{display:block;margin-bottom:16px}
.steps p{margin-top:8px}

/* Promises */
.prom{display:grid;gap:32px}
.prom__covered{padding:24px;border:2px solid var(--dusk);background:#fff}
.prom p{margin-top:8px}
.prom__not p{color:var(--slate)}
.prom__list{display:grid;gap:32px 24px;margin-top:48px}
.prom__list li{padding-top:16px;border-top:2px solid var(--dusk)}
.prom__list p{margin-top:8px}

.btn--secondary.btn--wa .ico{color:var(--dusk)}

/* FAQ */
.faq{display:grid;gap:32px}
.faq details{border-bottom:1px solid var(--line)}
.faq details:first-child{border-top:1px solid var(--line)}
.faq summary{position:relative;display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:56px;padding:16px 8px 16px 0;font-size:1.125rem;font-weight:700;line-height:1.35;cursor:pointer;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{text-decoration:underline;text-underline-offset:4px}
.faq__a{padding:0 0 24px}
.faq__a a{font-weight:600}
.faq__ask-t{margin-bottom:12px;font-weight:700}

/* Final CTA */
.cta{position:relative}
.cta::before{content:"";position:absolute;left:0;right:0;top:-24px;height:24px;background:var(--rule-dusk) 0 100%/60px 24px repeat-x,var(--white)}
.cta__body{margin-top:16px}
.cta__label{margin-top:32px;font-size:1rem;font-weight:600}
.chips{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:12px}
.chips__wide{grid-column:1/-1}
.chip{display:flex;align-items:center;gap:10px;min-height:56px;height:100%;padding:10px 12px;border:2px solid var(--mist);color:#fff;font-size:1.0625rem;font-weight:600;line-height:1.15;text-decoration:none;transition:background-color .12s ease-out}
.chip:hover{background:var(--dusk-deep)}
.chip .ico-s{width:24px;height:24px}
.cta__btns{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.cta__hours{margin-top:16px;color:var(--mist)}

/* Footer */
.ftr{padding:64px 0 48px;background:var(--dusk-deep);color:#fff;font-size:.9375rem;line-height:1.5}
.ftr__grid{display:grid;gap:32px}
.ftr__h{margin-bottom:8px;font-size:.9375rem;font-weight:700;line-height:1.4}
.ftr p{color:var(--mist)}
.ftr .lockup{margin:-11px 0 12px}
.ftr .ftr__name{margin-top:4px;color:#fff;font-weight:600}
.ftr__muted{margin-top:4px}
.ftr__links{margin-top:8px}
.ftr__links a{display:inline-block;padding:10px 0;color:#fff;text-decoration:underline}
.ftr__links a:hover{text-decoration-thickness:2px}
.ftr__bottom{margin-top:48px;padding-top:24px;border-top:1px solid var(--dusk-rule);font-size:.875rem;max-width:none}

/* Sticky mobile action bar (<768) and floating WhatsApp button (>=768) */
.sbar{display:none}
.fab{display:none}
@media (max-width:767.98px){
  .js .has-sbar{padding-bottom:calc(var(--bar-h) + env(safe-area-inset-bottom,0px))}
  .js .sbar{position:fixed;left:0;right:0;bottom:0;z-index:50;display:grid;grid-template-columns:24fr 36fr 40fr;padding-bottom:env(safe-area-inset-bottom,0px);background:var(--dusk-deep);border-top:1px solid var(--dusk-rule);transform:translateY(100%);visibility:hidden;transition:transform .2s ease-out,visibility 0s linear .2s}
  .js .sbar.is-shown{transform:none;visibility:visible;transition:transform .2s ease-out}
}
.sbar__cell{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-width:0;height:var(--bar-h);border-left:1px solid var(--dusk-rule);color:#fff;font-size:clamp(12px,3.7vw,14px);font-weight:600;line-height:1.2;text-decoration:none;white-space:nowrap;-webkit-tap-highlight-color:transparent}
.sbar__cell:first-child{border-left:0}
.sbar__cell .ico{width:20px;height:20px}
.sbar__cell--wa .ico{color:var(--wa)}
.sbar__cell--q{border-left:0;background:var(--sun);color:var(--dusk);font-size:1.0625rem;font-weight:700}
.sbar__cell--q:active{background:var(--sun-press)}
.sbar :focus-visible{outline-offset:-3px}
@media (min-width:768px){
  .fab{position:fixed;right:24px;bottom:24px;z-index:50;display:grid;place-items:center;width:56px;height:56px;border-radius:50%;background:var(--dusk-deep);color:var(--wa);box-shadow:0 0 0 2px #fff,0 2px 8px rgba(38,44,57,.28);transition:opacity .2s ease-out,transform .2s ease-out}
  .js .fab{opacity:0;transform:translateY(8px);visibility:hidden;transition:opacity .2s ease-out,transform .2s ease-out,visibility 0s linear .2s}
  .js .fab.is-shown{opacity:1;transform:none;visibility:visible;transition:opacity .2s ease-out,transform .2s ease-out}
  .fab .ico{width:28px;height:28px}
  .fab:focus-visible{outline:3px solid transparent;box-shadow:0 0 0 2px #fff,0 0 0 5px var(--dusk),0 0 0 8px var(--sun)}
}

/* ---------- 10. Thank-you, 404, privacy ---------- */
.band{padding:48px 0 56px;background:var(--dusk);color:#fff}
.band .lead{margin-top:16px}
.ty-rule{max-width:480px;height:16px;margin-top:24px;background:var(--rule-lush) 0 100%/40px 16px repeat-x}
.ty-ref b{font-variant-numeric:tabular-nums;white-space:nowrap}
.ty-sec{padding-top:40px}
.ty{display:grid;gap:40px}
.ty__h{font-size:1.3125rem;font-weight:700;line-height:1.2;letter-spacing:-.01em}
.ty-steps{margin-top:24px;display:grid;gap:24px}
.ty-steps li{display:grid;grid-template-columns:48px 1fr;gap:4px 16px;padding-top:16px;border-top:2px solid var(--dusk)}
.ty-steps .num{grid-row:span 2}
.ty-steps p{grid-column:2}
.ty-wa{margin-top:32px}
.ty-wa .btn--primary .ico{color:var(--dusk)}
.ty-help{margin-top:8px;font-size:.9375rem;font-weight:500;color:var(--slate)}
.ty-links{display:flex;flex-wrap:wrap;gap:0 28px;margin-top:20px}
.ty-links a{display:inline-block;padding:10px 0;font-weight:600}
.ty-note{margin-top:12px}
.ty-note a{font-weight:600}
.ty-panel{align-self:start;padding:24px;background:var(--paper)}
.ty-panel p{margin-top:12px}
.nf-gap{height:24px;margin-top:32px;background:var(--rule-lush) 0 100%/60px 24px repeat-x;-webkit-mask:linear-gradient(90deg,#000 0 38%,transparent 38% 62%,#000 62%);mask:linear-gradient(90deg,#000 0 38%,transparent 38% 62%,#000 62%)}
.nf-btns{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.prose{max-width:720px;padding-block:48px 64px}
.prose .h1{font-size:clamp(2rem,1.6rem + 1.6vw,2.75rem)}
.prose__date{margin-top:12px;color:var(--slate)}
.prose h2{margin:40px 0 0;font-size:1.5rem;font-weight:700;line-height:1.25;letter-spacing:-.01em}
.prose h3{margin:24px 0 0;font-size:1.125rem;font-weight:700}
.prose p,.prose ul{margin-top:12px}
.prose ul{padding-left:1.25em;list-style:disc}
.prose li+li{margin-top:6px}
.prose a{font-weight:600}
.hdr--simple .hdr__nav,.hdr--simple .hdr__cta{display:none!important}
.hdr--simple .hdr__tel{margin-right:0}

/* ---------- 11. Breakpoints ---------- */
@media (max-width:359.98px){
  .lockup__branch{display:none}
}
@media (min-width:600px){
  :root{--gut:32px;--cg:24px}
  .hdr__cta{display:inline-flex}
  .field{height:64px;background:var(--blades-front) 0 100%/64px 77px repeat-x,var(--blades-back) 0 100%/45px 64px repeat-x,var(--dusk)}
  .panel{padding:24px var(--gut) 32px}
  .tiles--p,.tiles--area{grid-template-columns:repeat(3,minmax(0,1fr))}
  .qnav .btn--primary{flex:0 0 auto}
  .gauge__mm{display:block}
  .themes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:24px}
  .cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
  .ben,.steps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .prom__list{grid-template-columns:repeat(3,minmax(0,1fr))}
  .ftr__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ty-steps li{grid-template-columns:56px 1fr}
}
@media (min-width:1024px){
  :root{--gut:48px;--section:96px;--k:3px}
  body{font-size:1.125rem}
  .h1{line-height:1.02}
  .h2{line-height:1.08}
  .q{font-size:1.5rem}
  .sec__head{margin-bottom:48px}
  .sec__cta{margin-top:48px}
  .hdr__in{min-height:72px;gap:0}
  .hdr__nav{display:block;margin-right:28px}
  .hdr__nav ul{display:flex;gap:28px}
  .hdr__nav a{display:inline-flex;align-items:center;min-height:44px;color:#fff;font-size:1rem;font-weight:500;text-decoration:none}
  .hdr__nav a:hover,.hdr__nav a:focus-visible{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:6px}
  .hdr__tel{padding:0;border:0;font-weight:600;margin-right:24px}
  .hdr__tel:hover{background:none;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:6px}
  .hdr__tel-m{display:none}
  .hdr__tel-d{display:inline}
  .hero{padding-top:64px}
  .hero__grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;align-items:start}
  .hero__copy{grid-column:1/8;padding-bottom:48px}
  .hero__copy .h1{margin-bottom:20px}
  .trust li:first-child{flex-basis:auto}
  .hero__wa{display:inline-flex;margin-top:12px}
  .field--m{display:none}
  .field--d{display:block;height:160px;margin:-48px 0 0;background:var(--blades-front) 0 100%/80px 96px repeat-x,var(--blades-back) 0 100%/56px 80px repeat-x,var(--dusk)}
  .panel{grid-column:8/13;margin:0;padding:24px 28px 28px}
  .tiles--p{grid-template-columns:repeat(2,minmax(0,1fr))}
  .qhelp__wa{display:none}
  .qnav .btn--primary{flex:1 1 auto}
  .ribbon{display:block;background:var(--dusk-deep);color:var(--mist)}
  .ribbon__in{display:flex;align-items:center;gap:0 28px;min-height:44px;padding:11px 0;font-size:.9375rem;font-weight:500;line-height:1.3}
  .ribbon__lead{flex:none;font-weight:600}
  .ribbon ul{display:flex;flex-wrap:wrap;flex:1;min-width:0;gap:4px 28px}
  html[data-area="somerset-west"] [data-area-item="somerset-west"],html[data-area="strand"] [data-area-item="strand"],html[data-area="gordons-bay"] [data-area-item="gordons-bay"],html[data-area="sir-lowrys-pass"] [data-area-item="sir-lowrys-pass"],html[data-area="macassar"] [data-area-item="macassar"],html[data-area="firgrove"] [data-area-item="firgrove"],html[data-area="croydon"] [data-area-item="croydon"]{color:#fff;font-weight:700}
  .proof{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;row-gap:32px;align-items:start}
  .proof__main,.proof__btn{grid-column:1/6}
  .themes{grid-column:7/13;grid-row:1/3;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:24px}
  .ben{grid-template-columns:repeat(4,minmax(0,1fr))}
  .results{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;align-items:center}
  .results__text{grid-column:1/5}
  .compare{grid-column:5/13}
  .gauge{padding-left:0}
  .gauge__ruler{left:-48px;width:40px}
  .gauge__plot .tuft,.gauge__labels>span{margin-left:24px}
  .cards{grid-template-columns:repeat(4,minmax(0,1fr))}
  .steps{grid-template-columns:repeat(4,minmax(0,1fr))}
  .prom{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px}
  .prom__covered{grid-column:1/7}
  .prom__not{grid-column:7/13;padding-top:26px}
  .faq{grid-template-columns:repeat(12,minmax(0,1fr));grid-template-rows:auto 1fr;column-gap:24px;row-gap:32px}
  .faq__h{grid-column:1/5;grid-row:1}
  .faq__ask{grid-column:1/5;grid-row:2;align-self:start;position:sticky;top:24px}
  .faq__list{grid-column:5/13;grid-row:1/3}
  .chips{grid-template-columns:repeat(4,minmax(0,1fr))}
  .chips__wide{grid-column:auto}
  .ftr__grid{grid-template-columns:4fr 2fr 3fr 3fr;column-gap:24px}
  .band{padding:72px 0 80px}
  .ty-sec{padding-top:72px}
  .ty{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px}
  .ty__main{grid-column:1/8}
  .ty-panel{grid-column:9/13}
}

@media (min-width:1024px) and (max-width:1199.98px){
  .hero__copy{grid-column:1/7}
  .panel{grid-column:7/13}
  .ribbon__in,.ribbon ul{column-gap:20px}
}

/* ---------- 12. Motion and forced colours ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .field::after{display:none}
}
@media (forced-colors:active){
  .btn,.chip,.inp,.tile__bg,.check__box{border:2px solid ButtonText}
  .tile__input:checked~.tile__bg{forced-color-adjust:none;background:Highlight;border-color:Highlight}
  .tile__input:checked~.tile__label,.tile__input:checked~.tile__icon,.tile__input:checked~.tile__check{forced-color-adjust:none;color:HighlightText}
  .check__input:checked+.check__box{forced-color-adjust:none;background:Highlight}
  .js .qprog .prog{display:none}
  .compare__knob{outline:2px solid ButtonText}
  .fab{border:2px solid ButtonText}
}