/* ============================================================
   BELOUCHE'S KITCHEN — CRAZY THAI SAUCE
   Landing page stylesheet

   Palette source: the brand's own USPTO trademark filing, which
   describes the label as "red letters, green leaves, black
   background". Structure/rhythm inspired by terryhoproducts.com
   (split hero, oversized ghost wordmark, pill CTAs, warm cream).
   ============================================================ */

/* ---------- 1. TOKENS ---------- */
/* Palette sampled directly from the client's own marketing artwork
   (see README). Their identity is deep oxblood red + black + pure
   white — not the cream/gold of the reference site. */
:root {
  /* Brand red — #630B0B was 34% of all red pixels in "Find Us Near You" */
  --red:        #630B0B;
  --red-deep:   #6A090A;   /* gradient centre */
  --red-dark:   #4E1212;   /* gradient outer edge */
  --red-black:  #3A0808;

  --accent:      #D42527;  /* map pins / label ring — 5.13:1 on white */
  --accent-lift: #E43C3C;

  --ink:      #0A0A0A;     /* cap + label black */
  --ink-soft: #241C1C;

  --white:  #FFFFFF;
  --paper:  #FBF9F7;       /* barely-warm content ground */
  --paper-2:#F4EFEA;
  --sand:   #F5E6D3;       /* warm accent on red — 10.7:1 */

  --sauce-cream: #EDE3D6;  /* Original dressing */
  --sauce-cream-hi: #FCF7F6;
  --sauce-cream-lo: #D2C4B2;
  --sauce-green: #CCC282;  /* Green dressing */
  --sauce-green-hi: #DBD6B6;
  --sauce-green-lo: #A99E63;

  --leaf: #2E7D46;
  --leaf-text: #1F5C33;   /* 7.4:1 on paper */
  --leaf-mist: #E8F1E9;

  /* Semantic */
  --bg:       var(--paper);
  --fg:       var(--ink);
  --fg-muted: #5A5150;
  --surface:  var(--white);
  --border:   #E4DCD5;
  --border-firm: var(--ink);
  --ring:     var(--accent);

  /* Type — Archivo Black display + Archivo text, matching the
     heavy all-caps grotesque used across their promo artwork. */
  --font-display: "Archivo Black", "Archivo", Impact, sans-serif;
  --font-ui: "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  --step--1: clamp(0.80rem, 0.78rem + 0.10vw, 0.875rem);
  --step-0:  clamp(1.00rem, 0.96rem + 0.20vw, 1.125rem);
  --step-1:  clamp(1.15rem, 1.06rem + 0.45vw, 1.40rem);
  --step-2:  clamp(1.50rem, 1.30rem + 1.00vw, 2.15rem);
  --step-3:  clamp(1.90rem, 1.50rem + 2.00vw, 3.10rem);
  --step-4:  clamp(2.40rem, 1.70rem + 3.40vw, 4.40rem);
  --step-5:  clamp(2.90rem, 1.80rem + 5.40vw, 6.20rem);

  --s-1: 0.5rem;  --s-2: 1rem;   --s-3: 1.5rem;  --s-4: 2rem;
  --s-5: 3rem;    --s-6: 4rem;   --s-7: 6rem;    --s-8: 8rem;

  --wrap: 1240px;
  --radius-pill: 999px;
  --radius: 14px;

  --shadow-lift: 0 18px 40px -18px rgba(10, 10, 10, 0.42);
  --shadow-card: 0 2px 0 0 var(--ink);

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur: 260ms;

  /* their signature background wash */
  --red-wash: radial-gradient(120% 95% at 50% 18%, var(--red-deep) 0%, var(--red) 42%, var(--red-dark) 100%);
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-ui);
  font-size: var(--step-0);
  line-height: 1.6;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;             /* guards the oversized ghost type */
}

img, svg, video { display: block; max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 400;              /* Archivo Black ships at 400 */
  line-height: 1.0;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  text-wrap: balance;
}
/* Card-level headings stay sentence case so body copy keeps its rhythm */
.use h3, .recipe h3, .footer h4 {
  font-family: var(--font-ui);
  font-weight: 700;
  text-transform: none;
  letter-spacing: -0.01em;
  line-height: 1.2;
}
p { text-wrap: pretty; }

:focus-visible {
  outline: 3px solid var(--ring);
  outline-offset: 3px;
  border-radius: 4px;
}
.on-dark :focus-visible { outline-color: var(--sand); }

.wrap { width: min(100% - 2.5rem, var(--wrap)); margin-inline: auto; }
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--ink); color: var(--white);
  padding: var(--s-2) var(--s-3); border-radius: 0 0 var(--radius) 0;
}
.skip:focus { left: 0; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- 3. TYPE HELPERS ---------- */
.eyebrow {
  font-family: var(--font-ui);
  font-size: var(--step--1);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--accent);
}
.on-dark .eyebrow { color: var(--sand); }

.lede {
  font-size: var(--step-1);
  line-height: 1.45;
  color: var(--fg-muted);
  max-width: 56ch;
}
.on-dark .lede { color: rgba(255, 255, 255, 0.78); }

.h-section { font-size: var(--step-3); }
.h-hero    { font-size: var(--step-5); letter-spacing: -0.04em; }

/* ---------- 4. BUTTONS ---------- */
.btn {
  --btn-bg: var(--ink);
  --btn-fg: var(--white);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  min-height: 52px;                /* > 44px touch target */
  padding: 0.85rem 1.75rem;
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 2px solid var(--btn-bg);
  border-radius: var(--radius-pill);
  font-size: var(--step--1);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--dur) var(--ease),
              background-color var(--dur) var(--ease),
              color var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease);
}
.btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-lift); }
.btn:active { transform: translateY(0); }
.btn svg { width: 1.1em; height: 1.1em; flex: none; }

.btn--red   { --btn-bg: var(--accent); --btn-fg: #fff; }
.btn--red:hover { --btn-bg: var(--accent-lift); }
.btn--sand  { --btn-bg: var(--sand); --btn-fg: var(--ink); }
.btn--white { --btn-bg: var(--white); --btn-fg: var(--ink); }
.btn--ghost {
  --btn-bg: transparent; --btn-fg: var(--ink);
  border-color: currentColor;
}
.btn--ghost:hover { --btn-bg: var(--ink); --btn-fg: var(--white); }
.on-dark .btn--ghost { --btn-fg: var(--white); }
.on-dark .btn--ghost:hover { --btn-bg: var(--white); --btn-fg: var(--ink); }

/* ---------- 5. ANNOUNCEMENT BAR ---------- */
.announce {
  background: var(--accent);
  color: #fff;
  text-align: center;
  padding: 0.7rem var(--s-2);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.announce a {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 0.5em; color: #fff; min-height: 44px;
}
.announce svg { width: 1.05em; height: 1.05em; }
.announce u { text-underline-offset: 3px; }

/* ---------- 6. NAV ---------- */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: var(--sand);
  border-bottom: 1px solid rgba(10, 10, 10, 0.14);
  transition: box-shadow var(--dur) var(--ease);
}
.nav.is-stuck { box-shadow: 0 8px 24px -16px rgba(20,16,14,.45); }
.nav__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-3);
  min-height: 76px;
}
.brand {
  display: flex; align-items: center; gap: 0.7rem;
  text-decoration: none; flex: none; min-height: 44px;
}
.brand__mark {
  width: 46px; height: 46px; flex: none;
  color: var(--ink);               /* the SVG fills with currentColor */
}
.brand__text { display: grid; line-height: 1; }
.brand__name {
  font-family: var(--font-display);
  font-weight: 900; font-size: 1.06rem;
  letter-spacing: -0.02em; text-transform: uppercase;
}
.brand__sub {
  font-size: 0.6rem; font-weight: 700;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--red); margin-top: 3px;   /* 10.7:1 on cream; --accent would be 4.19:1 */
}
.nav__links { display: flex; align-items: center; gap: var(--s-4); }
.nav__links a {
  font-size: var(--step--1); font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.09em;
  text-decoration: none;
  padding: 0.85rem 0;              /* 44px+ touch target */
  position: relative;
}
.nav__links a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0.62rem;
  height: 2px; background: var(--accent);
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--dur) var(--ease);
}
.nav__links a:hover::after { transform: scaleX(1); }
.nav__cta { flex: none; }

.nav__toggle {
  display: none;
  width: 48px; height: 48px;
  align-items: center; justify-content: center;
  background: none; border: 2px solid var(--ink);
  border-radius: var(--radius-pill); cursor: pointer;
}
.nav__toggle svg { width: 20px; height: 20px; }
.nav__toggle .icon-close, .nav__toggle[aria-expanded="true"] .icon-open { display: none; }
.nav__toggle[aria-expanded="true"] .icon-close { display: block; }

/* ---------- 7. HERO (split panel, mirrors the inspiration) ---------- */
.hero { display: grid; grid-template-columns: 1fr 1fr; min-height: min(86vh, 780px); }

.hero__stage {
  position: relative;
  display: grid; place-items: center;
  background: var(--red-wash);
  overflow: hidden;
  padding: var(--s-4) var(--s-4);
  isolation: isolate;
}
/* Oversized repeated ghost wordmark behind the bottle */
.hero__ghost {
  position: absolute; inset: -6% -12%;
  z-index: -1;
  display: grid;
  align-content: center;
  gap: 0.02em;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(3.5rem, 9vw, 8rem);
  line-height: 0.88;
  letter-spacing: -0.045em;
  text-transform: uppercase;
  color: rgba(0, 0, 0, 0.22);
  white-space: nowrap;
  user-select: none;
  pointer-events: none;
}
.hero__ghost span:nth-child(even) { margin-left: -0.35em; }

.hero__bottles {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.hero__bottle--back {
  transform: rotate(7deg) translateX(8%) translateY(-2%);
  transform-origin: bottom center;
  height: min(60vh, 524px);
}
.hero__bottle--front {
  transform: rotate(-5deg) translateX(-8%);
  transform-origin: bottom center;
  z-index: 1;
  filter: drop-shadow(-14px 18px 24px rgba(0,0,0,.42));
}
.hero__bottle {
  height: min(66vh, 580px);
  width: auto;
  max-width: none;
  filter: drop-shadow(0 34px 44px rgba(0,0,0,.42));
}
.hero__bottles { animation: float 7s var(--ease) infinite; }
@keyframes float {
  0%, 100% { transform: translateY(0) rotate(-1deg); }
  50%      { transform: translateY(-16px) rotate(1deg); }
}

.hero__copy {
  position: relative;
  display: grid;
  align-content: center;
  gap: var(--s-3);
  padding: var(--s-6) clamp(1.5rem, 4vw, 4rem);
  background:
    /* soft depth only — the base below is already dark */
    linear-gradient(180deg, rgba(10,8,7,.06), rgba(10,8,7,.30)),
    /* IMAGE SLOT — to drop in a real dish photo, add it as the last layer:
         url("assets/hero-dish.jpg") center/cover no-repeat
       and raise the scrim above to rgba(10,8,7,.52) -> .80 so white text
       stays above 4.5:1 over the photograph. */
    /* black panel, with a whisper of warmth where it meets the red so the
       seam reads as one composition rather than a hard cut */
    radial-gradient(95% 115% at 0% 42%, #241717 0%, #120C0C 46%, #070505 100%);
  color: var(--white);
}
.hero__copy .h-hero { color: var(--white); text-shadow: 0 4px 30px rgba(0,0,0,.4); }
.h-hero__accent { color: var(--accent); }   /* same red as .btn--red */
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-1); }
.hero__note {
  display: flex; align-items: center; gap: 0.55em;
  font-size: var(--step--1); font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: rgba(255, 255, 255,.85);
}
.hero__note svg { width: 1.1em; height: 1.1em; color: var(--sand); flex: none; }


/* ---------- PRODUCT RENDERS ----------
   The client's bottle renders ship on a solid black background with no alpha.
   Rather than re-encode them, each silhouette was traced from the pixel data
   and is applied as a clip-path, so the black field is cut away and the bottles
   sit correctly on the red hero panel. The bottles' own black cap and label are
   inside the path and stay fully opaque. */
.bottle-img {
  display: block;
  width: auto;
  max-width: none;              /* sized by height in each context */
  object-fit: contain;
}
.bottle-img--original { clip-path: polygon(42.64% 5.28%, 19.02% 6.94%, 22.39% 8.61%, 22.09% 10.28%, 16.26% 11.94%, 16.26% 13.61%, 16.26% 15.28%, 15.95% 16.94%, 15.95% 18.61%, 16.56% 20.28%, 17.79% 21.94%, 14.72% 23.61%, 11.96% 25.28%, 9.82% 26.94%, 8.28% 28.61%, 7.06% 30.28%, 6.13% 31.94%, 5.83% 33.61%, 5.52% 35.28%, 5.52% 36.94%, 5.52% 38.61%, 5.52% 40.28%, 5.52% 41.94%, 5.52% 43.61%, 5.52% 45.28%, 5.52% 46.94%, 5.52% 48.61%, 5.52% 50.28%, 5.52% 51.94%, 5.83% 53.61%, 5.83% 55.28%, 5.83% 56.94%, 5.83% 58.61%, 5.83% 60.28%, 5.83% 61.94%, 5.83% 63.61%, 5.83% 65.28%, 5.83% 66.94%, 5.83% 68.61%, 5.83% 70.28%, 5.83% 71.94%, 5.83% 73.61%, 5.83% 75.28%, 5.83% 76.94%, 5.83% 78.61%, 6.13% 80.28%, 6.13% 81.94%, 6.13% 83.61%, 6.13% 85.28%, 6.13% 86.94%, 6.13% 88.61%, 6.75% 90.28%, 8.59% 91.94%, 17.18% 93.61%, 38.96% 94.63%, 56.75% 94.63%, 80.37% 93.61%, 89.88% 91.94%, 91.72% 90.28%, 92.33% 88.61%, 92.33% 86.94%, 92.33% 85.28%, 92.33% 83.61%, 92.33% 81.94%, 92.33% 80.28%, 92.33% 78.61%, 92.33% 76.94%, 92.33% 75.28%, 92.33% 73.61%, 92.33% 71.94%, 92.33% 70.28%, 92.33% 68.61%, 92.33% 66.94%, 92.33% 65.28%, 92.33% 63.61%, 92.33% 61.94%, 92.64% 60.28%, 92.64% 58.61%, 92.64% 56.94%, 92.64% 55.28%, 92.64% 53.61%, 92.64% 51.94%, 92.64% 50.28%, 92.64% 48.61%, 92.64% 46.94%, 92.64% 45.28%, 92.64% 43.61%, 92.94% 41.94%, 92.94% 40.28%, 92.94% 38.61%, 92.94% 36.94%, 92.94% 35.28%, 92.64% 33.61%, 92.02% 31.94%, 91.10% 30.28%, 89.88% 28.61%, 88.04% 26.94%, 85.89% 25.28%, 83.44% 23.61%, 80.37% 21.94%, 81.60% 20.28%, 82.52% 18.61%, 82.21% 16.94%, 81.90% 15.28%, 81.90% 13.61%, 81.90% 11.94%, 74.54% 10.28%, 76.69% 8.61%, 79.45% 6.94%, 51.84% 5.28%); }
.bottle-img--green    { clip-path: polygon(45.71% 1.39%, 16.26% 3.15%, 19.33% 4.91%, 19.94% 6.67%, 13.50% 8.43%, 13.50% 10.19%, 13.50% 11.94%, 13.50% 13.70%, 12.88% 15.46%, 13.80% 17.22%, 15.95% 18.98%, 12.88% 20.74%, 10.12% 22.50%, 7.67% 24.26%, 5.83% 26.02%, 3.99% 27.78%, 3.07% 29.54%, 2.45% 31.30%, 1.84% 33.06%, 1.84% 34.81%, 2.15% 36.57%, 2.15% 38.33%, 2.15% 40.09%, 2.15% 41.85%, 2.15% 43.61%, 2.15% 45.37%, 2.15% 47.13%, 2.15% 48.89%, 2.15% 50.65%, 2.15% 52.41%, 2.15% 54.17%, 2.15% 55.93%, 2.15% 57.69%, 2.15% 59.44%, 2.15% 61.20%, 2.15% 62.96%, 2.15% 64.72%, 2.15% 66.48%, 2.15% 68.24%, 2.15% 70.00%, 2.15% 71.76%, 2.15% 73.52%, 2.15% 75.28%, 2.15% 77.04%, 2.15% 78.80%, 2.15% 80.56%, 2.15% 82.31%, 2.15% 84.07%, 2.15% 85.83%, 2.15% 87.59%, 2.15% 89.35%, 2.15% 91.11%, 2.45% 92.87%, 3.07% 94.63%, 6.75% 96.39%, 26.38% 98.15%, 38.96% 98.52%, 59.20% 98.52%, 73.31% 98.15%, 91.10% 96.39%, 95.09% 94.63%, 95.71% 92.87%, 96.01% 91.11%, 96.01% 89.35%, 96.01% 87.59%, 96.01% 85.83%, 96.01% 84.07%, 96.32% 82.31%, 96.32% 80.56%, 96.32% 78.80%, 96.32% 77.04%, 96.32% 75.28%, 96.32% 73.52%, 96.32% 71.76%, 96.32% 70.00%, 96.32% 68.24%, 96.32% 66.48%, 96.32% 64.72%, 96.32% 62.96%, 96.32% 61.20%, 96.32% 59.44%, 96.32% 57.69%, 96.32% 55.93%, 96.32% 54.17%, 96.32% 52.41%, 96.32% 50.65%, 96.32% 48.89%, 96.32% 47.13%, 96.32% 45.37%, 96.32% 43.61%, 96.32% 41.85%, 96.32% 40.09%, 96.63% 38.33%, 96.63% 36.57%, 96.63% 34.81%, 96.63% 33.06%, 96.32% 31.30%, 95.40% 29.54%, 94.17% 27.78%, 92.64% 26.02%, 90.80% 24.26%, 88.34% 22.50%, 88.34% 20.74%, 82.52% 18.98%, 84.66% 17.22%, 85.58% 15.46%, 85.28% 13.70%, 85.28% 11.94%, 85.28% 10.19%, 84.97% 8.43%, 76.99% 6.67%, 78.83% 4.91%, 82.21% 3.15%, 55.52% 1.39%); }

/* ---------- 8. TAGLINE STRIP ---------- */
.tagline {
  background: var(--red-wash);
  color: var(--white);
  padding: var(--s-7) 0;
  text-align: center;
}
.tagline p {
  font-family: var(--font-display);
  font-size: var(--step-2);
  line-height: 1.28;
  letter-spacing: -0.02em;
  max-width: 22ch;
  margin-inline: auto;
}
.tagline em { color: var(--sand); font-style: normal; }

/* Scrolling ticker */
.ticker {
  background: var(--sand);
  color: var(--ink);
  padding: 0.9rem 0;
  overflow: hidden;
  border-block: 3px solid var(--ink);
}
.ticker__track {
  display: flex; gap: var(--s-4); width: max-content;
  animation: slide 34s linear infinite;
}
.ticker__track span {
  display: inline-flex; align-items: center; gap: var(--s-4);
  font-size: var(--step--1); font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase;
  white-space: nowrap;
}
.ticker__track span::after { content: "\2022"; color: var(--accent); }
@keyframes slide { to { transform: translateX(-50%); } }

/* ---------- 9. SECTION SHELL ---------- */
.section { padding: var(--s-8) 0; }
.section--tight { padding: var(--s-7) 0; }
.section--paper { background: var(--paper); }
.section--dark { background: var(--red-wash); color: var(--white); }
.section__head { max-width: 62ch; margin-bottom: var(--s-6); display: grid; gap: var(--s-2); }
.section__head--center { margin-inline: auto; text-align: center; }
.section__head--center .lede { margin-inline: auto; }

/* ---------- 10. WAYS TO USE ---------- */
.uses { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-3); }
.use {
  background: var(--sand);          /* white cards vanished against the paper ground */
  border: 2px solid var(--ink);
  border-radius: var(--radius);
  padding: var(--s-4);
  display: grid; gap: 0.65rem;
  box-shadow: var(--shadow-card);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.use:hover { transform: translate(-3px, -3px); box-shadow: 5px 5px 0 0 var(--ink); }
.use__icon {
  width: 46px; height: 46px;
  display: grid; place-items: center;
  background: var(--white);
  border: 2px solid var(--ink);
  border-radius: var(--radius-pill);
  color: var(--red);
}
.use__icon svg { width: 24px; height: 24px; }
.use h3 { font-size: var(--step-1); }
.use p { font-size: var(--step--1); color: var(--fg-muted); line-height: 1.55; }

/* ---------- 11. PRODUCT ---------- */
.product { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: var(--s-7); align-items: center; }
.product__visual {
  position: relative;
  display: grid; place-items: center;
  background: var(--red-wash);
  border-radius: 28px;
  padding: var(--s-6) var(--s-4);
  overflow: hidden;
}
.product__visual::before {
  content: ""; position: absolute; inset: auto -20% -55% -20%;
  aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, rgba(232,168,28,.30), transparent 62%);
}
.product__pair {
  position: relative;
  display: flex; align-items: flex-end; justify-content: center;
  gap: 0;
}
.product__pair img { height: clamp(240px, 34vw, 400px); width: auto; }
.product__pair img:first-child { transform: rotate(-5deg); transform-origin: bottom center; z-index: 1; }
.product__pair img:last-child  { transform: rotate(7deg); transform-origin: bottom center; margin-left: -4%; }
.product__facts { display: grid; gap: var(--s-3); }
.spec {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: var(--s-2); margin-top: var(--s-2);
}
.spec div {
  border-top: 2px solid var(--border-firm);
  padding-top: 0.7rem;
}
.spec dt {
  font-size: 0.7rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.16em; color: var(--accent);
}
.spec dd { margin: 0.2rem 0 0; font-weight: 600; }

/* ---------- 12. STORY (alternating) ---------- */
.story { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-7); align-items: center; }
.story__media {
  aspect-ratio: 3 / 4;           /* near the photo's own 2:3, so cover barely crops */
  border-radius: 24px;
  border: 3px solid var(--ink);
  background: var(--ink);        /* shows while the image decodes */
  overflow: hidden;
  margin: 0;
}
.story__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 22%;      /* bias up: keeps both faces and the banner in frame */
  display: block;
}
.story__copy { display: grid; gap: var(--s-3); }
.pullquote {
  font-family: var(--font-display);
  font-size: var(--step-2);
  line-height: 1.25;
  border-left: 5px solid var(--accent);
  padding-left: var(--s-3);
}

/* ---------- 13. RECIPE CARDS ---------- */
.recipes { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-4); }
.recipe {
  background: var(--white);
  border-radius: var(--radius);
  overflow: hidden;
  border: 2px solid var(--ink);
  display: grid; grid-template-rows: auto 1fr;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.recipe:hover { transform: translateY(-5px); box-shadow: var(--shadow-lift); }
.recipe__img {
  aspect-ratio: 16 / 11;
  width: 100%;
  height: auto;
  object-fit: cover;
  display: block;
  background: var(--ink);          /* shows while the image decodes */
  border-bottom: 2px solid var(--ink);
}
.recipe__body { padding: var(--s-3); display: grid; gap: 0.6rem; align-content: start; }
.recipe h3 { font-size: var(--step-1); }
.recipe p { font-size: var(--step--1); color: var(--fg-muted); line-height: 1.55; }
.recipe__meta {
  display: flex; flex-wrap: wrap; gap: 0.4rem var(--s-2);
  font-size: 0.68rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--leaf-text);
  border-top: 1px solid var(--border); padding-top: 0.7rem;
}

/* ---------- 14. TESTIMONIALS ---------- */
.verbs {
  font-family: var(--font-display);
  font-size: var(--step-4);
  line-height: 0.98;
  letter-spacing: -0.035em;
  text-align: center;
  display: grid; gap: 0.05em;
  margin-bottom: var(--s-6);
}
.verbs span:nth-child(1) { color: var(--white); }
.verbs span:nth-child(2) { color: var(--sand); }
.verbs span:nth-child(3) { color: #F58C7B; }   /* light tint of brand red — 5.37:1 on the wash */

.quotes { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-3); }
/* ---------- REACTION BUBBLES ----------
   Comment bubble with a tail, and a floating cut-out head below it, after the
   testimonial treatment on terryhoproducts.com — in Belouche's cream/red
   rather than their gold. The name sits inside the bubble. */
.quotes { align-items: stretch; }

.reaction {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0;
}
.bubble {
  position: relative;
  flex: 1;
  width: 100%;
  margin: 0;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 0.7rem;
  background: var(--sand);
  border: 2px solid var(--ink);
  border-radius: var(--radius);
  padding: var(--s-4) var(--s-3);
  text-align: center;
  box-shadow: 4px 4px 0 0 var(--ink);
}
.bubble p {
  font-size: var(--step-0);
  line-height: 1.45;
  font-weight: 600;
  color: var(--red);
  margin: 0;
}
.bubble__stars { display: flex; gap: 3px; color: var(--accent); }
.bubble__stars svg { width: 16px; height: 16px; }
.bubble__name {
  font-style: normal;
  font-family: var(--font-ui);
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
  margin-top: 0.15rem;
}

/* tail: ink triangle behind, cream triangle in front, so the border
   reads continuously around the shape */
.bubble::before,
.bubble::after {
  content: "";
  position: absolute;
  left: 50%;
  width: 0; height: 0;
  border-left: 17px solid transparent;
  border-right: 17px solid transparent;
}
.bubble::before {
  top: 100%;
  transform: translateX(-50%);
  border-top: 24px solid var(--ink);
}
.bubble::after {
  top: calc(100% - 3px);
  transform: translateX(-50%) scale(0.82);
  transform-origin: top center;
  border-top: 24px solid var(--sand);
}

.reaction__face {
  width: auto;
  height: 140px;              /* box height; the heads are normalised inside it
                                 so all three faces render the same size */
  margin-top: calc(24px + var(--s-1));   /* clear the tail */
  filter: drop-shadow(0 12px 16px rgba(0, 0, 0, .38));
}

.reactions__intro {
  text-align: center;
  margin: calc(var(--s-5) * -1) auto var(--s-5);
  max-width: 44ch;
}

.stockists .alt {
  display: block;
  font-weight: 500;
  font-size: var(--step--1);
  opacity: .8;
}

/* ---------- 15. WHERE TO BUY ---------- */
.buy { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-3); }
.buy__card {
  border: 2px solid var(--ink);
  border-radius: var(--radius);
  padding: var(--s-5) var(--s-4);
  background: var(--white);
  display: grid; gap: var(--s-2); align-content: start;
}
.buy__card--accent { background: var(--red-wash); color: var(--white); border-color: var(--ink); }
.buy__card--accent .lede, .buy__card--accent p { color: rgba(255, 255, 255,.88); }
.buy__card h3 { font-size: var(--step-2); }
.buy__tag {
  justify-self: start;
  font-size: 0.68rem; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; padding: 0.35rem 0.8rem;
  border-radius: var(--radius-pill);
  background: var(--accent); color: #fff;
}

.stockists {
  list-style: none; padding: 0; margin: 0;
  display: grid; gap: var(--s-2);
}
.stockists li {
  display: grid; gap: 2px;
  padding-top: 0.85rem;
  border-top: 2px solid currentColor;
}
.stockists strong {
  font-family: var(--font-ui);
  font-size: var(--step-0); font-weight: 700; line-height: 1.25;
}
.stockists span {
  font-size: var(--step--1);
  opacity: .82;
  line-height: 1.45;
}

/* ---------- WHOLESALE FORM ---------- */
.wholesale {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-3);
  width: min(100%, 780px);
  margin-inline: auto;
  background: var(--sand);
  border: 2px solid var(--ink);
  border-radius: var(--radius);
  box-shadow: 6px 6px 0 0 var(--ink);
  padding: var(--s-5) var(--s-4);
}
.field { display: grid; gap: 0.4rem; align-content: start; }
.field--full { grid-column: 1 / -1; }
.field label {
  font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink);
}
.field .req { color: var(--red); }   /* --accent is only 4.19:1 on cream */
.field .opt {
  font-weight: 600; letter-spacing: 0.08em;
  color: var(--fg-muted); text-transform: none;
}
.wholesale input,
.wholesale select,
.wholesale textarea {
  width: 100%;
  min-height: 52px;                    /* touch target */
  padding: 0.8rem 0.95rem;
  background: var(--white);
  border: 2px solid var(--ink);
  border-radius: 10px;
  font-size: var(--step-0);
  color: var(--fg);
}
.wholesale textarea { min-height: 96px; resize: vertical; line-height: 1.5; }
.wholesale select {
  appearance: none;
  /* chevron drawn inline so no extra request and it inherits the ink colour */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230A0A0A' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.9rem center;
  background-size: 18px;
  padding-right: 2.6rem;
}
.wholesale input::placeholder,
.wholesale textarea::placeholder { color: #8C8078; }
.wholesale input:focus-visible,
.wholesale select:focus-visible,
.wholesale textarea:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

.wholesale [aria-invalid="true"] { border-color: var(--accent); background: #FFF4F3; }
.field__error {
  margin: 0;
  font-size: var(--step--1);
  font-weight: 600;
  color: var(--red);                   /* 10.8:1 on the cream card */
}
.wholesale__actions {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--s-2) var(--s-3);
  margin-top: var(--s-1);
}
.wholesale__actions .form-note { color: var(--fg-muted); margin: 0; }

@media (max-width: 700px) {
  .wholesale { grid-template-columns: 1fr; padding: var(--s-4) var(--s-3); }
}

/* ---------- 16. CLOSING CTA + SIGNUP ---------- */
.closer { text-align: center; display: grid; gap: var(--s-3); justify-items: center; }
.signup {
  display: flex; flex-wrap: wrap; gap: var(--s-2);
  width: min(100%, 520px); margin-top: var(--s-2);
}
.signup label { flex: 1 1 240px; display: grid; gap: 0.4rem; text-align: left; }
.signup span {
  font-size: 0.7rem; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: rgba(255, 255, 255,.72);
}
.signup input {
  min-height: 52px;
  padding: 0 1.1rem;
  background: rgba(255, 255, 255,.08);
  border: 2px solid rgba(255, 255, 255,.3);
  border-radius: var(--radius-pill);
  color: var(--white);
}
.signup input::placeholder { color: rgba(255, 255, 255,.45); }
.signup input:focus { border-color: var(--sand); }
.signup .btn { flex: 0 0 auto; align-self: end; }
.form-note { font-size: var(--step--1); color: rgba(255, 255, 255,.6); }

/* ---------- 17. FOOTER ---------- */
.footer { background: var(--ink); color: rgba(255, 255, 255,.72); padding: var(--s-7) 0 var(--s-4); }
.footer__grid {
  display: grid; grid-template-columns: 1.4fr 1fr 1fr;
  gap: var(--s-5); padding-bottom: var(--s-5);
  border-bottom: 1px solid rgba(255, 255, 255,.14);
}
.footer h4 {
  font-family: var(--font-ui); font-size: 0.7rem; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--sand); margin-bottom: var(--s-2);
}
.footer ul { list-style: none; padding: 0; display: grid; gap: 0; }
.footer ul a {
  display: inline-flex; align-items: center;
  min-height: 44px;                 /* touch target */
}
.footer a { text-decoration: none; }
.footer a:hover { color: var(--white); text-decoration: underline; text-underline-offset: 4px; }
.brand--footer { display: inline-flex; }
.brand__badge {
  width: 104px; height: 104px;
  color: var(--white);
  transition: color var(--dur) var(--ease);
}
.brand--footer:hover .brand__badge { color: var(--sand); }
.footer__tag {
  margin-top: var(--s-2);
  font-size: var(--step--1); font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--sand);
}
.social { display: flex; gap: var(--s-2); margin-top: var(--s-3); }
.social a {
  width: 46px; height: 46px; display: grid; place-items: center;
  border: 1px solid rgba(255, 255, 255,.28); border-radius: var(--radius-pill);
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.social a:hover { background: var(--sand); color: var(--ink); }
.social svg { width: 20px; height: 20px; }
.footer__base {
  display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4);
  justify-content: space-between; padding-top: var(--s-4);
  font-size: var(--step--1);
}

/* ---------- AGENCY CREDIT ---------- */
.credit {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: center; gap: 0.5rem 0.9rem;
  padding-top: var(--s-4); margin-top: var(--s-3);
  border-top: 1px solid rgba(255, 255, 255, 0.10);
  text-align: center;
}
.credit__label {
  font-size: 0.7rem; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(255, 255, 255, 0.48);
}
.credit__link {
  display: inline-flex; align-items: center;
  min-height: 44px;                     /* touch target */
  opacity: 0.75;
  transition: opacity var(--dur) var(--ease);
}
.credit__link:hover, .credit__link:focus-visible { opacity: 1; }
.credit__link img { width: 132px; height: auto; }

/* ---------- FLOATING WHATSAPP CTA ---------- */
.wa-fab {
  position: fixed; z-index: 60;
  right: clamp(1rem, 3vw, 2rem);
  bottom: clamp(1rem, 3vw, 2rem);
  bottom: max(clamp(1rem, 3vw, 2rem), env(safe-area-inset-bottom));
  display: inline-flex; align-items: center; gap: 0.6rem;
  min-height: 60px; padding: 0 1.15rem;
  background: #25D366; color: #05300F;
  border: 2px solid rgba(0, 0, 0, .22);
  border-radius: var(--radius-pill);
  font-size: var(--step--1); font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  text-decoration: none;
  box-shadow: 0 12px 28px -10px rgba(0, 0, 0, .55);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.wa-fab svg { width: 28px; height: 28px; flex: none; }
.wa-fab:hover { transform: translateY(-3px); box-shadow: 0 18px 34px -12px rgba(0,0,0,.6); }
.wa-fab:active { transform: translateY(0); }
.wa-fab:focus-visible { outline: 3px solid var(--white); outline-offset: 3px; }

/* Collapse to a circle on small screens so it never sits over content */
@media (max-width: 620px) {
  .wa-fab { padding: 0; width: 60px; justify-content: center; }
  /* clearance so the floating button never sits over the agency credit */
  .footer { padding-bottom: calc(60px + var(--s-5)); }
  .wa-fab__text {
    position: absolute; width: 1px; height: 1px; padding: 0;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }
}

/* ---------- 18. SCROLL REVEAL ---------- */
.reveal {
  opacity: 0;
  transform: translateY(22px) scale(0.985);
  transition: opacity 520ms var(--ease), transform 520ms var(--ease);
  transition-delay: var(--d, 0ms);
}
.reveal.is-in { opacity: 1; transform: none; }

/* ---------- 19. RESPONSIVE ---------- */
@media (max-width: 1000px) {
  .uses, .recipes, .quotes { grid-template-columns: repeat(2, 1fr); }
  .product, .story { grid-template-columns: 1fr; gap: var(--s-5); }
  .story__media { aspect-ratio: 4 / 5; order: -1; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 860px) {
  .nav__links {
    position: absolute; inset: 100% 0 auto;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--sand);
    border-bottom: 1px solid rgba(10, 10, 10, 0.14);
    padding: var(--s-2) 1.25rem var(--s-4);
    box-shadow: 0 20px 30px -22px rgba(20,16,14,.5);
    display: none;
  }
  .nav__links.is-open { display: flex; }
  .nav__links a { padding: 0.95rem 0; border-bottom: 1px solid rgba(10, 10, 10, 0.12); }
  .nav__links a::after { display: none; }
  .nav__toggle { display: flex; }
  .nav__cta { display: none; }
  .nav__inner { position: relative; }

  .hero { grid-template-columns: 1fr; }
  .hero__stage { min-height: 0; order: -1; padding-block: var(--s-5); }
  .hero__bottle { height: min(48vh, 400px); }
  .hero__copy { padding-block: var(--s-6); }
  .section { padding: var(--s-7) 0; }
}

@media (max-width: 620px) {
  .announce { letter-spacing: 0.06em; font-size: 0.78rem; }
  .announce__tail { display: none; }
  .uses, .recipes, .quotes, .buy, .footer__grid { grid-template-columns: 1fr; }
  .brand__badge { width: 88px; height: 88px; }
  .spec { grid-template-columns: 1fr; }
  .signup .btn { width: 100%; }
  .footer__base { flex-direction: column; }
}

/* ---------- 20. MOTION PREFERENCES ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .reveal { opacity: 1; transform: none; }
  .hero__bottle { animation: none; }
  .ticker__track { animation: none; }
}

@media print {
  .nav, .announce, .ticker, .hero__ghost, .wa-fab { display: none; }
  body { background: #fff; color: #000; }
}