/* =====================================================================
   AZURE POOLS - Coastal Fresh, resort-at-home calm
   Palette: water #1CA7C4 / sand #EAD9B0 / deep teal ink #102A33 / sky #F6FCFD
   Type: Quicksand (display) + Mulish (body)
   ===================================================================== */

/* ---- NAV SAFETY (mandatory): [hidden] must always win ---- */
[hidden]{display:none!important}

:root{
  --water:#1CA7C4;
  --water-deep:#1689a3;
  --water-deeper:#0f6f85;   /* AA-safe on paper for small text (eyebrows, links) */
  --water-bright:#33C6E4;
  --sand:#EAD9B0;
  --sand-soft:#F3E8CE;
  --ink:#102A33;
  --ink-soft:#2c4d57;
  --ink-mute:#5b7780;
  --paper:#F6FCFD;
  --paper-2:#EAF6F9;
  --white:#ffffff;
  --line:#d7e9ee;
  --line-strong:#bcdce4;

  --deep-1:#0a2129;
  --deep-2:#103642;
  --deep-3:#0d4a59;

  --radius:18px;
  --radius-sm:12px;
  --radius-pill:999px;

  --shadow-sm:0 2px 10px rgba(16,42,51,.06);
  --shadow-md:0 14px 40px -16px rgba(16,42,51,.28);
  --shadow-lg:0 30px 70px -28px rgba(16,42,51,.42);

  --maxw:1200px;
  --ease:cubic-bezier(.16,1,.3,1);

  --nav-h:74px;
  --font-display:"Quicksand",system-ui,sans-serif;
  --font-body:"Mulish",system-ui,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--paper);
  line-height:1.6;
  font-size:17px;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

h1,h2,h3,h4{font-family:var(--font-display);font-weight:700;line-height:1.08;color:var(--ink);margin:0;letter-spacing:-.01em}
p{margin:0}
a{color:inherit;text-decoration:none}
img,svg,canvas{display:block;max-width:100%}
ul,ol{margin:0;padding:0;list-style:none}

:focus-visible{outline:3px solid var(--water);outline-offset:3px;border-radius:6px}

.skip-link{
  position:absolute;left:14px;top:-60px;z-index:200;
  background:var(--ink);color:var(--paper);padding:10px 16px;border-radius:10px;
  transition:top .2s var(--ease);font-weight:700;font-family:var(--font-display);
}
.skip-link:focus{top:14px}

/* ---------- shared section heads ---------- */
.section-head{max-width:760px;margin:0 auto 56px;text-align:center;padding:0 4px}
.section-head h2{font-size:clamp(1.85rem,4.4vw,3rem)}
.section-lead{margin-top:18px;color:var(--ink-soft);font-size:1.08rem}
.section-head--light h2,.section-head--light .section-lead{color:var(--paper)}

.eyebrow{
  display:inline-block;font-family:var(--font-display);font-weight:700;
  font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--water-deeper);margin-bottom:14px;
}
.eyebrow--on-dark{color:var(--sand)}

.stars{color:#E9A93B;letter-spacing:1px}

/* ---------- buttons ---------- */
.btn{
  --b-bg:var(--water);--b-fg:var(--white);
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:var(--font-display);font-weight:600;font-size:1rem;
  padding:13px 22px;border-radius:var(--radius-pill);border:1.5px solid transparent;
  background:var(--b-bg);color:var(--b-fg);cursor:pointer;white-space:nowrap;
  transition:transform .25s var(--ease),box-shadow .25s var(--ease),background .25s var(--ease),color .2s var(--ease),border-color .2s var(--ease);
  text-align:center;line-height:1.15;
}
.btn--lg{padding:16px 30px;font-size:1.06rem}
.btn--block{width:100%}
.btn--solid{
  background:linear-gradient(135deg,var(--water-bright),var(--water-deep));
  color:var(--white);box-shadow:0 12px 28px -12px rgba(28,167,196,.7);
}
.btn--solid:hover{transform:translateY(-2px);box-shadow:0 18px 36px -12px rgba(28,167,196,.85)}
.btn--solid:active{transform:translateY(0) scale(.985)}
.btn--ghost{background:transparent;color:var(--ink);border-color:var(--line-strong)}
.btn--ghost:hover{transform:translateY(-2px);border-color:var(--water);color:var(--water-deep);background:rgba(28,167,196,.06)}
.btn--ghost:active{transform:translateY(0) scale(.985)}
.btn--ghost-light{color:var(--paper);border-color:rgba(246,252,253,.5)}
.btn--ghost-light:hover{color:var(--white);border-color:var(--white);background:rgba(255,255,255,.1)}
.btn--phone{
  background:rgba(255,255,255,.0);color:var(--ink);border-color:var(--line-strong);
  padding:10px 18px;font-size:.95rem;
}
.btn--phone:hover{border-color:var(--water);color:var(--water-deep);transform:translateY(-1px)}
.btn--phone svg{color:var(--water)}

/* =====================================================================
   NAV
   ===================================================================== */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  transition:background .3s var(--ease),box-shadow .3s var(--ease),backdrop-filter .3s var(--ease);
}
.nav__inner{
  max-width:var(--maxw);margin:0 auto;height:var(--nav-h);
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:0 clamp(16px,4vw,32px);transition:height .3s var(--ease);
}
.nav.is-scrolled{background:rgba(246,252,253,.86);backdrop-filter:blur(14px) saturate(140%);box-shadow:0 1px 0 var(--line),var(--shadow-sm)}
.nav.is-scrolled .nav__inner{height:62px}

.wordmark{display:inline-flex;align-items:center;gap:11px;font-family:var(--font-display);font-weight:700;font-size:1.32rem;letter-spacing:-.02em;color:var(--ink)}
.wordmark__mark{display:inline-flex;filter:drop-shadow(0 4px 10px rgba(28,167,196,.4))}
.wordmark__accent{color:var(--water-deep)}
.nav:not(.is-scrolled) .wordmark{color:var(--white)}
.nav:not(.is-scrolled) .wordmark__accent{color:var(--sand)}

.nav__links{display:flex;align-items:center;gap:28px}
.nav__links a{font-family:var(--font-display);font-weight:600;font-size:.98rem;color:var(--ink-soft);position:relative;padding:6px 0;transition:color .2s var(--ease)}
.nav__links a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:2px;background:var(--water);transition:right .3s var(--ease)}
.nav__links a:hover{color:var(--ink)}
.nav__links a:hover::after{right:0}
.nav:not(.is-scrolled) .nav__links a{color:rgba(246,252,253,.88)}
.nav:not(.is-scrolled) .nav__links a:hover{color:var(--white)}

.nav__actions{display:flex;align-items:center;gap:14px}
.nav:not(.is-scrolled) .btn--phone{color:var(--white);border-color:rgba(255,255,255,.45)}
.nav:not(.is-scrolled) .btn--phone svg{color:var(--sand)}
.nav:not(.is-scrolled) .btn--phone:hover{border-color:var(--white);background:rgba(255,255,255,.1);color:var(--white)}

.nav__toggle{display:none;flex-direction:column;justify-content:center;gap:5px;width:46px;height:46px;border:1.5px solid var(--line-strong);background:rgba(255,255,255,.6);border-radius:12px;cursor:pointer;padding:0 11px}
.nav__toggle-bar{height:2.5px;width:100%;background:var(--ink);border-radius:2px;transition:transform .3s var(--ease),opacity .2s var(--ease)}
.nav:not(.is-scrolled) .nav__toggle{border-color:rgba(255,255,255,.4);background:rgba(255,255,255,.12)}
.nav:not(.is-scrolled) .nav__toggle-bar{background:var(--white)}
.nav__toggle[aria-expanded="true"] .nav__toggle-bar:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
.nav__toggle[aria-expanded="true"] .nav__toggle-bar:nth-child(2){opacity:0}
.nav__toggle[aria-expanded="true"] .nav__toggle-bar:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}

.mobile-nav{
  position:absolute;top:100%;left:0;right:0;
  background:rgba(246,252,253,.97);backdrop-filter:blur(16px);
  border-top:1px solid var(--line);box-shadow:var(--shadow-md);
  padding:18px clamp(16px,4vw,32px) 26px;
  animation:dropIn .3s var(--ease);
}
@keyframes dropIn{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}
.mobile-nav nav{display:flex;flex-direction:column}
.mobile-nav nav a{font-family:var(--font-display);font-weight:600;font-size:1.1rem;color:var(--ink);padding:14px 6px;border-bottom:1px solid var(--line)}
.mobile-nav nav a:last-child{border-bottom:none}
.mobile-nav__call{margin-top:16px}

/* =====================================================================
   HERO  (cinematic water scene)
   ===================================================================== */
.hero{
  position:relative;min-height:100dvh;display:flex;align-items:center;
  padding:calc(var(--nav-h) + 40px) clamp(16px,4vw,32px) 90px;
  overflow:hidden;isolation:isolate;
  background:
    radial-gradient(120% 90% at 78% 8%, #66d8ee 0%, rgba(102,216,238,0) 46%),
    linear-gradient(178deg,#0d4a59 0%,#0e6b80 34%,#1593af 62%,#22a9c6 100%);
  color:var(--paper);
}
.hero__photo{
  position:absolute;inset:0;z-index:-5;
  background-image:url("assets/img/hero.webp");
  background-size:cover;background-position:center 62%;background-repeat:no-repeat;
  transform:scale(1.04);
}
.hero__caustics{position:absolute;inset:0;width:100%;height:100%;z-index:-3;opacity:.32;mix-blend-mode:screen}
.hero__scene{position:absolute;inset:0;z-index:-4;overflow:hidden;opacity:.55}
.hero__sun{
  position:absolute;top:-12%;right:6%;width:340px;height:340px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,247,224,.85) 0%,rgba(255,236,189,.35) 38%,rgba(255,236,189,0) 70%);
  filter:blur(6px);animation:sunBob 12s ease-in-out infinite;
}
.hero__waterline{
  position:absolute;left:-10%;right:-10%;bottom:-6%;height:46%;
  background:
    radial-gradient(60% 120% at 20% 0%, rgba(255,255,255,.16), rgba(255,255,255,0) 60%),
    linear-gradient(180deg, rgba(13,74,89,0) 0%, rgba(8,52,64,.55) 100%);
  filter:blur(2px);
}
.hero__ripple{position:absolute;border:2px solid rgba(234,247,250,.4);border-radius:50%;width:14px;height:14px;opacity:0;transform:scale(.4);}
.hero__ripple--1{left:18%;bottom:24%;animation:ripple 7s ease-out infinite}
.hero__ripple--2{left:62%;bottom:16%;animation:ripple 7s ease-out 2.4s infinite}
.hero__ripple--3{left:40%;bottom:30%;animation:ripple 7s ease-out 4.6s infinite}
.hero__shade{position:absolute;inset:0;z-index:-2;background:
  linear-gradient(95deg,rgba(6,28,35,.86) 0%,rgba(6,28,35,.6) 42%,rgba(6,28,35,.22) 78%),
  linear-gradient(180deg,rgba(6,28,35,.35) 0%,rgba(6,28,35,0) 30%,rgba(6,28,35,.45) 100%)}

@keyframes sunBob{0%,100%{transform:translateY(0)}50%{transform:translateY(18px)}}
@keyframes ripple{0%{opacity:0;transform:scale(.3)}12%{opacity:.6}100%{opacity:0;transform:scale(7)}}

.hero__inner{position:relative;z-index:1;max-width:var(--maxw);margin:0 auto;width:100%}
.hero__eyebrow{
  font-family:var(--font-display);font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  font-size:.82rem;color:var(--sand);margin-bottom:22px;
  display:inline-flex;align-items:center;gap:10px;
  background:rgba(8,38,47,.3);border:1px solid rgba(234,247,250,.22);
  padding:8px 16px;border-radius:var(--radius-pill);backdrop-filter:blur(4px);
}
.hero__title{
  color:var(--paper);
  font-size:clamp(2.5rem,6.4vw,4.6rem);max-width:18ch;line-height:1.02;
  text-shadow:0 4px 30px rgba(6,30,38,.4);
}
.hero__title-accent{display:block;color:var(--paper);font-weight:600;
  background:linear-gradient(100deg,#ffffff 10%,#cdeef6 55%,var(--sand) 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.hero__sub{margin-top:26px;font-size:clamp(1.05rem,2vw,1.3rem);max-width:46ch;color:rgba(246,252,253,.92);line-height:1.55}
.hero__cta{margin-top:36px;display:flex;flex-wrap:wrap;gap:14px}
.hero__cta .btn--ghost{color:var(--paper);border-color:rgba(246,252,253,.55)}
.hero__cta .btn--ghost:hover{color:var(--white);border-color:var(--white);background:rgba(255,255,255,.12)}

.hero__trust{margin-top:42px;display:flex;flex-wrap:wrap;gap:14px 28px;align-items:center}
.hero__trust li{display:inline-flex;align-items:center;gap:9px;font-size:.96rem;font-weight:600;color:rgba(246,252,253,.95)}
.hero__trust svg{color:var(--sand)}

/* =====================================================================
   STATS BAR
   ===================================================================== */
.stats{background:var(--white);border-bottom:1px solid var(--line);position:relative;z-index:2}
.stats__inner{
  max-width:var(--maxw);margin:0 auto;padding:34px clamp(16px,4vw,32px);
  display:grid;grid-template-columns:repeat(4,1fr);gap:24px;
}
.stat{display:flex;flex-direction:column;align-items:center;text-align:center;gap:4px;position:relative}
.stat:not(:last-child)::after{content:"";position:absolute;right:-12px;top:10%;bottom:10%;width:1px;background:var(--line)}
.stat__num{font-family:var(--font-display);font-weight:700;font-size:clamp(1.6rem,3.4vw,2.3rem);color:var(--water-deep);line-height:1}
.stat__label{font-size:.92rem;color:var(--ink-mute);font-weight:600}

/* =====================================================================
   SERVICES
   ===================================================================== */
.services{padding:clamp(72px,9vw,118px) clamp(16px,4vw,32px);background:var(--paper)}
.services__grid{
  max-width:var(--maxw);margin:0 auto;display:grid;gap:22px;
  grid-template-columns:repeat(3,1fr);
}
.svc{
  background:var(--white);border:1px solid var(--line);border-radius:var(--radius);
  padding:32px 28px;box-shadow:var(--shadow-sm);position:relative;overflow:hidden;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .35s var(--ease);
}
.svc::before{content:"";position:absolute;left:0;top:0;height:3px;width:0;background:linear-gradient(90deg,var(--water-bright),var(--water-deep));transition:width .4s var(--ease)}
.svc:hover{transform:translateY(-6px);box-shadow:var(--shadow-md);border-color:var(--line-strong)}
.svc:hover::before{width:100%}
.svc__icon{
  display:inline-flex;align-items:center;justify-content:center;width:56px;height:56px;
  border-radius:16px;background:linear-gradient(140deg,var(--paper-2),#d9eef3);color:var(--water-deep);
  margin-bottom:20px;transition:transform .35s var(--ease),background .35s var(--ease)
}
.svc:hover .svc__icon{transform:scale(1.06) rotate(-3deg);background:linear-gradient(140deg,#cdebf2,#aedfe9)}
.svc h3{font-size:1.28rem;margin-bottom:10px}
.svc p{color:var(--ink-soft);font-size:1rem}

/* =====================================================================
   PROCESS  (dark band)
   ===================================================================== */
.process{
  padding:clamp(72px,9vw,118px) clamp(16px,4vw,32px);
  background:
    radial-gradient(90% 120% at 85% 0%, rgba(28,167,196,.22), rgba(28,167,196,0) 55%),
    linear-gradient(165deg,var(--deep-1),var(--deep-2));
  color:var(--paper);position:relative;overflow:hidden;
}
.process::after{content:"";position:absolute;left:-10%;bottom:-30%;width:60%;height:80%;background:radial-gradient(circle,rgba(234,217,176,.1),transparent 65%);pointer-events:none}
.steps{
  max-width:var(--maxw);margin:0 auto;display:grid;gap:22px;
  grid-template-columns:repeat(4,1fr);counter-reset:step;
}
.step{
  background:rgba(255,255,255,.045);border:1px solid rgba(234,247,250,.14);
  border-radius:var(--radius);padding:30px 26px;position:relative;backdrop-filter:blur(3px);
  transition:transform .35s var(--ease),background .35s var(--ease),border-color .35s var(--ease)
}
.step:hover{transform:translateY(-6px);background:rgba(255,255,255,.075);border-color:rgba(234,217,176,.4)}
.step__num{
  font-family:var(--font-display);font-weight:700;font-size:2.1rem;
  color:transparent;-webkit-text-stroke:1.5px var(--sand);
  display:block;margin-bottom:14px;line-height:1
}
.step h3{color:var(--paper);font-size:1.22rem;margin-bottom:9px}
.step p{color:rgba(246,252,253,.82);font-size:.98rem}

/* =====================================================================
   GALLERY
   ===================================================================== */
.gallery{padding:clamp(72px,9vw,118px) clamp(16px,4vw,32px);background:var(--white)}
.gallery__grid{
  max-width:var(--maxw);margin:0 auto;display:grid;gap:18px;
  grid-template-columns:repeat(4,1fr);grid-auto-rows:230px;
}
.shot{margin:0;position:relative;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-sm);grid-column:span 1;grid-row:span 1}
.shot--tall{grid-row:span 2}
.shot--wide{grid-column:span 2}
.shot__ph{position:absolute;inset:0;overflow:hidden;background-size:cover;background-position:center;background-repeat:no-repeat}
.shot__ph::after{
  content:"";position:absolute;inset:0;
  background-image:
    radial-gradient(circle at 30% 20%, rgba(255,255,255,.1), transparent 45%),
    linear-gradient(180deg, transparent 55%, rgba(8,30,38,.28) 100%);
}
.shot__ph--a{background-image:url("assets/img/gallery-a.webp")}
.shot__ph--b{background-image:url("assets/img/gallery-b.webp")}
.shot__ph--c{background-image:url("assets/img/gallery-c.webp")}
.shot__ph--d{background-image:url("assets/img/gallery-d.webp")}
.shot__shimmer{
  position:absolute;top:0;left:-60%;width:55%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.28),transparent);
  transform:skewX(-18deg);animation:sheen 6s ease-in-out infinite;
}
.shot--tall .shot__shimmer{animation-delay:1.2s}
.shot:nth-child(2) .shot__shimmer{animation-delay:.6s}
.shot:nth-child(3) .shot__shimmer{animation-delay:1.8s}
.shot--wide .shot__shimmer{animation-delay:2.4s}
@keyframes sheen{0%{left:-60%}35%,100%{left:130%}}
.shot figcaption{
  position:absolute;left:0;right:0;bottom:0;z-index:1;
  display:flex;flex-direction:column;gap:2px;
  padding:30px 18px 16px;color:var(--white);
  background:linear-gradient(0deg,rgba(8,30,38,.78),transparent);
  transform:translateY(6px);opacity:.94;transition:transform .3s var(--ease),opacity .3s var(--ease)
}
.shot:hover figcaption{transform:translateY(0);opacity:1}
.shot__place{font-family:var(--font-display);font-weight:700;font-size:1.02rem}
.shot__suburb{font-size:.85rem;color:rgba(246,252,253,.85);font-weight:600}
.gallery__note{text-align:center;margin-top:34px;color:var(--ink-soft);font-size:1.02rem}
.gallery__note a{color:var(--water-deeper);font-weight:700;text-decoration:underline;text-underline-offset:3px}

/* =====================================================================
   GET A QUOTE  (dark)
   ===================================================================== */
.missed{
  position:relative;padding:clamp(72px,9vw,120px) clamp(16px,4vw,32px);
  background:
    radial-gradient(80% 100% at 12% 10%, rgba(28,167,196,.26), transparent 55%),
    linear-gradient(160deg,#0d4a59,#0a2129);
  color:var(--paper);overflow:hidden;
}
.missed__scene{position:absolute;inset:0;opacity:.4;
  background-image:repeating-linear-gradient(118deg, rgba(255,255,255,.04) 0 14px, transparent 14px 30px);
  animation:drift 22s linear infinite;pointer-events:none}
@keyframes drift{from{background-position:0 0}to{background-position:240px 0}}
.missed__inner{
  position:relative;z-index:1;max-width:var(--maxw);margin:0 auto;
  display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center;
}
.missed__copy h2{color:var(--paper);font-size:clamp(1.9rem,4.2vw,2.85rem);max-width:16ch}
.missed__lead{margin-top:20px;color:rgba(246,252,253,.86);font-size:1.1rem;max-width:50ch}
.missed__points{margin-top:26px;display:flex;flex-direction:column;gap:14px}
.missed__points li{display:flex;align-items:flex-start;gap:12px;font-weight:600;color:var(--paper)}
.missed__points svg{flex:none;color:var(--ink);background:var(--sand);border-radius:50%;padding:3px;margin-top:1px}

/* form card */
.missed__formwrap{position:relative}
.quote{
  background:var(--white);color:var(--ink);border-radius:22px;
  padding:clamp(26px,3.5vw,38px);box-shadow:var(--shadow-lg);
  border:1px solid var(--line);position:relative;
}
.quote__title{font-size:1.5rem;margin-bottom:6px}
.quote__sub{color:var(--ink-soft);font-size:.98rem;margin-bottom:22px}
.field{display:flex;flex-direction:column;gap:7px;margin-bottom:16px}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.field label{font-family:var(--font-display);font-weight:600;font-size:.94rem;color:var(--ink)}
.field__opt{color:var(--ink-mute);font-weight:500;font-size:.85rem}
.field input,.field textarea,.select-wrap select{
  font-family:var(--font-body);font-size:1rem;color:var(--ink);
  background:var(--paper);border:1.5px solid var(--line-strong);border-radius:12px;
  padding:13px 15px;width:100%;transition:border-color .2s var(--ease),box-shadow .2s var(--ease),background .2s var(--ease)
}
.field textarea{resize:vertical;min-height:84px}
.field input::placeholder,.field textarea::placeholder{color:#7f9aa1}
.field input:focus,.field textarea:focus,.select-wrap select:focus{
  outline:none;border-color:var(--water);background:var(--white);
  box-shadow:0 0 0 4px rgba(28,167,196,.16)
}
.field__hint{font-size:.82rem;color:var(--ink-mute)}
.field__error{font-size:.84rem;color:#c0392b;font-weight:600;display:none}
.field.has-error input{border-color:#c0392b;box-shadow:0 0 0 4px rgba(192,57,43,.12)}
.field.has-error .field__error{display:block}
.select-wrap{position:relative}
.select-wrap select{appearance:none;-webkit-appearance:none;padding-right:42px;cursor:pointer}
.select-wrap__chev{position:absolute;right:14px;top:50%;transform:translateY(-50%);color:var(--ink-mute);pointer-events:none}
.quote__fineprint{margin-top:14px;font-size:.82rem;color:var(--ink-mute);text-align:center}

.quote__success{text-align:center;padding:18px 6px 6px;animation:popIn .4s var(--ease)}
@keyframes popIn{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:scale(1)}}
.quote__success-icon{display:inline-flex;align-items:center;justify-content:center;width:62px;height:62px;border-radius:50%;background:linear-gradient(140deg,var(--water-bright),var(--water-deep));color:var(--white);margin-bottom:14px;box-shadow:0 12px 26px -10px rgba(28,167,196,.7)}
.quote__success h3{font-size:1.45rem;margin-bottom:8px}
.quote__success p{color:var(--ink-soft)}
.quote__success a{color:var(--water-deeper);font-weight:700;text-decoration:underline;text-underline-offset:2px}

/* =====================================================================
   REVIEWS
   ===================================================================== */
.reviews{padding:clamp(72px,9vw,118px) clamp(16px,4vw,32px);background:var(--paper)}
.reviews__rating{margin-top:16px;font-size:1.05rem;color:var(--ink-soft)}
.reviews__rating strong{color:var(--ink);font-weight:800}
.reviews__grid{max-width:var(--maxw);margin:0 auto;display:grid;gap:22px;grid-template-columns:repeat(3,1fr)}
.review{
  background:var(--white);border:1px solid var(--line);border-radius:var(--radius);
  padding:30px 28px;box-shadow:var(--shadow-sm);display:flex;flex-direction:column;gap:14px;margin:0;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease)
}
.review:hover{transform:translateY(-5px);box-shadow:var(--shadow-md)}
.review .stars{font-size:1.05rem}
.review blockquote{margin:0;font-size:1.04rem;color:var(--ink-soft);line-height:1.55}
.review figcaption{display:flex;flex-direction:column;margin-top:auto}
.review__name{font-family:var(--font-display);font-weight:700;color:var(--ink)}
.review__where{font-size:.88rem;color:var(--ink-mute);font-weight:600}

/* =====================================================================
   AREAS
   ===================================================================== */
.areas{padding:clamp(72px,9vw,118px) clamp(16px,4vw,32px);background:var(--white);border-top:1px solid var(--line)}
.areas__inner{max-width:var(--maxw);margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.areas__copy h2{font-size:clamp(1.8rem,4vw,2.7rem)}
.areas__copy .btn{margin-top:26px}
.areas__list{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.areas__list li{
  display:flex;align-items:center;gap:11px;font-family:var(--font-display);font-weight:600;
  background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:15px 18px;
  transition:transform .25s var(--ease),border-color .25s var(--ease),background .25s var(--ease)
}
.areas__list li::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--water);flex:none;box-shadow:0 0 0 4px rgba(28,167,196,.14)}
.areas__list li:hover{transform:translateX(4px);border-color:var(--line-strong);background:var(--paper-2)}

/* =====================================================================
   FINAL CTA  (cinematic water again)
   ===================================================================== */
.finalcta{
  position:relative;padding:clamp(80px,10vw,140px) clamp(16px,4vw,32px);
  overflow:hidden;isolation:isolate;color:var(--paper);text-align:center;
  background:linear-gradient(160deg,#0e6b80 0%,#1593af 50%,#22a9c6 100%);
}
.finalcta__caustics{position:absolute;inset:0;width:100%;height:100%;z-index:-3;opacity:.55;mix-blend-mode:screen}
.finalcta__shade{position:absolute;inset:0;z-index:-2;background:radial-gradient(70% 90% at 50% 40%,rgba(8,38,47,.15),rgba(8,38,47,.55))}
.finalcta__inner{position:relative;z-index:1;max-width:760px;margin:0 auto}
.finalcta h2{color:var(--paper);font-size:clamp(2rem,5vw,3.3rem);max-width:18ch;margin:0 auto;text-shadow:0 4px 26px rgba(6,30,38,.35)}
.finalcta p{margin:22px auto 0;font-size:1.15rem;color:rgba(246,252,253,.92);max-width:46ch}
.finalcta__actions{margin-top:36px;display:flex;flex-wrap:wrap;gap:14px;justify-content:center}

/* =====================================================================
   FOOTER
   ===================================================================== */
.footer{background:var(--deep-1);color:rgba(246,252,253,.78);padding:clamp(56px,7vw,84px) clamp(16px,4vw,32px) 0}
.footer__inner{max-width:var(--maxw);margin:0 auto;display:grid;grid-template-columns:1.6fr 1fr 1fr 1.3fr;gap:40px;padding-bottom:48px}
.wordmark--footer{color:var(--white);font-size:1.4rem;margin-bottom:16px}
.wordmark--footer .wordmark__accent{color:var(--sand)}
.footer__tag{font-size:.96rem;color:rgba(246,252,253,.68);max-width:34ch;line-height:1.6}
.footer__social{display:flex;gap:12px;margin-top:20px}
.footer__social a{display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:12px;background:rgba(255,255,255,.07);border:1px solid rgba(234,247,250,.14);color:rgba(246,252,253,.85);transition:transform .25s var(--ease),background .25s var(--ease),color .2s var(--ease)}
.footer__social a:hover{transform:translateY(-3px);background:var(--water-deep);color:var(--white);border-color:transparent}
.footer__col h4{font-family:var(--font-display);font-weight:700;color:var(--white);font-size:1.02rem;margin-bottom:16px}
.footer__col ul{display:flex;flex-direction:column;gap:11px}
.footer__col a{color:rgba(246,252,253,.72);font-size:.96rem;transition:color .2s var(--ease)}
.footer__col a:hover{color:var(--sand)}
.footer__contact li{font-size:.96rem;color:rgba(246,252,253,.72);margin-bottom:11px}
.footer__hours-h{margin-top:22px}
.footer__hours li{display:flex;justify-content:space-between;gap:14px;font-size:.92rem}
.footer__hours span:first-child{color:rgba(246,252,253,.6)}
.footer__hours span:last-child{color:var(--white);font-weight:600}

.footer__bar{
  max-width:var(--maxw);margin:0 auto;border-top:1px solid rgba(234,247,250,.12);
  padding:24px 0 36px;display:flex;flex-wrap:wrap;gap:8px 26px;align-items:center;justify-content:space-between;
  font-size:.86rem;color:rgba(246,252,253,.6)
}
.footer__bar p{margin:0}
.footer__legal{color:rgba(246,252,253,.72)}
.footer__areas-line{flex-basis:100%;color:rgba(246,252,253,.42);font-size:.8rem;letter-spacing:.01em}

/* =====================================================================
   MOBILE CALL BAR
   ===================================================================== */
.callbar{
  display:none;position:fixed;left:0;right:0;bottom:0;z-index:90;
  align-items:center;justify-content:center;gap:10px;
  padding:14px;font-family:var(--font-display);font-weight:700;font-size:1.05rem;
  color:var(--white);background:linear-gradient(135deg,var(--water-bright),var(--water-deep));
  box-shadow:0 -8px 30px -10px rgba(16,42,51,.45);
}
.callbar svg{color:var(--white)}

/* =====================================================================
   FILL SET-PIECE  (pinned: empty pool fills with water as you scroll)
   ---------------------------------------------------------------------
   REUSABLE MODULE. Self-contained. Drives a single custom property
   --fill (0 = empty .. 1 = full). Water height, waterline position,
   caustic opacity and deep-end light glow all read from --fill.
   Native CSS scroll-driven animation sets --fill where supported;
   script.js provides a rAF fallback for the rest. Reduced-motion
   pins --fill at 1 (filled) with no movement.
   ===================================================================== */
@property --fill{ syntax:"<number>"; inherits:true; initial-value:0; }

.fillpool{
  --fill:0;                       /* 0..1 scroll-driven fill level */
  position:relative;
  /* total scroll distance the pinned scene scrubs across */
  height:300vh;
  background:
    radial-gradient(120% 80% at 80% 4%, rgba(102,216,238,.18), transparent 55%),
    linear-gradient(168deg,#0a2129 0%,#0d3a47 52%,#103642 100%);
  color:var(--paper);
  isolation:isolate;
}
/* native scroll-driven fill: starts when section top hits viewport top,
   ends when its bottom hits viewport bottom. Pure CSS, no JS. */
@supports (animation-timeline:view()){
  .fillpool{ animation:fillpoolDrive linear both; animation-timeline:view(); animation-range:contain 0% contain 100%; }
}
@keyframes fillpoolDrive{ from{ --fill:0; } to{ --fill:1; } }

.fillpool__sticky{
  position:sticky;top:0;height:100dvh;
  display:grid;grid-template-rows:auto 1fr;align-content:center;justify-items:center;gap:clamp(18px,3vh,34px);
  padding:calc(var(--nav-h) + 16px) clamp(16px,4vw,32px) clamp(24px,5vh,56px);
  overflow:hidden;
}
.fillpool__copy{max-width:760px;text-align:center;z-index:2}
.fillpool__copy h2{color:var(--paper);font-size:clamp(1.7rem,4.2vw,2.85rem);line-height:1.08;text-shadow:0 4px 24px rgba(6,30,38,.4)}
.fillpool__line1{display:block}  /* two lines on desktop */
.fillpool__lead{margin-top:14px;color:rgba(246,252,253,.82);font-size:clamp(1rem,2vw,1.15rem)}

/* ---- the pool stage ---- */
.fillpool__stage{
  position:relative;width:100%;max-width:880px;align-self:center;
  display:flex;align-items:center;justify-content:center;
}
.poolshell{
  position:relative;width:100%;aspect-ratio:16/9;max-height:58vh;
  border-radius:26px;
  /* concrete coping surround */
  padding:clamp(10px,1.6vw,18px);
  background:linear-gradient(160deg,#e9eef0,#cdd7da 60%,#b7c4c8);
  box-shadow:
    0 40px 90px -40px rgba(6,30,38,.7),
    inset 0 1px 0 rgba(255,255,255,.7);
}
.poolshell__coping{position:absolute;inset:0;border-radius:26px;pointer-events:none;
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.45), inset 0 0 0 7px rgba(120,150,158,.28)}

/* the carved basin (clips the water) */
.poolshell__basin{
  position:relative;width:100%;height:100%;border-radius:16px;overflow:hidden;
  /* empty interior: pale plaster catching light, darker toward the deep end */
  background:
    radial-gradient(120% 80% at 50% -10%, rgba(255,255,255,.5), transparent 40%),
    linear-gradient(178deg,#cfe4e8 0%,#aacdd5 30%,#6fa8b4 70%,#356b78 100%);
  box-shadow:inset 0 14px 36px -10px rgba(8,40,48,.55), inset 0 -22px 50px -10px rgba(6,32,40,.6);
}
/* shallow-end floor sheen */
.poolbasin__floor{position:absolute;inset:0;
  background:repeating-linear-gradient(91deg, rgba(255,255,255,.05) 0 26px, rgba(255,255,255,0) 26px 54px);
  opacity:.5}
/* a hint of steps in the shallow end */
.poolbasin__steps{position:absolute;left:5%;bottom:6%;width:22%;height:30%;
  background:
    linear-gradient(180deg, rgba(255,255,255,.16), transparent 30%),
    repeating-linear-gradient(180deg, rgba(255,255,255,.14) 0 7px, rgba(40,80,90,.12) 7px 16px);
  border-radius:5px;opacity:.6}

/* deep-end lights: dark until the pool is nearly full, then glow warm.
   --glow ramps 0..1 over the last ~28% of the fill (0.72 -> 1.0). */
.poollight{--glow:clamp(0, calc((var(--fill) - .72) * 3.57), 1);
  position:absolute;bottom:16%;width:clamp(28px,4.2vw,50px);height:clamp(28px,4.2vw,50px);border-radius:50%;
  background:radial-gradient(circle, rgba(255,250,236,1) 0%, rgba(255,243,206,.95) 22%, rgba(255,228,170,.45) 50%, rgba(255,228,170,0) 76%);
  opacity:var(--glow);
  filter:blur(.5px) drop-shadow(0 0 14px rgba(255,232,176,.7));
  transform:scale(calc(.55 + .45 * var(--glow)));
  /* sit ABOVE the water so submerged lights glow THROUGH it; screen blend keeps them watery */
  mix-blend-mode:screen;
  will-change:opacity,transform;z-index:3}
/* crisp warm core so the fitting reads as a real light, not just haze */
.poollight::after{content:"";position:absolute;inset:34%;border-radius:50%;
  background:radial-gradient(circle,#fffdf6,rgba(255,243,206,.6) 70%,transparent);
  box-shadow:0 0 8px 2px rgba(255,240,200,.85)}
.poollight--1{left:30%}
.poollight--2{left:50%;bottom:13%;width:clamp(32px,4.8vw,58px);height:clamp(32px,4.8vw,58px)}
.poollight--3{left:70%}

/* ---- the water ---- */
.poolwater{
  position:absolute;left:0;right:0;bottom:0;
  /* height is the star: scrubs from ~3% (a sliver) to 100% */
  height:calc((3% + 97% * var(--fill)));
  z-index:2;will-change:height;
}
.poolwater__body{position:absolute;inset:0;overflow:hidden;
  background:
    linear-gradient(180deg, rgba(86,205,229,.86) 0%, rgba(45,160,190,.92) 34%, rgba(20,110,135,.96) 78%, rgba(12,74,92,.98) 100%);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.35)}
/* moving caustic shimmer inside the water; fades in as water deepens */
.poolwater__caustic{position:absolute;inset:0;overflow:hidden;mix-blend-mode:screen;
  opacity:clamp(0, calc(var(--fill) * 1.4), .8);
  background-image:
    radial-gradient(38% 60% at 20% 30%, rgba(214,247,255,.5), transparent 60%),
    radial-gradient(34% 54% at 70% 50%, rgba(190,238,250,.42), transparent 60%),
    repeating-linear-gradient(112deg, rgba(255,255,255,.10) 0 16px, rgba(255,255,255,0) 16px 40px),
    repeating-linear-gradient(64deg, rgba(255,255,255,.07) 0 22px, rgba(255,255,255,0) 22px 56px);
  background-size:140% 140%, 130% 130%, 200% 200%, 220% 220%;
  animation:causticDrift 11s ease-in-out infinite alternate}
@keyframes causticDrift{
  0%{background-position:0% 0%, 100% 0%, 0 0, 0 0}
  100%{background-position:30% 18%, 70% 24%, 120px 40px, -120px 30px}
}
/* the rippling waterline sits ON TOP of the water's rising edge */
.poolwater__line{position:absolute;left:0;right:0;top:-18px;width:100%;height:34px;overflow:visible;
  filter:drop-shadow(0 2px 3px rgba(8,40,48,.25))}
.poolwater__wave{transform-box:view-box;transform-origin:center}
.poolwater__wave--back{fill:rgba(170,228,242,.55);animation:waveSlide 7s linear infinite}
.poolwater__wave--front{fill:rgba(214,247,255,.92);animation:waveSlideRev 5s linear infinite}
@keyframes waveSlide{from{transform:translateX(0)}to{transform:translateX(-150px)}}
@keyframes waveSlideRev{from{transform:translateX(-150px)}to{transform:translateX(0)}}
/* a soft surface highlight band that rides the waterline */
.poolwater__body::before{content:"";position:absolute;left:0;right:0;top:0;height:14px;
  background:linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,0));opacity:.7}

/* ---- gauge ---- */
.fillpool__gauge{position:absolute;right:clamp(8px,2vw,20px);top:clamp(8px,2vw,16px);
  display:flex;flex-direction:column;align-items:flex-end;gap:1px;z-index:3;
  font-family:var(--font-display);color:var(--paper);text-shadow:0 2px 10px rgba(6,30,38,.5)}
.fillpool__gauge-label{font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;color:var(--sand);font-weight:700}
.fillpool__gauge-pct{font-size:clamp(1.6rem,4vw,2.4rem);font-weight:700;line-height:1;font-variant-numeric:tabular-nums}

@media (max-width:760px){
  .fillpool{height:280vh}
  .poolshell{aspect-ratio:4/3;max-height:46vh}
  .fillpool__line1{display:inline}  /* flow into one wrapped headline on mobile */
}
@media (max-width:560px){
  .poolshell{aspect-ratio:5/4}
}

/* reduced motion: show the FILLED pool, kill all movement */
@media (prefers-reduced-motion:reduce){
  .fillpool{height:auto;--fill:1;animation:none}
  .fillpool__sticky{position:static;height:auto;min-height:auto;padding-block:clamp(64px,9vw,110px)}
  .fillpool__track{display:none}
  .poolwater__caustic{animation:none}
  .poolwater__wave--back,.poolwater__wave--front{animation:none}
}

/* =====================================================================
   SCROLL REVEAL
   ===================================================================== */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.reveal.is-in{opacity:1;transform:none}
.reveal:nth-child(2){transition-delay:.07s}
.reveal:nth-child(3){transition-delay:.14s}
.reveal:nth-child(4){transition-delay:.21s}
.reveal:nth-child(5){transition-delay:.28s}
.reveal:nth-child(6){transition-delay:.35s}

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
@media (max-width:1024px){
  .nav__links{display:none}
  .nav__toggle{display:flex}
  .missed__inner{grid-template-columns:1fr;gap:40px}
  .missed__copy h2{max-width:22ch}
  .footer__inner{grid-template-columns:1fr 1fr;gap:36px}
  .footer__brand{grid-column:1 / -1}
}

@media (max-width:860px){
  .services__grid{grid-template-columns:repeat(2,1fr)}
  .steps{grid-template-columns:repeat(2,1fr)}
  .reviews__grid{grid-template-columns:1fr;max-width:560px}
  .review{margin-inline:auto;width:100%}
  .stats__inner{grid-template-columns:repeat(2,1fr);gap:30px 20px}
  .stat:nth-child(2)::after{display:none}
}

@media (max-width:760px){
  body{font-size:16px}
  .areas__inner{grid-template-columns:1fr;gap:30px}
  .gallery__grid{grid-template-columns:repeat(2,1fr);grid-auto-rows:200px}
  .shot--wide{grid-column:span 2}
  .shot--tall{grid-row:span 1}
  .callbar{display:flex}
  body{padding-bottom:62px}
  .hero{padding-bottom:78px;min-height:auto;padding-top:calc(var(--nav-h) + 56px)}
  .hero__sun{width:240px;height:240px;right:-6%}
  .footer__bar{flex-direction:column;align-items:flex-start}
}

@media (max-width:560px){
  .services__grid{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr}
  .stats__inner{grid-template-columns:1fr 1fr}
  .field-row{grid-template-columns:1fr}
  .areas__list{grid-template-columns:1fr}
  .footer__inner{grid-template-columns:1fr;gap:30px}
  .footer__brand{grid-column:auto}
  .gallery__grid{grid-template-columns:1fr;grid-auto-rows:210px}
  .shot--wide{grid-column:span 1}
  .hero__eyebrow{font-size:.74rem}
  .hero__trust{gap:12px 20px}
  .btn--lg{width:100%}
  .hero__cta{flex-direction:column}
  .hero__cta .btn{width:100%}
  .finalcta__actions .btn{width:100%}
}

/* =====================================================================
   REDUCED MOTION
   ===================================================================== */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .reveal{opacity:1!important;transform:none!important}
  .hero__caustics,.finalcta__caustics{display:none}
  .hero__sun,.hero__ripple,.shot__shimmer,.missed__scene{animation:none}
  .hero__ripple{display:none}
}