/* ============================================================
   TOKENS
   Palette taken straight off the S. Sparham Electrical logo: white
   wordmark and cyan "ELECTRICAL" on near black. --brand-dp is the darkened
   cyan used anywhere the colour has to sit on white and still pass WCAG AA,
   because #14AEE3 itself is nowhere near it (about 2.1:1).
   ============================================================ */
:root{
  --black:#000000;
  --ink:#101215;
  --ink-2:#191C21;
  --ink-3:#262A30;
  --brand:#14AEE3;
  --brand-lt:#3FCEF6;
  --brand-dp:#0B6F94;      /* darkened brand, 5.3:1 on white */
  --steel:#4A525C;
  --muted:#666F7B;
  --line:#E4E7EB;
  --bg:#FFFFFF;
  --bg-2:#F5F6F8;
  --bg-3:#EDEFF2;
  --white:#FFFFFF;
  --radius:14px;
  --radius-sm:10px;
  --sp:clamp(38px,6.4vw,86px);
  --gut:clamp(16px,4vw,28px);
  --shadow:0 1px 2px rgba(16,18,21,.05),0 8px 24px rgba(16,18,21,.07);
  --shadow-lg:0 2px 4px rgba(16,18,21,.06),0 18px 48px rgba(16,18,21,.12);
  --nav-h:64px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + 12px)}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:'Manrope',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
  font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;
}
/* clip, NOT hidden, and on both elements.
   overflow-x:hidden on body alone is the usual incantation and it has two
   problems. It often does not even work, because the scrolling element is
   html rather than body; and on iOS it can turn body into a scroll container,
   which drops the page off the fast scrolling path and costs the momentum
   feel. clip suppresses the overflow without creating a scroll container at
   all, which is what was wanted in the first place.

   REASONED, NOT MEASURED. Headless Chrome has no vsync, so scroll smoothness
   cannot be measured here - only rendering cost, which this does not change.
   Nothing on the site actually overflows sideways (checked at 390px:
   scrollWidth equals innerWidth on every page), so this is a safety net
   either way, and Safari before 16 ignores clip and behaves as it did. */
html,body{overflow-x:clip}
h1,h2,h3,h4{font-family:'Archivo',system-ui,Arial,sans-serif;font-weight:800;line-height:1.08;margin:0;letter-spacing:-.015em}
p,figure{margin:0}
img,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
ul{margin:0;padding:0;list-style:none}
:focus-visible{outline:3px solid var(--brand);outline-offset:2px;border-radius:4px}

.wrap{width:min(1180px,100% - (var(--gut)*2));margin-inline:auto}
.sec{padding-block:var(--sp)}
.sec--tint{background:var(--bg-2)}
.eyebrow{
  font-family:'Archivo';font-weight:700;font-size:.75rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--brand-dp);margin-bottom:10px;
  display:flex;align-items:center;gap:9px;
}
.eyebrow::before{content:"";width:24px;height:2px;background:var(--brand);border-radius:2px;flex:none}
.sec-head{max-width:660px;margin-bottom:clamp(20px,3.4vw,44px)}
.sec-head h2{font-size:clamp(1.7rem,4.6vw,2.6rem)}
.sec-head p{margin-top:12px;color:var(--muted);font-size:clamp(.95rem,2.4vw,1.05rem)}
.sec-head--mid{margin-inline:auto;text-align:center}
.sec-head--mid .eyebrow{justify-content:center}

/* icons */
.ic{width:20px;height:20px;flex:none;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ic--fill{fill:currentColor;stroke:none}

/* buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:'Archivo';font-weight:700;font-size:.98rem;letter-spacing:.01em;
  padding:13px 22px;border-radius:100px;transition:transform .18s,box-shadow .18s,background .18s,color .18s;
  white-space:nowrap;
}
.btn .ic{width:18px;height:18px}
.btn--brand{background:var(--brand);color:var(--ink)}
.btn--brand:hover{background:var(--brand-lt);transform:translateY(-2px);box-shadow:0 10px 26px rgba(20,174,227,.34)}
.btn--dark{background:var(--ink);color:var(--white)}
.btn--dark:hover{background:var(--ink-2);transform:translateY(-2px)}
.btn--ghost{background:rgba(255,255,255,.08);color:#fff;border:1px solid rgba(255,255,255,.34);backdrop-filter:blur(6px)}
.btn--ghost:hover{background:rgba(255,255,255,.16);transform:translateY(-2px)}
.btn--wide{width:100%}

/* ============================================================
   NAVBAR  (black, so the logo's black plate blends seamlessly)
   ============================================================ */
.nav{
  position:sticky;top:0;z-index:80;background:var(--black);
  border-bottom:1px solid rgba(255,255,255,.09);
}
.nav__in{display:flex;align-items:center;gap:14px;height:var(--nav-h)}
.nav__logo{display:flex;align-items:center;flex:none}
.nav__logo img{height:44px;width:auto}
.nav__links{display:none}
.nav__spacer{flex:1}
.nav__call{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  background:var(--brand);color:var(--ink);min-width:46px;min-height:44px;
  font-family:'Archivo';font-weight:800;font-size:.9rem;padding:9px 14px;border-radius:100px;
  transition:background .18s,transform .18s;
}
.nav__call:hover{background:var(--brand-lt);transform:translateY(-1px)}
.nav__call .ic{width:16px;height:16px}
.nav__call span{display:none}
/* 44px, not 40: this is the only way into the menu on a phone and it was
   under the minimum comfortable target on every touch guideline there is. */
.nav__burger{display:grid;place-items:center;width:44px;height:44px;border-radius:10px;color:#fff;background:rgba(255,255,255,.08)}
.nav__burger .ic{width:22px;height:22px}
.nav__panel{
  display:none;background:var(--ink);border-top:1px solid rgba(255,255,255,.09);
  padding:10px var(--gut) 18px;
}
.nav__panel.open{display:block}
.nav__panel a{
  display:flex;align-items:center;justify-content:space-between;
  padding:13px 2px;color:#E7E9EC;font-family:'Archivo';font-weight:700;font-size:1.02rem;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.nav__panel a .ic{width:16px;height:16px;color:var(--brand)}
@media(min-width:900px){
  :root{--nav-h:86px}
  .nav__logo img{height:62px}
  .nav__burger{display:none}
  .nav__links{display:flex;align-items:center;gap:26px;margin-left:34px}
  .nav__links a{
    font-family:'Archivo';font-weight:600;font-size:.94rem;color:#D5D8DC;
    padding:6px 0;border-bottom:2px solid transparent;transition:color .18s,border-color .18s;
  }
  .nav__links a:hover{color:var(--brand-lt);border-color:var(--brand)}
  .nav__call{font-size:1rem;padding:11px 20px}
  .nav__call span{display:inline}
}

/* ============================================================
   HERO
   .hero-media is the swap container. To drop a hero video in,
   replace the .hero-slides block with a <video> carrying the
   same class contract (see comment in the markup).
   ============================================================ */
.hero{position:relative;background:var(--black);isolation:isolate;overflow:hidden}
.hero-media{position:absolute;inset:0;z-index:0}
/* applies to a swapped-in <video> and to each slider image alike */
.hero-media>*,.hero-slides>*{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero-slide{opacity:0;transition:opacity 1.2s ease;animation:kb 15s ease-in-out infinite alternate}
.hero-slide.is-on{opacity:1}
@keyframes kb{from{transform:scale(1.02)}to{transform:scale(1.11)}}
/* Paint order comes from DOM order: media (z-index:0) -> scrim -> content.
   The scrim can be lighter than it once was: the logo now carries its own
   alpha, so the dark pool only has to keep the silver wordmark legible
   against bright sky rather than hold up a screen blend. */
.hero__scrim{
  position:absolute;inset:0;
  background:
    radial-gradient(48% 36% at 50% 35%,rgba(0,0,0,.74) 0%,rgba(0,0,0,.56) 50%,rgba(0,0,0,.26) 78%,transparent 100%),
    linear-gradient(180deg,rgba(0,0,0,.72) 0%,rgba(0,0,0,.3) 24%,rgba(0,0,0,.46) 60%,rgba(0,0,0,.9) 92%,#000 100%);
}
.hero__in{
  position:relative;text-align:center;color:#fff;
  padding-block:clamp(40px,9vw,84px) clamp(44px,8vw,80px);
  min-height:clamp(500px,78svh,760px);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
}
/* logo-hero.webp carries a real alpha channel (see site/make-logo-alpha.sh).
   This used to be the black-plate JPEG with mix-blend-mode:screen, which looked
   identical on desktop but rendered as a hard black rectangle inside in-app
   webviews such as Facebook Messenger, where the video's compositing layer
   prevents the blend resolving. Do not reintroduce the blend. */
.hero__logo{
  width:min(560px,86%);height:auto;
  margin-bottom:clamp(14px,2.4vw,20px);
}
.hero__tag{
  font-family:'Archivo';font-weight:700;font-size:clamp(1.05rem,4.2vw,1.85rem);
  line-height:1.2;text-wrap:balance;max-width:19ch;
}
.hero__tag em{font-style:normal;color:var(--brand-lt)}
.hero__sub{
  margin-top:12px;color:#C9CDD3;font-size:clamp(.9rem,2.6vw,1.05rem);
  max-width:44ch;text-wrap:balance;
}
.hero__cta{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:clamp(20px,3.4vw,28px);width:100%}
.hero__cta .btn{flex:1 1 auto;min-width:150px;max-width:260px}
.hero__strip{
  display:flex;flex-wrap:wrap;justify-content:center;gap:6px 18px;
  margin-top:clamp(20px,3.4vw,30px);font-size:.78rem;color:#9EA5AE;
}
.hero__strip span{display:inline-flex;align-items:center;gap:6px}
.hero__strip .dot{width:5px;height:5px;border-radius:50%;background:var(--brand);flex:none}
@media(min-width:900px){
  .hero__cta .btn{flex:0 0 auto}
}

/* ---- the hero, on a phone ----
   Measured before this block, on a 390x844 screen: the hero came out 658px
   tall - 78% of the screen - with the logo at 79% of the viewport width and
   113px of empty video below the town strip. Nothing below the hero was
   reachable without scrolling, and the logo crowded out the clip it sits on.

   min-height was clamp(500px,78svh,760px), which is a floor written for a
   desktop window and far too tall for a phone held in one hand. Dropping it
   to 62svh lets the hero size itself to its own content instead, which is
   what pulls the trust bar up into view: a visitor can see there is more
   page without having to guess.

   svh not vh, deliberately, and that is unchanged - vh on iOS is the LARGE
   viewport, so a 100vh-ish hero grows behind the URL bar and the layout
   lurches as the bar hides on scroll. That lurch is itself often what
   "juttery" means on a phone. */
@media(max-width:600px){
  .hero__in{
    min-height:min(62svh,560px);
    padding-block:26px 32px;
  }
  .hero__logo{width:min(560px,68%);margin-bottom:12px}
  .hero__cta{margin-top:18px;gap:9px}
  .hero__cta .btn{flex:1 1 100%;max-width:none}
  .hero__strip{margin-top:16px;gap:5px 14px;font-size:.75rem}
  /* the clip is 2.19:1 landscape in a portrait box, so cover shows only the
     middle third. Sitting it slightly above centre keeps the pendants and the
     lit ceiling in frame rather than the dark floor. */
  .hero-video{object-position:50% 42%}
}

/* ============================================================
   TRUST BAR
   ============================================================ */
.trust{background:var(--ink);color:#fff;padding-block:clamp(18px,2.6vw,26px)}
.trust__grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px 12px}
.trust__i{display:flex;align-items:center;gap:10px;min-width:0}
.trust__i .ic{width:22px;height:22px;color:var(--brand)}
.trust__i b{display:block;font-family:'Archivo';font-weight:700;font-size:.9rem;line-height:1.2}
.trust__i small{display:block;color:#98A0AA;font-size:.72rem;line-height:1.35;margin-top:2px}
@media(min-width:820px){.trust__grid{grid-template-columns:repeat(4,1fr);gap:22px}}

/* ============================================================
   SERVICES  (two-up on every width, compact for fast scrolling)
   ============================================================ */
.svc{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.svc__c{
  background:var(--white);border:1px solid var(--line);border-radius:var(--radius);
  padding:13px 13px 15px;transition:transform .2s,box-shadow .2s,border-color .2s;
  display:flex;flex-direction:column;gap:7px;
}
.svc__c:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:#D3D8DE}
.svc__ico{
  width:34px;height:34px;border-radius:10px;display:grid;place-items:center;
  background:var(--ink);color:var(--brand);flex:none;
}
.svc__ico .ic{width:18px;height:18px}
.svc__c h3{font-size:clamp(.95rem,2.9vw,1.16rem);line-height:1.2}
/* the heading IS the link into the service page; 34px of text was the whole
   target. Padding on the inline-block lifts it to 44 without moving the card. */
.svc__c h3 a{display:inline-block;padding-block:5px}
.svc__c p{color:var(--muted);font-size:clamp(.78rem,2.2vw,.92rem);line-height:1.45}
@media(min-width:900px){
  .svc{grid-template-columns:repeat(3,1fr);gap:16px}
  .svc__c{padding:22px;gap:9px}
  .svc__ico{width:46px;height:46px}
  .svc__ico .ic{width:20px;height:20px}
}

/* ============================================================
   TRANSFORMATIONS  (zig-zag, alternating; stacked on mobile)
   ============================================================ */
.tf{display:flex;flex-direction:column;gap:clamp(20px,4.4vw,54px)}
.tf__row{display:grid;gap:12px;align-items:center}
.tf__media{
  position:relative;border-radius:var(--radius);overflow:hidden;background:var(--ink);
  aspect-ratio:16/9;box-shadow:var(--shadow);
}
.tf__media>img,.tf__media>video{width:100%;height:100%;object-fit:cover}
.tf__badge{
  position:absolute;left:12px;top:12px;z-index:2;display:inline-flex;align-items:center;gap:7px;
  background:rgba(0,0,0,.72);color:#fff;backdrop-filter:blur(6px);
  font-family:'Archivo';font-weight:700;font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;
  padding:6px 11px;border-radius:100px;border:1px solid rgba(255,255,255,.2);
}
.tf__badge .ic{width:13px;height:13px;color:var(--brand-lt)}
/* placeholder veil, deleted when the real video is dropped in */
.tf__veil{
  position:absolute;inset:0;z-index:1;display:grid;place-content:center;justify-items:center;gap:8px;
  background:linear-gradient(180deg,rgba(0,0,0,.42),rgba(0,0,0,.74));color:#fff;text-align:center;padding:16px;
}
.tf__veil .ic{width:34px;height:34px;color:var(--brand)}
.tf__veil b{font-family:'Archivo';font-weight:700;font-size:.9rem}
.tf__veil small{color:#B9BFC7;font-size:.72rem;letter-spacing:.04em}
.tf__num{
  font-family:'Archivo';font-weight:800;font-size:.72rem;letter-spacing:.16em;
  color:var(--brand-dp);text-transform:uppercase;
}
.tf__body h3{font-size:clamp(1.1rem,3.6vw,1.6rem);margin:4px 0 8px}
.tf__body p{color:var(--muted);font-size:clamp(.85rem,2.3vw,1rem);line-height:1.5}
.tf__meta{display:flex;flex-wrap:wrap;gap:8px;margin-top:11px}
.tf__pill{
  display:inline-flex;align-items:center;gap:6px;background:var(--bg-3);color:var(--steel);
  font-size:.76rem;font-weight:600;padding:6px 11px;border-radius:100px;
}
.tf__pill .ic{width:13px;height:13px;color:var(--brand-dp)}
@media(min-width:880px){
  .tf__row{grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,56px)}
  .tf__row:nth-child(even) .tf__media{order:2}
  .tf__row:nth-child(even) .tf__body{order:1}
}

/* ============================================================
   GALLERY  (swipe row on mobile, grid on desktop)
   ============================================================ */
.gal{
  display:grid;grid-auto-flow:column;grid-auto-columns:70%;gap:10px;
  overflow-x:auto;scroll-snap-type:x mandatory;
  padding-bottom:12px;margin-inline:calc(var(--gut)*-1);padding-inline:var(--gut);
  scrollbar-width:none;
}
.gal::-webkit-scrollbar{display:none}
.gal__i{
  scroll-snap-align:center;border-radius:var(--radius-sm);overflow:hidden;
  aspect-ratio:3/4;background:var(--bg-3);cursor:zoom-in;position:relative;
}
.gal__i img{width:100%;height:100%;object-fit:cover;transition:transform .4s}
.gal__i:hover img{transform:scale(1.05)}
.gal__hint{
  display:flex;align-items:center;gap:7px;justify-content:center;margin-top:6px;
  color:var(--muted);font-size:.76rem;
}
.gal__hint .ic{width:14px;height:14px}
@media(min-width:700px){
  .gal{
    grid-auto-flow:row;grid-template-columns:repeat(4,1fr);overflow:visible;
    margin-inline:0;padding-inline:0;gap:12px;
  }
  .gal__hint{display:none}
}
@media(min-width:1040px){.gal{grid-template-columns:repeat(5,1fr)}}

/* lightbox */
.lb{
  position:fixed;inset:0;z-index:120;background:rgba(0,0,0,.93);
  display:none;place-items:center;padding:16px;
}
.lb.open{display:grid}
.lb img{max-width:100%;max-height:88svh;object-fit:contain;border-radius:8px}
.lb__x{position:absolute;top:14px;right:14px;width:44px;height:44px;border-radius:50%;
  background:rgba(255,255,255,.13);color:#fff;display:grid;place-items:center}
.lb__x .ic{width:22px;height:22px}

/* ============================================================
   WHY
   ============================================================ */
.why{display:grid;gap:9px}
.why__c{
  display:flex;gap:12px;background:var(--white);border:1px solid var(--line);
  border-radius:var(--radius);padding:14px;
}
.why__c .ic{width:20px;height:20px;color:var(--brand-dp);margin-top:2px}
.why__c h3{font-size:.98rem;margin-bottom:4px}
.why__c p{color:var(--muted);font-size:.84rem;line-height:1.5}
@media(min-width:760px){
  .why{grid-template-columns:repeat(2,1fr);gap:16px}
  .why__c{padding:22px;gap:13px}
  .why__c .ic{width:22px;height:22px}
  .why__c h3{font-size:1.02rem}
  .why__c p{font-size:.88rem}
}

/* ============================================================
   REVIEWS carousel
   ============================================================ */
.rv{position:relative}
.rv__view{overflow:hidden}
.rv__track{display:flex;transition:transform .5s cubic-bezier(.4,.02,.2,1)}
.rv__card{
  flex:0 0 100%;padding-inline:5px;box-sizing:border-box;
}
.rv__inner{
  background:var(--white);border:1px solid var(--line);border-radius:var(--radius);
  padding:clamp(18px,3.4vw,24px);height:100%;display:flex;flex-direction:column;gap:12px;
  box-shadow:var(--shadow);
}
.rv__stars{display:flex;gap:3px;color:#F5A623}
.rv__stars .ic{width:16px;height:16px}
.rv__txt{color:var(--steel);font-size:.92rem;line-height:1.6;flex:1}
.rv__who{display:flex;align-items:center;gap:11px;padding-top:12px;border-top:1px solid var(--line)}
.rv__av{
  width:38px;height:38px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:var(--ink);color:var(--brand);font-family:'Archivo';font-weight:800;font-size:.92rem;
}
.rv__who b{display:block;font-family:'Archivo';font-weight:700;font-size:.92rem}
.rv__who small{display:block;color:var(--muted);font-size:.74rem}
.rv__nav{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:20px}
.rv__btn{
  width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:var(--white);
  display:grid;place-items:center;color:var(--ink);transition:background .18s,border-color .18s;flex:none;
}
.rv__btn:hover{background:var(--ink);color:var(--brand);border-color:var(--ink)}
.rv__dots{display:flex;gap:3px}
/* 8px pill, 44px tap target */
.rv__dot{
  width:14px;height:44px;padding:0;display:grid;place-items:center;
  transition:width .25s;background:none;
}
.rv__dot::before{
  content:"";display:block;width:8px;height:8px;border-radius:50%;
  background:#CFD4DA;transition:width .25s,background .25s;
}
.rv__dot.on{width:30px}
.rv__dot.on::before{width:24px;border-radius:100px;background:var(--brand)}
@media(min-width:860px){.rv__card{flex-basis:33.3333%}}

/* ============================================================
   ABOUT
   ============================================================ */
.ab{display:grid;gap:22px;align-items:center}
.ab__img{border-radius:var(--radius);overflow:hidden;aspect-ratio:4/3;box-shadow:var(--shadow-lg)}
.ab__img img{width:100%;height:100%;object-fit:cover}
.ab__body h2{font-size:clamp(1.6rem,4.4vw,2.4rem)}
.ab__body p{color:var(--muted);margin-top:12px;font-size:clamp(.9rem,2.4vw,1.02rem)}
.ab__sign{
  margin-top:18px;padding-top:16px;border-top:1px solid var(--line);
  display:flex;align-items:center;gap:12px;
}
.ab__sign .rv__av{width:44px;height:44px}
.ab__sign b{font-family:'Archivo';font-weight:800;font-size:1rem;display:block}
.ab__sign small{color:var(--muted);font-size:.8rem}
@media(min-width:860px){.ab{grid-template-columns:.85fr 1fr;gap:clamp(30px,4.4vw,60px)}.ab__img{aspect-ratio:3/4}}

/* ============================================================
   AREAS
   ============================================================ */
.areas{display:grid;grid-template-columns:repeat(2,1fr);gap:7px}
.areas li{
  display:flex;align-items:center;gap:7px;background:var(--white);border:1px solid var(--line);
  border-radius:100px;padding:8px 12px;font-weight:600;font-size:.82rem;
}
.areas .ic{width:14px;height:14px;color:var(--brand-dp);flex:none}
.areas__note{margin-top:13px;color:var(--muted);font-size:.84rem;text-align:center}
@media(min-width:700px){
  .areas{grid-template-columns:repeat(5,1fr);gap:8px}
  .areas li{padding:10px 15px;font-size:.86rem;gap:9px}
  .areas .ic{width:15px;height:15px}
}

/* ============================================================
   CONTACT
   ============================================================ */
.ct{display:grid;gap:16px}
.ct__side{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.ct__row{
  display:flex;align-items:center;gap:11px;background:var(--white);
  border:1px solid var(--line);border-radius:var(--radius);padding:12px 13px;min-width:0;
}
.ct__row .ic{width:19px;height:19px;color:var(--brand-dp);flex:none}
.ct__row>div{min-width:0}
.ct__row small{display:block;color:var(--muted);font-size:.76rem;letter-spacing:.04em;text-transform:uppercase}
.ct__row b{display:block;font-family:'Archivo';font-weight:700;font-size:.92rem;word-break:break-word;line-height:1.25}
.form{
  background:var(--white);border:1px solid var(--line);border-radius:var(--radius);
  padding:clamp(16px,3.6vw,28px);box-shadow:var(--shadow);
}
.form h3{font-size:1.18rem}
.form>p{color:var(--muted);font-size:.83rem;margin-top:5px;margin-bottom:13px}
.field{margin-bottom:10px}
.field label{display:block;font-size:.75rem;font-weight:600;color:var(--steel);margin-bottom:4px}
/* 16px IS A HARD FLOOR, NOT A STYLE CHOICE. iOS Safari zooms the whole page
   in when a focused form control has text under 16px, and it does not zoom
   back out. This was .92rem - 14.72px - so every tap into the quote form
   yanked the page about on an iPhone. The desktop size is restored in the
   900px block below, where no browser does this. */
.field input,.field select,.field textarea{
  width:100%;padding:11px 13px;border:1px solid var(--line);border-radius:var(--radius-sm);
  font:inherit;font-size:16px;background:var(--bg-2);color:var(--ink);transition:border-color .18s,background .18s;
}
.field textarea{min-height:76px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--brand);background:var(--white);box-shadow:0 0 0 3px rgba(20,174,227,.15)
}
.form__2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.form__note{margin-top:10px;font-size:.72rem;color:var(--muted);text-align:center;line-height:1.5}
/* One column on a phone, not two. The contact rows were two-up down to
   359px, which left each card about 170px wide - narrow enough that
   stephen_sparham@hotmail.co.uk broke mid-word across three lines. The
   address and the email both need the full width to read as one string. */
@media(max-width:539px){.form__2,.ct__side{grid-template-columns:1fr}}
@media(min-width:900px){
  .ct{grid-template-columns:.8fr 1.2fr;gap:clamp(24px,3.4vw,44px);align-items:start}
  .ct__side{grid-template-columns:1fr;gap:10px}
  .ct__row{padding:14px 16px;gap:13px}
  .ct__row b{font-size:1rem}
  .ct__row small{font-size:.73rem}
  .field textarea{min-height:92px}
  .field input,.field select,.field textarea{font-size:.92rem}
}

/* ============================================================
   FINAL CTA
   ============================================================ */
.fcta{position:relative;isolation:isolate;overflow:hidden;background:var(--ink);text-align:center;color:#fff}
.fcta__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.fcta::after{
  content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(16,18,21,.8),rgba(16,18,21,.7)),
             radial-gradient(90% 70% at 50% 50%,rgba(20,174,227,.24),transparent 72%);
}
.fcta__in{position:relative;z-index:2;padding-block:clamp(48px,7.4vw,88px)}
.fcta h2{font-size:clamp(1.6rem,5vw,2.6rem);text-wrap:balance}
.fcta p{color:#BFC5CD;margin:12px auto 0;max-width:52ch;font-size:clamp(.9rem,2.4vw,1.05rem)}
.fcta__btns{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:24px}
.fcta__btns .btn{flex:1 1 auto;min-width:160px;max-width:280px}
@media(min-width:900px){.fcta__btns .btn{flex:0 0 auto}}

/* ============================================================
   FOOTER
   ============================================================ */
.ft{background:var(--black);color:#A8AEB6;padding-block:clamp(30px,5vw,56px) 0;font-size:.84rem}
.ft__grid{display:grid;gap:22px}
.ft__cols{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
.ft__logo img{height:44px;width:auto;margin-bottom:10px}
.ft h4{color:#fff;font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;margin-bottom:10px;font-weight:700}
.ft a:hover{color:var(--brand-lt)}
/* The footer links were 22px tall with a 7px gap between them - sixteen
   targets stacked barely a fingertip apart, which on a phone is how you tap
   Reviews and land on FAQs. The gap becomes padding INSIDE each link, so the
   whole 44px is tappable rather than just the text, and the column grows by
   far less than sixteen taller rows would suggest. */
.ft__li{display:flex;flex-direction:column;gap:7px}
@media(max-width:899px){
  .ft__li{gap:0}
  .ft__li a{display:block;padding-block:11px}
}
.ft__soc{display:flex;gap:9px;margin-top:14px}
.ft__soc a{
  width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.08);
  display:grid;place-items:center;color:#fff;transition:background .18s,color .18s;
}
.ft__soc a:hover{background:var(--brand);color:var(--ink)}
.ft__accred{
  margin-top:14px;padding:10px 12px;border:1px dashed rgba(255,255,255,.22);border-radius:10px;
  font-size:.72rem;color:#8C939C;
}
/* bottom padding keeps the last line clear of the fixed WhatsApp button */
.ft__bar{
  margin-top:24px;padding:16px 0 82px;border-top:1px solid rgba(255,255,255,.1);
  display:flex;flex-direction:column;gap:7px;align-items:center;text-align:center;font-size:.74rem;color:#7F868F;
}
.ft__bar a{color:var(--brand-lt)}
@media(min-width:760px){
  .ft{font-size:.86rem}
  .ft__grid{grid-template-columns:1.5fr 2fr;gap:40px}
  .ft__cols{gap:40px}
  .ft__logo img{height:52px}
  .ft__bar{flex-direction:row;justify-content:space-between;text-align:left;padding:18px 96px 24px 0}
}

/* ============================================================
   FLOATING WHATSAPP
   ============================================================ */
.wa{
  position:fixed;right:14px;bottom:14px;z-index:100;
  width:56px;height:56px;border-radius:50%;background:#25D366;color:#fff;
  display:grid;place-items:center;box-shadow:0 8px 26px rgba(37,211,102,.45);
  transition:transform .2s;
}
.wa:hover{transform:scale(1.07)}
.wa svg{width:30px;height:30px;fill:currentColor}
.wa__pulse{position:absolute;inset:0;border-radius:50%;background:#25D366;opacity:.5;animation:pulse 2.4s ease-out infinite;z-index:-1}
@keyframes pulse{0%{transform:scale(1);opacity:.5}70%{transform:scale(1.5);opacity:0}100%{opacity:0}}
@media(min-width:900px){.wa{right:22px;bottom:22px;width:60px;height:60px}}

/* placeholder marker, strip these once real content lands */
.ph{
  display:inline-block;background:#FFF4D6;color:#7A5B00;border:1px dashed #D8B84A;
  font-size:.66rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  padding:2px 7px;border-radius:5px;vertical-align:middle;
}

@media(prefers-reduced-motion:reduce){
  *{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important}
  html{scroll-behavior:auto}
  /* NOTE: hero media is never hidden here, only its motion is stilled */
}

/* ============================================================
   CREDENTIALS
   The trust block. Qualifications only: no scheme membership has been
   confirmed, so there is deliberately no logo strip here to fill with
   NICEIC or NAPIT marks. If one is ever confirmed, add it as a real
   badge rather than a dashed "logo placeholder" box.
   ============================================================ */
.creds{padding-block:var(--sp);background:var(--bg)}
.creds--tint{background:var(--bg-2)}
.creds__grid{
  display:grid;gap:14px;
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
}
.creds__i{
  display:flex;gap:12px;align-items:flex-start;
  background:var(--white);border:1px solid var(--line);
  border-radius:var(--radius);padding:18px;box-shadow:var(--shadow);
}
.creds__i .ic{width:22px;height:22px;color:var(--brand-dp);flex:none;margin-top:2px}
.creds__i b{display:block;font-family:'Archivo';font-weight:700;font-size:.95rem;line-height:1.25}
.creds__i small{display:block;margin-top:5px;color:var(--muted);font-size:.82rem;line-height:1.5}

.creds__bar{
  margin-top:18px;display:grid;gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
  grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
}
.creds__bi{display:flex;gap:11px;align-items:center;background:var(--ink);color:#fff;padding:16px 18px}
.creds__bi .ic{width:20px;height:20px;color:var(--brand);flex:none}
.creds__bi b{display:block;font-family:'Archivo';font-weight:700;font-size:.92rem}
.creds__bi small{display:block;color:#9EA5AE;font-size:.76rem;margin-top:2px}

/* ============================================================
   RATINGS AND REVIEWS
   Three platform scores side by side, each linking to the profile it
   came from. They are never averaged into one composite number: the
   counts are small enough that a blended figure would be inventing
   precision the underlying data does not have.
   ============================================================ */
.stars{display:flex;gap:3px;color:#F5A623}
.stars .ic{width:16px;height:16px}

.rate{
  display:grid;gap:12px;margin-bottom:16px;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
}
.rate__i{
  display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;
  background:var(--white);border:1px solid var(--line);border-radius:var(--radius);
  padding:20px 16px;box-shadow:var(--shadow);transition:transform .2s,box-shadow .2s;
}
.rate__i:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg)}
.rate__n{font-family:'Archivo';font-weight:900;font-size:2rem;line-height:1;letter-spacing:-.02em}
.rate__i small{color:var(--muted);font-size:.8rem}
.rate__note{
  color:var(--muted);font-size:.82rem;line-height:1.55;
  max-width:70ch;margin-inline:auto;text-align:center;margin-bottom:clamp(20px,3vw,32px);
}

/* review cards are <figure>/<blockquote>, so reset the quote marks and
   the default figure margin that would otherwise offset the track */
.rv__card figure,.rv__txt{margin:0}
.rv__txt{quotes:none}
.rv__txt::before,.rv__txt::after{content:none}

/* ============================================================
   BEFORE / AFTER
   One genuine pair: the same kitchen at first fix and finished.
   The <input type=range> is the actual control and is visually hidden
   rather than display:none, so it stays keyboard reachable.
   ============================================================ */
.ba{
  position:relative;border-radius:var(--radius);overflow:hidden;
  box-shadow:var(--shadow-lg);touch-action:pan-y;user-select:none;
  aspect-ratio:1/1;background:var(--ink);
}
.ba img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ba__before{clip-path:inset(0 50% 0 0);z-index:2}
.ba__handle{
  position:absolute;top:0;bottom:0;left:50%;width:3px;background:#fff;z-index:3;
  transform:translateX(-50%);box-shadow:0 0 12px rgba(0,0,0,.45);pointer-events:none;
}
.ba__handle::after{
  content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:42px;height:42px;border-radius:50%;background:#fff;
  box-shadow:0 4px 14px rgba(0,0,0,.35);
}
.ba__tag{
  position:absolute;bottom:14px;z-index:4;pointer-events:none;
  font-family:'Archivo';font-weight:800;font-size:.7rem;letter-spacing:.08em;
  text-transform:uppercase;padding:.38rem .7rem;border-radius:6px;
}
.ba__tag--b{left:14px;background:rgba(16,18,21,.8);color:#fff}
.ba__tag--a{right:14px;background:var(--brand);color:var(--ink)}
.ba__range{
  position:absolute;inset:0;width:100%;height:100%;z-index:5;
  opacity:0;cursor:ew-resize;margin:0;
}
.ba__range:focus-visible{opacity:1;outline:3px solid var(--brand);outline-offset:-3px}
.ba__cap{margin-top:14px;color:var(--muted);font-size:.88rem;line-height:1.6}

/* ============================================================
   CREDENTIAL BADGE STRIP
   Sits directly under the hero, on every service page, and in the
   footer. Text badges, not logos: no competent-person scheme has been
   confirmed, so there is no NICEIC or NAPIT mark to show. See the note
   on `badges` in data.js. If certificates arrive these become images.
   ============================================================ */
.credstrip{background:var(--bg-2);border-bottom:1px solid var(--line);padding-block:clamp(20px,3vw,30px)}
.credstrip__note{
  margin-top:14px;text-align:center;color:var(--muted);font-size:.84rem;
}
.credstrip__note a{color:var(--brand-dp);font-weight:600;text-decoration:underline;text-underline-offset:2px}

/* Explicit column counts, not auto-fit. auto-fit resolved to five across
   at desktop width and left the sixth badge stranded on its own row, which
   read as a layout bug rather than an accreditation strip. */
.badges{display:grid;gap:10px;grid-template-columns:repeat(2,1fr)}
@media(min-width:640px){.badges{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1040px){.badges{grid-template-columns:repeat(6,1fr);gap:8px}}
.badge{
  display:flex;align-items:center;gap:10px;min-width:0;
  background:var(--white);border:1px solid var(--line);border-radius:var(--radius-sm);
  padding:12px 14px;box-shadow:var(--shadow);
}
.badge .ic{width:20px;height:20px;color:var(--brand-dp);flex:none}
@media(min-width:1040px){
  .badge{padding:11px 11px;gap:8px}
  .badge .ic{width:18px;height:18px}
  .badge b{font-size:.79rem}
  .badge small{font-size:.67rem}
}
.badge b{display:block;font-family:'Archivo';font-weight:800;font-size:.86rem;line-height:1.2;letter-spacing:-.01em}
.badge small{display:block;color:var(--muted);font-size:.72rem;line-height:1.35;margin-top:2px}

/* footer variant: on the dark ground, and quieter */
.badges--ft{margin-top:18px;gap:8px}
@media(min-width:1040px){.badges--ft{grid-template-columns:repeat(3,1fr)}}
.badges--ft .badge{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.1);box-shadow:none;padding:10px 12px}
.badges--ft .badge .ic{width:17px;height:17px;color:var(--brand)}
.badges--ft .badge b{font-size:.78rem;color:#fff}
/* .67rem is 10.7px - too small to read on a phone at arm length. The
   desktop grid squeezes six badges across, so the tighter size is kept only
   where the room actually runs out. */
.badges--ft .badge small{font-size:.76rem;color:#8B929C}
@media(min-width:1040px){.badges--ft .badge small{font-size:.67rem}}

/* ============================================================
   PROJECT ZIG-ZAG
   Alternating rows: media then copy, copy then media. The flip is done
   with `order` rather than direction:rtl, so the text inside never
   inherits a reversed writing direction.
   ============================================================ */
.proj{display:grid;gap:clamp(20px,3.5vw,44px);align-items:center;margin-bottom:clamp(30px,5vw,64px)}
.proj:last-of-type{margin-bottom:0}
.proj__body h3{font-size:clamp(1.4rem,3.6vw,2rem);margin-bottom:12px}
.proj__lead{font-size:clamp(1rem,2.5vw,1.1rem);font-weight:500;margin-bottom:12px}
.proj__body p{color:var(--steel);margin-bottom:14px}
.proj__body h4{
  font-family:'Archivo';font-weight:800;font-size:.78rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--brand-dp);margin:22px 0 12px;
}
.proj__more{margin-top:26px;text-align:center;color:var(--muted);font-size:.86rem}
@media(min-width:900px){
  .proj{grid-template-columns:1fr 1fr}
  .proj--flip .proj__media{order:2}
}

/* ============================================================
   GALLERY GRID
   The homepage set. /our-work/ keeps the horizontal scroller for the
   full run of photographs; here a fixed grid shows all six at once
   rather than hiding half behind a swipe most visitors never make.
   ============================================================ */
.galg{display:grid;gap:12px;grid-template-columns:repeat(2,1fr)}
.galg__i{
  margin:0;border-radius:var(--radius);overflow:hidden;background:var(--bg-3);
  aspect-ratio:1/1;cursor:zoom-in;box-shadow:var(--shadow);
}
.galg__i img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.galg__i:hover img{transform:scale(1.05)}
@media(min-width:720px){.galg{grid-template-columns:repeat(3,1fr);gap:16px}}

/* ============================================================
   GOOGLE-BRANDED REVIEW CARDS AND THE WAYS OUT
   ============================================================ */
.gmark{width:18px;height:18px;flex:none}
.rv__who{position:relative}
.rv__who .gmark{margin-left:auto;width:20px;height:20px}
.rv__src{
  margin-left:auto;font-family:'Archivo';font-weight:700;font-size:.68rem;
  letter-spacing:.06em;text-transform:uppercase;color:var(--muted);
  border:1px solid var(--line);border-radius:100px;padding:.2rem .5rem;white-space:nowrap;
}
.rv__card--google .rv__inner{border-top:3px solid #4285F4}

.rvout{
  display:flex;flex-wrap:wrap;gap:12px;justify-content:center;
  margin-top:clamp(22px,3.4vw,32px);
}
.rvout .btn{gap:.6rem}
.rvout .gmark{width:19px;height:19px}
.rvout__note{
  margin-top:14px;text-align:center;color:var(--muted);font-size:.84rem;
  max-width:64ch;margin-inline:auto;line-height:1.6;
}
.rvout__note a{color:var(--brand-dp);font-weight:600;text-decoration:underline;text-underline-offset:2px}

/* .btn--ghost is built for dark grounds; this is the light-ground variant */
.btn--onlight{border:1.5px solid var(--line);color:var(--steel);background:transparent}
.btn--onlight:hover{border-color:var(--brand);color:var(--brand-dp);background:var(--white)}

/* ============================================================
   MEET THE OWNER: branded workwear overlay

   .ab__img was a single framed photo with overflow:hidden, so an inset
   second image would have been clipped by its own container and stretched
   by the .ab__img img rule. The frame therefore moves off the wrapper and
   onto the main photograph, leaving the wrapper as a bare positioning
   context that the inset can hang outside of.

   These rules sit at the end of the stylesheet deliberately: they match
   the earlier .ab__img rules at equal specificity and win on order.
   ============================================================ */
.ab__img{
  position:relative;overflow:visible;aspect-ratio:auto;
  border-radius:0;box-shadow:none;
}
.ab__img > img{
  width:100%;height:auto;aspect-ratio:3/4;object-fit:cover;
  border-radius:var(--radius);box-shadow:var(--shadow-lg);
}
.ab__img > img.ab__sub{
  position:absolute;right:-14px;bottom:-18px;z-index:2;
  width:38%;max-width:190px;height:auto;aspect-ratio:1/1;
  border:6px solid var(--bg);border-radius:var(--radius);
  box-shadow:var(--shadow-lg);
}
.sec--tint .ab__img > img.ab__sub{border-color:var(--bg-2)}
@media(max-width:860px){
  .ab__img > img{aspect-ratio:4/3}
  .ab__img > img.ab__sub{width:32%;right:-8px;bottom:-12px;border-width:5px;aspect-ratio:1/1}
}

/* Google button: white ground with a border, because the four-colour G loses
   its blue segment entirely against a blue button and reads as a smudge.
   This is also the conventional treatment for a Google-branded control. */
.btn--google{background:var(--white);color:var(--ink);border:1.5px solid var(--line);box-shadow:var(--shadow)}
.btn--google:hover{border-color:#4285F4;transform:translateY(-2px);box-shadow:var(--shadow-lg)}

/* ============================================================
   LIGHTING GUIDES
   The "what to check before you buy" list is the reason these pages
   are worth reading, so it gets more weight than a plain bullet list.
   ============================================================ */
.checks{display:grid;gap:12px;margin-block:clamp(16px,2.6vw,24px)}
.check{
  display:flex;gap:13px;align-items:flex-start;
  background:var(--bg-2);border:1px solid var(--line);
  border-left:3px solid var(--brand);border-radius:var(--radius-sm);
  padding:16px 18px;
}
.check .ic{width:19px;height:19px;flex:none;margin-top:3px;color:var(--brand-dp);stroke-width:2.6}
.check b{
  display:block;font-family:'Archivo';font-weight:800;font-size:1rem;
  line-height:1.25;margin-bottom:4px;
}
.check p{margin:0;color:var(--steel);font-size:.93rem;line-height:1.6}

.guidepic{margin:clamp(18px,3vw,28px) 0}
.guidepic img{
  width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;
  border-radius:var(--radius);box-shadow:var(--shadow-lg);
}
.guidepic figcaption{margin-top:10px;color:var(--muted);font-size:.82rem;line-height:1.5}
.guidepic__none{
  margin:clamp(18px,3vw,28px) 0;padding:14px 16px;
  background:var(--bg-2);border:1px dashed var(--line);border-radius:var(--radius-sm);
  color:var(--muted);font-size:.86rem;line-height:1.6;
}

/* ============================================================
   TRANSFORMATION CLIP
   Same footprint as the drag-wipe it replaces, so the zig-zag row
   does not shift depending on which one a project uses.
   ============================================================ */
.pvid{
  position:relative;border-radius:var(--radius);overflow:hidden;
  box-shadow:var(--shadow-lg);background:var(--ink);aspect-ratio:1/1;
}
.pvid__v{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  display:block;background:var(--ink);
}
/* the Before/After tags sit at opposite corners, as on the wipe */
.pvid .ba__tag{z-index:2}
/* Nothing adds controls any more — an earlier reduced-motion branch did, and
   that is how a play button ended up on the page. Kept as a safety net so a
   browser forcing its own bar in does not crop the frame behind it. */
.pvid__v[controls]{object-fit:contain}

/* The stand-in shown when playback is refused outright: same box as the video
   it replaces, so the zig-zag row does not shift depending which one lands. */
.pvid__still{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
}
.pvid__still[hidden]{display:none}

/* Facebook button: white on Facebook blue, which is the treatment their brand
   guidance expects. Unlike the Google mark, theirs is a single monochrome path,
   so it takes currentColor and needs no special ground. */
.btn--facebook{background:#1877F2;color:#fff}
.btn--facebook:hover{background:#0F62D6;transform:translateY(-2px);box-shadow:0 10px 26px rgba(24,119,242,.34)}
.fmark{width:19px;height:19px;flex:none}

/* ============================================================
   DO NOT ADD content-visibility:auto TO THE SECTIONS
   ============================================================
   It was tried on 2026-08-23 and it made scrolling MEASURABLY WORSE. Keeping
   the note because it is the obvious thing to reach for on a page this long,
   and the first measurement of it lies.

   Injecting the rule into an already-loaded page and then scrolling showed
   main-thread rendering falling from 116.5ms to 69.1ms - a 41% win. That
   number is an artefact. By the time the rule was injected every section had
   already been laid out once, so contain-intrinsic-size:auto knew all their
   real heights and never had to guess.

   Shipped in the stylesheet, from a cold load, it knows nothing. Every
   section starts at the placeholder height, and is re-laid-out as the scroll
   reaches it. Same page, same 390x844 screen, same 6x CPU throttle, scrolling
   end to end:

     content-visibility off :  Layout   8.3ms   Paint 89.6ms   TOTAL 111.8ms
     content-visibility on  :  Layout 106.1ms   Paint 49.4ms   TOTAL 196.3ms

   It does cut paint roughly in half. It costs thirteen times as much layout
   to do it, and layout is the part that blocks the frame. A tuned
   contain-intrinsic-size per section might close the gap, but these sections
   run from 200px to 3000px tall, so any single guess is wrong nearly
   everywhere. Not worth it. */

/* ============================================================
   COOKIE BANNER
   ============================================================
   Built by site.js and appended to <body>, so a visitor who has already
   answered never receives the markup. The styles live here rather than being
   injected as a <style> element, which would lean on style-src
   'unsafe-inline' for no reason.

   Reject and Accept are the SAME SIZE AND WEIGHT. Making reject the quiet
   option is the standard dark pattern and it is not a lawful consent under
   PECR - the choice has to be as easy to decline as to give.

   z-index sits above the WhatsApp float (100) but below the lightbox (120)
   is not enough, because the banner must never be trapped under a photo
   viewer either; 130 puts it above both. The float is nudged up while the
   banner is showing so it does not sit on top of the buttons on a phone. */
.cc{
  position:fixed;left:0;right:0;bottom:0;z-index:130;
  background:var(--ink);color:#fff;border-top:1px solid rgba(255,255,255,.14);
  box-shadow:0 -10px 34px rgba(0,0,0,.34);
  transform:translateY(110%);transition:transform .32s ease;
}
.cc--in{transform:translateY(0)}
.cc__in{
  width:min(1180px,100% - (var(--gut)*2));margin-inline:auto;
  padding:16px 0;display:flex;align-items:center;gap:20px;flex-wrap:wrap;
}
.cc__t{flex:1 1 320px;font-size:.88rem;line-height:1.55;color:#C9CDD3}
.cc__t b{color:#fff;font-family:'Archivo';font-weight:800;margin-right:6px}
.cc__t a{color:#fff;text-decoration:underline;text-underline-offset:2px}
.cc__b{display:flex;gap:10px;flex:none}
.cc__b button{
  font-family:'Archivo';font-weight:800;font-size:.92rem;
  padding:12px 24px;border-radius:100px;min-height:44px;min-width:112px;
  transition:background .18s,transform .15s,border-color .18s;
}
.cc__b button:active{transform:translateY(1px)}
.cc__no{background:rgba(255,255,255,.10);color:#fff;border:1px solid rgba(255,255,255,.34)}
.cc__no:hover{background:rgba(255,255,255,.18)}
.cc__yes{background:var(--brand);color:var(--ink)}
.cc__yes:hover{background:var(--brand-lt)}
/* --cc-h is the banner's measured height, set by site.js. The fallback
   only applies for the instant before the first measurement. */
body.has-cc .wa{bottom:calc(20px + var(--cc-h,120px))}
@media(max-width:600px){
  .cc__in{padding:14px 0;gap:12px}
  .cc__t{font-size:.84rem}
  .cc__b{width:100%}
  .cc__b button{flex:1 1 0;min-width:0;padding:12px 10px}
}

/* Honeypot wrapper. Off-screen rather than display:none — the better scrapers
   skip hidden inputs, and the whole point is that a bot believes it is real.
   aria-hidden and tabindex=-1 on the field keep it away from anybody human. */
.hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}

/* ============================================================
   INNER PAGES
   Concatenated onto site.css at build time. Everything here is used
   by the service, location and information pages; the homepage
   styles in site.css are untouched.
   ============================================================ */

/* page header band, sits under the navbar in place of the hero */
.phead{position:relative;background:var(--ink);color:#fff;isolation:isolate;overflow:hidden}
.phead__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.6;z-index:0}
/* The scrim. Cut by 40% from .86/.7/.94 along with the image opacity above,
   so the photograph reads instead of sitting under near-black. The h1 is white
   and sits in the upper half, which is why the top stop stays the darkest of
   the three rather than being flattened to a single value. */
.phead::after{
  content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(16,18,21,.52),rgba(16,18,21,.42) 45%,rgba(16,18,21,.56));
}
.phead__in{position:relative;z-index:2;padding-block:clamp(26px,4.6vw,54px) clamp(30px,4.6vw,58px)}
.phead h1{font-size:clamp(1.75rem,5.6vw,3rem);text-wrap:balance;max-width:20ch}
.phead__sub{margin-top:12px;color:#C3C9D1;font-size:clamp(.95rem,2.5vw,1.12rem);max-width:60ch;text-wrap:balance}
.phead__cta{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px}
.phead__cta .btn{flex:1 1 auto;min-width:150px;max-width:250px}
/* full width on a phone, matching the hero: two half-width buttons side by
   side are a poor thumb target and the pair reads as one control. */
@media(max-width:600px){.phead__cta .btn{flex:1 1 100%;max-width:none}}
@media(min-width:760px){.phead__cta .btn{flex:0 0 auto}}

/* breadcrumbs */
.crumb{padding-block:12px;font-size:.8rem;color:var(--muted);background:var(--bg-2);border-bottom:1px solid var(--line)}
.crumb ol{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:0;padding:0;list-style:none}
.crumb li{display:flex;align-items:center;gap:6px}
.crumb a{color:var(--steel);text-decoration:underline;text-underline-offset:2px}
.crumb a:hover{color:var(--brand-dp)}
.crumb svg{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:2.4;opacity:.55}
.crumb [aria-current]{color:var(--ink);font-weight:600}

/* the answer-first block: the short, self-contained summary that an answer
   engine can lift straight out of the page and still have it make sense */
.keyfact{
  background:var(--bg-2);border:1px solid var(--line);border-left:4px solid var(--brand);
  border-radius:var(--radius);padding:clamp(16px,3.2vw,24px);margin-bottom:clamp(22px,3.4vw,32px);
}
.keyfact h2{font-size:1rem;letter-spacing:.02em;margin-bottom:8px}
.keyfact p{color:var(--steel);font-size:clamp(.94rem,2.5vw,1.06rem);line-height:1.62}

/* long-form body copy */
.prose{max-width:72ch}
.prose h2{font-size:clamp(1.35rem,3.9vw,1.85rem);margin-top:clamp(30px,4vw,44px);margin-bottom:12px;scroll-margin-top:90px}
.prose h3{font-size:clamp(1.05rem,3vw,1.24rem);margin-top:26px;margin-bottom:8px}
.prose p{color:var(--steel);margin-bottom:14px;font-size:clamp(.92rem,2.4vw,1.02rem);line-height:1.68}
.prose>p:first-child{margin-top:0}
.prose a{color:var(--brand-dp);text-decoration:underline;text-underline-offset:2px;font-weight:500}
.prose a:hover{color:var(--ink)}

/* tick list */
.ticks{display:grid;gap:9px;margin:16px 0 4px}
.ticks li{display:flex;gap:11px;align-items:flex-start;color:var(--steel);font-size:clamp(.9rem,2.4vw,1rem);line-height:1.55}
.ticks svg{width:19px;height:19px;flex:none;margin-top:2px;stroke:var(--brand-dp);fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}

/* numbered process steps */
.steps{counter-reset:s;display:grid;gap:12px;margin-top:18px}
.step{
  position:relative;background:var(--white);border:1px solid var(--line);border-radius:var(--radius);
  padding:16px 16px 16px 58px;
}
.step::before{
  counter-increment:s;content:counter(s,decimal-leading-zero);
  position:absolute;left:16px;top:15px;font-family:'Archivo';font-weight:800;font-size:.9rem;
  color:var(--brand-dp);background:var(--bg-3);width:30px;height:30px;border-radius:8px;
  display:grid;place-items:center;
}
.step h3{font-size:1rem;margin:0 0 4px}
.step p{margin:0;color:var(--muted);font-size:.9rem;line-height:1.55}

/* FAQ accordion */
.faq{display:grid;gap:8px;margin-top:18px}
.faq__i{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.faq__i[open]{border-color:#D3D8DE;box-shadow:var(--shadow)}
.faq__q{
  display:flex;align-items:center;justify-content:space-between;gap:14px;cursor:pointer;
  padding:15px 16px;font-family:'Archivo';font-weight:700;font-size:clamp(.95rem,2.6vw,1.06rem);
  line-height:1.35;list-style:none;
}
.faq__q::-webkit-details-marker{display:none}
.faq__q::after{
  content:"";flex:none;width:11px;height:11px;border-right:2.5px solid var(--brand-dp);
  border-bottom:2.5px solid var(--brand-dp);transform:rotate(45deg);margin-top:-4px;transition:transform .22s;
}
.faq__i[open] .faq__q::after{transform:rotate(-135deg);margin-top:2px}
.faq__a{padding:0 16px 16px;color:var(--steel);font-size:clamp(.89rem,2.4vw,.98rem);line-height:1.65}
.faq__a p{margin:0}

/* card grids used for the service and location indexes */
.cards{display:grid;gap:12px}
@media(min-width:640px){.cards{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.cards--3{grid-template-columns:repeat(3,1fr)}}
.card{
  display:flex;flex-direction:column;gap:8px;background:var(--white);border:1px solid var(--line);
  border-radius:var(--radius);padding:clamp(16px,3vw,22px);transition:transform .2s,box-shadow .2s,border-color .2s;
}
.card:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:#D3D8DE}
.card__ico{
  width:38px;height:38px;border-radius:10px;display:grid;place-items:center;
  background:var(--ink);color:var(--brand);flex:none;
}
.card__ico svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.card h3{font-size:clamp(1rem,2.8vw,1.14rem);line-height:1.25}
.card p{color:var(--muted);font-size:.88rem;line-height:1.5;flex:1}
.card__go{
  display:inline-flex;align-items:center;gap:7px;font-family:'Archivo';font-weight:700;
  font-size:.85rem;color:var(--brand-dp);margin-top:2px;
}
.card__go svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s}
.card:hover .card__go svg{transform:translateX(3px)}

/* compact link chips, used for service and location interlinking */
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.chip{
  display:inline-flex;align-items:center;gap:7px;background:var(--white);border:1px solid var(--line);
  border-radius:100px;padding:8px 14px;font-size:.84rem;font-weight:600;color:var(--steel);
  transition:border-color .18s,color .18s,background .18s;
}
.chip:hover{border-color:var(--brand);color:var(--ink);background:var(--bg-2)}
.chip svg{width:14px;height:14px;flex:none;stroke:var(--brand-dp);fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}

/* two column layout with a sticky aside */
.layout{display:grid;gap:clamp(26px,4vw,48px)}
@media(min-width:980px){
  .layout{grid-template-columns:minmax(0,1fr) 330px;align-items:start}
  .aside{position:sticky;top:104px}
}
.aside{display:grid;gap:12px}
.panel{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:18px;box-shadow:var(--shadow)}
.panel--dark{background:var(--ink);border-color:var(--ink);color:#fff}
.panel--dark p{color:#B7BEC7}
.panel h3{font-size:1.06rem;margin-bottom:8px}
.panel p{color:var(--muted);font-size:.88rem;line-height:1.55;margin-bottom:12px}
.panel .btn{width:100%}
.panel__list{display:grid;gap:2px}
.panel__list a{
  display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 0;
  border-bottom:1px solid var(--line);font-size:.88rem;font-weight:500;color:var(--steel);
}
.panel__list a:last-child{border-bottom:0}
.panel__list a:hover{color:var(--brand-dp)}
.panel__list svg{width:14px;height:14px;flex:none;stroke:currentColor;fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;opacity:.5}
.panel--dark .panel__list a{border-color:rgba(255,255,255,.12);color:#D5D9DE}
.panel--dark .panel__list a:hover{color:var(--brand-lt)}

/* comparison and spec tables */
.tblwrap{overflow-x:auto;margin:18px 0;border:1px solid var(--line);border-radius:var(--radius);background:var(--white)}
table.tbl{width:100%;border-collapse:collapse;font-size:.9rem;min-width:440px}
table.tbl th,table.tbl td{padding:11px 14px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
table.tbl thead th{background:var(--bg-2);font-family:'Archivo';font-weight:700;font-size:.82rem;letter-spacing:.03em;text-transform:uppercase;color:var(--steel)}
table.tbl tbody tr:last-child td{border-bottom:0}
table.tbl td:first-child{font-weight:600;color:var(--ink)}

/* mid page call to action band */
.band{background:var(--ink);color:#fff;border-radius:var(--radius);padding:clamp(20px,3.6vw,32px);text-align:center;margin-block:clamp(26px,4vw,40px)}
.band h2{font-size:clamp(1.2rem,3.4vw,1.6rem);margin-bottom:8px;text-wrap:balance}
.band p{color:#B7BEC7;font-size:.94rem;max-width:52ch;margin:0 auto 18px;text-wrap:balance}
.band__btns{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.band__btns .btn{flex:1 1 auto;min-width:150px;max-width:250px}
@media(min-width:700px){.band__btns .btn{flex:0 0 auto}}

/* related links strip at the foot of inner pages */
.related{border-top:1px solid var(--line);padding-top:clamp(24px,3.6vw,36px);margin-top:clamp(28px,4vw,44px)}
.related h2{font-size:1.15rem;margin-bottom:14px}

/* legal and plain text pages */
.legal{max-width:70ch}
.legal h2{font-size:1.2rem;margin-top:30px;margin-bottom:10px}
.legal p,.legal li{color:var(--steel);font-size:.95rem;line-height:1.68;margin-bottom:12px}
.legal ul{list-style:disc;padding-left:22px;margin-bottom:14px}
.legal a{color:var(--brand-dp);text-decoration:underline;text-underline-offset:2px}

/* skip link: off screen until it takes keyboard focus */
.skip{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--brand);color:var(--ink);font-family:'Archivo';font-weight:700;
  padding:12px 18px;border-radius:0 0 10px 0;
}
.skip:focus{left:0}

/* footer insurance line */
.ft__ins{
  display:flex;align-items:flex-start;gap:9px;margin-top:14px;
  color:#C7CDD4;font-size:.8rem;line-height:1.45;
}
.ft__ins svg{width:17px;height:17px;flex:none;margin-top:1px;stroke:var(--brand);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}