/* ==========================================================
   Flowstate Drinks - site stylesheet (light theme)
   Source of truth: reference/brand-kit.md v2.1
   Canvas: White / Light Mint. Teal carries the brand; Cyan is
   accent. SKU anchors (Deep Plum / Deep Blue) used for product
   panels. Gradient reserved for small flourishes only.
   ========================================================== */

@font-face {
  font-family: 'Bebas Neue';
  src: url('../assets/fonts/BebasNeue-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Questrial';
  src: url('../assets/fonts/Questrial-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --teal: #009C97;
  --cyan: #03FFF6;
  --mint: #E3FDFD;
  --black: #111111;
  --grey: #2A2A2A;
  --white: #FFFFFF;
  /* SKU palettes */
  --beauty-anchor: #490A39;
  --beauty-comp: #EF4923;
  --electro-anchor: #1F3D75;
  --electro-comp: #FBD7DE;
  /* brand gradient - flourish only */
  --grad: linear-gradient(90deg, #6AE70E, #08FDED, #0072ED);
  --display: 'Bebas Neue', sans-serif;
  --body: 'Questrial', sans-serif;
  --maxw: 1320px;
}

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

html { scroll-behavior: smooth; }

body {
  font-family: var(--body);
  background: var(--white);
  color: var(--black);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, .display {
  font-family: var(--display);
  font-weight: 400;            /* one weight only - never bold */
  letter-spacing: 0.02em;
  line-height: 1.05;
}

h1 { font-size: clamp(44px, 7vw, 84px); }
h2 { font-size: clamp(32px, 4.5vw, 52px); }
h3 { font-size: clamp(22px, 2.6vw, 30px); }
h4 { font-size: 20px; }

p { max-width: 72ch; }

a { color: var(--teal); text-decoration: none; }
a:hover { color: #007a76; }

img { max-width: 100%; display: block; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }

.eyebrow {
  font-family: var(--body);
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-size: 12px;
  color: var(--teal);
  display: block;
  margin-bottom: 16px;
}

/* gradient flourish - thin rule only, never a background */
.flourish {
  width: 72px; height: 3px; border: 0;
  background: var(--grad);
  margin: 20px 0 0;
}

/* ---------- header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--mint);
  border-bottom: 1px solid rgba(17,17,17,0.08);
}
.site-header .wrap {
  display: flex; align-items: center; justify-content: space-between;
  height: 76px;
}
.site-header .logo img { height: 44px; width: auto; }
.site-nav { display: flex; align-items: center; gap: 28px; }
.site-nav a {
  color: var(--black);
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
}
.site-nav a:hover, .site-nav a[aria-current="page"] { color: var(--teal); }
.site-nav .btn { color: var(--white); }
.site-nav .btn:hover { color: var(--black); }

.nav-toggle { display: none; background: none; border: 0; color: var(--black); font-size: 26px; cursor: pointer; }

@media (max-width: 820px) {
  .nav-toggle { display: block; }
  .site-nav {
    display: none;
    position: absolute; top: 76px; left: 0; right: 0;
    background: var(--mint);
    flex-direction: column; align-items: flex-start;
    padding: 24px; gap: 20px;
    border-bottom: 1px solid rgba(17,17,17,0.1);
  }
  .site-nav.open { display: flex; }
}

/* ---------- buttons ---------- */
.btn {
  display: inline-block;
  font-family: var(--body);
  font-size: 15px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 14px 28px;
  border-radius: 4px;
  background: var(--teal);
  color: var(--white);
  transition: background 0.15s ease, color 0.15s ease;
  border: 0;
  cursor: pointer;
}
.btn:hover { background: var(--cyan); color: var(--black); }
.btn.ghost {
  background: transparent;
  color: var(--black);
  border: 1px solid rgba(17,17,17,0.35);
}
.btn.ghost:hover { border-color: var(--teal); color: var(--teal); background: transparent; }

/* ---------- sections ---------- */
section { padding: 88px 0; }

.hero { padding: 40px 0 88px; }
.hero h1 { max-width: none; font-size: clamp(31px, 3.7vw, 50px); }
.hero-copy {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 48px;
  align-items: start;
  margin-top: 18px;
}
@media (max-width: 860px) { .hero-copy { grid-template-columns: 1fr; gap: 24px; } }
@media (max-width: 560px) {
  .hero h1 { font-size: clamp(19px, 7.9vw, 42px); }
  .hero h1 br { display: none; }
}
.hero-copy .lede { margin-top: 6px; max-width: none; }
.hero .sub {
  font-family: var(--display);
  font-size: clamp(20px, 2.6vw, 30px);
  letter-spacing: 0.06em;
  color: var(--teal);
  margin-top: 18px;
}
.hero p.lede { margin-top: 24px; font-size: 17px; color: rgba(17,17,17,0.8); }
.hero .cta-row { margin-top: 28px; display: flex; gap: 16px; flex-wrap: wrap; }

.on-mint { background: var(--mint); }
.on-cyan { background: #66F3EE; }
.on-cyan .eyebrow { color: rgba(17,17,17,0.7); }

/* dark palette blocks - Near Black and Flowstate Teal */
.on-dark { background: var(--black); color: var(--white); }
.on-dark .eyebrow { color: var(--cyan); }
.on-dark p { color: rgba(255,255,255,0.85); }
.on-dark p a { color: var(--cyan); }
.on-dark .smallprint { color: rgba(255,255,255,0.6); }

.on-teal { background: var(--teal); color: var(--white); }
.on-teal .eyebrow { color: var(--mint); }
.on-teal p { color: rgba(255,255,255,0.92); }
.on-teal .smallprint { color: rgba(255,255,255,0.75); }

/* home: what-we-do (teal canvas, cyan headings, image right) */
#what-we-do .eyebrow { color: #03FFF6; }
#what-we-do h2 { color: #03FFF6; }
.split-row {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 44px;
  align-items: stretch;
}
@media (max-width: 860px) { .split-row { grid-template-columns: 1fr; } }
.split-row .img-slot { margin-top: 0; aspect-ratio: auto; min-height: 300px; height: 100%; }
@media (max-width: 860px) { .split-row .img-slot { height: auto; } }


/* hero: full-bleed product shot above the copy */
.hero-shot { width: 100%; margin-bottom: 56px; }
.hero-shot img { display: block; width: 100%; height: auto; }
@media (max-width: 860px) { .hero-shot { margin-bottom: 36px; } }
/* mobile: crop the dead background, not the products, so the packs fill the frame.
   The visible window stays 1514x1030 of the 2400x1030 source at any width, which
   keeps the full product group (x 564-1986) inside it with a small margin. */
@media (max-width: 700px) {
  .hero-shot img { aspect-ratio: 1.47; object-fit: cover; object-position: 58% center; }
}

/* home: market hook */
#market-hook h2 { color: var(--white); }
section#market-hook .card h3 { color: #03FFF6; }

/* dark teal block */
.on-deep { background: #00524F; color: var(--white); }
.on-deep .eyebrow { color: var(--cyan); }
.on-deep p { color: rgba(255,255,255,0.92); }
.on-deep p a { color: var(--cyan); }
.on-deep .smallprint { color: rgba(255,255,255,0.75); }

/* ---------- cards ---------- */
.card-grid { display: grid; gap: 20px; margin-top: 44px; }
.card-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.card-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 860px) { .card-grid.cols-3, .card-grid.cols-2 { grid-template-columns: 1fr; } }

.card {
  background: var(--white);
  border-radius: 8px;
  padding: 32px 28px;
  border: 1px solid rgba(17,17,17,0.1);
  box-shadow: 0 2px 10px rgba(17,17,17,0.04);
}
.card h3 { color: var(--black); margin-bottom: 12px; }
.card p { font-size: 15.5px; color: rgba(17,17,17,0.8); }

section:not(.on-mint):not(.on-cyan):not(.on-dark):not(.on-teal):not(.on-deep) .card { background: var(--mint); border-color: rgba(0,156,151,0.18); }

section.on-dark .card { background: var(--grey); border-color: rgba(255,255,255,0.08); box-shadow: none; }
section.on-dark .card h3 { color: var(--white); }
section.on-dark .card p { color: rgba(255,255,255,0.8); }
section.on-teal .card, section.on-deep .card { background: var(--white); border-color: rgba(255,255,255,0.4); box-shadow: none; }
section.on-teal .card h3, section.on-deep .card h3 { color: var(--black); }
section.on-teal .card p, section.on-deep .card p { color: rgba(17,17,17,0.8); }

/* ---------- SKU tiles ---------- */
.sku-tile {
  border-radius: 10px;
  padding: 40px 32px;
  color: var(--white);
  display: flex; flex-direction: column; gap: 14px;
}
.sku-tile.beauty { background: var(--beauty-anchor); }
.sku-tile.electrolytes { background: var(--electro-anchor); }
.sku-tile .tags {
  font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase;
}
.sku-tile.beauty .tags { color: var(--beauty-comp); }
.sku-tile.electrolytes .tags { color: var(--electro-comp); }
.sku-tile h3 { font-size: clamp(28px, 3.4vw, 40px); color: var(--white); }
.sku-tile .claim {
  font-style: italic;
  font-size: 15.5px;
  border-left: 3px solid rgba(255,255,255,0.35);
  padding-left: 14px;
  color: rgba(255,255,255,0.92);
}
.sku-tile p { font-size: 15.5px; color: rgba(255,255,255,0.85); }

.smallprint {
  margin-top: 28px;
  font-size: 13px;
  line-height: 1.6;
  color: rgba(17,17,17,0.6);
  max-width: none;
}

/* ---------- home: new copy blocks ---------- */
.link-more {
  font-size: 15.5px;
  color: var(--teal);
  border-bottom: 1px solid rgba(0,156,151,0.4);
  padding-bottom: 2px;
  text-decoration: none;
}
.link-more:hover { border-bottom-color: var(--teal); }
.on-dark .link-more, .on-teal .link-more { color: var(--cyan); border-bottom-color: rgba(3,255,246,0.45); }
.steps.steps-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 860px) { .steps.steps-3 { grid-template-columns: 1fr; } }
.pullquote {
  font-family: var(--display);
  font-size: clamp(21px, 2.3vw, 32px);
  line-height: 1.2;
  letter-spacing: 0.02em;
  color: var(--cyan);
  margin-top: 44px;
  max-width: 58ch;
}
.on-dark .pullquote { color: var(--cyan); }
.step-shots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 44px; }
@media (max-width: 860px) { .step-shots { grid-template-columns: 1fr; } }
.step-shot {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  background-image: url('../assets/photography/serve-build.webp');
  background-size: 400% auto;
  background-position: var(--frame) center;
  background-repeat: no-repeat;
}
.step-shot::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(17,17,17,0.94) 4%, rgba(17,17,17,0.6) 34%, rgba(17,17,17,0) 66%);
}
.step-shot-copy { position: relative; z-index: 1; padding: 28px 26px; }
.step-shot .n {
  display: block;
  font-family: var(--display);
  font-size: 34px;
  line-height: 1;
  color: var(--cyan);
}
.step-shot h4 { color: var(--white); margin: 8px 0 8px; }
.step-shot p { font-size: 14.5px; line-height: 1.6; color: rgba(255,255,255,0.88); }

.stat-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 44px; }
@media (max-width: 860px) { .stat-row { grid-template-columns: 1fr; } }
.stat {
  background: var(--mint);
  border: 1px solid rgba(0,156,151,0.18);
  border-radius: 10px;
  padding: 30px 26px;
}
.stat-figure {
  display: block;
  font-family: var(--display);
  font-size: clamp(44px, 5vw, 64px);
  line-height: 1;
  letter-spacing: 0.02em;
  color: var(--teal);
}
.stat-label { margin-top: 14px; font-size: 15.5px; line-height: 1.6; color: rgba(17,17,17,0.8); }
.stat-source {
  margin-top: 12px;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(17,17,17,0.45);
}
.cta-centred { margin-top: 36px; display: flex; justify-content: center; }
.emphasis { margin-top: 20px; font-size: 17px; color: var(--teal); }
section .emphasis { color: var(--teal); }
.sku-tile .dose-label {
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
  margin-top: 4px;
}
.sku-tile .dose-list { font-size: 14.5px; line-height: 1.7; color: rgba(255,255,255,0.92); }
.sku-tile .suitability { font-size: 13.5px; color: rgba(255,255,255,0.62); }

/* ---------- hub ---------- */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 40px; }
@media (max-width: 860px) { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .steps { grid-template-columns: 1fr; } }
.step { background: var(--mint); border-radius: 8px; padding: 26px 22px; }
.step .n {
  font-family: var(--display);
  font-size: 34px;
  color: var(--teal);
  display: block; margin-bottom: 8px;
}
.step h4 { margin-bottom: 8px; }
.step p { font-size: 14.5px; color: rgba(17,17,17,0.8); }

.on-dark .step { background: var(--grey); }
.on-dark .step h4 { color: var(--white); }
.on-dark .step .n { color: var(--cyan); }
.on-dark .step p { color: rgba(255,255,255,0.8); }

.spec-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.spec-row span {
  font-size: 12.5px; letter-spacing: 0.14em; text-transform: uppercase;
  background: rgba(0,156,151,0.1);
  color: var(--teal);
  border: 1px solid rgba(0,156,151,0.4);
  border-radius: 999px;
  padding: 8px 16px;
}
.on-dark .spec-row span {
  background: rgba(3,255,246,0.08);
  color: var(--cyan);
  border-color: rgba(3,255,246,0.4);
}

/* ---------- claims panels ---------- */
/* the two SKU claim panels sit side by side */
.claims-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  margin-top: 32px;
}
@media (max-width: 900px) { .claims-grid { grid-template-columns: 1fr; } }
.claims-grid .claims-panel { margin-top: 0; }

.claims-panel {
  border-radius: 10px;
  padding: 36px 32px;
  margin-top: 32px;
  color: var(--white);
}
.claims-panel.beauty { background: var(--beauty-anchor); }
.claims-panel.electrolytes { background: var(--electro-anchor); }
.claims-panel h3 { margin-bottom: 6px; }
.claims-panel.beauty h3 { color: var(--beauty-comp); }
.claims-panel.electrolytes h3 { color: var(--electro-comp); }
.claims-panel .basis { font-size: 14px; color: var(--mint); margin-bottom: 20px; }
.claims-panel ul { list-style: none; }
.claims-panel li {
  padding: 10px 0 10px 26px;
  position: relative;
  font-size: 15.5px;
  max-width: 72ch;
}
.claims-panel.beauty li { color: var(--mint); border-bottom: 1px solid var(--beauty-comp); }
.claims-panel.electrolytes li { color: var(--mint); border-bottom: 1px solid var(--electro-comp); }
.claims-panel li:last-child { border-bottom: 0; }
.claims-panel li::before {
  content: "✓";
  position: absolute; left: 0;
  color: var(--cyan);
}

.dont-panel {
  margin-top: 32px;
  border: 1.5px solid var(--beauty-comp);
  border-radius: 10px;
  padding: 32px;
  background: var(--white);
}
.dont-panel h3 { color: var(--beauty-comp); margin-bottom: 14px; }
/* two columns so the list reads top-to-bottom down the left, then the right */
.dont-panel ul { list-style: none; columns: 2; column-gap: 40px; }
@media (max-width: 900px) { .dont-panel ul { columns: 1; } }
.dont-panel li {
  padding: 8px 0 8px 26px; position: relative; font-size: 15.5px;
  color: rgba(17,17,17,0.85);
  max-width: 72ch;
  break-inside: avoid;
}
.dont-panel li::before { content: "✕"; position: absolute; left: 0; color: var(--beauty-comp); }

/* ---------- menu one-liners ---------- */
.liner-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 40px;
  margin-top: 48px;
}
@media (max-width: 860px) { .liner-grid { grid-template-columns: 1fr; } }
.liner-head { display: flex; align-items: center; gap: 18px; margin-bottom: 18px; flex-wrap: wrap; }
.liner-head .liner-eyebrow {
  font-family: var(--display);
  font-size: clamp(26px, 3vw, 36px);
  letter-spacing: 0.04em;
  color: var(--white);
}
.pill {
  display: inline-block;
  border-radius: 999px;
  padding: 10px 28px;
  font-size: 14px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.pill.beauty { background: var(--beauty-anchor); color: var(--beauty-comp); border: 1px solid var(--beauty-comp); }
.pill.electrolytes { background: var(--electro-anchor); color: var(--white); border: 1px solid var(--white); }
/* both columns stretch to the taller one, so the two quote boxes match */
.liner-grid > div { display: flex; flex-direction: column; }
.liner-grid .liner-quote { flex: 1 1 auto; justify-content: center; }

.liner-quote {
  border-radius: 8px;
  padding: 28px 30px;
  color: var(--white);
  font-size: 16px;
  display: flex;
  flex-direction: column;
}
.liner-quote p { color: rgba(255,255,255,0.95); }
.liner-quote.beauty { background: var(--beauty-anchor); }
.liner-quote.electrolytes { background: var(--electro-anchor); }
.liner-note {
  margin-top: 16px;
  background: rgba(0,156,151,0.32);
  border-radius: 10px;
  padding: 22px 24px;
  display: flex; gap: 16px; align-items: flex-start;
}
.liner-note .arrow {
  flex: 0 0 auto;
  width: 34px; height: 34px; border-radius: 50%;
  border: 1.5px solid var(--white);
  color: var(--white);
  display: flex; align-items: center; justify-content: center;
  font-size: 16px;
}
.liner-note p { font-size: 15px; color: var(--white); }

/* toolkit section (teal canvas, cyan headings, soft mint blocks) */
#toolkit .eyebrow { color: #03FFF6; }
#toolkit h2 { color: #03FFF6; }
#toolkit .wrap > p:not(.smallprint) { color: var(--mint); }
section#toolkit .card {
  background: rgba(227,253,253,0.6);
  border: 0;
  border-radius: 24px;
  box-shadow: none;
  padding: 38px 32px;
}
section#toolkit .card h3 { color: var(--black); }
section#toolkit .card p { color: rgba(17,17,17,0.85); }

/* FAQ */
.faq { margin-top: 36px; display: grid; gap: 14px; }
.faq details {
  background: var(--mint);
  border-radius: 8px;
  border: 1px solid rgba(0,156,151,0.2);
}
.faq summary {
  cursor: pointer;
  padding: 20px 24px;
  font-family: var(--display);
  font-size: 20px;
  letter-spacing: 0.03em;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; float: right; color: var(--teal); font-size: 22px; }
.faq details[open] summary::after { content: "–"; }
.faq .a { padding: 0 24px 22px; font-size: 15.5px; color: rgba(17,17,17,0.85); }
.faq .a p { margin-bottom: 10px; }

/* ---------- forms ---------- */
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  align-items: stretch;
}
@media (max-width: 860px) { .form-row { grid-template-columns: 1fr; } }
.form-row .img-slot { margin-top: 0; aspect-ratio: auto; min-height: 320px; height: 100%; }
.form-card {
  background: var(--mint);
  border-radius: 10px;
  padding: 40px 36px;
  max-width: 640px;
  border: 1px solid rgba(0,156,151,0.25);
}
.form-card label {
  display: block;
  font-size: 12.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(17,17,17,0.7);
  margin: 22px 0 8px;
}
.form-card label:first-of-type { margin-top: 0; }
.form-card input, .form-card select, .form-card textarea {
  width: 100%;
  background: var(--white);
  border: 1px solid rgba(17,17,17,0.2);
  border-radius: 6px;
  color: var(--black);
  font-family: var(--body);
  font-size: 16px;
  padding: 13px 14px;
}
.form-card input:focus, .form-card select:focus, .form-card textarea:focus {
  outline: none;
  border-color: var(--teal);
}
.form-card .btn { margin-top: 30px; width: 100%; }
.next-step { margin-top: 20px; font-size: 14px; color: #2A2A2A; }
.on-dark .form-card p.next-step, .on-deep .form-card p.next-step { color: #2A2A2A; }

.hidden { display: none; }

/* ---------- image placeholders (swap for real shots) ---------- */
.img-slot {
  border: 1.5px dashed rgba(17,17,17,0.3);
  border-radius: 10px;
  background: rgba(17,17,17,0.03);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 24px;
}
.img-slot .slot-label {
  font-size: 12.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1.9;
  color: rgba(17,17,17,0.55);
  max-width: 44ch;
}
.img-slot .slot-label strong {
  display: block;
  font-family: var(--display);
  font-size: 19px;
  letter-spacing: 0.06em;
  color: var(--teal);
  margin-bottom: 6px;
  font-weight: 400;
}
.img-slot.wide { aspect-ratio: 21 / 9; width: 100%; margin-top: 56px; }
.img-slot.landscape { aspect-ratio: 16 / 9; width: 100%; margin-top: 40px; }
.img-slot.portrait { aspect-ratio: 4 / 5; width: 100%; }
@media (max-width: 640px) { .img-slot.wide { aspect-ratio: 4 / 3; } }

.on-dark .img-slot, .on-teal .img-slot, .on-deep .img-slot { border-color: rgba(255,255,255,0.4); background: rgba(255,255,255,0.05); }
.on-dark .img-slot .slot-label, .on-teal .img-slot .slot-label, .on-deep .img-slot .slot-label { color: rgba(255,255,255,0.65); }
.on-dark .img-slot .slot-label strong, .on-deep .img-slot .slot-label strong { color: var(--cyan); }
.on-teal .img-slot .slot-label strong { color: var(--mint); }

/* slots inside SKU tiles sit on the anchor colour */
.sku-tile .img-slot { border-color: rgba(255,255,255,0.35); background: rgba(255,255,255,0.05); margin-bottom: 6px; }
.sku-tile .img-slot .slot-label { color: rgba(255,255,255,0.6); }
.sku-tile .img-slot .slot-label strong { color: var(--cyan); }

/* ---------- filled photo slots (real shots, not placeholders) ---------- */
.img-slot.photo {
  border: none;
  background: none;
  padding: 0;
  display: block;
  overflow: hidden;
  aspect-ratio: auto;
  border-radius: 10px;
}
.img-slot.photo img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 10px;
}
/* photos keep their own proportions inside a split row instead of stretching */
.split-row .img-slot.photo { height: auto; min-height: 0; align-self: center; }
.on-dark .img-slot.photo, .on-teal .img-slot.photo, .on-deep .img-slot.photo,
.sku-tile .img-slot.photo { border-color: transparent; background: none; }
/* breathing room when a photo follows a block of cards or steps */
.steps + .img-slot.photo, .card-grid + .img-slot.photo { margin-top: 44px; }

/* ---------- footer (unified CTA + links) ---------- */
.site-footer {
  background: var(--mint);
  border-top: 1px solid rgba(17,17,17,0.08);
  padding: 64px 0 40px;
  font-size: 14px;
  color: rgba(17,17,17,0.7);
}
.footer-cta {
  display: flex; align-items: center; gap: 36px; flex-wrap: wrap;
  padding-bottom: 44px;
  border-bottom: 1px solid rgba(17,17,17,0.12);
  margin-bottom: 44px;
}
/* headline left, button right, logo on its own line beneath both.
   Ordered in CSS so the shared footer markup stays identical on every page. */
.footer-cta h2 { order: 1; flex: 1 1 320px; max-width: 20ch; color: var(--black); }
/* auto margin absorbs the free space, pushing the button to the right edge */
.footer-cta .btn { order: 2; margin-left: auto; }
/* zero-height full-width item forces the logo onto its own line
   without stretching it - the logo keeps flex-basis auto */
.footer-cta::after { content: ""; order: 3; flex: 0 0 100%; height: 0; }
/* logo sits alone on its line, centred at every width */
.footer-cta img { order: 4; flex: 0 0 auto; height: 400px; width: auto; margin: 0 auto; }
/* below ~1200px a 560px-tall logo would overflow, so scale by width instead.
   height:auto keeps the aspect ratio intact all the way down to phone widths. */
@media (max-width: 900px) { .footer-cta img { height: auto; width: 100%; max-width: 520px; } }
/* footer button matches the header button exactly (default .btn styles) */
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 40px;
}
@media (max-width: 820px) { .footer-grid { grid-template-columns: 1fr; } }
.site-footer h4 { color: var(--black); margin-bottom: 14px; font-size: 17px; }
.site-footer ul { list-style: none; }
.site-footer li { margin-bottom: 10px; }
.site-footer a { color: var(--teal); }
.site-footer a:hover { color: #007a76; }
.site-footer a.btn { color: var(--white); }
.site-footer a.btn:hover { color: var(--black); }
.footer-legal {
  margin-top: 48px;
  padding-top: 24px;
  border-top: 1px solid rgba(17,17,17,0.12);
  display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  font-size: 12.5px;
  color: rgba(17,17,17,0.55);
}
.footer-legal nav { display: flex; gap: 18px; flex-wrap: wrap; }
.footer-legal a { color: rgba(17,17,17,0.65); }

/* ---------- legal pages ---------- */
.legal { padding: 72px 0 96px; }
.legal h1 { font-size: clamp(36px, 5vw, 56px); margin-bottom: 8px; }
.legal .updated { color: rgba(17,17,17,0.5); font-size: 14px; margin-bottom: 40px; }
.legal h2 { font-size: 26px; margin: 40px 0 12px; }
.legal p, .legal li { color: rgba(17,17,17,0.85); font-size: 15.5px; }
.legal ul { padding-left: 22px; margin: 10px 0; }
.legal li { margin-bottom: 8px; }
.legal table { border-collapse: collapse; margin: 16px 0; width: 100%; max-width: 720px; }
.legal th, .legal td { text-align: left; padding: 10px 14px; border: 1px solid rgba(17,17,17,0.2); font-size: 14.5px; }
.legal th { font-family: var(--display); letter-spacing: 0.05em; font-weight: 400; }

/* ---------- hub: the four rules ---------- */
.rules-box {
  border: 1.5px solid var(--teal);
  border-radius: 14px;
  padding: 44px 40px;
  background: var(--white);
}
@media (max-width: 640px) { .rules-box { padding: 32px 24px; } }
.rules-box > h2 { color: var(--black); }
.rules-list { list-style: none; margin-top: 32px; display: grid; gap: 26px; }
.rules-list li { display: flex; gap: 20px; align-items: flex-start; }
.rules-list .n {
  font-family: var(--display);
  font-size: 40px;
  line-height: 1;
  color: var(--teal);
  flex: 0 0 auto;
  min-width: 38px;
}
.rules-list h3 { font-size: clamp(20px, 2.2vw, 25px); color: var(--black); margin-bottom: 6px; }
.rules-list p { font-size: 16px; color: rgba(17,17,17,0.8); max-width: 68ch; }
/* ---------- hub: rules box examples ---------- */
.rules-note {
  margin-top: 28px;
  padding-top: 22px;
  border-top: 1px solid rgba(17,17,17,0.1);
  font-size: 15.5px;
  color: rgba(17,17,17,0.75);
  max-width: 74ch;
}
.rules-note strong { font-weight: 400; color: var(--teal); }
.rule-examples { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-top: 14px; }
@media (max-width: 640px) { .rule-examples { grid-template-columns: 1fr; } }
.rule-examples > div { background: var(--mint); border-radius: 8px; padding: 16px 18px; }
.rule-examples .ex-sku {
  display: block;
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.rule-examples > div:first-child .ex-sku { color: var(--beauty-anchor); }
.rule-examples > div:last-child .ex-sku { color: var(--electro-anchor); }
.rule-examples .ex-tag {
  font-family: var(--display);
  font-size: 22px;
  letter-spacing: 0.04em;
  line-height: 1.15;
  color: var(--black);
  margin-bottom: 8px;
}
.rule-examples .ex-list { font-size: 14px; line-height: 1.65; color: rgba(17,17,17,0.7); }
.occasions { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.occasions li {
  font-size: 14.5px;
  color: var(--teal);
  background: var(--mint);
  border-radius: 100px;
  padding: 6px 15px;
}

/* ---------- hub: eight ways to serve ---------- */
.serve-group { margin-top: 52px; }
.serve-group > h3 {
  color: var(--cyan);
  font-size: clamp(22px, 2.2vw, 28px);
  margin-bottom: 20px;
}
.serve-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
@media (max-width: 1000px) { .serve-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .serve-grid { grid-template-columns: 1fr; } }
.serve-card {
  background: var(--grey);
  border-radius: 10px;
  overflow: hidden;
  padding-bottom: 24px;
  display: flex;
  flex-direction: column;
}
.serve-card .img-slot.photo { border-radius: 0; margin: 0; aspect-ratio: 4 / 5; }
.serve-card .img-slot.photo img {
  border-radius: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.serve-card .tags {
  display: block;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin: 22px 22px 8px;
}
.serve-card.beauty .tags { color: var(--beauty-comp); }
.serve-card.electrolytes .tags { color: var(--electro-comp); }
.serve-card.flow-soda .tags { color: var(--cyan); }

/* full-width feature card: landscape image left, copy right */
.serve-card.feature { grid-column: 1 / -1; display: grid; grid-template-columns: 1.5fr 1fr; padding-bottom: 0; }
.serve-card.feature .img-slot.photo { aspect-ratio: auto; height: 100%; min-height: 300px; }
.serve-card.feature .img-slot.photo img { height: 100%; object-fit: cover; }
.serve-card.feature .serve-body { padding: 30px 28px; display: flex; flex-direction: column; }
.serve-card.feature .tags { margin: 0 0 8px; }
.serve-card.feature h4 { margin: 0 0 12px; }
.serve-card.feature .build { margin: 0; }
.serve-card.feature .note { margin: 10px 0 0; }
.serve-card.feature .nutrient { margin: 16px 0 0; }
.serve-card.feature .nutrient-detail { margin: 6px 0 0; }
@media (max-width: 760px) {
  .serve-card.feature { grid-template-columns: 1fr; padding-bottom: 24px; }
  .serve-card.feature .img-slot.photo { height: auto; min-height: 0; aspect-ratio: 1733 / 907; }
  .serve-card.feature .serve-body { padding: 22px; }
}
.serve-card h4 {
  font-size: clamp(24px, 2.4vw, 30px);
  color: var(--white);
  margin: 0 22px 12px;
}
.serve-card .build { font-size: 14.5px; line-height: 1.7; color: rgba(255,255,255,0.85); margin: 0 22px; }
.serve-card .note { font-style: italic; font-size: 14px; color: rgba(255,255,255,0.6); margin: 10px 22px auto; }
.serve-card .nutrient { font-size: 13.5px; letter-spacing: 0.02em; color: var(--cyan); margin: 16px 22px 0; }
.serve-card .nutrient-detail { font-size: 12.5px; line-height: 1.6; color: rgba(255,255,255,0.55); margin: 6px 22px 0; }

/* ---------- hub: menu extracts ---------- */
.menu-level { margin-top: 52px; }
.menu-level-head h3 { color: var(--teal); margin-bottom: 8px; }
.menu-level-head p { font-size: 16px; max-width: 70ch; }
.menu-extract {
  margin-top: 20px;
  background: var(--white);
  border-radius: 10px;
  padding: 34px 36px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 34px 48px;
  box-shadow: 0 2px 12px rgba(17,17,17,0.05);
}
@media (max-width: 760px) { .menu-extract { grid-template-columns: 1fr; padding: 28px 24px; } }
.menu-item .sku-tag {
  display: block;
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 7px;
}
.menu-item .sku-tag.beauty { color: var(--beauty-anchor); }
.menu-item .sku-tag.electrolytes { color: var(--electro-anchor); }
.menu-item .drink {
  font-family: var(--display);
  font-size: 27px;
  letter-spacing: 0.04em;
  color: var(--black);
  margin-bottom: 8px;
}
.menu-item .drink .vol {
  font-family: var(--body);
  font-size: 13px;
  letter-spacing: 0.06em;
  color: rgba(17,17,17,0.5);
}
.menu-item .build { font-size: 15.5px; color: rgba(17,17,17,0.82); line-height: 1.75; }
.menu-item .nutrient {
  font-style: italic;
  font-size: 14.5px;
  color: var(--teal);
  margin-top: 8px;
}
.menu-item .nutrient-detail {
  font-size: 12.5px;
  letter-spacing: 0.01em;
  color: rgba(17,17,17,0.55);
  margin-top: 5px;
  line-height: 1.65;
}
.menu-item .claim-line {
  font-size: 13.5px;
  color: rgba(17,17,17,0.62);
  margin-top: 8px;
  line-height: 1.7;
}

/* ---------- hub: menu showcase ---------- */
.menu-showcase {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 42px;
  align-items: start;
}
.menu-showcase a {
  display: block;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 18px 42px rgba(17,17,17,0.2);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.menu-showcase a:hover,
.menu-showcase a:focus-visible {
  transform: translateY(-3px);
  box-shadow: 0 24px 52px rgba(17,17,17,0.28);
}
.menu-showcase img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 10px;
}
.menu-showcase .menu-showcase-portrait { width: 100%; }
@media (prefers-reduced-motion: reduce) {
  .menu-showcase a { transition: none; }
  .menu-showcase a:hover, .menu-showcase a:focus-visible { transform: none; }
}
@media (max-width: 900px) {
  .menu-showcase { grid-template-columns: repeat(2, 1fr); gap: 20px; }
}
@media (max-width: 560px) {
  .menu-showcase { grid-template-columns: 1fr; gap: 22px; margin-top: 30px; }
  .menu-showcase img, .menu-showcase a { border-radius: 7px; }
}
/* ---------- hub: faq closing line ---------- */
.faq-close {
  margin-top: 30px;
  font-size: 16.5px;
  color: rgba(17,17,17,0.8);
  max-width: 74ch;
}

/* ---------- home: SKU spec dropdown ---------- */
.sku-spec { margin-top: 8px; }
.sku-spec summary {
  cursor: pointer;
  list-style: none;
  font-family: var(--display);
  font-size: 17px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--white);
  padding: 14px 0 0;
  border-top: 1px solid rgba(255,255,255,0.28);
}
.sku-spec summary::-webkit-details-marker { display: none; }
.sku-spec summary::after { content: "+"; float: right; font-size: 21px; line-height: 1; }
.sku-spec[open] summary::after { content: "–"; }
.sku-tile.beauty .sku-spec summary { color: var(--beauty-comp); }
.sku-tile.electrolytes .sku-spec summary { color: var(--electro-comp); }
/* the panel sits flush inside the tile - the tile already carries the anchor colour */
.sku-spec .claims-panel { margin-top: 14px; padding: 0; border-radius: 0; background: none; }
.sku-spec .claims-panel .basis { font-size: 13px; }
.sku-spec .claims-panel li { font-size: 14.5px; padding: 8px 0 8px 24px; }