/* ==========================================================================
   Farghali — "Pressed fresh" design system
   Mobile-first. Breakpoints: 40em (640px), 48em (768px), 64em (1024px), 80em (1280px)
   ========================================================================== */

/* ---------- Tokens ---------- */
:root {
  /* Brand */
  --night: #180924;
  --plum: #241034;
  --plum-2: #321848;
  --purple: #66308f;
  --violet: #9b5fd0;
  --magenta: #e5287a;          /* large shapes & on-dark accents */
  --magenta-ink: #c0175c;      /* magenta text/buttons on light: AA */
  --pink: #ff5c9d;             /* magenta accents on dark: AA */
  --magenta-deep: #d01d6b;     /* magenta surfaces carrying white body text: AA */
  --magenta-hover: #a3124d;
  --lilac: #ecdff8;
  --lilac-2: #d9c3f0;

  /* Flavors (accents, never body text colors on light) */
  --mango: #ffb238;
  --avocado: #a9cb4c;
  --pome: #e23a52;
  --citrus: #ffe066;

  /* Neutrals */
  --cream: #fff8ef;
  --cream-2: #f6ecdf;
  --white: #ffffff;
  --ink: #1d0f28;
  --muted: #5d4f68;
  --line: rgba(29, 15, 40, 0.14);
  --line-light: rgba(255, 255, 255, 0.16);

  /* Type */
  --font-sans: "Bricolage Grotesque", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-serif: "Instrument Serif", "Iowan Old Style", Georgia, serif;
  --font-arabic: "Reem Kufi", "Segoe UI", Tahoma, sans-serif;

  --step--1: clamp(0.82rem, 0.8rem + 0.1vw, 0.88rem);
  --step-0: clamp(1rem, 0.97rem + 0.15vw, 1.075rem);
  --step-1: clamp(1.15rem, 1.07rem + 0.4vw, 1.4rem);
  --step-2: clamp(1.45rem, 1.25rem + 0.9vw, 2rem);
  --step-3: clamp(1.9rem, 1.5rem + 1.9vw, 3.1rem);
  --step-4: clamp(2.4rem, 1.7rem + 3.4vw, 4.6rem);
  --step-5: clamp(3rem, 1.8rem + 6vw, 7.5rem);
  --step-6: clamp(3.4rem, 1.6rem + 8.6vw, 10.5rem);

  /* Space & shape */
  --gutter: clamp(1.25rem, 4.5vw, 4rem);
  --section: clamp(5rem, 10vw, 10rem);
  --radius-sm: 10px;
  --radius: 20px;
  --radius-lg: 32px;
  --shadow: 0 1px 2px rgba(29, 15, 40, 0.06), 0 14px 34px -14px rgba(29, 15, 40, 0.24);
  --shadow-lg: 0 40px 80px -30px rgba(24, 9, 36, 0.55);
  --header-h: 64px;
  --header-top: 12px;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  --grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + var(--header-top) * 2 + 1rem); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font-sans);
  font-optical-sizing: auto;
  font-size: var(--step-0);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img, svg { display: block; max-width: 100%; }
img { height: auto; }
h1, h2, h3, h4, p, ul, ol, figure, blockquote, dl, dd { margin: 0; }
ul[class], ol[class] { list-style: none; padding: 0; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }

:focus-visible { outline: 2px solid var(--magenta-ink); outline-offset: 3px; border-radius: 6px; }
.on-dark :focus-visible { outline-color: var(--citrus); }

::selection { background: var(--magenta); color: var(--white); }

.skip-link {
  position: fixed; left: 1rem; top: -100px; z-index: 200;
  padding: 0.75rem 1.25rem; background: var(--ink); color: var(--white);
  border-radius: 999px; text-decoration: none; font-weight: 700;
}
.skip-link:focus { top: 1rem; }

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

.icon { width: 1.25em; height: 1.25em; flex: none; }
.icon--sm { width: 1em; height: 1em; }

/* ---------- Layout ---------- */
.container { width: 100%; max-width: calc(1360px + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter); }
.container--narrow { max-width: calc(900px + var(--gutter) * 2); }
.section { position: relative; padding-block: var(--section); }
.section--tight { padding-block: calc(var(--section) * 0.6); }
.section--cream2 { background: var(--cream-2); }
.section--lilac { background: var(--lilac); }
.section--night { background: var(--night); color: var(--white); }
.section--plum { background: var(--plum); color: var(--white); }
.section--magenta { background: var(--magenta-deep); color: var(--white); }
.on-dark .lead, .on-dark .prose { color: rgba(255, 255, 255, 0.78); }

/* Film grain for dark, rich surfaces */
.grain { position: relative; isolation: isolate; }
.grain::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: var(--grain); opacity: 0.07; mix-blend-mode: overlay;
}

/* Wavy "juice line" divider: sits at the bottom of a section, filled with the next section's color */
.wave { position: absolute; left: 0; right: 0; bottom: -1px; height: clamp(28px, 4vw, 64px); overflow: hidden; pointer-events: none; color: var(--cream); z-index: 2; }
.wave svg { width: 200%; max-width: none; height: 100%; }
.wave--cream2 { color: var(--cream-2); }
.wave--lilac { color: var(--lilac); }
.wave--night { color: var(--night); }
.wave--plum { color: var(--plum); }
.wave--magenta { color: var(--magenta-deep); }
@media (prefers-reduced-motion: no-preference) {
  .wave svg { animation: wave-drift 18s linear infinite; }
}
@keyframes wave-drift { to { transform: translateX(-50%); } }

/* ---------- Typography ---------- */
.eyebrow {
  display: inline-flex; align-items: center; gap: 0.6rem;
  padding: 0.4rem 0.85rem 0.4rem 0.5rem; border-radius: 999px;
  background: var(--white); border: 1px solid var(--line);
  font-size: var(--step--1); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink); margin-bottom: 1.5rem;
}
.eyebrow::before { content: ""; width: 0.65rem; height: 0.65rem; border-radius: 50%; background: var(--magenta); box-shadow: 0 0 0 4px rgba(229, 40, 122, 0.18); }
.on-dark .eyebrow { background: rgba(255, 255, 255, 0.08); border-color: var(--line-light); color: var(--white); }
.eyebrow--mango::before { background: var(--mango); box-shadow: 0 0 0 4px rgba(255, 178, 56, 0.25); }
.eyebrow--avocado::before { background: var(--avocado); box-shadow: 0 0 0 4px rgba(169, 203, 76, 0.25); }

.display, .h1, .h2, .h3 {
  font-family: var(--font-sans);
  font-weight: 750;
  font-stretch: 85%;
  letter-spacing: -0.035em;
  line-height: 0.95;
  text-wrap: balance;
}
.display { font-size: var(--step-6); letter-spacing: -0.05em; line-height: 0.88; }
.h1 { font-size: var(--step-5); letter-spacing: -0.045em; line-height: 0.9; }
.h2 { font-size: var(--step-4); }
.h3 { font-size: var(--step-2); line-height: 1.05; letter-spacing: -0.02em; font-stretch: 90%; }
.serif, .display em, .h1 em, .h2 em, .h3 em {
  font-family: var(--font-serif); font-style: italic; font-weight: 400; font-stretch: 100%;
  letter-spacing: -0.01em; color: var(--magenta-ink);
}
.on-dark :is(.display, .h1, .h2, .h3) em, .section--magenta :is(.h1, .h2, .h3) em { color: var(--citrus); }
.hero .display em, .page-hero :is(.h1, .h2) em, .not-found :is(.h1, .h2) em { color: var(--pink); }
.section--night :is(.display, .h1, .h2, .h3) em, .section--plum :is(.h1, .h2, .h3) em { color: var(--pink); }

.lead { font-size: var(--step-1); line-height: 1.55; color: var(--muted); max-width: 36em; }
.prose { color: var(--muted); max-width: 38em; }
.prose p + p { margin-top: 1.1em; }
.prose strong { color: var(--ink); font-weight: 700; }
.on-dark .prose strong { color: var(--white); }

.ar { font-family: var(--font-arabic); font-weight: 600; letter-spacing: 0; direction: rtl; unicode-bidi: isolate; }

.section-head { display: grid; gap: 1.25rem; margin-bottom: clamp(2.75rem, 5vw, 5rem); }
.section-head--split { align-items: end; }
@media (min-width: 64em) { .section-head--split { grid-template-columns: 1.2fr 0.8fr; gap: 4rem; } }

/* Inline image "pills" inside headlines */
.pill-img {
  display: inline-block; width: 1.9em; height: 0.82em; margin-inline: 0.06em;
  border-radius: 999px; overflow: hidden; vertical-align: -0.06em; background: var(--lilac);
  transform: rotate(-4deg);
}
.pill-img:nth-of-type(2n) { transform: rotate(5deg); }
.pill-img img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- Buttons ---------- */
.btn {
  --btn-bg: var(--ink); --btn-fg: var(--white); --btn-border: var(--btn-bg);
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 0.65rem;
  min-height: 3.4rem; padding: 0.85rem 1.6rem;
  border: 1.5px solid var(--btn-border); border-radius: 999px;
  background: var(--btn-bg); color: var(--btn-fg);
  font-weight: 700; font-size: 1rem; line-height: 1.2; text-decoration: none; letter-spacing: -0.005em;
  transition: background-color 0.3s var(--ease), color 0.3s var(--ease), border-color 0.3s var(--ease), transform 0.35s var(--ease), box-shadow 0.3s var(--ease);
}
.btn .icon { transition: transform 0.35s var(--ease); }
.btn:hover .icon { transform: translateX(4px) rotate(-8deg); }
.btn:active { transform: scale(0.97); }
.btn--primary { --btn-bg: var(--magenta-ink); }
.btn--primary:hover { --btn-bg: var(--magenta-hover); box-shadow: 0 14px 30px -12px rgba(192, 23, 92, 0.7); }
.btn--dark:hover { --btn-bg: var(--purple); }
.btn--outline { --btn-bg: transparent; --btn-fg: var(--ink); --btn-border: rgba(29, 15, 40, 0.3); }
.btn--outline:hover { --btn-border: var(--ink); --btn-bg: var(--ink); --btn-fg: var(--white); }
.btn--light { --btn-bg: var(--white); --btn-fg: var(--ink); }
.btn--light:hover { --btn-bg: var(--citrus); }
.btn--citrus { --btn-bg: var(--citrus); --btn-fg: var(--ink); }
.btn--citrus:hover { --btn-bg: var(--white); }
.btn--outline-light { --btn-bg: transparent; --btn-fg: var(--white); --btn-border: rgba(255, 255, 255, 0.45); }
.btn--outline-light:hover { --btn-bg: var(--white); --btn-fg: var(--ink); --btn-border: var(--white); }
.btn--sm { min-height: 2.75rem; padding: 0.55rem 1.15rem; font-size: 0.92rem; }
.btn[disabled] { opacity: 0.7; cursor: progress; }
.btn.is-loading .icon { animation: nudge 0.9s var(--ease) infinite; }
@keyframes nudge { 50% { transform: translateX(5px); } }

.btn-row { display: flex; flex-wrap: wrap; gap: 0.75rem; }

.link-arrow {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-weight: 700; text-decoration: none; color: var(--ink);
  background: linear-gradient(currentColor, currentColor) 0 100% / 100% 2px no-repeat;
  padding-bottom: 0.25rem; transition: background-size 0.4s var(--ease), color 0.2s;
}
.link-arrow .icon { transition: transform 0.35s var(--ease); }
.link-arrow:hover { color: var(--magenta-ink); }
.link-arrow:hover .icon { transform: translateX(5px); }
.on-dark .link-arrow { color: var(--white); }
.on-dark .link-arrow:hover { color: var(--citrus); }

/* ---------- Header: floating capsule ---------- */
.site-header { position: fixed; top: var(--header-top); left: 0; right: 0; z-index: 60; pointer-events: none; }
.site-header__inner {
  pointer-events: auto;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  height: var(--header-h); padding: 0 0.5rem 0 1.1rem;
  background: rgba(255, 248, 239, 0.94); border: 1px solid rgba(29, 15, 40, 0.08);
  border-radius: 999px; box-shadow: 0 10px 30px -18px rgba(24, 9, 36, 0.5);
  transition: box-shadow 0.3s, background-color 0.3s;
}
.site-header.is-scrolled .site-header__inner { background: rgba(255, 248, 239, 0.98); box-shadow: 0 16px 40px -18px rgba(24, 9, 36, 0.55); }
.site-header .container { padding-inline: clamp(0.75rem, 3vw, 2.5rem); }

.brand { display: inline-flex; align-items: center; flex: none; border-radius: 8px; }
.brand img { height: 34px; width: auto; }

.nav__list { display: flex; flex-direction: column; }
.nav__link {
  display: inline-flex; align-items: center; gap: 0.35rem;
  background: none; border: 0; padding: 0; text-decoration: none; font-weight: 600;
  transition: color 0.2s;
}
.nav__toggle .icon { transition: transform 0.35s var(--ease); }
.nav__toggle[aria-expanded="true"] .icon { transform: rotate(180deg); }

.submenu ul { list-style: none; margin: 0; padding: 0; }
.submenu__link { display: grid; gap: 0.1rem; text-decoration: none; border-radius: 14px; }
.submenu__label { font-weight: 700; }
.submenu__note { font-size: var(--step--1); color: var(--muted); }

.menu-toggle {
  display: inline-flex; align-items: center; gap: 0.6rem;
  min-height: 48px; padding: 0 0.3rem 0 1rem;
  background: var(--ink); color: var(--white); border: 0; border-radius: 999px;
  font-weight: 700; font-size: 0.92rem;
}
.menu-toggle__bars { position: relative; width: 38px; height: 38px; border-radius: 50%; background: var(--magenta); }
.menu-toggle__bars span { position: absolute; left: 12px; width: 14px; height: 2px; border-radius: 2px; background: var(--white); transition: transform 0.4s var(--ease-spring), top 0.4s var(--ease); }
.menu-toggle__bars span:first-child { top: 15px; }
.menu-toggle__bars span:last-child { top: 21px; }
.menu-open .menu-toggle__bars span:first-child { top: 18px; transform: rotate(45deg); }
.menu-open .menu-toggle__bars span:last-child { top: 18px; transform: rotate(-45deg); }

/* Mobile menu: full-screen night overlay with flavor blobs */
@media (max-width: 63.99em) {
  .nav {
    position: fixed; inset: 0; z-index: -1;
    display: flex; flex-direction: column; gap: 2rem;
    padding: calc(var(--header-h) + var(--header-top) + 2rem) var(--gutter) 2.5rem;
    background: var(--night); color: var(--white);
    overflow-y: auto; overscroll-behavior: contain;
    clip-path: circle(0% at calc(100% - 3rem) 2.75rem);
    visibility: hidden;
    transition: clip-path 0.7s var(--ease), visibility 0s 0.7s;
    pointer-events: auto;
  }
  .nav::before, .nav::after { content: ""; position: absolute; border-radius: 50%; filter: blur(2px); z-index: -1; opacity: 0.9; }
  .nav::before { width: 46vw; height: 46vw; right: -12vw; bottom: 8vh; background: var(--magenta); }
  .nav::after { width: 26vw; height: 26vw; left: -8vw; bottom: 30vh; background: var(--mango); }
  .menu-open .nav { clip-path: circle(150% at calc(100% - 3rem) 2.75rem); visibility: visible; transition-delay: 0s; }
  .menu-open body { overflow: hidden; }
  .nav__item { border-bottom: 1px solid var(--line-light); }
  .nav__link { width: 100%; justify-content: space-between; padding: 1rem 0; font-size: clamp(2rem, 9vw, 2.8rem); font-weight: 750; font-stretch: 85%; letter-spacing: -0.03em; }
  .nav__link:hover, .nav__link.is-current { color: var(--citrus); }
  .submenu { display: none; padding-bottom: 1rem; }
  .nav__toggle[aria-expanded="true"] + .submenu { display: block; }
  .submenu__link { padding: 0.55rem 0; }
  .submenu__note { color: rgba(255, 255, 255, 0.6); }
  .nav__cta { align-self: stretch; min-height: 3.6rem; --btn-bg: var(--citrus); --btn-fg: var(--ink); }
}
@media (max-width: 63.99em) and (prefers-reduced-motion: reduce) {
  .nav { clip-path: none; transition: none; }
}

/* Desktop navigation */
@media (min-width: 64em) {
  :root { --header-h: 72px; --header-top: 16px; }
  .brand img { height: 40px; }
  .site-header__inner { padding-left: 1.5rem; }
  .menu-toggle { display: none; }
  .nav { display: flex; align-items: center; gap: 1.75rem; }
  .nav__list { flex-direction: row; gap: 0.25rem; }
  .nav__item { position: relative; }
  .nav__link { min-height: 44px; padding: 0 1rem; border-radius: 999px; font-size: 0.97rem; transition: background-color 0.25s, color 0.25s; }
  .nav__link:hover, .nav__toggle[aria-expanded="true"] { background: var(--lilac); }
  .nav__link.is-current { color: var(--magenta-ink); }
  .submenu {
    position: absolute; top: calc(100% + 0.85rem); left: 0; width: 320px;
    padding: 0.6rem; background: var(--white); border-radius: 24px;
    box-shadow: var(--shadow-lg);
    opacity: 0; visibility: hidden; transform: translateY(8px) scale(0.98); transform-origin: top left;
    transition: opacity 0.25s var(--ease), transform 0.3s var(--ease), visibility 0s 0.3s;
  }
  .submenu::before { content: ""; position: absolute; inset: -1rem 0 auto; height: 1rem; }
  .nav__toggle[aria-expanded="true"] + .submenu { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
  @media (hover: hover) {
    .nav__item--has-menu:hover .submenu { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
    .nav__item--has-menu:hover .nav__toggle { background: var(--lilac); }
    .nav__item--has-menu:hover .nav__toggle .icon { transform: rotate(180deg); }
  }
  .submenu li { --dot: var(--magenta); }
  .submenu li:nth-child(2) { --dot: var(--mango); }
  .submenu li:nth-child(3) { --dot: var(--avocado); }
  .submenu li:nth-child(4) { --dot: var(--violet); }
  .submenu__link { position: relative; padding: 0.8rem 1rem 0.8rem 2.4rem; transition: background-color 0.2s; }
  .submenu__link::before { content: ""; position: absolute; left: 1rem; top: 1.25rem; width: 0.6rem; height: 0.6rem; border-radius: 50%; background: var(--dot); transition: transform 0.3s var(--ease-spring); }
  .submenu__link:hover, .submenu__link:focus-visible { background: var(--cream); }
  .submenu__link:hover::before { transform: scale(1.5); }
}

/* ---------- Reveal & entrance ---------- */
@media (prefers-reduced-motion: no-preference) {
  .js [data-reveal] { opacity: 0; transform: translateY(32px); transition: opacity 1s var(--ease), transform 1s var(--ease); }
  .js [data-reveal="fade"] { transform: none; }
  .js [data-reveal="scale"] { transform: scale(0.92); }
  .js [data-reveal].is-visible { opacity: 1; transform: none; }
  .js [data-reveal-delay="1"] { transition-delay: 0.1s; }
  .js [data-reveal-delay="2"] { transition-delay: 0.2s; }
  .js [data-reveal-delay="3"] { transition-delay: 0.3s; }

  .rise { animation: rise 1s var(--ease) both; }
  .rise-1 { animation-delay: 0.08s; }
  .rise-2 { animation-delay: 0.16s; }
  .rise-3 { animation-delay: 0.24s; }
  .rise-4 { animation-delay: 0.32s; }
}
@keyframes rise { from { opacity: 0; transform: translateY(28px); } }

/* Word-by-word scroll fill (JS splits words; fallback is plain text) */
.scrub .w { transition: color 0.25s linear; }
.js .scrub.is-split .w { color: rgba(29, 15, 40, 0.16); }
.js .scrub.is-split .w.is-on { color: inherit; }
.js .on-dark .scrub.is-split .w { color: rgba(255, 255, 255, 0.18); }
.js .scrub.is-split em .w.is-on, .js .scrub.is-split .w.is-on em { color: var(--magenta-ink); }

/* ---------- Media shapes ---------- */
.frame { position: relative; overflow: hidden; border-radius: var(--radius-lg); background: var(--lilac); isolation: isolate; }
.frame img { width: 100%; height: 100%; object-fit: cover; }
.frame--zoom img { transition: transform 1.2s var(--ease); }
.frame--zoom:hover img { transform: scale(1.06); }
.frame--arch { border-radius: 999px 999px var(--radius) var(--radius); }
.frame--circle { border-radius: 50%; aspect-ratio: 1; }
.frame--blob { border-radius: 58% 42% 46% 54% / 48% 56% 44% 52%; }
@media (prefers-reduced-motion: no-preference) {
  .frame--blob { animation: blob 14s ease-in-out infinite alternate; }
}
@keyframes blob {
  0%   { border-radius: 58% 42% 46% 54% / 48% 56% 44% 52%; }
  33%  { border-radius: 42% 58% 60% 40% / 56% 42% 58% 44%; }
  66%  { border-radius: 52% 48% 38% 62% / 40% 60% 40% 60%; }
  100% { border-radius: 46% 54% 56% 44% / 60% 44% 56% 40%; }
}

/* Parallax targets get a compositor hint only while motion is allowed */
@media (prefers-reduced-motion: no-preference) {
  [data-parallax], [data-float] { will-change: transform; }
}

/* ---------- Sticker / badge ---------- */
.sticker {
  display: inline-grid; place-items: center; text-align: center;
  padding: 0.9rem 1.1rem; border-radius: 18px;
  background: var(--citrus); color: var(--ink); box-shadow: var(--shadow);
  font-weight: 800; font-stretch: 85%; line-height: 1; letter-spacing: -0.02em;
  transform: rotate(var(--tilt, -6deg));
}
.sticker small { display: block; margin-top: 0.3rem; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; font-stretch: 100%; }
.sticker--mango { background: var(--mango); }
.sticker--avocado { background: var(--avocado); }
.sticker--magenta { background: var(--magenta-ink); color: var(--white); }
.sticker--lilac { background: var(--lilac); }

.badge-spin {
  position: absolute; width: clamp(108px, 11vw, 150px); aspect-ratio: 1;
  display: grid; place-items: center; border-radius: 50%;
  background: var(--citrus); color: var(--ink); box-shadow: var(--shadow-lg);
}
.badge-spin svg { position: absolute; inset: 8%; width: 84%; height: 84%; }
.badge-spin text { fill: currentColor; font: 800 9.5px var(--font-sans); text-transform: uppercase; }
.badge-spin__core { width: 28%; height: 28%; color: var(--magenta-ink); }
@media (prefers-reduced-motion: no-preference) {
  .badge-spin > svg:first-child { animation: spin 22s linear infinite; }
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Home hero ---------- */
.hero {
  position: relative; overflow: hidden; background: var(--night); color: var(--white);
  padding-top: calc(var(--header-h) + var(--header-top) + clamp(2rem, 5vw, 4rem));
  padding-bottom: clamp(7rem, 12vw, 10rem);
}
.hero__glow { position: absolute; border-radius: 50%; filter: blur(80px); opacity: 0.55; pointer-events: none; z-index: 0; }
.hero__glow--a { width: 48vw; height: 48vw; right: -10vw; top: -10vw; background: var(--purple); }
.hero__glow--b { width: 30vw; height: 30vw; left: -10vw; bottom: -6vw; background: var(--magenta); opacity: 0.35; }
.hero__ghost {
  position: absolute; left: 50%; top: 64%; transform: translate(-50%, -50%); z-index: 0;
  font-family: var(--font-arabic); font-size: clamp(7rem, 24vw, 24rem); line-height: 1; white-space: nowrap;
  color: transparent; -webkit-text-stroke: 1.5px rgba(255, 255, 255, 0.07); pointer-events: none; user-select: none;
}
.hero__grid { position: relative; z-index: 1; display: grid; gap: clamp(3rem, 6vw, 4rem); align-items: center; }
.hero__copy .display { margin-block: 0.25rem 1.75rem; }
.hero__copy .display .line { display: block; }
.hero__copy .lead { color: rgba(255, 255, 255, 0.78); margin-bottom: 2.25rem; }
.hero__ar { display: inline-block; font-size: clamp(1.4rem, 1.15rem + 1vw, 2rem); color: var(--citrus); line-height: 1.4; }
.hero__chips { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 2.25rem; }
.chip {
  display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.45rem 0.9rem 0.45rem 0.55rem;
  border-radius: 999px; border: 1px solid var(--line-light); background: rgba(255, 255, 255, 0.05);
  font-size: 0.88rem; font-weight: 600; color: rgba(255, 255, 255, 0.85);
}
.chip i { width: 0.7rem; height: 0.7rem; border-radius: 50%; background: var(--c, var(--magenta)); }

.hero__stage { position: relative; width: min(100%, 560px); margin-inline: auto; aspect-ratio: 5 / 6; }
.hero__main { position: absolute; inset: 0; box-shadow: var(--shadow-lg); }
.orb { position: absolute; border-radius: 50%; overflow: hidden; box-shadow: var(--shadow-lg); border: 5px solid var(--night); background: var(--lilac); }
.orb img { width: 100%; height: 100%; object-fit: cover; }
.orb--a { width: 38%; aspect-ratio: 1; left: -12%; bottom: 2%; }
.orb--b { width: 24%; aspect-ratio: 1; right: -6%; top: 6%; }
.dot { position: absolute; border-radius: 50%; pointer-events: none; }
.dot--mango { width: 9%; aspect-ratio: 1; background: var(--mango); left: 4%; top: 10%; }
.dot--avocado { width: 5%; aspect-ratio: 1; background: var(--avocado); right: 10%; bottom: 14%; }
.dot--pome { width: 3.5%; aspect-ratio: 1; background: var(--pome); left: 30%; top: -3%; }
.hero .badge-spin { right: -4%; bottom: -6%; }
@media (prefers-reduced-motion: no-preference) {
  .dot { animation: bob 6s ease-in-out infinite; }
  .dot--avocado { animation-delay: -2s; }
  .dot--pome { animation-delay: -4s; animation-duration: 5s; }
}
@keyframes bob { 50% { translate: 0 -14px; } }
@media (max-width: 39.99em) {
  .orb--a { left: -4%; }
  .orb--b { right: -2%; }
  .hero .badge-spin { right: 0; bottom: -4%; width: 104px; }
}
@media (min-width: 64em) {
  .hero { min-height: min(100svh, 1000px); display: flex; align-items: center; }
  .hero > .container { width: 100%; }
  .hero__grid { grid-template-columns: 1.15fr 0.85fr; }
}

/* Crossing ingredient tapes */
.tapes { position: relative; z-index: 3; margin-top: calc(clamp(4rem, 7vw, 6rem) * -1); height: clamp(150px, 16vw, 210px); overflow: hidden; pointer-events: none; }
.tape { position: absolute; left: -5%; right: -5%; top: 50%; padding-block: 0.95rem; overflow: hidden; box-shadow: 0 18px 40px -20px rgba(24, 9, 36, 0.6); pointer-events: auto; }
.tape--front { background: var(--magenta); color: var(--white); transform: translateY(-50%) rotate(-3deg); z-index: 2; }
.tape--back { background: var(--citrus); color: var(--ink); transform: translateY(-50%) rotate(2.5deg); z-index: 1; }
.tape__track { display: flex; width: max-content; }
.tape .tape__list { display: flex; align-items: center; gap: 2rem; padding-right: 2rem; font-size: clamp(1.35rem, 1rem + 1.4vw, 2.3rem); font-weight: 800; font-stretch: 80%; letter-spacing: -0.02em; text-transform: uppercase; white-space: nowrap; }
.tape__list li { display: flex; align-items: center; gap: 2rem; }
.tape__list li::after { content: "✺"; font-size: 0.7em; opacity: 0.85; }
.tape--back .tape__list { font-family: var(--font-serif); font-style: italic; font-weight: 400; text-transform: none; letter-spacing: 0; }
@media (prefers-reduced-motion: no-preference) {
  .tape--front .tape__track { animation: ticker 42s linear infinite; }
  .tape--back .tape__track { animation: ticker 50s linear infinite reverse; }
  .tapes.is-paused .tape__track { animation-play-state: paused; }
}
@keyframes ticker { to { transform: translateX(-50%); } }

/* ---------- Intro + stats ---------- */
.statement { font-size: var(--step-3); font-weight: 650; font-stretch: 90%; line-height: 1.12; letter-spacing: -0.025em; text-wrap: pretty; max-width: 22em; }
.statement em { font-family: var(--font-serif); font-style: italic; font-weight: 400; letter-spacing: 0; }
.intro-grid { display: grid; gap: 3rem; }
@media (min-width: 64em) { .intro-grid { grid-template-columns: 1.3fr 0.7fr; gap: 5rem; align-items: end; } }

.stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(0.75rem, 2vw, 1.25rem); margin-top: clamp(3.5rem, 7vw, 6rem); }
.stat {
  position: relative; overflow: hidden; isolation: isolate;
  min-height: clamp(180px, 22vw, 260px); padding: clamp(1.25rem, 2.5vw, 2rem);
  display: flex; flex-direction: column; justify-content: space-between; gap: 1rem;
  border-radius: var(--radius-lg); background: var(--white); border: 1px solid var(--line);
  transition: transform 0.5s var(--ease-spring);
}
.stat::before { content: ""; position: absolute; z-index: -1; width: 70%; aspect-ratio: 1; right: -22%; top: -22%; border-radius: 50%; background: var(--c); opacity: 0.9; transition: transform 0.7s var(--ease); }
.stat:hover { transform: translateY(-6px) rotate(-1deg); }
.stat:hover::before { transform: scale(1.25); }
.stat__value { font-size: clamp(2.6rem, 1.6rem + 4vw, 5rem); font-weight: 800; font-stretch: 75%; line-height: 0.9; letter-spacing: -0.05em; font-variant-numeric: tabular-nums; }
.stat__label { font-size: 0.95rem; color: var(--muted); max-width: 16em; line-height: 1.45; }
@media (min-width: 64em) { .stats { grid-template-columns: repeat(4, 1fr); } }

/* ---------- Range: expanding flavor panels ---------- */
.flavors { display: grid; gap: 1rem; }
.flavor {
  --c: var(--mango);
  position: relative; overflow: hidden; isolation: isolate;
  min-height: 460px; border-radius: var(--radius-lg); background: var(--c); color: var(--ink);
  display: flex; flex-direction: column; justify-content: flex-end;
}
.flavor--smoothies { --c: #c92a43; color: var(--white); }  /* deepened pomegranate: white text AA */
.flavor--snacks { --c: var(--avocado); }
.flavor__media { position: absolute; inset: 0; z-index: -2; }
.flavor__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease), filter 0.6s; }
.flavor::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, var(--c) 28%, transparent 70%); }
.flavor__body { padding: clamp(1.5rem, 3vw, 2.25rem); }
.flavor__num { position: absolute; top: 1.25rem; left: 1.5rem; font-size: 0.9rem; font-weight: 800; letter-spacing: 0.08em; padding: 0.35rem 0.75rem; border-radius: 999px; background: var(--white); color: var(--ink); }
.flavor h3 { font-size: clamp(2rem, 1.5rem + 2vw, 3.2rem); }
.flavor p { margin-top: 0.75rem; max-width: 24em; font-weight: 500; }
.flavor:hover .flavor__media img { transform: scale(1.06); }
@media (min-width: 64em) {
  .flavors { display: flex; height: clamp(520px, 44vw, 640px); }
  .flavor { flex: 1 1 0; min-height: 0; min-width: 0; transition: flex-grow 0.8s var(--ease); }
  .flavor.is-active { flex-grow: 2.3; }
  .flavor p { opacity: 0; transform: translateY(12px); transition: opacity 0.5s var(--ease), transform 0.5s var(--ease); }
  .flavor.is-active p { opacity: 1; transform: none; transition-delay: 0.2s; }
  .flavor h3 { font-size: clamp(1.6rem, 0.4rem + 2.2vw, 3.2rem); }
}

/* ---------- Philosophy ---------- */
.philosophy { display: grid; gap: clamp(3rem, 6vw, 5rem); align-items: center; }
.philosophy__media { position: relative; width: min(100%, 520px); margin-inline: auto; }
.philosophy__media .frame { aspect-ratio: 1; }
.philosophy__ring { position: absolute; inset: -9%; color: rgba(255, 255, 255, 0.7); }
.philosophy__ring text { fill: currentColor; font: 700 4.2px var(--font-sans); letter-spacing: 1.2px; text-transform: uppercase; }
@media (prefers-reduced-motion: no-preference) { .philosophy__ring { animation: spin 40s linear infinite; } }
.strike-list { margin-top: 2.5rem; display: grid; gap: 0.15rem; }
.strike-list li { display: grid; gap: 0.1rem; }
@media (min-width: 40em) { .strike-list li { grid-template-columns: 9.5rem 1fr; align-items: baseline; gap: 1rem; } }
.strike-list small { font-size: var(--step--1); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255, 255, 255, 0.55); }
.strike {
  position: relative; justify-self: start; font-size: clamp(2rem, 1.3rem + 3.2vw, 4.2rem); font-weight: 800; font-stretch: 80%;
  line-height: 1.05; letter-spacing: -0.04em;
}
.strike::after {
  content: ""; position: absolute; left: -0.08em; right: -0.08em; top: 54%; height: 0.11em; border-radius: 99px;
  background: var(--magenta); transform: scaleX(1); transform-origin: left center; rotate: -2deg;
}
@media (prefers-reduced-motion: no-preference) {
  .js .strike::after { transform: scaleX(0); transition: transform 0.9s var(--ease); }
  .js .is-visible .strike::after { transform: scaleX(1); }
  .js .is-visible li:nth-child(2) .strike::after { transition-delay: 0.15s; }
  .js .is-visible li:nth-child(3) .strike::after { transition-delay: 0.3s; }
  .js .is-visible li:nth-child(4) .strike::after { transition-delay: 0.45s; }
}
.strike-list li:nth-child(2) .strike::after { background: var(--mango); }
.strike-list li:nth-child(3) .strike::after { background: var(--avocado); }
.strike-list li:nth-child(4) .strike::after { background: var(--citrus); }
@media (min-width: 64em) { .philosophy { grid-template-columns: 1.1fr 0.9fr; gap: 6rem; } }

/* ---------- Journey timeline ---------- */
.journey { position: relative; display: grid; gap: 1.5rem; counter-reset: j; }
.journey li { position: relative; padding-left: 3.25rem; }
.journey li::before {
  counter-increment: j; content: counter(j);
  position: absolute; left: 0; top: -0.15rem; width: 2.4rem; height: 2.4rem; border-radius: 50%;
  display: grid; place-items: center; font-weight: 800; font-size: 0.95rem;
  background: var(--c, var(--magenta)); color: var(--ink);
}
.journey li::after { content: ""; position: absolute; left: 1.2rem; top: 2.5rem; bottom: -1.6rem; width: 2px; background: repeating-linear-gradient(to bottom, var(--line) 0 6px, transparent 6px 12px); }
.journey li:last-child::after { display: none; }
.journey li:nth-child(1) { --c: var(--mango); }
.journey li:nth-child(2) { --c: var(--avocado); }
.journey li:nth-child(3) { --c: var(--lilac-2); }
.journey li:nth-child(4) { --c: var(--citrus); }
.journey li:nth-child(5) { --c: var(--magenta); }
.journey li:nth-child(5)::before { color: var(--white); }
.journey strong { display: block; font-size: var(--step-1); font-weight: 750; letter-spacing: -0.015em; line-height: 1.2; }
.journey span { display: block; margin-top: 0.25rem; color: var(--muted); font-size: 0.95rem; }
@media (min-width: 64em) {
  .journey--row { grid-template-columns: repeat(5, 1fr); gap: 1.5rem; }
  .journey--row li { padding-left: 0; padding-top: 3.5rem; }
  .journey--row li::before { top: 0; }
  .journey--row li::after { left: 2.9rem; right: -1.1rem; top: 1.2rem; bottom: auto; width: auto; height: 2px; background: repeating-linear-gradient(to right, var(--line) 0 6px, transparent 6px 12px); }
}

/* ---------- Story teaser ---------- */
.story-teaser { display: grid; gap: clamp(3rem, 6vw, 5rem); align-items: center; }
.story-teaser__media { position: relative; width: min(100%, 480px); margin-inline: auto; }
.story-teaser__media .frame { aspect-ratio: 4 / 5; }
.story-teaser__media .sticker { position: absolute; right: -6%; top: 12%; --tilt: 8deg; }
.story-teaser__media .sticker--mango { left: -6%; right: auto; top: auto; bottom: 10%; --tilt: -7deg; }
.pullquote { font-size: var(--step-3); font-weight: 700; font-stretch: 85%; line-height: 1.05; letter-spacing: -0.035em; }
.pullquote em { font-family: var(--font-serif); font-style: italic; font-weight: 400; color: var(--magenta-ink); letter-spacing: 0; }
.pullquote::before { content: "“"; display: block; font-family: var(--font-serif); font-size: 2.6em; line-height: 0.55; color: var(--magenta); }
.pullquote cite { display: block; margin-top: 1.25rem; font-size: var(--step--1); font-style: normal; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
@media (min-width: 64em) { .story-teaser { grid-template-columns: 0.8fr 1.2fr; } }

/* ---------- Franchise CTA (magenta) ---------- */
.cta-mega { position: relative; overflow: hidden; }
.cta-mega__grid { display: grid; gap: clamp(3rem, 6vw, 5rem); align-items: center; }
.cta-mega .h1 { font-size: var(--step-5); }
.cta-mega__body p:not(.eyebrow) { color: var(--white); max-width: 32em; font-size: var(--step-1); }
.cta-mega__body > * + * { margin-top: 1.75rem; }
.cta-mega__media { position: relative; width: min(100%, 560px); margin-inline: auto; }
.cta-mega__media .frame { aspect-ratio: 5 / 4; transform: rotate(3deg); box-shadow: var(--shadow-lg); border: 8px solid var(--white); border-radius: 28px; }
.cta-mega__media .sticker { position: absolute; }
.cta-mega__media .s1 { left: -5%; top: -6%; --tilt: -8deg; }
.cta-mega__media .s2 { right: -4%; bottom: 14%; --tilt: 6deg; }
.cta-mega__media .s3 { left: 12%; bottom: -8%; --tilt: -3deg; }
.cta-mega .sticker strong { font-size: clamp(1.4rem, 1rem + 1.5vw, 2.2rem); }
.cta-mega__circle { position: absolute; border-radius: 50%; pointer-events: none; }
.cta-mega__circle--a { width: 40vw; height: 40vw; right: -14vw; top: -16vw; border: 2px solid rgba(255, 255, 255, 0.25); }
.cta-mega__circle--b { width: 22vw; height: 22vw; left: -8vw; bottom: -8vw; background: rgba(255, 255, 255, 0.1); }
@media (min-width: 64em) { .cta-mega__grid { grid-template-columns: 1.1fr 0.9fr; } }

/* ---------- Page hero (inner pages) ---------- */
.page-hero {
  position: relative; overflow: hidden; background: var(--night); color: var(--white);
  padding-top: calc(var(--header-h) + var(--header-top) + clamp(2.5rem, 6vw, 5rem));
  padding-bottom: clamp(5rem, 9vw, 8rem);
}
.page-hero .hero__glow--a { width: 40vw; height: 40vw; }
.page-hero__grid { position: relative; z-index: 1; display: grid; gap: 2rem; align-items: end; }
.page-hero .h1 { max-width: 12em; }
.page-hero .lead { color: rgba(255, 255, 255, 0.78); }
@media (min-width: 64em) { .page-hero__grid { grid-template-columns: 1.35fr 0.65fr; gap: 4rem; } }
.page-hero__media { position: relative; z-index: 1; margin-top: clamp(3rem, 5vw, 4.5rem); }
.page-hero__media .frame { aspect-ratio: 16 / 10; }
@media (min-width: 48em) { .page-hero__media .frame { aspect-ratio: 21 / 9; } }
.page-hero__media .sticker { position: absolute; z-index: 2; }
.page-hero__media .s1 { left: 4%; top: -2.25rem; --tilt: -6deg; }
.page-hero__media .s2 { right: 6%; top: -1.75rem; --tilt: 5deg; }
.page-hero__media .s3 { right: 18%; bottom: -2rem; --tilt: -4deg; }
@media (max-width: 39.99em) { .page-hero__media .s3 { display: none; } }

.breadcrumb { display: flex; flex-wrap: wrap; gap: 0.5rem; font-size: var(--step--1); color: rgba(255, 255, 255, 0.65); margin-bottom: 1.75rem; }
.breadcrumb a { text-decoration: none; }
.breadcrumb a:hover { color: var(--citrus); text-decoration: underline; }
.breadcrumb li + li::before { content: "/"; margin-right: 0.5rem; opacity: 0.5; }

/* ---------- Story (long-form) ---------- */
.story { display: grid; gap: 3rem; }
.story__aside { display: grid; gap: 1.75rem; align-content: start; }
.story__aside .frame { aspect-ratio: 4 / 5; }
.story__body { font-size: var(--step-1); line-height: 1.7; color: var(--muted); }
.story__body p + p { margin-top: 1.2em; }
.story__body > p:first-of-type::first-letter {
  float: left; font-family: var(--font-serif); font-style: italic; font-size: 5.2em; line-height: 0.78; padding: 0.04em 0.12em 0 0; color: var(--magenta-ink);
}
.story__body .pullquote { color: var(--ink); margin-block: 2.75rem; }
.story__sign { margin-top: 2rem; font-size: var(--step--1); letter-spacing: 0.1em; text-transform: uppercase; font-weight: 800; color: var(--ink); }
@media (min-width: 64em) {
  .story { grid-template-columns: 0.8fr 1.2fr; gap: 6rem; }
  .story__aside { position: sticky; top: calc(var(--header-h) + var(--header-top) + 2rem); }
}

/* ---------- Vision & mission ---------- */
.vm { display: grid; gap: 1.25rem; }
.vm__card {
  position: relative; overflow: hidden; isolation: isolate;
  padding: clamp(2rem, 4vw, 3.5rem); border-radius: var(--radius-lg);
  background: var(--purple); color: var(--white); min-height: 360px;
  display: flex; flex-direction: column; justify-content: space-between; gap: 2rem;
  transition: transform 0.6s var(--ease-spring);
}
.vm__card:hover { transform: rotate(-1deg) translateY(-6px); }
.vm__card--mango { background: var(--mango); color: var(--ink); }
.vm__card--mango:hover { transform: rotate(1deg) translateY(-6px); }
.vm__card::after { content: "“"; position: absolute; right: 1.5rem; top: -1.5rem; z-index: -1; font-family: var(--font-serif); font-size: 16rem; line-height: 1; opacity: 0.15; }
.vm__card .eyebrow { align-self: flex-start; margin: 0; }
.vm__card p { font-size: var(--step-2); font-weight: 650; font-stretch: 90%; line-height: 1.2; letter-spacing: -0.02em; }
@media (min-width: 64em) { .vm { grid-template-columns: 1fr 1fr; } }

/* ---------- Values ---------- */
.values { counter-reset: value; border-top: 1.5px solid var(--ink); }
.values li {
  --c: var(--magenta);
  counter-increment: value; position: relative; isolation: isolate; overflow: hidden;
  display: grid; grid-template-columns: 3.25rem 1fr auto; align-items: center; gap: 1rem;
  padding: clamp(1.1rem, 2.2vw, 1.5rem) 0.25rem; border-bottom: 1.5px solid var(--ink);
  font-size: var(--step-3); font-weight: 750; font-stretch: 85%; line-height: 1.05; letter-spacing: -0.035em;
}
.values li:nth-child(7n+2) { --c: var(--mango); }
.values li:nth-child(7n+3) { --c: var(--avocado); }
.values li:nth-child(7n+4) { --c: var(--citrus); }
.values li:nth-child(7n+5) { --c: var(--lilac-2); }
.values li:nth-child(7n+6) { --c: var(--pome); }
.values li:nth-child(7n+7) { --c: var(--violet); }
.values li::before { content: counter(value, decimal-leading-zero); font-size: var(--step--1); font-weight: 800; letter-spacing: 0.08em; font-stretch: 100%; }
.values li::after { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--c); transform: scaleY(0); transform-origin: bottom; transition: transform 0.5s var(--ease); }
.values li i { width: 0.55em; height: 0.55em; border-radius: 50%; background: var(--c); transition: transform 0.5s var(--ease-spring); }
@media (hover: hover) {
  .values li:hover::after { transform: scaleY(1); }
  .values li:hover i { transform: scale(1.6) rotate(45deg); background: var(--ink); }
}
.values-layout { display: grid; gap: 3rem; }
.values-layout .frame { aspect-ratio: 4 / 5; }
@media (min-width: 64em) { .values-layout { grid-template-columns: 0.75fr 1.25fr; gap: 5rem; align-items: start; } .values-layout > div:first-child { position: sticky; top: calc(var(--header-h) + var(--header-top) + 2rem); } }

/* ---------- Franchise: key terms ---------- */
.terms { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; }
.term {
  display: flex; flex-direction: column; gap: 0.6rem; padding: clamp(1.1rem, 2vw, 1.6rem);
  border-radius: var(--radius); background: rgba(255, 255, 255, 0.06); border: 1px solid var(--line-light);
}
.term dd { order: -1; font-size: clamp(1.9rem, 1.3rem + 2.2vw, 3.2rem); font-weight: 800; font-stretch: 75%; line-height: 0.95; letter-spacing: -0.045em; font-variant-numeric: tabular-nums; }
.term dd small { font-size: 0.42em; font-weight: 800; letter-spacing: 0.04em; margin-right: 0.3em; vertical-align: 0.75em; color: var(--citrus); font-stretch: 100%; }
.term dt { font-size: var(--step--1); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255, 255, 255, 0.66); line-height: 1.4; }
.term:nth-child(1) { background: var(--magenta); border-color: var(--magenta); }
.term:nth-child(1) dt { color: rgba(255, 255, 255, 0.85); }
@media (min-width: 64em) { .terms { grid-template-columns: repeat(var(--cols, 5), 1fr); } }
@media (max-width: 23.99em) { .terms { grid-template-columns: 1fr; } }
.terms-note { margin-top: 1.5rem; font-size: var(--step--1); color: rgba(255, 255, 255, 0.6); max-width: 60em; }

/* Investment breakdown chart */
.breakdown { margin-top: clamp(3rem, 6vw, 4.5rem); padding: clamp(1.5rem, 3vw, 2.5rem); border-radius: var(--radius-lg); background: var(--plum-2); border: 1px solid var(--line-light); }
.breakdown__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.5rem 2rem; margin-bottom: 1.75rem; }
.breakdown__head h3 { font-size: var(--step-2); }
.breakdown__total { font-size: clamp(2rem, 1.4rem + 2vw, 3rem); font-weight: 800; font-stretch: 75%; letter-spacing: -0.04em; color: var(--citrus); }
.breakdown__total small { font-size: 0.4em; letter-spacing: 0.06em; margin-right: 0.35em; vertical-align: 0.8em; color: rgba(255, 255, 255, 0.7); }
.bar { display: flex; gap: 3px; height: clamp(56px, 7vw, 76px); border-radius: 16px; overflow: hidden; }
.bar__seg { position: relative; flex: var(--v) 1 0; min-width: 4px; background: var(--c); transition: filter 0.2s, flex-grow 1.2s var(--ease); }
.bar__seg:first-child { border-radius: 16px 0 0 16px; }
.bar__seg:last-child { border-radius: 0 16px 16px 0; }
@media (prefers-reduced-motion: no-preference) {
  .js .breakdown:not(.is-visible) .bar__seg { flex-grow: 0.0001; }
}
.bar__seg:hover, .bar__seg.is-hot { filter: brightness(1.12) saturate(1.1); }
.legend { display: grid; gap: 0.25rem 2rem; margin-top: 1.5rem; }
.legend li { display: grid; grid-template-columns: 1rem 1fr auto auto; align-items: center; gap: 0.75rem; padding: 0.55rem 0; border-bottom: 1px solid var(--line-light); font-size: 0.95rem; transition: background-color 0.2s; }
.legend li:hover, .legend li.is-hot { background: rgba(255, 255, 255, 0.05); }
.legend i { width: 1rem; height: 1rem; border-radius: 4px; background: var(--c); }
.legend b { font-variant-numeric: tabular-nums; font-weight: 700; }
.legend em { font-style: normal; font-size: 0.85rem; color: rgba(255, 255, 255, 0.6); font-variant-numeric: tabular-nums; min-width: 3.2em; text-align: right; }
@media (min-width: 48em) { .legend { grid-template-columns: 1fr 1fr; } }

.details { margin-top: 1.5rem; }
.details summary {
  display: inline-flex; align-items: center; gap: 0.5rem; cursor: pointer; list-style: none;
  min-height: 44px; padding: 0.5rem 1.1rem; border-radius: 999px; border: 1px solid var(--line-light);
  font-weight: 700; font-size: 0.95rem;
}
.details summary::-webkit-details-marker { display: none; }
.details summary .icon { transition: transform 0.3s var(--ease); }
.details[open] summary .icon { transform: rotate(180deg); }
.details summary:hover { background: rgba(255, 255, 255, 0.08); }

.fee-tables { display: grid; gap: 1.25rem; margin-top: 1.5rem; }
@media (min-width: 80em) { .fee-tables { grid-template-columns: 1.1fr 0.9fr; align-items: start; } }
.table-wrap { overflow-x: auto; border: 1px solid var(--line-light); border-radius: var(--radius); background: var(--plum-2); -webkit-overflow-scrolling: touch; }
.data-table { width: 100%; border-collapse: collapse; font-size: 0.93rem; min-width: 540px; }
.data-table caption { text-align: left; padding: 1.25rem 1.25rem 0.75rem; font-size: var(--step-1); font-weight: 750; color: var(--white); }
.data-table caption span { font-size: var(--step--1); letter-spacing: 0.1em; color: rgba(255, 255, 255, 0.55); margin-left: 0.35rem; font-weight: 700; }
.data-table th, .data-table td { padding: 0.8rem 1.25rem; text-align: left; vertical-align: top; border-top: 1px solid var(--line-light); }
.data-table thead th { font-size: 0.74rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255, 255, 255, 0.55); }
.data-table tbody th { font-weight: 700; color: var(--white); }
.data-table td { color: rgba(255, 255, 255, 0.78); }
.data-table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.data-table tfoot th, .data-table tfoot td { font-weight: 800; color: var(--white); border-top: 1px solid rgba(255, 255, 255, 0.4); }
.data-table tfoot .num { color: var(--citrus); font-size: 1.05rem; }
.data-table__note { display: block; margin-top: 0.3rem; font-size: 0.8rem; color: rgba(255, 255, 255, 0.55); line-height: 1.45; }

/* ---------- Franchise: included ---------- */
.included { display: grid; gap: 0.75rem; }
.included li {
  --c: var(--lilac);
  display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 1rem;
  padding: 1rem 1.25rem 1rem 1rem; border-radius: var(--radius); background: var(--white); border: 1px solid var(--line);
  font-size: var(--step-1); font-weight: 650; line-height: 1.3; letter-spacing: -0.01em;
  transition: transform 0.4s var(--ease-spring), box-shadow 0.3s;
}
.included li:hover { transform: translateX(6px); box-shadow: var(--shadow); }
.included li span { display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 14px; background: var(--c); font-size: 1rem; font-weight: 800; }
.included li:nth-child(2) { --c: var(--mango); }
.included li:nth-child(3) { --c: var(--avocado); }
.included li:nth-child(4) { --c: var(--citrus); }
.included li:nth-child(5) { --c: var(--lilac-2); }
.included li:nth-child(6) { --c: #ffc2d8; }
.included-layout { display: grid; gap: clamp(3rem, 6vw, 5rem); align-items: center; }
.included-layout .frame { aspect-ratio: 4 / 5; }
@media (min-width: 64em) { .included-layout { grid-template-columns: 0.85fr 1.15fr; } }

/* ---------- Tabs (franchise support) ---------- */
.tabs__list { display: flex; gap: 0.35rem; overflow-x: auto; scrollbar-width: none; margin-bottom: 2.75rem; padding: 0.4rem; border-radius: 999px; background: var(--ink); width: max-content; max-width: 100%; }
.tabs__list::-webkit-scrollbar { display: none; }
.tabs__tab {
  flex: none; min-height: 46px; padding: 0.6rem 1.35rem; border: 0; border-radius: 999px; background: transparent;
  font-weight: 700; font-size: 0.97rem; color: rgba(255, 255, 255, 0.7); white-space: nowrap;
  transition: background-color 0.3s var(--ease), color 0.3s;
}
.tabs__tab:hover { color: var(--white); }
.tabs__tab[aria-selected="true"] { background: var(--citrus); color: var(--ink); }
.tabs:not(.is-enhanced) .tabs__list { display: none; }
.tabs:not(.is-enhanced) .tabs__panel + .tabs__panel { margin-top: 4rem; }
.tabs__panel { display: grid; gap: clamp(2rem, 4vw, 4rem); }
.tabs__panel .frame { aspect-ratio: 4 / 3; }
.tabs__panel-title { margin-bottom: 1.75rem; }
.support-items { display: grid; gap: 1rem; }
.support-items > div { padding: 1.25rem 1.4rem; border-radius: var(--radius); background: var(--white); border: 1px solid var(--line); }
.support-items h4 { display: flex; align-items: center; gap: 0.6rem; font-size: var(--step-1); font-weight: 750; letter-spacing: -0.015em; margin-bottom: 0.35rem; color: var(--ink); }
.support-items h4::before { content: ""; width: 0.7rem; height: 0.7rem; border-radius: 50%; background: var(--magenta); flex: none; }
.support-items > div:nth-child(2) h4::before { background: var(--mango); }
.support-items > div:nth-child(3) h4::before { background: var(--avocado); }
.support-items p { color: var(--muted); }
.tabs.is-enhanced .tabs__panel:not([hidden]) { animation: fade-in 0.6s var(--ease); }
@keyframes fade-in { from { opacity: 0; transform: translateY(12px); } }
@media (prefers-reduced-motion: reduce) { .tabs.is-enhanced .tabs__panel:not([hidden]) { animation: none; } }
@media (min-width: 64em) { .tabs__panel { grid-template-columns: 0.9fr 1.1fr; align-items: start; } }

/* ---------- Steps: horizontal pinned track (desktop), vertical list otherwise ---------- */
.steps-track__viewport { position: relative; }
.steps { display: grid; gap: 1rem; counter-reset: step; }
.step {
  --c: var(--lilac-2);
  position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 2.5rem;
  padding: 1.5rem; border-radius: var(--radius-lg); background: var(--plum-2); border: 1px solid var(--line-light);
  min-height: 200px;
}
.step::before {
  counter-increment: step; content: counter(step, decimal-leading-zero);
  font-size: clamp(3.5rem, 2.5rem + 3vw, 6rem); font-weight: 800; font-stretch: 75%; line-height: 0.85; letter-spacing: -0.05em; color: var(--c);
}
.step:nth-child(3n+1) { --c: var(--mango); }
.step:nth-child(3n+2) { --c: var(--avocado); }
.step:nth-child(3n) { --c: var(--citrus); }
.step:last-child { background: var(--magenta); border-color: var(--magenta); --c: var(--white); }
.step p { font-size: var(--step-1); font-weight: 650; line-height: 1.25; letter-spacing: -0.015em; color: var(--white); max-width: 14em; }
.steps-progress { display: none; }
@media (min-width: 48em) { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64em) and (prefers-reduced-motion: no-preference) {
  .js .steps-track { height: var(--track-h, 300vh); }
  .js .steps-track__viewport { position: sticky; top: 0; height: 100svh; display: flex; flex-direction: column; justify-content: center; overflow: hidden; }
  .js .steps { display: flex; gap: 1.25rem; width: max-content; padding-inline: var(--gutter); will-change: transform; }
  .js .step { width: clamp(300px, 26vw, 380px); min-height: 360px; flex: none; }
  .js .steps-progress { display: block; height: 4px; margin: 2.5rem var(--gutter) 0; border-radius: 99px; background: var(--line-light); overflow: hidden; }
  .js .steps-progress span { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, var(--mango), var(--magenta)); transform-origin: left; transform: scaleX(var(--p, 0)); }
}
@media (min-width: 64em) {
  .steps { grid-template-columns: repeat(3, 1fr); }
}

/* ---------- Commitments ---------- */
.commitments { display: grid; gap: 1rem; }
.commitments li {
  --c: var(--lilac);
  position: relative; overflow: hidden; isolation: isolate;
  padding: clamp(1.75rem, 3vw, 2.25rem); border-radius: var(--radius-lg); background: var(--c);
  display: grid; gap: 2.5rem; align-content: space-between; min-height: 240px;
  transition: transform 0.5s var(--ease-spring);
}
.commitments li:hover { transform: translateY(-8px) rotate(-1.5deg); }
.commitments li:nth-child(2) { --c: var(--mango); }
.commitments li:nth-child(3) { --c: var(--avocado); }
.commitments li:nth-child(4) { --c: var(--citrus); }
.commitments .icon { width: 3rem; height: 3rem; padding: 0.7rem; border-radius: 50%; background: var(--ink); color: var(--white); }
.commitments p { font-size: var(--step-1); font-weight: 650; line-height: 1.3; letter-spacing: -0.015em; }
@media (min-width: 48em) { .commitments { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 80em) { .commitments { grid-template-columns: repeat(4, 1fr); } }

/* ---------- Application form ---------- */
.apply-layout { display: grid; gap: 3rem; align-items: start; }
@media (min-width: 64em) { .apply-layout { grid-template-columns: 0.7fr 1.3fr; gap: 4rem; } .apply-aside { position: sticky; top: calc(var(--header-h) + var(--header-top) + 1.5rem); } }
.apply-aside { display: grid; gap: 1.25rem; }
.aside-card { position: relative; overflow: hidden; padding: 2rem; border-radius: var(--radius-lg); background: var(--night); color: var(--white); }
.aside-card h2 { font-size: var(--step-2); font-weight: 750; font-stretch: 85%; letter-spacing: -0.03em; margin-bottom: 1.25rem; }
.aside-card ol { display: grid; gap: 1rem; counter-reset: next; list-style: none; margin: 0; padding: 0; }
.aside-card li { counter-increment: next; display: grid; grid-template-columns: 2rem 1fr; gap: 0.75rem; color: rgba(255, 255, 255, 0.82); font-size: 0.95rem; }
.aside-card li::before { content: counter(next); display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; background: var(--citrus); color: var(--ink); font-size: 0.85rem; font-weight: 800; }

/* Progress bottle: fills as required answers are completed */
.progress-card { display: grid; grid-template-columns: auto 1fr; gap: 1.25rem; align-items: center; padding: 1.25rem 1.5rem; border-radius: var(--radius-lg); background: var(--white); border: 1px solid var(--line); }
.bottle { width: 64px; height: 120px; }
.bottle__fill { transform-origin: bottom; transform: scaleY(var(--fill, 0)); transform-box: fill-box; transition: transform 0.8s var(--ease-spring); }
.bottle__wave { transform-box: fill-box; }
@media (prefers-reduced-motion: no-preference) { .bottle__wave { animation: slosh 3s ease-in-out infinite; } }
@keyframes slosh { 50% { transform: translateX(-12px); } }
.progress-card strong { display: block; font-size: var(--step-3); font-weight: 800; font-stretch: 75%; letter-spacing: -0.04em; line-height: 1; font-variant-numeric: tabular-nums; }
.progress-card span { display: block; margin-top: 0.35rem; color: var(--muted); font-size: 0.92rem; }

.aside-contact { display: grid; gap: 0.75rem; padding: 1.25rem 1.5rem; font-size: 0.95rem; color: var(--muted); }
.aside-contact a { color: var(--ink); font-weight: 700; display: inline-flex; align-items: center; gap: 0.5rem; }
.aside-contact a:hover { color: var(--magenta-ink); }

.form { display: grid; gap: 1.25rem; }
.form-section { padding: clamp(1.5rem, 4vw, 2.75rem); border-radius: var(--radius-lg); background: var(--white); border: 1px solid var(--line); margin: 0; min-width: 0; }
.form-section__head { display: flex; gap: 1rem; align-items: center; margin-bottom: 0.5rem; }
.form-section__num { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 50%; background: var(--c, var(--mango)); font-weight: 800; font-size: 1rem; flex: none; }
.form-section:nth-of-type(2) { --c: var(--avocado); }
.form-section:nth-of-type(3) { --c: var(--lilac-2); }
.form-section__title { font-size: var(--step-2); font-weight: 750; font-stretch: 85%; letter-spacing: -0.03em; }
.form-section__intro { color: var(--muted); margin-bottom: 2rem; }
.form-grid { display: grid; gap: 1.5rem; }
@media (min-width: 48em) { .form-grid { grid-template-columns: 1fr 1fr; column-gap: 1.25rem; } .form-grid > * { grid-column: 1 / -1; } .form-grid > .field--half { grid-column: auto; } }

.field { display: grid; gap: 0.5rem; border: 0; padding: 0; margin: 0; min-width: 0; }
.js .field[data-show-when]:not(.is-shown) { display: none; }
.field__label { font-weight: 650; font-size: 0.97rem; line-height: 1.4; padding: 0; }
.field__req { color: var(--magenta-ink); margin-left: 0.15rem; }
.field__opt { font-weight: 500; font-size: 0.8rem; color: var(--muted); margin-left: 0.35rem; }
.field__hint { font-size: 0.875rem; color: var(--muted); margin-top: -0.25rem; }
.field input:not([type=radio]):not([type=checkbox]), .field textarea {
  width: 100%; min-height: 3.4rem; padding: 0.85rem 1.1rem;
  background: var(--cream); border: 1.5px solid rgba(29, 15, 40, 0.16); border-radius: 16px;
  transition: border-color 0.2s, box-shadow 0.2s, background-color 0.2s;
}
.field textarea { resize: vertical; min-height: 7.5rem; line-height: 1.55; }
.field input:hover, .field textarea:hover { border-color: rgba(29, 15, 40, 0.38); }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--purple); background: var(--white); box-shadow: 0 0 0 5px rgba(102, 48, 143, 0.16); }
.field__error { font-size: 0.875rem; font-weight: 700; color: #b3123f; }
.field__error:empty { display: none; }
.has-error input:not([type=radio]):not([type=checkbox]), .has-error textarea { border-color: #b3123f; background: #fff4f7; }
.field.is-done:not(.has-error) input:not([type=radio]):not([type=checkbox]) { border-color: rgba(122, 160, 40, 0.65); }

.choices { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 0.25rem; }
.choice { position: relative; }
.choice input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.choice span {
  display: inline-flex; align-items: center; gap: 0.6rem; min-height: 3rem; padding: 0.55rem 1.25rem 0.55rem 0.9rem;
  border: 1.5px solid rgba(29, 15, 40, 0.18); border-radius: 999px; background: var(--cream); font-weight: 600; font-size: 0.97rem;
  transition: border-color 0.2s, background-color 0.2s, color 0.2s, transform 0.3s var(--ease-spring);
}
.choice span::before { content: ""; width: 1.1rem; height: 1.1rem; border-radius: 50%; border: 1.5px solid rgba(29, 15, 40, 0.4); background: var(--white); transition: border 0.25s var(--ease-spring); }
.choice:hover span { border-color: var(--purple); }
.choice input:checked + span { border-color: var(--ink); background: var(--ink); color: var(--white); transform: scale(1.03); }
.choice input:checked + span::before { border: 5px solid var(--citrus); }
.choice input:focus-visible + span { outline: 2px solid var(--magenta-ink); outline-offset: 2px; }
.has-error .choice span { border-color: #b3123f; }

.consent { display: grid; grid-template-columns: 1.4rem 1fr; gap: 0.85rem; align-items: start; font-size: 0.95rem; color: var(--muted); cursor: pointer; }
.consent input { width: 1.3rem; height: 1.3rem; margin: 0.15rem 0 0; accent-color: var(--purple); cursor: pointer; }

.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem; padding: 0.5rem 0; }
.form-status { font-weight: 700; font-size: 0.95rem; }
.form-status:empty { display: none; }
.form-status--error { color: #b3123f; padding: 0.9rem 1.1rem; background: #fff1f4; border-radius: 14px; border: 1px solid #f3c2cf; width: 100%; }

.form-success { position: relative; overflow: hidden; padding: clamp(2.5rem, 6vw, 4.5rem) clamp(1.5rem, 4vw, 3rem); border-radius: var(--radius-lg); background: var(--night); color: var(--white); text-align: center; display: grid; justify-items: center; gap: 1.25rem; }
.form-success:focus { outline: none; }
.form-success__icon { width: 4.5rem; height: 4.5rem; padding: 1.1rem; border-radius: 50%; background: var(--citrus); color: var(--ink); }
.form-success p { color: rgba(255, 255, 255, 0.78); max-width: 32em; }
.form-success a:not(.btn) { color: var(--citrus); }
@media (prefers-reduced-motion: no-preference) {
  .form-success:not([hidden]) .form-success__icon { animation: pop 0.8s var(--ease-spring) both; }
}
@keyframes pop { from { transform: scale(0) rotate(-45deg); } }

/* ---------- Footer ---------- */
.site-footer { position: relative; background: var(--night); color: var(--white); padding-top: clamp(4.5rem, 9vw, 8rem); overflow: hidden; }
.site-footer__top { display: grid; gap: 3.5rem; }
.site-footer__title { font-size: var(--step-4); font-weight: 750; font-stretch: 85%; line-height: 0.95; letter-spacing: -0.04em; max-width: 12em; }
.site-footer__title em { font-family: var(--font-serif); font-style: italic; font-weight: 400; letter-spacing: 0; color: var(--pink); }
.site-footer__email {
  display: inline-flex; align-items: center; gap: 0.75rem; margin-top: 2rem;
  padding: 0.85rem 1.4rem; border-radius: 999px; background: var(--citrus); color: var(--ink);
  font-size: var(--step-1); font-weight: 750; text-decoration: none; overflow-wrap: anywhere;
  transition: transform 0.4s var(--ease-spring), background-color 0.2s;
}
.site-footer__email:hover { transform: rotate(-2deg) scale(1.03); background: var(--white); }
.site-footer__cols { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2.5rem 2rem; }
.site-footer__heading { font-size: var(--step--1); font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255, 255, 255, 0.5); margin-bottom: 1.1rem; }
.site-footer__links { display: grid; gap: 0.2rem; }
.site-footer__links a { display: inline-block; padding-block: 0.3rem; text-decoration: none; color: rgba(255, 255, 255, 0.86); font-weight: 600; transition: color 0.2s, transform 0.3s var(--ease); }
.site-footer__links a:hover { color: var(--citrus); transform: translateX(4px); }
.social { display: flex; gap: 0.6rem; flex-wrap: wrap; }
.social a { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--line-light); transition: background-color 0.25s, color 0.25s, transform 0.4s var(--ease-spring); }
.social a:hover { background: var(--magenta); border-color: var(--magenta); transform: translateY(-4px) rotate(-8deg); }
.social .icon { width: 1.15rem; height: 1.15rem; }
.site-footer__address { display: flex; align-items: center; gap: 0.5rem; margin-top: 1.5rem; color: rgba(255, 255, 255, 0.7); font-size: 0.95rem; }
.site-footer__wordmark {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0 2rem;
  margin-top: clamp(4rem, 8vw, 7rem);
  font-size: clamp(3.4rem, 0.6rem + 12vw, 13.5rem); font-weight: 800; font-stretch: 82%; line-height: 0.86; letter-spacing: -0.035em;
}
.fruit-fill {
  color: var(--magenta);
  background-image: url("/assets/img/fruit-wide-1280.webp"); background-size: cover; background-position: 50% 45%;
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 1.5px rgba(255, 248, 239, 0.9); paint-order: stroke fill;
}
.site-footer__wordmark .ar { font-size: 0.5em; color: var(--citrus); -webkit-text-fill-color: currentColor; }
.site-footer__bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; padding-block: 2rem 2.5rem; margin-top: 2.5rem; border-top: 1px solid var(--line-light); font-size: var(--step--1); color: rgba(255, 255, 255, 0.6); }
.site-footer__bottom img { height: 34px; width: auto; }
@media (min-width: 64em) {
  .site-footer__top { grid-template-columns: 1.15fr 1fr; gap: 6rem; }
  .site-footer__cols { grid-template-columns: repeat(3, 1fr); }
}

/* ---------- 404 ---------- */
.not-found { position: relative; overflow: hidden; min-height: 92vh; display: grid; align-content: center; gap: 1.5rem; padding-top: calc(var(--header-h) + var(--header-top) + 3rem); padding-bottom: var(--section); background: var(--night); color: var(--white); }
.not-found__code { font-size: clamp(7rem, 4rem + 18vw, 18rem); font-weight: 800; font-stretch: 75%; line-height: 0.8; letter-spacing: -0.06em; }
.not-found .lead { color: rgba(255, 255, 255, 0.78); }

/* ---------- Magnetic hover (JS adds transform) ---------- */
.magnetic { transition: transform 0.4s var(--ease); }

/* ---------- Utilities ---------- */
.mt-1 { margin-top: 1rem; } .mt-2 { margin-top: 2rem; } .mt-3 { margin-top: 3rem; }
.text-muted { color: var(--muted); }
.center { text-align: center; margin-inline: auto; }

@media print {
  .site-header, .tapes, .site-footer__wordmark, .menu-toggle, .wave { display: none; }
  .js [data-reveal] { opacity: 1 !important; transform: none !important; }
  .hero, .page-hero, .section--night, .site-footer { background: none !important; color: #000 !important; }
}

/* ---------- Chart details & steps spacing (appended) ---------- */
.bar-wrap { position: relative; }
.bar__seg { display: flex; align-items: center; padding-left: 0.9rem; overflow: hidden; }
.bar__label { font-size: 1.2rem; font-weight: 800; color: var(--white); font-variant-numeric: tabular-nums; white-space: nowrap; }
.bar-tip {
  position: absolute; bottom: calc(100% + 12px); left: var(--x, 50%); transform: translateX(-50%); z-index: 3;
  display: grid; gap: 0.1rem; padding: 0.6rem 0.85rem; border-radius: 12px; background: var(--white); color: var(--ink);
  font-size: 0.85rem; white-space: nowrap; box-shadow: var(--shadow-lg); pointer-events: none;
}
.bar-tip::after { content: ""; position: absolute; left: 50%; top: 100%; translate: -50% 0; border: 7px solid transparent; border-top-color: var(--white); }
.bar-tip strong { font-weight: 800; }
.bar-tip span { color: var(--muted); font-variant-numeric: tabular-nums; }

.steps-track { position: relative; padding-block: var(--section); }
.steps-track .steps { max-width: calc(1360px + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter); }
@media (min-width: 64em) and (prefers-reduced-motion: no-preference) {
  .js .steps-track { padding-block: 0; }
  .js .steps-track .steps { max-width: none; margin-inline: 0; }
  .js .steps-track .section-head { margin-bottom: 2.5rem; }
}

@media (max-width: 63.99em) { .nav :focus-visible { outline-color: var(--citrus); } }
.section--magenta .eyebrow::before { background: var(--citrus); box-shadow: 0 0 0 4px rgba(255, 224, 102, 0.3); }