/* ==========================================================================
   Ported from the approved prototype design system, job [2042].
   Source: wireframe-studio/projects/2026-nzwc-website/prototype/src/css/nzwc.css
   Do not redesign here — change the prototype, then re-port.
   Only the @font-face block and asset paths differ from the source.
   ========================================================================== */
/* ==========================================================================
   New Zealand Wool Collective — website design system
   Prototype v1 · Established Group · [2042] · 21 Oct 2026
   Rebuilt from the approved 14 Oct 2026 visuals (Home Option A, Nav v5 D4,
   Brands & Innovation set). Brand: Ocean Design, Mechanical Spec 1.1.
   Desktop reference width 1440 · mobile 390.
   ========================================================================== */

/* Fonts: the theme ships the full variable faces as .woff2 (the prototype used
   static .otf/.ttf). Weight axes cover every weight the design system uses, and
   the variable builds carry latin-ext, so Maori macrons render. */
@font-face {
  font-family: "General Sans";
  src: url("../fonts/GeneralSans-Variable.woff2") format("woff2-variations"),
       url("../fonts/GeneralSans-Variable.woff2") format("woff2");
  font-weight: 200 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Geist Mono";
  src: url("../fonts/GeistMono-Variable.woff2") format("woff2-variations"),
       url("../fonts/GeistMono-Variable.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
}

:root {
  /* Brand colours — Mechanical Spec p4 */
  --ink: #101921;
  --cobalt: #0046C7;
  --teal: #A5DFDE;
  --fern: #79D981;
  --fleece: #CBC5C7;
  --tan: #AF8B62;
  --rust: #74391F;
  --marigold: #F4AF2D;
  --straw: #F1ECA7;
  --bone: #EFEFEB;
  --white: #FFFFFF;

  --muted: #4A5157;          /* body copy on white */
  --ink-40: #9FA3A6;
  --line: #101921;           /* 1px rules are ink in the approved visuals */
  --line-soft: rgba(16, 25, 33, .16);
  --line-on-dark: rgba(255, 255, 255, .55);

  /* Section wayfinding colours — approved 14 Oct 2026 */
  --s-growers: var(--fern);
  --s-farming: var(--tan);
  --s-market: var(--teal);
  --s-brands: var(--marigold);
  --s-education: var(--straw);
  --s-about: var(--cobalt);

  --sans: "General Sans", system-ui, -apple-system, sans-serif;
  --mono: "Geist Mono", ui-monospace, "SF Mono", monospace;

  --wrap: 1240px;        /* content, mega menu, header and footer all share one width (28 Oct 2026) */
  --wrap-wide: 1240px;
  --gutter: 40px;
  --radius: 4px;
  --header-h: 96px;
}

/* ---------------------------------------------------------------- reset */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; scroll-behavior: smooth; }
body { font-family: var(--sans); font-weight: 400; color: var(--ink); background: var(--white); font-size: 18px; line-height: 1.45; }
img, svg, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
strong, b { font-weight: 600; }

.wrap { width: min(var(--wrap), calc(100% - 2 * var(--gutter))); margin-inline: auto; }
.wrap-wide { width: min(var(--wrap-wide), calc(100% - 2 * var(--gutter))); margin-inline: auto; }
.nowrap { white-space: nowrap; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ---------------------------------------------------------------- type */
h1, .h1 { font-weight: 600; font-size: 60px; line-height: 1.06; letter-spacing: -.02em; }
h2, .h2 { font-weight: 600; font-size: 50px; line-height: 1.08; letter-spacing: -.02em; }
h3, .h3 { font-weight: 600; font-size: 30px; line-height: 1.14; letter-spacing: -.015em; }
h4, .h4 { font-weight: 600; font-size: 22px; line-height: 1.2; letter-spacing: -.01em; }
.display { font-weight: 600; font-size: 96px; line-height: .96; letter-spacing: -.025em; }
.lead { font-size: 21px; line-height: 1.5; }
.copy { font-size: 18px; line-height: 1.5; }
.copy-sm { font-size: 16px; line-height: 1.5; }
.muted { color: var(--muted); }
p + p { margin-top: .9em; }

.eyebrow { font-family: var(--mono); font-weight: 500; font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); line-height: 1; }
.eyebrow.ink { color: var(--ink); }
.eyebrow .chip { display: inline-block; width: 9px; height: 9px; background: var(--c, var(--cobalt)); margin-right: 9px; vertical-align: 0; }

/* ---------------------------------------------------------------- links & buttons */
.btn { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 15px; line-height: 1; padding: 14px 24px; border-radius: 999px; border: 1.5px solid transparent; white-space: nowrap; transition: transform .15s ease, background .15s ease; }
.btn:hover { transform: translateY(-1px); }
.btn-ink { background: var(--ink); color: var(--white); }
.btn-cobalt { background: var(--cobalt); color: var(--white); }
.btn-section { background: var(--c, var(--cobalt)); color: var(--ink); }
.btn-section.on-dark { color: var(--white); }
.btn-outline-light { border-color: var(--white); color: var(--white); }
.btn-outline { border-color: var(--ink); color: var(--ink); }
.btn-marigold { background: var(--marigold); color: var(--ink); }
.btn-sm { font-size: 14px; padding: 12px 20px; }
.btns { display: flex; gap: 12px; flex-wrap: wrap; }

.link { font-weight: 600; font-size: 15px; display: inline-flex; align-items: center; gap: 6px; }
.link.ul { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 6px; }
.link.lg { font-size: 17px; }

/* ---------------------------------------------------------------- patterns */
.pat { background-repeat: repeat-x; background-position: left top; background-size: auto 100%; }

/* ==========================================================================
   HEADER
   ========================================================================== */
.site-header { position: relative; z-index: 50; background: var(--white); color: var(--ink); }
.site-header .bar { height: var(--header-h); display: flex; align-items: center; justify-content: space-between; gap: 32px; }
.site-header .logo { display: block; }
.site-header .logo img { height: 48px; width: auto; }
.site-header .logo .l-white { display: none; }
.site-header .primary { display: flex; align-items: stretch; gap: 0; height: var(--header-h); }
.site-header .primary > li { position: static; display: flex; }
.site-header .primary > li > a { display: flex; align-items: center; padding: 0 18px; font-weight: 600; font-size: 16px; position: relative; }
.site-header .primary > li > a::after { content: ""; position: absolute; left: 18px; right: 18px; bottom: 0; height: 4px; background: var(--c); opacity: 0; transition: opacity .15s; }
.site-header .primary > li.active > a::after, .site-header .primary > li.open > a::after { opacity: 1; }
.site-header .tools { display: flex; align-items: center; gap: 20px; }
.site-header .tools .search { width: 24px; height: 24px; display: grid; place-items: center; }
.site-header .burger { display: none; width: 28px; height: 20px; flex-direction: column; justify-content: space-between; }
.site-header .burger span { display: block; height: 2px; background: currentColor; }

/* over the hero: transparent, white */
.site-header.over { position: absolute; left: 0; right: 0; top: 0; background: transparent; color: var(--white); }
.site-header.over .logo .l-black { display: none; }
.site-header.over .logo .l-white { display: block; }
.site-header.over .primary > li > a::after { background: var(--white); }
.site-header.over.menu-open, .site-header.over.menu-open .mega { color: var(--ink); }
.site-header.over.menu-open { background: var(--white); }
.site-header.over.menu-open .logo .l-black { display: block; }
.site-header.over.menu-open .logo .l-white { display: none; }
.site-header.over.menu-open .primary > li > a::after { background: var(--c); }

/* mega menu */
.mega { position: absolute; left: 0; right: 0; top: var(--header-h); background: var(--white); color: var(--ink); border-top: 1px solid var(--line-soft); box-shadow: 0 24px 40px -24px rgba(16,25,33,.25); display: none; }
.site-header .primary > li.open .mega { display: block; }
.mega .inner { display: grid; grid-template-columns: 250px 1fr 260px; gap: 0 48px; padding: 52px 0 56px; }
.mega .inner.no-feature { grid-template-columns: 250px 1fr; }
.mega .intro { border-right: 1px solid var(--line-soft); padding-right: 40px; display: flex; flex-direction: column; }
.mega .intro h3, .mega .intro .h3 { font-size: 30px; margin-bottom: 18px; }
.mega .intro p { font-size: 16px; line-height: 1.5; color: var(--muted); max-width: 230px; }
.mega .intro .btn { margin-top: auto; align-self: flex-start; padding-top: 14px; }
.mega .intro .btn:not(:last-child) { margin-top: 32px; }
.mega .links { display: grid; grid-template-columns: 1fr 1fr; gap: 0 26px; align-content: start; }
.mega .links a { display: block; padding: 0 0 14px; border-bottom: 1px solid var(--line); margin-bottom: 22px; }
.mega .links a:nth-last-child(-n+2) { }
.mega .links .t { display: flex; justify-content: space-between; align-items: baseline; font-weight: 600; font-size: 16px; }
.mega .links .d { display: block; font-size: 14px; line-height: 1.45; color: var(--muted); margin-top: 6px; }
.mega .feature { background: var(--bone); border-radius: var(--radius); overflow: hidden; align-self: start; }
.mega .feature img { width: 100%; aspect-ratio: 3/2; object-fit: cover; }
.mega .feature .body { padding: 20px 20px 22px; }
.mega .feature .eyebrow { margin-bottom: 12px; }
.mega .feature h4, .mega .feature .h4 { font-size: 19px; line-height: 1.22; margin-bottom: 14px; }
.mega .feature .link { font-size: 15px; }

/* mobile panel */
.mnav { display: none; }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-footer { background: var(--cobalt); color: var(--white); }
.site-footer .top { padding: 62px 0 52px; display: grid; grid-template-columns: 1fr 1fr; gap: 48px; }
.site-footer .brand img { height: 48px; width: auto; margin-bottom: 36px; }
.site-footer .brand .tag { font-weight: 600; font-size: 30px; line-height: 1.12; letter-spacing: -.015em; margin-bottom: 30px; }
.site-footer .links { display: grid; grid-template-columns: 1fr 1fr; gap: 0 30px; align-self: start; }
.site-footer .links a { display: flex; justify-content: space-between; align-items: center; font-weight: 600; font-size: 21px; padding: 16px 0 14px; border-bottom: 1px solid var(--line-on-dark); }
.site-footer .links a .arr { font-family: var(--sans); font-weight: 600; }
.site-footer .bottom { position: relative; height: 120px; background-image: url("../patterns/basket-weave-cobalt-tonal.svg"); background-repeat: repeat-x; background-size: auto 100%; background-position: left top; }
.site-footer .bottom .wrap-wide { position: absolute; left: 0; right: 0; bottom: 18px; display: flex; justify-content: space-between; font-size: 13px; margin-inline: auto; }
.site-footer .bottom span + span { margin-left: 18px; }

/* ==========================================================================
   BLOCKS
   ========================================================================== */

/* B01 Hero — full-bleed image/video, display headline bottom-left */
.hero { position: relative; min-height: 860px; display: flex; align-items: flex-end; color: var(--white); overflow: hidden; isolation: isolate; }
.hero .media { position: absolute; inset: 0; z-index: -1; }
.hero .media img, .hero .media video { width: 100%; height: 100%; object-fit: cover; }
.hero .media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(16,25,33,.35), rgba(16,25,33,0) 55%); }
.hero .wrap { padding-bottom: 100px; }
.hero .display { max-width: 840px; }

/* B02 Section tiles — five columns with colour chips */
.tiles { padding: 72px 0 64px; }
.tiles .row { display: grid; grid-template-columns: repeat(5, 1fr); border-top: 1px solid var(--line); }
.tiles .tile { padding: 34px 20px 0 0; border-right: 1px solid var(--line-soft); margin-right: 20px; display: flex; flex-direction: column; min-height: 230px; }
.tiles .tile:last-child { border-right: 0; margin-right: 0; }
.tiles .chip { width: 30px; height: 4px; background: var(--c); margin-bottom: 20px; }
.tiles h4, .tiles .h4 { font-size: 22px; margin-bottom: 10px; padding-right: 8px; }
.tiles p { font-size: 15.5px; line-height: 1.5; color: var(--muted); max-width: 22ch; }
.tiles .link { margin-top: auto; padding-top: 28px; font-size: 15px; }

/* B03 FUSCA — straw band, headline + data card */
.fusca { background: var(--straw); padding: 92px 0 100px; }
.fusca .wrap { display: grid; grid-template-columns: 1fr 590px; gap: 60px; align-items: center; }
.fusca h2 { font-size: 60px; margin-bottom: 30px; }
.fusca .copy { max-width: 32ch; margin-bottom: 30px; }
.fusca .card { background: var(--white); border-radius: var(--radius); padding: 26px 28px 20px; }
.fusca .card .head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.fusca .card .head h4, .fusca .card .head .h4 { font-size: 20px; }
.fusca .range { display: flex; gap: 6px; }
.fusca .range button { font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: .04em; width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--line-soft); display: grid; place-items: center; }
.fusca .range button.on { background: var(--ink); color: var(--white); border-color: var(--ink); }
.fusca .price { display: flex; align-items: baseline; gap: 12px; margin-bottom: 14px; }
.fusca .price .n { font-size: 60px; line-height: 1; letter-spacing: -.02em; }
.fusca .price .u { font-size: 15px; color: var(--muted); }
.fusca .chart { background: var(--straw); border-radius: var(--radius); height: 162px; position: relative; }
.fusca .chart svg { width: 100%; height: 100%; }
.fusca .foot { display: flex; justify-content: space-between; font-size: 12.5px; color: var(--muted); margin-top: 14px; }

/* B04 Image + stats table */
.stats { padding: 100px 0 96px; }
.stats .wrap { display: grid; grid-template-columns: 527px 1fr; gap: 92px; align-items: center; }
.stats .img { border-radius: var(--radius); overflow: hidden; }
.stats .img img { width: 100%; aspect-ratio: 527/595; object-fit: cover; }
.stats h2 { font-size: 56px; color: var(--marigold); margin-bottom: 24px; }
.stats .lead { margin-bottom: 28px; }
.stats table { width: 100%; border-collapse: collapse; margin-bottom: 36px; }
.stats td { padding: 18px 0 20px; border-top: 1px solid var(--line); vertical-align: middle; }
.stats tr:last-child td { border-bottom: 1px solid var(--line); }
.stats td.n { font-size: 50px; line-height: 1; letter-spacing: -.02em; width: 52%; padding-right: 20px; }
.stats td.d { font-size: 17px; line-height: 1.4; }

/* B05 Feature band — full-bleed image with a colour card */
.featureband { position: relative; min-height: 700px; display: flex; align-items: center; isolation: isolate; }
.featureband .media { position: absolute; inset: 0; z-index: -1; }
.featureband .media img { width: 100%; height: 100%; object-fit: cover; }
.featureband .card { width: 480px; margin-top: 60px; padding: 44px 44px 46px; border-radius: var(--radius); background: var(--c, var(--fern)); }
.featureband .card h3, .featureband .card .h3 { font-size: 40px; line-height: 1.1; margin-bottom: 24px; }
.featureband .card p { font-size: 18px; margin-bottom: 30px; max-width: 30ch; }

/* B06 Section header row — heading, intro left, link right */
.sechead { display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; margin-bottom: 44px; }
.sechead h2 { margin-bottom: 14px; }
.sechead p { max-width: 62ch; color: var(--muted); }
.sechead .link { flex: none; margin-bottom: 4px; }

/* B07 Showcase grid — one feature + two cards + colour tile */
.showcase { padding: 76px 0 120px; }
.showcase .grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.showcase .big { display: block; }
.showcase .big img { width: 100%; aspect-ratio: 568/470; object-fit: cover; border-radius: var(--radius); }
.showcase .big .eyebrow { margin: 26px 0 16px; }
.showcase .big h3, .showcase .big .h3 { font-size: 38px; margin-bottom: 18px; max-width: 16ch; }
.showcase .big p { font-size: 16px; color: var(--muted); max-width: 54ch; }
.showcase .more { margin-top: 28px; }
.showcase .side { display: grid; grid-template-rows: auto auto; gap: 24px; }
.showcase .card img { width: 100%; object-fit: cover; border-radius: var(--radius); }
.showcase .card .eyebrow { margin: 18px 0 12px; }
.showcase .card h4, .showcase .card .h4 { font-size: 22px; line-height: 1.2; }
.showcase .wide img { aspect-ratio: 568/380; }
.showcase .pair { display: grid; grid-template-columns: 272px 1fr; gap: 24px; }
.showcase .pair .card img { aspect-ratio: 272/220; }
.showcase .tile { background: var(--c, var(--marigold)); border-radius: var(--radius); padding: 24px; display: flex; flex-direction: column; min-height: 340px; }
.showcase .tile .eyebrow { color: var(--ink); margin-bottom: auto; }
.showcase .tile h4, .showcase .tile .h4 { font-size: 25px; line-height: 1.18; }

/* B08 Latest news — bone band, three cards */
.news { background: var(--bone); padding: 84px 0 96px; }
.news .sechead { margin-bottom: 40px; }
.news .cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.news .card { background: var(--white); border-radius: var(--radius); overflow: hidden; }
.news .card img { width: 100%; aspect-ratio: 371/250; object-fit: cover; }
.news .card .body { padding: 22px 22px 26px; }
.news .card .eyebrow { color: var(--ink); margin-bottom: 14px; }
.news .card h4, .news .card .h4 { font-size: 20px; line-height: 1.25; }

/* B09 Supporters — centred logo row */
.supporters { padding: 60px 0 56px; text-align: center; }
.supporters h4, .supporters .h4 { font-size: 21px; margin-bottom: 30px; }
.supporters .row { display: flex; justify-content: center; align-items: center; gap: 56px; }
.supporters .row img { height: 40px; width: auto; }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 1100px) {
  :root { --gutter: 32px; }
  h2, .h2 { font-size: 42px; }
  .display { font-size: 72px; }
  .tiles .row { grid-template-columns: repeat(3, 1fr); row-gap: 24px; }
  .tiles .tile:nth-child(3) { border-right: 0; }
  .fusca .wrap { grid-template-columns: 1fr; }
  .fusca h2 { font-size: 48px; }
  .stats .wrap { grid-template-columns: 1fr; gap: 48px; }
  .stats .img img { aspect-ratio: 3/2; }
  .mega .inner { grid-template-columns: 220px 1fr; }
  .mega .feature { display: none; }
}

/* Header: the burger and the mobile panel from 1024px down, where the
   six-section bar would otherwise squeeze the logo (Greg, 10 Nov 2026). */
@media (max-width: 1024px) {
  .site-header .primary, .site-header .tools .search { display: none; }
  .site-header .burger { display: flex; }
  .site-header.over.menu-open { background: transparent; color: var(--white); }

  /* mobile panel */
  .mnav { position: fixed; inset: 0; z-index: 60; background: var(--white); color: var(--ink); overflow-y: auto; display: none; }
  body.mnav-open .mnav { display: block; }
  body.mnav-open { overflow: hidden; }
  .mnav .bar { height: var(--header-h); display: flex; align-items: center; justify-content: space-between; }
  .mnav .bar img { height: 36px; }
  .mnav .close { font-size: 28px; line-height: 1; width: 32px; height: 32px; display: grid; place-items: center; }
  .mnav .pane { display: none; padding: 8px 0 40px; }
  .mnav .pane.on { display: block; }
  .mnav .sections li { border-bottom: 1px solid var(--line-soft); }
  .mnav .sections button { width: 100%; display: flex; align-items: center; justify-content: space-between; padding: 20px 0; font-weight: 600; font-size: 20px; text-align: left; }
  .mnav .sections button::before { content: ""; width: 4px; height: 24px; background: var(--c); margin-right: 14px; }
  .mnav .sections button .chev { margin-left: auto; color: var(--ink-40); font-size: 18px; }
  .mnav .search { margin: 28px 0 16px; border: 1px solid var(--line-soft); border-radius: 999px; padding: 12px 18px; display: flex; justify-content: space-between; align-items: center; font-size: 15px; color: var(--muted); }
  .mnav .btn { width: 100%; justify-content: center; }
  .mnav .small-links { display: flex; gap: 22px; font-size: 15px; color: var(--muted); margin-top: 20px; }
  .mnav .back { font-weight: 600; font-size: 14px; margin-bottom: 22px; display: inline-block; }
  .mnav .pane h3, .mnav .pane .h3 { font-size: 27px; margin-bottom: 14px; }
  .mnav .pane .intro { font-size: 14.5px; color: var(--muted); margin-bottom: 20px; }
  .mnav .pane .links a { display: flex; justify-content: space-between; padding: 14px 0; border-bottom: 1px solid var(--line); font-weight: 600; font-size: 17px; }
  .mnav .pane .links a:first-child { border-top: 1px solid var(--line); }
  .mnav .feature { display: grid; grid-template-columns: 94px 1fr; gap: 16px; background: var(--bone); border-radius: var(--radius); padding: 14px; margin: 22px 0; align-items: center; }
  .mnav .feature img { width: 94px; aspect-ratio: 94/78; object-fit: cover; border-radius: 2px; }
  .mnav .feature .eyebrow { font-size: 10px; margin-bottom: 8px; }
  .mnav .feature h4, .mnav .feature .h4 { font-size: 15px; line-height: 1.25; }
}

@media (max-width: 760px) {
  :root { --gutter: 20px; --header-h: 72px; }
  body { font-size: 16px; }
  h1, .h1 { font-size: 38px; }
  h2, .h2 { font-size: 34px; }
  h3, .h3 { font-size: 26px; }
  .display { font-size: 46px; line-height: 1.02; }
  .lead { font-size: 18px; }

  .site-header .logo img { height: 36px; }

  .site-footer .top { grid-template-columns: 1fr; gap: 36px; padding: 48px 0 40px; }
  .site-footer .brand .tag { font-size: 24px; }
  .site-footer .links a { font-size: 18px; }
  .site-footer .links { grid-template-columns: 1fr; }
  .site-footer .bottom { height: 96px; }
  .site-footer .bottom .wrap-wide { flex-direction: column; gap: 6px; font-size: 12px; }

  .hero { min-height: 640px; }
  .hero .wrap { padding-bottom: 56px; }
  .tiles { padding: 44px 0 32px; }
  .tiles .row { grid-template-columns: 1fr; border-top: 0; row-gap: 0; }
  .tiles .tile { border-right: 0; margin-right: 0; border-top: 1px solid var(--line-soft); padding: 22px 0 24px; min-height: 0; }
  .tiles .tile:first-child { border-top: 1px solid var(--line); }
  .tiles .link { padding-top: 16px; }
  .fusca { padding: 56px 0 64px; }
  .fusca h2 { font-size: 36px; }
  .fusca .card { padding: 20px 18px 16px; }
  .fusca .price .n { font-size: 44px; }
  .fusca .range button { width: 28px; height: 28px; font-size: 10px; }
  .stats { padding: 60px 0; }
  .stats h2 { font-size: 36px; }
  .stats td.n { font-size: 34px; }
  .stats td.d { font-size: 15px; }
  .featureband { min-height: 0; padding: 240px 0 40px; }
  .featureband .card { width: 100%; margin-top: 0; padding: 28px 24px 30px; }
  .featureband .card h3, .featureband .card .h3 { font-size: 28px; }
  .sechead { flex-direction: column; align-items: flex-start; gap: 16px; margin-bottom: 28px; }
  .showcase { padding: 52px 0 64px; }
  .showcase .grid { grid-template-columns: 1fr; }
  .showcase .big h3, .showcase .big .h3 { font-size: 28px; }
  .showcase .pair { grid-template-columns: 1fr; }
  .showcase .tile { min-height: 220px; }
  .news { padding: 52px 0 60px; }
  .news .cards { grid-template-columns: 1fr; }
  .supporters .row { flex-wrap: wrap; gap: 28px 32px; }
  .supporters .row img { height: 32px; }
}

/* ==========================================================================
   INNER PAGES — blocks first seen on the Brands & Innovation set (14 Oct 2026)
   ========================================================================== */
.marigold-tint { background: #FDF1D9; }      /* marigold at ~20% on white */
.marigold-mid { background: #F5BE57; }        /* the guides band */

/* I01 Page head — crumb, H1 + strap left, intro right */
.pagehead { padding: 100px 0 0; }
.pagehead .crumb { margin-bottom: 26px; }
.crumb .sep { color: var(--ink-40); margin: 0 10px; }
.crumb .here { color: var(--ink); }
.pagehead .cols { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: end; padding-bottom: 44px; }
.pagehead h1 { font-size: 64px; }
.pagehead .strap { font-size: 24px; color: var(--muted); margin-top: 14px; }
.pagehead .intro { font-size: 18px; line-height: 1.55; color: var(--muted); max-width: 54ch; align-self: center; }
.pagehead.rule .cols { border-bottom: 1px solid var(--line); }
.pagehead.hairline { border-bottom: 1px solid var(--line-soft); }
.pagehead.compact { padding-top: 44px; }
.pagehead.compact .crumb { margin-bottom: 20px; }

/* I02 Child tiles — section children, four across */
.childtiles { padding: 40px 0 72px; }
.childtiles .row { display: grid; grid-template-columns: repeat(4, 1fr); }
.childtiles .tile { padding: 0 24px 0 0; margin-right: 24px; border-right: 1px solid var(--line-soft); display: flex; flex-direction: column; }
.childtiles .tile:last-child { border-right: 0; margin-right: 0; }
.childtiles .chip { width: 30px; height: 4px; background: var(--c, var(--marigold)); margin-bottom: 18px; }
.childtiles h4, .childtiles .h4 { font-size: 22px; margin-bottom: 10px; }
.childtiles p { font-size: 15.5px; line-height: 1.5; color: var(--muted); }
.childtiles .link { margin-top: auto; padding-top: 24px; font-size: 15px; }

/* I03 Carousel band — tinted, heading + counter/arrows, cards overflowing right */
.carousel { padding: 96px 0 90px; overflow: hidden; }
.carousel .eyebrow { margin-bottom: 20px; }
.carousel h2 { font-size: 52px; max-width: 20ch; }
.carousel .ctl { display: flex; justify-content: space-between; align-items: center; margin: 40px 0 28px; font-size: 20px; }
.carousel .ctl .arrows { display: flex; gap: 10px; }
.carousel .ctl .arrows button { width: 40px; height: 40px; border-radius: 50%; border: 1.5px solid var(--ink); display: grid; place-items: center; font-size: 18px; }
.carousel .ctl .arrows button.on { background: var(--ink); color: var(--white); }
.carousel .track { display: flex; gap: 20px; align-items: flex-start; }
.carousel .slide { flex: none; }
.carousel .slide img { border-radius: var(--radius); object-fit: cover; }
.carousel .slide.lead img { width: 640px; height: 480px; }
.carousel .slide.lead .eyebrow { margin: 26px 0 14px; }
.carousel .slide.lead h3, .carousel .slide.lead .h3 { font-size: 46px; max-width: 24ch; margin-bottom: 20px; }
.carousel .slide.lead p { font-size: 17px; color: var(--muted); max-width: 60ch; margin-bottom: 18px; }
.carousel .slide.lead .link { font-family: var(--mono); font-size: 13px; letter-spacing: .1em; text-transform: uppercase; text-decoration: underline; text-underline-offset: 6px; }
.carousel .slide.sm img { width: 180px; height: 160px; }
.carousel .slide.md img { width: 500px; height: 240px; }
.carousel .slide .eyebrow { margin: 16px 0 8px; }
.carousel .slide h4, .carousel .slide .h4 { font-size: 17px; }
.carousel .after { display: flex; justify-content: flex-end; margin-top: -60px; }

/* I04 Feature band, white card variant (case study on a landing) */
/* I04 — same as B05 (700px band, card floating with space above and below), white card */
.featureband.white .card { background: var(--white); width: 560px; }
.featureband.white .card .eyebrow { color: var(--ink); margin-bottom: 20px; }

/* I05 Card row — three cards, title + arrow, optional "all" link */
.cardrow { padding: 48px 0 72px; }
.cardrow .cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.cardrow .card img { width: 100%; aspect-ratio: 371/248; object-fit: cover; border-radius: var(--radius); }
.cardrow .card .eyebrow { margin: 16px 0 8px; }
.cardrow .card h4, .cardrow .card .h4 { font-size: 20px; display: flex; justify-content: space-between; gap: 12px; }
.cardrow .all { display: inline-block; margin-top: 36px; }

/* I06 Guides band — heading + copy + buttons left, guide rows right */
.guides { padding: 96px 0 100px; }
.guides .wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; }
.guides .eyebrow { color: var(--ink); margin-bottom: 20px; }
.guides h2 { font-size: 48px; margin-bottom: 26px; max-width: 14ch; }
.guides .copy { max-width: 48ch; margin-bottom: 30px; }
.guides .rows { border-top: 1px solid var(--line); }
.guiderow { display: grid; grid-template-columns: 170px 1fr; gap: 24px; align-items: center; padding: 20px 0; border-bottom: 1px solid var(--line); }
.guiderow .thumb { width: 170px; height: 128px; background: var(--white); border-radius: var(--radius); display: grid; place-items: center; }
.guiderow .thumb .doc { width: 92px; height: 114px; background: var(--ink); display: grid; place-items: center; }
.guiderow .thumb .doc span { width: 72px; height: 92px; background: var(--white); display: grid; place-items: center; font-family: var(--mono); font-size: 9.5px; letter-spacing: .08em; }
.guiderow .eyebrow { color: var(--ink); margin-bottom: 10px; }
.guiderow h4, .guiderow .h4 { font-size: 20px; margin-bottom: 8px; }
.guiderow p { font-size: 14.5px; line-height: 1.45; }
.guiderow.pending h4, .guiderow.pending .h4, .guiderow.pending p { color: var(--ink-40); }
.guiderow.pending .eyebrow { color: var(--muted); }
.guides .guiderow .thumb { background: var(--white); }
.guides.marigold-mid .guiderow p { color: var(--ink); }

/* I07 "Also in this section" — two horizontal cards */
.alsoin { padding: 80px 0 100px; }
.alsoin .eyebrow { color: var(--ink); margin-bottom: 36px; }
.alsoin .pair { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.hcard { display: grid; grid-template-columns: 220px 1fr; border: 1px solid var(--line-soft); border-radius: var(--radius); overflow: hidden; }
.hcard img, .hcard .art { width: 100%; height: 100%; min-height: 250px; object-fit: cover; }
.hcard .body { padding: 22px 24px 20px; display: flex; flex-direction: column; }
.hcard .body .eyebrow { margin-bottom: 14px; }
.hcard h4, .hcard .h4 { font-size: 22px; margin-bottom: 12px; }
.hcard p { font-size: 15px; line-height: 1.45; color: var(--muted); }
.hcard .link { margin-top: auto; padding-top: 22px; display: flex; justify-content: space-between; font-size: 15px; }

/* Podcast art — marigold weave with the white title box (vector in the visuals) */
.art-wow { background: var(--marigold) url("../patterns/basket-weave-marigold-orange.svg") repeat; background-size: auto 60px; position: relative; }
.art-wow .t { position: absolute; left: 30px; top: 30px; background: var(--white); padding: 14px 18px; font-weight: 600; font-size: 22px; line-height: 1.1; }
.art-wow .l { position: absolute; left: 30px; bottom: 30px; background: var(--white); padding: 10px 12px; }
.art-wow .l img { height: 28px; }
.art-wow.lg .t { font-size: 40px; padding: 20px 26px; }
.art-wow.lg .l img { height: 40px; }

/* I08 Filter bar — pills + search */
.filters { padding: 36px 0 44px; display: flex; justify-content: space-between; align-items: center; gap: 24px; }
.filters .pills { display: flex; gap: 8px; flex-wrap: wrap; }
.filters .pills a { font-weight: 600; font-size: 13.5px; padding: 9px 14px; border-radius: 999px; border: 1px solid var(--line-soft); }
.filters .pills a.on { background: var(--ink); color: var(--white); border-color: var(--ink); }
.filters .search { flex: none; width: 236px; border: 1px solid var(--line-soft); border-radius: 999px; padding: 11px 16px; display: flex; justify-content: space-between; align-items: center; font-size: 15px; color: var(--muted); }

/* I09 Grid index — brands / case studies, three across */
.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 60px 24px; }
.grid3 .item img { width: 100%; aspect-ratio: 371/275; object-fit: cover; border-radius: var(--radius); }
.grid3 .item .head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin: 18px 0 10px; }
.grid3 .item h4, .grid3 .item .h4 { font-size: 22px; }
.grid3 .item .eyebrow { flex: none; }
.grid3 .item p { font-size: 15.5px; line-height: 1.5; color: var(--muted); margin-bottom: 14px; }
.grid3 .item .link { font-size: 14px; text-decoration: underline; text-underline-offset: 5px; }
.grid3.cases .item img { aspect-ratio: 371/243; }
.grid3.cases .item .eyebrow { margin: 18px 0 8px; }
.grid3.cases .item h4, .grid3.cases .item .h4 { font-size: 21px; margin-bottom: 10px; }

.pagination { display: flex; justify-content: center; gap: 12px; padding: 64px 0 80px; }
.pagination a { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font-weight: 600; font-size: 15px; border: 1px solid var(--line-soft); }
.pagination a.on { background: var(--ink); color: var(--white); border-color: var(--ink); }

/* I10 Listing featured item */
.featured { display: grid; grid-template-columns: 680px 1fr; gap: 60px; align-items: center; padding: 20px 0 48px; border-bottom: 1px solid var(--line-soft); }
.featured img { width: 100%; aspect-ratio: 680/500; object-fit: cover; border-radius: var(--radius); }
.featured .eyebrow + .eyebrow { margin-top: 14px; }
.featured h3, .featured .h3 { font-size: 38px; margin: 18px 0 20px; }
.featured p { font-size: 18px; color: var(--muted); margin-bottom: 30px; }
.grid3.after-featured { padding-top: 40px; }

/* I11 Not listed? — colour band with numbered list */
.notlisted { padding: 110px 0 118px; }
.notlisted .wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; }
.notlisted .eyebrow { color: var(--ink); margin-bottom: 18px; }
.notlisted h3, .notlisted .h3 { font-size: 34px; margin-bottom: 24px; }
.notlisted .copy { max-width: 50ch; margin-bottom: 30px; }
.notlisted ol { list-style: none; border-top: 1px solid var(--line); }
.notlisted li { display: grid; grid-template-columns: 28px 1fr; gap: 0; padding: 16px 0; border-bottom: 1px solid var(--line); font-size: 16px; align-items: baseline; }
.notlisted li .num { font-family: var(--mono); font-size: 12px; }

/* I12 Profile head — logo tile + H1 */
.profilehead { padding: 44px 0 0; }
.profilehead .crumb { margin-bottom: 26px; }
.profilehead .row { display: flex; align-items: center; gap: 22px; margin-bottom: 18px; }
.profilehead .logo { width: 96px; height: 96px; background: var(--bone); border-radius: var(--radius); overflow: hidden; }
.profilehead h1 { font-size: 64px; }
.profilehead .strap { font-size: 24px; color: var(--muted); }
.bleed { width: calc(100% - 48px); margin: 36px auto 0; }
.bleed img { width: 100%; aspect-ratio: 1392/928; object-fit: cover; border-radius: var(--radius); }

/* I13 Article body + aside */
.article { padding: 72px 0 120px; }
.article .wrap { display: grid; grid-template-columns: 1fr 344px; gap: 92px; align-items: start; }
.article .lead { font-size: 22px; line-height: 1.5; margin-bottom: 40px; }
.article .body { font-size: 18px; line-height: 1.6; color: #2A3238; }
.article .body p + p { margin-top: 1em; }
.article .body h2 { font-size: 32px; color: var(--ink); margin: 48px 0 22px; }
.article .body blockquote { border-left: 3px solid var(--marigold); padding: 8px 0 8px 28px; margin: 40px 0; font-size: 24px; line-height: 1.4; color: var(--ink); }
.article .note { font-size: 14px; color: var(--muted); margin-top: 28px; }
.article .share { display: flex; align-items: center; gap: 12px; margin-top: 44px; padding-top: 24px; border-top: 1px solid var(--line-soft); }
.article .share .eyebrow { margin-right: 8px; }
.pill { font-weight: 600; font-size: 14px; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line-soft); display: inline-block; }
.aside { display: flex; flex-direction: column; gap: 24px; }
.glance { border: 1px solid var(--line-soft); border-radius: var(--radius); padding: 24px 28px 28px; }
.glance .eyebrow { margin-bottom: 14px; padding-bottom: 14px; border-bottom: 1px solid var(--line); display: block; }
.glance dl { display: grid; grid-template-columns: 80px 1fr; gap: 0; }
.glance dt { font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); padding: 12px 0; border-bottom: 1px solid var(--line-soft); }
.glance dd { font-size: 15px; padding: 11px 0 11px 12px; border-bottom: 1px solid var(--line-soft); }
.glance .btn { margin-top: 22px; }
.asidecard { border-radius: var(--radius); padding: 26px 28px 28px; }
.asidecard .eyebrow { margin-bottom: 16px; }
.asidecard h4, .asidecard .h4 { font-size: 20px; line-height: 1.3; margin-bottom: 18px; }
.asidecard .person { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; }
.avatar { width: 48px; height: 48px; border-radius: 50%; background: var(--marigold); display: grid; place-items: center; font-weight: 600; font-size: 17px; flex: none; }
.asidecard .person b { display: block; font-size: 20px; }
.asidecard .person span { font-size: 14.5px; color: var(--muted); }
.cover { width: 200px; aspect-ratio: 200/266; background: var(--marigold); padding: 20px; display: flex; flex-direction: column; margin-bottom: 22px; box-shadow: 0 10px 24px -14px rgba(16,25,33,.5); }
.cover .eyebrow { color: var(--ink); margin-bottom: auto; }
.cover h5, .cover .h5 { font-size: 22px; line-height: 1.15; margin-bottom: 22px; }
.cover .lg { background: var(--white); padding: 8px; align-self: flex-start; }
.cover .lg img { height: 24px; }
.asidecard .meta { font-size: 14.5px; color: var(--muted); margin: 6px 0 20px; }
.gallery { display: grid; grid-template-columns: 352px 352px; gap: 16px; margin-top: 40px; }
.gallery img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--radius); }

/* Article hero with overlapping card */
.articlehero { position: relative; width: calc(100% - 48px); margin: 0 auto; }
.articlehero img { width: 100%; aspect-ratio: 1392/1024; object-fit: cover; border-radius: var(--radius); }
.articlehero .card { position: absolute; left: 76px; bottom: 0; width: 820px; background: var(--white); border-radius: var(--radius) var(--radius) 0 0; padding: 48px 44px 0 ; }
.articlehero .card .eyebrow { margin-bottom: 22px; }
.articlehero .card h1 { font-size: 56px; }

/* I14 More-in band — colour band with 2×2 mini horizontal cards */
.moreband { padding: 96px 0 104px; }
.moreband .sechead { margin-bottom: 28px; }
.moreband .sechead h2 { font-size: 44px; }
.moreband .minis { display: grid; grid-template-columns: 1fr 1fr; gap: 0 48px; border-top: 1px solid var(--line); }
.mini { display: grid; grid-template-columns: 170px 1fr; gap: 24px; align-items: center; padding: 22px 0; border-bottom: 1px solid var(--line); }
.mini img, .mini .thumb { width: 170px; height: 128px; object-fit: cover; border-radius: var(--radius); }
.mini .eyebrow { color: var(--ink); margin-bottom: 10px; }
.mini h4, .mini .h4 { font-size: 20px; margin-bottom: 8px; }
.mini p { font-size: 14.5px; line-height: 1.45; }

/* I15 Section heading + rule (listing intro) */
.listhead { padding: 72px 0 0; }
.listhead .eyebrow { color: var(--ink); margin-bottom: 18px; }
.listhead h2 { font-size: 44px; padding-bottom: 28px; border-bottom: 1px solid var(--line); }
.guidegrid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 48px; padding-bottom: 80px; }
.guidegrid .guiderow .thumb { background: #FDF1D9; }
.guidegrid .guiderow { border-bottom: 1px solid var(--line-soft); }

/* I16 Navigator card */
.navigator { background: var(--marigold); border-radius: var(--radius); padding: 56px; display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; margin-bottom: 72px; }
.navigator .eyebrow { color: var(--ink); margin-bottom: 18px; }
.navigator h3, .navigator .h3 { font-size: 40px; margin-bottom: 22px; }
.navigator p { font-size: 17px; max-width: 48ch; }
.navigator .contact { background: rgba(255,255,255,.55); border-radius: var(--radius); padding: 20px 24px; display: flex; gap: 16px; align-items: center; margin-bottom: 18px; }
.navigator .contact .avatar { background: var(--white); }
.navigator .contact b { display: block; font-size: 20px; }
.navigator .contact span { font-size: 14.5px; }
.navigator .small { font-size: 14px; margin-top: 14px; }

/* I17 Split band — image half + colour half */
.split { display: grid; grid-template-columns: 1fr 1fr; min-height: 640px; }
.split img { width: 100%; height: 100%; object-fit: cover; }
.split .panel { padding: 96px 88px; display: flex; flex-direction: column; justify-content: center; }
.split .panel .eyebrow { color: var(--ink); margin-bottom: 20px; }
.split .panel h2 { font-size: 52px; margin-bottom: 30px; max-width: 14ch; }
.split .panel p { font-size: 19px; line-height: 1.55; margin-bottom: 36px; max-width: 48ch; }
.split .panel .btn { align-self: flex-start; }

/* I18 Podcast */
.episode { padding: 36px 0 60px; display: grid; grid-template-columns: 420px 1fr; gap: 40px; align-items: center; }
.episode .art-wow { width: 420px; height: 420px; border-radius: var(--radius); }
.episode .eyebrow { margin-bottom: 14px; }
.episode h3, .episode .h3 { font-size: 36px; margin-bottom: 16px; }
.episode p { font-size: 17px; color: var(--muted); margin-bottom: 30px; max-width: 60ch; }
.player { display: flex; align-items: center; gap: 18px; border: 1px solid var(--line-soft); border-radius: 999px; padding: 10px 24px 10px 10px; margin-bottom: 20px; }
.player .play { width: 40px; height: 40px; border-radius: 50%; background: var(--ink); color: var(--white); display: grid; place-items: center; flex: none; }
.player .time { font-family: var(--mono); font-size: 12px; color: var(--muted); }
.player .bar { flex: 1; height: 3px; background: var(--line-soft); position: relative; }
.player .bar::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 28%; background: var(--marigold); }
.episode .pills { display: flex; gap: 8px; }
.episodes { padding: 24px 0 100px; }
.episodes h2 { font-size: 44px; margin-bottom: 36px; }
.episodes .list { border-top: 1px solid var(--line); }
.episodes .row { display: grid; grid-template-columns: 104px 1fr auto 40px; gap: 20px; align-items: center; padding: 20px 0; border-bottom: 1px solid var(--line-soft); }
.episodes .row .ep { font-family: var(--mono); font-size: 13px; letter-spacing: .1em; color: var(--muted); }
.episodes .row h4, .episodes .row .h4 { font-size: 20px; margin-bottom: 6px; }
.episodes .row .meta { font-size: 14.5px; color: var(--muted); }
.episodes .row .dur { font-family: var(--mono); font-size: 12px; color: var(--muted); }
.episodes .row .play { width: 36px; height: 36px; border-radius: 50%; border: 1.5px solid var(--ink); display: grid; place-items: center; }
.episodes .note { margin-top: 28px; }

/* Placeholder pages */
.page-placeholder main { background: var(--white); }

@media (max-width: 1100px) {
  .pagehead .cols, .guides .wrap, .notlisted .wrap, .article .wrap, .navigator, .split, .episode, .moreband .minis, .guidegrid, .alsoin .pair { grid-template-columns: 1fr; }
  .featured { grid-template-columns: 1fr; }
  .grid3 { grid-template-columns: 1fr 1fr; }
  .gallery { grid-template-columns: 1fr 1fr; }
  .articlehero .card { position: static; width: 100%; padding: 32px 0 0; }
  .childtiles .row { grid-template-columns: 1fr 1fr; row-gap: 32px; }
  .childtiles .tile:nth-child(2) { border-right: 0; }
  .carousel .slide.lead img { width: 520px; height: 390px; }
}
@media (max-width: 760px) {
  .pagehead { padding-top: 48px; }
  .pagehead h1 { font-size: 40px; }
  .pagehead .strap { font-size: 19px; }
  .pagehead .cols { gap: 24px; padding-bottom: 28px; }
  .childtiles .row { grid-template-columns: 1fr; }
  .childtiles .tile { border-right: 0; margin-right: 0; padding: 0 0 24px; border-bottom: 1px solid var(--line-soft); margin-bottom: 24px; }
  .carousel { padding: 56px 0 60px; }
  .carousel h2 { font-size: 34px; }
  .carousel .slide.lead { width: 86vw; }
  .carousel .slide.lead img { width: 100%; height: 64vw; }
  .carousel .slide.lead h3, .carousel .slide.lead .h3, .carousel .slide.lead p { max-width: none; }
  .carousel .slide.lead h3, .carousel .slide.lead .h3 { font-size: 28px; }
  .carousel .slide.sm img { width: 150px; height: 130px; }
  .carousel .slide.md img { width: 300px; height: 180px; }
  .carousel .after { margin-top: 24px; justify-content: flex-start; }
  .featureband.white { min-height: 0; padding-top: 240px; }
  .featureband.white .card { width: 100%; margin: 0; border-radius: var(--radius); }
  .cardrow .cards { grid-template-columns: 1fr; }
  .guides { padding: 56px 0 60px; }
  .guides h2 { font-size: 34px; }
  .guiderow { grid-template-columns: 120px 1fr; gap: 16px; }
  .guiderow .thumb { width: 120px; height: 92px; }
  .guiderow .thumb .doc { width: 64px; height: 80px; }
  .guiderow .thumb .doc span { width: 50px; height: 64px; font-size: 8px; }
  .hcard { grid-template-columns: 1fr; }
  .hcard img, .hcard .art { min-height: 200px; height: 200px; }
  .filters { flex-direction: column; align-items: stretch; }
  .filters .search { width: 100%; }
  .grid3 { grid-template-columns: 1fr; gap: 36px; }
  .featured img { aspect-ratio: 3/2; }
  .featured h3, .featured .h3 { font-size: 28px; }
  .notlisted { padding: 56px 0 64px; }
  .notlisted h3, .notlisted .h3 { font-size: 26px; }
  .profilehead h1 { font-size: 40px; }
  .profilehead .logo { width: 64px; height: 64px; }
  .bleed, .articlehero { width: 100%; }
  .bleed img { aspect-ratio: 4/3; }
  .articlehero img { aspect-ratio: 4/3; border-radius: 0; }
  .articlehero .card h1 { font-size: 34px; }
  .article { padding: 36px 0 64px; }
  .article .wrap { gap: 40px; }
  .article .lead { font-size: 19px; }
  .article .body { font-size: 16.5px; }
  .article .body h2 { font-size: 26px; }
  .article .body blockquote { font-size: 20px; }
  .gallery { grid-template-columns: 1fr 1fr; }
  .moreband { padding: 56px 0 64px; }
  .moreband .sechead h2 { font-size: 32px; }
  .mini { grid-template-columns: 110px 1fr; gap: 14px; }
  .mini img, .mini .thumb { width: 110px; height: 84px; }
  .listhead h2 { font-size: 30px; }
  .navigator { padding: 28px 24px; gap: 28px; }
  .navigator h3, .navigator .h3 { font-size: 28px; }
  .split .panel { padding: 48px 20px; }
  .split .panel h2 { font-size: 34px; }
  .split img { height: 300px; }
  .episode { grid-template-columns: 1fr; }
  .episode .art-wow { width: 100%; height: auto; aspect-ratio: 1; }
  .episode h3, .episode .h3 { font-size: 28px; }
  .episodes h2 { font-size: 30px; }
  .episodes .row { grid-template-columns: 1fr auto; }
  .episodes .row .ep { grid-column: 1 / -1; }
  .episodes .row .dur { display: none; }
}

/* ==========================================================================
   SECTION PAGES — blocks first seen on Education / Market Intelligence / About
   (design system applied to Wireframes v1 sheets 03–14, no separate visuals)
   ========================================================================== */
.supporters .row img { height: 44px; max-width: 170px; object-fit: contain; }

/* S01 Section hero — shorter full-bleed banner with title, used by section landings */
.sechero { position: relative; min-height: 520px; display: flex; align-items: flex-end; color: var(--white); isolation: isolate; }
.sechero .media { position: absolute; inset: 0; z-index: -1; }
.sechero .media img { width: 100%; height: 100%; object-fit: cover; }
.sechero .media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(16,25,33,.5), rgba(16,25,33,0) 55%), linear-gradient(to bottom, rgba(16,25,33,.35), rgba(16,25,33,0) 30%); }
.sechero .wrap { padding-bottom: 64px; }
.sechero .eyebrow { color: var(--white); margin-bottom: 18px; }
.sechero .eyebrow .chip { background: var(--c); }
.sechero h1 { font-size: 72px; max-width: 14ch; }
.sechero .strap { font-size: 24px; margin-top: 16px; max-width: 40ch; }

/* S02 Intro row — lead copy + side column */
.introrow { padding: 80px 0 64px; }
.introrow .wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: start; }
.introrow .lead { font-size: 24px; line-height: 1.45; }
.introrow .copy { color: var(--muted); }

/* S03 Numbered index — "In this section", six cells */
.index { padding: 24px 0 80px; }
.index .head { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 24px; }
.index .cells { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); }
.index .cell { padding: 28px 28px 32px 0; border-bottom: 1px solid var(--line); display: flex; flex-direction: column; min-height: 230px; }
.index .cell:nth-child(3n+2) { padding-left: 28px; border-left: 1px solid var(--line-soft); border-right: 1px solid var(--line-soft); }
.index .cell:nth-child(3n) { padding-left: 28px; }
.index .num { font-family: var(--mono); font-size: 12px; letter-spacing: .12em; color: var(--muted); margin-bottom: 36px; }
.index h4, .index .h4 { font-size: 24px; margin-bottom: 10px; }
.index p { font-size: 15.5px; line-height: 1.5; color: var(--muted); }
.index .link { margin-top: auto; padding-top: 22px; font-size: 15px; }

/* S04 Zig — image + copy, alternating */
.zig { padding: 72px 0; }
.zig .wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }
.zig.flip .wrap > :first-child { order: 2; }
.zig img { width: 100%; aspect-ratio: 540/440; object-fit: cover; border-radius: var(--radius); }
.zig .eyebrow { margin-bottom: 18px; }
.zig h3, .zig .h3 { font-size: 40px; margin-bottom: 14px; }
.zig .strap { font-size: 21px; color: var(--muted); margin-bottom: 20px; }
.zig .copy { color: var(--muted); max-width: 52ch; }
.zig .btn, .zig .link { margin-top: 28px; }
.zig blockquote { font-size: 22px; line-height: 1.45; margin-bottom: 14px; }
.zig cite { font-style: normal; font-size: 15px; color: var(--muted); display: block; margin-bottom: 24px; }

/* S05 Programme rows — page·repeater (School) */
.programmes { padding: 16px 0 40px; }
.programme { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: center; padding: 56px 0; border-top: 1px solid var(--line); }
.programme:first-child { border-top: 0; }
.programme img { width: 100%; aspect-ratio: 540/400; object-fit: cover; border-radius: var(--radius); }
.programme .eyebrow { margin-bottom: 16px; }
.programme h3, .programme .h3 { font-size: 36px; margin-bottom: 8px; }
.programme .strap { font-size: 21px; color: var(--muted); margin-bottom: 18px; }
.programme .copy { color: var(--muted); max-width: 52ch; }
.programme .btns { margin-top: 26px; }

/* S06 FAQ accordion */
.faq { padding: 24px 0 72px; }
.faq .wrap { display: grid; grid-template-columns: 1fr 2fr; gap: 60px; align-items: start; }
.faq h3, .faq .h3 { font-size: 36px; }
.faq details { border-bottom: 1px solid var(--line); }
.faq details:first-of-type { border-top: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 20px 0; font-weight: 600; font-size: 20px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-weight: 400; font-size: 26px; line-height: 1; color: var(--muted); }
.faq details[open] summary::after { content: "–"; }
.faq .a { padding: 0 0 24px; color: var(--muted); max-width: 62ch; }
.faq .a p + p { margin-top: .7em; }
.faq blockquote { border-left: 3px solid var(--c, var(--straw)); padding-left: 18px; margin: 12px 0; }

/* S07 Sponsor strip */
.sponsor { background: var(--bone); border-radius: var(--radius); padding: 28px 32px; display: grid; grid-template-columns: 1fr auto; gap: 32px; align-items: center; margin: 24px 0 64px; }
.sponsor .eyebrow { margin-bottom: 10px; }
.sponsor p { font-size: 15.5px; color: var(--muted); max-width: 70ch; }
.sponsor .logo { width: 170px; height: 72px; border: 1px dashed var(--line-soft); display: grid; place-items: center; font-family: var(--mono); font-size: 10px; letter-spacing: .1em; color: var(--muted); text-align: center; }

/* S08 Register / CTA band — section colour */
.ctaband { padding: 88px 0; }
.ctaband .wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.ctaband .eyebrow { color: var(--ink); margin-bottom: 18px; }
.ctaband h2 { font-size: 44px; margin-bottom: 18px; }
.ctaband p { max-width: 46ch; }
.ctaband .side { font-size: 16px; color: var(--ink); }
.ctaband .side .btn { margin-bottom: 20px; }

/* S09 Related sections — four cards at the foot of inner pages */
.related { padding: 72px 0 96px; }
.related .eyebrow { margin-bottom: 24px; }
.related .cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.related .card { border-radius: var(--radius); padding: 24px 22px 22px; background: var(--bone); display: flex; flex-direction: column; min-height: 200px; }
.related .card .chip { width: 30px; height: 4px; background: var(--c); margin-bottom: 20px; }
.related .card h4, .related .card .h4 { font-size: 20px; margin-bottom: 8px; }
.related .card p { font-size: 14.5px; color: var(--muted); line-height: 1.45; }
.related .card .link { margin-top: auto; padding-top: 18px; font-size: 14px; }

/* S10 Quote block */
.quoteblock { padding: 96px 0; }
.quoteblock .wrap { display: grid; grid-template-columns: 2fr 1fr; gap: 60px; align-items: end; }
.quoteblock blockquote { font-size: 36px; line-height: 1.25; letter-spacing: -.01em; font-weight: 600; }
.quoteblock .who { display: flex; align-items: center; gap: 16px; }
.quoteblock .who img { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; }
.quoteblock .who b { display: block; font-size: 18px; }
.quoteblock .who span { font-size: 15px; color: var(--muted); }

/* S11 Feature grid — "What we do", six cells with chips */
.featgrid { padding: 24px 0 80px; }
.featgrid .head { margin-bottom: 36px; }
.featgrid .cells { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px 48px; }
.featgrid .cell .chip { width: 30px; height: 4px; background: var(--c, var(--cobalt)); margin-bottom: 18px; }
.featgrid h4, .featgrid .h4 { font-size: 22px; margin-bottom: 10px; }
.featgrid p { font-size: 16px; line-height: 1.5; color: var(--muted); }
.featgrid .cell.not { background: var(--bone); padding: 24px; border-radius: var(--radius); }

/* S12 Call-out band — big numbers */
.callout { padding: 80px 0; }
.callout .nums { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; margin-bottom: 40px; }
.callout .n { font-size: 72px; line-height: 1; letter-spacing: -.02em; margin-bottom: 12px; }
.callout .d { font-size: 17px; max-width: 26ch; }
.callout .tag { font-size: 30px; font-weight: 600; letter-spacing: -.015em; }
.callout.on-dark { color: var(--white); }

/* S13 Supporters grid — logo + paragraph */
.supgrid { padding: 72px 0 80px; }
.supgrid .cells { display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px 32px; margin-top: 40px; }
.supgrid .cell img { height: 44px; max-width: 160px; object-fit: contain; margin-bottom: 22px; }
.supgrid .cell h4, .supgrid .cell .h4 { font-size: 20px; margin-bottom: 10px; }
.supgrid .cell p { font-size: 15px; line-height: 1.5; color: var(--muted); }

/* S14 People grid — team / directors / ambassadors */
.people { padding: 24px 0 64px; }
.people .head { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 28px; }
.people .cells { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px 24px; }
.people .person img { width: 100%; aspect-ratio: 371/420; object-fit: cover; border-radius: var(--radius); filter: grayscale(.1); }
.people .person .ph { width: 100%; aspect-ratio: 371/420; background: var(--bone); border-radius: var(--radius); display: grid; place-items: center; font-family: var(--mono); font-size: 11px; letter-spacing: .1em; color: var(--muted); }
.people .person h4, .people .person .h4 { font-size: 22px; margin: 18px 0 4px; }
.people .person .role { font-size: 15.5px; color: var(--muted); }
.people .person p { font-size: 15.5px; color: var(--muted); line-height: 1.5; margin-top: 10px; }

/* S15 Subnav aside (standard content page) */
.subnav { border-top: 1px solid var(--line); }
.subnav .eyebrow { display: block; padding: 16px 0 12px; }
.subnav a { display: flex; justify-content: space-between; padding: 12px 0; border-top: 1px solid var(--line-soft); font-weight: 600; font-size: 16px; }
.subnav a.on { color: var(--ink); justify-content: flex-start; }
.subnav a.on::before { content: ""; width: 4px; height: 20px; background: var(--c); margin-right: 12px; }
.subnav a:not(.on) { color: var(--muted); }

/* S16 Form */
.formpage { padding: 56px 0 100px; }
.formpage .wrap { display: grid; grid-template-columns: 1fr 344px; gap: 92px; align-items: start; }
.form .field { margin-bottom: 22px; }
.form label { display: block; font-weight: 600; font-size: 15px; margin-bottom: 8px; }
.form label small { font-weight: 400; color: var(--muted); }
.form input, .form select, .form textarea { width: 100%; font: inherit; font-size: 16px; padding: 14px 16px; border: 1px solid var(--line-soft); border-radius: var(--radius); background: var(--white); color: var(--ink); }
.form textarea { min-height: 150px; resize: vertical; }
.form .two { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.form .choices { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 20px; }
.form .choices label { display: flex; gap: 10px; align-items: center; font-weight: 400; font-size: 15.5px; }
.form .choices input { width: 18px; height: 18px; padding: 0; }
.form .consent { display: flex; gap: 12px; align-items: flex-start; font-size: 14.5px; color: var(--muted); margin: 8px 0 28px; }
.form .consent input { width: 18px; height: 18px; padding: 0; flex: none; margin-top: 3px; }
.form .note { font-size: 13.5px; color: var(--muted); margin-top: 18px; }

/* S17 Doc list */
.docs .doc { display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: center; padding: 18px 0; border-bottom: 1px solid var(--line); }
.docs .doc:first-child { border-top: 1px solid var(--line); }
.docs .doc h4, .docs .doc .h4 { font-size: 18px; margin-bottom: 4px; }
.docs .doc .meta { font-size: 14px; color: var(--muted); }

/* Article date line */
.article .meta-line { margin-bottom: 20px; }
.pagehead.article-head h1 { font-size: 56px; }
.pagehead.article-head .cols { grid-template-columns: 1fr; padding-bottom: 32px; }

@media (max-width: 1100px) {
  .introrow .wrap, .zig .wrap, .programme, .faq .wrap, .ctaband .wrap, .quoteblock .wrap, .formpage .wrap { grid-template-columns: 1fr; }
  .index .cells, .featgrid .cells, .people .cells { grid-template-columns: 1fr 1fr; }
  .index .cell:nth-child(3n+2), .index .cell:nth-child(3n) { padding-left: 0; border-left: 0; border-right: 0; }
  .index .cell:nth-child(2n) { padding-left: 28px; border-left: 1px solid var(--line-soft); }
  .related .cards, .supgrid .cells { grid-template-columns: 1fr 1fr; }
  .callout .nums { grid-template-columns: 1fr; }
  .zig.flip .wrap > :first-child { order: 0; }
}
@media (max-width: 760px) {
  .sechero { min-height: 420px; }
  .sechero h1 { font-size: 40px; }
  .sechero .strap { font-size: 18px; }
  .introrow { padding: 48px 0 32px; }
  .introrow .lead { font-size: 20px; }
  .index .cells, .featgrid .cells, .people .cells, .related .cards, .supgrid .cells { grid-template-columns: 1fr; }
  .index .cell, .index .cell:nth-child(2n) { padding-left: 0; border-left: 0; min-height: 0; padding-top: 22px; padding-bottom: 24px; }
  .index h4, .index .h4 { font-size: 21px; }
  .zig { padding: 40px 0; }
  .zig h3, .zig .h3 { font-size: 28px; }
  .programme { padding: 36px 0; gap: 24px; }
  .programme h3, .programme .h3 { font-size: 26px; }
  .faq h3, .faq .h3 { font-size: 26px; }
  .faq summary { font-size: 17px; }
  .sponsor { grid-template-columns: 1fr; }
  .ctaband { padding: 56px 0; }
  .ctaband h2 { font-size: 32px; }
  .quoteblock { padding: 56px 0; }
  .quoteblock blockquote { font-size: 24px; }
  .callout .n { font-size: 48px; }
  .callout .tag { font-size: 22px; }
  .form .two, .form .choices { grid-template-columns: 1fr; }
  .pagehead.article-head h1 { font-size: 34px; }
}

/* S01 variant — normal full-bleed on desktop; on mobile the photo sits at the top and fades into
   --hero-bg, so a wide subject (the container ship, W021 v2) stays above the title. */
.sechero.mobile-top { background: var(--hero-bg, var(--ink)); }
@media (max-width: 760px) {
  .sechero.mobile-top { min-height: 560px; }
  .sechero.mobile-top .media img { position: absolute; top: 0; right: var(--hero-shift, -60px); left: auto; width: auto; height: 64%; max-width: none;
    -webkit-mask-image: linear-gradient(to bottom, #000 72%, transparent); mask-image: linear-gradient(to bottom, #000 72%, transparent); }
}

/* B04 variant — image stretches to the height of the text column (Wool & Farming) */
.stats.match .wrap { align-items: stretch; }
.stats.match .img { position: relative; min-height: 420px; }
.stats.match .img img { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; }
@media (max-width: 1100px) {
  .stats.match .img { min-height: 0; }
  .stats.match .img img { position: static; aspect-ratio: 3/2; }
}