@charset "UTF-8";
/* ==========================================================================
   Nile Gourmet Spices
   Hand-authored stylesheet. No build step: Hostinger Premium has no SSH,
   so this file is edited and uploaded directly.

   Sections
   01  Tokens
   02  Reset
   03  Typography
   04  Layout
   05  Atoms          (eyebrow, rule, button, tag)
   06  Header + nav
   07  Footer
   08  Home
   09  About
   10  Motion
   11  Responsive
   30  Founder's Reserve
   ========================================================================== */

/* 01  Tokens ------------------------------------------------------------- */

:root {
  /* Sampled from the client's mockups, not guessed.
     Dark ground and cream band read off Home Page.jpeg; the gold is taken
     from the traceability PNG, which is not JPEG-compressed. */
  --bg:            #0F0F10;
  --bg-panel:      #141415;
  --bg-raised:     #1A1A1B;
  --bg-nav:        #0A0A0B;
  --line:          #242425;
  --line-strong:   #333334;

  --gold:          #BF8E55;
  --gold-hi:       #D3A369;
  --gold-hover:    #D3A369;   /* alias used by warn pills; same as --gold-hi */
  --gold-lo:       #8A6A42;   /* hairlines, borders, icon strokes ONLY.
                                 3.57:1 on --bg-panel, which passes AA for
                                 non-text and large text but fails small text. */
  --gold-dim:      #A97C48;   /* recessive gold that still clears 4.5:1, used
                                 for counters and the wordmark subline */
  --gold-wash:     rgba(191, 142, 85, 0.08);

  /* Growing-region green. Requested for the map only, so it stays out of the
     rest of the palette and reads as "land" rather than a second accent. */
  --leaf:          #24402A;
  --leaf-hi:       #33573A;
  /* The client picked this green herself, by pointing at the "Verified &
     Authentic" line, which is --ok. One green covers every dark ground:
     5.6:1 on the page, 5.8:1 on the nav, 4.6:1 on the CTA panel. */
  --leaf-line:     #4E9A6B;
  --leaf-deep:     #16261B;   /* the CTA panel, per her mockup */
  --leaf-ink:      #3A6B4E;   /* the same green darkened for cream, 5.0:1.
                                 --leaf-line reads only 2.8:1 there. */

  /* Light sections. The homepage alternates dark and cream bands, so the
     gold accent needs a darker cut to stay legible on the light ground:
     --gold on --cream measures only 2.59:1. --gold-ink clears 5.1:1. */
  --cream:         #EAE7E2;
  --cream-panel:   #E1DDD7;
  --cream-line:    #D3CEC7;
  --ink:           #16171A;
  --ink-body:      #55534E;
  --gold-ink:      #7E5F3A;

  --text:          #FFFFFF;
  --text-body:     #C8C6C2;
  --text-muted:    #9A968F;   /* ~6.5:1 on --bg; placeholders must not dilute with opacity */
  --ok:            #4E9A6B;
  /* Lot Status donut. Hexes sampled from Ethel's legend dots (brightest
     center pixel of each swatch on her mock PNG), not guessed. */
  --lot-active:    #D29B57;
  --lot-transit:   #81754D;
  --lot-delivered: #656E44;
  --lot-pending:   #845B39;
  --lot-expired:   #BF5D49;
  /* Third donut wedge + transit swatch/pills. Matches --lot-transit. */
  --transit:       #81754D;
  /* The alert red was hard-coded in three rules before this. Named so the lot
     donut can use the same one. Lot Expired uses --lot-expired (softer). */
  --alert:         #C8564B;

  /* Type */
  --font-display:  "Fraunces", "Iowan Old Style", Georgia, serif;
  --font-ui:       "Archivo", "Helvetica Neue", Arial, sans-serif;

  --step--1: clamp(0.78rem, 0.76rem + 0.10vw, 0.84rem);
  --step-0:  clamp(0.95rem, 0.92rem + 0.16vw, 1.05rem);
  --step-1:  clamp(1.15rem, 1.08rem + 0.34vw, 1.35rem);
  --step-2:  clamp(1.45rem, 1.30rem + 0.72vw, 1.95rem);
  --step-3:  clamp(1.90rem, 1.62rem + 1.38vw, 2.90rem);
  --step-4:  clamp(2.45rem, 1.90rem + 2.70vw, 4.40rem);

  /* Space — 4px base, geometric-ish */
  --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;     --s-11: 11rem;

  --container: 1280px;
  --gutter: clamp(1.25rem, 4vw, 3rem);

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out-soft: cubic-bezier(0.16, 1, 0.3, 1);
}

/* 02  Reset -------------------------------------------------------------- */

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

* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* `clip` rather than `hidden`: hidden on an ancestor turns it into a scroll
     container, which silently kills position:sticky on the header. Setting it
     on html as well as body because body's overflow does not reliably
     propagate to the viewport when html is visible. */
  overflow-x: clip;
}

body {
  background: var(--bg);
  color: var(--text-body);
  font-family: var(--font-ui);
  font-size: var(--step-0);
  line-height: 1.65;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

/* Fine film grain over the whole page. The mockup's photography is very dark
   and flat colour fields band badly on cheap panels; this hides it and adds
   the printed-catalogue texture the brand is going for. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

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

a { color: inherit; text-decoration: none; }

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

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

:focus-visible {
  outline: 2px solid var(--gold-hi);
  outline-offset: 3px;
  border-radius: 2px;
}

::selection { background: var(--gold); color: var(--bg-nav); }

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

.skip-link {
  position: absolute; top: 0; left: 50%;
  transform: translate(-50%, -110%);
  z-index: 200;
  background: var(--gold); color: var(--bg-nav);
  padding: var(--s-3) var(--s-5);
  font-size: var(--step--1); font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase;
  transition: transform 0.2s var(--ease);
}
.skip-link:focus { transform: translate(-50%, 0); }

/* 03  Typography --------------------------------------------------------- */

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 400;
  color: var(--text);
  line-height: 1.06;
  letter-spacing: -0.015em;
  font-variation-settings: "SOFT" 0, "WONK" 0, "opsz" 40;
  text-wrap: balance;
}

h1 { font-size: var(--step-4); }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-2); line-height: 1.18; }
h4 { font-size: var(--step-1); line-height: 1.25; }

p { text-wrap: pretty; }

.lede {
  font-size: var(--step-1);
  line-height: 1.55;
  color: var(--text);
  max-width: 46ch;
}
/* Paragraph breaks inside a lede. Spans, because the lede is already a <p>
   and a nested <p> would be invalid; blocks here give the same rhythm. */
.lede__p { display: block; }
.lede__p + .lede__p { margin-top: var(--s-4); }

.prose p + p { margin-top: var(--s-4); }
.prose { max-width: 62ch; }
/* Legal pages are long and unbroken, so the headings carry the rhythm. */
.prose h2 {
  font-size: var(--step-1);
  margin-block: var(--s-7) var(--s-4);
}
.prose h2:first-child { margin-top: 0; }
.prose p { color: var(--text-body); }

.u-gold { color: var(--gold); }
/* The compound selector is deliberate: .eyebrow sets its own colour later
   in this file, so a single class would lose on source order. */
.u-leaf,
.eyebrow.u-leaf { color: var(--leaf-line); }
.section--light .u-leaf,
.section--light .eyebrow.u-leaf { color: var(--leaf-ink); }
.u-muted { color: var(--text-muted); }

/* Display italic used sparingly for emphasis inside headings. */
.em-serif {
  font-style: italic;
  font-variation-settings: "SOFT" 8, "WONK" 1, "opsz" 40;
  color: var(--gold);
}

/* 04  Layout ------------------------------------------------------------- */

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

.section { padding-block: clamp(4rem, 9vw, var(--s-10)); }
.section--tight { padding-block: clamp(3rem, 6vw, var(--s-8)); }
.section--panel { background: var(--bg-panel); }

.grid { display: grid; gap: var(--s-6); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }

.stack > * + * { margin-top: var(--s-4); }
.stack-lg > * + * { margin-top: var(--s-6); }

/* 05  Atoms -------------------------------------------------------------- */

/* Eyebrow: small caps label with a short gold bar. Used above every section
   heading, mirroring the "TRACEABILITY" label in the mockup. */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
}
.eyebrow::before {
  content: "";
  width: 1.75rem;
  height: 1px;
  background: currentColor;
  opacity: 0.7;
}
.eyebrow--bare::before { display: none; }

/* Hairline with a diamond node, echoing the timeline markers in the mockup. */
.rule {
  position: relative;
  height: 1px;
  background: var(--line);
  border: 0;
  margin-block: var(--s-7);
}
.rule::after {
  content: "";
  position: absolute;
  left: 0; top: 50%;
  width: 5px; height: 5px;
  transform: translateY(-50%) rotate(45deg);
  background: var(--gold);
}
.rule--center::after { left: 50%; transform: translate(-50%, -50%) rotate(45deg); }

.counter {
  font-family: var(--font-ui);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--gold-dim);
  font-variant-numeric: tabular-nums;
}

/* Buttons */
.btn {
  --btn-bg: transparent;
  --btn-fg: var(--text);
  --btn-bd: var(--line-strong);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-3);
  padding: 0.9rem 1.75rem;
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 1px solid var(--btn-bd);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  overflow: hidden;
  transition: color 0.35s var(--ease), border-color 0.35s var(--ease);
}
/* Gold wipe from the left on hover rather than a flat colour swap. */
.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.45s var(--ease-out-soft);
  z-index: 0;
}
.btn > * { position: relative; z-index: 1; }
.btn:hover { color: var(--bg-nav); border-color: var(--gold); }
.btn:hover::before { transform: scaleX(1); }

.btn--gold { --btn-bg: var(--gold); --btn-fg: var(--bg-nav); --btn-bd: var(--gold); }
.btn--gold::before { background: var(--gold-hi); }
.btn--gold:hover { color: var(--bg-nav); border-color: var(--gold-hi); }

.btn--leaf {
  --btn-bg: var(--leaf-line);
  --btn-fg: #FFFFFF;
  --btn-bd: var(--leaf-line);
}
.btn--leaf::before { background: #5aad78; }
.btn--leaf:hover { color: #FFFFFF; border-color: #5aad78; }

.btn--ghost { --btn-bd: var(--line-strong); }
.btn--ghost-leaf { --btn-bd: var(--leaf-line); color: var(--text); }
.btn--ghost-leaf svg { color: var(--leaf-line); }
/* Ghost/outline buttons keep a readable label. The shared gold wipe
   fills the face and then ghost hover paints the type gold on gold. */
.btn--ghost::before,
.btn--ghost-leaf::before,
.btn--ghost-ink::before,
.btn--ghost:hover::before,
.btn--ghost:focus::before,
.btn--ghost:active::before,
.btn--ghost-leaf:hover::before,
.btn--ghost-leaf:focus::before,
.btn--ghost-leaf:active::before,
.btn--ghost-ink:hover::before,
.btn--ghost-ink:focus::before,
.btn--ghost-ink:active::before {
  content: none;
  display: none;
  transform: none;
}
.btn--ghost:hover,
.btn--ghost:focus,
.btn--ghost:focus-visible,
.btn--ghost:active {
  color: var(--gold-hi);
  border-color: var(--gold);
  background: transparent;
}
.btn--ghost-leaf:hover,
.btn--ghost-leaf:focus,
.btn--ghost-leaf:focus-visible,
.btn--ghost-leaf:active {
  color: var(--text);
  border-color: var(--leaf-line);
  background: transparent;
}

/* Dark rectangular CTA used on cream Founder's Reserve bands (mockup). */
.btn--ink {
  --btn-bg: var(--ink);
  --btn-fg: var(--cream);
  --btn-bd: var(--ink);
  color: var(--cream);
}
.btn--ink::before { background: #2A2B2E; }
.btn--ink:hover { color: var(--text); border-color: var(--ink); }
.btn--ghost-ink {
  --btn-bd: var(--ink);
  color: var(--ink);
}
.btn--ghost-ink:hover { color: var(--bg-nav); border-color: var(--ink); }
.btn--wide { width: 100%; max-width: 28rem; justify-content: center; }

/* Inline text link with an underline that draws in on hover. */
.link {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  color: var(--gold);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding-bottom: 2px;
  background-image: linear-gradient(var(--gold), var(--gold));
  background-size: 0% 1px;
  background-repeat: no-repeat;
  background-position: left bottom;
  transition: background-size 0.4s var(--ease-out-soft), color 0.3s var(--ease);
}
.link:hover { background-size: 100% 1px; color: var(--gold-hi); }
.link svg { transition: transform 0.35s var(--ease-out-soft); }
.link:hover svg { transform: translateX(4px); }

/* Card */
.card {
  position: relative;
  background: var(--bg-panel);
  border: 1px solid var(--line);
  padding: var(--s-6);
  transition: border-color 0.4s var(--ease), background 0.4s var(--ease), transform 0.4s var(--ease-out-soft);
}
.card:hover { border-color: var(--gold-lo); background: var(--bg-raised); }

.card__icon {
  color: var(--gold);
  margin-bottom: var(--s-5);
}

.tag {
  display: inline-block;
  padding: 0.3rem 0.7rem;
  border: 1px solid var(--line-strong);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* The photograph sits inside its outline, not overhanging it.
   The rule used to be inset:0 plus translate(0.85rem, 0.85rem), which pushed
   the outline down and right behind the image — so the picture covered the top
   and left of the box and the box stuck out past the bottom and right corner.
   Padding the frame instead means the outline is drawn around the image on all
   four sides, and it cannot spill outside the column the way a negative inset
   would. */
.frame { position: relative; padding: 0.85rem; }
.frame::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid var(--gold-lo);
  opacity: 0.5;
  pointer-events: none;
}
.frame img { position: relative; z-index: 1; }

/* Media placeholder — visible, labelled, and impossible to ship by accident.
   Replaced the moment the client sends real photography. */
.ph {
  position: relative;
  display: grid;
  place-items: center;
  background:
    repeating-linear-gradient(
      135deg,
      rgba(191, 142, 85, 0.05) 0 10px,
      transparent 10px 20px
    ),
    var(--bg-raised);
  border: 1px dashed var(--gold-lo);
  color: var(--gold-dim);
  text-align: center;
  padding: var(--s-5);
}
.ph span {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  line-height: 1.7;
}
.ph--hero { min-height: clamp(20rem, 46vw, 34rem); }
.ph--portrait { aspect-ratio: 3 / 4; }
.ph--landscape { aspect-ratio: 4 / 3; }
.ph--wide { aspect-ratio: 16 / 9; }

/* 06  Header + nav ------------------------------------------------------- */

.header {
  --tick-h: 0px;
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(14, 15, 16, 0.86);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.header:has(.tick) { --tick-h: 2.4rem; }

/* Forest strip Ethel sent: same green, same line, scrolling above the nav. */
.tick {
  background: #1B3A2C;
  color: #F3F0EA;
  height: 2.4rem;
  overflow: hidden;
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.tick__mask {
  width: 100%;
  overflow: hidden;
}
.tick__track {
  display: flex;
  width: max-content;
  animation: tick-move 42s linear infinite;
}
.tick:hover .tick__track,
.tick:focus-within .tick__track {
  animation-play-state: paused;
}
.tick__group { display: flex; flex-shrink: 0; }
.tick__item {
  display: inline-flex;
  align-items: center;
  gap: 2.25rem;
  padding-inline: 1.15rem 2.25rem;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  white-space: nowrap;
  line-height: 1;
}
.tick__item::after {
  content: "";
  width: 0.28rem;
  height: 0.28rem;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.55;
  flex-shrink: 0;
}
@keyframes tick-move {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* Was --s-6. Two of these gaps sit between the wordmark, the nav and the
     CTA, so the step down returns real width to a nine-item row. */
  gap: var(--s-5);
  min-height: 4.75rem;
}

/* Wordmark: display serif over letterspaced small caps, the lockup from the mockup. */
.mark { display: block; line-height: 1; }
.mark__top {
  display: block;
  font-family: var(--font-display);
  font-size: 1.5rem;
  letter-spacing: 0.16em;
  color: var(--gold);
  font-variation-settings: "SOFT" 0, "WONK" 0, "opsz" 40;
}
.mark__sub {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.5625rem;
  font-weight: 600;
  letter-spacing: 0.34em;
  color: var(--gold-dim);
}

/* Nine items since Founder's Reserve joined the row. At the old
   clamp(1rem, 2vw, 2rem) the nav needed 1005px against 922px of space at
   1440, which pushed the Request Samples button clean off the header. Tighter
   tracking below buys the rest. */
.nav { display: flex; align-items: center; gap: clamp(0.75rem, 1.35vw, 1rem); }

.nav__link {
  position: relative;
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: uppercase;
  color: var(--text-body);
  padding-block: 0.5rem;
  /* Was 0.1em. Across ~95 characters of nav that tracking alone cost about
     34px, which the row can no longer spare. */
  letter-spacing: 0.07em;
  /* "About Us" is the only two-word item, so when the row is under pressure it
     is the only one that can wrap — and it did, sitting two lines tall next to
     seven one-line items. The single-word items cannot shrink below their own
     width, so letting this one wrap bought nothing anyway. */
  white-space: nowrap;
  transition: color 0.3s var(--ease);
}
.nav__link::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.4s var(--ease-out-soft);
}
.nav__link:hover { color: var(--text); }
.nav__link:hover::after { transform: scaleX(1); transform-origin: left; }

.nav__link[aria-current="page"] { color: var(--gold); }
.nav__link[aria-current="page"]::after { transform: scaleX(1); }

/* Pages that ship in later milestones. Marked rather than hidden so the
   client sees the full information architecture. */
.nav__link--pending {
  color: var(--text-muted);
  opacity: 0.55;
  cursor: not-allowed;
}
.nav__link--pending::after { display: none; }

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

.nav__caret {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 0.2rem;
  padding: 0.2rem 0.15rem;
  background: none;
  border: 0;
  color: var(--gold-dim);
  cursor: pointer;
}

.nav__caret-icon {
  display: block;
  width: 0.38rem;
  height: 0.38rem;
  margin-top: -0.15rem;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.3s var(--ease), color 0.3s var(--ease);
}

.nav__item--has-sub:hover .nav__caret,
.nav__item--has-sub:focus-within .nav__caret,
.nav__item--has-sub.is-open .nav__caret,
.nav__item--has-sub:has(.nav__link[aria-current]) .nav__caret {
  color: var(--gold);
}

.nav__item--has-sub:hover .nav__caret-icon,
.nav__item--has-sub:focus-within .nav__caret-icon,
.nav__item--has-sub.is-open .nav__caret-icon {
  transform: rotate(225deg);
  margin-top: 0.12rem;
}

.nav__sub {
  position: absolute;
  top: calc(100% + 0.35rem);
  left: 50%;
  z-index: 120;
  min-width: 14.75rem;
  margin: 0;
  padding: 0.4rem 0;
  list-style: none;
  background: var(--bg-nav);
  border: 1px solid var(--gold-lo);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateX(-50%) translateY(0.25rem);
  transition: opacity 0.25s var(--ease), visibility 0.25s var(--ease), transform 0.25s var(--ease);
}

/* Hover bridge so the menu does not close between the link and the panel. */
.nav__item--has-sub::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: 0.55rem;
}

.nav__item--has-sub:hover .nav__sub,
.nav__item--has-sub:focus-within .nav__sub,
.nav__item--has-sub.is-open .nav__sub {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

.nav__sub-link {
  display: block;
  padding: 0.7rem 1.15rem;
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-body);
  white-space: nowrap;
  transition: color 0.25s var(--ease), background 0.25s var(--ease);
}

.nav__sub-link:hover,
.nav__sub-link:focus-visible {
  color: var(--gold-hi);
  background: var(--gold-wash);
}

.nav__sub-link[aria-current="page"] {
  color: var(--gold);
  background: var(--gold-wash);
}

.header__cta,
.header__quote { flex-shrink: 0; }

/* Nine nav items do not fit alongside the Request Samples button until roughly
   1400px: between 1080 and 1400 the row needs about 840px and only ~690px
   exists, so the button was being pushed clean off the header.
   The button is already hidden below 900, so this extends that same rule up to
   1400 rather than inventing a new behaviour. The trade is deliberate — the
   whole menu stays visible and legible, and Request Samples is still the hero
   CTA and closes every page, so nothing is actually lost. */
@media (max-width: 1400px) {
  .header__cta,
  .header__quote { display: none; }
  .nav { gap: 1rem; }
  .nav__link { font-size: 0.6875rem; }
}

.nav-toggle {
  display: none;
  background: none;
  border: 1px solid var(--line-strong);
  padding: 0.6rem;
  color: var(--text);
  cursor: pointer;
}

/* 07  Footer — pixel match to signed mockup (origin + trust + footer) ---- */

.footer {
  position: relative;
  z-index: 1;
  background: var(--bg-nav);
  border-top: 1px solid var(--line);
  padding-block: var(--s-8) var(--s-5);
  overflow: visible;
}

/* Four columns: brand | quick links | products | contact. */
.footer__grid {
  display: grid;
  grid-template-columns: 1.45fr 1.35fr 0.85fr 1.55fr;
  gap: var(--s-7) clamp(1.25rem, 2.5vw, 2.5rem);
  align-items: stretch;
}

.footer__brand,
.footer__contact-col {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.footer__quick,
.footer__products {
  border-left: 1px solid var(--line);
  padding-left: clamp(1rem, 2vw, 1.75rem);
}

/* Footer wordmark: large gold lockup, no region line (mockup). */
.mark--footer .mark__top {
  font-size: clamp(1.65rem, 2.4vw, 2.15rem);
  letter-spacing: 0.14em;
  color: var(--gold);
}
.mark--footer .mark__sub {
  margin-top: 0.35rem;
  font-size: 0.625rem;
  letter-spacing: 0.32em;
  color: var(--gold-dim);
}

.footer__tagline {
  margin-top: var(--s-5);
  color: var(--text-body);
  font-size: var(--step--1);
  line-height: 1.75;
  max-width: 28ch;
}

.footer__legal {
  margin-top: auto;
  padding-top: var(--s-7);
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.footer__legal--right {
  text-align: right;
  margin-top: var(--s-5);
  padding-top: var(--s-4);
}
.footer__legal a { color: var(--text-muted); transition: color 0.3s var(--ease); }
.footer__legal a:hover { color: var(--gold); }

.footer__quick-cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1rem, 2vw, 1.75rem);
}

.footer__title {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--leaf-line);
  margin-bottom: var(--s-5);
}

.footer__list > li + li { margin-top: 0.7rem; }

.footer__list a,
.footer__contact a {
  font-size: var(--step--1);
  color: var(--text);
  transition: color 0.3s var(--ease);
}
.footer__list a:hover,
.footer__contact a:hover { color: var(--gold); }

.footer__contact-block {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}
.footer__contact-block .footer__legal--right {
  margin-top: auto;
  padding-top: var(--s-6);
}

.footer__contact-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s-5);
}

.footer__contact {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}
.footer__contact li {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  color: var(--text-body);
  font-size: var(--step--1);
  line-height: 1.4;
}
.footer__contact svg {
  color: var(--gold);
  flex-shrink: 0;
  margin-top: 0.2rem;
}

.footer__social {
  display: flex;
  list-style: none;
  padding: 0;
  margin: 0;
  gap: 0.55rem;
  flex-shrink: 0;
}
.footer__social a {
  display: grid;
  place-items: center;
  width: 2.35rem;
  height: 2.35rem;
  border: 1px solid var(--gold-lo);
  color: var(--gold);
  transition: color 0.3s var(--ease), border-color 0.3s var(--ease), background 0.3s var(--ease);
}
.footer__social a:hover {
  color: var(--gold-hi);
  border-color: var(--gold);
  background: rgba(191, 142, 85, 0.08);
}

@media (max-width: 1200px) {
  .trustband__inner {
    flex-direction: column !important;
    align-items: flex-start !important;
    padding-right: var(--gutter) !important;
    padding-bottom: clamp(2rem, 4vw, 3rem) !important;
  }
}


/* 08  Home --------------------------------------------------------------- */

.hero {
  position: relative;
  padding-block: clamp(3.5rem, 8vw, var(--s-10)) clamp(2rem, 4vw, 3.5rem);
  overflow: hidden;
}

/* Wide, very soft gold bloom bleeding in from the right, so the hero never
   reads as a flat black rectangle. */
.hero::before {
  content: "";
  position: absolute;
  top: -20%; right: -15%;
  width: 70vw; height: 120%;
  background: radial-gradient(closest-side, rgba(191, 142, 85, 0.14), transparent 72%);
  pointer-events: none;
}

.hero__inner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  align-items: center;
  gap: clamp(2rem, 5vw, var(--s-9));
}

.hero__title { margin-block: var(--s-5) var(--s-5); }
.hero__sub {
  font-size: var(--step-1);
  color: var(--text);
  padding-left: var(--s-5);
  border-left: 1px solid var(--gold-lo);
}
.hero__body { margin-top: var(--s-5); max-width: 44ch; }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--s-4); margin-top: var(--s-7); }

/* Key figures under the hero. */
.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.stat { padding: var(--s-6) var(--s-5); }
.stat + .stat { border-left: 1px solid var(--line); }
.stat__num {
  font-family: var(--font-display);
  font-size: var(--step-3);
  color: var(--gold);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.stat__label {
  margin-top: var(--s-3);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* Section heading block */
.head { max-width: 58ch; }
.head__title { margin-top: var(--s-4); }
.head__body { margin-top: var(--s-5); color: var(--text-body); }
.head--center { margin-inline: auto; text-align: center; }
.head--center .eyebrow::before { display: none; }

/* Product split rows: image and copy alternating sides. */
.split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: center;
  gap: clamp(2rem, 5vw, var(--s-9));
}
.split + .split { margin-top: clamp(3rem, 7vw, var(--s-9)); }
.split--flip .split__media { order: 2; }

/* When the media slot holds content rather than an image (a step list, a
   timeline), it must NOT jump above its own heading when the grid collapses
   to one column. See the stacking rule in section 11. */
.split--keep { align-items: start; }

.split__spec {
  margin-top: var(--s-6);
  border-top: 1px solid var(--line);
}
.split__spec div {
  display: flex;
  justify-content: space-between;
  gap: var(--s-4);
  padding: var(--s-3) 0;
  border-bottom: 1px solid var(--line);
  font-size: var(--step--1);
}
.split__spec dt { color: var(--text-muted); letter-spacing: 0.06em; text-transform: uppercase; font-size: 0.6875rem; }
.split__spec dd { color: var(--text); text-align: right; }

/* Numbered process steps */
.steps { counter-reset: step; }
.step {
  position: relative;
  padding-top: var(--s-5);
  border-top: 1px solid var(--line);
}
.step__num { display: block; margin-bottom: var(--s-4); }
.step__title { margin-bottom: var(--s-3); }
.step__body { font-size: var(--step--1); color: var(--text-muted); }

/* Closing call to action */
.cta {
  position: relative;
  border: 1px solid var(--line);
  background:
    linear-gradient(180deg, rgba(191, 142, 85, 0.06), transparent 60%),
    var(--bg-panel);
  padding: clamp(2.5rem, 6vw, var(--s-9)) var(--gutter);
  text-align: center;
}
.cta__actions { display: flex; flex-wrap: wrap; gap: var(--s-4); justify-content: center; margin-top: var(--s-7); }

/* 09  About -------------------------------------------------------------- */

.page-hero {
  position: relative;
  padding-block: clamp(3rem, 7vw, var(--s-9)) clamp(2.5rem, 5vw, var(--s-8));
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}
.page-hero::before {
  content: "";
  position: absolute;
  top: -40%; left: 50%;
  width: 60rem; height: 40rem;
  transform: translateX(-50%);
  background: radial-gradient(closest-side, rgba(191, 142, 85, 0.10), transparent 70%);
  pointer-events: none;
}
/* Constrained on a child, not on .container itself: overriding max-width on
   .container leaves its margin-inline:auto in place and silently centres the
   block, which reads as a different alignment to every other section. */
.page-hero__inner { position: relative; max-width: 58ch; }
.page-hero__title { margin-block: var(--s-5) var(--s-5); }

/* Promise: a sealed origin chamber, not a generic two-column card.
   One serif headline. Accent lines stay in the prose, in place. */
.about-promise {
  position: relative;
  isolation: isolate;
  padding-block: clamp(4.5rem, 10vw, 8rem);
  overflow: hidden;
  background:
    radial-gradient(ellipse 55% 70% at 12% 40%, rgba(191, 142, 85, 0.16), transparent 58%),
    radial-gradient(ellipse 50% 55% at 88% 18%, rgba(191, 142, 85, 0.10), transparent 52%),
    radial-gradient(ellipse 40% 40% at 70% 90%, rgba(191, 142, 85, 0.07), transparent 50%),
    #090807;
}

.promise-motes {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.promise-motes span {
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--gold-hi);
  opacity: 0;
  box-shadow: 0 0 8px rgba(211, 163, 105, 0.85);
  animation: promise-mote 16s linear infinite;
}
.promise-motes span:nth-child(1) { left: 8%;  bottom: -8px; animation-duration: 18s; animation-delay: -2s; }
.promise-motes span:nth-child(2) { left: 18%; bottom: -8px; animation-duration: 13s; animation-delay: -7s; width: 2px; height: 2px; }
.promise-motes span:nth-child(3) { left: 31%; bottom: -8px; animation-duration: 21s; animation-delay: -4s; }
.promise-motes span:nth-child(4) { left: 47%; bottom: -8px; animation-duration: 15s; animation-delay: -11s; width: 2px; height: 2px; }
.promise-motes span:nth-child(5) { left: 58%; bottom: -8px; animation-duration: 19s; animation-delay: -1s; }
.promise-motes span:nth-child(6) { left: 69%; bottom: -8px; animation-duration: 14s; animation-delay: -9s; }
.promise-motes span:nth-child(7) { left: 78%; bottom: -8px; animation-duration: 22s; animation-delay: -5s; width: 2px; height: 2px; }
.promise-motes span:nth-child(8) { left: 88%; bottom: -8px; animation-duration: 17s; animation-delay: -13s; }
.promise-motes span:nth-child(9) { left: 94%; bottom: -8px; animation-duration: 12s; animation-delay: -3s; }

.about-promise > .container { position: relative; z-index: 1; }

.promise-vitrine {
  position: relative;
  display: grid;
  grid-template-columns: minmax(14rem, 20.5rem) minmax(0, 1fr);
  align-items: stretch;
}

.promise-orchid {
  position: absolute;
  right: -2%;
  top: 6%;
  width: min(20rem, 42%);
  height: auto;
  z-index: 0;
  pointer-events: none;
  opacity: 0.72;
  mix-blend-mode: screen;
}
.promise-orchid__stroke {
  fill: none;
  stroke: var(--gold-hi);
  stroke-width: 1.15;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
}
.js .promise-orchid__stroke { stroke-dashoffset: 1; }
.promise-orchid__heart {
  fill: var(--gold-hi);
  opacity: 1;
}
.js .promise-orchid__heart { opacity: 0; }
.js .promise-vitrine.is-visible .promise-orchid__stroke {
  animation: promise-draw 2.2s var(--ease-out-soft) both;
}
.js .promise-vitrine.is-visible .promise-orchid__stroke:nth-child(1) { animation-delay: 0.15s; }
.js .promise-vitrine.is-visible .promise-orchid__stroke:nth-child(2) { animation-delay: 0.22s; }
.js .promise-vitrine.is-visible .promise-orchid__stroke:nth-child(3) { animation-delay: 0.3s; }
.js .promise-vitrine.is-visible .promise-orchid__stroke:nth-child(4) { animation-delay: 0.38s; }
.js .promise-vitrine.is-visible .promise-orchid__stroke:nth-child(5) { animation-delay: 0.46s; }
.js .promise-vitrine.is-visible .promise-orchid__stroke:nth-child(6) { animation-delay: 0.55s; }
.js .promise-vitrine.is-visible .promise-orchid__stroke:nth-child(7) { animation-delay: 0.7s; }
.js .promise-vitrine.is-visible .promise-orchid__stroke:nth-child(8) { animation-delay: 0.9s; }
.js .promise-vitrine.is-visible .promise-orchid__stroke:nth-child(9) { animation-delay: 1.05s; }
.js .promise-vitrine.is-visible .promise-orchid__heart {
  animation: promise-bloom 0.8s ease 1.3s both;
}

.promise-plate {
  position: relative;
  z-index: 3;
  margin-right: -2.75rem;
  min-height: 28rem;
}
.promise-plate__frame {
  position: relative;
  height: 100%;
  overflow: hidden;
  padding: 0.65rem;
  background: #0c0b0a;
  box-shadow:
    0 0 0 1px var(--gold-hi),
    0 28px 60px rgba(0, 0, 0, 0.5);
}
.promise-plate__frame picture,
.promise-plate__frame img,
.promise-plate__frame .ph {
  position: absolute;
  inset: 0.65rem;
  width: auto;
  height: auto;
  display: block;
  object-fit: cover;
}
.promise-plate__frame picture img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.promise-plate__frame::after {
  content: "";
  position: absolute;
  inset: 0.65rem;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(90deg, transparent 55%, rgba(18, 17, 16, 0.28) 100%),
    linear-gradient(180deg, rgba(18, 17, 16, 0.08) 0%, transparent 30%, rgba(18, 17, 16, 0.22) 100%);
}

.promise-deed {
  position: relative;
  z-index: 2;
  min-width: 0;
  padding: clamp(2.6rem, 5vw, 4rem) clamp(2rem, 4.5vw, 3.4rem)
           clamp(2.4rem, 4.6vw, 3.6rem) clamp(5.25rem, 9vw, 8rem);
  background:
    linear-gradient(180deg, rgba(191, 142, 85, 0.07), transparent 30%),
    #121110;
  box-shadow:
    0 0 0 1px rgba(191, 142, 85, 0.38),
    inset 0 0 0 1px rgba(191, 142, 85, 0.08),
    0 40px 90px rgba(0, 0, 0, 0.5);
}
.promise-deed__sheet {
  position: relative;
  overflow: hidden;
}
.promise-deed__sheet::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    108deg,
    transparent 38%,
    rgba(232, 196, 138, 0.14) 50%,
    transparent 62%
  );
  transform: translateX(-120%);
}
.js .promise-vitrine.is-visible .promise-deed__sheet::after {
  animation: promise-sheen 1.7s ease-out 0.55s both;
}

.promise-deed__title {
  position: relative;
  z-index: 2;
  margin-block: var(--s-4) var(--s-6);
  font-family: var(--font-display);
  font-size: clamp(1.85rem, 3.1vw, 2.85rem);
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--text);
}

.about-promise__copy {
  position: relative;
  z-index: 2;
  max-width: 48ch;
}
.about-promise__copy p {
  color: #DEDAD4;
  font-size: var(--step--1);
  line-height: 1.7;
}
.about-promise__copy p + p { margin-top: var(--s-5); }
.about-promise__copy strong {
  color: var(--text);
  font-weight: 600;
}
.about-promise__copy .about-promise__accent {
  color: var(--gold-hi);
  font-weight: 500;
  text-shadow: 0 0 22px rgba(211, 163, 105, 0.28);
}
.about-promise__accent::before {
  content: "";
  display: inline-block;
  width: 0.42rem;
  height: 0.42rem;
  margin-right: 0.55rem;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #F0D19A, var(--gold));
  box-shadow: 0 0 10px rgba(211, 163, 105, 0.7);
  vertical-align: 0.12em;
}

/* No gold hairline between Promise and the founder quote. Keep the quote's
   own top edge off so a second divider does not replace the bar we removed. */
.about-promise + .section--tight .quote {
  border-top: 0;
}

@keyframes promise-mote {
  0%   { transform: translate3d(0, 0, 0); opacity: 0; }
  12%  { opacity: 0.7; }
  80%  { opacity: 0.25; }
  100% { transform: translate3d(18px, -110vh, 0); opacity: 0; }
}
@keyframes promise-draw { to { stroke-dashoffset: 0; } }
@keyframes promise-bloom { from { opacity: 0; } to { opacity: 1; } }
@keyframes promise-sheen {
  from { transform: translateX(-120%); }
  to   { transform: translateX(120%); }
}
@keyframes promise-ken {
  from { transform: scale(1.12); }
  to   { transform: scale(1); }
}

@media (prefers-reduced-motion: no-preference) {
  .js .promise-vitrine.is-visible .promise-plate__frame img {
    animation: promise-ken 18s var(--ease-out-soft) both;
  }
}

@media (max-width: 900px) {
  .promise-vitrine {
    grid-template-columns: 1fr;
    padding-top: 0;
  }
  .promise-orchid {
    width: 11rem;
    right: -8%;
    top: auto;
    bottom: 8%;
    opacity: 0.28;
    mix-blend-mode: normal;
  }
  .promise-plate {
    order: -1;
    margin: 0 0 -1.5rem;
    min-height: 0;
    aspect-ratio: 16 / 10;
  }
  .promise-deed {
    padding: 3.5rem 1.35rem 1.85rem;
  }
  .promise-deed__title { max-width: 14ch; }
  .about-promise__copy { max-width: none; }
}

/* Full-bleed photographic page heroes (marketing pages). */
.page-hero--media {
  min-height: clamp(18rem, 42vw, 28rem);
  display: flex;
  align-items: flex-end;
  padding-block: clamp(4rem, 10vw, 7rem) clamp(2.5rem, 5vw, var(--s-8));
  border-bottom: 0;
}
.page-hero--media::before { display: none; }
.page-hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}
.page-hero__media img,
.page-hero__media picture,
.page-hero__media .ph {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.page-hero__media picture { width: 100%; height: 100%; }
.page-hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(15, 15, 16, 0.88) 0%, rgba(15, 15, 16, 0.55) 48%, rgba(15, 15, 16, 0.28) 100%),
    linear-gradient(180deg, rgba(15, 15, 16, 0.35) 0%, transparent 40%, rgba(15, 15, 16, 0.72) 100%);
  pointer-events: none;
}
.page-hero--media .container { position: relative; z-index: 1; width: 100%; }
.page-hero--media .page-hero__inner { max-width: 40rem; }
.page-hero--media .lede { color: var(--text-body); max-width: 44ch; }
@media (max-width: 720px) {
  .page-hero--media .page-hero__media::after {
    background:
      linear-gradient(180deg, rgba(15, 15, 16, 0.45) 0%, rgba(15, 15, 16, 0.78) 55%, rgba(15, 15, 16, 0.92) 100%);
  }
}

/* Extract hero: full-bleed recomposed photo (bottle right), copy in left lane. */
.page-hero--ve {
  min-height: clamp(24rem, 52vw, 36rem);
  align-items: center;
  padding-block: clamp(4rem, 9vw, 7rem) clamp(3rem, 6vw, 5rem);
}
.page-hero--ve .page-hero__media img,
.page-hero--ve .page-hero__media picture img {
  object-position: center center;
}
.page-hero--ve .page-hero__media::after {
  background:
    linear-gradient(
      90deg,
      rgba(10, 9, 8, 0.28) 0%,
      rgba(10, 9, 8, 0.12) 34%,
      transparent 52%
    ),
    linear-gradient(
      180deg,
      rgba(10, 9, 8, 0.18) 0%,
      transparent 42%,
      rgba(10, 9, 8, 0.35) 100%
    );
}
.page-hero--ve .page-hero__inner {
  max-width: 32rem;
  width: min(32rem, 42%);
  position: relative;
  padding-left: 1.15rem;
}
.page-hero--ve .page-hero__inner::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.35rem;
  bottom: 0.35rem;
  width: 2px;
  background: linear-gradient(
    180deg,
    transparent 0%,
    var(--gold) 12%,
    var(--gold) 88%,
    transparent 100%
  );
}
.page-hero--ve .page-hero__title {
  max-width: none;
  margin-block: var(--s-5) var(--s-5);
  line-height: 1.12;
  font-size: clamp(2rem, 3.8vw, 3.25rem);
  display: flex;
  flex-direction: column;
  gap: 0.08em;
}
.page-hero--ve .page-hero__title-a,
.page-hero--ve .page-hero__title-b {
  display: block;
  white-space: nowrap;
}
.page-hero--ve .page-hero__grade { margin-top: var(--s-4); }
.page-hero--ve .page-hero__lede {
  margin-top: var(--s-5);
  max-width: 38ch;
  color: var(--text-body);
}

@media (max-width: 900px) {
  .page-hero--ve .page-hero__inner {
    width: min(36rem, 56%);
  }
  .page-hero--ve .page-hero__title {
    font-size: clamp(1.75rem, 3.2vw, 2.5rem);
  }
}
@media (max-width: 720px) {
  .page-hero--ve {
    align-items: flex-end;
    min-height: clamp(26rem, 100vw, 34rem);
  }
  .page-hero--ve .page-hero__media img,
  .page-hero--ve .page-hero__media picture img {
    object-position: 82% 32%;
  }
  .page-hero--ve .page-hero__media::after {
    background:
      linear-gradient(
        180deg,
        rgba(10, 9, 8, 0.12) 0%,
        rgba(10, 9, 8, 0.3) 35%,
        rgba(10, 9, 8, 0.88) 68%,
        rgba(10, 9, 8, 0.96) 100%
      );
  }
  .page-hero--ve .page-hero__inner {
    width: 100%;
    max-width: 100%;
    padding-left: 0;
  }
  .page-hero--ve .page-hero__inner::before { display: none; }
  .page-hero--ve .page-hero__title {
    font-size: clamp(1.65rem, 6.5vw, 2.2rem);
  }
  .page-hero--ve .page-hero__title-a,
  .page-hero--ve .page-hero__title-b {
    white-space: normal;
  }
}

/* Breadcrumb */
.crumbs {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.crumbs a:hover { color: var(--gold); }
.crumbs span[aria-hidden] { color: var(--gold-dim); } /* text separator, not a border */

/* Milestone timeline on About */
.timeline { border-left: 1px solid var(--line); padding-left: var(--s-6); }
.timeline__item { position: relative; padding-bottom: var(--s-7); }
.timeline__item:last-child { padding-bottom: 0; }
.timeline__item::before {
  content: "";
  position: absolute;
  left: calc(-1 * var(--s-6) - 3px);
  top: 0.55rem;
  width: 5px; height: 5px;
  transform: rotate(45deg);
  background: var(--gold);
}
.timeline__year {
  font-size: 0.6875rem; font-weight: 600;
  letter-spacing: 0.16em; color: var(--gold);
}
.timeline__title { margin-block: var(--s-3) var(--s-3); }
.timeline__body { font-size: var(--step--1); color: var(--text-muted); max-width: 52ch; }

/* Pull quote */
.quote {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding-block: var(--s-8);
  text-align: center;
}
.quote blockquote {
  font-family: var(--font-display);
  font-size: var(--step-2);
  line-height: 1.35;
  color: var(--text);
  max-width: 34ch;
  margin-inline: auto;
  font-variation-settings: "SOFT" 6, "WONK" 1, "opsz" 40;
}
.quote figcaption {
  margin-top: var(--s-5);
  font-size: 0.6875rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* Value cards with a hairline top accent that grows on hover */
.value { position: relative; padding-top: var(--s-6); border-top: 1px solid var(--line); }
.value::before {
  content: "";
  position: absolute;
  top: -1px; left: 0;
  width: 2.5rem; height: 1px;
  background: var(--gold);
  transition: width 0.5s var(--ease-out-soft);
}
.value:hover::before { width: 100%; }
.value__title { margin-block: var(--s-4) var(--s-3); }
.value__body { font-size: var(--step--1); color: var(--text-muted); }

/* 10  Motion ------------------------------------------------------------- */

/* Scroll reveal. Elements start shifted and fade in when observed.
   .is-visible is applied by main.js; without JS everything stays visible
   because the base state is only applied when the class is present. */
.js .reveal {
  opacity: 0;
  transform: translateY(1.25rem);
  transition: opacity 0.9s var(--ease-out-soft), transform 0.9s var(--ease-out-soft);
}
.js .reveal.is-visible { opacity: 1; transform: none; }

.js .reveal[data-delay="1"] { transition-delay: 0.08s; }
.js .reveal[data-delay="2"] { transition-delay: 0.16s; }
.js .reveal[data-delay="3"] { transition-delay: 0.24s; }
.js .reveal[data-delay="4"] { transition-delay: 0.32s; }
.js .reveal[data-delay="5"] { transition-delay: 0.4s; }

/* Stagger children when the parent gains .is-visible (journey, products). */
.js .reveal-stagger > * {
  opacity: 0;
  transform: translateY(1rem);
  transition: opacity 0.75s var(--ease-out-soft), transform 0.75s var(--ease-out-soft);
}
.js .reveal-stagger.is-visible > *:nth-child(1) { transition-delay: 0.04s; }
.js .reveal-stagger.is-visible > *:nth-child(2) { transition-delay: 0.12s; }
.js .reveal-stagger.is-visible > *:nth-child(3) { transition-delay: 0.2s; }
.js .reveal-stagger.is-visible > *:nth-child(4) { transition-delay: 0.28s; }
.js .reveal-stagger.is-visible > *:nth-child(5) { transition-delay: 0.36s; }
.js .reveal-stagger.is-visible > *:nth-child(6) { transition-delay: 0.44s; }
.js .reveal-stagger.is-visible > * {
  opacity: 1;
  transform: none;
}

/* Hero / page-hero: soft Ken Burns + copy presence on load. */
@media (prefers-reduced-motion: no-preference) {
  .js .hero-slide[data-active] .hero-slide__media img,
  .js .hero-slide[data-active] .hero-slide__media .ph {
    animation: hero-ken 14s var(--ease-out-soft) both;
  }
  .js .page-hero--media .page-hero__media img,
  .js .page-hero--media .page-hero__media .ph {
    animation: hero-ken 16s var(--ease-out-soft) both;
  }
  .js .hero-slide[data-active] .hero-slide__copy,
  .js .page-hero--media .page-hero__inner {
    animation: hero-copy-in 1s var(--ease-out-soft) both;
  }
}
@keyframes hero-ken {
  from { transform: scale(1.06); }
  to   { transform: scale(1); }
}
@keyframes hero-copy-in {
  from { opacity: 0; transform: translateY(1rem); }
  to   { opacity: 1; transform: none; }
}

/* Origin list pins: one soft pulse when the section enters view. */
.js .origin__pins--dotted > li::before {
  transition: transform 0.6s var(--ease-out-soft), box-shadow 0.6s var(--ease-out-soft);
}
.js .origin__pins.is-pin-pulse > li::before {
  animation: origin-pin-pulse 1.1s var(--ease-out-soft) both;
}
.js .origin__pins.is-pin-pulse > li:nth-child(2)::before { animation-delay: 0.18s; }
@keyframes origin-pin-pulse {
  0%   { transform: scale(1); box-shadow: 0 0 0 0 rgba(184, 140, 74, 0.45); }
  45%  { transform: scale(1.35); box-shadow: 0 0 0 10px rgba(184, 140, 74, 0); }
  100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(184, 140, 74, 0); }
}

/* Trust-band logos settle in when the band is revealed. */
.js .trustband.reveal .logo-mark,
.js .trustband .logo-mark {
  opacity: 0.55;
  transition: opacity 0.7s var(--ease-out-soft);
}
.js .trustband.is-visible .logo-mark,
.js .trustband.is-trust-in .logo-mark {
  opacity: 1;
}

.btn--ghost:hover,
.btn--ghost:focus,
.btn--ghost:focus-visible,
.btn--ghost:active {
  color: var(--gold-hi);
  border-color: var(--gold);
  background: transparent;
}
.btn--ghost-leaf:hover,
.btn--ghost-leaf:focus,
.btn--ghost-leaf:focus-visible,
.btn--ghost-leaf:active {
  color: var(--text);
  border-color: var(--leaf-line);
  background: transparent;
}
.btn--ghost:hover::before,
.btn--ghost:focus::before,
.btn--ghost:active::before,
.btn--ghost-leaf:hover::before,
.btn--ghost-leaf:focus::before,
.btn--ghost-leaf:active::before {
  content: none;
  display: none;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .js .reveal,
  .js .reveal-stagger > * { opacity: 1 !important; transform: none !important; }
  .tick__track {
    animation: none !important;
    transform: none !important;
    width: 100%;
    justify-content: center;
  }
  .tick__group + .tick__group,
  .tick__item:not(:first-child) { display: none; }
  .tick__item::after { display: none; }
}

/* 11  Responsive --------------------------------------------------------- */

@media (max-width: 1080px) {
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .footer__contact-col { grid-column: 1 / -1; }
  .footer__products { border-left: 0; padding-left: 0; }
  /* Stacked, the copyright and legal links no longer share a baseline, so
     stop pushing them to the bottom of a column that is now short. */
  .footer__legal { margin-top: var(--s-5); padding-top: 0; }
  .footer__legal--right { text-align: left; }
  .nav { gap: 1rem; }
  .nav__link { font-size: 0.6875rem; }
}

/* 901-1000px is the tightest the horizontal row ever gets: the burger has not
   taken over yet, and nine items plus the wordmark still have to fit. It has to
   sit after the 1080 block above, or that one wins on source order.
   Widening the burger breakpoint instead would have been simpler, but the 900px
   block below also stacks the hero — this keeps the fix to the nav. */
@media (min-width: 901px) and (max-width: 1000px) {
  .nav { gap: 0.6rem; }
  .nav__link { font-size: 0.625rem; letter-spacing: 0.05em; }
}

@media (max-width: 900px) {
  .header__inner { min-height: 4.25rem; }

  .nav-toggle { display: block; }

  /* Off-canvas panel. Hidden from AT when closed via [hidden]. */
  .nav {
    position: fixed;
    inset: calc(var(--tick-h) + 4.25rem) 0 auto 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--bg-nav);
    border-bottom: 1px solid var(--line);
    padding: var(--s-4) var(--gutter) var(--s-6);
    max-height: calc(100dvh - var(--tick-h) - 4.25rem);
    overflow-y: auto;
  }
  .nav[hidden] { display: none; }
  .nav__link {
    padding-block: var(--s-4);
    border-bottom: 1px solid var(--line);
    font-size: 0.8125rem;
  }
  .nav__link::after { display: none; }

  .nav__item--has-sub {
    flex-wrap: wrap;
    border-bottom: 1px solid var(--line);
  }
  .nav__item--has-sub::after { display: none; }
  .nav__item--has-sub .nav__link {
    flex: 1;
    border-bottom: 0;
  }
  .nav__caret {
    padding: var(--s-4) 0.35rem;
    margin-left: 0;
  }
  .nav__sub {
    position: static;
    left: auto;
    top: auto;
    width: 100%;
    min-width: 0;
    padding: 0 0 var(--s-3);
    background: transparent;
    border: 0;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
  }
  .js .nav__sub {
    display: none;
    pointer-events: none;
  }
  .js .nav__item--has-sub:hover .nav__sub,
  .js .nav__item--has-sub:focus-within .nav__sub {
    display: none;
    transform: none;
  }
  .js .nav__item--has-sub.is-open .nav__sub {
    display: block;
    pointer-events: auto;
  }
  .nav__item--has-sub:hover .nav__caret-icon,
  .nav__item--has-sub:focus-within .nav__caret-icon {
    transform: rotate(45deg);
    margin-top: -0.15rem;
  }
  .nav__item--has-sub.is-open .nav__caret-icon {
    transform: rotate(225deg);
    margin-top: 0.12rem;
  }
  .nav__sub-link {
    padding: 0.55rem 0 0.55rem 0.85rem;
    font-size: 0.75rem;
    white-space: normal;
  }

  .header__cta,
  .header__quote { display: none; }

  .hero__inner { grid-template-columns: 1fr; }
  .hero__media { order: -1; }

  .split { grid-template-columns: 1fr; }
  .split--flip .split__media { order: -1; }
  .split__media { order: -1; }

  /* Content-bearing media slots keep source order so the heading leads. */
  .split--keep .split__media { order: 0; }

  .grid--4 { grid-template-columns: repeat(2, 1fr); }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .stat:nth-child(3) { border-left: 0; }
  .stat:nth-child(n + 3) { border-top: 1px solid var(--line); }
}

@media (max-width: 640px) {
  .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
  .stats { grid-template-columns: 1fr; }
  .stat + .stat { border-left: 0; border-top: 1px solid var(--line); }
  .footer__grid { grid-template-columns: 1fr; }
  .footer__contact-row { flex-direction: column; gap: var(--s-5); }
    .hero__actions .btn { width: 100%; }
}

/* On a phone the document's own 64px padding left roughly 200px for a
   four-column table, so the Amount column was cut off — on the one page a
   buyer opens from their email. Less padding, and the table scrolls if the
   description is still too long to fit. */
@media (max-width: 640px) {
  .invdoc-page { padding: var(--s-5) var(--s-4); }
  .invdoc { padding: var(--s-5); }
  .invdoc__head { gap: var(--s-4); }
  .invdoc__meta { text-align: left; }
  .invdoc__meta dl { justify-content: start; }
  .invdoc__lines { display: block; overflow-x: auto; }
  .invdoc__lines th,
  .invdoc__lines td { padding: var(--s-3) var(--s-2); }
}

@media print {
  body::after, .header, .footer__social, .hero::before { display: none; }
  body { background: #fff; color: #000; }
}

/* ==========================================================================
   12  Homepage components, matched to the homepage mockup.
   The page alternates dark and cream bands. Anything inside .section--light
   flips to the ink palette.
   ========================================================================== */

.section--light {
  background: var(--cream);
  color: var(--ink-body);
}
.section--light h1,
.section--light h2,
.section--light h3,
.section--light h4 { color: var(--ink); }
.section--light .eyebrow { color: var(--gold-ink); }
.section--light .u-muted { color: var(--ink-body); }
.section--light .counter { color: var(--gold-ink); }
.section--light .rule { background: var(--cream-line); }

/* Eyebrow centred between two rules, as drawn in the mockup. */
.eyebrow--flanked::before { display: block; }
.eyebrow--flanked::after {
  content: "";
  width: 1.75rem;
  height: 1px;
  background: currentColor;
  opacity: 0.7;
}

/* --- Hero carousel ------------------------------------------------------ */

.hero-slider {
  position: relative;
  min-height: clamp(30rem, 78vh, 46rem);
  display: grid;
  isolation: isolate;
  background: var(--bg-nav);
}

.hero-slide {
  grid-area: 1 / 1;
  position: relative;
  display: grid;
  align-items: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.9s var(--ease-out-soft), visibility 0s linear 0.9s;
}
.hero-slide[data-active] {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.9s var(--ease-out-soft), visibility 0s;
}
/* Without JS the first slide is simply a static hero. */
.no-js .hero-slide { opacity: 1; visibility: visible; }
.no-js .hero-slide + .hero-slide { display: none; }

.hero-slide__media { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.hero-slide__media img,
.hero-slide__media .ph { width: 100%; height: 100%; object-fit: cover; }

/* Extract slide: 16:9 parks the bottle on the far right. Keep it in frame. */
.hero-slide--extract .hero-slide__media img {
  object-position: 82% 42%;
  transform-origin: 82% 42%;
}

/* Readability scrim. Heavier on the left where the copy sits, so the
   photograph stays visible on the right exactly as in the mockup. */
.hero-slide__media::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(90deg, rgba(10, 11, 12, 0.94) 0%, rgba(10, 11, 12, 0.78) 34%, rgba(10, 11, 12, 0.18) 66%, rgba(10, 11, 12, 0.35) 100%),
    linear-gradient(180deg, rgba(10, 11, 12, 0.5) 0%, transparent 30%);
}

.hero-slide__inner { position: relative; z-index: 1; padding-block: clamp(3rem, 8vw, 6rem); }
.hero-slide__copy { max-width: 40ch; }

.hero-slide__title {
  /* Reduced from clamp(2.4rem, 5.6vw, 4.6rem) on her note that VANILLA &
     BLACK PEPPER was overpowering the slide. */
  font-size: clamp(2.1rem, 4.6vw, 3.7rem);
  line-height: 1.02;
  letter-spacing: 0.005em;
  text-transform: uppercase;
  margin-block: var(--s-4) var(--s-5);
}

.hero-slide__kicker {
  font-family: var(--font-ui);
  font-size: clamp(0.95rem, 1.5vw, 1.2rem);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gold);
  line-height: 1.4;
  /* Wide enough that the explicit <br> in each kicker is the only break on
     desktop. At 24ch the longest half — "HAND-POLLINATED. SUN-DRIED." — wrapped
     again and the kicker ran to three lines. Still inside .hero-slide__copy's
     40ch column, so the block keeps its shape. */
  max-width: 34ch;
}

/*
 * Opt-in single line, for a kicker that is a strapline rather than a sentence.
 * It has to escape .hero-slide__copy's 40ch ceiling, hence max-content.
 *
 * Only above 900px: "Crafted for Global Food Manufacturers" is 37 characters,
 * and on a phone one line would mean type too small to read. Below the
 * breakpoint it wraps like every other kicker.
 */
.hero-slide__kicker--one-line { max-width: none; }

@media (min-width: 900px) {
  .hero-slide__kicker--one-line {
    white-space: nowrap;
    /* max-content so it can exceed .hero-slide__copy's 40ch ceiling. A
       max-width cap would not help here: nowrap text overflows its box rather
       than wrapping, so the breakpoint above is what actually keeps it inside
       the container. It is set at the width where the line genuinely fits. */
    width: max-content;
  }
}

.hero-slide__body { margin-top: var(--s-5); max-width: 40ch; color: var(--text-body); }
.hero-slide__actions { display: flex; flex-wrap: wrap; gap: var(--s-4); margin-top: var(--s-7); }

/* Vertical slide counter rail on the far left. */
.hero-rail {
  position: absolute;
  left: clamp(0.75rem, 2.5vw, 2rem);
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-4);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
.hero-rail__line {
  width: 1px;
  height: clamp(4rem, 14vh, 9rem);
  background: var(--line-strong);
  position: relative;
}
.hero-rail__line::after {
  content: "";
  position: absolute;
  left: 0; top: 0;
  width: 1px;
  height: var(--rail-progress, 25%);
  background: var(--gold);
  transition: height 0.6s var(--ease-out-soft);
}
.hero-rail__current { color: var(--gold); }

/* Dot controls. Real buttons, so the slider is keyboard operable. */
.hero-dots {
  position: absolute;
  right: clamp(1rem, 4vw, 3rem);
  bottom: clamp(1.25rem, 4vw, 2.5rem);
  z-index: 3;
  display: flex;
  gap: var(--s-3);
}
.hero-dots button {
  width: 2rem;
  padding: 0.6rem 0;
  background: none;
  border: 0;
  cursor: pointer;
  position: relative;
}
.hero-dots button::after {
  content: "";
  position: absolute;
  inset: 0.6rem 0;
  background: rgba(255, 255, 255, 0.3);
  transition: background 0.3s var(--ease);
}
.hero-dots button[aria-current="true"]::after { background: var(--gold); }
.hero-dots button:hover::after { background: var(--gold-hi); }

/* --- Feature strip ------------------------------------------------------ */

.features {
  background: var(--bg-nav);
  border-block: 1px solid var(--line);
}
.features__grid { display: grid; grid-template-columns: repeat(5, 1fr); }
.feature { display: flex; gap: var(--s-4); padding: var(--s-6) var(--s-5); }
.feature + .feature { border-left: 1px solid var(--line); }
.feature__icon { color: var(--gold); flex-shrink: 0; }
.feature__title {
  font-family: var(--font-ui);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: var(--s-2);
}
.feature__body { font-size: var(--step--1); color: var(--text-muted); line-height: 1.5; }

/* --- Journey stepper, light band ---------------------------------------- */

.journey {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: var(--s-4);
  margin-top: var(--s-8);
}
/* A four-step journey. This has to be a class, not an inline style: inline
   styles outrank every stylesheet rule, so the 1080/720/480 breakpoints below
   were dead on the two pages that set the columns inline, and the row stayed
   four-across down to 320px where it ran off the screen. Declared here, before
   those media queries, so they still override it as the screen narrows. */
.journey--four { grid-template-columns: repeat(4, 1fr); }
.journey__step { position: relative; text-align: center; }

/* Connector runs between the discs, not underneath them. */
.journey__step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 2.25rem;
  left: calc(50% + 2.75rem);
  right: calc(-50% + 2.75rem);
  height: 1px;
  background: var(--gold-ink);
  opacity: 0.45;
}
.journey__disc {
  width: 4.5rem; height: 4.5rem;
  margin: 0 auto var(--s-4);
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--bg-nav);
  color: var(--gold);
  position: relative;
  z-index: 1;
}
.journey__num {
  display: block;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--gold-ink);
  font-variant-numeric: tabular-nums;
}
.journey__title {
  font-family: var(--font-ui);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink);
  margin-block: var(--s-2) var(--s-3);
}
.journey__body { font-size: 0.78rem; line-height: 1.5; color: var(--ink-body); }

/* --- Tri-link strip ----------------------------------------------------- */

.trilink { background: var(--bg-nav); border-bottom: 1px solid var(--line); }
.trilink__grid { display: grid; grid-template-columns: repeat(3, 1fr); }
.trilink__item {
  display: flex;
  align-items: center;
  gap: var(--s-5);
  padding: var(--s-6) var(--s-5);
  transition: background 0.4s var(--ease);
}
.trilink__item + .trilink__item { border-left: 1px solid var(--line); }
.trilink__item:hover { background: var(--bg-panel); }
.trilink__icon { color: var(--gold); flex-shrink: 0; }
.trilink__title {
  font-family: var(--font-ui);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: var(--s-2);
}
.trilink__body { font-size: var(--step--1); color: var(--text-muted); line-height: 1.5; }
.trilink__arrow { margin-left: auto; color: var(--gold); transition: transform 0.35s var(--ease-out-soft); }
.trilink__item:hover .trilink__arrow { transform: translateX(5px); }

/* --- Product cards ------------------------------------------------------ */
/* Default: two columns. Last-child full-row span is the old 3-card
   homepage pepper treatment. Homepage now uses .products-home (2×2);
   /products uses .products-index. Both cancel the span. */

.products {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-6);
  margin-top: var(--s-8);
}
.products > .product:last-child {
  grid-column: 1 / -1;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.product {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  background: var(--bg-panel);
  border: 1px solid var(--line);
  overflow: hidden;
}
.product__media { position: relative; }
.product__media img,
.product__media .ph {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}
.product__body { padding: var(--s-6); }
.product__name {
  font-family: var(--font-ui);
  font-size: var(--step-1);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text);
}
.product__grade {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
  margin-block: var(--s-2) var(--s-4);
}
.product__desc { font-size: var(--step--1); color: var(--text-muted); }
.product__specs { margin-block: var(--s-5); }
.product__specs li {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  font-size: var(--step--1);
  color: var(--text-body);
  padding-block: 0.3rem;
}
.product__specs svg { color: var(--gold-dim); flex-shrink: 0; }

/* --- Origin band -------------------------------------------------------- */

.origin {
  position: relative;
  overflow: hidden;
  background: var(--bg);
  /* Extra bottom padding keeps the origin CTA on charcoal — the compact
     landscape must not pull the copy column down into the cream trust band. */
  padding-block: clamp(3.25rem, 6vw, 5rem) clamp(4.5rem, 8vw, 6.5rem);
}
.origin__grid {
  display: grid;
  grid-template-columns: 1fr 1.85fr 0.95fr;
  align-items: center;
  gap: clamp(1.1rem, 2.8vw, 2.25rem);
}
.origin__atlas {
  display: grid;
  grid-template-columns: 1.05fr 0.72fr;
  align-items: stretch;
  gap: 0.2rem 0.55rem;
  min-width: 0;
  overflow: visible;
}
.origin__copy { min-width: 0; }
.origin__title {
  margin-block: var(--s-4) var(--s-5);
  /* Headings inherit text-wrap: balance, which plus the 1fr copy column
     splits “From the Heart” before the explicit <br>. nowrap keeps the
     mockup break: From the Heart / of East Africa. The box is sized to
     the longer line so it cannot reflow to three at desktop band width. */
  text-wrap: nowrap;
  max-width: 8.6em;
}
.origin__cta { margin-top: var(--s-6); margin-bottom: 0; }
.origin__map {
  position: relative;
  overflow: visible;
  z-index: 0;
}
.origin__map svg { width: 100%; height: auto; overflow: visible; color: var(--gold-lo); }
.origin__label {
  font-family: var(--font-ui);
  position: absolute;
  font-size: 0.6875rem;
  letter-spacing: 0.18em;
  color: var(--gold-dim);
}
.origin__pins {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 1.35rem;
  padding-left: 1.6rem;
}
.origin__pins > li + li { margin-top: 0; }
@media (min-width: 1081px) {
  /* Lock caption titles to the same %Y as the SVG leader ends (14.5 / 54.8). */
  .origin__pins {
    display: block;
    min-height: 100%;
    padding-left: 1.6rem;
  }
  .origin__pins > li {
    position: absolute;
    left: 1.6rem;
    right: 0;
    margin: 0;
  }
  .origin__pins > li:nth-child(1) {
    top: 14.5%;
    transform: translateY(-0.45em);
  }
  .origin__pins > li:nth-child(2) {
    top: 54.8%;
    transform: translateY(-0.45em);
  }
}
.origin__pin-title {
  font-family: var(--font-ui);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--leaf-line);
  margin-bottom: var(--s-2);
}
.origin__pin-body { font-size: var(--step--1); color: var(--text-muted); max-width: 26ch; }

.origin__photo {
  position: relative;
  align-self: stretch;
  height: clamp(15rem, 30vw, 23rem);
  margin-right: calc(50% - 50vw);
}
.origin__photo img,
.origin__photo picture,
.origin__photo .ph { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.origin__photo::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(90deg, var(--bg) 0%, rgba(15, 15, 16, 0.65) 18%, rgba(15, 15, 16, 0) 48%);
  pointer-events: none;
}

/* Homepage: white ring+dot at the caption end; short gold hop off the east edge. */
.origin .ug-map__border {
  stroke-width: 1.55;
  filter: drop-shadow(0 0 1.2px rgba(184, 140, 74, 0.45));
}
.origin .ug-map__halo {
  stroke: #fff;
  stroke-width: 1.35;
  opacity: 1;
  animation: none;
}
.origin .ug-map__dot { fill: #fff; }
.origin .ug-map__leader {
  stroke: var(--gold-dim);
  stroke-width: 1.15;
  opacity: 0.95;
}

/* --- Trust band --------------------------------------------------------- */

/* Logo row on cream, sample CTA on green, side by side, as her mockup draws
   it. Proportioned off that drawing: the cream side takes about two thirds. */
.trustband {
  display: grid;
  /* minmax, not 1fr. The CTA sets overflow:hidden for its botanical, which
     makes it a scroll container, and a scroll container's automatic minimum
     size is 0 — so a plain 1fr let it be squeezed to nothing while the nowrap
     logo row kept its full min-content width. The floor stops the heading
     being clipped on any screen narrower than a maximised 1440. */
  grid-template-columns: 1.75fr minmax(19rem, 1fr);
  align-items: stretch;
  position: relative;
  z-index: 0;
  overflow: visible;
  background: var(--cream);
}

/* Trusted-by: title + logos in one horizontal row. */
.trustband__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(1.25rem, 3vw, 2.75rem);
  padding: clamp(2rem, 4vw, 3rem) var(--gutter);
}

.trustband__title {
  flex: 0 0 auto;
  margin: 0;
  font-family: var(--font-ui);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--leaf-ink);
  white-space: nowrap;
}

.logos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(1.35rem, 3vw, 2.75rem);
  margin: 0;
  padding: 0;
  list-style: none;
  flex: 1 1 18rem;
  min-width: 0;
}
.logo-mark {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: #2a2a2a;
  opacity: 0.82;
  line-height: 1.1;
  white-space: nowrap;
}
.logo-mark__primary {
  font-family: var(--font-display);
  font-size: clamp(1rem, 1.4vw, 1.2rem);
  font-weight: 600;
  letter-spacing: 0.02em;
}
.logo-mark__secondary {
  font-family: var(--font-ui);
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.85;
}
.logo-mark--mccormick { flex-direction: column; align-items: flex-start; gap: 0.15rem; }
.logo-mark--mccormick .logo-mark__primary {
  font-size: clamp(1.05rem, 1.5vw, 1.35rem);
  letter-spacing: -0.01em;
}
.logo-mark--symrise .logo-mark__glyph,
.logo-mark--olam .logo-mark__glyph {
  width: 0.85rem;
  height: 0.85rem;
  border: 1.5px solid currentColor;
  border-radius: 50%;
  flex-shrink: 0;
}
.logo-mark--olam .logo-mark__glyph {
  border-radius: 0;
  clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
  border: 0;
  background: currentColor;
  width: 0.7rem;
  height: 0.65rem;
}
.logo-mark--olam em {
  font-style: normal;
  font-weight: 400;
  letter-spacing: 0.04em;
}
.logo-mark--private .logo-mark__primary {
  font-family: var(--font-ui);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.logo-mark--givaudan .logo-mark__primary,
.logo-mark--firmenich .logo-mark__primary {
  letter-spacing: 0.04em;
}

/* ==========================================================================
   13  Homepage responsive
   ========================================================================== */

@media (max-width: 1080px) {
  .features__grid { grid-template-columns: repeat(3, 1fr); }
  .feature:nth-child(3n + 1) { border-left: 0; }
  .feature:nth-child(n + 4) { border-top: 1px solid var(--line); }

  .journey { grid-template-columns: repeat(4, 1fr); gap: var(--s-6) var(--s-4); }
  .journey__step::after { display: none; }

  .products { grid-template-columns: 1fr; }
  .products > .product:last-child {
    grid-template-columns: 1fr;
  }
  .origin__grid { grid-template-columns: 1fr 1fr; }
  .origin__atlas { grid-template-columns: 0.85fr 1fr; }
  .origin__photo { grid-column: 1 / -1; margin-right: 0; }
  .origin__photo::before { display: none; }
}

@media (max-width: 900px) {
  .hero-slide__inner { padding-block: clamp(4rem, 12vw, 7rem); }
  .hero-slide__copy { max-width: none; }
  .hero-slide__media::after {
    background: linear-gradient(180deg, rgba(10, 11, 12, 0.72) 0%, rgba(10, 11, 12, 0.88) 100%);
  }
  .hero-slide--extract .hero-slide__media img {
    object-position: 50% 38%;
    transform-origin: 50% 38%;
  }
  .hero-slide--extract .hero-slide__media::after {
    background:
      linear-gradient(180deg, rgba(10, 11, 12, 0.22) 0%, rgba(10, 11, 12, 0.42) 48%, rgba(10, 11, 12, 0.82) 100%);
  }
  .hero-rail { display: none; }

  .trilink__grid { grid-template-columns: 1fr; }
  .trilink__item + .trilink__item { border-left: 0; border-top: 1px solid var(--line); }
}

@media (max-width: 720px) {
  .features__grid { grid-template-columns: 1fr 1fr; }
  .feature + .feature { border-left: 0; }
  .feature:nth-child(n + 3) { border-top: 1px solid var(--line); }

  .journey { grid-template-columns: repeat(2, 1fr); }

  .product { grid-template-columns: 1fr; }
  .product__media { height: 16rem; }
  .products > .product:last-child .product__media { height: 20rem; }

  .origin__grid { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  .features__grid { grid-template-columns: 1fr; }
  .feature:nth-child(n + 2) { border-top: 1px solid var(--line); }
  .journey { grid-template-columns: 1fr; }
}

/* ==========================================================================
   14  Corrections from visual QA against the homepage mockup
   ========================================================================== */

/* The light-band heading rule was repainting text inside dark islands that
   sit within a cream section, rendering near-black on near-black. Anything
   on a dark surface inside .section--light has to opt back out. */
.section--light .product h3,
.section--light .product__name { color: var(--text); }
.section--light .product__desc,
.section--light .product__specs li { color: var(--text-muted); }
.section--light .product__specs li { color: var(--text-body); }

/* .head__body is tuned for dark grounds; on cream it washed out. */
.section--light .head__body,
.trustband .head__body { color: var(--ink-body); }

/* Placeholders sitting on a cream ground need the light treatment, otherwise
   they punch dark holes in the band. */
.section--light .ph,
.trustband .ph {
  background:
    repeating-linear-gradient(135deg, rgba(126, 95, 58, 0.07) 0 10px, transparent 10px 20px),
    var(--cream-panel);
  border-color: var(--gold-ink);
  color: var(--gold-ink);
}
/* ...but not the ones inside the dark product cards. */
.section--light .product .ph {
  background:
    repeating-linear-gradient(135deg, rgba(191, 142, 85, 0.05) 0 10px, transparent 10px 20px),
    var(--bg-raised);
  border-color: var(--gold-lo);
  color: var(--gold-dim);
}

/* Hero headline was breaking to four lines. The copy column was sized in ch
   against the body font while the title runs up to 4.6rem, and balance was
   fighting the explicit line break. */
.hero-slide__copy { max-width: 46rem; }
.hero-slide__title { text-wrap: normal; }

/* --- 14b  Wrapping and bleed corrections -------------------------------- */

/* .head caps width in ch, which resolves against the 1rem body font, not the
   ~2.9rem display size. Centred section headings were therefore wrapping at
   roughly 500px. Cap the block in rem and re-narrow the body copy separately. */
.head--center { max-width: 62rem; }
.head--center .head__title { max-width: none; }
.head--center .head__body { max-width: 52ch; margin-inline: auto; }

/* --- 15  <picture> wrappers --------------------------------------------- */

/* img() emits <picture><img>. The wrapper is an extra block between the slot
   and the image, so slots that size their image need to size the wrapper too.
   Slots that absolutely position the image are unaffected, because <picture>
   is not a positioned ancestor. */
picture { display: block; }

.hero-slide__media picture { width: 100%; height: 100%; }
.origin__photo picture,
.product__media picture { display: contents; }

/* ==========================================================================
   16  Forms
   ========================================================================== */

.form { max-width: 46rem; }
.form__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-5); }
.form__row--full { grid-column: 1 / -1; }

.field label,
.field legend {
  display: block;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: var(--s-3);
}
.field .req { color: var(--gold); }

.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 0.85rem 1rem;
  background: var(--bg-panel);
  border: 1px solid var(--line-strong);
  color: var(--text);
  font-size: var(--step-0);
  transition: border-color 0.3s var(--ease), background 0.3s var(--ease);
}
.field textarea { min-height: 8rem; resize: vertical; }
.field input:focus,
.field select:focus,
.field textarea:focus { border-color: var(--gold); background: var(--bg-raised); outline: none; }
.field input::placeholder, .field textarea::placeholder { color: var(--text-muted); opacity: 1; }

.field--error input,
.field--error select,
.field--error textarea { border-color: #C8564B; }
.field__error { margin-top: var(--s-2); font-size: var(--step--1); color: #E08A80; }

/* Honeypot. Hidden from people, visible to naive bots. Not display:none,
   because some bots skip those. */
.hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px; height: 1px;
  overflow: hidden;
}

.notice {
  padding: var(--s-4) var(--s-5);
  border: 1px solid var(--line-strong);
  border-left: 2px solid var(--gold);
  background: var(--bg-panel);
  font-size: var(--step--1);
  margin-bottom: var(--s-6);
}
.notice--ok { border-left-color: var(--ok); }
.notice--bad { border-left-color: #C8564B; }
.notice p + p { margin-top: var(--s-3); }

.check-list {
  display: grid;
  gap: var(--s-3);
}
.check-list .check {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  font-size: var(--step--1);
  color: var(--text-body);
  letter-spacing: 0;
  text-transform: none;
  font-weight: 400;
}
.check-list input[type="checkbox"],
.check-list input[type="radio"] {
  width: auto;
  margin-top: 0.2em;
  accent-color: var(--gold);
}

.quote-page,
.checkout-page { padding-bottom: clamp(4rem, 9vw, 8rem); }
.quote-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.2fr);
  gap: clamp(1.5rem, 5vw, 4rem);
  align-items: start;
}
.quote-aside {
  background: var(--bg-panel);
  border: 1px solid var(--line);
  padding: var(--s-6);
}
.quote-aside__media {
  margin: calc(-1 * var(--s-6)) calc(-1 * var(--s-6)) var(--s-5);
}
.quote-aside__media img,
.quote-aside__media picture { width: 100%; height: auto; display: block; }
.quote-aside__lead {
  font-family: var(--font-display);
  font-size: var(--step-1);
  margin: 0 0 var(--s-5);
}
.quote-aside__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--s-4);
}
.quote-aside__list li {
  display: flex;
  gap: var(--s-3);
  align-items: center;
  font-size: var(--step--1);
  color: var(--text-muted);
}
.quote-aside__list svg { color: var(--gold); flex-shrink: 0; }
.quote-form-wrap .form { max-width: none; }
.flow-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 0.75rem;
  margin-top: var(--s-8);
  padding-top: var(--s-6);
  border-top: 1px solid var(--line);
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.flow-strip strong { color: var(--gold); font-weight: 600; }
.pay-block {
  margin-top: var(--s-7);
  padding-top: var(--s-6);
  border-top: 1px solid var(--line);
}
.pay-block h2 {
  font-size: var(--step-1);
  margin: 0 0 var(--s-4);
}
.confirm-hero {
  text-align: center;
  padding: clamp(3rem, 8vw, 6rem) 0;
}
.confirm-hero h1 { margin: var(--s-4) 0 var(--s-4); }

@media (max-width: 860px) {
  .quote-layout { grid-template-columns: 1fr; }
}

.section--light .field input,
.section--light .field select,
.section--light .field textarea {
  background: #FFFFFF;
  border-color: var(--cream-line);
  color: var(--ink);
}
.section--light .field label,
.section--light .field legend { color: var(--ink-body); }
.section--light .notice { background: var(--cream-panel); border-color: var(--cream-line); }

/* ==========================================================================
   17  Traceability
   ========================================================================== */

.trace-form {
  display: flex;
  gap: var(--s-3);
  flex-wrap: wrap;
  margin-top: var(--s-5);
}
.trace-form input {
  flex: 1 1 18rem;
  padding: 0.9rem 1rem;
  background: var(--bg-panel);
  border: 1px solid var(--line-strong);
  color: var(--text);
  font-family: var(--font-ui);
  letter-spacing: 0.06em;
}
.trace-form input:focus { border-color: var(--gold); outline: none; }
.trace-hint { margin-top: var(--s-3); font-size: 0.6875rem; letter-spacing: 0.1em; color: var(--text-muted); }

.verified {
  display: flex;
  align-items: flex-start;
  gap: var(--s-4);
  padding: var(--s-5);
  border: 1px solid var(--line);
  background: var(--bg-panel);
}
.verified__icon { color: var(--ok); flex-shrink: 0; }
.verified__title { font-family: var(--font-ui); font-weight: 600; color: var(--ok); font-size: var(--step-0); }
.verified__body { font-size: var(--step--1); color: var(--text-muted); margin-top: var(--s-2); }

.trace-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: var(--s-6);
  align-items: start;
  margin-top: var(--s-6);
}

.spec-table { width: 100%; border-collapse: collapse; }
.spec-table th,
.spec-table td {
  text-align: left;
  padding: var(--s-3) 0;
  border-bottom: 1px solid var(--line);
  font-size: var(--step--1);
  vertical-align: top;
}
.spec-table th {
  font-weight: 500;
  color: var(--text-muted);
  letter-spacing: 0.06em;
  width: 45%;
}
.spec-table td { color: var(--text); text-align: right; }

/* Vertical stage timeline on the trace result */
.trace-timeline { border-left: 1px solid var(--line); padding-left: var(--s-6); }
.trace-stage { position: relative; padding-bottom: var(--s-6); }
.trace-stage:last-child { padding-bottom: 0; }
.trace-stage::before {
  content: "";
  position: absolute;
  left: calc(-1 * var(--s-6) - 3.5px);
  top: 0.5rem;
  width: 6px; height: 6px;
  transform: rotate(45deg);
  background: var(--gold);
}
.trace-stage__label {
  font-family: var(--font-ui);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
}
.trace-stage__date { font-size: 0.6875rem; color: var(--text-muted); margin-top: var(--s-2); }
.trace-stage__body { font-size: var(--step--1); color: var(--text-muted); margin-top: var(--s-2); max-width: 48ch; }

.quality-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-4); margin-top: var(--s-5); }
.quality-cell { text-align: center; padding: var(--s-5) var(--s-3); border: 1px solid var(--line); background: var(--bg-panel); }
.quality-cell__icon { color: var(--gold); display: grid; place-items: center; margin-bottom: var(--s-3); }
.quality-cell__label { font-size: 0.625rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted); }
.quality-cell__value { font-family: var(--font-display); font-size: var(--step-2); color: var(--text); margin-top: var(--s-2); }

.doc-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: var(--s-4); margin-top: var(--s-5); }
.doc {
  display: block;
  padding: var(--s-5);
  border: 1px solid var(--line);
  background: var(--bg-panel);
  text-align: center;
  transition: border-color 0.3s var(--ease), background 0.3s var(--ease);
}
.doc:hover { border-color: var(--gold-lo); background: var(--bg-raised); }
.doc__icon { color: var(--gold); display: grid; place-items: center; margin-bottom: var(--s-3); }
.doc__title { font-size: var(--step--1); color: var(--text); }
.doc__meta { font-size: 0.625rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); margin-top: var(--s-2); }
.doc--locked { opacity: 0.55; }

/* Horizontal shipment progress */
.progress { display: grid; grid-auto-flow: column; gap: var(--s-3); margin-top: var(--s-5); }
.progress__step { position: relative; padding-top: var(--s-5); font-size: 0.6875rem; letter-spacing: 0.08em; color: var(--text-muted); text-transform: uppercase; }
.progress__step::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 1px;
  background: var(--line-strong);
}
.progress__step::after {
  content: "";
  position: absolute;
  top: -3.5px; left: 0;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--bg);
  border: 1px solid var(--line-strong);
}
.progress__step[data-done]::before { background: var(--gold); }
.progress__step[data-done]::after { background: var(--gold); border-color: var(--gold); }
.progress__step[data-done] { color: var(--text); }

/* ==========================================================================
   18  Portal and admin shell
   ========================================================================== */

.shell { display: grid; grid-template-columns: 16.5rem 1fr; min-height: 70vh; }
.shell__side {
  background: var(--bg-nav);
  border-right: 1px solid var(--line);
  padding: var(--s-6) var(--s-4);
  display: flex;
  flex-direction: column;
}
.shell__main { padding: var(--s-6) var(--gutter); min-width: 0; }

.shell__brand {
  font-family: var(--font-display);
  font-size: var(--step-2);
  letter-spacing: 0.18em;
  color: var(--gold);
  padding-inline: var(--s-4);
  margin-bottom: var(--s-6);
  line-height: 1;
}

.side-nav a {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: 0.65rem var(--s-4);
  font-size: var(--step--1);
  color: var(--text-muted);
  border-left: 2px solid transparent;
  transition: color 0.3s var(--ease), background 0.3s var(--ease), border-color 0.3s var(--ease);
}
.side-nav a:hover { color: var(--text); background: var(--bg-panel); }
.side-nav a[aria-current="page"] { color: var(--gold); border-left-color: var(--gold); background: var(--bg-panel); }
.side-nav svg { flex-shrink: 0; }

/* TERA / admin sidebar help — copper frame so buyers cannot miss it.
   Matches Ethel’s “Need Help?” mockup: gold border, support line, CONTACT US. */
.shell__help {
  margin-top: auto;
  margin-inline: var(--s-3);
  margin-bottom: var(--s-5);
  padding: var(--s-5) var(--s-4);
  border: 1.5px solid var(--gold);
  background: transparent;
  box-shadow: none;
  text-align: center;
}
.shell--portal .shell__help {
  border-color: var(--gold-hi);
  border-width: 1.5px;
  padding: var(--s-5);
  background: rgba(191, 142, 85, 0.04);
}
.shell__help-title {
  font-family: var(--font-ui);
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--text);
  margin-bottom: var(--s-2);
}
.shell--portal .shell__help-title {
  font-size: 1rem;
  letter-spacing: 0.02em;
}
.shell__help-body {
  font-size: var(--step--1);
  color: var(--text-body);
  margin-bottom: var(--s-5);
  line-height: 1.45;
  max-width: 12.5rem;
  margin-inline: auto;
}
.shell__help-btn {
  width: 100%;
  justify-content: center;
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0.75rem 0.85rem;
  border-width: 1.5px;
  border-color: var(--gold);
  color: var(--gold-hi);
  background: transparent;
}
.shell--portal .shell__help-btn {
  border-color: var(--gold-hi);
  color: var(--gold-hi);
}
.shell__help-btn:hover {
  border-color: var(--gold-hi);
  color: var(--bg-nav);
  background: transparent;
}
.shell__help-btn:hover::before {
  transform: scaleX(1);
}

.shell__brand--admin {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  letter-spacing: 0.12em;
}
.shell__brand-top {
  font-size: var(--step-1);
  letter-spacing: 0.22em;
}
.shell__brand-sub {
  font-family: var(--font-ui);
  font-size: 0.625rem;
  letter-spacing: 0.28em;
  color: var(--gold-dim);
}

.side-nav__group {
  margin: var(--s-5) 0 var(--s-2);
  padding-inline: var(--s-4);
  font-size: 0.5625rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  /* Same fix as .mark__region: --gold-lo is a hairline colour and measures
     3.96:1 here, under AA. These are the admin sidebar's section headings,
     read every day, so they get the recessive-but-legible gold. */
  color: var(--gold-dim);
}
.side-nav--grouped .side-nav__group:first-child { margin-top: 0; }

/* Admin shell — charcoal / gold chrome scoped to .shell--admin */
.shell--admin {
  min-height: calc(100vh - 4rem);
  background: #0C0C0D;
}
.shell--admin .shell__side {
  background: #0A0A0B;
  border-right-color: rgba(191, 142, 85, 0.22);
}
.shell--admin .shell__main {
  background:
    radial-gradient(ellipse 80% 40% at 50% -10%, rgba(191, 142, 85, 0.06), transparent 55%),
    #0C0C0D;
}
.shell--admin .side-nav a {
  border-left: 0;
  border-radius: 2px;
  margin-bottom: 2px;
}
.shell--admin .side-nav a:hover {
  color: var(--text);
  background: rgba(191, 142, 85, 0.08);
}
.shell--admin .side-nav a[aria-current="page"] {
  color: var(--bg-nav);
  background: var(--gold);
  border-left-color: transparent;
}
.shell--admin .side-nav a[aria-current="page"] svg {
  stroke: var(--bg-nav);
}
.shell--admin .shell__help {
  border-color: var(--gold);
  background: transparent;
  box-shadow: none;
}
.shell--admin .shell__user {
  margin-top: var(--s-4);
  padding-inline: var(--s-4);
  border-top-color: rgba(191, 142, 85, 0.18);
}
.shell__user-role {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.625rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold-dim);
}
.shell__user-out {
  color: var(--gold);
  display: inline-block;
  margin-top: var(--s-3);
  font-size: var(--step--1);
}
.shell__user-out:hover { color: var(--gold-hi); }

/* Admin dashboard */
.admin-dash__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--s-5);
  flex-wrap: wrap;
  margin-bottom: var(--s-7);
}
.admin-dash__title {
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-weight: 500;
  letter-spacing: -0.01em;
}
.admin-dash__sub {
  margin-top: var(--s-3);
  font-size: var(--step--1);
  color: var(--text-muted);
  max-width: 48ch;
}
.admin-dash__actions { display: flex; gap: var(--s-3); flex-wrap: wrap; }
.admin-kpis {
  display: grid;
  /* auto-fit rather than a fixed count: the row carries six cards now and
     reflows to three, then two, on smaller screens without its own breakpoint. */
  grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
  gap: var(--s-4);
  margin-bottom: var(--s-7);
}
.admin-kpi {
  border: 1px solid rgba(191, 142, 85, 0.18);
  background: var(--bg-panel);
  padding: var(--s-5);
  min-width: 0;
  transition: border-color 0.3s var(--ease), transform 0.35s var(--ease-out-soft);
}
.admin-kpi:hover {
  border-color: rgba(191, 142, 85, 0.4);
  transform: translateY(-2px);
}
.admin-kpi__top {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin-bottom: 0.55rem;
  color: var(--gold);
}
.admin-kpi__top svg {
  flex-shrink: 0;
  stroke: var(--gold);
  color: var(--gold);
}
.admin-kpi__value {
  font-family: var(--font-display);
  font-size: var(--step-2);
  color: #fff;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.admin-kpi__label {
  margin: 0;
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
}
.admin-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: var(--s-5);
  margin-bottom: var(--s-7);
}
.admin-card {
  border: 1px solid rgba(191, 142, 85, 0.16);
  background: var(--bg-panel);
  padding: var(--s-6);
  /* Same trap one level up: without this the card takes its width from its
     widest descendant rather than from its grid column. */
  min-width: 0;
}
.admin-card__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--s-4);
  margin-bottom: var(--s-5);
  flex-wrap: wrap;
}
.admin-card__title {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: var(--s-5);
}
.admin-card__meta {
  font-size: 0.625rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.admin-card__note {
  margin-top: var(--s-4);
  font-size: var(--step--1);
  color: var(--text-muted);
}
.admin-card__note strong { color: var(--text); font-weight: 500; }
.admin-card__more {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  margin-top: 0.45rem;
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.admin-gauges {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--s-3);
}
/* Two rows: the dial, then its label underneath.
   The ring used to be position:absolute inset:0.35rem, which stretched it over
   the whole tile — so it took the tile's 8rem x 4.75rem shape and rendered as
   an ellipse, and it sat on top of the label instead of above it. The ring is
   now a fixed square in row one (square is what makes border-radius:50% a real
   circle), the value shares that same grid cell so it centres inside the ring,
   and the label gets a row of its own. */
.admin-gauge {
  --p: 0;
  --dial: 4.75rem;
  display: grid;
  grid-template-columns: var(--dial);
  grid-template-rows: var(--dial) auto;
  justify-content: center;
  justify-items: center;
  row-gap: 0.45rem;
  text-align: center;
  padding: var(--s-2) 0.25rem;
}
.admin-gauge__ring {
  grid-column: 1;
  grid-row: 1;
  width: var(--dial);
  height: var(--dial);
  border-radius: 50%;
  background: conic-gradient(var(--gold) calc(var(--p) * 1%), var(--line) 0);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 6px), #000 calc(100% - 5px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 6px), #000 calc(100% - 5px));
}
.admin-gauge--lab .admin-gauge__ring {
  background: conic-gradient(var(--line-strong) 100%, var(--line) 0);
}
.admin-gauge--lab.is-ok .admin-gauge__ring {
  background: conic-gradient(var(--ok) 100%, var(--line) 0);
}
/* Shares row one with the ring so it reads as the dial's centre. Sized to the
   circle's inscribed width, not the tile's, so "Passed" cannot push past the
   stroke the way it did before. */
.admin-gauge__val {
  grid-column: 1;
  grid-row: 1;
  align-self: center;
  z-index: 1;
  font-family: var(--font-display);
  font-size: var(--step--1);
  color: var(--text);
  line-height: 1.15;
  max-width: calc(var(--dial) - 1.35rem);
  word-break: break-word;
}
.admin-gauge__lab {
  grid-column: 1;
  grid-row: 2;
  font-size: 0.5625rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  white-space: nowrap;
}

.admin-donut-row {
  display: flex;
  align-items: center;
  gap: var(--s-6);
  flex-wrap: wrap;
}
.admin-donut {
  position: relative;
  width: 8rem;
  height: 8rem;
  border-radius: 50%;
  flex-shrink: 0;
  display: grid;
  place-items: center;
}
.admin-donut__hole {
  position: relative;
  z-index: 1;
  width: 4.5rem;
  height: 4.5rem;
  border-radius: 50%;
  background: var(--bg-panel);
  display: grid;
  place-content: center;
  text-align: center;
  box-shadow: 0 0 0 1px rgba(191, 142, 85, 0.12);
}
.admin-donut__hole strong {
  font-family: var(--font-display);
  font-size: var(--step-1);
  color: var(--text);
  line-height: 1;
}
.admin-donut__hole em {
  font-style: normal;
  font-size: 0.5625rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.admin-legend { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s-3); }
.admin-legend li {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  font-size: var(--step--1);
  color: var(--text-body);
}
.admin-legend__swatch {
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: var(--lot-active);
  flex-shrink: 0;
}
.admin-legend__swatch--muted { background: var(--lot-transit); }
.admin-legend__swatch--ok { background: var(--lot-delivered); }
.admin-legend__swatch--line { background: var(--line-strong); }
/* Pending is dark bronze from her mock, not muted grey. Five distinct hues. */
.admin-legend__swatch--pending { background: var(--lot-pending); }
.admin-legend__swatch--expired { background: var(--lot-expired); }

/* Name left, count and percentage right, so the numbers form a column the eye
   can run down instead of sitting at ragged positions after each label. */
.admin-legend__name  { flex: 1 1 auto; }
.admin-legend__count { color: var(--text); font-variant-numeric: tabular-nums; }
.admin-legend__pct   { color: var(--text-muted); font-variant-numeric: tabular-nums; min-width: 3.2rem; text-align: right; }

.admin-spark {
  width: 100%;
  height: auto;
  max-height: 5.5rem;
  margin-bottom: var(--s-5);
  overflow: visible;
}
.admin-mini-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-4);
  border-top: 1px solid var(--line);
  padding-top: var(--s-5);
  margin-top: var(--s-5);
}
.admin-sales__kpi-chip {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.3rem;
  margin-top: 0.35rem;
  padding: 0;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.25;
  background: transparent;
  border-radius: 0;
}
.admin-sales__pct {
  color: #3ddc84;
  font-weight: 700;
}
.admin-sales__kpi-chip--down .admin-sales__pct {
  color: #ff6f61;
}
.admin-sales__period {
  color: #fff;
  font-weight: 500;
}
.admin-sales__kpi-chip--none .admin-sales__period {
  color: rgba(255, 255, 255, 0.72);
}
.admin-mini-stats__value {
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 1.4vw, 1.3rem);
  color: #fff;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  margin-top: var(--s-2);
}
.admin-mini-stats__label {
  font-size: 0.5625rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold);
}

.admin-activity { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s-4); }
.admin-activity li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--s-3);
  font-size: var(--step--1);
  color: var(--text-body);
}
.admin-activity__dot {
  width: 0.45rem;
  height: 0.45rem;
  margin-top: 0.4rem;
  border-radius: 50%;
  background: var(--gold);
}
.admin-activity time {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.625rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.admin-bar {
  display: grid;
  grid-template-columns: 1fr 1.2fr auto;
  gap: var(--s-5);
  align-items: center;
  border: 1px solid rgba(191, 142, 85, 0.18);
  background: var(--bg-panel);
  padding: var(--s-5) var(--s-6);
  margin-top: var(--s-7);
}
.admin-bar__ok {
  color: var(--ok);
  font-size: var(--step--1);
  display: flex;
  align-items: center;
  gap: var(--s-2);
}
.admin-bar__meter {
  height: 0.35rem;
  background: var(--line);
  overflow: hidden;
}
.admin-bar__meter > span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--gold-lo), var(--gold-hi));
}
.admin-bar__meta {
  font-size: var(--step--1);
  color: var(--text-muted);
}

/* Admin login — same dark ground, no fake SaaS chrome */
.auth-card--admin {
  border-color: rgba(191, 142, 85, 0.28);
  background: var(--bg-panel);
}
.auth-card--admin .auth-card__brand {
  font-family: var(--font-display);
  letter-spacing: 0.18em;
  color: var(--gold);
  font-size: var(--step-0);
  margin-bottom: var(--s-4);
}

/* --- Commerce dashboard and list screens ------------------------------- */

/* KPI cards became links to the screen behind the number. */
a.admin-kpi { display: block; text-decoration: none; color: inherit; }
a.admin-kpi:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* Two-thirds / one-third split, for a chart beside its summary. */
.admin-grid--2-1 { grid-template-columns: 2fr 1fr; }
.admin-grid--1-2 { grid-template-columns: 1fr 2fr; }
.admin-grid--eq  { grid-template-columns: 1fr 1fr; }

/* Compact shipment rows under the map. */
.admin-ship-mini { list-style: none; margin: 0.65rem 0 0; padding: 0; display: grid; gap: 0.35rem; }
.admin-ship-mini a {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0.65rem;
  padding: 0.4rem 0.15rem;
  color: inherit;
  text-decoration: none;
  border-top: 1px solid var(--line);
  font-size: var(--step--1);
}
.admin-ship-mini li:first-child a { border-top: 0; }
.admin-ship-mini a:hover { color: var(--text); }
.admin-ship-mini__route {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-muted);
}

/* Ahmad chip guide: green % only; white period; no full-chip green wash. */
.admin-kpi__chip {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.3rem;
  margin-top: auto;
  padding: 0;
  min-height: 1.15rem;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.25;
  background: transparent;
  box-shadow: none;
  border-radius: 0;
}
.admin-kpi__pct {
  color: #3ddc84;
  font-weight: 700;
}
.admin-kpi__chip--down .admin-kpi__pct {
  color: #ff6f61;
}
.admin-kpi__period {
  color: #fff;
  font-weight: 500;
}
.admin-kpi__chip--none {
  background: transparent;
  color: #fff;
  font-weight: 500;
}
.admin-kpi__chip--none .admin-kpi__period {
  color: rgba(255, 255, 255, 0.72);
}

.admin-sales__target { margin-top: 0.75rem; }
.admin-sales__target .admin-card__meta { margin-bottom: 0.4rem; }
.admin-card--flush { margin-bottom: 0.85rem; }

.admin-bar__col { min-width: 0; }
.admin-bar__col--end { text-align: right; }
.admin-bar__col--end .btn { margin-top: 0.45rem; }
.health--inline { margin-top: 0.4rem; gap: 0.3rem; }
.health--inline .health__note { font-size: 0.6875rem; line-height: 1.35; }

.table--compact { min-width: 28rem; }
.table--compact th, .table--compact td { padding: 0.42rem 0.65rem; }

/* ---------------------------------------------------------------------------
 * Admin dashboard dark-gold mock layout (ASSET_VERSION 2.53.93)
 * Brand remains Nile Gourmet Spices. Layout mirrors the dark gold mock:
 *   1. Header (Export Report outline + Add New Lot solid)
 *   2. Five KPIs — Total Lots | Active Orders | In Transit | Delivered | Revenue
 *   3. Shipment Overview (2fr) | Quality Snapshot (1fr)
 *   4. Lot Status (1fr) | Recent Activity (2fr)
 *   5. Sales Performance (2fr) | Top Products table (1fr)
 *   6. Recent Orders — full
 *   7. System bar — Status | Storage | Pending Approvals
 *   8. Secondary compact (Enquiry Trend, Order Status, Lots, Shipments)
 *   9. Needs Your Attention — full width, bottom (Ethel)
 * Map land/routes thickened for charcoal contrast. Cards ~8px radius.
 * --------------------------------------------------------------------------- */
.shell--admin .shell__main { padding: 1.1rem 1.25rem 1.5rem; }
.shell--admin .admin-dash__head { margin-bottom: 1.05rem; gap: 0.75rem; align-items: center; }
.shell--admin .admin-dash__title { font-size: 1.35rem; }
.shell--admin .admin-dash__sub { margin-top: 0.25rem; }
.shell--admin .admin-dash__actions { gap: 0.5rem; }
.shell--admin .admin-dash__actions .btn { padding: 0.45rem 0.8rem; font-size: 0.75rem; }
.shell--admin .admin-kpis {
  gap: 0.65rem;
  margin-bottom: 0.75rem;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  align-items: stretch;
}
.shell--admin .admin-kpis--5 {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}
.shell--admin .admin-kpi {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 0.85rem 0.95rem;
  min-height: 7.6rem;
  height: 100%;
  box-sizing: border-box;
  border-radius: 8px;
}
.shell--admin a.admin-kpi { display: flex; }
.shell--admin .admin-kpi__top { margin-bottom: 0.45rem; gap: 0.5rem; }
.shell--admin .admin-kpi__value { font-size: 1.55rem; color: #fff; }
.shell--admin .admin-kpi__label {
  margin: 0;
  color: var(--gold);
  font-size: 0.625rem;
}
.shell--admin .admin-kpi__chip { margin-top: auto; }
.shell--admin .admin-kpi__pct { color: #3ddc84; }
.shell--admin .admin-kpi__chip--down .admin-kpi__pct { color: #ff6f61; }
.shell--admin .admin-kpi__period { color: #fff; }
.shell--admin .admin-mini-stats__label { color: var(--gold); }
.shell--admin .admin-mini-stats__value { color: #fff; }
.shell--admin .admin-sales__pct { color: #3ddc84; }
.shell--admin .admin-sales__kpi-chip--down .admin-sales__pct { color: #ff6f61; }
.shell--admin .admin-sales__period { color: #fff; }

/* Top Products — column table (PRODUCT | TOTAL LOTS | TOTAL SALES | GROWTH) */
.shell--admin .table--top-products {
  width: 100%;
  min-width: 0;
  border-collapse: collapse;
}
.shell--admin .table--top-products th {
  color: var(--gold);
  font-size: 0.5625rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.35rem 0.45rem;
  border-bottom: 1px solid rgba(191, 142, 85, 0.22);
  background: transparent;
  white-space: nowrap;
}
.shell--admin .table--top-products td {
  color: rgba(255, 255, 255, 0.88);
  font-size: 0.8125rem;
  padding: 0.55rem 0.45rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  vertical-align: middle;
}
.shell--admin .table--top-products tr:last-child td {
  border-bottom: 0;
}
.shell--admin .table--top-products__name {
  color: rgba(255, 255, 255, 0.92);
  font-weight: 500;
  max-width: 11rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.shell--admin .table--top-products__lots,
.shell--admin .table--top-products__sales {
  color: rgba(255, 255, 255, 0.88);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.shell--admin .table--top-products__growth .admin-delta--up {
  color: #3ddc84;
  font-weight: 700;
}
.shell--admin .table--top-products__growth .admin-delta--down {
  color: #ff6f61;
  font-weight: 700;
}
.shell--admin .table--top-products__growth .admin-delta--none {
  color: rgba(255, 255, 255, 0.55);
}
.shell--admin .admin-card--top-products {
  display: flex;
  flex-direction: column;
}
.shell--admin .admin-card--top-products .table-wrap {
  flex: 1 1 auto;
  margin: 0;
  overflow-x: auto;
}
.shell--admin .admin-card__more--footer {
  margin-top: 0.75rem;
  color: var(--gold);
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.shell--admin .admin-grid {
  gap: 0.6rem;
  margin-bottom: 0.6rem;
  /* Stretch paired cards to equal row height — voids stay inside panels, not page chrome. */
  align-items: stretch;
}
.shell--admin .admin-grid--eq {
  grid-template-columns: 1fr 1fr;
}
.shell--admin .admin-grid--map-quality {
  grid-template-columns: 2fr 1fr;
}
.shell--admin .admin-grid--1-2,
.shell--admin .admin-grid--lot-activity {
  grid-template-columns: 1fr 2fr;
}
.shell--admin .admin-grid--sales-products {
  grid-template-columns: 2fr 1fr;
}
.shell--admin .admin-grid--secondary {
  grid-template-columns: 1fr 1fr;
}
.shell--admin .btn--gold-outline,
.shell--admin .admin-dash__actions .btn--ghost {
  border-color: rgba(191, 142, 85, 0.72);
  color: var(--gold);
  background: transparent;
}
.shell--admin .btn--gold-outline:hover,
.shell--admin .admin-dash__actions .btn--ghost:hover {
  border-color: var(--gold-hi);
  color: var(--gold-hi);
  background: rgba(191, 142, 85, 0.08);
}
.shell--admin .admin-grid--eq > .admin-card,
.shell--admin .admin-grid--2-1 > .admin-card,
.shell--admin .admin-grid--1-2 > .admin-card,
.shell--admin .admin-grid--map-quality > .admin-card,
.shell--admin .admin-grid--lot-activity > .admin-card,
.shell--admin .admin-grid--sales-products > .admin-card,
.shell--admin .admin-grid--secondary > .admin-card,
.shell--admin .admin-grid--products-enquiry > .admin-card,
.shell--admin .admin-grid--ship-sys > .admin-card {
  display: flex;
  flex-direction: column;
  min-height: 0;
  height: 100%;
}
.shell--admin .admin-card--attention {
  margin-bottom: 0.6rem;
}
.shell--admin .admin-card--attention .admin-todo {
  flex: 1 1 auto;
}
.shell--admin .admin-stack {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  min-height: 0;
  height: 100%;
}
.shell--admin .admin-stack > .admin-card {
  display: flex;
  flex-direction: column;
  flex: 1 1 0;
  min-height: 0;
}
.shell--admin .admin-card {
  padding: 0.85rem 1rem;
  border-radius: 8px;
}
.shell--admin .admin-bar {
  border-radius: 8px;
}
.shell--admin .admin-card--flush {
  border-radius: 8px;
}
.shell--admin .admin-card__head { margin-bottom: 0.45rem; flex-shrink: 0; }
.shell--admin .admin-card__title { margin-bottom: 0.45rem; }
.shell--admin .admin-card__note { margin-top: auto; padding-top: 0.45rem; font-size: 0.75rem; }
.shell--admin .admin-card__more { margin-top: auto; }

/* Lot Status: VIEW ALL LOTS as outlined gold control under the donut,
   matching Ethel's mock (not a header link). */
.shell--admin .admin-card--lot-status {
  display: flex;
  flex-direction: column;
}
.shell--admin .admin-card--lot-status .admin-donut-row {
  flex: 1 1 auto;
}
.shell--admin .admin-lot-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: flex-start;
  margin-top: var(--s-4);
  padding: 0.45rem 0.95rem;
  border: 1px solid var(--gold);
  border-radius: 2px;
  color: var(--gold);
  font-family: var(--font-ui);
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  background: transparent;
  transition: color 0.15s var(--ease), border-color 0.15s var(--ease), background 0.15s var(--ease);
}
.shell--admin .admin-lot-cta:hover,
.shell--admin .admin-lot-cta:focus-visible {
  color: var(--gold-hi);
  border-color: var(--gold-hi);
  background: var(--gold-wash);
}
.shell--admin .admin-donut { width: 5.15rem; height: 5.15rem; }
.shell--admin .admin-donut__hole { width: 2.85rem; height: 2.85rem; }
.shell--admin .admin-donut__hole strong { font-size: 0.95rem; }
.shell--admin .admin-donut__hole em { font-size: 0.5rem; letter-spacing: 0.08em; }
.shell--admin .admin-donut-row {
  gap: 0.7rem;
  align-items: center;
  flex: 1 1 auto;
  justify-content: center;
}
.shell--admin .admin-legend { gap: 0.22rem; }
.shell--admin .admin-legend__count,
.shell--admin .admin-legend__pct { font-size: 0.7rem; }
.shell--admin .admin-legend__name { font-size: 0.7rem; }
.shell--admin .admin-gauge { --dial: 3.3rem; row-gap: 0.28rem; padding: 0.1rem 0; }
.shell--admin .admin-gauges {
  gap: 0.4rem;
  flex: 1 1 auto;
  align-content: center;
}
.shell--admin .admin-gauge__val { font-size: 0.7rem; }
.shell--admin .wmap { max-width: none; flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center; }
.shell--admin .wmap svg { max-height: 12.5rem; width: 100%; }
.shell--admin .wmap__land circle { opacity: 0.58; }
.shell--admin .wmap__arc { stroke-width: 3.2; opacity: 1; }
.shell--admin .wmap__arc--live { stroke-width: 3.55; }
.shell--admin .wmap__empty { margin-top: 0.5rem; }
.shell--admin .admin-ship-mini { margin-top: 0.45rem; }
.shell--admin .admin-area { margin-top: 0.5rem; }
.shell--admin .admin-area svg { height: clamp(6.5rem, 11vw, 7.5rem); }
.shell--admin .admin-area--sales svg { height: clamp(6.75rem, 11vw, 7.75rem); }
.shell--admin .admin-area--sales .admin-area__y { padding-bottom: 1rem; font-size: 0.5rem; }
.shell--admin .admin-area__foot { margin-top: 0.35rem; font-size: 0.65rem; }
.shell--admin .admin-mini-stats { gap: 0.5rem; padding-top: 0.55rem; margin-top: 0.55rem; }
.shell--admin .admin-mini-stats__value {
  font-size: 1rem;
  margin-top: 0.15rem;
  line-height: 1.1;
}
.shell--admin .admin-mini-stats__label { font-size: 0.625rem; }
.shell--admin .admin-sales__head { margin-bottom: 0.35rem; }
.shell--admin .admin-sales__note { margin-bottom: 0.4rem; font-size: 0.7rem; }
/* Sales + Products / Lot + Activity: stretch pairs; activity scroll-capped. */
.shell--admin .admin-grid--sales-products > .admin-card--sales,
.shell--admin .admin-grid--sales-activity > .admin-card--sales {
  align-self: stretch;
}
.shell--admin .admin-grid--sales-products .admin-area--sales,
.shell--admin .admin-grid--sales-activity .admin-area--sales {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.shell--admin .admin-grid--sales-products .admin-area--sales svg,
.shell--admin .admin-grid--sales-activity .admin-area--sales svg {
  height: clamp(6.25rem, 10vw, 8rem);
}
.shell--admin .admin-grid--sales-products .admin-mini-stats,
.shell--admin .admin-grid--sales-activity .admin-mini-stats {
  gap: 0.4rem;
  padding-top: 0.45rem;
  margin-top: 0.45rem;
}
.shell--admin .admin-grid--lot-activity .admin-activity,
.shell--admin .admin-grid--sales-activity .admin-activity {
  flex: 1 1 auto;
  min-height: 0;
  max-height: 16rem;
  overflow-y: auto;
  overscroll-behavior: contain;
  gap: 0.28rem;
  padding-right: 0.15rem;
}
.shell--admin .admin-activity { gap: 0.28rem; }
.shell--admin .admin-activity li { padding: 0.15rem 0; gap: 0.45rem; }
.shell--admin .admin-activity time { font-size: 0.6rem; }
.shell--admin .admin-todo {
  flex: 1 1 auto;
  align-content: start;
}
.shell--admin .admin-todo a { padding: 0.5rem 0.65rem; gap: 0.55rem; }
.shell--admin .admin-rank {
  gap: 0.55rem;
  margin-top: 0.4rem;
  flex: 1 1 auto;
  justify-content: space-between;
}
.shell--admin .admin-spark {
  flex: 1 1 auto;
  width: 100%;
  align-self: stretch;
}
.shell--admin .admin-bar {
  padding: 0.65rem 1rem;
  margin-top: 0.6rem;
  gap: 1rem;
  grid-template-columns: 1.2fr 1fr auto;
  align-items: center;
  min-height: 0;
}
.shell--admin .admin-head { margin-bottom: 1rem; }
.shell--admin .chips { margin-bottom: 0.85rem; }
.shell--admin .stat-row { gap: 0.7rem; margin-bottom: 1rem; }
.shell--admin .stat-tile { padding: 0.8rem 0.9rem; }
.shell--admin .stat-tile__icon { margin-bottom: 0.4rem; }
.shell--admin .stat-tile__value { font-size: 1.4rem; }
.shell--admin .table th, .shell--admin .table td { padding: 0.45rem 0.7rem; }
.shell--admin .health { margin-top: 0.45rem; gap: 0.35rem; }
.shell--admin .admin-spark { max-height: 4.25rem; margin-bottom: 0.65rem; }

@media (hover: none) {
  .shell--admin .admin-kpi:hover { transform: none; }
}

@media (max-width: 1100px) {
  .shell--admin .admin-kpis,
  .shell--admin .admin-kpis--5 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .shell--admin .admin-grid--map-quality,
  .shell--admin .admin-grid--lot-activity,
  .shell--admin .admin-grid--sales-products,
  .shell--admin .admin-grid--1-2 {
    grid-template-columns: 1fr;
  }
  .shell--admin .admin-area--sales svg { height: 7.25rem; }
  .shell--admin .admin-area svg { height: 6.75rem; }
  .shell--admin .wmap svg { max-height: 10.5rem; }
  .shell--admin .admin-bar { grid-template-columns: 1fr; }
  .shell--admin .admin-bar__col--end { text-align: left; }
}

@media (max-width: 720px) {
  .shell--admin .shell__main { padding: 0.85rem 0.9rem 1.35rem; }
  .shell--admin .admin-dash__head {
    flex-direction: column;
    align-items: stretch;
    margin-bottom: 0.85rem;
  }
  .shell--admin .admin-dash__title { font-size: 1.25rem; }
  .shell--admin .admin-dash__actions .btn {
    min-height: 2.75rem;
    padding: 0.55rem 0.9rem;
  }
  .shell--admin .admin-kpis,
  .shell--admin .admin-kpis--5 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem;
    margin-bottom: 0.75rem;
  }
  .shell--admin .admin-kpi { padding: 0.7rem 0.75rem; }
  .shell--admin .admin-kpi__value { font-size: 1.25rem; }
  .shell--admin .admin-card { padding: 0.85rem 0.9rem; }
  .shell--admin .admin-donut { width: 4.75rem; height: 4.75rem; }
  .shell--admin .admin-donut__hole { width: 2.65rem; height: 2.65rem; }
  .shell--admin .admin-donut__hole strong { font-size: 0.9rem; }
  .shell--admin .admin-donut-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
  }
  .shell--admin .admin-gauges { grid-template-columns: 1fr 1fr; }
  .shell--admin .admin-gauge { --dial: 3.1rem; }
  .shell--admin .wmap svg { max-height: 9.25rem; }
  .shell--admin .admin-area svg { height: 6.25rem; }
  .shell--admin .admin-area--sales svg { height: 6.5rem; }
  .shell--admin .admin-area--sales .admin-area__plot { grid-template-columns: 1fr; }
  .shell--admin .admin-area--sales .admin-area__y { display: none; }
  .shell--admin .admin-mini-stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.45rem;
  }
  .shell--admin .admin-mini-stats__value { font-size: 1.05rem; }
  .shell--admin .admin-todo a {
    min-height: 2.75rem;
    padding: 0.55rem 0.7rem;
  }
  .shell--admin .admin-ship-mini a {
    min-height: 2.75rem;
    grid-template-columns: 1fr auto;
    gap: 0.35rem 0.65rem;
  }
  .shell--admin .admin-ship-mini__route {
    grid-column: 1 / -1;
    white-space: normal;
  }
  .shell--admin .admin-rank { gap: 0.7rem; }
  .shell--admin .admin-stack {
    gap: 0.55rem;
  }
}

@media (max-width: 480px) {
  .shell--admin .admin-mini-stats { grid-template-columns: 1fr; }
  .shell--admin .admin-kpi__value { font-size: 1.2rem; }
}

/* Monthly revenue bars. Heights are percentages of the tallest month, so an
   empty month is a visible gap rather than a missing column. */
.admin-bars {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: var(--s-2);
  align-items: end;
  height: 168px;
  margin-top: var(--s-5);
  padding-bottom: var(--s-5);
  position: relative;
}
.admin-bars__col {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  height: 100%;
  min-width: 0;
}
.admin-bars__bar {
  width: 100%;
  max-width: 34px;
  background: linear-gradient(180deg, var(--gold) 0%, var(--gold-lo) 100%);
  min-height: 2px;
  transition: filter 0.3s var(--ease);
}
.admin-bars__col:hover .admin-bars__bar { filter: brightness(1.25); }
.admin-bars__lab {
  position: absolute;
  bottom: 0;
  font-size: 0.5625rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* Worklist: each row is a record with somewhere to go. */
.admin-todo { list-style: none; padding: 0; margin: var(--s-4) 0 0; display: grid; gap: var(--s-2); }
.admin-todo a {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--s-4);
  padding: var(--s-4);
  border: 1px solid var(--line);
  color: var(--text-muted);
  text-decoration: none;
  transition: border-color 0.3s var(--ease), background 0.3s var(--ease);
}
.admin-todo a:hover,
.admin-todo a:focus-visible { border-color: rgba(191, 142, 85, 0.4); background: rgba(191, 142, 85, 0.05); }
.admin-todo__icon { color: var(--gold); display: flex; }
.admin-todo__body { min-width: 0; }
.admin-todo__body strong {
  display: block;
  color: var(--text);
  font-weight: 500;
  font-size: var(--step--1);
}
.admin-todo__body span { display: block; font-size: 0.75rem; margin-top: 2px; }

/* Ranked list with a proportional meter, for top products. */
.admin-rank { list-style: none; padding: 0; margin: var(--s-4) 0 0; display: grid; gap: var(--s-5); }
.admin-rank__row {
  display: flex;
  justify-content: space-between;
  gap: var(--s-4);
  font-size: var(--step--1);
  color: var(--text);
  margin-bottom: var(--s-2);
}
.admin-rank__meter { height: 4px; background: var(--line); overflow: hidden; }
.admin-rank__meter > span { display: block; height: 100%; background: var(--gold); }
.admin-rank__meta { font-size: 0.75rem; color: var(--text-muted); margin-top: 0; }
.admin-rank__foot {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.5rem;
  margin-top: var(--s-2);
}
.admin-rank__foot .admin-delta {
  flex-shrink: 0;
  font-size: 0.6875rem;
  font-weight: 700;
}

/* Page heading with an action on the right. */
.admin-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--s-5);
  flex-wrap: wrap;
  margin-bottom: var(--s-6);
}

/* Status filter chips above a list table. */
.chips { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-bottom: var(--s-6); }
.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: 0.4rem 0.85rem;
  border: 1px solid var(--line);
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  text-decoration: none;
  transition: border-color 0.3s var(--ease), color 0.3s var(--ease);
}
.chip:hover { border-color: var(--gold-lo); color: var(--text); }
.chip--on { border-color: var(--gold); color: var(--gold); }
.chip__n { font-variant-numeric: tabular-nums; opacity: 0.75; }

/* Invoices and shipments attached to an order. */
.linked-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-6); }
.linked-list { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s-3); }
.linked-list li {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  flex-wrap: wrap;
  font-size: var(--step--1);
}

@media (max-width: 1100px) {
  .admin-grid { grid-template-columns: 1fr; }
  .admin-grid--2-1 { grid-template-columns: 1fr; }
  .admin-grid--eq { grid-template-columns: 1fr; }
  .admin-bar { grid-template-columns: 1fr; }
  .admin-bar__col--end { text-align: left; }
  .admin-gauges { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px) {
  .admin-mini-stats { grid-template-columns: 1fr; }
  .linked-grid { grid-template-columns: 1fr; }
  .admin-head { flex-direction: column; align-items: stretch; }
  /* Twelve bars will not fit on a phone; show the last six months. */
  .admin-bars { height: 132px; }
  .admin-bars__col:nth-child(-n+6) { display: none; }
}

.shell__user {
  margin-top: var(--s-5);
  padding-top: var(--s-5);
  border-top: 1px solid var(--line);
  font-size: var(--step--1);
  color: var(--text-muted);
}
.shell__user strong { display: block; color: var(--text); font-weight: 500; }
.shell__user > span { display: block; }

.stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr)); gap: var(--s-4); margin-bottom: var(--s-7); }
.stat-tile { border: 1px solid var(--line); background: var(--bg-panel); padding: var(--s-5); }
.stat-tile__icon { color: var(--gold); margin-bottom: var(--s-4); }
.stat-tile__value { font-family: var(--font-display); font-size: var(--step-3); color: var(--text); line-height: 1; font-variant-numeric: tabular-nums; }
.stat-tile__label { font-size: 0.625rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted); margin-top: var(--s-3); }

.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  /* A grid or flex item's automatic minimum size is min-content, so this box
     refused to shrink under the 640px table inside it and stretched its parent
     instead of scrolling. On the admin dashboard that blew a card out to 707px
     against a 390px screen and clipped it. min-width:0 lets it scroll. */
  min-width: 0;
  /* overflow-x:auto alone lets the wide table extend the viewport's scrollable
     area, so the whole page scrolled sideways on mobile even though the table
     scrolled correctly inside its own box. `contain: paint` stops the overflow
     escaping. Verified: page scrollX 314px -> 0 at a 390px viewport. */
  contain: paint;
}
.table { width: 100%; border-collapse: collapse; min-width: 40rem; }
.table th, .table td { text-align: left; padding: var(--s-4) var(--s-5); font-size: var(--step--1); border-bottom: 1px solid var(--line); }
.table th {
  font-size: 0.625rem; font-weight: 600; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--gold); background: var(--bg-nav);
  white-space: nowrap;
}
.table td { color: var(--text-body); }
.table tbody tr:hover { background: var(--bg-panel); }
.table tbody tr:last-child td { border-bottom: 0; }
.table .mono { font-family: ui-monospace, "SFMono-Regular", Consolas, monospace; letter-spacing: 0.02em; color: var(--text); }

.pill {
  display: inline-block;
  padding: 0.2rem 0.6rem;
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border: 1px solid var(--line-strong);
  color: var(--text-muted);
}
.pill--ok { color: var(--ok); border-color: var(--ok); }
.pill--live { color: var(--gold); border-color: var(--gold-lo); }
.pill--warn { color: var(--gold-hover); border-color: var(--gold-lo); }
.pill--bad { color: var(--text-muted); border-color: var(--line-strong); }
/* Recent Orders sample tones: Processing light blue, In Transit blue */
.pill--process {
  color: #7ec8e3;
  border-color: rgba(126, 200, 227, 0.55);
  background: rgba(126, 200, 227, 0.08);
}
.pill--transit {
  color: var(--lot-transit);
  border-color: rgba(129, 117, 77, 0.55);
  background: rgba(129, 117, 77, 0.10);
}

.shell--admin .table--orders-dash {
  min-width: 56rem;
}
.shell--admin .table--orders-dash th {
  font-size: 0.625rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold);
  white-space: nowrap;
  padding: 0.5rem 0.7rem;
}
.shell--admin .table--orders-dash td {
  padding: 0.55rem 0.7rem;
  vertical-align: middle;
  font-size: 0.8125rem;
  line-height: 1.35;
}
.shell--admin .table--orders-dash__qty,
.shell--admin .table--orders-dash__val {
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
}
.shell--admin .table--orders-dash .pill {
  padding: 0.2rem 0.55rem;
  letter-spacing: 0.08em;
  white-space: nowrap;
}

.portal-stack { display: grid; gap: var(--s-5); }
.portal-card {
  border: 1px solid var(--line);
  background: var(--bg-panel);
  padding: var(--s-6);
}
.portal-card__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--s-4);
  flex-wrap: wrap;
}

.journey--compact {
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: var(--s-3);
  padding: var(--s-5);
  border: 1px solid var(--line);
  background: var(--bg-panel);
}
.journey--compact .journey__title { font-size: 0.75rem; }
.journey--compact .journey__body { font-size: 0.6875rem; line-height: 1.35; }
.journey--compact .journey__disc { width: 2.4rem; height: 2.4rem; }

.cert-chips {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  margin: var(--s-5) 0 0;
  padding: 0;
}
.cert-chips__item {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  padding: 0.55rem 0.85rem;
  border: 1px solid var(--line);
  background: var(--bg-panel);
  font-size: var(--step--1);
  color: var(--text-body);
}
.cert-chips__item svg { color: var(--gold); flex-shrink: 0; }

.auth-card {
  max-width: 26rem;
  margin: 0 auto;
  padding: var(--s-7);
  border: 1px solid var(--line);
  background: var(--bg-panel);
}
.auth-card h1 { font-size: var(--step-2); margin-bottom: var(--s-5); }

/* ==========================================================================
   19  Portal and trace responsive
   ========================================================================== */

@media (max-width: 1080px) {
  .trace-grid { grid-template-columns: 1fr; }
  .quality-grid { grid-template-columns: repeat(2, 1fr); }
  .stat-row { grid-template-columns: repeat(2, 1fr); }
  .journey--compact { grid-template-columns: repeat(4, 1fr); }
}

@media (max-width: 900px) {
  .shell { grid-template-columns: 1fr; }
  .shell__side { border-right: 0; border-bottom: 1px solid var(--line); }
  .side-nav { display: flex; flex-wrap: wrap; gap: var(--s-2); }
  .side-nav a { border-left: 0; border-bottom: 2px solid transparent; padding: 0.6rem var(--s-3); }
  .side-nav a[aria-current="page"] { border-left: 0; border-bottom-color: var(--gold); }
  .shell__help {
    margin-top: var(--s-6);
    margin-inline: 0;
    margin-bottom: var(--s-4);
    max-width: 20rem;
    width: 100%;
  }
  .shell--portal .shell__help {
    max-width: none;
    padding: var(--s-5) var(--s-6);
  }
  .shell__help-body { max-width: none; }
  .shell__user { margin-top: var(--s-5); }
  .progress { grid-auto-flow: row; gap: var(--s-4); }
  .progress__step::before { width: 1px; height: 100%; top: 0; }
  .progress__step { padding-top: 0; padding-left: var(--s-5); }
  .progress__step::after { top: 0; left: -3.5px; }
  .journey--compact { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
  .form__grid { grid-template-columns: 1fr; }
  .quality-grid, .stat-row { grid-template-columns: 1fr; }
}

/* --- 20  Block-level spans ---------------------------------------------- */

/* These labels/values live inside <a> and <span> wrappers, where a <p> would
   be awkward, so they are spans in the markup and made block-level here.
   Without this each pair renders on one line: "MOISTURE 28%". */
.quality-cell__label,
.quality-cell__value,
.doc__title,
.doc__meta,
.verified__title,
.verified__body,
.trilink__title,
.trilink__body,
.feature__title,
.shell__user strong { display: block; }

.verified > span:last-child { flex: 1; }

/* --- 21  Client texture and background assets --------------------------- */

/* Trusted-by band is flat cream. */
.trustband {
  background-color: var(--cream);
}
.trustband__inner > * { position: relative; }

/* Paper texture is NOT applied to the cream bands.
   The client supplied it as a 202px crop off a contact sheet. It is not
   seamless, so tiling it drew hard vertical seams; mirroring it into a 2x2
   block replaced those with bright bands, because the crop's edges are
   lighter than its centre. Both looked worse than flat cream, which is what
   the mockup shows anyway. tools/sources/texture-paper.png is kept, and this
   can be revisited if she sends a large or genuinely seamless original.
   See ASSETS.md. */

/* --- 22  Wordmark region line ------------------------------------------- */

.mark__region {
  display: block;
  margin-top: 0.28rem;
  /* Was 0.4375rem (7px) in --gold-lo, which measured 3.96:1 on the header —
     under AA, and the client read it as too faint to make out. --gold-lo is
     documented above as hairlines and icon strokes only, never text.
     --gold-dim is the recessive gold that still clears 4.5:1 (5.31:1 here),
     and it matches the GOURMET SPICES line directly above. */
  font-size: 0.5625rem;
  font-weight: 600;
  letter-spacing: 0.26em;
  color: var(--gold-dim);
  /* The mark block is only as wide as "NILE" (80px). GOURMET SPICES wrapping
     to two lines is the intended lockup, but this line breaking after the
     separator left a dangling "·" on its own. It keeps one line and sets the
     block's width instead — about 8px wider, which the header absorbs. */
  white-space: nowrap;
}
.section--light .mark__region { color: var(--gold-ink); }

/* --- 23  Uganda map ------------------------------------------------------ */

.ug-map { width: 100%; height: auto; overflow: visible; }

/* Thin gold outline on dark ground — near-transparent dark fill, not green. */
.ug-map__land   { fill: rgba(0, 0, 0, 0.28); }
.ug-map__border { stroke: var(--gold-dim); stroke-width: 1.45; stroke-linejoin: round; }

/* Leader lines running out to the region captions beside the map. */
.ug-map__leader {
  stroke: var(--gold-dim);
  stroke-width: 1.2;
  opacity: 0.8;
  fill: none;
  stroke-linejoin: round;
  stroke-linecap: round;
}
/* Below this the grid stops putting the captions beside the map, so a line
   pointing at them would point at nothing. */
@media (max-width: 1080px) {
  .ug-map__leader { display: none; }
}

.ug-map__country {
  font-family: var(--font-ui);
  font-size: 30px;
  font-weight: 600;
  letter-spacing: 0.28em;
  fill: var(--leaf-line);
  text-anchor: middle;
}

.ug-map__dot    { fill: #FFFFFF; }
.ug-map__halo   { fill: none; stroke: var(--gold); stroke-width: 2; opacity: 0.45; }
.ug-map__origin { fill: var(--gold); }

.ug-map__label {
  font-family: var(--font-ui);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: 0.08em;
  fill: var(--gold-hi);
}

/* Shrink the wordmark and pin labels on narrow maps so they stay inside the outline. */
@media (max-width: 720px) {
  .ug-map__country { font-size: 24px; letter-spacing: 0.2em; }
  .ug-map__label { font-size: 16px; letter-spacing: 0.06em; }
}

/* The halo breathes so the eye lands on the growing regions first. Motion is
   tiny and stops entirely for anyone who asked for less of it. */
@media (prefers-reduced-motion: no-preference) {
  .ug-map__halo { transform-box: fill-box; transform-origin: center; animation: ug-pulse 3.6s var(--ease-out-soft) infinite; }
  .ug-map__pin:nth-of-type(2) .ug-map__halo { animation-delay: 1.2s; }
}
@keyframes ug-pulse {
  0%, 70%, 100% { transform: scale(1);   opacity: 0.45; }
  35%           { transform: scale(1.5); opacity: 0; }
}

.section--light .ug-map__land    { fill: rgba(22, 23, 26, 0.08); }
.section--light .ug-map__border  { stroke: var(--gold-ink); }
.section--light .ug-map__label   { fill: var(--gold-ink); }
.section--light .ug-map__country { fill: var(--leaf-ink); }

/* --- 24  QR panel -------------------------------------------------------- */

.qr-panel {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--s-6);
  align-items: center;
  padding: var(--s-6);
  border: 1px solid var(--line);
  background: var(--bg-panel);
}
.qr-panel__code {
  background: #FFFFFF;
  padding: var(--s-3);
  border-radius: 2px;
  line-height: 0;
}
.qr-panel__code img { width: clamp(8rem, 16vw, 12rem); height: auto; }

.qr-panel__url {
  margin-top: var(--s-4);
  font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
  font-size: 0.78rem;
  color: var(--gold-dim);
  word-break: break-all;
}

@media (max-width: 640px) {
  .qr-panel { grid-template-columns: 1fr; justify-items: start; }
}

/* ==========================================================================
   25  Traceability page
   ========================================================================== */

/* --- hero --------------------------------------------------------------- */

.trace-hero {
  position: relative;
  display: grid;
  isolation: isolate;
  min-height: clamp(26rem, 62vh, 38rem);
  align-items: center;
  background: var(--bg-nav);
  overflow: hidden;
}

.trace-hero__media { position: absolute; inset: 0; z-index: -1; }
.trace-hero__media img,
.trace-hero__media picture,
.trace-hero__media .ph { width: 100%; height: 100%; object-fit: cover; }

/* Scrim weighted to the left, so the copy stays readable while the tag on the
   right side of the photograph is left visible. */
.trace-hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg,
      rgba(8, 8, 10, 0.95) 0%,
      rgba(8, 8, 10, 0.82) 34%,
      rgba(8, 8, 10, 0.22) 62%,
      rgba(8, 8, 10, 0.40) 100%);
}

.trace-hero__inner { position: relative; padding-block: clamp(3rem, 8vw, 5.5rem); }
.trace-hero__copy { max-width: 40rem; }

.trace-hero__title {
  font-size: clamp(2.1rem, 5.2vw, 3.9rem);
  line-height: 1.04;
  margin-block: var(--s-4) var(--s-5);
}

.trace-hero__kicker {
  font-size: clamp(1rem, 1.6vw, 1.28rem);
  color: var(--text);
  font-weight: 500;
}

.trace-hero__body {
  margin-top: var(--s-5);
  max-width: 42ch;
  color: var(--text-body);
  font-size: var(--step--1);
}

/* --- journey arrows ----------------------------------------------------- */

/* The plain connector becomes an arrow on this page, matching the mockup:
   the sequence is directional, so the line should say so. */
.journey--arrows .journey__step:not(:last-child)::after {
  height: 1px;
  background: var(--gold-ink);
  opacity: 0.5;
}
.journey--arrows .journey__step:not(:last-child) {
  --arrow: 6px;
}
.journey--arrows .journey__step:not(:last-child) .journey__disc::after {
  content: "";
  position: absolute;
  top: 50%;
  left: calc(100% + 2.4rem);
  width: 0; height: 0;
  transform: translateY(-50%);
  border-left: 6px solid var(--gold-ink);
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  opacity: 0.65;
}

/* --- trace lab ---------------------------------------------------------- */

.trace-lab__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(1.5rem, 4vw, 3.25rem);
  align-items: start;
}

.trace-lab__result { display: flex; flex-direction: column; gap: var(--s-5); }

.result-card {
  border: 1px solid var(--line);
  background: var(--bg-panel);
  padding: var(--s-6);
}
.result-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  margin-bottom: var(--s-5);
}
.result-card--map { display: flex; flex-direction: column; }
.result-card--map .ug-map { max-width: 20rem; margin-block: var(--s-5) 0; align-self: center; }

/* --- stage timeline with photographs ------------------------------------ */

.stage-track {
  margin-top: var(--s-7);
  border-left: 1px solid var(--line);
  padding-left: var(--s-6);
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
}

.stage-track__item {
  position: relative;
  display: grid;
  grid-template-columns: 5.5rem minmax(0, 1fr);
  gap: var(--s-4);
  align-items: start;
}
.stage-track__item::before {
  content: "";
  position: absolute;
  left: calc(-1 * var(--s-6) - 4px);
  top: 1.5rem;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 0 3px var(--bg);
}

.stage-track__media {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--bg-raised);
}
.stage-track__media img,
.stage-track__media picture { width: 100%; height: 100%; object-fit: cover; }
.stage-track__media .ph {
  width: 100%; height: 100%;
  display: grid; place-items: center;
  font-size: 0.7rem; letter-spacing: 0.12em;
}

.stage-track__title {
  font-family: var(--font-ui);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--gold);
}
.stage-track__date {
  font-size: 0.6875rem;
  color: var(--text-muted);
  margin-top: var(--s-2);
  font-variant-numeric: tabular-nums;
}
.stage-track__text {
  font-size: var(--step--1);
  color: var(--text-muted);
  margin-top: var(--s-2);
  line-height: 1.5;
}

/* --- why traceability matters ------------------------------------------- */

.why-card { text-align: center; padding-inline: var(--s-3); }
.why-card + .why-card { border-left: 1px solid var(--cream-line); }
.why-card__icon {
  display: grid;
  place-items: center;
  color: var(--gold-ink);
  margin-bottom: var(--s-4);
}
.why-card__title {
  font-family: var(--font-ui);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: var(--s-3);
}
.why-card__body {
  font-size: var(--step--1);
  color: var(--ink-body);
  max-width: 24ch;
  margin-inline: auto;
}

/* --- responsive --------------------------------------------------------- */

@media (max-width: 1080px) {
  .trace-lab__grid { grid-template-columns: 1fr; }
  .trace-lab__result { order: -1; }
  .journey--arrows .journey__step .journey__disc::after { display: none; }
}

@media (max-width: 720px) {
  .trace-hero__media::after {
    background: linear-gradient(180deg, rgba(8,8,10,.7) 0%, rgba(8,8,10,.92) 100%);
  }
  .why-card + .why-card { border-left: 0; border-top: 1px solid var(--cream-line); padding-top: var(--s-6); }
  .stage-track__item { grid-template-columns: 4.5rem minmax(0, 1fr); }
}

/* ==========================================================================
   26  Admin editing screens
   ========================================================================== */

/* A heading with its action sitting on the same line. */
.section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  flex-wrap: wrap;
  margin-bottom: var(--s-5);
}

/* The row currently loaded into the form below, so the link between the
   table and the form is obvious rather than implied. */
.row--editing > td {
  background: var(--bg-panel);
  box-shadow: inset 2px 0 0 var(--gold);
}

/* Action cells hold a link and a small form side by side.

   These stay real table cells: making the td itself a flex container drops
   its table-cell behaviour and the column collapses. The children are laid
   out inline instead. */
.cell--actions { white-space: nowrap; }
.cell--actions > * { vertical-align: middle; }
.cell--actions > * + * { margin-left: var(--s-4); }
.inline-form { display: inline-flex; align-items: center; gap: var(--s-2); margin: 0; }

/* Reorder arrows. */
.btn-icon {
  width: 1.75rem;
  height: 1.75rem;
  display: inline-grid;
  place-items: center;
  background: transparent;
  border: 1px solid var(--line-strong);
  color: var(--text-muted);
  font-size: 0.8rem;
  line-height: 1;
  cursor: pointer;
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.btn-icon:hover:not(:disabled) { color: var(--gold); border-color: var(--gold); }
.btn-icon:disabled { opacity: 0.3; cursor: default; }

/* A destructive action that must not look like a primary button. */
.btn-link {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  font-size: var(--step--1);
  color: var(--text-muted);
  cursor: pointer;
  border-bottom: 1px solid transparent;
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.btn-link:hover { color: var(--text); border-bottom-color: currentColor; }
.btn-link--bad:hover { color: #C8564B; }

.field__hint {
  margin-top: var(--s-3);
  font-size: 0.75rem;
  color: var(--text-muted);
  line-height: 1.5;
  text-transform: none;
  letter-spacing: 0;
}

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

/* File inputs should not inherit the tall padded look of a text field. */
.field input[type="file"] {
  padding: var(--s-3);
  font-size: var(--step--1);
  background: var(--bg-raised);
}

/* Tick lists: lot access, certifications. */
.check-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: var(--s-3) var(--s-5);
}
.check {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  padding: var(--s-3);
  border: 1px solid var(--line);
  background: var(--bg-panel);
  font-size: var(--step--1);
  color: var(--text);
  cursor: pointer;
  transition: border-color 0.2s var(--ease);
}
.check:hover { border-color: var(--line-strong); }
.check:focus-within { border-color: var(--gold); }
.check input {
  width: auto;
  margin-top: 0.15rem;
  flex-shrink: 0;
  accent-color: var(--gold);
}
.check > span { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.check .u-muted { font-size: 0.75rem; }

@media (max-width: 720px) {
  .cell--actions { white-space: normal; }
  .cell--actions > * + * { margin-left: 0; }
  .check-grid { grid-template-columns: 1fr; }
}

/* Super Admin: grouped module ticks on Add/Edit admin. */
.perm-panel__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--s-4);
  flex-wrap: wrap;
  margin-bottom: var(--s-5);
}
.perm-groups {
  display: grid;
  gap: var(--s-6);
}
.perm-group {
  margin: 0;
  padding: 0;
  border: 0;
}
.perm-group legend {
  padding: 0;
  margin-bottom: var(--s-3);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold-dim);
}

/* Public documents published against a lot, beneath the certificate button. */
.doc-links {
  list-style: none;
  margin: var(--s-5) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
.doc-links a {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  font-size: var(--step--1);
}

/* ==========================================================================
   27  Who we supply
   ========================================================================== */

/* The client's own framing line, set apart from the list it introduces. */
.lede-rule {
  border-left: 2px solid var(--gold);
  padding-left: var(--s-4);
  margin-bottom: var(--s-6);
  font-family: var(--font-ui);
  font-weight: 600;
  color: var(--text);
  font-size: var(--step-0);
  line-height: 1.45;
}

/* Eight categories read as a wall in one column, so they run in two. */
.buyer-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-4) var(--s-5);
}
.buyer-list li {
  display: flex;
  gap: var(--s-3);
  align-items: flex-start;
  font-size: var(--step--1);
  color: var(--text-muted);
}
.buyer-list__mark { color: var(--gold); flex-shrink: 0; line-height: 1; margin-top: 0.15em; }

.section--light .lede-rule { border-left-color: var(--gold-ink); color: var(--ink); }
.section--light .buyer-list li { color: var(--ink-body); }
.section--light .buyer-list__mark { color: var(--gold-ink); }

/* Vanilla grades: charcoal band, gold marks, visual grade bars.
   Ethel asked to drop the white/cream ground and do something with the list. */
.grades-band {
  background: var(--bg);
  border-top: 1px solid var(--gold-lo);
  border-bottom: 1px solid var(--line);
}
.grades-band .eyebrow { color: var(--gold); }
.grades-band .eyebrow::before {
  background: var(--gold-hi);
  opacity: 1;
}

.grade-graph {
  list-style: none;
  margin: var(--s-7) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-5);
}
.grade-card {
  display: flex;
  gap: var(--s-4);
  padding: var(--s-5);
  background: var(--bg-panel);
  border: 1px solid var(--line-strong);
}
.grade-card__mark {
  flex-shrink: 0;
  width: 2.4rem;
  height: 2.4rem;
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-size: var(--step-1);
  color: var(--bg);
  background: var(--gold);
  line-height: 1;
}
.grade-card__name {
  font-size: var(--step-0);
  color: var(--gold-hi);
  margin: 0 0 var(--s-3);
}
.grade-card__text {
  font-size: var(--step--1);
  color: var(--text-muted);
  margin: 0;
}
.grade-card__bar {
  display: block;
  height: 3px;
  margin-top: var(--s-4);
  background: var(--gold-hi);
  transform-origin: left center;
}
.grade-card:nth-child(1) .grade-card__bar { width: 100%; }
.grade-card:nth-child(2) .grade-card__bar { width: 72%; opacity: 0.85; }
.grade-card:nth-child(3) .grade-card__bar { width: 48%; opacity: 0.7; }

@media (max-width: 800px) {
  .grade-graph { grid-template-columns: 1fr; }
}

.form-icon {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  margin-bottom: var(--s-4);
  color: var(--gold);
  border: 1px solid var(--gold-lo);
  background: var(--gold-wash);
}

@media (max-width: 560px) {
  .buyer-list { grid-template-columns: 1fr; }
}

/* ==========================================================================
   28  Presentation box
   ========================================================================== */

.pack {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(1.5rem, 5vw, 4rem);
  align-items: center;
}
.pack__media img,
.pack__media picture { width: 100%; height: auto; display: block; }

/* The render is already on a black ground, so a border rather than a panel
   keeps it from reading as a floating rectangle. */
.pack__media { border: 1px solid var(--line); background: var(--bg-nav); }

@media (max-width: 860px) {
  .pack { grid-template-columns: 1fr; }
}

/* Marketing opt-in on the public forms.

   The selector is .field label.check--consent on purpose. `.field label` is
   already styled as an uppercase, letter-spaced field caption, and it beats a
   single class on specificity, so a plain .check--consent lost and the consent
   sentence came out shouting in capitals and stacked above its own checkbox. */
.field label.check--consent {
  display: flex;
  align-items: flex-start;
  gap: var(--s-4);
  margin-bottom: 0;
  border: 0;
  background: none;
  padding: 0;
  font-family: var(--font-ui);
  font-size: var(--step--1);
  font-weight: 400;
  color: var(--text-muted);
  line-height: 1.55;
  text-transform: none;
  letter-spacing: 0;
  cursor: pointer;
}
.field label.check--consent input {
  width: auto;
  margin-top: 0.2em;
  flex-shrink: 0;
  accent-color: var(--gold);
}
.field label.check--consent:hover { color: var(--text); }
.section--light .field label.check--consent { color: var(--ink-body); }
.section--light .field label.check--consent:hover { color: var(--ink); }

/* ==========================================================================
   29  Capabilities
   ========================================================================== */

.cap-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: clamp(1.5rem, 3vw, 2.5rem);
}
/* Icon beside the capability, not stacked above it (client, 26 Aug).
   A two-column grid does this without touching the markup: the icon and the
   title share row one, and each body paragraph spans both columns so it starts
   a row of its own — without that span, auto-placement would drop the first
   paragraph into the empty cell beside the icon. */
.cap {
  border-top: 1px solid var(--line);
  padding-top: var(--s-5);
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  column-gap: var(--s-4);
  row-gap: var(--s-4);
}
.cap__icon { display: block; color: var(--gold); }
.cap__title {
  font-family: var(--font-ui);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text);
  /* The grid's row-gap now provides the space this margin used to. */
  margin-bottom: 0;
}
.cap__body {
  grid-column: 1 / -1;
  font-size: var(--step--1);
  color: var(--text-muted);
  line-height: 1.6;
}
/* The old `.cap__body + .cap__body { margin-top }` is gone: the grid's row-gap
   already separates paragraphs, and keeping both stacked the two spacings. */

/* ==========================================================================
   30  Founder's Reserve (Premium Black Pepper)
   ========================================================================== */

.fr-hero {
  position: relative;
  min-height: clamp(22rem, 72vh, 38rem);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-block: clamp(5rem, 12vw, 8rem) clamp(3rem, 7vw, 5rem);
  overflow: hidden;
  text-align: center;
  border-bottom: 0;
}
.fr-hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.fr-hero__media img,
.fr-hero__media picture,
.fr-hero__media .ph {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.fr-hero__veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(180deg, rgba(10, 10, 11, 0.55) 0%, rgba(10, 10, 11, 0.72) 45%, rgba(10, 10, 11, 0.88) 100%),
    radial-gradient(ellipse at 50% 20%, rgba(191, 142, 85, 0.12), transparent 55%);
  pointer-events: none;
}
.fr-hero__inner {
  position: relative;
  z-index: 2;
  max-width: 40rem;
}
.fr-hero__brand {
  font-family: var(--font-ui);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: var(--s-5);
}
.fr-hero__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.4rem, 6vw, 4.2rem);
  line-height: 1.05;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text);
  margin: 0;
}
.fr-hero__grade {
  margin-top: var(--s-4);
  font-family: var(--font-ui);
  font-size: clamp(0.8rem, 1.4vw, 0.95rem);
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
}
.fr-hero__tagline {
  margin-top: var(--s-5);
  font-size: var(--step-0);
  color: var(--text-body);
  max-width: 32ch;
  margin-inline: auto;
}
/* The origin line from the mockup, set quieter than the tagline above it. */
.fr-hero__origin {
  margin-top: var(--s-3);
  font-family: var(--font-ui);
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
  max-width: 36ch;
  margin-inline: auto;
}

.fr-stats__inner {
  max-width: 36rem;
  margin-inline: auto;
  text-align: center;
}
.fr-stats__list {
  list-style: none;
  margin: 0 0 var(--s-6);
  padding: 0;
  display: grid;
  gap: var(--s-3);
}
.fr-stats__list li {
  font-family: var(--font-ui);
  font-size: var(--step-0);
  font-weight: 500;
  color: var(--ink);
  letter-spacing: 0.02em;
}
.fr-stats__lede {
  max-width: 42ch;
  margin-inline: auto;
  font-size: var(--step--1);
  line-height: 1.65;
}
.fr-stats__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-4);
  justify-content: center;
  margin-top: var(--s-7);
}

.fr-features {
  background: var(--cream-panel);
  color: var(--ink-body);
  padding-block: clamp(2.5rem, 5vw, 3.5rem);
  border-block: 1px solid var(--cream-line);
}
.fr-features__grid {
  display: grid;
  /* Six features, so three across on two rows rather than four across leaving
     two stranded on a second row. */
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-7) var(--s-6);
}
.fr-feat { text-align: center; }
.fr-feat__icon {
  display: inline-flex;
  color: var(--gold-ink);
  margin-bottom: var(--s-4);
}
.fr-feat__title {
  font-family: var(--font-ui);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: var(--s-3);
}
.fr-feat__body {
  font-size: 0.78rem;
  line-height: 1.5;
  color: var(--ink-body);
  max-width: 22ch;
  margin-inline: auto;
}
.fr-features__cta {
  text-align: center;
  margin-top: var(--s-7);
}

.fr-steps {
  list-style: none;
  margin: var(--s-8) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-6);
  counter-reset: fr-step;
}
.fr-step {
  text-align: center;
  border-top: 1px solid var(--cream-line);
  padding-top: var(--s-6);
  position: relative;
}
.fr-step__num {
  display: block;
  font-family: var(--font-ui);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  color: var(--gold-ink);
  margin-bottom: var(--s-4);
}
.fr-step__icon {
  display: inline-flex;
  color: var(--gold-ink);
  margin-bottom: var(--s-4);
}
.fr-step__title {
  font-family: var(--font-ui);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: var(--s-3);
}
.fr-step__body {
  font-size: var(--step--1);
  color: var(--ink-body);
  max-width: 24ch;
  margin-inline: auto;
}

.fr-origin {
  position: relative;
  padding-block: clamp(4rem, 9vw, var(--s-10));
  background:
    radial-gradient(ellipse at 70% 40%, rgba(191, 142, 85, 0.08), transparent 50%),
    var(--bg-panel);
  border-block: 1px solid var(--line);
  overflow: hidden;
}
.fr-origin__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 6vw, 5rem);
  align-items: center;
}
.fr-origin__title {
  font-family: var(--font-display);
  font-size: var(--step-3);
  font-weight: 400;
  color: var(--text);
  margin-block: var(--s-4) var(--s-5);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.fr-origin__lede {
  font-size: var(--step-1);
  color: var(--gold);
  max-width: 28ch;
  margin-bottom: var(--s-5);
  line-height: 1.45;
}
.fr-origin__map svg {
  width: 100%;
  max-width: 28rem;
  height: auto;
  color: var(--gold-lo);
  margin-inline: auto;
  display: block;
}

.fr-batch__grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
.fr-batch__title {
  margin-block: var(--s-4) var(--s-5);
  max-width: 18ch;
}
.fr-batch__body {
  font-size: var(--step--1);
  max-width: 44ch;
  margin-bottom: var(--s-6);
}
/* Trace address printed in full, as the mockup does, so a buyer holding a
   printed spec sheet can type it in rather than needing the link. */
.fr-batch__trace {
  margin-top: var(--s-5);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2) var(--s-4);
  font-size: var(--step--1);
}
.fr-batch__trace-label {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-family: var(--font-ui);
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold-ink, var(--gold));
}
.fr-batch__trace a { color: var(--text-muted); word-break: break-all; }
.fr-batch__trace a:hover { color: var(--gold); }
.fr-batch__meta {
  display: grid;
  gap: var(--s-4);
  margin: 0 0 var(--s-7);
  padding: 0;
}
.fr-batch__meta div {
  display: flex;
  justify-content: space-between;
  gap: var(--s-4);
  padding-bottom: var(--s-3);
  border-bottom: 1px solid var(--line);
  font-size: var(--step--1);
}
.fr-batch__meta dt {
  color: var(--text-muted);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.6875rem;
}
.fr-batch__meta dd {
  color: var(--text);
  margin: 0;
  text-align: right;
  font-weight: 500;
}
.fr-batch__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-4);
}
.fr-batch__frame {
  border: 1px solid var(--line);
  background: var(--bg-nav);
  overflow: hidden;
  aspect-ratio: 3 / 4;
}
.fr-batch__frame img,
.fr-batch__frame picture,
.fr-batch__frame .ph {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.fr-batch__caption {
  margin-top: var(--s-4);
  font-size: 0.75rem;
  text-align: center;
  letter-spacing: 0.04em;
}

.fr-help {
  padding-bottom: clamp(4rem, 9vw, 7rem);
}
.fr-help__box {
  max-width: 28rem;
  margin-inline: auto;
  text-align: center;
  padding: clamp(2rem, 4vw, 2.75rem) var(--gutter);
  border: 1px solid var(--gold-lo);
  background: var(--bg-nav);
}
.fr-help__title {
  font-family: var(--font-ui);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: var(--s-4);
}
.fr-help__body {
  font-size: var(--step--1);
  margin-bottom: var(--s-4);
}
.fr-help__mail {
  margin-bottom: var(--s-6);
  font-size: var(--step-0);
}
.fr-help__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-4) var(--s-6);
  justify-content: center;
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.fr-help__links a { color: var(--text-muted); }
.fr-help__links a:hover { color: var(--gold); }

/* Callout on the standard black-pepper product page */
.fr-callout {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-6);
  padding: clamp(1.75rem, 4vw, 2.5rem) clamp(1.5rem, 4vw, 2.5rem);
  border: 1px solid var(--line);
  background:
    linear-gradient(135deg, rgba(191, 142, 85, 0.08), transparent 55%),
    var(--bg-panel);
}
.fr-callout__title {
  font-size: var(--step-1);
  margin-block: var(--s-3) var(--s-3);
  color: var(--text);
}

@media (max-width: 960px) {
  .fr-features__grid { grid-template-columns: repeat(2, 1fr); gap: var(--s-7) var(--s-5); }
  .fr-origin__grid,
  .fr-batch__grid { grid-template-columns: 1fr; }
  .fr-batch__media { order: -1; max-width: 22rem; margin-inline: auto; width: 100%; }
}

@media (max-width: 640px) {
  .fr-features__grid,
  .fr-steps { grid-template-columns: 1fr; }
  .fr-stats__actions { flex-direction: column; align-items: stretch; }
  .fr-stats__actions .btn { width: 100%; justify-content: center; }
  .fr-callout { flex-direction: column; align-items: flex-start; }
}

/* ==========================================================================
   30  Sample CTA beside the logo row
   ========================================================================== */

.trustband__cta {
  background: var(--leaf-deep);
  padding: clamp(1.75rem, 3.5vw, 2.75rem) clamp(1.5rem, 3vw, 2.75rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--s-4);
  position: relative;
  overflow: hidden;
}

/* Her copper botanical, bottom right, decorative so it stays a background
   rather than an <img> that a screen reader would announce. */
.trustband__cta::after {
  content: "";
  position: absolute;
  right: -2rem;
  bottom: -3rem;
  width: 60%;
  height: 130%;
  background: url("/assets/img/texture-botanical-400.jpg") no-repeat right bottom / contain;
  mix-blend-mode: lighten;
  opacity: 0.9;
  pointer-events: none;
}
.trustband__cta > * { position: relative; z-index: 1; margin: 0; }

.trustband__cta .eyebrow { color: var(--leaf-line); }
.trustband__cta h2 {
  font-size: var(--step-2);
  color: var(--text);
  max-width: 18ch;
  line-height: 1.15;
}

/* Green button on the green panel: lighter than its ground, with a border so
   it still reads as a control. --leaf-line on --leaf-deep clears AA. */
.btn--leaf {
  --btn-bg: transparent;
  --btn-fg: var(--leaf-line);
  --btn-bd: var(--leaf-line);
  background: rgba(78, 154, 107, 0.12);
  color: var(--leaf-line);
  border: 1px solid var(--leaf-line);
}
.btn--leaf:hover { background: rgba(78, 154, 107, 0.22); color: #FFFFFF; border-color: #FFFFFF; }

@media (max-width: 1200px) {
  .trustband { grid-template-columns: 1fr; }
  .trustband__cta::after { width: 45%; }
}

/* Her logo row is a single line, and the marks are set noticeably smaller than
   we had them. At the previous size the six needed 918px inside 574px, so they
   broke onto four lines. Scaled down and tightened to fit one row, with
   wrapping restored below the split breakpoint. */
@media (min-width: 1201px) {
  .trustband__inner { gap: clamp(1.25rem, 2vw, 1.75rem); flex-wrap: nowrap; }
  .logos { flex-wrap: nowrap; gap: clamp(1rem, 1.6vw, 1.5rem); flex: 1 1 auto; }
  .logo-mark { white-space: nowrap; }
  .logo-mark__primary { font-size: clamp(0.8rem, 1vw, 0.95rem); }
  .logo-mark--mccormick .logo-mark__primary { font-size: clamp(0.85rem, 1.05vw, 1rem); }
  .logo-mark__secondary { font-size: 0.5rem; }
  .logo-mark--symrise .logo-mark__glyph,
  .logo-mark--olam .logo-mark__glyph { width: 0.7rem; height: 0.7rem; }
  .trustband__title { font-size: 0.625rem; letter-spacing: 0.14em; }
}
/* The private-label mark is a two-line wordmark rather than a logo, so it sets
   smaller and tighter than the brands beside it, as she draws it. */
.logo-mark--private .logo-mark__primary {
  font-family: var(--font-ui);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1.35;
  text-align: center;
}

/* ==========================================================================
   22  Invoice document
   Namespaced invdoc-*, not doc-*: a .doc component already exists for the
   document cards in the portal and on a trace result. Reusing that name
   repainted those cards white-on-dark before this was caught.
   The one page built to become a PDF. It always renders on paper-white with
   ink-dark type — never the site's dark palette — because a buyer prints this
   and a dark ground would empty a toner cartridge for no reason.
   ========================================================================== */

.invdoc-page {
  background: var(--cream);
  padding: var(--s-7) var(--gutter);
  min-height: 100vh;
}

.invdoc {
  background: #fff;
  color: var(--ink);
  max-width: 46rem;
  margin: 0 auto;
  padding: var(--s-8);
  border: 1px solid var(--cream-line);
}

.invdoc__head {
  display: flex;
  justify-content: space-between;
  gap: var(--s-6);
  flex-wrap: wrap;
  padding-bottom: var(--s-6);
  border-bottom: 2px solid var(--ink);
}

.invdoc__mark {
  font-family: var(--font-display);
  font-size: 1.5rem;
  letter-spacing: 0.42em;
  color: var(--gold-ink);
  line-height: 1.1;
}
.invdoc__marksub {
  font-size: 0.5625rem;
  font-weight: 600;
  letter-spacing: 0.28em;
  color: var(--gold-ink);
  margin-bottom: var(--s-4);
}
.invdoc__seller {
  font-size: var(--step--1);
  color: var(--ink-body);
  line-height: 1.5;
}

.invdoc__meta { text-align: right; }
.invdoc__kind {
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold-ink);
}
.invdoc__ref {
  font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
  font-size: var(--step-1);
  color: var(--ink);
  margin-bottom: var(--s-4);
}
.invdoc__meta dl {
  display: grid;
  grid-template-columns: auto auto;
  gap: var(--s-2) var(--s-4);
  font-size: var(--step--1);
  justify-content: end;
}
.invdoc__meta dt { color: var(--ink-body); }
.invdoc__meta dd { color: var(--ink); font-weight: 600; }

.invdoc__parties {
  display: flex;
  gap: var(--s-8);
  flex-wrap: wrap;
  padding: var(--s-6) 0;
}
.invdoc__label {
  font-size: 0.5625rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold-ink);
  margin-bottom: var(--s-3);
}
.invdoc__party { font-size: var(--step-0); color: var(--ink); font-weight: 600; }
.invdoc__party--none { font-weight: 400; color: var(--ink-body); font-style: italic; }

.invdoc__lines { width: 100%; border-collapse: collapse; margin-top: var(--s-4); }
.invdoc__lines th,
.invdoc__lines td {
  text-align: left;
  padding: var(--s-4) var(--s-3);
  font-size: var(--step--1);
  border-bottom: 1px solid var(--cream-line);
  color: var(--ink-body);
}
.invdoc__lines thead th {
  font-size: 0.5625rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-ink);
  border-bottom: 1px solid var(--ink);
}
.invdoc__lines tbody td { color: var(--ink); }
.invdoc__num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.invdoc__lines tfoot th {
  text-align: right;
  border-bottom: 0;
  color: var(--ink-body);
  text-transform: none;
  letter-spacing: 0;
  font-size: var(--step--1);
}
.invdoc__lines tfoot td { border-bottom: 0; color: var(--ink); }
.invdoc__total { font-size: var(--step-1); font-weight: 600; }
.invdoc__lines--plain thead { display: none; }

.invdoc__block { margin-top: var(--s-7); }
.invdoc__block--pay {
  background: var(--cream);
  border: 1px solid var(--cream-line);
  padding: var(--s-5);
}
.invdoc__note { font-size: var(--step--1); color: var(--ink-body); line-height: 1.6; }

.invdoc__foot {
  margin-top: var(--s-8);
  padding-top: var(--s-4);
  border-top: 1px solid var(--cream-line);
  font-size: 0.625rem;
  letter-spacing: 0.1em;
  color: var(--ink-body);
  text-align: center;
}

/* Actions bar above the document. Never printed. */
.invdoc-actions {
  max-width: 46rem;
  margin: 0 auto var(--s-5);
  display: flex;
  gap: var(--s-4);
  align-items: center;
  flex-wrap: wrap;
}

@media print {
  /* Print exactly the document: no chrome, no shell, no actions bar. */
  .invdoc-page { padding: 0; background: #fff; min-height: 0; }
  .invdoc {
    max-width: none;
    border: 0;
    padding: 0;
    /* Let a long invoice break across sheets rather than clipping. */
    page-break-inside: auto;
  }
  .invdoc-actions, .header, .footer, .side-nav, .shell__nav { display: none !important; }
  .invdoc__lines tr { page-break-inside: avoid; }
  .invdoc__block--pay { background: transparent; }
  @page { margin: 16mm; }
}

/* ==========================================================================
   23  Shipment Overview map
   Land is a dot matrix generated from real geography (see app/world-map.php);
   the arcs are drawn in the same projection so a port sits on its coastline.
   ========================================================================== */

/* Capped rather than full-bleed: at 1440 the raw aspect made the map 460px
   tall and it dominated the dashboard. The viewBox still scales, so nothing
   is cropped, it just stops growing. */
.wmap { width: 100%; max-width: 46rem; margin-inline: auto; }
.wmap svg { display: block; width: 100%; height: auto; max-height: 15rem; }

.wmap__land circle {
  fill: var(--gold);
  opacity: 0.52;
  stroke: rgba(191, 142, 85, 0.35);
  stroke-width: 0.35;
}

.wmap__arc {
  stroke-width: 3.1;
  stroke-linecap: round;
  opacity: 0.95;
  filter: drop-shadow(0 0 2.5px rgba(191, 142, 85, 0.55));
}
/* A shipment still on the water gets a travelling dash. Held to the same
   reduced-motion rule as the rest of the site. */
.wmap__arc--live {
  stroke-dasharray: 7 6;
  stroke-width: 3.4;
  animation: wmap-flow 2.4s linear infinite;
}
@keyframes wmap-flow { to { stroke-dashoffset: -26; } }

.wmap__pin {
  fill: var(--gold);
  stroke: rgba(12, 12, 13, 0.85);
  stroke-width: 1.2;
  filter: drop-shadow(0 0 3px rgba(191, 142, 85, 0.7));
}
.wmap__pin--origin {
  fill: var(--gold-hi);
  stroke: rgba(12, 12, 13, 0.85);
  stroke-width: 1.2;
}

.wmap__empty {
  font-size: var(--step--1);
  color: var(--text-muted);
  margin-top: var(--s-4);
}

@media (prefers-reduced-motion: reduce) {
  .wmap__arc--live { animation: none; }
}

/* ==========================================================================
   24  System status
   A real health list, not a badge. Each row carries its own state colour and
   an explanation, because "operational" on its own tells her nothing.
   ========================================================================== */

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

.health__row {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  column-gap: var(--s-4);
}
.health__dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  /* Nudged down to sit on the label's optical centre rather than its box top. */
  margin-top: 0.42rem;
  background: var(--line-strong);
}
.health__row--ok   .health__dot { background: var(--ok); }
.health__row--warn .health__dot { background: var(--gold); }
.health__row--bad  .health__dot { background: var(--alert); }

.health__body  { display: grid; gap: 0.15rem; }
.health__label { font-size: var(--step--1); color: var(--text); }
.health__note  { font-size: var(--step--1); color: var(--text-muted); line-height: 1.5; }

/* ==========================================================================
   25  Sales area chart
   preserveAspectRatio is none so the shape stretches to the card width; the
   stroke is kept honest with vector-effect so it does not stretch with it.
   ========================================================================== */

.admin-area { margin-top: var(--s-5); }
.admin-area svg { display: block; width: 100%; height: clamp(7.5rem, 16vw, 10.5rem); }

.admin-sales__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--s-4);
  flex-wrap: wrap;
  margin-bottom: var(--s-4);
}
.admin-sales__note {
  font-size: var(--step--1);
  color: var(--text-muted);
  margin: 0 0 var(--s-4);
  line-height: 1.5;
}
.admin-area--sales { margin-top: 0; }
.admin-area--sales .admin-area__plot {
  display: grid;
  grid-template-columns: 3.25rem 1fr;
  gap: var(--s-3);
  align-items: stretch;
}
.admin-area--sales .admin-area__y {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-end;
  padding-bottom: 1.4rem;
  font-size: 0.5625rem;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
.admin-area--sales .admin-area__canvas { min-width: 0; }
.admin-area--sales svg {
  height: clamp(8.5rem, 14vw, 10.5rem);
  overflow: visible;
}

.admin-area__labs {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  margin-top: var(--s-3);
  font-size: 0.625rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}
/* First and last sit under their own point rather than centred in a column. */
.admin-area__labs span { text-align: center; }
.admin-area__labs span:first-child { text-align: left; }
.admin-area__labs span:last-child  { text-align: right; }

.admin-delta {
  margin-top: 0.35rem;
  font-size: 0.6875rem;
  letter-spacing: 0.02em;
}
.admin-delta--up   { color: #5ecf82; }
.admin-delta--down { color: #e07068; }
.admin-delta--none { color: var(--text-muted); }

@media (max-width: 640px) {
  /* Twelve month labels will not fit on a phone. Every other one still gives
     the eye a scale without turning into a grey smear. */
  .admin-area__labs span:nth-child(even) { visibility: hidden; }
  .admin-area--sales .admin-area__plot { grid-template-columns: 1fr; }
  .admin-area--sales .admin-area__y { display: none; }
}

.admin-area__foot {
  margin-top: var(--s-3);
  font-size: 0.6875rem;
  color: var(--text-muted);
}

/* A status she has none of is still worth listing, but it should not compete
   with the ones carrying stock. */
/* Empty rows mute labels/counts only. Fading the whole row washed her
   amber Active into brown and made zero-status dots unrecognisable. */
.admin-legend__row--empty .admin-legend__name,
.admin-legend__row--empty .admin-legend__count,
.admin-legend__row--empty .admin-legend__pct { opacity: 0.55; }

/* ==========================================================================
   26  Admin top bar
   Search, the two counters she asked for, and who is signed in.
   ========================================================================== */

.topbar {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  padding: var(--s-4) 0 var(--s-5);
  border-bottom: 1px solid var(--line);
  margin-bottom: var(--s-6);
}

.topbar__search {
  flex: 1 1 auto;
  min-width: 0;               /* a flex item will not shrink under its input without this */
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: 0.55rem var(--s-4);
  border: 1px solid var(--line);
  background: var(--bg-panel);
  color: var(--text-muted);
  max-width: 30rem;
}
.topbar__search input {
  flex: 1 1 auto;
  min-width: 0;
  background: none;
  border: 0;
  color: var(--text);
  font: inherit;
  font-size: var(--step--1);
}
.topbar__search input::placeholder { color: var(--text-muted); }
.topbar__search input:focus { outline: none; }
.topbar__search:focus-within { border-color: var(--gold-lo); }

.topbar__btn {
  position: relative;
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  color: var(--text-body);
  flex-shrink: 0;
}
.topbar__btn:hover { color: var(--gold); }
.topbar__btn.is-ring { color: var(--gold); }
.topbar__btn.is-ring::before {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 1px solid var(--gold);
  animation: ngs-bell-ring 1.1s ease-out 2;
  pointer-events: none;
}
@keyframes ngs-bell-ring {
  0% { transform: scale(0.9); opacity: 0.9; }
  100% { transform: scale(1.45); opacity: 0; }
}

.topbar__badge {
  position: absolute;
  top: -0.1rem;
  right: -0.1rem;
  min-width: 1.05rem;
  height: 1.05rem;
  padding: 0 0.2rem;
  border-radius: 999px;
  background: var(--gold);
  color: #14140F;
  font-size: 0.5625rem;
  font-weight: 700;
  display: grid;
  place-items: center;
}
.topbar__badge--bad { background: var(--alert); color: #fff; }

.topbar__user {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  color: var(--text-body);
  flex-shrink: 0;
}
.topbar__avatar {
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--gold-wash);
  border: 1px solid var(--gold-lo);
  color: var(--gold);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
}
.topbar__who  { display: grid; line-height: 1.2; }
.topbar__name { font-size: var(--step--1); color: var(--text); }
.topbar__role {
  font-size: 0.5625rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
}

@media (max-width: 720px) {
  /* On a phone the name and role cost more room than they earn; the avatar
     still says who is signed in and stays a tap target. */
  .topbar__who { display: none; }
  .topbar__search { max-width: none; }
}

/* ==========================================================================
   27  Analytics funnel
   Label, proportional bar, count. Deliberately no percentage: the steps are
   independent totals, so a share-of-first figure would mislead.
   ========================================================================== */

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

.funnel__row {
  display: grid;
  grid-template-columns: minmax(7rem, 10rem) 1fr auto;
  align-items: center;
  gap: var(--s-4);
}
.funnel__label { font-size: var(--step--1); color: var(--text-body); }
.funnel__label:hover { color: var(--gold); }

.funnel__bar {
  height: 0.55rem;
  background: var(--bg-raised);
  border: 1px solid var(--line);
  min-width: 0;
}
.funnel__bar span { display: block; height: 100%; background: var(--gold); }

.funnel__n {
  font-size: var(--step--1);
  color: var(--text);
  font-variant-numeric: tabular-nums;
  min-width: 2.5rem;
  text-align: right;
}

@media (max-width: 640px) {
  /* The bar is the first thing to go: the label and the number carry the
     meaning, and three columns will not fit a phone. */
  .funnel__row { grid-template-columns: 1fr auto; }
  .funnel__bar { display: none; }
}

/* ==========================================================================
   28  Vanilla extract product page
   ========================================================================== */

.ve-highlights {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  gap: var(--s-5);
}
.ve-highlights__label {
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-ink);
  margin-bottom: var(--s-2);
}
.ve-highlights__value {
  font-size: var(--step--1);
  color: var(--ink);
  line-height: 1.45;
}
.ve-apps {
  list-style: none;
  margin: var(--s-6) 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
}
.ve-apps li {
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold);
  border: 1px solid rgba(191, 142, 85, 0.35);
  padding: 0.4rem 0.7rem;
}
.ve-quality {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-6);
  margin-top: var(--s-8);
}
.ve-quality__title {
  font-family: var(--font-ui);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: var(--s-3);
}
.ve-quality__body {
  font-size: var(--step--1);
  line-height: 1.55;
  max-width: 36ch;
}

.ve-story {
  display: grid;
  gap: var(--s-8);
  max-width: 62ch;
  margin-inline: auto;
}
.ve-story__title {
  font-family: var(--font-display);
  font-size: var(--step-1);
  color: var(--ink);
  margin-bottom: var(--s-4);
  line-height: 1.25;
}
.ve-story__body {
  font-size: var(--step--1);
  line-height: 1.6;
}

/* Brand story: editorial split, dark charcoal + copper, real bean photo. */
.ve-brand-band {
  position: relative;
  isolation: isolate;
  padding-block: clamp(4.5rem, 10vw, 8rem);
  overflow: hidden;
  background:
    radial-gradient(ellipse 70% 80% at 12% 20%, rgba(184, 140, 74, 0.14), transparent 55%),
    radial-gradient(ellipse 55% 60% at 88% 78%, rgba(184, 140, 74, 0.08), transparent 50%),
    linear-gradient(165deg, #141210 0%, #0c0b0a 48%, #161310 100%);
  border-block: 1px solid rgba(184, 140, 74, 0.16);
}
.ve-brand-band__glow {
  position: absolute;
  inset: auto -10% -30% auto;
  width: min(42rem, 70vw);
  height: min(42rem, 70vw);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(184, 140, 74, 0.12), transparent 68%);
  pointer-events: none;
  z-index: 0;
}
.ve-brand-band > .container { position: relative; z-index: 1; }

.ve-brand {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.ve-brand__media { position: relative; }
.ve-brand__frame {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border: 1px solid var(--gold-hi);
  box-sizing: border-box;
}
.ve-brand__frame img,
.ve-brand__frame picture,
.ve-brand__frame .ph {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ve-brand__frame picture { display: block; }
.ve-brand__frame picture img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ve-brand__caption {
  margin-top: var(--s-4);
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-dim);
}
.ve-brand__copy { min-width: 0; }
.ve-brand__title {
  font-family: var(--font-display);
  font-size: clamp(1.85rem, 3.4vw, 2.9rem);
  line-height: 1.12;
  color: var(--text);
  margin-block: var(--s-4) var(--s-6);
  max-width: 14ch;
}
.ve-brand__lead {
  font-size: clamp(1.05rem, 1.35vw, 1.2rem);
  line-height: 1.55;
  color: var(--text);
  max-width: 38ch;
  margin-bottom: var(--s-6);
}
.ve-brand__prose {
  max-width: 52ch;
  display: grid;
  gap: var(--s-5);
}
.ve-brand__prose p {
  font-size: var(--step--1);
  line-height: 1.65;
  color: var(--text-muted);
}
.ve-brand__sign {
  margin-top: var(--s-7);
  max-width: 42ch;
  font-family: var(--font-ui);
  font-size: 0.75rem;
  font-weight: 600;
  font-style: normal;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1.55;
  color: var(--gold-hi);
}

@media (max-width: 900px) {
  .ve-brand {
    grid-template-columns: 1fr;
    gap: var(--s-7);
  }
  .ve-brand__media { order: -1; max-width: 26rem; }
  .ve-brand__frame { aspect-ratio: 5 / 4; }
  .ve-brand__title { max-width: 18ch; }
  .ve-highlights { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ve-quality { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .ve-highlights { grid-template-columns: 1fr; }
}

/* --- Premium polish: newsletter modal, sticky CTA, cookie bar ---------- */

body.nl-modal-open,
body.qm-open { overflow: hidden; }

.nl-modal {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--s-5);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.28s var(--ease), visibility 0.28s var(--ease);
}
.nl-modal.is-open {
  opacity: 1;
  visibility: visible;
}
.nl-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(8, 7, 6, 0.72);
}
.nl-modal__dialog {
  position: relative;
  z-index: 1;
  width: min(26rem, 100%);
  padding: clamp(1.75rem, 4vw, 2.5rem);
  background:
    radial-gradient(ellipse 80% 60% at 0% 0%, rgba(184, 140, 74, 0.12), transparent 55%),
    linear-gradient(165deg, #161412 0%, #0c0b0a 100%);
  border: 1px solid rgba(184, 140, 74, 0.28);
  box-shadow: 0 28px 60px rgba(0, 0, 0, 0.5);
  transform: translateY(0.75rem);
  transition: transform 0.28s var(--ease-out-soft);
}
.nl-modal.is-open .nl-modal__dialog { transform: none; }
.nl-modal__close {
  position: absolute;
  top: 0.75rem;
  right: 0.85rem;
  width: 2.25rem;
  height: 2.25rem;
  border: 0;
  background: transparent;
  color: var(--text-muted);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
}
.nl-modal__close:hover { color: var(--gold); }
.nl-modal__title {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3vw, 1.85rem);
  line-height: 1.2;
  color: var(--text);
  margin: var(--s-3) 0 var(--s-4);
}
.nl-modal__lede {
  font-size: var(--step--1);
  line-height: 1.55;
  color: var(--text-muted);
  margin-bottom: var(--s-6);
}
.nl-modal__label {
  display: block;
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold-dim);
  margin-bottom: var(--s-2);
}
.nl-modal__input {
  width: 100%;
  padding: 0.85rem 1rem;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--line-strong);
  color: var(--text);
  font: inherit;
  margin-bottom: var(--s-5);
}
.nl-modal__input:focus {
  outline: none;
  border-color: var(--gold);
}
.nl-modal__consent {
  display: flex;
  gap: var(--s-3);
  align-items: flex-start;
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--text-muted);
  margin-bottom: var(--s-6);
  cursor: pointer;
}
.nl-modal__consent input {
  margin-top: 0.2rem;
  flex: 0 0 auto;
}
.nl-modal__submit { width: 100%; justify-content: center; }
.nl-modal__status {
  font-size: var(--step--1);
  margin-bottom: var(--s-4);
  padding: var(--s-3) var(--s-4);
  border-left: 2px solid var(--line);
}
.nl-modal__status.is-ok { border-left-color: var(--ok); color: var(--text); }
.nl-modal__status.is-error { border-left-color: var(--bad, #c45c4a); color: var(--text); }

.sticky-samples {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 60;
  display: none;
  padding: 0.75rem var(--gutter) calc(0.75rem + env(safe-area-inset-bottom, 0px));
  background: linear-gradient(180deg, transparent, rgba(10, 9, 8, 0.92) 30%);
  transform: translateY(110%);
  transition: transform 0.35s var(--ease-out-soft);
  pointer-events: none;
}
.sticky-samples.is-visible {
  transform: translateY(0);
  pointer-events: auto;
}
.sticky-samples__btn {
  width: 100%;
  justify-content: center;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.35);
}
@media (max-width: 720px) {
  .sticky-samples { display: block; }
}

/* Slim branded consent strip. Full-width, pinned to the viewport floor so
   it never sits on top of hero CTAs. html.has-cookie pads heroes by --cookie-h. */
.cookie-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 70;
  max-width: none;
  margin: 0;
  padding: 0;
  background:
    linear-gradient(180deg, rgba(191, 142, 85, 0.12), transparent 42%),
    #141210;
  border: 0;
  border-top: 1px solid var(--gold);
  box-shadow: 0 -18px 48px rgba(0, 0, 0, 0.55);
  opacity: 0;
  transform: translateY(100%);
  transition: opacity 0.28s var(--ease), transform 0.28s var(--ease-out-soft);
}
.cookie-bar.is-visible {
  opacity: 1;
  transform: none;
}
.cookie-bar__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4) var(--s-6);
  max-width: 72rem;
  margin-inline: auto;
  padding: 0.85rem var(--gutter) calc(0.85rem + env(safe-area-inset-bottom, 0px));
}
.cookie-bar__text {
  flex: 1 1 auto;
  min-width: 12rem;
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--text-body);
}
.cookie-bar__text a { color: var(--gold); text-decoration: underline; text-underline-offset: 0.15em; }
.cookie-bar__btn {
  flex: 0 0 auto;
  padding: 0.75rem 1.6rem;
}

html.has-cookie .hero-slide {
  align-items: end;
  padding-bottom: calc(var(--cookie-h, 4.75rem) + 1.25rem);
  box-sizing: border-box;
}
html.has-cookie .page-hero,
html.has-cookie .fr-hero,
html.has-cookie .trace-hero {
  padding-bottom: calc(var(--cookie-h, 4.75rem) + 1.25rem);
  box-sizing: border-box;
}
html.has-cookie .sticky-samples {
  bottom: var(--cookie-h, 4.75rem);
}
html.has-cookie .sample-nudge { display: none; }

/* In-flow sample invitation — not a floating toast. Sits under the hero. */
.sample-nudge {
  background: #141210;
  border-block: 1px solid rgba(191, 142, 85, 0.38);
}
.sample-nudge__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-4) var(--s-6);
  max-width: 72rem;
  margin-inline: auto;
  padding: 1.1rem var(--gutter);
}
.sample-nudge__text {
  flex: 1 1 18rem;
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--text);
}
.sample-nudge__cta { flex: 0 0 auto; }
.sample-nudge__x {
  flex: 0 0 auto;
  margin-left: auto;
  border: 0;
  background: transparent;
  color: var(--text-muted);
  font-size: 1.35rem;
  line-height: 1;
  cursor: pointer;
  padding: 0.2rem 0.35rem;
}
.sample-nudge__x:hover { color: var(--gold); }

@media (max-width: 640px) {
  .cookie-bar__inner {
    flex-wrap: nowrap;
    align-items: center;
    gap: 0.65rem 0.85rem;
    padding: 0.7rem var(--gutter) calc(0.7rem + env(safe-area-inset-bottom, 0px));
  }
  .cookie-bar__text {
    min-width: 0;
    font-size: 0.75rem;
    line-height: 1.4;
  }
  .cookie-bar__btn {
    width: auto;
    padding: 0.55rem 1.1rem;
  }
  .sample-nudge__inner {
    flex-direction: column;
    align-items: stretch;
  }
  .sample-nudge__cta {
    width: 100%;
    justify-content: center;
  }
  .sample-nudge__x { margin-left: 0; align-self: flex-end; }
}

/* Transactional notices (newsletter etc.) sit under the header, not on photography. */
.ngs-toasts {
  position: fixed;
  top: calc(5.25rem + env(safe-area-inset-top, 0px));
  left: 50%;
  right: auto;
  bottom: auto;
  z-index: 75;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-3);
  width: min(28rem, calc(100vw - 2 * var(--gutter)));
  transform: translateX(-50%);
  pointer-events: none;
}
.ngs-toast {
  pointer-events: auto;
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  width: 100%;
  padding: 0.95rem 1.1rem;
  background: #141210;
  border: 1px solid var(--gold);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
  opacity: 0;
  transform: translateY(-0.5rem);
  transition: opacity 0.28s var(--ease), transform 0.28s var(--ease-out-soft);
}
.ngs-toast.is-in { opacity: 1; transform: none; }
.ngs-toast.is-out { opacity: 0; transform: translateY(-0.35rem); }
.ngs-toast--gold { border-color: var(--gold); }
.ngs-toast--ok { border-color: rgba(78, 154, 107, 0.7); }
.ngs-toast__text {
  flex: 1 1 auto;
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.45;
  color: var(--text);
}
.ngs-toast__x {
  flex: 0 0 auto;
  border: 0;
  background: transparent;
  color: var(--text-muted);
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  padding: 0 0.15rem;
}
.ngs-toast__x:hover { color: var(--gold); }

.form.is-busy { opacity: 0.72; pointer-events: none; }
.form.is-busy button[type="submit"] { cursor: wait; }

.notice--ok {
  padding: var(--s-6);
  background: rgba(78, 154, 107, 0.08);
}

/* Request a Quote popup */
.qm {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.28s var(--ease), visibility 0.28s var(--ease);
}
.qm.is-open { opacity: 1; visibility: visible; }
.qm__backdrop { position: absolute; inset: 0; background: rgba(12, 10, 8, 0.72); }
.qm__dialog {
  --qm-cream: #FAF9F6;
  --qm-tan: #F3E9D9;
  --qm-ink: #1B3022;
  --qm-muted: #5C574E;
  --qm-line: #D8D0C4;
  position: relative;
  z-index: 1;
  width: min(72rem, 100%);
  max-height: 92vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: var(--qm-cream);
  color: var(--qm-ink);
  box-shadow: 0 32px 80px rgba(0, 0, 0, 0.45);
}
body.qm-open .header .tick { display: none; }
.qm__close {
  position: absolute;
  top: calc(2.4rem + 0.55rem);
  right: 0.85rem;
  z-index: 2;
  width: 2.25rem;
  height: 2.25rem;
  display: grid;
  place-items: center;
  border: 0;
  background: transparent;
  color: var(--qm-ink);
  cursor: pointer;
}
.qm__close:hover { color: var(--gold-ink); }
/* 2.55.00: the close button sits over the photo on phones, where a dark icon
   on a dark photo could not be seen. Give it its own cream disc. */
.qm__close {
  background: var(--qm-cream);
  border: 1px solid var(--qm-line);
  border-radius: 50%;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
}
.qm__grid {
  display: grid;
  grid-template-columns: minmax(16rem, 0.82fr) minmax(0, 1.18fr);
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
}
.qm__aside { background: var(--qm-tan); padding: 0 0 2rem; }
.qm__photo img,
.qm__photo picture { width: 100%; height: auto; display: block; }
.qm__aside-lead {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.6rem, 3vw, 2.15rem);
  line-height: 1.2;
  margin: 1.5rem 1.5rem 1.25rem;
  color: var(--qm-ink);
}
.qm__points {
  list-style: none;
  margin: 0 1.5rem;
  padding: 0;
  display: grid;
  gap: 1.1rem;
}
.qm__points li {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  font-size: 0.8125rem;
  line-height: 1.4;
  color: var(--qm-muted);
}
.qm__points svg { flex-shrink: 0; color: var(--qm-ink); margin-top: 0.1rem; }
.qm__points strong {
  display: block;
  color: var(--qm-ink);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 0.15rem;
}
.qm__main { padding: 2rem 1.75rem 1.5rem; }
.qm__secure {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  margin: 0 auto 1rem;
  padding-bottom: 0.85rem;
  width: 100%;
  border-bottom: 1px solid var(--gold);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--qm-ink);
}
.qm__title {
  font-family: var(--font-display);
  font-size: clamp(1.85rem, 3.2vw, 2.6rem);
  margin: 0 0 0.5rem;
  text-align: center;
  color: var(--qm-ink);
}
.qm__lede {
  margin: 0 auto 1.25rem;
  max-width: 46ch;
  text-align: center;
  font-size: 0.9375rem;
  color: var(--qm-muted);
}
.qm__thanks {
  text-align: center;
  padding: 1.5rem 0.5rem 2rem;
}
.qm__thanks-kicker {
  margin: 0 0 0.4rem;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--qm-ink);
}
.qm__thanks-title {
  font-family: var(--font-display);
  font-size: 2rem;
  margin: 0 0 0.75rem;
  /* 2.55.00: the global h3 colour is white, which vanished on the cream dialog. */
  color: var(--qm-ink);
}
.qm__thanks-title:focus { outline: none; }
.qm__thanks-title:focus-visible { outline: 2px solid var(--gold-ink); outline-offset: 4px; }
.qm__safe a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.qm__thanks-copy {
  margin: 0 auto 1.5rem;
  max-width: 42ch;
  color: var(--qm-muted);
}
.qm__status {
  margin: 0 0 1rem;
  padding: 0.75rem 1rem;
  border: 1px solid var(--qm-line);
  border-left: 2px solid var(--gold-ink);
  font-size: 0.875rem;
}
.qm__status.is-ok { border-left-color: var(--ok); }
.qm__status.is-error { border-left-color: #C8564B; }
.qm__step {
  display: flex;
  align-items: baseline;
  gap: 0.55rem;
  margin: 1.35rem 0 0.55rem;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--qm-ink);
}
.qm__step span { font-family: var(--font-display); font-size: 0.95rem; letter-spacing: 0; }
.qm__hint { margin: 0 0 0.7rem; font-size: 0.8125rem; color: var(--qm-muted); }
.qm__fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.85rem 1rem;
}
.qm__field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--qm-ink);
}
.qm__field--full { grid-column: 1 / -1; }
.qm__field em { color: #8A3B32; font-style: normal; }
.qm__field input,
.qm__field select,
.qm__field textarea {
  width: 100%;
  padding: 0.7rem 0.8rem;
  border: 1px solid var(--qm-line);
  background: #fff;
  color: var(--qm-ink);
  font-size: 0.9375rem;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
}
.qm__field textarea { min-height: 7.5rem; resize: vertical; }
.qm__field input:focus,
.qm__field select:focus,
.qm__field textarea:focus { outline: none; border-color: var(--qm-ink); }
.qm__checks {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.45rem 1rem;
  margin-bottom: 0.35rem;
}
@media (min-width: 1100px) {
  .qm__checks { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.qm__check {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9rem;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--qm-ink);
}
.qm__check input { width: auto; accent-color: var(--qm-ink); }
.qm__field-error { color: #8A3B32; font-size: 0.8rem; margin: 0.25rem 0 0; }
.qm__drop {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 6.5rem;
  padding: 1.1rem;
  border: 1px dashed #B7AFA3;
  background: #fff;
  color: var(--qm-muted);
  text-align: center;
  font-size: 0.875rem;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  cursor: pointer;
}
.qm__drop svg { color: var(--qm-ink); }
.qm__drop.is-over { border-color: var(--qm-ink); background: var(--qm-tan); }
.qm__drop input[type="file"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}
.qm__submit {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  margin-top: 1.35rem;
  padding: 0.95rem 1.25rem;
  border: 0;
  background: var(--qm-ink);
  color: #fff;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
}
.qm__submit:hover { background: #14261b; }
.qm__submit:disabled { opacity: 0.65; cursor: wait; }
.qm__safe {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  margin: 0.7rem 0 0;
  font-size: 0.75rem;
  color: var(--qm-muted);
}
.qm__trust {
  grid-column: 1 / -1;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0;
  padding: 1.6rem 1.5rem 1.7rem;
  background: var(--qm-cream);
  border-top: 1px solid var(--qm-line);
}
.qm__trust li {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.45rem;
  padding: 0.2rem 1rem;
  border-right: 1px solid var(--qm-line);
}
.qm__trust li:last-child { border-right: 0; }
.qm__trust svg { color: var(--qm-ink); margin-bottom: 0.3rem; }
.qm__trust strong {
  display: block;
  color: var(--qm-ink);
  font-family: var(--font-body, inherit);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.qm__trust span {
  font-family: var(--font-display);
  font-size: 0.9rem;
  line-height: 1.35;
  color: var(--qm-muted);
}
@media (max-width: 860px) {
  .qm { padding: 0; align-items: stretch; }
  .qm__dialog { max-height: 100vh; width: 100%; }
  .qm__grid { grid-template-columns: 1fr; }
  .qm__fields,
  .qm__checks { grid-template-columns: 1fr; }
  .qm__trust { grid-template-columns: 1fr 1fr; gap: 1.4rem 0; padding: 1.4rem 1rem 1.6rem; }
  .qm__trust li:nth-child(2n) { border-right: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .nl-modal,
  .nl-modal__dialog,
  .qm,
  .qm__dialog,
  .sticky-samples,
  .cookie-bar,
  .ngs-toast { transition: none; }
}

/* ==========================================================================
   Products listing (/products) and homepage four-up
   Equal tiles — Founder's Reserve | Triple-Extract, not a full-width last card.
   Photo height stays at the existing card crop (Ethel rejected enlarging).
   ========================================================================== */

@media (min-width: 721px) {
  .products.products-index,
  .products.products-home {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .products.products-index > .product:last-child,
  .products.products-home > .product:last-child {
    grid-column: auto;
    grid-template-columns: 0.85fr 1.15fr;
  }
}

@media (max-width: 720px) {
  .products.products-index,
  .products.products-home {
    grid-template-columns: 1fr;
  }
  .products.products-index > .product:last-child,
  .products.products-home > .product:last-child {
    grid-column: auto;
    grid-template-columns: 1fr;
  }
  .products.products-index > .product:last-child .product__media,
  .products.products-home > .product:last-child .product__media {
    height: 16rem;
  }
}

/* ==========================================================================
   Live chat — public widget (cream mock) + admin thread
   Sits under the quote popup (z 90) and above page chrome.
   ========================================================================== */

.lc {
  --lc-green: #141F16;
  --lc-gold: #ECD9B0;
  --lc-gold-soft: #D4C08A;
  --lc-cream: #EBE3D4;
  --lc-cream-bubble: #F4EDE3;
  --lc-ink: #1A2418;
  --lc-online: #3F9A48;
  --lc-bottom: calc(1.15rem + var(--cookie-h, 0px) + env(safe-area-inset-bottom, 0px));
  position: fixed;
  right: max(1.15rem, env(safe-area-inset-right, 0px));
  bottom: var(--lc-bottom);
  z-index: 68;
  font-family: var(--font-ui);
}
.lc__launch {
  position: relative;
  display: grid;
  place-items: center;
  width: 3.5rem;
  height: 3.5rem;
  border: 1px solid var(--gold);
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 30%, #E8C48A, var(--gold) 55%, #6A4520);
  color: #1A140C;
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.45), 0 0 0 6px rgba(191, 142, 85, 0.12);
  cursor: pointer;
}
.lc__launch:hover { filter: brightness(1.06); }
.lc__launch svg { display: block; }
.lc.is-open .lc__launch { display: none; }
.lc__launch.is-unread::after {
  content: "";
  position: absolute;
  top: 0.35rem;
  right: 0.35rem;
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: #E8C48A;
  box-shadow: 0 0 10px rgba(232, 196, 138, 0.9);
}
.lc__launch.is-unread::before {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 1px solid rgba(232, 196, 138, 0.85);
  animation: ngs-bell-ring 1.1s ease-out 3;
  pointer-events: none;
}
.lc__panel {
  position: absolute;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  width: min(22.5rem, calc(100vw - 2rem));
  height: min(34rem, calc(100dvh - 6rem));
  max-height: calc(100dvh - 2.5rem);
  background: var(--lc-cream);
  border: 1px solid #C4A46A;
  box-shadow: 0 28px 64px rgba(0, 0, 0, 0.48);
  overflow: hidden;
  color: var(--lc-ink);
}
.lc__panel[hidden],
.lc__ident[hidden],
.lc__intro[hidden],
.lc__log[hidden],
.lc__form[hidden],
.lc__idle[hidden],
.lc__callback[hidden],
.lc__idle-done[hidden] { display: none !important; }
.lc__head {
  position: relative;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  padding: 1.05rem 2.6rem 0.85rem;
  background: var(--lc-green);
  text-align: center;
}
.lc__brand { margin: 0; }
.lc__brand-name {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(0.78rem, 2.4vw, 0.95rem);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--lc-gold);
  line-height: 1.2;
}
.lc__brand-tag {
  margin: 0.28rem 0 0;
  font-size: 0.48rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--lc-gold);
}
.lc__close {
  position: absolute;
  top: 0.85rem;
  right: 0.85rem;
  display: grid;
  place-items: center;
  width: 1.85rem;
  height: 1.85rem;
  border: 0;
  background: transparent;
  color: var(--lc-gold);
  cursor: pointer;
}
.lc__close:hover { color: #F7EBD0; }
.lc__status {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  align-items: stretch;
  background: var(--lc-green);
}
.lc__status-live {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  padding: 0.7rem 0.85rem 0.75rem 1rem;
}
.lc__dot {
  flex: 0 0 auto;
  width: 0.55rem;
  height: 0.55rem;
  margin-top: 0.28rem;
  border-radius: 50%;
  background: #6B7460;
}
.lc.is-online .lc__dot {
  background: var(--lc-online);
  box-shadow: 0 0 0 3px rgba(63, 154, 72, 0.22);
}
.lc__status-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(0.72rem, 2.1vw, 0.84rem);
  font-style: italic;
  font-weight: 500;
  color: var(--lc-gold);
  line-height: 1.2;
}
.lc__status-sub {
  margin: 0.15rem 0 0;
  font-size: 0.68rem;
  line-height: 1.35;
  color: #D8D0C4;
}
.lc__status-range {
  margin: 0;
  padding: 0.55rem 0.9rem;
  font-family: var(--font-display);
  font-size: clamp(0.62rem, 1.9vw, 0.7rem);
  font-style: italic;
  font-weight: 400;
  line-height: 1.45;
  text-align: center;
  color: var(--lc-gold);
}
.lc__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.05rem 0.95rem 0.85rem;
  background: var(--lc-cream);
}
.lc__intro { margin: 0; }
.lc__log {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.lc__msg {
  display: flex;
  flex-direction: column;
  gap: 0;
  max-width: 84%;
}
.lc__msg--visitor {
  align-self: flex-end;
  align-items: flex-end;
}
.lc__msg--staff {
  flex-direction: row;
  align-self: flex-start;
  align-items: flex-start;
  gap: 0.55rem;
  max-width: 92%;
}
.lc__avatar {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 2.35rem;
  height: 2.35rem;
  margin-top: 0.15rem;
  border: 1.5px solid #C4A46A;
  border-radius: 50%;
  background: #F7F1E6;
  color: #C4A46A;
}
.lc__avatar svg {
  display: block;
  width: 1.2rem;
  height: 1.2rem;
  stroke-width: 1.8;
}
.lc__msg-col {
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.lc__bubble {
  position: relative;
  min-width: 0;
  overflow: visible;
  background-clip: padding-box;
}
.lc__bubble::after {
  content: "";
  position: absolute;
  pointer-events: none;
}
.lc__msg--visitor .lc__bubble {
  min-width: 7.5rem;
  padding: 0.78rem 1.15rem 0.88rem;
  background: var(--lc-green);
  color: #F4EDE3;
  border-radius: 1.05rem;
  border: 0;
  box-shadow: none;
}
.lc__msg--visitor .lc__bubble::after {
  right: 0.85rem;
  bottom: -0.38rem;
  width: 0.72rem;
  height: 0.48rem;
  background: var(--lc-green);
  clip-path: polygon(8% 0, 100% 0, 72% 100%);
}
.lc__msg--staff .lc__bubble {
  padding: 0.78rem 1.15rem 0.88rem;
  background: #F7F1E6;
  color: var(--lc-ink);
  border-radius: 1.05rem;
  border: 0;
  box-shadow: none;
}
.lc__msg--staff .lc__bubble::after {
  top: 0.55rem;
  left: -0.48rem;
  width: 0.52rem;
  height: 0.78rem;
  background: #F7F1E6;
  clip-path: polygon(100% 0, 100% 88%, 0 22%);
}
.lc__msg-who {
  margin: 0 0 0.28rem;
  padding: 0;
  border: 0;
  font-family: var(--font-ui);
  font-size: 0.58rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1.3;
}
.lc__msg--visitor .lc__msg-who { color: var(--lc-gold); }
.lc__msg--staff .lc__msg-who { color: #8D7344; }
.lc__msg-body {
  margin: 0;
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 400;
  line-height: 1.45;
  white-space: pre-wrap;
}
.lc__form {
  padding: 0.55rem 0.95rem 1rem;
  background: var(--lc-cream);
}
.lc__ident {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.45rem;
  margin-bottom: 0.55rem;
}
.lc__ident input {
  width: 100%;
  padding: 0.55rem 0.75rem;
  border: 1px solid rgba(20, 31, 22, 0.22);
  border-radius: 999px;
  background: var(--lc-cream-bubble);
  color: var(--lc-ink);
  font: inherit;
  font-size: 0.8125rem;
}
.lc__ident input:focus,
.lc__compose textarea:focus {
  outline: none;
}
.lc__ident input:focus {
  border-color: var(--lc-gold);
}
.lc__compose {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  padding: 0.15rem 0.2rem 0.15rem 1.05rem;
  border: 1.5px solid var(--lc-gold);
  border-radius: 999px;
  background: var(--lc-green);
}
.lc__compose textarea {
  width: 100%;
  min-height: 2.45rem;
  max-height: 6.5rem;
  padding: 0.55rem 0.4rem 0.55rem 0;
  border: 0;
  resize: none;
  background: transparent;
  color: #F4EDE3;
  font: inherit;
  font-size: 0.9rem;
  font-style: normal;
}
.lc__compose textarea::placeholder { color: #C4B496; font-style: italic; }
.lc__compose textarea:focus { outline: none; }
.lc__send {
  display: grid;
  place-items: center;
  width: 2.55rem;
  height: 2.55rem;
  border: 0;
  background: transparent;
  color: var(--lc-gold);
  cursor: pointer;
}
.lc__send:hover { color: #F7EBD0; }
.lc__send svg { display: block; }
.lc__err {
  margin: 0.45rem 0 0;
  font-size: 0.78rem;
  color: #9A3E32;
}
.lc__idle {
  padding: 0.95rem 1.1rem 1.1rem;
  background: var(--lc-cream);
  border-top: 1px solid rgba(20, 31, 22, 0.08);
}
.lc__idle-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--lc-ink);
}
.lc__idle-copy {
  margin: 0.4rem 0 0.85rem;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: #3A4538;
}
.lc__idle-new {
  display: block;
  width: 100%;
  margin-bottom: 0.7rem;
  padding: 0.62rem 0.9rem;
  border: 1.5px solid #C4A46A;
  background: transparent;
  color: #6B4F24;
  font: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-transform: none;
  cursor: pointer;
}
.lc__idle-new:hover,
.lc__idle-new:focus {
  background: transparent;
  border-color: var(--gold);
  color: var(--lc-ink);
}
.lc__callback {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.45rem;
}
.lc__callback input {
  width: 100%;
  padding: 0.55rem 0.7rem;
  border: 1px solid rgba(20, 31, 22, 0.22);
  border-radius: 999px;
  background: var(--lc-cream-bubble);
  color: var(--lc-ink);
  font: inherit;
  font-size: 0.875rem;
}
.lc__callback input:focus {
  outline: none;
  border-color: var(--lc-gold);
}
.lc__callback-send {
  padding: 0.55rem 0.75rem;
  border: 0;
  border-radius: 999px;
  background: var(--lc-green);
  color: var(--lc-gold);
  font: inherit;
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  white-space: nowrap;
}
.lc__callback-send:hover { filter: brightness(1.08); }
.lc__idle-done {
  margin: 0.7rem 0 0;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--lc-gold-soft);
}
body.lc-open { overflow: hidden; }

.admin-chat {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 18rem;
  gap: var(--s-7);
  align-items: start;
}
.admin-chat__thread {
  display: flex;
  flex-direction: column;
  min-height: 28rem;
  background: #121110;
  border: 1px solid rgba(191, 142, 85, 0.28);
}
.admin-chat__log {
  flex: 1 1 auto;
  min-height: 16rem;
  max-height: 28rem;
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  padding: 1.25rem;
}
.admin-chat__msg {
  max-width: 36rem;
  padding: 0.8rem 1rem;
  background: #1A1918;
  border: 1px solid var(--line);
}
.admin-chat__msg--staff {
  align-self: flex-end;
  background: rgba(191, 142, 85, 0.12);
  border-color: rgba(191, 142, 85, 0.4);
}
.admin-chat__who {
  display: flex;
  justify-content: space-between;
  gap: var(--s-4);
  margin: 0 0 0.35rem;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gold);
}
.admin-chat__who time { color: var(--text-muted); letter-spacing: 0; text-transform: none; }
.admin-chat__body {
  margin: 0;
  font-size: var(--step--1);
  line-height: 1.55;
  color: var(--text);
  white-space: pre-wrap;
}
.admin-chat__compose,
.admin-chat__reopen {
  padding: 1rem 1.25rem 1.2rem;
  border-top: 1px solid rgba(191, 142, 85, 0.18);
}
.admin-chat__compose textarea {
  width: 100%;
  margin-bottom: 0.75rem;
  padding: 0.7rem 0.85rem;
  border: 1px solid var(--line);
  background: #161514;
  color: var(--text);
  font: inherit;
  resize: vertical;
  min-height: 4.5rem;
}
.admin-chat__actions { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.admin-chat__err { margin: 0.6rem 0 0; color: #E08A7A; font-size: 0.8125rem; }
.admin-chat__closed {
  margin: 0;
  padding: 0.85rem 1.25rem;
  border-top: 1px solid var(--line);
  color: var(--text-muted);
  font-size: var(--step--1);
}
.admin-chat__closed[hidden] { display: none !important; }
.admin-chat__dl { margin: 0; display: grid; gap: 0.85rem; }
.admin-chat__dl div { margin: 0; }
.admin-chat__dl dt {
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.admin-chat__dl dd { margin: 0.2rem 0 0; color: var(--text); }

@media (max-width: 900px) {
  .admin-chat { grid-template-columns: 1fr; }
  .lc.is-open {
    left: max(1.25rem, env(safe-area-inset-left, 0px));
    right: max(1.25rem, env(safe-area-inset-right, 0px));
  }
  .lc__panel {
    left: 0;
    right: 0;
    width: auto;
    height: min(26.5rem, calc(100dvh - 9rem));
    max-height: calc(100dvh - 7.5rem);
  }
  .lc__head { padding: 0.9rem 2.4rem 0.7rem; }
  .lc__status-live { padding: 0.6rem 0.75rem 0.65rem 0.85rem; }
}
@media (max-width: 420px) {
  .lc__ident,
  .lc__callback { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .lc__launch { box-shadow: 0 14px 32px rgba(0, 0, 0, 0.45); }
  .lc__launch.is-unread::before,
  .topbar__btn.is-ring::before { animation: none; }
}

/* ==========================================================================
   Bill of lading
   Cream sheet, forest cargo heads, NG lockup — Ethel's three mockups.
   Print is A4, one page. Namespaced .bol so invoices stay untouched.
   ========================================================================== */

.bol-page {
  background: #fff;
  padding: var(--s-7) var(--gutter);
  min-height: 100vh;
}

/* White sheet on a white page — no dark site gutters around the paper. */
body.bol-print {
  background: #fff;
  color: #1a1a18;
}
body.bol-print::after {
  display: none;
}

.bol {
  --bol-paper: #FFFFFF;
  --bol-forest: #1A3224;
  --bol-ink: #1A1A18;
  --bol-muted: #4A4A45;
  --bol-gold: #9A8650;
  --bol-rule: #C4B48A;
  --bol-line: #1A3224;
  background: var(--bol-paper);
  color: var(--bol-ink);
  max-width: 210mm;
  margin: 0 auto;
  padding: 5mm 6mm 4mm;
  border: 1px solid #d8d0bf;
  font-family: "Times New Roman", Times, Georgia, serif;
  font-size: 6.85pt;
  line-height: 1.18;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}

.bol h1, .bol h2 { margin: 0; color: inherit; font-weight: 700; }

.bol__head {
  display: flex;
  justify-content: space-between;
  gap: 1.5rem;
  align-items: flex-start;
  padding-bottom: 0.32rem;
  border-bottom: 1px solid var(--bol-rule);
}

.bol__brand { text-align: left; max-width: 52%; }
.bol__logo { display: block; width: 5.9rem; height: auto; margin: 0 0 0.08rem; }
.bol__name {
  font-family: var(--font-display);
  font-size: 1.02rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bol-forest);
  line-height: 1.15;
  margin: 0;
}
.bol__locator {
  font-size: 0.52rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--bol-gold);
  margin: 0.18rem 0 0;
}
.bol__pitch {
  max-width: 17.4rem;
  text-align: right;
  font-size: 0.52rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--bol-muted);
  line-height: 1.5;
  padding-top: 0.15rem;
}
.bol__pitch p { margin: 0; }
.bol__region {
  margin-top: 0.55rem;
  letter-spacing: 0.28em;
  color: var(--bol-forest);
  font-weight: 700;
}

.bol__title-row {
  display: flex;
  justify-content: space-between;
  gap: 1.5rem;
  align-items: flex-end;
  padding: 0.38rem 0 0.32rem;
}
.bol__title {
  font-family: var(--font-display);
  font-size: 1.42rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  line-height: 0.95;
  color: var(--bol-ink);
}
.bol__mode {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #2C5F3A;
  margin: 0.18rem 0 0;
}
.bol__meta {
  margin: 0;
  display: grid;
  gap: 0.12rem 0.9rem;
  font-size: 0.68rem;
}
.bol__meta div { display: grid; grid-template-columns: auto auto; gap: 0 0.85rem; justify-content: end; }
.bol__meta dt { color: var(--bol-ink); font-weight: 700; }
.bol__meta dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; }

.bol__sheet,
.bol__cargo {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  margin: 0;
}
.bol__sheet td,
.bol__cargo th,
.bol__cargo td {
  border: 0.7pt solid var(--bol-line);
  vertical-align: top;
  padding: 0.16rem 0.35rem 0.18rem;
}
.bol__sheet--2 td { width: 50%; }
.bol__sheet--3 td { width: 33.33%; }
.bol__lbl {
  font-size: 0.54rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: 0 0 0.16rem;
  color: var(--bol-ink);
}
.bol__party-name { font-weight: 700; margin: 0 0 0.08rem; }
.bol__party-line { margin: 0; }
.bol__party-line span { font-weight: 700; }

.bol__cargo thead th {
  background: var(--bol-forest);
  color: #fff;
  font-size: 0.5rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align: center;
  padding: 0.2rem 0.22rem;
  line-height: 1.2;
  white-space: normal;
}
.bol__cargo td { font-size: 0.58rem; }
.bol__cargo th:nth-child(1), .bol__cargo td:nth-child(1) { width: 19%; text-align: left; }
.bol__cargo th:nth-child(2), .bol__cargo td:nth-child(2) { width: 10%; text-align: center; }
.bol__cargo th:nth-child(3), .bol__cargo td:nth-child(3) { width: 27%; text-align: left; }
.bol__cargo th:nth-child(4),
.bol__cargo th:nth-child(5) { width: 11%; }
.bol__cargo th:nth-child(6) { width: 11%; }
.bol__cargo th:nth-child(7) { width: 11%; }
.bol__marks { white-space: nowrap; line-height: 1.22; font-weight: 400; font-size: 0.6rem; letter-spacing: 0.01em; }
.bol__pkg { text-align: center; font-weight: 700; }
.bol__num { text-align: center; font-variant-numeric: tabular-nums; font-weight: 700; white-space: normal; }
.bol__cargo--container td { text-align: center; }
.bol__cargo--container th:nth-child(1), .bol__cargo--container td:nth-child(1),
.bol__cargo--container th:nth-child(2), .bol__cargo--container td:nth-child(2),
.bol__cargo--container th:nth-child(3), .bol__cargo--container td:nth-child(3),
.bol__cargo--container th:nth-child(4), .bol__cargo--container td:nth-child(4),
.bol__cargo--container th:nth-child(5), .bol__cargo--container td:nth-child(5) { width: 20%; }

.bol__extra { border-top: 0; }
.bol__extra td { border-top: 0; }
.bol__extra-head td {
  border-bottom: 0;
  padding-bottom: 0;
}
.bol__extra-head + tr td { padding-top: 0.12rem; }
.bol__extra h2,
.bol__remarks h2,
.bol__sign-block h2 {
  font-size: 0.54rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin: 0 0 0.28rem;
  font-family: "Times New Roman", Times, Georgia, serif;
}
.bol__facts { margin: 0; display: grid; gap: 0.08rem; }
.bol__fact {
  display: grid;
  grid-template-columns: 8.1rem 1fr;
  gap: 0.15rem 0.45rem;
  align-items: start;
}
.bol__fact dt { margin: 0; font-weight: 700; }
.bol__fact dd { margin: 0; }

.bol__tail {
  display: grid;
  grid-template-columns: 1.25fr 1fr 7.2rem;
  gap: 0;
  align-items: stretch;
  border: 0.7pt solid var(--bol-line);
  border-top: 0;
}
.bol__remarks,
.bol__sign-block,
.bol__stamp {
  padding: 0.28rem 0.4rem 0.32rem;
}
.bol__remarks { border-right: 0.7pt solid var(--bol-line); }
.bol__sign-block { border-right: 0.7pt solid var(--bol-line); }
.bol__notes {
  margin: 0;
  padding: 0 0 0 1.2rem;
  list-style: decimal;
  list-style-position: outside;
}
.bol__notes li {
  margin: 0 0 0.16rem;
  padding: 0 0 0 0.2rem;
  text-align: left;
}
.bol__sign {
  display: block;
  height: 1.7rem;
  width: auto;
  max-width: 8.2rem;
  margin: 0.1rem 0 0.08rem;
  object-fit: contain;
  object-position: left center;
}
.bol__sign-line {
  border-bottom: 0.7pt solid var(--bol-ink);
  height: 0;
  margin: 0 0 0.2rem;
  max-width: 10rem;
}
.bol__sign-label { font-weight: 700; margin: 0; font-size: 0.62rem; }
.bol__sign-co { margin: 0; font-size: 0.62rem; }
.bol__stamp { text-align: center; }
.bol__stamp img { width: 4.6rem; height: auto; display: block; margin: 0 auto 0.12rem; }
.bol__stamp p {
  font-size: 0.42rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--bol-forest);
  line-height: 1.35;
  margin: 0;
}

.bol__foot {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: nowrap;
  gap: 0.45rem 0.7rem;
  width: 100%;
  box-sizing: border-box;
  margin-top: 0.45rem;
  padding: 0.32rem 0 0;
  border-top: 0.7pt solid var(--bol-line);
  text-align: center;
  font-size: 0.4rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--bol-muted);
  white-space: nowrap;
}
.bol__foot span + span::before {
  content: "|";
  margin-right: 0.7rem;
  color: var(--bol-muted);
}

.bol-actions {
  max-width: 210mm;
  margin: 0 auto var(--s-5);
  display: flex;
  gap: var(--s-4);
  align-items: center;
  flex-wrap: wrap;
}

/* White B/L page: ghost buttons were cream-on-white until hover. */
body.bol-print .bol-actions .btn--ghost {
  color: #1a1a18;
  border-color: #1A3224;
  background: #fff;
}
body.bol-print .bol-actions .btn--ghost:hover,
body.bol-print .bol-actions .btn--ghost:focus,
body.bol-print .bol-actions .btn--ghost:focus-visible,
body.bol-print .bol-actions .btn--ghost:active {
  color: #fff;
  background: #1A3224;
  border-color: #1A3224;
}

.form--bol textarea { min-height: 5.5rem; }

.bol-signpad {
  margin-top: var(--s-8);
  padding: 1.25rem 1.3rem 1.35rem;
  background: #16191c;
  color: #f3ead8;
  border: 1px solid rgba(191, 142, 85, 0.28);
}
.bol-signpad h2 {
  font-family: var(--font-display);
  font-size: 1.05rem;
  color: #f3ead8;
  margin: 0 0 0.4rem;
}
.bol-signpad > p {
  margin: 0 0 1rem;
  max-width: 62ch;
  font-size: var(--step--1);
  color: rgba(243, 234, 216, 0.78);
}
.bol-signpad__err { color: #e8b4b4; margin: 0 0 0.85rem; }
.bol-signpad__now {
  margin: 0 0 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid rgba(191, 142, 85, 0.22);
}
.bol-signpad__lbl {
  display: block;
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #bf8e55;
  margin: 0 0 0.4rem;
}
.bol-signpad__now img {
  height: 2.2rem;
  width: auto;
  max-width: 10rem;
  object-fit: contain;
  background: #fff;
  padding: 0.25rem 0.5rem;
}
.bol-signpad__meta {
  margin: 0.4rem 0 0;
  font-size: 0.78rem;
  color: rgba(243, 234, 216, 0.7);
}
.bol-signpad__canvas {
  display: block;
  width: 100%;
  max-width: 28rem;
  height: 8.6rem;
  background: #fff;
  cursor: crosshair;
  touch-action: none;
  border: 1px solid #bf8e55;
}
.bol-signpad__tools {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem 1.25rem;
  align-items: center;
  margin-top: 0.85rem;
}
.bol-signpad__file span {
  display: block;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #bf8e55;
  margin-bottom: 0.3rem;
}
.bol-signpad__file input { display: block; max-width: 22rem; }
.bol-signpad__revert {
  display: flex;
  gap: 0.55rem;
  align-items: flex-start;
  margin-top: 1rem;
  font-size: var(--step--1);
  color: rgba(243, 234, 216, 0.82);
}
.bol-signpad__revert input { margin-top: 0.2rem; }

.bol-kits {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-4);
  margin: 0 0 var(--s-8);
}
.bol-kit {
  background: #16191c;
  border: 1px solid rgba(191, 142, 85, 0.28);
  padding: 1.1rem 1.15rem 1.15rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.bol-kit h2 {
  font-family: var(--font-display);
  font-size: 1.05rem;
  color: #f3ead8;
  margin: 0;
}
.bol-kit__ref { font-size: 0.78rem; color: #bf8e55; letter-spacing: 0.04em; margin: 0; }
.bol-kit__actions { display: flex; gap: 0.85rem; margin-top: 0.55rem; }

@media (max-width: 720px) {
  .bol { padding: 1.1rem; font-size: 0.78rem; }
  .bol__head, .bol__title-row, .bol__tail, .bol-kits { display: block; }
  .bol__pitch, .bol__meta { text-align: left; margin-top: 0.75rem; }
  .bol__meta div { justify-content: start; }
  .bol__cargo { display: block; overflow-x: auto; }
  .bol__stamp { margin-top: 0.75rem; }
  .bol__remarks, .bol__sign-block { border-right: 0; border-bottom: 0.7pt solid var(--bol-line); }
}

@media print {
  .skip-link, .bol-actions, .header, .footer, .side-nav, .shell__nav, .tick,
  .lc, #ngs-livechat, .cookie, body::after {
    display: none !important;
  }
  html, body, .bol-page {
    background: #fff !important;
    padding: 0 !important;
    margin: 0 !important;
    min-height: 0 !important;
    height: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: clip !important;
    overflow-y: visible !important;
  }
  /* Chrome Default margins clip a 100% table’s right rule. Extra side
     margin keeps the outer border on the sheet. */
  @page { size: A4 portrait; margin: 8mm 14mm; }
  .bol {
    max-width: 100% !important;
    width: 100% !important;
    margin: 0;
    border: 0;
    padding: 0;
    box-sizing: border-box !important;
    box-shadow: none;
    background: #fff !important;
    font-size: 6.5pt;
    line-height: 1.14;
    overflow: visible;
    min-width: 0;
  }
  .bol table,
  .bol__tail {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0;
    box-sizing: border-box !important;
  }
  .bol__head, .bol__title-row {
    display: flex !important;
  }
  .bol__tail {
    display: grid !important;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) minmax(5.2rem, 6.4rem);
  }
  .bol__logo { width: 5.2rem; }
  .bol__title { font-size: 1.28rem; }
  .bol__mode { color: #2C5F3A !important; }
  .bol__stamp img { width: 4.2rem; }
  .bol__sign { height: 1.55rem; }
  .bol__foot {
    display: flex !important;
    justify-content: center;
    flex-wrap: wrap;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    font-size: 5.2pt;
    letter-spacing: 0.04em;
    white-space: normal;
  }
}

/* ==========================================================================
   Proforma invoice (2.54.03 rebuild). Clone of Ethel's reference paper:
   cream sheet, dark green ink and bars, serif type, one A4 page.
   Everything is scoped to .pinv / body.pinv-print so the B/L (.bol) and
   the old .invdoc receipt are untouched. Sizes are in mm/pt so the screen
   copy and the printed page are the same layout.
   ========================================================================== */

body.pinv-print,
body.pinv-print .invdoc-page {
  background: #DCDBD0;
  color: #1a1a18;
}
body.pinv-print::after { display: none; }
body.pinv-print .invdoc-page { padding: 1.5rem 1rem 2.5rem; }
body.pinv-print .invdoc-actions { max-width: 210mm; }

.pinv {
  --pinv-paper: #F3F1E4;
  --pinv-green: #1F4D36;
  --pinv-bar: #0F3F2A;
  --pinv-title: #0E2A1D;
  --pinv-ink: #22342B;
  --pinv-line: #3F6A53;
  --pinv-cream: #F3F1E4;
  --pinv-serif: "Libre Caslon Text", "Libre Caslon", "Iowan Old Style", Georgia, "Times New Roman", serif;
  width: 210mm;
  max-width: 100%;
  min-height: 297mm;
  margin: 0 auto;
  padding: 5mm 11mm 3.5mm;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  box-sizing: border-box;
  background: var(--pinv-paper);
  color: var(--pinv-ink);
  border: 1px solid var(--pinv-green);
  font-family: var(--pinv-serif);
  font-size: 7.1pt;
  line-height: 1.3;
  letter-spacing: 0;
  text-align: left;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}
.pinv *, .pinv *::before, .pinv *::after { box-sizing: border-box; }
.pinv p, .pinv h1, .pinv h2, .pinv dl, .pinv dd, .pinv ol { margin: 0; }
.pinv h1, .pinv h2 { font-family: var(--pinv-serif); color: inherit; }

/* ---- Header -------------------------------------------------------- */
.pinv__head {
  display: grid;
  grid-template-columns: 52% 48%;
  align-items: start;
  padding-bottom: 2.9mm;
  border-bottom: 0.6pt solid var(--pinv-line);
}
.pinv__brand { text-align: center; }
.pinv__logo {
  display: block;
  width: 24mm;
  height: auto;
  margin: 0 auto 2mm;
}
.pinv__name {
  font-size: 18.4pt;
  line-height: 1;
  font-weight: 400;
  letter-spacing: 0.035em;
  text-transform: uppercase;
  color: var(--pinv-title);
  white-space: nowrap;
  -webkit-text-stroke: 0.2pt currentColor;
}
.pinv__locator {
  margin-top: 2.2mm !important;
  font-size: 6.9pt;
  line-height: 1;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--pinv-green);
  -webkit-text-stroke: 0.15pt currentColor;
}
.pinv__pitch {
  text-align: center;
  padding-top: 3.4mm;
  color: var(--pinv-green);
}
.pinv__pitch-copy {
  font-style: italic;
  font-size: 6.3pt;
  line-height: 1.78;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  -webkit-text-stroke: 0.1pt currentColor;
}
.pinv__pitch-rule {
  display: block;
  width: 36mm;
  margin: 4.4mm auto 3.6mm;
  border-top: 0.6pt solid var(--pinv-green);
}
.pinv__region {
  font-size: 6.9pt;
  line-height: 1;
  letter-spacing: 0.3em;
  word-spacing: 0.7em;
  text-transform: uppercase;
  color: var(--pinv-title);
  -webkit-text-stroke: 0.1pt currentColor;
}

/* ---- Title row ----------------------------------------------------- */
.pinv__title-row {
  display: grid;
  grid-template-columns: 56% 44%;
  align-items: start;
  padding: 2.6mm 0 3mm;
}
.pinv__title {
  font-size: 21pt;
  line-height: 1;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--pinv-title);
  white-space: nowrap;
}
.pinv__product {
  margin-top: 1.3mm !important;
  font-size: 10.4pt;
  line-height: 1.1;
  letter-spacing: 0.27em;
  text-transform: uppercase;
  color: var(--pinv-green);
  -webkit-text-stroke: 0.2pt currentColor;
}
.pinv__meta {
  display: grid;
  gap: 0.2mm;
  padding-top: 1mm;
  font-size: 8pt;
  line-height: 1.3;
}
.pinv__meta div { display: grid; grid-template-columns: 33mm 1fr; }
.pinv__meta dt { font-weight: 700; color: var(--pinv-title); }
.pinv__meta dd { color: var(--pinv-ink); }

/* ---- Bordered grid ------------------------------------------------- */
.pinv__box {
  border: 0.6pt solid var(--pinv-line);
}
.pinv__row { display: grid; }
.pinv__row + .pinv__row { border-top: 0.6pt solid var(--pinv-line); }
.pinv__row--2 { grid-template-columns: 50.1% 49.9%; }
.pinv__row--3 { grid-template-columns: 32.8% 34.8% 32.4%; }
.pinv__row--4 { grid-template-columns: 32.8% 34.8% 16.9% 15.5%; }
.pinv__row--info { grid-template-columns: 47.4% 52.6%; }
.pinv__row--tail { grid-template-columns: 47.4% 23.6% 29%; }
.pinv__cell {
  padding: 1.7mm 2.8mm 2.6mm;
  min-width: 0;
  line-height: 1.38;
}
.pinv__cell + .pinv__cell { border-left: 0.6pt solid var(--pinv-line); }
.pinv__lbl {
  font-size: 6.9pt;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--pinv-title);
  margin-bottom: 0.9mm !important;
}
.pinv__party-name { font-weight: 700; color: var(--pinv-title); }
.pinv__val { color: var(--pinv-ink); }
.pinv__val--strong { font-weight: 700; color: var(--pinv-title); }
.pinv__row--2 .pinv__cell { padding-bottom: 3mm; }

/* ---- Goods + cargo tables ------------------------------------------ */
.pinv__lines,
.pinv__cargo {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  margin-top: 2.2mm;
}
.pinv__cargo { margin-top: 1.8mm; }
.pinv__lines th,
.pinv__lines td,
.pinv__cargo th,
.pinv__cargo td {
  border: 0.6pt solid var(--pinv-line);
  vertical-align: top;
  padding: 1.6mm 2mm;
  text-align: left;
}
.pinv__lines thead th,
.pinv__cargo thead th {
  background: var(--pinv-bar);
  color: var(--pinv-cream);
  border-color: var(--pinv-bar);
  border-left-color: rgba(243, 241, 228, 0.55);
  border-right-color: rgba(243, 241, 228, 0.55);
  font-size: 5.9pt;
  line-height: 1.25;
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-align: center;
  vertical-align: middle;
}
.pinv__lines thead th:first-child,
.pinv__cargo thead th:first-child { border-left-color: var(--pinv-bar); }
.pinv__lines thead th:last-child,
.pinv__cargo thead th:last-child { border-right-color: var(--pinv-bar); }
.pinv__lines thead th { height: 9mm; padding: 0.8mm 1.2mm; }
.pinv__cargo thead th { height: 7.6mm; padding: 0.6mm 0.8mm; font-size: 5.4pt; letter-spacing: 0.01em; }
.pinv__cargo thead th small { font-size: 4.1pt; letter-spacing: 0.04em; }
.pinv__lines tbody td { padding: 2mm 2.2mm 2.6mm; font-size: 6.6pt; line-height: 1.36; }
.pinv__lines tbody td.pinv__desc { font-size: 6.5pt; }
.pinv__good-title { font-size: 7pt; }
.pinv__lines tbody tr:first-child td { height: 25mm; }
.pinv__lines tbody tr + tr td { height: auto; }
.pinv__lines th:nth-child(1) { width: 6.4%; }
.pinv__lines th:nth-child(2) { width: 34.2%; }
.pinv__lines th:nth-child(3) { width: 15.1%; }
.pinv__lines th:nth-child(4) { width: 16.2%; }
.pinv__lines th:nth-child(5) { width: 13.7%; }
.pinv__lines th:nth-child(6) { width: 14.4%; }
.pinv__desc { padding-left: 3.6mm !important; }
.pinv__good-title { font-weight: 700; color: var(--pinv-title); }
.pinv__good-spec { margin: 0; }
.pinv__c { text-align: center !important; }
.pinv__lines tfoot td {
  padding: 1.1mm 2.2mm;
  font-size: 6.6pt;
  line-height: 1.3;
  text-align: right;
  color: var(--pinv-ink);
}
.pinv__lines tfoot strong,
.pinv__lines tfoot .pinv__sum-total { font-weight: 700; color: var(--pinv-title); }

.pinv__cargo th:nth-child(1) { width: 19.3%; }
.pinv__cargo th:nth-child(2) { width: 14.4%; }
.pinv__cargo th:nth-child(3) { width: 23.6%; }
.pinv__cargo th:nth-child(4) { width: 10.1%; }
.pinv__cargo th:nth-child(5) { width: 10.7%; }
.pinv__cargo th:nth-child(6) { width: 11.3%; }
.pinv__cargo th:nth-child(7) { width: 10.6%; }
.pinv__cargo tbody td { font-size: 6.3pt; line-height: 1.34; padding: 2.4mm 1.4mm 2.4mm; height: 11.6mm; }
.pinv__cargo tbody td.pinv__marks { font-size: 7.3pt; padding-left: 3.4mm; padding-top: 2.2mm; }

/* Compact: more goods lines or a totals row. Same look, tighter rhythm. */
.pinv--compact .pinv__cell:not(.pinv__cell--flush) { padding: 1.3mm 2.8mm 1.8mm; line-height: 1.28; }
.pinv--compact .pinv__row--2 .pinv__cell { padding-bottom: 2mm; }
.pinv--compact .pinv__lines tbody tr:first-child td { height: auto; }
.pinv--compact .pinv__lines tbody td { padding-bottom: 2mm; }
.pinv--compact .pinv__sub-body { padding-bottom: 1.8mm; }

/* The info box sits flush under the cargo table, sharing its bottom rule. */
.pinv__box--join { border-top: 0; }

/* ---- Additional information / terms -------------------------------- */
.pinv__cell--flush { padding: 0; }
.pinv__sub {
  font-size: 6.5pt;
  line-height: 1;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--pinv-title);
  padding: 2mm 3.4mm 1.7mm;
  border-bottom: 0.6pt solid var(--pinv-line);
}
.pinv__sub-body { padding: 1.8mm 3.4mm 2.4mm; }
.pinv__facts { display: grid; gap: 0; font-size: 6.2pt; line-height: 1.45; }
.pinv__fact { display: grid; grid-template-columns: 24.6mm 1fr; column-gap: 0.8mm; }
.pinv__fact dt { font-weight: 700; color: var(--pinv-title); }
.pinv__fact dd { color: var(--pinv-ink); }
.pinv__fact--plain { grid-template-columns: 1fr; }

/* ---- Remarks / signature / stamp ------------------------------------ */
.pinv__row--tail .pinv__cell { padding: 2.2mm 3.4mm 2mm; }
.pinv__h {
  font-size: 6.8pt;
  line-height: 1;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--pinv-title);
  margin: 0.8mm 0 2.4mm !important;
}
.pinv__notes {
  margin: 0;
  padding-left: 3.6mm !important;
  list-style: decimal outside !important;
  font-size: 5.8pt;
  line-height: 1.4;
}
.pinv__notes li { list-style: inherit; margin: 0 0 1.3mm; padding-left: 0.8mm; }
.pinv__notes strong { font-weight: 700; color: var(--pinv-title); }
.pinv__sign-block .pinv__lbl { font-size: 5.8pt; line-height: 1.3; margin-bottom: 0 !important; }
.pinv__sign-wrap { height: 11.4mm; position: relative; }
.pinv__sign {
  position: absolute;
  left: 0;
  bottom: -2.4mm;
  width: 24mm;
  height: auto;
}
.pinv__sign-line {
  width: 36mm;
  max-width: 100%;
  border-bottom: 0.6pt solid var(--pinv-title);
  margin: 0 0 3.2mm !important;
}
.pinv__sign-label { font-weight: 700; color: var(--pinv-title); font-size: 6.2pt; line-height: 1.3; }
.pinv__sign-block .pinv__val { font-size: 6.2pt; line-height: 1.3; }
.pinv__stamp { text-align: center; }
.pinv__row--tail .pinv__stamp { padding-top: 0.6mm; padding-bottom: 1mm; }
.pinv__stamp img { display: block; width: 24mm; height: auto; margin: 0 auto 0.6mm; }
.pinv__stamp p {
  font-style: italic;
  font-size: 5.6pt;
  line-height: 1.45;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--pinv-green);
}

/* ---- Footer strip (outside the box) --------------------------------- */
.pinv__foot {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: nowrap;
  gap: 0 3.4mm;
  margin-top: 2.8mm;
  padding: 0 1mm;
  font-size: 6.3pt;
  line-height: 1;
  letter-spacing: 0.01em;
  color: var(--pinv-ink);
}
.pinv__foot span { display: inline-flex; align-items: center; gap: 2.2mm; white-space: nowrap; }
.pinv__foot span b { font-weight: 400; margin: 0 1.2mm; }
.pinv__foot svg { flex-shrink: 0; width: 3.9mm; height: 3.9mm; color: var(--pinv-title); }
.pinv__foot .pinv__ico-fill path { fill: currentColor; }
.pinv__foot .pinv__ico-fill circle { fill: var(--pinv-paper); stroke: var(--pinv-paper); }
.pinv__foot-sep {
  display: inline-block;
  width: 0;
  height: 3.6mm;
  border-left: 0.6pt solid var(--pinv-ink);
  margin: 0 1.4mm;
}

body.pinv-print .invdoc-actions .btn--ghost {
  color: #1a1a18;
  border-color: #1F4D36;
  background: #F3F1E4;
}

.pinv-lines-edit textarea { min-height: 5.2rem; font-size: 0.85rem; }

@media (max-width: 820px) {
  body.pinv-print .invdoc-page { overflow-x: auto; }
  .pinv { max-width: none; }
}

@media print {
  body.pinv-print .skip-link,
  body.pinv-print .invdoc-actions,
  body.pinv-print .header,
  body.pinv-print .footer,
  body.pinv-print .lc,
  body.pinv-print #ngs-livechat,
  body.pinv-print .tick {
    display: none !important;
  }
  /* Page box, sheet height and colour adjust: see the 2.56.01 block below. */
  body.pinv-print .pinv {
    width: 210mm !important;
    max-width: 210mm !important;
    margin: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
    overflow: visible;
    page-break-after: avoid;
    break-after: avoid;
  }
  body.pinv-print .pinv__lines thead th,
  body.pinv-print .pinv__cargo thead th {
    background: #0F3F2A !important;
    color: #F3F1E4 !important;
  }
  body.pinv-print .pinv__locator,
  body.pinv-print .pinv__pitch,
  body.pinv-print .pinv__product,
  body.pinv-print .pinv__stamp p { color: #1F4D36 !important; }
  body.pinv-print .pinv__lines tr,
  body.pinv-print .pinv__cargo tr { break-inside: avoid; page-break-inside: avoid; }
}

/* ------------------------------------------------------------------ */
/* 2.53.94 — Quality Snapshot icon layout (VELO-style)                */
/* ------------------------------------------------------------------ */
.admin-card--qs {
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.admin-qs__head {
  margin-bottom: 0.85rem;
}
.admin-qs {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  gap: 1rem;
}
/* Quality Snapshot: shared row tracks so icon/label/value/status align across columns
   even when a label wraps (e.g. Vanillin Content). Subgrid + identical icon box. */
.admin-qs__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: 3.15rem minmax(1.5rem, auto) auto auto;
  column-gap: 0;
  row-gap: 0.35rem;
  align-items: stretch;
  flex: 1 1 auto;
}
.admin-qs__col {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 4;
  justify-items: center;
  align-items: start;
  text-align: center;
  padding: 0.35rem 0.55rem;
  position: relative;
}
.admin-qs__col + .admin-qs__col::before {
  content: '';
  position: absolute;
  left: 0;
  top: 12%;
  bottom: 12%;
  width: 1px;
  background: rgba(191, 142, 85, 0.28);
}
.admin-qs__icon {
  display: grid;
  place-items: center;
  place-self: center;
  box-sizing: border-box;
  width: 3rem;
  height: 3rem;
  min-width: 3rem;
  min-height: 3rem;
  border-radius: 50%;
  border: 1px solid var(--gold);
  color: var(--gold);
  margin: 0;
}
.admin-qs__icon svg {
  display: block;
  width: 1.25rem;
  height: 1.25rem;
}
.admin-qs__label {
  font-size: 0.625rem;
  letter-spacing: 0.08em;
  text-transform: none;
  color: rgba(255, 255, 255, 0.62);
  line-height: 1.2;
  align-self: center;
  max-width: 100%;
}
.admin-qs__value {
  font-family: var(--font-display);
  font-size: clamp(0.95rem, 1.15vw, 1.05rem);
  font-weight: 700;
  color: #fff;
  line-height: 1.15;
  word-break: break-word;
  align-self: center;
}
.admin-qs__status {
  font-size: 0.6875rem;
  color: rgba(255, 255, 255, 0.45);
  line-height: 1.2;
  align-self: center;
}
@supports not (grid-template-rows: subgrid) {
  .admin-qs__col {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    grid-row: auto;
  }
  .admin-qs__label {
    min-height: 2.4em;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
.admin-qs__status--ok {
  color: var(--ok);
}
.admin-qs__foot {
  margin-top: auto;
  padding-top: 0.25rem;
}
.admin-qs__foot .btn {
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.625rem;
  font-weight: 600;
}

/* Sales period select — mock-like gold ghost dropdown */
.admin-sales__range-form {
  margin: 0;
}
.admin-sales__range {
  appearance: none;
  -webkit-appearance: none;
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold);
  border: 1px solid rgba(191, 142, 85, 0.55);
  padding: 0.4rem 1.85rem 0.4rem 0.75rem;
  border-radius: 2px;
  background-color: transparent;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%23BF8E55' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.55rem center;
  background-size: 0.65rem;
  cursor: pointer;
  line-height: 1.2;
}
.admin-sales__range:hover,
.admin-sales__range:focus {
  border-color: var(--gold-hi, #D3A369);
  color: var(--gold-hi, #D3A369);
  outline: none;
  background-color: rgba(191, 142, 85, 0.08);
}
.admin-sales__range option {
  color: #1a1a1a;
  background: #fff;
  text-transform: none;
  letter-spacing: 0;
}

/* Top Products / Recent Orders — match mock table chrome */
.shell--admin .table--top-products thead th,
.shell--admin .table--orders-dash thead th {
  font-size: 0.5625rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 600;
  border-bottom: 1px solid rgba(191, 142, 85, 0.28);
}
.shell--admin .table--orders-dash__qty {
  font-weight: 700;
  color: #fff;
}
.shell--admin .admin-card__more--footer {
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.625rem;
  color: var(--gold);
  margin-top: 0.85rem;
}

@media (max-width: 720px) {
  .admin-qs__grid {
    grid-template-columns: 1fr 1fr;
  }
  .admin-qs__col:nth-child(2n+1)::before {
    display: none;
  }
  .admin-qs__col:nth-child(n+3) {
    margin-top: 0.65rem;
    padding-top: 0.65rem;
    border-top: 1px solid rgba(191, 142, 85, 0.18);
  }
}
@media (max-width: 480px) {
  .admin-qs__grid {
    grid-template-columns: 1fr;
  }
  .admin-qs__col + .admin-qs__col::before {
    display: none;
  }
  .admin-qs__col + .admin-qs__col {
    margin-top: 0.5rem;
    padding-top: 0.65rem;
    border-top: 1px solid rgba(191, 142, 85, 0.18);
  }
  .admin-qs__icon {
    width: 3rem;
    height: 3rem;
    min-width: 3rem;
    min-height: 3rem;
  }
}


/* ==========================================================================
   2.53.95 — admin scroll performance
   The fixed SVG feTurbulence grain (body::after) and sticky header
   backdrop-filter force expensive compositing on every scroll frame on the
   dense admin dashboard. Smooth scroll on html also feels like buffering.
   Scope the relief to admin only so the marketing site keeps its look.
   ========================================================================== */
html:has(.shell--admin) {
  scroll-behavior: auto;
}
body:has(.shell--admin) {
  text-rendering: auto;
}
body:has(.shell--admin)::after {
  display: none;
}
body:has(.shell--admin) .header {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  background: #0e0f10;
}
body:has(.shell--admin) .tick__track {
  animation-play-state: paused;
}
.shell--admin .wmap svg {
  /* drop-shadow filters on arcs/pins re-paint while the page scrolls */
  filter: none;
}
.shell--admin .wmap__arc,
.shell--admin .wmap__arc--live,
.shell--admin .wmap__pin {
  filter: none;
}
/* 2.55.00: content-visibility:auto removed from .admin-card, .admin-kpis and
   .admin-grid. It was nested (grid and card both skipped), so a card below the
   fold kept its 240px placeholder and painted nothing: the dashboard and
   Analytics lower panels (charts, map, tables) showed as empty boxes in
   full-page captures, print and some scroll paths. The saving was small. */
.shell--admin .admin-grid--lot-activity .admin-activity,
.shell--admin .admin-grid--sales-activity .admin-activity {
  /* keep nested list from chaining wheel events into sticky page hitch */
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}


/* ==========================================================================
   2.53.96 activity feed restyle
   Typed Recent Activity rows: icon bubble, title + muted description, relative
   time on the right, terracotta View all activity footer. Keeps 2.53.95 scroll
   performance (no body grain / header blur restored on admin).
   ========================================================================== */
.shell--admin .admin-card--activity {
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.shell--admin .admin-activity {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  flex: 1 1 auto;
  min-height: 0;
  max-height: 16rem;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.shell--admin .admin-activity__row {
  margin: 0;
  padding: 0;
  display: block;
}
.shell--admin .admin-activity__link {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 0.7rem;
  align-items: start;
  padding: 0.55rem 0.15rem;
  text-decoration: none;
  color: inherit;
  border-radius: 0.35rem;
  transition: background 0.15s ease;
}
.shell--admin a.admin-activity__link:hover {
  background: rgba(191, 142, 85, 0.06);
}
.shell--admin .admin-activity__icon {
  width: 1.85rem;
  height: 1.85rem;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(191, 142, 85, 0.22);
  color: rgba(232, 220, 200, 0.78);
}
.shell--admin .admin-activity__icon svg {
  display: block;
}
.shell--admin .admin-activity__icon--payment {
  color: var(--ok, #4E9A6B);
  border-color: rgba(78, 154, 107, 0.35);
  background: rgba(78, 154, 107, 0.08);
}
.shell--admin .admin-activity__icon--quality {
  color: rgba(232, 220, 200, 0.85);
}
.shell--admin .admin-activity__body {
  display: flex;
  flex-direction: column;
  gap: 0.12rem;
  min-width: 0;
  padding-top: 0.1rem;
}
.shell--admin .admin-activity__title {
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.25;
  color: rgba(245, 240, 232, 0.96);
  letter-spacing: 0.01em;
}
.shell--admin .admin-activity__desc {
  font-size: 0.6875rem;
  line-height: 1.35;
  color: var(--text-muted, rgba(200, 190, 175, 0.62));
}
.shell--admin .admin-activity__time {
  display: block;
  margin: 0;
  padding-top: 0.2rem;
  font-size: 0.625rem;
  letter-spacing: 0.04em;
  text-transform: none;
  color: var(--text-muted, rgba(200, 190, 175, 0.55));
  white-space: nowrap;
  justify-self: end;
}
.shell--admin .admin-activity__foot {
  margin-top: 0.65rem;
  padding-top: 0.55rem;
  border-top: 1px solid rgba(191, 142, 85, 0.16);
  display: flex;
  justify-content: flex-start;
}
.shell--admin .admin-activity__all {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold, #BF8E55);
  gap: 0.35rem;
}
.shell--admin .admin-activity__all:hover {
  color: var(--gold-hi, #D3A369);
}

/* ------------------------------------------------------------------ */
/* 2.54.03 - Order status pills: one distinct colour per status        */
/* Outline pill (border + text + faint tint) on the dark admin theme.  */
/* Classes come from order_status_pill() in app/commerce.php.          */
/* ------------------------------------------------------------------ */
.pill--os { background: transparent; }
.pill--os-pending    { color: #9AA0A6; border-color: rgba(154, 160, 166, 0.55); background: rgba(154, 160, 166, 0.08); }
.pill--os-confirmed  { color: #5DADE2; border-color: rgba(93, 173, 226, 0.55);  background: rgba(93, 173, 226, 0.08); }
.pill--os-processing { color: #A78BFA; border-color: rgba(167, 139, 250, 0.55); background: rgba(167, 139, 250, 0.09); }
.pill--os-transit    { color: #E0A84F; border-color: rgba(224, 168, 79, 0.55);  background: rgba(224, 168, 79, 0.08); }
.pill--os-shipped    { color: #2EC4B6; border-color: rgba(46, 196, 182, 0.55);  background: rgba(46, 196, 182, 0.08); }
.pill--os-delivered  { color: #6FCF73; border-color: rgba(111, 207, 115, 0.55); background: rgba(111, 207, 115, 0.08); }
.pill--os-cancelled  { color: #E5736A; border-color: rgba(229, 115, 106, 0.55); background: rgba(229, 115, 106, 0.08); }
.pill--os-other      { color: #F28AB2; border-color: rgba(242, 138, 178, 0.55); background: rgba(242, 138, 178, 0.08); }

/* ------------------------------------------------------------------ */
/* 2.54.03 - System Status moved to the very bottom, full width        */
/* The top bar keeps Storage Capacity + Pending Approvals (2 columns). */
/* ------------------------------------------------------------------ */
.admin-bar.admin-bar--two,
.shell--admin .admin-bar.admin-bar--two {
  grid-template-columns: minmax(0, 1fr) auto;
}
.shell--admin .admin-card--system {
  width: 100%;
  grid-column: 1 / -1;
  margin-top: 0;
  margin-bottom: 0.6rem;
  border-radius: 8px;
}
.shell--admin .admin-card--system .admin-bar__ok { margin: 0; }
.shell--admin .admin-card--system .admin-bar__ok--warn { color: var(--gold-hover); }
.shell--admin .admin-card--system .health--inline {
  grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
  gap: 0.45rem 1.25rem;
}
@media (max-width: 1100px) {
  .admin-bar.admin-bar--two,
  .shell--admin .admin-bar.admin-bar--two { grid-template-columns: 1fr; }
}

/* ==========================================================================
   2.55.00 proforma invoice fixes
   - ghost buttons inside the white invoice panel (not-found page) were
     cream-on-white; give them ink and a green border
   - .pinv-fit: pinv-fit.js scales the A4 document to the phone width. When
     scaled, the sideways-scroll fallback is switched off. Print is untouched.
   ========================================================================== */
.invdoc .btn--ghost {
  color: #1a1a18;
  --btn-bd: #1F4D36;
  border-color: #1F4D36;
}
.pinv-fit { width: 100%; }
.pinv-fit.is-scaled { overflow: hidden; }
.pinv-fit.is-scaled .pinv { transform-origin: top left; max-width: none; }
@media (max-width: 820px) {
  body.pinv-print .invdoc-page:has(.pinv-fit.is-scaled) { overflow-x: visible; }
}
@media print {
  .pinv-fit, .pinv-fit.is-scaled { height: auto !important; overflow: visible !important; }
  .pinv-fit .pinv { transform: none !important; }
}

/* ==========================================================================
   2.56.01 proforma print: the cream sheet is the whole A4 page
   The sheet used to end at its content, leaving a white band at the foot of
   the printed page (worse with Background graphics off, where Chrome drops
   the body colour). Now, in print only:
   - @page is A4 with no margin, so Chrome's Default/None margin setting
     changes nothing; the page padding lives inside the sheet (.pinv padding)
   - html, body and every wrapper are cream with print-color-adjust: exact,
     so the colour prints even with Background graphics unchecked
   - the sheet is exactly 210 x 297mm, a flex column with the footer strip
     pinned to the bottom; overflow is clipped so it can never spill onto a
     2nd page
   Screen view and the phone fit (pinv-fit.js) are untouched.
   ========================================================================== */
@page pinv { size: A4 portrait; margin: 0; }
@media print {
  html:has(body.pinv-print),
  body.pinv-print,
  body.pinv-print .invdoc-page,
  body.pinv-print .pinv-fit,
  body.pinv-print .pinv {
    background: #F3F1E4 !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }
  html:has(body.pinv-print),
  body.pinv-print,
  body.pinv-print .invdoc-page,
  body.pinv-print .pinv-fit,
  body.pinv-print .pinv-fit.is-scaled {
    width: 210mm !important;
    max-width: 210mm !important;
    height: 297mm !important;
    min-height: 0 !important;
    max-height: 297mm !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    overflow: hidden !important;
  }
  body.pinv-print { page: pinv; }
  body.pinv-print .pinv-fit .pinv {
    display: flex !important;
    flex-direction: column;
    width: 210mm !important;
    max-width: 210mm !important;
    height: 297mm !important;
    min-height: 297mm !important;
    max-height: 297mm !important;
    margin: 0 !important;
    padding: 5mm 11mm 3.5mm !important;
    border: 0 !important;
    overflow: hidden !important;
    transform: none !important;
    break-inside: avoid;
    page-break-inside: avoid;
  }
  body.pinv-print .pinv > * { flex: 0 0 auto; }
  /* Set by pinv-fit.js only when a long invoice would not fit one page. */
  body.pinv-print .pinv > :not(.pinv__foot) { zoom: var(--pinv-print-zoom, 1); }
  body.pinv-print .pinv > .pinv__foot { margin-top: auto !important; padding-top: 2.8mm; }
}

/* ==========================================================================
   2.55.01: Archive / Delete for enquiries and live chat
   - .btn--sm: compact ghost buttons for record actions
   - .btn--danger (solid) and .btn--ghost-danger (outline) for permanent delete;
     the same muted red as .notice--bad, never gold, so it cannot be mistaken
     for the primary action
   - .bulk-bar: select-all plus bulk actions above a list table
   - .records-confirm: the confirm step before a permanent delete
   ========================================================================== */
.btn--sm { padding: 0.55rem 1rem; font-size: 0.6875rem; letter-spacing: 0.12em; }
.btn--danger { --btn-bg: #8E3A32; --btn-fg: #FFFFFF; --btn-bd: #C8564B; }
.btn--danger::before { background: #C8564B; }
.btn--danger:hover, .btn--danger:focus-visible { color: #FFFFFF; border-color: #C8564B; }
.btn--ghost.btn--ghost-danger:hover,
.btn--ghost.btn--ghost-danger:focus,
.btn--ghost.btn--ghost-danger:focus-visible,
.btn--ghost.btn--ghost-danger:active { color: #E07A6F; border-color: #C8564B; }

.records-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); margin-bottom: var(--s-6); }
.admin-head .records-actions { margin-bottom: 0; }
.records-actions .inline-form { gap: var(--s-3); flex-wrap: wrap; }

.bulk-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  border: 1px solid var(--line);
  border-bottom: 0;
  background: var(--bg-nav);
}
.bulk-bar__all {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  margin-right: auto;
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  cursor: pointer;
}
.bulk-bar__all.is-some { color: var(--gold); }
.bulk-bar .btn[disabled] { opacity: 0.4; cursor: default; }
.bulk-bar input[type="checkbox"],
.cell--check input[type="checkbox"] { width: 1.05rem; height: 1.05rem; accent-color: var(--gold); cursor: pointer; margin: 0; }
.table .cell--check { width: 2.75rem; padding-right: 0; }
.table tbody tr.is-selected { background: var(--bg-panel); box-shadow: inset 2px 0 0 var(--gold); }

.records-confirm { padding: var(--s-5) var(--s-6); }
.records-confirm__title { font-size: var(--step-0); font-weight: 600; color: var(--text); margin-bottom: var(--s-3); }
.records-confirm__sub { margin-top: var(--s-4); }
.records-confirm__list { margin: var(--s-4) 0 0; padding-left: 1.1rem; display: grid; gap: var(--s-2); color: var(--text-body); }
.records-confirm__actions { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-5); }

@media (max-width: 720px) {
  .bulk-bar { padding: var(--s-3); }
  .bulk-bar__all { width: 100%; min-height: 44px; }
  .bulk-bar .btn, .records-actions .btn, .records-confirm__actions .btn { min-height: 44px; flex: 1 1 auto; }
  .table .cell--check input[type="checkbox"] { width: 1.35rem; height: 1.35rem; }
  .cell--actions .btn-link { display: inline-block; min-height: 44px; line-height: 44px; }
  .records-actions .inline-form { display: flex; width: 100%; }
  .records-actions .inline-form .btn { flex: 1 1 0; }
}

/* ==========================================================================
   2.56.00: password reset, invites, two-step sign-in
   - .auth-card__note / __links / .auth-rules: forgot, reset and verify cards
   - .mfa-*: /admin/security (QR on a white tile so every phone camera reads it)
   - .account-tools: sign-in actions under the buyer and admin edit forms
   - .mfa-nudge: slim dashboard banner for a Super Admin without two-step
   ========================================================================== */
.auth-card__note { font-size: var(--step--1); margin-bottom: var(--s-5); }
.auth-card__links { margin-top: var(--s-5); font-size: var(--step--1); text-align: center; }
.auth-card__links + .auth-card__links { margin-top: var(--s-3); }
.auth-rules {
  margin: 0 0 var(--s-5);
  padding: var(--s-4) var(--s-4) var(--s-4) calc(var(--s-4) + 1em);
  border: 1px solid var(--line);
  background: var(--bg-nav);
  font-size: var(--step--1);
  color: var(--text-body);
  display: grid;
  gap: var(--s-2);
}
.auth-code { font-size: 1.5rem; letter-spacing: 0.35em; text-align: center; }

.shell__user-out + .shell__user-out { margin-left: var(--s-4); }

.mfa-panel {
  border: 1px solid var(--line);
  background: var(--bg-panel);
  padding: var(--s-6);
  margin-bottom: var(--s-6);
  max-width: 52rem;
}
.mfa-panel__head { display: flex; align-items: center; gap: var(--s-4); margin-bottom: var(--s-4); }
.mfa-steps { margin: 0 0 var(--s-4); padding-left: 1.2em; color: var(--text-body); }
.mfa-setup { display: flex; flex-wrap: wrap; gap: var(--s-6); align-items: flex-start; margin-bottom: var(--s-5); }
.mfa-qr { flex: 0 0 auto; width: 13.5rem; height: 13.5rem; padding: var(--s-2); background: #FFFFFF; border-radius: 4px; }
.mfa-qr svg { display: block; width: 100%; height: 100%; }
.mfa-setup__manual { flex: 1 1 16rem; min-width: 0; display: grid; gap: var(--s-3); }
.mfa-secret {
  font-size: 1.05rem;
  letter-spacing: 0.08em;
  color: var(--gold);
  padding: var(--s-3) var(--s-4);
  border: 1px dashed rgba(191, 142, 85, 0.45);
  word-break: break-all;
}
.mfa-uri summary { cursor: pointer; color: var(--text-muted); font-size: var(--step--1); }
.mfa-form { max-width: 24rem; }
.mfa-form h3, .account-tools__item h3 { font-size: var(--step-0); margin-bottom: var(--s-3); color: var(--text); }
.mfa-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: var(--s-6); }
.mfa-actions .field { margin-bottom: var(--s-4); }
.mfa-codes { border-color: rgba(191, 142, 85, 0.45); }
.mfa-codes__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 12rem));
  gap: var(--s-3) var(--s-6);
  margin: 0;
  padding-left: 1.6em;
  font-size: 1.05rem;
  color: var(--text);
}
.mfa-nudge { display: block; margin-bottom: var(--s-5); border-color: rgba(191, 142, 85, 0.45); }
.mfa-nudge p { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); }
.mfa-nudge svg { color: var(--gold); flex-shrink: 0; }

.account-tools__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); gap: var(--s-5); }
.account-tools__item {
  border: 1px solid var(--line);
  background: var(--bg-panel);
  padding: var(--s-5);
  display: grid;
  gap: var(--s-3);
  align-content: start;
  font-size: var(--step--1);
}
.account-tools__item .btn[disabled] { opacity: 0.4; cursor: default; }

@media (max-width: 720px) {
  .mfa-panel { padding: var(--s-5) var(--s-4); }
  .mfa-qr { width: 100%; max-width: 16rem; height: auto; aspect-ratio: 1 / 1; margin-inline: auto; }
  .mfa-codes__list { grid-template-columns: 1fr 1fr; gap: var(--s-3); font-size: 0.95rem; }
  .mfa-form, .mfa-form .btn, .account-tools__item .btn { width: 100%; min-height: 44px; }
  .auth-card__links a { display: inline-block; min-height: 44px; line-height: 44px; }
}
@media print {
  body:has(.mfa-codes) .shell__side,
  body:has(.mfa-codes) .topbar,
  body:has(.mfa-codes) .mfa-panel:not(.mfa-codes),
  body:has(.mfa-codes) .header,
  body:has(.mfa-codes) .footer,
  body:has(.mfa-codes) .mfa-codes .btn { display: none !important; }
  .mfa-codes { border: 0; color: #000; background: #fff; }
  .mfa-codes__list { color: #000; }
}

/* ==========================================================================
   2.56.02 dashboard: breathing room under the Storage Capacity bar so it no
   longer touches the Enquiry Trend and Order Status cards (Ethel, 26 Sep).
   ========================================================================== */
.shell--admin .admin-bar.admin-bar--two { margin-bottom: 0.6rem; }

/* 2.56.02 vanilla page: remove the full-width gold rule above "Three
   commercial grades from Uganda" (Ethel: "we don't need this long line"). */
.grades-band { border-top: 0; }

/* 2.56.02 proforma editor line items: the boxes were white with white text,
   so typing looked like it did nothing. Match the dark admin fields. */
.pinv-lines-edit { overflow-x: auto; }
.pinv-lines-edit .spec-table { width: 100%; min-width: 44rem; table-layout: fixed; }
.pinv-lines-edit .spec-table th { width: auto; padding: 0.5rem 0.4rem; }
.pinv-lines-edit .spec-table td { vertical-align: top; padding: 0.5rem 0.4rem; }
.pinv-lines-edit textarea,
.pinv-lines-edit input[type="text"],
.pinv-lines-edit select {
  display: block;
  width: 100%;
  padding: 0.6rem 0.7rem;
  background: var(--bg-panel);
  border: 1px solid var(--line-strong);
  border-radius: 0;
  color: var(--text);
  font: inherit;
  font-size: 0.85rem;
  line-height: 1.45;
}
.pinv-lines-edit textarea { min-height: 5.2rem; resize: vertical; }
.pinv-lines-edit select { margin-bottom: 0.4rem; color: var(--gold); cursor: pointer; }
.pinv-lines-edit select option { color: var(--text); background: var(--bg-panel); }
.pinv-lines-edit textarea:focus,
.pinv-lines-edit input[type="text"]:focus,
.pinv-lines-edit select:focus { border-color: var(--gold); background: var(--bg-raised); outline: none; }
.pinv-lines-edit textarea::placeholder,
.pinv-lines-edit input::placeholder { color: var(--text-muted); opacity: 1; }