/* Figma's condensed face is GT America Condensed, which the site doesn't load.
   Roboto Flex (free, variable) is the closest match — same "&", S, g and
   proportions — tuned below to Figma's measured widths. GT America Condensed
   is first in --chvl-cond, so it takes over automatically if it is added. */
@import url('https://fonts.googleapis.com/css2?family=Roboto+Flex:opsz,wdth,wght,XTRA,YTLC@8..144,25..151,100..1000,323..603,416..570&display=swap');

/* ==========================================================================
   CHV — "Let's take care of each other" landing page (/letstakecareofeachother/)
   Figma: 2026 Fall Campaign Landing Page › GEN Z LANDING PAGE - DRAFT
   --------------------------------------------------------------------------
   - Loaded ONLY on the page /letstakecareofeachother/ (see enqueue PHP).
   - Prefix chvl- everywhere. Nothing here uses chvm- classes, so the
     /wetakecareofeachother/ page and its chv-match.css are never affected.
   - Part A: page base (tokens, theme guards, full-width backgrounds).
   - Part B: one self-contained block of CSS per section, in page order.
   ========================================================================== */


/* ==========================================================================
   PART A — PAGE BASE
   ========================================================================== */

/* A1. Design tokens (Figma) */
.chvl {
  --chvl-blue: #0067ff;
  --chvl-blue-dark: #0052cc;
  --chvl-yellow: #ffe653;
  --chvl-cream: #fffadd;              /* #ffe653 at 20% on white */
  --chvl-orange: #fd7b0b;
  --chvl-ink: #000000;
  --chvl-white: #ffffff;
  --chvl-polaroid: #f1f1f1;

  --chvl-serif: 'P22 Mackinac Pro', Georgia, serif;
  --chvl-sans: 'GT America', Helvetica, Arial, sans-serif;
  --chvl-cond: 'GT America Condensed', 'Roboto Flex', 'Arial Narrow', sans-serif;
  --chvl-cond-axes: 'wdth' 62, 'YTLC' 560;   /* Roboto Flex: condensed width, tall x-height like Figma */
  --chvl-cond-ws: -0.1em;                    /* Figma's tighter word spacing */
  --chvl-mono: 'GT America Mono', 'GT America', monospace;
  --chvl-cond-weight: 900;           /* Figma: Condensed Black */

  --chvl-h1: clamp(40px, 30.6px + 2.6vw, 72px);      /* Mackinac Extra Bold 72/74 */
  --chvl-h2: clamp(20px, 17.6px + 0.66vw, 28px);     /* Mackinac Medium 28/36 */
  --chvl-body: clamp(17px, 16.1px + 0.25vw, 20px);   /* GT America 20/30 */

  --chvl-max: 1062px;                 /* Figma content column (x 189 → 1251) */
  --chvl-pad-y: clamp(64px, 10.4vw, 150px);
  --chvl-pad-x: 24px;
  --chvl-bg: var(--chvl-white);

  position: relative;
  isolation: isolate;
  box-sizing: border-box;
}
.chvl *,
.chvl *::before,
.chvl *::after { box-sizing: border-box; }

/* A2. Every section: padding + a full-width background painted behind it.
   The theme keeps content inside its content box; the ::before layer is
   100vw wide so the colour still runs edge to edge. --chvl-sbw (scrollbar
   width) is set by chv-letstake.js. */
.wp-block-group.chvl {
  margin: 0;
  padding: var(--chvl-pad-y) var(--chvl-pad-x);
  background: transparent;
}
.wp-block-group.chvl::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  bottom: 0;
  left: 50%;
  width: calc(100vw - var(--chvl-sbw, 0px));
  transform: translateX(-50%);
  background: var(--chvl-bg);
  pointer-events: none;
}

/* A3. Theme guards — this page only */
html:has(.chvl),
html:has(.chvl) body { overflow-x: clip; }
html:has(.chvl) { scroll-behavior: smooth; }

/* The theme wraps each block in e.g. <div class="container core-group mt-4 mb-4 …">.
   Its spacing utilities are !important, so they need !important to undo —
   limited to wrappers that hold this page's sections. */
[class*="core-"]:has(.chvl) {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
[class*="core-"]:has(> .chvl) {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Neutral start for blocks inside the sections (each section sets its own) */
.chvl .wp-block-group { margin: 0; padding: 0; }
.chvl :where(h1, h2, h3, p, figure) { margin: 0; padding: 0; }
.chvl .wp-block-image { margin: 0; }
/* Theme/Bootstrap give headings and paragraphs their own margins (e.g. .content p).
   Zero them at section strength; each section then sets the exact Figma spacing. */
.chvl .wp-block-heading,
.chvl .wp-block-paragraph { margin-top: 0; margin-bottom: 0; padding: 0; }
.chvl .wp-block-image img { display: block; max-width: none; border: 0; box-shadow: none; border-radius: 0; }
.chvl .wp-block-buttons { margin: 0; gap: 0; }

/* Classic themes wrap the inside of every Group block in
   <div class="wp-block-group__inner-container"> (with the theme's narrow
   max-width). That extra box breaks the grids, so it is removed from the
   layout here — its contents behave as if the wrapper wasn't there. */
.chvl .wp-block-group__inner-container {
  display: contents;
}

/* The theme also wraps EVERY inner block (heading, paragraph, image, buttons,
   custom HTML) in <div class="container core-… p-xs-2 mt-4 mb-4">, which adds
   Bootstrap container widths, padding and !important margins. Removing these
   boxes too lets each section use the exact Figma spacing below. */
.chvl .container[class*="core-"] {
  display: contents;
}

/* Visually hidden, still read by screen readers */
.chvl .chvl-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}


/* ==========================================================================
   PART B — SECTIONS (each block fully styled on its own)
   ========================================================================== */

/* --------------------------------------------------------------------------
   B1. HERO — "You can help a young person experiencing homelessness."
       + rolling images (Figma "carousel b")
   -------------------------------------------------------------------------- */
.wp-block-group.chvl-hero {
  --chvl-bg: var(--chvl-white);
  --chvl-hero-pad: clamp(64px, 7vw, 100px);
  padding: var(--chvl-hero-pad) var(--chvl-pad-x);
}
.chvl-hero .chvl-hero__inner {
  max-width: var(--chvl-max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 611px) 410px;
  justify-content: space-between;
  align-items: center;
  gap: 40px;
}
.chvl-hero .chvl-hero__title {
  font-family: var(--chvl-serif);
  font-weight: 800;
  font-style: normal;
  font-size: var(--chvl-h1);
  line-height: 1.03;
  letter-spacing: 0;
  text-transform: none;
  color: var(--chvl-blue);
  margin: 0 0 40px;
}
.chvl-hero .chvl-hero__text {
  font-family: var(--chvl-sans);
  font-weight: 400;
  font-size: var(--chvl-body);
  line-height: 1.5;
  color: var(--chvl-ink);
  margin: 0 0 20px;
}
.chvl-hero .chvl-hero__text--bold,
.chvl-hero .chvl-hero__text--bold strong { font-weight: 700; margin-bottom: 0; }
.chvl-hero .chvl-hero__btn-row { margin-top: 34px; display: flex; }

/* Rolling gallery — runs from the top to the bottom edge of the section.
   The script repeats the images for a seamless loop and adds .is-looping. */
.chvl-hero .chvl-gallery {
  position: relative;
  align-self: stretch;
  contain: size;                     /* column follows the text height, not the image stack */
  margin: calc(var(--chvl-hero-pad) * -1) 0;
}
.chvl-hero .chvl-gallery__viewport {
  height: 100%;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, transparent 4%, #000 24%, #000 76%, transparent 96%, transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0, transparent 4%, #000 24%, #000 76%, transparent 96%, transparent 100%);
}
.chvl-hero .chvl-gallery__track {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding-bottom: 24px;              /* keeps the loop seamless (gap after the last image) */
}
.chvl-hero .chvl-gallery.is-looping .chvl-gallery__track {
  animation: chvl-roll var(--chvl-loop, 20s) linear infinite;
  will-change: transform;
}
.chvl-hero .chvl-gallery.is-looping:hover .chvl-gallery__track,
.chvl-hero .chvl-gallery.is-paused .chvl-gallery__track { animation-play-state: paused; }
@keyframes chvl-roll {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(0, -50%, 0); }
}
.chvl-hero .chvl-gallery__item {
  flex: 0 0 auto;
  margin: 0;
  aspect-ratio: 410 / 323;
  border-radius: 15px;
  overflow: hidden;
  background: var(--chvl-blue);      /* Figma: blue / yellow / orange behind each photo */
}
.chvl-hero .chvl-gallery__item:nth-child(3n+2),
.chvl-hero .container:nth-child(3n+2) > .chvl-gallery__item { background: var(--chvl-yellow); }
.chvl-hero .chvl-gallery__item:nth-child(3n),
.chvl-hero .container:nth-child(3n) > .chvl-gallery__item   { background: var(--chvl-orange); }
.chvl-hero .chvl-gallery__item { position: relative; }
.chvl-hero .chvl-gallery__item img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Pause / play (moving content must be pausable) */
.chvl-hero .chvl-gallery__toggle {
  position: absolute;
  right: 10px;
  bottom: calc(var(--chvl-hero-pad) * 0.5);
  z-index: 2;
  width: 36px;
  height: 36px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  background: var(--chvl-blue);
  color: var(--chvl-yellow);
  cursor: pointer;
  opacity: 0;
  transition: opacity .2s ease;
}
.chvl-hero .chvl-gallery:hover .chvl-gallery__toggle,
.chvl-hero .chvl-gallery.is-paused .chvl-gallery__toggle,
.chvl-hero .chvl-gallery__toggle:focus-visible { opacity: 1; }
.chvl-hero .chvl-gallery__toggle:focus-visible { outline: 3px solid var(--chvl-ink); outline-offset: 2px; }
.chvl-hero .chvl-gallery__toggle svg { width: 14px; height: 14px; display: block; fill: currentColor; }
.chvl-hero .chvl-gallery__toggle .chvl-icon-play { display: none; }
.chvl-hero .chvl-gallery.is-paused .chvl-icon-play { display: block; }
.chvl-hero .chvl-gallery.is-paused .chvl-icon-pause { display: none; }

/* Hero button (Figma "donate button - blue") */
.chvl-hero .chvl-hero__btn .wp-block-button__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 51px;
  padding: 0 28px;
  background: var(--chvl-blue);
  color: var(--chvl-yellow);
  font-family: var(--chvl-mono);
  font-weight: 500;
  font-size: 20px;
  line-height: 1;
  letter-spacing: 2px;
  text-transform: uppercase;
  text-decoration: none;
  border: 0;
  border-radius: 100px;
  box-shadow: none;
  transition: background-color .2s ease, transform .2s ease;
}
.chvl-hero .chvl-hero__btn .wp-block-button__link:hover,
.chvl-hero .chvl-hero__btn .wp-block-button__link:focus-visible {
  background: var(--chvl-blue-dark);
  color: var(--chvl-yellow);
  transform: translateY(-2px);
}
.chvl-hero .chvl-hero__btn .wp-block-button__link:focus-visible { outline: 3px solid var(--chvl-ink); outline-offset: 3px; }

@media (max-width: 1100px) {
  .chvl-hero .chvl-hero__inner { grid-template-columns: minmax(0, 1fr) 340px; }
}
@media (max-width: 767px) {
  .wp-block-group.chvl-hero { --chvl-hero-pad: 56px; padding-left: 20px; padding-right: 20px; }
  .chvl-hero .chvl-hero__inner { grid-template-columns: 1fr; gap: 40px; }
  .chvl-hero .chvl-hero__title { margin-bottom: 24px; }
  .chvl-hero .chvl-hero__btn .wp-block-button__link { font-size: 18px; min-height: 48px; }
  .chvl-hero .chvl-gallery { margin: 0 0 calc(var(--chvl-hero-pad) * -1); contain: none; }
  .chvl-hero .chvl-gallery__viewport { height: 460px; }
  .chvl-hero .chvl-gallery__toggle { bottom: 16px; }
}
@media (hover: none) {
  .chvl-hero .chvl-gallery__toggle { opacity: .85; }
}


/* --------------------------------------------------------------------------
   B2. CAMPAIGN VIDEO — full width, poster + play ring, YouTube on click
   -------------------------------------------------------------------------- */
.wp-block-group.chvl-video {
  --chvl-bg: #000;
  padding: 0;
  width: calc(100vw - var(--chvl-sbw, 0px));
  max-width: none;
  margin-left: calc(50% - (100vw - var(--chvl-sbw, 0px)) / 2);
}
.chvl-video .chvl-video__box {
  position: relative;
  aspect-ratio: 16 / 9;              /* Figma 1440 × 810 */
  background: #000;
  overflow: hidden;
}
.chvl-video .chvl-video__link,
.chvl-video .chvl-video__box iframe {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  margin: 0;
}
.chvl-video .chvl-video__link { color: var(--chvl-white); cursor: pointer; }
.chvl-video .chvl-video__poster {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  margin: 0;
  border-radius: 0;
}
.chvl-video .chvl-video__play {
  position: absolute;
  top: 50%;
  left: 50%;
  width: clamp(88px, 15.35vw, 221px);
  height: clamp(88px, 15.35vw, 221px);
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 2px 12px rgba(0, 0, 0, .25));
  transition: transform .2s ease;
}
.chvl-video .chvl-video__play svg { display: block; width: 100%; height: 100%; }
.chvl-video .chvl-video__link:hover .chvl-video__play { transform: translate(-50%, -50%) scale(1.06); }
.chvl-video .chvl-video__link:focus-visible { outline: 4px solid var(--chvl-yellow); outline-offset: -8px; }


/* --------------------------------------------------------------------------
   B3. HELPING IN BIG AND SMALL WAYS — centred intro
   -------------------------------------------------------------------------- */
.wp-block-group.chvl-helping {
  --chvl-bg: var(--chvl-white);
  text-align: center;
}
/* centred column (targets the blocks by class, so theme wrappers don't matter) */
.chvl.chvl-helping .chvl-helping__title,
.chvl.chvl-helping .chvl-helping__lead,
.chvl.chvl-helping .chvl-helping__text { max-width: var(--chvl-max); margin-left: auto; margin-right: auto; }
.chvl.chvl-helping .chvl-helping__lead,
.chvl.chvl-helping .chvl-helping__text { max-width: var(--chvl-max); }
.chvl-helping .chvl-helping__title {
  font-family: var(--chvl-serif);
  font-weight: 800;
  font-style: normal;
  font-size: var(--chvl-h1);
  line-height: 1.03;
  letter-spacing: 0;
  text-transform: none;
  color: var(--chvl-blue);
  margin-bottom: 40px;
}
.chvl-helping .chvl-helping__lead {
  font-family: var(--chvl-serif);
  font-weight: 500;
  font-size: var(--chvl-h2);
  line-height: 1.286;
  color: var(--chvl-ink);
  margin-bottom: 20px;
}
.chvl-helping .chvl-helping__text {
  font-family: var(--chvl-sans);
  font-weight: 400;
  font-size: var(--chvl-body);
  line-height: 1.5;
  color: var(--chvl-ink);
}
@media (max-width: 767px) {
  .wp-block-group.chvl-helping { --chvl-pad-y: 64px; --chvl-pad-x: 20px; }
  .chvl-helping .chvl-helping__title { margin-bottom: 24px; }
}


/* --------------------------------------------------------------------------
   B4. HOW WE HELP — 3 blue cards that rise into view
   -------------------------------------------------------------------------- */
.wp-block-group.chvl-help {
  --chvl-bg: var(--chvl-cream);
  padding-top: clamp(56px, 6vw, 87px);
  padding-bottom: clamp(56px, 6.7vw, 97px);
}
.chvl-help .chvl-help__title {
  font-family: var(--chvl-serif);
  font-weight: 800;
  font-style: normal;
  font-size: var(--chvl-h1);
  line-height: 1.03;
  letter-spacing: 0;
  text-transform: none;
  color: var(--chvl-blue);
  text-align: center;
  margin: 0 auto 48px;
}
.chvl-help .chvl-help__cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 411px));
  justify-content: center;
  gap: 24px;
  max-width: 1281px;
  margin: 0 auto;
  padding-top: 10px;                 /* room for the hover lift inside the clip */
  overflow: hidden;                  /* cards rise up out of this band */
}
.chvl-help .chvl-help-card {
  display: flex;
  flex-direction: column;
  min-height: 683px;
  padding: 23px 26px 38px;
  background: var(--chvl-blue);
  border-radius: 15px;
  transition: transform .25s ease, box-shadow .25s ease;
}
.chvl-help .chvl-help-card:hover { transform: translateY(-6px); box-shadow: 0 14px 30px rgba(0, 0, 0, .16); }
.chvl-help .chvl-help-card__img {
  aspect-ratio: 360 / 318;
  border-radius: 10px;
  overflow: hidden;
  background: var(--chvl-white);
}
.chvl-help .chvl-help-card__img { position: relative; }
.chvl-help .chvl-help-card__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.chvl-help .chvl-help-card__title {
  font-family: var(--chvl-cond);
  font-variation-settings: var(--chvl-cond-axes);
  word-spacing: var(--chvl-cond-ws);
  font-weight: var(--chvl-cond-weight);
  font-synthesis: weight;
  font-style: normal;
  font-size: clamp(30px, 26px + 1.1vw, 40px);
  line-height: 1.15;
  letter-spacing: 0;
  text-transform: none;
  color: var(--chvl-yellow);
  margin: 31px 16px 10px;
}
.chvl-help .chvl-help-card__text {
  font-family: var(--chvl-sans);
  font-weight: 400;
  font-size: var(--chvl-body);
  line-height: 1.5;
  color: var(--chvl-white);
  margin: 0 16px;
}
.chvl-help .chvl-help-card__btn-row { margin: auto 0 0 11px; padding-top: 28px; display: flex; }
.chvl-help .chvl-help-card__btn .wp-block-button__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 209px;
  min-height: 51px;
  padding: 0 24px;
  background: var(--chvl-yellow);
  color: var(--chvl-blue);
  font-family: var(--chvl-mono);
  font-weight: 500;
  font-size: 20px;
  line-height: 1;
  letter-spacing: 2px;
  text-transform: uppercase;
  text-decoration: underline;
  text-underline-offset: 3px;
  border: 0;
  border-radius: 100px;
  box-shadow: none;
  transition: background-color .2s ease, color .2s ease;
}
.chvl-help .chvl-help-card__btn .wp-block-button__link:hover,
.chvl-help .chvl-help-card__btn .wp-block-button__link:focus-visible {
  background: var(--chvl-white);
  color: var(--chvl-blue);
}
.chvl-help .chvl-help-card__btn .wp-block-button__link:focus-visible { outline: 3px solid var(--chvl-yellow); outline-offset: 3px; }

/* Rise-in (only once the script runs, so cards never vanish if JS fails) */
.chvl-js .chvl-help .chvl-help-card {
  transform: translate3d(0, calc(100% + 24px), 0);
  transition: transform .9s cubic-bezier(.16, 1, .3, 1), box-shadow .25s ease;
}
.chvl-js .chvl-help .chvl-help-card:nth-child(2) { transition-delay: .35s; }
.chvl-js .chvl-help .chvl-help-card:nth-child(3) { transition-delay: .7s; }
.chvl-js .chvl-help .chvl-help-card.is-in { transform: none; }
.chvl-js .chvl-help .chvl-help-card.is-in:hover { transform: translateY(-6px); transition-delay: 0s; }

@media (max-width: 1100px) {
  .chvl-help .chvl-help__cards { gap: 16px; }
  .chvl-help .chvl-help-card { min-height: 600px; padding: 18px 18px 28px; }
  .chvl-help .chvl-help-card__title,
  .chvl-help .chvl-help-card__text { margin-left: 8px; margin-right: 8px; }
  .chvl-help .chvl-help-card__btn .wp-block-button__link { min-width: 0; font-size: 17px; }
}
@media (max-width: 767px) {
  .wp-block-group.chvl-help { --chvl-pad-x: 20px; }
  .chvl-help .chvl-help__title { margin-bottom: 32px; }
  .chvl-help .chvl-help__cards { grid-template-columns: minmax(0, 411px); gap: 24px; overflow: visible; }
  .chvl-help .chvl-help-card { min-height: 0; }
  .chvl-js .chvl-help .chvl-help-card { transform: translate3d(0, 60px, 0); opacity: 0; transition: transform .8s cubic-bezier(.16, 1, .3, 1), opacity .6s ease; }
  .chvl-js .chvl-help .chvl-help-card:nth-child(n) { transition-delay: 0s; }
  .chvl-js .chvl-help .chvl-help-card.is-in { opacity: 1; }
}


/* --------------------------------------------------------------------------
   B5. YOUR IMPACT — centred intro
   -------------------------------------------------------------------------- */
.wp-block-group.chvl-impact {
  --chvl-bg: var(--chvl-white);
  text-align: center;
}
/* centred column (targets the blocks by class, so theme wrappers don't matter) */
.chvl.chvl-impact .chvl-impact__title,
.chvl.chvl-impact .chvl-impact__lead { max-width: var(--chvl-max); margin-left: auto; margin-right: auto; }
.chvl-impact .chvl-impact__title {
  font-family: var(--chvl-serif);
  font-weight: 800;
  font-style: normal;
  font-size: var(--chvl-h1);
  line-height: 1.03;
  letter-spacing: 0;
  text-transform: none;
  color: var(--chvl-blue);
  margin-bottom: 40px;
}
.chvl-impact .chvl-impact__lead {
  font-family: var(--chvl-serif);
  font-weight: 500;
  font-size: var(--chvl-h2);
  line-height: 1.286;
  color: var(--chvl-ink);
  margin-bottom: 20px;
}
@media (max-width: 767px) {
  .wp-block-group.chvl-impact { --chvl-pad-y: 64px; --chvl-pad-x: 20px; }
  .chvl-impact .chvl-impact__title { margin-bottom: 24px; }
}


/* --------------------------------------------------------------------------
   B6. EVERY DAY AT COVENANT HOUSE VANCOUVER — photo stat cards
       Numbers fade up when the cards scroll into view.
   -------------------------------------------------------------------------- */
.wp-block-group.chvl-daily {
  --chvl-bg: var(--chvl-cream);
  padding-top: clamp(64px, 6.7vw, 97px);
  padding-bottom: clamp(40px, 4.5vw, 64px);
}
.chvl-daily .chvl-daily__title {
  font-family: var(--chvl-serif);
  font-weight: 800;
  font-style: normal;
  font-size: var(--chvl-h1);
  line-height: 1.03;
  letter-spacing: 0;
  text-transform: none;
  color: var(--chvl-blue);
  text-align: center;
  max-width: 889px;
  margin: 0 auto 50px;
}
.chvl-daily .chvl-daily__cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 411px));
  justify-content: center;
  gap: 24px;
  max-width: 1281px;
  margin: 0 auto;
}
.chvl-daily .chvl-daily-card {
  position: relative;
  isolation: isolate;
  container-type: inline-size;
  aspect-ratio: 411 / 683;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px 4%;
  border-radius: 15px;
  overflow: hidden;
  text-align: center;
  background: var(--chvl-blue);
}
.chvl-daily .chvl-daily-card::after {          /* Figma: blue at 75% over the photo */
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(0, 103, 255, .75);
}
.chvl-daily .chvl-daily-card__img {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.chvl-daily .chvl-daily-card__img img { width: 100%; height: 100%; object-fit: cover; }
.chvl-daily .chvl-daily-card__num {
  font-family: var(--chvl-cond);
  font-variation-settings: var(--chvl-cond-axes);
  word-spacing: var(--chvl-cond-ws);
  font-weight: var(--chvl-cond-weight);
  font-synthesis: weight;
  font-size: 36.5cqw;                /* Figma 150px on a 411px card */
  line-height: 1.07;
  color: var(--chvl-yellow);
  margin-bottom: 10px;
  white-space: nowrap;
}
.chvl-daily .chvl-daily-card__label {
  font-family: var(--chvl-cond);
  font-variation-settings: var(--chvl-cond-axes);
  word-spacing: var(--chvl-cond-ws);
  font-weight: var(--chvl-cond-weight);
  font-synthesis: weight;
  font-size: 9.73cqw;                /* 40px on a 411px card */
  line-height: 1.15;
  color: var(--chvl-white);
  max-width: 80cqw;                  /* Figma text box 328px */
}
.chvl-js .chvl-daily .chvl-daily-card__num,
.chvl-js .chvl-daily .chvl-daily-card__label {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .7s ease, transform .9s cubic-bezier(.16, 1, .3, 1);
}
.chvl-js .chvl-daily .chvl-daily-card__label { transition-delay: .15s; }
.chvl-js .chvl-daily .chvl-daily-card:nth-child(2) .chvl-daily-card__num { transition-delay: .3s; }
.chvl-js .chvl-daily .chvl-daily-card:nth-child(2) .chvl-daily-card__label { transition-delay: .45s; }
.chvl-js .chvl-daily .chvl-daily-card:nth-child(3) .chvl-daily-card__num { transition-delay: .6s; }
.chvl-js .chvl-daily .chvl-daily-card:nth-child(3) .chvl-daily-card__label { transition-delay: .75s; }
.chvl-js .chvl-daily .chvl-daily-card.is-in .chvl-daily-card__num,
.chvl-js .chvl-daily .chvl-daily-card.is-in .chvl-daily-card__label { opacity: 1; transform: none; }

@media (max-width: 1100px) {
  .chvl-daily .chvl-daily__cards { gap: 16px; }
}
@media (max-width: 767px) {
  .wp-block-group.chvl-daily { --chvl-pad-x: 20px; }
  .chvl-daily .chvl-daily__title { margin-bottom: 32px; }
  .chvl-daily .chvl-daily__cards { grid-template-columns: minmax(0, 411px); }
  .chvl-daily .chvl-daily-card { aspect-ratio: 411 / 460; }
  .chvl-js .chvl-daily .chvl-daily-card:nth-child(n) .chvl-daily-card__num { transition-delay: 0s; }
  .chvl-js .chvl-daily .chvl-daily-card:nth-child(n) .chvl-daily-card__label { transition-delay: .15s; }
}


/* --------------------------------------------------------------------------
   B7. SUPPORTER COUNT — "More than 80% of our funding comes from our community."
       Tiles roll to the live FundraiseUp number.
   -------------------------------------------------------------------------- */
.wp-block-group.chvl-count {
  --chvl-bg: var(--chvl-cream);
  padding-top: clamp(40px, 4.5vw, 64px);
  padding-bottom: clamp(64px, 8.3vw, 120px);
  text-align: center;
}
.chvl-count .chvl-count__title {
  font-family: var(--chvl-serif);
  font-weight: 800;
  font-style: normal;
  font-size: var(--chvl-h1);
  line-height: 1.03;
  letter-spacing: 0;
  text-transform: none;
  color: var(--chvl-blue);
  max-width: 1154px;
  margin: 0 auto 60px;
}
.chvl-count .chvl-counter {
  max-width: 1064px;
  margin: 0 auto;
  padding: 60px 45px 30px;
  background: var(--chvl-yellow);
  border-radius: 15px;
}
.chvl-count .chvl-counter__digits {
  display: grid;
  grid-template-columns: repeat(var(--chvl-tiles, 4), minmax(0, 225px));
  justify-content: center;
  gap: 24px;
}
.chvl-count .chvl-counter__digit {
  position: relative;
  container-type: inline-size;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--chvl-white);
  border-radius: 15px;
  font-family: var(--chvl-cond);
  font-variation-settings: var(--chvl-cond-axes);
  word-spacing: var(--chvl-cond-ws);
  font-weight: 700;
  font-synthesis: weight;
  font-size: clamp(48px, 13.9vw, 200px);
  line-height: 1;
  color: var(--chvl-ink);
  font-variant-numeric: tabular-nums;
}
.chvl-count .chvl-counter__strip {           /* built by the script */
  position: absolute;
  inset: 0 0 auto;
  display: flex;
  flex-direction: column;
  transition: transform 1.1s cubic-bezier(.3, 1.15, .45, 1);
}
.chvl-count .chvl-counter__strip span {
  flex: 0 0 auto;
  height: 100cqw;
  font-size: 88cqw;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Holds the FundraiseUp Stat Counter: hidden, still rendered so the script can read it */
.chvl-count .chvl-counter__source {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}
.chvl-count .chvl-counter__label {
  font-family: var(--chvl-serif);
  font-weight: 800;
  font-size: clamp(22px, 17.6px + 1.2vw, 36px);
  line-height: 1.4;
  color: var(--chvl-blue);
  margin: 24px 0 0;
}
.chvl-count .chvl-count__closing {
  font-family: var(--chvl-serif);
  font-weight: 800;
  font-size: var(--chvl-h1);
  line-height: 1.03;
  color: var(--chvl-blue);
  max-width: 904px;
  margin: 51px auto 0;
}
@media (max-width: 767px) {
  .wp-block-group.chvl-count { --chvl-pad-x: 20px; }
  .chvl-count .chvl-count__title { margin-bottom: 36px; }
  .chvl-count .chvl-counter { padding: 24px 16px 20px; }
  .chvl-count .chvl-counter__digits { gap: 10px; }
  .chvl-count .chvl-counter__digit { border-radius: 10px; }
  .chvl-count .chvl-count__closing { margin-top: 36px; }
}


/* --------------------------------------------------------------------------
   B8. MEET OUR COMMUNITY — centred intro
   -------------------------------------------------------------------------- */
.wp-block-group.chvl-community {
  --chvl-bg: var(--chvl-white);
  text-align: center;
  padding-top: clamp(64px, 9.2vw, 132px);
}
/* centred column (targets the blocks by class, so theme wrappers don't matter) */
.chvl.chvl-community .chvl-community__title,
.chvl.chvl-community .chvl-community__lead { max-width: 835px; margin-left: auto; margin-right: auto; }
.chvl-community .chvl-community__title {
  font-family: var(--chvl-serif);
  font-weight: 800;
  font-style: normal;
  font-size: var(--chvl-h1);
  line-height: 1.03;
  letter-spacing: 0;
  text-transform: none;
  color: var(--chvl-blue);
  margin-bottom: 40px;
}
.chvl-community .chvl-community__lead {
  font-family: var(--chvl-serif);
  font-weight: 500;
  font-size: var(--chvl-h2);
  line-height: 1.286;
  color: var(--chvl-ink);
  margin-bottom: 20px;
}
@media (max-width: 767px) {
  .wp-block-group.chvl-community { --chvl-pad-y: 64px; --chvl-pad-x: 20px; }
  .chvl-community .chvl-community__title { margin-bottom: 24px; }
}


/* --------------------------------------------------------------------------
   B9. COMMUNITY VOICES — 3 quotes with stacked polaroid photos
       Yellow band with rounded bottom corners.
   -------------------------------------------------------------------------- */
.wp-block-group.chvl-voices {
  --chvl-bg: var(--chvl-yellow);
  padding-top: clamp(64px, 12.6vw, 182px);
  padding-bottom: clamp(64px, 12.4vw, 179px);
}
.wp-block-group.chvl-voices::before { border-radius: 0 0 30px 30px; }
.chvl-voices .chvl-voice {
  max-width: var(--chvl-max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 628px) 390px;
  justify-content: space-between;
  align-items: center;
  gap: 40px;
}
.chvl-voices .chvl-voice--reverse { grid-template-columns: 390px minmax(0, 626px); }
.chvl-voices .chvl-voice + .chvl-voice { margin-top: clamp(72px, 9vw, 129px); }
.chvl-voices .chvl-voice__quote {
  font-family: var(--chvl-cond);
  font-variation-settings: var(--chvl-cond-axes);
  word-spacing: var(--chvl-cond-ws);
  font-weight: var(--chvl-cond-weight);
  font-synthesis: weight;
  font-style: normal;
  font-size: clamp(22px, 18px + 1vw, 32px);
  line-height: 1.44;
  color: var(--chvl-blue);
  margin-bottom: 20px;
}
.chvl-voices .chvl-voice__name {
  font-family: var(--chvl-cond);
  font-variation-settings: var(--chvl-cond-axes);
  word-spacing: var(--chvl-cond-ws);
  font-weight: 500;
  font-size: clamp(16px, 14.6px + 0.37vw, 20px);
  line-height: 1.8;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--chvl-blue);
}
/* Two overlapping polaroids (Figma: 302px frames, 271px photos, tilted) */
.chvl-voices .chvl-voice__photos {
  position: relative;
  width: 390px;
  height: 525px;
}
.chvl-voices .chvl-polaroid {
  position: absolute;
  margin: 0;
  width: 302px;
  padding: 15.5px;
  background: var(--chvl-polaroid);
  box-shadow: 0 4px 4px rgba(0, 0, 0, .25);
}
.chvl-voices .chvl-polaroid img {
  width: 271px;
  height: 271px;
  object-fit: cover;
  background: var(--chvl-white);
}
.chvl-voices .chvl-polaroid--top    { top: 0;     transform: rotate(-3.95deg); }
.chvl-voices .chvl-polaroid--bottom { top: 213px; transform: rotate(1.71deg); z-index: 1; }
/* Busra: bottom photo sits to the right. Sheldon / Kaito: top photo sits to the right. */
.chvl-voices .chvl-voice__photos--right .chvl-polaroid--top    { left: 0; }
.chvl-voices .chvl-voice__photos--right .chvl-polaroid--bottom { left: 76px; }
.chvl-voices .chvl-voice__photos--left  .chvl-polaroid--top    { left: 45px; }
.chvl-voices .chvl-voice__photos--left  .chvl-polaroid--bottom { left: 0; }

@media (max-width: 1100px) {
  .chvl-voices .chvl-voice { grid-template-columns: minmax(0, 1fr) 330px; }
  .chvl-voices .chvl-voice--reverse { grid-template-columns: 330px minmax(0, 1fr); }
  .chvl-voices .chvl-voice__photos { transform: scale(.85); transform-origin: center; width: 330px; }
}
@media (max-width: 767px) {
  .wp-block-group.chvl-voices { --chvl-pad-x: 20px; }
  .chvl-voices .chvl-voice,
  .chvl-voices .chvl-voice--reverse { grid-template-columns: 1fr; gap: 28px; justify-items: center; }
  .chvl-voices .chvl-voice__photos { width: 270px; height: 370px; transform: none; }
  .chvl-voices .chvl-polaroid { width: 214px; padding: 11px; }
  .chvl-voices .chvl-polaroid img { width: 192px; height: 192px; }
  .chvl-voices .chvl-polaroid--bottom { top: 150px; }
  .chvl-voices .chvl-voice__photos--right .chvl-polaroid--bottom { left: 54px; }
  .chvl-voices .chvl-voice__photos--left  .chvl-polaroid--top    { left: 32px; }
}


/* --------------------------------------------------------------------------
   B10. WHAT CARE CAN MAKE POSSIBLE — centred intro
   -------------------------------------------------------------------------- */
.wp-block-group.chvl-possible {
  --chvl-bg: var(--chvl-white);
  text-align: center;
}
/* centred column (targets the blocks by class, so theme wrappers don't matter) */
.chvl.chvl-possible .chvl-possible__title,
.chvl.chvl-possible .chvl-possible__lead { max-width: 842px; margin-left: auto; margin-right: auto; }
.chvl-possible .chvl-possible__title {
  font-family: var(--chvl-serif);
  font-weight: 800;
  font-style: normal;
  font-size: var(--chvl-h1);
  line-height: 1.03;
  letter-spacing: 0;
  text-transform: none;
  color: var(--chvl-blue);
  margin-bottom: 40px;
}
.chvl-possible .chvl-possible__lead {
  font-family: var(--chvl-serif);
  font-weight: 500;
  font-size: var(--chvl-h2);
  line-height: 1.286;
  color: var(--chvl-ink);
}
@media (max-width: 767px) {
  .wp-block-group.chvl-possible { --chvl-pad-y: 64px; --chvl-pad-x: 20px; }
  .chvl-possible .chvl-possible__title { margin-bottom: 24px; }
}


/* --------------------------------------------------------------------------
   B11. IN 2025 — photo stat cards (shorter than B6)
   -------------------------------------------------------------------------- */
.wp-block-group.chvl-year {
  --chvl-bg: var(--chvl-cream);
  padding-top: clamp(56px, 4.8vw, 69px);
  padding-bottom: clamp(64px, 8.3vw, 120px);
}
.chvl-year .chvl-year__title {
  font-family: var(--chvl-serif);
  font-weight: 800;
  font-style: normal;
  font-size: var(--chvl-h1);
  line-height: 1.03;
  letter-spacing: 0;
  text-transform: none;
  color: var(--chvl-blue);
  text-align: center;
  margin: 0 auto 50px;
}
.chvl-year .chvl-year__cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 411px));
  justify-content: center;
  gap: 24px;
  max-width: 1281px;
  margin: 0 auto;
}
.chvl-year .chvl-year-card {
  position: relative;
  isolation: isolate;
  container-type: inline-size;
  aspect-ratio: 411 / 564;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px 4%;
  border-radius: 15px;
  overflow: hidden;
  text-align: center;
  background: var(--chvl-blue);
}
.chvl-year .chvl-year-card::after {           /* Figma: blue at 65% over the photo */
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(0, 103, 255, .65);
}
.chvl-year .chvl-year-card__img {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.chvl-year .chvl-year-card__img img { width: 100%; height: 100%; object-fit: cover; }
.chvl-year .chvl-year-card__num {
  font-family: var(--chvl-cond);
  font-variation-settings: var(--chvl-cond-axes);
  word-spacing: var(--chvl-cond-ws);
  font-weight: var(--chvl-cond-weight);
  font-synthesis: weight;
  font-size: 20.7cqw;                /* Figma 85px on a 411px card */
  line-height: 1.06;
  color: var(--chvl-yellow);
  margin-bottom: 10px;
  white-space: nowrap;
}
.chvl-year .chvl-year-card__label {
  font-family: var(--chvl-cond);
  font-variation-settings: var(--chvl-cond-axes);
  word-spacing: var(--chvl-cond-ws);
  font-weight: var(--chvl-cond-weight);
  font-synthesis: weight;
  font-size: 9.73cqw;                /* 40px on a 411px card */
  line-height: 1.15;
  color: var(--chvl-white);
  max-width: 80cqw;
}
.chvl-js .chvl-year .chvl-year-card__num,
.chvl-js .chvl-year .chvl-year-card__label {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .7s ease, transform .9s cubic-bezier(.16, 1, .3, 1);
}
.chvl-js .chvl-year .chvl-year-card__label { transition-delay: .15s; }
.chvl-js .chvl-year .chvl-year-card:nth-child(2) .chvl-year-card__num { transition-delay: .3s; }
.chvl-js .chvl-year .chvl-year-card:nth-child(2) .chvl-year-card__label { transition-delay: .45s; }
.chvl-js .chvl-year .chvl-year-card:nth-child(3) .chvl-year-card__num { transition-delay: .6s; }
.chvl-js .chvl-year .chvl-year-card:nth-child(3) .chvl-year-card__label { transition-delay: .75s; }
.chvl-js .chvl-year .chvl-year-card.is-in .chvl-year-card__num,
.chvl-js .chvl-year .chvl-year-card.is-in .chvl-year-card__label { opacity: 1; transform: none; }

@media (max-width: 1100px) {
  .chvl-year .chvl-year__cards { gap: 16px; }
}
@media (max-width: 767px) {
  .wp-block-group.chvl-year { --chvl-pad-x: 20px; }
  .chvl-year .chvl-year__title { margin-bottom: 32px; }
  .chvl-year .chvl-year__cards { grid-template-columns: minmax(0, 411px); }
  .chvl-year .chvl-year-card { aspect-ratio: 411 / 400; }
  .chvl-js .chvl-year .chvl-year-card:nth-child(n) .chvl-year-card__num { transition-delay: 0s; }
  .chvl-js .chvl-year .chvl-year-card:nth-child(n) .chvl-year-card__label { transition-delay: .15s; }
}


/* --------------------------------------------------------------------------
   B12. WAYS TO TAKE CARE — intro + grid of link tiles
        Blue tiles = solid blue, yellow text.
        Photo tiles = photo under 85% yellow, blue text.
        The whole tile is clickable (link stretched over the tile).
   -------------------------------------------------------------------------- */
.wp-block-group.chvl-ways {
  --chvl-bg: var(--chvl-white);
  padding-bottom: clamp(64px, 7.6vw, 110px);
}
.chvl-ways .chvl-ways__title,
.chvl-ways .chvl-ways__lead { max-width: 862px; margin-left: auto; margin-right: auto; text-align: center; }
.chvl-ways .chvl-ways__title {
  font-family: var(--chvl-serif);
  font-weight: 800;
  font-style: normal;
  font-size: var(--chvl-h1);
  line-height: 1.03;
  letter-spacing: 0;
  text-transform: none;
  color: var(--chvl-blue);
  margin-bottom: 40px;
}
.chvl-ways .chvl-ways__lead {
  font-family: var(--chvl-serif);
  font-weight: 500;
  font-size: var(--chvl-h2);
  line-height: 1.286;
  color: var(--chvl-ink);
  margin-bottom: 20px;
}
.chvl-ways .chvl-ways__lead--bold,
.chvl-ways .chvl-ways__lead--bold strong { font-weight: 700; margin-bottom: 0; }
.chvl-ways .chvl-ways__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 409px));
  justify-content: center;
  gap: 35px 26px;
  max-width: 1279px;
  margin: clamp(56px, 10.4vw, 150px) auto 0;
}
.chvl-ways .chvl-tile {
  position: relative;
  isolation: isolate;
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  padding: 0 42px;
  border-radius: 15px;
  overflow: hidden;
  transition: transform .25s ease, box-shadow .25s ease;
}
.chvl-ways .chvl-tile--blue  { background: var(--chvl-blue); }
.chvl-ways .chvl-tile--photo { background: var(--chvl-yellow); }
.chvl-ways .chvl-tile--photo::after {           /* Figma: yellow at 85% over the photo */
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(255, 230, 83, .85);
}
.chvl-ways .chvl-tile__img {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.chvl-ways .chvl-tile__img img { width: 100%; height: 100%; object-fit: cover; }
.chvl-ways .chvl-tile__title {
  font-family: var(--chvl-cond);
  font-variation-settings: var(--chvl-cond-axes);
  word-spacing: var(--chvl-cond-ws);
  font-weight: var(--chvl-cond-weight);
  font-synthesis: weight;
  font-size: clamp(24px, 13.4px + 2.2vw, 45px);
  line-height: 1.07;
  margin: 0;
}
.chvl.chvl-ways .chvl-tile .chvl-tile__title a,
.chvl.chvl-ways .chvl-tile .chvl-tile__title a:hover,
.chvl.chvl-ways .chvl-tile .chvl-tile__title a:focus,
.chvl.chvl-ways .chvl-tile .chvl-tile__title a:visited {
  color: inherit;
  font: inherit;
  text-decoration: none;
  outline: none;
}
.chvl-ways .chvl-tile__title a::after {         /* makes the whole tile the link */
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}
.chvl-ways .chvl-tile--blue  .chvl-tile__title { color: var(--chvl-yellow); }
.chvl-ways .chvl-tile--photo .chvl-tile__title { color: var(--chvl-blue); }
.chvl-ways .chvl-tile:hover { transform: translateY(-6px); box-shadow: 0 14px 30px rgba(0, 0, 0, .16); }
.chvl.chvl-ways .chvl-tile:hover .chvl-tile__title a { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 3px; }
.chvl-ways .chvl-tile:focus-within { outline: 3px solid var(--chvl-ink); outline-offset: 4px; }

@media (max-width: 1100px) {
  .chvl-ways .chvl-ways__grid { gap: 20px; }
  .chvl-ways .chvl-tile { padding: 0 28px; }
}
@media (max-width: 767px) {
  .wp-block-group.chvl-ways { --chvl-pad-y: 64px; --chvl-pad-x: 20px; }
  .chvl-ways .chvl-ways__title { margin-bottom: 24px; }
  .chvl-ways .chvl-ways__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 40px; }
  .chvl-ways .chvl-tile { padding: 0 16px; border-radius: 12px; }
  .chvl-ways .chvl-tile__title { font-size: 22px; }
}
@media (max-width: 400px) {
  .chvl-ways .chvl-ways__grid { grid-template-columns: 1fr; }
  .chvl-ways .chvl-tile { aspect-ratio: 2 / 1; padding: 0 24px; }
  .chvl-ways .chvl-tile__title { font-size: 28px; }
}


/* --------------------------------------------------------------------------
   B13. CLOSING CTA — "Every young person deserves someone who cares."
   -------------------------------------------------------------------------- */
.wp-block-group.chvl-cta {
  --chvl-bg: var(--chvl-yellow);
  padding-top: clamp(80px, 11vw, 159px);
  padding-bottom: clamp(80px, 11vw, 160px);
  text-align: center;
}
/* centred column (targets the blocks by class, so theme wrappers don't matter) */
.chvl.chvl-cta .chvl-cta__title,
.chvl.chvl-cta .chvl-cta__lead { max-width: 1065px; margin-left: auto; margin-right: auto; }
.chvl.chvl-cta .chvl-cta__lead { max-width: 1065px; }
.chvl-cta .chvl-cta__title {
  font-family: var(--chvl-serif);
  font-weight: 800;
  font-style: normal;
  font-size: var(--chvl-h1);
  line-height: 1.03;
  letter-spacing: 0;
  text-transform: none;
  color: var(--chvl-blue);
  margin-bottom: 40px;
}
.chvl-cta .chvl-cta__lead {
  font-family: var(--chvl-serif);
  font-weight: 500;
  font-size: var(--chvl-h2);
  line-height: 1.286;
  color: var(--chvl-blue);
  margin-bottom: 20px;
}
.chvl-cta .chvl-cta__btn-row { margin-top: 48px; display: flex; justify-content: center; }
.chvl-cta .chvl-cta__btn .wp-block-button__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 51px;
  padding: 0 28px;
  background: var(--chvl-blue);
  color: var(--chvl-yellow);
  font-family: var(--chvl-mono);
  font-weight: 500;
  font-size: 20px;
  line-height: 1;
  letter-spacing: 2px;
  text-transform: uppercase;
  text-decoration: none;
  border: 0;
  border-radius: 100px;
  box-shadow: none;
  transition: background-color .2s ease, transform .2s ease;
}
.chvl-cta .chvl-cta__btn .wp-block-button__link:hover,
.chvl-cta .chvl-cta__btn .wp-block-button__link:focus-visible {
  background: var(--chvl-blue-dark);
  color: var(--chvl-yellow);
  transform: translateY(-2px);
}
.chvl-cta .chvl-cta__btn .wp-block-button__link:focus-visible { outline: 3px solid var(--chvl-ink); outline-offset: 3px; }
@media (max-width: 767px) {
  .wp-block-group.chvl-cta { --chvl-pad-x: 20px; }
  .chvl-cta .chvl-cta__title { margin-bottom: 24px; }
  .chvl-cta .chvl-cta__btn-row { margin-top: 32px; }
  .chvl-cta .chvl-cta__btn .wp-block-button__link { font-size: 18px; min-height: 48px; }
}


/* ==========================================================================
   Reduced motion — whole page
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html:has(.chvl) { scroll-behavior: auto; }
  .chvl-hero .chvl-gallery.is-looping .chvl-gallery__track { animation: none; }
  .chvl-js .chvl-help .chvl-help-card,
  .chvl-js .chvl-daily .chvl-daily-card__num,
  .chvl-js .chvl-daily .chvl-daily-card__label,
  .chvl-js .chvl-year .chvl-year-card__num,
  .chvl-js .chvl-year .chvl-year-card__label { opacity: 1; transform: none; transition: none; }
  .chvl-count .chvl-counter__strip { transition: none; }
  .chvl .wp-block-button__link,
  .chvl-ways .chvl-tile,
  .chvl-video .chvl-video__play { transition: none; }
}

/* Figma line breaks in body copy — dropped on phones so text wraps naturally */
@media (max-width: 767px) {
  .chvl br.chvl-br { display: none; }
}


/* ==========================================================================
   PART C — BLOCK EDITOR ONLY
   Every rule below includes .wp-block or .block-editor-… — classes that exist
   only inside the WordPress editor, never on the live page. So these rules
   cannot change the front end, and (scoped to .chvl) cannot touch other pages.
   ========================================================================== */

/* C1. Sections use the full editor width and stay centred
       (the editor caps blocks at ~840px; our margin:0 cancelled its centring) */
.wp-block-group.chvl.wp-block {
  max-width: none;
  margin-left: auto;
  margin-right: auto;
}
/* C2. Lift the 840px cap on inner blocks; each section's own widths still apply */
.chvl :where(.wp-block) { max-width: none; }

/* C3. Remove the editor's own wrappers from the layout so grids see the blocks */
.chvl .block-editor-inner-blocks,
.chvl .block-editor-block-list__layout { display: contents; }

/* C4. Backgrounds: paint the section only (100vw would run under the side panels) */
.wp-block-group.chvl.wp-block::before {
  left: 0;
  right: 0;
  width: auto;
  transform: none;
}

/* C5. Full-width video fits the editor column */
.wp-block-group.chvl-video.wp-block {
  width: auto;
  margin-left: auto;
  margin-right: auto;
}

/* C6. Hero images: still, scrollable stack so each one can be selected/replaced */
.chvl-hero .chvl-gallery.wp-block {
  contain: none;
  margin: 0;
  align-self: start;
}
.chvl-hero .chvl-gallery.wp-block .chvl-gallery__viewport {
  height: auto;
  max-height: 760px;
  overflow: auto;
  -webkit-mask-image: none;
          mask-image: none;
}

/* C7. Tiles: no stretched link in the editor, so the tile can be clicked and edited */
.chvl-ways .chvl-tile.wp-block .chvl-tile__title a::after { content: none; }