/* Gadcet Fix / More life. A single campaign identity across every route.
   Structural CSS owns behaviour; this file owns the visual system. */
:root{--brand:#08734c;--brand-dark:#075638;--brand-deep:#102c23;--brand-soft:#edf3e8;--brand-bright:#d6f76a;--brand-lift:#d6f76a;--ink:#102c23;--text:#102c23;--text-soft:#536058;--text-mute:#5b655d;--forest:#102c23;--canvas:#f5f4ed;--sage:#e8eecf;--mint:#edf3e8;--cool:#eef0e8;--line:#d8ddd1;--line-soft:#e7e9e0;--price:#102c23;--price-dark:#d6f76a;--r-btn:6px;--r-card:10px;--r-media:12px;--r-feature:12px;--t-title:clamp(1.9rem,3.3vw,3rem);--t-hero-page:clamp(2.6rem,5.3vw,5rem);--rhythm:80px;--shadow-sm:none;--shadow-md:none}
body{background:var(--canvas);color:var(--ink)}
h1,h2,h3,.display-l,.display-m,.opener__title{text-wrap:balance}
.section{padding-block:72px}.surface{background:#fff}.canvas,.bench{background:var(--canvas)}.eyebrow,.hero__eyebrow{text-transform:uppercase}.subhead,.lede{color:var(--text-soft)}
/* The same unmistakable green masthead on every page. */
.header,.header.is-scrolled,.header[data-scrolled]{background:#102c23!important;border-bottom:1px solid #355045;color:#fff;backdrop-filter:none;box-shadow:none}
.header :is(.logo,.logo__name,.logo__sub,.header__phone,.nav__link,.menu-btn){color:#fff}.header .logo__mark{background-color:#d6f76a}.header .logo__text{gap:5px}.header .logo__sub{color:#d6f76a}
.header .nav__link{padding:10px 14px;border-radius:0}.header .nav__link:hover,.header .nav__link.is-current{color:#d6f76a;background:transparent;box-shadow:inset 0 -2px #d6f76a}.header .header__phone{color:#ced9cf}.header .btn--primary{background:#d6f76a;color:#102c23;border-color:#d6f76a;border-radius:5px}
.btn{border-radius:5px;min-height:48px;box-shadow:none}.btn--primary{background:#08734c;color:#fff;border-color:#08734c}.btn--primary:hover{background:#075638;color:#fff;border-color:#075638}.btn--secondary{background:transparent;color:#102c23;border-color:#9fac9f}.btn--secondary:hover{background:#e8eecf;border-color:#102c23;color:#102c23}.header .btn--primary:hover{background:#e4ff9b;color:#102c23;border-color:#e4ff9b}
.btn__arrow{margin-left:10px}.menu{background:var(--canvas);color:var(--ink)}.menu__list a{color:var(--ink)}.menu__list a:hover{color:var(--brand)}.menu .phone-link,.menu .tlink{color:var(--brand)}.crumbs{background:var(--canvas);border-bottom:1px solid var(--line)}
/* Repairs: a visual chooser, not a second booking wizard. */
.repair-hub{padding:56px 0 64px;background:var(--canvas)}.repair-hub__intro{display:grid;grid-template-columns:1.35fr .65fr;align-items:end;gap:50px}.repair-hub__intro .eyebrow{margin-bottom:16px}.repair-hub h1{margin:0}.repair-hub h1 em{color:#08734c}.repair-hub__intro .lede{margin:0 0 4px;max-width:370px}
.repair-hub .finder-wrap{background:transparent;margin:0;padding:34px 0 32px}.repair-hub .finder{background:transparent;border:0;padding:0;box-shadow:none}.repair-hub .finder__head,.repair-hub .finder__trust,.repair-hub .finder__stores{display:none}.repair-hub .repair-searchbox{max-width:680px}.repair-hub .search input{min-height:60px;border-radius:5px;border:1px solid #8d9c8c;background:white}.repair-hub .finder__devices{grid-template-columns:repeat(4,minmax(0,1fr));margin-top:30px;gap:16px}.repair-hub .finder__device{display:flex;flex-direction:column;grid-template-rows:none;min-height:0;padding:0;border-radius:8px;background:#e7e5da;border:1px solid #d1d5c7;box-shadow:none;transition:transform .2s,border-color .2s}.repair-hub .finder__device:nth-child(2){background:#e2e9d8}.repair-hub .finder__device:nth-child(3){background:#e8e1d8}.repair-hub .finder__device:nth-child(4){background:#d9e4de}.repair-hub .finder__device:hover{transform:translateY(-4px);border-color:#08734c}.repair-hub .finder__device-shot{display:block;width:100%;height:auto;aspect-ratio:1.3;padding:0;background:transparent;overflow:hidden}.repair-hub .finder__device-shot picture{display:block;height:100%;mix-blend-mode:multiply;background:transparent!important}.repair-hub .finder__device-shot img{width:100%;height:100%;object-fit:cover;mix-blend-mode:multiply;transition:transform .3s}.repair-hub .finder__device:hover img{transform:scale(1.04)}.repair-hub .finder__device-body{display:flex;flex-direction:column;min-height:0;padding:20px 22px 22px;gap:9px}.repair-hub .finder__device-name{color:#102c23}.repair-hub .finder__device-note{display:none}.repair-hub .finder__device-go{display:flex;justify-content:space-between;align-items:center;margin:0;color:#254d37}.repair-hub .finder__device-go svg{padding:8px;border:0;background:#102c23;color:#d6f76a;width:14px;height:14px}.repair-hub .finder__faults{border:0;padding:0;gap:16px;margin-top:24px}.repair-hub .pill{border-radius:4px;background:#fff;min-height:36px;border-color:#bdc7b9;color:#304936}.repair-hub__help{display:grid;grid-template-columns:72px 1fr auto;gap:28px;align-items:center;background:#d6f76a;border-radius:8px;padding:30px 36px}.repair-hub__help-icon{width:64px;height:64px;display:grid;place-items:center;border:1px solid #7a983a;border-radius:50%}.repair-hub__help .eyebrow{margin-bottom:6px;color:#405629}.repair-hub__help p:not(.eyebrow){max-width:540px;margin:8px 0 0;color:#344c27}.repair-hub__help .btn{background:#102c23;border-color:#102c23;color:#d6f76a;white-space:normal}
/* Page openings keep their own pace while sharing the type and colour. */
.hero--compact,.hero--editorial{--hero-pad:44px;padding-block:44px}.hero--white{background:var(--canvas)}.hero--sage{background:#e8eecf}.hero--cool{background:#e8eee2}.hero--canvas{background:var(--canvas)}.hero--forest,.hero--ink{background:#102c23;color:#fff}.hero--forest :is(.hero__title,.hero__lede),.hero--ink :is(.hero__title,.hero__lede){color:#fff}.hero--forest .hero__eyebrow,.hero--ink .hero__eyebrow{color:#d6f76a}.hero--text-only .hero__title{max-width:940px}.hero--editorial .hero__title{max-width:900px}.hero__lede{margin-top:20px;max-width:660px}.hero__media,.hero__card,.quote-widget{border-radius:8px;box-shadow:none}.hero__card{background:#fff;border:1px solid var(--line);padding:28px}.hero__card :is(h2,p,label){color:var(--ink)}.hero__media img{border-radius:8px}.opener{margin-bottom:36px}.opener__title{max-width:860px}.opener__sub{max-width:620px}.opener__eyebrow{color:var(--brand)}
/* Editorial rhythm replaces rows of identical floating cards. */
.rail{gap:0;counter-reset:steps}.rail__step{position:relative;background:transparent;border:0;border-left:1px solid var(--line);border-radius:0;padding:12px 28px 8px}.rail__step:first-child{padding-left:0;border-left:0}.rail__step::before{width:auto;height:auto;display:block;border:0;border-radius:0;background:none;color:#08734c;margin-bottom:24px;content:'0' counter(steps);counter-increment:steps}.rail__step::after{content:none}.home-process .opener{display:grid;grid-template-columns:1fr auto;gap:10px 40px;align-items:end}.home-process .opener__eyebrow{grid-column:1/-1}.home-process .opener__sub{max-width:300px}
.storecard{border:1px solid #c9d2c4;border-top:3px solid #102c23;border-radius:6px;background:#fff;box-shadow:none}.storecard__links a{border-radius:4px}.storecard__links a:last-child{background:#102c23;border-color:#102c23;color:#d6f76a}.storecard:hover{box-shadow:none;border-color:#08734c}.store-locator-layout{align-items:start}.store-locator-results__head{border-bottom:1px solid #b7c4b2;padding-bottom:18px;margin-bottom:22px}.store-locator-results .grid--stores{gap:20px}.store-locator-page{background:var(--canvas)}.branch-opening{background:var(--canvas)}.branch-opening h1{margin:14px 0 34px}.branch-hours{background:#e8eecf;border:0;border-radius:6px;padding:32px}.branch-identity picture,.branch-identity figure>img{border-radius:8px;overflow:hidden}.branch-identity figure>img{width:100%;height:auto}.branch-services a{border-radius:5px;background:var(--canvas)}
.review{border:0;border-radius:0;box-shadow:none;background:transparent;border-left:2px solid #9eb494;padding:8px 28px}.artcard{border:0;border-radius:8px;background:var(--canvas);box-shadow:none}.artcard__shot{border-radius:8px 8px 0 0}.artcard__body{padding:26px}.artcard--feature{background:#e8eecf}.prose{max-width:720px}.prose h2{margin-top:38px}.accordion summary{padding-block:22px}.accordion details{border-color:#cfd7c8}.accordion details[open]{background:#f7f8f2}.card,.panel,.warranty-panel{border-radius:8px;box-shadow:none}.faultcard{border-radius:6px;box-shadow:none;padding:24px;border-color:var(--line);background:#fff}.faultcard__icon{border-radius:4px;background:var(--sage)}.policy-contents{border-radius:6px;background:var(--sage)}
/* Search, prices and forms: clear contrast and dense, readable answers. */
.search input,input,select,textarea{border-radius:5px}.search input{min-height:54px;background:#fff}.repair-searchbox__submit{border-radius:4px;background:#08734c}.pgroups__toolbar{background:#fff;border:1px solid #bbc8b5;padding:22px;border-radius:8px;margin-bottom:24px;box-shadow:0 3px 0 #102c23}.pgroups__toolbar .search{max-width:none}.pgroups__row .search{max-width:none}.filter,.filter-select,.tab{border-radius:4px}.filter[aria-pressed=true],.tab.is-current{background:#102c23;color:#d6f76a;border-color:#102c23}.pgroup{border-radius:6px;border:1px solid #c5d0bf;box-shadow:none;background:#fff}.pgroup__head{background:#e8eecf;padding:22px 20px;border-bottom:1px solid #c5d0bf}.pgroup__brand{color:#496243}.prow{padding:18px 20px}.prow:hover{background:#f3f7ec}.prow__book{border-radius:4px}.pgroups__note{max-width:800px}.pgroups__list{gap:20px}.enquiry-form input,.enquiry-form textarea,.form input,.form textarea{background:#fff;border-color:#a8b6a1}#business-form{padding:32px;border-top:4px solid #08734c;background:#f5f4ed}.split>.stack picture{display:block;overflow:hidden;border-radius:8px;margin-top:20px}.split>.stack picture img{width:100%;height:260px;object-fit:cover}
/* Clear, vivid closing action — not another generic pale panel. */
.cta{width:auto;margin:0;border-radius:0;background:#d6f76a;padding-block:48px;color:#102c23}.cta .cta__inner{padding-block:0;max-width:1000px;gap:20px}.cta .cta__title{color:#102c23}.cta .cta__sub{color:#3b522b;max-width:650px}.cta .btn--primary{background:#102c23;color:#d6f76a;border-color:#102c23}.cta .btn--secondary{color:#102c23;border-color:#6f8749}.cta .phone-link{color:#264423}.footer{background:#102c23;color:#fff;padding-top:0}.footer__statement{display:grid;grid-template-columns:1fr auto;gap:40px;align-items:end;border-bottom:1px solid #3a5445;padding:64px 0 54px;margin-bottom:54px}.footer__statement>p{margin:0;color:white}.footer__statement em{color:#d6f76a}.footer__statement>div{display:flex;flex-direction:column;align-items:stretch;gap:12px;min-width:220px}.footer__statement>div>span{color:#bfcdbb;margin-bottom:8px}.footer__statement .btn--primary{background:#d6f76a;color:#102c23;border-color:#d6f76a}.footer__statement .btn--secondary{color:#fff;border-color:#67805f;background:transparent}.footer .logo__mark{background:#d6f76a}.footer__heading{color:#d6f76a}.footer__outbound{border-radius:5px;background:#1b382a;border-color:#3f5845}.footer__bar{margin-top:34px}.footer__links a:hover,.footer__store a:hover{color:#d6f76a}.actionbar{border-radius:0;box-shadow:0 -1px 0 #c4cfbd}.actionbar__btn--book{background:#102c23;color:#d6f76a}
/* The only booking interface uses the same materials, without campaign distractions. */
.unified-booking.booking-active{padding-top:0;background:var(--canvas)}.unified-booking #main.page{padding-top:0}.unified-booking .booking-shell{--bk-brand:#08734c;--bk-brand-hover:#075638;--bk-brand-soft:#edf3e8;--bk-bg:#f5f4ed;--bk-text:#102c23;--bk-ink:#102c23;--bk-border:#c9d3c1;--bk-line:#c9d3c1;--bk-green:#08734c;--bk-green-dark:#075638;--bk-sage:#e8eecf;--bk-plate:#f5f4ed;--bk-muted:#536058;--bk-radius:6px;background:#f5f4ed;min-height:75vh}.unified-booking .booking-progress-wrap{top:var(--header-h,76px);z-index:20;background:#e8eecf;border-bottom:1px solid #c5cfba}.booking-shell .booking-progress__step.is-active span,.booking-shell .booking-progress__step.is-complete span{background:#102c23;color:#d6f76a}.booking-shell .booking-layout{padding-top:36px}.booking-shell .repair-summary{border-radius:6px;border:1px solid #c2ceba;border-top:4px solid #102c23;box-shadow:none;background:#fff}.booking-shell .device-choice,.booking-shell .store-result,.booking-shell .booking-details-form,.booking-shell .review-booking,.booking-shell .booking-model-row,.booking-shell .repair-choice{border-radius:6px;box-shadow:none}.booking-shell .booking-primary,.booking-shell .booking-secondary{border-radius:5px}.unified-booking .booking-primary{background:#08734c;border-color:#08734c;color:#fff}.unified-booking .booking-primary:hover{background:#075638}.booking-shell .booking-details-form{background:#fff;border-color:#c2ceba}.booking-shell .booking-details-form input,.booking-shell .booking-details-form textarea{border-radius:4px;border-color:#9eaf96}.booking-shell .booking-mobile-action{z-index:30}.unified-booking .footer__statement{display:none}.unified-booking .footer{padding-top:48px;margin-bottom:0}.unified-booking .booking-shell :focus{scroll-margin-top:160px;scroll-margin-bottom:150px}
:focus-visible{outline:3px solid #08734c;outline-offset:4px}.header :focus-visible,.footer :focus-visible{outline-color:#d6f76a}::selection{background:#d6f76a;color:#102c23}
@media(max-width:1199px){.repair-hub .finder__device-body{padding:18px 16px}.repair-hub__help{grid-template-columns:56px 1fr}.repair-hub__help .btn{grid-column:2;justify-self:start}.repair-hub__help-icon{width:52px;height:52px}.repair-hub__intro{grid-template-columns:1.1fr .9fr;gap:36px}}
@media(max-width:899px){.section{padding-block:48px}.repair-hub{padding-top:36px}.repair-hub__intro{display:block}.repair-hub__intro .lede{margin-top:18px;max-width:570px}.repair-hub .finder-wrap{padding-top:24px}.repair-hub .finder__devices{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.repair-hub .finder__device-shot{aspect-ratio:1.6}.repair-hub .finder__device-body{padding:18px}.repair-hub__help{padding:26px;gap:20px}.home-process .opener{display:block}.home-process .opener__sub{max-width:580px}.rail__step{padding:12px 20px}.hero--compact,.hero--editorial{padding-block:32px}.pgroups__toolbar{padding:16px}.footer__statement{padding:46px 0 38px;grid-template-columns:1fr auto;gap:24px}.footer__statement>div{min-width:180px}.cta{padding-block:40px}.header .btn--primary{min-height:40px}.booking-shell .booking-layout{padding-top:24px}}
@media(max-width:599px){.repair-hub{padding:30px 0 40px}.repair-hub h1{max-width:460px}.repair-hub .finder__devices{gap:10px;margin-top:22px}.repair-hub .finder__device-shot{aspect-ratio:1.24}.repair-hub .finder__device-body{padding:12px 13px 14px;gap:10px}.repair-hub .finder__device-go{gap:4px}.repair-hub .finder__device-go svg{padding:5px;width:12px;height:12px}.repair-hub .finder__faults{display:block;margin-top:20px}.repair-hub .finder__faults-label{display:block;margin-bottom:10px}.repair-hub .finder__fault-pills{display:flex;flex-wrap:wrap;gap:7px}.repair-hub .pill{min-height:36px;padding:7px 10px}.repair-hub__help{padding:22px 20px;grid-template-columns:1fr;gap:15px}.repair-hub__help-icon{display:none}.repair-hub__help .btn{grid-column:auto;justify-self:stretch}.section{padding-block:40px}.opener{margin-bottom:26px}.rail{display:block}.rail__step,.rail__step:first-child{display:grid;grid-template-columns:45px 1fr;gap:0 18px;border:0;border-top:1px solid var(--line);padding:22px 0}.rail__step::before{grid-column:1;grid-row:1/3;margin:0}.rail__step h3{grid-column:2}.rail__step p{grid-column:2}.footer__statement{grid-template-columns:1fr;padding:38px 0;gap:28px;margin-bottom:36px}.footer__statement>div{display:grid;grid-template-columns:1fr 1fr;gap:10px;min-width:0}.footer__statement>div>span{grid-column:1/-1;margin-bottom:2px}.footer__statement .btn{padding-inline:8px}.footer__statement .btn svg{width:14px}.footer__statement .btn__arrow{margin-left:0}.footer__grid{gap:30px 20px}.review{padding:8px 20px}.pgroup__head{padding:18px}.prow{padding:16px 18px}.branch-hours{padding:22px}.hero__card{padding:22px}.pgroups__toolbar{padding:14px}#business-form{padding:24px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation:none!important;transition:none!important}.repair-hub .finder__device:hover,.repair-hub .finder__device:hover img{transform:none}}

/* Final composition refinements. */
.home-process .opener{display:block}.home-process .opener__text{display:grid;grid-template-columns:1.4fr .6fr;gap:14px 52px;align-items:end}.home-process .opener__text>.eyebrow{grid-column:1/-1}.home-process .opener__text>.subhead{max-width:310px;margin:0 0 6px}.finder__search{margin-bottom:0}.home-stores .opener__text{max-width:650px}.home-stores .opener__text>.subhead{max-width:540px}.footer__statement .btn--secondary:hover{background:#284331}.footer__statement .btn--primary:hover{background:#e4ff9b}.hero--forest .hero__lede{color:#d0dacb}
@media(max-width:599px){.home-process .opener__text{display:block}.home-process .opener__text>.subhead{max-width:none;margin-top:14px}}

.home-stores__layout{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:stretch}.home-stores__photo{margin:0;display:flex;flex-direction:column;overflow:hidden;border-radius:8px;background:#102c23}.home-stores__photo picture{display:block;min-height:260px;flex:1;position:relative}.home-stores__photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.home-stores__photo figcaption{display:flex;justify-content:space-between;gap:12px;align-items:center;padding:22px;color:#fff}.home-stores__photo figcaption strong{color:#d6f76a}.home-stores__photo figcaption span{color:#c6d4c1}.home-stores__list{display:grid;margin:0;padding:0;list-style:none}.home-stores__list>li{display:flex;justify-content:space-between;align-items:center;gap:16px;border-top:1px solid #b8c5af;padding:24px 0}.home-stores__list>li:last-child{border-bottom:1px solid #b8c5af}.home-stores__list h3{margin:0 0 7px}.home-stores__list h3 a{text-decoration:none}.home-stores__list h3 a:hover{text-decoration:underline;text-underline-offset:4px}.home-stores__list p{color:#536058;margin:0}.home-stores__list .storecard__status{margin-top:8px}.home-stores__book{display:flex;align-items:center;gap:12px;color:#102c23;text-decoration:none;white-space:nowrap;min-height:44px}.home-stores__book svg{box-sizing:content-box;padding:10px;background:#102c23;color:#d6f76a;border-radius:50%}.home-stores__book:hover{color:#08734c}.rail__action{grid-column:2}.pgroups__toolbar{position:relative;top:auto}.pgroup__head{background:#e8eecf}.footer+.actionbar{border-top:1px solid #d8ddd1}
@media(max-width:899px){.home-stores__layout{gap:28px;grid-template-columns:1fr}.home-stores__photo{max-height:420px}.home-stores__photo picture{min-height:280px}.home-stores__list>li{padding:22px 0}.home-stores__photo figcaption{padding:18px}}
@media(max-width:599px){.home-stores__photo picture{min-height:220px}.home-stores__photo figcaption{display:block}.home-stores__photo figcaption span{display:block;margin-top:5px}.home-stores__list>li{gap:12px}.home-stores__book{gap:7px}.home-stores__book svg{padding:8px;width:12px}.home-stores__list p{max-width:210px}}

/* Utility pages keep the answer and the form close to the opening. */.hero--text-only .hero__copy{max-width:900px}.hero--editorial .hero__copy{max-width:900px}.hero--forest::before,.hero--ink::before,.rail::before{content:none}.pgroups__toolbar{grid-template-columns:minmax(0,1fr) auto;gap:12px 22px}.pgroups__row{grid-column:1/-1}.price-filter-drawer{grid-column:1}.pgroups__toolbar>[data-pgroup-reset]{grid-column:2;justify-self:end;align-self:center;min-height:44px;border:0;background:transparent;padding:8px;color:#315c3b;text-decoration:underline;text-underline-offset:4px}.pgroups__toolbar>.pgroups__count{grid-column:1/-1}.price-filter-drawer>summary{padding-block:16px}.hero--compact+section{padding-top:40px}.home-stores__list .storecard__status{background:none;padding:0;color:#08734c}.rail__step{display:block}.rail__step p{margin-top:12px}.rail__action{margin-top:16px}
@media(max-width:599px){.pgroups__toolbar{grid-template-columns:1fr;gap:8px}.pgroups__toolbar>[data-pgroup-reset]{grid-column:1;justify-self:start;padding-left:0}.price-filter-drawer{grid-column:1}.hero--compact+section{padding-top:30px}.rail__step{display:grid}.rail__step p{margin-top:8px}.rail__action{margin-top:14px}.home-process .opener__text{display:block}}

@media(max-width:599px){.hero__actions{display:flex;flex-direction:column;align-items:stretch}.hero__actions .btn{width:100%;max-width:100%;min-width:0;white-space:normal;text-align:center}.hero__actions .btn>span{min-width:0}.hero__actions .btn svg{flex-shrink:0}}
/* Original branding and real photography, requested 7 September 2026.
   The campaign identity above remains active across both renderers. */
.logo--original,.brand{display:inline-flex;align-items:center;gap:10px;flex:none;text-decoration:none}
.logo__asset{display:block!important;width:158px!important;height:auto!important;max-width:none;background:#fff;padding:8px 10px;box-sizing:content-box;border-radius:3px;object-fit:contain}
.logo__division{color:#d6f76a}
.header__inner{gap:24px}.header .header__actions .btn{white-space:nowrap}
.help-menu{position:relative}.help-menu summary{cursor:pointer;display:flex;align-items:center;gap:8px;min-height:44px;list-style:none}.help-menu summary::marker{content:''}.help-menu summary::after{content:'⌄'}.help-menu>div{position:absolute;top:100%;left:0;min-width:200px;padding:8px;background:#f5f4ed;border:1px solid #b7c4af;border-radius:4px;box-shadow:0 5px 0 #102c2320;z-index:100}.help-menu>div a{display:flex;align-items:center;min-height:44px;padding:10px 12px;color:#102c23;text-decoration:none}.help-menu>div a:hover{background:#e8eecf}.help-menu>div a:focus-visible{outline-color:#08734c}
.repair-searchbox__label{display:block;margin-bottom:10px}.repair-searchbox form{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px}.repair-searchbox .search{min-width:0}.repair-searchbox__go{position:static;transform:none;width:auto;height:auto;min-width:76px;min-height:56px;padding:12px 16px;background:#08734c;border:1px solid #08734c;border-radius:5px;color:#fff}.repair-searchbox__go:hover{transform:none;background:#075638;color:#fff}.repair-searchbox .search input{padding-right:14px}.repair-suggestions{top:100%;margin-top:8px;max-height:360px;overflow-y:auto;background:#fff;border:1px solid #8e9f84;border-radius:5px;color:#102c23}.repair-suggestions [role=option]{min-height:52px;padding:12px 16px}.repair-suggestions [role=option][aria-selected=true]{background:#e8eecf;outline:2px solid #08734c;outline-offset:-3px}
.repair-hub .finder__device-shot img,.repair-hub .finder__device-shot picture{mix-blend-mode:normal;object-fit:cover}.repair-hub .pill{min-height:44px}.repair-hub .finder__device-go svg{box-sizing:content-box}
.storecard__photo{display:block;overflow:hidden;aspect-ratio:2/1;border-radius:3px}.storecard__photo picture,.storecard__photo img{display:block;width:100%;height:100%;object-fit:cover}.storecard__photo:focus-visible{outline-offset:3px}.storecard__links a{min-height:44px}.rating .small{margin-top:8px}.review__source{display:inline-flex;min-height:44px;align-items:center;color:#315939}.reviews__sub{max-width:720px}
.footer__grid{display:grid;grid-template-columns:1.25fr 1fr 1fr 1fr;gap:32px}.footer__grid>div:first-child{min-width:0}.footer__grid a{min-height:44px;display:flex;align-items:center}.footer__grid .logo{justify-content:flex-start;gap:10px}.footer__blurb{color:#c9d5c3;margin:20px 0}.footer__email{overflow-wrap:anywhere}.footer__bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 24px;padding-block:24px}.footer__bar a{min-height:44px;display:inline-flex;align-items:center}.footer__bar .photo-credit{color:#c9d5c3}.footer__legal{display:flex;flex-wrap:wrap;gap:8px 24px}.footer__statement p{overflow-wrap:normal}.footer__statement>div{min-width:230px}
@media(max-width:1199px){.header .header__phone{display:none}.header__inner{gap:18px}}
@media(max-width:899px){.footer__grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:32px}}
@media(max-width:599px){.header__inner{gap:10px}.header .logo{gap:6px}.header .logo__asset{width:114px!important;padding:6px 7px}.header .header__actions{gap:8px}.header .header__actions .btn{padding:10px 12px}.repair-searchbox form{gap:7px}.repair-searchbox__go{min-width:68px;padding-inline:12px}.repair-searchbox .search input{padding-left:14px;min-width:0}.repair-searchbox .search>svg{display:none}.repair-hub .finder__device-body{padding:14px}.footer__statement>div{min-width:0}.footer__grid .logo__asset{width:142px!important}.footer__grid{gap:28px 18px}.footer__grid>div:first-child{grid-column:1/-1}.footer__legal{gap:8px 18px}.actionbar__btn{min-height:60px;white-space:normal;text-align:center;padding:10px}.booking-shell .device-choice__photo img{object-fit:cover}}
/* Keep floating conversion controls clear of the on-screen keyboard. */
@media(max-width:899px){body:has(input:focus,textarea:focus,select:focus)>.actionbar{display:none}body:has(>.actionbar){padding-bottom:calc(68px + env(safe-area-inset-bottom,0px))}}
/* September polish: keep the selected identity, repair the interaction details. */
.logo.logo--original,.brand{gap:9px;align-items:center}.logo__art{display:block;position:relative;width:160px;flex:none}.logo__art .logo__asset,.header .logo__art .logo__asset,.footer .logo__art .logo__asset{display:block!important;width:100%!important;height:auto!important;padding:0!important;background:transparent!important;border-radius:0;box-sizing:border-box}
/* The official PNG is transparent. Its original green mark is unchanged;
   the alpha of its existing lettering supplies a white treatment on dark surfaces. */
.header .logo__art::after,.footer .logo__art::after{content:'';position:absolute;inset:0;background:#fff;mask:url('/assets/brand/gadcet-wordmark.png') center/100% 100% no-repeat;-webkit-mask:url('/assets/brand/gadcet-wordmark.png') center/100% 100% no-repeat;clip-path:inset(0 0 0 23.75%);pointer-events:none}
.logo .logo__division,.brand .logo__division{display:flex;align-items:center;justify-content:center;padding:5px 7px;border-radius:2px;background:#d6f76a;color:#102c23;text-transform:uppercase}
.footer .small{color:#c9d5c3}.storecard__index{color:#536058}.pfilter-selection{grid-column:1/-1;color:#315939;margin:0;padding:8px 12px;background:#edf3e8;border-left:3px solid #08734c}.pfilter-selection[hidden]{display:none}.pgroup .prow[hidden],.pgroup details[hidden]{display:none}.prow__book{min-height:44px;display:inline-flex;align-items:center}.storecard__links a:last-child{white-space:normal}.storecard__rating{flex-wrap:wrap}
.repair-suggestions [data-search-options][hidden],.repair-suggestions [data-search-message][hidden]{display:none}.repair-suggestions__message>p{padding:18px;margin:0}.repair-suggestions__empty{color:#102c23}.repair-suggestions__empty>div{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.repair-suggestions__empty button{min-height:44px;padding:10px 14px;border:1px solid #08734c;border-radius:4px;background:#edf3e8;color:#075638}.repair-suggestions [role=option]{text-decoration:none}.repair-suggestions__group>p{color:#536058}
.booking-availability-loading{display:flex;align-items:center;gap:10px;padding:22px 0;color:#536058}.booking-loader-dot{width:12px;height:12px;flex:none;border:2px solid #8eaa98;border-top-color:#08734c;border-radius:50%;animation:booking-spinner .8s linear infinite}.booking-shell .store-result__actions .booking-text-button{min-height:44px}.booking-shell .booking-form-submit{display:none}.booking-shell .booking-details-form a{color:#075638;text-decoration:underline;text-underline-offset:3px}.booking-shell .booking-details-form input[aria-invalid=true],.booking-shell .booking-details-form textarea[aria-invalid=true]{border-color:#a34032}.booking-shell .mobile-repair-summary{display:none}.booking-shell .mobile-summary-content{display:none}
@keyframes booking-spinner{to{transform:rotate(360deg)}}
@media(max-width:760px){
 .header .logo__art{width:130px}.header .logo .logo__division{padding:5px 6px}.header .logo{gap:7px}.footer .logo__art{width:156px}.branch-actions{gap:10px}
}
@media(max-width:1000px){
 .booking-shell .mobile-repair-summary{position:fixed;inset:auto 0 0;z-index:50;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:12px;padding:12px 16px calc(12px + env(safe-area-inset-bottom,0px));border:0;border-top:1px solid #c9d3c1;border-radius:0;background:#fff;box-shadow:0 -4px 18px #102c230a;align-items:center}
 .booking-shell .mobile-repair-summary>.booking-primary{min-height:52px;width:100%;height:auto;padding:10px 12px;white-space:normal;justify-content:center;gap:8px;border-radius:5px;background:#08734c;color:#fff}
 .booking-shell .mobile-repair-summary>.booking-primary:disabled{background:#dce3dd;color:#536058;opacity:1;cursor:default}.booking-shell .mobile-repair-summary>.booking-primary svg{flex:none;width:16px}
 .booking-shell .mobile-summary-details{border:0;padding:0;min-width:0;background:none}.booking-shell .mobile-summary-details>summary{display:flex;min-height:50px;align-items:center;justify-content:space-between;gap:8px;list-style:none;cursor:pointer;padding:0}.booking-shell .mobile-summary-details>summary::-webkit-details-marker{display:none}.booking-shell .mobile-summary-details>summary>span{display:flex;flex-direction:column;min-width:0;gap:5px}.booking-shell .mobile-summary-details>summary b{max-width:100%;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.booking-shell .mobile-summary-details>summary small{color:#075638;white-space:normal}.booking-shell .mobile-summary-details>summary svg{flex:none;color:#075638}.booking-shell .mobile-summary-details[open]>summary svg{transform:rotate(180deg)}
 .booking-shell .mobile-summary-details[open] .mobile-summary-content{display:block;position:absolute;left:0;right:0;bottom:100%;max-height:55dvh;overflow-y:auto;padding:24px 20px;background:#fff;border-top:3px solid #102c23;border-bottom:1px solid #d8ddd1;box-shadow:0 -12px 28px #102c231c}.booking-shell .mobile-summary-content h2{margin:0 0 16px}.booking-shell .mobile-summary-content dl{margin:0 0 12px}.booking-shell .mobile-summary-content dl>div{display:grid;grid-template-columns:80px minmax(0,1fr);gap:12px;padding:10px 0;border-top:1px solid #e7e9e0}.booking-shell .mobile-summary-content dt{color:#536058}.booking-shell .mobile-summary-content dd{margin:0;overflow-wrap:anywhere}.booking-shell .mobile-summary-content button{display:flex;align-items:center;min-height:44px;color:#075638;background:none;border:0;padding:8px 0;text-decoration:underline;text-underline-offset:3px}
 .booking-shell .booking-form-submit{display:flex;min-height:50px;margin-top:8px;justify-content:center}.booking-shell .booking-details-form:focus-within{scroll-margin-bottom:60px}body:has(.booking-details-form input:focus,.booking-details-form textarea:focus) .mobile-repair-summary{display:none}
 .booking-shell .booking-layout.has-summary{padding-bottom:130px}.booking-shell .date-strip{margin-right:0;padding-right:0;gap:8px}.booking-shell .date-strip button{flex-basis:68px}.booking-shell .time-groups button{min-height:46px}
}
@media(prefers-reduced-motion:reduce){.booking-loader-dot{animation:none}.booking-shell *{scroll-behavior:auto!important}}

.booking-recovery-actions{display:flex;align-items:center;justify-content:center;gap:16px;flex-wrap:wrap;margin-top:24px}.booking-page-loader h1.sr-only{position:absolute!important}form[data-enquiry] [data-form-status]{scroll-margin-block:110px 100px}form[data-enquiry] [data-form-status]:not(:empty){padding:16px;border:1px solid #aabca8;background:#edf3e8;color:#102c23;border-radius:5px}@media(max-width:760px){body:has(form[data-enquiry] input:focus,form[data-enquiry] textarea:focus) .actionbar{display:none}form[data-enquiry] :is(input,textarea,select,button){scroll-margin-block:100px 100px}}

/* ==================================================================
   The homepage opening
   ------------------------------------------------------------------
   One centred column on forest green: eyebrow, two-line headline,
   one sentence, search, four device cards, seven faults, lime strip.

   It replaces a split hero whose right half was a 640px-tall bench
   photograph. That photograph pushed the search below the fold on a
   1080p laptop and competed with the headline for the same glance.
   It is deleted rather than shrunk.

   ALIGNMENT is the point of this block. Every child sits inside the
   same `.container` the masthead uses, so the page has one vertical
   spine: logo, eyebrow, headline, search, cards and the lime strip
   all begin and end on the same two lines. Nothing here sets its own
   max-width except the search, which is deliberately narrower than
   the cards so the eye steps inward before it steps back out.

   SPACING is the 8px scale throughout — 8, 16, 24, 32, 40, 56, 64.
   No value in this block is off the scale.
   ================================================================== */

.opening {
  background: #102c23;
  color: #fff;
  /* Sits directly under a header that is already this green, so the
     two read as one field with no seam. The top value is smaller
     than the bottom because the eyebrow carries its own optical
     space above the cap line of the headline. */
  padding-block: 28px 24px;
}

.opening__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* ---- The headline ------------------------------------------------
   Two lines, two voices. "Good tech." is the neutral grotesque the
   rest of the site is set in; "Worth fixing." is the one serif in
   the system. The contrast is the whole idea: the first line states
   the situation, the second answers it, and setting both in the same
   face made the second read as a continuation instead of a reply.

   Both lines are `display:block`, which is what forces the break
   between the two sentences — not a max-width. The size/weight/colour
   for this heading are set once, further down where the rest of the
   hero section lives, so they aren't declared twice. */

.opening__line,
.opening__accent { display: block; }

/* Scoped through the title deliberately. The sheet already sets every
   `em` inside an h1 or h2 in Georgia, at (0,1,1); a bare
   `.opening__accent` is (0,1,0) and loses to it. Naming the parent
   wins on specificity without an `!important`, and keeps the override
   pinned to this one heading rather than restyling every emphasised
   word in every heading on the site. */
.opening__title .opening__accent {
  /* Playfair's cap height sits lower than Inter's at the same size,
     so the second line is set fractionally larger to make the two
     read as one block rather than as a heading and a subheading. */
  color: #d6f76a;
}

/* ---- Search ------------------------------------------------------
   The one element narrower than the container. 780px is wide enough
   for a full model name and narrow enough that the button stays
   within a comfortable saccade of the field. */
.opening__search {
  width: 100%;
  max-width: 780px;
  margin-top: 24px;
}

/* The label is real, and read out, but the placeholder says the same
   thing to a sighted user and two copies of it stacked looked like a
   form rather than a search. */
.opening__search .repair-searchbox__label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.opening__search form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
}

.opening__search .search { min-width: 0; }

.opening__search .search input {
  min-height: 62px;
  background: #fff;
  border: 0;
  border-radius: 6px;
  padding-left: 52px;
  color: #102c23;
  text-align: left;
}

.opening__search .search input::placeholder { color: #6a746b; }

.opening__search .search > svg {
  display: block;
  left: 20px;
  color: #5b655d;
}

.opening__search .repair-searchbox__go {
  position: static;
  transform: none;
  min-width: 128px;
  min-height: 62px;
  padding-inline: 24px;
  background: #d6f76a;
  border: 0;
  border-radius: 6px;
  color: #102c23;
}

.opening__search .repair-searchbox__go:hover {
  background: #e4ff9b;
  color: #102c23;
  transform: none;
}

/* ---- Device cards ------------------------------------------------
   Four, equal, one row. The card is a light plate on the green so
   the product sits on its own ground rather than floating on the
   brand colour, and the radius is kept at 6px to match the search
   field and the button — the whole opening uses one corner. */
.opening__devices {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  width: 100%;
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
}

.opening__devices > li { display: flex; }

/* The card ground is sampled from the artwork's own background — a
   warm grey, not the cool off-white the rest of the site uses. The
   product renders carry their backdrop baked in, so any other value
   draws a visible rectangle inside the card. Matching it, and running
   the picture to three edges, makes the plate read as one surface. */
.opening__card {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 10px;
  padding: 0 0 14px;
  overflow: hidden;
  background: #f4f0ed;
  border: 1px solid transparent;
  border-radius: 6px;
  color: #102c23;
  text-decoration: none;
  transition: border-color 160ms var(--ease, ease);
}

.opening__card:hover { border-color: #d6f76a; }

.opening__card-shot {
  display: block;
  /* A ratio rather than a height, so all four plates stay identical
     while the row narrows. */
  aspect-ratio: 4 / 3;
  /* The card is a column flex container, so this box is a flex item
     and its `min-height: auto` resolves to the picture's own content
     height — 4:3, the artwork's intrinsic ratio. That silently beat
     the aspect-ratio above and every card rendered at 4:3 instead.
     Clearing the automatic minimum lets the ratio decide, and
     `flex: none` keeps the row from stretching it back. */
  flex: none;
  min-height: 0;
  overflow: hidden;
}

.opening__card-shot .picture,
.opening__card-shot img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: none !important;
}

.opening__card-name {
  padding-inline: 12px;
  color: #102c23;
  text-align: center;
}

/* ---- Fault shortcuts ---------------------------------------------
   One line of plain links divided by hairlines. The rule is drawn
   with a border on the item rather than a separator character, so it
   disappears correctly wherever the row wraps. */
.opening__faults {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 0;
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
}

.opening__faults > li { display: flex; }

.opening__faults > li + li {
  border-left: 1px solid rgba(255, 255, 255, .22);
}

.opening__faults a {
  padding: 4px 20px;
  color: #d4ddcf;
  text-decoration: none;
}

.opening__faults a:hover {
  color: #d6f76a;
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* ---- The lime strip ----------------------------------------------
   Colour runs to the browser edge; the three points run to the same
   container edge as everything above them. */
.assurances {
  background: #d6f76a;
  color: #102c23;
}

.assurances__inner {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: center;
  gap: 24px;
  padding-block: 20px;
}

.assurances__item {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: inherit;
  text-decoration: none;
}
.assurances__item svg { flex: none; }
.assurances a.assurances__item:hover { text-decoration: underline; text-underline-offset: 4px; }

/* ---- Narrower --------------------------------------------------- */
@media (max-width: 1023px) {
  .opening { padding-block: 40px 32px; }
  .opening__devices { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .assurances__inner { gap: 16px; }
  .assurances__item { justify-content: flex-start; }
}

/* Two columns over this range means each card is close to 400px wide,
   and at the artwork's own 4:3 that is a 280px-tall plate — two rows
   of which push the second pair off a tablet screen entirely. This is
   the one place the picture is cropped rather than shown whole, and
   16:10 is the shallowest crop that buys the row back. Narrower than
   768 the cards are small enough that 4:3 fits again. */
@media (min-width: 768px) and (max-width: 1023px) {
  .opening__card-shot { aspect-ratio: 16 / 10; }
}

@media (max-width: 767px) {
  .opening { padding-block: 32px 24px; }
  .opening__eyebrow { margin-bottom: 16px; }
  .opening__lede { margin-top: 16px; }
  .opening__search { margin-top: 24px; }
  .opening__devices { margin-top: 24px; gap: 8px; }
  .opening__faults { margin-top: 24px; }
  .opening__faults a { padding-inline: 12px; }
  .assurances__inner { grid-template-columns: 1fr; gap: 12px; padding-block: 20px; }
}

@media (max-width: 479px) {
  /* The button leaves the row before the field gets too short to
     show a model name. Below this width they stack. */
  .opening__search form { grid-template-columns: 1fr; }
  .opening__search .search input,
  .opening__search .repair-searchbox__go { min-height: 56px; }
  .opening__devices { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 359px) {
  .opening__devices { grid-template-columns: 1fr; }
}
/* The homepage shows the same storeCard() as /stores/, four across and
   a size down, so the section reads as a row of branches rather than
   four full store pages stacked. Nothing here touches /stores/. */
.home-stores .grid--stores{gap:18px}
@media(min-width:900px){.home-stores .grid--stores{grid-template-columns:repeat(4,minmax(0,1fr))}}
.home-stores .storecard{padding:16px;gap:8px;border-radius:14px}
.home-stores .storecard__photo{border-radius:8px;aspect-ratio:4/3}
.home-stores .storecard__rating{gap:3px 6px}
.home-stores .storecard__links a,.home-stores .storecard__cta{min-height:38px}
@media(max-width:899px){.home-stores .grid--stores{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:599px){.home-stores .grid--stores{grid-template-columns:minmax(0,1fr)}}
/* Why choose us — four reasons on the canvas, in the same register as
   the process rail: a small lime-plated icon, a title, a line or two. */

/* ==================================================================
   Wepairs on the green identity — chips, stores, reviews, footer
   ------------------------------------------------------------------
   The previous forest-and-lime palette, with the reworked sections
   expressed in it. Loads last.
   ================================================================== */
:root { --forest: #102c23; --leaf: #08734c; --leaf-dark: #075638; --lime: #d6f76a; --sage-plate: #e8eecf; --hair: #d8ddd1; --muted: #536058; }

/* The two-tone wordmark on the forest masthead and footer. */
.header .logo__mark { display: inline-block; background-color: var(--lime); }
.logo__text { gap: 0; }
.header .logo__name { color: #fff; } .header .logo__sub { color: var(--lime); }
.footer .logo__mark { display: inline-block; background-color: var(--lime); }
.footer .logo__name { color: #fff; } .footer .logo__sub { color: var(--lime); }
.footer .logo__text { gap: 0; }

/* Fault chips on the forest: a label and translucent pills, lime icons. */
.opening__faults-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 14px; width: 100%; margin-top: 20px; }
.opening__faults-label { margin: 0; color: #d4d8e0; }
.opening__faults { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 0; padding: 0; list-style: none; }
.opening__faults > li { display: flex; }
.opening__faults > li + li { border-left: 0; }
.opening__faults a { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 16px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .18); border-radius: 999px; color: #fff; text-decoration: none; transition: background-color 220ms ease, border-color 220ms ease, transform 280ms cubic-bezier(.22, 1, .36, 1); }
.opening__faults a svg { color: var(--lime); flex: none; }
.opening__faults a:hover { background: rgba(255, 255, 255, .12); border-color: var(--lime); color: #fff; text-decoration: none; transform: translateY(-1px); }
@media (max-width: 767px) {
  .opening__faults-row { flex-wrap: nowrap; justify-content: flex-start; width: calc(100% + 2 * var(--gutter)); margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); }
  .opening__faults-label { flex: none; max-width: 9ch; text-align: left; }
  .opening__faults { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; scrollbar-width: none; padding-bottom: 4px; }
  .opening__faults::-webkit-scrollbar { display: none; }
  .opening__faults a { white-space: nowrap; }
}

/* Stores: photograph-first cards. */
.storecard, .home-stores .storecard { display: flex; flex-direction: column; gap: 12px; padding: 16px; background: #fff; border: 1px solid var(--hair); border-top: 1px solid var(--hair); border-radius: 16px; box-shadow: none; transition: transform 300ms cubic-bezier(.22, 1, .36, 1), border-color 220ms ease, box-shadow 280ms ease; }
.storecard:hover { transform: translateY(-3px); border-color: #b3c3a8; box-shadow: 0 12px 32px rgba(16, 44, 35, .08); }
.storecard__photo { aspect-ratio: 16 / 9; border-radius: 10px; margin: 0 0 4px; overflow: hidden; }
.storecard__photo img { transition: transform 320ms cubic-bezier(.22, 1, .36, 1); }
.storecard:hover .storecard__photo img { transform: scale(1.03); }
.storecard__head { display: none; }
.storecard__name, .home-stores .storecard__name { margin: 2px 0 0; }
.storecard__name a { color: var(--forest); text-decoration: none; }
.storecard__rating, .home-stores .storecard__rating { margin: 0; gap: 4px 8px; }
.storecard__rating-count { color: var(--muted); }
.storecard__addr { display: flex; align-items: center; gap: 8px; margin: 0; color: var(--muted); }
.storecard__addr svg { color: var(--leaf); flex: none; }
.storecard__addr span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.storecard__status, .home-stores .storecard__status { display: flex; align-items: center; gap: 12px; margin: 0; padding: 0; background: none; color: var(--muted); }
.storecard__badge { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; background: #e7f7ee; color: #1a7a45; }
.storecard__badge .dot { width: 8px; height: 8px; border-radius: 50%; background: #22a35b; }
.storecard__badge .dot--closed { background: #899a8d; }
.storecard__status:has(.dot--closed) .storecard__badge { background: #eef0e8; color: var(--muted); }
.storecard__until { white-space: nowrap; }
.storecard__services, .home-stores .storecard__services { display: none; }
.storecard__actions { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; padding-top: 16px; border-top: 1px solid var(--hair); }
.storecard__cta, .home-stores .storecard__cta { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 10px 16px; background: var(--leaf); border-radius: 10px; color: #fff; text-decoration: none; transition: background-color 220ms ease, transform 280ms cubic-bezier(.22, 1, .36, 1); }
.storecard__cta:hover { background: var(--leaf-dark); color: #fff; transform: translateY(-1px); }
.storecard__cta svg { transition: transform 200ms ease; } .storecard__cta:hover svg { transform: translateX(3px); }
.storecard__directions { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 42px; color: var(--leaf); text-decoration: none; }
.storecard__directions svg { transition: transform 200ms ease; } .storecard__directions:hover svg { transform: translate(2px, -2px); }
.storecard__links, .home-stores .storecard__links { display: flex; justify-content: space-between; align-items: center; gap: 8px 16px; flex-wrap: wrap; }
.storecard__links a, .storecard__links a:last-child, .home-stores .storecard__links a { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0; background: none; border: 0; border-radius: 0; color: var(--muted); text-decoration: none; }
.storecard__links a:hover { color: var(--leaf); }
.storecard__links a svg { color: var(--leaf); }
.home-stores .grid--stores { gap: 20px; }
.home-stores .storecard__index { display: none; }
@media (max-width: 899px) { .home-stores .grid--stores { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 599px) { .home-stores .grid--stores { grid-template-columns: minmax(0, 1fr); } }

/* Reviews: rating panel beside three cards, on the sage ground. */
#reviews.section { position: relative; overflow: hidden; }
#reviews.section::before, #reviews.section::after { content: ''; position: absolute; z-index: 0; border-radius: 50%; pointer-events: none; background: radial-gradient(closest-side, rgba(8, 115, 76, .10), rgba(8, 115, 76, 0)); }
#reviews.section::before { width: 40vw; height: 40vw; max-width: 640px; max-height: 640px; top: -14vw; right: -10vw; }
#reviews.section::after { width: 34vw; height: 34vw; max-width: 520px; max-height: 520px; bottom: -14vw; left: -10vw; }
#reviews .container { position: relative; z-index: 1; }
#reviews .opener .eyebrow { display: inline-flex; align-items: center; gap: 12px; }
#reviews .opener .eyebrow::after { content: ''; width: 44px; height: 1px; background: var(--leaf); }
.reviews { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 3fr); gap: 24px; align-items: stretch; }
.reviews__head { display: block; }
.rating { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; height: 100%; padding: 32px 28px; background: #fff; border: 1px solid var(--hair); border-radius: 16px; }
.rating__g { display: grid; place-items: center; width: 60px; height: 60px; border-radius: 50%; background: #f4f6ef; margin-bottom: 10px; }
.rating__label { margin: 0; text-transform: uppercase; color: var(--muted); }
.rating__score { margin: 0; color: var(--forest); }
.rating__score span { color: var(--muted); margin-left: 4px; }
.rating__source { margin: 0; color: var(--forest); }
.rating .small { margin: 0; color: var(--muted); }
.rating .rating__btn { margin-top: 18px; background: var(--leaf); border-color: var(--leaf); color: #fff; border-radius: 10px; }
.rating .rating__btn:hover { background: var(--leaf-dark); border-color: var(--leaf-dark); color: #fff; }
.reviews__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin: 0; padding: 0; list-style: none; align-items: stretch; }
.reviews__list > li { display: flex; }
.review { display: flex; flex-direction: column; gap: 14px; width: 100%; padding: 28px 26px 24px; background: #fff; border: 1px solid var(--hair); border-left: 1px solid var(--hair); border-radius: 16px; box-shadow: none; transition: transform 300ms cubic-bezier(.22, 1, .36, 1), border-color 220ms ease, box-shadow 280ms ease; }
.review:hover { transform: translateY(-3px); border-color: #b3c3a8; box-shadow: 0 12px 30px rgba(16, 44, 35, .07); }
.review .stars { margin: 0; color: #f0a62b; }
.review__text { margin: 0; color: var(--forest); }
.review__text::before { content: '“'; } .review__text::after { content: '”'; }
.review__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: auto; padding-top: 16px; border-top: 1px solid var(--hair); }
.review__foot > span:nth-child(2) { flex: 1 1 auto; min-width: 0; }
.review__avatar { display: grid; place-items: center; flex: none; width: 42px; height: 42px; border-radius: 50%; background: var(--sage-plate); color: var(--forest); }
.review__who { display: block; }
.review__when { display: block; color: var(--muted); white-space: nowrap; }
.review__source { display: inline-flex; align-items: center; gap: 6px; flex: none; margin-left: auto; color: var(--muted); text-decoration: none; white-space: nowrap; }
.review__source:hover { color: var(--leaf); }
.reviews__trust { display: flex; align-items: center; gap: 16px; margin: 36px 0 0; text-transform: uppercase; color: var(--leaf); }
.reviews__trust::before, .reviews__trust::after { content: ''; flex: 1; height: 1px; background: #c9d5c3; }
.reviews__trust span { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
@media (max-width: 1023px) { .reviews { grid-template-columns: 1fr; } .reviews__list { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 6px; } .reviews__list::-webkit-scrollbar { display: none; } .reviews__list > li { flex: 0 0 min(86vw, 360px); scroll-snap-align: start; } }

/* Footer: the forest with a faint lime light. */
.footer { position: relative; overflow: hidden; }
.footer__glow { position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(60vw 60vw at 100% 0%, rgba(214, 247, 106, .10), rgba(214, 247, 106, 0) 60%), radial-gradient(50vw 50vw at 0% 100%, rgba(214, 247, 106, .07), rgba(214, 247, 106, 0) 60%); }
.footer__glow::before, .footer__glow::after { content: ''; position: absolute; border-radius: 50%; border: 1px solid rgba(214, 247, 106, .14); }
.footer__glow::before { width: 70vw; height: 70vw; top: -35vw; right: -20vw; } .footer__glow::after { width: 44vw; height: 44vw; bottom: -22vw; left: -14vw; border-color: rgba(214, 247, 106, .10); }
.footer > .container { position: relative; z-index: 1; }

@media (prefers-reduced-motion: reduce) { .storecard, .review, .storecard__cta, .opening__faults a { transition: none !important; transform: none !important; } }
.header .logo__text, .footer .logo__text { gap: 0 !important; }

/* ==================================================================
   Footer — the editorial closing band
   ------------------------------------------------------------------
   Three bands, two hairlines, one container. The statement is set in
   two voices (Geist, then the one italic serif in the system) and the
   calls to action sit beside it rather than under it. Behind all of
   it, three enormous 1px arcs in the lime, almost invisible.
   ================================================================== */
.footer {
  position: relative;
  overflow: hidden;
  background: #102c23;
  color: #fff;
  padding: 0;
  margin: 0;
}
.footer__glow { display: none; }

.footer__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
  padding-block: 96px 40px;
}

/* ---- The arcs -------------------------------------------------------
   Outlines only: a 1px ring, no fill, each one mostly outside the
   footer so only a long shallow curve is ever on screen. */
.footer__arcs { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.footer__arcs span { position: absolute; border-radius: 50%; border: 1px solid rgba(214, 247, 106, .12); }
.footer__arcs span:nth-child(1) { width: 1180px; height: 1180px; top: -520px; right: -260px; }
.footer__arcs span:nth-child(2) { width: 900px; height: 900px; bottom: -560px; left: -300px; border-color: rgba(214, 247, 106, .09); }
.footer__arcs span:nth-child(3) { width: 1500px; height: 1500px; top: -180px; right: -900px; border-color: rgba(214, 247, 106, .07); }

/* ---- Top: statement and calls to action -------------------------------- */
.footer__top {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: 48px;
  align-items: center;
  padding-bottom: 56px;
  border-bottom: 1px solid rgba(255, 255, 255, .10);
}
.footer__statement-line {
  margin: 0;
  color: #fff;
}
.footer__statement-line em {
  color: #d6f76a;
}
.footer__cta { justify-self: end; width: 210px; max-width: 100%; }
.footer__cta-lead { margin: 0 0 20px; color: rgba(255, 255, 255, .72); }
.footer__cta .btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  min-height: 44px;
  padding-inline: 18px;
  border-radius: 5px;
  box-shadow: none;
  transition: background-color 200ms var(--ease, ease), border-color 200ms var(--ease, ease), color 200ms var(--ease, ease);
}
.footer__cta .btn + .btn { margin-top: 10px; }
.footer__cta .btn--primary { background: #d6f76a; border-color: #d6f76a; color: #102c23; }
.footer__cta .btn--primary:hover { background: #e4ff9b; border-color: #e4ff9b; color: #102c23; }
.footer__cta .btn--secondary { background: transparent; border: 1px solid rgba(255, 255, 255, .30); color: #fff; }
.footer__cta .btn--secondary:hover { background: rgba(214, 247, 106, .10); border-color: #d6f76a; color: #fff; }
.footer__cta .btn__arrow { transition: transform 200ms var(--ease, ease); }
.footer__cta .btn:hover .btn__arrow { transform: translateX(3px); }

/* ---- Navigation ----------------------------------------------------------- */
.footer__cols {
  display: grid;
  grid-template-columns: 29% 24% 24% 23%;
  align-items: start;
  padding: 52px 0 44px;
  border-bottom: 1px solid rgba(255, 255, 255, .10);
}
.footer__col { min-width: 0; }
.footer__brand { margin: 0 0 14px; color: #fff; }
.footer__blurb { margin: 0 0 22px; color: rgba(255, 255, 255, .70); }
.footer__contacts { display: grid; gap: 14px; }
.footer__contacts a {
  display: inline-flex; align-items: center; gap: 5px; width: fit-content; color: #fff; text-decoration: underline; text-underline-offset: 4px;
  text-decoration-color: rgba(255, 255, 255, .35); transition: color 180ms var(--ease, ease);
}
.footer__contacts a span { color: rgba(255, 255, 255, .62); }
.footer__contacts a:hover { color: #d6f76a; text-decoration-color: #d6f76a; }
.footer__email { overflow-wrap: anywhere; }

.footer__heading {
  margin: 0 0 20px;
  text-transform: uppercase;
  color: #d6f76a;
}
.footer__links { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.footer__links a {
  display: block;
  padding-block: 6px;
  color: rgba(255, 255, 255, .82);
  text-decoration: none;
  transition: color 180ms var(--ease, ease), transform 180ms var(--ease, ease);
}
.footer__links a:hover { color: #d6f76a; transform: translateX(2px); }

/* ---- Legal row -------------------------------------------------------------- */
.footer__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px 32px;
  padding-top: 26px;
  border-top: 0;
  margin-top: 0;
}
.footer__copy { margin: 0; color: rgba(255, 255, 255, .62); }
.footer__legal { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 0; padding: 0; list-style: none; }
.footer__legal a, .footer__shop {
  display: inline-flex; align-items: center; min-height: 32px; color: rgba(255, 255, 255, .70); text-decoration: none;
  transition: color 180ms var(--ease, ease);
}
.footer__legal a:hover, .footer__shop:hover { color: #d6f76a; }
.footer__pay { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; margin: 0; padding: 0; list-style: none; }
.footer__pay li {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 42px; height: 26px; padding: 0 8px;
  border-radius: 4px; background: #fff; color: #102c23; text-transform: uppercase;
}

/* ---- Tablet ------------------------------------------------------------------- */
@media (max-width: 1099px) {
  .footer__inner { padding-block: 72px 36px; }
  .footer__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 32px; padding: 44px 0 40px; }
}

/* ---- Mobile -------------------------------------------------------------------- */
@media (max-width: 767px) {
  .footer__inner { padding-block: 56px 32px; }
  .footer__arcs span:nth-child(1) { width: 760px; height: 760px; top: -420px; right: -300px; }
  .footer__arcs span:nth-child(2) { width: 620px; height: 620px; bottom: -440px; left: -260px; }
  .footer__arcs span:nth-child(3) { display: none; }
  .footer__top { grid-template-columns: 1fr; gap: 28px; align-items: start; padding-bottom: 36px; }
  .footer__cta { width: 100%; justify-self: stretch; }
  .footer__cols { grid-template-columns: 1fr; gap: 32px; padding: 36px 0 32px; }
  .footer__bar { justify-content: flex-start; gap: 18px 24px; }
  .footer__copy, .footer__legal { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .footer__links a:hover, .footer__cta .btn:hover .btn__arrow { transform: none; }
}

/* ==================================================================
   Masthead and hero — the reference composition in the green system
   ------------------------------------------------------------------
   One grid: the masthead's content and every band below it line up on
   the same two edges. The hero is a single forest field with four
   enormous soft circles behind it, a centred column of eyebrow,
   two-voice headline, lede, search, four device cards and the fault
   chips, closed by the lime reassurance strip.
   ================================================================== */

/* ---- Masthead ---------------------------------------------------- */
:root { --header-h: 72px; }
@media (min-width: 1024px) { :root { --header-h: 72px; } }
.header { height: 72px; border-bottom: 1px solid rgba(255, 255, 255, .12); }
.header__inner { min-height: 72px; gap: 32px; }
.header .logo { margin-right: auto; }
.header .logo__mark { width: 26px; height: 26px; }

.nav { display: none; }
@media (min-width: 1000px) {
  .nav { display: flex; flex: 1; justify-content: center; }
  .nav__list { display: flex; align-items: center; gap: clamp(18px, 2.2vw, 36px); }
  .menu-btn { display: none; }
  .header__phone { display: inline-flex; }
}
@media (max-width: 999px) { .nav { display: none; } .menu-btn { display: inline-flex; } .header__phone { display: none; } }
.header .nav__link { padding: 8px 0; }
.header .nav__link::after { bottom: -2px; }

/* Help: a real chevron rather than a text character. */
.help-menu > summary::after {
  content: ''; width: 7px; height: 7px; margin-left: 7px;
  border-right: 1.75px solid currentColor; border-bottom: 1.75px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform 200ms var(--ease, ease);
}
.help-menu[open] > summary::after { transform: translateY(1px) rotate(225deg); }

.header__actions { gap: 22px; }
.header .header__phone { align-items: center; gap: 8px; color: #fff; }
.header .header__phone svg { color: #d6f76a; flex: none; }
.header .header__actions .btn {
  min-width: 132px; min-height: 44px; padding-inline: 18px; border-radius: 6px;
  background: #d6f76a; border-color: #d6f76a; color: #102c23;
}
.header .header__actions .btn:hover { background: #e4ff9b; border-color: #e4ff9b; color: #102c23; }
@media (max-width: 767px) { .header .header__actions .btn { min-width: 0; padding-inline: 14px; } }
@media (max-width: 420px) { .header .header__actions .btn { display: none; } }

/* ---- Hero -------------------------------------------------------- */
.opening { position: relative; overflow: hidden; background: #0b352b; padding-block: 32px 0; }
.opening__arcs { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.opening__arcs span { position: absolute; border-radius: 50%; background: rgba(255, 255, 255, .045); }
.opening__arcs span:nth-child(1) { width: 760px; height: 760px; top: -300px; left: -320px; }
.opening__arcs span:nth-child(2) { width: 620px; height: 620px; bottom: -300px; left: -200px; background: rgba(255, 255, 255, .035); }
.opening__arcs span:nth-child(3) { width: 860px; height: 860px; top: -340px; right: -360px; }
.opening__arcs span:nth-child(4) { width: 560px; height: 560px; bottom: -260px; right: -180px; background: rgba(255, 255, 255, .03); }
.opening__inner { position: relative; z-index: 1; max-width: 1240px; padding-bottom: 0; }

.opening__eyebrow { margin: 0 0 18px; text-transform: uppercase; color: #d6f76a; }
.opening__title { max-width: none; margin: 0; color: #f8faf7; }
/* The face and the italic are already set on this selector further up;
   only the proportions and the colour change here. */
.opening__title .opening__accent {
  display: block; margin-top: 2px; color: #d6f76a;
}
.opening__lede { margin: 16px 0 0; max-width: 600px; color: rgba(255, 255, 255, .80); }

/* Search: white field, lime button, one height. */
.opening__search { width: 100%; max-width: 706px; margin-top: 26px; }
.opening__search form { display: grid; grid-template-columns: minmax(0, 1fr) 122px; gap: 8px; }
.opening__search--autocomplete form { grid-template-columns: minmax(0, 1fr); }
.opening__search--autocomplete .search input { border-color: #087f55; box-shadow: 0 0 0 3px rgba(8, 127, 85, .10); }
.opening__search .search input {
  min-height: 57px; padding-left: 50px; padding-right: 18px;
  background: #f6f7f2; border: 1px solid rgba(255, 255, 255, .10); border-radius: 6px;
  color: #102c23; box-shadow: none;
}
.opening__search .search input::placeholder { color: #6b7a70; }
.opening__search .search input:focus { border-color: #d6f76a; box-shadow: 0 0 0 3px rgba(214, 247, 106, .28); }
.opening__search .search > svg { left: 18px; width: 20px; height: 20px; color: #4c5b52; }
.opening__search .repair-searchbox__go {
  position: static; transform: none; min-width: 0; min-height: 57px; padding-inline: 0;
  background: #d6f76a; border: 0; border-radius: 6px; color: #102c23;
}
.opening__search .repair-searchbox__go:hover { background: #e4ff9b; color: #102c23; transform: none; }

/* Device cards: the image fills the plate edge to edge, the name is
   centred on the strip beneath — the card rules themselves live in the
   opening section above. */
.opening__devices { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; width: 100%; margin: 18px 0 0; padding: 0; list-style: none; }
.opening__devices > li { display: flex; }

/* Fault chips: the label, then outlined pills with lime icons. */
.opening__faults-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 8px 16px; width: 100%; margin: 16px 0 0; padding-bottom: 28px; }
.opening__faults-label { flex: none; max-width: 11ch; margin: 0; color: #f8faf7; text-align: left; }
.opening__faults { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 8px; margin: 0; padding: 0; list-style: none; }
.opening__faults a {
  display: inline-flex; align-items: center; gap: 9px; min-height: 40px; padding: 0 16px;
  background: rgba(255, 255, 255, .03); border: 1px solid rgba(255, 255, 255, .20); border-radius: 999px;
  color: #f8faf7; text-decoration: none;
  transition: background-color 200ms var(--ease, ease), border-color 200ms var(--ease, ease);
}
.opening__faults a svg { color: #d6f76a; flex: none; }
.opening__faults a:hover { background: rgba(214, 247, 106, .08); border-color: #d6f76a; color: #f8faf7; transform: none; }

/* ---- Reassurance strip -------------------------------------------- */
.assurances { background: #d6f76a; border: 0; color: #102c23; margin: 0; }
.assurances__inner { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: center; gap: 0; min-height: 116px; padding-block: 22px; }
.assurances__item { display: flex; align-items: center; gap: 18px; padding-inline: 0 24px; color: inherit; text-decoration: none; text-align: left; }
.assurances__item + .assurances__item { border-left: 1px solid rgba(16, 44, 35, .16); padding-left: 40px; }
.assurances__badge { display: grid; place-items: center; flex: none; width: 56px; height: 56px; border-radius: 50%; background: #eefbc4; color: #102c23; transition: background-color 200ms var(--ease, ease); }
.assurances__item:hover .assurances__badge { background: #f5fedd; }
.assurances__text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.assurances__item small { color: rgba(16, 44, 35, .70); }

/* ---- Tablet -------------------------------------------------------- */
@media (max-width: 1023px) {
  .opening__devices { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .assurances__inner { grid-template-columns: 1fr; gap: 18px; min-height: 0; }
  .assurances__item + .assurances__item { border-left: 0; padding-left: 0; }
}

/* ---- Mobile --------------------------------------------------------- */
@media (max-width: 767px) {
  .opening { padding-block: 26px 0; }
  .opening__eyebrow { margin-bottom: 14px; }
  .opening__lede { margin-top: 14px; }
  .opening__search { margin-top: 22px; }
  .opening__search form { grid-template-columns: 1fr; gap: 10px; }
  .opening__search .search input, .opening__search .repair-searchbox__go { min-height: 52px; }
  .opening__devices { margin-top: 16px; gap: 10px; }
  .opening__faults-row { flex-wrap: nowrap; align-items: center; gap: 12px; margin-top: 14px; padding-bottom: 22px; width: calc(100% + 2 * var(--gutter)); margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); }
  .opening__faults { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
  .opening__faults::-webkit-scrollbar { display: none; }
  .opening__faults a { white-space: nowrap; }
  .assurances__inner { padding-block: 22px; gap: 16px; }
  .assurances__badge { width: 48px; height: 48px; }
}

@media (prefers-reduced-motion: reduce) {
  .opening__card { transition: none !important; }
}
/* The circles want to read as shapes in the field, not as noise. */
.opening__arcs span:nth-child(1) { background: rgba(255, 255, 255, .055); }
.opening__arcs span:nth-child(2) { background: rgba(255, 255, 255, .042); }
.opening__arcs span:nth-child(3) { background: rgba(255, 255, 255, .05); }
.opening__arcs span:nth-child(4) { background: rgba(255, 255, 255, .038); }
/* Payment marks: real artwork, one optical height, no card chrome. */
.footer__pay li { min-width: 0; height: auto; padding: 0; background: none; border-radius: 0; }
.footer__pay img { display: block; width: auto; height: 26px; border-radius: 3px; }

.assurances__inner { min-height: 0; padding-block: 17px; }
.assurances__item { gap: 14px; padding-inline: 0 20px; }
.assurances__item + .assurances__item { padding-left: 32px; }
.assurances__badge { width: 48px; height: 48px; }
.assurances__badge svg { width: 22px; height: 22px; }
@media (max-width: 1023px) { .assurances__inner { padding-block: 20px; } }

/* ---- Footer brand column ------------------------------------------
   The lockup itself rather than the name set as a heading, then a
   short description of the business and the three facts it repeats
   everywhere else, so the column stands on its own. */
.footer__brand { margin: 0 0 18px; }
.footer__brand .logo { pointer-events: auto; }
.footer__brand .logo__mark { width: 26px; height: 26px; background-color: #d6f76a; }
.footer__brand .logo__name { color: #fff; }
.footer__brand .logo__sub { color: #d6f76a; }
.footer__col--brand .footer__blurb { max-width: 33ch; margin: 0 0 14px; }
.footer__note { margin: 0 0 22px; max-width: 33ch; color: rgba(255, 255, 255, .55); }

/* ---- Hero: a few quiet elements in the field -----------------------
   Two hairline rings and a fine dot grid over the soft circles, all
   very low contrast, so the green reads as a surface rather than a
   flat fill. Decorative and behind everything. */
.opening__arcs::before {
  content: ''; position: absolute; right: -140px; top: -120px; width: 560px; height: 560px;
  border-radius: 50%; border: 1px solid rgba(214, 247, 106, .14);
}
.opening__arcs::after {
  content: ''; position: absolute; left: -180px; bottom: -220px; width: 640px; height: 640px;
  border-radius: 50%; border: 1px solid rgba(214, 247, 106, .10);
}
.opening::before {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: radial-gradient(rgba(255, 255, 255, .16) 1px, transparent 1px);
  background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(ellipse 60% 55% at 50% 42%, transparent 55%, #000 100%);
  mask-image: radial-gradient(ellipse 60% 55% at 50% 42%, transparent 55%, #000 100%);
  opacity: .28;
}
@media (max-width: 767px) {
  .opening__arcs::before { right: -200px; top: -160px; width: 400px; height: 400px; }
  .opening__arcs::after { left: -220px; bottom: -260px; width: 440px; height: 440px; }
  .opening::before { background-size: 22px 22px; opacity: .22; }
}
/* One grid everywhere: the footer, the hero and every section share
   .container's width and gutter, so nothing sits on its own margin. */
.footer__inner { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }

/* ==================================================================
   Why choose us, and the stores — the reference composition
   ------------------------------------------------------------------
   Both sections sit on the same warm neutral, both lead with a left
   eyebrow, heading and one supporting line, and both close on a row
   of plain white cards. No decoration: the copy and the photography
   carry them.
   ================================================================== */

/* ---- Why choose us ------------------------------------------------
   A split panel: the heading, lede and a booking button sit on a
   forest-green plate on the left; the four reasons are white cards in
   a 2×2 grid on the right, each with a lime icon tile. On phones the
   plate stacks on top and the cards run in one column. */
.why { background: #f7f7f2; padding-block: 64px 60px; }
.why__inner {
  display: grid; grid-template-columns: minmax(300px, 5fr) minmax(0, 7fr); gap: 16px;
  align-items: stretch;
}
.why__head {
  position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; justify-content: center; margin: 0; padding: 64px 36px 48px;
  background: #10382c; border-radius: 16px; color: #fff;
  background-image: linear-gradient(120deg, #0d2d23, #194937);
}
.why__head::after { content: ''; position: absolute; z-index: -1; width: 140%; aspect-ratio: 1; right: -92%; bottom: -98%; border-radius: 50%; background: rgba(114, 173, 143, .1); pointer-events: none; }
.why .eyebrow { margin: 0 0 16px; text-transform: uppercase; color: #d6f76a; }
.why__title, .why .why__title { color: #fff; max-width: 12ch; }
.why__sub, .why .why__sub { margin: 16px 0 0; max-width: 34ch; color: rgba(255, 255, 255, .78); }
.why__cta { margin-top: 0; padding-top: 56px; }
.why__cta .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding-inline: 22px; border-radius: 8px;
  background: #d6f76a; border-color: #d6f76a; color: #102c23; box-shadow: none;
}
.why__cta .btn:hover { background: #e4ff9b; border-color: #e4ff9b; color: #102c23; }

.why__grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px;
  margin: 0; padding: 0; list-style: none; border: 0;
}
.why__item {
  display: flex; flex-direction: column; gap: 0; padding: 24px 28px;
  background: #fff; border: 1px solid #e4e6de; border-radius: 16px; text-align: left;
  transition: border-color 200ms var(--ease, ease), box-shadow 200ms var(--ease, ease);
}
.why__icon {
  display: grid; place-items: center; width: 72px; height: 72px; margin: 0 0 16px;
  border-radius: 14px; background: #eaf2d8; color: #102c23;
}
.why__icon svg { width: 38px; height: 38px; }
.why__item-title { margin: 0; }
.why__item-title a { color: inherit; text-decoration: none; border-bottom: 0; }
.why__item-title a:hover { color: #08734c; text-decoration: underline; text-underline-offset: 4px; }
.why__item-body { margin: 8px 0 0; }
.why__item-note { margin: 10px 0 0; color: #8a948c; }
@media (hover: hover) and (pointer: fine) {
  .why__item:hover { border-color: #c9d5c3; box-shadow: 0 10px 26px rgba(16, 44, 35, .06); }
}

@media (max-width: 1023px) {
  .why__inner { grid-template-columns: 1fr; }
  .why__head { padding: 34px 30px; }
  .why__title, .why .why__title { max-width: none; }
  .why__cta { padding-top: 26px; }
}
@media (max-width: 599px) {
  .why { padding-block: 48px 44px; }
  .why__inner { gap: 12px; }
  .why__head { padding: 28px 22px; border-radius: 14px; }
  .why__cta { padding-top: 22px; }
  .why__cta .btn { width: 100%; }
  .why__grid { grid-template-columns: 1fr; gap: 10px; }
  .why__item { padding: 24px; border-radius: 14px; }
  .why__icon { width: 64px; height: 64px; margin-bottom: 16px; }
  .why__icon svg { width: 34px; height: 34px; }
}

/* ---- Stores ------------------------------------------------------- */
.home-stores { background: #f7f7f2; padding: 70px 0 56px; }
.home-stores .opener { display: flex; align-items: flex-start; justify-content: space-between; gap: 40px; margin-bottom: 32px; }
.home-stores .opener__text { flex: 1 1 auto; min-width: 0; max-width: none; }
.home-stores .opener__action { flex: none; padding-top: 8px; }
.home-stores .opener .eyebrow { margin: 0 0 14px; color: #08734c; }
/* Margin and colour are already set by the canonical block; max-width
   is set once, later, at 15ch. */
.home-stores .opener .subhead { margin: 14px 0 0; max-width: 650px; }

.home-stores .btn--find {
  display: inline-flex; align-items: center; gap: 14px; justify-content: space-between;
  min-width: 330px; min-height: 60px; padding: 0 24px;
  background: transparent; border: 1px solid #a9b8a9; border-radius: 8px;
  color: #102c23; box-shadow: none;
}
.home-stores .btn--find > span { flex: 1 1 auto; text-align: left; }
.home-stores .btn--find svg { color: #102c23; flex: none; transition: transform 200ms var(--ease, ease); }
.home-stores .btn--find:hover { background: #eef6d8; border-color: #102c23; color: #102c23; }
.home-stores .btn--find:hover > svg:last-child { transform: translateX(3px); }

.home-stores .grid--stores { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.home-stores .storecard, .storecard {
  display: flex; flex-direction: column; gap: 0; padding: 13px 16px 16px;
  background: #fff; border: 1px solid #e4e6de; border-top: 1px solid #e4e6de; border-radius: 13px; box-shadow: none;
}
.home-stores .storecard__photo { aspect-ratio: 16 / 9; border-radius: 8px; margin: 0; overflow: hidden; }
.home-stores .storecard__name, .storecard__name { margin: 16px 0 0; }
.home-stores .storecard__addr { margin: 12px 0 0; gap: 8px; color: #536058; }
.home-stores .storecard__addr svg { color: #08734c; }
.home-stores .storecard__status { margin: 12px 0 0; gap: 14px; color: #536058; }
.home-stores .storecard__badge { min-height: 31px; padding: 0 12px; background: #e8f6c8; color: #1b5c33; }
.home-stores .storecard__badge .dot { background: #2e8b4f; }
.home-stores .storecard__actions { margin: 16px 0 0; padding-top: 16px; border-top: 1px solid rgba(16, 44, 35, .12); gap: 0; }
.home-stores .storecard__cta {
  min-height: 49px; border-radius: 8px; background: #14523c; color: #fff;
}
.home-stores .storecard__cta:hover { background: #08734c; color: #fff; }
.home-stores .storecard__directions { min-height: 44px; margin-top: 8px; color: #102c23; }
.home-stores .storecard__directions svg { color: #08734c; }
.home-stores .storecard__directions:hover { color: #08734c; }
.home-stores .storecard__links { display: none; }
.home-stores .storecard__services, .home-stores .storecard__head { display: none; }

/* Trust row under the cards: icon, heading, one line, thin dividers. */
.home-stores .trustrow {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 36px 0 12px; padding: 0; border-top: 0; gap: 0; list-style: none;
}
.home-stores .trustrow__item { display: flex; align-items: flex-start; gap: 18px; padding: 4px 32px 4px 0; border-left: 0; }
.home-stores .trustrow__item + .trustrow__item { border-left: 1px solid rgba(16, 44, 35, .12); padding-left: 36px; }
.home-stores .trustrow__badge { width: 56px; height: 56px; background: #e8f6c8; color: #102c23; }
.home-stores .trustrow__badge svg { width: 26px; height: 26px; }
.home-stores .trustrow__item > span:last-child { gap: 6px; padding-top: 4px; }
.home-stores .trustrow__item strong { color: #102c23; }
.home-stores .trustrow__item small { color: #536058; }

@media (max-width: 1199px) {
  .home-stores .opener { flex-direction: column; gap: 22px; }
  .home-stores .opener__action { padding-top: 0; }
  .home-stores .grid--stores { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 899px) {
  .home-stores .trustrow { grid-template-columns: 1fr; gap: 0; }
  .home-stores .trustrow__item { padding: 18px 0; }
  .home-stores .trustrow__item + .trustrow__item { border-left: 0; border-top: 1px solid rgba(16, 44, 35, .12); padding-left: 0; }
}
@media (max-width: 767px) {
  .home-stores { padding: 52px 0 44px; }
  .home-stores .grid--stores { grid-template-columns: minmax(0, 1fr); }
  .home-stores .opener__action, .home-stores .btn--find { width: 100%; min-width: 0; }
}
/* "While-you-wait" is one word to a reader; let it break after it. */
.why__item-title { text-wrap: balance; }
/* The reassurance row's own base: a round badge and a stacked label. */
.trustrow { display: grid; margin: 0; padding: 0; list-style: none; }
.trustrow__item { display: flex; align-items: flex-start; gap: 18px; }
.trustrow__badge { display: grid; place-items: center; flex: none; width: 56px; height: 56px; border-radius: 50%; background: #e8f6c8; color: #102c23; }
.trustrow__item > span:last-child { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.trustrow__item strong { display: block; }
.trustrow__item small { display: block; }

/* ==================================================================
   One type scale for every section
   ------------------------------------------------------------------
   Section headings had drifted to four different sizes and two
   weights, eyebrows to two, and section intros to four. Everything
   below is set once here and inherited, so a new section cannot
   invent its own scale.
   ================================================================== */
/* Every value below is pinned to the tokens styles.css already
   defines from the reference measurement (--w-heading:500,
   --track-l:-0.03em, --font). Measured live against
   openai.com/index/gpt-6-astra-next-generation-work/ on 2026-09-11:
   h1 64px/500/lh 1.0/tracking -3%; h2 30px/500/lh 1.32/tracking -1%;
   body 17px/400/lh 1.65/tracking -1%; nav 17px/400. Our section
   headings sit at hero scale (up to 58px) so they take the h1
   tracking (--track-l); everything else takes the site's own scale
   rather than a second, parallel one. */
:root {
  --sec-eyebrow: 11px;
  --sec-title: var(--t-title-l);
  --sec-intro: 18px;
  --card-title: 20px;
  --card-body: 15px;
  --forest: var(--ink);
  --leaf: var(--brand);
  --muted: var(--text-soft);
}

/* Eyebrow — one size, one weight, one colour, everywhere. */
.opener .eyebrow,
.why .eyebrow,
.reviews__eyebrow,
.home-stores .opener .eyebrow,
.faq-section .opener .eyebrow,
.opening__eyebrow {
  margin: 0 0 16px;
  text-transform: uppercase;
}
.opener .eyebrow, .why .eyebrow, .reviews__eyebrow,
.home-stores .opener .eyebrow, .faq-section .opener .eyebrow { color: var(--leaf); }

/* Section heading — one scale, one weight, one colour. Width, not a
   smaller font, is what controls where a long title wraps. */
.opener h2, .opener .display-m, .opener .display-l,
.why__title, .reviews__title,
.home-stores .opener h2 {
  margin: 0;
  color: var(--forest);
  max-width: 16ch;
}
.reviews__title { max-width: 12ch; }
.why__title { max-width: 19ch; }
.home-stores .opener h2 { max-width: 15ch; }
.home-process .opener h2 { max-width: 10ch; }
.faq-section .opener h2 { max-width: 13ch; }

/* Section intro — one size, one colour, wrapped by width alone. */
.opener .subhead, .opener__lede, .why__sub, .reviews__lede, .opening__lede {
  color: var(--muted);
  max-width: 42ch;
}
.opening__lede { color: rgba(255, 255, 255, .80); }

/* Card type — one title size/weight and one body size across every
   card, whatever section it sits in. */
.why__item-title, .rail__title, .storecard__name {
  color: var(--forest);
}
/* The FAQ question is deliberately quieter than a card title — it is
   a row in a list, not a heading, so it stays at the site's own
   --w-heading rather than the bolder --w-strong the cards use. */
.acc__item > summary {
  color: var(--forest);
}
.why__item-body, .rail__body, .review__text {
  color: var(--muted);
}

/* Buttons: one weight everywhere, never inheriting a heading's. */

/* <strong>/<b> read as emphasis inside running copy, never as a
   second, heavier heading weight — and never lighter than the text
   around them when that text is already at --w-strong. */

@media (max-width: 767px) {
  :root { --sec-intro: 16px; --card-title: 18px; --card-body: 15px; }
  .opener h2, .opener .display-m, .opener .display-l,
  .why__title, .reviews__title, .home-stores .opener h2 { max-width: none; }
}

/* ==================================================================
   Reviews — the rating card beside three quotes
   ------------------------------------------------------------------
   A warm white field with three pale shapes cropped by its edges, a
   two-zone header, four equal cards, and a centred trust line. The
   annotations are set in the accent serif rather than a third face,
   so the section keeps the site's two families.
   ================================================================== */
.reviews-section {
  position: relative;
  overflow: hidden;
  background: #fafaf7;
  padding: 75px 0 55px;
}
.reviews-section > .container { position: relative; z-index: 1; }

.reviews-section__shapes { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.reviews-section__shapes span { position: absolute; border-radius: 50%; }
.reviews-section__shapes span:nth-child(1) { width: 760px; height: 700px; top: -290px; right: -230px; background: rgba(214, 247, 106, .16); }
.reviews-section__shapes span:nth-child(2) { width: 640px; height: 600px; bottom: -300px; left: -200px; background: rgba(20, 80, 55, .035); }
.reviews-section__shapes span:nth-child(3) { width: 420px; height: 420px; bottom: -180px; left: 130px; background: rgba(214, 247, 106, .12); }

/* ---- Header ------------------------------------------------------- */
.reviews__head {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 500px);
  align-items: end;
  gap: 16px 32px;
  margin-bottom: 32px;
}
.reviews__eyebrow { display: inline-flex; align-items: center; gap: 12px; }
.reviews__eyebrow::after { content: ''; width: 40px; height: 1px; background: var(--leaf); }
.reviews__lede { margin: 0 0 6px; max-width: 500px; }

/* The two annotations. Playfair italic rather than a third family,
   so the site keeps one text face and one accent face. */
.reviews__note {
  position: static;
  margin: 0;
  color: var(--leaf);
  color: var(--text-soft);
}
.reviews__note--top { grid-column: 1 / -1; text-align: left; }
.reviews__note--top::after {
  content: none; display: block; width: 74%; height: 7px; margin: 5px auto 0;
  border-bottom: 1.5px solid currentColor; border-radius: 0 0 60% 60% / 0 0 100% 100%;
}
.reviews__note--bottom {
  margin-top: 24px; text-align: center;
}
.reviews__note--bottom::after {
  content: none; display: block; width: 70%; height: 7px; margin: 4px auto 0;
  border-bottom: 1.5px solid currentColor; border-radius: 0 0 60% 60% / 0 0 100% 100%;
}

/* ---- The four cards ------------------------------------------------ */
.reviews { display: grid; grid-template-columns: .95fr 1fr 1fr 1fr; gap: 18px; align-items: stretch; }
.reviews__list { display: contents; margin: 0; padding: 0; list-style: none; }
.reviews__list > li { display: flex; }

.rating, .review {
  display: flex; flex-direction: column;
  width: 100%; min-height: 0; padding: 24px;
  border: 1px solid rgba(10, 55, 45, .07); border-radius: 15px;
  box-shadow: 0 8px 30px rgba(20, 45, 35, .04);
}

/* The summary card, tinted. */
.rating {
  gap: 0;
  background: linear-gradient(160deg, rgba(213, 255, 102, .22), rgba(245, 250, 235, .92));
}
.rating__g { display: grid; place-items: center; width: 62px; height: 62px; border-radius: 50%; background: rgba(255, 255, 255, .7); }
.rating__label { margin: 21px 0 0; text-transform: uppercase; color: #4a5a50; }
.rating__score { margin: 10px 0 0; color: var(--forest); }
.rating__score span { color: #6d7a70; margin-left: 4px; }
.rating__source { margin: 16px 0 0; color: var(--forest); }
.rating__count { margin: 8px 0 0; color: var(--muted); }
.rating__btn {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-top: auto; min-height: 53px; padding: 0 20px;
  background: #14523c; border-radius: 8px; color: #fff; text-decoration: none;
  transition: background-color 200ms var(--ease, ease);
}
.rating__btn svg { flex: none; transition: transform 200ms var(--ease, ease); }
.rating__btn:hover { background: var(--leaf); color: #fff; }
.rating__btn:hover svg { transform: translateX(3px); }

/* The three quotes. */
.review { background: #fff; border-left: 1px solid rgba(10, 55, 45, .07); }
.review .stars { display: flex; gap: 3px; margin: 0; color: #f5a000; }
.review .stars svg { width: 18px; height: 18px; }
.review__text { margin: 19px 0 0; color: #16281f; }
.review__text::before { content: '\201C'; }
.review__text::after { content: '\201D'; }
.review__foot {
  display: flex; align-items: center; gap: 12px;
  margin-top: auto; padding-top: 18px; border-top: 1px solid rgba(10, 55, 45, .12);
}
.review__avatar { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 50%; background: #e8f6c8; color: var(--forest); }
.review__who-block { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; }
/* A Google display name is whatever the reviewer typed — sometimes a
   short word, sometimes one long unbroken one ("LittleMissSunshine").
   Letting it wrap meant a short word that was merely a little wider
   than this narrow column (e.g. "Noroon") got force-broken mid-word
   too, which reads worse than the overlap it was meant to fix. One
   truncated line reads correctly either way. */
.review__who { display: block; overflow: hidden; max-width: 100%; white-space: nowrap; text-overflow: ellipsis; color: var(--forest); }
.review__when { color: var(--muted); }
.review__source { display: inline-flex; align-items: center; gap: 6px; flex: none; color: var(--muted); text-decoration: none; white-space: nowrap; }
.review__source:hover { color: var(--leaf); }

/* ---- Trust line ----------------------------------------------------- */
.reviews__trust {
  display: flex; align-items: center; justify-content: center; gap: 20px;
  margin: 46px 0 0;
  text-transform: uppercase; color: var(--leaf);
}
.reviews__trust::before, .reviews__trust::after { content: ''; width: min(220px, 22vw); height: 1px; background: rgba(20, 80, 55, .17); }
.reviews__trust span { display: inline-flex; align-items: center; gap: 9px; white-space: nowrap; }

/* ---- Tablet ---------------------------------------------------------- */
@media (max-width: 1199px) {
  .reviews { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rating, .review { min-height: 0; }
}
@media (max-width: 899px) {
  .reviews__head { grid-template-columns: 1fr; align-items: start; gap: 18px; }
  .reviews__lede { margin-bottom: 0; }
}

/* ---- Mobile ----------------------------------------------------------- */
@media (max-width: 767px) {
  .reviews-section { padding: 52px 0 44px; }
  .reviews { grid-template-columns: 1fr; gap: 14px; }
  .rating, .review { padding: 24px; }
  .reviews__list { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 6px; }
  .reviews__list::-webkit-scrollbar { display: none; }
  .reviews__list > li { flex: 0 0 min(84vw, 340px); scroll-snap-align: start; }
  .reviews__trust { gap: 12px; margin-top: 34px; }
  .reviews__trust::before, .reviews__trust::after { width: 14vw; }
}
/* The button label is one line; the card is wide enough for it. */
.rating__btn { padding-inline: 16px; }
.rating__btn > span { white-space: nowrap; }
/* Keep the attribution on the name row, and shorten it before it wraps. */
.review__foot { flex-wrap: nowrap; }
.review__source { margin-left: auto; }

/* ==================================================================
   The three steps — a journey, not three columns of text
   ------------------------------------------------------------------
   White cards on the warm neutral, a faint line threaded behind them,
   a numbered label, one icon, short copy and a link. Closed by a small
   trust line. Nothing here is positioned except that line.
   ================================================================== */
.home-process { background: #f7f7f2; }
.home-process .opener { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 360px); align-items: end; gap: 40px; margin-bottom: 40px; }
.home-process .opener__text { min-width: 0; }
.home-process .opener .subhead, .home-process .opener__lede { margin: 0 0 6px; color: var(--muted); max-width: 360px; }

.rail-wrap { position: relative; }
.rail {
  position: relative;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px;
  margin: 0; padding: 0; list-style: none; counter-reset: none;
}
/* The thread behind the cards. Decorative, so it may be positioned. */
.rail__line {
  position: absolute; left: 16%; right: 16%; top: 62px; height: 0; z-index: 0;
  border-top: 1px solid rgba(16, 44, 35, .16);
}
.rail__step {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; gap: 0;
  min-height: 292px; padding: 30px;
  background: #fff; border: 1px solid rgba(10, 55, 45, .10); border-left: 1px solid rgba(10, 55, 45, .10);
  border-radius: 13px; box-shadow: 0 8px 28px rgba(12, 40, 30, .035);
  transition: transform 200ms var(--ease, ease), border-color 200ms var(--ease, ease), box-shadow 200ms var(--ease, ease);
}
.rail__step:first-child { padding-left: 30px; }
.rail__step::before, .rail__step::after { content: none; }

.rail__num {
  display: inline-flex; align-items: center; gap: 12px; color: var(--forest);
}
.rail__num i { display: block; width: 26px; height: 2px; border-radius: 2px; background: #c8e86a; }
.rail__icon {
  display: grid; place-items: center; width: 50px; height: 50px; margin: 22px 0 0;
  border-radius: 50%; background: #e8f6c8; color: var(--forest);
  transition: background-color 200ms var(--ease, ease);
}
.rail__title { display: block; margin: 20px 0 0; }
.rail__body { display: block; margin: 12px 0 0; max-width: 320px; }
.rail__action { margin-top: auto; padding-top: 18px; }
.rail__action a { color: var(--forest); }
.rail__action a:hover { color: var(--leaf); }
.rail__note {
  display: inline-flex; align-items: center; gap: 8px; align-self: flex-start;
  margin: auto 0 0; padding: 8px 13px; border-radius: 999px;
  background: #eef6d8; color: var(--forest);
}
.rail__note svg { color: var(--leaf); flex: none; }

.rail__trust {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 16px;
  margin: 34px 0 0; color: var(--muted);
}
.rail__trust svg { color: var(--leaf); flex: none; }
.rail__trust i { display: block; width: 4px; height: 4px; border-radius: 50%; background: rgba(16, 44, 35, .22); }
.rail__trust span { margin-right: 6px; }

@media (hover: hover) and (pointer: fine) {
  .rail__step:hover { transform: translateY(-3px); border-color: rgba(16, 44, 35, .22); box-shadow: 0 12px 32px rgba(12, 40, 30, .06); }
  .rail__step:hover .rail__icon { background: #ddf0a8; }
}
@media (max-width: 1023px) {
  .home-process .opener { grid-template-columns: 1fr; align-items: start; gap: 16px; }
  .home-process .opener .subhead, .home-process .opener__lede { margin-bottom: 0; max-width: 520px; }
  .rail { grid-template-columns: 1fr; gap: 14px; }
  .rail__line { display: none; }
  .rail__step { min-height: 0; }
}
@media (max-width: 767px) {
  .rail__step { padding: 24px; }
  .rail__trust { margin-top: 26px; }
}
@media (prefers-reduced-motion: reduce) { .rail__step, .rail__icon { transition: none !important; } .rail__step:hover { transform: none; } }
/* Older compound selectors (.rail__step p, .rail__step h3) outrank the
   class-level type rules and were holding this card's copy at 14px.
   Matched here at the same specificity so the scale applies. */

/* ---- Icons on the prices page: filter pills, model cards, rows ---- */
.pfilter .pill { display: inline-flex; align-items: center; gap: 7px; }
.pfilter .pill svg { color: var(--leaf, #08734c); flex: none; }
.pgroup__head { align-items: center; }
.pgroup__icon {
  display: grid; place-items: center; flex: none;
  width: 34px; height: 34px; margin-top: 2px;
  border-radius: 50%; background: #e8f6c8; color: #102c23;
}
.prow__repair { display: flex; align-items: center; gap: 9px; }
.prow__repair svg { color: #08734c; flex: none; }

/* ==================================================================
   Phone pass — section by section
   ------------------------------------------------------------------
   Sized against a 400px viewport. Each block names the section it
   tightens; nothing here touches the tablet or desktop layouts.
   ================================================================== */
@media (max-width: 599px) {
  /* Hero: a little less air under the lede and around the search. */
  .opening__lede { margin-bottom: 20px; }
  .opening__faults-row { margin-top: 12px; padding-bottom: 20px; }

  /* Assurance strip: the desktop divider padding leaked onto the
     stacked rows, so items two and three sat 32px to the right of the
     first. Every row starts on the same edge, with a smaller badge. */
  .assurances__inner { padding-block: 18px; gap: 12px; }
  .assurances__item, .assurances__item + .assurances__item { padding: 0; border-left: 0; gap: 12px; }
  .assurances__badge { width: 40px; height: 40px; }
  .assurances__badge svg { width: 18px; height: 18px; }

  /* Reviews: the rating card ran to ~650px. Logo, label and score sit
     on one row; the copy and button follow. */
  .rating { padding: 20px; }
  .rating__g { width: 48px; height: 48px; margin: 0; }
  .rating__g svg, .rating__g img { width: 24px; height: 24px; }
  .rating__label { margin-top: 14px; }
  .rating__score { margin-top: 6px; }
  .rating__source { margin-top: 10px; }
  .rating__count { margin-top: 4px; }
  .rating__btn { margin-top: 14px; min-height: 44px; }
  .review { padding: 20px; }

  /* Stores: the four cards were each ~500px tall. A shorter photo,
     tighter rhythm, and the two actions side by side bring each card
     under 400px without losing anything. */
  .home-stores { padding: 48px 0 40px; }
  .home-stores .grid--stores { gap: 12px; }
  .home-stores .storecard { padding: 10px 12px 12px; border-radius: 12px; }
  .home-stores .storecard__photo { aspect-ratio: 2 / 1; border-radius: 8px; }
  .home-stores .storecard__name { margin-top: 12px; }
  .home-stores .storecard__addr { margin-top: 8px; }
  .home-stores .storecard__status { margin-top: 8px; gap: 12px; }
  .home-stores .storecard__actions {
    display: grid; grid-template-columns: 1fr 1fr; gap: 8px; align-items: stretch;
    margin-top: 12px; padding-top: 12px;
  }
  .home-stores .storecard__cta { min-height: 44px; }
  .home-stores .storecard__directions {
    min-height: 44px; margin: 0; padding: 0 10px; border: 1px solid #c9d2c4; border-radius: 8px; color: #102c23;
  }
  .home-stores .trustrow { margin-top: 28px; }
  .home-stores .trustrow__badge { width: 44px; height: 44px; }
  .home-stores .trustrow__badge svg { width: 20px; height: 20px; }
  .home-stores .trustrow__item { padding: 14px 0; gap: 14px; }

  /* Menu sheet: the list starts near the top instead of a third of
     the way down. */
  .menu { padding-top: 8px; }
  .menu__list { margin-top: 8px; }

  /* Footer: the three link lists sat one under another, a screen and
     a half of links. Two columns, with the last list spanning both. */
  .footer__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 20px; }
  .footer__col--brand { grid-column: 1 / -1; }
  .footer__col:last-child { grid-column: 1 / -1; }
  .footer__col:last-child .footer__links { display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; }
}

/* Very narrow phones (≤359px): the two store actions no longer fit
   side by side without wrapping their labels, so they stack; the hero
   eyebrow drops its tracking so it stays on one line. */
@media (max-width: 359px) {
  .home-stores .storecard__actions { grid-template-columns: 1fr; gap: 8px; }
}

/* ==================================================================
   Site-wide phone pass — every page template checked at 320/390/768
   ================================================================== */

/* Search page, all widths: the "browse by device" band is a dark flood,
   but the shared section-heading rule paints its h2 forest-on-forest
   and the flood's own h3 rule paints the card names white on a white
   card. Both were invisible. */
.flood .opener h2, .flood .opener .display-l, .flood .opener .display-m { color: #fff; }
.flood .devcard__name { color: var(--forest); }
.flood .devcard__scope { color: var(--muted); }

@media (max-width: 599px) {
  /* Store cards everywhere (locator, service pages, brand pages): the
     same compact card the homepage uses — 2:1 photo, actions side by
     side, the details/phone row underneath spanning both columns. */
  .grid--stores { gap: 12px; }
  .storecard { padding: 10px 12px 12px; border-radius: 12px; }
  .storecard__photo { aspect-ratio: 2 / 1; border-radius: 8px; }
  .storecard__name { margin-top: 12px; }
  .storecard__addr { margin-top: 8px; }
  .storecard__status { margin-top: 8px; gap: 12px; }
  .storecard__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; align-items: stretch; margin-top: 12px; padding-top: 12px; }
  .storecard__cta { min-height: 44px; }
  .storecard__directions { min-height: 44px; margin: 0; padding: 0 10px; border: 1px solid #c9d2c4; border-radius: 8px; color: #102c23; }
  .storecard__links { grid-column: 1 / -1; margin-top: 2px; }

  /* Store page: "Book here" full width, call and directions beneath. */
  .branch-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .branch-actions .btn { width: 100%; justify-content: center; margin: 0; }
  .branch-actions .btn:first-child { grid-column: 1 / -1; }

  /* Text-only page heroes (warranty, privacy, terms…) inherited a
     280px desktop minimum height, leaving a screen of empty canvas
     around a one-line title. */
  .hero--compact { padding-block: 30px 28px; }
  .hero--compact .hero__inner { min-height: 0; }

  /* Buttons dropped straight into prose (About page) wrapped to
     ragged widths with no gap. */
  .prose > .btn { display: flex; width: 100%; justify-content: center; margin: 14px 0 0; }
  .prose > .btn + .btn { margin-top: 10px; }

  /* Enquiry forms: a full-width submit, the phone link centred below. */
  .form__actions { display: grid; gap: 12px; justify-items: stretch; }
  .form__actions .btn { width: 100%; justify-content: center; }
  .form__actions .phone-link { justify-self: center; }

  /* Service pages: the included / not-included table squeezed two
     columns into 390px. Stack them, each with its own label. */
  .compare, .compare tbody, .compare tr, .compare td { display: block; width: 100%; box-sizing: border-box; }
  .compare thead { display: none; }
  .compare td { border-right: 0 !important; }
  .compare td + td { border-top: 1px solid var(--line); }
  .compare td::before {
    display: block; margin-bottom: 10px; text-transform: uppercase; color: #536058;
  }
  .compare td:first-child::before { content: "What’s included"; }
  .compare td:last-child::before { content: "What’s not included"; }

  /* Closing CTA band on inner pages: full-width buttons rather than a
     pair of short centred ones. */
  .cta__actions { display: grid; gap: 10px; justify-items: stretch; }
  .cta__actions .btn { width: 100%; justify-content: center; }
  .cta__actions .phone-link { justify-self: center; }

  /* Search page: device cards two across instead of one enormous
     card per row. */
  .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .devcard__body { padding: 12px 12px 14px; }
  .devcard__scope { display: none; }
}

/* Search page: the results band is empty until a query is typed, so it
   should take no room until then. */
.section:has(> .container > #search-results:empty) { padding-block: 0; }

/* ==================================================================
   Brand marks
   ------------------------------------------------------------------
   The manufacturer logos from src/assets/brand/logos, used three
   ways: a strip of every make we repair, the mark beside a price
   group, and the mark in a brand page's hero. All sit on a 2:1 plate
   and are already scaled to a shared optical baseline.
   ================================================================== */
.brand-mark { display: block; width: 100%; height: 100%; object-fit: contain; }

.brands { padding-block: 28px 30px; background: #f7f7f2; border-bottom: 1px solid #e4e6de; }
.brands--home { background: #fff; border-top: 1px solid #e4e6de; }
.brands--hub { background: transparent; border: 0; padding-block: 8px 36px; }
.brands__label {
  margin: 0 0 16px; text-transform: uppercase; color: #08734c;
  text-align: center;
}
.brands__list {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px 10px;
  margin: 0; padding: 0; list-style: none;
}
.brands__item {
  display: grid; place-items: center; width: 104px; height: 52px; padding: 8px 12px; border-radius: 10px;
  filter: grayscale(1); opacity: .62;
  transition: opacity 180ms var(--ease, ease), filter 180ms var(--ease, ease), background-color 180ms var(--ease, ease);
}
.brands__item:hover, .brands__item:focus-visible { filter: none; opacity: 1; background: #eef1e6; }
@media (max-width: 767px) {
  .brands { padding-block: 22px 24px; }
  .brands__list { gap: 2px 4px; }
  .brands__item { width: 84px; height: 44px; padding: 6px 10px; }
}

/* Price groups: the brand's mark where the category glyph was. */
.pgroup__icon--logo { width: 52px; height: 32px; padding: 3px 5px; border-radius: 7px; background: #fff; border: 1px solid #e4e6de; }
.pgroup__icon--logo .brand-mark { filter: none; }

/* Brand page hero: a white plate holding the mark, right of the title
   on wide screens and above it on phones. */
.hero--media-logo { --hero-media-col: 220px; }
.hero__logo {
  display: grid; place-items: center; width: 220px; max-width: 100%; aspect-ratio: 2 / 1; padding: 22px 26px;
  background: #fff; border: 1px solid #e4e6de; border-radius: 14px;
}
@media (max-width: 999px) {
  .hero--media-logo .hero__inner { grid-template-columns: 1fr; gap: 18px; }
  .hero--media-logo .hero__media { order: -1; }
  .hero__logo { width: 150px; padding: 14px 18px; border-radius: 10px; }
}

/* ---- Advice: featured card ------------------------------------------
   The row height, stretched by the text, multiplied by the shot's 16:10
   ratio made the photo wider than its 7fr track, so it slid under the
   copy. Tracks that may shrink to zero, and a shot that fills its cell
   instead of computing its own width, keep the two columns apart. */
@media (min-width: 860px) {
  .artcard--feature { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .artcard--feature .artcard__shot { aspect-ratio: auto; width: 100%; height: 100%; min-height: 380px; }
  .artcard--feature .artcard__shot .picture, .artcard--feature .artcard__shot img { width: 100%; height: 100%; object-fit: cover; }
  .artcard--feature .artcard__body { position: relative; z-index: 1; min-width: 0; }
}

/* ==================================================================
   Mobile menu — a modern sheet
   ------------------------------------------------------------------
   Two big actions first (book, call), then the four devices as tiles,
   then the rest of the site as one grouped list, the language picker
   and the phone line. Everything sits on cards so the sheet reads as
   an app screen rather than a list of links.
   ================================================================== */
.menu { background: #f3f4ee; padding: 14px 0 calc(var(--actionbar-h, 64px) + 36px); border-top: 1px solid rgba(16, 44, 35, .08); }
.menu:not([hidden]) { animation: menu-in 220ms cubic-bezier(.22, 1, .36, 1); }
@keyframes menu-in { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .menu:not([hidden]) { animation: none; } }
.menu__inner { display: grid; gap: 16px; }
.menu__quick { display: grid; grid-template-columns: 1.35fr 1fr; gap: 10px; }
.menu__cta, .menu__call {
  display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 56px; padding: 0 16px;
  border-radius: 14px; text-decoration: none;
}
.menu__cta { background: #d6f76a; color: #102c23; }
.menu__call { background: #102c23; color: #fff; }
.menu__call svg { color: #d6f76a; }
.menu__label { margin: 6px 2px -6px; text-transform: uppercase; color: #08734c; }
.menu__devices { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0; padding: 0; list-style: none; }
.menu__devices a {
  display: flex; align-items: center; gap: 12px; min-height: 66px; padding: 10px 12px;
  background: #fff; border: 1px solid #e4e6de; border-radius: 14px; color: #102c23; text-decoration: none;
}
.menu__devices a:active { background: #f1f4ea; }
.menu__device-icon { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 11px; background: #e8f6c8; color: #102c23; }
.menu .menu__list { margin: 0; padding: 0; list-style: none; background: #fff; border: 1px solid #e4e6de; border-top: 1px solid #e4e6de; border-radius: 14px; overflow: hidden; }
.menu .menu__list li + li { border-top: 1px solid #eef0e8; }
.menu .menu__list a {
  display: flex; align-items: center; justify-content: space-between; min-height: 54px; padding: 0 16px;
  border: 0; color: #102c23; text-decoration: none;
}
.menu .menu__list a svg { color: #9aa39b; }
.menu .menu__list a:active { background: #f1f4ea; }
.menu__foot { display: grid; gap: 8px; padding: 2px 4px 0; color: #536058; }
.menu__foot a { color: #08734c; text-decoration: none; }

/* ==================================================================
   Language picker
   ================================================================== */
.lang { position: relative; }
.lang > summary { list-style: none; display: inline-flex; align-items: center; gap: 7px; cursor: pointer; user-select: none; }
.lang > summary::-webkit-details-marker { display: none; }
.lang--header > summary {
  min-height: 38px; padding: 0 12px; border: 1px solid rgba(255, 255, 255, .24); border-radius: 999px;
  color: #fff;
}
.lang--header > summary:hover, .lang--header[open] > summary { border-color: #d6f76a; color: #d6f76a; }
.lang__panel {
  position: absolute; right: 0; top: calc(100% + 10px); z-index: 130; width: 280px; max-height: min(70vh, 460px); overflow: auto;
  padding: 8px; background: #fff; border: 1px solid #e4e6de; border-radius: 16px; box-shadow: 0 20px 44px rgba(16, 44, 35, .2);
}
.lang__note { margin: 6px 8px 8px; color: #6a756d; }
.lang__option {
  display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 12px; min-height: 42px; padding: 0 10px;
  border: 0; border-radius: 10px; background: none; color: #102c23; text-align: left; cursor: pointer;
}
.lang__option:hover { background: #f1f4ea; }
.lang__option[aria-pressed="true"] { background: #e8f6c8; }
.lang__code { color: #8a948c; }
.lang--menu > summary {
  display: flex; width: 100%; min-height: 54px; padding: 0 16px; background: #fff; border: 1px solid #e4e6de; border-radius: 14px;
  color: #102c23;
}
.lang--menu > summary svg { color: #08734c; }
.lang--menu .lang__label { flex: 1; }
.lang--menu .lang__current { color: #536058; }
.lang--menu .lang__panel { position: static; width: auto; max-height: none; margin-top: 8px; box-shadow: none; display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.lang--menu .lang__note { grid-column: 1 / -1; }
@media (max-width: 599px) {
  .header__inner { gap: 10px; }
  .lang--header { position: static; flex: none; }
  .lang--header > summary { min-height: 44px; padding: 0 10px; gap: 5px; white-space: nowrap; }
  /* Anchor to the header, not the small toggle beside the menu button. */
  .lang--header .lang__panel {
    top: calc(100% + 8px); left: 12px; right: 12px; width: auto;
    max-height: min(460px, calc(100vh - 168px));
    max-height: min(460px, calc(100dvh - 168px));
    overscroll-behavior: contain;
  }
}

/* Google's translator adds a toolbar and tooltip; the picker replaces both. */
.goog-te-banner-frame, iframe.skiptranslate, .skiptranslate > iframe, #goog-gt-tt, .goog-te-balloon-frame,
.VIpgJd-ZVi9od-ORHb-OEVmcd, .VIpgJd-ZVi9od-aZ2wEe-wOHMyf, #google_translate_element { display: none !important; }
body { top: 0 !important; }
.goog-text-highlight { background: none !important; box-shadow: none !important; }

/* ==================================================================
   Reviews — every review in a rail
   ================================================================== */
.reviews { display: grid; grid-template-columns: minmax(260px, 340px) minmax(0, 1fr); gap: 16px; align-items: stretch; }
.reviews__list { display: flex; gap: 14px; margin: 0; padding: 0 0 4px; list-style: none; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.reviews__list::-webkit-scrollbar { display: none; }
.reviews__list > li { display: flex; flex: 0 0 calc((100% - 14px) / 2); scroll-snap-align: start; }
@media (min-width: 1280px) { .reviews__list > li { flex-basis: calc((100% - 28px) / 3); } }
.reviews__list .review { display: flex; flex-direction: column; width: 100%; }
.review__text { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 6; overflow: hidden; }
.review.is-open .review__text { display: block; -webkit-line-clamp: unset; }
.review__more {
  align-self: flex-start; margin: 8px 0 0; padding: 0; border: 0; background: none; color: #08734c; text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
.review__foot { margin-top: auto; }
.review__top { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.review__top .stars > span[aria-hidden] { display: inline-flex; gap: 3px; }
.review__google { display: grid; place-items: center; width: 44px; height: 44px; flex-shrink: 0; }
.review__google svg { width: 24px; height: 24px; }
.review__text { margin-bottom: 24px; }
.review__more { margin-bottom: 24px; }
.reviews__nav { grid-column: 1 / -1; display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.reviews__count { margin-right: auto; color: #536058; }
.reviews__nav button {
  display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid #c9d2c4; border-radius: 50%;
  background: #fff; color: #102c23; cursor: pointer; transition: background-color 180ms ease, border-color 180ms ease;
}
.reviews__nav button:hover:not(:disabled) { background: #102c23; border-color: #102c23; color: #d6f76a; }
.reviews__nav button:disabled { opacity: .38; cursor: default; }
.reviews__prev svg { transform: rotate(180deg); }
.reviews.is-static .reviews__nav button { display: none; }
@media (max-width: 767px) {
  .reviews { grid-template-columns: 1fr; }
  .reviews__list > li { flex-basis: min(84vw, 340px); }
}

/* ==================================================================
   Advice — topics, pills and cards
   ================================================================== */
.advice-topics__title { margin: 0 0 14px; text-transform: uppercase; color: #08734c; }
.topic-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.topic-card {
  display: grid; grid-template-columns: 60px minmax(0, 1fr); grid-template-rows: auto auto; align-items: center; gap: 2px 14px;
  height: 100%; padding: 10px; background: #fff; border: 1px solid #e4e6de; border-radius: 14px; color: #102c23; text-decoration: none;
  transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}
.topic-card:hover { border-color: #b3c3a8; box-shadow: 0 8px 22px rgba(16, 44, 35, .07); transform: translateY(-2px); }
.topic-card.is-current { border-color: #08734c; box-shadow: inset 0 0 0 1px #08734c; }
.topic-card__shot { grid-row: 1 / 3; width: 60px; height: 60px; border-radius: 10px; overflow: hidden; background: #eef0e8; }
.topic-card__shot .picture, .topic-card__shot img { display: block; width: 100%; height: 100%; object-fit: cover; }
.topic-card__name { align-self: end; }
.topic-card__count { align-self: start; color: #536058; }

.pill-nav { display: flex; gap: 8px; margin: 0 0 28px; padding: 0 0 2px; list-style: none; overflow-x: auto; scrollbar-width: none; }
.pill-nav::-webkit-scrollbar { display: none; }
.pill-nav a {
  display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 0 16px; white-space: nowrap;
  background: #fff; border: 1px solid #d8ddd1; border-radius: 999px; color: #102c23; text-decoration: none;
}
.pill-nav a span { color: #7a857c; }
.pill-nav a:hover { border-color: #102c23; }
.pill-nav a.is-current { background: #102c23; border-color: #102c23; color: #fff; }
.pill-nav a.is-current span { color: #d6f76a; }
.advice-lead { margin-bottom: 22px; }

.advice-grid { gap: 18px; }
.advice-grid .artcard, .grid--3 .artcard { background: #fff; border: 1px solid #e4e6de; border-radius: 16px; }
.artcard__shot { aspect-ratio: 3 / 2; }
.artcard__body { padding: 20px 22px 22px; gap: 10px; }
.artcard__dek { color: #536058; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
.artcard .chip { justify-self: start; }
.artcard:hover .artcard__title { text-decoration: none; color: #08734c; }
.artcard__shot img { transition: transform 350ms ease; }
.artcard:hover .artcard__shot img { transform: scale(1.03); }
.artcard--feature { background: #e8eecf; border: 0; border-radius: 18px; }
@media (min-width: 860px) { }
@media (max-width: 599px) {
  .advice-grid { gap: 10px; }
  .advice-grid .artcard { grid-template-rows: none; grid-template-columns: 116px minmax(0, 1fr); border-radius: 14px; }
  .advice-grid .artcard__shot { aspect-ratio: auto; height: 100%; min-height: 116px; }
  .advice-grid .artcard__body { padding: 12px 14px; gap: 6px; align-content: center; }
  .advice-grid .artcard__dek, .advice-grid .artcard .chip { display: none; }
  .topic-cards { grid-template-columns: 1fr 1fr; gap: 8px; }
  .topic-card { grid-template-columns: 44px minmax(0, 1fr); gap: 0 10px; padding: 8px; }
  .topic-card__shot { width: 44px; height: 44px; border-radius: 8px; }
  .pill-nav { margin-inline: calc(-1 * var(--gutter, 18px)); padding-inline: var(--gutter, 18px); margin-bottom: 20px; }
}

/* ==================================================================
   Page photographs in heroes, the FAQ help band, brand SEO section
   ================================================================== */
.hero__media .picture { display: block; }
.hero__media .picture img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 16px; }
@media (max-width: 999px) {
  .hero--compact.hero--has-media .hero__media .picture img { aspect-ratio: 16 / 9; border-radius: 12px; }
}

.help-band__inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: center; }
.help-band__shot .picture, .help-band__shot img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 16px; }
.help-band__copy h2 { margin: 10px 0 12px; color: var(--forest); }
.help-band__copy p:not(.eyebrow) { max-width: 46ch; color: #536058; }
.help-band__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
@media (max-width: 899px) { .help-band__inner { grid-template-columns: 1fr; gap: 22px; } }
@media (max-width: 599px) { .help-band__actions .btn { width: 100%; justify-content: center; } }

.brand-seo__inner { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 56px; align-items: start; }
.brand-seo__copy h2, .brand-seo__faq h2 { margin: 8px 0 14px; color: var(--forest); }
.brand-seo__faq h2 { margin-top: 0; }
.brand-seo__copy p:not(.eyebrow) { max-width: 60ch; color: #536058; }
.brand-seo__copy h3 { margin: 26px 0 12px; color: var(--forest); }
.brand-seo__list { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 20px; margin: 0; padding: 0; list-style: none; }
.brand-seo__list li { display: flex; align-items: center; gap: 10px; }
.brand-seo__list svg { flex: none; color: #08734c; }
.brand-seo__list a { color: var(--forest); text-decoration: none; border-bottom: 1px solid rgba(16, 44, 35, .2); }
.brand-seo__list a:hover { color: #08734c; border-color: #08734c; }
@media (max-width: 899px) { .brand-seo__inner { grid-template-columns: 1fr; gap: 32px; } }
@media (max-width: 599px) { .brand-seo__list { grid-template-columns: 1fr; } }

/* ==================================================================
   Typography pass — one scale, calmer tracking
   ------------------------------------------------------------------
   Page titles were set up to 80px at -0.055em, which crushed letters
   together in long titles such as article headlines. The scale tops
   out lower, tracking opens up, and long headings balance their
   lines instead of leaving one word on its own.
   ================================================================== */
:root { --t-hero-page: clamp(2.35rem, 1.6rem + 3.2vw, 4.25rem); }
h1, h2, h3, .hero__title, .artcard__title, .opener h2 { text-wrap: balance; }
p, li { text-wrap: pretty; }
.hero--editorial .hero__title { max-width: 22ch; }
.prose ul li + li { margin-top: 6px; }
@media (max-width: 599px) {
}

/* Hero photographs: the media column kept a fixed card height from
   the search-card hero, leaving an empty grey block under the photo
   on narrow screens. A photo sizes the column itself. */
.hero__media:has(> .picture) { height: auto; min-height: 0; max-height: none; padding: 0; background: none; border: 0; box-shadow: none; aspect-ratio: auto; }

/* Brand SEO copy: paragraphs need their own rhythm. */
.brand-seo__copy p:not(.eyebrow) + p { margin-top: 12px; }

/* Review cards in the rail are narrow: name and date on one line, the
   Google source underneath rather than squeezing the name to "Noro…". */
.reviews__list .review__foot { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 12px; row-gap: 2px; flex-wrap: wrap; }
.reviews__list .review__avatar { grid-row: 1 / 3; }
.reviews__list .review__who-block { min-width: 0; }
.reviews__list .review__who { white-space: normal; overflow: visible; text-overflow: clip; }
.reviews__list .review__source { grid-column: 2; margin: 0; min-height: 0; justify-self: start; }

/* Page intros were clamped to three lines on phones, cutting article
   and page ledes off mid-sentence. An intro is short and always read
   in full. */
@media (max-width: 599px) {
  .hero__lede { display: block; overflow: visible; -webkit-line-clamp: unset; }
}