/* ==========================================================================
   Proseeds World · site.css
   One shared stylesheet for proseedsworld.com.
   Implements the locked "Proseeds World" design system (re-locked Oct 7, 2026 after unlock round 6):
   1. Tokens (screen values; print values under @media print)
   2. Component bundle (verbatim from the design system's components/bundle.css)
   3. Site layer (page layout built only from the tokens above)
   Do not add colors, fonts, radii or shadows here outside an unlock round.
   ========================================================================== */

/* ---------- 1. Tokens ---------- */
:root {
  /* Color */
  --green-900: #1f4d2b;
  --green-700: #2f6b3a;
  --green-500: #5f9a4a;
  --green-300: #a9c48e;
  --surface: #f7f3ec;
  --surface-raised: #ffffff;
  --surface-tint: #efe8dc;
  --surface-green: #e3ecd9;
  --ink: #22201b;
  --ink-muted: #5c574d;
  --ink-inverse: #f7f3ec;
  --accent: #8f5a1c;
  --accent-soft: #f1e4d0;
  --danger: #9b2f2a;
  --line: #d9d1c0;
  --line-strong: #8f8672;
  --focus-ring: #2f6b3a;
  /* logo-green (#8ac640) lives inside the logo files only; never a UI color. */

  /* Type */
  --font-serif: "Newsreader", "Times New Roman", Georgia, serif;
  --font-sans: "Source Sans 3", "Source Sans Pro", "Helvetica Neue", Arial, sans-serif;

  /* Spacing (4px scale) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;

  /* Radii, borders, shadow */
  --radius-none: 0px;
  --radius-sm: 2px;
  --radius-md: 4px;
  --border-hairline: 1px;
  --border-rule: 2px;
  --border-field: 1px;
  --shadow-dropdown: 0 4px 12px rgba(34, 32, 27, 0.14);

  /* Layout */
  --content-max: 1200px;
  --gutter: 24px;
}
@media (min-width: 900px) { :root { --gutter: 48px; } }

@media print {
  :root {
    --surface: #ffffff;
    --surface-tint: #f2ede4;
    --surface-green: #e6eddd;
    --line: #d4d0c8;
    --line-strong: #8a8578;
  }
}

/* ---------- 2. Component bundle (verbatim from the design system, re-locked Oct 7, 2026 after unlock round 6) ---------- */
/* Proseeds World · component stylesheet. Plain CSS on the token variables from tokens.css.
   Load Google Fonts (Newsreader, Source Sans 3) in the document head; see README.md. */

.ps { font-family: var(--font-sans); color: var(--ink); background: var(--surface); font-size: 17px; line-height: 26px; -webkit-font-smoothing: antialiased; }
.ps *, .ps *::before, .ps *::after { box-sizing: border-box; }
.ps h1, .ps h2, .ps h3, .ps .ps-serif { font-family: var(--font-serif); font-weight: 500; font-optical-sizing: auto; margin: 0; color: inherit; }
.ps :where(a) { color: var(--green-700); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.ps :where(a):hover { color: var(--green-900); }
.ps :focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.ps-hero :focus-visible, .ps-footer :focus-visible, .ps-panel-reversed :focus-visible { outline-color: var(--ink-inverse); }
.ps .ps-nums { font-variant-numeric: tabular-nums; }
.ps .ps-label { font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
.ps .ps-caption { font-size: 13px; line-height: 18px; color: var(--ink-muted); }
.ps .ps-body-sm { font-size: 15px; line-height: 22px; }

/* ---------- Buttons ---------- */
.ps-btn { display: inline-flex; align-items: center; gap: var(--space-2); font-family: var(--font-sans); font-size: 15px; line-height: 20px; font-weight: 600; letter-spacing: 0.01em; padding: var(--space-3) var(--space-4); border-radius: var(--radius-sm); border: 1px solid transparent; cursor: pointer; text-decoration: none; }
.ps-btn-primary { background: var(--green-900); color: var(--ink-inverse); border-color: var(--green-900); }
.ps-btn-primary:hover { background: var(--green-700); border-color: var(--green-700); }
.ps-btn-secondary { background: transparent; color: var(--green-700); border-color: var(--line-strong); }
.ps-btn-secondary:hover { color: var(--green-900); border-color: var(--green-900); background: var(--surface-tint); }
.ps-btn-inverse { background: transparent; color: var(--ink-inverse); border-color: var(--ink-inverse); }
.ps-btn-inverse:hover { background: var(--green-700); }
.ps-btn:disabled, .ps-btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
.ps-btn svg { width: 16px; height: 16px; }

/* ---------- Badge ---------- */
.ps-badge { display: inline-flex; align-items: center; gap: var(--space-1); font-family: var(--font-sans); font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; padding: var(--space-1) var(--space-2); border-radius: var(--radius-sm); border: 1px solid transparent; white-space: nowrap; }
.ps-badge-accent { background: var(--accent-soft); color: var(--accent); }
.ps-badge-neutral { background: transparent; color: var(--ink-muted); border-color: var(--line-strong); }
/* Badge vocabulary: ORIGIN (accent), GRADE / FORM / CROP YEAR (neutral). No availability, stock or certificate badges; no icons. */

/* ---------- Product card ---------- */
.ps-card { display: flex; flex-direction: column; background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius-md); overflow: hidden; color: var(--ink); text-decoration: none; }
.ps-card:hover { border-color: var(--line-strong); }
.ps-card-photo { aspect-ratio: 4 / 3; background: var(--surface-tint); display: block; width: 100%; object-fit: cover; }
.ps-card-photo-pending { aspect-ratio: 4 / 3; background: var(--surface-tint); display: flex; align-items: flex-end; padding: var(--space-3); font-size: 13px; line-height: 18px; color: var(--ink-muted); }
.ps-card-body { padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-2); }
.ps-card-body h3 { font-size: 22px; line-height: 28px; }
.ps-card-line { font-size: 15px; line-height: 22px; color: var(--ink-muted); margin: 0; }
.ps-card-meta { display: flex; gap: var(--space-2); flex-wrap: wrap; margin-top: var(--space-1); }

/* ---------- Specification table ---------- */
.ps-spec { width: 100%; border-collapse: collapse; font-family: var(--font-sans); font-size: 14px; line-height: 20px; font-variant-numeric: tabular-nums; background: var(--surface-raised); border-top: 2px solid var(--line-strong); border-bottom: 2px solid var(--line-strong); }
.ps-spec caption { text-align: left; font-family: var(--font-serif); font-weight: 500; font-size: 22px; line-height: 28px; padding: 0 0 var(--space-3); color: var(--ink); }
.ps-spec th, .ps-spec td { text-align: left; vertical-align: top; padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--line); }
.ps-spec thead th { font-size: 13px; line-height: 18px; font-weight: 600; letter-spacing: 0.02em; background: var(--surface-tint); border-bottom: 2px solid var(--line-strong); color: var(--ink); }
.ps-spec tbody th { font-weight: 600; color: var(--ink); width: 34%; }
.ps-spec td.ps-num { text-align: right; white-space: nowrap; }
.ps-spec tbody tr:last-child th, .ps-spec tbody tr:last-child td { border-bottom: 0; }
.ps-spec .ps-group th { background: var(--surface-raised); color: var(--green-700); font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; padding-top: var(--space-3); }
.ps-spec tfoot td { font-size: 13px; line-height: 18px; color: var(--ink-muted); border-bottom: 0; padding-top: var(--space-2); }
.ps-spec-note { font-size: 13px; line-height: 18px; color: var(--ink-muted); margin: var(--space-2) 0 0; }

/* ---------- Content panel ---------- */
.ps-panel { padding: var(--space-5); border-radius: var(--radius-none); }
.ps-panel-plain { background: var(--surface-raised); border: 1px solid var(--line); }
.ps-panel-tint { background: var(--surface-tint); }
.ps-panel-green { background: var(--surface-green); }
.ps-panel-reversed { background: var(--green-900); color: var(--ink-inverse); }
.ps-panel-reversed a { color: var(--ink-inverse); }
.ps-panel .ps-eyebrow { font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--green-700); margin: 0 0 var(--space-2); }
.ps-panel-reversed .ps-eyebrow { color: var(--green-300); }
.ps-panel h3 { font-size: 22px; line-height: 28px; margin-bottom: var(--space-2); }
.ps-panel p { margin: 0; font-size: 15px; line-height: 22px; }
.ps-panel p + p { margin-top: var(--space-2); }
.ps-panel-pair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); }
@media (max-width: 700px) { .ps-panel-pair { grid-template-columns: 1fr; } }

/* ---------- Form fields ---------- */
.ps-field { display: flex; flex-direction: column; gap: var(--space-2); font-family: var(--font-sans); }
.ps-field label { font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink); }
.ps-field label .ps-opt { font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--ink-muted); }
.ps-input, .ps-select, .ps-textarea { font-family: var(--font-sans); font-size: 15px; line-height: 22px; color: var(--ink); background: var(--surface-raised); border: 1px solid var(--line-strong); border-radius: var(--radius-sm); padding: var(--space-2) var(--space-3); width: 100%; }
.ps-input::placeholder, .ps-textarea::placeholder { color: var(--ink-muted); }
.ps-input:focus-visible, .ps-select:focus-visible, .ps-textarea:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; border-color: var(--green-700); }
.ps-select { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none' stroke='%2322201b' stroke-width='1.5'><path d='M4 6l4 4 4-4'/></svg>"); background-repeat: no-repeat; background-position: right var(--space-3) center; padding-right: 36px; }
.ps-field .ps-help { font-size: 13px; line-height: 18px; color: var(--ink-muted); margin: 0; }
.ps-field-error .ps-input, .ps-field-error .ps-select, .ps-field-error .ps-textarea { border-color: var(--danger); border-width: 2px; }
.ps-field-error .ps-error { font-size: 13px; line-height: 18px; color: var(--danger); margin: 0; display: flex; gap: var(--space-1); align-items: center; }
.ps-field-error .ps-error svg { width: 14px; height: 14px; flex: none; }
.ps-check { display: flex; gap: var(--space-2); align-items: flex-start; font-size: 15px; line-height: 22px; }
.ps-check input { width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--green-700); }

/* ---------- Site header ---------- */
.ps-header { background: var(--surface-raised); border-bottom: 1px solid var(--line); font-family: var(--font-sans); }
.ps-header-inner { max-width: 1200px; margin: 0 auto; padding: 0 var(--space-5); height: 72px; display: flex; align-items: center; gap: var(--space-6); }
.ps-header-logo { display: flex; align-items: center; height: 100%; }
.ps-header-logo img { height: 44px; width: auto; display: block; }
.ps-nav { display: flex; align-items: stretch; height: 100%; margin-left: auto; gap: var(--space-1); }
.ps-nav-item { position: relative; display: flex; }
.ps-nav-link { display: inline-flex; align-items: center; gap: 6px; padding: 0 var(--space-3); font-size: 15px; line-height: 20px; font-weight: 500; color: var(--ink); text-decoration: none; border-bottom: 2px solid transparent; border-top: 2px solid transparent; }
.ps-nav-link:hover { color: var(--green-700); }
.ps-nav-link[aria-current="page"], .ps-nav-item.is-open > .ps-nav-link { border-bottom-color: var(--green-500); }
.ps-nav-link svg { width: 14px; height: 14px; }
.ps-nav-menu { position: absolute; top: 100%; left: 0; min-width: 260px; background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius-md); box-shadow: var(--shadow-dropdown); padding: var(--space-2) 0; margin: 0; list-style: none; display: none; z-index: 10; }
.ps-nav-item.is-open > .ps-nav-menu { display: block; }
.ps-nav-menu a { display: block; padding: var(--space-2) var(--space-4); font-size: 15px; line-height: 20px; color: var(--ink); text-decoration: none; }
.ps-nav-menu a:hover { background: var(--surface-tint); color: var(--green-700); }
.ps-nav-menu .ps-nav-menu-head { padding: var(--space-2) var(--space-4) var(--space-1); font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-muted); }
.ps-nav-menu .ps-nav-menu-rule { height: 1px; background: var(--line); margin: var(--space-2) 0; }
.ps-header-actions { display: flex; align-items: center; gap: var(--space-2); margin-left: var(--space-4); }
.ps-btn-header { padding: 10px var(--space-3); min-height: 44px; min-width: 44px; white-space: nowrap; }
.ps-menu-btn svg { width: 14px; height: 14px; }
.ps-menu-btn { display: none; align-items: center; justify-content: center; gap: var(--space-2); min-height: 44px; min-width: 44px; padding: 10px var(--space-3); font-family: var(--font-sans); font-size: 15px; line-height: 20px; font-weight: 600; color: var(--ink); background: transparent; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); cursor: pointer; }
@media (max-width: 900px) { .ps-header-inner { gap: var(--space-3); padding: 0 var(--space-4); } .ps-nav { display: none; } .ps-menu-btn { display: inline-flex; } .ps-header-actions { margin-left: auto; } }
.ps-header.is-narrow .ps-header-inner { gap: var(--space-3); padding: 0 var(--space-4); }
.ps-header.is-narrow .ps-nav { display: none; }
.ps-header.is-narrow .ps-menu-btn { display: inline-flex; }
.ps-header.is-narrow .ps-header-actions { margin-left: auto; }

/* ---------- Footer ---------- */
.ps-footer { background: var(--green-900); color: var(--ink-inverse); font-family: var(--font-sans); }
.ps-footer-inner { max-width: 1200px; margin: 0 auto; padding: var(--space-8) var(--space-5) var(--space-6); display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: var(--space-6); }
.ps-footer img { width: 120px; height: auto; display: block; margin-bottom: var(--space-4); }
.ps-footer p { margin: 0; font-size: 15px; line-height: 22px; }
.ps-footer h4 { margin: 0 0 var(--space-3); font-family: var(--font-sans); font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--green-300); }
.ps-footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.ps-footer a { color: var(--ink-inverse); text-decoration: none; font-size: 15px; line-height: 22px; }
.ps-footer a:hover { text-decoration: underline; text-underline-offset: 3px; }
.ps-footer-bottom { border-top: 1px solid var(--green-700); }
.ps-footer-bottom-inner { max-width: 1200px; margin: 0 auto; padding: var(--space-4) var(--space-5); display: flex; justify-content: space-between; gap: var(--space-4); font-size: 13px; line-height: 18px; color: var(--green-300); flex-wrap: wrap; }
@media (max-width: 900px) { .ps-footer-inner { grid-template-columns: 1fr 1fr; } }

/* ---------- Hero band ---------- */
.ps-hero { background: var(--green-900); color: var(--ink-inverse); }
.ps-hero-inner { max-width: 1200px; margin: 0 auto; padding: var(--space-8) var(--space-5); display: grid; grid-template-columns: 1.1fr 1fr; gap: var(--space-7); align-items: center; }
.ps-hero .ps-eyebrow { font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--green-300); margin: 0 0 var(--space-3); }
.ps-hero h1 { font-size: 52px; line-height: 56px; letter-spacing: -0.01em; margin: 0 0 var(--space-4); max-width: 18ch; }
.ps-hero .ps-lead { font-family: var(--font-serif); font-style: italic; font-size: 20px; line-height: 30px; margin: 0 0 var(--space-5); max-width: 40ch; color: var(--ink-inverse); }
.ps-hero-actions { display: flex; gap: var(--space-3); flex-wrap: wrap; }
.ps-hero-photo { aspect-ratio: 3 / 2; background: var(--surface-tint); border-radius: var(--radius-md); overflow: hidden; display: flex; align-items: flex-end; padding: var(--space-3); color: var(--ink-muted); font-size: 13px; line-height: 18px; }
.ps-hero-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ps-hero-facts { display: flex; gap: var(--space-6); margin-top: var(--space-6); padding-top: var(--space-4); border-top: 1px solid var(--green-700); flex-wrap: wrap; }
.ps-hero-facts div { font-size: 15px; line-height: 22px; }
.ps-hero-facts strong { display: block; font-family: var(--font-serif); font-weight: 500; font-size: 22px; line-height: 28px; font-variant-numeric: tabular-nums; }
@media (max-width: 900px) { .ps-hero-inner { grid-template-columns: 1fr; padding: var(--space-7) var(--space-5); } .ps-hero h1 { font-size: 40px; line-height: 46px; } }

/* ---------- Icon ---------- */
.ps-icon { display: inline-block; vertical-align: middle; flex: none; }
.ps-icon-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: var(--space-3); max-width: 960px; }
.ps-icon-tile { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); padding: var(--space-3) var(--space-2); background: var(--surface-raised); border: 1px solid var(--line); color: var(--green-700); font-size: 13px; line-height: 18px; }
.ps-icon-tile span { color: var(--ink-muted); }

/* ---------- Stat strip ---------- */
.ps-stats { display: flex; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.ps-stat { flex: 1 1 0; padding: var(--space-4) var(--space-5); border-left: 1px solid var(--line); display: flex; flex-direction: column; gap: var(--space-1); }
.ps-stat:first-child { border-left: 0; padding-left: 0; }
.ps-stat strong { font-family: var(--font-serif); font-weight: 500; font-size: 30px; line-height: 36px; font-variant-numeric: tabular-nums; color: var(--ink); }
.ps-stat span { font-size: 15px; line-height: 22px; color: var(--ink-muted); }
.ps-stats-reversed { background: var(--green-900); border-color: var(--green-700); padding: 0 var(--space-5); }
.ps-stats-reversed .ps-stat { border-color: var(--green-700); }
.ps-stats-reversed .ps-stat:first-child { padding-left: 0; }
.ps-stats-reversed .ps-stat strong { color: var(--ink-inverse); }
.ps-stats-reversed .ps-stat span { color: var(--green-300); }
@media (max-width: 700px) { .ps-stats { flex-wrap: wrap; } .ps-stat { flex-basis: 50%; border-left: 0; border-top: 1px solid var(--line); padding-left: 0; } .ps-stat:nth-child(-n+2) { border-top: 0; } }

/* ---------- Footer motto ---------- */
.ps-footer-motto-row { max-width: 1200px; margin: 0 auto; padding: var(--space-7) var(--space-5) 0; }
.ps-footer-motto { margin: 0; font-family: var(--font-serif); font-style: italic; font-weight: 400; font-size: 22px; line-height: 30px; color: var(--ink-inverse); max-width: 64ch; }
.ps-footer-motto-row + .ps-footer-inner { padding-top: var(--space-6); }

/* ---------- Illustration (approved uploads only) ---------- */
.ps-illustration { color: var(--green-700); }
.ps-panel-reversed .ps-illustration, .ps-hero .ps-illustration, .ps-footer .ps-illustration { color: var(--ink-inverse); }
.ps-pattern { position: relative; }
.ps-pattern::before { content: ""; position: absolute; inset: 0; background-image: var(--ps-pattern-tile); background-repeat: repeat; opacity: .05; pointer-events: none; }

/* ---------- Motion (CSS only; off under reduced motion) ---------- */
.ps-kenburns { overflow: hidden; }
.ps-linedraw path { stroke-dasharray: 1; }
@media (prefers-reduced-motion: no-preference) {
  .ps-kenburns-layer { animation: ps-kenburns 24s ease-in-out forwards; transform-origin: 50% 50%; }
  @keyframes ps-kenburns { from { transform: scale(1); } to { transform: scale(1.04); } }
  .ps-fade-up { animation: ps-fade-up .6s cubic-bezier(.2,.7,.2,1) both; } /* once, on page load; never scroll-linked */
  @keyframes ps-fade-up { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
  .ps-linedraw path { stroke-dasharray: 1; stroke-dashoffset: 1; pathLength: 1; animation: ps-linedraw 1.2s ease-out .3s forwards; }
  @keyframes ps-linedraw { to { stroke-dashoffset: 0; } }
}

/* ---------- Contact rows and brand marks ---------- */
.ps-contact { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.ps-contact li { display: flex; align-items: center; gap: var(--space-2); font-size: 15px; line-height: 22px; }
.ps-contact a { text-decoration: none; }
.ps-contact a:hover { text-decoration: underline; text-underline-offset: 3px; }
/* Brand marks: third-party glyphs (WhatsApp, LinkedIn) as approved monochrome uploads, currentColor, 20 to 24px, always with visible text. Footer contact column and contact details block only. */
.ps-brandmark { display: inline-block; width: 20px; height: 20px; flex: none; vertical-align: middle; }
.ps-brandmark img, .ps-brandmark svg { width: 100%; height: 100%; display: block; object-fit: contain; margin: 0; }
.ps-brandmark-slot { border: 1px dashed currentColor; opacity: .6; border-radius: 2px; }
/* Proper names never break in headings and titles */
.ps-nobreak { white-space: nowrap; }

/* ---------- Floating WhatsApp button (brand marks rule: the one icon-only use) ---------- */
.ps-visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.ps-wa-float { position: fixed; right: max(16px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom)); width: 56px; height: 56px; border-radius: 50%; background: var(--green-700); color: var(--ink-inverse); display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 4px 12px rgba(34, 32, 27, 0.2); text-decoration: none; z-index: 20; }
.ps-wa-float:hover, .ps-wa-float:focus-visible { background: var(--green-900); color: var(--ink-inverse); }
.ps-wa-float:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.ps-wa-float svg, .ps-wa-float-mark { width: 28px; height: 28px; display: block; fill: currentColor; }
@media (min-width: 900px) { .ps-wa-float { right: max(24px, env(safe-area-inset-right)); bottom: max(24px, env(safe-area-inset-bottom)); } }
/* Clearance: the page's last block (the footer) and any form wrapper gets this so the button never covers a submit button or the footer links */
.ps-wa-clearance { padding-bottom: calc(56px + 16px + env(safe-area-inset-bottom, 0px)); }
@media (min-width: 900px) { .ps-wa-clearance { padding-bottom: calc(56px + 24px + env(safe-area-inset-bottom, 0px)); } }
.ps-wa-float.is-demo { position: absolute; }
@media print { .ps-wa-float { display: none; } .ps-wa-clearance { padding-bottom: 0; } }

/* ---------- Sample marker (design-system specimens only; never ships on a page) ---------- */
.ps-sample { font-family: var(--font-sans); font-size: 13px; line-height: 18px; color: var(--ink-muted); margin: var(--space-4) 0 0; padding-top: var(--space-2); border-top: 1px solid var(--line); }
.ps-sample::before { content: ""; }

/* ---------- Print ---------- */
@media print {
  .ps { background: #fff; }
  .ps-header, .ps-footer, .ps-hero-actions, .ps-btn { display: none; }
  .ps-spec { page-break-inside: auto; }
  .ps-spec tr { page-break-inside: avoid; }
  .ps-spec thead { display: table-header-group; }
  .ps-card { border-color: var(--line); break-inside: avoid; }
}

/* ---------- 3. Site layer ---------- */
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--surface); }
img { max-width: 100%; height: auto; }
.ps p { margin: 0; }
.ps ul, .ps ol { margin: 0; padding: 0; }

.skip-link { position: absolute; left: var(--space-4); top: -100px; z-index: 50; background: var(--surface-raised); color: var(--green-700); padding: var(--space-2) var(--space-4); border: 1px solid var(--line-strong); border-radius: var(--radius-sm); font-weight: 600; }
.skip-link:focus { top: var(--space-3); }

/* Content column: 1200px max, 24px gutters, 48px from 900px up */
.wrap,
.ps-header-inner, .ps-hero-inner, .ps-footer-inner, .ps-footer-bottom-inner {
  max-width: calc(var(--content-max) + 2 * var(--gutter));
  margin-left: auto; margin-right: auto;
  padding-left: var(--gutter); padding-right: var(--gutter);
}

/* Header: logo sizes and small-screen menu */
.ps-header { position: relative; z-index: 20; }
.ps-header-logo img.logo-mark { height: 44px; width: auto; }
.ps-nav-item:hover > .ps-nav-menu,
.ps-nav-item:focus-within > .ps-nav-menu { display: block; }
.ps-nav-item:hover > .ps-nav-link { border-bottom-color: var(--green-500); }
.ps-nav-menu { min-width: 280px; }
/* Unlock 6: the Menu button (ps-menu-btn) and the header quote button live in .ps-header-actions; the bundle shows the Menu button
   and hides the nav at 900px and below. The open menu below keeps the site's full-height list. */
@media (max-width: 900px) {
  .ps-header.is-menu-open .ps-nav {
    display: flex; flex-direction: column; align-items: stretch; gap: 0;
    position: absolute; top: 72px; left: 0; right: 0; height: calc(100vh - 72px); overflow-y: auto;
    background: var(--surface-raised); border-top: 1px solid var(--line); padding: var(--space-3) var(--gutter) var(--space-7);
  }
  .ps-header.is-menu-open .ps-nav-item { flex-direction: column; }
  .ps-header.is-menu-open .ps-nav-link { padding: var(--space-3) 0; border-top: 0; border-bottom: 1px solid var(--line); }
  .ps-header.is-menu-open .ps-nav-link[aria-current="page"] { border-bottom: 2px solid var(--green-500); }
  .ps-header.is-menu-open .ps-nav-menu { display: block; position: static; box-shadow: none; border: 0; padding: 0 0 var(--space-3); min-width: 0; }
  .ps-header.is-menu-open .ps-nav-menu a { padding-left: var(--space-4); }
}

/* Type helpers */
.eyebrow { font-family: var(--font-sans); font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--green-700); margin: 0 0 var(--space-3); }
.h2 { font-family: var(--font-serif); font-weight: 500; font-size: 30px; line-height: 36px; font-optical-sizing: auto; }
.lead { font-family: var(--font-serif); font-style: italic; font-size: 20px; line-height: 30px; color: var(--ink-muted); }

/* Sections */
.section { padding: var(--space-7) 0; }
@media (min-width: 900px) { .section { padding: var(--space-8) 0; } }
.section + .section { border-top: 1px solid var(--line); }
.section-tint { background: var(--surface-tint); }
.section-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--space-4) var(--space-6); margin-bottom: var(--space-6); }
.section-head > div { max-width: 680px; }
.section-head .lead { margin-top: var(--space-3); }

/* Hero additions */
.ps-btn-light { background: var(--ink-inverse); color: var(--green-900); border-color: var(--ink-inverse); }
.ps-btn-light:hover { background: var(--surface-raised); border-color: var(--surface-raised); }
.hero-figure { margin: 0; }
.hero-figure .ps-hero-photo { padding: 0; }
.hero-figure figcaption { margin-top: var(--space-2); font-size: 13px; line-height: 18px; color: var(--ink-inverse); }
@media (max-width: 899px) {
  .ps-hero-inner > .hero-figure { order: -1; }
}

/* What we do: three steps */
.steps { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); counter-reset: step; }
.step { background: var(--surface-raised); border: 1px solid var(--line); padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-2); border-top: 2px solid var(--green-500); }
.step-num { font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--green-700); }
.step h3 { font-size: 22px; line-height: 28px; }
.step p { font-size: 15px; line-height: 22px; }
@media (max-width: 899px) { .steps { grid-template-columns: 1fr; } }

/* Product grid: 4 across at 1200, 2 at 700, 1 below */
.product-grid { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-5); }
.product-grid > li { display: flex; }
.product-grid .ps-card { width: 100%; }
.ps-card-photo { height: auto; }
.ps-card-caption { font-size: 13px; line-height: 18px; color: var(--ink-muted); }
@media (max-width: 1023px) { .product-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 699px) { .product-grid { grid-template-columns: 1fr; } }

/* Group band */
.group-list { list-style: none; border-top: 2px solid var(--line-strong); }
.group-list li { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-2) var(--space-6); padding: var(--space-4) 0; border-bottom: 1px solid var(--line); align-items: baseline; }
.group-list .co-name { font-family: var(--font-serif); font-weight: 500; font-size: 22px; line-height: 28px; }
.group-list .co-line { font-size: 15px; line-height: 22px; color: var(--ink-muted); }
@media (max-width: 699px) { .group-list li { grid-template-columns: 1fr; } }

/* Contact band */
.contact-grid { display: grid; grid-template-columns: 5fr 7fr; gap: var(--space-5); align-items: start; }
@media (max-width: 899px) { .contact-grid { grid-template-columns: 1fr; } }
.ps .contact-list { list-style: none; display: flex; flex-direction: column; gap: var(--space-3); margin-top: var(--space-4); }
.contact-list li { font-size: 15px; line-height: 22px; }
.contact-list .k { display: block; font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-muted); }
.form-block { background: var(--surface-raised); border: 1px solid var(--line); padding: var(--space-5); }
.form-block h3 { font-size: 22px; line-height: 28px; margin-bottom: var(--space-4); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.form-grid .span-2 { grid-column: 1 / -1; }
@media (max-width: 699px) { .form-grid { grid-template-columns: 1fr; } }
.ps-textarea { min-height: 128px; resize: vertical; }
.form-actions { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; margin-top: var(--space-2); }

/* Footer additions */
.ps-footer-inner { grid-template-columns: 1.3fr 1fr 1fr 1.2fr; }
.ps-footer img.footer-logo { height: auto; width: 120px; }
.ps-footer-motto-row { max-width: calc(var(--content-max) + 2 * var(--gutter)); padding-left: var(--gutter); padding-right: var(--gutter); }
.ps-footer .footer-contact p + p { margin-top: var(--space-3); }
@media (max-width: 899px) { .ps-footer-inner { grid-template-columns: 1fr 1fr; } }
@media (max-width: 599px) { .ps-footer-inner { grid-template-columns: 1fr; } }

/* Visible build placeholder for missing facts. Must not ship. */
.needs-fact { display: inline; font-family: var(--font-sans); font-style: normal; font-size: 13px; line-height: 18px; font-weight: 600; color: var(--ink); background: var(--surface-tint); outline: 1px dashed var(--line-strong); padding: 0 var(--space-1); }


/* ---------- Inner pages (Stage 2) ---------- */
.page-head { padding: var(--space-7) 0; border-bottom: 1px solid var(--line); }
@media (min-width: 900px) { .page-head { padding: var(--space-8) 0; } }
.page-head-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-7); align-items: center; }
@media (max-width: 899px) { .page-head-grid { grid-template-columns: 1fr; gap: var(--space-5); } .page-head-grid > figure { order: -1; } }
.page-head h1 { font-size: 40px; line-height: 46px; letter-spacing: -0.01em; margin-bottom: var(--space-4); }
.page-head .lead { max-width: 40ch; }
.photo { margin: 0; }
.photo img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--radius-md); background: var(--surface-tint); }
.photo figcaption, .photo-pending-caption { margin-top: var(--space-2); font-size: 13px; line-height: 18px; color: var(--ink-muted); }
.photo-pending { aspect-ratio: 3 / 2; background: var(--surface-tint); border-radius: var(--radius-md); display: flex; align-items: flex-end; padding: var(--space-3); font-size: 13px; line-height: 18px; color: var(--ink-muted); }

.prose { max-width: 680px; }
.prose p + p { margin-top: var(--space-4); }
.split { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-7); align-items: start; }
@media (max-width: 899px) { .split { grid-template-columns: 1fr; gap: var(--space-6); } }

.fact-list { list-style: none; border-top: 2px solid var(--line-strong); }
.fact-list li { display: flex; justify-content: space-between; gap: var(--space-4); padding: var(--space-3) 0; border-bottom: 1px solid var(--line); font-size: 15px; line-height: 22px; }
.fact-list .k { color: var(--ink-muted); }
.fact-list .v { font-weight: 600; text-align: right; }

.line-links { list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); margin-top: var(--space-4); }
.line-links a { font-size: 15px; line-height: 22px; }

/* Group profiles */
.profiles { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); }
.profile { background: var(--surface-raised); border: 1px solid var(--line); padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-2); scroll-margin-top: var(--space-5); }
.profile.is-wide { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-5); align-items: start; }
.profile.is-wide > div:first-child { display: flex; flex-direction: column; gap: var(--space-2); }
.profile .where { font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--green-700); }
.profile h3 { font-size: 22px; line-height: 28px; }
.profile p { font-size: 15px; line-height: 22px; }
@media (max-width: 899px) { .profiles { grid-template-columns: 1fr; } }
@media (max-width: 699px) { .profile.is-wide { grid-template-columns: 1fr; } }

/* Sourcing chain */
.chain { list-style: none; border-top: 2px solid var(--line-strong); }
.chain > li { display: grid; grid-template-columns: 64px minmax(0, 4fr) minmax(0, 6fr); gap: var(--space-2) var(--space-6); padding: var(--space-5) 0; border-bottom: 1px solid var(--line); align-items: baseline; }
.chain .n { font-family: var(--font-serif); font-weight: 500; font-size: 30px; line-height: 36px; color: var(--green-700); font-variant-numeric: tabular-nums; }
.chain h3 { font-size: 22px; line-height: 28px; }
.chain p { font-size: 17px; line-height: 26px; }
@media (max-width: 699px) { .chain > li { grid-template-columns: 48px minmax(0, 1fr); } .chain > li > p { grid-column: 2; } }

.origin-grid { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-5); }
.ps-card-line svg { width: 14px; height: 14px; vertical-align: -2px; }
.origin-grid .ps-card:hover { border-color: var(--line); }
@media (max-width: 1023px) { .origin-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 699px) { .origin-grid { grid-template-columns: 1fr; } }

.pending-pair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); margin-top: var(--space-6); }
@media (max-width: 699px) { .pending-pair { grid-template-columns: 1fr; } }

.cta-band { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-4) var(--space-6); }
.cta-band .actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }

@media print {
  .skip-link, .nav-toggle { display: none; }
  .section { padding: var(--space-6) 0; }
}

/* ---------- Product pages (Stage 3) ---------- */
.page-head .ps-card-meta { margin: 0 0 var(--space-4); }
.photo.is-native { max-width: var(--native-w, 100%); }
.photo.is-native img { aspect-ratio: auto; }
.intro { max-width: 680px; }
.intro p { font-size: 17px; line-height: 26px; }
.grade-list { list-style: none; display: flex; flex-direction: column; gap: var(--space-7); }
.grade { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-6); align-items: start; scroll-margin-top: var(--space-5); }
.grade.no-media { grid-template-columns: minmax(0, 1fr); max-width: 760px; }
.grade-head { display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-4); }
.grade-head h3 { font-size: 22px; line-height: 28px; }
.grade-head .ps-card-meta { margin: 0; }
.grade-note { font-size: 15px; line-height: 22px; color: var(--ink-muted); margin-top: var(--space-3); }
.grade .photo img { aspect-ratio: 4 / 3; }
.grade .photo-pending { aspect-ratio: 4 / 3; }
@media (max-width: 899px) { .grade { grid-template-columns: 1fr; } }
.grade-index { list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); margin-top: var(--space-4); }
.grade-index a { font-size: 15px; line-height: 22px; }
.ps-spec .needs-fact { white-space: normal; }
.quote-band { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-5); align-items: center; }
.quote-band .actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }
@media (max-width: 699px) { .quote-band { grid-template-columns: 1fr; } }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.ps-spec caption.sr-only { padding: 0; }

/* ---------- Stage 3.5: richer product pages ---------- */
.stack { display: flex; flex-direction: column; gap: var(--space-6); }
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table-wrap .ps-spec { min-width: 560px; }
.ps-spec td { vertical-align: top; }
.ps-spec sup, .ps-spec sub { font-size: 0.75em; line-height: 0; }
.product-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 1023px) { .product-grid.cols-3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 699px) { .product-grid.cols-3 { grid-template-columns: 1fr; } }
.product-grid .ps-card { height: 100%; }
.use-grid { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); }
.use-grid li { background: var(--surface-raised); border: 1px solid var(--line); border-top: 2px solid var(--green-500); padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-2); }
.use-grid h3 { font-size: 22px; line-height: 28px; }
.use-grid p { font-size: 15px; line-height: 22px; }
@media (max-width: 1023px) { .use-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 699px) { .use-grid { grid-template-columns: 1fr; } }
.section-head .lead { max-width: 64ch; }
.doc-list { list-style: none; columns: 2; column-gap: var(--space-6); }
.doc-list li { break-inside: avoid; padding: var(--space-2) 0; border-bottom: 1px solid var(--line); font-size: 15px; line-height: 22px; }
@media (max-width: 699px) { .doc-list { columns: 1; } }
.statement { max-width: 760px; }
.statement blockquote { margin: 0; font-family: var(--font-serif); font-size: 22px; line-height: 32px; color: var(--ink); }
.statement + .statement { margin-top: var(--space-6); }
.stack > *, .grade > *, .split > * { min-width: 0; }
.table-wrap { max-width: 100%; }
.contact-lead { font-family: var(--font-serif); font-size: 22px; line-height: 30px; }
.ps-panel .contact-lead { font-size: 22px; line-height: 30px; }
.form-block h3 { margin-bottom: var(--space-2); }
.form-sub { font-size: 15px; line-height: 22px; color: var(--ink-muted); margin-bottom: var(--space-5) !important; }
.verify-band h3 { font-size: 22px; line-height: 28px; margin-bottom: var(--space-2); }

/* ---------- Site v2, round 1 ---------- */
.stat-band { padding: var(--space-6) 0 0; }
.why-grid { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); }
.why-card { background: var(--surface-raised); border: 1px solid var(--line); padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-2); }
.why-card h3 { font-size: 22px; line-height: 28px; }
.why-card p { font-size: 15px; line-height: 22px; }
@media (max-width: 899px) { .why-grid { grid-template-columns: 1fr; } }
.applications .wrap > p { font-size: 20px; line-height: 30px; font-family: var(--font-serif); max-width: 760px; }
.spec-summary { max-width: 760px; }
.spec-closing { max-width: 760px; margin-top: var(--space-4); font-size: 15px; line-height: 22px; color: var(--ink-muted); }
.profiles.two-col { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.profile.span-2 { grid-column: 1 / -1; }
@media (max-width: 899px) { .profiles.two-col { grid-template-columns: 1fr; } }

/* ===== Art & motion layer (art round) ===== */
/* Faded layers: DS .ps-pattern (::before at opacity .05). Kept behind content inside its own stacking context. */
.ps-pattern { overflow: hidden; isolation: isolate; }
.ps-pattern::before { z-index: -1; }
.pat-gum { --ps-pattern-tile: url(Illustrations/art-pattern-gum.png); }
.pat-sesame { --ps-pattern-tile: url(Illustrations/art-pattern-sesame.png); }
.pat-hibiscus { --ps-pattern-tile: url(Illustrations/art-pattern-hibiscus.png); }
.pat-gum::before, .pat-sesame::before, .pat-hibiscus::before { background-size: 800px auto; }
/* Single oversized motif, same 5% ceiling */
.motif::before { background-repeat: no-repeat; background-size: auto 88%; background-position: right -40px center; }
.motif-left::before { background-position: left -60px bottom -20px; background-size: auto 90%; }
.motif-gum { --ps-pattern-tile: url(Illustrations/art-gum.png); }
.motif-gum-r { --ps-pattern-tile: url(Illustrations/art-gum-reversed.png); }
.motif-hibiscus { --ps-pattern-tile: url(Illustrations/art-hibiscus.png); }
.motif-sesame { --ps-pattern-tile: url(Illustrations/art-sesame.png); }
.motif-groundnut { --ps-pattern-tile: url(Illustrations/art-groundnut.png); }
.motif-watermelon { --ps-pattern-tile: url(Illustrations/art-watermelon.png); }
.motif-chickpea { --ps-pattern-tile: url(Illustrations/art-chickpea.png); }
.motif-pigeonpea { --ps-pattern-tile: url(Illustrations/art-pigeonpea.png); }
.motif-sorghum { --ps-pattern-tile: url(Illustrations/art-sorghum.png); }
.motif-soybean { --ps-pattern-tile: url(Illustrations/art-soybean.png); }
.motif-baobab { --ps-pattern-tile: url(Illustrations/art-baobab.png); }

/* Crop accent under the product title (decoration, full strength line art) */
.crop-accent { display: block; width: auto; height: auto; max-width: min(300px, 70%); max-height: 190px; margin-top: var(--space-5); }

/* Journey band */
.journey-spine { max-width: 1024px; margin: 0 auto; }
.journey { display: block; width: 100%; height: auto; }
.journey-spine .journey { margin-bottom: var(--space-5); padding-bottom: var(--space-5); border-bottom: 1px solid var(--line); }
.journey-band { background: var(--surface-tint); border-radius: var(--radius-md); padding: var(--space-6) var(--space-5); margin-bottom: var(--space-6); }
.journey-band .journey { max-width: 1024px; margin: 0 auto; }

/* Icons beside words */
.step-num { display: inline-flex; align-items: center; gap: var(--space-2); }
.contact-list .k { display: flex; align-items: center; gap: var(--space-2); }
.why-card h3, .chain h3 { display: flex; align-items: center; gap: var(--space-2); }
.why-card h3 .ps-icon, .chain h3 .ps-icon, .step-num .ps-icon { color: var(--green-700); }
.contact-list .k .ps-icon { color: var(--green-700); }
.ps-hero .ps-icon { color: var(--ink-inverse); }

/* Line-draw accent: one per page, own SVG */
.rule-draw { display: block; max-width: 100%; height: auto; margin: 0 0 var(--space-4); }
@media (max-width: 599px) { .rule-draw { width: 200px; } }
@media (max-width: 899px) { .crop-accent { max-height: 120px; margin-top: var(--space-4); } }

/* ===== Stage 4: products index, contact, 404 ===== */
.group-jump { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-5); }
.group-jump .ps-btn { padding: var(--space-2) var(--space-3); }
.product-groups { display: flex; flex-direction: column; gap: var(--space-8); }
.product-group { scroll-margin-top: var(--space-6); }
.group-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-4); padding-bottom: var(--space-3); margin-bottom: var(--space-5); border-bottom: 2px solid var(--line-strong); }
.group-count { font-size: 15px; line-height: 22px; color: var(--ink-muted); }
.form-block .h3-like { font-size: 22px; line-height: 28px; margin-bottom: var(--space-2); }
.contact-details li { font-size: 17px; line-height: 26px; }
.notfound { padding: var(--space-9) 0; }
.notfound .lead { max-width: 52ch; margin-bottom: var(--space-5); }
.notfound .actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }

/* ===== Composed direction (round-2 boards applied) ===== */
/* Rule: at most one full-strength illustration per band; faded layers stay on .ps-pattern at 5%. */
.x-art, .hero-art, .seam, .quote-art { position: absolute; pointer-events: none; display: block; max-width: none; height: auto; }

/* Dark hero, off-center: text top-left, photo lower-right, one reversed illustration cropped at the band edge */
.hero-c { position: relative; overflow: hidden; }
.hero-c .hero-art { z-index: 1; }
.hero-c-inner { position: relative; z-index: 2; max-width: calc(var(--content-max) + 2 * var(--gutter)); margin: 0 auto; padding: 88px var(--gutter) 64px; display: grid; grid-template-columns: minmax(0, 520px) minmax(0, 1fr); gap: var(--space-6) 80px; align-items: start; min-height: 760px; }
.hero-c-inner > figure { align-self: end; justify-self: end; width: 100%; max-width: 540px; margin: 0; }
.hero-c-inner > figure .ps-hero-photo { padding: 0; }
.hero-c-inner > figure figcaption { color: var(--green-300); font-size: 13px; line-height: 18px; margin-top: var(--space-2); }
.hero-c h1 { font-size: 64px; line-height: 66px; max-width: 12ch; }
.hero-c.hero-c-tall .hero-c-inner { min-height: 860px; }
.hero-c .hero-lead { font-family: var(--font-serif); font-style: italic; font-size: 20px; line-height: 30px; margin: 0 0 var(--space-5); max-width: 40ch; }
.hero-c .ps-eyebrow, .hero-c .eyebrow { color: var(--green-300); }
.hero-c .rule-draw { margin-bottom: var(--space-5); }

/* Product hero: title left, photo (or the pending block, untouched) right; the crop crosses the seam below */
.phero { position: relative; overflow: hidden; background: var(--green-900); color: var(--ink-inverse); }
.phero-inner { position: relative; z-index: 2; max-width: calc(var(--content-max) + 2 * var(--gutter)); margin: 0 auto; padding: 104px var(--gutter) 0; display: grid; grid-template-columns: minmax(0, 520px) 600px; justify-content: space-between; gap: var(--space-6); min-height: 700px; align-items: start; }
.phero-inner > figure { margin: -32px 0 0; width: 100%; }
.phero-inner > figure img { width: 100%; height: auto; display: block; border-radius: var(--radius-md); }
.phero-inner > figure .photo-pending { width: 100%; }
.phero-inner > figure figcaption { color: var(--green-300); font-size: 13px; line-height: 18px; margin-top: var(--space-2); }
.phero .eyebrow { color: var(--green-300); }
.phero h1 { font-size: 64px; line-height: 66px; margin: var(--space-2) 0 var(--space-4); }
.seam { z-index: 1; }
.pintro { position: relative; overflow: hidden; min-height: 500px; }
.pintro .wrap { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-6); padding-top: 96px; padding-bottom: 96px; }
.pintro-text { grid-column: 2; max-width: 540px; }
.pintro-text .ps-card-meta { margin: 0 0 var(--space-5); }
.pintro-text h2 { margin-bottom: var(--space-4); }
.pintro-text p { margin: 0; }
.papps { padding: 104px 0; }
.papps::before { background-size: 800px auto; }
.papps .wrap { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--space-7); align-items: start; }
.papps .wrap > p { font-family: var(--font-serif); font-size: 22px; line-height: 34px; margin: 0; max-width: none; }
.pspec { padding: 104px 0; }
.pspec .spec-summary { max-width: 760px; }
.pquote-band { padding: 0 0 104px; }
.pquote { position: relative; overflow: hidden; background: var(--green-900); color: var(--ink-inverse); padding: 56px; display: flex; flex-direction: column; align-items: flex-start; gap: 28px; }
.pquote > * { position: relative; z-index: 1; }
.pquote > .quote-art { position: absolute; z-index: 0; }
.pquote .ps-eyebrow { color: var(--green-300); font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; margin: 0 0 var(--space-2); }
.pquote h3 { font-size: 30px; line-height: 36px; margin-bottom: var(--space-2); }
.pquote p { margin: 0; }
.pquote .actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }

/* Home: clean stat row, journey as architecture, dark why band, featured-corners products */
.stats-c { padding: 96px 0 40px; }
.stats-c .ps-stat { padding: 24px 32px; }
.stats-c .ps-stat:first-child { padding-left: 0; }
.stats-c .ps-stat strong { font-size: 40px; line-height: 44px; }
.stat-ic { display: flex; align-items: center; gap: var(--space-2); }
.stat-ic .ps-icon { color: var(--green-700); }
.what-c { padding: 64px 0 112px; }
.what-c .section-head { margin-bottom: var(--space-5); }
.rail { position: relative; width: 100%; max-width: 1200px; height: 640px; }
.rail .journey { position: absolute; left: 0; top: 150px; width: 100%; height: auto; }
.rail-mark { position: absolute; top: 0; width: 0; display: flex; flex-direction: column; align-items: center; }
.rail-mark .num { font-family: var(--font-serif); font-weight: 500; font-size: 64px; line-height: 64px; color: var(--green-700); }
.rail-mark .chip { margin-top: 8px; display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--green-700); background: var(--surface); padding: 4px 8px; }
.rail-tick { position: absolute; left: 0; width: 1px; top: 104px; }
.rail-steps { list-style: none; margin: 0; padding: 0; }
.rail-text { position: absolute; top: 440px; width: 300px; }
.rail-text .step-num { display: none; }
.rail-text h3 { font-size: 26px; line-height: 32px; margin-bottom: 10px; }
.rail-text p { margin: 0; font-size: 16px; line-height: 24px; color: var(--ink-muted); }
.why-c { position: relative; overflow: hidden; background: var(--green-900); color: var(--ink-inverse); padding: 136px 0 120px; }
.why-c .wrap { position: relative; z-index: 1; }
.why-c .eyebrow { color: var(--green-300); }
.why-c h2 { color: var(--ink-inverse); max-width: 16ch; }
.why-cols { list-style: none; margin: 56px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; max-width: 860px; }
.why-cols li { border-top: 1px solid var(--green-700); padding-top: 20px; }
.why-cols h3 { display: flex; align-items: center; gap: 10px; font-size: 22px; line-height: 28px; margin-bottom: 10px; }
.why-cols .ps-icon { color: var(--ink-inverse); }
.why-cols p { margin: 0; font-size: 15px; line-height: 22px; }
.prod-feat { padding: 112px 0; }
.prod-feat::before { left: 55%; background-size: 800px auto; }
.prod-feat .product-grid { grid-auto-flow: dense; }
.prod-feat .product-grid > li:nth-child(1) { grid-column: 1 / 3; grid-row: 1 / 3; }
.prod-feat .product-grid > li:nth-child(3) { grid-column: 3 / 5; grid-row: 3 / 5; }
.prod-feat .product-grid > li:is(:nth-child(1), :nth-child(3)) .ps-card-photo { aspect-ratio: auto; flex: 1 1 auto; min-height: 0; height: 100%; }
.prod-feat .product-grid > li:is(:nth-child(1), :nth-child(3)) .ps-card-body h3 { font-size: 30px; line-height: 36px; }
.group-c { padding: 96px 0; }
.chain-c { padding: 96px 0; }

/* Phone and tablet: seam art degrades to ONE band (the sand band), smaller and in flow; hero art shrinks to a corner */
@media (max-width: 1023px) {
  .prod-feat .product-grid > li:is(:nth-child(1), :nth-child(3)) { grid-column: auto; grid-row: auto; }
  .prod-feat .product-grid > li:is(:nth-child(1), :nth-child(3)) .ps-card-photo { aspect-ratio: 4 / 3; height: auto; }
  .prod-feat .product-grid > li:is(:nth-child(1), :nth-child(3)) .ps-card-body h3 { font-size: 22px; line-height: 28px; }
  .rail { height: auto; }
  .rail .journey { position: static; display: block; width: 100%; margin: 0 0 var(--space-5); }
  .rail-mark { display: none; }
  .rail-text { position: static; width: auto; margin-top: var(--space-5); }
  .rail-text .step-num { display: inline-flex; margin-bottom: var(--space-2); }
  .why-cols { grid-template-columns: 1fr; gap: var(--space-5); max-width: none; }
  .why-c .hero-art { width: 300px !important; right: -140px !important; top: -170px !important; }
}
@media (max-width: 899px) {
  .hero-c-inner { grid-template-columns: 1fr; min-height: 0; padding: 150px var(--gutter) var(--space-7); }
  .hero-c.hero-c-tall .hero-c-inner { min-height: 0; }
  .hero-c-inner > figure { justify-self: stretch; max-width: none; }
  .hero-c h1 { font-size: 40px; line-height: 46px; }
  .hero-c .hero-art { width: auto !important; height: 150px; right: 24px !important; top: 24px !important; }
  .phero-inner { grid-template-columns: 1fr; min-height: 0; padding: var(--space-7) var(--gutter) var(--space-7); }
  .phero-inner > figure { margin: 0; order: -1; }
  .phero h1 { font-size: 40px; line-height: 46px; }
  .seam-top { display: none; }
  .pintro { min-height: 0; }
  .pintro .wrap { grid-template-columns: 1fr; padding-top: var(--space-6); padding-bottom: var(--space-7); }
  .pintro-text { grid-column: 1; }
  .seam-bottom { position: static; width: auto !important; max-width: 100%; max-height: 220px; left: 0 !important; top: 0 !important; }
  .papps .wrap { grid-template-columns: 1fr; gap: var(--space-5); }
  .papps .wrap > p { font-size: 20px; line-height: 30px; }
  .pquote { padding: var(--space-6) var(--space-5); }
  .pquote .quote-art { display: none; }
  .stats-c { padding: var(--space-7) 0 0; }
  .why-c { padding: 96px 0 72px; }
}

/* ===== Stage 4.5: policy documents, legal row, form notice ===== */
.doc-page { padding: 72px 0 96px; }
.doc { max-width: 720px; position: relative; z-index: 1; }
.doc .eyebrow { display: inline-flex; align-items: center; gap: var(--space-2); }
.doc .eyebrow .ps-icon { color: var(--green-700); }
.doc h1 { font-size: 40px; line-height: 46px; letter-spacing: -0.01em; margin: var(--space-2) 0 var(--space-3); }
.doc-id { font-family: var(--font-sans); font-size: 13px; line-height: 18px; letter-spacing: 0.02em; color: var(--ink-muted); margin: 0; }
.doc-sub { font-family: var(--font-serif); font-style: italic; font-size: 18px; line-height: 28px; color: var(--ink-muted); margin: var(--space-4) 0 0; }
.doc .rule-draw { margin: var(--space-5) 0 0; }
.doc-body { margin-top: var(--space-6); border-top: 1px solid var(--line); }
.doc-body h2 { font-size: 22px; line-height: 28px; margin: var(--space-6) 0 var(--space-2); display: flex; gap: var(--space-3); align-items: baseline; }
.doc-body h2 .n { color: var(--green-700); font-variant-numeric: tabular-nums; flex: none; min-width: 2.2ch; }
.doc-body p { margin: 0; }
.doc-body p + p { margin-top: var(--space-3); }
.doc-sign { margin-top: var(--space-7); padding-top: var(--space-4); border-top: 1px solid var(--line); font-size: 15px; line-height: 22px; color: var(--ink-muted); }
.doc-contact { margin-top: var(--space-6); font-size: 15px; line-height: 22px; }
.chain-policies { margin-top: var(--space-5); max-width: 760px; font-size: 15px; line-height: 22px; color: var(--ink-muted); }
.form-privacy { margin: var(--space-3) 0 0; font-size: 13px; line-height: 18px; color: var(--ink-muted); }
/* Stage 13: the vetting note above the button, and the catalog entry point in a product page's closing band */
.form-note { margin: var(--space-4) 0 0; font-size: 13px; line-height: 18px; color: var(--ink-muted); }
.pquote .catalog-link { margin: 0; font-size: 15px; line-height: 22px; }
.pquote .catalog-link a { color: var(--ink-inverse); text-decoration: underline; text-underline-offset: 3px; }
.pquote .catalog-link a:hover { color: var(--green-300); }
.form-block h2 { font-size: 30px; line-height: 36px; margin-bottom: var(--space-2); }
.ps-footer-legal { border-top: 1px solid var(--green-700); }
.ps-footer-legal-inner { max-width: calc(var(--content-max) + 2 * var(--gutter)); margin: 0 auto; padding: var(--space-3) var(--gutter); font-size: 13px; line-height: 18px; color: var(--green-300); }
.ps-footer-legal a { font-size: 13px; line-height: 18px; color: var(--green-300); }
/* Stage 8: the Netlify honeypot field, visually hidden off-screen (never display:none, so bots still fill it). */
.ps-honeypot { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; margin: 0; }
/* Stage 8: thanks.html, the quiet received page in the document register. */
.thanks .actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-6); }
/* Stage 9: sourcing commercial-terms strip and the three-photo proof band; low-res photos never upscaled. */
.terms-strip { list-style: none; margin: var(--space-7) 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-5); border-top: 2px solid var(--line-strong); border-bottom: 1px solid var(--line); }
.terms-strip li { display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-4) 0; }
.terms-strip .k { font-family: var(--font-sans); font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--green-700); }
.terms-strip .v { font-size: 16px; line-height: 24px; }
@media (max-width: 899px) { .terms-strip { grid-template-columns: 1fr 1fr; } }
@media (max-width: 599px) { .terms-strip { grid-template-columns: 1fr; } .terms-strip li { border-bottom: 1px solid var(--line); } .terms-strip li:last-child { border-bottom: 0; } }
.proof-band { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-5); margin-top: var(--space-6); align-items: start; }
.proof-band img { width: 100%; height: auto; display: block; }
.proof-band .proof-native img { max-width: 560px; }
.proof-band .proof-bags img { max-width: 960px; }
@media (max-width: 899px) { .proof-band { grid-template-columns: 1fr; } }
/* Stage 11: the "also known as" line under a product intro. */
.pintro-text .aka { margin-top: var(--space-3); font-size: 13px; line-height: 18px; color: var(--ink-muted); }
/* Stage 10: hero Variant A, "Split, seam art", on the non-product pages. Text left; the photo fills the right half of the
   band edge to edge; the page's crop illustration crosses the seam at bottom-left (reversed above, green below). */
.hero-s { position: relative; overflow: hidden; }
.hero-s-inner { position: relative; z-index: 2; padding-top: 104px; padding-bottom: 64px; }
.hero-s-text { max-width: 600px; }
.hero-s h1 { font-size: 64px; line-height: 66px; max-width: 14ch; }
.hero-s .hero-lead { font-family: var(--font-serif); font-style: italic; font-size: 20px; line-height: 30px; margin: 0 0 var(--space-5); max-width: 46ch; }
.hero-s .ps-eyebrow, .hero-s .eyebrow { color: var(--green-300); }
.hero-s .rule-draw { margin-bottom: var(--space-5); }
.hero-s-photo { position: absolute; top: 0; right: 0; bottom: 0; width: 50%; margin: 0; z-index: 2; }
.hero-s-photo .ps-hero-photo { position: absolute; inset: 0; aspect-ratio: auto; border-radius: 0; padding: 0; }
.hero-s-photo figcaption { position: absolute; left: var(--space-4); bottom: var(--space-3); color: var(--ink-inverse); font-size: 13px; line-height: 18px; background: rgba(27, 58, 36, 0.72); padding: 4px 10px; border-radius: 4px; }
/* the band that receives the green half: content in the right column, art in the left */
.hero-s-below { position: relative; overflow: hidden; min-height: 460px; }
.hero-s-below-inner { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-6); }
.hero-s-below-text { grid-column: 2; max-width: 560px; }
.hero-s-below-text .ps-stats { flex-direction: column; border: 0; }
.hero-s-below-text .ps-stat { border-left: 0; border-bottom: 1px solid var(--line); padding: 20px 0; flex-direction: row; align-items: baseline; gap: var(--space-4); }
.hero-s-below-text .ps-stat strong { min-width: 5ch; }
.hero-s-below-text .line-links { margin-top: var(--space-2); }
/* a receiving strip where the next band has no free column (products, contact, sourcing) */
.seam-band { position: relative; overflow: hidden; }
@media (max-width: 899px) {
  .hero-s { min-height: 0 !important; display: flex; flex-direction: column; }
  .hero-s-photo { order: 2; }
  .hero-s-inner { padding-top: var(--space-7); padding-bottom: 0; width: 100%; }
  .hero-s-text { max-width: none; }
  .hero-s h1 { font-size: 40px; line-height: 46px; }
  .hero-s-photo { position: static; width: auto; margin: var(--space-6) 0 0; }
  .hero-s-photo .ps-hero-photo { position: static; aspect-ratio: 4 / 3; }
  .hero-s-photo figcaption { position: static; background: none; color: var(--green-300); padding: 8px var(--gutter) 20px; }
  .hero-s .seam-top { display: none; }
  .hero-s-below { min-height: 0; }
  .hero-s-below-inner { grid-template-columns: 1fr; }
  .hero-s-below-text { grid-column: 1; }
  .hero-s-below .seam-bottom, .seam-band .seam-bottom { position: static; width: auto !important; max-width: 100%; max-height: 220px; left: 0 !important; top: 0 !important; }
  .seam-band { height: auto !important; padding: var(--space-5) var(--gutter) 0; }
}
/* Stage 17 (unlock round 6): <picture> adds no box of its own, so every slot keeps its layout and aspect ratio */
picture { display: contents; }
/* Stage 17: the four group company names under the home group sentence */
.group-teaser .group-names { margin-top: var(--space-3); font-size: 15px; line-height: 22px; color: var(--ink-muted); }
/* Stage 6: request-only document register (never deployed). Same doc register, one wider column for the table. */
.doc-register { max-width: 960px; }
.doc-register .sheet-mark { margin-bottom: var(--space-4); }
.doc-lead { font-family: var(--font-serif); font-size: 18px; line-height: 28px; color: var(--ink-muted); margin: var(--space-3) 0 var(--space-6); max-width: 720px; }
.doc-register .table-wrap { overflow-x: auto; }
.doc-register .ps-spec tbody th { width: 36%; font-weight: 500; font-family: var(--font-serif); font-size: 15px; line-height: 21px; }
.doc-register .ps-spec td a { white-space: nowrap; }
.doc-h2 { font-size: 22px; line-height: 28px; margin: var(--space-7) 0 var(--space-3); }
.doc-rules { margin: 0; padding-left: 1.4em; max-width: 720px; }
.doc-rules li { padding: var(--space-2) 0; border-bottom: 1px solid var(--line); }
.doc-rules li:last-child { border-bottom: 0; }
@media (max-width: 899px) { .doc-page { padding: var(--space-7) 0; } .doc h1 { font-size: 32px; line-height: 38px; } }

/* ===== Stage 5A: at-a-glance chips, grade sections ===== */
.chips { list-style: none; margin: 0 0 var(--space-6); padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--space-5); border-top: 2px solid var(--line-strong); }
.chip { display: flex; align-items: flex-start; gap: var(--space-2); font-size: 15px; line-height: 22px; font-weight: 600; color: var(--ink); padding: var(--space-3) 0; border-bottom: 1px solid var(--line); }
.chip .ps-icon { color: var(--green-700); flex: none; margin-top: 1px; }
.pintro-text .chips { margin-top: var(--space-2); }
.grade-section { padding: 96px 0; }
.grade-section .section-head { margin-bottom: var(--space-5); }
.grade-head { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-7); align-items: start; margin-bottom: var(--space-6); }
.grade-head h2 { margin-bottom: var(--space-3); }
.grade-intro { font-family: var(--font-serif); font-size: 20px; line-height: 30px; margin: 0; max-width: 40ch; }
.grade-note { margin: var(--space-3) 0 0; font-size: 15px; line-height: 22px; color: var(--ink-muted); }
.grade-photo { margin: 0; }
.grade-photo img { width: 100%; height: auto; display: block; border-radius: var(--radius-md); }
.grade-art { background: var(--surface-tint); border-radius: var(--radius-md); min-height: 240px; display: flex; align-items: center; justify-content: center; padding: var(--space-5); }
.grade-art-img { width: auto; height: auto; max-height: 200px; max-width: 70%; }
.grade-section .table-wrap + .table-wrap { margin-top: var(--space-5); }
.grade-section .ps-spec caption { text-align: left; }
.grade-packing { margin: var(--space-4) 0 0; font-size: 15px; line-height: 22px; }
.grade-shared { padding-top: 0; }
.wa-row a, .li-row a { display: inline-flex; align-items: center; gap: var(--space-2); }
.footer-wa a, .footer-li a { display: inline-flex; align-items: center; gap: var(--space-2); }
.group-teaser { padding: 96px 0; border-top: 1px solid var(--line); }
.group-teaser-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-5) var(--space-7); }
.group-teaser .lead { margin-top: var(--space-2); max-width: 52ch; }
@media (max-width: 899px) {
  .grade-section { padding: var(--space-7) 0; }
  .grade-head { grid-template-columns: 1fr; gap: var(--space-5); }
  .grade-art { min-height: 160px; }
  .grade-art-img { max-height: 140px; }
  .chips { grid-template-columns: 1fr; }
}

/* ===== Stage 5B: specification sheets (print-first) ===== */
.sheet-main { padding: 72px 0 96px; }
.sheet { max-width: 794px; margin: 0 auto; padding: 0 var(--gutter); }
.sheet-head { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: var(--space-4); align-items: start; padding-bottom: var(--space-4); border-bottom: 2px solid var(--green-700); }
.sheet-mark { width: 56px; height: 56px; display: block; }
.sheet-head h1 { font-size: 30px; line-height: 36px; letter-spacing: -0.01em; margin: var(--space-1) 0 var(--space-2); }
.sheet-section { margin-top: var(--space-6); }
.sheet-section h2 { font-size: 22px; line-height: 28px; display: flex; gap: var(--space-3); align-items: baseline; margin-bottom: var(--space-3); }
.sheet-section h2 .n { color: var(--green-700); font-variant-numeric: tabular-nums; flex: none; min-width: 1.6ch; }
.sheet-section p { margin: 0; }
.sheet-section p + p { margin-top: var(--space-2); }
.sheet-section .table-wrap { margin: var(--space-3) 0 0; }
.sheet-section .table-wrap + .table-wrap { margin-top: var(--space-4); }
.sheet-section .ps-spec caption { text-align: left; font-size: 15px; line-height: 22px; padding-bottom: var(--space-2); }
.sheet-grade { font-size: 17px; line-height: 24px; margin: var(--space-5) 0 0; color: var(--green-700); }
.sheet-foot { margin-top: var(--space-6); padding-top: var(--space-3); border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); font-size: 13px; line-height: 18px; color: var(--ink-muted); }
.sheet-actions { margin-top: var(--space-6); display: flex; flex-wrap: wrap; gap: var(--space-3); }
@media (max-width: 899px) { .sheet-main { padding: var(--space-7) 0; } }
@media print {
  @page { size: A4; margin: 12mm 14mm; }
  .ps { background: #fff; color: var(--ink); }
  .ps-header, .ps-footer, .skip-link, .sheet-actions, .ps-btn { display: none !important; }
  .sheet-main { padding: 0; }
  .sheet { max-width: none; padding: 0; }
  .sheet-head { border-bottom-width: 1.5pt; padding-bottom: 3mm; }
  .sheet-mark { width: 14mm; height: 14mm; }
  .sheet-head h1 { font-size: 20pt; line-height: 24pt; margin: 0 0 1mm; }
  .sheet-head .eyebrow, .doc-id { font-size: 8pt; line-height: 11pt; }
  .sheet-section { margin-top: 3.5mm; }
  .sheet-section h2 { font-size: 12pt; line-height: 15pt; margin-bottom: 1.5mm; break-after: avoid; }
  .sheet-section p { font-size: 9.5pt; line-height: 13pt; }
  .sheet-grade { font-size: 10pt; line-height: 13pt; margin-top: 3mm; break-after: avoid; }
  .sheet-section .table-wrap { margin-top: 1.5mm; overflow: visible; }
  .sheet-section .table-wrap + .table-wrap { margin-top: 3mm; }
  .ps-spec { font-size: 9pt; line-height: 12pt; border-top-width: 1.5pt; border-bottom-width: 1.5pt; }
  .ps-spec caption { font-size: 9.5pt; line-height: 12pt; padding-bottom: 1mm; break-after: avoid; }
  .ps-spec th, .ps-spec td { padding: 0.8mm 2mm; }
  .ps-spec tbody th { width: 30%; }
  .ps-spec td:last-child:nth-child(3) { width: 42%; }
  .ps-spec thead th { background: #f2ede4; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .ps-spec thead { display: table-header-group; }
  .ps-spec tr { break-inside: avoid; page-break-inside: avoid; }
  .ps-spec tfoot td { font-size: 7.5pt; line-height: 10pt; padding-top: 1mm; }
  .sheet-foot { margin-top: 4mm; font-size: 8pt; line-height: 11pt; }
}

/* ===== Stage 5C: mini-specs, per-grade downloads ===== */
.mini-spec { max-width: 640px; }
.mini-spec tbody th { width: 40%; }
.grade-app { margin: var(--space-3) 0 0; font-size: 17px; line-height: 26px; max-width: 60ch; }
.grade-line { margin: 0; font-size: 15px; line-height: 22px; color: var(--ink-muted); }
.grade-dl { margin: var(--space-3) 0 0; font-size: 15px; line-height: 22px; }
.dl-links { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); font-size: 15px; line-height: 22px; }
.dl-links-label { color: var(--green-300); }
.dl-links .dl-link { color: var(--ink-inverse); text-decoration: underline; text-underline-offset: 3px; font-weight: 600; }
.pquote .actions { align-items: center; }

/* ===== Stage 5D: photo batch 3 ===== */
.ps-card-photo-native { display: flex; align-items: center; justify-content: center; overflow: hidden; }
.ps-card-photo-native img { width: auto; height: 100%; max-width: 365px; max-height: 365px; display: block; object-fit: none; }
.grade-compare { padding: 96px 0 0; }
.compare-photo { margin: 0; max-width: 760px; }
.compare-photo img { width: 100%; height: auto; display: block; border-radius: var(--radius-md); }
.grade-photo picture img { width: 100%; height: auto; display: block; border-radius: var(--radius-md); }
@media (max-width: 899px) { .grade-compare { padding-top: var(--space-7); } }

/* ===== Stage 7: statements, group mention, photo pair, print discipline ===== */
.statements-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); }
.statements-grid .statement { max-width: none; margin-top: 0; }
.statements-grid .statement blockquote { font-size: 20px; line-height: 30px; }
.section .values-eyebrow { margin-top: var(--space-7); margin-bottom: 0; }
.values { list-style: none; margin: var(--space-4) 0 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-5); border-top: 2px solid var(--line-strong); }
.values li { padding-top: var(--space-4); }
.values h4 { display: flex; align-items: center; gap: var(--space-2); font-family: var(--font-serif); font-weight: 500; font-size: 20px; line-height: 26px; margin: 0 0 var(--space-2); }
.values .ps-icon { color: var(--green-700); }
.values p { margin: 0; font-size: 15px; line-height: 22px; color: var(--ink-muted); }
.group-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-7); align-items: start; position: relative; z-index: 1; }
.group-mention { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--line-strong); }
.group-mention li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-2) var(--space-5); padding: var(--space-4) 0; border-bottom: 1px solid var(--line); }
.group-mention .co-name { font-family: var(--font-serif); font-weight: 500; font-size: 22px; line-height: 28px; }
.group-mention .co-city { font-size: 15px; line-height: 22px; color: var(--ink-muted); }
.group-photo { margin: 0; }
.group-photo img { width: 100%; height: auto; display: block; border-radius: var(--radius-md); }
.photo-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
.photo-pair .photo { margin: 0; }
.photo-pair img { width: 100%; height: auto; display: block; border-radius: var(--radius-md); }
@media (max-width: 1023px) { .values { grid-template-columns: repeat(2, minmax(0, 1fr)); } .statements-grid { grid-template-columns: 1fr; } }
@media (max-width: 899px) { .group-grid { grid-template-columns: 1fr; gap: var(--space-5); } }
@media (max-width: 599px) { .values { grid-template-columns: 1fr; } }
@media print {
  .keep, .sheet-tail, .sheet-section.short { break-inside: avoid; page-break-inside: avoid; }
  .sheet-section h2, .sheet-grade, .ps-spec caption { break-after: avoid; page-break-after: avoid; }
  .ps-spec thead { display: table-header-group; }
}