/* =============================================================================
   EARTH'S BREW — "The Descent"
   Ancient earth · Celtic myth · premium artesian science.
   Palette drawn from the can (deep cobalt, silver) and the geology
   (limestone bone, artesian cyan, abyssal blue).
   ========================================================================== */

:root{
  /* ---- color ---- */
  --abyss:   #060c22;   /* deepest background — the aquifer at depth */
  --abyss-2: #0a1338;   /* raised abyss */
  --cobalt:  #1b2a8a;   /* the can */
  --cobalt-d:#0d1a5c;
  --artesian:#4fc3e8;   /* luminous water cyan */
  --spring:  #9ff0e4;   /* pale mineral aqua */
  --bone:    #efe9da;   /* limestone parchment */
  --bone-2:  #f7f4ec;
  --stone:   #b9ae97;   /* limestone tan */
  --stone-d: #8a7f68;
  --silver:  #dfe3ec;
  --ink:     #101528;   /* text on light */
  --ink-soft:#3a4260;

  /* ---- type ---- */
  --f-display: 'Cinzel', 'Times New Roman', serif;
  --f-serif:   'Cormorant Garamond', Georgia, serif;
  --f-body:    'Manrope', system-ui, -apple-system, sans-serif;
  --f-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', monospace;

  /* ---- rhythm ---- */
  --page: 1240px;
  --gut:  clamp(20px, 5vw, 64px);
  --sec:  clamp(80px, 12vh, 168px);
  --r:    3px;   /* deliberate near-square radius — engraved, not soft */
}

/* ---------------------------------------------------------------- reset --- */
*,*::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; background:var(--abyss); color:var(--bone);
  font-family:var(--f-body); font-size:clamp(16px,1.05vw,18px); line-height:1.7;
  font-weight:400; letter-spacing:0.01em;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; cursor:pointer; }
h1,h2,h3,h4{ margin:0; font-weight:400; }
::selection{ background:var(--artesian); color:var(--abyss); }

/* utility */
.wrap{ max-width:var(--page); margin-inline:auto; padding-inline:var(--gut); }
.eyebrow{
  font-family:var(--f-mono); font-size:.72rem; letter-spacing:.34em; text-transform:uppercase;
  color:var(--artesian); display:inline-flex; align-items:center; gap:.7em; font-weight:500;
}
.eyebrow::before{ content:''; width:26px; height:1px; background:currentColor; opacity:.7; }
.mark-tri{ width:1em; height:1em; display:inline-block; vertical-align:-.12em; }

/* -------------------------------------------------------------- topbar ---- */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:60;
  display:flex; align-items:center; justify-content:space-between;
  padding:18px var(--gut); transition:background .4s ease, padding .4s ease, border-color .4s;
  border-bottom:1px solid transparent;
}
.nav.is-stuck{ background:rgba(6,12,34,.72); backdrop-filter:blur(14px); border-bottom-color:rgba(159,240,228,.14); padding-block:12px; }
.nav__brand{ display:flex; align-items:center; gap:.7em; font-family:var(--f-display); font-weight:600; letter-spacing:.14em; font-size:1.02rem; }
.nav__brand svg{ width:30px; height:30px; }
.nav__links{ display:flex; align-items:center; gap:clamp(14px,2vw,34px); }
.nav__links a{ font-size:.82rem; letter-spacing:.12em; text-transform:uppercase; color:var(--silver); opacity:.82; transition:opacity .25s,color .25s; position:relative; }
.nav__links a::after{ content:''; position:absolute; left:0; bottom:-6px; width:0; height:1px; background:var(--artesian); transition:width .3s; }
.nav__links a:hover{ opacity:1; color:#fff; } .nav__links a:hover::after{ width:100%; }
.nav__cta{
  border:1px solid var(--artesian); color:var(--spring); background:transparent;
  padding:.62em 1.25em; border-radius:var(--r); font-size:.76rem; letter-spacing:.16em; text-transform:uppercase;
  transition:background .25s,color .25s,box-shadow .25s;
}
.nav__cta:hover{ background:var(--artesian); color:var(--abyss); box-shadow:0 0 30px rgba(79,195,232,.4); }
.nav__burger{ display:none; background:none; border:0; width:34px; height:34px; }
.nav__burger span{ display:block; height:2px; background:var(--silver); margin:6px 0; transition:.3s; }

/* --------------------------------------------------------------- hero ----- */
.hero{ position:relative; min-height:100svh; display:grid; place-items:center; isolation:isolate; }
.hero__globe{ position:absolute; inset:0; z-index:-1; }
.hero__globe canvas{ display:block; width:100%; height:100%; transition:opacity .3s linear; }
.globe--unsupported{ background:radial-gradient(120% 90% at 50% 40%, #16256e 0%, #0a1338 45%, #060c22 100%); }
.hero__veil{ position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:radial-gradient(75% 60% at 50% 42%, rgba(6,12,34,.5) 0%, rgba(6,12,34,.14) 60%, transparent 85%),
             radial-gradient(120% 82% at 50% 86%, rgba(6,12,34,.82) 0%, rgba(6,12,34,.22) 48%, transparent 74%),
             linear-gradient(180deg, rgba(6,12,34,.5) 0%, transparent 20%, transparent 58%, var(--abyss) 100%); }

.hero__inner{ text-align:center; padding:0 var(--gut); max-width:960px; }
.hero__source{ margin-bottom:26px; opacity:0; animation:rise .9s .3s ease forwards; }
.hero__title{
  font-family:var(--f-display); font-weight:600; letter-spacing:.03em; line-height:.92;
  font-size:clamp(3rem, 10vw, 8rem); text-transform:uppercase;
  filter:drop-shadow(0 6px 46px rgba(6,12,34,.85));
}
.hero__title span{ display:block;
  background:linear-gradient(180deg, #ffffff 0%, #eaf6ff 46%, var(--spring) 120%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero__title span:last-child{ background:linear-gradient(180deg, var(--spring) 0%, var(--artesian) 100%); -webkit-background-clip:text; background-clip:text; }
.hero__tag{
  font-family:var(--f-serif); font-style:italic; font-weight:400; letter-spacing:.01em;
  font-size:clamp(1.15rem, 2.6vw, 1.9rem); color:var(--bone); opacity:.9; margin:.7em auto 0; max-width:30ch;
}
.hero__meta{ display:flex; gap:clamp(20px,4vw,52px); justify-content:center; flex-wrap:wrap; margin-top:38px; }
.hero__meta div{ font-family:var(--f-mono); font-size:.74rem; letter-spacing:.16em; text-transform:uppercase; color:var(--silver); opacity:.72; }
.hero__meta b{ display:block; font-family:var(--f-display); font-size:1.5rem; letter-spacing:.04em; color:var(--spring); opacity:1; font-weight:600; margin-bottom:.2em; }
.hero__cta{ margin-top:44px; display:flex; gap:16px; justify-content:center; flex-wrap:wrap; }
.hero .title-lines > *{ opacity:0; animation:rise .9s ease forwards; }
.hero .title-lines > *:nth-child(1){ animation-delay:.42s; }
.hero .title-lines > *:nth-child(2){ animation-delay:.58s; }
.hero .title-lines > *:nth-child(3){ animation-delay:.74s; }
.hero .title-lines > *:nth-child(4){ animation-delay:.9s; }

.btn{ display:inline-flex; align-items:center; gap:.6em; padding:.92em 1.7em; border-radius:var(--r);
  font-size:.8rem; letter-spacing:.16em; text-transform:uppercase; font-weight:600; transition:.28s; border:1px solid transparent; }
.btn--solid{ background:linear-gradient(135deg,var(--artesian),#2f8fc9); color:var(--abyss); box-shadow:0 10px 40px -8px rgba(79,195,232,.5); }
.btn--solid:hover{ transform:translateY(-2px); box-shadow:0 16px 48px -8px rgba(79,195,232,.7); }
.btn--ghost{ border-color:rgba(223,227,236,.35); color:var(--silver); }
.btn--ghost:hover{ border-color:var(--artesian); color:#fff; }

.scrollcue{ position:absolute; bottom:20px; left:50%; transform:translateX(-50%); z-index:2;
  font-family:var(--f-mono); font-size:.6rem; letter-spacing:.3em; text-transform:uppercase; color:var(--silver); opacity:.55;
  display:flex; flex-direction:column; align-items:center; gap:8px; animation:rise 1s 1.2s ease both; }
@media (max-height: 760px){ .scrollcue{ display:none; } }
.scrollcue i{ width:1px; height:44px; background:linear-gradient(var(--artesian),transparent); display:block; animation:cue 2.2s ease-in-out infinite; }
@keyframes cue{ 0%,100%{ transform:scaleY(.4); opacity:.4; transform-origin:top; } 50%{ transform:scaleY(1); opacity:1; } }
@keyframes rise{ from{ opacity:0; transform:translateY(22px); } to{ opacity:1; transform:none; } }

/* ---------------------------------------------------- source photo band --- */
.sourceband{ position:relative; height:min(86vh,720px); display:grid; align-items:end; justify-items:center; overflow:hidden; }
.sourceband img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.sourceband::after{ content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(6,12,34,.5) 0%, transparent 26%, transparent 52%, rgba(6,12,34,.92) 100%); }
.sourceband__cap{ position:relative; z-index:1; text-align:center; padding:0 var(--gut) clamp(40px,7vh,80px); }
.sourceband__cap p{ font-family:var(--f-serif); font-style:italic; font-size:clamp(1.4rem,3vw,2.3rem); color:var(--bone); margin:.5em auto 0; max-width:26ch; }

/* -------------------------------------------------------- section base ---- */
.section{ position:relative; padding-block:var(--sec); }
.section__head{ max-width:720px; margin-bottom:clamp(40px,6vh,72px); }
.section__title{ font-family:var(--f-display); font-weight:500; letter-spacing:.02em; line-height:1.04;
  font-size:clamp(2rem,4.6vw,3.5rem); margin-top:.4em; }
.section__lead{ font-family:var(--f-serif); font-size:clamp(1.25rem,2.4vw,1.7rem); line-height:1.5; color:var(--silver); margin-top:.7em; font-weight:400; }
.section--light{ background:var(--bone); color:var(--ink); }
.section--light .section__lead{ color:var(--ink-soft); }
.section--light .eyebrow{ color:var(--cobalt); }

/* reveal on scroll */
.reveal{ opacity:0; transform:translateY(30px); transition:opacity .9s cubic-bezier(.16,1,.3,1), transform .9s cubic-bezier(.16,1,.3,1); }
.reveal.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){ .reveal{ opacity:1; transform:none; transition:none; } .hero__source,.hero .title-lines>*,.scrollcue{ animation:none; opacity:1; } }

/* ---------------------------------------------------- 0 · thesis quote ---- */
.thesis{ background:linear-gradient(180deg,var(--abyss) 0%, var(--abyss-2) 100%); text-align:center; }
.thesis__q{ font-family:var(--f-serif); font-weight:300; font-size:clamp(1.8rem,4.6vw,3.6rem); line-height:1.28; max-width:16ch; margin:0 auto; }
.thesis__q em{ font-style:italic; color:var(--artesian); }
.thesis__mark{ width:64px; height:64px; margin:0 auto 34px; opacity:.9; }
.thesis__sub{ margin-top:32px; font-family:var(--f-mono); font-size:.78rem; letter-spacing:.2em; text-transform:uppercase; color:var(--stone); }

/* --------------------------------------------------- 1 · DESCENT strata --- */
/* Filtration look #1 — illuminated geological cross-section */
.descent{ background:linear-gradient(180deg,var(--abyss-2),#07102f); overflow:hidden; }
.descent__grid{ display:grid; grid-template-columns:1fr 1.05fr; gap:clamp(32px,5vw,80px); align-items:center; }
.strata{ position:relative; aspect-ratio:4/5; border-radius:var(--r); overflow:hidden; border:1px solid rgba(159,240,228,.16);
  background:linear-gradient(180deg,#0b1748,#0a1338); box-shadow:0 40px 90px -40px #000; }
.strata svg{ width:100%; height:100%; display:block; }
.strata__drop{ }               /* animated in JS */
.descent__steps{ list-style:none; margin:0; padding:0; }
.descent__steps li{ padding:22px 0 22px 62px; position:relative; border-top:1px solid rgba(223,227,236,.12); }
.descent__steps li:last-child{ border-bottom:1px solid rgba(223,227,236,.12); }
.descent__steps .d{ position:absolute; left:0; top:22px; font-family:var(--f-mono); font-size:.72rem; letter-spacing:.12em; color:var(--artesian); }
.descent__steps h4{ font-family:var(--f-display); font-size:1.15rem; letter-spacing:.03em; margin-bottom:.35em; }
.descent__steps p{ margin:0; color:var(--silver); opacity:.8; font-size:.98rem; }
.descent__steps li.active{ }
.descent__steps li.active h4{ color:var(--spring); }

/* --------------------------------------------------- 2 · mineral instr. --- */
/* Filtration look #2 — clinical mineral / pH instrument (light) */
.mineral{ }
.mineral__grid{ display:grid; grid-template-columns:1.05fr 1fr; gap:clamp(32px,5vw,72px); align-items:center; }
.dial{ position:relative; width:min(440px,86vw); margin-inline:auto; aspect-ratio:1; }
.dial svg{ width:100%; height:100%; overflow:visible; }
.dial__center{ position:absolute; inset:0; display:grid; place-content:center; text-align:center; }
.dial__center b{ font-family:var(--f-display); font-size:3.4rem; color:var(--cobalt); line-height:1; }
.dial__center span{ font-family:var(--f-mono); font-size:.7rem; letter-spacing:.24em; text-transform:uppercase; color:var(--stone-d); }
.minerals{ display:grid; gap:14px; }
.min{ display:grid; grid-template-columns:auto 1fr auto; gap:16px; align-items:center; padding:16px 20px;
  background:var(--bone-2); border:1px solid rgba(16,21,40,.08); border-radius:var(--r); }
.min__sym{ font-family:var(--f-display); font-size:1.4rem; color:var(--cobalt); width:2.2em; height:2.2em; display:grid; place-content:center;
  border:1px solid rgba(27,42,138,.28); border-radius:50%; }
.min__name{ font-weight:600; letter-spacing:.02em; } .min__name small{ display:block; font-weight:400; color:var(--ink-soft); font-size:.82rem; letter-spacing:.04em; }
.min__bar{ grid-column:1/-1; height:4px; background:rgba(27,42,138,.12); border-radius:2px; overflow:hidden; }
.min__bar i{ display:block; height:100%; width:0; background:linear-gradient(90deg,var(--cobalt),var(--artesian)); border-radius:2px; transition:width 1.3s cubic-bezier(.16,1,.3,1); }
.min__val{ font-family:var(--f-mono); font-size:.86rem; color:var(--cobalt); }

/* ------------------------------------------------------- 3 · why grid ----- */
.why__grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:rgba(159,240,228,.14); border:1px solid rgba(159,240,228,.14); border-radius:var(--r); overflow:hidden; }
.why__cell{ background:var(--abyss-2); padding:clamp(24px,3vw,40px); min-height:280px; display:flex; flex-direction:column; justify-content:space-between; transition:background .4s; }
.why__cell:hover{ background:#0c1a52; }
.why__cell .ic{ width:46px; height:46px; color:var(--artesian); }
.why__cell h4{ font-family:var(--f-display); font-size:1.2rem; letter-spacing:.02em; margin-bottom:.5em; }
.why__cell p{ margin:0; font-size:.92rem; color:var(--silver); opacity:.78; }
.why__cell .n{ font-family:var(--f-mono); font-size:.72rem; color:var(--stone); letter-spacing:.16em; }

/* -------------------------------------------------- 4 · sustainability ---- */
/* Filtration look #3 — closed aluminium loop (light) */
.loop{ background:var(--bone); color:var(--ink); }
.loop__grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(32px,5vw,72px); align-items:center; }
.loopwheel{ width:min(460px,86vw); margin-inline:auto; aspect-ratio:1; position:relative; }
.loopwheel svg{ width:100%; height:100%; overflow:visible; }
.loop__facts{ display:grid; gap:22px; }
.loop__fact{ display:flex; gap:18px; align-items:baseline; }
.loop__fact b{ font-family:var(--f-display); font-size:2.6rem; color:var(--cobalt); line-height:1; min-width:3.6ch; display:inline-flex; align-items:baseline; }
.loop__fact b u{ text-decoration:none; font-size:1.3rem; margin-left:.06em; color:var(--artesian); }
.loop__fact span{ color:var(--ink-soft); } .loop__fact span strong{ color:var(--ink); font-weight:700; }

/* --------------------------------------------------------- 5 · product ---- */
.product{ background:linear-gradient(180deg,#07102f,var(--abyss)); }
.product__grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(30px,4vw,60px); }
.can{ position:relative; border-radius:var(--r); border:1px solid rgba(159,240,228,.16); overflow:hidden;
  background:radial-gradient(120% 100% at 50% 0%, #16256e, #0a1338); padding:44px; display:flex; flex-direction:column; justify-content:space-between; min-height:420px; }
.can--spark{ background:radial-gradient(120% 100% at 50% 0%, #123a63, #071b34); }
.can__ey{ font-family:var(--f-mono); font-size:.72rem; letter-spacing:.22em; text-transform:uppercase; color:var(--artesian); }
.can__name{ font-family:var(--f-display); font-size:2rem; letter-spacing:.03em; margin:.2em 0 .1em; }
.can__desc{ color:var(--silver); opacity:.8; max-width:34ch; }
.can__spec{ display:flex; gap:26px; margin-top:26px; font-family:var(--f-mono); font-size:.74rem; letter-spacing:.1em; color:var(--silver); text-transform:uppercase; }
.can__spec b{ display:block; color:var(--spring); font-family:var(--f-display); font-size:1.2rem; letter-spacing:.04em; }
.price{ margin-top:auto; padding-top:26px; display:flex; align-items:flex-end; justify-content:space-between; border-top:1px solid rgba(223,227,236,.12); }
.price b{ font-family:var(--f-display); font-size:1.7rem; color:#fff; }
.price small{ font-family:var(--f-mono); font-size:.72rem; color:var(--stone); letter-spacing:.08em; display:block; }
.buyrow{ grid-column:1/-1; display:flex; gap:24px; flex-wrap:wrap; align-items:center; justify-content:space-between;
  margin-top:8px; padding:26px 34px; border:1px solid rgba(159,240,228,.16); border-radius:var(--r); background:rgba(10,19,56,.5); }
.buyrow__p{ font-family:var(--f-serif); font-style:italic; font-size:1.3rem; color:var(--silver); }

/* -------------------------------------------------------- 6 · media lab --- */
.lab{ background:radial-gradient(140% 100% at 80% 0%, #10205e 0%, var(--abyss) 55%); }
.lab__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:14px; }
.labcard{ position:relative; border:1px solid rgba(159,240,228,.16); border-radius:var(--r); overflow:hidden; background:var(--abyss-2);
  min-height:320px; display:flex; flex-direction:column; justify-content:flex-end; transition:transform .4s, border-color .4s; }
.labcard:hover{ transform:translateY(-4px); border-color:var(--artesian); }
.labcard__media{ position:absolute; inset:0; z-index:0; opacity:.55; background-size:cover; background-position:center; transition:opacity .4s, transform .6s; }
.labcard:hover .labcard__media{ opacity:.8; transform:scale(1.04); }
.labcard::after{ content:''; position:absolute; inset:0; background:linear-gradient(180deg,transparent 30%, rgba(6,12,34,.92) 100%); z-index:1; }
.labcard__body{ position:relative; z-index:2; padding:26px; }
.labcard__kind{ font-family:var(--f-mono); font-size:.68rem; letter-spacing:.2em; text-transform:uppercase; color:var(--artesian); }
.labcard__t{ font-family:var(--f-display); font-size:1.28rem; letter-spacing:.02em; margin:.35em 0 .5em; }
.labcard__p{ font-size:.9rem; color:var(--silver); opacity:.82; margin:0 0 16px; }
.labcard__foot{ display:flex; align-items:center; gap:12px; font-size:.76rem; letter-spacing:.06em; }
.pill{ font-family:var(--f-mono); font-size:.64rem; letter-spacing:.14em; text-transform:uppercase; padding:.35em .8em; border-radius:100px; border:1px solid currentColor; }
.pill--free{ color:var(--spring); } .pill--gate{ color:var(--stone); }
.play{ width:60px; height:60px; border-radius:50%; border:1px solid var(--spring); color:var(--spring); display:grid; place-content:center; position:absolute; z-index:3; top:22px; right:22px; background:rgba(6,12,34,.4); transition:.3s; }
.labcard:hover .play{ background:var(--spring); color:var(--abyss); }
.lab__cta{ margin-top:40px; text-align:center; padding:44px; border:1px dashed rgba(159,240,228,.28); border-radius:var(--r); }
.lab__cta h3{ font-family:var(--f-serif); font-style:italic; font-size:clamp(1.5rem,3vw,2.2rem); margin-bottom:.4em; }

/* --------------------------------------------------------- 7 · footer ----- */
.foot{ background:var(--abyss); border-top:1px solid rgba(159,240,228,.12); padding-block:clamp(56px,8vh,96px) 40px; }
.foot__grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:40px; }
.foot__brand{ display:flex; align-items:center; gap:.7em; font-family:var(--f-display); font-size:1.3rem; letter-spacing:.12em; margin-bottom:18px; }
.foot__brand svg{ width:38px; height:38px; }
.foot p{ color:var(--silver); opacity:.7; font-size:.92rem; max-width:34ch; }
.foot h5{ font-family:var(--f-mono); font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; color:var(--artesian); margin:0 0 18px; }
.foot ul{ list-style:none; margin:0; padding:0; display:grid; gap:12px; }
.foot a{ color:var(--silver); opacity:.8; font-size:.92rem; transition:.25s; } .foot a:hover{ opacity:1; color:var(--spring); }
.foot__addr{ font-style:normal; color:var(--silver); opacity:.8; font-size:.92rem; line-height:1.9; }
.foot__base{ display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; margin-top:56px; padding-top:24px;
  border-top:1px solid rgba(223,227,236,.1); font-family:var(--f-mono); font-size:.7rem; letter-spacing:.1em; color:var(--stone); text-transform:uppercase; }

/* --------------------------------------------------------- responsive ----- */
@media (max-width: 980px){
  .descent__grid,.mineral__grid,.loop__grid,.product__grid,.lab__grid,.foot__grid{ grid-template-columns:1fr; }
  .why__grid{ grid-template-columns:repeat(2,1fr); }
  .lab__grid{ grid-template-columns:1fr 1fr; }
  .strata{ aspect-ratio:16/12; }
}
@media (max-width: 720px){
  .nav__links{ position:fixed; inset:0 0 0 auto; width:min(80vw,320px); flex-direction:column; align-items:flex-start;
    justify-content:center; gap:28px; background:rgba(6,12,34,.97); backdrop-filter:blur(16px); padding:40px; transform:translateX(100%);
    transition:transform .4s cubic-bezier(.16,1,.3,1); border-left:1px solid rgba(159,240,228,.16); }
  .nav__links.open{ transform:none; }
  .nav__links a{ font-size:1rem; }
  .nav__burger{ display:block; z-index:70; }
  .why__grid,.lab__grid{ grid-template-columns:1fr; }
  .hero__meta{ gap:22px; }
  .foot__base{ flex-direction:column; }
}