/* ============================================================================
   SUPERIOR — Natural Mineral Water · landing page
   Production stylesheet. Faithful to the Claude Design system
   ("Claude Design/Superior Mineral Water Design System/").

   Two-color brand: ink (#0A0A0A) + paper (#FFFFFF). Single green accent.
   Display: Helvetica Inserat. Sub-display: Druk Wide. Body: Inter.

   ⚠ FONT LICENSING: the Druk Wide weights shipped here are TRIAL files and
   must be licensed (Commercial Type) before public launch. Helvetica Inserat
   and Inter are fine. See README.md.
   ============================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

@font-face {
  font-family: 'Helvetica Inserat';
  src: url('fonts/Helvetica_Inserat_Roman.otf') format('opentype');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face { /* ⚠ trial */
  font-family: 'Druk Wide';
  src: url('fonts/DrukWideMediumTrial.otf') format('opentype');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face { /* ⚠ trial */
  font-family: 'Druk Wide';
  src: url('fonts/DrukWideBoldTrial.otf') format('opentype');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face { /* ⚠ trial */
  font-family: 'Druk Wide';
  src: url('fonts/DrukWideHeavyTrial.otf') format('opentype');
  font-weight: 800; font-style: normal; font-display: swap;
}
@font-face { /* ⚠ trial */
  font-family: 'Druk Wide';
  src: url('fonts/DrukWideSuperTrial.otf') format('opentype');
  font-weight: 900; font-style: normal; font-display: swap;
}

:root {
  --ink: #0A0A0A;
  --paper: #FFFFFF;
  --paper-soft: #F4F4F2;
  --graphite-1: #1A1A1A;
  --graphite-2: #2A2A2A;
  --accent-spring: #00B14F;
  --rule-on-dark: rgba(255, 255, 255, 0.18);
  --rule-on-light: rgba(0, 0, 0, 0.12);

  --font-display: 'Helvetica Inserat', 'Anton', Impact, sans-serif;
  --font-display-2: 'Druk Wide', 'Archivo Black', 'Arial Black', sans-serif;
  --font-body: 'Inter', 'Helvetica Neue', sans-serif;
  --ease: cubic-bezier(0.2, 0, 0, 1);

  --container-max: 1440px;
  --content-max: 1080px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

html, body {
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }
button { font-family: inherit; cursor: pointer; }

:focus-visible {
  outline: 2px solid var(--accent-spring);
  outline-offset: 3px;
}

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Skip link: off-screen until focused, then slides in (keyboard a11y). */
.skip-link {
  position: fixed; left: 12px; top: -64px; z-index: 100;
  padding: 12px 18px;
  background: var(--paper); color: var(--ink);
  font: 600 12px/1 var(--font-body);
  letter-spacing: 0.16em; text-transform: uppercase;
  transition: top 160ms var(--ease);
}
.skip-link:focus { top: 12px; }

/* === Shared type utilities ====================================== */
.eyebrow {
  font: 600 11px/1 var(--font-body);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
}
.eyebrow.on-light { color: rgba(0, 0, 0, 0.55); }

.ins-box {
  display: inline-block;
  padding: 0 0.18em 0.05em;
  background: currentColor;
  line-height: 1;
}
.ins-box > span { color: var(--ink); }
.on-light .ins-box > span { color: var(--paper); }

/* Hero title INSIDE box: align its left edge with the W/M column
   (WHAT'S / MATTERS) and center it vertically so the gap above and
   below the box read as equal. Scoped to the hero so the inline
   "What's INSIDE matters" box in the Source section is unaffected. */
.hero__title .ins-box {
  padding: 0.03em 0.16em;
  margin-left: 0.035em;
  transform: translateY(-0.032em);
}

.origin-strip {
  font: 600 11px/1 var(--font-body);
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

/* === Buttons ==================================================== */
.btn {
  display: inline-block;
  padding: 16px 28px;
  font: 600 12px/1 var(--font-body);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  border: 1.5px solid currentColor;
  background: transparent;
  color: inherit;
  border-radius: 0;
  transition: background var(--ease) 180ms, color var(--ease) 180ms, transform var(--ease) 120ms;
}
.btn:active { transform: scale(0.98); }
.btn-primary-dark { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.btn-primary-dark:hover { background: transparent; color: var(--paper); }
.btn-primary-light { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.btn-primary-light:hover { background: transparent; color: var(--ink); }

/* === Header ===================================================== */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background 240ms var(--ease), border-color 240ms var(--ease), backdrop-filter 240ms var(--ease);
}
.site-header.scrolled {
  background: rgba(10, 10, 10, 0.92);
  border-bottom: 1px solid var(--rule-on-dark);
  backdrop-filter: blur(20px) saturate(1.1);
  -webkit-backdrop-filter: blur(20px) saturate(1.1);
}
.site-header__inner {
  position: relative;
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px;
  padding: 18px clamp(20px, 4vw, 64px);
  max-width: var(--container-max); margin: 0 auto;
}
.site-header__logo {
  display: inline-flex; align-items: center;
}
.site-header__logo img {
  display: block; width: auto; height: 44px;
}
.site-nav {
  display: flex; gap: 36px;
  font: 600 11px/1 var(--font-body);
  letter-spacing: 0.18em; text-transform: uppercase;
}
.site-nav a { color: rgba(255, 255, 255, 0.85); }
.site-nav a:hover { color: #fff; text-decoration: underline; text-underline-offset: 4px; }
.site-header .btn { padding: 10px 18px; font-size: 11px; white-space: nowrap; }

/* Hamburger toggle — hidden on desktop, revealed at ≤640px (see media query). */
.nav-toggle {
  display: none;
  width: 44px; height: 44px;
  align-items: center; justify-content: center;
  background: transparent; color: #fff;
  border: 1px solid var(--rule-on-dark);
}
.nav-toggle__bar,
.nav-toggle__bar::before,
.nav-toggle__bar::after {
  content: ""; display: block;
  width: 20px; height: 2px; background: #fff;
  transition: transform 200ms var(--ease), background 200ms var(--ease), top 200ms var(--ease);
}
.nav-toggle__bar { position: relative; }
.nav-toggle__bar::before { position: absolute; left: 0; top: -6px; }
.nav-toggle__bar::after  { position: absolute; left: 0; top: 6px; }
.site-header.nav-open .nav-toggle__bar { background: transparent; }
.site-header.nav-open .nav-toggle__bar::before { top: 0; transform: rotate(45deg); }
.site-header.nav-open .nav-toggle__bar::after  { top: 0; transform: rotate(-45deg); }

/* Skip-link target: don't paint a focus ring on the whole <main>. */
#top:focus { outline: none; }

/* === Hero ======================================================= */
.hero {
  position: relative; min-height: 100vh;
  background: var(--ink); color: #fff; overflow: hidden;
  display: grid;
  grid-template-columns: 60px 1fr 1fr 60px;
}
.hero__rail {
  position: relative; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.hero__rail--left { border-right: 1px solid var(--rule-on-dark); }
.hero__rail--right { border-left: 1px solid var(--rule-on-dark); padding: 40px 0; }
.wordmark-vertical-img {
  display: block; width: 46px; height: auto;
}
.origin-strip--vertical { writing-mode: vertical-rl; transform: rotate(180deg); white-space: nowrap; }

.hero__content {
  padding: clamp(120px, 14vh, 180px) clamp(24px, 4vw, 64px) 64px;
  display: flex; flex-direction: column; justify-content: center; gap: 28px;
}
.hero__title {
  font-family: var(--font-display);
  font-size: clamp(64px, 10vw, 168px);
  line-height: 0.85; letter-spacing: -0.02em;
  text-transform: uppercase; font-weight: 400;
}
.hero__lead {
  font-size: 18px; line-height: 1.5;
  color: rgba(255, 255, 255, 0.85); max-width: 460px; margin-top: 12px;
}
.hero__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 12px; }
.hero__media {
  position: relative;
  background-color: transparent;
  background-image: url('assets/photos/bottle-transparent.png');
  background-size: contain; background-position: center;
  background-repeat: no-repeat;
}
.hero__media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10,10,10,0) 60%, rgba(10,10,10,0.4) 100%);
}

/* === Pillars ==================================================== */
.pillars {
  display: grid; grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--rule-on-dark);
  border-bottom: 1px solid var(--rule-on-dark);
  background: var(--ink);
}
.pillar { padding: 64px 40px; }
.pillar + .pillar { border-left: 1px solid var(--rule-on-dark); }
.pillar__label {
  font: 700 13px/1 var(--font-body);
  letter-spacing: 0.18em; text-transform: uppercase; margin-bottom: 24px;
}
.pillar__label span {
  font-weight: 400; letter-spacing: 0.04em; text-transform: lowercase;
}
.pillar__headline {
  font-family: var(--font-display); font-size: 40px; line-height: 0.95;
  letter-spacing: -0.01em; text-transform: uppercase; font-weight: 400;
}
.pillar__body {
  font-size: 14px; line-height: 1.55;
  color: rgba(255, 255, 255, 0.7); margin-top: 24px;
}

/* === Story ====================================================== */
.story {
  background: var(--paper-soft); color: var(--ink);
  padding: clamp(96px, 12vw, 192px) clamp(20px, 4vw, 64px);
}
.story__inner {
  max-width: var(--content-max); margin: 0 auto;
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 6vw, 96px); align-items: start;
}
.story__title {
  font-family: var(--font-display);
  font-size: clamp(40px, 6vw, 96px); line-height: 0.9;
  letter-spacing: -0.01em; text-transform: uppercase; font-weight: 400;
}
.story__body { display: flex; flex-direction: column; gap: 22px; font-size: 17px; line-height: 1.65; padding-top: 12px; }
.story__kicker { font-family: var(--font-display-2); font-size: 22px; line-height: 1.2; margin-top: 8px; text-transform: uppercase; }

/* === Sourced in the USA ========================================= */
.origin {
  background: var(--ink); color: #fff;
  padding: clamp(96px, 12vw, 160px) clamp(20px, 4vw, 64px);
  border-top: 1px solid var(--rule-on-dark);
}
.origin__inner {
  max-width: var(--content-max); margin: 0 auto;
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 6vw, 96px); align-items: center;
}
.origin__copy { display: flex; flex-direction: column; align-items: flex-start; }
.origin__title { margin: 0; line-height: 0; }
.origin__title img { display: block; width: 100%; max-width: 420px; height: auto; }
.origin__lead { font-size: 16px; line-height: 1.6; color: rgba(255,255,255,0.75); margin-top: 28px; max-width: 440px; }
.origin__map { margin: 0; }
.origin__map img { display: block; width: 100%; height: auto; }

/* === What's Inside ============================================== */
.inside {
  background: var(--ink); color: #fff;
  padding: clamp(96px, 12vw, 160px) clamp(20px, 4vw, 64px);
}
.inside__inner {
  max-width: var(--content-max); margin: 0 auto;
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 6vw, 96px); align-items: center;
}
.inside__head { display: flex; flex-direction: column; align-items: flex-start; }
.inside__title {
  font-family: var(--font-display-2); font-size: clamp(36px, 5vw, 64px);
  line-height: 1; text-transform: uppercase;
}
.inside__divider { width: 56px; height: 3px; background: #fff; margin-top: 24px; }
.inside__lead { font-size: 16px; line-height: 1.6; color: rgba(255,255,255,0.75); margin-top: 28px; max-width: 420px; }
.inside__panel { margin: 0; }
.inside__panel img { display: block; width: 100%; max-width: 560px; height: auto; }

/* Superior Facts panel — native HTML/text rebuild (formerly an embedded SVG) */
.facts {
  width: 100%; max-width: 560px;
  border: 1px solid rgba(255, 255, 255, 0.9);
  background: var(--ink); color: #fff;
  padding: clamp(16px, 2.4vw, 26px) 0;
}
.facts__heading {
  font-family: var(--font-display-2);
  font-size: clamp(30px, 4.4vw, 52px);
  line-height: 0.95; text-transform: uppercase; letter-spacing: 0.01em;
  padding: 0 clamp(16px, 2.4vw, 26px);
  margin-bottom: clamp(14px, 2vw, 22px);
}
.facts__table { width: 100%; border-collapse: collapse; }
.facts__table th, .facts__table td {
  font-weight: 400; font-size: clamp(12px, 1.4vw, 15px); line-height: 1.25;
  vertical-align: baseline;
  padding: clamp(7px, 1vw, 10px) clamp(16px, 2.4vw, 26px);
}
.facts__table th { text-align: left; padding-right: 8px; }
.facts__table td { text-align: right; font-weight: 700; white-space: nowrap; padding-left: 8px; }
.facts__table b { font-weight: 700; }
/* alternating inverted bands — odd rows are white with dark text */
.facts__table tr:nth-child(odd) { background: #fff; color: var(--ink); }
.facts__note {
  background: #fff; color: var(--ink);
  font-size: clamp(9px, 1vw, 11px); line-height: 1.4; text-align: justify;
  padding: clamp(10px, 1.4vw, 14px) clamp(16px, 2.4vw, 26px);
  margin-top: clamp(10px, 1.4vw, 14px);
}
.facts__link { text-decoration: underline; font-weight: 700; }

/* === Be Superior ================================================ */
.be-superior {
  background: var(--ink); color: #fff;
  padding: clamp(96px, 14vw, 192px) clamp(20px, 4vw, 64px);
  border-top: 1px solid var(--rule-on-dark);
}
.be-superior__inner {
  max-width: var(--content-max); margin: 0 auto;
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(48px, 6vw, 96px); align-items: center;
}
.be-superior__title { margin: 0; line-height: 0; }
.be-superior__title img {
  display: block; width: 100%; max-width: 520px; height: auto;
}
.be-superior__lead { font-size: 20px; line-height: 1.5; color: rgba(255,255,255,0.85); margin-top: 28px; max-width: 480px; }
.be-superior__sub { font-size: 14px; line-height: 1.6; color: rgba(255,255,255,0.6); margin-top: 18px; max-width: 480px; }
.be-superior__marks { display: flex; flex-direction: column; align-items: flex-start; gap: 32px; }
.seal-row { display: flex; gap: 28px; align-items: center; flex-wrap: wrap; }
.seal-row img { width: 88px; filter: invert(1); }
.seal-row img.flag { width: 80px; }
/* Two-tone brand seals ship in final colors — don't invert them. */
.seal-row img.seal--full { width: 104px; filter: none; }
.be-superior__recycle { width: 240px; height: auto; }
.be-superior__box { max-width: var(--content-max); margin: clamp(56px, 7vw, 96px) auto 0; }
.be-superior__box img {
  display: block; width: 100%; height: auto;
  border: 1px solid var(--rule-on-dark);
}
.be-superior__box figcaption {
  margin-top: 16px; font-size: 12px; letter-spacing: 0.16em;
  text-transform: uppercase; color: rgba(255, 255, 255, 0.55);
}

/* === Email capture ============================================== */
.notify {
  background: var(--paper); color: var(--ink);
  padding: clamp(96px, 12vw, 160px) clamp(20px, 4vw, 64px);
}
.notify__inner { max-width: 720px; margin: 0 auto; }
.notify__title {
  font-family: var(--font-display); font-size: clamp(48px, 7vw, 112px);
  line-height: 0.9; letter-spacing: -0.02em; text-transform: uppercase; font-weight: 400;
}
.notify__lead { font-size: 17px; line-height: 1.6; color: rgba(0,0,0,0.7); margin-top: 24px; max-width: 540px; }
.notify__form { margin-top: 36px; display: flex; flex-direction: column; gap: 14px; max-width: 540px; }
.notify__field { display: flex; gap: 0; }
.notify__input {
  flex: 1; padding: 16px 18px;
  border: 1.5px solid var(--ink); border-right: none;
  font: 400 16px/1.2 var(--font-body); background: #fff; color: var(--ink);
  outline: none; border-radius: 0;
}
.notify__input:focus-visible { outline: 2px solid var(--accent-spring); outline-offset: -2px; }
.notify__check { display: flex; align-items: center; gap: 10px; font-size: 13px; color: rgba(0,0,0,0.7); }
.notify__check input { width: 16px; height: 16px; accent-color: var(--ink); }
.notify__success {
  margin-top: 36px; padding: 28px;
  background: var(--ink); color: #fff;
  border-left: 4px solid var(--accent-spring);
  display: flex; flex-direction: column; gap: 8px;
}
.notify__success h3 { font-family: var(--font-display-2); font-size: 22px; text-transform: uppercase; font-weight: 700; }
.notify__success p { font-size: 14px; color: rgba(255,255,255,0.7); }
.notify__error { margin-top: 16px; font-size: 14px; color: #B00020; }
[hidden] { display: none !important; }

/* === Footer ===================================================== */
.site-footer {
  background: var(--ink); color: #fff;
  padding: 64px clamp(20px, 4vw, 64px) 32px;
  border-top: 1px solid var(--rule-on-dark);
}
.site-footer__inner { max-width: var(--content-max); margin: 0 auto; }
.site-footer__grid {
  display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 48px;
  padding-bottom: 48px; border-bottom: 1px solid var(--rule-on-dark);
}
.site-footer__brand-name { display: inline-block; }
.site-footer__brand-name img { display: block; width: auto; height: 52px; max-width: 100%; }
.site-footer__brand-sub { font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(255,255,255,0.55); margin-top: 12px; }
.site-footer__brand-desc { font-size: 13px; line-height: 1.6; color: rgba(255,255,255,0.6); margin-top: 18px; max-width: 380px; }
.site-footer__col ul { list-style: none; display: flex; flex-direction: column; gap: 10px; font-size: 14px; }
.site-footer__col a { color: rgba(255,255,255,0.85); }
.site-footer__col a:hover { text-decoration: underline; text-underline-offset: 4px; }
.site-footer__muted { color: rgba(255,255,255,0.55); font-size: 13px; }
.site-footer__seals { display: flex; gap: 14px; align-items: center; }
.site-footer__seals img { width: 56px; filter: invert(1); }
.site-footer__seals img.seal--full { width: 64px; filter: none; }
.site-footer__certnote { font-size: 11px; color: rgba(255,255,255,0.55); margin-top: 12px; line-height: 1.5; }
.site-footer__bottom {
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding-top: 28px; font-size: 11px; color: rgba(255,255,255,0.6); flex-wrap: wrap;
}
.site-footer__copy { letter-spacing: 0.18em; text-transform: uppercase; }
/* Copyright + build credit travel together so the bottom bar stays a
   two-part row (origin strip left, this group right) under space-between. */
.site-footer__bottom-right {
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
}
.site-footer__credit {
  letter-spacing: 0.18em; text-transform: uppercase;
  color: rgba(255,255,255,0.6); text-decoration: none;
  transition: color .2s var(--ease);
}
.site-footer__credit:hover { color: var(--accent-spring); }
.site-footer__credit:focus-visible { outline: 2px solid var(--accent-spring); outline-offset: 3px; }
.site-footer__legal-list { list-style: none; margin-top: 16px; font-size: 14px; }
.site-footer__legal-list a { color: rgba(255,255,255,0.85); }
.site-footer__legal-list a:hover { text-decoration: underline; text-underline-offset: 4px; }

/* === Legal / Privacy page ======================================= */
.legal {
  background: var(--ink); color: #fff;
  padding: clamp(140px, 16vw, 200px) clamp(20px, 4vw, 64px) clamp(80px, 10vw, 120px);
}
.legal__inner { max-width: 760px; margin: 0 auto; }
.legal__title {
  font-family: var(--font-display-2); font-size: clamp(40px, 7vw, 72px);
  line-height: 1; text-transform: uppercase;
}
.legal__meta { font-size: 13px; color: rgba(255,255,255,0.55); margin-top: 16px; letter-spacing: 0.04em; }
.legal__lead { font-size: 17px; line-height: 1.7; color: rgba(255,255,255,0.85); margin-top: 28px; }
.legal h2 {
  font-family: var(--font-display-2); font-size: clamp(18px, 2.4vw, 22px);
  text-transform: uppercase; letter-spacing: 0.01em; margin-top: 44px; margin-bottom: 12px;
}
.legal p { font-size: 15px; line-height: 1.7; color: rgba(255,255,255,0.8); margin-top: 12px; }
.legal ul { margin-top: 12px; padding-left: 20px; display: flex; flex-direction: column; gap: 10px; }
.legal li { font-size: 15px; line-height: 1.7; color: rgba(255,255,255,0.8); }
.legal strong { color: #fff; font-weight: 700; }
.legal a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.legal a:hover { color: var(--accent-spring); }
.legal__address { font-style: normal; font-size: 15px; line-height: 1.7; color: rgba(255,255,255,0.8); margin-top: 16px; }
.legal__back { margin-top: 48px; }
.legal__back a { font-weight: 700; }

/* === Scroll reveal (sparing, per brand) ========================= */
/* Content is visible by DEFAULT. The hidden start state is applied only when
   JS is confirmed running (the inline <head> guard sets html.js), so the page
   can never be left blank by a JS failure, a blocked script, or a full-page
   screenshot that renders offscreen content without ever scrolling it into
   view. main.js also runs a safety-net timer that reveals anything still
   hidden. See the 2026-07-20 blank-sections fix. */
.reveal { opacity: 1; transform: none; }
.js .reveal { opacity: 0; transform: translateY(8px); transition: opacity 400ms var(--ease), transform 400ms var(--ease); }
.js .reveal.is-visible { opacity: 1; transform: none; }
/* Hard floor: the <head> guard sets .reveal-fallback after 2s no matter what,
   so content is never left hidden if the observer never fires. */
.js.reveal-fallback .reveal { opacity: 1; transform: none; }

/* === Responsive ================================================= */
@media (max-width: 960px) {
  .hero { grid-template-columns: 1fr; grid-template-rows: auto auto; min-height: auto; }
  .hero__rail { display: none; }
  .hero__content { padding-top: 120px; }
  .hero__media { min-height: 60vh; }
  .story__inner, .inside__inner, .be-superior__inner, .origin__inner { grid-template-columns: 1fr; }
  .pillars { grid-template-columns: 1fr; }
  .pillar + .pillar { border-left: 0; border-top: 1px solid var(--rule-on-dark); }
  .site-footer__grid { grid-template-columns: 1fr 1fr; gap: 32px; }
}

@media (max-width: 640px) {
  /* Reveal the hamburger; keep "Get Notified" + toggle grouped on the right. */
  .nav-toggle { display: inline-flex; }
  .site-header .btn-primary-dark { margin-left: auto; }
  .site-header__logo img { height: 32px; }

  /* Primary nav becomes a full-width dropdown panel under the header. */
  .site-nav {
    display: none;
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; gap: 0;
    padding: 8px clamp(20px, 4vw, 64px) 16px;
    background: rgba(10, 10, 10, 0.97);
    backdrop-filter: blur(20px) saturate(1.1);
    -webkit-backdrop-filter: blur(20px) saturate(1.1);
    border-top: 1px solid var(--rule-on-dark);
    border-bottom: 1px solid var(--rule-on-dark);
  }
  .site-header.nav-open .site-nav { display: flex; }
  .site-nav a {
    padding: 16px 2px; font-size: 13px;
    border-top: 1px solid var(--rule-on-dark);
  }
  .site-nav a:first-child { border-top: 0; }

  .site-footer__grid { grid-template-columns: 1fr; }
  .notify__field { flex-direction: column; }
  .notify__input { border-right: 1.5px solid var(--ink); }
  .hero__actions { flex-direction: column; align-items: flex-start; }
  .hero__actions .btn { width: 100%; text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  *, *::before, *::after { transition-duration: 0.01ms !important; }
}

/* ===================== Cookie consent banner ===================== */
/* Gated GA4 opt-in (see consent.js). Brand palette, no third-party UI. */

.consent {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
  background: var(--graphite-1);
  border-top: 1px solid var(--rule-on-dark);
  padding: 18px clamp(16px, 4vw, 40px);
  animation: consent-rise .28s var(--ease) both;
}

@keyframes consent-rise {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .consent { animation: none; }
}

.consent__inner {
  max-width: var(--container-max);
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: clamp(16px, 3vw, 40px);
  flex-wrap: wrap;
}

.consent__text {
  flex: 1 1 320px;
  font-size: 14px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.82);
}

.consent__text a {
  color: var(--paper);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.consent__text a:hover { color: var(--accent-spring); }

.consent__actions {
  display: flex;
  gap: 10px;
  flex: 0 0 auto;
}

.consent__btn {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 12px 24px;
  border: 1px solid var(--paper);
  background: var(--paper);
  color: var(--ink);
  cursor: pointer;
  transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}

.consent__btn:hover {
  background: var(--accent-spring);
  border-color: var(--accent-spring);
  color: var(--ink);
}

.consent__btn--ghost {
  background: transparent;
  color: var(--paper);
  border-color: var(--rule-on-dark);
}

.consent__btn--ghost:hover {
  background: transparent;
  border-color: var(--paper);
  color: var(--paper);
}

.consent__btn:focus-visible {
  outline: 2px solid var(--accent-spring);
  outline-offset: 3px;
}

@media (max-width: 560px) {
  .consent__actions { width: 100%; }
  .consent__btn { flex: 1 1 0; padding: 13px 12px; }
}