/* AV Modern Bathrooms concept theme. One container, one grid, one spacing scale, shared by all three concepts.
   Brand (AV Brand Style Guide v1): Navy #00286F, Gold #CB9F45 (accent), Ivory #F7F3EA, Ink #141B2D, Montserrat.
   Each concept sets the colour tokens in its own <style>; everything below only reads tokens. */

:root{
  --navy:#00286F;--navy-2:#1B2F63;--ink:#141B2D;--gold:#CB9F45;--gold-2:#B18432;--ivory:#F7F3EA;--ivory-2:#EDE8DC;--white:#FFFFFF;
  --font:"Montserrat",system-ui,sans-serif;
  --container:1240px;--gutter:24px;--radius:8px;
  --s1:8px;--s2:16px;--s3:24px;--s4:32px;--s5:48px;--s6:64px;--s7:88px;
  --ease:cubic-bezier(.22,1,.36,1);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--font);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:clip}
h1,h2,h3,h4,p,ul,ol,figure,blockquote,dl,dd{margin:0}
ul[class],ol[class]{padding:0;list-style:none}
img,svg,iframe{display:block;max-width:100%}
[hidden],svg[hidden]{display:none!important}
img{height:auto}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:0;padding:0;cursor:pointer}
a{color:inherit}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
::selection{background:var(--gold);color:var(--ink)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* ---------- layout ---------- */
.container{width:min(100% - 2 * var(--gutter),var(--container));margin-inline:auto}
.section{padding-block:var(--s7)}
.section--alt{background:var(--bg-alt)}
.section--navy{background:var(--navy);color:var(--ivory)}
.section--ink{background:var(--ink);color:var(--ivory)}
.sec-head{max-width:760px;margin:0 auto var(--s5);text-align:center}
.sec-head--left{margin-left:0;text-align:left}
.sec-head--row{max-width:none;display:flex;justify-content:space-between;align-items:flex-end;gap:var(--s3);text-align:left}
.label{display:inline-block;font-size:13px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--label,var(--gold));margin-bottom:12px}
.section--navy .label,.section--ink .label{color:var(--gold)}
.title{font-size:clamp(26px,1.2rem + 1.6vw,40px);font-weight:300;text-transform:uppercase;letter-spacing:.06em;line-height:1.15;color:var(--heading);text-wrap:balance}
.section--navy .title,.section--ink .title{color:var(--ivory)}
.lead{font-size:18px;color:var(--fg-muted);margin-top:14px;text-wrap:pretty}
.section--navy .lead,.section--ink .lead{color:#D9D6CC}
.grid{display:grid;gap:var(--gutter)}
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.split{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s6);align-items:center}
.split--tight{gap:var(--s5)}
@media (max-width:1024px){.grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-3{grid-template-columns:repeat(2,minmax(0,1fr))}.split{gap:var(--s5)}}
@media (max-width:900px){.split{grid-template-columns:1fr;gap:var(--s4)}}
@media (max-width:760px){.section{padding-block:var(--s6)}.sec-head{margin-bottom:var(--s4)}.grid-2,.grid-3,.grid-4{grid-template-columns:1fr}.split{grid-template-columns:1fr;gap:var(--s4)}.sec-head--row{flex-direction:column;align-items:flex-start}}

/* ---------- buttons and links ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:50px;padding:0 26px;border-radius:var(--radius);font-size:16px;font-weight:600;text-decoration:none;white-space:nowrap;border:2px solid transparent;transition:transform .14s var(--ease),background-color .18s ease,color .18s ease,border-color .18s ease}
.btn:active{transform:scale(.97)}
.btn--gold{background:var(--gold);color:var(--ink);border-color:var(--gold)}
.btn--navy{background:var(--navy);color:var(--ivory);border-color:var(--navy)}
.btn--outline{background:transparent;color:currentColor;border-color:currentColor}
.btn--block{width:100%}
.btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
@media (hover:hover) and (pointer:fine){
  .btn--gold:hover{background:var(--gold-2);border-color:var(--gold-2)}
  .btn--navy:hover{background:var(--navy-2);border-color:var(--navy-2)}
  .btn--outline:hover{background:var(--gold);color:var(--ink);border-color:var(--gold)}
}
.more{display:inline-flex;align-items:center;gap:8px;font-weight:600;color:var(--more,var(--navy));text-decoration:underline;text-underline-offset:.2em;text-decoration-thickness:.12em;text-decoration-color:var(--gold)}
.section--navy .more,.section--ink .more{color:var(--gold)}
.more svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s var(--ease)}
@media (hover:hover) and (pointer:fine){.more:hover svg{transform:translateX(4px)}}
.actions{display:flex;flex-wrap:wrap;gap:var(--s2);align-items:center}

/* ---------- top bar and header ---------- */
.topbar{background:var(--ink);color:#D9D6CC;font-size:14px}
.topbar .container{display:flex;justify-content:space-between;align-items:center;min-height:42px;gap:var(--s3)}
.topbar a{text-decoration:none}
.topbar ul{display:flex;gap:var(--s3);flex-wrap:wrap}
.topbar li{display:flex;align-items:center;gap:8px}
.topbar svg{width:15px;height:15px;fill:none;stroke:var(--gold);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
.header{position:sticky;top:0;z-index:40;background:var(--header-bg);color:var(--header-fg);box-shadow:0 1px 0 var(--line)}
.header .container{display:flex;align-items:center;justify-content:space-between;min-height:84px;gap:var(--s3)}
.brand{flex:none}
.brand img{width:clamp(160px,13vw,190px);height:auto}
.nav{display:flex;gap:4px}
.nav a{display:inline-flex;align-items:center;min-height:44px;padding:0 14px;font-size:15px;font-weight:500;text-decoration:none;border-radius:6px;white-space:nowrap;transition:background-color .18s ease}
@media (max-width:1360px){.nav a{padding:0 10px;font-size:14px}}
.nav a.is-active{box-shadow:inset 0 -3px 0 var(--gold)}
@media (hover:hover) and (pointer:fine){.nav a:hover{background:var(--nav-hover)}}
/* supplier logos */
.logos{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--gutter);align-items:center}
.logos li{background:#FFFFFF;border-radius:var(--radius);box-shadow:var(--shadow);min-height:96px;display:grid;place-items:center;padding:18px 24px}
.logos img{max-height:52px;width:auto;object-fit:contain}
.logos b{font-size:18px;font-weight:600;color:#141B2D;letter-spacing:.02em}
@media (max-width:1024px){.logos{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:560px){.logos{grid-template-columns:repeat(2,minmax(0,1fr))}.logos li{min-height:80px}}
/* latest advice */
.post .card__img{aspect-ratio:3/2}
.post__meta{font-size:13px;color:var(--card-muted);font-weight:600;letter-spacing:.06em;text-transform:uppercase}
.header__cta{display:flex;align-items:center;gap:var(--s3)}
.tel{display:inline-flex;align-items:center;gap:10px;font-weight:600;text-decoration:none;white-space:nowrap}
.tel svg{width:20px;height:20px;fill:none;stroke:var(--gold);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.menu-btn{display:none;align-items:center;gap:10px;min-height:44px;padding:0 10px;font-weight:600;font-size:15px}
.menu-btn span{display:block;width:22px;height:2px;background:currentColor;box-shadow:0 7px 0 currentColor,0 -7px 0 currentColor}
.sheet{position:fixed;inset:0;z-index:60;background:var(--header-bg);color:var(--header-fg);display:none;flex-direction:column;padding:96px var(--gutter) 100px;gap:6px;overflow:auto}
.sheet a{text-decoration:none;font-size:22px;font-weight:500;min-height:52px;display:flex;align-items:center;border-bottom:1px solid var(--line)}
.sheet .btn{margin-top:var(--s3);border-bottom:0}
.sheet__close{position:absolute;top:22px;right:var(--gutter);font-weight:600;min-height:44px;padding:0 10px}
.nav-open .sheet{display:flex}
.nav-open{overflow:hidden}
@media (max-width:1300px){.nav{display:none}.menu-btn{display:inline-flex}}
@media (max-width:760px){.topbar{display:none}.header .container{min-height:72px}.header__cta .btn,.header__cta .tel{display:none}}

/* ---------- hero slider ---------- */
.hero{position:relative;height:clamp(560px,82vh,780px);background:var(--ink);color:var(--ivory);overflow:hidden}
.slide{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity 1s ease,visibility 0s linear 1s}
.slide.is-on{opacity:1;visibility:visible;transition:opacity 1s ease}
.slide img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.04);transition:transform 7s linear}
.slide.is-on img{transform:scale(1)}
.slide::after{content:"";position:absolute;inset:0;background:rgba(20,27,45,.58)}
.slide .container{position:relative;z-index:2;height:100%;display:grid;align-content:center;padding-bottom:120px}
.hero--centre .slide .container{text-align:center;justify-items:center}
.hero__label{display:inline-block;font-size:14px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin-bottom:var(--s2)}
.hero h1,.hero .h1{font-size:clamp(32px,1.4rem + 3vw,60px);font-weight:300;text-transform:uppercase;letter-spacing:.06em;line-height:1.12;max-width:21ch;text-wrap:balance}
.hero p{margin-top:var(--s3);font-size:clamp(17px,1rem + .4vw,20px);max-width:58ch;color:#E8E4DA;text-wrap:pretty}
.hero .actions{margin-top:var(--s4)}
.hero--centre .hero .actions{justify-content:center}
.hero__ctrl{position:absolute;left:0;right:0;bottom:100px;z-index:3}
.hero__ctrl .container{display:flex;justify-content:space-between;align-items:center}
.dots{display:flex;gap:10px}
.dots button{width:36px;height:4px;border-radius:2px;background:rgba(247,243,234,.4);transition:background-color .2s ease}
.dots button[aria-selected="true"]{background:var(--gold)}
.arrows{display:flex;gap:10px}
.arrows button{width:46px;height:46px;border-radius:50%;border:2px solid rgba(247,243,234,.5);display:grid;place-items:center;color:var(--ivory);transition:background-color .18s ease,border-color .18s ease,color .18s ease}
.arrows svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
@media (hover:hover) and (pointer:fine){.arrows button:hover{background:var(--gold);border-color:var(--gold);color:var(--ink)}}
@media (max-width:760px){
  .hero{display:grid;height:auto;min-height:620px}
  .slide{position:relative;inset:auto;grid-area:1/1;height:auto}
  .slide .container{height:auto;padding:56px 0 calc(var(--ctrl-h,60px) + 110px)}
  .hero h1,.hero .h1{font-size:6.5vw;letter-spacing:.03em;max-width:none}
  .hero .actions .btn{flex:1 1 100%}
  .hero__ctrl{bottom:92px}
  .arrows{display:none}
}

/* ---------- counters card over the hero ---------- */
.stats{position:relative;z-index:4;margin-top:-72px}
.stats__card{background:var(--card-bg);color:var(--card-fg);border-radius:var(--radius);box-shadow:var(--shadow);display:grid;grid-template-columns:repeat(4,minmax(0,1fr));padding:var(--s4) var(--s3)}
.stat{text-align:center;padding:var(--s1) var(--s2);border-left:1px solid var(--line)}
.stat:first-child{border-left:0}
.stat b{display:block;font-size:clamp(34px,1.6rem + 1.6vw,48px);font-weight:300;line-height:1;color:var(--gold);font-variant-numeric:tabular-nums}
.stat span{display:block;margin-top:10px;font-size:15px;font-weight:500;color:var(--card-muted)}
@media (max-width:760px){.stats{margin-top:-56px}.stats__card{grid-template-columns:1fr 1fr;padding:var(--s3) var(--s2);row-gap:var(--s3)}.stat:nth-child(3){border-left:0}}

/* ---------- cards ---------- */
.card{background:var(--card-bg);color:var(--card-fg);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);display:flex;flex-direction:column;height:100%;text-decoration:none;transition:transform .25s var(--ease),box-shadow .25s ease}
.card__img{aspect-ratio:4/3;width:100%;object-fit:cover;transition:transform .6s var(--ease)}
.card__media{overflow:hidden}
.card__body{padding:var(--s3);display:flex;flex-direction:column;gap:10px;flex:1}
.card h3{font-size:20px;font-weight:600;line-height:1.3;color:var(--card-fg)}
.card p{color:var(--card-muted);font-size:16px;text-wrap:pretty}
.card .more{margin-top:auto;padding-top:6px}
@media (hover:hover) and (pointer:fine){a.card:hover{transform:translateY(-4px);box-shadow:var(--shadow-hover)}a.card:hover .card__img{transform:scale(1.04)}}
.price{display:inline-block;background:var(--gold);color:var(--ink);font-weight:600;padding:0 .35em;border-radius:3px;white-space:nowrap}

/* ---------- about ---------- */
.about__img{position:relative}
.about__img img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:var(--radius)}
.about__badge{position:absolute;left:var(--s3);bottom:var(--s3);background:var(--gold);color:var(--ink);border-radius:var(--radius);padding:18px 22px;line-height:1.2}
.about__badge b{display:block;font-size:34px;font-weight:300}
.about__badge span{font-size:14px;font-weight:600}
.checks{display:grid;gap:14px;margin-top:var(--s3)}
.checks li{display:flex;gap:14px;align-items:flex-start;font-weight:500}
.checks svg{flex:none;width:26px;height:26px;border-radius:50%;background:var(--gold);padding:6px;fill:none;stroke:var(--ink);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.checks small{display:block;font-weight:400;color:var(--fg-muted);font-size:15px;margin-top:2px}
.section--navy .checks small,.section--ink .checks small{color:#D9D6CC}
.about .actions{margin-top:var(--s4)}

/* ---------- steps ---------- */
.steps{counter-reset:step}
.step{position:relative;background:var(--card-bg);color:var(--card-fg);border-radius:var(--radius);box-shadow:var(--shadow);padding:var(--s4) var(--s3) var(--s3)}
.step__num{width:56px;height:56px;border-radius:50%;background:var(--gold);color:var(--ink);display:grid;place-items:center;font-size:20px;font-weight:600;margin-bottom:var(--s3)}
.step h3{font-size:20px;font-weight:600;line-height:1.3}
.step p{margin-top:10px;color:var(--card-muted);font-size:16px}

/* ---------- gallery with filters and lightbox ---------- */
.filters{display:flex;justify-content:center;flex-wrap:wrap;gap:8px;margin-bottom:var(--s4)}
.filters button{min-height:42px;padding:0 18px;border-radius:999px;border:2px solid var(--line);font-weight:600;font-size:15px;color:var(--fg);transition:background-color .18s ease,color .18s ease,border-color .18s ease}
.filters button[aria-pressed="true"]{background:var(--gold);border-color:var(--gold);color:var(--ink)}
@media (hover:hover) and (pointer:fine){.filters button:hover{border-color:var(--gold)}}
.gal{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s2)}
.tile{position:relative;display:block;aspect-ratio:4/3;overflow:hidden;border-radius:var(--radius);background:var(--navy-2);text-align:left}
.tile img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.tile__cap{position:absolute;left:0;right:0;bottom:0;padding:14px 18px;background:rgba(20,27,45,.82);color:var(--ivory);transition:background-color .3s ease}
.tile__cap b{display:block;font-size:16px;font-weight:600}
.tile__cap span{font-size:13px;color:var(--gold);font-weight:600;letter-spacing:.08em;text-transform:uppercase}
.tile.is-hidden{display:none}
@media (hover:hover) and (pointer:fine){.tile:hover img{transform:scale(1.06)}.tile:hover .tile__cap{background:var(--navy)}}
@media (max-width:1024px){.gal{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.gal{grid-template-columns:1fr}}
.lightbox{border:0;padding:0;background:transparent;max-width:min(96vw,1200px);width:100%}
.lightbox::backdrop{background:rgba(10,14,26,.9)}
.lightbox figure{position:relative;margin:0}
.lightbox img{width:100%;max-height:82vh;object-fit:contain;border-radius:var(--radius);background:#000}
.lightbox figcaption{color:var(--ivory);text-align:center;margin-top:12px;font-size:16px}
.lightbox__close,.lightbox__prev,.lightbox__next{position:absolute;width:48px;height:48px;border-radius:50%;background:rgba(247,243,234,.14);color:var(--ivory);display:grid;place-items:center}
.lightbox__close{top:-56px;right:0}
.lightbox__prev{left:12px;top:50%;transform:translateY(-50%)}
.lightbox__next{right:12px;top:50%;transform:translateY(-50%)}
.lightbox svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* ---------- showroom and 360 tour ---------- */
.tour{position:relative;aspect-ratio:16/10;border-radius:var(--radius);overflow:hidden;background:var(--ink)}
.tour img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:brightness(.7)}
.tour iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.tour__load{position:absolute;inset:0;display:grid;place-items:center;color:var(--ivory);text-align:center;padding:var(--s3)}
.tour__load .btn{font-size:17px}
.tour__load small{display:block;margin-top:12px;font-size:14px;color:#D9D6CC}
.hours{display:grid;grid-template-columns:auto 1fr;gap:8px 24px;margin-top:var(--s3);font-variant-numeric:tabular-nums}
.hours dt{font-weight:600}
.showroom .actions{margin-top:var(--s4)}

/* ---------- testimonials carousel ---------- */
.carousel{position:relative}
.carousel__view{overflow:hidden}
.carousel__track{display:flex;gap:var(--gutter);transition:transform .6s var(--ease)}
.review{flex:0 0 calc((100% - 2 * var(--gutter)) / 3);background:var(--card-bg);color:var(--card-fg);border-radius:var(--radius);box-shadow:var(--shadow);padding:var(--s4) var(--s3);display:flex;flex-direction:column;gap:14px}
.review__stars{width:112px;height:20px;fill:var(--gold)}
.review blockquote{font-size:16px;line-height:1.6;color:var(--card-fg);flex:1;text-wrap:pretty}
.review footer{display:flex;align-items:center;gap:12px}
.review__who{width:44px;height:44px;border-radius:50%;background:var(--navy);color:var(--ivory);display:grid;place-items:center;font-weight:600}
.review footer b{display:block;font-size:15px}
.review footer span{display:block;font-size:13px;color:var(--card-muted)}
.carousel__nav{display:flex;justify-content:center;align-items:center;gap:var(--s3);margin-top:var(--s4)}
.carousel__nav .arrows button{border-color:var(--line);color:var(--fg)}
.section--navy .carousel__nav .arrows button,.section--ink .carousel__nav .arrows button{color:var(--ivory);border-color:rgba(247,243,234,.4)}
.carousel__nav .dots button{background:var(--line)}
.carousel__nav .dots button[aria-selected="true"]{background:var(--gold)}
@media (max-width:1024px){.review{flex-basis:calc((100% - var(--gutter)) / 2)}}
@media (max-width:640px){.review{flex-basis:100%}}

/* ---------- faq ---------- */
.faq{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s2) var(--gutter);align-items:start}
.faq details{background:var(--card-bg);color:var(--card-fg);border-radius:var(--radius);box-shadow:var(--shadow);padding:0 var(--s3)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:var(--s2);min-height:64px;padding:14px 0;font-weight:600;font-size:17px}
.faq summary::-webkit-details-marker{display:none}
.faq summary svg{flex:none;width:28px;height:28px;border-radius:50%;background:var(--gold);padding:7px;fill:none;stroke:var(--ink);stroke-width:2.5;stroke-linecap:round;transition:transform .25s var(--ease)}
.faq details[open] summary svg{transform:rotate(45deg)}
.faq details p{padding:0 0 var(--s3);color:var(--card-muted);font-size:16px}
.faq__note{margin-top:var(--s4);text-align:center;font-size:14px;color:var(--fg-muted);max-width:78ch;margin-left:auto;margin-right:auto}
@media (max-width:860px){.faq{grid-template-columns:1fr}}

/* ---------- call to action with form ---------- */
.cta .split{align-items:start}
.form{background:var(--card-bg);color:var(--card-fg);border-radius:var(--radius);box-shadow:var(--shadow);padding:var(--s4);display:grid;gap:var(--s2)}
.form h3,.form h2{font-size:22px;font-weight:600;text-transform:none;letter-spacing:0;line-height:1.3}
.form .row{display:grid;grid-template-columns:1fr 1fr;gap:var(--s2)}
.field{display:grid;gap:6px;font-size:14px;font-weight:600}
.field input,.field textarea,.field select{width:100%;min-height:50px;padding:12px 14px;border-radius:6px;border:1px solid var(--line);background:var(--input-bg);color:var(--input-fg);font-weight:400;font-size:16px}
.field textarea{min-height:110px;resize:vertical}
.field input:focus,.field textarea:focus{outline:2px solid var(--gold);outline-offset:0;border-color:var(--gold)}
.form small{font-size:13px;color:var(--card-muted)}
@media (max-width:560px){.form .row{grid-template-columns:1fr}}

/* ---------- footer ---------- */
.footer{background:var(--footer-bg);color:#D9D6CC;font-size:15px}
.footer__top{padding-block:var(--s6) var(--s5);display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:var(--s5) var(--gutter)}
.footer h4{color:var(--ivory);font-size:16px;font-weight:600;margin-bottom:var(--s2)}
.footer a{text-decoration:none}
.footer ul{display:grid;gap:10px}
.footer address{font-style:normal;line-height:1.7}
.footer__logo{width:200px;margin-bottom:var(--s3)}
.footer__bottom{border-top:1px solid rgba(247,243,234,.12);padding-block:var(--s3);display:flex;justify-content:space-between;gap:var(--s2);flex-wrap:wrap;font-size:14px}
@media (hover:hover) and (pointer:fine){.footer a:hover{color:var(--gold)}}
@media (max-width:1024px){.footer__top{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.footer__top{grid-template-columns:1fr}}

/* ---------- mobile action bar and back to top ---------- */
.actbar{display:none}
.totop{position:fixed;right:20px;bottom:20px;z-index:35;width:48px;height:48px;border-radius:50%;background:var(--gold);color:var(--ink);display:grid;place-items:center;opacity:0;pointer-events:none;transition:opacity .25s ease;box-shadow:0 8px 20px rgba(0,0,0,.25)}
.totop.is-on{opacity:1;pointer-events:auto}
.totop svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
@media (max-width:760px){
  body{padding-bottom:64px}
  .totop{bottom:80px}
  .actbar{position:fixed;left:0;right:0;bottom:0;z-index:50;display:grid;grid-template-columns:1fr 1fr;box-shadow:0 -4px 20px rgba(0,0,0,.2)}
  .actbar a{display:flex;align-items:center;justify-content:center;gap:8px;min-height:64px;font-weight:600;text-decoration:none;font-size:15px;padding:0 12px}
  .actbar a:first-child{background:var(--navy);color:var(--ivory)}
  .actbar a:last-child{background:var(--gold);color:var(--ink)}
  .actbar svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
}

/* ---------- concept-specific section components ---------- */
/* inline stats band (concept 2) */
.statsband{background:var(--navy);color:var(--ivory)}
.statsband .container{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--gutter);padding-block:var(--s4)}
.statsband b{display:block;font-size:clamp(32px,1.5rem + 1.4vw,44px);font-weight:300;line-height:1;color:var(--gold);font-variant-numeric:tabular-nums}
.statsband span{display:block;margin-top:8px;font-size:15px;font-weight:500;color:#D9D6CC}
@media (max-width:760px){.statsband .container{grid-template-columns:1fr 1fr;row-gap:var(--s3)}}
/* photo collage (concept 2 about) */
.collage{display:grid;grid-template-columns:1.2fr 1fr;gap:var(--s2);align-items:end}
.collage img{width:100%;object-fit:cover;border-radius:var(--radius)}
.collage img:first-child{aspect-ratio:4/5}
.collage img:last-child{aspect-ratio:1;margin-bottom:var(--s6)}
/* zigzag service rows (concept 2) */
.zig{display:grid;gap:var(--s6)}
.zig__row{display:grid;grid-template-columns:1fr 1fr;gap:var(--s6);align-items:center}
.zig__row:nth-child(even) .zig__media{order:2}
.zig__media img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--radius)}
.zig__body h3{font-size:clamp(22px,1.1rem + 1vw,28px);margin-bottom:12px}
.zig__body p{color:var(--fg-muted)}
.zig__body .checks{margin-top:var(--s2);gap:10px}
.zig__body .actions{margin-top:var(--s3)}
@media (max-width:900px){.zig__row{grid-template-columns:1fr;gap:var(--s3)}.zig__row:nth-child(even) .zig__media{order:0}.zig{gap:var(--s5)}}
/* horizontal timeline (concept 2 process) */
.timeline{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--gutter);position:relative;padding-top:12px}
.timeline::before{content:"";position:absolute;left:calc(12.5% + 28px);right:calc(12.5% + 28px);top:40px;height:4px;background:var(--gold);border-radius:2px}
.tl{text-align:center;padding:0 var(--s2)}
.tl__num{width:56px;height:56px;border-radius:50%;background:var(--gold);color:var(--ink);display:grid;place-items:center;font-size:20px;font-weight:600;margin:0 auto var(--s3);position:relative;box-shadow:0 0 0 8px var(--bg)}
.section--alt .tl__num{box-shadow:0 0 0 8px var(--bg-alt)}
.tl h3{font-size:19px;margin-bottom:8px}
.tl p{color:var(--fg-muted);font-size:16px}
@media (max-width:900px){.timeline{grid-template-columns:1fr 1fr;row-gap:var(--s4)}.timeline::before{display:none}}
@media (max-width:560px){.timeline{grid-template-columns:1fr}}
/* masonry gallery (concept 2 work) */
.masonry{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:220px;gap:var(--s2)}
.masonry .tile{aspect-ratio:auto;height:100%}
.masonry .tile:first-child{grid-column:span 2;grid-row:span 2}
@media (max-width:900px){.masonry{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:200px}}
@media (max-width:560px){.masonry{grid-template-columns:1fr;grid-auto-rows:240px}.masonry .tile:first-child{grid-column:span 1;grid-row:span 1}}
/* big quote slider (concept 2 reviews) */
.bigquote .carousel__track>*{flex:0 0 100%}
.bq{text-align:center;padding:0 max(var(--s2),calc((100% - 820px) / 2))}
.bq .review__stars{margin:0 auto var(--s3)}
.bq blockquote{font-size:clamp(20px,1.1rem + 1vw,28px);line-height:1.45;font-weight:400;text-wrap:pretty}
.bq footer{display:flex;justify-content:center;align-items:center;gap:14px;margin-top:var(--s3)}
.bq footer b{display:block}
.bq footer span{display:block;font-size:14px;color:var(--fg-muted)}
.section--navy .bq footer span,.section--ink .bq footer span{color:#D9D6CC}
/* open two-column questions (concept 2) */
.qa-open{display:grid;grid-template-columns:1fr 1fr;gap:var(--s4) var(--s6)}
.qa-open h3{font-size:19px;margin-bottom:8px;display:flex;gap:12px;align-items:flex-start}
.qa-open h3 svg{flex:none;width:26px;height:26px;border-radius:50%;background:var(--gold);padding:6px;fill:none;stroke:var(--ink);stroke-width:3;stroke-linecap:round;stroke-linejoin:round;margin-top:1px}
.qa-open p{color:var(--fg-muted);font-size:16px;padding-left:38px}
@media (max-width:760px){.qa-open{grid-template-columns:1fr;gap:var(--s3)}}
/* badges row (concept 3) */
.badges{position:relative;z-index:4;margin-top:-40px}
.badges ul{background:var(--card-bg);color:var(--card-fg);border-radius:var(--radius);box-shadow:var(--shadow);display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s2);padding:var(--s3)}
.badges li{display:flex;align-items:center;gap:12px;font-weight:600;font-size:15px;padding:6px var(--s2);border-left:1px solid var(--line)}
.badges li:first-child{border-left:0}
.badges svg{flex:none;width:40px;height:40px;border-radius:50%;background:var(--gold);padding:10px;fill:none;stroke:var(--ink);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
@media (max-width:900px){.badges ul{grid-template-columns:1fr 1fr}.badges li:nth-child(3){border-left:0}}
@media (max-width:560px){.badges ul{grid-template-columns:1fr}.badges li{border-left:0}}
/* service tabs (concept 3) */
.tabs__bar{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-bottom:var(--s4)}
.tabs__bar button{min-height:48px;padding:0 22px;border-radius:var(--radius);border:2px solid var(--line);font-weight:600;font-size:15px;color:var(--fg);background:var(--card-bg);transition:background-color .18s ease,color .18s ease,border-color .18s ease}
.tabs__bar button[aria-selected="true"]{background:var(--navy);border-color:var(--navy);color:var(--ivory)}
.tabs__panel{display:none;grid-template-columns:1fr 1fr;gap:var(--s6);align-items:center;background:var(--card-bg);color:var(--card-fg);border-radius:var(--radius);box-shadow:var(--shadow);padding:var(--s4)}
.tabs__panel.is-on{display:grid}
.tabs__panel img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--radius)}
.tabs__panel h3{font-size:clamp(22px,1.1rem + 1vw,28px);margin-bottom:12px}
.tabs__panel p{color:var(--card-muted)}
.tabs__panel .checks{margin-top:var(--s2);gap:10px}
.tabs__panel .actions{margin-top:var(--s3)}
@media (max-width:900px){.tabs__panel{grid-template-columns:1fr;gap:var(--s3);padding:var(--s3)}}
/* vertical stepper (concept 3 process) */
.stepper{display:grid;gap:var(--s4);position:relative;max-width:980px;margin:0 auto}
.stepper::before{content:"";position:absolute;left:27px;top:28px;bottom:28px;width:4px;background:var(--gold);border-radius:2px}
.sv{display:grid;grid-template-columns:56px minmax(0,1fr) 240px;gap:var(--s3);align-items:center}
.sv__num{width:56px;height:56px;border-radius:50%;background:var(--gold);color:var(--ink);display:grid;place-items:center;font-size:20px;font-weight:600;position:relative;z-index:1;box-shadow:0 0 0 8px var(--bg)}
.section--alt .sv__num{box-shadow:0 0 0 8px var(--bg-alt)}
.section--navy .sv__num{box-shadow:0 0 0 8px var(--navy)}
.sv h3{font-size:20px;margin-bottom:6px}
.sv p{color:var(--fg-muted);font-size:16px}
.section--navy .sv p{color:#D9D6CC}
.sv img{width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:var(--radius)}
@media (max-width:760px){.sv{grid-template-columns:56px minmax(0,1fr)}.sv img{display:none}}
/* room scroller (concept 3 work): uses .carousel */
.room{flex:0 0 calc((100% - 2 * var(--gutter)) / 3);display:block;text-align:left;border-radius:var(--radius);overflow:hidden;background:var(--card-bg);color:var(--card-fg);box-shadow:var(--shadow)}
.room img{width:100%;aspect-ratio:4/3;object-fit:cover}
.room div{padding:16px 18px}
.room b{display:block;font-size:17px}
.room span{font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--label,var(--gold))}
@media (max-width:1024px){.room{flex-basis:calc((100% - var(--gutter)) / 2)}}
@media (max-width:640px){.room{flex-basis:100%}}
/* area tiles (concept 3) and area lists */
.areas-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s2)}
.area{position:relative;display:block;aspect-ratio:4/3;border-radius:var(--radius);overflow:hidden;text-decoration:none;color:var(--ivory);background:var(--navy)}
.area img{width:100%;height:100%;object-fit:cover;filter:brightness(.55);transition:transform .6s var(--ease),filter .3s ease}
.area div{position:absolute;left:0;right:0;bottom:0;padding:18px 20px}
.area b{display:block;font-size:22px;font-weight:300;text-transform:uppercase;letter-spacing:.06em}
.area span{display:block;font-size:14px;color:#E8E4DA;margin-top:4px}
.area--all{display:grid;place-items:center;text-align:center;padding:var(--s3);background:var(--gold);color:var(--ink)}
.area--all b{font-weight:600;text-transform:none;letter-spacing:0;font-size:20px}
.area--all div{position:static;padding:0}.area--all span{color:var(--ink)}
@media (hover:hover) and (pointer:fine){.area:hover img{transform:scale(1.05);filter:brightness(.7)}}
@media (max-width:900px){.areas-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.area b{font-size:17px}.area div{padding:12px 14px}.area span{font-size:13px}}
.area-list{display:grid;grid-template-columns:1fr 1fr;gap:0 var(--s4)}
.area-list a{display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:52px;text-decoration:none;font-weight:500;border-bottom:1px solid var(--line)}
.area-list svg{width:16px;height:16px;flex:none;fill:none;stroke:var(--gold);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
@media (max-width:560px){.area-list{grid-template-columns:1fr}}
.map{aspect-ratio:4/3;border-radius:var(--radius);overflow:hidden;background:var(--surface,var(--card-bg))}
.map iframe{width:100%;height:100%;border:0;display:block}
/* quote grid with summary (concept 3 reviews) */
.quotegrid{display:grid;grid-template-columns:1fr 2fr;gap:var(--gutter);align-items:start}
.quotegrid__sum{background:var(--navy);color:var(--ivory);border-radius:var(--radius);padding:var(--s4);display:grid;gap:var(--s2)}
.quotegrid__sum b{font-size:clamp(40px,2rem + 1.6vw,56px);font-weight:300;line-height:1;color:var(--gold)}
.quotegrid__sum p{color:#D9D6CC}
.quotegrid__sum .btn{margin-top:var(--s2)}
.quotegrid__cards{display:grid;grid-template-columns:1fr 1fr;gap:var(--gutter)}
.quotegrid__cards .review{flex:none}
@media (max-width:900px){.quotegrid{grid-template-columns:1fr}.quotegrid__cards{grid-template-columns:1fr}}

/* ---------- inner pages: banner, layout with sidebar, callouts ---------- */
.banner{position:relative;background:var(--ink);color:var(--ivory);overflow:hidden}
.banner img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.banner::after{content:"";position:absolute;inset:0;background:rgba(20,27,45,.62)}
.banner .container{position:relative;z-index:2;padding:var(--s6) 0 var(--s7)}
.crumbs{display:flex;flex-wrap:wrap;gap:8px;font-size:14px;color:#D9D6CC;margin-bottom:var(--s3)}
.crumbs a{text-decoration:none}
.crumbs li+li::before{content:"/";margin-right:8px;color:var(--gold)}
.banner h1{font-size:clamp(30px,1.3rem + 2.4vw,52px);font-weight:300;text-transform:uppercase;letter-spacing:.06em;line-height:1.12;max-width:22ch;text-wrap:balance}
.banner p{margin-top:var(--s3);font-size:clamp(17px,1rem + .3vw,19px);max-width:62ch;color:#E8E4DA}
.banner .actions{margin-top:var(--s4)}
.factsbar{position:relative;z-index:4;margin-top:-56px}
.factsbar__card{background:var(--card-bg);color:var(--card-fg);border-radius:var(--radius);box-shadow:var(--shadow);display:grid;grid-template-columns:repeat(4,minmax(0,1fr));padding:var(--s3)}
.factsbar__card div{padding:8px var(--s2);border-left:1px solid var(--line)}
.factsbar__card div:first-child{border-left:0}
.factsbar__card small{display:block;font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--label,var(--gold));margin-bottom:4px}
.factsbar__card b{font-size:17px;font-weight:600}
@media (max-width:760px){.factsbar{margin-top:-40px}.factsbar__card{grid-template-columns:1fr 1fr;row-gap:var(--s2)}.factsbar__card div:nth-child(3){border-left:0}}
.layout{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:var(--s6);align-items:start}
.layout__main>*+*{margin-top:var(--s6)}
.layout h2.title{font-size:clamp(24px,1.1rem + 1.2vw,32px);margin-bottom:var(--s3)}
.layout p+p{margin-top:1em}
.prose p{color:var(--fg);text-wrap:pretty}
.prose a{color:inherit;text-decoration:underline;text-decoration-color:var(--gold);text-underline-offset:.2em;text-decoration-thickness:.1em}
.checks--two{grid-template-columns:1fr 1fr;margin-top:var(--s3)}
.figure img{width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:var(--radius)}
.figure figcaption{margin-top:10px;font-size:14px;color:var(--fg-muted)}
.callout{background:var(--card-bg);color:var(--card-fg);border-radius:var(--radius);box-shadow:var(--shadow);padding:var(--s4)}
.callout h3{font-size:20px;margin-bottom:10px;color:var(--label,var(--gold))}
.callout p{color:var(--card-muted);font-size:16px}
.side{position:sticky;top:104px;display:grid;gap:var(--s3)}
.side__card{background:var(--card-bg);color:var(--card-fg);border-radius:var(--radius);box-shadow:var(--shadow);padding:var(--s3)}
.side__card h3{font-size:18px;margin-bottom:var(--s2)}
.side__list{display:grid}
.side__list a{display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:48px;padding:0 4px;text-decoration:none;font-weight:500;border-top:1px solid var(--line)}
.side__list a:first-child{border-top:0}
.side__list a.is-current{color:var(--label,var(--gold));font-weight:600}
.side__list svg{width:16px;height:16px;flex:none;fill:none;stroke:var(--gold);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.side__card .tel{font-size:20px;margin:6px 0 10px}
.side__card address{font-style:normal;color:var(--card-muted);font-size:15px;line-height:1.6}
.side__card .btn{margin-top:var(--s2)}
.side__card--navy{background:var(--navy);color:var(--ivory)}
.side__card--navy h3{color:var(--ivory)}
.side__card--navy p,.side__card--navy address{color:#D9D6CC;font-size:15px}
.side__card--navy .tel{color:var(--ivory)}
.side .form{padding:var(--s3)}
.photo-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s2)}
.photo-grid .tile:first-child{grid-column:1/-1;aspect-ratio:16/9}
.finds{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gutter)}
.find{background:var(--card-bg);color:var(--card-fg);border-radius:var(--radius);box-shadow:var(--shadow);padding:var(--s3)}
.find h3{font-size:18px;margin-bottom:8px}
.find p{color:var(--card-muted);font-size:15px}
@media (max-width:1024px){.layout{grid-template-columns:1fr}.side{position:static}.finds{grid-template-columns:1fr}.photo-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:760px){.banner .container{padding:var(--s5) 0 var(--s6)}.banner h1{font-size:6.5vw;letter-spacing:.03em;max-width:none}.checks--two{grid-template-columns:1fr}.layout__main>*+*{margin-top:var(--s5)}}

/* ---------- reveal ---------- */
@media (prefers-reduced-motion:no-preference){
  .js [data-reveal]{opacity:0;transform:translateY(20px);transition:opacity .7s var(--ease),transform .8s var(--ease);transition-delay:calc(var(--i,0) * 80ms)}
  .js [data-reveal].is-in{opacity:1;transform:none}
  .js .slide.is-on.is-anim .hero__label,.js .slide.is-on.is-anim h1,.js .slide.is-on.is-anim .h1,.js .slide.is-on.is-anim p,.js .slide.is-on.is-anim .actions{animation:rise .8s var(--ease) both}
  .js .slide.is-on.is-anim h1,.js .slide.is-on.is-anim .h1{animation-delay:.1s}.js .slide.is-on.is-anim p{animation-delay:.2s}.js .slide.is-on.is-anim .actions{animation-delay:.3s}
}
@keyframes rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}

/* ---------- quote-first hero (concept 3 home and inner pages) ---------- */
.hero--quote{height:auto;min-height:0}
.hero--quote .slide{position:relative;opacity:1;visibility:visible}
.hero--quote .slide .container{height:auto;padding:var(--s7) 0 calc(var(--s7) + 40px);display:grid;grid-template-columns:1.1fr .9fr;gap:var(--s6);align-items:center}
.hero--quote .form{color:var(--ink)}
.hero--quote .form small{color:var(--fg-muted)}
.hero__facts{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s4);margin-top:var(--s4);font-weight:500;font-size:15px}
.hero__facts li{display:flex;align-items:center;gap:8px}
.hero__facts svg{width:22px;height:22px;border-radius:50%;background:var(--gold);padding:5px;fill:none;stroke:var(--ink);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.section--navy .step,.section--navy .review{--card-bg:#FFFFFF;--card-fg:#141B2D;--card-muted:#4A4E5B}
@media (max-width:1024px){.hero--quote .slide .container{grid-template-columns:1fr;gap:var(--s4)}}
@media (max-width:760px){.hero--quote .slide .container{padding:56px 0 88px}}

/* ---------- areas we cover: regional dot map with the coverage filled by postcode area, index, county list, chips, search, checker, tiles ---------- */
.dotmap{position:relative;background:var(--card-bg);color:var(--card-fg);border-radius:var(--radius);box-shadow:var(--shadow);padding:var(--s2)}
.dotmap svg{display:block;width:100%;height:auto;overflow:visible;font-family:inherit}
.dotmap .area circle{fill:var(--dot,rgba(0,40,111,.14));transition:opacity .25s ease}
.dotmap .area.t2 circle{fill:var(--navy);opacity:.32}
.dotmap .area.t1 circle{fill:var(--gold)}
.dotmap.is-filtered .area.t1:not(.is-on) circle,.dotmap.is-filtered .area.t2:not(.is-on) circle{opacity:.16}
.theme-dark .dotmap{--dot:rgba(247,243,234,.16)}
.theme-dark .dotmap .area.t2 circle{fill:var(--ivory);opacity:.4}
.dotmap .lbl{font-weight:700;font-size:calc(13px * var(--s,1));letter-spacing:.04em;fill:var(--navy);paint-order:stroke;stroke:var(--card-bg);stroke-width:calc(4px * var(--s,1));stroke-linejoin:round;text-anchor:middle;dominant-baseline:central;cursor:pointer;outline:none;transition:opacity .25s ease}
.dotmap .lbl.t2{font-weight:600}
.dotmap .lbl.is-on,.dotmap .lbl:hover,.dotmap .lbl:focus-visible{stroke:var(--gold)}
.dotmap.is-filtered .lbl:not(.is-on){opacity:.45}
.theme-dark .dotmap .lbl{fill:var(--ivory)}
.theme-dark .dotmap .lbl.is-on,.theme-dark .dotmap .lbl:hover,.theme-dark .dotmap .lbl:focus-visible{fill:var(--gold);stroke:var(--card-bg)}
.dotmap .pin{outline:none;cursor:pointer}
.dotmap .pin circle{fill:var(--gold);stroke:var(--card-bg);stroke-width:calc(1.6px * var(--s,1));r:calc(3.4px * var(--s,1));transition:transform .2s ease,opacity .2s ease;transform-box:fill-box;transform-origin:center}
.dotmap .pin.t2 circle{fill:var(--card-bg);stroke:var(--navy);stroke-width:calc(2px * var(--s,1))}
.theme-dark .dotmap .pin.t2 circle{stroke:var(--ivory)}
.dotmap .pin.is-dim{opacity:.25}
.dotmap .pin.is-hot circle,.dotmap .pin:hover circle,.dotmap .pin:focus-visible circle{transform:scale(1.8)}
.dotmap .home{outline:none}
.dotmap .home circle{fill:var(--navy);stroke:var(--gold);stroke-width:calc(2.5px * var(--s,1));r:calc(5px * var(--s,1))}
.theme-dark .dotmap .home circle{fill:var(--gold);stroke:var(--ink)}
.dotmap .note{font-size:calc(13px * var(--s,1));font-style:italic;font-weight:500;letter-spacing:.1em;fill:var(--card-muted);text-anchor:middle;pointer-events:none}
.dotmap .scale line{stroke:var(--card-muted);stroke-width:calc(1.5px * var(--s,1))}
.dotmap .scale text{font-size:calc(13px * var(--s,1));font-weight:500;fill:var(--card-muted)}
.dotmap .inset .back{fill:var(--card-bg);stroke:var(--line);stroke-width:calc(1px * var(--s,1))}
.dotmap .inset path{fill:rgba(0,40,111,.16)}
.dotmap .inset .frame{fill:rgba(203,159,69,.22);stroke:var(--gold);stroke-width:calc(1.5px * var(--s,1))}
.theme-dark .dotmap .inset path{fill:rgba(247,243,234,.38)}
.theme-dark .dotmap .inset .back{stroke:rgba(247,243,234,.3)}
.dotmap__tip{position:absolute;left:0;top:0;transform:translate(-50%,calc(-100% - 14px));background:var(--ink);color:var(--ivory);padding:8px 12px;border-radius:6px;font-size:13px;line-height:1.4;white-space:nowrap;pointer-events:none;opacity:0;transition:opacity .15s;z-index:3;box-shadow:0 8px 20px rgba(0,0,0,.25)}
.dotmap__tip b{display:block;font-size:14px}
.dotmap__tip.is-on{opacity:1}
.dotmap__legend{display:flex;flex-wrap:wrap;gap:8px var(--s3);margin-top:12px;font-size:13px;color:var(--card-muted)}
.dotmap__legend span{display:inline-flex;align-items:center;gap:8px}
.dotmap__legend i{width:12px;height:12px;border-radius:50%;background:var(--gold);display:inline-block;box-sizing:border-box}
.dotmap__legend i.t2{background:var(--card-bg);border:2.5px solid var(--navy)}
.theme-dark .dotmap__legend i.t2{border-color:var(--ivory)}
.dotmap__legend i.home{background:var(--navy);border:3px solid var(--gold);width:14px;height:14px}
.theme-dark .dotmap__legend i.home{background:var(--gold);border-color:var(--ink)}
.dotmap__hint{flex-basis:100%}
.areas-layout{display:grid;grid-template-columns:minmax(0,420px) minmax(0,1fr);gap:var(--gutter);align-items:start}
.areas-layout--checker{grid-template-columns:minmax(0,400px) minmax(0,1fr)}
.areas-layout__side{display:grid;gap:var(--s3)}
.areas-layout>.dotmap{position:sticky;top:96px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips button{min-height:38px;padding:0 14px;border-radius:999px;border:2px solid var(--line);font-weight:600;font-size:14px;background:var(--card-bg);color:var(--card-fg);transition:background-color .18s ease,color .18s ease,border-color .18s ease}
.chips button small{font-weight:500;font-size:13px;opacity:.75;margin-left:6px}
.chips button[aria-pressed="true"]{background:var(--navy);border-color:var(--navy);color:var(--ivory)}
.theme-dark .chips button[aria-pressed="true"]{background:var(--gold);border-color:var(--gold);color:var(--ink)}
.areasearch{position:relative}
.areasearch input{width:100%;min-height:52px;padding:0 16px 0 46px;border:2px solid var(--line);border-radius:var(--radius);background:var(--input-bg,var(--card-bg));color:var(--input-fg,var(--card-fg));font:inherit;font-size:16px}
.areasearch input:focus{outline:none;border-color:var(--gold)}
.areasearch svg{position:absolute;left:16px;top:50%;width:20px;height:20px;transform:translateY(-50%);fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;opacity:.6;pointer-events:none}
/* postcode index (concept 1): fifteen rows in two columns, every town a link */
.areaindex{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 var(--s4)}
.areaindex__row{display:grid;grid-template-columns:52px minmax(0,1fr);gap:0 12px;padding:14px 0;border-bottom:1px solid var(--line);align-items:start}
.areaindex__row.is-hidden{display:none}
.areaindex__row b{font-size:26px;font-weight:300;line-height:1;color:var(--label,var(--gold))}
.areaindex__row h3{font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;line-height:1.3}
.areaindex__row h3 small{display:block;font-size:13px;font-weight:500;letter-spacing:0;text-transform:none;color:var(--fg-muted);margin-top:2px}
.areaindex__row p{margin-top:6px;font-size:14px;line-height:1.7}
.areaindex__row p a{color:inherit;font-weight:600;text-decoration:none}
.areaindex__row p a:hover,.areaindex__row p a.is-hot{color:var(--label,var(--gold));text-decoration:underline}
.areaindex__row p a.is-dim{opacity:.4}
.areaindex__row .sep{opacity:.45;margin:0 2px}
.areaindex__empty{display:none;grid-column:1/-1;color:var(--fg-muted)}
.areaindex.is-empty .areaindex__empty{display:block}
/* county list (concept 2): every town under its county, flowing in columns */
.countylist{columns:3;column-gap:var(--s3)}
.countylist__group{break-inside:avoid;margin-bottom:var(--s3)}
.countylist__group.is-hidden{display:none}
.countylist__group h3{display:flex;justify-content:space-between;align-items:baseline;gap:8px;font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;padding-bottom:6px;border-bottom:2px solid var(--gold);margin-bottom:2px}
.countylist__group h3 small{font-size:13px;font-weight:500;letter-spacing:0;color:var(--fg-muted)}
.countylist li{display:flex;align-items:center;gap:9px;min-height:36px;font-size:14px;border-bottom:1px solid var(--line)}
.countylist li.is-hidden{display:none}
.countylist li i{flex:none;width:9px;height:9px;border-radius:50%;background:var(--gold)}
.countylist li.t2 i{background:transparent;border:2px solid var(--navy)}
.theme-dark .countylist li.t2 i{border-color:var(--ivory)}
.countylist li a{color:inherit;font-weight:600;text-decoration:none;min-width:0;overflow-wrap:anywhere}
.countylist li a:hover,.countylist li.is-hot a{color:var(--label,var(--gold));text-decoration:underline}
.countylist li .tag{margin-left:auto;font-size:13px;font-weight:600;letter-spacing:.04em;color:var(--fg-muted)}
.countylist__empty{display:none;color:var(--fg-muted)}
.countylist.is-empty .countylist__empty{display:block}
/* postcode checker and tiles (concept 3) */
.checker{background:var(--navy);color:var(--ivory);border-radius:var(--radius);padding:var(--s4);box-shadow:var(--shadow)}
.checker h3{font-size:22px;margin-bottom:6px}
.checker>p{color:#D9D6CC;font-size:15px}
.checker form{display:flex;gap:10px;margin-top:var(--s3)}
.checker input{flex:1;min-width:0;min-height:52px;padding:0 16px;border:2px solid rgba(247,243,234,.3);border-radius:var(--radius);background:var(--ivory);color:var(--ink);font:inherit;font-size:17px;font-weight:600;letter-spacing:.06em;text-transform:uppercase}
.checker input:focus{outline:none;border-color:var(--gold)}
.checker__result{display:none;margin-top:var(--s3);padding:var(--s3);border-radius:var(--radius);background:rgba(247,243,234,.1)}
.checker__result.is-on{display:block}
.checker__result b{display:block;font-size:19px;margin-bottom:6px;color:var(--gold)}
.checker__result p{color:#E8E4DA;font-size:15px}
.checker__result p a{color:var(--ivory)}
.checker__result.no b{color:var(--ivory)}
.checker__result .actions{margin-top:var(--s2)}
.pcgrid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--s2)}
.pc{background:var(--card-bg);color:var(--card-fg);border-radius:var(--radius);box-shadow:var(--shadow);padding:18px 18px 16px;transition:box-shadow .2s ease,transform .2s ease,opacity .2s ease}
.pc.t2{background:#F3EFE5}
.pc.t2 small{color:var(--fg-muted)}
.theme-dark .pc.t2{background:#16284F}
.theme-dark .pc.t2 small{color:#C4C1B6}
.pc b{display:block;font-size:30px;font-weight:300;line-height:1}
.pc small{display:block;font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--label,var(--gold));margin:8px 0 8px}
.pc p{font-size:13px;line-height:1.5;color:var(--card-muted)}
.pc p a{color:inherit;font-weight:600}
.pc.is-hot{box-shadow:0 0 0 3px var(--gold),var(--shadow-hover);transform:translateY(-2px)}
.pc.is-dim{opacity:.35}
.pcgrid.pcgrid--side{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:1024px){.pcgrid{grid-template-columns:repeat(3,minmax(0,1fr))}.pcgrid.pcgrid--side{grid-template-columns:repeat(3,minmax(0,1fr))}.areas-layout,.areas-layout--checker{grid-template-columns:1fr}.areas-layout>.dotmap{position:static}}
@media (max-width:760px){.checker form{flex-direction:column}.countylist{columns:2}.areaindex{grid-template-columns:1fr}}
@media (max-width:560px){.pcgrid,.pcgrid.pcgrid--side{grid-template-columns:repeat(2,minmax(0,1fr))}.pc b{font-size:26px}.countylist{columns:1}}

/* ---------- inner-page variants: split page hero, tall banner, numbered grid ---------- */
.phero{display:grid;grid-template-columns:1.05fr .95fr;gap:var(--s6);align-items:center;padding:var(--s6) 0}
.phero img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:var(--radius);box-shadow:var(--shadow)}
.phero .crumbs{color:var(--fg-muted)}
.phero h1{font-size:clamp(30px,1.3rem + 2.4vw,52px);font-weight:300;text-transform:uppercase;letter-spacing:.06em;line-height:1.12;text-wrap:balance}
.phero .lead{margin-top:var(--s3)}
.phero .actions{margin-top:var(--s4)}
.banner--tall{display:grid;align-items:end;min-height:min(72vh,680px)}
.banner--tall .container{padding:var(--s7) 0 var(--s6)}
.numgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s3)}
.numgrid div{padding:var(--s3);background:var(--card-bg);color:var(--card-fg);border-radius:var(--radius);box-shadow:var(--shadow)}
.numgrid b{display:block;font-size:13px;font-weight:600;letter-spacing:.08em;color:var(--label,var(--gold));margin-bottom:8px}
.numgrid h3{font-size:18px;margin-bottom:6px}
.numgrid p{font-size:15px;color:var(--card-muted)}
@media (max-width:900px){.phero{grid-template-columns:1fr;gap:var(--s4);padding:var(--s5) 0}.phero img{aspect-ratio:4/3}.numgrid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.numgrid{grid-template-columns:1fr}}
.numgrid--four{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:1024px){.numgrid--four{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.numgrid--four{grid-template-columns:1fr}}

/* ---------- ninth round (2 Nov 2026): icon-led service cards, benefits row, review sources, Trustpilot strip ---------- */
.svcs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--gutter)}
.svcs--three{grid-template-columns:repeat(3,minmax(0,1fr))}
.svc{position:relative;display:flex;flex-direction:column;gap:14px;background:var(--card-bg);color:var(--card-fg);border-radius:var(--radius);box-shadow:var(--shadow);padding:var(--s3);text-decoration:none;transition:transform .25s var(--ease),box-shadow .25s ease}
.svc__top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.svc__icon{flex:none;width:56px;height:56px;border-radius:50%;background:var(--gold);display:grid;place-items:center}
.svc__icon svg{width:28px;height:28px;fill:none;stroke:var(--ink);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.svc__kicker{font-size:13px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--label,var(--gold));text-align:right}
.svc h3{font-size:20px;font-weight:600;line-height:1.3;color:var(--card-fg)}
.svc p{color:var(--card-muted);font-size:15px;text-wrap:pretty}
.svc ul{display:grid;gap:8px;font-size:14px;font-weight:500;color:var(--card-fg)}
.svc li{display:flex;gap:10px;align-items:flex-start}
.svc li svg{flex:none;width:18px;height:18px;margin-top:3px;fill:none;stroke:var(--gold);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.svc__foot{margin-top:auto;padding-top:14px;border-top:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.svc__price{font-size:13px;color:var(--card-muted);line-height:1.3}
.svc__price b{display:block;font-size:17px;font-weight:600;color:var(--card-fg)}
.svc .btn{min-height:42px;padding:0 14px;font-size:14px}
.svc .btn svg{width:16px;height:16px}
@media (hover:hover) and (pointer:fine){a.svc:hover{transform:translateY(-4px);box-shadow:var(--shadow-hover)}}
@media (max-width:1100px){.svcs{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.svcs,.svcs--three{grid-template-columns:1fr}}

.benefits ul{display:grid;grid-template-columns:repeat(5,minmax(0,1fr))}
.benefits--4 ul{grid-template-columns:repeat(4,minmax(0,1fr))}
.benefits li{display:flex;gap:14px;align-items:flex-start;padding:var(--s2) var(--s3);border-left:1px solid var(--line)}
.benefits li:first-child{border-left:0;padding-left:0}
.benefits svg{flex:none;width:48px;height:48px;border-radius:50%;background:var(--gold);padding:12px;fill:none;stroke:var(--ink);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.benefits b{display:block;font-size:16px;font-weight:600;line-height:1.3}
.benefits span{display:block;font-size:14px;line-height:1.45;color:var(--fg-muted);margin-top:4px}
.benefits--band{background:var(--navy);color:var(--ivory);padding-block:var(--s3);margin-top:var(--s5)}
.benefits--band span{color:#D9D6CC}
.benefits--band li{border-color:rgba(247,243,234,.18)}
.benefits--strip{background:var(--bg);padding-block:var(--s3);border-bottom:1px solid var(--line)}
.benefits--card{position:relative;z-index:4;margin-top:-40px}
.benefits--card ul{background:var(--card-bg);color:var(--card-fg);border-radius:var(--radius);box-shadow:var(--shadow);padding:var(--s2) var(--s3)}
.benefits--card li:first-child{padding-left:var(--s2)}
.benefits--card span{color:var(--card-muted)}
@media (max-width:1100px){.benefits ul,.benefits--4 ul{grid-template-columns:repeat(2,minmax(0,1fr))}.benefits li:nth-child(odd){border-left:0}.benefits li{padding-left:var(--s2)}}
@media (max-width:560px){.benefits ul,.benefits--4 ul{grid-template-columns:1fr}.benefits li{border-left:0;padding:10px 0}.benefits--card li{padding:10px var(--s1)}}

.sources{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--s2);margin-top:var(--s3)}
.sec-head--left .sources,.sec-head--row .sources{justify-content:flex-start}
.source{display:inline-flex;align-items:center;gap:12px;background:var(--card-bg);color:var(--card-fg);border-radius:999px;border:1px solid var(--line);padding:8px 20px 8px 10px;text-decoration:none;text-align:left;line-height:1.25;transition:transform .2s var(--ease)}
.source>span:last-child{display:grid;gap:2px}
.source b{font-size:15px;font-weight:600}
.source small{font-size:13px;color:var(--card-muted);font-weight:500}
.source__logo{flex:none;width:36px;height:36px;border-radius:50%;display:grid;place-items:center}
.source__logo svg{width:20px;height:20px}
.source__g{background:#FFFFFF;box-shadow:inset 0 0 0 1px #E4DFD3}
.source__tp{background:#00B67A}
.gstars{display:inline-flex;gap:1px}
.gstars svg{width:14px;height:14px;fill:#FBBC04}
.tpstars{display:inline-flex;gap:2px}
.tpstars i{width:22px;height:22px;background:#00B67A;display:grid;place-items:center}
.tpstars i.half{background:linear-gradient(90deg,#00B67A 50%,#DCDCE6 50%)}
.tpstars svg{width:14px;height:14px}
.tpstars--sm i{width:14px;height:14px}
.tpstars--sm svg{width:9px;height:9px}
@media (hover:hover) and (pointer:fine){a.source:hover{transform:translateY(-2px)}}

.tp{margin-top:var(--s5);padding-top:var(--s5);border-top:1px solid var(--line)}
.tp__head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:var(--s2) var(--s3);margin-bottom:var(--s3)}
.tp__brand{display:flex;align-items:center;flex-wrap:wrap;gap:10px;font-weight:600;font-size:18px}
.tp__brand small{font-size:14px;font-weight:500;color:var(--fg-muted)}
.section--navy .tp__brand small,.section--ink .tp__brand small{color:#D9D6CC}
.section--navy .tp,.section--ink .tp{border-color:rgba(247,243,234,.2)}
.tp__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gutter)}
.tpr{background:var(--card-bg);color:var(--card-fg);border-radius:var(--radius);box-shadow:var(--shadow);padding:var(--s3);display:flex;flex-direction:column;gap:12px}
.section--navy .tpr,.section--navy .source{--card-bg:#FFFFFF;--card-fg:#141B2D;--card-muted:#4A4E5B}
.tpr h3{font-size:16px;font-weight:600;line-height:1.35}
.tpr p{font-size:15px;line-height:1.55;color:var(--card-muted);flex:1;text-wrap:pretty}
.tpr footer{display:flex;align-items:center;gap:10px;font-size:14px}
.tpr footer b{display:block;font-weight:600}
.tpr footer time{display:block;font-size:13px;color:var(--card-muted)}
.tpr__who{flex:none;width:36px;height:36px;border-radius:50%;background:var(--navy);color:var(--ivory);display:grid;place-items:center;font-weight:600;font-size:13px}
.theme-dark .tpr__who{background:var(--gold);color:var(--ink)}
@media (max-width:900px){.tp__grid{grid-template-columns:1fr}}
a.tile{text-decoration:none;color:inherit}

/* ---------- tenth round (3 Nov 2026): showroom section ---------- */
.showroom__grid{align-items:start}
.showroom h3{font-size:20px;font-weight:600;line-height:1.3;margin-top:var(--s3)}
.showroom .sec-head h2,.showroom .numgrid h3,.showroom .visit h3{margin-top:0}
.showroom p+h3{margin-top:var(--s3)}
.checks--tight{gap:10px;margin-top:var(--s2)}
.showroom .hours{margin-top:var(--s2)}
.showroom .note{margin-top:var(--s2);font-size:15px;color:var(--fg-muted)}
.showroom .actions{margin-top:var(--s3)}
.tour__cap{margin-top:12px;font-size:15px;color:var(--fg-muted);line-height:1.5}
.showroom .tour__load{padding:var(--s3) var(--s4)}
.tour__cap b{color:var(--fg)}
.tour--wide{aspect-ratio:21/9;margin-top:var(--s3)}
.showroom figure img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:var(--radius)}
.bays{margin-top:var(--s5)}
.bays h3{margin-top:0;margin-bottom:var(--s3)}
.bays__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--gutter)}
.bays__grid img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:var(--radius)}
.bays__grid figcaption{margin-top:8px;font-size:14px;color:var(--fg-muted)}
.showroom figcaption{margin-top:8px;font-size:14px;color:var(--fg-muted)}
.showroom__plan{margin-top:var(--s5);padding:var(--s4);background:var(--card-bg);color:var(--card-fg);border-radius:var(--radius);box-shadow:var(--shadow)}
.showroom__plan h3{margin-top:0}
.showroom__plan p{color:var(--card-muted);margin-top:8px;max-width:78ch}
.showroom .plan p{margin-top:8px;color:var(--fg-muted)}
.panel .plan p{color:var(--card-muted)}
.showroom__tour{margin-top:var(--s5)}
.showroom__tour h3{margin-top:0}
.showroom__tour p{color:var(--fg-muted);margin-top:8px;max-width:70ch}
.visit{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gutter);margin-top:var(--s5);padding-top:var(--s4);border-top:1px solid var(--line)}
.visit b{display:block;font-size:40px;font-weight:300;line-height:1;color:var(--label,var(--gold));margin-bottom:12px}
.visit h3{font-size:18px}
.visit p{margin-top:6px;font-size:15px;color:var(--fg-muted)}
.numgrid--visit{margin-top:var(--s5)}
.panel{display:grid;grid-template-columns:1fr 1fr;gap:var(--s5);align-items:start;background:var(--card-bg);color:var(--card-fg);border-radius:var(--radius);box-shadow:var(--shadow);padding:var(--s4)}
.panel p{color:var(--card-muted)}
.panel .tour__cap b,.panel h3{color:var(--card-fg)}
.panel .note{color:var(--card-muted)}
@media (max-width:900px){.panel{grid-template-columns:1fr;gap:var(--s3);padding:var(--s3)}.tour--wide{aspect-ratio:16/10}.bays__grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:760px){.visit{grid-template-columns:1fr;gap:var(--s3)}.showroom__plan{padding:var(--s3)}}
@media (max-width:560px){.showroom .tour__load small{display:none}.showroom .tour__load .btn{white-space:normal;line-height:1.25;min-height:0;padding:10px 16px;font-size:15px;max-width:100%}}
.showroom--after-band{padding-top:var(--s5)}
.benefits--band+.showroom--after-band{margin-top:0}