/* Archivo, served from this site (assets/fonts, SIL Open Font License, OFL.txt).
   It came from Google Fonts before, which cost a render-blocking stylesheet
   from a second host on every first visit (audit, 2026-10-12). One variable
   file per script covers every weight the site uses, 300 to 800. */
@font-face {
  font-family: Archivo;
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(../fonts/archivo-vietnamese-wght-normal.woff2) format('woff2');
  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
}
@font-face {
  font-family: Archivo;
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(../fonts/archivo-latin-ext-wght-normal.woff2) format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: Archivo;
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(../fonts/archivo-latin-wght-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* ==========================================================================
   SOLVIKA - design system

   Palette is derived from the logo mark, sampled from the logo file itself:
   #7d8034, an olive. Everything else is a tint or shade of it plus a warm
   neutral, so the site cannot drift away from the brand.

   The restraint is deliberate. Berger and Klasmann read as professional
   because colour is used almost nowhere: neutral page, real photography,
   green reserved for actions. The sites that look cheap are the ones that
   paint every section a different shade.
   ========================================================================== */

:root {
  /* THE RAMP IS TRADEDESK'S GREEN, NOT THE OLD OLIVE.
     Remapping the ramp at the token level rather than patching selectors is
     what made this tractable: the olive was still turning up in table
     headers, definition terms, "Specification ->" links, the skip link and
     the chat widget's send button, and chasing those one at a time would
     have missed some. Every --moss-* below is now a step of the green in
     tradedesk/assets/theme.css, so anything keyed to the ramp follows,
     chat.css included.
       #27523a / #1f4630  the TradeDesk navigation gradient
       #4a8f60 / #3e7a52  --accent / --accent2
       #e6f2e9 / #f2f7f3  --tint-strong / --tint                            */
  --moss-950: #14301f;

  --moss-900: #1f4630;
  --moss-800: #27523a;
  --moss-700: #3e7a52;
  --moss-600: #4a8f60;
  --moss-500: #5aa070;
  --moss-400: #7fbb92;
  --moss-300: #a8d4b7;
  --moss-200: #cfe7d8;
  --moss-100: #e6f2e9;
  --moss-50:  #f2f7f3;

  /* warm neutrals: paper, not blue-grey */
  --ink:      #1a1a16;
  --ink-soft: #4a4a42;
  --ink-mute: #6f6f65;
  --line:     #e2e0d6;
  --line-soft:#eeece4;
  --paper:    #ffffff;
  --paper-2:  #faf9f4;

  /* peat brown, used only as a trace accent */
  --peat:     #6b5844;

  --maxw: 1180px;
  --gut: clamp(1.25rem, 3.5vw, 4.5rem);

  /* TYPE SYSTEM A (decided 2026-10-15, design.md section 1). Sizes by role,
     not by page. Before this the site had 3 page-title weights, 5 section
     sizes, 6 card-title sizes, 13.1/12.5/11.5/9.6 px small text and 13
     corner values. Every size below is the whole list: if a new rule needs
     a size that is not here, it is a new role and belongs here first.
       display 56 (phone 36)  the home hero title only, so the approved hero
                              does not move
       h1      52 (phone 32)  every inner page and article title
       h2      36 (phone 26)  section titles
       h3      24 (phone 20)  cards, grade names, panel titles, figures, and
                              every heading that used to be 16 to 22 px
       lead    20 (phone 18)  the one line under a title
       body    17, line 1.6
       small   14             meta, captions, table text and notes
       label   13 bold capitals, tracked (the "BASIC INFORMATION" style)
     Headings are the dark green at 600. Weights in use: 400, 600, 700. */
  --fs-display: clamp(2.25rem, 1.2rem + 3.6vw, 3.5rem);
  --fs-h1: clamp(2rem, 1.2rem + 2.9vw, 3.25rem);
  --fs-h2: clamp(1.625rem, 1.1rem + 1.6vw, 2.25rem);
  --fs-h3: clamp(1.25rem, 1rem + 0.6vw, 1.5rem);
  --fs-lead: clamp(1.125rem, 1rem + 0.5vw, 1.25rem);
  --fs-body: 1.0625rem;
  --fs-small: 0.875rem;
  --fs-label: 0.8125rem;
  --lh-body: 1.6;
  --w-head: 600;
  --track-label: 0.08em;

  /* Corners: three, and nothing else. 4 px for buttons, fields and code
     chips, 8 px for cards, every photo, panels and dialogs, round only for
     the filter and blog chips and the chat launcher. (A circle drawn as a
     dot or a round icon button keeps 50%: that is a shape, not a corner.) */
  --r-1: 4px;
  --r-2: 8px;
  --r-pill: 999px;
  --radius: var(--r-1);

  /* No shadow on cards. One shadow, for things that float over the page:
     the chat launcher, the sticky price bar, menus, dialogs, the gallery
     arrows. No vertical offset, so it reads the same on a bar at the foot
     of the screen and on a menu that drops down. */
  --shadow-float: 0 2px 24px rgba(20, 48, 31, 0.18);

  /* One button, one chip, one card. */
  --btn-h: 44px;
  --chip-h: 38px;
  --card-pad: 1.25rem;
  --card-gap: 0.5rem;

  /* The old scale, kept as names so the inline styles in the pages follow
     the roles: --t-xl was the 22 px panel title and is now h3, --t-3xl was
     the page title and is now h1, --t-xs and --t-sm are both the one small
     size. A label never uses these: it says --fs-label. */
  --t-xs: var(--fs-small);
  --t-sm: var(--fs-small);
  --t-base: var(--fs-body);
  --t-lg: var(--fs-lead);
  --t-xl: var(--fs-h3);
  --t-2xl: var(--fs-h2);
  --t-3xl: var(--fs-h1);
  --t-4xl: var(--fs-h1);
}
@media (max-width: 760px) { :root { --btn-h: 48px; } }

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: Archivo, "Helvetica Neue", Helvetica, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-feature-settings: "kern" 1;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--brand-accent-2); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--brand-deep-2); }

h1, h2, h3, h4, h5, h6 {
  margin: 0 0 0.5em;
  font-weight: var(--w-head);
  color: var(--brand-deep-2);
  text-wrap: balance;
  /* A long compound ("Vermehrungssubstrate") breaks rather than running
     out of its box on a phone; it ran out at 18 px already. */
  overflow-wrap: break-word;
}
h1 { font-size: var(--fs-h1); line-height: 1.1; letter-spacing: -0.015em; }
h2 { font-size: var(--fs-h2); line-height: 1.15; letter-spacing: -0.012em; }
h3, h4, h5, h6 { font-size: var(--fs-h3); line-height: 1.25; letter-spacing: -0.01em; }
/* A heading carrying its own inline size was the old way of saying "a
   smaller heading inside a column" (18 and 22 px h2s on about, contacts,
   downloads, privacy, the product pages, the quote pop-up). That role is h3
   now, whatever the inline value says. A page title keeps h1. */
h1[style*="font-size"] { font-size: var(--fs-h1) !important; }
h2[style*="font-size"], h3[style*="font-size"], h4[style*="font-size"] { font-size: var(--fs-h3) !important; }
/* The company name over an address is a label, not a title. */
.co-pair h3 { font-size: var(--fs-label) !important; font-weight: 700; letter-spacing: var(--track-label); text-transform: uppercase; line-height: 1.4; margin-bottom: 0.4rem; }
/* bold is 700, never "bolder": inside a 700 parent that computed to 900. */
b, strong { font-weight: 700; }
p  { margin: 0 0 1em; max-width: 68ch; }

/* ---- layout ------------------------------------------------------------ */

/* Edge to edge, on every page. The centred 1180px column was what made the
   homepage look "centred" beside the approved design, and the rest of the
   site had the same column. Running text is still readable because
   p { max-width: 68ch } and .lede { max-width: 62ch } cap the measure - it is
   the CONTAINER that is full width, not the paragraphs.
   margin-inline must go to 0 as well as the max-width: .hero-home is a column
   flex container and an auto inline margin on a flex child shrinks it to
   fit-content and re-centres it. */
.wrap { max-width: none; margin-inline: 0; padding-inline: var(--gut); }
/* Keeps the narrow measure for legal and download prose, but starts at the
   same gutter as everything else - a centred column on two pages out of
   thirteen reads as a different site. */
.wrap-narrow { max-width: 760px; margin-inline: 0; padding-inline: var(--gut); }

section { padding-block: clamp(3rem, 7vw, 6rem); }
section.tight { padding-block: clamp(2rem, 4vw, 3.25rem); }
.band { background: var(--paper-2); border-block: 1px solid var(--line-soft); }
.band-dark { background: var(--sage); color: var(--brand-deep); border: 0; }
.band-dark h1, .band-dark h2, .band-dark h3 { color: #fff; }
.band-dark p { color: #dfe2d0; }
.cta-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.35rem; }
.cta-list li { display: grid; grid-template-columns: auto 1fr; gap: 0.9rem; align-items: baseline; color: #e3e6da; font-size: var(--fs-body); }
.cta-list span {
  width: 1.85rem; height: 1.85rem; display: grid; place-items: center;
  border: 1px solid var(--moss-300); color: var(--moss-100);
  font-size: var(--fs-label); font-weight: 700;
}
/* :not(.btn) matters. Without it this rule (0,2,0) beats .btn-light (0,1,0)
   and painted the white button's label pale green on white: 1.46:1, which is
   close to invisible. Same reason .nav a excludes .btn below. */
.band-dark a:not(.btn) { color: var(--moss-200); }

.eyebrow {
  font-size: var(--fs-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  font-weight: 700;
  color: var(--moss-600);
  margin: 0 0 0.9rem;
}
.band-dark .eyebrow { color: var(--moss-300); }

.lede { font-size: var(--fs-lead); line-height: 1.5; color: var(--ink-soft); max-width: 62ch; }

.grid { display: grid; gap: clamp(1.25rem, 3vw, 2rem); }
.g-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); }
.g-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }
.g-4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); }

/* ---- header ------------------------------------------------------------ */

/* The same bar on every page: dark green ground, white links. It used to be
   white with dark links everywhere except the homepage, where it was dark -
   so the navigation changed as you moved around the site. The homepage still
   starts transparent over its photograph and fills in on the first scroll,
   but it fills in to THIS, so the bar reads as one thing throughout. */
.site-head {
  position: sticky; top: 0; z-index: 50;
  background: var(--brand-deep);
  border-bottom: 0;
}
.site-head .brand img { filter: brightness(0) invert(1); }
.site-head .nav a:not(.btn) { color: #fff; }
.site-head .nav a:not(.btn)::after { background: var(--moss-300); }
.site-head .nav a[aria-current="page"]:not(.btn) { color: #fff; }
.site-head .nav-toggle { color: #fff; border-color: rgba(255,255,255,0.55); }
/* 68px was cramped for a 172px wordmark. */
.head-in { display: flex; align-items: center; gap: 1.75rem; min-height: 86px; }

.brand { display: flex; align-items: center; gap: 0.85rem; text-decoration: none; margin-inline-end: auto; }
.brand img { width: 172px; }
.brand span {
  font-size: var(--fs-label); color: var(--ink-mute); letter-spacing: var(--track-label);
  padding-inline-start: 0.85rem; border-inline-start: 1px solid var(--line);
  text-transform: uppercase; font-weight: 700; white-space: nowrap;
}
/* Hidden well before it can wrap. With five nav items, a language picker and
   a button in the bar there is no room for it below ~1180px. */
@media (max-width: 1180px) { .brand span { display: none; } }

.nav { display: flex; align-items: center; gap: 1.35rem; }

/* .nav-util had no display rule at all, and got away with it while every
   child was an inline <a>. The language picker is a <details>, which is
   display:block, so it broke the line and dropped the quote button onto a
   second row. It is a flex row now, which is what it always meant to be. */
.nav-util { display: flex; align-items: center; gap: 0.35rem; }
.nav a:not(.btn) {
  color: var(--ink); text-decoration: none; font-size: var(--fs-body);
  font-weight: 600; padding-block: 0.35rem; position: relative; white-space: nowrap;
}
.nav a:not(.btn)::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px;
  background: var(--moss-500); transform: scaleX(0); transition: transform 0.18s ease;
}
.nav a:not(.btn):hover::after, .nav a[aria-current="page"]::after { transform: scaleX(1); }
.nav a[aria-current="page"]:not(.btn) { color: var(--moss-700); }

.nav-toggle {
  display: none; background: none; border: 1px solid var(--line);
  border-radius: var(--radius); padding: 0.5rem 0.7rem; cursor: pointer;
  font-size: var(--fs-small); color: var(--ink);
}
@media (max-width: 1080px) {
  .nav-toggle { display: block; }
  .nav {
    display: none; position: absolute; inset-inline: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--paper); border-bottom: 1px solid var(--line);
    padding: 0.5rem var(--gut) 1rem;
  }
  .nav.open { display: flex; }
  .nav a { padding-block: 0.8rem; border-bottom: 1px solid var(--line-soft); }
  .nav a:not(.btn)::after { display: none; }
  .nav .btn { margin-top: 0.9rem; text-align: center; }
}

/* Google Translate is deliberately NOT used. The owner, 2026-09-15: "do not
   use google translate. will need to create language pages with full text
   translation". Machine translation mangled product codes, localised the
   language menu into scripts the font cannot render, and reads as a machine
   everywhere it matters. Real per-language pages are a separate phase; the
   language list survives in languages() in config for when that is built. */

/* ---- buttons ----------------------------------------------------------- */

.btn, .blog-more {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem;
  /* The deep green, not the mid accent. "Request a quote" appeared twice on
     the FAQ page in two different greens - the mid one in the page and the
     deep one in the closing band, which overrode it. One colour for every
     primary button; the accent stays for links, rules and hover. */
  background: var(--brand-deep-2); color: #fff; text-decoration: none;
  /* ONE BUTTON (type system A): 44 px, 48 on a phone, 14/600, 4 px. There
     were five: 50 px links, 43 px form buttons, a 32 px "Clear", a 34 px
     panel button and a 56 px round "Show more articles". font-family
     matters: a <button> does not inherit the page font on its own. */
  min-height: var(--btn-h); padding: 0 1.25rem; border-radius: var(--r-1);
  font-family: inherit; font-size: var(--fs-small); font-weight: 600; letter-spacing: 0.01em; line-height: 1.2;
  border: 1px solid var(--brand-deep-2); cursor: pointer; white-space: nowrap;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.08s ease;
}
.btn:hover { background: var(--brand-deep); border-color: var(--brand-deep); color: #fff; }
.btn:active, .blog-more:active { transform: translateY(1px); }
/* The secondary: the same button, outlined. */
.btn-ghost, .blog-more { background: transparent; color: var(--brand-deep-2); border-color: var(--line); }
.btn-ghost:hover, .blog-more:hover { background: var(--sage); border-color: var(--brand-accent); color: var(--brand-deep-2); }
/* On a dark ground. This exists because the two buttons that needed it were
   carrying inline style="color:#e9ebdc", and an inline colour beats every
   :hover rule - so on hover the background went pale while the text stayed
   near-white and the label vanished. Never set a button colour inline. */
.btn-on-dark { background: transparent; color: #e9ebdc; border-color: rgba(255,255,255,0.34); }
.btn-on-dark:hover { background: rgba(255,255,255,0.14); border-color: rgba(255,255,255,0.65); color: #fff; }

.btn-light { background: #fff; color: var(--brand-deep-2); border-color: #fff; }
.btn-light:hover { background: var(--sage); border-color: var(--sage); color: var(--brand-deep-2); }
/* .btn-sm is no longer smaller: one button height everywhere ("Clear" on
   /substrates/ was 32 px at 12.5 px). The class stays so the markup does. */
.btn-row { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.5rem; }

/* ONE CHIP: the blog topics, the /peatmoss/ filters, the quote form's volume
   choices and the crop suggestions on /substrates/ were 37 and 39 px at two
   weights. Round is kept for these only (and the chat launcher). */
.blog-chip, .gf-group button, .qf-chips span, .cat-crop a {
  display: inline-flex; align-items: center; min-height: var(--chip-h);
  padding: 0 1rem; border-radius: var(--r-pill);
  font-family: inherit; font-size: var(--fs-small); font-weight: 600; line-height: 1.2;
}

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

.hero { position: relative; background: var(--brand-deep); overflow: hidden; }
.hero-img { position: absolute; inset: 0; }
.hero-img img { width: 100%; height: 100%; object-fit: cover; opacity: 0.66; }
.hero::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(100deg, rgba(18,21,9,0.90) 0%, rgba(18,21,9,0.58) 48%, rgba(18,21,9,0.10) 100%);
}
.hero-in { position: relative; z-index: 2; padding-block: clamp(4rem, 12vw, 8.5rem); }

/* ---- the homepage hero -------------------------------------------------
   The old one dropped the photograph to 66% opacity over a near-black ground
   and washed it grey. This runs the picture at full strength and darkens
   only the top band, so the floating navigation reads, and the foot, so the
   headline does. Copy is anchored bottom left, and the height is set so the
   product photographs below are already showing before anyone scrolls. */
.hero-home { display: flex; flex-direction: column; min-height: clamp(580px, 74vh, 700px); }
.hero-home .hero-img img { opacity: 1; }
.hero-home::after {
  background: linear-gradient(180deg,
    rgba(14,16,10,0.62) 0%,
    rgba(14,16,10,0.08) 26%,
    rgba(14,16,10,0.18) 46%,
    rgba(14,16,10,0.46) 72%,
    rgba(14,16,10,0.62) 100%);
}
/* clears the 86px bar */
.hero-home .hero-in { margin-top: auto; padding-block: 7.5rem clamp(2.75rem, 4.5vw, 4rem); }
.hero-home h1 { max-width: 17ch; }
.hero-home p { color: #e8eae0; }

/* The first section runs tighter than the rest so the product photographs
   sit above the fold; everything after it keeps the page's own rhythm. */
/* Homepage only on purpose: this pulls the product photographs up under the
   hero, and no other page has a hero above its first section. */
.home main > section:first-of-type { padding-block: clamp(1.75rem, 3vw, 2.5rem) clamp(2.75rem, 6vw, 4.75rem); }
.hero h1 { color: #fff; max-width: 20ch; margin-bottom: 1rem; }
.hero p { color: #d3d7c2; font-size: var(--fs-lead); line-height: 1.5; max-width: 48ch; }
.hero .eyebrow { color: var(--moss-300); }

.facts { display: flex; flex-wrap: wrap; gap: 2.5rem; margin-top: 2.75rem; }
@media (max-width: 560px) {
  /* an even 2x2 block, rather than one full-width row then two half ones */
  .facts { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem 1.25rem; }
}
.fact strong { display: block; font-size: var(--fs-h2); font-weight: var(--w-head); color: #fff; line-height: 1.1; letter-spacing: -0.012em; }
.fact span { display: block; font-size: var(--fs-label); font-weight: 700; line-height: 1.4; color: #b4b99c; text-transform: uppercase; letter-spacing: var(--track-label); }

/* ---- cards ------------------------------------------------------------- */

.card {
  display: flex; flex-direction: column;
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--r-2); overflow: hidden;
  transition: border-color 0.16s ease;
}
a.card { text-decoration: none; color: inherit; }
/* No shadow on a card, not even on hover: the edge turns green instead. */
a.card:hover { border-color: var(--moss-400); }
.card-img { aspect-ratio: 16 / 10; background: var(--sage); position: relative; overflow: hidden; }
/* Absolute, so a portrait photograph cannot make its card taller than the
   others (the owner, 2026-10-08: the three cards must be the same size). */
.card-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* photo(..., 'card-img') puts the 16:10 frame on the <img> itself. Without
   this a portrait or 4:3 photograph is squeezed into the frame, not cropped. */
img.card-img { width: 100%; object-fit: cover; }
/* The tray photographs carry the fraction burned into a corner, so a
   product page shows them whole, never cropped to a frame. */
img.grade-photo { width: 100%; height: auto; border-radius: var(--r-2); }
/* One card padding and one gap from a card's title to its text, on every
   card (the crop tiles had 30 px there, the others 8). */
.card-body { padding: var(--card-pad); display: flex; flex-direction: column; flex: 1; }
.card-body h3 { margin-bottom: var(--card-gap); }
.card-body p { font-size: var(--fs-small); color: var(--ink-soft); margin-bottom: 0.9rem; }
.card-more {
  margin-top: auto; font-size: var(--fs-small); font-weight: 600; color: var(--moss-700);
  display: inline-flex; align-items: center; gap: 0.4rem;
}
a.card:hover .card-more { gap: 0.65rem; }
.card-more svg { transition: transform 0.16s ease; }

/* the small code chip on a product card, echoing how the trade names things */
.chip {
  display: inline-block; font-size: var(--fs-label); font-weight: 700;
  letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--brand-deep-2); background: var(--sage);
  border: 1px solid #cfe3d6; border-radius: var(--r-1);
  padding: 0.18rem 0.5rem; margin-bottom: 0.7rem;
}

/* ---- spec tables ------------------------------------------------------- */
/* Klasmann puts specs in dash-separated prose and you cannot compare two
   products without reading both twice. Floragard shows a photo and a name and
   nothing else. So: a real table, one row per product, units in the header
   once, and the numbers aligned so the eye can run down a column. */

.table-scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); }
table.spec { width: 100%; border-collapse: collapse; font-size: var(--fs-small); background: var(--paper); }
table.spec caption { text-align: start; padding: 0 0 0.75rem; color: var(--ink-mute); font-size: var(--fs-small); }
table.spec th, table.spec td { padding: 0.72rem 0.9rem; text-align: start; border-bottom: 1px solid var(--line-soft); }
/* NOT uppercased: text-transform would render "pH" as "PH", which to a
   grower reads as a different thing entirely. Same reason the chemical
   formulas below use real subscripts. */
table.spec thead th {
  background: var(--moss-50); color: var(--moss-900);
  font-size: var(--fs-label); letter-spacing: 0.02em;
  font-weight: 700; white-space: nowrap; border-bottom: 1px solid var(--moss-200);
  position: sticky; top: 0;
}
table.spec tbody tr:last-child td { border-bottom: 0; }
table.spec tbody tr:hover { background: var(--moss-50); }
table.spec td:first-child { font-weight: 600; color: var(--moss-900); white-space: nowrap; }
table.spec td.num { font-variant-numeric: tabular-nums; }

/* yes / no as a mark rather than a word, so a column scans in one pass */
.yes, .no { display: inline-block; width: 1.1rem; text-align: center; font-weight: 700; }
.yes { color: var(--moss-600); }
.no { color: #bdbdb2; }

/* two-column definition list for a single product's properties */
.props { border-top: 1px solid var(--line); margin: 0; }
.props div { display: flex; gap: 1rem; justify-content: space-between; padding: 0.7rem 0; border-bottom: 1px solid var(--line-soft); }
.props dt { color: var(--ink-soft); font-size: var(--fs-small); margin: 0; }
.props dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; text-align: end; }

/* ---- ticked list ------------------------------------------------------- */

ul.ticks { list-style: none; padding: 0; margin: 0 0 1.5rem; }
ul.ticks li { position: relative; padding-inline-start: 1.6rem; margin-bottom: 0.55rem; color: var(--ink-soft); }
ul.ticks li::before {
  content: ""; position: absolute; inset-inline-start: 0; top: 0.62em;
  width: 0.5rem; height: 0.5rem; border-radius: 50%;
  background: var(--moss-400);
}

/* ---- production steps -------------------------------------------------- */
/* The production chain, stated as an ordered list because that is what it is.
   No connector arrows or icons: the numbers carry the sequence and a real
   producer's material does not need decoration to look industrial. */

/* Five bordered cells with a tiny numeral above each title read as a table
   of nothing. No boxes now: the number is the marker, set large in the
   accent, and white space does the separating. */
ol.steps {
  list-style: none; margin: 2.25rem 0 0; padding: 0;
  display: grid; gap: clamp(1.5rem, 3vw, 2.5rem);
  grid-template-columns: repeat(5, 1fr);
  background: none; border: 0; border-radius: 0; overflow: visible;
}
@media (max-width: 1000px) { ol.steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { ol.steps { grid-template-columns: 1fr; } }

ol.steps li {
  background: none; padding: 0;
  display: flex; flex-direction: column; gap: 0.35rem;
  border-top: 2px solid var(--brand-accent); padding-top: 0.9rem;
}
.steps-n {
  font-size: var(--fs-h3); font-weight: var(--w-head); color: var(--brand-accent);
  font-variant-numeric: tabular-nums; line-height: 1;
}
ol.steps strong { font-size: var(--fs-body); color: var(--brand-deep-2); line-height: 1.25; }
.steps-d { font-size: var(--fs-small); color: var(--ink-mute); line-height: 1.5; }

/* ---- FAQ ------------------------------------------------------------------
   The site's own layout (2026-10-12): the topics on the left, sticky on a wide
   screen, and the questions on the right, each a white card with a hairline
   border that opens in place. Same type, greens and 8 px cards as the rest. */
.faq-layout { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.faq-topics { position: sticky; top: 110px; }
.faq-topics-h { margin: 0 0 0.6rem; font-size: var(--fs-label); font-weight: 700; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--ink-mute); }
.faq-topics ul { list-style: none; margin: 0; padding: 0; border-inline-start: 2px solid var(--moss-100); }
.faq-topics a {
  display: flex; justify-content: space-between; gap: 1rem; padding: 0.55rem 0 0.55rem 1rem;
  margin-inline-start: -2px; border-inline-start: 2px solid transparent;
  color: var(--ink-soft); text-decoration: none; font-weight: 600; font-size: var(--fs-small);
}
.faq-topics a:hover { color: var(--brand-deep-2); border-inline-start-color: var(--moss-500); }
.faq-topics b { font-weight: 600; color: var(--ink-mute); font-size: var(--fs-small); }
.faq-group { margin-bottom: clamp(2rem, 4vw, 2.75rem); scroll-margin-top: 100px; }
.faq-group h2 { font-size: var(--fs-h3); margin: 0 0 1rem; }
.faq-item { border: 1px solid var(--line); border-radius: var(--r-2); background: #fff; margin-bottom: 0.6rem; }
.faq-item[open] { border-color: var(--moss-300); }
.faq-item summary {
  display: flex; align-items: center; justify-content: space-between; gap: 1.25rem;
  padding: 1rem 1.25rem; cursor: pointer; list-style: none;
  font-weight: var(--w-head); font-size: var(--fs-body); line-height: 1.4; color: var(--brand-deep-2);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { color: var(--moss-700); }
.faq-item summary i {
  flex: none; position: relative; width: 28px; height: 28px; border-radius: 50%;
  border: 1px solid var(--line); background: var(--moss-50);
}
.faq-item summary i::before, .faq-item summary i::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 11px; height: 2px;
  background: var(--brand-deep-2); transform: translate(-50%, -50%); transition: transform .2s ease;
}
.faq-item summary i::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq-item[open] summary i::after { transform: translate(-50%, -50%) rotate(0deg); }
.faq-item > p { margin: 0; padding: 0 1.25rem 1.15rem; color: var(--ink-soft); max-width: 72ch; }
.faq-figures h2 { font-size: var(--fs-h3); margin-top: 0; }
.faq-figures p { font-size: var(--fs-small); }
@media (max-width: 900px) {
  .faq-layout { grid-template-columns: minmax(0, 1fr); }
  .faq-topics { position: static; }
  .faq-topics ul { display: flex; flex-wrap: wrap; gap: 0.5rem; border: 0; }
  /* the topics become chips on a phone: the one chip size */
  .faq-topics a { align-items: center; min-height: var(--chip-h); padding: 0 1rem; margin: 0; border: 1px solid var(--line); border-radius: var(--r-pill); }
  .faq-topics a:hover { border-color: var(--moss-300); }
}

/* ---- download rows ----------------------------------------------------- */

.dl { display: grid; gap: 0.6rem; }
.dl a {
  display: flex; align-items: center; gap: 1rem; text-decoration: none;
  padding: 0.95rem 1.1rem; border: 1px solid var(--line);
  border-radius: var(--radius); background: var(--paper); color: inherit;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.dl a:hover { border-color: var(--moss-400); background: var(--moss-50); }
.dl .dl-ic { flex: none; color: var(--moss-600); }
.dl .dl-t { font-weight: 600; }
.dl .dl-s { font-size: var(--fs-small); color: var(--ink-mute); }
.dl .dl-meta { margin-inline-start: auto; font-size: var(--fs-label); font-weight: 700; color: var(--ink-mute); white-space: nowrap; text-transform: uppercase; letter-spacing: var(--track-label); }

/* ---- forms ------------------------------------------------------------- */

.field { margin-bottom: 1.15rem; }
.field label { display: block; font-size: var(--fs-small); font-weight: 600; margin-bottom: 0.35rem; }
.field .hint { font-weight: 400; color: var(--ink-mute); }
.field input, .field select, .field textarea {
  width: 100%; padding: 0.7rem 0.85rem; font: inherit; font-size: var(--fs-small);
  color: var(--ink); background: var(--paper);
  border: 1px solid var(--line); border-radius: var(--radius);
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: 2px solid var(--moss-400); outline-offset: -1px; border-color: var(--moss-400);
}
.field textarea { min-height: 8rem; resize: vertical; }
.form-note { font-size: var(--fs-small); color: var(--ink-mute); }
.alert { padding: 1rem 1.15rem; border-radius: var(--r-2); margin-bottom: 1.5rem; font-size: var(--fs-small); }
.alert-ok { background: var(--moss-50); border: 1px solid var(--moss-300); color: var(--moss-900); }
.alert-err { background: #fdf3f1; border: 1px solid #e6bdb4; color: #7a2f1e; }

/* ---- contact strip ----------------------------------------------------- */

.contact-lines { list-style: none; padding: 0; margin: 0; }
.contact-lines li { margin-bottom: 0.6rem; }
.contact-lines a { color: inherit; }
.contact-lines .k {
  display: block; font-size: var(--fs-label); font-weight: 700; text-transform: uppercase;
  letter-spacing: var(--track-label); color: var(--ink-mute); margin-bottom: 0.1rem;
}
.band-dark .contact-lines .k { color: var(--moss-300); }

/* ---- breadcrumb -------------------------------------------------------- */

.crumb { font-size: var(--fs-small); color: var(--ink-mute); padding-top: 1.5rem; }
.crumb a { color: var(--ink-mute); text-decoration: none; }
.crumb a:hover { color: var(--moss-700); text-decoration: underline; }
.crumb span { padding-inline: 0.45rem; opacity: 0.5; }

/* ---- footer ------------------------------------------------------------ */

/* Light. Dark-on-dark - the closing band and then the footer both on
   --moss-950 - read as one heavy slab with a seam in it. The band keeps its
   dark ground so the call to action still carries, and the footer sits on
   paper underneath it, which is the arrangement on every footer the owner
   picked out. */
/* The bottom padding clears the chat launcher, which is fixed bottom-right
   on every page and was sitting on top of the legal line. */
.site-foot { background: var(--paper-2); color: var(--ink-soft); border-top: 1px solid var(--line); padding-block: 3.5rem 5.5rem; font-size: var(--fs-body); }
.site-foot .foot-h { color: var(--ink); font-size: var(--fs-label); font-weight: 700; text-transform: uppercase; letter-spacing: var(--track-label); line-height: 1.4; margin-bottom: 1rem; }
.site-foot a { color: var(--ink-soft); text-decoration: none; }
.site-foot a:hover { color: var(--moss-700); text-decoration: underline; }
.site-foot ul { list-style: none; padding: 0; margin: 0; }
.site-foot li { margin-bottom: 0.5rem; }
.foot-tag { color: var(--ink-soft); margin: 0 0 1rem; max-width: 34ch; }
.foot-bottom {
  margin-top: 2.75rem; padding-top: 1.5rem; border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between;
  font-size: var(--fs-small); color: var(--ink-mute);
}
.foot-logo { width: 150px; margin-bottom: 1rem; }

/* ---- utilities --------------------------------------------------------- */

.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.center { text-align: center; }
.center p, .center .lede { margin-inline: auto; }
.muted { color: var(--ink-mute); }
.sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip {
  position: absolute; inset-inline-start: -9999px; top: 0; z-index: 100;
  background: var(--moss-800); color: #fff; padding: 0.7rem 1rem;
}
.skip:focus { inset-inline-start: 0; }

/* a full-bleed photograph used as a section divider */
.figure-wide { margin: 0; }
.figure-wide img { width: 100%; max-height: 30rem; object-fit: cover; }
.figure-wide figcaption { font-size: var(--fs-small); color: var(--ink-mute); padding-top: 0.6rem; }

/* three photographs in a row where one wide one would have to be stretched */
.figure-trio { margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.figure-trio img { width: 100%; height: clamp(14rem, 26vw, 26rem); object-fit: cover; display: block; }
@media (max-width: 700px) {
  .figure-trio { grid-template-columns: 1fr; }
  .figure-trio img:not(:first-child) { display: none; }
}

/* the bog to the bag, in four pictures, under the production steps */
.photo-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(0.75rem, 2vw, 1.25rem); margin-top: clamp(2rem, 4vw, 3rem); }
.photo-strip figure { margin: 0; }
.photo-strip img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; border-radius: var(--r-2); }
.photo-strip figcaption { font-size: var(--fs-small); color: var(--ink-mute); padding-top: 0.5rem; }
@media (max-width: 700px) { .photo-strip { grid-template-columns: repeat(2, 1fr); } }

/* UAB and SIA side by side in the contacts card */
.co-pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: 1.25rem; }

/* a YouTube video that loads nothing until it is played */
.video-box { position: relative; border-radius: var(--r-2); overflow: hidden; }
.video-box iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-facade { position: absolute; inset: 0; display: block; width: 100%; height: 100%; padding: 0; border: 0; cursor: pointer; background: var(--sage); }
.video-facade img { width: 100%; height: 100%; object-fit: cover; display: block; }
.video-play { position: absolute; left: 50%; top: 50%; width: 4.25rem; height: 4.25rem; margin: -2.125rem 0 0 -2.125rem; border-radius: 50%; background: rgba(20, 40, 25, 0.72); transition: background 0.15s; }
.video-play::after { content: ""; position: absolute; left: 1.7rem; top: 1.3rem; border-style: solid; border-width: 0.825rem 0 0.825rem 1.3rem; border-color: transparent transparent transparent #fff; }
.video-facade:hover .video-play, .video-facade:focus-visible .video-play { background: var(--brand-deep-2); }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}



/* ===========================================================================
   SITE - Pindstrup's shape language, our content

   Measured off pindstrup.com: header #193925, a sage band #d5e2d3, and a
   white body. The thing that makes three tones work there and fail here is
   that every change of colour happens on a WAVE, not a hairline. A straight
   rule between two grounds reads as a seam; the same change on a curve reads
   as a shape somebody drew. So the hairlines are gone and the bands are cut.

   Applied site-wide. The block sits at the end of the stylesheet, so where it
   restates an earlier rule - .site-head, .band-dark, .site-foot - it wins on
   source order at equal specificity rather than by piling on selectors.
   =========================================================================== */

:root {
  /* TradeDesk's own palette, read out of tradedesk/nav.php and
     assets/theme.css rather than invented here. Three greens had been
     rejected by eye before this; using the values the company already runs
     on ends the guessing, and the two products now match.
       --tdnav-bg  #27523a  --tdnav-bg2 #1f4630   the navigation gradient
       --accent    #4a8f60  --accent2   #3e7a52   buttons
       --tint-strong #e6f2e9                      soft green panels          */
  --brand-deep:    #27523a;
  --brand-deep-2:  #1f4630;
  --brand-accent:  #4a8f60;
  --brand-accent-2:#3e7a52;
  --sage:          #e6f2e9;
}

body { background: var(--paper); }

/* ---- one white body. No rules between sections ------------------------- */
section,
.band { background: var(--paper); border: 0; }
.facts-row { border: 0; }
h2, h3 { color: var(--brand-deep-2); }

/* ---- the bar ------------------------------------------------------------ */
.site-head { background: linear-gradient(180deg, var(--brand-deep), var(--brand-deep-2)); border-bottom: 0; }
.site-head .nav a:not(.btn) {
  text-transform: uppercase; letter-spacing: 0.07em;
  font-size: var(--fs-small); font-weight: 600;
}
/* "with our buttons": the quote link is the one thing in the bar that is an
   action, so it looks like one. No dropdowns, no search, no globe. */
/* .site-head must be in this selector. Without it the rule is (0,2,1) and
   loses to .site-head .nav a:not(.btn) at (0,3,1), which paints the label
   white - a white button with white text, i.e. an empty box. It only worked
   while the rule was scoped to .home and carried the extra class. */
.site-head .nav-util > a:last-child {
  /* Measured at 3px from "EN" while the nav items are 32px apart, so it read
     as stuck to it. The margin here is the gap; the padding gives the button
     a height that suits an 86px bar. */
  margin-inline-start: clamp(1rem, 2vw, 1.75rem);
  background: var(--paper); color: var(--brand-deep-2);
  padding: 0.75rem 1.35rem; border-radius: var(--r-1);
  text-transform: uppercase; letter-spacing: 0.07em;
  font-size: var(--fs-small); font-weight: 700; opacity: 1;
}
.site-head .nav-util > a:last-child:hover { background: var(--sage); }
/* On /contacts/ the same link carries aria-current, and
   .site-head .nav a[aria-current="page"]:not(.btn) is (0,4,1) - a notch above
   the rule right before this one - so the label went white on white again,
   but only on that one page. This matches its specificity and comes later. */
.site-head .nav-util > a:last-child[aria-current="page"] { color: var(--brand-deep-2); }

/* ---- hero: the type comes down ------------------------------------------
   It was 60px at weight 700 over a five-line lead, which is why it read as
   too much beside the reference. */
/* Height, not padding, controls the gap under the bar: the copy is anchored
   to the foot of the hero, so whatever is left over collects at the top.
   Deleting the floating header changed this - the bar used to overlay the
   hero and now sits above it, which pushed the hero down and put the gap
   back to ~200px. Shorter hero, gap back to ~110px. */
.hero-home { min-height: clamp(430px, 52vh, 500px); background: var(--brand-deep); overflow: visible; }
.hero-home::after {
  background: linear-gradient(105deg, rgba(16,26,18,.78) 0%, rgba(16,26,18,.42) 48%, rgba(16,26,18,.14) 100%);
}
/* less dead photograph above the headline */
.hero-home .hero-in { padding-block: 3.25rem clamp(3.5rem, 6vw, 5.5rem); }
.hero-home h1 {
  font-size: var(--fs-display);
  font-weight: var(--w-head); letter-spacing: -0.015em; line-height: 1.1; max-width: 30ch;
}
.hero-home p { font-size: var(--fs-lead); max-width: 70ch; color: #e6eae2; }

.hero-wave { position: absolute; left: 0; right: 0; bottom: -1px; z-index: 3; line-height: 0; pointer-events: none; }
.hero-wave svg { display: block; width: 100%; height: clamp(34px, 4vw, 62px); }

.facts { justify-content: flex-start; gap: clamp(2rem, 5vw, 4.5rem); margin: 0; }
.fact strong { color: var(--brand-deep-2); }
.fact span { color: var(--ink-mute); }
.facts-row { padding-block: clamp(1.75rem, 3.5vw, 2.75rem); }

/* ---- cards ------------------------------------------------------------- */
.card { border: 1px solid var(--line); border-radius: var(--r-2); overflow: hidden; background: var(--paper); }
.card:hover { border-color: var(--moss-300); }
.figure-wide img, .grid img { border-radius: var(--r-2); }
.card-img img { border-radius: 0; }

/* ---- the call to action: a sage band, cut top and bottom ---------------- */
/* The padding here never applied: the section also carries .tight, and
   section.tight (0,1,1) outranks .band-dark (0,1,0), so the band got 52px
   each side and the heading began 6px INSIDE the white wave. The owner,
   2026-09-18: a little taller. The top now adds the wave's own height, so
   the gap between the wave and the heading equals the gap under the button.
   Then, same day: the text spread out to use the height rather than the
   band padded around a tight cluster - heading, lead and button further
   apart (inline margins in footer.php), the list rows too, and the outer
   gap eased from 64px to 56px so the band stays 369px at 1440px. */
section.band-dark {
  position: relative; background: var(--sage); border: 0;
  padding-block: calc(clamp(34px, 4vw, 62px) + clamp(2.25rem, 4vw, 3.5rem)) clamp(2.25rem, 4vw, 3.5rem);
}
.band-dark::before {
  content: ""; position: absolute; top: -1px; left: 0; right: 0; height: clamp(34px, 4vw, 62px);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 60' preserveAspectRatio='none'%3E%3Cpath fill='%23ffffff' d='M0,0 L1440,0 L1440,20 C1190,50 980,4 720,26 C470,48 230,8 0,36 Z'/%3E%3C/svg%3E") center/100% 100% no-repeat;
}
.band-dark,
.band-dark h1, .band-dark h2, .band-dark h3 { color: var(--brand-deep-2); }
.band-dark p { color: #33463a; }
.band-dark .btn-light { background: var(--brand-deep-2); border-color: var(--brand-deep-2); color: #fff; }
.band-dark .btn-light:hover { background: var(--brand-deep); border-color: var(--brand-deep); }
.cta-list li { color: #33463a; }
.cta-list span { border-color: var(--brand-accent); color: var(--brand-deep-2); }

/* ---- the footer: Pindstrup's, cut out of the sage above it -------------- */
.site-foot {
  position: relative; background: var(--brand-deep-2); color: #c5d8cb;
  border: 0; padding-block: clamp(3.5rem, 6vw, 5rem) 5.5rem;
}
/* No wave between the sage band and the footer: two waves that close
   together read as a pattern rather than as an edge. The hero keeps its
   wave, and so does the top of the band. */
/* Footer column titles are h2s for the outline; they are styled as the
   label so they stop counting as a sixth h2 size. */
.site-foot .foot-h { color: #fff; text-transform: uppercase; letter-spacing: var(--track-label); font-size: var(--fs-label); font-weight: 700; }
.site-foot a { color: #d7e0d4; }
.site-foot a:hover { color: #fff; }
.site-foot p, .site-foot .foot-tag { color: #bed2c4; }
/* EMAIL / PHONE AND WHATSAPP / OFFICE HOURS were --ink-mute, a warm grey
   chosen for pale backgrounds, sitting on dark green. Now a green from the
   same family, so they read as labels rather than as dirt. */
.site-foot .k { color: #8fb79c; }
.site-foot .foot-logo { filter: brightness(0) invert(1); opacity: 0.95; }
.foot-bottom { border-top: 1px solid rgba(255,255,255,0.16); color: #9dbaa8; }

/* The hero buttons were still on the old olive while
   everything around them had moved to the deep green. On a dark photograph a
   deep green fill would disappear, so the primary goes white with dark text -
   the same pair as the button in the bar. */
.hero .btn { background: var(--paper); border-color: var(--paper); color: var(--brand-deep); }
.hero .btn:hover { background: var(--moss-100); border-color: var(--moss-100); color: var(--brand-deep); }
.hero .btn-on-dark { background: transparent; border-color: rgba(255,255,255,0.8); color: #fff; }
.hero .btn-on-dark:hover { background: rgba(255,255,255,0.14); border-color: #fff; color: #fff; }

/* ---- the homepage bar, floating on the hero ----------------------------
   Transparent over the photograph, filling with the navigation gradient as
   soon as the page moves. Fixed rather than sticky, so the hero runs up
   underneath it and the picture starts at the top of the window.
   Because the bar no longer occupies layout space on this page, the hero
   gets its top padding back and loses the same height again - otherwise the
   gap under the bar doubles. */
.site-head--over {
  position: fixed; inset: 0 0 auto;
  background: transparent;
  transition: background .25s ease, box-shadow .25s ease;
}
.site-head--over.is-solid {
  background: linear-gradient(180deg, var(--brand-deep), var(--brand-deep-2));
  box-shadow: var(--shadow-float);
}
.hero-home { min-height: clamp(500px, 58vh, 568px); }
.hero-home .hero-in { padding-block: calc(86px + 1.25rem) clamp(3.5rem, 6vw, 5.5rem); }
/* The owner, 2026-09-18: more room for the photograph, everything else as
   it is. The copy is anchored to the foot of the hero, so extra height is
   extra picture above the headline and nothing below it moves. The photo is
   1920x967, and at 1440px wide a 568px hero showed only the middle band of
   it; ~700px shows nearly the whole frame. Phones keep the old height - a
   landscape photograph cropped to a 390px-wide column gains nothing from
   being taller. */
.hero-home { min-height: clamp(640px, 78vh, 780px); }
@media (max-width: 640px) { .hero-home { min-height: clamp(500px, 58vh, 568px); } }
/* Second pass, same day: about a centimetre taller again, and the copy
   centred in the height rather than sat on the floor - with the extra room
   it had simply slid down. Auto margins on both sides split the spare space
   equally; measured at 1440x900 the block's centre lands within 4px of the
   middle of the strip between the bar and the wave. */
.hero-home .hero-in { margin-block: auto; }

/* A column that runs much shorter than the one beside it leaves a void that
   reads as a layout fault. Tinted and padded, the same space reads as a box
   somebody put there on purpose. */
.panel-soft {
  background: var(--sage);
  border-radius: var(--r-2);
  padding: clamp(1.4rem, 3vw, 2.1rem);
  align-self: start;
}
.panel-soft h2 { margin-top: 0; }

/* A row of panels, all the same height.
   .panel-soft carries align-self:start because beside a long column a short
   panel should NOT stretch into a tall empty box, which is why the logistics
   page uses it. In a ROW of panels the opposite is true: six boxes of six
   different heights read as a fault, and they change height again in every
   language, because Spanish runs longer than English and Korean shorter.
   Stretch them, and pin the links to the foot so those line up too. */
.panel-grid .panel-soft {
  align-self: stretch;
  display: flex; flex-direction: column;
}
.panel-grid .panel-soft > :last-child { margin-top: auto; margin-bottom: 0; }

/* Every row the same height as the tallest, not just every box within its
   own row. Two rows of 223px and 264px still read as two different sizes.
   Not applied in a single column: there each row holds one box, so 1fr would
   stretch a three-line panel to the height of a six-line one on a phone. */
@media (min-width: 640px) {
  .panel-grid { grid-auto-rows: 1fr; }
}
.panel-soft .btn-row { margin-bottom: 0; }

/* ---- grade rows --------------------------------------------------------
   The owner, 2026-09-16, on the 105-row catalogue table: "if I were a user
   and saw 100+ lines of text it would be difficult". Terracult's own
   catalogue is the reference he picked, and the thing it gets right is that
   a row carries a photograph of the actual material, one big word for the
   screen, and three icons. You scan twelve products without reading a
   sentence. The detail lives one click away, not in the row.

   The row is a link, not a card: no border, no shadow, no radius stack. What
   separates two products is the photograph and a hairline, which is what
   keeps eighteen of them from reading as eighteen boxes.                   */
.grade-band {
  display: flex; align-items: baseline; gap: 0.9rem; flex-wrap: wrap;
  background: var(--moss-800); color: #fff;
  padding: 0.55rem var(--gut);
  margin: 2.75rem calc(var(--gut) * -1) 0;
  font-size: var(--fs-label); font-weight: 700;
  letter-spacing: var(--track-label); text-transform: uppercase;
}
.grade-band span { font-weight: 400; letter-spacing: 0.04em; opacity: 0.8; text-transform: none; }

/* The filter hides rows with the hidden attribute. A class that sets display
   outranks the user agent's [hidden] rule, so this has to be stated. */
[hidden] { display: none !important; }

/* Two per line. Taking the application sentence off the row left roughly
   sixty per cent of a full-width row empty, which is worse than the sentence
   was. A half-width row has nothing to pad: the photograph, four short lines
   and the arrow fill it, and eighteen products take nine lines instead of
   eighteen. */
.grade-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 24rem), 1fr));
  column-gap: clamp(1.5rem, 3vw, 3.5rem);
}

.grade-row {
  display: grid;
  /* No arrow column. It sat hard against the cell edge and held a gap open
     to the right of every row, which is the complaint that started this. The
     row is a link, the code is green and the whole row lights up on hover. */
  grid-template-columns: 104px minmax(0, 1fr);
  align-items: center; gap: 1rem;
  padding: 0.8rem 0;
  border-bottom: 1px solid var(--line-soft);
  color: inherit; text-decoration: none;
}
.grade-row:hover { background: var(--moss-50); }

.grade-pic {
  aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--r-2); background: var(--moss-50);
}
.grade-pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.grade-pic.is-empty {
  display: grid; place-items: center;
  border: 1px dashed var(--line);
  color: var(--ink-mute); font-size: var(--fs-small); text-align: center; padding: 0.5rem;
}

.grade-title { font-size: var(--fs-h3); line-height: 1.2; margin: 0; letter-spacing: -0.01em; }
.grade-struct { display: block; font-size: var(--fs-label); font-weight: 700; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--moss-700); margin-top: 0.2rem; }
.grade-code { display: block; font-size: var(--fs-small); color: var(--ink-mute); margin-top: 0.1rem; }
.grade-recipe { display: block; font-size: var(--fs-small); font-weight: 600; color: var(--moss-700); margin-top: 0.15rem; }

.grade-spec { display: flex; align-items: center; gap: 0.45rem; font-size: var(--fs-small); color: var(--ink-soft); margin-top: 0.3rem; }
.grade-spec svg { flex: none; color: var(--moss-600); }

@media (max-width: 520px) {
  .grade-row { grid-template-columns: 76px minmax(0, 1fr); }
}

/* ---- the declaration table on a product page --------------------------- */
.decl { width: 100%; border-collapse: collapse; font-size: var(--fs-small); }
.decl th[scope="row"] { text-align: start; font-weight: 400; color: var(--ink-soft); padding-block: 0.5rem; padding-inline: 0 1rem; width: 47%; }
.decl td { padding: 0.5rem 0; font-variant-numeric: tabular-nums; }
.decl tr + tr th, .decl tr + tr td { border-top: 1px solid var(--line-soft); }
.decl caption {
  caption-side: top; text-align: start;
  font-size: var(--fs-label); font-weight: 700; letter-spacing: var(--track-label); text-transform: uppercase;
  color: var(--moss-800); padding: 1.4rem 0 0.5rem;
}
.decl .en { color: var(--ink-mute); font-size: var(--fs-small); }
.decl .pending { color: var(--ink-mute); font-style: italic; }

/* ---- language picker ---------------------------------------------------
   A dropdown, not a row of codes. Three fitted; the old site offered six and
   the bar has no room for six.

   Built on <details>, so it opens, closes and takes the keyboard with no
   JavaScript at all. The only script is the one thing <details> does not do
   by itself: close when you click somewhere else.

   No flags. A flag is a country, not a language: most Spanish speakers are
   not in Spain, English is not only British, and Arabic has no flag at all.
   On a site that ships to more than 70 countries that is the wrong signal to
   send. The trigger carries the code because the bar is tight; the list
   carries each language's name in its own language, which is what a visitor
   actually recognises. */
.lang { position: relative; }
.lang > summary {
  display: inline-flex; align-items: center; gap: 0.3rem;
  padding: 0.45rem 0.55rem; cursor: pointer; list-style: none;
  font-size: var(--fs-label); font-weight: 700; letter-spacing: 0.07em;
  text-transform: uppercase; opacity: 0.85;
  border-radius: var(--r-1); user-select: none;
}
/* The bar paints its links white through .site-head .nav a:not(.btn). A
   <summary> is not an <a>, so it inherited the page ink instead and sat
   almost black on the hero photograph. */
.site-head .nav .lang > summary { color: #fff; }
.lang > summary::-webkit-details-marker { display: none; }
.lang > summary:hover { opacity: 1; }
.lang > summary:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.lang > summary .chev { transition: transform 0.15s ease; }
.lang[open] > summary { opacity: 1; }
.lang[open] > summary .chev { transform: rotate(180deg); }

.lang-menu {
  position: absolute; top: calc(100% + 0.5rem); inset-inline-end: 0; z-index: 60;
  margin: 0; padding: 0.3rem; list-style: none;
  min-width: 11rem; background: var(--paper); color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--r-1);
  box-shadow: var(--shadow-float);
  /* Twenty-six languages is a list that runs off the bottom of the screen.
     Capped to roughly nine rows and scrolled, so it stays a menu rather than
     becoming a page, and never reaches past the viewport on a laptop. */
  max-height: min(60vh, 24rem);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}
.lang-menu::-webkit-scrollbar { width: 8px; }
.lang-menu::-webkit-scrollbar-thumb { background: var(--line); border-radius: var(--r-1); }
.lang-menu::-webkit-scrollbar-thumb:hover { background: var(--moss-300); }
/* Scoped through .site-head .nav to beat .site-head .nav a:not(.btn), which
   is (0,3,1) and painted these white on a white panel: the codes showed and
   the language names did not. The same specificity trap as the two invisible
   buttons and the chat launcher on the footer. */
.site-head .nav .lang-menu a {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 0.5rem 0.7rem; border-radius: var(--r-1);
  color: var(--ink); font-size: var(--fs-small); text-transform: none; letter-spacing: 0;
  white-space: nowrap; opacity: 1;
}
.site-head .nav .lang-menu a:hover { background: var(--moss-50); }
.site-head .nav .lang-menu a[aria-current="true"] { font-weight: 700; color: var(--brand-deep-2); }
.lang-menu .code { font-size: var(--fs-label); font-weight: 700; color: var(--ink-mute); letter-spacing: 0.07em; }
.lang-menu a[aria-current="true"] .code { color: var(--brand-accent); }

@media (max-width: 1080px) {
  /* THE PHONE MENU WAS WHITE ON WHITE, and had been since the header was
     redesigned: .site-head .nav a:not(.btn) paints every link #fff for the
     dark bar, and the stacked menu drops down on var(--paper). Every item
     was invisible on every page, which is not something a desktop screenshot
     can show you. Found while checking the language picker at 390px.

     Same specificity as the rule it corrects, later in the file, so it wins
     only inside this media query. */
  .site-head .nav a:not(.btn),
  .site-head .nav a[aria-current="page"]:not(.btn) { color: var(--ink); }
  .site-head .nav a[aria-current="page"]:not(.btn) { color: var(--moss-700); font-weight: 700; }
  .site-head .nav .lang > summary { color: var(--ink); }

  /* The bar is a column here, so the picker and the button stack instead of
     squeezing side by side, and the panel sits in the flow rather than
     hanging off the edge of a row that no longer exists. */
  .nav-util { flex-direction: column; align-items: stretch; gap: 0; }
  .lang { border-bottom: 1px solid var(--line-soft); }
  .lang > summary { padding: 0.8rem 0; justify-content: flex-start; }
  .lang-menu {
    position: static; box-shadow: none; min-width: 0;
    border: 0; padding: 0 0 0.5rem 1.4rem; margin: 0;
    max-height: 15rem;  /* the stacked menu is already long without 26 more rows */
  }
  .site-head .nav .lang-menu a { padding: 0.55rem 0; border: 0; justify-content: flex-start; gap: 0.6rem; }

  /* The quote button is white on the dark bar, which on the white stacked
     panel left a white box with a hairline round it. Inverted here so it
     still reads as the one action in the menu. */
  .site-head .nav-util > a:last-child {
    margin-inline-start: 0; margin-top: 0.9rem; text-align: center;
    background: var(--brand-deep); color: #fff;
  }
  .site-head .nav-util > a:last-child:hover { background: var(--brand-deep-2); }
}

/* Measurements on a right-to-left page are isolated in <bdi dir="ltr"> so the
   unit stays after the number. It must not change the line otherwise. */
bdi { unicode-bidi: isolate; }

/* ---- product type headings (the owner, 2026-10-08) ---------------------
   The old site's "Product type: Latvian Sphagnum Peat Moss" sections, which
   is what tells two "Fine, 0-10 mm" grades apart: where the peat is from. */
.type-head {
  margin: 2.75rem 0 0.25rem; padding: 1.1rem 1.25rem 1rem;
  background: var(--sage); border-inline-start: 4px solid var(--moss-700); border-radius: var(--r-2);
}
.type-kicker { margin: 0; font-size: var(--fs-label); font-weight: 700; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--moss-700); }
.type-name { margin: 0.15rem 0 0.35rem; font-size: var(--fs-h3); line-height: 1.2; }
.type-note { margin: 0; font-size: var(--fs-small); color: var(--ink-soft); max-width: 72ch; }
.type-facts { display: flex; flex-wrap: wrap; gap: 0.4rem 1.75rem; margin: 0.7rem 0 0; font-size: var(--fs-small); }
.type-facts div { display: flex; gap: 0.4rem; }
.type-facts dt { color: var(--ink-mute); }
.type-facts dd { margin: 0; font-weight: 600; }

/* ---- the ranges on /substrates/: a name that opens to its products ------ */
.range { border: 1px solid var(--line); border-radius: var(--r-2); background: var(--paper); margin-top: 1rem; overflow: hidden; }
.range > summary {
  list-style: none; cursor: pointer;
  display: grid; grid-template-columns: 168px minmax(0, 1fr) auto; gap: 1.25rem; align-items: center;
  padding: 0.9rem; padding-inline-end: 1.1rem;
}
.range > summary::-webkit-details-marker { display: none; }
.range > summary:hover { background: var(--moss-50); }
.range-pic { aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--r-2); background: var(--sage); }
.range-pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.range-name { margin: 0; font-size: var(--fs-h3); line-height: 1.2; overflow-wrap: break-word; hyphens: auto; -webkit-hyphens: auto; }
.range-note { display: block; margin: 0.3rem 0 0; font-size: var(--fs-small); color: var(--ink-soft); max-width: 70ch; }
.range-count { display: inline-block; margin-top: 0.45rem; font-size: var(--fs-label); font-weight: 700; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--moss-700); }
.range-chev { width: 2.25rem; height: 2.25rem; border-radius: 50%; border: 1px solid var(--line); position: relative; flex: none; }
.range-chev::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 0.55rem; height: 0.55rem;
  border-right: 2px solid var(--moss-700); border-bottom: 2px solid var(--moss-700);
  transform: translate(-50%, -70%) rotate(45deg); transition: transform 0.15s;
}
.range[open] .range-chev::after { transform: translate(-50%, -30%) rotate(225deg); }
.range-body { padding: 0 1.25rem 1.25rem; border-top: 1px solid var(--line-soft); }
.range-type { margin: 1.5rem 0 0.25rem; color: var(--moss-700); }
.range-type small { color: var(--ink-mute); margin-inline-start: 0.4rem; }
@media (max-width: 640px) {
  .range > summary { grid-template-columns: 88px minmax(0, 1fr) auto; gap: 0.85rem; }
  .range-note { display: none; }
}

/* ---- photo gallery at the foot of a page ------------------------------ */
.gal-item { display: block; aspect-ratio: 1 / 1; overflow: hidden; border-radius: var(--r-2); background: var(--sage); }
.gal-item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.25s; }
.gal-item:hover img, .gal-item:focus-visible img { transform: scale(1.04); }

/* ---- the lightbox site.js opens a gallery photo in -------------------- */
.lb { position: fixed; inset: 0; z-index: 2147483600; background: rgba(10, 18, 13, 0.93); display: flex; align-items: center; justify-content: center; padding: 3.5rem 4rem 4.5rem; }
.lb img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: var(--r-2); box-shadow: var(--shadow-float); }
.lb-cap { position: absolute; inset-inline: 1rem; bottom: 1.2rem; margin: 0; text-align: center; color: #fff; font-size: var(--fs-small); }
.lb-count { position: absolute; top: 1.25rem; inset-inline-start: 1.1rem; color: rgba(255, 255, 255, 0.7); font-size: var(--fs-small); }
.lb-btn { position: absolute; width: 3rem; height: 3rem; border-radius: 50%; border: 0; background: rgba(255, 255, 255, 0.12); color: #fff; font-size: 1.75rem; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.lb-btn:hover, .lb-btn:focus-visible { background: rgba(255, 255, 255, 0.28); }
.lb-close { top: 0.75rem; inset-inline-end: 0.75rem; }
.lb-prev { inset-inline-start: 0.6rem; top: 50%; margin-top: -1.5rem; }
.lb-next { inset-inline-end: 0.6rem; top: 50%; margin-top: -1.5rem; }
[dir="rtl"] .lb-prev, [dir="rtl"] .lb-next { transform: scaleX(-1); }
@media (max-width: 600px) { .lb { padding: 3.5rem 0.5rem 4.5rem; } .lb-prev, .lb-next { top: auto; bottom: 3.6rem; margin-top: 0; } }

/* the page's own photograph beside the opening text */
.hero-split { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4rem); align-items: start; }
@media (max-width: 900px) { .hero-split { grid-template-columns: 1fr; } }
/* the peat moss tile on /substrates/ is a link to its own page */
.range-link { display: grid; grid-template-columns: 168px minmax(0, 1fr) auto; gap: 1.25rem; align-items: center; padding: 0.9rem; padding-inline-end: 1.1rem; color: inherit; text-decoration: none; }
.range-link:hover { background: var(--moss-50); }
.range-link .range-name { display: block; font-weight: var(--w-head); color: var(--brand-deep-2); }
.range-go::after { transform: translate(-70%, -50%) rotate(-45deg); }
[dir="rtl"] .range-go::after { transform: translate(-30%, -50%) rotate(135deg); }
@media (max-width: 640px) { .range-link { grid-template-columns: 88px minmax(0, 1fr) auto; gap: 0.85rem; } }

/* ---- the quote pop-up (inc/footer.php) --------------------------------- */
.quote-dlg { border: 0; padding: 0; border-radius: var(--r-2); width: min(760px, calc(100vw - 1.5rem)); max-height: calc(100vh - 1.5rem); box-shadow: var(--shadow-float); color: inherit; background: var(--paper); }
.quote-dlg::backdrop { background: rgba(10, 18, 13, 0.62); }
.quote-dlg-in { position: relative; max-height: calc(100vh - 1.5rem); overflow: auto; padding: 1.6rem clamp(1rem, 4vw, 2rem) 1.4rem; }
.quote-dlg .grid.g-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }
.quote-x { position: absolute; top: 0.7rem; inset-inline-end: 0.7rem; width: 2.5rem; height: 2.5rem; border-radius: 50%; border: 1px solid var(--line); background: var(--paper); font-size: 1.5rem; line-height: 1; cursor: pointer; color: var(--ink-soft); }
.quote-x:hover, .quote-x:focus-visible { background: var(--moss-50); }
.quote-open .sv-chat-launch { display: none; }
/* a tray photograph keeps its fraction label, which sits at the bottom */
.card-img-low img { object-position: 50% 80%; }

/* ---- the three figures on /substrates/ ---------------------------------
   Lost in ba440d8, which left "10pallets per product" running together.
   Restored from before it, for three figures, and written logical so the
   Arabic page mirrors. */
.spec-strip { border-top: 1px solid var(--line); display: grid; grid-template-columns: repeat(3, 1fr); }
.spec-strip div { padding: 1.15rem 1.25rem 1.25rem; border-inline-end: 1px solid var(--line); }
.spec-strip div:last-child { border-inline-end: 0; }
.spec-strip dt { font-size: var(--fs-label); font-weight: 700; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--ink-mute); margin-bottom: 0.3rem; }
.spec-strip dd { margin: 0; font-size: var(--fs-h3); font-weight: var(--w-head); color: var(--moss-900); letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.spec-strip small { display: block; font-size: var(--fs-small); color: var(--ink-mute); font-weight: 400; letter-spacing: 0; margin-top: 0.2rem; }
@media (max-width: 700px) {
  .spec-strip { grid-template-columns: 1fr; }
  .spec-strip div { border-inline-end: 0; border-bottom: 1px solid var(--line); padding-inline: 0; }
}

/* ---- blog ---------------------------------------------------------------
   After the owner's Lauko rubai blog (2026-10-12): chips, a wide featured
   card, cards of three with an eyebrow and "Read", an article with a contents
   list beside it and the questions in tinted boxes. In the --moss ramp. */
.blog-h1 { font-size: var(--fs-h1); margin-bottom: 0.5rem; }
.blog-lede { margin-bottom: 1.5rem; }
.blog-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0 0 2rem; }
.blog-chip {
  cursor: pointer; border: 1px solid var(--line);
  background: #fff; color: var(--ink-soft);
}
.blog-chip:hover { border-color: var(--moss-300); color: var(--moss-800); }
.blog-chip.is-on { background: var(--brand-deep-2); border-color: var(--brand-deep-2); color: #fff; }

/* A card like every other card: a hairline edge, 8 px, no drop shadow (they
   were the only cards on the site with one). */
.blog-card {
  background: #fff; border-radius: var(--r-2); overflow: hidden; display: flex; flex-direction: column;
  border: 1px solid var(--line);
}
.blog-card[hidden] { display: none; }
.blog-card-img { display: block; aspect-ratio: 2 / 1; overflow: hidden; background: var(--moss-50); }
.blog-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .35s ease; }
.blog-card:hover .blog-card-img img { transform: scale(1.03); }
.blog-card-body { padding: var(--card-pad); display: flex; flex-direction: column; flex: 1; }
.blog-eyebrow { font-size: var(--fs-label); font-weight: 700; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--moss-600); margin: 0 0 0.45rem; }
.blog-card-title { font-size: var(--fs-h3); font-weight: var(--w-head); line-height: 1.25; margin: 0 0 var(--card-gap); }
.blog-card-title a { color: var(--ink); text-decoration: none; }
.blog-card-title a:hover { color: var(--moss-800); }
.blog-card-excerpt { font-size: var(--fs-small); color: var(--ink-mute); line-height: 1.55; margin: 0 0 1rem; }
.blog-card-meta {
  margin: auto 0 0; padding-top: 0.75rem; border-top: 1px solid var(--line-soft);
  display: flex; align-items: center; gap: 0.9rem; font-size: var(--fs-small); color: var(--ink-mute);
}
.blog-card-meta span { display: inline-flex; align-items: center; gap: 0.3rem; }
.blog-card-meta b { font-weight: 400; }
.blog-read { margin-inline-start: auto; font-weight: 700; color: var(--moss-700); text-decoration: none; white-space: nowrap; }
.blog-read:hover { color: var(--brand-deep-2); }

.blog-card--featured { flex-direction: row; margin-bottom: 1.75rem; }
.blog-card--featured .blog-card-img { flex: 0 0 58%; aspect-ratio: auto; min-height: 330px; }
.blog-card--featured .blog-card-body { padding: clamp(1.5rem, 3vw, 2.5rem); justify-content: center; }
.blog-card--featured .blog-card-title { font-size: var(--fs-h2); line-height: 1.15; }
.blog-card--featured .blog-card-excerpt { font-size: var(--fs-body); }
.blog-card--featured .blog-card-meta { margin-top: 1.25rem; }

.blog-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.6rem; }
.blog-more-row { text-align: center; margin: 2rem 0 0; }
.blog-ask {
  margin-top: clamp(2.5rem, 5vw, 3.5rem); background: var(--moss-50); border-radius: var(--r-2);
  padding: clamp(1.4rem, 3vw, 2rem) clamp(1.4rem, 4vw, 2.5rem);
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap;
}
.blog-ask h2 { font-size: var(--fs-h3); margin: 0 0 0.3rem; }
.blog-ask p { margin: 0; color: var(--ink-soft); font-size: var(--fs-small); }

/* the article */
.blog-layout { display: grid; grid-template-columns: minmax(0, 720px) 260px; gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.blog-title { font-size: var(--fs-h1); font-weight: var(--w-head); letter-spacing: -0.015em; line-height: 1.1; margin: 0 0 0.9rem; }
.blog-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1.25rem; font-size: var(--fs-small); color: var(--ink-mute); margin: 0 0 1.5rem; }
.blog-meta span { display: inline-flex; align-items: center; gap: 0.35rem; }
.blog-meta b { font-weight: 400; }
.blog-meta-cat { color: var(--moss-700); font-weight: 600; text-decoration: none; }
.blog-cover { margin: 0 0 1.75rem; }
.blog-cover img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--r-2); display: block; }
.blog-cover figcaption { font-size: var(--fs-small); color: var(--ink-mute); padding-top: 0.6rem; }
.blog-en-note { font-size: var(--fs-small); color: var(--ink-mute); background: var(--paper-2); border-radius: var(--r-2); padding: 0.55rem 0.9rem; }
.blog-body { font-size: var(--fs-body); line-height: 1.75; color: var(--ink-soft); }
.blog-body p { margin: 0 0 1.1rem; max-width: none; }
.blog-body .blog-intro { font-size: var(--fs-lead); line-height: 1.5; color: var(--ink); }
.blog-body h2 { font-size: var(--fs-h2); font-weight: var(--w-head); color: var(--ink); line-height: 1.15; margin: 2.4rem 0 0.9rem; scroll-margin-top: 100px; }
.blog-body a { color: var(--moss-700); text-decoration: underline; text-underline-offset: 2px; }
.blog-body a:hover { color: var(--brand-deep-2); }
.blog-list { margin: 0 0 1.2rem; padding-inline-start: 1.15rem; }
.blog-list li { margin: 0 0 0.6rem; padding-inline-start: 0.2rem; }
.blog-list li::marker { color: var(--moss-600); }
.blog-list strong { color: var(--ink); }
.blog-faq { display: grid; gap: 0.75rem; margin-bottom: 1.5rem; }
.blog-faq-item { background: var(--moss-50); border-radius: var(--r-2); padding: 0.95rem 1.15rem; }
.blog-faq-item h3 { font-size: var(--fs-h3); color: var(--ink); margin: 0 0 0.35rem; line-height: 1.25; }
.blog-faq-item p { margin: 0; font-size: var(--fs-body); line-height: 1.65; }
.blog-closing { color: var(--ink); }

.blog-side { position: sticky; top: 110px; display: grid; gap: 1.25rem; }
.blog-toc { border-inline-start: 2px solid var(--moss-200); padding-inline-start: 1rem; }
.blog-toc-h { font-size: var(--fs-label); font-weight: 700; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--ink-mute); margin: 0 0 0.6rem; }
.blog-toc ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.45rem; }
.blog-toc a { font-size: var(--fs-small); line-height: 1.4; color: var(--moss-800); text-decoration: none; }
.blog-toc a:hover { text-decoration: underline; }
.blog-side-ask { background: var(--moss-50); border-radius: var(--r-2); padding: var(--card-pad); }
.blog-side-ask .blog-side-ask-h { font-weight: var(--w-head); color: var(--brand-deep-2); margin: 0 0 var(--card-gap); font-size: var(--fs-h3); line-height: 1.25; letter-spacing: -0.01em; }
.blog-side-ask p { font-size: var(--fs-small); color: var(--ink-soft); margin: 0 0 0.8rem; }
.blog-related { padding-top: 0; }
.blog-related-h { font-size: var(--fs-h3); margin: 0 0 1.25rem; }

@media (max-width: 1000px) {
  .blog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .blog-layout { grid-template-columns: 1fr; }
  .blog-side { position: static; order: -1; }
  .blog-toc { display: none; }
  .blog-side-ask { display: none; }
}
@media (max-width: 680px) {
  .blog-grid { grid-template-columns: 1fr; }
  .blog-card--featured { flex-direction: column; }
  .blog-card--featured .blog-card-img { flex: none; min-height: 0; aspect-ratio: 2 / 1; }
}

/* ---- the bar on narrow desktops -------------------------------------------
   Blog made it seven items, and in the longest languages (Greek, Ukrainian,
   Lithuanian, Romanian) at 1024 to 1100 px the quote button ran past the edge
   and the logo was squeezed to nothing. Between the menu button (1080 px) and
   1320 px the bar tightens: the logo keeps its size, the items sit closer
   and lose some letter spacing, and the button gets slimmer. */
.brand { flex-shrink: 0; }
/* The menu button now takes over below 1080 px (it was 900): seven items in
   the long languages do not fit a laptop bar any narrower. */
@media (min-width: 1081px) and (max-width: 1320px) {
  .head-in { gap: 1.1rem; }
  .brand img { width: 140px; }
  .nav { gap: 0.95rem; }
  .site-head .nav a:not(.btn) { letter-spacing: 0.03em; font-size: 0.8rem; }
  .site-head .nav-util > a:last-child { margin-inline-start: 0.6rem; padding: 0.65rem 0.9rem; letter-spacing: 0.03em; font-size: 0.8rem; }
}

/* No breadcrumbs (Kip, 2026-10-12: "they look useless"). The line above the
   title used to give the first section its gap under the bar, so the first
   section on a page now gets a little more room itself. */
main > section.tight:first-child { padding-top: clamp(2.5rem, 5vw, 4rem); }

/* Blog, round two (Kip, 2026-10-12, after comparing with Lauko rubai):
   - "Show more articles" as their button: centred, a rounded outline in the
     dark green, bold, with how many are left;
   - the article and its contents column as one centred block, not hugging
     the left edge with half the screen empty;
   - "More articles" lined up with it. */
.blog-more-row { max-width: none; }
/* "Show more articles" is the outline secondary button now (see .btn): it
   was a 56 px round outline at 16/700, the one button shaped like no other. */
.blog-more { border-color: var(--moss-600); }
.blog-layout {
  width: 100%; max-width: 1180px; margin-inline: auto;
  grid-template-columns: minmax(0, 800px) 280px; justify-content: center;
}
.blog-related .wrap { width: 100%; max-width: 1180px; margin-inline: auto; }
@media (max-width: 1000px) {
  .blog-layout { grid-template-columns: minmax(0, 1fr); }
}

/* ---- /peatmoss/ as a catalogue ------------------------------------------
   After the printed peat catalogue the owner chose (2026-10-12), made our
   own on 2026-10-14 ("looks like a Terracult copy, upgrade it a bit, change
   the shades"). Same parts in the same order, in the site's own voice:
   - each peat type opens on its title in the heading green, with a hairline
     under it and a short green rule under its start (the old bar's notch,
     without the dark block), then a line about the type and its figures;
   - each grade is a white card with a hairline edge, not a grey band: the
     peat close up in a rounded frame (the tray photo enlarged, so the label
     and the tray edge fall outside), the grade's name in sentence case, its
     structure, what it is for, its figures with small green marks, and the
     code as a chip at the end for the customer who orders by it.
   Colours are the site's tokens only: --line hairlines, --moss-50/100/200
   tints, --moss-600 marks, the heading and link greens. */
.peat-range { margin-top: clamp(2.5rem, 5vw, 3.75rem); scroll-margin-top: 100px; }
.peat-range:first-child { margin-top: 0; }
.peat-bar {
  position: relative; display: flex; align-items: center; gap: 1rem;
  padding: 0 0 0.75rem; border-bottom: 1px solid var(--line);
}
.peat-bar::before {
  content: ""; position: absolute; inset-inline-start: 0; bottom: -2px;
  width: 3rem; height: 3px; background: var(--moss-600);
}
.peat-bar h2 {
  margin: 0; color: var(--brand-deep-2); font-size: var(--fs-h2);
  font-weight: var(--w-head); line-height: 1.15; letter-spacing: -0.012em;
}
.peat-about {
  display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 1rem 2.5rem;
  padding: 1rem 0 1.25rem; font-size: var(--fs-small); color: var(--ink-soft);
}
.peat-about p { margin: 0; max-width: 62ch; }
.peat-about dl { display: flex; flex-wrap: wrap; gap: 0.75rem 0; margin: 0; }
.peat-about dl div { display: grid; gap: 0.1rem; padding-inline: 1.25rem; border-inline-start: 1px solid var(--line); }
.peat-about dl div:first-child { padding-inline-start: 0; border-inline-start: 0; }
.peat-about dl div:last-child { padding-inline-end: 0; }
.peat-about dt { font-size: var(--fs-small); color: var(--ink-mute); line-height: 1.4; }
.peat-about dd { margin: 0; font-weight: 600; color: var(--ink); line-height: 1.4; }

.peat-rows { display: grid; gap: 10px; }
.peat-row {
  display: grid; grid-template-columns: 172px minmax(190px, 250px) minmax(0, 1fr) 190px;
  align-items: center; gap: 0 1.75rem; min-height: 150px;
  padding: 10px; padding-inline-end: 1.5rem;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-2);
  color: inherit; text-decoration: none;
  transition: border-color .2s ease;
}
.peat-row:hover { border-color: var(--moss-300); }
.peat-row:focus-visible { outline: 2px solid var(--moss-600); outline-offset: 3px; }
/* The tray photo enlarged so only peat shows: at 2.15 from just above the
   middle, the tray's rim, the white ground and the label all fall outside
   on every grade (checked on all eighteen). translateZ: Safari leaves a
   zoomed photo's corners square without it. */
.peat-photo { align-self: stretch; min-height: 128px; overflow: hidden; border-radius: var(--r-2); background: var(--moss-100); transform: translateZ(0); }
.peat-photo img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transform: scale(2.15); transform-origin: 50% 45%; transition: transform .4s ease;
}
.peat-row:hover .peat-photo img { transform: scale(2.25); }

.peat-name { display: block; padding-block: 0.9rem; }
.peat-word {
  margin: 0; color: var(--brand-deep-2); font-weight: var(--w-head);
  font-size: var(--fs-h3); line-height: 1.2; letter-spacing: -0.01em;
  overflow-wrap: anywhere;
}
.peat-struct {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.1rem 0.4rem;
  margin-top: 0.55rem; font-size: var(--fs-small); color: var(--ink-mute); line-height: 1.3;
}
.peat-struct b { font-weight: 700; color: var(--moss-800); font-variant-numeric: tabular-nums; }

.peat-detail { display: grid; gap: 0.8rem; padding-block: 0.9rem; }
.peat-use { display: flex; align-items: flex-start; gap: 0.55rem; font-size: var(--fs-small); color: var(--ink-soft); line-height: 1.5; }
.peat-use svg { flex: none; width: 18px; height: 18px; margin-top: 0.1rem; color: var(--moss-600); }
.peat-specs { display: flex; flex-wrap: wrap; gap: 0.55rem 1.5rem; }
.peat-spec { display: inline-flex; align-items: center; gap: 0.45rem; font-size: var(--fs-small); font-weight: 600; color: var(--ink); line-height: 1.3; }
.peat-spec > svg { flex: none; width: 18px; height: 18px; color: var(--moss-600); }
/* The "pH" mark was 9.6 px at 800 inside a 24 px dot, too small to read.
   Now the label size, in a dot just big enough to hold it. */
.peat-ph {
  display: inline-grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 50%;
  background: var(--moss-100); color: var(--moss-800); line-height: 1;
}
.peat-ph b { font-size: var(--fs-label); font-weight: 700; letter-spacing: 0; }

.peat-code {
  display: grid; gap: 0.6rem; justify-items: end; text-align: end;
  font-size: var(--fs-small); color: var(--ink-soft);
}
.peat-chip {
  display: inline-block; padding: 0.3rem 0.6rem; border-radius: var(--r-1);
  background: var(--moss-50); border: 1px solid var(--moss-200); color: var(--moss-900);
  font-size: var(--fs-label); font-weight: 700; letter-spacing: 0.05em; line-height: 1.3;
  white-space: nowrap; font-variant-numeric: tabular-nums;
}
.peat-more { font-size: var(--fs-small); font-weight: 700; color: var(--brand-accent-2); white-space: nowrap; }
.peat-row:hover .peat-more { color: var(--brand-deep-2); text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 1100px) {
  .peat-row { grid-template-columns: 150px minmax(170px, 220px) minmax(0, 1fr); gap: 0 1.5rem; }
  .peat-photo { grid-row: 1 / span 2; }
  .peat-code {
    grid-column: 2 / -1; grid-row: 2; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
    gap: 0.5rem 1rem; padding-block: 0.7rem 0.2rem; border-top: 1px solid var(--line-soft); text-align: start;
  }
}
/* A phone: the type's figures two to a line, the long first one alone. */
@media (max-width: 600px) {
  .peat-about { padding-block: 0.85rem 1rem; }
  .peat-about dl { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem 1rem; }
  .peat-about dl div { padding-inline: 0; border-inline-start: 0; }
  .peat-about dl div:first-child { grid-column: 1 / -1; }
}

/* ---- /substrates/: the peat-type headings inside a range -----------------
   The owner, 2026-10-12: going from one type to the next (Lithuanian to
   Latvian) was barely visible, a line of green text with cards straight
   under it. Each type now opens on a tinted strip with a green edge, the
   same mark the peat moss page uses, with more room above it. */
.range-type {
  display: flex; align-items: center; gap: 0.6rem;
  margin: 2.5rem 0 0.35rem; padding: 0.6rem 0.9rem;
  background: var(--moss-50); border-inline-start: 4px solid var(--moss-600);
  border-radius: 0; border-start-end-radius: var(--r-1); border-end-end-radius: var(--r-1);
  font-size: var(--fs-label); font-weight: 700; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--moss-900);
}
.range-body > [data-type]:first-child .range-type { margin-top: 1.5rem; }
.range-type small {
  margin-inline-start: auto; font-size: var(--fs-small); font-weight: 600; letter-spacing: 0; text-transform: none;
  color: var(--ink-mute); background: #fff; border-radius: var(--r-1); padding: 0.1rem 0.6rem;
}
/* On a substrate the recipe is the large title and the screen the green line
   under it (the owner, 2026-10-12). */
.grade-recipe { margin: 0.2rem 0 0; }

/* ---- /substrates/: an opened range as a catalogue ------------------------
   The owner, 2026-10-12: the same look as the peat moss page. The range's
   recipe once and large at the top (every product in a range shares it),
   then a green bar per peat type and one wide row per screen, a little
   shorter than on /peatmoss/ because a range can hold eighteen. */
.range-body { padding: 0 1.25rem 1.5rem; }
.range-recipe { padding: 1.25rem 0 0.5rem; }
.range-recipe-h { margin: 0 0 0.6rem; font-size: var(--fs-label); font-weight: 700; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--ink-mute); }
.range-recipe dl { display: flex; flex-wrap: wrap; gap: 0.75rem 2.5rem; margin: 0; }
.range-recipe dt { font-size: var(--fs-small); color: var(--ink-mute); margin-bottom: 0.15rem; }
.range-recipe dd { margin: 0; font-size: var(--fs-h3); font-weight: var(--w-head); color: var(--ink); letter-spacing: -0.01em; }
/* Each peat type in an opened range: the same title, rule and mark as on
   /peatmoss/, a size smaller, with the count as a soft chip at the end. */
.peat-range--sub { margin-top: 2rem; }
.peat-range--sub .peat-bar { padding-bottom: 0.6rem; margin-bottom: 12px; }
.peat-range--sub .peat-bar h4 { margin: 0; color: var(--brand-deep-2); font-size: var(--fs-h3); font-weight: var(--w-head); line-height: 1.25; letter-spacing: -0.01em; }
.peat-bar-count {
  margin-inline-start: auto; font-size: var(--fs-small); font-weight: 600; color: var(--moss-800);
  background: var(--moss-50); border: 1px solid var(--moss-200); border-radius: var(--r-1); padding: 0.05rem 0.6rem;
}
.peat-range[hidden], .peat-row[hidden] { display: none; }
/* Substrate rows: no photo, the code is the name, the screen at the end.
   The longest code, SOLVIKA MIX 42250P10, fits its column on one line. */
.peat-row--sub { grid-template-columns: 340px minmax(0, 1fr) 250px; min-height: 0; padding: 0 1.5rem; column-gap: 1.5rem; }
.peat-row--sub .peat-name, .peat-row--sub .peat-detail, .peat-row--sub .peat-code { padding-block: 1rem; }
.peat-row--sub .peat-code { gap: 0.4rem; }
.peat-word--code { letter-spacing: 0; white-space: nowrap; }
.peat-row--sub .peat-code > span:first-child { font-weight: 600; color: var(--ink); white-space: nowrap; }
.peat-row--sub .peat-code b { font-weight: 700; color: var(--moss-800); }
@media (max-width: 1100px) {
  .peat-row--sub { grid-template-columns: 300px minmax(0, 1fr); }
  .peat-row--sub .peat-code { grid-column: 1 / -1; grid-row: 2; padding-block: 0.7rem 0.8rem; }
}
@media (max-width: 760px) {
  .range-body { padding-inline: 0.75rem; }
  .range-recipe dl { gap: 0.6rem 1.5rem; }
}
/* Phones: every part of a card placed explicitly. The tablet rule above
   sends the code to row 2 beside a two-row photo, which on a phone pushed
   the photo into the second column. */
@media (max-width: 760px) {
  .peat-row { grid-template-columns: 104px minmax(0, 1fr); gap: 0 1rem; min-height: 0; padding-inline-end: 1rem; }
  .peat-row .peat-photo { grid-column: 1; grid-row: 1 / span 2; min-height: 0; }
  .peat-row .peat-name { grid-column: 2; grid-row: 1; padding-block: 0.45rem 0.1rem; }
  .peat-row .peat-detail { grid-column: 2; grid-row: 2; padding-block: 0.5rem 0.4rem; gap: 0.55rem; }
  .peat-row .peat-code { grid-column: 1 / -1; grid-row: 3; margin-top: 10px; padding: 0.7rem 0.15rem 0.1rem; }
  .peat-specs { gap: 0.45rem 1rem; }
  .peat-row--sub { grid-template-columns: minmax(0, 1fr); padding: 0 1rem; }
  .peat-row--sub .peat-name { grid-column: 1; grid-row: 1; padding-block: 0.85rem 0.1rem; }
  .peat-row--sub .peat-detail { grid-column: 1; grid-row: 2; padding-block: 0.5rem 0.8rem; }
  .peat-row--sub .peat-code { grid-column: 1; grid-row: 3; margin: 0; padding: 0.7rem 0 0.8rem; }
}

/* ==== 2026-10-12, the owner after comparing with his Lauko rubai shop ======
   1. One centred column of about 1340 px on every page, gaps both sides, so
      the eye stays in the middle instead of travelling edge to edge. The bar
      and the footer keep their full-width colour; what is in them lines up
      with the column. width: 100% matters: .hero-home is a column flex
      container, and a flex child with auto inline margins and no width
      shrinks to its content.
   2. Sections closer together: 192 px between two sections at a wide screen
      was most of a screen of white. */
.wrap { width: 100%; max-width: calc(1340px + 2 * var(--gut)); margin-inline: auto; }
.wrap-narrow { width: 100%; max-width: calc(1340px + 2 * var(--gut)); margin-inline: auto; }
.wrap-narrow > * { max-width: 760px; }
.figure-trio { max-width: calc(1340px + 2 * var(--gut)); margin-inline: auto; padding-inline: var(--gut); }
section { padding-block: clamp(2rem, 3.5vw, 3.25rem); }
section.tight { padding-block: clamp(1.5rem, 2.6vw, 2.25rem); }
main > section.tight:first-child { padding-top: clamp(2rem, 3.5vw, 3rem); }

/* 3. The gallery: ten photographs at most (inc/gallery.php), two rows of five
      on a computer, two across on a phone (the owner, 2026-10-16). */
.gallery { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin: 1.1rem 0 0; }
.gal-item { width: auto; aspect-ratio: 4 / 3; border-radius: var(--r-2); }
@media (max-width: 760px) { .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } }
/* A two-column section with its photo on the left, so neighbouring sections
   alternate. Phones keep text first, then the photo. */
@media (min-width: 800px) { .g-2.flip > :last-child { order: -1; } }
/* The closing band carries .tight as well, and the tighter section.tight above
   (same weight, later) cut its top padding to 36 px, so the heading touched
   the wave. Its own padding again: the wave's height plus the gap. */
section.band-dark.tight {
  padding-block: calc(clamp(34px, 4vw, 62px) + clamp(2.25rem, 4vw, 3.5rem)) clamp(2.25rem, 4vw, 3.5rem);
}

/* ---- UX review fixes, 2026-10-12 ---------------------------------------- */
/* The quote form's spam trap. Clipped to nothing rather than pushed 9999px
   off to one side: in Arabic that side is the scrolling side, and the page
   and the pop-up opened ten thousand pixels wide. */
.hp { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* iPhone Safari zooms the page in on any field under 16px and leaves it
   zoomed. */
@media (max-width: 600px) {
  .field input, .field select, .field textarea { font-size: var(--fs-body); }
}

/* The pop-up's close button stays in view while the form scrolls: on a
   phone the form is three screens long and there is no Escape key. */
.quote-x { position: sticky; top: 0; display: block; margin-block: -0.35rem -2.15rem; margin-inline: auto -0.6rem; z-index: 2; box-shadow: var(--shadow-float); }
#quoteDlgTitle { padding-inline-end: 3rem; min-height: 1.9rem; }
.crop-card { scroll-margin-top: 100px; }
.cat-none { margin-top: 1.25rem; }

/* ---- visual review fixes, 2026-10-12 ------------------------------------ */
/* Outlines and field edges at 3:1 or better. #e2e0d6 on white was 1.3:1,
   so the second buttons and every field read as disabled. */
.btn-ghost { border-color: var(--moss-600); }
.field input, .field select, .field textarea { border-color: #a3a196; }

/* One height for every field: the selects were 6px shorter than the inputs
   beside them. And a label that wraps no longer pushes its field below its
   neighbour's. */
.field select { min-height: 2.95rem; }
form .grid.g-2 { align-items: end; }

/* The loading tables on a phone: the pallet column, the one people come
   for, was cut off behind a scroll nobody could see. */
@media (max-width: 560px) {
  table.spec th, table.spec td { padding: 0.6rem 0.5rem; }
  table.spec thead th, table.spec td:first-child { white-space: normal; }
}

.blog-eyebrow { color: var(--moss-700); }

/* Blog headings in the site's green, like every other heading. */
.blog-body h2, .blog-faq-item h3, .blog-card-title a { color: var(--brand-deep-2); }

/* One corner radius for photos, document rows and tables. */
.figure-trio img, .dl a, .table-scroll { border-radius: var(--r-2); }
.table-scroll { overflow: hidden; overflow-x: auto; }

/* No single word left alone on a paragraph's last line. */
p, li, .lede, .faq-item summary { text-wrap: pretty; }

/* Arabic has no Archivo and no capitals, so the menu's letter-spacing only
   thinned it. */
[dir="rtl"] .site-head .nav a:not(.btn) { letter-spacing: 0; font-size: var(--fs-body); }
/* ...but not the language names in the picker, which keep the small size. */
[dir="rtl"] .site-head .nav .lang-menu a { font-size: var(--fs-small); }

/* ---- the bar below 1080px: quote button + menu icon (2026-10-12) -------- */
.head-quote { display: none; }
.nav-toggle .i-close { display: none; }
.nav-toggle[aria-expanded="true"] .i-open { display: none; }
.nav-toggle[aria-expanded="true"] .i-close { display: block; }
@media (max-width: 1080px) {
  .head-in { gap: 0.75rem; }
  .head-quote {
    display: inline-flex; align-items: center; justify-content: center; text-align: center;
    background: var(--paper); color: var(--brand-deep-2); text-decoration: none;
    padding: 0.65rem 1rem; border-radius: var(--r-1); min-height: 44px;
    text-transform: uppercase; letter-spacing: 0.06em; font-size: var(--fs-label); font-weight: 700;
    white-space: nowrap; line-height: 1.15;
  }
  .head-quote:hover { background: var(--sage); color: var(--brand-deep-2); }
  .nav-toggle { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; }
  .site-head--over.menu-open { background: linear-gradient(180deg, var(--brand-deep), var(--brand-deep-2)); }
  /* The open menu has its own quote link at the bottom; the bar keeps one. */
}
@media (max-width: 440px) {
  .brand img { width: 128px; }
  .head-quote { letter-spacing: 0.04em; padding: 0.5rem 0.7rem; white-space: normal; max-width: 9.5rem; }
}
[dir="rtl"] .head-quote { letter-spacing: 0; font-size: var(--fs-small); }
@media (max-width: 1080px) { .site-head .nav-util > a:last-child { display: none; } }

/* ---- one heading scale (visual review, 2026-10-12) ----------------------
   Page titles were 62px on five inner pages and 48px on four others, and a
   section heading could be 22px or 48px on the same page, depending on
   whether it carried an inline size. The sizes this block set now live in
   the type tokens at the top (type system A, 2026-10-15), where a heading
   inside a panel or a column is h3 whatever its inline size says. The
   min-height that lined up the three product cards' text also left a 30 px
   hole under every one-line title (the crop tiles' gap), so it is gone. */
/* "More articles" spans exactly the article plus its sidebar, so both rows
   start and end on the same lines (it sat 36px inside them at 1440). */
@media (min-width: 1001px) {
  .blog-related .wrap { max-width: calc(800px + 280px + clamp(2rem, 5vw, 4.5rem) + 2 * var(--gut)); }
}

/* Home: the crop tiles (audit, 2026-10-12). Wider photographs than the
   product cards, so six tiles do not push "What we produce" a screen down. */
.crop-grid .card-img { aspect-ratio: 16 / 9; }
/* Six tiles: three by two on a wide screen, never four and two. */
@media (min-width: 900px) { .crop-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 560px) and (max-width: 899px) { .crop-grid { grid-template-columns: repeat(2, 1fr); } }
/* Links on the pale green panels: #3e7a52 on #e6f2e9 was 4.43:1, just under
   WCAG AA. One step darker passes (Lighthouse, 2026-10-12). */
.panel-soft a:not(.btn) { color: #33684a; }
/* (Was .panel-soft a, which also painted the dark green buttons in a panel
   dark green: "Request a transport quotation" on /logistics/ all but vanished.) */


/* ---- product pages, the owner's picks of 2026-10-14 ------------------------ */
/* "Packed and shipped": one card per pack (option B of the mockups). */
.pk-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; margin-top: 1.5rem; }
/* On a wide screen the text sits left and the cards fill the right, so one
   or two packs no longer leave a blank half page (Kip, 2026-10-14: "it feels
   empty"). A single pack is one wide card, photo beside its figures. */
@media (min-width: 900px) {
  .packing .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.75fr); column-gap: clamp(2rem, 5vw, 4rem); align-items: start; }
  .packing .wrap > :not(.pk-cards) { grid-column: 1; }
  .packing .pk-cards { grid-column: 2; grid-row: 1 / span 5; margin-top: 0; }
  .pk-card:only-child { flex-direction: row; }
  .pk-card:only-child img, .pk-card:only-child .pk-noimg { width: 46%; aspect-ratio: 4 / 3; height: auto; flex: none; }
  .pk-card:only-child dl { font-size: var(--fs-body); }
  .pk-card:only-child .pk-card-b { flex: 1; align-self: center; }
}
.pk-card { border: 1px solid var(--line); border-radius: var(--r-2); background: #fff; overflow: hidden; display: flex; flex-direction: column; }
.pk-card img, .pk-noimg { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: var(--paper-2); display: block; }
.pk-card-b { padding: var(--card-pad); }
.pk-card h3 { font-size: var(--fs-h3); margin: 0 0 var(--card-gap); }
.pk-card dl { display: grid; grid-template-columns: 1fr auto; gap: 0.35rem 1rem; margin: 0; font-size: var(--fs-small); }
.pk-card dt { color: var(--ink-mute); }
.pk-card dd { margin: 0; font-weight: 600; text-align: end; font-variant-numeric: tabular-nums; }
.pk-card .pk-big { grid-column: 1 / -1; border-top: 1px solid var(--line-soft); padding-top: 0.6rem; margin-top: 0.25rem; display: flex; justify-content: space-between; font-size: var(--fs-body); }
.pk-mixed { font-size: var(--fs-small); color: var(--ink-soft); margin-top: 1rem; max-width: 70ch; }

/* The three facts under the name, on a phone only (option B): the desktop
   lede already says them. */
.pp-facts { display: none; }
@media (max-width: 900px) {
  .pp-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.45rem; margin: 0.9rem 0 1rem; }
  .pp-facts div { background: var(--moss-50); border-radius: var(--r-2); padding: 0.55rem 0.6rem; min-width: 0; }
  .pp-facts b { display: block; font-size: var(--fs-body); color: var(--moss-900); overflow-wrap: anywhere; }
  .pp-facts span { font-size: var(--fs-small); color: var(--ink-mute); }
  /* Photo first: the product, then its name (option B). */
  .pp-top > .pp-media { order: -1; }
  .pp-top .grade-photo, .pp-top .pp-media > img { aspect-ratio: 16 / 10; object-fit: cover; }
  /* The price button lives in the bar at the bottom of the screen. */
  .pp-top .btn-row .pp-price { display: none; }
}

/* The price button that stays on screen on a phone (option B). */
.pp-sticky { display: none; }
@media (max-width: 900px) {
  .pp-sticky {
    display: flex; gap: 0.5rem; position: fixed; inset-inline: 0; bottom: 0; z-index: 800;
    padding: 0.65rem var(--gut) calc(0.65rem + env(safe-area-inset-bottom));
    background: #fff; border-top: 1px solid var(--line); box-shadow: var(--shadow-float);
  }
  .pp-sticky .btn { flex: 1; justify-content: center; }
  body.has-sticky { padding-bottom: 76px; }
  body.has-sticky .sv-chat-launch { bottom: calc(80px + env(safe-area-inset-bottom)); }
}

/* Substrate pages: the pack first, the raw peat it is made from beside it. */
.pp-peat { display: grid; grid-template-columns: 88px 1fr; gap: 0.8rem; align-items: center; margin-top: 0.8rem; font-size: var(--fs-small); color: var(--ink-mute); }
.pp-peat img { width: 88px; height: 66px; object-fit: cover; border-radius: var(--r-2); }

/* FAQ: search above the first topic, a link on every answer, its guide. */
.faq-search { margin: 0 0 1.75rem; }
.faq-search input { width: 100%; max-width: 560px; padding: 0.8rem 1rem; border: 1px solid #b9b7aa; border-radius: var(--r-1); font: inherit; background: #fff; }
.faq-none { margin: 0.75rem 0 0; color: var(--ink-soft); }
.faq-item[hidden], .faq-group[hidden] { display: none; }
.faq-item:target { scroll-margin-top: 110px; }
.faq-link { display: inline-flex; vertical-align: -2px; margin-inline-start: 0.35rem; color: var(--ink-mute); opacity: 0.7; }
.faq-link:hover { color: var(--brand-deep-2); opacity: 1; }
.faq-guide { margin-top: -0.35rem; font-size: var(--fs-small); }

/* /logistics/: one card per delivery term (the owner's pick, 2026-10-14). */
.ic-cards { display: grid; grid-template-columns: 1fr; gap: 1rem; margin-top: 1.5rem; }
@media (min-width: 600px) { .ic-cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .ic-cards { grid-template-columns: repeat(3, 1fr); } }
.ic-card { border: 1px solid var(--line); border-radius: var(--r-2); padding: var(--card-pad); background: #fff; display: flex; flex-direction: column; }
.ic-card h3 { margin: 0; font-size: var(--fs-h3); letter-spacing: 0.02em; color: var(--moss-900); }
.ic-card .ic-full { font-size: var(--fs-small); color: var(--ink-mute); margin: 0 0 0.75rem; }
.ic-card ul { list-style: none; margin: 0; padding: 0; font-size: var(--fs-small); display: grid; gap: 0.35rem; }
.ic-card li { display: grid; grid-template-columns: 0.7rem 1fr; gap: 0.55rem; align-items: baseline; }
.ic-card li::before { content: ""; width: 0.62rem; height: 0.62rem; border-radius: 50%; transform: translateY(0.05rem); }
.ic-card li.us::before { background: var(--moss-600); }
.ic-card li.you { color: var(--ink-mute); }
.ic-card li.you::before { background: #fff; border: 1.5px solid #b9b3a1; }
.ic-card .ic-hand { margin: auto 0 0; padding-top: 0.75rem; border-top: 1px solid var(--line-soft); font-size: var(--fs-small); }
.ic-card ul + .ic-hand { margin-top: 0.85rem; }

/* Quote form: "How much" as four choices (2026-10-14). */
.qf-volume { border: 0; padding: 0; margin-inline: 0; min-width: 0; }
.qf-volume legend { font-size: var(--fs-small); font-weight: 600; margin-bottom: 0.45rem; padding: 0; }
.qf-chips { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.qf-chips label { position: relative; margin: 0; font-weight: 400; }
.field .qf-chips input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; margin: 0; cursor: pointer; }
.qf-chips span { border: 1px solid #a3a196; background: #fff; }
.qf-chips input:checked + span { background: var(--brand-deep-2); border-color: var(--brand-deep-2); color: #fff; }
.qf-chips input:focus-visible + span { outline: 2px solid var(--moss-500); outline-offset: 2px; }
.qf-volume .hint { font-size: var(--fs-small); color: var(--ink-mute); margin: 0.45rem 0 0; }

/* /contacts/: WhatsApp beside the number, "Open now" (2026-10-14). */
.ct-wa { display: inline-flex; align-items: center; gap: 0.35rem; margin-inline-start: 0.6rem; color: #1f7a3a; font-weight: 600; white-space: nowrap; }
.ct-open { display: inline-flex; align-items: center; gap: 0.45rem; font-size: var(--fs-small); font-weight: 600; color: var(--moss-800); margin: 0.75rem 0 0; }
.ct-open::before { content: ""; width: 0.55rem; height: 0.55rem; border-radius: 50%; background: var(--moss-500); box-shadow: 0 0 0 3px var(--moss-100); }
.ct-open.is-closed { color: var(--ink-mute); }
.ct-open.is-closed::before { background: #b9b3a1; box-shadow: none; }

/* /peatmoss/: the filter buttons over the grades (2026-10-14). */
.gf-bar { display: flex; flex-wrap: wrap; gap: 0.7rem 1.6rem; align-items: center; padding: 0.4rem 0 1.25rem; margin-bottom: 1.5rem; border-bottom: 1px solid var(--line); }
.gf-bar[hidden] { display: none; }
.gf-group { display: flex; flex-wrap: wrap; gap: 0.35rem; align-items: center; }
.gf-group > span { font-size: var(--fs-label); font-weight: 700; text-transform: uppercase; letter-spacing: var(--track-label); color: var(--ink-mute); margin-inline-end: 0.25rem; }
.gf-group button { border: 1px solid var(--line); background: #fff; color: var(--ink); cursor: pointer; }
.gf-group button:hover { border-color: var(--brand-accent); }
.gf-group button[aria-pressed="true"] { background: var(--brand-deep-2); border-color: var(--brand-deep-2); color: #fff; }
.gf-count { margin: 0 0 0 auto; font-size: var(--fs-small); color: var(--ink-mute); }
.peat-range[hidden] { display: none; }
@media (max-width: 760px) { .gf-bar { gap: 0.8rem; } .gf-count { margin-inline-start: 0; width: 100%; } }
.gf-group button:disabled { opacity: 0.4; cursor: default; border-color: var(--line); }

/* Cookies, like Nailana (2026-10-14): a card over a dimmed page. */
.cs-dlg { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 1rem; background: rgba(20, 30, 22, 0.45); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.cs-dlg[hidden] { display: none; }
.cs-card { width: 100%; max-width: 460px; background: #fff; border-radius: var(--r-2); padding: clamp(1.25rem, 4vw, 1.75rem); box-shadow: var(--shadow-float); }
.cs-h { font-size: var(--fs-h3); font-weight: var(--w-head); line-height: 1.25; margin: 0 0 0.6rem; color: var(--brand-deep-2); }
.cs-card p { color: var(--ink-soft); line-height: 1.6; }
.cs-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; margin-top: 1.25rem; }
.cs-btns .btn { justify-content: center; }
@media (max-width: 420px) { .cs-btns { grid-template-columns: 1fr; } .cs-btns .btn-ghost { order: 2; } }
.cs-more { text-align: center; font-size: var(--fs-small); margin: 1rem 0 0; }
html.consent-open { overflow: hidden; }

/* Crop pages (/crops/, the owner's pick of 2026-10-14). */
.cp-why { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1.25rem; margin-top: 1.25rem; }
.cp-why div { border-top: 3px solid var(--moss-600); padding-top: 0.85rem; color: var(--ink-soft); }
.cp-why b { display: block; margin-bottom: 0.3rem; color: var(--ink); }
.cp-pick { display: grid; grid-template-columns: 112px minmax(0, 1fr) auto; gap: 1.1rem; align-items: center; padding: 0.9rem 1.1rem; border: 1px solid var(--line); border-radius: var(--r-2); background: #fff; text-decoration: none; color: var(--ink); }
.cp-pick + .cp-pick { margin-top: 0.7rem; }
.cp-pick:hover { border-color: var(--moss-400); }
.cp-pick img, .cp-noimg { width: 112px; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-2); background: var(--paper-2); display: block; }
.cp-pick-b { display: grid; gap: 0.3rem; min-width: 0; }
.cp-pick-h { font-size: var(--fs-h3); font-weight: var(--w-head); line-height: 1.25; color: var(--moss-900); }
.cp-pick-h .chip { margin: 0 0 0 0.35rem; vertical-align: middle; }
.cp-pick-p { font-size: var(--fs-small); color: var(--ink-soft); }
.cp-more { font-size: var(--fs-small); font-weight: 600; color: var(--brand-deep-2); white-space: nowrap; }
@media (max-width: 700px) { .cp-pick { grid-template-columns: 84px minmax(0, 1fr); } .cp-pick img, .cp-noimg { width: 84px; } .cp-more { grid-column: 2; } }

/* The bar ends in a soft wave, the same family of curve as the hero's and the
   band above the footer (the owner, 2026-10-14: the green bar is fine, maybe
   waves like the footer). Kept green rather than a photograph: the links
   stay readable on every page and the home page already opens on the bog.
   Only on the white-top pages: over a photograph the bar has none (below). */
.site-head::after {
  /* Starts 2px up under the bar: a page scaled in a browser's phone preview
     or zoom rounds the two edges apart and showed a hairline between them. */
  content: ""; position: absolute; inset-inline: 0; top: calc(100% - 2px);
  height: calc(clamp(10px, 1.4vw, 18px) + 2px); pointer-events: none;
  background: no-repeat center top / 100% 100% url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 24' preserveAspectRatio='none'%3E%3Cpath fill='%231f4630' d='M0,0 H1440 V9 C1330,20 1220,24 1080,16 C900,6 760,4 600,14 C440,24 280,22 150,12 C90,7 40,7 0,10 Z'/%3E%3C/svg%3E");
  filter: drop-shadow(0 3px 4px rgba(16,32,22,0.18));
  transition: opacity .25s ease;
}
/* Over a photograph the bar has no wave, also once it fills in on scroll: its
   wave above the hero's own wave read as a sea (the owner, 2026-10-15). It
   keeps its straight edge and shadow (.site-head--over.is-solid). */
.site-head--over::after { content: none; }
/* The open phone menu is its own panel; no wave hanging under it. */
.site-head.menu-open::after { opacity: 0; }
/* A white-top page once it scrolls: a straight edge and the shadow, no wave. */
.site-head.is-scrolled::after { opacity: 0; }
.site-head.is-scrolled { box-shadow: var(--shadow-float); }

/* /substrates/: a crop typed into the search offers its crop page. */
.cat-crop { margin: 0 0 1.25rem; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.cat-crop a { background: var(--moss-50); border: 1px solid var(--moss-200); color: var(--brand-deep-2); text-decoration: none; }
.cat-crop a:hover { border-color: var(--brand-accent); }
.cat-crop[hidden], .cat-crop a[hidden] { display: none; }

/* Guides next to a page (2026-10-14). */
.guides { margin-top: 2rem; }
.guides-h { font-size: var(--fs-h3); margin: 0 0 0.6rem; }
.faq-codes { margin-top: -0.4rem; font-size: var(--fs-small); }

/* Print (tech review, 2026-10-14): a product page printed as 7 A4 pages with
   the menu, the chat button, the sticky price bar repeated on every page and a
   white-on-white logo. Now it prints the content, about two pages. */
@media print {
  @page { margin: 14mm 12mm; }
  html, body { background: #fff !important; color: #111 !important; }
  .nav, .nav-toggle, .nav-util, .head-quote, .lang, .pp-sticky, .band-dark,
  .gallery-sec, .site-foot .grid, .quote-dlg, .cs-dlg, #consent,
  [class^="sv-chat"], [class*=" sv-chat"], .btn-row, .btn, .faq-search, .gf-bar,
  .site-head::after { display: none !important; }
  .site-head { position: static !important; background: none !important; box-shadow: none !important; border-bottom: 1pt solid #1f4630; }
  .site-head .brand img { filter: none !important; }
  body.has-sticky { padding-bottom: 0 !important; }
  section, .tight, .band { padding-top: 6mm !important; padding-bottom: 6mm !important; background: #fff !important; }
  .grid, .pp-top, .packing .wrap { display: block !important; }
  img { max-height: 6cm; width: auto !important; max-width: 100% !important; break-inside: avoid; }
  h1, h2, h3 { break-after: avoid; color: #111 !important; }
  table, .pk-card, .faq-item, dl { break-inside: avoid; }
  details > *:not(summary) { display: block !important; }
  a { color: #111 !important; text-decoration: none; }
  .foot-bottom { font-size: 9pt; }
}

/* One visible focus ring for keyboard users on links and buttons (tech review,
   2026-10-14): they fell back to the browser's thin blue default. */
a:focus-visible, button:focus-visible, .btn:focus-visible { outline: 2px solid var(--moss-500); outline-offset: 2px; }
.band-dark a:focus-visible, .band-dark .btn:focus-visible, .site-head a:focus-visible, .site-head button:focus-visible { outline-color: #fff; }
.pk-card .pk-big { margin-top: 0.6rem; }

/* ==========================================================================
   REGIONS FOR THE 2026-10-15 BUILD. Each chunk adds its rules under its own
   marker and nowhere else in this file, so parallel branches merge without
   conflicts. The tokens they use are at the top (type system A): sizes
   --fs-*, corners --r-1/--r-2/--r-pill, --shadow-float, --btn-h, --chip-h,
   --card-pad and --card-gap. A new size or corner is a question for the
   type system, not a literal here.
   ========================================================================== */

/* == section-hero == */
/* Section hero A (inc/section-hero.php): the home hero, shorter. A grid, not
   absolute layers, so that on a phone the line can leave the photograph and
   sit under the wave on white without being printed twice. Rows: the title,
   then the line, which takes the spare height. On a computer the words start
   at the same height under the bar on every page; anchored to the foot, a
   one-line title (/substrates/) started lower than a two-line one
   (/peatmoss/) (the owner, 2026-10-15). The photograph and its gradient span
   both rows on a computer and only the first on a phone. */
/* Title and line sit in the middle of the photograph: equal spare space
   above and below them (the owner, 2026-10-16: a one-line title such as
   /substrates/ sat too high, a two-line one like /about/ looked right). Rows:
   spare, title, line, spare. */
.hero-section {
  display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: 1fr auto auto 1fr;
  /* One height for every section page (the owner, 2026-10-16: /substrates/
     and /logistics/ are right, /peatmoss/ and /about/ grew with their
     two-line titles); only the home page is taller. The text's own padding
     is small so two lines and a button fit inside it; a much longer
     translation may still add a little. */
  height: clamp(420px, 31vw, 470px); min-height: min-content;
  background: var(--paper); overflow: hidden;
}
/* The overlay lives on the photograph, so the white under a phone's wave stays white. */
.hero-section::after { content: none; }
.hero-section .hero-img { position: relative; inset: auto; grid-area: 1 / 1 / 5 / 2; background: var(--brand-deep); overflow: hidden; }
/* --sh-cut keeps the top of a photograph out of sight at any width: the img is
   taller than the band by that share and pinned to the bottom. */
.hero-section .hero-img img {
  position: absolute; inset: auto 0 0 0; width: 100%; height: calc(100% / (1 - var(--sh-cut, 0)));
  object-fit: cover; object-position: var(--sh-pos, 50% 50%); opacity: 1; border-radius: 0;
}
/* The home hero's left gradient, plus a soft top band so the floating bar
   reads on a bright sky as well as on the bog, and a foot band under the
   title and the line. Without the foot band the white line fell to about
   3:1 on the bright parts of the seedling, tray and plug photographs
   (/substrates/, the vegetable and flower crop pages); with it the
   brightest 2% of the photograph behind any word is 4.5:1 or better at
   1440 and 390 on every section hero (measured 2026-10-15). */
/* Lighter (the owner, 2026-10-16: "avoid dark colours", the photographs read
   dark): a shade only behind the words at the top left, nothing at the foot
   now that the words start at the top, and a soft shadow on the words keeps
   them readable on a bright photograph. */
.hero-section .hero-img::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(16,26,18,.42) 0, rgba(16,26,18,0) 140px),
    linear-gradient(105deg, rgba(16,26,18,.62) 0%, rgba(16,26,18,.28) 50%, rgba(16,26,18,0) 100%);
}
[dir="rtl"] .hero-section .hero-img::after {
  background:
    linear-gradient(180deg, rgba(16,26,18,.42) 0, rgba(16,26,18,0) 140px),
    linear-gradient(255deg, rgba(16,26,18,.62) 0%, rgba(16,26,18,.28) 50%, rgba(16,26,18,0) 100%);
}
.sh-title { grid-area: 2 / 1; align-self: end; position: relative; z-index: 2; padding-top: calc(86px + 1rem); }
.hero-section h1 { color: #fff; max-width: 22ch; margin: 0; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25), 0 2px 22px rgba(0, 0, 0, 0.3); }
.hero-section .sh-line { text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45), 0 1px 16px rgba(0, 0, 0, 0.45); }
.sh-lead { grid-area: 3 / 1; align-self: start; position: relative; z-index: 2; padding-block: 0.85rem calc(clamp(34px, 4vw, 62px) + 1rem); }
.hero-section .sh-line { margin: 0; color: #e6eae2; max-width: 60ch; }
/* Over the line's own bottom padding, which already leaves room for it, so
   its height is not counted twice. */
.hero-section .hero-wave { position: relative; grid-area: 3 / 1 / 5 / 2; align-self: end; bottom: auto; margin-bottom: -1px; }
/* A hero with no line: the title row carries the wave. */
.hero-section--bare { grid-template-rows: 1fr auto 1fr; }
.hero-section--bare .hero-img { grid-area: 1 / 1 / 4 / 2; }
.hero-section--bare .hero-wave { grid-area: 2 / 1 / 4 / 2; }
.hero-section--bare .sh-title { padding-bottom: calc(clamp(34px, 4vw, 62px) + 1rem); }
/* What follows the opening: the rest of the introduction, as body text. */
.sh-after p { max-width: 68ch; }
.sh-after > .wrap > :last-child { margin-bottom: 0; }
/* /crops/: the closing line under the tiles, the whole sentence the link. */
.crops-more { margin-top: 2rem; font-weight: 600; }

@media (max-width: 760px) {
  .hero-section { height: auto; min-height: 0; grid-template-rows: auto auto; }
  .hero-section .hero-img, .hero-section .hero-wave { grid-area: 1 / 1; }
  .sh-lead { grid-area: 2 / 1; }
  .sh-title {
    grid-area: 1 / 1;
    min-height: 340px; display: flex; flex-direction: column; justify-content: flex-end;
    padding-top: calc(86px + 1.5rem); padding-bottom: calc(clamp(34px, 4vw, 62px) + 1.25rem);
  }
  .hero-section h1 { max-width: none; }
  .sh-lead { padding-block: 1.25rem 0; }
  .hero-section .sh-line { color: var(--ink-soft); text-shadow: none; }
}

/* Phone home hero (design.md section 6, finding 12): only the title and one
   white button on the photograph, the lead under the wave on white. The
   computer layout is untouched: .hero-in only dissolves here, so its three
   children become rows of the same grid as the section hero. */
@media (max-width: 760px) {
  .hero-home {
    display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto auto;
    min-height: 0; background: var(--paper); overflow: hidden;
  }
  .hero-home::after { content: none; }
  .hero-home .hero-img { position: relative; inset: auto; grid-area: 1 / 1 / 3 / 2; background: var(--brand-deep); overflow: hidden; }
  .hero-home .hero-img img { position: absolute; inset: 0; }
  .hero-home .hero-img::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(105deg, rgba(16,26,18,.78) 0%, rgba(16,26,18,.42) 48%, rgba(16,26,18,.14) 100%);
  }
  .hero-home .hero-in { display: contents; }
  .hero-home h1 {
    grid-area: 1 / 1; align-self: end; position: relative; z-index: 2; max-width: none;
    margin: 0; padding: calc(86px + 3.5rem) var(--gut) 0;
  }
  .hero-home .btn-row { grid-area: 2 / 1; position: relative; z-index: 2; margin: 0; padding: 1.5rem var(--gut) calc(clamp(34px, 4vw, 62px) + 1.75rem); }
  .hero-home .btn-row .btn-on-dark { display: none; }
  .hero-home .hero-wave { position: relative; grid-area: 2 / 1; align-self: end; bottom: auto; margin-bottom: -1px; }
  .hero-home .hero-in > p { grid-area: 3 / 1; margin: 0; padding: 1.25rem var(--gut) 0; color: var(--ink-soft); max-width: none; }
}
[dir="rtl"] .hero-home::after,
[dir="rtl"] .hero-home .hero-img::after {
  background: linear-gradient(255deg, rgba(16,26,18,.78) 0%, rgba(16,26,18,.42) 48%, rgba(16,26,18,.14) 100%);
}
/* Crop pages: "Request a price" in the opening, under the line. White on
   the photograph (.hero .btn); on a phone the line and the button sit on
   the white under the wave, so the button is the dark one there. */
.sh-btns { margin-top: 1.25rem; }
@media (max-width: 760px) {
  .hero-section .sh-btns .btn { background: var(--brand-deep-2); border-color: var(--brand-deep-2); color: #fff; }
  .hero-section .sh-btns .btn:hover { background: var(--brand-deep); border-color: var(--brand-deep); color: #fff; }
}
/* */
/* */
/* */
/* */
/* */
/* */
/* == product-top == */
/* The top of the 105 product pages (product page option B, 2026-10-15,
   inc/product-top.php) and the "how much do I need" box on the packing
   cards (how-much option B, inc/packing.php, assets/js/howmuch.js). */
section.pt-top { padding-top: clamp(1rem, 2vw, 1.5rem); }

/* The breadcrumb: the whole trail on a computer, one line back on a phone. */
.pt-crumb { font-size: var(--fs-small); color: var(--ink-mute); margin: 0 0 1.25rem; }
.pt-crumb ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; row-gap: 0.15rem; }
.pt-crumb li { display: inline-flex; align-items: center; min-width: 0; }
.pt-crumb li + li::before { content: "\203A"; margin-inline: 0.55rem; color: var(--moss-400); font-weight: 700; }
.pt-crumb a { color: var(--ink-soft); text-decoration: none; }
.pt-crumb a:hover { color: var(--brand-deep-2); text-decoration: underline; }
.pt-crumb [aria-current] { color: var(--ink); font-weight: 600; }
.pt-back { display: none; }
@media (max-width: 760px) {
  .pt-crumb ol { display: none; }
  .pt-back { display: flex; align-items: center; gap: 0.3rem; max-width: 100%; min-height: var(--chip-h); color: var(--brand-deep-2); font-weight: 600; text-decoration: none; }
  .pt-back span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
  .pt-back svg { flex: none; }
  [dir="rtl"] .pt-back svg { transform: scaleX(-1); }
  .pt-crumb { margin-bottom: 0.75rem; }
}

/* Photo left, everything else right; one column on a phone, photo first. */
.pt-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); column-gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.pt-media { position: sticky; top: 110px; min-width: 0; }
.pt-text { min-width: 0; }
.pt-text h1 { margin-bottom: 0.4rem; }
.pt-lede { margin: 0.6rem 0 0; }
@media (max-width: 900px) {
  .pt-grid { grid-template-columns: minmax(0, 1fr); }
  .pt-media { position: static; margin-bottom: 1.25rem; }
}

/* The frame: the peat close-up (grade-*-crop.webp, cut from inside the
   tray by tools/photo-variants.js) shown at its own size, no CSS scaling.
   Enlarging the whole tray photo 2.3 times here is what made it soft; that
   stays only as the fallback for a grade photo without a cut (.is-zoom,
   2.3 from 46% is clean on the tray photos). The pack photos fill the frame
   whole. */
.pt-frame { position: relative; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--r-2); background: var(--moss-100); transform: translateZ(0); }
.pt-frame > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: none; }
.pt-frame > img.is-on { display: block; }
.pt-frame > img.is-zoom { transform: scale(2.3); transform-origin: 50% 46%; }
.pt-chip { position: absolute; inset-inline-start: 12px; bottom: 12px; }
.pt-chip > span { display: inline-block; font-size: var(--fs-label); font-weight: 700; line-height: 1; letter-spacing: 0.02em; color: #fff; background: var(--moss-950); border-radius: var(--r-1); padding: 7px 9px; }
.pt-chip > span[hidden] { display: none; }
.pt-thumbs { position: absolute; inset-inline-end: 10px; bottom: 10px; display: flex; gap: 6px; }
.pt-thumbs[hidden] { display: none; }
/* No float shadow: the thumbnails sit on the photo, they do not float over
   the page (one shadow, for things that do). The white edge separates them. */
.pt-thumb { width: 64px; aspect-ratio: 4 / 3; padding: 0; border: 2px solid #fff; border-radius: var(--r-1); overflow: hidden; background: var(--moss-100); cursor: pointer; transform: translateZ(0); }
.pt-thumb img { width: 100%; height: 100%; object-fit: cover; }
.pt-thumb.is-zoom img { transform: scale(2.3); transform-origin: 50% 46%; }
.pt-thumb[aria-pressed="true"] { border-color: #fff; box-shadow: 0 0 0 2px var(--moss-700); }
.pt-thumb:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
/* On a phone the packs are in "Packed and shipped" just below, and the
   thumbnails would add their downloads to the first screen. */
@media (max-width: 600px) { .pt-thumbs, .pt-thumbs[hidden] { display: none; } }
.pt-cap { margin: 0.6rem 0 0; font-size: var(--fs-small); color: var(--ink-mute); max-width: none; }

/* Under the photo: the screen on its ruler, and the packs. */
.pt-glance { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1rem 2rem; align-items: start; margin: 1rem 0 0; padding: var(--card-pad); border: 1px solid var(--line); border-radius: var(--r-2); background: #fff; }
.pt-glance dt { font-size: var(--fs-label); font-weight: 700; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--moss-800); margin-bottom: 0.3rem; }
.pt-glance dd { margin: 0; font-size: var(--fs-small); }
.pt-glance dd b { font-weight: 600; }
.pt-ruler { display: block; width: 100%; max-width: 210px; height: auto; margin-top: 0.45rem; overflow: visible; direction: ltr; }
.pt-ruler-bg { fill: var(--moss-100); }
.pt-ruler-on { fill: var(--moss-600); }
.pt-ruler-tick { stroke: var(--moss-300); stroke-width: 1; }
.pt-ruler-txt { fill: var(--ink-mute); font-size: 8.5px; font-family: inherit; }
.pt-packs { display: flex; align-items: flex-end; gap: 0.9rem; flex-wrap: wrap; }
.pt-pack { display: inline-flex; flex-direction: column; align-items: center; gap: 0.25rem; }
.pt-pack svg { display: block; }
.pt-pack small { font-size: var(--fs-label); font-weight: 700; color: var(--ink); line-height: 1.1; white-space: nowrap; }
.pt-pk-bag { fill: var(--moss-600); }
.pt-pk-bale { fill: var(--moss-800); }
.pt-pk-line { fill: none; stroke: #fff; stroke-opacity: 0.55; stroke-width: 1.2; }
.pt-pk-label { fill: #fff; fill-opacity: 0.85; }
/* A phone has the three fact tiles under the name instead. */
@media (max-width: 900px) { .pt-glance { display: none; } }

/* "Used for": the crop pages that pick this product, as chips. */
.pt-used { display: flex; flex-wrap: wrap; align-items: center; gap: 0.45rem; margin: 1rem 0 0; }
.pt-label { font-size: var(--fs-label); font-weight: 700; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--ink-mute); margin-inline-end: 0.3rem; }
.pt-used a { display: inline-flex; align-items: center; gap: 0.4rem; min-height: var(--chip-h); padding: 0 1rem; border-radius: var(--r-pill); background: var(--moss-50); border: 1px solid var(--moss-200); color: var(--brand-deep-2); font-size: var(--fs-small); font-weight: 600; line-height: 1.2; text-decoration: none; }
.pt-used a:hover { border-color: var(--brand-accent); background: #fff; }
.pt-used svg { color: var(--moss-600); flex: none; }

.pt-btns { margin-top: 1.25rem; }
.pt-btns .btn svg { flex: none; }
.pt-note { font-size: var(--fs-small); margin: 0.75rem 0 0; }
.pt-table { margin-top: 0.5rem; }
.pt-table th[scope="row"] { width: 44%; }
.pt-table + .pt-note { margin-top: 1rem; }

/* What it is used for, and the folded prose. */
.pt-h { font-size: var(--fs-h3); margin-top: 0; }
.pt-folds .pt-fold > p { font-size: var(--fs-body); }
.pt-folds .pt-fold > p + p { margin-top: -0.4rem; }

/* "Packed and shipped": the text column keeps its own height when the
   cards beside it are taller, instead of spreading its lines apart. */
@media (min-width: 900px) {
  .packing .wrap { grid-template-rows: repeat(4, auto) 1fr; }
}
.pk-need { margin: 1.25rem 0 0; padding: var(--card-pad); border: 1px solid var(--moss-200); border-radius: var(--r-2); background: var(--moss-50); max-width: 34rem; scroll-margin-top: 110px; }
.pk-need-h { font-size: var(--fs-h3); margin: 0 0 0.75rem; }
.pk-need-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.65rem; }
.pk-need-row label { font-weight: 600; }
.pk-need-row input { width: 7.5rem; min-height: var(--btn-h); padding: 0 0.75rem; border: 1px solid #a3a196; border-radius: var(--r-1); background: #fff; color: var(--ink); font: inherit; font-size: var(--fs-body); font-variant-numeric: tabular-nums; }
.pk-need-row input:focus { outline: 2px solid var(--moss-500); outline-offset: 1px; border-color: var(--moss-600); }
.pk-need-row > span { font-weight: 600; }
.pk-need-note { font-size: var(--fs-small); color: var(--ink-soft); margin: 0.75rem 0 0; }
.pk-res { margin-top: 0.9rem; padding: 0.75rem 0.9rem; border-radius: var(--r-2); background: var(--moss-50); }
.pk-res[hidden], .pk-res [hidden] { display: none; }
.pk-res-h { font-size: var(--fs-label); font-weight: 700; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--moss-800); margin: 0 0 0.35rem; }
.pk-res dd b { font-weight: 600; }

@media print {
  .pt-thumbs, .pt-back, .pk-need, .pt-used { display: none !important; }
  .pt-media { position: static; }
  .pt-frame { max-width: 9cm; }
  .pt-frame > img { max-height: none; width: 100% !important; }
}
/* "Packed and shipped": each card's total on the same line as its
   neighbour's, at the card's foot, whatever the rows above it. */
.pk-card-b { flex: 1; display: flex; flex-direction: column; }
.pk-card dl { margin-bottom: 0.6rem; }
.pk-card .pk-big { margin-top: auto; }
/* A phone: the PDF buttons are full width under Request a price (which is in
   the bar at the foot of the screen there), not a ragged row. */
@media (max-width: 760px) {
  .pt-btns .btn { flex: 1 1 100%; }
}
/* */
/* */
/* */
/* */
/* */
/* */
/* == lists == */
/* The catalogue lists, /peatmoss/ and /substrates/ (2026-10-15, search A and
   ranges A): one search box over all 105 products, the chip bars (the
   /peatmoss/ chips, now links, also inside each range on /substrates/), the
   short product lines, the crop pages a crop word opens, and the panel for
   a search that finds nothing. Markup: inc/catalogue-search.php. */
.lists { scroll-margin-top: 90px; }
.lists [hidden] { display: none !important; }
/* An old range's anchor is a mark at the top of the merged range, so the
   browser's own jump to it and the script's land on the same place. */
.range { position: relative; scroll-margin-top: 100px; }
.lists-alias { position: absolute; top: 0; inset-inline-start: 0; height: 0; scroll-margin-top: 100px; }

/* the box */
.lists-search { margin: 0 0 0.5rem; }
.lists-search label { display: block; margin-bottom: 0.4rem; font-size: var(--fs-small); font-weight: 600; color: var(--ink); }
.lists-search label .hint { font-weight: 400; color: var(--ink-mute); }
.lists-search-row { display: flex; gap: 0.75rem; align-items: stretch; max-width: 46rem; }
.lists-scope { margin-top: 1.75rem; scroll-margin-top: 100px; }
.lists-search input {
  flex: 1 1 auto; min-width: 0; min-height: var(--btn-h); padding: 0 1rem;
  font: inherit; font-size: var(--fs-body); color: var(--ink); background: var(--paper);
  border: 1px solid var(--moss-300); border-radius: var(--r-1);
  -webkit-appearance: none; appearance: none;
}
.lists-search input::placeholder { color: var(--ink-mute); }
.lists-search input:focus { outline: 2px solid var(--moss-600); outline-offset: -1px; border-color: var(--moss-600); }
.lists-search input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.lists-count, .lists-hint { margin: 0.6rem 0 0; font-size: var(--fs-small); color: var(--ink-mute); max-width: none; }
.lists-count b { color: var(--ink); }
.lists-hint { color: var(--moss-800); }
.lists-hint b { font-weight: 700; }
.lists-match { margin: 0.9rem 0 0; font-size: var(--fs-small); font-weight: 600; }
.lists-head { margin-top: clamp(2rem, 4vw, 2.75rem); }

/* a crop word: the crop's page, then its picks */
.lists-crop { margin-top: 1rem; padding: var(--card-pad); background: var(--moss-50); border: 1px solid var(--moss-200); border-radius: var(--r-2); }
.lists-crop-h { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 1rem; align-items: center; color: inherit; text-decoration: none; }
.lists-crop-pic { display: block; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--r-2); background: var(--moss-100); }
.lists-crop-pic img { width: 100%; height: 100%; object-fit: cover; }
.lists-crop-t { display: block; font-size: var(--fs-h3); font-weight: var(--w-head); line-height: 1.25; color: var(--brand-deep-2); }
.lists-crop-l { display: block; margin: 0.25rem 0 0.35rem; font-size: var(--fs-small); color: var(--ink-soft); }
.lists-crop-go { font-size: var(--fs-small); font-weight: 700; color: var(--brand-accent-2); }
.lists-crop-h:hover .lists-crop-t { text-decoration: underline; text-underline-offset: 3px; }
.lists-picks { margin-top: 1rem; }
.lists-picks > p:not(.lists-sub) { font-size: var(--fs-small); margin: 0 0 0.75rem; }
.lists-sub { margin: 0 0 0.5rem; font-size: var(--fs-label); font-weight: 700; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--ink-mute); }
.lists-picks .lists-row + .lists-row { margin-top: var(--card-gap); }

/* one product as a short line */
.lists-row {
  display: grid; grid-template-columns: 12.75rem minmax(0, 1fr) auto; gap: 0.35rem 1rem; align-items: center;
  padding: 0.75rem 1rem; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-2);
  color: inherit; text-decoration: none; transition: border-color .2s ease;
}
.lists-row:hover { border-color: var(--moss-300); }
.lists-row:focus-visible { outline: 2px solid var(--moss-600); outline-offset: 3px; }
.lists-row > .peat-chip { justify-self: start; }
.lists-row-t b { display: block; font-weight: 700; color: var(--brand-deep-2); line-height: 1.3; }
.lists-row-t small { display: block; margin-top: 0.15rem; font-size: var(--fs-small); color: var(--ink-mute); line-height: 1.4; }
.lists-row:hover .peat-more { color: var(--brand-deep-2); text-decoration: underline; text-underline-offset: 3px; }
.lists-rows { display: grid; gap: var(--card-gap); margin-top: var(--card-gap); }
.lists-extra-h { margin: clamp(2.5rem, 5vw, 3.5rem) 0 0.25rem; }

/* nothing found */
.lists-none { margin-top: 1rem; }
.lists-none-q { margin: 0 0 0.5rem; font-size: var(--fs-small); color: var(--ink-soft); }
.lists-none-q b { color: var(--ink); }
.lists-none h3 { margin: 0 0 0.4rem; }
.lists-none p:not(.lists-none-q) { margin: 0 0 1rem; }

/* a range tile with the bag cut-out on a soft green panel (packshots A) */
.range-pic.lists-pack { position: relative; background: var(--moss-100); }
.range-pic.lists-pack img { position: absolute; inset: 8% 0 10%; z-index: 1; width: 100%; height: 82%; object-fit: contain; object-position: 50% 100%; }
.range-pic.lists-pack::after {
  content: ""; position: absolute; inset-inline: 28%; bottom: calc(10% - 6px); height: 12px;
  background: radial-gradient(closest-side, rgba(20, 48, 31, 0.3), rgba(20, 48, 31, 0));
}
/* what the additive chip will offer, in the closed range */
.lists-adds { display: block; margin-top: 0.3rem; font-size: var(--fs-small); color: var(--ink-soft); }
.lists-adds-h { margin-inline-end: 0.35rem; font-size: var(--fs-label); font-weight: 700; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--ink-mute); }

/* the chips are links now (they work without the script) */
.gf-group a {
  display: inline-flex; align-items: center; min-height: var(--chip-h); padding: 0 1rem; border-radius: var(--r-pill);
  font-size: var(--fs-small); font-weight: 600; line-height: 1.2; white-space: nowrap;
  border: 1px solid var(--line); background: var(--paper); color: var(--ink); text-decoration: none;
}
.gf-group a:hover { border-color: var(--brand-accent); color: var(--ink); }
.gf-group a[aria-current="true"] { background: var(--brand-deep-2); border-color: var(--brand-deep-2); color: #fff; }
.gf-group a[aria-disabled="true"] { opacity: 0.4; pointer-events: none; }
.gf-group a:focus-visible { outline: 2px solid var(--moss-600); outline-offset: 2px; }
.range-body .lists-bar { margin: 1rem 0 0.5rem; }
.gf-count b { color: var(--ink); }
.lists-empty { margin-top: 1.25rem; }
.lists-empty p { margin: 0 0 0.75rem; font-size: var(--fs-small); color: var(--ink-soft); }

@media (max-width: 760px) {
  .lists-row { grid-template-columns: minmax(0, 1fr); padding: 0.75rem 0.9rem; }
  .lists-row > .peat-chip { justify-self: start; }
  .lists-row > .peat-more { display: none; }
  .lists-crop-h { grid-template-columns: 84px minmax(0, 1fr); gap: 0.85rem; align-items: start; }
  .lists-crop-l { display: none; }
  /* Phone: each chip group is one row that scrolls sideways, instead of
     wrapping to about eight lines above the first product. */
  .lists-bar { flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 0.55rem; }
  .lists-bar .gf-group {
    flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none;
    padding: 2px; margin: -2px;
  }
  .lists-bar .gf-group::-webkit-scrollbar { display: none; }
  .lists-bar .gf-group > * { flex: none; }
  .lists-bar .gf-count { width: auto; margin: 0.15rem 0 0; }
}
@media (max-width: 640px) {
  .lists-adds { display: none; }
}
/* A chip row that scrolls sideways on a phone fades out on the side that
   has more (assets/js/site.js marks it), so a chip cut at the edge reads as
   "there is more" rather than as a word cut in half. */
@media (max-width: 760px) {
  .lists-bar .gf-group.more-end { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 3rem), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 3rem), transparent); }
  .lists-bar .gf-group.more-start { -webkit-mask-image: linear-gradient(to right, transparent, #000 3rem); mask-image: linear-gradient(to right, transparent, #000 3rem); }
  .lists-bar .gf-group.more-start.more-end { -webkit-mask-image: linear-gradient(to right, transparent, #000 3rem, #000 calc(100% - 3rem), transparent); mask-image: linear-gradient(to right, transparent, #000 3rem, #000 calc(100% - 3rem), transparent); }
  [dir="rtl"] .lists-bar .gf-group.more-end { -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 3rem), transparent); mask-image: linear-gradient(to left, #000 calc(100% - 3rem), transparent); }
  [dir="rtl"] .lists-bar .gf-group.more-start { -webkit-mask-image: linear-gradient(to left, transparent, #000 3rem); mask-image: linear-gradient(to left, transparent, #000 3rem); }
  [dir="rtl"] .lists-bar .gf-group.more-start.more-end { -webkit-mask-image: linear-gradient(to left, transparent, #000 3rem, #000 calc(100% - 3rem), transparent); mask-image: linear-gradient(to left, transparent, #000 3rem, #000 calc(100% - 3rem), transparent); }
}
/* */
/* */
/* */
/* */
/* */
/* */
/* == nav == */
/* The panel under Substrates: By crop and By range (crops menu B,
   2026-10-15). inc/header.php draws it as a <details> beside the Substrates
   link, so it needs no script; site.js adds hover on a mouse, Escape and a
   click outside. */
.nav-dd { display: flex; align-items: center; position: relative; }
.nav-more > summary {
  display: flex; align-items: center; justify-content: center;
  width: 12px; height: 30px;
  list-style: none; cursor: pointer; opacity: 0.85; border-radius: var(--r-1);
}
.site-head .nav .nav-more > summary { color: #fff; }
.nav-more > summary::-webkit-details-marker { display: none; }
.nav-more > summary:hover, .nav-more[open] > summary { opacity: 1; }
.nav-more > summary:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.nav-more > summary svg { flex: none; transition: transform 0.15s ease; }
.nav-more[open] > summary svg { transform: rotate(180deg); }
.nav-dd:hover > a:not(.btn)::after { transform: scaleX(1); }

.nav-panel {
  position: absolute; top: calc(100% + 0.5rem); inset-inline-start: -1.3rem; z-index: 60;
  display: grid; grid-template-columns: repeat(2, minmax(11rem, max-content)); gap: 0 1.5rem;
  width: max-content; max-width: min(40rem, calc(100vw - 2 * var(--gut)));
  padding: 0.75rem 0.6rem 0.6rem;
  background: var(--paper); color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--r-2);
  box-shadow: var(--shadow-float);
}
/* The 0.5rem between the link and the panel still counts as the panel, so
   the mouse can travel down into it without it closing. */
.nav-panel::before { content: ""; position: absolute; inset-inline: 0; bottom: 100%; height: 0.6rem; }
.nav-panel ul { list-style: none; margin: 0; padding: 0; }
.nav-ph {
  margin: 0 0 0.3rem; padding-inline: 0.7rem;
  font-size: var(--fs-label); font-weight: 700; letter-spacing: var(--track-label);
  text-transform: uppercase; color: var(--ink-mute);
}
/* Scoped like the language menu, to beat .site-head .nav a:not(.btn) (white,
   capitals, tracked) and its right-to-left size. */
.site-head .nav .nav-panel a:not(.btn) {
  display: block; padding: 0.45rem 0.7rem; border-radius: var(--r-1);
  color: var(--ink); font-size: var(--fs-small); font-weight: 600;
  text-transform: none; letter-spacing: 0; white-space: normal; line-height: 1.35;
}
/* Arabic reads at the body size in the bar, and so it does here. */
[dir="rtl"] .site-head .nav .nav-panel a:not(.btn) { font-size: var(--fs-body); }
.site-head .nav .nav-panel a:not(.btn)::after { display: none; }
.site-head .nav .nav-panel a:not(.btn):hover { background: var(--moss-50); color: var(--brand-deep-2); }
.site-head .nav .nav-panel a[aria-current="page"]:not(.btn) { color: var(--brand-deep-2); background: var(--moss-50); }
.site-head .nav .nav-panel .nav-all { margin-top: 0.3rem; padding-top: 0.3rem; border-top: 1px solid var(--line-soft); }
.site-head .nav .nav-panel .nav-all a:not(.btn) { color: var(--brand-accent-2); }

/* Room for the arrow. The bar was already full in the longest languages:
   at 1081 px Greek, Albanian, Serbian, Ukrainian and Slovenian ran 2 to 23 px
   into the right-hand margin, and at 1321 px (the full-size logo comes back)
   up to 17 px. So the spacing comes in a little at the narrow end of each
   size of bar and is back to what it was 65 px (small bar) and 120 px (full
   bar) further on. No type size changes. Measured in all 36 languages at
   1081, 1150, 1240, 1321 and 1440 px. */
@media (min-width: 1081px) and (max-width: 1320px) {
  /* 0.6rem at the narrow end since Contact joined the bar (2026-10-16). */
  .nav { gap: clamp(0.6rem, calc(0.6rem + (100vw - 1081px) * 0.06), 0.95rem); }
  .site-head .nav a:not(.btn) { letter-spacing: clamp(0.02em, calc(0.02em + (100vw - 1081px) * 0.002), 0.03em); }
  .lang > summary { padding-inline: 0.4rem; gap: 0.2rem; }
  .site-head .nav-util > a:last-child {
    margin-inline-start: 0.4rem; padding-inline: 0.75rem;
    letter-spacing: clamp(0.02em, calc(0.02em + (100vw - 1081px) * 0.002), 0.03em);
  }
}
@media (min-width: 1321px) {
  .nav { gap: clamp(1rem, calc(1rem + (100vw - 1321px) * 0.047), 1.35rem); }
  .site-head .nav-util > a:last-child { margin-inline-start: clamp(1rem, calc(1rem + (100vw - 1321px) * 0.1), 1.75rem); }
}

@media (max-width: 1080px) {
  /* A sub-list inside the menu: the arrow is a 48 px square at the end of
     the Substrates row, the lists open under it. */
  .nav-dd { display: block; }
  .nav-dd > a { display: block; padding-inline-end: 3.5rem; }
  .nav-more > summary {
    position: absolute; top: 0; inset-inline-end: 0; margin: 0;
    /* As tall as the Substrates row: its line plus the 0.35rem above and
       below that .nav a:not(.btn) gives every row in this menu. */
    width: 48px; height: calc(var(--lh-body) * var(--fs-small) + 0.7rem);
    border-inline-start: 1px solid var(--line-soft); border-radius: 0; opacity: 1;
  }
  [dir="rtl"] .nav-more > summary { height: calc(var(--lh-body) * var(--fs-body) + 0.7rem); }
  .site-head .nav .nav-more > summary { color: var(--ink); }
  .nav-more > summary svg { width: 12px; height: 12px; }
  .nav-panel {
    position: static; display: grid; grid-template-columns: 1fr; gap: 0.6rem;
    width: auto; max-width: none; padding: 0.6rem 0 0.75rem; padding-inline-start: 1rem;
    border: 0; border-bottom: 1px solid var(--line-soft); border-radius: 0; box-shadow: none;
  }
  .nav-panel::before { display: none; }
  .nav-ph { padding-inline: 0; }
  .site-head .nav .nav-panel a:not(.btn) { padding: 0.5rem 0; border: 0; }
  .site-head .nav .nav-panel a:not(.btn):hover,
  .site-head .nav .nav-panel a[aria-current="page"]:not(.btn) { background: none; }
  .site-head .nav .nav-panel .nav-all { margin-top: 0; padding-top: 0; border: 0; }
  /* With the lists open the menu is taller than a phone, so it scrolls. */
  .nav.open { max-height: calc(100dvh - 86px); overflow-y: auto; overscroll-behavior: contain; }
}
/* The footer's "By crop" list under Products: the label style, in the
   green the footer's other small labels use (.site-foot .k). */
.site-foot .foot-sub {
  margin: 1.5rem 0 0.75rem; font-size: var(--fs-label); font-weight: 700; line-height: 1.4;
  letter-spacing: var(--track-label); text-transform: uppercase; color: #8fb79c;
}
/* The bar's "Request a quote" in the one button system: 44 px (48 on a
   phone), 14/600, normal case, like every .btn on the site. It was a 46 px
   capitalised 14/700 box on a computer, 17 px on the Arabic pages (the
   right-to-left rule for the menu links caught it) and a two-line 13/700
   box on a phone. White on the dark bar, the .btn-light pair. */
.site-head .nav-util > a:last-child,
.head-quote {
  align-items: center; justify-content: center;
  min-height: var(--btn-h); padding: 0 1.25rem; border: 1px solid var(--paper); border-radius: var(--r-1);
  background: var(--paper); color: var(--brand-deep-2);
  font-size: var(--fs-small); font-weight: 600; line-height: 1.2; letter-spacing: 0.01em;
  text-transform: none; white-space: nowrap;
}
.site-head .nav-util > a:last-child { display: inline-flex; }
@media (max-width: 1080px) { .site-head .nav-util > a:last-child { display: none; } }
.site-head .nav-util > a:last-child::after { display: none; }
.site-head .nav-util > a:last-child:hover, .head-quote:hover { background: var(--sage); border-color: var(--sage); color: var(--brand-deep-2); }
[dir="rtl"] .site-head .nav-util > a:last-child, [dir="rtl"] .head-quote { font-size: var(--fs-small); letter-spacing: 0; }
@media (min-width: 1081px) and (max-width: 1320px) {
  .site-head .nav-util > a:last-child { padding-inline: 0.75rem; }
}
/* A phone: the logo a little smaller and the gaps a little closer, so the
   longest label (Bulgarian, Slovenian, Greek, about 132 px) stays on one
   line beside the menu icon. Under 380 px it may wrap rather than push the
   menu icon off the bar. */
@media (max-width: 440px) {
  .head-in { gap: 0.625rem; }
  .brand img { width: 120px; }
  .head-quote { padding: 0 0.75rem; max-width: none; letter-spacing: 0.01em; }
}
@media (max-width: 379px) {
  .head-quote { white-space: normal; text-align: center; }
}

/* Menus are panels: 8 px like the crops panel, not a 4 px button corner. */
.lang-menu { border-radius: var(--r-2); }

/* THE PHONE MENU (under 1080 px). It dropped down as far as its links went
   and the page showed, and scrolled, underneath; it now runs to the foot of
   the screen and the page behind stands still (site.js sets menu-lock).
   Every row is a 44 px target: the links were 34 px, the crop and range
   links 35 and the languages 40. The 36 languages were a 240 px box that
   scrolled inside the scrolling menu; they are two columns in the menu
   itself now. The lock only applies where the phone menu exists: a tablet
   turned to landscape with the menu open no longer leaves the page frozen
   (review of #19). */
@media (max-width: 1080px) {
  html.menu-lock { overflow: hidden; }
  .nav.open { height: calc(100dvh - 86px); max-height: none; overflow-y: auto; overscroll-behavior: contain; padding-bottom: 2rem; }
  .site-head .nav > a:not(.btn), .site-head .nav-dd > a:not(.btn) { display: flex; align-items: center; min-height: 44px; padding-block: 0.35rem; }
  .nav-more > summary, [dir="rtl"] .nav-more > summary { height: 44px; }
  .site-head .nav .nav-panel a:not(.btn) { display: flex; align-items: center; min-height: 44px; padding-block: 0.25rem; }
  .lang > summary { min-height: 44px; }
  .lang-menu { max-height: none; overflow: visible; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1rem; border-radius: 0; }
  .site-head .nav .lang-menu a { min-height: 44px; padding-block: 0.25rem; white-space: normal; }
}
/* */
/* */
/* */
/* */
/* */
/* */
/* == crop-compare == */
/* "Our picks" on a crop page as one comparison table (inc/crop-compare.php).
   A table from 1280 px, a card per pick under that (side by side while
   they fit). Facts every pick shares sit in the box above, once. */
.cc { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.75rem; }
/* A long translation can make the table wider than the page: then it
   scrolls inside its own box, never the page. */
.cc-scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-2); background: var(--paper); }
.cc-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.cc-nw { white-space: nowrap; }
.cc-common { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem 1.5rem; padding: 0.9rem var(--card-pad); border: 1px solid var(--moss-200); border-radius: var(--r-2); background: var(--moss-50); }
.cc-common-h { margin: 0; font-size: var(--fs-label); font-weight: 700; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--moss-800); }
.cc-common dl { display: flex; flex-wrap: wrap; gap: 0.4rem 1.5rem; margin: 0; font-size: var(--fs-small); }
.cc-common dl > div { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.15rem 0.45rem; }
.cc-common dt { color: var(--ink-mute); }
.cc-common dd { margin: 0; font-weight: 600; color: var(--ink); }
.cc-common .cc-m3 { display: inline-flex; flex-wrap: wrap; gap: 0.15rem 1rem; }
.cc-common .cc-m3 li { display: inline-flex; gap: 0.4rem; }

.cc-t { width: 100%; border-collapse: collapse; font-size: var(--fs-small); }
.cc-t thead th { text-align: start; vertical-align: bottom; padding: 0.75rem 0.9rem; font-size: var(--fs-label); font-weight: 700; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--moss-900); background: var(--moss-50); border-bottom: 1px solid var(--moss-200); }
.cc-t tbody th, .cc-t td { text-align: start; vertical-align: top; padding: 1rem 0.9rem; border-top: 1px solid var(--line-soft); font-weight: 400; color: var(--ink); }
.cc-t tbody tr:first-child > * { border-top: 0; }
.cc-prod { min-width: 15rem; }
.cc-name { display: block; font-size: var(--fs-body); font-weight: 700; line-height: 1.3; color: var(--brand-deep-2); text-decoration: none; text-wrap: balance; }
.cc-name:hover { text-decoration: underline; }
.cc-of { display: block; font-weight: 600; color: var(--moss-700); }
.cc-prod .chip { margin: 0.45rem 0 0; }
.cc-why { display: block; margin-top: 0.4rem; color: var(--ink-soft); max-width: 36ch; }
.cc-v { font-weight: 600; }
.cc-lbl { display: none; }
.cc-ruler { position: relative; display: block; inline-size: 6rem; block-size: 6px; margin-top: 0.45rem; background: var(--moss-100); border-radius: var(--r-1); }
.cc-ruler i { position: absolute; inset-block: 0; inset-inline-start: var(--a); inline-size: var(--w); background: var(--moss-600); border-radius: var(--r-1); }
.cc-packs { display: flex; align-items: flex-end; gap: 0.75rem; }
.cc-pack { display: inline-flex; flex-direction: column; align-items: center; gap: 0.2rem; }
.cc-pack svg { display: block; }
.cc-pack b { font-size: var(--fs-label); font-weight: 700; white-space: nowrap; }
.cc-pk-bag { fill: var(--moss-600); }
.cc-pk-bale { fill: var(--moss-800); }
.cc-pk-seam, .cc-pk-strap, .cc-pk-edge { fill: none; stroke: var(--paper); stroke-opacity: 0.55; stroke-width: 1.2; }
.cc-pk-edge { stroke-opacity: 0.3; }
.cc-pk-label { fill: var(--paper); fill-opacity: 0.85; }
.cc-m3 { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: max-content max-content; align-items: baseline; gap: 0.3rem 0.75rem; }
.cc-m3 li { display: contents; }
.cc-m3-pk { color: var(--ink-mute); white-space: nowrap; }
.cc-m3-v { white-space: nowrap; }
.cc-m3-v b { font-weight: 700; white-space: nowrap; }
.cc-pdf { display: inline-flex; align-items: flex-start; gap: 0.4rem; font-weight: 600; white-space: nowrap; }
.cc-pdf svg { flex: none; margin-top: 0.2rem; }
.cc-nodoc { display: block; color: var(--ink-mute); max-width: 24ch; }
.cc-act { text-align: end !important; white-space: nowrap; }
.cc-act .btn { min-height: var(--btn-h); }
.cc-note { margin: 0; font-size: var(--fs-small); color: var(--ink-soft); max-width: 70ch; }

/* A card per pick: the facts two to a line under their own labels. */
@media (max-width: 1279px) {
  .cc-scroll { overflow: visible; border: 0; border-radius: 0; background: none; }
  .cc-t, .cc-t tbody { display: block; }
  .cc-t thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .cc-t tbody { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr)); gap: 0.75rem; }
  .cc-t tbody tr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: repeat(var(--cc-rows, 4), auto) 1fr; gap: 0 1rem; padding: var(--card-pad); border: 1px solid var(--line); border-radius: var(--r-2); background: var(--paper); }
  .cc-t tbody th, .cc-t td { display: block; min-width: 0; padding: 0.7rem 0 0; border-top: 0; }
  .cc-t tbody tr > .cc-prod { grid-column: 1 / -1; padding: 0 0 0.25rem; }
  .cc-name { font-size: var(--fs-h3); line-height: 1.25; font-weight: var(--w-head); color: var(--moss-900); }
  .cc-of { font-weight: var(--w-head); }
  .cc-why { max-width: none; }
  .cc-lbl { display: block; margin-bottom: 0.2rem; font-size: var(--fs-label); font-weight: 700; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--ink-mute); }
  .cc-t tbody tr > .cc-doc { grid-column: 1 / -1; }
  .cc-nodoc { max-width: none; }
  /* A longer word for "about" wraps inside its half of the card. */
  .cc-m3 { grid-template-columns: max-content minmax(0, 1fr); }
  .cc-m3-v { white-space: normal; }
  .cc-t tbody tr > .cc-act { grid-column: 1 / -1; align-self: end; padding-top: 1rem; text-align: start !important; }
  .cc-act .btn { width: 100%; }
}
/* */
/* */
/* */
/* */
/* */
/* */
/* == downloads == */
/* /downloads/ (catalogue decision A): the catalogue row leads, the recipe
   sheets fold into one <details> per range with a filter, the earlier
   documents sit last on the warm paper tint. */
.dlx-h { font-size: var(--fs-h3); margin: 2.75rem 0 0.5rem; display: flex; align-items: baseline; gap: 0.6rem; }
.dlx-n { font-size: var(--fs-small); font-weight: 600; color: var(--ink-mute); }
.dlx-sub { font-size: var(--fs-small); color: var(--ink-mute); margin: 0 0 1rem; }
.dlx-two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 860px) { .dlx-two { grid-template-columns: minmax(0, 1fr); } }
.dl a.dlx-lead { border-color: var(--moss-300); background: var(--moss-50); padding-block: 1.25rem; }
.dl a.dlx-lead .dl-t { font-size: var(--fs-lead); color: var(--brand-deep-2); }
@media (max-width: 600px) {
  .dlx .dl a { flex-wrap: wrap; }
  .dlx .dl a > span:nth-child(2) { flex: 1 1 0; min-width: 0; }
  .dlx .dl .dl-meta { flex-basis: 100%; margin-inline-start: calc(22px + 1rem); }
}
.dlx-find { display: flex; flex-wrap: wrap; align-items: end; gap: 0.5rem 1.25rem; margin: 0 0 1rem; }
.dlx-find[hidden] { display: none; }
.dlx-find .field { margin: 0; flex: 1 1 18rem; max-width: 34rem; }
.dlx-count { margin: 0; padding-bottom: 0.7rem; font-size: var(--fs-small); color: var(--ink-mute); }
.dlx-range { border: 1px solid var(--line); border-radius: var(--r-2); background: var(--paper); margin-bottom: 0.6rem; }
.dlx-range[hidden], .dlx-rows[hidden], .dlx-variant[hidden], .dlx-none[hidden] { display: none; }
.dlx-range > summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 1rem; align-items: center; padding: 1rem 1.1rem; }
.dlx-range > summary::-webkit-details-marker { display: none; }
/* Physical sides on purpose: a down chevron is the same in both directions. */
.dlx-range > summary::after { content: ""; width: 0.55rem; height: 0.55rem; border-right: 2px solid var(--moss-700); border-bottom: 2px solid var(--moss-700); transform: rotate(45deg); margin-top: -0.3rem; }
.dlx-range[open] > summary::after { transform: rotate(225deg); margin-top: 0.3rem; }
.dlx-range > summary:hover b { color: var(--moss-700); }
.dlx-range[open] > summary { border-bottom: 1px solid var(--line-soft); }
.dlx-range-t b { display: block; color: var(--brand-deep-2); font-weight: 600; }
.dlx-range-t small { display: block; font-size: var(--fs-small); color: var(--ink-mute); line-height: 1.45; margin-top: 0.15rem; }
.dlx-range-n { font-size: var(--fs-small); color: var(--ink-mute); white-space: nowrap; }
.dlx-range-n b { color: var(--ink); }
.dlx-list { padding: 0.25rem 1.1rem 0.9rem; }
.dlx-variant { margin: 0.9rem 0 0.1rem; font-size: var(--fs-label); font-weight: 700; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--moss-800); }
.dlx-rows { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 1.5rem; }
.dlx-row { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: 0.15rem 0.75rem; align-items: baseline; padding: 0.6rem 0; border-bottom: 1px solid var(--line-soft); font-size: var(--fs-small); }
.dlx-row[hidden] { display: none; }
.dlx-peat { margin-top: 0.5rem; }
/* A product's documents, one small link each, under its title. */
.dlx-docs { grid-column: 2; display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; }
.dlx-docs a { font-weight: 600; color: var(--moss-800); text-decoration: underline; text-underline-offset: 2px; }
.dlx-docs a:hover { color: var(--brand-deep-2); }
.dlx-code { font-weight: 700; color: var(--moss-900); white-space: nowrap; }
.dlx-title { color: var(--ink-soft); min-width: 0; }
.dlx-title small { display: block; font-size: var(--fs-small); color: var(--ink-mute); line-height: 1.4; }
.dlx-size { color: var(--ink-mute); white-space: nowrap; }
@media (max-width: 860px) { .dlx-rows { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 480px) {
  .dlx-range > summary { grid-template-columns: minmax(0, 1fr) auto; }
  .dlx-range-n { grid-column: 1; grid-row: 2; }
  .dlx-range > summary::after { grid-column: 2; grid-row: 1 / span 2; }
  .dlx-row { grid-template-columns: minmax(0, 1fr); }
  .dlx-docs { grid-column: 1; }
}
.dlx-none { font-size: var(--fs-small); }
.dlx-old { margin-top: 3rem; padding-top: 0.5rem; border-top: 1px solid var(--line); }
.dlx-old .dl a { background: var(--paper-2); }
.dlx-old .dl a:hover { background: var(--moss-50); }
/* */
/* */
/* */
/* */
/* */
/* */
/* == about == */
/* Production A (2026-10-15): the five steps with a 4:3 photo above the
   number and the rule (production_steps_list() in inc/gallery.php), on
   /about/ and, a little shorter, on the home page. Then "How we measure" on
   /about/: three lab photos in the same frames and the four methods. Under
   1000 px the steps and the lab photos are one sideways row that snaps to
   each card, like the gallery, so a phone shows one step at a time instead of
   five screens of them. */
.ab-steps, .ab-lab { list-style: none; margin: 2.25rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 1.75rem); }
.ab-lab { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ab-steps > li { display: flex; flex-direction: column; gap: 0.9rem; min-width: 0; }
.ab-lab > figure { margin: 0; min-width: 0; }
.ab-lab figcaption { padding-top: 0.6rem; font-size: var(--fs-small); line-height: 1.5; color: var(--ink-mute); }
.ab-pic { position: relative; display: block; aspect-ratio: 4 / 3; border-radius: var(--r-2); overflow: hidden; background: var(--sage); }
.ab-pic > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--focus, 50% 50%); border-radius: 0; }
.ab-steps--compact .ab-pic { aspect-ratio: 3 / 2; }
.ab-rule { display: flex; flex-direction: column; gap: 0.35rem; border-top: 2px solid var(--brand-accent); padding-top: 0.9rem; }
.ab-rule strong { font-size: var(--fs-body); line-height: 1.25; color: var(--brand-deep-2); }
.ab-steps:focus-visible, .ab-lab:focus-visible { outline: 2px solid var(--moss-500); outline-offset: 4px; }
.ab-more { margin: 1.75rem 0 0; }
@media (max-width: 1000px) {
  .ab-steps, .ab-lab {
    display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
    margin-inline: calc(-1 * var(--gut)); padding: 0 var(--gut) 0.25rem; scroll-padding-inline: var(--gut);
  }
  .ab-steps::-webkit-scrollbar, .ab-lab::-webkit-scrollbar { display: none; }
  .ab-steps > li, .ab-lab > figure { flex: 0 0 42%; scroll-snap-align: start; }
}
@media (max-width: 640px) { .ab-steps > li, .ab-lab > figure { flex-basis: 78%; } }

/* The four methods, each with the ranges the site already publishes. */
.ab-methods { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(1.25rem, 2.5vw, 2rem); margin-top: clamp(2rem, 4vw, 3rem); }
.ab-method { min-width: 0; border-top: 1px solid var(--line); padding-top: 1rem; }
.ab-method-std { margin: 0 0 0.35rem; font-size: var(--fs-label); font-weight: 700; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--moss-700); }
.ab-method h3 { margin: 0 0 0.75rem; }
.ab-method dl { margin: 0; display: grid; gap: 0.6rem; }
.ab-method dt { font-size: var(--fs-small); color: var(--ink-mute); }
.ab-method dd { margin: 0; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.ab-method-note { margin: 0.75rem 0 0; font-size: var(--fs-small); color: var(--ink-mute); }
.ab-note { margin: 1.75rem 0 0; font-size: var(--fs-small); color: var(--ink-soft); }
.ab-note + .ab-note { margin-top: 0.75rem; }
@media (max-width: 1000px) { .ab-methods { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Packshots A (2026-10-15): the bag cut-out standing on the light panel with
   a soft floor shadow, which belongs to the picture, not to a card. In a card
   the panel fills the 16:10 .card-img frame (the home "What we produce"
   cards); .ab-pack--panel is the same panel on its own (the /contacts/ side
   picture). The tag tells the limed peat from the raw peat in the same bag. */
.ab-pack { display: flex; align-items: flex-end; justify-content: center; padding: 6% 8% 7%; background: var(--sage); isolation: isolate; }
.ab-pack--panel { position: relative; aspect-ratio: 16 / 10; border-radius: var(--r-2); overflow: hidden; }
.ab-pack-bag { position: relative; display: block; flex: none; height: 100%; }
.ab-pack .ab-pack-bag > img { position: static; display: block; width: auto; height: 100%; max-width: none; object-fit: contain; border-radius: 0; background: none; }
.ab-pack-bag--bag-250 > img { aspect-ratio: 647 / 1200; }
.ab-pack-bag--bag-50 > img { aspect-ratio: 741 / 1275; }
.ab-pack-bag + .ab-pack-bag { margin-inline-start: -3%; }
.ab-pack-bag + .ab-pack-bag--bag-50 { height: 68%; }
.ab-pack-bag::after {
  content: ""; position: absolute; z-index: -1; inset-inline: -12%; bottom: -7px; height: 16px;
  background: radial-gradient(closest-side, rgba(20, 48, 31, 0.3), rgba(20, 48, 31, 0));
}
.ab-pack-tag {
  position: absolute; z-index: 2; top: 0.75rem; inset-inline-start: 0.75rem;
  padding: 0.15rem 0.5rem; background: var(--paper); color: var(--brand-deep-2);
  border: 1px solid var(--moss-200); border-radius: var(--r-1);
  font-size: var(--fs-label); font-weight: 700; line-height: 1.5; white-space: nowrap;
}
/* */
/* */
/* */
/* */
/* */
/* */
/* == match == */
/* /substrates/match/ (2026-10-15): the spec form beside the three nearest
   codes and "made to your specification". Tokens only. The form chips are
   the quote form's radio chips; the cards are the site's one card. */
.mch-sec { padding-top: 0; }
.mch-top h1 { margin-top: 0.75rem; }
.mch-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(1.5rem, 3.5vw, 3.5rem); align-items: start; }
.mch-k { font-size: var(--fs-label); font-weight: 700; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--moss-800); margin: 0 0 0.75rem; }
.mch-k-sm { color: var(--ink-mute); margin: 1rem 0 0.45rem; }
.mch-form { border: 1px solid var(--line); border-radius: var(--r-2); background: var(--paper); padding: var(--card-pad); }
.mch-q { border: 0; margin: 0 0 1.1rem; padding: 0 0 1.1rem; border-bottom: 1px solid var(--line-soft); min-width: 0; }
.mch-q legend { padding: 0; margin: 0 0 0.55rem; font-size: var(--fs-small); font-weight: 600; color: var(--ink); }
.mch-chips { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.mch-chips label { position: relative; margin: 0; }
.mch-chips input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; margin: 0; cursor: pointer; }
.mch-chips label > span {
  display: inline-flex; align-items: center; min-height: var(--chip-h); padding: 0 1rem;
  border: 1px solid #a3a196; border-radius: var(--r-pill); background: var(--paper);
  font-size: var(--fs-small); font-weight: 600; line-height: 1.2; color: var(--ink);
}
.mch-chips label:hover > span { border-color: var(--brand-accent); }
.mch-chips input:checked + span { background: var(--brand-deep-2); border-color: var(--brand-deep-2); color: #fff; }
.mch-chips input:focus-visible + span { outline: 2px solid var(--moss-500); outline-offset: 2px; }
/* "250 L" and "bags" are two flex items: the gap is the space between them. */
.mch-chips label > span { gap: 0.3em; }
.mch-screen { display: flex; flex-wrap: wrap; gap: 0.75rem 1rem; }
.mch-screen label { display: grid; gap: 0.3rem; font-size: var(--fs-small); color: var(--ink-mute); }
.mch-screen select {
  min-height: var(--btn-h); min-width: 8.5rem; padding: 0 0.75rem; font: inherit; font-size: var(--fs-small);
  color: var(--ink); background: var(--paper); border: 1px solid #a3a196; border-radius: var(--r-1);
}
.mch-screen select:focus { outline: 2px solid var(--moss-400); outline-offset: -1px; border-color: var(--moss-400); }
.mch-act { display: flex; flex-wrap: wrap; gap: 0.75rem; }

.mch-out { scroll-margin-top: 100px; }
.mch-out[aria-busy="true"] { opacity: 0.6; transition: opacity 0.15s ease; }
.mch-empty { color: var(--ink-soft); border: 1px dashed var(--line); border-radius: var(--r-2); padding: var(--card-pad); margin: 0 0 1rem; max-width: none; }
.mch-how, .mch-fine { font-size: var(--fs-small); color: var(--ink-mute); max-width: none; }
.mch-how { margin: -0.25rem 0 1rem; }
.mch-fine { margin: 0.75rem 0 1.25rem; }
.mch-note { border: 1px solid var(--line); border-radius: var(--r-2); padding: 0.85rem 1rem; margin: 0 0 0.75rem; font-size: var(--fs-small); }
.mch-note p { position: relative; margin: 0; padding-inline-start: 1.25rem; max-width: none; }
.mch-note p + p { margin-top: 0.5rem; }
.mch-note p::before { content: ""; position: absolute; inset-inline-start: 0; top: 0.5em; width: 0.55rem; height: 0.55rem; border-radius: 50%; background: var(--peat); }
.mch-note p.mch-note-link { margin-top: 0.2rem; font-weight: 600; }
.mch-note p.mch-note-link::before { display: none; }
.mch-list { display: grid; gap: 0.75rem; }
.mch-card { border: 1px solid var(--line); border-radius: var(--r-2); background: var(--paper); padding: var(--card-pad); }
.mch-card.is-exact { border-color: var(--moss-400); }
.mch-card .chip { margin-block: 0 0.5rem; margin-inline: 0 0.5rem; vertical-align: middle; }
.mch-exact { display: inline-block; font-size: var(--fs-label); font-weight: 700; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--moss-700); vertical-align: middle; margin-bottom: 0.5rem; }
.mch-card h3 { margin: 0 0 0.2rem; }
.mch-card h3 a { color: inherit; text-decoration: none; }
.mch-card h3 a:hover { text-decoration: underline; }
.mch-sub { font-size: var(--fs-small); color: var(--ink-mute); margin: 0; }
.mch-diff, .mch-same { list-style: none; margin: 0; padding: 0; font-size: var(--fs-small); }
.mch-diff { display: grid; gap: 0.4rem; }
.mch-diff li { display: grid; grid-template-columns: 1rem minmax(6rem, 9rem) minmax(0, 1fr); gap: 0 0.55rem; align-items: start; }
.mch-diff .mch-ic { align-self: start; margin-top: 0.2rem; }
.mch-diff b { font-weight: 600; }
.mch-v { color: var(--ink); }
.mch-y { display: block; color: var(--ink-mute); }
.mch-same { display: flex; flex-wrap: wrap; gap: 0.35rem 1.1rem; }
.mch-same li { display: inline-flex; align-items: baseline; gap: 0.4rem; }
.mch-ic { width: 1rem; height: 1rem; flex: none; align-self: center; }
.mch-ic.is-same { color: var(--moss-600); }
.mch-ic.is-diff { color: var(--peat); }
.mch-btns { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1.1rem; }
.mch-more { font-size: var(--fs-small); color: var(--ink-soft); margin: 0.75rem 0 0; max-width: none; }
.mch-made { border: 1px solid var(--moss-300); border-radius: var(--r-2); background: var(--moss-50); padding: var(--card-pad); }
.mch-made h3 { margin: 0 0 var(--card-gap); }
.mch-made > p:not(.mch-k) { font-size: var(--fs-small); color: var(--ink-soft); max-width: none; }
.mch-mins { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem; margin: 0 0 0.25rem; }
.mch-mins > div { background: var(--paper); border: 1px solid var(--moss-200); border-radius: var(--r-1); padding: 0.6rem 0.75rem; }
.mch-mins dt { font-size: var(--fs-small); color: var(--ink-mute); line-height: 1.35; }
.mch-mins dd { margin: 0.2rem 0 0; font-size: var(--fs-small); color: var(--ink); }
.mch-mins dd b { font-size: var(--fs-h3); font-weight: var(--w-head); color: var(--brand-deep-2); line-height: 1.1; margin-inline-end: 0.2rem; }
.mch-load { margin-bottom: 1.1rem; }
.mch-load b { display: block; color: var(--ink); font-weight: 600; }
@media (max-width: 980px) { .mch-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 600px) {
  .mch-screen select { font-size: var(--fs-body); }
  .mch-screen label { flex: 1 1 8rem; }
  .mch-screen select { width: 100%; min-width: 0; }
  .mch-diff li { grid-template-columns: 1rem minmax(0, 1fr); }
  .mch-diff li .mch-v { grid-column: 2; }
  .mch-mins { grid-template-columns: minmax(0, 1fr); }
  .mch-mins > div { display: flex; justify-content: space-between; align-items: baseline; gap: 0.75rem; }
  .mch-mins dd { margin: 0; white-space: nowrap; }
}
/* */
/* */
/* */
/* */
/* */
/* */
/* == quote-form == */
/* "When do you need it?" (delivery C, 2026-10-15): the select keeps one
   column like the fields above it, and the lead-time line runs under it
   across the form, as the line under "How much" does. */
.qf-when .field { margin-bottom: 0; }
.qf-when .hint { grid-column: 1 / -1; margin: 0.45rem 0 1.15rem; font-size: var(--fs-small); color: var(--ink-mute); }
/* Two fields side by side: the labels on one line at the top and the boxes
   on the next, whatever wraps. "Delivery country" sat 22 px below "Port or
   postcode" because the pair was aligned at the foot, to keep the boxes
   level under a two-line label. A subgrid keeps both: each field takes two
   rows of the form's grid, so the labels share the top row and the boxes
   the second. */
form .grid.g-2 { align-items: start; }
@supports (grid-template-rows: subgrid) {
  form .grid.g-2 > .field { display: grid; grid-row: span 2; grid-template-rows: subgrid; row-gap: 0; }
  form .grid.g-2 > .field > label { align-self: start; }
  form .grid.g-2 > .field > :not(label) { align-self: end; }
}
/* */
/* */
/* */
/* == visual == */
/* The visual pass of 2026-10-15: the rules that belong to no one feature.
   One field, one code chip and one pill chip across every page. (The rest
   of that pass sits in the regions of the features it touched.) */

/* ONE FIELD: every text box and select is the button's height (44 px, 48 on
   a phone), the body size (17 px, which is also what stops a phone zooming
   in on a field), one #a3a196 edge (3:1 on white) and one focus ring. There
   were four heights (44, 47, 52, 55), 14 and 17 px text and three edge
   colours across the quote form, the catalogue search, the match form, the
   "how much" box and the FAQ search. */
.field input:not([type="radio"]):not([type="checkbox"]), .field select, .field textarea,
.lists-search input, .mch-screen select, .pk-need-row input, .faq-search input {
  min-height: var(--btn-h); padding: 0 0.85rem;
  font: inherit; font-size: var(--fs-body); line-height: 1.3;
  color: var(--ink); background: var(--paper);
  border: 1px solid #a3a196; border-radius: var(--r-1);
}
.field select, .mch-screen select { height: var(--btn-h); }
.field textarea { min-height: 8rem; padding-block: 0.7rem; line-height: 1.5; }
.field input:not([type="radio"]):not([type="checkbox"]):focus, .field select:focus, .field textarea:focus,
.lists-search input:focus, .mch-screen select:focus, .pk-need-row input:focus, .faq-search input:focus {
  outline: 2px solid var(--moss-600); outline-offset: -1px; border-color: var(--moss-600);
}

/* ONE CODE CHIP: "SOLVIKA MIX 141" on a product page and in the crop table,
   the code on a /peatmoss/ row and the tag on a pack picture. They were
   three: 4, 6 or 8 px of side padding, a sage, pale or white ground, three
   edge greens, capitals forced by CSS on one of them. Now the /peatmoss/
   chip everywhere; the code is written in capitals already, and a "pH"
   must not become "PH". The pack tag keeps its place on the picture. */
.chip, .peat-chip, .ab-pack-tag {
  display: inline-block; padding: 0.3rem 0.6rem; border: 1px solid var(--moss-200); border-radius: var(--r-1);
  background: var(--moss-50); color: var(--moss-900);
  font-size: var(--fs-label); font-weight: 700; letter-spacing: 0.05em; line-height: 1.3;
  text-transform: none; white-space: nowrap; font-variant-numeric: tabular-nums;
}
.ab-pack-tag { position: absolute; }

/* ONE PILL CHIP: the blog topics, the /peatmoss/ and range filters, the
   quote form's "How much", the match form's choices, the crop suggestions
   on /substrates/ and "Used for" on a product page. Same height and type
   already; now the same white ground, #a3a196 edge (the fields' edge),
   ink label and the dark green when chosen. */
.blog-chip, .gf-group button, .gf-group a, .qf-chips span, .mch-chips label > span, .cat-crop a, .pt-used a {
  display: inline-flex; align-items: center; min-height: var(--chip-h); padding: 0 1rem;
  border: 1px solid #a3a196; border-radius: var(--r-pill); background: var(--paper); color: var(--ink);
  font-family: inherit; font-size: var(--fs-small); font-weight: 600; line-height: 1.2; text-decoration: none; white-space: nowrap;
}
.blog-chip:hover, .gf-group button:hover, .gf-group a:hover, .mch-chips label:hover > span, .cat-crop a:hover, .pt-used a:hover {
  border-color: var(--brand-accent); background: var(--paper); color: var(--ink);
}
.blog-chip.is-on, .gf-group button[aria-pressed="true"], .gf-group a[aria-current="true"],
.qf-chips input:checked + span, .mch-chips input:checked + span {
  background: var(--brand-deep-2); border-color: var(--brand-deep-2); color: #fff;
}
.gf-group button:disabled { border-color: #a3a196; }
/* */
/* */
/* */
/* */
/* */
/* */
/* == fixes == */

/* FAQ: one photograph under each topic's heading (the owner, 2026-10-15). */
.faq-photo { margin: 0.25rem 0 1.25rem; }
.faq-photo img { display: block; width: 100%; aspect-ratio: 16 / 5; object-fit: cover; border-radius: var(--r-2); background: var(--sage); }
@media (max-width: 760px) { .faq-photo img { aspect-ratio: 16 / 8; } }

/* /logistics/: the loading figures as two cards with their photos, the export
   documents as tiles, the importers' guides as cards (the owner, 2026-10-16:
   polish the top of the page like its bottom). */
.doc-grid { list-style: none; padding: 0; margin: 1rem 0 1.25rem; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem; }
.doc-grid li { display: flex; align-items: center; gap: 0.65rem; margin: 0; padding: 0.75rem 0.9rem; border: 1px solid var(--line); border-radius: var(--r-2); background: #fff; font-size: var(--fs-small); line-height: 1.35; }
.doc-grid li::before {
  content: ""; flex: 0 0 18px; height: 22px;
  background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 22' fill='none' stroke='%231f4630' stroke-width='1.6' stroke-linejoin='round'%3E%3Cpath d='M2 1h9l5 5v15H2z'/%3E%3Cpath d='M11 1v5h5M5 11h8M5 14.5h8M5 18h5'/%3E%3C/svg%3E");
}
.lg-guides { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1080px) { .lg-guides { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .doc-grid, .lg-guides { grid-template-columns: 1fr; } }

/* Home, "Milled and block-cut peat": one photo of each, side by side. */
.raw-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.raw-pair figure { margin: 0; }
.raw-pair img { display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: var(--r-2); background: var(--sage); }
.raw-pair figcaption { font-size: var(--fs-small); color: var(--ink-mute); padding-top: 0.5rem; }

/* /substrates/ "Which of these suits your crop": a photo on top of each card
   (site audit, 2026-10-16: six text-only boxes in a row). */
.pc-img { margin: calc(-1 * clamp(1.4rem, 3vw, 2.1rem)) calc(-1 * clamp(1.4rem, 3vw, 2.1rem)) 1.1rem; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--r-2) var(--r-2) 0 0; background: var(--moss-100); }
.pc-img img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* /downloads/: the title and its line stacked tight, not a three-line block
   per file (phone audit, 2026-10-16). */
.dl .dl-t, .dl .dl-s { display: block; }
.dl .dl-s { line-height: 1.35; margin-top: 0.15rem; }
/* /about/ facts on a phone: the label above its value, not squeezed beside it. */
@media (max-width: 480px) {
  .props > div { display: block; }
  .props dd { text-align: start; margin-top: 0.15rem; }
}

/* Photos inside an article (the owner, 2026-10-15: less text, more photos). */
.blog-fig { margin: 2rem 0; }
.blog-fig img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--r-2); background: var(--sage); }
.blog-fig figcaption { font-size: var(--fs-small); color: var(--ink-mute); padding-top: 0.5rem; }
/* Crop pages, "Our picks": the product's own peat beside its name (site audit, 2026-10-16). */
.cc-thumb { display: block; width: 64px; height: 64px; margin-bottom: 0.6rem; border-radius: var(--r-2); overflow: hidden; background: var(--sage); }
.cc-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* /downloads/: the catalogue's cover beside its download. */
.dl-cat { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 1.5rem; align-items: center; }
.dl-cover { display: block; border-radius: var(--r-1); overflow: hidden; box-shadow: var(--shadow-float); border: 1px solid var(--line); }
.dl-cover img { display: block; width: 100%; height: auto; }
@media (max-width: 600px) { .dl-cat { grid-template-columns: 110px minmax(0, 1fr); gap: 1rem; } }
/* /substrates/match/: the mixing line under "Made to your specification". */
.mch-photo { margin-top: 1.25rem; }
.mch-photo img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: var(--r-2); }

/* Phone polish (2026-10-16): the "Read" links and WhatsApp get a 44 px
   target (chips keep the one chip height used everywhere); the footer's link
   groups sit two to a row instead of one long column. */
.blog-read, .ct-wa { display: inline-flex; align-items: center; min-height: 44px; }
@media (max-width: 600px) {
  .site-foot .grid.g-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1.25rem; }
  .site-foot .grid.g-4 > div:first-child { grid-column: 1 / -1; }
  .site-foot .grid.g-4 > div:last-child { grid-column: 1 / -1; }
}
/* No phone number in the phone menu (the owner, 2026-10-16: people started
   writing to it, and he answers existing customers only). */

/* /about/ opening, in the production steps' own style (the owner, 2026-10-16). */
.ab-intro { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1.25rem 3rem; align-items: end; }
.ab-intro .lede { margin: 0; max-width: 62ch; }
.ab-intro .btn-row { margin: 0; flex-wrap: nowrap; }
.ab-facts { list-style: none; margin: 2.25rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 1.75rem); }
.ab-facts > li { margin: 0; min-width: 0; }
.ab-k { font-size: var(--fs-label); font-weight: 700; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--moss-600); }
.ab-facts .steps-d { display: block; }
.ab-media { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(1rem, 2vw, 1.75rem); margin-top: 2.5rem; align-items: stretch; }
.ab-co { display: flex; flex-direction: column; gap: 1.25rem; padding: 1.4rem 1.5rem; }
/* The card's own height sets the row; the video fills its column to that
   height (no blank band under it, no gap inside the card; review of #36). */
.ab-media > div:first-child { display: flex; flex-direction: column; }
.ab-media .video-box { flex: 1 1 auto; aspect-ratio: auto; min-height: 240px; }
@media (max-width: 1000px) { .ab-media .video-box { flex: none; aspect-ratio: 16 / 9; min-height: 0; } }
.ab-co .props dd { font-size: var(--fs-small); }
.ab-co .props > div:last-child { border-bottom: 0; padding-bottom: 0; }
@media (max-width: 1000px) {
  .ab-intro { grid-template-columns: minmax(0, 1fr); }
  .ab-intro .btn-row { flex-wrap: wrap; }
  .ab-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 1.5rem; }
}
@media (max-width: 1000px) { .ab-media { grid-template-columns: minmax(0, 1fr); } }

/* /logistics/ "What we handle": five facts on a green rule (2026-10-16). */
.lg-handle { list-style: none; margin: 1.75rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 1.75rem); }
.lg-handle > li { margin: 0; min-width: 0; }
@media (max-width: 1000px) { .lg-handle { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 1.5rem; } }
/* /logistics/ "How much fits": container beside truck, the same rows. The
   header beats table.spec's small sticky label row: these are titles. */
.lg-cmp { width: 100%; background: #fff; table-layout: fixed; }
table.spec.lg-cmp thead th, table.spec.lg-cmp thead td {
  background: #fff; position: static; white-space: normal; vertical-align: top;
  border-bottom: 1px solid var(--line);
}
table.spec.lg-cmp thead th { font-size: var(--fs-h3); font-weight: 700; letter-spacing: 0; color: var(--brand-deep-2); line-height: 1.2; padding-bottom: 0.9rem; }
.lg-cmp col.lg-cmp-k { width: 28%; }
.lg-cmp tbody th { font-weight: 600; color: var(--ink); text-align: start; }
.lg-cmp th, .lg-cmp td { overflow-wrap: anywhere; hyphens: auto; -webkit-hyphens: auto; }
.lg-cmp tbody th .muted { font-weight: 400; font-size: var(--fs-small); }
table.spec.lg-cmp tbody tr:hover { background: transparent; }
@media (max-width: 600px) {
  table.spec.lg-cmp thead th { font-size: var(--fs-body); }
  .lg-cmp th, .lg-cmp td { padding-inline: 0.5rem; font-size: var(--fs-small); }
}

/* /faq/ Incoterms: the six cards inside one answer (2026-10-16). */
.faq-item--wide .ic-cards { margin: 0.5rem 1.25rem 0; }
.faq-item--wide > p.muted { padding: 0 1.25rem; }
.faq-item--wide .lede { font-size: var(--fs-body); margin-top: 0.25rem; }
.faq-item--wide > :last-child { padding-bottom: 1.25rem; }