/* =========================================================
   Cybele Life: page-builder sections
   Loaded after styles.css. Uses only the existing design tokens
   (colours, type, spacing, radii, easing) and reuses the
   homepage's components wherever possible, so pages built in
   the Admin Panel share the homepage's visual language.
   Nothing here targets homepage classes, so the homepage is unchanged.
   ========================================================= */

/* ---------- Backgrounds (the same bands the homepage uses) ---------- */
.cms-tone-paper2 { background: var(--paper-2); }
.cms-tone-sage { background: var(--sage-wash); }
.cms-tone-card { background: var(--card); border-block: 1px solid var(--line); }
.cms-tone-forest { background: var(--forest-2); color: var(--on-dark); }
.cms-tone-forest :focus-visible { outline-color: var(--gold-soft); }
.cms-tone-forest h1, .cms-tone-forest h2, .cms-tone-forest h3 { color: var(--on-dark); }
.cms-tone-forest .section-head p, .cms-tone-forest .cms-prose, .cms-tone-forest .cms-prose p, .cms-tone-forest .journey-copy > p,
.cms-tone-forest .steps p, .cms-tone-forest .timeline p, .cms-tone-forest .faq-head p, .cms-tone-forest .acc-panel p,
.cms-tone-forest .cms-card-text, .cms-tone-forest .fine-print, .cms-tone-forest figcaption { color: var(--on-dark-2); }
.cms-tone-forest .lead { color: var(--gold-soft); }
.cms-tone-forest .kicker, .cms-tone-forest .text-link { color: var(--gold-soft); }
.cms-tone-forest a:not(.btn):hover { color: #fff; }
.cms-tone-forest .inst-text, .cms-tone-forest .steps li, .cms-tone-forest .accordion, .cms-tone-forest .acc-item,
.cms-tone-forest .timeline { border-color: rgba(243, 241, 232, .18); }
.cms-tone-forest .inst-text p, .cms-tone-forest .cms-card-meta { color: var(--on-dark-2); }
.cms-tone-forest .acc-item button { color: var(--on-dark); }
.cms-tone-forest .acc-item button::after { background: linear-gradient(var(--gold-soft), var(--gold-soft)) center / 14px 1.5px no-repeat, linear-gradient(var(--gold-soft), var(--gold-soft)) center / 1.5px 14px no-repeat; }
.cms-tone-forest .cms-card { background: rgba(255, 255, 255, .04); border-color: rgba(243, 241, 232, .16); }
.cms-tone-forest .voice { background: rgba(255, 255, 255, .04); border-color: rgba(243, 241, 232, .16); color: var(--on-dark); }
.cms-tone-forest .voice cite { color: var(--on-dark-2); }
.cms-tone-forest .btn-primary { background: var(--on-dark); color: var(--forest-2); }
.cms-tone-forest .btn-ghost { border-color: rgba(243, 241, 232, .45); color: var(--on-dark); }
.cms-tone-forest .btn-ghost:hover { border-color: var(--on-dark); background: rgba(255,255,255,.06); color: var(--on-dark); }

/* The timeline's numerals sit on a patch of background colour; match it on every band */
.cms-tone-paper2 .timeline li::before { background: var(--paper-2); }
.cms-tone-sage .timeline li::before { background: var(--sage-wash); }
.cms-tone-card .timeline li::before { background: var(--card); }
.cms-tone-forest .timeline li::before { background: var(--forest-2); }

/* A page's first heading may be an <h1> in a section that uses <h2> on the homepage: same look */
.section-head h1 { font-size: var(--fs-h2); margin-bottom: 1rem; letter-spacing: -.022em; line-height: 1.02; }
.section-head--split h1 { margin-bottom: 0; }
.journey-copy h1, .faq-head h1, .story-head h1 { font-size: var(--fs-h2); margin-bottom: 1rem; letter-spacing: -.022em; line-height: 1.02; }
.final-cta h1 { font-size: clamp(2.6rem, 1.5rem + 4.3vw, 5.4rem); line-height: 1.02; letter-spacing: -.025em; max-width: 14ch; margin-bottom: 1.25rem; }
.section-head .kicker { font-size: var(--fs-small); color: var(--forest); margin-bottom: 1.25rem; max-width: none; }
.cms-tone-forest .section-head .kicker { color: var(--gold-soft); }
.cms-h2 { font-size: var(--fs-h2); letter-spacing: -.022em; line-height: 1.02; margin-bottom: 1rem; }

/* ---------- Hero ---------- */
.cms-hero { padding-bottom: clamp(3rem, 2rem + 4vw, 6rem); }
.cms-hero .hero-copy > :last-child { margin-bottom: 0; }
.cms-hero-title { max-width: 16ch; }
.cms-hero-lead { max-width: 40ch; }
.cms-hero--text { padding-top: clamp(3rem, 2rem + 5vw, 7.5rem); padding-bottom: clamp(3.5rem, 2.5rem + 4vw, 7rem); border-bottom: 1px solid var(--line); }
.cms-hero--text .cms-hero-title { font-size: clamp(2.55rem, 1.35rem + 3.9vw, 5.1rem); line-height: 1; max-width: 18ch; }
.cms-hero-panel { padding: 0; }
.cms-hero-panel img { width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.cms-hero-panel--pack { padding-top: clamp(1.5rem, 1rem + 2vw, 2.5rem); }
.cms-hero-panel--pack img { aspect-ratio: auto; height: auto; object-fit: contain; }
@media (min-width: 960px) {
  .cms-hero .hero-grid { min-height: min(600px, calc(100vh - var(--header-h) - 120px)); }
  .cms-hero .hero-panel { padding-bottom: 0; }
  .cms-hero .hero-panel.cms-hero-panel--pack { padding-bottom: clamp(1.5rem, 1rem + 2vw, 2.5rem); }
}
@media (prefers-reduced-motion: no-preference) {
  .js .cms-hero .hero-copy > * { animation: cms-rise 1s var(--ease-slow) both; }
  .js .cms-hero .hero-copy > :nth-child(2) { animation-delay: .08s; }
  .js .cms-hero .hero-copy > :nth-child(3) { animation-delay: .16s; }
  .js .cms-hero .hero-copy > :nth-child(4) { animation-delay: .24s; }
  .js .cms-hero .hero-copy > :nth-child(5) { animation-delay: .32s; }
  .js .cms-hero .hero-panel { clip-path: inset(100% 0 0 0 round var(--radius-m)); animation: cms-unveil 1.1s var(--ease) .1s forwards; }
  @keyframes cms-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
  @keyframes cms-unveil { to { clip-path: inset(0 0 0 0 round var(--radius-m)); } }
}

/* ---------- Heading + text ---------- */
.cms-text-grid { display: grid; gap: 1.5rem 5rem; }
.cms-text-head .cms-h2 { max-width: 16ch; }
.cms-text-body { display: grid; gap: 1.25rem; justify-items: start; }
@media (min-width: 960px) {
  .cms-text-grid--split { grid-template-columns: 1fr 1.15fr; align-items: start; }
  .cms-text-grid--split .cms-text-body { padding-top: .6rem; }
}
.cms-text-grid:not(.cms-text-grid--split) { max-width: 820px; }

/* ---------- Prose (rich text) ---------- */
.cms-prose { color: var(--ink-2); max-width: 66ch; }
.cms-prose--lead { font-size: 1.125rem; line-height: 1.6; }
.cms-prose p { margin: 0 0 1em; }
.cms-prose > :last-child { margin-bottom: 0; }
.cms-prose h3 { font-size: var(--fs-h3); color: var(--ink); margin: 2rem 0 .75rem; line-height: 1.2; }
.cms-prose h4 { font-size: 1.25rem; color: var(--ink); margin: 1.5rem 0 .5rem; }
.cms-prose > h3:first-child, .cms-prose > h4:first-child { margin-top: 0; }
.cms-prose strong { color: var(--ink); font-weight: 600; }
.cms-tone-forest .cms-prose strong, .cms-tone-forest .cms-prose h3, .cms-tone-forest .cms-prose h4 { color: var(--on-dark); }
.cms-prose a { color: var(--forest); text-decoration-color: var(--gold); }
.cms-tone-forest .cms-prose a { color: var(--on-dark); }
.cms-prose ul, .cms-prose ol { margin: 0 0 1.25em; padding-left: 1.4rem; }
.cms-prose ul { list-style: none; padding-left: 1.25rem; }
.cms-prose ul > li { position: relative; }
.cms-prose ul > li::before { content: ""; position: absolute; left: -1.1rem; top: .78em; width: 6px; height: 1px; background: var(--gold); }
.cms-prose ol { list-style: decimal; }
.cms-prose ol > li::marker { font-family: var(--serif); color: var(--gold); }
.cms-prose li { margin-bottom: .45em; }
.cms-prose blockquote { margin: 1.75rem 0; padding: .25rem 0 .25rem 1.25rem; border-left: 2px solid var(--gold); font-family: var(--serif); font-size: clamp(1.2rem, 1.05rem + .6vw, 1.5rem); line-height: 1.4; color: var(--ink); }
.cms-tone-forest .cms-prose blockquote { color: var(--on-dark); }

/* ---------- Article ---------- */
.cms-article-inner { max-width: 760px; }
.cms-article-inner .cms-h2 { margin-bottom: 2rem; }
.cms-article .cms-prose { font-size: 1.0625rem; }

/* ---------- Image + text ---------- */
.cms-split-grid { display: grid; gap: 2.5rem 5rem; align-items: center; }
.cms-split-figure img { width: 100%; border-radius: var(--radius-m); box-shadow: 0 50px 90px -60px rgba(20, 32, 24, .55); }
.cms-tone-forest .cms-split-figure img { box-shadow: 0 50px 90px -50px rgba(0, 0, 0, .7); }
.cms-split-copy .cms-h2 { max-width: 15ch; margin-bottom: 1.25rem; }
.cms-split-copy .lead { color: var(--forest); margin-bottom: 1.25rem; max-width: 30ch; }
.cms-tone-forest .cms-split-copy .lead { color: var(--gold-soft); }
.cms-split-copy .cms-prose { max-width: 54ch; }
.cms-actions { margin-top: 2rem; }
@media (min-width: 960px) {
  .cms-split-grid { grid-template-columns: 1fr 1fr; }
  .cms-split-grid--reverse .cms-split-figure { order: 2; }
  .cms-split-grid--solo { grid-template-columns: 1fr; max-width: 820px; }
}

/* ---------- Figures ---------- */
.cms-block { padding-block: clamp(2rem, 1rem + 3vw, 4rem); }
.cms-figure img { width: 100%; border-radius: var(--radius-m); box-shadow: 0 50px 90px -60px rgba(20, 32, 24, .55); }
.cms-figure--full img { border-radius: 0; box-shadow: none; max-height: 82vh; object-fit: cover; }
.cms-figure figcaption, .cms-video figcaption, .cms-gallery figcaption { font-size: var(--fs-small); color: var(--ink-3); margin-top: .9rem; max-width: 70ch; }
.cms-figure--full figcaption { padding-inline: var(--gutter); max-width: calc(var(--wrap) + var(--gutter) * 2); margin-inline: auto; }

/* ---------- Cards ---------- */
.cms-card-grid { display: grid; gap: 2.5rem 1.5rem; }
@media (min-width: 600px) { .cms-card-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) {
  .cms-cols-3 { grid-template-columns: repeat(3, 1fr); }
  .cms-cols-4 { grid-template-columns: repeat(4, 1fr); }
}
.cms-photo-card { display: flex; flex-direction: column; }
.cms-photo-card img { border-radius: var(--radius-m); }
.cms-photo-card .cms-card-text { margin: 1rem 0 0; color: var(--ink-2); font-size: var(--fs-small); max-width: 46ch; }
.cms-photo-card .text-link, .cms-card .text-link { margin-top: .5rem; align-self: flex-start; }
.cms-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-m); padding: 1.75rem; display: flex; flex-direction: column; gap: .5rem; }
.cms-tone-card .cms-card { background: var(--paper); }
.cms-card img { width: calc(100% + 3.5rem); max-width: none; margin: -1.75rem -1.75rem 1rem; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--radius-m) var(--radius-m) 0 0; }
.cms-card h3 { font-size: 1.35rem; line-height: 1.2; }
.cms-card-meta { font-size: var(--fs-xs); color: var(--ink-3); margin: 0; letter-spacing: .02em; }
.cms-card-text { color: var(--ink-2); font-size: var(--fs-small); margin: 0; }

/* ---------- Statistics ---------- */
.cms-stats { margin: 0; display: grid; gap: 0; border-top: 1px solid var(--line-strong); }
.cms-tone-forest .cms-stats { border-color: rgba(243, 241, 232, .2); }
.cms-stats > div { padding: 1.5rem 0 1.75rem; border-bottom: 1px solid var(--line); }
.cms-tone-forest .cms-stats > div { border-color: rgba(243, 241, 232, .14); }
.cms-stats dt { font-family: var(--serif); font-size: clamp(3rem, 2rem + 3.2vw, 5rem); line-height: .9; letter-spacing: -.035em; color: var(--forest); font-variant-numeric: lining-nums tabular-nums; margin-bottom: .75rem; }
.cms-tone-forest .cms-stats dt { color: var(--gold-soft); }
.cms-stats dd { margin: 0; font-size: var(--fs-small); color: var(--ink-2); max-width: 26ch; }
.cms-tone-forest .cms-stats dd { color: var(--on-dark-2); }
@media (min-width: 700px) {
  .cms-stats { grid-template-columns: repeat(2, 1fr); border-bottom: 0; }
  .cms-stats > div { padding-inline: 0 2rem; }
  .cms-stats > div + div { padding-left: 2rem; border-left: 1px solid var(--line); }
  .cms-tone-forest .cms-stats > div + div { border-left-color: rgba(243, 241, 232, .14); }
  .cms-stats > div:nth-child(2n + 1) { padding-left: 0; border-left: 0; }
}
@media (min-width: 1080px) {
  .cms-stats--3 { grid-template-columns: repeat(3, 1fr); }
  .cms-stats--4 { grid-template-columns: repeat(4, 1fr); }
  .cms-stats--3 > div:nth-child(2n + 1), .cms-stats--4 > div:nth-child(2n + 1) { padding-left: 2rem; border-left: 1px solid var(--line); }
  .cms-stats--3 > div:first-child, .cms-stats--4 > div:first-child, .cms-stats--3 > div:nth-child(3n + 1), .cms-stats--4 > div:nth-child(4n + 1) { padding-left: 0; border-left: 0; }
  .cms-tone-forest .cms-stats > div { border-left-color: rgba(243, 241, 232, .14); }
}

/* ---------- Steps without a photo ---------- */
.cms-steps--solo { grid-template-columns: 1fr !important; }
.cms-steps--solo .journey-copy { max-width: 820px; }

/* ---------- Statement ---------- */
.cms-quote { max-width: 980px; border-top: 2px solid var(--gold); padding-top: clamp(1.75rem, 1rem + 2vw, 2.75rem); }
.cms-quote blockquote { margin: 0; }
.cms-quote blockquote p { font-family: var(--serif); font-size: clamp(1.9rem, 1.3rem + 2.4vw, 3.4rem); line-height: 1.1; letter-spacing: -.02em; color: var(--forest); text-wrap: balance; margin: 0; }
.cms-tone-forest .cms-quote blockquote p { color: var(--on-dark); }
.cms-quote figcaption { margin-top: 1.5rem; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 2rem; font-size: var(--fs-small); color: var(--ink-3); }
.cms-tone-forest .cms-quote figcaption { color: var(--on-dark-2); }

/* ---------- Testimonials with video ---------- */
.voice-video iframe, .voice-video video { width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: var(--radius-s); display: block; }
.voice--video .voice-video:has(iframe, video) { min-height: 0; background: #000; }

/* ---------- Video ---------- */
.cms-video-frame { position: relative; aspect-ratio: 16 / 9; border-radius: var(--radius-m); overflow: hidden; background: #0f1a12; box-shadow: 0 50px 90px -60px rgba(20, 32, 24, .55); }
.cms-video-frame iframe, .cms-video-frame video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ---------- Gallery ---------- */
.cms-gallery { display: grid; gap: 1.25rem; grid-template-columns: repeat(2, 1fr); }
@media (max-width: 479px) { .cms-gallery { grid-template-columns: 1fr; } }
@media (min-width: 960px) { .cms-gallery.cms-cols-3 { grid-template-columns: repeat(3, 1fr); } .cms-gallery.cms-cols-4 { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 600px) and (max-width: 959px) { .cms-gallery.cms-cols-4 { grid-template-columns: repeat(2, 1fr); } }
.cms-gallery img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-m); }
.cms-gallery figcaption { margin-top: .6rem; }

/* ---------- Spacer ---------- */
.cms-spacer--s { height: clamp(1.5rem, 1rem + 1vw, 2.5rem); }
.cms-spacer--m { height: clamp(3rem, 2rem + 3vw, 5rem); }
.cms-spacer--l { height: clamp(5rem, 3rem + 6vw, 9rem); }
.cms-spacer { display: grid; align-items: center; }
.cms-rule { border: 0; height: 1px; margin: 0; background: linear-gradient(90deg, transparent, rgba(169, 132, 63, .55), transparent); }

/* Two adjacent sections on the same band read as one: avoid doubled spacing */
.section.cms-tone-paper2 + .section.cms-tone-paper2, .section.cms-tone-sage + .section.cms-tone-sage,
.section.cms-tone-forest + .section.cms-tone-forest, .section.cms-tone-card + .section.cms-tone-card { padding-top: 0; border-top: 0; }

/* ---------- Preview banner (signed-in admins only) ---------- */
.cms-preview-bar { position: relative; z-index: 150; background: var(--gold); color: #1b1407; font-size: var(--fs-small); font-weight: 500; text-align: center; padding: .55rem var(--gutter); }
.cms-preview-bar a { color: inherit; margin-left: .75rem; }

@media print { .cms-preview-bar { display: none; } }

/* =========================================================
   CMS design controls
   Everything below serves options set in the Admin Panel:
   section backgrounds and colour schemes, the image block,
   text highlights, per-button looks, footer columns, the
   scroll-driven hero, blank-section blocks and logo clouds.
   None of it applies until an option is used.
   ========================================================= */

/* ---------- Section backgrounds and colour schemes ---------- */
.cms-has-bg { position: relative; }
/* Light text for sections given a dark background */
.cms-scheme-dark {
  --ink: #F3F1E8; --ink-2: rgba(243, 241, 232, .8); --ink-3: rgba(243, 241, 232, .66);
  --line: rgba(243, 241, 232, .16); --line-strong: rgba(243, 241, 232, .42);
  color: var(--on-dark);
}
.cms-scheme-dark :is(.hero-goal, .lead, .kicker, .text-link, .programme-name, .cms-stats dt, .cms-quote blockquote p) { color: var(--gold-soft); }
.cms-scheme-dark .programme-item--lead { background: rgba(255, 255, 255, .08); }
.cms-scheme-dark .programme-item--lead:hover { background: rgba(255, 255, 255, .12); }
/* Dark text for sections that are dark in the original design but were given a light background */
.cms-scheme-light { --on-dark: var(--ink); --on-dark-2: var(--ink-2); color: var(--ink); }
.cms-scheme-light :is(.btn-primary, .hero-panel, .dx-claim, .trial-panel, .dx-hub) { --on-dark: #F3F1E8; --on-dark-2: rgba(243, 241, 232, .74); }
.cms-scheme-light.institutions .inst-text, .cms-scheme-light .cms-stats, .cms-scheme-light .cms-stats > div { border-color: var(--line); }
.cms-scheme-light.final-cta .btn-light { background: var(--forest); color: #F3F1E8; }
.cms-scheme-light.final-cta .btn-outline-light { border-color: var(--line-strong); color: var(--ink); }

/* Section alignment (Design → Text colours and alignment) */
.cms-aligned :is(.hero-actions, .cms-actions, .final-actions, .kicker, .hero-goal, .cms-b--buttons) { justify-content: var(--cms-justify, flex-start); }
.cms-aligned :is(.section-head, .cms-prose, .lead, .hero-claim, .hero-note, .cms-article-inner, .cms-quote, .cms-text-grid, h1, h2) { margin-left: var(--cms-ml, 0); margin-right: var(--cms-mr, auto); }

/* ---------- Image block (an image added to any section) ---------- */
.cms-ib-fig { margin: 0; width: var(--ib-w, 100%); }
.cms-ib-fig img { display: block; width: 100%; height: auto; border-radius: var(--ib-radius, var(--radius-m)); }
.cms-ib-fig--cover img, .cms-ib-fig--contain img { aspect-ratio: var(--ib-ratio, 4 / 3); object-fit: cover; }
.cms-ib-fig--contain img { object-fit: contain; }
.cms-ib-fig--shadow img { box-shadow: 0 50px 90px -60px rgba(20, 32, 24, .55); }
.cms-ib-fig figcaption { font-size: var(--fs-small); color: var(--ink-3); margin-top: .8rem; }
.cms-ib-fig--center { margin-inline: auto; }
.cms-ib-fig--right { margin-left: auto; }
.cms-ib-fig--top { margin-bottom: clamp(2rem, 1.5rem + 2vw, 3.5rem); }
.cms-ib-fig--bottom { margin-top: clamp(2rem, 1.5rem + 2vw, 3.5rem); }
.cms-ib-fig--inline { margin-block: 0 clamp(2rem, 1.5rem + 2vw, 3.5rem); }
:is(h1, h2) + .cms-ib-fig--inline { margin-top: 1.5rem; }
/* Side by side: the row is the page container, the section's own content loses its side padding */
.cms-ib-row {
  display: grid; gap: clamp(1.75rem, 1rem + 3vw, 4rem); align-items: center;
  width: 100%; max-width: calc(var(--wrap) + var(--gutter) * 2); margin-inline: auto;
  padding-inline: max(var(--gutter), env(safe-area-inset-left, 0px)) max(var(--gutter), env(safe-area-inset-right, 0px));
}
.cms-ib-main { min-width: 0; }
.cms-ib-main .wrap { max-width: none; padding-inline: 0; }
.cms-ib-row > .cms-ib-fig { width: 100%; }
.cms-ib-row--left > .cms-ib-fig { order: -1; }
@media (min-width: 960px) {
  .cms-ib-row--right { grid-template-columns: minmax(0, 1fr) minmax(0, var(--ib-w, 42%)); }
  .cms-ib-row--left { grid-template-columns: minmax(0, var(--ib-w, 42%)) minmax(0, 1fr); }
}
@media (max-width: 1023px) { .cms-ib-fig { width: var(--ib-w-t, var(--ib-w, 100%)); } }
@media (max-width: 959px) { .cms-ib-row > .cms-ib-fig { width: var(--ib-w-t, 100%); margin-inline: auto; } }
@media (max-width: 767px) {
  .cms-ib-fig, .cms-ib-row > .cms-ib-fig { width: var(--ib-w-m, 100%); }
  .cms-ib--m-hidden :is(.cms-ib-fig, .cms-ib-wrap) { display: none; }
  .cms-ib--m-top .cms-ib-row > .cms-ib-fig { order: -1; }
  .cms-ib--m-bottom .cms-ib-row > .cms-ib-fig { order: 1; }
  .cms-ib--top.cms-ib--m-bottom, .cms-ib--bottom.cms-ib--m-top { display: flex; flex-direction: column; }
  .cms-ib--top.cms-ib--m-bottom > .cms-ib-wrap { order: 1; }
  .cms-ib--top.cms-ib--m-bottom .cms-ib-fig { margin: clamp(2rem, 1.5rem + 2vw, 3.5rem) 0 0; }
  .cms-ib--bottom.cms-ib--m-top > .cms-ib-wrap { order: -1; }
  .cms-ib--bottom.cms-ib--m-top .cms-ib-fig { margin: 0 0 clamp(2rem, 1.5rem + 2vw, 3.5rem); }
}

/* ---------- Text highlights (rich text toolbar → Highlight) ---------- */
mark.hl { background: none; color: var(--hl-ink, inherit); padding: 0 .14em; border-radius: .16em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
mark.hl--bg { background-color: var(--hl, #F2E3B6); color: var(--hl-ink, #1D2420); }
mark.hl--underline { padding: 0; border-radius: 0; background: linear-gradient(var(--hl, #D9C69C), var(--hl, #D9C69C)) 0 92% / 100% .3em no-repeat; }
mark.hl--gradient { background-image: linear-gradient(100deg, var(--hl, #F2E3B6), var(--hl2, #CFE0C8)); color: var(--hl-ink, #1D2420); }
.cms-prose s, .cms-prose u { text-decoration-thickness: 1px; }

/* ---------- Per-button looks ---------- */
.btn.btn-has-hover:hover, .text-link.btn-has-hover:hover { background-color: var(--b-hover) !important; }
.text-link.btn-has-hover:hover { background-color: transparent !important; color: var(--b-hover) !important; }

/* ---------- Footer: custom colours and any number of columns ---------- */
.site-footer--custom { color: var(--footer-text, var(--on-dark-2)); }
.site-footer--custom h2 { color: var(--footer-heading, var(--gold-soft)); }
.site-footer--custom a { color: var(--footer-link, var(--on-dark)); }
@media (min-width: 1080px) { .footer-grid--flex { grid-template-columns: 1.5fr repeat(var(--footer-tracks, 3), minmax(0, 1fr)); gap: 3rem; } }

/* ---------- National media with a single picture: no carousel; the picture opens the PDF ---------- */
.media-carousel--single { align-items: center; }
.media-carousel--single .media-slide { width: 100%; height: 100%; margin: 0; }
.media-link { position: relative; display: block; width: 100%; height: 100%; color: inherit; cursor: pointer; }
.media-link:focus-visible { outline: 3px solid var(--gold); outline-offset: -3px; border-radius: var(--radius-m); }
.media-link-hint {
  position: absolute; right: .75rem; bottom: .75rem; display: inline-flex; align-items: center; gap: .4rem;
  padding: .45rem .8rem; border-radius: 999px; font-size: var(--fs-xs); font-weight: 600; line-height: 1;
  color: var(--ink); background: rgba(251, 250, 246, .94); box-shadow: 0 0 0 1px var(--line), 0 8px 20px -10px rgba(20, 32, 24, .5);
}
@media (prefers-reduced-motion: no-preference) {
  .media-link img { transition: transform .6s var(--ease); }
  .media-link-hint { transition: background-color .25s var(--ease), color .25s var(--ease); }
}
@media (hover: hover) {
  .media-link:hover img { transform: scale(1.015); }
  .media-link:hover .media-link-hint { background: var(--forest); color: var(--on-dark); }
}
@media (max-width: 599px) { .media-link-hint { display: none; } } /* the button right under the picture says the same */
.media-carousel--single .media-aside { justify-content: center; gap: 1.25rem; }
.media-caption { display: grid; gap: .3rem; padding-left: 1.25rem; border-left: 2px solid var(--gold); }
.media-caption p { margin: 0; }
.media-caption .mi-title { color: var(--ink); }
.media-caption .mi-meta { color: var(--ink-3); }

/* ---------- Problem → solution: a stage with one wide picture (problem and support side by side) ---------- */
.stage-media--banner { grid-template-columns: 1fr; }
.stage-media--banner img { aspect-ratio: auto; height: auto; object-fit: contain; }
@media (min-width: 960px) {
  .prog-images figure.is-banner { display: grid; align-items: center; margin: 0; }
  .prog-images .pi-banner { width: 100%; height: auto; border-radius: var(--radius-m); box-shadow: 0 40px 70px -50px rgba(20, 32, 24, .55); }
}

/* ---------- Story: a landscape picture is shown whole, on every screen ---------- */
.story-figure.story-figure--wide { display: block; max-width: none; margin-top: 2rem; }
.story-figure.story-figure--wide img { aspect-ratio: auto; height: auto; object-fit: contain; width: 100%; border-radius: var(--radius-m); }

/* ---------- Results chart (hero slide): line charts drawn from numbers ---------- */
.hero-grid--chart { gap: clamp(1rem, .6rem + 1.4vw, 1.75rem) !important; align-content: center; }
.hero-grid.hero-grid--chart .hero-copy { width: 100%; max-width: none; margin-inline: 0 !important; text-align: center; }
.hero-grid--chart .hero-evidence-title { max-width: none; font-size: clamp(1.9rem, 1.2rem + 2.6vw, 3.25rem); margin-bottom: .6rem; }
.hero-grid--chart .hero-evidence-title .hero-by { font-size: .44em; margin-top: .5rem; color: var(--gold); font-style: normal; letter-spacing: 0; }
.hero-grid--chart .hero-claim { max-width: 70ch; margin: 0 auto; font-family: inherit; font-size: var(--fs-small); line-height: 1.5; color: var(--ink-2); }
.hero-grid--chart .hero-actions { justify-content: center; margin-top: 1rem; }
.hero-visual--chart { min-width: 0; }
.hero-visual--chart::before { content: none !important; }
.rchart {
  --rc-red: #C4423A; --rc-teal: #17616B; --rc-amber: #A9781F; --rc-green: #2F6B3A;
  background: #fff; border-radius: var(--radius-m); box-shadow: 0 0 0 1px var(--line), 0 40px 80px -60px rgba(20, 32, 24, .55);
  padding: clamp(1rem, .7rem + 1.2vw, 1.6rem); text-align: left; color: var(--ink);
}
.rchart-panels { display: grid; gap: 1.75rem 1.5rem; }
@media (min-width: 900px) {
  .rchart-panels--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rchart-panels--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .rchart-panels--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .rchart-panel + .rchart-panel { border-left: 1px solid var(--line); padding-left: 1.5rem; }
}
.rchart-panel { margin: 0; min-width: 0; color: var(--rc); }
.rchart--red { --rc: var(--rc-red); } .rchart--teal { --rc: var(--rc-teal); } .rchart--amber { --rc: var(--rc-amber); } .rchart--green { --rc: var(--rc-green); }
.rchart-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: baseline; gap: .1rem .55rem; color: var(--ink); }
.rchart-swatch { width: .7rem; height: .7rem; border-radius: 50%; background: var(--rc); align-self: center; }
.rchart-name { font-family: var(--serif); font-size: 1.2rem; line-height: 1.15; }
.rchart-unit { font-size: var(--fs-xs); color: var(--ink-3); white-space: nowrap; }
.rchart-hint { grid-column: 2 / -1; font-size: var(--fs-xs); color: var(--ink-3); }
/* The plot: room on the left for the scale, above for the numbers on the points, below for the labels */
.rchart-plot { position: relative; margin-top: 1.9rem; padding-left: 2.4rem; padding-right: 1.1rem; padding-bottom: 1.9rem; }
.rchart-area { position: relative; height: clamp(120px, 21vh, 190px); height: clamp(120px, 21svh, 190px); }
.rchart-area svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; color: var(--rc); }
.rchart-grid { stroke: rgba(29, 36, 32, .12); stroke-width: 1; vector-effect: non-scaling-stroke; }
.rchart-guide { stroke: rgba(29, 36, 32, .07); stroke-width: 1; vector-effect: non-scaling-stroke; }
.rchart-line { fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.rchart-line--target { stroke-dasharray: 5 5; stroke-width: 2; }
.rchart-y span { position: absolute; left: 0; width: 1.9rem; text-align: right; transform: translateY(-50%); font-size: .6875rem; line-height: 1; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.rchart-y { position: absolute; left: 0; top: 0; width: 2.4rem; height: clamp(120px, 21vh, 190px); height: clamp(120px, 21svh, 190px); }
.rchart-x { position: relative; height: 0; }
.rchart-x span { position: absolute; top: .55rem; transform: translateX(-50%); font-size: .6875rem; line-height: 1.2; color: var(--ink-2); white-space: nowrap; }
.rchart-pt { position: absolute; width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px; border-radius: 50%; background: var(--rc); box-shadow: 0 0 0 2.5px #fff; }
.rchart-pt b { position: absolute; left: 50%; bottom: calc(100% + 6px); transform: translateX(-50%); padding: .12rem .34rem; border-radius: 4px; background: color-mix(in srgb, var(--rc) 12%, #fff); color: var(--ink); font-size: .75rem; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; white-space: nowrap; }
.rchart-pt--target { background: #fff; box-shadow: 0 0 0 2.5px var(--rc), 0 0 0 5px color-mix(in srgb, var(--rc) 18%, #fff); }
.rchart-pt--target b { background: var(--rc); color: #fff; }
/* The key and the notes */
.rchart-key { display: flex; flex-wrap: wrap; gap: .4rem 1.5rem; justify-content: center; margin: 1rem 0 0; font-size: var(--fs-xs); color: var(--ink-2); }
.rchart-key-item { display: inline-flex; align-items: center; gap: .5rem; }
.rchart-key-line { width: 1.75rem; border-top: 2.5px solid var(--ink-2); }
.rchart-key-line--target { border-top-style: dashed; border-top-width: 2px; }
.rchart-notes { display: grid; gap: .9rem 2rem; margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--line); }
@media (min-width: 900px) { .rchart-notes--2 { grid-template-columns: 1fr 1.25fr; } .rchart-notes--3 { grid-template-columns: repeat(3, 1fr); } }
.rchart-note p { margin: 0; }
.rchart-note-label { font-size: .6875rem; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); margin-bottom: .3rem !important; }
.rchart-note-title { font-family: var(--serif); font-size: 1.05rem; line-height: 1.25; color: var(--ink); }
.rchart-note-meta { font-size: var(--fs-xs); color: var(--ink-2); margin-top: .2rem !important; }
.rchart-note-text { font-size: var(--fs-xs); line-height: 1.5; color: var(--ink-2); margin-top: .3rem !important; }
/* The line draws itself and the points appear the first time the slide arrives (scroll-driven hero, motion allowed) */
@media (prefers-reduced-motion: no-preference) {
  .hero--scroll.is-live .hero-slide--chart .rchart-data { clip-path: inset(-14px 100% -14px -14px); transition: clip-path 1.5s cubic-bezier(.3, .6, .2, 1) .2s; }
  .hero--scroll.is-live .hero-slide--chart.is-seen .rchart-data { clip-path: inset(-14px -14px -14px -14px); }
  .hero--scroll.is-live .hero-slide--chart .rchart-pt { opacity: 0; transform: scale(.4); transition: opacity .35s ease calc(.3s + var(--i, 0) * .28s), transform .45s cubic-bezier(.2, 1.4, .4, 1) calc(.3s + var(--i, 0) * .28s); }
  .hero--scroll.is-live .hero-slide--chart.is-seen .rchart-pt { opacity: 1; transform: none; }
}
@media (min-width: 900px) and (max-height: 820px) {
  .hero-grid--chart .hero-evidence-title { font-size: clamp(1.7rem, 1rem + 2vw, 2.5rem); margin-bottom: .35rem; }
  .rchart { padding: 1rem 1.25rem; }
  .rchart-plot { margin-top: 1.6rem; padding-bottom: 1.6rem; }
  .rchart-key { margin-top: .6rem; }
  .rchart-notes { margin-top: .7rem; padding-top: .7rem; }
  .rchart-note-text { line-height: 1.4; }
}
/* The chart is taller than a picture: let the slide take the height it needs */
.hero-slide--chart .hero-slide-inner { padding-block: clamp(1.25rem, 3vh, 2.5rem); }

/* ---------- Floating button: bottom-right corner of every page ---------- */
.consult-fab {
  position: fixed; z-index: 91;
  right: max(.85rem, env(safe-area-inset-right, 0px)); bottom: calc(.85rem + env(safe-area-inset-bottom, 0px));
  display: inline-flex; align-items: center; gap: .6rem; padding: .35rem 1.05rem .35rem .35rem; border-radius: 999px;
  background: var(--forest); color: var(--on-dark); text-decoration: none; font-size: var(--fs-small); font-weight: 600; line-height: 1; white-space: nowrap;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14), 0 14px 32px -12px rgba(20, 32, 24, .65);
}
.consult-fab-icon { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: rgba(255, 255, 255, .12); color: var(--gold-soft, #D8C59B); flex: none; }
.consult-fab:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
@media (hover: hover) { .consult-fab:hover { background: #1F3524; } .consult-fab:hover .consult-fab-icon { background: rgba(255, 255, 255, .2); } }
@media (prefers-reduced-motion: no-preference) {
  .consult-fab { transition: bottom .35s var(--ease), opacity .3s var(--ease), transform .3s var(--ease), visibility 0s, background-color .25s var(--ease); }
  .consult-fab.is-hidden { transition: bottom .35s var(--ease), opacity .3s var(--ease), transform .3s var(--ease), visibility 0s linear .3s; }
}
/* It steps up while the quick-action bar is on screen, so the two never overlap */
.sticky-cta.is-visible ~ .consult-fab { bottom: calc(68px + .75rem + env(safe-area-inset-bottom, 0px)); }
/* Out of the way while the consultation form itself is on screen, and while the mobile menu is open */
.consult-fab.is-hidden, body.menu-open .consult-fab { opacity: 0; transform: translateY(12px); visibility: hidden; pointer-events: none; }
@media (min-width: 600px) {
  .consult-fab { right: max(1.5rem, env(safe-area-inset-right, 0px)); bottom: 1.5rem; padding: .4rem 1.25rem .4rem .4rem; }
  .consult-fab-icon { width: 46px; height: 46px; }
}
@media (min-width: 600px) and (max-width: 1079px) { .sticky-cta.is-visible ~ .consult-fab { bottom: calc(68px + 1rem); } }
@media (min-width: 1080px) { .sticky-cta.is-visible ~ .consult-fab { bottom: calc(1.5rem + 58px + .75rem); } }
@media print { .consult-fab { display: none !important; } }

/* ---------- Hero slides: options shared by both behaviours ---------- */
.hero-slide { position: relative; isolation: isolate; }
.hero-slide-bg { position: absolute; inset: 0; z-index: -1; background-size: cover; background-position: center; }
.hero-grid--solo { grid-template-columns: minmax(0, 1fr) !important; }
.hero-grid--solo .hero-copy { max-width: 920px; }
.hero-panel--bare { padding-bottom: clamp(1.5rem, 1rem + 2vw, 2.5rem) !important; }
.hero-facts--one { grid-template-columns: 1fr; }
.hero-evidence-title .hero-by { margin-top: .6rem; }
@media (min-width: 560px) {
  .programme-list--1 { grid-template-columns: 1fr; }
  .programme-list--2 { grid-template-columns: 1.45fr 1fr; }
  .programme-list--4 { grid-template-columns: 1.45fr 1fr 1fr 1fr; }
}
.hero-slide--center .hero-copy { text-align: center; margin-inline: auto; }
.hero-slide--center .hero-copy :is(h1, h2, .hero-claim, .hero-note, .programme) { margin-inline: auto; }
.hero-slide--center :is(.hero-actions, .hero-goal, .kicker) { justify-content: center; }
.hero-slide--center .hero-note { border-left: 0; padding-left: 0; }
.hero-slide--dark .hero-note { color: var(--on-dark-2); }
.hero-slide--dark .hero-by { color: var(--on-dark-2); }
/* A wide picture across the whole slide (an infographic or banner). It is shown whole, never cropped
   or enlarged past its own size, and is kept short enough for the slide to fit on one screen. */
.hero-grid--wide { grid-template-columns: minmax(0, 1fr) !important; gap: clamp(1.25rem, 1rem + 1.5vw, 2.25rem); }
.hero-grid--wide .hero-copy { max-width: 920px; }
.hero-visual--wide { display: grid; justify-items: center; min-width: 0; }
.hero-visual--wide::before { content: none !important; }
.hero-wide { margin: 0; max-width: 100%; overflow: hidden; border-radius: var(--radius-m); background: #fff; box-shadow: 0 0 0 1px var(--line), 0 22px 40px -28px rgba(20, 32, 24, .5); }
@media (min-width: 768px) { .hero-wide { box-shadow: 0 0 0 1px var(--line), 0 50px 90px -60px rgba(20, 32, 24, .55); } }
.hero-wide picture { display: block; }
.hero-wide-img {
  display: block; width: auto; height: auto; max-width: 100%;
  max-height: max(240px, calc(100vh - var(--header-h) - 8.5rem)); max-height: max(240px, calc(100svh - var(--header-h) - 8.5rem));
}
.hero-slide--center .hero-grid--wide .hero-copy { margin-inline: auto; }
/* Carousel behaviour: centre the picture in the space the tallest slide sets, and leave room for the tabs under it */
.hero-carousel .hero-slide--wide { display: grid; align-items: center; }
.hero-carousel .hero-wide-img { max-height: max(240px, min(680px, calc(100vh - var(--header-h) - 190px))); max-height: max(240px, min(680px, calc(100svh - var(--header-h) - 190px))); }
/* A taller phone version, when one was added, may run the full height it needs */
@media (max-width: 767px) { .hero-wide picture .hero-wide-img { max-height: none; } }

/* ---------- Hero slides: scroll-driven ----------
   Each slide is at least one screen tall. Once the page script has started (.is-live) the slides
   pin under the header and the next one rises over the last; the script only writes two numbers
   per slide (--q: how far it has arrived, --p: how far it is covered) and CSS does the rest with
   transforms and opacity, which the browser can animate without re-laying-out the page.
   Without JavaScript, or with reduced motion, the slides are simply stacked. */
.hero--scroll { padding-top: 0; --hero-top: calc(var(--header-h) + env(safe-area-inset-top, 0px)); }
.js .hero--scroll .hero-slides { display: block; }
.js .hero--scroll .hero-slide, .js .hero--scroll .hero-slide:not(.is-active) { opacity: 1; visibility: visible; pointer-events: auto; transition: none; }
.hero--scroll .hero-slide {
  display: grid; overflow: hidden; background-color: var(--paper);
  min-height: calc(100vh - var(--hero-top)); min-height: calc(100svh - var(--hero-top));
}
.hero--scroll .hero-slide.cms-tone-forest { background-color: var(--forest-2); }
.hero--scroll .hero-slide-inner { align-self: center; min-width: 0; padding-block: clamp(1.5rem, 1rem + 2vw, 3rem) clamp(2rem, 1.25rem + 3vw, 4rem); }
.hero--scroll .hero-slide .hero-visual::before { opacity: 1; }
.hero--scroll .cred-strip { position: relative; z-index: 1; margin-top: 0; background: var(--paper); }
.no-js .hero--scroll .hero-slide + .hero-slide { margin-top: 0; }

.hero--scroll.is-live .hero-slide {
  position: sticky;
  /* A slide taller than the screen scrolls through first, and pins when its end comes into view */
  top: min(var(--hero-top), calc(100vh - var(--h, 0px)));
  top: min(var(--hero-top), calc(100svh - var(--h, 0px)));
  --k: calc(var(--s, .6) * var(--si, 1));
}
/* The pause before the next slide arrives. It is a top margin on the arriving slide: a bottom margin
   on the pinned one would count as part of it and push it out of view early. */
.hero--scroll.is-live .hero-slide + .hero-slide { margin-top: calc(var(--hold, 34) * 1vh); }
.hero--scroll.is-live .hero-slide + .hero-slide { box-shadow: 0 -30px 60px -40px rgba(20, 32, 24, .35); }
.hero--scroll.is-live .hero-slide-inner {
  transform-origin: 50% 100%;
  transform: translate3d(0, calc(var(--p, 0) * var(--oy, 0px)), 0) scale(calc(1 - var(--p, 0) * var(--os, 0)));
  opacity: calc(1 - var(--p, 0) * var(--of, 0));
}
.hero--scroll.is-live .hero-copy {
  transform: translate3d(0, calc((1 - var(--q, 1)) * var(--cy, 0px)), 0);
  opacity: calc(1 - (1 - var(--q, 1)) * var(--cf, 0));
}
.hero--scroll.is-live .hero-visual { transform: translate3d(0, calc((1 - var(--q, 1)) * var(--vy, 0px)), 0) scale(calc(1 + (1 - var(--q, 1)) * var(--vz, 0))); }
.hero--scroll.is-live .hero-slide-bg {
  inset: -10% 0;
  transform: translate3d(0, calc((1 - var(--q, 1)) * var(--by, 0px) + var(--p, 0) * var(--bo, 0px)), 0) scale(calc(1 + (1 - var(--q, 1)) * var(--bz, 0)));
}
.hero--scroll.is-live .is-moving :is(.hero-slide-inner, .hero-copy, .hero-visual, .hero-slide-bg) { will-change: transform, opacity; }
/* Animation styles (the "Combined" style switches on all of them) */
.hero--scroll.is-live [data-fx-on~="fade"] { --of: .85; --cf: 1; }
.hero--scroll.is-live [data-fx-on~="zoom"] { --vz: calc(var(--k) * .22); --bz: calc(var(--k) * .18); --os: -.05; }
.hero--scroll.is-live [data-fx-on~="scale"] { --os: .07; }
.hero--scroll.is-live [data-fx-on~="parallax"] { --oy: calc(var(--k) * -14vh); --cy: calc(var(--k) * 12vh); --vy: calc(var(--k) * 24vh); --by: calc(var(--k) * -8vh); --bo: calc(var(--k) * 8vh); }
/* Text arrives line by line the first time a slide comes in */
@media (prefers-reduced-motion: no-preference) {
  .hero--scroll.is-live .hero-slide:not(:first-child):not(.is-seen) .hero-copy > * { opacity: 0; }
  .hero--scroll.is-live .hero-slide.is-seen:not(:first-child) .hero-copy > * { animation: cms-rise .9s var(--ease-slow) both; }
  .hero--scroll.is-live .hero-slide.is-seen:not(:first-child) .hero-copy > :nth-child(2) { animation-delay: .07s; }
  .hero--scroll.is-live .hero-slide.is-seen:not(:first-child) .hero-copy > :nth-child(3) { animation-delay: .14s; }
  .hero--scroll.is-live .hero-slide.is-seen:not(:first-child) .hero-copy > :nth-child(4) { animation-delay: .21s; }
  .hero--scroll.is-live .hero-slide.is-seen:not(:first-child) .hero-copy > :nth-child(n + 5) { animation-delay: .28s; }
}
/* Slide navigation */
.hero-dots {
  position: fixed; right: max(.5rem, env(safe-area-inset-right, 0px)); top: 50%; transform: translateY(-50%); z-index: 80;
  display: flex; flex-direction: column; padding: .25rem; border-radius: 999px;
  background: rgba(245, 243, 236, .72); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: 0 0 0 1px var(--line);
  opacity: 0; visibility: hidden; transition: opacity .3s var(--ease), visibility 0s linear .3s;
}
.hero--scroll.is-live.is-inview .hero-dots { opacity: 1; visibility: visible; transition-delay: 0s; }
.hero-dots button { position: relative; width: 26px; height: 26px; padding: 0; display: grid; place-items: center; background: none; border: 0; border-radius: 50%; cursor: pointer; }
.hero-dots button::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: rgba(29, 36, 32, .3); transition: transform .3s var(--ease), background-color .3s var(--ease); }
.hero-dots button.is-current::before { background: var(--gold); transform: scale(1.45); }
.hero-dots button span {
  position: absolute; right: calc(100% + .5rem); top: 50%; transform: translate(6px, -50%); white-space: nowrap;
  font-size: var(--fs-xs); font-weight: 500; line-height: 1; padding: .45rem .7rem; border-radius: 999px;
  background: var(--forest-2); color: var(--on-dark); opacity: 0; pointer-events: none; transition: opacity .2s var(--ease), transform .2s var(--ease);
}
@media (hover: hover) { .hero-dots button:hover span { opacity: 1; transform: translate(0, -50%); } }
.hero-dots button:focus-visible span { opacity: 1; transform: translate(0, -50%); }
@media print { .hero-dots { display: none; } }

/* ---------- Blank section: blocks ---------- */
.cms-blank-grid { display: grid; gap: clamp(2rem, 1.5rem + 3vw, 5rem); }
.cms-blank-grid--narrow > .cms-blank-col { max-width: 760px; }
.cms-blank-grid--normal > .cms-blank-col { max-width: 980px; }
.cms-aligned .cms-blank-col { margin-left: var(--cms-ml, 0); margin-right: var(--cms-mr, auto); }
@media (min-width: 960px) {
  .cms-blank-grid--two { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .cms-blank-grid--2-1 { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); }
  .cms-blank-grid--1-2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); }
}
.cms-blank-grid--v-center { align-items: center; }
.cms-blank-grid--v-end { align-items: end; }
@media (max-width: 959px) { .cms-blank-grid--m-reverse > :first-child { order: 2; } }
.cms-blank-col { display: flex; flex-direction: column; gap: 1.5rem; min-width: 0; }
.cms-b { min-width: 0; }
.cms-b--heading :is(h1, h2, h3, h4) { margin-bottom: 0; }
.cms-b--heading .kicker { margin-bottom: 1rem; }
.cms-b-display { max-width: 16ch; }
.cms-b-h3 { font-size: var(--fs-h3); line-height: 1.2; }
.cms-b-h4 { font-size: 1.25rem; line-height: 1.25; }
.cms-b--image figure { margin: 0; width: 100%; }
.cms-b--image img { display: block; width: 100%; height: auto; border-radius: var(--radius-m); }
.cms-b--image figcaption { font-size: var(--fs-small); color: var(--ink-3); margin-top: .8rem; }
.cms-b--shadow img { box-shadow: 0 50px 90px -60px rgba(20, 32, 24, .55); }
.cms-b--buttons { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.5rem; }
.cms-b--center { text-align: center; }
.cms-b--center > :is(figure, hr) { margin-inline: auto; }
.cms-b--center.cms-b--buttons { justify-content: center; }
.cms-b--right { text-align: right; }
.cms-b--right > :is(figure, hr) { margin-left: auto; }
.cms-b--right.cms-b--buttons { justify-content: flex-end; }
.cms-b-rule { border: 0; height: 1px; width: 100%; margin: 0; background: var(--line-strong); }
.cms-b--spacer { height: 3rem; }
.cms-b-list { display: grid; gap: .6rem; color: var(--ink-2); counter-reset: cmsb; }
.cms-b-list li { position: relative; padding-left: 1.75rem; }
.cms-b-list--dash li::before { content: ""; position: absolute; left: 0; top: .8em; width: 14px; height: 1px; background: var(--gold); }
.cms-b-list--check li::before { content: ""; position: absolute; left: 0; top: .35em; width: 14px; height: 8px; border-left: 1.5px solid var(--gold); border-bottom: 1.5px solid var(--gold); transform: rotate(-45deg); }
.cms-b-list--number li { counter-increment: cmsb; }
.cms-b-list--number li::before { content: counter(cmsb, decimal-leading-zero); position: absolute; left: 0; top: .15em; font-family: var(--serif); font-size: var(--fs-small); color: var(--gold); }
.cms-tone-forest .cms-b-list { color: var(--on-dark-2); }

/* ---------- Logo cloud ---------- */
.cms-logos { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: clamp(1.5rem, 1rem + 2vw, 3rem) clamp(2rem, 1rem + 4vw, 5rem); --logo-h: 48px; }
.cms-logos--s { --logo-h: 32px; }
.cms-logos--l { --logo-h: 72px; }
.cms-logos img { width: auto; height: var(--logo-h); max-width: min(220px, 40vw); object-fit: contain; }
.cms-logos a { display: block; }
@media (prefers-reduced-motion: no-preference) { .cms-logos--mono img { transition: filter .3s var(--ease), opacity .3s var(--ease); } }
.cms-logos--mono img { filter: grayscale(1); opacity: .7; }
.cms-logos--mono li:hover img, .cms-logos--mono a:focus-visible img { filter: none; opacity: 1; }
@media (max-width: 767px) {
  .hero-dots { right: 2px; padding: 2px; background: rgba(245, 243, 236, .55); }
  .hero-dots button { width: 16px; height: 22px; }
  .hero-dots button::before { width: 6px; height: 6px; }
}
/* The hero's decorative ellipses reach past the page edge on mid-width screens; keep them from widening the page */
.cms-hero { overflow-x: clip; }