/* ==========================================================================
   Shivrai Botanicals

   Warm paper, forest green and bronze, taken from the mark: the deep green of
   the S, the bronze of its leaf. Sunlit photographs of the hills, gardens and
   plants the range comes from carry the atmosphere; each fades into the paper
   beside its text rather than sitting on the page as a picture.

   Type   Source Serif 4 for headings, names and italic botanical names: a
          sturdy, open serif with a display cut, set semibold like the title
          page of a specification. Schibsted Grotesk for everything read in
          order to act.
   Shape  2px radius, 1px hairlines. Shadow only where something lifts.
   Motion Slow where it is the picture (the opening photograph drifts, the
          product menu settles); quick and quiet where it is feedback.
          Everything stops under prefers-reduced-motion.

    1  Fonts             8  Home
    2  Tokens            9  Catalogue and cards
    3  Base             10  Product page
    4  Type             11  Applications
    5  Layout           12  Quality
    6  Controls         13  About
    7  Header, footer,  14  Contact, legal, error
       closing band     15  Motion and print
   ========================================================================== */

/* 1  Fonts ---------------------------------------------------------------- */
/* Source Serif 4, variable in weight (400 to 650) and optical size, so the
   headings take the display cut and running serif text the text cut. */
@font-face { font-family: "Source Serif 4"; font-style: normal; font-weight: 400 650; font-display: swap;
  src: url("/assets/fonts/source-serif-4-roman.woff2") format("woff2");
  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+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Source Serif 4"; font-style: italic; font-weight: 400; font-display: swap;
  src: url("/assets/fonts/source-serif-4-italic.woff2") format("woff2");
  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+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Schibsted Grotesk"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("/assets/fonts/schibsted-grotesk-400-700.woff2") format("woff2");
  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+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* 2  Tokens --------------------------------------------------------------- */
:root {
  /* Forest: the green of the mark, from near-black to leaf shade */
  --forest-950: #0b1a12;
  --forest-900: #11261b;
  --forest-800: #183425;
  --forest-700: #244532;
  --moss: #56663f;

  /* Ink on paper */
  --ink: #15241b;          /* 14.6:1 on paper */
  --ink-2: #3a473f;        /* 9.0:1 */
  --ink-3: #59635b;        /* 5.6:1 */

  /* Paper: the page and its quieter neighbours */
  --paper: #f4f1e8;
  --paper-2: #ebe5d7;      /* linen bands */
  --paper-3: #e1d9c7;      /* image ground */
  --surface: #fbf9f4;      /* raised: cards, tables, fields */
  --line: #dbd3c2;
  --line-2: #c5bca7;

  /* Sage: paper with the green of the photographs in it */
  --sage: #e8ebdf;         /* ink 13.4:1, ink-3 5.2:1 */
  --sage-line: #cfd6c3;

  /* Bronze: the leaf of the mark */
  --bronze: #9a7a4a;
  --bronze-ink: #775a2e;   /* 5.8:1 on paper */
  --bronze-light: #d5bb8d; /* on forest */
  --bronze-deep: #5d4420;  /* accent text over a faded photograph (5:1 at worst) */

  /* On forest */
  --on-forest: #f1ede3;
  --on-forest-2: #bcc6b9;  /* 8.6:1 on forest-900 */
  --on-forest-3: #93a497;  /* 5.6:1 on forest-900 */
  --forest-line: rgba(241, 237, 227, .15);

  --whatsapp: #25d366;
  --ok: #2e6a45;
  --error: #9b2c22;

  --serif: "Source Serif 4", "Source Serif Pro", "Iowan Old Style", Georgia, serif;
  /* Heading weights: large type needs less weight to carry than small */
  --w-title: 560;          /* page and section openings */
  --w-head: 590;           /* section headings */
  --w-name: 620;           /* card, step and menu titles */
  --sans: "Schibsted Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  --shell: 86rem;
  --gutter: clamp(1.25rem, 0.5rem + 3.2vw, 3.25rem);
  /* Vertical rhythm: sections a comfortable screen apart, never a long walk */
  --section: clamp(3.5rem, 2.5rem + 3.4vw, 6rem);
  --section-tight: clamp(2.75rem, 2rem + 2.2vw, 4.5rem);
  --head-gap: clamp(1.75rem, 1.25rem + 1.6vw, 3rem);
  --header-h: 5rem;
  --radius: 2px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --t-fast: 160ms;
  --t: 280ms;
}
@media (max-width: 69.99em) { :root { --header-h: 4.25rem; } }

/* 3  Base ----------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 4.5rem); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font: 400 1rem/1.62 var(--sans); font-kerning: normal;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
picture { display: contents; }
picture > source { display: none; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
table { border-collapse: collapse; width: 100%; }
em { font-style: italic; }
strong { font-weight: 600; }
:focus-visible { outline: 2px solid var(--bronze); outline-offset: 3px; border-radius: 1px; }
::selection { background: #e5d6b5; color: var(--ink); }
[hidden] { display: none !important; }

.skip-link {
  position: absolute; left: 1rem; top: -4rem; z-index: 100; padding: .75rem 1rem;
  background: var(--forest-900); color: var(--on-forest); border-radius: var(--radius); font-weight: 500;
}
.skip-link:focus { top: 1rem; }
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* 4  Type ----------------------------------------------------------------- */
.hero-title, .page-title, .product-title, .h2, .cta-title, .range-title {
  font-family: var(--serif); font-weight: var(--w-head); color: var(--ink); text-wrap: balance;
  font-optical-sizing: auto; font-kerning: normal;
}
.hero-title, .page-title, .product-title { font-weight: var(--w-title); }
/* One scale for the whole site, at roughly 1.3 between steps: hero 53, page
   title 46, h2 35, h3 21, lede 18, body 16 (px at 1440 wide); hero 33, title
   31, h2 25 on a phone. */
.hero-title { font-size: clamp(2.05rem, 1.4rem + 2.25vw, 3.35rem); line-height: 1.06; letter-spacing: -0.02em; }
.page-title { font-size: clamp(1.95rem, 1.45rem + 1.55vw, 2.9rem); line-height: 1.07; letter-spacing: -0.018em; }
.product-title { font-size: clamp(2rem, 1.5rem + 1.55vw, 2.95rem); line-height: 1.06; letter-spacing: -0.018em; }
.h2 { font-size: clamp(1.6rem, 1.27rem + 1.05vw, 2.2rem); line-height: 1.12; letter-spacing: -0.014em; }
.h3 { font: var(--w-name) clamp(1.15rem, 1.07rem + .3vw, 1.32rem)/1.25 var(--serif); letter-spacing: -0.006em; }
.h4 { font-family: var(--sans); font-size: 1rem; font-weight: 600; line-height: 1.35; }
.label {
  font-family: var(--sans); font-size: .75rem; font-weight: 600; letter-spacing: .16em;
  text-transform: uppercase; color: var(--ink-3);
}
.small { font-size: .875rem; line-height: 1.55; }
.muted { color: var(--ink-3); }
p { text-wrap: pretty; }
.section-lede { font-size: clamp(1.0625rem, 1rem + .2vw, 1.125rem); line-height: 1.6; color: var(--ink-2); max-width: 36rem; }

.text-link, .arrow-link {
  font-weight: 500; color: var(--ink);
  text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--bronze) 55%, transparent);
  text-decoration-thickness: 1px; text-underline-offset: .3em;
  transition: text-decoration-color var(--t-fast) var(--ease), color var(--t-fast);
}
.text-link:hover { text-decoration-color: currentColor; }
.arrow-link { display: inline-flex; align-items: center; gap: .55rem; padding-block: .3rem; text-decoration: none; }
.arrow-link span { text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--bronze) 55%, transparent); text-decoration-thickness: 1px; text-underline-offset: .3em; transition: text-decoration-color var(--t-fast); }
.arrow-link .icon { transition: transform var(--t) var(--ease); }
.arrow-link:hover span { text-decoration-color: currentColor; }
.arrow-link:hover .icon { transform: translateX(4px); }
.arrow-link--light { color: var(--on-forest); }
.arrow-link--light span { text-decoration-color: color-mix(in srgb, var(--bronze-light) 60%, transparent); }

.icon { width: 1.5rem; height: 1.5rem; flex: none; }
.icon-sm { width: 1.125rem; height: 1.125rem; }
.icon-xs { width: .95rem; height: .95rem; }
.icon-wa { color: var(--whatsapp); }

/* 5  Layout --------------------------------------------------------------- */
.shell { width: 100%; max-width: var(--shell); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--section); }
.section--tight { padding-block: var(--section-tight); }
.section--alt { background: var(--paper-2); }

.section-head {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.25rem 3rem;
  align-items: end; margin-bottom: var(--head-gap);
}
.section-head .h2 { max-width: 21ch; }
.section-head-aside { display: grid; gap: 1rem; justify-items: start; color: var(--ink-2); max-width: 34rem; }
.section-head--compact { align-items: start; margin-bottom: clamp(1.5rem, 1.2rem + 1vw, 2.25rem); }
.section-head--row { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 1rem 2rem; }
.section-sub { color: var(--ink-2); max-width: 40rem; }
.h2 + .section-sub, .h2 + .section-lede { margin-top: 1rem; }
@media (max-width: 61.99em) { .section-head { grid-template-columns: 1fr; align-items: start; } }


/* 6  Controls ------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  min-height: 2.875rem; padding: .65rem 1.3rem; border-radius: var(--radius);
  border: 1px solid transparent; font-size: .9375rem; font-weight: 500; line-height: 1.2;
  letter-spacing: .01em; text-align: center; white-space: nowrap;
  transition: background-color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease),
              color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--forest-900); color: var(--on-forest); }
.btn-primary:hover { background: var(--forest-700); }
.btn-secondary { background: transparent; border-color: var(--line-2); color: var(--ink); }
.btn-secondary:hover { border-color: var(--ink); background: rgba(251, 249, 244, .7); }
.btn-sm { min-height: 2.5rem; padding: .5rem 1.05rem; font-size: .875rem; }
.btn-lg { min-height: 3.25rem; padding-inline: 1.6rem; font-size: 1rem; }
.btn-block { width: 100%; }
.btn[disabled] { opacity: .65; cursor: progress; }

.chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.chips a {
  display: inline-flex; align-items: center; min-height: 2rem; padding: .3rem .72rem;
  border: 1px solid rgba(21, 36, 27, .2); border-radius: var(--radius); background: rgba(251, 249, 244, .6);
  font-size: .8125rem; font-weight: 500; color: var(--ink-2);
  transition: border-color var(--t-fast), color var(--t-fast), background-color var(--t-fast);
}
.chips a:hover { border-color: var(--ink); color: var(--ink); background: var(--surface); }

.badge { display: inline-flex; align-items: center; gap: .45rem; white-space: nowrap; font-size: .8125rem; font-weight: 500; color: var(--ink-3); }
.badge::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; border: 1.5px solid currentColor; flex: none; }
.badge--standard { color: var(--ok); }
.badge--standard::before { background: currentColor; }

.ticks { display: grid; gap: .6rem; }
.ticks li { display: grid; grid-template-columns: auto 1fr; gap: .65rem; align-items: start; color: var(--ink-2); }
.ticks .icon { color: var(--bronze); margin-top: .2rem; }

.breadcrumbs ol { display: flex; flex-wrap: wrap; gap: .35rem .55rem; font-size: .8125rem; color: var(--ink-3); }
.breadcrumbs li { display: inline-flex; align-items: center; gap: .55rem; }
.breadcrumbs li + li::before { content: "/"; color: var(--line-2); }
.breadcrumbs a { text-decoration: underline; text-decoration-color: transparent; text-underline-offset: .25em; transition: text-decoration-color var(--t-fast); }
.breadcrumbs a:hover { text-decoration-color: currentColor; color: var(--ink); }
.breadcrumbs [aria-current] { color: var(--ink-2); }

.jump { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: .25rem; }
.jump a {
  display: inline-flex; min-height: 2.35rem; align-items: center; padding: .35rem .9rem;
  border: 1px solid var(--line-2); border-radius: var(--radius); font-size: .875rem; font-weight: 500;
  background: rgba(251, 249, 244, .55); transition: border-color var(--t-fast), background-color var(--t-fast);
}
.jump a:hover { border-color: var(--ink); background: var(--surface); }

.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* 7  Header, menus, footer, closing band ---------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 50; background: var(--paper);
  box-shadow: 0 1px 0 transparent; transition: box-shadow var(--t) var(--ease), background-color var(--t) var(--ease);
}
.site-header.is-scrolled { box-shadow: 0 1px 0 var(--line); }
.site-header--overlay { position: fixed; left: 0; right: 0; background: transparent; }
.site-header--overlay.is-scrolled, .site-header--overlay.is-open { background: var(--paper); }
.header-row { display: flex; align-items: center; gap: 2rem; height: var(--header-h); }
.brand { display: block; flex: none; margin-right: auto; }
.brand img { width: auto; height: 3rem; transform-origin: left center; transition: transform var(--t) var(--ease); }
@media (min-width: 70em) {
  .site-header--overlay:not(.is-scrolled):not(.is-open) .brand img { transform: scale(1.22) translateY(6%); }
}
.primary-nav { display: block; }
.nav-list { display: flex; align-items: center; gap: .3rem; }
.nav-item { position: static; display: flex; align-items: center; }
.nav-link {
  position: relative; display: inline-flex; align-items: center; height: var(--header-h);
  padding-inline: .75rem; font-size: .9375rem; font-weight: 500; color: var(--ink-2); transition: color var(--t-fast);
}
.nav-link::after {
  content: ""; position: absolute; left: .75rem; right: .75rem; bottom: 1.55rem; height: 1px;
  background: var(--bronze); transform: scaleX(0); transform-origin: left; transition: transform var(--t) var(--ease);
}
.nav-link:hover, .nav-link[aria-current] { color: var(--ink); }
.nav-link:hover::after, .nav-link[aria-current]::after { transform: scaleX(1); }
.site-header--overlay .nav-link { color: var(--ink); }
.nav-item--menu .nav-link { padding-right: .2rem; }
.nav-caret {
  display: inline-grid; place-items: center; width: 1.6rem; height: 1.6rem; margin-right: .4rem;
  color: var(--ink-2); border-radius: var(--radius); transition: transform var(--t) var(--ease), color var(--t-fast);
}
.nav-caret:hover { color: var(--ink); }
.nav-caret[aria-expanded="true"] { transform: rotate(180deg); color: var(--ink); }
.header-cta { flex: none; }
.menu-toggle {
  display: none; align-items: center; gap: .5rem; min-height: 2.75rem; padding: .4rem .2rem .4rem .6rem;
  font-size: .9375rem; font-weight: 500;
}
.menu-toggle .icon-close { display: none; }
.menu-toggle[aria-expanded="true"] .icon-open { display: none; }
.menu-toggle[aria-expanded="true"] .icon-close { display: block; }

/* The product menu: three groups, each shown by what it is made from. It
   settles in rather than snapping open, and holds for a moment when the
   pointer leaves (site.js), so crossing to it never drops it. */
.mega {
  position: absolute; left: 0; right: 0; top: 100%; background: var(--paper);
  border-top: 1px solid var(--line); box-shadow: 0 34px 48px -34px rgba(17, 38, 27, .38);
  opacity: 0; transform: translateY(-8px); visibility: hidden;
  transition: opacity 200ms var(--ease), transform 360ms var(--ease), visibility 0s linear 360ms;
}
.mega.is-open { opacity: 1; transform: none; visibility: visible; transition: opacity 240ms var(--ease), transform 420ms var(--ease), visibility 0s; }
.mega-inner { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 clamp(1.5rem, .5rem + 2.4vw, 3rem); padding-block: 1.75rem 1.5rem; }
.mm-col { display: grid; align-content: start; gap: .75rem; }
.mm-head { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); gap: 1rem; align-items: center; padding-bottom: .9rem; border-bottom: 1px solid var(--line); }
.mm-thumb { width: 4.5rem; height: 4.5rem; overflow: hidden; border-radius: var(--radius); background: var(--paper-3); }
.mm-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.mm-head:hover .mm-thumb img { transform: scale(1.06); }
.mm-title { display: block; font: var(--w-name) 1.2rem/1.2 var(--serif); letter-spacing: -.006em; color: var(--ink); }
.mm-desc { display: block; margin-top: .3rem; font-size: .8125rem; line-height: 1.4; color: var(--ink-3); }
.mm-head:hover .mm-title { color: var(--forest-700); }
.mm-col ul { display: grid; }
.mm-col li a {
  display: grid; gap: .05rem; padding: .45rem .65rem; margin-inline: -.65rem; border-radius: var(--radius);
  transition: background-color var(--t-fast) var(--ease);
}
.mm-name { font-size: .9375rem; font-weight: 500; color: var(--ink); }
.mm-meta { font-size: .8125rem; color: var(--ink-3); }
.mm-col li a:hover, .mm-col li a:focus-visible { background: var(--sage); }
.mm-foot { display: flex; align-items: center; justify-content: space-between; gap: 1rem 2rem; flex-wrap: wrap; padding-block: 1rem 1.15rem; border-top: 1px solid var(--line); font-size: .875rem; color: var(--ink-3); }
@media (prefers-reduced-motion: no-preference) {
  .mega .mm-col { opacity: 0; transform: translateY(6px); transition: opacity 300ms var(--ease), transform 500ms var(--ease); }
  .mega.is-open .mm-col { opacity: 1; transform: none; }
  .mega.is-open .mm-col:nth-child(2) { transition-delay: 50ms; }
  .mega.is-open .mm-col:nth-child(3) { transition-delay: 100ms; }
}

.drawer {
  position: fixed; inset: var(--header-h) 0 0; z-index: 49; background: var(--paper); overflow-y: auto; border-top: 1px solid var(--line);
  opacity: 0; transition: opacity 220ms var(--ease);
}
.drawer.is-open { opacity: 1; }
.drawer-inner { padding: 1.25rem var(--gutter) 2.5rem; display: grid; gap: 1.5rem; }
.drawer-label { font-size: .75rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); }
.drawer-cats { display: grid; margin-top: -.6rem; }
.drawer-cats a { display: grid; grid-template-columns: 3.25rem minmax(0, 1fr); gap: .9rem; align-items: center; padding: .6rem 0; border-bottom: 1px solid var(--line); }
.drawer-cats img { width: 3.25rem; height: 3.25rem; object-fit: cover; border-radius: var(--radius); background: var(--paper-3); }
.drawer-cats .dc-name { display: block; font: var(--w-name) 1.2rem/1.2 var(--serif); letter-spacing: -.006em; color: var(--ink); }
.drawer-cats .dc-meta { display: block; font-size: .8125rem; color: var(--ink-3); }
.drawer-cats .dc-all { display: flex; align-items: center; justify-content: space-between; padding: .8rem 0; font-weight: 500; }
.drawer-nav a { display: block; padding: .8rem 0; border-bottom: 1px solid var(--line); font: var(--w-head) 1.3rem/1.2 var(--serif); letter-spacing: -.008em; }
.drawer-nav a[aria-current] { color: var(--bronze-ink); }
.drawer-foot { display: grid; gap: 1rem; justify-items: start; }
.drawer-foot .btn { justify-self: stretch; }
.drawer-contact { display: inline-flex; align-items: center; gap: .6rem; color: var(--ink-2); font-size: .9375rem; }
body.drawer-open { overflow: hidden; }

@media (max-width: 69.99em) {
  .primary-nav, .header-cta { display: none; }
  .menu-toggle { display: inline-flex; }
  .brand img { height: 2.5rem; }
}

.site-footer { background: var(--forest-950); color: var(--on-forest-2); font-size: .9375rem; }
.footer-top { display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(2, minmax(0, 1fr)) minmax(max-content, 1fr); gap: 2.5rem; padding-block: clamp(3.5rem, 2.5rem + 3vw, 5rem) 3rem; }
.footer-brand { display: grid; gap: 1.25rem; max-width: 22rem; align-content: start; }
.footer-brand img { height: 3.1rem; width: auto; }
.footer-head { color: var(--on-forest); font-weight: 600; font-size: .75rem; letter-spacing: .16em; text-transform: uppercase; margin-bottom: 1.1rem; }
.footer-col ul { display: grid; gap: .6rem; }
.footer-col a { color: var(--on-forest-2); transition: color var(--t-fast); }
.footer-col a:hover { color: var(--on-forest); }
.footer-col a:hover span, .footer-col > ul:not(.footer-contact) a:hover { text-decoration: underline; text-underline-offset: .25em; }
.footer-contact a { display: inline-flex; align-items: center; gap: .6rem; }
.footer-contact .icon { color: var(--on-forest-3); }
.footer-contact .icon-wa { color: var(--whatsapp); }
.footer-legal { display: grid; gap: .9rem; padding-block: 1.6rem 2rem; border-top: 1px solid var(--forest-line); font-size: .8125rem; color: var(--on-forest-3); }
.footer-legal p:first-child { max-width: 56rem; }
.footer-links { display: flex; flex-wrap: wrap; gap: .5rem 1.75rem; }
.footer-links a { color: var(--on-forest-2); text-decoration: underline; text-decoration-color: var(--forest-line); text-underline-offset: .25em; }
.footer-links a:hover { color: var(--on-forest); text-decoration-color: currentColor; }
@media (max-width: 61.99em) {
  .footer-top { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 39.99em) { .footer-top { grid-template-columns: 1fr; } }

/* Closing band: the request for a quote beside the hills the range is grown
   in. The photograph rises out of the page above and runs into the footer. */
.cta-band { position: relative; isolation: isolate; overflow: hidden; background: var(--paper); color: var(--ink-2); }
.cta-media { position: absolute; inset: -7% 0 -7% 28%; z-index: -1; }
.cta-img {
  width: 100%; height: 100%; object-fit: cover; object-position: 60% 60%;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, rgba(0, 0, 0, .5) 20%, #000 44%), linear-gradient(180deg, transparent 0, transparent 7%, #000 38%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent 0, rgba(0, 0, 0, .5) 20%, #000 44%), linear-gradient(180deg, transparent 0, transparent 7%, #000 38%);
  mask-composite: intersect;
}
.cta-inner { padding-block: clamp(4rem, 3rem + 4.5vw, 7.5rem); }
.cta-copy { display: grid; justify-items: start; max-width: 31rem; }
.cta-kicker { font-size: .75rem; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--bronze-ink); margin-bottom: 1rem; }
.cta-title { color: var(--ink); font-size: clamp(1.75rem, 1.37rem + 1.2vw, 2.45rem); line-height: 1.1; letter-spacing: -0.016em; margin-bottom: .85rem; max-width: 19ch; }
.cta-text { max-width: 28rem; line-height: 1.6; }
.cta-actions { display: grid; gap: 1.1rem; justify-items: start; margin-top: 1.75rem; }
.cta-lines { display: flex; flex-wrap: wrap; gap: .6rem 1.6rem; }
.cta-lines a { display: inline-flex; align-items: center; gap: .5rem; color: var(--ink); font-weight: 500; font-size: .9375rem; }
.cta-lines a span:not(.visually-hidden) { text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--bronze) 55%, transparent); text-underline-offset: .3em; transition: text-decoration-color var(--t-fast); }
.cta-lines a:hover span { text-decoration-color: currentColor; }
.cta-lines .icon:not(.icon-wa) { color: var(--ink-3); }
@media (max-width: 47.99em) {
  .cta-media { position: relative; inset: auto; height: 13rem; }
  .cta-img {
    object-position: 55% 55%;
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 28%, #000 58%, rgba(0, 0, 0, .3) 80%, transparent 94%);
    mask-image: linear-gradient(180deg, transparent 0, #000 28%, #000 58%, rgba(0, 0, 0, .3) 80%, transparent 94%);
    -webkit-mask-composite: source-over; mask-composite: add;
  }
  .cta-inner { margin-top: -1rem; padding-top: 0; padding-bottom: 3.5rem; }
  .cta-actions .btn { width: 100%; }
}

/* Interior page opening: the title on the paper, a photograph of what the
   page is about beside it, fading into the page on its left and below. */
.page-head { position: relative; isolation: isolate; overflow: hidden; background: var(--paper); padding-block: 1.5rem clamp(2.5rem, 1.75rem + 2.6vw, 4.25rem); }
.page-head-media { position: absolute; inset: 0 0 0 38%; z-index: -1; }
.page-head-media img {
  width: 100%; height: 100%; object-fit: cover;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, rgba(0, 0, 0, .55) 22%, #000 48%), linear-gradient(0deg, transparent 0, #000 32%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent 0, rgba(0, 0, 0, .55) 22%, #000 48%), linear-gradient(0deg, transparent 0, #000 32%);
  mask-composite: intersect;
}
.page-head-inner { position: relative; }
.page-head-copy { display: grid; gap: 1.1rem; justify-items: start; max-width: 36rem; margin-top: clamp(2rem, 1.25rem + 2.6vw, 3.75rem); }
.page-head-copy .page-title { max-width: 18ch; }
.page-lede { font-size: clamp(1.0625rem, 1rem + .25vw, 1.15rem); line-height: 1.6; color: var(--ink-2); max-width: 32rem; }
.page-head-copy .jump { margin-top: .35rem; }
/* Without a photograph the title and lede share the row, so the opening stays
   short and the content starts sooner. */
@media (min-width: 62em) {
  /* The lede settles to the foot of the title, so both end on one line */
  .page-head--plain .page-head-copy { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); align-items: end; column-gap: 4rem; max-width: none; }
  .page-head--plain .page-head-copy > :not(.page-title) { grid-column: 2; }
  .page-head--plain .page-head-copy .page-title { grid-row: 1; }
}
@media (max-width: 47.99em) {
  .page-head:not(.page-head--plain) { padding-top: 0; }
  .page-head-media { position: relative; inset: auto; height: 9rem; margin-bottom: .35rem; }
  .page-head-media img {
    -webkit-mask-image: linear-gradient(180deg, #000 40%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 40%, transparent 100%);
    -webkit-mask-composite: source-over; mask-composite: add;
  }
  .page-head-copy { margin-top: 1.5rem; }
}

/* Certification marks: printed on the page, never boxed */
.cert { display: grid; align-content: start; justify-items: start; gap: .2rem; }
.cert-figure { display: flex; align-items: center; height: 4.5rem; margin-bottom: .7rem; }
.cert-mark { width: calc(var(--w) * 1px * var(--cert-scale, 1)); height: auto; max-width: 100%; }
.cert-name { font-weight: 600; font-size: .9375rem; color: var(--ink); }

/* FAQ */
.faq-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 2rem clamp(2rem, 1rem + 4vw, 6rem); align-items: start; }
.faq-grid .h2 { max-width: 17ch; }
@media (max-width: 61.99em) { .faq-grid { grid-template-columns: 1fr; } }
.faq { border-top: 1px solid var(--line-2); }
.faq-item { border-bottom: 1px solid var(--line-2); }
.faq-item summary {
  display: flex; justify-content: space-between; align-items: center; gap: 1.5rem;
  padding: 1.25rem 0; cursor: pointer; list-style: none; font: var(--w-title) 1.125rem/1.4 var(--serif); letter-spacing: -.004em; color: var(--ink);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-q { margin: 0; font: inherit; }
.faq-item summary .icon { color: var(--ink-3); transition: transform var(--t) var(--ease); }
.faq-item[open] summary .icon { transform: rotate(180deg); }
.faq-item summary:hover span { text-decoration: underline; text-decoration-color: var(--bronze); text-underline-offset: .25em; }
.faq-answer { padding: 0 2.5rem 1.4rem 0; color: var(--ink-2); max-width: 44rem; }

/* 8  Home ----------------------------------------------------------------- */
/* The opening: the headline set on the paper, the hills coming in from the
   right and fading into the page under it. Nothing sits on the photograph
   but the navigation, which crosses open sky. */
.hero {
  position: relative; isolation: isolate; overflow: hidden; display: grid; align-items: center;
  min-height: clamp(34rem, 94vh, 56rem); min-height: clamp(34rem, 94svh, 56rem);
  background: var(--paper); color: var(--ink);
}
/* The photograph begins a little before the end of the text column, wherever
   the column sits, so the type is always on the paper and never on the fade. */
.hero-media { position: absolute; inset: 0 0 0 clamp(28%, calc(max(0px, (100% - var(--shell)) / 2) + var(--gutter) + 26rem), 50%); z-index: -2; }
.hero-img {
  width: 100%; height: 100%; object-fit: cover; object-position: 62% 50%; transform-origin: 70% 60%;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, rgba(0, 0, 0, .3) 16%, rgba(0, 0, 0, .8) 32%, #000 46%);
  mask-image: linear-gradient(90deg, transparent 0, rgba(0, 0, 0, .3) 16%, rgba(0, 0, 0, .8) 32%, #000 46%);
}
/* A breath of paper along the top, so the navigation reads over the sky. */
.hero::before {
  content: ""; position: absolute; inset: 0 0 auto; height: 9rem; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, rgba(244, 241, 232, .55), rgba(244, 241, 232, 0));
}
.hero-inner { position: relative; width: 100%; padding-top: calc(var(--header-h) + 2.5rem); padding-bottom: clamp(3rem, 2rem + 5vh, 5.5rem); }
.hero-copy { display: grid; gap: 1.35rem; justify-items: start; max-width: 33rem; }
@media (max-width: 74.99em) { .hero-copy { max-width: 29rem; } }
.hero-eyebrow { font-size: .75rem; font-weight: 600; letter-spacing: .3em; text-transform: uppercase; color: var(--bronze-ink); }
.hero-title { max-width: 16ch; }
.hero-lede { font-size: clamp(1.0625rem, 1rem + .25vw, 1.15rem); line-height: 1.6; color: var(--ink-2); max-width: 28rem; }
.hero-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: .4rem; }
.hero .btn-secondary { background: rgba(244, 241, 232, .7); }
/* Phones and upright tablets: the photograph above, the headline below it on
   the paper, the image fading down into the page. */
@media (max-width: 47.99em), (orientation: portrait) and (max-width: 63.99em) {
  .hero { display: block; min-height: 0; }
  .hero-media { position: relative; inset: auto; height: clamp(17rem, 46svh, 32rem); }
  .hero-img {
    object-position: 50% 45%;
    -webkit-mask-image: linear-gradient(180deg, #000 56%, rgba(0, 0, 0, .3) 80%, transparent 94%);
    mask-image: linear-gradient(180deg, #000 56%, rgba(0, 0, 0, .3) 80%, transparent 94%);
  }
  .hero::before { height: 6.5rem; background: linear-gradient(180deg, rgba(244, 241, 232, .82), rgba(244, 241, 232, 0)); }
  .hero-inner { margin-top: -1.75rem; padding-top: 0; padding-bottom: clamp(2.75rem, 2rem + 3vw, 4rem); }
  .hero-copy { max-width: 36rem; gap: 1.1rem; }
}
@media (max-width: 47.99em) {
  .hero-actions { width: 100%; }
  .hero-actions .btn { flex: 1 1 100%; }
}
/* Short landscape screens (a phone on its side): the copy keeps its room. */
@media (orientation: landscape) and (max-height: 32em) {
  .hero { min-height: 0; }
  .hero-inner { padding-top: calc(var(--header-h) + 1.5rem); padding-bottom: 2.5rem; }
  .hero-copy { max-width: 26rem; }
}

/* The range: three groups on forest green, each shown by what it is made
   from. The deep green is the mark's; the photographs carry the daylight. */
.range { position: relative; background: var(--forest-900); color: var(--on-forest); padding-block: var(--section); }
.range .h2 { color: var(--on-forest); }
.range-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1rem 3rem; align-items: end; margin-bottom: var(--head-gap); }
.range-head-aside { display: grid; gap: .9rem; justify-items: start; justify-self: end; max-width: 26rem; color: var(--on-forest-2); }
.range-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.25rem, .75rem + 1.6vw, 2.5rem); }
.range-panel { display: grid; align-content: start; gap: 1.35rem; }
.range-media { position: relative; display: block; overflow: hidden; aspect-ratio: 4 / 3; background: var(--forest-800); border-radius: var(--radius); }
.range-img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.6s var(--ease); }
@media (hover: hover) { .range-panel:hover .range-img { transform: scale(1.045); } }
.range-body { display: grid; gap: .55rem; }
.range-title { color: var(--on-forest); font-size: clamp(1.35rem, 1.22rem + .45vw, 1.65rem); line-height: 1.15; letter-spacing: -.01em; }
.range-title a { transition: color var(--t-fast); }
.range-title a:hover { color: var(--bronze-light); }
.range-desc { color: var(--on-forest-2); font-size: .9375rem; max-width: 34ch; }
.range-list { margin-top: .7rem; border-top: 1px solid var(--forest-line); }
.range-list a { display: grid; gap: .05rem; padding: .6rem 1.75rem .65rem 0; border-bottom: 1px solid var(--forest-line); position: relative; }
.range-list a::after {
  content: ""; position: absolute; right: .25rem; top: 50%; width: .5rem; height: .5rem; margin-top: -.25rem;
  border-top: 1.5px solid var(--on-forest-3); border-right: 1.5px solid var(--on-forest-3); transform: rotate(45deg);
  transition: transform var(--t) var(--ease), border-color var(--t-fast);
}
.rl-name { font-weight: 500; color: var(--on-forest); }
.rl-grade { font-size: .8125rem; color: var(--on-forest-3); }
.range-list a:hover .rl-name { text-decoration: underline; text-decoration-color: var(--bronze-light); text-underline-offset: .25em; }
.range-list a:hover::after { transform: translateX(3px) rotate(45deg); border-color: var(--bronze-light); }
@media (max-width: 61.99em) {
  .range-head { grid-template-columns: 1fr; }
  .range-head-aside { justify-self: start; }
  .range-grid { grid-template-columns: 1fr; gap: 3rem; }
  .range-panel { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 2rem; align-items: start; }
}
@media (max-width: 47.99em) {
  .range-panel { grid-template-columns: 1fr; gap: 1.1rem; }
  .range-media { aspect-ratio: 16 / 10; }
}

/* Supply and quality */
.supply-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2.5rem, 1.5rem + 4vw, 6rem); align-items: center; }
.supply-figure { position: relative; overflow: hidden; background: var(--paper-3); border-radius: var(--radius); }
.supply-figure img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.supply-copy { display: grid; gap: 1.25rem; justify-items: start; }
.supply-copy .h2 { max-width: 19ch; }
.pillars { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 2.25rem; width: 100%; margin-block: .25rem .5rem; }
.pillar { padding: 1.15rem 0 1.3rem; border-top: 1px solid var(--line-2); }
.pillar dt { font: var(--w-name) 1.15rem/1.25 var(--serif); letter-spacing: -.006em; margin-bottom: .4rem; }
.pillar dd { color: var(--ink-2); font-size: .9375rem; max-width: 24rem; }
@media (max-width: 61.99em) {
  .supply-grid { grid-template-columns: 1fr; }
  .supply-figure img { aspect-ratio: 16 / 10; object-position: 50% 30%; }
}
@media (max-width: 39.99em) { .pillars { grid-template-columns: 1fr; } }

/* The marks in a row on the paper, each at its optical size. */
.certs-band { display: grid; gap: 1.6rem; margin-top: clamp(3rem, 2.25rem + 3vw, 5rem); padding-top: 2rem; border-top: 1px solid var(--line); }
.certs-caption { font-size: .75rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); }
.certs--strip { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.75rem 2rem; }
.certs--strip .cert-figure { height: auto; margin: 0; }
@media (max-width: 74.99em) { .certs--strip { justify-content: flex-start; gap: 1.75rem 2.5rem; } }
@media (max-width: 39.99em) { .certs--strip { gap: 1.5rem 1.75rem; --cert-scale: .82; } }

/* 9  Catalogue and cards -------------------------------------------------- */
.cat-nav { position: sticky; top: var(--header-h); z-index: 30; background: var(--paper); border-block: 1px solid var(--line); }
.cat-nav ul { display: flex; gap: clamp(1.25rem, 1rem + 1.5vw, 2.75rem); overflow-x: auto; scrollbar-width: none; }
@media (max-width: 47.99em) { .cat-nav ul { -webkit-mask-image: linear-gradient(90deg, #000 82%, transparent); mask-image: linear-gradient(90deg, #000 82%, transparent); padding-right: 2rem; } }
.cat-nav ul::-webkit-scrollbar { display: none; }
.cat-nav a {
  position: relative; display: inline-flex; align-items: baseline; gap: .5rem; padding: 1.1rem 0;
  font-weight: 500; color: var(--ink-3); white-space: nowrap; transition: color var(--t-fast);
}
.cat-nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--forest-900); transform: scaleX(0); transform-origin: left; transition: transform var(--t) var(--ease); }
.cat-nav a:hover, .cat-nav a.is-current { color: var(--ink); }
.cat-nav a.is-current::after { transform: scaleX(1); }
.cat-count { font-size: .75rem; font-weight: 600; color: var(--bronze-ink); }

.catalogue { padding-block: clamp(1.75rem, 1.25rem + 1.6vw, 3rem) var(--section); }
.cat-section + .cat-section { margin-top: clamp(3rem, 2.25rem + 3vw, 5rem); }
.cat-head {
  position: relative; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center;
  min-height: clamp(8rem, 5.5rem + 4.6vw, 10.5rem); margin-bottom: 1.5rem; border-bottom: 1px solid var(--line-2);
}
.cat-head-copy { display: grid; gap: .55rem; padding-block: 1.5rem; position: relative; z-index: 1; }
.cat-head-copy p { color: var(--ink-2); max-width: 26rem; }
.cat-head-media { position: relative; align-self: stretch; overflow: hidden; }
.cat-head-media img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, rgba(0, 0, 0, .6) 20%, #000 42%);
  mask-image: linear-gradient(90deg, transparent 0, rgba(0, 0, 0, .6) 20%, #000 42%);
}
@media (max-width: 47.99em) {
  .cat-head { grid-template-columns: 1fr; min-height: 0; }
  .cat-head-media { order: -1; height: 9rem; margin-inline: calc(var(--gutter) * -1); }
  .cat-head-media img {
    -webkit-mask-image: linear-gradient(180deg, #000 45%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 45%, transparent 100%);
  }
  .cat-head-copy { padding-block: .85rem 1.25rem; }
}

.card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.25rem, .9rem + 1.2vw, 2.25rem); }
@media (max-width: 67.99em) { .card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 39.99em) { .card-grid { grid-template-columns: 1fr; } }
.card {
  position: relative; display: grid; grid-template-rows: auto 1fr; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius);
  transition: border-color var(--t) var(--ease), box-shadow 500ms var(--ease), transform 500ms var(--ease);
}
.card:hover { border-color: var(--line-2); box-shadow: 0 24px 44px -30px rgba(17, 38, 27, .42); transform: translateY(-2px); }
.card:focus-within { border-color: var(--ink); }
.card-media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--paper-3); }
.card-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity 700ms var(--ease), transform 1.4s var(--ease); }
.card-img--alt { opacity: 0; }
@media (hover: hover) {
  .card:hover .card-img { transform: scale(1.04); }
  .card:hover .card-img--alt { opacity: 1; }
}
.card-body { display: grid; grid-template-rows: auto auto 1fr auto; padding: 1.35rem 1.4rem 1.3rem; }
.card-title { font: var(--w-name) 1.35rem/1.2 var(--serif); letter-spacing: -.01em; }
.card-link { outline: none; }
.card-link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.card-link:focus-visible::after { outline: 2px solid var(--bronze); outline-offset: 2px; }
.card-binomial { margin-top: .25rem; font-family: var(--serif); font-size: .9375rem; color: var(--ink-3); }
.card-specs { margin-top: 1.1rem; border-top: 1px solid var(--line); align-self: start; }
.card-specs div { display: grid; grid-template-columns: 6.4rem minmax(0, 1fr); gap: .8rem; padding: .55rem 0; border-bottom: 1px solid var(--line); font-size: .8125rem; line-height: 1.45; }
.card-specs dt { color: var(--ink-3); }
.card-specs dd { color: var(--ink); }
.card-more { display: inline-flex; align-items: center; gap: .45rem; margin-top: 1.15rem; font-size: .875rem; font-weight: 600; color: var(--forest-800); }
.card-more .icon { transition: transform var(--t) var(--ease); }
.card:hover .card-more .icon { transform: translateX(4px); }
.card-grid--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 67.99em) { .card-grid--three { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 39.99em) { .card-grid--three { grid-template-columns: 1fr; } }

.unlisted { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem 3rem; flex-wrap: wrap; margin-top: clamp(4rem, 3rem + 3vw, 6rem); padding: clamp(1.75rem, 1.4rem + 1.5vw, 2.5rem); background: var(--paper-2); border-radius: var(--radius); }
.unlisted p { color: var(--ink-2); max-width: 38rem; margin-top: .45rem; }

/* 10  Product page -------------------------------------------------------- */
.product-top { background: var(--tint, var(--paper-2)); padding-block: 1.75rem clamp(3rem, 2rem + 3vw, 5rem); }
.product-hero { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(2rem, 1rem + 4vw, 5.5rem); align-items: start; margin-top: 1.75rem; }
.gallery { display: grid; gap: .8rem; }
.gallery-stage { position: relative; aspect-ratio: 1; overflow: hidden; background: var(--tint-2, var(--paper-3)); border-radius: var(--radius); }
.gallery-frame { position: absolute; inset: 0; }
.gallery-frame img { width: 100%; height: 100%; object-fit: cover; }
.gallery-frame.is-entering { animation: fade-in 500ms var(--ease) both; }
.gallery-thumbs { display: flex; gap: .6rem; }
.gallery-thumb {
  display: flex; align-items: center; gap: .65rem; padding: .3rem .9rem .3rem .3rem; border-radius: var(--radius);
  border: 1px solid rgba(21, 36, 27, .16); background: rgba(251, 249, 244, .5); font-size: .8125rem; font-weight: 500; color: var(--ink-2);
  transition: border-color var(--t-fast), background-color var(--t-fast);
}
.gallery-thumb img { width: 2.75rem; height: 2.75rem; object-fit: cover; border-radius: 1px; }
.gallery-thumb:hover { border-color: rgba(21, 36, 27, .4); }
.gallery-thumb.is-active { border-color: var(--ink); background: var(--surface); color: var(--ink); }
.product-summary { display: grid; gap: 1.1rem; align-content: start; padding-top: .25rem; }
.product-cat a { font-size: .75rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--bronze-deep); }
.product-top .breadcrumbs ol, .product-top .breadcrumbs [aria-current] { color: var(--ink-2); }
.product-cat a:hover { text-decoration: underline; text-underline-offset: .3em; }
.product-title { margin-top: -.35rem; }
.product-binomial { font-family: var(--serif); font-size: 1.15rem; color: var(--ink-2); margin-top: -.45rem; }
.product-binomial .sep { margin-inline: .2rem; }
.product-standard {
  display: flex; align-items: center; gap: .85rem; font-size: .8125rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--forest-800);
}
.product-standard::before { content: ""; width: 1.75rem; height: 1px; background: var(--bronze); flex: none; }
.product-lede { color: var(--ink-2); font-size: 1.0625rem; line-height: 1.6; max-width: 34rem; }
.product-aka { font-size: .875rem; color: var(--ink-2); }
.facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid rgba(21, 36, 27, .16); }
.facts div { padding: .75rem 1rem .8rem 0; border-bottom: 1px solid rgba(21, 36, 27, .16); }
.facts div:nth-child(even) { padding-left: 1rem; border-left: 1px solid rgba(21, 36, 27, .16); }
.facts dt { font-size: .75rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); margin-bottom: .2rem; }
.facts dd { font-size: .9375rem; line-height: 1.45; }
.product-grades { display: grid; gap: .6rem; }
.product-grades .label { color: var(--ink-2); }
.product-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-block: .2rem .45rem; }
@media (max-width: 61.99em) {
  .product-hero { grid-template-columns: 1fr; }
  .gallery { max-width: 36rem; }
}
@media (max-width: 39.99em) {
  .facts { grid-template-columns: 1fr; }
  .facts div:nth-child(even) { padding-left: 0; border-left: 0; }
  .facts div { display: grid; grid-template-columns: 8.5rem 1fr; gap: .75rem; padding: .6rem 0; }
  .facts dt { margin: 0; padding-top: .2rem; }
  .product-actions .btn { flex: 1 1 100%; }
}

.subnav { position: sticky; top: var(--header-h); z-index: 30; background: var(--paper); border-bottom: 1px solid var(--line); }
.subnav ul { display: flex; gap: .25rem; overflow-x: auto; scrollbar-width: none; margin-inline: -.6rem; }
.subnav ul::-webkit-scrollbar { display: none; }
.subnav a { position: relative; display: block; padding: 1rem .6rem; font-size: .875rem; font-weight: 500; color: var(--ink-3); white-space: nowrap; transition: color var(--t-fast); }
.subnav a::after { content: ""; position: absolute; left: .6rem; right: .6rem; bottom: -1px; height: 2px; background: var(--forest-900); transform: scaleX(0); transition: transform var(--t) var(--ease); }
.subnav a:hover, .subnav a.is-current { color: var(--ink); }
.subnav a.is-current::after { transform: scaleX(1); }

.note { padding: 1.3rem 1.45rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); color: var(--ink-2); max-width: 38rem; justify-self: end; }
.note-label { font-size: .75rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--bronze-ink); margin-bottom: .45rem; }
@media (max-width: 61.99em) { .note { justify-self: start; } }

.grades { font-size: .9375rem; background: var(--surface); border: 1px solid var(--line); }
.grades th, .grades td { padding: 1rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
.grades thead th { font-size: .75rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); background: var(--paper-2); white-space: nowrap; }
.grades tbody tr { transition: background-color var(--t-fast); }
.grades tbody tr:hover, .grades tbody tr:target { background: #fdfcf8; }
.grades tbody tr:target .grade-name { color: var(--bronze-ink); }
.grade-name { font-weight: 600; }
.grades td { color: var(--ink-2); }
.grade-action { text-align: right; white-space: nowrap; }
.table-note { margin-top: 1rem; font-size: .875rem; color: var(--ink-3); max-width: 52rem; }
@media (max-width: 61.99em) {
  .grades, .grades tbody { display: block; }
  .grades thead { display: none; }
  .grades { background: none; border: 0; }
  .grades tbody { display: grid; gap: .6rem; }
  .grades tr {
    display: grid; grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "name status" "std method" "form form" "use action";
    gap: .25rem 1rem; padding: .9rem 1rem .95rem; background: var(--surface);
    border: 1px solid var(--line); border-radius: var(--radius);
  }
  .grades th, .grades td { display: block; border: 0; padding: 0; font-size: .875rem; line-height: 1.45; }
  .grades th { grid-area: name; padding-bottom: .2rem; }
  .grades td:nth-child(2) { grid-area: std; color: var(--ink); }
  .grades td:nth-child(3) { grid-area: method; text-align: right; color: var(--ink-3); }
  .grades td:nth-child(4) { grid-area: form; color: var(--ink-3); }
  .grades td:nth-child(5) { grid-area: use; color: var(--ink-3); }
  .grades td:nth-child(5)::before { content: "Use: "; }
  .grades td:nth-child(6) { grid-area: status; text-align: right; }
  .grades .grade-action { grid-area: action; align-self: end; text-align: right; }
  .grade-name { font-size: 1rem; }
}

.spec-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: 2.5rem clamp(2rem, 1rem + 4vw, 5rem); align-items: start; }
.spec-grid--even { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); }
.spec-basis { margin: .9rem 0 1.6rem; color: var(--ink-2); }
.spec-table { font-size: .9375rem; border-top: 1px solid var(--line-2); }
.spec-table th, .spec-table td { padding: .82rem 0; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.spec-table th { width: 38%; padding-right: 1.5rem; font-weight: 400; color: var(--ink-3); }
.spec-table td { color: var(--ink); }
.full-spec { display: grid; gap: 1.1rem; padding: 1.7rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.full-spec p { color: var(--ink-2); font-size: .9375rem; }
.full-spec .ticks li { font-size: .9375rem; }
@media (min-width: 62em) { .full-spec { position: sticky; top: calc(var(--header-h) + 5rem); } }
@media (max-width: 61.99em) { .spec-grid, .spec-grid--even { grid-template-columns: 1fr; } }

.uses { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line-2); }
.use { display: grid; grid-template-columns: auto 1fr; gap: 1rem; align-items: start; padding: 1.45rem 1.5rem 1.55rem 0; border-bottom: 1px solid var(--line); }
.use:not(:nth-child(3n + 1)) { padding-left: 1.5rem; border-left: 1px solid var(--line); }
.use-icon { width: 1.75rem; height: 1.75rem; color: var(--bronze); margin-top: .1rem; }
.use-title { font-weight: 600; font-size: 1rem; line-height: 1.35; }
.use-grade { margin-top: .25rem; font-size: .875rem; color: var(--ink-2); line-height: 1.5; }
@media (max-width: 61.99em) {
  .uses { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .use:not(:nth-child(3n + 1)) { padding-left: 0; border-left: 0; }
  .use:nth-child(even) { padding-left: 1.25rem; border-left: 1px solid var(--line); }
}
@media (max-width: 39.99em) {
  .uses { grid-template-columns: 1fr; }
  .use:nth-child(even) { padding-left: 0; border-left: 0; }
  .use { padding: 1.1rem 0; }
}

.docs-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 2rem clamp(2rem, 1rem + 4vw, 5rem); align-items: start; }
.docs-grid--wide { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); }
.docs-grid--wide .h2 { margin-bottom: 1rem; }
.docs-grid--wide .section-sub { margin-bottom: 1.6rem; }
.doc-list { border-top: 1px solid var(--line-2); }
.doc-list li { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1.5fr) 8.5rem; gap: .5rem 1.25rem; padding: .9rem 0; border-bottom: 1px solid var(--line); font-size: .9375rem; align-items: start; }
.doc-name { display: flex; gap: .6rem; align-items: flex-start; font-weight: 500; }
.doc-name .icon { color: var(--bronze); margin-top: .2rem; }
.doc-covers { color: var(--ink-2); }
.doc-when { font-size: .875rem; color: var(--ink); white-space: nowrap; text-align: right; }
.docs-table { font-size: .9375rem; border-top: 1px solid var(--line-2); }
.docs-table th, .docs-table td { padding: .9rem 1rem .9rem 0; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.docs-table thead th { font-size: .75rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.docs-table tbody th { font-weight: 500; }
.doc-th { display: flex; gap: .6rem; align-items: flex-start; }
.doc-th .icon { color: var(--bronze); margin-top: .2rem; }
.docs-table td { color: var(--ink-2); }
.docs-table td:last-child { white-space: nowrap; color: var(--ink); padding-right: 0; }
@media (max-width: 61.99em) { .docs-grid, .docs-grid--wide { grid-template-columns: 1fr; } }
@media (max-width: 47.99em) {
  .doc-list li { grid-template-columns: 1fr auto; }
  .doc-covers { grid-column: 1 / -1; grid-row: 2; padding-left: 1.75rem; font-size: .875rem; }
  .docs-table thead { display: none; }
  .docs-table tr { display: grid; grid-template-columns: 1fr auto; padding: .75rem 0; border-bottom: 1px solid var(--line); }
  .docs-table th, .docs-table td { border: 0; padding: .1rem 0; }
  .docs-table td:nth-child(2) { grid-column: 1; grid-row: 2; font-size: .875rem; padding-left: 1.7rem; }
  .docs-table td:last-child { grid-column: 2; grid-row: 1; font-size: .8125rem; color: var(--ink-3); }
}

/* 11  Applications -------------------------------------------------------- */
.app-row { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 2.5rem clamp(2.5rem, 1rem + 5vw, 6rem); align-items: start; }
.app-section--flip .app-visual { order: 2; }
.app-visual { display: grid; gap: 1.25rem; }
.app-visual img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius); }
.formats { display: flex; flex-wrap: wrap; gap: .4rem; }
.formats li { padding: .35rem .75rem; border: 1px solid var(--line-2); border-radius: var(--radius); font-size: .8125rem; font-weight: 500; color: var(--ink-2); }
.app-copy { display: grid; gap: 1.1rem; align-content: start; }
.app-copy .h4 { margin-top: 1rem; }
.app-lede { font-size: 1.0625rem; color: var(--ink-2); max-width: 36rem; }
.range-index { display: grid; }
.range-index a { display: grid; grid-template-columns: 3rem 1fr; gap: .9rem; align-items: center; padding: .55rem 0; border-top: 1px solid var(--line); }
.range-index--two { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1.5rem; border-bottom: 1px solid var(--line); }
.ri-thumb { width: 3rem; height: 3rem; object-fit: cover; border-radius: 1px; background: var(--paper-3); }
.ri-text { display: grid; gap: .05rem; }
.ri-name { font-weight: 500; font-size: .9375rem; line-height: 1.3; }
.ri-meta { font-size: .8125rem; color: var(--ink-3); line-height: 1.35; }
.range-index a:hover .ri-name { text-decoration: underline; text-decoration-color: var(--bronze); text-underline-offset: .22em; }
@media (max-width: 61.99em) {
  .app-row { grid-template-columns: 1fr; }
  .app-section--flip .app-visual { order: 0; }
}
@media (max-width: 39.99em) { .range-index--two { grid-template-columns: 1fr; } }

/* 12  Quality ------------------------------------------------------------- */
.certs-note { margin-top: clamp(1.75rem, 1.25rem + 1.5vw, 2.5rem); font-size: .6875rem; line-height: 1.4; color: var(--ink-3); }
.certs--grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2.25rem clamp(1.5rem, 1rem + 2vw, 3rem); margin-top: var(--head-gap); }
.certs--grid .cert { padding-top: 1.35rem; border-top: 1px solid var(--line-2); }
@media (max-width: 74.99em) { .certs--grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 47.99em) { .certs--grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.75rem 1.25rem; --cert-scale: .85; } .certs--grid .cert-figure { height: 3.9rem; } }
.steps { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0 1.75rem; margin-top: clamp(2.25rem, 1.5rem + 2.5vw, 3.5rem); }
.step { position: relative; padding-top: 1.4rem; border-top: 1px solid var(--line-2); }
.step-num { display: block; font: 500 2rem/1 var(--serif); color: var(--bronze-ink); margin-bottom: 1.1rem; font-variant-numeric: lining-nums; }
.step-title { font: var(--w-name) 1.2rem/1.25 var(--serif); letter-spacing: -.006em; margin-bottom: .55rem; }
.step p { color: var(--ink-2); font-size: .9375rem; }
@media (max-width: 74.99em) { .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.75rem 1.75rem; } }
@media (max-width: 39.99em) { .steps { grid-template-columns: 1fr; gap: 2rem; } }
.lead-list { display: grid; border-top: 1px solid var(--line); }
.lead-list div { display: grid; gap: .1rem; padding: .75rem 0; border-bottom: 1px solid var(--line); }
.lead-list dt { font-size: .875rem; color: var(--ink-3); }
.lead-list dd { font-weight: 500; }

/* 13  About --------------------------------------------------------------- */
/* A journey from the hills to the specification. Each sentence of Shivrai's
   introduction sits beside the image it describes, and every image dissolves
   into the page around it, so one chapter runs into the next without a seam:
   the hills, the plant, the ingredients, the field and the laboratory, the
   leaf, then morning light over the gardens. */
.ab-label {
  display: flex; align-items: center; gap: .85rem; margin: 0;
  font: 600 .75rem/1.2 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--ink-2);
}
.ab-num { font: 500 1.4rem/1 var(--serif); letter-spacing: 0; color: var(--bronze-ink); font-variant-numeric: lining-nums; }
.ab-label::after { content: ""; flex: 0 0 3.25rem; height: 1px; background: var(--bronze); transform-origin: left; }
.ab-label--light { color: var(--on-forest-3); }
.ab-label--light .ab-num { color: var(--bronze-light); }
.ab-label--light::after { background: var(--bronze-light); }
.ab-statement { font: 400 clamp(1.45rem, 1.08rem + 1.1vw, 1.95rem)/1.34 var(--serif); letter-spacing: -.012em; color: var(--ink); max-width: 34rem; text-wrap: pretty; }
.ab-sentence { font: 400 clamp(1.1rem, 1rem + .35vw, 1.3rem)/1.55 var(--serif); color: var(--ink-2); max-width: 38rem; text-wrap: pretty; }
.ab-headline { font: var(--w-title) clamp(2rem, 1.3rem + 2.3vw, 3.25rem)/1.08 var(--serif); letter-spacing: -.02em; color: var(--ink); max-width: 12ch; text-wrap: balance; }
.ab-card {
  position: relative; display: grid; gap: 1.25rem; justify-items: start;
  padding: clamp(1.75rem, 1.2rem + 2vw, 3rem); background: var(--surface); border-radius: var(--radius);
  box-shadow: 0 44px 70px -48px rgba(17, 38, 27, .6);
}

/* Opening: the hills full bleed, the name set in the middle of them. The
   paper gathers softly behind the type only, like light, so the sky and the
   gardens around it keep their colour; the chapters sit on the paper the
   hills dissolve into. */
.ab-hero {
  position: relative; isolation: isolate; overflow: hidden; display: grid; grid-template-rows: minmax(0, 1fr) auto;
  min-height: clamp(38rem, 100vh, 64rem); min-height: clamp(38rem, 100svh, 64rem); background: var(--paper);
}
.ab-hero-media { position: absolute; inset: 0; z-index: -2; }
.ab-hero-img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%; transform-origin: 62% 70%; }
.ab-hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(244, 241, 232, .82) 0, rgba(244, 241, 232, 0) 9.5rem),
    linear-gradient(0deg, rgb(244, 241, 232) 0, rgba(244, 241, 232, .94) 9rem, rgba(244, 241, 232, 0) 18rem),
    radial-gradient(ellipse 42% 18rem at 50% 50%, rgba(244, 241, 232, .86) 0, rgba(244, 241, 232, .74) 42%, rgba(244, 241, 232, .3) 74%, rgba(244, 241, 232, 0) 100%);
}
.ab-hero-inner { display: grid; place-items: center; padding-top: calc(var(--header-h) + 2rem); padding-bottom: 2rem; }
.ab-hero-copy { display: grid; gap: 1.1rem; justify-items: center; text-align: center; max-width: 46rem; text-shadow: 0 0 1.5rem rgba(244, 241, 232, .7); }
.ab-eyebrow { display: flex; align-items: center; gap: 1rem; font: 600 .8125rem/1.2 var(--sans); letter-spacing: .3em; text-transform: uppercase; color: #4b3c1f; padding-left: .3em; }
.ab-eyebrow::before, .ab-eyebrow::after { content: ""; width: 2.25rem; height: 1px; background: var(--bronze); }
.ab-title { font: var(--w-title) clamp(2.6rem, 1.45rem + 3.6vw, 4.6rem)/1.02 var(--serif); letter-spacing: -.024em; color: var(--ink); text-wrap: balance; }
.ab-tagline { font: italic 400 clamp(1.125rem, 1rem + .45vw, 1.4rem)/1.4 var(--serif); color: var(--ink); max-width: 34ch; text-wrap: balance; }
.ab-contents { width: 100%; padding-bottom: clamp(1.75rem, 1.25rem + 2vh, 3rem); }
.ab-contents ol { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid rgba(21, 36, 27, .22); }
.ab-contents a { display: flex; align-items: baseline; gap: .8rem; padding: 1rem 1rem 1rem 0; color: var(--ink); transition: color var(--t-fast); }
.ab-contents li + li a { padding-left: 1.25rem; border-left: 1px solid rgba(21, 36, 27, .14); }
.ab-contents-num { font: 600 1rem/1 var(--serif); color: var(--bronze-deep); font-variant-numeric: lining-nums; }
.ab-contents-name { font-size: .9375rem; font-weight: 500; transition: transform var(--t) var(--ease); }
.ab-contents a:hover { color: var(--forest-700); }
.ab-contents a:hover .ab-contents-name { transform: translateX(4px); }

/* 01 Who we are: the plant rises from the right */
.ab-who { position: relative; isolation: isolate; overflow: hidden; display: grid; align-items: center; min-height: clamp(28rem, 20rem + 22vw, 42rem); padding-block: clamp(4rem, 3rem + 4vw, 7rem); }
.ab-who-media {
  position: absolute; top: 0; bottom: 0; right: 0; width: 50%; z-index: -1;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, rgba(0, 0, 0, .55) 24%, #000 50%), linear-gradient(180deg, transparent 0, #000 20%, #000 80%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent 0, rgba(0, 0, 0, .55) 24%, #000 50%), linear-gradient(180deg, transparent 0, #000 20%, #000 80%, transparent 100%);
  mask-composite: intersect;
}
.ab-who-media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; transform-origin: 50% 60%; }
.ab-who-inner { display: grid; gap: 1.6rem; justify-items: start; }

/* 02 What we supply: the four kinds of ingredient, on the green of the mark */
.ab-supply { position: relative; isolation: isolate; overflow: hidden; background: var(--forest-900); color: var(--on-forest-2); padding-block: clamp(4.5rem, 3rem + 5vw, 7.5rem); }
.ab-supply-texture {
  position: absolute; inset: 0; z-index: -1; opacity: .34;
  -webkit-mask-image: radial-gradient(ellipse 75% 85% at 88% 12%, #000 0%, transparent 72%);
  mask-image: radial-gradient(ellipse 75% 85% at 88% 12%, #000 0%, transparent 72%);
}
.ab-supply-texture img { width: 100%; height: 100%; object-fit: cover; }
.ab-supply-head { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 1.25rem clamp(2rem, 1rem + 4vw, 6rem); align-items: start; margin-bottom: clamp(2.5rem, 2rem + 2vw, 4rem); }
.ab-supply-head .ab-label { padding-top: .5rem; }
.ab-sentence--light { color: var(--on-forest-2); }
.ab-em { color: var(--on-forest); font-style: italic; }
.ab-panels { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(.9rem, .5rem + 1.3vw, 1.75rem); }
.ab-panel a { display: grid; gap: .9rem; color: var(--on-forest); }
.ab-panel-media { position: relative; display: block; overflow: hidden; aspect-ratio: 4 / 5; border-radius: var(--radius); background: var(--forest-800); }
.ab-panel-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.6s var(--ease); }
.ab-panel-name { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding-top: .85rem; border-top: 1px solid var(--forest-line); font: var(--w-name) clamp(1.05rem, .97rem + .35vw, 1.3rem)/1.25 var(--serif); letter-spacing: -.006em; }
.ab-panel-name .icon { flex: none; color: var(--on-forest-3); transition: transform var(--t) var(--ease), color var(--t-fast); }
.ab-panel a:focus-visible { outline-color: var(--bronze-light); outline-offset: 6px; }
@media (hover: hover) {
  .ab-panel a:hover .ab-panel-media img { transform: scale(1.05); }
  .ab-panel a:hover .icon { transform: translateX(4px); color: var(--bronze-light); }
}

/* 03 Manufacturing partnerships: hand to hand. A turmeric root passed between
   two hands in the field, crossfading into a gloved hand holding the vials
   it is tested in. The lab image (on top) rises from transparent at 48% to
   opaque at 56%; the field beneath holds until 52% and is gone by 60%, so
   neither shows an edge, even where both dissolve into the bands above and
   below. */
.ab-partners { position: relative; isolation: isolate; background: linear-gradient(180deg, var(--forest-900) 50%, var(--paper) 50%); }
.ab-partners-media { position: relative; height: clamp(26rem, 18rem + 26vw, 46rem); }
.ab-half { position: absolute; top: 0; bottom: 0; overflow: hidden; }
.ab-half img { position: absolute; left: 0; top: -4%; width: 100%; height: 108%; object-fit: cover; }
.ab-half--hands {
  left: 0; width: 60%;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 22%, #000 70%, transparent 100%), linear-gradient(90deg, #000 86.7%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(180deg, transparent 0, #000 22%, #000 70%, transparent 100%), linear-gradient(90deg, #000 86.7%, transparent 100%);
  mask-composite: intersect;
}
.ab-half--hands img { object-position: 46% 50%; }
.ab-half--lab {
  left: 48%; right: 0;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 22%, #000 70%, transparent 100%), linear-gradient(90deg, transparent 0, #000 15.4%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(180deg, transparent 0, #000 22%, #000 70%, transparent 100%), linear-gradient(90deg, transparent 0, #000 15.4%);
  mask-composite: intersect;
}
.ab-half--lab img { object-position: 20% 50%; }
.ab-partners-inner { position: relative; margin-top: clamp(-11rem, -3rem - 8vw, -6rem); padding-bottom: clamp(1rem, .5rem + 2vw, 2.5rem); }
.ab-partners .ab-card { max-width: 40rem; margin-left: clamp(0rem, -3rem + 9vw, 7rem); }

/* 04 Quality: the leaf, every vein in place */
.ab-quality { position: relative; isolation: isolate; overflow: hidden; padding-block: clamp(4rem, 3rem + 4vw, 7rem) clamp(3.5rem, 2.5rem + 3vw, 5.5rem); }
.ab-quality { --qcopy: 36rem; }
.ab-quality-media {
  position: absolute; top: 0; left: 0; z-index: -1; height: clamp(26rem, 18rem + 22vw, 44rem);
  width: calc(50% + min(50%, var(--shell) / 2) - var(--gutter) - var(--qcopy) - 2rem);
  -webkit-mask-image: linear-gradient(270deg, transparent 0, rgba(0, 0, 0, .6) 26%, #000 52%), linear-gradient(180deg, transparent 0, #000 16%, #000 60%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(270deg, transparent 0, rgba(0, 0, 0, .6) 26%, #000 52%), linear-gradient(180deg, transparent 0, #000 16%, #000 60%, transparent 100%);
  mask-composite: intersect;
}
.ab-quality-media img { width: 100%; height: 100%; object-fit: cover; transform-origin: 40% 50%; }
.ab-quality-copy { display: grid; gap: 1.5rem; justify-items: start; align-content: center; width: min(100%, var(--qcopy)); min-height: clamp(18rem, 12rem + 14vw, 28rem); margin-left: auto; }
@media (max-width: 74.99em) { .ab-quality { --qcopy: 31rem; } }
.ab-certs { display: grid; gap: 1.5rem; justify-items: start; margin-top: clamp(3rem, 2rem + 3vw, 5rem); padding-top: 2rem; border-top: 1px solid var(--line); }
.ab-certs .certs--strip { width: 100%; }

/* Close: morning light over the gardens, settling into the footer */
.ab-close {
  position: relative; isolation: isolate; overflow: hidden; display: grid; align-items: center;
  min-height: clamp(34rem, 26rem + 24vw, 50rem); background: linear-gradient(180deg, var(--paper) 50%, var(--forest-950) 50%);
}
.ab-close-media {
  position: absolute; inset: 0; z-index: -1;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 24%, #000 84%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0, #000 24%, #000 84%, transparent 100%);
}
.ab-close-media img { width: 100%; height: 100%; object-fit: cover; object-position: 35% 55%; transform-origin: 20% 30%; }
.ab-close-inner { display: flex; justify-content: flex-end; padding-block: clamp(4rem, 3rem + 4vw, 7rem); }
.ab-card--close { max-width: 34rem; }
.ab-statement--close { font-size: clamp(1.35rem, 1.05rem + .9vw, 1.75rem); max-width: none; }
.ab-close-actions { display: grid; gap: 1rem; justify-items: start; margin-top: .25rem; }

@media (max-width: 61.99em) {
  .ab-contents ol { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ab-contents li:nth-child(odd) a { padding-left: 0; border-left: 0; }
  .ab-contents li:nth-child(n + 3) a { border-top: 1px solid rgba(21, 36, 27, .14); }
  .ab-supply-head { grid-template-columns: 1fr; }
  .ab-panels { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 2rem; }
  /* Who we are and Quality stack: the photograph above, dissolving down
     into the copy */
  .ab-who { display: block; min-height: 0; padding-top: 0; }
  .ab-who-media {
    position: relative; width: auto; height: clamp(17rem, 10rem + 20vw, 24rem);
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 16%, #000 55%, transparent 100%); -webkit-mask-composite: source-over;
    mask-image: linear-gradient(180deg, transparent 0, #000 16%, #000 55%, transparent 100%); mask-composite: add;
  }
  .ab-who-inner { margin-top: -.25rem; }
  .ab-quality { padding-top: 0; }
  .ab-quality-media {
    position: relative; width: auto; height: clamp(15rem, 10rem + 18vw, 22rem);
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 18%, #000 52%, transparent 100%); -webkit-mask-composite: source-over;
    mask-image: linear-gradient(180deg, transparent 0, #000 18%, #000 52%, transparent 100%); mask-composite: add;
  }
  .ab-quality-copy { width: auto; max-width: 38rem; min-height: 0; margin: .5rem 0 0; }
}
/* Phones: each photograph sits above its text and dissolves down into it */
@media (max-width: 47.99em) {
  .ab-hero { min-height: clamp(32rem, 86svh, 46rem); grid-template-rows: 1fr; }
  .ab-hero::before {
    background:
      linear-gradient(180deg, rgba(244, 241, 232, .82) 0, rgba(244, 241, 232, 0) 6.5rem),
      linear-gradient(0deg, rgb(244, 241, 232) 0, rgba(244, 241, 232, 0) 5rem),
      radial-gradient(ellipse 125% 14rem at 50% 52%, rgba(244, 241, 232, .86) 0, rgba(244, 241, 232, .74) 45%, rgba(244, 241, 232, 0) 100%);
  }
  .ab-hero-inner { padding-bottom: 3rem; }
  .ab-contents { display: none; }
  .ab-who-media { height: 17rem; }
  .ab-label { letter-spacing: .14em; }
  .ab-card .ab-label::after { display: none; }
  .ab-partners { background: linear-gradient(180deg, var(--forest-900) 10rem, var(--paper) 10rem); }
  .ab-partners-media { height: 20rem; }
  .ab-half--lab { display: none; }
  .ab-half--hands {
    width: 100%;
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 20%, #000 66%, transparent 100%); -webkit-mask-composite: source-over;
    mask-image: linear-gradient(180deg, transparent 0, #000 20%, #000 66%, transparent 100%); mask-composite: add;
  }
  .ab-partners-inner { margin-top: -4rem; }
  .ab-partners .ab-card { margin-left: 0; }
  .ab-close { display: block; min-height: 0; background: var(--paper); }
  .ab-close-media {
    position: relative; inset: auto; height: 17rem;
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 22%, #000 60%, transparent 100%);
    mask-image: linear-gradient(180deg, transparent 0, #000 22%, #000 60%, transparent 100%);
  }
  .ab-close-inner { display: block; margin-top: -4.5rem; padding-block: 0 3.5rem; }
}

/* 14  Contact, legal, error ----------------------------------------------- */
.contact { padding-top: clamp(2.5rem, 2rem + 2vw, 4rem); }
.contact-grid { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: 2.5rem clamp(2rem, 1rem + 3.5vw, 4.5rem); align-items: start; }
.enquiry {
  display: grid; gap: 1.35rem; padding: clamp(1.5rem, 1rem + 2vw, 2.75rem);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
}
.field { display: grid; gap: .45rem; min-width: 0; }
.field label, .field-label { font-size: .875rem; font-weight: 600; }
.optional { font-weight: 400; color: var(--ink-3); margin-left: .25rem; }
.field input, .field select, .field textarea {
  width: 100%; min-height: 3.1rem; padding: .7rem .9rem; background: #fff; color: var(--ink);
  border: 1px solid var(--line-2); border-radius: var(--radius); font-size: 1rem;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.field textarea { resize: vertical; line-height: 1.5; min-height: 8rem; }
.field select {
  appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2359635b' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6.5 9.5 5.5 5.5 5.5-5.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .8rem center; background-size: 1.1rem; padding-right: 2.6rem;
}
.field input:hover, .field select:hover, .field textarea:hover { border-color: #a99f89; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--forest-800); box-shadow: 0 0 0 3px rgba(154, 122, 74, .22); }
.field input::placeholder, .field textarea::placeholder { color: #66706a; }
.field.has-error input, .field.has-error select, .field.has-error .file-drop { border-color: var(--error); }
.field-error { font-size: .8125rem; color: var(--error); }
.field-error:empty { display: none; }
.field-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.35rem 1.25rem; }
.field--trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.file-drop {
  position: relative; display: grid; grid-template-columns: auto 1fr; gap: .1rem .7rem; align-items: center;
  padding: 1rem 1.1rem; border: 1px dashed var(--line-2); border-radius: var(--radius); background: #fff; cursor: pointer;
  transition: border-color var(--t-fast), background-color var(--t-fast);
}
.file-drop .icon { grid-row: span 2; color: var(--bronze); }
.file-drop { font-weight: 400; }
.file-text { font-weight: 500; font-size: .9375rem; }
.file-hint { font-size: .8125rem; font-weight: 400; color: var(--ink-3); }
.file-drop:hover, .file-drop.is-over { border-color: var(--forest-700); background: #fdfcf8; }
.file-drop:focus-within { border-style: solid; border-color: var(--forest-800); box-shadow: 0 0 0 3px rgba(154, 122, 74, .22); }
.file-input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.file-drop.has-file { border-style: solid; border-color: var(--forest-700); }
.form-foot { display: grid; gap: .9rem; justify-items: start; padding-top: .5rem; }
.form-foot p { max-width: 36rem; }
.form-foot a { text-decoration: underline; text-underline-offset: .2em; }
.form-alert { display: none; padding: 1rem 1.2rem; border: 1px solid var(--error); border-radius: var(--radius); background: #fff; color: var(--error); font-size: .9375rem; }
.form-alert:target { display: block; }
.form-alert a { color: inherit; text-decoration: underline; text-underline-offset: .2em; }
.form-status { padding: 1.3rem 1.45rem; border: 1px solid var(--line-2); border-radius: var(--radius); background: #fff; color: var(--ink-2); display: grid; gap: .75rem; }
.form-status.is-error { border-color: var(--error); color: var(--error); }
.form-status.is-sent { border-color: var(--ok); }
.form-status .status-title { font: var(--w-name) 1.3rem/1.25 var(--serif); letter-spacing: -.006em; color: var(--ink); }
.form-status pre { white-space: pre-wrap; font: inherit; font-size: .8125rem; color: var(--ink-2); max-height: 12rem; overflow: auto; padding: .75rem; background: var(--paper); border-radius: var(--radius); margin: 0; }
.status-actions { display: flex; flex-wrap: wrap; gap: .6rem; }

.contact-aside { display: grid; gap: 1.5rem; }
@media (min-width: 62em) { .contact-aside { position: sticky; top: calc(var(--header-h) + 1.5rem); } }
.contact-card { display: grid; gap: 1.25rem; padding: clamp(1.5rem, 1.2rem + 1vw, 2rem); background: var(--forest-900); color: var(--on-forest-2); border-radius: var(--radius); }
.contact-label { font-size: .75rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--bronze-light); }
.contact-lines { display: grid; gap: 1rem; }
.contact-lines a { display: inline-flex; align-items: center; gap: .7rem; color: var(--on-forest); font-weight: 500; word-break: break-word; }
.contact-lines a > span:not(.visually-hidden) { text-decoration: underline; text-decoration-color: var(--forest-line); text-underline-offset: .3em; transition: text-decoration-color var(--t-fast); }
.contact-lines a:hover > span { text-decoration-color: currentColor; }
.contact-lines .icon:not(.icon-wa) { color: var(--on-forest-3); }
.wa-button { padding: .7rem 1rem .7rem .85rem; border: 1px solid var(--forest-line); border-radius: var(--radius); background: rgba(241, 237, 227, .05); transition: background-color var(--t-fast), border-color var(--t-fast); }
.contact-lines a.wa-button > span:not(.visually-hidden) { text-decoration: none; }
.wa-button:hover { background: rgba(37, 211, 102, .1); border-color: rgba(37, 211, 102, .5); }
.wa-button .icon-wa { width: 1.4rem; height: 1.4rem; }
.contact-note { display: flex; align-items: center; gap: .6rem; padding-top: 1.1rem; border-top: 1px solid var(--forest-line); font-size: .875rem; }
.contact-note .icon { color: var(--on-forest-3); }
.contact-address { font-size: .875rem; color: var(--ink-3); line-height: 1.6; padding-inline: .25rem; }
@media (max-width: 61.99em) { .contact-grid { grid-template-columns: 1fr; } }
@media (max-width: 39.99em) { .field-row { grid-template-columns: 1fr; } .form-foot .btn { width: 100%; } }

.legal { border-top: 1px solid var(--line); }
.legal-grid { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 8fr); gap: 3rem clamp(2.5rem, 1rem + 5vw, 6rem); align-items: start; }
.legal-toc { position: sticky; top: calc(var(--header-h) + 1.5rem); display: grid; gap: .9rem; font-size: .875rem; }
.legal-toc ol { display: grid; gap: .1rem; }
.legal-toc a { display: block; padding: .3rem 0; color: var(--ink-2); }
.legal-toc a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: .2em; }
.legal-other { padding-top: .9rem; border-top: 1px solid var(--line); }
.legal-other a { font-weight: 500; text-decoration: underline; text-underline-offset: .2em; }
.legal-body { max-width: 44rem; color: var(--ink-2); font-size: 1rem; line-height: 1.72; }
.legal-body h2 { font: var(--w-head) 1.5rem/1.25 var(--serif); letter-spacing: -.012em; color: var(--ink); margin: 2.75rem 0 1rem; padding-top: 2rem; border-top: 1px solid var(--line); }
.legal-body p + p, .legal-body ul + p, .legal-body p + ul { margin-top: 1rem; }
.legal-body ul { display: grid; gap: .4rem; padding-left: 1.25rem; list-style: disc; }
.legal-body li::marker { color: var(--bronze); }
.legal-body strong { color: var(--ink); }
.legal-body a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: .2em; word-break: break-word; }
.legal-body a:hover { text-decoration-color: var(--bronze); }
@media (max-width: 61.99em) {
  .legal-grid { grid-template-columns: 1fr; }
  .legal-toc { position: static; padding: 1.25rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
  .legal-toc ol { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1.5rem; }
}
@media (max-width: 39.99em) { .legal-toc ol { grid-template-columns: 1fr; } }

.error-page { padding-block: clamp(5rem, 3rem + 8vw, 10rem); }
.error-page .page-head-inner { display: grid; gap: 1.5rem; justify-items: start; }
.page-received .page-head { padding-block: clamp(5rem, 3rem + 8vw, 10rem); }

/* 15  Motion and print ---------------------------------------------------- */
@keyframes rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes drift {
  from { transform: scale(1.04) translate3d(0, 0, 0); }
  to { transform: scale(1.12) translate3d(-1.6%, -1.2%, 0); }
}
@keyframes lift { from { transform: translateY(0); } to { transform: translateY(14%); } }

@media (prefers-reduced-motion: no-preference) {
  .hero-img { animation: drift 46s var(--ease-in-out) infinite alternate both; }
  .hero-copy > * { animation: rise 1.1s var(--ease) both; }
  .hero-copy > :nth-child(1) { animation-delay: .15s; }
  .hero-copy > :nth-child(2) { animation-delay: .25s; }
  .hero-copy > :nth-child(3) { animation-delay: .4s; }
  .hero-copy > :nth-child(4) { animation-delay: .52s; }

  /* About: the photographs breathe; the name rises in */
  .ab-hero-img { animation: drift 48s var(--ease-in-out) infinite alternate both; }
  .ab-hero-copy > *, .ab-contents { animation: rise 1.2s var(--ease) both; }
  .ab-hero-copy > :nth-child(1) { animation-delay: .2s; }
  .ab-hero-copy > :nth-child(2) { animation-delay: .32s; }
  .ab-hero-copy > :nth-child(3) { animation-delay: .46s; }
  .ab-contents { animation-delay: .75s; }
  .ab-who-media img, .ab-close-media img { animation: drift 56s var(--ease-in-out) infinite alternate both; }
  .ab-quality-media img { animation: breathe 32s var(--ease-in-out) infinite alternate both; }
  .ab-supply-texture img { animation: breathe 40s var(--ease-in-out) infinite alternate both; }
  /* Chapter rules draw themselves; the four ingredients are unveiled in turn */
  .ab-label.reveal::after { transform: scaleX(0); transition: transform 1.3s var(--ease) .3s; }
  .ab-label.reveal.is-in::after { transform: scaleX(1); }
  .ab-panel.reveal { opacity: 1; transform: none; }
  .ab-panel.reveal .ab-panel-media { clip-path: inset(0 0 100% 0); transition: clip-path 1.5s var(--ease); }
  .ab-panel.reveal .ab-panel-name { opacity: 0; transform: translateY(12px); transition: opacity 1s var(--ease) .45s, transform 1.1s var(--ease) .45s; }
  .ab-panel.reveal.is-in .ab-panel-media { clip-path: inset(0); }
  .ab-panel.reveal.is-in .ab-panel-name { opacity: 1; transform: none; }
  .ab-panel.reveal:nth-child(2) .ab-panel-media { transition-delay: .12s; }
  .ab-panel.reveal:nth-child(3) .ab-panel-media { transition-delay: .24s; }
  .ab-panel.reveal:nth-child(4) .ab-panel-media { transition-delay: .36s; }
  .ab-panel.reveal:nth-child(2) .ab-panel-name { transition-delay: .57s; }
  .ab-panel.reveal:nth-child(3) .ab-panel-name { transition-delay: .69s; }
  .ab-panel.reveal:nth-child(4) .ab-panel-name { transition-delay: .81s; }

  /* Sections settle into place as they arrive (see site.js: only content
     below the fold is ever held back, so nothing flashes on load). */
  .reveal { opacity: 0; transform: translateY(22px); transition: opacity 1s var(--ease), transform 1.1s var(--ease); }
  .reveal.is-in { opacity: 1; transform: none; }
  .range-grid .reveal:nth-child(2), .steps .reveal:nth-child(2) { transition-delay: .12s; }
  .range-grid .reveal:nth-child(3), .steps .reveal:nth-child(3) { transition-delay: .24s; }
  .steps .reveal:nth-child(4) { transition-delay: .36s; }
  .steps .reveal:nth-child(5) { transition-delay: .48s; }

  /* Restrained parallax, where the browser can tie it to scrolling, and only
     where a photograph sits beside its text rather than above it. */
  @media (min-width: 64em), (min-width: 48em) and (orientation: landscape) {
    @supports (animation-timeline: view()) {
      .ab-hero-media { animation: lift linear both; animation-timeline: view(); animation-range: exit 0% exit 100%; }
      .ab-who-media, .ab-quality-media, .ab-close-media { animation: lift-band linear both; animation-timeline: view(); animation-range: cover 0% cover 100%; }
      .ab-half--hands img { animation: pan-down linear both; animation-timeline: view(); animation-range: cover 0% cover 100%; }
      .ab-half--lab img { animation: pan-up linear both; animation-timeline: view(); animation-range: cover 0% cover 100%; }
      .hero-media { animation: lift linear both; animation-timeline: view(); animation-range: exit 0% exit 100%; }
      .cta-media { animation: lift-band linear both; animation-timeline: view(); animation-range: cover 0% cover 100%; }
    }
  }
}
@keyframes breathe { from { transform: scale(1.02); } to { transform: scale(1.09); } }
@keyframes pan-down { from { transform: translateY(-3%); } to { transform: translateY(3%); } }
@keyframes pan-up { from { transform: translateY(3%); } to { transform: translateY(-3%); } }
@keyframes lift-band { from { transform: translateY(-5%); } to { transform: translateY(5%); } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-delay: 0ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; scroll-behavior: auto !important; }
}
@media print {
  .site-header, .drawer, .subnav, .cat-nav, .cta-band, .site-footer, .gallery-thumbs, .product-actions, .grade-action, .hero-media, .page-head-media, .ab-hero-media, .ab-who-media, .ab-supply-texture, .ab-partners-media, .ab-quality-media, .ab-close-media { display: none !important; }
  body { background: #fff; }
  .section, .section--alt, .product-top, .page-head, .hero { background: #fff !important; min-height: 0; padding-block: 1.5rem; }
}