/* main.css - Booza Levantina
   GENERATED FILE. Do not edit directly - edit assets/css/src/*.css instead.
   Rebuild: concatenate the src files in this order:
     reset -> tokens -> base -> layout -> components -> sections
*/

/* =================== src/reset.css =================== */
/* reset.css — modern baseline reset. No visual opinions beyond removing defaults. */

*, *::before, *::after { box-sizing: border-box; }

/* Root font-size is never overridden — all sizing is rem/em/%/ch/dvh. */
html {
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  /* Safety net only — the real fixes are min-width:0 on grid/flex items and
     wrapping on flex rows (see layout.css). `clip` rather than `hidden`
     deliberately: hidden would create a scroll container and break the
     sticky header. */
  overflow-x: clip;
}

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

body { min-height: 100svh; line-height: 1.65; -webkit-font-smoothing: antialiased; }

h1, h2, h3, h4, button, input, label { line-height: 1.15; }
h1, h2, h3, h4 { text-wrap: balance; }
p { text-wrap: pretty; }

a:not([class]) { text-decoration-skip-ink: auto; }

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

/* Form controls carry an INTRINSIC width (an <input> defaults to roughly 20
   characters). As flex or grid items their min-width:auto resolves to that
   intrinsic width, not to any width you set — which silently pushes rows wider
   than the viewport. min-width:0 is what actually lets them shrink. */
input, button, textarea, select {
  font: inherit; color: inherit;
  min-width: 0;
  max-width: 100%;
}
button { background: none; border: 0; }

textarea:not([rows]) { min-height: 10em; }

/* Long unbreakable strings (emails, URLs) must never force a horizontal scrollbar. */
a, p, li, td, th, dd, dt, figcaption { overflow-wrap: anywhere; }

table { border-collapse: collapse; width: 100%; }

/* Tracks the sticky header height so in-page anchors are never hidden behind it. */
:target { scroll-margin-top: calc(var(--header-h, 4.5rem) + 1.5rem); }

/* Global reduced-motion kill switch. JS additionally skips starting rAF loops. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}


/* =================== src/tokens.css =================== */
/* tokens.css — custom properties only. Single source of truth for the design system. */

:root {
  /* ---- Brand: sampled from the logo badge ---- */
  --forest:         #225721;  /* primary green: wordmark, headings, buttons */
  --forest-deep:    #154D14;  /* darker green: hovers, footer, deep panels */
  --pistachio:      #B8C63B;  /* accent ONLY: rules, underlines, active states */
  --pistachio-mid:  #9BC93F;  /* business-card field green, approximate — confirm against print file.
                                 Three uses only: flavour-card active state, order panel, spiral watermark. */
  --pistachio-pale: #DDE5B6;  /* tints, section washes */
  --charcoal:       #58595B;  /* body text, captions */

  /* ---- Derived neutrals: ashta/dairy warmth ---- */
  --ashta:     #FBF7EE;  /* page base: warm milk white */
  --ashta-2:   #F2ECDD;  /* alternating section base */
  --rose-dust: #E8D5CE;  /* used EXACTLY ONCE — the rose-water marker in Ashta */
  --ink:       #1B1F1A;  /* max-contrast text on light */
  --line:      #D9D6C8;  /* hairlines */

  /* Hairline for use on dark panels (light at low alpha, not a solid grey). */
  --line-dark: rgb(221 229 182 / 0.22);

  /* ---- Type families ---- */
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body: "Instrument Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-arabic: "IBM Plex Sans Arabic", var(--font-body);

  /* ---- Fluid type scale ---- */
  /* Floor raised to 0.875rem (14px) so no body-level text falls under the
     14px minimum. Eyebrows are a separate, deliberate exception - see base.css. */
  --step--1: clamp(0.875rem, 0.84rem + 0.15vw, 0.95rem);
  --step-0:  clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
  --step-1:  clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);
  --step-2:  clamp(1.56rem, 1.35rem + 1vw, 2.1rem);
  --step-3:  clamp(1.95rem, 1.55rem + 1.9vw, 3rem);
  --step-4:  clamp(2.44rem, 1.7rem + 3.4vw, 4.5rem);
  --step-5:  clamp(3rem, 1.6rem + 6vw, 7rem);  /* hero only */

  /* ---- Spacing scale ---- */
  --space-4:   0.25rem;
  --space-8:   0.5rem;
  --space-12:  0.75rem;
  --space-16:  1rem;
  --space-24:  1.5rem;
  --space-32:  2rem;
  --space-48:  3rem;
  --space-64:  4rem;
  --space-96:  6rem;
  --space-128: 8rem;
  --space-176: 11rem;

  /* ---- Layout ---- */
  --gutter: clamp(1.25rem, 4vw, 4rem);
  --measure: 68ch;
  --container: 80rem;        /* 1280px */
  --container-wide: 95rem;   /* 1520px */
  --container-narrow: 45rem; /* 720px */
  --header-h: 4.5rem;        /* 72px mobile — sized around the enlarged logo mark */
  --mark-size: 3rem;         /* 48px mobile */

  /* ---- Radii ---- */
  --r-sm: 4px;
  --r-md: 10px;
  --r-lg: 20px;
  --r-pill: 999px;

  /* ---- Elevation: one token. Never animated — a pseudo-element's opacity is. ---- */
  --shadow: 0 18px 40px -24px rgb(21 77 20 / 0.28);

  /* ---- Motion ---- */
  --ease-out: cubic-bezier(.22, .61, .36, 1);
  --ease-dense: cubic-bezier(.16, 1, .3, 1); /* the heavy booza spring-back */
  --t-hover: 190ms;
  --t-reveal: 620ms;
}

@media (min-width: 64em) {
  :root {
    --header-h: 5.5rem;   /* 88px desktop */
    --mark-size: 3.5rem;  /* 56px desktop */
  }
}


/* =================== src/base.css =================== */
/* base.css — @font-face, element defaults, typography, focus, reveal primitives. */

/* ---------- Fonts: self-hosted woff2. No third-party request at runtime. ---------- */
/* unicode-range means latin-ext is only fetched if the page actually needs those glyphs. */

@font-face {
  font-family: "Fraunces";
  src: url("../fonts/fraunces-latin.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212,
    U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Fraunces";
  src: url("../fonts/fraunces-latin-ext.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
    U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0,
    U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Instrument Sans";
  src: url("../fonts/instrument-sans-latin.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212,
    U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Instrument Sans";
  src: url("../fonts/instrument-sans-latin-ext.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
    U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0,
    U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "IBM Plex Sans Arabic";
  src: url("../fonts/plex-arabic-arabic.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0898-08E1,
    U+08E3-08FF, U+FB50-FDFF, U+FE70-FEFF;
}

/* ---------- Elements ---------- */

/* Reserved on <html>, which is where the scrollbar actually lives. Keeping the
   gutter means adding .is-nav-open (overflow:hidden) causes no layout shift. */
html { scrollbar-gutter: stable; }

body {
  font-family: var(--font-body);
  font-size: var(--step-0);
  color: var(--charcoal);
  background: var(--ashta);
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-optical-sizing: auto;
  color: var(--forest);
  font-weight: 600;
  letter-spacing: -0.015em;
}

h1 { font-size: var(--step-4); line-height: 1.05; }
h2 { font-size: var(--step-3); line-height: 1.08; }
h3 { font-size: var(--step-2); line-height: 1.12; }
h4 { font-size: var(--step-1); line-height: 1.15; }

p { max-width: var(--measure); }

a { color: var(--forest); }

strong, b { font-weight: 600; color: var(--ink); }

::selection { background: var(--pistachio); color: var(--forest-deep); }

/* ---------- Focus: always visible, never removed ---------- */
:focus-visible {
  outline: 3px solid var(--forest);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}
.panel--dark :focus-visible,
.site-footer :focus-visible,
.stretch :focus-visible { outline-color: var(--pistachio); }

/* ---------- Utilities ---------- */

.eyebrow {
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--charcoal);
  margin: 0 0 var(--space-16);
}
.panel--dark .eyebrow, .stretch .eyebrow { color: var(--pistachio); }

.arabic {
  font-family: var(--font-arabic);
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
}

.lede {
  font-size: var(--step-1);
  line-height: 1.5;
  color: var(--ink);
}

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

.skip-link {
  position: absolute; top: 0; left: 0; z-index: 200;
  padding: var(--space-12) var(--space-24);
  background: var(--forest); color: #fff;
  font-weight: 600; text-decoration: none;
  border-radius: 0 0 var(--r-md) 0;
  transform: translateY(-110%);
}
.skip-link:focus-visible { transform: none; outline-offset: -3px; }

/* ---------- Reveal ---------- */
/* The hidden state is applied ONLY when the inline <head> script has set .js on <html>,
   so a no-JS or failed-JS visitor sees every element at full opacity. */
.js [data-reveal] {
  opacity: 0;
  transform: translate3d(0, 18px, 0);
  transition: opacity var(--t-reveal) var(--ease-out),
              transform var(--t-reveal) var(--ease-out);
  transition-delay: calc(min(var(--i, 0), 4) * 70ms);
}
.js [data-reveal].is-revealed { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .js [data-reveal] { opacity: 1; transform: none; }
}


/* =================== src/layout.css =================== */
/* layout.css — containers, section rhythm, grid primitives.
   Section padding is defined in exactly ONE place (.section). Nothing else sets it. */

/* Sections are full-width by default; .container constrains the content inside.
   This gives full-bleed panels without any 100vw math, which is the usual source
   of phantom horizontal scrollbars once a scrollbar is present. */
.section {
  padding-block: clamp(4.5rem, 9vw, 9.5rem);
  position: relative;
}
.section--tight { padding-block: clamp(3rem, 6vw, 5.5rem); }

/* Off-screen sections cost nothing to lay out. contain-intrinsic-size keeps the
   scrollbar honest so deferred content does not cause scroll-position jumps. */
.section--defer {
  content-visibility: auto;
  contain-intrinsic-size: auto 700px;
}

.section--ashta   { background: var(--ashta); }
.section--ashta-2 { background: var(--ashta-2); }

/* The two dark structural panels. The only gradient on the site. */
.panel--dark {
  background: linear-gradient(160deg, var(--forest) 0%, var(--forest-deep) 100%);
  color: var(--pistachio-pale);
}
.panel--dark h2, .panel--dark h3, .panel--dark h4 { color: #fff; }
.panel--dark p { color: var(--pistachio-pale); }

/* ---------- Containers ---------- */
.container, .container--wide, .container--narrow {
  width: 100%;
  margin-inline: auto;
  padding-left: max(var(--gutter), env(safe-area-inset-left));
  padding-right: max(var(--gutter), env(safe-area-inset-right));
}
.container        { max-width: var(--container); }
.container--wide  { max-width: var(--container-wide); }
.container--narrow{ max-width: var(--container-narrow); }

/* ---------- Overflow guards ----------
   Grid and flex items default to min-width:auto, which means a wide child (a
   picture, a long word, a table) makes the TRACK wider than its container
   instead of shrinking. That is the usual cause of a page scrolling sideways
   on a phone. Setting min-width:0 on the items lets them shrink properly.  */
.grid > *,
.split > *,
.flavour-grid > *,
.order-layout > *,
.form__grid > *,
.pitch > *,
.formats > *,
.contact__grid > *,
.process__inner > *,
.site-footer__top > *,
.trust__list > *,
.order-panel__lines > * { min-width: 0; }

/* Media inside a shrinking track must never dictate the track width. */
.split img, .grid img, .flavour-grid img, .order-layout img { max-width: 100%; }

/* ---------- Grid ---------- */
.grid {
  display: grid;
  gap: var(--space-32);
}

@media (min-width: 48em) {
  .grid--2 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 64em) {
  .grid--3 { grid-template-columns: repeat(3, 1fr); }
  .grid--12 { grid-template-columns: repeat(12, 1fr); column-gap: var(--space-32); }
}

/* Offset two-column: media and text deliberately unequal and vertically staggered. */
.split { display: grid; gap: var(--space-32); align-items: center; }

@media (min-width: 64em) {
  .split {
    grid-template-columns: 1fr 1fr;
    gap: clamp(var(--space-48), 5vw, var(--space-96));
  }
  .split--media-left  > :first-child { grid-column: 1; }
  .split--media-right > :first-child { grid-column: 2; grid-row: 1; }
  /* The stagger that stops this reading as a plain 50/50 row. */
  .split--offset > :first-child  { transform: translateY(-2rem); }
  .split--offset > :last-child   { transform: translateY(1.5rem); }
}

/* ---------- Section headers ---------- */
.section__head { margin-bottom: clamp(var(--space-32), 5vw, var(--space-64)); }
.section__head p { margin-top: var(--space-16); }

.stack > * + * { margin-top: var(--space-24); }
.stack--tight > * + * { margin-top: var(--space-12); }
.stack--loose > * + * { margin-top: var(--space-32); }

/* Block-level rhythm utilities, so no layout spacing needs an inline style. */
.mt-m { margin-top: clamp(2.5rem, 5vw, 4rem); }
.mt-l { margin-top: clamp(3rem, 6vw, 5rem); }


/* =================== src/components.css =================== */
/* components.css — header, nav, buttons, media, cards, table, forms, footer. */

/* ============================ HEADER ============================ */

/* Sentinel sits at the very top of the document. A single IntersectionObserver
   watches it, so the compact-header state costs zero scroll listeners. */
.header-sentinel { position: absolute; top: 0; left: 0; width: 1px; height: 24px; pointer-events: none; }

.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgb(251 247 238 / 0.86);
  border-bottom: 1px solid var(--line);
  /* The only backdrop-filter on the site. */
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  padding-top: env(safe-area-inset-top);
  transition: background var(--t-hover) linear, border-color var(--t-hover) linear;
}
.site-header__inner {
  display: flex; align-items: center; gap: var(--space-16);
  height: var(--header-h);
  min-width: 0;
  transition: height var(--t-hover) var(--ease-out);
}

/* Compact state: a translucent --forest surface, and everything inside goes light. */
.site-header.is-compact {
  background: rgb(34 87 33 / 0.93);
  border-bottom-color: transparent;
}
.site-header.is-compact .site-header__inner { height: calc(var(--header-h) - 0.5rem); }
.site-header.is-compact .brand__name,
.site-header.is-compact .brand__sub,
.site-header.is-compact .site-nav__link { color: var(--ashta); }
.site-header.is-compact .site-nav__link::after { background: var(--pistachio); }
.site-header.is-compact .btn--solid {
  background: var(--pistachio); color: var(--forest-deep);
}
.site-header.is-compact .nav-toggle__bar { background: var(--ashta); }

/* ---------- Brand ---------- */
/* min-width:0 lets the brand shrink rather than force the header wider than the
   viewport. The mark itself never shrinks; the wordmark gives way first. */
.brand {
  display: flex; align-items: center; gap: var(--space-12);
  text-decoration: none; margin-right: auto;
  min-width: 0;
}
.brand__mark {
  width: var(--mark-size); height: var(--mark-size);
  border-radius: 50%; flex-shrink: 0;
}
.brand__text { display: flex; flex-direction: column; line-height: 1; min-width: 0; }
.brand__name {
  font-family: var(--font-display);
  font-size: 1.5rem; font-weight: 600; color: var(--forest);
  letter-spacing: -0.01em;
  transition: color var(--t-hover) linear;
}
.brand__sub {
  font-size: 0.75rem; font-weight: 600; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--charcoal); margin-top: 0.2rem;
  transition: color var(--t-hover) linear;
}
@media (min-width: 64em) {
  .brand__name { font-size: 1.75rem; }
  .brand__sub { font-size: 0.8rem; }
}

/* ---------- Primary nav (desktop) ---------- */
.site-nav { display: none; }
@media (min-width: 64em) { .site-nav { display: block; } }

/* Tighter gap in the band where the nav, the enlarged brand and the two header
   buttons are all competing for the same row. */
.site-nav__list { display: flex; gap: var(--space-16); list-style: none; margin: 0; padding: 0; }
@media (min-width: 80em) { .site-nav__list { gap: var(--space-32); } }
.site-nav__link {
  position: relative;
  font-size: 0.95rem; font-weight: 500;
  color: var(--forest); text-decoration: none;
  padding-block: var(--space-8);
  transition: color var(--t-hover) linear;
}
.site-nav__link::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: var(--pistachio);
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--t-hover) var(--ease-out);
}
.site-nav__link[aria-current="page"]::after { transform: scaleX(1); }

@media (hover: hover) and (pointer: fine) {
  .site-nav__link:hover::after { transform: scaleX(1); }
}

/* Two header buttons from 1100px. Below that the bar would crowd, so Our Booza
   drops out of the nav first (it stays in the footer) rather than shrinking type. */
.site-header__actions { display: none; }
@media (min-width: 68.75em) {
  .site-header__actions { display: flex; gap: var(--space-12); flex-shrink: 0; }
}
@media (max-width: 68.74em) {
  .site-nav__item--secondary { display: none; }
}
.site-header__actions .btn { padding-inline: 1.15rem; font-size: 0.9rem; }

/* ---------- Hamburger: transforms only ---------- */
.nav-toggle {
  display: grid; place-items: center;
  width: 2.75rem; height: 2.75rem; /* 44px tap target */
  cursor: pointer; flex-shrink: 0;
}
@media (min-width: 64em) { .nav-toggle { display: none; } }

.nav-toggle__box { display: block; position: relative; width: 1.5rem; height: 1rem; }
.nav-toggle__bar {
  position: absolute; left: 0; width: 100%; height: 2px;
  background: var(--forest); border-radius: 2px;
  transition: transform 220ms var(--ease-out), opacity 120ms linear;
}
.nav-toggle__bar:nth-child(1) { top: 0; }
.nav-toggle__bar:nth-child(2) { top: 50%; transform: translateY(-50%); }
.nav-toggle__bar:nth-child(3) { bottom: 0; }

.nav-toggle[aria-expanded="true"] .nav-toggle__bar { background: var(--ashta); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------- Mobile overlay menu ---------- */
.mobile-menu {
  position: fixed; inset: 0; z-index: 90;
  background: var(--forest);
  display: flex; flex-direction: column;
  padding: calc(var(--header-h) + env(safe-area-inset-top) + var(--space-32))
           max(var(--gutter), env(safe-area-inset-right))
           calc(var(--space-32) + env(safe-area-inset-bottom))
           max(var(--gutter), env(safe-area-inset-left));
  overflow-y: auto;
  opacity: 0;
  transition: opacity 240ms var(--ease-out);
}
.mobile-menu[hidden] { display: none; }
.mobile-menu.is-open { opacity: 1; }

.mobile-menu__list { list-style: none; margin: 0; padding: 0; }
.mobile-menu__list li + li { margin-top: var(--space-8); }
.mobile-menu__link {
  display: block;
  font-family: var(--font-display);
  font-size: var(--step-2); font-weight: 500;
  color: var(--ashta); text-decoration: none;
  padding-block: var(--space-12);
  border-bottom: 1px solid var(--line-dark);
}
.mobile-menu__link[aria-current="page"] { color: var(--pistachio); }
.mobile-menu__foot {
  margin-top: auto; padding-top: var(--space-32);
  display: grid; gap: var(--space-12);
}

/* Scroll lock. scrollbar-gutter on <body> means no layout shift when this applies. */
.is-nav-open { overflow: hidden; }

/* ============================ BUTTONS ============================ */

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--space-8);
  min-height: 2.75rem; /* 44px */
  padding: 0.7rem 1.6rem;
  font-size: 0.95rem; font-weight: 600;
  border-radius: var(--r-pill);
  text-decoration: none; cursor: pointer;
  border: 1px solid transparent;
  transition: background-color var(--t-hover) linear,
              color var(--t-hover) linear,
              border-color var(--t-hover) linear,
              transform var(--t-hover) var(--ease-out);
}
.btn--solid { background: var(--forest); color: #fff; }
.btn--ghost { border-color: var(--forest); color: var(--forest); }
.btn--light { background: var(--pistachio); color: var(--forest-deep); }
.btn--ghost-light { border-color: var(--pistachio-pale); color: var(--ashta); }
.btn--wide { width: 100%; }

/* Hover effects are desktop-only — nothing moves on hover on touch devices. */
@media (hover: hover) and (pointer: fine) {
  .btn--solid:hover { background: var(--forest-deep); transform: translateY(-2px); }
  .btn--ghost:hover { background: var(--forest); color: #fff; transform: translateY(-2px); }
  .btn--light:hover { background: var(--pistachio-pale); transform: translateY(-2px); }
  .btn--ghost-light:hover { background: var(--pistachio); color: var(--forest-deep); border-color: var(--pistachio); transform: translateY(-2px); }
}

/* Inline text link with a drawn pistachio underline. */
.link {
  position: relative; text-decoration: none;
  font-weight: 500; color: var(--forest);
  background-image: linear-gradient(var(--pistachio), var(--pistachio));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 100% 2px;
  padding-bottom: 2px;
}
@media (hover: hover) and (pointer: fine) {
  .link { transition: background-size var(--t-hover) var(--ease-out); }
  .link:hover { background-size: 100% 6px; }
}
.panel--dark .link, .site-footer .link { color: var(--ashta); }

/* ============================ MEDIA ============================ */

.media {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--ashta-2);
}
.media > img { width: 100%; height: 100%; object-fit: cover; }

.media--4x5 { aspect-ratio: 4 / 5; }
.media--3x4 { aspect-ratio: 3 / 4; }
.media--3x2 { aspect-ratio: 3 / 2; }
.media--1x1 { aspect-ratio: 1 / 1; }

/* Shadow lives on a pseudo-element so its OPACITY animates, never box-shadow itself. */
.media::after {
  content: ""; position: absolute; inset: 0;
  border-radius: inherit; box-shadow: var(--shadow);
  opacity: 0; pointer-events: none;
  transition: opacity var(--t-hover) linear;
}
@media (hover: hover) and (pointer: fine) {
  .media > img { transition: transform 220ms var(--ease-out); }
  .media:hover > img { transform: scale(1.04); }
  .media:hover::after { opacity: 1; }
}

.media__caption {
  margin-top: var(--space-12);
  font-size: var(--step--1);
  color: var(--charcoal);
}
.panel--dark .media__caption { color: var(--pistachio-pale); }

/* Designed fallback panel for slots with no photography yet.
   Deliberately composed — never a broken-looking grey box. */
.media--placeholder {
  display: grid; place-items: center;
  background:
    radial-gradient(circle at 30% 25%, rgb(221 229 182 / 0.30), transparent 55%),
    radial-gradient(circle at 75% 80%, rgb(184 198 59 / 0.18), transparent 50%),
    var(--forest);
}
.media--placeholder img {
  width: 38%; max-width: 8rem; height: auto;
  opacity: 0.16; object-fit: contain;
}

/* ============================ CARDS ============================ */

.card {
  background: var(--ashta);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: clamp(var(--space-24), 3vw, var(--space-32));
}
.card h3 { margin-bottom: var(--space-12); }
.card p { margin: 0; }

.panel--dark .card {
  background: rgb(255 255 255 / 0.05);
  border-color: var(--line-dark);
}

/* ============================ COMPARISON TABLE ============================ */

.compare { margin-top: var(--space-32); }
.compare caption {
  caption-side: top; text-align: left;
  font-size: var(--step--1); color: var(--charcoal);
  margin-bottom: var(--space-16);
}
.compare th, .compare td {
  padding: var(--space-16);
  text-align: left; vertical-align: top;
  border-bottom: 1px solid var(--line);
}
.compare thead th {
  font-family: var(--font-display);
  font-size: var(--step-0); color: var(--forest);
  border-bottom: 2px solid var(--pistachio);
}
.compare tbody th {
  font-family: var(--font-body); font-size: var(--step--1);
  font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--charcoal); width: 22%;
}
.compare td:first-of-type { color: var(--ink); font-weight: 500; }

/* Under 640px the table becomes stacked definition pairs — no horizontal scroller. */
@media (max-width: 39.99em) {
  .compare thead { display: none; }
  .compare tr { display: block; padding-block: var(--space-16); border-bottom: 1px solid var(--line); }
  .compare tbody th { display: block; width: auto; padding: 0 0 var(--space-8); border: 0; }
  .compare td { display: block; padding: 0 0 var(--space-8); border: 0; }
  .compare td::before {
    content: attr(data-label);
    display: block;
    font-size: var(--step--1); font-weight: 600; letter-spacing: 0.08em;
    text-transform: uppercase; color: var(--charcoal);
    margin-bottom: 2px;
  }
  .compare td:first-of-type::before { color: var(--forest); }
}

/* ============================ FORMS ============================ */

.form { margin-top: var(--space-32); }
.form__grid { display: grid; gap: var(--space-24); }
@media (min-width: 48em) {
  .form__grid { grid-template-columns: repeat(2, 1fr); }
  .form__row--full { grid-column: 1 / -1; }
}

.field { display: flex; flex-direction: column; gap: var(--space-8); }
.field__label { font-size: var(--step--1); font-weight: 600; color: var(--ink); }
.field__req { color: var(--forest); }
.field__hint { font-size: var(--step--1); color: var(--charcoal); }

.field__input, .field__select, .field__textarea {
  /* 1rem minimum guarantees iOS does not zoom the viewport on focus. */
  font-size: 1rem;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--ashta);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 0.75rem 0.9rem;
  min-height: 2.75rem;
  /* min-width:0 and max-width matter on iOS, where date and select controls
     carry an intrinsic minimum width that otherwise ignores width:100% and
     pushes the form wider than the viewport. */
  width: 100%;
  max-width: 100%;
  min-width: 0;
  transition: border-color var(--t-hover) linear;
}
.field { min-width: 0; }
.field__textarea { min-height: 8rem; resize: vertical; }
.field__select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--forest) 50%),
                    linear-gradient(135deg, var(--forest) 50%, transparent 50%);
  background-position: right 1.1rem center, right 0.75rem center;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 2.5rem;
}
.field__input:focus, .field__select:focus, .field__textarea:focus { border-color: var(--forest); }
.field__input[aria-invalid="true"], .field__select[aria-invalid="true"], .field__textarea[aria-invalid="true"] {
  border-color: #9B2C1E;
  border-width: 2px;
}
.field__error { font-size: var(--step--1); color: #9B2C1E; font-weight: 500; min-height: 0; }
.field__error:empty { display: none; }

.checks { border: 0; padding: 0; margin: 0; }
.checks__legend { font-size: var(--step--1); font-weight: 600; color: var(--ink); padding: 0; margin-bottom: var(--space-12); }
.check { display: flex; align-items: flex-start; gap: var(--space-12); padding-block: 0.4rem; min-height: 2.75rem; }
.check input { width: 1.15rem; height: 1.15rem; margin-top: 0.28rem; accent-color: var(--forest); flex-shrink: 0; }
.check span { font-size: var(--step-0); }

/* Honeypot: off-screen but NOT display:none, so naive bots still fill it. */
.hp {
  position: absolute; left: -9999px; top: auto;
  width: 1px; height: 1px; overflow: hidden;
}

.form__status {
  margin-top: var(--space-24);
  padding: var(--space-16) var(--space-24);
  border-radius: var(--r-md);
  border: 1px solid var(--line);
}
.form__status:empty { display: none; }
.form__status--ok { background: var(--pistachio-pale); border-color: var(--pistachio); color: var(--forest-deep); }
.form__status--err { background: #FBEAE7; border-color: #9B2C1E; color: #7A2317; }
.form__status h3 { font-size: var(--step-1); margin-bottom: var(--space-8); color: inherit; }
.form__status p { margin: 0; color: inherit; }

/* ============================ FOOTER ============================ */

.site-footer {
  background: var(--forest-deep);
  color: var(--pistachio-pale);
  padding-block: clamp(var(--space-48), 7vw, var(--space-96)) var(--space-32);
  padding-bottom: calc(var(--space-32) + env(safe-area-inset-bottom));
}
.site-footer h2, .site-footer h3 { color: #fff; }

.site-footer__top { display: grid; gap: var(--space-48); }
@media (min-width: 48em) { .site-footer__top { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64em) { .site-footer__top { grid-template-columns: 1.5fr 1fr 1fr 1fr; } }

.site-footer .brand__name { color: #fff; }
.site-footer .brand__sub { color: var(--pistachio); }
.site-footer__blurb { margin-top: var(--space-16); font-size: var(--step--1); max-width: 34ch; }

.footer-nav__title {
  font-size: 0.75rem; font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--pistachio);
  margin-bottom: var(--space-16);
}
.footer-nav__list { list-style: none; margin: 0; padding: 0; }
.footer-nav__list li + li { margin-top: var(--space-12); }
.footer-nav__list a {
  color: var(--pistachio-pale); text-decoration: none; font-size: var(--step--1);
  transition: color var(--t-hover) linear;
}
@media (hover: hover) and (pointer: fine) {
  .footer-nav__list a:hover { color: #fff; }
}

.site-footer__bottom {
  margin-top: var(--space-64);
  padding-top: var(--space-24);
  border-top: 1px solid var(--line-dark);
  display: flex; flex-wrap: wrap; gap: var(--space-16);
  justify-content: space-between; align-items: center;
  font-size: var(--step--1);
}
.site-footer__mark { font-family: var(--font-arabic); color: var(--pistachio); font-size: var(--step-0); }
.site-footer__legal {
  width: 100%; margin-top: var(--space-16);
  font-size: var(--step--1); color: var(--pistachio-pale); opacity: 0.75;
}
.site-footer__legal a {
  color: inherit; text-decoration: underline;
  text-underline-offset: 0.2em; text-decoration-thickness: 1px;
  transition: color var(--t-hover) linear;
}
@media (hover: hover) and (pointer: fine) {
  .site-footer__legal a:hover { color: #fff; }
}

/* ============================ CONTACT LIST ============================ */
/* Shared by contact, order and wholesale. A row renders only when its value
   is known — unresolved contact methods are omitted, never linked to a token. */

.contact-list { list-style: none; margin: 0; padding: 0; }
.contact-list__item {
  display: grid; gap: var(--space-4);
  padding-block: var(--space-16);
  border-bottom: 1px solid var(--line);
}
@media (min-width: 30em) {
  .contact-list__item { grid-template-columns: 9rem 1fr; gap: var(--space-16); align-items: baseline; }
}
.contact-list__label {
  font-size: 0.75rem; font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--charcoal);
}
.contact-list__value { font-size: var(--step-0); color: var(--ink); }
.panel--dark .contact-list__item { border-bottom-color: var(--line-dark); }
.panel--dark .contact-list__label { color: var(--pistachio); }
.panel--dark .contact-list__value { color: var(--pistachio-pale); }

/* ============================ FLAVOUR CARD ============================ */

.flavour-grid { display: grid; gap: var(--space-24); }
@media (min-width: 37.5em) { .flavour-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64em) { .flavour-grid { grid-template-columns: repeat(4, 1fr); gap: var(--space-32); } }

.flavour-card {
  position: relative;
  display: flex; flex-direction: column;
  text-decoration: none;
  border-radius: var(--r-lg);
}
.flavour-card__media {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--ashta-2);
}
.flavour-card__media img { width: 100%; height: 100%; object-fit: cover; }

/* The --pistachio-mid state is a pseudo-element opacity + a transform.
   No box-shadow, width or colour animation on the card itself. */
.flavour-card__media::after {
  content: ""; position: absolute; inset: 0;
  border-radius: inherit;
  border: 3px solid var(--pistachio-mid);
  opacity: 0;
  transition: opacity var(--t-hover) linear;
  pointer-events: none;
}
.flavour-card__name {
  font-family: var(--font-display);
  font-size: var(--step-1); color: var(--forest);
  margin-top: var(--space-16);
}
.flavour-card__tag {
  font-size: var(--step--1); color: var(--charcoal);
  margin-top: var(--space-4);
}
.panel--dark .flavour-card__name { color: #fff; }
.panel--dark .flavour-card__tag { color: var(--pistachio-pale); }

@media (hover: hover) and (pointer: fine) {
  .flavour-card__media img { transition: transform 220ms var(--ease-out); }
  .flavour-card:hover .flavour-card__media img { transform: scale(1.04); }
  .flavour-card:hover .flavour-card__media::after { opacity: 1; }
}
.flavour-card:focus-visible { outline: 3px solid var(--forest); outline-offset: 4px; }
.flavour-card:focus-visible .flavour-card__media::after { opacity: 1; }

/* ============================ QUANTITY STEPPER ============================ */

/* flex-shrink:0 on .qty keeps the stepper intact; the row's text column gives
   way instead. The buttons hold their 44px tap target. */
.qty { display: inline-flex; align-items: center; gap: var(--space-4); flex-shrink: 0; }
.qty__btn {
  flex: 0 0 auto;
  width: 2.75rem; height: 2.75rem;   /* 44px tap target */
  display: grid; place-items: center;
  font-size: 1.25rem; font-weight: 600; line-height: 1;
  color: var(--forest);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--ashta);
  cursor: pointer;
  transition: background-color var(--t-hover) linear, border-color var(--t-hover) linear;
}
.qty__btn:disabled { opacity: 0.35; cursor: not-allowed; }
@media (hover: hover) and (pointer: fine) {
  .qty__btn:not(:disabled):hover { background: var(--pistachio-pale); border-color: var(--pistachio-mid); }
}
.qty__input {
  /* flex-basis pins the real width. Without min-width:0 the browser would use
     the input's ~20-character intrinsic width as its flex minimum. */
  flex: 0 0 3.25rem;
  min-width: 0;
  width: 3.25rem; height: 2.75rem;
  text-align: center;
  font-size: 1rem; font-variant-numeric: tabular-nums;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--ashta);
  color: var(--ink);
  -moz-appearance: textfield;
}
.qty__input::-webkit-outer-spin-button,
.qty__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.order-row {
  display: flex; align-items: center; gap: var(--space-16);
  padding-block: var(--space-16);
  border-bottom: 1px solid var(--line);
  flex-wrap: wrap;
}
.order-row__thumb {
  width: 3.5rem; height: 3.5rem; flex-shrink: 0;
  border-radius: var(--r-sm); overflow: hidden; background: var(--ashta-2);
}
.order-row__thumb img { width: 100%; height: 100%; object-fit: cover; }
.order-row__text { flex: 1 1 8rem; min-width: 0; }
.order-row__name { font-weight: 600; color: var(--ink); }
.order-row__tag { font-size: var(--step--1); color: var(--charcoal); }

/* ============================ ORDER SUMMARY ============================ */

.summary {
  background: var(--ashta-2);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: var(--space-24);
}
@media (min-width: 64em) {
  .summary { position: sticky; top: calc(var(--header-h) + var(--space-24)); }
}
.summary__title { font-size: var(--step-1); margin-bottom: var(--space-16); }
.summary__list { list-style: none; margin: 0 0 var(--space-16); padding: 0; }
.summary__list li {
  display: flex; justify-content: space-between; gap: var(--space-12);
  flex-wrap: wrap;
  padding-block: var(--space-8);
  border-bottom: 1px solid var(--line);
  font-size: var(--step--1);
}
.summary__list li > * { min-width: 0; }
.summary__empty { font-size: var(--step--1); color: var(--charcoal); }
.summary__total {
  display: flex; justify-content: space-between; gap: var(--space-12);
  flex-wrap: wrap;
  font-weight: 600; color: var(--ink);
  padding-top: var(--space-12);
}
.summary__note { font-size: var(--step--1); color: var(--charcoal); margin-top: var(--space-12); }

/* Mobile: the summary collapses to a fixed bar that clears the home indicator. */
.summary-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 80;
  background: var(--forest);
  color: var(--ashta);
  padding: var(--space-12) max(var(--gutter), env(safe-area-inset-left))
           calc(var(--space-12) + env(safe-area-inset-bottom))
           max(var(--gutter), env(safe-area-inset-right));
  /* Two labels on one narrow row would overflow at 320px, so they wrap. */
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-4) var(--space-16); flex-wrap: wrap;
  box-shadow: 0 -8px 24px -18px rgb(21 77 20 / 0.5);
}
.summary-bar__count { font-size: var(--step--1); font-weight: 600; min-width: 0; }
@media (min-width: 64em) { .summary-bar { display: none; } }


/* =================== src/sections.css =================== */
/* sections.css — page-specific blocks: hero, stretch, rail, ashta, process, wholesale, 404. */

/* ============================ HERO ============================ */

.hero { position: relative; background: var(--ashta); }
.hero__body { padding-block: clamp(3rem, 8vw, 5.5rem); }
.hero__body p { color: var(--ink); }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-16); margin-top: var(--space-32); }
.hero__media img { width: 100%; }

/* Mobile: type first, media stacked below (media is 4:5 portrait). */
.hero__media { aspect-ratio: 4 / 5; overflow: hidden; }
.hero__media img { height: 100%; object-fit: cover; object-position: center 45%; }

@media (min-width: 64em) {
  /* vh declared first as a fallback for browsers without dvh. */
  .hero { min-height: min(100vh, 52rem); min-height: min(100dvh, 52rem); }
  .hero { display: grid; }
  .hero > * { grid-area: 1 / 1; }
  .hero__media { aspect-ratio: auto; height: 100%; }
  .hero__media img { height: 100%; }
  /* Scrim: without it, cream-coloured booza behind cream type fails contrast. */
  .hero__media::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(100deg,
      rgb(21 77 20 / 0.92) 0%,
      rgb(21 77 20 / 0.80) 34%,
      rgb(21 77 20 / 0.30) 62%,
      rgb(21 77 20 / 0.12) 100%);
  }
  .hero__body { align-self: center; z-index: 2; max-width: 62rem; }
  .hero__body .eyebrow { color: var(--pistachio); }
  .hero__body h1 { color: #fff; }
  .hero__body p { color: var(--pistachio-pale); }
  .hero__lede { max-width: 46ch; }
}

.hero h1 {
  font-size: var(--step-5);
  /* WONK + a low opsz only at the largest size, per the type spec. */
  font-variation-settings: "opsz" 132, "wght" 600, "SOFT" 28, "WONK" 1;
}

/* The word does what it means: wider tracking, and a rule that draws itself. */
.hero__stretch { position: relative; display: inline-block; letter-spacing: 0.05em; }
.hero__stretch::after {
  content: ""; position: absolute;
  left: 0; right: 0.05em; bottom: 0.02em; height: 0.055em;
  background: var(--pistachio);
  transform: scaleX(1); transform-origin: left center;
}
/* Only animates when JS confirmed it is present — no-JS sees the finished rule. */
.js .hero__stretch::after { transform: scaleX(0); animation: draw-rule 900ms var(--ease-out) 350ms forwards; }
@keyframes draw-rule { to { transform: scaleX(1); } }

/* ============================ THE STRETCH ============================ */

.stretch { overflow: hidden; }
.stretch__intro { max-width: 52ch; }
.stretch__stage { margin-block: clamp(var(--space-32), 5vw, var(--space-64)); }

.stretch__track {
  position: relative;
  height: clamp(4.5rem, 11vw, 10rem);
  /* The ribbon is 36% wide and scales to a maximum of 2.4x = 86.4% of this track,
     so the stretched ribbon and its handle can never overflow at any viewport width. */
}
.stretch__ribbon {
  position: absolute; inset-block: 0; left: 0;
  width: 36%;
  transform-origin: left center;
  border-radius: var(--r-md);
  overflow: hidden;
  transform: scaleX(1);
}
.stretch__ribbon img { width: 100%; height: 100%; object-fit: cover; }

/* Spring-back is deliberately heavier and slower than a normal snap — booza is dense. */
.stretch__ribbon.is-releasing,
.stretch__handle.is-releasing { transition: transform 900ms var(--ease-dense); }

/* Keyboard stepping gets a short, ordinary ease — the heavy spring is for release. */
.stretch__ribbon.is-stepping,
.stretch__handle.is-stepping { transition: transform 260ms var(--ease-out); }

.stretch__handle {
  position: absolute; top: 50%; left: 0;
  width: 2.75rem; height: 2.75rem;
  margin: -1.375rem 0 0 -1.375rem;
  border-radius: 50%;
  background: var(--pistachio);
  border: 2px solid var(--forest-deep);
  cursor: grab;
  /* Only the handle disables default touch behaviour, so vertical page scrolling
     over the rest of the band is never captured. */
  touch-action: none;
  display: grid; place-items: center;
  z-index: 3;
}
.stretch__handle:active { cursor: grabbing; }
.stretch__handle::before {
  content: ""; width: 0.75rem; height: 0.75rem;
  border-right: 2px solid var(--forest-deep);
  border-top: 2px solid var(--forest-deep);
  transform: rotate(45deg) translate(-1px, 1px);
}

.stretch__meta {
  display: flex; flex-wrap: wrap; gap: var(--space-16) var(--space-32);
  align-items: baseline;
}
.stretch__readout {
  font-size: 0.75rem; font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--pistachio); margin: 0;
  font-variant-numeric: tabular-nums;
}
.stretch__readout output { font-size: var(--step-1); letter-spacing: 0; margin-left: var(--space-8); }
.stretch__caption {
  font-family: var(--font-display);
  font-size: var(--step-1); color: #fff; margin: 0;
}

/* ============================ INGREDIENT RAIL ============================ */

.rail-wrap { position: relative; }
.rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 74%;
  gap: var(--space-24);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding-bottom: var(--space-16);
  scrollbar-width: thin;
}
.rail > * { scroll-snap-align: center; }

/* Visible edge affordance so the rail reads as scrollable. */
.rail-wrap::after {
  content: ""; position: absolute; top: 0; right: 0; bottom: var(--space-16);
  width: 3rem; pointer-events: none;
  background: linear-gradient(to right, rgb(242 236 221 / 0), var(--ashta-2));
}

@media (min-width: 64em) {
  .rail {
    grid-auto-flow: row;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-48);
    overflow: visible;
    padding-bottom: 0;
  }
  .rail-wrap::after { display: none; }
  /* Asymmetry: the middle column drops, so this never reads as a stock 3-up. */
  .rail > :nth-child(2) { transform: translateY(3.5rem); }
}

.ingredient__name {
  font-family: var(--font-display);
  font-size: var(--step-2); color: var(--forest);
  margin-top: var(--space-24);
}
.ingredient__ar {
  font-family: var(--font-arabic);
  font-size: var(--step-1); color: var(--charcoal);
  margin-top: var(--space-4);
}
.ingredient p { margin-top: var(--space-12); }

/* ============================ ASHTA ============================ */

.ashta__movements { display: grid; gap: clamp(var(--space-48), 6vw, var(--space-96)); }
.ashta__label {
  font-size: 0.75rem; font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--pistachio);
  padding-bottom: var(--space-12);
  border-bottom: 1px solid var(--line-dark);
  margin-bottom: var(--space-24);
}

/* A movement is one labelled block of prose. The eyebrow and label already carry
   their own bottom margin, so they opt the following element out of the rhythm. */
.movement > * + * { margin-top: var(--space-24); }
.movement > .eyebrow + *,
.movement > .ashta__label + * { margin-top: 0; }
.ashta__technique { max-width: var(--container-narrow); }

/* --rose-dust appears exactly once on the site: this marker, beside the rose-water note. */
.rose-note { display: flex; align-items: baseline; gap: var(--space-12); margin-top: var(--space-24); }
.rose-note__marker {
  flex-shrink: 0; width: 2.25rem; height: 3px;
  background: var(--rose-dust); border-radius: var(--r-pill);
  transform: translateY(-0.3em);
}
.rose-note p { font-size: var(--step--1); color: var(--pistachio-pale); margin: 0; }

/* ============================ PROCESS ============================ */

.process__inner { display: grid; gap: var(--space-48); }

@media (min-width: 64em) {
  .process__inner {
    grid-template-columns: 0.85fr 1.15fr;
    gap: clamp(var(--space-48), 6vw, var(--space-96));
    align-items: start;
  }
  .process__aside {
    position: sticky;
    top: calc(var(--header-h) + var(--space-32));
  }
}

.process__list { list-style: none; margin: 0; padding: 0; counter-reset: step; }
.process__step { counter-increment: step; position: relative; }
.process__step + .process__step { margin-top: clamp(var(--space-48), 6vw, var(--space-96)); }

/* Numbered markers are earned here — this is the only genuinely sequential section. */
.process__num {
  font-family: var(--font-display);
  font-size: var(--step-1); font-weight: 500;
  color: var(--pistachio);
  display: flex; align-items: center; gap: var(--space-16);
  margin-bottom: var(--space-16);
}
.process__num::before { content: counter(step, decimal-leading-zero); }
.process__num::after {
  content: ""; flex: 1; height: 1px; background: var(--line);
}
.process__step h3 { margin-bottom: var(--space-12); }
.process__step .media { margin-top: var(--space-24); }

/* Mobile vertical timeline. */
@media (max-width: 63.99em) {
  .process__list { position: relative; padding-left: var(--space-32); }
  .process__list::before {
    content: ""; position: absolute; left: 5px; top: 0.6rem; bottom: 0.6rem;
    width: 1px; background: var(--line);
  }
  .process__step::before {
    content: ""; position: absolute; left: calc(-1 * var(--space-32) + 1px);
    top: 0.55rem; width: 9px; height: 9px; border-radius: 50%;
    background: var(--pistachio); outline: 3px solid var(--ashta);
  }
  .process__num::after { display: none; }
}

/* ============================ WHOLESALE ============================ */

.pitch { display: grid; gap: var(--space-24); }
@media (min-width: 64em) { .pitch { grid-template-columns: repeat(3, 1fr); gap: var(--space-32); } }

.pitch__item {
  border-top: 2px solid var(--pistachio);
  padding-top: var(--space-24);
}
.pitch__item h3 { font-size: var(--step-1); margin-bottom: var(--space-12); }
.pitch__item p { margin: 0; }

.formats { display: grid; gap: var(--space-32); }
@media (min-width: 48em) { .formats { grid-template-columns: repeat(2, 1fr); } }
.format h3 { font-size: var(--step-1); margin-top: var(--space-24); margin-bottom: var(--space-8); }
.format p { margin: 0; font-size: var(--step--1); }

.cta-strip { text-align: left; }
.cta-strip h2 { max-width: 20ch; }
.cta-strip p { margin-top: var(--space-24); }
.cta-strip .btn { margin-top: var(--space-32); }

/* ============================ CONTACT ============================ */

.contact__grid { display: grid; gap: var(--space-48); }
@media (min-width: 64em) { .contact__grid { grid-template-columns: 1fr 1.3fr; gap: var(--space-96); } }

.detail-list { list-style: none; margin: 0; padding: 0; }
.detail-list > li + li { margin-top: var(--space-24); }
.detail-list dt {
  font-size: 0.75rem; font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--charcoal); margin-bottom: var(--space-4);
}
.detail-list dd { margin: 0; font-size: var(--step-0); color: var(--ink); }

.map-frame {
  aspect-ratio: 16 / 10; border-radius: var(--r-lg); overflow: hidden;
  background: var(--ashta-2);
}
.map-frame iframe { width: 100%; height: 100%; border: 0; display: block; }

/* ============================ 404 ============================ */

.notfound {
  min-height: min(72vh, 40rem);
  min-height: min(72dvh, 40rem);
  display: grid; place-items: center; text-align: center;
}
.notfound__code {
  font-family: var(--font-display);
  font-size: var(--step-5); color: var(--pistachio);
  line-height: 1; margin-bottom: var(--space-16);
  font-variation-settings: "opsz" 120, "wght" 600, "WONK" 1;
}
.notfound p { margin-inline: auto; }
.notfound__actions { display: flex; flex-wrap: wrap; gap: var(--space-16); justify-content: center; margin-top: var(--space-32); }

/* ============================ PROSE ============================ */

.prose > * + * { margin-top: var(--space-24); }
.prose h2 { margin-top: var(--space-48); }
.prose h3 { margin-top: var(--space-32); }
.prose__lead {
  font-family: var(--font-display);
  font-size: var(--step-2);
  line-height: 1.28;
  color: var(--forest);
  margin-bottom: var(--space-32);
}

/* ============================ TRUST STRIP ============================ */

.trust { background: var(--ashta-2); border-block: 1px solid var(--line); }
.trust__list {
  list-style: none; margin: 0; padding-block: var(--space-24);
  display: grid; gap: var(--space-16);
}
@media (min-width: 37.5em) { .trust__list { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64em) { .trust__list { grid-template-columns: repeat(4, 1fr); gap: var(--space-32); } }
.trust__item {
  font-size: var(--step--1); font-weight: 600;
  color: var(--forest);
  padding-left: var(--space-16);
  border-left: 2px solid var(--pistachio);
}

/* ============================ ORDER PANEL (home) ============================ */
/* The one place --pistachio-mid carries a surface, echoing the business card. */

.order-panel {
  background:
    linear-gradient(180deg, rgb(155 201 63 / 0.16), rgb(155 201 63 / 0.06));
  border-block: 1px solid var(--pistachio-mid);
}
.order-panel__lines {
  list-style: none; margin: var(--space-32) 0 0; padding: 0;
  display: grid; gap: var(--space-16);
}
@media (min-width: 48em) { .order-panel__lines { grid-template-columns: repeat(3, 1fr); } }
.order-panel__line { border-top: 2px solid var(--forest); padding-top: var(--space-12); }
.order-panel__label {
  font-size: 0.75rem; font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--charcoal);
}
.order-panel__value { font-size: var(--step-0); color: var(--ink); font-weight: 500; }

/* ============================ SPIRAL WATERMARK ============================ */
/* One instance, decorative, no animation. Echoes the roll spiral on the card. */

.watermark { position: relative; overflow: hidden; isolation: isolate; }
.watermark__mark {
  position: absolute; z-index: -1; pointer-events: none;
  right: -6%; top: 50%; translate: 0 -50%;
  width: min(46rem, 70%); height: auto;
  opacity: 0.06;
  color: var(--forest);
}
.panel--dark .watermark__mark { color: #fff; opacity: 0.06; }

/* ============================ FLAVOUR PANELS (flavours.html) ============================ */

.flavour-panel + .flavour-panel { margin-top: clamp(var(--space-48), 7vw, var(--space-96)); }
.flavour-panel__name { font-size: var(--step-3); }
.flavour-panel__ar {
  font-family: var(--font-arabic); font-size: var(--step-1);
  color: var(--charcoal); margin-top: var(--space-4);
}
.flavour-panel__finish {
  margin-top: var(--space-24);
  font-size: var(--step--1);
  border-top: 1px solid var(--line);
  padding-top: var(--space-12);
}
.flavour-panel__finish dt {
  font-size: 0.75rem; font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--charcoal);
}
.flavour-panel__finish dd { margin: var(--space-4) 0 0; color: var(--ink); }

/* Draft copy marker — visible to the client, not decorative. */
.draft-flag {
  display: inline-block; margin-top: var(--space-12);
  font-size: 0.7rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--forest-deep); background: var(--pistachio-pale);
  border-radius: var(--r-pill); padding: 0.25rem 0.7rem;
}

/* ============================ ORDER PAGE LAYOUT ============================ */

.order-layout { display: grid; gap: var(--space-48); }
@media (min-width: 64em) {
  .order-layout { grid-template-columns: 1.35fr 0.65fr; gap: var(--space-64); align-items: start; }
}
.order-step + .order-step { margin-top: clamp(var(--space-32), 5vw, var(--space-64)); }
.order-step__head {
  display: flex; align-items: baseline; gap: var(--space-12);
  flex-wrap: wrap;
  margin-bottom: var(--space-16);
}
.order-step__head > h3 { min-width: 0; }
.order-step__num {
  font-family: var(--font-display); font-size: var(--step-1);
  color: var(--pistachio-mid); flex-shrink: 0;
}
/* Leaves room for the fixed mobile summary bar so nothing is trapped under it. */
@media (max-width: 63.99em) { .order-page { padding-bottom: 5.5rem; } }

.notice {
  border: 1px solid var(--pistachio-mid);
  background: rgb(155 201 63 / 0.10);
  border-radius: var(--r-md);
  padding: var(--space-24);
}
.notice h3 { font-size: var(--step-1); margin-bottom: var(--space-8); }
.notice p { margin: 0; }

/* Debug helper — only active with ?debug in the URL (class set by main.js). */
.debug * { outline: 1px solid red; }