/* Unique Driveways MK v4 ("premium"). Palette per Terry: blue, grey and white.
   Structure and proportions from the BMW UK design system (3px corners, bold/light type contrast, card plates, 52px buttons),
   validated against bmw.co.uk on 27 Sep 2026. Navy is the Unique logo navy. Barlow is the open substitute for BMW Type Next.
   Mobile first: 17px body, 48px+ tap targets, no hover-only affordances. */
:root{
  /* colour (DESIGN.md) */
  --navy:#162E51;--navy-deep:#0E1F38;--navy-2:#1D3A63;--blue:#1C69D4;--blue-press:#1558B8;--blue-soft:#E8F0FB;
  --ink:#16202E;--body:#3A4452;--muted:#5B6573;--g50:#F5F6F8;--g100:#EBEDF0;--g200:#DDE1E6;--line-control:#8B95A3;
  --on-dark:#DCE4EF;--on-dark-muted:#C9D4E4;--on-dark-accent:#9DC2F5;--wa:#25D366;--star:#FBBC04;
  --error:#B42318;--error-soft:#FEF3F2;--error-ink:#7A271A;--scrim:rgba(14,31,56,.82);--hair-dark:rgba(255,255,255,.16);--fill-dark:rgba(255,255,255,.08);
  /* type */
  --sans:"Barlow","Barlow Fallback",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --t-label:0.875rem;--t-link:0.9375rem;--t-small:0.9375rem;--t-body:1.0625rem;--t-article:1.125rem;--t-lede:clamp(1.125rem,1.4vw,1.25rem);
  --t-title:1.25rem;--t-h3:clamp(1.25rem,1.7vw,1.5rem);--t-h2s:clamp(1.625rem,2.6vw,2.125rem);--t-h2:clamp(1.875rem,3.6vw,2.875rem);--t-h1:clamp(2.25rem,4.2vw,3.5rem);--t-stat:clamp(1.5rem,2.4vw,1.75rem);
  /* space, shape, depth */
  --gut:max(clamp(16px,4vw,48px),env(safe-area-inset-left),env(safe-area-inset-right));--sec:clamp(56px,8vw,112px);--hh:76px;--pad:24px;--pad-lg:clamp(24px,3vw,40px);
  --r:3px;
  --sh-1:0 1px 2px rgba(14,31,56,.06),0 6px 18px rgba(14,31,56,.06);--sh-2:0 2px 4px rgba(14,31,56,.06),0 16px 40px rgba(14,31,56,.12);--sh-nav:0 1px 0 var(--g200),0 8px 24px rgba(14,31,56,.06);
  /* motion */
  --ease:cubic-bezier(.23,1,.32,1);--dur-fast:.15s;--dur-press:.16s;--dur-ui:.2s;--dur-slow:.5s;
  color-scheme:light;
}
/* metric-matched fallback so the swap to Barlow does not shift the layout */
/* self-hosted Barlow (F4) and metric-matched fallbacks so the swap does not shift the layout (F3) */
@font-face{font-family:"Barlow";font-style:normal;font-weight:300;font-display:optional;src:url(/assets/fonts/barlow-300.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:"Barlow";font-style:normal;font-weight:400;font-display:optional;src:url(/assets/fonts/barlow-400.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:"Barlow";font-style:normal;font-weight:600;font-display:optional;src:url(/assets/fonts/barlow-600.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:"Barlow";font-style:normal;font-weight:700;font-display:optional;src:url(/assets/fonts/barlow-700.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:"Barlow Fallback";font-weight:100 500;src:local("Arial"),local("ArialMT"),local("Liberation Sans");size-adjust:96.5%;ascent-override:103.6%;descent-override:20.7%;line-gap-override:0%}@font-face{font-family:"Barlow Fallback";font-weight:600 900;src:local("Arial Bold"),local("Arial-BoldMT"),local("Liberation Sans Bold");size-adjust:92.3%;ascent-override:108.4%;descent-override:21.7%;line-gap-override:0%}
*,*::before,*::after{box-sizing:border-box}[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--hh) + 12px)}
body{margin:0;background:#fff;color:var(--ink);font-family:var(--sans);font-size:var(--t-body);line-height:1.6;font-weight:400;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:clip}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
p{margin:0}
h1,h2,h3,h4{margin:0;font-family:var(--sans);font-weight:700;color:var(--ink);text-wrap:balance;letter-spacing:-.01em}
h1{font-size:var(--t-h1);line-height:1.05}
h2{font-size:var(--t-h2);line-height:1.1}
h3{font-size:var(--t-h3);line-height:1.25}
h4{font-size:0.875rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
h1 em,h2 em{font-style:normal;font-weight:300}
h3 em{font-style:normal}
h2+p,h2+.lede,h2+ul,h3+p{margin-top:12px}
.lede,.big{font-size:var(--t-lede);line-height:1.55;font-weight:400;color:var(--body);max-width:62ch}
.small{font-size:0.9375rem;color:var(--muted)}
.cap{font-size:0.9375rem;color:var(--muted);margin-top:8px}
.k{display:block;font-size:var(--t-label);font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--blue);margin:0 0 12px}
.wrap{max-width:1280px;margin:0 auto;padding-inline:var(--gut)}
.narrow{max-width:820px}
.sec{padding-block:var(--sec)}
.sec-cream,.sec-soft,.sec-sand{background:var(--g50)}
.sec-dark,.sec-navy{background:var(--navy);color:#fff}
.sec-dark h2,.sec-dark h3,.sec-navy h2,.sec-navy h3,.sec-dark h4{color:#fff}
.sec-dark .lede,.sec-dark .big,.sec-dark p{color:var(--on-dark)}
.sec-dark .k{color:var(--on-dark-accent)}
.sec-dark .small,.sec-dark .cap{color:var(--on-dark-muted)}
.head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px 48px;flex-wrap:wrap;margin-bottom:clamp(28px,3.5vw,44px)}
.head>div{max-width:780px}.head .lede{margin-top:12px}
.center{text-align:center}.center .lede{margin-inline:auto}
.two{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,80px);align-items:center}
.two>*,.grid>*{min-width:0}
@media(max-width:880px){.two{grid-template-columns:1fr}}
.mt{margin-top:24px}
.chip:empty{display:none}
/* legacy hand-drawn strokes now render as plain text */
.u,.circ{display:inline}.u>svg,.circ>svg,svg.fl,svg.curl,.slabs,.drive-draw{display:none!important}

/* buttons: call (blue), WhatsApp (official green), line. Same everywhere. */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:52px;padding:12px 24px;border-radius:var(--r);border:0;box-shadow:inset 0 0 0 1.5px transparent;font-family:var(--sans);font-size:1rem;font-weight:600;letter-spacing:.2px;line-height:1.25;text-decoration:none;cursor:pointer;white-space:nowrap;
  transition:background-color .15s var(--ease),color .15s var(--ease),box-shadow .15s var(--ease),transform .16s var(--ease)}
.btn:active{transform:scale(.97)}
.btn svg{width:20px;height:20px;flex:none}
.btn-lg{min-height:56px;padding:12px 32px;font-size:1.0625rem}
.btn-call,.btn-call-solid,.btn-dark,.btn-quote,.btn-lime{background:var(--blue);color:#fff}
.btn-call svg{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.btn-wa{background:var(--wa);color:var(--ink)}
.btn-line,.btn-quote-soft,.btn-call-light{background:transparent;color:inherit;box-shadow:inset 0 0 0 1.5px currentColor}
.sec-dark .btn-line,.hero-dark .btn-line,.quote-sec .btn-line,.cta-band .btn-line{color:#fff}
@media(hover:hover) and (pointer:fine){
  .btn-call:hover,.btn-call-solid:hover,.btn-dark:hover,.btn-quote:hover,.btn-lime:hover{background:var(--blue-press)}
  .btn-line:hover,.btn-quote-soft:hover{background:var(--ink);color:#fff;box-shadow:inset 0 0 0 1.5px var(--ink)}
  .sec-dark .btn-line:hover,.hero-dark .btn-line:hover,.quote-sec .btn-line:hover,.cta-band .btn-line:hover{background:var(--hair-dark);color:#fff;box-shadow:inset 0 0 0 1.5px #fff}
}
.ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}
.ctas-stack{flex-direction:column;align-items:stretch;max-width:420px}
@media(max-width:560px){.ctas .btn{width:100%}}
.link,.link-more{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-size:0.9375rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;text-decoration:none;color:var(--blue);margin-top:24px}
.link::after,.link-more::after,.arrow::after{content:"";width:7px;height:7px;border-top:2px solid currentColor;border-right:2px solid currentColor;transform:rotate(45deg);transition:transform .16s var(--ease)}
.sec-dark .link,.quote-sec .link{color:var(--on-dark-accent)}
.arrow{display:inline-flex;align-items:center;gap:8px;font-size:0.9375rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--blue);text-decoration:none}
@media(hover:hover) and (pointer:fine){.link:hover::after,.arrow:hover::after,a:hover .arrow::after{transform:translateX(3px) rotate(45deg)}}

/* ticks */
.ticks{list-style:none;padding:0;margin:20px 0 0;display:grid;gap:8px}
.ticks li{position:relative;padding-left:32px}
.ticks li::before{content:"";position:absolute;left:3px;top:.42em;width:14px;height:8px;border-left:2.5px solid var(--blue);border-bottom:2.5px solid var(--blue);transform:rotate(-45deg)}
.sec-dark .ticks li::before,.hero-dark .ticks li::before,.hero-split .ticks li::before,.quote-sec .ticks li::before{border-color:var(--on-dark-accent)}
.ticks-no li::before{width:12px;height:12px;border:0;left:2px;top:.45em;transform:none;background:linear-gradient(45deg,transparent 44%,var(--muted) 44% 56%,transparent 56%),linear-gradient(-45deg,transparent 44%,var(--muted) 44% 56%,transparent 56%)}
.ticks-inline{display:flex;flex-wrap:wrap;gap:8px 20px}

/* header */
.skip-link{position:absolute;left:-9999px;top:8px;background:var(--blue);color:#fff;padding:12px 16px;border-radius:var(--r);z-index:100}.skip-link:focus{left:8px}
.nav{position:sticky;top:0;z-index:50;background:#fff;height:var(--hh);transition:box-shadow .2s var(--ease)}
.nav.scrolled{box-shadow:0 1px 0 var(--g200),0 8px 24px rgba(14,31,56,.06)}
.nav-in{max-width:1400px;margin:0 auto;height:100%;padding-inline:var(--gut);display:flex;align-items:center;gap:24px}
.brand{flex:none;display:flex;align-items:center;min-height:48px}.brand img{height:36px;width:auto}
.menu{display:flex;align-items:center;gap:2px;margin-left:auto;list-style:none;padding:0}
.menu>li{position:relative}
.menu a,.menu .mm-t{display:flex;align-items:center;gap:4px;height:44px;padding:0 12px;border-radius:var(--r);font:600 1rem var(--sans);color:var(--ink);text-decoration:none;background:none;border:0;cursor:pointer}
.menu a[aria-current="page"],.menu .mm-t.is-current{box-shadow:inset 0 -2px 0 var(--blue);border-radius:0}
.mm-t::after{content:"";width:6px;height:6px;border-right:1.8px solid currentColor;border-bottom:1.8px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform .2s var(--ease)}
.mm-t[aria-expanded="true"]::after{transform:translateY(1px) rotate(-135deg)}
.mega{position:absolute;top:calc(100% + 14px);left:-12px;width:min(640px,80vw);background:#fff;box-shadow:var(--sh-2);border-top:3px solid var(--blue);padding:24px;display:grid;grid-template-columns:1fr 1fr;gap:4px 24px;
  opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .2s var(--ease),transform .2s var(--ease),visibility 0s linear .2s}
.mega.is-open{opacity:1;visibility:visible;transform:none;transition-delay:0s}
.mega a{height:auto;display:block;padding:8px 12px;border-radius:var(--r)}
.mega a b{display:block;font-weight:600;font-size:1rem;color:var(--ink)}.mega a span{display:block;font-size:0.875rem;color:var(--muted);line-height:1.4;margin-top:2px}
.mega .mega-all{font-size:0.875rem;grid-column:1/-1;border-top:1px solid var(--g100);margin-top:8px;padding-top:12px;font-size:0.875rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--blue)}
.nav-cta{display:flex;gap:8px;align-items:center;flex:none}
.nav-tel{font-weight:600;font-size:1rem;color:var(--navy);text-decoration:none;white-space:nowrap;padding:0 4px;min-height:48px;display:inline-flex;align-items:center}
.nav-cta .btn{min-height:46px;padding:8px 16px;font-size:0.9375rem}
.menu-toggle{display:none;align-items:center;gap:8px;min-height:46px;padding:0 12px;border-radius:var(--r);border:0;box-shadow:inset 0 0 0 1.5px var(--g200);background:#fff;font:600 0.9375rem var(--sans);color:var(--ink);cursor:pointer;transition:transform .16s var(--ease)}
.menu-toggle:active{transform:scale(.97)}
@media(hover:hover) and (pointer:fine){.menu a:hover,.menu .mm-t:hover{background:var(--g50)}.mega a:hover{background:var(--g50)}.nav-tel:hover{color:var(--blue)}}
.mnav{position:fixed;inset:var(--hh) 0 0 0;z-index:70;background:#fff;overflow-y:auto;overscroll-behavior:contain;padding:8px var(--gut) calc(120px + env(safe-area-inset-bottom));
  opacity:0;visibility:hidden;transform:translateY(-8px);transition:opacity .2s var(--ease),transform .2s var(--ease),visibility 0s linear .2s}
.mnav.is-open{opacity:1;visibility:visible;transform:none;transition-delay:0s}
.mnav details{border-bottom:1px solid var(--g100)}
.mnav summary,.mnav>a{display:flex;justify-content:space-between;align-items:center;min-height:58px;font-size:1.25rem;font-weight:600;list-style:none;cursor:pointer;text-decoration:none;color:var(--ink);border-bottom:1px solid var(--g100)}
.mnav details>summary{border-bottom:0}
.mnav summary::-webkit-details-marker{display:none}
.mnav summary::after{content:"";width:9px;height:9px;border-right:2px solid var(--blue);border-bottom:2px solid var(--blue);transform:rotate(45deg);margin-right:4px;transition:transform .2s var(--ease)}
.mnav details[open] summary::after{transform:rotate(-135deg)}
.mnav details a{display:block;padding:12px 0 12px 12px;font-size:1.0625rem;color:var(--body);text-decoration:none;border-left:2px solid var(--g100)}
.mnav details div{padding:0 0 12px}
.mnav .ctas{margin-top:24px}
body.menu-open{overflow:hidden}body.menu-open .callbar{display:none}
.menu-toggle .mt-open,.menu-toggle .mt-close{display:inline-flex;align-items:center;gap:4px}.menu-toggle .mt-close{display:none}.menu-toggle[aria-expanded="true"] .mt-open{display:none}.menu-toggle[aria-expanded="true"] .mt-close{display:inline-flex}
@media(max-width:1180px){.menu{display:none}.menu-toggle{display:inline-flex}.nav-in{justify-content:space-between}.nav-cta{margin-left:auto}}
@media(max-width:720px){:root{--hh:64px}.brand img{height:30px}.nav-tel,.nav-cta .btn-wa{display:none}.nav-cta .btn{min-height:44px;padding:8px 12px}.nav-in{gap:8px}}
@media(max-width:380px){.brand img{height:26px}.nav-cta .btn-call span{display:none}}

/* breadcrumbs */
.crumbs-wrap{max-width:1280px;margin:0 auto;padding:14px var(--gut) 0}
.crumbs{font-size:0.875rem;color:var(--muted);display:flex;flex-wrap:wrap;gap:2px 8px;align-items:center}
.crumbs a{color:var(--muted);text-decoration:none;display:inline-flex;align-items:center;min-height:44px;min-width:44px;justify-content:center;padding:0 2px}
@media(hover:hover) and (pointer:fine){.crumbs a:hover{color:var(--blue)}}
.crumbs-dark,.crumbs-wrap:has(+.hero-dark){max-width:none;background:var(--navy);padding:10px max(var(--gut),calc((100% - 1280px)/2 + var(--gut))) 0}
.crumbs-dark .crumbs,.crumbs-dark .crumbs a,.crumbs-wrap:has(+.hero-dark) .crumbs,.crumbs-wrap:has(+.hero-dark) .crumbs a{color:var(--on-dark-muted)}
.crumbs-wrap:has(+.hero-dark) .crumbs a:hover{color:#fff}

/* hero: BMW split. Text on navy, photo full height on the right. */
.hero{padding-block:clamp(40px,6vw,88px)}
.hero-dark{background:var(--navy);color:#fff}
.hero-dark h1,.hero-dark h2{color:#fff}.hero-dark h1 em{color:var(--on-dark)}.hero-dark .lede{color:var(--on-dark)}
.hero-dark .small{color:var(--on-dark-muted)}.hero-dark .k{color:var(--on-dark-accent)}
.hero-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,72px);align-items:center}
.hero-grid>*{min-width:0}
.hero .lede{margin-top:20px}
.hero-proof{display:flex;align-items:center;gap:12px 16px;flex-wrap:wrap;margin-top:24px;font-size:0.9375rem}
.hero-photo{position:relative}
.hero-photo .ph{aspect-ratio:5/4;border-radius:var(--r)}
.hero-photo .cap{margin:8px 0 0;font-size:0.875rem;color:var(--muted)}.hero-dark .hero-photo .cap{color:var(--on-dark-muted)}
@media(max-width:960px){.hero-grid{grid-template-columns:1fr}.hero-photo .ph{aspect-ratio:4/3}}
.float{position:absolute;background:#fff;color:var(--ink);border-radius:var(--r);padding:12px 16px;max-width:280px;box-shadow:var(--sh-2);font-size:0.9375rem;line-height:1.4}
.float b{display:block;font-weight:700;font-size:1.25rem;line-height:1.15;margin-bottom:4px}
.float .stars{font-size:0.875rem}
.float-tl{left:16px;top:16px}.float-br{right:16px;bottom:16px}.float-bl{left:16px;bottom:16px}
@media(max-width:560px){.float-tl,.float-br{display:none}.float{max-width:220px;padding:8px 12px}.float b{font-size:1.0625rem}}

/* the split hero used on the homepage and key pages: edge-to-edge photo */
.hero-split{display:grid;grid-template-columns:1fr 1fr;background:var(--navy);color:#fff;min-height:clamp(540px,calc(100svh - var(--hh) - 90px),760px)}
.hero-split .hs-txt{padding:clamp(40px,6vw,88px) clamp(24px,4vw,64px) clamp(40px,6vw,88px) max(var(--gut),calc((100vw - 1280px)/2 + var(--gut)));display:flex;flex-direction:column;justify-content:center;width:100%;min-width:0}
.hero-split .k,.hero-split .crumbs a,.hero-split .crumbs{color:var(--on-dark-accent)}
.hero-split h1{color:#fff;font-size:clamp(2.375rem,3.8vw,3.5rem);line-height:1.05}.hero-split h1 span{display:block;font-weight:300;color:var(--on-dark)}
.hero-split .lede{color:var(--on-dark);margin:20px 0 0;max-width:34em}
.hero-split .hs-ph{position:relative;min-height:320px;overflow:hidden;background:var(--navy-2)}
.hero-split .hs-ph>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero-split .ctas{margin-top:24px}
.hero-split .ticks{color:var(--on-dark-muted);font-size:0.9375rem;margin-top:20px}
.hero-badge{position:absolute;left:20px;bottom:20px;display:flex;align-items:center;gap:8px;background:#fff;color:var(--ink);padding:8px 12px;border-radius:var(--r);box-shadow:var(--sh-2);font-size:0.9375rem;text-decoration:none}
.hero-badge b{font-size:1.25rem;line-height:1}.hero-badge img{height:22px;width:auto}
@media(max-width:860px){.hero-split{grid-template-columns:1fr;min-height:0}.hero-split .hs-txt{padding:32px var(--gut) 28px}.hero-split .hs-ph{min-height:0;aspect-ratio:4/3}.hero-split .ctas .btn{width:100%}.hero-badge{left:12px;bottom:12px}}

/* trust strip under the hero */
.tstrip{background:var(--g50);border-bottom:1px solid var(--g100)}
.tstrip ul{list-style:none;margin:0 auto;padding:26px var(--gut);max-width:1280px;display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.tstrip b{display:block;font-size:1.75rem;line-height:1.1;color:var(--navy);font-weight:700}.tstrip span{font-size:0.9375rem;color:var(--muted)}
@media(max-width:860px){.tstrip ul{grid-template-columns:1fr 1fr;gap:16px 12px}.tstrip b{font-size:1.5rem}}

/* contact cards under the hero */
.contact-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:-24px;position:relative;z-index:2}
.cc{display:flex;gap:12px;align-items:center;background:#fff;border-radius:var(--r);padding:16px 20px;text-decoration:none;color:var(--ink);box-shadow:var(--sh-2);transition:transform .16s var(--ease)}
.cc:active{transform:scale(.98)}
.cc i{flex:none;width:48px;height:48px;border-radius:var(--r);display:flex;align-items:center;justify-content:center;background:var(--blue-soft);font-style:normal}
.cc i svg{width:22px;height:22px;stroke:var(--blue);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.cc-wa i{background:var(--wa)}.cc-wa i svg{fill:var(--ink);stroke:none}
.cc small{display:block;font-size:0.875rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.cc b{display:block;font-weight:700;font-size:1.25rem;line-height:1.25;margin-top:2px}
@media(max-width:860px){.contact-cards{grid-template-columns:1fr;margin-top:16px;gap:8px}.cc{box-shadow:var(--sh-1)}}

/* review platforms */
.proof{padding-block:clamp(48px,6vw,80px)}
.proof h2{text-align:center;font-size:clamp(1.625rem,3vw,2.375rem)}
.plats{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin-top:32px}
.plat{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;text-align:center;background:#fff;border-radius:var(--r);padding:20px 12px;text-decoration:none;color:var(--ink);min-height:150px;box-shadow:var(--sh-1);transition:transform .16s var(--ease),box-shadow .2s var(--ease)}
.plat:active{transform:scale(.98)}
.plat img,.plat svg{height:24px;width:auto}.plat .plogo-bark{height:20px}
.plat b{font-weight:700;font-size:2rem;line-height:1}
.plat-name{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.plat-n{font-size:0.875rem;color:var(--muted)}
@media(hover:hover) and (pointer:fine){.plat:hover{box-shadow:var(--sh-2)}}
@media(max-width:900px){.plats{grid-template-columns:repeat(3,1fr)}}@media(max-width:520px){.plats{grid-template-columns:1fr 1fr}.plat:last-child{grid-column:1/-1}.plat{min-height:128px}}
.stars{color:var(--star);letter-spacing:1.5px;font-size:0.9375rem}
.gbadge{display:inline-flex;align-items:center;gap:8px;min-height:44px;background:#fff;border-radius:var(--r);padding:8px 12px;text-decoration:none;color:var(--ink);font-size:0.9375rem;box-shadow:var(--sh-1)}
.gbadge img{height:22px;width:auto}.gbadge b{font-weight:700;font-size:1.25rem;line-height:1}
.google-wordmark{height:22px;width:auto}

/* cards */
.cards3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media(max-width:960px){.cards3{gap:12px}.pcard .pc-body{padding:16px 16px 20px}}@media(max-width:760px){.cards3{grid-template-columns:1fr}}
.pcard,.svc-card,.also-card{display:flex;flex-direction:column;background:#fff;border-radius:var(--r);overflow:hidden;text-decoration:none;color:var(--ink);box-shadow:var(--sh-1);transition:transform .16s var(--ease),box-shadow .2s var(--ease);min-width:0}
.pcard:active,.svc-card:active,.also-card:active{transform:scale(.985)}
.pcard .pc-img{overflow:hidden;background:var(--g100)}
.pcard .ph,.svc-card img,.also-card img{aspect-ratio:4/3;border-radius:0;width:100%;object-fit:cover;transition:transform .5s var(--ease)}
.pcard .pc-body{padding:20px 20px 24px;display:flex;flex-direction:column;gap:8px;flex:1}
.pcard h3{font-size:1.25rem}
.pcard p{color:var(--body);font-size:1rem}
.pcard .arrow{margin-top:auto;padding-top:8px}
.svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media(max-width:960px){.svc-grid{grid-template-columns:1fr 1fr}}@media(max-width:600px){.svc-grid{grid-template-columns:1fr}}
.svc-card span,.also-card span{padding:20px 20px 24px;display:flex;flex-direction:column;gap:4px;color:var(--body);font-size:1rem}
.svc-card b,.also-card b{font-weight:700;font-size:1.25rem;line-height:1.25;color:var(--ink)}
@media(hover:hover) and (pointer:fine){.pcard:hover,.svc-card:hover,.also-card:hover{box-shadow:var(--sh-2)}.pcard:hover .ph,.svc-card:hover img,.also-card:hover img{transform:scale(1.03)}}
.also{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:24px}
@media(max-width:960px){.also{grid-template-columns:1fr 1fr}}@media(max-width:520px){.also{grid-template-columns:1fr}}
.sec-dark .pcard,.sec-dark .svc-card{box-shadow:none}

/* feature rows */
.frow{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,6vw,96px);align-items:center}
.frow+.frow{margin-top:clamp(56px,7vw,104px)}
.frow.flip>:first-child{order:2}
.frow>*{min-width:0}
.frow .fimg{position:relative}
.frow .fimg .ph{aspect-ratio:5/4;border-radius:var(--r);width:100%;object-fit:cover}
@media(max-width:880px){.frow{grid-template-columns:1fr}.frow.flip>:first-child{order:0}}
.ph{border-radius:var(--r);width:100%;object-fit:cover;aspect-ratio:4/3}

/* gallery */
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.gallery figure{margin:0;min-width:0}.gallery img{aspect-ratio:4/3;object-fit:cover;width:100%;border-radius:var(--r)}
.gallery figcaption{font-size:0.9375rem;color:var(--body);margin-top:8px}
.gallery-lead figure:first-child{grid-column:span 2;grid-row:span 2}.gallery-lead figure:first-child img{aspect-ratio:auto;height:calc(100% - 32px)}
@media(max-width:880px){.gallery{grid-template-columns:1fr 1fr;gap:12px}.gallery-lead figure:first-child{grid-column:1/-1;grid-row:auto}.gallery-lead figure:first-child img{aspect-ratio:4/3;height:auto}}
.strip{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:8px;-webkit-overflow-scrolling:touch;scrollbar-width:thin}
.strip figure{flex:0 0 min(340px,78vw);scroll-snap-align:start;margin:0}.strip img{aspect-ratio:4/3;object-fit:cover;border-radius:var(--r);width:100%}
.strip figcaption{font-size:0.9375rem;color:var(--body);margin-top:8px}

/* before and after */
.ba-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
@media(max-width:760px){.ba-grid{grid-template-columns:1fr}}
.ba{position:relative;aspect-ratio:4/3;border-radius:var(--r);overflow:hidden;user-select:none;-webkit-user-select:none;background:var(--g100);touch-action:pan-y}
.ba img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ba-before{position:absolute;inset:0;clip-path:inset(0 calc(100% - var(--pos)) 0 0)}
.ba-line{position:absolute;top:0;bottom:0;left:var(--pos);width:3px;background:#fff;transform:translateX(-50%);pointer-events:none}
.ba-line::after{content:"\2194";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:48px;height:48px;border-radius:50%;background:#fff;box-shadow:0 4px 14px rgba(14,31,56,.28);display:flex;align-items:center;justify-content:center;font-size:1.25rem;font-weight:700;color:var(--navy)}
.ba-tag{position:absolute;top:14px;background:var(--scrim);color:#fff;font-size:0.875rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;padding:4px 8px;border-radius:var(--r);pointer-events:none}
.ba-tag-b{left:14px}.ba-tag-a{right:14px}
.ba input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;margin:0}
.ba input:focus-visible+.ba-focus,.ba:focus-within{outline:3px solid var(--blue);outline-offset:3px}
.ba-cap{font-size:0.9375rem;color:var(--body);margin-top:8px}

/* layers diagram */
.anat{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(28px,5vw,72px);align-items:center}
.anat>*{min-width:0}
.anat svg{width:100%;height:auto;display:block}
.anat-fig{margin:0}.anat-fig figcaption{font-size:1rem;font-weight:600;margin-bottom:12px}
.anat-list{list-style:none;padding:0;margin:0;display:grid;counter-reset:a}
.anat-list li{display:grid;grid-template-columns:48px 1fr;gap:12px;padding:16px 0;border-top:1px solid var(--g200)}
.sec-dark .anat-list li{border-color:var(--hair-dark)}
.anat-list li::before{counter-increment:a;content:counter(a);width:34px;height:34px;border-radius:50%;background:var(--blue);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:0.9375rem}
.anat-list b{display:block;font-weight:700;margin-bottom:2px}
@media(max-width:880px){.anat{grid-template-columns:1fr}}

/* numbered steps */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;counter-reset:s;list-style:none;padding:0;margin:0}
.steps li{background:#fff;border-radius:var(--r);padding:24px 24px;box-shadow:var(--sh-1)}
.sec-dark .steps li{background:var(--navy-2);box-shadow:none}
.steps li::before{counter-increment:s;content:counter(s);display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;background:var(--navy);color:#fff;font-weight:700;font-size:1.0625rem;margin-bottom:16px}
.sec-dark .steps li::before{background:var(--blue)}
.steps b{display:block;font-weight:700;font-size:1.25rem;line-height:1.25;margin-bottom:4px}
.steps p{color:var(--body);font-size:1rem}.sec-dark .steps p{color:var(--on-dark)}
@media(max-width:960px){.steps{grid-template-columns:1fr 1fr}}@media(max-width:620px){.steps{grid-template-columns:1fr}}
.steps-big{list-style:none;padding:0;margin:20px 0 0;display:grid;gap:12px;counter-reset:sb}
.steps-big li{position:relative;padding-left:48px;min-height:36px}
.steps-big li::before{counter-increment:sb;content:counter(sb);position:absolute;left:0;top:-2px;width:36px;height:36px;border-radius:50%;background:var(--navy);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:1rem}
.sec-dark .steps-big li::before{background:var(--blue)}

/* pillars */
.pillars{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.pillar{background:#fff;border-radius:var(--r);padding:24px 24px;box-shadow:var(--sh-1)}
.pillar i{display:flex;width:48px;height:48px;border-radius:var(--r);background:var(--blue-soft);align-items:center;justify-content:center;margin-bottom:16px}
.pillar i svg{width:24px;height:24px;stroke:var(--blue);fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.pillar h3{font-size:1.25rem;margin-bottom:8px}
.pillar p{color:var(--body);font-size:1rem}
.sec-dark .pillar{background:var(--navy-2);box-shadow:none}.sec-dark .pillar i{background:var(--fill-dark)}.sec-dark .pillar i svg{stroke:var(--on-dark-accent)}
@media(max-width:1060px){.pillars{grid-template-columns:1fr 1fr}}@media(max-width:560px){.pillars{grid-template-columns:1fr}}

/* answer box */
.answer{background:var(--blue-soft);border-left:4px solid var(--blue);border-radius:0 var(--r) var(--r) 0;padding:20px 24px;margin-top:24px;max-width:820px}
.answer p{font-size:1.125rem;line-height:1.55;color:var(--ink)}
.answer p:first-child::first-line{font-weight:600}
.sec-dark .answer,.hero-dark .answer{background:var(--fill-dark);border-color:var(--on-dark-accent)}.sec-dark .answer p,.hero-dark .answer p{color:#fff}

/* facts, costs, Q&A */
.facts,.cost-card,.qa-card{background:#fff;border-radius:var(--r);padding:24px;box-shadow:var(--sh-1)}
.facts h3{font-size:1.25rem;margin-bottom:4px}
.facts dl{margin:16px 0 0;display:grid}
.facts dl>div{display:grid;grid-template-columns:160px 1fr;gap:16px;padding:12px 0;border-top:1px solid var(--g100)}
.facts dt{font-size:0.9375rem;color:var(--muted)}.facts dd{margin:0;font-weight:600}
@media(max-width:480px){.facts dl>div{grid-template-columns:1fr;gap:2px}}
.cost-grid,.qa-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:clamp(28px,4vw,64px);align-items:start}
.cost-grid>*,.qa-grid>*{min-width:0}
@media(max-width:900px){.cost-grid,.qa-grid{grid-template-columns:1fr}}
.qa-grid h3,.cost-grid h3{font-size:1.25rem;margin:24px 0 8px}.qa-grid h3:first-child,.cost-card h3:first-child{margin-top:0}
.qa-grid p+p,.cost-grid p+p{margin-top:12px}
.qa-grid p,.cost-grid p{max-width:66ch}

/* project notes */
.proj{display:grid;grid-template-columns:1.1fr .9fr;background:#fff;border-radius:var(--r);overflow:hidden;box-shadow:var(--sh-1)}
.proj>*{min-width:0}
.proj .ph{border-radius:0;height:100%;aspect-ratio:auto;min-height:340px}
.proj-body{padding:clamp(24px,4vw,48px)}
.proj-body h3{font-size:clamp(1.375rem,2.2vw,1.875rem);margin-bottom:8px}
.proj-meta{display:grid;grid-template-columns:1fr 1fr;gap:0 20px;margin:20px 0 0}
.proj-meta div{padding:12px 0;border-top:1px solid var(--g100)}
.proj-meta dt{font-size:0.875rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:600}
.proj-meta dd{margin:2px 0 0;font-weight:600}
@media(max-width:880px){.proj{grid-template-columns:1fr}.proj .ph{min-height:0;aspect-ratio:4/3}}

/* questions to ask any installer */
.qlist{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:1fr 1fr;gap:16px}
.qlist li{background:#fff;border-radius:var(--r);padding:24px 24px;box-shadow:var(--sh-1);border-left:3px solid var(--blue)}
.qlist q{display:block;font-weight:700;font-size:1.25rem;line-height:1.4;quotes:none;margin-bottom:8px}
.qlist p{color:var(--body);font-size:1rem}
.qlist p b{color:var(--navy)}
@media(max-width:760px){.qlist{grid-template-columns:1fr}}

/* reviews */
.rv-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media(max-width:960px){.rv-grid{grid-template-columns:1fr}}
.rv{margin:0;background:#fff;border-radius:var(--r);padding:24px;display:flex;flex-direction:column;gap:12px;box-shadow:var(--sh-1);min-width:0}
.sec-dark .rv{background:var(--navy-2);box-shadow:none;color:#fff}.sec-dark .rv blockquote{color:var(--on-dark)}.sec-dark .rv figcaption,.sec-dark .review-source{color:var(--on-dark-muted)}.sec-dark .rv figcaption b{color:#fff}
.rv-top{display:flex;justify-content:space-between;align-items:center;gap:12px}
.rv-src img{height:20px;width:auto}
.sec-dark .rv-src{background:#fff;border-radius:var(--r);padding:4px 8px;display:inline-flex}
.rv blockquote{margin:0;font-size:1.0625rem;line-height:1.6}
.rv figcaption{font-size:0.9375rem;color:var(--muted)}.rv figcaption b{color:var(--ink);font-weight:600}
.review-source{font-size:0.875rem;color:var(--muted);margin-top:auto;display:inline-flex;align-items:center;min-height:44px}
.rv-cut{color:var(--muted)}
.feature-rv{background:var(--navy);color:#fff;border-radius:var(--r);padding:clamp(28px,5vw,64px);position:relative;overflow:hidden}
.feature-rv .fr-top{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;flex-wrap:wrap;font-size:0.875rem;letter-spacing:.12em;text-transform:uppercase;font-weight:600;color:var(--on-dark-muted)}
.feature-rv .fr-g{display:inline-flex;align-items:center;background:#fff;border-radius:var(--r);padding:8px 12px}
.feature-rv .fr-g img{height:22px;width:auto}
.fr-stars{margin-top:8px}.fr-stars .stars{color:var(--star);font-size:1.25rem;letter-spacing:3px}
.feature-rv blockquote{margin:20px 0 0;font-weight:600;font-size:clamp(1.375rem,2.6vw,2.125rem);line-height:1.4;letter-spacing:-.01em;max-width:38ch;color:#fff}
.fr-who{margin-top:16px;color:var(--on-dark-muted)}.fr-who b{color:#fff}

/* meet terry, video/photo slot */
.terry-photo{aspect-ratio:4/5;border-radius:var(--r);background:var(--g100);overflow:hidden;position:relative}
.terry-photo-sm{aspect-ratio:1;width:120px;border-radius:50%}.terry-photo-sm img{width:100%;height:100%;object-fit:cover}
.video-slot{position:relative;aspect-ratio:4/5;border-radius:var(--r);overflow:hidden;background:var(--g100)}
.video-slot img{width:100%;height:100%;object-fit:cover;object-position:50% 40%}
.video-slot .vcap{position:absolute;left:12px;right:12px;bottom:12px;color:#fff;font-size:0.875rem;background:var(--scrim);padding:8px 12px;border-radius:var(--r)}
@media(max-width:880px){.video-slot{aspect-ratio:4/3}}

/* photo quote */
.pq{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(28px,5vw,72px);align-items:center}
.pq>*{min-width:0}
.pq-card{background:#fff;border-radius:var(--r);padding:32px;color:var(--ink);box-shadow:var(--sh-2)}
.pq-num{display:block;font-weight:700;font-size:clamp(2rem,3.4vw,2.75rem);line-height:1;text-decoration:none;color:var(--navy)}
.pq-card p{margin:8px 0 16px;color:var(--body)}.pq-card .btn{width:100%;margin-top:8px}
.pq-steps{margin-top:24px}
@media(max-width:880px){.pq{grid-template-columns:1fr}}

/* guarantee block */
.guar{display:grid;grid-template-columns:auto 1fr;gap:clamp(24px,4vw,56px);align-items:center;background:#fff;padding:clamp(24px,4vw,48px);box-shadow:var(--sh-1);border-radius:var(--r)}
.seal{width:132px;height:132px;border-radius:50%;background:var(--navy);color:#fff;display:flex;align-items:center;justify-content:center;text-align:center;line-height:1.05;box-shadow:inset 0 0 0 6px var(--navy),inset 0 0 0 8px var(--on-dark-accent)}
.seal b{font-size:2.75rem;display:block;font-weight:700}.seal span{font-size:0.875rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase}
.guar h2,.guar h3{font-size:clamp(1.5rem,2.6vw,2.125rem);margin-bottom:8px}.guar p{color:var(--body);margin:0 0 12px}
.covers{display:grid;grid-template-columns:repeat(2,1fr);gap:8px 24px;list-style:none;padding:0;margin:0}.covers li{position:relative;padding-left:24px}
.covers li::before{content:"";position:absolute;left:2px;top:.45em;width:12px;height:7px;border-left:2.5px solid var(--blue);border-bottom:2.5px solid var(--blue);transform:rotate(-45deg)}
@media(max-width:760px){.guar{grid-template-columns:1fr}.seal{width:104px;height:104px}.seal b{font-size:2.125rem}.covers{grid-template-columns:1fr}}

/* closing CTA band */
.cta-band{background:var(--blue);color:#fff}
.cta-band h2,.cta-band h3{color:#fff}.cta-band .lede,.cta-band p{color:var(--on-dark)}
.cta-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(28px,5vw,72px);align-items:center}
.cta-grid>*{min-width:0}
.cta-band .cta-grid h2{max-width:18ch}.cta-band .cta-grid .lede{margin:16px 0 0}
.cta-photo img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--r);display:block}
.cta-band .btn-call{background:#fff;color:var(--navy)}
@media(hover:hover) and (pointer:fine){.cta-band .btn-call:hover{background:var(--g100)}}
@media(max-width:900px){.cta-grid{grid-template-columns:1fr}.cta-art{order:2}}

/* quote section */
.quote-sec{background:var(--navy);color:#fff}
.quote-sec h2{color:#fff}.quote-sec h2 em{color:var(--on-dark)}.quote-sec .lede{color:var(--on-dark)}.quote-sec .k{color:var(--on-dark-accent)}
.quote-sec .ticks{color:var(--on-dark)}
.quote-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,80px);align-items:start}
.quote-grid>*{min-width:0}
@media(max-width:900px){.quote-grid{grid-template-columns:1fr}}

/* 4-step quote form */
.qs{background:#fff;color:var(--ink);border-radius:var(--r);padding:clamp(22px,3vw,36px);position:relative;box-shadow:var(--sh-2)}
.qs .qs-q{font-weight:700;color:var(--ink);line-height:1.15;font-size:clamp(1.375rem,2vw,1.75rem);margin-bottom:16px}
.qs-status{font-size:0.875rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.qs-progress{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;margin:8px 0 20px}
.qs-progress span{height:4px;border-radius:var(--r);background:var(--g100)}.qs-progress span.on{background:var(--blue)}
.qs-opts{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.qs-opts button{min-height:56px;padding:12px 16px;border-radius:var(--r);border:0;box-shadow:inset 0 0 0 1.5px var(--g200);background:#fff;font:600 1rem var(--sans);color:var(--ink);text-align:left;cursor:pointer;transition:box-shadow .15s var(--ease),background-color .15s var(--ease),transform .16s var(--ease)}
.qs-opts button:active{transform:scale(.98)}
.qs-opts button[aria-pressed="true"]{box-shadow:inset 0 0 0 2px var(--blue);background:var(--blue-soft)}
@media(hover:hover) and (pointer:fine){.qs-opts button:hover{box-shadow:inset 0 0 0 2px var(--blue);background:var(--blue-soft)}}
@media(max-width:480px){.qs-opts{grid-template-columns:1fr}}
.qs-field{display:grid;gap:8px;font-weight:600;font-size:1rem;margin-top:12px}
.qs-field input,.qs-field select{font:400 1.0625rem var(--sans);min-height:54px;padding:12px 16px;border-radius:var(--r);border:0;box-shadow:inset 0 0 0 1.5px var(--g200);background:#fff;color:var(--ink);width:100%}
.qs-field input:focus,.qs-field select:focus{outline:none;box-shadow:inset 0 0 0 2px var(--blue),0 0 0 3px rgba(28,105,212,.18)}
.qs-field input[aria-invalid="true"]{box-shadow:inset 0 0 0 2px #B42318}
.qs-help{font-size:0.9375rem;color:var(--muted);margin-top:8px}.qs-help a{color:var(--blue)}
.qs-next,.qs-send{margin-top:20px;width:100%;min-height:56px;border:0;border-radius:var(--r);background:var(--blue);color:#fff;font:600 1.0625rem var(--sans);cursor:pointer;transition:background-color .15s var(--ease),transform .16s var(--ease)}
.qs-next:active,.qs-send:active{transform:scale(.98)}
@media(hover:hover) and (pointer:fine){.qs-next:hover,.qs-send:hover{background:var(--blue-press)}}
.qs-send:disabled{opacity:.7;cursor:progress}
.qs-skip,.qs-back{margin-top:12px;min-height:48px!important;background:none;border:0;font:600 1rem var(--sans);color:var(--muted);text-decoration:underline;text-underline-offset:4px;cursor:pointer;min-height:44px}
.qs-wa-btn{width:100%;margin-top:12px}
.qs-trap{position:absolute;left:-9999px}
.field-error{color:#B42318;font-size:0.9375rem;margin-top:4px}
.qs-error{margin-top:16px;padding:16px;border-radius:var(--r);background:#FEF3F2;color:#7A271A}
.qs-done .qs-q{color:var(--navy)}

/* FAQ */
.faq-wrap{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(28px,5vw,80px);align-items:start}
.faq-wrap>h2{position:sticky;top:calc(var(--hh) + 24px)}
.faq-list{display:grid}
@media(max-width:900px){.faq-wrap{grid-template-columns:1fr}.faq-wrap>h2{position:static}}
.faq{border-top:1px solid var(--g200)}
.faq:last-child{border-bottom:1px solid var(--g200)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:20px 0;font-size:1.125rem;font-weight:600;line-height:1.4;min-height:56px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:none;width:10px;height:10px;margin-right:8px;border-right:2px solid var(--blue);border-bottom:2px solid var(--blue);transform:translateY(-3px) rotate(45deg);transition:transform .2s var(--ease)}
.faq[open] summary::after{transform:translateY(2px) rotate(-135deg)}
.faq p{padding:0 40px 20px 0;color:var(--body);max-width:68ch}
.sec-dark .faq,.sec-dark .faq:last-child{border-color:var(--hair-dark)}.sec-dark .faq summary{color:#fff}

/* comparison table */
.compare-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:var(--r);background:#fff;box-shadow:var(--sh-1)}
.compare{border-collapse:collapse;width:100%;font-size:1rem}.compare:has(tr>:nth-child(4)){min-width:680px}
@media(max-width:560px){.compare th,.compare td{padding:12px 12px;font-size:0.9375rem}}
.compare th,.compare td{padding:16px 16px;text-align:left;vertical-align:top;border-bottom:1px solid var(--g100)}
.compare thead th{font-weight:700;font-size:1.125rem;background:var(--navy);color:#fff}
.compare thead th a{text-decoration:none;color:#fff;display:inline-flex;align-items:center;min-height:44px}
.compare tbody th{font-weight:600;color:var(--muted);width:22%}
.compare tbody tr:nth-child(even) td,.compare tbody tr:nth-child(even) th{background:var(--g50)}
.compare tr:last-child th,.compare tr:last-child td{border-bottom:0}
.swipe-hint{display:none;font-size:0.875rem;color:var(--muted);margin-top:8px}
@media(max-width:720px){.swipe-hint{display:block}}

/* towns */
.areas{display:flex;flex-wrap:wrap;gap:8px}
.areas a,.chip-link{display:inline-flex;align-items:center;min-height:46px;padding:8px 16px;border-radius:var(--r);background:#fff;box-shadow:inset 0 0 0 1px var(--g200);text-decoration:none;color:var(--ink);font-size:1rem;font-weight:600;transition:box-shadow .15s var(--ease),transform .16s var(--ease)}
.areas a:active,.chip-link:active{transform:scale(.97)}
.sec-dark .areas a{background:transparent;box-shadow:inset 0 0 0 1px rgba(255,255,255,.3);color:#fff}
@media(hover:hover) and (pointer:fine){.areas a:hover,.chip-link:hover{box-shadow:inset 0 0 0 1.5px var(--blue);color:var(--blue)}.sec-dark .areas a:hover{box-shadow:inset 0 0 0 1.5px #fff;color:#fff}}
.town-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0 32px}
.town-grid a{display:flex;justify-content:space-between;align-items:center;min-height:60px;padding:12px 0;border-bottom:1px solid var(--g200);text-decoration:none;font-weight:600;font-size:1.125rem;line-height:1.25}
.sec-dark .town-grid a{border-color:var(--hair-dark);color:#fff}
.town-grid a::after{content:"";width:7px;height:7px;border-top:2px solid var(--blue);border-right:2px solid var(--blue);transform:rotate(45deg);transition:transform .16s var(--ease)}
.sec-dark .town-grid a::after{border-color:var(--on-dark-accent)}
@media(hover:hover) and (pointer:fine){.town-grid a:hover::after{transform:translateX(3px) rotate(45deg)}}
@media(max-width:960px){.town-grid{grid-template-columns:1fr 1fr}}@media(max-width:520px){.town-grid{grid-template-columns:1fr}}
.local-card,.town-card{background:#fff;border-radius:var(--r);padding:24px;box-shadow:var(--sh-1)}
.local-card h3,.town-card h3{font-size:1.25rem;margin-bottom:8px}
.cards2{display:grid;grid-template-columns:1fr 1fr;gap:20px}
@media(max-width:760px){.cards2{grid-template-columns:1fr}}

/* articles */
.art-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media(max-width:960px){.art-grid{grid-template-columns:1fr 1fr}}@media(max-width:620px){.art-grid{grid-template-columns:1fr}}
.art-card{display:flex;flex-direction:column;gap:8px;background:#fff;border-radius:var(--r);padding:24px;text-decoration:none;color:var(--ink);box-shadow:var(--sh-1);border-top:3px solid var(--blue);transition:transform .16s var(--ease),box-shadow .2s var(--ease)}
.art-card:active{transform:scale(.985)}
.art-card b{font-weight:700;font-size:1.25rem;line-height:1.4}
.art-sum{color:var(--body);font-size:1rem}
.art-meta{margin-top:auto;font-size:0.875rem;color:var(--muted)}
.art-cat{display:inline-flex;align-self:flex-start;align-items:center;font-size:0.875rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--blue);text-decoration:none}
@media(hover:hover) and (pointer:fine){.art-card:hover{box-shadow:var(--sh-2)}}
.art-head{padding-top:clamp(24px,4vw,48px);max-width:860px}
.art-head h1{font-size:clamp(2.125rem,4.6vw,3.5rem);margin-top:12px}
.art-by{margin-top:16px;color:var(--muted);font-size:0.9375rem}.art-by a{color:var(--blue)}
.art-body{max-width:860px;padding-block:clamp(36px,5vw,64px)}.art-body>*{max-width:760px}.art-body>.compare-wrap,.art-body>.ask{max-width:none}
.art-body h2{font-size:clamp(1.625rem,2.6vw,2.125rem);margin:40px 0 12px}
.art-body h3{font-size:1.25rem;margin:32px 0 8px}
.art-body p{margin:0 0 16px;font-size:1.125rem;line-height:1.7}
.art-body ul,.art-body ol{margin:0 0 20px;padding-left:24px;font-size:1.125rem;line-height:1.7}.art-body li{margin-bottom:8px}
.art-body a{color:var(--blue);text-underline-offset:4px}
.art-body .compare-wrap{margin:24px 0}
.author{display:grid;grid-template-columns:120px 1fr;gap:24px;align-items:center}
@media(max-width:600px){.author{grid-template-columns:1fr}}
.ask{display:grid;grid-template-columns:1.2fr .8fr;gap:24px;align-items:center;background:var(--blue-soft);border-radius:var(--r);padding:24px;margin:32px 0;border-left:4px solid var(--blue)}
.ask h3{font-size:1.25rem;margin-bottom:4px}.ask p{font-size:1rem!important;margin:0!important}
@media(max-width:760px){.ask{grid-template-columns:1fr}}
.cat-chips,.chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:24px}
.chipf,.cat-chips a{min-height:46px;padding:8px 16px;border-radius:var(--r);border:0;box-shadow:inset 0 0 0 1px var(--g200);background:#fff;font:600 1rem var(--sans);color:var(--ink);text-decoration:none;cursor:pointer;display:inline-flex;align-items:center;transition:transform .16s var(--ease)}
.chipf:active,.cat-chips a:active{transform:scale(.97)}
.chipf.is-on,.chipf[aria-pressed="true"],.cat-chips a[aria-current="page"]{background:var(--navy);box-shadow:none;color:#fff}

/* legal */
.legal{max-width:760px}.legal h2{font-size:1.75rem;margin:40px 0 12px}.legal p,.legal li{font-size:1.0625rem;margin-bottom:12px}

/* platform marks in prose */
.pm{display:inline-flex;align-items:center;gap:4px;vertical-align:-4px;white-space:nowrap}.pm img{height:18px;width:auto;max-width:none}.pm svg{width:18px;height:18px}.pm-word{height:16px!important}

/* footer */
.foot{background:var(--navy-deep);color:var(--on-dark-muted);padding:clamp(56px,7vw,88px) 0 0;font-size:1rem}
.foot-in{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px}
.foot-logo{height:40px;width:auto;margin-bottom:20px}
.foot h4{color:#fff;margin-bottom:8px;font-size:0.875rem}
.foot a{display:flex;align-items:center;min-height:44px;color:var(--on-dark);text-decoration:none}
@media(hover:hover) and (pointer:fine){.foot a:hover{color:#fff;text-decoration:underline;text-underline-offset:4px}}
.foot-big{font-size:clamp(1.625rem,2.6vw,2.125rem);font-weight:700;line-height:1.15;color:#fff;margin-bottom:12px}
.foot-big a{display:inline;padding:0;color:var(--on-dark-accent)}
.foot .btn{display:inline-flex;padding:12px 20px;color:var(--ink)}
.foot .ctas{margin-top:20px}
.foot-legal{margin-top:48px;padding:22px 0 calc(28px + env(safe-area-inset-bottom));border-top:1px solid var(--hair-dark);font-size:0.875rem;color:var(--on-dark-muted);display:flex;justify-content:space-between;gap:12px 24px;flex-wrap:wrap}
.foot-legal a{display:inline-flex;align-items:center;min-height:44px;padding:0 4px;color:var(--on-dark-muted)}
@media(max-width:960px){.foot-in{grid-template-columns:1fr 1fr}}@media(max-width:560px){.foot-in{grid-template-columns:1fr;gap:24px}}
@media(max-width:860px){.foot{padding-bottom:80px}}

/* mobile action dock: appears once the page's first call buttons scroll away */
.callbar{position:fixed;left:0;right:0;bottom:0;z-index:60;display:none;grid-template-columns:1fr 1fr;gap:8px;padding:10px 12px calc(10px + env(safe-area-inset-bottom,0px));background:rgba(255,255,255,.94);-webkit-backdrop-filter:blur(16px) saturate(180%);backdrop-filter:blur(16px) saturate(180%);box-shadow:0 -1px 0 var(--g200);
  transform:translateY(110%);transition:transform .2s var(--ease)}
.callbar.on{transform:none}
.cb{display:flex;align-items:center;justify-content:center;gap:8px;min-height:50px;border-radius:var(--r);text-decoration:none;font-weight:600;font-size:1rem;transition:transform .16s var(--ease)}
.cb:active{transform:scale(.97)}
.cb svg{width:20px;height:20px}
.cb-call{background:var(--blue);color:#fff}.cb-call svg{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.cb-wa{background:var(--wa);color:var(--ink)}.cb-q{display:none}
@media(max-width:860px){.callbar{display:grid}}

/* reveal on scroll (only when JS runs and motion is allowed) */
@media(prefers-reduced-motion:no-preference){.js .rv-in{transition:opacity var(--dur-slow) var(--ease),transform var(--dur-slow) var(--ease)}.js .rv-in:not(.on){opacity:0;transform:translateY(14px)}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* focus */
a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid var(--blue);outline-offset:3px}
.sec-dark a:focus-visible,.hero-dark a:focus-visible,.hero-split a:focus-visible,.foot a:focus-visible,.cta-band a:focus-visible,.quote-sec a:focus-visible{outline-color:#fff}

.ph-todo{background:repeating-linear-gradient(45deg,var(--g100),var(--g100) 12px,var(--g50) 12px,var(--g50) 24px)}
.photo-slot img{opacity:1}

/* show more (reviews wall) */
.show-more{display:flex;justify-content:center;margin-top:24px}
.sm-hide{display:none!important}
.art-head .art-cat{min-height:44px}
.compare td a,.compare th a{display:inline-flex;align-items:center;min-height:44px}
.pm-p{margin-left:-4px}
@media(max-width:880px) and (min-width:481px){.gallery:not(.gallery-lead)>figure:last-child:nth-child(odd){grid-column:1/-1}.gallery:not(.gallery-lead)>figure:last-child:nth-child(odd) img{aspect-ratio:16/9}}

/* ---- areas.css ---- */
/* area pages, v4: /areas/, /areas/<town>/, /<service>/<town>/ (pages/areas.py). v4 tokens only. */
/* hero: the shared split hero, plus a caption on the job photo */
.ar-hero .k{color:var(--on-dark-accent)}
.ar-hero .hs-txt>.k{margin-bottom:12px}
.ar-hcap{position:absolute;left:12px;top:12px;max-width:calc(100% - 24px);margin:0;padding:8px 12px;font-size:0.875rem;line-height:1.4;color:#fff;background:var(--scrim);border-radius:var(--r)}
@media(max-width:860px){.ar-hero .hs-txt{padding-top:20px}.ar-hero h1{font-size:clamp(2.125rem,9vw,2.75rem)}.ar-hero .lede{margin-top:12px}.ar-hero .ctas{margin-top:20px}.ar-hcap{left:10px;top:10px;max-width:calc(100% - 20px)}}

/* answer + at a glance */
.ar-top{align-items:start}
.ar-top .head{margin-bottom:0}
.ar-top .ticks{margin-top:24px}
.ar-cover{margin-top:20px;color:var(--body);max-width:62ch}
.ar-facts dl>div{grid-template-columns:minmax(120px,150px) 1fr}
.ar-facts dd{min-width:0;overflow-wrap:break-word}
@media(max-width:560px){.ar-facts{padding:24px 20px}.ar-facts dl>div{grid-template-columns:1fr;gap:2px;padding:12px 0}}
.ar-facts .link{margin-top:16px}

/* know the area, local knowledge */
.ar-know{align-items:start}
.ar-prose{max-width:66ch}
.ar-prose h3{font-size:1.25rem;margin:32px 0 8px}
.ar-prose h3:first-child{margin-top:0}
.ar-prose p+p{margin-top:16px}
.ar-prose .big{color:var(--ink)}
.ar-prose a{color:var(--blue);text-underline-offset:3px}

/* cards with an icon: local rules, parts covered, hub prompts */
.ar-lc,.ar-parts{display:flex;flex-direction:column;min-width:0}
.ar-lc>i,.ar-parts>i{width:48px;height:48px;border-radius:var(--r);background:var(--blue-soft);display:flex;align-items:center;justify-content:center;margin-bottom:16px;font-style:normal;flex:none}
.ar-lc>i svg,.ar-parts>i svg{width:24px;height:24px;stroke:var(--blue);fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.ar-lc p,.ar-parts p{color:var(--body);font-size:1rem}
.ar-lc a,.ar-parts a{color:var(--blue);text-underline-offset:3px}
a.ar-lc{text-decoration:none;color:var(--ink);transition:box-shadow .2s var(--ease),transform .16s var(--ease)}
a.ar-lc:active{transform:scale(.98)}
a.ar-lc .arrow{margin-top:auto;padding-top:0}a.ar-lc p+.arrow{margin-top:16px}
@media(hover:hover) and (pointer:fine){a.ar-lc:hover{box-shadow:var(--sh-2)}}
.ar-parts .ar-parts-list+p{margin-top:16px}
.ar-parts-list{margin-top:4px;color:var(--ink)!important;font-weight:600}
.ar-stack .cards2{grid-template-columns:1fr}
.ar-rules{align-items:stretch}
.ar-num{font-size:0.9375rem;font-weight:700;letter-spacing:.12em;color:var(--blue)}
.ar-more{height:100%}

/* sub-headings inside a section */
.ar-sub{font-size:clamp(1.375rem,2vw,1.625rem);margin:clamp(40px,5vw,64px) 0 16px}

/* hub: every town, one compact row each */
.ar-rows{display:grid;grid-template-columns:1fr 1fr;gap:0 40px;border-top:1px solid var(--g200)}
.ar-row{display:grid;grid-template-columns:1fr auto;grid-template-rows:auto auto;column-gap:16px;align-items:center;padding:16px 0;border-bottom:1px solid var(--g200);text-decoration:none;color:var(--ink);min-width:0;transition:background-color .15s var(--ease),transform .16s var(--ease)}
.ar-row:active{transform:scale(.99)}
.ar-row::after{content:"";grid-column:2;grid-row:1/3;width:8px;height:8px;border-top:2px solid var(--blue);border-right:2px solid var(--blue);transform:rotate(45deg)}
.ar-row-t{grid-column:1;grid-row:1;display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 12px;min-width:0}
.ar-row-t b{font-size:1.25rem;line-height:1.25}
.ar-row-t small{font-size:0.875rem;color:var(--muted);font-weight:600}
.ar-row-l{grid-column:1;grid-row:2;font-size:0.9375rem;line-height:1.4;color:var(--body);margin-top:4px}
@media(hover:hover) and (pointer:fine){.ar-row:hover .ar-row-t b{color:var(--blue)}}
@media(max-width:760px){.ar-rows{grid-template-columns:1fr}.ar-row{padding:12px 0}}

/* hub: councils */
.ar-councils{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.ar-councils>*{min-width:0}
.ar-council h3{font-size:1.25rem}
.ar-covers{font-size:0.9375rem;font-weight:600;color:var(--blue);margin-bottom:8px!important}
.ar-council p{font-size:1rem;color:var(--body)}
.ar-council-cta{background:var(--navy);box-shadow:none}
.ar-council-cta h3{color:#fff}.ar-council-cta p{color:var(--on-dark)}.ar-council-cta .link{color:var(--on-dark-accent);margin-top:16px}
@media(max-width:960px){.ar-councils{grid-template-columns:1fr 1fr}}@media(max-width:640px){.ar-councils{grid-template-columns:1fr}}

/* nearby towns */
.ar-towns{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.ar-towns>*{min-width:0}
.ar-tc{display:flex;flex-direction:column;gap:4px;background:#fff;border-radius:var(--r);box-shadow:var(--sh-1);padding:20px;text-decoration:none;color:var(--ink);transition:box-shadow .2s var(--ease),transform .16s var(--ease)}
.ar-tc:active{transform:scale(.98)}
.ar-tc b{font-size:1.25rem;line-height:1.15}
.ar-tc small{font-size:0.9375rem;color:var(--muted)}
.ar-tc span{font-size:1rem;color:var(--body)}
.ar-tc .arrow{margin-top:12px;color:var(--blue)}
@media(hover:hover) and (pointer:fine){.ar-tc:hover{box-shadow:var(--sh-2)}}
@media(max-width:1060px){.ar-towns{grid-template-columns:1fr 1fr}}@media(max-width:560px){.ar-towns{grid-template-columns:1fr;gap:12px}}

/* link groups */
.ar-links{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:32px}
.ar-links3{grid-template-columns:repeat(3,1fr);margin-top:0}
.ar-links>div{background:#fff;border-radius:var(--r);box-shadow:var(--sh-1);padding:24px;min-width:0}
.ar-links h3{font-size:1.25rem;margin-bottom:12px}
.ar-links .areas{gap:8px}
.ar-links .areas a{min-height:44px;padding:8px 12px;font-size:0.9375rem}
.sec:not(.sec-cream) .ar-links>div{background:var(--g50);box-shadow:none}
.sec:not(.sec-cream) .ar-links .areas a{background:#fff}
@media(max-width:960px){.ar-links3{grid-template-columns:1fr}}@media(max-width:760px){.ar-links{grid-template-columns:1fr}}

.cost-card .ticks{margin-top:16px}
.cost-card .link{margin-top:20px}
.ar-quote .lede{margin-top:12px}
.ar-dd-link{display:inline-flex;align-items:center;min-height:44px;color:var(--blue)}
.ar-narrow{max-width:820px}
.ar-prose-wide{max-width:72ch}
.ar-up{display:grid;grid-template-columns:1.2fr 1fr;gap:24px 48px;align-items:center}
.ar-up>*{min-width:0}.ar-up h2{margin-top:0}.ar-up .lede{margin-top:12px}
@media(max-width:880px){.ar-up{grid-template-columns:1fr}}
@media(min-width:881px){.ar-gal4 .gallery figure:nth-child(4){display:none}}

/* ---- driveways.css ---- */
/* driveways.py (v4): small additions on top of site.css. v4 tokens only. */

/* hero: breadcrumbs inside the navy text column, caption on the photo */
.dw-hero .crumbs{margin:0 0 20px;color:var(--on-dark-muted)}
.dw-hero .crumbs a{color:var(--on-dark-muted);padding:8px 0}
@media(hover:hover) and (pointer:fine){.dw-hero .crumbs a:hover{color:#fff}}
.dw-cap{position:absolute;right:16px;top:16px;max-width:min(360px,calc(100% - 32px));margin:0;padding:8px 12px;border-radius:var(--r);background:var(--scrim);color:#fff;font-size:0.9375rem;line-height:1.4}
@media(max-width:860px){.dw-hero .crumbs{margin-bottom:12px}.dw-cap{right:12px;top:12px;max-width:calc(100% - 24px)}}

/* straight answer: answer, then the facts card (beside it on desktop, straight under it on a phone), then who it suits */
.dw-qa{display:grid;grid-template-columns:1.15fr .85fr;grid-template-areas:"a card" "b card";gap:0 clamp(28px,4vw,64px);align-items:start}
.dw-qa>*{min-width:0}
.dw-qa-a{grid-area:a}.dw-qa-a .answer{margin-top:0}
.dw-qa-card{grid-area:card;position:sticky;top:calc(var(--hh) + 24px)}
.dw-qa-b{grid-area:b}
.dw-qa-b h3{font-size:1.25rem;margin:32px 0 8px}
.dw-qa-b p{max-width:66ch}.dw-qa-b p+p{margin-top:12px}
@media(max-width:900px){.dw-qa{grid-template-columns:1fr;grid-template-areas:"a" "card" "b";gap:24px}.dw-qa-card{position:static}.dw-qa-b h3{margin-top:8px}.dw-qa-b h3~h3{margin-top:24px}}

/* the honest facts card */
.dw-facts{border-top:3px solid var(--blue)}
.dw-facts h3{font-size:1.25rem}
.dw-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;margin:16px 0 4px;background:var(--g100);box-shadow:0 0 0 1px var(--g100);border-radius:var(--r);overflow:hidden}
.dw-stats div{background:var(--g50);padding:12px 12px;min-width:0}
.dw-stats b{display:block;font-size:1.25rem;line-height:1.15;color:var(--navy)}
.dw-stats span{display:block;font-size:0.9375rem;line-height:1.4;color:var(--muted);margin-top:4px}

.dw-ticklist{gap:12px}
@media(max-width:1100px) and (min-width:901px){.dw-stats{grid-template-columns:1fr}.dw-stats div{display:flex;justify-content:space-between;align-items:baseline;gap:12px}.dw-stats span{margin:0;text-align:right}}
@media(max-width:480px){.dw-stats{grid-template-columns:1fr}.dw-stats div{display:flex;justify-content:space-between;align-items:baseline;gap:12px}.dw-stats span{margin:0;text-align:right}.dw-facts{padding:20px 20px}}

/* our work: project notes sit under the photos */
.dw-notes{margin-top:clamp(28px,4vw,48px)}

/* step by step: compact rows on a phone */
@media(max-width:620px){.dw-steps{gap:12px}.dw-steps li{display:grid;grid-template-columns:40px 1fr;column-gap:12px;padding:20px 16px}.dw-steps li::before{grid-row:1/3;margin:0}.dw-steps b{font-size:1.125rem;margin:4px 0 4px}}

/* what moves the price */
.dw-band{margin-top:24px;max-width:78ch;color:var(--body)}

/* why drives fail (hub) */
.dw-fails{list-style:none;padding:0;margin:24px 0 0;display:grid;gap:16px;counter-reset:f}
.dw-fails li{position:relative;padding-left:48px}
.dw-fails li::before{counter-increment:f;content:counter(f);position:absolute;left:0;top:0;width:34px;height:34px;border-radius:50%;background:var(--navy);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:0.9375rem}
.dw-fails b{display:block;color:var(--ink)}

/* the written-quote checklist inside the installer questions */
.dw-inwriting{margin-top:20px;background:#fff;border-radius:var(--r);padding:24px 24px;box-shadow:var(--sh-1);border-top:3px solid var(--blue)}
.dw-inwriting h3{font-size:1.25rem}
.dw-inwriting .small{margin-top:16px}.dw-inwriting .small a{color:var(--blue)}
.dw-ticks4{grid-template-columns:repeat(4,1fr);gap:12px 24px}
@media(max-width:1060px){.dw-ticks4{grid-template-columns:1fr 1fr}}@media(max-width:560px){.dw-ticks4{grid-template-columns:1fr}.dw-inwriting{padding:20px 20px}}

/* where we lay it */
.dw-prose{max-width:75ch;margin-bottom:24px}
.dw-prose a{color:inherit}
.dw-pills{margin-bottom:32px}
@media(max-width:520px){.dw-towns{grid-template-columns:1fr 1fr;gap:0 20px}.dw-towns a{font-size:1rem;min-height:56px}}

/* related and advice */
.dw-h3{font-size:clamp(1.5rem,2.2vw,1.875rem);margin:clamp(40px,5vw,64px) 0 18px}
.dw-more{margin-top:20px}
@media(max-width:520px){.dw-also{gap:12px}.dw-also .also-card{display:grid;grid-template-columns:112px 1fr}.dw-also .also-card img{width:100%;height:100%;min-height:112px;aspect-ratio:auto}.dw-also .also-card span{padding:12px 16px;font-size:0.9375rem}.dw-also .also-card b{font-size:1.125rem}}

/* fixes after the first render */
.dw-qa{grid-template-rows:auto 1fr}
@media(min-width:481px){.dw-facts dl>div{grid-template-columns:120px 1fr}}
.dw-facts dd{font-weight:600;color:var(--ink)}
@media(max-width:880px){.dw-gal.gallery-lead figure:nth-child(even):last-child{grid-column:1/-1}}
@media(max-width:560px){.dw-price .pillar{display:grid;grid-template-columns:48px 1fr;column-gap:16px;padding:20px 16px}.dw-price .pillar i{grid-row:1/3;margin:0}.dw-price .pillar h3{margin:2px 0 4px;font-size:1.25rem}}
@media(max-width:620px){.dw-reviews .rv-grid .rv:nth-child(n+2){display:none}}
@media(max-width:860px){.dw-hero .hero-badge{bottom:auto;top:12px}.dw-cap{top:auto;bottom:0;right:0;left:0;max-width:none;border-radius:0;padding:8px 12px;background:var(--scrim)}}
@media(max-width:620px){.dw-svc{gap:12px}.dw-svc .pcard{display:grid;grid-template-columns:120px 1fr}.dw-svc .pc-img,.dw-svc .pcard .ph{height:100%}.dw-svc .pcard .ph{aspect-ratio:auto;min-height:132px}.dw-svc .pc-body{padding:16px;gap:4px}.dw-svc h3{font-size:1.25rem}.dw-svc p{font-size:0.9375rem}.dw-svc .arrow{padding-top:4px;font-size:0.875rem}}
@media(max-width:880px){.dw-gal:not(.gallery-lead) figure:nth-child(odd):last-child{grid-column:1/-1}}
.dw-frow h2+.lede{margin-top:16px}

/* round 2 */
/* installer questions: tap to open */
.dw-qs{display:grid;grid-template-columns:1fr 1fr;gap:12px 16px;align-items:start}
.dw-q{background:#fff;border-radius:var(--r);box-shadow:var(--sh-1);border-left:3px solid var(--blue)}
.dw-q summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:60px;padding:16px 20px;font-weight:700;font-size:1.125rem;line-height:1.4}
.dw-q summary::-webkit-details-marker{display:none}
.dw-q summary::after{content:"";flex:none;width:9px;height:9px;border-right:2px solid var(--blue);border-bottom:2px solid var(--blue);transform:translateY(-3px) rotate(45deg);transition:transform .2s var(--ease)}
.dw-q[open] summary::after{transform:translateY(2px) rotate(-135deg)}
.dw-q summary:active{transform:scale(.99)}
.dw-q p{padding:0 20px 16px;color:var(--body);font-size:1rem}
.dw-q p b{color:var(--navy)}.dw-q p a{color:var(--blue)}
@media(max-width:760px){.dw-qs{grid-template-columns:1fr;gap:8px}.dw-q summary{font-size:1.0625rem;padding:12px 16px}.dw-q p{padding:0 16px 16px}}

/* service-in-town links grouped by service */
.dw-mxs{display:grid;grid-template-columns:1fr 1fr;gap:20px 40px;margin-bottom:24px}
.dw-mx h3{font-size:1.25rem;margin-bottom:8px}
.dw-mx-list{display:grid;grid-template-columns:1fr 1fr;gap:0 20px}
.dw-mx-list a{display:flex;align-items:center;min-height:48px;border-bottom:1px solid var(--hair-dark);color:#fff;text-decoration:none;font-weight:600;font-size:1rem}
@media(hover:hover) and (pointer:fine){.dw-mx-list a:hover{color:var(--on-dark-accent)}}
@media(max-width:760px){.dw-mxs{grid-template-columns:1fr}}
.dw-towns-d{margin-top:8px;border-top:1px solid var(--hair-dark)}
.dw-towns-d>summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;min-height:56px;font-weight:700;font-size:1.125rem;color:#fff}
.dw-towns-d>summary::-webkit-details-marker{display:none}
.dw-towns-d>summary::after{content:"";width:9px;height:9px;border-right:2px solid var(--on-dark-accent);border-bottom:2px solid var(--on-dark-accent);transform:translateY(-3px) rotate(45deg);transition:transform .2s var(--ease)}
.dw-towns-d[open]>summary::after{transform:translateY(2px) rotate(-135deg)}

/* comparison table: first column only as wide as it needs, header links tappable */
.compare-svc .compare tbody th{width:118px}
.compare-svc .compare thead th a{display:inline-flex;align-items:center;min-height:44px}
.compare-svc .compare thead th{padding-block:4px;white-space:nowrap}
.dw-facts dd a,.proj-meta dd a{display:inline-block;padding:12px 0}

/* shorter on a phone */
@media(max-width:560px){.dw-price .pillar{display:block;padding:16px}.dw-price .pillar i{display:none}.dw-price .pillars{gap:8px}}
@media(max-width:620px){
  .dw-ba1>div:nth-child(2){display:none}
  .dw-reviews .rv-grid{display:none}
  .dw-price .pillar{background:none;box-shadow:none;border-radius:0;border-top:1px solid var(--g200);padding:12px 0}
  .dw-price .pillars{gap:0}
  .dw-steps li{box-shadow:none;background:none;border-top:1px solid var(--g200);border-radius:0;padding:12px 0}
  .dw-steps{gap:0}
}
.dw-h3-first{margin-top:0}.dw-h3{font-size:1.25rem;margin:32px 0 12px}
@media(max-width:620px){.dw-advice .art-card:nth-child(n+2){display:none}}
.dw-more{margin-top:16px}
/* A5: the "where we lay it" section is light now */
#where .dw-mx-list a{color:var(--ink);border-bottom-color:var(--g200)}
#where .dw-towns-d{border-top-color:var(--g200)}
#where .dw-towns-d>summary{color:var(--ink)}
#where .dw-towns-d>summary::after{border-color:var(--blue)}
@media(hover:hover) and (pointer:fine){#where .dw-mx-list a:hover{color:var(--blue)}}

/* ---- patios-garden.css ---- */
/* patios and garden pages (pages/patios.py, pages/garden.py). v4 tokens only; composes the shared blocks. */
/* hero: caption on the photo, top left, clear of the Google badge */
.pg-hero .hs-ph{isolation:isolate}
.pg-hcap{position:absolute;left:16px;top:16px;max-width:calc(100% - 32px);margin:0;padding:4px 12px;border-radius:var(--r);background:var(--scrim);color:#fff;font-size:0.9375rem;line-height:1.4}
.pg-hero h1 em{font-weight:300}
@media(max-width:860px){.pg-hero .hs-txt{padding:24px var(--gut) 28px}.pg-hero h1{font-size:clamp(2rem,8.6vw,2.5rem)}.pg-hero .lede{margin-top:12px;font-size:1.125rem}.pg-hero .ctas{margin-top:20px;gap:8px}.pg-hero .ticks{margin-top:16px}.pg-hcap{left:12px;top:12px;max-width:calc(100% - 24px)}}
/* galleries of two and four */
.pg-g4{grid-template-columns:repeat(4,1fr)}
.pg-g2{grid-template-columns:1fr 1fr}
@media(max-width:900px){.pg-g4{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.pg-g4,.pg-g2{grid-template-columns:1fr}.gallery figure{min-width:0}}
/* our work: before and after, then the project notes */
.pg-ba{margin-top:clamp(40px,5vw,72px)}
.pg-ba h3{margin-top:4px}
.pg-p{margin-top:12px;color:var(--body)}
.pg-notes{margin-top:clamp(40px,5vw,72px)}
.sec-cream .pg-notes .proj{box-shadow:var(--sh-1)}
/* answer block: the answer sits directly under the heading */
.pg-answer{margin-top:0}
.answer p+p{margin-top:8px}
.answer a{color:var(--blue);text-underline-offset:3px}
/* price and paperwork */
.pg-band{margin-top:20px;padding:16px 20px;background:#fff;box-shadow:inset 0 0 0 1px var(--g200);border-radius:var(--r);font-size:1.0625rem}
.cost-card .link{margin-top:12px}.cost-card .pg-link2{margin-top:8px}
/* where we work */
.pg-sub{font-size:1.25rem;margin:0 0 16px}
.pg-local{margin-bottom:clamp(32px,4vw,48px)}
/* related work and advice */
.pg-advice{margin-top:clamp(48px,6vw,80px)}
.pg-advice>h3{margin-bottom:20px}
/* chooser table: first column wide enough for the linked names */
.pg-compare tbody th a{color:var(--blue);font-weight:700;text-underline-offset:3px}
.pg-compare tbody th{color:var(--ink)}
/* mobile: galleries swipe sideways, steps and service cards go compact, towns in two columns */
@media(max-width:600px){
  .pg-gal{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;margin-inline:calc(-1 * var(--gut));padding:0 var(--gut) 8px;scroll-padding-inline:var(--gut);-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .pg-gal::-webkit-scrollbar{display:none}
  .pg-gal figure{flex:0 0 84%;scroll-snap-align:start}
  .pg-gal img,.pg-gal.gallery-lead figure:first-child img{aspect-ratio:4/3;height:auto}
  .pg-steps{gap:8px}
  .pg-steps li{display:grid;grid-template-columns:36px 1fr;column-gap:12px;padding:20px 16px}
  .pg-steps li::before{grid-row:1/3;margin:0;width:36px;height:36px;font-size:1rem}
  .pg-steps li>*{grid-column:2}
  .pg-steps b{font-size:1.125rem;margin-bottom:4px}
  .pg-cards{gap:12px}
  .pg-cards .svc-card{flex-direction:row;align-items:stretch}
  .pg-cards .svc-card img{flex:none;width:34%;min-height:132px;height:auto;aspect-ratio:auto;align-self:stretch}
  .pg-cards .svc-card span{padding:16px 16px 16px;font-size:0.9375rem}
  .pg-cards .svc-card b{font-size:1.125rem}
}
@media(max-width:520px){.pg-towns{grid-template-columns:1fr 1fr;column-gap:20px}.pg-towns a{font-size:1rem;min-height:52px}}
.pg-compare{min-width:880px}
/* round 2: chooser table stacks as cards on phones */
@media(max-width:600px){
  .pg-cmp{background:transparent;box-shadow:none;overflow:visible}
  .pg-cmp .pg-compare.compare,.pg-cmp .pg-compare{min-width:0;display:block}
  .pg-compare thead{display:none}
  .pg-compare tbody{display:grid;gap:12px}
  .pg-compare tr{display:grid;grid-template-columns:1fr 1fr;gap:8px 16px;background:#fff;border-radius:var(--r);box-shadow:var(--sh-1);padding:16px 16px}
  .pg-compare tbody tr:nth-child(even) td,.pg-compare tbody tr:nth-child(even) th{background:transparent}
  .pg-compare th,.pg-compare td{display:block;padding:0;border:0;width:auto;font-size:0.9375rem;line-height:1.4}
  .pg-compare tbody th{grid-column:1/-1;font-size:1.25rem;color:var(--ink);width:auto}
  .pg-compare td::before{content:attr(data-label);display:block;font-size:0.875rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:2px}
  /* shorter page: two reviews under the featured one, advice cards without the summary */
  #reviews .rv-grid .rv:nth-child(n+3){display:none}
  #related .art-sum{display:none}
  #related .art-card{padding:16px 20px;gap:4px}
}
/* tap targets on text links in these pages */
#our-work .link,#in-writing .link,#related .link,#areas .link,.head .link{min-height:44px}
.answer a,.lede a,#areas p a{padding-block:8px;margin-block:-8px}
@media(max-width:600px){
  .pg-compare tr{padding:12px 16px;gap:8px 12px}
  #related .art-meta{display:none}
}

/* ---- trust.css ---- */
/* v4 trust, guarantee, costs, quote, advice and legal pages. v4 tokens only; hover inside (hover:hover) and (pointer:fine). */

/* horizontal chip rail on phones (our work filter, review filter) */
.wf-scroll{position:relative;margin-bottom:24px}
.wf-row,.wf-scroll .chips{display:flex;flex-wrap:wrap;gap:8px;margin:0}
.wf,.wf-scroll .chipf{min-height:48px;padding:8px 16px;border-radius:var(--r);border:0;box-shadow:inset 0 0 0 1px var(--g200);background:#fff;font:600 1rem var(--sans);color:var(--ink);cursor:pointer;display:inline-flex;align-items:center;gap:8px;white-space:nowrap;flex:none;
  transition:background-color .15s var(--ease),color .15s var(--ease),box-shadow .15s var(--ease),transform .16s var(--ease)}
.wf span,.wf-scroll .chipf span{font-size:0.875rem;font-weight:600;color:var(--muted);transition:color .15s var(--ease)}
.wf:active,.wf-scroll .chipf:active{transform:scale(.97)}
.wf[aria-pressed="true"],.wf-scroll .chipf[aria-pressed="true"]{background:var(--navy);box-shadow:none;color:#fff}
.wf[aria-pressed="true"] span,.wf-scroll .chipf[aria-pressed="true"] span{color:var(--on-dark-accent)}
@media(hover:hover) and (pointer:fine){.wf:hover,.wf-scroll .chipf:hover{box-shadow:inset 0 0 0 1.5px var(--blue)}.wf[aria-pressed="true"]:hover,.wf-scroll .chipf[aria-pressed="true"]:hover{box-shadow:none}}
@media(max-width:760px){
  .wf-scroll{margin-inline:calc(var(--gut) * -1)}
  .wf-row,.wf-scroll .chips{flex-wrap:nowrap;overflow-x:auto;padding:2px var(--gut) 6px;scroll-padding-inline:var(--gut);scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .wf-row::-webkit-scrollbar,.wf-scroll .chips::-webkit-scrollbar{display:none}
  .wf-scroll::after{content:"";position:absolute;right:0;top:0;bottom:6px;width:32px;background:linear-gradient(90deg,rgba(255,255,255,0),#fff);pointer-events:none}
}

/* our work: editorial grid, the lead frame of each surface shown large */
.wk-grid{display:grid;grid-template-columns:repeat(3,1fr);grid-auto-flow:dense;gap:32px 20px}
.wk{margin:0;min-width:0}
.wk-wide{grid-column:span 2}
.wk-img{border-radius:var(--r);overflow:hidden;background:var(--g100)}
.wk-img img{width:100%;aspect-ratio:4/3;object-fit:cover;transition:transform .5s var(--ease)}
@media(min-width:961px){.wk-wide{grid-row:span 2;display:flex;flex-direction:column}.wk-wide .wk-img{flex:1;position:relative;min-height:320px}.wk-wide .wk-img img{position:absolute;inset:0;height:100%;aspect-ratio:auto}}
.wk figcaption{margin-top:12px;display:grid;gap:4px}
.wk-k{font-size:0.875rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--blue)}
.wk figcaption b{font-weight:600;font-size:1.0625rem;line-height:1.4;color:var(--ink)}
.wk-wide figcaption b{font-size:1.25rem}
@media(hover:hover) and (pointer:fine){.wk:hover .wk-img img{transform:scale(1.03)}}
@media(max-width:960px){.wk-grid{grid-template-columns:1fr 1fr;gap:24px 12px}}
@media(max-width:560px){.wk-grid{gap:24px 12px}.wk figcaption{margin-top:8px;gap:2px}.wk figcaption b{font-size:0.9375rem;line-height:1.4}.wk-wide figcaption b{font-size:1.0625rem}}

/* before and after: the first job as a project card with its slider, then the other four two by two */
.proj-ba{grid-template-columns:1.25fr .75fr}
.proj-ba-img{min-width:0}
.proj-ba-img .ba{border-radius:0;height:100%;aspect-ratio:auto;min-height:420px}
@media(max-width:880px){.proj-ba{grid-template-columns:1fr}.proj-ba-img .ba{aspect-ratio:4/3;min-height:0;height:auto}}
.ba-more{margin-top:32px;gap:32px 20px}
.ba-item{min-width:0}

/* reviews: platform cards on the page, the wall */
.plats-page{margin-top:24px}
.plats-page .plat{background:#fff}
.rv-grid-all{align-items:start}
.rv-more summary{cursor:pointer;color:var(--blue);font-weight:600;font-size:0.9375rem;min-height:44px;display:flex;align-items:center;list-style:none}
.rv-more summary::-webkit-details-marker{display:none}
.rv-more[open] summary{display:none}
.rv-more[open]+figcaption{margin-top:0}
.rv-g .review-preview{font-size:1.0625rem;line-height:1.6}
.wall-note{max-width:80ch;margin-top:24px}
#reviews-status{margin-bottom:16px}

/* reviews: what customers mention most */
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.stat{background:#fff;border-radius:var(--r);padding:24px 24px;min-width:0;box-shadow:var(--sh-1);border-top:3px solid var(--blue)}
.stat b{display:block;font-weight:300;font-size:clamp(3rem,5vw,4.25rem);line-height:1;letter-spacing:-.02em;color:var(--navy)}
.stat>span{display:block;font-weight:700;margin-top:8px}
.stat p{color:var(--body);font-size:1rem;margin-top:4px}
@media(max-width:900px){.stats{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.stats{grid-template-columns:1fr 1fr;gap:12px}.stat{padding:20px 16px}.stat p{display:none}.stat>span{font-size:0.9375rem;line-height:1.4}}

/* about: story timeline and team photos */
.tl{list-style:none;margin:0;padding:0 0 0 24px;display:grid;border-left:2px solid var(--g200)}
.tl li{position:relative;padding:16px 0}
.tl li::before{content:"";position:absolute;left:-36px;top:24px;width:14px;height:14px;border-radius:50%;background:var(--blue);box-shadow:0 0 0 4px #fff}
.tl b{display:block;font-weight:700;font-size:clamp(1.375rem,2.2vw,1.75rem);line-height:1.15;color:var(--navy)}
.tl li>span{display:block;color:var(--body);margin-top:4px}
.story .lede{margin-top:16px}
.duo{display:grid;grid-template-columns:1.5fr 1fr;gap:20px}
.duo>*{min-width:0}
.duo figure{margin:0;min-width:0}
.duo img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--r)}
.duo-lead img{height:calc(100% - 34px);aspect-ratio:auto}
.duo-side{display:grid;gap:20px}
.duo figcaption{font-size:0.9375rem;color:var(--body);margin-top:8px}
@media(max-width:760px){.duo{grid-template-columns:1fr}.duo-lead img{height:auto;aspect-ratio:4/3}.duo-side{grid-template-columns:1fr 1fr;gap:12px}.duo-side figcaption{font-size:0.875rem}}
.facts-two{align-items:start}
.facts dd a{color:var(--blue);text-underline-offset:4px}

/* guarantee: the written quote as a document */
.qdoc{background:#fff;border-radius:var(--r);padding:clamp(22px,3vw,40px);min-width:0;box-shadow:var(--sh-2);border-top:4px solid var(--navy)}
.qdoc-top{display:flex;justify-content:space-between;gap:4px 12px;flex-wrap:wrap;font-size:0.875rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);padding-bottom:12px;border-bottom:1px solid var(--g200)}
.qdoc-list{list-style:none;margin:0;padding:0;counter-reset:q}
.qdoc-list li{display:grid;grid-template-columns:36px 1fr;gap:2px 8px;padding:12px 0;border-bottom:1px solid var(--g100)}
.qdoc-list li:last-child{border-bottom:0}
.qdoc-list li::before{counter-increment:q;content:counter(q,decimal-leading-zero);grid-row:span 2;font-weight:300;font-size:1.25rem;line-height:1.1;color:var(--blue)}
.qdoc-list b{font-weight:700}
.qdoc-list li>span{color:var(--body);font-size:1rem}
.qdoc-foot{margin-top:12px;padding-top:12px;border-top:1px solid var(--g200);font-weight:600;color:var(--navy)}
.gq-two{align-items:start}
.gq-two .lede,.ins .lede,.cost-grid .lede{margin-top:16px}
.gnot{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(28px,5vw,80px);align-items:start}
.gnot>*{min-width:0}
.gnot .ticks{margin-top:0;gap:12px}
.gnot-card{background:#fff;border-radius:var(--r);padding:clamp(22px,3vw,36px);box-shadow:var(--sh-1)}
@media(max-width:880px){.gnot{grid-template-columns:1fr}}

/* costs: six factors in threes, relative bands */
.pillars-3{grid-template-columns:repeat(3,1fr)}
@media(max-width:1060px){.pillars-3{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.pillars-3{grid-template-columns:1fr}}
.bands-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.bands{background:#fff;border-radius:var(--r);padding:clamp(22px,3vw,36px);min-width:0;box-shadow:var(--sh-1)}
.bands h3{margin-bottom:4px}
.bands ul{list-style:none;margin:0;padding:0}
.bands li{display:grid;grid-template-columns:1fr auto;gap:4px 16px;align-items:center;padding:16px 0;border-top:1px solid var(--g100)}
.bands li>a{font-weight:700;font-size:1.25rem;line-height:1.25;color:var(--ink);text-decoration:none;min-height:44px;display:flex;align-items:center}
.bands li>.small{grid-column:1/-1}
@media(hover:hover) and (pointer:fine){.bands li>a:hover{color:var(--blue)}}
.band{display:inline-flex;align-items:center;gap:4px}
.band i{width:24px;height:8px;border-radius:var(--r);background:var(--g200)}
.band i.on{background:var(--blue)}
.band b{margin-left:8px;font-weight:600;font-size:0.9375rem;min-width:52px}
@media(max-width:820px){.bands-grid{grid-template-columns:1fr}}

/* quote page */
.q-hero{padding-bottom:clamp(40px,5vw,72px)}
.q-hero h1{max-width:16ch}
.q-hero .lede{max-width:52ch}
.routes{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:24px;max-width:880px}
.route{display:flex;gap:16px;align-items:center;background:#fff;border-radius:var(--r);padding:16px 20px;text-decoration:none;color:var(--ink);min-width:0;min-height:88px;box-shadow:var(--sh-2);transition:transform .16s var(--ease)}
.route i{flex:none;width:52px;height:52px;border-radius:var(--r);display:flex;align-items:center;justify-content:center;background:var(--blue);font-style:normal}
.route i svg{width:24px;height:24px;stroke:#fff;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.route-wa i{background:var(--wa)}
.route-wa i svg{fill:var(--ink);stroke:none}
.route small{display:block;font-size:0.875rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.route b{display:block;font-weight:700;font-size:clamp(1.3125rem,2vw,1.625rem);line-height:1.15;margin-top:2px}
.route em{display:block;font-style:normal;color:var(--body);font-size:0.9375rem;margin-top:4px}
.route:active{transform:scale(.98)}
@media(max-width:760px){.routes{grid-template-columns:1fr;gap:8px}.route{padding:16px}}
.q-form{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(28px,5vw,72px);align-items:start}
.q-form>*{min-width:0}
.q-form .qs{max-width:640px}
.q-aside h2{font-size:clamp(1.625rem,2.6vw,2.125rem)}
.q-aside .cost-card{margin-top:24px}
@media(max-width:900px){.q-form{grid-template-columns:1fr}}
@media(max-width:560px){.q-form .qs{padding:20px 16px}}

/* advice: featured articles and topic rows */
.feat-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:20px}
.feat-grid>*{min-width:0}
.feat-side{display:grid;gap:20px}
.feat{display:grid;grid-template-columns:.9fr 1.1fr;background:#fff;border-radius:var(--r);overflow:hidden;text-decoration:none;color:var(--ink);box-shadow:var(--sh-1);transition:transform .16s var(--ease),box-shadow .2s var(--ease)}
.feat>*{min-width:0}
.feat:active{transform:scale(.985)}
.feat-img{overflow:hidden;background:var(--g100)}
.feat-img img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/3;transition:transform .5s var(--ease)}
.feat-body{padding:20px 24px;display:flex;flex-direction:column;gap:8px}
.feat-body b{font-weight:700;font-size:clamp(1.25rem,1.8vw,1.5rem);line-height:1.25}
.feat-lead{grid-template-columns:1fr;grid-template-rows:auto 1fr}
.feat-lead .feat-img img{aspect-ratio:16/10}
.feat-lead .feat-body{padding:24px}
.feat-lead .feat-body b{font-size:clamp(1.5rem,2.4vw,2rem)}
@media(hover:hover) and (pointer:fine){.feat:hover{box-shadow:var(--sh-2)}.feat:hover .feat-img img{transform:scale(1.03)}}
@media(max-width:880px){.feat-grid{grid-template-columns:1fr}}
@media(max-width:560px){.feat{grid-template-columns:1fr}.feat-body{padding:20px}}
.cat-row{padding-top:32px;margin-top:32px;border-top:1px solid var(--g200)}
.cat-row:first-of-type{border-top:0;margin-top:8px;padding-top:0}
.cat-row-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 20px;margin-bottom:20px}
.cat-row-head h3{font-size:clamp(1.5rem,2.4vw,1.875rem)}
.cat-row-head .arrow{margin-left:auto;min-height:44px}
@media(max-width:600px){.cat-row-head .arrow{margin-left:0}}
.adv-list .ask{margin-top:48px}

/* article pages: long-form reading on a phone */
.article .art-head .answer{margin-top:24px}
.art-body>h2:first-child{margin-top:0}
.art-body blockquote{margin:24px 0;padding:4px 0 4px 20px;border-left:3px solid var(--blue);font-size:1.25rem;color:var(--ink)}
.art-body table{width:100%}
.art-body img{border-radius:var(--r)}
@media(max-width:560px){.art-body p,.art-body ul,.art-body ol{font-size:1.0625rem;line-height:1.7}.art-body h2{margin-top:32px}.art-head h1{font-size:2rem;line-height:1.1}.author .terry-photo-sm{width:88px}}

/* legal */
.legal-head{padding-block:clamp(40px,6vw,80px)}
.legal-head h1{font-size:clamp(2.375rem,5vw,3.75rem)}
.legal-head .lede{margin-top:16px}
.legal-grid{display:grid;grid-template-columns:1fr 320px;gap:clamp(32px,5vw,80px);align-items:start}
.legal-grid>*{min-width:0}
.legal h2:first-child{margin-top:0}
.legal h2{font-size:clamp(1.375rem,2.2vw,1.75rem)}
.legal ul{padding-left:20px}
.legal a:not(.btn){color:var(--blue);text-underline-offset:4px}
.legal-aside{position:sticky;top:calc(var(--hh) + 24px);background:#fff;border-radius:var(--r);padding:24px;box-shadow:var(--sh-1);border-top:3px solid var(--blue)}
.legal-aside h3{font-size:1.25rem}
.legal-aside a:not(.btn){color:var(--blue)}
@media(max-width:900px){.legal-grid{grid-template-columns:1fr}.legal-aside{position:static;order:-1}}
.routes-wrap{padding-bottom:clamp(40px,5vw,72px)}
.facts-dl{margin-top:0!important}.facts-dl>div:first-child{border-top:0}
@media(max-width:560px){.rv-grid-all{gap:12px}.rv-grid-all .rv{padding:20px;gap:8px}}
/* costs: the straight answer */
.cost-answer{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(24px,5vw,80px);align-items:start}
.cost-answer>*{min-width:0}
.mt-btn{margin-top:24px}
@media(max-width:880px){.cost-answer{grid-template-columns:1fr}}
@media(max-width:560px){.mt-btn{width:100%}}
.q-form-h{font-size:clamp(1.625rem,3vw,2.375rem)}
.q-form-lede{color:var(--body);margin:8px 0 20px;max-width:52ch}
.q-hero .hero-proof{margin-top:20px}
@media(max-width:560px){.pillars-3{gap:12px}.pillars-3 .pillar{display:grid;grid-template-columns:48px 1fr;gap:4px 16px;padding:20px 16px}.pillars-3 .pillar i{grid-row:span 2;margin:0}.pillars-3 .pillar h3{margin:8px 0 2px}}
/* article: quick call and WhatsApp under the byline; keep button colours inside the article body */
.art-ctas{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
@media(max-width:560px){.art-ctas{display:grid;grid-template-columns:1fr 1fr}.art-ctas .btn{padding:12px 8px;font-size:0.9375rem;gap:8px;width:100%}}
.art-body a.btn{text-decoration:none}
.art-body a.btn-call{color:#fff}.art-body a.btn-wa{color:var(--ink)}
.ask .ctas-stack .btn-call{order:-1}
@media(max-width:620px){.cat-row .art-grid{gap:8px}.cat-row .art-card{padding:16px 20px;gap:4px}.cat-row .art-sum{display:none}.cat-row-head{margin-bottom:12px}}
/* platform cards on /reviews/: logos keep their shape, names always visible */
.plat-v .plogo{height:auto;width:auto;max-width:100%;max-height:24px}
.plat-v .plogo-tat{display:inline-flex;align-items:center;gap:4px;font-weight:700;font-size:1rem;color:var(--ink);height:24px}
.plat-v .plogo-tat img,.plat-v .plogo-tat svg{width:22px;height:22px;max-height:none}
.art-body .pm img{width:auto;max-width:none}
.q-hero-grid{display:grid;grid-template-columns:1.6fr 1fr;gap:clamp(32px,5vw,72px);align-items:center}
.q-hero-grid>*{min-width:0}
.q-hero-ph{margin:0}.q-hero-ph img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:var(--r)}
.q-hero-ph .cap{color:var(--muted)}
@media(max-width:960px){.q-hero-grid{grid-template-columns:1fr}.q-hero-ph{display:none}}

/* /quote/: the form sits in the hero on desktop so the main action is in the first screen */
.q-hero-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,64px);align-items:start}
.q-hero-grid>*{min-width:0}
.q-hero-form .k{color:var(--on-dark-accent)}
.q-form{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,64px);align-items:center}
.q-form>*{min-width:0}
.q-hero-ph{margin:0}.q-hero-ph img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--r)}
@media(max-width:960px){.q-hero-grid,.q-form{grid-template-columns:1fr}}
.q-form .q-hero-ph{display:block}

/* ---- zz-system.css ---- */
/* ==========================================================================
   System layer (DESIGN.md). Loaded last so every page group follows the same
   tokens: one type scale, one button family, one chip, one caption, one badge,
   every control state, mobile and accessibility rules.
   ========================================================================== */

:root{interpolate-size:allow-keywords}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ---- type ---- */
h1{font-size:var(--t-h1)!important;line-height:1.05}
.guar h2,.art-body h2,.legal h2,.q-form-h,.proof h2,.qs .qs-q,.cat-row-head h3,.proj-body h3{font-size:var(--t-h2s);line-height:1.15}
.pcard h3,.svc-card b,.also-card b,.art-card b,.pillar h3,.local-card h3,.town-card h3,.facts h3,.steps b,.feat-body b,.route b,.ar-tc b,.ar-links h3,.ar-row-t b,.bands a b,.dw-h3,.ar-sub,.pg-sub,.qlist q{font-size:var(--t-title);line-height:1.25;font-weight:700}
.faq summary,.dw-q summary,.dw-towns-d>summary{font-size:1.125rem;font-weight:600;line-height:1.4}
.k,h4,.art-cat,.wk-k,.fr-top,.qs-status,.qdoc-top,.mega .mega-all,.cc small,.proj-meta dt,.route small,.ba-tag,.ar-num,.ar-hc-k,.pg-compare td::before{font-size:var(--t-label);font-weight:600;letter-spacing:.12em;text-transform:uppercase}
.link,.link-more,.arrow,.ar-tc span.arrow{font-size:var(--t-link);font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.tstrip b,.stat b{font-size:var(--t-stat)}
.feature-rv blockquote,.wk figcaption b,.dw-facts dd,.ar-parts-list,.mega a b{font-weight:600}
.menu a,.menu .mm-t{white-space:nowrap}
main :where(p,li,dd,dt,td,th,a,span,h1,h2,h3,blockquote,figcaption,label,summary){overflow-wrap:break-word}

/* ---- buttons: one family, three sizes ---- */
.btn{min-height:52px;padding:12px 24px;font-size:1rem;font-weight:600;white-space:normal;text-align:center;max-width:100%;line-height:1.2}
.btn-lg,.qs-next,.qs-send{min-height:56px;padding:14px 28px;font-size:1.0625rem}
.nav-cta .btn,.cb,.foot .btn{min-height:44px;padding:8px 16px;font-size:0.9375rem}
@media(hover:hover) and (pointer:fine){
  .btn-wa:hover{background:var(--wa);box-shadow:inset 0 0 0 2px rgba(22,32,46,.4)}
  .btn:disabled:hover,.btn[aria-disabled="true"]:hover{box-shadow:none}
}
/* on navy, the main Call button turns white so it is always the strongest thing on the panel */
:is(.hero-split,.hero-dark,.sec-dark,.quote-sec,.cta-band,.q-hero) .btn-call{background:#fff;color:var(--navy)}
@media(hover:hover) and (pointer:fine){:is(.hero-split,.hero-dark,.sec-dark,.quote-sec,.cta-band,.q-hero) .btn-call:hover{background:var(--g100);color:var(--navy)}}
.quote-sec .qs .btn-call{background:var(--blue);color:#fff}
/* disabled */
.btn:disabled,.btn[aria-disabled="true"],.qs-next:disabled,.qs-send:disabled,.qs-send[aria-disabled="true"]{opacity:.55;cursor:not-allowed;transform:none!important}
.qs-send[aria-busy="true"]{cursor:progress}

/* ---- controls: inputs, options and chips share one edge ---- */
.qs-field input,.qs-field select{min-height:56px;box-shadow:inset 0 0 0 1.5px var(--line-control)}
.qs-opts button{min-height:56px;box-shadow:inset 0 0 0 1.5px var(--line-control);font-weight:600}
.qs-field input::placeholder{color:var(--muted);opacity:1}
.qs-field input[aria-invalid="true"]{box-shadow:inset 0 0 0 2px var(--error)}
.qs-field input[aria-invalid="true"]:focus{box-shadow:inset 0 0 0 2px var(--error),0 0 0 3px rgba(180,35,24,.22)}
.field-error{color:var(--error)}.qs-error{background:var(--error-soft);color:var(--error-ink)}
.qs-skip,.qs-back{min-height:44px!important;color:var(--body)}
.areas a,.chip-link,.chipf,.cat-chips a,.wf,.ar-links .areas a{min-height:44px;padding:8px 16px;font-size:0.9375rem;font-weight:600;border:0;box-shadow:inset 0 0 0 1.5px var(--line-control);border-radius:var(--r)}
.chipf.is-on,.chipf[aria-pressed="true"],.wf[aria-pressed="true"],.cat-chips a[aria-current="page"]{background:var(--navy);color:#fff;box-shadow:none}
.sec-dark .areas a{box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.5)}

/* ---- cards: one padding, one accent rule ---- */
.rv,.local-card,.town-card,.art-card,.facts,.cost-card,.qa-card,.pillar,.steps li,.ar-tc,.legal-aside,.stat,.dw-inwriting{padding:var(--pad)}
.pcard .pc-body,.svc-card span,.also-card span,.feat-body{padding:20px var(--pad) var(--pad)}
.answer,.ask{border-left-width:3px}
.qdoc{border-top:3px solid var(--blue)}
.steps li::before,.steps-big li::before,.anat-list li::before,.dw-fails li::before{width:36px;height:36px;font-size:0.9375rem}
.pillar i,.ar-lc>i,.route i{width:48px;height:48px;border-radius:var(--r)}
@media(max-width:560px){:root{--pad:20px}}

/* ---- captions over photos and the Google badge: one look each ---- */
.ar-hcap,.dw-cap,.pg-hcap,.vcap,.hero-photo .cap-on{font-size:var(--t-small);line-height:1.4;padding:8px 12px;background:var(--scrim);color:#fff;border-radius:var(--r)}
.gbadge,.hero-badge{padding:8px 14px;gap:8px 10px;box-shadow:var(--sh-2);flex-wrap:wrap;max-width:calc(100% - 24px)}
.gbadge b,.hero-badge b{font-size:1.375rem}

/* ---- tables ---- */
.compare tbody th{color:var(--muted)}
.compare-svc thead th{padding:16px}
.compare th,.compare td{overflow-wrap:break-word}
@media(max-width:560px){.compare th,.compare td{padding:12px}}
@media(max-width:360px){.compare th,.compare td{padding:8px 10px;font-size:0.875rem;overflow-wrap:anywhere}}

/* ---- sections ---- */
.sec-dark .feature-rv{background:var(--navy-2)}
.guar{padding:var(--pad-lg)}

/* ---- footer: light, so it never merges with the navy quote section ---- */
.foot{background:var(--g50);color:var(--body);border-top:1px solid var(--g200)}
.foot h4,.foot summary{color:var(--ink)}
.foot a{color:var(--ink)}
.foot-big{color:var(--ink)}.foot-big a{color:var(--blue)}
.foot p{color:var(--body)}
.foot-legal{border-top:1px solid var(--g200);color:var(--muted)}
.foot-legal a{color:var(--body)}
.foot-in>div{display:flex;flex-direction:column;gap:4px}
.foot-in>div>*{margin-block:0}
.foot details{border:0}
.foot details summary{list-style:none;cursor:default;pointer-events:none;font-size:var(--t-label);font-weight:600;letter-spacing:.12em;text-transform:uppercase;margin:0 0 8px}
.foot details summary::-webkit-details-marker{display:none}
.foot details>div{display:flex;flex-direction:column;gap:4px}
.foot details+details{margin-top:24px}
@media(hover:hover) and (pointer:fine){.foot a:hover{color:var(--blue)}}
@media(max-width:560px){
  .foot details{border-top:1px solid var(--g200)}
  .foot details+details{margin-top:0}
  .foot details summary{pointer-events:auto;cursor:pointer;min-height:52px;display:flex;align-items:center;justify-content:space-between;margin:0}
  .foot details summary::after{content:"";width:9px;height:9px;border-right:2px solid var(--blue);border-bottom:2px solid var(--blue);transform:translateY(-3px) rotate(45deg);transition:transform var(--dur-ui) var(--ease)}
  .foot details[open] summary::after{transform:translateY(2px) rotate(-135deg)}
  .foot details>div{padding-bottom:12px}
}

/* ---- header ---- */
.nav.scrolled{box-shadow:var(--sh-nav)}
.nav-cta .btn .lbl{display:inline}
@media(max-width:1500px){.nav-tel{display:none}}
@media(max-width:1240px){.menu{display:none}.menu-toggle{display:inline-flex}.nav-in{justify-content:space-between}.nav-cta{margin-left:auto}}
@media(max-width:720px){.nav-cta .btn-wa{display:inline-flex;width:44px;min-width:44px;padding:0}.nav-cta .btn-wa .lbl{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}}
@media(max-width:560px){.nav-cta .btn-call{width:44px;min-width:44px;padding:0}.nav-cta .btn-call .lbl{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}}
.menu-toggle{min-height:44px}
.nav-cta{min-width:0}
/* mobile menu: calls first, rows get press feedback */
.mnav .ctas{margin:16px 0 8px}
.mnav summary:active,.mnav>a:active,.mnav details a:active{background:var(--g50)}
/* breadcrumbs: on phones show only the way back up */
.crumbs{row-gap:0}
@media(max-width:560px){
  .crumbs>*{display:none}
  .crumbs>.crumb-back{display:inline-flex}
  .crumbs>.crumb-back::before{content:"";width:7px;height:7px;border-left:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);margin-right:8px}
}

/* ---- states: hover (mouse only), pressed, focus ---- */
.faq summary,.dw-q summary,.qs-back,.qs-skip,.gbadge,.hero-badge,.crumbs a,.art-cat,.cat-chips a,.route,.brand,.menu a,.menu .mm-t,.mega a,.nav-tel,.foot a,.link,.arrow,.town-grid a,.dw-mx-list a,.rv-g a,.mnav summary,.mnav a,.ba input,.wf,.chipf,.dw-towns-d>summary{transition:color var(--dur-fast) var(--ease),background-color var(--dur-fast) var(--ease),box-shadow var(--dur-fast) var(--ease),transform var(--dur-press) var(--ease)}
.faq summary:active,.dw-q summary:active,.qs-back:active,.qs-skip:active,.gbadge:active,.hero-badge:active,.crumbs a:active,.art-cat:active,.route:active,.brand:active,.menu a:active,.menu .mm-t:active,.mega a:active,.nav-tel:active,.foot a:active,.link:active,.town-grid a:active,.dw-mx-list a:active,.rv-g a:active,.dw-towns-d>summary:active{transform:scale(.98)}
@media(hover:hover) and (pointer:fine){
  .faq summary:hover,.dw-q summary:hover,.dw-towns-d>summary:hover{color:var(--blue)}
  .sec-dark .faq summary:hover,.sec-dark .dw-towns-d>summary:hover{color:var(--on-dark-accent)}
  .qs-back:hover,.qs-skip:hover{color:var(--blue)}
  .gbadge:hover,.hero-badge:hover{box-shadow:0 2px 4px rgba(14,31,56,.08),0 20px 44px rgba(14,31,56,.18)}
  .art-cat:hover,.link:hover,.arrow:hover{color:var(--blue-press)}
  .cat-chips a:hover,.chipf:not([aria-pressed="true"]):hover,.wf:not([aria-pressed="true"]):hover,.areas a:hover{box-shadow:inset 0 0 0 2px var(--blue);color:var(--blue)}
  .route:hover{box-shadow:var(--sh-2)}
  .brand:hover{opacity:.85}
  .ba:hover .ba-line::after{transform:translate(-50%,-50%) scale(1.08)}
  .crumbs-dark .crumbs a:hover,.hero-split .crumbs a:hover{color:#fff}
}
.ba-line::after{transition:transform var(--dur-fast) var(--ease)}
.ba input{cursor:ew-resize}.ba input:active{cursor:grabbing}
/* focus: blue on light, white on navy, blue again inside white cards on navy */
:is(.crumbs-dark,.crumbs-wrap:has(+.hero-dark),.hero-split,.hero-dark,.sec-dark,.quote-sec,.cta-band,.ar-council-cta,.q-hero,.feature-rv,.dw-towns-d) :focus-visible{outline-color:#fff}
:is(.quote-sec,.sec-dark,.hero-split,.q-hero) :is(.qs,.pq-card,.route-card) :focus-visible{outline-color:var(--blue)}
main:focus{outline:none}

/* ---- transitions: accordions, form steps, revealed reviews ---- */
details::details-content{block-size:0;overflow-y:clip;transition:block-size var(--dur-ui) var(--ease),content-visibility var(--dur-ui) allow-discrete}
details[open]::details-content{block-size:auto}
@keyframes sysIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.qs-screen:not([hidden]),.show-more-new,.qs-emailed:not([hidden]){animation:sysIn var(--dur-ui) var(--ease)}

/* ---- form extras ---- */
.qs-chosen{display:flex;flex-wrap:wrap;align-items:center;gap:4px 12px;margin:0 0 16px;padding:12px 16px;background:var(--blue-soft);border-radius:var(--r);font-size:var(--t-small);color:var(--ink)}
.qs-chosen button{background:none;border:0;padding:0 4px;min-height:44px;font:600 var(--t-small) var(--sans);color:var(--blue);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.qs-slow{margin-top:12px;font-size:var(--t-small);color:var(--body)}
.qs-copy{white-space:pre-wrap;background:var(--g50);border-radius:var(--r);padding:12px 16px;font:400 var(--t-small)/1.55 var(--sans);color:var(--ink);margin:12px 0}

/* ---- mobile ---- */
html.dock-on{scroll-padding-bottom:96px}
.faq summary{margin-block:4px}
.town-grid{row-gap:8px}
.dw-mx-list,.town-grid.pg-towns{row-gap:8px}
a.ar-row{margin-block:4px}
.swipe-note{display:none;font-size:var(--t-small);color:var(--muted);margin-top:8px}
@media(max-width:860px){.swipe-note{display:block}}
.strip:focus-visible,.pg-gal:focus-visible{outline:3px solid var(--blue);outline-offset:4px}
.legal a,.legal-aside a{overflow-wrap:anywhere}
.nav-in,.callbar{padding-left:max(var(--gut),env(safe-area-inset-left));padding-right:max(var(--gut),env(safe-area-inset-right))}
.callbar{padding-left:max(12px,env(safe-area-inset-left));padding-right:max(12px,env(safe-area-inset-right))}

/* ---- without JavaScript: nothing that needs a script is shown dead ---- */
.nojs-only,.js .nojs-only{display:none!important}
html:not(.js) .nojs-only{display:inline-flex!important}
html:not(.js) .menu-toggle,html:not(.js) .mm-t,html:not(.js) .mega,html:not(.js) .mnav{display:none!important}
html:not(.js) .qs>*:not(noscript):not(.qs-nojs){display:none}
html:not(.js) .qs-nojs{display:block}
.qs-nojs{display:none}
html:not(.js) [data-filter-group],html:not(.js) .chipf{display:none}
html:not(.js) .show-more{display:none}

/* ---- reduced motion: colour and opacity only ---- */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-property:color,background-color,border-color,box-shadow,opacity!important;animation:none!important}
  :active{transform:none!important}
  .mega,.mnav{transform:none!important}
  .callbar{transition:none!important}
  details::details-content{transition:none}
}
@media(max-width:560px){.art-ctas{grid-template-columns:1fr}.art-ctas .btn{font-size:1rem;padding:12px 16px}}
.wk-go{margin-top:8px;min-height:44px}
/* tables written without a thead still get the navy header row */
.compare:not(:has(thead)) tr:first-child th{background:var(--navy);color:#fff;font-weight:700;font-size:1.0625rem}
.compare:not(:has(thead)) tr:first-child th a{color:#fff}
/* grids that reflow when text is enlarged */
.town-grid{grid-template-columns:repeat(auto-fill,minmax(min(100%,11rem),1fr))!important}
.proj-meta{grid-template-columns:repeat(auto-fit,minmax(min(100%,10rem),1fr))}
.hero-badge,.gbadge{min-height:44px}
.foot details summary{min-height:44px;display:flex;align-items:center}

/* Footer logo: keep its natural proportions (the flex column was stretching it to full width) and match the header size */
.foot .foot-logo{height:36px;width:auto;max-width:none;align-self:flex-start;object-fit:contain;margin-bottom:20px}
@media(max-width:720px){.foot .foot-logo{height:30px}}

/* Mega menu: the top-level nowrap must not reach the dropdown, and columns may not grow past the panel */
.menu .mega a,.menu .mega a b,.menu .mega a span{white-space:normal}
.mega{width:min(720px,calc(100vw - 2*var(--gut)));grid-template-columns:repeat(2,minmax(0,1fr))}

/* New stacked logo (Sep 2026): taller than the old wordmark so MK LTD stays readable */
.brand img{height:54px;width:auto}
.foot .foot-logo{height:64px}
@media(max-width:720px){:root{--hh:88px}.brand img{height:69px}.foot .foot-logo{height:56px}}
@media(max-width:380px){.brand img{height:57px}}
/* Smallest phones: the bigger logo needs the room, so the Menu button goes icon-only (the word stays for screen readers) */
@media(max-width:400px){.nav-in{gap:6px}.nav-cta{gap:6px}.menu-toggle{width:44px;min-width:44px;padding:0;justify-content:center}.menu-toggle .mt-open,.menu-toggle .mt-close{font-size:0;gap:0}.menu-toggle svg{width:20px;height:20px}}

/* Full-photo hero (mockup build only: UD_HERO_FULL=1). Transparent header over the photo, headline and CTAs on the photo,
   trust points in a navy band below. Scoped to body.hdr-over so nothing else changes. */
.hdr-over .nav{position:fixed;left:0;right:0;top:0;background:transparent;box-shadow:none;transition:background-color var(--dur-ui) var(--ease),box-shadow var(--dur-ui) var(--ease)}
.hdr-over .nav:not(.scrolled) .brand img{filter:brightness(0) invert(1)}
.hdr-over .nav:not(.scrolled) :is(.menu>a,.menu>li>a,.menu .mm-t,.menu a:not(.mega a),.nav-tel){color:#fff}
.hdr-over .nav:not(.scrolled) .menu-toggle{color:#fff;border-color:rgba(255,255,255,.7);background:transparent}
.hdr-over .nav.scrolled,.hdr-over.menu-open .nav{background:#fff;box-shadow:var(--sh-nav)}
.hdr-over.menu-open .nav .brand img{filter:none}
.hdr-over.menu-open .nav :is(.menu-toggle){color:var(--ink);border-color:var(--line-control)}
@media(hover:hover) and (pointer:fine){.hdr-over .nav:not(.scrolled) :is(.menu a:not(.mega a),.menu .mm-t):hover{background:rgba(255,255,255,.12);color:#fff}}
.hdr-over .nav:not(.scrolled) :focus-visible{outline-color:#fff}
.hdr-over main>.hero-full:first-child,.hdr-over .hero-full{margin-top:0}
.hero-split.hero-full{display:flex;align-items:center;position:relative;isolation:isolate;overflow:hidden;min-height:clamp(620px,100svh,920px);padding-top:var(--hh);background:var(--navy)}
.hero-full .hf-ph,.hero-full .hf-ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.hero-full .hf-ph img{object-position:40% 38%}
.hero-full .hf-shade{position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(14,31,56,.7) 0%,rgba(14,31,56,0) 22%),linear-gradient(270deg,rgba(14,31,56,.92) 0%,rgba(14,31,56,.82) 34%,rgba(14,31,56,.3) 50%,rgba(14,31,56,0) 60%)}
.hero-full .hf-in{width:100%;max-width:calc(1280px + 2*var(--gut));margin:0 auto;padding:0 var(--gut)}
.hero-full .hs-txt{margin-left:auto;max-width:560px;padding:clamp(40px,6vw,80px) 0}
.hero-full h1{font-size:clamp(2.5rem,4.2vw,3.75rem);text-shadow:0 2px 24px rgba(14,31,56,.35)}
.hero-full .lede{color:#fff;text-shadow:0 1px 12px rgba(14,31,56,.4)}
.hero-full .btn,.hero-full .hero-badge{text-shadow:none}
.hero-full .hero-badge{position:absolute;left:max(var(--gut),calc((100vw - 1280px)/2 + var(--gut)));bottom:28px;top:auto;right:auto}
/* trust points: navy band straight under the photo */
.hdr-over .tstrip{background:var(--navy);border-bottom:0;border-top:1px solid var(--hair-dark)}
.hdr-over .tstrip b{color:#fff}.hdr-over .tstrip span{color:var(--on-dark-muted)}
@media(max-width:860px){
  .hero-split.hero-full{align-items:stretch;min-height:100svh}
  .hero-full .hf-ph img{object-position:50% 100%}
  .hero-full .hf-shade{background:linear-gradient(180deg,rgba(14,31,56,.85) 0%,rgba(14,31,56,.7) 30%,rgba(14,31,56,.12) 50%,rgba(14,31,56,.12) 66%,rgba(14,31,56,.5) 86%,rgba(14,31,56,.72) 100%)}
  .hero-full .hf-in{display:flex}
  .hero-full .hs-txt{margin:0;max-width:none;padding:16px 0 24px;display:flex;flex-direction:column;flex:1;text-shadow:0 1px 14px rgba(14,31,56,.6)}
  .hero-full h1{font-size:clamp(2rem,8.8vw,2.625rem)}
  .hero-full .lede{margin-top:12px}
  .hero-full .ctas{margin-top:auto}
  .hero-full .hero-badge{display:none}
}

/* Responsive images (F1, F2): img() wraps every photo in <picture>; the wrapper takes no part in layout */
picture:not(.hf-ph){display:contents}
source{display:none} /* with display:contents on <picture>, Chrome otherwise lets <source> take a grid cell */
.sm-only{display:none}
@media (max-width:860px){.lg-only{display:none}.sm-only{display:inline}
  .hero-full .hf-proof{display:inline-flex;min-height:44px;align-self:flex-start;align-items:center;gap:8px;margin:auto 0 12px;padding:8px 12px;background:#fff;border-radius:8px;color:var(--navy);font-size:.9375rem;text-decoration:none;text-shadow:none;box-shadow:0 4px 16px rgba(14,31,56,.25)}
  .hero-full .hf-proof .google-wordmark{height:20px;width:auto}
  .hero-full .hf-proof+.ctas{margin-top:0}}
/* F7: the reviews page lists over 100 cards; let the browser skip rendering the ones far below the screen */
.rv-g:nth-of-type(n+7){content-visibility:auto;contain-intrinsic-size:auto 240px}
/* article photo under the answer box (H8) */
.article .art-fig{margin:28px 0 0}
.article .art-fig img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:var(--r)}
.article .art-fig figcaption{margin-top:8px;font-size:.875rem;color:var(--muted)}
/* tables that scroll sideways on phones instead of pushing the page wide */
.tbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}
.tbl-wrap table{min-width:560px}
caption{caption-side:top;text-align:left;font-weight:600;padding:14px 16px 4px;color:var(--ink)}
/* C1: outline buttons inside the white form card stay dark, even in the navy quote section */
.quote-sec .qs .btn-line{color:var(--ink);box-shadow:inset 0 0 0 1.5px currentColor}
@media(hover:hover) and (pointer:fine){.quote-sec .qs .btn-line:hover{background:var(--ink);color:#fff;box-shadow:inset 0 0 0 1.5px var(--ink)}}
/* C7: a disabled button never reacts to hover */
.btn:disabled{cursor:not-allowed}
@media(hover:hover) and (pointer:fine){.btn-call:disabled:hover,.btn-quote:disabled:hover,.btn-call-solid:disabled:hover,.qs-send:disabled:hover,.qs-send[aria-disabled="true"]:hover,.qs-next:disabled:hover{background:var(--blue)}.btn-wa:disabled:hover{background:var(--wa)}}
/* G19: Call me / Email me as two large choices */
.qs-seg{border:0;margin:0 0 16px;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:10px}
.qs-seg legend{font-weight:600;margin-bottom:8px;padding:0}
.qs-seg label{position:relative;display:block;cursor:pointer}
.qs-seg input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.qs-seg span{display:flex;align-items:center;justify-content:center;min-height:52px;border-radius:var(--r);box-shadow:inset 0 0 0 1.5px var(--line-control);font-weight:600;transition:box-shadow var(--dur-fast) var(--ease),background-color var(--dur-fast) var(--ease)}
.qs-seg input:checked+span{box-shadow:inset 0 0 0 2px var(--blue);background:var(--blue-soft);color:var(--navy)}
.qs-seg input:focus-visible+span{outline:3px solid var(--blue);outline-offset:2px}
@media(hover:hover) and (pointer:fine){.qs-seg label:hover span{box-shadow:inset 0 0 0 2px var(--ink)}}
/* C4: the answer you picked stays marked when you come back to a step */
.qs-opts button[aria-pressed="true"]{box-shadow:inset 0 0 0 2px var(--blue);background:var(--blue-soft);color:var(--navy)}
.qs-done .ctas{margin-top:16px}
/* G3: cookie bar sits above the phone call dock and never covers it */
.consent{position:fixed;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom));z-index:90;max-width:560px;margin:0 auto;background:#fff;color:var(--ink);border-radius:var(--r);box-shadow:0 10px 40px rgba(14,31,56,.25);padding:16px;display:grid;gap:12px}
.consent[hidden]{display:none}
.consent p{font-size:.9375rem;line-height:1.5}
.consent-b{display:flex;gap:10px}.consent-b .btn{flex:1;min-height:48px}
.dock-on .consent{bottom:calc(88px + env(safe-area-inset-bottom))}
/* A6: stars with the score in words; empty stars visible */
.rstars{display:inline-flex;align-items:center;gap:8px}
.rstars .st-e{color:#C4CAD3}
.stars-n{font-size:.875rem;font-weight:700;color:var(--ink)}
.sec-dark .stars-n,.feature-rv .stars-n{color:inherit}
/* G14: the number itself in the header Call button on wide screens */
.nav .lbl-n{display:none}
@media(min-width:1400px){.nav .lbl-n{display:inline}}
/* B4: footer phone number is a full-size tap target */
.foot-big a{display:inline-flex;align-items:center;min-height:44px}
/* B2: a minimum gap above the buttons on short phones, and buttons that stop growing on tablets */
@media(max-width:860px){.hero-full .lede{margin-bottom:20px}.hero-full .ctas .btn{max-width:440px}}
/* B3: at large text sizes, cards drop to fewer columns instead of clipping (column widths in em scale with the text) */
@media(max-width:520px){.plats{grid-template-columns:repeat(auto-fit,minmax(min(100%,9.5em),1fr))}.plat:last-child{grid-column:auto}}
.plat .stars{white-space:normal}
.wk figcaption,.wk figcaption b{overflow-wrap:break-word;min-width:0}
.wk-go{white-space:normal}
@media(max-width:560px){.wk-grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,10em),1fr))}}
@media(max-width:560px){.wk-wide{grid-column:1/-1}}
/* A4: one chip style for Reviews and Our work (the reviews rail had a 1px edge too faint to see) */
.wf-scroll .chipf,.wf-scroll .wf,.wf{box-shadow:inset 0 0 0 1.5px var(--line-control);font-weight:600;min-height:44px;font-size:.9375rem}
.wf-scroll .chipf[aria-pressed="true"],.wf-scroll .wf[aria-pressed="true"],.wf[aria-pressed="true"]{box-shadow:none}
/* A10: five steps sit in one row on wide screens (no empty sixth slot); four steps in a row of four */
@media(min-width:1101px){.steps:has(>li:nth-child(5):last-child){grid-template-columns:repeat(5,1fr);gap:14px}.steps:has(>li:nth-child(5):last-child) li{padding:20px 18px}
  .steps:has(>li:nth-child(4):last-child){grid-template-columns:repeat(4,1fr)}}
@media(min-width:621px) and (max-width:1100px){.steps:has(>li:nth-child(5):last-child)>li:last-child{grid-column:1/-1}}
/* A9: photo strips are a tidy grid of four on desktop and keep swiping on phones */
@media(min-width:961px){.strip{display:grid;grid-template-columns:repeat(4,1fr);overflow:visible;scroll-snap-type:none;padding-bottom:0}.strip figure{flex:none;min-width:0}.strip figure:nth-child(n+9){display:none}}
/* G8, G16: reassurance next to the buttons (facts from docs/CONFIRMATIONS.md, Terry to check) */
.hs-reassure{margin-top:14px;font-size:.9375rem;color:var(--on-dark-muted,rgba(255,255,255,.8))}
.hero-full .hs-reassure{color:#fff;text-shadow:0 1px 10px rgba(14,31,56,.5)}
@media(max-width:860px){.hero-full .hs-reassure{display:none}}
/* G15: on phones the first form question shows without scrolling far (ticks and badge follow the form) */
@media(max-width:960px){.q-hero .q-hero-extra{display:none}.q-hero .ctas{margin-top:16px}.q-hero-form{margin-top:4px}}
/* C3: the footer is light, so its focus ring is blue */
.foot a:focus-visible,.foot summary:focus-visible,.foot button:focus-visible{outline-color:var(--blue)}
/* B6: on phones the hero photo carries only the Google badge, not a caption as well */
@media(max-width:860px){.ar-hcap,.dw-cap,.pg-hcap{display:none}}

/* Photo hero on every page (Terry, 30 Sep 2026): the page's own job photo fills the hero behind the text, with the clear header.
   Built from the split hero markup: .hs-ph becomes the background layer, .hf-shade keeps every word readable. */
.hero-split.hero-bg{display:flex;align-items:center;position:relative;isolation:isolate;overflow:hidden;min-height:clamp(600px,88svh,860px);padding-top:var(--hh);background:var(--navy)}
.hero-bg .hs-ph{position:absolute;inset:0;z-index:auto;min-height:0;aspect-ratio:auto;background:none}
.hero-bg .hs-ph>picture>img,.hero-bg .hs-ph>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.hero-bg .hero-badge{z-index:1}
.hero-bg .hf-shade{position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(14,31,56,.72) 0%,rgba(14,31,56,0) 24%),linear-gradient(90deg,rgba(14,31,56,.93) 0%,rgba(14,31,56,.84) 36%,rgba(14,31,56,.4) 58%,rgba(14,31,56,.08) 78%)}
.hero-bg .hs-txt{max-width:calc(640px + max(var(--gut),(100vw - 1280px)/2 + var(--gut)));padding-top:clamp(32px,5vw,64px);padding-bottom:clamp(48px,6vw,88px);text-shadow:0 1px 14px rgba(14,31,56,.45)}
.hero-bg .btn,.hero-bg .hero-badge{text-shadow:none}
.hero-bg .crumbs{margin:0 0 18px;padding:0;background:none}
.hero-bg .crumbs,.hero-bg .crumbs a,.hero-bg .crumbs span{color:var(--on-dark)}
.hero-bg .lede,.hero-bg .ticks,.hero-bg .k,.hero-bg .hs-reassure{color:#fff}
.hero-bg .hs-txt{position:relative;z-index:1} /* the text column sits above the absolutely positioned photo layer so its buttons can be clicked */
.hero-bg .hero-badge{left:auto;right:max(var(--gut),calc((100vw - 1280px)/2 + var(--gut)));bottom:28px;top:auto;z-index:2}
.hero-bg .ar-hcap,.hero-bg .dw-cap,.hero-bg .pg-hcap{display:none}
@media(max-width:860px){
  .hero-split.hero-bg{display:block;min-height:0}
  .hero-bg .hs-ph>picture>img,.hero-bg .hs-ph>img{bottom:auto;height:min(62%,560px)}
  .hero-bg .hf-shade{background:linear-gradient(180deg,rgba(14,31,56,.6) 0,rgba(14,31,56,.3) 110px,rgba(14,31,56,.55) 200px,rgba(14,31,56,.92) min(58%,520px),var(--navy) min(62%,560px))}
  .hero-bg .hs-txt{max-width:none;padding:clamp(150px,40vw,220px) var(--gut) 28px}
  .hero-bg .crumbs,.hero-bg .k{text-shadow:0 1px 10px rgba(14,31,56,.8)}
  .hero-bg .hs-ph>picture>img,.hero-bg .hs-ph>img{height:min(66%,600px)}
  .hero-bg .hero-badge{position:absolute;left:var(--gut);right:auto;top:auto;bottom:20px;margin:0}
  .hero-bg .hs-txt{padding-bottom:88px}

}
.hero-bg .hs-ph{isolation:auto}
/* Office number button on the home hero (Terry, 1 Oct 2026): outline on the photo, after Call Terry */
.hero-full .btn-office{color:#fff;background:rgba(14,31,56,.35);box-shadow:inset 0 0 0 1.5px #fff}
.btn-office svg{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
@media(hover:hover) and (pointer:fine){.hero-full .btn-office:hover{background:#fff;color:var(--navy)}}
@media(max-width:860px){.hero-full .ctas{gap:10px}}
.foot-office{margin-top:4px}.foot-office a{color:var(--blue);font-weight:600;display:inline-flex;align-items:center;min-height:44px}
/* Quality Business Awards 2026 winner (12 Oct 2026) */
.award{display:inline-flex;align-items:center;gap:12px;min-height:48px;padding:10px 16px;border-radius:var(--r);background:#fff;color:var(--ink);text-decoration:none;box-shadow:inset 0 0 0 1.5px var(--g200);font-size:.9375rem;line-height:1.35;max-width:100%}
.award svg{flex:none;color:var(--star)}
.award b{display:block;font-weight:700;color:var(--navy)}
.award-dark{background:var(--navy-2);color:var(--on-dark);box-shadow:none}.award-dark b{color:#fff}
.award-row{display:flex;justify-content:center;margin-top:20px}.award-row-left{justify-content:flex-start;margin:0 0 24px}
.foot .award{margin-top:16px;background:#fff}
@media(hover:hover) and (pointer:fine){.award:hover{box-shadow:inset 0 0 0 2px var(--blue)}.award-dark:hover{box-shadow:inset 0 0 0 2px var(--on-dark-accent)}}

/* handover review, 12 Oct 2026 */
.hdr-over .nav:not(.scrolled) .mega :focus-visible,.hdr-over.menu-open .nav :focus-visible{outline-color:var(--blue)}
.qs-back:disabled,.qs-change:disabled{opacity:.5;cursor:not-allowed}
.qs-change{transition:color var(--dur-fast) var(--ease)}
@media(hover:hover) and (pointer:fine){.qs-change:hover,main p a:hover,.review-source:hover,.art-body a:hover{color:var(--blue)}}
.qs-change:active,.award:active{transform:scale(.98)}
.ba:focus-within{outline:none}.ba:has(input:focus-visible){outline:3px solid var(--blue);outline-offset:3px}
.hf-proof{border-radius:var(--r)}
.google-wordmark{flex:none;height:20px;width:auto}
.nav-cta{gap:8px}
.foot-big a{margin-top:4px}
/* 200% text: two-column grids wrap instead of pushing the page wide */
.pg-compare tr,.dw-mx-list,.tstrip ul,.bands,.dw-svc .pcard{grid-template-columns:repeat(auto-fit,minmax(min(100%,8.5em),1fr))}
.tstrip li,.band,.dw-mx-list a,.pg-compare td{min-width:0;overflow-wrap:anywhere}
.callbar{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.cb{min-width:0;font-size:clamp(.875rem,3.6vw,1rem);padding:0 6px}.cb span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media(max-width:560px){.plats .plat:last-child:nth-child(odd){grid-column:1/-1}}
.compare th:first-child,.compare tbody th{position:sticky;left:0;background:#fff;z-index:1}
.office-line{margin:12px 0 0;font-size:.9375rem;display:flex;align-items:center;flex-wrap:wrap;gap:0 8px}.office-line a{color:inherit;font-weight:700;text-decoration:none;display:inline-flex;align-items:center;min-height:44px;gap:6px;white-space:nowrap}.office-line svg{width:18px;height:18px;flex:none}
.hero-full .office-line{color:#fff;text-shadow:0 1px 10px rgba(14,31,56,.5)}
.hero-badge-award{position:absolute;left:max(var(--gut),calc((100vw - 1280px)/2 + var(--gut)));bottom:92px;top:auto;right:auto;z-index:2}
.hero-badge-award svg{color:var(--star)}.hero-badge-award span{font-size:.875rem;line-height:1.3}.hero-badge-award b{display:block;font-size:.9375rem;color:var(--navy)}
@media(max-width:860px){.hero-badge-award{display:none}}
/* B2: while the dock is showing, the page ends with room under it so the footer's last line is never hidden (the dock is taller at large text) */
@media(max-width:860px){html.dock-on body{padding-bottom:calc(72px + env(safe-area-inset-bottom,0px))}html.dock-on .foot{padding-bottom:1.5em}}
/* Phone home hero (Jake, 13 Oct 2026): sized by its content, not by the viewport. In-app browsers (WhatsApp, Messages, Facebook)
   report a viewport taller than what they show, so a 100svh hero pushed the buttons below the fold and the headline under the
   header once scrolled. The photo gap between the lede and the Google badge is a fixed band instead. */
@media(max-width:860px){
  .hero-split.hero-full{min-height:0}
  .hero-full .hs-txt{padding-top:24px}
  .hero-full .hf-proof{margin-top:clamp(150px,24vh,260px)}
}

/* Award emblem and office button (Jake, 25 Oct 2026). The Quality Business Awards 2026 winner emblem replaces the trophy icon
   everywhere, sits on every photo hero, and gets its own band under the trust strip on service, area and work pages. */
.emblem{display:block;flex:none;border-radius:50%}
.award .emblem{width:48px;height:48px}
.hero-badge-award{gap:14px;padding:10px 18px 10px 10px;bottom:96px}
.hero-badge-award .emblem{width:72px;height:72px}
.hero-award{position:absolute;right:max(var(--gut),calc((100vw - 1280px)/2 + var(--gut)));bottom:96px;z-index:2;display:flex;align-items:center;gap:14px;padding:10px 18px 10px 10px;background:#fff;border-radius:var(--r);box-shadow:var(--sh-2);color:var(--ink);text-decoration:none;font-size:.875rem;line-height:1.3;max-width:330px;text-shadow:none}
.hero-award b{display:block;color:var(--navy);font-size:.9375rem;font-weight:700}
.hero-award .emblem{width:72px;height:72px}
@media(hover:hover) and (pointer:fine){.hero-award:hover{box-shadow:0 2px 4px rgba(14,31,56,.08),0 20px 44px rgba(14,31,56,.18)}}
.hero-award:active,.hf-emblem:active{transform:scale(.98)}
@media(max-width:860px){
  .hero-award{top:calc(var(--hh) + 12px);bottom:auto;right:var(--gut);padding:0;background:none;border-radius:50%;box-shadow:0 6px 18px rgba(14,31,56,.4)}
  .hero-award span{display:none}
  .hero-award .emblem{width:80px;height:80px}
  .hero-full .hf-proofs{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:clamp(140px,22vh,240px) 0 12px}
  .hero-full .hf-proofs .hf-proof{margin:0}
  .hero-full .hf-proofs+.ctas{margin-top:0}
  .hf-emblem{display:block;flex:none;border-radius:50%;box-shadow:0 4px 16px rgba(14,31,56,.35)}
  .hf-emblem .emblem{width:64px;height:64px}
}
/* Office number as a proper button: outline, so Call Terry (solid white) stays the strongest and WhatsApp (green) second */
.btn-office{margin-top:12px;min-height:52px;font-size:1rem;color:#fff;background:rgba(14,31,56,.4);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.9);text-shadow:none}
.btn-office svg{width:20px;height:20px}
@media(hover:hover) and (pointer:fine){.btn-office:hover{background:#fff;color:var(--navy)}}
@media(max-width:860px){.btn-office{width:100%}}
/* award band */
.award-band{background:var(--g50);border-bottom:1px solid var(--g200)}
.award-band-in{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:28px;padding-block:28px}
.award-band .emblem{width:112px;height:112px}
.award-band .k{margin:0}
.award-band h2{font-size:clamp(1.375rem,2.4vw,1.75rem);line-height:1.15;margin:.2em 0 .3em}
.award-band p:not(.k){margin:0;max-width:62ch}
@media(max-width:700px){.award-band-in{grid-template-columns:auto 1fr;gap:16px;padding-block:24px}.award-band .emblem{width:84px;height:84px}.award-band-go{grid-column:1/-1}}
.foot .award .emblem{width:56px;height:56px}
@media(min-width:861px){.btn-office{align-self:flex-start;width:auto;display:inline-flex}.hero-full .btn-office{display:flex;width:fit-content}}
.hero-award{max-width:390px}
@media(max-width:860px){.hero-full .hf-proofs .hf-proof{white-space:nowrap}}