/* ══════════════════════════════════════════════════════════════
   A LA CRUZ — SHARED DESIGN SYSTEM
   Extracted verbatim from the v15 home so every page inherits the
   same tokens, chrome and components.

   Contents: tokens & base · announcement bar · header + nav ·
   buttons · newsletter · footer · reveal animations · cart drawer ·
   whatsapp float · shared responsive rules.

   Page-specific styles belong in the page, NOT here.
   ══════════════════════════════════════════════════════════════ */

@font-face {
  font-family: 'Headliner N45';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url('/fonts/headliner-n45.ttf') format('truetype');
}
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  /* v6 - Original Alacruz: white + charcoal + oxide/rust accent */
  --forest: #2C2925;
  --forest-deep: #1A1816;
  --emerald: #545049;
  --emerald-light: #6E6960;
  --copper: #6E5A48;
  --copper-light: #94816C;
  --copper-glow: rgba(110, 90, 72, 0.16);
  --bronze: #5E5751;
  --bronze-light: #746C64;
  --parchment: #F7F5F1;
  --cream: #EAE6DF;
  --cream-dark: #D6D0C5;
  --walnut: #3A3630;
  --walnut-light: #5B544B;
  --white: #FDFCFA;
  --black: #0A0A0A;
  --announce-height: 38px;
  --forest-rgb: 44, 41, 37;
  --forest-deep-rgb: 26, 24, 22;
  --copper-rgb: 110, 90, 72;
  --walnut-rgb: 58, 54, 48;
  --parchment-rgb: 247, 245, 241;
  --font-display: 'Headliner N45', 'Helvetica Neue', Arial, sans-serif;
  --font-body: 'Assistant', 'Helvetica Neue', Arial, sans-serif;
  --font-num: 'Big Shoulders Display', 'Helvetica Neue', Arial, sans-serif;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-elastic: cubic-bezier(0.34, 1.56, 0.64, 1);
}

html { font-size: 16px; scroll-behavior: smooth; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body {
  font-family: var(--font-body);
  background: var(--parchment);
  color: var(--forest);
  overflow-x: hidden;
  line-height: 1.7;
  font-weight: 400;
}

::selection { background: var(--copper); color: var(--parchment); }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }


/* ══════════════════════════════════════════
   ANNOUNCEMENT BAR
══════════════════════════════════════════ */
.announcement-bar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1001;
  background: var(--walnut);
  color: var(--parchment);
  text-align: center;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  height: var(--announce-height);
  transition: transform 0.4s var(--ease-out);
  overflow: hidden;
}
.announcement-track {
  position: relative;
  width: 100%;
  height: 100%;
  /* Off-screen slides sit at translateX(100%); clip them here so they
     never widen the document on narrow viewports. */
  overflow: hidden;
}
.announcement-item {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 60px;
  pointer-events: none;
}
.announce-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: none;
  color: var(--parchment);
  opacity: 0.65;
  cursor: pointer;
  padding: 6px 10px;
  font-size: 0.85rem;
  line-height: 1;
  transition: opacity 0.2s ease;
  z-index: 10;
  pointer-events: auto;
}
.announce-arrow:hover { opacity: 1; }
.announce-arrow.prev { left: 12px; }
.announce-arrow.next { right: 12px; }
@media (max-width: 640px) {
  .announce-arrow { padding: 6px 8px; font-size: 0.75rem; }
  /* Keep each announcement on a single line — the bar has a fixed height,
     so wrapping pushed the inline CTA out of the bar. */
  .announcement-item {
    padding: 0 34px;
    font-size: 0.62rem;
    letter-spacing: 0.12em;
    white-space: nowrap;
    overflow: hidden;
  }
  .announcement-item > * { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
}
.announcement-bar a {
  color: var(--copper);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ══════════════════════════════════════════
   HEADER
══════════════════════════════════════════ */
.header {
  position: fixed; top: var(--announce-height); left: 0; right: 0; z-index: 1000;
  padding: 0 3rem;
  height: 80px;
  display: flex; align-items: center; justify-content: space-between;
  transition: all 0.5s var(--ease-out);
  background: transparent;
}
/* Scrim so the white nav never gets lost over a bright patch of photography.
   z-index must be 0, not -1: a negative pseudo-element paints behind its own
   parent's background, so the gradient never actually covered the image. The
   header's own children sit at z-index 1 to stay above it. */
.header::before {
  content: ''; position: absolute; left: 0; right: 0; top: calc(var(--announce-height) * -1); height: 190px;
  background: linear-gradient(to bottom,
    rgba(10,9,8,0.72) 0%,
    rgba(10,9,8,0.46) 40%,
    rgba(10,9,8,0.16) 72%,
    transparent 100%);
  pointer-events: none; z-index: 0; transition: opacity 0.5s var(--ease-out);
}
.header > * { position: relative; z-index: 1; }
.header.scrolled::before, .header--solid::before { opacity: 0; }
.header.scrolled { top: 0; height: 70px; }
/* PDP, cart y checkout no tienen hero oscuro: header blanco desde el arranque */
.header.scrolled,
.header--solid {
  background: rgba(var(--parchment-rgb), 0.97);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 1px 0 rgba(var(--copper-rgb),0.15);
}
.header.scrolled .header-nav a, .header--solid .header-nav a { color: var(--forest); }
.header.scrolled .header-nav a:hover, .header--solid .header-nav a:hover { color: var(--copper); }
.header.scrolled .header-logo img, .header--solid .header-logo img { filter: none; }
.header.scrolled .cart-btn, .header--solid .cart-btn { color: var(--forest); }
.header.scrolled .menu-toggle span, .header--solid .menu-toggle span { background: var(--forest); }
.header-logo img {
  height: 45px;
  filter: brightness(0) invert(1);
  transition: height 0.5s var(--ease-out);
}
.header.scrolled .header-logo img { height: 38px; }
.header-nav { display: flex; align-items: center; gap: 2.75rem; }
.header-nav a {
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--parchment);
  position: relative;
  padding: 0.3rem 0;
  transition: color 0.3s;
}
.header-nav a::after {
  content: ''; position: absolute;
  bottom: 0; left: 0; width: 0; height: 1px;
  background: var(--copper);
  transition: width 0.4s var(--ease-out);
}
.header-nav a:hover { color: var(--copper); }
.header-nav a:hover::after { width: 100%; }
.nav-dropdown {
  position: relative;
}
.nav-dropdown-trigger {
  display: inline-flex;
  align-items: center;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--parchment);
  padding: 0.3rem 0;
  transition: color 0.3s;
  cursor: pointer;
}
.header.scrolled .nav-dropdown-trigger, .header--solid .nav-dropdown-trigger { color: var(--forest); }
.header.scrolled .nav-dropdown-trigger:hover, .header--solid .nav-dropdown-trigger:hover { color: var(--copper); }
.nav-dropdown-trigger:hover { color: var(--copper); }
.nav-dropdown-trigger:hover svg { transform: rotate(180deg); }
.nav-dropdown-menu {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  min-width: 160px;
  padding: 0.75rem 0;
  background: rgba(var(--parchment-rgb), 0.98);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(var(--copper-rgb),0.12);
  border-radius: 8px;
  box-shadow: 0 12px 40px rgba(var(--forest-rgb),0.12);
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s var(--ease-out);
  z-index: 100;
}
.nav-dropdown:hover .nav-dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}
.nav-dropdown-menu a {
  display: block;
  padding: 0.55rem 1.25rem;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--forest) !important;
  transition: all 0.2s;
}
.nav-dropdown-menu a:hover {
  color: var(--copper) !important;
  background: rgba(var(--copper-rgb),0.06);
}
.nav-dropdown-menu a::after { display: none !important; }
.header-actions { display: flex; align-items: center; gap: 1.2rem; }
.nav-outside-usa {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.84rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.09em !important;
  color: var(--parchment) !important;
  background: rgba(10, 9, 8, 0.32);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1.5px solid rgba(var(--parchment-rgb), 0.7);
  border-radius: 22px;
  padding: 0.42rem 1rem !important;
  transition: color 0.3s, border-color 0.3s, background 0.3s !important;
}
.nav-outside-usa svg:first-child { width: 15px; height: 15px; }
.nav-outside-usa:hover { color: var(--parchment) !important; border-color: var(--copper-light) !important; background: rgba(var(--copper-rgb), 0.55); }
.nav-outside-usa::after { display: none !important; }
/* On the white scrolled header: solid dark pill so it stays prominent */
.header.scrolled .nav-outside-usa, .header--solid .nav-outside-usa { color: var(--parchment) !important; background: var(--forest); border-color: var(--forest); }
.header.scrolled .nav-outside-usa:hover, .header--solid .nav-outside-usa:hover { background: var(--copper); border-color: var(--copper); color: var(--parchment) !important; }
.nav-outside-usa-wrap .nav-dropdown-menu { min-width: 210px; }
.nav-outside-usa-wrap:hover .nav-outside-usa svg:last-child { transform: rotate(180deg); }
.nav-outside-usa-menu a { display: flex; align-items: center; gap: 0.5rem; }
.search-btn, .currency-btn {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--parchment);
  padding: 0;
  transition: color 0.3s;
}
.search-btn:hover, .currency-btn:hover { color: var(--copper); }
.search-btn svg { width: 20px; height: 20px; }
.currency-btn svg { width: 17px; height: 17px; }
.currency-btn span {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
}
.header.scrolled .search-btn, .header--solid .search-btn,
.header.scrolled .currency-btn, .header--solid .currency-btn { color: var(--forest); }
/* Search expand */
.header-search-wrap {
  position: relative;
  display: flex;
  align-items: center;
}
.header-search-input {
  width: 0;
  opacity: 0;
  border: none;
  border-bottom: 1.5px solid var(--copper);
  background: transparent;
  color: var(--parchment);
  font-size: 0.85rem;
  font-family: var(--font-body);
  padding: 0.2rem 0;
  outline: none;
  transition: width 0.35s var(--ease-out), opacity 0.35s;
  pointer-events: none;
}
.header.scrolled .header-search-input, .header--solid .header-search-input { color: var(--forest); }
.header-search-input.open {
  width: 160px;
  opacity: 1;
  pointer-events: auto;
  margin-right: 0.5rem;
}
/* Currency dropdown */
.currency-wrap {
  position: relative;
}
.currency-dropdown {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  background: rgba(var(--parchment-rgb), 0.98);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(var(--copper-rgb), 0.12);
  border-radius: 8px;
  box-shadow: 0 12px 40px rgba(var(--forest-rgb), 0.12);
  padding: 0.5rem 0;
  min-width: 130px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: all 0.25s var(--ease-out);
  z-index: 200;
}
.currency-dropdown.open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.currency-option {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--forest);
  cursor: pointer;
  transition: background 0.2s;
}
.currency-option:hover { background: rgba(var(--copper-rgb), 0.06); color: var(--copper); }
.currency-option.active { color: var(--copper); }
.cart-btn {
  position: relative;
  color: var(--parchment);
  transition: color 0.3s;
}
.cart-btn:hover { color: var(--copper); }
.cart-btn svg { width: 22px; height: 22px; }
.cart-count {
  position: absolute; top: -6px; right: -8px;
  background: var(--copper);
  color: var(--parchment);
  font-size: 0.6rem; font-weight: 700;
  width: 16px; height: 16px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}

/* Mobile Menu Toggle */
.menu-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: 5px;
  cursor: pointer;
}
.menu-toggle span {
  display: block; width: 24px; height: 1.5px;
  background: var(--parchment);
  transition: all 0.4s var(--ease-out);
  transform-origin: center;
}
.menu-toggle.active span:nth-child(1) { transform: rotate(45deg) translate(4px, 5px); }
.menu-toggle.active span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.menu-toggle.active span:nth-child(3) { transform: rotate(-45deg) translate(4px, -5px); }

/* Mobile Menu */
.mobile-menu {
  position: fixed; inset: 0; z-index: 999;
  background: var(--forest-deep);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 2rem;
  opacity: 0; visibility: hidden;
  transition: all 0.5s var(--ease-out);
}
.mobile-menu.open { opacity: 1; visibility: visible; }
.mobile-menu a {
  font-family: var(--font-display);
  font-size: 2rem;
  color: var(--parchment);
  font-variation-settings: 'opsz' 48;
  opacity: 0; transform: translateY(20px);
  transition: color 0.3s;
}
.mobile-menu a:hover { color: var(--copper); }
.mobile-menu.open a {
  opacity: 1; transform: translateY(0);
  transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out), color 0.3s;
}
.mobile-menu.open a:nth-child(1) { transition-delay: 0.1s; }
.mobile-menu.open a:nth-child(2) { transition-delay: 0.15s; }
.mobile-menu.open a:nth-child(3) { transition-delay: 0.2s; }
.mobile-menu.open a:nth-child(4) { transition-delay: 0.25s; }
.mobile-menu.open a:nth-child(5) { transition-delay: 0.3s; }
.mobile-menu-group {
  display: flex;
  flex-direction: column;
}
.mobile-menu-group-title {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--copper);
  padding: 0.5rem 0;
  margin-top: 0.5rem;
}
.mobile-menu-group a {
  padding-left: 1rem;
  font-size: 1rem;
}


/* ═══════════ PAGE HERO ═══════════
   Inner pages need the same dark, full-bleed opening the home has: the
   shared header is built for it (white logo, light nav, a scrim that
   fades out on scroll), so a pale hero leaves the chrome unreadable.
   Shorter than the home's 100vh because these pages have content to
   reach, but the layer stack is the home's: bg + overlay + vignette. */
.page-hero {
  position: relative;
  min-height: 660px;
  display: flex; align-items: flex-end;
  overflow: hidden;
  background: var(--forest-deep);
  /* Clear the fixed announcement bar + header so the eyebrow never sits
     underneath the nav. */
  padding-top: calc(var(--announce-height) + 120px);
}
.page-hero-bg { position: absolute; inset: 0; z-index: 0; }
.page-hero-bg img,
.page-hero-bg video {
  width: 100%; height: 100%;
  object-fit: cover;
}
.page-hero-overlay {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg,
    rgba(0,0,0,0.42) 0%,
    rgba(0,0,0,0.3) 28%,
    rgba(0,0,0,0.46) 62%,
    rgba(0,0,0,0.78) 100%);
}
.page-hero-vignette {
  position: absolute; inset: 0; z-index: 1;
  box-shadow: inset 0 0 200px rgba(0,0,0,0.3);
}
.page-hero-inner {
  position: relative; z-index: 2;
  width: 100%;
  max-width: 1600px;
  margin: 0 auto;
  padding: 0 3rem 4.5rem;
  color: var(--parchment);
}
/* On a dark hero the eyebrow flips to parchment; copper would sink in */
.page-hero .section-label { color: var(--cream); }
.page-hero .section-label::before { background: var(--cream); }
.page-hero-title {
  font-family: var(--font-display);
  font-size: clamp(3rem, 7.5vw, 6rem);
  font-weight: 800;
  line-height: 0.98;
  letter-spacing: 0.005em;
  font-variation-settings: 'opsz' 144;
  text-transform: uppercase;
  color: var(--parchment);
  margin: 1.25rem 0 1.5rem;
  text-wrap: balance;
  text-shadow: 0 2px 30px rgba(0,0,0,0.4);
}
.page-hero-lede {
  max-width: 52ch;
  font-size: 1.06rem;
  line-height: 1.75;
  color: rgba(var(--parchment-rgb), 0.82);
  text-wrap: pretty;
}
.page-hero-meta {
  margin-top: 1.75rem;
  font-size: 0.8rem;
  color: rgba(var(--parchment-rgb), 0.62);
  letter-spacing: 0.05em;
}
@media (max-width: 768px) {
  .page-hero { min-height: 480px; }
  .page-hero-inner { padding: 0 1.5rem 3rem; }
}


/* ═══════════ EDITORIAL PRIMITIVES ═══════════
   Lifted from the v15 home so inner pages can use the same premium moves
   the homepage does. The home is the visual authority here: it uses real
   depth (radius 12-16px, layered shadows, cream gradients on product
   media), not flat 0-radius surfaces.

   1. .statement  — the oversized two-tone manifesto headline
   2. .chapter    — the dark section with sticky media + numbered steps
   3. .card-*     — product/content card with the home's depth treatment
   ═══════════════════════════════════════════════════════════════════ */

/* ── 1. Oversized statement ── */
.statement {
  padding: 8rem 3rem;
  background: var(--parchment);
  overflow: hidden;
}
.statement-inner { max-width: 1320px; margin: 0 auto; }
.statement-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 2rem; flex-wrap: wrap;
  margin-bottom: 2.5rem;
}
.statement-meta {
  font-family: var(--font-body);
  font-size: 0.68rem; font-weight: 600;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--walnut-light);
}
.statement-text {
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 8vw, 7.2rem);
  font-weight: 900;
  line-height: 0.94;
  text-transform: uppercase;
  color: var(--forest);
  letter-spacing: -0.005em;
  font-variation-settings: 'opsz' 144;
  margin: 0;
}
/* The second tone: the home drops the follow-on line to cream-dark so one
   statement reads as two beats. */
.statement-text .dim { color: var(--cream-dark); }
.statement-text .ms-line { display: block; overflow: hidden; }
.statement-text .ms-inner { display: block; }
html:not(.motion-ready) .statement-text .ms-inner { opacity: 0; }
.statement-foot {
  display: flex; gap: 4rem;
  margin-top: 3.5rem;
  border-top: 1px solid var(--cream-dark);
  padding-top: 2.25rem;
  align-items: flex-start; justify-content: space-between;
  flex-wrap: wrap;
}
.statement-foot p {
  font-size: 1.08rem; line-height: 1.75;
  color: var(--walnut-light);
  max-width: 540px; margin: 0;
  text-wrap: pretty;
}
.statement-sign {
  font-family: var(--font-display);
  font-size: 1.05rem; text-transform: uppercase;
  letter-spacing: 0.04em; color: var(--forest);
  white-space: nowrap;
}
.statement-sign .amp { display: inline; white-space: normal; }
.statement-sign > span {
  display: block;
  font-family: var(--font-body);
  font-size: 0.7rem; font-weight: 600;
  letter-spacing: 0.18em; color: var(--walnut-light);
  margin-top: 0.4rem;
}
@media (max-width: 760px) {
  .statement { padding: 5rem 1.5rem; }
  .statement-foot { flex-direction: column; gap: 1.75rem; }
}

/* ── 2. Dark chapter with sticky media ── */
.chapter {
  padding: 8rem 3rem;
  background: var(--forest-deep);
  color: var(--parchment);
  overflow: hidden;
}
.chapter-inner {
  max-width: 1320px; margin: 0 auto;
  display: grid; grid-template-columns: 0.82fr 1fr;
  gap: 5rem; align-items: start;
}
.chapter-media {
  position: sticky; top: 100px;
  border-radius: 16px;
  overflow: hidden;
  aspect-ratio: 3/4;
  background: #000;
  box-shadow: 0 30px 90px rgba(0,0,0,0.5);
}
.chapter-media img, .chapter-media video {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.chapter-media::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 60%, rgba(0,0,0,0.4) 100%);
  pointer-events: none;
}
.chapter-eyebrow {
  font-family: var(--font-body);
  font-size: 0.7rem; font-weight: 700;
  letter-spacing: 0.35em; text-transform: uppercase;
  color: var(--copper-light);
  display: flex; align-items: center; gap: 1rem;
  margin-bottom: 1.75rem;
}
.chapter-eyebrow::before {
  content: ''; width: 48px; height: 1px; background: var(--copper-light);
}
.chapter-title {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 5vw, 4.2rem);
  font-weight: 900; line-height: 1.02;
  text-transform: uppercase; letter-spacing: 0.005em;
  font-variation-settings: 'opsz' 144;
  margin: 0 0 1.5rem;
  text-wrap: balance;
}
.chapter-intro {
  font-size: 1.08rem; line-height: 1.75;
  color: rgba(var(--parchment-rgb), 0.7);
  max-width: 520px;
  text-wrap: pretty;
}
.chapter-steps { margin-top: 3.5rem; }
.chapter-step {
  display: grid; grid-template-columns: auto 1fr;
  gap: 1.75rem; padding: 2.25rem 0;
  border-top: 1px solid rgba(var(--parchment-rgb), 0.13);
  align-items: baseline;
  opacity: 0.4;
  transition: opacity 0.55s var(--ease-out);
}
.chapter-step:last-child { border-bottom: 1px solid rgba(var(--parchment-rgb), 0.13); }
.chapter-step.is-active { opacity: 1; }
.chapter-step-num {
  font-family: var(--font-body);
  font-size: 2.4rem; font-weight: 700;
  color: var(--bronze-light);
  line-height: 1;
  transition: color 0.55s var(--ease-out);
}
.chapter-step.is-active .chapter-step-num { color: var(--copper-light); }
.chapter-step-title {
  font-family: var(--font-display);
  font-size: 1.5rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.01em;
  font-variation-settings: 'opsz' 48;
  margin-bottom: 0.5rem;
}
.chapter-step-desc {
  font-size: 1rem; line-height: 1.7;
  color: rgba(var(--parchment-rgb), 0.62);
  text-wrap: pretty;
}
@media (max-width: 860px) {
  .chapter { padding: 5rem 1.5rem; }
  .chapter-inner { grid-template-columns: 1fr; gap: 2.5rem; }
  .chapter-media { position: relative; top: 0; aspect-ratio: 16/10; max-height: 60vh; }
}

/* ── 3. Card with the home's depth treatment ── */
.card {
  background: var(--white);
  border: 1px solid rgba(var(--walnut-rgb), 0.08);
  border-radius: 14px;
  overflow: hidden;
  position: relative;
  box-shadow: 0 2px 12px rgba(var(--walnut-rgb), 0.06);
  transition: box-shadow 0.5s var(--ease-out), transform 0.5s var(--ease-out);
}
.card:hover {
  box-shadow: 0 12px 36px rgba(var(--walnut-rgb), 0.13);
  transform: translateY(-3px);
}
.card-media {
  position: relative;
  overflow: hidden;
  background: linear-gradient(160deg, var(--cream) 0%, var(--cream-dark) 100%);
  display: flex; align-items: center; justify-content: center;
}
.card-media img { width: 100%; height: 100%; object-fit: cover; }
.card-badge {
  position: absolute;
  top: 0.8rem; left: 0.8rem; z-index: 2;
  background: var(--copper);
  color: var(--white);
  font-size: 0.6rem; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  padding: 0.3rem 0.75rem;
  border-radius: 20px;
}
.card-body { padding: 1.5rem 1.5rem 1.6rem; }

/* ═══════════ SECTION PRIMITIVES ═══════════
   Lifted verbatim from the v15 home so every page states a section
   the same way. Use these instead of re-declaring an eyebrow or a
   section title per page. */
.section-label {
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: var(--copper);
  display: flex; align-items: center; gap: 1rem;
}
.section-label::before {
  content: '';
  width: 30px; height: 1px;
  background: var(--copper);
}
.section-title {
  font-family: var(--font-display);
  font-size: clamp(2.7rem, 5.2vw, 4.7rem);
  font-weight: 800;
  line-height: 1.02;
  color: var(--forest);
  margin-top: 1rem;
  font-variation-settings: 'opsz' 144;
  text-transform: uppercase;
  letter-spacing: 0.005em;
  text-wrap: balance;
}
.section-title-light { color: var(--parchment); }

/* Line mask for display headlines — motion.js slides .line-inner up.
   The start offset is applied by JS (gsap.set) rather than here: a CSS
   transform would become the tween's computed start value and fight
   yPercent, leaving the line parked off-screen. */
.line { display: block; overflow: hidden; }
.line-inner { display: block; }

/* ═══════════ MOTION START STATES ═══════════
   motion.js animates FROM these with gsap.from(), so declaring them
   here prevents a flash of final-position content before GSAP boots.
   If JS never runs, the reduced-motion rule below reveals everything. */
[data-anim], [data-anim-group] > * { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  [data-anim], [data-anim-group] > * { opacity: 1 !important; transform: none !important; }
  html:not(.motion-ready) .line-inner { opacity: 1 !important; transform: none !important; }
}
/* Until motion.js boots, keep masked lines invisible rather than offset:
   opacity does not become a transform start value, so it cannot fight the
   tween the way translateY did. */
html:not(.motion-ready) .line-inner { opacity: 0; }
.motion-ready .line-inner { opacity: 1; }

/* Last-resort safety net: if scripting is off entirely, show the content */
.no-js [data-anim],
.no-js [data-anim-group] > * { opacity: 1; }
.no-js .line-inner { transform: none; }

/* ═══════════ DISPLAY FONT GUARD ═══════════
   NOTE: the same helper covers hyphens. Headliner N45's demo cut stamps its
   watermark over "-" as well as "&", so a hyphenated display title needs
   <span class="amp">-</span> too.
   The bundled Headliner N45 is the DEMO cut: it stamps a
   "PERSONAL USE DEMO VISIT KCFONTS.COM" watermark over digits and a
   few glyphs (& among them). Anything that shows numbers or an
   ampersand must be routed to the body font. Wrap a stray ampersand
   inside a display title in <span class="amp">&amp;</span>.
   Licensing the retail cut removes the need for this block. */
.amp {
  font-family: var(--font-body);
}

/* ═══════════ BUTTONS ═══════════ */
.btn-primary {
  display: inline-flex; align-items: center; gap: 0.75rem;
  padding: 1rem 2.2rem;
  background: var(--white);
  color: var(--forest);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  border: none;
  transition: all 0.4s var(--ease-out);
  position: relative;
  overflow: hidden;
}
.btn-primary::before {
  content: ''; position: absolute; inset: 0;
  background: var(--cream);
  transform: translateX(-101%);
  transition: transform 0.5s var(--ease-out);
}
.btn-primary:hover::before { transform: translateX(0); }
.btn-primary span { position: relative; z-index: 1; }
.btn-primary svg { position: relative; z-index: 1; width: 16px; height: 16px; transition: transform 0.3s; }
.btn-primary:hover svg { transform: translateX(4px); }
.btn-secondary {
  display: inline-flex; align-items: center; gap: 0.75rem;
  padding: 1rem 2.2rem;
  background: transparent;
  color: var(--parchment);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  border: 1px solid rgba(var(--parchment-rgb),0.3);
  transition: all 0.4s var(--ease-out);
}
.btn-secondary:hover {
  border-color: var(--white);
  background: var(--white);
  color: var(--forest);
}
.btn-primary-dark {
  display: inline-flex; align-items: center; gap: 0.75rem;
  padding: 1rem 2.2rem;
  background: var(--forest);
  color: var(--parchment);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  transition: all 0.4s var(--ease-out);
  position: relative;
  overflow: hidden;
}
.btn-primary-dark::before {
  content: ''; position: absolute; inset: 0;
  background: var(--emerald);
  transform: translateX(-101%);
  transition: transform 0.5s var(--ease-out);
}
.btn-primary-dark:hover::before { transform: translateX(0); }
.btn-primary-dark span { position: relative; z-index: 1; }
.btn-secondary-dark {
  display: inline-flex; align-items: center; gap: 0.75rem;
  padding: 1rem 2.2rem;
  background: transparent;
  color: var(--forest);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  border: 1px solid var(--cream-dark);
  transition: all 0.4s var(--ease-out);
}
.btn-secondary-dark:hover { border-color: var(--forest); color: var(--forest); }


/* ══════════════════════════════════════════
   NEWSLETTER
══════════════════════════════════════════ */
/* Ember footage behind the signup band, reusing the video the loader carried
   before it was switched off. Same layer recipe as that loader: video, then a
   radial wash that keeps the centre readable. */
.newsletter {
  padding: 6rem 3rem;
  background: var(--forest-deep);
  position: relative;
  overflow: hidden;
}
.newsletter-fire {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center bottom;
  z-index: 0;
}
.newsletter-fire-overlay {
  position: absolute; inset: 0; z-index: 1;
  background: radial-gradient(120% 90% at 50% 120%,
    rgba(var(--forest-deep-rgb), 0.5) 0%,
    rgba(var(--forest-deep-rgb), 0.84) 55%,
    rgba(var(--forest-deep-rgb), 0.96) 100%);
  pointer-events: none;
}
.newsletter > .newsletter-inner { position: relative; z-index: 2; }
@media (prefers-reduced-motion: reduce) {
  .newsletter-fire { display: none; }
}
.newsletter::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--copper), transparent);
}
.newsletter-inner {
  max-width: 700px;
  margin: 0 auto;
  text-align: center;
}
.newsletter .section-label { justify-content: center; margin-bottom: 0.5rem; }
.newsletter .section-label::before { display: none; }
.newsletter-title {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 800;
  color: var(--parchment);
  margin-bottom: 1rem;
  font-variation-settings: 'opsz' 48;
}
.newsletter-desc {
  font-size: 0.95rem;
  color: rgba(var(--parchment-rgb),0.6);
  margin-bottom: 2rem;
  line-height: 1.7;
}
.newsletter-form {
  display: flex;
  gap: 0;
  max-width: 500px;
  margin: 0 auto;
}
/* Same input as the live store (see FORM FIELDS). The focus ring is copper
   instead of ink because an ink ring disappears on the dark steel band. */
.newsletter-input {
  flex: 1; min-width: 0;
  padding: 0 20px;
  background: #fff;
  border: 0; border-radius: 0;
  color: rgb(18, 18, 18);
  font-family: var(--font-body);
  font-size: 16px; letter-spacing: 0.4px;
  outline: none;
  transition: box-shadow 0.1s ease;
}
.newsletter-input::placeholder { color: rgba(18, 18, 18, 0.55); }
.newsletter-input:focus { box-shadow: inset 0 0 0 3px var(--copper-light); }
.newsletter-btn {
  padding: 1rem 2rem;
  background: var(--copper);
  color: var(--parchment);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  border: 1px solid var(--copper);
  transition: all 0.3s;
  white-space: nowrap;
}
.newsletter-btn:hover { background: var(--bronze); border-color: var(--bronze); }

/* ══════════════════════════════════════════
   FORM FIELDS
   Same input as the live alacruzgrills.com contact form (Shopify Dawn): a
   square white box with a 2px border at 55% ink, and the label sitting inside
   the field until it is focused or filled, then shrinking to the top edge.
   The example text in each placeholder only shows while typing.
══════════════════════════════════════════ */
:is(.field, .co-field) { position: relative; }
:is(.field, .co-field) > label {
  position: absolute; top: 12px; left: 20px; z-index: 1;
  max-width: calc(100% - 40px);
  margin: 0;
  font-family: var(--font-body); font-size: 16px; font-weight: 400;
  line-height: 24px; letter-spacing: 1px; text-transform: none;
  color: rgba(18, 18, 18, 0.75);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  pointer-events: none;
  transition: top 0.1s ease, font-size 0.1s ease, letter-spacing 0.1s ease;
}
:is(.field, .co-field) > label .opt { font-weight: 400; letter-spacing: inherit; color: rgba(18, 18, 18, 0.55); }
:is(.field, .co-field) :is(input:where(:not([type="checkbox"], [type="radio"])), select, textarea) {
  display: block; width: 100%; height: 45px; margin: 0;
  padding: 15px 15px 15px 20px;
  font-family: var(--font-body); font-size: 16px; font-weight: 400;
  line-height: 24px; letter-spacing: 0.4px;
  color: rgb(18, 18, 18);
  background-color: #fff;
  border: 0; border-radius: 0;
  box-shadow: 0 0 0 2px rgba(18, 18, 18, 0.55);
  -webkit-appearance: none; appearance: none;
  transition: box-shadow 0.1s ease, padding 0.1s ease;
}
:is(.field, .co-field) textarea { height: auto; min-height: 120px; resize: vertical; }
:is(.field, .co-field) select {
  padding: 17px 44px 0 20px; line-height: 26px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23121212' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 16px center; background-size: 14px;
}
:is(.field, .co-field) :is(input, select, textarea):hover { box-shadow: 0 0 0 3px rgba(18, 18, 18, 0.55); }
:is(.field, .co-field) :is(input, select, textarea):focus { outline: none; box-shadow: 0 0 0 3px rgb(18, 18, 18); }
:is(.field, .co-field) :is(input, textarea)::placeholder { color: transparent; transition: color 0.1s ease; }
:is(.field, .co-field) :is(input, textarea):focus::placeholder { color: rgba(18, 18, 18, 0.45); }
/* Floated state: focused, filled, or a select (always holds a value) */
:is(.field, .co-field):has(:focus, input:not(:placeholder-shown), textarea:not(:placeholder-shown), select) > label {
  top: 4px; font-size: 10px; letter-spacing: 0.4px;
}
:is(.field, .co-field):has(:focus, input:not(:placeholder-shown), textarea:not(:placeholder-shown)) :is(input, textarea) {
  padding-top: 22px; padding-bottom: 8px;
}

/* ══════════════════════════════════════════
   FOOTER
══════════════════════════════════════════ */
.footer {
  padding: 5rem 3rem 0;
  background: var(--parchment);
  color: var(--forest);
}
.footer-top {
  max-width: 1300px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.5fr repeat(3, 1fr);
  gap: 3rem;
  padding-bottom: 4rem;
  border-bottom: 1px solid rgba(var(--walnut-rgb),0.15);
}
.footer-brand-col { }
.footer-logo {
  height: 40px;
  margin-bottom: 1.2rem;
}
.footer-tagline {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1rem;
  color: var(--copper);
  margin-bottom: 1rem;
  font-variation-settings: 'opsz' 24;
}
.footer-desc {
  font-size: 0.85rem;
  color: var(--walnut-light);
  line-height: 1.8;
  margin-bottom: 1.5rem;
  max-width: 300px;
}
.footer-socials {
  display: flex; gap: 0.75rem;
}
.footer-social-link {
  width: 40px; height: 40px;
  border: 1px solid rgba(var(--walnut-rgb),0.25);
  display: flex; align-items: center; justify-content: center;
  color: var(--forest);
  transition: all 0.3s;
}
.footer-social-link:hover {
  background: var(--forest);
  border-color: var(--forest);
  color: var(--parchment);
}
.footer-social-link svg { width: 16px; height: 16px; }
.footer-col-title {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 800;
  margin-bottom: 1.5rem;
  color: var(--forest);
  font-variation-settings: 'opsz' 48;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.footer-links { list-style: none; }
.footer-links li { margin-bottom: 0.75rem; }
.footer-links a {
  font-size: 0.85rem;
  color: var(--walnut-light);
  transition: color 0.3s;
}
.footer-links a:hover { color: var(--copper); }
.footer-bottom {
  max-width: 1300px;
  margin: 0 auto;
  padding: 1.5rem 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.75rem;
  color: rgba(var(--walnut-rgb),0.6);
}
.footer-legal-links {
  display: flex; gap: 2rem;
}
.footer-legal-links a {
  color: rgba(var(--walnut-rgb),0.6);
  transition: color 0.3s;
}
.footer-legal-links a:hover { color: var(--copper); }

/* ══════════════════════════════════════════
   REVEAL ANIMATIONS
══════════════════════════════════════════ */
.reveal-up {
  opacity: 0;
  transform: translateY(50px);
}
.reveal-left {
  opacity: 0;
  transform: translateX(-50px);
}
.reveal-right {
  opacity: 0;
  transform: translateX(50px);
}
.reveal-scale {
  opacity: 0;
  transform: scale(0.9);
}
/* Revealed state — driven by system.js on pages that don't load GSAP.
   GSAP-driven pages animate the same start-states directly and never
   get .revealed, so the two approaches don't fight. */
.reveal-up, .reveal-left, .reveal-right, .reveal-scale {
  transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out);
}
.reveal-up.revealed,
.reveal-left.revealed,
.reveal-right.revealed,
.reveal-scale.revealed {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .reveal-up, .reveal-left, .reveal-right, .reveal-scale {
    transition: none;
  }
}
.split-text .char {
  display: inline-block;
  opacity: 0;
  transform: translateY(100%);
}


/* ══════════════════════════════════════════
   CART DRAWER
══════════════════════════════════════════ */
.cart-overlay {
  position: fixed; inset: 0;
  background: rgba(13,13,13,0.55);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  z-index: 9998;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s var(--ease-out), visibility 0.4s;
}
.cart-overlay.open { opacity: 1; visibility: visible; }
.cart-drawer {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: 420px;
  max-width: 92vw;
  background: var(--white);
  z-index: 9999;
  transform: translateX(100%);
  /* Parked off-screen but still laid out: without this it extends the
     document and shows up as a blank slab below the footer. */
  visibility: hidden;
  transition: transform 0.45s var(--ease-out), visibility 0.45s;
  display: flex;
  flex-direction: column;
  box-shadow: -8px 0 40px rgba(0,0,0,0.15);
}
.cart-drawer.open { visibility: visible; transform: translateX(0); }
.cart-drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.5rem 1.8rem;
  border-bottom: 1px solid var(--cream-dark);
}
.cart-drawer-title {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--forest);
  font-variation-settings: 'opsz' 36;
}
.cart-drawer-count {
  font-size: 0.85rem;
  color: var(--walnut-light);
  font-weight: 400;
}
.cart-drawer-close {
  width: 36px; height: 36px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--walnut-light);
  transition: all 0.3s;
  border: 1px solid var(--cream-dark);
}
.cart-drawer-close:hover {
  background: var(--cream);
  color: var(--forest);
}
.cart-drawer-close svg { width: 16px; height: 16px; }
.cart-drawer-body {
  flex: 1;
  overflow-y: auto;
  padding: 1.5rem 1.8rem;
}
.cart-drawer-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  text-align: center;
  color: var(--walnut-light);
}
.cart-drawer-empty svg {
  width: 56px; height: 56px;
  stroke: var(--cream-dark);
  margin-bottom: 1.2rem;
}
.cart-drawer-empty p {
  font-size: 0.95rem;
  margin-bottom: 0.3rem;
  color: var(--forest);
  font-weight: 500;
}
.cart-drawer-empty span {
  font-size: 0.8rem;
  color: var(--walnut-light);
}
.cart-item {
  display: flex;
  gap: 1rem;
  padding: 1.2rem 0;
  border-bottom: 1px solid var(--cream-dark);
  position: relative;
  animation: cartItemIn 0.35s var(--ease-out) both;
}
@keyframes cartItemIn {
  from { opacity: 0; transform: translateX(20px); }
  to { opacity: 1; transform: translateX(0); }
}
.cart-item-img {
  width: 80px; height: 80px;
  flex-shrink: 0;
  background: var(--cream);
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.cart-item-img img {
  max-width: 90%; max-height: 90%;
  object-fit: contain;
}
.cart-item-info { flex: 1; min-width: 0; }
.cart-item-name {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
  color: var(--forest);
  margin-bottom: 0.2rem;
  font-variation-settings: 'opsz' 24;
}
.cart-item-variant {
  font-size: 0.75rem;
  color: var(--walnut-light);
  margin-bottom: 0.6rem;
}
.cart-item-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.cart-item-qty {
  display: flex;
  align-items: center;
  gap: 0;
  border: 1px solid var(--cream-dark);
  border-radius: 8px;
  overflow: hidden;
}
.cart-item-qty button {
  width: 30px; height: 30px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem;
  color: var(--forest);
  background: transparent;
  transition: background 0.2s;
}
.cart-item-qty button:hover { background: var(--cream); }
.cart-item-qty span {
  width: 32px;
  text-align: center;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--forest);
  border-left: 1px solid var(--cream-dark);
  border-right: 1px solid var(--cream-dark);
  line-height: 30px;
}
.cart-item-price {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--copper);
  font-variation-settings: 'opsz' 24;
}
.cart-item-remove {
  position: absolute;
  top: 1.2rem; right: 0;
  width: 24px; height: 24px;
  display: flex; align-items: center; justify-content: center;
  color: var(--cream-dark);
  transition: color 0.2s;
  border-radius: 50%;
}
.cart-item-remove:hover { color: var(--copper); }
.cart-item-remove svg { width: 14px; height: 14px; }
.cart-drawer-footer {
  padding: 1.2rem 1.8rem 1.8rem;
  border-top: 1px solid var(--cream-dark);
  background: var(--white);
}
.cart-subtotal-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 0.4rem;
}
.cart-subtotal-label {
  font-size: 0.85rem;
  color: var(--walnut-light);
}
.cart-subtotal-value {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--forest);
  font-variation-settings: 'opsz' 36;
}
.cart-shipping-note {
  font-size: 0.72rem;
  color: var(--walnut-light);
  margin-bottom: 1.2rem;
}
.cart-checkout-btn {
  width: 100%;
  padding: 1rem;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  background: var(--forest);
  color: var(--parchment);
  border-radius: 12px;
  transition: all 0.35s var(--ease-out);
  border: none;
}
.cart-checkout-btn:hover {
  background: var(--copper);
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(var(--copper-rgb),0.25);
}
.cart-added-toast {
  position: fixed;
  top: 1.5rem; right: 1.5rem;
  z-index: 10000;
  background: var(--forest);
  color: var(--parchment);
  padding: 1rem 1.5rem;
  border-radius: 12px;
  font-size: 0.85rem;
  font-weight: 500;
  display: flex; align-items: center; gap: 0.6rem;
  box-shadow: 0 12px 32px rgba(0,0,0,0.25);
  transform: translateY(-20px);
  opacity: 0;
  transition: all 0.4s var(--ease-out);
  pointer-events: none;
}
.cart-added-toast.show {
  transform: translateY(0);
  opacity: 1;
}
.cart-added-toast svg {
  width: 18px; height: 18px;
  stroke: var(--copper-light);
  flex-shrink: 0;
}

/* ══════════════════════════════════════════
   WHATSAPP FLOATING BUTTON
══════════════════════════════════════════ */
.wa-float {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  z-index: 900;
  display: flex;
  align-items: center;
  gap: 0;
  opacity: 0;
  transform: translateY(30px);
  animation: waEntrance 0.7s var(--ease-out) 3s forwards;
}
@keyframes waEntrance {
  to { opacity: 1; transform: translateY(0); }
}
.wa-float-link {
  display: flex;
  align-items: center;
  gap: 0;
  background: var(--forest);
  border-radius: 60px;
  padding: 0;
  box-shadow:
    0 4px 20px rgba(var(--forest-rgb),0.35),
    0 0 0 0 rgba(var(--copper-rgb),0);
  transition: all 0.45s var(--ease-out);
  overflow: hidden;
  text-decoration: none;
  animation: waPulse 3.5s ease-in-out 5s infinite;
}
@keyframes waPulse {
  0%, 100% { box-shadow: 0 4px 20px rgba(var(--forest-rgb),0.35), 0 0 0 0 rgba(var(--copper-rgb),0); }
  50% { box-shadow: 0 4px 20px rgba(var(--forest-rgb),0.35), 0 0 0 8px rgba(var(--copper-rgb),0.12); }
}
.wa-float-link:hover {
  background: var(--forest-deep);
  box-shadow: 0 6px 28px rgba(var(--forest-rgb),0.45), 0 0 0 0 rgba(var(--copper-rgb),0);
  transform: translateY(-2px);
  animation: none;
}
.wa-float-icon {
  width: 54px;
  height: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.wa-float-icon svg {
  width: 26px;
  height: 26px;
  fill: var(--parchment);
  transition: transform 0.3s var(--ease-out);
}
.wa-float-link:hover .wa-float-icon svg {
  transform: scale(1.1) rotate(-8deg);
}
.wa-float-label {
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--parchment);
  white-space: nowrap;
  max-width: 0;
  opacity: 0;
  padding-right: 0;
  transition: max-width 0.45s var(--ease-out), opacity 0.3s ease, padding-right 0.45s var(--ease-out);
}
.wa-float-link:hover .wa-float-label {
  max-width: 200px;
  opacity: 1;
  padding-right: 1.4rem;
}
@media (max-width: 768px) {
  .wa-float { bottom: 1.2rem; right: 1.2rem; }
  .wa-float-icon { width: 48px; height: 48px; }
  .wa-float-icon svg { width: 22px; height: 22px; }
}

/* ── Client feedback: uppercase on all display titles ── */
.story-intro-title,
.story-journey-title,
.milestone-title,
.newsletter-title,
.story-intro-founders-names {
  text-transform: uppercase;
  letter-spacing: 0.01em;
}

/* ── v13 only: Headliner N45 has no italic glyphs ── */
/* Route any italic text to Assistant (which supports italic). */
.footer-tagline,
.story-intro-quote,
.loader-tagline {
  font-family: var(--font-body);
}
.story-intro-title em {
  font-style: normal;
  color: var(--cream-dark);
}

/* Headliner N45 DEMO injects "PERSONAL USE DEMO VISIT KCFONTS.COM"
   watermark on numbers and on small/secondary text. Route every
   non-display-title element to the body font (Assistant). Headliner
   stays as the display font for large titles only. */
.stat-number,
.stat-label,
.milestone-year-badge,
.milestone-desc,
.countdown-unit,
.trust-strip-title,
.review-avatar,
.review-author-name,
.review-author-location,
.review-quote,
.category-name,
.category-count,
.mobile-menu a,
.footer-col-title,
.footer-bottom,
.nav-dropdown-trigger,
.header-nav a,
.review-text::before,
.amp,
.process-step-num,
.product-name,
.manifesto-sign,
.cart-drawer-title,
.cart-item-name,
.cart-item-price,
.cart-subtotal-value,
.sale-name,
.sale-price-new,
.sale-price-old,
.story-video-title {
  font-family: var(--font-body);
}

/* ═══════════ SHARED RESPONSIVE ═══════════ */
@media (max-width: 1024px) {
  .footer-top { grid-template-columns: 1fr 1fr; gap: 2rem; }
}
@media (max-width: 768px) {
  .header { padding: 0 1.5rem; gap: 1rem; }
  .header-nav { display: none; }
  .menu-toggle { display: flex; }
  /* Logo shrinks so it never collides with the action icons */
  .header-logo img { height: 34px; }
  .header.scrolled .header-logo img { height: 30px; }
  .newsletter { padding: 4rem 1.5rem; }
  .newsletter-form { flex-direction: column; }
  .newsletter-input { min-height: 48px; }
  .footer { padding: 4rem 1.5rem 0; }
  .footer-top { grid-template-columns: 1fr; gap: 2rem; }
  .footer-bottom { flex-direction: column; gap: 1rem; text-align: center; }
  .btn-primary, .btn-secondary, .btn-primary-dark, .btn-secondary-dark { text-align: center; justify-content: center; }
}

/* ══════════════════════════════════════════
   NUMBERS (client review)
   Every display number (stats, prices, totals, years) uses the same face as
   the home stats strip: Big Shoulders Display. The body prefix beats both the
   display-font guard and each page's own font-family on these classes.
   Notes that sit inside a price ("or 6 payments…", "USD") stay in the body face.
══════════════════════════════════════════ */
body :is(
  .stat-number, .dealer-stat-n, .story-card-year, .milestone-year-badge,
  .product-price, .prod-price, .rec-price, .line-price, .co-line-price,
  .pdp-price, .pdp-stickybar-price, .pdp-mc-price, .pdp-ess-price,
  .sale-price-new, .sale-price-old, .cart-item-price, .cart-subtotal-value
),
/* IDs kept out of :is(), which would give the whole list ID specificity */
#sumSubtotal, #sumTotal, #coSubtotal, #coTotal {
  font-family: var(--font-num);
  font-weight: 800;
  letter-spacing: 0.01em;
  font-variation-settings: normal;
}
body :is(.line-price, .pdp-price) small { font-family: var(--font-body); font-weight: 400; letter-spacing: normal; }

/* Parallax media starts at the scale GSAP gives it, so the image does not jump (zoom) when the script loads */
[data-parallax] { transform: scale(1.12); transform-origin: center; }
@media (prefers-reduced-motion: reduce) { [data-parallax] { transform: none; } }