/* Clean Water Climb — demo site
   Palette: night-water ink, well-water blue, Malawi earth, mist. */
:root{
  --ink:#14262F;
  --ink-soft:#3F545F;
  --ground:#FBFDFD;
  --sky:#EAF4F7;
  --water:#0B6E8F;
  --water-deep:#084F67;
  --water-bright:#1590B8;
  --earth:#C0762F;
  --earth-deep:#A85B22;
  --moss:#2E7D5B;
  --mist:#D7E5EB;
  --card:#FFFFFF;
  --serif:Georgia,"Times New Roman",serif;
  --sans:"Segoe UI","Helvetica Neue",Arial,sans-serif;
}
*{box-sizing:border-box;}
html{background:var(--ground);scroll-behavior:smooth;}
body{margin:0;color:var(--ink);font-family:var(--sans);font-size:16.5px;line-height:1.65;}
img{max-width:100%;}
a{color:var(--water);}

/* ---------- header ---------- */
.topbar{background:var(--water-deep);color:#DFF0F6;font-size:13.5px;text-align:center;padding:7px 16px;}
.topbar a{color:#fff;font-weight:600;}
header.site{position:sticky;top:0;z-index:50;background:rgba(251,253,253,.94);backdrop-filter:blur(6px);border-bottom:1px solid var(--mist);}
.nav{max-width:1080px;margin:0 auto;display:flex;align-items:center;gap:26px;padding:14px 24px;flex-wrap:wrap;}
.brand{font-family:var(--serif);font-weight:700;font-size:20px;color:var(--ink);text-decoration:none;letter-spacing:-.01em;display:flex;align-items:center;gap:10px;}
.brand svg{flex:none;}
.nav .links{display:flex;gap:20px;flex-wrap:wrap;margin-left:auto;font-size:14.5px;}
.nav .links a{color:var(--ink-soft);text-decoration:none;font-weight:600;}
.nav .links a:hover,.nav .links a[aria-current]{color:var(--water-deep);}
.btn{display:inline-block;background:var(--earth);color:#fff !important;text-decoration:none;font-weight:700;font-family:var(--sans);
     padding:10px 20px;border-radius:3px;border:none;font-size:15px;cursor:pointer;}
.btn:hover{background:var(--earth-deep);}
.btn.blue{background:var(--water);}
.btn.blue:hover{background:var(--water-deep);}
.btn.ghost{background:transparent;color:var(--water-deep) !important;border:2px solid var(--water);padding:8px 18px;}

/* ---------- hero ---------- */
.hero{background:linear-gradient(180deg,var(--sky) 0%,#F6FBFC 70%,var(--ground) 100%);overflow:hidden;}
.hero-inner{max-width:1080px;margin:0 auto;padding:72px 24px 0;text-align:left;}
.kicker{font-size:12.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--water);}
h1{font-family:var(--serif);font-size:clamp(34px,5.6vw,56px);line-height:1.08;letter-spacing:-.015em;margin:14px 0 18px;max-width:15ch;text-wrap:balance;}
h1 em{font-style:normal;color:var(--water-deep);}
.lede{font-size:19px;color:var(--ink-soft);max-width:52ch;margin:0 0 26px;}
.hero-ctas{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:8px;}
.ridgeline{display:block;width:100%;height:120px;margin-top:34px;}

/* ---------- shared sections ---------- */
main{max-width:1080px;margin:0 auto;padding:0 24px;}
section{margin:64px 0;}
h2{font-family:var(--serif);font-size:clamp(26px,3.4vw,34px);letter-spacing:-.01em;line-height:1.15;margin:0 0 10px;text-wrap:balance;}
h3{font-size:18px;margin:22px 0 8px;}
.sub{color:var(--ink-soft);max-width:64ch;margin:0 0 26px;}
p{margin:0 0 14px;max-width:70ch;}
ul,ol{max-width:70ch;}
li{margin-bottom:6px;}
blockquote{font-family:var(--serif);font-size:20px;color:var(--water-deep);border-left:4px solid var(--water);margin:26px 0;padding:6px 0 6px 22px;max-width:60ch;}
blockquote cite{display:block;font-family:var(--sans);font-size:13.5px;color:var(--ink-soft);font-style:normal;margin-top:8px;}

.grid3{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:18px;}
.card{background:var(--card);border:1px solid var(--mist);padding:22px 24px;}
.card h3{margin-top:0;}
.card .price{font-family:var(--serif);font-size:24px;color:var(--water-deep);margin:4px 0 2px;}
.card .dates{font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--earth);}
.card p{font-size:15px;}

.statband{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:1px;background:var(--mist);border:1px solid var(--mist);}
.stat{background:var(--card);padding:18px 20px;}
.stat b{display:block;font-family:var(--serif);font-size:30px;color:var(--water-deep);font-variant-numeric:tabular-nums;}
.stat span{font-size:12px;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-soft);}

.band{background:var(--water-deep);color:#E8F4F8;padding:56px 24px;margin:72px -24px;}
.band .inner{max-width:1080px;margin:0 auto;}
.band h2{color:#fff;}
.band p{color:#C9E2EC;}
.band a:not(.btn){color:#fff;}

/* ---------- the well widget ---------- */
.well-wrap{display:flex;gap:40px;align-items:center;flex-wrap:wrap;}
.well-figure{flex:0 0 auto;}
.well-copy{flex:1 1 320px;min-width:280px;}
.well-copy .raised{font-family:var(--serif);font-size:clamp(34px,4.5vw,46px);color:var(--water-deep);font-variant-numeric:tabular-nums;line-height:1;}
.well-copy .of-goal{font-size:15px;color:var(--ink-soft);margin:6px 0 16px;}
.meter{height:10px;background:var(--sky);border:1px solid var(--mist);border-radius:6px;overflow:hidden;max-width:420px;}
.meter i{display:block;height:100%;background:linear-gradient(90deg,var(--water),var(--water-bright));width:0;border-radius:6px;transition:width 1.6s cubic-bezier(.25,.7,.3,1);}
.matchnote{font-size:14px;background:#FBF3E9;border:1px solid #EBD9C2;border-left:4px solid var(--earth);padding:10px 14px;margin-top:16px;max-width:420px;}
.wellmeta{font-size:12.5px;color:var(--ink-soft);margin-top:14px;}
.equiv{display:flex;gap:26px;margin-top:18px;flex-wrap:wrap;}
.equiv div b{display:block;font-family:var(--serif);font-size:24px;color:var(--moss);font-variant-numeric:tabular-nums;}
.equiv div span{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft);}

/* ---------- itinerary table ---------- */
.tablewrap{overflow-x:auto;margin:12px 0 20px;}
table{border-collapse:collapse;width:100%;font-size:14px;background:var(--card);}
th{background:var(--water-deep);color:#fff;text-align:left;padding:9px 12px;}
td{border:1px solid var(--mist);padding:8px 12px;vertical-align:top;}
tr td:first-child{white-space:nowrap;font-weight:600;}

/* ---------- forms (demo) ---------- */
form.demo{background:var(--card);border:1px solid var(--mist);padding:26px 28px;max-width:560px;}
form.demo label{display:block;font-size:13.5px;font-weight:700;margin:14px 0 4px;}
form.demo input,form.demo select,form.demo textarea{width:100%;padding:10px 12px;border:1px solid var(--mist);border-radius:3px;font:inherit;background:var(--ground);}
form.demo .note{font-size:12.5px;color:var(--ink-soft);margin-top:12px;}

/* ---------- video grid ---------- */
.videos{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:18px;}
.videos .vid{background:var(--card);border:1px solid var(--mist);}
.videos iframe{width:100%;aspect-ratio:16/9;border:0;display:block;}
.videos .vid p{font-size:14px;padding:10px 14px;margin:0;}

/* ---------- HQ mock ---------- */
.hq-note{background:#FBF3E9;border:1px solid #EBD9C2;border-left:4px solid var(--earth);padding:14px 18px;font-size:14.5px;margin-bottom:28px;}
.sugg{background:var(--card);border:1px solid var(--mist);border-left:4px solid var(--water);padding:16px 20px;margin-bottom:12px;}
.sugg .tag{font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--water);display:block;margin-bottom:4px;}
.sugg p{font-size:15px;margin-bottom:10px;}
.sugg .actions{display:flex;gap:10px;flex-wrap:wrap;}
.sugg .actions .btn{font-size:13px;padding:7px 14px;}

/* ---------- footer ---------- */
footer.site{background:var(--ink);color:#B9CCD5;margin-top:88px;padding:44px 24px 36px;font-size:14px;}
footer.site .inner{max-width:1080px;margin:0 auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:28px;}
footer.site h4{color:#fff;font-size:13px;letter-spacing:.1em;text-transform:uppercase;margin:0 0 10px;}
footer.site a{color:#DCEBF2;text-decoration:none;}
footer.site a:hover{text-decoration:underline;}
footer.site p{font-size:13.5px;}
.demo-banner{position:fixed;bottom:0;left:0;right:0;background:var(--earth);color:#fff;font-size:13px;font-weight:600;text-align:center;padding:6px 16px;z-index:99;}

@media (prefers-reduced-motion: reduce){
  .meter i{transition:none;}
  .wave-anim{animation:none !important;}
  html{scroll-behavior:auto;}
}
@keyframes waveSlide{from{transform:translateX(0);}to{transform:translateX(-70px);}}
.wave-anim{animation:waveSlide 4s linear infinite;}