/* Clean Pool design. Generated from the approved static build. Colours and sizes are the custom properties in :root. */
/* Elementor resets link styles inside page content; plain text links keep their underline. */
.elementor a:where(:not([class])){text-decoration:underline}

/* Layout: a pool seen from above, then in section. Cool coping-stone page, a murky pool you
   clean in the hero, ceramic depth-marker tiles as section labels; the page runs from the
   shallow end to the deep end. Charcoal type and the green-to-blue wave come from the logo. */
:root{
  --stone:#F2F6F7;
  --stone-2:#E6EEF0;
  --card:#FFFFFF;
  --ink:#3A3B3E;
  --ink-soft:#5C6266;
  --line:rgba(58,59,62,.12);
  --line-strong:rgba(58,59,62,.24);
  --logo-type:#58585A;
  --wave-a:#85AF7F;
  --wave-m:#79B3CA;
  --wave-b:#73B3E3;
  --tile:#3E9DBA;
  --tile-ink:#1F7896;
  --btn-bg:#1F7896;
  --btn-ink:#FFFFFF;
  --track:rgba(58,59,62,.09);
  --band:rgba(62,157,186,.24);
  --ok:#3E9DBA;
  --warn:#D9572F;
  --warn-ink:#B2401C;
  --warn-soft:rgba(217,87,47,.12);
  --hot-band:rgba(217,87,47,.07);
  --chip:rgba(115,179,227,.17);
  --leaf:#6F8A3A;
  --leaf-vein:rgba(30,40,40,.3);
  --face:#FFFFFF;
  --face-ink:#3A3B3E;
  --header-bg:rgba(242,246,247,.96);
  --shadow:rgba(20,60,80,.28);
  --coping:#DCE6E8;
  --g-line:rgba(70,135,160,.55);
  --glass:rgba(255,255,255,.8);
  --glass-ink:#2F3437;
  --pole:#7F9096;
  --brush:#FFFFFF;
  --brush-edge:rgba(40,60,68,.55);
  --bristle:#1F7896;
  --pool-shallow:#A3E2E8;
  --pool-deep:#4CA6CC;
  --pool-light:#FFFFFF;
  --pool-lane:#1C5A73;
  --dirty-shallow:#96AC60;
  --dirty-deep:#4F6A39;
  --xs-water:rgba(115,179,227,.32);
  --xs-shell:#DCE6E8;
  --xs-hatch:rgba(58,59,62,.2);
  --algae:#7FA052;
  --sand:#C29A57;
  --calcium:rgba(255,255,255,.95);
  /* the deep end: dark in both themes */
  --deep:#0A2F3C;
  --deep-2:#0E3846;
  --deep-3:#124253;
  --on-deep:#E6F2F4;
  --on-deep-soft:#A6C3C9;
  --deep-line:rgba(230,242,244,.15);
  --field:rgba(230,242,244,.06);
  --aqua:#90D6E5;
  --aqua-ink:#062A33;
  --sky-top:#BFDDEA;
  --sky-hz:#F2EEE6;
  --sun-col:#FFF1D2;
  --sun-x:.88;
  --sun-y:.035;
  --scene-night:0;
  --sea:#5A98B2;
  --sea-hz:#D8E5E8;
  --water-near:#3CB4C8;
  --water-far:#2B8BAF;
  --spill:#FFFFFF;
  --hero-soft:#454B4F;
  --hero-kicker:#165E76;
  --glass-line:rgba(255,255,255,.7);
  --glass-line-strong:rgba(47,52,55,.16);
  --coping-hi:rgba(255,255,255,.5);
  --tile-a:#1E6A92;
  --tile-b:#2C89B2;
  --tile-c:#62B9D6;
  --grout:#E6ECEE;
  --coping-far:#EAE4D8;
  --steel-d:#4A5860;
  --steel-l:#E8EEF1;
  --ladder-x:.7;

  --font:"Comfortaa","Varela Round",ui-rounded,"SF Pro Rounded","Nunito",system-ui,sans-serif;
  --fs-xs:.8125rem;
  --fs-s:.9375rem;
  --fs-m:1.0625rem;
  --fs-l:1.3125rem;
  --fs-xl:clamp(1.85rem, 3.4vw, 2.6rem);
  --fs-hero:clamp(2.55rem, 5.1vw, 4.3rem);
  --r-l:24px;
  --head-h:72px;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --stone:#0E1B20; --stone-2:#12232A; --card:#162B33; --ink:#E4EEF0; --ink-soft:#9DB2B8;
    --line:rgba(228,238,240,.11); --line-strong:rgba(228,238,240,.24);
    --logo-type:#90D6E5; --tile:#73C4DC; --tile-ink:#90D6E5; --btn-bg:#90D6E5; --btn-ink:#062A33;
    --track:rgba(228,238,240,.1); --band:rgba(115,196,220,.26); --ok:#73C4DC;
    --warn:#F07D55; --warn-ink:#F59A78; --warn-soft:rgba(240,125,85,.16); --hot-band:rgba(240,125,85,.09);
    --chip:rgba(144,214,229,.14); --leaf:#93B25A; --leaf-vein:rgba(0,0,0,.32); --face:#E4EEF0; --face-ink:#2F3437;
    --header-bg:rgba(14,27,32,.95); --shadow:rgba(0,0,0,.55); --coping:#1A3038; --g-line:rgba(130,195,210,.5);
    --glass:rgba(6,22,30,.8); --glass-ink:#E4EEF0; --pole:#5D7279; --brush:#E4EEF0; --bristle:#73C4DC;
    --pool-shallow:#1D8197; --pool-deep:#0B4660; --pool-light:#B9EEF5; --pool-lane:#05262E;
    --dirty-shallow:#56703A; --dirty-deep:#283B20;
    --xs-water:rgba(115,196,220,.2); --xs-shell:#1A3038; --xs-hatch:rgba(228,238,240,.15);
    --algae:#5F8A3B; --sand:#D6B67C; --calcium:rgba(228,238,240,.9);
    --deep:#061C24; --deep-2:#0B2630; --deep-3:#0F3039; --on-deep:#E4EEF0; --on-deep-soft:#9DB2B8;
    --deep-line:rgba(228,238,240,.13); --field:rgba(228,238,240,.05);
    --sky-top:#061520; --sky-hz:#1C3A49; --sun-col:#CFE2EA; --sun-x:.87; --sun-y:.042; --scene-night:1;
    --sea:#0A2430; --sea-hz:#1A3A48; --water-near:#2BC3D8; --water-far:#0E5269; --spill:#8FE3EE;
    --hero-soft:#B9CDD2; --hero-kicker:#9ADCE8; --glass-line:rgba(228,238,240,.12); --glass-line-strong:rgba(228,238,240,.2); --coping-hi:rgba(255,255,255,.06);
    --tile-a:#0E4560; --tile-b:#155F7C; --tile-c:#2A8AA6; --grout:#8DA3AB; --coping-far:#5A5F62; --steel-d:#26333A; --steel-l:#AFC4CC;
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --stone:#0E1B20; --stone-2:#12232A; --card:#162B33; --ink:#E4EEF0; --ink-soft:#9DB2B8;
  --line:rgba(228,238,240,.11); --line-strong:rgba(228,238,240,.24);
  --logo-type:#90D6E5; --tile:#73C4DC; --tile-ink:#90D6E5; --btn-bg:#90D6E5; --btn-ink:#062A33;
  --track:rgba(228,238,240,.1); --band:rgba(115,196,220,.26); --ok:#73C4DC;
  --warn:#F07D55; --warn-ink:#F59A78; --warn-soft:rgba(240,125,85,.16); --hot-band:rgba(240,125,85,.09);
  --chip:rgba(144,214,229,.14); --leaf:#93B25A; --leaf-vein:rgba(0,0,0,.32); --face:#E4EEF0; --face-ink:#2F3437;
  --header-bg:rgba(14,27,32,.95); --shadow:rgba(0,0,0,.55); --coping:#1A3038; --g-line:rgba(130,195,210,.5);
  --glass:rgba(6,22,30,.8); --glass-ink:#E4EEF0; --pole:#5D7279; --brush:#E4EEF0; --bristle:#73C4DC;
  --pool-shallow:#1D8197; --pool-deep:#0B4660; --pool-light:#B9EEF5; --pool-lane:#05262E;
  --dirty-shallow:#56703A; --dirty-deep:#283B20;
  --xs-water:rgba(115,196,220,.2); --xs-shell:#1A3038; --xs-hatch:rgba(228,238,240,.15);
  --algae:#5F8A3B; --sand:#D6B67C; --calcium:rgba(228,238,240,.9);
  --deep:#061C24; --deep-2:#0B2630; --deep-3:#0F3039; --on-deep:#E4EEF0; --on-deep-soft:#9DB2B8;
  --deep-line:rgba(228,238,240,.13); --field:rgba(228,238,240,.05);
  --sky-top:#061520; --sky-hz:#1C3A49; --sun-col:#CFE2EA; --sun-x:.87; --sun-y:.042; --scene-night:1;
    --sea:#0A2430; --sea-hz:#1A3A48; --water-near:#2BC3D8; --water-far:#0E5269; --spill:#8FE3EE;
    --hero-soft:#B9CDD2; --hero-kicker:#9ADCE8; --glass-line:rgba(228,238,240,.12); --glass-line-strong:rgba(228,238,240,.2); --coping-hi:rgba(255,255,255,.06);
    --tile-a:#0E4560; --tile-b:#155F7C; --tile-c:#2A8AA6; --grout:#8DA3AB; --coping-far:#5A5F62; --steel-d:#26333A; --steel-l:#AFC4CC;
    color-scheme:dark;
}

*,*::before,*::after{box-sizing:border-box}
@media (prefers-reduced-motion: no-preference){ html{scroll-behavior:smooth} }
body{
  margin:0;
  background:var(--stone);
  color:var(--ink);
  font-family:var(--font);
  font-size:var(--fs-m);
  font-weight:450;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;
}
body::before{
  content:""; position:fixed; inset:0 0 auto; height:env(safe-area-inset-top,0px);
  z-index:30; background:var(--stone);
}
img{max-width:100%}
[hidden]{display:none !important}
h1,h2,h3,p,ul,ol,dl,dd,figure{margin:0}
a{color:inherit}
:focus-visible{outline:3px solid var(--tile); outline-offset:3px; border-radius:6px}
.deep :focus-visible{outline-color:var(--aqua)}
.sprite{position:absolute; width:0; height:0; overflow:hidden}
.vh{position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0}

.wrap{
  width:100%; max-width:1200px; margin-inline:auto;
  padding-left:max(16px, env(safe-area-inset-left,0px));
  padding-right:max(16px, env(safe-area-inset-right,0px));
}
@media (min-width:640px){
  .wrap{
    padding-left:max(32px, env(safe-area-inset-left,0px));
    padding-right:max(32px, env(safe-area-inset-right,0px));
  }
}

/* scroll reveal: --p is 1 at rest; the script lowers it only for content still below the fold */
[data-rise]{
  --p:1;
  transform:translate3d(0, calc((1 - var(--p)) * 44px), 0);
  opacity:calc(.3 + .7 * var(--p));
}

/* ---------- header ---------- */
.site-header{
  position:sticky; top:var(--cp-top, env(safe-area-inset-top,0px)); z-index:20;
  background:var(--header-bg);
  box-shadow:0 1px 0 transparent;
  transition:box-shadow .3s;
}
.site-header.is-scrolled{box-shadow:0 1px 0 var(--line)}
.site-header:not(.is-scrolled){background:transparent}
.site-header:not(.is-scrolled) .nav a{color:var(--hero-soft)}
.site-header:not(.is-scrolled) .nav a:hover,.site-header:not(.is-scrolled) .nav a[aria-current="page"]{color:var(--ink)}
.head-row{display:flex; align-items:center; gap:24px; height:var(--head-h)}
.brand{display:block; text-decoration:none; border-radius:8px; flex:none}
.logo{display:block; width:86px; height:46px; color:var(--logo-type)}
.nav{display:none; gap:22px; margin-left:auto; font-size:var(--fs-s); font-weight:600}
.nav a{text-decoration:none; color:var(--ink-soft); transition:color .2s; white-space:nowrap}
.nav a:hover,.nav a[aria-current="page"]{color:var(--ink)}
.nav a[aria-current="page"]{text-decoration:underline; text-decoration-color:var(--tile); text-underline-offset:.45em; text-decoration-thickness:2px}
.head-row > .btn{margin-left:auto}
.menu{position:relative}
.menu summary{
  list-style:none; cursor:pointer; display:grid; place-items:center; width:42px; height:42px; border-radius:50%;
  box-shadow:inset 0 0 0 1.5px var(--line-strong);
}
.menu summary::-webkit-details-marker{display:none}
.menu summary span,.menu summary span::before,.menu summary span::after{display:block; width:16px; height:2px; border-radius:2px; background:var(--ink); content:""}
.menu summary span{position:relative}
.menu summary span::before{position:absolute; top:-5px}
.menu summary span::after{position:absolute; top:5px}
.menu[open] summary span{background:transparent}
.menu[open] summary span::before{top:0; transform:rotate(45deg)}
.menu[open] summary span::after{top:0; transform:rotate(-45deg)}
.menu-panel{
  position:absolute; right:0; top:calc(100% + 10px); z-index:25; width:min(260px, calc(100vw - 32px));
  display:grid; padding:8px; border-radius:18px; background:var(--card);
  box-shadow:0 0 0 1px var(--line), 0 24px 48px -24px var(--shadow);
}
.menu-panel a{padding:.75rem .9rem; border-radius:12px; text-decoration:none; font-weight:700; font-size:var(--fs-s)}
.menu-panel a:hover{background:var(--chip)}
@media (min-width:1040px){ .nav{display:flex} .head-row > .btn{margin-left:0} .menu{display:none} }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  padding:.95rem 1.4rem; border-radius:999px; border:0;
  font:700 var(--fs-s)/1 var(--font); text-decoration:none; cursor:pointer;
  transition:transform .2s ease, background-color .2s ease, box-shadow .2s ease;
}
.btn:hover{transform:translateY(-1px)}
.btn-sm{padding:.7rem 1.1rem; font-size:var(--fs-xs)}
.btn-primary{background:var(--btn-bg); color:var(--btn-ink)}
.btn-quiet{color:var(--ink); box-shadow:inset 0 0 0 1.5px var(--line-strong)}
.btn-quiet:hover{box-shadow:inset 0 0 0 1.5px var(--ink-soft)}
.btn-aqua{background:var(--aqua); color:var(--aqua-ink)}
.btn-line{color:var(--on-deep); box-shadow:inset 0 0 0 1.5px var(--deep-line)}
.btn-line:hover{box-shadow:inset 0 0 0 1.5px var(--on-deep-soft)}
.btn-block{width:100%}

/* ---------- shared section bits ---------- */
.section{
  padding-block:clamp(72px, 10vw, 124px);
  scroll-margin-top:calc(var(--head-h) + env(safe-area-inset-top,0px));
}
.stack{display:grid; gap:clamp(36px, 5vw, 56px)}
.sec-head{display:grid; gap:16px; max-width:680px; align-content:start}
.eyebrow{
  display:flex; align-items:center; gap:12px;
  font-size:var(--fs-xs); font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-soft);
}
.depth-tile{
  display:inline-flex; align-items:baseline; gap:2px;
  padding:.45em .62em .4em; border-radius:5px;
  background:var(--face); color:var(--face-ink);
  font-size:.8125rem; font-weight:700; letter-spacing:0; text-transform:none; line-height:1;
  box-shadow:0 0 0 1px var(--line), inset 0 -2px 0 rgba(58,59,62,.08);
  font-variant-numeric:tabular-nums;
}
.depth-tile small{font-size:.7rem; font-weight:600}
h2{font-size:var(--fs-xl); font-weight:700; line-height:1.14; letter-spacing:-.018em; text-wrap:balance; max-width:22ch}
.sec-lede{color:var(--ink-soft); max-width:58ch}
.crumbs{padding-top:18px; font-size:var(--fs-xs); font-weight:600; color:var(--ink-soft)}
.crumbs ol{list-style:none; padding:0; display:flex; flex-wrap:wrap; gap:6px}
.crumbs li+li::before{content:"/"; margin-right:6px; opacity:.6}
.crumbs a{text-decoration:none}
.crumbs a:hover{color:var(--ink)}

/* ---------- hero: a full-screen infinity pool, seen from the near edge ---------- */
.hero{
  --s:0; --hz:56%;
  position:relative; isolation:isolate; overflow:hidden; contain:paint;
  display:flex; min-height:100vh; min-height:100svh;
  margin-top:calc(-1 * var(--head-h));
  background:linear-gradient(180deg, var(--sky-top) 0%, var(--sky-hz) var(--hz), var(--coping-far) var(--hz), var(--coping-far) calc(var(--hz) + 1.3%), var(--tile-b) calc(var(--hz) + 1.3%), var(--tile-b) calc(var(--hz) + 5.5%), var(--water-far) calc(var(--hz) + 5.5%), var(--water-near) 100%);
  touch-action:pan-y;
}
.hero::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:16px; z-index:1;
  background:var(--coping);
  box-shadow:0 -1px 0 var(--coping-hi), 0 -16px 30px -14px var(--shadow);
}
.scene{position:absolute; inset:0; width:100%; height:100%; display:block; z-index:-1}
.hero-inner{
  position:relative; display:flex; flex-direction:column; gap:clamp(22px, 4vh, 44px);
  min-height:inherit;
  padding-block:calc(var(--head-h) + clamp(24px, 8vh, 96px)) calc(16px + clamp(18px, 4vh, 40px));
}
.hero-copy{display:grid; gap:22px; max-width:760px; translate:0 calc(var(--s) * -56px); opacity:calc(1 - var(--s) * .7)}
.hero h1{display:grid; gap:16px}
.h1-kicker{
  font-size:var(--fs-xs); font-weight:700; line-height:1.5; letter-spacing:.16em; text-transform:uppercase;
  color:var(--hero-kicker); text-wrap:balance;
}
.h1-main{font-size:clamp(2.7rem, 6.4vw, 5.75rem); font-weight:700; line-height:1.02; letter-spacing:-.034em; text-wrap:balance}
.wave-word{position:relative; display:inline-block; white-space:nowrap; padding-bottom:.12em}
.wave-word::after{
  content:""; position:absolute; left:.02em; right:0; bottom:-.06em; height:.2em;
  background:linear-gradient(90deg, var(--wave-a), var(--wave-m) 55%, var(--wave-b));
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 12'%3E%3Cpath d='M0 6C5 .6 15 .6 20 6S35 11.4 40 6' fill='none' stroke='black' stroke-width='3'/%3E%3C/svg%3E") 0 0/.9em 100% repeat-x;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 12'%3E%3Cpath d='M0 6C5 .6 15 .6 20 6S35 11.4 40 6' fill='none' stroke='black' stroke-width='3'/%3E%3C/svg%3E") 0 0/.9em 100% repeat-x;
  animation:drift 6s linear infinite;
}
@keyframes drift{ to{-webkit-mask-position:.9em 0; mask-position:.9em 0} }
.lede{color:var(--hero-soft); font-size:clamp(1.0625rem, 1.35vw, 1.25rem); max-width:44ch}
.cta-row{display:flex; flex-wrap:wrap; gap:12px}
.hero .btn-quiet{background:var(--glass)}
.hero .crumbs{padding:0; color:var(--hero-soft)}

.hero-bar{
  margin-top:auto; display:grid; gap:12px 28px; align-items:center;
  padding:14px 20px; border-radius:22px; color:var(--glass-ink);
  background:var(--glass);
  box-shadow:inset 0 0 0 1px var(--glass-line), 0 24px 48px -28px var(--shadow);
}
@media (min-width:900px){ .hero-bar{grid-template-columns:minmax(0,1fr) auto} }
.glance{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); margin:0; min-width:0}
.glance div{display:grid; gap:2px; align-content:start; padding:2px 12px; border-left:1px solid var(--glass-line-strong); min-width:0}
.glance div:first-child{padding-left:0; border-left:0}
@media (min-width:900px){ .glance{display:flex} .glance div{padding:2px 24px; flex:none} .glance div:first-child{padding-left:0} }
.glance dt{font-size:.6875rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; opacity:.7}
.glance dd{font-size:var(--fs-s); font-weight:700; line-height:1.35}
@media (min-width:900px){ .glance dd{white-space:nowrap} }
@media (max-width:899px){ .hero-bar{padding:12px 14px; border-radius:18px} .glance dd{font-size:.875rem} }
.clarity{display:flex; flex-wrap:wrap; align-items:center; gap:8px 16px; font-size:var(--fs-xs); min-width:0}
@media (min-width:900px){ .clarity{justify-content:flex-end} }
.pool-chip{display:inline-flex; align-items:center; gap:8px; font-weight:700; white-space:nowrap}
.pool-chip .dot{width:9px; height:9px; border-radius:50%; background:var(--algae); transition:background-color .4s}
.pool-chip[data-state="cloudy"] .dot{background:var(--wave-m)}
.pool-chip[data-state="clearing"] .dot{background:var(--wave-b)}
.pool-chip[data-state="clear"] .dot{background:var(--tile)}
.pool-chip b{font-variant-numeric:tabular-nums; min-width:3.2ch; text-align:right}
.pool-chip .chip-label{font-weight:600; opacity:.7}
.pool-hint{font-weight:600; opacity:.72}
.pool-replay{
  display:inline-flex; align-items:center; gap:6px; border:0; cursor:pointer; white-space:nowrap;
  font:700 var(--fs-xs)/1 var(--font); color:var(--glass-ink); background:transparent;
  padding:.5rem .85rem; border-radius:999px; box-shadow:inset 0 0 0 1.5px var(--glass-line-strong);
}
.pool-replay:hover{box-shadow:inset 0 0 0 1.5px var(--glass-ink)}
.pool-replay svg{width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round}
.hero.no-gl .pool-hint{display:none}
@media (prefers-reduced-motion: no-preference){
  .hero-copy > *, .hero-inner > .crumbs, .hero-bar{animation:heroin 1.1s cubic-bezier(.2,.7,.2,1) both}
  .hero-copy > :nth-child(2){animation-delay:.12s}
  .hero-copy > :nth-child(3){animation-delay:.24s}
  .hero-bar{animation-delay:.4s}
}
@keyframes heroin{ from{opacity:.15; transform:translateY(20px)} }

/* community ticker */
.routes{
  overflow:hidden; border-bottom:1px solid var(--line); padding-block:24px 22px;
  display:grid; gap:10px;
}
.routes-label{font-size:var(--fs-xs); font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft)}
.routes-track{display:flex; width:max-content; transform:translate3d(calc(var(--m, 0) * -1px), 0, 0)}
.routes-list{display:flex; align-items:center; list-style:none; margin:0; padding:0; font-size:clamp(1.25rem, 2.6vw, 1.75rem); font-weight:700; letter-spacing:-.01em; white-space:nowrap}
.routes-list li{display:flex; align-items:center; gap:28px; padding-right:28px}
.routes-list li::after{content:""; width:10px; height:10px; border-radius:50%; background:linear-gradient(90deg, var(--wave-a), var(--wave-b))}
.routes-list a{text-decoration:none}
.routes-list a:hover{color:var(--tile-ink)}

/* ---------- services + cross-section ---------- */
.svc-layout{display:grid; gap:24px}
@media (min-width:960px){ .svc-layout{grid-template-columns:minmax(0,1.08fr) minmax(0,1fr); gap:64px; align-items:start} }
.xs-wrap{
  position:sticky; top:calc(var(--cp-top, env(safe-area-inset-top,0px)) + var(--head-h)); z-index:3;
  background:var(--stone); padding-block:10px 14px; margin-inline:-4px; padding-inline:4px;
}
@media (min-width:960px){ .xs-wrap{top:calc(var(--cp-top, env(safe-area-inset-top,0px)) + var(--head-h) + 40px); padding:0; margin:0; background:none} }
.xs{
  position:relative; display:grid; gap:10px;
  background:var(--card); border-radius:var(--r-l); padding:clamp(12px, 2vw, 22px);
  box-shadow:0 0 0 1px var(--line), 0 30px 60px -40px var(--shadow);
}
.xs-top{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap}
.xs-title{font-size:var(--fs-xs); font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft)}
.xs-name{font-size:var(--fs-xs); font-weight:700; padding:.4rem .75rem; border-radius:999px; background:var(--chip); color:var(--tile-ink); transition:opacity .3s}
.xs svg{display:block; width:100%; height:auto; max-height:min(46vh, 420px)}
@media (max-width:959px){ .xs svg{max-height:30vh} }
.xs .ln{fill:none; stroke:var(--ink-soft); stroke-width:1.6; stroke-linejoin:round; stroke-linecap:round; transition:stroke .4s}
.xs .thin{stroke-width:1.1}
.xs .hid{stroke-dasharray:5 4}
.xs .hatch line{stroke:var(--xs-hatch); stroke-width:1}
.xs .shell{fill:var(--xs-shell)}
.xs .cav{fill:var(--card)}
.xs .water{fill:var(--xs-water)}
.xs .room{fill:var(--card)}
.xs .lbl{font:700 11px var(--font); fill:var(--ink-soft); letter-spacing:.03em}
.xs .dim{font:700 12px var(--font); fill:var(--ink)}
.xs .solid{fill:var(--ink-soft); stroke:none}
.xs .tilesq{fill:var(--card); stroke:var(--ink-soft); stroke-width:1}
.xs .calc{fill:var(--calcium); stroke:var(--line-strong); stroke-width:.8; transition:opacity 1.4s ease .3s}
.xs .xs-leaf{fill:var(--leaf); transition:transform 1.6s cubic-bezier(.4,0,.6,1), opacity 1.6s ease}
.xs .sand circle{fill:var(--sand); transition:transform 1.4s ease, opacity 1.4s ease}
.xs .wind{fill:none; stroke:var(--sand); stroke-width:1.6; stroke-linecap:round; stroke-dasharray:18 10}
.xs .algae circle{fill:var(--algae); opacity:0}
.xs .flow{fill:none; stroke:var(--tile); stroke-width:2.4; stroke-linecap:round; stroke-dasharray:4 9; opacity:0; transition:opacity .4s}
.xs .sun{fill:none; stroke:var(--warn); stroke-width:1.6; stroke-linecap:round}
.xs .chem{font:700 12px var(--font); fill:var(--tile-ink)}
.xs .part{transition:opacity .45s ease}
.xs[data-active] .part{opacity:.26}
.xs[data-active="clean"] [data-part~="clean"],
.xs[data-active="balance"] [data-part~="balance"],
.xs[data-active="green"] [data-part~="green"],
.xs[data-active="sand"] [data-part~="sand"],
.xs[data-active="equipment"] [data-part~="equipment"],
.xs[data-active="tiles"] [data-part~="tiles"]{opacity:1}
.xs[data-active="clean"] [data-part~="clean"] .ln,
.xs[data-active="sand"] [data-part~="sand"] .ln,
.xs[data-active="equipment"] [data-part~="equipment"] .ln,
.xs[data-active="tiles"] [data-part~="tiles"] .ln{stroke:var(--tile-ink)}
.xs[data-active="clean"] .xs-leaf{transform:translateX(var(--dx)); opacity:0}
.xs[data-active="sand"] .sand circle{transform:translate(var(--dx), var(--dy)); opacity:0}
.xs[data-active="sand"] .sand circle:nth-child(3n){transition-delay:.15s}
.xs[data-active="sand"] .sand circle:nth-child(3n+1){transition-delay:.3s}
.xs[data-active="equipment"] .flow{opacity:1; animation:flow .9s linear infinite}
.xs[data-active="tiles"] .calc{opacity:0}
.xs[data-active="green"] .water{animation:greenclear 2.8s ease forwards}
.xs[data-active="green"] .algae circle{animation:algae 2.8s ease forwards}
@keyframes flow{ to{stroke-dashoffset:-26} }
@keyframes greenclear{ 0%,35%{fill:var(--algae)} 100%{fill:var(--xs-water)} }
@keyframes algae{ 0%,30%{opacity:.85} 100%{opacity:0} }

.svc-list{list-style:none; padding:0; display:grid}
.svc{
  display:grid; grid-template-columns:44px minmax(0,1fr); gap:6px 16px;
  padding-block:26px; border-top:1px solid var(--line);
}
@media (min-width:960px){ .svc{padding-block:40px; min-height:30vh; align-content:center} }
.svc-icon{
  grid-row:span 2; width:44px; height:44px; border-radius:14px;
  display:grid; place-items:center; background:var(--chip); color:var(--tile-ink);
  transition:background-color .3s, color .3s;
}
.svc.is-active .svc-icon{background:var(--btn-bg); color:var(--btn-ink)}
.svc-icon svg{width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}
.svc h3{font-size:1.1875rem; font-weight:700; line-height:1.3; padding-top:2px}
.svc p{color:var(--ink-soft); font-size:var(--fs-s); max-width:46ch}

/* ---------- water test ---------- */
.water-sec{background:var(--stone-2)}
.water-grid{display:grid; gap:clamp(40px, 5vw, 64px)}
.water-copy{display:grid; gap:26px; align-content:start; min-width:0}
.explain{display:grid; margin-top:4px}
.explain div{display:grid; gap:4px; padding-block:18px; border-top:1px solid var(--line)}
.explain dt{font-weight:700}
.explain dd{color:var(--ink-soft); font-size:var(--fs-s); max-width:52ch}
.test-col{min-width:0}
@media (min-width:960px){
  .water-grid{grid-template-columns:minmax(0,1fr) minmax(0,1.02fr); align-items:start}
  .test-col{position:sticky; top:calc(var(--cp-top, env(safe-area-inset-top,0px)) + var(--head-h) + 32px)}
}
.test-card{
  display:grid; gap:22px;
  background:var(--card); border-radius:var(--r-l);
  padding:clamp(20px, 3vw, 32px);
  box-shadow:0 0 0 1px var(--line), 0 30px 60px -36px var(--shadow);
}
.tc-head{
  display:flex; flex-wrap:wrap; justify-content:space-between; align-items:flex-start; gap:12px 24px;
  padding-bottom:18px; border-bottom:1px dashed var(--line-strong);
}
.tc-label{font-size:var(--fs-xs); font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft)}
.tc-title{font-size:var(--fs-l); font-weight:700; margin-top:4px}
.tc-clock{display:grid; justify-items:end; gap:8px}
#tc-time{font-size:1.75rem; font-weight:700; line-height:1; font-variant-numeric:tabular-nums}
.tc-status{
  font-size:var(--fs-xs); font-weight:700; padding:.4rem .75rem; border-radius:999px;
  background:var(--chip); color:var(--tile-ink); white-space:nowrap; transition:background-color .3s, color .3s;
}
.test-card:not(.is-done) .tc-status{background:var(--warn-soft); color:var(--warn-ink)}
.readings{display:grid; gap:22px}
.reading{display:grid; gap:10px}
.r-head{display:flex; align-items:baseline; gap:10px; flex-wrap:wrap}
.r-name{font-weight:700}
.r-ideal{font-size:var(--fs-xs); color:var(--ink-soft)}
.r-out{margin-left:auto; font-size:1.25rem; font-weight:700; white-space:nowrap; font-variant-numeric:tabular-nums}
.r-val{display:inline-block; min-width:3ch; text-align:right; transition:color .25s}
.r-unit{font-size:var(--fs-xs); font-weight:600; color:var(--ink-soft); margin-left:4px}
.reading.is-off .r-val{color:var(--warn-ink)}
.track{position:relative; height:10px; border-radius:999px; background:var(--track)}
.band{position:absolute; top:0; bottom:0; border-radius:999px; background:var(--band)}
.ghost,.marker{position:absolute; top:50%; border-radius:50%; transform:translate(-50%,-50%)}
.ghost{width:12px; height:12px; box-shadow:inset 0 0 0 2px var(--ink-soft); opacity:.6}
.marker{
  width:18px; height:18px; background:var(--ok);
  box-shadow:0 0 0 3px var(--card), 0 2px 8px var(--shadow);
  transition:background-color .25s;
}
.reading.is-off .marker{background:var(--warn)}
.tc-legend{
  display:flex; flex-wrap:wrap; align-items:center; gap:8px 18px;
  padding-top:16px; border-top:1px dashed var(--line-strong);
  font-size:var(--fs-xs); color:var(--ink-soft);
}
.tc-legend span{display:inline-flex; align-items:center; gap:7px}
.lg-ghost,.lg-dot{width:11px; height:11px; border-radius:50%}
.lg-ghost{box-shadow:inset 0 0 0 2px var(--ink-soft); opacity:.6}
.lg-dot{background:var(--ok)}
.tc-legend .lg-note{margin-left:auto}

/* ---------- pool calendar ---------- */
.cal-grid{display:grid; gap:clamp(28px, 4vw, 48px)}
@media (min-width:960px){ .cal-grid{grid-template-columns:minmax(0,.8fr) minmax(0,1.5fr); align-items:start} }
.cal-card{
  display:grid; gap:18px; min-width:0;
  background:var(--card); border-radius:var(--r-l); padding:clamp(16px, 2.6vw, 28px);
  box-shadow:0 0 0 1px var(--line), 0 30px 60px -40px var(--shadow);
}
.cal-read{display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 18px}
.cal-month{font-size:clamp(1.75rem, 3vw, 2.25rem); font-weight:700; letter-spacing:-.02em; min-width:4.4ch}
.cal-temp{font-size:var(--fs-l); font-weight:700; color:var(--warn-ink); font-variant-numeric:tabular-nums}
.cal-visits{margin-left:auto; font-size:var(--fs-xs); font-weight:700; padding:.42rem .8rem; border-radius:999px; background:var(--chip); color:var(--tile-ink)}
.cal-visits.is-hot{background:var(--warn-soft); color:var(--warn-ink)}
.cal-svg{display:block; width:100%; height:auto; touch-action:pan-y; cursor:crosshair}
.cal-svg .grid{stroke:var(--line); stroke-width:1}
.cal-svg .axis{font:600 11px var(--font); fill:var(--ink-soft); font-variant-numeric:tabular-nums}
.cal-svg .mon{font:700 11px var(--font); fill:var(--ink-soft)}
.cal-svg .mon.is-on{fill:var(--ink)}
.cal-svg .hot{fill:var(--hot-band)}
.cal-svg .band-lbl{font:700 11px var(--font); letter-spacing:.06em}
.cal-svg .band-lbl.h{fill:var(--warn-ink)}
.cal-svg .band-lbl.c{fill:var(--tile-ink)}
.cal-svg .fillarea{fill:var(--warn-soft)}
.cal-svg .line{fill:none; stroke:var(--warn); stroke-width:3; stroke-linejoin:round; stroke-linecap:round}
.cal-svg .pt{fill:var(--card); stroke:var(--warn); stroke-width:2.4; transition:opacity .25s}
.cal-svg .pt.is-off{opacity:0}
.cal-svg .pt.is-cur{fill:var(--warn)}
.cal-svg .cursor{stroke:var(--line-strong); stroke-width:1; stroke-dasharray:3 4}
@media (max-width:640px){
  .cal-svg .axis,.cal-svg .mon{font-size:22px}
  .cal-svg .band-lbl{font-size:19px}
  .cal-svg .line{stroke-width:5}
  .cal-svg .pt{stroke-width:4}
}
.cal-table-wrap{overflow-x:auto; margin-inline:-4px; padding-inline:4px}
.cal-table{width:100%; min-width:560px; border-collapse:collapse; font-size:var(--fs-xs); font-variant-numeric:tabular-nums}
.cal-table th,.cal-table td{padding:.5rem .25rem; text-align:center; border-top:1px solid var(--line)}
.cal-table th[scope="row"]{text-align:left; font-weight:700; color:var(--ink-soft); white-space:nowrap; padding-right:10px}
.cal-table thead th{font-weight:700; color:var(--ink-soft); border-top:0}
.cal-table td.hot{color:var(--warn-ink); font-weight:700}
.source{font-size:var(--fs-xs); color:var(--ink-soft)}
.source a{color:var(--ink-soft)}

/* ---------- visit timeline ---------- */
.visit-grid{display:grid; gap:clamp(36px, 5vw, 64px)}
@media (min-width:960px){
  .visit-grid{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); align-items:start}
  .visit-head{position:sticky; top:calc(var(--cp-top, env(safe-area-inset-top,0px)) + var(--head-h) + 32px)}
}
.timeline{
  --fill:1; --tc:58px; --tg:30px;
  position:relative; list-style:none; padding:0; display:grid;
}
@media (min-width:640px){ .timeline{--tc:72px; --tg:44px} }
.timeline::before,.timeline::after{
  content:""; position:absolute; top:12px; bottom:0; width:3px; border-radius:3px;
  left:calc(var(--tc) + var(--tg) / 2 - 1.5px);
}
.timeline::before{background:var(--track)}
.timeline::after{
  background:linear-gradient(180deg, var(--wave-a), var(--wave-m) 50%, var(--wave-b));
  transform-origin:top; transform:scaleY(var(--fill));
}
.step{
  position:relative; display:grid; grid-template-columns:var(--tc) minmax(0,1fr); column-gap:var(--tg);
  padding-bottom:34px;
}
.step:last-child{padding-bottom:0}
.step-min{
  grid-row:span 2; text-align:right; padding-top:3px;
  font-size:var(--fs-xs); font-weight:700; color:var(--ink-soft); font-variant-numeric:tabular-nums; white-space:nowrap;
}
.step-dot{
  position:absolute; top:5px; left:calc(var(--tc) + var(--tg) / 2); z-index:1;
  width:16px; height:16px; border-radius:50%; transform:translateX(-50%);
  background:var(--tile); box-shadow:0 0 0 4px var(--stone);
  transition:background-color .25s, box-shadow .25s;
}
.js .step:not(.is-on) .step-dot{background:var(--stone); box-shadow:0 0 0 4px var(--stone), inset 0 0 0 3px var(--line-strong)}
.step h3{font-size:1.125rem; font-weight:700; line-height:1.35}
.step p{color:var(--ink-soft); font-size:var(--fs-s); max-width:46ch}

/* ---------- communities (city pages) ---------- */
.comm-grid{list-style:none; padding:0; display:grid; grid-template-columns:repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap:16px}
.comm{
  display:grid; gap:6px; align-content:start; padding:20px; border-radius:18px;
  background:var(--card); box-shadow:0 0 0 1px var(--line);
}
.comm h3{font-size:1.125rem; font-weight:700; line-height:1.3}
.comm p{color:var(--ink-soft); font-size:var(--fs-s)}
.also{display:flex; flex-wrap:wrap; align-items:center; gap:10px 14px; font-size:var(--fs-s); font-weight:700}
.also span{color:var(--ink-soft); font-weight:600}
.also a{
  text-decoration:none; padding:.6rem 1rem; border-radius:999px;
  box-shadow:inset 0 0 0 1.5px var(--line-strong); transition:box-shadow .2s;
}
.also a:hover{box-shadow:inset 0 0 0 1.5px var(--tile)}

/* ---------- the deep end ---------- */
.deep{position:relative; background:var(--deep); color:var(--on-deep); color-scheme:dark}
.waves{position:absolute; left:0; right:0; bottom:100%; height:56px; overflow:hidden; pointer-events:none}
.waves svg{position:absolute; left:0; top:0; width:200%; height:100%; display:block}
.waves .w-back{transform:translateX(calc(var(--wave2, .3) * -50%)); opacity:.4}
.waves .w-front{transform:translateX(calc(var(--wave, 0) * -50%))}
.waves path{fill:var(--deep)}
.deep .eyebrow,.deep .sec-lede{color:var(--on-deep-soft)}

.plans{display:grid; gap:20px}
@media (min-width:900px){ .plans{grid-template-columns:repeat(3, minmax(0,1fr))} }
.plan{
  display:flex; flex-direction:column; gap:22px;
  padding:clamp(22px, 2.6vw, 32px); border-radius:var(--r-l);
  background:var(--deep-2); box-shadow:inset 0 0 0 1px var(--deep-line);
}
.plan-hi{background:var(--deep-3); box-shadow:inset 0 0 0 2px var(--aqua)}
.plan h3{font-size:var(--fs-l); font-weight:700}
.plan-for{font-size:var(--fs-s); color:var(--on-deep-soft); margin-top:4px}
.plan-hi .plan-for{color:var(--aqua)}
.price{display:flex; align-items:baseline; flex-wrap:wrap; gap:8px}
.cur,.per{font-size:var(--fs-s); color:var(--on-deep-soft)}
.cur{font-weight:700}
.amt{font-size:clamp(2.6rem, 4vw, 3.2rem); font-weight:700; line-height:1; letter-spacing:-.02em; font-variant-numeric:tabular-nums}
.ticks{list-style:none; padding:22px 0 0; border-top:1px solid var(--deep-line); display:grid; gap:12px; flex:1; align-content:start}
.ticks li{display:grid; grid-template-columns:16px minmax(0,1fr); gap:12px; font-size:var(--fs-s)}
.ticks li::before{
  content:""; width:16px; height:16px; margin-top:4px; background:var(--aqua);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
}
.fine{font-size:var(--fs-xs); color:var(--on-deep-soft); max-width:72ch; line-height:1.6}

.areas{display:grid; gap:20px}
@media (min-width:860px){ .areas{grid-template-columns:repeat(3, minmax(0,1fr))} }
.area{
  display:grid; gap:14px; align-content:start; padding:clamp(20px, 2.4vw, 28px); border-radius:var(--r-l);
  background:var(--deep-2); box-shadow:inset 0 0 0 1px var(--deep-line);
}
.area h3{display:grid; gap:4px; font-size:1.75rem; font-weight:700; line-height:1.15; letter-spacing:-.01em}
.area h3 span{font-size:var(--fs-xs); font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--aqua)}
.area p{color:var(--on-deep-soft); font-size:var(--fs-s)}
.area ul{list-style:none; padding:0; display:flex; flex-wrap:wrap; gap:8px}
.area li{font-size:var(--fs-s); padding:.42rem .85rem; border-radius:999px; background:var(--field); box-shadow:inset 0 0 0 1px var(--deep-line)}
.area-link{
  display:inline-flex; align-items:center; gap:8px; margin-top:4px; font-weight:700; font-size:var(--fs-s);
  color:var(--aqua); text-decoration:none;
}
.area-link::after{content:""; width:18px; height:2px; background:currentColor; transition:width .2s}
.area-link:hover::after{width:28px}

.faq-grid{display:grid; gap:clamp(28px, 4vw, 40px)}
@media (min-width:960px){ .faq-grid{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:64px; align-items:start} }
.faq details{border-top:1px solid var(--deep-line)}
.faq details:last-child{border-bottom:1px solid var(--deep-line)}
.faq summary{list-style:none; cursor:pointer; position:relative; padding:20px 44px 20px 0; font-weight:700}
.faq summary::-webkit-details-marker{display:none}
.faq summary h3{font:inherit; margin:0}
.faq summary::after{
  content:""; position:absolute; right:6px; top:50%; width:14px; height:14px; margin-top:-7px;
  background:
    linear-gradient(var(--aqua), var(--aqua)) center/14px 2px no-repeat,
    linear-gradient(var(--aqua), var(--aqua)) center/2px 14px no-repeat;
  transition:transform .25s ease;
}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{padding-bottom:22px; color:var(--on-deep-soft); max-width:62ch}

.book-grid{display:grid; gap:clamp(36px, 5vw, 64px)}
@media (min-width:960px){ .book-grid{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); align-items:start} }
.book-copy{display:grid; gap:20px; align-content:start; min-width:0}
.book-copy > p{color:var(--on-deep-soft); max-width:46ch}
.contact{display:grid; margin-top:8px}
.contact div{display:grid; gap:6px; padding-block:16px; border-top:1px solid var(--deep-line)}
.contact dt{font-size:var(--fs-xs); font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--on-deep-soft)}
.contact dd{display:flex; flex-wrap:wrap; align-items:center; gap:10px 14px; font-size:var(--fs-l); font-weight:700; min-width:0}
.contact dd a{text-decoration:none; overflow-wrap:anywhere}
.contact dd a:hover{text-decoration:underline; text-underline-offset:.2em}
.copy{
  font:700 var(--fs-xs)/1 var(--font); color:var(--aqua); background:transparent; border:0; cursor:pointer;
  padding:.45rem .8rem; border-radius:999px; box-shadow:inset 0 0 0 1.5px var(--deep-line);
}
.copy:hover{box-shadow:inset 0 0 0 1.5px var(--aqua)}

.book-card{
  display:grid; gap:18px; min-width:0;
  padding:clamp(20px, 3vw, 32px); border-radius:var(--r-l);
  background:var(--deep-2); box-shadow:inset 0 0 0 1px var(--deep-line);
}
.field-row{display:grid; gap:18px}
@media (min-width:520px){ .field-row{grid-template-columns:1fr 1fr} }
.field{display:grid; gap:8px; min-width:0}
.field-label{font-size:var(--fs-xs); font-weight:700; letter-spacing:.06em; color:var(--on-deep-soft)}
.field-label em{font-style:normal; font-weight:500; opacity:.8}
.field input,.field select,.field textarea{
  width:100%; min-width:0;
  font:500 var(--fs-s)/1.4 var(--font); color:var(--on-deep);
  background-color:var(--field); border:1px solid var(--deep-line); border-radius:12px;
  padding:.85rem .95rem; outline:none; transition:border-color .2s, box-shadow .2s;
}
.field textarea{resize:vertical; min-height:88px}
.field select{
  -webkit-appearance:none; appearance:none; cursor:pointer; padding-right:2.4rem;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--on-deep-soft) 50%),
    linear-gradient(135deg, var(--on-deep-soft) 50%, transparent 50%);
  background-position:calc(100% - 21px) 52%, calc(100% - 16px) 52%;
  background-size:5px 5px; background-repeat:no-repeat;
}
.field select option{background:var(--deep-2); color:var(--on-deep)}
.field input::placeholder,.field textarea::placeholder{color:var(--on-deep-soft); opacity:.65}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--aqua); box-shadow:0 0 0 3px rgba(144,214,229,.22)}
.chips{display:flex; flex-wrap:wrap; gap:8px}
.chip{position:relative; display:inline-flex}
.chip input{position:absolute; inset:0; margin:0; opacity:0; cursor:pointer}
.chip span{
  display:inline-block; padding:.6rem 1.05rem; border-radius:999px;
  font-size:var(--fs-s); font-weight:700; box-shadow:inset 0 0 0 1.5px var(--deep-line);
  transition:background-color .2s, color .2s;
}
.chip input:checked + span{background:var(--aqua); color:var(--aqua-ink); box-shadow:none}
.chip input:focus-visible + span{outline:3px solid var(--aqua); outline-offset:2px}
.preview{display:grid; gap:6px; padding:14px 16px; border-radius:14px; border:1px dashed var(--deep-line)}
.preview-label{font-size:var(--fs-xs); font-weight:700; letter-spacing:.06em; color:var(--on-deep-soft)}
.preview-text{font-size:var(--fs-s); white-space:pre-wrap; overflow-wrap:anywhere}

/* ---------- footer ---------- */
.foot{border-top:1px solid var(--deep-line); padding-block:48px 32px; font-size:var(--fs-s); color:var(--on-deep-soft)}
.foot-grid{display:grid; gap:32px}
@media (min-width:860px){ .foot-grid{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) minmax(0,.8fr) minmax(0,.8fr)} }
.foot-brand{display:grid; gap:16px; align-content:start}
.foot .logo{width:120px; height:64px; color:var(--aqua)}
.foot-brand p{max-width:40ch}
.foot address{font-style:normal; display:grid; gap:6px; align-content:start}
.foot address b,.foot-links b{color:var(--on-deep); font-weight:700; margin-bottom:4px}
.foot address a{text-decoration:none; color:var(--on-deep)}
.foot address a:hover,.foot-links a:hover{text-decoration:underline; text-underline-offset:.2em}
.foot-links{display:grid; gap:6px; align-content:start}
.foot-links a{text-decoration:none}
.foot-base{
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px 24px;
  margin-top:40px; padding-top:20px; border-top:1px solid var(--deep-line); font-size:var(--fs-xs);
}

/* ---------- depth gauge ---------- */
.gauge{
  position:fixed; z-index:15; display:none;
  right:max(20px, calc(env(safe-area-inset-right,0px) + 12px)); top:50%;
  transform:translateY(-50%);
  width:60px; height:min(52vh, 440px); padding-block:34px;
  border-radius:999px; background:var(--header-bg);
  box-shadow:0 0 0 1px var(--line);
}
@media (min-width:1380px){ .gauge{display:block} }
.gauge{transition:opacity .4s ease}
.gauge.is-hidden{opacity:0; pointer-events:none}
.g-rail{position:relative; height:100%}
.g-rail::before{content:""; position:absolute; left:50%; top:0; bottom:0; width:2px; margin-left:-1px; background:var(--g-line)}
.g-tick{position:absolute; left:50%; top:calc(var(--i) / 12 * 100%); width:8px; height:2px; margin:-1px 0 0 -4px; background:var(--g-line)}
.g-tick.major{width:16px; margin-left:-8px}
.g-end{position:absolute; left:0; right:0; text-align:center; font-size:.6875rem; font-weight:700; color:var(--ink-soft)}
.g-top{top:10px}
.g-bot{bottom:10px}
.g-ind{
  position:absolute; left:50%; top:calc(var(--d, 0) * 100%); transform:translate(-50%,-50%);
  padding:.42rem .5rem .38rem; border-radius:5px; white-space:nowrap;
  background:var(--face); color:var(--face-ink); font-size:.75rem; font-weight:700; line-height:1;
  font-variant-numeric:tabular-nums;
  box-shadow:0 0 0 1px var(--line), 0 6px 16px -8px var(--shadow);
}

@media (prefers-reduced-motion: reduce){
  [data-rise]{transform:none !important; opacity:1 !important}
  .routes-track{transform:none}
  .hero-copy{translate:none; opacity:1}
  .wave-word::after{animation:none}
  .btn:hover{transform:none}
  .xs *{transition:none !important; animation:none !important}
}

/* ---------- content pages: services and the cost guide ---------- */
.hero--compact{min-height:80vh; min-height:80svh}
.split{display:grid; gap:clamp(32px, 5vw, 64px)}
@media (min-width:960px){
  .split{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); align-items:start}
  .split-head{position:sticky; top:calc(var(--cp-top, env(safe-area-inset-top,0px)) + var(--head-h) + 32px)}
}
.answer{display:grid; gap:8px; padding:20px 22px; border-radius:18px; background:var(--card); box-shadow:0 0 0 1px var(--line), 0 20px 40px -32px var(--shadow)}
.answer-label{font-size:var(--fs-xs); font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--tile-ink)}
.answer p + p{font-size:var(--fs-m); line-height:1.65}
.byline{font-size:var(--fs-xs); color:var(--ink-soft)}
.prose{display:grid; gap:clamp(40px, 5vw, 56px); min-width:0}
.block{display:grid; gap:16px; min-width:0}
.block > h3{font-size:var(--fs-l); font-weight:700; line-height:1.3}
.block > p{color:var(--ink-soft); max-width:62ch; font-size:var(--fs-s)}
.checks{list-style:none; padding:0; margin:0; display:grid; gap:12px 28px; grid-template-columns:repeat(auto-fit, minmax(min(100%, 250px), 1fr))}
.checks li{display:grid; grid-template-columns:18px minmax(0,1fr); gap:12px; font-size:var(--fs-s); line-height:1.55}
.checks li::before{
  content:""; width:18px; height:18px; margin-top:2px; background:var(--tile);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Ccircle cx='9' cy='9' r='8.2' fill='none' stroke='black' stroke-width='1.6'/%3E%3Cpath d='M5.4 9.3l2.4 2.4 4.8-5.4' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Ccircle cx='9' cy='9' r='8.2' fill='none' stroke='black' stroke-width='1.6'/%3E%3Cpath d='M5.4 9.3l2.4 2.4 4.8-5.4' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
}
.table-wrap{overflow-x:auto; margin-inline:-4px; padding-inline:4px}
.data{width:100%; min-width:520px; border-collapse:collapse; font-size:var(--fs-s); font-variant-numeric:tabular-nums}
.data th,.data td{text-align:left; padding:.75rem .9rem .75rem 0; border-top:1px solid var(--line); vertical-align:top}
.data tbody th{font-weight:600}
.data thead th{font-size:.75rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-soft); border-top:0; padding-top:0}
.data td.num{font-weight:700; white-space:nowrap}
.data td.src{font-size:var(--fs-xs); color:var(--ink-soft)}
.data tr.total th,.data tr.total td{font-weight:700; border-top:2px solid var(--line-strong)}
.sources{display:grid; gap:8px; font-size:var(--fs-xs); color:var(--ink-soft); padding-left:1.2em; margin:0}
.sources a{color:var(--ink-soft)}
.step h4{font-size:1.125rem; font-weight:700; line-height:1.35; margin:0}
.svc-link{grid-column:2; justify-self:start; display:inline-flex; align-items:center; gap:8px; margin-top:6px; font-size:var(--fs-xs); font-weight:700; color:var(--tile-ink); text-decoration:none}
.svc-link::after{content:""; width:16px; height:2px; background:currentColor; transition:width .2s}
.svc-link:hover::after{width:26px}
.fine a{color:var(--aqua)}
.related{padding-block:clamp(36px, 5vw, 56px) clamp(72px, 9vw, 110px)}
.related .wrap{display:grid; gap:14px}
.menu-sub{padding:.8rem .9rem .3rem; font-size:.6875rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft); border-top:1px solid var(--line); margin-top:4px}
.notfound{padding-block:calc(var(--head-h) + 64px) 120px}
.notfound .h1-main{font-size:var(--fs-xl)}
@media (max-width:640px){
  .data{min-width:0}
  .data thead{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
  .data tr{display:grid; gap:2px; padding:.8rem 0; border-top:1px solid var(--line)}
  .data th,.data td{display:block; border:0; padding:0}
  .data td.num{white-space:normal}
  .data td:empty{display:none}
  .data tr.total{border-top:2px solid var(--line-strong)}
  .data tr.total th,.data tr.total td{border:0}
}

/* ---------- areas map (deep end) ---------- */
.map-layout{display:grid; gap:20px}
@media (min-width:960px){ .map-layout{grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr); gap:56px; align-items:start} }
.map-wrap{
  position:sticky; top:calc(var(--cp-top, env(safe-area-inset-top,0px)) + var(--head-h)); z-index:3;
  background:var(--deep); padding-block:10px 14px; margin-inline:-4px; padding-inline:4px;
}
@media (min-width:960px){ .map-wrap{top:calc(var(--cp-top, env(safe-area-inset-top,0px)) + var(--head-h) + 40px); padding:0; margin:0; background:none} }
.uae-map{
  --map-sea:var(--deep-2); --map-land:rgba(230,242,244,.05); --map-emi:rgba(230,242,244,.1); --map-line:rgba(230,242,244,.22);
  --map-served:rgba(144,214,229,.3); --map-req:rgba(144,214,229,.13); --map-active:rgba(144,214,229,.55);
  position:relative; margin:0; border-radius:var(--r-l); overflow:hidden;
  background:var(--map-sea); box-shadow:inset 0 0 0 1px var(--deep-line);
}
.map-svg{display:block; width:100%; height:auto; max-height:min(64vh, 660px)}
@media (max-width:959px){ .map-svg{max-height:34vh} }
.map-zoom{transform-origin:0 0; transition:transform 1.15s cubic-bezier(.65,0,.25,1)}
.map-zoom path{vector-effect:non-scaling-stroke}
.map-neigh{fill:var(--map-land)}
.emi{fill:var(--map-emi); stroke:var(--map-line); stroke-width:1; transition:fill .5s ease}
.emi.is-served{fill:var(--map-served); stroke:var(--aqua); stroke-width:1.4}
.emi.is-req{fill:var(--map-req); stroke:rgba(144,214,229,.55); stroke-dasharray:4 4}
.uae-map[data-active="dubai"] .emi[data-emi="dubai"],
.uae-map[data-active="sharjah"] .emi[data-emi="sharjah"],
.uae-map[data-active="abudhabi"] .emi[data-emi="abudhabi"],
.uae-map[data-active="request"] .emi.is-req{fill:var(--map-active)}
.map-layer{opacity:0; transition:opacity .4s ease}
.uae-map:not([data-active]) [data-layer="overview"],
.uae-map[data-active="dubai"] [data-layer="dubai"],
.uae-map[data-active="sharjah"] [data-layer="sharjah"],
.uae-map[data-active="abudhabi"] [data-layer="abudhabi"],
.uae-map[data-active="request"] [data-layer="request"]{opacity:1; transition-delay:.6s}
.pin circle{fill:var(--aqua); stroke:var(--deep); stroke-width:3}
.pin-req circle{fill:var(--deep-2); stroke:var(--aqua); stroke-width:2.5}
.pin-muted circle{fill:var(--on-deep-soft)}
.pin text{font:700 24px var(--font); fill:var(--on-deep); paint-order:stroke; stroke:var(--deep-2); stroke-width:6px; stroke-linejoin:round}
.pin-city text{font-size:27px}
.pin-req text,.pin-muted text{fill:var(--on-deep-soft); font-weight:600}
.map-sea{font:italic 600 24px var(--font); letter-spacing:.24em; fill:var(--on-deep-soft); opacity:.55}
.map-country,.map-region{font:700 18px var(--font); letter-spacing:.3em; fill:var(--on-deep-soft); opacity:.42}
.map-region{opacity:.6}
.map-cap{
  position:absolute; left:14px; top:14px; right:14px; display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:8px;
  pointer-events:none; font-size:var(--fs-xs); font-weight:700;
}
.map-name{padding:.42rem .8rem; border-radius:999px; background:var(--aqua); color:var(--aqua-ink)}
.map-note{color:var(--on-deep-soft); font-weight:600}
.map-cards{display:grid; gap:16px}
.area-card{
  display:grid; gap:12px; align-content:start; padding:clamp(20px, 2.4vw, 28px); border-radius:var(--r-l);
  background:var(--deep-2); box-shadow:inset 0 0 0 1px var(--deep-line); transition:box-shadow .3s;
}
@media (min-width:960px){ .area-card{min-height:44vh; align-content:center} }
.area-card.is-active{box-shadow:inset 0 0 0 2px var(--aqua)}
.area-card h3{display:grid; gap:4px; font-size:1.75rem; font-weight:700; line-height:1.15; letter-spacing:-.01em}
.area-card h3 span{font-size:var(--fs-xs); font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--aqua)}
.area-card > p{color:var(--on-deep-soft); font-size:var(--fs-s)}
.comm-list{display:grid; gap:0; margin:4px 0 0}
.comm-list div{display:grid; gap:2px; padding-block:10px; border-top:1px solid var(--deep-line)}
.comm-list dt{font-weight:700; font-size:var(--fs-s)}
.comm-list dd{color:var(--on-deep-soft); font-size:var(--fs-xs); line-height:1.55}
.foot-links span{color:var(--on-deep-soft)}
.foot-owner a{color:var(--aqua)}
@media (prefers-reduced-motion: reduce){ .map-zoom,.map-layer,.emi{transition:none !important} }


/* ---------- WordPress and Elementor integration ---------- */
/* Containers that hold Clean Pool widgets have the CSS class "cp-flow": edge to edge, no padding, no gaps. */
.e-con.cp-flow{--padding-top:0px; --padding-right:0px; --padding-bottom:0px; --padding-left:0px; --gap:0px; --row-gap:0px; --column-gap:0px; --width:100%; --content-width:100%; --container-max-width:none; padding:0; gap:0; max-width:none; width:100%}
.e-con.cp-flow > .e-con-inner{max-width:none; width:100%; padding:0; gap:0}
.cp-flow > .elementor-element, .cp-flow > .e-con-inner > .elementor-element{width:100%; max-width:100%; margin:0}
.cp-flow > .elementor-widget:not(:last-child), .cp-flow > .e-con-inner > .elementor-widget:not(:last-child){margin-block-end:0; margin-bottom:0}
.e-con.deep{position:relative; overflow:visible; background:var(--deep)}
.site-main{display:block}
/* the footer band continues the page's deep container; without one it brings its own waves */
.deep--foot{position:relative}
.deep--foot.has-waves{margin-top:56px}
/* Elementor removes box-shadows from links in page content; the outline buttons need theirs */
.elementor .btn-quiet{box-shadow:inset 0 0 0 1.5px var(--line-strong)}
.elementor .btn-quiet:hover{box-shadow:inset 0 0 0 1.5px var(--ink-soft)}
.elementor .btn-line{box-shadow:inset 0 0 0 1.5px var(--deep-line)}
.elementor .btn-line:hover{box-shadow:inset 0 0 0 1.5px var(--on-deep-soft)}
/* accessibility helpers */
.screen-reader-text{position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0}
.skip-link:focus{clip:auto; width:auto; height:auto; margin:0; padding:.8rem 1.2rem; left:16px; top:16px; z-index:100; background:var(--card); color:var(--ink); border-radius:12px}
/* WordPress toolbar for logged-in users: sticky parts sit below it */
.admin-bar{--cp-top:var(--wp-admin--admin-bar--height, 32px)}
@media (max-width:600px){ .admin-bar{--cp-top:0px} }
/* pages and posts written without Elementor */
.cp-plain{padding-block:calc(var(--head-h) + 40px) clamp(72px, 10vw, 124px)}
.cp-plain .h1-main{font-size:var(--fs-xl)}
.entry-content{display:grid; gap:1.1em; max-width:72ch; font-size:var(--fs-m)}
.entry-content > *{margin:0}
.entry-content h2{font-size:var(--fs-l); font-weight:700; line-height:1.3; margin-top:.8em}
.entry-content h3{font-size:1.125rem; font-weight:700; line-height:1.35; margin-top:.6em}
.entry-content ul, .entry-content ol{padding-left:1.3em}
.entry-content a{color:var(--tile-ink); text-underline-offset:.2em}
.entry-content img{max-width:100%; height:auto; border-radius:12px}
.entry-content table{width:100%; border-collapse:collapse; font-size:var(--fs-s)}
.entry-content th, .entry-content td{text-align:left; padding:.6rem .8rem .6rem 0; border-top:1px solid var(--line); vertical-align:top}
.cp-list{list-style:none; padding:0; margin:0; display:grid; gap:28px; max-width:72ch}
.cp-list a{font-size:var(--fs-l); font-weight:700; text-decoration:none}
.cp-list a:hover{text-decoration:underline; text-underline-offset:.2em}
.cp-list p{color:var(--ink-soft); font-size:var(--fs-s); margin-top:6px}
.nav-links{display:flex; gap:14px; flex-wrap:wrap; font-weight:700}
/* inside the Elementor editor every section shows in its resting state */
.elementor-editor-active [data-rise]{transform:none !important; opacity:1 !important}
.cp-editor-note{padding:14px 18px; border:1px dashed var(--line-strong); border-radius:12px; font:600 13px/1.5 var(--font); color:var(--ink-soft); background:var(--card)}