/*
 * Nile Botanicals — site styles
 * Loaded after Bootstrap 5. Sections: tokens · base · Bootstrap theme · layout · components · pages
 * Design system notes: docs/design/DESIGN.md
 */

/* ==========================================================================
   Design tokens: "Nile at Dawn", colored from the brand logo. See docs/design/DESIGN.md
   ========================================================================== */

@font-face {
  font-family: 'Instrument Serif';
  src: url('../fonts/instrument-serif.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Instrument Serif';
  src: url('../fonts/instrument-serif-italic.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Instrument Sans';
  src: url('../fonts/instrument-sans-var.woff2') format('woff2');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
/* Arabic: a naskh face for headings and a sans for text. The unicode-range keeps them to Arabic
   letters, so they are only downloaded on Arabic pages and Latin words and digits stay in Instrument. */
@font-face {
  font-family: 'Amiri';
  src: url('../fonts/amiri-arabic-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF, U+200C-200F;
}
@font-face {
  font-family: 'Noto Sans Arabic';
  src: url('../fonts/noto-sans-arabic-var.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF, U+200C-200F;
}
/* Metric-matched fallbacks reduce layout shift while web fonts load. */
@font-face {
  font-family: 'Serif Fallback';
  src: local('Georgia'), local('Times New Roman');
  size-adjust: 88%;
  ascent-override: 98%;
}
@font-face {
  font-family: 'Sans Fallback';
  src: local('Arial'), local('Helvetica');
  size-adjust: 96%;
}

:root {
  /* Color: raw palette, sampled from the Nile Botanicals logo */
  --ivory: #fbfaf6; /* warm paper, close to the logo's own ground */
  --paper: #ffffff;
  --sand-100: #f1e9da; /* sandstone tints (the carved pillar) */
  --sand-300: #dccaa8;
  --sand-500: #b89a76;
  --forest-950: #0b1a12; /* wordmark green */
  --forest-900: #14271b;
  --forest-800: #1b341f;
  --forest-700: #27482d;
  --leaf-600: #4a6a2c; /* leaf greens */
  --leaf-300: #aebf95;
  --leaf-100: #e6ecd9;
  --gold-700: #7a5f33; /* antique gold ('For Export' line, leaf edges) */
  --gold-500: #a8854f;
  --gold-300: #d2b37c;
  --dawn: #fdf3dc; /* Nile sunrise, used sparingly as a highlight tint */
  --ink: #141d16;
  --ink-2: #48524a;
  --ink-3: #566056;
  --error: #9a2b1e;

  /* Color: roles */
  --bg: var(--ivory);
  --surface: var(--paper);
  --surface-tint: var(--sand-100);
  --text: var(--ink);
  --text-2: var(--ink-2);
  --text-3: var(--ink-3);
  --accent: var(--gold-700);
  --primary: var(--forest-900);
  --primary-hover: var(--forest-700);
  --on-primary: var(--ivory);
  --line: rgb(20 29 22 / 0.14);
  --line-strong: rgb(20 29 22 / 0.32);
  --focus: var(--gold-500);

  /* Typography */
  --font-serif: 'Instrument Serif', 'Amiri', 'Serif Fallback', Georgia, serif;
  --font-sans: 'Instrument Sans', 'Noto Sans Arabic', 'Sans Fallback', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --fs-display: clamp(2.75rem, 1.6rem + 5.2vw, 6rem);
  --fs-h1: clamp(2.5rem, 1.7rem + 3.6vw, 4.5rem);
  --fs-h2: clamp(2rem, 1.55rem + 2vw, 3.25rem);
  --fs-h3: clamp(1.375rem, 1.25rem + 0.5vw, 1.75rem);
  --fs-lead: clamp(1.125rem, 1.06rem + 0.3vw, 1.3125rem);
  --fs-body: 1.0625rem;
  --fs-small: 0.9375rem;
  --fs-label: 0.75rem;

  --lh-tight: 1.02;
  --lh-heading: 1.08;
  --lh-body: 1.65;
  --tracking-label: 0.18em;

  /* Spacing (4px base) */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4rem;
  --s-9: 6rem;
  --s-10: 8rem;
  --section: clamp(4rem, 2.6rem + 6.5vw, 9rem);

  /* Layout */
  --container: 1320px;
  --gutter: clamp(1rem, 0.4rem + 3vw, 3rem);
  --bar-h: 4.25rem; /* the floating navigation bar */
  --header-gap: 0.75rem; /* space between the viewport top and the bar */
  --header-h: calc(var(--bar-h) + var(--header-gap));
  --measure: 65ch;

  /* Shape & depth */
  --radius: 12px; /* inputs, small surfaces */
  --radius-lg: 20px; /* cards, images */
  --radius-xl: clamp(24px, 1rem + 2vw, 40px); /* bands, panels */
  --radius-pill: 999px; /* buttons, chips, the navigation bar */
  --shadow-1: 0 1px 2px rgb(11 26 18 / 0.04), 0 8px 24px -12px rgb(11 26 18 / 0.12);
  --shadow-2: 0 2px 4px rgb(11 26 18 / 0.05), 0 20px 40px -16px rgb(11 26 18 / 0.22);
  --shadow-sheet: 0 24px 48px -24px rgb(11 26 18 / 0.25);

  /* Motion */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --dur-1: 160ms;
  --dur-2: 280ms;
  --dur-3: 600ms;
  --dur-image: 700ms;
}

@media (max-width: 767px) {
  :root {
    --bar-h: 3.75rem;
    --header-gap: 0.5rem;
  }
}

/* ==========================================================================
   Base: reset, typography, accessibility utilities, motion
   ========================================================================== */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-h) + 1rem);
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

h1,
h2,
h3,
h4,
p,
ul,
ol,
dl,
dd,
figure,
blockquote {
  margin: 0;
}

ul[class],
ol[class] {
  list-style: none;
  padding: 0;
}

h1,
h2,
h3 {
  font-family: var(--font-serif);
  font-weight: 400;
  line-height: var(--lh-heading);
  letter-spacing: -0.01em;
  text-wrap: balance;
}

h1 em,
h2 em,
h3 em {
  font-style: italic;
  color: var(--forest-700);
}

p {
  text-wrap: pretty;
}

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

img {
  height: auto;
}

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

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
}

::selection {
  background: var(--leaf-300);
  color: var(--forest-950);
}

/* Focus: always visible for keyboard users */
:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
}

:focus:not(:focus-visible) {
  outline: none;
}

.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;
}

.skip-link {
  position: absolute;
  inset-inline-start: var(--s-4);
  top: var(--s-3);
  z-index: 100;
  padding: var(--s-3) var(--s-4);
  background: var(--primary);
  color: var(--on-primary);
  border-radius: var(--radius-pill);
  clip-path: inset(50%);
  opacity: 0;
  pointer-events: none;
}

.skip-link:focus {
  clip-path: none;
  opacity: 1;
  pointer-events: auto;
}

/* Placeholder content: easy to spot, easy to replace */
.is-placeholder {
  color: var(--text-3);
  font-style: italic;
  text-decoration: underline dashed var(--gold-500);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.25em;
}

.is-placeholder-block {
  border-style: dashed !important;
  border-color: var(--gold-500) !important;
}

/* Prose */
.prose {
  max-width: var(--measure);
}

.prose p + p {
  margin-top: var(--s-4);
}

/* --------------------------------------------------------------------------
   Motion: reveal on scroll (only when JS is running and motion is allowed)
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  /* :where() keeps these as weak as a single class, so component hover states still win */
  .js [data-reveal]:where(:not(.product-card, .category-row)) {
    opacity: 0;
    transform: translateY(12px);
    transition:
      opacity var(--dur-3) var(--ease-out),
      transform var(--dur-3) var(--ease-out);
    transition-delay: calc(var(--i, 0) * 70ms);
  }

  .js [data-reveal].is-in:where(:not(.product-card, .category-row)) {
    opacity: 1;
    transform: none;
  }

  /*
   * Cards rise, grow and unmask their photo, 80ms apart. Keyframes with a backwards fill, not a
   * transition: once the entrance ends nothing is left on the card, so hover transforms are free.
   */
  .js :is(.product-card, .category-row)[data-reveal]:not(.is-in) {
    opacity: 0;
  }

  .js :is(.product-card, .category-row)[data-reveal].is-in {
    animation: card-in 900ms var(--ease-out) backwards;
    animation-delay: calc(var(--i, 0) * 80ms);
  }

  .js :is(.product-card, .category-row)[data-reveal].is-in .plate {
    animation: plate-unmask 1100ms var(--ease-out) backwards;
    animation-delay: calc(var(--i, 0) * 80ms);
  }

  .js :is(.product-card, .category-row)[data-reveal].is-in .plate img {
    animation: photo-settle 1400ms var(--ease-out) backwards;
    animation-delay: calc(var(--i, 0) * 80ms);
  }

  .category-row:nth-child(2) {
    --i: 1;
  }
  .category-row:nth-child(3) {
    --i: 2;
  }
  .category-row:nth-child(4) {
    --i: 3;
  }

  @keyframes card-in {
    from {
      opacity: 0;
      transform: translateY(56px) scale(0.94);
    }
  }

  @keyframes plate-unmask {
    from {
      clip-path: inset(0 0 100% 0);
    }
    to {
      clip-path: inset(0 0 0 0);
    }
  }

  @keyframes photo-settle {
    from {
      transform: scale(1.3);
    }
  }

  @view-transition {
    navigation: auto;
  }

  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation-duration: 220ms;
    animation-timing-function: var(--ease-out);
  }
}

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

/* ==========================================================================
   Languages: the switch link in the header, and Arabic (right-to-left)
   The page is in English unless <html lang="ar" dir="rtl"> is set by assets/js/lang.js.
   Layout uses logical properties, so most of it mirrors by itself; this block holds the rest.
   ========================================================================== */

.lang-switch {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-inline: var(--s-4);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--forest-900);
  text-decoration: none;
  transition:
    background-color var(--dur-1) var(--ease-out),
    border-color var(--dur-1) var(--ease-out);
}

.lang-switch:hover {
  border-color: var(--leaf-300);
  background: var(--leaf-100);
  color: var(--forest-900);
}

@media (max-width: 575.98px) {
  .lang-switch {
    min-height: 40px;
    padding-inline: var(--s-3);
    font-size: 0.8125rem;
  }
}

/* On an English page the Arabic label uses a system font, so the Arabic web font is not downloaded for one word */
.lang-switch[lang='ar'] {
  font-family: 'Segoe UI', Tahoma, 'Geeza Pro', sans-serif;
}

/* Arabic pages stay hidden until i18n.js has translated them; shown anyway after 2.5s if the script fails */
.i18n-pending body {
  visibility: hidden;
  animation: i18n-show 0s 2.5s forwards;
}

@keyframes i18n-show {
  to {
    visibility: visible;
  }
}

:root[lang='ar'] {
  --lh-tight: 1.35;
  --lh-heading: 1.4;
  --lh-body: 1.9;
  --fs-body: 1.125rem;
  --tracking-label: 0;
}

/* Arabic letters join: spacing them out breaks the words. It has no italic or capitals either. */
:root[lang='ar'] * {
  letter-spacing: 0 !important;
}

:root[lang='ar'] :is(em, .hero__title em) {
  font-style: normal;
}

/* Arabic needs taller lines than the tight Latin display settings */
:root[lang='ar'] :is(h1, h2, h3, h4, .brand__name) {
  line-height: 1.4;
}

:root[lang='ar'] :is(p, li, dt, label, .btn, .nav-link) {
  line-height: 1.9;
}

/* Labels were small tracked capitals; Arabic has neither, so they get a readable size instead */
:root[lang='ar'] :is(.eyebrow, .section-head__label, .hero__badge, .brand__tag, .docs__tag, .pack-card__specs dt) {
  font-size: 0.875rem;
}

/* Latin botanical names keep their own left-to-right order (otherwise the final "L." jumps to the front) */
[dir='rtl'] :is(.product-card__botanical, .product__botanical, .specimen-label__name, .spec-table i, .plate__ph-title) {
  direction: ltr;
  unicode-bidi: isolate;
  text-align: right;
}

/* Arrows point the way the text runs; their hover nudge and tilt mirror with them */
[dir='rtl'] .icon--arrow {
  scale: -1 1;
}

/* Lines that draw from the start edge */
[dir='rtl'] .category-row__name::after,
[dir='rtl'] .hero__tab-fill,
[dir='rtl'] .ab-mv__card::before {
  transform-origin: 100% 50%;
}

/* Mission and vision cards still come in from the outer edges (:root outranks the rule in the About motion block) */
:root[dir='rtl'] .ab-mv__card[data-reveal] {
  --from: 40px;
}

:root[dir='rtl'] .ab-mv__card[data-reveal='right'] {
  --from: -40px;
}

/* ==========================================================================
   Bootstrap theme: Bootstrap's variables and components mapped to the brand
   ========================================================================== */

:root {
  --bs-body-bg: var(--ivory);
  --bs-body-color: var(--ink);
  --bs-body-font-family: var(--font-sans);
  --bs-body-font-size: var(--fs-body);
  --bs-body-line-height: var(--lh-body);
  --bs-heading-color: inherit;
  --bs-border-color: var(--line);
  --bs-border-radius: var(--radius);
  --bs-border-radius-sm: var(--radius);
  --bs-border-radius-lg: var(--radius-lg);
  --bs-primary: #14271b;
  --bs-primary-rgb: 20, 39, 27;
  --bs-focus-ring-color: rgb(168 133 79 / 0.35);
  --bs-form-invalid-color: var(--error);
  --bs-form-invalid-border-color: var(--error);
}

dt {
  font-weight: 400;
}

/* Buttons ---------------------------------------------------------------- */
.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  margin-top: var(--s-6);
}

.btn {
  --bs-btn-padding-x: var(--s-5);
  --bs-btn-padding-y: 0.5rem;
  --bs-btn-font-size: var(--fs-small);
  --bs-btn-font-weight: 600;
  --bs-btn-border-radius: var(--radius-pill);
  --bs-btn-focus-shadow-rgb: 168, 133, 79;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-3);
  min-height: 52px;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.btn .icon {
  transition: transform var(--dur-2) var(--ease-out);
}

.btn:hover .icon--arrow {
  transform: translateX(3px);
}

.btn:active {
  transform: translateY(1px);
}

.btn-primary {
  --bs-btn-color: var(--ivory);
  --bs-btn-bg: var(--forest-900);
  --bs-btn-border-color: var(--forest-900);
  --bs-btn-hover-color: var(--ivory);
  --bs-btn-hover-bg: var(--forest-700);
  --bs-btn-hover-border-color: var(--forest-700);
  --bs-btn-active-color: var(--ivory);
  --bs-btn-active-bg: var(--forest-800);
  --bs-btn-active-border-color: var(--forest-800);
  --bs-btn-disabled-color: var(--ivory);
  --bs-btn-disabled-bg: var(--forest-900);
  --bs-btn-disabled-border-color: var(--forest-900);
}

.btn-outline-dark {
  --bs-btn-color: var(--ink);
  --bs-btn-border-color: var(--line-strong);
  --bs-btn-hover-color: var(--ivory);
  --bs-btn-hover-bg: var(--ink);
  --bs-btn-hover-border-color: var(--ink);
  --bs-btn-active-color: var(--ivory);
  --bs-btn-active-bg: var(--ink);
  --bs-btn-active-border-color: var(--ink);
}

.btn-light {
  --bs-btn-color: var(--forest-900);
  --bs-btn-bg: var(--ivory);
  --bs-btn-border-color: var(--ivory);
  --bs-btn-hover-color: var(--forest-900);
  --bs-btn-hover-bg: var(--sand-100);
  --bs-btn-hover-border-color: var(--sand-100);
  --bs-btn-active-color: var(--forest-900);
  --bs-btn-active-bg: var(--sand-300);
  --bs-btn-active-border-color: var(--sand-300);
}

.btn-outline-light {
  --bs-btn-color: var(--ivory);
  --bs-btn-border-color: rgb(251 250 246 / 0.4);
  --bs-btn-hover-color: var(--forest-900);
  --bs-btn-hover-bg: var(--ivory);
  --bs-btn-hover-border-color: var(--ivory);
  --bs-btn-active-color: var(--forest-900);
  --bs-btn-active-bg: var(--sand-100);
  --bs-btn-active-border-color: var(--sand-100);
}

.btn-sm {
  --bs-btn-padding-x: var(--s-4);
  --bs-btn-font-size: var(--fs-small);
  --bs-btn-border-radius: var(--radius-pill);
  min-height: 44px;
}

.btn-lg {
  --bs-btn-padding-x: var(--s-6);
  --bs-btn-font-size: var(--fs-small);
  --bs-btn-border-radius: var(--radius-pill);
  min-height: 56px;
}

.btn[aria-busy='true'] {
  opacity: 0.6;
  cursor: progress;
}

/* Navbar + offcanvas menu --------------------------------------------------- */
.site-header .navbar {
  --bs-navbar-padding-y: 0;
  --bs-navbar-color: var(--ink-2);
  --bs-navbar-hover-color: var(--ink);
  --bs-navbar-active-color: var(--forest-900);
  --bs-navbar-nav-link-padding-x: var(--s-4);
  --bs-navbar-toggler-padding-x: 0;
  --bs-navbar-toggler-padding-y: 0;
  --bs-navbar-toggler-border-color: transparent;
  --bs-navbar-toggler-focus-width: 0;
  min-height: var(--bar-h);
}

/* The bar keeps its own inset instead of the page gutter; the end inset centres a 44px control */
.site-header .navbar > .container {
  flex-wrap: nowrap;
  gap: var(--s-3);
  max-width: none;
  padding-inline: var(--s-4) calc((var(--bar-h) - 44px) / 2);
}

.navbar-brand.brand {
  padding: 0;
  margin-inline-end: auto;
  font-size: inherit;
}

.navbar-toggler {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--leaf-100);
  color: var(--forest-900);
  transition: background-color var(--dur-1) var(--ease-out);
}

.navbar-toggler:hover {
  background: var(--leaf-300);
}

.offcanvas {
  --bs-offcanvas-bg: var(--ivory);
  --bs-offcanvas-color: var(--ink);
  --bs-offcanvas-width: min(100vw, 26rem);
  --bs-offcanvas-padding-x: var(--gutter);
  --bs-offcanvas-padding-y: var(--s-4);
  --bs-offcanvas-border-width: 0;
}

.offcanvas-header {
  min-height: var(--header-h);
  border-bottom: 1px solid var(--line);
}

.offcanvas .btn-close {
  box-sizing: content-box;
  width: 1.125rem;
  height: 1.125rem;
  padding: 0.9rem;
  margin-inline-end: calc(-1 * 0.9rem);
  opacity: 0.8;
}

.offcanvas-note {
  margin-top: var(--s-5);
  font-size: var(--fs-small);
  color: var(--text-3);
}

/* Below xl: large serif links in the slide-in menu */
@media (max-width: 1199.98px) {
  .site-header .navbar-nav .nav-link {
    display: flex;
    align-items: center;
    min-height: 60px;
    padding-inline: 0;
    border-bottom: 1px solid var(--line);
    font-family: var(--font-serif);
    font-size: clamp(1.75rem, 1.4rem + 1.6vw, 2.25rem);
    color: var(--ink);
  }

  .site-header .navbar-nav .nav-link.active {
    font-style: italic;
    color: var(--forest-700);
  }
}

/* From xl: inline links, each a soft pill; the current page stays filled */
@media (min-width: 1200px) {
  .site-header .navbar-nav {
    gap: 2px;
  }

  .site-header .navbar-nav .nav-link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    border-radius: var(--radius-pill);
    font-size: var(--fs-small);
    font-weight: 500;
    transition:
      color var(--dur-1) var(--ease-out),
      background-color var(--dur-1) var(--ease-out);
  }

  .site-header .navbar-nav .nav-link:hover {
    background: rgb(20 29 22 / 0.05);
  }

  .site-header .navbar-nav .nav-link.active {
    background: var(--leaf-100);
    font-weight: 600;
  }
}

.site-header.is-scrolled .navbar {
  box-shadow: var(--shadow-2);
}

/* Breadcrumb -------------------------------------------------------------- */
.breadcrumb {
  --bs-breadcrumb-font-size: 0.8125rem;
  --bs-breadcrumb-margin-bottom: 0;
  --bs-breadcrumb-divider-color: var(--line-strong);
  --bs-breadcrumb-item-active-color: var(--ink);
  color: var(--text-3);
}

.breadcrumb-item {
  padding-block: var(--s-2);
}

.breadcrumb-item a {
  color: var(--text-3);
  text-decoration: none;
}

.breadcrumb-item a:hover {
  color: var(--text);
  text-decoration: underline;
}

/* Forms --------------------------------------------------------------- */
.form-label {
  margin-bottom: var(--s-2);
  font-size: var(--fs-small);
  font-weight: 600;
}

.form-control,
.form-select {
  min-height: 52px;
  padding: var(--s-3) var(--s-4);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background-color: var(--surface);
  color: var(--text);
  font-size: 1rem;
}

.form-select {
  padding-inline-end: var(--s-7);
}

textarea.form-control {
  min-height: 140px;
}

.form-control::placeholder {
  color: var(--text-3);
  opacity: 0.85;
}

.form-control:hover,
.form-select:hover {
  border-color: var(--ink-2);
}

.form-control:focus,
.form-select:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgb(168 133 79 / 0.35);
}

.form-control.is-invalid,
.form-select.is-invalid {
  border-color: var(--error);
}

.form-text {
  margin-top: var(--s-2);
  font-size: 0.8125rem;
  color: var(--text-3);
}

.invalid-feedback {
  margin-top: var(--s-2);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--error);
}

/* Layout pieces that sit on the Bootstrap grid ------------------------------ */
.section-head {
  margin-bottom: clamp(var(--s-7), 5vw, var(--s-9));
}

.section-head__label {
  display: flex;
  align-items: baseline;
  gap: var(--s-3);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-3);
}

.section-head--stacked {
  margin-bottom: var(--s-6);
}

.section-head--stacked .section-head__label {
  margin-bottom: var(--s-5);
}

.page-header__row {
  margin-top: clamp(var(--s-5), 4vw, var(--s-8));
}

.contact__form-wrap {
  scroll-margin-top: calc(var(--header-h) + var(--s-4));
}

.site-footer__about {
  max-width: 42ch;
}

.product-grid {
  --bs-gutter-x: var(--s-3);
  --bs-gutter-y: var(--s-3);
}

.product-grid > .col,
.cert-grid > .col {
  display: flex;
}

.product-grid .product-card,
.cert-grid .cert-card {
  width: 100%;
}

.pack-grid {
  --bs-gutter-x: var(--s-3);
  --bs-gutter-y: var(--s-3);
}

/* The last card (custom packaging) takes a full row */
.pack-grid > .pack-grid__wide {
  width: 100%;
}

.product-missing {
  padding-block: var(--s-8);
}

.product-missing .page-header__title {
  margin-top: var(--s-5);
}

@media (min-width: 768px) {
  .product-grid {
    --bs-gutter-x: var(--s-5);
    --bs-gutter-y: var(--s-5);
  }

  .pack-grid {
    --bs-gutter-x: var(--s-4);
    --bs-gutter-y: var(--s-4);
  }
}

@media (min-width: 992px) {
  .section-head > .section-head__label {
    align-self: flex-start;
    padding-top: 0.9em;
  }

  .page-header__row .eyebrow {
    padding-top: 1.4em;
  }


  .product__content {
    padding-top: var(--s-4);
  }
}

/* ==========================================================================
   Layout: container, sections, ledger heads, header, mobile menu, footer
   ========================================================================== */

.container {
  width: 100%;
  max-width: calc(var(--container) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section {
  padding-block: var(--section);
}

.section--rule > .container {
  border-top: 1px solid var(--line);
  padding-top: var(--section);
}

.section--rule {
  padding-top: 0;
}

.section--tint {
  background: var(--surface-tint);
}

/* Shorter bands for pages made of small cards (packaging) */
.section--compact {
  padding-block: clamp(2.5rem, 1.5rem + 4vw, 4.5rem);
}

.section--compact .section-head {
  margin-bottom: var(--s-6);
}

.section--compact .section-head__title {
  font-size: clamp(1.75rem, 1.4rem + 1.5vw, 2.5rem);
}

.section--compact .section-head__lead {
  margin-top: var(--s-3);
  font-size: var(--fs-body);
}

.section--dark {
  margin-inline: clamp(var(--s-2), 1.5vw, var(--s-5));
  border-radius: var(--radius-xl);
  background:
    radial-gradient(48rem 28rem at 100% 0%, rgb(210 179 124 / 0.14), transparent 62%),
    var(--forest-900);
  color: var(--ivory);
  --line: rgb(251 250 246 / 0.16);
  --text-2: rgb(251 250 246 / 0.78);
  --text-3: var(--leaf-300);
  --accent: var(--gold-300);
}

.section--dark h2 em {
  color: var(--gold-300);
}

/* Ledger section head: label column + main column */

.section-head__index {
  font-variant-numeric: tabular-nums;
  color: var(--accent);
}

.section-head__title {
  font-size: var(--fs-h2);
  max-width: 18ch;
}

.section-head__lead {
  margin-top: var(--s-5);
  max-width: 52ch;
  font-size: var(--fs-lead);
  color: var(--text-2);
}

.section-head--inline {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
  gap: var(--s-4);
  margin-bottom: var(--s-7);
}

.section-head--inline .section-head__title {
  font-size: var(--fs-h3);
  max-width: none;
}

/* Eyebrow: tracked caps led by a gold rule, the motif around "For Export" on the logo */
.eyebrow {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-3);
}

.eyebrow::before {
  content: '';
  flex: none;
  width: 2rem;
  height: 1px;
  background: var(--gold-500);
}

.eyebrow a {
  text-decoration: none;
}

.eyebrow a:hover {
  color: var(--text);
}

.caption {
  margin-top: var(--s-3);
  font-size: var(--fs-small);
  color: var(--text-3);
}

.note {
  margin-top: var(--s-4);
  font-size: var(--fs-small);
  color: var(--text-3);
  max-width: var(--measure);
}

/* Two-column text + media */

/* --------------------------------------------------------------------------
   Page header (inner pages)
   -------------------------------------------------------------------------- */
.page-header {
  margin-top: calc(-1 * var(--header-h));
  padding-block: calc(var(--header-h) + clamp(var(--s-5), 3vw, var(--s-7))) clamp(var(--s-7), 6vw, var(--s-9));
  border-radius: 0 0 var(--radius-xl) var(--radius-xl);
  background:
    radial-gradient(52rem 30rem at 92% 0%, rgb(210 179 124 / 0.2), transparent 60%),
    radial-gradient(36rem 24rem at 0% 100%, rgb(74 106 44 / 0.32), transparent 65%),
    var(--forest-900);
  color: var(--ivory);
  --text: var(--ivory);
  --text-2: rgb(251 250 246 / 0.8);
  --text-3: var(--leaf-300);
  --line-strong: rgb(251 250 246 / 0.32);
  --focus: var(--gold-300);
}

.page-header .breadcrumb {
  --bs-breadcrumb-item-active-color: var(--ivory);
}

.page-header .page-header__title em {
  color: var(--gold-300);
}

.page-header .eyebrow::before {
  background: var(--gold-300);
}

.page-header__title {
  font-size: var(--fs-h1);
  line-height: var(--lh-tight);
  max-width: 16ch;
}

.page-header__lead {
  margin-top: var(--s-5);
  max-width: 56ch;
  font-size: var(--fs-lead);
  color: var(--text-2);
}

/* --------------------------------------------------------------------------
   Header & navigation
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  padding: var(--header-gap) var(--gutter) 0;
  /* Only the bar takes clicks; the page shows through around it. */
  pointer-events: none;
}

/* The floating bar. No backdrop-filter or transform: either would become the containing block for the fixed mobile menu. */
.site-header .navbar {
  max-width: var(--container);
  margin-inline: auto;
  border: 1px solid rgb(20 29 22 / 0.08);
  border-radius: var(--radius-pill);
  background: rgb(255 255 255 / 0.97);
  box-shadow: var(--shadow-1);
  pointer-events: auto;
  transition: box-shadow var(--dur-2) var(--ease-out);
}

/* Brand lockup: logo emblem + name over the "For Export" line, as on the logo */
.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  margin-inline-end: auto;
  text-decoration: none;
  white-space: nowrap;
  min-height: 44px;
}

.brand__mark {
  flex: none;
  width: auto;
  height: calc(var(--bar-h) - 1.25rem);
  /* The logo artwork has a white ground; multiply lets it sit on the white bar. */
  mix-blend-mode: multiply;
}

.brand__text {
  display: grid;
  gap: 5px;
}

.brand__name {
  font-family: var(--font-serif);
  font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  line-height: 1;
  letter-spacing: 0.01em;
  color: var(--forest-900);
}

.brand__tag {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  font-size: 0.625rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold-700);
}

/* Gold rule after the tag, echoing the rules around "For Export" on the logo */
.brand__tag::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--gold-500);
  opacity: 0.6;
}

/* Mobile menu sheet */

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
/* An inset forest panel: brand and about, two link columns and the contact details, then one line of copyright */
.site-footer {
  padding: 0 clamp(var(--s-2), 1.5vw, var(--s-5)) clamp(var(--s-2), 1.5vw, var(--s-5));
  font-size: var(--fs-small);
}

.site-footer__panel {
  max-width: calc(var(--container) + 2 * var(--s-6));
  margin-inline: auto;
  padding: var(--s-7) clamp(var(--s-4), 3vw, var(--s-6)) var(--s-4);
  border-radius: var(--radius-xl);
  background:
    radial-gradient(44rem 20rem at 100% 0%, rgb(210 179 124 / 0.14), transparent 65%),
    var(--forest-950);
  color: rgb(251 250 246 / 0.82);
  --line: rgb(251 250 246 / 0.14);
  --focus: var(--gold-300);
}

.site-footer a {
  text-decoration: none;
}

.site-footer ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-footer__grid {
  display: grid;
  gap: var(--s-6) var(--s-5);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.site-footer__col--brand,
.site-footer__col:last-child {
  grid-column: 1 / -1;
}

@media (min-width: 768px) {
  .site-footer__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .site-footer__col:last-child {
    grid-column: auto;
  }
}

@media (min-width: 1200px) {
  .site-footer__grid {
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 0.8fr) minmax(0, 0.8fr) minmax(0, 1.2fr);
    gap: var(--s-7);
  }
  .site-footer__col--brand {
    grid-column: auto;
  }
}

.site-footer__brand {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  color: var(--ivory);
}

/* The emblem has a white ground, so it sits on a white tile */
.site-footer__mark {
  flex: none;
  display: grid;
  place-items: center;
  width: 4.5rem;
  height: 3.125rem;
  padding: var(--s-1);
  border-radius: 10px;
  background: #fff;
}

.site-footer__mark img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.site-footer__brand-text {
  display: grid;
  gap: 6px;
}

.site-footer__name {
  font-family: var(--font-serif);
  font-size: 1.75rem;
  line-height: 1;
}

.site-footer__tag {
  font-size: 0.625rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold-300);
}

.site-footer__about {
  max-width: 42ch;
  margin-top: var(--s-4);
  line-height: 1.6;
}

.site-footer .social {
  display: flex;
  gap: var(--s-2);
  margin-top: var(--s-5);
}

.social a {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--ivory);
  transition:
    background-color var(--dur-1) var(--ease-out),
    border-color var(--dur-1) var(--ease-out),
    color var(--dur-1) var(--ease-out);
}

.social a:hover {
  border-color: var(--gold-300);
  background: var(--gold-300);
  color: var(--forest-950);
}

.site-footer__h {
  margin-bottom: var(--s-3);
  font-family: var(--font-sans);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--leaf-300);
}

.site-footer__links a {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  transition: color var(--dur-1) var(--ease-out);
}

.site-footer__links a:hover {
  color: var(--gold-300);
}

.site-footer__contact {
  display: grid;
  gap: var(--s-1);
}

.site-footer__contact li {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  min-height: 32px;
  overflow-wrap: anywhere;
}

.site-footer__contact .icon {
  flex: none;
  color: var(--gold-300);
}

.site-footer__contact a:hover {
  color: var(--ivory);
  text-decoration: underline;
}

.site-footer__cta {
  margin-top: var(--s-4);
}

.site-footer .is-placeholder {
  color: var(--leaf-300);
}

.site-footer__bottom {
  margin-top: var(--s-6);
  padding-top: var(--s-4);
  border-top: 1px solid var(--line);
  font-size: 0.875rem;
  color: var(--leaf-300);
}

/* ==========================================================================
   Components
   ========================================================================== */

/* Buttons ---------------------------------------------------------------- */

/* Text link with arrow ------------------------------------------------------ */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  min-height: 44px;
  font-size: var(--fs-small);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

.link-arrow span {
  text-decoration: underline;
  text-decoration-color: var(--line-strong);
  text-underline-offset: 0.35em;
  transition: text-decoration-color var(--dur-1) var(--ease-out);
}

.link-arrow .icon {
  transition: transform var(--dur-2) var(--ease-out);
}

.link-arrow:hover span {
  text-decoration-color: currentColor;
}

.link-arrow:hover .icon--arrow {
  transform: translateX(3px);
}

.link-arrow.is-disabled {
  color: var(--text-3);
  cursor: not-allowed;
}

.link-arrow--light {
  color: var(--ivory);
}

/* Plate: matted media ------------------------------------------------------ */
.plate {
  position: relative;
  overflow: hidden;
  aspect-ratio: var(--ratio, 4 / 5);
  border-radius: var(--radius-lg);
  background: var(--surface-tint);
}

.plate img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur-image) var(--ease-out);
}

/* Wide photos shot on white: show the whole subject instead of cropping it */
.plate--contain {
  background: #fff;
}

.plate--contain img {
  object-fit: contain;
  padding: 6%;
}

.plate--empty {
  display: grid;
  place-content: center;
  gap: var(--s-2);
  padding: var(--s-5);
  text-align: center;
  background: var(--leaf-100);
  outline: 1px solid rgb(20 29 22 / 0.08);
  outline-offset: calc(-1 * var(--s-3));
}

.plate__ph-title {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(1.125rem, 1rem + 0.6vw, 1.5rem);
  line-height: 1.2;
  color: var(--forest-700);
}

.plate__ph-note {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-3);
}

/* Specimen label (herbarium-style caption) --------------------------------- */
.specimen-label {
  display: grid;
  gap: 2px;
  padding: var(--s-4) var(--s-5);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-size: var(--fs-small);
}

.specimen-label__no {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--accent);
}

.specimen-label__name {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.375rem;
  line-height: 1.2;
}

.specimen-label__meta {
  color: var(--text-3);
}

.specimen-label--static {
  margin-top: var(--s-3);
}

/* Product card & grid ------------------------------------------------------ */

.product-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: var(--s-2);
  border-radius: calc(var(--radius-lg) + var(--s-2));
  background: var(--surface);
  box-shadow:
    0 0 0 1px var(--line),
    var(--shadow-1);
  transition:
    transform var(--dur-2) var(--ease-out),
    box-shadow var(--dur-2) var(--ease-out);
}

.product-card[hidden] {
  display: none;
}

/* Photo with the category chip and the arrow button on top */
.product-card__media {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
}

.product-card__chip,
.product-card__go {
  position: absolute;
  z-index: 1;
  display: grid;
  place-items: center;
  background: rgb(251 250 246 / 0.92);
  color: var(--forest-900);
}

.product-card__chip {
  inset-inline-start: var(--s-3);
  top: var(--s-3);
  min-height: 28px;
  padding-inline: var(--s-3);
  border-radius: var(--radius-pill);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.product-card__go {
  inset-inline-end: var(--s-3);
  bottom: var(--s-3);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  box-shadow: var(--shadow-1);
  transition:
    opacity var(--dur-2) var(--ease-out),
    transform var(--dur-2) var(--ease-out),
    background-color var(--dur-2) var(--ease-out);
}

.product-card__go .icon {
  transition: transform var(--dur-2) var(--ease-out);
}

.product-card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: var(--s-2);
  padding: var(--s-4) var(--s-3) var(--s-3);
}

.product-card__title {
  font-size: clamp(1.375rem, 1.2rem + 0.6vw, 1.75rem);
  line-height: 1.1;
}

.product-card__title a {
  text-decoration: none;
}

/* Whole card is clickable via the heading link */
.product-card__title a::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
}

.product-card__title a:focus-visible {
  outline: none;
}

.product-card:has(.product-card__title a:focus-visible) {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
}

.product-card__botanical {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1rem;
  line-height: 1.2;
  color: var(--forest-700);
}

.product-card__summary {
  font-size: var(--fs-small);
  line-height: 1.55;
  color: var(--text-2);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Press feedback on every device */
.product-card:active {
  transform: scale(0.98);
}

/* Pointer devices: the arrow waits off its mark and arrives on hover */
@media (hover: hover) and (pointer: fine) {
  .product-card__go {
    opacity: 0;
    transform: translate(10px, 10px) scale(0.9);
  }
  .product-card:hover {
    transform: translateY(-8px);
    box-shadow:
      0 0 0 1px var(--line),
      var(--shadow-2);
  }
  .product-card:hover .plate img {
    transform: scale(1.08);
  }
  .product-card:hover .product-card__go,
  .product-card:has(.product-card__title a:focus-visible) .product-card__go {
    opacity: 1;
    transform: none;
    background: var(--gold-300);
  }
  .product-card:hover .product-card__go .icon {
    transform: rotate(-45deg);
  }
}

@media (max-width: 479px) {
  .product-card__body {
    padding-inline: var(--s-2);
  }
  .product-card__summary {
    -webkit-line-clamp: 2;
    font-size: 0.875rem;
  }
  .product-card__chip {
    inset-inline-start: var(--s-2);
    top: var(--s-2);
  }
  .product-card__go {
    inset-inline-end: var(--s-2);
    bottom: var(--s-2);
    width: 36px;
    height: 36px;
  }
}

/* Category cards ------------------------------------------------------------ */
/* The photo is the card: text sits on a forest scrim at its foot. */
.category-list {
  display: grid;
  gap: var(--s-4);
}

.category-row {
  display: flex;
}

.category-row__link {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  width: 100%;
  aspect-ratio: 4 / 3;
  padding: var(--s-5);
  border-radius: calc(var(--radius-lg) + var(--s-2));
  background: var(--forest-900);
  color: var(--ivory);
  text-decoration: none;
  transition: transform var(--dur-1) var(--ease-out);
}

.category-row__link:active {
  transform: scale(0.98);
}

.category-row__link .category-row__plate {
  position: absolute;
  inset: 0;
  z-index: -2;
  aspect-ratio: auto;
  border-radius: 0;
}

/* A photo shot on a light ground: toned down so the white title above it stays readable */
.category-row__plate--light img {
  filter: brightness(0.62) saturate(1.1);
}

/* Scrim, plus a second layer that fades in on hover to deepen it */
.category-row__link::before,
.category-row__link::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
}

.category-row__link::before {
  background: linear-gradient(to top, rgb(11 26 18 / 0.94) 0%, rgb(11 26 18 / 0.62) 40%, rgb(11 26 18 / 0) 72%);
}

.category-row__link::after {
  background: rgb(11 26 18 / 0.28);
  opacity: 0;
  transition: opacity var(--dur-2) var(--ease-out);
}

/* Index chip and arrow button sit on the photo */
.category-row__index,
.category-row__go {
  position: absolute;
  top: var(--s-4);
  display: grid;
  place-items: center;
}

.category-row__index {
  inset-inline-start: var(--s-4);
  min-height: 28px;
  padding-inline: var(--s-3);
  border: 1px solid rgb(251 250 246 / 0.18);
  border-radius: var(--radius-pill);
  background: rgb(11 26 18 / 0.5);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  font-size: 0.75rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.category-row__go {
  inset-inline-end: var(--s-4);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--ivory);
  color: var(--forest-900);
  transition: background-color var(--dur-2) var(--ease-out);
}

.category-row__go .icon {
  transition: transform var(--dur-2) var(--ease-out);
}

.category-row__text {
  display: grid;
  gap: var(--s-2);
}

/* A gold rule draws in under the name on hover */
.category-row__name {
  position: relative;
  justify-self: start;
  padding-bottom: var(--s-2);
  font-family: var(--font-serif);
  font-size: clamp(1.75rem, 1.5rem + 1vw, 2.25rem);
  line-height: 1.05;
}

.category-row__name::after {
  content: '';
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 2px;
  background: var(--gold-300);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-2) var(--ease-out);
}

.category-row__summary {
  font-size: var(--fs-small);
  line-height: 1.5;
  color: rgb(251 250 246 / 0.84);
}

.category-row__count {
  margin-top: var(--s-3);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
  color: var(--gold-300);
}

.category-row__link:focus-visible {
  outline-offset: 3px;
}

@media (min-width: 480px) {
  .category-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .category-row__link {
    aspect-ratio: 4 / 5;
  }
}

@media (min-width: 768px) {
  .category-list {
    gap: var(--s-5);
  }
  .category-row__link {
    aspect-ratio: 4 / 3;
  }
}

@media (min-width: 1200px) {
  .category-list {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--s-4);
  }
  .category-row__link {
    aspect-ratio: 3 / 4;
  }
}

@media (hover: hover) and (pointer: fine) {
  .category-row__link:hover .plate img {
    transform: scale(1.1);
  }
  .category-row__link:hover::after {
    opacity: 1;
  }
  .category-row__link:hover .category-row__name::after {
    transform: scaleX(1);
  }
  .category-row__link:hover .category-row__go {
    background: var(--gold-300);
  }
  .category-row__link:hover .category-row__go .icon {
    transform: rotate(-45deg);
  }
}

/* Certification card -------------------------------------------------------- */

.cert-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-1);
}

.cert-card__seal {
  display: grid;
  place-items: center;
  align-content: center;
  gap: var(--s-3);
  aspect-ratio: 4 / 3;
  background: var(--surface-tint);
  color: var(--leaf-600);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

/* Certification marks come on white, so their panel is white too */
.cert-card__seal--logo {
  position: relative;
  border-bottom: 1px solid var(--line);
  background: #fff;
}

/* Out of flow, so a tall mark cannot stretch the panel past its 4:3 shape */
.cert-card__seal--logo img {
  position: absolute;
  inset: 0;
}

.cert-card__seal img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: var(--s-5);
}

.cert-card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: var(--s-2);
  padding: var(--s-5);
}

.cert-card__title {
  font-size: var(--fs-h3);
}

.cert-card__issuer {
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--accent);
}

.cert-card__text {
  font-size: var(--fs-small);
  color: var(--text-2);
  margin-bottom: auto;
  padding-bottom: var(--s-3);
}

.cert-grid--compact .cert-card__text {
  display: none;
}

.notice {
  margin-bottom: var(--s-6);
  padding: var(--s-3) var(--s-4);
  border: 1px solid;
  border-radius: var(--radius);
  font-size: var(--fs-small);
  color: var(--text-2);
  max-width: max-content;
}

/* Packaging card --------------------------------------------------------- */
/* A small white card: photo inset at the top with the index as a badge on it, then title, a short text and the specs as a two-column grid. */

.pack-card {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: var(--s-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-1);
  scroll-margin-top: calc(var(--header-h) + var(--s-5));
}

.pack-card__plate {
  flex: none;
  border-radius: var(--radius);
}

.pack-card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: var(--s-4) var(--s-3) var(--s-3);
}

.pack-card__index {
  position: absolute;
  top: var(--s-4);
  inset-inline-start: var(--s-4);
  padding: 2px var(--s-3);
  border-radius: var(--radius-pill);
  background: var(--paper);
  font-size: 0.75rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--accent);
  box-shadow: var(--shadow-1);
}

.pack-card__title {
  font-size: 1.375rem;
}

.pack-card__text {
  margin-top: var(--s-2);
  margin-bottom: auto;
  max-width: 56ch;
  font-size: var(--fs-small);
  color: var(--text-2);
}

.pack-card__specs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-3) var(--s-4);
  margin: var(--s-4) 0 0;
  padding-top: var(--s-3);
  border-top: 1px solid var(--line);
  font-size: 0.8125rem;
}

.pack-card__specs div {
  display: grid;
  align-content: start;
  gap: 2px;
}

.pack-card__specs dt {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-3);
}

.pack-card__specs dd {
  margin: 0;
}

/* Wide variant: photo beside the text from md */
@media (min-width: 768px) {
  .pack-card--wide {
    flex-direction: row;
    align-items: stretch;
    background: var(--dawn);
  }
  .pack-card--wide .pack-card__plate {
    width: 32%;
    aspect-ratio: auto;
    min-height: 11rem;
  }
  .pack-card--wide .pack-card__body {
    justify-content: center;
    padding: var(--s-4) var(--s-6);
  }
  .pack-card--wide .pack-card__title {
    font-size: var(--fs-h3);
  }
  .pack-card--wide .pack-card__text {
    margin-bottom: 0;
  }
}

/* Specification table ------------------------------------------------------ */
.spec-table {
  border-top: 1px solid var(--line-strong);
}

.spec-table__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-1);
  padding-block: var(--s-3);
  border-bottom: 1px solid var(--line);
}

.spec-table dt {
  font-size: var(--fs-small);
  color: var(--text-3);
}

.spec-table dd {
  font-size: var(--fs-body);
}

.spec-table dd i {
  font-family: var(--font-serif);
  font-size: 1.125rem;
}

@media (min-width: 480px) {
  .spec-table__row {
    grid-template-columns: minmax(0, 11rem) minmax(0, 1fr);
    gap: var(--s-5);
    align-items: baseline;
  }
}

/* Breadcrumb -------------------------------------------------------------- */

/* Contact list ------------------------------------------------------------- */
.contact-list {
  display: grid;
  gap: var(--s-3);
}

.contact-list li {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: var(--s-3);
  align-items: start;
  overflow-wrap: anywhere;
}

.contact-list .icon {
  margin-top: 0.2em;
  color: var(--accent);
}

/* CTA band --------------------------------------------------------------- */
/* The quote call on inner pages: an inset forest panel with no photo; copy on one side, the two buttons on the other. */
.cta-band {
  padding-block: clamp(2.5rem, 1.5rem + 4vw, 4.5rem) clamp(3rem, 2rem + 5vw, 6rem);
}

/* After a plain section its own bottom padding is already the gap */
.section:not(.section--tint) + .cta-band {
  padding-top: 0;
}

.cta-band__panel {
  display: grid;
  gap: var(--s-2);
  padding: clamp(var(--s-6), 5vw, var(--s-8));
  border-radius: var(--radius-xl);
  background:
    radial-gradient(40rem 24rem at 100% 0%, rgb(210 179 124 / 0.22), transparent 62%),
    radial-gradient(30rem 20rem at 0% 100%, rgb(74 106 44 / 0.34), transparent 65%),
    var(--forest-900);
  color: var(--ivory);
  --line: rgb(251 250 246 / 0.22);
  --text-2: rgb(251 250 246 / 0.84);
  --text-3: var(--leaf-300);
  --focus: var(--gold-300);
}

.cta-band .eyebrow::before {
  background: var(--gold-300);
}

.cta-band__title {
  margin-top: var(--s-3);
  font-size: var(--fs-h2);
  max-width: 18ch;
  text-wrap: balance;
}

.cta-band__panel > p:not(.eyebrow) {
  margin-top: var(--s-3);
  max-width: 52ch;
  color: var(--text-2);
}

@media (max-width: 479px) {
  .cta-band .btn-row .btn {
    flex: 1 1 100%;
  }
}

/* Wide screens: buttons sit beside the copy, centred on its height */
@media (min-width: 992px) {
  .cta-band__panel {
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: var(--s-7);
  }
  .cta-band__panel > :not(.btn-row) {
    grid-column: 1;
  }
  .cta-band .btn-row {
    grid-column: 2;
    grid-row: 1 / span 3;
    align-self: center;
    margin-top: 0;
  }
}

/* Floating WhatsApp -------------------------------------------------------- */
.wa-float {
  position: fixed;
  inset-inline-end: max(var(--s-4), env(safe-area-inset-right));
  bottom: max(var(--s-4), env(safe-area-inset-bottom));
  z-index: 40;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--forest-900);
  color: var(--ivory);
  box-shadow: 0 8px 24px -8px rgb(11 26 18 / 0.45);
  transition:
    transform var(--dur-2) var(--ease-out),
    background-color var(--dur-1) var(--ease-out);
}

.wa-float:hover {
  background: var(--forest-700);
  transform: translateY(-2px);
}

/* Filters & search ---------------------------------------------------------- */
.filters {
  display: flex;
  gap: var(--s-2);
  overflow-x: auto;
  scrollbar-width: none;
  scroll-snap-type: x proximity;
  margin-inline: calc(-1 * var(--gutter));
  padding-inline: var(--gutter);
  padding-block: 2px;
}

.filters::-webkit-scrollbar {
  display: none;
}

.filter {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  min-height: 44px;
  padding-inline: var(--s-4);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill);
  background: transparent;
  font-size: var(--fs-small);
  font-weight: 500;
  scroll-snap-align: start;
  transition:
    background-color var(--dur-1) var(--ease-out),
    color var(--dur-1) var(--ease-out),
    border-color var(--dur-1) var(--ease-out);
}

.filter:hover {
  border-color: var(--text);
}

.filter[aria-pressed='true'] {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--on-primary);
}

.filter__count {
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
  opacity: 0.72;
}

.search {
  position: relative;
  display: flex;
  align-items: center;
}

.search .icon {
  position: absolute;
  inset-inline-start: 0;
  color: var(--text-3);
  pointer-events: none;
}

.search__input {
  width: 100%;
  min-height: 48px;
  padding-inline: calc(18px + var(--s-3)) 0;
  border: 0;
  border-bottom: 1px solid var(--line-strong);
  border-radius: 0;
  background: transparent;
  font-size: 1rem;
  -webkit-appearance: none;
  appearance: none;
}

.search__input::placeholder {
  color: var(--text-3);
}

.search__input:focus {
  outline: none;
  border-bottom-color: var(--primary);
  box-shadow: 0 1px 0 0 var(--primary);
}

.search__input:focus-visible {
  outline: none;
}

.search:focus-within .icon {
  color: var(--text);
}

/* Forms --------------------------------------------------------------- */

.field__req {
  color: var(--error);
}

.field__opt {
  font-weight: 400;
  color: var(--text-3);
}

.hp {
  position: absolute;
  inset-inline-start: -9999px;
}

.form-status {
  margin-top: var(--s-5);
  padding: var(--s-4) var(--s-5);
  border: 1px solid var(--line);
  border-inline-start: 3px solid var(--primary);
  border-radius: var(--radius);
  background: var(--surface);
}

.form-status[data-state='error'] {
  border-inline-start-color: var(--error);
}

.form-status h3 {
  font-size: 1.375rem;
}

.form-status p {
  margin-top: var(--s-1);
  font-size: var(--fs-small);
  color: var(--text-2);
}

.form-status:focus {
  outline: none;
}

/* Compact certification cards become rows on small screens */
@media (max-width: 599px) {
  .cert-grid--compact {
    gap: var(--s-3);
  }
  .cert-grid--compact .cert-card {
    flex-direction: row;
  }
  .cert-grid--compact .cert-card__seal {
    flex: none;
    width: 96px;
    aspect-ratio: auto;
  }
  .cert-grid--compact .cert-card__seal span {
    display: none;
  }
  .cert-grid--compact .cert-card__body {
    padding: var(--s-4);
  }
}

/* ==========================================================================
   Page compositions
   ========================================================================== */

/* Home: hero --------------------------------------------------------------- */
/* A full-viewport frame (100vw × 100vh) behind the floating bar with three full-bleed photos that cross-fade every 4 seconds. The first carries the logo in its upper half, so the copy and controls stay low, on a scrim that only covers the foot. */
.hero {
  --hero-slide: 4000ms; /* time each photo stays; the active tab's progress bar is the timer */
  position: relative;
  isolation: isolate;
  overflow: clip;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 100vh; /* grows only if the copy needs more room than the screen */
  margin-top: calc(-1 * var(--header-h));
  padding-block: calc(var(--header-h) + var(--s-6)) clamp(var(--s-4), 2.5vw, var(--s-6));
  background: var(--forest-900);
  color: var(--ivory);
  --line: rgb(251 250 246 / 0.22);
  --text-2: rgb(251 250 246 / 0.86);
  --text-3: var(--leaf-300);
  --accent: var(--gold-300);
  --focus: var(--gold-300);
}

.hero__slides {
  position: absolute;
  inset: 0;
  z-index: -2;
  overflow: clip;
}

.hero__slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
}

/* Where each photo keeps its subject when the frame crops it */
.hero__slide--logo {
  object-position: center 20%; /* crop the foot, not the logo */
}

.hero__slide--flowers {
  object-position: center 58%;
}

.hero__slide.is-active {
  opacity: 1;
}

/* Scrim: only the foot, where the copy sits; the logo in the photo stays clear */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to top, rgb(11 26 18 / 0.96) 0%, rgb(11 26 18 / 0.9) 30%, rgb(11 26 18 / 0.55) 46%, rgb(11 26 18 / 0) 62%);
}

.hero__badge {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  min-height: 36px;
  padding: var(--s-1) var(--s-4);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: rgb(11 26 18 / 0.5);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.hero__badge::before {
  content: '';
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--gold-300);
  box-shadow: 0 0 0 4px rgb(210 179 124 / 0.22);
}

.hero__title {
  margin-top: var(--s-5);
  font-size: clamp(2.25rem, 1.4rem + 2.6vw, 3.75rem); /* modest: the photo already carries the brand */
  line-height: 1.02;
  letter-spacing: -0.025em;
  text-wrap: balance;
}

.hero__title em {
  color: var(--gold-300);
}

.hero__lead {
  margin-top: var(--s-4);
  max-width: 62ch;
  color: var(--text-2);
}

.hero .btn-row {
  margin-top: 0;
  margin-bottom: var(--s-5);
}

.hero__stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-3);
  margin: 0;
  padding-top: var(--s-4);
  border-top: 1px solid var(--line);
}

.hero__stats div {
  display: flex;
  flex-direction: column-reverse;
  justify-content: flex-end;
  gap: var(--s-2);
}

.hero__stats div + div {
  padding-inline-start: var(--s-3);
  border-inline-start: 1px solid var(--line);
}

.hero__stats dd {
  margin: 0;
  font-family: var(--font-serif);
  font-size: clamp(2rem, 1.7rem + 1.2vw, 2.75rem);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.hero__stats dt {
  font-size: 0.8125rem;
  font-weight: 400;
  line-height: 1.35;
  color: var(--text-3);
}

/* Slide controls: one tab per photo with a progress line, and a pause button */
.hero__controls {
  display: flex;
  align-items: flex-end;
  gap: var(--s-4);
  margin-top: clamp(var(--s-6), 4vw, var(--s-7));
}

.hero__tabs {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.hero__tab {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s-2);
  width: 100%;
  min-height: 48px;
  padding: 0 0 var(--s-2);
  border: 0;
  background: none;
  color: var(--text-2);
  text-align: start;
  cursor: pointer;
  transition: color var(--dur-1) var(--ease-out);
}

.hero__tab:hover,
.hero__tab.is-active {
  color: var(--ivory);
}

.hero__tab-track {
  flex: 0 0 100%;
  height: 2px;
  margin-bottom: var(--s-2);
  border-radius: 2px;
  background: var(--line);
  overflow: hidden;
}

.hero__tab-fill {
  display: block;
  height: 100%;
  background: var(--gold-300);
  transform: scaleX(0);
  transform-origin: 0 50%;
}

.hero__tab.is-active .hero__tab-fill {
  transform: none;
}

.hero__tab-num {
  font-size: 0.75rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--accent);
}

.hero__tab-name {
  font-family: var(--font-serif);
  font-size: clamp(1.125rem, 1rem + 0.6vw, 1.5rem);
  line-height: 1.1;
}

.hero__toggle {
  order: -1; /* leads the row, clear of the floating WhatsApp button in the corner */
  flex: none;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: rgb(11 26 18 / 0.5);
  color: var(--ivory);
  cursor: pointer;
  transition:
    background-color var(--dur-1) var(--ease-out),
    color var(--dur-1) var(--ease-out);
}

.hero__toggle[hidden] {
  display: none;
}

.hero__toggle:hover {
  background: var(--ivory);
  color: var(--forest-900);
}

.hero__toggle-play,
.hero.is-paused .hero__toggle-pause {
  display: none;
}

.hero.is-paused .hero__toggle-play {
  display: block;
}

@media (max-width: 479px) {
  .hero .btn-row .btn {
    flex: 1 1 100%;
  }
  .hero__badge {
    font-size: 0.6875rem;
    letter-spacing: 0.08em;
  }
}

/* Small screens: a 16:9 banner cannot fill a tall screen without losing the logo, so the photo sits whole under the bar and the copy follows on forest */
@media (max-width: 991.98px) {
  .hero {
    --hero-photo: calc(100vw * 941 / 1672);
    min-height: 0;
    padding-top: calc(var(--header-h) + var(--s-2) + var(--hero-photo) + var(--s-5));
  }
  .hero__slides,
  .hero::before {
    inset: calc(var(--header-h) + var(--s-2)) 0 auto;
    height: var(--hero-photo);
  }
  .hero::before {
    background: linear-gradient(to top, rgb(20 39 27 / 1) 0%, rgb(20 39 27 / 0) 22%);
  }
  .hero__slide--logo {
    object-position: center;
  }
}

/* Motion: cross-fade, the progress line as timer, and one entrance on load.
   With reduced motion the photos do not rotate by themselves; the tabs still switch them. */
@media (prefers-reduced-motion: no-preference) {
  .hero__slide {
    transition: opacity 1200ms ease;
  }

  .hero__tab.is-active .hero__tab-fill {
    animation: hero-progress var(--hero-slide) linear both;
  }
  .hero.is-paused .hero__tab-fill,
  .hero__controls:hover .hero__tab-fill,
  .hero__controls:focus-within .hero__tab-fill {
    animation-play-state: paused;
  }

  .hero__copy > *,
  .hero__side .btn-row,
  .hero__stats,
  .hero__controls {
    animation: hero-rise 700ms var(--ease-out) both;
    animation-delay: calc(var(--i, 0) * 90ms);
  }
  .hero__copy > :nth-child(2) {
    --i: 1;
  }
  .hero__copy > :nth-child(3) {
    --i: 2;
  }
  .hero__side .btn-row {
    --i: 3;
  }
  .hero__stats {
    --i: 4;
  }
  .hero__controls {
    --i: 5;
  }

  @keyframes hero-progress {
    from {
      transform: scaleX(0);
    }
    to {
      transform: none;
    }
  }

  @keyframes hero-rise {
    from {
      opacity: 0;
      transform: translateY(16px);
    }
  }
}

/* Home: company story --------------------------------------------------------- */
/* A compact band: three capsule photos stepping down like a staircase with a round forest seal, copy beside them, then the supply chain as a timeline. */

.story {
  padding-block: clamp(3rem, 2rem + 4vw, 5.5rem);
}

.story__media {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-3);
  max-width: 30rem;
  padding-block: var(--s-5); /* room for the first and last capsule to step out */
}

.story__photo {
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-1);
}

.story__photo:nth-child(1) {
  translate: 0 calc(-1 * var(--s-5));
}

.story__photo:nth-child(3) {
  translate: 0 var(--s-5);
}

.story__seal {
  position: absolute;
  inset-inline-start: calc(-1 * var(--s-2));
  bottom: 0;
  display: grid;
  place-content: center;
  width: 6.75rem;
  height: 6.75rem;
  padding: var(--s-2);
  border: 4px solid var(--ivory);
  border-radius: 50%;
  background: var(--forest-900);
  color: rgb(251 250 246 / 0.86);
  font-size: 0.6875rem;
  font-weight: 600;
  line-height: 1.3;
  text-align: center;
}

.story__seal strong {
  display: block;
  font-family: var(--font-serif);
  font-size: 2rem;
  font-weight: 400;
  line-height: 1;
  color: var(--gold-300);
}

.story__copy .section-head__label {
  margin-bottom: var(--s-5);
}

.story__title {
  font-size: clamp(1.75rem, 1.4rem + 1.5vw, 2.5rem);
  max-width: 22ch;
  margin-bottom: var(--s-5);
}

.story__copy > p:not(.section-head__label) {
  max-width: 56ch;
  color: var(--text-2);
  margin-bottom: var(--s-4);
}

/* Timeline: a white panel with five numbered stops joined by a line. The stops run down the left edge on
   small screens; from md they sit in a centred row and the line runs from the middle of one stop to the next. */
.chain {
  --chain-dot: 3rem;
  --chain-gap: var(--s-5);
  margin-top: clamp(var(--s-6), 4vw, var(--s-7));
  padding: clamp(var(--s-5), 3.5vw, var(--s-7));
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  background: var(--surface);
  box-shadow: var(--shadow-1);
}

.chain__steps {
  display: grid;
  gap: var(--chain-gap);
  margin: var(--s-5) 0 0;
  padding: 0;
  list-style: none;
}

.chain__step {
  position: relative;
  display: grid;
  grid-template-columns: var(--chain-dot) minmax(0, 1fr);
  align-content: start;
  gap: var(--s-1) var(--s-4);
}

/* The line from each stop to the next */
.chain__step:not(:last-child)::before {
  content: '';
  position: absolute;
  top: var(--chain-dot);
  bottom: calc(-1 * var(--chain-gap));
  inset-inline-start: calc(var(--chain-dot) / 2);
  width: 1px;
  background: var(--gold-500);
  opacity: 0.55;
}

.chain__dot {
  grid-row: span 2;
  display: grid;
  place-items: center;
  width: var(--chain-dot);
  height: var(--chain-dot);
  border: 1px solid var(--gold-500);
  border-radius: 50%;
  background: var(--dawn);
  font-family: var(--font-serif);
  font-size: 1.25rem;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--gold-700);
}

/* The last stop is the destination */
.chain__step:last-child .chain__dot {
  border-color: var(--forest-900);
  background: var(--forest-900);
  color: var(--gold-300);
}

.chain__step h3 {
  display: flex;
  align-items: center;
  min-height: var(--chain-dot);
  font-size: var(--fs-h3);
}

.chain__step p {
  font-size: var(--fs-small);
  color: var(--text-2);
}

@media (min-width: 768px) {
  .chain {
    --chain-gap: var(--s-4);
  }
  .chain > .eyebrow {
    justify-content: center;
  }
  /* A second rule after the label, so it stays centred */
  .chain > .eyebrow::after {
    content: '';
    flex: none;
    width: 2rem;
    height: 1px;
    background: var(--gold-500);
  }
  .chain__steps {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    margin-top: var(--s-6);
  }
  .chain__step {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    gap: var(--s-2);
    text-align: center;
  }
  .chain__step:not(:last-child)::before {
    top: calc(var(--chain-dot) / 2);
    bottom: auto;
    inset-inline-start: calc(50% + var(--chain-dot) / 2);
    width: calc(100% + var(--chain-gap) - var(--chain-dot));
    height: 1px;
  }
  .chain__dot {
    grid-row: auto;
    margin-bottom: var(--s-3);
  }
  .chain__step h3 {
    min-height: 0;
  }
  .chain__step p {
    max-width: 24ch;
  }
}

/* Home: why choose us --------------------------------------------------------- */
/* A sandstone band: the heading stays in view on the left while the six commitments scroll past as a ruled list. */

.why {
  background: var(--surface-tint);
}

.why__head .section-head__label {
  margin-bottom: var(--s-5);
}

.why__list {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}

.why__item {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  align-content: start;
  gap: var(--s-2) var(--s-4);
  padding-block: var(--s-5);
  border-top: 1px solid var(--line-strong);
}

.why__item .icon {
  grid-row: span 2;
  margin-top: 0.15em;
  color: var(--leaf-600);
}

.why__item h3 {
  font-size: var(--fs-h3);
}

.why__item p {
  font-size: var(--fs-small);
  color: var(--text-2);
  max-width: 40ch;
}

@media (min-width: 768px) {
  .why__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--s-6);
  }
}

@media (min-width: 992px) {
  .why__head {
    position: sticky;
    top: calc(var(--header-h) + var(--s-6));
  }
}

/* Home: certifications --------------------------------------------------------- */
/* One white panel: the heading on one side, the certificates as a register of rows on the other. */

.docs__panel {
  display: grid;
  gap: var(--s-6);
  padding: clamp(var(--s-5), 4vw, var(--s-8));
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  background: var(--surface);
  box-shadow: var(--shadow-1);
}

.docs__head .section-head__label {
  margin-bottom: var(--s-5);
}

.docs__head .link-arrow {
  margin-top: var(--s-4);
}

.docs__list {
  display: grid;
  align-content: start;
  gap: var(--s-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.docs__row {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  align-items: center;
  gap: var(--s-1) var(--s-4);
  padding: var(--s-4);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--ivory);
}

.docs__seal {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--leaf-100);
  color: var(--leaf-600);
}

.docs__seal--logo {
  overflow: hidden;
  border-radius: var(--radius);
  background: #fff;
  box-shadow: 0 0 0 1px var(--line);
}

.docs__seal--logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 5px;
}

.docs__tag {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-3);
}

.docs__name {
  font-size: var(--fs-h3);
}

.docs__issuer {
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--accent);
}

.docs__row .link-arrow {
  grid-column: 2;
}

@media (min-width: 576px) {
  .docs__row {
    grid-template-columns: 56px minmax(0, 1fr) auto;
    padding-inline-end: var(--s-5);
  }
  .docs__row .link-arrow {
    grid-column: auto;
  }
}

@media (min-width: 992px) {
  .docs__panel {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    align-items: start;
    gap: var(--s-8);
  }
}

/* About ------------------------------------------------------------------ */
/* Story with an unmasked photo, a forest panel of figures that count up, mission and vision cards that
   slide in from each side, and the process as a timeline whose line and photo follow the scroll.
   All motion sits in the media query at the end; without it every state is simply shown. */

/* Story: one wide photograph, with the heading and text on a white card that overlaps its lower edge */
.ab-story__media {
  position: relative;
}

.ab-story__media .plate {
  --ratio: 4 / 3;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-2);
}

/* On the tall crop keep the products in frame, not the empty sky */
.ab-story__media img {
  object-position: 78% 50%;
}

.ab-story__chip {
  position: absolute;
  top: var(--s-4);
  inset-inline-end: var(--s-4);
  padding: var(--s-2) var(--s-4);
  border-radius: var(--radius-pill);
  background: var(--forest-900);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--gold-300);
  box-shadow: var(--shadow-1);
}

.ab-story__card {
  position: relative;
  margin: calc(-1 * var(--s-6)) var(--s-3) 0;
  padding: clamp(var(--s-5), 4vw, var(--s-7));
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  background: var(--surface);
  box-shadow: var(--shadow-2);
}

.ab-story__card .section-head__label {
  margin-bottom: var(--s-5);
}

.ab-story__title {
  font-size: var(--fs-h2);
  max-width: 14ch;
  text-wrap: balance;
}

@media (min-width: 768px) {
  .ab-story__media .plate {
    --ratio: 21 / 9;
  }
  .ab-story__media img {
    object-position: 50% 50%;
  }
  .ab-story__card {
    margin: calc(-1 * var(--s-7)) var(--s-6) 0;
  }
}

@media (min-width: 1200px) {
  .ab-story__card {
    margin: calc(-1 * var(--s-8)) var(--s-8) 0;
  }
}

/* Figures */
.ab-figures__panel {
  display: grid;
  gap: var(--s-6);
  padding: clamp(var(--s-6), 5vw, var(--s-8));
  border-radius: var(--radius-xl);
  background:
    radial-gradient(44rem 26rem at 100% 0%, rgb(210 179 124 / 0.2), transparent 62%),
    radial-gradient(30rem 20rem at 0% 100%, rgb(74 106 44 / 0.3), transparent 65%),
    var(--forest-900);
  color: var(--ivory);
  --line: rgb(251 250 246 / 0.18);
  --text-2: rgb(251 250 246 / 0.82);
  --text-3: var(--leaf-300);
  --accent: var(--gold-300);
}

.ab-figures__head .section-head__label {
  margin-bottom: var(--s-5);
}

.ab-figures__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-5) var(--s-4);
  margin: 0;
}

.ab-figures__item {
  display: flex;
  flex-direction: column-reverse;
  justify-content: flex-end;
  gap: var(--s-2);
  padding-top: var(--s-4);
  border-top: 1px solid var(--line);
}

.ab-figures__item dd {
  margin: 0;
  font-family: var(--font-serif);
  font-size: clamp(3rem, 2rem + 4vw, 5.5rem);
  line-height: 0.95;
  font-variant-numeric: tabular-nums;
  color: var(--gold-300);
}

.ab-figures__item dt {
  font-size: var(--fs-small);
  font-weight: 400;
  color: var(--text-2);
}

@media (min-width: 992px) {
  .ab-figures__panel {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    align-items: center;
    gap: var(--s-8);
  }
  .ab-figures__list {
    gap: var(--s-6) var(--s-6);
  }
}

/* Mission and vision */
.ab-mv {
  overflow-x: clip; /* the cards start a little outside their place */
}

.ab-mv__card {
  position: relative;
  height: 100%;
  padding: clamp(var(--s-5), 4vw, var(--s-7));
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  background: var(--surface);
  box-shadow: var(--shadow-1);
}

.ab-mv__card--tint {
  background: var(--dawn);
}

/* Gold rule along the top of the card */
.ab-mv__card::before {
  content: '';
  position: absolute;
  top: 0;
  inset-inline-start: clamp(var(--s-5), 4vw, var(--s-7));
  width: 4rem;
  height: 3px;
  border-radius: 0 0 3px 3px;
  background: var(--gold-500);
  transform-origin: 0 50%;
}

.ab-mv__card .section-head__label {
  margin-bottom: var(--s-5);
}

.ab-mv__title {
  font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.25rem);
  line-height: 1.15;
  text-wrap: balance;
}

/* Process */
.ab-process__aside {
  display: grid;
  gap: var(--s-6);
}

.ab-process__aside .section-head__label {
  margin-bottom: var(--s-5);
}

.ab-process__photos {
  box-shadow: var(--shadow-2);
}

/* The photos are stacked; the one for the current step shows */
.ab-process__photos img {
  position: absolute;
  inset: 0;
  opacity: 0;
}

.ab-process__photos img.is-active {
  opacity: 1;
}

.ab-process__steps {
  display: grid;
  gap: var(--s-6);
  margin: 0;
  padding: 0;
  list-style: none;
}

.ab-process__step {
  position: relative;
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr);
  gap: var(--s-5);
}

/* Track to the next step, and the gold fill that covers it once the step is passed */
.ab-process__step:not(:last-child)::before,
.ab-process__step:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 3rem;
  bottom: calc(-1 * var(--s-6));
  inset-inline-start: calc(1.5rem - 1px);
  width: 2px;
  background: var(--line-strong);
}

.ab-process__step:not(:last-child)::after {
  background: var(--gold-500);
  transform: scaleY(0);
  transform-origin: 50% 0;
}

.ab-process__step.is-done::after {
  transform: none;
}

.ab-process__node {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border: 1px solid var(--gold-500);
  border-radius: 50%;
  background: var(--paper);
  font-family: var(--font-serif);
  font-size: 1.25rem;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--gold-700);
}

.ab-process__step:is(.is-done, .is-current) .ab-process__node {
  border-color: var(--forest-900);
  background: var(--forest-900);
  color: var(--gold-300);
}

.ab-process__step.is-current .ab-process__node {
  box-shadow: 0 0 0 6px rgb(168 133 79 / 0.22);
}

.ab-process__step h3 {
  display: flex;
  align-items: center;
  min-height: 3rem;
  font-size: var(--fs-h3);
}

.ab-process__step p {
  max-width: 48ch;
  color: var(--text-2);
}

@media (min-width: 992px) {
  .ab-process__aside {
    position: sticky;
    top: calc(var(--header-h) + var(--s-6));
  }
  .ab-process__steps {
    gap: var(--s-8);
    padding-block: var(--s-6);
  }
  .ab-process__step:not(:last-child)::before,
  .ab-process__step:not(:last-child)::after {
    bottom: calc(-1 * var(--s-8));
  }
}

/* Motion */
@media (prefers-reduced-motion: no-preference) {
  /* Page header: one staggered entrance */
  .page-header--enter :is(.breadcrumb, .eyebrow, .page-header__title, .page-header__lead) {
    animation: ab-rise 800ms var(--ease-out) both;
    animation-delay: calc(var(--i, 0) * 110ms);
  }
  .page-header--enter .eyebrow {
    --i: 1;
  }
  .page-header--enter .page-header__title {
    --i: 2;
  }
  .page-header--enter .page-header__lead {
    --i: 3;
  }

  /* Story photo: unveiled from the top while the picture settles; the card then rises over its edge.
     The clip is on the plate, not on the observed wrapper: an element clipped to nothing never counts as "in view". */
  .js .ab-story__media[data-reveal] {
    opacity: 1;
    transform: none;
  }
  .js .ab-story__media[data-reveal] .plate {
    clip-path: inset(0 0 100% 0 round var(--radius-xl));
    transition: clip-path 1200ms var(--ease-out);
  }
  .js .ab-story__media[data-reveal].is-in .plate {
    clip-path: inset(0 0 0 0 round var(--radius-xl));
  }
  .js .ab-story__media[data-reveal] img {
    transform: scale(1.12);
    transition: transform 1800ms var(--ease-out);
  }
  .js .ab-story__media[data-reveal].is-in img {
    transform: none;
  }
  .js .ab-story__media[data-reveal] .ab-story__chip {
    opacity: 0;
    transition: opacity 500ms var(--ease-out) 800ms;
  }
  .js .ab-story__media[data-reveal].is-in .ab-story__chip {
    opacity: 1;
  }

  /* Mission and vision: one card from each side, then the gold rule draws */
  .js .ab-mv__card[data-reveal] {
    transform: translateX(var(--from, -40px));
    transition:
      opacity 800ms var(--ease-out),
      transform 900ms var(--ease-out);
    transition-delay: calc(var(--i, 0) * 120ms);
  }
  .js .ab-mv__card[data-reveal='right'] {
    --from: 40px;
  }
  .js .ab-mv__card[data-reveal].is-in {
    transform: none;
  }
  .js .ab-mv__card[data-reveal]::before {
    transform: scaleX(0);
    transition: transform 700ms var(--ease-out) 600ms;
  }
  .js .ab-mv__card[data-reveal].is-in::before {
    transform: none;
  }

  /* Process: the line fills, the node turns, the photo cross-fades */
  .ab-process__step:not(:last-child)::after {
    transition: transform 700ms var(--ease-out);
  }
  .ab-process__node {
    transition:
      background-color var(--dur-2) var(--ease-out),
      border-color var(--dur-2) var(--ease-out),
      color var(--dur-2) var(--ease-out),
      box-shadow var(--dur-2) var(--ease-out);
  }
  .ab-process__photos img {
    transform: scale(1.06);
    transition:
      opacity 800ms ease,
      transform 1400ms var(--ease-out);
  }
  .ab-process__photos img.is-active {
    transform: none;
  }

  @keyframes ab-rise {
    from {
      opacity: 0;
      transform: translateY(20px);
    }
  }
}

/* Products catalogue -------------------------------------------------------- */
.section--catalog {
  padding-top: 0;
}

.catalog-bar {
  position: sticky;
  top: var(--header-h);
  z-index: 20;
  background: rgb(251 250 246 / 0.96);
  border-bottom: 1px solid var(--line);
}

.catalog-bar__inner {
  display: grid;
  gap: var(--s-3);
  padding-block: var(--s-3);
}

@media (min-width: 992px) {
  .catalog-bar__inner {
    grid-template-columns: minmax(0, 1fr) 20rem;
    align-items: center;
    gap: var(--s-6);
  }
  .filters {
    margin-inline: 0;
    padding-inline: 0;
    flex-wrap: wrap;
  }
}

.catalog-status {
  padding-block: var(--s-6) var(--s-5);
  font-size: var(--fs-small);
  color: var(--text-3);
}

.empty-state {
  padding: var(--s-8) 0;
  border-top: 1px solid var(--line);
  max-width: 40rem;
}

.empty-state__title {
  font-size: var(--fs-h3);
}

.empty-state p {
  margin-top: var(--s-3);
  color: var(--text-2);
}

/* Product detail ----------------------------------------------------------- */
.product {
  padding-block: var(--s-5) var(--section);
}

/* The photo is sized from the viewport height so the gallery thumbnails under it stay in the first view */
.product__media .plate {
  width: min(100%, calc(max(17.5rem, 100svh - var(--header-h) - 12rem) * (var(--ratio, 1 / 1))));
  box-shadow: var(--shadow-2);
}

/* Gallery thumbnails under the main photo */
.product__thumbs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  margin-top: var(--s-3);
}

.product__thumb {
  display: block;
  width: 72px;
  height: 72px;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: var(--radius);
  background: #fff;
  box-shadow: 0 0 0 1px var(--line);
  opacity: 0.7;
  transition:
    opacity var(--dur-1) var(--ease-out),
    box-shadow var(--dur-1) var(--ease-out),
    transform var(--dur-1) var(--ease-out);
}

.product__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.product__thumb[aria-pressed='true'] {
  opacity: 1;
  box-shadow: 0 0 0 2px var(--forest-900);
}

.product__thumb:active {
  transform: scale(0.96);
}

@media (hover: hover) and (pointer: fine) {
  .product__thumb:hover {
    opacity: 1;
  }
}

.product__title {
  margin-top: var(--s-3);
  font-size: var(--fs-h1);
  line-height: var(--lh-tight);
}

.product__botanical {
  margin-top: var(--s-2);
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.625rem);
  color: var(--forest-700);
}

.product__summary {
  margin-top: var(--s-5);
  max-width: 48ch;
  font-size: var(--fs-lead);
  color: var(--text-2);
}

.product__toc {
  display: flex;
  gap: var(--s-1) var(--s-5);
  margin-top: var(--s-7);
  padding-block: var(--s-2);
  border-block: 1px solid var(--line);
  overflow-x: auto;
  scrollbar-width: none;
  font-size: var(--fs-small);
}

.product__toc::-webkit-scrollbar {
  display: none;
}

.product__toc a {
  flex: none;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--text-2);
  text-decoration: none;
}

.product__toc a:hover {
  color: var(--text);
  text-decoration: underline;
}

.product__section {
  padding-top: var(--s-7);
  scroll-margin-top: calc(var(--header-h) + var(--s-4));
}

.product__h2 {
  display: flex;
  align-items: baseline;
  gap: var(--s-3);
  margin-bottom: var(--s-5);
  font-size: clamp(1.75rem, 1.5rem + 1vw, 2.25rem);
}

.product__h2 span {
  font-family: var(--font-sans);
  font-size: var(--fs-small);
  font-variant-numeric: tabular-nums;
  color: var(--accent);
}

.pack-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
}

.pack-list a {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  min-height: 44px;
  padding-inline: var(--s-4);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill);
  font-size: var(--fs-small);
  text-decoration: none;
  transition:
    border-color var(--dur-1) var(--ease-out),
    background-color var(--dur-1) var(--ease-out);
}

.pack-list a:hover {
  border-color: var(--text);
  background: var(--surface);
}

.handling {
  display: grid;
  border-top: 1px solid var(--line-strong);
}

.handling li {
  display: grid;
  grid-template-columns: 2.25rem minmax(0, 1fr);
  gap: 0 var(--s-3);
  padding-block: var(--s-4);
  border-bottom: 1px solid var(--line);
}

.handling__index {
  grid-row: span 2;
  font-size: var(--fs-small);
  font-variant-numeric: tabular-nums;
  color: var(--accent);
  padding-top: 0.3em;
}

.handling h3 {
  font-size: 1.375rem;
}

.handling p {
  font-size: var(--fs-small);
  color: var(--text-2);
}

.applications {
  display: grid;
  gap: 0 var(--s-6);
  border-top: 1px solid var(--line-strong);
}

.applications li {
  position: relative;
  padding: var(--s-3) 0 var(--s-3) var(--s-5);
  border-bottom: 1px solid var(--line);
}

.applications li::before {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  top: 1.35em;
  width: 8px;
  height: 1px;
  background: var(--accent);
}

@media (min-width: 600px) {
  .applications {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.quote-box {
  margin-top: var(--s-8);
  padding: clamp(var(--s-5), 4vw, var(--s-7));
  border-radius: var(--radius-lg);
  background: var(--forest-900);
  color: var(--ivory);
}

.quote-box__title {
  font-size: var(--fs-h3);
}

.quote-box p {
  margin-top: var(--s-3);
  margin-bottom: var(--s-5);
  max-width: 48ch;
  color: rgb(251 250 246 / 0.8);
}

.quote-box :focus-visible {
  outline-color: var(--gold-300);
}

@media (min-width: 992px) {
  .product__media-sticky {
    position: sticky;
    top: calc(var(--header-h) + var(--s-5));
  }
}

/* Certifications / packaging ---------------------------------------------- */
.doc-list {
  display: grid;
  border-top: 1px solid var(--line-strong);
}

.doc-list li {
  display: grid;
  grid-template-columns: 2.25rem 24px minmax(0, 1fr);
  gap: var(--s-4);
  align-items: start;
  padding-block: var(--s-5);
  border-bottom: 1px solid var(--line);
}

.doc-list__index {
  font-size: var(--fs-small);
  font-variant-numeric: tabular-nums;
  color: var(--accent);
  padding-top: 0.2em;
}

.doc-list .icon {
  color: var(--leaf-600);
}

.doc-list h3 {
  font-size: 1.375rem;
}

.doc-list p {
  font-size: var(--fs-small);
  color: var(--text-2);
}

@media (min-width: 900px) {
  .doc-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--s-7);
  }
}

/* Customisation steps: small white cards with a numbered stop */
.steps__item {
  height: 100%;
  padding: var(--s-4);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
}

.steps__index {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border: 1px solid var(--gold-500);
  border-radius: 50%;
  background: var(--dawn);
  font-family: var(--font-serif);
  font-size: 1.125rem;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--accent);
}

.steps__item h3 {
  margin-top: var(--s-3);
  font-size: 1.25rem;
}

.steps__item p {
  margin-top: var(--s-2);
  font-size: var(--fs-small);
  color: var(--text-2);
}

/* Contact ------------------------------------------------------------------ */

.contact__h {
  font-size: var(--fs-h3);
  margin-bottom: var(--s-5);
}

.contact__company {
  margin-bottom: var(--s-4);
  font-weight: 600;
}

.contact__hours {
  margin-top: var(--s-5);
  padding-top: var(--s-4);
  border-top: 1px solid var(--line);
}

.contact__hours dt {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  font-size: var(--fs-small);
  font-weight: 600;
}

.contact__hours dt .icon {
  color: var(--accent);
}

.contact__hours dd {
  margin-top: var(--s-1);
  padding-inline-start: calc(18px + var(--s-3));
}

.contact__note {
  margin-top: var(--s-7);
  padding: var(--s-5);
  border-radius: var(--radius-lg);
  background: var(--dawn);
}

.contact__note h3 {
  font-size: 1.375rem;
  margin-bottom: var(--s-3);
}

.contact__note ul {
  padding-inline-start: 1.1em;
  font-size: var(--fs-small);
  color: var(--text-2);
}

.contact__note li + li {
  margin-top: var(--s-1);
}

.contact__required {
  margin-top: calc(-1 * var(--s-3));
  margin-bottom: var(--s-5);
  font-size: 0.8125rem;
  color: var(--text-3);
}

.contact__required span {
  color: var(--error);
}

.inquiry__footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-4) var(--s-5);
  margin-top: var(--s-6);
}

.inquiry__privacy {
  font-size: 0.8125rem;
  color: var(--text-3);
}

@media (max-width: 479px) {
  .inquiry__footer .btn {
    width: 100%;
  }
}

/* 404 ------------------------------------------------------------------- */
.not-found {
  padding-block: clamp(var(--s-8), 12vw, var(--s-10));
}

.not-found .page-header__title {
  margin-top: var(--s-5);
}