/* r2k - one shared inner-page hero robot rule (<=899px): same size and right-column anchor as Home's .hrun.
   Visible robot height = Home .hrun height (96px wide @<=699, 120px @700-899, ratio 1.5625); visible right edge = Home's (31px / 24px). */
@media(max-width:899px){
.hero{--kw:96px;--kr:31px}
html body .hero .ab-hrob.svc-hrob{--kk:1.361;--kv:.75;--kb:.0347}
html body .hero .ab-hrob.svc-hrob[data-hh="ac"]{--kk:1.364;--kv:.772}
html body .hero .ab-hrob.svc-hrob[data-hh="el"]{--kk:1.324;--kv:.735}
html body .hero .ab-hrob.svc-hrob[data-hh-slot="commercial"]{--kk:1.0045;--kv:.86;--kb:.0297}
html body .hero .ab-hrob.svc-hrob[data-hh-slot="services"]{--kk:1;--kv:.964;--kb:.0306}
html body .hero .ab-hrob.svc-hrob.hsc-about{--kk:1.0895;--kv:.7998;--kb:.0506}
html body .hero .ab-hrob.svc-hrob:not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_){--kW:calc(var(--kw)*1.5625*var(--kk));position:absolute!important;left:auto!important;top:auto!important;margin:0!important;transform:none!important;max-width:none!important;height:auto!important;width:var(--kW)!important;right:calc(var(--kr) - (1 - var(--kv))*var(--kW))!important;bottom:calc(100% - var(--kb)*var(--kW))!important;z-index:3!important}
.hero .hc{position:relative}
}
@media(min-width:700px) and (max-width:899px){
.hero{--kw:120px;--kr:24px;position:relative}
.hero .wrap.hc{position:static!important}
html body .hero .ab-hrob.svc-hrob:not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_){bottom:calc(66px - var(--kb)*var(--kW))!important}
}

/* r2k - after-hours block: same mascot treatment as Home's emergency block (Home 118px on phones; ground shadow + soft warm glow), one rule for every page that has the block */
html body #after-hours .h4-ahw .h4-run:not(#_):not(#_):not(#_){position:relative;width:118px;overflow:visible}
/* r2k1: same planted size as Home's emergency runner (min(334px,40vw), 118px on phones) */
@media(min-width:700px){html body #after-hours .h4-ahw .h4-run:not(#_):not(#_):not(#_){width:min(334px,40vw)}}

html body #after-hours .h4-ahw .h4-run:not(#_):not(#_):not(#_)::after{content:"";position:absolute;left:30%;width:54%;top:86.5%;height:7%;border-radius:50%;background:radial-gradient(closest-side,rgba(0,0,0,.6),rgba(0,0,0,.28) 60%,rgba(0,0,0,0) 100%);pointer-events:none}
html body #after-hours .h4-ahw .h4-run:not(#_):not(#_):not(#_)::before{content:"";position:absolute;left:50%;top:50%;width:190%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(closest-side,rgba(254,209,77,.14),rgba(254,209,77,.05) 55%,rgba(254,209,77,0) 100%);pointer-events:none;z-index:-1}
@media(min-width:900px){html body #after-hours .h4-ahw:not(#_):not(#_):not(#_){grid-template-rows:auto auto 1fr}}


/* r2k point 4: About services cards = yellow Call + outlined Book Service (then the Explore link) */
body.t-about #services .sx-card .sx-book{grid-area:book;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;min-height:44px;padding:0 18px;border:2px solid var(--ink);border-radius:999px;background:transparent;color:var(--ink);font-weight:800;font-size:13.5px;line-height:1.1;text-decoration:none;white-space:nowrap;justify-self:stretch;align-self:start;margin:0 0 10px}
@media(max-width:699px){html body.t-about #services .sx-card.on .sx-body{grid-template-areas:"chips chips" "bot ." "bot price" "bot call" "bot book" "bot more" "bot ."!important;grid-template-rows:auto 1fr auto auto auto auto 1fr!important}}
@media(min-width:700px) and (max-width:1023px){html body.t-about #services .sx-card.on .sx-body{grid-template-areas:"chips chips" "bot price" "bot call" "bot book" "bot more"!important;grid-template-rows:auto auto auto auto 1fr!important}}
@media(min-width:1024px){html body.t-about #services .sx-card.on .sx-body{grid-template-areas:"bot chips" "bot price" "bot call" "bot book" "bot more"!important;grid-template-rows:auto auto auto auto 1fr!important}}

/* r2k point 4: About hero at 390 matches the other inner pages (946px) */
@media(max-width:699px){html body.t-about .hero.ab-hero:not(#_){min-height:946px}}

/* r2k point 6: 390 tap targets >=44px with no visual change (invisible hit area on the 36px rating pills) */
@media(max-width:699px){html body a.gpill:not(#_),html body a.bpill:not(#_){position:relative}
html body a.gpill:not(#_)::after,html body a.bpill:not(#_)::after{content:"";position:absolute;left:0;right:0;top:50%;height:44px;min-height:100%;transform:translateY(-50%);background:none;border:0}}

/* r2k point 7: Club block is the same height on every page at phone widths (the intro reserves stepped floor: 6 lines <360, 5 lines <430, 4 lines <760; heading keeps two lines 430-519) */
@media(max-width:759px){html body #club .pp.intro:not(#_){min-height:102.4px}}
@media(min-width:430px) and (max-width:519px){html body #club h2:not(#_){min-height:68.6px}}
@media(max-width:429px){html body #club .pp.intro:not(#_){min-height:128px}}
@media(max-width:359px){html body #club .pp.intro:not(#_){min-height:153.6px}}

/* r2k point 7: Area block height identical on all pages. Stepped line floors (title, intro) + the About sub-line reserved on the other pages */
@media (max-width:329px){html body.t-about:not(.t-svc) #area .intro:not(#_){min-height:calc(5*1.6em)}html body.t-svc #area .intro:not(#_){min-height:calc(5*1.6em + calc(2.6*clamp(16px,1.7vw,21px) + .45*clamp(16px,1.7vw,21px)))}html body.t-svc #area h2:not(#_){min-height:calc(3*1.15em)}html body.t-about:not(.t-svc) #area h2:not(#_){min-height:calc(3*1.15em + calc(2.6*clamp(16px,1.7vw,21px) + .45*clamp(16px,1.7vw,21px)))}}
@media (min-width:330px) and (max-width:369px){html body.t-about:not(.t-svc) #area .intro:not(#_){min-height:calc(5*1.6em)}html body.t-svc #area .intro:not(#_){min-height:calc(5*1.6em + calc(2.6*clamp(16px,1.7vw,21px) + .45*clamp(16px,1.7vw,21px)))}html body.t-svc #area h2:not(#_){min-height:calc(2*1.15em)}html body.t-about:not(.t-svc) #area h2:not(#_){min-height:calc(2*1.15em + calc(2.6*clamp(16px,1.7vw,21px) + .45*clamp(16px,1.7vw,21px)))}}
@media (min-width:370px) and (max-width:499px){html body.t-about:not(.t-svc) #area .intro:not(#_){min-height:calc(4*1.6em)}html body.t-svc #area .intro:not(#_){min-height:calc(4*1.6em + calc(2.6*clamp(16px,1.7vw,21px) + .45*clamp(16px,1.7vw,21px)))}html body.t-svc #area h2:not(#_){min-height:calc(2*1.15em)}html body.t-about:not(.t-svc) #area h2:not(#_){min-height:calc(2*1.15em + calc(2.6*clamp(16px,1.7vw,21px) + .45*clamp(16px,1.7vw,21px)))}}
@media (min-width:500px) and (max-width:509px){html body.t-about:not(.t-svc) #area .intro:not(#_){min-height:calc(4*1.6em)}html body.t-svc #area .intro:not(#_){min-height:calc(4*1.6em + calc(1.3*clamp(16px,1.7vw,21px) + .45*clamp(16px,1.7vw,21px)))}html body.t-svc #area h2:not(#_){min-height:calc(2*1.15em)}html body.t-about:not(.t-svc) #area h2:not(#_){min-height:calc(2*1.15em + calc(1.3*clamp(16px,1.7vw,21px) + .45*clamp(16px,1.7vw,21px)))}}
@media (min-width:510px) and (max-width:609px){html body.t-about:not(.t-svc) #area .intro:not(#_){min-height:calc(3*1.6em)}html body.t-svc #area .intro:not(#_){min-height:calc(3*1.6em + calc(1.3*clamp(16px,1.7vw,21px) + .45*clamp(16px,1.7vw,21px)))}html body.t-svc #area h2:not(#_){min-height:calc(2*1.15em)}html body.t-about:not(.t-svc) #area h2:not(#_){min-height:calc(2*1.15em + calc(1.3*clamp(16px,1.7vw,21px) + .45*clamp(16px,1.7vw,21px)))}}
@media (min-width:610px) and (max-width:659px){html body.t-about:not(.t-svc) #area .intro:not(#_){min-height:calc(3*1.6em)}html body.t-svc #area .intro:not(#_){min-height:calc(3*1.6em + calc(1.3*clamp(16px,1.7vw,21px) + .45*clamp(16px,1.7vw,21px)))}html body.t-svc #area h2:not(#_){min-height:calc(1*1.15em)}html body.t-about:not(.t-svc) #area h2:not(#_){min-height:calc(1*1.15em + calc(1.3*clamp(16px,1.7vw,21px) + .45*clamp(16px,1.7vw,21px)))}}
@media (min-width:660px){html body.t-about:not(.t-svc) #area .intro:not(#_){min-height:calc(2*1.6em)}html body.t-svc #area .intro:not(#_){min-height:calc(2*1.6em + calc(1.3*clamp(16px,1.7vw,21px) + .45*clamp(16px,1.7vw,21px)))}html body.t-svc #area h2:not(#_){min-height:calc(1*1.15em)}html body.t-about:not(.t-svc) #area h2:not(#_){min-height:calc(1*1.15em + calc(1.3*clamp(16px,1.7vw,21px) + .45*clamp(16px,1.7vw,21px)))}}

/* r2k: the warm glow behind the after-hours runner must never create sideways scroll */
html body section#after-hours:not(#_):not(#_){overflow-x:clip}

/* r2k1: robot never covers a person in the hero photo. 700-899: per-page --hp-700 photo position (inline on the picture). r2k3: <=699 uses the unflipped m5 images (assets/m5), no CSS flip */
/* r2k3: contact + specials use the vans-m5 canvas up to 999px; it pans at 700-999, no mask */
@media(min-width:700px) and (max-width:767px){html body[data-svc="contact"] .hbg img:not(#_),html body[data-svc="spec"] .hbg img:not(#_){object-position:30% 50%!important}}
@media(min-width:768px) and (max-width:899px){html body[data-svc="contact"] .hbg img:not(#_),html body[data-svc="spec"] .hbg img:not(#_){object-position:18% 50%!important}}
@media(min-width:900px) and (max-width:999px){html body[data-svc="contact"] .hbg img:not(#_),html body[data-svc="spec"] .hbg img:not(#_){object-position:0% 50%!important}}
/* r2k1: comfort-club compare table fits 320px (no sideways scroll) */@media(max-width:339px){html body[data-svc="club"] .cc-tb th:not(#_),html body[data-svc="club"] .cc-tb td:not(#_){padding-left:10px;padding-right:10px}}
/* r2k1: footer link hit areas fill the row gap (invisible, no layout change); 44px pitch needs visible spacing, see report */@media(min-width:700px){html body .r7fc a:not(#_){position:relative}html body .r7fc a:not(#_)::after{content:"";position:absolute;left:-4px;right:-4px;top:-6px;bottom:-6px}}
/* r2k2: phone footer links fill their column width; last link of each list extends into free space below (no overlap with neighbours) */@media(max-width:699px){html body .r7fc li a:not(#_){width:100%;box-sizing:border-box}html body .r7fc li:last-child a:not(#_){padding-bottom:17px;margin-bottom:-17px}}