/* Good Culture concept, design system
   Core UI: yellow, ink, cream. Secondary palette reserved for category colour-coding. */

@font-face { font-family: "Engram"; src: url("/gc/fonts/engram-regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Engram"; src: url("/gc/fonts/engram-medium.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Engram"; src: url("/gc/fonts/engram-bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Engram"; src: url("/gc/fonts/engram-extrabold.woff2") format("woff2"); font-weight: 800; font-display: swap; }

:root {
  /* core */
  --yellow: #fbe405;
  --ink: #0b0b0b;
  --cream: #f4f2ec;
  --white: #ffffff;
  --muted: #4a4a4a;
  --line: #0b0b0b;
  --line-soft: #dcd8cc;

  /* secondary palette (Canva brand kit) */
  --orange: #ed8e01;
  --sky: #00b2e7;
  --teal: #13af99;
  --pink: #d46a9f;
  --lime: #b2cb08;
  --purple: #4b2177;
  --petrol: #134151;
  --rust: #bb4b05;
  --navy: #253081;
  --forest: #004429;

  --font: "Engram", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  --wrap: 1200px;
  --gutter: clamp(16px, 4vw, 40px);
  --radius: 20px;
  --radius-sm: 12px;
  --section: clamp(64px, 9vw, 120px);

  --h1: clamp(2.5rem, 6vw, 4.5rem);
  --h2: clamp(1.9rem, 3.8vw, 2.9rem);
  --h3: clamp(1.25rem, 2vw, 1.55rem);
  --lead: clamp(1.05rem, 1.4vw, 1.2rem);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; font-family: var(--font); font-weight: 400; color: var(--ink);
  background: var(--white); font-size: 1rem; line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3, h4 { margin: 0; line-height: 1.05; letter-spacing: -0.02em; }
h1 { font-size: var(--h1); font-weight: 800; }
h2 { font-size: var(--h2); font-weight: 700; }
h3 { font-size: var(--h3); font-weight: 700; line-height: 1.2; letter-spacing: -0.01em; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
ul { margin: 0; padding: 0; }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; border-radius: 4px; }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.section { padding: var(--section) 0; }
.section--cream { background: var(--cream); }
.section--ink { background: var(--ink); color: var(--white); }
.section--tight { padding: calc(var(--section) * .6) 0; }
.section:not(.section--cream):not(.section--ink) + .section:not(.section--cream):not(.section--ink) { padding-top: 0; }
.hero + .section:not(.section--cream):not(.section--ink) { padding-top: calc(var(--section) * .5); }
.section--cream + .section--cream { padding-top: 0; }
.measure { max-width: 680px; }
.lead { font-size: var(--lead); line-height: 1.55; }
.muted { color: var(--muted); }
.section--ink .muted { color: #bdbdbd; }
.stack > * + * { margin-top: 1.25rem; }
.h-block { margin-bottom: clamp(32px, 4vw, 56px); }
.h-block .lead { margin-top: 1rem; }
.center { text-align: center; }
.center .measure { margin-left: auto; margin-right: auto; }

/* Eyebrow label */
.eyebrow { font-family: var(--mono); font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 500; display: inline-block; margin-bottom: 14px; }
.tag { font-family: var(--mono); font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; background: var(--yellow); padding: 4px 10px; border-radius: 99px; display: inline-block; font-weight: 500; }

/* Links and buttons */
.btn { display: inline-flex; align-items: center; gap: 10px; font: 700 1rem/1 var(--font); padding: 16px 26px; border-radius: 99px; text-decoration: none; border: 2px solid var(--ink); background: var(--yellow); color: var(--ink); cursor: pointer; transition: transform .15s ease, background .15s ease; }
.btn:hover { transform: translateY(-2px); }
.btn--ink { background: var(--ink); color: var(--white); }
.btn--ghost { background: transparent; }
.section--ink .btn--ghost { border-color: var(--white); color: var(--white); }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.link { font-weight: 700; text-decoration: none; background-image: linear-gradient(var(--yellow), var(--yellow)); background-size: 100% 3px; background-position: 0 100%; background-repeat: no-repeat; padding-bottom: 3px; display: inline-flex; align-items: center; gap: 8px; }
.link:hover { background-size: 100% 100%; }
.section--ink .link:hover { color: var(--ink); }
.arrow { width: 16px; height: 16px; flex: none; }
.hl { background: linear-gradient(transparent 58%, var(--yellow) 58%); font-weight: 700; }

/* Needs-input marker: visible on purpose so reviewers see gaps */
.todo { display: inline-block; font-family: var(--mono); font-size: .72rem; letter-spacing: .06em; border: 1.5px dashed var(--ink); background: #fffbd1; color: var(--ink); padding: 6px 10px; border-radius: 8px; line-height: 1.4; }
.section--ink .todo { background: #2a2a2a; color: var(--yellow); border-color: var(--yellow); }

/* ---------- Header / nav ---------- */
.site-header { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,.96); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line-soft); }
.nav { display: flex; align-items: center; justify-content: space-between; height: 76px; gap: 24px; }
.logo { display: flex; align-items: center; text-decoration: none; }
.logo svg { height: 44px; width: auto; }
.nav-list { display: flex; align-items: center; gap: 4px; list-style: none; }
.nav-item { position: relative; }
.nav-link { display: flex; align-items: center; gap: 6px; font: 500 .95rem/1 var(--font); padding: 12px 12px; text-decoration: none; background: none; border: 0; color: var(--ink); cursor: pointer; border-radius: 99px; }
.nav-link:hover, .nav-item:focus-within > .nav-link { background: var(--cream); }
.nav-link[aria-current="page"] { box-shadow: inset 0 -3px 0 var(--yellow); border-radius: 0; }
.chev { width: 10px; height: 10px; transition: transform .2s; }
.dropdown { position: absolute; top: calc(100% + 6px); left: -8px; min-width: 300px; background: var(--white); border: 1.5px solid var(--ink); border-radius: var(--radius-sm); padding: 10px; opacity: 0; visibility: hidden; transform: translateY(6px); transition: .18s ease; list-style: none; }
.nav-split { display: flex; align-items: center; }
.nav-split .nav-caret { padding: 12px 8px; margin-left: -6px; }
.nav-split > .nav-link:hover, .nav-item:focus-within > .nav-split > .nav-link:first-child { background: var(--cream); }
.nav-item:hover > .dropdown, .nav-item:focus-within > .dropdown, .nav-item.open > .dropdown { opacity: 1; visibility: visible; transform: none; }
.nav-item:hover .chev, .nav-item.open .chev { transform: rotate(180deg); }
.dropdown a { display: block; padding: 10px 12px; border-radius: 8px; text-decoration: none; font-size: .95rem; line-height: 1.3; }
.dropdown a small { display: block; color: var(--muted); font-size: .8rem; margin-top: 2px; }
.dropdown a:hover { background: var(--cream); }
.dropdown .dd-label { font-family: var(--mono); font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); padding: 10px 12px 4px; grid-column: 1 / -1; }
.nav-cta { padding: 12px 20px; font-size: .92rem; }
.nav-toggle { display: none; background: none; border: 0; padding: 10px; cursor: pointer; }
.nav-toggle span { display: block; width: 24px; height: 2px; background: var(--ink); margin: 5px 0; transition: .2s; }

@media (max-width: 1020px) {
  .nav-toggle { display: block; }
  .nav-panel { position: fixed; inset: 76px 0 0 0; background: var(--white); padding: 12px var(--gutter) 40px; overflow-y: auto; display: none; }
  .nav-open .nav-panel { display: block; }
  .nav-list { flex-direction: column; align-items: stretch; gap: 0; }
  .nav-item { border-bottom: 1px solid var(--line-soft); }
  .nav-link { width: 100%; justify-content: space-between; padding: 18px 0; font-size: 1.1rem; border-radius: 0; }
  .nav-link:hover { background: none; }
  .nav-split .nav-link:first-child { flex: 1; }
  .nav-split .nav-caret { width: auto; margin: 0; padding: 18px 4px 18px 20px; }
  .dropdown { position: static; opacity: 1; visibility: visible; transform: none; border: 0; padding: 0 0 12px; min-width: 0; display: none; grid-template-columns: 1fr; }
  .nav-item.open > .dropdown { display: block; }
  .nav-item:hover > .dropdown { display: none; }
  .nav-item.open:hover > .dropdown { display: block; }
  .nav-cta-wrap { padding-top: 24px; }
  .nav-cta { width: 100%; justify-content: center; }
  .nav-open .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
  .nav-open .nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
}
@media (min-width: 1021px) { .nav-panel { display: flex; align-items: center; gap: 16px; } }

/* ---------- Hero ---------- */
.hero { padding: clamp(48px, 7vw, 96px) 0 clamp(48px, 6vw, 80px); overflow: hidden; }
.hero-grid { display: grid; grid-template-columns: 1.3fr .7fr; gap: clamp(32px, 5vw, 64px); align-items: center; }
.hero h1 { max-width: 13.5em; font-size: clamp(2.5rem, 5.4vw, 4.4rem); }
.hero--wide h1 { max-width: 18ch; }
.hero .lead { margin-top: 24px; max-width: 560px; }
.hero .supporting { margin-top: 16px; max-width: 560px; font-weight: 500; }
.rotator { margin-top: 32px; }
.rotator .eyebrow { margin-bottom: 10px; }
.rotator-word { display: inline-block; font-weight: 700; font-size: clamp(1.3rem, 2.4vw, 1.75rem); background: var(--yellow); padding: 2px 10px; border-radius: 6px; min-height: 1.5em; transition: opacity .3s ease, transform .3s ease; }
.rotator-word.out { opacity: 0; transform: translateY(8px); }
.rotator-list { margin-top: 6px; }
.js .rotator-list { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.hero .anchor { margin-top: 36px; }
@media (max-width: 860px) { .hero-grid { grid-template-columns: 1fr; } }

/* ---------- Image placeholder ---------- */
.ph { position: relative; background: var(--cream); border-radius: var(--radius); aspect-ratio: 4 / 3; display: grid; place-items: center; overflow: hidden; }
.ph--square { aspect-ratio: 1; }
.ph--wide { aspect-ratio: 16 / 9; }
.ph--flat { background: transparent; }
.ph .glass { position: relative; width: 38%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff 0 18%, transparent 19%), radial-gradient(circle, var(--c, #cfe9f2) 0 62%, #e9f6fa 63% 70%, #bcdde8 71% 100%); box-shadow: 0 30px 40px -20px rgba(0,0,0,.25); }
.ph-label { position: absolute; bottom: 12px; left: 12px; font-family: var(--mono); font-size: .65rem; letter-spacing: .1em; text-transform: uppercase; background: var(--white); border: 1px solid var(--ink); padding: 4px 8px; border-radius: 6px; }
.ph--ink { background: #1a1a1a; }

/* ---------- Route cards ---------- */
.routes { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.route { border: 2px solid var(--ink); border-radius: var(--radius); padding: clamp(28px, 3.5vw, 44px); display: flex; flex-direction: column; background: var(--white); }
.route--yellow { background: var(--yellow); }
.route h3 { font-size: clamp(1.6rem, 2.6vw, 2.1rem); letter-spacing: -.02em; }
.route .route-sub { font-weight: 500; margin: 12px 0 22px; font-size: 1.05rem; line-height: 1.45; max-width: 44ch; }
.route .route-body { margin: 12px 0 18px; }
.route .chips { gap: 8px; margin: 0 0 24px; }
.route .chips li { padding: 7px 14px; font-size: .88rem; }
.dots { list-style: none; display: grid; gap: 12px; margin-bottom: 28px; }
.dots li { padding-left: 22px; position: relative; font-size: .97rem; line-height: 1.45; }
.dots li::before { content: ""; position: absolute; left: 0; top: .5em; width: 8px; height: 8px; border-radius: 50%; background: var(--ink); }
.route:not(.route--yellow) .dots li::before { background: var(--yellow); box-shadow: 0 0 0 1.5px var(--ink); }
.route .link { margin-top: auto; align-self: flex-start; }
.route--yellow .link { background-image: linear-gradient(var(--ink), var(--ink)); background-size: 100% 2px; }
.route--yellow .link:hover { color: var(--yellow); background-size: 100% 100%; }
.after-note { text-align: center; margin-top: 28px; }
@media (max-width: 760px) { .routes { grid-template-columns: 1fr; } }
/* Shop: four store cards in a row, each with its flag. */
.routes--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.routes--4 .route { padding: clamp(22px, 2.2vw, 30px); }
.routes--4 .route h3 { font-size: clamp(1.3rem, 1.8vw, 1.6rem); }
.routes--4 .btn-row { margin-top: auto; padding-top: 18px; }
.flag { display: block; width: 56px; height: 38px; border-radius: 6px; overflow: hidden; margin-bottom: 18px; box-shadow: 0 0 0 1.5px var(--ink); }
.flag svg { display: block; width: 100%; height: 100%; }
@media (max-width: 1100px) { .routes--4 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .routes--4 { grid-template-columns: 1fr; } }

/* ---------- Tiles (audience / icons) ---------- */
.tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.tile { background: var(--cream); border-radius: var(--radius-sm); padding: 28px 20px; text-align: center; font-weight: 700; line-height: 1.3; }
.tile .icon { width: 56px; height: 56px; border-radius: 50%; background: var(--yellow); display: grid; place-items: center; margin: 0 auto 16px; }
.tile .icon svg { width: 24px; height: 24px; }
@media (max-width: 860px) { .tiles { grid-template-columns: 1fr 1fr; } }

/* ---------- Steps (dark band) ---------- */
.steps-head { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: end; margin-bottom: 40px; }
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; list-style: none; counter-reset: step; padding: 0; margin: 0; }
.steps li { counter-increment: step; }
.steps li::before { content: counter(step); display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--yellow); color: var(--ink); font-weight: 800; margin-bottom: 18px; }
.steps h3 { font-size: 1.15rem; margin-bottom: 10px; }
.steps p { color: #cfcfcf; font-size: .95rem; }
.section:not(.section--ink) .steps p { color: var(--muted); }
.section:not(.section--ink) .steps-head { border-color: var(--line-soft); }
.steps-foot { margin-top: 44px; }
.steps .persona-note { font-size: .85rem; font-style: italic; margin-top: 10px; }
@media (max-width: 960px) { .steps { grid-template-columns: 1fr 1fr; } .steps-head { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .steps { grid-template-columns: 1fr; } }
.steps--3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 860px) { .steps--3 { grid-template-columns: 1fr; } }

/* ---------- Case studies ---------- */
.carousel-head { display: flex; justify-content: space-between; align-items: end; gap: 24px; margin-bottom: 32px; }
.carousel-btns { display: flex; gap: 10px; }
.icon-btn { width: 48px; height: 48px; border-radius: 50%; border: 2px solid var(--ink); background: var(--white); display: grid; place-items: center; cursor: pointer; }
.icon-btn:hover { background: var(--yellow); }
.track { display: grid; grid-auto-flow: column; grid-auto-columns: min(100%, 560px); gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 4px; }
.track::-webkit-scrollbar { display: none; }
.case { scroll-snap-align: start; border: 2px solid var(--ink); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; background: var(--white); }
.case .ph { border-radius: 0; aspect-ratio: 16 / 9; }
.case-body { padding: 28px; display: flex; flex-direction: column; gap: 14px; flex: 1; }
.case-body h3 { font-size: 1.35rem; }
.case-body p { color: var(--muted); font-size: .97rem; }
.case-body .link { margin-top: auto; align-self: flex-start; }
.cases-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 900px) { .cases-grid { grid-template-columns: 1fr; } }
.pips { display: flex; gap: 6px; justify-content: center; margin-top: 20px; }
.pips span { width: 8px; height: 8px; border-radius: 99px; background: var(--line-soft); transition: .2s; }
.pips span.on { width: 28px; background: var(--ink); }

/* ---------- Stats ---------- */
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.stat { background: var(--white); border-radius: var(--radius); padding: 32px 28px; }
.stat .big { font-size: clamp(2.2rem, 4vw, 3rem); font-weight: 800; letter-spacing: -.03em; line-height: 1; margin-bottom: 16px; }
.stat h3 { font-size: 1.05rem; margin-bottom: 8px; }
.stat p { font-size: .93rem; color: var(--muted); }
.statement { font-size: clamp(1.2rem, 2vw, 1.5rem); line-height: 1.45; font-weight: 700; max-width: 820px; margin-top: 56px; }
@media (max-width: 860px) { .stats { grid-template-columns: 1fr; } }

/* ---------- Certifications ---------- */
.certs { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; margin-top: 36px; }
.cert { border: 2px solid var(--ink); border-radius: var(--radius-sm); padding: 20px 18px; }
.cert { display: flex; flex-direction: column; }
.cert img { height: 64px; width: auto; max-width: 100%; object-fit: contain; object-position: left center; margin-bottom: 16px; }
.cert strong { display: block; font-size: 1.05rem; font-weight: 800; }
.cert span { font-size: .82rem; color: var(--muted); line-height: 1.3; display: block; margin-top: 4px; }
@media (max-width: 960px) { .certs { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px) { .certs { grid-template-columns: 1fr 1fr; } }

/* ---------- Logo strip ---------- */
.logos { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; margin-top: 32px; list-style: none; }
.logo-tile { background: var(--cream); border-radius: var(--radius-sm); height: 96px; display: grid; place-items: center; padding: 18px 22px; }
.logo-tile img { max-height: 56px; max-width: 100%; width: auto; object-fit: contain; opacity: .85; }
.logo-ph { background: var(--cream); border-radius: var(--radius-sm); height: 84px; display: grid; place-items: center; font-family: var(--mono); font-size: .62rem; letter-spacing: .12em; color: #8a8676; }
@media (max-width: 860px) { .logos { grid-template-columns: repeat(3, 1fr); } }

/* ---------- Guide block ---------- */
.guide { background: var(--yellow); border-radius: calc(var(--radius) * 1.5); padding: clamp(32px, 5vw, 64px); display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(28px, 5vw, 64px); align-items: center; }
.guide h2 { margin-bottom: 18px; }
.guide .ph { background: rgba(255,255,255,.35); }
.checks { list-style: none; display: grid; gap: 10px; margin: 22px 0 28px; }
.checks li { padding-left: 30px; position: relative; font-size: .97rem; line-height: 1.45; }
.checks li::before { content: ""; position: absolute; left: 2px; top: .2em; width: 16px; height: 9px; border-left: 2.5px solid var(--ink); border-bottom: 2.5px solid var(--ink); transform: rotate(-45deg); }
.email-form { display: flex; gap: 10px; flex-wrap: wrap; }
.email-form input { flex: 1 1 220px; font: 400 1rem var(--font); padding: 16px 22px; border-radius: 99px; border: 2px solid var(--ink); background: var(--white); }
.small { font-size: .82rem; margin-top: 10px; }
.cover { position: relative; aspect-ratio: 3 / 4; max-width: 300px; margin: 0 auto; background: var(--sky); border-radius: 8px 14px 14px 8px; box-shadow: 18px 22px 0 -6px rgba(0,0,0,.12), inset 10px 0 0 rgba(0,0,0,.08); padding: 28px 24px; display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; transform: rotate(-4deg); }
.cover .swirl { position: absolute; top: -10%; right: -30%; width: 120%; color: var(--yellow); }
.cover strong { position: relative; font-size: 1.6rem; line-height: 1.05; font-weight: 800; color: var(--ink); }
.cover em { position: relative; font-style: normal; font-family: var(--mono); font-size: .6rem; letter-spacing: .12em; text-transform: uppercase; margin-top: 12px; }
@media (max-width: 860px) { .guide { grid-template-columns: 1fr; } }

/* ---------- FAQ ---------- */
.faq-list { border-top: 1.5px solid var(--ink); margin-top: 8px; }
.faq { border-bottom: 1px solid var(--line-soft); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 22px 0; font-weight: 700; font-size: 1.05rem; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .pm { flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--cream); display: grid; place-items: center; font-weight: 700; transition: .2s; }
.faq[open] summary .pm { background: var(--yellow); transform: rotate(45deg); }
.faq .answer { padding: 0 48px 24px 0; color: var(--muted); }
/* Answers run the full width of the list on desktop, like the questions (Luke, 11 Nov). */
.faq-grid { display: grid; grid-template-columns: .7fr 1.3fr; gap: 48px; }
@media (max-width: 860px) { .faq-grid { grid-template-columns: 1fr; gap: 16px; } }

/* ---------- CTA band ---------- */
.cta-band { display: flex; justify-content: space-between; align-items: center; gap: 32px; flex-wrap: wrap; }
.cta-band h2 { max-width: 16ch; }
.cta-band p { max-width: 560px; margin-top: 16px; color: #cfcfcf; }

/* ---------- Content blocks ---------- */
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 80px); align-items: start; }
.two-col--media { align-items: center; }
@media (max-width: 860px) { .two-col { grid-template-columns: 1fr; } }
.lead-list { list-style: none; display: grid; gap: 0; border-top: 1.5px solid var(--ink); }
.lead-list li { padding: 20px 0; border-bottom: 1px solid var(--line-soft); }
.lead-list strong { display: block; font-size: 1.08rem; margin-bottom: 4px; }
.lead-list p { color: var(--muted); }
.check-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.check-card { background: var(--white); border-radius: var(--radius-sm); padding: 24px; border: 1.5px solid var(--line-soft); }
.section--cream .check-card { border-color: transparent; }
.check-card strong { display: flex; gap: 10px; align-items: center; font-size: 1.05rem; margin-bottom: 8px; }
.check-card strong::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--yellow); box-shadow: 0 0 0 1.5px var(--ink); flex: none; }
.check-card p { color: var(--muted); font-size: .95rem; }
@media (max-width: 760px) { .check-grid { grid-template-columns: 1fr; } }
.prose-blocks { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.prose-block { border: 2px solid var(--ink); border-radius: var(--radius); padding: 32px; background: var(--white); }
.prose-block h3 { margin-bottom: 12px; }
.prose-block p { color: var(--muted); }
@media (max-width: 760px) { .prose-blocks { grid-template-columns: 1fr; } }
.chips { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; }
.chips li { border: 1.5px solid var(--ink); border-radius: 99px; padding: 10px 18px; font-weight: 500; font-size: .95rem; background: var(--white); }
.chips--soft li { border-color: transparent; background: var(--yellow); }
.bands { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.band { border-radius: var(--radius); padding: 28px; background: var(--white); border-top: 8px solid var(--c, var(--yellow)); }
.band .big { font-size: 2.2rem; font-weight: 800; letter-spacing: -.03em; line-height: 1; margin-bottom: 12px; }
.band h3 { font-size: 1.1rem; margin-bottom: 8px; }
.band p { color: var(--muted); font-size: .95rem; }
@media (max-width: 860px) { .bands { grid-template-columns: 1fr; } }
.persona-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.persona-card { border: 2px solid var(--ink); border-radius: var(--radius-sm); padding: 24px; text-decoration: none; display: flex; flex-direction: column; gap: 8px; background: var(--white); transition: .15s; }
.persona-card:hover { background: var(--yellow); transform: translateY(-3px); }
.persona-card strong { font-size: 1.1rem; }
.persona-card span { color: var(--muted); font-size: .93rem; line-height: 1.45; }
.persona-card:hover span { color: var(--ink); }

/* Category cards */
.cat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.cat-card { position: relative; text-decoration: none; border-radius: var(--radius); overflow: hidden; background: var(--c); color: var(--white); min-height: 200px; padding: 24px; display: flex; flex-direction: column; justify-content: flex-end; transition: transform .15s; }
.cat-card:hover { transform: translateY(-4px); }
.cat-card .swirl { position: absolute; top: -20%; right: -25%; width: 80%; color: rgba(255,255,255,.22); }
.cat-card strong { position: relative; font-size: 1.35rem; line-height: 1.1; }
.cat-card span { position: relative; font-family: var(--mono); font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; margin-top: 10px; display: flex; gap: 8px; align-items: center; }
.cat-card.light { color: var(--ink); }
.cat-card.light .swirl { color: rgba(255,255,255,.4); }
@media (max-width: 860px) { .cat-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .cat-grid { grid-template-columns: 1fr; } }

/* Category hero accent */
.cat-hero { background: var(--c); color: var(--white); position: relative; overflow: hidden; }
.cat-hero .swirl { position: absolute; right: -8%; top: -10%; width: 55%; color: rgba(255,255,255,.14); pointer-events: none; }
.cat-hero .eyebrow a { text-decoration: none; }
.cat-hero .wrap { position: relative; }

/* Report strip */
.report-strip { position: relative; overflow: hidden; background: var(--ink); color: var(--white); border-radius: calc(var(--radius) * 1.5); padding: clamp(32px, 5vw, 56px); display: grid; grid-template-columns: 1.4fr .6fr; gap: 32px; align-items: center; }
.report-strip .cover { background: var(--c, var(--purple)); max-width: 200px; }
.report-strip .cover strong { color: var(--white); font-size: 1.2rem; }
.report-strip .cover em { color: var(--white); }
@media (max-width: 760px) { .report-strip { grid-template-columns: 1fr; } }

/* Blog cards */
.blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.blog-card { text-decoration: none; display: flex; flex-direction: column; gap: 14px; }
.blog-card .ph { aspect-ratio: 3 / 2; }
.blog-card strong { font-size: 1.15rem; line-height: 1.25; }
.blog-card:hover strong { text-decoration: underline; text-decoration-color: var(--yellow); text-decoration-thickness: 3px; }
@media (max-width: 860px) { .blog-grid { grid-template-columns: 1fr; } }

/* Contact form */
.form { display: grid; gap: 16px; background: var(--white); border: 2px solid var(--ink); border-radius: var(--radius); padding: clamp(24px, 4vw, 40px); }
.form label { display: grid; gap: 6px; font-weight: 700; font-size: .92rem; }
.form input, .form select, .form textarea { font: 400 1rem var(--font); padding: 14px 16px; border: 1.5px solid #bdb9ad; border-radius: 10px; background: var(--white); color: var(--ink); width: 100%; }
.form textarea { min-height: 150px; resize: vertical; }
.form input:focus, .form select:focus, .form textarea:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px var(--yellow); }
.form .row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 600px) { .form .row { grid-template-columns: 1fr; } }

/* Stub page */
.stub { border: 2px dashed var(--ink); border-radius: var(--radius); padding: 40px; background: var(--cream); }

/* Footer */
.site-footer { background: var(--ink); color: var(--white); padding: 72px 0 32px; }
.foot-top { display: grid; grid-template-columns: 1.3fr repeat(4, 1fr); gap: 32px; }
.site-footer .logo svg { height: 38px; }
.site-footer .logo { color: var(--white); }
.foot-col h4 { font-family: var(--mono); font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--yellow); margin-bottom: 16px; font-weight: 500; }
.foot-col ul { list-style: none; display: grid; gap: 8px; }
.foot-col a { text-decoration: none; color: #d6d6d6; font-size: .93rem; }
.foot-col a:hover { color: var(--white); text-decoration: underline; }
.foot-contact { color: #bdbdbd; font-size: .9rem; margin-top: 20px; line-height: 1.8; }
.foot-bottom { margin-top: 56px; padding-top: 24px; border-top: 1px solid #2c2c2c; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: .82rem; color: #9a9a9a; }
@media (max-width: 900px) { .foot-top { grid-template-columns: 1fr 1fr; } .foot-brand { grid-column: 1 / -1; } }

/* Concept banner */
.concept-bar { background: var(--yellow); font-family: var(--mono); font-size: .7rem; letter-spacing: .08em; text-align: center; padding: 8px 16px; text-transform: uppercase; }

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

/* Photography */
.ph--photo { background: var(--cream); }
.ph--photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* Guide cover image */
.guide-img { width: 100%; max-width: 520px; margin: 0 auto; filter: drop-shadow(0 20px 30px rgba(0,0,0,.12)); }

/* Reach: map + stats */
.reach { display: grid; grid-template-columns: 1.35fr .65fr; gap: 16px; align-items: stretch; }
.map { margin: 0; border-radius: var(--radius); overflow: hidden; background: #101921; }
.map { display: flex; align-items: center; }
.map img { width: 100%; height: 100%; object-fit: contain; }
.reach-stats .stats { grid-template-columns: 1fr; height: 100%; }
.reach-stats .stat { padding: 24px; }
.reach-stats .stat .big { font-size: clamp(1.8rem, 3vw, 2.4rem); margin-bottom: 10px; }
@media (max-width: 900px) { .reach { grid-template-columns: 1fr; } }

/* Guide download lightbox */
.modal { border: 0; padding: 0; background: transparent; width: min(640px, calc(100vw - 32px)); max-height: calc(100vh - 32px); }
.modal::backdrop { background: rgba(11,11,11,.72); backdrop-filter: blur(3px); }
.modal[open] { animation: pop .2s ease; }
@keyframes pop { from { opacity: 0; transform: translateY(12px); } }
.modal-inner { position: relative; background: var(--white); border: 2px solid var(--ink); border-radius: var(--radius); overflow: hidden; }
.modal-head { background: var(--yellow); padding: 28px 32px; display: flex; gap: 20px; align-items: center; }
.modal-head h2 { font-size: clamp(1.4rem, 3vw, 1.9rem); }
.modal-head .eyebrow { margin-bottom: 8px; }
.modal-cover { width: 120px; flex: none; filter: drop-shadow(0 8px 14px rgba(0,0,0,.15)); }
.modal-body, .modal-done { padding: 28px 32px 32px; display: grid; gap: 16px; }
.modal-body label { display: grid; gap: 6px; font-weight: 700; font-size: .92rem; }
.modal-body .opt { font-weight: 400; color: var(--muted); }
.modal-body .row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.modal-body input, .modal-body select { font: 400 1rem var(--font); padding: 13px 14px; border: 1.5px solid #bdb9ad; border-radius: 10px; background: var(--white); color: var(--ink); width: 100%; }
.modal-body input:focus, .modal-body select:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px var(--yellow); }
.modal-body .invalid { border-color: #b00020; }
.form-error { color: #b00020; margin: 0; }
.modal-close { position: absolute; top: 14px; right: 14px; width: 40px; height: 40px; border-radius: 50%; border: 2px solid var(--ink); background: var(--white); font-size: 1.4rem; line-height: 1; cursor: pointer; z-index: 2; }
.modal-close:hover { background: var(--ink); color: var(--white); }
@media (max-width: 560px) { .modal-body .row { grid-template-columns: 1fr; } .modal-cover { width: 80px; } .modal-head, .modal-body, .modal-done { padding-left: 20px; padding-right: 20px; } .modal-head { padding-right: 60px; } }

[hidden] { display: none !important; }
.cases-grid--2 { grid-template-columns: repeat(2, 1fr); } @media (max-width: 900px) { .cases-grid--2 { grid-template-columns: 1fr; } }
.compare { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.compare-col { background: var(--white); border: 2px solid var(--ink); border-radius: var(--radius); padding: 32px; }
.compare-col--yellow { background: var(--yellow); }
.compare-col--yellow .dots li::before { background: var(--ink); }
@media (max-width: 760px) { .compare { grid-template-columns: 1fr; } }
.anchor-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.anchor-card { display: flex; flex-direction: column; gap: 6px; padding: 22px; border: 2px solid var(--ink); border-radius: var(--radius-sm); background: var(--white); text-decoration: none; transition: .15s; }
.anchor-card:hover { background: var(--yellow); transform: translateY(-2px); }
.anchor-card .eyebrow { margin: 0; }
.anchor-card strong { font-size: 1.1rem; }
@media (max-width: 860px) { .anchor-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .anchor-grid { grid-template-columns: 1fr; } }
.table-wrap { overflow-x: auto; margin-top: 32px; border-radius: var(--radius); }
.fix-table { width: 100%; border-collapse: collapse; background: #151515; min-width: 560px; }
.fix-table th { text-align: left; font-family: var(--mono); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--yellow); font-weight: 500; padding: 18px 24px; border-bottom: 1px solid #333; }
.fix-table td { padding: 18px 24px; border-bottom: 1px solid #2a2a2a; vertical-align: top; color: #d6d6d6; }
.fix-table td:first-child { font-weight: 700; color: var(--white); width: 45%; }
.check-grid--lists .check-card .dots { margin: 12px 0 0; gap: 8px; }
.check-grid--lists .check-card .dots li { font-size: .95rem; color: var(--muted); }

/* Batch 2 components */
.base-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.base-card { border: 2px solid var(--ink); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; background: var(--white); }
.base-visual { position: relative; aspect-ratio: 1; background: var(--c); overflow: hidden; }
.base-x { position: absolute; left: 20px; top: 16px; font-size: 3rem; font-weight: 800; color: var(--white); letter-spacing: -.03em; }
.base-visual.light .base-x { color: var(--ink); }
.base-body { padding: 22px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.base-body h3 { font-size: 1.15rem; }
.base-body p { color: var(--muted); font-size: .93rem; }
.base-body .link { margin-top: auto; align-self: flex-start; }
@media (max-width: 1000px) { .base-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .base-grid { grid-template-columns: 1fr; } }
.benefit-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.benefit { background: var(--white); border-radius: var(--radius-sm); padding: 22px; font-weight: 700; font-size: 1.05rem; border-left: 6px solid var(--yellow); }
.cat-list { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.cat-row { display: grid; grid-template-columns: auto 1fr auto; gap: 16px; align-items: start; background: var(--white); border-radius: var(--radius-sm); padding: 20px; text-decoration: none; transition: .15s; }
.cat-row:hover { transform: translateY(-2px); box-shadow: 0 0 0 2px var(--ink); }
.cat-dot { width: 18px; height: 18px; border-radius: 50%; background: var(--c); margin-top: 4px; }
.cat-row strong { font-size: 1.1rem; }
.cat-row p { color: var(--muted); font-size: .92rem; margin: 4px 0 0; }
.cat-row .perfect { color: var(--ink); }
.cat-row .arrow { margin-top: 6px; }
@media (max-width: 760px) { .cat-list { grid-template-columns: 1fr; } }
.pyramid { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 24px 0; }
.tier { background: var(--c); border-radius: 10px; padding: 16px; text-align: center; font-weight: 700; }
.tier--base { border: 2px solid var(--ink); font-size: 1.2rem; }
.stage { display: grid; grid-template-columns: 120px 1fr; gap: 32px; }
.stage-num { width: 96px; height: 96px; border-radius: 50%; background: var(--yellow); border: 2px solid var(--ink); display: grid; place-items: center; font-size: 2.6rem; font-weight: 800; }
.stage-main { max-width: 860px; }
.stage-rows { display: grid; gap: 0; margin-top: 28px; border-top: 1.5px solid var(--ink); }
.stage-row { display: grid; grid-template-columns: 200px 1fr; gap: 24px; padding: 20px 0; border-bottom: 1px solid var(--line-soft); }
.stage-row .eyebrow { margin: 4px 0 0; }
.stage-row .lead-list { border-top: 0; }
.stage-row .lead-list li:first-child { padding-top: 0; }
@media (max-width: 760px) { .stage { grid-template-columns: 1fr; gap: 16px; } .stage-num { width: 64px; height: 64px; font-size: 1.8rem; } .stage-row { grid-template-columns: 1fr; gap: 8px; } }
.article-list { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.article { display: grid; grid-template-columns: auto 1fr auto; gap: 16px; align-items: center; padding: 20px 22px; border: 2px solid var(--ink); border-radius: var(--radius-sm); text-decoration: none; transition: .15s; }
.article:hover { background: var(--yellow); }
.article strong { font-size: 1.02rem; line-height: 1.3; }
@media (max-width: 760px) { .article-list { grid-template-columns: 1fr; } .article { grid-template-columns: 1fr auto; } .article .tag { display: none; } }
.cat-hero--light { color: var(--ink); }
.section--ink .lead-list { border-top-color: #444; }
.section--ink .lead-list li { border-bottom-color: #2c2c2c; }
.section--ink .lead-list p, .section--ink .muted { color: #c4c4c4; }
.stats--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) { .stats--4 { grid-template-columns: 1fr 1fr; } }
.table-wrap--light { margin-top: 0; border: 2px solid var(--ink); }
.data-table { width: 100%; border-collapse: collapse; background: var(--white); min-width: 560px; }
.data-table th { text-align: left; font-family: var(--mono); font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 500; padding: 16px 20px; background: var(--yellow); border-bottom: 2px solid var(--ink); }
.data-table td { padding: 16px 20px; border-bottom: 1px solid var(--line-soft); vertical-align: top; color: var(--muted); }
.data-table td:first-child { font-weight: 700; color: var(--ink); }
.data-table tr:last-child td { border-bottom: 0; }
.pull { margin: 0 auto; max-width: 900px; text-align: center; }
.pull p { font-size: clamp(1.5rem, 3vw, 2.3rem); font-weight: 700; line-height: 1.25; letter-spacing: -.01em; }
.pull cite { display: block; margin-top: 20px; font-family: var(--mono); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--yellow); font-style: normal; }
.stats--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 900px) { .stats--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .stats--4 .stat { padding: 20px 16px; } .stats--4 .stat .big { font-size: 1.6rem; } .stats--4 .stat h3 { font-size: .9rem; } }
.section--ink .prose-block { color: var(--ink); }
.filter-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 32px; }
.chip-btn { font: 500 .9rem var(--font); padding: 10px 16px; border-radius: 99px; border: 1.5px solid var(--ink); background: var(--white); cursor: pointer; }
.chip-btn.on, .chip-btn:hover { background: var(--yellow); }
.post-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.post { background: var(--white); border-radius: var(--radius); overflow: hidden; text-decoration: none; display: flex; flex-direction: column; transition: .15s; }
.post:hover { transform: translateY(-3px); box-shadow: 0 0 0 2px var(--ink); }
.post .ph { border-radius: 0; aspect-ratio: 16 / 9; }
.post-meta { display: flex; justify-content: space-between; align-items: center; padding: 18px 22px 0; gap: 10px; }
.post-meta .date { font-family: var(--mono); font-size: .7rem; color: var(--muted); }
.post strong { padding: 12px 22px 0; font-size: 1.12rem; line-height: 1.3; }
.post p { padding: 10px 22px 24px; color: var(--muted); font-size: .92rem; margin: 0; }
.post[hidden] { display: none; }
@media (max-width: 900px) { .post-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .post-grid { grid-template-columns: 1fr; } }
.base-visual img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.base-visual .base-x { z-index: 1; text-shadow: 0 2px 10px rgba(0,0,0,.25); }

/* Base product pages */
.base-hero { display: grid; grid-template-columns: 1.6fr 1fr; min-height: 460px; }
.base-hero-copy { background: var(--c); display: flex; align-items: center; padding: clamp(40px, 6vw, 80px) max(var(--gutter), calc((100vw - var(--wrap)) / 2 + var(--gutter))); }
.base-hero-copy h1 { max-width: 12ch; }
.base-hero-img { position: relative; overflow: hidden; min-height: 320px; }
.base-hero-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 860px) { .base-hero { grid-template-columns: 1fr; } }
.sense-title { color: #9aae07; font-size: 1.6rem; margin-bottom: 24px; }
.sense { margin-bottom: 22px; max-width: 420px; }
.sense strong { display: block; margin-bottom: 10px; }
.sense-track { position: relative; height: 8px; border-radius: 99px; background: #ddd; }
.sense-track span { position: absolute; top: 50%; width: 26px; height: 26px; border-radius: 50%; background: var(--lime); transform: translate(-50%, -50%); box-shadow: inset 0 0 0 7px var(--lime), inset 0 0 0 13px #fff; margin-left: 13px; }
.sense-ends { display: flex; justify-content: space-between; font-size: .88rem; color: var(--muted); margin-top: 8px; }
.cert-row { display: flex; flex-wrap: wrap; gap: 18px; align-items: center; margin-top: 28px; }
.cert-row img { height: 48px; width: auto; }
.cert-chip { border: 2px solid var(--ink); border-radius: 99px; padding: 8px 14px; font-weight: 800; font-size: .85rem; }
.avail { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; text-align: center; }
.avail-icon { width: 64px; height: 64px; border-radius: 50%; background: var(--white); color: var(--ink); display: grid; place-items: center; margin: 0 auto 18px; }
.avail-icon svg { width: 32px; height: 32px; }
.avail p { font-size: 1.1rem; font-weight: 500; }
@media (max-width: 700px) { .avail { grid-template-columns: 1fr; } }
.form--dark { background: #1c1c1c; border-color: #333; color: var(--white); }
.form--dark .opt, .form--dark .muted { color: #aaa; }
.base-link { text-decoration: none; display: flex; flex-direction: column; gap: 16px; }
.base-link .base-visual { border-radius: var(--radius); }
.base-link strong { font-size: 1.3rem; line-height: 1.15; }

/* Kombucha Producer's Guide landing */
.measure-wide { max-width: 980px; }
.kg-hero-img { display: grid; place-items: center; padding: 32px; }
.kg-hero-img img { width: 100%; max-width: 560px; height: auto; filter: drop-shadow(0 18px 30px rgba(0,0,0,.18)); }
.kg-spread { width: 100%; height: auto; display: block; }
.section[style*="background:#"] .faq { border-color: rgba(11,11,11,.35); }
.section[style*="background:#"] .faq summary .pm { background: rgba(255,255,255,.6); }
.section[style*="background:#"] .faq .answer { color: var(--ink); }
.section--ink .faq { border-color: rgba(255,255,255,.25); }
.section--ink .faq summary .pm { background: rgba(255,255,255,.12); color: var(--white); }
.section--ink .faq .answer { color: #cfcfcf; }
.faq .answer .dots { margin-top: 12px; }
.sense-val { font-weight: 500; color: var(--muted); }
.ph--cut { background: transparent; }
.ph--cut img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.beaker-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .beaker-grid .base-visual { border-radius: var(--radius); }

/* Drink heroes: large top-down cut-out, inside the content width with its right edge on the content edge */
.hero--drink { padding-bottom: clamp(32px, 4vw, 56px); }
.hero--drink .hero-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); }
.hero--drink h1 { font-size: clamp(2.4rem, 4.6vw, 4.2rem); }
.hero-drink { position: relative; }
.hero-drink img { display: block; width: 100%; height: auto; max-height: 640px; object-fit: contain; object-position: right center; }
@media (max-width: 860px) { .hero--drink .hero-grid { grid-template-columns: 1fr; } }

/* Category cards with product photography and a colour-coded overlay */
.cat-card--photo { aspect-ratio: 4 / 3; min-height: 0; color: var(--white); }
.cat-card--photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.cat-card--photo::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(to top, color-mix(in srgb, var(--c) 96%, black) 0%, color-mix(in srgb, var(--c) 82%, transparent) 30%, color-mix(in srgb, var(--c) 18%, transparent) 62%, transparent 80%); }
.cat-card--photo strong, .cat-card--photo span { z-index: 2; text-shadow: 0 1px 8px rgba(0,0,0,.25); }
.cat-card--photo:hover img { transform: scale(1.04); }
.cat-card--photo.light { color: var(--ink); }
.cat-card--photo.light strong, .cat-card--photo.light span { text-shadow: none; }

/* Base product pages, site-native layout */
.base-visual--hero { aspect-ratio: 1; border-radius: var(--radius); overflow: hidden; }
.base-visual--hero .base-x { font-size: 1.1rem; }
.glance { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.glance-card { background: var(--white); border: 1.5px solid var(--line-soft); border-radius: var(--radius); padding: clamp(24px, 3vw, 36px); }
.glance-card h3 { font-size: 1.25rem; margin-bottom: 24px; }
.glance-card .sense { max-width: none; }
.glance-card .sense-track span { background: var(--yellow); box-shadow: inset 0 0 0 7px var(--yellow), inset 0 0 0 13px var(--ink); }
.spec { display: grid; gap: 0; margin: 0; }
.spec div { display: grid; grid-template-columns: 130px 1fr; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--line-soft); }
.spec div:first-child { padding-top: 0; }
.spec dt { font-family: var(--mono); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); padding-top: 3px; }
.spec dd { margin: 0; font-weight: 600; }
.base-grid--3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 860px) { .glance, .base-grid--3 { grid-template-columns: 1fr; } }

/* Heroes with a photo or product image: give the image real presence */
.hero--media .hero-grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(32px, 5vw, 72px); }
.hero--media .hero-grid > div:last-child > * { width: 100%; max-width: 580px; margin-left: auto; }
@media (max-width: 860px) { .hero--media .hero-grid { grid-template-columns: 1fr; } .hero--media .hero-grid > div:last-child > * { max-width: none; } }

/* Benefit tiles: straight accent bar (no curved border artefact), visible on white sections */
.benefit { position: relative; overflow: hidden; border-left: 0; padding-left: 30px; }
.benefit::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 6px; background: var(--accent, var(--yellow)); }
.section:not(.section--cream):not(.section--ink) .benefit { background: var(--cream); }

/* Rule: an image beside text is square and sits level with the copy */
.two-col--media { align-items: center; }
.two-col--media > .ph--photo, .two-col--media > div > .ph--photo { aspect-ratio: 1; }
.hero--media .hero-grid { grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); }
.hero--media .hero-grid > div:last-child > .ph, .hero--media .base-visual--hero { aspect-ratio: 4 / 5; max-width: 540px; }
.hero--media.hero--wide h1 { font-size: clamp(2.4rem, 4.3vw, 3.9rem); }
@media (max-width: 860px) { .hero--media .hero-grid > div:last-child > .ph, .hero--media .base-visual--hero { aspect-ratio: 1; } }

/* Mobile menu fix: the header's blur made the fixed panel collapse to 52px. Anchor it under the header instead. */
@media (max-width: 1020px) {
  .site-header { backdrop-filter: none; background: var(--white); }
  .nav-panel { position: absolute; top: 100%; left: 0; right: 0; bottom: auto; height: calc(100dvh - 76px); border-top: 1px solid var(--line-soft); }
  .nav-open body { overflow: hidden; }
}
.report-strip-img { width: 100%; max-width: 360px; justify-self: end; filter: drop-shadow(0 16px 24px rgba(0,0,0,.35)); }
@media (max-width: 860px) { .report-strip { grid-template-columns: 1fr; } .report-strip-img { justify-self: start; max-width: 280px; } }

/* Recipe visual on the homepage (square, 1:1): straight label lines ending in a small circle */
.recipe-vis { position: relative; margin: 0; aspect-ratio: 1; border-radius: var(--radius); overflow: hidden; color: var(--white); container-type: inline-size; }
.recipe-vis > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.rv-row { position: absolute; left: 6%; width: 52%; display: flex; align-items: center; gap: 2.5cqi; transform: translateY(-50%); }
.rv-text { flex: none; width: 21cqi; line-height: 1.1; }
.rv-text strong { display: block; font-size: clamp(1rem, 4.4cqi, 1.7rem); }
.rv-text span { display: block; font-size: clamp(.7rem, 2.5cqi, .95rem); opacity: .92; }
.rv-line { position: relative; flex: 1; height: 1.5px; background: rgba(255,255,255,.85); }
.rv-line::after { content: ""; position: absolute; right: -4px; top: 50%; width: 8px; height: 8px; margin-top: -4px; border-radius: 50%; background: var(--white); box-shadow: 0 0 0 3px rgba(255,255,255,.25); }
.rv-result { position: absolute; left: 44%; right: 19%; top: 82%; text-align: center; font-weight: 800; font-size: clamp(.95rem, 3.4cqi, 1.3rem); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.rv-text { width: 30cqi; }
.rv-text strong, .rv-text span { display: inline; }
.rv-text strong { font-size: clamp(.95rem, 3.6cqi, 1.4rem); margin-right: .2em; }
.rv-text span { font-size: clamp(.72rem, 2.6cqi, 1rem); }
.rv-row { width: 52%; }
.rv-result { left: 40%; right: 15%; white-space: nowrap; }
.recipe-vis--img { aspect-ratio: auto; }
.recipe-vis--img > img { position: static; display: block; height: auto; }

/* Changes Required (28 Sept) */
.statement { font-size: var(--lead); line-height: 1.5; }
.route .route-body { font-weight: 700; }
.section--ink .persona-note { color: var(--yellow); }
.hero .lead + .lead { margin-top: 14px; }

/* Category heroes: product photo on the right, like the Who We Help heroes */
.cat-hero-grid { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.cat-hero-img { aspect-ratio: 4 / 5; width: 100%; max-width: 540px; margin-left: auto; box-shadow: 0 24px 48px -24px rgba(0,0,0,.45); }
@media (max-width: 860px) { .cat-hero-grid { grid-template-columns: 1fr; } .cat-hero-img { aspect-ratio: 1; max-width: none; } }

/* Resource pages (29 Sept) */
.guide { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.guide-img { max-width: 640px; }
.inside-head { margin-bottom: 40px; align-items: center; }
.inside-head .h-block { margin-bottom: 0; }
.inside-img { width: 100%; height: auto; filter: drop-shadow(0 20px 30px rgba(0,0,0,.14)); }
.people-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.people-card { background: var(--white); border-radius: var(--radius); overflow: hidden; text-decoration: none; color: var(--ink); display: flex; flex-direction: column; border: 1.5px solid var(--line-soft); transition: transform .15s; }
a.people-card:hover { transform: translateY(-4px); }
.people-card .ph { border-radius: 0; aspect-ratio: 1; }
.people-card > div:last-child { padding: 20px 22px 24px; display: grid; gap: 8px; }
.people-card strong { font-size: 1.15rem; }
.people-card p { color: var(--muted); font-size: .95rem; }
.people-card .link { font-size: .9rem; margin-top: 4px; }
@media (max-width: 960px) { .people-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .people-grid { grid-template-columns: 1fr; } }
.proof-card { padding: 0 !important; overflow: hidden; }
.proof-card .ph { border-radius: 0; margin-bottom: 20px; }
.proof-card h3, .proof-card p { padding: 0 24px; }
.proof-card p { padding-bottom: 24px; }

/* Fix a Problem (29 Sept) */
.anchor-icon { width: 46px; height: 46px; border-radius: 50%; background: var(--yellow); display: grid; place-items: center; margin-bottom: 10px; transition: background .15s; }
.anchor-icon svg { width: 24px; height: 24px; color: var(--ink); }
.anchor-card:hover .anchor-icon { background: var(--white); }
.table-stage { position: relative; margin-top: 32px; isolation: isolate; }
.table-stage .table-wrap { position: relative; z-index: 1; margin-top: 0; }

/* Kombucha Producer's Guide rebuild (30 Sept) */
.check-grid--3 { grid-template-columns: repeat(3, 1fr); }
.challenge-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 36px; }
.challenge-grid .prose-block p { font-size: 1rem; }
.challenge-grid .prose-block strong { font-size: 1.1rem; }
.kg-recipe { width: 100%; height: auto; border-radius: var(--radius); display: block; }
.prose-block .dots { margin-top: 10px; gap: 6px; }
@media (max-width: 860px) { .check-grid--3, .challenge-grid { grid-template-columns: 1fr; } }

/* From idea to shelf (Denis, 30 Sept) */
.its-head { border-bottom: 1px solid #2c2c2c; padding-bottom: 32px; margin-bottom: 44px; }
.its-head h2 { font-size: clamp(2.4rem, 5vw, 4.2rem); margin: 0 0 14px; }
.its-head .lead { color: #d8d8d8; margin: 0; }
.its-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); }
.its-steps > li { padding: 0 20px; border-left: 1px solid #2c2c2c; display: flex; flex-direction: column; }
.its-steps > li:first-child { padding-left: 0; border-left: 0; }
.its-steps > li:last-child { padding-right: 0; }
.its-num { width: 46px; height: 46px; border-radius: 50%; background: var(--yellow); color: var(--ink); display: grid; place-items: center; font-weight: 800; font-size: 1.1rem; margin-bottom: 22px; }
.its-steps h3 { font-size: 1.45rem; line-height: 1.12; margin: 0 0 8px; }
.its-q { color: var(--yellow); font-weight: 700; margin: 0 0 14px; }
.its-d { color: #d8d8d8; margin: 0 0 22px; font-size: .98rem; }
.its-row { display: grid; grid-template-columns: 44px 1fr; gap: 12px; align-items: center; margin-bottom: 16px; }
.its-row strong { display: block; font-size: .95rem; margin-bottom: 2px; }
.its-row p { margin: 0; color: #cfcfcf; font-size: .88rem; line-height: 1.45; }
.its-ic { width: 44px; height: 44px; border-radius: 50%; border: 1px solid #333; background: #151515; display: grid; place-items: center; color: var(--yellow); }
.its-ic svg { width: 20px; height: 20px; }
.its-time { margin-top: auto; border-top: 1px solid #2c2c2c; padding-top: 18px; }
.its-pill { display: inline-flex; align-items: center; gap: 12px; border: 1px solid #3a3a3a; border-radius: 99px; padding: 8px 20px 8px 14px; }
.its-pill > svg { width: 22px; height: 22px; color: var(--yellow); flex: none; }
.its-pill strong { display: block; font-size: .85rem; line-height: 1.3; }
.its-pill span span { font-size: .82rem; color: #cfcfcf; }
.its-need { margin-top: 44px; border: 1.5px dashed var(--yellow); border-radius: 18px; padding: 22px 26px; display: grid; grid-template-columns: minmax(220px, 300px) 1fr; gap: 28px; align-items: center; }
.its-need-h { border-right: 1px solid #333; padding-right: 24px; }
.its-need h3 { margin: 0 0 6px; font-size: 1.3rem; }
.its-need-h p { margin: 0; color: #cfcfcf; font-size: .85rem; }
.its-need ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.its-need li { display: inline-flex; align-items: center; gap: 8px; border: 1px solid #3a3a3a; border-radius: 99px; padding: 9px 16px; font-size: .85rem; }
.its-need li svg { width: 18px; height: 18px; color: var(--yellow); }
.its-foot { margin-top: 28px; display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; }
.its-foot p { margin: 0; color: var(--yellow); font-style: italic; }
@media (max-width: 1100px) { .its-steps { grid-template-columns: 1fr 1fr; row-gap: 44px; } .its-steps > li:nth-child(3) { padding-left: 0; border-left: 0; } .its-steps > li:nth-child(2) { padding-right: 0; } }
@media (max-width: 760px) { .its-steps { grid-template-columns: 1fr; } .its-steps > li { padding: 0 !important; border-left: 0; } .its-need { grid-template-columns: 1fr; } .its-need-h { border-right: 0; padding-right: 0; } .its-time { margin-top: 8px; } }
.its { scroll-margin-top: 110px; }
.cat-hero:not(.cat-hero--light) .btn--ghost { border-color: #fff; color: #fff; background: transparent; }

/* Modern Soda conversion pilot (30 Sept) */
.ms-hero-note { margin-top: 18px; }
.ms-proof { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; align-items: stretch; }
.ms-proof li { border-top: 3px solid var(--yellow); padding-top: 14px; }
.ms-proof strong { display: block; font-size: 1.7rem; line-height: 1.1; }
.ms-proof span { color: #555; font-size: .92rem; }
.ms-proof .ms-logos { border-top-style: dashed; border-top-color: var(--ink); display: flex; align-items: center; }
.ms-get { display: grid; grid-template-columns: 1.15fr .85fr; gap: 56px; align-items: start; }
.ms-get h2 { margin: 8px 0 28px; }
.ms-benefits { list-style: none; margin: 0; padding: 0; display: grid; gap: 22px; }
.ms-benefits li { display: grid; grid-template-columns: 40px 1fr; gap: 14px; }
.ms-benefits li > svg { width: 40px; height: 40px; padding: 9px; border-radius: 50%; background: var(--yellow); }
.ms-benefits strong { font-size: 1.1rem; }
.ms-benefits p { margin: 4px 0 0; color: #444; }
.ms-spec { background: var(--cream); border-radius: 22px; padding: 28px 28px 30px; position: sticky; top: 110px; }
.ms-spec h3 { margin: 0 0 14px; font-size: 1.25rem; }
.ms-spec dl { margin: 0 0 22px; }
.ms-spec dl > div { display: grid; grid-template-columns: 42% 1fr; gap: 12px; padding: 11px 0; border-bottom: 1px solid #ddd8cc; font-size: .92rem; }
.ms-spec dt { font-weight: 700; }
.ms-spec dd { margin: 0; }
.ms-types { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 36px; }
.ms-type { display: flex; flex-direction: column; background: var(--white); border: 2px solid var(--ink); border-radius: 18px; padding: 22px; text-decoration: none; color: var(--ink); transition: transform .15s ease, background .15s ease; }
.ms-type:hover { transform: translateY(-3px); background: var(--yellow); }
.ms-type h3 { margin: 0 0 10px; font-size: 1.15rem; }
.ms-type p { margin: 0 0 18px; font-size: .9rem; color: #444; }
.ms-type-go { margin-top: auto; font-weight: 700; display: inline-flex; gap: 8px; align-items: center; }
.ms-proc-head h2 { margin: 0 0 12px; }
.ms-proc-head .lead { color: #d8d8d8; margin: 0 0 36px; }
.ms-proc { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; }
.ms-proc li { padding: 0 24px; border-left: 1px solid #2c2c2c; }
.ms-proc li:first-child { padding-left: 0; border-left: 0; }
.ms-proc h3 { font-size: 1.25rem; margin: 0 0 6px; }
.ms-proc-time { display: inline-block; margin-top: 8px; border: 1px solid #3a3a3a; border-radius: 99px; padding: 6px 14px; font-size: .85rem; color: #cfcfcf; }
.ms-proc-foot { margin-top: 36px; display: flex; gap: 28px; align-items: center; flex-wrap: wrap; }
#process { scroll-margin-top: 90px; }
.ms-case { display: grid; grid-template-columns: .9fr 1.1fr; gap: 48px; align-items: center; }
.ms-case .ph { aspect-ratio: 1 / 1; }
.ms-case h2 { margin: 14px 0 22px; }
.ms-case-dl { margin: 0 0 26px; }
.ms-case-dl > div { padding: 12px 0; border-top: 1px solid #e3e0d8; }
.ms-case-dl dt { font-family: var(--mono); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 6px; }
.ms-case-dl dd { margin: 0; }
.ms-close { display: grid; grid-template-columns: 280px 1fr; gap: 56px; align-items: start; }
.ms-person .ph { border-radius: 22px; }
.ms-person p { margin-top: 14px; }
.ms-close h2 { margin: 10px 0 12px; }
.ms-call { list-style: none; margin: 22px 0; padding: 0; display: grid; gap: 12px; }
.ms-call li { display: flex; gap: 12px; align-items: center; }
.ms-call svg { color: var(--yellow); flex: none; }
.ms-cal { border: 1.5px dashed var(--yellow); border-radius: 18px; padding: 36px 24px; text-align: center; margin: 8px 0 24px; }
.ms-sticky { position: fixed; right: 22px; bottom: 22px; z-index: 60; display: inline-flex; align-items: center; gap: 10px; background: var(--yellow); color: var(--ink); border: 2px solid var(--ink); border-radius: 99px; padding: 14px 22px; font-weight: 700; text-decoration: none; box-shadow: 0 8px 24px rgba(0,0,0,.18); opacity: 0; transform: translateY(16px); pointer-events: none; transition: opacity .2s ease, transform .2s ease; }
.ms-sticky.on { opacity: 1; transform: none; pointer-events: auto; }
@media (max-width: 1000px) { .ms-get, .ms-case, .ms-close { grid-template-columns: 1fr; } .ms-spec { position: static; } .ms-types { grid-template-columns: 1fr 1fr; } .ms-proc { grid-template-columns: 1fr 1fr; row-gap: 32px; } .ms-proc li:nth-child(3) { padding-left: 0; border-left: 0; } .ms-proof { grid-template-columns: 1fr 1fr; } .ms-person { max-width: 260px; } }
@media (max-width: 640px) { .ms-types, .ms-proc, .ms-proof { grid-template-columns: 1fr; } .ms-proc li { padding: 0; border-left: 0; } .ms-sticky { left: 16px; right: 16px; justify-content: center; } }
.ms-photo { aspect-ratio: 1 / 1; border: 1.5px dashed var(--yellow); border-radius: 22px; display: grid; place-items: center; text-align: center; padding: 24px; color: var(--yellow); font-family: var(--mono); font-size: .75rem; letter-spacing: .06em; }

/* Review editor (concept only) */
.gc-editing .gc-editable { outline: 1px dashed transparent; outline-offset: 3px; cursor: text; }
.gc-editing .gc-editable:hover { outline-color: #9a9a9a; }
.gc-editing .gc-editable:focus { outline: 2px solid #2f6fed; }
.gc-changed { box-shadow: 0 0 0 3px rgba(251,228,5,.9); background-color: rgba(251,228,5,.18); }
.gc-bar { position: fixed; left: 16px; bottom: 16px; z-index: 200; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; background: #111; color: #fff; padding: 10px 12px; border-radius: 14px; font: 500 .85rem/1.2 var(--font); box-shadow: 0 10px 30px rgba(0,0,0,.3); max-width: calc(100vw - 32px); }
.gc-bar strong { color: var(--yellow); margin-right: 4px; }
.gc-count { color: #bbb; margin-right: 6px; }
.gc-bar button { font: 600 .8rem/1 var(--font); background: #2a2a2a; color: #fff; border: 1px solid #444; border-radius: 99px; padding: 8px 12px; cursor: pointer; }
.gc-bar button:hover { background: var(--yellow); color: #111; }

/* Blog posts (live site only, not in the concept) */
.gc-article-meta { padding: 0; justify-content: flex-start; gap: 16px; margin: 28px 0 18px; }
.gc-article-cover { aspect-ratio: 16 / 9; }
.gc-article { max-width: 760px; font-size: 1.15rem; line-height: 1.7; }
.gc-article > * + * { margin-top: 1.1em; }
.gc-article h2 { font-size: clamp(1.5rem, 2.4vw, 2rem); margin-top: 1.8em; }
.gc-article h3 { font-size: 1.35rem; margin-top: 1.6em; }
.gc-article h4 { font-size: 1.1rem; margin-top: 1.4em; }
.gc-article ul, .gc-article ol { padding-left: 1.4em; }
.gc-article li + li { margin-top: .4em; }
.gc-article a { text-decoration: underline; text-decoration-color: var(--yellow); text-decoration-thickness: 3px; text-underline-offset: 3px; }
.gc-article blockquote { border-left: 4px solid var(--yellow); padding-left: 20px; font-size: 1.2rem; }
.gc-article img { width: 100%; height: auto; border-radius: var(--radius-sm); }
.gc-article .gc-figure { margin: 28px 0; }
.gc-article .gc-figure figcaption { margin-top: 10px; font-size: .9rem; color: var(--muted); }
.gc-article iframe { width: 100%; aspect-ratio: 16 / 9; height: auto; border: 0; border-radius: var(--radius-sm); }

/* Persona pages: numbered benefit cards and the at-a-glance fact sheet */
.benefit-grid { display: grid; gap: 16px; grid-template-columns: repeat(2, 1fr); }
.benefit-grid--3 { grid-template-columns: repeat(3, 1fr); }
.benefit-grid--4 { grid-template-columns: repeat(4, 1fr); }
.benefit-card { position: relative; background: var(--white); border: 2px solid var(--ink); border-radius: var(--radius); padding: 28px 24px 30px; display: flex; flex-direction: column; transition: transform .18s ease, box-shadow .18s ease; }
.benefit-card:hover { transform: translate(-3px, -3px); box-shadow: 6px 6px 0 var(--ink); }
.benefit-card--yellow { background: var(--yellow); }
.benefit-num { font-family: var(--mono); font-size: .85rem; font-weight: 500; letter-spacing: .08em; display: inline-grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: var(--yellow); border: 2px solid var(--ink); margin-bottom: 28px; }
.benefit-card--yellow .benefit-num { background: var(--white); }
.benefit-card h3 { font-size: clamp(1.15rem, 1.6vw, 1.35rem); line-height: 1.25; margin-bottom: 12px; }
.benefit-card p { color: var(--muted); font-size: .97rem; }
.benefit-card--yellow p { color: var(--ink); }
@media (max-width: 1100px) { .benefit-grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 860px) { .benefit-grid--3 { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .benefit-grid, .benefit-grid--4 { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .benefit-card, .benefit-card:hover { transition: none; transform: none; } }

.fact-sheet { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 48px; background: var(--white); border: 2px solid var(--ink); border-radius: var(--radius); padding: 8px clamp(24px, 3.5vw, 44px) 16px; margin: 0; }
.fact { display: grid; grid-template-columns: 170px 1fr; gap: 20px; align-items: baseline; padding: 22px 0; border-bottom: 1px solid var(--line-soft); }
.fact:nth-last-child(-n+2):nth-child(odd), .fact:last-child { border-bottom: 0; }
.fact dt { justify-self: start; font-family: var(--mono); font-size: .72rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; background: var(--yellow); padding: 6px 10px; border-radius: 99px; line-height: 1.3; }
.fact dd { margin: 0; font-size: 1.02rem; line-height: 1.5; color: var(--ink); }
@media (max-width: 900px) { .fact-sheet { grid-template-columns: 1fr; } .fact:nth-last-child(-n+2):nth-child(odd) { border-bottom: 1px solid var(--line-soft); } .fact:last-child { border-bottom: 0; } }
@media (max-width: 520px) { .fact { grid-template-columns: 1fr; gap: 10px; } }

/* Persona pages: challenges as separate tiles, easier to scan than one long list */
.challenge-tiles { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 0; }
.challenge-tiles li { position: relative; background: var(--cream); border-radius: var(--radius-sm); padding: 52px 22px 24px; font-size: 1.02rem; line-height: 1.45; font-weight: 500; }
.challenge-tiles li::before { content: ""; position: absolute; top: 22px; left: 22px; width: 18px; height: 18px; border-radius: 50%; background: var(--yellow); box-shadow: 0 0 0 2px var(--ink); }
@media (max-width: 960px) { .challenge-tiles { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .challenge-tiles { grid-template-columns: 1fr; } .challenge-tiles li { padding: 20px 20px 20px 52px; } .challenge-tiles li::before { top: 22px; left: 20px; } }

/* Organic Ginger Juice page */
.hero-note { margin-top: 16px; color: var(--muted); }
.gj-intro .h-block { margin-bottom: 0; }
.gj-recipes-head { margin-top: 56px; padding-top: 32px; border-top: 1.5px solid var(--ink); }
.gj-recipes-head h3 { font-size: clamp(1.3rem, 2vw, 1.6rem); margin: 0; }
.gj-recipes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 24px; align-items: stretch; }
.gj-recipes .check-card { border-top: 6px solid var(--yellow); }
.gj-recipes .check-card .tag { align-self: flex-start; margin-bottom: 14px; }
.gj-recipes .check-card strong::before { display: none; }
.gj-recipes .check-card { display: flex; flex-direction: column; }
.gj-recipes .check-card p { flex: 1; margin-bottom: 16px; }
.gj-recipes .todo { align-self: flex-start; }
.gj-recipes .check-card strong { align-items: flex-start; }
.gj-recipes .check-card strong::before { margin-top: .4em; }
.gj-make-foot { display: flex; align-items: center; justify-content: space-between; gap: 24px 40px; margin-top: 32px; flex-wrap: wrap; }
.gj-make-foot p { max-width: 560px; margin: 0; color: var(--muted); }
.gj-why .h-block { margin-bottom: 24px; }
.gj-why .lead-list li:last-child { border-bottom: 0; padding-bottom: 0; }
.gj-spec .fact-sheet { grid-template-columns: 1fr; }
.gj-spec .fact { align-items: start; }
.gj-spec .fact dt { margin-top: 2px; }
.gj-spec .ms-spec { top: 120px; }
.gj-spec .fact-sheet .fact { border-bottom: 1px solid var(--line-soft); }
.gj-spec .fact-sheet .fact:last-child { border-bottom: 0; }
.gj-spec .ms-spec .btn-row { margin-top: 8px; }
@media (max-width: 1100px) { .gj-recipes { grid-template-columns: 1fr 1fr; } }
@media (max-width: 860px) { .gj-proof, .gj-recipes { grid-template-columns: 1fr; } .gj-spec .ms-spec { position: static; } .gj-why > .ph { order: 2; } }
/* Benefit cards keep ink text when they sit on an ink section */
.benefit-card, .benefit-card h3, .benefit-card .benefit-num { color: var(--ink); }
.section--ink .benefit-card p { color: var(--muted); }
.section--ink .benefit-card--yellow p { color: var(--ink); }
.section--ink .benefit-card .todo { background: #fffbd1; color: var(--ink); border-color: var(--ink); }

/* Category pages: three drink types sit in three columns */
.ms-types--3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 1000px) { .ms-types--3 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .ms-types--3 { grid-template-columns: 1fr; } }

/* Call close without a person (Luke, 21 Oct): one column */
.ms-close--solo { grid-template-columns: 1fr; max-width: 820px; }

/* Case studies: text and image start level, smaller headline (Luke, 22 Oct) */
.ms-case { align-items: start; }
.ms-case h2 { font-size: clamp(1.6rem, 2.4vw, 2.2rem); line-height: 1.12; }
.ms-case .btn-row { flex-wrap: wrap; row-gap: 14px; }

/* Ingredients: What makes our bases different (Luke, 22 Oct) */
.diff { display: grid; grid-template-columns: .9fr 1.1fr; gap: 56px; align-items: center; }
.diff .lead { color: #d8d8d8; }
.diff-certs { list-style: none; padding: 0; margin: 28px 0 0; display: flex; flex-wrap: wrap; gap: 10px; }
.diff-certs li { font-family: var(--mono); font-size: .8rem; letter-spacing: .06em; text-transform: uppercase; background: var(--yellow); color: var(--ink); border-radius: 999px; padding: 8px 14px; }
.diff-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.diff-card { background: var(--ink); color: var(--white); border: 2px solid var(--white); border-radius: var(--radius); padding: 28px 26px 30px; transition: border-color .18s ease, transform .18s ease; }
.diff-card:hover { border-color: var(--yellow); transform: translateY(-3px); }
.diff-icon { display: inline-grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--yellow); color: var(--ink); margin-bottom: 26px; }
.diff-icon svg { width: 24px; height: 24px; }
.diff-num { display: block; font-family: var(--mono); font-size: .85rem; letter-spacing: .08em; color: var(--white); margin-bottom: 12px; }
.diff-card h3 { color: var(--white); font-size: clamp(1.1rem, 1.5vw, 1.3rem); line-height: 1.25; margin-bottom: 10px; }
.diff-card p { color: #d8d8d8; font-size: .97rem; margin: 0; }
@media (max-width: 1000px) { .diff { grid-template-columns: 1fr; gap: 36px; } }
@media (max-width: 560px) { .diff-grid { grid-template-columns: 1fr; } }

/* Ingredients: category photo cards (Luke, 22 Oct) */
.catcs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.catc { display: flex; flex-direction: column; background: var(--white); border: 2px solid var(--ink); border-radius: var(--radius); overflow: hidden; text-decoration: none; color: var(--ink); transition: transform .18s ease, box-shadow .18s ease; }
.catc:hover { transform: translate(-3px, -3px); box-shadow: 6px 6px 0 var(--ink); }
.catc-img { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--c); border-bottom: 8px solid var(--c); }
.catc-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s ease; }
.catc:hover .catc-img img { transform: scale(1.05); }
.catc-body { display: flex; flex-direction: column; gap: 8px; padding: 20px 22px 22px; flex: 1; }
.catc-body strong { font-size: 1.3rem; line-height: 1.2; }
.catc-hook { color: var(--muted); font-size: .97rem; }
.catc-go { margin-top: auto; padding-top: 10px; display: inline-flex; align-items: center; gap: 8px; font-weight: 700; }
.catc-go svg { transition: transform .18s ease; }
.catc:hover .catc-go svg { transform: translateX(4px); }
@media (max-width: 1000px) { .catcs { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .catcs { grid-template-columns: 1fr; } }

/* Drink type cards: brand icon in a yellow circle (Luke, 22 Oct) */
.ms-type-ico { display: inline-grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--yellow); color: var(--ink); margin-bottom: 18px; transition: background .15s ease; }
.ms-type:hover .ms-type-ico { background: var(--white); }

/* Fix a Problem: alternating problem sections with photo, proof stat and a small visual (Luke, 22 Oct) */
.fx { display: grid; grid-template-columns: 1.05fr .95fr; gap: 64px; align-items: start; }
.fx--flip .fx-text { order: 2; }
.fx-media { display: flex; flex-direction: column; gap: 20px; position: sticky; top: 110px; }
.fx-photo { display: flex; flex-direction: column; gap: 20px; }
.fx-photo .ph { aspect-ratio: 4 / 3; border-radius: var(--radius); }
.fx-stat { position: static; background: var(--white); border: 2px solid var(--ink); border-radius: var(--radius); padding: 18px 22px; }
.fx-stat strong { display: block; font-size: clamp(1.35rem, 2.1vw, 1.8rem); line-height: 1.12; letter-spacing: -.01em; margin-bottom: 8px; }
.fx-stat p { margin: 0 0 12px; font-size: .95rem; color: var(--muted); }
.fx-stat--inline { position: static; background: var(--ink); border-color: var(--white); color: var(--white); }
.fx-stat--inline p { color: #d8d8d8; }
.fx-comp { display: grid; grid-template-columns: 1.3fr .7fr; gap: 48px; align-items: end; margin-bottom: 8px; }
.fx-visual { background: var(--white); border: 2px solid var(--ink); border-radius: var(--radius); padding: 20px 22px; }
.section--cream .fx-visual { background: var(--white); }
.fx-vlabel { display: block; font-family: var(--mono); font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 14px; }
.fx-compare { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.fx-compare em, .fx-time em, .fx-meters em { font-style: normal; font-size: .85rem; color: var(--muted); }
.fx-bars { display: flex; align-items: flex-end; gap: 6px; height: 70px; margin-bottom: 8px; border-bottom: 2px solid var(--ink); }
.fx-bars i { flex: 1; background: var(--ink); border-radius: 4px 4px 0 0; }
.fx-compare > div:last-child .fx-bars i { background: var(--yellow); box-shadow: inset 0 0 0 2px var(--ink); }
.fx-time { display: grid; gap: 12px; }
.fx-time b { display: block; margin-top: 4px; background: var(--ink); color: var(--white); border-radius: 999px; padding: 6px 12px; font-size: .85rem; white-space: nowrap; }
.fx-time b.on { background: var(--yellow); color: var(--ink); border: 2px solid var(--ink); min-width: 70px; }
.fx-chips { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.fx-chips li { border: 2px solid var(--ink); border-radius: 999px; padding: 6px 12px; font-size: .88rem; font-weight: 600; text-decoration: line-through; text-decoration-thickness: 2px; }
.fx-chips--on li { text-decoration: none; background: var(--yellow); }
.fx-vnote { margin: 12px 0 0; font-size: .9rem; color: var(--muted); }
.fx-meters { display: grid; gap: 10px; }
.fx-meters > div { display: grid; grid-template-columns: 70px 1fr; align-items: center; gap: 12px; }
.fx-meters span { display: block; height: 14px; border: 2px solid var(--ink); border-radius: 999px; overflow: hidden; }
.fx-meters i { display: block; height: 100%; background: var(--ink); }
.fx-meters i.on { background: var(--yellow); }
@media (prefers-reduced-motion: no-preference) {
  .fx-media { animation: fx-in linear both; animation-timeline: view(); animation-range: entry 0% entry 60%; }
  @keyframes fx-in { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: none; } }
}
@media (max-width: 1000px) { .fx, .fx-comp { grid-template-columns: 1fr; gap: 36px; } .fx--flip .fx-text { order: 0; } .fx-media { position: static; } }

/* Fix a Problem: capacity timeline drawn to scale (Luke, 22 Oct) */
.fx-tl { display: grid; gap: 14px; }
.fx-tl-row { display: grid; grid-template-columns: 1fr auto; column-gap: 12px; row-gap: 6px; align-items: center; }
.fx-tl-row em { grid-column: 1 / -1; font-style: normal; font-size: .85rem; color: var(--muted); }
.fx-tl-track { height: 22px; border-radius: 999px; background: repeating-linear-gradient(90deg, transparent 0 calc(100% / 6 - 2px), var(--line-soft) calc(100% / 6 - 2px) calc(100% / 6)); border: 2px solid var(--ink); overflow: hidden; }
.fx-tl-track i { display: block; height: 100%; background: var(--ink); }
.fx-tl-track i.on { background: var(--yellow); border-right: 2px solid var(--ink); min-width: 10px; }
.fx-tl-row strong { font-size: .95rem; white-space: nowrap; min-width: 112px; }
.fx-tl-weeks { display: grid; grid-template-columns: repeat(6, 1fr); margin-right: 124px; font-family: var(--mono); font-size: .7rem; color: var(--muted); }
.fx-tl-weeks span { text-align: right; }

/* Fix a Problem: "How we fix it" in black, so each section has one dark anchor (Luke, 22 Oct) */
.fx-text .prose-block { background: var(--ink); border-color: var(--ink); color: var(--white); }
.fx-text .prose-block h3 { color: var(--white); }
.fx-text .prose-block p { color: #d8d8d8; }

/* Fix a Problem: proof cards are clickable case studies, using the site's standard eyebrow and link (Luke, 22 Oct) */
a.fx-stat { display: block; text-decoration: none; color: var(--ink); transition: transform .15s ease; }
a.fx-stat:hover { transform: translateY(-3px); }
a.fx-stat .eyebrow { margin-bottom: 10px; }
a.fx-stat:hover .link { background-size: 100% 100%; }
a.fx-stat.fx-stat--inline { color: var(--white); }
a.fx-stat.fx-stat--inline:hover .link { color: var(--ink); }

/* ===== Homepage concepts from Matter, /concept-1 to /concept-3 (Luke, 27 Oct) =====
   Built in design pixels: the designer's content column is 835px in a 1440 frame and matches our 1120px
   page width, so content is zoomed by --z (1.341 on desktop). Decor uses --u (content), --gu and --du (margins). */
.cx { --z: 1; --u: 1px; --gu: .3px; --du: .72px; --cx-ink: #1d1d1b; --cx-red: var(--rust); overflow-x: clip; color: var(--cx-ink); }
@media (min-width: 900px) { .cx { --z: 0.982; --u: 0.982px; --gu: 0.300px; --du: 0.720px; } }
@media (min-width: 1000px) { .cx { --z: 1.102; --u: 1.102px; --gu: 0.300px; --du: 0.720px; } }
@media (min-width: 1100px) { .cx { --z: 1.222; --u: 1.222px; --gu: 0.300px; --du: 0.720px; } }
@media (min-width: 1200px) { .cx { --z: 1.341; --u: 1.341px; --gu: 0.300px; --du: 0.720px; } }
@media (min-width: 1366px) { .cx { --gu: 0.410px; --du: 0.720px; } }
@media (min-width: 1440px) { .cx { --gu: 0.533px; --du: 0.907px; } }
@media (min-width: 1536px) { .cx { --gu: 0.693px; --du: 1.179px; } }
@media (min-width: 1680px) { .cx { --gu: 0.933px; --du: 1.341px; } }
@media (min-width: 1800px) { .cx { --gu: 1.133px; --du: 1.341px; } }
@media (min-width: 1920px) { .cx { --gu: 1.333px; --du: 1.341px; } }
@media (min-width: 2080px) { .cx { --gu: 1.341px; --du: 1.341px; } }
.cx-sec { position: relative; padding: calc(66 * var(--u)) 0; box-sizing: border-box; }
.cx-wrap { position: relative; z-index: 2; max-width: 835px; margin: 0 auto; zoom: var(--z); }
.cx h1 { font-size: 50px; line-height: .99; letter-spacing: -.015em; }
.cx h2 { font-size: 27px; line-height: 1.08; letter-spacing: -.01em; margin-bottom: 26px; }
.cx p { font-size: 14px; line-height: 1.38; }
.cx-fl { position: absolute; height: auto; pointer-events: none; filter: drop-shadow(0 12px 14px rgba(0,0,0,.16)); }
.cx-fl--main, .cx-fl--flat { filter: none; }
.cx-ring { position: absolute; border-radius: 50%; border-style: solid; border-color: var(--yellow); box-sizing: border-box; pointer-events: none; z-index: 1; }
.cx-mob { display: none; }
.cx-tri { width: 7px; height: 9px; flex: none; }
.cx-btn { display: inline-flex; align-items: center; gap: 7px; background: var(--yellow); color: var(--cx-ink); font-weight: 800; font-size: 11px; padding: 7px 11px; text-decoration: none; transition: transform .15s ease; }
.cx-btn:hover { transform: translateY(-2px); }
.cx-btn--ink { background: var(--cx-ink); color: var(--yellow); }
.cx-link { display: inline-flex; align-items: center; gap: 6px; font-weight: 800; font-size: 13px; color: inherit; text-decoration: none; border-bottom: 3px solid var(--yellow); padding-bottom: 2px; }
.cx-rule { display: block; width: 26px; height: 2px; background: currentColor; margin: 8px 0 10px; }

/* Ticker */
.cx-ticker { position: relative; z-index: 2; background: var(--yellow); overflow: hidden; white-space: nowrap; padding: calc(13 * var(--u)) 0; font-size: calc(19 * var(--u)); }
.cx-ticker-track { display: inline-flex; animation: cx-tick 40s linear infinite; }
.cx-ticker b { font-weight: 800; padding: 0 .8em; }
.cx-ticker i { font-style: normal; font-weight: 800; }
@keyframes cx-tick { to { transform: translateX(-33.333%); } }
@media (prefers-reduced-motion: reduce) { .cx-ticker-track { animation: none; } }

/* Hero */
.cx-hero { padding-top: calc(56 * var(--u)); }
.cx-hero-text { max-width: 330px; }
.cx-hero-text p { margin: 22px 0 26px; max-width: 320px; }

/* Icon rows */
.cx-icons { display: grid; gap: 14px 6px; text-align: center; }
.cx-icons--8 { grid-template-columns: repeat(8, 1fr); }
.cx-icons--5 { grid-template-columns: repeat(5, 1fr); }
.cx-ico { display: flex; flex-direction: column; align-items: center; gap: 8px; text-decoration: none; color: inherit; font-weight: 800; font-size: 11px; line-height: 1.12; }
.cx-ico img { width: 75px; height: 75px; transition: transform .15s ease; }
.cx-icons--5 .cx-ico img { width: 94px; height: 94px; }
.cx-icons--5 .cx-ico { font-size: 13.5px; }
a.cx-ico:hover img { transform: translateY(-3px); }
.cx-icons--sm .cx-ico img { width: 68px; height: 68px; }
.cx-icons--sm .cx-ico { font-size: 10px; }
.cx-note { margin: 32px 0 0; font-size: 12.5px !important; }

/* What is a base: the beaker figure is placed from the design (decor), text keeps to the left half */
.cx-what-grid { display: grid; grid-template-columns: 330px 1fr; }
.cx-what .cx-what-grid > div p { font-size: 13.5px; }
.cx-beaker { margin: 0; }

/* Routes */
.cx-route { border: 2px solid var(--cx-ink); background: var(--white); margin-bottom: 20px; }
.cx-route-bar { background: var(--cx-ink); color: var(--yellow); font-weight: 800; text-transform: uppercase; font-size: 11px; padding: 8px 18px; }
.cx-route-body { padding: 16px 18px 20px; }
.cx-route-body h3 { font-size: 20px; margin-bottom: 6px; }
.cx-route-body > p { margin: 0 0 16px; font-size: 13px; }
.cx-route .cx-btn { margin-top: 18px; }
.cx-unsure { margin: 4px 0 0; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 13px; }

/* Steps */
.cx-step-list { list-style: none; padding: 0; margin: 0 0 30px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.cx-step { position: relative; background: var(--yellow); display: flex; flex-direction: column; min-height: 326px; }
.cx-step-bar { background: var(--cx-ink); color: var(--white); font-weight: 800; text-transform: uppercase; padding: 8px 14px; font-size: 14px; }
.cx-step-body { padding: 14px 20px 18px; }
.cx-step-body h3 { font-size: 14px; line-height: 1.12; }
.cx-step-body h3::after { content: ""; display: block; width: 26px; height: 2px; background: currentColor; margin: 8px 0 10px; }
.cx-step-body p { font-size: 11.5px !important; line-height: 1.32 !important; margin: 0; }
.cx-step:not(:last-child)::after { content: ""; position: absolute; right: -10px; top: 45%; border: 10px solid transparent; border-left-color: var(--yellow); border-right: 0; z-index: 2; }
.cx-step-num { display: none; }
.cx-steps .cx-link { color: var(--white); }

/* Case studies carousel */
.cx-car { position: relative; }
.cx-car-track { display: grid; grid-auto-flow: column; grid-auto-columns: calc(50% - 9px); gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.cx-car-track::-webkit-scrollbar { display: none; }
.cx-case { scroll-snap-align: start; border: 1.5px solid var(--cx-ink); background: var(--white); color: var(--cx-ink); text-decoration: none; display: flex; flex-direction: column; }
.cx-case-img { display: block; aspect-ratio: 16 / 9; overflow: hidden; }
.cx-case-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s ease; }
.cx-case:hover .cx-case-img img { transform: scale(1.04); }
.cx-case-tag { background: var(--yellow); font-weight: 800; font-size: 10px; padding: 6px 12px; }
.cx-case-body { display: flex; flex-direction: column; padding: 12px 14px 14px; flex: 1; }
.cx-case-body strong { font-size: 14px; line-height: 1.18; }
.cx-case-body > span:not(.cx-link) { font-size: 11.5px; line-height: 1.35; margin-bottom: 12px; }
.cx-case-body .cx-link { margin-top: auto; align-self: flex-start; font-size: 11px; }
.cx-car-btn { position: absolute; top: 58%; width: 28px; height: 28px; border-radius: 50%; border: 1.5px solid var(--cx-ink); background: var(--white); display: grid; place-items: center; cursor: pointer; z-index: 3; color: var(--cx-ink); padding: 0; }
.cx-car-prev { left: -46px; } .cx-car-prev .cx-tri { transform: rotate(180deg); }
.cx-car-next { right: -46px; }
.cx--2 .cx-car-btn { background: var(--yellow); border-color: var(--yellow); }
.cx-pips { display: flex; justify-content: center; gap: 5px; margin-top: 14px; }
.cx-pips i { width: 7px; height: 7px; border-radius: 99px; border: 1.2px solid var(--cx-ink); }
.cx-pips i.on { width: 20px; background: var(--cx-ink); }

/* Map */
.cx-map-grid { display: grid; grid-template-columns: 1fr 176px; gap: 10px; align-items: stretch; }
.cx-map-panel { margin: 0; padding: 40px 30px 24px; display: flex; flex-direction: column; justify-content: space-between; gap: 18px; }
.cx-map-panel img { width: 100%; height: auto; display: block; }
.cx-legend { display: grid; gap: 8px; font-weight: 800; font-size: 11.5px; }
.cx-legend span { display: flex; align-items: center; gap: 10px; }
.cx-legend i { width: 14px; height: 14px; border-radius: 50%; }
.cx-facts { display: grid; gap: 10px; }
.cx-fact { position: relative; background: var(--yellow); color: var(--cx-ink); padding: 12px 14px; }
.cx-fact h3 { font-size: 13px; }
.cx-fact p { margin: 0 0 5px; font-size: 10.5px !important; line-height: 1.32 !important; }
.cx-map--side .cx-fact::before { content: ""; position: absolute; left: -10px; top: 22px; border: 10px solid transparent; border-right-color: var(--yellow); border-left: 0; }
.cx-map--below .cx-map-grid { grid-template-columns: 1fr; }
.cx-map--below .cx-facts { grid-template-columns: 1.3fr 1.3fr 1fr; }
.cx-map--below .cx-fact { background: var(--cx-ink); color: var(--white); border-bottom: 5px solid var(--yellow); }
.cx-map--below .cx-fact .cx-rule { background: var(--yellow); }
.cx-map--below .cx-map-panel { background: var(--cx-ink); color: var(--white); padding: 34px 40px 26px; }

/* Retailer logos */
.cx-trust-bar { background: var(--yellow); color: var(--cx-ink); font-size: 16px; padding: 6px 12px; margin: 32px 0 22px; }
.cx-logos { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(6, 1fr); gap: 22px 26px; align-items: center; }
.cx-logos img { width: 100%; max-height: 52px; object-fit: contain; filter: brightness(0) invert(1); }
.cx--3 .cx-logos img { filter: brightness(0); }
.cx-trust { background: var(--cx-ink); color: var(--white); }

/* Certificates */
.cx-certs p { font-size: 12.5px !important; }
.cx-cert-row { list-style: none; padding: 0; margin: 24px 0; display: grid; grid-template-columns: repeat(6, 1fr); gap: 20px; align-items: center; }
.cx-cert-row img { width: 100%; max-height: 56px; object-fit: contain; }

/* Guide (reuses the site's download form) */
.cx-guide .guide { background: none; padding: 0; border: 0; box-shadow: none; grid-template-columns: 1fr 1fr; gap: 30px; align-items: center; }
.cx-guide .guide .eyebrow { display: none; }
.cx-guide .guide h3 { font-size: 12.5px; line-height: 1.3; margin-bottom: 10px; }
.cx-guide .guide > div > p:not(.small) { display: none; }
.cx-guide .guide .checks li { font-size: 12px; }
.cx-guide .guide-img { width: 112%; max-width: none; margin-left: -8%; filter: drop-shadow(0 16px 16px rgba(0,0,0,.22)); }
.cx-guide .guide .btn { border-radius: 0; background: var(--cx-ink); color: var(--yellow); border: 0; padding: 7px 12px; font-size: 11px; font-weight: 800; }

/* FAQ */
.cx-faq .faq-list { border-top: 1.5px solid var(--cx-ink); }
.cx-faq .faq { border-bottom: 1px dotted var(--cx-ink); }
.cx-faq .faq summary { font-size: 12px; padding: 14px 0; }
.cx-faq .pm { background: var(--yellow); }

/* Section colours per concept (sampled from the designs) */
.cx--1 .cx-what, .cx--2 .cx-what { background: rgb(0,180,233); }
.cx--1 .cx-who, .cx--2 .cx-who, .cx--3 .cx-blend, .cx--3 .cx-guide { background: rgb(243,148,0); }
.cx--1 .cx-steps { background: var(--cx-red); }
.cx--1 .cx-map { background: var(--cx-ink); color: var(--white); }
.cx--1 .cx-map-panel { border: 2px solid var(--yellow); }
.cx--1 .cx-legend { color: var(--white); }
.cx--1 .cx-guide { background: var(--yellow); }
.cx--2 .cx-route { background: var(--yellow); border-color: var(--yellow); }
.cx--2 .cx-steps { background: var(--teal); }
.cx--2 .cx-step { background: var(--cx-ink); color: var(--white); padding-bottom: 34px; }
.cx--2 .cx-step-bar { display: none; }
.cx--2 .cx-step-body { padding-top: 18px; }
.cx--2 .cx-step-num { display: block; position: absolute; left: 0; right: 0; bottom: 0; text-align: center; border-top: 5px solid var(--yellow); }
.cx--2 .cx-step-num b { position: relative; top: -15px; display: inline-block; background: var(--yellow); color: var(--cx-ink); border-radius: 50%; width: 26px; height: 26px; line-height: 26px; font-size: 10px; }
.cx--2 .cx-step:not(:last-child)::after { border-left-color: var(--cx-ink); }
.cx--2 .cx-map { background: rgb(198,212,2); }
.cx--2 .cx-guide { background: var(--pink); }
.cx--3 .cx-what { background: rgb(200,212,0); }
.cx--3 .cx-who { background: rgb(0,180,233); }
.cx--3 .cx-steps { background: var(--pink); }
.cx--3 .cx-map { background: var(--teal); color: var(--white); }
.cx--3 .cx-map-panel { background: var(--yellow); color: var(--cx-ink); }

/* Mobile: the designer supplied desktop only, so this layout is ours */
@media (max-width: 899px) {
  .cx-wrap { zoom: 1; padding: 0 var(--gutter); }
  .cx-sec { padding: 56px 0; min-height: 0 !important; }
  .cx-fl, .cx-ring { display: none; }
  .cx-mob { display: block; width: 100%; height: auto; margin-top: 28px; }
  .cx h1 { font-size: clamp(2.3rem, 10vw, 3rem); }
  .cx h2 { font-size: 1.6rem; }
  .cx p { font-size: 1rem; }
  .cx-hero-text, .cx-hero-text p { max-width: none; }
  .cx-btn, .cx-link { font-size: .95rem; }
  .cx-what-grid { grid-template-columns: 1fr; }
  .cx-icons--8 { grid-template-columns: repeat(4, 1fr); }
  .cx-icons--5 { grid-template-columns: repeat(3, 1fr); }
  .cx-ico, .cx-icons--sm .cx-ico { font-size: .8rem; }
  .cx-step-list { grid-template-columns: 1fr 1fr; row-gap: 26px; }
  .cx-step { min-height: 0; }
  .cx-step::after { display: none; }
  .cx-step-body p { font-size: .9rem !important; }
  .cx-car-track { grid-auto-columns: 86%; }
  .cx-car-btn { display: none; }
  .cx-map-grid, .cx-map--below .cx-facts { grid-template-columns: 1fr; }
  .cx-map--side .cx-fact::before { display: none; }
  .cx-fact p { font-size: .85rem !important; }
  .cx-logos, .cx-cert-row { grid-template-columns: repeat(3, 1fr); }
  .cx-guide .guide { grid-template-columns: 1fr; }
  .cx-guide .guide-img { width: 100%; margin-left: 0; }
  .cx-faq .faq summary { font-size: .95rem; }
}
@media (max-width: 560px) {
  .cx-icons--8, .cx-icons--5 { grid-template-columns: repeat(2, 1fr); }
  .cx-step-list { grid-template-columns: 1fr; }
}
/* Concepts: type sizes matched to the designs */
.cx p { font-size: 13.5px; font-weight: 500; }
.cx-hero-text p { font-size: 13.5px; }
.cx-ico span { max-width: 74px; }
.cx-icons--5 .cx-ico span { max-width: 108px; }
.cx-icons--sm { padding: 0 8px; }
.cx-icons--sm .cx-ico { font-size: 11px; }
.cx-icons--5 .cx-ico { font-size: 14px; }
.cx-note { font-size: 13px !important; }
.cx-route-body > p { font-size: 14px; }
.cx-step-body h3 { font-size: 15px; }
.cx-step-body p { font-size: 12.5px !important; font-weight: 700; line-height: 1.3 !important; }
.cx-map-grid { grid-template-columns: 1fr 190px; }
.cx-map-panel { padding: 30px 26px 26px; }
.cx-fact h3 { font-size: 14px; }
.cx-fact p { font-size: 11.5px !important; }
.cx-legend { font-size: 12.5px; }
.cx-logos img { max-height: 70px; }
.cx-trust-bar { font-size: 17px; }
.cx-guide .guide { grid-template-columns: 1.15fr .85fr; }
.cx-guide .guide h3 { font-size: 13px; }
.cx-guide .guide .checks li { font-size: 13px; }
.cx-guide .guide .btn { background: var(--yellow); color: var(--cx-ink); }
.cx--1 .cx-guide .guide .btn { background: var(--cx-ink); color: var(--yellow); }
.cx-case-body strong { font-size: 15px; }
.cx-case-body > span:not(.cx-link) { font-size: 12.5px; }
.cx-faq .faq summary { font-size: 13px; }
.cx-certs p { font-size: 13.5px !important; }
.cx-map--below .cx-map-panel img { max-width: 600px; margin: 0 auto; }
.cx-map--below .cx-map-panel { padding: 22px 30px 18px; }
.cx-cert-row img { max-height: 78px; }

/* ===== Homepage concept 4 (Luke and Denis, 28 Oct): the homepage, with the concepts' best ideas =====
   Round = press it (buttons, arrow buttons). Square with a black bar = information. */
.c4-rel { position: relative; overflow-x: clip; }
.c4-rel > .wrap { position: relative; }
.c4-bar { background: var(--ink); color: var(--yellow); font-family: var(--mono); font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; padding: 10px 20px; }
.c4 .hero .rotator { display: none; }

/* Ticker */
.c4-ticker { display: flex; align-items: stretch; background: var(--yellow); border-block: 2px solid var(--ink); overflow: hidden; }
.c4-ticker-lab { flex: none; display: flex; align-items: center; background: var(--ink); color: var(--yellow); font-family: var(--mono); font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; padding: 0 22px; position: relative; z-index: 2; }
.c4-ticker-win { overflow: hidden; flex: 1; }
.c4-ticker-track { display: inline-flex; white-space: nowrap; padding: 16px 0; animation: c4-tick 45s linear infinite; }
.c4-ticker:hover .c4-ticker-track { animation-play-state: paused; }
.c4-ticker b { font-size: clamp(1.1rem, 1.6vw, 1.4rem); font-weight: 800; padding: 0 22px; }
.c4-ticker i { display: inline-block; width: 8px; height: 8px; background: var(--ink); align-self: center; }
@keyframes c4-tick { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .c4-ticker-track { animation: none; } }

/* What is a base: sky blue */
.c4-sky { background: #00b4e9; }
.c4-sky .lead { color: var(--ink); }
.c4-beaker { margin: 0; }
.c4-beaker img { width: 100%; height: auto; display: block; }

/* Routes */
.c4-routes { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: stretch; }
.c4-route { border: 2px solid var(--ink); background: var(--white); display: flex; flex-direction: column; }
.c4-route-body { padding: 26px 26px 30px; display: flex; flex-direction: column; flex: 1; }
.c4-route-body h3 { font-size: clamp(1.5rem, 2.2vw, 1.9rem); margin-bottom: 8px; }
.c4-route-body > p { margin: 0 0 22px; color: var(--muted); }
.c4-opts { list-style: none; padding: 0; margin: 0 0 26px; display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; border-top: 1px solid var(--line-soft); }
.c4-opt { display: grid; grid-template-columns: 40px 1fr auto; align-items: center; gap: 12px; padding: 10px 4px; border-bottom: 1px solid var(--line-soft); text-decoration: none; color: var(--ink); font-weight: 700; font-size: .98rem; transition: background .15s ease; }
.c4-opt img { width: 40px; height: 40px; }
.c4-opt svg { opacity: .35; transition: transform .15s ease, opacity .15s ease; }
.c4-opt:hover, .c4-opt:focus-visible { background: var(--yellow); }
.c4-opt:hover svg, .c4-opt:focus-visible svg { opacity: 1; transform: translateX(3px); }
.c4-route .btn { margin-top: auto; align-self: flex-start; }

/* Who: orange */
.c4-orange { background: var(--orange); }
.c4-who { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; text-align: center; }
.c4-who li { display: flex; flex-direction: column; align-items: center; gap: 14px; font-weight: 800; font-size: 1.05rem; }
.c4-who img { width: 96px; height: 96px; }

/* Steps */
.c4-steps { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.c4-steps li { position: relative; background: var(--yellow); color: var(--ink); display: flex; flex-direction: column; }
.c4-steps .c4-bar { background: var(--ink); color: var(--white); border: 2px solid var(--yellow); border-bottom: 0; }
.c4-steps li > div { padding: 18px 20px 24px; }
.c4-steps h3 { font-size: 1.15rem; margin-bottom: 10px; }
.c4-steps p { margin: 0; font-size: .95rem; }
.c4-steps li:not(:last-child)::after { content: ""; position: absolute; right: -16px; top: 50%; transform: translateY(-50%); border: 10px solid transparent; border-left: 12px solid var(--yellow); z-index: 2; }

/* Cases */
.c4-case { flex: 0 0 calc((100% - 24px) / 2); scroll-snap-align: start; border: 2px solid var(--ink); background: var(--white); color: var(--ink); text-decoration: none; display: flex; flex-direction: column; }
.c4-case-img { display: block; aspect-ratio: 16 / 9; overflow: hidden; }
.c4-case-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s ease; }
.c4-case:hover .c4-case-img img { transform: scale(1.04); }
.c4-case .c4-bar { background: var(--yellow); color: var(--ink); }
.c4-case-body { display: flex; flex-direction: column; gap: 10px; padding: 20px 22px 24px; flex: 1; }
.c4-case-body strong { font-size: 1.25rem; line-height: 1.2; }
.c4-case-body > span:not(.link) { color: var(--muted); }
.c4-case-body .link { margin-top: auto; align-self: flex-start; }
.c4-case:hover .link { background-size: 100% 100%; }

/* Reach: black */
.c4-reach { display: grid; grid-template-columns: 1fr 300px; gap: 20px; align-items: stretch; }
.c4-map { margin: 0; border: 2px solid var(--yellow); padding: 40px 36px 28px; display: flex; flex-direction: column; justify-content: space-between; gap: 24px; }
.c4-map img { width: 100%; height: auto; display: block; }
.c4-map figcaption { display: flex; gap: 26px; font-weight: 700; font-size: .95rem; }
.c4-map figcaption span { display: flex; align-items: center; gap: 10px; }
.c4-map figcaption i { width: 14px; height: 14px; border-radius: 50%; }
.c4-facts { display: grid; gap: 14px; }
.c4-fact { position: relative; background: var(--yellow); color: var(--ink); padding: 20px 22px; }
.c4-fact::before { content: ""; position: absolute; left: -12px; top: 28px; border: 12px solid transparent; border-right-color: var(--yellow); border-left: 0; }
.c4-fact strong { display: block; font-size: 1.6rem; line-height: 1.05; margin-bottom: 6px; }
.c4-fact h3 { font-size: 1rem; margin-bottom: 8px; }
.c4-fact p { margin: 0; font-size: .9rem; }
.c4-trust { background: var(--yellow); color: var(--ink); font-size: clamp(1.05rem, 1.6vw, 1.3rem); padding: 10px 18px; margin: 56px 0 32px; }
.c4-logos { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(6, 1fr); gap: 30px 36px; align-items: center; }
.c4-logos img { width: 100%; max-height: 64px; object-fit: contain; filter: brightness(0) invert(1); }

/* A few cut-out ingredients from the concepts, kept to the margins on wide screens */
.c4-fruit { position: absolute; height: auto; pointer-events: none; filter: drop-shadow(0 14px 16px rgba(0,0,0,.18)); z-index: 0; }
.c4-fruit--routes { width: 190px; right: -150px; top: -40px; }
.c4-fruit--reach { width: 90px; right: -110px; top: -10px; }
.c4-fruit--certs { width: 200px; right: -170px; top: -90px; }
@media (max-width: 1500px) { .c4-fruit { display: none; } }

@media (max-width: 1000px) {
  .c4-routes, .c4-reach { grid-template-columns: 1fr; }
  .c4-steps { grid-template-columns: 1fr 1fr; }
  .c4-steps li::after { display: none; }
  .c4-fact::before { display: none; }
  .c4-case { flex-basis: 86%; }
}
@media (max-width: 640px) {
  .c4-opts { grid-template-columns: 1fr; }
  .c4-who { grid-template-columns: 1fr 1fr; }
  .c4-steps { grid-template-columns: 1fr; }
  .c4-logos { grid-template-columns: repeat(3, 1fr); }
  .c4-ticker-lab { display: none; }
  .c4-map { padding: 22px 16px; }
  .c4-map figcaption { flex-direction: column; gap: 8px; }
}
.c4 .section { padding: var(--section) 0 !important; }
.c4 .hero + .c4-ticker + .section { padding-top: var(--section); }
.c4 .guide, .c4 .cert, .c4 .c4-case, .c4 .faq-list { border-radius: 0; }
.c4 .c4-orange h2, .c4 .c4-orange p { color: var(--ink); }
/* Concept 4 round 2 (Luke, 28 Oct) */
.c4-sky .hl { background: none; font-weight: 800; }
.c4-bar, .c4-ticker-lab, .c4 .eyebrow { font-family: var(--font); font-weight: 800; letter-spacing: .02em; font-size: .85rem; }
.c4-bar { text-transform: none; }
.c4-opts { grid-template-columns: 1fr; margin-bottom: 30px; }
.c4-opt { grid-template-columns: 1fr auto; padding: 14px 6px; font-size: 1.05rem; }
.c4-yellow { background: var(--yellow); }
.c4-yellow .guide { background: none; padding: 0; }
/* Concept 4 round 3 (Luke, 28 Oct): seams, who cards, retailers section */
.c4 { overflow-x: clip; }
.c4-rel { position: relative; }
.c4 .section { z-index: auto; }
.c4-seam { position: absolute; top: 0; width: var(--w); z-index: 6; pointer-events: none; transform: translateY(-58%); }
.c4-seam--r { left: calc(50% + min(50vw, 600px) - var(--w) * .55); }
.c4-seam--l { right: calc(50% + min(50vw, 600px) - var(--w) * .55); }
.c4-seam-img { display: block; width: 100%; height: auto; filter: drop-shadow(0 16px 18px rgba(0,0,0,.2)); }
.c4-seam-cult { position: absolute; width: 38%; top: -14%; z-index: -1; }
.c4-seam--r .c4-seam-cult { left: -18%; }
.c4-seam--l .c4-seam-cult { right: -18%; }
.c4 .section > .wrap { position: relative; z-index: 2; }
@media (max-width: 1280px) { .c4-seam { --w: 150px !important; } }
@media (max-width: 900px) {
  .c4-seam { display: none; }
  .c4-seam--mob { display: block; --w: 96px !important; left: auto; right: -34px; z-index: 1; }
  .c4-seam-cult { display: none; }
}

.c4-who-h { text-align: center; font-size: clamp(1.5rem, 2.6vw, 2rem); margin-bottom: 36px; }
.c4-who { gap: 16px; text-align: left; }
.c4-who li { align-items: flex-start; gap: 8px; background: var(--white); border: 2px solid var(--ink); padding: 22px 22px 24px; }
.c4-who img { width: 64px; height: 64px; margin-bottom: 8px; }
.c4-who strong { font-size: 1.1rem; line-height: 1.2; }
.c4-who span { font-weight: 500; font-size: .95rem; color: var(--muted); }
.c4-who-note { text-align: center; margin: 32px auto 0; max-width: 60ch; color: var(--ink); }

.c4-trust { background: none; padding: 0; font-size: clamp(1.5rem, 2.6vw, 2rem); text-align: center; margin: 0 0 36px; }
.c4-logos { grid-template-columns: repeat(6, 1fr); gap: 14px; }
.c4-logos li { background: var(--white); border: 2px solid var(--ink); display: grid; place-items: center; padding: 18px; aspect-ratio: 16 / 9; }
.c4-logos img { filter: brightness(0); max-height: 46px; }
@media (max-width: 1000px) { .c4-who { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .c4-who { grid-template-columns: 1fr; } }
/* Concept 4 seams v2: compositions of ingredient + ring pair */
.c4-seam { aspect-ratio: 1 / 1; }
.c4-seam > img { position: absolute; height: auto; filter: drop-shadow(0 14px 16px rgba(0,0,0,.2)); }
.c4-ring { position: absolute; width: var(--d); height: var(--d); border-radius: 50%; border: calc(var(--d) * .3) solid var(--yellow); box-sizing: border-box; }
@media (max-width: 900px) { .c4-ring { display: none; } }

/* Ingredient library (src/gc/ingredients.ts): groups scale as one piece, rings sit in the gaps */
.ing { position: relative; width: 100%; pointer-events: none; }
.ing img { position: absolute; display: block; height: auto; max-width: none; }
.ing .ing-sh, img.ing-sh { filter: drop-shadow(6px 10px 10px rgba(0, 0, 0, .28)); }
.ing-ring { position: absolute; display: block; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle closest-side, transparent 42.5%, var(--yellow) 44%); }
.ing-at { position: absolute; z-index: 2; top: 0; width: var(--gw); transform: translateY(-18%); pointer-events: none; }
.ing-at--r { right: calc(var(--gw) * -.18); }
.ing-at--l { left: calc(var(--gw) * -.18); }
@media (max-width: 760px) { .ing-at { width: 45vw; transform: translateY(-18%); } .ing-at--r { right: -10vw; } .ing-at--l { left: -10vw; } }
/* The library page */
.il-h1 { font-size: var(--h1); line-height: 1.02; margin: 0 0 18px; }
.il-rules { margin: 28px 0 0; padding-left: 1.3em; display: grid; gap: 14px; max-width: 70ch; }
.il-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 480px), 1fr)); gap: 28px; margin-top: 32px; }
.il-card { border: 2px solid var(--ink); background: var(--white); display: grid; grid-template-columns: 3fr 2fr; }
.il-prev { padding: 12% 14%; display: flex; align-items: center; }
.il-prev--white { border-left: 2px solid var(--ink); padding: 14%; }
.il-prev--sky { background: var(--sky); } .il-prev--orange { background: var(--orange); } .il-prev--lime { background: var(--lime); }
.il-prev--teal { background: var(--teal); } .il-prev--pink { background: var(--pink); }
.il-meta { grid-column: 1 / -1; border-top: 2px solid var(--ink); padding: 18px 20px; }
.il-meta h3 { margin: 0 0 8px; } .il-meta p { margin: 4px 0; font-size: .95rem; }
.il-code code, .il-top code { background: var(--yellow); padding: 1px 6px; }
.il-rel { position: relative; }
.il-demo-a { background: var(--sky); overflow-x: clip; overflow-y: visible; padding: var(--section) 0 !important; }
.il-pieces { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 20px; margin-top: 28px; }
.il-piece { margin: 0; background: var(--white); border: 2px solid var(--ink); padding: 16px; display: grid; gap: 10px; }
.il-piece img { width: 100%; height: 110px; object-fit: contain; }
.il-piece figcaption { font-size: .85rem; }
.il-cult { background: var(--sky); }
.il-rings { display: flex; gap: 28px; align-items: center; margin: 28px 0; }
.il-lines { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 20px; }
.il-lines img { width: 100%; height: auto; }
.il-rings .ing-ring { position: static; }
@media (max-width: 760px) { .section:has(> .ing-at) { padding-top: calc(var(--section) + 22vw) !important; } }

/* Concept 4: Luke's ingredient and culture groups. Centred on the line above a section, in the side margin,
   overlapping the content column by a third at most. Phones: smaller, peeking in from the right, every other one. */
.c4-g { position: absolute; top: 0; z-index: 6; width: var(--gw); height: auto; pointer-events: none; transform: translateY(-50%); }
.c4-g--r { right: max(12px, calc(50% - 600px - var(--gw) * .6)); }
.c4-g--l { left: max(12px, calc(50% - 600px - var(--gw) * .6)); }
@media (max-width: 1279px) { .c4-g { display: none; } }
@media (max-width: 1399px) { .c4-g--wide { display: none; } }
@media (max-width: 760px) {
  .c4-g { display: none; }
}
@media (max-width: 760px) { .c4-logos { grid-template-columns: repeat(3, 1fr); } .c4-logos li { padding: 10px; } }

/* Guide block on phones and small tablets: cover on top, words underneath (Luke, 28 Oct). Placed last because
   the two-column rule above has no breakpoint and would otherwise win. */
@media (max-width: 860px) {
  .guide, .cx-guide .guide, .cx-guide .guide { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .guide-img { max-width: 360px; }
}
/* Ingredient library with Luke's groups: each preview shows the group at its real size on the site */
.il-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 520px), 1fr)); }
.il-card { grid-template-columns: 1fr 1fr; }
.il-prev, .il-prev--white { padding: 24px; min-height: 300px; display: grid; place-items: center; }
.il-g { display: block; width: var(--gw); max-width: 100%; height: auto; }

/* Concept 4, phones and tablets: a group tucked behind the bottom-right corner of a row of boxes (Luke, 29 Oct:
   only where there is breathing room, behind boxes is fine, never on text). 60% of the desktop size. */
.c4-gb { display: none; }
@media (max-width: 1279px) {
  .c4-hasgb { position: relative; }
  .c4-hasgb > :not(.c4-gb) { position: relative; z-index: 1; }
  .c4-gb { display: block; position: absolute; z-index: 0; width: calc(var(--gw) * .58); height: auto; right: -14px; pointer-events: none; filter: none !important; max-height: none !important; }
  .c4-gb--br { bottom: 0; transform: translateY(58%); }
  .c4-gb--tr { top: 0; transform: translateY(-58%); }
  /* Crosses the line into the next section: about 55% above it, 45% below, as on desktop */
  .c4-gb--seam { bottom: calc(-1 * var(--section)); transform: translateY(45%); z-index: 3; }
}
@media (min-width: 431px) and (max-width: 699px) { .c4-gb--tr { display: none; } }

/* ===== Category pages, redesign (29 Oct): homepage style (cats.ts msPage, .cv2) ===== */
.cv2 .section.cv2-tight { padding: 40px 0 !important; }
.cv2 .cat-hero { padding: clamp(56px, 7vw, 96px) 0 !important; }
.cv2-photo { overflow: hidden; border-radius: 0; }
.cv2-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.cv2 .cat-hero-img { border-radius: 0; box-shadow: none; border: 0; }
.cv2-proof { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.cv2-proof li { border: 2px solid var(--ink); background: var(--white); display: flex; flex-direction: column; }
.cv2-proof li > div { padding: 16px 20px 20px; }
.cv2-proof strong { display: block; font-size: 1.7rem; line-height: 1.1; margin-bottom: 6px; }
.cv2-proof span { color: var(--muted); font-size: .92rem; }
.cv2-spec { border: 2px solid var(--ink); background: var(--white); align-self: start; position: sticky; top: 110px; }
.cv2-spec dl { margin: 0; padding: 8px 24px; }
.cv2-spec dl > div { display: grid; grid-template-columns: 42% 1fr; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line-soft); font-size: .92rem; }
.cv2-spec dt { font-weight: 800; }
.cv2-spec dd { margin: 0; }
.cv2-spec-foot { padding: 4px 24px 24px; }
.cv2-types { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 36px; }
.cv2-types--3 { grid-template-columns: repeat(3, 1fr); }
.cv2-type { border: 2px solid var(--ink); background: var(--white); color: var(--ink); text-decoration: none; display: flex; flex-direction: column; transition: transform .2s ease, box-shadow .2s ease; }
.cv2-type > div { padding: 18px 20px 22px; display: flex; flex-direction: column; flex: 1; }
.cv2-type h3 { font-size: 1.1rem; margin: 14px 0 8px; }
.cv2-type p { color: var(--muted); font-size: .92rem; margin: 0 0 16px; }
.cv2-go { margin-top: auto; font-weight: 800; display: inline-flex; align-items: center; gap: 8px; }
.cv2-type:hover, .cv2-type:focus-visible { transform: translateY(-3px); box-shadow: 0 6px 0 var(--ink); }
@media (prefers-reduced-motion: reduce) { .cv2-type { transition: none; } .cv2-type:hover { transform: none; } }
.cv2-steps .c4-bar { font-size: .78rem; }
.cv2 .ms-proc-foot { margin-top: 32px; display: flex; gap: 20px; align-items: center; flex-wrap: wrap; }
.cv2 .ms-proc-foot .link { color: var(--white); }
.cv2-case { align-items: start; }
.cv2-case .cv2-photo { border: 2px solid var(--ink); aspect-ratio: 4 / 5; }
.cv2-case-box { border: 2px solid var(--ink); background: var(--white); }
.cv2-case-body { padding: 24px 28px 28px; }
.cv2-case-body h2 { font-size: clamp(1.5rem, 2.4vw, 2rem); margin-bottom: 16px; }
.cv2-solve { border: 2px solid var(--ink); background: var(--white); align-self: start; }
.cv2-solve > div { padding: 20px 24px 24px; }
.cv2 .prose-block, .cv2 .faq-list, .cv2 .stat, .cv2 .post-card, .cv2 .ms-cal, .cv2 .ph { border-radius: 0; }
.cv2-guide .section { background: var(--yellow); padding: var(--section) 0 !important; }
.cv2-guide .report-strip { border-radius: 0; background: none; color: var(--ink); padding: 0; }
.cv2-guide .report-strip .eyebrow, .cv2-guide .report-strip .lead { color: var(--ink) !important; }
.cv2-guide .report-strip .btn { background: var(--ink); color: var(--white); border-color: var(--ink); }
.cv2 .ms-close { border-radius: 0; }
@media (max-width: 1000px) { .cv2-types, .cv2-proof { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 860px) { .cv2-spec { position: static; } .cv2-types--3 { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .cv2-types, .cv2-proof { grid-template-columns: 1fr; } .cv2-spec dl > div { grid-template-columns: 1fr; gap: 4px; } }

@media (max-width: 1439px) { .cv2-wide { display: none !important; } }
@media (max-width: 1279px) { .cv2 .c4-gb { width: min(calc(var(--gw) * .58), 27vw); } }
@media (min-width: 431px) and (max-width: 699px) { .cv2 .c4-gb { display: none; } }

/* Category pages: crossing groups on every screen below 1440px (wider screens use the section-line groups) */
@media (min-width: 1280px) and (max-width: 1439px) {
  .cv2 .c4-hasgb { position: relative; }
  .cv2 .c4-hasgb > :not(.c4-gb) { position: relative; z-index: 1; }
  .cv2 .c4-gb { display: block; position: absolute; width: calc(var(--gw) * .8); height: auto; right: -14px; pointer-events: none; }
  .cv2 .c4-gb--seam { bottom: calc(-1 * var(--section)); transform: translateY(45%); z-index: 3; }
}
@media (max-width: 1439px) { .cv2 .c4-gb--left { right: auto !important; left: -14px; } }
@media (min-width: 600px) and (max-width: 1100px) { .cv2 .cv2-x-case { display: none !important; } }

/* ===== v2 skin (29 Oct): component-built pages in the homepage style (src/gc/redesign.ts) =====
   Square corners for information, round only for things you press, label bars instead of pills, Engram only. */
.v2 .ph, .v2 .case, .v2 .check-card, .v2 .benefit-card, .v2 .fact-sheet, .v2 .challenge-tiles li, .v2 .prose-block,
.v2 .stat, .v2 .cert, .v2 .faq-list, .v2 .post-card, .v2 .persona-card, .v2 .route-card, .v2 .tile, .v2 .guide, .v2 .report-strip { border-radius: 0 !important; }
.v2 .eyebrow, .v2 .tag, .v2 .fact dt { font-family: var(--font); }
/* Case cards: the same look as the homepage's success stories (.c4-case): black frame, picture, yellow label
   bar, then the words; the whole card is clickable (Luke, 30 Oct). */
.v2 .case { position: relative; border: 2px solid var(--ink); border-radius: 0; background: var(--white); overflow: hidden; }
.v2 .case .ph { border: 0; border-radius: 0; aspect-ratio: 16 / 9; }
.v2 .case .ph img { transition: transform .3s ease; }
.v2 .case:hover .ph img { transform: scale(1.04); }
.v2 .case-body { padding: 0 22px 24px; gap: 10px; }
.v2 .case .tag { display: block; align-self: stretch !important; margin: 0 -22px 10px; background: var(--yellow); color: var(--ink); border-radius: 0; padding: 10px 20px; font-family: var(--font); font-size: .85rem; font-weight: 800; letter-spacing: .02em; text-transform: none; }
.v2 .case-body h3 { font-size: 1.25rem; line-height: 1.2; }
.v2 .case .link::after { content: ""; position: absolute; inset: 0; }
.v2 .case:hover .link { background-size: 100% 100%; }
/* Challenges: white boxes with an ink frame */
.v2 .challenge-tiles li { background: var(--white); border: 2px solid var(--ink); }
.v2 .section--cream .challenge-tiles li, .v2 .section--ink .challenge-tiles li { background: var(--white); color: var(--ink); }
/* Check cards: ink frame */
.v2 .check-card { border: 2px solid var(--ink); }
/* Numbered benefit cards: no lift-and-shadow (off brand), a simple hover */
.v2 .benefit-card:hover { transform: none; box-shadow: none; }
/* Fact sheet: labels as small black bars */
.v2 .fact dt { background: var(--ink); color: var(--yellow); border-radius: 0; font-weight: 800; letter-spacing: .04em; font-size: .74rem; }
/* Closing band: full-width yellow, like the homepage guide */
.v2 .section--ink:has(.cta-band) { background: var(--yellow); color: var(--ink); }
.v2 .section--ink:has(.cta-band) h2, .v2 .section--ink:has(.cta-band) p { color: var(--ink); }
.v2 .section--ink:has(.cta-band) .btn { background: var(--ink); color: var(--white); border-color: var(--ink); }
/* Ingredient groups on section lines */
.v2 .section.v2-has-g { position: relative; }
.v2 .section.v2-has-g > .wrap { position: relative; z-index: 2; }
.v2-g { position: absolute; top: 0; z-index: 3; width: var(--gw); height: auto; transform: translateY(-50%); pointer-events: none; }
.v2-g--r { right: max(8px, calc(50% - 600px - var(--gw) * .5)); }
.v2-g--l { left: max(8px, calc(50% - 600px - var(--gw) * .5)); }
@media (max-width: 1279px) { .v2-g { width: calc(var(--gw) * .58); } }
@media (max-width: 760px) { .v2-g--r { right: 4px; } .v2-g--l { left: 4px; } }
/* Ingredient spots chosen per screen band by scripts/find-ingredient-spots.cjs (phone up to 1023px, laptop 1024 to 1439px, wide 1440px and up) */
@media (min-width: 1024px) { .v2-g.v2-phone { display: none; } }
@media (max-width: 1023px), (min-width: 1440px) { .v2-g.v2-laptop { display: none; } }
@media (max-width: 1439px) { .v2-g.v2-wide { display: none; } }

/* v2 colour (Luke, 29 Oct: every redesigned page follows concept 4's colour rule): one sky and one orange full
   section per page, chosen in src/gc/redesign.ts. Coloured sections always get their full top padding, as does the
   section after one. Text on them is black. */
.c4 .section.v2-c, .c4 .section.v2-c + .section { padding-top: var(--section); }
.c4 .v2-c h1, .c4 .v2-c h2, .c4 .v2-c h3, .c4 .v2-c p, .c4 .v2-c .lead, .c4 .v2-c .muted, .c4 .v2-c .eyebrow, .c4 .v2-c li { color: var(--ink); }
.c4 .v2-c .link { color: var(--ink); text-decoration-color: var(--ink); }
.c4 .v2-c .hl { background: none; font-weight: 800; }
.c4 .v2-c .check-card, .c4 .v2-c .prose-block, .c4 .v2-c .benefit, .c4 .v2-c .stat, .c4 .v2-c .tile { background: var(--white); }

/* Hero with a photo (Who We Help, base products): on phones the photo comes first, then the words, in one column. */
@media (max-width: 860px) {
  .v2 .hero--media .hero-grid { grid-template-columns: 1fr; }
  .v2 .hero--media .hero-grid > div:last-child { order: -1; }
}

/* Blog in the homepage style (29 Oct): square cards with a black label bar, latest post on sky, guides on orange. */
:is(.v2, .cv2) .post { border-radius: 0; border: 2px solid var(--ink); }
:is(.v2, .cv2) .post:hover { transform: none; box-shadow: none; background: var(--yellow); }
:is(.v2, .cv2) .post .ph { border-bottom: 2px solid var(--ink); }
:is(.v2, .cv2) .post strong { padding-top: 18px; }
:is(.v2, .cv2) .post p { flex: 1; padding-bottom: 16px; }
:is(.v2, .cv2) .post-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 0 22px 22px; }
:is(.v2, .cv2) .post-foot .date { font-size: .8rem; color: var(--muted); }
.gc-feature { display: grid; grid-template-columns: 1.15fr 1fr; border: 2px solid var(--ink); background: var(--white); color: var(--ink); text-decoration: none; margin-top: 18px; }
.gc-feature-img { display: block; aspect-ratio: 16 / 10; overflow: hidden; border-right: 2px solid var(--ink); background: var(--cream); }
.gc-feature-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gc-feature-body { display: flex; flex-direction: column; }
.gc-feature-in { display: flex; flex-direction: column; gap: 14px; padding: 24px 26px 0; flex: 1; }
.gc-feature-in strong { font-size: clamp(1.4rem, 2.3vw, 2rem); line-height: 1.15; }
.gc-feature-ex { color: var(--muted); }
.gc-feature .post-foot { padding: 0 0 24px; margin-top: auto; }
.gc-feature:hover { background: var(--yellow); }
.gc-guides { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
.gc-guides a { display: flex; flex-direction: column; height: 100%; border: 2px solid var(--ink); background: var(--white); color: var(--ink); text-decoration: none; }
.gc-guides a > span { display: flex; flex-direction: column; gap: 14px; padding: 18px; flex: 1; }
.gc-guides strong { font-size: 1.05rem; line-height: 1.25; flex: 1; }
.gc-guides a:hover { background: var(--yellow); }
@media (max-width: 1100px) { .gc-guides { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 860px) {
  .gc-feature { grid-template-columns: 1fr; }
  .gc-feature-img { border-right: 0; border-bottom: 2px solid var(--ink); }
  .gc-guides { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) { .gc-guides { grid-template-columns: 1fr; } }

/* Fact labels (Who We Help "How we support..." and similar): each black label is as wide as its words, on one line,
   so no empty black space beside it (Luke, 30 Oct). On phones the label sits above its answer. */
.v2 .fact { grid-template-columns: 200px 1fr; }
.v2 .fact dt { white-space: nowrap; width: max-content; max-width: 100%; }
@media (max-width: 600px) { .v2 .fact { grid-template-columns: 1fr; gap: 10px; } }

/* No runts (Luke, 30 Oct): a heading with nothing beside it uses the full width, so a short one stays on one line,
   and any heading that does wrap is split into lines of about the same length. Paragraphs avoid a lone last word. */
.c4 h1, .c4 h2, .c4 h3, .c4 .c4-case-body strong, .c4 .post strong { text-wrap: balance; }
.c4 p { text-wrap: pretty; }
.v2 .wrap > .h-block > h2.measure { max-width: none; }

/* ===== Brand sweep (Luke, 30 Oct): the homepage's rules everywhere =====
   1. Shape says what something does: only things you press are round (buttons, filter chips, round arrow buttons,
      dots). Every container, card, label, tag, field and menu highlight is square.
   2. One typeface: Engram everywhere. The monospace face is gone; small labels use Engram bold.
   Previous designs (/v1/..., wrapped in .v1) and Matter's hidden homepage concepts (.cx) keep their own look. */
html:not(:has(.v1, .cx)) { --radius: 0px; --radius-sm: 0px; --mono: var(--font); }
html:not(:has(.v1, .cx)) :is(.tag, .todo, .dropdown a, .rotator-word, .flag, .guide, .email-form input, .cover, .chips li, .report-strip,
  .form input, .form select, .form textarea, .modal-body input, .modal-body select, .tier, .sense-track, .cert-chip,
  .its-pill, .its-need, .its-need li, .ms-spec, .ms-type, .ms-proc-time, .ms-person .ph, .ms-cal, .ms-photo, .fact dt,
  .diff-certs li, .fx-bars i, .fx-time b, .fx-chips li, .fx-meters span, .fx-tl-track, .modal-cover, .ph-label) { border-radius: 0 !important; }
html:not(:has(.v1, .cx)) :is(.eyebrow, .tag, .dropdown .dd-label, .ph-label, .logo-ph, .cover em, .cat-card span, .foot-col h4, .concept-bar,
  .fix-table th, .data-table th, .pull cite, .spec dt, .ms-case-dl dt, .ms-photo, .benefit-num, .fact dt, .diff-certs li,
  .diff-num, .fx-vlabel, .c4-bar, .c4-ticker-lab) { letter-spacing: .02em; font-weight: 800; }
html:not(:has(.v1, .cx)) :is(.post-meta .date, .fx-tl-weeks, .todo) { letter-spacing: 0; font-weight: 600; }
/* Menu: square highlights, in yellow like the homepage's route options. */
html:not(:has(.v1, .cx)) .nav-link { border-radius: 0; }
html:not(:has(.v1, .cx)) :is(.nav-link:hover, .nav-item:focus-within > .nav-link, .nav-split > .nav-link:hover, .nav-item:focus-within > .nav-split > .nav-link:first-child, .dropdown a:hover) { background: var(--yellow); }
html:not(:has(.v1, .cx)) .dropdown { border-width: 2px; }
/* Guide and report links ("More guides and reports"): white boxes with an ink frame, no off-brand colours. */
.v2 .cat-card:not(.cat-card--photo) { background: var(--white); color: var(--ink); border: 2px solid var(--ink); min-height: 140px; }
.v2 .cat-card:not(.cat-card--photo):hover { transform: none; background: var(--yellow); }
.v2 .cat-card:not(.cat-card--photo) .swirl { display: none; }

/* About: How we work with you, three square containers with a label bar (Luke, 30 Oct). */
.ab-pillars { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; align-items: stretch; }
.ab-pillar { display: flex; flex-direction: column; border: 2px solid var(--ink); background: var(--white); }
.ab-pillar .ph { aspect-ratio: 16 / 10; border: 0; }
.ab-pillar-body { display: flex; flex-direction: column; gap: 12px; padding: 22px 22px 26px; flex: 1; }
.ab-pillar-body h3 { font-size: 1.3rem; line-height: 1.2; }
.ab-pillar-body p { margin: 0; color: var(--muted); }
.ab-pillar-body .link { margin-top: auto; align-self: flex-start; }
@media (max-width: 960px) { .ab-pillars { grid-template-columns: 1fr; max-width: 560px; } }
/* Four article cards sit four across (two by two on tablets), so none is left alone on a row. */
.blog-grid:has(> :nth-child(4):last-child) { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1100px) { .blog-grid:has(> :nth-child(4):last-child) { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .blog-grid:has(> :nth-child(4):last-child) { grid-template-columns: 1fr; } }

/* Guide downloads run full width in yellow, like the homepage (Luke, 30 Oct): a section holding just a guide block
   becomes a yellow section and the block loses its own box. Sections already given a colour keep it. */
.c4 .section:not(.v2-c):not(.section--ink):has(> .wrap > .guide:only-child) { background: var(--yellow); }
.c4 .section:not(.v2-c):not(.section--ink):has(> .wrap > .guide:only-child) .guide { background: none; padding: 0; box-shadow: none; }
/* Never two yellow sections in a row: a closing call to action straight after a yellow guide stays black. */
.v2 .section:has(> .wrap > .guide:only-child) + .section--ink:has(.cta-band) { background: var(--ink); color: var(--white); }
.v2 .section:has(> .wrap > .guide:only-child) + .section--ink:has(.cta-band) :is(h2, p) { color: var(--white); }
.v2 .section:has(> .wrap > .guide:only-child) + .section--ink:has(.cta-band) .btn { background: var(--yellow); color: var(--ink); border-color: var(--yellow); }

/* One hover for every clickable card (Luke, 30 Oct), the homepage success stories' behaviour: the whole card is
   clickable, its link fills yellow, its picture zooms slightly. Cards never lift or cast a shadow. */
html:not(:has(.v1, .cx)) :is(.case, .base-card, .ab-pillar) { position: relative; }
html:not(:has(.v1, .cx)) :is(.case, .base-card, .ab-pillar) .link:first-of-type::after { content: ""; position: absolute; inset: 0; }
html:not(:has(.v1, .cx)) :is(.case, .base-card, .ab-pillar, a.catc, a.people-card, a.post, a.gc-feature, a.blog-card, a.c4-case, a.cat-card--photo, .gc-guides a, a.persona-card) {
  transition: none; }
html:not(:has(.v1, .cx)) :is(.case, .base-card, .ab-pillar, a.catc, a.people-card, a.post, a.gc-feature, a.blog-card, a.c4-case, a.cat-card, .gc-guides a, a.persona-card):hover {
  transform: none !important; box-shadow: none !important; }
html:not(:has(.v1, .cx)) :is(.case, .base-card, .ab-pillar, a.catc, a.people-card, a.post, a.gc-feature, a.blog-card, a.c4-case, .gc-guides a, a.persona-card):hover .link { background-size: 100% 100%; }
html:not(:has(.v1, .cx)) :is(a.post, a.gc-feature, .gc-guides a, a.persona-card):hover { background: var(--white); }
html:not(:has(.v1, .cx)) a.persona-card:hover span { color: var(--muted); }
/* Pictures zoom inside their frame. */
html:not(:has(.v1, .cx)) :is(.case, .base-card, .ab-pillar, a.people-card, a.post, a.gc-feature, a.blog-card) :is(.ph, .gc-feature-img) { overflow: hidden; }
html:not(:has(.v1, .cx)) :is(.case, .base-card, .ab-pillar, a.people-card, a.post, a.gc-feature, a.blog-card) :is(.ph, .gc-feature-img) img { transition: transform .3s ease; }
html:not(:has(.v1, .cx)) :is(.case, .base-card, .ab-pillar, a.people-card, a.post, a.gc-feature, a.blog-card):hover :is(.ph, .gc-feature-img) img { transform: scale(1.04); }
html:not(:has(.v1, .cx)) a.catc:hover .catc-img img, html:not(:has(.v1, .cx)) a.cat-card--photo:hover img { transform: scale(1.04); }
/* The drink-category cards' "Explore" becomes a standard link. */
html:not(:has(.v1, .cx)) .catc-go { align-self: flex-start; background-image: linear-gradient(var(--yellow), var(--yellow)); background-size: 100% 3px; background-position: 0 100%; background-repeat: no-repeat; padding-bottom: 3px; transition: background-size .15s ease; }
html:not(:has(.v1, .cx)) a.catc:hover .catc-go { background-size: 100% 100%; }

/* Who We Help, lower half (Luke, 30 Oct: too much white space, odd order on desktop and phones).
   "How we can support your team": the heading and intro across the top, then each team as a square box with a black
   label bar, side by side. FAQs: on cream, heading above the questions, one readable column. */
:is(.who, .lead-boxes) .two-col:has(> div > .lead-list), .two-col:has(> div > .point-row) { grid-template-columns: 1fr; gap: 28px; }
:is(.who, .lead-boxes) .two-col:has(> div > .lead-list) .h-block, .two-col:has(> div > .point-row) .h-block { margin-bottom: 0; }
:is(.who, .lead-boxes) .two-col:has(> div > .lead-list) .lead, .two-col:has(> div > .point-row) .lead { max-width: 760px; }
:is(.who, .lead-boxes) .lead-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 20px; border: 0; padding: 0; margin: 0; }
:is(.who, .lead-boxes) .lead-list li { border: 2px solid var(--ink); background: var(--white); padding: 0 20px 22px; display: flex; flex-direction: column; gap: 10px; }
:is(.who, .lead-boxes) .lead-list li > strong { display: block; margin: 0 -20px 6px; background: var(--ink); color: var(--yellow); padding: 10px 20px; font-size: .95rem; line-height: 1.3; }
:is(.who, .lead-boxes) .lead-list li p { margin: 0; color: var(--muted); }
:is(.who, .lead-boxes) .lead-list li .link { white-space: nowrap; }
:is(.who, .lead-boxes) .section:has(> .wrap > .faq-grid) { background: var(--cream); padding-top: var(--section); }
:is(.who, .lead-boxes) .faq-grid { grid-template-columns: 1fr; gap: 28px; }
:is(.who, .lead-boxes) .faq-grid > h2 { position: static; }
:is(.who, .lead-boxes) .faq-grid .faq-list { max-width: 880px; }
:is(.who, .lead-boxes) .two-col:has(> div > .lead-list) h2.measure, .two-col:has(> div > .point-row) h2.measure { max-width: none; }

/* Challenge tiles with icons from the homepage set, in place of the yellow dot (Luke, 30 Oct). */
.challenge-tiles--icons li { padding: 22px 22px 24px; display: flex; flex-direction: column; gap: 16px; }
.challenge-tiles--icons li::before { display: none; }
.challenge-tiles--icons .ct-icon { width: 52px; height: 52px; display: block; }
@media (max-width: 600px) {
  .challenge-tiles--icons li { flex-direction: row; align-items: center; gap: 16px; padding: 18px 20px; }
  .challenge-tiles--icons .ct-icon { width: 44px; height: 44px; flex: none; }
}

/* Who we help cards (About): an icon from the homepage set, and a link that fills on hover (Luke, 30 Oct). */
.persona-card .pc-icon { width: 52px; height: 52px; display: block; margin-bottom: 8px; }
.persona-card > span:not(.link) { margin-bottom: 12px; }
.persona-card > span.link { margin-top: auto; align-self: flex-start; color: var(--ink); font-size: .95rem; }
.persona-grid { align-items: stretch; }

/* Create a New Drink: what we help you build, as homepage-style route containers (Luke, 30 Oct). */
.cnd-routes { display: grid; grid-template-columns: 2fr 1fr; gap: 24px; align-items: stretch; }
.cnd-route .c4-route-body { padding: 8px 22px 12px; }
.cnd-route .c4-opts { margin: 0; border-top: 0; grid-template-columns: 1fr; }
.cnd-route--wide .c4-opts { grid-template-columns: 1fr 1fr; }
.cnd-route .c4-opts li:last-child .c4-opt, .cnd-route--wide .c4-opts li:nth-last-child(-n+2) .c4-opt { border-bottom: 0; }
.cnd-route .c4-opt { padding: 12px 4px; }
@media (max-width: 1100px) { .cnd-routes { grid-template-columns: 1fr; } }
@media (max-width: 700px) { .cnd-route--wide .c4-opts { grid-template-columns: 1fr; } .cnd-route--wide .c4-opts li:nth-last-child(2) .c4-opt { border-bottom: 1px solid var(--line-soft); } }

/* From idea to shelf (Luke, 30 Oct): the heading at the standard size, and on wide screens each row lines up across
   the four steps (title, question, description, what you give, what you get, timing), so it reads like a table. */
.its-head h2 { font-size: var(--h2); }
@media (min-width: 1101px) {
  .its-steps { grid-template-rows: repeat(7, auto); }
  .its-steps > li { display: grid; grid-row: span 7; grid-template-rows: subgrid; row-gap: 0; }
  .its-steps > li > .its-time { margin-top: 0; align-self: end; }
}
.its-d { margin-bottom: 26px; }

/* Process (Luke, 30 Oct): the four stages at a glance as yellow step cards that jump to each stage, and each stage's
   details as labelled rows with a black label bar instead of small grey labels. */
.proc-steps li > a { display: flex; flex-direction: column; gap: 14px; padding: 18px 20px 22px; text-decoration: none; color: var(--ink); flex: 1; }
.proc-steps li > a h3 { font-size: 1.3rem; margin: 0; }
.proc-steps .link { align-self: flex-start; margin-top: auto; background-image: linear-gradient(var(--ink), var(--ink)); background-size: 100% 2px; }
.proc-steps li > a:hover .link { color: var(--yellow); background-size: 100% 100%; }
.stage { scroll-margin-top: 110px; }
.c4 .stage-num { border-radius: 50%; }
.c4 .stage-rows { border-top: 0; gap: 14px; }
.c4 .stage-row { grid-template-columns: 1fr; gap: 0; padding: 0; border: 2px solid var(--ink); background: var(--white); }
.c4 .stage-row > .eyebrow { margin: 0; display: block; background: var(--ink); color: var(--yellow); padding: 10px 18px; font-size: .9rem; text-transform: none; }
.c4 .stage-row > div { padding: 16px 18px 18px; }
.c4 .v2-c .stage-row > .eyebrow { color: var(--yellow); }

/* Fix a Problem: a jump bar that sticks under the menu while you read the six problems (Luke, 30 Oct). */
.fx-jump { position: sticky; top: 77px; z-index: 40; background: var(--ink); color: var(--white); }
.fx-jump .wrap { display: flex; align-items: center; gap: 6px; overflow-x: auto; scrollbar-width: none; padding-top: 10px; padding-bottom: 10px; }
.fx-jump .wrap::-webkit-scrollbar { display: none; }
.fx-jump span { color: var(--yellow); font-weight: 800; font-size: .85rem; margin-right: 8px; white-space: nowrap; }
.fx-jump a { color: var(--white); text-decoration: none; font-weight: 700; font-size: .88rem; padding: 6px 10px; white-space: nowrap; }
.fx-jump a:hover { background: var(--yellow); color: var(--ink); }
:is(#quality, #compliance, #capacity, #cost, #supply, #reformulation) { scroll-margin-top: 140px; }
.cp-look .faq-list { max-width: 880px; }

/* Prose blocks with an icon or a picture (Flavour Development and others, 30 Oct). */
.prose-block .pb-icon { width: 52px; height: 52px; display: block; margin-bottom: 16px; }
.prose-block--photo { padding: 0 !important; overflow: hidden; display: flex; flex-direction: column; }
.prose-block--photo .pb-photo { aspect-ratio: 16 / 9; border: 0; border-bottom: 2px solid var(--ink); }
.prose-block--photo > h3, .prose-block--photo > p { padding: 0 22px; }
.prose-block--photo > h3 { margin-top: 20px; }
.prose-block--photo > p { padding-bottom: 22px; }

/* Base pages: each benefit carries an icon from the homepage set, no coloured stripe (30 Oct). */
.benefit--icon { display: flex; align-items: center; gap: 14px; padding: 16px 18px !important; }
.benefit--icon::before { display: none; }
.benefit--icon img { width: 40px; height: 40px; flex: none; }

/* Never one card alone on the last row (Luke, 30 Oct): grids of three that would leave one over go four across
   (4 becomes one row, 7 becomes 4 and 3), two across on tablets. */
@media (min-width: 1101px) {
  :is(.catcs, .challenge-tiles, .cases-grid, .base-grid):has(> :nth-child(3n+1):nth-last-child(1)):not(:has(> :only-child)) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* No off-palette colour on category cards (30 Oct): the strip under each photo is black, and photo tiles use a
   black fade behind their label instead of each category's own colour. */
html:not(:has(.v1, .cx)) .catc-img { background: var(--ink); border-bottom: 2px solid var(--ink); }
html:not(:has(.v1, .cx)) .cat-card--photo::before { background: linear-gradient(to top, rgba(11,11,11,.88) 0%, rgba(11,11,11,.55) 32%, rgba(11,11,11,0) 62%); }
html:not(:has(.v1, .cx)) .cat-card--photo, html:not(:has(.v1, .cx)) .cat-card--photo.light { color: var(--white); }
html:not(:has(.v1, .cx)) .cat-card--photo.light strong, html:not(:has(.v1, .cx)) .cat-card--photo.light span { text-shadow: 0 1px 8px rgba(0,0,0,.25); }
.cnd-build { align-items: center; }
.fx-jump a { padding: 6px 8px; font-size: .84rem; }
.ing-facts .c4-fact::before, .ing-facts .c4-fact::after { display: none; }

/* Guide and report pages (30 Oct): the cover beside the headline in the hero. */
.gh-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.guide-hero h1 { max-width: 18ch; }
.gh-cover img { width: 100%; height: auto; display: block; filter: drop-shadow(0 22px 28px rgba(0,0,0,.18)); }
@media (max-width: 860px) { .gh-grid { grid-template-columns: 1fr; } .gh-cover { order: -1; max-width: 420px; } }
.gc-guides--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1100px) { .gc-guides--4 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .gc-guides--4 { grid-template-columns: 1fr; } }
.guide-hero h1 { max-width: 22ch; }

/* Reasons (Luke, 2 Nov): as in the Producer's Guide, an open row of round icons with the point beneath, no boxes,
   so they read as reasons rather than as cards to press. Four or fewer sit in one row; more wrap in rows of four. */
.check-grid.reasons { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px 32px; }
.check-grid.reasons:has(> :nth-child(3):last-child), .check-grid.reasons:has(> :nth-child(5):last-child), .check-grid.reasons:has(> :nth-child(6):last-child), .check-grid.reasons:has(> :nth-child(9):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.c4 .check-grid.reasons .check-card, .check-grid.reasons .check-card { border: 0 !important; background: none !important; padding: 0 !important; box-shadow: none; display: flex; flex-direction: column; gap: 10px; }
.check-grid.reasons .check-card::before { display: none !important; }
.check-grid.reasons .rs-icon { width: 64px; height: 64px; display: block; margin-bottom: 6px; }
.check-grid.reasons strong { font-size: 1.15rem; line-height: 1.25; }
.check-grid.reasons p { margin: 0; color: var(--muted); }
.section--ink .check-grid.reasons p { color: #cfcfcf; }
.v2-c .check-grid.reasons p { color: var(--ink); }
@media (max-width: 960px) { .check-grid.reasons, .check-grid.reasons:has(> :nth-child(3):last-child), .check-grid.reasons:has(> :nth-child(6):last-child), .check-grid.reasons:has(> :nth-child(9):last-child) { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .check-grid.reasons, .check-grid.reasons:has(> :nth-child(3):last-child), .check-grid.reasons:has(> :nth-child(6):last-child), .check-grid.reasons:has(> :nth-child(9):last-child) { grid-template-columns: 1fr; gap: 28px; } .check-grid.reasons .check-card { display: grid; grid-template-columns: 52px 1fr; column-gap: 16px; } .check-grid.reasons .rs-icon { width: 52px; height: 52px; grid-row: span 2; } }
.check-grid.reasons strong::before { display: none !important; } .check-grid.reasons strong { display: block; margin: 0; }

/* Category guide banner (Luke, 2 Nov): bigger cover, same proportions as the homepage guide section,
   one soft shadow from CSS now the images no longer carry their own boxed shadow. */
.cv2-guide .report-strip { overflow: visible; grid-template-columns: 1.1fr .9fr; gap: clamp(32px, 5vw, 72px); }
.cv2-guide .report-strip-img { max-width: 560px; filter: drop-shadow(0 20px 30px rgba(0,0,0,.18)); }
@media (max-width: 860px) { .cv2-guide .report-strip { grid-template-columns: 1fr; } .cv2-guide .report-strip-img { max-width: 100%; justify-self: center; } }

/* Category links under a prose block (Flavour Development, Luke 2 Nov) */
.prose-block .pb-links { display: flex; flex-wrap: wrap; gap: 10px 28px; margin-top: 20px; }
.prose-block--photo > .pb-links { padding: 0 22px 22px; margin-top: auto; }
.prose-block--photo > p { padding-bottom: 0; margin-bottom: 18px; }
.prose-block--photo > p:last-child { padding-bottom: 22px; margin-bottom: 0; }

/* Header to match Matter's Stage 1 routes (Luke, 2 Nov): bolder menu words, square enquiry button. */
html:not(:has(.v1, .cx)) .nav-link { font-weight: 700; }
html:not(:has(.v1, .cx)) .nav-cta { border-radius: 0; border-color: var(--yellow); }

/* Open icon rows on guide and report pages (Luke, 2 Nov): five items sit three then two, never one alone;
   white icons on black sections; lists and paragraphs inside keep the same quiet text colour. */
.check-grid.reasons:has(> :nth-child(5):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 960px) { .check-grid.reasons > :last-child:nth-child(odd) { grid-column: 1 / -1; } }
@media (max-width: 560px) { .check-grid.reasons > :last-child:nth-child(odd) { grid-column: auto; } }
.section--ink .check-grid.reasons .rs-icon { filter: invert(1); }
.check-grid.reasons .rs-body { color: var(--muted); display: grid; gap: 10px; }
.check-grid.reasons .rs-body p { margin: 0; }
.section--ink .check-grid.reasons .rs-body, .section--ink .check-grid.reasons p strong { color: #cfcfcf; }
.section--ink .check-grid.reasons p strong { color: var(--white); }
.v2-c .check-grid.reasons .rs-body { color: var(--ink); }
.check-grid.reasons .check-card > p:only-of-type:first-of-type { margin: 0; }
.check-grid.reasons p strong { display: inline !important; font-size: inherit; }
@media (max-width: 960px) { .check-grid.reasons:has(> :nth-child(5):last-child) { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .check-grid.reasons:has(> :nth-child(5):last-child) { grid-template-columns: 1fr; } }

/* Guide pages (Luke, 2 Nov): the recipe list as one wide feature under the four even items, and
   heading-plus-picture columns that start at the top and stay in view beside long text. */
.inside-feature { margin-top: 48px; padding-top: 40px; border-top: 1px solid var(--line, rgba(0,0,0,.15)); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 16px 56px; align-items: start; }
.inside-feature .rs-icon { width: 64px; height: 64px; display: block; margin-bottom: 16px; }
.inside-feature strong { display: block; font-size: 1.15rem; line-height: 1.25; margin-bottom: 10px; }
.inside-feature p { color: var(--muted); margin: 0; }
.inside-feature .dots { columns: 2; column-gap: 32px; display: block; margin: 0; }
.inside-feature .dots li { break-inside: avoid; margin-bottom: 10px; }
@media (max-width: 860px) { .inside-feature { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .inside-feature .dots { columns: 1; } }
body:has(.gh-grid) .two-col--media:not(.inside-head) { align-items: start; }
@media (min-width: 861px) { body:has(.gh-grid) .two-col--media:not(.inside-head) > div:first-child { position: sticky; top: 110px; } }
body:has(.gh-grid) .inside-img { max-width: 480px; justify-self: end; }

/* Recipe list in a black panel (Luke, 2 Nov). */
.inside-feature { border-top: 0; background: var(--ink); color: var(--white); padding: clamp(28px, 4vw, 48px); }
.inside-feature .rs-icon { filter: invert(1); }
.inside-feature p { color: #cfcfcf; }
.inside-feature .dots li { color: var(--white); }
.inside-feature .dots li::before { background: var(--yellow) !important; box-shadow: none !important; }
.inside-feature + .btn-row { margin-top: 32px; }

/* Buttons are rectangles, as in Matter's Stage 1 routes (Luke, 2 Nov). Old designs keep theirs. */
html:not(:has(.v1, .cx)) .btn { border-radius: 0; }
html:not(:has(.v1, .cx)) .btn:not(.btn--ghost):not(.btn--ink) { border-color: var(--yellow); }
html:not(:has(.v1, .cx)) .route--yellow .btn:not(.btn--ghost) { background: var(--ink); color: var(--white); border-color: var(--ink); }

/* One number badge everywhere, as on Solutions' "Your journey with Good Culture" (Luke, 2 Nov):
   36px yellow circle, bold number, no outline, step heading at 1.15rem. */
html:not(:has(.v1, .cx)) :is(.its-num, .benefit-num, .stage-num) { width: 36px; height: 36px; border: 0; border-radius: 50%; background: var(--yellow); color: var(--ink); font: 800 1rem/1 var(--font); letter-spacing: 0; display: grid; place-items: center; margin-bottom: 18px; }
html:not(:has(.v1, .cx)) :is(.its-num, .benefit-num) ~ h3 { font-size: 1.15rem; }
html:not(:has(.v1, .cx)) .stage { grid-template-columns: 1fr; gap: 0; }
html:not(:has(.v1, .cx)) .benefit-card--yellow .benefit-num { background: var(--ink); color: var(--yellow); }
@media (max-width: 760px) { html:not(:has(.v1, .cx)) .stage-num { width: 36px; height: 36px; font-size: 1rem; } }

/* Guide covers in "More guides and reports" (Luke, 2 Nov). */
.gc-guides .gg-cover { aspect-ratio: 4 / 3; overflow: hidden; display: grid; place-items: center; padding: 18px; background: var(--cream); border-bottom: 2px solid var(--ink); }
.gc-guides .gg-cover img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 10px 14px rgba(0,0,0,.18)); transition: transform .3s ease; }
.gc-guides a:hover .gg-cover img { transform: scale(1.05); }
.hero .ing-hero-photo.ph, .ing-hero-photo { aspect-ratio: 1 / 1 !important; height: auto !important; max-width: 560px; margin-left: auto; border: 0 !important; }
.ing-hero-photo img { width: 100%; height: 100%; object-fit: cover; }

/* Category "types" cards (Luke, 2 Nov): no Type labels, and the same hover as every other card:
   no lift or shadow, the link fills yellow, the icon grows a little. */
html:not(:has(.v1, .cx)) .cv2-type { transition: none; }
html:not(:has(.v1, .cx)) .cv2-type:hover, html:not(:has(.v1, .cx)) .cv2-type:focus-visible { transform: none; box-shadow: none; }
html:not(:has(.v1, .cx)) .cv2-type .cv2-go { align-self: flex-start; }
html:not(:has(.v1, .cx)) .cv2-type:hover .link { background-size: 100% 100%; }
.cv2-type > div > :first-child { transition: transform .3s ease; }
.cv2-type:hover > div > :first-child { transform: scale(1.08); }
.cv2-type > div { padding-top: 24px; }

/* No rule above a list that sits under its own label (What we solve for you). */
.cv2-solve .lead-list, .eyebrow + .lead-list { border-top: 0; }
.cv2-solve .lead-list li:first-child, .eyebrow + .lead-list li:first-child { padding-top: 4px; }
.cv2-solve .lead-list li:last-child { border-bottom: 0; padding-bottom: 0; }
.check-grid.reasons.benefit-open .benefit-num { margin-bottom: 6px; }
.check-grid.reasons .rs-body .dots { margin: 0; }
.check-grid.reasons .todo { margin-top: 6px; }
/* Open rows have no box padding, so leave room for the fruit group that crosses the section line. */
.cv2 .c4-hasgb:has(> .check-grid.reasons) { padding-bottom: clamp(40px, 6vw, 90px); }

/* Who We Are (Luke, 3 Nov): vision and mission as big statements. */
.ww-big { font-weight: 800; font-size: clamp(1.6rem, 3.4vw, 2.8rem); line-height: 1.15; letter-spacing: -.01em; max-width: 1000px; margin: 14px 0 0; text-wrap: balance; }
.ww-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
@media (max-width: 960px) { .ww-facts { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .ww-facts { grid-template-columns: 1fr; } }
.ww-map { width: 100%; height: auto; }
.ww-sub { color: #cfcfcf; max-width: 760px; margin-top: 24px; }
.ww-facts { margin-top: 48px; }

/* Footer as in Matter's Stage 1 routes (Luke, 3 Nov): bold yellow headings with a short white rule, white links,
   contact details at the foot of the logo column, Privacy Policy and Terms of Use in the bottom bar. */
html:not(:has(.v1, .cx)) .foot-brand { display: flex; flex-direction: column; justify-content: space-between; gap: 32px; }
html:not(:has(.v1, .cx)) .foot-col h4 { font-family: var(--font); font-size: 1.05rem; font-weight: 800; letter-spacing: 0; text-transform: none; color: var(--yellow); margin-bottom: 24px; }
html:not(:has(.v1, .cx)) .foot-col h4::after { content: ""; display: block; width: 32px; height: 3px; background: var(--white); margin-top: 14px; }
html:not(:has(.v1, .cx)) .foot-col ul { gap: 12px; }
html:not(:has(.v1, .cx)) .foot-col a { color: var(--white); font-size: 1rem; }
html:not(:has(.v1, .cx)) .foot-col a:hover { color: var(--yellow); text-decoration: none; }
html:not(:has(.v1, .cx)) .foot-contact { color: var(--white); font-size: 1rem; line-height: 1.75; margin: 0; }
html:not(:has(.v1, .cx)) .foot-contact b { color: var(--yellow); font-weight: 800; }
html:not(:has(.v1, .cx)) .foot-bottom { border-top-color: #6b6b6b; color: var(--white); font-size: .95rem; }
.foot-legal { display: flex; gap: 24px; }
.foot-legal a { color: inherit; text-decoration: none; }
.foot-legal a:hover { color: var(--yellow); }

/* Legal pages */
.legal { max-width: 760px; }
.legal h1 { font-size: var(--h2); margin-bottom: 32px; }
.legal h2 { font-size: 1.3rem; margin: 40px 0 12px; }
.legal h3 { font-size: 1.1rem; margin: 28px 0 10px; }
.legal p, .legal li { color: var(--muted); }
.legal p { margin: 0 0 14px; }
.legal ul { margin: 0 0 14px 20px; display: grid; gap: 6px; }
.legal a { color: var(--ink); }
.legal .legal-sub { font-weight: 700; color: var(--ink); }

/* Certifications (Matter's Stage 1 layout, Luke 3 Nov): no empty right half. */
.certs-block h2 { margin-bottom: 20px; }
.certs-block .lead { max-width: 1000px; }
.cert-row { list-style: none; margin: 40px 0 32px; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 24px 40px; align-items: center; }
.cert-row li { display: flex; justify-content: center; }
.cert-row img { height: 72px; width: auto; max-width: 100%; object-fit: contain; }
@media (max-width: 960px) { .cert-row { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 560px) { .cert-row { gap: 24px; } .cert-row img { height: 56px; } }
.section--ink .cert-row img { filter: invert(1); }

/* Co-Packing routes (Luke, 3 Nov): two panels like the homepage routes, label bar, photo, list. */
.cp-panels { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.cp-panel { background: var(--white); border: 2px solid var(--ink); display: flex; flex-direction: column; }
.cp-panel .ph { aspect-ratio: 16 / 7; border: 0 !important; border-bottom: 2px solid var(--ink) !important; }
.cp-panel .ph img { width: 100%; height: 100%; object-fit: cover; }
.cp-panel-body { padding: 24px 26px 28px; }
.cp-panel .dots { margin: 0; }
.cp-panel .dots li::before { background: var(--yellow) !important; box-shadow: 0 0 0 1.5px var(--ink); border-radius: 0; }
@media (max-width: 760px) { .cp-panels { grid-template-columns: 1fr; } }

/* Step headings with no side text use the full width, balanced, so they sit on two lines (Luke, 3 Nov). */
.steps-head:not(:has(> p)) { grid-template-columns: 1fr; }
.steps-head:not(:has(> p)) h2 { max-width: 22ch; text-wrap: balance; }
@media (min-width: 1100px) { .steps-head:not(:has(> p)) h2 { max-width: 26ch; } }

/* "What to look for" uses the full width on desktop (Luke, 3 Nov). */
.section:has(.cp-look) .h-block h2.measure { max-width: none; }
.section:has(.cp-look) .h-block .lead.measure { max-width: none; }
.cp-look .faq-list { max-width: none; }

/* One case study on its own (Luke, 3 Nov). */
.case-feature { display: grid; grid-template-columns: 1.1fr 1fr; border: 2px solid var(--ink); background: var(--white); color: var(--ink); text-decoration: none; }
.case-feature .cf-img { overflow: hidden; display: block; border-right: 2px solid var(--ink); }
.case-feature .cf-img .ph { height: 100%; aspect-ratio: auto; border: 0 !important; }
.case-feature .cf-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
.case-feature:hover .cf-img img { transform: scale(1.04); }
.case-feature .cf-body { display: flex; flex-direction: column; }
.case-feature .c4-bar { background: var(--yellow); color: var(--ink); }
.case-feature .cf-text { display: flex; flex-direction: column; gap: 16px; padding: clamp(24px, 3vw, 44px); flex: 1; justify-content: center; }
.case-feature strong { font-size: clamp(1.5rem, 2.4vw, 2.1rem); line-height: 1.12; letter-spacing: -.01em; text-wrap: balance; }
.case-feature .cf-text > span:not(.link) { color: var(--muted); font-size: 1.05rem; line-height: 1.55; }
.case-feature .link { align-self: flex-start; }
.case-feature:hover .link { background-size: 100% 100%; }
@media (max-width: 860px) { .case-feature { grid-template-columns: 1fr; } .case-feature .cf-img { border-right: 0; border-bottom: 2px solid var(--ink); aspect-ratio: 16 / 9; } }

/* Kombucha Producer's Guide, test page (Luke, 3 Nov). */
.kpt-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.kpt-hero { padding: clamp(48px, 7vw, 96px) 0; }
.kpt-hero-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(32px, 5vw, 72px); align-items: center; }
.kpt-hero h1 { font-size: clamp(2.6rem, 5.4vw, 4.6rem); line-height: .98; margin: 14px 0 22px; text-wrap: balance; }
.kpt-hero .lead { color: var(--ink); max-width: 560px; }
.kpt-form { background: var(--white); border: 2px solid var(--ink); padding: 0 26px 26px; position: relative; margin-top: 70px; }
.kpt-cover { display: block; width: 78%; margin: -86px auto 10px; filter: drop-shadow(0 14px 20px rgba(0,0,0,.25)); }
.kpt-form-body { display: grid; gap: 12px; }
.kpt-form .row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.kpt-form label { display: grid; gap: 6px; font-weight: 700; font-size: .9rem; }
.kpt-form input, .kpt-form select { font: inherit; font-weight: 400; padding: 12px 12px; border: 1.5px solid var(--ink); background: var(--white); border-radius: 0; }
.kpt-form .btn { justify-content: center; width: 100%; margin-top: 4px; }
@media (max-width: 900px) { .kpt-hero-grid { grid-template-columns: 1fr; } .kpt-form { max-width: 520px; } }
@media (max-width: 480px) { .kpt-form .row { grid-template-columns: 1fr; } }

.kpt-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 28px; margin-top: 8px; }
.kpt-tile { color: var(--ink); text-decoration: none; display: flex; flex-direction: column; gap: 10px; }
.kpt-shot { position: relative; display: block; aspect-ratio: 1; overflow: hidden; margin-bottom: 8px; }
.kpt-shot img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .35s ease; }
.kpt-tile:hover .kpt-shot img { transform: scale(1.05); }
.kpt-badge { position: absolute; left: 7%; bottom: 7%; min-width: 26%; aspect-ratio: 1; padding: 0 6px; border-radius: 50%; background: var(--ink); color: var(--white); display: grid; place-items: center; font-weight: 800; font-size: clamp(1.1rem, 2.1vw, 1.9rem); letter-spacing: -.02em; }
.kpt-tile strong { font-size: 1.15rem; line-height: 1.25; }
.kpt-tile > span:last-child { color: var(--muted); line-height: 1.5; }
@media (max-width: 960px) { .kpt-tiles { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .kpt-tiles { grid-template-columns: 1fr; } }

.kpt-recipes { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 72px); align-items: start; }
.kpt-recipes h2 { margin: 12px 0 16px; }
.kpt-recipes .lead { color: #cfcfcf; }
.kpt-recipe-list { list-style: none; counter-reset: r; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0 28px; }
.kpt-recipe-list li { counter-increment: r; display: flex; gap: 14px; align-items: baseline; padding: 14px 0; border-bottom: 1px solid #2c2c2c; color: var(--white); }
.kpt-recipe-list li::before { content: counter(r, decimal-leading-zero); color: var(--yellow); font-weight: 800; font-size: .9rem; }
.kpt-facts { margin-top: 56px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
@media (max-width: 900px) { .kpt-recipes { grid-template-columns: 1fr; } .kpt-facts { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .kpt-recipe-list { grid-template-columns: 1fr; } .kpt-facts { grid-template-columns: 1fr; } }

.kpt-close-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(32px, 5vw, 72px); align-items: center; }
.kpt-close img { width: 100%; max-width: 460px; filter: drop-shadow(0 18px 24px rgba(0,0,0,.2)); }
.kpt-close h2 { margin-bottom: 12px; }
@media (max-width: 760px) { .kpt-close-grid { grid-template-columns: 1fr; } .kpt-close img { max-width: 320px; } }
.kpt-badge--long { font-size: clamp(.95rem, 1.5vw, 1.35rem); }
/* Guide test page: Version A / B labels, recipe carousel, phone swiping (Luke, 3 Nov) */
.kpt-version { display: inline-block; margin: 0 0 24px; padding: 6px 14px; background: var(--yellow); color: var(--ink); font-weight: 800; font-size: .85rem; letter-spacing: .08em; text-transform: uppercase; }
.kpt-carousel-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; margin-bottom: 28px; }
.kpt-carousel-head > div:first-child { max-width: 760px; }
.kpt-carousel-head h2 { margin: 12px 0 16px; }
.kpt-carousel-head .lead { color: #cfcfcf; margin: 0; }
.kpt-carousel { display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 4px; }
.kpt-carousel::-webkit-scrollbar { display: none; }
.kpt-slide { flex: 0 0 min(72%, 860px); scroll-snap-align: start; margin: 0; }
.kpt-slide a { display: block; overflow: hidden; }
.kpt-slide img { display: block; width: 100%; height: auto; aspect-ratio: 1400 / 875; transition: transform .4s ease; }
.kpt-slide a:hover img { transform: scale(1.03); }
.kpt-slide figcaption { display: flex; gap: 12px; align-items: baseline; margin-top: 14px; color: var(--white); font-weight: 700; font-size: 1.05rem; }
.kpt-slide figcaption span { color: var(--yellow); font-weight: 800; font-size: .9rem; }
.kpt-pips { margin-top: 20px; }
.kpt-car-cta { margin-top: 28px; }
@media (max-width: 760px) {
  .kpt-carousel-head { flex-direction: column; align-items: flex-start; }
  .kpt-slide { flex-basis: 88%; }
  /* What's Inside swipes on phones */
  .kpt-tiles { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin-right: calc(-1 * var(--gutter, 16px)); padding-right: 16px; }
  .kpt-tiles::-webkit-scrollbar { display: none; }
  .kpt-tile { flex: 0 0 80%; scroll-snap-align: start; }
}
@media (max-width: 760px) {
  .kpt-facts { display: flex !important; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .kpt-facts::-webkit-scrollbar { display: none; }
  .kpt-facts .c4-fact { flex: 0 0 62%; scroll-snap-align: start; }
}
/* What's Inside, Version B: tiles as a carousel */
.kpt-carousel-head--light .heading, .kpt-carousel-head--light > div:first-child { margin-bottom: 0; }
.kpt-tiles--car { display: flex !important; gap: 28px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin-top: 0; }
.kpt-tiles--car::-webkit-scrollbar { display: none; }
.kpt-tiles--car .kpt-tile { flex: 0 0 calc((100% - 56px) / 3.4); scroll-snap-align: start; }
.kpt-facts { margin-top: 36px; }
@media (max-width: 960px) { .kpt-tiles--car .kpt-tile { flex-basis: 44%; } }
@media (max-width: 760px) { .kpt-tiles--car .kpt-tile { flex-basis: 80%; } }
.kpt-carousel-head--light .lead { color: var(--ink); }
.c4-ink .kpt-pips span, [class*="ink"] .kpt-pips span { background: #444; } .c4-ink .kpt-pips span.on, [class*="ink"] .kpt-pips span.on { background: var(--yellow); }
/* Guide test page, phones: short hero, form at the close, sticky button (Luke, 3 Nov) */
.kpt-phone-cta, .kpt-close-form, .kpt-sticky { display: none; }
@media (max-width: 760px) {
  .kpt-hero .kpt-ticks, .kpt-form--hero { display: none; }
  .kpt-hero { padding: 40px 0 48px; }
  .kpt-hero .lead { margin-bottom: 0; }
  .kpt-phone-cta { display: grid; gap: 22px; justify-items: start; margin-top: 24px; }
  .kpt-phone-cta img { width: 62%; max-width: 260px; justify-self: center; filter: drop-shadow(0 14px 20px rgba(0,0,0,.2)); }
  .kpt-phone-cta .btn { width: 100%; justify-content: center; }
  .kpt-close-grid > img, .kpt-close-btn { display: none; }
  .kpt-close-form { display: block; }
  .kpt-close-form .kpt-form { margin-top: 90px; }
  .kpt-sticky { display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: var(--ink); transform: translateY(110%); transition: transform .25s ease; }
  .kpt-sticky.on { transform: none; }
  .kpt-sticky .btn { width: 100%; justify-content: center; }
}
.kpt-form { scroll-margin-top: 110px; }
.kpt-carousel-head .carousel-btns { flex: none; }
/* Stats box pointer (Luke, 3 Nov): one shape with the box. Drawn as a solid wedge that overlaps the box by 2px,
   so no hairline can show between them at any zoom or screen. */
.c4-fact::before { border: 0; left: -12px; top: 28px; width: 14px; height: 24px; background: inherit; clip-path: polygon(0 50%, 100% 0, 100% 100%); }
.cx-map--side .cx-fact::before { border: 0; left: -10px; top: 22px; width: 12px; height: 20px; background: var(--yellow); clip-path: polygon(0 50%, 100% 0, 100% 100%); }
/* ONE bullet and ONE tick (Luke, 3 Nov). Bullet: 8px round dot, black on light, yellow on black. Tick: the
   homepage's thin tick, black on light, yellow on black. Every list of points uses .dots or .checks; the brand
   check fails any other marker. */
.dots li::before { width: 8px !important; height: 8px !important; border-radius: 50% !important; background: var(--ink) !important; box-shadow: none !important; }
.section--ink .dots li::before, .c4-ink .dots li::before, .inside-feature .dots li::before, .ms-close .dots li::before { background: var(--yellow) !important; }
.checks li::before { border-color: var(--ink); }
.section--ink .checks li::before, .c4-ink .checks li::before, .ms-close .checks li::before { border-color: var(--yellow); }
.kpt-ticks { margin-top: 28px; max-width: 560px; }
.ms-call.checks { display: grid; gap: 12px; margin: 22px 0; }
.ms-call.checks li { display: block; }
.fx-checks { margin: 0; grid-template-columns: 1fr 1fr; gap: 8px 20px; }
.fx-checks li { font-weight: 600; }
/* What we need from you: an open icon row, no boxes */
.its-need { border: 0 !important; padding: 0; }
.its-need ul { gap: 14px 28px; }
.its-need li { border: 0 !important; padding: 0; font-size: .95rem; }
.cp-panel .dots li::before { background: var(--ink) !important; border-radius: 50% !important; box-shadow: none !important; }
/* Contact details (Luke, 3 Nov): a plain open row, no boxes. Label in bold, details underneath. */
.lead-boxes .lead-list li { border: 0 !important; background: none !important; padding: 0 !important; gap: 6px; }
.lead-boxes .lead-list li > strong { margin: 0 !important; padding: 0 !important; background: none !important; color: var(--ink) !important; font-size: 1.05rem; }
.lead-boxes .lead-list { gap: 28px 40px; padding-top: 24px !important; border-top: 1.5px solid var(--ink) !important; }
/* Phone carousels (Luke, 3 Nov): swipe and dots, no arrows. The current card sits in the middle of the screen with
   an equal peek of its neighbours either side, running edge to edge. */
@media (max-width: 760px) {
  .carousel-btns { display: none !important; }
  .track, .kpt-carousel, .kpt-tiles, .kpt-facts { margin-left: calc(-1 * var(--gutter)) !important; margin-right: calc(-1 * var(--gutter)) !important; padding-left: 10vw !important; padding-right: 10vw !important; scroll-padding-inline: 10vw; gap: 12px !important; }
  .track { grid-auto-columns: 80vw !important; }
  .track > *, .kpt-carousel > *, .kpt-tiles > *, .kpt-facts > * { scroll-snap-align: center !important; flex: 0 0 80vw !important; }
  .kpt-carousel-head { margin-bottom: 20px; }
}
/* V2 guide pages: the black section's heading block */
.kpt-ink-head { max-width: 760px; margin-bottom: 8px; }
.kpt-ink-head h2 { margin: 12px 0 16px; }
.kpt-ink-head .lead { color: #cfcfcf; }
/* Case Studies page: always three across on desktop (Luke, 4 Nov) */
@media (min-width: 1101px) { .cases-grid.cases-grid--three { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } }
/* Category "Why now", simpler (Luke, 4 Nov): heading and a short intro across the width, then each number with the
   point it proves, as one open row of three under a black rule. No boxes. */
.why2 h2 { margin: 12px 0 18px; max-width: 22ch; }
.why2-lead { max-width: 640px; margin: 0; }
.why2-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(28px, 4vw, 56px); margin-top: clamp(40px, 5vw, 64px); }
.why2-item { border-top: 3px solid var(--ink); padding-top: 22px; }
.why2-num { display: inline-block; font-size: clamp(2.6rem, 4.6vw, 4rem); line-height: 1; letter-spacing: -.03em; font-weight: 800; padding-bottom: 6px; background: linear-gradient(var(--yellow), var(--yellow)) 0 92% / 100% .32em no-repeat; }
.why2-item h3 { font-size: 1.12rem; line-height: 1.3; margin: 18px 0 10px; }
.why2-item p { margin: 0; color: var(--muted); line-height: 1.55; }
@media (max-width: 860px) { .why2-row { grid-template-columns: 1fr; gap: 32px; } }
.why2-num { white-space: nowrap; }
.why2-src { margin: 28px 0 0; font-size: .85rem; } .why2-src a { color: var(--muted); }

/* Blog posts and case studies after the existing site's article layout (Luke, 4 Nov): one wide centred column. */
.gc-post-col { max-width: 1000px; margin: 0 auto; }
.gc-blog .gc-post-hero { padding-bottom: 0; }
.gc-post-hero .gc-post-col { text-align: center; }
.gc-post-meta { display: flex; justify-content: center; gap: 10px; font-size: .95rem; color: var(--muted); margin: 0 0 20px; }
.gc-post-hero h1 { font-size: clamp(2.1rem, 4.4vw, 4rem); line-height: 1.08; max-width: 22ch; margin: 0 auto; }
.c4.gc-blog .section.gc-post-cover { padding: 48px 0 0 !important; }
.c4.gc-blog .section.gc-post-body { padding-top: 56px !important; }
.gc-post-body .gc-article { max-width: none; font-size: 1.15rem; line-height: 1.6; }
.gc-post-body .gc-article > * + * { margin-top: .9em; }
.gc-post-body .gc-article h2 { font-size: clamp(1.6rem, 2.6vw, 2.3rem); line-height: 1.15; margin-top: 1.4em; }
.gc-post-body .gc-article > h4:first-child { font-size: 1.2rem; line-height: 1.5; margin-top: 0; }
.gc-post-body .gc-article a { color: inherit; }

/* Point rows (Luke, 5 Nov): the open icon row sits under its heading across the full width. */
.point-row { margin-top: 12px; }
@media (min-width: 961px) { .point-row .check-grid.reasons:has(> :nth-child(2):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 64px; } }
/* Links in open icon rows hug their text, so the yellow hover fills the words only (Luke, 5 Nov). */
.check-grid.reasons .check-card .link, .check-grid.reasons .rs-body .link { align-self: flex-start; justify-self: start; width: fit-content; max-width: 100%; }

/* Shop hero (Luke, 5 Nov): a wider text column and slightly smaller heading, so it sits on three balanced lines. */
@media (min-width: 861px) { .hero--shop .hero-grid, .v2 .hero--shop .hero-grid { grid-template-columns: minmax(0, 1.45fr) minmax(0, .75fr); }
  .hero--shop h1, .hero--media.hero--wide.hero--shop h1 { max-width: none; font-size: clamp(2.4rem, 3.9vw, 3.6rem); text-wrap: balance; } }

/* Text on the sky blue and orange sections is ink, never grey (Luke, 6 Nov: grey step text didn't work on orange). */
:is(.c4-sky, .c4-orange) :is(.steps p, .muted, .lead) { color: var(--ink); }

/* Fix a Problem: photo and visual top left in every problem section (Luke, 6 Nov). */
.fx--media-first { grid-template-columns: .95fr 1.05fr; }
.fx--media-first .fx-media { order: -1; position: static; }  /* stays put while you scroll (Luke, 6 Nov) */

/* Side menu under Solutions > Fix a Problem (Luke, 6 Nov): opens to the right on desktop, indented on phones. */
.dd-has-sub { position: relative; }
.dd-has-sub > a { display: flex !important; flex-wrap: wrap; align-items: center; column-gap: 8px; }
.dd-has-sub > a small { flex-basis: 100%; order: 3; }
.dropdown .dd-has-sub > a .chev { transform: rotate(-90deg) !important; margin-left: auto; width: 10px; height: 10px; }
.dd-sub { list-style: none; position: absolute; left: calc(100% + 12px); top: -12px; min-width: 280px; background: var(--white); border: 2px solid var(--ink); border-radius: var(--radius-sm); padding: 10px; opacity: 0; visibility: hidden; transition: .15s ease; }
.dd-sub::before { content: ""; position: absolute; left: -16px; top: 0; bottom: 0; width: 16px; }
.dd-has-sub:hover > .dd-sub, .dd-has-sub:focus-within > .dd-sub { opacity: 1; visibility: visible; }
@media (max-width: 1020px) {
  .dd-has-sub > a .chev { display: none; }
  .dd-sub { position: static; opacity: 1; visibility: visible; border: 0; padding: 0 0 6px 16px; min-width: 0; }
  .dd-sub::before { display: none; }
  .dd-sub a { font-size: .9rem; padding: 8px 12px; }
}

/* Homepage four steps (Luke, 6 Nov): black panels, a yellow strip along the top with the step number on it,
   a short yellow rule under each title, and a black notch pointing to the next step. */
.c4-steps--panels { gap: 28px; margin-top: 12px; }
.c4-steps--panels li { background: var(--ink); color: var(--white); border-top: 8px solid var(--yellow); padding-top: 26px; }
.c4-steps--panels .c4-step-num { position: absolute; top: -22px; left: 50%; transform: translateX(-50%); width: 36px; height: 36px; border-radius: 50%; background: var(--yellow); color: var(--ink); display: grid; place-items: center; font-weight: 800; font-size: .9rem; }
.c4-steps--panels li > div { padding: 12px 22px 28px; }
.c4-steps--panels h3 { color: var(--white); }
.c4-steps--panels h3::after { content: ""; display: block; width: 32px; height: 3px; background: var(--yellow); margin-top: 12px; }
.c4-steps--panels p { color: var(--white); }
.c4-steps--panels li:not(:last-child)::after { right: -15px; border: 12px solid transparent; border-left: 16px solid var(--ink); transform: translate(-1px, -50%); border-right: 0; }
.c4-steps li:last-of-type::after { display: none; }

/* Homepage "Who's using": five black round icons, labels underneath, no boxes; three then two below laptop width (Luke, 6 Nov). */
.c4-who--icons { display: flex; flex-wrap: wrap; justify-content: center; gap: 36px 24px; text-align: center; }
.c4-who--icons li { flex: 0 0 calc((100% - 96px) / 5); background: none; border: 0; padding: 0; align-items: center; gap: 14px; }
.c4-who--icons img { width: 88px; height: 88px; margin: 0; }
.c4-who--icons strong { font-size: 1.05rem; line-height: 1.25; max-width: 14ch; }
@media (max-width: 860px) { .c4-who--icons li { flex-basis: calc((100% - 48px) / 3); } }
@media (max-width: 520px) { .c4-who--icons li { flex-basis: calc((100% - 24px) / 2); } }
@media (max-width: 520px) { .c4-who--icons .c4-gb { display: none; } }

/* Three-step version of the numbered black panels (ginger page, Luke 9 Nov). */
.c4-steps--3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 860px) { .c4-steps--3 { grid-template-columns: 1fr; gap: 40px; } .c4-steps--3 li::after { display: none; } }
.c4-steps--panels li :is(h3, p) { color: var(--white) !important; }  /* white on the black panels, whatever the section colour */
.c4-steps--panels .step-time { display: block; margin-top: 14px; font-size: .8rem; font-weight: 700; color: var(--yellow); text-transform: uppercase; letter-spacing: .04em; }
/* Jim's review (9 Nov): article and guide cards carry a yellow button, and article pictures a black keyline, so they read as links. */
.blog-card .ph { border: 2px solid var(--ink); }
.card-btn { align-self: flex-start; padding: 12px 18px; font-size: .95rem; margin-top: auto; }
.blog-card .card-btn { margin-top: auto; }
.blog-card strong { margin-bottom: 4px; }
.blog-card:hover .card-btn, .gc-guides a:hover .card-btn { transform: translateY(-2px); }
.gc-guides a:hover .card-btn { background: var(--ink); color: var(--white); }
/* The case study label bar lines up with the text beneath it (Jim, 9 Nov). */
.case-feature .c4-bar { padding-left: clamp(24px, 3vw, 44px); padding-right: clamp(24px, 3vw, 44px); }
.post-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1100px) { .post-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .post-grid--4 { grid-template-columns: 1fr; } }
.post-grid--4 .post-foot { flex-direction: column; align-items: flex-start; gap: 10px; } .post-grid--4 .post-foot .link { white-space: nowrap; }
/* Article carousel: three across, then the homepage arrows and dots (Luke, 9 Nov). */
.post-track { grid-auto-columns: calc((100% - 40px) / 3); }
@media (max-width: 900px) { .post-track { grid-auto-columns: calc((100% - 20px) / 2); } }
.post-track > .post { scroll-snap-align: start; }
/* Who We Help "How we support": three across, black label with yellow text, no line and no box (Luke, 9 Nov) (Luke, 9 Nov). */
.fact-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 36px 40px; margin: 8px 0 0; }
.fact-grid > div { display: flex; flex-direction: column; gap: 12px; }
.fact-grid dt { align-self: flex-start; background: var(--ink); color: var(--yellow); font-weight: 700; font-size: .95rem; padding: 6px 12px; }
.fact-grid dd { margin: 0; line-height: 1.55; }
@media (max-width: 900px) { .fact-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .fact-grid { grid-template-columns: 1fr; } }
/* Photo blocks with a list: the dots sit inside the text column, and three blocks sit three across (no lone card). */
.prose-block--photo > .pb-body { padding: 0 22px 22px; }
.prose-block--photo > .pb-body p { color: var(--muted); margin: 0 0 16px; }
.prose-block--photo > .pb-body .dots { margin: 0; }
.prose-blocks:has(> :nth-child(3):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 900px) { .prose-blocks:has(> :nth-child(3):last-child) { grid-template-columns: 1fr; } }
/* Headings with nothing beside them run the full width, so they sit on one line where they fit (Luke, 9 Nov).
   Lead copy under them runs wider too. Headings beside a picture, form or cover keep their column. */
.wrap > .h-block > h2.measure, .wrap > div > .h-block > h2.measure, .section > .wrap > .h-block > h2 { max-width: none; }
/* Section leads run the full width of the page on desktop, like the headings (Luke, 11 Nov). */
.wrap > .h-block > .lead.measure, .wrap > div > .h-block > .lead.measure { max-width: none; }
.steps-head h2, .why2 > h2, .fx-comp h2, .ms-close--solo, .ms-close--solo h2 { max-width: none !important; }
.kpt-carousel-head > div:first-child, .kpt-carousel-head > .h-block { max-width: calc(100% - 140px) !important; }
/* Ingredients, What makes our bases different: certification logos under the icon row (Luke, 9 Nov). */
.diff-logos { margin-top: 56px; }
/* Base strength in a black circle, like the Shopify pack shots (Luke, 9 Nov). */
.base-visual .base-x { display: grid; place-items: center; width: 84px; height: 84px; border-radius: 50%; background: var(--ink); color: var(--white) !important; font-size: 1.6rem; letter-spacing: -.02em; text-shadow: none; left: 16px; top: 16px; }
.base-visual--hero .base-x { width: 72px; height: 72px; font-size: 1.3rem; }
.fx-comp:has(> :only-child) { grid-template-columns: 1fr; }
.fx-comp:has(> :only-child) p { max-width: none !important; }
/* Homepage map: the three facts sit in a row beneath the map (Luke, 10 Nov, from Matter's design). */
.c4-reach--stack { grid-template-columns: 1fr; gap: 20px; }
.c4-reach--stack .c4-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.c4-reach--stack .c4-fact::before { display: none; }
@media (max-width: 860px) { .c4-reach--stack .c4-facts { grid-template-columns: 1fr; } }
/* Guide download (homepage and every page with it): heading across the top, cover left, words right (Luke, 10 Nov). */
.guide--split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); row-gap: 28px; }
.guide--split .guide-title { grid-column: 1 / -1; text-align: left; margin: 0; }
.guide--split .guide-intro { font-weight: 700; }
@media (max-width: 860px) { .guide--split { grid-template-columns: 1fr; } .guide--split .guide-title { text-align: left; } }
.c4-reach--stack .c4-map img { max-width: 900px; margin: 0 auto; }
.report-strip.guide--split .report-strip-img { justify-self: center; max-width: 520px; }
.report-strip.guide--split .btn-row { margin-top: 24px; }

/* 10 Nov round (Luke) */
/* Who We Help: the team links as solid buttons */
.point-row .pb-links .link { background: var(--ink); color: var(--white); background-image: none; padding: 12px 18px; }
.point-row .pb-links .link:hover { background: var(--yellow); color: var(--ink); }
.section--ink .point-row .pb-links .link { background: var(--yellow); color: var(--ink); }
/* Tables in the Fix a Problem style: Operations (two even columns) and Shop */
.fix-table--even td, .fix-table--even td:first-child { font-weight: 400; color: #d6d6d6; width: 50%; }
.shop-table td { vertical-align: middle; }
.shop-table td:first-child { width: 32%; }
.shop-table td:first-child .flag { display: inline-block; vertical-align: middle; width: 42px; height: 28px; margin: 0 14px 0 0; }
.shop-table td:last-child { width: 1%; white-space: nowrap; text-align: right; }
.shop-table .btn { padding: 12px 18px; border: 0; }
/* Create a New Drink: the links list in the same style */
.fix-list { background: #151515; color: var(--white); }
.fix-list-head { font-family: var(--mono); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--yellow); font-weight: 800; padding: 18px 24px; border-bottom: 1px solid #333; }
.fix-list ul { list-style: none; margin: 0; padding: 0; }
.fix-list li a { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 18px 24px; border-bottom: 1px solid #2a2a2a; color: var(--white); text-decoration: none; font-weight: 700; }
.fix-list li:last-child a { border-bottom: 0; }
.fix-list li a .arrow { color: var(--yellow); }
.fix-list li a:hover { background: var(--yellow); color: var(--ink); }
.fix-list li a:hover .arrow { color: var(--ink); }
/* About: yellow boxes like Ingredients */
.ab-facts .c4-fact strong { font-size: clamp(1.15rem, 1.6vw, 1.35rem); line-height: 1.2; margin-bottom: 8px; display: block; }
/* Fix a Problem: five batches against a spec band */
.fx-spec { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.fx-spec-plot { position: relative; height: 120px; border-left: 2px solid var(--ink); border-bottom: 2px solid var(--ink); margin-bottom: 12px; }
.fx-spec-band { position: absolute; left: 0; right: 0; bottom: 35%; height: 30%; background: rgba(250, 228, 0, .3); border-top: 1.5px dashed var(--ink); border-bottom: 1.5px dashed var(--ink); }
.fx-spec-band span { position: absolute; right: 4px; top: 3px; font-family: var(--mono); font-size: .62rem; letter-spacing: .06em; text-transform: uppercase; font-weight: 800; }
.fx-spec-plot i { position: absolute; width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--ink); background: var(--white); transform: translate(-50%, 50%); }
.fx-spec-plot i.in { background: var(--yellow); }
.fx-spec strong { display: block; font-size: .95rem; }
.fx-spec em { font-style: normal; font-size: .85rem; color: var(--muted); }
/* Enquiry form: a pair of rings behind the box corner */
.enq-form { position: relative; isolation: isolate; }
.enq-form > .form { position: relative; z-index: 1; }
.enq-rings { position: absolute; top: 0; right: 0; width: var(--gw); height: auto; transform: translate(45%, -50%); z-index: 0; pointer-events: none; }
@media (max-width: 760px) { .enq-rings { width: calc(var(--gw) * .6); transform: translate(15%, -60%); } }
/* Blog: topics as a dropdown */
.blog-filter { display: inline-flex; align-items: center; gap: 12px; margin: 0 0 32px; font-weight: 700; }
.blog-filter select { font: 700 1rem var(--font); padding: 12px 40px 12px 16px; border: 2px solid var(--ink); border-radius: 0; background: var(--white); color: var(--ink); min-width: 240px; }
.blog-filter select:focus { outline: none; box-shadow: 0 0 0 3px var(--yellow); }
.fx-spec-band span { top: auto; bottom: calc(100% + 3px); right: 0; }
.shop-table .btn { min-width: 150px; justify-content: center; }
.enq-rings { width: calc(var(--gw) * 2.2); transform: translate(40%, -48%); }
@media (max-width: 760px) { .enq-rings { width: calc(var(--gw) * 1.2); transform: translate(10%, -60%); } }
.carousel-head h2 { max-width: none !important; }
.carousel-head h2 { text-wrap: pretty; }
/* From idea to shelf, stage detail section (Luke, 10 Nov) */
.its--detail > h2 { margin-bottom: 0; }
.its-table td:first-child { width: 30%; }
.its-table td { width: 35%; }
.its--detail .its-need, .its--detail .its-need li, .its--detail .its-need-h p { color: var(--ink); }
.its--detail .its-need li svg { color: var(--ink); }
.its--detail .its-need-h { border-right-color: var(--ink); }
/* 11 Nov round (Luke) */
/* Fact boxes only point when they sit beside the map */
.c4-fact::before { display: none; }
.c4-reach:not(.c4-reach--stack) .c4-fact::before { display: block; }
/* Answer boxes after a challenge row */
.ans-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; }
.ans-facts:has(> :nth-child(6)) { grid-template-columns: repeat(3, 1fr); }
/* Operations: table in the guides' recipe style */
.recipe-table { width: 100%; border-collapse: collapse; background: var(--white); border: 10px solid var(--yellow); }
.recipe-table th { background: var(--yellow); color: var(--ink); text-align: left; font-weight: 800; font-size: 1.05rem; padding: 14px 18px 18px; }
.recipe-table td { padding: 14px 18px; border: 1px solid var(--ink); color: var(--ink); vertical-align: top; width: 50%; }
.recipe-table tr:first-child td { border-top: 0; }
/* Shop: four columns */
.shop-cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.shop-col { background: var(--white); color: var(--ink); padding: 24px; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.shop-col .flag { width: 48px; height: 32px; display: block; }
.shop-col h3 { margin: 6px 0 0; font-size: 1.2rem; }
.shop-col p { margin: 0 0 8px; flex: 1; }
@media (max-width: 1000px) { .shop-cols { grid-template-columns: 1fr 1fr; } .ans-facts:has(> :nth-child(6)) { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .shop-cols, .ans-facts:has(> :nth-child(6)) { grid-template-columns: 1fr; } }
/* Component library (hidden reference page) */
.cl-intro { max-width: 1120px; margin: 0 auto; padding: 64px 24px 32px; }
.cl-intro h1 { margin: 0 0 12px; }
.cl-intro ol { columns: 3; gap: 32px; padding-left: 20px; font-weight: 700; }
.cl-intro ol a { color: var(--ink); }
.cl-label { display: flex; gap: 16px; align-items: flex-start; background: var(--ink); color: var(--white); padding: 18px max(24px, calc((100% - 1120px) / 2)); border-top: 6px solid var(--yellow); scroll-margin-top: 90px; }
.cl-label .cl-n { flex: 0 0 36px; height: 36px; border-radius: 50%; background: var(--yellow); color: var(--ink); display: grid; place-items: center; font-weight: 800; }
.cl-label strong { display: block; font-size: 1.2rem; }
.cl-label span:not(.cl-n) { display: block; color: #d6d6d6; }
.cl-label em { display: block; font-style: normal; font-size: .82rem; color: #9a9a9a; margin-top: 4px; }
@media (max-width: 760px) { .cl-intro ol { columns: 1; } }
/* Stats bar: numbers in black circles, like the base pack shots (Luke, 11 Nov) */
.stat .big { display: grid; place-items: center; width: 96px; height: 96px; border-radius: 50%; background: var(--ink); color: var(--white); font-size: 2rem; letter-spacing: -.02em; margin-bottom: 20px; }
.section--ink .stat .big { background: var(--ink); }
/* Smaller, tucked into the box's top-left corner, as on the base pack shots (Luke, 11 Nov) */
.stat { position: relative; padding-top: 92px; }
.stat .big { position: absolute; left: 16px; top: 16px; width: 60px; height: 60px; font-size: 1.2rem; margin: 0; }
/* Process (11 Nov): stage two table, stage three ticks in two columns */
.proc-table td:first-child { width: 28%; }
.checks--2 { grid-template-columns: 1fr 1fr; column-gap: 40px; }
@media (max-width: 760px) { .checks--2 { grid-template-columns: 1fr; } }
[id^="stage-"] { scroll-margin-top: 100px; }
.c4-steps--panels p .link { display: table; margin-top: 12px; }
.c4-steps--panels p .link { color: var(--white); }
.c4 .v2-c .c4-steps--panels p .link, .c4-steps--panels p .link { color: var(--white); }
.c4-steps--panels p .link { white-space: nowrap; }
/* Process stages: text and photo (Luke, 11 Nov); number as the journey-step badge */
.proc-stage .stage-num { width: 36px; height: 36px; border: 0; font-size: .95rem; }
.proc-stage .checks { margin-bottom: 0; }
.proc-stage .statement { margin-top: 32px; }
/* Yellow band carrying a statement line (Process, Luke 11 Nov) */
.cta-statement .cta-band h2 { max-width: 34ch; font-size: clamp(1.35rem, 2.2vw, 1.85rem); line-height: 1.25; }
.proc-ybox { margin-top: 28px; }
.proc-ybox .c4-fact { padding: 22px 24px; }
.proc-ybox .c4-fact strong { display: block; font-size: 1.1rem; line-height: 1.35; }
.proc-ybox .c4-fact p { margin: 10px 0 0; }
/* Process stage four: the key line in a black box, like How we fix it on Fix a Problem (Luke, 11 Nov) */
.proc-dark { margin-top: 28px; background: var(--ink); border-color: var(--ink); color: var(--white); }
.proc-dark p { color: var(--white); font-weight: 700; font-size: 1.1rem; line-height: 1.4; margin: 0; }
/* Create a New Drink stage table in the recipe style: three columns */
.recipe-table.its-table td { width: auto; }
.recipe-table.its-table td:first-child { width: 28%; font-weight: 700; }
/* Process overview: "See what happens" on its own line with the arrow beside it, lined up across the four panels */
.c4-steps--panels p .link { display: flex; width: fit-content; white-space: nowrap; margin-top: 16px; }
.c4-steps--panels > li > div:has(p .link) { display: flex; flex-direction: column; height: 100%; }
.c4-steps--panels > li > div > p:has(.link) { display: flex; flex-direction: column; align-items: flex-start; flex: 1; }
.c4-steps--panels > li > div > p:has(.link) .link { margin-top: auto; padding-top: 16px; }
/* Fix a Problem: the jump links' arrow on the same line as the text (Luke, 11 Nov) */
.anchor-card strong .arrow { display: inline-block; vertical-align: -2px; margin-left: 6px; }
/* Recipe table in Fix a Problem's compliance section */
.table-stage .recipe-table td:first-child { font-weight: 700; }

/* Idea to shelf steps: the question lines are gone, and each step title reads like a footer heading, yellow with a
   short white rule under it (Luke, 11 Nov). */
html:not(:has(.v1, .cx)) .its-steps h3 { color: var(--yellow); margin-bottom: 18px; }
html:not(:has(.v1, .cx)) .its-steps h3::after { content: ""; display: block; width: 32px; height: 3px; background: var(--white); margin-top: 14px; }
/* Fix a Problem: "How we fix it" stays a black box on the orange section too, like the others on the page (Luke, 11 Nov). */
.c4 .v2-c .fx-text .prose-block { background: var(--ink); border-color: var(--ink); color: var(--white); }
.c4 .v2-c .fx-text .prose-block h3 { color: var(--white); }
.c4 .v2-c .fx-text .prose-block p { color: #d8d8d8; }
/* Resource carousels: the lead runs as wide as its heading, up to the arrows (Luke, 11 Nov). */
.kpt-carousel-head .h-block .lead.measure { max-width: none; }

/* Category pages (Luke, 11 Nov): approved components only. The spec is the fact sheet, in one column, and stays put
   as you scroll; the numbers are the stats bar. */
.cv2-facts { align-self: start; }
.cv2-facts h3 { margin-bottom: 14px; }
.cv2 .cv2-facts .fact-sheet { grid-template-columns: 1fr; border-radius: 0; }
.cv2-facts .fact-sheet .fact { border-bottom: 1px solid var(--line-soft); }
.cv2-facts .fact-sheet .fact:last-child { border-bottom: 0; }
.cv2-facts .btn-row { margin-top: 20px; }
.cv2-stats { margin-top: 40px; }
.cv2-blocks + .btn-row { margin-top: 8px; }
/* Long numbers (like $5.5bn) sit in a pill rather than overflowing the circle. */
.cv2-stats .stat .big { width: auto; min-width: 60px; padding: 0 16px; border-radius: 30px; white-space: nowrap; }
.cv2-stats .stat .big { background: var(--yellow); color: var(--ink); }
/* Three or fewer cards fit on desktop, so the arrows and dots only show on smaller screens (Luke, 11 Nov). */
@media (min-width: 901px) { .carousel--fit .carousel-btns, .carousel--fit .pips { display: none; } }

/* Category pages: the section under the hero in the hero colour's brand partner (Luke, 12 Nov) */
.cv2 .c4-sky { background: var(--pair, var(--sky)); }
.cv2.pair-dark .c4-sky { color: #fff; }
.cv2.pair-dark .c4-sky :is(h2, h3, strong) { color: #fff; }
.cv2.pair-dark .c4-sky .ms-benefits p { color: rgba(255, 255, 255, .86); }
.cv2.pair-dark .c4-sky .cv2-facts .fact-sheet, .cv2.pair-dark .c4-sky .cv2-facts .fact-sheet :is(h3, strong, p, td, th, dd, dt) { color: var(--ink); }

/* Process stages: number and copy line up with the top of the photo (Luke, 12 Nov) */
.proc-stage { align-items: start; }
.proc-stage .stage-num { margin-top: 0; }
/* Heading, then supporting paragraphs: no big gap between them (No and Low, Luke 12 Nov) */
.c4 .two-col > div > .h-block:has(+ .muted) { margin-bottom: 20px; }
/* A button under an open row sits a steady 40px below it (Kombucha, Luke 12 Nov) */
.c4 .cv2-blocks + .btn-row { margin-top: 40px; }
.c4 .cv2-blocks > :last-child { margin-bottom: 0; }
/* Who We Are map: a key, and yellow stock dots so they show on the blue section (Luke, 12 Nov) */
.ww-mapfig { margin: 0; }
.ww-key { display: flex; flex-wrap: wrap; gap: 10px 24px; margin-top: 16px; font-size: .95rem; color: var(--ink); }
.ww-key i { box-shadow: 0 0 0 2px var(--ink); }
/* Two cards only: each takes half the width on desktop rather than leaving a gap (Operations, Luke 12 Nov) */
@media (min-width: 901px) { .carousel--fit .post-track:has(> :nth-child(2):last-child) { grid-auto-columns: calc((100% - 20px) / 2); } }
.blog-pages { align-items: center; justify-content: center; gap: 16px; margin-top: 40px; }
.blog-pages [data-page-label] { font-weight: 700; }
.blog-pages .btn:disabled { opacity: .35; cursor: default; }
/* Sensory profile as in the factsheet: a thin black line with Low, Medium and High ticks and a solid black dot (Luke, 12 Nov) */
.glance-card .sense-track { height: 14px; border-radius: 0; margin-top: 6px; box-shadow: none;
  background: linear-gradient(var(--ink), var(--ink)) center / 100% 2px no-repeat, linear-gradient(var(--ink), var(--ink)) left center / 2px 14px no-repeat,
    linear-gradient(var(--ink), var(--ink)) center / 2px 14px no-repeat, linear-gradient(var(--ink), var(--ink)) right center / 2px 14px no-repeat; }
.glance-card .sense-track span { width: 20px; height: 20px; margin-left: 0; background: var(--ink); box-shadow: none; }
.glance-card .sense-ends { display: grid; grid-template-columns: repeat(3, 1fr); color: var(--ink); margin-top: 10px; }
.glance-card .sense-ends span:nth-child(2) { text-align: center; }
.glance-card .sense-ends span:nth-child(3) { text-align: right; }
/* With the eyebrows gone, a long heading keeps clear of a group on the section line above it (Functional Water, 12 Nov) */
@media (min-width: 1440px) { .cv2 section:has(> .c4-g--r) > .wrap > .h-block h2 { max-width: calc(100% - 200px); } }

/* Enquiry form: an orange wedge tucked behind the form's top corner, no loose rings (Luke, 12 Nov, option C) */
.enq-rings { width: 240px; transform: translate(36%, -38%); }
@media (max-width: 760px) { .enq-rings { width: 150px; transform: translate(18%, -55%); } }
.cv2-facts .fact-sheet { grid-template-columns: 1fr; }
.tq-sheet { grid-template-columns: 5fr 7fr; }
@media (max-width: 900px) { .tq-sheet { grid-template-columns: 1fr; } }
/* Shop: the boxes you press carry the same 2px black outline as the article and case cards (Luke, 12 Nov) */
.shop-col { border: 2px solid var(--ink); }
/* Founders "What you get": the four answers beside a photo of a base (Luke, 12 Nov) */
.wyg-split { align-items: stretch; }
.wyg-split .ans-facts { grid-template-columns: 1fr 1fr; height: 100%; }
.wyg-split .wyg-photo { aspect-ratio: 1; align-self: center; }
.wyg-split .wyg-photo img { width: 100%; height: 100%; object-fit: contain; display: block; }
/* Carousels show whole cards on desktop: two to a row when the cards would otherwise be cut off (Home, Luke 12 Nov) */
@media (min-width: 901px) { .track { grid-auto-columns: min(560px, calc((100% - 20px) / 2)); } }
/* Dark brand blue section (Founders "What you get", Luke 12 Nov): the navy beaker photo sits on its own colour */
.section--navy { background: var(--navy); color: #fff; }
.section--navy :is(h2, .lead, .lead p) { color: #fff; }
/* Full width on desktop (Luke, 12 Nov): statements and the certifications intro run the width of the page */
.statement { max-width: none; }
.certs-block .lead { max-width: none; }

/* Language menu in the header (Luke, 13 Nov). Reuses the nav dropdown; shown once Weglot has loaded. */
.nav-cta-wrap { display: flex; align-items: center; gap: 6px; }
.nav-cta { white-space: nowrap; }
.nav-lang[hidden] { display: none !important; }
.nav-cta-wrap .nav-lang > .nav-link { display: flex; align-items: center; gap: 7px; white-space: nowrap; }
.nav-lang .lang-flag { display: block; width: 20px; height: 14px; flex: none; outline: 1px solid rgba(11,11,11,.15); }
.nav-lang .lang-flag svg { width: 100%; height: 100%; display: block; }
.nav-lang .dropdown { min-width: 180px; left: auto; right: 0; }
.nav-lang .dropdown a { display: flex; align-items: center; gap: 10px; }
.nav-lang .dropdown a[aria-current] { font-weight: 800; }
#weglot_here, .weglot-container, .country-selector { display: none !important; }
@media (min-width: 1021px) and (max-width: 1240px) { .nav-lang [data-lang-code] { display: none; } }
@media (max-width: 1020px) {
  .nav-cta-wrap { flex-direction: column; align-items: stretch; gap: 0; }
  .nav-cta-wrap .nav-lang > .nav-link { justify-content: flex-start; background: none !important; border-bottom: 0; padding-top: 18px; }
  .nav-cta-wrap .nav-lang > .nav-link .chev { margin-left: auto; }
  .nav-lang .dropdown { min-width: 0; }
  .nav-cta { margin-top: 24px; }
}

/* Producer's Guide (Luke, 13 Nov): numbers as a slim break under the hero, then a spread of the guide beside the chapters. */
.section.kpt-factband { padding-block: 72px !important; }
.kpt-factband .kpt-facts { margin-top: 0; }
/* Producer's Guide numbers (Luke, 13 Nov): four pack shots in a row (a page from the guide on a brand colour), number in
   the black circle as on the base pack shots, words underneath. */
.kpt-packs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.kpt-pack { display: grid; gap: 18px; align-content: start; color: var(--ink); text-decoration: none; }
.kpt-pack-shot { position: relative; display: block; aspect-ratio: 1; overflow: hidden; }
.kpt-pack-shot img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s ease; }
.kpt-pack:hover .kpt-pack-shot img { transform: scale(1.04); }
.kpt-pack-n { position: absolute; left: 12px; top: 12px; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--ink); color: var(--white); font-weight: 800; font-size: 1.15rem; }
.kpt-pack-txt strong { display: block; font-size: 1.2rem; margin-bottom: 6px; color: var(--ink); }
.kpt-pack-txt span { color: var(--muted); }
@media (max-width: 900px) { .kpt-packs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 16px; } .kpt-pack-n { width: 44px; height: 44px; font-size: 1rem; left: 8px; top: 8px; } }
/* What's Inside chapters: no pointer at the end of each row of three (Luke, 13 Nov). */
.kpt-chapters { row-gap: 44px; }
.kpt-chapters li:nth-child(3n)::after { display: none; }
/* Longer figures ($213bn, 1,000L, 2026) sit in a pill rather than overflowing the circle. */
.kpt-pack-n--long { width: auto; min-width: 56px; padding: 0 16px; border-radius: 999px; }
/* Fix a Problem on phones and tablets (Luke, 13 Nov): the photo-first sections go back to one column. */
@media (max-width: 1000px) { .fx.fx--media-first { grid-template-columns: 1fr; gap: 36px; } }
/* Footer on phones (Luke, 13 Nov): the four link lists flow down two columns, so a short list doesn't leave a gap. */
@media (max-width: 900px) {
  .foot-top { display: block; columns: 2; column-gap: 32px; }
  .foot-brand { column-span: all; margin-bottom: 32px; }
  .foot-col { break-inside: avoid; margin-bottom: 32px; }
}
/* Base pages (Luke, 13 Nov): six certification logos as two rows of three, on desktop and phones. */
.glance-card .cert-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px 24px; align-items: center; justify-items: center; }
.glance-card .cert-row img { height: 60px; width: auto; max-width: 100%; object-fit: contain; }
@media (max-width: 560px) { .glance-card .cert-row img { height: 52px; } }
/* Base pages: formats band (Luke, 13 Nov), three icons centred on black with a Buy samples button. */
.base-formats .check-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); text-align: center; margin-top: 8px; }
.base-formats .check-card { display: flex; flex-direction: column; align-items: center; }
.base-formats .check-card strong { color: var(--white); }
.base-formats .check-card p:empty { display: none; }
.base-formats .btn-row { margin-top: 40px; }
@media (max-width: 700px) { .base-formats .check-grid { grid-template-columns: 1fr; gap: 28px; } }
/* Homepage routes (Luke, 13 Nov): no "Route 1/2" label; the title and its line sit in the black box, at the same size
   as before. On desktop both titles take two lines and the two black boxes line up. */
.c4-route-head { background: var(--ink); color: var(--white); padding: 26px 26px 24px; }
.c4-route-head h3 { font-size: clamp(1.5rem, 2.2vw, 1.9rem); margin-bottom: 8px; color: var(--yellow) !important; text-wrap: balance; }
.c4-route-head p { margin: 0; color: #d8d8d8; }
.c4-route-body { padding-top: 4px; }
@media (min-width: 861px) {
  .c4-routes { grid-template-rows: auto 1fr; }
  .c4-route { display: grid; grid-row: span 2; grid-template-rows: subgrid; }
  .c4-route-head h3 { max-width: 12em; }
}
/* Homepage "Who's using" group: on tablets it sat on the line under the icons, so it shows on phones and desktop only. */
@media (min-width: 700px) and (max-width: 1000px) { .c4-who .c4-gb { display: none; } }