/* Time Out Boxing — refresh styles */

:root {
  --accent: var(--colorPrimary);
  --accent-deep: var(--colorPrimary-dark);
  --bg: var(--colorOffWhite);
  --bg-dark: var(--colorOffBlack);
  --ink: var(--colorOffBlack);
  --rule: rgba(32,39,43,0.08);
  --container: 1360px;
  /* External-link glyph (box + arrow) used as a CSS mask, tinted via currentColor. */
  --icon-external: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'/%3E%3Cpolyline points='15 3 21 3 21 9'/%3E%3Cline x1='10' y1='14' x2='21' y2='3'/%3E%3C/svg%3E");
}

/* ---------- accessibility: focus, skip link, reduced motion ---------- */
/* One clear, high-contrast keyboard focus ring for every interactive element.
   :focus-visible only fires for keyboard/AT users, so mouse clicks stay clean. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
  border-radius: 2px;
}
/* Form fields that strip the native outline still get a visible focus state. */
.ro-card input:focus-visible,
.ro-card textarea:focus-visible,
.finalcta-form input:focus-visible,
.finalcta-form textarea:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 0;
}

/* Skip-to-content link: off-screen until focused, then pinned top-left. */
.skip-link {
  position: absolute; left: 1rem; top: -3rem; z-index: 1000;
  background: var(--ink); color: #fff; border: 0;
  padding: 0.65rem 1rem; border-radius: 0 0 8px 8px;
  font-weight: 600; text-decoration: none;
  transition: top .15s ease;
}
.skip-link:focus { top: 0; outline: 3px solid var(--accent); outline-offset: 2px; }

/* Respect the OS "reduce motion" setting: strip animation, parallax, smooth
   scroll and transitions for users who can get motion sickness/migraines. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .ticker-track { animation: none !important; }
  .parallax-img { transform: none !important; }
  .hero-title .line, .section-head, .feature, .split-copy > *, .split-media,
  .prog-item, .review, .faq-item, .finalcta-card { opacity: 1 !important; transform: none !important; }
}

/* ---------- accent intensity ---------- */
body[data-accent="neon"]  { --accent: #00ffa3; --accent-deep: #0e9368; }
body[data-accent="mint"]  { --accent: #b8ffae; --accent-deep: #3aa36e; }
body[data-accent="deep"]  { --accent: #0e9368; --accent-deep: #064d34; }

/* ---------- base ---------- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--ink);
  overflow-x: hidden;
  font-size: 17px;
  display: flex; flex-direction: column; min-height: 100vh;
}
/* Sticky footer: main grows to fill short pages and pushes the footer to the
   bottom; the footer keeps its natural height (was inverted, which made the
   footer itself stretch and leave a big empty band above its content). */
body > main { flex: 1 0 auto; }
body > .site-foot { flex: 0 0 auto; }
img { max-width: 100%; display: block; }
a, a:visited { border-bottom: none; text-decoration: none; color: inherit; }
a:hover { border-bottom: none; }

.container { max-width: var(--container); margin: 0 auto; padding: 0 2rem; }
@media (max-width: 780px){ .container { padding: 0 1.25rem; } }

/* ---------- buttons ---------- */
/* `:visited` selector has higher specificity than a class, so every button
   variant needs `:visited` in its selector list to keep the right text
   colour after the link has been visited. */
.a_button, a.a_button:visited,
.nav-cta, a.nav-cta:visited {
  color: #0a1510;
}
.a_button {
  display: inline-flex; align-items: center; gap: 0.6rem;
  padding: 0.9rem 1.75rem; border-radius: 999px;
  font-family: inherit; font-weight: 600; font-size: 0.95rem; letter-spacing: -0.01em;
  /* 2px whole-pixel border — 1.5px rendered sub-pixel differently on bottom
     vs top/sides on some zoom levels, producing a cut-off bottom stroke. */
  border: 2px solid var(--accent);
  background: var(--accent);
  transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s, background .2s, opacity .2s;
  cursor: pointer;
}
.a_button:hover { transform: translateY(-2px); box-shadow: 0 10px 30px -10px var(--accent); }
.a_button svg { width: 1em; height: 1em; }
/* mcsRTE.css sets `a, a:visited { border-bottom: 0.0625em dotted primary }`
   with specificity (0,1,1) — higher than plain `.a_button` (0,1,0) — which
   overrode only the bottom edge of every anchor-button, leaving a thin
   green stub instead of the real 2px border. Re-assert the bottom edge at
   matching specificity so all four sides stay consistent. */
a.a_button,
a.a_button:visited,
a.a_button:hover,
a.a_button:focus {
  border-bottom-width: 2px;
  border-bottom-style: solid;
  border-bottom-color: var(--accent);
}
.a_button.-ghost, a.a_button.-ghost:visited {
  background: transparent; color: currentColor; border-color: currentColor; opacity: 0.92;
}
a.a_button.-ghost,
a.a_button.-ghost:visited,
a.a_button.-ghost:hover,
a.a_button.-ghost:focus {
  border-bottom-color: currentColor;
}
a.a_button.-ghost:hover {
  background: rgba(255,255,255,0.06);
  opacity: 1;
}
.a_button.-colorWhite, a.a_button.-colorWhite:visited {
  background: #fff; border-color: #fff; color: var(--bg-dark);
}

/* ---------- eyebrow ---------- */
.eyebrow {
  display: inline-flex; align-items: center; gap: 0.6rem;
  font-size: 0.72rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.18em; color: var(--accent-deep);
  margin-bottom: 1.5rem;
}
.eyebrow::before {
  content: ''; width: 28px; height: 1.5px; background: var(--accent-deep); display: inline-block;
}
.eyebrow.-light { color: var(--accent); }
.eyebrow.-light::before { background: var(--accent); }

/* ---------- section heads ---------- */
/* ============ HOME FACT STRIP ============ */
.factstrip {
  position: relative;
  background: var(--bg-dark);
  color: #fff;
  padding: 4.5rem 0 5rem;
}
.factstrip-head { margin-bottom: 2rem; }
.factstrip-head .eyebrow.-light {
  color: rgba(255,255,255,0.55);
  letter-spacing: 0.18em;
  font-size: 0.85rem;
  text-transform: uppercase;
}
.factstrip-splide .splide__list { align-items: stretch; }
.factstrip-splide .splide__slide {
  display: flex; height: auto;
  padding: 10px;
}
.factstrip-card {
  flex: 1;
  display: flex; flex-direction: column; gap: 0.75rem;
  padding: 1.75rem;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 18px;
  transition: transform 0.3s cubic-bezier(.2,.8,.2,1), border-color 0.3s ease, background 0.3s ease, box-shadow 0.3s ease;
}
.factstrip-card:hover {
  transform: translateY(-4px);
  border-color: color-mix(in oklab, var(--accent) 60%, transparent);
  background: rgba(255,255,255,0.06);
  box-shadow: 0 14px 30px -12px rgba(0,0,0,0.5), 0 0 0 1px color-mix(in oklab, var(--accent) 25%, transparent);
}
.factstrip-title {
  font-family: var(--fontFamilyHeading, var(--fontFamilyBase));
  font-size: clamp(1.4rem, 2vw, 1.85rem);
  line-height: 1.1;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.factstrip-title em {
  font-style: normal;
  color: var(--accent);
  display: block;
}
.factstrip-note {
  margin: 0;
  color: rgba(255,255,255,0.7);
  font-size: 0.95rem;
  font-weight: 300;
  line-height: 1.5;
}
@media (max-width: 700px) {
  .factstrip { padding: 3rem 0 3.5rem; }
  .factstrip-card { padding: 1.5rem; }
}

/* ============ HOME WATCH-US VIDEO ============ */
.watchus {
  position: relative;
  background: var(--bg-dark);
  color: #fff;
  padding: 6rem 0 7rem;
  overflow: hidden;
}
.watchus-bg { position: absolute; inset: 0; z-index: 0; }
.watchus-bg img {
  width: 100%; height: 100%; object-fit: cover;
  filter: contrast(1.05) brightness(0.4) saturate(1.1);
}
.watchus-veil {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 65% 50%, transparent 0%, rgba(20,26,29,0.4) 60%, rgba(20,26,29,0.85) 100%),
    linear-gradient(180deg, rgba(20,26,29,0.3) 0%, rgba(20,26,29,0.6) 100%);
}
.watchus-inner {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: 1fr 1.2fr;
  gap: 4rem; align-items: center;
}
.watchus-copy .eyebrow.-light {
  color: rgba(255,255,255,0.6);
  letter-spacing: 0.18em; text-transform: uppercase;
  font-size: 0.85rem; margin-bottom: 1rem;
}
.watchus-copy h2 {
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.05; letter-spacing: -0.02em;
  margin: 0 0 1.5rem;
}
.watchus-copy h2 em { font-style: normal; color: var(--accent); }
.watchus-copy p {
  color: rgba(255,255,255,0.75);
  font-weight: 300; max-width: 42ch;
  font-size: 1.05rem; line-height: 1.55;
  margin: 0;
}
.watchus-player {
  position: relative; display: block;
  width: 100%; aspect-ratio: 16/9;
  border: 0; padding: 0; cursor: pointer;
  background: #000; border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 40px 80px -30px rgba(0,0,0,0.7), 0 0 0 1px rgba(255,255,255,0.08);
  transition: transform 0.4s cubic-bezier(.2,.8,.2,1), box-shadow 0.4s;
}
.watchus-player:hover { transform: translateY(-3px); box-shadow: 0 50px 100px -30px rgba(0,0,0,0.8), 0 0 0 1px rgba(0,255,163,0.2); }
.watchus-poster {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.6s, filter 0.4s;
}
.watchus-player:hover .watchus-poster { transform: scale(1.04); filter: brightness(1.05); }
.watchus-play {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  pointer-events: none;
}
.watchus-play svg {
  filter: drop-shadow(0 8px 24px rgba(0,0,0,0.6));
  transition: transform 0.3s cubic-bezier(.2,.8,.2,1);
}
.watchus-player:hover .watchus-play svg { transform: scale(1.08); }
.watchus-duration {
  position: absolute; bottom: 1rem; right: 1rem;
  background: rgba(20,26,29,0.85);
  padding: 0.35rem 0.65rem; border-radius: 6px;
  font-size: 0.8rem; font-weight: 600;
  letter-spacing: 0.04em;
  backdrop-filter: blur(8px);
}
.watchus-iframe {
  width: 100%; aspect-ratio: 16/9;
  border: 0; border-radius: 18px;
  box-shadow: 0 40px 80px -30px rgba(0,0,0,0.7), 0 0 0 1px rgba(255,255,255,0.08);
  background: #000;
}
@media (max-width: 900px) {
  .watchus { padding: 4rem 0 4.5rem; }
  .watchus-inner { grid-template-columns: 1fr; gap: 2.5rem; }
}

.section-head { margin-bottom: 4rem; max-width: 780px; }
.section-head h2 {
  font-size: clamp(2.4rem, 5vw, 4rem); font-weight: 700;
  letter-spacing: -0.035em; line-height: 1.02; margin: 0 0 1rem;
}
.section-head h2 em { font-style: normal; color: var(--accent-deep); font-weight: 700; }
.section-head p { font-size: 1.15rem; color: #4a5258; font-weight: 300; max-width: 58ch; }
.section-head.-two-col { max-width: none; display: grid; grid-template-columns: 1.15fr 1fr; gap: 4rem; align-items: end; }
.section-head.-two-col p { margin: 0; }
@media (max-width: 900px){ .section-head.-two-col { grid-template-columns: 1fr; gap: 1.5rem; } }

/* ============ NAV ============ */
.site-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  display: grid; grid-template-columns: auto 1fr auto; align-items: center;
  gap: 2rem;
  padding: 2.75rem 2rem 1.75rem;
  color: #fff;
  transition: background .35s, backdrop-filter .35s, padding .35s, color .35s;
}
.site-nav.scrolled {
  background: rgba(20, 26, 29, 0.72);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  padding: 0.75rem 2rem;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.nav-mark { display: inline-flex; align-items: center; }
.nav-logo {
  height: 44px; width: auto; display: block;
  transform-origin: left center;
  transform: scale(2);
  transition: transform .45s cubic-bezier(.2,.8,.2,1);
}
.site-nav.scrolled .nav-logo { transform: scale(1); }
@media (max-width: 720px) {
  .nav-logo { transform: scale(1.35); }
  .site-nav.scrolled .nav-logo { transform: scale(1); }
}
.nav-links { display: flex; gap: 2.25rem; justify-content: center; }
.nav-links a {
  font-size: 0.9rem; font-weight: 500; color: rgba(255,255,255,0.82);
  position: relative; padding: 0.4rem 0;
}
.nav-links a::after {
  content:''; position:absolute; left:0; bottom:0; width:0; height:1.5px;
  background: var(--accent); transition: width .3s;
}
.nav-links a:hover { color: #fff; }
.nav-links a:hover::after { width: 100%; }
.nav-links a[aria-current="page"] { color: #fff; }
.nav-links a[aria-current="page"]::after { width: 100%; }
.nav-cta {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.6rem 1.1rem; border-radius: 999px;
  background: var(--accent); color: #0a1510;
  font-size: 0.85rem; font-weight: 600;
  transition: transform .25s, box-shadow .25s;
}
.nav-cta:hover { transform: translateY(-1px); box-shadow: 0 8px 24px -8px var(--accent); }
.nav-cta svg { width: 14px; height: 14px; }
.nav-toggle { display: none; }
.nav-drawer { display: none; }
.nav-drawer-cta { display: none; }

/* Below 900px we collapse the desktop nav: links → drawer, header CTA → drawer.
   The header keeps just the logo and the hamburger toggle. */
@media (max-width: 900px) {
  .site-nav { grid-template-columns: 1fr auto; gap: 0.75rem; padding: 1rem 1.25rem; }
  .nav-links { display: none; }
  .nav-cta { display: none; }

  .nav-toggle {
    display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 5px;
    width: 44px; height: 44px;
    padding: 0; border: 1px solid rgba(255,255,255,0.2); border-radius: 10px;
    background: rgba(255,255,255,0.05);
    cursor: pointer;
    transition: background .2s, border-color .2s;
  }
  .nav-toggle:hover, .nav-toggle:focus-visible {
    background: rgba(255,255,255,0.1);
    border-color: rgba(255,255,255,0.35);
  }
  .nav-toggle-bar {
    display: block; width: 20px; height: 2px;
    background: #fff; border-radius: 2px;
    transition: transform .25s, opacity .25s;
  }
  .site-nav.drawer-open .nav-toggle-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .site-nav.drawer-open .nav-toggle-bar:nth-child(2) { opacity: 0; }
  .site-nav.drawer-open .nav-toggle-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  .nav-drawer {
    display: flex; flex-direction: column;
    grid-column: 1 / -1;
    gap: 0.25rem;
    margin-top: 0.75rem;
    padding: 0.5rem 0.25rem 1rem;
    border-top: 1px solid rgba(255,255,255,0.08);
  }
  .nav-drawer[hidden] { display: none !important; }
  .nav-drawer a {
    color: rgba(255,255,255,0.85);
    font-size: 1rem; font-weight: 500;
    padding: 0.9rem 0.75rem;
    border-radius: 8px;
    transition: background .2s, color .2s;
  }
  .nav-drawer a:hover { background: rgba(255,255,255,0.06); color: #fff; }
  .nav-drawer a[aria-current="page"] {
    background: rgba(0,255,163,0.08);
    color: var(--accent);
  }
  .nav-drawer-cta {
    display: inline-flex !important; align-items: center; justify-content: center; gap: 0.5rem;
    margin-top: 0.75rem;
    padding: 0.95rem 1.25rem;
    border-radius: 999px;
    background: var(--accent); color: #0a1510 !important;
    font-size: 0.95rem; font-weight: 700; letter-spacing: 0.01em;
  }
  .nav-drawer-cta:hover { background: var(--accent); color: #0a1510 !important; }
  .nav-drawer-cta svg { width: 16px; height: 16px; }

  .site-nav.drawer-open {
    background: rgba(20,26,29,0.92);
    backdrop-filter: blur(18px) saturate(140%);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
  }
}

/* Tablet-ish range — desktop nav still showing but cramped. Tighten gaps + hide the longer CTA text. */
@media (min-width: 901px) and (max-width: 1100px) {
  .site-nav { gap: 1.25rem; padding: 1.5rem 1.5rem; }
  .nav-links { gap: 1.5rem; }
  .nav-links a { font-size: 0.85rem; }
  .nav-cta { padding: 0.55rem 0.95rem; font-size: 0.8rem; }
}

body.nav-locked { overflow: hidden; }

/* ============ HERO ============ */
.hero {
  position: relative; min-height: min(100vh, 880px);
  display: grid; align-items: end;
  color: #fff; background: var(--bg-dark);
  overflow: hidden;
}
.hero-bg { position: absolute; inset: 0; z-index: 0; }
.hero-bg img {
  width: 100%; height: 100%; object-fit: cover; object-position: center 30%;
  filter: contrast(1.05) brightness(0.7) saturate(1.05);
  will-change: transform;
}
.hero-veil {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 30% 60%, transparent 0%, rgba(20,26,29,0.6) 60%, rgba(20,26,29,0.95) 100%),
    linear-gradient(180deg, rgba(20,26,29,0.55) 0%, rgba(20,26,29,0.2) 40%, rgba(20,26,29,0.95) 100%);
}
.hero-grid {
  position: absolute; inset: 0; opacity: 0.18;
  background-image:
    linear-gradient(to right, rgba(255,255,255,0.08) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,0.08) 1px, transparent 1px);
  background-size: calc(100% / 12) 100%, 100% 25%;
  pointer-events: none;
}

.hero-inner {
  position: relative; z-index: 2;
  max-width: var(--container); width: 100%;
  margin: 0 auto; padding: 8rem 2rem 4.5rem;
}
body[data-layout="center"] .hero-inner { text-align: center; }
body[data-layout="center"] .hero-inner .hero-title { margin-left: auto; margin-right: auto; }
body[data-layout="center"] .hero-actions,
body[data-layout="center"] .hero-eyebrow { justify-content: center; }
body[data-layout="center"] .hero-meta { justify-content: center; }

body[data-layout="editorial"] .hero-inner { padding-left: 0; padding-right: 0; display: grid; grid-template-columns: 1fr 0.6fr; gap: 4rem; align-items: end; max-width: calc(var(--container) + 2rem); padding: 8rem 2rem 6rem; }
body[data-layout="editorial"] .hero-title { font-size: clamp(4rem, 10vw, 9rem) !important; }
body[data-layout="editorial"] .hero-meta { grid-column: 2; flex-direction: column; align-items: flex-start; }
body[data-layout="editorial"] .hero-actions { grid-column: 1; }
@media (max-width: 900px){
  body[data-layout="editorial"] .hero-inner { grid-template-columns: 1fr; }
}

.hero-eyebrow {
  display: inline-flex; align-items: center; gap: 0.6rem;
  font-size: 0.72rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.16em; color: rgba(255,255,255,0.7);
  padding: 0.5rem 0.9rem 0.5rem 0.8rem;
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 999px; margin-bottom: 2rem;
}
.pulse {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 0 var(--accent);
  animation: pulse 2s infinite;
}
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(0,255,163,0.6); }
  70% { box-shadow: 0 0 0 12px rgba(0,255,163,0); }
  100% { box-shadow: 0 0 0 0 rgba(0,255,163,0); }
}

.hero-title {
  font-family: var(--fontHeading);
  font-size: clamp(3.5rem, 8.5vw, 8rem);
  font-weight: 700; line-height: 1.1; letter-spacing: -0.045em;
  margin: 0 0 2rem; max-width: 18ch;
}
.hero-title .line { display: block; overflow: hidden; }
.hero-title .line em { font-style: normal; color: var(--accent); font-weight: 700; }
.hero-title .line.underline { position: relative; }
/* Use native text-decoration so the bar only underlines the glyphs themselves
   (honours wrapped lines and trailing whitespace). Colour starts transparent
   and fades to accent when the line reveals, replacing the earlier scaleX
   wipe that couldn't avoid extending past the text. */
.hero-title .line.underline .underline-ink {
  text-decoration-line: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.08em;
  transition: text-decoration-color 1s cubic-bezier(.2,.8,.2,1) 0.8s;
}
.hero-title .line.underline.in .underline-ink { text-decoration-color: var(--accent); }

.hero-sub {
  font-size: 1.25rem; line-height: 1.5; font-weight: 300;
  color: rgba(255,255,255,0.78);
  max-width: 52ch; margin: 0 0 2.5rem;
}
.hero-actions { display: flex; gap: 1rem; flex-wrap: wrap; margin-bottom: 3.5rem; }

.hero-meta {
  display: flex; gap: 3rem; flex-wrap: wrap;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255,255,255,0.12);
  max-width: none;
}
.hero-meta .k {
  font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.16em;
  color: rgba(255,255,255,0.5); margin-bottom: 0.4rem;
}
.hero-meta .v { font-size: 0.95rem; font-weight: 500; color: #fff; display: inline-flex; align-items: center; gap: 0.5rem; }
.hero-meta .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 12px var(--accent); }

.hero-scroll {
  position: absolute; right: 2rem; bottom: 2rem; z-index: 3;
  display: inline-flex; flex-direction: column; align-items: center; gap: 0.5rem;
  color: rgba(255,255,255,0.6); font-size: 0.7rem; text-transform: uppercase;
  letter-spacing: 0.16em;
}

/* Compact hero variant for utility pages (contact, small-print). */
.hero.hero--small { min-height: auto; }
.hero.hero--small .hero-inner { padding: 7rem 2rem 3rem; }
.hero.hero--small .hero-title {
  font-size: clamp(2.5rem, 5vw, 4rem);
  margin-bottom: 1rem;
  max-width: 24ch;
}
.hero.hero--small .hero-sub { margin-bottom: 1rem; font-size: 1.05rem; max-width: 58ch; }
.hero.hero--small .hero-actions,
.hero.hero--small .hero-meta,
.hero.hero--small .hero-scroll { display: none; }
.hero-scroll svg { width: 18px; height: 30px; color: rgba(255,255,255,0.5); }
@media (max-width: 600px){
  .hero-scroll { display: none; }
  /* Tighten the bottom of the hero on phones — the meta strip sits close to the
     next section without a big empty zone underneath. */
  .hero { min-height: auto; padding-bottom: 1rem; }
  .hero-inner { padding: 7rem 1.25rem 2rem; }
  .hero-meta { gap: 1.25rem 2rem; padding-top: 1rem; }
}

/* ============ TICKER ============ */
.ticker {
  background: var(--bg-dark); color: #fff;
  border-top: 1px solid rgba(255,255,255,0.08);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  overflow: hidden; padding: 1.75rem 0;
}
.ticker-track {
  display: inline-flex; gap: 2rem; align-items: center; white-space: nowrap;
  font-size: clamp(1.5rem, 3.5vw, 2.5rem); font-weight: 700;
  letter-spacing: -0.02em;
  animation: marquee 38s linear infinite;
}
.ticker-track span.sep { color: var(--accent); font-size: 0.6em; }
body[data-motion="off"] .ticker-track { animation: none; }
@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* ============ STATS ============ */
.stats {
  background: var(--bg-dark); color: #fff;
  padding: 3.5rem 0 4rem;
}
.stats .eyebrow { color: var(--accent); }
.stats .eyebrow::before { background: var(--accent); }
.stats-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 1px; background: rgba(255,255,255,0.1);
  border-top: 1px solid rgba(255,255,255,0.1);
  border-bottom: 1px solid rgba(255,255,255,0.1);
}
@media (max-width: 780px){ .stats-grid { grid-template-columns: repeat(2, 1fr); } }
.stat {
  background: var(--bg-dark); padding: 2.5rem 1.5rem 2.5rem 1.5rem;
  min-width: 0; /* let the grid track shrink — without this the .num's reserved min-width can overflow the viewport on mobile */
}
.stat:first-child { padding-left: 0; }
.stat:last-child  { padding-right: 0; }
.stat .num {
  font-size: clamp(3.5rem, 7vw, 5.5rem); font-weight: 800;
  color: var(--accent); letter-spacing: -0.04em; line-height: 1;
  font-variant-numeric: tabular-nums;
  margin-bottom: 0.75rem;
  display: inline-block; /* allow min-width to take effect for the counter reserve */
}
.stat .lbl {
  font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.16em;
  color: rgba(255,255,255,0.6); font-weight: 500;
}
/* On phones the 5-char stats (6000+, 3000+) overflowed the cell padding.
   Tighten side padding and drop the font ceiling so the digits fit cleanly. */
@media (max-width: 600px) {
  .stat { padding: 2rem 0.5rem; }
  .stat:first-child { padding-left: 0; }
  .stat:last-child  { padding-right: 0; }
  .stat .num { font-size: clamp(2.4rem, 9vw, 3.4rem); }
}

/* ============ WHAT WE DO ============
   Top/bottom padding is driven by the block's spaceAbove / spaceBelow so
   editors can tune vertical rhythm. No spacing class = zero padding on that
   edge, letting blocks stack tightly when needed. */
.what { padding: 0; background: var(--bg); }
.what.-above-spaceSmall   { padding-top: 3rem; }
.what.-above-spaceMedium  { padding-top: 5rem; }
.what.-above-spaceLarge   { padding-top: 7rem; }
.what.-above-spaceXLarge  { padding-top: 10rem; }
.what.-below-spaceSmall   { padding-bottom: 3rem; }
.what.-below-spaceMedium  { padding-bottom: 5rem; }
.what.-below-spaceLarge   { padding-bottom: 7rem; }
.what.-below-spaceXLarge  { padding-bottom: 10rem; }
body[data-surface="dark"] .what { background: var(--bg-dark); color: #fff; }
body[data-surface="dark"] .section-head h2 em { color: var(--accent); }
body[data-surface="dark"] .section-head p { color: rgba(255,255,255,0.75); }

.feature-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem;
}
/* Adaptive columns — one, two or three cards fill the row cleanly. */
.feature-grid.-cols-1 { grid-template-columns: minmax(0, 720px); justify-content: center; }
.feature-grid.-cols-2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 900px){ .feature-grid, .feature-grid.-cols-1, .feature-grid.-cols-2 { grid-template-columns: 1fr; } }

/* When the features block has no section head, drop the fallback head
   element entirely — the block's spaceAbove class now controls top padding. */
.what.-no-head .section-head { display: none; }

.feature {
  background: #fff;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid var(--rule);
  transition: transform .4s cubic-bezier(.2,.8,.2,1), box-shadow .4s;
}
.feature:hover { transform: translateY(-6px); box-shadow: 0 30px 60px -30px rgba(20,26,29,0.25); }
body[data-surface="dark"] .feature { background: #2a3236; border-color: rgba(255,255,255,0.08); color: #fff; }

.feature-media { position: relative; aspect-ratio: 4/3; overflow: hidden; }
.feature-media img {
  width: 100%; height: 100%; object-fit: cover;
  filter: contrast(1.05) saturate(1.02);
  transition: transform .8s, filter .5s;
}
.feature:hover .feature-media img { transform: scale(1.06); filter: contrast(1.08) saturate(1.08); }
.feature-media .tag {
  position: absolute; top: 1rem; left: 1rem;
  font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.16em;
  padding: 0.4rem 0.75rem; border-radius: 999px;
  background: rgba(20,26,29,0.85); color: #fff; backdrop-filter: blur(10px);
  font-weight: 600;
}

.feature-body { padding: 2rem 1.75rem 2rem; }
.feature-icon {
  width: 48px; height: 48px; border-radius: 12px;
  background: color-mix(in oklab, var(--accent) 15%, transparent);
  color: var(--accent-deep);
  display: grid; place-items: center;
  margin-bottom: 1.5rem;
}
body[data-surface="dark"] .feature-icon { background: rgba(0,255,163,0.12); color: var(--accent); }
.feature-icon svg { width: 26px; height: 26px; }
.feature h3 {
  font-size: 1.5rem; font-weight: 700; letter-spacing: -0.02em;
  margin: 0 0 0.75rem;
}
.feature p {
  font-size: 1rem; line-height: 1.55; color: #4a5258; font-weight: 300;
  margin: 0 0 1.5rem;
}
body[data-surface="dark"] .feature p { color: rgba(255,255,255,0.7); }
.feature-link {
  display: inline-flex; align-items: center; gap: 0.35rem;
  font-size: 0.88rem; font-weight: 600;
  color: var(--accent-deep);
  transition: gap .25s;
}
body[data-surface="dark"] .feature-link { color: var(--accent); }
.feature:hover .feature-link { gap: 0.6rem; }

/* ============ SPLIT (membership) ============ */
.split {
  display: grid; grid-template-columns: 1fr 1fr; min-height: 80vh;
  background: var(--bg);
}
body[data-surface="dark"] .split { background: var(--bg-dark); color: #fff; }
@media (max-width: 900px){ .split { grid-template-columns: 1fr; } }
/* No image supplied: collapse to a single, centred, readable column
   instead of leaving the empty media half blank. */
.split.-no-media { grid-template-columns: 1fr; min-height: 0; }
.split.-no-media .split-copy {
  max-width: 880px; margin: 0 auto; width: 100%;
  padding: 6rem 2rem;
}
@media (max-width: 900px){ .split.-no-media .split-copy { padding: 4rem 2rem; } }
/* Space above/below controls. For the no-image layout the vertical padding
   IS the section spacing, so the editor's choice overrides the 6rem default. */
.split.-no-media.-above-spaceNone .split-copy   { padding-top: 0; }
.split.-no-media.-above-spaceSmall .split-copy  { padding-top: 2rem; }
.split.-no-media.-above-spaceMedium .split-copy { padding-top: 4rem; }
.split.-no-media.-above-spaceLarge .split-copy  { padding-top: 8rem; }
.split.-no-media.-above-spaceXLarge .split-copy { padding-top: 10rem; }
.split.-no-media.-below-spaceNone .split-copy   { padding-bottom: 0; }
.split.-no-media.-below-spaceSmall .split-copy  { padding-bottom: 2rem; }
.split.-no-media.-below-spaceMedium .split-copy { padding-bottom: 4rem; }
.split.-no-media.-below-spaceLarge .split-copy  { padding-bottom: 8rem; }
.split.-no-media.-below-spaceXLarge .split-copy { padding-bottom: 10rem; }

.split-media { position: relative; overflow: hidden; }
.split-media img {
  position: absolute; inset: -5%;
  width: 110%; height: 110%; object-fit: cover;
  filter: contrast(1.05) saturate(1.05);
  will-change: transform;
}
.split-badge {
  position: absolute; bottom: 2rem; right: 2rem; z-index: 2;
  background: rgba(20,26,29,0.85); backdrop-filter: blur(18px);
  color: #fff; border-radius: 18px; padding: 1.5rem 1.75rem;
  min-width: 280px;
  border: 1px solid rgba(255,255,255,0.1);
}
.split-badge-head {
  font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.18em;
  color: var(--accent); margin-bottom: 1rem;
}
.split-badge-body .row {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 0.6rem 0;
  border-top: 1px solid rgba(255,255,255,0.1);
  font-size: 0.9rem;
}
.split-badge-body .row:first-child { border-top: none; }
.split-badge-body b { font-weight: 700; color: var(--accent); }

.split-copy {
  display: flex; flex-direction: column; justify-content: center;
  padding: 6rem 4rem;
}
@media (max-width: 900px){ .split-copy { padding: 4rem 2rem; } }
.split-copy h2 {
  font-size: clamp(2.2rem, 4.5vw, 3.75rem); font-weight: 700;
  letter-spacing: -0.035em; line-height: 1.02; margin: 0 0 1.5rem;
}
.split-copy h2 em { font-style: normal; color: var(--accent-deep); }
body[data-surface="dark"] .split-copy h2 em { color: var(--accent); }
.split-copy > p {
  font-size: 1.15rem; line-height: 1.55; color: #4a5258; font-weight: 300;
  margin: 0 0 1.75rem; max-width: 50ch;
}
body[data-surface="dark"] .split-copy > p { color: rgba(255,255,255,0.75); }

.tick-list { list-style: none; padding: 0; margin: 0 0 2.5rem; }
.tick-list li {
  padding: 0.75rem 0 0.75rem 2rem;
  border-top: 1px solid var(--rule);
  position: relative;
  font-size: 1rem; font-weight: 400;
}
body[data-surface="dark"] .tick-list li { border-color: rgba(255,255,255,0.1); }
.tick-list li:last-child { border-bottom: 1px solid var(--rule); }
body[data-surface="dark"] .tick-list li:last-child { border-bottom-color: rgba(255,255,255,0.1); }
.tick-list li::before {
  content: ''; position: absolute; left: 0; top: 50%;
  width: 14px; height: 8px;
  border-left: 2px solid var(--accent-deep);
  border-bottom: 2px solid var(--accent-deep);
  transform: translateY(-75%) rotate(-45deg);
}
body[data-surface="dark"] .tick-list li::before { border-color: var(--accent); }
.split-actions { display: flex; gap: 1rem; flex-wrap: wrap; }

/* ============ CALLOUT ============ */
.callout {
  position: relative; padding: 5rem 0; overflow: hidden;
  color: #fff; text-align: center;
}
.callout-bg {
  position: absolute; inset: -10%;
  width: 120%; height: 120%; object-fit: cover;
  filter: contrast(1.05) brightness(0.6) saturate(1.05);
  will-change: transform;
}
.callout-veil {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(20,26,29,0.8), rgba(20,26,29,0.85));
}
.callout-inner { position: relative; z-index: 1; max-width: 900px; margin: 0 auto; padding: 0 2rem; }
.callout h2 {
  font-size: clamp(2.5rem, 6vw, 5rem); font-weight: 700;
  letter-spacing: -0.04em; line-height: 1.02; margin: 0 0 1.5rem;
}
.callout h2 em { font-style: normal; color: var(--accent); }
.callout .h-line { display: block; }
.callout p {
  font-size: 1.2rem; line-height: 1.55; font-weight: 300;
  color: rgba(255,255,255,0.82); max-width: 60ch;
  margin: 0 auto 2.5rem;
}

/* ============ PROGRAMMES ============ */
.programmes { padding: 8rem 0; background: var(--bg); }
body[data-surface="dark"] .programmes { background: var(--bg-dark); color: #fff; }

.prog-list {
  border-top: 1px solid var(--rule);
}
body[data-surface="dark"] .prog-list { border-color: rgba(255,255,255,0.1); }

.prog-item {
  display: grid; grid-template-columns: 120px 1fr 2fr 180px;
  align-items: baseline;
  padding: 2.5rem 0;
  border-bottom: 1px solid var(--rule);
  gap: 2rem;
  transition: padding-left .35s, color .25s;
  cursor: default;
}
body[data-surface="dark"] .prog-item { border-color: rgba(255,255,255,0.1); }
.prog-item:hover { padding-left: 1rem; }
.prog-item:hover .prog-title { color: var(--accent-deep); }
body[data-surface="dark"] .prog-item:hover .prog-title { color: var(--accent); }

.prog-num {
  font-size: 0.85rem; font-weight: 600; color: var(--accent-deep);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
}
body[data-surface="dark"] .prog-num { color: var(--accent); }
.prog-title { font-size: 1.6rem; font-weight: 700; letter-spacing: -0.02em; transition: color .25s; }
.prog-desc { font-size: 1rem; line-height: 1.55; color: #4a5258; font-weight: 300; }
body[data-surface="dark"] .prog-desc { color: rgba(255,255,255,0.7); }
.prog-meta {
  font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.12em;
  color: #707070; text-align: right;
  font-weight: 500;
}
body[data-surface="dark"] .prog-meta { color: rgba(255,255,255,0.5); }

@media (max-width: 900px){
  .prog-item { grid-template-columns: 1fr; gap: 0.5rem; padding: 2rem 0; }
  .prog-meta { text-align: left; }
}

/* ============ PARTNERS (standalone section) ============ */
.partners-section {
  padding: 5rem 0 6rem;
  background: var(--colorOffWhite);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
body[data-surface="dark"] .partners-section {
  background: var(--bg-dark);
  border-color: rgba(255,255,255,0.06);
}
.partners-section .partners { margin-top: 0; }

.partners { margin-top: 5rem; }
.partners-head {
  font-size: 1.05rem; text-transform: uppercase; letter-spacing: 0.16em;
  color: #707070; margin-bottom: 1.75rem; font-weight: 600;
  text-align: center;
}
body[data-surface="dark"] .partners-head { color: rgba(255,255,255,0.55); }

.logo-grid {
  display: block;
  text-align: justify;
  /* Full rows justify edge-to-edge; the final (partial) row groups to the
     left instead of spreading its few logos to opposite edges. */
  text-align-last: left;
  line-height: 0;
  font-size: 0;
}
.logo-grid img {
  display: inline-block;
  vertical-align: middle;
  width: auto; height: auto;
  max-height: 70px; max-width: 150px;
  object-fit: contain;
  opacity: 0.92;
  margin-bottom: 12px;
  transition: opacity 0.25s ease, transform 0.25s ease;
}
body[data-surface="dark"] .logo-grid img {
  background: #fff;
  border-radius: 4px;
  opacity: 1;
}
.logo-grid img:hover { opacity: 1; transform: scale(1.05); }

@media (max-width: 720px) {
  /* Justified text breaks down on narrow screens (1-2 items per row balloon
     with huge gaps). Switch to centered flex with tighter sizing. */
  .logo-grid {
    display: flex; flex-wrap: wrap;
    justify-content: center; align-items: center;
    gap: 12px;
    text-align: initial;
    text-align-last: initial;
    line-height: normal;
    font-size: initial;
  }
  .logo-grid::after { display: none; }
  .logo-grid img { max-height: 40px; max-width: 84px; margin-bottom: 0; }
  .logo-track img { height: 72px; max-width: 180px; }
  .logo-track { gap: 2rem; padding-right: 2rem; }
}

/* ============ REVIEWS ============
   Padding driven by block spaceAbove / spaceBelow, like o_listFeatures. */
.reviews { padding: 0; background: #f4f2ef; }
.reviews.-above-spaceSmall   { padding-top: 3rem; }
.reviews.-above-spaceMedium  { padding-top: 5rem; }
.reviews.-above-spaceLarge   { padding-top: 7rem; }
.reviews.-above-spaceXLarge  { padding-top: 10rem; }
.reviews.-below-spaceSmall   { padding-bottom: 3rem; }
.reviews.-below-spaceMedium  { padding-bottom: 5rem; }
.reviews.-below-spaceLarge   { padding-bottom: 7rem; }
.reviews.-below-spaceXLarge  { padding-bottom: 10rem; }
body[data-surface="dark"] .reviews { background: #1a2024; color: #fff; }
body[data-surface="light"] .reviews { background: var(--colorOffWhite); }

/* Single-row slider variant — arrows live in the section head */
.reviews--slider .reviews-head {
  display: grid; grid-template-columns: 1fr auto; align-items: end;
  max-width: none; gap: 2rem;
}
/* Cap the heading column so the design's natural line breaks hold.
   Flex column keeps the eyebrow, title and rating stacked even when no
   title is set (otherwise the inline eyebrow + rating share a line). */
.reviews--slider .reviews-head > div:first-child {
  max-width: 780px; display: flex; flex-direction: column; align-items: flex-start;
}
.reviews--slider .reviews-head h2 { text-wrap: balance; }
.reviews-arrows { display: flex; gap: 0.75rem; }
.reviews-arrows .splide__arrow {
  position: static; transform: none; opacity: 1;
  width: 52px; height: 52px; border-radius: 50%;
  border: 1.5px solid var(--ink);
  background: transparent; color: var(--ink);
  display: grid; place-items: center;
  cursor: pointer;
  transition: background .2s, color .2s, transform .2s, border-color .2s;
}
body[data-surface="dark"] .reviews-arrows .splide__arrow {
  border-color: rgba(255,255,255,0.35); color: #fff;
}
.reviews-arrows .splide__arrow:hover {
  background: var(--accent); color: #0a1510; border-color: var(--accent);
  transform: translateY(-2px);
}
.reviews-arrows .splide__arrow svg { width: 18px; height: 18px; }
.reviews-arrows .splide__arrow:disabled {
  opacity: 0.35; cursor: not-allowed; transform: none;
}
.reviews-splide .splide__slide { height: auto; }
.reviews-splide .review { height: 100%; }
.reviews-rating,
a.reviews-rating,
a.reviews-rating:visited,
a.reviews-rating:hover,
a.reviews-rating:focus {
  display: inline-flex; align-items: center; gap: 0.625rem;
  margin-top: 1rem;
  padding: 0.5rem 0.875rem;
  background: rgba(20,26,29,0.05);
  border: 1px solid var(--rule);
  border-radius: 999px;
  font-size: 0.95rem;
  text-decoration: none;
  color: inherit;
  transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}
a.reviews-rating:hover { transform: translateY(-1px); border-color: currentColor; }
body[data-surface="dark"] .reviews-rating {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.12);
}
.reviews-rating .reviews-stars { color: #FBBC05; display: inline-flex; gap: 1px; }
.reviews-rating .reviews-rating-text b { font-weight: 700; margin-right: 0.25rem; }
@media (max-width: 700px){
  .reviews--slider .reviews-head { grid-template-columns: 1fr; }
  .reviews-arrows { justify-self: start; }
}

.reviews-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem;
}
@media (max-width: 1100px){ .reviews-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 700px){ .reviews-grid { grid-template-columns: 1fr; } }

/* ============ STORIES LIST ============ */
.stories {
  padding: 4rem 0;
  background: var(--colorOffWhite);
}
body[data-surface="dark"] .stories { background: var(--bg-dark); color: #fff; }

.stories-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 2rem 1.75rem;
}

.story-card {
  display: flex; flex-direction: column;
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: 16px;
  overflow: hidden;
  transition: transform 0.4s cubic-bezier(.2,.8,.2,1), box-shadow 0.4s, border-color 0.3s;
}
body[data-surface="dark"] .story-card {
  background: rgba(255,255,255,0.03);
  border-color: rgba(255,255,255,0.08);
}
.story-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 30px 60px -30px rgba(20,26,29,0.25);
  border-color: color-mix(in oklab, var(--accent) 40%, var(--rule));
}
body[data-surface="dark"] .story-card:hover {
  box-shadow: 0 30px 60px -30px rgba(0,0,0,0.6);
  border-color: rgba(0,255,163,0.3);
}

.story-media {
  position: relative; display: block;
  aspect-ratio: 16/10;
  overflow: hidden;
  background: var(--bg-dark);
}
.story-media img {
  width: 100%; height: 100%; object-fit: cover;
  filter: contrast(1.05) saturate(1.02);
  transition: transform 0.7s cubic-bezier(.2,.8,.2,1);
}
.story-card:hover .story-media img { transform: scale(1.05); }

.story-tag {
  position: absolute; top: 1rem; left: 1rem;
  font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.16em; font-weight: 600;
  padding: 0.4rem 0.75rem; border-radius: 999px;
  background: rgba(20,26,29,0.85); color: #fff;
  backdrop-filter: blur(10px);
}

.story-body {
  padding: 1.5rem 1.75rem 1.75rem;
  display: flex; flex-direction: column; gap: 0.75rem;
  flex: 1;
}
.story-meta {
  font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.15em;
  color: var(--accent-deep); font-weight: 600;
}
body[data-surface="dark"] .story-meta { color: var(--accent); }
.story-title {
  margin: 0;
  font-size: clamp(1.2rem, 1.5vw, 1.4rem); line-height: 1.25;
  font-weight: 700; letter-spacing: -0.015em;
}
.story-title a { color: var(--ink); }
body[data-surface="dark"] .story-title a { color: #fff; }
.story-title a:hover { color: var(--accent); }
.story-summary {
  font-size: 0.95rem; line-height: 1.55;
  color: #4a5258;
}
body[data-surface="dark"] .story-summary { color: rgba(255,255,255,0.72); }
.story-summary p { margin: 0; font-weight: 300; }
.story-readmore {
  margin-top: auto;
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-weight: 600; font-size: 0.9rem;
  color: var(--accent-deep);
}
body[data-surface="dark"] .story-readmore { color: var(--accent); }
.story-readmore svg { width: 16px; height: 16px; transition: transform 0.3s; }
.story-card:hover .story-readmore svg { transform: translateX(4px); }

@media (max-width: 700px) {
  .stories { padding: 3rem 0 5rem; }
  .stories-grid { gap: 1.5rem; }
  .story-body { padding: 1.25rem 1.25rem 1.5rem; }
}

/* ============ FALLBACK PAGE HEADERS ============ */
/* Story posts without a hero block, plus the sitemap/small-print pages, need an
   explicit <h1>. These rules style those fallbacks consistently. */
.story-hero {
  background: var(--bg-dark);
  color: #fff;
  padding: 7rem 0 4rem;
}
.story-hero .eyebrow {
  color: rgba(255,255,255,0.55);
  margin-bottom: 1rem;
}
.story-hero h1 {
  font-size: clamp(2rem, 4.5vw, 3.4rem);
  line-height: 1.05; letter-spacing: -0.02em;
  font-weight: 700;
  margin: 0;
  max-width: 22ch;
}
.page-title {
  font-size: clamp(1.8rem, 3.5vw, 2.6rem);
  line-height: 1.1; letter-spacing: -0.02em;
  font-weight: 700;
  margin: 3rem 0 1.5rem;
}

/* ============ TOUCH-TARGET PADDING (mobile) ============ */
/* Lift inline text-link patterns to >=32px tall on mobile so they meet the
   iOS/Android tap-target guideline. Doesn't change visual rhythm at desktop sizes. */
@media (max-width: 700px) {
  .feature-link,
  .story-readmore,
  .foot-col a,
  a[href^="mailto:"],
  a[href^="tel:"],
  .ro-hero-crumb a,
  .ro-consent a,
  .o_humanSitemap a.a_navItem,
  .m_navListSitemap a.a_navItem {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
  }
  .o_humanSitemap a.a_navItem,
  .m_navListSitemap a.a_navItem {
    display: block;
  }
}

/* ============ WORD-PASTED RICH TEXT RESET ============ */
/* Legal/small-print pages were ingested from Word with formatting retained — every
   <p> picked up class="MsoNormal" with fixed widths/margins that blow out mobile.
   These rules cap them to the container regardless of inline styles. */
[class*="Mso"] {
  max-width: 100% !important;
  width: auto !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}
[class*="Mso"] * {
  max-width: 100% !important;
}
/* Word tables: force responsive cell wrapping. */
table.MsoNormalTable,
table[class*="Mso"] {
  width: 100% !important;
  max-width: 100% !important;
  table-layout: auto !important;
  word-break: break-word;
}
table[class*="Mso"] td,
table[class*="Mso"] th {
  width: auto !important;
  max-width: 100% !important;
  word-break: break-word;
}
/* And the smallPrint section's container is the wrapper that should clip any
   lingering bleed from inline-style attributes Word sometimes adds. */
.o_smallPrintSectionList { overflow-x: hidden; }

/* ============ FAQ ============ */
.faq { padding: 4rem 0; background: var(--colorOffWhite); }
body[data-surface="dark"] .faq { background: var(--bg-dark); color: #fff; }

.faq-grid {
  margin-top: 3rem;
  border-top: 1px solid var(--rule);
}
body[data-surface="dark"] .faq-grid { border-color: rgba(255,255,255,0.1); }

.faq-item {
  border-bottom: 1px solid var(--rule);
}
body[data-surface="dark"] .faq-item { border-color: rgba(255,255,255,0.1); }

.faq-item > summary {
  list-style: none;
  display: flex; align-items: center; justify-content: space-between; gap: 2rem;
  padding: 1.75rem 0;
  cursor: pointer;
  font-family: var(--fontHeading);
  font-size: clamp(1.25rem, 2.2vw, 1.65rem);
  font-weight: 600;
  line-height: 1.3;
  color: var(--ink);
  transition: color .25s;
}
body[data-surface="dark"] .faq-item > summary { color: #fff; }
.faq-item > summary::-webkit-details-marker { display: none; }
.faq-item > summary::marker { content: ""; }
.faq-item > summary:hover { color: var(--accent); }

.faq-q { flex: 1; }

.faq-icon {
  flex-shrink: 0;
  width: 36px; height: 36px; border-radius: 50%;
  border: 1px solid currentColor;
  position: relative; opacity: 0.55;
  transition: all .3s cubic-bezier(.2,.8,.2,1);
}
.faq-icon::before, .faq-icon::after {
  content: ""; position: absolute;
  background: currentColor;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
}
.faq-icon::before { width: 12px; height: 1.5px; }
.faq-icon::after { width: 1.5px; height: 12px; transition: transform .3s; }
.faq-item[open] > summary .faq-icon { opacity: 1; background: var(--accent); border-color: var(--accent); color: var(--bg-dark); }
.faq-item[open] > summary .faq-icon::after { transform: translate(-50%, -50%) scaleY(0); }

.faq-a {
  padding: 0 0 1.75rem;
  max-width: 72ch;
  font-size: 1rem; line-height: 1.65; font-weight: 300;
  color: var(--ink);
  opacity: 0.82;
}
body[data-surface="dark"] .faq-a { color: rgba(255,255,255,0.75); }
.faq-a p { font-weight: 300; }
.faq-a p:first-child { margin-top: 0; }
.faq-a p:last-child { margin-bottom: 0; }

.review {
  background: #fff; border-radius: 20px; padding: 2.5rem 2rem;
  margin: 0; position: relative;
  border: 1px solid var(--rule);
}
body[data-surface="dark"] .review { background: #222a2e; border-color: rgba(255,255,255,0.08); color: #fff; }

.review .qmark {
  font-size: 5rem; line-height: 0.6; font-family: var(--fontHeading);
  color: var(--accent); font-weight: 800;
  margin-bottom: 0.5rem; display: block;
}
.review-stars { display: flex; gap: 3px; color: #ffc72c; margin-bottom: 1rem; }
.review p {
  font-size: 1.1rem; line-height: 1.5; font-weight: 300; font-style: normal;
  margin: 0 0 1.5rem;
  color: var(--ink);
}
body[data-surface="dark"] .review p { color: rgba(255,255,255,0.88); }
/* Cap each review so one long testimonial can't stretch the whole row. */
.review-body { position: relative; max-height: 16rem; overflow: hidden; }
.review-body.is-clamped::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 4rem;
  background: linear-gradient(rgba(255,255,255,0), #fff); pointer-events: none;
}
body[data-surface="dark"] .review-body.is-clamped::after {
  background: linear-gradient(rgba(34,42,46,0), #222a2e);
}
.review-more {
  appearance: none; background: none; border: 0; cursor: pointer; padding: 0;
  margin: 0 0 1.25rem; font: inherit; font-size: 0.92rem; font-weight: 600;
  color: var(--accent-deep); text-decoration: underline; text-underline-offset: 3px;
}
body[data-surface="dark"] .review-more { color: var(--accent); }
.review-more:hover { opacity: 0.8; }
/* Full-review modal */
.review-modal {
  position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center;
  justify-content: center; padding: 1.5rem; background: rgba(10,14,16,0.6);
}
.review-modal[hidden] { display: none; }
.review-modal-card {
  position: relative; background: #fff; color: var(--ink); border-radius: 20px;
  padding: 3rem 2.5rem 2.5rem; max-width: 640px; width: 100%;
  max-height: 85vh; overflow-y: auto; box-shadow: 0 30px 80px rgba(0,0,0,0.35);
}
.review-modal-card .qmark {
  font-size: 5rem; line-height: 0.6; font-family: var(--fontHeading);
  color: var(--accent); font-weight: 800; margin-bottom: 0.5rem; display: block;
}
.review-modal-stars { display: flex; gap: 3px; color: #ffc72c; margin-bottom: 1rem; }
.review-modal-body p { font-size: 1.1rem; line-height: 1.55; font-weight: 300; margin: 0 0 1rem; }
.review-modal-author { font-size: 0.92rem; color: #707070; padding-top: 1rem; border-top: 1px solid var(--rule); }
.review-modal-author b { color: var(--ink); font-weight: 600; margin-right: 0.25rem; }
.review-modal-close {
  position: absolute; top: 1rem; right: 1rem; appearance: none; background: none;
  border: 0; cursor: pointer; color: #707070; padding: 0.25rem; line-height: 0;
}
.review-modal-close:hover { color: var(--ink); }
.review footer {
  font-size: 0.88rem; font-weight: 400; color: #707070;
  padding-top: 1rem; border-top: 1px solid var(--rule);
}
body[data-surface="dark"] .review footer { color: rgba(255,255,255,0.55); border-color: rgba(255,255,255,0.1); }
.review footer b { color: var(--ink); font-weight: 600; margin-right: 0.25rem; }
body[data-surface="dark"] .review footer b { color: #fff; }

/* ============ FINAL CTA ============ */
.finalcta { padding: 6rem 0 8rem; background: var(--bg); }
body[data-surface="dark"] .finalcta { background: var(--bg-dark); }

.finalcta-card {
  background: var(--bg-dark); color: #fff;
  border-radius: 28px; overflow: hidden;
  display: grid; grid-template-columns: 1.2fr 1fr;
  box-shadow: 0 40px 80px -40px rgba(20,26,29,0.35);
  position: relative;
}
/* Accent wash sits on the form panel itself so it always matches the form's
   size and position, not a fixed percentage of the card width. */
.finalcta-form::before {
  content:''; position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(0,255,163,0.08), transparent 60%);
  pointer-events: none;
}
@media (max-width: 900px){ .finalcta-card { grid-template-columns: 1fr; } }

.finalcta-copy { padding: 4rem 3.5rem; position: relative; z-index: 1; }
.finalcta-copy h2 {
  font-size: clamp(2rem, 4vw, 3.25rem); font-weight: 700;
  letter-spacing: -0.035em; line-height: 1.02; margin: 0 0 1.25rem;
}
.finalcta-copy h2 em { font-style: normal; color: var(--accent); }
.finalcta-copy > p {
  font-size: 1.1rem; line-height: 1.5; font-weight: 300;
  color: rgba(255,255,255,0.7); margin: 0 0 2.5rem; max-width: 40ch;
}
.contact-row {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem;
  padding-top: 2rem; border-top: 1px solid rgba(255,255,255,0.1);
}
@media (max-width: 600px){ .contact-row { grid-template-columns: 1fr; } }
.contact-row .k {
  font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.16em;
  color: rgba(255,255,255,0.5); margin-bottom: 0.5rem;
}
.contact-row .v { font-size: 0.95rem; font-weight: 500; line-height: 1.4; }

.finalcta-form {
  padding: 4rem 3.5rem;
  background: rgba(255,255,255,0.04);
  border-left: 1px solid rgba(255,255,255,0.08);
  display: flex; flex-direction: column; gap: 1.75rem;
  position: relative; z-index: 1;
}
/* Umbraco's BeginUmbracoForm wraps the fields in a <form> element — apply
   the same flex-column gap there so labels stack with proper spacing. */
.finalcta-form > form {
  display: flex; flex-direction: column; gap: 1.75rem;
}
@media (max-width: 900px){ .finalcta-form { border-left: none; border-top: 1px solid rgba(255,255,255,0.08); } }
.finalcta-form label {
  display: flex; flex-direction: column; gap: 0;
  font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.14em;
  color: rgba(255,255,255,0.55); font-weight: 600;
  line-height: 1;
}
.finalcta-form input,
.finalcta-form select,
.finalcta-form textarea {
  font-family: inherit; font-size: 1rem; font-weight: 400;
  padding: 0.85rem 0; color: #fff;
  background: transparent; border: none;
  border-bottom: 1px solid rgba(255,255,255,0.2);
  outline: none; text-transform: none; letter-spacing: normal;
  transition: border-color .2s;
  resize: vertical;
}
.finalcta-form textarea { min-height: 5.5rem; }
.finalcta-form input::placeholder,
.finalcta-form textarea::placeholder { color: rgba(255,255,255,0.35); }
.finalcta-form input:focus,
.finalcta-form select:focus,
.finalcta-form textarea:focus { border-bottom-color: var(--accent); }
.finalcta-form option { background: var(--bg-dark); color: #fff; }
.finalcta-form button { margin-top: 0.75rem; align-self: flex-start; }
.finalcta-form .sent {
  display: none; font-size: 0.85rem; color: var(--accent);
  text-transform: none; letter-spacing: normal; font-weight: 400;
}
.finalcta-form .sent.show { display: block; }

/* ============ FOOTER ============ */
.site-foot { background: var(--bg-dark); color: rgba(255,255,255,0.7); }
.foot-top {
  display: grid; grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 3rem; padding: 5rem 2rem 4rem;
  max-width: var(--container); margin: 0 auto;
}
@media (max-width: 900px){ .foot-top { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px){ .foot-top { grid-template-columns: 1fr; } }

.foot-mark .foot-logo {
  width: 150px; height: auto; margin-bottom: 1.5rem; display: block;
}
.foot-mark p { font-size: 0.95rem; line-height: 1.5; font-weight: 300; max-width: 34ch; }

.foot-col .foot-head {
  font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.16em;
  color: #fff; margin-bottom: 1rem; font-weight: 600;
}
.foot-col a { display: block; padding: 0.4rem 0; font-size: 0.95rem; color: rgba(255,255,255,0.65); transition: color .2s; }
.foot-col a:hover { color: var(--accent); }
.foot-col p { font-size: 0.95rem; line-height: 1.5; font-weight: 300; margin: 0 0 0.5rem; }

.foot-gradient {
  height: 6px;
  background: linear-gradient(to right, var(--colorSecondary), var(--colorPrimary));
}
.foot-bottom {
  display: flex; justify-content: space-between; align-items: center;
  padding: 1.75rem 2rem;
  max-width: var(--container); margin: 0 auto;
  font-size: 0.85rem;
  border-top: 1px solid rgba(255,255,255,0.08);
}
.foot-social { display: flex; gap: 0.5rem; }
.foot-social a {
  width: 36px; height: 36px; border-radius: 50%;
  display: grid; place-items: center;
  border: 1px solid rgba(255,255,255,0.15);
  color: rgba(255,255,255,0.7);
  transition: all .25s;
}
.foot-social a:hover { color: var(--bg-dark); background: var(--accent); border-color: var(--accent); transform: translateY(-2px); }
.foot-social svg { width: 16px; height: 16px; }

/* ============ TILE CARDS (m_singleTile, shared feature-card pattern) ============
   Same card chrome as `.feature` but picks up an optional accent tint so the
   Our Vision row keeps its green/black/mint rhythm. */
.feature-card { background: #fff; }
.feature-card .feature-icon { display: none; }
.feature-card .feature-media { aspect-ratio: 4/5; }
.feature-card.-tintPrimary       { background: var(--colorPrimary); color: var(--colorOffBlack); border-color: transparent; }
.feature-card.-tintPrimary-light { background: var(--colorPrimary-light); color: var(--colorOffBlack); border-color: transparent; }
.feature-card.-tintSecondary     { background: var(--colorSecondary); color: var(--colorOffBlack); border-color: transparent; }
.feature-card.-tintOffBlack      { background: var(--colorOffBlack); color: #fff; border-color: transparent; }
.feature-card.-tintOffBlack h3   { color: #fff; }
.feature-card.-tintOffBlack p    { color: rgba(255,255,255,0.8); }
.feature-card.-tintOffBlack .feature-link { color: var(--accent); }
.feature-card.-tintWhite         { background: #fff; }

/* Square image variant for the tiled-content small tile grid. */
.feature-grid.-square .feature-media { aspect-ratio: 1 / 1; }

/* Large heading variant — per-tile opt-in revives the legacy oversized title. */
.feature-card.-bigHeading h3 {
  font-size: clamp(1.75rem, 2.4vw, 2.25rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin-bottom: 1rem;
}
.feature-card.-tintPrimary:hover       { box-shadow: 0 30px 60px -30px rgba(0,255,163,0.45); }
.feature-card.-tintPrimary-light:hover { box-shadow: 0 30px 60px -30px rgba(128,255,209,0.5); }
.feature-card.-tintOffBlack:hover      { box-shadow: 0 30px 60px -30px rgba(20,26,29,0.45); }

/* Tinted cards look better when the image isn't greyed out. */
.feature-card.-tintPrimary .feature-media img,
.feature-card.-tintPrimary-light .feature-media img,
.feature-card.-tintOffBlack .feature-media img { filter: none; }

/* ============ TILED CONTENT (big horizontal role cards) ============
   Same card silhouette as the feature-grid but stretched to one-per-row,
   with copy on the left and a full-bleed media panel on the right. Tints
   mirror m_singleTile so the `backgroundColour` picker still drives the
   card's accent. Vertical rhythm from spaceAbove / spaceBelow. */
.tiled-content {
  padding: 0;
  /* Sit above the previous section (typically the hero) whenever the block
     overlaps upward — prevents the card body vanishing behind the hero's
     stacking context while the hover transform only lifted it on one axis. */
  position: relative; z-index: 5;
}
.tiled-content.-above-spaceSmall   { padding-top: 3rem; }
.tiled-content.-above-spaceMedium  { padding-top: 5rem; }
.tiled-content.-above-spaceLarge   { padding-top: 7rem; }
.tiled-content.-above-spaceXLarge  { padding-top: 10rem; }
.tiled-content.-below-spaceSmall   { padding-bottom: 3rem; }
.tiled-content.-below-spaceMedium  { padding-bottom: 5rem; }
.tiled-content.-below-spaceLarge   { padding-bottom: 7rem; }
.tiled-content.-below-spaceXLarge  { padding-bottom: 10rem; }

.tiled-content__inner {
  max-width: var(--container);
  margin: 0 auto; padding: 0 2rem;
}

.tiled-content__card {
  position: relative;
  display: grid; grid-template-columns: 7fr 5fr;
  gap: 0;
  background: #fff; color: var(--ink);
  border-radius: 28px;
  overflow: hidden;
  border: 1px solid var(--rule);
  transition: transform .4s cubic-bezier(.2,.8,.2,1), box-shadow .4s;
}
.tiled-content__card:hover {
  transform: translateY(-6px);
  box-shadow: 0 40px 80px -40px rgba(20,26,29,0.25);
}
@media (max-width: 900px) {
  .tiled-content__card { grid-template-columns: 1fr; }
}

.tiled-content__copy {
  padding: 3.5rem 3rem;
  display: flex; flex-direction: column; justify-content: center;
  gap: 1rem;
}
.tiled-content__copy h3 {
  font-size: clamp(1.75rem, 3vw, 2.25rem);
  font-weight: 700; letter-spacing: -0.025em;
  line-height: 1.1; margin: 0;
}
.tiled-content__body {
  font-size: 1.05rem; line-height: 1.55; font-weight: 300; color: #4a5258;
  max-width: 52ch; margin: 0;
}
.tiled-content__body p { margin: 0 0 1em; }
.tiled-content__body p:last-child { margin-bottom: 0; }
.tiled-content__actions { margin-top: 0.5rem; }

.tiled-content__media { position: relative; min-height: 320px; overflow: hidden; }
.tiled-content__media img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .8s;
}
.tiled-content__card:hover .tiled-content__media img { transform: scale(1.04); }

/* ---- Tints ---------------------------------------------------------- */
.tiled-content__card.-tintPrimary       { background: var(--colorPrimary);       color: var(--colorOffBlack); border-color: transparent; }
.tiled-content__card.-tintPrimary-light { background: var(--colorPrimary-light); color: var(--colorOffBlack); border-color: transparent; }
.tiled-content__card.-tintSecondary     { background: var(--colorSecondary);     color: var(--colorOffBlack); border-color: transparent; }
.tiled-content__card.-tintOffBlack      { background: var(--colorOffBlack);      color: #fff; border-color: transparent; }
.tiled-content__card.-tintOffBlack h3   { color: #fff; }
.tiled-content__card.-tintOffBlack .tiled-content__body { color: rgba(255,255,255,0.78); }
.tiled-content__card.-tintWhite         { background: #fff; }

/* On tinted cards we want the button to read against the tile colour. */
.tiled-content__card.-tintPrimary .a_button,
.tiled-content__card.-tintPrimary-light .a_button,
.tiled-content__card.-tintSecondary .a_button {
  background: var(--colorOffBlack); border-color: var(--colorOffBlack); color: #fff;
}
.tiled-content__card.-tintOffBlack .a_button {
  background: var(--colorPrimary-light); border-color: var(--colorPrimary-light); color: var(--colorOffBlack);
}

/* ============ IMAGE BLOCK (refreshed o_imageSection) ============
   Three widths + an overlap mode that paints the brand mint green border
   when the block pulls itself up into the previous section. */
.image-block { padding: 3rem 0; }
.image-block.-overlap { padding-top: 0; }

.image-block__inner {
  max-width: var(--container);
  margin: 0 auto; padding: 0 2rem;
}
.image-block.-fullWidth .image-block__inner { max-width: none; padding: 0; }
.image-block.-contentWidth .image-block__inner { max-width: 960px; }

.image-block__figure { margin: 0; }
.image-block__figure img {
  width: 100%; height: auto; display: block;
  border-radius: 2rem;
  box-shadow: 0 30px 60px -40px rgba(20,26,29,0.35);
}
.image-block.-fullWidth .image-block__figure img { border-radius: 0; box-shadow: none; }

/* Overlap mode — mint frame that echoes the live who-we-are hero break. */
.image-block.-overlap .image-block__figure img {
  border: 12px solid var(--colorPrimary-light);
  border-radius: 3rem;
  box-shadow: 0 40px 80px -40px rgba(20,26,29,0.4);
}

.image-block__figure figcaption {
  margin-top: 1rem; text-align: center;
  font-size: 0.85rem; color: var(--colorGrey-dark);
  text-transform: uppercase; letter-spacing: 0.14em;
}

/* ============ BLOG / STORY HERO (o_heroBlogPost) ============
   Legible with or without a background image. Dark text on the page
   background by default; white text over a dark veil when an image is set. */
.o_heroBlogPost {
  position: relative;
  padding: 11rem 0 4rem;            /* top clears the fixed header */
  background-size: cover; background-position: center; background-repeat: no-repeat;
}
.o_heroBlogPost > .container { position: relative; z-index: 1; }
.o_heroBlogPost h1 {
  font-size: clamp(2.5rem, 6vw, 5rem); font-weight: 700;
  letter-spacing: -0.035em; line-height: 1.03; margin: 0 auto; max-width: 16ch;
}
.o_heroBlogPost h2 {
  font-size: clamp(1.05rem, 2vw, 1.35rem); font-weight: 300;
  line-height: 1.4; margin: 1.25rem auto 0; max-width: 60ch; opacity: 0.9;
}
.o_heroBlogPost.-noimg { color: var(--ink); }
.o_heroBlogPost.-noimg h1 em { font-style: normal; color: var(--accent-deep); }
.o_heroBlogPost.-hasimg { color: #fff; }
.o_heroBlogPost.-hasimg::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10,14,16,0.45), rgba(10,14,16,0.7));
}
.o_heroBlogPost.-hasimg h1 em { font-style: normal; color: var(--accent); }

/* ============ SECTION-CONTENT (refreshed o_contentSection) ============
   Always uses the design's `.split` layout; empty `.split-media` cell simply
   doesn't paint an image. Body copy (RTE) gets the design's tick list
   treatment on any plain <ul> so editors can build the feature list without
   needing a special field. */
.split-body { font-size: 1.05rem; line-height: 1.55; font-weight: 300; color: #4a5258; margin: 0 0 1.75rem; }
body[data-surface="dark"] .split-body { color: rgba(255,255,255,0.75); }
.split-body p { margin: 0 0 1em; }
/* Links in story body copy. */
.split-body a {
  color: var(--accent-deep); font-weight: 500;
  text-decoration: underline; text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
body[data-surface="dark"] .split-body a { color: var(--accent); }
.split-body a:hover { opacity: 0.8; }
/* Auto external-link icon: any link the editor set to open in a new tab
   gets the box-and-arrow glyph appended — no manual icon needed. */
.split-body a[target="_blank"]::after {
  content: ""; display: inline-block;
  width: 0.72em; height: 0.72em; margin-left: 0.28em;
  vertical-align: -0.02em;
  background-color: currentColor;
  -webkit-mask: var(--icon-external) center / contain no-repeat;
  mask: var(--icon-external) center / contain no-repeat;
}
/* Images dropped into the rich-text body are centred (never left-aligned
   with dead space) and given the same rounded/shadowed treatment as the
   dedicated image blocks. Responsive cap prevents overflow; the editor's
   inserted size is respected so we never upscale and blur a small source. */
.split-body img {
  display: block; max-width: 100%; height: auto;
  margin: 1.75rem auto; border-radius: 1.5rem;
  box-shadow: 0 30px 60px -40px rgba(20,26,29,0.35);
}
.split-body figure { margin: 1.75rem auto; text-align: center; }
.split-body figure img { margin: 0 auto; }
.split-body figcaption {
  margin-top: 0.85rem; font-size: 0.85rem; color: #707070;
  text-transform: uppercase; letter-spacing: 0.12em;
}
.split-body strong { font-weight: 700; color: var(--ink); }
body[data-surface="dark"] .split-body strong { color: #fff; }

/* Turn the RTE's <ul> into the design's tick list automatically. */
.split-body ul { list-style: none; padding: 0; margin: 1.5rem 0 2rem; }
.split-body ul li {
  position: relative;
  padding: 0.75rem 0 0.75rem 2rem;
  border-top: 1px solid var(--rule);
  font-size: 1rem; font-weight: 400; color: var(--ink);
}
body[data-surface="dark"] .split-body ul li { border-color: rgba(255,255,255,0.1); color: #fff; }
.split-body ul li:last-child { border-bottom: 1px solid var(--rule); }
body[data-surface="dark"] .split-body ul li:last-child { border-bottom-color: rgba(255,255,255,0.1); }
.split-body ul li::before {
  content: ''; position: absolute; left: 0; top: 50%;
  width: 14px; height: 8px;
  border-left: 2px solid var(--accent-deep);
  border-bottom: 2px solid var(--accent-deep);
  transform: translateY(-75%) rotate(-45deg);
}
body[data-surface="dark"] .split-body ul li::before { border-color: var(--accent); }

/* Empty split-media shouldn't leave a blank column — when there's no image,
   swap to a single full-width copy column so the section still reads well. */
.split:has(.split-media:empty) { grid-template-columns: 1fr; min-height: 0; }
.split:has(.split-media:empty) .split-media { display: none; }
.split:has(.split-media:empty) .split-copy { max-width: 880px; margin: 0 auto; padding: 6rem 2rem; }

/* ============ CALL TO ACTION (o_callToAction) ============
   Large centred link/heading that bridges sections. */
.o_callToAction {
  padding: 4.5rem 0;
  background: var(--bg-dark); color: #fff;
  text-align: center;
}
body[data-surface="light"] .o_callToAction { background: var(--colorOffWhite); color: var(--ink); }
.o_callToAction .container { max-width: var(--container); margin: 0 auto; padding: 0 2rem; }
.o_callToAction h3 {
  font-size: clamp(1.75rem, 3vw, 2.5rem); font-weight: 700;
  letter-spacing: -0.025em; line-height: 1.2; margin: 0;
  transition: color .25s;
}
.o_callToAction a { display: inline-block; }
.o_callToAction a:hover h3 { color: var(--accent); }

/* ============ CONTENT WITH BACKGROUND ALT (o_contentWithBackgroundAlternative)
   Full-bleed dark section with parallax-ish image, intro copy, CTA, email. */
.o_contentWithBackgroundAlternative {
  position: relative; overflow: hidden;
  padding: 4rem 0;
  background-color: var(--bg-dark); color: #fff;
  background-size: cover; background-position: center;
}
.o_contentWithBackgroundAlternative.-pdTopNone { padding-top: 0; }
.o_contentWithBackgroundAlternative.-pdBtmNone { padding-bottom: 0; }
.o_contentWithBackgroundAlternative.-pdTopSmall { padding-top: 2rem; }
.o_contentWithBackgroundAlternative.-pdBtmSmall { padding-bottom: 2rem; }
.o_contentWithBackgroundAlternative.-above-spaceNone   { padding-top: 0; }
.o_contentWithBackgroundAlternative.-above-spaceSmall  { padding-top: 3rem; }
.o_contentWithBackgroundAlternative.-above-spaceMedium { padding-top: 5rem; }
.o_contentWithBackgroundAlternative.-above-spaceLarge  { padding-top: 7rem; }
.o_contentWithBackgroundAlternative.-above-spaceXLarge { padding-top: 10rem; }
.o_contentWithBackgroundAlternative.-below-spaceNone   { padding-bottom: 0; }
.o_contentWithBackgroundAlternative.-below-spaceSmall  { padding-bottom: 3rem; }
.o_contentWithBackgroundAlternative.-below-spaceMedium { padding-bottom: 5rem; }
.o_contentWithBackgroundAlternative.-below-spaceLarge  { padding-bottom: 7rem; }
.o_contentWithBackgroundAlternative.-below-spaceXLarge { padding-bottom: 10rem; }
.o_contentWithBackgroundAlternative::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(20,26,29,0.55) 0%, rgba(20,26,29,0.85) 100%);
  pointer-events: none;
}
.o_contentWithBackgroundAlternative .container {
  position: relative;
  max-width: var(--container); margin: 0 auto; padding: 0 2rem;
}
.o_contentWithBackgroundAlternative .intro {
  font-size: clamp(1.5rem, 2.5vw, 2.25rem);
  font-weight: 500; letter-spacing: -0.02em;
  line-height: 1.25;
  color: #fff;
  max-width: 36ch;
  margin: 0 0 2rem;
}
.o_contentWithBackgroundAlternative .intro strong { font-weight: 700; }
.o_contentWithBackgroundAlternative .a_button {
  /* inherit the refresh .a_button styles */
}
.o_contentWithBackgroundAlternative .emailLink {
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid rgba(255,255,255,0.15);
}
.o_contentWithBackgroundAlternative .emailLink p {
  font-size: 0.78rem; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.16em;
  color: rgba(255,255,255,0.55);
  margin: 0;
}
.o_contentWithBackgroundAlternative .emailLink a {
  display: block;
  font-size: clamp(1.1rem, 1.6vw, 1.4rem);
  font-weight: 600; color: #fff;
  letter-spacing: -0.01em;
  text-transform: none;
  margin-top: 0.25rem;
}
.o_contentWithBackgroundAlternative .emailLink a:hover { color: var(--accent); }

/* ============ REVEAL ============ */
.reveal {
  opacity: 0; transform: translateY(30px);
  transition: opacity .9s cubic-bezier(.2,.8,.2,1), transform .9s cubic-bezier(.2,.8,.2,1);
}
.reveal.in { opacity: 1; transform: none; }
body[data-motion="off"] .reveal { opacity: 1; transform: none; transition: none; }
body[data-motion="off"] .hero-title .line.underline .underline-ink { text-decoration-color: var(--accent); }

/* ============ TWEAKS PANEL ============ */
.tweaks {
  position: fixed; bottom: 1.5rem; right: 1.5rem; z-index: 1000;
  background: rgba(20,26,29,0.95); color: #fff;
  border-radius: 16px; padding: 0; min-width: 280px;
  border: 1px solid rgba(255,255,255,0.08);
  backdrop-filter: blur(20px);
  box-shadow: 0 20px 60px -20px rgba(0,0,0,0.5);
  font-size: 0.85rem;
}
.tweaks-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 0.9rem 1.1rem;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.tweaks-head b { font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 600; }
.tweaks-close { background: none; border: none; color: rgba(255,255,255,0.6); font-size: 1.3rem; cursor: pointer; line-height: 1; }
.tweaks-body { padding: 0.75rem 1.1rem 1.1rem; display: flex; flex-direction: column; gap: 0.9rem; }
.tweak-row { display: flex; flex-direction: column; gap: 0.4rem; }
.tweak-label { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.14em; color: rgba(255,255,255,0.5); font-weight: 600; }
.tweak-opts { display: flex; gap: 0.35rem; }
.tweak-opts button {
  flex: 1; padding: 0.5rem 0.5rem;
  background: rgba(255,255,255,0.05); color: rgba(255,255,255,0.7);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px;
  font-family: inherit; font-size: 0.78rem; font-weight: 500;
  cursor: pointer; transition: all .2s;
}
.tweak-opts button:hover { background: rgba(255,255,255,0.1); color: #fff; }
.tweak-opts button.on {
  background: var(--accent); color: #0a1510; border-color: var(--accent);
}

/* Error page (404 / 500 / unhandled).
   Dark background extends under the fixed nav so its white text stays visible,
   and min-height fills the viewport so the footer doesn't float in white. */
.v_errorPage { background: #141a1d; color: #fff; }
.v_errorPage .o_errorPage {
  padding: 8rem 0 3rem;
}
.v_errorPage .o_errorPage .container { max-width: 720px; margin: 0 auto; padding: 0 1.5rem; }
.v_errorPage .error-card {
  text-align: center;
  padding: 3rem 2rem;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 1.25rem;
  background: rgba(255,255,255,0.04);
  backdrop-filter: blur(8px);
}
.v_errorPage h1 { margin: 0 0 1rem; font-size: clamp(1.75rem, 3vw, 2.5rem); color: #fff; }
.v_errorPage .error-body { margin: 0 auto 2rem; max-width: 520px; color: rgba(255,255,255,0.7); }
.v_errorPage .error-body p { color: inherit; }
.v_errorPage .error-actions {
  display: flex; gap: 0.75rem; flex-wrap: wrap; justify-content: center;
}
@media (max-width: 480px){
  .v_errorPage .o_errorPage { padding: 6rem 0 4rem; }
}

/* Video modal — opened by hero "View video" button. */
.video-modal {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(10, 14, 16, 0.86);
  backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center;
  padding: 4rem 1rem;
  animation: video-modal-in 0.2s ease-out;
}
.video-modal[hidden] { display: none; }
.video-modal-close {
  position: absolute; top: 1.25rem; right: 1.25rem;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.2);
  color: #fff;
  width: 44px; height: 44px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background 0.2s ease;
}
.video-modal-close:hover { background: rgba(255,255,255,0.22); }
.video-modal-frame {
  width: 100%; max-width: 1100px;
  aspect-ratio: 16 / 9;
  background: #000;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 24px 80px rgba(0,0,0,0.55);
}
.video-modal-iframe-wrap { width: 100%; height: 100%; }
.video-modal-iframe-wrap iframe { width: 100%; height: 100%; border: 0; display: block; }
@keyframes video-modal-in { from { opacity: 0; } to { opacity: 1; } }

/* ============ COOKIEBOT CONSENT BANNER — brand the buttons ============
   Cookiebot renders with fixed element IDs, so we restyle its buttons to the
   site's bright accent green (#00ffa3 — same as the site CTAs). Bright green
   needs DARK text for contrast (white-on-neon is unreadable). Primary (Allow
   all) is filled; secondary (Allow selection / Deny) get a green outline.
   !important is needed to beat Cookiebot's own injected styles. */
#CybotCookiebotDialogBodyLevelButtonLevelOptinAllowAll,
#CybotCookiebotDialogBodyLevelButtonLevelOptinAllowallSelection,
#CybotCookiebotDialogBodyButtonAccept,
#CybotCookiebotDialogBodyButtonAcceptAll,
#CybotCookiebotDialogBodyLevelButtonAccept,
#CybotCookiebotDialogBodyButtonDecline {
  border-radius: 999px !important;
  font-weight: 600 !important;
  transition: background-color .2s ease, color .2s ease !important;
}
/* Primary: filled bright green, dark text (matches the site's .a_button CTA) */
#CybotCookiebotDialogBodyLevelButtonLevelOptinAllowAll,
#CybotCookiebotDialogBodyButtonAccept,
#CybotCookiebotDialogBodyButtonAcceptAll,
#CybotCookiebotDialogBodyLevelButtonAccept {
  background-color: #00ffa3 !important;
  border: 2px solid #00ffa3 !important;
  color: #0a1510 !important;
}
#CybotCookiebotDialogBodyLevelButtonLevelOptinAllowAll:hover,
#CybotCookiebotDialogBodyButtonAccept:hover,
#CybotCookiebotDialogBodyButtonAcceptAll:hover,
#CybotCookiebotDialogBodyLevelButtonAccept:hover {
  background-color: #4dffbf !important;
  border-color: #4dffbf !important;
}
/* Secondary: bright-green outline, dark text (Allow selection / Deny) */
#CybotCookiebotDialogBodyLevelButtonLevelOptinAllowallSelection,
#CybotCookiebotDialogBodyButtonDecline {
  background-color: transparent !important;
  border: 2px solid #00ffa3 !important;
  color: #0a1510 !important;
}
#CybotCookiebotDialogBodyLevelButtonLevelOptinAllowallSelection:hover,
#CybotCookiebotDialogBodyButtonDecline:hover {
  background-color: #00ffa3 !important;
  color: #0a1510 !important;
}
/* Consent toggles: bright accent ONLY for the "on" (checked) state. Off toggles
   keep their default grey — colouring all sliders green made disabled categories
   look enabled, which is misleading. */
#CybotCookiebotDialog input:checked + .CybotCookiebotDialogBodyLevelButtonSlider {
  background-color: #00ffa3 !important;
}
/* Links stay the deeper green for readability on white */
#CybotCookiebotDialog a,
#CybotCookiebotDialogDetailBodyContentTextAbout a { color: #0e9368 !important; }
#CybotCookiebotDialogNav .CybotCookiebotDialogNavItemLink.CybotCookiebotDialogActive,
#CybotCookiebotDialogBodyLevelButtonsTable .CybotCookiebotDialogBodyLevelButtonDescription a {
  border-color: #0e9368 !important; color: #0e9368 !important;
}