/* =============================================================
   THE GIVING WATER — Base: reset, elements, typography, layout
   ============================================================= */

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

body{
  margin:0;
  font-family:var(--font-body);
  font-size:var(--fs-body);
  line-height:var(--lh-body);
  color:var(--text);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

h1,h2,h3,h4,h5{ font-family:var(--font-head); font-weight:600; line-height:var(--lh-head);
  color:var(--river-900); margin:0 0 .6em; letter-spacing:-.01em; }
h1{ font-size:var(--fs-h1); }
h2{ font-size:var(--fs-h2); }
h3{ font-size:var(--fs-h3); }
h4{ font-size:var(--fs-h4); font-weight:700; }
p{ margin:0 0 1.1em; }
p:last-child{ margin-bottom:0; }

a{ color:var(--link); text-decoration:none; transition:color var(--t-fast) var(--ease-out); }
a:hover{ color:var(--link-hover); }

img,svg,video{ max-width:100%; height:auto; display:block; }
img{ border-style:none; }

/* Inline icons get a sensible default size (overridden where needed) */
.ico{ width:1.15em; height:1.15em; display:inline-block; flex:0 0 auto; vertical-align:-.18em; }

strong,b{ font-weight:700; }
ul,ol{ margin:0 0 1.1em; padding-left:1.3em; }
li{ margin:.35em 0; }
blockquote{ margin:0; }
figure{ margin:0; }
small{ font-size:var(--fs-small); }
hr{ border:0; border-top:1px solid var(--border); margin:var(--sp-6) 0; }

button{ font-family:inherit; font-size:inherit; cursor:pointer; }
input,textarea,select,button{ font-family:inherit; }

::selection{ background:var(--crystal-500); color:#04283f; }

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

/* Skip link */
.skip-link{
  position:absolute; left:-9999px; top:0; z-index:var(--z-toast);
  background:var(--river-900); color:#fff; padding:.7rem 1.1rem; border-radius:0 0 8px 0;
  font-weight:600;
}
.skip-link:focus{ left:0; }

/* ---------- Layout primitives ---------- */
.container{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter); }
.container--wide{ max-width:var(--maxw-wide); }
.container--narrow{ max-width:860px; }
.measure{ max-width:var(--maxw-text); }

.section{ position:relative; padding-block:var(--section-y); }
.section--tight{ padding-block:clamp(2.5rem,1.5rem+4vw,5rem); }
.section--deep{ background:var(--grad-deep); color:var(--text-onDark); }
.section--deep h1,.section--deep h2,.section--deep h3,.section--deep h4{ color:#fff; }
.section--sky{ background:var(--grad-sky); }
.section--mist{ background:var(--mist); }

/* Grid helpers */
.grid{ display:grid; gap:var(--sp-6); }
.grid-2{ grid-template-columns:repeat(2,1fr); }
.grid-3{ grid-template-columns:repeat(3,1fr); }
.grid-4{ grid-template-columns:repeat(4,1fr); }
.grid-auto{ grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); }
@media (max-width:900px){
  .grid-2,.grid-3,.grid-4{ grid-template-columns:1fr; }
  .grid-3.keep-2,.grid-4.keep-2{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:560px){ .grid-3.keep-2,.grid-4.keep-2{ grid-template-columns:1fr; } }

.flow > * + *{ margin-top:var(--sp-4); }
.stack{ display:flex; flex-direction:column; gap:var(--sp-4); }
.cluster{ display:flex; flex-wrap:wrap; gap:var(--sp-3); align-items:center; }
.center{ text-align:center; }
.center-x{ margin-inline:auto; }

/* Split (media + text) */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,4vw,5rem); align-items:center; }
.split--wide-media{ grid-template-columns:1.15fr .85fr; }
@media (max-width:900px){ .split,.split--wide-media{ grid-template-columns:1fr; } }

/* ---------- Typographic accents ---------- */
.eyebrow{
  display:inline-flex; align-items:center; gap:.55rem;
  font-family:var(--font-body); font-weight:700; font-size:var(--fs-eyebrow);
  letter-spacing:.16em; text-transform:uppercase; color:var(--brand-600);
  margin:0 0 1rem;
}
.eyebrow::before{ content:""; width:26px; height:2px; background:var(--crystal-500); border-radius:2px; }
.eyebrow--onDark{ color:var(--crystal-400); }
.eyebrow--center{ justify-content:center; }

.display{ font-size:var(--fs-hero); line-height:var(--lh-tight); font-weight:600; letter-spacing:-.02em; }
.lead{ font-size:var(--fs-lead); color:var(--text-muted); line-height:var(--lh-snug); }
.section--deep .lead{ color:var(--text-onDark-mut); }
.serif-accent{ font-family:var(--font-head); font-style:italic; font-weight:400; }
.text-red{ color:var(--red-500); }
.text-brand{ color:var(--brand-600); }
.text-muted{ color:var(--text-muted); }
.balance{ text-wrap:balance; }

/* Gradient text for emphasis words */
.grad-text{
  background:linear-gradient(120deg,var(--crystal-500),var(--brand-500) 60%,var(--river-700));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* Underline flourish (hand-drawn water stroke) */
.ul-wave{ position:relative; white-space:nowrap; }
.ul-wave::after{
  content:""; position:absolute; left:0; right:0; bottom:-.18em; height:.34em;
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='12' viewBox='0 0 120 12'><path d='M2 6 q 15 -6 30 0 t 30 0 t 30 0 t 30 0' fill='none' stroke='%2337b6e9' stroke-width='3' stroke-linecap='round'/></svg>") repeat-x;
  background-size:auto 100%; opacity:.9;
}

/* ---------- Utilities ---------- */
.mt-0{margin-top:0}.mb-0{margin-bottom:0}
.mt-4{margin-top:var(--sp-6)}.mt-6{margin-top:var(--sp-7)}
.mb-4{margin-bottom:var(--sp-6)}.mb-6{margin-bottom:var(--sp-7)}
.pt-0{padding-top:0}.pb-0{padding-bottom:0}
.w-full{width:100%}
.hidden{display:none !important}
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
.nowrap{ white-space:nowrap; }
.dot{ width:9px; height:9px; border-radius:50%; display:inline-block; flex:0 0 auto; }
.relative{ position:relative; }
.rounded{ border-radius:var(--radius); }
.rounded-lg{ border-radius:var(--radius-lg); }
.shadow{ box-shadow:var(--shadow); }
.elevate{ box-shadow:var(--shadow-md); }

@media (max-width:640px){ .hide-sm{ display:none !important; } }
@media (min-width:641px){ .only-sm{ display:none !important; } }
@media (max-width:1024px){ .hide-md{ display:none !important; } }

/* Overlap the fixed header on first section */
.page-top{ padding-top:var(--header-h); }