/* 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;
}

/* ---------- 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;
}
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: 1.75rem 2rem;
  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: 100vh;
  display: grid; align-items: center;
  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 6rem;
}
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: 700px;
}
.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; } }

/* ============ 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: 5rem 0 6rem;
}
.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 1rem 2.5rem 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;
}
.stat .lbl {
  font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.16em;
  color: rgba(255,255,255,0.6); font-weight: 500;
}

/* ============ 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; } }

.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: 10rem 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: 0.72rem; text-transform: uppercase; letter-spacing: 0.16em;
  color: #707070; margin-bottom: 1.75rem; font-weight: 500;
  text-align: center;
}
body[data-surface="dark"] .partners-head { color: rgba(255,255,255,0.55); }

.logo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 2.5rem 2rem;
  align-items: center;
  justify-items: center;
}
.logo-grid img {
  height: 80px; width: auto; max-width: 100%;
  object-fit: contain;
  opacity: 0.92;
  transition: opacity 0.25s ease, transform 0.25s ease;
}
body[data-surface="dark"] .logo-grid img {
  background: #fff;
  padding: 8px 12px;
  border-radius: 8px;
  opacity: 1;
  box-sizing: content-box;
}
.logo-grid img:hover { opacity: 1; transform: scale(1.05); }

@media (max-width: 720px) {
  .logo-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem 0.75rem;
  }
  .logo-grid img { height: 52px; }
  body[data-surface="dark"] .logo-grid img { padding: 6px 8px; }
  .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. */
.reviews--slider .reviews-head > div:first-child { max-width: 780px; }
.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 {
  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;
}
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 8rem;
  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: 8rem 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 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); }
.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;
}

/* ============ 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; }
.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: 8rem 0 6rem;
  background-color: var(--bg-dark); color: #fff;
  background-size: cover; background-position: center;
}
.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);
}