/* ==========================================================================
   Q² Nutra — main.css (ported from the approved HTML prototype, plus WordPress extras at the end)
   1. Tokens   2. Base   3. Utilities   4. Header + menu   5. Buttons
   6. Hero   7. Home sections   8. Product page   9. Facts panel
   10. Story page   11. Products page   12. Legal pages   13. CTA + footer
   14. Motion
   ========================================================================== */

/* --------------------------------------------------------------------------
   FONTS — self-hosted, Latin subset, SIL Open Font License.
   Crimson Pro stands in for the Minion in the comps; Archivo Narrow for Arial Narrow.
   Only the weights the site uses are loaded: serif 400 + 600, sans 400 + 700.
   -------------------------------------------------------------------------- */
@font-face {
  font-family: "Crimson Pro";
  src: url("../fonts/crimson-pro-v28-latin-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Crimson Pro";
  src: url("../fonts/crimson-pro-v28-latin-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Archivo Narrow";
  src: url("../fonts/archivo-narrow-v35-latin-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Archivo Narrow";
  src: url("../fonts/archivo-narrow-v35-latin-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* 1. TOKENS --------------------------------------------------------------- */
:root {
  --ink: #1f1812;
  --ink-soft: #3a302a;
  --cocoa: #1d140f;

  --sand-50: #f9f8f6;
  --sand-100: #efebea;
  --sand-150: #ece7e3;
  --sand-200: #ecebe9;
  --sand-300: #e5ded6;
  --sand-350: #e1dcd8;
  --sand-400: #cec4ba;
  --line: #cbc5be;

  --tan: #9d8465;
  --tan-deep: #8a7356;
  --tan-text: #75613f;        /* tan darkened to pass AA on light sand */
  --sage: #7c9462;
  --sage-wash: #dee1d6;

  --energy: #e16913;
  --restore: #237ca8;
  --bliss: #7f1231;

  --accent: var(--tan);
  --accent-deep: var(--tan-deep);

  --serif: "Crimson Pro", "Minion Pro", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --sans: "Archivo Narrow", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;

  --gutter: clamp(1.25rem, 3.6vw, 2.85rem);
  --wrap: 85rem;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

.theme-energy  { --accent: var(--energy);  --accent-deep: #c9590b; }
.theme-restore { --accent: var(--restore); --accent-deep: #1b6a91; }
.theme-bliss   { --accent: var(--bliss);   --accent-deep: #650c25; }

/* 2. BASE ----------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: 6rem;
}

body {
  margin: 0;
  background: var(--sand-300);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.35;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg, picture { display: block; max-width: 100%; }
img { height: auto; }

h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
ul[class], ol[class] { padding: 0; list-style: none; }

h1, h2, .serif {
  font-family: var(--serif);
  font-weight: 600;
  letter-spacing: -0.005em;
  text-wrap: balance;
}
p { text-wrap: pretty; }

a { color: inherit; text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }

:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
  border-radius: 1px;
}
.on-dark :focus-visible, .on-dark:focus-visible { outline-color: #fff; }

sup { font-size: 0.6em; line-height: 0; vertical-align: super; }

/* 3. UTILITIES ------------------------------------------------------------ */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  left: 0.75rem; top: 0.75rem;
  z-index: 200;
  padding: 0.7rem 1.1rem;
  background: var(--ink);
  color: #fff;
  font-weight: 700;
  text-decoration: none;
  transform: translateY(-300%);
}
.skip-link:focus { transform: none; outline-color: #fff; outline-offset: -5px; }

/* Wide-tracked capital headline used between sections */
.tracked {
  font-family: var(--sans);
  font-size: clamp(0.875rem, 1.5vw, 1.125rem);
  font-weight: 700;
  letter-spacing: 0.22em;
  line-height: 1.25;
  text-transform: uppercase;
  text-align: center;
  text-wrap: balance;
}

.kicker {
  font-size: 1rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.01em;
}

.h2 { font-size: clamp(1.9rem, 3.4vw, 2.7rem); line-height: 1.06; }

.rule {
  display: block;
  width: 11.75rem;
  max-width: 50%;
  height: 4px;
  border: 0;
  margin: 0;
  background: var(--accent);
  transform-origin: left center;
}
.rule--center { margin-inline: auto; transform-origin: center; }
.rule--sage { background: var(--sage); }

/* 4. HEADER + MENU -------------------------------------------------------- */
.site-header {
  /* Sizes live in variables so the stuck state can give back exactly the height it removes. */
  --bar-pad: clamp(0.9rem, 2.1vw, 1.7rem);
  --logo-w: clamp(9.5rem, 24vw, 19.75rem);
  --bar-pad-stuck: var(--bar-pad);
  --logo-w-stuck: var(--logo-w);
  --logo-ratio: 0.3228;               /* logo height / width */
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--sand-300);
  transition: box-shadow 0.3s var(--ease), margin-bottom 0.3s var(--ease);
}
.site-header.is-stuck { box-shadow: 0 1px 0 rgba(31, 24, 18, 0.12), 0 10px 30px -18px rgba(31, 24, 18, 0.45); }

.site-header__bar {
  display: flex;
  align-items: center;
  gap: clamp(1.25rem, 5vw, 6.25rem);
  padding-block: var(--bar-pad);
  transition: padding 0.3s var(--ease);
}
.brand { flex: none; display: block; }
.brand img { width: var(--logo-w); transition: width 0.3s var(--ease); }

/* The bar only shrinks on wide screens, where it is tall enough to matter. The margin
   hands back the height the bar loses, so the page below never moves and the
   scroll position can't bounce across the threshold. */
@media (min-width: 56.25em) {
  .site-header { --bar-pad-stuck: 0.7rem; --logo-w-stuck: clamp(9.5rem, 16vw, 12.5rem); }
  .site-header.is-stuck {
    margin-bottom: calc(
      2 * (var(--bar-pad) - var(--bar-pad-stuck))
      + var(--logo-w) * var(--logo-ratio)
      - max(3rem, var(--logo-w-stuck) * var(--logo-ratio))
    );
  }
  .site-header.is-stuck .site-header__bar { padding-block: var(--bar-pad-stuck); }
  .site-header.is-stuck .brand img { width: var(--logo-w-stuck); }
}

.nav { display: none; }
.nav__list { display: flex; gap: clamp(0.9rem, 3.1vw, 3.4rem); }
.nav__link {
  position: relative;
  display: block;
  padding-block: 0.5rem;
  font-size: 1rem;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
}
.nav__link::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0.2rem;
  height: 2px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s var(--ease);
}
.nav__link:hover::after,
.nav__link[aria-current="page"]::after { transform: scaleX(1); }

.site-header__tools {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin-left: auto;
}
.icon-btn {
  display: grid;
  place-items: center;
  width: 3rem; height: 3rem;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink);
  cursor: pointer;
  transition: opacity 0.2s;
}
.icon-btn:hover { opacity: 0.65; }
.icon-btn svg { width: 2.1rem; height: 2.1rem; }
.icon-btn--menu svg { width: 2.9rem; height: 2.1rem; }

@media (min-width: 56.25em) {
  .nav { display: block; }
}

/* Drawer */
.menu {
  position: fixed;
  inset: 0 0 0 auto;
  width: min(27rem, 100%);
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: var(--sand-300);
  color: var(--ink);
  overflow-y: auto;
  overscroll-behavior: contain;
  transform: translateX(100%);
  transition: transform 0.4s var(--ease), overlay 0.4s allow-discrete, display 0.4s allow-discrete;
}
.menu[open] { transform: none; }
@starting-style { .menu[open] { transform: translateX(100%); } }

.menu::backdrop {
  background: rgba(29, 20, 15, 0);
  transition: background 0.4s var(--ease), overlay 0.4s allow-discrete, display 0.4s allow-discrete;
}
.menu[open]::backdrop { background: rgba(29, 20, 15, 0.55); }
@starting-style { .menu[open]::backdrop { background: rgba(29, 20, 15, 0); } }

.menu__inner { padding: 1.25rem var(--gutter) 3rem; }
.menu__top { display: flex; justify-content: flex-end; }
.menu__list { margin-top: 0.5rem; }
.menu__list > li { border-bottom: 1px solid var(--line); }
.menu__link {
  display: block;
  padding: 0.85rem 0;
  font-family: var(--serif);
  font-size: 1.85rem;
  font-weight: 600;
  line-height: 1.1;
  text-decoration: none;
}
.menu__link:hover, .menu__sublink:hover, .menu__minor a:hover { text-decoration: underline; }
.menu__link[aria-current="page"], .menu__sublink[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 2px; }
.menu__sub { padding: 0 0 1rem; display: grid; gap: 0.1rem; }
.menu__sublink {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.4rem 0;
  font-size: 1.125rem;
  text-decoration: none;
}
.menu__sublink img { width: 2rem; height: auto; }
.menu__minor {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.75rem;
  margin-top: 2rem;
  font-size: 0.9375rem;
  text-transform: uppercase;
}
.menu__minor a { text-decoration: none; padding-block: 0.4rem; }

/* 5. BUTTONS -------------------------------------------------------------- */
.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  width: 100%;
  max-width: 20rem;
  min-height: 3.375rem;
  padding: 0.6rem 1rem 0.6rem 2.25rem;
  white-space: nowrap;
  border: 1px solid transparent;
  background: var(--accent);
  color: #fff;
  font-family: var(--sans);
  font-size: 1.1875rem;          /* 19px bold = "large text", keeps white on orange at AA */
  font-weight: 700;
  line-height: 1.1;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.25s var(--ease), color 0.25s var(--ease), border-color 0.25s var(--ease);
}
.btn:hover { background: var(--accent-deep); }
.btn__arrow {
  flex: none;
  width: 2.4rem; height: 1.25rem;
  transition: transform 0.35s var(--ease);
}
.btn:hover .btn__arrow, .btn:focus-visible .btn__arrow { transform: translateX(0.4rem); }

.btn--tan { background: var(--tan); color: var(--ink); }
.btn--tan:hover { background: var(--tan-deep); color: #fff; }

.btn--ink {
  display: inline-flex;
  width: auto;
  min-height: 2.75rem;
  padding: 0.55rem 1.6rem;
  background: var(--ink);
  font-size: 1.0625rem;
}
.btn--ink:hover { background: #3b2d23; }

.btn--outline {
  background: transparent;
  border-color: var(--ink);
  color: var(--ink);
}
.btn--outline:hover { background: var(--ink); color: #fff; }

/* 6. HERO ----------------------------------------------------------------- */
.hero {
  position: relative;
  overflow: hidden;
  background: var(--cocoa);
  color: #fff;
}
.hero__media {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
}
.hero__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--m-pos, 60% 50%);
}
.hero__body {
  position: relative;
  padding-block: 2rem 2.5rem;
}
.hero__title { font-size: clamp(2.6rem, 5.35vw, 4.5rem); line-height: 1; }
.hero__title--long { font-size: clamp(2.5rem, 4.95vw, 4.05rem); line-height: 1.02; }
.hero__sub {
  margin-top: 0.6rem;
  font-family: var(--serif);
  font-size: clamp(1.45rem, 2.75vw, 2.2rem);
  font-weight: 600;
  line-height: 1.18;
  max-width: 11.5em;
}
.hero .rule { margin-top: clamp(1.25rem, 2.6vw, 2.1rem); }
.hero__text {
  margin-top: clamp(1rem, 2.3vw, 1.75rem);
  max-width: 15em;
  font-size: clamp(1.0625rem, 1.55vw, 1.25rem);
  line-height: 1.32;
}

.hero--home    { --m-pos: 68% 60%; --zoom: 1.1;  --origin: 100% 62%; --pos-y: 50%; }
.hero--energy  { --m-pos: 60% 55%; --zoom: 1.17; --origin: 0% 43%; --pos-y: 50%; }
.hero--restore { --m-pos: 68% 55%; --zoom: 1.17; --origin: 70% 43%; --pos-y: 50%; }
.hero--bliss   { --m-pos: 66% 55%; --zoom: 1.17; --origin: 65% 43%; --pos-y: 50%; }
.hero--learn   { --m-pos: 58% 50%; --zoom: 1; --pos-x: 12%; --pos-y: 50%; }
.hero--contact { --m-pos: 68% 50%; --zoom: 1; --pos-x: 30%; --pos-y: 45%; }
.hero--science { --m-pos: 62% 50%; --zoom: 1; --pos-x: 30%; --pos-y: 45%; }
.hero--story   { --m-pos: 62% 60%; --zoom: 1; --pos-x: 8%; --pos-y: 50%; }

@media (min-width: 56.25em) {
  .hero {
    display: grid;
    align-items: center;
    aspect-ratio: 2550 / 1042;
    min-height: 27rem;
    max-height: 41rem;
    width: 100%;
  }
  .hero__media {
    position: absolute;
    inset: 0;
    aspect-ratio: auto;
  }
  .hero__media img {
    object-position: var(--pos-x, 50%) var(--pos-y, 50%);
    transform: scale(var(--zoom, 1));
    transform-origin: var(--origin, 50% 50%);
  }
  .hero__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(24, 16, 11, 0.78) 0%, rgba(24, 16, 11, 0.5) 26%, rgba(24, 16, 11, 0) 56%);
  }
  .hero--story .hero__media::after {
    background: linear-gradient(90deg, rgba(24, 20, 16, 0.86) 0%, rgba(24, 20, 16, 0.7) 24%, rgba(24, 20, 16, 0.18) 50%, rgba(24, 20, 16, 0) 64%);
  }
  .hero__body { padding-block: 2.5rem; }
  .hero__text { text-shadow: 0 1px 12px rgba(0, 0, 0, 0.45); }
}

@media (min-width: 40em) and (max-width: 56.24em) {
  .hero__media { aspect-ratio: 2 / 1; }
  .closing__media { aspect-ratio: 5 / 2; }
}

/* 7. HOME SECTIONS -------------------------------------------------------- */
/* Five promises */
.promises { background: var(--sand-200); padding-block: clamp(2rem, 3.4vw, 2.6rem); }
.promises__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  row-gap: 2rem;
}
.promise {
  flex: 0 0 50%;
  padding-inline: 0.75rem;
  text-align: center;
  font-size: 1.125rem;
  line-height: 1.2;
}
.promise img { width: 5.1rem; margin: 0 auto 0.55rem; }
.promise__title { font-size: 1.0625rem; font-weight: 700; text-transform: uppercase; word-spacing: 0.12em; margin-bottom: 0.15rem; }
.promise p { max-width: 9.7em; margin-inline: auto; }

@media (min-width: 40em) { .promise { flex-basis: 33.333%; } }
@media (min-width: 64em) {
  .promises__list { flex-wrap: nowrap; }
  .promise { flex: 1 1 0; position: relative; }
  .promise + .promise::before {
    content: "";
    position: absolute;
    left: 0; top: 38%; bottom: -0.4rem;
    width: 1px;
    background: var(--line);
  }
}

/* Product trio */
.trio { background: var(--sand-350); padding-block: clamp(2.2rem, 3.4vw, 2.75rem) clamp(2.5rem, 3.6vw, 3rem); }
.trio__grid { display: grid; gap: 3rem; margin-top: clamp(1.75rem, 2.6vw, 2.1rem); }
.card {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 26rem;
  margin-inline: auto;
}
.card__head { display: flex; gap: 1rem; align-items: flex-start; width: 100%; max-width: 21rem; }
.card__badge { flex: none; width: 5.1rem; }
.card__title { font-size: 1.1875rem; font-weight: 700; text-transform: uppercase; line-height: 1.15; margin: 0.3rem 0 0.4rem; }
.card__title a { text-decoration: none; }
.card__title a:hover { text-decoration: underline; }
.card__blurb { font-size: 1.125rem; line-height: 1.17; max-width: 10.8em; }
.card__shot { display: block; width: 100%; margin-top: auto; padding-block: 0.75rem 0.5rem; }
.card__shot img {
  width: 100%;
  max-width: 21rem;
  margin-inline: auto;
  transition: transform 0.6s var(--ease);
}
.card:hover .card__shot img { transform: translateY(-0.4rem) rotate(-1.2deg); }
.card__actions { display: grid; gap: 1.3rem; width: 100%; justify-items: center; }

@media (min-width: 48em) {
  .trio__grid { grid-template-columns: repeat(3, 1fr); gap: 0; }
  .card { position: relative; padding-inline: clamp(0.75rem, 2vw, 1.75rem); max-width: none; }
  .card + .card::before {
    content: "";
    position: absolute;
    left: 0; top: 2.75rem; bottom: 9.5rem;
    width: 1px;
    background: var(--line);
  }
}
@media (min-width: 48em) and (max-width: 67.49em) {
  .card__head { flex-direction: column; align-items: center; text-align: center; gap: 0.35rem; }
  .card__blurb { margin-inline: auto; }
  .btn { padding-left: 1rem; gap: 1.25rem; }
}

/* Clean ingredients */
.benefits { background: var(--sand-200); padding-block: clamp(2.5rem, 4.2vw, 3.4rem); }
.benefits__layout { display: grid; gap: 2.5rem; }
.benefits__intro .h2 { margin-block: 0.55rem 1rem; font-size: clamp(1.9rem, 3.1vw, 2.6rem); }
.benefits__intro p { max-width: 17.5em; font-size: 1.0625rem; line-height: 1.3; }
.benefits__intro .btn { margin-top: 1.4rem; }
.benefits__grid { display: grid; }
.benefit {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding-block: 1.1rem;
  border-top: 1px solid var(--line);
}
.benefit picture { flex: none; width: clamp(6.5rem, 12vw, 9.75rem); }
.benefit__title { font-size: 1.1875rem; font-weight: 700; text-transform: uppercase; line-height: 1.15; }
.benefit p { font-size: 1.125rem; line-height: 1.17; max-width: 12em; }

@media (min-width: 40em) {
  .benefits__grid { grid-template-columns: 1fr 1fr; }
  .benefit { padding: 0.9rem 0.75rem 0.9rem 0; }
  .benefit:nth-child(-n + 2) { border-top: 0; }
  .benefit:nth-child(even) { border-left: 1px solid var(--line); padding-left: 0.9rem; }
}
@media (min-width: 64em) {
  .benefits__layout { grid-template-columns: minmax(0, 0.44fr) minmax(0, 1fr); gap: clamp(1.5rem, 3.5vw, 3.5rem); align-items: center; }
}

/* Doctor band */
.doctor { background: var(--sand-350); display: grid; }
.doctor__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; }
.doctor__photo { aspect-ratio: 5 / 3; overflow: hidden; }
.doctor__body { padding: clamp(2rem, 4vw, 2.75rem) var(--gutter); }
.doctor__body .h2 { margin-top: 0.35rem; }
.doctor__body > p { margin-top: 0.75rem; max-width: 38em; line-height: 1.22; }
.proofs { display: flex; margin-top: 1.75rem; }
.proof {
  flex: 1 1 0;
  padding-inline: 0.5rem;
  text-align: center;
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.15;
  text-transform: uppercase;
}
.proof + .proof { border-left: 1px solid var(--line); }
.proof img { width: clamp(3.75rem, 14vw, 4.5rem); margin: 0 auto 0.6rem; }
.proof span { display: block; max-width: 9.5em; margin-inline: auto; }

@media (min-width: 56.25em) {
  .doctor { grid-template-columns: 48% 1fr; }
  .doctor__photo { aspect-ratio: auto; min-height: 23rem; position: relative; }
  .doctor__photo img { position: absolute; inset: 0; }
  .doctor__body { align-self: center; padding-left: clamp(2rem, 3.2vw, 2.6rem); max-width: 44rem; }
  .proofs { max-width: 28rem; }
  .proof { font-size: 0.9375rem; }
}

/* 8. PRODUCT PAGE ---------------------------------------------------------- */
.offer { background: var(--sand-350); padding-block: clamp(1.75rem, 2.6vw, 2.1rem) clamp(2.5rem, 4.3vw, 3.5rem); }
.offer__layout { display: grid; gap: 2rem; margin-top: clamp(1.5rem, 2.6vw, 2.1rem); }
.offer__lead p { margin-top: 0.85rem; max-width: 26em; line-height: 1.22; }
.offer__pack img { width: min(100%, 30rem); margin: 1.5rem auto 0; }
.offer__box { display: grid; justify-items: center; gap: 1.5rem; }
.offer__box img { width: min(100%, 38rem); }

@media (min-width: 56.25em) {
  .offer__layout { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 4rem); align-items: end; }
  .offer__lead { padding-left: 0.4rem; }
  .offer__pack img { margin-left: 1rem; }
}

.inside { background: var(--sand-200); padding-block: clamp(1.75rem, 2.6vw, 2rem) clamp(2rem, 3vw, 2.4rem); }
.inside__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.75rem 0.5rem;
  margin-top: 1.5rem;
}
.inside__item {
  flex: 0 0 calc(50% - 0.25rem);
  text-align: center;
  font-size: 1.25rem;
  line-height: 1.12;
}
.inside__item picture {
  display: grid;
  place-items: end center;
  height: 8.5rem;
  margin-bottom: 0.9rem;
}
.inside__item img { max-height: 8.5rem; width: auto; max-width: 9.5rem; object-fit: contain; }
.inside__item span { display: block; text-wrap: balance; }
.inside__cta { display: grid; justify-items: center; margin-top: clamp(2rem, 3.4vw, 2.75rem); }

@media (min-width: 36em) { .inside__item { flex-basis: calc(33.333% - 0.5rem); } }
@media (min-width: 56.25em) { .inside__item { flex: 1 1 0; min-width: 0; } }
@media (min-width: 56.25em) and (max-width: 70em) { .inside__item { font-size: 1rem; } }

/* 9. FACTS PANEL ----------------------------------------------------------- */
.label { background: var(--sand-350); padding-block: clamp(1.5rem, 2.4vw, 1.9rem) clamp(1.75rem, 2.6vw, 2.1rem); }
.label .tracked { max-width: 38em; margin-inline: auto; }
.label__wrap { max-width: 47rem; margin: 1.35rem auto 0; }
.label__wrap--wide { max-width: 68rem; }

.facts {
  border: 1px solid var(--ink);
  padding: 0.3rem 0.45rem 0.25rem;
  font-family: Helvetica, Arial, sans-serif;
  font-size: 0.875rem;
  line-height: 1.2;
  color: #111;
}
.facts__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 0.25rem 1rem;
  padding-bottom: 0.2rem;
  border-bottom: 0.4rem solid #111;
}
.facts__title {
  font-family: "Helvetica Neue", Helvetica, "Arial Black", Arial, sans-serif;
  font-size: clamp(1.6rem, 4.2vw, 2rem);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.01em;
}
.facts__serving { text-align: right; margin-left: auto; }
.facts__cols { display: grid; }
.facts table { width: 100%; border-collapse: collapse; }
.facts caption { text-align: left; }
.facts th, .facts td { padding: 0.12rem 0.1rem; text-align: left; font-weight: 400; vertical-align: top; border-bottom: 1px solid #111; }
.facts thead th { font-size: 0.75rem; font-weight: 700; border-bottom: 0.2rem solid #111; }
.facts td:last-child, .facts thead th:last-child { text-align: right; font-weight: 700; white-space: nowrap; padding-left: 0.75rem; }
.facts b, .facts strong { font-weight: 700; }
.facts .in1 th { padding-left: 0.9rem; }
.facts .in2 th { padding-left: 1.7rem; }
.facts tbody tr:last-child th, .facts tbody tr:last-child td { border-bottom: 0; }
.facts__actives tbody th, .facts__actives tbody td { padding-block: 0.45rem; }
.facts__actives i { font-style: italic; }
.facts__foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.15rem 1.5rem;
  margin-top: 0.1rem;
  padding-top: 0.2rem;
  border-top: 0.4rem solid #111;
  font-size: 0.75rem;
}
.facts-other { margin-top: 0.7rem; font-family: Helvetica, Arial, sans-serif; font-size: 0.9375rem; line-height: 1.25; padding-inline: 0.45rem; }

@media (min-width: 44em) {
  .facts__cols { grid-template-columns: minmax(12.5rem, 0.4fr) 1fr; }
  .facts__cols { column-gap: 0.4rem; }
  .facts__cols > * + * { border-left: 1px solid #111; }
  .facts__actives th:first-child { padding-left: 0.5rem; }
}
@media (max-width: 43.99em) {
  .facts__cols > * + * { border-top: 0.4rem solid #111; margin-top: 0.1rem; }
}

/* Food-style Nutrition Facts (Cacao Bliss) */
.facts--food .facts__layout { display: grid; gap: 0.5rem; }
.facts--food .facts__id { padding-bottom: 0.3rem; }
.facts--food .facts__title { font-size: clamp(1.9rem, 4.5vw, 2.35rem); line-height: 0.95; padding-bottom: 0.45rem; border-bottom: 1px solid #111; }
.facts--food .facts__servings { padding-block: 0.35rem; border-bottom: 0.55rem solid #111; font-size: 1rem; }
.facts--food .facts__servings b { display: block; }
.facts--food .facts__cal { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; padding-top: 0.2rem; }
.facts--food .facts__cal b { font-size: 1.75rem; line-height: 1; font-weight: 900; }
.facts--food .facts__cal small { display: block; font-size: 0.8125rem; font-weight: 400; }
.facts--food .facts__cal strong { font-size: 2.75rem; line-height: 0.9; font-weight: 900; }
.facts--food .facts__tables { display: grid; gap: 0 1.75rem; align-content: start; }
.facts--food table { font-size: 1rem; align-self: start; }
.facts--food thead th { font-size: 0.875rem; border-bottom-width: 0.4rem; }
.facts--food tbody tr.thick th, .facts--food tbody tr.thick td { border-bottom: 0.4rem solid #111; }
.facts--food .facts__minor { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 0 1.75rem; margin: 0; padding: 0; list-style: none; }
.facts--food .facts__minor li { font-size: 1rem; display: flex; gap: 1.5rem; padding: 0.15rem 0.9rem; border-bottom: 1px solid #111; }
.facts--food .facts__note-line { grid-column: 1 / -1; padding: 0.3rem 0.9rem 0.1rem; font-size: 0.9375rem; }
.facts--food .facts__dv { font-size: 0.8125rem; line-height: 1.22; }

@media (min-width: 38em) {
  .facts--food .facts__tables { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 64em) {
  .facts--food .facts__layout { grid-template-columns: 15rem 1fr 8.75rem; gap: 0.6rem; }
  .facts--food .facts__tables { border-left: 1px solid #111; padding-left: 0.5rem; }
}

/* 10. STORY PAGE ----------------------------------------------------------- */
.prose-band { background: var(--sand-50); padding-block: clamp(1.5rem, 2.4vw, 1.9rem) clamp(2.25rem, 3.4vw, 2.6rem); text-align: center; }
.prose-band--sage { background: var(--sage-wash); }
.prose-band .h2 { margin-bottom: 0.95rem; }
.prose-band__text { max-width: 64rem; margin: 1.6rem auto 0; display: grid; gap: 1.2rem; line-height: 1.24; font-size: 1.125rem; }
.prose-band__text--narrow { max-width: 47rem; }

/* Learn: sustainable business model band */
.uvp { background: var(--sand-150); padding-block: clamp(2.5rem, 5vw, 4rem); }
.uvp .kicker { text-align: center; }
.uvp .h2 { margin-top: 0.6rem; }
.uvp .prose-band__text { margin-top: 1.2rem; }
.uvp__cta { margin-top: clamp(1.5rem, 3vw, 2.25rem); display: flex; justify-content: center; }
.uvp__cta .btn { min-width: min(18rem, 100%); justify-content: center; }

.team { background: var(--sand-50); }
.member { padding-block: clamp(1.75rem, 2.6vw, 2.1rem); }
.member:nth-of-type(even) { background: var(--sand-100); }
.member__layout { display: grid; gap: 1.25rem; align-items: start; }
.member__photo { width: min(100%, 16.5rem); }
.member__photo img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.member__role { color: var(--tan-text); font-size: 1.1875rem; text-transform: uppercase; line-height: 1.15; }
.member__name { font-size: clamp(1.8rem, 2.9vw, 2.3rem); line-height: 1.1; margin-block: 0.2rem 0.15rem; }
.member__title { font-size: 1.25rem; line-height: 1.2; }
.member__bio { margin-top: 0.7rem; font-size: 1.1875rem; line-height: 1.27; max-width: 41em; }
.member__quote {
  background: var(--sand-350);
  padding: 1.5rem 1.1rem;
  font-family: var(--serif);
  font-size: 1.3rem;
  line-height: 1.28;
  display: grid;
  align-content: center;
  gap: 1.35rem;
}
.member__quote::before, .member__quote::after {
  content: "";
  display: block;
  width: 6.5rem;
  height: 4px;
  background: #a18265;
}
.member__quote p { max-width: 11.5em; }

@media (min-width: 44em) {
  .member__layout { grid-template-columns: minmax(10rem, 16.5rem) minmax(0, 1fr); column-gap: clamp(1.25rem, 2.8vw, 2.2rem); }
  .member__quote { grid-column: 2; }
}
@media (min-width: 68em) {
  .member__layout { grid-template-columns: 16.5rem minmax(0, 1fr) 13.1rem; align-items: stretch; }
  .member__quote { grid-column: auto; }
  .member__text { align-self: center; }
}

/* Full-bio modal */
html { scrollbar-gutter: stable; }
html:has(dialog[open]) { overflow: hidden; }
html:not(.js) .member__more { display: none; }

.link-btn {
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  cursor: pointer;
}
.link-btn:hover { text-decoration-thickness: 2px; }

.bio {
  width: min(47rem, calc(100% - 1.5rem));
  max-width: none;
  max-height: min(88dvh, 60rem);
  margin: auto;
  padding: 0;
  border: 0;
  background: var(--sand-50);
  color: var(--ink);
  overflow-y: auto;
  overscroll-behavior: contain;
  box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.55);
  opacity: 0;
  transform: translateY(1.25rem);
  transition: opacity 0.35s var(--ease), transform 0.35s var(--ease), overlay 0.35s allow-discrete, display 0.35s allow-discrete;
}
.bio[open] { opacity: 1; transform: none; }
@starting-style { .bio[open] { opacity: 0; transform: translateY(1.25rem); } }
.bio::backdrop {
  background: rgba(29, 20, 15, 0);
  transition: background 0.35s var(--ease), overlay 0.35s allow-discrete, display 0.35s allow-discrete;
}
.bio[open]::backdrop { background: rgba(29, 20, 15, 0.6); }
@starting-style { .bio[open]::backdrop { background: rgba(29, 20, 15, 0); } }

.bio__bar {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  justify-content: flex-end;
  padding: 0.4rem 0.5rem 0;
  background: linear-gradient(var(--sand-50) 70%, rgba(249, 248, 246, 0));
}
.bio__inner { padding: 0 clamp(1.25rem, 5vw, 3rem) clamp(2rem, 5vw, 3rem); }
.bio__head { display: flex; align-items: center; gap: 1.25rem; }
.bio__photo { flex: none; width: clamp(4.5rem, 18vw, 7rem); }
.bio__photo img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.bio__name { font-size: clamp(1.75rem, 4.5vw, 2.3rem); line-height: 1.1; margin-block: 0.15rem 0.1rem; }
.bio .member__role { font-size: 1.0625rem; }
.bio .member__title { font-size: 1.125rem; }
.bio .rule { margin-block: 1.5rem; background: #a18265; }
.bio__text { display: grid; gap: 1rem; font-size: 1.125rem; line-height: 1.5; }

/* 10b. LEARN PAGE ---------------------------------------------------------- */
.promises--intro { background: #f2efea; padding-top: clamp(1.75rem, 2.8vw, 2.25rem); }
.promises__intro { text-align: center; margin-bottom: clamp(1.75rem, 2.8vw, 2.25rem); }
.promises__intro .h2 { margin-top: 0.5rem; }
.promises__lede { max-width: 43em; margin: 0.85rem auto 0; font-size: 1.125rem; line-height: 1.25; }

.split { display: grid; background: var(--sand-150); }
.split__media { position: relative; aspect-ratio: 16 / 9; overflow: hidden; }
.split__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.split__body { padding: clamp(2rem, 5vw, 2.75rem) var(--gutter) clamp(2.25rem, 5vw, 3rem); align-self: center; }
.split__title { margin-bottom: 0.9rem; }
.split__body p { max-width: 25.5em; font-size: 1.125rem; line-height: 1.25; }

@media (min-width: 56.25em) {
  .split { grid-template-columns: 45% 1fr; min-height: clamp(17rem, 23.7vw, 26rem); }
  .split__media { grid-column: 2; grid-row: 1; aspect-ratio: auto; }
  .split__body {
    grid-column: 1; grid-row: 1;
    /* keep the text on the same left edge as the rest of the page */
    padding-left: max(var(--gutter), calc((100vw - var(--wrap)) / 2 + var(--gutter)));
    padding-right: 2rem;
  }
  .split--flip { grid-template-columns: 55.6% 1fr; }
  .split--flip .split__media { grid-column: 1; }
  .split--flip .split__body { grid-column: 2; padding-left: clamp(1.75rem, 2.4vw, 2.5rem); padding-right: var(--gutter); }
}

/* 10c. OUR SCIENCE ---------------------------------------------------------- */
.split--solo { background: #f8f6f1; }
.split--tint { background: var(--sand-150); }
.split--solo .split__body { padding-block: clamp(2.75rem, 6vw, 4.25rem); }
.split--solo .split__body .rule { margin-block: 1rem 1.2rem; }
.split--solo .split__body p:last-child { margin-top: 1.6rem; }
@media (min-width: 56.25em) {
  .split--solo { min-height: clamp(19rem, 27vw, 30rem); }
}
/* Romance: the artwork is a full-section layer, text sits on top of it (its powder scatters under the
   text), matching the comp. The image is confined to a WIDTH percentage of the section (not sized by
   height), so it shrinks together with the text column as the viewport narrows and the two never collide;
   below the mobile-stack breakpoint the section instead stacks image-above-text like every other split. */
.split--overlay { background: #f4f3ef; }
@media (min-width: 56.25em) {
  .split--overlay { display: block; position: relative; min-height: 0; }
  .split--overlay .split__media {
    position: absolute; top: 0; bottom: 0; right: 0;
    width: 58%; aspect-ratio: auto;
  }
  .split--overlay .split__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: right center; }
  .split--overlay .split__body { position: relative; z-index: 1; max-width: 43%; padding-block: clamp(2.5rem, 6vw, 4.5rem); }
}

.promises--rules { background: var(--sand-150); }
.promises__list--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.promises--rules .promise { padding-inline: clamp(0.75rem, 2vw, 2.5rem); }
.promises--rules .promise p { max-width: 13em; }
@media (min-width: 56.25em) {
  .promises__list--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .promises--rules .promise + .promise { border-left: 1px solid var(--line); }
}

.nature { background: #f8f6f1; padding-block: clamp(2.5rem, 5vw, 4rem); }
.nature__layout { display: grid; gap: 2rem; }
.nature__intro .rule { margin-block: 1.1rem 1.2rem; }
.nature__intro p { max-width: 24em; font-size: 1.125rem; line-height: 1.3; }
.nature__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.75rem 0;
}
.nature__item { text-align: center; padding-inline: clamp(0.75rem, 1.6vw, 1.5rem); display: grid; grid-template-rows: auto 1fr; }
.nature__item h3 {
  font-family: var(--sans);
  font-size: 1.0625rem;
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1.15;
  margin-bottom: 1rem;
  align-self: start;
}
.nature__item picture { align-self: center; }
.nature__item img { width: 100%; max-width: 11rem; margin-inline: auto; }
@media (min-width: 56.25em) {
  .nature__layout { grid-template-columns: minmax(0, 0.44fr) minmax(0, 1fr); gap: clamp(2rem, 4vw, 4rem); align-items: center; }
  .nature__list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .nature__item + .nature__item { border-left: 1px solid var(--line); }
}

/* 10d. CONTACT --------------------------------------------------------------- */
.contact { background: #f8f6f1; padding-block: clamp(3rem, 6vw, 5rem); }
.contact-head { text-align: center; max-width: 46em; margin-inline: auto; }
.contact-head__kicker {
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.32em;
  margin-bottom: 0.9rem;
}
.contact-head .rule { margin-inline: auto; margin-block: 1.1rem 1.3rem; width: 5.25rem; }
.contact-head__text { font-size: 1.1875rem; line-height: 1.35; }
.contact__layout { display: grid; gap: 2.5rem; margin-top: clamp(2rem, 4.5vw, 3.75rem); }
.contact__note { text-align: center; color: #6f675f; margin-top: 1rem; font-size: 1rem; }
.form-embed iframe { width: 100% !important; max-width: 100%; border: 0; display: block; }
.btn--sage { background: var(--sage); color: #fff; }
.btn--sage:hover { background: #5f7548; color: #fff; }
.methods { list-style: none; padding: 0; margin: 0; display: grid; gap: 1.75rem; align-content: start; }
.method { display: grid; grid-template-columns: auto 1fr; gap: 1.1rem; align-items: center; }
.method__badge {
  width: 4.5rem;
  height: 4.5rem;
  border-radius: 50%;
  background: var(--sage-wash);
  display: grid;
  place-items: center;
}
.method__badge img { width: 2.1rem; height: 2.1rem; }
.method__label { font-family: var(--sans); font-size: 1.25rem; font-weight: 700; margin-bottom: 0.15rem; }
.method__value { font-family: var(--sans); font-size: 1.125rem; color: var(--ink); text-decoration: none; }
a.method__value:hover { text-decoration: underline; }
@media (min-width: 56.25em) {
  .contact__layout { grid-template-columns: minmax(0, 1fr) minmax(0, 0.52fr); gap: clamp(2.5rem, 5vw, 5rem); }
  .contact__aside { border-left: 1px solid var(--line); padding-left: clamp(2rem, 4vw, 4rem); padding-top: 1rem; }
}

/* 10c-2. OUR SCIENCE: quality steps, why band, article modal ---------------- */
.qsteps { background: #f8f6f1; padding-block: clamp(2.75rem, 5.5vw, 4.5rem); }
.qsteps__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem 0;
}
.qstep { padding-inline: clamp(0.75rem, 1.8vw, 2rem); }
.qstep__num {
  display: grid;
  place-items: center;
  width: 3.4rem;
  height: 3.4rem;
  border-radius: 50%;
  background: var(--sage);
  color: #fff;
  font-family: var(--sans);
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: 1.1rem;
}
.qstep__title { font-family: var(--serif); font-size: 1.375rem; font-weight: 600; line-height: 1.15; margin-bottom: 0.6rem; }
.qstep p { font-size: 1rem; line-height: 1.3; }
@media (min-width: 56.25em) {
  .qsteps__list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .qstep + .qstep { border-left: 1px solid var(--line); }
}
.why {
  margin-top: clamp(2.25rem, 4.5vw, 3.5rem);
  background: var(--sand-150);
  display: grid;
  gap: 1rem;
  padding: clamp(1.25rem, 3vw, 2rem) clamp(1.25rem, 3.5vw, 2.5rem);
}
.why__label { display: flex; align-items: center; gap: 0.9rem; font-family: var(--serif); font-size: 1.375rem; font-weight: 600; white-space: nowrap; }
.why__label img, .why__label .why__icon { flex: none; width: 2.75rem; height: auto; }
.why__text { font-size: 1.0625rem; line-height: 1.35; }
@media (min-width: 56.25em) {
  .why { grid-template-columns: auto 1fr; align-items: center; gap: clamp(1.5rem, 4vw, 3.5rem); }
  .why__label { padding-right: clamp(1.25rem, 3vw, 2.5rem); border-right: 1px solid var(--line); }
}
.bio--article { max-width: 46rem; }
.bio__head--plain { padding-top: 0.25rem; }
.bio__head--plain .bio__role { margin-top: 0.4rem; }
.bio--article .bio__text h3 { font-family: var(--serif); font-size: 1.375rem; font-weight: 600; margin: 1.6em 0 0.5em; }
.bio--article .bio__text ul { margin: 0.8em 0 0.8em 1.2em; list-style: disc; }
.bio--article .bio__text li { margin-bottom: 0.5em; }

/* 11. PRODUCTS PAGE -------------------------------------------------------- */
.hero--products { --m-pos: 50% 50%; }
.lineup { position: relative; display: flex; justify-content: center; align-items: flex-end; padding: 1.5rem 0 0; }
.lineup picture { flex: 0 1 34%; min-width: 0; }
.lineup picture:nth-child(2) { flex-basis: 38%; margin-inline: -7%; z-index: 1; }
.lineup picture:nth-child(1) img { transform: rotate(-5deg) translateY(4%); }
.lineup picture:nth-child(3) img { transform: rotate(5deg) translateY(4%); }
.lineup img { width: 100%; filter: drop-shadow(0 1.2rem 1.5rem rgba(0, 0, 0, 0.5)); }

@media (min-width: 56.25em) {
  .hero--products { aspect-ratio: auto; min-height: 0; max-height: none; }
  .hero--products .hero__grid { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr); align-items: center; gap: 2rem; }
  .hero--products .hero__body { padding-block: clamp(2.5rem, 5vw, 4.5rem); }
  .lineup { padding: 1.5rem 0; }
}
.hero--products {
  background:
    radial-gradient(ellipse 60% 90% at 72% 60%, #4a3629 0%, rgba(74, 54, 41, 0) 70%),
    var(--cocoa);
}

.shelf { padding-block: clamp(2.5rem, 5vw, 4.25rem); background: var(--sand-350); }
.shelf:nth-of-type(even) { background: var(--sand-200); }
.shelf__layout { display: grid; gap: 1.5rem 3rem; align-items: center; }
.shelf__box img { width: min(100%, 36rem); margin-inline: auto; }
.strip { background: var(--sand-350); padding-block: clamp(1.5rem, 2.6vw, 2rem); }
.shelf .rule { margin-top: 1.1rem; }
.shelf__head { display: flex; align-items: center; gap: 1rem; }
.shelf__head img { width: 4.25rem; flex: none; }
.shelf__flavor { color: var(--ink-soft); font-size: 1rem; text-transform: uppercase; letter-spacing: 0.04em; }
.shelf__blurb { margin-top: 1.1rem; font-size: 1.3125rem; line-height: 1.25; max-width: 24em; }
.shelf__inside { margin-top: 1.5rem; }
.shelf__inside h3 { font-size: 0.9375rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; }
.chips { display: flex; flex-wrap: wrap; gap: 0.35rem 1.1rem; margin-top: 0.6rem; }
.chip { display: flex; align-items: center; gap: 0.45rem; font-size: 1.0625rem; }
.chip img { width: 2.6rem; height: 2.6rem; object-fit: contain; }
.shelf__meta { margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--line); font-size: 1.0625rem; color: var(--ink-soft); max-width: 30em; }
.shelf__actions { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 1.6rem; }
.shelf__actions .btn { flex: 1 1 14rem; max-width: 18rem; gap: 2rem; }

@media (min-width: 56.25em) {
  .shelf__layout { grid-template-columns: 1fr 1fr; }
  .shelf:nth-of-type(even) .shelf__box { order: 2; }
}

/* 12. LEGAL PAGES ---------------------------------------------------------- */
.page-head { background: var(--sand-350); padding-block: clamp(2.5rem, 5vw, 4rem); }
.page-head h1 { font-size: clamp(2.5rem, 5vw, 3.75rem); line-height: 1.02; margin-bottom: 1.25rem; }
.page-head p { margin-top: 1.25rem; color: var(--ink-soft); }

.legal { background: var(--sand-50); padding-block: clamp(2.5rem, 4.5vw, 4rem) clamp(3rem, 5vw, 5rem); }
.legal__layout { display: grid; gap: 2.5rem; }
.legal__toc { font-size: 1rem; }
.legal__toc h2 { font-family: var(--sans); font-size: 0.9375rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 0.6rem; }
.legal__toc ol { margin: 0; padding-left: 1.4rem; display: grid; gap: 0.3rem; }
.legal__toc a { text-decoration: none; }
.legal__toc a:hover { text-decoration: underline; }
.legal__body { max-width: 44rem; font-size: 1.125rem; line-height: 1.55; }
.legal__body h2 { font-size: 1.75rem; line-height: 1.15; margin: 2.6rem 0 0.7rem; scroll-margin-top: 7rem; }
.legal__body h2:first-child { margin-top: 0; }
.legal__body h3 { font-size: 1.125rem; margin: 1.5rem 0 0.35rem; }
.legal__body p + p, .legal__body ul + p, .legal__body p + ul { margin-top: 0.85rem; }
.legal__body ul { padding-left: 1.3rem; display: grid; gap: 0.35rem; }
mark { background: #f3e3b8; color: inherit; padding: 0 0.2em; }
.note {
  margin-bottom: 2.25rem;
  padding: 1rem 1.2rem;
  border-left: 4px solid var(--tan);
  background: var(--sand-100);
  font-size: 1rem;
  line-height: 1.45;
}

@media (min-width: 60em) {
  .legal__layout { grid-template-columns: 15rem minmax(0, 1fr); gap: 4rem; }
  .legal__toc { position: sticky; top: 7rem; align-self: start; }
}

.notfound { background: var(--sand-350); padding-block: clamp(4rem, 10vw, 8rem); text-align: center; }
.notfound h1 { font-size: clamp(2.5rem, 6vw, 4rem); line-height: 1.02; margin-bottom: 1.25rem; }
.notfound p { margin: 1.5rem auto 2rem; max-width: 28em; font-size: 1.1875rem; }
.notfound .btn { margin-inline: auto; }

/* 13. CTA + FOOTER --------------------------------------------------------- */
.closing {
  position: relative;
  overflow: hidden;
  background: var(--cocoa);
  color: #fff;
}
.closing__media {
  position: relative;
  aspect-ratio: 16 / 8;
  overflow: hidden;
}
.closing__media img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 78%;
}
.closing__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(29, 20, 15, 0) 55%, var(--cocoa) 100%);
}
.closing__body { position: relative; padding-block: 0.5rem 2.25rem; }
.closing__title { font-size: clamp(1.9rem, 3.35vw, 2.75rem); line-height: 1.08; }
.closing__text { margin-top: 0.4rem; max-width: 25em; font-size: clamp(1.0625rem, 1.65vw, 1.3125rem); line-height: 1.27; }
.closing__tag { margin-top: 0.55rem; font-family: var(--serif); font-weight: 600; font-size: clamp(1.5rem, 2.55vw, 2.1rem); line-height: 1.1; }

@media (min-width: 56.25em) {
  .closing { display: grid; align-items: center; min-height: clamp(12rem, 17.3vw, 17rem); }
  .closing__media {
    position: absolute;
    top: 0; bottom: 0; right: 0;
    width: 62%;
    aspect-ratio: auto;
  }
  .closing__media img { object-position: 38% 80%; transform: scale(1.18); transform-origin: 50% 85%; }
  .closing__media::after {
    background: linear-gradient(90deg, var(--cocoa) 0%, rgba(29, 20, 15, 0.6) 22%, rgba(29, 20, 15, 0) 48%);
  }
  .closing__body { padding-block: 2rem; }
}

.site-footer { background: var(--sand-400); }
.site-footer__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.25rem clamp(2rem, 8vw, 6.75rem);
  padding-block: clamp(1.25rem, 2vw, 1.6rem);
}
.site-footer__brand img { width: clamp(9.5rem, 20vw, 16rem); }
.site-footer__links { display: flex; flex-wrap: wrap; gap: 0.5rem clamp(2rem, 8vw, 6.75rem); text-transform: uppercase; font-size: 1rem; }
.site-footer__links a { text-decoration: none; padding-block: 0.4rem; }
.site-footer__links a:hover { text-decoration: underline; }
.site-footer__copy { font-size: 1.0625rem; }
.site-footer__fine {
  padding-block: 0.9rem 1.4rem;
  border-top: 1px solid rgba(31, 24, 18, 0.22);
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--ink-soft);
  max-width: none;
}
.site-footer__fine p { max-width: 70rem; }

/* Toast for links that don't have a destination yet */
.toast {
  position: fixed;
  left: 50%;
  bottom: 1.5rem;
  z-index: 300;
  max-width: calc(100% - 2rem);
  padding: 0.8rem 1.3rem;
  background: var(--ink);
  color: #fff;
  font-size: 1rem;
  box-shadow: 0 12px 30px -10px rgba(0, 0, 0, 0.5);
  transform: translate(-50%, 1rem);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease), visibility 0s 0.3s;
}
.toast.is-on { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition-delay: 0s; }

/* 14. MOTION ---------------------------------------------------------------
   One orchestrated moment on load (the hero), then quiet reveals on scroll.
   All of it is skipped when the visitor asks for reduced motion, and the
   scroll reveals only arm themselves once site.js has added .js to <html>. */
@media (prefers-reduced-motion: no-preference) {
  @keyframes rise   { from { opacity: 0; transform: translateY(1.1rem); } to { opacity: 1; transform: none; } }
  @keyframes draw   { from { transform: scaleX(0); } to { transform: scaleX(1); } }
  @keyframes settle { from { scale: 1.045; } to { scale: 1; } }
  @keyframes fade   { from { opacity: 0; } to { opacity: 1; } }

  .hero__title, .hero__sub, .hero__text { animation: rise 0.9s var(--ease) both; }
  .hero__sub  { animation-delay: 0.12s; }
  .hero .rule { animation: draw 0.9s var(--ease) 0.35s both; }
  .hero__text { animation-delay: 0.5s; }
  .hero__media img { animation: settle 2.4s var(--ease) both, fade 0.9s ease-out both; }
  .lineup picture { animation: rise 1s var(--ease) both; }
  .lineup picture:nth-child(2) { animation-delay: 0.15s; }
  .lineup picture:nth-child(3) { animation-delay: 0.3s; }

  .js [data-reveal] {
    opacity: 0;
    transform: translateY(1rem);
    transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
    transition-delay: calc(var(--i, 0) * 90ms);
  }
  .js [data-reveal].is-in { opacity: 1; transform: none; }

  .js .split__media[data-reveal] { transform: none; }
  .js .split__media[data-reveal] img { scale: 1.06; transition: scale 1.6s var(--ease); }
  .js .split__media[data-reveal].is-in img { scale: 1; }

  .js .rule[data-reveal] { opacity: 1; transform: scaleX(0); transition: transform 0.9s var(--ease) 0.15s; }
  .js .rule[data-reveal].is-in { transform: scaleX(1); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

@media print {
  .site-header { position: static; }
  .site-header__tools, .nav, .closing__media, .toast { display: none !important; }
}
/* ==========================================================================
   15. WORDPRESS EXTRAS
   ========================================================================== */
.screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  word-wrap: normal !important;
}
/* Core's lazy-image sizing fix, moved here from an inline <style>. */
img:is([sizes="auto" i], [sizes^="auto," i]) { contain-intrinsic-size: 3000px 1500px; }

/* wp_nav_menu markup: the drawer's second level, and the footer list inside the drawer */
.menu__list .sub-menu { padding: 0 0 1rem; margin: 0; display: grid; gap: 0.1rem; list-style: none; }
.menu__list > li > .sub-menu > li { border: 0; }
.menu__minor li { list-style: none; }
.brand img, .custom-logo { height: auto; }

/* Editor-written pages (policies, anything using the default template) */
.legal__layout--plain { display: block; }
.legal__layout--plain .legal__body { margin-inline: auto; }
.page-head__intro { font-size: 1.25rem; max-width: 40em; color: var(--ink); }
.entry-content ol { padding-left: 1.4rem; display: grid; gap: 0.35rem; }
.entry-content p + ol, .entry-content ol + p, .entry-content p + h3 { margin-top: 0.85rem; }
.entry-content h3 { font-family: var(--sans); font-weight: 700; }
.entry-content img { height: auto; }
.entry-content blockquote { border-left: 4px solid var(--tan); padding-left: 1.2rem; font-family: var(--serif); font-size: 1.3rem; margin-block: 1.5rem; }
.entry-content table { width: 100%; border-collapse: collapse; margin-block: 1.25rem; }
.entry-content th, .entry-content td { padding: 0.6rem 0.75rem; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.alignleft { float: left; margin: 0.4em 1.5em 1em 0; }
.alignright { float: right; margin: 0.4em 0 1em 1.5em; }
.aligncenter { display: block; margin: 1em auto; }
.wp-caption { max-width: 100%; }
.wp-caption-text { font-size: 0.9375rem; padding: 0.4em 0; color: var(--ink-soft); }
.pagination, .posts-navigation { margin-top: 2rem; }


/* Contact page (holding layout; no comp yet) */
.contact { background: var(--sand-50); padding-block: clamp(2.5rem, 5vw, 4.5rem); }
.contact__layout { display: grid; gap: 2.5rem; }
.contact__intro .h2 { margin-bottom: 1rem; }
.contact__intro p { max-width: 28em; font-size: 1.1875rem; line-height: 1.4; }
.contact__details { list-style: none; padding: 0; margin: 1.5rem 0 0; display: grid; gap: 0.4rem; font-size: 1.1875rem; }
@media (min-width: 56.25em) { .contact__layout { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 5rem); } }

.contact-form { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }
.contact-form .full, .contact-form > div:has(textarea) { grid-column: 1 / -1; }
.contact-form .hp { position: absolute; left: -9999px; }
.contact-form label, .ff-wrap .ff-el-input--label label { display: block; margin-bottom: 0.4rem; font-size: 0.9375rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; }
.contact-form input, .contact-form textarea, .ff-wrap .ff-el-form-control {
  width: 100%;
  padding: 0.8em 0.9em;
  border: 1px solid var(--ink);
  border-radius: 0;
  background: #fff;
  color: var(--ink);
  font: inherit;
  font-size: 1.0625rem;
  line-height: 1.4;
  height: auto;
  box-shadow: none;
}
.contact-form textarea, .ff-wrap textarea.ff-el-form-control { min-height: 9rem; resize: vertical; }
.contact-form input:focus, .contact-form textarea:focus, .ff-wrap .ff-el-form-control:focus { outline: 2px solid var(--ink); outline-offset: 2px; border-color: var(--ink); box-shadow: none; }
.contact-form .btn { border: 0; width: 100%; max-width: none; justify-content: center; }
.form-msg { grid-column: 1 / -1; padding: 1em 1.2em; margin-bottom: 1.2rem; background: var(--sand-100); border-left: 4px solid var(--tan); font-weight: 700; }
@media (max-width: 40em) { .contact-form { grid-template-columns: 1fr; } }

/* Fluent Forms (rules use !important where Fluent sets inline styles) */
.ff-wrap, .ff-wrap .fluentform, .ff-wrap .frm-fluent-form { width: 100% !important; max-width: none !important; margin: 0 !important; min-width: 0; }
.ff-wrap .fluentform { display: flex; flex-direction: column; }
.ff-wrap .frm-fluent-form, .ff-wrap .frm-fluent-form > fieldset { display: grid !important; grid-template-columns: 1fr 1fr; gap: 1.2rem; border: 0 !important; padding: 0 !important; margin: 0 !important; min-width: 0; }
.ff-wrap .frm-fluent-form > fieldset { grid-column: 1 / -1; width: 100%; }
.ff-wrap .frm-fluent-form > fieldset > legend { display: none; }
.ff-wrap .ff-el-group { margin: 0 !important; min-width: 0; width: 100%; max-width: none; }
.ff-wrap .ff-el-group.full, .ff-wrap .ff-el-group:has(textarea), .ff-wrap .ff_submit_btn_wrapper, .ff-wrap .ff-el-group:has(.ff-btn-submit) { grid-column: 1 / -1; }
.ff-wrap .ff-el-is-required.asterisk-right label::after, .ff-wrap .ff-el-is-required.asterisk-left label::before { color: var(--bliss); }
.ff-wrap .ff-btn-submit {
  display: inline-block;
  min-width: 14rem;
  min-height: 3.375rem !important;
  padding: 0.6rem 2rem !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: var(--tan) !important;
  color: var(--ink) !important;
  font: inherit !important;
  font-size: 1.1875rem !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  line-height: 1.1 !important;
  box-shadow: none !important;
  cursor: pointer;
}
.ff-wrap .ff-btn-submit:hover, .ff-wrap .ff-btn-submit:focus { background: var(--tan-deep) !important; color: #fff !important; }
.ff-wrap .ff-message-success { order: -1; margin: 0 0 1.2rem; padding: 1em 1.2em; background: var(--sand-100); border: 0; border-left: 4px solid var(--tan); font-weight: 700; box-shadow: none; }
.ff-wrap .ff-message-success:focus { outline: 2px solid var(--ink); outline-offset: 3px; }
.ff-wrap .error, .ff-wrap .text-danger, .ff-wrap .ff-el-is-error .error { color: var(--bliss); font-size: 0.9375rem; }
.ff-wrap .ff-el-is-error .ff-el-form-control { border-color: var(--bliss); }
@media (max-width: 40em) { .ff-wrap .frm-fluent-form, .ff-wrap .frm-fluent-form > fieldset { grid-template-columns: 1fr; } }

/* Cookie notice */
.cookie {
  position: fixed;
  left: 1rem; right: 1rem; bottom: 1rem;
  z-index: 60;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.9rem 2rem;
  max-width: 64rem;
  margin-inline: auto;
  padding: 1rem 1.4rem;
  background: var(--cocoa);
  color: #fff;
  box-shadow: 0 12px 30px -10px rgba(0, 0, 0, 0.5);
}
.cookie[hidden] { display: none; }
.cookie p { max-width: 44em; font-size: 1rem; }
.cookie a { color: inherit; }
.cookie :focus-visible { outline-color: #fff; }
.cookie__ok { width: auto; min-height: 2.75rem; padding: 0.5rem 1.6rem; border: 0; font-size: 1.0625rem; }

/* Logged-in admin bar vs. the sticky header */
.admin-bar .site-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .site-header { top: 46px; } }
@media (max-width: 600px) { .admin-bar .site-header { top: 0; } }

/* Shopify buy buttons and cart (official Shopify plugin) */
.buy { display: contents; }
.buy shopify-context { display: contents; }
.shopify-ready .buy__fallback { display: none; }
button.btn { -webkit-appearance: none; appearance: none; }
.btn[disabled] { opacity: 0.55; cursor: not-allowed; }
.btn[disabled]:hover .btn__arrow { transform: none; }
.link-btn--plain { text-decoration: none; text-transform: uppercase; padding-block: 0.4rem; }
.link-btn--plain:hover { text-decoration: underline; }

.icon-btn[data-cart-open] { position: relative; }
.icon-btn[data-cart-open].has-items::after {
  content: "";
  position: absolute;
  top: 0.45rem; right: 0.35rem;
  width: 0.6rem; height: 0.6rem;
  border-radius: 50%;
  background: var(--energy);
  box-shadow: 0 0 0 2px var(--sand-300);
}

/* --------------------------------------------------------------------------
   Shopify cart drawer, restyled to the brand.
   The drawer is rendered by Shopify's <shopify-cart> web component inside a shadow root, so page
   CSS cannot reach it directly. ::part() is the component's documented styling API
   (https://shopify.dev/docs/api/storefront-web-components/components/shopify-cart); anything the
   parts don't cover keeps Shopify's default look.
   -------------------------------------------------------------------------- */
shopify-cart::part(dialog) {
  font-family: var(--sans);
  color: var(--ink);
  background: var(--sand-50);
  border: 0;
  border-radius: 0;
  box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.55);
}
shopify-cart::part(line-heading) {
  font-family: var(--sans);
  font-weight: 700;
  color: var(--ink);
}
shopify-cart::part(line-image) { border-radius: 0; }
/* Checkout */
shopify-cart::part(primary-button) {
  background: var(--tan);
  color: var(--ink);
  border: 0;
  border-radius: 0;
  min-height: 3.375rem;
  padding: 0.6rem 2rem;
  font-family: var(--sans);
  font-size: 1.1875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  transition: background 0.2s ease, color 0.2s ease;
}
shopify-cart::part(primary-button):hover { background: var(--tan-deep); color: #fff; }
/* Quantity steppers, remove, close */
shopify-cart::part(secondary-button) {
  background: transparent;
  color: var(--ink);
  fill: var(--ink);
  border: 1px solid var(--ink);
  border-radius: 0;
}
shopify-cart::part(secondary-button):hover { background: var(--ink); color: var(--sand-50); fill: var(--sand-50); }
/* Discount code UI */
shopify-cart::part(tertiary-button) {
  background: transparent;
  color: var(--ink);
  fill: var(--ink);
  border: 1px solid var(--ink);
  border-radius: 0;
  font-family: var(--sans);
  font-weight: 700;
  text-transform: uppercase;
}
/* The discount input draws its own border inside the part; adding one here doubles it. */
shopify-cart::part(input-field) {
  border: 0;
  background: transparent;
  color: var(--ink);
  font-family: var(--sans);
}
shopify-cart::part(discount-code) { font-family: var(--sans); color: var(--ink); }