/*
  SHARED STYLESHEET — SUKO Nordic Australia mockup (multi-page)
  Used by every page in this site. See index.html for build notes on the
  approximated brand palette/typography and research sourcing.

  Design system pass: Scandinavian premium — minimal, elegant, scientific,
  natural. One typeface, a restrained shadow/radius scale, subtle motion
  only, calm and understated colour use.
*/
:root {
  /* ===== Brand palette — matched to sukonordic.com.au's actual theme colors ===== */
  --color-cream: #F5F1EA;        /* page background — exact match */
  --color-cream-dark: #EFEAE0;   /* subtle alt-section tint */
  --color-forest: #1A1A1A;
  --color-forest-dark: #000000;  /* body/heading text — exact match */
  --color-earth: #302B75;        /* primary accent — real site's indigo/purple (Joint Support block, newsletter button), replaces earlier approximated rust */
  --color-navy: #343C56;         /* real site's hero band color */
  --color-accent-soft: #F6EE9C;  /* real site's pale-yellow CTA accent, used on dark/navy or indigo backgrounds */
  --color-shop-orange: #FF8200;  /* official brand orange — CMYK 0/49/100/0 — reserved for awards/highlights only */
  --color-line: #E4DECE;         /* hairline border color — warm, sits quietly on the cream background */
  --color-line-dark: rgba(255,255,255,0.14); /* hairline border on dark (footer/earth) backgrounds */
  --color-footer-text: #CFCABB;   /* warm light grey footer link/body text — ~12:1 contrast on black, clearly readable but softer than white headings */
  --color-footer-muted: #B3ADA0;  /* warm grey for footer brand description + legal row — ~9.5:1 contrast on black */
  --color-announce-bg: #EDECF6;  /* soft indigo tint for the top announcement bar */
  --color-text: #1A1A1A;         /* body copy — softened a hair from pure black for a calmer, less stark read */
  --color-text-light: #66625C;   /* muted/secondary text — warm grey, not cool grey, to sit naturally on cream */
  --color-white: #FFFFFF;

  /* ===== Typography — one refined sans-serif used throughout ===== */
  --font-heading: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

  /* ===== Radius scale — restrained, consistent ===== */
  --radius-sm: 6px;   /* chips, small controls */
  --radius-md: 10px;  /* cards, images, dropdowns */
  --radius-lg: 14px;  /* large photo banners, feature panels */
  --radius: var(--radius-sm); /* buttons */

  /* ===== Shadow scale — soft, low-contrast, premium rather than "floating card" ===== */
  --shadow-sm: 0 2px 10px rgba(26,20,10,0.06);
  --shadow-md: 0 10px 28px rgba(26,20,10,0.08);
  --shadow-lg: 0 20px 44px rgba(26,20,10,0.10);

  /* ===== Motion — subtle only ===== */
  --transition-fast: 150ms ease;
  --transition-base: 200ms ease;
  --transition-slow: 250ms ease;

  --max-width: 1140px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  overflow-x: hidden;
  font-family: var(--font-body);
  color: var(--color-text);
  background: var(--color-cream);
  line-height: 1.7;
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 { font-family: var(--font-heading); font-weight: 600; color: var(--color-forest-dark); line-height: 1.22; margin: 0 0 0.5em; letter-spacing: -0.015em; }
h1 { font-size: clamp(2.1rem, 3.4vw, 3rem); font-weight: 600; letter-spacing: -0.02em; }
h2 { font-size: clamp(1.55rem, 2.4vw, 2rem); font-weight: 600; }
h3 { font-size: 1.12rem; font-weight: 600; color: var(--color-forest-dark); }
p { margin: 0 0 1em; }
a { color: inherit; }
img { max-width: 100%; display: block; }
ul { margin: 0; }
.container { max-width: var(--max-width); margin: 0 auto; padding: 0 28px; }
section { padding: 88px 0; }
.hairline-top { border-top: 1px solid var(--color-line); }
.hairline-bottom { border-bottom: 1px solid var(--color-line); }
.bg-alt { background: var(--color-cream-dark); }

.eyebrow {
  display: block;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-earth);
  margin-bottom: 14px;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 26px;
  border-radius: var(--radius);
  font-weight: 600;
  text-decoration: none;
  font-size: 0.92rem;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background var(--transition-base), color var(--transition-base), border-color var(--transition-base), filter var(--transition-base);
}
.btn:hover { filter: brightness(0.94); }
.btn-primary { background: var(--color-forest-dark); color: var(--color-white); }
.btn-primary:hover { background: #000; filter: none; opacity: 0.88; }
.btn-outline { background: transparent; border-color: var(--color-forest-dark); color: var(--color-forest-dark); }
.btn-outline:hover { background: var(--color-forest-dark); color: var(--color-white); filter: none; }
.btn-text { text-decoration: underline; text-underline-offset: 4px; font-weight: 600; padding: 0; }
.btn-text:hover { color: var(--color-earth); }

/* Arrow glyph on CTAs/links: sits in its own inline span so it can glide a
   few pixels to the right on hover/focus, independent of the label text —
   a small, elegant motion rather than the whole button shifting. */
.btn-arrow { display: inline-block; margin-left: 7px; transition: transform 300ms ease; }
a:hover .btn-arrow, a:focus-visible .btn-arrow { transform: translateX(4px); }
@media (prefers-reduced-motion: reduce) {
  .btn-arrow { transition: none; }
}

/* ---------- Placeholder photo blocks (simplified, no dashed wireframe look) ---------- */
figure.photo-placeholder {
  margin: 0;
  background: var(--color-cream-dark);
  border-radius: var(--radius-md);
  min-height: 220px;
  display: flex;
  align-items: center;
  justify-content: center;
}
figure.photo-placeholder .mark { color: var(--color-earth); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
figure.photo-placeholder figcaption {
  margin-top: 10px;
  font-size: 0.82rem;
  color: var(--color-text-light);
  text-align: center;
}

/* ---------- Real photo blocks (replacing placeholders) ---------- */
figure.photo {
  margin: 0;
  border-radius: var(--radius-md);
  overflow: hidden;
  aspect-ratio: 3 / 2;
  background: var(--color-cream-dark);
  box-shadow: var(--shadow-sm);
}
figure.photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ingredient-card figure.photo { aspect-ratio: 16 / 9; border-radius: var(--radius-md); box-shadow: none; }
.news-card figure.photo { aspect-ratio: 16 / 9; }

/* Wide editorial photo — for two-col-grid images whose source composition is naturally wide
   (e.g. product + hand at arm's length). Keeps the full subject in frame on desktop, then
   switches to a taller, more substantial crop on mobile so it never reads as a thin strip. */
figure.photo.editorial-wide { aspect-ratio: 2 / 1; }
figure.photo.editorial-wide.editorial-wide-xl { aspect-ratio: 21 / 9; }
@media (max-width: 800px) {
  figure.photo.editorial-wide,
  figure.photo.editorial-wide.editorial-wide-xl { aspect-ratio: 4 / 3; }
}

/* Full-width banner photo used on ingredient/AP-4/MaquiPro pages */
.page-photo-banner {
  width: 100%;
  margin: 8px 0 40px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 21 / 8;
  max-height: 460px;
  box-shadow: var(--shadow-md);
}
.page-photo-banner img, .page-photo-banner video { display: block; width: 100%; height: 100%; max-height: 460px; object-fit: cover; }
.page-photo-caption {
  margin-top: 10px;
  font-size: 0.82rem;
  color: var(--color-text-light);
  text-align: center;
}

/* ---------- Editorial image system (site-wide) ----------
   Two reusable patterns for placing large plantation/team photography as
   part of the page flow rather than as small cards: a plain full-width
   band (no text, or an optional restrained lower-left caption for a
   "cinematic transition" moment), and an edge-to-edge 50/50 split with
   text held to the normal .container alignment on the open side. Both
   reach a viewport edge; neither uses rounded corners, borders or shadows. */
.editorial-band-fullbleed {
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  height: 660px;
  overflow: hidden;
}
.editorial-band-fullbleed img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 900ms ease; }
.editorial-band-fullbleed:hover img { transform: scale(1.03); }
@media (prefers-reduced-motion: reduce) {
  .editorial-band-fullbleed img { transition: none; }
}
.editorial-band-fullbleed.with-caption {
  height: 76vh;
}
.editorial-band-fullbleed.with-caption img { object-position: center 40%; }
.editorial-band-fullbleed.with-caption::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 32%;
  background: linear-gradient(0deg, rgba(10,9,6,0.5) 0%, rgba(10,9,6,0) 100%);
  pointer-events: none;
}
.editorial-band-caption {
  position: absolute;
  left: 28px;
  bottom: 24px;
  z-index: 1;
  color: #fff;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 400;
  letter-spacing: normal;
  text-align: left;
}
.editorial-band-fullbleed.with-caption .editorial-band-caption {
  left: 64px;
  bottom: 52px;
  font-size: 1.2rem;
  font-weight: 400;
}
@media (max-width: 760px) {
  .editorial-band-fullbleed { height: 420px; }
  .editorial-band-fullbleed.with-caption { height: 70vh; }
  .editorial-band-fullbleed.with-caption .editorial-band-caption {
    left: 24px;
    bottom: 28px;
    font-size: 0.95rem;
  }
}

/* formats-accreditation.html harvest photo only (Sep 2026 live feedback):
   the shared .with-caption crop above (object-position: center 40%) gave
   a lot of space to the sky before reaching the workers and field. This
   extra modifier class brings the crop down to the team/machinery/field
   instead, without touching the shared rule other pages still use
   (our-company.html, and the homepage .home-family-feature variant). */
.editorial-band-fullbleed.with-caption.qr-harvest-band img { object-position: center 74%; }

/* ---------- Homepage "Science Begins in the Field" feature (Sep 2026) ----------
   Sep 2026: replaces this band's single-line caption with an eyebrow +
   headline + restrained link, inviting visitors into the family story.
   Scoped entirely under .home-family-feature (an extra modifier class on
   the existing .editorial-band-fullbleed.with-caption element) so the
   shared .editorial-band-caption pattern used on formats-accreditation.html
   and our-company.html is completely untouched. Uses the same photo
   (Amanda and Isabel inspecting the AP-4® plantation) that appears again,
   with a different purpose, on the Our Family Story page. */
.editorial-band-fullbleed.with-caption.home-family-feature::after {
  height: 52%;
  background: linear-gradient(0deg, rgba(10,9,6,0.66) 0%, rgba(10,9,6,0.32) 48%, rgba(10,9,6,0) 100%);
}
.home-family-feature-overlay {
  position: absolute;
  z-index: 2;
  left: 64px;
  right: 64px;
  bottom: 56px;
  max-width: 460px;
  color: #fff;
}
.home-family-feature-eyebrow {
  display: block;
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.88);
  margin: 0 0 14px;
}
.home-family-feature-heading {
  font-size: clamp(1.7rem, 3.1vw, 2.6rem);
  font-weight: 600;
  line-height: 1.16;
  letter-spacing: -0.015em;
  color: #fff;
  margin: 0 0 20px;
}
.home-family-feature-link {
  display: inline-flex;
  align-items: center;
  color: #fff;
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-color: rgba(255,255,255,0.5);
  transition: text-decoration-color var(--transition-base);
}
.home-family-feature-link:hover,
.home-family-feature-link:focus-visible { text-decoration-color: #fff; }
.home-family-feature-link .btn-arrow { color: inherit; }
@media (max-width: 900px) {
  .home-family-feature-overlay { left: 40px; right: 40px; bottom: 40px; max-width: 400px; }
}
@media (max-width: 600px) {
  .home-family-feature-overlay { left: 22px; right: 22px; bottom: 26px; max-width: none; }
  .home-family-feature-eyebrow { font-size: 0.68rem; margin-bottom: 8px; }
  .home-family-feature-heading { margin-bottom: 12px; }
  .home-family-feature-link { font-size: 0.86rem; }
}

.split-edge-section {
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding: 0;
  display: grid;
  grid-template-columns: 50vw 1fr;
  grid-template-areas: "media text";
  min-height: 650px;
}
.split-edge-section.image-right { grid-template-columns: 1fr 50vw; grid-template-areas: "text media"; }
.split-edge-media { grid-area: media; position: relative; overflow: hidden; }
.split-edge-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.split-edge-text {
  grid-area: text;
  display: flex;
  align-items: center;
  padding: 56px max(28px, calc((100vw - var(--max-width)) / 2)) 56px 64px;
}
.split-edge-section.image-right .split-edge-text { padding: 56px 64px 56px max(28px, calc((100vw - var(--max-width)) / 2)); }
.split-edge-text-inner { max-width: 480px; }
.split-edge-text-inner h2 { margin-top: 10px }
@media (max-width: 900px) {
  .split-edge-section, .split-edge-section.image-right {
    grid-template-columns: 1fr;
    grid-template-areas: "media" "text";
    min-height: 0;
  }
  .split-edge-media { height: 420px; }
  .split-edge-text, .split-edge-section.image-right .split-edge-text {
    padding: 32px 28px;
  }
  .split-edge-text-inner { max-width: none; }
}
@media (max-width: 500px) {
  .split-edge-media { height: 380px; }
}

/* ---------- Controlled Production split (Private Label) — calmer variant of
   .split-edge-section: copy + understated proof points stacked in the left
   column (vertically centred as a group against the tall photo), a gentle
   fade-in for the section and a very subtle image scale as it enters view. ---------- */
.split-edge-section.pl-controlled-production {
  grid-template-rows: auto auto;
  grid-template-areas: "text media" "proof media";
  min-height: 0;
}
.split-edge-section.pl-controlled-production .split-edge-text {
  display: block;
  padding: 56px 64px 0 max(28px, calc((100vw - var(--max-width)) / 2));
}
.split-edge-section.pl-controlled-production .pl-proof-row {
  grid-area: proof;
  padding: 22px 64px 56px max(28px, calc((100vw - var(--max-width)) / 2));
}
.pl-proof-list {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  padding: 18px 0 0;
  border-top: 1px solid var(--color-line);
}
.pl-proof-list li {
  position: relative;
  font-size: 0.86rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--color-text);
  padding: 2px 22px;
}
.pl-proof-list li:first-child { padding-left: 0; }
.pl-proof-list li:not(:last-child) { border-right: 1px solid var(--color-line); }
.pl-proof-list li::before {
  content: "";
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--color-earth);
  margin-right: 9px;
  vertical-align: middle;
}
.split-edge-section.pl-controlled-production .split-edge-media img {
  transform: scale(1.045);
  transition: transform 1100ms ease;
}
.split-edge-section.pl-controlled-production.is-visible .split-edge-media img {
  transform: scale(1);
}
.split-edge-section.pl-controlled-production.is-visible:hover .split-edge-media img {
  transform: scale(1.03);
}
@media (max-width: 900px) {
  .split-edge-section.pl-controlled-production {
    grid-template-areas: "text" "media" "proof";
  }
  .split-edge-section.pl-controlled-production .split-edge-text {
    padding: 32px 28px 0;
  }
  .split-edge-section.pl-controlled-production .pl-proof-row {
    padding: 22px 28px 32px;
  }
  .pl-proof-list { flex-direction: column; gap: 12px; }
  .pl-proof-list li { padding: 0 !important; border-right: none !important; }
}

/* ---------- Milled to Order split (Private Label) — a calmer bridge between
   Controlled Production and the Formats section below: same edge-to-edge
   split-section pattern, but with NO artificial minimum height on the
   section itself. A short, deliberate cream gap plus a hairline divider
   sits above the section so the two full-bleed photos never touch
   directly, but reads as a clean beat rather than a stray empty band
   (Sep 2026, Rettelse 2: brought down from 64/40/32px to a consistent
   ~32-48px handoff at every breakpoint). ---------- */
.split-edge-section.pl-milled-order {
  min-height: 0;
  margin-top: 0;
}
.split-edge-section.pl-milled-order .split-edge-media img {
  object-position: center 42%;
  transform: scale(1.045);
  transition: transform 1100ms ease;
}
.split-edge-section.pl-milled-order.is-visible .split-edge-media img {
  transform: scale(1);
}
.split-edge-section.pl-milled-order.is-visible:hover .split-edge-media img {
  transform: scale(1.03);
}
/* Sep 2026 (Rettelse 2): a subtle staggered editorial composition so this
   section doesn't read as a mechanical repeat of Controlled Production
   above it — its text sits ~72px further left (still never closer than a
   16px safety floor to the viewport edge, so it can't overflow at narrower
   desktop widths) and is top-aligned into the upper third of a taller,
   more impactful photo instead of centred. Desktop/wide-tablet only
   (min-width:901px, the same point this page's split sections are two
   columns at all); the shared @media (max-width:900px) rule above already
   stacks everything to one clean column below that, so the offset simply
   isn't present to remove on tablet/mobile. */
@media (min-width: 901px) {
  /* Rettelse (Sep 28, artifact comment): section flipped to image-left /
     text-right, so the offset that used to sit on the LEFT (hugging the
     text closer to the viewport edge, per the Sep 2026 staggered-
     composition note above) now mirrors onto the RIGHT. */
  .split-edge-section.pl-milled-order .split-edge-text {
    align-items: flex-start;
    padding: 92px max(16px, calc((100vw - var(--max-width)) / 2 - 72px)) 56px 64px;
  }
  .split-edge-section.pl-milled-order .split-edge-text-inner {
    max-width: 420px;
  }
  .split-edge-section.pl-milled-order .split-edge-media {
    min-height: 620px;
  }
}
.split-edge-section.pl-milled-order .split-edge-text-inner h2 {
  margin-top: 14px;
  margin-bottom: 18px;
}
.split-edge-section.pl-milled-order .split-edge-text-inner p {
  margin-bottom: 20px;
}
@media (max-width: 900px) {
  .split-edge-section.pl-milled-order {
    grid-template-areas: "text" "media";
    margin-top: 28px;
  }
}
@media (max-width: 500px) {
  .split-edge-section.pl-milled-order {
    margin-top: 20px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .split-edge-section.pl-milled-order .split-edge-media img { transition: none; }
}

/* Small circular leadership avatars */
.card-avatar {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  object-fit: cover;
  margin-bottom: 16px;
  border: 2px solid var(--color-cream-dark);
}

/* ---------- Header ---------- */
/* ---------- Top announcement bar: continuous scrolling trust-point ticker (AG1-style
   marquee) — a single track duplicated once and animated the full -50% of its own width,
   which is exactly the width of one copy, so the loop is seamless. Edges are softly
   masked rather than hard-cut, and the whole ribbon pauses on hover/focus for readability
   and respects reduced-motion preferences. ---------- */
.announce-bar {
  background: var(--color-announce-bg);
  color: var(--color-forest-dark);
  padding: 11px 0;
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  position: relative;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 48px, #000 calc(100% - 48px), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 48px, #000 calc(100% - 48px), transparent 100%);
}
.announce-track {
  display: flex;
  width: max-content;
  animation: announce-scroll 32s linear infinite;
}
.announce-bar:hover .announce-track,
.announce-bar:focus-within .announce-track {
  animation-play-state: paused;
}
.announce-track-inner {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.announce-item {
  white-space: nowrap;
  padding: 0 32px;
  position: relative;
}
.announce-item:not(:last-child)::after {
  content: '';
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.4;
}
@keyframes announce-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .announce-track { animation: none; }
}
@media (max-width: 560px) {
  .announce-bar { padding: 9px 0; font-size: 0.7rem; }
  .announce-item { padding: 0 20px; }
}

header.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--color-cream);
  border-bottom: 1px solid var(--color-line);
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  /* Wider than the sitewide --max-width (1140px): the symmetric six-item
     nav (three per side, plus the centred logo and the CTA/ghost pair)
     needs more horizontal room than a content column does, so the header
     is allowed its own, slightly wider cap. Only the header uses this
     value; every other section keeps the standard --max-width. */
  max-width: 1320px;
  margin: 0 auto;
  gap: 24px;
}
.logo {
  font-family: var(--font-heading);
  font-size: 1.4rem;
  font-weight: 500;
  color: var(--color-forest-dark);
  text-decoration: none;
  letter-spacing: 0.01em;
  display: flex;
  align-items: center;
  margin-right: 4px;
  flex-shrink: 0;
}
.logo span { color: var(--color-earth); }
.logo img { height: 56px; width: auto; display: block; transition: opacity var(--transition-base); }
.logo:hover img { opacity: 0.82; }
.nav-home-item { display: none; }
nav.main-nav ul {
  list-style: none;
  display: flex;
  gap: 26px;
  margin: 0;
  padding: 0;
  flex-wrap: wrap;
  justify-content: center;
}
nav.main-nav a {
  text-decoration: none;
  font-weight: 500;
  font-size: 0.87rem;
  color: var(--color-text);
}
nav.main-nav > ul > li > a {
  display: inline-block;
  padding: 8px 0;
  transition: color var(--transition-base);
}
nav.main-nav a:hover, nav.main-nav a.active { color: var(--color-earth); }
.header-cta { display: flex; gap: 14px; align-items: center; flex-shrink: 0; }
.header-cta .btn { padding: 11px 20px; font-size: 0.82rem; white-space: nowrap; }
.header-cta .header-contact-link { padding: 0; white-space: nowrap; }
.menu-toggle { display: none; background: none; border: none; font-size: 1.4rem; cursor: pointer; color: var(--color-forest-dark); }

/* ---------- Desktop header: viewport-centred logo (Sep 2026) ----------
   Six top-level nav items split into two groups of three flanking the
   logo. #mainNav is now a plain wrapper (.main-nav-panel) around the two
   <nav class="main-nav"> groups rather than a nav element itself, so the
   very same markup can serve both layouts: on desktop it is unwrapped via
   display:contents so its two children become direct flex items of
   .header-inner, and below the breakpoint it becomes the real floating
   burger panel, stacking both groups into one continuous list exactly as
   the single nav used to. A hidden "Enquire Now" ghost (an invisible
   clone of the real CTA, sharing the .header-cta class so it always
   matches the real button's rendered width) sits on the far left purely
   to occupy the same width as the real CTA on the far right; because the
   two nav groups share flex:1 1 0 (equal growth from a zero basis) they
   are forced to identical widths regardless of their different content,
   and because the ghost mirrors the CTA's width on the opposite end, the
   two auto-width bookends are equal too — together this pins the logo at
   the exact horizontal centre of the header (and therefore the viewport,
   since .header-inner is itself centred there), not merely centred
   between the two nav groups, and unaffected by the CTA's own width.
   Visual order is set with the `order` property so the left/right split
   is presentational only; the underlying DOM keeps a single, undivided
   reading order (Home, Partner With Us, AP-4® Rosehip, MaquiPro®, About
   SUKO, Quality & Recognition, FAQs) for the mobile panel and for
   keyboard/screen-reader users. The ghost's own order rule needs the
   extra ".header-cta-ghost" specificity below so it isn't clobbered by
   the plain ".header-cta { order: 5 }" rule it also matches (it carries
   both classes, and same-specificity rules resolve by source order). */
.header-cta-ghost { visibility: hidden; pointer-events: none; }
@media (min-width: 1241px) {
  /* The symmetric layout needs more single-line room per side (three
     nav items, unabbreviated) than the collapsed/burger breakpoint used
     for every other nav concern, so it engages only from 1241px up;
     .main-nav-left/-right below shrink this same 24px flex gap to 16px
     specifically to help fit within the header's own 1320px cap. */
  .header-cta.header-cta-ghost { order: 1; }
  .main-nav-panel { display: contents; }
  .header-inner { gap: 16px; }
  .main-nav-left { order: 2; flex: 1 1 0; min-width: 0; }
  .logo { order: 3; margin: 0 24px; }
  .main-nav-right { order: 4; flex: 1 1 0; min-width: 0; }
  .header-cta { order: 5; }
  nav.main-nav-left > ul { justify-content: flex-end; }
  nav.main-nav-right > ul { justify-content: flex-start; }
}

/* ---------- Enquire Now dropdown (header) ---------- */
.enquire-dropdown { position: relative; }
.enquire-toggle { border: none; cursor: pointer; }
.enquire-menu {
  list-style: none;
  margin: 0;
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 12px;
  background: var(--color-white);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  min-width: 240px;
  padding: 8px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity var(--transition-base), transform var(--transition-base), visibility var(--transition-base);
  z-index: 300;
}
.enquire-menu.open,
.enquire-dropdown:hover .enquire-menu,
.enquire-dropdown:focus-within .enquire-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.enquire-menu-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  text-decoration: none;
  color: var(--color-text);
  transition: background var(--transition-fast);
}
.enquire-menu-item + .enquire-menu-item { margin-top: 2px; }
.enquire-menu-item:hover { background: var(--color-cream-dark); }
.enquire-menu-item strong { display: block; font-size: 0.87rem; color: var(--color-text); font-weight: 600; }
.enquire-menu-item small { display: block; font-size: 0.78rem; color: var(--color-text-light); margin-top: 2px; }
.enquire-menu-icon {
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  border-radius: var(--radius-sm);
  background: var(--color-cream-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-earth);
}
.enquire-menu-icon svg { width: 16px; height: 16px; }
@media (max-width: 1240px) {
  .enquire-menu { right: auto; left: 0; }
}

/* ---------- Nav dropdown (icons + descriptions) ---------- */
nav.main-nav li.has-dropdown { position: relative; }
nav.main-nav li.has-dropdown > a::after {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-left: 6px;
  margin-bottom: 2px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  opacity: 0.5;
  transition: transform var(--transition-base);
}
nav.main-nav li.has-dropdown:hover > a::after,
nav.main-nav li.has-dropdown:focus-within > a::after { transform: rotate(225deg); margin-bottom: -2px; }
nav.main-nav .dropdown {
  list-style: none;
  margin: 0;
  padding: 10px;
  display: block;
  position: absolute;
  top: 100%;
  left: -14px;
  background: var(--color-cream);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  min-width: 280px;
  box-shadow: var(--shadow-md);
  z-index: 200;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity var(--transition-base), transform var(--transition-base), visibility var(--transition-base);
}
nav.main-nav li.has-dropdown:last-child .dropdown { left: auto; right: -14px; }
nav.main-nav li.has-dropdown:hover .dropdown,
nav.main-nav li.has-dropdown:focus-within .dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
nav.main-nav .dropdown li { margin: 0; }
nav.main-nav .dropdown li + li { margin-top: 1px; }
nav.main-nav .dropdown a {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 9px 10px;
  border-radius: var(--radius-sm);
  white-space: normal;
  transition: background var(--transition-fast);
}
nav.main-nav .dropdown a:hover,
nav.main-nav .dropdown a:focus-visible { background: var(--color-cream-dark); outline: none; }
nav.main-nav .dropdown a:focus-visible { box-shadow: inset 0 0 0 2px var(--color-earth); }
nav.main-nav .dropdown a:hover .dropdown-text strong,
nav.main-nav .dropdown a:focus-visible .dropdown-text strong { color: var(--color-earth); }
.dropdown-icon {
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  border-radius: var(--radius-sm);
  background: var(--color-cream-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-earth);
  transition: background var(--transition-base), color var(--transition-base);
}
.dropdown-icon svg { width: 17px; height: 17px; }
nav.main-nav .dropdown a:hover .dropdown-icon,
nav.main-nav .dropdown a:focus-visible .dropdown-icon { background: var(--color-earth); color: var(--color-white); }
.dropdown-text strong {
  display: block;
  font-size: 0.87rem;
  font-weight: 600;
  color: var(--color-text);
  transition: color var(--transition-fast);
}
.dropdown-text small {
  display: block;
  font-size: 0.76rem;
  font-weight: 400;
  color: var(--color-text-light);
  margin-top: 2px;
  line-height: 1.35;
  white-space: normal;
}

/* Default-highlight the first item in any nav dropdown (Sep 28 fix, live
   feedback: on a tall 3-item dropdown such as AP-4® Rosehip, arriving from
   the parent link with no exact hover target yet made it easy to end up
   choosing a lower item like "AP-4® Plant DNA Barcoding" instead of the
   top one). While the pointer is over the dropdown but not yet resting on
   any specific link (:not(:has(a:hover))), the first item is shown in the
   same highlighted state a real hover would give it — so the top item is
   always the clear default choice. The instant a specific link is actually
   hovered or focused, its own existing a:hover/:focus-visible rule above
   takes over (same background, so nothing visually conflicts or doubles
   up), including on the first item itself. Applies identically to the
   desktop hover dropdown and the burger/collapsed panel, since both share
   this same .dropdown/li/a markup. */
nav.main-nav .dropdown:not(:has(a:hover)) li:first-child a { background: var(--color-cream-dark); }
nav.main-nav .dropdown:not(:has(a:hover)) li:first-child a .dropdown-text strong { color: var(--color-earth); }
nav.main-nav .dropdown:not(:has(a:hover)) li:first-child a .dropdown-icon { background: var(--color-earth); color: var(--color-white); }

/* Rettelse (Sep 29 2026, chat: "ikke to knapper, kun det med at man kan
   trykke ned og se de tre muligheder"): the mobile dropdown-expand arrow
   used to be its own separate <button>, a second tap target next to the
   parent label link. It now lives inside the link itself (see the
   .has-dropdown markup) as a plain arrow glyph, hidden by default and
   only shown — as part of the single link — on the collapsed burger nav
   below. On desktop the arrow is the existing ::after pseudo-element on
   the link (further up this file); the dropdown still opens on
   hover/focus of the parent <li> as before. */
.dropdown-toggle-arrow { display: none; }

@media (max-width: 1240px) {
  /* Collapsed-nav dropdown panel: a floating card anchored top-right of
     the header, sharing the same open/close state as the burger trigger.
     Uses opacity/visibility/transform only (never display:none<->block)
     so it always animates smoothly, and is positioned absolutely so
     opening it never shifts page layout. JS (see below) keeps it open
     while the pointer is over either the trigger or the panel, with a
     short close delay so moving the cursor between them doesn't flicker. */
  .header-inner { position: relative; flex-wrap: wrap; }
  .nav-home-item { display: block; }
  .menu-toggle { display: block; }
  .header-cta .btn-outline, .header-cta .header-contact-link { display: none; }

  /* Rettelse (Sep 29 2026, chat request: "skab mere plads i dropdown
     burger menuen under FAQ så man har nemmere ved at trykke på den uden
     at den ruller væk op"): bottom padding raised from a flat 10px to
     28px specifically at the bottom. FAQs is the last item in this panel,
     right after the About SUKO dropdown — with only 10px below it, a
     touch tap landing even slightly low missed the panel's own bounding
     box and hit the page behind it, which the document click-listener
     further down this file treats as "clicked outside the nav" and closes
     the whole burger menu. The extra bottom padding gives that tap a much
     bigger safe margin before it can miss the panel. Left/right/top
     padding unchanged. */
  .main-nav-panel {
    display: block;
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    left: auto;
    width: min(92vw, 340px);
    max-height: min(75vh, 620px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    background: var(--color-white);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    padding: 10px 10px 28px;
    z-index: 500;
    transform-origin: top right;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-6px) scale(0.98);
    transition:
      opacity 220ms cubic-bezier(0.22, 1, 0.36, 1),
      transform 220ms cubic-bezier(0.22, 1, 0.36, 1),
      visibility 220ms;
  }
  .main-nav-panel.open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0) scale(1);
  }
  .header-cta-ghost { display: none; }
  nav.main-nav ul { flex-direction: column; gap: 2px; padding: 6px 4px; align-items: stretch; }
  nav.main-nav > ul > li > a {
    display: block;
    padding: 10px 8px;
    border-radius: var(--radius-sm);
    transition: background var(--transition-fast), color var(--transition-fast);
  }
  nav.main-nav > ul > li > a:hover,
  nav.main-nav > ul > li > a:focus-visible { background: var(--color-cream-dark); }
  nav.main-nav li.has-dropdown > a::after { display: none; }

  /* Rettelse (Sep 29 2026, chat: "ikke to knapper, kun det med at man kan
     trykke ned og se de tre muligheder"): the parent row used to split
     into two independent controls — the label link and a separate
     fixed-width arrow button next to it. They're now a single control:
     the link fills the whole row (text and arrow both inside it, spaced
     apart with justify-content), so there's exactly one thing to tap to
     reveal the three options. The dropdown itself is still a second flex
     item forced onto its own row via flex-wrap, rather than a floating/
     absolute panel. */
  nav.main-nav li.has-dropdown {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
  }
  nav.main-nav li.has-dropdown > a {
    flex: 1 1 100%;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
  }
  .dropdown-toggle-arrow {
    display: block;
    flex: 0 0 auto;
    width: 8px;
    height: 8px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg);
    transition: transform var(--transition-base);
  }
  nav.main-nav li.has-dropdown > a[aria-expanded="true"] .dropdown-toggle-arrow {
    transform: rotate(225deg);
  }
  nav.main-nav .dropdown {
    display: block;
    position: static;
    border: none;
    box-shadow: none;
    padding: 0 0 0 10px;
    min-width: 0;
    opacity: 1;
    visibility: visible;
    transform: none;
    flex-basis: 100%;
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--transition-base);
  }
  li.has-dropdown.dropdown-open .dropdown {
    max-height: 600px;
    padding: 2px 0 6px 10px;
  }
  nav.main-nav .dropdown a { padding: 8px 4px; }
  .dropdown-icon { width: 30px; height: 30px; flex: 0 0 30px; }
  .dropdown-icon svg { width: 15px; height: 15px; }
}
@media (max-width: 1240px) and (prefers-reduced-motion: reduce) {
  .main-nav-panel, .main-nav-panel.open { transition: none; }
  nav.main-nav .dropdown { transition: none; }
  .dropdown-toggle-arrow { transition: none; }
}
.menu-toggle:focus-visible { outline: 2px solid var(--color-earth); outline-offset: 3px; border-radius: var(--radius-sm); }

/* ---------- Hero (homepage) ---------- */
.hero { padding-top: 0; padding-bottom: 64px; }
.hero-inner { display: grid; grid-template-columns: 1fr 1.15fr; gap: 64px; align-items: start; }
.hero-copy {
  background: var(--color-white);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  padding: 40px 52px;
  box-shadow: var(--shadow-md);
}
.hero-copy h1 { color: var(--color-earth); }
.hero-copy .tagline-sub { font-size: 1.08rem; font-weight: 500; color: var(--color-text); max-width: 48ch; }
@media (max-width: 640px) {
  .hero-copy { padding: 30px 24px; }
}

/* ---------- Scroll reveal (fade + gentle rise into view) ---------- */
.reveal {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity var(--transition-slow), transform var(--transition-slow);
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}
/* Fade-only variant: no translateY shift, so a section that sits flush
   against a colored section above it (e.g. a purple section right after
   the black-to-purple fade strip) never exposes a gap of page background
   while it animates in. Use this instead of .reveal for any section whose
   top edge touches another section's solid background color. */
.reveal-fade-only {
  opacity: 0;
  transition: opacity var(--transition-slow);
}
.reveal-fade-only.is-visible {
  opacity: 1;
}
/* Side slide-in modifiers (Sep 2026 QA pass — animation variety requested
   sitewide): used together with .reveal (e.g. class="reveal reveal-left"),
   so the existing scroll-reveal script picks them up unchanged — only the
   direction of motion changes, same fade + easing as the base .reveal.
   Reserved for content that reads as a left-to-right sequence (e.g. a
   vertical timeline, one item at a time) rather than a grid, so the
   motion matches the direction the eye already reads in. */
.reveal.reveal-left { transform: translateX(-24px); }
.reveal.reveal-left.is-visible { transform: translateX(0); }
.reveal.reveal-right { transform: translateX(24px); }
.reveal.reveal-right.is-visible { transform: translateX(0); }
@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .reveal-fade-only {
    opacity: 1;
    transition: none;
  }
  * {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}
.hero-facts { display: flex; flex-wrap: wrap; gap: 0; margin: 28px 0 40px; font-size: 0.88rem; color: var(--color-text-light); }
.hero-facts span { margin-right: 10px; }
.hero-facts span:not(:last-child)::after { content: '\2022'; margin-left: 10px; color: var(--color-earth); font-weight: 700; }

.path-fork { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 8px; }
.path-card { padding: 26px 0 0; border-top: 2px solid var(--color-forest-dark); }
.path-card p { color: var(--color-text-light); font-size: 0.95rem; }

/* ---------- Hero quiz (Private Label / Own Brand selector) ---------- */
.hero-quiz { background: var(--color-white); border: 1px solid var(--color-line); border-radius: var(--radius-lg); padding: 52px 48px; max-width: 560px; margin: 0 auto; width: 100%; box-shadow: var(--shadow-md); }

/* ---------- Pile + quiz overlap (pile sits partly behind the quiz box) ---------- */
.pile-quiz-overlap { position: relative; max-width: 1040px; margin: 0 auto; display: flex; align-items: center; justify-content: center; }
.pile-quiz-overlap .pile-img { width: 58%; max-width: 620px; height: auto; display: block; position: relative; z-index: 1; border-radius: var(--radius-md); }
.pile-quiz-overlap .hero-quiz { position: relative; z-index: 2; margin-left: -140px; max-width: 520px; width: 100%; }
@media (max-width: 800px) {
  .pile-quiz-overlap { flex-direction: column; }
  .pile-quiz-overlap .pile-img { width: 100%; max-width: none; margin-bottom: 24px; }
  .pile-quiz-overlap .hero-quiz { margin-left: 0; max-width: 100%; }
}

/* ---------- Pile + quiz, side by side (pile clearly to the left, no overlap) ---------- */
.pile-quiz-side { max-width: 1040px; margin: 0 auto; display: flex; align-items: center; justify-content: center; gap: 48px; }
.pile-quiz-side .pile-img { width: 42%; max-width: 420px; height: auto; display: block; border-radius: var(--radius-md); }
.pile-quiz-side .hero-quiz { flex: 1; max-width: 560px; margin: 0; }
@media (max-width: 800px) {
  .pile-quiz-side { flex-direction: column; }
  .pile-quiz-side .pile-img { width: 100%; max-width: 320px; margin-bottom: 24px; }
}
.hero-quiz .quiz-step { display: none; }
.hero-quiz .quiz-step.active { display: block; }
.hero-quiz h3 { font-family: var(--font-heading); font-size: 1.5rem; margin-bottom: 28px; text-align: center; }
.quiz-options { border: 1px solid var(--color-line); border-radius: var(--radius-md); overflow: hidden; }
.quiz-option {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  text-align: left;
  padding: 22px 24px;
  background: var(--color-earth);
  color: var(--color-white);
  border: none;
  border-bottom: 1px solid rgba(255,255,255,0.18);
  font-family: var(--font-body);
  font-size: 1.02rem;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--transition-base);
}
.quiz-option:last-child { border-bottom: none; }
.quiz-option:hover { background: #251f5e; }
.quiz-option .dot { width: 16px; height: 16px; border: 2px solid var(--color-white); border-radius: 50%; flex-shrink: 0; }
.quiz-progress { height: 3px; background: var(--color-cream-dark); margin-top: 26px; border-radius: 2px; overflow: hidden; }
.quiz-progress-bar { height: 100%; background: var(--color-earth); transition: width var(--transition-slow); }
.quiz-back {
  display: inline-block;
  background: none;
  border: none;
  padding: 0;
  margin-bottom: 18px;
  font-family: var(--font-body);
  font-size: 0.85rem;
  color: var(--color-text-light);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.quiz-back:hover { color: var(--color-earth); }
.hero-quiz .quiz-step h3:not(:first-child) { text-align: left; }

@media (max-width: 900px) {
  .hero-inner { grid-template-columns: 1fr; }
  .path-fork { grid-template-columns: 1fr; }
  .hero-quiz { padding: 30px 24px; }
}

/* ---------- Hero carousel / slideshow ---------- */
.hero-carousel { position: relative; margin: 0 0 40px; border-radius: var(--radius-lg); overflow: hidden; background: var(--color-navy); box-shadow: var(--shadow-lg); }
.hero-carousel-fullbleed { width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); margin-bottom: 0; border-radius: 0; box-shadow: none; }
.ap4-hero-video { aspect-ratio: 16 / 9; }
@media (max-width: 600px) {
  .ap4-hero-video { aspect-ratio: auto; min-height: 460px; }
}
.award-strip { width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); background: var(--color-shop-orange); padding: 16px 24px; }
.award-strip-inner { max-width: 1140px; margin: 0 auto; display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; text-align: center; }
.award-strip-badge { font-size: 1.3rem; line-height: 1; }
.award-strip-inner span:not(.award-strip-badge) { font-weight: 600; font-size: 1.05rem; color: #fff; letter-spacing: 0.01em; }
.award-strip-link { font-weight: 600; font-size: 1.05rem; color: #fff; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; transition: opacity var(--transition-base); }
.award-strip-link:hover { opacity: 0.75; }
@media (max-width: 700px) { .award-strip-inner { font-size: 0.92rem; } }

.full-bleed-bar { width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); background: var(--color-earth); padding: 18px 0; overflow: hidden; }
.marquee-track { display: flex; width: max-content; animation: marquee-scroll 24s linear infinite; }
.marquee-content { display: inline-flex; align-items: center; white-space: nowrap; color: #fff; font-size: 1.05rem; font-weight: 600; letter-spacing: 0.01em; padding-right: 72px; }
.marquee-sep { display: inline-block; margin: 0 32px; opacity: 0.5; font-size: 0.8em; }
.full-bleed-bar:hover .marquee-track { animation-play-state: paused; }
@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) { .marquee-track { animation: none; } }
@media (max-width: 640px) { .marquee-content { font-size: 0.92rem; padding-right: 48px; } .marquee-sep { margin: 0 20px; } }
.award-carousel-panel { position: absolute; inset: 0; z-index: 1; background: var(--color-earth); }
.hero-carousel-track { position: relative; width: 100%; aspect-ratio: 21 / 9; }
.hero-carousel-slide { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity var(--transition-slow); }
.hero-carousel-slide.active { opacity: 1; visibility: visible; }
.hero-carousel-slide img { width: 100%; height: 100%; object-fit: contain; object-position: center; display: block; background: var(--color-navy); }
.hero-carousel-slide video { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero-carousel-slide::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.16) 45%, rgba(0,0,0,0) 65%); pointer-events: none; }
.hero-carousel-caption { position: absolute; z-index: 2; left: 6%; top: 50%; transform: translateY(-50%); max-width: 420px; color: #fff; }
.capsule-annotation { position: absolute; z-index: 2; pointer-events: none; }
.capsule-annotation-dot { position: absolute; left: -3px; top: -3px; width: 7px; height: 7px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 4px rgba(255,255,255,0.18); }
.capsule-annotation-line { position: absolute; left: 0; top: 0; height: 1px; background: rgba(255,255,255,0.85); transform-origin: left center; }
.capsule-annotation-text {
  position: absolute;
  white-space: nowrap;
  color: #fff;
  background: var(--color-earth);
  padding: 15px 20px;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
}
.capsule-annotation-text strong { display: block; font-family: var(--font-heading); font-size: 1.4rem; font-weight: 600; letter-spacing: 0; line-height: 1.2; text-shadow: none; }
.capsule-annotation-text span { display: block; font-size: 1rem; color: rgba(255,255,255,0.92); margin-top: 6px; text-shadow: none; }
@media (max-width: 900px) { .capsule-annotation { display: none; } }
.hero-carousel-caption h3 { color: #fff; font-size: clamp(1.7rem, 3.2vw, 2.4rem); line-height: 1.18; margin: 0 0 14px; font-weight: 600; }
.hero-carousel-caption h1 { color: #fff; font-size: clamp(1.7rem, 3.2vw, 2.4rem); line-height: 1.18; margin: 0 0 14px; }
.hero-carousel-caption p { color: rgba(255,255,255,0.88); margin: 0 0 20px; font-size: 0.95rem; }
.hero-carousel-video-placeholder { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; background: linear-gradient(135deg, var(--color-earth), var(--color-forest-dark)); color: #fff; padding: 24px; }
.hero-carousel-video-placeholder .play-icon { width: 64px; height: 64px; border-radius: 50%; background: rgba(255,255,255,0.15); border: 1.5px solid rgba(255,255,255,0.4); display: flex; align-items: center; justify-content: center; font-size: 1.3rem; margin-bottom: 18px; }
.hero-carousel-video-placeholder .ph-title { font-family: var(--font-heading); font-weight: 600; font-size: 1.05rem; margin: 0; }
.hero-carousel-video-placeholder .ph-note { color: rgba(255,255,255,0.65); font-size: 0.82rem; margin-top: 6px; max-width: 280px; }
.hero-carousel-arrow { position: absolute; z-index: 3; top: 50%; transform: translateY(-50%); width: 34px; height: 34px; border-radius: 50%; background: rgba(255,255,255,0.8); box-shadow: 0 2px 8px rgba(0,0,0,0.15); border: none; cursor: pointer; font-size: 1.1rem; line-height: 1; display: flex; align-items: center; justify-content: center; color: var(--color-forest-dark); transition: background var(--transition-base); }
.hero-carousel-arrow:hover { background: #fff; }
.hero-carousel-arrow.prev { left: 20px; }
.hero-carousel-arrow.next { right: 20px; }
.hero-carousel-dots { position: absolute; z-index: 3; bottom: 22px; left: 0; right: 0; display: flex; justify-content: center; gap: 9px; }
.hero-carousel-dots .dot { width: 7px; height: 7px; padding: 0; border-radius: 50%; border: none; background: rgba(255,255,255,0.4); box-shadow: 0 0 0 1px rgba(0,0,0,0.1); cursor: pointer; transition: background var(--transition-base), transform var(--transition-base); }
.hero-carousel-dots .dot.active { background: #fff; transform: scale(1.25); }
@media (max-width: 900px) {
  .hero-carousel-track { aspect-ratio: 4 / 5; }
  .hero-carousel-caption { left: 8%; right: 8%; max-width: none; }
  .hero-carousel-arrow { width: 28px; height: 28px; font-size: 0.92rem; }
}

/* ---------- Award slide (Product of the Year 2014): premium 50/50 editorial layout ---------- */
.hero-carousel-slide.award-slide-2014 { background: var(--color-cream); }
.hero-carousel-slide.award-slide-2014::after { content: none; }
.award-slide-inner {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  gap: 6%;
  padding: 0 7%;
}
.award-slide-copy { flex: 1 1 50%; max-width: 460px; text-align: left; }
.award-slide-eyebrow {
  display: block;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-shop-orange);
  margin-bottom: 14px;
}
.award-slide-heading { color: var(--color-forest-dark); font-size: clamp(1.7rem, 3.2vw, 2.4rem); line-height: 1.18; font-weight: 600; margin: 0 0 14px; }
.award-slide-body, .award-slide-support { color: var(--color-text-light); font-size: 0.95rem; line-height: 1.6; margin: 0 0 14px; }
.award-slide-support { margin-bottom: 22px; }
.award-slide-copy .btn { width: auto; }
.award-slide-logo { flex: 1 1 50%; display: flex; align-items: center; justify-content: center; }
.award-slide-logo img { width: 100%; max-width: 260px; height: auto; object-fit: contain; background: none; display: block; }
@media (max-width: 900px) {
  .hero-carousel:has(.award-slide-2014.active) .hero-carousel-track { aspect-ratio: auto; min-height: 660px; }
  .award-slide-inner { flex-direction: column; justify-content: center; gap: 16px; padding: 28px 58px 56px; }
  .award-slide-copy { flex: 0 0 auto; max-width: none; }
  .award-slide-eyebrow { font-size: 0.72rem; margin-bottom: 10px; }
  .award-slide-heading { font-size: 1.6rem; margin: 0 0 10px; }
  .award-slide-body, .award-slide-support { font-size: 0.88rem; line-height: 1.55; margin: 0 0 10px; }
  .award-slide-support { margin-bottom: 18px; }
  .award-slide-logo { flex: 0 0 auto; order: 2; }
  .award-slide-logo img { max-width: 100px; }
}

/* ---------- Sub-page intro (non-homepage pages) ---------- */
.page-intro { position: relative; padding-top: 60px; padding-bottom: 20px; }
/* Sep 2026 QA pass (ap-4-dna-barcoding.html): none of these three sections
   overrode the default 88px padding, stacking to ~176px gaps throughout. */
.dnabc-verify-steps-section { padding-top: 40px; padding-bottom: 40px; }
.dnabc-research-section { padding-top: 40px; padding-bottom: 40px; }
.dnabc-verify-section { padding-top: 40px; padding-bottom: 56px; }
/* Sep 2026 QA pass (formats-accreditation.html): neither section overrode
   the default 88px padding, stacking to a ~176px gap at this boundary. */
.fa-certifications-section { padding-bottom: 40px; }
.fa-process-section { padding-top: 40px; }
/* Sep 2026 QA pass (our-company.html): three sections in a row had no
   padding override, stacking the bare 88px default at each boundary for
   ~176px dead gaps down the whole page. */
.oc-gateway-section { padding-top: 40px; padding-bottom: 40px; }
.oc-timeline-section { padding-top: 40px; padding-bottom: 40px; }
.oc-group-section { padding-top: 40px; }
/* Group Structure row (Sep 2026 QA pass): replaces three bordered/
   shadowed .card boxes with an open editorial row on the section's own
   background, matching the divider language already used for
   .sf-trust-row on the SUKOFLEX Wholesale page — text-only content reads
   more calmly without card chrome around each entity. */
.oc-group-row { display: grid; grid-template-columns: 1fr 1px 1fr 1px 1fr; gap: 40px; margin-top: 8px; }
.oc-group-divider { background: var(--color-line); }
.oc-group-col h3 { margin-bottom: 8px; }
.oc-group-col p { margin: 0; color: var(--color-text-light); font-size: 0.94rem; }
.oc-group-row .oc-group-col.reveal:nth-child(3) { transition-delay: 70ms; }
.oc-group-row .oc-group-col.reveal:nth-child(5) { transition-delay: 140ms; }
@media (max-width: 800px) {
  .oc-group-row { grid-template-columns: 1fr; gap: 0; }
  .oc-group-divider { display: none; }
  .oc-group-col { padding: 22px 0; border-bottom: 1px solid var(--color-line); }
  .oc-group-col:first-child { padding-top: 0; }
  .oc-group-col:last-child { border-bottom: none; }
}
/* Sep 2026 QA pass (lactiplantibacillus-plantarum.html): three sections in
   a row had no padding override at all, stacking the bare 88px default at
   each boundary for ~176px dead gaps throughout the page. */
.lp-strain-section { padding-top: 40px; padding-bottom: 40px; }
.lp-history-section { padding-top: 40px; padding-bottom: 40px; }
.lp-inmaqui-section { padding-top: 40px; }
.page-intro h1 { margin-bottom: 16px; }
.page-intro .tagline-sub { font-size: 1.08rem; color: var(--color-text-light); max-width: 62ch; line-height: 1.65; }
.breadcrumb { font-size: 0.82rem; color: var(--color-text-light); margin-bottom: 20px; }
.breadcrumb a { text-decoration: underline; text-underline-offset: 3px; transition: color var(--transition-base); }
.breadcrumb a:hover { color: var(--color-earth); }

/* ---------- Trust line ---------- */
.trust-line { padding: 26px 0; }
.trust-line .container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 14px;
  font-size: 0.85rem;
  color: var(--color-text-light);
  font-weight: 500;
}

/* ---------- Private Label hero — full-bleed product photo as a background
   layer spanning the entire section, with the copy overlaid top-left via
   z-index. The photo's own background is color-matched to the page's flat
   cream, so its edges blend straight into the section with no visible
   rectangular boundary, card or frame. The image is sized/positioned with
   explicit width/left/bottom (not object-fit/object-position, whose "cover"
   semantics can't hit a product-in-frame this large without cropping it) so
   the jars, powder mound and capsules occupy roughly the right 40-45% of the
   width and sit close to the right and bottom edges, fully uncropped. ---------- */
.pl-hero { position: relative; overflow: hidden; padding: 40px 0 36px; min-height: 620px; box-sizing: border-box; }
.pl-hero-grid {
  position: absolute;
  top: 50%;
  left: max(28px, calc((100vw - var(--max-width)) / 2));
  transform: translateY(-50%);
  width: 40%;
  max-width: 500px;
  min-width: 280px;
  margin: 0;
  z-index: 2;
}
.pl-hero-copy h1 { font-size: clamp(2.1rem, 3.4vw, 2.85rem); line-height: 1.14; margin: 12px 0 18px; }
.pl-hero-copy .tagline-sub { font-size: 1.05rem; color: var(--color-text-light); max-width: 46ch; line-height: 1.6; margin-bottom: 30px; }
.pl-hero-ctas { display: flex; align-items: center; gap: 30px; flex-wrap: wrap; }
.pl-hero-secondary { font-size: 0.92rem; white-space: nowrap; }
/* Background layer: absolutely filling the section behind the text. The img
   itself is sized/positioned as percentages of the section's own width (the
   layer is always full section width, so % and vw are equivalent here) with
   the vertical anchor pinned to the bottom — that way the product stays near
   the lower edge regardless of how tall the section needs to be for the
   copy, instead of drifting toward the middle. */
.pl-hero-media {
  position: absolute;
  inset: 0;
  margin: 0;
  overflow: hidden;
  z-index: 1;
}
.pl-hero-media img {
  display: block;
  position: absolute;
  width: 72%;
  left: 40%;
  top: 50%;
  height: auto;
  transform: translateY(-50%);
  transition: transform 900ms ease;
}
.pl-hero-media:hover img { transform: translateY(-50%) scale(1.035); }
@media (prefers-reduced-motion: reduce) {
  .pl-hero-media img { transition: none; }
}
@media (max-width: 1180px) and (min-width: 901px) {
  .pl-hero { min-height: 560px; }
  .pl-hero-grid { width: auto; max-width: 400px; }
}
@media (max-width: 900px) {
  .pl-hero { padding: 8px 0 28px; min-height: 0; overflow: visible; }
  .pl-hero-grid { position: static; transform: none; left: auto; width: auto; max-width: none; margin: 6px 0 0; }
  .pl-hero-media {
    position: static;
    inset: auto;
    width: 96%;
    max-width: 520px;
    margin: 20px auto 0;
  }
  .pl-hero-media img {
    position: static;
    width: 100%;
    left: auto;
    top: auto;
    bottom: auto;
    height: auto;
    transform: none;
  }
  .pl-hero-media:hover img { transform: none; }
}
@media (max-width: 480px) {
  .pl-hero-ctas { gap: 16px 24px; }
}

/* ---------- Private Label trust strip — slim, compact, four points with hairline
   separators and small consistent check icons; not cards. ---------- */
.pl-trust-strip { padding: 0 0 8px; }
.pl-trust-strip-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  border-top: 1px solid var(--color-line);
  border-bottom: 1px solid var(--color-line);
  padding: 18px 0;
}
.pl-trust-item { display: flex; align-items: center; gap: 9px; font-size: 0.85rem; font-weight: 600; color: var(--color-text); padding: 6px 28px; position: relative; }
.pl-trust-item:not(:last-child)::after { content: ''; position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 1px; height: 16px; background: var(--color-line); }
.pl-trust-item svg { width: 15px; height: 15px; color: var(--color-earth); flex: 0 0 auto; }

@media (max-width: 760px) {
  .pl-trust-strip-inner { display: grid; grid-template-columns: 1fr 1fr; border: none; padding: 2px 0 6px; gap: 14px 0; }
  .pl-trust-item { justify-content: flex-start; padding: 8px 14px; }
  .pl-trust-item:not(:last-child)::after { display: none; }
  .pl-trust-item:nth-child(odd) { border-right: 1px solid var(--color-line); }
}
@media (max-width: 420px) {
  .pl-trust-strip-inner { grid-template-columns: 1fr; }
  .pl-trust-item { border-bottom: 1px solid var(--color-line); padding: 10px 4px; }
  .pl-trust-item:nth-child(odd) { border-right: none; }
  .pl-trust-item:last-child { border-bottom: none; }
}

/* ---------- Private Label — Controlled at the Source (additive, Sep 2026;
   re-laid out three times since: a single contained two-column split, then
   the two photos stacked top-to-bottom, then per feedback that they should
   sit side by side instead). A single contained two-column editorial
   split, in the same .container as the rest of the site: left-aligned text
   in a narrower left column; in the right column the plantation-rows photo
   and the ripe-rosehip detail photo now sit side by side as a shared-height
   row, the plantation photo taking the wider share — clean rectangles, no
   overlap, no shadow-anchoring, no card frame. On mobile (where two photos
   side by side would be too narrow to read) the pair drops back to a full-
   width top-to-bottom stack. All classes here (.pl-origin-*) are new and
   scoped to this section only; nothing shared/common was modified. ---------- */
.pl-origin-bridge { padding: 72px 0; }
/* Sep 2026 (comment feedback): three photos side by side felt cramped
   inside the standard 1140px .container, so this section's own container
   is widened to 1500px (scoped to .pl-origin-bridge only — the shared
   .container class and --max-width token are untouched everywhere else). */
.pl-origin-bridge .container { max-width: 1500px; }
/* Sep 2026 (comment feedback): a third photo was added to the media row;
   widened the media column's share of the grid further (was 0.82fr/1.18fr,
   then 0.68fr/1.32fr) so the three photos fill noticeably more width. */
.pl-origin-grid { display: grid; grid-template-columns: minmax(0, 0.52fr) minmax(0, 1.48fr); gap: 48px; align-items: center; }

.pl-origin-text-inner { max-width: 400px; }
.pl-origin-text .eyebrow { color: var(--color-earth); }
.pl-origin-text h2 { margin: 10px 0 16px; }
.pl-origin-text p { color: var(--color-text-light); margin: 0; }

.pl-origin-media-col { display: flex; gap: 20px; align-items: stretch; height: 460px; }
.pl-origin-media { flex: 1 1 0; height: 100%; margin: 0; overflow: hidden; border-radius: var(--radius-md); background: var(--color-cream-dark); }
.pl-origin-media img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 650ms ease; }
.pl-origin-media:hover img { transform: scale(1.02); }

/* Sep 2026 (comment feedback): the detail box was so narrow relative to
   the wide rosehip close-up behind it that the berries were cropped hard
   at the right edge; rebalanced from 1.6:1 to 1.25:1 so it keeps more of
   its own width, and the plantation photo's slightly wider box now needs
   only a small height crop instead of a heavy one. */
.pl-origin-media-main { flex-grow: 1.15; }
.pl-origin-media-detail { flex-grow: 0.85; }
/* Sep 2026 (comment feedback): third photo added to the row, to the right
   of the ripe-rosehip detail shot. */
.pl-origin-media-third { flex-grow: 0.85; }

@media (prefers-reduced-motion: reduce) {
  .pl-origin-media img { transition: none; }
}

@media (max-width: 900px) {
  .pl-origin-bridge { padding: 60px 0; }
  .pl-origin-grid { display: block; }
  .pl-origin-text-inner { max-width: none; margin-bottom: 32px; }
  .pl-origin-media-col { flex-direction: column; height: auto; gap: 16px; }
  /* Bug fix: the desktop flex-grow/flex-basis:0 rules left both photos
     collapsed to zero height here, because a column-direction flex
     container with height:auto has nothing for flex-grow to distribute.
     Photos are sized by their own aspect-ratio below instead. */
  .pl-origin-media { height: auto; flex: none; }
  .pl-origin-media-main { aspect-ratio: 4 / 5; }
  .pl-origin-media-detail { aspect-ratio: 16 / 9; }
  .pl-origin-media-third { aspect-ratio: 4 / 5; }
}

@media (max-width: 600px) {
  .pl-origin-bridge { padding: 48px 0; }
  .pl-origin-text-inner { margin-bottom: 26px; }
}

/* ---------- Feature row (USP image cards, e.g. "Why Choose SUKO Nordic") — large edge-to-edge tiles, calm and editorial ---------- */
.feature-row-fullbleed { width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); margin-top: 40px; margin-bottom: 0; }

/* ---------- Quality Standards accordion (AG1-inspired): fullbleed two-tone split —
   white text panel with an expandable checklist on the left, a tall product visual on a
   warm cream-tinted panel on the right, anchored to the bottom so it reads as continuing
   downward rather than sitting centred. ---------- */
.quality-accordion-fullbleed { width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); }
.quality-accordion-grid { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; min-height: 640px; background: var(--color-cream-dark); }
.quality-accordion-text { display: flex; align-items: center; padding: 96px clamp(24px, 6vw, 96px); }
.quality-accordion-text-inner { max-width: 560px; }
.quality-accordion-text .eyebrow { color: var(--color-earth); }
.quality-accordion-text h2 { font-size: clamp(1.9rem, 3.2vw, 2.5rem); margin: 10px 0 16px; }
.quality-accordion-text > .quality-accordion-text-inner > p { color: var(--color-text-light); font-size: 1.02rem; margin: 0 0 8px; }

.quality-accordion { margin-top: 20px; border-top: 1px solid var(--color-line); }
.accordion-item { border-bottom: 1px solid var(--color-line); }
.accordion-trigger {
  width: 100%; display: flex; align-items: center; gap: 14px;
  background: none; border: 0; padding: 22px 0; margin: 0;
  font-family: inherit; font-size: 1.02rem; text-align: left; cursor: pointer; color: var(--color-text);
}
.accordion-check { flex: 0 0 auto; width: 18px; height: 18px; color: var(--color-earth); }
.accordion-check svg { width: 100%; height: 100%; display: block; }
.accordion-label { flex: 1; font-weight: 600; transition: color 250ms ease; }
.accordion-trigger:hover .accordion-label, .accordion-trigger:focus-visible .accordion-label { color: var(--color-earth); }
.accordion-icon { position: relative; flex: 0 0 auto; width: 16px; height: 16px; }
.accordion-icon::before, .accordion-icon::after { content: ""; position: absolute; background: var(--color-text); border-radius: 1px; transition: background 250ms ease; }
.accordion-icon::before { left: 0; top: 50%; width: 100%; height: 2px; transform: translateY(-50%); }
.accordion-icon::after { top: 0; left: 50%; width: 2px; height: 100%; transform: translateX(-50%); transition: transform 0.2s ease, background 250ms ease; }
.accordion-item.is-open .accordion-icon::after { transform: translateX(-50%) scaleY(0); }
.accordion-trigger:hover .accordion-icon::before, .accordion-trigger:hover .accordion-icon::after,
.accordion-trigger:focus-visible .accordion-icon::before, .accordion-trigger:focus-visible .accordion-icon::after { background: var(--color-earth); }
@media (prefers-reduced-motion: reduce) {
  .accordion-label, .accordion-icon::before, .accordion-icon::after { transition: none; }
}
.accordion-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.3s ease; }
.accordion-item.is-open .accordion-panel { grid-template-rows: 1fr; }
.accordion-panel-inner { overflow: hidden; }
.accordion-panel-inner p { margin: 0 0 22px; padding-right: 8px; color: var(--color-text-light); font-size: 0.96rem; line-height: 1.7; }

/* Rosehip splash: uses object-fit: cover so the image always fills the panel
   edge-to-edge (immersive, no empty cream margin) with the surrounding water
   splash/stream/bubbles bleeding under the sections above and below — but
   object-position is anchored on the rosehip fruit itself (its horizontal and
   vertical centre in the source image, not the image's own centre), so cover's
   automatic crop always eats into the water first and the fruit — calyx to
   tapered tip — stays fully on-frame at any container size (desktop, tablet
   or mobile), without per-breakpoint tuning. */
.quality-accordion-media { position: relative; background: var(--color-cream-dark); overflow: hidden; }
.quality-accordion-media img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 44% 44%; transition: transform 700ms ease; }
.quality-accordion-media:hover img { transform: scale(1.025); }
@media (prefers-reduced-motion: reduce) {
  .quality-accordion-media img { transition: none; }
}

/* Small trust seal under the checklist, echoing how AG1 places a compact certification
   badge beneath its ingredient panel — reuses the existing AP-4® Quality Mark stamp
   rather than a new graphic. */
.quality-accordion-seal { display: flex; align-items: center; gap: 16px; margin-top: 32px; }
.quality-accordion-seal img { width: 68px; height: auto; flex: 0 0 auto; }
.quality-accordion-seal span { font-size: 0.78rem; line-height: 1.4; color: var(--color-text-light); max-width: 220px; }

@media (max-width: 900px) {
  .quality-accordion-grid { grid-template-columns: 1fr; min-height: 0; }
  .quality-accordion-text { padding: 64px 24px 40px; }
  .quality-accordion-media { height: 460px; }
}
@media (max-width: 480px) {
  .accordion-trigger { font-size: 0.96rem; gap: 10px; }
}
.feature-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0; }
@media (max-width: 700px) { .feature-row { grid-template-columns: 1fr; } }
.feature-card {
  position: relative;
  border-radius: 0;
  overflow: hidden;
  aspect-ratio: 8 / 5;
  display: flex;
  align-items: flex-end;
  box-shadow: none;
}
.feature-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 700ms ease;
}
.feature-card:hover img, .feature-card:focus-within img { transform: scale(1.035); }
.feature-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.62) 38%, rgba(0,0,0,0.22) 68%, rgba(0,0,0,0) 100%);
  transition: background 500ms ease;
}
.feature-card:hover::after, .feature-card:focus-within::after {
  background: linear-gradient(to top, rgba(0,0,0,0.94) 0%, rgba(0,0,0,0.68) 38%, rgba(0,0,0,0.28) 68%, rgba(0,0,0,0) 100%);
}
.feature-card-body { position: relative; z-index: 1; padding: 40px 44px; max-width: 480px; }
.feature-card-body h4 { font-family: var(--font-heading); font-weight: 600; font-size: 1.4rem; margin: 0 0 10px; color: #fff; text-shadow: 0 1px 4px rgba(0,0,0,0.5); }
.feature-card-body p { font-size: 0.98rem; color: #fff; line-height: 1.55; margin: 0; text-shadow: 0 1px 3px rgba(0,0,0,0.45); }
@media (max-width: 700px) { .feature-card-body { padding: 26px 24px; } .feature-card-body h4 { font-size: 1.15rem; } }

/* Staggered entrance for the six feature cards: the two-per-row layout
   reveals column 1 slightly before column 2 as each row scrolls into view. */
.feature-card.reveal:nth-child(odd) { transition-delay: 0ms; }
.feature-card.reveal:nth-child(even) { transition-delay: 110ms; }
@media (prefers-reduced-motion: reduce) {
  .feature-card img, .feature-card::after { transition: none; }
}

/* ---------- Services / cards grid ---------- */
.section-head { max-width: 640px; margin-bottom: 48px; }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.cards-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.card { background: var(--color-white); border: 1px solid var(--color-line); border-radius: var(--radius-md); padding: 26px 24px; box-shadow: var(--shadow-sm); transition: box-shadow var(--transition-base), border-color var(--transition-base), transform 300ms ease, opacity var(--transition-slow); }
.card:hover, .card:focus-within { box-shadow: var(--shadow-md); border-color: var(--color-earth); transform: translateY(-3px); }
.card p { color: var(--color-text-light); font-size: 0.94rem; }
.pl-formats-grid .card.reveal:nth-child(1) { transition-delay: 0ms; }
.pl-formats-grid .card.reveal:nth-child(2) { transition-delay: 110ms; }
@media (prefers-reduced-motion: reduce) {
  .card { transition: none; }
}

/* ---------- Private Label "How It Works" — sticky editorial image + numbered
   accordion (Sep 2026). Replaces the earlier purple panel + card grids. ---------- */
.pl-howworks-layout { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.15fr); gap: 64px; align-items: start; margin-top: 8px; }

.pl-howworks-media { position: sticky; top: 96px; aspect-ratio: 4 / 5; border-radius: 6px; overflow: hidden; background: var(--color-cream-dark); }
.pl-howworks-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.02); transition: opacity 450ms ease, transform 500ms ease; z-index: 1; }
.pl-howworks-img.active { opacity: 1; transform: scale(1); z-index: 2; }
.pl-howworks-img-mark { width: 46%; height: 46%; object-fit: contain; margin: auto; }

.pl-howworks-list { border-top: 1px solid var(--color-line); }
.pl-howworks-item { border-bottom: 1px solid var(--color-line); transition: border-color 300ms ease; }
.pl-howworks-item.is-open { border-bottom-color: var(--color-earth); }
.pl-howworks-trigger { display: flex; align-items: center; gap: 20px; width: 100%; background: none; border: none; cursor: pointer; text-align: left; padding: 26px 4px; font: inherit; color: var(--color-text); }
.pl-howworks-num { flex: 0 0 auto; width: 28px; font-size: 0.92rem; font-weight: 700; letter-spacing: 0.03em; font-variant-numeric: tabular-nums; color: var(--color-text-light); transition: color 300ms ease; }
.pl-howworks-title { flex: 1; font-size: 1.12rem; font-weight: 600; color: var(--color-text); transition: color 300ms ease; }
.pl-howworks-trigger:hover .pl-howworks-num, .pl-howworks-trigger:focus-visible .pl-howworks-num,
.pl-howworks-trigger:hover .pl-howworks-title, .pl-howworks-trigger:focus-visible .pl-howworks-title { color: var(--color-earth); }
@media (prefers-reduced-motion: reduce) {
  .pl-howworks-num, .pl-howworks-title { transition: none; }
}
.pl-howworks-indicator { position: relative; flex: 0 0 auto; width: 16px; height: 16px; }
.pl-howworks-indicator::before, .pl-howworks-indicator::after { content: ""; position: absolute; background: var(--color-text-light); border-radius: 1px; transition: transform 300ms ease, background 300ms ease; }
.pl-howworks-indicator::before { left: 0; top: 50%; width: 100%; height: 2px; transform: translateY(-50%); }
.pl-howworks-indicator::after { top: 0; left: 50%; width: 2px; height: 100%; transform: translateX(-50%); }
.pl-howworks-item.is-open .pl-howworks-num { color: var(--color-earth); }
.pl-howworks-item.is-open .pl-howworks-indicator::before,
.pl-howworks-item.is-open .pl-howworks-indicator::after { background: var(--color-earth); }
.pl-howworks-item.is-open .pl-howworks-indicator::after { transform: translateX(-50%) scaleY(0); }

.pl-howworks-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 300ms ease; }
.pl-howworks-item.is-open .pl-howworks-panel { grid-template-rows: 1fr; }
.pl-howworks-panel-inner { overflow: hidden; }
.pl-howworks-panel-inner p { margin: 0; padding: 0 4px 26px; max-width: 46ch; color: var(--color-text-light); font-size: 0.98rem; line-height: 1.7; }
.pl-howworks-mobile-media { display: none; }

@media (prefers-reduced-motion: reduce) {
  .pl-howworks-img { transition: opacity 1ms linear; transform: none; }
  .pl-howworks-panel { transition: none; }
  .pl-howworks-item { transition: none; }
}

@media (max-width: 900px) {
  .pl-howworks-layout { display: block; }
  .pl-howworks-media { display: none; }
  .pl-howworks-trigger { padding: 22px 2px; gap: 16px; }
  .pl-howworks-title { font-size: 1.04rem; }
  .pl-howworks-panel-inner p { padding: 0 2px 20px; max-width: none; }
  .pl-howworks-mobile-media { display: block; margin: 0 0 28px; }
  .pl-howworks-mobile-media img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 4px; }
  .pl-howworks-mobile-media-mark img { object-fit: contain; background: var(--color-cream-dark); padding: 28px; box-sizing: border-box; }
}

/* ---------- Offer cards (What We Offer) ---------- */
.offer-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; margin-top: 8px; }
.offer-grid .offer-card.reveal:nth-child(2) { transition-delay: 110ms; }
/* Sep 2026 QA pass: this is one of only two large "choose your path"
   cards on the page, so some visual weight to mark them as selectable
   options is appropriate — but shadow-md escalating to shadow-lg on
   hover was heavier than the site's calmer direction elsewhere. Toned
   down one tier; the border + overlapping icon badge still read clearly
   as a distinct, clickable option. */
.offer-card { background: var(--color-white); border: 1px solid var(--color-line); border-radius: var(--radius-md); overflow: hidden; display: flex; flex-direction: column; box-shadow: var(--shadow-sm); transition: box-shadow var(--transition-base); }
.offer-card:hover { box-shadow: var(--shadow-md); }
.offer-card-media { position: relative; }
.offer-card-media img { width: 100%; height: 240px; object-fit: cover; display: block; }
.offer-card-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 60%, rgba(0,0,0,0.2) 100%); pointer-events: none; }
.offer-card-body { padding: 34px 34px 38px; display: flex; flex-direction: column; flex: 1; position: relative; }
.offer-card-icon { width: 32px; height: 32px; border-radius: 50%; background: var(--color-earth); display: flex; align-items: center; justify-content: center; margin-top: -40px; margin-bottom: 14px; box-shadow: var(--shadow-sm); border: 2px solid var(--color-white); position: relative; z-index: 1; }
.offer-card-icon svg { width: 15px; height: 15px; display: block; }
.offer-card-tag { display: inline-block; align-self: flex-start; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-earth); background: var(--color-cream-dark); border-radius: var(--radius-sm); padding: 6px 12px; margin-bottom: 14px; }
.offer-card-body h3 { font-size: 1.4rem; margin: 0 0 12px; font-weight: 600; }
.offer-card-desc { color: var(--color-text-light); flex: 1; margin: 0; }
.offer-card-body .btn { margin-top: 26px; align-self: flex-start; }
@media (max-width: 720px) {
  .offer-grid { grid-template-columns: 1fr; }
  .offer-card-icon { margin-top: -32px; }
}

/* ---------- What We Offer: unified split section (homepage) ----------
   One full-bleed 50/50 composition rather than two boxed cards: each
   panel's image reaches the true viewport edge, a single hairline divides
   them, and the description/CTA stay collapsed until the panel is
   hovered, keyboard-focused, or tapped open. Purple is used only as an
   accent (tag label, heading-on-interaction, toggle icon) — the section
   itself sits on the ordinary page cream. */
.offer-split {
  position: relative;
  display: flex;
  align-items: stretch;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  margin-top: 48px;
}
.offer-panel { position: relative; flex: 1 1 50%; min-width: 0; display: flex; flex-direction: column; background: var(--color-cream); }
.offer-split-divider { width: 1px; align-self: stretch; background: var(--color-line); flex-shrink: 0; }

.offer-panel-media { position: relative; overflow: hidden; height: 360px; }
.offer-panel-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 600ms ease; }
.offer-panel:hover .offer-panel-media img,
.offer-panel:focus-within .offer-panel-media img,
.offer-panel.is-open .offer-panel-media img { transform: scale(1.03); }

.offer-panel-content { flex: 1; display: flex; flex-direction: column; padding: 32px max(28px, calc((100vw - var(--max-width)) / 2)) 44px 48px; }
.offer-panel-b .offer-panel-content { padding: 32px 48px 44px max(28px, calc((100vw - var(--max-width)) / 2)); }

.offer-panel-tag { display: inline-block; align-self: flex-start; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-earth); margin-bottom: 14px; }

.offer-panel-toggle { all: unset; box-sizing: border-box; display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; padding: 6px 0; cursor: pointer; }
.offer-panel-toggle h3 { margin: 0; transition: color var(--transition-base); }
.offer-panel:hover .offer-panel-toggle h3,
.offer-panel:focus-within .offer-panel-toggle h3,
.offer-panel.is-open .offer-panel-toggle h3 { color: var(--color-earth); }

.offer-panel-toggle-icon { flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%; border: 1.5px solid var(--color-line); position: relative; transition: border-color var(--transition-base); }
.offer-panel-toggle-icon::before, .offer-panel-toggle-icon::after { content: ''; position: absolute; background: var(--color-forest-dark); transition: transform var(--transition-base), background var(--transition-base); }
.offer-panel-toggle-icon::before { left: 9px; right: 9px; top: 50%; height: 1.5px; transform: translateY(-50%); }
.offer-panel-toggle-icon::after { top: 9px; bottom: 9px; left: 50%; width: 1.5px; transform: translateX(-50%); }
.offer-panel:hover .offer-panel-toggle-icon,
.offer-panel:focus-within .offer-panel-toggle-icon,
.offer-panel.is-open .offer-panel-toggle-icon { border-color: var(--color-earth); }
.offer-panel:hover .offer-panel-toggle-icon::before, .offer-panel:hover .offer-panel-toggle-icon::after,
.offer-panel:focus-within .offer-panel-toggle-icon::before, .offer-panel:focus-within .offer-panel-toggle-icon::after,
.offer-panel.is-open .offer-panel-toggle-icon::before, .offer-panel.is-open .offer-panel-toggle-icon::after { background: var(--color-earth); }
.offer-panel:hover .offer-panel-toggle-icon::after,
.offer-panel:focus-within .offer-panel-toggle-icon::after,
.offer-panel.is-open .offer-panel-toggle-icon::after { transform: translateX(-50%) rotate(90deg) scaleY(0); }

.offer-panel-reveal-wrap { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 420ms ease; }
.offer-panel-reveal-inner { overflow: hidden; }
.offer-panel-desc { color: var(--color-text-light); margin: 0; padding-top: 14px; }
.offer-panel-reveal-inner .btn { margin-top: 18px; }
.offer-panel:hover .offer-panel-reveal-wrap,
.offer-panel:focus-within .offer-panel-reveal-wrap,
.offer-panel.is-open .offer-panel-reveal-wrap { grid-template-rows: 1fr; }

@media (min-width: 901px) {
  .offer-panel:hover, .offer-panel:focus-within, .offer-panel.is-open { flex-basis: 55%; }
  .offer-split:has(.offer-panel-a:hover) .offer-panel-b,
  .offer-split:has(.offer-panel-a:focus-within) .offer-panel-b,
  .offer-split:has(.offer-panel-a.is-open) .offer-panel-b,
  .offer-split:has(.offer-panel-b:hover) .offer-panel-a,
  .offer-split:has(.offer-panel-b:focus-within) .offer-panel-a,
  .offer-split:has(.offer-panel-b.is-open) .offer-panel-a { flex-basis: 45%; }
}
@media (max-width: 900px) {
  .offer-split { flex-direction: column; }
  .offer-split-divider { width: 100%; height: 1px; }
  .offer-panel-media { height: 260px; }
  .offer-panel-content { padding: 28px 24px 32px !important; }
}

.offer-panel.reveal { opacity: 0; transform: translateY(22px); transition: opacity 550ms ease-out, transform 550ms ease-out, flex-basis 420ms cubic-bezier(0.4,0,0.2,1); }
.offer-panel.reveal.is-visible { opacity: 1; transform: none; }
.offer-panel-b.reveal { transition-delay: 130ms; }

/* Proof strip: plain full-width row on a hairline, no dark panel behind it */
.offer-proof-strip { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px 0; margin-top: 44px; padding-top: 28px; border-top: 1px solid var(--color-line); }
.offer-proof-check { display: flex; align-items: center; gap: 8px; font-size: 0.84rem; font-weight: 500; color: var(--color-text); padding: 0 18px; position: relative; white-space: nowrap; }
.offer-proof-check:not(:first-child)::before { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 1px; height: 14px; background: var(--color-line); }
@media (max-width: 760px) {
  .offer-proof-strip { justify-content: flex-start; gap: 14px 0; }
  .offer-proof-check { padding: 0 14px 0 0; }
  .offer-proof-check:not(:first-child)::before { display: none; }
}

@media (max-width: 900px) { .cards-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) { .cards-grid { grid-template-columns: 1fr; } }
.cards-grid.pl-formats-grid { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 620px) { .cards-grid.pl-formats-grid { grid-template-columns: 1fr; } }

/* ---------- Editorial image panels (large photo + overlaid copy) ---------- */
.editorial-panels { display: grid; grid-template-columns: 1fr; gap: 28px; margin-top: 8px; }
.editorial-panel { position: relative; border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 2 / 1; display: flex; align-items: center; box-shadow: var(--shadow-sm); }
.editorial-panel > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.editorial-panel::before { content: ""; position: absolute; inset: 0; background: linear-gradient(to right, rgba(253,251,247,0.62) 0%, rgba(253,251,247,0.4) 34%, rgba(253,251,247,0) 60%); z-index: 1; }
.editorial-panel-text { position: relative; z-index: 2; max-width: 380px; padding: 0 0 0 6%; }
.editorial-panel-text .eyebrow { color: var(--color-earth); }
.editorial-panel-text h3 { font-size: clamp(1.25rem, 1.7vw, 1.55rem); margin: 6px 0 12px; }
.editorial-panel-text p { color: var(--color-text-light); font-size: 0.95rem; margin: 0 0 14px; }
.editorial-panel-tags { font-size: 0.78rem !important; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-text) !important; margin: 0 !important; }
.editorial-panel-marker { display: flex; align-items: center; gap: 8px; font-size: 0.82rem !important; color: var(--color-text-light) !important; margin: 0 !important; }
.editorial-panel-marker img { width: 20px; height: 20px; border-radius: 50%; flex: 0 0 auto; }
@media (max-width: 720px) {
  .editorial-panel { aspect-ratio: auto; height: auto; display: block; box-shadow: none; border: 1px solid var(--color-line); }
  .editorial-panel::before { content: none; }
  .editorial-panel > img { position: static; width: 100%; height: auto; aspect-ratio: 4 / 3; }
  .editorial-panel-text { max-width: none; padding: 22px 20px 26px; background: var(--color-cream); }
}

/* ---------- Slim trust bar (allergen / product info) ---------- */
.trust-bar { margin-top: 32px; padding-top: 22px; border-top: 1px solid var(--color-line); text-align: center; font-size: 0.8rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-text-light); }

/* ---------- Spec pair (two minimal ingredient/content blocks, no cards) ---------- */
.spec-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; max-width: 820px; margin: 0 auto; }
.spec-pair > div:last-child { padding-left: 56px; border-left: 1px solid var(--color-line); }
.spec-pair h3 { margin-bottom: 10px; }
@media (max-width: 700px) {
  .spec-pair { grid-template-columns: 1fr; gap: 32px; }
  .spec-pair > div:last-child { padding-left: 0; border-left: none; border-top: 1px solid var(--color-line); padding-top: 24px; }
}

/* ---------- Scientist / founder profiles (large editorial portraits) ----------
   Rettelse (Sep 28, client redesign): our-scientists.html no longer uses
   .scientist-profiles/.scientist-profile, .os-intro-photo or
   .os-archival-* — the old "archival grid" section and "current
   portraits" section were merged into one editorial-progression section
   (see .os-progression-section / .os-scientist-row further down this
   file), and the hero photo is now .os-hero-duo instead of
   .os-intro-photo. Left in place as page-scoped dead code, per the
   site's standing convention, rather than deleted. */
.scientist-profiles { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; margin-top: 8px; }
.scientist-profile figure { margin: 0 0 24px; border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 4 / 5; box-shadow: var(--shadow-sm); background: var(--color-cream-dark); }
.scientist-profile figure img { width: 100%; height: 100%; object-fit: cover; display: block; }
.scientist-profile h3 { font-size: 1.3rem; margin-bottom: 4px; }
.scientist-profile .role { display: block; font-size: 0.85rem; color: var(--color-earth); font-weight: 600; letter-spacing: 0.01em; margin-bottom: 2px; }
.scientist-profile .os-specialism { display: block; font-size: 0.8rem; color: var(--color-text-light); margin-bottom: 14px; }
.scientist-profile p { color: var(--color-text-light); }
.scientist-profile p + p { margin-top: 12px; }
@media (max-width: 800px) { .scientist-profiles { grid-template-columns: 1fr; gap: 40px; } }

/* Our Scientists page: intro DNA-gel photo kept only until an authentic
   Monica+Peter photograph is available — de-emphasised (shorter, quieter)
   so it reads as a secondary supporting image, with a subtle filter to
   soften the very bright overexposed lightbox background. */
.os-intro-photo { aspect-ratio: 21 / 7; max-height: 320px; margin-top: 28px; }
.os-intro-photo img { filter: brightness(0.93) contrast(1.05) saturate(0.82); }
@media (max-width: 700px) { .os-intro-photo { aspect-ratio: 4 / 3; max-height: 260px; } }

/* "Research Before the Company" — two equal-weight archival lab portraits
   (Sep 2026). Deliberately NOT styled like .scientist-profile above: no
   name/role/bio block under the photo, just a small italic caption, so
   this reads as an archival feature rather than another team-member card.
   A single box-shadow (no border) is the only framing, so it stays a
   single visual layer rather than a frame-within-a-frame. A very light
   shared filter unifies the two source photographs' tones. */
.os-archival-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; margin-top: 8px; align-items: start; }
.os-archival-photo { margin: 0; }
.os-archival-photo-frame {
  display: block;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  background: var(--color-cream-dark);
}
.os-archival-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.94) contrast(1.02);
}
.os-archival-caption { display: block; margin-top: 14px; font-size: 0.82rem; font-style: italic; color: var(--color-text-light); line-height: 1.55; max-width: 46ch; }
@media (max-width: 800px) { .os-archival-grid { grid-template-columns: 1fr; gap: 32px; } }

/* ---------- our-scientists.html: editorial progression section (Sep 28,
   client redesign) — replaces the old separate archival grid + current-
   portraits sections above. Each scientist gets one row: a small photo
   pair (archival photo, slightly desaturated, next to their current
   portrait, full colour) plus name/role/bio alongside. Peter's row
   mirrors the layout (text and photos swap sides) purely for rhythm; the
   photo treatment stays identical between rows. ---------- */
.os-progression-section { padding: 48px 0; }
@media (max-width: 700px) { .os-progression-section { padding: 34px 0; } }

.os-scientist-row { display: grid; grid-template-columns: 0.85fr 1fr; gap: 40px; align-items: center; }
/* Rettelse (Sep 28, client request — "tighten the whitespace, especially
   around Peter's presentation"): reduced from 48/48px (~14% and, combined
   with the section's own padding above, noticeably more around this
   specific gap) so the story keeps its momentum between the two rows. */
.os-scientist-row + .os-scientist-row { margin-top: 40px; padding-top: 40px; border-top: 1px solid var(--color-line); }
.os-row-reverse .os-scientist-photos { order: 2; }
.os-row-reverse .os-scientist-text { order: 1; }
@media (max-width: 800px) {
  .os-scientist-row { grid-template-columns: 1fr; gap: 20px; }
  .os-row-reverse .os-scientist-photos, .os-row-reverse .os-scientist-text { order: initial; }
}

.os-scientist-photos { display: flex; gap: 14px; }
.os-scientist-photo { margin: 0; flex: 1; }
.os-scientist-photo.os-photo-archival { flex: 0.85; }
.os-scientist-photo.os-photo-current { flex: 1.15; }
.os-scientist-photo-frame { display: block; aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--radius-md); box-shadow: var(--shadow-sm); background: var(--color-cream-dark); }
.os-scientist-photo img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 700ms ease; }
.os-photo-archival img { filter: saturate(0.94) contrast(1.02); }
.os-scientist-photo figcaption { display: block; margin-top: 8px; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--color-text-light); text-align: center; }
@media (hover: hover) and (pointer: fine) {
  .os-scientist-photo:hover img { transform: scale(1.03); }
}
@media (prefers-reduced-motion: reduce) {
  .os-scientist-photo img { transition: none; }
}

/* Rettelse (Sep 28, client request — "historical and current portraits
   revealed with a slight offset/staggered fade"): nested reveal on top of
   the row's own .reveal (same pattern already used elsewhere on the site,
   e.g. .mp-formula-panel-wrap + its individual panels) — the archival
   photo settles in first, the current portrait follows just after, both
   still within the row's own gentle rise. */
.os-scientist-photo.reveal { transition-delay: 0ms; }
.os-scientist-photo.os-photo-current.reveal { transition-delay: 130ms; }
@media (prefers-reduced-motion: reduce) {
  .os-scientist-photo.reveal, .os-scientist-photo.os-photo-current.reveal { transition-delay: 0ms; }
}

.os-scientist-text h3 { font-size: 1.25rem; margin-bottom: 4px; }
.os-scientist-text .role { display: block; font-size: 0.85rem; color: var(--color-earth); font-weight: 600; letter-spacing: 0.01em; margin-bottom: 2px; }
.os-scientist-text .os-specialism { display: block; font-size: 0.8rem; color: var(--color-text-light); margin-bottom: 14px; }
.os-scientist-text p { color: var(--color-text-light); }

/* Our-scientists.html hero: small contained diptych of Monica and Peter's
   own current portraits, replacing the old full-width generic lab photo
   (.os-intro-photo above, now dead code). Capped to a modest max-width
   rather than stretched full-bleed, so it reads as an intimate, personal
   introduction rather than another wide hero banner. */
.os-hero-duo { display: flex; gap: 18px; max-width: 560px; margin-top: 28px; }
.os-hero-photo { flex: 1; margin: 0; aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--radius-lg); box-shadow: var(--shadow-md); background: var(--color-cream-dark); }
.os-hero-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.os-hero-caption { margin-top: 14px; font-size: 0.82rem; font-weight: 600; letter-spacing: 0.02em; color: var(--color-text-light); }
@media (max-width: 700px) { .os-hero-duo { gap: 12px; max-width: 400px; } .os-hero-caption { font-size: 0.78rem; } }

/* ---------- our-scientists.html: full-page spacing/rhythm pass (Sep 28) ----------
   Every section on this page previously fell back to the sitewide
   `section { padding: 88px 0; }` default, which stacked with each
   section's own internal spacing (section-head margins, figure margins)
   to produce very large gaps between sections — the same pattern already
   fixed on maquipro.html. Page-scoped classes below give each section a
   smaller, explicit padding instead, tightening the page's overall
   vertical rhythm without touching any shared/global rule.
   .os-foundations-section / .os-profiles-section are dead code now that
   the two sections they styled were merged into .os-progression-section
   above — .os-foundations-head is still used (reused as the progression
   section's own section-head), left here for that reason. */
.os-intro-section { padding-bottom: 0; }
.os-foundations-section { padding: 48px 0 36px; }
/* Rettelse (Sep 28, client request): 28px -> 24px, part of the same
   ~10-15% tightening pass applied to this section's own padding and to
   the gap between the two scientist rows just below. */
.os-foundations-head { margin-bottom: 24px; }
@media (max-width: 700px) { .os-foundations-section { padding: 36px 0 28px; } }

.os-profiles-section { padding: 56px 0; }
.os-profiles-section .scientist-profile figure { aspect-ratio: 4 / 4.6; margin-bottom: 16px; box-shadow: none; }
@media (max-width: 700px) { .os-profiles-section { padding: 40px 0; } }

/* Rettelse (Sep 28, client request — "reduce the largest gaps between the
   Monica/Peter/AP-4® sections by ~10-15%"): padding reduced from 56px on
   this section and the two below (os-dna-section, os-nextgen-section);
   mobile padding reduced by the same proportion. */
.os-approach-section { padding: 48px 0; }
.os-approach-grid { grid-template-columns: 0.82fr 1.18fr; }
@media (max-width: 800px) { .os-approach-grid { grid-template-columns: 1fr; } }
@media (max-width: 700px) { .os-approach-section { padding: 34px 0; } }

.os-dna-section { padding: 48px 0; }
.os-dna-note { margin-top: 18px !important; font-size: 0.86rem; color: rgba(255,255,255,0.6) !important; }
@media (max-width: 700px) { .os-dna-section { padding: 34px 0; } }

/* DNA section visual (Sep 28, client redesign): gives the purple
   .os-dna-section a right-hand visual instead of empty space, using the
   same translucent-card-on-purple idiom as .am-journey-stage /
   .mp-formula-panel elsewhere on the site. Two stacked cards, joined by a
   short connector line, keep "species-level" and "AP-4®-specific"
   visually distinct levels rather than blending them into one paragraph. */
.os-dna-grid { grid-template-columns: 0.95fr 1.05fr; align-items: center; }
@media (max-width: 800px) { .os-dna-grid { grid-template-columns: 1fr; } }
.os-dna-levels { display: flex; flex-direction: column; align-items: center; }
.os-dna-level { width: 100%; background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.16); border-radius: 18px; padding: 26px 28px; }
.os-dna-level-num { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.3); font-family: var(--font-heading); font-weight: 700; font-size: 0.92rem; color: var(--color-shop-orange); margin-bottom: 14px; }
.os-dna-level-label { display: block; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: rgba(255,255,255,0.6); margin-bottom: 8px; }
.os-dna-level h3 { color: #fff; font-size: 1.05rem; margin: 0 0 8px; }
.os-dna-level p { color: rgba(255,255,255,0.78); font-size: 0.88rem; line-height: 1.6; margin: 0; }
/* Rettelse (Sep 28, client request): the connector now draws in — a calm
   scaleY(0 -> 1) from the top, delayed to start just after the level-1
   card has faded in. This scales a plain child element, not the observed
   .reveal target itself, so it doesn't run into the clip-path/
   IntersectionObserver gotcha documented elsewhere in this file. */
.os-dna-level-connector {
  width: 1px;
  height: 22px;
  background: rgba(255,255,255,0.22);
  transform: scaleY(0);
  transform-origin: top center;
  transition: transform 650ms cubic-bezier(0.22, 1, 0.36, 1) 260ms;
}
.os-dna-levels.reveal.is-visible .os-dna-level-connector { transform: scaleY(1); }
@media (max-width: 700px) { .os-dna-level { padding: 22px 22px; } }
@media (prefers-reduced-motion: reduce) { .os-dna-level-connector { transition: none; } }

.os-nextgen-section { padding: 48px 0; }
.os-nextgen-grid { grid-template-columns: 0.92fr 1.08fr; }
@media (max-width: 800px) { .os-nextgen-grid { grid-template-columns: 1fr; } }
@media (max-width: 700px) { .os-nextgen-section { padding: 34px 0; } }

.os-final-cta { padding: 56px 0 88px; }
@media (max-width: 700px) { .os-final-cta { padding: 40px 0 64px; } }

/* Final CTA: one-line callback to the science story before the buttons,
   and a quieter secondary link row after them (Sep 28, client redesign —
   see the HTML comment above .os-final-cta for why). */
.os-final-cta-lead { color: var(--color-text-light); max-width: 52ch; margin: 0 auto 4px; }
.os-final-cta-more { margin-top: 20px; font-size: 0.86rem; color: var(--color-text-light); }
.os-final-cta-more a { color: var(--color-earth); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.os-final-cta-more a:hover, .os-final-cta-more a:focus-visible { color: var(--color-text); }

/* Subtle hover scale (max ~1.02) on the page's photographic images that
   didn't already have one, matching the discrete hover convention used
   elsewhere on the site (e.g. .mp-field-banner, .mp-usage-hero-media). */
.os-archival-photo-frame, .os-profiles-section .scientist-profile figure, .os-approach-photo { overflow: hidden; }
.os-archival-photo-frame img, .os-profiles-section .scientist-profile figure img, .os-approach-photo img { transition: transform 700ms ease; }
@media (hover: hover) and (pointer: fine) {
  .os-archival-photo:hover .os-archival-photo-frame img { transform: scale(1.02); }
  .os-profiles-section .scientist-profile:hover figure img { transform: scale(1.02); }
  .os-approach-photo:hover img { transform: scale(1.02); }
}
@media (prefers-reduced-motion: reduce) {
  .os-archival-photo-frame img, .os-profiles-section .scientist-profile figure img, .os-approach-photo img { transition: none; }
}

/* ---------- Gateway cards (large image-led links, About SUKO overview) ----------
   Sep 2026 QA pass: de-boxed to match .cred-card — dropped the white
   fill/border/shadow (another "card on a panel" double-frame case) and
   moved to a colour-shift + gentle lift on hover, with the corner
   rounding kept on the photo itself so the page's image-corner language
   stays consistent even without the card container. */
.gateway-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin-top: 8px; }
.gateway-card { display: flex; flex-direction: column; text-decoration: none; color: inherit; transition: transform 300ms ease; }
.gateway-card:hover, .gateway-card:focus-visible { transform: translateY(-3px); }
.gateway-card-media { border-radius: var(--radius-md); overflow: hidden; }
.gateway-card-media img { width: 100%; height: 220px; object-fit: cover; display: block; transition: transform 600ms ease; }
.gateway-card:hover .gateway-card-media img, .gateway-card:focus-visible .gateway-card-media img { transform: scale(1.045); }
.gateway-card-body { padding: 18px 2px 0; border-top: 1px solid var(--color-line); display: flex; flex-direction: column; flex: 1; }
.gateway-card-body h3 { margin-bottom: 8px; transition: color 250ms ease; }
.gateway-card:hover .gateway-card-body h3, .gateway-card:focus-visible .gateway-card-body h3 { color: var(--color-earth); }
@media (prefers-reduced-motion: reduce) {
  .gateway-card, .gateway-card-media img, .gateway-card-body h3 { transition: none; }
}
.gateway-card-body p { color: var(--color-text-light); font-size: 0.94rem; margin: 0 0 16px; flex: 1; }
@media (max-width: 900px) { .gateway-grid { grid-template-columns: 1fr; } }

/* ---------- One family, three locations (restrained connector) ---------- */
.location-trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; position: relative; margin-top: 24px; }
.location-trio::before { content: ""; position: absolute; top: 7px; left: 8%; right: 8%; height: 1px; background: var(--color-line); z-index: 0; }
.location-item { position: relative; z-index: 1; text-align: center; padding: 0 20px; }
.location-item .location-dot { width: 14px; height: 14px; border-radius: 50%; background: var(--color-earth); margin: 0 auto 20px; }
.location-item h3 { margin-bottom: 8px; }
.location-item p { color: var(--color-text-light); font-size: 0.92rem; }
@media (max-width: 800px) {
  .location-trio { grid-template-columns: 1fr; gap: 32px; }
  .location-trio::before { display: none; }
}

/* ---------- Daughters plantation photo timeline ---------- */
.daughters-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 8px; }
.daughters-grid figure { margin: 0; }
.daughters-grid .daughter-photo { aspect-ratio: 4 / 3; border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-sm); background: var(--color-cream-dark); }
.daughters-grid .daughter-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.daughters-grid figcaption { margin-top: 14px; }
.daughters-grid figcaption strong { display: block; font-size: 1rem; letter-spacing: 0.01em; }
.daughters-grid figcaption span { display: block; color: var(--color-text-light); font-size: 0.85rem; margin-top: 2px; }
@media (max-width: 800px) { .daughters-grid { grid-template-columns: 1fr; } }

/* ---------- Our Family Story (our-family-story.html) — page-scoped ----------
   .ofs-* classes: three-generation visual language (hero photo treatment,
   the 3-stage generation strip, the recurring generation marker chip used
   at the top of each generation's section, the archival-photo frame for
   the first-generation section, and the text-led 1996 year marker used in
   place of any fabricated archival photography for the second generation). */

/* Hero photo — sized to its own native ratio (no cropping), replacing the
   generic .page-photo-banner's wider 21/8 banner ratio which would have
   cut into the group at the top/bottom. Ratio updated Sep 29 2026 when the
   hero photo itself was swapped for the family-jumping shot (3/2 native,
   was 1340/934) — same reasoning, matched to whichever photo is current.
   Rettelse (Sep 29 2026, chat: "familiebilledet skal ikke beskæres... og
   ingen ramme omkring"): the old max-height:640px capped the box shorter
   than width/aspect-ratio on any viewport near --max-width (1140px wide
   container ≈ 723px tall at 3/2), so object-fit:cover was quietly cropping
   into the family's raised hands/feet again despite the aspect-ratio fix
   above — removed the cap entirely; the container's own max-width already
   bounds how tall this can ever get. Also dropped the rounded corners and
   drop shadow (the "frame") she asked to remove — this is now a plain,
   borderless, uncropped photo. */
/* Rettelse 25 (Sep 29 2026, artifact comment: "kan vi have en mere kreativ
   start på denne her side"): asymmetric split for the hero — text in a
   narrower column, photo in a wider one, same 0.82fr/1fr-ish idiom as
   .ofs-ch1-grid/.two-col-grid further down this file. Collapses to a single
   stacked column at the same 800px breakpoint those grids use, text first
   so the reading order matches the old layout on mobile. */
.ofs-hero-grid { display: grid; grid-template-columns: 0.86fr 1.14fr; gap: 48px; align-items: center; margin-top: 22px; }
@media (max-width: 800px) { .ofs-hero-grid { grid-template-columns: 1fr; gap: 28px; } }
.ofs-hero-text .eyebrow { margin-bottom: 10px; }
/* Two-tone headline: second sentence picks up the same accent colour the
   eyebrow already uses, so the h1 reads as a designed headline rather than
   plain slide-title text — no new colour introduced. */
.ofs-hero-h1-accent { color: var(--color-earth); }
.ofs-hero-photo {
  width: 100%;
  margin: 0;
  aspect-ratio: 3 / 2;
}
/* History: this figure used to carry its own margin (last: 20px top, 40px
   bottom — tightened from an earlier 32px so it followed the intro text
   closely in the old stacked layout). Rettelse 25 (Sep 29 2026) moved it
   into .ofs-hero-grid alongside the text instead of below it, so spacing
   is now handled by that grid's own gap/align-items — margin reset to 0
   here to avoid doubling up. */
.ofs-intro-lede {
  max-width: 48ch;
}
/* Rettelse (Sep 29 2026, artifact comment: "hænderne og fødder er cuttet
   fra"): overrides the shared .ofs-parallax-frame img rule (9% top offset,
   118% height — a reserve other data-parallax photos on this page use so
   a scroll-driven translateY never exposes an edge). This box's ratio now
   matches the photo's own native ratio exactly, so that reserve had no
   slack on the sides to crop from and clipped the hands/feet instead. This
   figure no longer has data-parallax (see the HTML), so nothing needs the
   reserve — back to a plain, exact fit that shows the whole photo. */
.ofs-hero-photo .ofs-parallax-frame img {
  position: static;
  width: 100%;
  height: 100%;
  top: auto;
}
.ofs-hero-photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 30%; }

/* Three-stage generation intro strip beneath the hero — same connecting-line
   idiom as .lp-record-grid / .dnabc-stepper elsewhere on the site, kept
   deliberately simple: a number, a label, a name. */
.ofs-gen-strip { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin: 0 0 4px; padding-top: 28px; border-top: 1px solid var(--color-line); }
.ofs-gen-strip::before { content: ''; position: absolute; top: 45px; left: 17px; right: 17px; height: 1px; background: var(--color-line); z-index: 0; }
.ofs-gen-stage { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; }
.ofs-gen-stage-num {
  width: 34px; height: 34px; border-radius: 50%; margin-bottom: 6px;
  border: 1.5px solid var(--color-earth); color: var(--color-earth); background: var(--color-cream);
  font-family: var(--font-heading); font-weight: 700; font-size: 0.82rem;
  display: flex; align-items: center; justify-content: center;
}
.ofs-gen-stage-label { font-size: 0.74rem; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; color: var(--color-text-light); }
.ofs-gen-stage-name { font-family: var(--font-heading); font-weight: 600; font-size: 0.95rem; color: var(--color-forest-dark); }
.ofs-gen-stage-sub { font-size: 0.8rem; color: var(--color-text-light); max-width: 26ch; line-height: 1.4; }
@media (max-width: 700px) {
  .ofs-gen-strip { grid-template-columns: 1fr; gap: 22px; }
  .ofs-gen-strip::before { display: none; }
  .ofs-gen-stage { flex-direction: row; flex-wrap: wrap; text-align: left; justify-content: flex-start; gap: 4px 14px; padding-left: 0; }
  .ofs-gen-stage-num { margin-bottom: 0; flex: 0 0 auto; align-self: flex-start; }
  .ofs-gen-stage-label, .ofs-gen-stage-name, .ofs-gen-stage-sub { text-align: left; max-width: none; }
  .ofs-gen-stage-label { flex-basis: 100%; margin-left: 48px; }
  .ofs-gen-stage-name { margin-left: 48px; }
  .ofs-gen-stage-sub { margin-left: 48px; }
}

/* Recurring generation marker chip — small deep-purple text with an orange
   numeral accent, repeated at the top of each generation's section to keep
   the Opapa → Monica & Peter → Sofia/Isabel/Amanda sequence legible. */
.ofs-gen-marker { display: inline-flex; align-items: center; gap: 8px; font-size: 0.76rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--color-earth); margin-bottom: 14px; }
.ofs-gen-marker-num { color: var(--color-shop-orange); font-weight: 800; }

/* First-generation archival photo frame */
.ofs-origin-grid { align-items: center; }
.ofs-archive-photo { position: relative; margin: 0; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-md); aspect-ratio: 1900 / 1195; background: var(--color-cream-dark); }
.ofs-archive-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ofs-archive-tag {
  position: absolute; top: 16px; left: 16px; z-index: 1;
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--color-white); background: rgba(26,20,10,0.45); backdrop-filter: blur(2px);
  padding: 6px 11px; border-radius: var(--radius-sm);
}
.ofs-archive-caption { margin-top: 12px; font-size: 0.82rem; color: var(--color-text-light); line-height: 1.55; max-width: 46ch; }

/* Second-generation year marker, alongside a reserved placeholder image slot */
.ofs-year-marker { display: flex; align-items: baseline; flex-wrap: wrap; gap: 14px; margin: 28px 0 4px; padding-top: 22px; border-top: 1px solid var(--color-line); }
.ofs-year-marker-year { font-family: var(--font-heading); font-weight: 700; font-size: 1.3rem; color: var(--color-shop-orange); letter-spacing: 0.01em; }
.ofs-year-marker-label { font-size: 0.76rem; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; color: var(--color-earth); }

/* Sep 2026: reserved placeholder for the not-yet-found archival photo of
   Peter and Monica together. Sized and positioned exactly as a real photo
   would be (same grid cell, same aspect-ratio, same radius as
   .ofs-archive-photo above) so dropping in a real <img> later needs no
   other change. One hairline border only — no nested frame — on a very
   pale lavender tint, quiet enough to read as reserved space rather than
   an error state or a generic icon placeholder. */
.ofs-placeholder-photo {
  margin: 0;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-line);
  background: #F4F2FA;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px;
  text-align: center;
}
.ofs-placeholder-inner { max-width: 32ch; }
.ofs-placeholder-label { display: block; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--color-text-light); margin-bottom: 10px; }
.ofs-placeholder-text { margin: 0; font-size: 0.85rem; font-style: italic; color: var(--color-text-light); line-height: 1.6; }
@media (max-width: 800px) {
  .ofs-placeholder-photo { padding: 28px 22px; }
}

@media (max-width: 800px) {
  .ofs-origin-grid figure.ofs-archive-photo { order: 0; }
}

/* ---------- "The Next Generation" transition photo (Sep 2026) ----------
   Sits right after the Second Generation (Monica & Peter) section and
   introduces the third generation, using the same Amanda-and-Isabel
   plantation photo that appears on the homepage for a different purpose
   (a brand statement + link there; the conclusion of this three-generation
   story here). Modelled on the site's existing wide-photo-with-caption
   pattern (see .wc-panorama on why-rosehips-from-chile.html) but kept
   inside .container — wider than the page's normal two-column text width,
   but still aligned to the same grid, not bled to the viewport edge. */
.ofs-nextgen-section { padding-top: 108px; }
.ofs-nextgen-photo {
  position: relative;
  margin: 0;
  aspect-ratio: 12 / 5;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--color-cream-dark);
}
.ofs-nextgen-photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 42%; }
.ofs-nextgen-photo::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 56%;
  background: linear-gradient(0deg, rgba(10,9,6,0.62) 0%, rgba(10,9,6,0.28) 48%, rgba(10,9,6,0) 100%);
  pointer-events: none;
}
.ofs-nextgen-overlay {
  position: absolute;
  z-index: 1;
  left: 5%;
  right: 5%;
  bottom: 6%;
  max-width: 460px;
  color: #fff;
}
.ofs-nextgen-eyebrow {
  display: block;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.88);
  margin: 0 0 12px;
}
.ofs-nextgen-heading { color: #fff; margin: 0; font-size: clamp(1.5rem, 2.8vw, 2.1rem); }
.ofs-nextgen-copy { max-width: 640px; margin: 36px auto 0; text-align: center; color: var(--color-text-light); }
@media (max-width: 900px) {
  .ofs-nextgen-section { padding-top: 72px; }
  .ofs-nextgen-photo { aspect-ratio: 4 / 3; }
  .ofs-nextgen-overlay { left: 24px; right: 24px; bottom: 20px; max-width: none; }
}

/* ---------- Science & Research ---------- */
.science-intro { max-width: 780px; font-size: 1.05rem; }
.science-intro mark { background: #E3DCC3; color: var(--color-forest-dark); padding: 0 2px; }
.science-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; margin-top: 48px; }
.science-col h3 { margin-bottom: 16px; }
.science-col ul { list-style: none; padding: 0; }
.science-col li { margin-bottom: 16px; font-size: 0.93rem; color: var(--color-text); padding-bottom: 16px; border-bottom: 1px solid var(--color-line); }
.science-col li:last-child { border-bottom: none; }
.cite {
  display: inline-block;
  margin-top: 6px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--color-text-light);
  background: var(--color-cream-dark);
  border-radius: 999px;
  padding: 3px 10px;
}
.science-footnote { margin-top: 40px; font-size: 0.82rem; color: var(--color-text-light); max-width: 780px; }
@media (max-width: 900px) { .science-grid { grid-template-columns: 1fr; } }

/* ---------- International Recognition & AP-4 Quality (evidence cards + country grid) ---------- */
.award-cards-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; align-items: stretch; }
.award-card { display: flex; flex-direction: column; align-items: center; text-align: center; transition: box-shadow var(--transition-base), border-color var(--transition-base), transform 350ms ease, opacity var(--transition-slow); }
.award-card:hover, .award-card:focus-within { transform: translateY(-4px); }
.award-card img { width: 100%; max-width: 180px; height: auto; margin: 0 auto 20px; transition: transform 600ms ease; }
.award-card:hover img, .award-card:focus-within img { transform: scale(1.035); }
.award-card p { margin: 0 0 14px; }
.award-card p:last-of-type { margin-bottom: 0; }
.award-card .eyebrow { margin-bottom: 12px; }
@media (max-width: 800px) { .award-cards-grid { grid-template-columns: 1fr; gap: 24px; } }
/* Staggered entrance: the second card settles in just behind the first. */
.award-cards-grid .award-card.reveal:nth-child(2) { transition-delay: 130ms; }
@media (prefers-reduced-motion: reduce) {
  .award-card, .award-card img { transition: none; }
}

.country-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px 20px; margin-top: 40px; }
.country-cell { display: flex; align-items: center; gap: 10px; font-size: 0.95rem; font-weight: 500; color: var(--color-text); border-top: 1px solid var(--color-line); padding-top: 14px; }
.country-cell .flag { font-size: 1.15rem; line-height: 1; flex-shrink: 0; }
@media (max-width: 900px) { .country-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 600px) { .country-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 380px) { .country-grid { grid-template-columns: 1fr; } }
/* Staggered entrance across the 5-wide row: a gentle left-to-right wave as
   the strip scrolls into view, rather than all ten flags popping at once. */
.country-grid .country-cell.reveal:nth-child(5n+1) { transition-delay: 0ms; }
.country-grid .country-cell.reveal:nth-child(5n+2) { transition-delay: 45ms; }
.country-grid .country-cell.reveal:nth-child(5n+3) { transition-delay: 90ms; }
.country-grid .country-cell.reveal:nth-child(5n+4) { transition-delay: 135ms; }
.country-grid .country-cell.reveal:nth-child(5n+5) { transition-delay: 180ms; }

/* ---------- Reusable dash list (also used by tab panels) ---------- */
.dash-list { list-style: none; padding: 0; margin: 0; }
.dash-list li { margin-bottom: 14px; padding-left: 18px; position: relative; color: var(--color-text-light); font-size: 0.95rem; }
.dash-list li::before { content: '—'; position: absolute; left: 0; color: var(--color-earth); }
.dash-list li strong { color: var(--color-text); }
.two-col-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 52px; margin-top: 8px; }
.two-col-grid h3 { margin-bottom: 16px; }
@media (max-width: 800px) { .two-col-grid { grid-template-columns: 1fr; } }
.mp-connector { display: block; }
@media (max-width: 800px) { .mp-connector { display: none; } }

/* ---------- Homepage "family intro" — crisp 50/50 editorial split (Sep 2026 rebuild) ----------
   Replaces the earlier absolutely-positioned photo + left-edge cream fade
   (which read as the image dissolving into the background) with an actual
   full-bleed 50/50 grid: a defined, premium split-screen with no overlay or
   fade over the photograph at any breakpoint — the image stays fully clear
   and vibrant. Page-scoped classes (not the shared .split-edge-section,
   which several Private Label sections already depend on) so this
   section's column ratio, spacing and text rhythm can be tuned
   independently. Text sits inside its own flex-centred column so the whole
   block balances vertically against the photo's height rather than
   crowding toward the top. */
.family-intro-section { padding-top: 0; padding-bottom: 0; }
.family-intro-grid {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  min-height: 660px;
}
.family-intro-text {
  display: flex;
  align-items: center;
  padding: 80px 56px 80px max(28px, calc((100vw - var(--max-width)) / 2));
}
.family-intro-text-inner { max-width: 440px; }
.family-intro-text-inner .eyebrow { margin-bottom: 18px; }
.family-intro-text-inner h2 {
  font-size: clamp(2.1rem, 3.4vw, 2.65rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--color-forest-dark);
  max-width: 15ch;
  margin-bottom: 28px;
}
.family-intro-text-inner p {
  color: var(--color-text-light);
  max-width: 42ch;
  margin-bottom: 20px;
}
.family-intro-text-inner p:last-of-type { margin-bottom: 0; }
.family-intro-ctas {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px 32px;
  margin-top: 36px;
}
.family-intro-media { position: relative; overflow: hidden; }
.family-intro-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform 800ms ease;
}
.family-intro-media:hover img { transform: scale(1.03); }
@media (prefers-reduced-motion: reduce) {
  .family-intro-media img { transition: none; }
}
@media (max-width: 1180px) and (min-width: 901px) {
  .family-intro-grid { min-height: 560px; }
  .family-intro-text { padding: 64px 40px 64px max(28px, calc((100vw - var(--max-width)) / 2)); }
  .family-intro-text-inner { max-width: 380px; }
}
@media (max-width: 900px) {
  .family-intro-grid { grid-template-columns: 1fr; min-height: 0; }
  .family-intro-text { padding: 48px 28px 40px; }
  .family-intro-text-inner { max-width: none; }
  .family-intro-text-inner h2 { max-width: none; }
  .family-intro-text-inner p { max-width: 60ch; }
  .family-intro-media { height: 340px; }
}
@media (max-width: 480px) {
  .family-intro-text { padding: 40px 22px 36px; }
  .family-intro-ctas { gap: 14px 24px; }
}

/* ---------- Image placeholder (spots left ready for images to be inserted in WordPress) ---------- */
.image-placeholder {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  width: 100%; min-height: 220px; background: var(--color-cream-dark);
  border: 1px dashed var(--color-earth); border-radius: var(--radius-md); text-align: center; padding: 24px;
}
.image-placeholder .ph-title { font-family: var(--font-body); font-weight: 600; font-size: 0.85rem; color: var(--color-earth); text-transform: uppercase; letter-spacing: 0.06em; }
.image-placeholder .ph-note { font-size: 0.78rem; color: var(--color-text-light); max-width: 32ch; }

/* ---------- Certifications / awards row ---------- */
.cert-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--color-forest-dark);
}
.cert-row span { margin-right: 14px; }
.cert-row span:not(:last-child)::after { content: '\2022'; margin-left: 14px; color: var(--color-earth); font-weight: 700; }

/* ---------- Why SUKO Nordic — stat strip ---------- */
.stat-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; }
.stat-strip .stat { border-left: 1px solid var(--color-line); padding-left: 28px; }
.stat-strip .stat:first-child { border-left: none; padding-left: 0; }
.stat-strip .stat-number { font-family: var(--font-heading); font-weight: 600; font-size: 1.9rem; color: var(--color-earth); line-height: 1.1; margin-bottom: 10px; letter-spacing: -0.02em; }
.stat-strip .stat-label { font-size: 0.88rem; color: var(--color-text-light); line-height: 1.5; }
@media (max-width: 900px) {
  .stat-strip { grid-template-columns: 1fr 1fr; row-gap: 28px; }
  .stat-strip .stat:nth-child(2n+1) { border-left: none; padding-left: 0; }
  .stat-strip .stat:nth-child(n+3) { border-left: none; border-top: 1px solid var(--color-line); padding-top: 24px; }
}
@media (max-width: 560px) {
  .stat-strip { grid-template-columns: 1fr; }
  .stat-strip .stat { border-left: none !important; padding-left: 0 !important; border-top: 1px solid var(--color-line); padding-top: 24px; }
  .stat-strip .stat:first-child { border-top: none; padding-top: 0; }
}

/* ---------- Certification badge tiles ---------- */
.badge-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.badge-tile { border: 1px solid var(--color-line); background: var(--color-white); border-radius: var(--radius-md); padding: 22px 20px; display: flex; align-items: flex-start; gap: 14px; transition: box-shadow var(--transition-base); }
.badge-tile:hover { box-shadow: var(--shadow-sm); }
.badge-tile .badge-icon { flex: 0 0 42px; width: 42px; height: 42px; border-radius: 50%; background: var(--color-forest-dark); color: var(--color-white); display: flex; align-items: center; justify-content: center; font-family: var(--font-heading); font-size: 0.92rem; font-weight: 600; letter-spacing: -0.02em; }
.badge-tile .badge-body h4 { margin: 0 0 4px; font-size: 0.94rem; font-family: var(--font-body); font-weight: 600; color: var(--color-forest-dark); }
.badge-tile .badge-body p { margin: 0; font-size: 0.82rem; color: var(--color-text-light); line-height: 1.4; }
@media (max-width: 900px) { .badge-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .badge-grid { grid-template-columns: 1fr; } }

/* ---------- Credential cards (certifications / trust — deliberate, calm premium presentation) ----------
   Sep 2026: was a fixed 6-column grid shared by a 3-card group and a
   6-card group, so the 3-card group rendered at 1/6 width each with a
   large empty gap to the right (live feedback: "quite narrow... a lot of
   unused space"). Now a 3-column grid throughout, so both groups fill
   completely and every card is larger, with bigger media, type and
   breathing room to match.
   Sep 2026 QA pass: de-boxed. This was a white bordered card with its own
   shadow sitting on the section's own bg-alt/cream background — a card
   inside a panel, i.e. one of the site's "double frame" cases the audit
   flagged. Dropped the white fill, border and shadow so the mark/photo
   sits directly on the page, kept only the thin rule between media and
   text (echoes the divider language used elsewhere, e.g. sf-trust-row),
   and moved the corner rounding onto the media itself so images still get
   the same soft corner treatment used sitewide. Hover is now a colour
   shift + gentle lift, no shadow escalation. */
.cred-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.cred-card { display: block; text-decoration: none; transition: transform 300ms ease, opacity var(--transition-slow); }
.cred-card:hover, .cred-card:focus-visible { transform: translateY(-3px); }
.cred-card-media { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--radius-md); background: var(--color-cream-dark); display: flex; align-items: center; justify-content: center; padding: 22px; }
.cred-card-media img { max-width: 78%; max-height: 78%; object-fit: contain; transition: transform 600ms ease; }
.cred-card-media.cred-card-media-photo { padding: 0; background: var(--color-cream-dark); }
.cred-card-media.cred-card-media-photo img { max-width: 100%; max-height: 100%; width: 100%; height: 100%; object-fit: cover; }
.cred-card:hover .cred-card-media img, .cred-card:focus-visible .cred-card-media img { transform: scale(1.045); }
.cred-card-media-mono { font-family: var(--font-heading); font-weight: 600; font-size: 1.5rem; color: var(--color-earth); }
.cred-card-body { padding: 18px 2px 0; border-top: 1px solid var(--color-line); }
.cred-card-body h4 { margin: 0 0 8px; font-size: 1.1rem; font-family: var(--font-body); font-weight: 600; color: var(--color-forest-dark); line-height: 1.25; transition: color 250ms ease; }
.cred-card:hover .cred-card-body h4, .cred-card:focus-visible .cred-card-body h4 { color: var(--color-earth); }
.cred-card-body p { margin: 0; font-size: 0.9rem; color: var(--color-text-light); line-height: 1.5; }
@media (max-width: 900px) { .cred-grid { grid-template-columns: 1fr 1fr; gap: 18px 22px; } }
@media (max-width: 560px) { .cred-grid { grid-template-columns: 1fr; gap: 28px; } .cred-card-media { aspect-ratio: 4 / 3; } }
/* Staggered entrance across the row. */
.cred-grid .cred-card.reveal:nth-child(1) { transition-delay: 0ms; }
.cred-grid .cred-card.reveal:nth-child(2) { transition-delay: 60ms; }
.cred-grid .cred-card.reveal:nth-child(3) { transition-delay: 120ms; }
.cred-grid .cred-card.reveal:nth-child(4) { transition-delay: 180ms; }
.cred-grid .cred-card.reveal:nth-child(5) { transition-delay: 240ms; }
.cred-grid .cred-card.reveal:nth-child(6) { transition-delay: 300ms; }
@media (prefers-reduced-motion: reduce) {
  .cred-card, .cred-card-media img, .cred-card-body h4 { transition: none; }
}

/* ---------- Quality & Recognition (formats-accreditation.html) — three
   distinct groups (independent certification, SUKO Nordic's own
   standards, further recognition), each with its own eyebrow + heading,
   and the small category label on each card that says what KIND of mark
   it is (independent certification, internal quality approach,
   verification method, product attribute...), never letting an internal
   standard read as a third-party certificate. The literal "Group 1/2/3 ·"
   numbering used until Sep 2026 was dropped from the eyebrow text (kept
   here only as this comment's own label) — the qr-group/qr-group-head
   structure below is unchanged. ---------- */
/* Rettelse (Sep 29 2026, artifact comment: "lidt mere afstand mellem de to
   nederste stempler og further recognition"): 56px read as too tight
   between the last row of stamp cards and the next group's heading;
   bumped to match the site's standard 88px section rhythm.
   Rettelse (Sep 29 2026, artifact comment: "lidt tydeligere overgang"):
   pure whitespace still read as ambiguous (is this one long list or two
   groups?), so a thin hairline — the same .hairline-top treatment used for
   section breaks elsewhere on the site — now sits roughly in the middle of
   that gap, splitting it into two visually distinct steps (28px down to
   the line, then 32px more which the line's own spacing continues via
   padding-top) instead of one undifferentiated 88px space.
   Rettelse (Sep 29 2026, artifact comment: "lidt skarpere skillelinje"):
   the standard --color-line hairline (#E4DECE) reads as too faint against
   the cream background for a divider meant to be noticed; bumped to 2px
   and swapped to the site's muted-grey body-text color, which reads as a
   clearly deliberate rule rather than a barely-visible edge. */
.qr-group + .qr-group { margin-top: 56px; padding-top: 32px; border-top: 2px solid var(--color-text-light); }
.qr-group-head { max-width: 720px; margin-bottom: 24px; }
.qr-group-head h2 { font-size: clamp(1.4rem, 2.2vw, 1.8rem); margin: 4px 0 10px; }
.qr-group-head p { margin: 0; }
.cred-card-category {
  display: block;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--color-earth);
  margin-bottom: 6px;
}

/* Recognition feature (Børsen Gazelle 2017) nested inside the "Further
   Recognition" group, Sep 2026: was its own separate bg-alt section
   further down the page; now lives inside the same certifications
   container as the other two groups, immediately under its group head,
   so all three groups + their evidence read as one continuous, easy-to-
   scan block instead of interrupted sections. The gold Gazelle badge
   (already used in the footer) is layered onto the diploma photo here
   for a more visual, less document-only presentation. */
/* Sep 2026 QA pass: this sat on the section's own bg-alt background, so
   the white bordered/shadowed panel plus the diploma photo's own
   drop-shadow was three layers of framing stacked on top of each other.
   Dropped the outer card entirely — the photo's own naturalistic shadow
   (same treatment as the award seal on this page's hero) is enough to
   lift the diploma off the page. */
.qr-recognition-feature { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 48px; align-items: center; }
.qr-recognition-media { position: relative; max-width: 300px; margin: 0 auto; }
.qr-recognition-media img:first-child { width: 100%; height: auto; border-radius: 10px; box-shadow: 0 10px 28px rgba(26,20,10,0.1); display: block; }
.qr-recognition-badge { position: absolute; bottom: -18px; right: -18px; width: 84px; height: auto; filter: drop-shadow(0 6px 14px rgba(26,20,10,0.18)); }
.qr-recognition-text h3 { font-size: clamp(1.4rem, 2.2vw, 1.8rem); margin: 0 0 14px; }
@media (max-width: 760px) {
  .qr-recognition-feature { grid-template-columns: 1fr; gap: 28px; text-align: center; }
  .qr-recognition-media { order: -1; }
  .qr-recognition-text { text-align: left; }
}

/* ---------- Country strip (single-row scrollable) ---------- */
.country-strip-wrap { position: relative; margin-top: 20px; }
.country-strip { display: flex; gap: 10px; flex-wrap: wrap; }
.country-chip { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; background: var(--color-white); border: 1px solid var(--color-line); border-radius: 999px; padding: 8px 16px 8px 12px; font-size: 0.83rem; font-weight: 500; color: var(--color-text); letter-spacing: 0.01em; }
.country-chip .flag { font-size: 1.02rem; line-height: 1; }

/* ---------- Awards & Recognition ----------
   .awards-block: not referenced by any page's markup (superseded by
   .award-feature-panel below well before this Sep 2026 redesign) — left
   in place, unused, per this codebase's convention of marking dead CSS
   rather than deleting it. */
.awards-block { display: flex; gap: 26px; align-items: center; border: 1px solid var(--color-line); background: var(--color-cream-dark); border-radius: var(--radius-md); padding: 32px; }
.awards-block .award-ribbon { flex: 0 0 60px; width: 60px; height: 60px; border-radius: 50%; background: var(--color-earth); color: var(--color-white); display: flex; align-items: center; justify-content: center; font-size: 1.5rem; }
.awards-block .award-body h3 { margin: 0 0 6px; }
.awards-block .award-body p { margin: 0; color: var(--color-text-light); font-size: 0.94rem; max-width: 62ch; }
@media (max-width: 640px) { .awards-block { flex-direction: column; align-items: flex-start; } }

/* ---------- Award feature panel: Product of the Year, 2014 (large,
   full-bleed) ----------
   Redesigned Sep 2026 (live feedback: bring the award "much closer to
   the top" with "a more prominent, beautiful presentation" and make it
   "immediately clear what received the recognition, who gave it and
   when"). Previously a centered text block with the seal absolutely
   positioned in the top-right corner at a modest 140px. Now a two-column
   media + copy layout: the seal shown large on the left, a "record"-style
   3-field row (Recognition / Awarded By / Year) for the what/who/when at
   a glance — the same labelled-field pattern used for the .dna-hero-record
   card elsewhere on the site, adapted here in light-on-dark for this
   panel's full-bleed earth-purple background. */
.award-feature-panel {
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  background: var(--color-earth);
  padding: 76px 0;
}
.award-feature-inner { max-width: var(--max-width); margin: 0 auto; padding: 0 28px; display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 56px; align-items: center; }
.award-feature-media { display: flex; justify-content: center; }
/* Rettelse (Sep 29 2026, client feedback): the seal graphic is already
   its own rounded, white, black-outlined sticker — sitting it inside a
   SECOND plain white rounded box just doubled the framing and read as a
   card dropped onto the purple, disconnected from everything around it.
   Dropped that outer box entirely. In its place: a soft circular glow
   behind the seal (so it still lifts off the flat purple, but as light
   rather than as a container), a naturalistic drop-shadow that follows
   the sticker's own rounded silhouette instead of a rectangle, and a
   small caption underneath that ties the image to the copy typographically
   instead of via a shared box. */
.award-feature-seal-frame { position: relative; display: inline-flex; flex-direction: column; align-items: center; }
.award-feature-seal-frame::before {
  content: ''; position: absolute; top: 50%; left: 50%; width: 150%; height: 150%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0.06) 46%, rgba(255,255,255,0) 72%);
  border-radius: 50%; z-index: 0;
}
.award-feature-seal-lg { position: relative; z-index: 1; width: 100%; max-width: 290px; height: auto; filter: drop-shadow(0 20px 32px rgba(0,0,0,0.32)); }
.award-feature-seal-caption { position: relative; z-index: 1; display: block; margin-top: 20px; font-size: 0.74rem; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; color: rgba(255,255,255,0.55); text-align: center; }
.award-feature-copy .eyebrow { color: var(--color-shop-orange); font-size: 0.88rem; margin-bottom: 0; }
.award-feature-copy h2 { color: #fff; font-size: clamp(2.1rem, 4vw, 3rem); margin: 12px 0 18px; font-weight: 600; }
.award-feature-lead { color: rgba(255,255,255,0.9); font-size: 1.08rem; line-height: 1.6; margin: 0 0 28px; }
.award-feature-fields { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px 24px; border-top: 1px solid rgba(255,255,255,0.18); border-bottom: 1px solid rgba(255,255,255,0.18); padding: 20px 0; margin-bottom: 26px; }
.award-feature-field-label { display: block; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255,255,255,0.6); margin-bottom: 6px; }
.award-feature-field-value { display: block; font-family: var(--font-heading); font-weight: 700; font-size: 1.05rem; color: #fff; line-height: 1.3; }
.award-feature-support { color: rgba(255,255,255,0.72); font-size: 0.92rem; line-height: 1.6; margin: 0; }
@media (max-width: 860px) {
  .award-feature-inner { grid-template-columns: 1fr; text-align: center; gap: 32px; }
  .award-feature-media { order: -1; }
  .award-feature-seal-lg { max-width: 210px; }
  .award-feature-fields { grid-template-columns: 1fr; text-align: left; }
}

/* ---------- Product packshots (real cutout photos) ---------- */
.card-photo { width: 100%; height: 170px; object-fit: contain; background: var(--color-white); border: 1px solid var(--color-line); border-radius: var(--radius-sm); padding: 14px; box-sizing: border-box; margin-bottom: 18px; }
.product-shot { width: 100%; height: 320px; object-fit: contain; background: var(--color-white); border: 1px solid var(--color-line); border-radius: var(--radius-sm); padding: 28px; box-sizing: border-box; }
@media (max-width: 900px) { .product-shot { height: 260px; } }

/* ---------- Story / three pillars ---------- */
.story-grid { display: grid; grid-template-columns: 1fr 0.9fr; gap: 60px; align-items: center; }
.pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 40px; padding-top: 28px; border-top: 1px solid var(--color-line); }
.pillar .pillar-num { font-family: var(--font-heading); font-weight: 600; font-size: 1.4rem; color: var(--color-earth); }
.pillar p { margin: 4px 0 0; font-size: 0.9rem; color: var(--color-text-light); }
@media (max-width: 900px) { .story-grid { grid-template-columns: 1fr; } }
.ap4-connector { display: block; }
@media (max-width: 900px) { .ap4-connector { display: none; } }

/* ---------- Timeline (used on About page) ---------- */
.timeline { border-top: 1px solid var(--color-line); margin-top: 36px; }
.timeline-item { display: grid; grid-template-columns: 120px 1fr; gap: 24px; padding: 22px 0; border-bottom: 1px solid var(--color-line); }
.timeline-item .year { font-family: var(--font-heading); font-weight: 600; color: var(--color-earth); font-size: 1.05rem; }
@media (max-width: 620px) { .timeline-item { grid-template-columns: 1fr; gap: 6px; } }
.timeline .timeline-item.reveal:nth-child(1) { transition-delay: 0ms; }
.timeline .timeline-item.reveal:nth-child(2) { transition-delay: 70ms; }
.timeline .timeline-item.reveal:nth-child(3) { transition-delay: 140ms; }
.timeline .timeline-item.reveal:nth-child(4) { transition-delay: 210ms; }

/* ---------- Tabs (used on Home for a quick Private Label / Own Brand compare) ---------- */
.tabs { display: flex; gap: 32px; margin-bottom: 40px; border-bottom: 1px solid var(--color-line); }
.tab-btn {
  background: none;
  border: none;
  color: var(--color-text-light);
  padding: 0 0 14px;
  font-weight: 600;
  cursor: pointer;
  font-size: 1rem;
  font-family: var(--font-body);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color var(--transition-base), border-color var(--transition-base);
}
.tab-btn.active { color: var(--color-forest-dark); border-bottom-color: var(--color-forest-dark); }
.tab-panel { display: none; }
.tab-panel.active { display: grid; grid-template-columns: 1fr 1fr; gap: 52px; align-items: start; }
.tab-panel ul { list-style: none; padding: 0; }
.tab-panel li { margin-bottom: 14px; padding-left: 18px; position: relative; color: var(--color-text-light); font-size: 0.95rem; }
.tab-panel li::before { content: '—'; position: absolute; left: 0; color: var(--color-earth); }
.tab-panel li strong { color: var(--color-text); }
.tab-panel .btn { margin-top: 24px; }
@media (max-width: 900px) { .tab-panel.active { grid-template-columns: 1fr; } }

/* ---------- Markets ---------- */
.markets-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 28px; }
.market-card { border-top: 2px solid var(--color-earth); padding-top: 18px; }
.market-card h3 { font-size: 0.98rem; }
.market-card p { font-size: 0.85rem; color: var(--color-text-light); margin: 0; }
@media (max-width: 1000px) { .markets-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 620px) { .markets-grid { grid-template-columns: 1fr 1fr; } }

/* ---------- Process timeline ---------- */
/* "From Source to Shelf" (formats-accreditation.html), redesigned Sep
   2026 from four plain text columns into a connected visual journey:
   a thin gradient line runs behind an icon "node" for each stage, each
   node tinted a step further along the earth-purple-to-shop-orange
   gradient so the four stages read as one continuous progression rather
   than four unrelated facts. .step-num (the old plain numeral) is no
   longer used in the markup — replaced by .process-step-icon — and is
   left below as dead code rather than deleted. */
.process-track { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; position: relative; text-align: center; }
.process-track::before {
  content: '';
  position: absolute;
  top: 23px;
  left: 12.5%;
  right: 12.5%;
  height: 2px;
  background: linear-gradient(to right, var(--color-earth), var(--color-shop-orange));
  opacity: 0.3;
  z-index: 0;
}
.process-step { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; padding-top: 0; border-top: none; }
.process-step-icon {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--color-cream);
  box-shadow: 0 0 0 6px var(--color-cream);
  border: 2px solid var(--color-earth);
  color: var(--color-earth);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
}
.process-step-icon svg { width: 22px; height: 22px; }
.process-step:nth-child(1) .process-step-icon { border-color: #302B75; color: #302B75; }
.process-step:nth-child(2) .process-step-icon { border-color: #74484E; color: #74484E; }
.process-step:nth-child(3) .process-step-icon { border-color: #B96428; color: #B96428; }
.process-step:nth-child(4) .process-step-icon { border-color: var(--color-shop-orange); color: var(--color-shop-orange); }
.process-step h3 { font-size: 1.05rem; margin-bottom: 8px; }
.process-step .step-num { font-family: var(--font-heading); font-weight: 600; font-size: 1.5rem; color: var(--color-earth); margin-bottom: 10px; }
@media (max-width: 900px) {
  .process-track { grid-template-columns: 1fr 1fr; }
  .process-track::before { display: none; }
}
@media (max-width: 560px) { .process-track { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .process-track::before { transition: none; } }

/* ---------- Ingredients ---------- */
.ingredients-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.ingredient-card { background: var(--color-white); border: 1px solid var(--color-line); border-radius: var(--radius-md); padding: 0; overflow: hidden; box-shadow: var(--shadow-sm); }
.ingredient-card figure.photo { border-radius: 0; }
.ingredient-card figure.photo-placeholder { min-height: 180px; border-radius: 0; }
.ingredient-card .body { padding: 20px 20px 22px; }
@media (max-width: 800px) { .ingredients-grid { grid-template-columns: 1fr; } }

/* ---------- News ---------- */
.news-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.news-card figure.photo-placeholder { min-height: 150px; }
.news-card .body { padding-top: 18px; }
.news-card .date { font-size: 0.75rem; color: var(--color-earth); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; }
@media (max-width: 900px) { .news-grid { grid-template-columns: 1fr; } }

/* ---------- CTA ---------- */
/* Sep 2026 QA pass: .cta itself never overrode its default 88px top
   padding, which on several pages stacked with a preceding section's own
   un-overridden bottom padding for a large gap before this closing panel. */
.cta { text-align: center; padding-top: 40px; }
.cta h2 { font-size: clamp(1.4rem, 2.1vw, 1.75rem); }
.cta .cta-buttons { display: flex; gap: 14px; justify-content: center; align-items: center; flex-wrap: wrap; margin-top: 28px; }
.cta .cta-buttons .btn { padding: 13px 28px; font-size: 0.9rem; }
.cta .cta-buttons .btn-outline.btn-sm { padding: 10px 22px; font-size: 0.82rem; }
.cta .contact-line { margin-top: 22px; font-size: 0.88rem; color: var(--color-text-light); }
.cta .contact-line a { color: inherit; text-decoration: underline; text-underline-offset: 3px; font-weight: 600; }

/* ---------- Footer ---------- */
footer { background: var(--color-forest-dark); color: var(--color-footer-text); padding: 72px 0 28px; }

/* Two top-level tracks: the brand block, and a nav wrapper holding the three
   link groups as its own equal-width sub-grid. Nesting it this way (rather
   than four flat columns) lets the brand column keep the 1.4fr it always
   had while the group of nav columns can restack as a unit on narrower
   screens without disturbing the brand column's own layout. */
.footer-grid { display: grid; grid-template-columns: 1.4fr 3fr; gap: 40px; margin-bottom: 48px; align-items: start; }
.footer-brand { max-width: 320px; }
.footer-desc { margin: 16px 0 0; font-size: 0.9rem; line-height: 1.65; color: var(--color-footer-muted); max-width: 30ch; }

.footer-nav-groups { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }
.footer-nav-groups > div { min-width: 0; } /* let long strain names wrap inside their own track instead of overflowing it */

footer h4 { color: var(--color-white); font-family: var(--font-body); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; margin: 0 0 18px; }
footer ul { list-style: none; padding: 0; margin: 0; }
footer li { margin-bottom: 12px; font-size: 0.9rem; line-height: 1.5; }
footer li:last-child { margin-bottom: 0; }

footer a,
.footer-link {
  text-decoration: none;
  text-decoration-color: transparent;
  text-underline-offset: 3px;
  color: var(--color-footer-text);
  transition: color var(--transition-base), text-decoration-color var(--transition-base);
  overflow-wrap: break-word;
}
footer a:hover,
.footer-link:hover,
footer a:focus-visible,
.footer-link:focus-visible {
  color: var(--color-white);
  text-decoration: underline;
  text-decoration-color: var(--color-shop-orange);
}
footer a:focus-visible,
.footer-link:focus-visible {
  outline: 2px solid rgba(255,255,255,0.85);
  outline-offset: 3px;
  border-radius: 2px;
}

.footer-bottom {
  border-top: 1px solid var(--color-line-dark);
  padding-top: 24px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 0.8rem;
  color: var(--color-footer-muted);
}
.footer-wordmark {
  text-align: center;
  margin: 4px 0 40px;
  user-select: none;
}
.footer-wordmark img { width: clamp(160px, 13vw, 240px); height: auto; display: inline-block; }
.footer-wordmark .footer-wordmark-dot { color: var(--color-shop-orange); padding: 0 0.12em; }

@media (max-width: 900px) {
  .footer-grid { grid-template-columns: 1fr; }
  .footer-brand { max-width: none; }
  .footer-desc { max-width: 46ch; }
  .footer-nav-groups { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 700px) { .footer-wordmark { margin-bottom: 32px; } .footer-wordmark img { width: clamp(140px, 38vw, 200px); } }
@media (max-width: 560px) {
  .footer-nav-groups { grid-template-columns: 1fr; gap: 32px; }
  .footer-nav-groups > div + div { padding-top: 24px; border-top: 1px solid var(--color-line-dark); }
  footer li { margin-bottom: 14px; }
}

/* ---------- Footer trust / certification row (Børsen Gazelle + Inspection Report) ----------
   Deliberate premium trust elements: both logos share a common visual
   weight (same box height) so neither reads as secondary or decorative. */
.footer-cert-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 28px;
  margin-top: 40px;
  padding-top: 32px;
  padding-bottom: 36px;
  border-top: 1px solid var(--color-line-dark);
}
.footer-cert-item {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 96px;
  padding: 12px 22px;
  background: var(--color-white);
  border-radius: var(--radius-md);
  flex: 0 0 auto;
}
.footer-cert-item img { height: 100%; width: auto; max-width: 220px; object-fit: contain; display: block; }
/* The Inspection Report artwork is black line art on a transparent ground —
   invert it to white so it stays legible frameless on the dark footer. */
.footer-cert-item img.invert-on-dark { filter: invert(1) brightness(1.35); }
/* Keyboard focus ring sits outside the white card itself, so it never
   touches or alters the Gazelle/Inspection Report artwork inside it. */
.footer-cert-item:focus-visible {
  outline: 2px solid rgba(255,255,255,0.9);
  outline-offset: 4px;
  border-radius: calc(var(--radius-md) + 2px);
}
@media (max-width: 560px) {
  .footer-cert-row { gap: 18px; }
  .footer-cert-item { height: 76px; padding: 10px 16px; }
}

/* ---------- Diploma Lightbox (view the Gazelle award certificate inline) ---------- */
.lightbox-overlay {
  position: fixed;
  inset: 0;
  z-index: 999;
  background: rgba(20,19,17,0.86);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px;
}
.lightbox-overlay[hidden] { display: none; }
.lightbox-overlay img {
  max-width: min(720px, 100%);
  max-height: 88vh;
  width: auto;
  height: auto;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  background: var(--color-white);
  display: block;
}
.lightbox-close {
  position: absolute;
  top: 24px;
  right: 28px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,0.12);
  color: #fff;
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--transition-base);
}
.lightbox-close:hover { background: rgba(255,255,255,0.24); }

/* ---------- Trust Badge Strip ---------- */
.trust-badge-strip {
  display: flex;
  align-items: center;
  gap: 26px;
  background: var(--color-earth);
  border-radius: var(--radius-lg);
  padding: 26px 30px;
  margin: 44px 0;
  color: var(--color-white);
  box-shadow: var(--shadow-md);
}
.trust-badge-strip-icons { display: flex; gap: 20px; flex-shrink: 0; }
.trust-icon-box { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 9px; flex-shrink: 0; }
.trust-icon-box svg { width: 32px; height: 32px; color: var(--color-shop-orange); }
.trust-icon-box span {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  line-height: 1.3;
  color: var(--color-white);
}
.trust-badge-strip-divider { width: 1px; align-self: stretch; background: rgba(255,255,255,0.2); flex-shrink: 0; }
.trust-badge-strip-checks { display: flex; flex-wrap: wrap; gap: 10px 16px; flex: 1; }
.trust-check { display: flex; align-items: center; gap: 7px; font-size: 0.82rem; font-weight: 500; color: var(--color-white); white-space: nowrap; }
.check-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--color-shop-orange);
  flex-shrink: 0;
}
.check-badge svg { width: 10px; height: 10px; }
@media (max-width: 900px) {
  .trust-badge-strip { flex-direction: column; align-items: stretch; gap: 24px; padding: 26px 28px; }
  .trust-badge-strip-icons { justify-content: center; }
  .trust-badge-strip-divider { width: 100%; height: 1px; }
  .trust-badge-strip-checks { justify-content: center; text-align: left; }
}
@media (max-width: 480px) {
  .trust-badge-strip-icons { gap: 20px; }
  .trust-badge-strip-checks { gap: 12px 22px; }
}

/* ---------- SUKOFLEX® attributes feature (formats-accreditation.html),
   Sep 2026: adds a real product packshot (both the powder jar and the
   capsule bottle) beside the attribute list, so "the products being
   shown" is literally true — previously this was a text-only label plus
   the shared .trust-badge-strip checks with no product image at all. The
   label below replaces the old centered .qr-attrs-label (kept as the same
   class name, restyled left-aligned to fit this new side-by-side layout;
   no other page uses .qr-attrs-label, so nothing else is affected). */
.qr-attrs-feature { display: grid; grid-template-columns: 0.55fr 1.45fr; gap: 40px; align-items: center; margin: 44px 0; }
.qr-attrs-feature-media { display: flex; justify-content: center; }
.qr-attrs-feature-media img { width: 100%; max-width: 260px; height: auto; }
.qr-attrs-feature-body .trust-badge-strip { margin: 0; }
.qr-attrs-label {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-earth);
  margin: 0 0 14px;
}
@media (max-width: 760px) {
  .qr-attrs-feature { grid-template-columns: 1fr; text-align: center; gap: 20px; }
  .qr-attrs-label { text-align: center; }
}

/* ---------- Final conversion section (Private Label only) — a single calm,
   editorial close: a restrained product-attributes line above a two-column
   CTA (heading left, copy + buttons right, thin divider between), replacing
   the old purple attribute bar, purple wholesale banner and duplicated CTA
   buttons that used to occupy this spot. Scoped entirely to .pl-final so it
   never touches the shared .cta / .trust-badge-strip rules used elsewhere
   on the site. ---------- */
/* Sep 2026 QA pass: .pl-formats-section trims its own bottom to 72px, but
   this section had no top override, so the default 88px stacked on top of
   that for a ~160px gap — the largest on this page. */
.pl-final { padding-top: 40px; background: var(--color-cream); }

.pl-final-attrs { text-align: center; max-width: 760px; margin: 0 auto 64px; }
.pl-final-attrs-label {
  display: block;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-earth);
  margin-bottom: 16px;
}
.pl-final-attrs-list {
  margin: 0;
  font-size: 0.92rem;
  line-height: 2;
  color: var(--color-text-light);
  letter-spacing: 0.01em;
}
.pl-final-attr-sep { color: var(--color-shop-orange); font-weight: 700; }

.pl-final-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) 1px minmax(0, 1.15fr);
  gap: 56px;
  align-items: center;
}
.pl-final-divider { background: rgba(48, 43, 117, 0.18); align-self: stretch; }
.pl-final-col-left h2 { font-size: clamp(1.9rem, 3.2vw, 2.5rem); max-width: 360px; }
.pl-final-col-right p:first-child { color: var(--color-text-light); max-width: 420px; }
.pl-final-primary-cta { margin: 26px 0 14px; }
.pl-final-wholesale { margin: 0 0 20px; font-size: 0.92rem; }
.pl-final .contact-line { font-size: 0.88rem; color: var(--color-text-light); margin: 0; }
.pl-final .contact-line a { color: inherit; text-decoration: underline; text-underline-offset: 3px; font-weight: 600; }

.pl-final-attrs.reveal { transition-delay: 0ms; }
.pl-final-col-left.reveal { transition-delay: 90ms; }
.pl-final-col-right.reveal { transition-delay: 170ms; }

@media (max-width: 760px) {
  .pl-final-grid { grid-template-columns: 1fr; gap: 8px; }
  .pl-final-divider { display: none; }
  .pl-final-col-left h2, .pl-final-col-right p:first-child { max-width: none; }
  .pl-final-col-left { margin-bottom: 22px; }
}

/* ---------- Flexible Formats (Private Label) — a calm editorial product
   comparison: a full-bleed, tightly-cropped product photo (edge to edge,
   no card) split into two independently-hoverable halves, followed by two
   plain text columns with a hairline above and a thin divider between.
   Replaces the old rounded photo card + two white info cards. ---------- */
.pl-formats-section { background: var(--color-cream); padding-bottom: 72px; }
.pl-formats-section .section-head { margin-bottom: 40px; }

.pl-formats-media {
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  aspect-ratio: 16 / 7;
  display: flex;
  overflow: hidden;
  margin-top: 8px;
  margin-bottom: 48px;
}
.pl-formats-media-half { position: relative; width: 50%; height: 100%; overflow: hidden; }
.pl-formats-media-half img {
  position: absolute;
  top: 0;
  width: 200%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  transition: transform 500ms ease;
}
.pl-formats-media-powder img { left: 0; object-position: left center; }
.pl-formats-media-capsule img { right: 0; object-position: right center; }
.pl-formats-media.is-hover-powder .pl-formats-media-powder img { transform: scale(1.015); }
.pl-formats-media.is-hover-capsule .pl-formats-media-capsule img { transform: scale(1.015); }
@media (prefers-reduced-motion: reduce) {
  .pl-formats-media-half img { transition: none; }
}

.pl-formats-cols {
  display: grid;
  grid-template-columns: 1fr 1px 1fr;
  gap: 48px;
  border-top: 1px solid var(--color-line);
  padding-top: 36px;
}
.pl-formats-col-divider { background: rgba(48, 43, 117, 0.18); }
.pl-formats-num {
  display: block;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.2rem;
  letter-spacing: 0.04em;
  color: var(--color-earth);
  font-variant-numeric: tabular-nums;
  margin-bottom: 12px;
  transition: transform var(--transition-base);
}
.pl-formats-col h3 {
  margin-bottom: 8px;
  transition: color 300ms ease;
}
.pl-formats-col p {
  color: var(--color-text-light);
  margin: 0;
  transition: transform 300ms ease;
}
.pl-formats-cta { margin: 36px 0 0; text-align: center; }

.pl-formats-cols .pl-formats-col.reveal:nth-child(1) { transition-delay: 60ms; }
.pl-formats-cols .pl-formats-col.reveal:nth-child(3) { transition-delay: 130ms; }

/* Premium hover/focus interaction — desktop pointer devices and keyboard
   only. A quiet lift, a pale-indigo wash, a thin accent line and a nudge on
   the heading colour: enough to feel considered without turning these into
   ecommerce product cards (no bounce, no glow, nothing continuous). Scoped
   to (hover:hover) and (pointer:fine) so touch/mobile never triggers a
   sticky "hover" state; :focus-visible works everywhere so keyboard users
   get the identical treatment. */
.pl-formats-col {
  position: relative;
  padding: 20px 24px;
  margin: -20px -24px;
  border-radius: var(--radius-md);
  background: transparent;
  box-shadow: none;
}
.pl-formats-col::before {
  content: "";
  position: absolute;
  top: 0;
  left: 24px;
  right: 24px;
  height: 2px;
  background: var(--color-earth);
  transform: scaleX(0);
  transform-origin: left;
  opacity: 0;
}
@media (hover: hover) and (pointer: fine) {
  .pl-formats-col {
    transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1), background-color 300ms ease, box-shadow 300ms ease;
  }
  .pl-formats-col::before {
    transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1), opacity 300ms ease;
  }
  .pl-formats-cols:hover .pl-formats-col:not(:hover),
  .pl-formats-cols:focus-within .pl-formats-col:not(:focus-visible) {
    opacity: 0.87;
  }
  .pl-formats-col:hover,
  .pl-formats-col:focus-visible {
    transform: translateY(-5px);
    background: var(--color-announce-bg);
    box-shadow: var(--shadow-md);
    opacity: 1;
    outline: none;
  }
  .pl-formats-col:hover::before,
  .pl-formats-col:focus-visible::before {
    transform: scaleX(1);
    opacity: 1;
  }
  .pl-formats-col:hover .pl-formats-num,
  .pl-formats-col:focus-visible .pl-formats-num {
    transform: translateY(-2px);
  }
  .pl-formats-col:hover h3,
  .pl-formats-col:focus-visible h3 {
    color: var(--color-earth);
  }
  .pl-formats-col:hover p,
  .pl-formats-col:focus-visible p {
    transform: translateY(-2px);
  }
}
.pl-formats-col:focus-visible {
  outline: 2px solid var(--color-earth);
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  .pl-formats-col,
  .pl-formats-col::before,
  .pl-formats-num,
  .pl-formats-col p {
    transition: none !important;
  }
}

@media (max-width: 760px) {
  /* Same left/right split as desktop (each half is already cropped to its
     own product with generous margin), just a taller ratio so each product
     still reads clearly at narrow widths — both stay fully visible either way. */
  .pl-formats-media { aspect-ratio: 5 / 4; }
  .pl-formats-cols { grid-template-columns: 1fr; gap: 0; }
  .pl-formats-col-divider { display: none; }
  .pl-formats-col {
    padding: 22px 0;
    margin: 0;
    border-radius: 0;
    border-bottom: 1px solid var(--color-line);
  }
  .pl-formats-col::before { display: none; }
  .pl-formats-col:first-child { padding-top: 0; }
  .pl-formats-col:last-child { border-bottom: none; }
}

/* ---------- Format badges (Powder / Capsule callouts over product photos) ---------- */
.format-badge-wrap { position: relative; }
.format-badge {
  position: absolute;
  top: 16px;
  display: flex;
  align-items: center;
  gap: 7px;
  background: var(--color-earth);
  color: #fff;
  padding: 9px 15px 9px 13px;
  border-radius: 999px;
  box-shadow: var(--shadow-md);
  font-size: 0.83rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.format-badge svg { width: 15px; height: 15px; flex-shrink: 0; }
.format-badge.left { left: 16px; }
.format-badge.right { right: 16px; }
.format-caption { text-align: center; margin-top: 18px; }
.format-caption h4 { font-family: var(--font-heading); font-weight: 600; font-size: 1.1rem; margin: 0 0 6px; }
.format-caption p { font-size: 0.9rem; color: var(--color-text-light); margin: 0; }
@media (max-width: 700px) {
  .format-badge { padding: 8px 13px 8px 11px; font-size: 0.76rem; gap: 5px; top: 12px; }
  .format-badge.left { left: 12px; }
  .format-badge.right { right: 12px; }
  .format-badge svg { width: 13px; height: 13px; }
}

/* ==================================================================
   MaquiPro® — "The Formulation" through the closing wholesale CTA
   (Sep 2026 redesign). Replaces the old .formulation-*/.mp-status-line/
   .mp-pathway-link rules, which were page-specific to maquipro.html
   (confirmed via grep) and are fully superseded below.
   ================================================================== */

/* ---------- Formulation equation: redesigned (Sep 28) to drop the boxed-
   card treatment entirely — no outer white frame/border, no per-panel
   white background. The three components now sit directly on this
   section's own .bg-alt background; the thin vertical divider lines that
   already flanked the +/= symbols are what separates them, doing double
   duty as "thin lines instead of frames" without adding new dividers.
   Each panel gets a small circular icon badge above its label, styled
   like the existing +/= symbol circles for a consistent visual language.
   nth-child transition-delays below stagger the reveal left to right
   (component → plus → component → equals → result) instead of all five
   firing at once. ---------- */
/* Rettelse (Sep 28): tightened the vertical air around the diagram —
   this section now uses its own smaller mp-formula-section padding
   (below), the frame's top margin and each panel's own padding are
   reduced slightly too, so the diagram reads more compact. */
.mp-formula-section { padding: 72px 0; }
/* Deep-purple feature panel (Sep 28, cohesion pass) — same recipe as
   .mp-cta-panel / .am-transition-panel / .am-journey-panel elsewhere on
   the site: var(--color-earth) background, 28px radius, generous padding,
   orange eyebrow, white heading. Everything that used to sit directly on
   the section's own bg-alt tint now lives inside this panel instead. */
.mp-formula-panel-wrap { background: var(--color-earth); border-radius: 28px; padding: 64px 56px; }
.mp-formula-panel-wrap .eyebrow { color: var(--color-shop-orange); }
.mp-formula-panel-wrap h2 { color: #fff; }
.mp-formula-frame { margin-top: 44px; }
.mp-formula-grid { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; align-items: stretch; }
.mp-formula-panel {
  min-width: 0; padding: 32px 30px; display: flex; flex-direction: column; justify-content: center;
  color: #fff;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 18px;
}
.mp-formula-icon {
  width: 44px; height: 44px; margin-bottom: 16px;
  border-radius: 50%;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.22);
  display: flex; align-items: center; justify-content: center;
  color: var(--color-shop-orange);
}
.mp-formula-icon svg { width: 22px; height: 22px; }
.mp-formula-label { display: block; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; margin-bottom: 14px; color: rgba(255,255,255,0.6); }
.mp-formula-panel h3 { font-family: var(--font-heading); font-weight: 600; font-size: 1.15rem; line-height: 1.3; margin: 0 0 12px; color: #fff; }
.mp-formula-panel--result { background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.28); }
.mp-formula-panel--result h3 { color: var(--color-shop-orange); font-size: 1.3rem; }
.mp-formula-strain-name { font-weight: 600; color: #fff; font-size: 0.95rem; margin: -2px 0 0; }
.mp-formula-panel p { font-size: 0.88rem; line-height: 1.6; margin: 0; max-width: 32ch; color: rgba(255,255,255,0.74); }
.mp-formula-symbol { display: flex; align-items: center; justify-content: center; padding: 0 8px; position: relative; }
.mp-formula-symbol::before, .mp-formula-symbol::after { content: ''; position: absolute; top: 22%; bottom: 22%; width: 1px; background: rgba(255,255,255,0.18); }
.mp-formula-symbol::before { left: 0; }
.mp-formula-symbol::after { right: 0; }
.mp-formula-symbol span {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--color-earth);
  border: 1px solid rgba(255,255,255,0.3);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-heading); font-weight: 600; font-size: 1.1rem;
  color: var(--color-shop-orange);
  position: relative; z-index: 1;
}
/* Converging entrance (Sep 28, cohesion pass): "subtle animation that
   brings the two components together" — component 1 slides in from the
   left, component 2 from the right, and the two symbols + result settle
   in after, so the equation visibly assembles rather than just fading up
   as a block. A converging translateX, not a filling/percentage bar —
   this pairing is a factual union of two defined things, not a
   probabilistic outcome, so nothing here should read like a completion
   meter (the same distinction already applied to the "From Content to
   Bioavailability" section on about-maqui.html). Reduced-motion guard
   below removes the horizontal offset entirely, leaving only the
   shared .reveal fade. */
.mp-formula-panel--maqui.reveal { transform: translate(-34px, 8px); transition-duration: 700ms; transition-delay: 0ms; }
.mp-formula-panel--maqui.reveal.is-visible { transform: none; }
.mp-formula-panel--strain.reveal { transform: translate(34px, 8px); transition-duration: 700ms; transition-delay: 90ms; }
.mp-formula-panel--strain.reveal.is-visible { transform: none; }
.mp-formula-panel--result.reveal { transform: scale(0.94); transition-duration: 550ms; transition-delay: 380ms; }
.mp-formula-panel--result.reveal.is-visible { transform: none; }
.mp-formula-grid > .mp-formula-symbol.reveal:nth-child(2) { transition-delay: 260ms; }
.mp-formula-grid > .mp-formula-symbol.reveal:nth-child(4) { transition-delay: 320ms; }
.mp-formula-disclaimer { position: relative; text-align: center; font-size: 0.85rem; color: rgba(255,255,255,0.78); max-width: 620px; margin: 36px auto 0; line-height: 1.65; }
/* Simple text links to the two science subpages, right where the
   delphinidin detail used to be — a natural next step after the
   formulation instead of a dead end. */
.mp-formula-links { display: flex; align-items: center; justify-content: center; gap: 28px; flex-wrap: wrap; margin: 20px 0 0; }
.mp-formula-links a { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: 0.9rem; color: #fff; text-decoration: none; }
.mp-formula-links a span { display: inline-block; color: var(--color-shop-orange); transition: transform var(--transition-slow); }
.mp-formula-links a:hover span, .mp-formula-links a:focus-visible span { transform: translateX(4px); }
@media (max-width: 800px) {
  .mp-formula-panel-wrap { padding: 48px 28px; }
  .mp-formula-grid { grid-template-columns: 1fr; }
  .mp-formula-symbol { padding: 10px 0; }
  .mp-formula-symbol::before, .mp-formula-symbol::after { left: 22%; right: 22%; top: 0; bottom: auto; width: auto; height: 1px; }
  .mp-formula-symbol::after { top: auto; bottom: 0; }
  .mp-formula-panel { padding: 34px 28px; }
  .mp-formula-panel--maqui.reveal, .mp-formula-panel--strain.reveal { transform: translate(0, 14px); }
}
@media (max-width: 480px) {
  .mp-formula-links { flex-direction: column; gap: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .mp-formula-links a span { transition: none; }
  .mp-formula-panel--maqui.reveal,
  .mp-formula-panel--strain.reveal,
  .mp-formula-panel--result.reveal {
    transform: none; transition: none;
  }
}

/* ---------- The Research Question — full-width tinted band, not a
   floating card (Sep 2026): the pale-lavender tint now lives on the
   section itself (.mp-question-band, new) so it spans the full content
   width, with the panel reduced to a plain centred text column.
   Rettelse (comment feedback, Sep 26): restyled again into an edge-to-
   edge split so the section isn't purely typographic — the lavender tint
   stays, but the text now sits in a left-aligned column that keeps the
   page's normal left margin, and a quality-inspection photo fills the
   right column, bleeding all the way to the browser's right edge (same
   100vw full-bleed technique used by .sf-maqui-cross-grid on the
   SUKOFLEX Wholesale page). Page-scoped to maquipro.html only. ---------- */
/* Rettelse (Sep 28): this section fell back to the sitewide default
   (section { padding: 88px 0 }), stacking with .mp-question-panel's own
   64px top/bottom padding to create a very large gap after this section
   in particular. The band's height is now set by the panel alone. */
.mp-question-band { background: var(--color-announce-bg); overflow: hidden; padding: 0; }
.mp-question-grid {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 0;
}
.mp-question-panel {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  margin: 0;
  text-align: left;
  padding: 64px 40px 64px max(28px, calc((100vw - var(--max-width)) / 2));
}
.mp-question-panel .eyebrow { color: var(--color-earth); }
.mp-question-panel h2 { margin: 10px 0 20px; }
.mp-question-panel p { color: var(--color-text-light); max-width: 520px; margin: 0 0 14px; line-height: 1.7; }
.mp-question-panel p:last-of-type { margin-bottom: 0; }
.mp-question-note { margin-top: 22px !important; padding-top: 20px; border-top: 1px solid var(--color-line); font-size: 0.86rem !important; font-style: italic; max-width: 520px !important; }
/* Rettelse (comment feedback, Sep 26): was stretched (height:100%) to match
   the text column's full height, which forced object-fit:cover to crop
   into the photo. The box now uses the photo's own native aspect ratio
   instead, so object-fit:cover has nothing left to crop and the whole
   image shows, still bleeding to the right edge and vertically centred
   against the text. */
/* Rettelse (Sep 28): aspect-ratio exactly matched the source photo's own
   native ratio (1683/935), so object-fit:cover had nothing to crop — the
   whole frame showed, including the bare forearm entering from the
   bottom-right corner, competing with the berries/gloved hands for
   attention. Narrowed the box slightly (8/5) with the crop biased a touch
   left so the berries and gloved hands stay fully in frame while more of
   that arm is trimmed off the right edge. */
.mp-question-media { position: relative; width: 100%; aspect-ratio: 8 / 5; margin: 0; overflow: hidden; border-radius: var(--radius-md) 0 0 var(--radius-md); }
.mp-question-media img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 42% center; transition: transform 700ms ease; }
.mp-question-media:hover img, .mp-question-media:focus-within img { transform: scale(1.025); }
@media (prefers-reduced-motion: reduce) {
  .mp-question-media img { transition: none; }
}
@media (max-width: 900px) {
  .mp-question-grid { grid-template-columns: 1fr; }
  .mp-question-panel { max-width: none; padding: 48px 28px 32px; }
  .mp-question-panel p, .mp-question-note { max-width: none; }
  .mp-question-media { order: -1; border-radius: 0; }
}

/* ---------- Clinical Research Status — editorial redesign (Sep 28) ----------
   Replaces the solid-purple centred panel + separate beige patent box
   with a wide, "almost full-width" 42/58 split on a light lavender
   background (#F4F2FA, the same soft lavender already used as the
   product-photo backdrop tint in .mp-intro-media elsewhere on this page):
   research copy + status labels on the left, the large clinical-testing
   capsule photo dominant on the right (object-fit:cover on the wide
   source photo crops in from the sides, which is what makes the capsule
   itself read as large/dominant rather than a small object in a wide
   frame — the sides being cropped away are empty lavender background in
   the source photo, so nothing meaningful is lost at any width). No card
   or frame around either column. The patent notice is folded in as a
   quiet footnote below a thin divider instead of its own detached box. */
/* Rettelse (Sep 28): widened the text column (42/58 → 45/55), reduced the
   capsule photo's height (see .mp-clinical-capsule below) so it no longer
   dominates almost the full screen, and reduced this section's own
   padding (72px → 56px) as part of the sitewide spacing pass. */
/* Rettelse (Sep 28, feedback: "teksten skal alignes med sectionen ovenover,
   den er for langt til venstre" — the text should align with the section
   above, it's too far left): this wrap used its own much wider max-width
   (1680px) and narrower side padding (40px) than the sitewide .container
   (max-width 1140px, 28px padding), so at ordinary desktop widths — where
   1680px never actually constrains anything — its content sat noticeably
   closer to the viewport edge than every .container-based section above
   and below it. Matching .container's own values exactly re-aligns this
   section's left (and right) edge with the rest of the page. */
.mp-clinical-section { background: #F4F2FA; padding: 56px 0; }
.mp-clinical-wrap { max-width: var(--max-width); margin: 0 auto; padding: 0 28px; }
.mp-clinical-status-grid { display: grid; grid-template-columns: 45fr 55fr; gap: 56px; align-items: center; }
.mp-clinical-text { max-width: 520px; }
.mp-clinical-text .eyebrow { color: var(--color-earth); margin-bottom: 16px; }
.mp-clinical-text h2 { font-size: clamp(1.5rem, 2.4vw, 1.9rem); line-height: 1.28; margin: 0 0 18px; }
.mp-clinical-text p { color: var(--color-text-light); font-size: 0.98rem; line-height: 1.7; margin: 0 0 14px; }
/* Rettelse (Sep 28): the two separate status pills (each its own labelled
   span, joined by a positioned ::after dot) are now one plain line of
   text with a middot separator — same two facts, simpler markup, reads
   unambiguously as a single compact status line. Replaces
   .mp-clinical-status-labels/.mp-clinical-status-label.
   Rettelse (Sep 28, cohesion pass): that single text line wrapped
   awkwardly mid-phrase at this column's width, which read as busy rather
   than "concise and confident." Replaced with a two-step status track —
   a solid "done" chip joined by a short connector to an outlined
   "pending" chip — the same two facts, but legible as a status at a
   glance. Kept as a labelled role="img" (see HTML) rather than real
   list/nav semantics, since it's a compact status graphic, not
   navigation. */
.mp-clinical-status-track { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 26px 0 0; }
.mp-clinical-status-step { display: inline-flex; align-items: center; gap: 7px; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; padding: 8px 15px; border-radius: 999px; white-space: nowrap; }
.mp-clinical-status-step.is-done { background: var(--color-earth); color: #fff; }
.mp-clinical-status-step.is-pending { background: transparent; border: 1px solid var(--color-line); color: var(--color-text-light); }
.mp-clinical-status-dot { width: 6px; height: 6px; border-radius: 50%; flex: 0 0 auto; }
.mp-clinical-status-step.is-done .mp-clinical-status-dot { background: #fff; }
.mp-clinical-status-step.is-pending .mp-clinical-status-dot { background: var(--color-shop-orange); }
.mp-clinical-status-connector { width: 18px; height: 1px; background: var(--color-line); flex: 0 0 auto; }
@media (max-width: 480px) {
  .mp-clinical-status-connector { display: none; }
}
.mp-clinical-update { display: block; margin-top: 18px; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-text-light); }
.mp-clinical-partner { display: block; margin-top: 8px; font-size: 0.82rem; color: var(--color-text-light); }

/* height lives on .mp-clinical-capsule (the figure), not this wrapper: on
   desktop the annotation overlay is absolutely positioned so it doesn't
   need the wrapper to carry height, and on mobile the annotation becomes
   a real block below the figure — if the wrapper itself carried a fixed
   height, that block would overflow past the wrapper's own box (which
   controls how much space the section reserves for it) rather than
   pushing the footnote down, producing an overlap. Auto-height here lets
   the wrapper equal figure + mobile-annotation together at every width. */
.mp-clinical-visual { position: relative; border-radius: 0; overflow: visible; }
.mp-clinical-capsule { position: relative; margin: 0; width: 100%; height: 540px; overflow: hidden; }
.mp-clinical-capsule img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }

/* Fine connecting line from the capsule to a refined, unboxed annotation —
   plain colour + a hairline, deliberately not styled as a card.
   Rettelse (Sep 28): dot/line position recomputed for the new tighter
   -tight.jpg crop (see the HTML comment above this section) — the pill's
   highlight point now sits at a different fraction of the frame than in
   the old, much wider source photo.
   Rettelse (Sep 28, second pass): recomputed again after the section's
   own width alignment fix above (.mp-clinical-wrap now matches the
   sitewide .container instead of its own much wider max-width) — the
   visual column is narrower now, which changes how much of the image
   object-fit:cover crops away. Recomputed for the same target point (the
   capsule's upper-cap highlight) and it turns out the resulting fraction
   is now nearly constant (42.8–44.7%) across the ENTIRE range from the
   900px stacking breakpoint up through arbitrarily wide desktops (the
   wrap's max-width now caps the column at a fixed size above 1140px,
   instead of continuing to grow), so a single 44%/26% works everywhere
   the overlay is shown and the old 1180px-specific left-position
   override below is no longer needed (only the line/text width still
   need to shrink at that breakpoint, to fit the narrower column). */
.mp-clinical-annotation { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; }
.mp-clinical-annotation-dot { position: absolute; left: 44%; top: 26%; width: 7px; height: 7px; border-radius: 50%; background: var(--color-earth); }
.mp-clinical-annotation-line {
  position: absolute; left: 44%; top: 26%; height: 1px; width: 150px;
  background: var(--color-earth); opacity: 0.55;
  transform: rotate(-27deg) scaleX(0); transform-origin: left center;
  transition: transform 900ms cubic-bezier(0.22, 1, 0.36, 1) 450ms;
}
.mp-clinical-annotation-text {
  position: absolute; left: calc(44% + 128px); top: calc(26% - 92px); width: 220px;
  opacity: 0; transition: opacity 700ms ease 850ms;
}
.mp-clinical-annotation.is-visible .mp-clinical-annotation-line { transform: rotate(-27deg) scaleX(1); }
.mp-clinical-annotation.is-visible .mp-clinical-annotation-text { opacity: 1; }
.mp-clinical-annotation-text strong { display: block; font-family: var(--font-heading); font-weight: 600; font-size: 1rem; line-height: 1.3; color: var(--color-earth); }
.mp-clinical-annotation-text span { display: block; font-size: 0.85rem; color: var(--color-forest-dark); margin-top: 4px; }
.mp-clinical-annotation-mobile { display: none; }

.mp-clinical-footnote { margin: 44px 0 0; padding-top: 24px; border-top: 1px solid var(--color-line); color: var(--color-text-light); font-size: 0.8rem; line-height: 1.6; max-width: 900px; }
.mp-clinical-footnote strong { color: var(--color-forest-dark); font-weight: 600; }

@media (max-width: 1180px) {
  /* .mp-clinical-wrap padding is already 28px at every width as of the
     Sep 28 alignment fix above, so no override is needed here any more. */
  .mp-clinical-capsule { height: 460px; }
  /* Narrower visual column here means the default 128px/220px-wide label
     would run past the image's own right edge (and, below ~1050px, past
     the viewport edge). Shrink the line and label to fit inside the
     now-narrower column at every width down to the 900px breakpoint,
     where this whole overlay is hidden in favour of the stacked mobile
     annotation below. The dot/line's own left position no longer needs
     its own override here — see the base rule's comment above. */
  .mp-clinical-annotation-line { width: 90px; }
  .mp-clinical-annotation-text { left: calc(44% + 82px); width: 150px; }
  .mp-clinical-annotation-text strong { font-size: 0.9rem; }
  .mp-clinical-annotation-text span { font-size: 0.78rem; }
}
@media (max-width: 900px) {
  .mp-clinical-section { padding: 56px 0; }
  .mp-clinical-status-grid { grid-template-columns: 1fr; gap: 32px; }
  .mp-clinical-text { max-width: none; }
  .mp-clinical-capsule { height: 420px; }
  .mp-clinical-annotation { display: none; }
  .mp-clinical-annotation-mobile {
    display: block; text-align: center; margin-top: 22px; opacity: 0;
    transition: opacity 700ms ease;
  }
  .mp-clinical-annotation-mobile.is-visible { opacity: 1; }
  .mp-clinical-annotation-mobile strong { display: block; font-family: var(--font-heading); font-weight: 600; font-size: 1rem; color: var(--color-earth); }
  .mp-clinical-annotation-mobile span { display: block; font-size: 0.85rem; color: var(--color-text-light); margin-top: 4px; }
}
@media (max-width: 600px) {
  .mp-clinical-capsule { height: 340px; }
}
@media (prefers-reduced-motion: reduce) {
  .mp-clinical-annotation-line, .mp-clinical-annotation-text, .mp-clinical-annotation-mobile { transition: none; }
}

/* Rettelse (Sep 28): "Why Choose MaquiPro®" section removed from the page
   entirely (all four messages were already covered earlier on the page),
   so its .mp-why-* rules (a two-column list with numbered items) are
   removed here too — page-scoped to this file only, confirmed via grep
   before deleting. */

/* ---------- Explore the Science (editorial redesign, Sep 28) — replaces
   the three heavy white bordered cards (.mp-science-card: background,
   1px border, 20px radius, box-shadow on hover) with plain editorial
   columns separated by thin dividers, reusing the exact convention this
   page already established with .mp-specs-bar (section 1) and
   .mp-usage-rail (section 6): border-top/bottom on the row, a 1px
   vertical line between columns, no card background/border/radius/
   shadow at all. Hover stays limited to the existing arrow-shift plus a
   subtle heading colour change — no border, shadow or zoom. ---------- */
.mp-explore-row { display: flex; align-items: stretch; gap: 0; margin-top: 36px; border-top: 1px solid var(--color-line); border-bottom: 1px solid var(--color-line); }
.mp-explore-col { flex: 1 1 0; min-width: 0; display: block; padding: 32px 30px; text-decoration: none; color: inherit; position: relative; }
.mp-explore-col + .mp-explore-col::before { content: ''; position: absolute; left: 0; top: 22px; bottom: 22px; width: 1px; background: var(--color-line); }
/* Icon badge (Sep 28, cohesion pass) — same circular-badge treatment as
   .mp-formula-icon, reusing two of its exact icon marks for visual
   continuity with "The Formulation" above; inverts to a solid fill on
   hover as the column's one piece of "personality," independent of the
   row's plain thin-divider structure. */
.mp-explore-icon {
  width: 42px; height: 42px; margin-bottom: 16px;
  border-radius: 50%;
  background: var(--color-cream-dark);
  border: 1px solid var(--color-line);
  display: flex; align-items: center; justify-content: center;
  color: var(--color-earth);
  transition: background 250ms ease, border-color 250ms ease, color 250ms ease, transform 250ms ease;
}
.mp-explore-icon svg { width: 20px; height: 20px; }
.mp-explore-num { display: block; font-family: var(--font-heading); font-weight: 700; font-size: 0.78rem; color: var(--color-shop-orange); letter-spacing: 0.06em; margin-bottom: 14px; }
.mp-explore-col h3 { font-size: 1.05rem; color: var(--color-forest-dark); margin: 0 0 10px; transition: color 250ms ease; }
.mp-explore-col p { color: var(--color-text-light); font-size: 0.88rem; line-height: 1.6; margin: 0 0 18px; }
.mp-explore-cta { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: 0.86rem; color: var(--color-earth); }
.mp-explore-arrow { display: inline-block; transition: transform var(--transition-slow); }
.mp-explore-col:focus-visible { outline: 2px solid var(--color-earth); outline-offset: 4px; border-radius: 4px; }
@media (hover: hover) and (pointer: fine) {
  .mp-explore-col:hover h3 { color: var(--color-earth); }
  .mp-explore-col:hover .mp-explore-arrow { transform: translateX(4px); }
  .mp-explore-col:hover .mp-explore-icon { background: var(--color-earth); border-color: var(--color-earth); color: #fff; transform: translateY(-2px); }
}
.mp-explore-col.reveal:nth-child(1) { transition-delay: 0ms; }
.mp-explore-col.reveal:nth-child(2) { transition-delay: 90ms; }
.mp-explore-col.reveal:nth-child(3) { transition-delay: 180ms; }
@media (max-width: 800px) {
  .mp-explore-row { flex-direction: column; }
  .mp-explore-col { padding: 22px 0; }
  .mp-explore-col + .mp-explore-col::before { display: none; }
}
@media (prefers-reduced-motion: reduce) { .mp-explore-arrow, .mp-explore-col h3, .mp-explore-icon { transition: none; } }

/* ---------- Closing wholesale CTA — premium deep-purple panel (page-scoped;
   does not touch the shared .cta class used across the rest of the site) ---------- */
.mp-cta-panel { background: var(--color-earth); border-radius: 28px; padding: 56px 48px; text-align: center; max-width: 760px; margin: 0 auto; }
.mp-cta-panel .eyebrow { color: var(--color-shop-orange); }
.mp-cta-panel h2 { color: #fff; margin: 12px 0 14px; }
.mp-cta-panel p { color: rgba(255,255,255,0.82); max-width: 520px; margin: 0 auto; line-height: 1.6; }
.mp-cta-buttons { display: flex; gap: 14px; justify-content: center; align-items: center; flex-wrap: wrap; margin-top: 30px; }
.mp-cta-btn-primary {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--color-cream); color: var(--color-earth);
  font-weight: 600; font-size: 0.92rem;
  padding: 14px 26px; border-radius: var(--radius-sm);
  text-decoration: none;
  transition: background var(--transition-base);
}
.mp-cta-btn-primary:hover, .mp-cta-btn-primary:focus-visible { background: #fff; }
.mp-cta-arrow { display: inline-block; transition: transform var(--transition-slow); }
.mp-cta-btn-primary:hover .mp-cta-arrow { transform: translateX(4px); }
.mp-cta-btn-primary:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
/* Rettelse (Sep 28): the old equal-weight secondary button
   (.mp-cta-btn-secondary, "Contact SUKO Nordic") overlapped with the
   primary wholesale action, so it's now a small text link under the
   button instead of a second button competing for attention. Removed
   the now-unused .mp-cta-btn-secondary rule (page-scoped to this file
   only, confirmed via grep before deleting). */
.mp-cta-text-link { display: inline-block; margin-top: 18px; color: rgba(255,255,255,0.75); font-size: 0.86rem; text-decoration: underline; text-underline-offset: 3px; transition: color var(--transition-base); }
.mp-cta-text-link:hover, .mp-cta-text-link:focus-visible { color: #fff; }
@media (max-width: 700px) {
  .mp-cta-panel { padding: 44px 28px; }
  .mp-cta-buttons { flex-direction: column; width: 100%; }
  .mp-cta-btn-primary { width: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) { .mp-cta-arrow { transition: none; } }

/* ---------- SUKO Nordic Australia — editorial page-specific patterns ---------- */

/* Rettelse (Sep 28 2026, "give this page its own identity" redesign): the
   wide cinematic photo-with-white-text-overlay hero (.au-hero /
   .au-hero-wide / .au-hero-overlay*) is replaced by the split-layout hero
   below (.au-hero-split), which solves the same "busy photo makes white
   text hard to read" problem structurally, by never overlaying text on
   the photo at all. Left in place as page-scoped dead code, per the
   site's standing convention. */
.au-hero { padding: 44px 0 0; }
.au-hero .breadcrumb { margin-bottom: 20px; }
.au-hero-wide { position: relative; margin: 0; aspect-ratio: 1086 / 500; background: var(--color-cream-dark); overflow: hidden; }
.au-hero-wide img { width: 100%; height: 100%; object-fit: cover; object-position: center 40%; display: block; }
.au-hero-intro { max-width: 640px; margin: 0 auto; text-align: center; padding: 28px 0 8px; }
.au-hero-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 36px max(28px, calc((100vw - var(--max-width)) / 2)) 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(10, 12, 18, 0.30) 0%, rgba(10, 12, 18, 0.12) 38%, rgba(10, 12, 18, 0) 62%);
}
.au-hero-overlay-label {
  display: block;
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 12px;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.3);
}
.au-hero-overlay-heading {
  color: #fff;
  font-size: clamp(1.5rem, 2.6vw, 2.3rem);
  font-weight: 700;
  line-height: 1.16;
  letter-spacing: -0.01em;
  max-width: 480px;
  margin: 0 0 12px;
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.32);
}
.au-hero-overlay-sub {
  color: rgba(255, 255, 255, 0.86);
  font-size: 0.94rem;
  font-weight: 400;
  max-width: 340px;
  margin: 0;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.28);
}
@media (max-width: 860px) {
  .au-hero-overlay {
    padding: 16px 18px 0;
    background: linear-gradient(180deg, rgba(10, 12, 18, 0.4) 0%, rgba(10, 12, 18, 0.15) 28%, rgba(10, 12, 18, 0) 48%);
  }
  .au-hero-overlay-label { font-size: 0.62rem; margin-bottom: 6px; }
  .au-hero-overlay-heading { font-size: 1.16rem; line-height: 1.14; max-width: 210px; margin-bottom: 6px; }
  .au-hero-overlay-sub { font-size: 0.7rem; max-width: 190px; }
}
.au-hero-intro .eyebrow { display: block; }
.au-hero-intro h1 { margin: 10px 0 18px; }
.au-hero-intro .tagline-sub { color: var(--color-text-light); margin: 0 auto 14px; max-width: 56ch; }
.au-hero-intro .tagline-sub:last-of-type { margin-bottom: 0; }
.au-hero-ctas { display: flex; justify-content: center; gap: 16px; margin-top: 26px; flex-wrap: wrap; }
@media (max-width: 860px) {
  .au-hero { padding-top: 8px; }
  .au-hero-wide { aspect-ratio: 4 / 3.6; }
  .au-hero-wide img { object-position: center 22%; }
  .au-hero-intro { padding-top: 32px; }
}
@media (max-width: 480px) {
  .au-hero-ctas { flex-direction: column; align-items: stretch; }
  .au-hero-ctas .btn { width: 100%; text-align: center; }
}

/* ================= Hero — split layout (Sep 28 2026 redesign) =================
   "Nordic Science. A Fresh Chapter in Australia." Modeled directly on
   index.html's .family-intro-grid pattern (same full-bleed 50/50 grid,
   text on a solid background, photo edge-to-edge) so contrast is never a
   problem at any breakpoint — text is never overlaid on the photo. */
.au-hero-section { padding-top: 0; padding-bottom: 0; }
.au-hero-section .breadcrumb { margin: 28px 0 0; }
.au-hero-split {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  margin-top: 20px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  min-height: 600px;
}
.au-hero-split-text {
  display: flex;
  align-items: center;
  padding: 64px 56px 64px max(28px, calc((100vw - var(--max-width)) / 2));
}
.au-hero-split-inner { max-width: 480px; }
.au-hero-split-inner .eyebrow { display: block; margin-bottom: 18px; }
.au-hero-split-inner h1 {
  font-size: clamp(2.2rem, 3.6vw, 2.85rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--color-forest-dark);
  max-width: 14ch;
  margin-bottom: 26px;
}
.au-hero-split-inner p {
  color: var(--color-text-light);
  max-width: 44ch;
  margin-bottom: 16px;
}
.au-hero-split-inner p:last-of-type { margin-bottom: 0; }
.au-hero-split-ctas { display: flex; align-items: center; flex-wrap: wrap; gap: 16px 28px; margin-top: 32px; }
.au-hero-split-media { position: relative; overflow: hidden; background: var(--color-cream-dark); }
.au-hero-split-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 18%;
  display: block;
  transition: transform 800ms ease;
}
.au-hero-split-media:hover img { transform: scale(1.03); }
@media (prefers-reduced-motion: reduce) { .au-hero-split-media img { transition: none; } }
@media (max-width: 1180px) and (min-width: 901px) {
  .au-hero-split { min-height: 520px; }
  .au-hero-split-text { padding: 56px 40px 56px max(28px, calc((100vw - var(--max-width)) / 2)); }
  .au-hero-split-inner { max-width: 420px; }
}
@media (max-width: 900px) {
  .au-hero-split { grid-template-columns: 1fr; min-height: 0; }
  .au-hero-split-text { padding: 36px 24px 40px; }
  .au-hero-split-inner { max-width: none; }
  .au-hero-split-inner h1 { max-width: none; }
  .au-hero-split-inner p { max-width: 60ch; }
  .au-hero-split-media { height: 360px; }
}
@media (max-width: 480px) {
  .au-hero-split-text { padding: 30px 20px 34px; }
  .au-hero-split-ctas { gap: 14px 20px; }
}

/* ================= Heritage acknowledgment (Sep 28 2026 redesign) =================
   Short, photo-free acknowledgment replacing the former three-photo
   Chile/Denmark/Australia timeline (.au-journey-grid, marked dead code
   below) — the full story stays told, in full, on Our Family Story. */
.au-heritage-section { padding: 48px 0; }
.au-heritage-inner { max-width: 620px; margin: 0 auto; text-align: center; }
.au-heritage-inner .eyebrow { display: block; }
.au-heritage-inner h2 { font-size: clamp(1.5rem, 2.4vw, 1.9rem); margin: 14px 0 16px; }
.au-heritage-inner p { color: var(--color-text-light); margin: 0 0 20px; }
.au-heritage-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--color-earth);
  font-weight: 600;
  font-size: 0.94rem;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color var(--transition-fast);
}
.au-heritage-link:hover, .au-heritage-link:focus-visible { color: var(--color-forest-dark); }
.au-heritage-link span { display: inline-block; transition: transform 0.2s ease; }
.au-heritage-link:hover span { transform: translateX(3px); }
@media (max-width: 640px) { .au-heritage-section { padding: 36px 0; } }
@media (prefers-reduced-motion: reduce) { .au-heritage-link span { transition: none; } }

/* Two sisters — individual founder profiles (Sep 28 redesign)
   Replaces the former single shared-photo + stacked-bios layout: the
   beach hero photo used to repeat here, so each sister now gets her own
   portrait instead. Both new portraits are used at their native 3:4
   ratio, so object-fit:cover never actually crops anything — faces and
   theses are shown exactly as photographed. No card background/border/
   shadow beyond a very light shadow-sm, matching this site's established
   "photo, not card" treatment (e.g. .scientist-profile on our-scientists.html). */
.au-founders-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; margin-top: 8px; }
.au-founder-photo { margin: 0 0 20px; aspect-ratio: 3 / 4; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); background: var(--color-cream-dark); }
.au-founder-photo img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 700ms ease; }
.au-founder h3 { font-size: 1.25rem; margin-bottom: 4px; }
.au-founder .role { display: block; font-size: 0.85rem; color: var(--color-earth); font-weight: 600; letter-spacing: 0.01em; margin-bottom: 12px; }
.au-founder p { color: var(--color-text-light); margin: 0; }
.au-founder-focus { display: block; margin-top: 12px; font-size: 0.82rem; color: var(--color-text-light); opacity: 0.8; }
@media (hover: hover) and (pointer: fine) { .au-founder:hover .au-founder-photo img { transform: scale(1.02); } }
@media (prefers-reduced-motion: reduce) { .au-founder-photo img { transition: none; } }
@media (max-width: 800px) { .au-founders-grid { grid-template-columns: 1fr; gap: 40px; } }

/* Full-bleed utility — no longer used on this page (the split hero below
   builds its own 100vw breakout directly on .au-hero-split); left in
   place as page-scoped dead code, per the site's standing convention. */
.au-fullbleed { width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); }

/* Rettelse (Sep 28): "Bringing Our Family's Work to Australia" dropped its
   photo entirely (see suko-nordic-australia.html) and was briefly a plain
   text-only section using this grid. The full-page redesign later that
   same day reintroduced a photo via the new .au-journey-grid below
   instead, so this old two-column grid is no longer used either way.
   Left in place as page-scoped dead code, per the site's standing
   convention. */
.au-chile-grid { grid-template-columns: 0.58fr 1fr; }
@media (max-width: 800px) { .au-chile-grid { grid-template-columns: 1fr; } }

/* Sep 28 2026 ("give this page its own identity" redesign): this whole
   three-photo Chile/Denmark/Australia timeline is replaced by the short,
   photo-free .au-heritage-section acknowledgment above — it retold, a
   second time on this page, the same three-generation story already told
   in full on Our Family Story, and its third photo
   (isabel-amanda-graded-square.jpg) was the same Bondi Beach photo shoot
   as this page's own hero photo, which would have repeated the "same
   beach photo" the redesign brief specifically asked to avoid. Left in
   place as page-scoped dead code, per the site's standing convention. */

/* ================= "Bringing Our Family's Work to Australia" — visual
   journey timeline (Sep 28, full-page redesign) =================
   Text beside a small vertical "journey" of three real family photos
   (Chile / Denmark / Australia), connected by a thin gradient line
   (--color-earth to --color-shop-orange) with a dot marking each stop.
   A vertical timeline was chosen over overlapping/absolute-positioned
   photo cards specifically because it needs no per-breakpoint pixel
   tuning: the same flex column simply narrows at every width down to
   mobile, unlike an absolutely-positioned cascade (see this file's
   .mp-clinical-annotation-* comments elsewhere for how fragile that
   alternative gets across breakpoints). */
.au-journey-grid { display: grid; grid-template-columns: 0.92fr 1fr; gap: 64px; align-items: start; }
.au-journey-text.section-head { max-width: none; margin-bottom: 0; }
.au-journey-photos { position: relative; display: flex; flex-direction: column; gap: 40px; padding-left: 34px; }
.au-journey-photos::before {
  content: ''; position: absolute; left: 9px; top: 10px; bottom: 10px; width: 2px;
  background: linear-gradient(to bottom, var(--color-earth), var(--color-shop-orange));
  opacity: 0.32;
  transform: scaleY(0); transform-origin: top center;
  transition: transform 900ms cubic-bezier(0.22, 1, 0.36, 1) 150ms;
}
.au-journey-photos.is-visible::before { transform: scaleY(1); }
.au-journey-stop {
  position: relative; opacity: 0; transform: translateY(14px);
  transition: opacity 600ms ease, transform 600ms ease;
}
.au-journey-photos.is-visible .au-journey-stop { opacity: 1; transform: translateY(0); }
.au-journey-stop::before {
  content: ''; position: absolute; left: -34px; top: 4px; width: 9px; height: 9px; border-radius: 50%;
  background: var(--color-earth); border: 3px solid var(--color-cream-dark);
  transform: scale(0); transition: transform 400ms ease;
}
.au-journey-photos.is-visible .au-journey-stop::before { transform: scale(1); }
.au-journey-stop:nth-child(1) { transition-delay: 150ms; }
.au-journey-stop:nth-child(1)::before { transition-delay: 500ms; }
.au-journey-stop:nth-child(2) { transition-delay: 320ms; }
.au-journey-stop:nth-child(2)::before { transition-delay: 670ms; }
.au-journey-stop:nth-child(3) { transition-delay: 490ms; }
.au-journey-stop:nth-child(3)::before { transition-delay: 840ms; }
.au-journey-photo-frame { margin: 0; aspect-ratio: 4 / 3; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); }
.au-journey-photo-frame img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 600ms ease; }
.au-journey-caption { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-top: 10px; }
.au-journey-caption-place { font-family: var(--font-heading); font-weight: 600; font-size: 0.92rem; color: var(--color-forest-dark); }
.au-journey-caption-note { font-size: 0.78rem; color: var(--color-text-light); }
@media (hover: hover) and (pointer: fine) { .au-journey-stop:hover .au-journey-photo-frame img { transform: scale(1.035); } }
@media (prefers-reduced-motion: reduce) {
  .au-journey-photos::before, .au-journey-stop, .au-journey-stop::before, .au-journey-photo-frame img {
    transition: none; opacity: 1; transform: none;
  }
}
@media (max-width: 900px) {
  .au-journey-grid { grid-template-columns: 1fr; gap: 32px; }
}

/* Rettelse (Sep 28, full-page redesign): the plain three-column
   .au-building-grid below is replaced on-page by .au-path-grid (staggered
   editorial blocks — see suko-nordic-australia.html). Left in place as
   page-scoped dead code, per the site's standing convention. */
.au-building-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px; margin-top: 8px; }
.au-building-item { padding-top: 22px; border-top: 1px solid var(--color-line); transition: border-color 250ms ease; }
.au-building-num { display: block; font-family: var(--font-heading); font-size: 0.85rem; font-weight: 600; color: var(--color-earth); letter-spacing: 0.06em; margin-bottom: 14px; transition: transform 250ms ease; }
.au-building-item h3 { font-size: 1.15rem; margin-bottom: 10px; }
.au-building-item p { color: var(--color-text-light); margin: 0; }
@media (hover: hover) and (pointer: fine) { .au-building-item:hover .au-building-num { transform: translateX(3px); } }
@media (prefers-reduced-motion: reduce) { .au-building-num { transition: none; } }
@media (max-width: 800px) { .au-building-grid { grid-template-columns: 1fr; gap: 32px; } }

/* Sep 28 2026 ("give this page its own identity" redesign, live feedback:
   "more visual variety than three text columns"): .au-path-grid below is
   in turn replaced on-page by .au-path-visual-grid (a real product photo
   beside the same three points, each with a line icon — see
   suko-nordic-australia.html). Left in place as page-scoped dead code,
   per the site's standing convention. */
.au-path-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; margin-top: 8px; }
.au-path-item { position: relative; padding-top: 20px; }
.au-path-item::before { content: ''; position: absolute; top: 0; left: 0; width: 34px; height: 3px; background: var(--color-shop-orange); transition: width 300ms ease; }
.au-path-num-ghost { display: block; font-family: var(--font-heading); font-weight: 700; font-size: 3.4rem; line-height: 1; color: var(--color-earth); opacity: 0.1; margin-bottom: -18px; }
.au-path-item h3 { font-size: 1.15rem; margin-bottom: 8px; position: relative; }
.au-path-item p { color: var(--color-text-light); margin: 0; }
.au-path-item:nth-child(2) { margin-top: 46px; }
.au-path-item.reveal:nth-child(1) { transition-delay: 0ms; }
.au-path-item.reveal:nth-child(2) { transition-delay: 110ms; }
.au-path-item.reveal:nth-child(3) { transition-delay: 220ms; }
@media (hover: hover) and (pointer: fine) { .au-path-item:hover::before { width: 56px; } }
@media (prefers-reduced-motion: reduce) { .au-path-item::before { transition: none; } }
@media (max-width: 800px) {
  .au-path-grid { grid-template-columns: 1fr; gap: 32px; }
  .au-path-item:nth-child(2) { margin-top: 0; }
}

/* ================= Local partnerships — photo + stacked list (Sep 28 2026
   redesign) =================
   A real product photograph (the four-format SUKOFLEX® flatlay) beside
   the same three points as before, each now with a simple line icon
   (matching the site's existing nav-dropdown icon style: 24px viewBox,
   1.6 stroke, round caps) in place of the old plain ghost numeral. */
.au-path-visual-grid { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 48px; align-items: center; margin-top: 8px; }
.au-path-photo { margin: 0; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); aspect-ratio: 4 / 3; background: var(--color-cream-dark); }
.au-path-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.au-path-list { display: flex; flex-direction: column; }
.au-path-row { display: flex; gap: 18px; align-items: flex-start; padding: 22px 0; border-top: 1px solid var(--color-line); }
.au-path-list .au-path-row:first-child { border-top: none; padding-top: 0; }
.au-path-icon {
  flex: 0 0 44px; width: 44px; height: 44px; border-radius: 50%;
  background: rgba(255, 130, 0, 0.12); color: var(--color-shop-orange);
  display: flex; align-items: center; justify-content: center;
}
.au-path-icon svg { width: 22px; height: 22px; }
.au-path-row h3 { font-size: 1.05rem; margin-bottom: 6px; }
.au-path-row p { color: var(--color-text-light); margin: 0; }
.au-path-row.reveal:nth-child(1) { transition-delay: 0ms; }
.au-path-row.reveal:nth-child(2) { transition-delay: 110ms; }
.au-path-row.reveal:nth-child(3) { transition-delay: 220ms; }
@media (max-width: 800px) {
  .au-path-visual-grid { grid-template-columns: 1fr; gap: 28px; }
}

/* SUKOFLEX® in Everyday Australian Life — three-photo scrapbook row
   (Sep 28). Follows the .au-building-grid convention (three equal
   columns, no cards) but for photography: each figure keeps its own
   native aspect ratio, so the row's bottom edge is intentionally uneven
   across the three slightly different ratios rather than force-cropped
   flush with object-fit:cover. The middle photo is nudged up slightly
   (full-page redesign) so the row reads as a considered arrangement
   rather than a mechanical grid. */
.au-lifestyle-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; margin-top: 8px; align-items: start; }
.au-lifestyle-grid figure { margin: 0; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); }
.au-lifestyle-grid figure:nth-child(2) { margin-top: -18px; }
.au-lifestyle-grid img { display: block; width: 100%; height: auto; transition: transform 550ms ease; }
.au-lifestyle-grid figure.reveal:nth-child(1) { transition-delay: 0ms; }
.au-lifestyle-grid figure.reveal:nth-child(2) { transition-delay: 90ms; }
.au-lifestyle-grid figure.reveal:nth-child(3) { transition-delay: 180ms; }
@media (hover: hover) and (pointer: fine) { .au-lifestyle-grid figure:hover img { transform: scale(1.02); } }
@media (max-width: 800px) {
  .au-lifestyle-grid { grid-template-columns: 1fr; gap: 24px; }
  .au-lifestyle-grid figure:nth-child(2) { margin-top: 0; }
}
@media (prefers-reduced-motion: reduce) { .au-lifestyle-grid img { transition: none; } }

/* .au-lifestyle-section's own soft-indigo background + gradient top seam
   are set below, alongside this page's other section backgrounds (see
   the "spacing/rhythm pass" block further down). */

/* Final commercial CTA — deep-purple panel, mirrors .mp-cta-panel */
.au-cta-panel { background: var(--color-earth); border-radius: 28px; padding: 56px 48px; text-align: center; max-width: 760px; margin: 0 auto; }
.au-cta-panel .eyebrow { color: var(--color-shop-orange); }
.au-cta-panel h2 { color: #fff; margin: 12px 0 14px; }
.au-cta-panel p { color: rgba(255,255,255,0.82); max-width: 560px; margin: 0 auto; line-height: 1.6; }
.au-cta-buttons { display: flex; justify-content: center; gap: 16px; margin-top: 26px; flex-wrap: wrap; }
.au-cta-btn-primary {
  display: inline-flex; align-items: center; gap: 8px; background: var(--color-cream); color: var(--color-earth);
  padding: 13px 26px; border-radius: 999px; font-weight: 600; font-size: 0.95rem; text-decoration: none;
  transition: background 0.2s ease;
}
.au-cta-btn-primary:hover, .au-cta-btn-primary:focus-visible { background: #fff; }
.au-cta-arrow { display: inline-block; transition: transform 0.2s ease; }
.au-cta-btn-primary:hover .au-cta-arrow { transform: translateX(4px); }
/* Rettelse (Sep 28): replaces the removed .au-cta-btn-secondary (a
   second large outlined button) with a discreet text link beneath the
   primary button — same convention as .mp-cta-text-link on maquipro.html. */
.au-cta-text-link { display: inline-block; margin-top: 18px; color: rgba(255,255,255,0.75); font-size: 0.86rem; text-decoration: underline; text-underline-offset: 3px; transition: color var(--transition-base); }
.au-cta-text-link:hover, .au-cta-text-link:focus-visible { color: #fff; }
.au-cta-btn-primary:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
@media (max-width: 600px) {
  .au-cta-panel { padding: 44px 28px; }
  .au-cta-buttons { flex-direction: column; width: 100%; }
  .au-cta-btn-primary { width: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) { .au-cta-arrow { transition: none; } }

/* ---------- suko-nordic-australia.html: spacing/rhythm pass (Sep 28) ----------
   Same fix as maquipro.html / our-scientists.html: sections with no
   override were falling back to the sitewide 88px default. .au-chile-
   section's own padding is left in place as page-scoped dead code (see
   above); .au-heritage-section (its replacement) sets its own, smaller
   padding since it's a brief acknowledgment, not a full section. */
.au-nextgen-section { padding: 56px 0; }
.au-chile-section { padding: 56px 0; }
.au-building-section { padding: 56px 0; }
.au-lifestyle-section { padding: 56px 0; }
.au-final-cta { padding: 40px 0 88px; }
@media (max-width: 700px) {
  .au-nextgen-section, .au-chile-section, .au-building-section, .au-lifestyle-section { padding: 40px 0; }
  .au-final-cta { padding: 32px 0 64px; }
}

/* ---------- suko-nordic-australia.html: background rhythm (Sep 28 2026
   redesign, live feedback) ----------
   Original feedback: "the same cream background continues for too
   long... everything blends into one long beige page." Section order was
   since reshuffled (chapter -> people -> products -> partnerships), so
   the alternation is re-mapped onto the new order rather than the old
   section names: .au-heritage-section (the new acknowledgment, first
   after the hero) carries bg-alt in its own HTML class; .au-nextgen-
   section ("The People Building It") stays plain cream; .au-lifestyle-
   section (moved up to run third) breaks the pattern with the same soft
   indigo tint as before (--color-announce-bg, already used sitewide for
   the announcement bar); .au-building-section (now last, holding the
   photo + icon list) returns to plain cream ahead of the deep-purple CTA
   panel. Net effect: cream-dark -> cream -> soft indigo -> cream -> deep
   purple down the page, instead of one unbroken cream run. */
.au-lifestyle-section { background: var(--color-announce-bg); position: relative; }
.au-lifestyle-section::before {
  content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 120px; height: 3px; border-radius: 2px;
  background: linear-gradient(to right, var(--color-earth), var(--color-shop-orange));
}
.au-lifestyle-section .eyebrow { color: var(--color-shop-orange); }

/* ---------- FAQs — premium accordion ---------- */
.faq-section { padding-top: 20px; padding-bottom: 40px; }
.faq-container { max-width: 760px; }

/* Sep 2026: centered so that when the 5 category pills wrap to a second
   row (they don't all fit on one line at the FAQ column's 760px reading
   width), the lone last pill sits centered under the row above instead of
   stranded at the left edge with a large empty gap beside it. */
/* scroll-margin-top matches the sticky header's height (see #ap4Standard)
   so hovering/clicking a filter and scrolling it to the top of the
   viewport doesn't tuck it underneath the sticky site header. */
.faq-filters { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-bottom: 44px; scroll-margin-top: 88px; }
.faq-filter {
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--color-text-light);
  background: transparent;
  border: 1px solid var(--color-line);
  border-radius: 20px;
  padding: 9px 18px;
  cursor: pointer;
  transition: background var(--transition-base), color var(--transition-base), border-color var(--transition-base);
}
.faq-filter:hover { border-color: var(--color-earth); color: var(--color-forest-dark); }
.faq-filter.active { background: var(--color-earth); border-color: var(--color-earth); color: var(--color-white); }
.faq-filter:focus-visible { outline: 2px solid var(--color-earth); outline-offset: 2px; }

.faq-category-label {
  font-family: var(--font-heading);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-earth);
  margin: 40px 0 4px;
}
.faq-category-label:first-child { margin-top: 0; }

.faq-list { }
.faq-item { border-bottom: 1px solid var(--color-line); }
.faq-item:first-of-type { border-top: 1px solid var(--color-line); }

.faq-question { margin: 0; }

.faq-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  width: 100%;
  background: transparent;
  border: none;
  text-align: left;
  cursor: pointer;
  padding: 24px 4px;
  font-family: var(--font-heading);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--color-forest-dark);
  letter-spacing: -0.005em;
  line-height: 1.4;
  transition: color var(--transition-base);
  border-radius: var(--radius-sm);
}
.faq-trigger:hover { color: var(--color-earth); }
.faq-trigger:hover .faq-icon { background: var(--color-announce-bg); border-color: var(--color-earth); }
.faq-trigger:focus-visible { outline: 2px solid var(--color-earth); outline-offset: 4px; }
.faq-trigger[aria-expanded="true"] { color: var(--color-earth); }

.faq-trigger-text { flex: 1 1 auto; }

.faq-icon {
  position: relative;
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid var(--color-line);
  background: var(--color-cream);
  transition: background var(--transition-base), border-color var(--transition-base), transform var(--transition-base);
}
.faq-icon-h, .faq-icon-v {
  position: absolute;
  top: 50%;
  left: 50%;
  background: var(--color-earth);
  transition: transform var(--transition-base);
}
.faq-icon-h { width: 11px; height: 1.6px; transform: translate(-50%, -50%); }
.faq-icon-v { width: 1.6px; height: 11px; transform: translate(-50%, -50%); }
.faq-trigger[aria-expanded="true"] .faq-icon-v { transform: translate(-50%, -50%) rotate(90deg) scaleY(0); }
.faq-trigger[aria-expanded="true"] .faq-icon { transform: rotate(180deg); }

.faq-panel {
  height: 0;
  overflow: hidden;
  transition: height var(--transition-slow);
}
.faq-panel-inner {
  padding: 0 4px 26px;
  opacity: 0;
  transition: opacity var(--transition-base);
}
.faq-panel.is-open .faq-panel-inner { opacity: 1; }
.faq-panel-inner p {
  margin: 0;
  max-width: 62ch;
  color: var(--color-text-light);
  font-size: 0.98rem;
  line-height: 1.7;
}
.faq-panel-inner a { color: var(--color-earth); text-decoration: underline; text-underline-offset: 3px; }

.faq-category-cta {
  margin: 28px 0 8px;
  padding: 24px 28px;
  border-radius: var(--radius-md);
  background: var(--color-cream);
  border: 1px solid var(--color-line);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.faq-category-cta p { margin: 0; font-family: var(--font-heading); font-weight: 600; color: var(--color-forest-dark); }

@media (prefers-reduced-motion: reduce) {
  .faq-panel, .faq-panel-inner, .faq-icon, .faq-icon-h, .faq-icon-v, .faq-trigger { transition: none; }
}

@media (max-width: 640px) {
  .faq-trigger { font-size: 0.98rem; padding: 20px 2px; gap: 16px; }
  .faq-filters { gap: 8px; margin-bottom: 32px; }
  .faq-filter { padding: 8px 14px; font-size: 0.78rem; }
  .faq-category-cta { padding: 20px; flex-direction: column; align-items: flex-start; }
}

/* ---------- Single full-bleed video hero (page top) — mobile fallback ----------
   Fixes a pre-existing bug: at narrow widths the fixed 21:9 box was too short
   to contain the overlaid caption text, clipping the heading/tagline. Below
   760px the caption drops out of the overlay and becomes a static band
   under a shorter video, so nothing is ever cropped. */
@media (max-width: 760px) {
  .page-video-hero { aspect-ratio: auto !important; }
  .page-video-hero video { position: static !important; width: 100% !important; height: auto !important; aspect-ratio: 4 / 3 !important; }
  .page-video-hero-caption {
    position: static !important;
    z-index: auto !important;
    max-width: none !important;
    margin: 0 !important;
    border-radius: 0 !important;
    background: var(--color-forest-dark) !important;
    padding: 24px 22px 30px !important;
  }
}

/* ---------- Why Rosehips from Chile — editorial redesign ---------- */

/* Reusable "temporary placeholder" badge — remove once real photography lands */
.ph-badge {
  position: absolute;
  left: 12px;
  bottom: 12px;
  z-index: 3;
  font-family: var(--font-body);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-earth);
  background: rgba(255,255,255,0.9);
  border-radius: 14px;
  padding: 4px 11px;
  pointer-events: none;
  line-height: 1.3;
}

/* ---------- Hero — slim breadcrumb above the (untouched) video, subtle
   left-to-right scrim instead of a dark rounded card ---------- */
.wc-hero-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(105deg, rgba(18,17,14,0.68) 0%, rgba(18,17,14,0.42) 30%, rgba(18,17,14,0.12) 54%, rgba(18,17,14,0) 70%);
  pointer-events: none;
}
.wc-hero-copy {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 2;
  width: 580px;
  max-width: calc(100% - 40px);
  margin-left: max(28px, calc((100vw - var(--max-width)) / 2));
  padding: 0 40px 56px 0;
  color: #fff;
}
.wc-hero-copy .eyebrow { color: rgba(255,255,255,0.86); }
.wc-hero-copy h1 { color: #fff; font-size: clamp(1.9rem, 3.2vw, 2.6rem); line-height: 1.16; margin: 12px 0 16px; }
.wc-hero-copy p { color: rgba(255,255,255,0.88); max-width: 50ch; margin: 0; }
.wc-hero-cta { display: inline-flex; align-items: center; gap: 6px; margin-top: 22px; font-weight: 600; font-size: 0.92rem; color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.wc-hero-cta-arrow { display: inline-block; transition: transform 250ms ease; }
.wc-hero-cta:hover .wc-hero-cta-arrow { transform: translateY(3px); }
/* Rettelse (Sep 29 2026, artifact comment: "kan vi lave denne her side mere
   livlig?... noget livligt tekst der popper frem når man scroller ned"):
   rather than the whole hero copy block fading up as one flat unit, the
   eyebrow/heading/paragraph/CTA now each fade up in their own short
   cascade. .wc-hero-copy.reveal keeps the block itself visible from the
   start (no self-fade) so its children can stagger independently, and the
   same .is-visible class the shared IntersectionObserver already adds is
   what triggers them. */
.wc-hero-copy.reveal { opacity: 1; transform: none; transition: none; }
.wc-hero-copy .eyebrow, .wc-hero-copy h1, .wc-hero-copy p, .wc-hero-copy .wc-hero-cta {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 550ms ease, transform 550ms ease;
}
.wc-hero-copy.is-visible .eyebrow { opacity: 1; transform: none; transition-delay: 0ms; }
.wc-hero-copy.is-visible h1 { opacity: 1; transform: none; transition-delay: 90ms; }
.wc-hero-copy.is-visible p { opacity: 1; transform: none; transition-delay: 180ms; }
.wc-hero-copy.is-visible .wc-hero-cta { opacity: 1; transform: none; transition-delay: 270ms; }
@media (max-width: 760px) {
  .wc-hero-scrim { display: none; }
  .wc-hero-copy { position: static; width: auto; max-width: none; margin: 0; padding: 24px 22px 30px; background: var(--color-forest-dark); }
}

/* ---------- MaquiPro — video hero caption ----------
   Uses the shared .premium-hero-overlay component (see the "Premium hero
   overlay" block near the AP-4 hero rules) so this hero stays visually
   identical to the AP-4® and Maqui Berry & Anthocyanins video heroes. */

/* ---------- The Growing Region — intro + three restrained editorial facts,
   image on top / number, heading and copy on the cream background beneath
   (replaces the old on-image "potency" panel banners) ---------- */
/* A deliberate pause below the full-bleed hero video before "The Growing
   Region" begins — responsive section padding (never an empty fixed-height
   spacer), so the label/heading/paragraph group reads as a clear, composed
   new section rather than crowding the video above it.
   Rettelse (comment feedback): this padding (96px) was tuned back when the
   section's first child was that label/heading/paragraph group directly.
   Once the Southern Chilean Climate block's full-bleed sunrise image was
   moved to open the section instead (see .wc-climate-wrap below), this
   padding was stacking with that block's own top margins, adding up to
   ~150px of plain empty background before the image — read as a leftover
   gap rather than a deliberate pause. Reduced to a single small pause
   appropriate for an image-first opening; .wc-climate-wrap and
   .wc-climate-hero-wrap no longer add their own margin on top of it. */
/* Rettelse (Sep 29 2026): padding-bottom added (was inheriting the base
   `section` rule's 88px) — chapter 2 opens directly with a full-bleed
   photo, so stacking that 88px with chapter 2's own top padding left a
   large empty cream gap between the two chapters (same class of issue as
   the .wc-panorama-section fix elsewhere on this page). */
.wc-facts { padding-top: 40px; padding-bottom: 40px; }
@media (max-width: 900px) {
  .wc-facts { padding-top: 32px; }
}
@media (max-width: 600px) {
  .wc-facts { padding-top: 24px; }
}
.wc-facts-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 36px; margin-top: 48px; }
.wc-facts-media { margin: 0; aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--radius-lg); background: var(--color-cream-dark); }
.wc-facts-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 400ms ease; }
.wc-facts-item:hover .wc-facts-media img { transform: scale(1.02); }
.wc-facts-body { padding-top: 20px; margin-top: 20px; border-top: 1px solid var(--color-line); }
.wc-facts-num { font-family: var(--font-heading); font-weight: 700; font-size: 0.85rem; color: var(--color-earth); letter-spacing: 0.06em; margin-bottom: 10px; }
.wc-facts-body h3 { font-size: 1.05rem; margin: 0 0 8px; }
.wc-facts-body p { color: var(--color-text-light); font-size: 0.92rem; margin: 0; line-height: 1.55; }
@media (max-width: 860px) {
  .wc-facts-grid { grid-template-columns: 1fr; gap: 32px; }
  .wc-facts-media { aspect-ratio: 4 / 3; }
}
@media (prefers-reduced-motion: reduce) {
  .wc-facts-media img { transition: none; }
}

/* ---------- Shared left-aligned "lede" intro: eyebrow + heading directly
   above its supporting copy, in a single column. Introduced Sep 2026 to
   replace two separate centred text blocks (the Growing Region intro
   and the Southern Chilean Climate intro) with one consistent intro
   pattern, used twice in a row, so the section reads as a single
   considered layout system rather than repeated centred paragraphs.
   Rettelse 2 (comment feedback): the original version put the heading in
   its own left grid column (1.1fr) beside a narrower copy column (1fr).
   Since the heading is always much shorter than the 2-3 paragraphs next
   to it, that left column ended in a tall block of empty space beside
   the copy — read as something missing rather than a deliberate layout.
   Rebuilt as a single stacked column (no side-by-side split at any
   width) so the heading runs directly into the copy with no gap next to
   it. Page-scoped to why-rosehips-from-chile.html only; .section-head
   itself is untouched. ---------- */
.wc-lede-grid { display: block; text-align: left; }
.wc-lede-head h2 { margin: 10px 0 0; max-width: 640px; }
.wc-lede-copy { max-width: 640px; margin-top: 22px; }
.wc-lede-copy p { color: var(--color-text-light); margin: 0 0 14px; line-height: 1.65; }
.wc-lede-copy p:last-child { margin-bottom: 0; }
/* Rettelse (Sep 29 2026, artifact comment: "livligt tekst der popper
   frem når man scroller"): both intros built on .wc-lede-grid (the
   Southern Chilean Climate lede and the Growing Region lede) now stagger
   their eyebrow/heading in first, then the paragraph, instead of fading
   up as one flat block. Scoped to the two page-specific modifiers so the
   shared .wc-lede-grid pattern itself is untouched. */
.wc-climate-lede.reveal, .wc-region-lede.reveal { opacity: 1; transform: none; transition: none; }
.wc-climate-lede .wc-lede-head, .wc-climate-lede .wc-lede-copy,
.wc-region-lede .wc-lede-head, .wc-region-lede .wc-lede-copy {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 550ms ease, transform 550ms ease;
}
.wc-climate-lede.is-visible .wc-lede-head, .wc-region-lede.is-visible .wc-lede-head {
  opacity: 1; transform: none; transition-delay: 0ms;
}
.wc-climate-lede.is-visible .wc-lede-copy, .wc-region-lede.is-visible .wc-lede-copy {
  opacity: 1; transform: none; transition-delay: 140ms;
}
/* Sep 2026: this intro now sits below the Southern Chilean Climate block
   (immediately above the landscape photograph) instead of opening the
   section, so it needs its own top spacing rather than relying on the
   section's padding-top. */
.wc-region-lede { margin-top: 64px; margin-bottom: 56px; }
.wc-climate-lede { margin-top: 48px; margin-bottom: 28px; }
@media (max-width: 760px) {
  .wc-lede-head h2, .wc-lede-copy { max-width: none; }
}

/* Rettelse (comment feedback, Sep 26): "Sunny Days. Cool Nights." intro
   narrowed to ~720px (was 640px) and given its own subtle right-hand
   divider so the now-shorter text doesn't read as a stray box floating in
   a too-wide, too-empty container. Scoped to .wc-climate-lede only — the
   shared .wc-lede-head/.wc-lede-copy rules (also used by
   .wc-region-lede further down this page) are untouched. */
.wc-climate-lede { position: relative; }
.wc-climate-lede .wc-lede-head h2,
.wc-climate-lede .wc-lede-copy { max-width: 720px; }
.wc-climate-lede::after {
  content: '';
  position: absolute;
  top: 6px;
  bottom: 6px;
  left: 780px;
  width: 1px;
  background: var(--color-line);
  opacity: 0.7;
}
@media (max-width: 1050px) {
  .wc-climate-lede::after { display: none; }
}

/* ---------- The Southern Chilean Climate (additive, Sep 2026; restyled
   later the same month into one continuous editorial story, then again
   into the current two-column Sunny Days/Cool Nights composition below).
   Every class here is new and scoped to this section only; nothing
   shared/common was changed. Sunny days -> cool nights -> morning
   moisture -> the Pacific/Andes landscape that shapes the growing
   region. ---------- */
.wc-climate-wrap { margin-top: 0; }

/* Cinematic full-bleed intro image, edge to edge like the microclimate
   divider and Andes panorama further down this page (see
   .wc-divider-fullbleed / .wc-panorama-fullbleed) so the sunrise reads as an
   immersive opening frame rather than a boxed card. The former SUKO Nordic
   logo watermark in the source photo's top-right corner has been removed
   directly from the image file (blended into the surrounding sky), so the
   crop is now free to favour the sun and horizon rather than protecting a
   corner. The image is still rendered slightly oversized (height 112%,
   offset -6% from the top) purely to give the gentle parallax script below
   a few extra pixels of vertical travel to draw from without ever exposing
   an edge.
   Rettelse (comment feedback): this wrap's own margin-top used to stack on
   top of .wc-climate-wrap's margin-top AND .wc-facts's section padding —
   three separate top offsets meant to each be "a small deliberate gap" on
   their own, but compounding into one large empty band. The single ~40px
   pause now lives entirely in .wc-facts's padding-top; this wrap and
   .wc-climate-wrap no longer add their own on top of it.
   Rettelse 2 (comment feedback, Sep 28): that reasoning applied when this
   image opened the section, directly under .wc-facts's own padding. Since
   then the Sunny Days/Cool Nights text+photo grid was moved to sit above
   this image instead (see .wc-climate-days-grid), and with margin-top
   still 0 here, the Cool Nights paragraph text landed right against this
   image's top edge with no breathing room. Restored a deliberate gap here
   specifically (the .wc-facts stacking issue above doesn't apply to this
   position), tapering down at narrower widths. */
.wc-climate-hero-wrap { width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); margin-top: 56px; }
@media (max-width: 900px) {
  .wc-climate-hero-wrap { margin-top: 40px; }
}
@media (max-width: 600px) {
  .wc-climate-hero-wrap { margin-top: 32px; }
}
.wc-climate-hero { position: relative; width: 100%; margin: 0; aspect-ratio: 21 / 9; max-height: 66vh; overflow: hidden; }
.wc-climate-hero img { position: absolute; top: -6%; left: 0; width: 100%; height: 112%; object-fit: cover; object-position: center 46%; display: block; }
@media (max-width: 900px) {
  .wc-climate-hero { aspect-ratio: 4 / 3; max-height: none; }
}
@media (max-width: 600px) {
  .wc-climate-hero { aspect-ratio: 1 / 1; }
}

/* Sunny Days / Cool Nights: redesigned (Sep 2026) from two separate,
   alternating full-width sections — each with a small overlapping detail
   image that read as an unrelated floating box — into one balanced
   two-column composition, so the day/night contrast reads at a single
   glance. Both main photos share the same column width and aspect ratio
   and sit edge-aligned (top and bottom); the detail images have been
   removed from this composition entirely. A very restrained hover scale
   (max ~1.02) replaces the previous stronger detail-image zoom. object-
   position is tuned per image, since the two source photos have very
   different native proportions (a tall portrait vs. a wide panorama) and
   need different crops to keep their subject centred in the same shaped
   box. On mobile the grid collapses to a single column — Sunny Days
   first, Cool Nights second — with no overlap. */
.wc-climate-wide-container { max-width: 1240px; }
/* Rettelse (comment feedback, Sep 26): tightened from 56px so the text
   above reads as part of the same composition as the photos rather than
   a separate block. */
.wc-climate-days-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin-top: 32px; }
.wc-climate-day-media { margin: 0; aspect-ratio: 4 / 5; border-radius: var(--radius-md); overflow: hidden; background: var(--color-cream-dark); }
.wc-climate-day-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 650ms ease; }
.wc-climate-day-media:hover img { transform: scale(1.02); }
.wc-climate-day-col-days .wc-climate-day-media img { object-position: center 38%; }
.wc-climate-day-col-nights .wc-climate-day-media img { object-position: 70% center; }
.wc-climate-day-body { margin-top: 22px; max-width: 420px; }
.wc-climate-day-body .eyebrow { color: var(--color-earth); }
.wc-climate-day-body h3 { margin: 8px 0 12px; font-size: 1.4rem; }
.wc-climate-day-body p { color: var(--color-text-light); margin: 0 0 12px; line-height: 1.6; }
.wc-climate-day-body p:last-child { margin-bottom: 0; }
@media (max-width: 900px) {
  .wc-climate-days-grid { grid-template-columns: 1fr; gap: 40px; margin-top: 32px; }
}

@media (prefers-reduced-motion: reduce) {
  .wc-climate-day-media img,
  .wc-climate-final-photo img { transition: none; }
}

/* Final wide supporting image — repositioned (Sep 2026) from the end of the
   climate story to sit between the regional landscape and the Ripening
   Season section below, since it depicts hand-selection/harvest rather than
   the sunny-day/cool-night climate itself and reads more naturally as a
   bridge into the harvest-focused content that follows. Markup and caption
   are unchanged; only its position on the page has moved. */
.wc-climate-final { max-width: 1140px; margin: 64px auto 0; padding: 0 28px; }
.wc-climate-final-photo { position: relative; margin: 0; aspect-ratio: 3 / 2; border-radius: var(--radius-lg); overflow: hidden; }
.wc-climate-final-photo img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 650ms ease; }
.wc-climate-final-photo:hover img { transform: scale(1.02); }
.wc-climate-final-caption { margin: 18px 0 0; text-align: center; color: var(--color-text-light); font-size: 0.92rem; font-style: italic; }
@media (max-width: 600px) {
  .wc-climate-final { padding: 0 20px; margin-top: 48px; }
}

/* ---------- Large regional landscape — now full-bleed edge to edge (Sep
   2026), matching the .wc-divider-fullbleed / .wc-panorama-fullbleed
   treatment used elsewhere on this page, so it reads as an immersive
   conclusion to the climate story rather than another framed card. The
   source photo has also been re-cropped to favour the mountain range and
   snow-covered peaks, trimming the lake-shore boats and beach below. ---------- */
.wc-region-landscape-fullbleed { width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); margin-top: 40px; }
.wc-region-landscape { position: relative; width: 100%; margin: 0; aspect-ratio: 21 / 8; min-height: 420px; max-height: 640px; overflow: hidden; }
/* Rettelse (Sep 29 2026, artifact comment: praise for "these big drone
   photos", asking for more dynamism): given the same small scroll-tied
   drift as the climate hero photo (see [data-climate-parallax] in the
   page script) — needs the same absolute-positioned, oversized (112%)
   img so the drift never exposes an edge. */
.wc-region-landscape img { position: absolute; top: -6%; left: 0; width: 100%; height: 112%; object-fit: cover; display: block; }
.wc-region-landscape-overlay { position: absolute; left: 0; bottom: 0; z-index: 2; margin: 0; padding: 40px 56px; background: linear-gradient(0deg, rgba(10,9,6,0.44) 0%, rgba(10,9,6,0.18) 60%, rgba(10,9,6,0) 100%); }
.wc-region-landscape-overlay .eyebrow { color: rgba(255,255,255,0.9); }
.wc-region-landscape-overlay h3 { font-family: var(--font-heading); color: #fff; margin: 8px 0 0; font-size: 1.3rem; }
@media (max-width: 900px) {
  .wc-region-landscape { aspect-ratio: 16 / 9; min-height: 320px; }
  .wc-region-landscape-overlay { padding: 30px 32px; }
}
@media (max-width: 600px) {
  .wc-region-landscape-fullbleed { margin-top: 32px; }
  .wc-region-landscape { aspect-ratio: 4 / 3; min-height: 260px; }
  .wc-region-landscape-overlay { padding: 20px 20px; }
}

/* ---------- The Ripening Season — editorial 58/42 split replacing the old
   three-card facts grid (image left, numbered points with thin dividers
   right; Sep 2026 editorial redesign) ---------- */
.wc-season-split { display: grid; grid-template-columns: 1.38fr 1fr; gap: 0; margin-top: 56px; border-radius: var(--radius-lg); overflow: hidden; }
.wc-season-media { margin: 0; min-height: 680px; }
.wc-season-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wc-season-text { background: var(--color-cream-dark); padding: 48px 44px; display: flex; flex-direction: column; justify-content: center; }
.wc-season-text .eyebrow { color: var(--color-earth); }
.wc-season-text h2 { margin: 10px 0 0; }
.wc-season-points { list-style: none; margin: 28px 0 0; padding: 0; border-top: 1px solid var(--color-line); }
.wc-season-points li { display: flex; gap: 16px; padding: 20px 0; border-bottom: 1px solid var(--color-line); }
.wc-season-num { font-family: var(--font-heading); font-weight: 700; font-size: 0.85rem; color: var(--color-earth); letter-spacing: 0.06em; flex-shrink: 0; padding-top: 2px; }
.wc-season-points h4 { font-family: var(--font-heading); font-weight: 600; font-size: 1rem; color: var(--color-forest-dark); margin: 0 0 6px; }
.wc-season-points p { color: var(--color-text-light); font-size: 0.92rem; margin: 0; line-height: 1.55; }

/* Sep 2026 (comment feedback): the hand-selecting photo now lives inside
   this same card as a second stacked image in the media column, instead
   of its own separate box above it. Two photos, equal height, a hairline
   gap between them so they read as one deliberate pairing rather than a
   seam. */
.wc-season-media-duo { display: flex; flex-direction: column; gap: 3px; height: 100%; }
.wc-season-media-duo .wc-season-media-item { margin: 0; flex: 1; min-height: 0; overflow: hidden; }
.wc-season-media-duo .wc-season-media-item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 650ms ease; }
.wc-season-media-duo .wc-season-media-item:hover img { transform: scale(1.02); }
@media (prefers-reduced-motion: reduce) {
  .wc-season-media-duo .wc-season-media-item img { transition: none; }
}

@media (max-width: 860px) {
  .wc-season-split { grid-template-columns: 1fr; }
  .wc-season-media { min-height: 340px; aspect-ratio: 4 / 3; }
  /* Two stacked photos need more total height than one, and a fixed
     min-height (rather than the single-photo aspect-ratio above) so each
     half still gets a comfortable, non-letterboxed crop on narrow screens. */
  .wc-season-media-duo { min-height: 420px; aspect-ratio: auto; }
  .wc-season-text { padding: 36px 28px; }
}

/* ---------- Atmospheric full-width divider — Southern Chile waterfall,
   label only, between the Ripening Season and Cultivated sections
   (Sep 2026 editorial redesign) ---------- */
.wc-divider-section { padding: 0; }
.wc-divider-fullbleed { width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); }
.wc-divider { position: relative; height: 560px; margin: 0; overflow: hidden; }
/* Rettelse (Sep 29 2026, artifact comment): same gentle scroll drift as
   the climate hero and region-landscape photos above — inset:0 swapped
   for an oversized top:-6%/height:112% so the drift has room to move. */
.wc-divider img { position: absolute; top: -6%; left: 0; width: 100%; height: 112%; object-fit: cover; display: block; }
.wc-divider-label { position: absolute; left: 28px; bottom: 22px; z-index: 2; margin: 0; font-family: var(--font-heading); font-weight: 600; font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; color: #fff; text-shadow: 0 1px 6px rgba(0,0,0,0.45); }
@media (max-width: 900px) {
  .wc-divider { height: 440px; }
}
@media (max-width: 600px) {
  .wc-divider { height: 320px; }
  .wc-divider-label { left: 20px; bottom: 16px; }
}

/* ---------- Divider editorial overlay (Rettelse, Sep 2026) — a discreet
   lower-left eyebrow/heading/copy block replacing the plain "Southern
   Chile" label above. A narrow, localised gradient sits only behind the
   text (not across the whole image), so the waterfall photo stays visually
   dominant. Below 700px the overlay is hidden and a plain cream caption
   block (.wc-divider-caption-mobile) is shown beneath the image instead,
   since a text overlay would compromise readability at that crop height. ---------- */
.wc-divider-overlay {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 2;
  margin: 0;
  max-width: 460px;
  padding: 64px 40px 30px 32px;
  background: linear-gradient(100deg, rgba(10,9,6,0.62) 0%, rgba(10,9,6,0.4) 52%, rgba(10,9,6,0) 100%);
}
.wc-divider-overlay .eyebrow { display: block; color: rgba(255,255,255,0.9); margin-bottom: 10px; }
.wc-divider-overlay h3 { font-family: var(--font-heading); font-weight: 600; color: #fff; margin: 0 0 10px; font-size: 1.3rem; line-height: 1.26; letter-spacing: -0.01em; }
.wc-divider-overlay p { color: rgba(255,255,255,0.86); font-size: 0.9rem; line-height: 1.55; margin: 0; max-width: 36ch; }
.wc-divider-caption-mobile { display: none; }
@media (max-width: 700px) {
  .wc-divider-overlay { display: none; }
  .wc-divider-caption-mobile {
    display: block;
    background: var(--color-cream-dark);
    padding: 26px 24px 30px;
  }
  .wc-divider-caption-mobile .eyebrow { color: var(--color-earth); margin-bottom: 8px; }
  .wc-divider-caption-mobile h3 { font-family: var(--font-heading); font-weight: 600; color: var(--color-forest-dark); margin: 0 0 8px; font-size: 1.15rem; }
  .wc-divider-caption-mobile p { color: var(--color-text-light); font-size: 0.88rem; line-height: 1.55; margin: 0; }
}

/* ---------- Cultivated, Not Wild-Harvested — premium two-column editorial
   section replacing the "Sun by Day. Cool by Night." split (unsupported
   AP-4®-specific mechanism claims removed; see project notes) ---------- */
.wc-cultivated-grid { grid-template-columns: 1.38fr 1fr; gap: 56px; align-items: stretch; }
.wc-cultivated-media { position: relative; order: -1; width: 100%; height: 100%; margin: 0; overflow: hidden; border-radius: var(--radius-lg); }
/* Rettelse (Sep 29 2026, artifact comment): same gentle scroll drift as
   the other large landscape photos on this page — position:relative
   added to the figure above so this oversized img has something to sit
   inside. */
.wc-cultivated-media img { position: absolute; top: -6%; left: 0; width: 100%; height: 112%; object-fit: cover; display: block; }
.wc-cultivated-text p { color: var(--color-text-light); margin: 14px 0 30px; }
.wc-cultivated-points { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--color-line); }
.wc-cultivated-points li { padding: 20px 0; border-bottom: 1px solid var(--color-line); }
.wc-cultivated-points li h4 { font-family: var(--font-heading); font-weight: 600; font-size: 1rem; color: var(--color-forest-dark); margin: 0 0 6px; }
.wc-cultivated-points li p { color: var(--color-text-light); font-size: 0.92rem; margin: 0; }
/* Rettelse (Sep 29 2026, artifact comment: "livligt tekst der popper
   frem når man scroller"): eyebrow+heading, then each paragraph, then the
   points list, fade up in a short cascade instead of all at once. */
.wc-cultivated-text.reveal { opacity: 1; transform: none; transition: none; }
.wc-cultivated-text > .eyebrow, .wc-cultivated-text > h2,
.wc-cultivated-text > p, .wc-cultivated-text > .wc-cultivated-points {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 550ms ease, transform 550ms ease;
}
.wc-cultivated-text.is-visible > .eyebrow { opacity: 1; transform: none; transition-delay: 0ms; }
.wc-cultivated-text.is-visible > h2 { opacity: 1; transform: none; transition-delay: 60ms; }
.wc-cultivated-text.is-visible > p:nth-of-type(1) { opacity: 1; transform: none; transition-delay: 150ms; }
.wc-cultivated-text.is-visible > p:nth-of-type(2) { opacity: 1; transform: none; transition-delay: 230ms; }
.wc-cultivated-text.is-visible > .wc-cultivated-points { opacity: 1; transform: none; transition-delay: 320ms; }
@media (max-width: 800px) {
  .wc-cultivated-grid { grid-template-columns: 1fr; }
  .wc-cultivated-media { order: 0; height: auto; aspect-ratio: 4 / 3; }
}
/* Enlarged treatment (Sep 2026): taller minimum image height on desktop so
   the section reads as substantially larger / more premium, still a 58/42
   image/text split (image column is 1.38fr of 1.38fr+1fr = 58%).
   Rettelse (comment feedback): the image previously had a fixed
   aspect-ratio (4:3) plus a 600px min-height, and the grid centred it
   (align-items:center) against the much taller text column (2 paragraphs
   + a 3-item list) — leaving a block of empty space above and below the
   image equal to roughly half the height difference. The grid is now
   align-items:stretch (set above) and the image fills its column's full,
   stretched height via height:100% + object-fit:cover, so there is no
   leftover gap at any content length; a min-height is kept only as a
   floor for when the text column is short. */
.wc-cultivated-grid-large .wc-cultivated-media { min-height: 600px; }
@media (max-width: 800px) {
  .wc-cultivated-grid-large .wc-cultivated-media { min-height: 0; }
}

/* ---------- A Distinct Growing Region — full-bleed panoramic landscape with a
   restrained lower-left overlay, plus a short origin statement beneath it
   (replaces the "Protected by Geography" compass list + isolation/pest claims) ---------- */
/* Rettelse (comment feedback, Sep 26): this section opens directly with
   the full-bleed panorama image (no heading above it), so the base
   `section` rule's 88px top padding was stacking with the previous
   section's own 88px bottom padding, leaving a large blank cream band
   with nothing in it. Removed here only, on this section's top side —
   its bottom padding (before "From Place to Process") is unchanged. */
.wc-panorama-section { padding-top: 0; }
.wc-panorama-fullbleed { width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); }
.wc-panorama { position: relative; height: 68vh; min-height: 440px; max-height: 720px; overflow: hidden; margin: 0; }
/* Rettelse (Sep 29 2026, artifact comment): same gentle scroll drift as
   the other large landscape photos on this page. object-position:center
   82% (set inline on the img) still applies with height:112% — cover
   just has slightly more image to work with now. */
.wc-panorama img { position: absolute; top: -6%; left: 0; width: 100%; height: 112%; object-fit: cover; display: block; }
/* Rettelse, Sep 2026: was a full-width horizontal band (linear-gradient
   across the whole image); now a radial gradient anchored at the
   bottom-left corner so only the area behind the eyebrow/heading is
   darkened and the rest of the landscape — including the Andes — stays
   fully undarkened, per instruction not to darken the whole image. */
.wc-panorama-scrim { position: absolute; inset: 0; z-index: 1; background: radial-gradient(120% 90% at 0% 100%, rgba(10,9,6,0.56) 0%, rgba(10,9,6,0.3) 32%, rgba(10,9,6,0) 62%); pointer-events: none; }
/* Rettelse, Sep 2026: bottom padding raised by a fixed ~80px on top of the
   original 6% so the heading clears the image's lower edge with a
   generous safe margin instead of crowding it; left margin widened
   slightly to match.
   Rettelse 2 (comment feedback, still crowding the bottom edge): the fix
   above never actually took effect — box-sizing:content-box plus
   height:100% meant the padding-bottom was added ON TOP of the 100%-tall
   content box, pushing the figcaption's total height past the figure's
   own height, and that overflow was silently clipped by the figure's
   overflow:hidden. The flex-end content therefore always bottomed out
   flush with the image edge regardless of the padding value. Switched to
   border-box so height:100% is the full box (padding included), and the
   padding-bottom is now genuinely subtracted from the available content
   height, lifting the heading clear of the bottom edge as intended. */
.wc-panorama-text { position: relative; z-index: 2; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; padding: 0 7% calc(6% + 80px); max-width: 620px; margin: 0; box-sizing: border-box; }
.wc-panorama-text .eyebrow { color: var(--color-accent-soft); margin-bottom: 12px; }
.wc-panorama-text h2 { color: #fff; margin: 0; }
/* Rettelse, Sep 2026: top margin increased from 40px to 84px (within the
   requested 72-96px range) so the paragraph reads as a deliberate,
   spacious transition rather than sitting flush under the photo. */
.wc-panorama-below { max-width: 620px; margin: 84px auto 0; text-align: center; }
/* Rettelse (comment feedback, Sep 28): was set in the muted secondary grey
   (--color-text-light) at the base 17px body size, which read as an
   afterthought under the panorama photo rather than a considered closing
   line. Switched to the primary near-black body colour, sized up and given
   a touch more weight and line-height so it reads as a deliberate, more
   prominent statement. Scoped to this paragraph only. */
.wc-panorama-below p { color: var(--color-text); font-size: 1.18rem; font-weight: 500; line-height: 1.6; margin: 0; }
@media (max-width: 760px) {
  .wc-panorama { height: 50vh; min-height: 320px; }
  .wc-panorama-text { padding: 0 6% calc(8% + 56px); max-width: none; }
}

/* ---------- From Place to Process — closing cultivation-standards panel
   (replaces the sparse "Consistency at Every Step" four-column grid) ---------- */
.wc-close-panel { background: var(--color-earth); border-radius: var(--radius-lg); padding: 64px 48px; }
.wc-close-intro { max-width: 640px; }
.wc-close-intro .eyebrow { color: var(--color-cream); }
.wc-close-intro h2 { color: #fff; }
.wc-close-intro p { color: rgba(255,255,255,0.78); }
.wc-close-steps { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 48px; }
.wc-close-step { padding: 0 28px; border-left: 1px solid rgba(255,255,255,0.18); }
.wc-close-step:first-child { padding-left: 0; border-left: none; }
.wc-close-step:last-child { padding-right: 0; }
.wc-close-num { font-family: var(--font-heading); font-weight: 700; font-size: 0.85rem; color: var(--color-shop-orange); letter-spacing: 0.06em; margin-bottom: 14px; }
.wc-close-step h3 { color: #fff; font-size: 1.02rem; margin: 0 0 8px; }
.wc-close-step p { color: rgba(255,255,255,0.72); font-size: 0.9rem; margin: 0; line-height: 1.55; }
.wc-close-step.reveal:nth-child(1) { transition-delay: 0ms; }
.wc-close-step.reveal:nth-child(2) { transition-delay: 90ms; }
.wc-close-step.reveal:nth-child(3) { transition-delay: 180ms; }
.wc-close-step.reveal:nth-child(4) { transition-delay: 270ms; }
.wc-close-cta { margin-top: 52px; padding-top: 32px; border-top: 1px solid rgba(255,255,255,0.18); text-align: center; }
.wc-close-cta p { color: rgba(255,255,255,0.86); font-size: 0.98rem; margin: 0 0 18px; }
.wc-close-cta-links { display: flex; gap: 28px; justify-content: center; flex-wrap: wrap; }
.wc-close-link-primary, .wc-close-link-secondary { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: 0.92rem; text-decoration: underline; text-underline-offset: 3px; }
.wc-close-link-primary { color: #fff; }
.wc-close-link-secondary { color: rgba(255,255,255,0.78); }
.wc-close-link-primary span, .wc-close-link-secondary span { display: inline-block; transition: transform 250ms ease; }
.wc-close-link-primary:hover span, .wc-close-link-secondary:hover span { transform: translateX(3px); }
@media (max-width: 900px) {
  .wc-close-panel { padding: 52px 32px; }
  .wc-close-steps { grid-template-columns: 1fr 1fr; row-gap: 40px; }
  .wc-close-step:nth-child(odd) { padding-left: 0; border-left: none; }
  .wc-close-step:nth-child(even) { padding-left: 28px; }
  .wc-close-step:nth-child(n+3) { padding-top: 32px; border-top: 1px solid rgba(255,255,255,0.18); }
}
@media (max-width: 600px) {
  .wc-close-panel { padding: 44px 24px; }
  .wc-close-steps { grid-template-columns: 1fr; row-gap: 0; }
  .wc-close-step { padding: 28px 0 !important; border-left: none !important; border-top: 1px solid rgba(255,255,255,0.18); }
  .wc-close-step:first-child { padding-top: 0; border-top: none; }
  .wc-close-cta-links { flex-direction: column; gap: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .wc-hero-copy.reveal { transition: none; }
  .wc-close-link-primary span, .wc-close-link-secondary span { transition: none; }
}

/* ==================================================================
   AP-4® Plant DNA Barcoding — redesign (Sep 2026)
   Restrained "evidence strip", one consolidated process timeline,
   and a minimal 3-point list — no repeated sets of white cards.
   ================================================================== */

/* DNA hero panel: real rosehip photo + a refined genetic-record panel,
   replacing the old placeholder image + separate evidence strip. All
   record values shown here are taken verbatim from the public GenBank
   record for accession OP737785.1 — see comment in ap-4-dna-barcoding.html.
   Sep 2026: refined into a premium scientific-evidence module — 46/54
   split, 26px corners, a hairline border + soft shadow instead of the
   heavier box-shadow, a 2x2 metadata grid (was a 2-item row), a
   monospace accession value, and a clarification line separating the
   public ITS2 species-level reference from the separate AP-4®-specific
   qPCR method described further down the page. */
.dna-hero-panel {
  display: grid;
  grid-template-columns: 46fr 54fr;
  border-radius: 26px;
  overflow: hidden;
  border: 1px solid var(--color-line);
  box-shadow: var(--shadow-sm);
  margin: 8px 0 40px;
}
/* Sep 2026 (revised): the previous object-fit:cover treatment stretched
   the photo to the full grid-row height, which cropped both rosehip
   halves too aggressively — the point of this photo is to show the
   complete cross-section. The image now keeps its natural aspect ratio
   (width:100%, height:auto — never cropped or distorted) and sits
   centered in its column. Its background colour is matched to the
   photo's own near-white backdrop (#FBF6ED sampled from the source
   image, practically identical to --color-cream), so on the rare
   viewport where the record panel's content is taller than the photo's
   natural height, the small margin above/below the photo reads as a
   continuation of the photo's own backdrop rather than a visible cream
   "band" or a second frame. */
.dna-hero-photo {
  position: relative;
  background: #FBF6ED;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.dna-hero-photo img { display: block; width: 100%; height: auto; object-fit: contain; }
.dna-hero-record {
  background: var(--color-cream-dark);
  padding: 44px 48px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.dna-hero-record-label {
  display: block;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-earth);
  margin-bottom: 12px;
}
.dna-hero-record-name {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 1.5rem;
  color: var(--color-forest-dark);
  line-height: 1.3;
  margin: 0 0 8px;
}
.dna-hero-record-byline { font-size: 0.86rem; color: var(--color-text-light); margin: 0 0 20px; }
.dna-hero-record-fields { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px 28px; border-top: 1px solid var(--color-line); padding-top: 18px; margin-bottom: 16px; }
.dna-hero-record-field-label { display: block; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-text-light); margin-bottom: 6px; }
.dna-hero-record-field-value { display: block; font-family: var(--font-heading); font-weight: 700; font-size: 1.2rem; color: var(--color-forest-dark); letter-spacing: 0.01em; }
.dna-hero-accession-value { font-family: 'SF Mono', 'Cascadia Code', 'Courier New', monospace; font-size: 1.32rem; font-weight: 600; letter-spacing: 0.01em; }
.dna-hero-clarification { font-size: 0.84rem; color: var(--color-text-light); line-height: 1.55; margin: 0 0 18px; }
.dna-hero-sequence {
  border-top: 1px solid var(--color-line);
  border-bottom: 1px solid var(--color-line);
  padding: 14px 0;
  margin-bottom: 20px;
}
.dna-hero-sequence-label { display: block; font-size: 0.68rem; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; color: var(--color-text-light); margin-bottom: 10px; }
.dna-hero-sequence-text {
  display: block;
  font-family: 'SF Mono', 'Cascadia Code', 'Courier New', monospace;
  font-size: 0.84rem;
  color: var(--color-earth);
  letter-spacing: 0.02em;
  line-height: 1.7;
  word-break: break-all;
}
@media (max-width: 800px) {
  .dna-hero-panel { grid-template-columns: 1fr; }
  /* No fixed aspect-ratio here: the image already keeps its own natural
     ratio (width:100%, height:auto) at every width, full-bleed above the
     text panel, so the complete photo is always shown uncropped. */
  .dna-hero-record { padding: 36px 28px; }
  .dna-hero-record-fields { grid-template-columns: 1fr 1fr; gap: 18px; }
}
@media (max-width: 480px) {
  .dna-hero-record-fields { grid-template-columns: 1fr; }
}

/* Evidence strip: elegant factual markers, not cards */
.dna-proof-strip {
  display: flex;
  align-items: stretch;
  border-top: 1px solid var(--color-line);
  border-bottom: 1px solid var(--color-line);
  padding: 30px 0;
}
.dna-proof-item { flex: 1; text-align: center; padding: 0 20px; position: relative; transition: transform 250ms ease; }
.dna-proof-item + .dna-proof-item::before { content: ''; position: absolute; left: 0; top: 6px; bottom: 6px; width: 1px; background: var(--color-line); }
.dna-proof-label { display: block; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--color-text-light); margin-bottom: 8px; transition: color 250ms ease; }
.dna-proof-value { display: block; font-family: var(--font-heading); font-weight: 600; font-size: 1.15rem; color: var(--color-forest-dark); letter-spacing: -0.01em; }
@media (hover: hover) and (pointer: fine) {
  .dna-proof-item:hover { transform: translateY(-4px); }
  .dna-proof-item:hover .dna-proof-label { color: var(--color-shop-orange); }
}
@media (max-width: 700px) {
  .dna-proof-strip { flex-direction: column; gap: 22px; padding: 26px 0; }
  .dna-proof-item { padding: 0; }
  .dna-proof-item + .dna-proof-item::before { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .dna-proof-item { transition: none; }
}

/* ---------- Introduction — 50/50 editorial split (Sep 2026): text on the
   left, the authentic field photo filling the right column, replacing the
   old centered text block + separate full-width photo banner below it.
   New page-scoped classes: am-intro-split / am-intro-text / am-intro-media. ---------- */
/* ---------- Neutral photo placeholder (Sep 28) — this page-scoped-only
   fill sits in for a photo removed for duplicating imagery already used on
   the MaquiPro page (same photoshoot/scene on both pages). Soft on-brand
   gradient + a quiet outline icon so the layout stays intact and nothing
   looks broken while a replacement photo is pending. Remove this div and
   restore an <img> once a new photo is in place. ---------- */
.am-photo-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--color-cream) 0%, var(--color-cream-dark) 45%, var(--color-line) 100%); }
.am-photo-placeholder svg { width: 15%; max-width: 56px; height: auto; color: var(--color-earth); opacity: 0.18; }

/* Rettelse (Sep 28, full-page redesign): .am-nature-duo/.am-nature-trio
   (the old 2-3 photo equal-column gallery) are no longer used on this
   page — the redesign replaces the old scattered gallery with two more
   deliberate, purpose-built layouts below (.am-intro-grid for the
   introduction, .am-origin-grid for Origin & Tradition). The rules are
   left in place as page-scoped dead code per the site's standing
   convention (see .am-hierarchy above), rather than deleted. */
.am-nature-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: start; }
.am-nature-duo.am-nature-trio { grid-template-columns: 1fr 1fr 1fr; }
.am-nature-duo figure { margin: 0; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); }
.am-nature-duo img { display: block; width: 100%; height: auto; transition: transform 550ms ease; }
.am-nature-duo figure:hover img { transform: scale(1.02); }
@media (max-width: 900px) {
  .am-nature-duo.am-nature-trio { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 700px) {
  .am-nature-duo, .am-nature-duo.am-nature-trio { grid-template-columns: 1fr; gap: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .am-nature-duo img { transition: none; }
}

/* Rettelse (Sep 28, personality/premium-feel pass): .am-intro-grid /
   .am-intro-media (the 50/50 editorial split used for the earlier merged
   "Native to Southern Chile" box) is no longer used — that section is now
   .am-origin-split below, a full-bleed .split-edge-section variant with a
   stronger, more immersive image. Left in place as page-scoped dead code
   per the site's standing convention. */
.two-col-grid.am-intro-grid { align-items: stretch; gap: 52px; }
.am-intro-media { margin: 0; height: 100%; min-height: 360px; border-radius: var(--radius-lg); overflow: hidden; }
.am-intro-media img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 550ms ease; }
.am-intro-media:hover img { transform: scale(1.02); }
@media (max-width: 800px) {
  .am-intro-media { min-height: 320px; }
}
@media (prefers-reduced-motion: reduce) {
  .am-intro-media img { transition: none; }
}

/* ---------- Native to Southern Chile — full-bleed split, warm & immersive
   (Sep 28, personality/premium-feel pass). Built on the shared
   .split-edge-section.image-right (same edge-to-edge component used for
   Private Label's Controlled Production / Milled to Order), so the photo
   genuinely bleeds to the viewport edge for real visual presence, instead
   of sitting in a boxed figure beside text of equal weight. A warm
   brown-amber gradient (deliberately warmer than the site's usual
   near-black overlay tone, to match "make the section feel warmer") rises
   from the image's foot with a small italic location caption. A short
   orange accent rule above the eyebrow is this section's own signature
   touch. Kept out of .is-visible-gated scale/transition treatment (unlike
   pl-controlled-production/pl-milled-order) since this section already
   carries the page's ambient .reveal fade — a second competing motion on
   the same element would be one animation too many. */
.split-edge-section.am-origin-split { min-height: 560px; }
.split-edge-section.am-origin-split .split-edge-media::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 42%;
  background: linear-gradient(0deg, rgba(58,32,12,0.55) 0%, rgba(58,32,12,0) 100%);
  pointer-events: none;
}
.am-origin-media-caption {
  position: absolute;
  left: 32px;
  bottom: 26px;
  z-index: 1;
  font-family: var(--font-heading);
  font-style: italic;
  font-weight: 500;
  font-size: 0.92rem;
  color: rgba(255,255,255,0.92);
  letter-spacing: 0.01em;
}
.am-origin-accent { display: block; width: 40px; height: 3px; border-radius: 2px; background: var(--color-shop-orange); margin-bottom: 14px; }
.split-edge-section.am-origin-split .split-edge-text-inner p { max-width: 42ch; }
@media (max-width: 900px) {
  .split-edge-section.am-origin-split { min-height: 0; }
  .am-origin-media-caption { left: 28px; bottom: 20px; }
}

/* ---------- Origin & Tradition — asymmetric 65/35 editorial photo pair
   (Sep 28, full-page redesign). Two images read as one unified series:
   the wide image sets the row's height via its own aspect-ratio (so it
   is never force-cropped away from its natural composition), and the
   narrower detail figure stretches to match that same height (default
   grid align-self: stretch) with object-fit:cover absorbing the
   difference — this is a deliberate exception to the "never force-crop"
   convention used elsewhere on the page, because the brief specifically
   asked for these two to align top and bottom as one series. ---------- */
.am-origin-grid { display: grid; grid-template-columns: 1.85fr 1fr; gap: 24px; }
.am-origin-grid figure { margin: 0; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); }
.am-origin-wide { aspect-ratio: 1280 / 853; }
.am-origin-wide img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 550ms ease; }
.am-origin-detail { height: 100%; }
.am-origin-detail img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 550ms ease; }
.am-origin-grid figure:hover img { transform: scale(1.02); }
@media (max-width: 700px) {
  .am-origin-grid { grid-template-columns: 1fr; gap: 20px; }
  .am-origin-detail { height: auto; aspect-ratio: 682 / 1024; }
}
@media (prefers-reduced-motion: reduce) {
  .am-origin-wide img, .am-origin-detail img { transition: none; }
}

/* Rettelse (Sep 28, personality/premium-feel pass): the old asymmetric
   .am-colour-grid two-col layout (text beside a tall branch photo — the
   same shape as "Native to Southern Chile" above it, which is exactly
   what the brief asked to change) is no longer used. .am-stat-callout /
   .am-stat-figure / .am-stat-caption / .am-stat-note (the plain stacked
   number) are also no longer used — replaced by .am-meter below, per the
   dataviz guidance that a single ratio against a limit is a meter, not a
   bare hero figure. .am-colour-media is no longer used either — replaced
   by the circular .am-colour-portrait. All left in place as page-scoped
   dead code, per the site's standing convention. .am-colour-body remains
   live, reused on the new layout below. */
.two-col-grid.am-colour-grid { grid-template-columns: 0.82fr 1fr; align-items: start; }
@media (max-width: 800px) { .two-col-grid.am-colour-grid { grid-template-columns: 1fr; } }
.am-colour-body { color: var(--color-text-light); max-width: 46ch; }
.am-stat-callout { margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--color-line); max-width: 46ch; }
.am-stat-figure { display: block; font-family: var(--font-heading); font-weight: 700; font-size: 3rem; line-height: 1; color: var(--color-forest-dark); }
.am-stat-caption { margin: 10px 0 0; color: var(--color-text-light); font-size: 1rem; line-height: 1.5; }
.am-stat-note { margin: 8px 0 0; color: var(--color-text-light); font-size: 0.78rem; opacity: 0.8; }
.am-colour-media { margin: 0; border-radius: var(--radius-lg); overflow: hidden; }
.am-colour-media img { display: block; width: 100%; height: auto; transition: transform 550ms ease; }
.am-colour-media:hover img { transform: scale(1.02); }
@media (prefers-reduced-motion: reduce) {
  .am-colour-media img { transition: none; }
}

/* ---------- The Science of Colour — circular macro portrait + meter
   (Sep 28, personality/premium-feel pass). Deliberately the OPPOSITE
   composition to "Native to Southern Chile" above it: contained rather
   than full-bleed, a circular close-up rather than a tall rectangle, and
   its own soft indigo section background (--color-announce-bg, already
   used sitewide for the nav dropdown/announcement bar — not a new
   colour) instead of bg-alt, so the page visibly changes rooms between
   the two sections rather than just recolouring the same shape twice.
   The portrait sits inside a soft deep-purple radial glow ("a subtle
   deep-purple accent") built from --color-earth at low opacity — quieter
   than a hard ring, reads as light gathering behind the fruit rather
   than a decorative frame. */
.am-colour-section { background: var(--color-announce-bg); padding: 96px 0; }
.am-colour-feature { display: grid; grid-template-columns: 0.62fr 1fr; gap: 56px; align-items: center; }
.am-colour-portrait-wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1 / 1;
  max-width: 360px;
  margin: 0 auto;
}
.am-colour-portrait-wrap::before {
  content: '';
  position: absolute;
  inset: -10%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(48,43,117,0.22) 0%, rgba(48,43,117,0) 68%);
}
.am-colour-portrait {
  position: relative;
  margin: 0;
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  border: 1px solid rgba(48,43,117,0.14);
}
.am-colour-portrait img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 650ms ease; }
.am-colour-feature:hover .am-colour-portrait img { transform: scale(1.04); }
.am-colour-content .eyebrow { color: var(--color-earth); }
.am-meter { margin-top: 26px; max-width: 42ch; }
.am-meter-head { display: flex; align-items: baseline; gap: 14px; margin-bottom: 10px; }
.am-meter-value { font-family: var(--font-heading); font-weight: 700; font-size: 2.1rem; line-height: 1; color: var(--color-forest-dark); font-variant-numeric: proportional-nums; }
.am-meter-label { font-size: 0.82rem; line-height: 1.35; color: var(--color-text-light); }
.am-meter-track { width: 100%; height: 10px; border-radius: 6px; background: var(--color-announce-bg); border: 1px solid rgba(48,43,117,0.16); overflow: hidden; }
.am-meter-fill { width: 0%; height: 100%; border-radius: 6px; background: var(--color-earth); transition: width 900ms ease; }
/* Rettelse (Sep 28, second follow-up): fill updated from 74% (EFSA, 2019)
   to 78% — Amanda cross-checked against Brauch et al. (2016, Food
   Chemistry), which measured a slightly higher 78% delphinidin-glycoside
   share in dried maqui fruit; that paper is now the primary citation,
   with EFSA kept as a supporting reference. See the HTML comment above
   the .am-colour-section markup for the full citation history. */
.am-colour-feature.is-visible .am-meter-fill { width: 78%; }
.am-meter-note { margin: 12px 0 0; color: var(--color-text-light); font-size: 0.78rem; opacity: 0.85; }
.am-meter-source { margin: 8px 0 0; color: var(--color-text-light); font-size: 0.76rem; opacity: 0.75; }
.am-meter-source a { color: var(--color-text-light); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
@media (max-width: 800px) {
  .am-colour-feature { grid-template-columns: 1fr; gap: 32px; justify-items: center; text-align: left; }
  .am-colour-portrait-wrap { max-width: 240px; }
}
@media (prefers-reduced-motion: reduce) {
  .am-colour-portrait img { transition: none; }
  .am-meter-fill { transition: none; width: 78%; }
}

/* ---------- Maqui pigment progression (Sep 2026; redesigned Sep 28) —
   previously each term had its own short, disconnected 36px underline and
   the description text was dimmed to 72% opacity until hovered, which
   together read as three separate text columns rather than one
   progression. Now a single continuous hairline runs the full width of
   the row (the ::before below); each connector word sits directly on
   that line with the section's background colour punched behind it, like
   a label on a timeline; description text is full-contrast and always
   visible, no more hover-to-reveal. Stacks vertically on mobile, line
   hidden there since a vertical list doesn't need one. (.am-hierarchy*
   below remains unused dead code, left in place per standing rule.)
   ---------- */
.am-progression { position: relative; display: flex; align-items: flex-start; gap: 0; }
.am-progression::before { content: ""; position: absolute; left: 0; right: 0; top: 12px; height: 1px; background: var(--color-line); }
.am-progression-stage { position: relative; z-index: 1; flex: 1 1 0; min-width: 0; padding: 0 22px; outline: none; }
.am-progression-stage:first-child { padding-left: 0; }
.am-progression-stage:last-child { padding-right: 0; }
.am-progression-term { display: inline-block; background: var(--color-cream-dark); padding-right: 16px; font-family: var(--font-heading); font-weight: 600; font-size: 1.15rem; color: var(--color-forest-dark); transition: color 300ms ease; }
.am-progression-desc { color: var(--color-text); font-size: 0.9rem; line-height: 1.6; margin: 14px 0 0; }
.am-progression-connector { position: relative; z-index: 1; flex: 0 0 auto; align-self: flex-start; background: var(--color-cream-dark); padding: 0 10px; margin-top: 3px; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.04em; color: var(--color-earth); font-style: italic; white-space: nowrap; }
.am-progression-stage:hover .am-progression-term,
.am-progression-stage:focus-within .am-progression-term { color: var(--color-earth); }
@media (max-width: 700px) {
  .am-progression { flex-direction: column; gap: 26px; }
  .am-progression::before { display: none; }
  .am-progression-stage { padding: 0 !important; }
  .am-progression-term { background: none; padding-right: 0; }
  .am-progression-connector { align-self: flex-start; margin: 0 0 0 2px; padding: 0; background: none; }
}
@media (prefers-reduced-motion: reduce) {
  .am-progression-term { transition: none; }
}

.am-hierarchy { display: flex; align-items: stretch; gap: 0; margin-top: 44px; }
.am-hierarchy-card { flex: 1 1 0; min-width: 0; background: var(--color-white); border: 1px solid var(--color-line); border-radius: 18px; padding: 26px 24px; }
.bg-alt .am-hierarchy-card { background: var(--color-cream); }
.am-hierarchy-card h3 { margin: 0 0 8px; font-size: 1.05rem; }
.am-hierarchy-card p { color: var(--color-text-light); font-size: 0.9rem; margin: 0; }
.am-hierarchy-connector { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; padding: 0 18px; }
.am-hierarchy-connector span { font-size: 0.78rem; font-weight: 600; letter-spacing: 0.04em; color: var(--color-text-light); font-style: italic; white-space: nowrap; }
@media (max-width: 760px) {
  .am-hierarchy { flex-direction: column; gap: 4px; }
  .am-hierarchy-connector { padding: 6px 0; justify-content: flex-start; padding-left: 24px; }
}

/* ---------- From the Maqui Grove — full-bleed divider image (Sep 2026),
   an .editorial-band-fullbleed modifier with its own height and a small
   bottom-left two-line caption overlay (eyebrow + caption), lighter than
   the .home-family-feature-* treatment since there is no link/CTA here. ---------- */
/* Rettelse (Sep 28, full-page redesign): the photo behind this divider
   changed (see about-maqui.html) from a low, tight two-men crop to a wide
   eye-level shot of two people examining maqui branches — the new source
   is already close to 16:9 (~1.785:1) with both faces well clear of the
   frame edges, so an explicit 16/9 aspect-ratio here is only a hair-thin
   crop, not a re-crop of the composition. A max-height cap is restored
   (now that face-cropping is no longer a risk with this photo) so the
   band reads as a calm transition strip rather than filling a full
   screen height on very wide viewports; object-fit:cover (inherited from
   the base rule) absorbs the cap by trimming a little off the sides,
   never the top or bottom. */
.editorial-band-fullbleed.am-grove-divider { aspect-ratio: 16 / 9; height: auto; max-height: 640px; }
.editorial-band-fullbleed.am-grove-divider::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 45%; background: linear-gradient(0deg, rgba(10,9,6,0.42) 0%, rgba(10,9,6,0) 100%); pointer-events: none; }
.am-grove-overlay { position: absolute; left: 40px; bottom: 32px; z-index: 1; display: flex; flex-direction: column; gap: 6px; }
.am-grove-eyebrow { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255,255,255,0.85); }
.am-grove-caption { font-family: var(--font-heading); font-weight: 600; font-size: 1.3rem; color: #fff; }
@media (max-width: 700px) {
  .am-grove-overlay { left: 22px; bottom: 22px; }
  .am-grove-caption { font-size: 1.05rem; }
}

/* ---------- AP-4® DNA Barcoding — "From Sample to Reference" stepper.
   Page-scoped (NOT .dna-timeline, which about-maqui.html also uses and
   must not change): a more compact 3-step process with less empty
   vertical space, plus a vertical connecting line on mobile instead of
   dropping the line entirely. ---------- */
.dnabc-stepper { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; margin-top: 36px; }
.dnabc-stepper::before { content: ''; position: absolute; top: 17px; left: 17px; right: 17px; height: 1px; background: var(--color-line); z-index: 0; }
.dnabc-step { position: relative; z-index: 1; padding-top: 46px; }
.dnabc-step-num {
  position: absolute; top: 0; left: 0; width: 34px; height: 34px; border-radius: 50%;
  border: 1.5px solid var(--color-earth); color: var(--color-earth); background: var(--color-cream);
  font-family: var(--font-heading); font-weight: 700; font-size: 0.82rem;
  display: flex; align-items: center; justify-content: center;
}
.bg-alt .dnabc-step-num { background: var(--color-cream-dark); }
.dnabc-step h3 { margin: 0 0 6px; font-size: 1.02rem; }
.dnabc-step p { color: var(--color-text-light); font-size: 0.9rem; margin: 0; line-height: 1.55; }
.dnabc-step.reveal:nth-child(1) { transition-delay: 0ms; }
.dnabc-step.reveal:nth-child(2) { transition-delay: 90ms; }
.dnabc-step.reveal:nth-child(3) { transition-delay: 180ms; }
@media (max-width: 760px) {
  .dnabc-stepper { grid-template-columns: 1fr; gap: 0; margin-top: 32px; }
  .dnabc-stepper::before { display: none; }
  .dnabc-step { padding: 0 0 28px 46px; }
  .dnabc-step:last-child { padding-bottom: 0; }
  .dnabc-step::after {
    content: ''; position: absolute; top: 34px; bottom: 0; left: 17px; width: 1px; background: var(--color-line);
  }
  .dnabc-step:last-child::after { display: none; }
}

/* Variety-specific identification callout — a softly tinted clarification
   card (not a warning/disclaimer), separating the public species-level
   ITS2 reference above from SUKO Nordic's own AP-4®-specific qPCR
   primer method. */
.dnabc-variety-callout { background: var(--color-announce-bg); border-left: 3px solid var(--color-earth); border-radius: var(--radius-md); padding: 32px 36px; margin-top: 40px; }
.dnabc-variety-callout .eyebrow { color: var(--color-earth); margin-bottom: 10px; }
.dnabc-variety-callout h3 { margin: 0 0 10px; font-size: 1.08rem; }
.dnabc-variety-callout p { color: var(--color-text-light); font-size: 0.94rem; line-height: 1.6; margin: 0; max-width: 68ch; }
@media (max-width: 600px) {
  .dnabc-variety-callout { padding: 26px 22px; }
}

/* ---------- "From Plant Science to a Public DNA Reference" — a balanced
   48/52 text/image split (was an oversized 21:9 stock gel-analysis photo
   with a lot of unused space around it). ---------- */
.dnabc-research-grid { grid-template-columns: 0.48fr 0.52fr; gap: 56px; }
.dnabc-research-media { margin: 0; }
/* Sep 2026: the aspect-ratio/overflow/radius/shadow moved onto this inner
   frame (was on .dnabc-research-media itself) so a figcaption can sit below
   the photo without being clipped by the frame's own overflow:hidden or
   stretching its fixed aspect-ratio box. */
.dnabc-research-media-frame { display: block; aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.dnabc-research-media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; display: block; }
.dnabc-research-caption { display: block; margin-top: 12px; font-size: 0.82rem; font-style: italic; color: var(--color-text-light); line-height: 1.5; }
@media (max-width: 800px) {
  .dnabc-research-grid { grid-template-columns: 1fr; }
  .dnabc-research-media-frame { aspect-ratio: 4 / 3; }
}

/* ---------- "What DNA Verification Contributes" — three equal editorial
   evidence cards (replacing the old bare 3-column list with long purple
   top-rules), plus a slim, softly tinted clarification strip beneath
   them that reads as a considered scientific note, not a warning. ---------- */
/* Sep 2026 QA pass: de-boxed. Each card already carries its own number
   + short rule as a visual anchor, so the white/bordered/shadowed
   container around it was redundant framing on top of framing — dropped
   in favour of the same open, divided-row treatment used elsewhere
   (e.g. .sf-trust-row), with the number+rule doing the visual work. */
.dnabc-verify-grid { display: grid; grid-template-columns: 1fr 1px 1fr 1px 1fr; gap: 28px; margin-top: 40px; }
.dnabc-verify-divider { background: var(--color-line); }
.dnabc-verify-card { padding: 0; }
.dnabc-verify-num { font-family: var(--font-heading); font-weight: 700; font-size: 0.82rem; color: var(--color-earth); letter-spacing: 0.06em; margin-bottom: 14px; }
.dnabc-verify-rule { width: 28px; height: 2px; background: var(--color-earth); margin-bottom: 14px; }
.dnabc-verify-card h3 { margin: 0 0 10px; font-size: 1.05rem; }
.dnabc-verify-card p { color: var(--color-text-light); font-size: 0.92rem; line-height: 1.6; margin: 0; max-width: 34ch; }
.dnabc-verify-card.reveal:nth-child(1) { transition-delay: 0ms; }
.dnabc-verify-card.reveal:nth-child(3) { transition-delay: 90ms; }
.dnabc-verify-card.reveal:nth-child(5) { transition-delay: 180ms; }
.dnabc-verify-clarification { background: var(--color-announce-bg); border-radius: var(--radius-md); padding: 22px 32px; margin-top: 32px; text-align: center; }
.dnabc-verify-clarification p { color: var(--color-text); font-size: 0.88rem; line-height: 1.6; margin: 0 auto; max-width: 760px; }
@media (max-width: 800px) {
  .dnabc-verify-grid { grid-template-columns: 1fr; gap: 0; }
  .dnabc-verify-divider { display: none; }
  .dnabc-verify-card { padding: 22px 0; border-bottom: 1px solid var(--color-line); }
  .dnabc-verify-card:first-child { padding-top: 0; }
  .dnabc-verify-card:last-child { border-bottom: none; }
}
@media (max-width: 600px) {
  .dnabc-verify-clarification { padding: 20px 22px; }
}

/* ---------- "One Selected AP-4® Variety" — closing premium feature panel,
   same deep-purple/orange-accent/white-copy language as the closing panel
   on why-rosehips-from-chile.html (Sep 2026 QA pass: now genuinely
   full-bleed to match, not just contained-and-rounded like before). ---------- */
.dnabc-story-section { padding-top: 0; padding-bottom: 0; }
.dnabc-story-fullbleed { width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); background: var(--color-earth); }
.dnabc-story-panel { padding: 72px 0; }
@media (max-width: 900px) { .dnabc-story-panel { padding: 56px 0; } }
@media (max-width: 480px) { .dnabc-story-panel { padding: 44px 0; } }
.dnabc-story-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; align-items: stretch; gap: 0; }
.dnabc-story-text { padding: 0 56px 0 0; display: flex; flex-direction: column; justify-content: center; }
.dnabc-story-text .eyebrow { color: var(--color-shop-orange); margin-bottom: 14px; }
.dnabc-story-text h2 { color: #fff; font-size: clamp(1.6rem, 2.6vw, 2.05rem); margin: 0 0 16px; }
.dnabc-story-text p { color: rgba(255,255,255,0.82); margin: 0 0 30px; max-width: 52ch; line-height: 1.6; }
.dnabc-story-cta {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--color-cream);
  color: var(--color-earth);
  font-weight: 600; font-size: 0.92rem;
  padding: 14px 26px;
  border-radius: var(--radius-sm);
  text-decoration: none;
  transition: background 200ms ease;
  align-self: flex-start;
}
.dnabc-story-cta:hover { background: #fff; }
.dnabc-story-cta-arrow { display: inline-block; transition: transform 250ms ease; }
.dnabc-story-cta:hover .dnabc-story-cta-arrow { transform: translateX(4px); }
/* Rettelse (Sep 28, artifact comment): Amanda asked to show more of the
   gloves in the DNA gel photo — the grid's stretched-height box (matching
   the text column's own height) was cropping this wide 2.33:1 photo down
   to a much narrower effective aspect, trimming the hands at both edges.
   align-self:center + an explicit, wider aspect-ratio lets the figure size
   itself instead of stretching to the row height, so cover crops far less
   off the sides. */
.dnabc-story-media { margin: 0; min-height: 100%; align-self: center; aspect-ratio: 3 / 2; }
.dnabc-story-media img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
@media (max-width: 800px) {
  .dnabc-story-grid { grid-template-columns: 1fr; }
  .dnabc-story-text { padding: 48px 32px; }
  .dnabc-story-media { aspect-ratio: 4 / 3; }
}
@media (max-width: 480px) {
  .dnabc-story-text { padding: 40px 24px; }
}
@media (prefers-reduced-motion: reduce) {
  .dnabc-story-cta-arrow { transition: none; }
}

/* ==================================================================
   MaquiPro® — redesign (Sep 2026)
   Column-ratio variants for the clinical-research and usage sections
   (kept as classes rather than inline widths so the existing mobile
   stacking rules on .two-col-grid / .story-grid still apply).
   ================================================================== */

/* ---------- From Field Selection to Defined Formulation — editorial
   banner (Sep 2026; widened + rebalanced Sep 28; made full-bleed Sep 28
   per comment feedback — "billedet må godt fylde ud til kanterne"). Now
   spans the full viewport edge-to-edge, same 100vw/negative-margin
   technique as .editorial-band-fullbleed used on index.html, so no
   max-width/side padding and no border-radius (a rounded corner would look
   wrong flush against the viewport edge). Rettelse (comment feedback, Sep
   28): added an eyebrow above the heading and enlarged the heading/sub
   text for clearer hierarchy; replaced the old full-width horizontal
   bottom gradient with a radial gradient anchored bottom-left (the same
   technique already used for .wc-panorama-scrim on why-rosehips-from-
   chile.html) so only the area behind the text is darkened and the rest
   of the photo — including the maqui berries — reads at full clarity
   instead of fading under a strip; and softened the hover zoom
   (1.025→1.015, slower 900ms transition) since a stronger zoom read as too
   animated for this quieter editorial banner. ---------- */
/* Rettelse (Sep 28): this section previously had no class, so it fell
   back to the sitewide default (section { padding: 88px 0 }), which
   stacked with .mp-intro-section's own bottom padding above and
   .mp-formula-section's own top padding below to create a very large
   gap on both sides of this banner. Explicit, much smaller padding here
   instead, so the banner sits close to its neighbours. */
.mp-field-banner-section { padding: 40px 0; }
@media (max-width: 700px) { .mp-field-banner-section { padding: 28px 0; } }
.mp-field-banner-wrap { width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); }
.mp-field-banner { position: relative; height: 620px; overflow: hidden; }
.mp-field-banner img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 42%; transition: transform 900ms ease; }
.mp-field-banner:hover img { transform: scale(1.015); }
/* Context caption (Sep 28, cohesion pass) — a soft bottom scrim (never a
   full-strip darken, so the plantation photo still reads at full clarity
   above the caption) plus one short identifying line, quieter than the
   eyebrow/heading/sub overlay this banner had before it was removed. */
.mp-field-banner-scrim { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(20,18,40,0.62) 0%, rgba(20,18,40,0.28) 32%, rgba(20,18,40,0) 58%); pointer-events: none; }
.mp-field-banner-caption { position: absolute; left: 0; right: 0; bottom: 0; padding: 32px 40px; max-width: 640px; }
.mp-field-banner-eyebrow { display: block; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--color-shop-orange); margin-bottom: 8px; }
.mp-field-banner-caption p { margin: 0; color: rgba(255,255,255,0.92); font-size: 0.94rem; line-height: 1.55; }
@media (max-width: 700px) {
  .mp-field-banner-caption { padding: 22px 20px; max-width: none; }
  .mp-field-banner-caption p { font-size: 0.86rem; }
}
@media (max-width: 900px) {
  .mp-field-banner { height: 420px; }
}
@media (max-width: 600px) {
  .mp-field-banner { height: 340px; }
}
@media (prefers-reduced-motion: reduce) {
  .mp-field-banner img { transition: none; }
}

.two-col-grid.mp-clinical-grid { grid-template-columns: 0.85fr 1.15fr; }
@media (max-width: 800px) { .two-col-grid.mp-clinical-grid { grid-template-columns: 1fr; } }
.two-col-grid.pl-powder-grid { grid-template-columns: 1.15fr 0.85fr; }
@media (max-width: 800px) { .two-col-grid.pl-powder-grid { grid-template-columns: 1fr; } }
.pl-powder-grid figure { overflow: hidden; }
.pl-powder-grid figure img { transition: transform 700ms ease; }
.pl-powder-grid:hover figure img, .pl-powder-grid:focus-within figure img { transform: scale(1.035); }
@media (prefers-reduced-motion: reduce) {
  .pl-powder-grid figure img { transition: none; }
}

/* ==================================================================
   MaquiPro® — "More Than Maqui Alone" intro, editorial premium pass
   (Sep 2026). Replaces the shared .two-col-grid + plain figure.photo
   treatment with page-scoped classes: an intentional 44/56 text/image
   split, more generous vertical rhythm, a refined editorial photo frame
   (soft lavender backing + offset panel instead of a flat product card),
   and a restrained desktop-only hover response. Respects
   prefers-reduced-motion.
   ================================================================== */
/* Page-scoped dead code (Sep 28, cohesion pass): this paragraph moved into
   the hero section itself as .mp-hero-caption (see the HTML comment above
   the hero <section>, and .mp-hero-caption below) so it reads as the
   video's own caption rather than an orphan disclaimer floating in the gap
   before the next section. Rule kept, unused. */
.mp-intro-disclaimer {
  text-align: center;
  font-style: italic;
  font-size: 0.85rem;
  line-height: 1.6;
  color: var(--color-text-light);
  max-width: 520px;
  margin: 0 auto;
  padding: 44px 20px 0;
}

/* Caption bar for the hero mechanism-animation video (Sep 28, cohesion
   pass) — sits flush under the full-bleed video, inside the same section,
   with its own quiet background tint so it reads as one continuous unit
   with the video rather than a second, separate block of copy. Deliberately
   slimmer than the old .mp-intro-disclaimer it replaces (12px vertical
   padding vs. 44px top alone) since it no longer needs to hold open a gap
   before the next section — .mp-intro-section's own top padding does that
   job now, much reduced (see below). */
.mp-hero-caption {
  text-align: center;
  font-style: italic;
  font-size: 0.82rem;
  line-height: 1.6;
  color: var(--color-text-light);
  background: var(--color-cream);
  max-width: 620px;
  margin: 0 auto;
  padding: 12px 20px;
}

/* Rettelse (comment feedback, Sep 28): bottom padding reduced (top
   unchanged) — the field banner right after this section had almost no
   padding of its own, so the large gap above/below that banner was really
   this section's full symmetric padding on its bottom side alone.
   Rettelse (Sep 28, round 2): reduced further now that the field banner
   has its own explicit mp-field-banner-section padding (was still
   double-stacking with it before).
   Rettelse (Sep 28, cohesion pass): top padding cut roughly in half now
   that the disclaimer paragraph no longer lives in this gap (it moved up
   into the hero as .mp-hero-caption) — the ~350px of empty cream space
   above the product photo was mostly this padding plus that paragraph's
   own padding stacking together. */
.mp-intro-section { padding: 64px 0 40px; }
@media (max-width: 900px) { .mp-intro-section { padding: 48px 0 32px; } }
@media (max-width: 600px) { .mp-intro-section { padding: 36px 0 24px; } }

/* Rettelse (comment feedback, Sep 28): image column widened (0.786:1 text:
   image → 0.6:1, ~12% more image width) and the gap tightened slightly to
   make room, so the product photo reads larger/more dominant.
   Rettelse (Sep 28, round 2): widened again (0.6:1 → 0.52:1.08) per
   Amanda's request to make the photo feel less like a small image inside
   a separate card. */
.mp-intro-grid { display: grid; grid-template-columns: 0.52fr 1.08fr; gap: 56px; align-items: center; }
@media (max-width: 900px) { .mp-intro-grid { gap: 40px; } }
@media (max-width: 800px) { .mp-intro-grid { grid-template-columns: 1fr; gap: 40px; } }

.mp-intro-text .eyebrow { letter-spacing: 0.15em; margin-bottom: 20px; }
.mp-intro-text h2 { font-size: clamp(1.8rem, 2.9vw, 2.35rem); line-height: 1.14; margin: 0 0 22px; }
/* Rettelse (comment feedback, Sep 28): was --color-text-light (the muted/
   secondary grey), which read as washed out for this intro's main body
   copy; switched to the standard primary body colour used everywhere else
   on the site, and narrowed the column slightly for an easier line length. */
.mp-intro-text p { color: var(--color-text); font-size: 0.98rem; line-height: 1.75; max-width: 540px; margin: 0; }
.mp-intro-text p + p { margin-top: 26px; }

.mp-intro-media { position: relative; }
/* Rettelse (comment feedback, Sep 28): removed the offset lavender backdrop
   panel that used to sit behind/right of the photo (via ::before) — it read
   as an accidental double frame rather than a deliberate effect. The photo
   is now the only element here, with a touch more corner radius and its
   existing subtle shadow doing the framing on its own.
   Rettelse (Sep 28, round 2): the visible 1px border plus a fairly heavy
   drop shadow was reading as a small photo placed inside its own separate
   card rather than an integrated editorial image. Dropped the border
   entirely, softened the shadow to a bare minimum, and made the frame a
   little taller (aspect-ratio 4/3 → 5/4) so the photo reads larger and
   more like a full editorial image than a boxed thumbnail.
   Rettelse (Sep 28, cohesion pass): brought back a soft backdrop, but as a
   blurred, edgeless colour glow (::before, large blur radius, no border/
   shape to read) rather than the earlier hard-edged offset panel — it adds
   presence behind the frame without ever reading as a second frame. */
.mp-intro-media::before {
  content: '';
  position: absolute;
  inset: -6% -10%;
  background: radial-gradient(ellipse at 60% 40%, rgba(48,43,117,0.16), rgba(48,43,117,0) 68%);
  filter: blur(30px);
  z-index: 0;
  pointer-events: none;
}
.mp-intro-photo {
  position: relative;
  z-index: 1;
  margin: 0;
  aspect-ratio: 5 / 4;
  border-radius: 20px;
  overflow: hidden;
  background: #F4F2FA;
  box-shadow: 0 8px 28px rgba(26,26,26,0.08);
  transition: box-shadow 350ms ease;
}
.mp-intro-photo img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 350ms ease; }
@media (hover: hover) and (pointer: fine) {
  .mp-intro-media:hover .mp-intro-photo, .mp-intro-media:focus-within .mp-intro-photo { box-shadow: var(--shadow-lg); }
  .mp-intro-media:hover .mp-intro-photo img, .mp-intro-media:focus-within .mp-intro-photo img { transform: scale(1.012); }
}
@media (prefers-reduced-motion: reduce) {
  .mp-intro-photo, .mp-intro-photo img { transition: none; }
}

/* Small caption tag on the product photo itself (Sep 28, cohesion pass) —
   names the two ingredients directly on the image, a first quiet echo of
   the specs bar just below it and of "The Formulation" section further
   down the page. Bottom-left, low-contrast glass pill rather than a bold
   label, so it reads as a caption and not a marketing sticker. */
.mp-intro-photo-tag {
  position: absolute;
  left: 18px;
  bottom: 18px;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 8px 16px;
  border-radius: 999px;
  background: rgba(26,26,26,0.42);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: rgba(255,255,255,0.94);
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1;
}
.mp-intro-photo-tag em { font-style: italic; font-weight: 500; }

/* Specifications bar (Sep 28) — replaces the three boxed info-cards under
   the intro with one connected strip, thin vertical dividers instead of
   card borders, deliberately mirroring the .mp-usage-grid pattern further
   down this page for visual consistency between the two strips. */
.mp-specs-bar { display: flex; align-items: stretch; gap: 0; margin-top: 40px; border-top: 1px solid var(--color-line); border-bottom: 1px solid var(--color-line); padding: 28px 0; }
.mp-specs-item { flex: 1 1 0; min-width: 0; padding: 0 26px; text-align: center; position: relative; }
.mp-specs-item + .mp-specs-item::before { content: ''; position: absolute; left: 0; top: 4px; bottom: 4px; width: 1px; background: var(--color-line); }
.mp-specs-value { display: block; font-family: var(--font-heading); font-weight: 700; font-size: 1.3rem; color: var(--color-earth); line-height: 1.25; }
.mp-specs-label { display: block; font-size: 0.84rem; color: var(--color-text-light); margin-top: 8px; line-height: 1.45; }
@media (max-width: 700px) {
  .mp-specs-bar { flex-direction: column; gap: 20px; border: none; padding: 0; }
  .mp-specs-item { padding: 18px 0 0; border-top: 1px solid var(--color-line); }
  .mp-specs-item:first-child { border-top: none; padding-top: 0; }
  .mp-specs-item + .mp-specs-item::before { display: none; }
}

/* How to Take — full-width editorial hero + spec rail (Sep 28). Replaces
   the previous 4-card compact strip: the primary "2 Capsules" daily-serving
   message now lives directly on a large lifestyle photo (generous negative
   space on the left), with a soft cream-to-transparent scrim behind the
   text only — never a boxed panel — so the product on the right stays
   fully visible. Height lives on .mp-usage-hero-media (not the outer
   .mp-usage-hero) so the overlay content can become a normal static-flow
   sibling on mobile without being clipped by overflow:hidden — the same
   fixed-height-wrapper fix used for the clinical-research section above.
   The remaining three data points move into one thin-divider spec rail
   below the image, mirroring the .mp-specs-bar pattern in section 1.
   Rettelse (Sep 28, cohesion pass): "the lifestyle image is lovely, but
   it takes up a lot of space before the practical information appears...
   bring the serving, directions and pack details closer together." The
   overlay content (eyebrow/heading/2 Capsules/Daily serving) is only
   ~160px tall and was vertically centred in a 620px-tall hero, so roughly
   230px of plain photo sat above and below it before the rail even
   started — reduced the hero height (and the section's own top padding
   and the rail's top margin) so the same centred content now sits in a
   frame proportioned to it, and the rail follows much sooner. Photo itself
   is unchanged, still full-bleed and fully visible either side of the
   text. Serving figures below (2 capsules / 1,000mg / min. 1 billion CFU
   / 60 capsules) are unchanged from the copy already verified against the
   product information in an earlier pass — see the Rettelse note above
   this section. */
.mp-usage-hero-section { padding: 48px 0 0; }
.mp-usage-hero {
  position: relative;
  max-width: 1600px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 40% 60%;
  align-items: stretch;
  height: 520px;
  border-radius: 22px;
  overflow: hidden;
  background: var(--color-cream);
}
.mp-usage-hero-content { position: static; transform: none; max-width: none; z-index: 1; display: flex; flex-direction: column; justify-content: center; padding: 40px 48px; }
.mp-usage-hero-content .eyebrow { margin-bottom: 12px; }
.mp-usage-hero-heading { font-size: 1.8rem; line-height: 1.2; color: var(--color-forest-dark); margin: 0 0 14px; }
.mp-usage-hero-value { display: block; font-family: var(--font-heading); font-weight: 700; font-size: 2.7rem; line-height: 1.05; color: var(--color-earth); }
.mp-usage-hero-sub { display: block; font-size: 0.84rem; font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase; color: var(--color-text-light); margin-top: 6px; }

.mp-usage-hero-media { position: relative; margin: 0; height: 100%; border-radius: 0; overflow: hidden; }
/* The figure keeps the shared .reveal class purely as the
   IntersectionObserver's anchor (so it triggers on the same scroll
   position as the text panel); it does not itself fade/move — a
   clip-path on the <img> is what animates. Note: the clip-path must live
   on the image, not the observed figure — a clipped-to-zero-area element
   never registers as intersecting in this browser's IntersectionObserver
   implementation, which silently broke the reveal when clip-path sat on
   the figure itself during development (confirmed via a debug observer
   before shipping this). */
.mp-usage-hero-media.reveal { opacity: 1; transform: none; transition: none; }
.mp-usage-hero-media img {
  display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 68%;
  clip-path: inset(0 0 0 100%);
  transition: clip-path 950ms cubic-bezier(0.22, 1, 0.36, 1);
}
.mp-usage-hero-media.reveal.is-visible img { clip-path: inset(0 0 0 0); }

.mp-usage-rail { display: flex; align-items: stretch; gap: 0; margin-top: 32px; border-top: 1px solid var(--color-line); border-bottom: 1px solid var(--color-line); padding: 30px 0; }
.mp-usage-rail-item { flex: 1 1 0; min-width: 0; padding: 0 22px; text-align: center; position: relative; }
.mp-usage-rail-item + .mp-usage-rail-item::before { content: ''; position: absolute; left: 0; top: 4px; bottom: 4px; width: 1px; background: var(--color-line); }
.mp-usage-label { display: block; font-size: 0.74rem; font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase; color: var(--color-text-light); }
.mp-usage-value { display: block; font-size: 1.05rem; font-weight: 700; color: var(--color-forest-dark); margin-top: 8px; line-height: 1.35; overflow-wrap: break-word; }
.mp-usage-value-sm { font-size: 0.86rem; font-weight: 600; margin-top: 6px; line-height: 1.4; }
.mp-usage-value-sm em { font-style: italic; }
.mp-usage-guarantee { display: block; font-size: 0.74rem; color: var(--color-text-light); font-weight: 500; margin-top: 6px; }
.mp-usage-supply { display: block; font-size: 0.86rem; font-weight: 600; color: var(--color-earth); margin-top: 6px; }
.mp-usage-storage { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 26px; color: var(--color-text-light); font-size: 0.85rem; }
.mp-usage-storage svg { width: 18px; height: 18px; flex: 0 0 auto; color: var(--color-earth); }

@media (max-width: 900px) {
  .mp-usage-hero { height: 440px; }
  .mp-usage-hero-content { padding: 28px 32px; }
  .mp-usage-hero-heading { font-size: 1.5rem; margin-bottom: 12px; }
  .mp-usage-hero-value { font-size: 2.1rem; }
}
@media (max-width: 700px) {
  .mp-usage-rail { flex-direction: column; gap: 22px; border: none; padding: 0; margin-top: 28px; }
  .mp-usage-rail-item { padding: 0; border-top: 1px solid var(--color-line); padding-top: 18px; text-align: left; }
  .mp-usage-rail-item:first-child { border-top: none; padding-top: 0; }
  .mp-usage-rail-item + .mp-usage-rail-item::before { display: none; }
}
@media (max-width: 600px) {
  /* Mobile: back to the established pattern — photo first, full width, no
     text overlay; heading/value/sub drop below as static centred content.
     `order` moves the photo above the text visually without changing DOM
     order (DOM stays text-then-photo, matching the desktop grid's reading
     order and keeping the panel-before-media source order that the
     right-to-left clip-path reveal was written against). */
  .mp-usage-hero-section { padding: 0; }
  .mp-usage-hero { max-width: none; margin: 0; grid-template-columns: 1fr; height: auto; border-radius: 0; }
  .mp-usage-hero-media { order: -1; height: 260px; }
  .mp-usage-hero-media img { object-position: 62% 82%; }
  .mp-usage-hero-content { text-align: center; padding: 22px 20px 26px; }
}
@media (prefers-reduced-motion: reduce) {
  .mp-usage-hero-media img { transition: none; }
}

/* ==================================================================
   Maqui Berry & Anthocyanins — redesign (Sep 2026)
   A restrained, referenced list for research-context entries — replaces
   the old "benefit" cards. Each item names the actual extract studied
   and states plainly that it does not establish an effect for MaquiPro®.
   Sep 2026: added a single "Other Maqui Formulation · Not MaquiPro®"
   tag per card (am-research-tag) instead of a repeated italic note.
   ================================================================== */
/* Rettelse (Sep 28, full-page redesign): .research-list/.research-item*
   (the old always-expanded list) and .am-context-notice* (the bordered
   "Important Context" box) are no longer used on this page — replaced by
   the collapsible .am-research-row rows and the slim .am-research-notice
   line below. Left in place as page-scoped dead code, per the site's
   standing convention (see .am-hierarchy above). */
.research-list { margin-top: 8px; }
.research-item { padding: 26px 0; border-top: 1px solid var(--color-line); }
.research-item:last-child { border-bottom: 1px solid var(--color-line); }
.research-item-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 20px; }
.research-item-head h3 { margin: 0; font-size: 1.05rem; }
.research-item-tag { font-size: 0.76rem; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; color: var(--color-earth); white-space: nowrap; }
.research-item p { color: var(--color-text-light); font-size: 0.94rem; line-height: 1.65; margin: 10px 0 0; max-width: 72ch; }
@media (max-width: 560px) { .research-item-tag { white-space: normal; } }

/* Rettelse (Sep 28, artifact comment): the whole "Wider Maqui Research"
   section (about-maqui.html) was removed at Amanda's request — she found
   it a bit irrelevant to the page. .am-research-tag was that section's
   formulation pill; left in place as dead code, per the site's standing
   convention (see .am-hierarchy above), rather than deleted. */
.am-research-tag { display: inline-block; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--color-text-light); background: var(--color-cream-dark); border-radius: 999px; padding: 5px 12px; }

.am-context-notice { background: var(--color-announce-bg); border: 1px solid var(--color-line); border-radius: var(--radius-md); padding: 20px 26px; margin: 32px 0 8px; text-align: center; }
.am-context-notice-label { display: block; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-earth); margin-bottom: 8px; }
.am-context-notice p { color: var(--color-text); font-size: 0.9rem; line-height: 1.6; margin: 0 auto; max-width: 640px; }

/* ---------- Wider Maqui Research — collapsible rows (Sep 28, full-page
   redesign). Each topic is a <details>/<summary> row matching the .am-refs
   disclosure pattern already used lower on the page: collapsed it shows
   only the title, the formulation tag, and a plus icon; opening reveals
   the body copy. Replaces the old always-expanded .research-item list so
   the section reads as a compact, scannable index rather than a wall of
   text, per the brief. ----------
   Rettelse (Sep 28, artifact comment): the section these rows belonged to
   was removed from about-maqui.html at Amanda's request (found a bit
   irrelevant to the page). .am-research-notice/-rows/-row* below are now
   unused; left in place as dead code per the site's standing convention. */
.am-research-notice { text-align: center; font-size: 0.86rem; color: var(--color-text-light); max-width: 640px; margin: 28px auto 8px; line-height: 1.6; }
.am-research-rows { margin-top: 8px; }
.am-research-row { border-top: 1px solid var(--color-line); }
.am-research-row:last-child { border-bottom: 1px solid var(--color-line); }
.am-research-row summary { cursor: pointer; list-style: none; display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; padding: 22px 0; }
.am-research-row summary::-webkit-details-marker { display: none; }
.am-research-row summary::marker { content: ""; }
.am-research-row-title { display: flex; flex-direction: column; gap: 10px; }
.am-research-row-title h3 { margin: 0; font-size: 1.05rem; }
.am-research-row-title .am-research-tag { margin-bottom: 0; }
.am-research-row-icon { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--color-line); font-size: 0.9rem; line-height: 1; margin-top: 2px; transition: transform var(--transition-base); }
.am-research-row[open] .am-research-row-icon { transform: rotate(45deg); }
.am-research-row p { color: var(--color-text-light); font-size: 0.94rem; line-height: 1.65; margin: 0 0 26px; max-width: 72ch; }
@media (prefers-reduced-motion: reduce) { .am-research-row-icon { transition: none; } }

/* Collapsible reference list — accessible <details>/<summary>, replacing
   a dense always-visible block of tiny text.
   Rettelse (Sep 28, artifact comment): the four references this list held
   were only cited by the now-removed "Wider Maqui Research" section
   (about-maqui.html); .am-refs* below is unused, left in place as dead
   code per the site's standing convention. */
.am-refs { margin-top: 36px; border-top: 1px solid var(--color-line); padding-top: 24px; }
.am-refs summary { cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-heading); font-weight: 600; font-size: 0.95rem; color: var(--color-forest-dark); }
.am-refs summary::-webkit-details-marker { display: none; }
.am-refs summary::marker { content: ""; }
.am-refs-icon { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; border: 1px solid var(--color-line); font-size: 0.8rem; line-height: 1; transition: transform var(--transition-base); }
.am-refs[open] .am-refs-icon { transform: rotate(45deg); }
.am-refs-list { list-style: decimal; margin: 22px 0 0; padding-left: 22px; display: flex; flex-direction: column; gap: 16px; }
.am-refs-list li { color: var(--color-text-light); font-size: 0.86rem; line-height: 1.7; }
.am-refs-list a { color: var(--color-earth); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.am-refs-kind { display: inline-block; font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-text-light); margin-left: 8px; white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { .am-refs-icon { transition: none; } }

/* Rettelse (Sep 28, full-page redesign): the old .am-bioavail-panel (one
   heavy outer border, striped column backgrounds) is no longer used —
   replaced by .am-flow below, a slim horizontal line with no outer frame,
   per the brief's "avoid frames and cards" instruction. Left in place as
   page-scoped dead code, per the site's standing convention. */
.am-bioavail-panel { display: grid; grid-template-columns: 1fr 1.3fr 1fr; margin-top: 40px; border: 1px solid var(--color-line); border-radius: 22px; overflow: hidden; }
.am-bioavail-stage { padding: 36px 30px; display: flex; flex-direction: column; justify-content: center; background: var(--color-white); }
.am-bioavail-stage-label { display: block; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-earth); margin-bottom: 12px; }
.am-bioavail-stage h3 { font-size: 1.05rem; margin: 0 0 8px; }
.am-bioavail-stage p { color: var(--color-text-light); font-size: 0.9rem; margin: 0; }
.am-bioavail-factors { padding: 36px 28px; background: var(--color-cream-dark); display: flex; flex-direction: column; align-items: center; text-align: center; border-left: 1px solid var(--color-line); border-right: 1px solid var(--color-line); }
.am-bioavail-factors svg { width: 34px; height: 34px; color: var(--color-earth); margin-bottom: 14px; }
.am-bioavail-factors-label { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-text-light); margin-bottom: 14px; }
.am-bioavail-factors ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 6px 18px; font-size: 0.84rem; color: var(--color-text); text-align: left; }
.am-bioavail-note { text-align: center; font-size: 0.86rem; color: var(--color-text-light); max-width: 720px; margin: 26px auto 0; line-height: 1.65; }
@media (max-width: 800px) {
  .am-bioavail-panel { grid-template-columns: 1fr; }
  .am-bioavail-factors { border-left: none; border-right: none; border-top: 1px solid var(--color-line); border-bottom: 1px solid var(--color-line); }
  .am-bioavail-factors ul { grid-template-columns: 1fr 1fr; text-align: center; }
}
@media (max-width: 420px) { .am-bioavail-factors ul { grid-template-columns: 1fr; } }

/* Rettelse (Sep 28, personality/premium-feel pass): .am-flow (the plain-
   page-background, faint-arrow horizontal line) is no longer used — the
   section is now .am-journey-panel below, a deep-purple rounded chapter
   panel. Left in place as page-scoped dead code, per the site's standing
   convention. */
.am-flow { display: flex; align-items: center; gap: 22px; margin-top: 40px; }
.am-flow-stage { flex: 1 1 0; min-width: 0; }
.am-flow-stage:last-child { text-align: right; }
.am-flow-num { display: block; font-family: var(--font-heading); font-weight: 700; font-size: 0.78rem; letter-spacing: 0.06em; color: var(--color-earth); margin-bottom: 10px; }
.am-flow-stage h3 { font-size: 1.05rem; margin: 0 0 8px; }
.am-flow-stage p { color: var(--color-text-light); font-size: 0.88rem; margin: 0; line-height: 1.55; }
.am-flow-arrow { flex: 0 0 auto; font-size: 1.1rem; color: var(--color-line); }
.am-flow-factors { flex: 1 1 0; min-width: 0; max-width: 240px; text-align: center; padding: 0 4px; }
.am-flow-factors svg { width: 26px; height: 26px; color: var(--color-earth); margin-bottom: 10px; }
.am-flow-factors-label { display: block; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-text-light); margin-bottom: 8px; }
.am-flow-factors-list { color: var(--color-text); font-size: 0.8rem; line-height: 1.6; margin: 0; }
.am-flow-ref { text-align: center; font-size: 0.76rem; color: var(--color-text-light); opacity: 0.75; margin: 14px auto 0; }
.am-flow-ref a { color: var(--color-text-light); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
@media (max-width: 800px) {
  .am-flow { flex-direction: column; align-items: stretch; gap: 18px; }
  .am-flow-stage:last-child { text-align: left; }
  .am-flow-arrow { transform: rotate(90deg); align-self: center; }
  .am-flow-factors { max-width: none; text-align: left; padding: 0; }
  .am-flow-factors svg { margin-bottom: 8px; }
}

/* ---------- From Content to Bioavailability — deep-purple chapter panel
   (Sep 28, personality/premium-feel pass). Same --color-earth / white-text
   / orange-eyebrow language as .am-transition-panel further down this same
   page (and .mp-cta-panel on maquipro.html) — reused here for CONTENT
   rather than a CTA, which is exactly what makes it read as a distinct
   science chapter rather than another flat cream/lavender section: it's
   the only floating rounded card this deep in colour on the page. Two
   translucent "glass" stage cards (rgba white fills on the solid purple,
   not two more solid colour blocks) sit either side of a connecting
   bridge; the six factor chips live ON that bridge, between the cards,
   not as a caption underneath. Ghost numerals reuse the same large/
   low-opacity numeral device as .au-path-num-ghost (suko-nordic-
   australia.html), recoloured white-on-purple. ---------- */
.am-journey-panel { background: var(--color-earth); border-radius: 28px; padding: 64px 56px; position: relative; overflow: hidden; }
.am-journey-panel .eyebrow { color: var(--color-shop-orange); }
.am-journey-panel h2 { color: #fff; margin: 12px 0 0; }
.am-journey-compare { display: grid; grid-template-columns: 1fr 250px 1fr; align-items: start; gap: 0; margin-top: 52px; }
.am-journey-stage {
  position: relative;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 18px;
  padding: 30px 28px;
  overflow: hidden;
}
.am-journey-stage-end { text-align: right; }
.am-journey-num-ghost { position: absolute; top: -10px; right: 20px; font-family: var(--font-heading); font-weight: 700; font-size: 4rem; line-height: 1; color: #fff; opacity: 0.09; pointer-events: none; }
.am-journey-stage-end .am-journey-num-ghost { right: auto; left: 20px; }
.am-journey-stage-label { position: relative; display: block; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: rgba(255,255,255,0.6); margin-bottom: 12px; }
.am-journey-stage h3 { position: relative; color: #fff; font-size: 1.3rem; margin: 0 0 8px; }
.am-journey-stage p { position: relative; color: rgba(255,255,255,0.74); font-size: 0.9rem; line-height: 1.55; margin: 0; }
.am-journey-bridge { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 0 22px; }
.am-journey-bridge-line {
  position: absolute; left: 0; right: 0; top: 50%; height: 1px;
  background: linear-gradient(90deg, rgba(255,255,255,0.45), var(--color-shop-orange) 50%, rgba(255,255,255,0.45));
  transform: scaleX(0); transform-origin: left; transition: transform 1000ms ease 150ms;
}
.am-journey-panel.is-visible .am-journey-bridge-line { transform: scaleX(1); }
.am-journey-factors { position: relative; z-index: 1; background: var(--color-earth); padding: 8px 6px; text-align: center; }
.am-journey-factors svg { width: 22px; height: 22px; color: rgba(255,255,255,0.55); margin-bottom: 8px; }
.am-journey-factors-label { display: block; font-size: 0.64rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(255,255,255,0.55); margin-bottom: 12px; }
.am-journey-factors-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.am-journey-factors-list li {
  font-size: 0.74rem; line-height: 1.3; color: rgba(255,255,255,0.88);
  background: rgba(255,255,255,0.09); border: 1px solid rgba(255,255,255,0.16);
  border-radius: 20px; padding: 5px 12px;
  opacity: 0; transform: translateY(7px);
  transition: opacity 550ms ease, transform 550ms ease;
}
.am-journey-panel.is-visible .am-journey-factors-list li { opacity: 1; transform: none; }
.am-journey-factors-list li:nth-child(1) { transition-delay: 300ms; }
.am-journey-factors-list li:nth-child(2) { transition-delay: 380ms; }
.am-journey-factors-list li:nth-child(3) { transition-delay: 460ms; }
.am-journey-factors-list li:nth-child(4) { transition-delay: 540ms; }
.am-journey-factors-list li:nth-child(5) { transition-delay: 620ms; }
.am-journey-factors-list li:nth-child(6) { transition-delay: 700ms; }
.am-journey-note { position: relative; text-align: center; font-size: 0.86rem; color: rgba(255,255,255,0.78); max-width: 640px; margin: 40px auto 0; line-height: 1.65; }
.am-journey-ref { position: relative; text-align: center; font-size: 0.76rem; color: rgba(255,255,255,0.5); margin: 14px auto 0; }
.am-journey-ref a { color: rgba(255,255,255,0.78); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.am-journey-ref a:hover, .am-journey-ref a:focus-visible { color: #fff; }
@media (max-width: 800px) {
  .am-journey-panel { padding: 48px 28px; }
  .am-journey-compare { grid-template-columns: 1fr; gap: 0; }
  .am-journey-stage-end { text-align: left; }
  .am-journey-stage-end .am-journey-num-ghost { right: 20px; left: auto; }
  .am-journey-bridge { padding: 34px 10px; }
  .am-journey-bridge-line {
    left: 50%; right: auto; top: 0; bottom: 0; width: 1px; height: auto;
    background: linear-gradient(180deg, rgba(255,255,255,0.45), var(--color-shop-orange) 50%, rgba(255,255,255,0.45));
    transform: scaleY(0); transform-origin: top;
  }
  .am-journey-panel.is-visible .am-journey-bridge-line { transform: scaleY(1); }
  .am-journey-factors-list { flex-direction: row; flex-wrap: wrap; justify-content: center; max-width: 300px; }
}
@media (prefers-reduced-motion: reduce) {
  .am-journey-bridge-line { transition: none; transform: scaleX(1); }
  .am-journey-factors-list li { transition: none; opacity: 1; transform: none; }
}
@media (max-width: 800px) and (prefers-reduced-motion: reduce) {
  .am-journey-bridge-line { transform: scaleY(1); }
}

/* Closing "From Maqui Berry to MaquiPro®" transition — premium panel,
   matching maquipro.html's mp-cta-panel language (deep purple, white
   copy, small orange accent, warm-white button) with page-scoped names. */
.am-transition-panel { background: var(--color-earth); border-radius: 28px; padding: 56px 48px; text-align: center; max-width: 760px; margin: 0 auto; }
.am-transition-panel .eyebrow { color: var(--color-shop-orange); }
.am-transition-panel h2 { color: #fff; margin: 12px 0 14px; }
.am-transition-panel p { color: rgba(255,255,255,0.82); max-width: 560px; margin: 0 auto; line-height: 1.6; }
.am-transition-status { display: block; font-size: 0.82rem; font-weight: 600; color: rgba(255,255,255,0.7); letter-spacing: 0.01em; margin-top: 20px; }
/* Rettelse (Sep 28, full-page redesign): .am-transition-cta-wrap (a
   single-button paragraph wrapper) is no longer used — this panel now
   closes with two buttons in .am-transition-buttons, merging in the CTA
   that used to be its own separate wholesale section directly below.
   Left in place as page-scoped dead code. */
.am-transition-cta-wrap { margin-top: 26px !important; }
.am-transition-buttons { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 16px; margin-top: 30px; }
.am-transition-btn {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--color-cream); color: var(--color-earth);
  font-weight: 600; font-size: 0.92rem;
  padding: 14px 26px; border-radius: var(--radius-sm);
  text-decoration: none;
  transition: background var(--transition-base);
}
.am-transition-btn:hover, .am-transition-btn:focus-visible { background: #fff; }
.am-transition-arrow { display: inline-block; transition: transform var(--transition-slow); }
.am-transition-btn:hover .am-transition-arrow { transform: translateX(4px); }
.am-transition-btn:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.am-transition-btn-outline { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,0.55); }
.am-transition-btn-outline:hover, .am-transition-btn-outline:focus-visible { background: rgba(255,255,255,0.08); border-color: #fff; }
@media (max-width: 700px) {
  .am-transition-panel { padding: 44px 28px; }
  .am-transition-buttons { flex-direction: column; align-items: stretch; }
  .am-transition-buttons .am-transition-btn { justify-content: center; }
}
@media (prefers-reduced-motion: reduce) { .am-transition-arrow { transition: none; } }

/* ==================================================================
   MaquiPro® — product introduction, two-column (Sep 2026 revision)
   Clear text-left / product-photo-right split, both columns given
   generous width, image shown uncropped at its natural ratio (no
   object-fit:cover crop). Mobile shows the text first, image below.
   ================================================================== */
.mp-formulation { display: flex; align-items: flex-start; gap: 56px; }
.mp-formulation-text { flex: 1 1 50%; }
.mp-formulation-text-inner { max-width: none; }
.mp-formulation-text .eyebrow { color: var(--color-earth); }
.mp-formulation-text h2 { color: var(--color-forest-dark); font-size: clamp(1.65rem, 2.6vw, 2.1rem); line-height: 1.2; margin: 10px 0 18px; }
.mp-formulation-text p { color: var(--color-text); font-size: 1rem; line-height: 1.75; margin: 0 0 16px; max-width: 58ch; }
.mp-formulation-text p:last-of-type { margin-bottom: 0; }
.mp-formulation-marker { display: flex; align-items: center; gap: 8px; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--color-text-light); margin-top: 22px; }
.mp-formulation-media { flex: 1 1 42%; background: var(--color-cream-dark); border-radius: var(--radius-lg); padding: 22px; margin-top: 4px; }
.mp-formulation-media img { width: 100%; height: auto; display: block; border-radius: var(--radius-md); box-shadow: var(--shadow-sm); }
@media (max-width: 860px) {
  .mp-formulation { flex-direction: column; gap: 28px; }
  .mp-formulation-text, .mp-formulation-media { flex: none; width: 100%; }
  .mp-formulation-text p { max-width: none; }
  .mp-formulation-media { margin-top: 0; padding: 16px; }
}

/* ==================================================================
   Lactiplantibacillus plantarum — full page redesign (Sep 2026)
   Shared "info card" system (used for both the 4 strain-identity facts
   and the 6 origin-study facts, so the two panels read as one visual
   language), an editorial two-column pattern reusing the site's
   existing .two-col-grid / figure.photo, a refined dotted provenance
   timeline, a hero "formulation caption" line, and a very subtle
   lavender-tint section variant for extra background rhythm.
   ================================================================== */

/* Very subtle lavender tint — a whisper of the brand's indigo accent on
   cream, used as a third background tone alongside plain cream and
   .bg-alt's cream-dark, for extra section-to-section rhythm. */
.bg-lavender-tint { background: #F4F2FA; }

/* Editorial image frame: a softer, quieter alternative to figure.photo's
   default shadow — a thin hairline border instead, so a photo feels
   integrated into the page rather than dropped in as a stock card. */
.editorial-frame { box-shadow: none; border: 1px solid var(--color-line); }

/* Shared info-card unit: soft tonal background, one hairline border,
   no heavy shadow — used for both the strain-identity cards and the
   compact origin-study evidence cards. */
.info-card {
  background: var(--color-cream-dark);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  padding: 20px 22px;
}
.info-card-label { display: block; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; color: var(--color-earth); margin-bottom: 8px; }
.info-card-value { display: block; font-family: var(--font-heading); font-weight: 600; font-size: 1.05rem; color: var(--color-forest-dark); line-height: 1.35; }

/* "The Strain": text one side, 2x2 identity-card grid the other. */
.strain-intro-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 48px; align-items: center; }
.strain-card-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
@media (max-width: 860px) {
  .strain-intro-grid { grid-template-columns: 1fr; gap: 28px; }
}
@media (max-width: 480px) {
  .strain-card-grid { grid-template-columns: 1fr; }
}

/* "Documented Origin" evidence panel: the same info-card unit, compact
   3x2 grid, stacking to 1 column on mobile. */
.origin-fact-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 32px; }
@media (max-width: 700px) {
  .origin-fact-grid { grid-template-columns: 1fr; }
}

/* ---------- Lactiplantibacillus plantarum page (Sep 2026 redesign) ---------- */

/* Hero "identity module": three linked panels (Maqui / Strain / Result)
   showing how the two MaquiPro® components relate, mirroring the
   established .mp-formula-* visual language from the MaquiPro® page
   (same radii/padding/colour panels) under page-scoped names. */
.lp-identity-frame { margin-top: 28px; border-radius: 26px; overflow: hidden; box-shadow: var(--shadow-sm); }
.lp-identity-grid { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; align-items: stretch; }
.lp-identity-panel { min-width: 0; padding: 34px 30px; display: flex; flex-direction: column; justify-content: center; }
.lp-identity-panel--maqui { background: var(--color-forest-dark); color: #fff; }
.lp-identity-panel--strain { background: var(--color-cream-dark); color: var(--color-forest-dark); }
.lp-identity-panel--result { background: var(--color-white); color: var(--color-forest-dark); }
.lp-identity-label { display: block; font-size: 0.68rem; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; margin-bottom: 12px; }
.lp-identity-panel--maqui .lp-identity-label { color: rgba(255,255,255,0.65); }
.lp-identity-panel--strain .lp-identity-label, .lp-identity-panel--result .lp-identity-label { color: var(--color-earth); }
.lp-identity-panel h3 { font-family: var(--font-heading); font-weight: 600; font-size: 1.05rem; line-height: 1.32; margin: 0 0 6px; }
.lp-identity-panel--maqui h3 { color: #fff; }
.lp-identity-panel--result h3 { color: var(--color-earth); font-size: 1.2rem; }
.lp-identity-strain-name { font-weight: 600; color: var(--color-earth); font-size: 0.88rem; margin: 0 0 4px; }
.lp-identity-panel p { font-size: 0.82rem; line-height: 1.55; margin: 0; max-width: 30ch; }
.lp-identity-panel--maqui p { color: rgba(255,255,255,0.78); }
.lp-identity-panel--strain p, .lp-identity-panel--result p { color: var(--color-text-light); }
.lp-identity-symbol { display: flex; align-items: center; justify-content: center; background: var(--color-cream); padding: 0 6px; }
.lp-identity-symbol span { font-family: var(--font-heading); font-size: 1.3rem; font-weight: 600; color: var(--color-text-light); }
@media (max-width: 860px) {
  .lp-identity-grid { grid-template-columns: 1fr; }
  .lp-identity-symbol { padding: 8px 0; }
  .lp-identity-panel { padding: 28px 26px; }
}

/* Original-research publication card — replaces the earlier editorial
   image placeholder with a restrained, credible journal-paper treatment
   built from the study's own bibliographic details (no photography). */
.lp-study-card { background: var(--color-white); border: 1px solid var(--color-line); border-radius: var(--radius-lg); padding: 32px 34px; display: flex; flex-direction: column; height: 100%; }
.lp-study-icon { width: 40px; height: 40px; border-radius: var(--radius-sm); background: var(--color-cream-dark); color: var(--color-earth); display: flex; align-items: center; justify-content: center; margin-bottom: 16px; }
.lp-study-icon svg { width: 20px; height: 20px; }
.lp-study-eyebrow { display: block; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--color-earth); margin-bottom: 10px; }
.lp-study-title { font-family: var(--font-heading); font-weight: 600; font-size: 1.05rem; line-height: 1.4; color: var(--color-forest-dark); margin: 0 0 10px; }
.lp-study-meta { font-size: 0.86rem; color: var(--color-text-light); line-height: 1.7; margin: 0; }
.lp-study-meta strong { color: var(--color-text); font-weight: 600; }
.lp-study-divider { height: 1px; background: var(--color-line); margin: 18px 0; }
.lp-study-ids { display: flex; flex-wrap: wrap; gap: 6px 20px; font-size: 0.8rem; color: var(--color-text-light); margin: 0 0 22px; }
.lp-study-ids strong { color: var(--color-text); font-weight: 600; }
.lp-study-actions { display: flex; flex-wrap: wrap; gap: 12px 22px; align-items: center; margin-top: auto; }
.lp-study-actions .btn { white-space: nowrap; }
.lp-study-secondary-link { font-size: 0.86rem; font-weight: 600; color: var(--color-earth); text-decoration: none; display: inline-flex; align-items: center; gap: 4px; }
.lp-study-secondary-link:hover, .lp-study-secondary-link:focus-visible { text-decoration: underline; }
@media (max-width: 700px) { .lp-study-card { padding: 26px 24px; } }

/* Identity & Research Record — 4 non-chronological reference points
   (replacing the earlier "origin-timeline", which read as an implied
   chronology the page doesn't actually document). Same connecting-line
   idiom as the .dnabc-stepper pattern used elsewhere on the site, sized
   for four items and collapsing to a single vertical line on mobile. */
.lp-record-grid { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin: 40px 0 8px; }
.lp-record-grid::before { content: ''; position: absolute; top: 17px; left: 17px; right: 17px; height: 1px; background: var(--color-line); z-index: 0; }
.lp-record-step { position: relative; z-index: 1; padding-top: 46px; }
.lp-record-num {
  position: absolute; top: 0; left: 0; width: 34px; height: 34px; border-radius: 50%;
  border: 1.5px solid var(--color-earth); color: var(--color-earth); background: var(--color-cream);
  font-family: var(--font-heading); font-weight: 700; font-size: 0.82rem;
  display: flex; align-items: center; justify-content: center;
}
.bg-alt .lp-record-num { background: var(--color-cream-dark); }
.lp-record-step h3 { margin: 0 0 6px; font-size: 0.98rem; color: var(--color-forest-dark); }
.lp-record-step p { color: var(--color-text-light); font-size: 0.86rem; margin: 0; line-height: 1.55; }
.lp-record-step.reveal:nth-child(1) { transition-delay: 0ms; }
.lp-record-step.reveal:nth-child(2) { transition-delay: 80ms; }
.lp-record-step.reveal:nth-child(3) { transition-delay: 160ms; }
.lp-record-step.reveal:nth-child(4) { transition-delay: 240ms; }
@media (max-width: 760px) {
  .lp-record-grid { grid-template-columns: 1fr; gap: 0; margin: 32px 0 8px; }
  .lp-record-grid::before { display: none; }
  .lp-record-step { padding: 0 0 28px 46px; }
  .lp-record-step:last-child { padding-bottom: 0; }
  .lp-record-step::after { content: ''; position: absolute; top: 34px; bottom: 0; left: 17px; width: 1px; background: var(--color-line); }
  .lp-record-step:last-child::after { display: none; }
}

.lp-hero-deposit { display: block; font-size: 0.55em; font-weight: 500; color: var(--color-text-light); margin-top: 4px; }

/* ==========================================================================
   SUKOFLEX® WHOLESALE — top three sections (Hero, Available Formats,
   How to Get Started). Scoped entirely to .sf-* classes; does not touch any
   shared component used elsewhere on this or other pages. ==========================================================================
   ---------- SUKOFLEX Wholesale hero — same full-bleed, uncropped product
   photo technique as .pl-hero (Private Label): the photo is a plain, never-
   cropped <img> sized by percentage and positioned to the right edge, so
   the hand-and-scoop composition (which runs to the source photo's own
   right edge) is never sliced by object-fit cropping at any viewport width.
   Its own warm backdrop blends into the section's cream background instead
   of sitting inside a card. Copy is overlaid on the left via absolute
   positioning + vertical centering, exactly mirroring .pl-hero-grid. ---------- */
/* Sep 2026 (comment feedback): the photo used to be a full-bleed absolute-
   positioned backdrop running to the browser's own right edge with hard
   square corners — too large and disconnected from the rest of the page's
   contained width. Rebuilt as a normal two-column grid inside the same
   .container as the rest of the page (text | photo), so the photo sits
   within the page's usual centred width, with breathing room from the
   screen edge and soft rounded corners like the site's other imagery. */
/* Rettelse (Sep 29, artifact comment): Amanda asked for this hero to match
   the text/image positioning of the Private Label hero (.pl-hero) — copy
   overlaid on the left via absolute positioning + vertical centering,
   photo as a plain, never-cropped, full-bleed background layer (no card,
   no fixed aspect-ratio crop). Rebuilt on that exact mechanism; only the
   image's own width/left percentages differ, tuned for this photo's own
   content bounds (see note above .sf-hero-media img below). */
.sf-hero { position: relative; overflow: hidden; padding: 40px 0 36px; min-height: 620px; box-sizing: border-box; background: var(--color-cream); }
.sf-hero .container { max-width: 1400px; }
.sf-hero-grid {
  position: absolute;
  top: 50%;
  left: max(28px, calc((100vw - var(--max-width)) / 2));
  transform: translateY(-50%);
  width: 40%;
  max-width: 500px;
  min-width: 280px;
  margin: 0;
  z-index: 2;
}
.sf-hero-copy h1 { font-size: clamp(2.1rem, 3.4vw, 2.85rem); line-height: 1.14; margin: 12px 0 18px; }
.sf-hero-copy .tagline-sub { font-size: 1.05rem; color: var(--color-text-light); max-width: 46ch; line-height: 1.6; margin-bottom: 26px; }
.sf-hero-ctas { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; margin-bottom: 26px; }
.sf-hero-secondary { font-size: 0.92rem; white-space: nowrap; }
.sf-hero-proof {
  font-size: 0.82rem;
  color: var(--color-text-light);
  padding-top: 18px;
  border-top: 1px solid var(--color-line);
  max-width: 440px;
  margin: 0;
}
.sf-proof-sep { color: var(--color-shop-orange); font-weight: 700; margin: 0 2px; }
/* Background layer, exactly mirroring .pl-hero-media: absolutely filling
   the section behind the text. Rettelse (Sep 29, artifact comment): swapped
   to the newly-branded product photo (sukoflex-hero-branded.png, 2400x1029,
   ~2.33 aspect) — like the Private Label photo, this one has a genuine
   blank backdrop margin on its own left edge (the capsules/jars start at
   ~23% of the photo's width; the hand runs to its own right edge), so it
   uses the Private Label technique (width/left percentages) rather than
   the old photo's scale-down: sized so that blank margin lines up with the
   text column and the whole, never-cropped photo (both jars, loose
   capsules and the full hand) sits just to the right of the text. */
.sf-hero-media {
  position: absolute;
  inset: 0;
  margin: 0;
  overflow: hidden;
  z-index: 1;
}
.sf-hero-media img {
  display: block;
  position: absolute;
  width: 64%;
  left: 32%;
  top: 50%;
  height: auto;
  transform: translateY(-50%);
  transition: transform 900ms ease;
}
.sf-hero-media:hover img { transform: translateY(-50%) scale(1.035); }
@media (prefers-reduced-motion: reduce) {
  .sf-hero-media img { transition: none; }
}
@media (max-width: 1180px) and (min-width: 901px) {
  .sf-hero { min-height: 560px; }
  .sf-hero-grid { width: auto; max-width: 400px; }
}
@media (max-width: 900px) {
  .sf-hero { padding: 8px 0 28px; min-height: 0; overflow: visible; }
  .sf-hero-grid { position: static; transform: none; left: auto; width: auto; max-width: none; margin: 6px 0 0; }
  .sf-hero-media {
    position: static;
    inset: auto;
    width: 96%;
    max-width: 520px;
    margin: 20px auto 0;
  }
  .sf-hero-media img {
    position: static;
    width: 100%;
    left: auto;
    top: auto;
    height: auto;
    transform: none;
  }
  .sf-hero-media:hover img { transform: none; }
}
@media (max-width: 480px) {
  .sf-hero-ctas { gap: 16px 24px; }
}
/* Deliberate breathing room between the hero and Available Formats — a plain
   open cream gap (no divider needed; the hero already ends on a hairline via
   .sf-hero-proof) so the two sections read as clearly separate steps instead
   of visually touching. Responsive section padding, never a fixed-height
   spacer element. Reduced significantly (Sep 2026, Rettelse) from the
   original 112/84/58px — the gap had grown too large and read as
   disconnected from the hero above it. */
.sf-formats-section { padding-top: 48px; }
@media (max-width: 900px) {
  .sf-formats-section { padding-top: 36px; }
}
@media (max-width: 600px) {
  .sf-formats-section { padding-top: 24px; }
}

/* ---------- SUKOFLEX Wholesale — Available Formats, redesigned (Sep 2026,
   Rettelse) as an interactive two-option selector, matching the hover-
   expand/tap-to-reveal language of the homepage's Private Label vs
   SUKOFLEX® split (see .offer-split / .offer-panel above) — rebuilt here
   with new, page-scoped .sf-format-* classes so nothing shared was
   touched. Replaces the earlier two static, bordered photo columns: no
   frame/background behind the powder photo, no prominent vertical divider,
   no card boxes — just imagery, typography and motion. Hovering (or
   tapping, on touch) a format widens it, reveals its description and link,
   and gently contracts the other option without hiding it. On mobile both
   options stay stacked and fully expanded, so the product photo is always
   a live link straight to its enquiry — nothing hidden to reveal first. ---------- */
.sf-format-select { position: relative; display: flex; align-items: stretch; margin-top: 40px; }
.sf-format-option { position: relative; flex: 1 1 50%; min-width: 0; display: flex; flex-direction: column; }
.sf-format-divider { width: 1px; align-self: stretch; background: var(--color-line); flex-shrink: 0; }

/* Sep 2026 (comment feedback): the fixed-height box with its own beige
   background/padding sat behind each photo's own (already near-white)
   studio backdrop, reading as a visible box-inside-a-box double frame.
   Both product photos now share the same 4:3 landscape aspect ratio
   (1448x1086), so the box simply takes that aspect ratio instead of a
   fixed height+padding — the photo fills its box edge to edge with no
   surrounding color and no cropping. */
.sf-format-media { display: block; position: relative; overflow: hidden; aspect-ratio: 4 / 3; border-radius: var(--radius-md); text-decoration: none; }
.sf-format-media img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; transition: transform 900ms ease; }
.sf-format-option:hover .sf-format-media img,
.sf-format-option:focus-within .sf-format-media img,
.sf-format-option.is-open .sf-format-media img { transform: scale(1.015); }

.sf-format-content { padding: 22px 28px 0; text-align: center; }

.sf-format-toggle { all: unset; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; gap: 12px; cursor: pointer; }
.sf-format-toggle h3 { margin: 0; transition: color var(--transition-base); }
.sf-format-option:hover .sf-format-toggle h3,
.sf-format-option:focus-within .sf-format-toggle h3,
.sf-format-option.is-open .sf-format-toggle h3 { color: var(--color-earth); }

.sf-format-toggle-icon { flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid var(--color-line); position: relative; transition: border-color var(--transition-base); }
.sf-format-toggle-icon::before, .sf-format-toggle-icon::after { content: ''; position: absolute; background: var(--color-forest-dark); transition: transform var(--transition-base), background var(--transition-base); }
.sf-format-toggle-icon::before { left: 8px; right: 8px; top: 50%; height: 1.5px; transform: translateY(-50%); }
.sf-format-toggle-icon::after { top: 8px; bottom: 8px; left: 50%; width: 1.5px; transform: translateX(-50%); }
.sf-format-option:hover .sf-format-toggle-icon,
.sf-format-option:focus-within .sf-format-toggle-icon,
.sf-format-option.is-open .sf-format-toggle-icon { border-color: var(--color-earth); }
.sf-format-option:hover .sf-format-toggle-icon::before, .sf-format-option:hover .sf-format-toggle-icon::after,
.sf-format-option:focus-within .sf-format-toggle-icon::before, .sf-format-option:focus-within .sf-format-toggle-icon::after,
.sf-format-option.is-open .sf-format-toggle-icon::before, .sf-format-option.is-open .sf-format-toggle-icon::after { background: var(--color-earth); }
.sf-format-option:hover .sf-format-toggle-icon::after,
.sf-format-option:focus-within .sf-format-toggle-icon::after,
.sf-format-option.is-open .sf-format-toggle-icon::after { transform: translateX(-50%) rotate(90deg) scaleY(0); }

.sf-format-reveal-wrap { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 420ms ease; }
.sf-format-reveal-inner { overflow: hidden; max-width: 340px; margin: 0 auto; }
.sf-format-desc { color: var(--color-text-light); margin: 0; padding-top: 12px; }
.sf-format-reveal-inner .btn-text { display: inline-block; margin-top: 14px; }
.sf-format-option:hover .sf-format-reveal-wrap,
.sf-format-option:focus-within .sf-format-reveal-wrap,
.sf-format-option.is-open .sf-format-reveal-wrap { grid-template-rows: 1fr; }

/* Sep 2026 (comment feedback): hovering used to widen the hovered option to
   58%/42%, which shifted both product photos sideways on every hover —
   removed so the two columns stay a fixed 50/50 split; hovering still
   reveals the description text and the subtle image zoom above, just
   without the side-to-side jump. */

.sf-formats-cta { margin: 40px 0 0; text-align: center; }

@media (prefers-reduced-motion: reduce) {
  .sf-format-media img { transition: none; }
}

@media (max-width: 760px) {
  .sf-format-select { flex-direction: column; gap: 28px; margin-top: 28px; }
  .sf-format-divider { display: none; }
  .sf-format-reveal-wrap { grid-template-rows: 1fr !important; }
  .sf-format-toggle { cursor: default; }
  .sf-format-toggle-icon { display: none; }
}

/* ---------- SUKOFLEX Wholesale — How to Get Started: an open editorial
   process on the page's own bg-alt cream tint (no purple background block).
   A single thin connecting line runs behind the four steps with a small
   marker per step (same idiom as .origin-timeline), and "draws" in via a
   scaleX fill when the track enters the viewport; the four steps then
   reveal in sequence via staggered .reveal transition-delays. Becomes a
   left-hand vertical timeline on mobile. ---------- */
.sf-process-track { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; margin: 8px 0 0; }
.sf-process-line { position: absolute; top: 9px; left: 0; right: 0; height: 1px; background: var(--color-line); overflow: hidden; }
.sf-process-line-fill {
  position: absolute;
  inset: 0;
  background: var(--color-earth);
  transform-origin: left center;
  transform: scaleX(0);
  transition: transform 1000ms ease;
}
.sf-process-track.is-visible .sf-process-line-fill { transform: scaleX(1); }
.sf-process-step { position: relative; padding-top: 26px; }
.sf-process-step::before {
  content: '';
  position: absolute;
  top: 5px;
  left: 0;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--color-earth);
  border: 2px solid var(--color-cream-dark);
  box-shadow: 0 0 0 1px var(--color-earth);
}
.sf-process-num { display: block; font-family: var(--font-heading); font-weight: 700; font-size: 2rem; color: var(--color-earth); margin-bottom: 8px; }
.sf-process-step p { color: var(--color-text-light); font-size: 0.92rem; margin: 0; }
.sf-process-step.reveal:nth-child(2) { transition-delay: 70ms; }
.sf-process-step.reveal:nth-child(3) { transition-delay: 140ms; }
.sf-process-step.reveal:nth-child(4) { transition-delay: 210ms; }
.sf-process-cta { text-align: center; margin-top: 44px; }
.sf-process-cta .contact-line { font-size: 0.88rem; color: var(--color-text-light); margin: 16px 0 0; }
.sf-process-cta .contact-line a { color: inherit; text-decoration: underline; text-underline-offset: 3px; font-weight: 600; }
@media (prefers-reduced-motion: reduce) {
  .sf-process-line-fill { transition: none; }
}
@media (max-width: 900px) {
  .sf-process-track { grid-template-columns: 1fr 1fr; gap: 32px 28px; }
}
@media (max-width: 560px) {
  .sf-process-track { grid-template-columns: 1fr; gap: 0; }
  .sf-process-line { top: 0; bottom: 0; left: 4px; right: auto; width: 1px; height: auto; }
  .sf-process-line-fill { transform: scaleY(0) scaleX(1); transform-origin: top center; }
  .sf-process-track.is-visible .sf-process-line-fill { transform: scaleY(1) scaleX(1); }
  .sf-process-step { padding: 0 0 28px 24px; }
  .sf-process-step:last-child { padding-bottom: 0; }
  .sf-process-step::before { top: 6px; left: -1px; margin-left: -4px; }
}

/* ---------- SUKOFLEX Wholesale — "Why SUKOFLEX" trust row: replaces the
   three boxed cards with one open editorial row on the section's own
   bg-alt background, thin vertical dividers between the three points,
   large purple numbers, small proof marks aligned consistently beneath
   the copy. No institutional logo is used for the science point — kept
   factual, text-only, so nothing implies an endorsement that hasn't been
   granted. ---------- */
.sf-trust-row {
  display: grid;
  grid-template-columns: 1fr 1px 1fr 1px 1fr;
  gap: 40px;
  margin-top: 8px;
}
.sf-trust-divider { background: rgba(48, 43, 117, 0.18); }
.sf-trust-num {
  display: block;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 2rem;
  color: var(--color-earth);
  margin-bottom: 10px;
  font-variant-numeric: tabular-nums;
}
.sf-trust-col h3 { margin-bottom: 8px; }
.sf-trust-col p { color: var(--color-text-light); margin: 0 0 18px; }
/* Proof-mark logos (AP-4 stamp, EU organic mark): bottom-aligned, equally
   sized "slot" per column so the row feels balanced without forcing the
   two logos to share identical dimensions. The slot — not the image — is
   the flex item that gets margin-top:auto, so column stretch never touches
   the <img> itself; inside the slot, align-items:flex-end/justify-content:
   flex-start position the logo without stretching it. object-fit:contain
   plus max-width/max-height (never a fixed width+height pair) preserves
   each logo's native aspect ratio and keeps its full artwork visible. */
.proof-logo-slot {
  min-height: 90px;
  margin-top: auto;
  padding-top: 18px;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
}
.proof-logo { display: block; width: auto; height: auto; object-fit: contain; }
.proof-logo--ap4 { max-width: 150px; max-height: 90px; }
.proof-logo--organic { max-width: 105px; max-height: 75px; }
.sf-trust-col { display: flex; flex-direction: column; }
.sf-trust-row .sf-trust-col.reveal:nth-child(3) { transition-delay: 70ms; }
.sf-trust-row .sf-trust-col.reveal:nth-child(5) { transition-delay: 140ms; }
@media (max-width: 800px) {
  .sf-trust-row { grid-template-columns: 1fr; gap: 0; }
  .sf-trust-divider { display: none; }
  .sf-trust-col { padding: 22px 0; border-bottom: 1px solid var(--color-line); }
  .sf-trust-col:first-child { padding-top: 0; }
  .sf-trust-col:last-child { border-bottom: none; }
}

/* SUKOFLEX product attributes — a refined proof line beneath the trust
   row (not the old boxed purple bar), explicitly labelled so it reads as
   specific to SUKOFLEX rather than the wider SUKO Nordic range. */
.sf-attrs { text-align: center; max-width: 760px; margin: 48px auto 0; }
.sf-attrs-label {
  display: block;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-earth);
  margin-bottom: 14px;
}
.sf-attrs-list {
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--color-text);
  line-height: 2;
  margin: 0;
}
.sf-attrs-sep { color: var(--color-shop-orange); font-weight: 700; margin: 0 2px; }

/* ---------- SUKOFLEX Wholesale — MaquiPro cross-sell: edge-to-edge split
   (Sep 2026 rebuild). The earlier version sat as a small photo boxed
   inside the page's normal container, with cream margin on every side —
   read as flat and small. Rebuilt as a full 100vw grid so the photo
   bleeds to the browser's left edge, echoing the "family intro" split on
   the homepage (page-scoped classes, not the shared .split-edge-section,
   which several Private Label sections depend on and assumes a tall
   portrait crop). Height is driven purely by the photo's own aspect
   ratio and the grid uses align-items:center (not stretch), so the wide/
   short cross-sell shot is never cropped or force-stretched to match the
   text column's height. */
.sf-maqui-cross-grid {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 0;
}
.sf-maqui-cross-media {
  position: relative;
  overflow: hidden;
  aspect-ratio: 1860 / 846;
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
}
.sf-maqui-cross-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  transition: transform 700ms ease;
}
.sf-maqui-cross-media:hover img, .sf-maqui-cross-media:focus-within img { transform: scale(1.025); }
.sf-maqui-cross-text {
  display: flex;
  align-items: center;
  padding: 0 max(28px, calc((100vw - var(--max-width)) / 2)) 0 56px;
}
.sf-maqui-cross-text-inner { max-width: 440px; }
@media (prefers-reduced-motion: reduce) {
  .sf-maqui-cross-media img { transition: none; }
}
@media (max-width: 1180px) and (min-width: 901px) {
  .sf-maqui-cross-text { padding: 0 40px; }
}
@media (max-width: 900px) {
  .sf-maqui-cross-grid { grid-template-columns: 1fr; gap: 24px; }
  .sf-maqui-cross-media { border-radius: var(--radius-md); }
  .sf-maqui-cross-text { padding: 0 28px; }
  .sf-maqui-cross-text-inner { max-width: none; }
}

/* ---------- SUKOFLEX Wholesale — final CTA: same calm editorial
   two-column close as the Private Label page's .pl-final, with its own
   class names (kept independent of .pl-final so the two pages' final
   sections can evolve separately), SUKOFLEX as the primary action and
   Private Label offered underneath as the secondary pathway. ---------- */
/* Sep 2026 site-wide QA pass: none of these three sections had a padding
   override, so their bare default (88px 0) stacked at both boundaries for
   a ~176px dead gap on each side of the full-bleed maqui cross-sell grid. */
.sf-process-section { padding-bottom: 40px; }
.sf-maqui-section { padding-top: 40px; padding-bottom: 40px; }
.sf-final { padding-top: 40px; background: var(--color-cream); }
.sf-final-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) 1px minmax(0, 1.15fr);
  gap: 56px;
  align-items: center;
}
.sf-final-divider { background: rgba(48, 43, 117, 0.18); align-self: stretch; }
.sf-final-col-left h2 { font-size: clamp(1.9rem, 3.2vw, 2.5rem); max-width: 360px; }
.sf-final-col-right p:first-child { color: var(--color-text-light); max-width: 420px; }
.sf-final-primary-cta { margin: 26px 0 14px; }
.sf-final-pl-link { margin: 0 0 20px; font-size: 0.92rem; }
.sf-final .contact-line { font-size: 0.88rem; color: var(--color-text-light); margin: 0; }
.sf-final .contact-line a { color: inherit; text-decoration: underline; text-underline-offset: 3px; font-weight: 600; }
.sf-final-col-left.reveal { transition-delay: 0ms; }
.sf-final-col-right.reveal { transition-delay: 90ms; }
@media (max-width: 760px) {
  .sf-final-grid { grid-template-columns: 1fr; gap: 8px; }
  .sf-final-divider { display: none; }
  .sf-final-col-left h2, .sf-final-col-right p:first-child { max-width: none; }
  .sf-final-col-left { margin-bottom: 22px; }
}

/* ================= AP-4 Rosehip — cinematic video hero ================= */
.slim-breadcrumb-bar { background: var(--color-cream); padding: 14px 0; }
.slim-breadcrumb-bar .breadcrumb { margin: 0; }

.ap4hero {
  position: relative;
  height: 78svh;
  min-height: 540px;
  max-height: 880px;
  padding: 0;
  overflow: hidden;
  background: #14130f;
  display: flex;
  align-items: flex-end;
}
.ap4hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 60%;
  display: block;
}
/* ---------- Premium hero overlay — plain text over a scrim, matching the
   homepage hero carousel exactly (.hero-carousel-caption / ::after scrim) -----
   Used by every full-bleed video hero (AP-4® Rosehip, MaquiPro®, Maqui
   Berry & Anthocyanins) so the text overlay reads exactly like the front
   page's hero: no card, no blur, no border — just text over a left-to-right
   gradient scrim, vertically centred. */
.premium-hero-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(90deg, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.16) 45%, rgba(0,0,0,0) 65%);
  pointer-events: none;
}
.premium-hero-overlay {
  position: absolute;
  z-index: 2;
  left: 6%;
  top: 50%;
  max-width: 560px;
  color: #fff;
}
.premium-hero-overlay .phero-breadcrumb {
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.7);
  margin: 0 0 12px;
}
.premium-hero-overlay .phero-breadcrumb a { color: rgba(255, 255, 255, 0.85); text-decoration: underline; text-underline-offset: 3px; }
.premium-hero-overlay .phero-breadcrumb a:hover { color: #fff; }
.premium-hero-overlay .phero-eyebrow {
  display: block;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.8rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.85);
  margin: 0 0 14px;
}
.premium-hero-overlay h1 {
  color: #fff;
  font-weight: 600;
  font-size: clamp(1.7rem, 3.2vw, 2.4rem);
  line-height: 1.18;
  margin: 0 0 14px;
}
.premium-hero-overlay .phero-body {
  color: rgba(255, 255, 255, 0.88);
  font-size: 0.95rem;
  line-height: 1.6;
  margin: 0 0 20px;
}
.premium-hero-overlay .phero-cta { margin-top: 4px; }

.premium-hero-overlay.reveal { opacity: 0; transform: translateY(calc(-50% + 16px)); transition: opacity 600ms ease, transform 600ms ease; }
.premium-hero-overlay.reveal.is-visible { opacity: 1; transform: translateY(-50%); }
.premium-hero-overlay:not(.reveal) { transform: translateY(-50%); }

@media (max-width: 900px) {
  .premium-hero-overlay { left: 8%; right: 8%; max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
  .premium-hero-overlay.reveal { transition: none; }
}

.ap4hero-toggle {
  position: absolute;
  right: 24px;
  bottom: 24px;
  z-index: 2;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.4);
  background: rgba(20, 19, 17, 0.35);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background var(--transition-base), border-color var(--transition-base);
}
.ap4hero-toggle:hover { background: rgba(20, 19, 17, 0.55); border-color: rgba(255, 255, 255, 0.75); }
.ap4hero-toggle .icon-play { margin-left: 2px; }

@media (max-width: 1180px) and (min-width: 641px) {
  .ap4hero { height: 68svh; min-height: 480px; }
}
@media (max-width: 640px) {
  .ap4hero { height: 65svh; min-height: 440px; }
  .ap4hero-toggle { right: 16px; bottom: 16px; width: 36px; height: 36px; }
}
@media (prefers-reduced-motion: reduce) {
  .ap4hero-toggle { transition: none; }
}

/* ================= AP-4 Rosehip — "What the AP-4 Standard Guarantees" ================= */
#ap4Standard { scroll-margin-top: 88px; }
.ap4std-intro { max-width: 780px; margin: 0 auto 8px; }
.ap4std-intro p { color: var(--color-text-light); margin: 14px auto 0; }

/* Rettelse (Sep 29 2026, chat feedback: "gør billedet større og lad det
   gerne række længere mod højre kant"): media column widened (44/56 ->
   38/62) and the container itself widened to 1400px (see the HTML), plus
   .ap4std-media below bleeds past the container's own right edge all the
   way to the viewport edge, so the photo reads as a large editorial
   element rather than "two elements inside a container." margin-top
   tightened per the same feedback ("stram den lodrette afstand"). */
.ap4std-layout {
  display: grid;
  grid-template-columns: 0.61fr 1fr;
  gap: 48px;
  align-items: start;
  margin-top: 32px;
}

.ap4std-list { display: flex; flex-direction: column; }
.ap4std-item { border-bottom: 1px solid var(--color-line); }
.ap4std-item:first-of-type { border-top: 1px solid var(--color-line); }
.ap4std-question { margin: 0; }

.ap4std-trigger {
  display: flex;
  align-items: center;
  gap: 18px;
  width: 100%;
  background: transparent;
  border: none;
  text-align: left;
  cursor: pointer;
  padding: 22px 2px;
  transition: color var(--transition-base);
  border-radius: var(--radius-sm);
}
/* Rettelse (Sep 29 2026, chat feedback: "lad nummereringen 01-04 være en
   tydeligere del af det grafiske udtryk, men stadig elegant og afdæmpet"):
   enlarged considerably (1.05rem -> 1.7rem) so it reads as a graphic
   element in its own right, kept subdued via the same low-opacity ink and
   a lighter weight rather than a bold/loud treatment. */
.ap4std-num {
  flex: 0 0 auto;
  min-width: 46px;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 1.7rem;
  letter-spacing: -0.01em;
  color: var(--color-line-dark, var(--color-line));
  color: rgba(48, 43, 117, 0.3);
  font-variant-numeric: tabular-nums;
  transition: color var(--transition-base);
}
.ap4std-trigger[aria-expanded="true"] .ap4std-num { color: var(--color-earth); }
.ap4std-trigger-text {
  flex: 1 1 auto;
  font-family: var(--font-heading);
  font-size: 1.08rem;
  font-weight: 600;
  color: var(--color-forest-dark);
  line-height: 1.4;
  transition: color var(--transition-base);
}
.ap4std-trigger:hover .ap4std-trigger-text { color: var(--color-earth); }
.ap4std-trigger[aria-expanded="true"] .ap4std-trigger-text { color: var(--color-earth); }
.ap4std-trigger:focus-visible { outline: 2px solid var(--color-earth); outline-offset: 4px; }

.ap4std-icon { position: relative; flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--color-line); background: var(--color-cream); transition: background var(--transition-base), border-color var(--transition-base), transform var(--transition-base); }
.ap4std-icon-h, .ap4std-icon-v { position: absolute; top: 50%; left: 50%; background: var(--color-earth); transition: transform var(--transition-base); }
.ap4std-icon-h { width: 10px; height: 1.5px; transform: translate(-50%, -50%); }
.ap4std-icon-v { width: 1.5px; height: 10px; transform: translate(-50%, -50%); }
.ap4std-trigger[aria-expanded="true"] .ap4std-icon-v { transform: translate(-50%, -50%) rotate(90deg) scaleY(0); }
.ap4std-trigger:hover .ap4std-icon { border-color: var(--color-earth); }
/* Rettelse (Sep 29 2026, chat feedback: "plus/minus-ikonet rotere
   diskret"): the whole icon circle does a half turn as the vertical bar
   retracts — 180deg rather than 90deg specifically so the remaining
   horizontal bar (the "minus") lands back horizontal, not sideways, once
   the icon settles; the turn itself is still a visible discreet spin
   mid-transition. */
.ap4std-trigger[aria-expanded="true"] .ap4std-icon { transform: rotate(180deg); }

.ap4std-panel { height: 0; overflow: hidden; transition: height var(--transition-slow); }
.ap4std-panel.is-open { height: auto; }
/* Rettelse (Sep 29 2026, chat feedback: "teksten må fade blødt ind"):
   added a small translateY rise alongside the existing opacity fade, and
   slowed it slightly so it reads as a soft settle rather than a snap. */
.ap4std-panel-inner { padding: 0 2px 26px 44px; opacity: 0; transform: translateY(8px); transition: opacity 420ms ease, transform 420ms ease; }
.ap4std-panel.is-open .ap4std-panel-inner { opacity: 1; transform: translateY(0); }
.ap4std-panel-inner p { margin: 0; max-width: 56ch; color: var(--color-text-light); font-size: 0.98rem; line-height: 1.7; }
.ap4std-mobile-img { display: none; }

.ap4std-mark { margin: 28px 0 0 2px; }
.ap4std-mark img { display: block; width: auto; height: auto; max-width: 120px; object-fit: contain; }

/* Rettelse (Sep 29 2026, chat feedback: "lad det gerne række længere mod
   højre kant"): margin-right pulls the photo past the widened 1400px
   container's own right edge all the way to the actual viewport edge
   (mirrors the max()/calc() technique .pl-hero-grid uses elsewhere on the
   site), instead of stopping at the container's padding like a normal
   boxed element. Border-radius softened slightly (14px -> 10px) so it
   reads a little less like a card. */
.ap4std-media {
  position: sticky;
  top: 96px;
  aspect-ratio: 4 / 3;
  border-radius: 10px;
  overflow: hidden;
  background: var(--color-cream-dark);
  /* Pulls the photo past both the container's own 28px inner padding and
     the container's outer gutter (0 once the viewport is at or below the
     1400px container cap) so its right edge lands exactly on the viewport
     edge instead of stopping at the container's padding. */
  margin-right: calc(-28px - max(0px, (100vw - 1400px) / 2));
}
.ap4std-img {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  transition: opacity 380ms ease;
}
.ap4std-img.is-active { opacity: 1; }
/* Rettelse (Sep 29 2026, chat feedback: "billede skifte med en rolig
   crossfade eller slide"): each image now also settles from a very slight
   scale as it becomes active (and the outgoing one eases back up to that
   same slight scale), so the crossfade reads as a gentle settle/slide
   rather than a flat opacity swap. */
.ap4std-img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.045);
  transition: transform 700ms ease;
}
.ap4std-img.is-active img { transform: scale(1); }
.ap4std-media:hover .ap4std-img.is-active img { transform: scale(1.015); }

@media (prefers-reduced-motion: reduce) {
  .ap4std-panel, .ap4std-panel-inner, .ap4std-icon, .ap4std-icon-h, .ap4std-icon-v, .ap4std-trigger, .ap4std-num, .ap4std-trigger-text, .ap4std-img, .ap4std-img img { transition: none; }
}

@media (max-width: 900px) {
  .ap4std-layout { grid-template-columns: 1fr; gap: 0; margin-top: 32px; }
  .ap4std-media { display: none; }
  .ap4std-mobile-img { display: block; margin: 16px 0 4px; border-radius: 12px; overflow: hidden; aspect-ratio: 4 / 3; }
  .ap4std-mobile-img img { display: block; width: 100%; height: 100%; object-fit: cover; }
  .ap4std-panel-inner { padding-left: 2px; }
  .ap4std-trigger { padding: 20px 2px; gap: 14px; }
  .ap4std-trigger-text { font-size: 1rem; }
}

/* ================= AP-4 Rosehip — "A Genetically Verified..." editorial
   macro band (Sep 29 2026, chat feedback). Left-aligned intro (narrower
   measure, own fade-up cascade — same technique as .wc-cultivated-text on
   why-rosehips-from-chile.html) followed by a full-bleed photo band
   reusing .editorial-band-fullbleed/.with-caption. ================= */
/* Sep 2026 site-wide QA pass: .ap4std (previous section) had no padding
   override at all, so its default bottom padding (88px) stacked with this
   section's un-overridden top padding for a ~176px dead gap. Both sides
   trimmed here — same stacked-default-padding bug fixed elsewhere on the
   site (.wc-facts, .wc-panorama-section, and others). */
.ap4std { padding-bottom: 40px; }
.ap4diff { padding-top: 40px; padding-bottom: 24px; }
.ap4diff-intro { max-width: 560px; text-align: left; margin: 0 0 36px; }
.ap4diff-intro .eyebrow { margin-bottom: 14px; }
.ap4diff-intro h2 { margin: 0 0 16px; }
.ap4diff-intro p { color: var(--color-text-light); margin: 0; }
.ap4diff-intro.reveal { opacity: 1; transform: none; transition: none; }
.ap4diff-intro > .eyebrow, .ap4diff-intro > h2, .ap4diff-intro > p {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 550ms ease, transform 550ms ease;
}
.ap4diff-intro.is-visible > .eyebrow { opacity: 1; transform: none; transition-delay: 0ms; }
.ap4diff-intro.is-visible > h2 { opacity: 1; transform: none; transition-delay: 80ms; }
.ap4diff-intro.is-visible > p { opacity: 1; transform: none; transition-delay: 180ms; }

/* Extra classes (beyond .editorial-band-fullbleed.with-caption) so these
   overrides win on specificity regardless of source order. */
.editorial-band-fullbleed.ap4diff-band { height: 62vh; min-height: 460px; max-height: 640px; background: #FAF3E9; }
/* Rettelse (Sep 29, artifact comment x2): biasing the object-position
   (previous rettelse, see history) still cropped into the fruit at some
   viewport sizes — a wide, short band can't show a ~1.78-aspect photo's
   full height via object-fit:cover without cropping SOME of it, wherever
   the crop is biased. Switched to object-fit:contain instead, so the
   entire photo (top to bottom, both fruit halves complete) is always
   shown, never cropped — it no longer touches the band's own left/right
   edges at wide viewports, but the photo's own backdrop is a near-exact
   match for the section's cream background (#FAF3E9 vs the site's
   --color-cream #F5F1EA), set here on the band itself, so the letterboxed
   margin reads as calm negative space rather than a visible seam. */
.editorial-band-fullbleed.ap4diff-band img { object-position: center; }
/* The parallax wrapper carries the scroll-driven translateY (see the
   script near the end of this page); the img inside keeps its inherited
   .editorial-band-fullbleed hover-zoom untouched, so the two transforms
   live on different elements and can never overwrite one another.
   Overscan trimmed from 112%/-6% to 106%/-3% (Rettelse, same pass): with
   object-fit:contain the photo already touches the wrapper's top/bottom
   edges exactly (no inherent crop to spare), so the old, larger overscan
   would have clawed back into the fruit itself once the outer band's
   overflow:hidden trimmed it down to size. 106%/-3% still gives the
   ±10px scroll-driven shift below room to move without exposing a gap,
   while only trimming into the photo's own blank margin, never the fruit. */
.ap4diff-parallax { position: absolute; top: -3%; left: 0; width: 100%; height: 106%; }
.ap4diff-parallax img { display: block; width: 100%; height: 100%; object-fit: contain; }
.ap4diff-caption {
  position: absolute;
  left: 32px;
  bottom: 28px;
  z-index: 1;
  color: #fff;
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
@media (max-width: 760px) {
  .editorial-band-fullbleed.ap4diff-band { height: 46vh; min-height: 300px; }
  .ap4diff-caption { left: 20px; bottom: 18px; font-size: 0.72rem; }
}

/* ---------- Explore the AP-4 Story — two full-bleed visual "destination"
   cards (Sep 29 2026 redesign, chat feedback: "de to nuværende kort virker
   lidt generiske ... lav dem i stedet som to store, visuelle
   destinationer"). The image now fills the entire card; title/text/arrow
   sit in an absolutely-positioned overlay on a bottom gradient, no white
   panel, no border. Scoped entirely to .ap4explore-* so it never touches
   the shared .card / .cards-grid rules used elsewhere on the site. ---------- */
.ap4explore-section { padding-top: 40px; }
.ap4explore-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.ap4explore-card {
  position: relative;
  display: block;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: var(--radius-lg);
  text-decoration: none;
  color: inherit;
  background: var(--color-cream-dark);
}
.ap4explore-card img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 700ms ease;
}
/* A slightly stronger/taller scrim than the site's other overlay bands
   (rgba(10,9,6,0.82) vs the usual 0.5-0.74) so the title/text stay legible
   even over a bright photo like the DNA-gel image, without needing a
   per-image tweak. */
.ap4explore-card::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 64%;
  background: linear-gradient(0deg, rgba(10,9,6,0.82) 0%, rgba(10,9,6,0.24) 60%, rgba(10,9,6,0) 100%);
  pointer-events: none;
}
.ap4explore-overlay {
  position: absolute;
  left: 28px;
  right: 28px;
  bottom: 26px;
  z-index: 1;
  transition: transform 400ms ease;
}
.ap4explore-title { display: block; font-family: var(--font-heading); font-weight: 600; font-size: 1.25rem; color: #fff; letter-spacing: -0.015em; margin-bottom: 8px; text-shadow: 0 1px 6px rgba(0,0,0,0.35); }
.ap4explore-text { display: block; color: rgba(255,255,255,0.86); font-size: 0.92rem; line-height: 1.55; max-width: 34ch; margin-bottom: 14px; text-shadow: 0 1px 4px rgba(0,0,0,0.3); }
.ap4explore-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  font-size: 0.88rem;
  color: #fff;
}
.ap4explore-arrow { display: inline-block; transition: transform 280ms ease; }
.ap4explore-card:hover img,
.ap4explore-card:focus-visible img { transform: scale(1.045); }
.ap4explore-card:hover .ap4explore-overlay,
.ap4explore-card:focus-visible .ap4explore-overlay { transform: translateY(-4px); }
.ap4explore-card:hover .ap4explore-arrow,
.ap4explore-card:focus-visible .ap4explore-arrow { transform: translateX(4px); }
.ap4explore-card:focus-visible { outline: 2px solid var(--color-earth); outline-offset: 3px; }

.ap4explore-grid .ap4explore-card.reveal:nth-child(1) { transition-delay: 0ms; }
.ap4explore-grid .ap4explore-card.reveal:nth-child(2) { transition-delay: 110ms; }

@media (prefers-reduced-motion: reduce) {
  .ap4explore-card, .ap4explore-card img, .ap4explore-arrow, .ap4explore-overlay { transition: none; }
}

@media (max-width: 760px) {
  .ap4explore-grid { grid-template-columns: 1fr; gap: 20px; }
  .ap4explore-card { aspect-ratio: 4 / 3; }
  .ap4explore-overlay { left: 22px; right: 22px; bottom: 20px; }
}

/* ---------- AP-4 Product Attributes — a quiet factual summary row
   beneath the explore cards, replacing the solid-purple attribute bar.
   Scoped to .ap4attrs-* so it never touches the shared .trust-badge-strip
   rules used elsewhere on the site. ---------- */
.ap4attrs { background: var(--color-cream); }
.ap4attrs-inner { text-align: center; }
.ap4attrs-label { margin-bottom: 22px; }
.ap4attrs-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 14px 36px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.ap4attrs-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--color-text);
  white-space: nowrap;
}
.ap4attrs-check { width: 15px; height: 15px; color: var(--color-shop-orange); flex-shrink: 0; }

@media (max-width: 900px) {
  .ap4attrs-list { gap: 12px 26px; }
}

@media (max-width: 640px) {
  .ap4attrs-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    justify-items: start;
    gap: 14px 18px;
  }
  .ap4attrs-item { white-space: normal; }
}

/* ================= OUR SCIENTISTS — shared hero portrait (Sep 28 2026,
   "a warmer, more personal opening" client request) =================
   Reuses the site's .two-col-grid convention (see line ~2153) with a
   page-scoped ratio modifier, .os-hero-grid — deliberately appended here,
   at the end of the stylesheet, so its grid-template-columns declaration
   wins the cascade over .two-col-grid's own unconditional declaration of
   the same property (equal specificity, so source order decides; every
   other ratio modifier on this site, e.g. .os-approach-grid, relies on
   the same ordering). .two-col-grid's existing 800px breakpoint already
   collapses this to a single column with no extra rule needed — because
   the text markup precedes the figure in the HTML, mobile naturally
   stacks text first, photo directly beneath, exactly as asked.
   The frame's aspect-ratio is set to the source photo's own 3:2, so nothing
   is cropped out of the back-to-back composition — only gentle corner
   rounding is applied, no border or shadow. The reveal transition lives on
   the <img> (clip-path wipe), never on the observed .os-hero-photo-shared
   element itself — putting it there would silently break the reveal; see
   the .mp-usage-hero-media comment further up in this file for why. */
.os-hero-grid { grid-template-columns: 38fr 62fr; gap: 56px; }
@media (max-width: 900px) and (min-width: 801px) { .os-hero-grid { gap: 36px; } }
.os-hero-text .eyebrow { display: block; }
.os-hero-text .tagline-sub { color: var(--color-text-light); }
.os-hero-photo-shared { margin: 0; }
.os-hero-photo-shared.reveal { opacity: 1; transform: none; transition: none; }
.os-hero-photo-shared-frame {
  display: block;
  aspect-ratio: 3 / 2;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--color-cream-dark);
}
.os-hero-photo-shared-frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  clip-path: inset(0 0 0 100%);
  /* Rettelse (Sep 28, client request — "text and photo enter discretely,
     each on their own"): a short delay so the photo's wipe visibly
     follows the text's fade-in, instead of both landing at once. */
  transition: clip-path 950ms cubic-bezier(0.22, 1, 0.36, 1) 160ms;
}
.os-hero-photo-shared.reveal.is-visible .os-hero-photo-shared-frame img { clip-path: inset(0 0 0 0); }
/* Rettelse (Sep 28, client request): +28px so the caption line no longer
   sits flush against the next section's hairline, giving the hero a
   calmer, more finished bottom edge. */
.os-hero-photo-shared-caption {
  display: block;
  margin-top: 14px;
  margin-bottom: 28px;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--color-text-light);
}
.os-hero-photo-shared-caption span {
  display: block;
  margin-top: 3px;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--color-text-light);
  opacity: 0.82;
}
@media (max-width: 800px) {
  .os-hero-grid { grid-template-columns: 1fr; gap: 28px; margin-top: 4px; }
  .os-hero-photo-shared-frame { aspect-ratio: 4 / 3; }
}
@media (prefers-reduced-motion: reduce) {
  .os-hero-photo-shared-frame img { transition: none; }
}

/* ---------- Our Family Story — scroll-timeline redesign (Sep 29 2026) ----------
   Adds to, rather than replaces, the original .ofs-* block above (the old
   .ofs-gen-strip / .ofs-nextgen-* / .ofs-placeholder-photo / .ofs-year-marker
   rules are no longer referenced by our-family-story.html's markup but are
   left in place as page-scoped dead code, per this site's standing
   convention — see suko-nordic-australia.html's .au-path-grid comment for
   the same pattern). */

/* Generic scroll-parallax frame. The frame keeps the img slightly oversized
   (9% headroom top/bottom) so the small JS-driven translateY never exposes
   empty space at the edges; reused by every data-parallax figure on this
   page (hero, chapter 03 banner, plantation-relationships photo). */
.ofs-parallax-frame { position: relative; display: block; width: 100%; height: 100%; overflow: hidden; }
.ofs-parallax-frame img {
  position: absolute; left: 0; right: 0; top: -9%; width: 100%; height: 118%;
  object-fit: cover; object-position: center 30%; will-change: transform;
}
/* .ofs-hero-photo-cinematic — unused page-scoped dead code, left in place
   per this site's standing convention (see the .ofs-gen-strip note above).
   Reverted Sep 29 2026 (artifact comment "billede forkert beskåret"): this
   21/9 override re-cropped the hero group photo, exactly what .ofs-hero-
   photo's own base rule (further up this file) was written to avoid. The
   class no longer appears in our-family-story.html's markup. */
.ofs-hero-photo.ofs-hero-photo-cinematic { aspect-ratio: 21 / 9; max-height: 560px; }
@media (max-width: 700px) {
  .ofs-hero-photo.ofs-hero-photo-cinematic { aspect-ratio: 4 / 3; max-height: none; }
}

/* Archival photo mask/clip reveal. Applied via .ofs-mask-reveal alongside
   .reveal-fade-only (never .reveal): .reveal-fade-only only ever touches
   opacity, never transform, so it can't collide with a figure's own
   permanent transform, should one ever be added (e.g. a slight rotate() for
   a scrapbook-style photo elsewhere on the site). The
   observed element itself (.ofs-mask-reveal) is NEVER given a clip-path
   directly — a zero-visible-area clip-path on an IntersectionObserver-
   observed element can prevent it from ever registering as intersecting
   (the same issue already fixed once on our-scientists.html's
   .os-hero-photo-shared-frame) — so the clip-path transition lives on the
   child .ofs-mask-frame img instead, keyed off the parent's .is-visible
   class via a descendant selector. */
.ofs-mask-frame { display: block; width: 100%; height: 100%; }
.ofs-mask-frame img {
  clip-path: inset(0 0 100% 0);
  transition: clip-path 1000ms cubic-bezier(0.22, 1, 0.36, 1);
}
.ofs-mask-reveal.is-visible .ofs-mask-frame img { clip-path: inset(0 0 0% 0); }
@media (prefers-reduced-motion: reduce) {
  .ofs-mask-frame img { transition: none; clip-path: none; }
}

/* Chapter 01 — Our Grandfather: two archival photos side by side as one
   deliberate, considered pair (Sep 29 2026 redesign — replaces a single
   tall (3/4) solo portrait plus a rotated, overlapping two-photo cluster
   beneath it, which read as too dominant/collage-like and left visible
   empty space under the shorter text column beside it; also drops the
   third archival photo, opapa-travel-archival.jpg, per instruction — with
   only two photos left, the portrait and the granddaughter photo carry the
   chapter on their own). Both share the same portrait aspect ratio so they
   align top and bottom; the portrait keeps more width, a larger radius and
   a heavier shadow to stay the visual anchor, the second photo a touch
   smaller and quieter. */
.two-col-grid.ofs-ch1-grid { grid-template-columns: 0.88fr 1.12fr; gap: 56px; align-items: start; }
@media (max-width: 800px) { .two-col-grid.ofs-ch1-grid { grid-template-columns: 1fr; gap: 32px; } }
.ofs-ch1-media { position: relative; }
.ofs-ch1-pair { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 20px; align-items: start; }
/* aspect-ratio + overflow:hidden live on .ofs-mask-frame (the inner span),
   never on the <figure> itself: a figure whose OWN box is aspect-ratio- or
   grid/flex-stretch-sized to a definite height, combined with
   overflow:hidden, clips a trailing <figcaption> the moment the figure's
   content needs more height than that definite size. Keeping the figure a
   plain, auto-height block (radius/shadow/background moved onto the frame,
   which gets its own explicit height:auto) lets a normal trailing caption
   sit below it, and lets align-items:start on .ofs-ch1-pair size each
   figure to its own content instead of stretching it to its sibling's
   height. */
.ofs-ch1-portrait, .ofs-ch1-archive { margin: 0; }
.ofs-ch1-portrait .ofs-mask-frame {
  border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-md);
  aspect-ratio: 4 / 5; background: var(--color-cream-dark); height: auto;
}
.ofs-ch1-portrait .ofs-mask-frame img { width: 100%; height: 100%; object-fit: cover; object-position: center 22%; }
.ofs-ch1-portrait-caption { display: block; margin-top: 10px; font-size: 0.82rem; color: var(--color-text-light); }
.ofs-ch1-archive .ofs-mask-frame {
  border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-sm);
  background: var(--color-cream-dark); aspect-ratio: 4 / 5; height: auto;
}
.ofs-ch1-archive .ofs-mask-frame img { width: 100%; height: 100%; object-fit: cover; object-position: center 25%; }
.ofs-ch1-archive-caption { display: block; margin-top: 10px; font-size: 0.74rem; color: var(--color-text-light); line-height: 1.4; }
@media (max-width: 700px) {
  .ofs-ch1-pair { gap: 14px; }
}

/* Chapter 02 — Monica & Peter: the once-placeholder photo, now real, with the
   "2004" year integrated into its own caption rather than as a separate
   isolated element. */
.ofs-ch2-photo { position: relative; margin: 0; }
.ofs-ch2-photo .ofs-mask-frame {
  border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-md);
  aspect-ratio: 1 / 1; background: var(--color-cream-dark); height: auto;
}
/* Rettelse 22 (Sep 29 2026): replacement photo is a wide field shot with
   Monica and Peter left-of-centre; 44% keeps both fully inside the square
   crop instead of the default centred crop clipping the left edge. */
.ofs-ch2-photo .ofs-mask-frame img { width: 100%; height: 100%; object-fit: cover; object-position: 44% center; }
.ofs-ch2-photo-caption { margin-top: 12px; font-size: 0.82rem; color: var(--color-text-light); }
.ofs-ch2-photo-year { display: inline-block; font-family: var(--font-heading); font-weight: 700; color: var(--color-shop-orange); margin-right: 8px; }

/* Chapter 03 — opening banner (folded in from the former standalone
   "Next Generation" transition section). Rettelse (Sep 29 2026, chat:
   "det store billede af Isabel og Amanda... mangler en titel, som binder
   billedet tydeligere sammen med overgangen til tredje generation"): the
   note above used to say this photo carried no text overlay, since the
   chapter's own h2 followed right after it — that h2 is still there, but
   the photo now also carries its own short transition line plus a small
   caption, in white over a very soft gradient. Rettelse item 24 (Sep 29
   2026, artifact comment: "teksten på det her billede skal implementeres
   mere i toppen og ikke i bunden ellers konkurrerer det for meget med
   teksten under") moved that gradient + overlay from the bottom of the
   photo to the top: the section's own "03 · Third Generation" marker and
   h2 sit directly under this photo, so bottom-anchored overlay text was
   competing with them for attention right at the seam. Anchoring the
   overlay at the top instead gives the eye a top-to-bottom read (overlay
   title, then photo, then the section's own heading) instead of two
   headings stacked back to back. This deliberately doesn't reuse the
   older, differently-worded .ofs-nextgen-overlay rules further up this
   file (dead code from the original standalone section, kept in place
   per the site's own convention) — new copy gets its own classes rather
   than repurposing an old one. */
.ofs-ch3-photo { position: relative; margin: 0; aspect-ratio: 12 / 5; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-md); background: var(--color-cream-dark); }
.ofs-ch3-photo::after {
  content: '';
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 42%;
  background: linear-gradient(180deg, rgba(10,9,6,0.56) 0%, rgba(10,9,6,0.22) 55%, rgba(10,9,6,0) 100%);
  pointer-events: none;
}
.ofs-ch3-photo-overlay { position: absolute; z-index: 1; left: 5%; right: 5%; top: 6%; max-width: 460px; color: #fff; margin: 0; }
.ofs-ch3-photo-eyebrow { display: block; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.88); margin: 0 0 10px; }
.ofs-ch3-photo-heading { color: #fff; margin: 0; font-size: clamp(1.4rem, 2.6vw, 2rem); }
.ofs-ch3-photo-caption { display: block; margin-top: 10px; font-size: 0.78rem; color: rgba(255,255,255,0.78); }
@media (max-width: 900px) {
  .ofs-ch3-photo { aspect-ratio: 4 / 3; }
  .ofs-ch3-photo-overlay { left: 22px; right: 22px; top: 18px; max-width: none; }
}

/* Daughters grid: subtle hover zoom (max 1.02, per instruction) + staggered
   reveal (transition-delay set inline per figure in the markup). */
@media (hover: hover) and (pointer: fine) {
  .daughters-grid .daughter-photo img { transition: transform 500ms ease; }
  .daughters-grid figure:hover .daughter-photo img { transform: scale(1.02); }
}
@media (prefers-reduced-motion: reduce) { .daughters-grid .daughter-photo img { transition: none; } }

/* Interactive chapter timeline nav (replaces .ofs-gen-strip) */
.ofs-timeline { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 36px 0 4px; padding-top: 26px; }
.ofs-timeline-track { position: absolute; top: 0; left: 6%; right: 6%; height: 2px; background: var(--color-line); border-radius: 2px; overflow: hidden; }
.ofs-timeline-fill {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  background: linear-gradient(to right, var(--color-earth), var(--color-shop-orange));
  transform: scaleX(0); transform-origin: left center; transition: transform 120ms linear;
}
.ofs-timeline-step { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; text-decoration: none; }
.ofs-timeline-num {
  width: 34px; height: 34px; border-radius: 50%; margin-bottom: 6px;
  border: 1.5px solid var(--color-earth); color: var(--color-earth); background: var(--color-cream);
  font-family: var(--font-heading); font-weight: 700; font-size: 0.82rem;
  display: flex; align-items: center; justify-content: center;
  transition: background var(--transition-base), color var(--transition-base), border-color var(--transition-base), transform var(--transition-base);
}
.ofs-timeline-label { font-size: 0.74rem; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; color: var(--color-text-light); }
.ofs-timeline-name { font-family: var(--font-heading); font-weight: 600; font-size: 0.95rem; color: var(--color-forest-dark); }
.ofs-timeline-step:hover .ofs-timeline-num { border-color: var(--color-shop-orange); }
.ofs-timeline-step.is-active .ofs-timeline-num { background: var(--color-earth); color: #fff; border-color: var(--color-earth); transform: scale(1.08); }
@media (prefers-reduced-motion: reduce) {
  .ofs-timeline-num { transition: none; }
  .ofs-timeline-fill { transition: none; }
}
@media (max-width: 700px) {
  .ofs-timeline { display: flex; flex-direction: column; gap: 22px; padding-top: 0; padding-left: 34px; margin: 32px 0 4px; }
  .ofs-timeline-track { top: 6px; bottom: 6px; left: 9px; right: auto; width: 2px; height: auto; }
  .ofs-timeline-fill { width: 100%; height: 100%; transform: scaleY(0); transform-origin: top center; }
  .ofs-timeline-step { flex-direction: row; align-items: center; text-align: left; gap: 14px; }
  .ofs-timeline-num { margin-bottom: 0; flex: 0 0 auto; }
}

/* Anchor targets for the timeline's click-to-jump links, offset for the
   sticky header (~89px tall) plus a small buffer. */
#chapter-01, #chapter-02, #chapter-03, #chapter-04 { scroll-margin-top: 110px; }
/* Sep 2026 QA pass: none of the four chapters overrode the default 88px
   section padding, so every chapter boundary (and the final chapter into
   the closing .cta) stacked to a ~176px dead gap. */
#chapter-01, #chapter-02, #chapter-03 { padding-bottom: 40px; }
#chapter-02, #chapter-03, #chapter-04 { padding-top: 40px; }
#chapter-04 { padding-bottom: 40px; }

/* ==================================================================
   WHY ROSEHIPS FROM CHILE — four-chapter restructure (Sep 29 2026,
   chat request). New/modified rules only; the original .wc-lede-grid,
   .wc-region-lede, .wc-climate-lede (and its ::after divider line),
   .wc-season-split/.wc-season-media-duo and .wc-panorama-below rules
   above are left in place as page-scoped dead code (site convention)
   since the markup that used them no longer exists on this page.
   ================================================================== */

/* ---------- Chapter 1 intro: replaces .wc-lede-grid/.wc-climate-lede
   (and its stray ::after divider line into a mostly-empty right column)
   with a single block sized to its own measure. ---------- */
.wc-chapter-intro { max-width: 640px; }
.wc-chapter-intro h2 { margin: 10px 0 0; }
.wc-chapter-intro p { color: var(--color-text-light); margin: 18px 0 0; line-height: 1.65; max-width: 62ch; }
.wc-chapter-intro.reveal.is-visible { }

/* ---------- Chapter 1 photo pair: different aspect ratios per side (not
   matching cards), each bleeding toward its own outer edge, offset
   vertically for an editorial rhythm, entering from its own side on
   scroll. fr units (not percentages) on the grid so the gap never adds
   real overflow, per this site's own established grid convention. ---------- */
.wc-climate-days-grid-v2 {
  grid-template-columns: 1fr 1fr;
  align-items: start;
  margin-top: 24px;
}
.wc-climate-days-grid-v2.reveal { opacity: 1; transform: none; transition: none; }
.wc-climate-days-grid-v2 .wc-climate-day-col-nights { margin-top: 64px; }
.wc-climate-days-grid-v2 .wc-climate-day-col-days .wc-climate-day-media {
  aspect-ratio: 3 / 4;
  margin-left: calc(-28px - max(0px, (100vw - 1240px) / 2));
}
.wc-climate-days-grid-v2 .wc-climate-day-col-nights .wc-climate-day-media {
  aspect-ratio: 5 / 4;
  margin-right: calc(-28px - max(0px, (100vw - 1240px) / 2));
}
.wc-climate-days-grid-v2 .wc-climate-day-col-days .wc-climate-day-media,
.wc-climate-days-grid-v2 .wc-climate-day-col-nights .wc-climate-day-media {
  opacity: 0;
  transition: opacity 900ms ease, transform 900ms ease;
}
.wc-climate-days-grid-v2 .wc-climate-day-col-days .wc-climate-day-media { transform: translateX(-26px); }
.wc-climate-days-grid-v2 .wc-climate-day-col-nights .wc-climate-day-media { transform: translateX(26px); }
.wc-climate-days-grid-v2.is-visible .wc-climate-day-col-days .wc-climate-day-media,
.wc-climate-days-grid-v2.is-visible .wc-climate-day-col-nights .wc-climate-day-media {
  opacity: 1;
  transform: translateX(0);
}
@media (max-width: 900px) {
  .wc-climate-days-grid-v2 .wc-climate-day-col-nights { margin-top: 0; }
}
@media (max-width: 600px) {
  .wc-climate-days-grid-v2 .wc-climate-day-col-days .wc-climate-day-media,
  .wc-climate-days-grid-v2 .wc-climate-day-col-nights .wc-climate-day-media {
    margin-left: 0;
    margin-right: 0;
    aspect-ratio: 4 / 3;
  }
}
@media (prefers-reduced-motion: reduce) {
  .wc-climate-days-grid-v2 .wc-climate-day-col-days .wc-climate-day-media,
  .wc-climate-days-grid-v2 .wc-climate-day-col-nights .wc-climate-day-media {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ---------- Chapter 2 opener: the sunrise photo as a full-bleed band
   with its own overlay copy, reusing .editorial-band-fullbleed.with-
   caption (same technique as the AP-4 Rosehip macro band and the
   homepage family feature). A separate inner span carries the scroll
   parallax so it never fights the shared hover-zoom transform on the
   img itself (same separation used on ap-4-rosehip.html). ---------- */
.wc-region-section { padding: 0; }
/* Rettelse (Sep 29 2026, chat request: "afstandene ... være ens"): this is a
   <figure>, so without an explicit reset it kept the browser's default
   figure margin (~1em top/bottom), which collapsed with the mountain band's
   4px margin-top below into a much wider ~17px gap than the narrow 4px gap
   under the mountain band (where .wc-divider already resets its own margin
   to 0). Reset to margin:0 here too so both gaps collapse to the same 4px. */
.wc-region-open { height: 74vh; min-height: 460px; max-height: 720px; margin: 0; }
.wc-region-open-parallax { display: block; position: absolute; top: -6%; left: 0; width: 100%; height: 112%; }
.wc-region-open-parallax img { width: 100%; height: 100%; object-fit: cover; display: block; object-position: center 40%; }
@media (prefers-reduced-motion: reduce) {
  .wc-region-open-parallax { top: 0; height: 100%; }
}
.wc-region-open-overlay {
  position: absolute;
  z-index: 2;
  left: 64px;
  right: 64px;
  bottom: 56px;
  max-width: 560px;
  color: #fff;
  margin: 0;
}
.wc-region-open-overlay .eyebrow { display: block; color: rgba(255,255,255,0.88); margin-bottom: 14px; }
.wc-region-open-overlay h2 { color: #fff; margin: 0 0 16px; font-size: clamp(1.7rem, 3.1vw, 2.5rem); line-height: 1.16; }
.wc-region-open-overlay p { color: rgba(255,255,255,0.86); margin: 0; max-width: 46ch; line-height: 1.6; }
@media (max-width: 760px) {
  .wc-region-open { height: 62vh; min-height: 380px; }
  .wc-region-open-overlay { left: 24px; right: 24px; bottom: 28px; }
}

/* ---------- Chapter 2 mountain band: shorter than the photo's own wide
   native ratio (so object-fit:cover actually crops top/bottom instead of
   barely cropping at all), full-bleed both edges, minimal gap either
   side of the sunrise band above and the waterfall below so the three
   read as one continuous passage. ---------- */
.wc-region-landscape2 {
  position: relative;
  width: 100vw;
  margin: 4px calc(50% - 50vw);
  /* A fixed aspect-ratio (rather than a viewport-height figure) keeps the
     crop ratio consistent regardless of viewport width: at the photo's own
     native ratio (~2.7:1) object-fit:cover barely crops it at all, so this
     band is deliberately shallower to push a real vertical crop that
     favors the mountains over the lake below the treeline. Rettelse
     (Sep 29, artifact comment: "mere af bjergene"): tightened further, from
     6.7:1 to 10:1 — sounds like MORE cropping, but combined with pushing
     object-position further toward the photo's own top (see the img rule
     below), the visible band now lands almost entirely on the mountain
     range itself (peaks down to the treeline), instead of splitting
     evenly between the mountain and its own darker, forested lower
     slopes, plus a hint of lake — which is what was reading as "less
     mountain" before.

     Rettelse (Sep 29, chat request: "mere af billedet vist ... bredere ...
     både bjergene og skoven"): that 10:1 crop went too far — barely
     anything but mountain was left. Eased back out to 3.5:1 (between the
     old 6.7:1 and the photo's own ~2.7:1 native ratio) and min/max-height
     raised to match, so the band is meaningfully taller again: the full
     mountain range (peaks to treeline) still opens the frame with nothing
     cropped off the top, the lake now shows beneath it, and a real band of
     the forested foothills is visible at the bottom instead of being cut
     off entirely.

     Rettelse (Sep 29, chat request: "hele bjerget, toppen må ikke blive
     beskåret"): a pixel check of the source photo found the tallest snow
     peak starts around row 14 of 619 — well above where the previous
     centered object-position (35%) opened its window, so the very tip was
     in fact still being clipped. Switched the img's object-position to
     top-aligned (0%) below, which guarantees the window always starts at
     the photo's own top edge no matter how the aspect-ratio/min/max-height
     resolve at a given viewport width — the peak can never be cropped
     again. Aspect-ratio nudged from 3.5:1 to 3.2:1 and max-height raised
     to compensate, so the lake and a slice of forest are still visible
     under the now top-anchored mountain, roughly matching how much of each
     showed before this change. */
  aspect-ratio: 3.2 / 1;
  min-height: 300px;
  max-height: 620px;
  overflow: hidden;
}
.wc-region-landscape2 img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 760px) {
  /* At mobile widths the 3.5:1 aspect-ratio now renders unclamped (well
     above this floor), so the same generous mountain+lake+forest crop
     holds here too rather than falling back to a slimmer ribbon. */
  .wc-region-landscape2 { min-height: 90px; max-height: 220px; }
}

/* ---------- Chapter 2 waterfall: was a background-on-the-text-box
   gradient with a fixed-height rectangle (a visible top edge to the
   tint); now a radial scrim across the whole photo, anchored bottom-
   left, same technique as .wc-panorama-scrim further down this page, so
   there is no rectangular edge anywhere and the darkening reads as a
   soft, localised fade rather than a box. .wc-divider gets a small top
   margin only, so it sits close to the mountain band above it. ---------- */
.wc-divider { margin-top: 4px; }
.wc-divider-scrim { position: absolute; inset: 0; z-index: 1; background: radial-gradient(110% 85% at 0% 100%, rgba(10,9,6,0.6) 0%, rgba(10,9,6,0.32) 34%, rgba(10,9,6,0) 62%); pointer-events: none; }
.wc-divider-overlay { position: absolute; left: 0; right: auto; bottom: 0; z-index: 2; margin: 0; max-width: 420px; padding: 0 32px 40px; background: none; }
.wc-divider-overlay .eyebrow { display: block; color: rgba(255,255,255,0.9); margin-bottom: 10px; }
.wc-divider-overlay h3 { font-family: var(--font-heading); font-weight: 600; color: #fff; margin: 0 0 10px; font-size: 1.3rem; line-height: 1.26; letter-spacing: -0.01em; }
.wc-divider-overlay p { color: rgba(255,255,255,0.86); font-size: 0.9rem; line-height: 1.55; margin: 0; max-width: 34ch; }

/* ---------- Chapter 3: The Ripening Season, unframed photo pair +
   free-standing text column (replaces .wc-season-split's rounded card
   and mechanically stacked photos). ---------- */
.wc-season-section { padding: 72px 0 44px; }
.wc-season-split-v2 { display: grid; grid-template-columns: 1.05fr 1fr; gap: 64px; align-items: center; }
.wc-season-media-v2 { position: relative; }
.wc-season-media-main { margin: 0; aspect-ratio: 4 / 5; border-radius: var(--radius-md); overflow: hidden; background: var(--color-cream-dark); }
.wc-season-media-main img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wc-season-media-detail {
  position: absolute;
  right: -8%;
  bottom: -9%;
  width: 44%;
  aspect-ratio: 1 / 1;
  margin: 0;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 5px solid var(--color-cream);
  box-shadow: 0 18px 40px rgba(20,19,17,0.22);
}
.wc-season-media-detail img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Very discreet scroll-spy pulse (JS toggles this class on/off as the
   active point changes) — a barely-there scale, never a hard zoom. */
.wc-season-media-v2.wc-season-pulse { animation: wcSeasonPulse 900ms ease; }
@keyframes wcSeasonPulse {
  0% { transform: scale(1); }
  45% { transform: scale(1.012); }
  100% { transform: scale(1); }
}
.wc-season-text-v2 .eyebrow { color: var(--color-earth); }
.wc-season-text-v2 h2 { margin: 8px 0 0; }
.wc-season-points-v2 { list-style: none; margin: 28px 0 0; padding: 0; border-top: 1px solid var(--color-line); }
.wc-season-point { display: flex; gap: 16px; padding: 22px 0; border-bottom: 1px solid var(--color-line); }
.wc-season-point .wc-season-num { font-family: var(--font-heading); font-weight: 700; font-size: 0.85rem; color: var(--color-text-light); letter-spacing: 0.06em; flex-shrink: 0; padding-top: 2px; transition: color 320ms ease; }
.wc-season-point.is-active .wc-season-num { color: var(--color-earth); }
.wc-season-point h4 { font-family: var(--font-heading); font-weight: 600; font-size: 1rem; color: var(--color-forest-dark); margin: 0 0 6px; }
.wc-season-point p { color: var(--color-text-light); font-size: 0.92rem; margin: 0; line-height: 1.55; }
@media (max-width: 900px) {
  .wc-season-split-v2 { grid-template-columns: 1fr; gap: 40px; }
  .wc-season-media-detail { right: -4%; bottom: -6%; width: 46%; }
}
@media (max-width: 600px) {
  .wc-season-section { padding: 48px 0; }
  .wc-season-media-detail { border-width: 4px; }
}
@media (prefers-reduced-motion: reduce) {
  .wc-season-media-v2.wc-season-pulse { animation: none; }
  .wc-season-point .wc-season-num { transition: none; }
}

/* ---------- Chapter 4: Cultivated, Not Wild-Harvested — the plantation-
   rows photo now bleeds to the left viewport edge with square corners,
   instead of a rounded card at a fixed column width; text column kept to
   a readable measure with extra side air. ---------- */
/* Rettelse (Sep 29 2026, artifact comment: "lade det her billede fylde
   mere? ud til kanterne i boksen"), then corrected (chat follow-up: "nej
   fylde helt ud til kanterne i boksen som den er i") — the ask was to fill
   the EXISTING box completely, not to resize the column split. Reverted
   the grid ratio/gap/min-height to their original values; see further down
   for what was actually keeping the image from reaching every edge of its
   box. */
.wc-cultivated-grid-v2 { grid-template-columns: 1.3fr 1fr; gap: 56px; align-items: stretch; }
.wc-cultivated-grid-v2 .wc-cultivated-text { padding-right: 12px; }
.wc-cultivated-grid-v2 .wc-cultivated-text p { max-width: 46ch; }
/* Rettelse (Sep 29 2026, chat follow-up: "lidt blødere kanter og billedet
   popper frem fra siden, venstre mod højre"): the left edge still bleeds
   flush to the viewport edge, so it keeps square corners there (rounding
   that edge would look like a floating gap at the screen border); the
   right side — where the photo meets the text column — now gets soft
   corners, and a soft shadow cast rightward gives the photo a lifted,
   "popping off the page" feel reading left-to-right. */
.wc-cultivated-media-bleed {
  border-radius: 0 28px 28px 0;
  min-height: 520px;
  margin-left: calc(-28px - max(0px, (100vw - 1400px) / 2));
  box-shadow: 36px 0 56px -18px rgba(20, 15, 8, 0.32);
}
@media (max-width: 900px) {
  .wc-cultivated-grid-v2 { grid-template-columns: 1fr; }
  .wc-cultivated-media-bleed { margin-left: 0; min-height: 0; aspect-ratio: 4 / 3; border-radius: 12px; box-shadow: 0 18px 32px -16px rgba(20, 15, 8, 0.28); }
}

/* ---------- Closing panorama: taller, and no longer fades in as one
   block with its image (image + scrim stay visible immediately; only
   the eyebrow/heading cascade in). The repeated closing paragraph that
   used to sit in a .container below this figure has been removed from
   the markup entirely, so no gap-closing rule is needed for it. ---------- */
.wc-panorama { height: 78vh; min-height: 520px; max-height: 820px; }
.wc-panorama.reveal-fade-only { opacity: 1; transition: none; }
.wc-panorama-text .eyebrow, .wc-panorama-text h2 {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 700ms ease, transform 700ms ease;
}
.wc-panorama-text h2 { transition-delay: 110ms; }
.wc-panorama.is-visible .wc-panorama-text .eyebrow,
.wc-panorama.is-visible .wc-panorama-text h2 {
  opacity: 1;
  transform: none;
}
@media (max-width: 760px) {
  .wc-panorama { height: 56vh; min-height: 360px; }
}
@media (prefers-reduced-motion: reduce) {
  .wc-panorama-text .eyebrow, .wc-panorama-text h2 { transition: none; }
}

/* ---------- Closing "From Place to Process" band: now a full-bleed
   colour band (was a rounded card sitting inside the page container),
   content still constrained to the normal container width. ---------- */
.wc-close-section-v2 { padding-top: 0; padding-bottom: 0; }
.wc-close-fullbleed { width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); background: var(--color-earth); }
.wc-close-panel-v2 { padding: 72px 0; }
@media (max-width: 900px) {
  .wc-close-panel-v2 { padding: 56px 0; }
}
@media (max-width: 600px) {
  .wc-close-panel-v2 { padding: 44px 0; }
}