/* ==========================================================================
   KRADL Natural Mineral Water — core stylesheet
   Palette and type sampled directly from the approved design mockups.
   ========================================================================== */

/* --- 1. Tokens ----------------------------------------------------------- */
:root {
  /* Brand */
  --navy-950: #01204f;
  --navy-900: #02245a;
  --navy-800: #083166;
  --ink:      #0b2a63;   /* headings */
  --blue:     #14369b;   /* body copy + links */
  --blue-mut: #4a5c92;   /* muted copy */
  --green:    #3f9a14;   /* accent rule */
  --green-lt: #8fbd64;
  --white:    #ffffff;
  --tint:     #f2f7fa;   /* pale blue section wash */
  --line:     #d7e2ee;

  /* Type */
  --serif: "Playfair Display", "Times New Roman", serif;
  --sans:  "Lato", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* Scale */
  --step--1: 0.8125rem;
  --step-0:  1rem;
  --step-1:  clamp(1.05rem, 0.98rem + 0.35vw, 1.25rem);
  --step-2:  clamp(1.35rem, 1.2rem + 0.7vw, 1.75rem);
  --step-3:  clamp(1.8rem, 1.5rem + 1.4vw, 2.6rem);
  --step-4:  clamp(2.4rem, 1.8rem + 2.8vw, 4.2rem);

  /* Layout */
  --wrap: 1180px;
  --gutter: clamp(1.25rem, 4vw, 3.5rem);
  --band: clamp(3.5rem, 7vw, 6rem);
  --header-h: 84px;
}

/* --- 2. Reset ------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--white);
  color: var(--blue);
  font-family: var(--sans);
  font-size: var(--step-0);
  font-weight: 400;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}
img, svg { max-width: 100%; height: auto; display: block; }
a { color: var(--blue); text-decoration-thickness: 1px; text-underline-offset: 3px; }
h1, h2, h3, h4 { margin: 0; color: var(--ink); font-weight: 400; line-height: 1.12; }
p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }
ul { margin: 0; padding: 0; list-style: none; }
button { font: inherit; color: inherit; }

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

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

.skip-link {
  position: absolute; left: 1rem; top: -100px; z-index: 200;
  background: var(--navy-900); color: #fff; padding: .7rem 1.1rem;
  font-size: var(--step--1); letter-spacing: .06em; text-transform: uppercase;
}
.skip-link:focus { top: 1rem; }
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

/* --- 3. Shared primitives ----------------------------------------------- */
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.band { padding-block: var(--band); }
.band--tint { background: var(--tint); }
.band--flush-bottom { padding-bottom: 0; }

/* Section label with the green rule beneath it */
.eyebrow {
  font-size: var(--step--1);
  letter-spacing: .34em;
  text-transform: uppercase;
  color: var(--ink);
  margin: 0 0 .9rem;
}
.eyebrow::after {
  content: ""; display: block; width: 46px; height: 2px;
  background: var(--green); margin-top: .85rem;
}
.eyebrow--light, .eyebrow--light + * { color: #fff; }
.eyebrow--light { color: #fff; }
.eyebrow--centre { text-align: center; }
.eyebrow--centre::after { margin-inline: auto; }

.rule-green {
  width: 96px; height: 2px; background: var(--green);
  border: 0; margin: 1.75rem 0 0;
}
.rule-green--centre { margin-inline: auto; }

.display { font-family: var(--serif); letter-spacing: .01em; }
h1.display { font-size: var(--step-4); }
h2.display { font-size: var(--step-3); }
.display--caps { text-transform: uppercase; letter-spacing: .02em; }
.display--tight { line-height: 1.02; }

.lede { font-size: var(--step-1); max-width: 34ch; }
.prose { max-width: 62ch; }

.script { display: block; width: clamp(120px, 12vw, 168px); }

/* Buttons — reserved for Phase 2, styled now so the shop inherits the brand */
.btn {
  display: inline-block; padding: .85rem 1.9rem;
  font-size: var(--step--1); letter-spacing: .16em; text-transform: uppercase;
  text-decoration: none; border: 1.5px solid var(--navy-900); border-radius: 2px;
  background: var(--navy-900); color: #fff; transition: background .2s, color .2s;
}
.btn:hover { background: var(--navy-950); }
.btn--ghost { background: transparent; color: var(--navy-900); }
.btn--ghost:hover { background: var(--navy-900); color: #fff; }
.btn--light { background: #fff; border-color: #fff; color: var(--navy-900); }

/* --- 4. Header ---------------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: #fff;
  border-bottom: 1px solid #eef2f7;
}
.site-header__inner {
  display: flex; align-items: center; gap: clamp(1rem, 3vw, 2.5rem);
  min-height: var(--header-h);
}
.brand { flex: 0 0 auto; }
.brand img { width: clamp(150px, 16vw, 208px); }

.nav { margin-inline: auto; }
.nav__list { display: flex; gap: clamp(1.1rem, 3vw, 2.6rem); }
.nav__link {
  display: block; padding: .35rem 0;
  font-size: .875rem; letter-spacing: .09em; text-transform: uppercase;
  color: var(--ink); text-decoration: none;
  border-bottom: 2px solid transparent;
}
.nav__link:hover { border-bottom-color: var(--green-lt); }
.nav__link[aria-current="page"] { border-bottom-color: var(--green); }

.header__tools { display: flex; align-items: center; gap: clamp(.75rem, 2vw, 1.75rem); }
.icon-btn {
  display: grid; place-items: center;
  width: 40px; height: 40px; padding: 0;
  background: none; border: 0; border-radius: 50%; cursor: pointer;
  color: var(--ink);
}
.icon-btn:hover { background: var(--tint); }
.icon-btn svg { width: 20px; height: 20px; }
.header__script { flex: 0 0 auto; }
.header__script img { width: clamp(96px, 9vw, 132px); }

.nav-toggle { display: none; }

/* --- 5. Search overlay -------------------------------------------------- */
.search {
  position: fixed; inset: 0; z-index: 150;
  background: rgba(2, 36, 90, .96);
  display: none; padding: clamp(2rem, 10vh, 7rem) var(--gutter);
  overflow-y: auto;
}
.search[open], .search.is-open { display: block; }
.search__inner { max-width: 700px; margin-inline: auto; }
.search__field {
  display: flex; align-items: center; gap: 1rem;
  border-bottom: 2px solid rgba(255,255,255,.4); padding-bottom: .75rem;
}
.search__input {
  flex: 1; background: none; border: 0; color: #fff;
  font-family: var(--serif); font-size: var(--step-2);
}
.search__input::placeholder { color: rgba(255,255,255,.5); }
.search__input:focus { outline: none; }
.search__close { color: #fff; }
.search__close:hover { background: rgba(255,255,255,.12); }
.search__results { margin-top: 2rem; color: #fff; }
.search__hit { padding: 1rem 0; border-bottom: 1px solid rgba(255,255,255,.18); }
.search__hit a { color: #fff; font-family: var(--serif); font-size: var(--step-1); text-decoration: none; }
.search__hit a:hover { text-decoration: underline; }
.search__hit p { margin: .3rem 0 0; color: rgba(255,255,255,.72); font-size: var(--step--1); }
.search__empty { color: rgba(255,255,255,.72); }

/* --- 6. Heroes ---------------------------------------------------------- */
.hero {
  position: relative;
  min-height: clamp(460px, 78vh, 760px);
  display: grid; align-items: center;
  background: var(--navy-900) center/cover no-repeat;
  overflow: hidden;
}
.hero__content { position: relative; z-index: 2; padding-block: clamp(2.5rem, 8vh, 5rem); }

/* Homepage: wordmark sits in the sky above the escarpment, as per the mockup.
   Two crops of the same photograph — landscape on desktop, portrait on phones,
   where the bottle and glass need to stay in frame. */
.hero--home {
  min-height: clamp(560px, 92vh, 940px);
  justify-items: center;
  align-content: start;
  padding-top: clamp(1.5rem, 5vh, 3.5rem);
  text-align: center;
  background-image: url("../img/hero-home-wide.jpg");
  background-position: center 88%;
}
.hero--home .hero__wordmark { width: clamp(230px, 39vw, 520px); margin-inline: auto; }
/* The mockup hero is portrait, so its wordmark-to-width ratio (47.6%) is far
   too large for a landscape viewport — it would run into the bottle. Sized to
   sit in clear sky above it, as the mockup composition intends. */
.hero--home .hero__content { max-width: 720px; margin-inline: auto; }
.hero--home::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(255,255,255,.42) 0%, rgba(255,255,255,.22) 38%, rgba(255,255,255,0) 62%);
}
.hero__tag {
  margin-top: .9rem;
  font-size: var(--step-1); letter-spacing: .2em; text-transform: uppercase;
  color: var(--ink);
}

/* Left-aligned text over a light photo (Contact) */
.hero--light::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(90deg, rgba(255,255,255,.94) 0%, rgba(255,255,255,.82) 34%, rgba(255,255,255,0) 62%);
}
.hero--light .hero__content { color: var(--blue); max-width: 34rem; }

/* Right-aligned white text over a photo (Our Water) */
.hero--dark::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(90deg, rgba(0,20,50,.05) 0%, rgba(0,20,50,.34) 55%, rgba(0,20,50,.5) 100%);
}
.hero--dark .hero__content { color: #fff; margin-left: auto; max-width: 46rem; text-align: center; }
.hero--dark h1, .hero--dark h2 { color: #fff; }
.hero--dark h1 { font-size: clamp(1.9rem, 1.15rem + 2.2vw, 3.15rem); }
.hero--dark .hero__note { max-width: 46ch; margin-inline: auto; font-size: .975rem; }
.hero__sub { font-family: var(--serif); font-size: var(--step-2); margin: .6rem 0 1.4rem; }

/* Story hero. One real photograph at every width, with the headline and intro
   as live HTML over it, so edits to the wording show on every screen. */
.hero--story {
  min-height: clamp(420px, 62vh, 620px);
  background-image: var(--hero-wide);
  background-position: left center;
}

@media (max-width: 859.98px) {
  /* The Contact hero only gets its mockup framing from 860px up (below). Under
     that it fell back to .hero's 78vh — about 658px on a phone, a whole screen
     of photograph before a single contact detail. Let the copy set the height
     instead, and shift the frame up so the bottle survives the shorter crop. */
  .hero--light {
    min-height: 0;
    background-position: center 32%;
  }
  .hero--light .hero__content { padding-block: clamp(1.75rem, 5vh, 3rem); }
}

/* From ~860px up the heroes show the full frame, exactly as the mockups do.
   Below that the photo would be too letterboxed to read, so height is left to
   the copy and `cover` crops instead. */
@media (min-width: 860px) {
  .hero--light { aspect-ratio: 1024 / 731; min-height: 0; }
  .hero--dark  { aspect-ratio: 1024 / 594; min-height: 0; }
}

/* The story photo is shown whole at every width, never cropped. Narrower than
   1100px the family fills too much of the frame to put copy over it, so the copy
   sits in the clear space above the photo, which is parked at the foot of the
   section. 1099.98px, not 1100px: at exactly 1100px both queries would apply. */
@media (max-width: 1099.98px) {
  .hero--story {
    background-color: var(--white);
    background-size: 100% auto;
    background-position: center bottom;
    background-repeat: no-repeat;
    align-content: start;
    min-height: 0;
    /* The photo's own 2560:1355 ratio. A percentage resolves against this
       section's width, so it tracks `background-size: 100%` exactly — 100vw
       would overshoot by the scrollbar and leave a gap beneath the photo. */
    padding-bottom: 52.93%;
  }
  .hero--story .hero__content { padding-bottom: 1.75rem; }
  .hero--story h1 { font-size: var(--step-3); }
}

/* From 1100px the copy sits over the clear sky and field to the left of the
   family, as in the approved mockup, and scales with the frame so it never
   runs over a face. */
@media (min-width: 1100px) {
  .hero--story { aspect-ratio: 2560 / 1355; min-height: 0; align-items: start; }
  .hero--story .wrap { max-width: none; padding-left: 5.5%; }
  .hero--story .hero__content { max-width: 36%; padding: 10.5% 0 0; }
  .hero--story h1 { font-size: clamp(1.5rem, 2.8vw, 3.2rem); white-space: nowrap; }
  .hero--story .lede { font-size: clamp(.9rem, 1.05vw, 1.2rem); max-width: 26vw; }
}

/* --- 7. Contact detail strip and bottle range -------------------------- */
.details { display: grid; grid-template-columns: repeat(4, 1fr); }
.details__item {
  display: grid; justify-items: center; text-align: center; gap: .85rem;
  align-content: start;
  padding: 0 clamp(.75rem, 2vw, 2rem);
  border-left: 1px solid var(--line);
}
.details__item:first-child { border-left: 0; }
.details__icon {
  display: grid; place-items: center;
  width: 62px; height: 62px;
  border: 2px solid var(--ink); border-radius: 50%; color: var(--ink);
}
.details__icon svg { width: 26px; height: 26px; }
.details__label {
  font-size: var(--step--1); letter-spacing: .2em; text-transform: uppercase; color: var(--ink);
}
.details__label::after {
  content: ""; display: block; width: 40px; height: 2px;
  background: var(--green); margin: .7rem auto 0;
}
.details__value { font-size: 1.0625rem; }
.details__value a { text-decoration: none; }
.details__value a:hover { text-decoration: underline; }

/* The bottle formats, above the order form. Deliberately typographic: there is
   no bottle photography above 1024px, and stretched art would read worse than
   clean type. Three short labels hold one row at every width. */
.range {
  display: grid; grid-template-columns: repeat(3, 1fr);
  margin: 2rem 0 0; padding: 0; list-style: none;
}
.range__item {
  text-align: center;
  padding: 0 clamp(.5rem, 2vw, 2rem);
  border-left: 1px solid var(--line);
}
.range__item:first-child { border-left: 0; }
.range__size {
  font-family: var(--serif); font-size: var(--step-3);
  letter-spacing: .01em; color: var(--ink);
}
.range__note {
  margin-top: 1.5rem; text-align: center;
  font-size: var(--step--1); letter-spacing: .2em; text-transform: uppercase;
  color: var(--blue-mut);
}

/* --- 8. Farm-to-you (map) band ----------------------------------------- */
.farm { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; }
.farm__map { justify-self: center; align-self: start; width: min(100%, 420px); }
.farm h2 { font-size: var(--step-2); }
.farm h2 .display { display: block; }

/* Curved transition into the footer */
.wave { display: block; width: 100%; height: clamp(38px, 6vw, 74px); }
.wave path { fill: var(--navy-900); }
.wave--from-tint { background: var(--tint); }
.wave--from-white { background: #fff; }

/* --- 9. Our Water: minerals ------------------------------------------- */
.minerals { display: grid; grid-template-columns: 1fr 2.4fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.minerals__intro h2 { font-size: var(--step-2); letter-spacing: .12em; text-transform: uppercase; line-height: 1.25; }
.minerals__intro p { margin-top: 1.5rem; }
.minerals__head {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 1rem;
  margin-bottom: 2.25rem;
}
.minerals__source { font-size: var(--step--1); color: var(--blue-mut); }
.mineral-grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.mineral {
  text-align: center; padding: 0 clamp(.6rem, 1.5vw, 1.4rem);
  border-left: 1px solid var(--line);
}
.mineral:first-child { border-left: 0; }
.mineral__img { width: clamp(88px, 8.3vw, 120px); margin: 0 auto 1rem; }
.mineral__value { font-family: var(--serif); font-size: clamp(1.7rem, 1.3rem + 1.4vw, 2.35rem); color: var(--ink); }
.mineral__unit { font-family: var(--sans); font-size: .8125rem; letter-spacing: .04em; margin-left: .25rem; }
.mineral__name {
  display: block; margin-top: .35rem;
  font-size: .8125rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink);
}
.mineral__note { margin-top: 1rem; font-size: .9375rem; line-height: 1.5; color: var(--blue); }

/* Dark stats band over the water photograph */
.stats {
  position: relative;
  background: var(--navy-800) center/cover no-repeat;
  color: #fff;
}
.stats::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(2,36,90,.86) 0%, rgba(2,36,90,.52) 45%, rgba(2,36,90,.68) 100%);
}
.stats__inner {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: 1fr 1fr .8fr; gap: clamp(1.75rem, 4vw, 3.5rem); align-items: center;
}
.stats h2 { color: #fff; font-size: var(--step-2); letter-spacing: .1em; text-transform: uppercase; line-height: 1.25; }
.stats p { margin-top: 1.4rem; }
.stat { text-align: center; }
.stat__value { font-family: var(--serif); font-size: clamp(2.6rem, 2rem + 3vw, 4.4rem); line-height: 1; }
.stat__value span { font-family: var(--sans); font-size: 1rem; letter-spacing: .04em; }
.stat__label {
  display: block; margin-top: .6rem;
  font-size: .8125rem; letter-spacing: .16em; text-transform: uppercase;
}
.stat--ph { border-left: 1px solid rgba(255,255,255,.3); }
.stat__drop { width: 42px; margin: 0 auto .75rem; }
.stat__drop path { fill: none; stroke: #fff; stroke-width: 6; }

/* --- 10. Our Story prose ---------------------------------------------- */
.story {
  position: relative;
  /* faint Free State skyline along the foot of the section, as in the mockup */
  background-image: url("../img/story-mountains.png");
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: 100% auto;
}
.story__cols {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(1.75rem, 5vw, 4rem);
  margin-top: 2.5rem;
}
.story__cols > div + div { border-left: 1px solid var(--line); padding-left: clamp(1.75rem, 5vw, 4rem); }
.story__sign { margin-top: 2rem; display: grid; justify-items: end; }
.story__sign img { width: clamp(130px, 14vw, 180px); }
.story__sign::after { content: ""; width: 170px; height: 2px; background: var(--green); margin-top: .5rem; }

.figure-band img { width: 100%; object-fit: cover; max-height: clamp(220px, 30vw, 400px); }

/* Home page teaser cards */
.teasers { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.5rem, 3.5vw, 3rem); }
.teaser h3 { font-family: var(--serif); font-size: var(--step-2); margin-bottom: .75rem; }
.teaser p { font-size: .9875rem; }
.teaser__link {
  display: inline-block; margin-top: 1rem;
  font-size: var(--step--1); letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink); text-decoration: none; border-bottom: 2px solid var(--green); padding-bottom: .2rem;
}
.teaser__link:hover { color: var(--green); }

/* Split feature: photo one side, copy the other */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.75rem, 5vw, 4rem); align-items: center; }
.split__media img { width: 100%; object-fit: cover; aspect-ratio: 4 / 5; }
.split--flip .split__media { order: 2; }

/* Home mineral summary row */
.quickstats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; text-align: center; }
.quickstats .stat__value { font-size: clamp(1.7rem, 1.3rem + 1.4vw, 2.4rem); color: var(--ink); }
.quickstats .stat__label { color: var(--ink); }
.quickstats > div + div { border-left: 1px solid var(--line); }

/* --- 11. Contact form ------------------------------------------------- */
.enquiry { display: grid; gap: 1.75rem; max-width: 46rem; }
.enquiry__intro { max-width: 52ch; }
.form { display: grid; gap: 1.15rem; }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.15rem; }
.field { display: grid; gap: .4rem; }
.field > label {
  font-size: var(--step--1); letter-spacing: .1em; text-transform: uppercase; color: var(--ink);
}
.field input, .field textarea, .field select {
  font: inherit; color: var(--blue);
  padding: .8rem .9rem;
  background: #fff; border: 1px solid var(--line); border-radius: 2px;
}
.field input:focus, .field textarea:focus, .field select:focus {
  outline: 2px solid var(--green); outline-offset: 1px; border-color: var(--green);
}
.field textarea { min-height: 150px; resize: vertical; }
.field--hidden { position: absolute; left: -9999px; }
.form__note { font-size: var(--step--1); color: var(--blue-mut); }
.alert { padding: 1rem 1.2rem; border-left: 3px solid var(--green); background: var(--tint); }
.alert--error { border-left-color: #b3261e; }
.alert ul { margin: .4rem 0 0; padding-left: 1.1rem; list-style: disc; }

/* Closing call to action: one line and a button to Contact */
.cta { text-align: center; }
.cta__text { font-family: var(--serif); font-size: var(--step-2); margin-bottom: 1.25rem; }

/* Privacy policy: long-form text with two small tables */
.policy { max-width: 72ch; }
.policy h2 { font-family: var(--serif); font-size: var(--step-2); margin: 2.25rem 0 .75rem; }
.policy ul { list-style: disc; padding-left: 1.25rem; margin: .75rem 0; }
.policy li { margin-bottom: .5rem; }
.policy p { margin-bottom: 1rem; }
.policy__table { overflow-x: auto; margin: 1rem 0 1.25rem; }
.policy table { width: 100%; border-collapse: collapse; font-size: .975rem; }
.policy th, .policy td { text-align: left; vertical-align: top; padding: .75rem .9rem; border: 1px solid var(--line); }
.policy thead th { background: var(--tint); font-size: var(--step--1); letter-spacing: .1em; text-transform: uppercase; }
.policy tbody th { font-weight: 600; width: 38%; }

/* --- 12. Footer ------------------------------------------------------- */
.site-footer { background: var(--navy-900); color: #fff; padding-block: clamp(2rem, 4vw, 2.75rem); }
.site-footer a { color: #fff; text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }
.footer__row {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: clamp(1rem, 3vw, 2.5rem);
}
.footer__item { display: flex; align-items: center; gap: .75rem; font-size: .9375rem; line-height: 1.35; }
.footer__icon {
  display: grid; place-items: center; flex: 0 0 auto;
  width: 36px; height: 36px; border: 1.5px solid rgba(255,255,255,.75); border-radius: 50%;
}
.footer__icon svg { width: 17px; height: 17px; }
.footer__trade { margin-top: 1.75rem; text-align: center; font-size: .9375rem; }
.footer__trade a { text-decoration: underline; }
.footer__social { display: flex; align-items: center; gap: .75rem; }
.footer__social span { letter-spacing: .14em; text-transform: uppercase; font-size: var(--step--1); }
.footer__social ul { display: flex; gap: .6rem; }
.footer__social .footer__icon:hover { background: rgba(255,255,255,.14); text-decoration: none; }
.footer__tag {
  display: flex; align-items: center; justify-content: center; gap: 1.1rem;
  margin-top: 2rem;
  font-size: var(--step--1); letter-spacing: .34em; text-transform: uppercase;
}
.footer__tag::before, .footer__tag::after {
  content: ""; width: clamp(48px, 8vw, 88px); height: 2px; background: var(--green);
}
.footer__legal {
  margin-top: 1.5rem; text-align: center;
  font-size: .8125rem; color: rgba(255,255,255,.62);
}
.footer__legal a { color: rgba(255,255,255,.78); }

/* --- 13. Responsive --------------------------------------------------- */
@media (max-width: 1024px) {
  .minerals { grid-template-columns: 1fr; }
  .stats__inner { grid-template-columns: 1fr; }
  .stat--ph { border-left: 0; border-top: 1px solid rgba(255,255,255,.3); padding-top: 1.75rem; }
}

@media (max-width: 860px) {
  :root { --header-h: 68px; }

  .hero--home {
    background-image: url("../img/hero-home.jpg");
    background-position: center top;
    min-height: clamp(560px, 92vh, 820px);
  }

  /* Header collapses to a disclosure panel */
  .nav-toggle {
    display: grid; place-items: center; order: 3;
    width: 42px; height: 42px; background: none; border: 0; cursor: pointer; color: var(--ink);
  }
  .nav-toggle svg { width: 24px; height: 24px; }
  .header__script { display: none; }
  .site-header__inner { flex-wrap: wrap; }
  .header__tools { order: 2; margin-left: auto; }
  .nav {
    order: 4; flex-basis: 100%; margin: 0;
    display: none; border-top: 1px solid #eef2f7;
  }
  .nav.is-open { display: block; }
  .nav__list { flex-direction: column; gap: 0; }
  .nav__link { padding: .95rem 0; border-bottom: 1px solid #eef2f7; }
  .nav__link[aria-current="page"] { border-bottom-color: var(--green); }

  .details { grid-template-columns: repeat(2, 1fr); gap: 2.5rem 0; }
  .details__item:nth-child(odd) { border-left: 0; }
  .mineral-grid { grid-template-columns: repeat(2, 1fr); gap: 2.5rem 0; }
  .mineral:nth-child(odd) { border-left: 0; }
  .story__cols { grid-template-columns: 1fr; }
  .story__cols > div + div { border-left: 0; padding-left: 0; }
  .teasers { grid-template-columns: 1fr; }
  .split { grid-template-columns: 1fr; }
  .split--flip .split__media { order: 0; }
  .split__media img { aspect-ratio: 3 / 2; }
  .farm { grid-template-columns: 1fr; }
  .farm__map { width: min(100%, 280px); }
  .hero--dark .hero__content, .hero--light .hero__content, .hero--story .hero__content { max-width: none; }
  .footer__row { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 560px) {
  /* Every band spends 112px on padding alone at this width. Four bands of that
     is most of a phone screen. */
  :root { --band: 2.5rem; }

  .form__row { grid-template-columns: 1fr; }
  /* 150px of empty textarea is a lot of phone; still four comfortable lines. */
  .field textarea { min-height: 110px; }
  .quickstats { grid-template-columns: repeat(2, 1fr); gap: 1.75rem 0; }
  .quickstats > div:nth-child(odd) { border-left: 0; }

  /* Detail tiles become a contact list: the icon moves beside the text rather
     than above it, which roughly halves the strip. Same circles, labels, rules
     and colours — only the arrangement changes, and only on phones. */
  .details { grid-template-columns: 1fr; gap: 1.5rem 0; }
  .details__item {
    grid-template-columns: 44px 1fr;
    grid-template-rows: auto auto;
    justify-items: start;
    text-align: left;
    column-gap: 1rem;
    row-gap: .15rem;
    padding: 0;
    border-left: 0;
  }
  .details__icon {
    grid-column: 1; grid-row: 1 / span 2;
    width: 44px; height: 44px; border-width: 1.5px;
  }
  .details__icon svg { width: 20px; height: 20px; }
  .details__label { grid-column: 2; grid-row: 1; }
  .details__label::after { margin: .45rem auto .35rem 0; }
  .details__value { grid-column: 2; grid-row: 2; }

  .mineral-grid { grid-template-columns: 1fr; }
  .mineral { border-left: 0; }

  /* "330 ml" at the desktop size would crowd a third of a phone. */
  .range__size { font-size: var(--step-2); }
  .range__item { padding: 0 .35rem; }
  .hero--light::before {
    background: linear-gradient(180deg, rgba(255,255,255,.95) 0%, rgba(255,255,255,.88) 55%, rgba(255,255,255,.55) 100%);
  }
}

/* --- 14. Print -------------------------------------------------------- */
@media print {
  .site-header, .search, .wave { display: none; }
  body { color: #000; }
  .hero { min-height: 0; background: none; }
  .hero::before, .hero::after { display: none; }
}