/* NutraPack — modern bold editorial (Top Secret-inspired) */

:root {
  --bg: #f4f1ec;
  --bg-2: #ebe7df;
  --ink: #111111;
  --ink-2: #2a2a2a;
  --ink-3: #6a6a6a;
  --hairline: #1a1a1a;
  --hairline-soft: #d4cfc6;
  --accent: #ff5b1f;
  --accent-soft: #ffe3d3;
  --display: 'Boldonse', 'Anton', 'Archivo Black', 'Helvetica Neue', sans-serif;
  --serif:  'Instrument Serif', 'Times New Roman', serif;
  --ui:     'Geist', 'Söhne', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --mono:   'JetBrains Mono', 'IBM Plex Mono', ui-monospace, monospace;

  --maxw: 1440px;
  --pad: clamp(20px, 4vw, 56px);

  --accent-tx: background-color 1200ms cubic-bezier(.4,0,.2,1), background 1200ms cubic-bezier(.4,0,.2,1), color 1200ms cubic-bezier(.4,0,.2,1), border-color 1200ms cubic-bezier(.4,0,.2,1), fill 1200ms cubic-bezier(.4,0,.2,1);
}

/* Smooth color transitions for ALL accent-driven elements (every page) */
.hero__chip,
.hero__cta-side,
.section--accent,
.caps__cell,
.marquee--accent,
.btn--primary,
.problem__num,
.process__n,
.product--accent,
.word-flip,
.section__h2 em,
.quote-left h3 em,
.hero__eyebrow .star,
.section__kicker .star,
.quote-bullets li::before,
.quote-field input:focus,
.quote-field select:focus,
.quote-field textarea:focus,
.design-cta__title em,
/* About / Contact / How It Works page elements */
.about-hero h1 em,
.about-hero__eyebrow .star,
.about-block h2 em,
.values__kicker .star,
.value__num,
.contact-hero h1 em,
.contact-hero__eyebrow .star,
.contact-info__value a,
.hiw-hero h1 em,
.hiw-hero__eyebrow .star,
.hiw-step__num,
.hiw-step__title em,
.hiw-end h2 em,
/* Site-wide elements */
.site-header__cta,
.site-header__star,
.site-footer__star,
.site-footer__social-icon,
.site-header__link::after {
  transition: var(--accent-tx);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--ui);
  color: var(--ink);
  background: var(--bg);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }

/* Page container — no sticky nav, no footer; designed to embed in Wix */
.page {
  display: flex;
  flex-direction: column;
}

/* ============================================================
   HERO — Top Secret style: huge type, marquees, monolithic
   ============================================================ */

.hero {
  position: relative;
  padding: clamp(40px, 6vw, 96px) var(--pad) clamp(48px, 6vw, 80px);
  border-bottom: 1px solid var(--hairline);
  overflow: hidden;
}

.hero__top {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
  margin-bottom: clamp(32px, 5vw, 64px);
  flex-wrap: wrap;
}
.hero__eyebrow {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.hero__eyebrow .star {
  display: inline-block;
  width: 14px;
  height: 14px;
  background: var(--accent);
  clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}
.hero__lede {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(18px, 1.8vw, 24px);
  line-height: 1.3;
  color: var(--ink);
  max-width: 38ch;
  margin: 0;
  letter-spacing: -0.005em;
}

/* Massive type stack */
.hero__stack {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(56px, 12vw, 200px);
  line-height: 1.05;
  letter-spacing: -0.035em;
  text-transform: uppercase;
  color: var(--ink);
  margin: 0;
}
.hero__stack-row {
  display: flex;
  align-items: center;
  gap: clamp(12px, 1.5vw, 28px);
  flex-wrap: nowrap;
  padding: 0.04em 0;
}
.hero__stack-row + .hero__stack-row { margin-top: clamp(8px, 1.2vw, 24px); }

.hero__chip {
  font-family: var(--ui);
  font-size: clamp(12px, 1vw, 14px);
  font-weight: 500;
  text-transform: none;
  letter-spacing: -0.005em;
  color: #fff;
  background: var(--accent);
  padding: 10px 18px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  line-height: 1;
}
.hero__chip-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #fff;
}

/* word slot for animation */
.word-flip {
  display: inline-flex;
  align-items: center;
  position: relative;
  vertical-align: middle;
  height: 1.1em;
  overflow: hidden;
  color: var(--accent);
  font-style: italic;
  font-family: var(--serif);
  font-weight: 400;
  letter-spacing: -0.01em;
  min-width: 6ch;
  transition: color 1200ms cubic-bezier(.4,0,.2,1);
}
.word-flip__inner {
  display: inline-flex;
  flex-direction: column;
  transition: transform 480ms cubic-bezier(.7,.05,.2,1);
}
.word-flip__item {
  height: 1.1em;
  line-height: 1.1;
  white-space: nowrap;
  display: flex;
  align-items: center;
}

/* hero CTA cluster */
.hero__cta-row {
  margin-top: clamp(36px, 5vw, 72px);
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 24px;
  align-items: stretch;
}
.hero__cta-block {
  background: var(--ink);
  color: var(--bg);
  padding: clamp(24px, 3vw, 40px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 32px;
  border-radius: 4px;
}
.hero__cta-block h3 {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(28px, 3.4vw, 48px);
  letter-spacing: -0.015em;
  line-height: 1.25;
  text-transform: uppercase;
  margin: 0;
  max-width: 14ch;
}
.hero__cta-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.hero__cta-meta .small {
  font-family: var(--mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--bg-2);
  opacity: 0.7;
}
.hero__cta-side {
  background: var(--accent);
  color: #fff;
  padding: clamp(24px, 3vw, 40px);
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 24px;
}
.hero__cta-side .hero__cta-side-headline {
  font-family: var(--display);
  font-size: clamp(36px, 4.5vw, 64px);
  line-height: 1.0;
  letter-spacing: -0.025em;
  font-weight: 400;
  text-transform: uppercase;
}
.hero__cta-side .hero__cta-side-sub {
  font-family: var(--mono);
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  line-height: 1.5;
}
/* Legacy classes preserved in case .num/.label is reused elsewhere */
.hero__cta-side .num {
  font-family: var(--display);
  font-size: clamp(56px, 8vw, 120px);
  line-height: 0.85;
  letter-spacing: -0.04em;
  font-weight: 400;
}
.hero__cta-side .num sup {
  font-family: var(--ui);
  font-size: 0.22em;
  vertical-align: super;
  font-weight: 500;
  margin-left: 6px;
}
.hero__cta-side .label {
  font-family: var(--mono);
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 16px 24px;
  border-radius: 999px;
  font-family: var(--ui);
  font-size: 14.5px;
  font-weight: 500;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 200ms cubic-bezier(.2,.8,.2,1), background 1200ms cubic-bezier(.4,0,.2,1), background-color 1200ms cubic-bezier(.4,0,.2,1), color 1200ms cubic-bezier(.4,0,.2,1), border-color 1200ms cubic-bezier(.4,0,.2,1);
  white-space: nowrap;
}
.btn--primary {
  background: var(--accent);
  color: #fff;
}
.btn--primary:hover { transform: translateY(-2px); }
.btn--invert {
  background: var(--bg);
  color: var(--ink);
}
.btn--invert:hover { background: #fff; transform: translateY(-2px); }
.btn--ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--ink);
}
.btn--ghost:hover { background: var(--ink); color: var(--bg); }
.btn--block { width: 100%; justify-content: center; padding: 18px; }
.btn__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(255,255,255,0.2);
  font-size: 12px;
  transition: transform 200ms cubic-bezier(.2,.8,.2,1);
}
.btn:hover .btn__arrow { transform: translateX(4px); }
.btn--invert .btn__arrow { background: rgba(0,0,0,0.1); }
.btn--ghost .btn__arrow { background: rgba(0,0,0,0.08); }

/* ============================================================
   MARQUEE — between sections
   ============================================================ */
.marquee {
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  background: var(--ink);
  color: var(--bg);
  padding: 22px 0;
  overflow: hidden;
  white-space: nowrap;
}
.marquee--accent { background: var(--accent); color: #fff; }
.marquee__track {
  display: inline-flex;
  gap: 56px;
  animation: marquee 50s linear infinite;
  font-family: var(--display);
  font-size: clamp(28px, 3vw, 48px);
  letter-spacing: -0.02em;
  text-transform: uppercase;
  line-height: 1;
}
.marquee__item {
  display: inline-flex;
  align-items: center;
  gap: 56px;
}
.marquee__star {
  width: 24px;
  height: 24px;
  background: currentColor;
  clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}
.marquee--accent .marquee__star { background: var(--ink); }
@keyframes marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-33.333%); }
}

/* ============================================================
   SECTION shell
   ============================================================ */
.section {
  padding: clamp(96px, 11vw, 180px) var(--pad);
  border-bottom: 1px solid var(--hairline);
}
.section--dark { background: var(--ink); color: var(--bg); border-bottom-color: #000; }
.section--accent { background: var(--accent); color: #fff; border-bottom-color: #000; }

.section__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 32px;
  margin-bottom: clamp(40px, 5vw, 72px);
  flex-wrap: wrap;
  max-width: var(--maxw);
  margin-left: auto;
  margin-right: auto;
}
.section__kicker {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: inherit;
}
.section__kicker .star {
  display: inline-block;
  width: 12px;
  height: 12px;
  background: var(--accent);
  clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}
.section--accent .section__kicker .star,
.section--dark .section__kicker .star { background: currentColor; }

.section__h2 {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(40px, 6.5vw, 104px);
  line-height: 1.2;
  letter-spacing: -0.025em;
  margin: 16px 0 0;
  text-transform: uppercase;
  max-width: 14ch;
}
.section__h2 em {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  text-transform: none;
  color: var(--accent);
  letter-spacing: -0.01em;
}
.section--accent .section__h2 em { color: var(--ink); }

.section__lede {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(18px, 1.6vw, 22px);
  line-height: 1.3;
  max-width: 38ch;
  margin: 0;
  letter-spacing: -0.005em;
}

.section__inner {
  max-width: var(--maxw);
  margin: 0 auto;
}

/* ============================================================
   PROBLEMS — three large numbered blocks
   ============================================================ */
.problems {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--hairline);
  border: 1px solid var(--hairline);
}
.problem {
  background: var(--bg);
  padding: clamp(28px, 3vw, 44px);
  display: flex;
  flex-direction: column;
  gap: 24px;
  min-height: 360px;
  position: relative;
  transition: background 240ms;
}
.problem:hover { background: var(--bg-2); }
.problem__num {
  font-family: var(--display);
  font-size: clamp(64px, 7vw, 112px);
  line-height: 0.85;
  letter-spacing: -0.04em;
  color: var(--accent);
}
.problem__title {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(22px, 2vw, 30px);
  line-height: 1.3;
  letter-spacing: -0.015em;
  text-transform: uppercase;
  margin: auto 0 12px;
  max-width: 14ch;
}
.problem__body {
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-2);
  margin: 0;
  max-width: 38ch;
}

/* ============================================================
   PRODUCTS — modular grid
   ============================================================ */
.products {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: minmax(240px, auto);
  gap: 1px;
  background: var(--hairline);
  border: 1px solid var(--hairline);
}
.product {
  position: relative;
  background: var(--bg);
  overflow: hidden;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: clamp(20px, 2vw, 32px);
  min-height: 280px;
  transition: background 280ms;
}
.product--lg { grid-column: span 3; grid-row: span 2; min-height: 480px; }
.product--md { grid-column: span 3; grid-row: span 1; }
.product--sm { grid-column: span 2; grid-row: span 1; }
.product--accent { background: var(--accent); color: #fff; }
.product--ink { background: var(--ink); color: var(--bg); }

.product:hover { background: var(--bg-2); }
.product--accent:hover { background: var(--accent); filter: brightness(1.05); }
.product--ink:hover { background: var(--ink); filter: brightness(1.2); }

.product__top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}
.product__index {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.08em;
  opacity: 0.6;
}
.product__sub {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.05em;
  opacity: 0.7;
  text-align: right;
}
.product__visual {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px 0;
  min-height: 120px;
}
.product__glyph {
  width: 60%;
  max-width: 220px;
  height: auto;
  transition: transform 480ms cubic-bezier(.2,.8,.2,1);
}
.product--lg .product__glyph { width: 50%; max-width: 280px; }
.product:hover .product__glyph { transform: scale(1.06) rotate(-2deg); }
.product__bottom {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 12px;
}
.product__name {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(22px, 2.2vw, 36px);
  line-height: 1.05;
  letter-spacing: -0.015em;
  text-transform: uppercase;
  margin: 0;
  max-width: 12ch;
}
.product--lg .product__name { font-size: clamp(32px, 3.4vw, 56px); max-width: 10ch; }
.product__arrow {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: transform 240ms;
}
.product--accent .product__arrow,
.product--ink .product__arrow { background: var(--bg); color: var(--ink); }
.product:hover .product__arrow { transform: rotate(-45deg); }

/* ============================================================
   SIZES — bottle lineup
   ============================================================ */
.sizes-stage {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  align-items: end;
  gap: 0;
  padding: clamp(48px, 6vw, 80px) clamp(20px, 3vw, 40px) clamp(32px, 4vw, 56px);
  background: var(--bg-2);
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  position: relative;
}
.sizes-stage::before {
  content: '';
  position: absolute;
  left: clamp(20px, 3vw, 40px);
  right: clamp(20px, 3vw, 40px);
  bottom: clamp(32px, 4vw, 56px);
  height: 1px;
  background: var(--ink);
}
.size-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  padding: 0 16px;
  position: relative;
}
.size-col + .size-col::before {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  top: 0;
  width: 1px;
  background: var(--hairline-soft);
}
.size-bottle {
  height: clamp(220px, 32vh, 380px);
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.size-bottle svg {
  height: calc(var(--scale) * 100%);
  width: auto;
  filter: drop-shadow(0 14px 22px rgba(60, 30, 0, 0.18));
}
.size-plate {
  text-align: center;
  position: relative;
  z-index: 2;
  padding-top: 12px;
}
.size-plate .oz-num {
  font-family: var(--display);
  font-size: clamp(48px, 5vw, 80px);
  letter-spacing: -0.04em;
  line-height: 0.85;
}
.size-plate .oz-unit {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--ink-2);
  margin-top: 4px;
  text-transform: uppercase;
}
.size-plate .use {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-3);
  letter-spacing: 0.04em;
  margin-top: 6px;
}

.sizes-foot {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--hairline);
  border-bottom: 1px solid var(--hairline);
}
.sizes-foot .spec {
  background: var(--bg);
  padding: clamp(32px, 3.5vw, 48px) clamp(28px, 3vw, 40px);
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-height: 140px;
}
.sizes-foot .spec-k {
  font-family: var(--mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink-3);
}
.sizes-foot .spec-v {
  font-family: var(--display);
  font-size: clamp(20px, 1.8vw, 28px);
  line-height: 1.2;
  letter-spacing: -0.015em;
  text-transform: uppercase;
  text-wrap: balance;
}

/* ============================================================
   PROCESS — dark, big numbers
   ============================================================ */
.process {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1px;
  background: #000;
  border: 1px solid #000;
}
.process__step {
  background: var(--ink);
  padding: clamp(24px, 3vw, 40px);
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-height: 320px;
  transition: background 240ms;
}
.process__step:hover { background: #1a1a1a; }
.process__n {
  font-family: var(--display);
  font-size: clamp(56px, 6vw, 96px);
  line-height: 0.85;
  letter-spacing: -0.04em;
  color: var(--accent);
}
.process__t {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(22px, 2vw, 30px);
  line-height: 1.1;
  letter-spacing: -0.015em;
  text-transform: uppercase;
  margin: auto 0 8px;
}
.process__b {
  font-size: 14.5px;
  line-height: 1.55;
  color: oklch(0.78 0.01 80);
}

/* ============================================================
   CAPS / stats — accent strip
   ============================================================ */
.caps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: rgba(0,0,0,0.15);
}
.caps__cell {
  padding: clamp(28px, 3.5vw, 56px);
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: var(--accent);
}
.caps__k {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(64px, 8vw, 132px);
  letter-spacing: -0.04em;
  line-height: 0.85;
}
.caps__l {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-top: auto;
  max-width: 18ch;
}

/* ============================================================
   QUOTE FORM
   ============================================================ */
.quote-wrap {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 0;
  background: var(--hairline);
  border: 1px solid var(--hairline);
  gap: 1px;
}
.quote-left {
  background: var(--bg);
  padding: clamp(32px, 4vw, 64px);
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.quote-left h3 {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(36px, 4vw, 64px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  margin: 0;
  max-width: 14ch;
}
.quote-left h3 em {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  text-transform: none;
  color: var(--accent);
}
.quote-left .lede {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(17px, 1.4vw, 20px);
  line-height: 1.35;
  color: var(--ink);
  max-width: 36ch;
  margin: 0;
}
.quote-bullets {
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.quote-bullets li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 14.5px;
  color: var(--ink-2);
}
.quote-bullets li::before {
  content: '';
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  margin-top: 4px;
  background: var(--accent);
  clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}

.quote-form {
  background: var(--bg);
  padding: clamp(32px, 4vw, 56px);
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.quote-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.quote-field { display: flex; flex-direction: column; gap: 8px; }
.quote-field span {
  font-family: var(--mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-3);
}
.quote-field input,
.quote-field select,
.quote-field textarea {
  font-family: var(--ui);
  font-size: 15px;
  color: var(--ink);
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--ink);
  padding: 10px 0;
  outline: none;
  resize: none;
  border-radius: 0;
}
.quote-field input:focus,
.quote-field select:focus,
.quote-field textarea:focus {
  border-bottom-color: var(--accent);
}
.quote-small {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-3);
  letter-spacing: 0.04em;
  text-align: center;
}

/* Form submission status — success / error banners */
.form-status {
  font-family: var(--ui);
  font-size: 14px;
  line-height: 1.5;
  padding: 14px 18px;
  border-radius: 4px;
  margin-top: 4px;
  text-align: center;
}
.form-status--success {
  background: rgba(43, 182, 115, 0.12);
  color: #1c7a4d;
  border: 1px solid rgba(43, 182, 115, 0.35);
}
.form-status--error {
  background: rgba(232, 58, 58, 0.1);
  color: #b02a2a;
  border: 1px solid rgba(232, 58, 58, 0.3);
}

/* Conditional form row — properly hidden when [hidden] attribute is set,
   even though parent .quote-row uses display:flex/grid */
.quote-row[hidden] { display: none; }
.quote-checkboxes[hidden] { display: none; }

/* Sizes checkboxes — group of pill-style toggles */
.quote-checkboxes {
  border: 0;
  padding: 0;
  margin: 0;
}
.quote-checkboxes legend {
  display: block;
  margin-bottom: 12px;
}
.quote-checkboxes legend span {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.quote-checkboxes__group {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.quote-checkbox {
  display: inline-flex;
  align-items: center;
  padding: 10px 18px;
  border: 1px solid var(--ink);
  border-radius: 999px;
  font-family: var(--ui);
  font-size: 14px;
  cursor: pointer;
  user-select: none;
  transition: background 200ms ease, color 200ms ease;
}
.quote-checkbox input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.quote-checkbox:hover { background: rgba(0,0,0,0.04); }
.quote-checkbox:has(input:checked) {
  background: var(--ink);
  color: var(--bg);
}

/* Mix & match image block */
.mixmatch {
  max-width: var(--maxw);
  margin: 0 auto;
  border: 1px solid var(--hairline);
  background: var(--bg-2);
  overflow: hidden;
}
.mixmatch img {
  display: block;
  width: 100%;
  height: auto;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 980px) {
  .hero__cta-row { grid-template-columns: 1fr; }
  .problems { grid-template-columns: 1fr; }
  .products { grid-template-columns: 1fr; }
  .product--lg, .product--md, .product--sm { grid-column: span 1; grid-row: span 1; min-height: 320px; }
  .sizes-stage { grid-template-columns: repeat(5, 1fr); padding: 32px 16px; }
  .sizes-foot { grid-template-columns: repeat(2, 1fr); }
  .process { grid-template-columns: 1fr; }
  .caps { grid-template-columns: repeat(2, 1fr); }
  .quote-wrap { grid-template-columns: 1fr; }
  .section__head { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 640px) {
  .sizes-stage { grid-template-columns: repeat(5, 1fr); }
  .size-bottle { height: 160px; }
  .size-plate .oz-num { font-size: 28px; }
  .sizes-foot { grid-template-columns: 1fr; }
  .caps { grid-template-columns: 1fr; }
}

/* ============================================================
   SITE HEADER
   ============================================================ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: clamp(16px, 3vw, 40px);
  padding: 8px clamp(20px, 4vw, 56px);
  min-height: 96px;
  background: var(--bg);
  border-bottom: 1px solid var(--hairline);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.site-header__brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--ink);
  flex-shrink: 0;
}
.site-header__star {
  display: inline-block;
  width: 14px;
  height: 14px;
  background: var(--accent);
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><polygon points="12,1 15,9 23,9 17,14 19,22 12,17 5,22 7,14 1,9 9,9"/></svg>') no-repeat center / contain;
  mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><polygon points="12,1 15,9 23,9 17,14 19,22 12,17 5,22 7,14 1,9 9,9"/></svg>') no-repeat center / contain;
  transition: var(--accent-tx);
}
.site-header__wordmark {
  font-family: var(--display);
  font-size: 18px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--ink);
}
.site-header__nav {
  display: flex;
  align-items: center;
  gap: clamp(18px, 2.4vw, 36px);
  margin-left: auto;
}
.site-header__link {
  font-family: var(--ui);
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
  letter-spacing: -0.01em;
  position: relative;
  padding: 6px 0;
}
.site-header__link::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 220ms ease, var(--accent-tx);
}
.site-header__link:hover::after { transform: scaleX(1); }
.site-header__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--accent);
  color: #0e0d0c;
  text-decoration: none;
  font-family: var(--ui);
  font-weight: 600;
  font-size: 14px;
  padding: 11px 18px;
  border: 1px solid var(--hairline);
  transition: var(--accent-tx), transform 200ms ease;
}
.site-header__cta:hover { transform: translateY(-1px); }
.site-header__cta-arrow { font-size: 16px; line-height: 1; }
.site-header__burger {
  display: none;
  flex-direction: column;
  gap: 4px;
  background: transparent;
  border: 1px solid var(--hairline);
  padding: 10px 12px;
  cursor: pointer;
}
.site-header__burger span {
  display: block;
  width: 18px;
  height: 2px;
  background: var(--ink);
}

@media (max-width: 820px) {
  .site-header__nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--bg);
    border-bottom: 1px solid var(--hairline);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin-left: 0;
    display: none;
  }
  .site-header__nav[data-open="true"] { display: flex; }
  .site-header__link {
    padding: 16px 24px;
    border-top: 1px solid var(--hairline-soft);
    font-size: 16px;
  }
  .site-header__cta { margin-left: auto; }
  .site-header__burger { display: flex; }
}

@media (max-width: 520px) {
  .site-header__cta {
    /* keep it visible on mobile but slimmer */
    padding: 8px 12px;
    font-size: 12px;
  }
  .site-header__cta-arrow { display: none; }
}

/* ============================================================
   SITE FOOTER
   ============================================================ */
.site-footer {
  background: #0e0d0c;
  color: #e9e6df;
  padding: clamp(64px, 8vw, 120px) clamp(20px, 4vw, 56px) 32px;
  border-top: 1px solid var(--hairline);
}
.site-footer__top {
  display: grid;
  grid-template-columns: 1.2fr 2fr;
  gap: clamp(40px, 6vw, 96px);
  max-width: var(--maxw);
  margin: 0 auto;
  padding-bottom: clamp(48px, 6vw, 80px);
  border-bottom: 1px solid #2a2724;
}
.site-footer__wordmark {
  font-family: var(--display);
  font-size: clamp(36px, 4vw, 56px);
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: #fff;
  line-height: 0.95;
  margin-bottom: 18px;
}
.site-footer__tag {
  font-family: var(--ui);
  font-size: 15px;
  line-height: 1.55;
  color: #b8b3a9;
  max-width: 38ch;
}
.site-footer__cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(24px, 3vw, 48px);
}
.site-footer__col {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.site-footer__h {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #6a6760;
  margin-bottom: 8px;
}
.site-footer__col a {
  color: #e9e6df;
  text-decoration: none;
  font-family: var(--ui);
  font-size: 14px;
  line-height: 1.4;
  transition: color 180ms ease;
}
.site-footer__col a:hover { color: var(--accent); transition: var(--accent-tx); }
.site-footer__bottom {
  max-width: var(--maxw);
  margin: 0 auto;
  padding-top: 28px;
  display: flex;
  align-items: center;
  gap: 16px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #6a6760;
}
.site-footer__star {
  display: inline-block;
  width: 10px;
  height: 10px;
  background: var(--accent);
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><polygon points="12,1 15,9 23,9 17,14 19,22 12,17 5,22 7,14 1,9 9,9"/></svg>') no-repeat center / contain;
  mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><polygon points="12,1 15,9 23,9 17,14 19,22 12,17 5,22 7,14 1,9 9,9"/></svg>') no-repeat center / contain;
  transition: var(--accent-tx);
}

@media (max-width: 820px) {
  .site-footer__top { grid-template-columns: 1fr; }
  .site-footer__cols { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
  .site-footer__cols { grid-template-columns: 1fr; }
  .site-footer__bottom { flex-wrap: wrap; }
}
/* ===========================================
   DESIGN YOUR TUB CTA — homepage block
   =========================================== */
.design-cta {
  padding: clamp(80px, 10vw, 140px) var(--pad);
  text-align: center;
}
.design-cta__inner {
  max-width: 760px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}
.design-cta__title {
  font-family: var(--display);
  font-size: clamp(48px, 9vw, 140px);
  line-height: 1.25;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  margin: 8px 0 0;
}
.design-cta__title em {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  color: var(--accent);
  text-transform: none;
  letter-spacing: -0.03em;
}
.design-cta__lede {
  font-family: var(--ui);
  font-size: clamp(15px, 1.3vw, 18px);
  line-height: 1.55;
  color: oklch(0.85 0.01 80);
  max-width: 56ch;
  margin: 0;
}
.design-cta__btn {
  margin-top: 12px;
  font-size: 16px;
  padding: 18px 32px;
}
.design-cta__small {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: oklch(0.65 0.01 80);
  margin-top: 4px;
}

/* ===========================================
   HEADER LOGO IMAGE
   =========================================== */
.site-header__logo {
  height: 80px;
  width: auto;
  display: block;
  /* Smooth out edges if logo has slight aliasing */
  image-rendering: auto;
}
@media (max-width: 700px) {
  .site-header__logo {
    height: 60px;
  }
}

/* ===========================================
   FOOTER SOCIAL LINK (Instagram, etc.)
   =========================================== */
.site-footer__social {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  /* matches existing footer link styling — no overrides needed for color */
}
.site-footer__social-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  /* Inherit currentColor so it matches surrounding text */
  color: inherit;
}
.site-footer__social:hover .site-footer__social-icon {
  color: var(--accent);
  transition: var(--accent-tx);
}

/* ===========================================
   MOBILE OPTIMIZATIONS
   Targets only screens <= 700px to avoid affecting desktop.
   Goals:
   1. Eliminate horizontal scroll
   2. Shrink oversized headlines
   3. Allow text/elements to wrap rather than overflow
   =========================================== */

@media (max-width: 700px) {
  /* Hard guarantee: nothing scrolls horizontally */
  html, body {
    overflow-x: hidden;
    max-width: 100vw;
  }
  .page {
    overflow-x: hidden;
    max-width: 100vw;
  }

  /* Allow long uppercase words to break if absolutely necessary */
  h1, h2, h3, .hero__stack, .section__h2,
  .about-hero h1, .contact-hero h1, .hiw-hero h1,
  .hiw-step__title, .design-cta__title, .hiw-end h2 {
    overflow-wrap: break-word;
    word-break: break-word;
    hyphens: auto;
  }

  /* Hero: make the giant headline mobile-friendly */
  .hero {
    padding-left: 20px;
    padding-right: 20px;
  }
  .hero__stack {
    /* Override the big clamp() so it scales to viewport on phones */
    font-size: clamp(36px, 11vw, 56px);
    letter-spacing: -0.025em;
  }
  .hero__stack-row {
    /* Allow wrap so chip/word-flip can drop to next line if needed */
    flex-wrap: wrap;
    gap: 8px;
  }
  .hero__chip {
    font-size: 11px;
    padding: 6px 12px;
  }
  .hero__top {
    flex-direction: column;
    gap: 16px;
  }
  .hero__cta-row {
    flex-direction: column;
    gap: 16px;
  }
  .hero__cta-side {
    width: 100%;
  }

  /* Section padding: less breathing room on small screens */
  .section {
    padding-left: 20px;
    padding-right: 20px;
  }
  .section__head {
    flex-direction: column;
    gap: 16px;
  }
  .section__h2 {
    font-size: clamp(32px, 8vw, 48px);
  }

  /* Products grid → 1 column on mobile to avoid squishing */
  .products {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .product {
    min-height: auto;
  }

  /* Problems → 1 column */
  .problems {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  /* Capabilities stats → 2x2 grid on mobile (was 4 across) */
  .caps {
    grid-template-columns: 1fr 1fr;
  }

  /* Quote form → single column */
  .quote-wrap {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .quote-row {
    flex-direction: column;
    gap: 16px;
  }
  /* Prevent form clipping on mobile */
  .quote-form {
    padding: 24px;
    max-width: 100%;
    box-sizing: border-box;
  }
  .quote-field {
    max-width: 100%;
    min-width: 0;
  }
  .quote-field input,
  .quote-field select,
  .quote-field textarea {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    /* iOS adds default styling that can overflow */
    -webkit-appearance: none;
    appearance: none;
  }
  /* Restore the dropdown chevron after appearance:none kills it */
  .quote-field select {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23111' stroke-width='2'><polyline points='6 9 12 15 18 9'/></svg>");
    background-repeat: no-repeat;
    background-position: right 4px center;
    padding-right: 24px;
  }

  /* Footer columns → 1 column on small phones */
  .site-footer__top {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .site-footer__cols {
    grid-template-columns: 1fr 1fr;
    gap: 24px;
  }
  .site-footer__bottom {
    flex-wrap: wrap;
    gap: 8px;
  }

  /* Marquee: smaller text on mobile so it doesn't scroll funny */
  .marquee {
    font-size: clamp(40px, 12vw, 64px);
  }
  .marquee__item {
    padding: 0 16px;
  }

  /* About / Contact / How It Works hero scaling */
  .about-hero h1,
  .contact-hero h1,
  .hiw-hero h1 {
    font-size: clamp(40px, 11vw, 60px);
  }

  /* About page values → 1 column */
  .values__list {
    grid-template-columns: 1fr;
  }

  /* Contact info strip → 1 column */
  .contact-info {
    grid-template-columns: 1fr;
  }
  .contact-info__cell {
    text-align: left;
  }

  /* HIW step layout → 1 column */
  .hiw-step {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .hiw-step__num {
    font-size: 72px;
  }

  /* Design CTA section */
  .design-cta__title {
    font-size: clamp(40px, 11vw, 64px);
  }

  /* About grid → 1 column */
  .about-grid {
    grid-template-columns: 1fr;
  }
}