@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;1,300;1,400&family=DM+Sans:wght@300;400;500;700&display=swap');

:root {
  --bg:       #f5f1ea;
  --bg2:      #ede7da;
  --bg3:      #e2d9c8;
  --surface:  #fdfaf5;
  --border:   rgba(50,38,20,0.11);
  --border2:  rgba(50,38,20,0.22);
  --ink:      #141008;
  --ink2:     #4a4238;
  --ink3:     #8a8078;
  --water:    #0e6688;
  --water-light:#1a8ab0;
  --water-bg: rgba(14,102,136,0.07);
  --water-mid:rgba(14,102,136,0.14);
  --gold:     #8c6420;
  --gold-bg:  rgba(140,100,32,0.08);
  --serif:    'Cormorant Garamond', Georgia, serif;
  --sans:     'DM Sans', sans-serif;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{background:var(--bg);color:var(--ink);font-family:var(--sans);font-weight:300;font-size:16px;line-height:1.7;overflow-x:hidden;}

/* ── NAV (sticky, frosted on scroll) ── */
nav{position:fixed;top:0;left:0;right:0;z-index:100;display:flex;align-items:center;justify-content:space-between;padding:20px 52px;background:rgba(245,241,234,0);border-bottom:1px solid transparent;transition:background .35s,border-color .35s,backdrop-filter .35s;}
nav.scrolled{background:rgba(245,241,234,0.96);border-color:var(--border);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);}
.nav-logo{display:inline-flex;align-items:center;gap:10px;text-decoration:none;flex-shrink:0;}
.logo-icon{display:inline-flex;flex-shrink:0;filter:drop-shadow(0 2px 6px rgba(42,171,238,0.22));}
.logo-wordmark{font-family:var(--sans);font-size:21px;letter-spacing:-.01em;line-height:1;}
.logo-hydro{font-weight:700;color:#141008 !important;}
.logo-ply{font-weight:700;color:#2AABEE !important;}
.nav-links{display:flex;gap:26px;list-style:none;}
.nav-links a{font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--ink2);text-decoration:none;transition:color .2s;}
.nav-links a:hover,.nav-links a.active{color:var(--ink);}
.nav-cta{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--water);border:1px solid var(--water);padding:9px 22px;text-decoration:none;transition:background .2s,color .2s;white-space:nowrap;}
.nav-cta:hover{background:var(--water);color:#fff;}

/* ── FOOTER ── */
footer{background:var(--ink);color:rgba(255,255,255,.5);padding:64px 52px 40px;display:grid;grid-template-columns:1.2fr 2fr 1fr;gap:60px;align-items:start;}
.footer-tagline{font-size:13px;margin-top:8px;font-family:var(--serif);font-style:italic;color:rgba(255,255,255,.35);}
.footer-links-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px 20px;}
.footer-links-grid a{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.4);text-decoration:none;transition:color .2s;line-height:2.4;}
.footer-links-grid a:hover{color:#fff;}
.footer-right{text-align:right;}
.footer-copy{font-size:11px;color:rgba(255,255,255,.25);margin-top:6px;}

/* ── LAYOUT ── */
section{padding:100px 52px;}
.divider{height:1px;background:var(--border);margin:0 52px;}
.eyebrow{font-size:10px;letter-spacing:.25em;text-transform:uppercase;color:var(--water);margin-bottom:16px;display:block;}
h1{font-family:var(--serif);font-weight:300;font-size:clamp(48px,7vw,96px);line-height:1.0;letter-spacing:-.01em;}
h2{font-family:var(--serif);font-weight:300;font-size:clamp(32px,4vw,58px);line-height:1.08;letter-spacing:-.01em;}
h3{font-family:var(--serif);font-weight:300;font-size:clamp(20px,2.5vw,30px);line-height:1.2;}
h1 em,h2 em,h3 em{font-style:italic;color:var(--water);}
.gold em{color:var(--gold);}
p.lead{font-size:16px;color:var(--ink2);line-height:1.85;max-width:540px;margin-top:20px;}

/* ── HERO ── */
.hero{min-height:100vh;display:flex;flex-direction:column;justify-content:flex-end;padding:0 52px 140px;position:relative;overflow:hidden;background:var(--bg);}
.hero-accent{position:absolute;top:0;right:0;width:50%;height:100%;background:linear-gradient(135deg,transparent 40%,var(--bg2) 100%);pointer-events:none;}
.hero-grid-decor{position:absolute;top:0;right:0;width:60%;height:100%;background-image:linear-gradient(var(--border) 1px,transparent 1px),linear-gradient(90deg,var(--border) 1px,transparent 1px);background-size:80px 80px;mask-image:radial-gradient(ellipse 80% 80% at 80% 20%,black 0%,transparent 70%);opacity:.6;}
.hero-eyebrow{font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--water);margin-bottom:24px;opacity:0;animation:fadeUp .7s .3s forwards;}
.hero h1{max-width:800px;opacity:0;animation:fadeUp .9s .5s forwards;}
.hero .lead{opacity:0;animation:fadeUp .8s .8s forwards;}

/* ── 2D CSS BOTTLE ── */
.bottle-wrap{position:absolute;right:5%;top:calc(50% + 20px);transform:translateY(-50%);opacity:0;animation:fadeIn 1s .6s forwards;}
@keyframes bottleSway{0%,100%{transform:rotateY(-14deg) rotateX(5deg)}50%{transform:rotateY(-8deg) rotateX(2deg)}}
@keyframes labelShimmer{0%,100%{opacity:.9}50%{opacity:1}}

/* ── CARDS ── */
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--border);}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--border);}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--border);}
.card{background:var(--surface);padding:44px 36px;transition:background .2s;}
.card:hover{background:var(--bg);}
.card-num{font-family:var(--serif);font-size:48px;font-weight:300;color:var(--border2);line-height:1;margin-bottom:16px;}
.card h3{font-size:20px;margin-bottom:10px;}
.card p{font-size:13px;color:var(--ink2);line-height:1.8;}
.card-link{display:inline-block;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--water);margin-top:16px;text-decoration:none;border-bottom:1px solid var(--water);padding-bottom:1px;}
.card-link:hover{opacity:.7;}

/* ── STATS ── */
.stat-box{background:var(--surface);padding:36px 28px;text-align:center;}
.stat-num{font-family:var(--serif);font-size:52px;font-weight:300;color:var(--water);line-height:1;}
.stat-num sup{font-size:20px;}
.stat-lbl{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink2);margin-top:8px;}
.stat-note{font-size:11px;color:var(--ink3);font-style:italic;font-family:var(--serif);margin-top:4px;}

/* ── STEPS ── */
.step{display:flex;gap:18px;margin-bottom:22px;}
.step-dot{width:6px;height:6px;border-radius:50%;background:var(--water);margin-top:9px;flex-shrink:0;}
.step strong{display:block;font-size:14px;font-weight:500;color:var(--ink);margin-bottom:2px;}
.step span{font-size:13px;color:var(--ink2);line-height:1.75;}

/* ── QUOTE ── */
.quote{border-left:2px solid var(--water);padding:20px 28px;background:var(--water-bg);margin:32px 0;}
.quote p{font-family:var(--serif);font-size:20px;font-style:italic;color:var(--ink);line-height:1.6;}

/* ── FAQ ── */
details{border-bottom:1px solid var(--border);}
details:first-of-type{border-top:1px solid var(--border);}
summary{list-style:none;display:flex;justify-content:space-between;align-items:center;padding:22px 0;font-size:15px;font-weight:400;cursor:pointer;color:var(--ink);user-select:none;}
summary::-webkit-details-marker{display:none;}
summary::after{content:'+';font-size:24px;font-weight:300;color:var(--water);line-height:1;flex-shrink:0;margin-left:20px;transition:transform .25s;}
details[open] summary::after{transform:rotate(45deg);}
.faq-body{padding:0 0 22px;font-size:14px;color:var(--ink2);line-height:1.85;max-width:680px;}

/* ── FORM ── */
.form-group{margin-bottom:22px;}
.form-label{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink2);display:block;margin-bottom:8px;}
.form-input,.form-textarea{width:100%;background:var(--surface);border:1px solid var(--border2);padding:13px 16px;font-family:var(--sans);font-size:14px;font-weight:300;color:var(--ink);outline:none;transition:border-color .2s;border-radius:0;}
.form-input:focus,.form-textarea:focus{border-color:var(--water);}
.form-textarea{height:110px;resize:vertical;}
.checkbox-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:8px;}
.checkbox-item{display:flex;align-items:center;gap:12px;cursor:pointer;padding:12px 14px;border:1px solid var(--border);background:var(--surface);transition:border-color .2s,background .2s;}
.checkbox-item:hover{border-color:var(--water);background:var(--water-bg);}
.checkbox-item input[type=checkbox]{width:16px;height:16px;accent-color:var(--water);flex-shrink:0;cursor:pointer;}
.checkbox-item label{font-size:13px;color:var(--ink);cursor:pointer;line-height:1.4;}
.form-submit{background:var(--ink);color:#fff;border:none;padding:16px 40px;font-family:var(--sans);font-size:12px;letter-spacing:.12em;text-transform:uppercase;cursor:pointer;transition:background .2s;}
.form-submit:hover{background:var(--water);}

/* ── BUTTONS ── */
.btn-primary{display:inline-block;background:var(--ink);color:#fff;font-size:12px;letter-spacing:.12em;text-transform:uppercase;padding:15px 38px;text-decoration:none;transition:background .2s;border:none;cursor:pointer;}
.btn-primary:hover{background:var(--water);}
.btn-secondary{display:inline-block;background:transparent;color:var(--ink);font-size:12px;letter-spacing:.12em;text-transform:uppercase;padding:14px 38px;text-decoration:none;border:1px solid var(--border2);transition:border-color .2s;}
.btn-secondary:hover{border-color:var(--ink);}
.btn-row{display:flex;gap:14px;flex-wrap:wrap;margin-top:36px;}

/* ── INFO PANEL ── */
.info-panel{background:var(--surface);border:1px solid var(--border);padding:32px;}
.info-row{display:flex;justify-content:space-between;padding:12px 0;border-bottom:1px solid var(--border);font-size:13px;}
.info-row:last-child{border-bottom:none;}
.info-row .key{color:var(--ink2);}
.info-row .val{color:var(--ink);font-weight:400;}
.info-row .val.accent{color:var(--water);}
.info-row .val.gold{color:var(--gold);}

/* ── RANGE SLIDER ── */
input[type=range]{-webkit-appearance:none;width:100%;height:2px;background:var(--border2);border-radius:1px;outline:none;cursor:pointer;}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;border-radius:50%;background:var(--water);border:2px solid #fff;box-shadow:0 1px 4px rgba(0,0,0,.15);}
input[type=range]::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:var(--water);border:2px solid #fff;}

/* ── MAP ── */
.dk-region{fill:var(--water-bg);stroke:var(--water);stroke-width:1.5;stroke-linejoin:round;transition:fill .25s;}
.dk-region:hover{fill:var(--water-mid);}
.dk-city-dot{fill:var(--water);}
.dk-city-label{font-family:'DM Sans',sans-serif;font-size:10px;fill:var(--ink2);font-weight:400;}

/* ── PROCESS STEPS ── */
.ps-circle{width:40px;height:40px;border-radius:50%;border:2px solid var(--water);background:var(--surface);display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-size:16px;font-weight:300;color:var(--water);flex-shrink:0;position:relative;z-index:1;}
.ps-line{position:absolute;left:19px;top:42px;bottom:0;width:2px;background:var(--border2);}
.ps-body{padding:0 0 44px 24px;}
.ps-body h4{font-family:var(--serif);font-size:22px;font-weight:300;color:var(--ink);margin-bottom:8px;}
.ps-body p{font-size:13px;color:var(--ink2);line-height:1.8;}
.ps-tag{display:inline-block;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--water);border:1px solid rgba(14,102,136,.25);padding:3px 10px;margin-top:10px;}

/* ── PORTAL ── */
.portal-lock{min-height:100vh;display:flex;align-items:center;justify-content:center;background:var(--bg);}
.portal-error{font-size:13px;color:#c0392b;margin-top:12px;display:none;}

/* ── REVEAL ── */
.reveal{opacity:0;transform:translateY(20px);transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1);}
.reveal.visible{opacity:1;transform:none;}
.d1{transition-delay:.08s}.d2{transition-delay:.16s}.d3{transition-delay:.24s}.d4{transition-delay:.32s}

/* ── MISC ── */
.bg-warm{background:var(--bg2);}
.disclaimer{font-size:12px;color:var(--ink3);font-style:italic;font-family:var(--serif);margin-top:14px;line-height:1.6;}
.tag{display:inline-block;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--water);border:1px solid rgba(14,102,136,.3);padding:4px 10px;margin:3px;}
.hidden-mobile{display:block;}

@keyframes fadeUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}

@media(max-width:960px){
  nav{padding:18px 24px;}.nav-links{display:none;}
  section{padding:72px 24px;}.hero{padding:0 24px 60px;}.divider{margin:0 24px;}
  .grid-3,.grid-2,.grid-4{grid-template-columns:1fr;}
  footer{grid-template-columns:1fr;gap:32px;}.footer-right{text-align:left;}
  .footer-links-grid{grid-template-columns:repeat(2,1fr);}
  .checkbox-grid{grid-template-columns:1fr;}
  .hidden-mobile{display:none;}
}

.hero + .divider + section, .hero + section { position:relative; z-index:1; background:var(--bg); box-shadow:0 -20px 60px rgba(0,0,0,0.06); }
.hero + .divider { position:relative; z-index:1; background:var(--bg); }