/*
Theme Name: Baskets of Hope
Theme URI: https://rohitgroup.com/baskets-of-hope
Author: Rohit's Baskets of Hope
Description: Custom theme for Rohit's Baskets of Hope - magenta + yellow + black logo palette, Montserrat, one-page editorial layout. Standalone (no parent), block-editor first.
Version: 5.00
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: boh
Tags: nonprofit, charity, one-page, block-editor, donation, custom-colors, custom-logo, custom-menu
*/

@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,500;1,700&display=swap');

/* ───────────────────────────────────────────────────────────────────
   DESIGN TOKENS - pulled from the BoH logo (magenta + yellow + black)
   ─────────────────────────────────────────────────────────────────── */
:root {
  /* Palette */
  --boh-paper:      #FFFFFF;   /* page background, clean white */
  --boh-paper-2:    #F7F5F0;   /* subtle alternate section bg */
  --boh-ink:        #0A0A0A;   /* primary text, pure black like logo */
  --boh-ink-soft:   #3D3D3D;   /* secondary text */
  --boh-ink-mute:   #7A7A7A;   /* tertiary text */
  --boh-rule:       #E5E5E5;   /* hairline */

  /* Magenta - logo's "HOPE" wordmark + bottom arc */
  /* Brand pink #d01482 (per BoH brand guidelines PDF). Deep/soft are
     derived hover + tint shades of the same hue. */
  --boh-magenta:      #d01482;
  --boh-magenta-deep: #a20e63;
  --boh-magenta-soft: #fbe4f0;

  /* Yellow - logo's top arc + basket-weave tick marks */
  /* Brand yellow #f9d135 (per BoH brand guidelines PDF). */
  --boh-yellow:      #f9d135;
  --boh-yellow-deep: #dcb31d;
  --boh-yellow-soft: #fef4c7;

  /* Backwards-compat aliases so existing component CSS still works */
  --boh-plum:       var(--boh-magenta);
  --boh-plum-deep:  var(--boh-magenta-deep);
  --boh-plum-soft:  var(--boh-magenta-soft);
  --boh-ember:      var(--boh-magenta);
  --boh-ember-deep: var(--boh-magenta-deep);
  --boh-ember-soft: var(--boh-magenta-soft);

  --boh-moss:       #5C7A4A;   /* trust / verified */
  --boh-rose:       #FF66A8;   /* lighter pink highlight */

  /* Shadows - soft, warm */
  --boh-shadow-sm:  0 1px 2px rgba(31,26,36,0.04), 0 1px 3px rgba(31,26,36,0.06);
  --boh-shadow-md:  0 4px 6px rgba(31,26,36,0.04), 0 10px 24px rgba(31,26,36,0.08);
  --boh-shadow-lg:  0 12px 32px rgba(107,45,140,0.10), 0 4px 8px rgba(31,26,36,0.06);

  /* Radii */
  --boh-r-sm: 6px;
  --boh-r-md: 12px;
  --boh-r-lg: 20px;
  --boh-r-xl: 28px;

  /* Type scale - reduced ~30% from the original for a refined, tighter feel */
  --boh-text-xs:   10px;
  --boh-text-sm:   12px;
  --boh-text-base: 14px;
  --boh-text-lg:   15px;
  --boh-text-xl:   17px;
  --boh-text-2xl:  20px;
  --boh-text-3xl:  26px;
  --boh-text-4xl:  34px;
  --boh-text-5xl:  46px;
  --boh-text-6xl:  60px;
}

/* No overflow-x here. Setting it on body promotes body to a scroll
   container, which silently disables the front-page scroll snapping
   declared on html. Anything that overflows is clipped at its own
   container instead (see .wp-block-cover.boh-hero). */
html,
body {
  width: 100%;
  max-width: 100%;
}

/* ───────────────────────────────────────────────────────────────────
   ANIMATIONS - scroll-reveal, hero pulse, stat counter, button micro
   ─────────────────────────────────────────────────────────────────── */
/* Scroll-reveal - elements start hidden + offset, animate in via JS toggle */
.boh-js .boh-reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .7s cubic-bezier(.2,.8,.2,1), transform .7s cubic-bezier(.2,.8,.2,1);
  will-change: opacity, transform;
}
.boh-reveal.is-in {
  opacity: 1;
  transform: translateY(0);
}
.boh-reveal--left  { transform: translateX(-28px); }
.boh-reveal--right { transform: translateX(28px); }
.boh-reveal--left.is-in,
.boh-reveal--right.is-in { transform: translateX(0); }
/* Stagger children: each subsequent child gets a longer delay */
.boh-js .boh-reveal-stagger > * {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .6s cubic-bezier(.2,.8,.2,1), transform .6s cubic-bezier(.2,.8,.2,1);
}
.boh-reveal-stagger.is-in > *:nth-child(1) { transition-delay: .05s; opacity: 1; transform: none; }
.boh-reveal-stagger.is-in > *:nth-child(2) { transition-delay: .15s; opacity: 1; transform: none; }
.boh-reveal-stagger.is-in > *:nth-child(3) { transition-delay: .25s; opacity: 1; transform: none; }
.boh-reveal-stagger.is-in > *:nth-child(4) { transition-delay: .35s; opacity: 1; transform: none; }
.boh-reveal-stagger.is-in > *:nth-child(5) { transition-delay: .45s; opacity: 1; transform: none; }

/* Disable animations for users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  .boh-reveal, .boh-reveal-stagger > * {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* Hero - slow breathing pulse on the gradient orbs (subtle) */
@keyframes boh-hero-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.85; transform: scale(1.08); }
}
.wp-block-cover.alignfull::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(40% 30% at 18% 22%, rgba(249, 209, 53,0.18) 0%, transparent 70%),
    radial-gradient(45% 35% at 88% 86%, rgba(208, 20, 130,0.22) 0%, transparent 70%);
  animation: boh-hero-pulse 9s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
}

/* Stat counter - gentle pop when revealing */
@keyframes boh-stat-pop {
  0%   { transform: scale(.92); opacity: 0; }
  60%  { transform: scale(1.03); opacity: 1; }
  100% { transform: scale(1); }
}
.boh-stats.is-in h2 {
  animation: boh-stat-pop .7s cubic-bezier(.2,.8,.2,1) both;
}
.boh-stats.is-in .wp-block-column:nth-child(1) h2 { animation-delay: .05s; }
.boh-stats.is-in .wp-block-column:nth-child(2) h2 { animation-delay: .18s; }
.boh-stats.is-in .wp-block-column:nth-child(3) h2 { animation-delay: .31s; }
.boh-stats.is-in .wp-block-column:nth-child(4) h2 { animation-delay: .44s; }

/* Floating up-arrow micro-animation for buttons */
.wp-block-button__link,
.boh-btn-ember,
.boh-btn-yellow {
  position: relative;
  overflow: hidden;
}
.wp-block-button__link::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 40%, rgba(255,255,255,0.18) 50%, transparent 60%);
  transform: translateX(-100%);
  transition: transform .6s ease;
  pointer-events: none;
}
.wp-block-button__link:hover::before { transform: translateX(100%); }

/* ───────────────────────────────────────────────────────────────────
   ONE-PAGER: smooth scroll + sticky-header offset for anchor links
   ─────────────────────────────────────────────────────────────────── */
html {
  scroll-behavior: smooth;
  scroll-padding-top: 100px; /* room for sticky header when jumping to #anchors */
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* Section anchors land just below the sticky header */
[id]:not(body):not(html) { scroll-margin-top: 100px; }

/* Highlight active section in nav (scroll-spy via :target-ish fallback) */
.main-navigation a[href^="#"].is-active,
.ast-builder-menu a[href^="#"].is-active {
  color: var(--boh-plum) !important;
}

/* ───────────────────────────────────────────────────────────────────
   BASE
   ─────────────────────────────────────────────────────────────────── */
body {
  font-family: 'Montserrat', system-ui, -apple-system, sans-serif;
  font-size: var(--boh-text-base);
  line-height: 1.7;
  color: var(--boh-ink);
  background: var(--boh-paper);
  font-feature-settings: 'ss01', 'cv11';
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Montserrat', system-ui, -apple-system, sans-serif;
  color: var(--boh-ink);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
}

/* Accent words inside headings - drop italic (Montserrat italic looks weak),
   use magenta + heavier weight to match the logo's "HOPE" treatment. */
h1 em, h2 em, h3 em, h4 em,
.wp-block-heading em,
.entry-content em {
  font-style: normal !important;
  font-weight: 800 !important;
  color: var(--boh-magenta) !important;
}

/* Hide page title (we lead with hero) */
.entry-header .entry-title,
.page .entry-title { display: none !important; }

/* Hide site title/tagline when logo is present */
.ast-site-title-wrap .site-title,
.ast-site-title-wrap .site-description,
.site-title,
.ast-header-break-point .site-title { display: none !important; }

/* Remove top padding when hero is first element */
.entry-content > .wp-block-cover:first-child,
.entry-content > .alignfull:first-child { margin-top: 0 !important; }

/* ── Block alignment: viewport-centered content widths ───────────
   - default blocks: 800px max, centered
   - .alignwide:    1240px max, centered
   - .alignfull:    100%, edge-to-edge without horizontal overflow
   This is the standard WP block-theme pattern - defines how `align: wide`
   and `align: full` actually behave when there's no theme.json. */
.entry-content {
  color: var(--boh-ink-soft);
  width: 100%;
  margin-left: auto !important;
  margin-right: auto !important;
}
.entry-content > * {
  max-width: 800px;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 24px;
  padding-right: 24px;
  box-sizing: border-box;
}
.entry-content > .alignwide {
  max-width: 1240px !important;
}
.entry-content > .alignfull {
  max-width: 100% !important;
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
/* Inside alignfull groups, the inner content respects its own padding,
   so don't add extra horizontal padding to wp-block-group descendants */
.entry-content > .alignfull .wp-block-group,
.entry-content > .alignfull > .wp-block-group {
  padding-left: 24px;
  padding-right: 24px;
  margin-left: auto;
  margin-right: auto;
  max-width: 1240px;
  box-sizing: border-box;
}
/* alignwide inside an alignfull should also be capped at 1240 + centered */
.entry-content > .alignfull > .alignwide,
.entry-content > .alignfull .alignwide {
  max-width: 1240px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 24px;
  padding-right: 24px;
  box-sizing: border-box;
}

.entry-content p { font-size: var(--boh-text-base); line-height: 1.75; }

/* Selection */
::selection { background: var(--boh-plum); color: #fff; }

/* ───────────────────────────────────────────────────────────────────
   HEADER - standalone theme. Markup lives in header.php.
   Transparent over the hero, fixed white-blur once scrolled.
   ─────────────────────────────────────────────────────────────────── */

/* Skip link */
.boh-skip-link {
  position: absolute; left: -9999px; top: -9999px;
}
.boh-skip-link:focus {
  position: fixed; top: 12px; left: 12px; padding: 10px 16px;
  background: #fff; color: var(--boh-ink); z-index: 9999;
  border-radius: 8px; box-shadow: 0 4px 16px rgba(0,0,0,0.2);
}

/* Header - floating glass pill. The bar itself is transparent; the
   pill (.boh-header__inner) carries a frosted-glass ground whose
   opacity ramps with scroll (--boh-header-alpha: 0.10 at top → 1.00
   once the hero is ~80% scrolled away; set by inline-footer JS).
   The oversized logo overhangs the pill's bottom edge - the mark
   deliberately breaks the frame to lead the composition. */
#masthead.boh-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  --boh-header-alpha: 0.10;
  background: transparent;
  padding: 0;
}
body.admin-bar #masthead.boh-header {
  top: 32px;
}
@keyframes boh-header-slide-down {
  from { transform: translateY(-100%); opacity: 0; }
  to   { transform: translateY(0);     opacity: 1; }
}

/* Full-bleed glass bar - touches top, left, and right edges.
   The oversized logo straddles the bar's bottom edge: half on the
   banner, half hanging below it into the hero. */
.boh-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  max-width: none;
  margin: 0;
  padding: 10px 36px;
  overflow: visible;
  border-radius: 0;
  /* Solid white. The header used to fade from 42% to opaque as the page
     scrolled, which let the hero photograph show through the navigation and
     made the links hard to read against whatever happened to be behind
     them. */
  background: #ffffff;
  border-bottom: 1px solid rgba(10,10,10,0.07);
  box-shadow: 0 10px 32px -12px rgba(31,26,36, calc(0.08 + var(--boh-header-alpha) * 0.12));
}
/* Header itself must allow the logo to overhang below its bottom edge */
#masthead.boh-header,
.boh-header__inner { overflow: visible !important; }

.boh-header__brand {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  position: relative;
}
.boh-header__title {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 800;
  font-size: 16px;
  letter-spacing: -0.02em;
  color: var(--boh-ink);
  text-decoration: none;
  white-space: nowrap;
}
body.boh-scrolled .boh-header__title { color: var(--boh-ink); }

/* Header logo - icon-only brand mark, no adjacent text label.
   At the top of the page it is double size and hangs below the bar into
   the hero; once scrolled past the hero it shrinks back inside the bar.
   The anchor reserves only bar-height space and the image is positioned
   absolutely inside it, so the oversized mark never grows the bar. */
.boh-header__title--icon-only {
  gap: 0;
  position: relative;
  display: block;
  width: var(--boh-logo-size, 104px);
  height: var(--boh-logo-box, 52px);
  transition: width .3s cubic-bezier(.2,.8,.2,1);
}
.boh-header__logo {
  /* Was absolutely positioned at top:0 for the old icon-only header, where
     an oversized mark deliberately hung below the bar into the hero. The
     mark now sits in a flex row beside the name, so static positioning lets
     that row centre it instead of pinning it to the top edge. */
  position: static;
  display: block;
  flex: 0 0 auto;
  width: var(--boh-logo-size, 52px);
  height: var(--boh-logo-size, 52px);
  object-fit: contain;
  filter: drop-shadow(0 6px 18px rgba(31,26,36,0.18));
  transition: width .3s cubic-bezier(.2,.8,.2,1),
              height .3s cubic-bezier(.2,.8,.2,1),
              transform .25s cubic-bezier(.2,.8,.2,1),
              filter .25s ease;
}
/* Scrolled past the hero: shrink to fit entirely within the bar. */
body.boh-scrolled .boh-header__title--icon-only,
body.boh-scrolled .boh-header__logo {
  --boh-logo-size: 52px;
}
body.boh-scrolled .boh-header__logo {
  filter: drop-shadow(0 3px 10px rgba(31,26,36,0.12));
}
.boh-header__title:hover .boh-header__logo {
  transform: translateY(-3px) scale(1.04);
  filter: drop-shadow(0 12px 28px rgba(208,20,130,0.25));
}

/* ───────────────────────────────────────────────────────────────────
   ANIMATED MARK (.boh-mark)
   Same geometry as the design draft. Paths use pathLength="100" so a
   single stroke-dasharray:100 hides / dashoffset:0 draws - no matter
   what physical size the SVG is rendered at.
   Default state = FINISHED so the logo looks correct if JS never runs.
   The intro animation only plays when JS adds `.is-playing` on load
   or hover (see mu-plugins/boh-logo-anim.php inline script).
   ─────────────────────────────────────────────────────────────────── */
.boh-mark { display: block; }
.boh-mark .arc {
  fill: none;
  stroke-width: 7;
  stroke-linecap: round;
}
.boh-mark .arc-y { stroke: var(--boh-yellow, #F9D135); }
.boh-mark .arc-m { stroke: var(--boh-magenta, #d01482); }
.boh-mark .tick {
  stroke: var(--boh-yellow, #F9D135);
  stroke-width: 4;
  stroke-linecap: round;
}
.boh-mark .wm {
  font-family: 'Montserrat', 'Arial Black', 'Helvetica Neue', sans-serif;
  font-weight: 900;
  fill: var(--boh-ink, #0A0A0A);
  letter-spacing: -0.01em;
}
.boh-mark .wm-hope { fill: var(--boh-magenta, #d01482); }

/* Play state - hidden at start, animates in. Applied only when
   .is-playing is on the SVG. Everything else uses the finished state. */
.boh-mark.is-playing .arc     { stroke-dasharray: 100; stroke-dashoffset: 100; }
.boh-mark.is-playing .tick    { opacity: 0; transform: translateX(10px); transform-box: fill-box; transform-origin: 100% 50%; }
.boh-mark.is-playing .wm-row  { opacity: 0; transform: translateY(8px); }

.boh-mark.is-playing .arc-y   { animation: bohDraw 1.15s cubic-bezier(.55,.05,.15,1) 0.10s forwards; }
.boh-mark.is-playing .arc-m   { animation: bohDraw 1.30s cubic-bezier(.55,.05,.15,1) 0.55s forwards; }
.boh-mark.is-playing .tick    { animation: bohTick .38s cubic-bezier(.2,.9,.3,1.4) forwards; }
.boh-mark.is-playing .tick-1  { animation-delay: 1.55s; }
.boh-mark.is-playing .tick-2  { animation-delay: 1.65s; }
.boh-mark.is-playing .tick-3  { animation-delay: 1.75s; }
.boh-mark.is-playing .tick-4  { animation-delay: 1.85s; }
.boh-mark.is-playing .wm-row  { animation: bohWord .55s cubic-bezier(.2,.7,.2,1) forwards; }
.boh-mark.is-playing .wm-1    { animation-delay: 1.70s; }
.boh-mark.is-playing .wm-2    { animation-delay: 1.85s; }
.boh-mark.is-playing .wm-3    { animation-delay: 2.00s; }
.boh-mark.is-playing .wm-hope {
  animation: bohHopePulse 1.1s cubic-bezier(.25,.9,.3,1.2) 2.30s forwards;
  transform-origin: center;
  transform-box: fill-box;
}

@keyframes bohDraw       { to { stroke-dashoffset: 0; } }
@keyframes bohTick       { to { opacity: 1; transform: translateX(0); } }
@keyframes bohWord       { to { opacity: 1; transform: translateY(0); } }
@keyframes bohHopePulse  {
  0%   { transform: scale(1.0);  }
  35%  { transform: scale(1.14); }
  70%  { transform: scale(0.98); }
  100% { transform: scale(1.0);  }
}

@media (prefers-reduced-motion: reduce) {
  .boh-mark.is-playing .arc,
  .boh-mark.is-playing .tick,
  .boh-mark.is-playing .wm-row,
  .boh-mark.is-playing .wm-hope { animation: none; opacity: 1; stroke-dashoffset: 0; transform: none; }
}

/* Hero-scale mark: sized via --boh-mark-size (set inline by the shortcode).
   Sits centered above the "Since 2010" tagline in the home hero. */
.boh-hero-mark {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto 18px;
  filter: drop-shadow(0 10px 24px rgba(31,26,36,0.10));
  position: relative;
  z-index: 2;
}
.boh-hero-mark .boh-mark {
  width: var(--boh-mark-size, 260px);
  height: var(--boh-mark-size, 260px);
  max-width: min(48vw, var(--boh-mark-size, 260px));
  max-height: min(48vw, var(--boh-mark-size, 260px));
}
@media (max-width: 640px) {
  .boh-hero-mark { margin-bottom: 12px; }
  .boh-hero-mark .boh-mark {
    width: min(56vw, var(--boh-mark-size, 260px));
    height: min(56vw, var(--boh-mark-size, 260px));
  }
}

@media (max-width: 900px) {
  .boh-header__title--icon-only,
  .boh-header__logo { --boh-logo-size: 84px; --boh-logo-box: 46px; }
  body.boh-scrolled .boh-header__title--icon-only,
  body.boh-scrolled .boh-header__logo { --boh-logo-size: 46px; }
}
@media (max-width: 640px) {
  .boh-header__title--icon-only,
  .boh-header__logo { --boh-logo-size: 68px; --boh-logo-box: 40px; }
  body.boh-scrolled .boh-header__title--icon-only,
  body.boh-scrolled .boh-header__logo { --boh-logo-size: 40px; }
}
@media (prefers-reduced-motion: reduce) {
  .boh-header__title--icon-only,
  .boh-header__logo { transition: none; }
}

/* Logo image */
.boh-header__brand .custom-logo-link {
  display: inline-flex; align-items: center;
}
.boh-header__brand img.custom-logo {
  max-height: 48px;
  height: 48px;
  width: auto;
  object-fit: contain;
  transition: filter .3s ease;
}
body:not(.boh-scrolled) .boh-header__brand img.custom-logo {
  filter: brightness(0) invert(1) drop-shadow(0 1px 4px rgba(0,0,0,0.3));
}

/* Nav UL - clean, single rule. The list is rendered by wp_nav_menu with
   menu_class="boh-nav__list". */
.boh-nav { flex: 1 1 auto; display: flex; justify-content: flex-end; }
.boh-nav__list {
  display: flex;
  align-items: center;
  gap: 6px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.boh-nav__list .boh-nav__rsvp-btn { margin-left: 10px; }
.boh-nav__list li {
  margin: 0; padding: 0; list-style: none;
}
.boh-nav__list li::before { display: none; }

/* Nav links - soft pill hover inside the glass bar */
.boh-nav__list a {
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.01em;
  color: var(--boh-ink);
  text-decoration: none;
  position: relative;
  padding: 9px 15px;
  display: inline-block;
  border-radius: 999px;
  transition: color .18s ease, background .18s ease;
}
.boh-nav__list li:not(.boh-nav__rsvp-btn) a:hover,
.boh-nav__list li:not(.boh-nav__rsvp-btn) a.is-active {
  color: var(--boh-magenta);
  background: rgba(208,20,130,0.08);
}
.boh-nav__list li:not(.boh-nav__rsvp-btn) a:focus-visible {
  outline: 2px solid var(--boh-magenta);
  outline-offset: 2px;
}

/* RSVP button - magenta pill (per July-2026 feedback: RSVP is now the CTA) */
.boh-nav__list .boh-nav__rsvp-btn a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--boh-magenta);
  color: #fff !important;
  padding: 9px 22px;
  border-radius: 999px;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
  transition: transform .18s ease, background .18s ease;
}
.boh-nav__list .boh-nav__rsvp-btn a:hover {
  background: var(--boh-magenta-deep, #C2005F);
  transform: translateY(-1px);
  color: #fff !important;
}
.boh-nav__list .boh-nav__rsvp-btn a::after { display: none; }

/* Mobile menu toggle (hamburger) */
.boh-nav__toggle {
  display: none;
  background: transparent;
  border: 0;
  cursor: pointer;
  padding: 8px;
  flex-direction: column;
  gap: 5px;
}
.boh-nav__toggle span {
  display: block;
  width: 22px; height: 2px;
  background: var(--boh-ink);
  border-radius: 2px;
  transition: background .25s ease;
}

@media (max-width: 880px) {
  .boh-nav { display: none; }
  /* Mobile menu - rounded white card floating under the pill */
  .boh-nav.is-open {
    display: flex;
    position: absolute;
    top: calc(100% + 10px);
    left: 16px;
    right: 16px;
    background: rgba(255,255,255,0.97);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(10,10,10,0.07);
    border-radius: 22px;
    box-shadow: 0 24px 60px -20px rgba(31,26,36,0.35);
    padding: 14px;
  }
  .boh-nav.is-open .boh-nav__list { flex-direction: column; align-items: stretch; gap: 4px; width: 100%; }
  .boh-nav.is-open .boh-nav__list a { display: block; text-align: center; padding: 12px; }
  .boh-nav.is-open .boh-nav__list .boh-nav__rsvp-btn { margin-left: 0; margin-top: 6px; }
  .boh-nav__toggle { display: inline-flex; }
  .boh-header__inner { padding: 8px 20px; }
  .boh-header__brand img.custom-logo { max-height: 38px; height: 38px; }
}
@media screen and (max-width: 782px) {
  body.admin-bar #masthead.boh-header {
    top: 46px;
  }
}

/* Header is fixed (position:fixed → removed from flow), so entry-content
   starts at top:0 and the header floats over it. No negative margin needed. */
.boh-main .entry-content {
  margin-top: 0;
}
.boh-main .entry-content > .wp-block-cover:first-child {
  padding-top: 0 !important;
  margin-top: 0 !important;
}
/* Non-hero pages: leave room for the fixed header. Pages opening with a
   full-bleed banner - a cover block or [boh_page_hero] - are excluded so
   the photo runs to the top and sits under the menu. */
/* `:first-child` was too literal. The block editor leaves an empty <p>
   wrapping each section comment, and once one of those became the first
   child this stopped matching on the home page - so a page that opens with
   a full-bleed hero got 96px of header padding anyway, showing as a band of
   white between the menu and the photo. Matching on the banner being a
   direct child at all is what was actually meant. */
.boh-main .entry-content:not(:has(> .wp-block-cover)):not(:has(> .boh-page-hero)) {
  margin-top: 0;
  padding-top: 96px;
}

/* ───────────────────────────────────────────────────────────────────
   BUTTONS
   ─────────────────────────────────────────────────────────────────── */
.wp-block-button__link,
.ast-button,
button[type="submit"],
input[type="submit"],
.button {
  font-family: 'Montserrat', system-ui, -apple-system, sans-serif;
  font-weight: 600 !important;
  font-size: 15px !important;
  letter-spacing: 0.01em !important;
  border-radius: 999px !important;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease !important;
  border: none !important;
}

/* Primary (filled) */
.wp-block-button:not(.is-style-outline) .wp-block-button__link {
  background: var(--boh-ink) !important;
  color: var(--boh-paper) !important;
  padding: 15px 30px !important;
  box-shadow: var(--boh-shadow-sm);
}
.wp-block-button:not(.is-style-outline) .wp-block-button__link:hover {
  background: var(--boh-plum) !important;
  transform: translateY(-2px);
  box-shadow: var(--boh-shadow-lg);
}

/* Ember variant (legacy class name) - now magenta from the logo */
.wp-block-button.is-style-ember .wp-block-button__link,
.boh-btn-ember {
  background: var(--boh-magenta) !important;
  color: #fff !important;
  padding: 15px 30px !important;
}
.wp-block-button.is-style-ember .wp-block-button__link:hover,
.boh-btn-ember:hover {
  background: var(--boh-magenta-deep) !important;
  color: #fff !important;
}

/* Yellow variant - bold sunshine CTA, black text */
.wp-block-button.is-style-yellow .wp-block-button__link,
.boh-btn-yellow {
  background: var(--boh-yellow) !important;
  color: var(--boh-ink) !important;
  padding: 15px 30px !important;
}
.wp-block-button.is-style-yellow .wp-block-button__link:hover,
.boh-btn-yellow:hover {
  background: var(--boh-yellow-deep) !important;
}

/* Outline (ghost) */
.wp-block-button.is-style-outline .wp-block-button__link {
  background: transparent !important;
  color: var(--boh-ink) !important;
  border: 1.5px solid var(--boh-ink) !important;
  padding: 13.5px 28.5px !important;
}
.wp-block-button.is-style-outline .wp-block-button__link:hover {
  background: var(--boh-ink) !important;
  color: var(--boh-paper) !important;
}

/* On the pink hero, outline stays dark ink (was white for dark hero) */
.wp-block-cover.boh-hero .wp-block-button.is-style-outline .wp-block-button__link {
  border-color: var(--boh-ink) !important;
  color: var(--boh-ink) !important;
  background: rgba(255,255,255,0.5) !important;
}
.wp-block-cover.boh-hero .wp-block-button.is-style-outline .wp-block-button__link:hover {
  background: var(--boh-ink) !important;
  color: var(--boh-paper) !important;
}

/* Legacy: dark hero outline (kept for any dark-cover blocks elsewhere) */
.wp-block-cover:not(.boh-hero) .wp-block-button.is-style-outline .wp-block-button__link {
  border-color: rgba(255,255,255,0.6) !important;
  color: #fff !important;
}
.wp-block-cover:not(.boh-hero) .wp-block-button.is-style-outline .wp-block-button__link:hover {
  background: #fff !important;
  color: var(--boh-ink) !important;
  border-color: #fff !important;
}

/* ───────────────────────────────────────────────────────────────────
   HERO - editorial, generous, textured
   ─────────────────────────────────────────────────────────────────── */
.wp-block-cover.alignfull,
.wp-block-cover.boh-hero {
  /* Pink fallback while slideshow images load; slides paint on top. */
  background: linear-gradient(180deg, #FDF2F8 0%, #FCE7F3 100%) !important;
  width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  min-height: 100vh !important;
  height: 100vh !important;
  /* Extra top padding = header height, so flex-centering happens in the
     viewport space BELOW the fixed header. Bottom padding clears the
     scroll cue (46px disc at bottom:28) so pinned CTAs sit above it. */
  padding: 140px 24px 104px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
}
@media (max-width: 640px) {
  .wp-block-cover.alignfull,
  .wp-block-cover.boh-hero { padding: 100px 20px 40px !important; }
}
/* Inner container holds the two-column hero grid (copy | brand mark).
   Wide cap so the asymmetric layout has room to breathe. */
.wp-block-cover.boh-hero .wp-block-cover__inner-container {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1560px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /* Fill the hero's content height so CTAs can pin to its bottom */
  flex: 1 1 auto;
  align-self: stretch;
}
/* Banner variant - used on the home page: image-only hero with a
   flower panel at top, and the copy/CTAs live in the next section
   below on a clean pink band. No text overlays on the flower. */
.wp-block-cover.boh-hero.boh-hero--banner {
  min-height: 52vh !important;
  height: 52vh !important;
  max-height: 620px !important;
  padding: 0 !important;
  align-items: stretch !important;
}
.wp-block-cover.boh-hero.boh-hero--banner .wp-block-cover__inner-container {
  padding: 0 !important;
}
.wp-block-cover.boh-hero.boh-hero--banner .boh-hero-dots {
  bottom: 20px !important;
  top: auto !important;
  right: 0 !important;
  left: 0 !important;
  transform: none !important;
  flex-direction: row !important;
}
/* Admin bar shrinks viewport by 32px - subtract so hero fits without a
   scrollbar just for that bar. */
body.admin-bar .wp-block-cover.boh-hero {
  min-height: calc(100vh - 32px) !important;
  height:     calc(100vh - 32px) !important;
}
@media (max-width: 782px) {
  body.admin-bar .wp-block-cover.boh-hero {
    min-height: calc(100vh - 46px) !important;
    height:     calc(100vh - 46px) !important;
  }
}

.wp-block-cover.boh-hero .boh-hero-slideshow,
.wp-block-cover.boh-hero .boh-hero-slide,
.wp-block-cover.boh-hero::after {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.wp-block-cover.boh-hero .boh-hero-slideshow {
  z-index: 0;
  overflow: hidden;
}

/* Each slide is a background image, `cover` so no pink stripes appear.
   The hero itself is short (640–720px) so the crop is minimal - subjects
   still fit. Position bias keeps faces near the top-third of the frame. */
.wp-block-cover.boh-hero .boh-hero-slide {
  opacity: 0;
  background-position: center 35%;
  background-size: cover;
  background-repeat: no-repeat;
  background-color: #FCE7F3;
  filter: saturate(0.92) contrast(0.98) brightness(1.02);
  transform: scale(1.02);
  transition: opacity 1.2s ease-in-out, transform 6s ease-out;
}
/* JS toggles .is-active on exactly one slide at a time */
.wp-block-cover.boh-hero .boh-hero-slide.is-active {
  opacity: 1;
  transform: scale(1.04);
}
/* Reduced-motion: freeze on slide 1, no transitions */
@media (prefers-reduced-motion: reduce) {
  .wp-block-cover.boh-hero .boh-hero-slide {
    transition: none;
    transform: none;
  }
  .wp-block-cover.boh-hero .boh-hero-slide--1 {
    opacity: 0.95;
  }
}

/* Pagination dots - right side, vertically stacked. */
.wp-block-cover.boh-hero .boh-hero-dots {
  position: absolute !important;
  right: 24px !important;
  top: 50% !important;
  left: auto !important;
  bottom: auto !important;
  width: auto !important;
  transform: translateY(-50%) !important;
  z-index: 6 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 12px !important;
  pointer-events: none;
  margin: 0 !important;
  padding: 0 !important;
}
.wp-block-cover.boh-hero .boh-hero-dot {
  pointer-events: auto;
  width: 14px !important;
  height: 14px !important;
  padding: 0 !important;
  border: 2px solid #fff !important;
  border-radius: 50% !important;
  background: rgba(31,26,36,0.55) !important;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0,0,0,0.35);
  transition: background .2s ease, border-color .2s ease, transform .2s ease;
  flex: 0 0 auto;
}
.wp-block-cover.boh-hero .boh-hero-dot:hover {
  border-color: var(--boh-magenta);
  transform: scale(1.15);
}
.wp-block-cover.boh-hero .boh-hero-dot.is-active {
  background: var(--boh-magenta);
  border-color: var(--boh-magenta);
  transform: scale(1.15);
}

.wp-block-cover.boh-hero .boh-hero-slide--1 {
  background-image: url('/wp-content/uploads/2026/06/IMG_5086-scaled-e1728407855454-1024x657.jpg');
  animation-delay: 0s; opacity: 0.9; /* first slide is always visible so hero has an image on load */
}
.wp-block-cover.boh-hero .boh-hero-slide--2 {
  background-image: url('/wp-content/uploads/2026/06/RC_BoH_112722_181108_LR-13-1024x683.jpg');
  animation-delay: 12s;
}
.wp-block-cover.boh-hero .boh-hero-slide--3 {
  background-image: url('/wp-content/uploads/2026/06/RC_108462_BasketsofHopeEvent-75-1024x681.jpg');
  animation-delay: 24s;
}
.wp-block-cover.boh-hero .boh-hero-slide--4 {
  background-image: url('/wp-content/uploads/2026/06/RC_BasketofHope_111123_Inital_20171108-15-1024x681.jpg');
  animation-delay: 36s;
}
.wp-block-cover.boh-hero .boh-hero-slide--5 {
  background-image: url('/wp-content/uploads/2026/06/IMG_2331-1024x768.jpg');
  animation-delay: 48s;
}

/* Readable wash: strong soft-white radial behind the text area so dark
   ink stays legible on top of the flower image, plus a pink fade at
   the bottom for a clean handoff into the content section below. */
.wp-block-cover.boh-hero::after {
  content: '';
  z-index: 1;
  background:
    radial-gradient(72% 58% at 50% 55%, rgba(255,255,255,0.72) 0%, rgba(255,255,255,0.38) 45%, rgba(255,255,255,0) 78%),
    linear-gradient(180deg, transparent 0%, transparent 55%, rgba(253,231,241,0.60) 100%),
    linear-gradient(180deg, rgba(208,20,130,0.05) 0%, rgba(208,20,130,0.12) 100%);
}
/* Dark ink text over the new light hero overlay. Selectors are extra
   specific to beat wp-block-cover's default light-text rules. */
.wp-block-cover.boh-hero,
.wp-block-cover.boh-hero.is-light,
.wp-block-cover.boh-hero.is-dark {
  color: var(--boh-ink) !important;
}
.wp-block-cover.boh-hero .wp-block-cover__inner-container,
.wp-block-cover.boh-hero .wp-block-cover__inner-container *:not(em):not(strong):not(a) {
  color: var(--boh-ink) !important;
}
.wp-block-cover.boh-hero .wp-block-cover__inner-container h1,
.wp-block-cover.boh-hero .wp-block-cover__inner-container h2,
.wp-block-cover.boh-hero .wp-block-cover__inner-container h1.wp-block-heading,
.wp-block-cover.boh-hero .wp-block-cover__inner-container h2.wp-block-heading,
.wp-block-cover.boh-hero .wp-block-cover__inner-container p,
.wp-block-cover.boh-hero .wp-block-cover__inner-container .wp-block-paragraph {
  color: var(--boh-ink) !important;
  text-shadow: none !important;
}
/* Yellow keyword highlight inside hero headings */
.wp-block-cover.boh-hero .wp-block-cover__inner-container h1 em,
.wp-block-cover.boh-hero .wp-block-cover__inner-container h2 em {
  color: var(--boh-magenta) !important;
  font-style: normal;
}
.wp-block-cover.boh-hero .boh-eyebrow {
  background: rgba(255,255,255,0.85) !important;
  color: var(--boh-plum) !important;
  border-color: rgba(107,45,140,0.35) !important;
}
/* Kill the dim overlay span - we don't need WordPress's default dark
   overlay on top of our own light pink wash. */
.wp-block-cover.boh-hero > .wp-block-cover__background {
  display: none !important;
}

/* (Slideshow rotation is JS-driven; no keyframes needed.) */
/* Inner container: natural content height, perfectly centered both
   axes inside the hero. Max-width caps line length; margin auto keeps
   it dead-center of the full-viewport hero. */
.wp-block-cover.boh-hero .wp-block-cover__inner-container {
  position: relative !important;
  z-index: 5 !important;
  width: 100% !important;
  max-width: 900px !important;
  margin: 0 auto !important;
  height: auto !important;
  min-height: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  text-align: center !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}
.wp-block-cover.boh-hero .wp-block-cover__background {
  z-index: 0 !important;
}
.wp-block-cover.boh-hero > :not(.wp-block-cover__background):not(.boh-hero-slideshow) {
  position: relative;
  z-index: 5;
}
/* Content blocks INSIDE the inner-container keep their own padding so text
   doesn't slam against viewport edges */
.wp-block-cover.boh-hero .wp-block-cover__inner-container > :not(.boh-stats) {
  padding-left: 24px;
  padding-right: 24px;
  max-width: 980px;
  box-sizing: border-box;
  position: relative;
  z-index: 4;
}

/* Subtle paper-noise texture */
.wp-block-cover.alignfull::before {
  content: '';
  position: absolute; inset: 0;
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 0.95  0 0 0 0 0.88  0 0 0 0.06 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  opacity: 0.24;
  pointer-events: none;
  mix-blend-mode: overlay;
}

.wp-block-cover__inner-container {
  position: relative;
  z-index: 1;
  max-width: 980px !important;
  padding: 80px 24px !important;
}

/* Hero heading - high specificity to beat Astra's default heading color */
.entry-content .wp-block-cover h1,
.entry-content .wp-block-cover h1.wp-block-heading,
.entry-content .wp-block-cover .wp-block-heading,
.wp-block-cover h1,
.wp-block-cover h1.wp-block-heading,
.wp-block-cover .wp-block-heading {
  font-family: 'Montserrat', system-ui, -apple-system, sans-serif;
  font-weight: 800 !important;
  font-size: clamp(28px, 4.5vw, var(--boh-text-6xl)) !important;
  letter-spacing: -0.03em !important;
  line-height: 1.02 !important;
  color: #FFFFFF !important;
  opacity: 1 !important;
  text-shadow: 0 4px 28px rgba(0,0,0,0.55) !important;
  margin-bottom: 24px !important;
  text-transform: none;
}
/* Cover headings also default to white for any inner h2/h3 */
.wp-block-cover :is(h1, h2, h3, p):not(em) { color: #FFFFFF !important; }

.entry-content .wp-block-cover h1 em,
.entry-content .wp-block-cover .wp-block-heading em,
.wp-block-cover h1 em,
.wp-block-cover .wp-block-heading em {
  font-style: normal !important;
  color: var(--boh-yellow) !important;
  font-weight: 900 !important;
}

.wp-block-cover p {
  color: rgba(255,255,255,0.90) !important;
  font-size: clamp(13px, 1.2vw, 15px) !important;
  line-height: 1.6 !important;
  max-width: 640px;
  margin-left: auto !important;
  margin-right: auto !important;
  opacity: 1 !important;
  text-shadow: 0 2px 18px rgba(0,0,0,0.55);
}

.wp-block-cover.boh-hero h1 + p {
  font-weight: 700 !important;
  color: rgba(255,255,255,0.95) !important;
}

/* Hero buttons spacing */
.wp-block-cover .wp-block-buttons {
  margin-top: 28px !important;
  gap: 14px !important;
  opacity: 1 !important;
  filter: none !important;
}

.boh-hero-brandmark {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: fit-content;
  max-width: calc(100vw - 48px);
  margin: 0 auto 14px;
  padding: 0;
  border-radius: 0;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  opacity: 1 !important;
}

.boh-hero-logo {
  display: block;
  width: clamp(60px, 5.8vw, 92px);
  height: auto;
  filter:
    drop-shadow(0 1px 1px rgba(255,255,255,0.28))
    drop-shadow(0 14px 24px rgba(0,0,0,0.55));
}

.boh-hero-initiative {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: rgba(20,20,20,0.78) !important;
  font-family: 'Montserrat', system-ui, -apple-system, sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none !important;
  text-shadow: none;
}

.boh-hero-initiative:hover {
  color: var(--boh-magenta) !important;
}

.wp-block-cover .boh-eyebrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
}

.wp-block-cover .boh-eyebrow .boh-hero-initiative {
  display: inline;
  color: #fff !important;
  font-size: inherit;
  font-weight: 800;
  letter-spacing: inherit;
  line-height: inherit;
  text-decoration: none !important;
  text-shadow: none;
}

.wp-block-cover .boh-eyebrow .boh-hero-initiative:hover {
  color: var(--boh-yellow) !important;
}

/* Eyebrow tag - small uppercase tag, magenta on light, yellow on dark hero */
.boh-eyebrow {
  display: inline-block;
  font-family: 'Montserrat', system-ui, -apple-system, sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--boh-magenta);
  margin-bottom: 20px;
  padding: 6px 14px;
  border: 1.5px solid var(--boh-magenta);
  border-radius: 999px;
  background: var(--boh-magenta-soft);
}
.wp-block-cover .boh-eyebrow {
  color: var(--boh-yellow);
  border-color: rgba(249, 209, 53,0.70);
  background: rgba(10,10,10,0.30);
}

/* ───────────────────────────────────────────────────────────────────
   STATS BAR
   ─────────────────────────────────────────────────────────────────── */
/* Stats lives INSIDE the hero cover block, pinned to the very bottom,
   full viewport width - like a hero footer strip. */
.wp-block-cover.boh-hero .boh-stats {
  position: absolute !important;
  bottom: -1px !important;   /* tuck flush to avoid sub-pixel gap */
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  z-index: 3;
  display: block !important;
  /* Override any reveal-animation initial offset that may leave a visual gap */
  opacity: 1 !important;
  transform: none !important;
}
.wp-block-cover.boh-hero .boh-stats.boh-reveal-stagger > * {
  opacity: 1 !important;
  transform: none !important;
}
/* Live WordPress wraps group contents in .wp-block-group__inner-container.
   Make that wrapper transparent/full-width so the columns can become the
   actual edge-to-edge hero footer strip. */
.wp-block-cover.boh-hero .boh-stats > .wp-block-group__inner-container {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  display: block !important;
}
/* The inner columns - full-width strip with translucent dark band, no rounded corners */
.wp-block-cover.boh-hero .boh-stats > .wp-block-columns,
.wp-block-cover.boh-hero .boh-stats > .wp-block-group__inner-container > .wp-block-columns {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  background: rgba(10,10,10,0.44) !important;
  backdrop-filter: blur(14px) saturate(130%) !important;
  -webkit-backdrop-filter: blur(14px) saturate(130%) !important;
  border: none !important;
  border-top: 1px solid rgba(255,255,255,0.12) !important;
  border-radius: 0 !important;
  padding: 14px 22px !important;
  box-shadow: none !important;
  display: flex !important;
  flex-direction: row !important;
  gap: 0 !important;
}
/* The 4 stat columns inside */
.wp-block-cover.boh-hero .boh-stats .wp-block-column {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  padding: 8px !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
}
/* Tighter h2 sizing inside the stats card so 4 numbers fit on small screens */
.wp-block-cover.boh-hero .boh-stats h2 {
  font-size: clamp(18px, 2.8vw, 32px) !important;
  margin: 0 0 4px !important;
  color: #fff !important;
}
.wp-block-cover.boh-hero .boh-stats p {
  font-size: 9px !important;
  letter-spacing: 0.11em !important;
  margin: 0 !important;
  color: rgba(255,255,255,0.72) !important;
}
.wp-block-group.has-primary-background-color,
.wp-block-columns.has-primary-background-color {
  background: transparent !important;
}
.boh-stats > .wp-block-columns,
.boh-stats > .wp-block-group__inner-container > .wp-block-columns,
.boh-stats .wp-block-columns {
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  background: rgba(20,20,20,0.55);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--boh-r-lg);
  padding: 32px 16px !important;
  box-shadow: 0 24px 60px -12px rgba(0,0,0,0.55);
}
/* Stats overlaps the dark hero - text must be light */
.boh-stats h2 { color: #fff !important; }
.boh-stats p {
  color: rgba(255,255,255,0.78) !important;
}
/* Hairline dividers between stat columns - light on dark */
.boh-stats .wp-block-column:not(:last-child)::after {
  background: rgba(255,255,255,0.12) !important;
}

.boh-stats h2,
.wp-block-group.has-primary-background-color h2,
.wp-block-columns.has-primary-background-color h2 {
  font-family: 'Montserrat', system-ui, -apple-system, sans-serif;
  font-size: clamp(26px, 3.6vw, 46px) !important;
  font-weight: 500 !important;
  font-variation-settings: 'opsz' 144;
  color: var(--boh-plum) !important;
  border: none !important;
  border-left: none !important;
  padding-left: 0 !important;
  margin: 0 0 6px 0 !important;
  line-height: 1 !important;
  letter-spacing: -0.03em !important;
}

/* [boh_stats] shortcode output - 4-cell grid, centered inside a dark
   full-bleed group. Replaces the older column-based markup. */
.boh-stats {
  max-width: 1160px;
  margin: 0 auto !important;
  padding: 24px !important;
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 32px 24px !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
@media (max-width: 900px) {
  .boh-stats { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 480px) {
  .boh-stats { grid-template-columns: 1fr !important; }
}
.boh-stats__cell {
  text-align: center;
  padding: 12px 8px;
  border-right: 1px solid rgba(255,255,255,0.12);
}
.boh-stats__cell:last-child { border-right: 0; }
@media (max-width: 900px) {
  .boh-stats__cell { border-right: 0; }
}
.boh-stats__cell h2 {
  font-family: 'Montserrat', system-ui, -apple-system, sans-serif !important;
  font-size: clamp(36px, 5vw, 64px) !important;
  font-weight: 800 !important;
  color: var(--boh-magenta) !important;
  margin: 0 0 8px !important;
  line-height: 1 !important;
  letter-spacing: -0.02em !important;
}
.boh-stats__label {
  color: rgba(255,255,255,0.75) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.boh-stats p,
.wp-block-group.has-primary-background-color p,
.wp-block-columns.has-primary-background-color p {
  color: var(--boh-ink-soft) !important;
  font-family: 'Montserrat', system-ui, -apple-system, sans-serif;
  font-size: 12px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.14em !important;
  margin: 0 !important;
}

.boh-stats .wp-block-column,
.wp-block-group.has-primary-background-color .wp-block-column,
.wp-block-columns.has-primary-background-color .wp-block-column {
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  border: none !important;
  padding: 16px !important;
  text-align: center !important;
  position: relative;
}

/* Vertical hairlines between stat columns */
.boh-stats .wp-block-column:not(:last-child)::after,
.wp-block-group.has-primary-background-color .wp-block-column:not(:last-child)::after {
  content: '';
  position: absolute;
  right: -1px; top: 20%; bottom: 20%;
  width: 1px;
  background: var(--boh-rule);
}
.boh-stats .wp-block-column:hover,
.wp-block-group.has-primary-background-color .wp-block-column:hover {
  transform: none !important;
  box-shadow: none !important;
}

/* ───────────────────────────────────────────────────────────────────
   HEADINGS in content
   ─────────────────────────────────────────────────────────────────── */
.entry-content > h2,
.entry-content > .wp-block-heading {
  color: var(--boh-ink);
  font-size: clamp(21px, 2.6vw, var(--boh-text-3xl));
  margin-top: 72px;
  margin-bottom: 20px;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.wp-block-heading.has-text-align-center,
h2.has-text-align-center {
  text-align: center !important;
  color: var(--boh-ink) !important;
  font-size: clamp(21px, 2.6vw, var(--boh-text-3xl)) !important;
  margin-bottom: 12px !important;
}

/* Section subhead (paragraph after a centered h2) */
h2.has-text-align-center + p,
.wp-block-heading.has-text-align-center + p {
  color: var(--boh-ink-mute) !important;
  text-align: center;
  max-width: 640px;
  margin: 0 auto 48px !important;
  font-size: var(--boh-text-lg);
}

.entry-content h3 {
  color: var(--boh-ink);
  font-size: var(--boh-text-xl);
  margin-top: 24px;
  margin-bottom: 10px;
  font-weight: 600;
}

/* Italicized accent words in headings */
.entry-content h2 em,
.entry-content .wp-block-heading em { color: var(--boh-plum); font-weight: 500; }

/* ───────────────────────────────────────────────────────────────────
   CARDS - column-as-card
   ─────────────────────────────────────────────────────────────────── */
.entry-content .wp-block-columns:not(.has-primary-background-color):not(.boh-stats):not(.boh-bare) {
  gap: 24px;
}

.entry-content .wp-block-columns:not(.has-primary-background-color):not(.boh-stats):not(.boh-bare) .wp-block-column {
  background: #fff;
  border: 1px solid var(--boh-rule);
  border-radius: var(--boh-r-md);
  padding: 32px 28px;
  box-shadow: var(--boh-shadow-sm);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  /* Center all column content vertically + horizontally */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.entry-content .wp-block-columns:not(.has-primary-background-color):not(.boh-stats):not(.boh-bare) .wp-block-column > * {
  text-align: center;
}

.entry-content .wp-block-columns:not(.has-primary-background-color):not(.boh-stats):not(.boh-bare) .wp-block-column:hover {
  transform: translateY(-3px);
  box-shadow: var(--boh-shadow-md);
  border-color: var(--boh-plum-soft);
}

.wp-block-column h2,
.wp-block-column h3 {
  font-size: var(--boh-text-xl) !important;
  color: var(--boh-ink) !important;
  border: none !important;
  border-left: none !important;
  padding-left: 0 !important;
  margin-top: 8px !important;
  margin-bottom: 10px !important;
  font-weight: 600;
}

/* ───────────────────────────────────────────────────────────────────
   STEP CARDS - numbered serif markers
   ─────────────────────────────────────────────────────────────────── */
.boh-steps .wp-block-column {
  position: relative;
  text-align: center !important;
  display: flex !important;
  flex-direction: column;
  align-items: center;
}

.boh-steps .wp-block-column h3 {
  text-align: center !important;
  font-family: 'Montserrat', system-ui, -apple-system, sans-serif;
  font-size: var(--boh-text-lg) !important;
  margin-top: 0 !important;
  font-weight: 700 !important;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.boh-steps .wp-block-column h3::before {
  display: inline-block;
  font-family: 'Montserrat', system-ui, -apple-system, sans-serif;
  font-style: normal;
  font-weight: 900;
  font-size: 22px;
  letter-spacing: -0.02em;
  color: var(--boh-ink);
  background: var(--boh-yellow);
  line-height: 1;
  padding: 12px 16px;
  margin: 0 auto 16px;
  border-radius: 12px;
  content: attr(data-step);
}

/* Auto step numbers if no data-step attribute */
.boh-steps .wp-block-column:nth-child(1) h3::before { content: '01.'; }
.boh-steps .wp-block-column:nth-child(2) h3::before { content: '02.'; }
.boh-steps .wp-block-column:nth-child(3) h3::before { content: '03.'; }
.boh-steps .wp-block-column:nth-child(4) h3::before { content: '04.'; }
.boh-steps .wp-block-column:nth-child(5) h3::before { content: '05.'; }

.boh-steps .wp-block-column p {
  text-align: center !important;
  color: var(--boh-ink-soft);
}

/* ───────────────────────────────────────────────────────────────────
   BLOCKQUOTES - editorial pull quotes
   ─────────────────────────────────────────────────────────────────── */
.wp-block-quote {
  background: #fff !important;
  border: 1px solid var(--boh-rule) !important;
  border-left: none !important;
  border-radius: var(--boh-r-md) !important;
  padding: 48px 32px 32px !important;
  margin: 24px 0 !important;
  position: relative;
  box-shadow: var(--boh-shadow-sm);
  text-align: center;
}
.wp-block-quote::before {
  content: '\201C';
  position: absolute;
  top: 8px; left: 50%;
  transform: translateX(-50%);
  font-family: 'Montserrat', system-ui, -apple-system, sans-serif;
  font-size: 50px;
  line-height: 1;
  color: var(--boh-magenta);
  opacity: 0.85;
  font-weight: 800;
}
.wp-block-quote p {
  font-family: 'Montserrat', system-ui, -apple-system, sans-serif;
  font-style: normal !important;
  font-weight: 500 !important;
  font-size: 17px !important;
  line-height: 1.55 !important;
  color: var(--boh-ink) !important;
  margin: 8px 0 14px !important;
  position: relative;
  text-align: center;
}
.wp-block-quote cite {
  font-family: 'Montserrat', system-ui, -apple-system, sans-serif;
  font-style: normal !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em !important;
  color: var(--boh-magenta) !important;
  display: block !important;
  text-transform: none !important;
  text-align: center;
}
.wp-block-quote cite::before {
  content: '- ';
}

/* ───────────────────────────────────────────────────────────────────
   LISTS, DETAILS
   ─────────────────────────────────────────────────────────────────── */
.entry-content ul li,
.entry-content ol li {
  margin-bottom: 10px;
  line-height: 1.75;
}

.entry-content ul { list-style: none; padding-left: 0; }
.entry-content ul li {
  padding-left: 28px;
  position: relative;
}
.entry-content ul li::before {
  content: '';
  position: absolute;
  left: 4px; top: 12px;
  width: 8px; height: 8px;
  background: var(--boh-ember);
  border-radius: 50%;
}

/* Numbered (ordered) - editorial serif numerals */
.entry-content ol:not(.boh-agenda__list) { counter-reset: boh-ol; list-style: none; padding-left: 0; }
.entry-content ol:not(.boh-agenda__list) li {
  counter-increment: boh-ol;
  padding-left: 44px;
  position: relative;
  min-height: 36px;
}
.entry-content ol:not(.boh-agenda__list) li::before {
  content: counter(boh-ol, decimal-leading-zero);
  position: absolute;
  left: 0; top: -3px;
  font-family: 'Montserrat', system-ui, -apple-system, sans-serif;
  font-style: italic;
  font-size: 19px;
  font-weight: 500;
  color: var(--boh-plum);
}

/* Details / FAQ accordion */
.wp-block-details {
  background: #fff;
  border: 1px solid var(--boh-rule);
  border-radius: var(--boh-r-md);
  padding: 0 !important;
  margin-bottom: 12px;
  overflow: hidden;
  transition: box-shadow .2s ease, border-color .2s ease;
}
.wp-block-details[open] {
  border-color: var(--boh-plum-soft);
  box-shadow: var(--boh-shadow-sm);
}
.wp-block-details summary {
  padding: 20px 28px;
  font-family: 'Montserrat', system-ui, -apple-system, sans-serif;
  font-weight: 600;
  font-size: 16px;
  color: var(--boh-ink);
  cursor: pointer;
  list-style: none;
  position: relative;
  padding-right: 56px;
  transition: color .15s ease;
}
.wp-block-details summary::-webkit-details-marker { display: none; }
.wp-block-details summary::after {
  content: '+';
  position: absolute;
  right: 24px; top: 50%;
  transform: translateY(-50%);
  font-size: 17px;
  color: var(--boh-plum);
  font-weight: 300;
  transition: transform .25s ease;
}
.wp-block-details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.wp-block-details summary:hover { color: var(--boh-plum); }
.wp-block-details p {
  padding: 0 28px 24px !important;
  color: var(--boh-ink-soft);
  margin: 0 !important;
}

/* ───────────────────────────────────────────────────────────────────
   GROUPS (light sections)
   ─────────────────────────────────────────────────────────────────── */
/* Light-backgrounded groups get a card radius - but full-bleed bands stay
   edge-to-edge so they look like flush sections, not floating cards. */
.wp-block-group.has-background {
  border-radius: var(--boh-r-lg);
}
.wp-block-group.alignfull.has-background,
.wp-block-group.alignfull {
  border-radius: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
}
.wp-block-group[style*="FAF8FF"],
.wp-block-group[style*="faf8ff"] {
  background: var(--boh-paper-2) !important;
}

/* Section spacing */
.entry-content > .wp-block-cover + * { margin-top: 0 !important; }
.entry-content > .wp-block-group { margin-top: 0; margin-bottom: 0; }

/* ───────────────────────────────────────────────────────────────────
   BoH-specific components (rendered via shortcodes)
   ─────────────────────────────────────────────────────────────────── */

/* - Countdown - */
.boh-countdown {
  display: flex;
  justify-content: center;
  gap: 18px;
  margin: 24px 0 36px;
  flex-wrap: wrap;
}
.boh-countdown__unit {
  background: #fff;
  border: 1px solid var(--boh-rule);
  border-radius: var(--boh-r-md);
  padding: 16px 22px;
  min-width: 96px;
  text-align: center;
  box-shadow: var(--boh-shadow-sm);
}
.boh-countdown__num {
  display: block;
  font-family: 'Montserrat', system-ui, -apple-system, sans-serif;
  font-weight: 500;
  font-size: 24px;
  color: var(--boh-plum);
  line-height: 1;
  letter-spacing: -0.02em;
}
.boh-countdown__label {
  display: block;
  margin-top: 6px;
  font-family: 'Montserrat', system-ui, -apple-system, sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--boh-ink-mute);
}
.boh-countdown--live .boh-countdown__num { color: var(--boh-ember); }

.wp-block-cover.boh-hero .boh-countdown {
  gap: 6px;
  margin: 12px 0 0 !important;
  padding-left: 24px;
  padding-right: 24px;
  max-width: 520px;
  position: relative;
  z-index: 4;
}
.wp-block-cover.boh-hero .boh-countdown__unit {
  min-width: 56px;
  padding: 7px 9px;
  border-color: rgba(255,255,255,0.12);
  background: rgba(10,10,10,0.24);
  box-shadow: none;
  backdrop-filter: blur(12px) saturate(150%);
  -webkit-backdrop-filter: blur(12px) saturate(150%);
}
.wp-block-cover.boh-hero .boh-countdown__num {
  font-size: 15px;
  font-weight: 700;
  color: rgba(255,255,255,0.92);
}
.wp-block-cover.boh-hero .boh-countdown__label {
  margin-top: 4px;
  font-size: 7px;
  letter-spacing: 0.11em;
  color: rgba(255,255,255,0.62);
}

/* - Impact calculator - */
.boh-impact {
  background: #fff;
  border: 1px solid var(--boh-rule);
  border-radius: var(--boh-r-lg);
  padding: 40px;
  margin: 32px auto;
  max-width: 880px;
  box-shadow: var(--boh-shadow-md);
  text-align: center;
}
.boh-impact__items { justify-content: center; }
.boh-impact__result { text-align: center; }
.boh-impact__cta {
  margin-left: auto !important;
  margin-right: auto !important;
}
.boh-impact__eyebrow {
  font-family: 'Montserrat', system-ui, -apple-system, sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--boh-magenta);
  margin-bottom: 8px;
  text-align: center;
}
.boh-impact__title {
  font-family: 'Montserrat', system-ui, -apple-system, sans-serif;
  font-size: 21px;
  font-weight: 700;
  margin: 0 0 24px !important;
  color: var(--boh-ink);
  letter-spacing: -0.02em;
  text-align: center;
}
.boh-impact__amounts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 10px;
  margin-bottom: 24px;
}
.boh-impact__btn {
  background: var(--boh-paper-2);
  color: var(--boh-ink);
  border: 1.5px solid transparent;
  border-radius: var(--boh-r-md);
  padding: 16px 8px;
  font-family: 'Montserrat', system-ui, -apple-system, sans-serif;
  font-size: 19px;
  font-weight: 500;
  cursor: pointer;
  transition: all .15s ease;
}
.boh-impact__btn:hover {
  border-color: var(--boh-plum);
  background: #fff;
  transform: translateY(-1px);
}
.boh-impact__btn.is-active {
  background: var(--boh-ink);
  color: var(--boh-paper);
  border-color: var(--boh-ink);
}
.boh-impact__result {
  background: var(--boh-paper-2);
  border-radius: var(--boh-r-md);
  padding: 24px 28px;
  margin-top: 8px;
  border-top: 3px solid var(--boh-magenta);
  text-align: center;
}
.boh-impact__result-num {
  font-family: 'Montserrat', system-ui, -apple-system, sans-serif;
  font-size: 30px;
  font-weight: 800;
  color: var(--boh-magenta);
  line-height: 1;
  display: block;
  letter-spacing: -0.025em;
}
.boh-impact__result-text {
  font-family: 'Montserrat', system-ui, -apple-system, sans-serif;
  font-size: 16px;
  color: var(--boh-ink-soft);
  margin-top: 8px;
  line-height: 1.5;
}
.boh-impact__items {
  margin-top: 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.boh-impact__chip {
  font-size: 12px;
  background: #fff;
  border: 1px solid var(--boh-rule);
  border-radius: 999px;
  padding: 5px 12px;
  color: var(--boh-ink-soft);
  font-weight: 500;
}
.boh-impact__cta {
  display: inline-block;
  background: var(--boh-ember);
  color: #fff !important;
  font-family: 'Montserrat', system-ui, -apple-system, sans-serif;
  font-weight: 600;
  font-size: 15px;
  padding: 14px 28px;
  border-radius: 999px;
  text-decoration: none !important;
  margin-top: 20px;
  transition: all .15s ease;
}
.boh-impact__cta:hover {
  background: var(--boh-ember-deep);
  transform: translateY(-1px);
  box-shadow: var(--boh-shadow-md);
}

/* - Payment transparency bar - */
.boh-transparency {
  background: transparent;
  padding: 0;
  margin: 0 auto;
  max-width: 980px;
  text-align: center;
}
.boh-transparency__title {
  font-family: 'Montserrat', system-ui, -apple-system, sans-serif;
  font-weight: 700;
  font-size: clamp(21px, 2.6vw, 26px);
  margin: 0 0 8px !important;
  color: var(--boh-ink);
  letter-spacing: -0.02em;
  text-align: center;
}
.boh-transparency__sub {
  color: var(--boh-ink-mute);
  font-size: 15px;
  margin: 0 auto 32px !important;
  max-width: 560px;
  text-align: center;
}
.boh-transparency__bar {
  display: flex;
  height: 16px;
  border-radius: 999px;
  overflow: hidden;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.06);
  margin-bottom: 20px;
}
.boh-transparency__seg {
  height: 100%;
  position: relative;
  transition: filter .15s ease;
}
.boh-transparency__seg:hover { filter: brightness(0.92); }
.boh-transparency__seg--program  { background: var(--boh-magenta); }
.boh-transparency__seg--logistics { background: var(--boh-yellow); }
.boh-transparency__seg--overhead  { background: var(--boh-ink); }

.boh-transparency__legend {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 20px 24px;
  max-width: 760px;
  margin: 0 auto;
  text-align: left;
}
.boh-transparency__item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.boh-transparency__dot {
  width: 12px; height: 12px;
  border-radius: 50%;
  margin-top: 4px;
  flex-shrink: 0;
}
.boh-transparency__pct {
  font-family: 'Montserrat', system-ui, -apple-system, sans-serif;
  font-size: 19px;
  font-weight: 500;
  color: var(--boh-ink);
  letter-spacing: -0.01em;
  display: block;
}
.boh-transparency__label {
  font-size: 13px;
  color: var(--boh-ink-soft);
  margin-top: 2px;
}

.boh-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 20px 28px;
  align-items: center;
  justify-content: center;
  padding: 22px 24px;
  margin: 28px 0;
  border-top: 1px solid var(--boh-rule);
  border-bottom: 1px solid var(--boh-rule);
}
.boh-trust__item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--boh-ink-soft);
  font-weight: 500;
}
.boh-trust__item svg {
  width: 18px; height: 18px;
  color: var(--boh-moss);
  flex-shrink: 0;
}

/* - RSVP form - */
/* Same board treatment as the Donate and Sponsor forms (Aug-2026
   feedback: the RSVP form should be framed like the others). */
.boh-rsvp {
  background: #FFFDF4;
  border: 2px solid rgba(220, 179, 29, 0.45);
  border-radius: 28px;
  padding: 48px clamp(20px, 5vw, 56px) 56px;
  margin: 8px auto 24px;
  max-width: 960px;
  box-shadow: 0 14px 36px rgba(31, 26, 36, 0.08);
}
@media (max-width: 720px) {
  .boh-rsvp { border-radius: 20px; }
}
.boh-rsvp__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 28px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--boh-rule);
}
.boh-rsvp__title {
  font-family: 'Montserrat', system-ui, -apple-system, sans-serif;
  font-size: 21px;
  font-weight: 700;
  margin: 0 !important;
  color: var(--boh-ink);
  letter-spacing: -0.02em;
  text-align: center;
}
.boh-spots {
  display: flex;
  align-items: center;
  gap: 10px;
}
.boh-spots__dots {
  display: flex;
  gap: 4px;
}
.boh-spots__dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--boh-rule);
}
.boh-spots__dot.is-taken { background: var(--boh-ember); }
.boh-spots__label {
  font-size: 13px;
  font-weight: 600;
  color: var(--boh-ink-soft);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.boh-rsvp .wpcf7-form-control-wrap { display: block; margin-bottom: 4px; }
.boh-rsvp label {
  display: block;
  margin-bottom: 18px;
  font-size: 13px;
  font-weight: 600;
  color: var(--boh-ink);
  letter-spacing: 0.02em;
}
.boh-rsvp label .req { color: var(--boh-ember); margin-left: 2px; }

/* - Sticky give bar - */
.boh-sticky {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%) translateY(120%);
  background: var(--boh-ink);
  color: var(--boh-paper);
  padding: 12px 14px 12px 22px;
  border-radius: 999px;
  box-shadow: 0 12px 40px rgba(31,26,36,0.25);
  display: flex;
  align-items: center;
  gap: 18px;
  z-index: 999;
  transition: transform .35s cubic-bezier(.2,.8,.2,1);
  max-width: calc(100vw - 32px);
}
.boh-sticky.is-visible { transform: translateX(-50%) translateY(0); }
.boh-sticky__text {
  font-family: 'Montserrat', system-ui, -apple-system, sans-serif;
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.boh-sticky__text strong { color: var(--boh-ember); font-weight: 600; }
.boh-sticky__btns { display: flex; gap: 8px; flex-shrink: 0; }
.boh-sticky__btn {
  display: inline-block;
  background: var(--boh-ember);
  color: #fff !important;
  font-family: 'Montserrat', system-ui, -apple-system, sans-serif;
  font-size: 13px;
  font-weight: 600;
  padding: 9px 18px;
  border-radius: 999px;
  text-decoration: none !important;
  transition: background .15s ease, transform .15s ease;
}
.boh-sticky__btn:hover { background: var(--boh-ember-deep); transform: translateY(-1px); }
.boh-sticky__btn--ghost {
  background: transparent;
  border: 1px solid rgba(251,248,241,0.3);
  color: var(--boh-paper) !important;
}
.boh-sticky__btn--ghost:hover { background: rgba(251,248,241,0.08); border-color: var(--boh-paper); }
.boh-sticky__close {
  background: none; border: none; color: rgba(251,248,241,0.6);
  font-size: 18px; cursor: pointer; padding: 0 6px;
  line-height: 1;
}
.boh-sticky__close:hover { color: var(--boh-paper); }

@media (max-width: 640px) {
  .boh-sticky { left: 12px; right: 12px; transform: translateY(120%); border-radius: var(--boh-r-md); padding: 14px 16px; }
  .boh-sticky.is-visible { transform: translateY(0); }
  .boh-sticky__text { white-space: normal; font-size: 13px; }
}

/* - Calendar buttons - */
.boh-cal {
  display: inline-flex;
  gap: 10px;
  flex-wrap: wrap;
  margin: 8px 0 28px;
}
.boh-cal a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  border: 1px solid var(--boh-rule);
  border-radius: 999px;
  padding: 9px 18px;
  font-family: 'Montserrat', system-ui, -apple-system, sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: var(--boh-ink) !important;
  text-decoration: none !important;
  transition: all .15s ease;
}
.boh-cal a:hover {
  border-color: var(--boh-plum);
  color: var(--boh-plum) !important;
  transform: translateY(-1px);
  box-shadow: var(--boh-shadow-sm);
}

/* - Event meta tiles - */
.boh-event-meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0;
  margin: 20px 0 32px;
  background: #fff;
  border: 1px solid var(--boh-rule);
  border-radius: var(--boh-r-lg);
  overflow: hidden;
}
.boh-event-meta__cell {
  padding: 24px 26px;
  border-right: 1px solid var(--boh-rule);
}
.boh-event-meta__cell:last-child { border-right: none; }
.boh-event-meta__label {
  font-family: 'Montserrat', system-ui, -apple-system, sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--boh-ember);
  margin-bottom: 8px;
}
.boh-event-meta__val {
  font-family: 'Montserrat', system-ui, -apple-system, sans-serif;
  font-size: 18px;
  font-weight: 500;
  color: var(--boh-ink);
  line-height: 1.3;
  letter-spacing: -0.01em;
}
.boh-event-meta__sub {
  font-family: 'Montserrat', system-ui, -apple-system, sans-serif;
  font-size: 13px;
  color: var(--boh-ink-mute);
  margin-top: 4px;
}
@media (max-width: 640px) {
  .boh-event-meta__cell { border-right: none; border-bottom: 1px solid var(--boh-rule); }
  .boh-event-meta__cell:last-child { border-bottom: none; }
}

/* - Sponsor tier grid - */
.boh-tier-card {
  background: #fff;
  border: 1px solid var(--boh-rule);
  border-radius: var(--boh-r-md);
  padding: 28px 26px;
  transition: all .2s ease;
  position: relative;
  overflow: hidden;
  /* Stretch to fill column so all cards in a row are the same height */
  height: 100%;
  display: flex;
  flex-direction: column;
}
.boh-tier-card:hover {
  border-color: var(--boh-magenta-soft);
  transform: translateY(-3px);
  box-shadow: var(--boh-shadow-md);
}

/* Sponsor section columns: make the column wrapper full-height so the
   .boh-tier-card child can stretch to match its siblings. */
.entry-content .wp-block-columns:has(.boh-tier-card) {
  align-items: stretch;
}
.entry-content .wp-block-columns:has(.boh-tier-card) > .wp-block-column {
  display: flex;
  flex-direction: column;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}
.entry-content .wp-block-columns:has(.boh-tier-card) > .wp-block-column:hover {
  transform: none !important;
  box-shadow: none !important;
  border: none !important;
}

/* Tier eyebrow shouldn't wrap; shrink slightly when text is long */
.boh-tier-card {
  text-align: center;
  align-items: center;
}
.boh-tier-card .boh-eyebrow {
  white-space: nowrap;
  align-self: center;
  font-size: 10px;
  letter-spacing: 0.14em;
  padding: 5px 12px;
}
.boh-tier-card h3 {
  font-size: 17px !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
  margin: 14px 0 8px !important;
  text-align: center;
}
.boh-tier-card p {
  font-size: 14px !important;
  line-height: 1.55 !important;
  text-align: center;
  /* push subsequent content to top, keep card balanced */
  flex: 1;
}
.boh-tier-card__band {
  position: absolute; top: 0; left: 0; right: 0;
  height: 4px;
}
.boh-tier-card--platinum .boh-tier-card__band { background: linear-gradient(90deg, var(--boh-plum), var(--boh-ember)); }
.boh-tier-card--gold .boh-tier-card__band { background: var(--boh-yellow); }
.boh-tier-card--silver .boh-tier-card__band { background: var(--boh-plum); }
.boh-tier-card--bronze .boh-tier-card__band { background: var(--boh-rose); }
.boh-tier-card--support .boh-tier-card__band { background: var(--boh-moss); }

/* ───────────────────────────────────────────────────────────────────
   GIVEWP DONATION FORM
   ─────────────────────────────────────────────────────────────────── */
.give-form-wrap {
  background: #fff !important;
  border: 1px solid var(--boh-rule) !important;
  border-radius: 20px !important;
  padding: 32px 32px 28px !important;
  box-shadow: var(--boh-shadow-md) !important;
  max-width: 720px !important;
  margin: 24px auto 0 !important;
}
@media (max-width: 600px) {
  .give-form-wrap {
    padding: 24px 18px 22px !important;
    border-radius: 16px !important;
    margin: 16px 12px 0 !important;
  }
}
.give-form-wrap form {
  margin: 0 !important;
}
#give-form {
  padding-top: 88px !important;
  scroll-margin-top: 150px;
}
.admin-bar #give-form {
  scroll-margin-top: 182px;
}
#give-form > h2,
#give-form > p,
#give-form > .wp-block-group__inner-container > h2,
#give-form > .wp-block-group__inner-container > p {
  text-align: center !important;
}
#give-form > h2,
#give-form > .wp-block-group__inner-container > h2 {
  font-size: clamp(28px, 3vw, 38px) !important;
  margin-bottom: 10px !important;
}
#give-form > p,
#give-form > .wp-block-group__inner-container > p {
  color: var(--boh-ink-soft) !important;
  font-size: 17px !important;
  line-height: 1.55 !important;
  margin: 0 auto 22px !important;
  max-width: 760px !important;
}
/* Render the sandbox flow as a complete on-page form. GiveWP's reveal
   template keeps the payment/submit area hidden until JS expands it. */
.give-form-wrap .give-btn-reveal {
  display: none !important;
}
.give-form-wrap.give-display-reveal #give-payment-mode-select,
.give-form-wrap.give-display-reveal #give_purchase_form_wrap {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  height: auto !important;
}
/* When only one gateway is enabled, GiveWP renders an empty <ul>. Suppress
   the now-orphaned "Select Payment Method" header. */
.give-form-wrap #give-payment-mode-select:has(#give-gateway-radio-list:empty) {
  display: none !important;
}
.give-form-wrap .give-submit-button-wrap {
  display: flex !important;
  justify-content: center !important;
  margin-top: 18px !important;
}
/* Belt-and-braces: hide the entire notices block inside the form. The
   manual gateway IS enabled in settings; this notice is a known false
   positive when GiveWP v3 block renders a legacy form template. */
.give-form-wrap .give_notices,
.give-form-wrap .give_errors,
.give-form-wrap .give_notices_shortcode {
  display: none !important;
}
/* …but keep the test-mode notice visible since that's accurate context */
.give-form-wrap .give_notices_shortcode.give-notice-test-mode,
.give-form-wrap .give_notices.give-notice-test-mode {
  display: block !important;
}
.give-form-wrap #give_error_test_mode {
  display: block !important;
  background: #fffaf0 !important;
  border: 1px solid rgba(249, 209, 53,0.45) !important;
  border-left: 4px solid var(--boh-yellow) !important;
  box-shadow: none !important;
  color: var(--boh-ink-soft) !important;
  margin: 0 0 18px !important;
  padding: 12px 16px !important;
}
.give-form-wrap #give_error_test_mode::before {
  display: none !important;
}
.give-form-wrap #give_error_test_mode p {
  margin: 0 !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
}
.give-form-wrap #give_error_test_mode strong {
  color: var(--boh-ink) !important;
}
.give-form-wrap .give-btn,
.give-form-wrap input[type="submit"] {
  background: var(--boh-ember) !important;
  color: #fff !important;
  border-radius: 999px !important;
  border: none !important;
  padding: 14px 28px !important;
  font-weight: 600 !important;
  transition: all .15s ease !important;
}
.give-form-wrap input[type="submit"] {
  min-width: 180px !important;
  cursor: pointer !important;
}
.give-form-wrap .give-btn:hover {
  background: var(--boh-ember-deep) !important;
  transform: translateY(-1px);
}
.give-form-wrap .give-total-wrap {
  margin: 0 0 22px !important;
}
/* Section header above the amount input (the real <label> stays
   screen-reader-only - this avoids messing with the $-symbol flex row). */
.give-form-wrap .give-total-wrap::before {
  content: "Donation Amount" !important;
  display: block !important;
  color: var(--boh-ink) !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  letter-spacing: 0.08em !important;
  margin: 0 0 10px !important;
  text-transform: uppercase !important;
}
.give-form-wrap .give-donation-amount {
  display: flex !important;
  align-items: stretch !important;
  width: 100% !important;
}
.give-form-wrap .give-currency-symbol {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 52px !important;
  float: none !important;
  height: 52px !important;
  line-height: 1 !important;
  margin: 0 !important;
  position: static !important;
  width: 52px !important;
  border: 1.5px solid var(--boh-rule) !important;
  border-right: 0 !important;
  border-radius: 6px 0 0 6px !important;
  background: var(--boh-paper) !important;
  color: var(--boh-ink) !important;
  font-weight: 700 !important;
}
.give-donation-amount input,
.give-form .give-input {
  border: 1.5px solid var(--boh-rule) !important;
  border-radius: 0 12px 12px 0 !important;
  flex: 1 1 auto !important;
  height: 52px !important;
  margin: 0 !important;
  max-width: none !important;
  min-width: 0 !important;
  padding: 0 16px !important;
  text-align: left !important;
  width: 100% !important;
}
.give-donation-amount input:focus {
  border-color: var(--boh-plum) !important;
  box-shadow: 0 0 0 3px rgba(107,45,140,0.10) !important;
}
.give-form-wrap #give-payment-mode-select {
  border: 0 !important;
  margin: 0 0 16px !important;
  padding: 0 !important;
}
.give-form-wrap .give-payment-mode-label {
  display: block !important;
  color: var(--boh-ink) !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  letter-spacing: 0.08em !important;
  margin: 0 0 10px !important;
  text-transform: uppercase !important;
}
.give-form-wrap #give-gateway-radio-list {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) !important;
  gap: 12px !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
}
.give-form-wrap #give-gateway-radio-list::before,
.give-form-wrap #give-gateway-radio-list::after {
  content: none !important;
  display: none !important;
}
.give-form-wrap #give-gateway-radio-list li {
  clear: none !important;
  display: block !important;
  float: none !important;
  margin: 0 !important;
  max-width: none !important;
  min-height: 0 !important;
  padding: 0 !important;
  position: relative !important;
  width: auto !important;
}
.give-form-wrap input.give-gateway[type="radio"] {
  appearance: none !important;
  -webkit-appearance: none !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  height: 1px !important;
  left: 0 !important;
  margin: 0 !important;
  min-height: 0 !important;
  opacity: 0 !important;
  outline: 0 !important;
  overflow: hidden !important;
  padding: 0 !important;
  pointer-events: none !important;
  position: absolute !important;
  top: 0 !important;
  white-space: nowrap !important;
  width: 1px !important;
}
.give-form-wrap .give-gateway-option {
  align-items: center !important;
  background: var(--boh-paper) !important;
  border: 1.5px solid var(--boh-rule) !important;
  border-radius: 10px !important;
  color: var(--boh-ink) !important;
  cursor: pointer !important;
  display: flex !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  gap: 8px !important;
  height: auto !important;
  justify-content: center !important;
  line-height: 1.3 !important;
  margin: 0 !important;
  min-height: 42px !important;
  padding: 10px 14px !important;
  position: relative !important;
  text-align: center !important;
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease, transform .15s ease !important;
  width: 100% !important;
}
.give-form-wrap .give-gateway-option:hover {
  border-color: var(--boh-rule-strong, var(--boh-ink-soft)) !important;
  background: #fff !important;
}
.give-form-wrap .give-gateway:focus-visible + .give-gateway-option {
  border-color: var(--boh-plum) !important;
  box-shadow: 0 0 0 3px rgba(107,45,140,0.18) !important;
}
.give-form-wrap .give-gateway:checked + .give-gateway-option {
  background: rgba(208, 20, 130,0.08) !important;
  border-color: var(--boh-ember) !important;
  box-shadow: 0 0 0 3px rgba(208, 20, 130,0.12) !important;
  color: var(--boh-ember-deep, var(--boh-ember)) !important;
}
@media (max-width: 640px) {
  .give-form-wrap #give-gateway-radio-list {
    grid-template-columns: 1fr !important;
  }
}
.give-form-wrap .give-donation-submit {
  border: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}
.give-form-wrap #give-final-total-wrap {
  align-items: center !important;
  background: linear-gradient(180deg, rgba(208, 20, 130,0.06), rgba(208, 20, 130,0.10)) !important;
  border: 0 !important;
  border-radius: 14px !important;
  display: flex !important;
  font-size: 17px !important;
  justify-content: space-between !important;
  margin: 22px 0 4px !important;
  padding: 16px 20px !important;
}
.give-form-wrap .give-donation-total-label,
.give-form-wrap .give-final-total-amount {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  display: inline !important;
  margin: 0 !important;
  padding: 0 !important;
}
.give-form-wrap .give-donation-total-label {
  color: var(--boh-ink) !important;
  font-weight: 600 !important;
}
.give-form-wrap .give-final-total-amount {
  color: var(--boh-ember) !important;
  font-size: 22px !important;
  font-weight: 900 !important;
  letter-spacing: -0.01em !important;
}
.give-form-wrap .give-submit-button-wrap {
  margin-top: 20px !important;
}
.give-form-wrap input[type="submit"] {
  font-size: 16px !important;
  padding: 16px 36px !important;
  min-width: 220px !important;
  box-shadow: 0 6px 18px rgba(208, 20, 130,0.22) !important;
}
.give-form-wrap input[type="submit"]:hover {
  box-shadow: 0 10px 24px rgba(208, 20, 130,0.30) !important;
}
@media (max-width: 600px) {
  .give-form-wrap input[type="submit"] {
    width: 100% !important;
    min-width: 0 !important;
  }
}

/* ───────────────────────────────────────────────────────────────────
   FORMS (Contact Form 7 + generic)
   ─────────────────────────────────────────────────────────────────── */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="date"],
input[type="url"],
textarea,
select {
  border: 1.5px solid var(--boh-rule) !important;
  border-radius: var(--boh-r-sm) !important;
  padding: 13px 16px !important;
  font-family: 'Montserrat', system-ui, -apple-system, sans-serif;
  font-size: 15px !important;
  background: var(--boh-paper) !important;
  color: var(--boh-ink) !important;
  transition: all .18s ease !important;
  width: 100% !important;
  box-sizing: border-box !important;
}
input:focus,
textarea:focus,
select:focus {
  border-color: var(--boh-plum) !important;
  background: #fff !important;
  outline: none !important;
  box-shadow: 0 0 0 4px rgba(107,45,140,0.10) !important;
}
textarea { min-height: 120px; resize: vertical; }

input[type="submit"],
.wpcf7-submit {
  background: var(--boh-ember) !important;
  color: #fff !important;
  border: none !important;
  padding: 14px 36px !important;
  border-radius: 999px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  font-size: 15px !important;
  letter-spacing: 0.02em !important;
  transition: all .15s ease !important;
  width: auto !important;
  box-shadow: var(--boh-shadow-sm);
}
input[type="submit"]:hover,
.wpcf7-submit:hover {
  background: var(--boh-ember-deep) !important;
  transform: translateY(-2px);
  box-shadow: var(--boh-shadow-md);
}

/* Cap standalone CF7 forms (not the RSVP one which has its own card) so
   they don't stretch full container width on wide screens. Center it too. */
.wpcf7 form:not(.boh-rsvp form) {
  max-width: 640px;
  margin: 0 auto;
}
.wpcf7 form:not(.boh-rsvp form) p { margin: 0 0 16px; }
.wpcf7 form:not(.boh-rsvp form) label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 6px;
  color: var(--boh-ink);
}

.wpcf7 form .wpcf7-response-output {
  border-radius: var(--boh-r-md) !important;
  border: 1px solid var(--boh-rule) !important;
  padding: 14px 18px !important;
  font-size: 14px !important;
  margin-top: 18px !important;
}
.wpcf7 form.sent .wpcf7-response-output {
  border-color: var(--boh-moss) !important;
  background: rgba(92,122,74,0.08) !important;
  color: var(--boh-moss) !important;
}

/* ───────────────────────────────────────────────────────────────────
   FOOTER
   ─────────────────────────────────────────────────────────────────── */
#colophon,
/* Hide Astra's default small footer copyright line - we render our own footer */
.ast-small-footer { display: none !important; }

.site-footer,
#colophon {
  background: var(--boh-ink) !important;
  color: rgba(255,255,255,0.65) !important;
  padding: 0 !important;
}

/* ── Custom 4-column footer (rendered via wp_footer hook) ─────────── */
/* Pink footer per feedback (was black). Dark text on soft-pink background,
   yellow accent kept for the initiative pill + top border. */
.boh-footer {
  background: linear-gradient(180deg, #FDF2F8 0%, #FCE7F3 100%);
  color: var(--boh-ink);
  position: relative;
  padding: 80px 24px 32px;
  border-top: 4px solid var(--boh-magenta);
}
.boh-footer__inner {
  max-width: 1240px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  gap: 56px;
}
.boh-footer__brand h3 {
  font-family: 'Montserrat', sans-serif !important;
  color: var(--boh-ink) !important;
  font-weight: 800 !important;
  font-size: 17px !important;
  letter-spacing: -0.02em !important;
  margin: 0 0 4px !important;
}
.boh-footer__brand h3 span { color: var(--boh-magenta); }

/* "A Rohit Group initiative" attribution line */
.boh-footer__initiative {
  display: inline-block;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--boh-plum) !important;
  margin: 8px 0 0 !important;
  padding: 5px 12px;
  border: 1.5px solid var(--boh-plum);
  border-radius: 999px;
  background: rgba(107,45,140,0.08);
}
.boh-footer__initiative a {
  color: var(--boh-plum) !important;
  text-decoration: none !important;
  font-weight: 800 !important;
}
.boh-footer__initiative a:hover {
  color: var(--boh-magenta) !important;
}

.boh-footer__brand p:not(.boh-footer__initiative) {
  color: var(--boh-ink-soft);
  font-size: 14px;
  line-height: 1.6;
  margin: 16px 0 20px !important;
  max-width: 320px;
}

/* ───────────────────────────────────────────────────────────────────
   IMAGES - content photos
   ─────────────────────────────────────────────────────────────────── */

/* Generic block-editor image polish */
.entry-content .wp-block-image {
  margin: 32px auto;
}
.entry-content .wp-block-image img {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: var(--boh-r-lg);
  box-shadow: var(--boh-shadow-md);
  transition: transform .4s ease;
}
.entry-content .wp-block-image:hover img {
  transform: scale(1.01);
}

/* About section - full-width team photo, taller crop */
.boh-about-image {
  margin: 40px auto 48px !important;
  max-width: 1100px;
}
/* The paragraph caption immediately after the about image needs breathing room */
.boh-about-image + p,
.boh-about-image + .wp-block-paragraph,
figure.boh-about-image ~ p {
  margin-top: 32px !important;
}
.boh-about-image img {
  width: 100%;
  aspect-ratio: 16 / 7;
  object-fit: cover;
  object-position: center 30%;
}

/* How it works - small square image at top of each step card */
.boh-steps .wp-block-column .boh-step-image {
  margin: 0 0 18px !important;
  max-width: 220px;
}
.boh-steps .wp-block-column .boh-step-image img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: var(--boh-r-md);
  box-shadow: 0 6px 18px rgba(0,0,0,0.10);
}

/* Stories - emotional anchor image, wider crop */
.boh-stories-image {
  margin: 40px auto 56px !important;
  max-width: 960px;
}
.boh-stories-image img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: center 35%;
}

/* RSVP - past event photo, mood-setting */
.boh-rsvp-image {
  margin: 40px auto 48px !important;
  max-width: 980px;
}
.boh-rsvp-image img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

/* Sponsor - community group photo */
.boh-sponsor-image {
  margin: 40px auto 48px !important;
  max-width: 980px;
}
.boh-sponsor-image img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

@media (max-width: 768px) {
  .boh-about-image img,
  .boh-stories-image img,
  .boh-rsvp-image img,
  .boh-sponsor-image img {
    aspect-ratio: 4 / 3;
  }
  .boh-steps .wp-block-column .boh-step-image {
    max-width: 160px;
  }
}

/* "A Rohit Group initiative →" credit shown under the About heading */
.boh-rg-credit {
  text-align: center !important;
  margin: 0 auto 28px !important;
}
.boh-rg-credit a {
  display: inline-block;
  font-family: 'Montserrat', sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--boh-ink) !important;
  text-decoration: none !important;
  background: var(--boh-yellow);
  padding: 7px 16px;
  border-radius: 999px;
  transition: transform .15s ease, background .15s ease;
}
.boh-rg-credit a:hover {
  background: var(--boh-yellow-deep);
  transform: translateY(-1px);
}
.boh-footer__col h4 {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 800 !important;
  font-size: 11px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.16em !important;
  color: var(--boh-magenta) !important;
  margin: 0 0 18px !important;
}
.boh-footer__col ul { list-style: none !important; padding: 0 !important; margin: 0 !important; }
.boh-footer__col li { padding: 0 !important; margin: 0 0 10px !important; }
.boh-footer__col li::before { display: none !important; }
.boh-footer__col a,
.boh-footer__col p {
  color: var(--boh-ink) !important;
  font-size: 14px !important;
  text-decoration: none !important;
  line-height: 1.6 !important;
  transition: color .15s ease !important;
}
.boh-footer__col a:hover { color: var(--boh-magenta) !important; }

.boh-footer__cta {
  background: rgba(255,255,255,0.55);
  border: 1px solid rgba(107,45,140,0.15);
  border-radius: 16px;
  padding: 22px 22px 24px;
}
.boh-footer__cta .boh-eyebrow {
  color: var(--boh-plum);
  border-color: var(--boh-plum);
  background: rgba(107,45,140,0.08);
  margin-bottom: 12px;
}
.boh-footer__cta strong {
  display: block;
  color: var(--boh-ink);
  font-size: 18px;
  font-weight: 800;
  margin-bottom: 4px;
}
.boh-footer__cta p {
  color: var(--boh-ink-soft);
  font-size: 13px;
  margin: 0 0 14px !important;
}
.boh-footer__cta a.boh-btn-cta {
  display: inline-block;
  background: var(--boh-magenta);
  color: #fff !important;
  font-weight: 700;
  font-size: 13px;
  padding: 10px 20px;
  border-radius: 999px;
  text-decoration: none !important;
  transition: background .15s ease, transform .15s ease;
}
.boh-footer__cta a.boh-btn-cta:hover {
  background: var(--boh-magenta-deep);
  transform: translateY(-1px);
}

.boh-footer__bottom {
  max-width: 1240px;
  margin: 56px auto 0;
  padding-top: 24px;
  border-top: 1px solid rgba(107,45,140,0.15);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  color: var(--boh-ink-soft);
  font-size: 13px;
}
.boh-footer__bottom a { color: var(--boh-ink) !important; text-decoration: none !important; }
.boh-footer__bottom a:hover { color: var(--boh-magenta) !important; }

.boh-footer__social {
  display: inline-flex;
  gap: 10px;
  margin-top: 8px;
}
.boh-footer__social a {
  width: 36px; height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(107,45,140,0.25);
  border-radius: 50%;
  color: var(--boh-plum) !important;
  transition: all .15s ease;
}
.boh-footer__social a:hover {
  background: var(--boh-magenta);
  color: #fff !important;
  border-color: var(--boh-magenta);
  transform: translateY(-1px);
}
.boh-footer__social svg { width: 16px; height: 16px; }

@media (max-width: 880px) {
  .boh-footer__inner { grid-template-columns: 1fr 1fr; gap: 40px; }
  .boh-footer__brand { grid-column: span 2; }
  .boh-footer__cta { grid-column: span 2; }
}
@media (max-width: 520px) {
  .boh-footer__inner { grid-template-columns: 1fr; }
  .boh-footer__brand,
  .boh-footer__cta { grid-column: auto; }
}
#colophon a,
.site-footer a,
.ast-small-footer a { color: rgba(251,248,241,0.85) !important; transition: color .15s ease; }
#colophon a:hover,
.site-footer a:hover { color: var(--boh-ember) !important; }
.ast-small-footer .ast-footer-copyright { color: rgba(251,248,241,0.55) !important; font-size: 13px; }
.ast-small-footer .ast-footer-copyright a[href*="astra"] { display: none !important; }
.ast-small-footer .ast-footer-copyright::after { content: '' !important; }

/* ───────────────────────────────────────────────────────────────────
   UTILITIES
   ─────────────────────────────────────────────────────────────────── */
.boh-divider {
  width: 60px; height: 3px;
  background: var(--boh-yellow);
  border: none;
  margin: 18px auto 28px;
  border-radius: 2px;
}
.boh-center { text-align: center; }
.boh-muted  { color: var(--boh-ink-mute); }

/* Spacer overrides */
.wp-block-spacer { height: 32px; }

/* Tighten entry-content child gaps - sections shouldn't double-stack
   padding (group padding + sibling margin). Set margin to 0 between
   adjacent groups so the group's own padding governs spacing.
   EXCEPTION: the stats bar deliberately uses negative margin-top to
   overlap the hero, so exclude it here. */
.entry-content > .wp-block-group:not(.boh-stats) + .wp-block-group:not(.boh-stats),
.entry-content > .wp-block-group:not(.boh-stats) + .wp-block-cover,
.entry-content > .wp-block-cover + .wp-block-group:not(.boh-stats) {
  margin-top: 0 !important;
}

/* ───────────────────────────────────────────────────────────────────
   RESPONSIVE
   ─────────────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .boh-impact, .boh-rsvp, .boh-transparency { padding: 28px; }
}
@media (max-width: 768px) {
  .wp-block-columns { flex-direction: column !important; }
  .wp-block-cover.alignfull,
  .wp-block-cover.boh-hero { min-height: 520px !important; }
  .wp-block-cover__inner-container { padding: 56px 20px !important; }
  .entry-content > h2,
  h2.has-text-align-center { font-size: 17px !important; }
  .boh-stats h2,
  .wp-block-group.has-primary-background-color h2 { font-size: 32px !important; }
  .boh-stats .wp-block-column:not(:last-child)::after { display: none; }
  .wp-block-spacer { height: 24px !important; }
}

/* ───────────────────────────────────────────────────────────────────
   GIVEWP FINAL LAYOUT OVERRIDES
   Keep this at the end: GiveWP and the generic form rules both ship
   aggressive defaults, so the donation component gets the final word.
   ─────────────────────────────────────────────────────────────────── */
#give-form {
  padding-top: clamp(92px, 8vw, 132px) !important;
}
#give-form .give-form-wrap {
  box-sizing: border-box !important;
  /* 760px matches the sponsorship form's measure, so the two read as one
     family rather than two plugins. */
  max-width: 760px !important;
  padding: clamp(20px, 2.5vw, 28px) !important;
}
#give-form .give-form-wrap *,
#give-form .give-form-wrap *::before,
#give-form .give-form-wrap *::after {
  box-sizing: border-box !important;
}
#give-form .give-form-wrap .give-total-wrap,
#give-form .give-form-wrap #give-payment-mode-select,
#give-form .give-form-wrap #give_purchase_form_wrap,
#give-form .give-form-wrap .give-donation-submit {
  border: 0 !important;
  clear: both !important;
  float: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  position: static !important;
  width: 100% !important;
}
#give-form .give-form-wrap .give-total-wrap {
  margin-bottom: 20px !important;
}
#give-form .give-form-wrap .give-donation-amount {
  align-items: stretch !important;
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 0 !important;
  position: static !important;
  width: 100% !important;
}
#give-form .give-form-wrap .give-currency-symbol {
  align-items: center !important;
  background: var(--boh-paper) !important;
  border: 1.5px solid var(--boh-rule) !important;
  border-radius: 6px 0 0 6px !important;
  border-right: 0 !important;
  color: var(--boh-ink) !important;
  display: flex !important;
  flex: 0 0 52px !important;
  font-size: 18px !important;
  font-weight: 800 !important;
  height: 52px !important;
  justify-content: center !important;
  line-height: 1 !important;
  margin: 0 !important;
  min-height: 52px !important;
  padding: 0 !important;
  position: static !important;
  text-align: center !important;
  width: 52px !important;
}
#give-form .give-form-wrap input#give-amount.give-amount-top {
  background: #fff !important;
  border: 1.5px solid var(--boh-rule) !important;
  border-radius: 0 6px 6px 0 !important;
  box-shadow: none !important;
  color: var(--boh-ink) !important;
  flex: 1 1 auto !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  height: 52px !important;
  line-height: 52px !important;
  margin: 0 !important;
  max-width: none !important;
  min-width: 0 !important;
  padding: 0 16px !important;
  text-align: left !important;
  width: auto !important;
}
#give-form .give-form-wrap .give-payment-mode-label {
  border-bottom: 1px solid var(--boh-rule) !important;
  display: block !important;
  margin: 0 0 14px !important;
  padding: 0 0 10px !important;
}
#give-form .give-form-wrap #give-gateway-radio-list {
  align-items: stretch !important;
  display: grid !important;
  gap: 8px !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  list-style: none !important;
  margin: 0 auto !important;
  max-width: 420px !important;
  padding: 0 !important;
  width: 100% !important;
}
#give-form .give-form-wrap #give-gateway-radio-list::before,
#give-form .give-form-wrap #give-gateway-radio-list::after {
  content: none !important;
  display: none !important;
}
#give-form .give-form-wrap #give-gateway-radio-list > li {
  background: transparent !important;
  border: 0 !important;
  clear: none !important;
  display: block !important;
  float: none !important;
  margin: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  position: relative !important;
  transform: none !important;
  width: auto !important;
}
#give-form .give-form-wrap input.give-gateway[type="radio"] {
  appearance: none !important;
  border: 0 !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  height: 1px !important;
  left: 0 !important;
  margin: 0 !important;
  min-height: 0 !important;
  opacity: 0 !important;
  overflow: hidden !important;
  padding: 0 !important;
  pointer-events: none !important;
  position: absolute !important;
  top: 0 !important;
  visibility: hidden !important;
  white-space: nowrap !important;
  width: 1px !important;
}
#give-form .give-form-wrap label.give-gateway-option {
  align-items: center !important;
  background: var(--boh-paper) !important;
  border: 1px solid var(--boh-rule) !important;
  border-radius: 999px !important;
  color: var(--boh-ink) !important;
  cursor: pointer !important;
  display: flex !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  justify-content: center !important;
  line-height: 1.3 !important;
  margin: 0 !important;
  min-height: 40px !important;
  padding: 10px 14px !important;
  position: relative !important;
  text-align: center !important;
  width: 100% !important;
}
#give-form .give-form-wrap label.give-gateway-option::before,
#give-form .give-form-wrap label.give-gateway-option::after {
  content: none !important;
  display: none !important;
}
#give-form .give-form-wrap input.give-gateway:checked + label.give-gateway-option,
#give-form .give-form-wrap li.give-gateway-option-selected label.give-gateway-option {
  background: rgba(208, 20, 130,0.07) !important;
  border-color: rgba(208, 20, 130,0.42) !important;
  box-shadow: 0 0 0 3px rgba(208, 20, 130,0.08) !important;
}
#give-form .give-form-wrap #give-final-total-wrap {
  background: rgba(208, 20, 130,0.06) !important;
  border: 0 !important;
  border-radius: 14px !important;
  display: flex !important;
  gap: 16px !important;
  justify-content: space-between !important;
  margin: 18px 0 0 !important;
  padding: 14px 16px !important;
  width: 100% !important;
}
#give-form .give-form-wrap #give-final-total-wrap .give-donation-total-label,
#give-form .give-form-wrap #give-final-total-wrap .give-final-total-amount {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  color: inherit !important;
  display: inline !important;
  line-height: 1.3 !important;
  margin: 0 !important;
  padding: 0 !important;
  width: auto !important;
}
#give-form .give-form-wrap #give-final-total-wrap .give-final-total-amount {
  color: var(--boh-ember) !important;
  font-weight: 900 !important;
}
#give-form .give-form-wrap .give-submit-button-wrap {
  align-items: center !important;
  display: flex !important;
  justify-content: center !important;
  margin: 20px 0 0 !important;
  width: 100% !important;
}
#give-form .give-form-wrap input#give-purchase-button {
  min-width: 170px !important;
}
@media (max-width: 640px) {
  #give-form .give-form-wrap #give-gateway-radio-list {
    grid-template-columns: 1fr !important;
  }
}

/* ── Sponsorship tiers (8-card grid, per BoH sponsorship PDF) ─── */
.boh-sponsor-tiers {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
  margin-top: 32px;
}
@media (max-width: 1080px) { .boh-sponsor-tiers { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 820px)  { .boh-sponsor-tiers { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px)  { .boh-sponsor-tiers { grid-template-columns: 1fr; } }

.boh-tier {
  position: relative;
  background: #fff;
  border: 1px solid var(--boh-rule);
  border-radius: 16px;
  padding: 22px 22px 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.boh-tier:hover {
  transform: translateY(-3px);
  border-color: rgba(208,20,130,0.35);
  box-shadow: 0 12px 28px rgba(208,20,130,0.12);
}
.boh-tier__band {
  position: absolute; top: 0; left: 0; right: 0;
  height: 4px;
  background: var(--boh-magenta);
}
.boh-tier--platinum .boh-tier__band { background: linear-gradient(90deg, var(--boh-magenta), var(--boh-yellow)); }
.boh-tier--gold     .boh-tier__band { background: var(--boh-yellow); }
.boh-tier--silver   .boh-tier__band { background: #8892a5; }
.boh-tier--bronze   .boh-tier__band { background: #c88a5c; }
.boh-tier--support  .boh-tier__band { background: var(--boh-plum); }
.boh-tier--custom   .boh-tier__band { background: var(--boh-ink); }

.boh-tier__eyebrow {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--boh-ink-soft);
  margin-top: 6px;
}
/* Price sits at the very bottom of the card as a prominent footer band */
.boh-tier__price {
  margin: 18px -22px 0;
  padding: 14px 22px;
  border-top: 1px solid var(--boh-rule);
  background: rgba(208,20,130,0.06);
  color: var(--boh-magenta);
  font-family: 'Montserrat', sans-serif;
  font-weight: 900;
  font-size: 22px;
  letter-spacing: -0.02em;
  text-align: center;
  transition: background .18s ease;
}
.boh-tier:hover .boh-tier__price {
  background: rgba(208,20,130,0.12);
}
.boh-tier--platinum .boh-tier__price { color: var(--boh-magenta); }
.boh-tier--gold     .boh-tier__price { color: #a37e0a; background: rgba(249,209,53,0.16); }
.boh-tier--silver   .boh-tier__price { color: #5b6478; background: rgba(136,146,165,0.14); }
.boh-tier--bronze   .boh-tier__price { color: #8f5a2c; background: rgba(200,138,92,0.14); }
.boh-tier--support  .boh-tier__price { color: var(--boh-plum); }
.boh-tier--custom   .boh-tier__price { color: var(--boh-ink);  background: rgba(31,26,36,0.07); }
.boh-tier__title {
  font-family: 'Montserrat', sans-serif !important;
  font-size: 17px !important;
  font-weight: 800 !important;
  margin: 8px 0 8px !important;
  line-height: 1.25 !important;
  color: var(--boh-ink) !important;
}
.boh-tier__copy {
  color: var(--boh-ink-soft);
  font-size: 14px;
  line-height: 1.55;
  margin: 0 0 14px !important;
}
.boh-tier__benefits {
  list-style: none !important;
  padding: 12px 0 0 !important;
  margin: 0 !important;
  border-top: 1px solid var(--boh-rule);
  flex: 1 1 auto; /* pushes .boh-tier__price to the bottom */
}
.boh-tier__benefits li {
  position: relative;
  padding: 4px 0 4px 18px !important;
  margin: 0 !important;
  font-size: 13px;
  color: var(--boh-ink);
}
.boh-tier__benefits li::before {
  content: '';
  position: absolute;
  left: 0; top: 10px;
  width: 6px; height: 6px;
  background: var(--boh-magenta);
  border-radius: 50%;
}

/* ── Sponsorship commitment form (CF7 embed) ───────────────────── */
.wpcf7 form.boh-sponsor-form,
#sponsorship-form .wpcf7 form,
#sponsorship-form .wpcf7 {
  max-width: 760px;
  margin: 0 auto;
}
/* Suppress CF7's automatic <br> - they break the grid on split rows */
#sponsorship-form .boh-form-row br {
  display: none !important;
}
#sponsorship-form .boh-form-row {
  margin: 0 0 18px !important;
  padding: 0 !important;
}
#sponsorship-form .boh-form-row > label {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: var(--boh-ink);
  margin-bottom: 6px;
}
#sponsorship-form .boh-form-row .req { color: var(--boh-magenta); font-weight: 800; }
#sponsorship-form .boh-form-row .opt {
  color: var(--boh-ink-soft);
  font-weight: 500;
  font-size: 12px;
}
/* Split row: two side-by-side fields (Phone + Email). Grid + explicit
   selector for immediate-child labels so CF7's stray <br>s don't
   become anonymous grid tracks. */
#sponsorship-form .boh-form-row--split {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 18px !important;
}
#sponsorship-form .boh-form-row--split > label {
  width: 100%;
  min-width: 0;
  margin: 0 !important;
}
@media (max-width: 640px) {
  #sponsorship-form .boh-form-row--split { grid-template-columns: 1fr !important; }
}
#sponsorship-form .boh-form-row--terms {
  margin: 18px 0 8px !important;
  font-size: 14px;
  color: var(--boh-ink-soft);
}
#sponsorship-form .boh-form-row--terms > label {
  display: inline-flex !important;
  align-items: center;
  gap: 10px;
  font-weight: 500 !important;
  font-size: 14px !important;
  margin: 0 !important;
}
#sponsorship-form .boh-form-submit {
  margin: 24px 0 0 !important;
  text-align: center;
}
#sponsorship-form select.wpcf7-select {
  background-image: linear-gradient(45deg, transparent 50%, var(--boh-plum) 50%),
                    linear-gradient(135deg, var(--boh-plum) 50%, transparent 50%);
  background-position: calc(100% - 20px) 22px, calc(100% - 14px) 22px;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  appearance: none;
  -webkit-appearance: none;
  padding-right: 40px !important;
}
/* Response messages (validation errors + success) */
#sponsorship-form .wpcf7-response-output {
  margin: 24px auto 0 !important;
  max-width: 760px;
}

/* ═══════════════════════════════════════════════════════════════════
   MODERN EVENT HOME (July 2026 rebuild) - hero, essentials, about
   split, sponsors band, closing CTA
   ═══════════════════════════════════════════════════════════════════ */

/* Universal button (used across event home) */
.boh-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 26px;
  border-radius: 999px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.01em;
  text-decoration: none !important;
  transition: transform .18s ease, background .18s ease, color .18s ease, border-color .18s ease, box-shadow .18s ease;
  border: 2px solid transparent;
  cursor: pointer;
  white-space: nowrap;
}
.boh-btn:hover { transform: translateY(-1px); }
.boh-btn--primary {
  background: var(--boh-magenta);
  color: #fff !important;
}
.boh-btn--primary:hover {
  background: var(--boh-magenta-deep, #a20e63);
  box-shadow: 0 12px 28px rgba(208,20,130,0.28);
}
.boh-btn--outline {
  background: transparent;
  color: var(--boh-ink) !important;
  border-color: var(--boh-ink);
}
.boh-btn--outline:hover {
  background: var(--boh-ink);
  color: #fff !important;
}
.boh-btn--white {
  background: #fff;
  color: var(--boh-ink) !important;
}
.boh-btn--white:hover {
  background: var(--boh-yellow);
  color: var(--boh-ink) !important;
}
.boh-btn--ghost {
  background: rgba(255,255,255,0.14);
  color: #fff !important;
  border-color: rgba(255,255,255,0.55);
}
.boh-btn--ghost:hover {
  background: #fff;
  color: var(--boh-magenta) !important;
  border-color: #fff;
}

/* ── HERO ─────────────────────────────────────────────────────── */
.boh-event-hero {
  background: linear-gradient(180deg, #FDF2F8 0%, #FCE7F3 45%, #FFFFFF 100%);
  position: relative;
  overflow: hidden;
}
.boh-event-hero::before,
.boh-event-hero::after {
  content: '';
  position: absolute;
  pointer-events: none;
  z-index: 0;
  background: var(--boh-img-pattern, url('/wp-content/uploads/2026/07/boh-flower-pattern.jpg')) center / contain no-repeat;
  opacity: 0.16;
  mix-blend-mode: multiply;
}
.boh-event-hero::before {
  top: -80px; left: -80px;
  width: 320px; height: 320px;
  transform: rotate(180deg);
}
.boh-event-hero::after {
  bottom: -100px; right: -80px;
  width: 260px; height: 260px;
}
.boh-event-hero__grid {
  position: relative;
  z-index: 1;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 32px;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 56px;
  align-items: center;
}
@media (max-width: 900px) {
  .boh-event-hero__grid { grid-template-columns: 1fr; gap: 32px; padding: 0 24px; }
}

/* Hero media (event photo) */
.boh-event-hero__media {
  position: relative;
}
.boh-event-hero__media img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 24px;
  box-shadow: 0 24px 60px -18px rgba(208,20,130,0.28);
  display: block;
}
.boh-event-hero__accent {
  position: absolute;
  right: -28px;
  bottom: -28px;
  width: 120px;
  height: 120px;
  background: var(--boh-yellow);
  border-radius: 24px;
  z-index: -1;
}
.boh-event-hero__badge {
  position: absolute;
  top: 22px;
  left: 22px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255,255,255,0.92);
  color: var(--boh-ink);
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  backdrop-filter: blur(6px);
  box-shadow: 0 6px 16px rgba(31,26,36,0.14);
}
.boh-event-hero__badge-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #23b673;
  box-shadow: 0 0 0 4px rgba(35,182,115,0.20);
  animation: boh-pulse 2s ease-in-out infinite;
}
@keyframes boh-pulse {
  50% { box-shadow: 0 0 0 8px rgba(35,182,115,0); }
}

/* Hero copy */
.boh-event-hero__copy {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.boh-event-hero__eyebrow { margin: 0 !important; }
.boh-event-hero__title {
  font-family: 'Montserrat', sans-serif !important;
  font-size: clamp(44px, 5.6vw, 76px) !important;
  font-weight: 900 !important;
  color: var(--boh-ink) !important;
  letter-spacing: -0.03em;
  line-height: 1 !important;
  margin: 0 !important;
}
.boh-event-hero__title em {
  font-style: normal;
  color: var(--boh-magenta);
  position: relative;
}
.boh-event-hero__lede {
  font-size: 19px !important;
  color: var(--boh-ink-soft);
  line-height: 1.55 !important;
  margin: 0 !important;
  max-width: 520px;
}
.boh-event-hero__facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin: 8px 0 4px;
}
@media (max-width: 520px) {
  .boh-event-hero__facts { grid-template-columns: 1fr; }
}
.boh-event-hero__fact {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: #fff;
  border: 1px solid rgba(208,20,130,0.14);
  border-radius: 14px;
  box-shadow: 0 6px 20px -12px rgba(208,20,130,0.24);
}
.boh-event-hero__fact-icon {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: rgba(208,20,130,0.10);
  color: var(--boh-magenta);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.boh-event-hero__fact-icon svg { width: 20px; height: 20px; }
.boh-event-hero__fact-label {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--boh-magenta);
}
.boh-event-hero__fact-value {
  font-size: 15px;
  font-weight: 700;
  color: var(--boh-ink);
  margin-top: 2px;
}
.boh-event-hero__ctas {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 4px;
}
.boh-event-hero__note {
  font-size: 13px !important;
  color: var(--boh-ink-soft);
  margin: 0 !important;
  display: flex;
  align-items: center;
  gap: 8px;
}
.boh-event-hero__note::before {
  content: '✓';
  color: #23b673;
  font-weight: 800;
}

/* ── COUNTDOWN STRIP ─────────────────────────────────────────── */
.boh-countdown-strip { color: #fff; }
.boh-countdown-strip__inner {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 32px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
  align-items: center;
  gap: 48px;
}
@media (max-width: 900px) {
  .boh-countdown-strip__inner { grid-template-columns: 1fr; gap: 24px; padding: 0 24px; text-align: center; justify-items: center; }
}
.boh-countdown-strip__title {
  font-family: 'Montserrat', sans-serif !important;
  color: #fff !important;
  font-size: clamp(24px, 2.6vw, 32px) !important;
  font-weight: 800 !important;
  margin: 10px 0 0 !important;
  letter-spacing: -0.01em;
}
/* Reuse the existing countdown units but on dark bg */
.boh-countdown-strip .boh-countdown__unit {
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
}
.boh-countdown-strip .boh-countdown__num { color: var(--boh-yellow) !important; }
.boh-countdown-strip .boh-countdown__label { color: rgba(255,255,255,0.65) !important; }

/* ── ESSENTIALS GRID (4 icon cards) ─────────────────────────── */
.boh-essentials {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}
@media (max-width: 900px) { .boh-essentials { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .boh-essentials { grid-template-columns: 1fr; } }
.boh-essentials__card {
  background: #fff;
  border: 1px solid var(--boh-rule);
  border-radius: 20px;
  padding: 28px 24px 24px;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.boh-essentials__card:hover {
  transform: translateY(-3px);
  border-color: rgba(208,20,130,0.35);
  box-shadow: 0 12px 32px rgba(208,20,130,0.10);
}
.boh-essentials__icon {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(208,20,130,0.10), rgba(249,209,53,0.14));
  color: var(--boh-magenta);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}
.boh-essentials__icon svg { width: 24px; height: 24px; }
.boh-essentials__card h3 {
  font-family: 'Montserrat', sans-serif !important;
  font-size: 17px !important;
  font-weight: 800 !important;
  color: var(--boh-ink) !important;
  margin: 0 0 8px !important;
}
.boh-essentials__card p {
  color: var(--boh-ink-soft);
  font-size: 14px;
  line-height: 1.55;
  margin: 0 !important;
}
.boh-essentials__card em { color: var(--boh-magenta); font-style: normal; font-weight: 700; }

/* ── ABOUT SPLIT ─────────────────────────────────────────────── */
.boh-about-split {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 24px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 56px;
  align-items: center;
}
@media (max-width: 900px) { .boh-about-split { grid-template-columns: 1fr; gap: 32px; } }
.boh-about-split__copy p:first-child { margin: 0 0 8px !important; }
.boh-about-split__copy h2 {
  font-family: 'Montserrat', sans-serif !important;
  font-size: clamp(30px, 3.6vw, 46px) !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em;
  color: var(--boh-ink) !important;
  margin: 0 0 18px !important;
  line-height: 1.1 !important;
}
.boh-about-split__copy h2 em { color: var(--boh-magenta); font-style: normal; }
.boh-about-split__copy p:not(:first-child) {
  color: var(--boh-ink-soft);
  font-size: 16px;
  line-height: 1.6;
  margin: 0 0 16px !important;
}
.boh-about-split__copy .boh-btn { margin-top: 8px; }
.boh-about-split__media {
  position: relative;
}
.boh-about-split__media img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 20px;
  box-shadow: 0 20px 40px -20px rgba(31,26,36,0.30);
}
.boh-about-split__quote {
  position: absolute;
  bottom: -24px;
  left: -24px;
  max-width: 300px;
  background: var(--boh-yellow);
  padding: 16px 20px 14px;
  border-radius: 16px;
  box-shadow: 0 12px 30px rgba(31,26,36,0.14);
}
.boh-about-split__quote p {
  margin: 0 !important;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 15px;
  line-height: 1.4;
  color: var(--boh-ink);
}
@media (max-width: 640px) {
  .boh-about-split__quote { position: static; margin-top: 16px; max-width: none; }
}

/* ── SPONSORS BAND ───────────────────────────────────────────── */
.boh-sponsors-band {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 24px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  gap: 48px;
  align-items: center;
}
@media (max-width: 900px) { .boh-sponsors-band { grid-template-columns: 1fr; gap: 24px; } }
.boh-sponsors-band__heading p:first-child { margin: 0 0 8px !important; }
.boh-sponsors-band__heading h2 {
  font-family: 'Montserrat', sans-serif !important;
  font-size: clamp(26px, 3vw, 36px) !important;
  font-weight: 800 !important;
  color: var(--boh-ink) !important;
  margin: 0 0 12px !important;
  letter-spacing: -0.02em;
}
.boh-sponsors-band__sub {
  color: var(--boh-ink-soft);
  margin: 0 0 18px !important;
}
.boh-sponsors-band__placeholder {
  background: #fff;
  border: 1px dashed rgba(31,26,36,0.20);
  border-radius: 16px;
  padding: 40px 32px;
  text-align: center;
  color: var(--boh-ink-soft);
}
.boh-sponsors-band__placeholder p { margin: 0; }
.boh-sponsors-band__placeholder strong { color: var(--boh-ink); }

/* ── CLOSING CTA BANNER ─────────────────────────────────────── */
.boh-cta-banner {
  background: linear-gradient(135deg, var(--boh-magenta) 0%, #7A0A54 100%);
  position: relative;
  overflow: hidden;
}
.boh-cta-banner::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--boh-img-pattern, url('/wp-content/uploads/2026/07/boh-flower-pattern.jpg')) center / cover no-repeat;
  opacity: 0.08;
  mix-blend-mode: overlay;
  pointer-events: none;
}
.boh-cta-banner__inner {
  position: relative;
  z-index: 1;
  max-width: 900px;
  margin: 0 auto;
  padding: 0 24px;
  text-align: center;
  color: #fff;
}
.boh-cta-banner__inner p:first-child { margin: 0 0 14px !important; }
.boh-cta-banner__title {
  font-family: 'Montserrat', sans-serif !important;
  color: #fff !important;
  font-size: clamp(36px, 4.6vw, 60px) !important;
  font-weight: 900 !important;
  margin: 0 0 12px !important;
  letter-spacing: -0.02em;
  line-height: 1.1 !important;
}
.boh-cta-banner__sub {
  color: rgba(255,255,255,0.85) !important;
  font-size: 17px !important;
  margin: 0 0 28px !important;
}
.boh-cta-banner__ctas {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
}

/* ── Sub-page hero banner + flower corner flourish ──────────────── */
.entry-content > .boh-page-hero,
.boh-page-hero {
  position: relative;
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  padding: 0 !important; /* photo runs to the very top, behind the fixed header */
  overflow: hidden;
  background: linear-gradient(180deg, #FDF2F8 0%, #FCE7F3 100%);
  box-sizing: border-box;
}
.boh-page-hero__image {
  position: relative;
  width: 100%;
  /* The photograph starts below the header rather than running up behind it.
     While the header was translucent, filling that strip was the point and
     the height carried +88px to keep the visible area the same. The header is
     opaque white now, so those pixels were simply hidden - 73 of them on
     desktop, 61 on a phone. --boh-header-h is measured in the page; the
     fallbacks are today's real heights. */
  margin-top: var(--boh-header-h, 73px);
  height: clamp(220px, 34vw, 420px);
  background-size: cover;
  /* Bias toward the top of the frame: these are group photos and anything
     past ~30% starts cropping faces (Aug-2026 feedback). */
  background-position: center 22%;
  background-repeat: no-repeat;
}
/* Narrow viewports crop hardest, so give the banner more height and sit
   even closer to the top of the image. */
@media (max-width: 900px) {
  .boh-page-hero__image {
    margin-top: var(--boh-header-h, 61px);
    height: clamp(240px, 46vw, 360px);
    background-position: center 18%;
  }
}
/* Bottom vignette so the transition into the body is soft. The light wash
   that used to sit across the top went with the header: it was there to keep
   the navigation readable over the photograph, and the navigation no longer
   sits on it. */
.boh-page-hero__image::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 62%, rgba(253,242,248,0.55) 100%);
  pointer-events: none;
}
/* Flower flourish peeking in from the top-right corner */
.boh-page-hero__flourish {
  position: absolute;
  top: -50px;
  right: -60px;
  width: 320px;
  height: 320px;
  /* 697x1024 (74KB), not the 5.8MB original: this flourish paints into a
     320x320 box, and the full-size file was being downloaded on every
     sub-page just to draw a decorative corner. */
  background: var(--boh-img-flourish, url('/wp-content/uploads/2026/07/boh-flower-main-697x1024.jpg')) center / contain no-repeat;
  opacity: 0.60;
  filter: saturate(0.9);
  pointer-events: none;
  z-index: 2;
  mix-blend-mode: multiply;
  transform: rotate(15deg);
}
@media (max-width: 720px) {
  .boh-page-hero__flourish { width: 200px; height: 200px; top: -30px; right: -50px; }
}
.boh-page-hero__body {
  position: relative;
  z-index: 3;
  max-width: 880px;
  margin: 0 auto;
  padding: 40px 24px 48px;
  text-align: center;
}
.boh-page-hero--left .boh-page-hero__body { text-align: left; }
.boh-page-hero__eyebrow { margin: 0 0 12px !important; }
.boh-page-hero__title {
  font-family: 'Montserrat', sans-serif;
  font-size: clamp(34px, 4.6vw, 54px);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--boh-ink);
  margin: 0 0 12px !important;
  line-height: 1.1;
}
.boh-page-hero__title em {
  color: var(--boh-magenta);
  font-style: normal;
}
.boh-page-hero__sub {
  font-size: 17px;
  color: var(--boh-ink-soft);
  line-height: 1.6;
  margin: 0 auto !important;
  max-width: 640px;
}

/* Corner flourish for section transitions on other pages - used by
   applying .boh-section--flourish to any full-width group. Adds a
   subtle flower motif to the top-right corner. */
.boh-section--flourish { position: relative; overflow: hidden; }
.boh-section--flourish::before {
  content: '';
  position: absolute;
  top: -80px;
  right: -80px;
  width: 260px;
  height: 260px;
  background: var(--boh-img-pattern, url('/wp-content/uploads/2026/07/boh-flower-pattern.jpg')) center / contain no-repeat;
  opacity: 0.28;
  pointer-events: none;
  z-index: 0;
  mix-blend-mode: multiply;
  transform: rotate(-8deg);
}
.boh-section--flourish > * { position: relative; z-index: 1; }

/* Brand accent: "Rohit Group" text is always yellow, with a stronger
   yellow highlight on hover. Applies in eyebrow, footer, anywhere. */
.boh-rohit-brand,
a.boh-rohit-brand,
.boh-rohit-brand:link,
.boh-rohit-brand:visited {
  color: var(--boh-yellow-deep) !important;
  font-weight: 800 !important;
  text-decoration: none !important;
  transition: color .2s ease, background .2s ease, box-shadow .2s ease;
  padding: 0 3px;
  border-radius: 3px;
}
.boh-rohit-brand:hover,
.boh-rohit-brand:focus {
  color: var(--boh-ink) !important;
  background: var(--boh-yellow) !important;
  box-shadow: 0 0 0 2px var(--boh-yellow);
}

/* ═══════════════════════════════════════════════════════════════════
   NEW MODULES (July 2026 feedback pass)
   ═══════════════════════════════════════════════════════════════════ */

/* ── Two-card donate layout ─────────────────────────────────────── */
.boh-donate-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  max-width: 1000px;
  margin: 32px auto 48px;
}
@media (max-width: 720px) {
  .boh-donate-cards { grid-template-columns: 1fr; }
}
/* Both cards share the same pale-yellow background (Aug-2026 feedback:
   boxes the same colour, pale yellow). */
.boh-donate-card {
  background: linear-gradient(180deg, #FEF9E0 0%, #FEF4C7 100%);
  color: var(--boh-ink);
  border-radius: 24px;
  padding: 32px 32px 28px;
  display: flex;
  flex-direction: column;
  min-height: 340px;
  box-shadow: 0 10px 24px rgba(220,179,29,0.14);
  border: 1px solid rgba(220,179,29,0.35);
  transition: transform .2s ease, box-shadow .2s ease;
}
.boh-donate-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 40px rgba(220,179,29,0.28);
}
.boh-donate-card__eyebrow {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #7a5a00;
  margin-bottom: 10px;
}
.boh-donate-card__title {
  font-family: 'Montserrat', sans-serif;
  font-size: 24px !important;
  font-weight: 800;
  color: var(--boh-ink) !important;
  margin: 0 0 12px !important;
  line-height: 1.2;
}
.boh-donate-card__lede {
  color: var(--boh-ink-soft);
  font-size: 15px;
  line-height: 1.55;
  margin: 0 0 16px !important;
}
.boh-donate-card__list {
  list-style: none;
  padding: 0;
  margin: 0 0 22px !important;
  color: var(--boh-ink);
  font-size: 14px;
}
.boh-donate-card__list li {
  padding: 6px 0 6px 22px !important;
  position: relative;
  line-height: 1.5;
}
/* .entry-content ul li::before is more specific, so match it here to keep
   the bullets in the eyebrow's olive rather than the default ember. */
.entry-content .boh-donate-card__list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 14px;
  width: 6px;
  height: 6px;
  background: #7a5a00;
  border-radius: 50%;
}
.boh-donate-card__cta {
  align-self: flex-start;
  margin-top: auto;
  display: inline-block;
  padding: 12px 22px;
  background: var(--boh-magenta);
  color: #fff !important;
  text-decoration: none !important;
  font-weight: 700;
  font-size: 14px;
  border-radius: 999px;
  transition: background .15s ease, transform .15s ease;
}
.boh-donate-card__cta:hover {
  background: var(--boh-magenta-deep, #C2005F);
  transform: translateY(-1px);
}

/* ── How it works - 4-step module ───────────────────────────────── */
.boh-how-it-works {
  max-width: 1160px;
  margin: 56px auto 64px;
  padding: 0 24px;
}
.boh-how-it-works__intro { text-align: center; margin-bottom: 40px; }
.boh-how-it-works__intro h2 {
  font-family: 'Montserrat', sans-serif;
  font-size: clamp(28px, 3.4vw, 40px);
  margin: 10px 0 8px;
  letter-spacing: -0.02em;
}
.boh-how-it-works__intro em {
  color: var(--boh-magenta);
  font-style: normal;
}
.boh-how-it-works__intro p {
  color: var(--boh-ink-soft);
  font-size: 16px;
  max-width: 620px;
  margin: 0 auto;
}
.boh-how-it-works__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
}
@media (max-width: 900px) { .boh-how-it-works__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .boh-how-it-works__grid { grid-template-columns: 1fr; } }
.boh-how-it-works__step {
  background: #fff;
  border: 1px solid var(--boh-rule);
  border-radius: 16px;
  padding: 24px 22px 22px;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.boh-how-it-works__step:hover {
  transform: translateY(-3px);
  border-color: rgba(208, 20, 130,0.35);
  box-shadow: 0 10px 24px rgba(208, 20, 130,0.10);
}
.boh-how-it-works__num {
  display: inline-block;
  background: var(--boh-yellow);
  color: var(--boh-ink);
  font-weight: 900;
  font-size: 13px;
  letter-spacing: 0.02em;
  padding: 4px 10px;
  border-radius: 999px;
  margin-bottom: 12px;
}
.boh-how-it-works__title {
  font-family: 'Montserrat', sans-serif;
  font-size: 17px !important;
  font-weight: 800;
  margin: 4px 0 8px !important;
}
.boh-how-it-works__body {
  color: var(--boh-ink-soft);
  font-size: 14px;
  line-height: 1.55;
  margin: 0 !important;
}

/* ── FAQ accordion ──────────────────────────────────────────────── */
.boh-faqs {
  max-width: 820px;
  margin: 32px auto 64px;
  padding: 0 16px;
}
.boh-faq {
  background: var(--boh-paper);
  border: 1px solid var(--boh-rule);
  border-radius: 12px;
  margin-bottom: 12px;
  overflow: hidden;
  transition: box-shadow .15s ease, border-color .15s ease;
}
.boh-faq[open] {
  background: #fff;
  border-color: rgba(208, 20, 130,0.35);
  box-shadow: 0 6px 18px rgba(208, 20, 130,0.08);
}
.boh-faq__q {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 22px;
  font-weight: 700;
  font-size: 16px;
  color: var(--boh-ink);
  list-style: none;
  user-select: none;
}
.boh-faq__q::-webkit-details-marker { display: none; }
.boh-faq__icon {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(107,45,140,0.08);
  color: var(--boh-plum);
  font-weight: 400;
  font-size: 20px;
  line-height: 1;
  transition: transform .2s ease, background .2s ease;
}
.boh-faq[open] .boh-faq__icon {
  transform: rotate(45deg);
  background: var(--boh-magenta);
  color: #fff;
}
.boh-faq__a {
  padding: 0 22px 20px;
  color: var(--boh-ink-soft);
  line-height: 1.6;
  font-size: 15px;
}
.boh-faq__a a {
  color: var(--boh-magenta);
  text-decoration: underline;
}

/* ── Gallery ────────────────────────────────────────────────────── */
.boh-gallery {
  max-width: 1160px;
  margin: 32px auto 64px;
  padding: 0 16px;
}
.boh-gallery__years {
  display: inline-flex;
  gap: 6px;
  padding: 4px;
  background: var(--boh-paper);
  border-radius: 999px;
  margin-bottom: 24px;
}
.boh-gallery__year {
  padding: 8px 18px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 14px;
  color: var(--boh-ink-soft);
  text-decoration: none !important;
  transition: background .15s ease, color .15s ease;
}
.boh-gallery__year:hover { color: var(--boh-ink); }
.boh-gallery__year.is-active {
  background: var(--boh-magenta);
  color: #fff !important;
}
.boh-gallery__empty {
  text-align: center;
  padding: 48px 24px;
  background: var(--boh-paper);
  border: 1px dashed var(--boh-rule);
  border-radius: 16px;
  color: var(--boh-ink-soft);
}
.boh-gallery__empty p { margin: 8px 0; }
/* Capped track width plus justify-content so a partial last row (or a
   gallery with only two photos) sits centered instead of hugging the
   left edge with dead space beside it. */
.boh-gallery__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 340px));
  gap: 16px;
  justify-content: center;
}
.boh-gallery__cell {
  margin: 0;
  border-radius: 12px;
  overflow: hidden;
  background: var(--boh-paper);
  position: relative;
  aspect-ratio: 4 / 3;
}
/* Each tile is a button so the viewer is reachable by keyboard too. */
.boh-gallery__open {
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
  position: relative;
}
.boh-gallery__open:focus-visible {
  outline: 3px solid var(--boh-magenta);
  outline-offset: 2px;
}
.boh-gallery__cell img,
.boh-gallery__cell video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .35s cubic-bezier(.2,.8,.2,1);
}
.boh-gallery__open:hover img,
.boh-gallery__open:hover video { transform: scale(1.04); }
/* Play badge over video tiles */
.boh-gallery__play {
  position: absolute;
  top: 50%; left: 50%;
  width: 54px; height: 54px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: rgba(31,26,36,0.55);
  backdrop-filter: blur(2px);
  pointer-events: none;
}
.boh-gallery__play::after {
  content: '';
  position: absolute;
  top: 50%; left: 54%;
  transform: translate(-50%, -50%);
  border-left: 16px solid #fff;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
}

/* ── Gallery lightbox ─────────────────────────────────────────────── */
.boh-lightbox {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(18,14,22,0.92);
  backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(16px, 4vw, 56px);
}
.boh-lightbox[hidden] { display: none; }
.boh-lightbox__stage {
  margin: 0;
  max-width: min(1200px, 92vw);
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.boh-lightbox__media {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
}
.boh-lightbox__media img,
.boh-lightbox__media video {
  max-width: 100%;
  max-height: 78vh;
  width: auto;
  height: auto;
  border-radius: 12px;
  box-shadow: 0 24px 70px rgba(0,0,0,0.5);
  display: block;
}
.boh-lightbox__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  color: rgba(255,255,255,0.9);
  font-size: 14px;
}
.boh-lightbox__counter {
  color: rgba(255,255,255,0.55);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.boh-lightbox__close,
.boh-lightbox__nav {
  position: absolute;
  background: rgba(255,255,255,0.12);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: 999px;
  cursor: pointer;
  line-height: 1;
  transition: background .15s ease, transform .15s ease;
}
.boh-lightbox__close:hover,
.boh-lightbox__nav:hover { background: var(--boh-magenta); border-color: var(--boh-magenta); }
.boh-lightbox__close {
  top: 18px; right: 18px;
  width: 44px; height: 44px;
  font-size: 26px;
}
.boh-lightbox__nav {
  top: 50%;
  width: 52px; height: 52px;
  font-size: 30px;
  transform: translateY(-50%);
}
.boh-lightbox__nav--prev { left: 18px; }
.boh-lightbox__nav--next { right: 18px; }
.boh-lightbox__nav[hidden] { display: none; }
@media (max-width: 720px) {
  .boh-lightbox__nav { width: 42px; height: 42px; font-size: 24px; }
  .boh-lightbox__nav--prev { left: 8px; }
  .boh-lightbox__nav--next { right: 8px; }
  .boh-lightbox__meta { flex-direction: column; align-items: flex-start; gap: 6px; }
}
@media (prefers-reduced-motion: reduce) {
  .boh-gallery__cell img,
  .boh-gallery__cell video,
  .boh-lightbox__close,
  .boh-lightbox__nav { transition: none; }
  .boh-gallery__open:hover img,
  .boh-gallery__open:hover video { transform: none; }
}
.boh-gallery__cell figcaption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 10px 14px;
  color: #fff;
  font-size: 13px;
  background: linear-gradient(180deg, transparent, rgba(0,0,0,0.6));
}

/* ── About page - module rows (alternating image/copy) ─────────── */
.boh-about-modules { max-width: 1120px; margin: 40px auto 32px; padding: 0 24px; }
.boh-about-module {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 44px;
  align-items: center;
  margin-bottom: 72px;
}
.boh-about-module:nth-child(even) .boh-about-module__image { order: 2; }
@media (max-width: 820px) {
  .boh-about-module { grid-template-columns: 1fr; gap: 24px; }
  .boh-about-module:nth-child(even) .boh-about-module__image { order: 0; }
}
.boh-about-module__image {
  background: var(--boh-paper);
  border-radius: 16px;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--boh-ink-soft);
  font-size: 13px;
  font-style: italic;
}
.boh-about-module__image img {
  width: 100%; height: 100%; object-fit: cover;
}
.boh-about-module__copy h3 {
  font-family: 'Montserrat', sans-serif;
  font-size: clamp(22px, 2.4vw, 28px);
  margin: 0 0 12px;
  letter-spacing: -0.02em;
}
.boh-about-module__copy p {
  color: var(--boh-ink-soft);
  line-height: 1.65;
  margin: 0 0 14px;
  font-size: 16px;
}
.boh-about-module__cta {
  display: inline-block;
  margin-top: 6px;
  padding: 10px 22px;
  background: var(--boh-magenta);
  color: #fff !important;
  text-decoration: none;
  font-weight: 700;
  font-size: 14px;
  border-radius: 999px;
}
.boh-about-module__cta:hover { background: var(--boh-magenta-deep, #C2005F); }

/* ═══════════════════════════════════════════════════════════════════
   HOME PAGE - SUMMARY/ORIENTATION SECTIONS
   Shared pill-eyebrow + heading + subtext pattern across What/Why/How/
   When/Explore. Tight, scannable copy; each section links to its own
   dedicated page rather than duplicating the full copy.
   ═══════════════════════════════════════════════════════════════════ */

.boh-home-section {
  max-width: 780px;
  margin: 0 auto;
  padding: 0 24px;
  text-align: center;
}
.boh-home-section__eyebrow { margin: 0 0 14px; }
.boh-home-section__heading {
  font-family: 'Montserrat', system-ui, -apple-system, sans-serif;
  font-weight: 800;
  font-size: clamp(30px, 3.4vw, 44px);
  letter-spacing: -0.02em;
  line-height: 1.10;
  color: var(--boh-ink);
  margin: 0 0 18px;
  text-wrap: balance;
}
.boh-home-section__heading em {
  font-style: normal;
  color: var(--boh-magenta);
  font-weight: 800;
}
.boh-home-section__lede {
  font-size: 17px;
  line-height: 1.65;
  color: var(--boh-ink-soft);
  margin: 0 auto 22px;
  max-width: 62ch;
}
.boh-home-section__meta {
  font-size: 15px;
  color: rgba(255,255,255,0.78);
  margin: 0 auto 24px;
}
.boh-home-section__meta a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.boh-home-section__cta { margin: 4px 0 0; }
.boh-home-section__link {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.01em;
  color: var(--boh-magenta);
  text-decoration: none;
  border-bottom: 1.5px solid rgba(208,20,130,0.35);
  padding-bottom: 2px;
  transition: color .15s ease, border-color .15s ease;
}
.boh-home-section__link:hover {
  color: var(--boh-magenta-deep, #a20e63);
  border-color: var(--boh-magenta);
}
.boh-home-section__link span { margin-left: 4px; display: inline-block; transition: transform .2s ease; }
.boh-home-section__link:hover span { transform: translateX(3px); }

/* Section on the dark WHEN band - invert link color for contrast */
.boh-home-section--when .boh-home-section__link {
  color: var(--boh-yellow);
  border-color: rgba(249,209,53,0.35);
}
.boh-home-section--when .boh-home-section__link:hover {
  color: #fff;
  border-color: var(--boh-yellow);
}

/* Mini stats row on WHY - three quick numbers, no dark card treatment */
.boh-home-mini-stats {
  display: flex;
  justify-content: center;
  gap: clamp(24px, 4vw, 56px);
  margin: 26px auto 22px;
  flex-wrap: wrap;
}
.boh-home-mini-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.boh-home-mini-stat b {
  font-family: 'Montserrat', sans-serif;
  font-weight: 800;
  font-size: clamp(28px, 3vw, 36px);
  letter-spacing: -0.02em;
  color: var(--boh-magenta);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.boh-home-mini-stat span {
  font-size: 12px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--boh-ink-soft);
  font-weight: 600;
}

/* ── Compact variant of the How-it-works grid (num + title only) ── */
.boh-how-it-works--compact .boh-how-it-works__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
  max-width: 1100px;
  margin: 32px auto 0;
  padding: 0 24px;
}
.boh-how-it-works--compact .boh-how-it-works__step {
  background: #FFFFFF;
  border: 1px solid rgba(10,10,10,0.06);
  border-radius: 18px;
  padding: 22px 18px;
  text-align: left;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.boh-how-it-works--compact .boh-how-it-works__step:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 32px -18px rgba(208,20,130,0.28);
  border-color: rgba(208,20,130,0.20);
}
.boh-how-it-works--compact .boh-how-it-works__num {
  font-family: 'Montserrat', sans-serif;
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.12em;
  color: var(--boh-magenta);
  margin-bottom: 6px;
}
.boh-how-it-works--compact .boh-how-it-works__title {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 17px;
  letter-spacing: -0.01em;
  color: var(--boh-ink);
  line-height: 1.25;
  margin: 0;
}
@media (max-width: 900px) {
  .boh-how-it-works--compact .boh-how-it-works__grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 520px) {
  .boh-how-it-works--compact .boh-how-it-works__grid { grid-template-columns: 1fr; }
}

/* ── QUICK LINKS grid ─────────────────────────────────────── */
.boh-quick-links {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  max-width: 1100px;
  margin: 32px auto 0;
  padding: 0 24px;
}
.boh-quick-links__card {
  display: block;
  background: #FFFFFF;
  border: 1px solid rgba(10,10,10,0.08);
  border-radius: 18px;
  padding: 20px 22px;
  text-decoration: none;
  color: var(--boh-ink);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease;
}
.boh-quick-links__card:hover,
.boh-quick-links__card:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 18px 40px -22px rgba(208,20,130,0.30);
  border-color: rgba(208,20,130,0.30);
  background: #FFF9FC;
  outline: none;
}
.boh-quick-links__card:focus-visible {
  outline: 2px solid var(--boh-magenta);
  outline-offset: 3px;
}
.boh-quick-links__title {
  font-family: 'Montserrat', sans-serif;
  font-weight: 800;
  font-size: 18px;
  letter-spacing: -0.01em;
  color: var(--boh-ink);
  margin-bottom: 6px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}
.boh-quick-links__arrow {
  color: var(--boh-magenta);
  transition: transform .2s ease;
  font-weight: 400;
}
.boh-quick-links__card:hover .boh-quick-links__arrow { transform: translateX(3px); }
.boh-quick-links__desc {
  font-size: 14px;
  line-height: 1.5;
  color: var(--boh-ink-soft);
}
@media (max-width: 900px) {
  .boh-quick-links { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 520px) {
  .boh-quick-links { grid-template-columns: 1fr; }
}

/* ── Polish pass: classy/sharp/intuitive ─────────────────────────── */

/* Scroll cue - quiet chevron line at the hero's bottom center.
   Invites the first scroll without shouting. */
.boh-scroll-cue {
  /* !important beats `.boh-hero > :not(...)` (4-class specificity) which
     forces position:relative on direct cover children - that turned our
     left:50% into a relative shift and shoved the cue to the far right. */
  position: absolute !important;
  left: 50% !important;
  right: auto !important;
  top: auto !important;
  bottom: 28px !important;
  transform: translateX(-50%);
  width: 46px;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5;
  border-radius: 50%;
  background: rgba(255,255,255,0.65);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(10,10,10,0.08);
  box-shadow: 0 6px 20px -8px rgba(31,26,36,0.30);
  transition: background .2s ease, transform .2s ease;
}
.boh-scroll-cue:hover {
  background: rgba(255,255,255,0.92);
  transform: translateX(-50%) translateY(-2px) !important;
}
.boh-scroll-cue span {
  display: block;
  width: 11px;
  height: 11px;
  margin-top: -4px;
  border-right: 2.5px solid var(--boh-ink);
  border-bottom: 2.5px solid var(--boh-ink);
  transform: rotate(45deg);
  opacity: 0.8;
  animation: bohCueDrift 2.2s ease-in-out infinite;
}
.boh-scroll-cue:hover span { opacity: 1; }
.boh-scroll-cue:focus-visible {
  outline: 2px solid var(--boh-magenta);
  outline-offset: 3px;
}
@keyframes bohCueDrift {
  0%, 100% { transform: rotate(45deg) translate(0, 0); }
  50%      { transform: rotate(45deg) translate(4px, 4px); }
}
@media (prefers-reduced-motion: reduce) {
  .boh-scroll-cue span { animation: none; }
}
@media (max-height: 600px) {
  .boh-scroll-cue { display: none; }
}

/* Labelled variant - the "See how it works" copy lives inside the scroll
   button rather than sitting loose above it, so the hero ends on a single
   call to action. Frosted pill with the chevron in a brand-magenta disc;
   the whole button bobs gently to read as "there is more below". */
.boh-scroll-cue--labelled {
  width: auto !important;
  height: auto !important;
  gap: 14px;
  padding: 8px 8px 8px 26px;
  border-radius: 999px;
  background: rgba(255,255,255,0.90) !important;
  backdrop-filter: blur(16px) saturate(150%);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  border: 1px solid rgba(255,255,255,0.85);
  box-shadow: 0 14px 38px -14px rgba(31,26,36,0.45),
              0 0 0 1px rgba(10,10,10,0.04);
  text-decoration: none !important;
  animation: bohCueBob 3.4s ease-in-out infinite;
  transition: box-shadow .25s ease, background .25s ease;
}
.boh-scroll-cue--labelled:hover {
  background: #fff !important;
  box-shadow: 0 22px 48px -16px rgba(208,20,130,0.45),
              0 0 0 1px rgba(208,20,130,0.18);
}
/* The bob lives on the element, so the centring translate has to ride
   along with it rather than being overwritten by the hover rule. */
@keyframes bohCueBob {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%      { transform: translateX(-50%) translateY(-6px); }
}
.boh-scroll-cue--labelled:hover { animation-play-state: paused; }

.boh-scroll-cue__label {
  /* Explicit resets: `.boh-scroll-cue span` styles any child span as the
     chevron, which would render this text as a rotated fragment. */
  display: inline-block !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  border: 0 !important;
  transform: none !important;
  animation: none !important;
  opacity: 1 !important;
  font-family: 'Montserrat', system-ui, -apple-system, sans-serif;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--boh-ink);
  white-space: nowrap;
}
.boh-scroll-cue__arrow {
  display: flex !important;
  position: relative;
  width: 34px !important;
  height: 34px !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 50%;
  background: var(--boh-magenta);
  transform: none !important;
  animation: none !important;
  opacity: 1 !important;
  flex: 0 0 auto;
  box-shadow: 0 6px 16px -6px rgba(208,20,130,0.65);
  transition: transform .25s cubic-bezier(.2,.8,.2,1), background .2s ease;
}
.boh-scroll-cue--labelled:hover .boh-scroll-cue__arrow {
  transform: scale(1.08) !important;
  background: var(--boh-magenta-deep, #C2005F);
}
/* Chevron drawn on the pseudo-element so the disc itself stays still */
.boh-scroll-cue__arrow::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 7px;
  height: 7px;
  border-right: 2.5px solid #fff;
  border-bottom: 2.5px solid #fff;
  transform: translate(-50%, -65%) rotate(45deg);
  animation: bohCueNudge 2.2s ease-in-out infinite;
}
@keyframes bohCueNudge {
  0%, 100% { transform: translate(-50%, -65%) rotate(45deg); }
  50%      { transform: translate(-50%, -25%) rotate(45deg); }
}
@media (prefers-reduced-motion: reduce) {
  .boh-scroll-cue--labelled { animation: none; transform: translateX(-50%); }
  .boh-scroll-cue__arrow::after { animation: none; }
}
@media (max-width: 480px) {
  .boh-scroll-cue--labelled { padding: 7px 7px 7px 20px; gap: 11px; }
  .boh-scroll-cue__label { font-size: 11px; letter-spacing: 0.08em; }
  .boh-scroll-cue__arrow { width: 30px !important; height: 30px !important; }
}

/* Mini-stats - hairline separators for a sharper, more deliberate row */
.boh-home-mini-stat + .boh-home-mini-stat {
  border-left: 1px solid rgba(10,10,10,0.12);
  padding-left: clamp(24px, 4vw, 56px);
}

/* Countdown digits everywhere: tabular so they don't jitter as they tick */
.boh-countdown__num {
  font-variant-numeric: tabular-nums;
}

/* WHEN band - countdown restyled for the dark ground: translucent cells,
   yellow digits, muted uppercase labels. The default white cards are for
   light sections only. */
.boh-when-band .boh-countdown__unit {
  background: rgba(255,255,255,0.05);
  border-color: rgba(255,255,255,0.14);
  box-shadow: none;
}
.boh-when-band .boh-countdown__num {
  color: var(--boh-yellow);
  font-weight: 700;
  font-size: 30px;
}
.boh-when-band .boh-countdown__label {
  color: rgba(255,255,255,0.55);
}
/* Outline button on the dark band needs light text */
.boh-when-band .wp-block-button.is-style-outline .wp-block-button__link {
  color: #fff !important;
  border-color: rgba(255,255,255,0.5) !important;
  background: transparent !important;
}
.boh-when-band .wp-block-button.is-style-outline .wp-block-button__link:hover {
  background: #fff !important;
  color: var(--boh-ink) !important;
  border-color: #fff !important;
}

/* Light WHEN band - since Aug-2026 this section leads the page directly
   under the hero, on white rather than ink. Undo the dark-band treatment
   above so the base (light) countdown styling shows through. Must stay
   after those rules: same specificity, so source order decides. */
.boh-when-band--light {
  background: #fff;
}
.boh-when-band--light .boh-home-section__heading { color: var(--boh-ink); }
.boh-when-band--light .boh-home-section__meta { color: var(--boh-ink-soft); }
.boh-when-band--light .boh-countdown__unit {
  background: #fff;
  border-color: var(--boh-rule);
  box-shadow: 0 2px 10px rgba(31,26,36,0.05);
}
.boh-when-band--light .boh-countdown__num { color: var(--boh-plum); }
.boh-when-band--light .boh-countdown__label { color: var(--boh-ink-mute); }

/* ── Sponsor logo wall ───────────────────────────────────────────────
   A stock WordPress Gallery block with .boh-sponsor-logos, so the team
   can add logos in the editor with no markup. Each logo sits on a white
   card and is contained rather than cropped, so mixed aspect ratios and
   transparent PNGs all read evenly. */
.boh-sponsor-logos.wp-block-gallery {
  display: grid !important;
  /* Capped tracks + centering so a handful of logos stays centered
     rather than stretching across the row. */
  grid-template-columns: repeat(auto-fit, minmax(180px, 220px));
  justify-content: center;
  gap: 20px;
  max-width: 960px;
  margin: 0 auto 28px;
}
.boh-sponsor-logos.wp-block-gallery .wp-block-image {
  margin: 0 !important;
  width: auto !important;
  background: #fff;
  border: 1px solid rgba(31,26,36,0.08);
  border-radius: 16px;
  padding: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 120px;
  box-shadow: 0 4px 14px rgba(31,26,36,0.05);
  transition: transform .2s ease, box-shadow .2s ease;
}
.boh-sponsor-logos.wp-block-gallery .wp-block-image:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(31,26,36,0.10);
}
/* Core ships `.wp-block-gallery.has-nested-images figure.wp-block-image > img`
   with object-fit:cover and width/height 100%, which crops wide marks such as
   PCL's. Match that selector's specificity so the logo is contained instead.
   The generic photo treatment further up (.entry-content .wp-block-image img)
   also has to be undone here: its border-radius literally clips the corners
   off artwork that reaches the edge of its box, and its shadow reads as a
   second card floating behind each logo. */
.boh-sponsor-logos.wp-block-gallery figure.wp-block-image > img,
.boh-sponsor-logos.wp-block-gallery img {
  width: auto !important;
  height: auto !important;
  max-width: 100% !important;
  max-height: 72px !important;
  object-fit: contain !important;
  flex: 0 0 auto !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: none !important;
}
.boh-sponsor-logos.wp-block-gallery figure.wp-block-image:hover img {
  transform: none !important;
}
.boh-sponsor-logos.wp-block-gallery figure.wp-block-image {
  flex-grow: 0 !important;
  overflow: visible !important;
}
/* An empty gallery (no logos added yet) should take up no space */
.boh-sponsor-logos.wp-block-gallery:empty { display: none !important; }

/* Explore band sits on paper-2; keep the card whites crisp on it */
.boh-explore-band .boh-quick-links__card { border-color: rgba(10,10,10,0.06); }

/* Reveal-stagger support for grids with up to 6 children */
.boh-reveal-stagger.is-in > *:nth-child(6) { transition-delay: .55s; opacity: 1; transform: none; }

.boh-js .boh-how-it-works--compact .boh-how-it-works__grid.boh-reveal-stagger > *,
.boh-js .boh-quick-links.boh-reveal-stagger > * {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .6s cubic-bezier(.2,.8,.2,1), transform .6s cubic-bezier(.2,.8,.2,1);
}
/* MUST come after the hide rule above (equal specificity - document
   order decides), otherwise the cards stay invisible after .is-in. */
.boh-how-it-works--compact .boh-how-it-works__grid.boh-reveal-stagger.is-in > *,
.boh-quick-links.boh-reveal-stagger.is-in > * {
  opacity: 1;
  transform: none;
}

/* ═══════════════════════════════════════════════════════════════════
   HERO GRID - asymmetric two-column composition.
   Copy block left (eyebrow → h1 → lede → CTA → meta), animated brand
   mark right on a frosted disc. Kept at the end of the sheet so it
   wins the cascade against the older centered-cover rules.
   ═══════════════════════════════════════════════════════════════════ */
.wp-block-cover.boh-hero .wp-block-cover__inner-container > .boh-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.75fr);
  align-items: center;
  gap: clamp(40px, 7vw, 130px);
  width: 100%;
  max-width: 1560px;
  padding-left: clamp(28px, 4vw, 64px);
  padding-right: clamp(28px, 4vw, 64px);
  box-sizing: border-box;
}

/* Copy column - left-aligned editorial stack */
.wp-block-cover.boh-hero .boh-hero-copy {
  text-align: center;
}
.wp-block-cover.boh-hero .boh-hero-copy .boh-hero-copy__eyebrow {
  text-align: center !important;
  margin: 0 0 10px !important;
  max-width: none !important;
}
/* Eyebrow pill stays on one line - the base pill is inline-flex with
   flex-wrap:wrap, so nowrap must be forced at the flex level too */
.wp-block-cover.boh-hero .boh-hero-copy .boh-eyebrow {
  white-space: nowrap;
  flex-wrap: nowrap !important;
  font-size: clamp(10px, 0.82vw, 12px) !important;
}
/* Headline is hard-broken in the markup: "Hope arrives in a" / "basket."
   Size is capped so line one always fits the copy column. */
.wp-block-cover.boh-hero .boh-hero-copy h1 {
  font-size: clamp(34px, 4.2vw, 62px) !important;
  text-align: center !important;
  margin: 18px 0 16px !important;
  max-width: none !important;
  line-height: 1.05 !important;
  white-space: nowrap;
}
.wp-block-cover.boh-hero .boh-hero-copy h1 br + em { white-space: normal; }
.wp-block-cover.boh-hero .boh-hero-copy .boh-hero-copy__lede {
  text-align: center !important;
  font-size: 17px !important;
  line-height: 1.6 !important;
  max-width: 62ch !important;
  margin: 0 auto 26px !important;
}
.wp-block-cover.boh-hero .boh-hero-copy .boh-hero-ctas {
  display: flex;
  align-items: center;
  justify-content: center; /* centered on the screen */
  gap: 20px;
  /* auto top margin pushes the RSVP row to the hero's bottom; the
     min-height keeps at least a generous gap under the lede */
  margin: auto 0 16px;
  padding-top: clamp(56px, 8vh, 96px);
}
.wp-block-cover.boh-hero .boh-hero-copy .boh-hero-copy__how {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 15px;
  color: var(--boh-ink) !important;
  text-decoration: none;
  border-bottom: 1.5px solid rgba(10,10,10,0.25);
  padding-bottom: 2px;
  transition: color .15s ease, border-color .15s ease;
}
.wp-block-cover.boh-hero .boh-hero-copy .boh-hero-copy__how:hover {
  color: var(--boh-magenta) !important;
  border-color: var(--boh-magenta);
}
.wp-block-cover.boh-hero .boh-hero-copy .boh-hero-copy__meta {
  text-align: center !important;
  font-size: 14px !important;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--boh-ink-soft) !important;
  margin: 0 auto !important;
  max-width: none !important;
}

/* Single-column variant: headline + logo share one row inside the copy */
.wp-block-cover.boh-hero .wp-block-cover__inner-container > .boh-hero-grid--stack {
  grid-template-columns: 1fr;
  max-width: 1280px;
  height: 100%;
  align-items: stretch;
}
/* Copy is a full-height column with the entire stack (block + CTAs +
   meta) centered - equal space above and below. */
.wp-block-cover.boh-hero .boh-hero-grid--stack .boh-hero-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
}

/* Head row - the two-line headline on the left, logo disc on the right */
.wp-block-cover.boh-hero .boh-hero-headrow {
  display: flex;
  align-items: center;
  justify-content: center; /* head block centered as one unit */
  gap: clamp(24px, 3.5vw, 56px);
  margin: 18px 0 16px;
}
.wp-block-cover.boh-hero .boh-hero-headrow h1 {
  margin: 0 !important;
  flex: 0 1 auto;
}
/* Eyebrow + headline stacked, left-aligned, beside the logo */
.wp-block-cover.boh-hero .boh-hero-headcol {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
}
.wp-block-cover.boh-hero .boh-hero-headcol .boh-hero-copy__eyebrow {
  margin: 0 auto !important;
  /* Was `left`, left over from an earlier left-aligned hero. It sits after
     the centring rule with equal specificity, so it quietly won and pushed
     the badge 67px off centre on desktop. */
  text-align: center !important;
}

/* Rectangular hero block: the whole unit (logo | eyebrow-over-headline,
   lede underneath) is one fit-content rectangle centered on screen.
   Logo top aligns with the eyebrow top; the lede's left edge aligns
   with the logo's left edge. */
.wp-block-cover.boh-hero .boh-hero-block {
  width: fit-content;
  max-width: 100%;
  margin: 0 auto;
}
/* Centred as one column - the block was originally left-aligned beside the
   hero logo disc, which no longer exists. */
.wp-block-cover.boh-hero .boh-hero-block .boh-hero-headrow {
  justify-content: center;
  align-items: center;
  margin: 0;
}
.wp-block-cover.boh-hero .boh-hero-block .boh-hero-copy__lede {
  text-align: center !important;
  margin: 20px auto 0 !important;
  max-width: 60ch !important;
}
.wp-block-cover.boh-hero .boh-hero-headrow .boh-hero-mark {
  margin: 0;
  flex: 0 0 auto;
  order: -1; /* logo sits to the LEFT of the headline text */
  padding: clamp(14px, 1.6vw, 22px);
  border-radius: 50%;
  background: rgba(255,255,255,0.55);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.75);
  box-shadow: 0 34px 90px -34px rgba(208,20,130,0.40);
}
.wp-block-cover.boh-hero .boh-hero-headrow .boh-hero-mark__img {
  display: block;
  width: clamp(88px, 8.5vw, 120px);
  height: auto;
}

/* Slideshow pause/play toggle - frosted disc, bottom-right corner.
   !importants beat the `.boh-hero > :not(...)` position:relative rule. */
.wp-block-cover.boh-hero .boh-hero-pause {
  position: absolute !important;
  /* Bottom-left: the section up/down controls are fixed to the bottom-right
     and the two sat on top of each other once the hero filled the screen. */
  left: 24px !important;
  bottom: 24px !important;
  right: auto !important;
  top: auto !important;
  z-index: 6;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: rgba(255,255,255,0.65);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(10,10,10,0.08);
  box-shadow: 0 6px 20px -8px rgba(31,26,36,0.30);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: background .2s ease, transform .2s ease;
}
.wp-block-cover.boh-hero .boh-hero-pause:hover {
  background: rgba(255,255,255,0.92);
  transform: translateY(-2px);
}
.wp-block-cover.boh-hero .boh-hero-pause:focus-visible {
  outline: 2px solid var(--boh-magenta);
  outline-offset: 3px;
}
/* Pause glyph: two bars */
.boh-hero-pause__icon {
  display: block;
  width: 10px;
  height: 12px;
  border-left: 3px solid var(--boh-ink);
  border-right: 3px solid var(--boh-ink);
  box-sizing: border-box;
  opacity: 0.8;
}
/* Play glyph: triangle */
.boh-hero-pause.is-paused .boh-hero-pause__icon {
  width: 0;
  height: 0;
  border-left: 11px solid var(--boh-ink);
  border-right: 0;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  margin-left: 3px;
}

/* Stacked mobile: mark above the copy, everything centered */
@media (max-width: 880px) {
  .wp-block-cover.boh-hero .wp-block-cover__inner-container > .boh-hero-grid {
    grid-template-columns: 1fr;
    gap: 22px;
  }
  .wp-block-cover.boh-hero .boh-hero-headrow {
    flex-direction: column;
    gap: 20px;
  }
  .wp-block-cover.boh-hero .boh-hero-headcol { align-items: center; }
  .wp-block-cover.boh-hero .boh-hero-headrow .boh-hero-mark { order: -1; padding: 16px; }
  .wp-block-cover.boh-hero .boh-hero-headrow .boh-hero-mark__img {
    width: min(34vw, 150px);
  }
  .wp-block-cover.boh-hero .boh-hero-copy,
  .wp-block-cover.boh-hero .boh-hero-copy .boh-hero-copy__eyebrow,
  .wp-block-cover.boh-hero .boh-hero-copy h1,
  .wp-block-cover.boh-hero .boh-hero-copy .boh-hero-copy__lede,
  .wp-block-cover.boh-hero .boh-hero-copy .boh-hero-copy__meta {
    text-align: center !important;
  }
  /* Keep the one-line eyebrow + two-line headline fitting on phones */
  .wp-block-cover.boh-hero .boh-hero-copy .boh-eyebrow {
    font-size: 9px !important;
    letter-spacing: 0.08em !important;
  }
  .wp-block-cover.boh-hero .boh-hero-copy h1 {
    font-size: clamp(28px, 7vw, 40px) !important;
  }
  .wp-block-cover.boh-hero .boh-hero-copy .boh-hero-copy__lede {
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .wp-block-cover.boh-hero .boh-hero-copy .boh-hero-ctas {
    justify-content: center;
    flex-wrap: wrap;
    gap: 14px;
  }
  /* The inner container is forced to padding:0 higher up, which leaves the
     hero copy flush to both screen edges on a phone. Restore a gutter, and
     let the long eyebrow wrap instead of forcing the column wider than the
     viewport. */
  .wp-block-cover.boh-hero .wp-block-cover__inner-container {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  .wp-block-cover.boh-hero .boh-hero-copy,
  .wp-block-cover.boh-hero .boh-hero-grid,
  .wp-block-cover.boh-hero .boh-hero-block {
    min-width: 0 !important;
    max-width: 100% !important;
  }
  .wp-block-cover.boh-hero .boh-hero-copy .boh-eyebrow {
    white-space: normal !important;
    max-width: 100%;
  }
  /* Keep "Rohit Group" from being split across lines mid-phrase */
  .wp-block-cover.boh-hero .boh-hero-copy .boh-rohit-brand { white-space: nowrap; }
  .wp-block-cover.boh-hero .boh-hero-copy .boh-hero-copy__lede {
    max-width: 100% !important;
  }
}

/* The hero slides deliberately scale past 100% for the drift effect, which
   adds a few px of horizontal scroll. Clip it at the hero rather than on
   html/body: overflow on body turns body into a scroll container, and the
   front-page scroll snapping is declared on html - the snap then has no
   effect at all. Fix the overflow where it originates. */
.wp-block-cover.boh-hero {
  overflow: hidden;
}

/* On the narrowest phones the hero eyebrow is a long single phrase; shrink
   it a step further so it stays on one line instead of breaking into
   ragged fragments around the "Rohit Group" link. */
@media (max-width: 480px) {
  .wp-block-cover.boh-hero .boh-hero-copy .boh-eyebrow {
    font-size: 8px !important;
    letter-spacing: 0.05em !important;
    padding: 6px 10px !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  .boh-how-it-works--compact .boh-how-it-works__grid.boh-reveal-stagger > *,
  .boh-quick-links.boh-reveal-stagger > * { opacity: 1; transform: none; transition: none; }
}

/* ── Sponsorship-form boards (Aug-2026 feedback) ─────────────────────
   The GiveWP "Sponsor a basket" form (#give-form, Donate page) and the
   CF7 "Sponsorship commitment" form (#sponsorship-form, Sponsor page)
   sit on a framed board so they read as one distinct unit. */
.entry-content #give-form,
.entry-content #sponsorship-form {
  background: #FFFDF4;
  border: 2px solid rgba(220, 179, 29, 0.45);
  border-radius: 28px;
  box-shadow: 0 14px 36px rgba(31, 26, 36, 0.08);
  max-width: 960px;
  margin-left: auto !important;
  margin-right: auto !important;
  margin-top: 48px !important;
  margin-bottom: 64px !important;
  padding: 48px clamp(20px, 5vw, 56px) 56px !important;
}
@media (max-width: 720px) {
  .entry-content #give-form,
  .entry-content #sponsorship-form {
    border-radius: 20px;
    margin-left: 12px !important;
    margin-right: 12px !important;
  }
}


/* ───────────────────────────────────────────────────────────────────
   FRONT-PAGE TILES
   Each top-level section on the home page becomes a full-viewport panel
   that the scroll snaps to, so a small scroll advances a whole "view"
   rather than drifting between sections. Measured first: every section's
   content is between 0.36 and 0.76 of a viewport at desktop sizes, so
   nothing is taller than its panel and no content can become unreachable.

   :has() puts the snap on the scroll container (html) while keying off
   the body class WordPress gives the front page. Browsers without :has()
   simply scroll normally.
   ─────────────────────────────────────────────────────────────────── */
@media (min-width: 901px) and (min-height: 700px) {
  html:has(body.home) {
    /* Proximity rather than mandatory: the JS below animates the actual
       panel-to-panel movement, and mandatory would fight it mid-flight. */
    /* No snapping. Scrolling is the browser's, and the up/down controls
       handle panel-to-panel movement - snap fought both. */
    scroll-snap-type: none;
    /* The 100px anchor offset above exists so #links clear the sticky
       header. Applied to a full-viewport panel it lands the panel 100px
       down and leaves a slice of the previous one on screen, so it is
       cancelled here. The header is transparent over the panels and their
       content is vertically centred, so no offset is needed. */
    scroll-padding-top: 0;
  }
  body.home .entry-content > *[id],
  body.home .boh-footer {
    scroll-margin-top: 0;
  }
  /* Each section is one screen. That is the whole point of the tile feel:
     you arrive at a view, it fills the window, and the next nudge takes
     you to the next one.

     The earlier complaint that views "took too much height" was not caused
     by the 100vh itself - it was that the sections' own 72–88px of padding
     sat OUTSIDE that height, so a panel measured 100vh + 176px and no view
     ever fit the window. `box-sizing: border-box` puts the padding inside
     the 100vh, so a panel is exactly one screen; it only grows past that
     if its content genuinely needs more room. */
  /* Sections are as tall as their contents need, not as tall as the window.
     Forcing every one to 100vh left a paragraph and a button floating in
     most of a screen of nothing. The hero keeps its full height - a
     photograph is meant to fill the view. */
  body.home .entry-content > .wp-block-cover,
  body.home .entry-content > .wp-block-group {
    box-sizing: border-box;
    min-height: 0;
    scroll-snap-align: none;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  body.home .entry-content > .wp-block-cover.boh-hero { min-height: 100vh; }
  /* Padding on the groups only. The hero's slideshow controls, scroll cue
     and tour button are absolutely positioned against its padding box, so
     padding here would lift them off the bottom edge. */
  body.home .entry-content > .wp-block-group {
    padding-top: clamp(72px, 9vh, 120px) !important;
    padding-bottom: clamp(72px, 9vh, 120px) !important;
  }
  /* The hero already fills the viewport and positions its own children. */
  body.home .entry-content > .wp-block-cover.boh-hero {
    display: block;
  }
  /* The footer sits outside .entry-content, so without its own snap point
     mandatory snapping pulls the view back to the last panel and the footer
     becomes unreachable. Make it a target too. */
  body.home .boh-footer {
    scroll-snap-align: none;
  }
  /* Inner wide wrappers would otherwise stretch to the panel height and
     pull their content back to the top. */
  body.home .entry-content > .wp-block-group > .wp-block-group.alignwide {
    flex: 0 0 auto;
    width: 100%;
  }
}

/* Snapping is turned off where it would hurt: phones and short windows,
   where the same content reflows taller than one viewport, and for anyone
   who has asked for reduced motion. */
@media (prefers-reduced-motion: reduce) {
  html:has(body.home) { scroll-snap-type: none; }
}

/* ── How it works: photo per step ───────────────────────────────────────
   The compact home-page variant previously showed four bare headings; it
   now carries a photograph from a past event and a one-line detail. The
   step number sits on the image as a badge so it stays legible without
   consuming a whole row of vertical space. */
.boh-how-it-works__media {
  position: relative;
  margin: 0 0 14px;
  border-radius: 16px;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--boh-paper-2, #F7F5F0);
}
.boh-how-it-works__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  /* The generic content-image treatment adds a radius and shadow that
     would double up with the figure's own rounding. */
  border-radius: 0 !important;
  box-shadow: none !important;
  transition: transform .5s cubic-bezier(.2,.8,.2,1);
}
.boh-how-it-works__step:hover .boh-how-it-works__media img { transform: scale(1.04); }
.boh-how-it-works__media .boh-how-it-works__num {
  position: absolute;
  left: 12px;
  bottom: 12px;
  min-width: 34px;
  height: 34px;
  padding: 0 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--boh-magenta, #D01482);
  color: #fff;
  font-family: 'Montserrat', sans-serif;
  font-weight: 800;
  font-size: 14px;
  line-height: 1;
  box-shadow: 0 6px 16px -6px rgba(31,26,36,0.5);
}
.boh-how-it-works__detail {
  font-size: 14px;
  line-height: 1.55;
  color: var(--boh-ink-soft, #6B5F73);
  margin: 6px 0 0 !important;
}
@media (prefers-reduced-motion: reduce) {
  .boh-how-it-works__media img { transition: none; }
  .boh-how-it-works__step:hover .boh-how-it-works__media img { transform: none; }
}

/* ── Guided audio tour ──────────────────────────────────────────────────
   The trigger sits beside the scroll cue in the hero; the caption panel is
   fixed at the foot of the screen while the tour runs. Captions are always
   shown, so the tour is usable with the sound off, on a browser without
   speech synthesis, and by a deaf visitor. */
/* Same !important treatment as .boh-scroll-cue: `.boh-hero > :not(...)`
   forces position:relative on direct cover children, which turns left:50%
   into a relative shift and pushes the button off to the right. */
.boh-hero-tour {
  position: absolute !important;
  left: 50% !important;
  right: auto !important;
  top: auto !important;
  bottom: 104px !important;
  transform: translateX(-50%);
  z-index: 5;
}
.boh-tour-start {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 11px 22px 11px 18px;
  border: 1px solid rgba(31,26,36,0.10);
  border-radius: 999px;
  background: rgba(255,255,255,0.90);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  font-family: 'Montserrat', system-ui, sans-serif;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--boh-ink, #1F1A24);
  cursor: pointer;
  box-shadow: 0 10px 26px -12px rgba(31,26,36,0.40);
  transition: box-shadow .2s ease, background .2s ease;
}
.boh-tour-start:hover { background: #fff; box-shadow: 0 16px 34px -14px rgba(208,20,130,0.45); }
.boh-tour-start:focus-visible { outline: 3px solid var(--boh-magenta, #D01482); outline-offset: 3px; }
/* Speaker glyph drawn in CSS so the button needs no icon asset. */
.boh-tour-start__icon {
  width: 16px; height: 16px; flex: 0 0 auto; position: relative;
}
.boh-tour-start__icon::before {
  content: ''; position: absolute; left: 0; top: 4px;
  width: 0; height: 0;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  border-right: 7px solid var(--boh-magenta, #D01482);
}
.boh-tour-start__icon::after {
  content: ''; position: absolute; left: 8px; top: 2px;
  width: 7px; height: 11px;
  border-right: 2px solid var(--boh-magenta, #D01482);
  border-radius: 0 8px 8px 0;
  opacity: .85;
}

.boh-tour {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 200;
  background: rgba(31,26,36,0.94);
  backdrop-filter: blur(10px);
  color: #fff;
  padding: 16px 20px calc(16px + env(safe-area-inset-bottom, 0px));
}
.boh-tour[hidden] { display: none; }
.boh-tour__inner {
  max-width: 900px; margin: 0 auto;
  display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
}
.boh-tour__caption {
  flex: 1 1 420px; margin: 0;
  font-size: 15px; line-height: 1.55;
}
.boh-tour__controls { display: flex; align-items: center; gap: 10px; }
.boh-tour__progress {
  font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--boh-yellow, #f9d135); white-space: nowrap;
}
.boh-tour__btn {
  padding: 9px 16px; border-radius: 999px; cursor: pointer;
  border: 1px solid rgba(255,255,255,0.35);
  background: transparent; color: #fff;
  font-family: 'Montserrat', sans-serif; font-size: 12px; font-weight: 700;
}
.boh-tour__btn:hover { background: rgba(255,255,255,0.14); }
.boh-tour__btn--end { background: var(--boh-magenta, #D01482); border-color: transparent; }
.boh-tour__btn:focus-visible { outline: 2px solid var(--boh-yellow, #f9d135); outline-offset: 2px; }

@media (max-width: 720px) {
  .boh-hero-tour { bottom: 84px; }
  .boh-tour__inner { flex-direction: column; align-items: flex-start; gap: 12px; }
}

/* ═══════════════════════════════════════════════════════════════════
   MOBILE PASS - Aug 2026
   Faults found by rendering every page at 390 x 844 (iPhone 14/15) and
   measuring the DOM rather than eyeballing a desktop window scaled down.
   Each block below fixes one measured problem; the comment says which.
   ═══════════════════════════════════════════════════════════════════ */

/* 1. Hero eyebrow pill - the pill is inline-flex and an earlier rule
      forces `flex-wrap: nowrap !important`, so on a phone the words ran
      straight out of the rounded background: "INITIATIVE" rendered on
      bare photo, outside the white pill. Let it wrap and the box grows
      to contain it. Wrapping also buys back a readable font size -
      it had been squeezed to 8px trying to stay on one line. */
@media (max-width: 880px) {
  .wp-block-cover.boh-hero .boh-hero-copy .boh-eyebrow {
    flex-wrap: wrap !important;
    white-space: normal !important;
    justify-content: center !important;
    text-align: center !important;
    max-width: min(100%, 330px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    font-size: 10px !important;
    letter-spacing: 0.10em !important;
    line-height: 1.5 !important;
    padding: 7px 16px !important;
    row-gap: 2px !important;
  }
}
@media (max-width: 480px) {
  .wp-block-cover.boh-hero .boh-hero-copy .boh-eyebrow {
    font-size: 9.5px !important;
    letter-spacing: 0.08em !important;
    padding: 7px 14px !important;
    max-width: min(100%, 300px) !important;
  }
}

/* 2. "Tour the event" broke onto three lines ("TOUR" / "THE" / "EVENT")
      because the pill's padding left almost no room for the label.
      Keep it on one line and shrink to fit instead. */
@media (max-width: 720px) {
  .boh-tour-start {
    white-space: nowrap;
    font-size: 11px;
    letter-spacing: 0.06em;
    padding: 10px 18px 10px 15px;
    gap: 8px;
  }
  .boh-tour-start__icon { width: 14px; height: 14px; }
}

/* 3. Hero bottom chrome - four overlays (dots, tour, scroll cue, pause)
      were competing for the same corner on a 390px screen: the dots ran
      down the right edge through the middle of the photo, and the pause
      disc sat a hair from the scroll-cue pill. Give each one its own
      band: tour, then cue, then a horizontal dot row along the bottom
      with the pause disc tucked to the right of it. */
@media (max-width: 720px) {
  .wp-block-cover.boh-hero .boh-hero-dots {
    flex-direction: row !important;
    left: 50% !important;
    right: auto !important;
    top: auto !important;
    bottom: 16px !important;
    transform: translateX(-50%) !important;
    gap: 10px !important;
  }
  .wp-block-cover.boh-hero .boh-hero-dot {
    width: 9px !important;
    height: 9px !important;
    border-width: 1.5px !important;
  }
  .wp-block-cover.boh-hero .boh-hero-pause {
    width: 34px;
    height: 34px;
    left: 14px !important;
    right: auto !important;
    bottom: 12px !important;
  }
  .boh-hero-pause__icon { width: 8px; height: 10px; border-left-width: 2.5px; border-right-width: 2.5px; }
  .boh-hero-pause.is-paused .boh-hero-pause__icon {
    border-left-width: 9px; border-top-width: 6px; border-bottom-width: 6px;
  }
  .boh-scroll-cue,
  .boh-scroll-cue--labelled { bottom: 52px !important; }
  .boh-hero-tour { bottom: 112px !important; }
}

/* 4. WHY-section mini stats - the row is flex-wrap, so on a phone the
      three stats stacked, but the `border-left` divider meant for a
      horizontal row came with them. Each stat then sat further right
      than the one above it: a staircase with stray vertical rules.
      Three narrow columns fit fine on a phone, so keep them in a row. */
@media (max-width: 600px) {
  .boh-home-mini-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    flex-wrap: nowrap;
    margin: 22px auto 18px;
    width: 100%;
  }
  .boh-home-mini-stat { padding: 0 6px; }
  .boh-home-mini-stat + .boh-home-mini-stat { padding-left: 6px; }
  .boh-home-mini-stat b { font-size: 24px; }
  .boh-home-mini-stat span {
    font-size: 9.5px;
    letter-spacing: 0.06em;
    line-height: 1.35;
    text-align: center;
  }
}

/* 5. Sponsor logo wall - the track floor of 180px meant exactly one
      logo per row on a phone, stretching the page to 10,300px. Two
      columns halve the scroll and the marks are still legible. */
@media (max-width: 600px) {
  .boh-sponsor-logos.wp-block-gallery {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }
  .boh-sponsor-logos.wp-block-gallery .wp-block-image { padding: 14px; }
  .boh-sponsor-logos.wp-block-gallery figure.wp-block-image > img,
  .boh-sponsor-logos.wp-block-gallery img { max-height: 52px !important; }
}

/* 6. Gallery - same problem: a 260px track floor gave one photo per
      row, 35 photos deep. Two columns on a phone. */
@media (max-width: 600px) {
  .boh-gallery__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
}

/* 7. Menu button was a 38 x 32 hit area - under the 44px minimum, and
      the hardest control on the site to hit one-handed. */
.boh-nav__toggle {
  min-width: 44px;
  min-height: 44px;
  align-items: center;
  justify-content: center;
}

/* 8. Long two-tone headings ("Choose the right fit.") broke mid-phrase
      and left an orphan word on its own line. A step down in size on
      phones keeps them to sensible line breaks. */
@media (max-width: 600px) {
  .boh-page-hero__title,
  .boh-home-section__heading { font-size: clamp(26px, 8vw, 34px) !important; }
}

/* 9. Impact band - dropping to a single column below 480px turned four
      short numbers into a ~1,000px column of dead space on a phone.
      They are short enough to sit two-up all the way down. */
@media (max-width: 480px) {
  .boh-stats { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 24px 12px !important; }
  .boh-stats__cell { padding: 8px 4px; }
  .boh-stats__cell h2 { font-size: 32px !important; }
  .boh-stats__label { font-size: 10px; letter-spacing: 0.06em; }
}

/* Short desktop windows (roughly a 13" laptop once browser chrome is
   taken off): the four-steps panel carries 56px + 64px of margin around
   the card grid on top of the panel's own padding, which pushed it past
   one screen - the only view that still did not fit. Tighten the spacing
   there alone, so a normal-height display is unchanged. */
@media (min-width: 901px) and (min-height: 700px) and (max-height: 840px) {
  /* The panel padding no longer needs squeezing on a short window - nothing
     is being forced to one screen any more - but the four-steps grid still
     benefits from the tighter margins below. */
  body.home .boh-how-it-works--compact {
    margin-top: 24px !important;
    margin-bottom: 0 !important;
  }
  body.home .boh-how-it-works--compact .boh-how-it-works__grid {
    margin-top: 20px !important;
  }
  body.home .boh-how-it-works__media { aspect-ratio: 16 / 10; }
}

/* ── Add-to-calendar row ─────────────────────────────────────────────
   The row was inline-flex, so it inherited the page's left alignment and
   sat off to one side under a full-width band of event tiles. It also had
   12px of air above it and 120px below (its own 28px margin plus the two
   surrounding groups' padding), so it read as belonging to nothing.
   Centre it and even out the spacing on both sides. */
.boh-cal {
  display: flex;
  justify-content: center;
  margin: 26px auto 0;
}
.entry-content > .wp-block-group:has(.boh-cal) {
  padding-bottom: 24px !important;
}
.entry-content > .wp-block-group:has(.boh-rsvp) {
  padding-top: 16px !important;
}

/* ── Gallery sections ────────────────────────────────────────────────
   The gallery used year tabs, which hid three quarters of the photos
   behind a click. It now stacks a section per recent year and folds
   everything older into one "Past Events" section. */
.boh-gallery-section {
  margin: 0 0 64px;
}
.boh-gallery-section:last-child { margin-bottom: 0; }
.boh-gallery-section__title {
  font-family: 'Montserrat', system-ui, -apple-system, sans-serif;
  font-size: clamp(24px, 3vw, 34px);
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--boh-plum);
  text-align: center;
  margin: 0 0 6px;
}
.boh-gallery-section__note {
  text-align: center;
  margin: 0 0 22px;
  font-size: 13px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--boh-ink-soft);
  font-weight: 600;
}
/* The title carries the spacing, so the grid sits directly under it. */
.boh-gallery-section .boh-gallery { margin-top: 18px; }
@media (max-width: 600px) {
  .boh-gallery-section { margin-bottom: 44px; }
  .boh-gallery-section__title { font-size: 22px; }
  .boh-gallery-section__note { font-size: 11px; margin-bottom: 16px; }
}

/* ── No scroll-reveal on the front-page tiles ────────────────────────
   Reveal-on-scroll suits a continuously scrolled page, where content
   drifts up into view as you read. It fights a full-screen tile: the
   incoming panel sat at opacity 0 and translateY(28px) while the glide
   was already carrying it into view, then faded in and slid up 28px
   against a page scrolling down. Two opposed motions plus a fade,
   mid-scroll - which read as a flicker on arrival.

   A tile is arrived at deliberately and fills the window, so it should
   simply be there. Reveals stay on for every other page. */
@media (min-width: 901px) and (min-height: 700px) {
  body.home .entry-content > .wp-block-cover,
  body.home .entry-content > .wp-block-group,
  body.home .entry-content .boh-reveal,
  body.home .entry-content .boh-reveal-stagger > *,
  body.home .boh-footer .boh-reveal,
  body.home .boh-footer .boh-reveal-stagger > * {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
  }
}

/* ── Gallery: mosaic grid + viewer hardening ─────────────────────────
   The grid was uniform 4:3 tiles in fixed 260-340px tracks. A varied
   mosaic reads far better for event photography and gives the strongest
   frames room to breathe. Rows are a fixed height with `dense` flow, so
   the taller and wider tiles backfill gaps instead of leaving holes. */
.boh-gallery__grid {
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  grid-auto-rows: 180px;
  grid-auto-flow: dense;
  gap: 14px;
  max-width: 1180px;
  margin: 0 auto;
  justify-content: stretch;
}
/* The span rules below set each tile's shape, so a fixed ratio would fight
   them. Height comes from the row span instead. */
.boh-gallery__cell {
  aspect-ratio: auto;
  grid-column: span 1;
  grid-row: span 2;
}
/* A repeating 1-6 rhythm: one big feature, one wide, one tall, the rest
   standard. Deliberately not random - it stays stable across reloads. */
.boh-gallery__cell:nth-child(6n + 1) { grid-column: span 2; grid-row: span 3; }
.boh-gallery__cell:nth-child(6n + 4) { grid-column: span 2; grid-row: span 2; }
.boh-gallery__cell:nth-child(6n + 6) { grid-row: span 3; }
/* Video tiles are always given a generous frame - the play badge needs it. */
.boh-gallery__cell--video { grid-column: span 2; grid-row: span 2; }

@media (max-width: 1000px) {
  .boh-gallery__grid { grid-auto-rows: 150px; }
}
@media (max-width: 600px) {
  .boh-gallery__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: 120px;
    gap: 10px;
  }
  /* Two columns leaves no room for a 2-wide feature beside anything else,
     so the feature simply becomes a full-width band. */
  .boh-gallery__cell:nth-child(6n + 1) { grid-column: span 2; grid-row: span 2; }
  .boh-gallery__cell:nth-child(6n + 4) { grid-column: span 2; grid-row: span 2; }
  .boh-gallery__cell:nth-child(6n + 6) { grid-row: span 2; }
  .boh-gallery__cell--video { grid-column: span 2; }
}

/* A tile with no image yet still occupies its space rather than collapsing,
   and the tint hints that something is arriving. */
.boh-gallery__cell img { background: var(--boh-paper-2, #F7F5F0); }

/* Viewer: never taller than the screen. The stage was capped at 88vh while
   the backdrop also carried up to 56px of padding, so on a short window the
   caption row was pushed past the bottom edge. Size everything off the
   backdrop's own box instead of the viewport. */
.boh-lightbox {
  overflow: hidden;
  box-sizing: border-box;
}
/* This block used to say max-width/max-height: 100% on the stage, which
   overrode the 92vw / 88vh cap set earlier in the file - so on a wide screen
   the photograph rendered at its natural 1800x1200 and ran off the top and
   bottom of the window. And .boh-lightbox__media carried overflow: hidden
   without min-height: 0, so a flex child that could not shrink was clipped
   rather than scaled: the trimming, exactly. */
.boh-lightbox__stage {
  max-width: min(1200px, 92vw);
  max-height: 88vh;
  min-height: 0;
}
.boh-lightbox__media {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}
.boh-lightbox__media img,
.boh-lightbox__media video {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}
.boh-lightbox__meta { flex: 0 0 auto; }

/* ── Gallery: true masonry, no holes ─────────────────────────────────
   The span-based mosaic left real gaps: a 4-column grid cannot be tiled
   evenly by a 6-item pattern of 2x3 / 2x2 / 1x3 / 1x2 blocks, and
   `dense` can only backfill a hole with an item small enough to fit.
   Measured 5-6 empty tracks per section - roughly 4-7% of the grid, each
   one a ~280x180px patch of white.

   Multi-column layout cannot leave holes by construction: each column is
   a continuous stack. Every tile takes its real aspect ratio (from the
   photo's own dimensions), so the varied shapes come from the pictures
   rather than from an arbitrary pattern, and nothing is cropped. */
.boh-gallery__grid {
  display: block;
  columns: 4;
  column-gap: 14px;
  grid-template-columns: none;
  grid-auto-rows: auto;
  max-width: 1180px;
  margin: 0 auto;
}
.boh-gallery__cell {
  /* A tile must never be split across a column break. */
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  display: block;
  width: 100%;
  margin: 0 0 14px;
  aspect-ratio: var(--boh-ar, 4 / 3);
  grid-column: auto;
  grid-row: auto;
}
/* True ratios mean the image already fills its frame exactly; `cover`
   stays as a guard for the fallback 4:3 tiles. */
.boh-gallery__cell img,
.boh-gallery__cell video { object-fit: cover; }

@media (max-width: 1100px) { .boh-gallery__grid { columns: 3; } }
@media (max-width: 760px)  { .boh-gallery__grid { columns: 2; column-gap: 10px; } .boh-gallery__cell { margin-bottom: 10px; } }
@media (max-width: 420px)  { .boh-gallery__grid { columns: 2; } }

/* ── Front-page tiles: give sparse panels presence ───────────────────
   Each panel is locked to one screen, so a section with only a heading
   and a short lede floated in the middle of a 900px field: measured 367px
   of empty space above AND below the impact band, 339px on the "why a
   basket" panel. The panel height is deliberate, so the fix is to let the
   composition grow into it rather than to shrink the panel.

   Sizes below are keyed to viewport HEIGHT as well as width - a taller
   window is exactly where the hollowness showed worst. */
@media (min-width: 901px) and (min-height: 700px) {
  body.home .boh-home-section__heading {
    font-size: clamp(38px, 2.6vw + 1.8vh, 62px);
    line-height: 1.06;
    margin-bottom: clamp(18px, 2.2vh, 30px);
  }
  body.home .boh-home-section__lede {
    font-size: clamp(18px, 0.6vw + 1.1vh, 23px);
    line-height: 1.7;
    /* A narrower measure sets more lines, which both reads better at this
       size and lets the text block occupy more of the panel. */
    max-width: 54ch;
    margin-bottom: clamp(22px, 2.6vh, 36px);
  }
  body.home .boh-home-section__meta {
    font-size: clamp(15px, 0.4vw + 0.8vh, 19px);
  }
  body.home .boh-home-section__cta { margin-top: clamp(8px, 1.4vh, 20px); }

  /* The impact band was the emptiest panel of all: four short numbers in a
     single wide row, 166px of content in a 900px screen. Two rows of two,
     set much larger, turns it into a composition instead of a strip. */
  body.home .boh-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: clamp(28px, 5vh, 64px) clamp(24px, 3vw, 72px) !important;
    max-width: 900px;
  }
  body.home .boh-stats__cell { border-right: 0; padding: 0 8px; }
  body.home .boh-stats__cell h2 {
    font-size: clamp(52px, 3vw + 2.4vh, 92px) !important;
    line-height: 1;
  }
  body.home .boh-stats__label {
    font-size: clamp(12px, 0.3vw + 0.5vh, 15px);
    letter-spacing: 0.14em;
  }

  /* Countdown and the explore cards get the same treatment so the whole
     page reads at one scale rather than one panel suddenly shrinking. */
  body.home .boh-countdown { gap: clamp(12px, 1.6vw, 24px); }
  body.home .boh-countdown__num { font-size: clamp(34px, 1.8vw + 1.6vh, 56px); }
  body.home .boh-quick-links { gap: clamp(14px, 1.8vh, 26px); }
}

/* The impact band is still the sparsest panel after the pass above, so it
   gets more room between rows and a larger label. Kept as its own block so
   it is easy to dial back independently. */
@media (min-width: 901px) and (min-height: 700px) {
  body.home .boh-stats {
    gap: clamp(40px, 8.5vh, 104px) clamp(24px, 3vw, 72px) !important;
  }
  body.home .boh-stats__cell { padding: clamp(6px, 1.6vh, 22px) 8px; }
  body.home .boh-stats__label { font-size: clamp(13px, 0.3vw + 0.6vh, 17px) !important; }
}

/* Optional line under the RSVP form heading, set in BoH Content. */
.boh-rsvp__intro {
  margin: 8px 0 0;
  font-size: 16px;
  line-height: 1.65;
  color: var(--boh-ink-soft);
}
.boh-rsvp__intro p:last-child { margin-bottom: 0; }

/* ── Front-page section controls ─────────────────────────────────────
   Explicit up/down buttons replace the old wheel hijack: scrolling stays
   the browser's, and these glide between panels on demand. */
.boh-tilenav {
  position: fixed;
  right: 22px;
  bottom: 26px;
  z-index: 90;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.boh-tilenav[hidden] { display: none; }
.boh-tilenav__btn {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid rgba(31,26,36,0.10);
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 10px 26px -12px rgba(31,26,36,0.45);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: background .18s ease, transform .18s ease, opacity .18s ease;
}
.boh-tilenav__btn:hover:not(:disabled) {
  background: #fff;
  transform: translateY(-2px);
}
.boh-tilenav__btn:focus-visible {
  outline: 3px solid var(--boh-magenta);
  outline-offset: 3px;
}
.boh-tilenav__btn:disabled {
  opacity: 0.32;
  cursor: default;
  box-shadow: none;
}
/* One control now, not two arrows: it plays through the page a section at a
   time. Triangle at rest, two bars while it is running - the glyph says what
   pressing it will do next. Drawn in CSS, so no icon asset. */
/* Chevron drawn in CSS so the control needs no icon asset. */
.boh-tilenav__btn span {
  display: block;
  width: 11px;
  height: 11px;
  border-right: 2.5px solid var(--boh-ink, #1F1A24);
  border-bottom: 2.5px solid var(--boh-ink, #1F1A24);
}
.boh-tilenav__btn--next span { transform: translateY(-2px) rotate(45deg); }
.boh-tilenav__btn--prev span { transform: translateY(2px) rotate(-135deg); }
@media (prefers-reduced-motion: reduce) {
  .boh-tilenav__btn { transition: none; }
}

/* ── Tile content: one step down ─────────────────────────────────────
   The earlier pass grew this type to fill the full-screen panels, and it
   overshot - headings in particular read as oversized. These replace the
   sizes set in "Front-page tiles: give sparse panels presence"; the panels
   still fill, just less loudly. */
@media (min-width: 901px) and (min-height: 700px) {
  body.home .boh-home-section__heading {
    font-size: clamp(32px, 1.9vw + 1.3vh, 48px);
    margin-bottom: clamp(14px, 1.7vh, 24px);
  }
  body.home .boh-home-section__lede {
    font-size: clamp(16px, 0.42vw + 0.8vh, 19px);
    line-height: 1.66;
    max-width: 58ch;
    margin-bottom: clamp(18px, 2vh, 28px);
  }
  body.home .boh-home-section__meta { font-size: clamp(14px, 0.3vw + 0.6vh, 16px); }

  body.home .boh-stats {
    gap: clamp(28px, 6vh, 72px) clamp(20px, 2.6vw, 60px) !important;
  }
  body.home .boh-stats__cell { padding: clamp(4px, 1vh, 14px) 8px; }
  body.home .boh-stats__cell h2 { font-size: clamp(42px, 2.2vw + 1.8vh, 70px) !important; }
  body.home .boh-stats__label { font-size: clamp(12px, 0.25vw + 0.45vh, 14px) !important; letter-spacing: 0.12em; }

  body.home .boh-countdown__num { font-size: clamp(30px, 1.4vw + 1.2vh, 44px); }
}

/* ── Donate form: match the sponsorship form ─────────────────────────
   The two forms sit on the same board but were built by different plugins,
   so their insides diverged: GiveWP's fields ran narrower (562px against
   the sponsorship form's 760px) and a size larger, and its notices used the
   plugin's own alert styling, which reads as an error on a page that is
   working perfectly well. */
.entry-content #give-form .give-form-wrap {
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}
.entry-content #give-form .give-form {
  max-width: 760px;
  margin: 0 auto;
}
/* Field metrics copied from #sponsorship-form so the two read as one family. */
.entry-content #give-form .give-select,
.entry-content #give-form input[type="text"],
.entry-content #give-form input[type="email"],
.entry-content #give-form input[type="tel"],
.entry-content #give-form input[type="number"],
.entry-content #give-form textarea {
  font-size: 15px !important;
  padding: 13px 16px !important;
  border-radius: 6px !important;
  border: 1px solid var(--boh-rule, #E5E5E5) !important;
  background: #fff !important;
  box-shadow: none !important;
  height: auto !important;
  line-height: 1.35 !important;
}
.entry-content #give-form .give-select:focus,
.entry-content #give-form input:focus,
.entry-content #give-form textarea:focus {
  outline: none !important;
  border-color: var(--boh-magenta) !important;
  box-shadow: 0 0 0 3px rgba(208,20,130,0.12) !important;
}
/* Submit: the same magenta pill the sponsorship form uses. */
.entry-content #give-form .give-submit,
.entry-content #give-form input[type="submit"],
.entry-content #give-form button[type="submit"] {
  background: var(--boh-magenta) !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 999px !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  padding: 14px 36px !important;
  box-shadow: 0 10px 24px -12px rgba(208,20,130,0.6) !important;
}
.entry-content #give-form .give-submit:hover {
  filter: brightness(1.06);
}
/* No goal-bar styling here any more: the goal is switched off on the form
   itself (Donation Goal -> disabled), so the markup is never rendered. The
   brand colours it used to carry are kept out of the stylesheet rather than
   left as dead rules. */
/* Notices: informational, not alarming. The test-mode notice in particular
   is telling the truth about a correctly configured sandbox - it should not
   look like the page has fallen over. */
.entry-content #give-form .give_error,
.entry-content #give-form .give_warning,
.entry-content #give-form .give_notice {
  background: var(--boh-paper-2, #F7F5F0) !important;
  border: 1px solid rgba(31,26,36,0.10) !important;
  border-left: 3px solid var(--boh-yellow, #f9d135) !important;
  border-radius: 8px !important;
  color: var(--boh-ink-soft) !important;
  font-size: 13.5px !important;
  padding: 12px 16px !important;
  box-shadow: none !important;
  margin-bottom: 20px !important;
}
.entry-content #give-form .give_error p,
.entry-content #give-form .give_warning p { margin: 0 !important; }
.entry-content #give-form .give_error strong { color: var(--boh-ink); }

/* ── Donate form: same shell as the sponsorship form ─────────────────
   Both forms sit on the cream board, but GiveWP's wrapper added a second
   white card inside it - border, 20px radius and its own shadow - so the
   donate form read as a box within a box while the sponsorship fields sit
   directly on the board. Strip the inner card and match the labels. */
.entry-content #give-form .give-form-wrap {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin-top: 0 !important;
}
/* Labels: 13px semibold ink, stacked above the field, as on #sponsorship-form. */
/* :not(.give-hidden) - GiveWP hides some labels for screen readers only, and
   a blanket display:block put "Choose Your Sponsorship Amount" back on the
   page. */
.entry-content #give-form label:not(.give-hidden):not(.screen-reader-text),
.entry-content #give-form .give-label:not(.give-hidden) {
  display: block !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: var(--boh-ink) !important;
  margin-bottom: 6px !important;
}
/* Checkbox and radio labels stay inline - stacking those would break the
   control away from its own text. */
.entry-content #give-form label:has(> input[type="checkbox"]),
.entry-content #give-form label:has(> input[type="radio"]),
.entry-content #give-form .give-gateway-option {
  display: inline-flex !important;
  align-items: center;
  gap: 9px;
  font-weight: 500 !important;
  font-size: 14px !important;
  margin-bottom: 0 !important;
}
.entry-content #give-form .give-required-indicator {
  color: var(--boh-magenta) !important;
  font-weight: 800;
}
/* Section headings inside the form, to match the sponsorship form's rhythm. */
.entry-content #give-form legend,
.entry-content #give-form .give-section-title {
  font-family: 'Montserrat', system-ui, sans-serif;
  font-size: 15px !important;
  font-weight: 800 !important;
  color: var(--boh-ink) !important;
  margin: 4px 0 12px !important;
  padding: 0 !important;
  border: 0 !important;
}
.entry-content #give-form fieldset {
  border: 0 !important;
  padding: 0 !important;
  margin: 0 0 18px !important;
}

/* ── Donate: cards flush with the form board ─────────────────────────
   The two cards were capped at 1000px inside an alignwide group that also
   carries 24px of horizontal padding, so they sat 120px inside the form
   board below them on each side. Both blocks are alignwide, so matching the
   board's outer edge just means dropping the cap and clearing the padding. */
.entry-content > .wp-block-group.alignwide:has(.boh-donate-cards) {
  padding-left: 0 !important;
  padding-right: 0 !important;
}
.entry-content .boh-donate-cards {
  max-width: none;
  margin-left: 0;
  margin-right: 0;
}
@media (max-width: 900px) {
  /* Below the wide breakpoint the board takes its own gutters back, so the
     cards follow rather than running to the screen edge. */
  .entry-content > .wp-block-group.alignwide:has(.boh-donate-cards) {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }
}

/* Below the wide breakpoint the form boards ran flush to the screen edge,
   which clipped their rounded corners and left them 24px out of step with
   the cards above. Give them the same gutter the cards use. */
@media (max-width: 900px) {
  .entry-content #give-form,
  .entry-content #sponsorship-form {
    margin-left: 24px !important;
    margin-right: 24px !important;
  }
}
@media (max-width: 480px) {
  .entry-content #give-form,
  .entry-content #sponsorship-form {
    margin-left: 12px !important;
    margin-right: 12px !important;
  }
  .entry-content > .wp-block-group.alignwide:has(.boh-donate-cards) {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
}

/* ── Donate form: even, roomier row rhythm ───────────────────────────
   Row spacing was uneven - 14px, 15px, 18px and 20px between successive
   blocks, depending on which plugin default happened to win. The
   sponsorship form runs a consistent 18px; this sets a slightly roomier 22px
   and, more importantly, makes every gap the same. */
.entry-content #give-form .give-total-wrap,
.entry-content #give-form .give-donation-amount,
.entry-content #give-form .give-select-level,
.entry-content #give-form > .give-form > fieldset,
.entry-content #give-form .give-form > div,
.entry-content #give-form fieldset {
  margin-bottom: 22px !important;
}
.entry-content #give-form .give-donation-amount { margin-bottom: 22px !important; }
/* Field groups inside a fieldset get the same gap between them. */
.entry-content #give-form fieldset > p,
.entry-content #give-form fieldset > div:not(:last-child) {
  margin-bottom: 22px !important;
}
/* The submit block sits a little further clear of the fields above it. */
.entry-content #give-form .give-donation-submit,
.entry-content #give-form .give-submit-button-wrap {
  margin-top: 8px !important;
  margin-bottom: 0 !important;
}
/* Stacked cards on narrow screens are rows too - give them the same air. */
@media (max-width: 720px) {
  .boh-donate-cards { gap: 28px; }
}

/* ── No horizontal scroll from full-bleed sections ───────────────────
   The hero and the sub-page banners are full-bleed via the standard
   `width: 100vw; margin-inline: calc(50% - 50vw)` pattern. 100vw counts the
   vertical scrollbar, but the content area does not - so on any desktop
   browser showing a classic scrollbar those sections land ~15px wider than
   the page and produce a horizontal scrollbar at 100% zoom. It does not
   reproduce in a headless browser, which draws no scrollbars.

   `clip` rather than `hidden` on purpose: hidden would make the root a
   scroll container, which breaks position:fixed descendants and the
   section controls. clip just trims the overhang. */
html {
  overflow-x: clip;
}

/* Hero logo badge: phones and stacked tablets only. The desktop hero keeps
   the composition it already has. */
.boh-hero-mark--auto { display: none; }
/* min-height guard: on a short phone the badge pushed the hero copy down
   into the scroll cue. It only appears where there is room for it. */
@media (max-width: 880px) and (min-height: 660px) {
  .boh-hero-mark--auto { display: block; margin: 0 auto; }
}

/* ── Header brand: wordmark always, mark once scrolled ───────────────
   The home hero carries a large logo of its own, so showing the header
   mark at the same time reads as a duplicate. The name stays visible
   throughout; the mark fades in once the visitor moves off the hero. */
.boh-header__title {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
}
.boh-header__wordmark {
  font-family: 'Montserrat', system-ui, -apple-system, sans-serif;
  font-weight: 800;
  font-size: clamp(14px, 1.1vw, 17px);
  letter-spacing: -0.01em;
  line-height: 1.15;
  color: var(--boh-ink);
  white-space: nowrap;
}
/* Just the closing word, to match how the name is set elsewhere. */
.boh-header__wordmark-accent { color: var(--boh-magenta); }
/* Every page: the mark is absent until the banner is behind us. Width and
   margin collapse too, so the name does not sit in a reserved gap. */
.boh-header__logo {
  opacity: 0;
  width: 0 !important;
  margin: 0 !important;
  transform: scale(0.9);
  transition: opacity .28s ease, transform .28s ease;
  pointer-events: none;
}
body.boh-past-top .boh-header__logo {
  opacity: 1;
  width: var(--boh-logo-size, 56px) !important;
  transform: none;
  pointer-events: auto;
}
@media (prefers-reduced-motion: reduce) {
  .boh-header__logo { transition: none; }
}
/* The two swap rather than accumulate: the name introduces the site over the
   hero, then hands over to the mark once the visitor scrolls. Showing both
   at once was never the intent. */
.boh-header__wordmark {
  transition: opacity .28s ease, max-width .28s ease;
  overflow: hidden;
}
body.boh-past-top .boh-header__wordmark {
  opacity: 0;
  max-width: 0;
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  .boh-header__wordmark { transition: none; }
}

/* No glow behind the name. It was added to hold legibility over the hero
   photograph before the header fills in, but it reads as a smudge - the
   header's own backdrop already does that job. */
.boh-header__wordmark { text-shadow: none; }
@media (max-width: 600px) {
  .boh-header__wordmark {
    font-size: 13px;
    white-space: normal;
    max-width: 150px;
  }
}

/* ── Hero eyebrow: one line on phones ────────────────────────────────
   It was allowed to wrap to fix an earlier bug where the words ran outside
   the pill's rounded background. Wrapping is no longer needed: keeping the
   flex row intact and sizing the text to the viewport holds it on one line
   inside the pill, which is what it was always meant to look like. */
@media (max-width: 880px) {
  .wp-block-cover.boh-hero .boh-hero-copy .boh-eyebrow {
    white-space: nowrap !important;
    flex-wrap: nowrap !important;
    max-width: calc(100vw - 32px) !important;
    /* Sized off viewport width so the line shrinks to fit rather than
       spilling: ~2.35vw tracks the string across phone widths. */
    font-size: clamp(7.6px, 2.35vw, 11px) !important;
    letter-spacing: 0.06em !important;
    padding: 7px 14px !important;
    row-gap: 0 !important;
  }
  .wp-block-cover.boh-hero .boh-hero-copy .boh-eyebrow .boh-rohit-brand {
    white-space: nowrap;
  }
}
@media (max-width: 480px) {
  .wp-block-cover.boh-hero .boh-hero-copy .boh-eyebrow {
    font-size: clamp(7.6px, 2.35vw, 10px) !important;
    padding: 6px 12px !important;
  }
}

/* ── Footer credit mark ──────────────────────────────────────────────── */
.boh-halfcup {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  padding: 3px 9px 3px 6px;
  border-radius: 999px;
  border: 1px solid rgba(31,26,36,0.12);
  transition: background .18s ease, border-color .18s ease, transform .18s ease;
  vertical-align: middle;
}
.boh-halfcup:hover {
  background: rgba(255,255,255,0.75);
  border-color: rgba(31,26,36,0.22);
  transform: translateY(-1px);
}
.boh-halfcup:focus-visible {
  outline: 2px solid var(--boh-magenta);
  outline-offset: 2px;
}
.boh-halfcup__mark { display: block; flex: 0 0 auto; }
.boh-halfcup__label { text-decoration: underline; text-underline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  .boh-halfcup { transition: none; }
}

/* ── In-page popup for the map and the WIN House site ───────────────── */
.boh-embed {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: rgba(18,14,22,0.72);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(12px, 3vw, 40px);
}
.boh-embed[hidden] { display: none; }
.boh-embed__panel {
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  width: min(1100px, 100%);
  height: min(760px, 100%);
  display: flex;
  flex-direction: column;
  box-shadow: 0 40px 90px -30px rgba(0,0,0,0.55);
}
.boh-embed__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 14px 12px 18px;
  border-bottom: 1px solid var(--boh-rule, #E5E5E5);
  flex: 0 0 auto;
}
.boh-embed__title {
  margin: 0;
  font-family: 'Montserrat', system-ui, sans-serif;
  font-size: 15px;
  font-weight: 800;
  color: var(--boh-ink);
}
.boh-embed__actions { display: flex; align-items: center; gap: 14px; }
.boh-embed__open {
  font-size: 13px;
  font-weight: 700;
  color: var(--boh-magenta) !important;
  text-decoration: none !important;
  white-space: nowrap;
}
.boh-embed__open:hover { text-decoration: underline !important; }
.boh-embed__close {
  width: 34px; height: 34px;
  border: 0;
  border-radius: 50%;
  background: var(--boh-paper-2, #F7F5F0);
  font-size: 24px;
  line-height: 1;
  color: var(--boh-ink);
  cursor: pointer;
}
.boh-embed__close:hover { background: var(--boh-magenta); color: #fff; }
.boh-embed__body { position: relative; flex: 1 1 auto; min-height: 0; }
.boh-embed__frame { width: 100%; height: 100%; border: 0; display: block; }
.boh-embed__spinner {
  position: absolute;
  top: 50%; left: 50%;
  width: 30px; height: 30px;
  margin: -15px 0 0 -15px;
  border: 3px solid rgba(31,26,36,0.12);
  border-top-color: var(--boh-magenta);
  border-radius: 50%;
  animation: bohSpin .8s linear infinite;
}
.boh-embed__spinner[hidden] { display: none; }
@keyframes bohSpin { to { transform: rotate(360deg); } }
@media (max-width: 600px) {
  .boh-embed__panel { height: 100%; border-radius: 12px; }
  .boh-embed__open { display: none; }   /* the bar gets tight on a phone */
}
@media (prefers-reduced-motion: reduce) {
  .boh-embed__spinner { animation: none; }
}

/* Header brand row: one consistent mark size, vertically centred. The old
   oversized-hanging-mark sizes are no longer used now that the mark only
   appears once scrolled. */
.boh-header__brand,
.boh-header__title { align-items: center; }
.boh-header__logo { --boh-logo-size: 52px; }
@media (max-width: 900px) { .boh-header__logo { --boh-logo-size: 46px; } }
@media (max-width: 600px) { .boh-header__logo { --boh-logo-size: 40px; } }

/* Hero logo badge on every screen, stacked above the headline exactly as it
   is on a phone - the headrow becomes a column wherever the badge is
   present, instead of putting the mark beside the text on wide screens. */
.wp-block-cover.boh-hero .boh-hero-headrow:has(.boh-hero-mark--auto) {
  flex-direction: column;
  align-items: center;
}
/* Shown from 600px of viewport height, not 720px. A phone's *screen* is
   tall, but Safari's visible viewport is far shorter once its toolbars are
   counted - an iPhone 15 Pro reports about 687px, and a 720px floor hid the
   badge on exactly the devices it was added for. Instead of hiding it on
   shorter screens, the badge is sized off viewport height so it always has
   room. */
@media (min-height: 660px) {
  .boh-hero-mark--auto { display: block; margin: 0 auto; }
  .wp-block-cover.boh-hero .boh-hero-headrow .boh-hero-mark--auto {
    padding: clamp(9px, 1.4vh, 20px);
  }
  /* 13.2vh, not more: at 14 the lede's last line met the scroll cue on a
     664px viewport. This is the largest mark that still leaves the copy
     clear of it on the shortest phone the badge appears on at all. */
  .wp-block-cover.boh-hero .boh-hero-headrow .boh-hero-mark--auto .boh-hero-mark__img {
    width: clamp(84px, 13.2vh, 132px);
  }
}

/* ── Desktop hero: logo beside the headline, lede underneath ─────────
   This restores the composition the hero markup was built for - the
   comment on .boh-hero-block describes it exactly: one rectangle holding
   [logo | eyebrow over headline] with the lede beneath, the whole thing
   centred on screen. It had been flattened to a single centred column
   while the logo was missing from the page; the logo is back, so the
   original arrangement applies again above the stacked breakpoint. */
@media (min-width: 881px) {
  .wp-block-cover.boh-hero .boh-hero-headrow:has(.boh-hero-mark--auto),
  .wp-block-cover.boh-hero .boh-hero-block .boh-hero-headrow {
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: clamp(20px, 2.4vw, 34px);
  }
  .wp-block-cover.boh-hero .boh-hero-headcol {
    align-items: flex-start;
  }
  /* Eyebrow and headline read from the same left edge as each other. */
  .wp-block-cover.boh-hero .boh-hero-copy .boh-hero-copy__eyebrow,
  .wp-block-cover.boh-hero .boh-hero-headcol .boh-hero-copy__eyebrow {
    text-align: left !important;
    margin: 0 !important;
  }
  .wp-block-cover.boh-hero .boh-hero-copy h1 {
    text-align: left !important;
    margin: 0 !important;
  }
  /* The lede starts at the logo's left edge and runs to the right edge of
     the headline above it, so the block reads as one rectangle. Its measure
     is capped below the headrow's width so the headrow keeps defining how
     wide that rectangle is. */
  .wp-block-cover.boh-hero .boh-hero-block .boh-hero-copy__lede,
  .wp-block-cover.boh-hero .boh-hero-copy .boh-hero-copy__lede {
    text-align: left !important;
    /* width:0 + min-width:100% is deliberate. The block is fit-content, so a
       long paragraph would otherwise decide how wide the rectangle is and
       overshoot the headline. Contributing zero to the intrinsic width lets
       the logo-plus-headline row set the width, and min-width then fills it
       - so the lede runs exactly from the logo's left edge to the headline's
       right edge. */
    width: 0 !important;
    min-width: 100% !important;
    max-width: none !important;
    margin: clamp(18px, 2.2vh, 28px) 0 0 !important;
  }
  /* The badge keeps its disc but drops the auto-centring margin, so it can
     sit at the left of the row. */
  .wp-block-cover.boh-hero .boh-hero-headrow .boh-hero-mark--auto {
    margin: 0;
    order: -1;
  }
}

/* ── HalfCup mark animation ──────────────────────────────────────────
   The cup draws itself, fills, then steams. Held until the footer is
   actually on screen - the alternative is a loop running the whole time
   someone reads the page, several screens above where it can be seen. */
.boh-halfcup__mark .hc-cup-outline { stroke-dasharray: 600; stroke-dashoffset: 600; }
.boh-halfcup__mark .hc-cup-handle  { stroke-dasharray: 200; stroke-dashoffset: 200; }
.boh-halfcup__mark .hc-liquid-fill { transform: translateY(57.5px); }

.boh-halfcup__mark.is-playing .hc-cup-outline {
  animation: hcDrawCup 1.2s ease-out 0.15s forwards;
}
.boh-halfcup__mark.is-playing .hc-cup-handle {
  animation: hcDrawHandle 0.8s ease-out 0.75s forwards;
}
.boh-halfcup__mark.is-playing .hc-liquid-fill {
  animation: hcFillLiquid 1s ease-out 1.35s forwards;
}
.boh-halfcup__mark.is-playing .hc-liquid-line {
  animation: hcShowLine 0.5s ease-out 1.95s forwards;
}
.boh-halfcup__mark.is-playing .hc-steam {
  animation: hcRiseSteam 2.4s ease-in-out 2.2s infinite;
}
.boh-halfcup__mark.is-playing .hc-steam-2 { animation-delay: 2.6s; }
.boh-halfcup__mark.is-playing .hc-steam-3 { animation-delay: 3s; }

/* Replay the draw on hover, so the mark responds to being pointed at. */
.boh-halfcup:hover .boh-halfcup__mark.is-playing .hc-cup-outline,
.boh-halfcup:hover .boh-halfcup__mark.is-playing .hc-cup-handle {
  animation: none;
  stroke-dashoffset: 0;
}

@keyframes hcDrawCup    { to { stroke-dashoffset: 0; } }
@keyframes hcDrawHandle { to { stroke-dashoffset: 0; } }
@keyframes hcFillLiquid { to { transform: translateY(0); } }
@keyframes hcShowLine   { to { opacity: 0.6; } }
@keyframes hcRiseSteam {
  0%   { opacity: 0; transform: translateY(0); }
  30%  { opacity: 0.4; }
  100% { opacity: 0; transform: translateY(-12px); }
}

/* Reduced motion: show the finished cup, never animate it. */
@media (prefers-reduced-motion: reduce) {
  .boh-halfcup__mark .hc-cup-outline,
  .boh-halfcup__mark .hc-cup-handle { stroke-dashoffset: 0; }
  .boh-halfcup__mark .hc-liquid-fill { transform: none; }
  .boh-halfcup__mark .hc-liquid-line { opacity: 0.6; }
  .boh-halfcup__mark.is-playing * { animation: none !important; }
}

/* ── Gallery year rail ───────────────────────────────────────────────
   A timeline down the side of the gallery on desktop, and a sticky strip
   across the top on phones - the same control, in the shape each screen
   can actually spare the room for. */
.boh-gallery-sections { position: relative; }

.boh-yearrail__list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.boh-yearrail__link {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none !important;
  color: var(--boh-ink-soft);
  font-family: 'Montserrat', system-ui, sans-serif;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.02em;
  padding: 8px 12px;
  border-radius: 999px;
  transition: color .2s ease, background .2s ease;
}
.boh-yearrail__dot {
  flex: 0 0 auto;
  width: 11px; height: 11px;
  border-radius: 50%;
  border: 2px solid var(--boh-rule, #E5E5E5);
  background: #fff;
  transition: transform .2s ease, border-color .2s ease, background .2s ease;
}
.boh-yearrail__link:hover { color: var(--boh-ink); }
.boh-yearrail__link:hover .boh-yearrail__dot { border-color: var(--boh-magenta); }
.boh-yearrail__link.is-current { color: var(--boh-magenta); }
.boh-yearrail__link.is-current .boh-yearrail__dot {
  background: var(--boh-magenta);
  border-color: var(--boh-magenta);
  transform: scale(1.35);
}
.boh-yearrail__link:focus-visible {
  outline: 3px solid var(--boh-magenta);
  outline-offset: 2px;
}

/* A floating vertical timeline in the bottom-right corner, the same control
   on every screen - pinned rather than in the flow, so it stays reachable
   however far down the gallery you are. */
.boh-yearrail {
  position: fixed;
  right: clamp(12px, 1.6vw, 26px);
  bottom: clamp(14px, 3vh, 34px);
  z-index: 60;
  padding: 10px 12px;
  border-radius: 18px;
  background: rgba(255,255,255,0.88);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(31,26,36,0.08);
  box-shadow: 0 18px 44px -20px rgba(31,26,36,0.45);
}
.boh-yearrail__list { position: relative; }
/* The line the dots sit on. */
.boh-yearrail__list::before {
  content: '';
  position: absolute;
  left: 17.5px;
  top: 16px;
  bottom: 16px;
  width: 2px;
  background: linear-gradient(180deg, var(--boh-rule, #E5E5E5), rgba(208,20,130,0.45));
  border-radius: 2px;
}
.boh-yearrail__item + .boh-yearrail__item { margin-top: 2px; }
.boh-yearrail__link { position: relative; padding: 7px 12px; }
.boh-yearrail__dot { box-shadow: 0 0 0 4px rgba(255,255,255,0.95); }
.boh-yearrail__link.is-current { background: rgba(208,20,130,0.08); }

@media (max-width: 600px) {
  .boh-yearrail {
    right: 10px;
    bottom: calc(10px + env(safe-area-inset-bottom, 0px));
    padding: 8px 9px;
    border-radius: 15px;
  }
  .boh-yearrail__link { font-size: 12px; padding: 6px 9px; gap: 9px; }
  .boh-yearrail__list::before { left: 15px; }
}

@media (prefers-reduced-motion: reduce) {
  .boh-yearrail__link,
  .boh-yearrail__dot { transition: none; }
}

/* Short viewports: the badge earns its place only if the hero copy still
   clears the scroll cue beneath it, so it shrinks rather than crowding. */
.wp-block-cover.boh-hero .boh-hero-headrow:has(.boh-hero-mark--auto) {
  gap: clamp(18px, 3.4vh, 36px);
}
/* On the shortest viewport the badge still appears on, the last line of the
   lede met the scroll cue. There is 113px of empty hero above the mark on such
   a screen and none to spare below it, so the top padding gives way first -
   the block moves up, and the copy clears the cue with room to spare. The
   header is 61px tall, so 76px still clears it. */
@media (max-width: 640px) and (max-height: 700px) {
  .wp-block-cover.boh-hero { padding-top: 76px !important; }
}
/* And the space between the headline and the lede tightens a little too. */
@media (min-height: 660px) and (max-height: 700px) {
  /* Matching the specificity of the rules that set this margin elsewhere in
     the file - two of them, both !important, both a class deeper than a
     shorter selector here would be. */
  .wp-block-cover.boh-hero .boh-hero-copy .boh-hero-copy__lede,
  .wp-block-cover.boh-hero .boh-hero-block .boh-hero-copy__lede { margin-top: 8px !important; }
}

/* ── Gallery section headings + separators ───────────────────────────
   Each year now announces itself properly and the sections are divided by
   a soft pink rule, so a long page reads as chapters rather than one
   uninterrupted run of photographs. */
.boh-gallery-section + .boh-gallery-section {
  margin-top: clamp(48px, 6vh, 88px);
  padding-top: clamp(36px, 5vh, 64px);
  border-top: 1px solid rgba(208, 20, 130, 0.16);
}
.boh-gallery-section__title {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin: 0 0 8px;
}
/* Hairlines either side of the year, meeting the heading. */
.boh-gallery-section__title::before,
.boh-gallery-section__title::after {
  content: '';
  height: 1px;
  flex: 1 1 auto;
  max-width: 120px;
  background: linear-gradient(90deg, rgba(208,20,130,0), rgba(208,20,130,0.32));
}
.boh-gallery-section__title::after {
  background: linear-gradient(90deg, rgba(208,20,130,0.32), rgba(208,20,130,0));
}
.boh-gallery-section__note {
  display: inline-block;
  padding: 4px 14px;
  border-radius: 999px;
  background: rgba(208, 20, 130, 0.07);
  color: var(--boh-magenta);
  border: 1px solid rgba(208, 20, 130, 0.16);
}
@media (max-width: 600px) {
  .boh-gallery-section__title { gap: 10px; }
  .boh-gallery-section__title::before,
  .boh-gallery-section__title::after { max-width: 48px; }
}

/* ── Forward-the-invitation modal ────────────────────────────────────── */
.boh-rsvp-success__forward {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: var(--boh-magenta);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
.boh-refer {
  position: fixed; inset: 0; z-index: 10001;
  background: rgba(18,14,22,0.72);
  backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center;
  padding: clamp(12px, 3vw, 40px);
}
.boh-refer[hidden] { display: none; }
.boh-refer__panel {
  position: relative;
  background: #fff;
  border-radius: 18px;
  width: min(560px, 100%);
  max-height: 100%;
  overflow-y: auto;
  padding: clamp(22px, 3vw, 34px);
  box-shadow: 0 40px 90px -30px rgba(0,0,0,0.55);
}
.boh-refer__close {
  position: absolute; top: 12px; right: 12px;
  width: 34px; height: 34px; border: 0; border-radius: 50%;
  background: var(--boh-paper-2, #F7F5F0);
  font-size: 24px; line-height: 1; cursor: pointer; color: var(--boh-ink);
}
.boh-refer__close:hover { background: var(--boh-magenta); color: #fff; }
.boh-refer__title {
  margin: 0 0 6px;
  font-family: 'Montserrat', system-ui, sans-serif;
  font-size: clamp(20px, 2.4vw, 26px); font-weight: 800; color: var(--boh-ink);
}
.boh-refer__lede { margin: 0 0 18px; color: var(--boh-ink-soft); font-size: 14px; line-height: 1.55; }
.boh-refer__label {
  display: block; font-size: 13px; font-weight: 700; color: var(--boh-ink); margin: 0 0 6px;
}
.boh-refer__label span { font-weight: 500; color: var(--boh-ink-soft); }
.boh-refer textarea {
  width: 100%; font: inherit; font-size: 15px;
  padding: 12px 14px; border: 1px solid var(--boh-rule, #E5E5E5); border-radius: 8px;
  background: #fff; resize: vertical;
}
.boh-refer textarea:focus {
  outline: none; border-color: var(--boh-magenta);
  box-shadow: 0 0 0 3px rgba(208,20,130,0.12);
}
.boh-refer__hint { margin: 6px 0 16px; font-size: 12px; color: var(--boh-ink-soft); }
.boh-refer__preview { margin: 16px 0 4px; }
.boh-refer__preview summary {
  cursor: pointer; font-size: 13px; font-weight: 700; color: var(--boh-magenta);
}
.boh-refer__draft {
  margin-top: 10px; padding: 14px;
  background: var(--boh-paper-2, #F7F5F0);
  border: 1px solid var(--boh-rule, #E5E5E5); border-radius: 10px;
}
.boh-refer__subject { display: block; font-size: 13px; margin-bottom: 8px; color: var(--boh-ink); }
.boh-refer__body {
  margin: 0; font-family: inherit; font-size: 12.5px; line-height: 1.6;
  color: var(--boh-ink-soft); white-space: pre-wrap; word-break: break-word;
}
/* Honeypot: off-screen rather than display:none, which some bots skip. */
.boh-refer__hp {
  position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden;
}
.boh-refer__msg { margin: 14px 0 0; font-size: 14px; min-height: 20px; }
.boh-refer__msg.is-error { color: #b32d2e; }
.boh-refer__msg.is-ok { color: #1c7c3f; font-weight: 700; }
.boh-refer__actions { display: flex; gap: 12px; align-items: center; margin-top: 14px; }
.boh-refer__send {
  background: var(--boh-magenta); color: #fff; border: 0; border-radius: 999px;
  padding: 13px 30px; font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 15px;
  cursor: pointer;
}
.boh-refer__send:disabled { opacity: .6; cursor: default; }
.boh-refer__cancel {
  background: none; border: 0; color: var(--boh-ink-soft); font: inherit; font-size: 14px; cursor: pointer;
}
.boh-refer__cancel:hover { color: var(--boh-ink); }

/* ── Gallery: play the slideshow ─────────────────────────────────────
   Sits at the foot of the year rail rather than in the flow of the page.
   A magenta pill floating in the white gap under the intro shouted louder
   than the photographs it was offering; here it reads as one more of the
   gallery's own controls, and only when you go looking for it. */
.boh-yearrail__play {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 8px;
  padding: 7px 12px;
  border-top: 1px solid rgba(31,26,36,0.09);
  padding-top: 11px;
  text-decoration: none !important;
  color: var(--boh-ink-soft);
  font-family: 'Montserrat', system-ui, sans-serif;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.02em;
  transition: color .2s ease;
}
.boh-yearrail__play:hover { color: var(--boh-magenta); }
.boh-yearrail__play:hover .boh-yearrail__playicon { border-left-color: var(--boh-magenta); }
.boh-yearrail__play:focus-visible {
  outline: 3px solid var(--boh-magenta);
  outline-offset: 2px;
  border-radius: 999px;
}
/* Play triangle drawn in CSS, so the control needs no icon asset. It sits on
   the same 11px column as the year dots, so the two rows line up. */
.boh-yearrail__playicon {
  flex: 0 0 11px;
  width: 0; height: 0;
  margin-left: 2px;
  border-left: 9px solid var(--boh-ink-soft);
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  transition: border-color .2s ease;
}
@media (max-width: 600px) {
  .boh-yearrail__play { font-size: 11px; padding: 6px 9px; padding-top: 9px; gap: 9px; margin-top: 6px; }
}
@media (prefers-reduced-motion: reduce) {
  .boh-yearrail__play,
  .boh-yearrail__playicon { transition: none; }
}

/* ───────────────────────────────────────────────────────────────────
   EVENT AGENDA - the running order, under the date and countdown
   A timeline rather than a table: the time in magenta on its own column,
   a rule threading the rows together, and each moment beside it. The same
   shape on a phone, with the time above the moment instead of beside it.
   ─────────────────────────────────────────────────────────────────── */
.boh-agenda-band {
  background: #fff;
  text-align: center;
}
.boh-agenda {
  max-width: 780px;
  margin: 0 auto;
  padding: 0 24px;
  width: 100%;
  box-sizing: border-box;
}
.boh-agenda .boh-agenda__eyebrow { margin: 0 0 14px; }
.boh-agenda .boh-agenda__heading {
  font-family: 'Montserrat', system-ui, sans-serif;
  font-weight: 800;
  font-size: clamp(28px, 4vw, 44px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--boh-ink);
  margin: 0 0 12px;
}
.boh-agenda .boh-agenda__lede {
  color: var(--boh-ink-soft);
  font-size: clamp(15px, 1.5vw, 17px);
  line-height: 1.6;
  max-width: 560px;
  margin: 0 auto clamp(28px, 4vh, 44px);
}
.boh-agenda .boh-agenda__lede p { margin: 0; }

.boh-agenda__list {
  list-style: none;
  margin: 0;
  padding: 0;
  text-align: left;
  position: relative;
}
.boh-agenda__item {
  display: grid;
  grid-template-columns: 92px 1fr;
  gap: 0 26px;
  padding: 0 0 clamp(18px, 2.6vh, 26px);
  position: relative;
}
.boh-agenda__item:last-child { padding-bottom: 0; }

/* The thread and its dots. The line is drawn on the item rather than the
   list so it stops cleanly at the last row instead of running past it. */
.boh-agenda__item::before {
  content: '';
  position: absolute;
  left: 104px;
  top: 15px;
  bottom: -1px;
  width: 2px;
  background: rgba(208,20,130,0.18);
}
.boh-agenda__item:last-child::before { display: none; }
.boh-agenda__item::after {
  content: '';
  position: absolute;
  left: 99px;
  top: 7px;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid rgba(208,20,130,0.35);
  box-sizing: border-box;
}
.boh-agenda__item:first-child::after {
  background: var(--boh-magenta);
  border-color: var(--boh-magenta);
}

.boh-agenda .boh-agenda__time {
  margin: 0;
  text-align: right;
  font-family: 'Montserrat', system-ui, sans-serif;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.02em;
  color: var(--boh-magenta);
  font-variant-numeric: tabular-nums;
  line-height: 1.5;
}
.boh-agenda__body { padding-left: 12px; }
.boh-agenda .boh-agenda__title {
  margin: 0;
  font-family: 'Montserrat', system-ui, sans-serif;
  font-weight: 700;
  font-size: clamp(16px, 1.7vw, 19px);
  line-height: 1.35;
  color: var(--boh-ink);
}
.boh-agenda .boh-agenda__detail {
  margin: 4px 0 0;
  color: var(--boh-ink-soft);
  font-size: 15px;
  line-height: 1.55;
}
.boh-agenda .boh-agenda__who {
  margin: 7px 0 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 9px;
  font-size: 14px;
}
.boh-agenda__name {
  font-family: 'Montserrat', system-ui, sans-serif;
  font-weight: 700;
  color: var(--boh-ink);
}
.boh-agenda__role { color: var(--boh-ink-soft); }
/* The separating dot only earns its place when both halves are present. */
.boh-agenda__name + .boh-agenda__role::before {
  content: '·';
  margin-right: 9px;
  color: rgba(208,20,130,0.55);
}

.boh-agenda .boh-agenda__note {
  margin: clamp(24px, 3.4vh, 36px) 0 0;
  font-size: 13px;
  color: var(--boh-ink-soft);
}

@media (max-width: 640px) {
  .boh-agenda { padding: 0 20px; }
  .boh-agenda__item {
    grid-template-columns: 1fr;
    gap: 2px;
    padding-left: 26px;
    padding-bottom: 22px;
  }
  .boh-agenda .boh-agenda__time { text-align: left; }
  .boh-agenda .boh-agenda__body { padding-left: 0; }
  .boh-agenda__item::before { left: 5px; top: 18px; }
  .boh-agenda__item::after { left: 0; top: 6px; }
}
/* Draft view for editors, so a running order can be judged in place rather
   than in a form. Marked plainly enough that it can never be mistaken for
   the live page. */
.boh-agenda-band--preview {
  background: repeating-linear-gradient(135deg, #fff, #fff 22px, #FDF2F8 22px, #FDF2F8 44px);
}
.boh-agenda__preview {
  display: inline-block;
  margin: 0 0 18px;
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--boh-ink);
  color: #fff;
  font-family: 'Montserrat', system-ui, sans-serif;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.02em;
}

/* The shortcut into the agenda, under the RSVP button. Deliberately quieter
   than that button - it opens a section rather than committing anybody to
   anything. */
.boh-agenda-shortcut { margin: 18px 0 0; text-align: center; }
html:not(.boh-js) .boh-agenda-shortcut { display: none; }
.boh-agenda-shortcut__btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 9px 4px;
  border: 0;
  background: none;
  cursor: pointer;
  font-family: 'Montserrat', system-ui, sans-serif;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.02em;
  color: var(--boh-ink-soft);
  transition: color .2s ease;
}
.boh-agenda-shortcut__btn:hover { color: var(--boh-magenta); }
.boh-agenda-shortcut__btn:focus-visible {
  outline: 3px solid var(--boh-magenta);
  outline-offset: 3px;
  border-radius: 8px;
}
/* Chevron drawn in CSS; it points down to open and up once open. */
.boh-agenda-shortcut__chev {
  width: 8px; height: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform .2s ease;
}
.boh-agenda-shortcut__btn.is-open .boh-agenda-shortcut__chev {
  transform: translateY(1px) rotate(-135deg);
}
/* The home page gives every panel `display: flex`, which is a class selector
   and so outranks the browser's own [hidden] rule - without this the closed
   agenda would stay on the page. */
.boh-agenda-band[hidden] { display: none !important; }
@media (prefers-reduced-motion: reduce) {
  .boh-agenda-shortcut__btn,
  .boh-agenda-shortcut__chev { transition: none; }
}

/* Alternating grounds for the home page's full-screen views. !important
   because several of these panels carry a colour the block editor set
   inline, and the point of the rotation is that no two views in a row look
   the same - including when the agenda opens and shifts every view below it
   to the other colour. */
body.home .entry-content > .boh-band--pink { background-color: #FDF2F8 !important; }
body.home .entry-content > .boh-band--white { background-color: #ffffff !important; }

/* The header photograph is an <img> now rather than a background, so the
   browser can choose a file that suits the screen. Positioning matches what
   background-size/position used to do. */
.boh-page-hero__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Group photos: anything past ~30% starts cropping faces. */
  object-position: center 22%;
  display: block;
}
@media (max-width: 780px) {
  .boh-page-hero__img { object-position: center 18%; }
}

/* ── Impact numbers over a photograph ────────────────────────────────
   The figures are about people and the band said nothing about them. The
   photograph carries a dark scrim so the numbers keep their contrast; the
   band's own colour still shows through wherever the image does not reach.
   Only applies when a picture has been chosen in BoH Content -> Home. */
/* The band itself becomes the frame the photograph fills. Cancelling its
   padding with a negative margin was the obvious way and the wrong one: the
   inline padding is 64px but the home page's tile rules override it to 48,
   so the photo missed the edges by 16px on desktop and matched on a phone.
   Anchoring to the band instead means the padding can be whatever it likes. */
.wp-block-group:has(> .boh-stats--photo),
.wp-block-group:has(> .wp-block-group__inner-container > .boh-stats--photo) {
  position: relative;
  overflow: hidden;
}
.boh-stats--photo {
  display: block !important;
  max-width: none !important;
  padding: 0 !important;
  margin: 0 !important;
  /* Still needed horizontally: the inner container is narrower than the band.
     100vw is safe here - the root carries overflow-x: clip. */
  width: 100vw;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
}
.boh-stats--photo .boh-stats__bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.boh-stats--photo .boh-stats__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 38%;
  display: block;
}
/* Dark enough for white type at any point of any photograph, with a little
   more weight top and bottom so the band still reads as a band. */
.boh-stats--photo .boh-stats__bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(31,26,36,0.92) 0%, rgba(31,26,36,0.74) 40%,
                            rgba(31,26,36,0.74) 60%, rgba(31,26,36,0.92) 100%),
    rgba(31,26,36,0.28);
}
.boh-stats--photo .boh-stats__row {
  position: relative;
  z-index: 1;
  max-width: 1160px;
  margin: 0 auto;
  padding: 24px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 32px 24px;
}
@media (max-width: 900px) {
  .boh-stats--photo .boh-stats__row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 480px) {
  .boh-stats--photo .boh-stats__row { grid-template-columns: 1fr; }
}

/* ── A photograph behind a band ──────────────────────────────────────
   Dropped into a group block by [boh_band_photo]. The picture is anchored
   to the band rather than to the shortcode's own box, so the band keeps
   whatever padding and vertical centring it already had - the mistake the
   stats band taught. */
.wp-block-group:has(> .boh-bandphoto),
.wp-block-group:has(> .wp-block-group__inner-container > .boh-bandphoto),
.wp-block-group:has(.boh-bandphoto) {
  position: relative;
  /* No overflow:hidden here. These bands are alignwide - a content column,
     not the full page - and clipping to it cut the full-bleed photograph back
     to the column with white gutters either side. The photograph is exactly
     one viewport wide and the root carries overflow-x: clip, so nothing
     escapes anyway. */
}
.boh-bandphoto {
  position: absolute;
  top: 0;
  bottom: 0;
  /* The band is alignwide, so inset:0 would stop at the content column. The
     photograph should reach the edges of the view. Safe here: the root
     carries overflow-x: clip. */
  left: calc(50% - 50vw);
  width: 100vw;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.boh-bandphoto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* The wash. Light for a band with dark type, dark for one with light type -
   in both cases heavy enough that the words never depend on which part of the
   photograph happens to sit behind them. */
.boh-bandphoto::after {
  content: '';
  position: absolute;
  inset: 0;
}
.boh-bandphoto--light::after {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.94) 0%, rgba(255,255,255,0.86) 42%,
                            rgba(255,255,255,0.86) 58%, rgba(255,255,255,0.94) 100%),
    rgba(253,242,248,0.35);
}
.boh-bandphoto--dark::after {
  background:
    linear-gradient(180deg, rgba(31,26,36,0.92) 0%, rgba(31,26,36,0.74) 40%,
                            rgba(31,26,36,0.74) 60%, rgba(31,26,36,0.92) 100%),
    rgba(31,26,36,0.28);
}
/* Everything else in the band sits above the picture - but the block editor's
   own inner container must NOT be positioned. Lifting it made it the
   containing block for the photograph, which then covered the content box
   (1192x234) instead of the band (1440x900). */
.wp-block-group:has(.boh-bandphoto) > .wp-block-group__inner-container {
  position: static;
}
.wp-block-group:has(.boh-bandphoto) > *:not(.boh-bandphoto):not(.wp-block-group__inner-container),
.wp-block-group:has(.boh-bandphoto) > .wp-block-group__inner-container > *:not(.boh-bandphoto) {
  position: relative;
  z-index: 1;
}

/* ── Back to top ─────────────────────────────────────────────────────
   Bottom centre, because both corners are already spoken for: the home
   page's section arrows and the gallery's year rail live bottom-right. */
.boh-totop {
  position: fixed;
  left: 50%;
  bottom: calc(20px + env(safe-area-inset-bottom, 0px) + var(--boh-totop-footer, 0px));
  transform: translate(-50%, 12px);
  z-index: 70;
  width: 46px;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border-radius: 50%;
  border: 1px solid rgba(31,26,36,0.10);
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 14px 34px -16px rgba(31,26,36,0.45);
  cursor: pointer;
  opacity: 0;
  transition: opacity .22s ease, transform .22s ease, border-color .2s ease;
}
.boh-totop.is-in { opacity: 1; transform: translate(-50%, 0); }
/* Centred on every page. It used to sit in the corner everywhere but the
   home page, to dodge the section arrows - and those are gone. The lift
   variables still raise it clear of the gallery's year rail and the footer. */
.boh-totop {
  bottom: calc(20px + env(safe-area-inset-bottom, 0px)
               + max(var(--boh-totop-lift, 0px), var(--boh-totop-footer, 0px)));
}
@media (max-width: 600px) {
  .boh-totop {
    bottom: calc(14px + env(safe-area-inset-bottom, 0px)
                 + max(var(--boh-totop-lift, 0px), var(--boh-totop-footer, 0px)));
  }
}
.boh-totop:hover { border-color: var(--boh-magenta); }
.boh-totop:focus-visible { outline: 3px solid var(--boh-magenta); outline-offset: 3px; }
/* [hidden] is a browser default and loses to the class selector above. */
.boh-totop[hidden] { display: none !important; }
/* Chevron drawn in CSS, so the button needs no icon asset. */
.boh-totop__arrow {
  width: 10px; height: 10px;
  border-left: 2px solid var(--boh-ink);
  border-top: 2px solid var(--boh-ink);
  transform: translateY(2px) rotate(45deg);
}
.boh-totop:hover .boh-totop__arrow { border-color: var(--boh-magenta); }
@media (max-width: 600px) {
  .boh-totop { width: 42px; height: 42px;
    bottom: calc(14px + env(safe-area-inset-bottom, 0px) + var(--boh-totop-footer, 0px)); }
}
@media (prefers-reduced-motion: reduce) {
  .boh-totop { transition: opacity .01s linear; }
}

/* ── Editable copy blocks ────────────────────────────────────────────
   [boh_copy] renders the prose that used to be typed into the page. These
   rules carry the styling those blocks had inline, so the page reads
   exactly as before while the words become editable. */
.boh-copy { margin: 0; }
.boh-copy p { margin: 0 0 14px; }
.boh-copy p:last-child { margin-bottom: 0; }
.boh-copy--eyebrow { text-align: center; margin: 0 0 6px; }
.boh-copy--eyebrow p { margin: 0; }

/* Body copy. --left is alignment and width only: when it also carried a
   font-size it sat after the heading rule in this file and quietly shrank the
   silent-auction heading to body text. */
.boh-copy--left { text-align: left; max-width: 760px; }
.boh-copy--intro { font-size: 17px; max-width: 760px; }
.boh-copy--body { font-size: 17px; line-height: 1.65; color: var(--boh-ink); }
.boh-copy--small { font-size: 15px; }
.boh-copy--lede {
  text-align: center;
  max-width: 680px;
  margin: 8px auto 24px;
  color: var(--boh-ink-soft);
}
.boh-copy--lede.boh-copy--small { max-width: 560px; margin-bottom: 32px; }

/* Headings, last so they win their own size whatever else is on the element. */
.boh-copy--h2 {
  font-family: 'Montserrat', system-ui, sans-serif;
  font-weight: 800;
  text-align: center;
  font-size: clamp(30px, 3.4vw, 44px);
  line-height: 1.12;
  letter-spacing: -0.02em;
  margin: 8px 0 16px;
  color: var(--boh-ink);
}
.boh-copy--h2.boh-copy--left { text-align: left; }
.boh-copy--h2 em { font-style: normal; color: var(--boh-magenta); }

/* ── Sponsorship form: centre the consent line ───────────────────────
   The checkbox and its sentence sat hard left under a centred form. */
#sponsorship-form .wpcf7-acceptance,
.boh-form-row--terms {
  display: block;
  text-align: center;
}
#sponsorship-form .wpcf7-acceptance .wpcf7-list-item,
.boh-form-row--terms .wpcf7-list-item {
  margin: 0 auto;
  display: inline-flex;
  align-items: flex-start;
  gap: 10px;
  text-align: left;
  max-width: 520px;
}
#sponsorship-form .wpcf7-acceptance input[type="checkbox"],
.boh-form-row--terms input[type="checkbox"] {
  margin-top: 3px;
  flex: 0 0 auto;
}

/* ── Silent auction band ─────────────────────────────────────────────
   A column of copy on a wide yellow field read as an afterthought. It is a
   card now: the eyebrow above it, the heading, the two paragraphs, in one
   measure, centred in the band with room around them. */
.boh-auction-card {
  max-width: 780px;
  margin: 0 auto;
  padding: clamp(28px, 4vw, 44px) clamp(24px, 3.5vw, 48px);
  background: rgba(255,255,255,0.72);
  border: 1px solid rgba(31,26,36,0.08);
  border-radius: 20px;
  box-shadow: 0 22px 48px -30px rgba(31,26,36,0.35);
}
.boh-auction-card .boh-copy--h2 { margin-top: 4px; }
.boh-auction-card .boh-copy--body { margin-bottom: 14px; }
.boh-auction-card .boh-copy--small { color: var(--boh-ink-soft); }

/* ── Footer on black ─────────────────────────────────────────────────
   The footer was a pale pink field with dark type. Turning the ground black
   means every colour inside it has to turn with it - a background swap on
   its own would have left dark ink on black. Scoped here rather than edited
   into a dozen rules above, so the whole inversion reads in one place. */
.boh-footer {
  background: #0A0A0A !important;
  color: rgba(255,255,255,0.82) !important;
}
.boh-footer__brand h3 { color: #ffffff !important; }
.boh-footer__brand h3 span { color: var(--boh-magenta) !important; }
.boh-footer__brand p:not(.boh-footer__initiative) { color: rgba(255,255,255,0.70) !important; }
.boh-footer__initiative { color: rgba(255,255,255,0.62) !important; }
.boh-footer__initiative a { color: rgba(255,255,255,0.82) !important; }
.boh-footer__initiative a:hover { color: var(--boh-magenta) !important; }
.boh-footer__col a,
.boh-footer__col p { color: rgba(255,255,255,0.78) !important; }
.boh-footer__col a:hover { color: var(--boh-magenta) !important; }
/* The call-to-action panel was a white wash on pink; on black it needs to
   lift off the ground rather than sink into it. */
.boh-footer__cta {
  background: rgba(255,255,255,0.055) !important;
  border-color: rgba(255,255,255,0.14) !important;
}
/* Every heading in the panel, not just h4: "A Night of Giving" is an h3 and
   was left as dark ink on the dark card. */
.boh-footer__cta h2,
.boh-footer__cta h3,
.boh-footer__cta h4,
.boh-footer__cta h5,
.boh-footer__cta strong { color: #ffffff !important; }
.boh-footer__cta p,
.boh-footer__cta li,
.boh-footer__cta span:not(.boh-eyebrow) { color: rgba(255,255,255,0.82) !important; }
.boh-footer__bottom {
  border-top-color: rgba(255,255,255,0.12) !important;
  color: rgba(255,255,255,0.55) !important;
}
.boh-footer__bottom a { color: rgba(255,255,255,0.72) !important; }
.boh-footer__bottom a:hover { color: var(--boh-magenta) !important; }
.boh-footer__social a {
  color: rgba(255,255,255,0.78) !important;
  border-color: rgba(255,255,255,0.22) !important;
  background: transparent !important;
}
/* The old hover filled the disc magenta with a white glyph, which worked on
   the pink footer. On black it read as a solid pink blob - and once the
   footer rules also turned the glyph magenta, it was magenta on magenta.
   A magenta ring on a faint ground instead, with the glyph left legible. */
.boh-footer__social a:hover {
  background: rgba(208,20,130,0.16) !important;
  border-color: var(--boh-magenta) !important;
  color: #ffffff !important;
}
.boh-footer__social a svg { fill: currentColor; }
/* The HalfCup mark draws itself in ink; on black it draws in white. */
.boh-footer .boh-halfcup__label { color: rgba(255,255,255,0.55) !important; }
.boh-footer .boh-halfcup__mark [stroke="#1F1A24"],
.boh-footer .boh-halfcup__mark [stroke="#0A0A0A"],
.boh-footer .boh-halfcup__mark [stroke="currentColor"] { stroke: rgba(255,255,255,0.85) !important; }
.boh-footer .boh-halfcup__mark [fill="#1F1A24"] { fill: rgba(255,255,255,0.85) !important; }
.boh-footer .boh-halfcup { color: rgba(255,255,255,0.85) !important; }
/* #D01482 measures 3.87:1 on this ground. These labels are 11px, so they need
   AA; a lighter tint of the same hue reaches 7:1 and still reads as the brand. */
.boh-footer__col h4,
.boh-footer .boh-eyebrow { color: #FF6FB8 !important; border-color: #FF6FB8 !important; }
.boh-footer__brand h3 span { color: #FF6FB8 !important; }

/* ── The HalfCup credit on the black footer ──────────────────────────
   The mark draws itself in a brand gradient, which on black leaves the
   liquid and the steam almost invisible. At rest they are white, and the
   gradient returns on hover - so pointing at it is what brings the colour
   back rather than what makes it legible. */
.boh-footer .boh-halfcup .hc-liquid-fill { fill: #ffffff !important; opacity: 0.22; }
.boh-footer .boh-halfcup .hc-liquid-line,
.boh-footer .boh-halfcup .hc-steam { stroke: #ffffff !important; }
.boh-footer .boh-halfcup .hc-cup-outline,
.boh-footer .boh-halfcup .hc-cup-handle { stroke: rgba(255,255,255,0.92) !important; }
.boh-footer .boh-halfcup:hover .hc-liquid-fill { fill: url(#bohHalfcupGrad) !important; opacity: 0.35; }
.boh-footer .boh-halfcup:hover .hc-liquid-line,
.boh-footer .boh-halfcup:hover .hc-steam,
.boh-footer .boh-halfcup:hover .hc-cup-outline,
.boh-footer .boh-halfcup:hover .hc-cup-handle { stroke: url(#bohHalfcupGrad) !important; }
.boh-footer .boh-halfcup .hc-liquid-fill,
.boh-footer .boh-halfcup .hc-liquid-line,
.boh-footer .boh-halfcup .hc-steam,
.boh-footer .boh-halfcup .hc-cup-outline,
.boh-footer .boh-halfcup .hc-cup-handle { transition: stroke .2s ease, fill .2s ease, opacity .2s ease; }

/* The hover state was a 75%-white pill designed for a pale footer; on black
   it flashed. A soft lift of the ground reads as a highlight instead. */
.boh-footer .boh-halfcup {
  border-color: rgba(255,255,255,0.16) !important;
}
.boh-footer .boh-halfcup:hover {
  background: rgba(255,255,255,0.10) !important;
  border-color: rgba(255,255,255,0.34) !important;
}
.boh-footer .boh-halfcup:hover .boh-halfcup__label { color: #ffffff !important; }

/* ── Silent auction card: line it up with the section below ──────────
   It sat in a 780px measure while the commitment panel under it runs the
   full wide column, so the two edges disagreed. Zeroing the padding on its
   own wrapper - rather than pulling the card out with negative margins -
   means the edges match wherever that padding changes. */
.boh-auction-card { max-width: none; }
/* The card is not a direct child of the group - the block editor puts an
   inner container in between - so the child combinator matched nothing. */
.wp-block-group.alignwide:has(.boh-auction-card) {
  padding-left: 0 !important;
  padding-right: 0 !important;
}
@media (max-width: 600px) {
  /* Except on a phone, where the wide column already runs to the edges. */
  .wp-block-group.alignwide:has(.boh-auction-card) {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}

/* ── One call to action, not two ─────────────────────────────────────
   The package download and the commitment button were both solid magenta,
   so neither led. The download becomes an outline: still obvious, plainly
   the second thing to do. */
/* .wp-block-button.is-style-ember .wp-block-button__link is three classes and
   already !important, so an attribute selector on its own lost. Matching the
   style class too puts this ahead of it. */
.wp-block-button.is-style-ember .wp-block-button__link[href$=".pdf"],
.wp-block-button .wp-block-button__link[href$=".pdf"],
.wp-block-button__link[href$=".pdf"] {
  background: transparent !important;
  color: var(--boh-magenta) !important;
  box-shadow: inset 0 0 0 2px var(--boh-magenta) !important;
}
.wp-block-button.is-style-ember .wp-block-button__link[href$=".pdf"]:hover,
.wp-block-button .wp-block-button__link[href$=".pdf"]:hover,
.wp-block-button__link[href$=".pdf"]:hover {
  background: rgba(208,20,130,0.10) !important;
  color: var(--boh-magenta) !important;
}

/* ── Page-hero call to action ────────────────────────────────────────
   The same bob as the home page's scroll cue, so the two read as one
   family: the pill rises and settles, and holds still while pointed at.
   Solid magenta rather than the cue's frosted white - this one commits
   somebody to something rather than nudging them down the page. */
/* Room above the button so it reads as its own beat after the copy rather
   than as a third line of it. The hero body is flex-centred, so the block
   stays balanced in the band as this grows. */
.boh-page-hero__ctarow { margin: clamp(34px, 5.2vh, 60px) 0 0; text-align: center; }
.boh-page-hero__cta {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 8px 8px 8px 26px;
  border-radius: 999px;
  /* Frosted rather than solid: on a sub-page this sits over the pink band
     under the photograph, where a filled magenta pill shouted. The colour is
     carried by the chevron disc instead. */
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(16px) saturate(150%);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  border: 1px solid rgba(255,255,255,0.85);
  color: var(--boh-ink) !important;
  text-decoration: none !important;
  font-family: 'Montserrat', system-ui, sans-serif;
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  box-shadow: 0 14px 38px -14px rgba(31,26,36,0.45), 0 0 0 1px rgba(10,10,10,0.04);
  animation: bohHeroCtaBob 3.4s ease-in-out infinite;
  transition: box-shadow .25s ease, background .2s ease;
}
@keyframes bohHeroCtaBob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}
.boh-page-hero__cta:hover {
  animation-play-state: paused;
  background: #fff;
  box-shadow: 0 22px 48px -16px rgba(208,20,130,0.45), 0 0 0 1px rgba(208,20,130,0.18);
}
.boh-page-hero__cta:focus-visible { outline: 3px solid var(--boh-magenta); outline-offset: 3px; }
.boh-page-hero__cta-arrow {
  position: relative;
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--boh-magenta);
  flex: 0 0 auto;
  box-shadow: 0 6px 16px -6px rgba(208,20,130,0.65);
  transition: transform .25s cubic-bezier(.2,.8,.2,1), background .2s ease;
}
.boh-page-hero__cta:hover .boh-page-hero__cta-arrow {
  transform: scale(1.08);
  background: var(--boh-magenta-deep);
}
/* Chevron on the pseudo-element so the disc itself stays still. */
.boh-page-hero__cta-arrow::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 8px; height: 8px;
  margin: -6px 0 0 -4px;
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(45deg);
}
@media (prefers-reduced-motion: reduce) {
  .boh-page-hero__cta { animation: none; }
}

/* The hero fills the screen down to the fold, so whatever comes next starts
   below it rather than peeking in under the call to action. */
.boh-page-hero {
  /* 100vh, not 100vh minus the header: the header's height is already inside
     this section as the photograph's top margin, so subtracting it again left
     the next section peeking in by exactly that many pixels. */
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.boh-page-hero__body { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center; }
/* Arrow-only hero call to action. The words stay in the markup for anyone
   using a screen reader - it is the same control either way, just without
   the label showing. */
/* The arrow-only button wears the colours the other way round: magenta ring,
   white disc, magenta chevron. On its own with no label it reads better as a
   solid mark than as a frosted pill with a coloured dot in it. */
/* White ring. The disc inside is white too, so the two merge into a single
   white circle with a magenta chevron on it - the ring is no longer a ring.
   Nothing separates it from the pale pink band but the shadow, so that does
   the work, and the hover tints a shade off white to answer the pointer. */
.boh-page-hero__cta--arrow {
  padding: 6px;
  gap: 0;
  background: #ffffff;
  border-color: #ffffff;
  box-shadow: 0 12px 30px -12px rgba(10,10,10,0.30);
}
.boh-page-hero__cta--arrow:hover {
  background: #f7f7f7;
  border-color: #f7f7f7;
  box-shadow: 0 18px 40px -14px rgba(10,10,10,0.36);
}
.boh-page-hero__cta--arrow .boh-page-hero__cta-arrow {
  background: #fff;
  box-shadow: none;
}
.boh-page-hero__cta--arrow:hover .boh-page-hero__cta-arrow { background: #fff; }
.boh-page-hero__cta--arrow .boh-page-hero__cta-arrow::after {
  border-right-color: var(--boh-magenta);
  border-bottom-color: var(--boh-magenta);
}
.boh-page-hero__cta--arrow .boh-page-hero__cta-label {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.boh-page-hero__cta--arrow .boh-page-hero__cta-arrow { width: 40px; height: 40px; }

/* ── Home sections alternate left and right ──────────────────────────
   Everything centred down a long page reads as one column of the same
   thing. Alternating the measure gives the eye somewhere to travel. The
   classes are stamped in the page rather than written into the markup,
   because whether the agenda is open changes which section is which.
   Centred on a phone: at that width there is nothing to alternate. */
@media (min-width: 901px) {
  /* Everything in an aligned band shares the page's own column, so nothing
     ends up against the edge of the window - the first attempt aligned the
     copy to the viewport and it sat hard against the glass. */
  body.home .boh-band--left > .wp-block-group__inner-container > *:not(.boh-bandphoto),
  body.home .boh-band--right > .wp-block-group__inner-container > *:not(.boh-bandphoto),
  body.home .boh-band--left > *:not(.boh-bandphoto),
  body.home .boh-band--right > *:not(.boh-bandphoto) {
    max-width: 1240px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding-left: 24px;
    padding-right: 24px;
    box-sizing: border-box;
  }
  /* The copy keeps a readable measure and moves to one side of that column;
     the rows of countdown cells and buttons follow it rather than staying
     stranded in the middle. */
  body.home .boh-band--left .boh-home-section > *,
  body.home .boh-band--right .boh-home-section > * { max-width: 720px; }
  body.home .boh-band--left .boh-home-section,
  body.home .boh-band--left .boh-home-section > * { text-align: left; margin-left: 0; margin-right: auto; }
  body.home .boh-band--right .boh-home-section,
  body.home .boh-band--right .boh-home-section > * { text-align: right; margin-left: auto; margin-right: 0; }
  body.home .boh-band--left .boh-countdown,
  body.home .boh-band--left .wp-block-buttons { justify-content: flex-start; }
  body.home .boh-band--right .boh-countdown,
  body.home .boh-band--right .wp-block-buttons { justify-content: flex-end; }
}

/* ── A photograph beside the copy ────────────────────────────────────
   An alternating section leaves half the page empty; this fills it. The
   band becomes two columns and the picture takes whichever side the copy
   is not, so it follows the alternation without being told. */
@media (min-width: 901px) {
  body.home .boh-band--left:has(.boh-sideimg) > .wp-block-group__inner-container,
  body.home .boh-band--right:has(.boh-sideimg) > .wp-block-group__inner-container,
  body.home .boh-band--left:has(> .boh-sideimg),
  body.home .boh-band--right:has(> .boh-sideimg) {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    column-gap: clamp(28px, 4vw, 64px);
    max-width: 1240px;
    margin-inline: auto;
    padding-inline: 24px;
  }
  /* The copy stacks in its own column; the picture spans the other. */
  body.home .boh-band--left:has(.boh-sideimg) > .wp-block-group__inner-container > *:not(.boh-sideimg),
  body.home .boh-band--right:has(.boh-sideimg) > .wp-block-group__inner-container > *:not(.boh-sideimg) {
    grid-column: 1;
    max-width: none;
    padding-inline: 0;
    margin-inline: 0;
  }
  body.home .boh-sideimg {
    grid-column: 2;
    grid-row: 1 / span 99;
    align-self: center;
    /* The rule that gives an aligned band's children the page gutter was
       padding this box too, so the photograph sat inside a 24px white
       border on each side instead of filling its own frame. */
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  /* Even columns, so the two photographs come out identical whichever side
     they sit on. Weighting the split gave the right-hand band's picture the
     narrower column and it came out 90px smaller than its neighbour. The
     countdown keeps its single row on the strength of the tightened cells
     below. */
  body.home .boh-band--left:has(.boh-sideimg) > .wp-block-group__inner-container,
  body.home .boh-band--right:has(.boh-sideimg) > .wp-block-group__inner-container {
    grid-template-columns: 1fr 1fr;
    align-items: center;
    justify-items: center;
  }
  /* The copy keeps its own alignment inside its half; only the picture
     centres in its cell. */
  body.home .boh-band--left:has(.boh-sideimg) > .wp-block-group__inner-container > *:not(.boh-sideimg),
  body.home .boh-band--right:has(.boh-sideimg) > .wp-block-group__inner-container > *:not(.boh-sideimg) {
    justify-self: stretch;
  }
  body.home .wp-block-group:has(.boh-sideimg) .boh-countdown { flex-wrap: nowrap; gap: 10px; }
  body.home .wp-block-group:has(.boh-sideimg) .boh-countdown__unit {
    min-width: 0;
    padding-left: 12px;
    padding-right: 12px;
  }
  body.home .boh-band--right:has(.boh-sideimg) > .wp-block-group__inner-container > *:not(.boh-sideimg) { grid-column: 2; }
  body.home .boh-band--right .boh-sideimg { grid-column: 1; }
}
/* It should read as a photograph placed on the page, not a thumbnail beside
   the words: a deeper lift off the ground, a white edge holding it away from
   the band behind it, and a wash of the brand colour in the shadow. */
.boh-sideimg {
  border-radius: 22px;
  overflow: hidden;
  border: 6px solid #fff;
  box-shadow: 0 30px 60px -28px rgba(10,10,10,0.45),
              0 10px 30px -18px rgba(208,20,130,0.35);
  line-height: 0;
  box-sizing: border-box;
}
.boh-sideimg img {
  width: 100%;
  height: auto;
  /* 3:2 - the shape most of these photographs were taken in, so it crops
     least. Taller than the 8:3 strip it was, which was hiding most of each
     picture. */
  aspect-ratio: 3 / 2;
  object-fit: cover;
  display: block;
}
/* On a phone the copy is centred and there is no empty half to fill, so the
   picture would only be pushing the next section further down the page. */
@media (max-width: 900px) {
  .boh-sideimg { display: none; }
}

/* ── The hero's fine print ───────────────────────────────────────────
   "Since 2010 · A Rohit Group Initiative" used to sit above the headline,
   competing with it. It reads better as a credit at the foot of the view,
   under the scroll cue.

   It is a sibling of the cue rather than a wrapper around it: the hero
   forces position:relative on its children, and a separate script lifts the
   cue out to the cover - so anything wrapped around the cue was emptied and
   left behind. Both are positioned against the cover independently. */
.wp-block-cover.boh-hero .boh-hero-fineprint {
  position: absolute !important;
  left: 50% !important;
  right: auto !important;
  bottom: 12px !important;
  top: auto !important;
  transform: translateX(-50%) !important;
  z-index: 5;
  margin: 0 !important;
  width: max-content;
  max-width: 92vw;
  text-align: center;
  font-family: 'Montserrat', system-ui, sans-serif;
  font-weight: 600;
  /* !important because the hero styles paragraphs at 15px with the same
     weight - a credit set at the size of body copy is not a credit. */
  font-size: 10px !important;
  line-height: 1.4 !important;
  letter-spacing: 0.04em;
  /* Sentence case, not shouted: this is a credit, and it sits under the one
     thing on the view that is asking to be pressed. */
  text-transform: none;
  color: var(--boh-ink-soft);
  text-shadow: 0 1px 10px rgba(255,255,255,0.85);
  display: flex;
  align-items: center;
  gap: 5px;
}
/* "Rohit Group" as a small yellow chip - the logo's own second colour, and
   the only part of the line that goes anywhere when pressed. */
.wp-block-cover.boh-hero .boh-hero-fineprint a {
  color: #ffffff !important;
  text-decoration: none !important;
  background: var(--boh-ink);
  border: 1px solid var(--boh-ink);
  border-radius: 999px;
  padding: 1px 9px 2px;
  font-weight: 700;
  transition: background .18s ease, border-color .18s ease, color .18s ease;
}
/* Hover in Rohit's own yellow rather than the site's magenta - it is their
   name on the chip. Ink text on it, because white on #f9d135 is unreadable. */
.wp-block-cover.boh-hero .boh-hero-fineprint a:hover {
  background: #f9d135;
  border-color: #f9d135;
  color: var(--boh-ink) !important;
}
.wp-block-cover.boh-hero .boh-hero-fineprint a:focus-visible {
  outline: 2px solid var(--boh-magenta);
  outline-offset: 2px;
}
/* Room underneath so the line sits above the edge rather than on it, and the
   cue lifts to keep its own distance. */
.wp-block-cover.boh-hero .boh-hero-fineprint { bottom: 30px !important; }
.wp-block-cover.boh-hero .boh-scroll-cue--labelled { bottom: 68px !important; }
@media (max-width: 640px) {
  /* Three things share the foot of the hero on a phone and they were sitting
     on top of each other - the dots ran 16-25px from the bottom and the
     credit 22-40. Each gets its own band now, stacked upwards: dots, then
     the credit, then the cue. */
  .wp-block-cover.boh-hero .boh-hero-fineprint { bottom: 32px !important; font-size: 9px !important; }
  .wp-block-cover.boh-hero .boh-scroll-cue--labelled { bottom: 62px !important; }
}

/* ── The page you are on ─────────────────────────────────────────────
   The navigation gave no sign of where you were. WordPress marks the item
   with current-menu-item (and current-menu-ancestor for a child page), so
   the accent and a rule under the word are enough - no extra markup. */
.boh-header .current-menu-item > a,
.boh-header .current_page_item > a,
.boh-header .current-menu-ancestor > a,
.boh-header .current-menu-parent > a {
  color: var(--boh-magenta) !important;
  position: relative;
}
.boh-header .current-menu-item > a::after,
.boh-header .current_page_item > a::after,
.boh-header .current-menu-ancestor > a::after,
.boh-header .current-menu-parent > a::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -6px;
  height: 2px;
  border-radius: 2px;
  background: var(--boh-magenta);
}
/* The RSVP button is already a filled pill; a rule under it would read as a
   mistake, and it is never "the page you are on" in the same sense. */
.boh-header .current-menu-item > a.wp-block-button__link::after,
.boh-header .current-menu-item > .boh-nav__cta::after,
.boh-header .boh-nav__cta::after { display: none; }
.boh-header .boh-nav__cta { color: #fff !important; }

/* The lede sets to a narrower measure than the heading (54-58ch against the
   block's 720px) and centres itself inside it with margin: 0 auto - so its
   right edge stopped about 50px short of the heading's and the two read as
   misaligned. Each edge now hugs the side its band is on. */
@media (min-width: 901px) {
  body.home .boh-band--left .boh-home-section__lede,
  body.home .boh-band--left .boh-home-section__cta,
  body.home .boh-band--left .boh-home-section__meta {
    margin-left: 0 !important;
    margin-right: auto !important;
  }
  body.home .boh-band--right .boh-home-section__lede,
  body.home .boh-band--right .boh-home-section__cta,
  body.home .boh-band--right .boh-home-section__meta {
    margin-left: auto !important;
    margin-right: 0 !important;
  }
}

/* ── The slideshow's play/pause ──────────────────────────────────────
   Bottom-right of the hero, where the section arrows used to be. Two bars
   while the slideshow is running, a triangle once it is stopped, so the
   glyph says what pressing it will do rather than what it is doing. */
.wp-block-cover.boh-hero .boh-hero-pause {
  position: absolute !important;
  /* Bottom-left: the section arrows are back in the right-hand corner and
     the two sat on top of each other there. */
  left: 22px !important;
  /* Bottom edge level with the credit plate to its right (which sits at 30);
     the disc is taller, so matching the offset is what makes the two read as
     one row rather than aligning their centres. */
  bottom: 30px !important;
  right: auto !important;
  top: auto !important;
  z-index: 6;
  width: 46px !important;
  height: 46px !important;
  padding: 0 !important;
  border-radius: 50% !important;
  border: 1px solid rgba(31,26,36,0.10) !important;
  background: rgba(255,255,255,0.94) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 10px 26px -12px rgba(31,26,36,0.45) !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background .18s ease, transform .18s ease;
}
.wp-block-cover.boh-hero .boh-hero-pause:hover {
  background: #fff !important;
  transform: translateY(-2px);
}
.wp-block-cover.boh-hero .boh-hero-pause:focus-visible {
  outline: 3px solid var(--boh-magenta);
  outline-offset: 3px;
}
.wp-block-cover.boh-hero .boh-hero-pause .boh-hero-pause__icon {
  display: block;
  width: 12px;
  height: 14px;
  margin: 0;
  background: none !important;
  /* The bars need !important as well: the `border: 0 !important` above is a
     shorthand, and a plain longhand after it cannot override an important
     declaration - which is why the disc came out empty. */
  border: 0 !important;
  border-left: 4px solid var(--boh-ink, #1F1A24) !important;
  border-right: 4px solid var(--boh-ink, #1F1A24) !important;
  box-sizing: border-box;
  opacity: 1 !important;
  transform: none;
}
.wp-block-cover.boh-hero .boh-hero-pause[aria-pressed="true"] .boh-hero-pause__icon {
  width: 0;
  height: 0;
  margin-left: 3px;
  border: 0 !important;
  border-left: 13px solid var(--boh-ink, #1F1A24) !important;
  border-top: 8px solid transparent !important;
  border-bottom: 8px solid transparent !important;
}
@media (max-width: 640px) {
  .wp-block-cover.boh-hero .boh-hero-pause {
    left: 14px !important;
    right: auto !important;
    /* Level with the credit plate, which sits at 32 on a phone. */
    bottom: 32px !important;
    width: 40px !important;
    height: 40px !important;
  }
}

/* ── The two sponsorship buttons match ───────────────────────────────
   "Download full sponsorship package (PDF)" is three times the length of
   "Commit to sponsor", so left alone one ran full width over two lines while
   the other sat small beside it. A grid rather than a flex row: equal
   columns give equal widths, and 1fr rows give equal heights however many
   lines the longer label happens to take. */
.wp-block-buttons:has(.wp-block-button__link[href$=".pdf"]) {
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 1fr;
  gap: 14px;
  max-width: 720px;
  margin-left: auto !important;
  margin-right: auto !important;
}
.wp-block-buttons:has(.wp-block-button__link[href$=".pdf"]) {
  align-items: stretch !important;
}
.wp-block-buttons:has(.wp-block-button__link[href$=".pdf"]) .wp-block-button {
  width: 100%;
  display: flex;
  align-self: stretch !important;
}
.wp-block-buttons:has(.wp-block-button__link[href$=".pdf"]) .wp-block-button__link {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: 100%;
  /* height, not min-height: the link has to fill the grid cell or the row's
     stretch never reaches it and the two ended up 12px apart. */
  height: 100%;
  min-height: 56px;
  line-height: 1.25;
  box-sizing: border-box;
}
@media (max-width: 640px) {
  /* Stacked at this width, still the same size as each other. */
  .wp-block-buttons:has(.wp-block-button__link[href$=".pdf"]) {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .wp-block-buttons:has(.wp-block-button__link[href$=".pdf"]) .wp-block-button__link {
    font-size: 14px !important;
    /* Stacked, each button is its own grid row, so stretch cannot equalise
       them. Room for two lines instead, which is what the longer label takes
       at this width - both then stand the same height. */
    min-height: 68px;
    padding-left: 18px !important;
    padding-right: 18px !important;
  }
}

/* ── Three sections fill the window again ────────────────────────────
   The date, the community-event copy and "someone cares" are each meant to
   be arrived at as a view of their own. Everything else - the card grids,
   the numbers - stays sized to its contents, which is what took the page
   from nine screens down to five. */
@media (min-width: 901px) and (min-height: 640px) {
  body.home .entry-content > .boh-when-band,
  body.home .entry-content > #boh-what,
  body.home .entry-content > .boh-band-full {
    min-height: 100vh;
    justify-content: center;
  }
}

/* ── Explore: lighter on a phone ─────────────────────────────────────
   Five boxed cards stacked one under another made the foot of the page feel
   heavy and long. At this width they become a simple list: no box, no
   border, no shadow - just a hairline between each, the title and its arrow
   on one line, and the description under it in a smaller, quieter face. */
@media (max-width: 640px) {
  .boh-quick-links {
    gap: 0;
    margin-top: 22px;
    padding: 0 20px;
  }
  .boh-quick-links__card {
    background: none;
    border: 0;
    border-radius: 0;
    border-top: 1px solid rgba(10,10,10,0.09);
    padding: 15px 0 16px;
  }
  .boh-quick-links__card:first-child { border-top: 0; }
  .boh-quick-links__card:hover,
  .boh-quick-links__card:focus-visible {
    transform: none;
    box-shadow: none;
    background: none;
    border-color: rgba(10,10,10,0.09);
  }
  .boh-quick-links__title {
    font-size: 16px;
    margin-bottom: 3px;
  }
  .boh-quick-links__desc {
    font-size: 13px;
    line-height: 1.45;
    color: var(--boh-ink-mute);
    max-width: 34em;
  }
  /* Tighter top and bottom to match. The band's colour is left alone: it is
     set by the alternating-grounds pass, and overriding it here would put two
     bands of the same colour next to each other. */
  .boh-explore-band {
    padding-top: 56px !important;
    padding-bottom: 72px !important;
  }
}

/* The agenda shortcut sits under the RSVP button and should start where it
   starts, not in the middle of the column. It follows the band's alignment
   like everything else in it. */
@media (min-width: 901px) {
  body.home .boh-band--left .boh-agenda-shortcut {
    text-align: left;
    margin-left: 0;
    margin-right: auto;
  }
  body.home .boh-band--right .boh-agenda-shortcut {
    text-align: right;
    margin-left: auto;
    margin-right: 0;
  }
}

/* ── How it works: a swipeable row on a phone ────────────────────────
   Four cards stacked one under another made this the tallest thing on the
   page - 2.5 screens for 109 words. Side by side in a scroller they take
   about a third of that, and the four steps read as a sequence rather than
   as four separate things you scroll past. */
@media (max-width: 640px) {
  body.home .boh-how-it-works--compact .boh-how-it-works__grid {
    display: grid;
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 78%;
    gap: 14px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    /* Full bleed, so a card can sit against the edge of the screen and the
       next one shows just enough to say "there is more". */
    width: 100vw;
    /* border-box, or the 20px of padding is added to the 100vw and the whole
       page picks up a horizontal scrollbar. */
    box-sizing: border-box;
    margin-left: calc(50% - 50vw);
    padding: 4px 20px 14px;
    scrollbar-width: none;
  }
  body.home .boh-how-it-works--compact .boh-how-it-works__grid::-webkit-scrollbar { display: none; }
  body.home .boh-how-it-works--compact .boh-how-it-works__step {
    scroll-snap-align: center;
    min-width: 0;
  }
  /* The reveal animation staggers these in from the side, which fights a
     horizontal scroller - it starts the row part-scrolled. */
  body.home .boh-how-it-works--compact .boh-how-it-works__grid.boh-reveal-stagger > * {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ── Explore is desktop only ─────────────────────────────────────────
   On a phone it was 1.2 screens of links that all live in the menu two taps
   away, at the very foot of a page people had already told us felt long. The
   alternating-grounds pass skips anything with no height, so hiding it does
   not leave two bands of the same colour next to each other. */
@media (max-width: 640px) {
  body.home .boh-explore-band { display: none !important; }
}


/* ── Silent auction card: centred ────────────────────────────────────
   The eyebrow was centred and everything under it ran left, which left the
   right half of a very wide card empty and the two halves disagreeing. */
.boh-auction-card .boh-copy,
.boh-auction-card .boh-copy--left,
.boh-auction-card .boh-copy--h2,
.boh-auction-card .boh-copy--h2.boh-copy--left {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}
/* A measure the eye can follow: the card runs the full width of the page
   column, and a line of body copy that long is hard to read back. */
/* A fixed measure rather than 68ch: the two paragraphs are set at different
   sizes, so a ch-based width made them different widths and their edges
   disagreed by 60px. */
.boh-auction-card .boh-copy--body,
.boh-auction-card .boh-copy--small {
  max-width: 720px;
}
.boh-auction-card .boh-copy--h2 { max-width: 22ch; }

/* ── Footer credit: the hero's Rohit Group chip, adapted to a black ground ──
   Same mark in front of the words and the same yellow on hover. The hero
   chip is black-on-photograph; here the footer is already black, so the chip
   fills rather than inverts - yellow ground, ink words and ink mark. */
.boh-footer__initiative a.boh-rohit-brand {
  color: #f9d135 !important;
  padding: 1px 8px 2px;
  border-radius: 999px;
  box-shadow: none;
  transition: background .18s ease, color .18s ease, box-shadow .18s ease;
}
.boh-footer__initiative a.boh-rohit-brand:hover,
.boh-footer__initiative a.boh-rohit-brand:focus {
  background: #f9d135 !important;
  box-shadow: none;
  color: var(--boh-ink) !important;
}

/* ── Sponsorship cards: choosing one fills in the form ───────────────
   The button carries a stretched overlay, so a click anywhere on the card
   picks that level while the control itself stays a real, focusable button. */
.boh-tier__choose {
  position: static;
  appearance: none;
  -webkit-appearance: none;
  background: none;
  border: 0;
  border-top: 1px solid var(--boh-rule);
  margin: 18px -22px 0;
  padding: 12px 22px;
  width: calc(100% + 44px);
  font-family: 'Montserrat', sans-serif;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
  color: var(--boh-magenta);
  cursor: pointer;
  transition: background .18s ease, color .18s ease;
}
/* Anything above the price band that has its own bottom spacing would fight
   this row for the card foot; the button owns the gap instead. */
.boh-tier__choose + .boh-tier__price { margin-top: 0; border-top: 0; }
.boh-tier__choose::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
}
.boh-tier:hover .boh-tier__choose { background: rgba(208,20,130,0.06); }
.boh-tier__choose:focus-visible {
  outline: 2px solid var(--boh-magenta);
  outline-offset: -3px;
}
/* The chosen card: a magenta ring, and the row reads back what it did. */
.boh-tier.is-chosen {
  border-color: var(--boh-magenta);
  box-shadow: 0 0 0 2px var(--boh-magenta), 0 12px 28px rgba(208,20,130,0.14);
}
.boh-tier.is-chosen .boh-tier__choose {
  background: var(--boh-magenta);
  color: #fff;
}
.boh-tier.is-chosen .boh-tier__choose::before {
  content: '✓ ';
}
/* And the field itself, on arrival, so the pre-filled value is noticed. */
select[name="sponsorship-level"].is-prefilled {
  border-color: var(--boh-magenta) !important;
  box-shadow: 0 0 0 3px rgba(208,20,130,0.18);
}

/* ── Hero credit: an opaque plate behind the words ───────────────────
   White glow on white text was doing the legibility work, which fails on the
   slides that are pale in that corner. The line sits on its own ground
   instead - a frosted white, because the Rohit Group chip stays black and
   needs something to be black against. */
.wp-block-cover.boh-hero .boh-hero-fineprint {
  /* Translucent, with the photograph blurred behind it. 65% is the point
     where ink text still clears 8:1 against the darkest slide - a thinner
     ground looks better and stops being readable, which is the problem this
     is here to fix. */
  background: rgba(255,255,255,0.65);
  -webkit-backdrop-filter: blur(8px) saturate(1.05);
  backdrop-filter: blur(8px) saturate(1.05);
  color: var(--boh-ink) !important;
  text-shadow: none !important;
  padding: 5px 14px 6px !important;
  border-radius: 999px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.14);
}
@media (max-width: 640px) {
  .wp-block-cover.boh-hero .boh-hero-fineprint { padding: 4px 11px 5px !important; }
}

/* ── The slideshow dots keep the right-hand rail on a phone ──────────
   They were moved to a row along the bottom to clear the other hero chrome;
   asked for back on the rail, so the row override goes and only the smaller
   dot size stays. The rail tucks a little closer to the edge at this width. */
@media (max-width: 720px) {
  .wp-block-cover.boh-hero .boh-hero-dots {
    flex-direction: column !important;
    left: auto !important;
    right: 14px !important;
    top: 50% !important;
    bottom: auto !important;
    transform: translateY(-50%) !important;
    gap: 10px !important;
  }
}

/* ── The current slide's dot, actually marked ────────────────────────
   .is-active has been applied correctly the whole time - the styling was
   losing to the base dot rule, which sets background and border with
   !important. Only the scale survived, and 14px to 16px reads as nothing.
   Filled magenta against the white ring, so which slide you are on is
   legible at a glance. */
.wp-block-cover.boh-hero .boh-hero-dot.is-active {
  background: var(--boh-magenta) !important;
  border-color: #fff !important;
  transform: scale(1.2);
  box-shadow: 0 2px 8px rgba(0,0,0,0.45);
}

/* ── The hero's closing card: button, with the credit as its footer ───
   They were two floating things a few pixels apart. Now one card carries
   both - the call to action on top, the credit on a hairline beneath it -
   so the hero ends on a single object rather than a stack of chrome.

   The card owns the position, the centring and the bob; the two children
   go static inside it. All of that needs !important because their own
   rules pin them to the cover with it. */
.wp-block-cover.boh-hero .boh-hero-cta {
  position: absolute !important;
  left: 50% !important;
  right: auto !important;
  bottom: 30px !important;
  top: auto !important;
  transform: translateX(-50%);
  z-index: 6;
  width: max-content;
  max-width: 92vw;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  border-radius: 26px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.85);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  backdrop-filter: blur(16px) saturate(150%);
  box-shadow: 0 14px 38px -14px rgba(31,26,36,0.45),
              0 0 0 1px rgba(10,10,10,0.04);
  animation: bohCtaBob 3.4s ease-in-out infinite;
  transition: box-shadow .25s ease;
}
@keyframes bohCtaBob {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%      { transform: translateX(-50%) translateY(-6px); }
}
.wp-block-cover.boh-hero .boh-hero-cta:hover {
  animation-play-state: paused;
  box-shadow: 0 22px 48px -16px rgba(208,20,130,0.45),
              0 0 0 1px rgba(208,20,130,0.18);
}
@media (prefers-reduced-motion: reduce) {
  .wp-block-cover.boh-hero .boh-hero-cta {
    animation: none;
    transform: translateX(-50%);
  }
}

/* Both children hand their positioning, their frame and their own bob to
   the card. The rounding comes from the card clipping them. */
.wp-block-cover.boh-hero .boh-hero-cta .boh-scroll-cue--labelled,
.wp-block-cover.boh-hero .boh-hero-cta .boh-hero-fineprint {
  position: static !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  bottom: auto !important;
  transform: none !important;
  animation: none !important;
  margin: 0 !important;
  /* width:auto plus the card's align-items:stretch, not width:100%: these
     two are content-box, so a 100% width put their padding 45px past the
     card's right edge, where overflow:hidden cropped it silently. */
  width: auto !important;
  max-width: none !important;
  box-sizing: border-box !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  justify-content: center;
}
.wp-block-cover.boh-hero .boh-hero-cta .boh-scroll-cue--labelled {
  background: rgba(255,255,255,0.92) !important;
  /* The button is stretched to the card, so it is wider than its own
     contents. Fixed side padding put all that slack on the outside - 33px
     left, 31px right, against a 14px gap in the middle. space-evenly hands
     the same space to all three, at whatever width the card ends up. */
  padding: 9px 0 !important;
  gap: 0 !important;
  justify-content: space-evenly !important;
}
/* The label's own letter-spacing hangs off the last character, which makes
   the gap to the arrow read a pixel tighter than it measures. */
.wp-block-cover.boh-hero .boh-hero-cta .boh-scroll-cue__label {
  margin-right: -1.2px !important;
}
.wp-block-cover.boh-hero .boh-hero-cta:hover .boh-scroll-cue--labelled {
  background: #fff !important;
}
/* The footer: same frosted ground, one hairline holding it to the button. */
.wp-block-cover.boh-hero .boh-hero-cta .boh-hero-fineprint {
  background: rgba(255,255,255,0.62) !important;
  border-top: 1px solid rgba(10,10,10,0.10) !important;
  padding: 6px 16px 7px !important;
}
/* Under 600px tall the cue hides itself, and a hairline above nothing reads
   as a mistake. */
@media (max-height: 600px) {
  .wp-block-cover.boh-hero .boh-hero-cta .boh-hero-fineprint { border-top: 0 !important; }
}
@media (max-width: 640px) {
  .wp-block-cover.boh-hero .boh-hero-cta { bottom: 32px !important; }
}

/* ── The two "add to calendar" buttons match ─────────────────────────
   They were sized by their own labels, so "Download .ics (Apple / Outlook)"
   ran a good deal wider than "Add to Google Calendar" and the pair read as
   one button with an afterthought beside it. Two equal columns, sized by the
   longer label; below 560px they stack, where equal width means full width. */
.boh-cal {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  width: max-content;
  max-width: 100%;
  margin: 26px auto 0;
}
.boh-cal a {
  justify-content: center;
  text-align: center;
}
@media (max-width: 560px) {
  .boh-cal {
    grid-template-columns: minmax(0, 1fr);
    width: 100%;
    max-width: 360px;
  }
}

/* ── The dots and the play/pause travel together ─────────────────────
   The button was in the opposite corner from the thing it controls. Both
   now sit in one rail on the right: the dots, then the button under them.
   The rail owns the position; the two children go static inside it. */
.wp-block-cover.boh-hero .boh-hero-rail {
  position: absolute !important;
  right: 24px;
  top: 50%;
  left: auto;
  bottom: auto;
  transform: translateY(-50%);
  z-index: 6;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}
.wp-block-cover.boh-hero .boh-hero-rail .boh-hero-dots,
.wp-block-cover.boh-hero .boh-hero-rail .boh-hero-pause {
  position: static !important;
  right: auto !important;
  left: auto !important;
  top: auto !important;
  bottom: auto !important;
  transform: none !important;
  margin: 0 !important;
}
@media (max-width: 640px) {
  .wp-block-cover.boh-hero .boh-hero-rail { right: 14px; gap: 14px; }
}

/* ── Footer, centred once it stacks ──────────────────────────────────
   At this width the four columns become one, and left-aligned text in a
   single narrow column reads as ragged - each block centres on the phone's
   axis instead. The lists lose their inherited indent, which would otherwise
   push "centred" text a few pixels off centre. */
@media (max-width: 520px) {
  .boh-footer__inner {
    text-align: center;
    justify-items: center;
  }
  .boh-footer__brand,
  .boh-footer__col,
  .boh-footer__cta {
    width: 100%;
  }
  /* Matching :not() here on purpose: the blurb's own rule carries it, so a
     plainer selector loses even with !important - which left it 12px off
     centre while everything around it lined up. */
  .boh-footer__brand p,
  .boh-footer__brand p:not(.boh-footer__initiative),
  .boh-footer__brand h3 {
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .boh-footer__social { justify-content: center; }
  .boh-footer__col ul,
  .boh-footer__col li { padding-left: 0 !important; text-align: center; }
  .boh-footer__cta {
    align-items: center;
    text-align: center;
  }
  .boh-footer__bottom {
    flex-direction: column;
    justify-content: center;
    text-align: center;
  }
}

/* ── The play/pause, smaller ─────────────────────────────────────────
   46px was sized for a lone control in the corner. Sitting under a rail of
   14px dots it read as the loudest thing in the hero; 32 keeps it pressable
   and lets the dots lead. The glyph scales with it - the bars and the
   triangle are drawn out of borders, so each width is set on its own. */
.wp-block-cover.boh-hero .boh-hero-pause {
  width: 32px !important;
  height: 32px !important;
}
.wp-block-cover.boh-hero .boh-hero-pause .boh-hero-pause__icon {
  width: 9px;
  height: 11px;
  border-left-width: 3px !important;
  border-right-width: 3px !important;
}
.wp-block-cover.boh-hero .boh-hero-pause[aria-pressed="true"] .boh-hero-pause__icon {
  margin-left: 2px;
  border-left-width: 10px !important;
  border-top-width: 6px !important;
  border-bottom-width: 6px !important;
}
@media (max-width: 640px) {
  .wp-block-cover.boh-hero .boh-hero-pause {
    width: 28px !important;
    height: 28px !important;
  }
  .wp-block-cover.boh-hero .boh-hero-pause .boh-hero-pause__icon {
    width: 8px;
    height: 10px;
    border-left-width: 2.5px !important;
    border-right-width: 2.5px !important;
  }
  .wp-block-cover.boh-hero .boh-hero-pause[aria-pressed="true"] .boh-hero-pause__icon {
    border-left-width: 9px !important;
    border-top-width: 5px !important;
    border-bottom-width: 5px !important;
  }
}

/* ── Each footer section runs two columns on a phone ─────────────────
   Stacked one item per line, those lists ran the footer on for a screen and
   a half. Each section keeps its own full-width heading and splits its list
   into two columns underneath, so the sections stay separate.
   The email address is the one string wide enough to break a 150px column,
   so it is allowed to wrap mid-word. */
@media (max-width: 520px) {
  .boh-footer__col ul {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 16px;
    align-items: start;
  }
  .boh-footer__col a,
  .boh-footer__col p {
    overflow-wrap: anywhere;
  }
}

/* Contact stays a single centred column on a phone. Two columns suited the
   five short links above it; an address and an opening time are not that
   shape, and splitting them put a wrapped street address beside a time. */
@media (max-width: 520px) {
  .boh-footer__col--contact ul {
    grid-template-columns: 1fr;
    justify-items: center;
  }
  .boh-footer__col--contact li,
  .boh-footer__col--contact a,
  .boh-footer__col--contact p {
    text-align: center;
    overflow-wrap: normal;
  }
}

/* ── "View offer details" ────────────────────────────────────────────
   Sits above the card's stretched choose-overlay, which otherwise swallows
   every click inside the card. Quiet next to the choose row: the card's job
   is still to be chosen. */
.boh-tier__more {
  position: relative;
  z-index: 2;
  appearance: none;
  -webkit-appearance: none;
  background: none;
  border: 0;
  margin: 14px 0 0;
  padding: 0;
  font-family: 'Montserrat', sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--boh-ink-soft);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  align-self: flex-start;
  transition: color .18s ease;
}
.boh-tier__more::after { content: ' →'; text-decoration: none; }
.boh-tier__more:hover { color: var(--boh-magenta); }
.boh-tier__more:focus-visible {
  outline: 2px solid var(--boh-magenta);
  outline-offset: 3px;
  border-radius: 3px;
}

/* ── The offer dialog ────────────────────────────────────────────────
   A native <dialog>: the backdrop, Escape and the focus trap come with it. */
.boh-tier-dialog {
  width: min(560px, calc(100vw - 32px));
  max-height: min(80vh, 720px);
  padding: 0;
  border: 0;
  border-radius: 18px;
  background: #fff;
  color: var(--boh-ink);
  box-shadow: 0 40px 90px -30px rgba(0,0,0,0.55);
  overflow: hidden;
}
.boh-tier-dialog::backdrop {
  background: rgba(18,14,22,0.72);
  backdrop-filter: blur(4px);
}
/* The tone stripe the card wears, along its top edge. */
.boh-tier-dialog::before {
  content: '';
  display: block;
  height: 5px;
  background: var(--boh-magenta);
}
.boh-tier-dialog--platinum::before { background: linear-gradient(90deg, var(--boh-magenta), var(--boh-yellow)); }
.boh-tier-dialog--gold::before     { background: var(--boh-yellow); }
.boh-tier-dialog--silver::before   { background: #8892a5; }
.boh-tier-dialog--bronze::before   { background: #c88a5c; }
.boh-tier-dialog--support::before  { background: var(--boh-plum); }
.boh-tier-dialog--custom::before   { background: var(--boh-ink); }

.boh-tier-dialog__close-form { margin: 0; }
.boh-tier-dialog__close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(31,26,36,0.06);
  border: 0;
  border-radius: 50%;
  font-size: 22px;
  line-height: 1;
  color: var(--boh-ink);
  cursor: pointer;
  transition: background .18s ease;
}
.boh-tier-dialog__close:hover { background: rgba(208,20,130,0.14); }

.boh-tier-dialog__body {
  padding: 26px 30px 8px;
  overflow-y: auto;
  max-height: calc(min(80vh, 720px) - 100px);
}
.boh-tier-dialog__eyebrow {
  margin: 0 0 6px;
  font-family: 'Montserrat', sans-serif;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--boh-ink-soft);
}
.boh-tier-dialog__title {
  margin: 0 0 6px !important;
  font-family: 'Montserrat', sans-serif !important;
  font-size: 24px !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  letter-spacing: -0.01em;
}
.boh-tier-dialog__price {
  margin: 0 0 16px;
  font-family: 'Montserrat', sans-serif;
  font-size: 20px;
  font-weight: 900;
  color: var(--boh-magenta);
}
.boh-tier-dialog__copy {
  margin: 0 0 20px;
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--boh-ink-soft);
}
.boh-tier-dialog__benefits h3 {
  margin: 0 0 10px !important;
  font-family: 'Montserrat', sans-serif !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--boh-ink) !important;
}
.boh-tier-dialog__benefits ul {
  margin: 0 0 6px !important;
  padding: 0 !important;
  list-style: none !important;
}
.boh-tier-dialog__benefits li {
  position: relative;
  margin: 0 0 9px !important;
  padding-left: 22px;
  font-size: 15px;
  line-height: 1.5;
}
.boh-tier-dialog__benefits li::before {
  content: '';
  position: absolute;
  left: 4px;
  top: 8px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--boh-magenta);
}
.boh-tier-dialog__foot {
  padding: 16px 30px 24px;
  border-top: 1px solid var(--boh-rule);
  background: #fff;
}
.boh-tier-dialog__choose {
  width: 100%;
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  border-radius: 999px;
  padding: 14px 22px;
  background: var(--boh-magenta);
  color: #fff;
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease;
}
.boh-tier-dialog__choose:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 26px -10px rgba(208,20,130,0.7);
}
@media (max-width: 520px) {
  .boh-tier-dialog { width: calc(100vw - 20px); max-height: 88vh; }
  .boh-tier-dialog__body { padding: 22px 20px 6px; max-height: calc(88vh - 96px); }
  .boh-tier-dialog__foot { padding: 14px 20px 20px; }
  .boh-tier-dialog__title { font-size: 21px !important; }
}
@media (prefers-reduced-motion: reduce) {
  .boh-tier-dialog__choose { transition: none; }
}