/* ============================================================
   RKD Pool Water Delivery — "WATERLINE" identity
   Light, premium, geometric: Space Grotesk display + Albert Sans,
   foam-white ground, deep-ocean navy + aqua accents. Registry-
   distinct: no shipped site uses Space Grotesk; Sea Mark is the
   dark harbour slab, this is its light geometric opposite.
   Signature components: waterline wave dividers, depth-gauge
   stat tiles, ripple-ring photo badges, fill-meter accents.
   ============================================================ */
:root{
  --font-head:'Space Grotesk',Futura,sans-serif;
  --font-body:'Albert Sans',-apple-system,sans-serif;
  --cap-font:var(--font-body);
  --h1-min:42px;--h1-vw:5.8vw;--h1-max:76px;--h1-lh:1.02;--h1-ls:-1px;--h1-w:700;
  --h2-min:30px;--h2-vw:3.8vw;--h2-max:48px;--h2-lh:1.06;--h2-ls:-.6px;--h2-w:700;--h3-w:600;
  --maxw:1180px;--section-y:clamp(64px,8.5vw,118px);

  --ink:#0c2033;--body:#33495c;--mut:#6d8296;
  --bg:#f7fafc;--bg-soft:#e9f2f7;--line:#d3e2ea;
  --brand:#0c2c47;--accent:#1996c8;--accent-2:#37c3dd;

  --nav-fg:rgba(255,255,255,.95);--nav-fg-scrolled:var(--body);--nav-bg-scrolled:rgba(247,250,252,.97);
  --menu-bg:var(--bg);--menu-fg:var(--body);
  --foot-bg:#0c2c47;--foot-fg:#8fa8bc;--foot-rule:var(--accent-2);
  --foot-cols:2fr 1fr 1fr 1.2fr;
  --head-overlay-a:rgba(9,32,52,.58);--head-overlay-b:rgba(9,32,52,.84);
  --check-glyph:"✓";
  --hero-vh:90vh;--hero-cap:920px;

  --hero-scrim:linear-gradient(180deg,rgba(9,32,52,.34) 0%,rgba(9,32,52,.5) 55%,rgba(7,26,42,.82) 100%);
  --img-grade:saturate(1.08) contrast(1.02);
  --shadow:0 24px 50px rgba(12,44,71,.16);--shadow-sm:0 10px 26px rgba(12,44,71,.1);
  --radius:16px;--btn-radius:999px;
  --nav-h:84px;--nav-h-scrolled:64px;--ul-h:2px;
  --reveal-ease:cubic-bezier(.16,1,.3,1);
}
h1,h2,h3{font-family:var(--font-head)}
em{font-style:normal;color:var(--accent)}
.btn-primary{background:linear-gradient(135deg,var(--accent),var(--accent-2));color:#04263a;font-weight:800;
  box-shadow:0 12px 28px rgba(25,150,200,.35)}
.btn-primary:hover{transform:translateY(-1px);box-shadow:0 16px 32px rgba(25,150,200,.45)}
.section.soft{background:var(--bg-soft)}
.section.ocean{background:var(--brand);color:#b6c9d8}
.section.ocean h2,.section.ocean h3{color:#f2f8fb}
.section.ocean .lead{color:#8fa8bc}

/* wordmark */
.logo{display:flex;align-items:center;gap:11px}
.wordmark{display:flex;flex-direction:column;line-height:1}
.wm-name{font-family:var(--font-head);font-weight:700;font-size:21px;letter-spacing:-.3px;color:#fff}
.wm-sub{font-size:9px;font-weight:700;letter-spacing:3px;text-transform:uppercase;color:var(--accent-2);margin-top:4px}
.nav.scrolled .wm-name{color:var(--ink)}
.nav.scrolled .wm-sub{color:var(--accent)}

/* hero */
.hero .scrim{background:var(--hero-scrim)}
.hero .wrap{padding-bottom:clamp(64px,8vw,110px)}
.hero h1{text-shadow:0 3px 26px rgba(0,0,0,.35);max-width:16ch}
.hero .lead{color:#e2eef5;max-width:52ch;margin:20px 0 30px}
.heroline{display:inline-flex;align-items:center;gap:10px;margin-top:32px;
  font-size:11.5px;font-weight:800;letter-spacing:2.6px;text-transform:uppercase;color:var(--accent-2)}
.heroline::before{content:"";width:42px;height:2px;background:var(--accent-2)}

/* SIGNATURE 1: waterline wave divider (inline svg via mask) */
.wave{height:34px;position:relative;overflow:hidden}
.wave::before{content:"";position:absolute;inset:0;background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 40' preserveAspectRatio='none'%3E%3Cpath d='M0 24 Q150 4 300 24 T600 24 T900 24 T1200 24 V40 H0 Z'/%3E%3C/svg%3E") center/100% 100% no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 40' preserveAspectRatio='none'%3E%3Cpath d='M0 24 Q150 4 300 24 T600 24 T900 24 T1200 24 V40 H0 Z'/%3E%3C/svg%3E") center/100% 100% no-repeat}
.wave.to-soft{color:var(--bg-soft)}
.wave.to-ocean{color:var(--brand)}
.wave.to-bg{color:var(--bg)}

/* SIGNATURE 2: depth-gauge stat tiles */
.gauges{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.gauge{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:26px 20px 22px;
  text-align:center;position:relative;overflow:hidden}
.gauge::after{content:"";position:absolute;left:0;right:0;bottom:0;height:6px;
  background:linear-gradient(90deg,var(--accent),var(--accent-2))}
.gauge .n{font-family:var(--font-head);font-weight:700;font-size:clamp(30px,3.6vw,44px);color:var(--brand);line-height:1.05}
.gauge .l{font-size:12px;font-weight:700;letter-spacing:1.8px;text-transform:uppercase;color:var(--mut);margin-top:9px}
.section.ocean .gauge{background:#0f3554;border-color:#1c4569}
.section.ocean .gauge .n{color:#fff}
.section.ocean .gauge .l{color:#8fa8bc}

/* SIGNATURE 3: ripple-ring photo badge */
.ripple{position:relative;display:block}
.ripple::before,.ripple::after{content:"";position:absolute;border-radius:50%;pointer-events:none;z-index:2}
.ripple::before{inset:auto auto -18px -18px;width:110px;height:110px;border:2px solid var(--accent-2);opacity:.55}
.ripple::after{inset:auto auto -34px -34px;width:150px;height:150px;border:2px solid var(--accent-2);opacity:.25}
.ripple img{width:100%;height:clamp(340px,44vw,520px);object-fit:cover;border-radius:var(--radius);
  filter:var(--img-grade);box-shadow:var(--shadow);position:relative;z-index:1}

/* SIGNATURE 4: fill-meter list */
.meter{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:14px}
.meter li{position:relative;padding:16px 18px 16px 54px;background:#fff;border:1px solid var(--line);
  border-radius:12px;font-weight:600;color:var(--ink)}
.meter li::before{content:"";position:absolute;left:18px;top:50%;transform:translateY(-50%);
  width:20px;height:20px;border-radius:50%;
  background:radial-gradient(circle at 35% 35%,var(--accent-2),var(--accent));box-shadow:0 0 0 4px rgba(55,195,221,.18)}
.meter li small{display:block;font-weight:400;color:var(--mut);margin-top:3px}

/* county chips */
.counties{display:flex;flex-wrap:wrap;gap:10px}
.county{background:#fff;border:1.5px solid var(--line);border-radius:999px;padding:10px 20px;
  font-weight:700;color:var(--brand);font-size:15px}
.county b{color:var(--accent)}

/* steps */
.steps3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.step{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:28px 24px;position:relative;overflow:hidden}
.step::before{content:"";position:absolute;top:0;left:0;right:0;height:5px;background:linear-gradient(90deg,var(--accent),var(--accent-2))}
.step .n{font-family:var(--font-head);font-weight:700;font-size:46px;line-height:1;
  background:linear-gradient(135deg,var(--accent),var(--accent-2));-webkit-background-clip:text;background-clip:text;color:transparent}
.step h3{margin:12px 0 8px}
.step p{margin:0;color:var(--mut);font-size:15px}

@media(max-width:1000px){.gauges{grid-template-columns:1fr}.steps3{grid-template-columns:1fr}}
@media(max-width:640px){.ripple::before,.ripple::after{display:none}.ripple img{height:300px}}

/* ===== /plan explainer page (private, noindex) ===== */
.plan-live{display:flex;flex-wrap:wrap;align-items:center;gap:20px;justify-content:space-between;
  background:linear-gradient(135deg,#0c2c47,#123a5c);color:#dceaf3;border-radius:var(--radius);padding:26px 30px}
.plan-live b{color:#fff}
.plan-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.pcard{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:24px 24px 22px;box-shadow:var(--shadow-sm)}
.pcard .pn{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;
  background:linear-gradient(135deg,var(--accent),var(--accent-2));color:#04263a;font-family:var(--font-head);font-weight:700;font-size:16px;margin-bottom:13px}
.pcard h3{margin:0 0 8px;font-size:19px;color:var(--ink)}
.pcard p{margin:0;color:var(--body);font-size:15.5px;line-height:1.55}
.gloss{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.gitem{background:var(--bg-soft);border-left:3px solid var(--accent);border-radius:8px;padding:16px 18px}
.gitem dt{font-family:var(--font-head);font-weight:700;font-size:16px;color:var(--ink);margin-bottom:4px}
.gitem dd{margin:0;color:var(--body);font-size:15px;line-height:1.5}
.terms{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.terms li{position:relative;padding-left:34px;font-size:16.5px;color:var(--body);line-height:1.5}
.terms li b{color:var(--ink)}
.terms li::before{content:"✓";position:absolute;left:0;top:0;width:24px;height:24px;border-radius:50%;
  background:var(--accent);color:#04263a;font-weight:800;font-size:13px;display:flex;align-items:center;justify-content:center}
.pricebig{font-family:var(--font-head);font-weight:700;font-size:clamp(46px,7vw,68px);color:var(--accent);line-height:1}
.pricebig small{display:block;font-family:var(--font-body);font-size:15px;font-weight:600;letter-spacing:2px;text-transform:uppercase;color:var(--mut);margin-top:6px}
@media(max-width:720px){.plan-grid,.gloss{grid-template-columns:1fr}}

/* ===== quote form — styled card ===== */
.qform{background:#fff;border:1px solid var(--line);border-radius:20px;padding:clamp(22px,3vw,32px);
  box-shadow:0 24px 60px -30px rgba(12,44,71,.45),0 0 0 1px rgba(12,44,71,.03)}
.qform .fgrid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.qform .full{grid-column:1 / -1}
.qform label.fl{display:block;font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  color:var(--brand);margin:0 0 6px}
.qform input,.qform select{width:100%;box-sizing:border-box;padding:13px 15px;font:inherit;font-size:15.5px;color:var(--ink);
  background:#f7fafc;border:1.5px solid var(--line);border-radius:12px;transition:border-color .18s,box-shadow .18s,background .18s;appearance:none}
.qform input::placeholder{color:#9fb0bf}
.qform input:focus,.qform select:focus{outline:none;border-color:var(--accent);background:#fff;
  box-shadow:0 0 0 4px rgba(25,150,200,.14)}
.qform select{background-image:url("data:image/svg+xml;charset=US-ASCII,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%236d8296' d='M6 8 0 0h12z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 15px center;padding-right:38px}
.qform .hp{position:absolute!important;left:-9999px!important;width:1px!important;height:1px!important}
.qform .cons{display:flex;gap:11px;align-items:flex-start;font-size:13.5px;color:var(--mut);line-height:1.45;cursor:pointer}
.qform .cons input{width:20px;height:20px;min-width:20px;margin-top:1px;padding:0;accent-color:var(--accent);border-radius:6px;background:#fff}
.qform .btn-primary{width:100%;justify-content:center;padding:16px;font-size:16px;margin-top:2px;border-radius:14px}
.qform .ok{text-align:center;font-size:15px;margin-top:4px}
@media(max-width:520px){.qform .fgrid{grid-template-columns:1fr}}

/* home hero: real dusk waterfront fill — favor pool+sky, keep white copy readable */
.hero .bg{background-position:center 42%;filter:saturate(1.06) contrast(1.03)}
.hero .scrim{background:linear-gradient(180deg,rgba(9,32,52,.28) 0%,rgba(9,32,52,.42) 48%,rgba(6,22,38,.86) 100%),radial-gradient(120% 90% at 20% 100%,rgba(6,20,34,.55),transparent 60%)}

/* hero content must never fade/drift on scroll — the shared motion script sets inline
   opacity/transform on .hero .wrap as you scroll; force it solid (inline styles lack !important). */
.hero .wrap{opacity:1!important;transform:none!important}