/* =========================================================
   CLARITY WATER CORP — DESIGN SYSTEM
   ========================================================= */

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body, h1, h2, h3, h4, p, figure, blockquote, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
a { color: inherit; text-decoration: none; }

/* ---------- Design Tokens ---------- */
:root {
  --navy: #0F1B2B;
  --ivory: #F7F5EF; /* clean warm off-white — recalibrated from the earlier #F6F1E7 beige/cream to match the approved Reframe module direction (luxury uncoated-paper white, not beige) */
  --stone: #E4DCCB;
  --sand: #D8C9AE;
  --grey: #8A8377;
  --text-muted: #5E5748; /* darkened for AA contrast on ivory/stone; --grey reserved for decorative use */
  --gold: #C89B3C;
  --gold-dark: #9C7A2E;
  --gold-deep: #7A5F22; /* AA-safe (4.5:1+) eyebrow gold for use on --packaging-bg / --bottle-card-bg, where --gold-dark falls to ~3.1–3.6:1 */
  --ink: #1C2027;

  --packaging-bg: #E9E2D5; /* warm sand/stone ground for the Packaging module, distinct from --ivory so the Reframe→Packaging transition reads as intentional */
  --bottle-card-bg: #F5F1E8; /* glass-bottle card, kept lighter than --packaging-bg so the card still reads as a distinct surface */

  --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --fs-hero: clamp(2.125rem, 1rem + 5.2vw, 5rem);
  --fs-h2: clamp(1.75rem, 1.1rem + 2.6vw, 3.25rem);
  --fs-h3: clamp(1.25rem, 1rem + 1vw, 1.75rem);
  --fs-eyebrow: 0.8125rem;
  --fs-body: clamp(1rem, 0.95rem + 0.2vw, 1.125rem);

  --max-width: 1280px;
  --gutter: clamp(24px, 5vw, 64px);
  --section-pad: clamp(72px, 10vw, 160px);

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------- Base ---------- */
html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  color: var(--ink);
  background: var(--ivory);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -0.01em;
}

h1 { font-size: var(--fs-hero); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }

p { color: var(--text-muted); max-width: 60ch; }

.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-body);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-dark);
  margin-bottom: 20px;
}

section[data-theme="navy"] .eyebrow { color: var(--gold); }

.eyebrow::before {
  content: '';
  width: 20px;
  height: 1px;
  background: currentColor;
}

/* ---------- Theming ---------- */
[data-theme="navy"] {
  background: var(--navy);
  color: var(--ivory);
}
[data-theme="navy"] p { color: rgba(246, 241, 231, 0.68); }
[data-theme="navy"] h1,
[data-theme="navy"] h2,
[data-theme="navy"] h3 { color: var(--ivory); }

[data-theme="ivory"] { background: var(--ivory); }
[data-theme="stone"] { background: var(--stone); }

/* Packaging module override: keeps its data-theme="ivory" text/eyebrow
   defaults but swaps the ground to the warm sand token so it reads as
   a deliberately different section from Reframe (also ivory) on either
   side of it. Scoped to data-section="products" only — every other
   ivory section (Reframe, Industries, Process, FAQ) and the legal
   pages keep the plain --ivory ground untouched. */
[data-theme="ivory"][data-section="products"] { background: var(--packaging-bg); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 15px 32px;
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: 2px;
  transition: background 0.25s var(--ease), color 0.25s var(--ease), border-color 0.25s var(--ease), transform 0.2s var(--ease);
  white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); }

.btn-gold {
  background: var(--gold);
  color: var(--navy);
}
.btn-gold:hover { background: var(--gold-dark); }

.btn-outline-light {
  border: 1px solid rgba(246, 241, 231, 0.35);
  color: var(--ivory);
}
.btn-outline-light:hover { border-color: var(--gold); color: var(--gold); }

.btn-outline-dark {
  border: 1px solid rgba(28, 32, 39, 0.25);
  color: var(--ink);
}
.btn-outline-dark:hover { border-color: var(--gold-dark); color: var(--gold-dark); }

.cta-row { display: flex; flex-wrap: wrap; gap: 16px; }

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

/* =========================================================
   HEADER / NAVIGATION
   ========================================================= */
.site-header {
  position: sticky;
  top: 0;
  z-index: 200;
  border-bottom: 1px solid transparent;
  transition: background 0.3s var(--ease), color 0.3s var(--ease), border-color 0.3s var(--ease);
}
.site-header[data-theme="navy"] { border-bottom-color: rgba(246, 241, 231, 0.1); }
.site-header[data-theme="ivory"] { border-bottom-color: rgba(28, 32, 39, 0.08); }

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 84px;
}

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.wordmark {
  font-family: var(--font-display);
  font-size: 1.375rem;
  font-weight: 600;
  letter-spacing: 0.04em;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: clamp(20px, 2.4vw, 36px);
}

.nav-links a:not(.btn) {
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  position: relative;
  padding-bottom: 4px;
}

.nav-links a:not(.btn)::after {
  content: '';
  position: absolute;
  left: 0; right: 100%;
  bottom: 0;
  height: 1px;
  background: var(--gold);
  transition: right 0.3s var(--ease);
}
.nav-links a:not(.btn):hover::after { right: 0; }

.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: 10px;
  z-index: 300;
}
.nav-toggle span {
  width: 24px;
  height: 1.5px;
  background: currentColor;
  transition: transform 0.3s var(--ease), opacity 0.3s var(--ease);
}

/* =========================================================
   HERO
   ========================================================= */
.hero {
  position: relative;
  overflow: hidden;
  padding-top: clamp(32px, 6vh, 64px);
  padding-bottom: clamp(28px, 4vh, 48px);
  min-height: clamp(680px, 76vh, 760px);
  display: flex;
  align-items: center;
  /* Approved cinematic water/rock photograph as the actual hero
     background (not a CSS recreation), with two gradient layers on
     top: a left-to-right navy overlay so the headline side stays dark
     and legible while the photo's own water/rock detail on the right
     stays visible, and one restrained radial "stage light" positioned
     behind the product group for photographic separation (not a glow
     around the objects themselves). Layer order matters — gradients
     first (painted on top), photo last (base layer). */
  background-image:
    linear-gradient(100deg, rgba(10,19,32,0.92) 0%, rgba(10,19,32,0.72) 32%, rgba(10,19,32,0.38) 58%, rgba(10,19,32,0.12) 80%, rgba(10,19,32,0.04) 100%),
    radial-gradient(ellipse 640px 460px at 76% 88%, rgba(255,255,255,0.07), transparent 62%),
    url("../assets/hero/clarity-hero-water-background.jpg");
  background-size: cover;
  background-position: center bottom;
  background-repeat: no-repeat;
}

/* Progressive enhancement: swap the base photo layer for the WebP if
   the browser can composite it into a multi-layer background-image
   list (support implies image-set support here). Falls back to the
   universally-supported JPG above otherwise. */
@supports (background-image: image-set(url("x.webp") type("image/webp"))) {
  .hero {
    background-image:
      linear-gradient(100deg, rgba(10,19,32,0.92) 0%, rgba(10,19,32,0.72) 32%, rgba(10,19,32,0.38) 58%, rgba(10,19,32,0.12) 80%, rgba(10,19,32,0.04) 100%),
      radial-gradient(ellipse 640px 460px at 76% 88%, rgba(255,255,255,0.07), transparent 62%),
      image-set(url("../assets/hero/clarity-hero-water-background.webp") type("image/webp"));
  }
}

.hero-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: clamp(32px, 6vw, 64px);
}

.hero-copy h1 { margin-bottom: 24px; }
.hero-copy .lede {
  font-size: clamp(1rem, 0.95rem + 0.4vw, 1.25rem);
  color: rgba(246, 241, 231, 0.72);
  max-width: 46ch;
  margin-bottom: 12px;
}
.hero-copy .hero-brandline {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--gold);
  font-size: 1.05rem;
  margin-bottom: 40px;
}

.hero-visual {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  /* Sized to the bottle's 520-590px visual-height target at 1440px;
     the can is scaled off this same container (see .c-can/.c-bottle
     below) so both land in their target ranges together. */
  height: clamp(520px, 60vh, 590px);
  /* Overrides .hero-grid's own align-items:center for this column only,
     so the products sit grounded near the bottom of the hero (matching
     the water surface in the new background) while the headline column
     stays vertically centered as before. */
  align-self: end;
}

/* Bottle rear/right, can front/left. `order` sets visual left-right
   position independently of DOM order (bottle-figure is first in the
   DOM, so it paints behind by default anyway); z-index makes that
   explicit and guarantees the can stays on top at the overlap seam.
   The negative margin on the bottle (the second/right item) pulls it
   left into the can for the "slight overlap" — as a flex item margin
   this resolves against the container's width, which stays close
   enough to proportional across breakpoints since both figures scale
   with the same container. */
.hero-visual .hero-can-figure {
  order: 1;
  z-index: 2;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.hero-visual .hero-bottle-figure { order: 2; z-index: 1; margin-left: -20px; }

/* Extremely subtle grounding — a soft contact shadow plus a faint
   reflected-light halo, just enough that the products read as
   physically resting on a surface rather than floating. Centred under
   the combined can+bottle group (not just the first flex child) and
   sized to span both. Meant to barely register. */
.hero-visual .can-shadow {
  position: absolute;
  left: 50%;
  bottom: -4px;
  transform: translateX(-50%);
  width: 82%;
  height: 32px;
  background: radial-gradient(ellipse at center, rgba(0,0,0,0.4) 0%, transparent 70%);
  filter: blur(3px);
}
.hero-visual .can-shadow::after {
  content: '';
  position: absolute;
  left: 18%; right: 18%; top: -6px;
  height: 10px;
  background: radial-gradient(ellipse at center, rgba(255,255,255,0.05) 0%, transparent 75%);
  filter: blur(2px);
}

/* Water thread integration point: hero pour zone (Phase 2) */
.water-zone-hero {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

/* =========================================================
   PRODUCT ILLUSTRATIONS — CAN / BOTTLE
   ========================================================= */
.c-can, .c-bottle { filter: drop-shadow(0 30px 40px rgba(0,0,0,0.35)); object-fit: contain; }

/* <picture> defaults to display:inline, which has no resolvable height
   of its own — any height:100% on the <img> inside it can't resolve
   against an inline parent's containing block, so the browser falls
   back to sizing from intrinsic aspect ratio instead (rendering far
   too large). Making <picture> a block that passes through its
   parent's height fixes every height:100% product image at once. */
picture { display: block; height: 100%; }

/* The hero and branding cans' native SVG size (500-560px) doesn't match
   their containers' responsive clamped heights, so without this they
   silently overflow upward — on narrow viewports (where the container
   clamps to its minimum) this pushes the can's top up behind the sticky
   header, hiding its rim entirely. Also (found during Water Thread work)
   throws off the hero can's actual on-screen position that the water
   elements anchor to. Scaling to the container's height keeps the SVG's
   own viewBox aspect ratio intact.
   The bottle is the taller of the pair (matching real relative
   proportions), so it defines the full container height; the can is
   scaled to a shorter percentage so the two read at a believable
   relative scale once bottom-aligned. */
.hero-visual .c-can {
  height: 76%;
  width: auto;
}

.hero-visual .c-bottle {
  height: 100%;
  width: auto;
}

.can-label-bg { transition: fill 0.5s var(--ease); }
.can-label-text { transition: opacity 0.3s var(--ease); }

/* Custom Branding identity swap — a soft cross-fade rather than an
   instant cut, so the artwork change reads as considered, not flashy. */
#brandLabelBg, #brandLabelText, #brandLabelSub {
  transition: opacity 0.22s var(--ease);
}

/* =========================================================
   REFRAME
   ========================================================= */
/* --ivory has since been recalibrated sitewide to this same clean
   off-white (see :root), so Reframe now just uses the shared token —
   one consistent light ground across the site instead of a second
   near-white shade unique to this section. */
.reframe {
  text-align: center;
  padding-top: var(--section-pad);
  padding-bottom: var(--section-pad);
  background: var(--ivory);
}

/* Symmetric gold lines flanking "THE REFRAME" (the shared .eyebrow
   component only has a left-side line elsewhere on the site) —
   scoped to this section so no other eyebrow is affected. */
.reframe .eyebrow { margin-bottom: 32px; }
.reframe .eyebrow::after {
  content: '';
  width: 20px;
  height: 1px;
  background: currentColor;
}

.reframe-statement {
  max-width: 1100px;
  margin: 0 auto;
  font-size: var(--fs-h2);
  line-height: 1.15;
  color: var(--ink);
}

.reframe-statement em {
  font-style: italic;
  color: var(--gold-dark);
}

.reframe-device {
  margin: 64px auto 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  max-width: 900px;
  row-gap: 32px;
}

.reframe-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 0 16px;
  border-left: 1px solid rgba(28, 32, 39, 0.12);
}
.reframe-item:first-child { border-left: none; }

.reframe-icon { width: 32px; height: 32px; }

.reframe-item .label {
  font-family: var(--font-body);
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.reframe-item .label.final { color: var(--gold-dark); font-weight: 700; }

/* =========================================================
   SECTION SHELL
   ========================================================= */
.section { padding-top: var(--section-pad); padding-bottom: var(--section-pad); }
.section-head {
  max-width: 640px;
  margin-bottom: clamp(48px, 6vw, 88px);
}
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }

/* =========================================================
   PRODUCTS
   ========================================================= */
.product-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(24px, 4vw, 40px);
}

.product-panel {
  position: relative;
  border-radius: 3px;
  overflow: hidden;
  padding: clamp(40px, 5vw, 64px) clamp(28px, 4vw, 48px);
  min-height: 560px;
  display: flex;
  flex-direction: column;
}

.product-panel.cans { background: linear-gradient(165deg, #16263B 0%, #0F1B2B 100%); }
.product-panel.bottles { background: var(--bottle-card-bg); } /* solid, distinct from the new --packaging-bg section ground */

/* Normal document flow, not absolute positioning — the figure reserves
   its own height and the copy follows below it. The previous absolute+
   top/62% layout was tuned for a small SVG icon; once swapped for full
   raster product photography it no longer left room for the copy block,
   causing image/text overlap. */
.product-panel .product-figure {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  height: clamp(240px, 30vw, 340px);
  margin-bottom: clamp(28px, 4vw, 44px);
}

/* Can: genuine alpha, sits directly on the navy panel — no frame needed,
   same treatment as the hero/branding cans. */
.product-photo {
  height: 100%;
  width: auto;
  filter: drop-shadow(0 30px 40px rgba(0,0,0,0.35));
}

/* Bottle: the approved photograph has a real studio background baked
   in (no alpha) rather than a transparent cutout — presented honestly
   as a framed product photo instead of faking a cutout it isn't. */
.product-figure--framed { align-items: center; }
.product-photo--framed {
  height: 100%;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  border-radius: 8px;
  box-shadow: 0 24px 48px -12px rgba(15, 27, 43, 0.4);
}

.product-panel h3 { margin-bottom: 12px; }
.product-panel.bottles h3, .product-panel.bottles p { color: var(--ink); }
.product-panel.bottles p { color: var(--text-muted); }
.product-panel.cans h3 { color: var(--ivory); }
.product-panel.cans p { color: rgba(246,241,231,0.68); }
.product-panel.cans .eyebrow { color: var(--gold); }

/* --gold-dark only clears ~3.1–3.6:1 against the new --packaging-bg /
   --bottle-card-bg grounds — below the 4.5:1 AA floor for this
   non-large, bold-uppercase text. --gold-deep restores 4.5:1+ while
   staying in the same gold family. Loses to the two-class
   .product-panel.cans .eyebrow rule above by specificity, so the
   navy can card's lighter --gold stays untouched. */
[data-section="products"] .eyebrow { color: var(--gold-deep); }

.product-panel .btn { align-self: flex-start; margin-top: 20px; }

/* =========================================================
   CUSTOM BRANDING
   ========================================================= */
/* .nav is a fixed 84px tall at every breakpoint (see NAVIGATION below),
   so a direct anchor-jump to #custom-branding — the nav link, or any
   #custom-branding URL — landed with the section flush against the
   viewport top, hidden behind the sticky header. 84px header + 24px
   breathing room. */
#custom-branding { scroll-margin-top: 108px; }

/* Same fix, same reason, for the FAQ section — the footer's "FAQs" link
   and any #faq URL landed flush behind the sticky header otherwise. */
#faq { scroll-margin-top: 108px; }

/* Same fix, same reason — every "Get a Quote"/"Request Samples" CTA on
   the site anchors here, so this is the highest-traffic instance of the
   header-clearance gap. */
#final-cta { scroll-margin-top: 108px; }

/* Five brand identities shown together — customisation demonstrated
   at a glance, not via a cross-fading single can + text list. */
.brand-showcase {
  margin-top: clamp(48px, 6vw, 80px);
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: clamp(16px, 2.2vw, 32px);
  align-items: end;
}

.brand-card {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.brand-card-img {
  height: clamp(220px, 22vw, 340px);
  width: auto;
  max-width: 100%;
  filter: drop-shadow(0 24px 32px rgba(0,0,0,0.4));
}

.brand-card figcaption {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.brand-card .name {
  font-family: var(--font-display);
  font-size: 1.1rem;
  color: var(--ivory);
}

.brand-card .kind {
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: rgba(246,241,231,0.62);
}

.branding-note {
  margin-top: 28px;
  font-size: 0.875rem;
  color: rgba(246,241,231,0.62);
  font-style: italic;
}

/* =========================================================
   INDUSTRIES
   ========================================================= */
.industry-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  background: var(--ink);
}

.industry-tile {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  padding: 24px;
}

.industry-tile::before {
  content: '';
  position: absolute; inset: 0;
  background: var(--tile-bg, linear-gradient(160deg, #223349, #0F1B2B));
  transition: transform 0.6s var(--ease);
}
.industry-tile:hover::before { transform: scale(1.06); }

.industry-tile::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(0deg, rgba(15,27,43,0.75) 0%, transparent 55%);
}

.industry-tile span {
  position: relative;
  z-index: 1;
  color: var(--ivory);
  font-family: var(--font-display);
  font-size: 1.15rem;
}

/* =========================================================
   SUSTAINABILITY
   ========================================================= */
.sustain-intro { max-width: 640px; }

/* Approved Glass+Aluminium vs Plastic comparison infographic. It's the
   primary visual for the section — no duplicate copy is placed around
   it, since it carries its own headings/labels/callouts. */
.material-comparison-figure {
  margin: clamp(40px, 5vw, 64px) 0 0;
}
.material-comparison-figure img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1536 / 1024;
  border-radius: 8px;
  box-shadow: 0 24px 48px -12px rgba(28, 32, 39, 0.18);
}
.comparison-scroll-hint {
  display: none;
  margin-top: 10px;
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  text-align: right;
}

/* =========================================================
   PROCESS
   ========================================================= */
.process-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  position: relative;
}

.process-row::before {
  content: '';
  position: absolute;
  top: 20px;
  left: 6%;
  right: 6%;
  height: 1px;
  background: repeating-linear-gradient(90deg, rgba(28,32,39,0.15) 0 8px, transparent 8px 16px);
  z-index: 0;
}

.process-step { position: relative; z-index: 1; }

.process-step .num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--ivory);
  border: 1px solid var(--sand);
  font-family: var(--font-display);
  font-size: 0.95rem;
  color: var(--gold-dark);
  margin-bottom: 20px;
}

.process-step h4 {
  font-family: var(--font-display);
  font-size: 1.15rem;
  margin-bottom: 8px;
  color: var(--ink);
}
.process-step p { font-size: 0.9rem; }

/* =========================================================
   FAQ
   ========================================================= */
.faq-list {
  max-width: 720px;
  margin: 0 auto;
}

.faq-entry {
  padding: 28px 0;
  border-top: 1px solid rgba(28,32,39,0.12);
}
.faq-entry:first-child { border-top: none; padding-top: 0; }

.faq-entry h3 {
  font-family: var(--font-display);
  font-size: 1.15rem;
  margin-bottom: 8px;
  color: var(--ink);
}
.faq-entry p { font-size: 0.95rem; margin: 0; }

/* =========================================================
   FINAL CTA
   ========================================================= */
.final-cta {
  position: relative; /* .water-zone-hero (data-water-zone="resolution") needs a positioned ancestor here, same as .hero has, or it resolves against <main> instead */
  text-align: center;
  padding-top: var(--section-pad);
  padding-bottom: var(--section-pad);
}
.final-cta h2 { max-width: 780px; margin: 0 auto 32px; }

/* ---------- Get a Quote form ---------- */
.quote-legend {
  text-align: right;
  max-width: 720px;
  margin: 0 auto 8px;
  font-size: 0.75rem;
  color: rgba(246, 241, 231, 0.45);
}

.quote-form {
  max-width: 720px;
  margin: 0 auto;
  text-align: left;
}

.quote-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px 24px;
}

.quote-field--full { grid-column: 1 / -1; }

.quote-field label {
  display: block;
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(246, 241, 231, 0.8);
  margin-bottom: 8px;
}
.quote-field .req { color: var(--gold); }
.quote-field .opt {
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
  color: rgba(246, 241, 231, 0.4);
  font-size: 0.75rem;
}

.quote-field input,
.quote-field select,
.quote-field textarea {
  width: 100%;
  padding: 13px 14px;
  background: rgba(246, 241, 231, 0.06);
  border: 1px solid rgba(246, 241, 231, 0.22);
  border-radius: 2px;
  color: var(--ivory);
  font-family: var(--font-body);
  font-size: 0.95rem;
  transition: border-color 0.2s var(--ease), background 0.2s var(--ease);
}
.quote-field input::placeholder,
.quote-field textarea::placeholder { color: rgba(246, 241, 231, 0.35); }

.quote-field select { color-scheme: dark; }
.quote-field select option { color: var(--ink); }

.quote-field input:hover,
.quote-field select:hover,
.quote-field textarea:hover { border-color: rgba(246, 241, 231, 0.35); }

.quote-field input:focus,
.quote-field select:focus,
.quote-field textarea:focus {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
  border-color: var(--gold);
  background: rgba(246, 241, 231, 0.09);
}

.quote-field textarea { resize: vertical; min-height: 110px; }

.quote-field.has-error input,
.quote-field.has-error select,
.quote-field.has-error textarea { border-color: #E2726E; }

.quote-error {
  display: none;
  color: #E2988F;
  font-size: 0.8rem;
  margin-top: 6px;
}
.quote-field.has-error .quote-error { display: block; }

.quote-form-footer {
  margin-top: 36px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  text-align: center;
}

.quote-privacy {
  font-size: 0.8125rem;
  color: rgba(246, 241, 231, 0.55);
  max-width: 46ch;
}
.quote-privacy a { color: var(--gold); }
.quote-privacy a:hover { color: var(--gold-dark); }

.quote-status {
  margin-top: 22px;
  text-align: center;
  font-size: 0.9rem;
  color: var(--ivory);
  max-width: 52ch;
  margin-left: auto;
  margin-right: auto;
}
.quote-status a { color: var(--gold); text-decoration: underline; }

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer {
  background: var(--navy);
  color: rgba(246,241,231,0.65);
  padding: clamp(56px, 8vw, 96px) 0 32px;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.3fr repeat(4, 1fr);
  gap: 32px;
  padding-bottom: 56px;
  border-bottom: 1px solid rgba(246,241,231,0.12);
}

.footer-brand .wordmark { color: var(--ivory); margin-bottom: 16px; display: block; }
.footer-brand p { max-width: 32ch; font-size: 0.9rem; color: rgba(246,241,231,0.62); }

.footer-col h5 {
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 18px;
}
.footer-col ul { display: flex; flex-direction: column; gap: 12px; }
.footer-col a { font-size: 0.9rem; }
.footer-col a:hover { color: var(--gold); }

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 28px;
  font-size: 0.8rem;
  flex-wrap: wrap;
  gap: 12px;
}

.footer-social { display: flex; gap: 20px; }

/* =========================================================
   MOBILE NAV OVERLAY
   ========================================================= */
.mobile-nav {
  position: fixed;
  inset: 0;
  background: var(--navy);
  z-index: 250;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 var(--gutter);
  transform: translateY(-100%);
  transition: transform 0.45s var(--ease);
}
.mobile-nav.open { transform: translateY(0); }

.mobile-nav a {
  display: block;
  font-family: var(--font-display);
  font-size: 2rem;
  color: var(--ivory);
  padding: 14px 0;
  border-bottom: 1px solid rgba(246,241,231,0.1);
}

.mobile-nav .btn { margin-top: 32px; }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 960px) {
  .hero-grid { grid-template-columns: 1fr; text-align: left; }
  /* No "order: -1" here, deliberately — the copy (slogan, proposition,
     CTAs) must read before the product visual on narrow screens, per
     the approved mobile hierarchy. Natural DOM order already puts
     .hero-copy before .hero-visual. */
  /* Slightly taller than the single-can era so the bottle (now paired
     with the can) still reads at a premium scale rather than shrinking
     both products into insignificance; they're allowed to overlap more
     tightly to stay compact. */
  .hero-visual { height: clamp(300px, 46vh, 440px); }
  .hero-visual .hero-bottle-figure { margin-left: -22px; }

  /* The desktop overlay/stage-light geometry assumes a left-copy /
     right-product two-column layout. Once the grid stacks to one
     column, copy and products share the same horizontal band, so a
     left-to-right darkening gradient stops making sense (the text's
     own right-hand edge would fall in the "lighter" zone) and the
     stage light — tuned to sit behind the right-column product spot —
     floats disconnected above the now horizontally-centred products.
     Swap to a top-to-bottom overlay (dark behind the text at top,
     lighter toward the grounded products at bottom) and recentre the
     stage light under the product group. */
  .hero {
    background-image:
      linear-gradient(180deg, rgba(10,19,32,0.88) 0%, rgba(10,19,32,0.8) 38%, rgba(10,19,32,0.4) 62%, rgba(10,19,32,0.18) 100%),
      radial-gradient(ellipse 70% 220px at 50% 94%, rgba(255,255,255,0.07), transparent 65%),
      url("../assets/hero/clarity-hero-water-background.jpg");
    background-position: center bottom;
  }
  @supports (background-image: image-set(url("x.webp") type("image/webp"))) {
    .hero {
      background-image:
        linear-gradient(180deg, rgba(10,19,32,0.88) 0%, rgba(10,19,32,0.8) 38%, rgba(10,19,32,0.4) 62%, rgba(10,19,32,0.18) 100%),
        radial-gradient(ellipse 70% 220px at 50% 94%, rgba(255,255,255,0.07), transparent 65%),
        image-set(url("../assets/hero/clarity-hero-water-background.webp") type("image/webp"));
    }
  }

  /* Tablet: 3 + 2, with the shorter second row centred. A CSS grid
     can't centre a partial last row on its own, so this switches to a
     wrapping flex row instead — each card takes a fixed share of the
     width (3 per row) and justify-content:center naturally centres
     whatever's left on the final row. Overridden again below 640px for
     the mobile scroll-snap treatment. */
  .brand-showcase {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    row-gap: clamp(32px, 5vw, 56px);
  }
  .brand-card { flex: 0 1 30%; min-width: 160px; }

  .product-split { grid-template-columns: 1fr; }
  .product-panel {
    min-height: 0;
    padding-top: 40px;
  }
  .product-panel .product-figure {
    height: clamp(200px, 50vw, 280px);
    margin-bottom: 32px;
  }

  .industry-grid { grid-template-columns: repeat(2, 1fr); }

  .process-row { grid-template-columns: repeat(2, 1fr); row-gap: 40px; }
  .process-row::before { display: none; }

  .footer-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-brand { grid-column: 1 / -1; }
}

@media (max-width: 900px) {
  .nav-links { display: none; }
  .nav-toggle { display: flex; }
}

@media (max-width: 640px) {

  .industry-grid { grid-template-columns: 1fr 1fr; }
  .industry-tile { aspect-ratio: 3 / 4; }

  .quote-form-grid { grid-template-columns: 1fr; }
  .quote-legend, .quote-form { max-width: none; }

  /* Mobile: the infographic's embedded text is fine enough that
     shrinking the whole image to fit the viewport would make it
     unreadable, so it's shown at a fixed, legible width inside a
     horizontally-scrollable viewport instead (Option A) — the
     scroll stays contained to this component, never the page. The
     visible native scrollbar plus the "Scroll to explore" caption
     are the subtle affordance that there's more to see. */
  .material-comparison-figure {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-left: calc(-1 * var(--gutter));
    margin-right: calc(-1 * var(--gutter));
    padding: 0 var(--gutter);
  }
  .material-comparison-figure img {
    width: 900px;
    max-width: none;
  }
  .comparison-scroll-hint {
    display: block;
    padding-right: var(--gutter);
  }

  .process-row { grid-template-columns: 1fr; }

  /* Mobile: an accessible horizontal scroll-snap gallery rather than a
     tall single-column stack — no external carousel dependency, just
     overflow-x + scroll-snap. Each card is ~78vw so one can shows fully
     with a hint of the next peeking in; side padding lets the first/
     last cards centre in the viewport at their snap point. */
  .brand-showcase {
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: 16px;
    padding: 4px 24vw 12px;
    margin-left: calc(-1 * var(--gutter));
    margin-right: calc(-1 * var(--gutter));
    scrollbar-width: none;
  }
  .brand-showcase::-webkit-scrollbar { display: none; }
  /* Narrower than a naive "one card = one screen" split: the can art
     itself is tall and slim, so a card sized to the full viewport width
     leaves the neighbouring card's peek entirely inside its own empty
     side-margin — no actual can visible, just more background. Sizing
     the card closer to the can's own footprint means the peek strip
     reaches far enough to show a real edge of the next can. */
  .brand-card { flex: 0 0 52vw; min-width: 0; scroll-snap-align: center; }
  .brand-card-img { height: clamp(260px, 72vw, 380px); }

  .footer-grid { grid-template-columns: 1fr; }

  /* 5 items in a single row gets cramped under 640px — reflow into a
     clean 3-over-2 grid rather than a full single-column stack, so
     dividers and alignment stay legible. The border-left divider that
     normally marks "start of a row" (:first-child, above) needs the
     same treatment reapplied to whichever item now leads row two. */
  .reframe-device { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 28px; }
  .reframe-item:nth-child(3n+1) { border-left: none; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}