/* PURE Thanet • Version 2.1: proportion, visibility & interaction refinements.
   The original page content and photographs are unchanged. */
:root{--v21-blue:#263b4a;--v21-mint:#e4fcfa;--v21-ink:#252c31}
/* Tidy typography, keeping readability above decorative treatment. */
.section-heading h2,.editorial-copy h2,.closing-cta h2,.specialists h2,
.option-desc h3,.price h3,.area-index-head h1,.gutter-intro .big-display{
  text-wrap:balance!important;
  overflow-wrap:normal;
}
.section-heading{min-width:0}
.section-heading h2{max-width:100%;}
.specialists .section-heading{display:block!important}
.specialists .section-heading h2{max-width:950px!important;line-height:1.25!important}
/* Original icons retain their shape and transparency; render as clearly legible white. */
.specialist-grid{align-items:stretch;gap:14px!important}
.specialist-item{
  background:#354c5c!important;
  border:1px solid rgba(255,255,255,.16);
  border-radius:4px;
  min-width:0;
  overflow:hidden;
  transition:background .25s ease,border-color .25s ease,transform .25s ease;
}
.specialist-item img{
  width:68px;height:68px;
  filter:grayscale(1) brightness(0) invert(1)!important;
  opacity:.96;
  object-fit:contain;
}
.specialist-item summary{list-style:none;cursor:pointer;outline-offset:3px}
.specialist-item summary::-webkit-details-marker{display:none}
.specialist-item summary::marker{content:''}
.specialist-item .v21-expand{display:none}
.specialist-item h3{color:#fff!important;text-wrap:balance!important}
.specialist-item p{color:#edf7f7!important}
.specialist-item:focus-within{border-color:#9de1de;outline:2px solid transparent}
.specialist-item summary:focus-visible{outline:2px solid #9de1de;outline-offset:-4px}
/* Same restrained interactive image movement as the established HOM-style categories. */
@media(hover:hover) and (prefers-reduced-motion:no-preference){
 .option{transition:box-shadow .28s ease,border-color .28s ease!important}
 .option:hover{box-shadow:0 10px 26px #172b3915!important;border-color:#7db9b8!important}
 .option-image img{transition:transform .65s cubic-bezier(.2,.8,.2,1)!important}
 .option:hover .option-image img{transform:scale(1.045)!important}
 .editorial-image img{transition:transform .7s ease!important}
 .editorial-row:hover .editorial-image img{transform:scale(1.02)!important}
 .price:hover,.region-grid a:hover{transform:translateY(-2px)!important;box-shadow:0 8px 22px #1c394b12}
 .specialist-item:hover{border-color:#99cecf;background:#3a5261!important;transform:translateY(-2px)}
 .option-link{transition:color .25s ease,border-color .25s ease!important}
 .option:hover .option-link{color:#006366!important;border-top-color:#79c2bd!important}
 .desktop-nav a{transition:color .2s ease,transform .2s ease}
 .desktop-nav a:hover{transform:translateY(-1px)}
}
/* Let real photography lead the three homepage choices on desktop. Existing heading is
   visually moved over its own image; descriptive page copy remains below. */
@media(min-width:781px){
 .option{isolation:isolate}
 .option::before{content:'';position:absolute;top:0;left:0;right:0;
   height:clamp(220px,22vw,340px);background:linear-gradient(0deg,#000a 0%,#0003 43%,transparent 84%);
   z-index:1;pointer-events:none}
 .option .option-desc h3{position:absolute;top:calc(clamp(220px,22vw,340px) * .58);
   left:19px;right:19px;transform:translateY(-50%);text-align:center;z-index:2;
   color:#fff!important;text-shadow:0 1px 10px #0008;font-size:clamp(17px,1.65vw,24px)!important;
   max-width:26ch;margin-inline:auto!important}
 .option .option-desc{min-height:142px!important}
 .option .option-desc p{font-size:14px!important}
 .specialist-item{padding:26px 20px!important;text-align:center;min-height:265px!important}
 .specialist-item summary{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px}
 .specialist-item img{margin:0!important}
 .specialist-item h3{font-size:clamp(17px,1.55vw,21px)!important;line-height:1.3;margin:0 0 12px!important}
 .specialist-item p{font-size:13.5px!important;line-height:1.56!important;text-align:center}
}
/* Image viewer: optional tap-to-enlarge, no new pictures or descriptions. */
.v21-gallery-button{background:transparent;border:0;padding:0;display:block;width:100%;height:100%;cursor:zoom-in;overflow:hidden}
.v21-gallery-button img{display:block;width:100%;height:100%;object-fit:cover}
.v21-gallery-button:focus-visible{outline:3px solid #009b9c;outline-offset:-4px}
.v21-image-dialog{position:fixed;inset:0;max-width:none;max-height:none;width:100vw;height:100dvh;margin:0;padding:clamp(16px,5vw,50px);border:0;background:#142431ee;color:#fff}
.v21-image-dialog::backdrop{background:#0d202bcf}
.v21-image-dialog[open]{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px}
.v21-image-dialog img{display:block;max-width:min(94vw,1350px);max-height:80dvh;object-fit:contain;width:auto;height:auto}
.v21-image-dialog button{position:absolute;top:max(18px,env(safe-area-inset-top));right:20px;background:#fff;color:#263b4a;border:0;border-radius:4px;font:700 14px/1.3 'DM Sans',sans-serif;padding:10px 16px;cursor:pointer}
.v21-image-dialog button:focus-visible{outline:3px solid #54d4d0;outline-offset:3px}
/* Customer enquiry bar should not cover the existing final quote or footer. */
@media(max-width:780px){
 body.v21-near-page-end .mobile-actions,
 body.v21-image-open .mobile-actions{opacity:0!important;pointer-events:none!important;transform:translateY(120%)!important}
 .specialists.section-pad{padding:33px 18px 38px!important}
 .specialists .section-heading{margin-bottom:24px!important}
 .specialists .section-heading h2{max-width:24ch;margin:0 auto!important;text-align:center;
   font-size:clamp(24px,6.1vw,30px)!important;line-height:1.25!important}
 .specialist-grid{grid-template-columns:minmax(0,1fr)!important;gap:9px!important;max-width:560px;margin-inline:auto}
 .specialist-item{min-height:0!important;padding:0!important;text-align:center}
 .specialist-item summary{min-height:90px;padding:18px 19px;display:grid;
   grid-template-columns:52px minmax(0,1fr) 16px;gap:13px;align-items:center}
 .specialist-item img{width:50px!important;height:50px!important;margin:0!important;opacity:.98}
 .specialist-item h3{font-size:clamp(18px,4.6vw,22px)!important;line-height:1.24!important;
   text-align:center;margin:0!important;max-width:none}
 .specialist-item .v21-expand{display:block;position:relative;width:16px;height:16px}
 .specialist-item .v21-expand:before,.specialist-item .v21-expand:after{
   content:'';position:absolute;top:7px;left:0;width:16px;height:2px;background:#cbe8e7;transition:transform .2s ease}
 .specialist-item .v21-expand:after{transform:rotate(90deg)}
 .specialist-item[open] .v21-expand:after{transform:rotate(0)}
 .specialist-item p{font-size:14px!important;line-height:1.65!important;text-align:center;
    max-width:46ch;padding:0 22px 22px;margin:0 auto}
 .specialist-item[open]{border-color:#9ccecd!important;background:#3a5362!important}
 /* A balanced type system for headings that wrap onto a second line. */
 .section-heading{display:block!important;text-align:center!important}
 .section-heading h2,.editorial-copy h2,.closing-cta h2,.gutter-intro .big-display,
 .area-index-head h1,.proof-grid h3,.price h3{
   text-align:center!important;text-wrap:balance!important;margin-left:auto!important;
   margin-right:auto!important;line-height:1.24!important;hyphens:none!important}
 .section-heading h2{max-width:25ch!important;font-size:clamp(22px,5.9vw,30px)!important}
 .section-heading p{margin:13px auto 0!important;text-align:center!important;max-width:42ch!important}
 .hero-text h1{font-size:clamp(27px,7vw,34px)!important;text-wrap:balance!important;text-align:center!important;margin-inline:auto!important;max-width:19ch}
 .hero-text p{text-align:center!important;margin-left:auto!important;margin-right:auto!important;max-width:45ch}
 .editorial-copy,.editorial-row.reverse .editorial-copy{text-align:center!important;padding:30px 22px 33px!important}
 .editorial-copy h2{font-size:clamp(23px,5.9vw,31px)!important;max-width:24ch!important;margin-bottom:14px!important}
 .editorial-copy p{max-width:46ch!important;font-size:15px!important;line-height:1.64!important;
   margin-inline:auto!important;text-align:center!important}
 .editorial-image,.editorial-row.reverse .editorial-image{
   width:100%!important;max-width:none!important;min-width:100%!important;
   height:clamp(270px,79vw,420px)!important;min-height:0!important;
   margin:0!important;display:block!important}
 .editorial-image img{width:100%!important;height:100%!important;object-fit:cover!important;object-position:center!important}
 .closing-cta{text-align:center!important;padding:38px 20px 42px!important}
 .closing-cta h2{font-size:clamp(24px,6.1vw,31px)!important;max-width:23ch!important}
 .closing-cta p{text-align:center!important;max-width:44ch!important;margin:12px auto 20px!important}
 .gutter-intro .big-display{font-size:clamp(29px,7.5vw,40px)!important;line-height:1.18!important;max-width:22ch}
 .gutter-intro-copy{text-align:center!important;max-width:48ch;margin:auto!important}
 .proof-grid>div{text-align:center!important}
 .proof-grid p{max-width:45ch;margin-inline:auto!important}
 .price-grid{gap:12px!important}
 .price{align-items:center!important;text-align:center!important;padding:24px 22px!important}
 .price h3{font-size:clamp(21px,6vw,28px)!important;max-width:24ch!important;margin:10px auto 13px!important}
 .price strong{font-size:clamp(32px,9vw,46px)!important;white-space:normal!important;line-height:1.2!important}
 .price b{width:100%;text-align:center}
 .services-list-row h2{text-wrap:balance!important;text-align:center!important}
 .region-grid a{text-align:center!important;justify-content:center!important}
 .region-grid a span{text-wrap:balance!important}
 .region-grid a>b{display:none!important}
 /* One full photograph at a time on phone rather than two narrow cropped thumbnails. */
 .gallery-section{padding-top:31px!important;padding-bottom:33px!important}
 .gallery-section .section-heading{margin:0 20px 15px!important}
 .gallery-section .image-gallery{padding:0 18px 12px!important;gap:11px!important;scroll-padding-inline:18px!important}
 .gallery-section .image-gallery .gallery-item,
 .gallery-section .image-gallery .gallery-item-0,
 .gallery-section .image-gallery .gallery-item-3,
 .gallery-section .image-gallery .gallery-item-4,
 .gallery-section .image-gallery .gallery-item:nth-last-child(2):not(:first-child){
   flex:0 0 min(87vw,485px)!important;height:clamp(222px,65vw,320px)!important;
   border-radius:5px!important;scroll-snap-align:center!important}
 .option.residential-option{isolation:isolate}
 .option.residential-option::before{content:'';position:absolute;top:0;left:0;right:0;
   height:157px;z-index:1;pointer-events:none;background:linear-gradient(0deg,#0009,transparent 90%)}
 .option.residential-option .option-desc h3{
   position:absolute;top:84px;left:18px;right:18px;transform:translateY(-50%);z-index:2;
   color:#fff!important;text-shadow:0 1px 9px #0009;text-align:center!important;
   max-width:25ch!important;margin-inline:auto!important;font-size:clamp(19px,5.2vw,24px)!important}
 .option.commercial-option .option-desc h3,.option.gutter-option .option-desc h3{
   text-align:center!important;text-wrap:balance!important;margin-left:auto!important;margin-right:auto!important}
 .option .option-desc p{text-align:center!important}
 .option .option-link{text-align:center!important;justify-content:center!important}
 .review-block blockquote{text-align:center!important;text-wrap:pretty}
 .review-block>span{text-align:center!important}
}
@media(max-width:370px){
 .specialist-item summary{grid-template-columns:44px minmax(0,1fr) 16px;gap:9px;padding:15px 13px}
 .specialist-item img{width:43px!important;height:43px!important}
 .specialist-item h3{font-size:17px!important}
}
@media(prefers-reduced-motion:reduce){.v21-image-dialog *, .specialist-item *{animation:none!important;transition:none!important}}