/* Self-hosted WOFF2 subsets (SIL Open Font License; see /fonts/OFL-*.txt).
   Browsers download only the subsets a page actually uses. */
@font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 600; font-display: swap; src: url("/fonts/barlow-condensed-latin-600-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; }
@font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 600; font-display: swap; src: url("/fonts/barlow-condensed-latin-ext-600-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: "Barlow Condensed"; font-style: normal; font-weight: 600; font-display: swap; src: url("/fonts/barlow-condensed-vietnamese-600-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: "Barlow Condensed"; font-style: normal; font-weight: 700; font-display: swap; src: url("/fonts/barlow-condensed-latin-700-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; }
@font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 700; font-display: swap; src: url("/fonts/barlow-condensed-latin-ext-700-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: "Barlow Condensed"; font-style: normal; font-weight: 700; font-display: swap; src: url("/fonts/barlow-condensed-vietnamese-700-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: "Source Sans 3"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/source-sans-3-latin-400-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; }
@font-face { font-family: "Source Sans 3"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/source-sans-3-latin-ext-400-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: "Source Sans 3"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/source-sans-3-vietnamese-400-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: "Source Sans 3"; font-style: normal; font-weight: 600; font-display: swap; src: url("/fonts/source-sans-3-latin-600-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; }
@font-face { font-family: "Source Sans 3"; font-style: normal; font-weight: 600; font-display: swap; src: url("/fonts/source-sans-3-latin-ext-600-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: "Source Sans 3"; font-style: normal; font-weight: 600; font-display: swap; src: url("/fonts/source-sans-3-vietnamese-600-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; }

/* Design tokens. The five brand colours come from the brief (§9); tints and shades are
   working values derived from them. Contrast notes are against the named background. */
:root {
  /* Brand */
  --green: #006633;        /* primary — 7.1:1 on white */
  --green-dark: #004d26;   /* hover/pressed */
  --green-tint: #eef4ef;
  --gold: #cc9933;         /* secondary — 4.9:1 on --ink; decorative only on light backgrounds */
  --ink: #333333;          /* text and dark background */
  --ink-deep: #1f1e1b;     /* footer and dark bands */
  --blue: #006699;
  --white: #ffffff;

  /* Neutrals (warm, to keep away from a cold corporate grey) */
  --paper: #f6f4ef;
  --line: #e2ded5;
  --muted: #5f5b53;        /* 6.3:1 on white */
  --on-ink: #ffffff;
  --on-ink-muted: #cfcac1; /* 8.3:1 on --ink */
  --on-ink-line: rgb(255 255 255 / 0.14);

  /* Type */
  --tracking-display: calc(0.02em - 1px); /* Barlow Condensed headings */
  --font-display: "Barlow Condensed", "Arial Narrow", "Roboto Condensed", sans-serif-condensed, sans-serif;
  --font-text: "Source Sans 3", "Source Sans Pro", -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --text-sm: 0.875rem;
  --text-base: 1.0625rem;
  --text-lg: 1.1875rem;

  /* Layout */
  --max-width: 82.5rem;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --header-height: 4.5rem;
  --section-space: clamp(4.5rem, 6vw + 1.5rem, 7.5rem); /* vertical padding of a page section */
  --radius: 2px;
  --focus: 3px solid var(--green);
  --ease: cubic-bezier(0.2, 0, 0, 1);
}

@media (min-width: 1100px) {
  :root { --header-height: 5.25rem; }
}

/* Reset, typography and shared primitives. */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--header-height) + 1rem); }
body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--white);
  color: var(--ink);
  font-family: var(--font-text);
  font-size: var(--text-base);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
main { flex: 1; display: block; }
main:focus { outline: none; }
img, svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: var(--green); text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
[hidden] { display: none !important; }
[role="list"] { list-style: none; margin: 0; padding: 0; }

h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 700; line-height: 1.05; letter-spacing: var(--tracking-display); text-transform: uppercase; margin: 0 0 0.5em; }
h1 { font-size: clamp(2.5rem, 5vw + 1rem, 4.25rem); }
h2 { font-size: clamp(2rem, 3vw + 1rem, 3rem); }
h3 { font-size: 1.625rem; font-weight: 600; }
p { margin: 0 0 1em; }

:focus-visible { outline: var(--focus); outline-offset: 3px; }

.container { width: min(100% - 2 * var(--gutter), var(--max-width)); margin-inline: auto; }
.nowrap { white-space: nowrap; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }


.icon { width: 1.25em; height: 1.25em; flex: none; }

/* Buttons */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  min-height: 2.875rem;
  padding: 0.6rem 1.5rem;
  border: 2px solid transparent;
  border-radius: 999px;
  font-family: var(--font-text);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.15s, color 0.15s, border-color 0.15s;
}
.button .icon--arrow { width: 1.1em; height: 1.1em; transition: transform 0.15s var(--ease); }
.button:hover .icon--arrow { transform: translateX(3px); }
.button--primary { background: var(--green); color: var(--white); }
.button--primary:hover { background: var(--green-dark); }
.button--inverse { background: var(--white); color: var(--green); }
.button--inverse:hover { background: var(--paper); color: var(--green-dark); }
.button--outline-inverse { border-color: rgb(255 255 255 / 0.7); color: var(--white); }
.button--outline-inverse:hover { border-color: var(--white); background: rgb(255 255 255 / 0.12); }
.button--outline { border-color: var(--line); color: var(--ink); }
.button--outline:hover { border-color: var(--green); color: var(--green); }

/* Secondary section headings (news, trade associations, related malts, newsletter): one step down from h2 */
.heading-sm { font-size: clamp(1.75rem, 1.2vw + 1.25rem, 2.25rem); }

.skip-link {
  position: fixed;
  top: 0.75rem;
  left: 0.75rem;
  z-index: 200;
  padding: 0.75rem 1.25rem;
  background: var(--ink);
  color: var(--white);
  font-weight: 600;
  transform: translateY(-200%);
}
.skip-link:focus { transform: none; }

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

/* Site header. Mobile first: accordion menu; ≥1100px: horizontal nav with dropdown panels. */
.site-header { position: sticky; top: 0; z-index: 100; background: var(--white); border-bottom: 1px solid var(--line); }
.site-header__bar { display: flex; align-items: center; gap: 1rem; height: var(--header-height); }
.site-header__logo { margin-right: auto; }
.site-header__logo img { height: 3rem; width: auto; }
.site-header__cta { display: none; min-height: 2.5rem; }

.menu-button { display: inline-flex; align-items: center; gap: 0.6rem; min-height: 2.75rem; padding: 0 0.25rem; background: none; border: 0; font-weight: 600; }
.menu-button__icon { display: grid; gap: 5px; width: 1.25rem; }
.menu-button__icon span { height: 2px; background: currentColor; transition: transform 0.2s var(--ease), opacity 0.2s; }
.menu-button[aria-expanded="true"] .menu-button__icon span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu-button[aria-expanded="true"] .menu-button__icon span:nth-child(2) { opacity: 0; }
.menu-button[aria-expanded="true"] .menu-button__icon span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Language switcher: compact code button with a small dropdown, last item in the bar. */
.lang-switch { position: relative; }
.lang-switch__button { display: inline-flex; align-items: center; gap: 0.25rem; min-height: 2.75rem; padding: 0 0.25rem; background: none; border: 0; color: var(--ink); font-weight: 600; transition: color 0.2s var(--ease); }
.lang-switch__button:hover, .lang-switch__button[aria-expanded="true"] { color: var(--green); }
.lang-switch__button .icon { width: 1rem; height: 1rem; transition: transform 0.2s var(--ease); }
.lang-switch__button[aria-expanded="true"] .icon { transform: rotate(180deg); }
.lang-switch__menu { display: none; position: absolute; right: 0; top: calc(100% + 0.5rem); z-index: 110; width: 18rem; padding: 0.75rem; background: var(--white); border: 1px solid var(--line); box-shadow: 0 16px 32px -16px rgb(51 51 51 / 0.3); }
.lang-switch__button[aria-expanded="true"] + .lang-switch__menu, html:not(.js) .lang-switch:is(:hover, :focus-within) .lang-switch__menu { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(2, auto); grid-auto-flow: column; gap: 0.25rem; }
.lang-switch__option { display: block; padding: 0.55rem 0.75rem; color: var(--ink); font-weight: 600; text-decoration: none; }
a.lang-switch__option:hover { background: var(--paper); color: var(--green); }
.lang-switch__option[aria-current] { background: var(--green-tint); color: var(--green); }
.lang-switch__option[aria-disabled] { opacity: 0.45; }
/* Phones: the panel spans the width under the header so it never runs off-screen. */
@media (max-width: 479px) {
  .lang-switch { position: static; }
  .lang-switch__menu { position: absolute; left: var(--gutter); right: var(--gutter); top: calc(var(--header-height) - 0.25rem); width: auto; }
}

/* Mobile menu */
.js .site-nav { display: none; position: fixed; inset: var(--header-height) 0 0; overflow-y: auto; overscroll-behavior: contain; background: var(--white); padding: 0.5rem var(--gutter) 2rem; flex-direction: column; }
.js .is-menu-open .site-nav { display: flex; }
.has-menu-open body { overflow: hidden; }

.site-nav__list > li { border-bottom: 1px solid var(--line); }
.site-nav__trigger, .site-nav__link { display: flex; align-items: center; justify-content: space-between; gap: 0.35rem; width: 100%; padding: 1rem 0; background: none; border: 0; color: var(--ink); font-size: 1.25rem; font-weight: 600; text-align: left; text-decoration: none; transition: color 0.2s var(--ease); }
.site-nav__trigger .icon { transition: transform 0.2s var(--ease); }
.site-nav__trigger[aria-expanded="true"] .icon { transform: rotate(180deg); }
.site-nav__trigger:hover, .site-nav__link:hover, [data-current] { color: var(--green); }

.nav-panel { display: none; }
.site-nav__trigger[aria-expanded="true"] + .nav-panel { display: block; }
.nav-panel__inner { width: auto; padding-bottom: 1rem; }
.nav-panel__title, .nav-panel__summary, .nav-product__text, .nav-link__text { display: none; }
.nav-panel__overview, .nav-product, .nav-link { display: flex; align-items: center; gap: 0.75rem; padding: 0.55rem 0; color: var(--ink); text-decoration: none; }
.nav-panel__overview { color: var(--green); font-weight: 600; }
.nav-panel__overview .icon { width: 1.1em; }
.nav-product__image { width: 2.25rem; height: auto; mix-blend-mode: multiply; }
.nav-link__label .icon { display: none; }
.nav-panel [aria-current="page"] { color: var(--green); font-weight: 600; }

.site-nav__contact { display: flex; flex-direction: column; gap: 0.75rem; padding-top: 2rem; }
.site-nav__contact-link { display: inline-flex; align-items: center; gap: 0.6rem; color: var(--ink); text-decoration: none; }

/* No JavaScript: show the menu as a plain list under the bar. */
html:not(.js) .menu-button { display: none; }
html:not(.js) .site-header__bar { flex-wrap: wrap; height: auto; min-height: var(--header-height); }
html:not(.js) .site-nav { flex-basis: 100%; }
html:not(.js) .nav-panel { display: block; }

@media (min-width: 480px) {
  .site-header__cta { display: inline-flex; }
}

@media (min-width: 1100px) {
  .site-header__bar { gap: 2rem; }
  .site-header__logo img { height: 3.75rem; }
  .menu-button, .site-nav__contact { display: none; }

  .site-nav, .js .site-nav { display: flex; position: static; overflow: visible; padding: 0; background: none; }
  .site-nav__list { display: flex; height: var(--header-height); }
  .site-nav__list > li { display: flex; border: 0; }
  .site-nav__trigger, .site-nav__link { position: relative; width: auto; padding: 0 0.9rem; font-size: 1rem; }
  .site-nav__trigger .icon { width: 1rem; height: 1rem; }
  .site-nav__trigger[aria-expanded="true"]::after, [data-current]::after { content: ""; position: absolute; left: 0.9rem; right: 0.9rem; bottom: -1px; height: 3px; background: var(--green); }

  /* Dropdown panel spans the full header width. */
  .nav-panel { position: absolute; left: 0; right: 0; top: 100%; background: var(--white); border-top: 1px solid var(--line); box-shadow: 0 24px 40px -24px rgb(51 51 51 / 0.3); }
  html:not(.js) .nav-panel { display: none; }
  html:not(.js) .site-nav__list > li:is(:hover, :focus-within) .nav-panel { display: block; }
  .nav-panel__inner { display: grid; grid-template-columns: minmax(14rem, 1fr) 2fr; gap: 3rem; padding-block: 2.5rem 3rem; width: min(100% - 2 * var(--gutter), var(--max-width)); }
  .nav-panel--products .nav-panel__inner { grid-template-columns: minmax(14rem, 1fr) 3.4fr; }

  .nav-panel__title { display: block; margin: 0 0 0.5rem; font-family: var(--font-display); font-size: 2.25rem; font-weight: 700; line-height: 1; letter-spacing: var(--tracking-display); text-transform: uppercase; }
  .nav-panel__summary { display: block; color: var(--muted); }
  .nav-panel__overview { display: inline-flex; padding: 0; }

  .nav-panel__links { display: grid; grid-template-columns: repeat(2, 1fr); column-gap: 2.5rem; align-content: start; }
  .nav-panel--products .nav-panel__links { grid-template-columns: 1fr; }
  .nav-link { display: grid; gap: 0.15rem; padding: 1rem 0; border-top: 1px solid var(--line); }
  .nav-link__label { font-weight: 600; }
  .nav-link__text { display: block; color: var(--muted); font-size: var(--text-sm); line-height: 1.4; }
  .nav-link:hover .nav-link__label { color: var(--green); }

  /* Link cards: label and summary on paper, matching the product cards in Our Malts. */
  .nav-panel__links:has(.nav-link--card) { grid-template-rows: repeat(2, auto); grid-auto-flow: column; gap: 1.25rem; }
  .nav-panel__links:has(> li:nth-child(2):last-child) { grid-template-rows: auto; }
  .nav-link--card { align-content: start; gap: 0.25rem; height: 100%; padding: 1.25rem 0; border-top: 0; background: var(--paper); overflow: hidden; transition: background-color 0.15s; }
  .nav-link--card:hover { background: var(--green-tint); }
  .nav-link--card .nav-link__label { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-inline: 1.25rem; font-family: var(--font-display); font-size: 1.5rem; font-weight: 600; line-height: 1.1; letter-spacing: var(--tracking-display); text-transform: uppercase; }
  .nav-link--card .nav-link__label .icon { display: block; width: 1.1rem; height: 1.1rem; color: var(--green); transition: transform 0.15s var(--ease); }
  .nav-link--card:hover .nav-link__label .icon { transform: translateX(3px); }
  .nav-link--card .nav-link__text { padding-inline: 1.25rem; }

  .nav-panel__products { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; }
  .nav-product { display: grid; justify-items: start; gap: 0.25rem; height: 100%; padding: 1.25rem; background: var(--paper); transition: background-color 0.15s; }
  .nav-product:hover { background: var(--green-tint); }
  .nav-product__image { width: auto; height: 9rem; justify-self: center; margin-bottom: 0.75rem; }
  .nav-product__label { font-family: var(--font-display); font-size: 1.5rem; font-weight: 600; line-height: 1.1; letter-spacing: var(--tracking-display); text-transform: uppercase; }
  .nav-product__text { display: block; color: var(--muted); font-size: var(--text-sm); line-height: 1.4; }

  .nav-scrim:not([hidden]) { position: fixed; inset: 0; z-index: 90; background: rgb(51 51 51 / 0.25); }
}

/* Site footer: the logo, four link columns (About Us, Our Malts, Quality & Logistics, Contact)
   and a newsletter sign-up, then a single-line copyright/registration notice. */
.site-footer { background: var(--ink-deep); color: var(--on-ink-muted); font-size: 1rem; }
.site-footer a { color: inherit; text-decoration: none; transition: color 0.2s var(--ease); }
.site-footer a:hover { color: var(--gold); }
.site-footer :focus-visible { outline-color: var(--gold); }

.footer-main { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2.5rem; padding-block: 3.5rem; }
.footer-logo { justify-self: start; }
.footer-logo img { display: block; height: 4.5rem; width: auto; }
.footer-columns { display: grid; gap: 2rem 1.5rem; grid-template-columns: repeat(auto-fit, minmax(min(8rem, 100%), 1fr)); }
.footer-heading { margin: 0 0 0.9rem; font-size: 1.0625rem; font-weight: 600; letter-spacing: 0.01em; color: var(--on-ink); }
.footer-links { display: grid; gap: 0.55rem; }
.footer-links a[aria-current="page"] { color: var(--on-ink); }

.newsletter__title { margin: 0 0 0.6rem; color: var(--on-ink); }
.newsletter__text { max-width: 28rem; margin: 0 0 1.5rem; color: var(--on-ink-muted); }
.newsletter__row { display: flex; gap: 0.5rem; padding: 0.3rem; border: 1px solid rgb(255 255 255 / 0.28); border-radius: 999px; transition: border-color 0.2s var(--ease); }
.newsletter__row:hover { border-color: rgb(255 255 255 / 0.5); }
.newsletter__row:focus-within { border-color: var(--gold); }
.newsletter__row:has(.newsletter__input:invalid:not(:placeholder-shown):not(:focus)) { border-color: var(--gold); }
.newsletter__input { flex: 1 1 auto; min-width: 0; padding: 0.6rem 1rem 0.6rem 1.2rem; background: transparent; color: var(--on-ink); border: 0; outline: 0; }
.newsletter__input::placeholder { color: var(--on-ink-muted); opacity: 0.8; }
.newsletter__button { flex: none; min-height: 0; padding-block: 0.6rem; background: var(--gold); color: var(--ink); }
.newsletter__button:hover { background: #dba940; }
.newsletter__consent { display: flex; gap: 0.7rem; align-items: flex-start; margin-top: 1rem; padding-left: 0.4rem; font-size: var(--text-sm); line-height: 1.45; cursor: pointer; }
.newsletter__consent input { appearance: none; flex: none; width: 1.15rem; height: 1.15rem; margin: 0.1rem 0 0; border: 1.5px solid var(--on-ink-muted); border-radius: 50%; background: transparent center / 70% no-repeat; cursor: pointer; transition: background-color 0.15s, border-color 0.15s; }
.newsletter__consent input:hover { border-color: var(--on-ink); }
.newsletter__consent input:checked { background-color: var(--gold); border-color: var(--gold); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23333' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 8.5l3 3 6-7'/%3E%3C/svg%3E"); }
.newsletter__consent a { color: var(--on-ink); text-decoration: underline; text-underline-offset: 0.2em; }
.newsletter__note { margin: 0.4rem 0 0 0.4rem; padding-left: 1.85rem; font-size: 0.8125rem; line-height: 1.5; color: var(--on-ink-muted); }
.newsletter__status { margin: 0.9rem 0 0; font-size: var(--text-sm); color: var(--on-ink); }
.newsletter__status:empty { display: none; }
.newsletter.is-submitted .newsletter__row,
.newsletter.is-submitted .newsletter__consent,
.newsletter.is-submitted .newsletter__note { display: none; }

.footer-legal { border-top: 1px solid var(--on-ink-line); }
.footer-legal__inner { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem 2.5rem; padding-block: 1.25rem; font-size: var(--text-sm); }
.footer-legal__registration { margin: 0; text-wrap: balance; }
.footer-legal__links { display: flex; flex-wrap: wrap; gap: 0.25rem 2.5rem; }

@media (min-width: 800px) {
  .footer-main { grid-template-columns: 3fr 2fr; align-items: start; }
  .footer-logo { grid-column: 1 / -1; }
}
@media (min-width: 1100px) {
  .footer-main { grid-template-columns: auto 3fr 2fr; column-gap: clamp(2.5rem, 4vw, 4.5rem); }
  .footer-logo { grid-column: auto; }
  .footer-columns { grid-template-columns: repeat(4, 1fr); }
}

/* Home page. */

/* Hero: a full-height, muted, looping film (harvest, malt, rail, port, ship) under a dark wash, with the
   headline and one link bottom-left. Phones and reduced motion show a still. */
.home-hero { position: relative; isolation: isolate; display: grid; align-items: end; min-height: calc(100svh - var(--header-height)); max-height: 60rem; overflow: hidden; background: var(--ink-deep); color: var(--white); }
.home-hero__still, .home-hero__video { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
/* Phones get the still only: the film is not shown or downloaded below 700px (site.js). */
@media (max-width: 699px) { .home-hero__video { display: none; } }
.home-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgb(20 16 10 / 0.72), rgb(20 16 10 / 0.25) 45%, rgb(20 16 10 / 0.1)); }
.home-hero__inner { display: grid; justify-items: start; gap: 1.5rem; padding-block: 3rem clamp(3rem, 8vh, 5.5rem); }
.home-hero__title { margin: 0; color: var(--white); font-size: clamp(2.75rem, 4.5vw + 1rem, 5.5rem); line-height: 0.95; }
/* Hero link: a label and a ringed down-arrow. On hover the ring fills gold and label and arrow roll down,
   each replaced by a copy from above; the ring also leans towards the pointer (site.js). */
.home-hero__link { --roll: 0.55s var(--ease); display: inline-flex; align-items: center; gap: 1rem; color: var(--gold); font-size: 1.125rem; font-weight: 600; text-decoration: none; }
.home-hero__label { position: relative; display: block; overflow: hidden; line-height: 1.35; }
.home-hero__label > span { display: block; transition: transform var(--roll); }
.home-hero__label > span + span { position: absolute; inset: 0; transform: translateY(-105%); }
.home-hero__ring { position: relative; isolation: isolate; display: grid; place-items: center; width: 3rem; height: 3rem; overflow: hidden; border: 1px solid rgb(204 153 51 / 0.55); border-radius: 50%; transition: border-color 0.3s, translate 0.4s var(--ease), transform 0.15s var(--ease); }
.home-hero__ring::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: var(--gold); transform: scale(0); transition: transform 0.45s var(--ease); }
.home-hero__arrow { grid-area: 1 / 1; width: 1.2rem; height: 1.2rem; transition: transform var(--roll), color 0.3s; }
.home-hero__arrow + .home-hero__arrow { transform: translateY(-2.6rem); }
.home-hero__link:is(:hover, :focus-visible) .home-hero__label > span:first-child { transform: translateY(105%); }
.home-hero__link:is(:hover, :focus-visible) .home-hero__label > span + span { transform: none; transition-delay: 0.04s; }
.home-hero__link:is(:hover, :focus-visible) .home-hero__ring { border-color: var(--gold); }
.home-hero__link:is(:hover, :focus-visible) .home-hero__ring::before { transform: scale(1); }
.home-hero__link:is(:hover, :focus-visible) .home-hero__arrow { color: var(--ink-deep); transform: translateY(2.6rem); }
.home-hero__link:is(:hover, :focus-visible) .home-hero__arrow + .home-hero__arrow { transform: none; transition-delay: 0.06s; }
.home-hero__link:active .home-hero__ring { transform: scale(0.94); }
.home-hero :focus-visible { outline-color: var(--white); }

@media (min-width: 1000px) {
  .home-hero::before { background: linear-gradient(to top, rgb(20 16 10 / 0.65), rgb(20 16 10 / 0.15) 50%, rgb(20 16 10 / 0.08)), linear-gradient(to right, rgb(20 16 10 / 0.35), transparent 55%); }
}

/* Link rows: display label, short note and arrow, between hairlines. Used by the intro and quality sections. */
.home-links { --label-width: 9rem; max-width: 34rem; border-top: 1px solid var(--line); }
.home-links--wide { --label-width: 11.5rem; max-width: 38rem; }
.home-link { display: grid; grid-template-columns: 1fr auto; align-items: baseline; column-gap: 1rem; padding-block: 0.9rem; border-bottom: 1px solid var(--line); color: var(--ink); text-decoration: none; transition: color 0.15s; }
.home-link__label { font-family: var(--font-display); font-size: 1.5rem; font-weight: 600; line-height: 1.2; letter-spacing: var(--tracking-display); text-transform: uppercase; }
.home-link__note { grid-column: 1; color: var(--muted); font-size: var(--text-base); }
.home-link .icon--arrow { grid-column: 2; grid-row: 1 / span 2; align-self: center; width: 1.25rem; height: 1.25rem; color: var(--green); transition: transform 0.15s var(--ease); }
.home-link:hover { color: var(--green); }
.home-link:hover .icon--arrow { transform: translateX(4px); }

@media (min-width: 600px) {
  .home-link { grid-template-columns: var(--label-width) 1fr auto; }
  .home-link__note { grid-column: 2; }
  .home-link .icon--arrow { grid-column: 3; grid-row: 1; }
}

/* Intro: headline, a sentence and a link row beside a cut-out of floating grains.
   The photo's white ground matches the page, so it needs no frame. */
.home-intro { display: grid; gap: 2rem; align-items: center; padding-block: clamp(3rem, 7vw, 7.5rem); }
.home-intro__title { margin: 0 0 1.5rem; color: var(--green); font-size: clamp(2.75rem, 4.5vw + 0.5rem, 4.75rem); line-height: 0.95; text-wrap: balance; }
.home-intro__text { max-width: 34rem; margin: 0 0 2rem; font-size: clamp(1.125rem, 0.5vw + 1rem, 1.3125rem); line-height: 1.55; }
.home-intro__image { justify-self: center; width: min(100%, 30rem); height: auto; }

@media (min-width: 900px) {
  .home-intro { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 3rem; }
  .home-intro__image { justify-self: end; width: 100%; max-width: 38rem; }
}

/* A slow drift, so the grains read as suspended rather than pasted in */
@media (prefers-reduced-motion: no-preference) {
  .home-intro__image { animation: grain-drift 9s ease-in-out infinite alternate; }
  @keyframes grain-drift { from { transform: translateY(-6px) rotate(-0.6deg); } to { transform: translateY(6px) rotate(0.6deg); } }
}

/* Shops: tinted band linking out to the UK and Spanish online shops for smaller orders from local stock */
.home-shops { margin-bottom: var(--section-space); background: var(--green-tint); }
.home-shops__inner { display: grid; gap: 1.5rem; align-items: center; padding-block: clamp(2rem, 4vw, 3rem); }
.home-shops__title { margin: 0 0 0.5rem; }
.home-shops__text { max-width: 34rem; margin: 0; color: var(--muted); }
.home-shops__links { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.home-shops__button { gap: 0.6rem; background: var(--white); color: var(--ink); }
.home-shops__button:hover { color: var(--green); }
.home-shops__flag { flex: none; width: 1.5rem; height: 1rem; border-radius: 2px; box-shadow: 0 0 0 1px var(--line); }

@media (min-width: 900px) {
  .home-shops__inner { grid-template-columns: minmax(0, 1fr) auto; column-gap: 3rem; }
}

/* Malts: the four product lines as bag cards in the site's leaf shape, linking to their pages */
.home-malts { padding-block: 0 var(--section-space); }
.home-malts__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.5rem 2rem; margin-bottom: 1.75rem; }
.home-malts__title { margin: 0; }
.home-more { display: inline-flex; align-items: center; gap: 0.4rem; color: var(--green); font-weight: 600; text-decoration: none; }
.home-more .icon--arrow { width: 1.1em; height: 1.1em; transition: transform 0.15s var(--ease); }
.home-more:hover .icon--arrow { transform: translateX(3px); }
.home-malts__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; }
.home-malt { display: grid; align-content: start; gap: 0.3rem; height: 100%; padding: 1.5rem 1rem 1.25rem; background: var(--paper); color: var(--ink); text-decoration: none; border-top-left-radius: 2rem; border-bottom-right-radius: 2rem; transition: background-color 0.3s var(--ease); }
/* Hover and keyboard focus: the bag grows from its base (so the grains stay on the ground), the name
   turns green and the arrow fills its circle. */
.home-malt__bag { justify-self: center; width: 72%; height: auto; margin-bottom: 1rem; mix-blend-mode: multiply; transform-origin: 50% 92%; transition: transform 0.6s var(--ease); }
.home-malt__name { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; font-family: var(--font-display); font-size: 1.375rem; font-weight: 600; line-height: 1.1; letter-spacing: var(--tracking-display); text-transform: uppercase; transition: color 0.2s var(--ease); }
.home-malt__name .icon--arrow { flex: none; box-sizing: border-box; width: 2rem; height: 2rem; padding: 0.45rem; border: 1px solid #d3cdc1; border-radius: 50%; color: var(--green); transition: background-color 0.2s var(--ease), border-color 0.2s var(--ease), color 0.2s var(--ease), transform 0.3s var(--ease); }
.home-malt:is(:hover, :focus-visible) { background: #f2efe9; }
.home-malt:is(:hover, :focus-visible) .home-malt__name { color: var(--green); }
.home-malt:is(:hover, :focus-visible) .home-malt__name .icon--arrow { border-color: var(--green); background: var(--green); color: var(--white); transform: translateX(2px); }
@media (prefers-reduced-motion: no-preference) {
  .home-malt:is(:hover, :focus-visible) .home-malt__bag { transform: scale(1.035); }
}
.home-malt__meta { color: var(--muted); font-size: var(--text-sm); line-height: 1.4; }
.home-malt__colour { font-variant-numeric: tabular-nums; white-space: nowrap; }

@media (min-width: 1000px) {
  .home-malts__list { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.25rem; }
  .home-malt { padding: 2rem 1.5rem 1.5rem; }
  .home-malt__name { font-size: 1.625rem; }
  .home-malt__meta { font-size: var(--text-base); }
}

/* Quality: portrait malt photo in the leaf frame beside two paragraphs and link rows to the quality page */
.home-quality { display: grid; gap: 2.5rem; align-items: center; padding-block: 0 var(--section-space); }
.home-quality__image { display: block; justify-self: center; width: min(100%, 30rem); height: auto; aspect-ratio: 1; object-fit: cover; border-top-left-radius: 30%; border-bottom-right-radius: 30%; background: var(--line); }
.home-quality__title { margin-bottom: 1rem; }
.home-quality__text { max-width: 34rem; margin: 0 0 1.25rem; font-size: var(--text-lg); }
.home-quality .home-links { margin-top: 1.75rem; }

@media (min-width: 900px) {
  .home-quality { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr); column-gap: clamp(3rem, 6vw, 6rem); }
  .home-quality__image { width: 100%; }
}

/* Figures: one large figure at a time beside a short paragraph, on the dark band. Without JS the
   figures are listed one under another; with JS they share one grid cell and rotate every 4 s. */
.home-figures { margin-bottom: var(--section-space); padding-block: var(--section-space); background: var(--ink-deep); color: var(--on-ink); }
.home-figures__inner { display: grid; gap: 3rem; align-items: center; }
.home-figures__list { display: grid; gap: 1.5rem; container-type: inline-size; } /* figure size follows the column, so "100,000+ t" fits on one line */
.home-figures__item { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.75rem 1.5rem; }
.home-figures__number { font-family: var(--font-display); font-size: min(14rem, 28cqi); white-space: nowrap; font-weight: 700; line-height: 0.8; letter-spacing: -0.02em; color: var(--gold); font-variant-numeric: lining-nums; }
.home-figures__number small { font-size: 0.4em; letter-spacing: 0; }
.home-figures__label { max-width: 13rem; padding-bottom: 0.3rem; font-family: var(--font-display); font-size: clamp(1.375rem, 1vw + 1rem, 2rem); font-weight: 600; line-height: 1.05; letter-spacing: var(--tracking-display); text-transform: uppercase; }
.js .home-figures__list { gap: 0; }
.js .home-figures__item { grid-area: 1 / 1; opacity: 0; transform: translateY(1.25rem); visibility: hidden; transition: opacity 0.7s var(--ease), transform 0.7s var(--ease), visibility 0s 0.7s; }
.js .home-figures__item.is-active { opacity: 1; transform: none; visibility: visible; transition-delay: 0s; }
.home-figures__controls { display: flex; gap: 0.5rem; margin-top: 2rem; }
.home-figures__dot { position: relative; width: 3.5rem; height: 1.5rem; padding: 0; border: 0; background: none; }
.home-figures__dot::before, .home-figures__dot::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 3px; margin-top: -1.5px; background: var(--on-ink-line); }
.home-figures__dot::after { background: var(--gold); transform: scaleX(0); transform-origin: left; }
.home-figures__dot[aria-current="true"]::after { transform: scaleX(1); }
.home-figures.is-playing .home-figures__dot[aria-current="true"]::after { animation: figures-progress 4s linear; }
@keyframes figures-progress { from { transform: scaleX(0); } }
.home-figures__title { margin-bottom: 1.25rem; color: var(--on-ink); }
.home-figures__text { max-width: 32rem; margin: 0 0 2rem; color: var(--on-ink-muted); font-size: var(--text-lg); }
.home-figures__links { display: flex; flex-wrap: wrap; gap: 1rem 2.5rem; }
.home-figures__link { display: inline-flex; align-items: center; gap: 0.5em; padding-bottom: 0.2rem; border-bottom: 1px solid var(--gold); color: var(--on-ink); font-weight: 600; text-decoration: none; }
.home-figures__link .icon--arrow { transition: transform 0.15s var(--ease); }
.home-figures__link:hover .icon--arrow { transform: translateX(3px); }

@media (min-width: 900px) {
  .home-figures__inner { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); column-gap: clamp(3rem, 6vw, 6rem); }
}

/* Logistics: port-cranes photo in the leaf frame used by .stage, beside a lead, fact rows and a link */
.home-logistics { display: grid; gap: 2.5rem; align-items: center; padding-block: 0 var(--section-space); }
.home-logistics__image { display: block; width: 100%; height: auto; aspect-ratio: 6 / 5; object-fit: cover; border-top-left-radius: 30%; border-bottom-right-radius: 30%; background: var(--line); }
.home-logistics__title { margin-bottom: 1rem; }
.home-logistics__text { max-width: 34rem; margin: 0 0 1.75rem; font-size: var(--text-lg); }
.home-logistics__facts { max-width: 36rem; margin: 0 0 1.75rem; border-top: 1px solid var(--line); }
.home-logistics__facts div { display: grid; gap: 0.1rem; padding-block: 0.8rem; border-bottom: 1px solid var(--line); }
.home-logistics__facts dt { font-weight: 600; }
.home-logistics__facts dd { margin: 0; color: var(--muted); }

@media (min-width: 600px) {
  .home-logistics__facts div { grid-template-columns: 9rem 1fr; gap: 1rem; }
}
@media (min-width: 900px) {
  .home-logistics { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: clamp(3rem, 6vw, 6rem); }
}

/* Sustainability: field photo in the leaf frame, on the right on wide screens so the splits alternate */
.home-sustainability { display: grid; gap: 2.5rem; align-items: center; padding-block: 0 var(--section-space); }
.home-sustainability__image { display: block; width: 100%; height: auto; aspect-ratio: 6 / 5; object-fit: cover; border-top-left-radius: 30%; border-bottom-right-radius: 30%; background: var(--line); }
.home-sustainability__title { margin-bottom: 1rem; }
.home-sustainability__text { max-width: 34rem; margin: 0 0 1.25rem; font-size: var(--text-lg); }
.home-sustainability__text:last-of-type { margin-bottom: 2rem; }

@media (min-width: 900px) {
  .home-sustainability { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: clamp(3rem, 6vw, 6rem); }
  .home-sustainability__image { grid-column: 2; grid-row: 1; border-radius: 0; border-top-right-radius: 30%; border-bottom-left-radius: 30%; }
}

/* News: three latest articles as image, date and title. Placeholder cards until articles exist. */
.home-news { padding-block: 0 var(--section-space); }
.home-news__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.5rem 2rem; margin-bottom: 1.75rem; }
.home-news__title { margin: 0; }
.home-news__list { display: grid; gap: 2rem; }
.home-news__card { display: grid; gap: 0.4rem; color: var(--ink); text-decoration: none; }
.home-news__image { display: block; aspect-ratio: 3 / 2; margin-bottom: 0.6rem; background: var(--line); width: 100%; height: auto; object-fit: cover; }
.home-news__date { color: var(--muted); font-size: var(--text-sm); font-variant-numeric: tabular-nums; }
.home-news__headline { font-family: var(--font-display); font-size: 1.5rem; font-weight: 600; line-height: 1.15; letter-spacing: var(--tracking-display); text-transform: uppercase; transition: color 0.15s; }
.home-news__card:hover .home-news__headline { color: var(--green); }

@media (min-width: 800px) {
  .home-news__list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; }
}

/* Partners: heading and text beside the association logos (below them on narrow screens). Logos sit in one row,
   split by hairlines, each linking to the organisation. */
.home-partners { display: grid; gap: 2.5rem; align-items: center; padding-block: 0 var(--section-space); }
.home-partners__title { margin-bottom: 0.75rem; }
.home-partners__text { max-width: 40rem; margin: 0; color: var(--muted); font-size: var(--text-lg); }
.home-partners__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.home-partners__list li { display: grid; padding-inline: clamp(0.75rem, 3vw, 2.5rem); border-left: 1px solid var(--line); }
.home-partners__list li:first-child { padding-left: 0; border-left: 0; }
.home-partners__logo { display: grid; place-items: center start; min-height: 4rem; transition: opacity 0.2s var(--ease); }
.home-partners__logo:hover { opacity: 0.7; }
.home-partners__logo img { width: auto; max-width: 100%; height: auto; max-height: 3.5rem; }

@media (min-width: 700px) {
  .home-partners__list { grid-template-columns: repeat(3, auto); justify-content: start; }
  .home-partners__list li { padding-inline: 3rem; }
  .home-partners__logo { min-height: 6rem; }
  .home-partners__logo img { max-height: 5.5rem; }
}
@media (min-width: 1100px) {
  .home-partners { grid-template-columns: minmax(0, 1fr) auto; column-gap: clamp(3rem, 6vw, 6rem); }
  .home-partners__list li { padding-inline: 2.5rem; }
  .home-partners__list li:last-child { padding-right: 0; }
}

/* Legal pages (privacy, cookies): title block, then a contents list beside a readable text column.
   .prose and .table-scroll are general-purpose and can serve articles later. */
.legal__header { padding-block: 3.5rem 2.5rem; border-bottom: 1px solid var(--line); }
.legal__title { margin-bottom: 0.75rem; }
.legal__meta { margin: 0 0 1.5rem; color: var(--muted); font-size: var(--text-sm); }
.legal__intro { max-width: 42rem; margin: 0; font-size: var(--text-lg); }

.legal__body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2.5rem; padding-block: 3rem calc(var(--section-space) * 1.25); }
.legal__toc { padding: 1.25rem 1.5rem; background: var(--paper); }
.legal__toc-title { margin: 0 0 0.75rem; font-family: var(--font-text); font-size: var(--text-sm); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.legal__toc ol { display: grid; gap: 0.4rem; counter-reset: toc; }
.legal__toc li { counter-increment: toc; display: flex; gap: 0.6rem; font-size: 1rem; line-height: 1.35; }
.legal__toc li::before { content: counter(toc, decimal-leading-zero); flex: none; width: 1.5rem; color: var(--muted); font-size: var(--text-sm); font-variant-numeric: tabular-nums; line-height: 1.55; }
.legal__toc a { color: var(--ink); text-decoration: none; }
.legal__toc a:hover { color: var(--green); text-decoration: underline; }

/* Long-form text */
.prose { max-width: 42rem; }
.prose > section + section { margin-top: 4rem; }
.prose h2 { margin: 0 0 1rem; font-size: 2rem; font-weight: 600; text-transform: none; letter-spacing: calc(0.01em - 1px); }
.prose h3 { margin: 1.75rem 0 0.5rem; font-family: var(--font-text); font-size: var(--text-lg); font-weight: 600; line-height: 1.35; letter-spacing: 0; text-transform: none; }
.prose ul { margin: 0 0 1em; padding-left: 1.25rem; }
.prose li { margin-bottom: 0.4em; }
.prose li::marker { color: var(--green); }
.prose strong { font-weight: 600; }
.prose h2[id] { scroll-margin-top: calc(var(--header-height) + 1.5rem); }

.table-scroll { margin: 1.5rem 0; overflow-x: auto; }
.table-scroll table { width: 100%; min-width: 30rem; border-collapse: collapse; font-size: 1rem; line-height: 1.45; }
.table-scroll caption { padding-bottom: 0.75rem; text-align: left; font-weight: 600; }
.table-scroll th, .table-scroll td { padding: 0.8rem 1rem 0.8rem 0; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.table-scroll th { font-size: var(--text-sm); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); border-bottom: 2px solid var(--ink); }
.table-scroll td:first-child { font-weight: 600; }

/* .table-stack: on narrow phones, drop the header row and stack each row's cells instead of
   scrolling sideways. A cell's data-label is shown above it, or beside it with --inline (for figures). */
@media (max-width: 559px) {
  .table-scroll table.table-stack { min-width: 0; }
  .table-stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .table-stack tbody, .table-stack tr, .table-scroll .table-stack th, .table-scroll .table-stack td { display: block; }
  .table-stack tr { padding-block: 0.9rem; border-bottom: 1px solid var(--line); }
  .table-stack tbody tr:first-child { border-top: 2px solid var(--ink); }
  .table-scroll .table-stack th, .table-scroll .table-stack td { padding: 0; border: 0; text-align: left; white-space: normal; }
  .table-scroll .table-stack tbody th, .table-scroll .table-stack td:first-child { margin-bottom: 0.35rem; font-weight: 600; }
  .table-stack td[data-label]::before { content: attr(data-label); display: block; color: var(--muted); font-size: var(--text-sm); font-weight: 400; }
  .table-stack--inline td[data-label] { display: flex; justify-content: space-between; gap: 1rem; }
  .table-stack--inline td[data-label]::before { font-size: inherit; }
}

@media (min-width: 900px) {
  .legal__header { padding-block: 5rem 3rem; }
  .legal__body { grid-template-columns: 15rem minmax(0, 1fr); gap: 4rem; padding-block: 4rem calc(var(--section-space) * 1.25); }
  .legal__toc { position: sticky; top: calc(var(--header-height) + 2rem); align-self: start; padding: 0; background: none; }
}
@media (min-width: 1100px) {
  .legal__body { grid-template-columns: 17rem minmax(0, 1fr); gap: 6rem; }
}

/* News: the listing (title block, category filters, a featured latest article, a card grid, pages)
   and the article page (title block, wide lead photo, share column beside the .prose text, related news). */
.news-meta { margin: 0; color: var(--muted); font-size: var(--text-sm); font-variant-numeric: tabular-nums; }
.news-meta span { margin-inline: 0.35em; color: var(--line); }

.news__header { padding-block: 3.5rem 2rem; }
.news__title { margin-bottom: 0.75rem; }
.news__intro { max-width: 42rem; margin: 0 0 2rem; font-size: var(--text-lg); }
.news__filters ul { display: flex; flex-wrap: wrap; gap: 0.5rem 1.75rem; padding-bottom: 0.9rem; border-bottom: 1px solid var(--line); }
.news-filter { display: inline-block; padding-block: 0.25rem; color: var(--ink); font-weight: 600; text-decoration: none; }
.news-filter:hover { color: var(--green); }
.news-filter.is-current { color: var(--green); box-shadow: inset 0 -2px 0 var(--green); }

/* Cards: the whole card is the link (the title's link covers it) */
.news-card, .news-feature { position: relative; display: grid; align-content: start; gap: 1rem; }
.news-card__image, .news-feature__image { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; background: var(--paper); }
.news-card__body, .news-feature__body { display: grid; align-content: start; gap: 0.5rem; }
.news-card__title, .news-feature__title { margin: 0; }
.news-card__title { font-size: 1.5rem; font-weight: 600; line-height: 1.15; }
.news-card__title a, .news-feature__title a { color: var(--ink); text-decoration: none; transition: color 0.15s; }
.news-card__title a::after, .news-feature__title a::after { content: ""; position: absolute; inset: 0; }
.news-card:hover .news-card__title a, .news-feature:hover .news-feature__title a { color: var(--green); }
.news-card__title a:focus-visible, .news-feature__title a:focus-visible { outline: none; }
.news-card:has(a:focus-visible), .news-feature:has(a:focus-visible) { outline: var(--focus); outline-offset: 4px; }

.news__featured { padding-block: 1rem 3.5rem; }
.news-feature__title { font-size: clamp(2rem, 2.5vw + 1rem, 3rem); line-height: 1.02; }
.news-feature__excerpt { max-width: 34rem; margin: 0.25rem 0 0; font-size: var(--text-lg); }

.news__more { padding-bottom: var(--section-space); }
.news__grid { display: grid; gap: 2.75rem 1.5rem; }

.news__pages { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem; margin-block: 3.5rem var(--section-space); padding-top: 1.25rem; border-top: 1px solid var(--line); }
.news__pages a { display: grid; place-items: center; min-width: 2.75rem; min-height: 2.75rem; color: var(--ink); font-weight: 600; text-decoration: none; }
.news__pages a:hover { color: var(--green); }
.news__pages a[aria-current] { color: var(--green); box-shadow: inset 0 -2px 0 var(--green); }
.news__pages .news__next { display: inline-flex; gap: 0.4rem; margin-left: auto; color: var(--green); }
.news__next .icon--arrow { width: 1.1em; height: 1.1em; transition: transform 0.15s var(--ease); }
.news__next:hover .icon--arrow { transform: translateX(3px); }

@media (min-width: 600px) {
  .news__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 900px) {
  .news__header { padding-block: 5rem 2.5rem; }
  .news-feature { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); align-items: center; gap: 3rem; }
  .news__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .news__grid--pair { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Article */
.article__header { display: grid; justify-items: start; gap: 1.25rem; padding-block: 2.5rem 2.5rem; }
.article__back { display: inline-flex; align-items: center; gap: 0.4rem; color: var(--ink); font-weight: 600; text-decoration: none; }
.article__back:hover { color: var(--green); }
.article__back .icon--arrow { width: 1.1em; height: 1.1em; transition: transform 0.15s var(--ease); }
.article__back:hover .icon--arrow { transform: translateX(-3px); }
.article__title { max-width: 20ch; margin: 0; font-size: clamp(2.5rem, 4vw + 1rem, 4.5rem); line-height: 0.98; text-wrap: balance; }
/* Title and date line centred over the text column (the photo and text below); the back link stays at the left edge */
.article__header .article__title, .article__header .news-meta { justify-self: center; text-align: center; }

/* Lead photo: text-column width at the top of the article, beside the contents and share links */
.prose .article__lead { margin: 0 0 2.5rem; }
.article__lead img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }

.article__body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2.5rem; padding-block: 0.5rem var(--section-space); }
.article__aside { order: 2; padding-top: 1.5rem; border-top: 1px solid var(--line); }
.article__aside-title { margin: 0 0 0.6rem; font-family: var(--font-text); font-size: var(--text-sm); font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--muted); }
.article__share { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; }
.article__toc { display: grid; gap: 0.45rem; margin-bottom: 2rem; }
.article__toc a { color: var(--ink); text-decoration: none; }
.article__toc a:hover { color: var(--green); text-decoration: underline; }
.article__share a { font-weight: 600; }

.article__lede { font-size: clamp(1.25rem, 0.5vw + 1.1rem, 1.4375rem); line-height: 1.5; }
.article .prose h2 { margin: 3rem 0 1rem; }
.prose figure { margin: 2.5rem 0; }
.prose figure img { display: block; width: 100%; height: auto; }
.prose figcaption { margin-top: 0.75rem; color: var(--muted); font-size: var(--text-sm); }
.prose blockquote { margin: 2.5rem 0; padding-left: 1.5rem; border-left: 3px solid var(--gold); }
.prose blockquote p { margin: 0 0 0.75rem; font-size: clamp(1.25rem, 0.6vw + 1.1rem, 1.5rem); line-height: 1.45; }
.prose .article__note { margin-top: -0.75rem; color: var(--muted); font-size: var(--text-sm); }
.harvest-table { font-variant-numeric: tabular-nums; }
.prose blockquote footer { color: var(--muted); font-size: var(--text-sm); }

.article__related { padding-block: var(--section-space); border-top: 1px solid var(--line); }
.article__related-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.5rem 2rem; margin-bottom: 1.75rem; }
.article__related-head h2 { margin: 0; }

@media (min-width: 900px) {
  .article__header { grid-template-columns: 15rem minmax(0, 42rem); column-gap: 4rem; padding-block: 3.5rem 3rem; }
  .article__back { grid-column: 1 / -1; }
  .article__header .article__title, .article__header .news-meta { grid-column: 2; }
  .article__body { grid-template-columns: 15rem minmax(0, 1fr); gap: 4rem; padding-top: 1rem; }
  .article__aside { order: 0; position: sticky; top: calc(var(--header-height) + 2rem); align-self: start; padding-top: 0; border-top: 0; }
  .article__share { flex-direction: column; }
}
@media (min-width: 1100px) {
  .article__header { grid-template-columns: 17rem minmax(0, 42rem); column-gap: 6rem; }
  .article__body { grid-template-columns: 17rem minmax(0, 1fr); gap: 6rem; }
}

/* Product pages (Pilsner, Pale Ale, Wheat malt). One template, driven by src/data/products.mjs. */

.product__intro { display: grid; gap: 2.5rem; padding-block: 2.5rem var(--section-space); }
.product__media { justify-self: center; width: min(72vw, 20rem); }
.product__bag { width: 100%; height: auto; mix-blend-mode: multiply; }
.product__circle { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: 50%; background: var(--paper); }

.product__title { margin-bottom: 0.9rem; }
.product__lede { max-width: 38rem; font-size: var(--text-lg); }

.product-facts { display: grid; gap: 0; margin: 1.75rem 0; border-top: 1px solid var(--line); }
.product-facts__row { display: grid; grid-template-columns: 8rem 1fr; gap: 1rem; padding: 0.7rem 0; border-bottom: 1px solid var(--line); }
.product-facts__row dt { color: var(--muted); }
.product-facts__row dd { display: flex; align-items: center; gap: 0.5rem; margin: 0; font-weight: 600; }
/* Keep the longer Spanish labels intact without changing the compact English layout. */
html[lang="es"] .product-facts__row { grid-template-columns: 9.5rem minmax(0, 1fr); }
html[lang="es"] .product-facts__row dt { white-space: nowrap; }
/* French labels ("Durée de conservation", "Taux d'utilisation") are longer still; give them room
   and let values wrap instead of overflowing the row. */
html[lang="fr"] .product-facts__row { grid-template-columns: 11.5rem minmax(0, 1fr); }
html[lang="fr"] .product-facts__row dt { white-space: normal; }
html[lang="fr"] .product-facts__row dd { white-space: normal; }

.product__actions { display: flex; flex-wrap: wrap; gap: 0.75rem 1rem; }

.product__parameters { padding-block: 0 var(--section-space); }
.product__parameters h2 { margin-bottom: 1.25rem; }
.product-table { width: 100%; max-width: 40rem; border-collapse: collapse; table-layout: fixed; font-size: 1rem; }
.product-table th, .product-table td { padding: 0.7rem 1rem 0.7rem 0; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; word-break: break-word; }
.product-table th { width: 50%; font-size: var(--text-sm); font-weight: 600; letter-spacing: 0.02em; color: var(--muted); border-bottom: 2px solid var(--ink); }
.product-table td:first-child { font-weight: 600; }

.product__other { padding-block: 0 var(--section-space); }
.product__other h2 { margin-bottom: 1.25rem; }
.product-cards { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); }
.product-card { position: relative; display: grid; grid-template-columns: 5.5rem 1fr; align-items: center; column-gap: 1.25rem; height: 100%; padding: 1.5rem 1.25rem 3.75rem 1.25rem; background: var(--paper); color: var(--ink); text-decoration: none; border-top-left-radius: 2rem; border-bottom-right-radius: 2rem; transition: background-color 0.3s var(--ease); }
/* Hover and keyboard focus match the home "Our malts" cards: the image grows a little (bags from their
   base), the name turns green and the arrow fills its circle. */
.product-card__image { width: 100%; height: auto; mix-blend-mode: multiply; transform-origin: 50% 92%; transition: transform 0.6s var(--ease); }
.product-card__image--circle { aspect-ratio: 1; object-fit: cover; border-radius: 50%; mix-blend-mode: normal; transform-origin: 50% 50%; }
.product-card__body { display: grid; gap: 0.2rem; }
.product-card__name { font-family: var(--font-display); font-size: 1.75rem; font-weight: 600; line-height: 1.1; letter-spacing: var(--tracking-display); text-transform: uppercase; transition: color 0.2s var(--ease); }
.product-card__text { color: var(--ink); }
.product-card__meta { color: var(--muted); font-size: var(--text-sm); }
.product-card__go { position: absolute; right: 1.25rem; bottom: 1.25rem; display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border: 1px solid #d3cdc1; border-radius: 50%; color: var(--green); transition: background-color 0.2s var(--ease), border-color 0.2s var(--ease), color 0.2s var(--ease), transform 0.3s var(--ease); }
.product-card:is(:hover, :focus-visible) { background: #f2efe9; }
.product-card:is(:hover, :focus-visible) .product-card__name { color: var(--green); }
.product-card:is(:hover, :focus-visible) .product-card__go { border-color: var(--green); background: var(--green); color: var(--white); transform: translateX(2px); }
@media (prefers-reduced-motion: no-preference) {
  .product-card:is(:hover, :focus-visible) .product-card__image { transform: scale(1.035); }
}
@media (min-width: 480px) {
  .product-card { grid-template-columns: 7.5rem 1fr; column-gap: 1.5rem; padding: 1.5rem 4.5rem 1.5rem 1.5rem; }
}

@media (min-width: 700px) {
  .product__intro { grid-template-columns: minmax(16rem, 22rem) 1fr; align-items: center; column-gap: clamp(4rem, 9vw, 9rem); padding-block: 3rem var(--section-space); }
  .product__media { width: 100%; }
  .product-facts__row { grid-template-columns: 5.5rem minmax(0, 1fr); gap: 0.75rem; }
  .product-facts__row dd { white-space: nowrap; }

  html[lang="es"] .product-facts__row dd { white-space: normal; }
}

@media (min-width: 1100px) {
  .product-facts { grid-template-columns: repeat(2, minmax(0, 24rem)); border-top: 0; column-gap: 2.5rem; }
  html[lang="es"] .product-facts__row:is(.product-facts__row--best-for, .product-facts__row--packaging) { grid-template-columns: 5.5rem minmax(0, 1fr); }
  html[lang="es"] .product-facts__row dd { white-space: nowrap; }
}

/* Our Malts index: three circular malt links */
.malts { padding-block: var(--section-space); }
.malts__title { margin-bottom: 3rem; text-align: center; }
.malts__list { display: grid; gap: 3rem; justify-items: center; }
.malt-circle { display: grid; justify-items: center; gap: 1.25rem; color: var(--ink); text-decoration: none; }
.malt-circle__disc { display: grid; place-items: center; width: min(70vw, 17rem); aspect-ratio: 1; overflow: hidden; border-radius: 50%; background: var(--paper); transition: background-color 0.15s; }
.malt-circle__disc img { width: 100%; height: 100%; object-fit: cover; }
.malt-circle__name { font-family: var(--font-display); font-size: 1.5rem; font-weight: 600; letter-spacing: var(--tracking-display); text-transform: uppercase; }
/* Under each name: a swatch in the wort colour of the malt's EBC, the EBC range and typical uses */
.malt-circle__meta { display: grid; justify-items: center; gap: 0.3rem; margin-top: -0.6rem; text-align: center; line-height: 1.35; }
.malt-circle__colour { display: inline-flex; align-items: center; gap: 0.5rem; color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.malt-circle__swatch { flex: none; width: 1rem; height: 1rem; border-radius: 50%; background: var(--swatch); box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.15); }
.malt-circle__uses { max-width: 17rem; color: var(--muted); font-size: var(--text-sm); }
.malts--speciality { padding-top: 0; scroll-margin-top: var(--header-height); }
.malts--speciality .malts__title { font-size: clamp(2.5rem, 5vw + 1rem, 4.25rem); }
.malts__list--five .malt-circle__disc { width: min(70vw, 14rem); }
.malts__list--five .malt-circle__name { text-align: center; }
a.malt-circle:hover .malt-circle__disc { background: var(--green-tint); }
a.malt-circle:hover .malt-circle__name { color: var(--green); }

@media (min-width: 800px) {
  .malts__list { grid-template-columns: repeat(3, 1fr); align-items: start; }
  .malts__list--five { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1100px) {
  .malts__list--five { grid-template-columns: repeat(5, 1fr); column-gap: 2rem; }
  .malts__list--five .malt-circle__disc { width: 100%; max-width: 14rem; }
}

/* Logistics page: text-led sections, heading in a left column and copy on the right. */
.logistics__hero { position: relative; display: flex; align-items: flex-end; min-height: clamp(16rem, 26vw, 24rem); overflow: hidden; background: #1b4a4a; color: var(--white); }
.logistics__hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgb(4 20 24 / 0.55) 0%, rgb(4 20 24 / 0.25) 45%, rgb(4 20 24 / 0) 75%); }
.logistics__hero-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%; }
.logistics__hero-inner { position: relative; z-index: 1; padding-block: 3rem; }
.logistics__title { max-width: 44rem; margin: 0; color: var(--white); font-size: clamp(2.25rem, 4.6vw, 4rem); line-height: 1.05; text-wrap: balance; }

/* Customs documents: a document mark, enlarged and turned, fills the empty heading column (as the wheat mark on Quality). */
.logistics__docs { position: relative; isolation: isolate; overflow: hidden; }
.logistics__docs::before { content: ""; position: absolute; z-index: -1; left: 6rem; bottom: -5rem; width: 16rem; aspect-ratio: 74.6 / 96; background: url("/images/document-mark.svg") center / contain no-repeat; transform: rotate(-32deg); pointer-events: none; }
.logistics__docs .l-section__title { position: static; }
.logistics__docs-head p { max-width: 24rem; margin: 1.25rem 0 0; }
@media (max-width: 799px) {
  .logistics__docs::before { left: auto; right: -5rem; bottom: -5rem; width: 14rem; }
}


.l-section { display: grid; gap: 2rem; padding-block: var(--section-space); border-top: 1px solid var(--line); }
.l-section__title { margin: 0; }
.l-section__body { min-width: 0; max-width: 42rem; }
.l-section__body.prose h3, .l-section__body.prose h3:first-child { margin-top: 0; }
.l-section__body p { margin: 0 0 1em; }
.l-section__body p:last-child { margin-bottom: 0; }


.l-lead { margin: 0 0 1.5rem; }
.l-steps { counter-reset: step; border-top: 1px solid var(--line); }
.l-steps li { counter-increment: step; display: grid; grid-template-columns: 3rem 1fr; align-items: baseline; padding-block: 1.1rem; border-bottom: 1px solid var(--line); }
.l-steps li::before { content: counter(step, decimal-leading-zero); grid-row: span 2; font-family: var(--font-display); font-size: 1.5rem; font-weight: 600; line-height: 1.3; color: var(--green); }
.l-steps h3 { margin: 0; font-family: var(--font-text); font-size: var(--text-lg); font-weight: 600; line-height: 1.35; letter-spacing: 0; text-transform: none; }
.l-steps p { margin: 0.2rem 0 0; color: var(--muted); }


@media (min-width: 800px) {
        .l-section { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); column-gap: 4rem; }
  .l-section__title { position: sticky; top: calc(var(--header-height) + 1.5rem); align-self: start; }
  }

/* Modes of delivery: two side-by-side columns */
.l-section__body--cols { display: grid; gap: 2rem; max-width: none; }
.mode h3 { margin: 0 0 0.6rem; font-family: var(--font-text); font-size: var(--text-lg); font-weight: 600; line-height: 1.35; letter-spacing: 0; text-transform: none; }

/* Packaging: table beside a leaf-shaped slider (bags, big bags, bulk) */
.l-formats { display: grid; gap: 2rem; max-width: none; align-items: center; }
.l-formats .table-scroll { margin: 0; }
.format-slider__track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; border-top-left-radius: 30%; border-bottom-right-radius: 30%; }
.format-slider__track::-webkit-scrollbar { display: none; }
.format-slider__track:focus-visible { outline: var(--focus); outline-offset: 3px; }
.format-slider__slide { flex: 0 0 100%; scroll-snap-align: center; }
.format-slider__slide img, .format-slider__blank { display: block; width: 100%; height: auto; aspect-ratio: 6 / 5; object-fit: cover; background: var(--line); }
.format-slider__tabs { display: flex; justify-content: center; gap: 0.5rem; margin-top: 1rem; }
.format-slider__tabs button { padding: 0.45rem 1rem; border: 1px solid var(--line); border-radius: 999px; background: transparent; color: var(--muted); font: inherit; font-size: var(--text-sm); cursor: pointer; transition: background-color 0.15s, color 0.15s, border-color 0.15s; }
.format-slider__tabs button:hover { color: var(--ink); border-color: var(--muted); }
.format-slider__tabs button[aria-current="true"] { background: var(--green); border-color: var(--green); color: var(--white); }

/* Rail and sea freight: the leaf-shaped stage (photo beside the numbered steps), with the
   shipping lines in a full-width strip underneath, their logos split by hairlines. */
#route, #lead-times, #packaging, #documents { scroll-margin-top: var(--header-height); }
.logistics__route .stage__media img { aspect-ratio: 5 / 6; object-position: 84% 50%; }
.logistics__route .l-steps { margin-top: 1.5rem; }
.carriers { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.25rem 3rem; padding-top: 1.75rem; border-top: 1px solid var(--line); }
.carriers__title { margin: 0; color: var(--muted); font-weight: 600; }
.carriers__list { display: flex; flex-wrap: wrap; align-items: center; }
.carriers__list li { display: flex; align-items: center; min-height: 4.5rem; padding-inline: clamp(1.25rem, 3vw, 2.75rem); border-left: 1px solid var(--line); }
.carriers__list li:first-child { padding-left: 0; border-left: 0; }
.carriers__list li:last-child { padding-right: 0; }
.carriers__list img { width: auto; height: auto; max-width: 9rem; }
.carriers__maersk { max-height: 1.6rem; }
.carriers__msc { max-height: 2.9rem; }
.carriers__cosco { max-height: 3.2rem; }
.carriers__oocl { max-height: 1.7rem; }
.carriers__evergreen { max-height: 1.6rem; }
@media (min-width: 800px) {
  .logistics__route .carriers { grid-column: 1 / -1; margin-top: 1rem; }
}
@media (max-width: 599px) {
  .carriers__list { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
  .carriers__list li, .carriers__list li:first-child { padding: 0.75rem 0; border: 0; border-top: 1px solid var(--line); }
  .carriers__list li:nth-child(even) { padding-left: 1.25rem; border-left: 1px solid var(--line); }
}

/* Weight limits: row labels left, figures right-aligned in equal columns */
.l-weights { max-width: none; }
.l-weights .l-lead { max-width: 42rem; }
.l-weights .table-scroll { margin: 0; }
.table-scroll .weight-table { min-width: 36rem; max-width: 56rem; font-variant-numeric: tabular-nums; }
.weight-table th, .weight-table td { padding: 0.85rem 1rem 0.85rem 0; text-align: right; white-space: nowrap; }
.weight-table thead th { font-size: var(--text-sm); }
.weight-table thead th:first-child, .weight-table tbody th { text-align: left; white-space: normal; }
.weight-table tbody th { font-size: inherit; font-weight: 600; letter-spacing: 0; text-transform: none; color: inherit; border-bottom: 1px solid var(--line); }
.weight-table td:last-child, .weight-table thead th:last-child { padding-right: 0; }

@media (min-width: 800px) {
  .l-section__body--cols { grid-template-columns: 1fr 1fr; column-gap: 2.5rem; }
  .l-section--wide { grid-template-columns: 1fr; }
  .l-section--wide .l-section__title { position: static; }
  /* Packaging: heading and table share the left column, the slider spans both rows on the right. */
  .l-section--formats { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto 1fr; column-gap: clamp(3rem, 6vw, 6rem); row-gap: 2rem; }
  .l-section--formats .l-section__title { position: static; }
  .l-section--formats .l-formats { display: contents; }
  .l-section--formats .table-scroll { grid-column: 1; align-self: start; }
  .l-section--formats .format-slider { grid-column: 2; grid-row: 1 / span 2; }
  .l-section--formats .format-slider__track { border-radius: 0; border-top-right-radius: 30%; border-bottom-left-radius: 30%; }
}

/* Container Tracking: one row per shipping line, logo on the left and its tracking site on the right. */
.tracking .logistics__hero-image { object-position: 50% 48%; }
.tracking__lines { display: grid; gap: 0.75rem; margin-top: 2rem; }
.tracking-line { display: grid; gap: 1.25rem; padding: 1.25rem 1.5rem; background: var(--paper); color: var(--ink); text-decoration: none; transition: background-color 0.15s; }
.tracking-line:hover { background: var(--green-tint); }
.tracking-line__logo { width: auto; height: 1.6rem; mix-blend-mode: multiply; }
.tracking-line__logo--msc { height: 2.9rem; margin-block: -0.65rem; }
.tracking-line__logo--cosco { height: 3.2rem; margin-block: -0.8rem; }
.tracking-line__logo--oocl { height: 1.7rem; }
.tracking-line__site { display: flex; align-items: center; justify-content: space-between; gap: 1rem; font-weight: 600; }
.tracking-line__site .icon { width: 1.1rem; height: 1.1rem; color: var(--green); }
.tracking-line:hover .tracking-line__site { color: var(--green); }
@media (min-width: 600px) {
  .tracking-line { grid-template-columns: 10rem minmax(0, 1fr); align-items: center; gap: 2rem; min-height: 5rem; }
}

/* Sustainability page: field hero, the Logistics two-column sections, and three image-led stages. */
.sustainability__hero { position: relative; display: flex; align-items: flex-end; min-height: clamp(16rem, 26vw, 24rem); overflow: hidden; background: #4a3d2a; color: var(--white); }
.sustainability__hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgb(10 32 48 / 0.55) 0%, rgb(10 32 48 / 0.2) 45%, rgb(10 32 48 / 0) 70%); }
.sustainability__hero-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 45% 50%; }
.sustainability__hero-inner { position: relative; z-index: 1; padding-block: 3rem; }
.sustainability__title { max-width: 44rem; margin: 0; color: var(--white); font-size: clamp(2.25rem, 4.6vw, 4rem); line-height: 1.05; text-wrap: balance; }

/* On-page index (Quality page): the numbered steps pattern, with the headings as links */
.s-index a { color: var(--ink); text-decoration: none; }
.s-index a:hover { color: var(--green); text-decoration: underline; }

/* Our approach: three stages as panels, each a greyscale photo half covered by a brand-colour block
   (after vandenbosch.com). On hover or focus the block slides away, the photo turns to colour and the
   arrow fills its circle, as on the malt cards. Each panel links to its stage below. */
.approach { padding-block: var(--section-space); }
.approach__head { display: grid; gap: 1.25rem; margin-bottom: 2.5rem; }
.approach__title { margin: 0; }
.approach__lead { max-width: 44rem; margin: 0; color: var(--muted); font-size: var(--text-lg); }
.approach__list { display: grid; gap: 2rem; }
.approach__card { display: grid; gap: 1.25rem; color: var(--ink); text-decoration: none; }
.approach__media { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--line); }
.approach__media img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.05); transition: filter 0.6s var(--ease), transform 0.8s var(--ease); }
.approach__media::before { content: ""; position: absolute; inset: 0 50% 0 0; z-index: 1; background: var(--approach-colour); mix-blend-mode: multiply; transition: right 0.6s var(--ease); }
/* Shade behind the label once the colour block has slid away */
.approach__media::after { content: ""; position: absolute; inset: 0 0 55% 0; z-index: 1; background: linear-gradient(180deg, rgb(0 0 0 / 0.45), rgb(0 0 0 / 0)); opacity: 0; transition: opacity 0.6s var(--ease); }
.approach__card--farming { --approach-colour: var(--green); }
.approach__card--malting { --approach-colour: var(--gold); }
.approach__card--logistics { --approach-colour: var(--blue); }
.approach__stage { position: absolute; top: 1.25rem; left: 1.4rem; right: calc(50% + 0.5rem); z-index: 2; font-family: var(--font-display); font-size: 2.25rem; font-weight: 700; line-height: 1; letter-spacing: var(--tracking-display); text-transform: uppercase; color: var(--white); }
.approach__text { display: flex; align-items: center; justify-content: space-between; gap: 1rem; font-size: var(--text-lg); line-height: 1.35; transition: color 0.2s var(--ease); }
.approach__text .icon--arrow { flex: none; box-sizing: border-box; width: 2rem; height: 2rem; padding: 0.45rem; border: 1px solid #d3cdc1; border-radius: 50%; color: var(--green); transition: background-color 0.2s var(--ease), border-color 0.2s var(--ease), color 0.2s var(--ease), transform 0.3s var(--ease); }
.approach__card:is(:hover, :focus-visible) .approach__media img { filter: none; }
.approach__card:is(:hover, :focus-visible) .approach__media::before { right: 100%; }
.approach__card:is(:hover, :focus-visible) .approach__media::after { opacity: 1; }
.approach__card:is(:hover, :focus-visible) .approach__text { color: var(--green); }
.approach__card:is(:hover, :focus-visible) .approach__text .icon--arrow { border-color: var(--green); background: var(--green); color: var(--white); transform: translateY(2px); }
@media (prefers-reduced-motion: no-preference) {
  .approach__card:is(:hover, :focus-visible) .approach__media img { transform: scale(1.03); }
}
@media (min-width: 800px) {
  .approach__list { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: clamp(1.5rem, 3vw, 3rem); }
  .approach__media { aspect-ratio: 4 / 5; }
}

/* Stages: leaf-shaped image beside the copy, alternating sides on wide screens */
.stage { display: grid; gap: 2.5rem; padding-block: var(--section-space); border-top: 1px solid var(--line); scroll-margin-top: var(--header-height); }
.stage__media img { display: block; width: 100%; height: auto; aspect-ratio: 6 / 5; object-fit: cover; border-top-left-radius: 30%; border-bottom-right-radius: 30%; background: var(--line); }
.stage__body { max-width: 36rem; }
.stage__media .sustainability__port { object-position: 47% 50%; }
.stage__title { display: flex; align-items: baseline; gap: 0.9rem; }
.stage__num { font-size: 0.6em; font-weight: 600; color: var(--green); }
.stage__body p { margin: 0 0 1em; }
.stage__subtitle { margin: 1.75rem 0 0.5rem; font-family: var(--font-text); font-size: var(--text-base); font-weight: 600; line-height: 1.35; letter-spacing: 0; text-transform: none; }
.stage__list { border-top: 1px solid var(--line); }
.stage__list li { position: relative; padding: 0.7rem 0 0.7rem 1.4rem; border-bottom: 1px solid var(--line); }
.stage__list li::before { content: ""; position: absolute; left: 0; top: 1.35rem; width: 0.6rem; height: 2px; background: var(--green); }
.stage__body .stage__more { margin: 1.5rem 0 0; }


@media (min-width: 800px) {
  .stage { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; column-gap: clamp(3rem, 6vw, 6rem); }
  .stage--flip .stage__media { order: 2; }
  .stage--flip .stage__media img { border-radius: 0; border-top-right-radius: 30%; border-bottom-left-radius: 30%; }
}

/* Contact page: direct details in a green panel beside the enquiry form. */
.contact { display: grid; gap: 1.5rem; padding-block: var(--section-space) calc(var(--section-space) * 1.25); }
.contact__aside { align-self: start; padding: clamp(1.5rem, 4vw, 3rem); background: var(--green); color: var(--white); border-top-left-radius: 2rem; border-bottom-right-radius: 2rem; }
.contact__title { margin-bottom: 0.75rem; color: var(--white); }
.contact__lede { max-width: 30rem; margin: 0 0 2.5rem; font-size: var(--text-lg); }

.contact__direct { display: grid; gap: 0.9rem; }
.contact__direct a { display: inline-flex; align-items: center; gap: 1rem; color: var(--white); font-family: var(--font-display); font-size: clamp(1.5rem, 1vw + 1.1rem, 1.875rem); font-weight: 600; letter-spacing: var(--tracking-display); line-height: 1.2; text-decoration: none; }
.contact__icon { display: grid; place-items: center; flex: none; width: 2.75rem; height: 2.75rem; border-radius: 50%; background: rgb(255 255 255 / 0.12); transition: background-color 0.15s, color 0.15s; }
.contact__icon .icon { width: 1.25rem; height: 1.25rem; }
.contact__direct a:hover .contact__icon { background: var(--white); color: var(--green); }
.contact__direct a:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.18em; }
.contact__aside :focus-visible { outline-color: var(--white); }


/* Form */
.contact-form { align-self: start; padding: clamp(1.5rem, 4vw, 3rem); background: var(--paper); border-top-left-radius: 2rem; border-bottom-right-radius: 2rem; }
.contact-form__title { margin: 0 0 1.5rem; font-size: 2rem; }


.contact-form__grid { display: grid; gap: 1.25rem; }
.field label { display: block; margin-bottom: 0.35rem; font-weight: 600; }
.field__optional { color: var(--muted); font-weight: 400; }
.field input, .field textarea { display: block; width: 100%; padding: 0.7rem 0.9rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); transition: border-color 0.15s; }
.field input:hover, .field textarea:hover { border-color: var(--muted); }
.field input:focus, .field textarea:focus { border-color: var(--green); outline: 1px solid var(--green); outline-offset: 0; }
.field textarea { min-height: 9rem; resize: vertical; }
.field__hint { margin: 0.4rem 0 0; color: var(--muted); font-size: var(--text-sm); line-height: 1.45; }
.field__error { margin: 0.4rem 0 0; color: #b3261e; font-size: var(--text-sm); font-weight: 600; }
.field__error:empty { display: none; }
.field [aria-invalid="true"] { border-color: #b3261e; }

.contact-form__footer { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; margin-top: 1.75rem; }
.contact-form__privacy { flex: 1 1 14rem; margin: 0; color: var(--muted); font-size: var(--text-sm); line-height: 1.45; }
.contact-form__status { margin: 1.25rem 0 0; padding: 1rem 1.25rem; background: var(--green-tint); border-left: 3px solid var(--green); }
.contact-form__status:empty { display: none; }
.contact-form__status p { margin: 0 0 0.5rem; }
.contact-form__status p:last-child { margin: 0; }

@media (min-width: 700px) {
  .contact-form__grid { grid-template-columns: 1fr 1fr; column-gap: 1rem; }
  .field--wide { grid-column: 1 / -1; }
}
@media (min-width: 1000px) {
  .contact { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: 1.5rem; }
}

/* Quality page: laboratory hero on the Logistics pattern, the malting stages and quality assurance. */
.quality__hero { position: relative; display: flex; align-items: flex-end; min-height: clamp(16rem, 26vw, 24rem); overflow: hidden; background: #6f8fae; color: var(--white); }
.quality__hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgb(8 24 40 / 0.6) 0%, rgb(8 24 40 / 0.3) 45%, rgb(8 24 40 / 0) 75%); }
.quality__hero-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 75% 50%; }
.quality__hero-inner { position: relative; z-index: 1; padding-block: 3rem; }
.quality__title { max-width: 44rem; margin: 0; color: var(--white); font-size: clamp(2.25rem, 4.6vw, 4rem); line-height: 1.05; text-wrap: balance; }

/* Stage index: the wheat mark from the favicon, enlarged and turned, fills the empty heading column. */
.quality__intro { position: relative; isolation: isolate; overflow: hidden; }
.quality__intro::before { content: ""; position: absolute; z-index: -1; left: -5rem; bottom: -6rem; width: 34rem; aspect-ratio: 1; background: url("/images/wheat-mark.svg") center / contain no-repeat; transform: rotate(-32deg); pointer-events: none; }
.quality__intro .l-section__title { position: static; }
@media (max-width: 799px) {
  .quality__intro::before { left: auto; right: -9rem; bottom: -4rem; width: 22rem; }
}

/* Malting stages. Each step carries its own photo, stacked above the text. On wide screens
   site.js moves the photos into one pinned frame beside the steps (.is-pinned) and crossfades
   between them as each step reaches the middle of the viewport. */
.process { padding-block: 0 2rem; }
.process-step { padding-block: var(--section-space); border-top: 1px solid var(--line); scroll-margin-top: calc(var(--header-height) + 1rem); }
.process-step__media { margin-bottom: 1.75rem; overflow: hidden; border-radius: var(--radius); background: var(--paper); }
.process-step__media img, .process__frame img { display: block; width: 100%; height: auto; aspect-ratio: 6 / 5; object-fit: cover; }
.process-step__media--cutout img, .process__frame img[data-cutout] { mix-blend-mode: multiply; }
.process-step__body { max-width: 34rem; }
.process-step__body p { margin: 0 0 1em; }
.process-step__body .stage__title { margin-bottom: 1rem; }

.process__aside { position: sticky; top: calc(var(--header-height) + 2.5rem); align-self: start; }
.process__frame { position: relative; overflow: hidden; aspect-ratio: 6 / 5; border-radius: var(--radius); background: var(--paper); }
.process__frame img { position: absolute; inset: 0; height: 100%; opacity: 0; transition: opacity 0.6s var(--ease); }
.process__frame img.is-active { opacity: 1; }
.process__progress { display: flex; align-items: center; gap: 1rem; margin-top: 1rem; }
.process__ticks { display: flex; flex: 1; gap: 0.35rem; }
.process__ticks span { flex: 1; height: 3px; background: var(--line); transition: background-color 0.3s; }
.process__ticks span.is-done { background: var(--green); }
.process__label { flex: none; min-width: 12rem; font-family: var(--font-display); font-size: 1.25rem; font-weight: 600; letter-spacing: var(--tracking-display); text-transform: uppercase; }
.process__label b { margin-right: 0.5rem; color: var(--green); font-weight: 600; }

.process.is-pinned { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: clamp(3rem, 6vw, 6rem); border-top: 1px solid var(--line); }
.process.is-pinned .process__aside { padding-top: var(--section-space); }
.process.is-pinned .process-step__media { display: none; }
.process.is-pinned .process-step { display: flex; align-items: center; min-height: 75vh; padding-block: var(--section-space); border-top: 0; opacity: 0.3; transition: opacity 0.4s var(--ease); }
.process.is-pinned .process-step.is-active { opacity: 1; }
/* Quality assurance: plain prose under the sticky heading, with the laboratories' logos in a row. */
.l-section__body .qa__title { margin: 2.25rem 0 0.5rem; font-family: var(--font-text); font-size: var(--text-lg); font-weight: 600; line-height: 1.35; letter-spacing: 0; text-transform: none; }
.qa__labs { display: flex; align-items: center; margin: 1.5rem 0 0.5rem; }
.qa__labs li { display: flex; align-items: center; min-height: 4rem; padding-inline: 2.5rem; border-left: 1px solid var(--line); }
.qa__labs li:first-child { padding-left: 0; border-left: 0; }
.qa__logo { width: auto; height: 3.25rem; }
.qa__logo--sgs { height: 4.25rem; }
.qa sub { line-height: 0; }

/* About page: field hero, the story stage, origins map and tabs, supply chain and values row. */
.about__hero { position: relative; display: flex; align-items: flex-end; min-height: clamp(16rem, 26vw, 24rem); overflow: hidden; background: #6f8fa8; color: var(--white); }
.about__hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgb(40 28 8 / 0.55) 0%, rgb(40 28 8 / 0.2) 45%, rgb(40 28 8 / 0) 70%); }
.about__hero-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 58%; }
.about__hero-inner { position: relative; z-index: 1; padding-block: 3rem; }
.about__title { max-width: 44rem; margin: 0; color: var(--white); font-size: clamp(2.25rem, 4.6vw, 4rem); line-height: 1.05; text-wrap: balance; }

#our-story, #our-model, #values { scroll-margin-top: var(--header-height); }

/* Our story: the leaf-shaped stage, barley photo beside the story and the timeline */
.story .stage__media img { aspect-ratio: 4 / 5; object-position: 40% 50%; }
.story .stage__body { max-width: 38rem; }
.story__lead { font-size: var(--text-lg); font-weight: 600; line-height: 1.45; }
.story__text { color: var(--muted); }

/* Timeline: the numbered steps pattern, with years in place of counters */
.timeline { margin-top: 2rem; border-top: 1px solid var(--line); }
.timeline li { display: grid; grid-template-columns: 5rem 1fr; align-items: baseline; padding-block: 1.1rem; border-bottom: 1px solid var(--line); }
.timeline__year { grid-row: span 2; font-family: var(--font-display); font-size: 1.5rem; font-weight: 600; line-height: 1.3; color: var(--green); font-variant-numeric: tabular-nums; }
.timeline h3 { margin: 0; font-family: var(--font-text); font-size: var(--text-lg); font-weight: 600; line-height: 1.35; letter-spacing: 0; text-transform: none; }
.timeline p { margin: 0.2rem 0 0; color: var(--muted); }

/* Multi-origin supply: a map of the three origins, then one tab per origin. site.js links the two:
   the selected tab's country is highlighted on the map, and clicking a country selects its tab.
   Without JavaScript the tab row is hidden and the three panels are shown one after another. */
#origins { scroll-margin-top: var(--header-height); }
.origins { max-width: none; }
.origins__lead { max-width: 46rem; }

.origins-map { margin: 2rem 0 0; overflow: hidden; }
.origins-map__canvas { position: relative; -webkit-mask-image: linear-gradient(180deg, transparent, #000 8%, #000 85%, transparent), linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); -webkit-mask-composite: source-in; mask-image: linear-gradient(180deg, transparent, #000 8%, #000 85%, transparent), linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); mask-composite: intersect; }
.origins-map__canvas img { width: 100%; height: auto; }
.origins-map__canvas svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.origins-map__country { fill: var(--gold); stroke: var(--white); stroke-width: 0.8; transition: fill 0.3s var(--ease); }
.js .origins-map__country { fill: #e3cb98; cursor: pointer; }
.js .origins-map__country.is-active { fill: var(--gold); }
.origins-map__label { pointer-events: none; transition: opacity 0.3s var(--ease); }
.origins-map__label line { stroke: var(--ink); stroke-width: 1; }
.origins-map__label text { font-family: var(--font-display); font-size: 24px; font-weight: 700; letter-spacing: 0.01em; text-transform: uppercase; fill: var(--ink); }
.origins-map__label--end text { text-anchor: end; }
.origins-map__label--inside text { text-anchor: middle; fill: var(--white); font-size: 32px; }
/* With JS, the labels of countries that are not selected fade back, like their ports */
.origins-map__label line, .origins-map__label text { transition: fill 0.3s var(--ease), stroke 0.3s var(--ease); }
.js .origins-map__label:not(.is-active) line { stroke: #b5afa3; }
.js .origins-map__label:not(.is-active) text { fill: #b5afa3; }
.js .origins-map__label--inside:not(.is-active) text { fill: var(--white); }
.js .origins-map__label--inside:not(.is-active) { opacity: 0.6; }
/* Ports of loading: an ink dot with the port's name. With JS, only the selected origin's ports stay ink. */
.origins-map__port { pointer-events: none; }
.origins-map__port circle { fill: var(--ink); stroke: var(--white); stroke-width: 2; transition: fill 0.3s var(--ease); }
.origins-map__port text { font-family: var(--font-text); font-size: 17px; font-weight: 600; fill: var(--ink); transition: fill 0.3s var(--ease); }
.js .origins-map__port:not(.is-active) circle, .js .origins-map__port:not(.is-active) text { fill: #b5afa3; }
.origins-map__port--end text { text-anchor: end; }
@media (max-width: 599px) {
  /* Too small to read: the tabs below name the countries, and unlabelled port dots say nothing */
  .origins-map__label, .origins-map__port { display: none; }
}

.origin-tabs { margin-top: 1rem; }
.origin-tabs__list { display: none; }
.js .origin-tabs__list { display: flex; flex-wrap: wrap; gap: 0 clamp(1.5rem, 3vw, 2.5rem); border-bottom: 1px solid var(--line); }
.origin-tabs__list button { position: relative; padding: 0 0 0.75rem; border: 0; background: none; color: #b5afa3; font-family: var(--font-display); font-size: clamp(2rem, 4vw, 3.75rem); font-weight: 700; line-height: 1; letter-spacing: var(--tracking-display); text-transform: uppercase; transition: color 0.15s; }
.origin-tabs__list button:hover { color: var(--muted); }
.origin-tabs__list button[aria-selected="true"] { color: var(--ink); }
.origin-tabs__list button[aria-selected="true"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; background: var(--green); transform-origin: left; }
/* While the tabs rotate, the selected tab's underline fills over the 8 s it is shown (site.js) */
.origin-tabs.is-playing .origin-tabs__list button[aria-selected="true"]::after { animation: origin-progress 8s linear; }
@keyframes origin-progress { from { transform: scaleX(0); } }
.origin-tabs__panel { display: grid; gap: 2rem; padding-top: 2.5rem; }
.origin-tabs__panel + .origin-tabs__panel { border-top: 1px solid var(--line); margin-top: 2.5rem; }
.js .origin-tabs__panel + .origin-tabs__panel { border-top: 0; margin-top: 0; }
.origin-tabs__panel:focus-visible { outline: var(--focus); outline-offset: 6px; }
.js .origin-tabs__panel:not([hidden]) { animation: origin-panel-in 0.6s var(--ease); }
@keyframes origin-panel-in { from { opacity: 0; transform: translateY(0.75rem); } }
.origin-tabs__name { margin: 0 0 0.5rem; font-size: clamp(2rem, 4vw, 3rem); }
.js .origin-tabs__name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.origin-tabs__copy > p { margin: 0 0 1em; color: var(--muted); }
.origin-tabs__copy > p:last-of-type { margin-bottom: 1.5rem; }
.origin__facts { margin: 0; border-top: 1px solid var(--line); }
.origin__facts div { display: grid; grid-template-columns: 10rem minmax(0, 1fr); gap: 1rem; padding-block: 0.6rem; border-bottom: 1px solid var(--line); font-size: var(--text-sm); }
.origin__facts dt { color: var(--muted); }
.origin__facts dd { margin: 0; font-weight: 600; }
/* Country maps: the origin and its route neighbours, partner regions in gold and the rail corridor to the
   port of loading. Rail and ports are blue, whatever the gauge. */
.origin-tabs__map { margin: 0; }
.origin-map { display: block; width: 100%; height: auto; max-height: 32rem; }
.origin-map__land { fill: #f1eee8; stroke: var(--white); stroke-width: 1; }
.origin-map__land--focus { fill: #e6e0d4; }
.origin-map__region { fill: var(--gold); stroke: var(--white); stroke-width: 1; }
.origin-map__country { font-family: var(--font-display); font-size: 15px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; fill: #a8a296; }
.origin-map__rail path { fill: none; stroke: var(--blue); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.origin-map__rail .origin-map__sleepers { stroke-width: 7; stroke-dasharray: 1.2 6; stroke-linecap: butt; }
.origin-map--cropped { -webkit-mask-image: linear-gradient(180deg, transparent, #000 6%, #000 94%, transparent), linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); -webkit-mask-composite: source-in; mask-image: linear-gradient(180deg, transparent, #000 6%, #000 94%, transparent), linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-composite: intersect; }
.origin-map__facility { fill: var(--white); stroke: var(--ink); stroke-width: 2; }
.origin-map__port { fill: var(--blue); stroke: var(--white); stroke-width: 1.5; }
.origin-map__label { font-family: var(--font-text); font-size: 13px; font-weight: 600; fill: var(--ink); paint-order: stroke; stroke: var(--white); stroke-width: 3; stroke-linejoin: round; }
.origin-map__label--port { font-size: 15px; fill: var(--blue); }
@media (max-width: 599px) {
  /* The map shrinks to about 60%: enlarge its text so it stays readable */
  .origin-map__label { font-size: 17px; }
  .origin-map__label--port { font-size: 19px; }
  .origin-map__country { font-size: 18px; }
}

@media (min-width: 900px) {
  .origin-tabs__panel { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 4rem; align-items: start; }
}

/* Our OEM production model: four links in the supply chain, each with an icon in a green disc, joined by a hairline on wide screens. */
.chain-wrap { max-width: none; }
.chain__lead { max-width: 46rem; }
.chain { display: grid; gap: 2rem; margin-top: 2.5rem; }
.chain li { position: relative; }
.chain__icon { display: grid; place-items: center; width: 4rem; height: 4rem; margin-bottom: 1.25rem; border-radius: 50%; background: var(--green); color: var(--white); }
.chain__icon svg { width: 2.5rem; height: 2.5rem; fill: currentColor; }
.chain h3 { margin: 0 0 0.35rem; font-family: var(--font-text); font-size: var(--text-lg); font-weight: 600; line-height: 1.35; letter-spacing: 0; text-transform: none; }
.chain p { margin: 0; color: var(--muted); }
.l-section__body .chain__note { max-width: 46rem; margin: 2.5rem 0 0; padding-top: 1.5rem; border-top: 1px solid var(--line); }

@media (min-width: 800px) {
  .chain { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 2rem; }
  /* Connectors: hand-drawn-looking arcs between the icons, up, then down, then up again. Each arc
     levels off as it reaches the next icon, so the arrow tip (drawn separately, unstretched) always
     lines up with the end of the line whatever the column width. */
  .chain li:not(:last-child)::after { content: ""; position: absolute; top: 0; left: 4.5rem; right: -1.5rem; height: 4rem; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 40' preserveAspectRatio='none'%3E%3Cpath d='M1%2022%20C%2024%20-8,%2066%2020,%20100%2020' fill='none' stroke='%23006633' stroke-width='1.5' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") center / 100% 100% no-repeat; }
  .chain li:nth-child(2)::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 40' preserveAspectRatio='none'%3E%3Cpath d='M1%2018%20C%2026%2048,%2068%2020,%20100%2020' fill='none' stroke='%23006633' stroke-width='1.5' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E"); }
  .chain li:nth-child(3)::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 40' preserveAspectRatio='none'%3E%3Cpath d='M1%2021%20C%2030%20-6,%2070%2020,%20100%2020' fill='none' stroke='%23006633' stroke-width='1.5' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E"); }
  .chain li:not(:last-child)::before { content: ""; position: absolute; z-index: 1; top: 1.55rem; right: -1.5rem; width: 0.9rem; height: 0.9rem; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M4 1.5L9.4 5L4 8.5' fill='none' stroke='%23006633' stroke-width='1.1' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; }
}

/* Values and culture: heading and intro side by side, then the three values in one row,
   each under a hairline with a large gold number and a green title. */
.values-section { padding-block: var(--section-space); border-top: 1px solid var(--line); }
.values__head { display: grid; gap: 1rem; margin-bottom: 3rem; }
.values__head h2 { margin: 0; }
.values__head p { margin: 0; color: var(--muted); font-size: var(--text-lg); }
.values { display: grid; gap: 2.5rem; }
.values li { padding-top: 1.25rem; border-top: 1px solid var(--line); }
.values__num { display: block; font-family: var(--font-display); font-size: clamp(3.5rem, 5vw, 5rem); font-weight: 700; line-height: 0.9; color: var(--green); }
.values h3 { margin: 1.25rem 0 0.6rem; font-size: 1.75rem; line-height: 1.1; color: var(--green); }
.values p { margin: 0; color: var(--muted); }

@media (min-width: 900px) {
  .values__head { grid-template-columns: 1fr 1fr; align-items: end; column-gap: 4rem; }
  .values { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 2rem; }
}

/* Careers page: one short column of text, with the team photo in the leaf frame to its left on wide screens. */
.careers { display: grid; gap: 2.5rem; padding-block: 3.5rem var(--section-space); }
.careers__title { margin: 0 0 1rem; }
.careers__lead { max-width: 36rem; margin: 0; font-size: var(--text-lg); }
.careers__image { display: block; width: 100%; max-width: 30rem; height: auto; aspect-ratio: 6 / 5; object-fit: cover; object-position: 60% 40%; border-top-left-radius: 30%; border-bottom-right-radius: 30%; background: var(--line); }
.careers__body { max-width: 36rem; }
.careers__body p { margin: 0 0 1em; }
.careers__subtitle { margin: 2.25rem 0 0.75rem; font-family: var(--font-text); font-size: var(--text-lg); font-weight: 600; line-height: 1.35; letter-spacing: 0; text-transform: none; }
.careers__subtitle:first-child { margin-top: 0; }

@media (min-width: 900px) {
  .careers { grid-template-columns: minmax(0, 0.75fr) minmax(0, 1fr); grid-template-rows: auto 1fr; column-gap: clamp(3rem, 6vw, 6rem); padding-top: 4.5rem; }
  .careers__head, .careers__body { grid-column: 2; }
  .careers__image { grid-column: 1; grid-row: 1 / span 2; }
}

/* Closing call to action, shared by every page (src/components/cta.mjs). */
.page-cta { display: grid; gap: 1.25rem; margin-block: 0 var(--section-space); padding: clamp(2rem, 5vw, 3.5rem); background: var(--paper); border-top-left-radius: 2rem; border-bottom-right-radius: 2rem; }
.page-cta__title { margin: 0; font-size: clamp(2rem, 2vw + 1.25rem, 2.75rem); }
.page-cta__body p { max-width: 34rem; margin: 0 0 1.5rem; font-size: var(--text-lg); }
.page-cta__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.75rem; }
/* Email and phone are grouped, so they move to a second line together rather than one at a time */
.page-cta__direct { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.75rem; }
.page-cta__link { display: inline-flex; align-items: center; gap: 0.65rem; color: var(--ink); font-weight: 600; text-decoration: none; }
.page-cta__link:hover { color: var(--green); }
/* Icons sit in small white discs so the two contact details read as a matched pair */
.page-cta__link .icon { box-sizing: content-box; flex: none; width: 1.2rem; height: 1.2rem; padding: 0.6rem; border-radius: 50%; background: var(--white); color: var(--green); transition: background-color 0.15s, color 0.15s; }
.page-cta__link:hover .icon { background: var(--green); color: var(--white); }

@media (min-width: 900px) {
  .page-cta { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); column-gap: clamp(3rem, 6vw, 6rem); align-items: start; }
}