/* ============================================================
   SOFT TOUCH SOFTWASH — design tokens
   ------------------------------------------------------------
   Every colour below is SAMPLED FROM THE REAL LOGO + THANK-YOU
   CARD, not invented: brand black (34% of the logo) and an
   electric cyan that sits at ~200 degrees, 100% saturation.
   The light ground is the card's own ice-blue family.
   The brand's energy is kept; the chrome bevels and glows
   around it are what we're leaving behind.
   ============================================================ */
:root{
  /* The real logo, served as a file so the render-blocking stylesheet stays small.
     It used to be a ~60KB base64 blob inlined right here, which meant every page
     paid for the logo before it could draw a single pixel of text. */
  --logo:url("/assets/img/logo.png");
  --paper:#ffffff;        /* every card surface — see note below */
  --rinse:#f4f9fe;        /* legacy pale ground, still used for a few insets */
  --mist:#cfe4f5;         /* borders */
  --mist-2:#e4f0fc;       /* sampled straight off the thank-you card */
  --water:#0071ab;        /* readable brand blue — 5.3:1 on white */
  --water-deep:#0b0b0c;   /* BRAND BLACK — dark bands + hovers */
  --slate:#0f1c24;        /* headings */
  --slate-soft:#44535c;   /* body — 7.5:1 on --rinse */
  --cyan:#00a8f0;         /* core logo cyan. GRAPHIC ONLY on light (2.7:1) */
  --cyan-bright:#48d8fc;  /* logo highlight — text-safe on black (11.7:1) */
  --line:rgba(15,28,36,.10);
  --line-2:rgba(15,28,36,.16);

  /* Shadows are layered rather than single-blur: a tight contact shadow to
     seat the element, plus a wide soft one for depth. Reads as lifted paper
     instead of a drop-shadow rectangle. */
  --shadow-s:0 1px 2px rgba(9,20,28,.05), 0 4px 14px -6px rgba(9,20,28,.14);
  --shadow-m:0 2px 4px rgba(9,20,28,.05), 0 18px 40px -18px rgba(9,20,28,.26);
  --shadow-l:0 30px 70px -30px rgba(9,20,28,.42);
  --shadow-photo:0 1px 2px rgba(9,20,28,.06), 0 24px 56px -24px rgba(9,20,28,.34);

  --r-s:10px; --r-m:16px; --r-l:24px; --r-xl:34px; --r-2xl:44px;

  --display:"Fraunces", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --body:"Karla", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* Fluid type scale. Each step interpolates between a phone and a desktop
     size, so there are no jumps at breakpoints and no separate mobile rules
     to keep in sync. Named by role, not by size. */
  --fs-display:clamp(2.6rem, 1.5rem + 4vw, 4.4rem);
  --fs-h2:clamp(1.95rem, 1.3rem + 2.3vw, 3.05rem);
  --fs-h3:clamp(1.1875rem, 1.08rem + .4vw, 1.4rem);
  --fs-lede:clamp(1.0625rem, 1rem + .35vw, 1.25rem);
  --fs-small:.9375rem;

  /* Vertical rhythm. Sections and stacks pull from one scale so spacing
     stays proportional instead of drifting into arbitrary pixel values. */
  --sp-band:clamp(72px, 8.5vw, 132px);
  --sp-xl:clamp(40px, 5vw, 64px);
  --sp-l:clamp(28px, 3.2vw, 40px);
  --sp-m:20px;
  --sp-s:12px;

  --head-h:76px;
  --ease:cubic-bezier(.22,.8,.32,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--rinse);
  color:var(--slate-soft);
  font-family:var(--body);
  font-size:1.0625rem;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit}
button{font:inherit;color:inherit}

/* Photos carry this site, so give them one consistent treatment: fill the
   frame they're given, never distort, and fade in once decoded rather than
   snapping in band by band. */
.media{position:relative;overflow:hidden;background:var(--mist-2)}
.media img{width:100%;height:100%;object-fit:cover;display:block}
.media--fit img{object-fit:contain}

/* Fraunces is set to its maximum SOFT axis throughout — the typeface
   literally carries the brand promise. */
h1,h2,.display{
  font-family:var(--display);
  font-variation-settings:"SOFT" 100,"opsz" 120;
  color:var(--slate);
  font-weight:600;
  line-height:1.04;
  letter-spacing:-.02em;
  margin:0;
  text-wrap:balance;
}
h3,h4{font-family:var(--body);color:var(--slate);font-weight:700;line-height:1.3;margin:0;letter-spacing:-.01em}
h2{font-size:var(--fs-h2)}
h3{font-size:var(--fs-h3)}
p{margin:0;text-wrap:pretty}

.wrap{width:100%;max-width:1180px;margin-inline:auto;padding-inline:24px}
.section{padding-block:var(--sp-band);position:relative}
.section--paper{background:var(--paper)}
.section--deep{background:var(--water-deep)}
[id]{scroll-margin-top:calc(var(--head-h) + 16px)}

.skip{
  position:absolute;left:16px;top:-60px;z-index:200;
  background:var(--water-deep);color:#fff;padding:12px 18px;border-radius:0 0 var(--r-s) var(--r-s);
  text-decoration:none;font-weight:700;transition:top .18s var(--ease);
}
.skip:focus{top:0}
:where(a,button,input,textarea,select,[tabindex]):focus-visible{
  outline:3px solid var(--water);outline-offset:3px;border-radius:6px;
}
.section--deep :where(a,button):focus-visible{outline-color:var(--cyan-bright)}

/* ---------- signature: the rinse line ----------
   A thin rule under every eyebrow that fills left-to-right,
   like water running across a clean surface. */
.eyebrow{
  font-size:.75rem;font-weight:800;letter-spacing:.15em;text-transform:uppercase;
  color:var(--water);display:inline-flex;align-items:center;gap:10px;margin:0 0 18px;
}
.eyebrow::after{
  content:"";height:2px;width:0;border-radius:2px;
  background:linear-gradient(90deg,var(--water),var(--cyan));
  transition:width 1.05s var(--ease) .12s;
}
.is-in .eyebrow::after{width:58px}
.section--deep .eyebrow{color:var(--cyan-bright)}
.section--deep .eyebrow::after{background:linear-gradient(90deg,var(--cyan-bright),rgba(255,255,255,.35))}

.lede{font-size:var(--fs-lede);max-width:62ch;line-height:1.6}
.section--deep .lede,.section--deep p{color:rgba(255,255,255,.76)}
.section--deep h2,.section--deep h3{color:#fff}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:15px 26px;border-radius:999px;border:1.5px solid transparent;
  font-weight:700;font-size:1rem;letter-spacing:-.01em;text-decoration:none;cursor:pointer;
  transition:transform .2s var(--ease),background-color .2s var(--ease),box-shadow .2s var(--ease),border-color .2s var(--ease),color .2s var(--ease);
  white-space:nowrap;
}
.btn svg{width:18px;height:18px;flex:none}
.btn--primary{background:var(--water);color:#fff;box-shadow:var(--shadow-m)}
.btn--primary:hover{background:var(--water-deep);transform:translateY(-2px)}
.btn--ghost{background:transparent;color:var(--slate);border-color:var(--line-2)}
.btn--ghost:hover{border-color:var(--water);color:var(--water);transform:translateY(-2px);background:var(--paper)}
.btn--light{background:#fff;color:var(--water-deep)}
.btn--light:hover{transform:translateY(-2px);background:var(--mist-2)}
.btn--outline-light{background:transparent;color:#fff;border-color:rgba(255,255,255,.4)}
.btn--outline-light:hover{border-color:#fff;background:rgba(255,255,255,.08);transform:translateY(-2px)}
.btn--sm{padding:11px 20px;font-size:.9375rem}

/* ---------- header ---------- */
.header{
  position:fixed;inset:0 0 auto;z-index:90;height:var(--head-h);
  display:flex;align-items:center;
  transition:background-color .3s var(--ease),box-shadow .3s var(--ease),backdrop-filter .3s var(--ease);
}
.header::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:rgba(255,255,255,.86);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
  opacity:0;transition:opacity .3s var(--ease);
}
.header.is-stuck::after{opacity:1}
.header.is-stuck{box-shadow:0 8px 30px -22px rgba(9,20,28,.5)}
.header__inner{display:flex;align-items:center;gap:20px;width:100%}

.brand{display:inline-flex;align-items:center;gap:12px;text-decoration:none;margin-right:auto}
/* Decorative: the wordmark beside it carries the name for screen readers. */
.brand__mark{
  width:52px;height:44px;flex:none;
  background:var(--logo) center/contain no-repeat;
}
.brand__name{
  font-family:var(--display);font-variation-settings:"SOFT" 100,"opsz" 30;
  font-weight:700;font-size:1.0625rem;color:var(--slate);line-height:1.05;letter-spacing:-.015em;
}
.brand__sub{
  display:block;font-family:var(--body);font-size:.625rem;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--water);margin-top:3px;
}

.nav{display:flex;align-items:center;gap:4px}
/* :not(.btn) keeps these rules from out-specifying the .btn CTA inside the nav */
.nav a:not(.btn){
  text-decoration:none;color:var(--slate-soft);font-weight:600;font-size:.9375rem;
  padding:9px 13px;border-radius:999px;transition:color .18s var(--ease),background-color .18s var(--ease);
}
.nav a:not(.btn):hover{color:var(--water);background:var(--mist-2)}
.nav a:not(.btn).is-active{color:var(--water);background:var(--mist-2)}
.nav > .btn{display:none} /* mobile-panel CTA only */

.burger{
  display:none;width:44px;height:44px;border:1.5px solid var(--line-2);border-radius:12px;
  background:var(--paper);cursor:pointer;padding:0;place-items:center;
}
.burger span{display:block;width:18px;height:1.75px;background:var(--slate);border-radius:2px;transition:transform .28s var(--ease),opacity .2s var(--ease)}
.burger span+span{margin-top:4.5px}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6.25px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.25px) rotate(-45deg)}

/* ---------- hero ----------
   Split layout: the headline never sits on top of a photo, so
   contrast and legibility hold no matter which image is used. */
.hero{padding-top:calc(var(--head-h) + clamp(40px,6vw,72px));padding-bottom:clamp(56px,7vw,96px);position:relative;overflow:hidden}
.hero::before{
  content:"";position:absolute;top:-380px;right:-260px;width:900px;height:900px;border-radius:50%;
  background:radial-gradient(circle,rgba(0,168,240,.13),rgba(0,168,240,0) 62%);pointer-events:none;
}
.hero__grid{display:grid;grid-template-columns:1.04fr .96fr;gap:clamp(32px,4.5vw,64px);align-items:center;position:relative}
.hero h1{font-size:var(--fs-display);margin-bottom:22px}
.hero__sub{font-size:1.1875rem;max-width:46ch;margin-bottom:32px}
.hero__cta{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:34px}

.hero__media{position:relative}
.hero__frame{
  position:relative;border-radius:var(--r-xl);overflow:hidden;background:var(--mist);
  box-shadow:var(--shadow-l);aspect-ratio:4/3.35;
}
.hero__frame img{width:100%;height:100%;object-fit:cover}
/* one-time rinse sheen on load */
.hero__frame::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(105deg,transparent 32%,rgba(255,255,255,.5) 50%,transparent 68%);
  transform:translateX(-120%);
}
.hero.is-ready .hero__frame::after{transition:transform 1.5s cubic-bezier(.4,0,.2,1) .5s;transform:translateX(120%)}
/* Matches .frame__tag so every photo caption on the site reads the same:
   dark glass on the image rather than a white pill competing with it. */
.hero__tag{
  position:absolute;left:14px;bottom:14px;z-index:2;
  display:inline-flex;align-items:center;gap:7px;
  background:rgba(4,30,40,.74);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  padding:8px 14px;border-radius:999px;
  font-size:.78rem;font-weight:700;letter-spacing:.01em;color:#fff;
}

.trust{display:flex;flex-wrap:wrap;gap:8px 10px;list-style:none;margin:0;padding:0}
.trust li{
  display:inline-flex;align-items:center;gap:8px;background:var(--paper);
  border:1px solid var(--line);border-radius:999px;padding:8px 15px;
  font-size:.8125rem;font-weight:700;color:var(--slate);box-shadow:var(--shadow-s);
}
.trust svg{width:14px;height:14px;color:var(--water);flex:none}

/* ---------- section heads ---------- */
.head{max-width:66ch;margin-bottom:var(--sp-xl)}
.head h2{font-size:var(--fs-h2);margin-bottom:16px}
.head--split{max-width:none;display:grid;grid-template-columns:1fr auto;gap:24px;align-items:end}
.head--split .head__text{max-width:62ch}

/* ---------- services ---------- */
.services{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.svc{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r-l);
  padding:32px 28px 30px;transition:transform .28s var(--ease),box-shadow .28s var(--ease),border-color .28s var(--ease);
  position:relative;overflow:hidden;
}
.svc::before{
  content:"";position:absolute;inset:auto 0 0 0;height:3px;
  background:linear-gradient(90deg,var(--water),var(--cyan));
  transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease);
}
.svc:hover{transform:translateY(-5px);box-shadow:var(--shadow-m);border-color:transparent}
.svc:hover::before{transform:scaleX(1)}
.svc__icon{
  width:54px;height:54px;border-radius:16px;background:var(--mist-2);
  display:grid;place-items:center;margin-bottom:22px;
  transition:background-color .28s var(--ease);
}
.svc:hover .svc__icon{background:var(--mist)}
.svc__icon svg{width:27px;height:27px;color:var(--water);stroke-width:1.5}
.svc h3{font-size:1.1875rem;margin-bottom:10px}
.svc p{font-size:.9688rem;line-height:1.65}

/* ---------- gallery ---------- */
.gal{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.gal__item{
  position:relative;border:0;padding:0;background:var(--mist);cursor:zoom-in;
  border-radius:var(--r-m);overflow:hidden;aspect-ratio:4/3;display:block;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease);
}
.gal__item img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.gal__item:hover{transform:translateY(-4px);box-shadow:var(--shadow-m);z-index:2}
.gal__item:hover img{transform:scale(1.06)}
.gal__badge{
  position:absolute;left:10px;top:10px;padding:5px 12px;border-radius:999px;
  font-size:.6875rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase;
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
}
.gal__badge--before{background:rgba(11,11,12,.86);color:#fff}
.gal__badge--after{background:rgba(255,255,255,.94);color:var(--water-deep)}
.gal__cap{
  position:absolute;inset:auto 0 0 0;padding:26px 12px 10px;
  background:linear-gradient(transparent,rgba(11,11,12,.85));
  color:#fff;font-size:.75rem;font-weight:600;text-align:left;
  opacity:0;transform:translateY(6px);transition:opacity .28s var(--ease),transform .28s var(--ease);
}
.gal__item:hover .gal__cap,.gal__item:focus-visible .gal__cap{opacity:1;transform:none}
.gal__note{margin-top:22px;font-size:.875rem;color:var(--slate-soft)}

/* ---------- lightbox ---------- */
.lb{
  position:fixed;inset:0;z-index:120;display:none;place-items:center;
  background:rgba(9,28,35,.93);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);padding:20px;
}
.lb.is-open{display:grid;animation:fade .22s var(--ease)}
@keyframes fade{from{opacity:0}to{opacity:1}}
.lb__fig{margin:0;max-width:min(1080px,100%);text-align:center}
.lb__fig img{
  max-width:100%;max-height:78vh;width:auto;margin-inline:auto;
  border-radius:var(--r-m);box-shadow:0 40px 90px -30px rgba(0,0,0,.7);
}
.lb__cap{color:rgba(255,255,255,.86);font-size:.875rem;margin-top:16px;font-weight:600}
.lb__btn{
  position:absolute;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.24);
  color:#fff;width:48px;height:48px;border-radius:50%;display:grid;place-items:center;cursor:pointer;
  transition:background-color .2s var(--ease),transform .2s var(--ease);
}
.lb__btn:hover{background:rgba(255,255,255,.26);transform:scale(1.06)}
.lb__btn svg{width:20px;height:20px}
.lb__close{top:20px;right:20px}
.lb__prev{left:20px;top:50%;transform:translateY(-50%)}
.lb__next{right:20px;top:50%;transform:translateY(-50%)}
.lb__prev:hover,.lb__next:hover{transform:translateY(-50%) scale(1.06)}

/* ---------- reviews ----------
   The card grid is rendered by the Elfsight widget, which pulls live from the
   Google Business Profile. It ships its own styles (shadow DOM), so we give it
   room rather than fight it — the surrounding type and the panel below are ours. */
.rev-embed{margin-bottom:30px}
.rev-embed:empty{display:none}
.rev__band{
  background:var(--water-deep);border-radius:var(--r-l);
  padding:clamp(30px,4vw,46px);text-align:center;position:relative;overflow:hidden;
}
.rev__band::before{
  content:"";position:absolute;top:-120px;left:50%;transform:translateX(-50%);
  width:520px;height:320px;border-radius:50%;
  background:radial-gradient(ellipse,rgba(0,168,240,.16),transparent 68%);
}
.rev__band h3{color:#fff;font-size:1.375rem;margin-bottom:10px;letter-spacing:-.02em;position:relative}
.rev__band p{color:rgba(255,255,255,.7);font-size:.9688rem;margin-bottom:24px;position:relative;
  max-width:46ch;margin-inline:auto}
.rev__band .btn{position:relative}

/* ---------- signature comparison ---------- */
.cmp{display:grid;grid-template-columns:1fr 1.12fr;gap:20px;align-items:stretch}
.cmp__card{border-radius:var(--r-l);padding:clamp(28px,3vw,40px);border:1px solid var(--line)}
.cmp__card--muted{background:transparent;border-color:var(--line-2);color:var(--slate-soft)}
.cmp__card--hero{background:var(--paper);box-shadow:var(--shadow-m);border-color:transparent;position:relative;overflow:hidden}
.cmp__card--hero::before{
  content:"";position:absolute;inset:0 0 auto 0;height:4px;
  background:linear-gradient(90deg,var(--water),var(--cyan));
}
.cmp__label{
  font-size:.6875rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  margin-bottom:14px;display:block;
}
.cmp__card--muted .cmp__label{color:var(--slate-soft);opacity:.75}
.cmp__card--hero .cmp__label{color:var(--water)}
.cmp__card h3{font-size:1.4375rem;margin-bottom:14px;letter-spacing:-.02em}
.cmp__card--muted h3{color:var(--slate-soft)}
.cmp__list{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:14px}
.cmp__list li{display:flex;gap:13px;align-items:flex-start;font-size:.9688rem;line-height:1.6}
.cmp__list svg{width:20px;height:20px;color:var(--water);flex:none;margin-top:2px}
.cmp__quote{
  margin-top:26px;padding-top:22px;border-top:1px solid var(--line);
  font-family:var(--display);font-variation-settings:"SOFT" 100,"opsz" 40;
  font-size:1.125rem;font-weight:500;color:var(--slate);line-height:1.5;letter-spacing:-.01em;
}
.surfaces{margin-top:34px;display:flex;flex-wrap:wrap;gap:9px;align-items:center}
.surfaces__label{font-size:.8125rem;font-weight:700;color:var(--slate);margin-right:4px}
.chip{
  background:var(--paper);border:1px solid var(--line);border-radius:999px;
  padding:7px 15px;font-size:.8125rem;font-weight:600;color:var(--slate-soft);
}
.cmp__foot{
  margin-top:30px;padding:18px 22px;border-radius:var(--r-m);background:var(--mist-2);
  font-size:.9375rem;color:var(--slate);border:1px solid var(--line);
}

/* ---------- deep band: benefits ---------- */
.section--deep{overflow:hidden}
.section--deep::before{
  content:"";position:absolute;top:-40%;left:-10%;width:60%;height:180%;
  background:radial-gradient(ellipse at center,rgba(255,255,255,.06),transparent 60%);pointer-events:none;
}
.bens{display:grid;grid-template-columns:repeat(5,1fr);gap:1px;background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.14);border-radius:var(--r-l);overflow:hidden;position:relative}
.ben{background:var(--water-deep);padding:32px 24px 30px;transition:background-color .3s var(--ease)}
.ben:hover{background:#17181a}
.ben__num{
  font-family:var(--display);font-variation-settings:"SOFT" 100,"opsz" 40;
  font-size:.875rem;font-weight:700;color:var(--cyan-bright);letter-spacing:.06em;margin-bottom:16px;display:block;
}
.ben h3{font-size:1.0625rem;margin-bottom:9px}
.ben p{font-size:.9063rem;line-height:1.6}

/* ---------- about ---------- */
.about{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(32px,4.5vw,68px);align-items:center}
.about__media{position:relative}
.about__frame{border-radius:var(--r-xl);overflow:hidden;background:var(--mist);box-shadow:var(--shadow-l);aspect-ratio:4/5}
.about__frame img{width:100%;height:100%;object-fit:cover;object-position:top center}
/* Landscape photo variant — a 16:9 shot cropped to 4:5 loses its subject. */
.about__frame--wide{aspect-ratio:4/3}
.about__frame--wide img{object-position:center}
.about__name{
  position:absolute;left:50%;transform:translateX(-50%);bottom:-22px;
  background:var(--paper);border:1px solid var(--line);border-radius:999px;
  padding:12px 24px;box-shadow:var(--shadow-m);text-align:center;white-space:nowrap;
}
.about__name b{
  display:block;font-family:var(--display);font-variation-settings:"SOFT" 100,"opsz" 30;
  font-size:1rem;color:var(--slate);letter-spacing:-.01em;
}
.about__name span{font-size:.6875rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--water)}
.about__body{display:grid;gap:18px}
.about__body p{font-size:1.0625rem}
.pull{
  border-left:3px solid var(--water);padding:4px 0 4px 22px;margin:6px 0;
  font-family:var(--display);font-variation-settings:"SOFT" 100,"opsz" 60;
  font-size:clamp(1.25rem,1rem + .7vw,1.5rem);font-weight:500;color:var(--slate);
  line-height:1.35;letter-spacing:-.02em;
}

/* ---------- process (numbers earned: it is a real sequence) ---------- */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;position:relative}
.step{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r-l);padding:30px 26px;
  position:relative;transition:transform .28s var(--ease),box-shadow .28s var(--ease);
}
.step:hover{transform:translateY(-4px);box-shadow:var(--shadow-m)}
.step__n{
  width:44px;height:44px;border-radius:50%;background:var(--mist-2);border:1px solid var(--line);
  display:grid;place-items:center;margin-bottom:20px;
  font-family:var(--display);font-variation-settings:"SOFT" 100,"opsz" 40;
  font-weight:700;font-size:1.0625rem;color:var(--water);
}
.step h3{font-size:1.0938rem;margin-bottom:9px}
.step p{font-size:.9375rem;line-height:1.6}

/* ---------- areas ---------- */
.areas{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,4vw,58px);align-items:center}
.areas__list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:10px}
.areas__list li{
  display:flex;align-items:center;gap:11px;background:var(--paper);border:1px solid var(--line);
  border-radius:var(--r-m);padding:15px 18px;font-weight:700;color:var(--slate);font-size:.9688rem;
  transition:border-color .2s var(--ease),transform .2s var(--ease);
}
.areas__list li:hover{border-color:var(--water);transform:translateX(3px)}
.areas__list li a{display:flex;align-items:center;gap:11px;color:inherit;text-decoration:none;width:100%}
.areas__list svg{width:16px;height:16px;color:var(--water);flex:none}

/* ---------- faq ---------- */
.faq{max-width:820px;margin-inline:auto}
.faq__item{border-bottom:1px solid var(--line)}
.faq__q{
  width:100%;background:none;border:0;padding:24px 44px 24px 0;text-align:left;cursor:pointer;
  font-weight:700;font-size:1.0625rem;color:var(--slate);position:relative;letter-spacing:-.01em;
  transition:color .2s var(--ease);
}
.faq__q:hover{color:var(--water)}
.faq__q::after,.faq__q::before{
  content:"";position:absolute;right:6px;top:50%;background:var(--water);border-radius:2px;
  transition:transform .3s var(--ease),opacity .3s var(--ease);
}
.faq__q::before{width:14px;height:2px;transform:translateY(-50%)}
.faq__q::after{width:2px;height:14px;right:12px;transform:translateY(-50%)}
.faq__q[aria-expanded="true"]::after{transform:translateY(-50%) rotate(90deg);opacity:0}
.faq__a{overflow:hidden;height:0;transition:height .34s var(--ease)}
.faq__a p{padding:0 40px 26px 0;font-size:1rem}

/* ---------- contact ---------- */
.contact{display:grid;grid-template-columns:.92fr 1.08fr;gap:clamp(30px,4vw,56px);align-items:start}
.ccard{
  background:var(--water-deep);border-radius:var(--r-l);padding:clamp(30px,3.4vw,42px);
  color:rgba(255,255,255,.78);position:relative;overflow:hidden;
}
.ccard::before{
  content:"";position:absolute;top:-140px;right:-140px;width:340px;height:340px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.08),transparent 66%);
}
.ccard h3{color:#fff;font-size:1.375rem;margin-bottom:8px;letter-spacing:-.02em}
.ccard__sub{font-size:.9375rem;margin-bottom:26px;position:relative}
.cline{
  display:flex;gap:15px;align-items:flex-start;padding:17px 0;
  border-top:1px solid rgba(255,255,255,.14);position:relative;text-decoration:none;
}
.cline:first-of-type{border-top:0;padding-top:0}
.cline__ico{
  width:38px;height:38px;border-radius:11px;background:rgba(255,255,255,.1);
  display:grid;place-items:center;flex:none;transition:background-color .22s var(--ease)
}
.cline__ico svg{width:18px;height:18px;color:var(--cyan-bright)}
a.cline:hover .cline__ico{background:rgba(255,255,255,.2)}
.cline__k{font-size:.6875rem;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:rgba(255,255,255,.56);display:block;margin-bottom:3px}
.cline__v{color:#fff;font-weight:700;font-size:1.0313rem;line-height:1.4;letter-spacing:-.01em;word-break:break-word}
a.cline:hover .cline__v{color:var(--cyan-bright)}
.cline__x{font-size:.8125rem;color:rgba(255,255,255,.6);font-weight:500;display:block;margin-top:2px}
.socials{display:flex;gap:9px;margin-top:26px;position:relative;flex-wrap:wrap}
.socials a{
  display:inline-flex;align-items:center;gap:8px;padding:9px 15px;border-radius:999px;
  border:1px solid rgba(255,255,255,.24);color:#fff;text-decoration:none;font-size:.8125rem;font-weight:700;
  transition:background-color .2s var(--ease),border-color .2s var(--ease);
}
.socials a:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.5)}
.socials svg{width:15px;height:15px}

.form{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-l);padding:clamp(28px,3.2vw,40px);box-shadow:var(--shadow-s)}
.form h3{font-size:1.375rem;margin-bottom:6px;letter-spacing:-.02em}
.form__sub{font-size:.9375rem;margin-bottom:26px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.field{display:block;margin-bottom:16px}
.field__l{display:block;font-size:.8125rem;font-weight:700;color:var(--slate);margin-bottom:7px;letter-spacing:-.005em}
.field__l .req{color:var(--water)}
.field input,.field select,.field textarea{
  width:100%;padding:13px 15px;border:1.5px solid var(--line-2);border-radius:var(--r-s);
  background:var(--rinse);font-family:var(--body);font-size:.9688rem;color:var(--slate);
  transition:border-color .2s var(--ease),background-color .2s var(--ease);
}
.field input::placeholder,.field textarea::placeholder{color:#8a99a3}
.field input:focus,.field select:focus,.field textarea:focus{
  border-color:var(--water);background:var(--paper);outline:none;
}
.field select{appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230f1c24' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;background-size:16px;padding-right:42px;
}
.field textarea{resize:vertical;min-height:104px}
.consent{
  display:flex;gap:12px;align-items:flex-start;background:var(--rinse);border:1px solid var(--line);
  border-radius:var(--r-m);padding:16px;margin:6px 0 20px;
}
.consent input{width:19px;height:19px;flex:none;margin-top:2px;accent-color:var(--water);cursor:pointer}
.consent span{font-size:.75rem;line-height:1.55;color:var(--slate-soft)}
.form .btn{width:100%}
.form__note{font-size:.75rem;margin-top:14px;text-align:center;color:var(--slate-soft)}
.form__status{
  display:none;margin-top:16px;padding:14px 16px;border-radius:var(--r-s);
  background:var(--mist-2);border:1px solid var(--water);color:var(--water-deep);
  font-size:.875rem;font-weight:600;
}
.form__status.is-on{display:block}
/* Success and error variants. Colours are picked for AA on their own tint:
   the green text is 5.6:1 on its background, the red 5.9:1. */
.form__status--ok{background:#e7f6ec;border-color:#1f9d55;color:#0f5c31}
.form__status--err{background:#fdecec;border-color:#d64545;color:#912020}

/* Honeypot — visually gone, kept in the layout flow for bots to find, and
   hidden from assistive tech so nobody is asked to fill it. */
.hp{
  position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* While a submit is in flight the button is disabled; make that legible. */
.btn:disabled{opacity:.6;cursor:progress;transform:none}
.btn:disabled:hover{transform:none}

/* ---------- footer ---------- */
.foot{background:#08080a;color:rgba(255,255,255,.6);padding:clamp(52px,6vw,76px) 0 0}
.foot__top{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.1fr;gap:38px;padding-bottom:48px}
.foot .brand__name{color:#fff}
.foot__blurb{font-size:.9063rem;margin-top:18px;max-width:34ch;line-height:1.65}
.foot h4{color:#fff;font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;margin-bottom:18px;font-weight:800}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:11px}
.foot ul a,.foot ul span{text-decoration:none;font-size:.9063rem;transition:color .18s var(--ease)}
.foot ul a:hover{color:var(--cyan-bright)}
.hours{display:flex;justify-content:space-between;gap:14px;font-size:.9063rem}
.hours b{color:#fff;font-weight:700}
.foot__bar{
  border-top:1px solid rgba(255,255,255,.12);padding:24px 0 30px;
  display:flex;flex-wrap:wrap;gap:12px 24px;justify-content:space-between;align-items:center;font-size:.8125rem;
}
.foot__bar a{text-decoration:none}
.foot__bar a:hover{color:var(--cyan-bright)}
.foot__legal{display:flex;gap:20px;flex-wrap:wrap}

/* ---------- mobile call bar ---------- */
.mbar{
  position:fixed;inset:auto 0 0 0;z-index:95;display:none;gap:10px;padding:11px 14px calc(11px + env(safe-area-inset-bottom));
  background:rgba(255,255,255,.94);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-top:1px solid var(--line);box-shadow:0 -8px 30px -18px rgba(9,20,28,.5);
  transform:translateY(0);transition:transform .3s var(--ease);
}
.mbar.is-hidden{transform:translateY(120%)}
.mbar .btn{flex:1;padding:13px 12px;font-size:.9375rem}

/* ---------- reveal ---------- */
/* Scroll reveal is OPT-IN, gated on the .js class that the inline snippet in
   each <head> sets. Without it these rules never apply, so if JavaScript is
   disabled or main.js fails to load the content is simply visible rather than
   a blank page — opacity:0 by default made every element on the site depend
   on a script running. */
.js [data-reveal]{opacity:0;transform:translateY(16px);transition:opacity .7s var(--ease),transform .7s var(--ease);transition-delay:var(--d,0s)}
.js [data-reveal].is-in{opacity:1;transform:none}

/* ============ responsive ============ */
@media (max-width:1080px){
  .services{grid-template-columns:repeat(2,1fr)}
  .bens{grid-template-columns:repeat(3,1fr)}
  .steps{grid-template-columns:repeat(2,1fr)}
  .gal{grid-template-columns:repeat(3,1fr)}
  .foot__top{grid-template-columns:1fr 1fr;gap:34px}
}
@media (max-width:900px){
  .header__inner{gap:12px}
  .burger{display:grid}
  .header__cta{display:none}
  .nav{
    position:fixed;inset:var(--head-h) 0 auto;background:var(--paper);
    border-bottom:1px solid var(--line);flex-direction:column;align-items:stretch;gap:2px;
    padding:14px 20px 22px;box-shadow:var(--shadow-m);
    transform:translateY(-8px);opacity:0;visibility:hidden;pointer-events:none;
    transition:opacity .24s var(--ease),transform .24s var(--ease),visibility .24s;
    max-height:calc(100vh - var(--head-h));overflow:auto;
  }
  .nav.is-open{transform:none;opacity:1;visibility:visible;pointer-events:auto}
  .nav a:not(.btn){padding:14px 12px;font-size:1.0625rem;border-radius:var(--r-s)}
  .nav > .btn{display:inline-flex;margin-top:12px;width:100%}
  .hero__grid,.about,.areas,.contact,.cmp{grid-template-columns:1fr}
  .hero__media{order:-1;max-width:520px;margin-inline:auto;width:100%}
  .hero__frame{aspect-ratio:16/11}
  .hero h1{font-size:clamp(2.35rem,1.4rem + 4.4vw,3.2rem)}
  .about__media{max-width:400px;margin-inline:auto;width:100%}
  .about__frame{aspect-ratio:4/4.4}
  .about__frame--wide{aspect-ratio:4/3}
  .head--split{grid-template-columns:1fr}
  .head--split .head__cta{justify-self:start}
  .mbar{display:flex}
  body{padding-bottom:74px}
  .cmp__card--muted{order:2}
}
@media (max-width:720px){
  .bens{grid-template-columns:1fr 1fr}
  .foot__top{grid-template-columns:1fr;gap:34px;padding-bottom:38px}
  .lb__prev{left:10px}.lb__next{right:10px}
  .lb__btn{width:42px;height:42px}
}
@media (max-width:560px){
  .section{padding-block:clamp(52px,10vw,72px)}
  .services,.steps,.bens{grid-template-columns:1fr}
  .gal{grid-template-columns:repeat(2,1fr);gap:10px}
  .areas__list{grid-template-columns:1fr}
  .grid2{grid-template-columns:1fr;gap:0}
  .hero__cta .btn{width:100%}
  .brand__name{font-size:1rem}
  .trust li{font-size:.75rem;padding:7px 13px}
  .foot__bar{justify-content:flex-start}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;scroll-behavior:auto !important;
  }
  .js [data-reveal]{opacity:1;transform:none}
  .is-in .eyebrow::after{width:58px}
  .hero__frame::after{display:none}
}
@media print{.header,.mbar,.lb{display:none !important}}

/* ============================================================
   SERVICE & LOCATION PAGE COMPONENTS
   Added when the site expanded from one page to a multi-page
   structure. Reuses every token above — no new colours.
   ============================================================ */

/* ---- breadcrumb ---- */
.crumb{
  padding-top:calc(var(--head-h) + 22px);padding-bottom:0;
}
.crumb__list{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px;align-items:center;
  font-size:.8125rem;font-weight:600;color:var(--slate-soft)}
.crumb__list a{color:var(--slate-soft);text-decoration:none;transition:color .18s var(--ease)}
.crumb__list a:hover{color:var(--water)}
.crumb__list li{display:flex;align-items:center;gap:6px}
.crumb__list li:not(:first-child)::before{content:"/";color:var(--line-2);font-weight:400}
.crumb__list li[aria-current]{color:var(--slate)}

/* ---- service hero (image is a support photo, not a full split hero) ---- */
.shero{padding-top:28px;padding-bottom:clamp(48px,6vw,80px)}
.shero__grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(28px,4vw,56px);align-items:center}
.shero h1{font-size:clamp(2.2rem,1.3rem + 3.4vw,3.4rem);margin-bottom:18px}
.shero__sub{font-size:1.125rem;max-width:52ch;margin-bottom:28px}
.shero__frame{border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--shadow-l);aspect-ratio:4/3.3;background:var(--mist)}
.shero__frame img{width:100%;height:100%;object-fit:cover}

/* ---- long-form article typography ---- */
.article{max-width:74ch}
.article h2{font-size:clamp(1.6rem,1.15rem + 1.6vw,2.15rem);margin:0 0 16px}
.article h2:not(:first-child){margin-top:8px}
.article p{margin-bottom:16px;font-size:1.0625rem}
.article ul{margin:0 0 20px;padding-left:0;list-style:none;display:grid;gap:11px}
.article ul li{
  display:flex;gap:12px;align-items:flex-start;font-size:1rem;line-height:1.65;color:var(--slate-soft);
}
.article ul li svg{width:19px;height:19px;color:var(--water);flex:none;margin-top:3px}
.article .lede{font-size:1.1875rem;color:var(--slate);margin-bottom:8px}

/* ---- two-column body + sticky sidebar ---- */
.svc-layout{display:grid;grid-template-columns:1fr 340px;gap:clamp(32px,4vw,56px);align-items:start}
.side{position:sticky;top:calc(var(--head-h) + 24px);display:grid;gap:18px}
.side__card{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r-l);
  padding:28px 26px;box-shadow:var(--shadow-s);
}
.side__card h3{font-size:1.125rem;margin-bottom:8px}
.side__card p{font-size:.9375rem;margin-bottom:20px}
.side__card .btn{width:100%;margin-bottom:10px}
.side__list{list-style:none;margin:18px 0 0;padding:16px 0 0;border-top:1px solid var(--line);display:grid;gap:12px}
.side__list li{display:flex;gap:10px;align-items:center;font-size:.875rem;font-weight:600;color:var(--slate)}
.side__list svg{width:16px;height:16px;color:var(--water);flex:none}
.side__dark{
  background:var(--water-deep);border-radius:var(--r-l);padding:26px 24px;color:rgba(255,255,255,.78);
}
.side__dark h3{color:#fff;font-size:1.0625rem;margin-bottom:8px}
.side__dark p{font-size:.875rem;margin-bottom:16px}

/* ---- what-we-clean / signs grid (icon + label chips) ---- */
.chiplist{display:flex;flex-wrap:wrap;gap:10px;margin:4px 0 26px}
.chiplist .chip{font-size:.875rem;padding:9px 17px}

/* ---- mini gallery (2-4 photos, no lightbox required) ---- */
.minigal{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:8px 0 30px}
.minigal a{
  position:relative;display:block;border-radius:var(--r-m);overflow:hidden;aspect-ratio:4/3;
  background:var(--mist);box-shadow:var(--shadow-s);
}
.minigal img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}
.minigal a:hover img{transform:scale(1.05)}
.minigal span{
  position:absolute;left:9px;top:9px;padding:4px 11px;border-radius:999px;font-size:.6875rem;font-weight:800;
  letter-spacing:.08em;text-transform:uppercase;background:rgba(11,11,12,.82);color:#fff;
}

/* ---- related services ---- */
.related{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.related a{
  display:flex;flex-direction:column;gap:6px;background:var(--paper);border:1px solid var(--line);
  border-radius:var(--r-m);padding:20px 22px;text-decoration:none;transition:transform .22s var(--ease),box-shadow .22s var(--ease),border-color .22s var(--ease);
}
.related a:hover{transform:translateY(-3px);box-shadow:var(--shadow-m);border-color:transparent}
.related__k{font-size:.6875rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--water)}
.related h4{font-size:1.0625rem;color:var(--slate)}
.related p{font-size:.875rem;color:var(--slate-soft)}

/* ---- final CTA band (used at the bottom of service/location pages) ---- */
.cta-final{
  background:var(--water-deep);border-radius:var(--r-xl);padding:clamp(40px,5vw,64px);
  text-align:center;position:relative;overflow:hidden;
}
.cta-final::before{
  content:"";position:absolute;top:-160px;left:50%;transform:translateX(-50%);width:640px;height:380px;
  border-radius:50%;background:radial-gradient(ellipse,rgba(0,168,240,.16),transparent 68%);
}
.cta-final h2{color:#fff;margin-bottom:14px;position:relative}
.cta-final p{color:rgba(255,255,255,.72);max-width:52ch;margin:0 auto 30px;position:relative;font-size:1.0625rem}
.cta-final__row{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;position:relative}

@media (max-width:980px){
  .shero__grid{grid-template-columns:1fr}
  .shero__frame{order:-1;max-width:480px;margin-inline:auto;width:100%;aspect-ratio:16/11}
  .svc-layout{grid-template-columns:1fr}
  .side{position:static}
  .related{grid-template-columns:1fr 1fr}
  .minigal{grid-template-columns:1fr 1fr}
}
@media (max-width:560px){
  .related{grid-template-columns:1fr}
  .minigal{grid-template-columns:1fr}
  .article{max-width:none}
}

/* ---- "learn more" link inside homepage service cards ---- */
.svc__more{
  display:inline-flex;align-items:center;gap:6px;margin-top:14px;font-size:.875rem;font-weight:700;
  color:var(--water);text-decoration:none;
}
.svc__more svg{width:15px;height:15px;transition:transform .2s var(--ease)}
.svc__more:hover svg{transform:translateX(3px)}

/* ============================================================
   2026 REFRESH — components added for the redesign.
   Everything below is new; nothing above was removed, so the
   existing pages keep rendering exactly as they did while these
   opt-in classes carry the updated look.
   ============================================================ */

/* ---------- photo frame ----------
   One treatment for every photograph on the site: a hairline that
   stops light images dissolving into the page, a soft lift, and a
   caption slot that sits on the image without hiding it. */
.frame{
  position:relative;border-radius:var(--r-l);overflow:hidden;
  background:var(--mist-2);box-shadow:var(--shadow-photo);
  outline:1px solid rgba(255,255,255,.5);outline-offset:-1px;
}
.frame::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  border-radius:inherit;box-shadow:inset 0 0 0 1px var(--line);
}
.frame img{width:100%;height:100%;object-fit:cover;display:block}
.frame--tall{aspect-ratio:4/5}
.frame--wide{aspect-ratio:16/10}
.frame--square{aspect-ratio:1}

/* Caption chip — used to say where a photo was taken, which is the
   local-SEO signal a generic stock image could never carry. */
.frame__tag{
  position:absolute;left:14px;bottom:14px;z-index:2;
  display:inline-flex;align-items:center;gap:7px;
  padding:8px 14px;border-radius:999px;
  background:rgba(11,11,12,.74);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  color:#fff;font-size:.78rem;font-weight:700;letter-spacing:.01em;
}
.frame__tag svg{width:13px;height:13px;color:var(--cyan-bright)}

/* ---------- before / after slider ----------
   The single most persuasive thing this business owns is a pair of
   photographs of the same surface an hour apart. A drag handle lets
   the visitor do the comparison themselves.

   Accessibility: the control is a real range input, so it is
   keyboard operable and announced correctly with zero ARIA. If JS
   never runs the two images simply stack — the content still works. */
.ba{
  position:relative;border-radius:var(--r-l);overflow:hidden;
  box-shadow:var(--shadow-photo);background:var(--mist-2);
  aspect-ratio:4/3;touch-action:pan-y;
  --pos:50%;
}
.ba--tall{aspect-ratio:3/4}
.ba--wide{aspect-ratio:16/10}
.ba__img{position:absolute;inset:0}
.ba__img img{width:100%;height:100%;object-fit:cover;display:block}
/* The "after" layer is clipped to the handle position. */
.ba__img--after{clip-path:inset(0 0 0 var(--pos))}
.ba__label{
  position:absolute;top:14px;z-index:3;
  padding:6px 13px;border-radius:999px;
  font-size:.72rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  background:rgba(11,11,12,.72);color:#fff;
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
}
.ba__label--before{left:14px}
.ba__label--after{right:14px;background:rgba(0,113,171,.86)}

/* The visible seam. */
.ba__line{
  position:absolute;top:0;bottom:0;left:var(--pos);width:2px;z-index:4;
  background:#fff;box-shadow:0 0 0 1px rgba(9,20,28,.18);
  transform:translateX(-1px);pointer-events:none;
}
/* Handle: a white disc with a left/right chevron pair, so it reads as
   "drag me" rather than as a decorative dot. The arrows are an inline
   SVG data URI — crisp at any zoom, and no extra request. */
.ba__line::after{
  content:"";position:absolute;top:50%;left:50%;
  width:46px;height:46px;margin:-23px 0 0 -23px;border-radius:50%;
  background:#fff center/20px 20px no-repeat;
  box-shadow:var(--shadow-m);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230071ab' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9.5 7-5 5 5 5M14.5 7l5 5-5 5'/%3E%3C/svg%3E");
}
/* The range input is stretched across the whole image and made
   invisible — it stays the real, focusable control underneath. */
.ba__range{
  position:absolute;inset:0;z-index:5;width:100%;height:100%;
  margin:0;opacity:0;cursor:ew-resize;
}
.ba__range:focus-visible ~ .ba__line{
  box-shadow:0 0 0 3px var(--water);
}
/* Without JS the slider is meaningless, so hide the seam until the
   script confirms it is live. */
.ba:not(.is-live) .ba__line,
.ba:not(.is-live) .ba__range{display:none}
.ba:not(.is-live) .ba__img--after{clip-path:inset(0 0 0 50%)}

.ba-figure{margin:0 0 var(--sp-l)}
.ba__cap{
  margin-top:12px;font-size:.875rem;color:var(--slate-soft);
  display:flex;align-items:center;gap:8px;
}
.ba__cap svg{width:14px;height:14px;color:var(--water);flex:none}

/* Two sliders side by side on a service page. */
.ba-pair{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-l)}
@media (max-width:860px){ .ba-pair{grid-template-columns:1fr} }

/* ---------- proof band ----------
   Replaces a wall of adjectives with the few things that are
   verifiably true about this business. */
.proof{
  display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
  background:var(--line);border:1px solid var(--line);
  border-radius:var(--r-l);overflow:hidden;
}
.proof__item{background:var(--paper);padding:26px 22px;text-align:center}
.section--paper .proof__item{background:var(--rinse)}
.proof__k{
  display:block;font-family:var(--display);font-variation-settings:"SOFT" 100,"opsz" 40;
  font-size:1.75rem;font-weight:600;color:var(--slate);line-height:1;margin-bottom:8px;
}
.proof__v{display:block;font-size:.82rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--slate-soft)}
@media (max-width:760px){ .proof{grid-template-columns:1fr 1fr} }

/* ---------- location hero ----------
   Gives every city page a photograph and a local hierarchy, so the
   set stops reading as one template with the town name swapped out. */
/* The breadcrumb above already clears the fixed header, so this only needs
   breathing room — adding --head-h again would double the gap. */
.lhero{
  padding-top:28px;padding-bottom:var(--sp-xl);
  position:relative;overflow:hidden;
}
.lhero::before{
  content:"";position:absolute;top:-340px;right:-240px;width:820px;height:820px;border-radius:50%;
  background:radial-gradient(circle,rgba(0,168,240,.13),rgba(0,168,240,0) 62%);pointer-events:none;
}
.lhero__grid{
  display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,4vw,60px);
  align-items:center;position:relative;
}
.lhero h1{font-size:clamp(2.1rem,1.25rem + 3.2vw,3.35rem);margin-bottom:18px}
.lhero__sub{font-size:var(--fs-lede);max-width:48ch;margin-bottom:26px;line-height:1.6}
.lhero__frame{aspect-ratio:4/3}
@media (max-width:900px){
  .lhero__grid{grid-template-columns:1fr}
  .lhero__frame{order:-1;aspect-ratio:16/10}
}

/* Local facts strip — county, drive time, neighbourhoods. Real
   specifics, pulled from each page's own copy. */
.lfacts{
  display:flex;flex-wrap:wrap;gap:10px;margin-top:22px;padding:0;list-style:none;
}
.lfacts li{
  display:inline-flex;align-items:center;gap:8px;
  padding:9px 15px;border-radius:999px;
  background:var(--paper);border:1px solid var(--line);
  font-size:.8125rem;font-weight:700;color:var(--slate);
}
.lfacts svg{width:14px;height:14px;color:var(--water);flex:none}

/* ---------- service page hero media ---------- */
.shero__frame.frame{aspect-ratio:4/3}

/* ---------- section intro variant ---------- */
.head--center{text-align:center;margin-inline:auto}
.head--center .eyebrow{justify-content:center}

/* ---------- gallery figure captions ---------- */
.galgrid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:var(--sp-l);
}
.galfig{margin:0}
.galfig figcaption{
  margin-top:10px;font-size:.875rem;color:var(--slate-soft);
  display:flex;align-items:center;gap:7px;
}
.galfig figcaption svg{width:13px;height:13px;color:var(--water);flex:none}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  .ba__img--after,.frame,.btn{transition:none!important}
}

/* ---------- blog ----------
   The post list and post header. Deliberately narrow measure on the body:
   long-form reading wants ~65 characters a line, not the full grid width. */
.plist{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:var(--sp-l)}
.pcard{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-l);overflow:hidden;
  transition:transform .28s var(--ease),box-shadow .28s var(--ease),border-color .28s var(--ease)}
.pcard:hover{transform:translateY(-4px);box-shadow:var(--shadow-m);border-color:var(--mist)}
.pcard__link{display:block;text-decoration:none;height:100%}
.pcard__media{border-radius:0;box-shadow:none;outline:0}
.pcard__media::after{box-shadow:none}
.pcard__media img{transition:transform .6s var(--ease)}
.pcard:hover .pcard__media img{transform:scale(1.05)}
.pcard__body{padding:24px}
.pcard__cat{display:inline-block;font-size:.7rem;font-weight:800;letter-spacing:.13em;text-transform:uppercase;
  color:var(--water);margin-bottom:12px}
.pcard__title{font-family:var(--display);font-variation-settings:"SOFT" 100,"opsz" 40;
  font-size:1.3rem;font-weight:600;line-height:1.15;letter-spacing:-.015em;color:var(--slate);margin:0 0 12px}
.pcard__ex{font-size:.9375rem;line-height:1.6;color:var(--slate-soft);
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.pcard__date{display:block;margin-top:16px;font-size:.8125rem;font-weight:700;color:var(--slate-soft)}

.post__head{padding-top:28px;max-width:820px}
.post__head h1{font-size:clamp(2rem,1.2rem + 3vw,3.1rem);margin-bottom:18px}
.post__meta{display:flex;flex-wrap:wrap;gap:10px;align-items:center;font-size:.875rem;color:var(--slate-soft)}
.post__hero{margin-top:var(--sp-l);aspect-ratio:16/9}
.post__body{max-width:70ch}

/* ---------- video facade ----------
   A poster frame with a play button that swaps itself for the real YouTube
   iframe on click. Nothing from youtube.com is requested until then. */
.vids{display:grid;grid-template-columns:1.75fr 1fr;gap:var(--sp-l);align-items:start}
@media (max-width:820px){ .vids{grid-template-columns:1fr;max-width:520px;margin-inline:auto} }

.vid{margin:0}
.vid__btn{
  position:relative;display:block;width:100%;padding:0;border:0;cursor:pointer;
  background:var(--mist-2);border-radius:var(--r-l);overflow:hidden;
  box-shadow:var(--shadow-photo);
}
.vid--wide .vid__btn{aspect-ratio:16/9}
.vid--tall .vid__btn{aspect-ratio:9/16}
.vid__btn img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.vid__btn:hover img{transform:scale(1.03)}
/* Scrim so the play button holds contrast over a bright poster. */
.vid__btn::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(9,20,28,0) 45%,rgba(9,20,28,.35));
  box-shadow:inset 0 0 0 1px var(--line);border-radius:inherit;
}
.vid__play{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:2;
  width:74px;height:74px;border-radius:50%;
  background:rgba(255,255,255,.94);color:var(--water);
  display:grid;place-items:center;box-shadow:var(--shadow-m);
  transition:transform .22s var(--ease),background-color .22s var(--ease);
}
.vid__play svg{width:30px;height:30px;margin-left:4px}
.vid__btn:hover .vid__play{transform:translate(-50%,-50%) scale(1.08);background:#fff}
.vid__btn:focus-visible{outline:3px solid var(--water);outline-offset:3px}
.vid__cap{margin-top:12px;font-size:.9375rem;font-weight:700;color:var(--slate)}
/* The iframe inherits the poster's box once swapped in. */
.vid iframe{width:100%;height:100%;border:0;display:block;border-radius:var(--r-l)}
.vid__frame{position:relative;border-radius:var(--r-l);overflow:hidden;box-shadow:var(--shadow-photo);background:#000}
.vid--wide .vid__frame{aspect-ratio:16/9}
.vid--tall .vid__frame{aspect-ratio:9/16}

/* ============================================================
   SKY — atmospheric ground treatment
   ------------------------------------------------------------
   The page ground used to be #f4f9fe: two percent away from white,
   which meant white cards had nothing to lift off and the whole
   page read flat. This replaces it with the sky from the brand
   reference photo — deep teal, soft cloud wisps, fine dust grain —
   so every white card now floats on it.

   COLOURS ARE MEASURED, NOT PICKED BY EYE. Against --sky, body text
   (--on-sky) sits at 5.98:1 and white cards separate at 6.59:1;
   against --sky-deep it is 8.06:1. The reference photo's own lighter
   teal was tested first and rejected — white body text on it lands
   at 2.8-3.9:1, under the 4.5:1 that AA requires. Cloud wisps are
   capped at 10% white for the same reason: at 18% they drag text
   contrast below the line.

   Long-form reading (service articles, blog bodies) stays on white
   .section--paper bands. Only short-form text sits on the sky.
   ============================================================ */
:root{
  --sky-top:#0c6580;
  --sky:#0a5c76;
  --sky-deep:#08506a;
  --on-sky:#eaf6fa;        /* body text on sky      — 5.98:1 */
  --on-sky-dim:#cbe5ee;    /* secondary text on sky — 5.01:1 */
  --cyan-sky:#7fe4ff;      /* eyebrows and accents  — 4.53:1 */
  --line-sky:rgba(255,255,255,.16);
  --line-sky-2:rgba(255,255,255,.28);
  /* Cards need a heavier, cooler shadow to read as lifted off a dark
     ground — the old light-ground shadows disappear against teal. */
  --shadow-card:0 1px 2px rgba(4,30,40,.28), 0 18px 40px -16px rgba(4,30,40,.55);
  --shadow-card-hi:0 2px 6px rgba(4,30,40,.3), 0 34px 70px -22px rgba(4,30,40,.66);
}

/* ---- the sky itself: two fixed layers behind all content ---- */
body{background:var(--sky);color:var(--on-sky)}

body::before{
  content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:
    radial-gradient(120% 55% at 62% -8%, rgba(255,255,255,.10), rgba(255,255,255,0) 62%),
    radial-gradient(80% 40% at 12% 4%, rgba(255,255,255,.07), rgba(255,255,255,0) 60%),
    radial-gradient(90% 45% at 88% 96%, rgba(255,255,255,.05), rgba(255,255,255,0) 60%),
    linear-gradient(178deg, var(--sky-top) 0%, var(--sky) 46%, var(--sky-deep) 100%);
}
/* Fine dust grain, as in the reference photo. The screen blend makes
   the noise read as bright specks rather than dirty grey. */
body::after{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  opacity:.16;mix-blend-mode:screen;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='260' height='260' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Sections that used the old pale ground now let the sky through. */
.section:not(.section--paper):not(.section--deep){background:transparent}

/* ---- short-form text on sky ---- */
:where(.hero),:where(.lhero),:where(.shero),:where(.crumb),:where(.post__head),
:where(.section:not(.section--paper):not(.section--deep)){color:var(--on-sky)}

:where(.section:not(.section--paper):not(.section--deep)) h1,
:where(.section:not(.section--paper):not(.section--deep)) h2,
:where(.section:not(.section--paper):not(.section--deep)) h3,
:where(.section:not(.section--paper):not(.section--deep)) h4,
.hero h1,.lhero h1,.shero h1,.post__head h1{color:#fff}

:where(.section:not(.section--paper):not(.section--deep)) .lede,
.hero__sub,.lhero__sub,.shero__sub,.post__meta,.gal__note,.ba__cap,
.galfig figcaption,.surfaces__label{color:var(--on-sky-dim)}

.hero .eyebrow,.lhero .eyebrow,.shero .eyebrow,.post__head .eyebrow,
.section:not(.section--paper):not(.section--deep) .eyebrow{color:var(--cyan-sky)}
.hero .eyebrow::after,.lhero .eyebrow::after,.shero .eyebrow::after,
.post__head .eyebrow::after,
.section:not(.section--paper):not(.section--deep) .eyebrow::after{
  background:linear-gradient(90deg,var(--cyan-sky),rgba(255,255,255,.3));
}

/* Breadcrumbs sit on sky on every inner page. */
.crumb__list,.crumb__list a{color:var(--on-sky-dim)}
.crumb__list a:hover{color:#fff}
.crumb__list li[aria-current]{color:#fff}

/* ---- white cards keep their dark text ----
   Every card listed here is a --paper surface, so it stays light with
   dark type. Listing them explicitly is deliberate: inheriting the
   light body colour into a white card is the one way this theme could
   produce unreadable copy. */
.svc,.step,.form,.related a,.proof__item,.lfacts li,.trust li,.chip,
.areas__list li,.side__card,.pcard,.cmp__card--hero,.gal__item{color:var(--slate-soft)}
:where(.section--paper){color:var(--slate-soft)}

.svc h3,.step h3,.form h3,.related a h4,.side__card h3,.pcard__title,
.cmp__card--hero h3,.areas__list li,.lfacts li,.trust li,
:where(.section--paper) :where(h1,h2,h3,h4){color:var(--slate)}
:where(.section--paper) :where(.lede,p){color:var(--slate-soft)}
:where(.section--paper) .eyebrow{color:var(--water)}
:where(.section--paper) .eyebrow::after{background:linear-gradient(90deg,var(--water),var(--cyan))}

/* Lift every card off the darker ground. */
.svc,.step,.related a,.pcard,.form,.side__card,.proof,.frame,.ba,.vid__btn,
.gal__item,.cmp__card--hero{box-shadow:var(--shadow-card)}
.svc:hover,.step:hover,.related a:hover,.pcard:hover,.gal__item:hover{box-shadow:var(--shadow-card-hi)}
.section--paper .svc,.section--paper .step,.section--paper .related a,
.section--paper .pcard,.section--paper .proof{box-shadow:var(--shadow-s)}
.section--paper .svc:hover,.section--paper .step:hover,
.section--paper .related a:hover,.section--paper .pcard:hover{box-shadow:var(--shadow-m)}

/* ---- surfaces that used to be transparent ----
   On the old near-white ground a border was enough to read these as
   cards. On sky they need an actual surface. */
.faq__item{
  background:rgba(255,255,255,.94);border:1px solid var(--line);
  border-radius:var(--r-m);margin-bottom:10px;padding-inline:18px;
  box-shadow:var(--shadow-card);
}
.faq__item .faq__q{color:var(--slate)}
.faq__item .faq__a p{color:var(--slate-soft)}
.section--paper .faq__item{background:var(--rinse);box-shadow:none}

.cmp__card--muted{
  background:rgba(255,255,255,.10);border-color:var(--line-sky-2);
  color:var(--on-sky-dim);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
}
.cmp__card--muted h3{color:#fff}
/* .cmp__foot is a pale inset band, so it keeps dark type even though it
   sits inside a sky section. */
.cmp__foot,.cmp__foot strong{color:var(--slate)}
.cmp__card--muted .cmp__label{color:var(--cyan-sky);opacity:1}
.cmp__card--hero .cmp__label{color:var(--water)}

/* ---- header over sky ----
   At the top of the page the header is transparent over teal, so its
   type must be light. Once .is-stuck fades the white panel in, it
   flips back to dark. */
.header:not(.is-stuck) .brand__name{color:#fff}
.header:not(.is-stuck) .brand__sub{color:var(--cyan-sky)}
.header:not(.is-stuck) .nav a:not(.btn){color:var(--on-sky-dim)}
.header:not(.is-stuck) .nav a:not(.btn):hover,
.header:not(.is-stuck) .nav a:not(.btn).is-active{color:#fff;background:rgba(255,255,255,.14)}
.header:not(.is-stuck) .burger{background:rgba(255,255,255,.14);border-color:var(--line-sky-2)}
.header:not(.is-stuck) .burger span{background:#fff}

/* ---- buttons on sky ---- */
.hero__cta .btn--ghost,.lhero .btn--ghost,.shero .btn--ghost,
.section:not(.section--paper):not(.section--deep) .btn--ghost{
  color:#fff;border-color:var(--line-sky-2);
}
.hero__cta .btn--ghost:hover,.lhero .btn--ghost:hover,.shero .btn--ghost:hover,
.section:not(.section--paper):not(.section--deep) .btn--ghost:hover{
  background:rgba(255,255,255,.14);border-color:#fff;color:#fff;
}
/* The primary button was brand blue on near-white. On teal it has to be
   the light one to stay the loudest thing on the page. */
.hero__cta .btn--primary,
.section:not(.section--paper):not(.section--deep) .btn--primary{
  background:#fff;color:var(--sky-deep);
}
.hero__cta .btn--primary:hover,
.section:not(.section--paper):not(.section--deep) .btn--primary:hover{
  background:var(--cyan-sky);color:var(--sky-deep);
}

/* Focus rings must be visible against teal, not brand blue. */
.section:not(.section--paper):not(.section--deep) :where(a,button,input,select,textarea):focus-visible,
.hero :where(a,button):focus-visible,.lhero :where(a,button):focus-visible,
.crumb :where(a):focus-visible,.header:not(.is-stuck) :where(a,button):focus-visible{
  outline-color:var(--cyan-sky);
}

/* ---- misc corrections on sky ---- */
.areas__list li{background:var(--paper)}
.rev__band{box-shadow:var(--shadow-card)}
.frame__tag{background:rgba(4,30,40,.8)}
.lb{background:rgba(4,24,32,.94)}


/* ---- sky theme: contrast corrections found by auditing the rendered DOM ---- */
/* .gal__note also appears under the video grid, which is a white paper band —
   the light "on sky" colour made it invisible there. */
:where(.section--paper) .gal__note,
:where(.section--paper) .galfig figcaption{color:var(--slate-soft)}

/* Text inside the frosted comparison card sat at 4.06-4.49:1 against the
   lightened glass. Brightening both steps clears 4.5:1. */
.cmp__card--muted{color:var(--on-sky)}
.cmp__card--muted .cmp__label{color:#a5ecff;opacity:1}

/* The header panel was 86% white. Over teal that tint dragged the brand-blue
   sub-label to 4.26:1; at 95% it clears 4.5:1 and the blur still reads. */
.header::after{background:rgba(255,255,255,.95)}
/* In the dark footer the same label needs the light cyan, not brand blue. */
.foot .brand__sub{color:var(--cyan-bright)}

/* ---- dark cards that rely on inherited colour ----
   .side__dark sets a light colour on itself and lets children inherit. A
   direct rule on `p` beats inheritance no matter how low its specificity,
   so the paper-band default was landing dark slate on a near-black card.
   These children need the colour stated outright. */
.side__dark p,.side__dark li,.side__dark span{color:rgba(255,255,255,.76)}

/* ---- before/after slider ----
   The caption sits in a white article column, so it takes dark type; only
   the labels sit on the photo. The "after" pill was 4.22:1 with white text
   on 86% brand blue — deepening it clears 4.5:1. */
.ba__cap{color:var(--slate-soft)}
.ba__label--after{background:rgba(0,84,128,.92)}

/* ---- reviews link fallback (inner pages) ----
   .rev-embed:empty is hidden, so if Elfsight is ever blocked this button is
   the only thing left in the section. It is plain HTML and always renders. */
.rev__link{margin-top:26px;text-align:center}

/* The About pull-quote sets its own dark colour, which beats inherited light
   text, so it was rendering at 2.31:1 on the sky. Its accent rule needs the
   brighter cyan too — brand blue all but disappears against teal. */
:where(.section:not(.section--paper):not(.section--deep)) .pull{color:#fff;border-left-color:var(--cyan-sky)}

/* ---- blog body lists ----
   .article ul drops the list marker because service-page lists supply their
   own SVG icon per item. Blog bodies are hand-written plain HTML, so give a
   plain <li> a bullet of its own rather than leaving it unmarked. */
.post__body ul li::before{
  content:"";width:6px;height:6px;border-radius:50%;
  background:var(--water);flex:none;margin-top:10px;
}
.post__body ol{margin:0 0 20px;padding-left:22px;display:grid;gap:11px}
.post__body ol li{font-size:1rem;line-height:1.65;color:var(--slate-soft);padding-left:4px}
.post__body ol li::marker{color:var(--water);font-weight:700}
.post__body h2{margin-top:34px}
.post__body h2:first-of-type{margin-top:8px}

/* ---- legal pages ----
   Long, dense, rarely-read documents. Narrow measure, clear hierarchy, and
   enough breathing room that section numbers are findable when someone is
   scanning for one clause. */
.legal{max-width:72ch;margin-inline:auto}
.legal h2{
  font-size:clamp(1.35rem,1.1rem + .9vw,1.7rem);margin:40px 0 14px;
  padding-top:20px;border-top:1px solid var(--line);
}
.legal h2:first-of-type{margin-top:0;padding-top:0;border-top:0}
.legal h3{font-size:1.0625rem;margin:24px 0 10px;color:var(--slate)}
.legal p{margin-bottom:14px;font-size:1rem;line-height:1.7}
.legal ul{margin:0 0 18px;padding-left:22px;display:grid;gap:8px;list-style:disc}
.legal li{font-size:1rem;line-height:1.65;color:var(--slate-soft);padding-left:4px}
.legal li::marker{color:var(--water)}
.legal a{color:var(--water);font-weight:600}
.legal__meta{color:var(--slate-soft);font-size:.9375rem;margin-bottom:28px}
.legal__callout{
  background:var(--rinse);border:1px solid var(--mist);border-left:3px solid var(--water);
  border-radius:var(--r-m);padding:22px 24px;margin-bottom:32px;
}
.legal__callout h2{
  font-size:1.0625rem;margin:0 0 12px;padding:0;border:0;
  font-family:var(--body);font-weight:800;letter-spacing:.02em;text-transform:uppercase;
}
.legal__callout p:last-child{margin-bottom:0}
.legal__close{
  margin-top:32px;padding-top:22px;border-top:1px solid var(--line);
  font-weight:700;color:var(--slate);
}

/* ---------- footer service-area map ----------
   A lazy facade: the branded preview below is all that ships. The real
   Google Maps iframe is injected by main.js only on activation, so the
   footer costs nothing extra until a visitor asks for the map. */
.foot-map{margin-bottom:44px}
.foot-map__facade{
  display:block;width:100%;padding:0;border:0;cursor:pointer;position:relative;
  border-radius:var(--r-l);overflow:hidden;
  aspect-ratio:1200/300;background:#062f3f;
  box-shadow:var(--shadow-card);
}
.foot-map__art{position:absolute;inset:0;width:100%;height:100%;display:block}
.foot-map__overlay{
  position:absolute;inset:0;z-index:2;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;gap:8px;padding:24px;
  background:radial-gradient(120% 120% at 50% 40%, rgba(6,47,63,.35), rgba(6,47,63,.72));
}
.foot-map__pin{
  width:48px;height:48px;border-radius:50%;display:grid;place-items:center;
  background:rgba(127,228,255,.16);color:var(--cyan-bright);margin-bottom:4px;
}
.foot-map__pin svg{width:24px;height:24px}
.foot-map__title{
  font-family:var(--display);font-variation-settings:"SOFT" 100,"opsz" 40;
  font-weight:600;color:#fff;font-size:clamp(1.15rem,1rem + .8vw,1.6rem);letter-spacing:-.01em;
}
.foot-map__sub{
  color:rgba(255,255,255,.82);font-size:.875rem;font-weight:600;max-width:52ch;line-height:1.5;
}
.foot-map__cta{
  display:inline-flex;align-items:center;gap:8px;margin-top:10px;
  padding:11px 20px;border-radius:999px;
  background:#fff;color:var(--sky-deep);font-weight:700;font-size:.9375rem;
  transition:transform .2s var(--ease),background-color .2s var(--ease);
}
.foot-map__cta svg{width:16px;height:16px;transition:transform .2s var(--ease)}
.foot-map__facade:hover .foot-map__cta{background:var(--cyan-sky)}
.foot-map__facade:hover .foot-map__cta svg{transform:translateX(3px)}
.foot-map__facade:focus-visible{outline:3px solid var(--cyan-bright);outline-offset:3px}

/* Once activated, the same box holds the live iframe plus a text link out. */
.foot-map__frame{position:relative;border-radius:var(--r-l);overflow:hidden;
  box-shadow:var(--shadow-card);aspect-ratio:1200/300;background:#062f3f}
.foot-map__frame iframe{width:100%;height:100%;border:0;display:block}
.foot-map__out{
  margin-top:12px;text-align:center;font-size:.875rem;
}
.foot-map__out a{color:var(--cyan-bright);font-weight:700;text-decoration:none}
.foot-map__out a:hover{text-decoration:underline}

@media (max-width:640px){
  .foot-map__facade,.foot-map__frame{aspect-ratio:4/3}
}

/* ---------- service-area map: light variant (homepage #areas) ----------
   The footer map is a dark card on the near-black footer. In the homepage
   Service Area section it sits on the teal sky, so it uses a light card
   instead — matching every other card that floats on the sky. */
.areas-map-wrap{margin-top:clamp(30px,4vw,50px)}
.areas-map-wrap .foot-map{margin-bottom:0}
.foot-map--light .foot-map__facade{background:#e6f0f9}
.foot-map--light .foot-map__overlay{
  background:radial-gradient(120% 120% at 50% 42%, rgba(255,255,255,.30), rgba(214,233,245,.62));
}
.foot-map--light .foot-map__pin{background:rgba(0,113,171,.12);color:var(--water)}
.foot-map--light .foot-map__title{color:var(--slate)}
.foot-map--light .foot-map__sub{color:var(--slate-soft)}
.foot-map--light .foot-map__cta{background:var(--water);color:#fff}
.foot-map--light .foot-map__facade:hover .foot-map__cta{background:var(--water-deep)}