/**
 * BizWomenHub refinement stylesheet (UI/UX polish layer, 2026-09 design refinement).
 *
 * Purpose: converge the live site onto the documented design system without
 * changing the client-approved identity (logo, purple, photography, content,
 * layout direction, Nunito typography). Read docs/design/UI-UX-REFINEMENT.md
 * for the findings this file addresses (finding numbers in comments).
 *
 * Revamp pass applies the installed skills (skills/apple-design and
 * skills/emil-design-eng): hero contrast scrim, compact translucent header,
 * size-specific type tracking, strong ease-out curves, instant press
 * feedback, hover gated behind pointer:fine, reduced-transparency support.
 *
 * Load order: enqueued after style.css by functions.php (bwh_refine_enqueue),
 * so these rules win ties against theme rules of equal specificity.
 *
 * Sections:
 *   1. Design tokens and base
 *   2. Typography (findings 12, 13, 18, 19, 34)
 *   3. Buttons (findings 17, 32)
 *   4. Header and navigation (findings 21, 32, 34, 24)
 *   5. Hero and cover contrast
 *   6. Section rhythm and containers (findings 10, 11, 12)
 *   7. Homepage specific fixes (findings 14, 15) and icon treatment
 *   8. Gallery (finding 28)
 *   9. Events page overflow (findings 23, 9)
 *  10. Touch targets (finding 24)
 *  11. Focus and accessibility (findings 6, 20)
 *  12. Motion (finding 33) with reduced-motion and reduced-transparency
 *  13. AOS entrance tuning (animations-for-blocks plugin), finding 35
 *  14. Why Join image-led card track (findings 37, 44, 45)
 *  15. Homepage About Us image-led split (user request, design-language doc)
 *  16. Story / Mission / Vision numbered progression
 *  17. WOW + animate.css convergence onto the motion tokens (finding 42)
 *  18. Radius and color stragglers mapped onto tokens (findings 38, 40)
 *  19. Touch targets part two (finding 43)
 *  20. Events and contact token alignment (round-3 audit)
 *  21. Why Join track scroll affordance and keyboard access
 *  22. Cover dim layers onto the palette (round-4)
 *  23. About value cards: identity hues, calm surface (round-4)
 *  24. Fluent conversational form token alignment (round-4)
 *  25. Radius and shadow stragglers, round-4 (audit2)
 *  26. Tribe text color #141827 onto the ink token (audit2)
 *  27. Touch targets part three (audit2)
 *  28. Mobile rhythm: split tail, cover heights, why-join peek (round-4)
 *  29. Purple uniformity: WP default leftovers onto brand tokens (round-5)
 *  30. Transition hygiene: theme transition:all replaced with token timing
 *  31. Micro animations: stagger, underline sweeps, card lifts, press states
 *  32. Focus ring unification (one ring on every surface)
 *  33. prefers-contrast: more (third user signal, apple-design section 14)
 *  34. Empty and error states: 404, search-empty, form messages
 *  35. Mobile form spacing: conversational form dead space (round-6)
 *  36. Uniformity pass: type roles, card recipe, image crops, 16px body,
 *      motion stragglers (design-uniformity iteration, Phase 7)
 *  41. Footer redesign: ink surface, brand row, column grid, bottom bar,
 *      vertical rhythm (design-system section 8)
 */

/* ==========================================================================
   1. Design tokens and base
   ========================================================================== */

:root {
  --bwh-purple: #7f1fa6;
  --bwh-purple-dark: #6a1889;
  --bwh-purple-darker: #5c1476;
  --bwh-navy: #242f65;
  --bwh-ink: #111111;
  --bwh-muted: #5d5d5d;
  --bwh-line: #e6e6e6;
  --bwh-surface: #ffffff;
  --bwh-surface-alt: #f9f9f9;
  --bwh-on-dark: #ffffff;
  /* Radius scale (design-language doc, F38): none / sm / md / lg / pill.
     Nothing outside this list; see section 14 for the mappings. */
  --bwh-radius-none: 0;
  --bwh-radius-sm: 8px;
  --bwh-radius-md: 12px;
  --bwh-radius-lg: 16px;
  --bwh-radius-pill: 9999px;
  --bwh-radius-btn: var(--bwh-radius-md);
  --bwh-radius-img: var(--bwh-radius-md);
  --bwh-radius-gallery: var(--bwh-radius-sm);
  --bwh-space-section: 96px;
  --bwh-space-section-tablet: 72px;
  --bwh-space-section-mobile: 56px;
  --bwh-container: 1140px;
  /* Strong curves per emil-design-eng: built-in easings feel sluggish. */
  --bwh-ease: cubic-bezier(0.23, 1, 0.32, 1);
  --bwh-ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  /* Motion scale (design-language doc): one easing, four durations, one travel. */
  --bwh-dur-press: 90ms;
  --bwh-fast: 160ms;
  --bwh-dur-base: 240ms;
  --bwh-dur-reveal: 450ms;
  --bwh-travel: 16px;
  /* Shadow scale: three values, each with a job (F40). */
  --bwh-shadow-raised: 0 1px 0 rgba(17, 17, 17, 0.05),
    0 12px 32px -16px rgba(17, 17, 17, 0.18);
  --bwh-shadow-lift: 0 2px 4px rgba(17, 17, 17, 0.06),
    0 16px 32px -12px rgba(17, 17, 17, 0.2);
  --bwh-shadow-float: 0 4px 12px rgba(17, 17, 17, 0.08),
    0 24px 48px -16px rgba(17, 17, 17, 0.24);
  --bwh-shadow-soft: 0 1px 2px rgba(17, 17, 17, 0.05),
    0 16px 48px -20px rgba(17, 17, 17, 0.22);
  --bwh-shadow-btn: 0 1px 2px rgba(17, 17, 17, 0.06),
    0 10px 28px -12px rgba(127, 31, 166, 0.5);
  /* Semantic danger, round-5: form errors need a state color the palette
     did not have. Uses WP's own vivid-red preset so it stays inside the
     color set the site already ships. */
  --bwh-danger: #cf2e2e;
  /* Type scale (Phase 7 uniformity pass, docs/design/BWH-DESIGN-SYSTEM.md).
     One value per role at every viewport; no page-level clamps. */
  --bwh-fs-section: clamp(26px, calc(3vw + 8px), 40px);
  --bwh-fs-card: clamp(19px, calc(1vw + 15.5px), 22px);
  --bwh-fs-stat: clamp(32px, calc(2vw + 20px), 40px);
}

html {
  /* Anchor jumps clear the compact sticky header. */
  scroll-padding-top: 92px;
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}

/* ==========================================================================
   2. Typography
   ========================================================================== */

/* Cap the measure of running text so lines stay readable (60 to 75 chars).
   Centered display paragraphs get a tighter cap and stay centered. */
/* F36: about, programs and events render no <main>; their content sections
   are direct .wp-site-blocks children. :where() keeps retargeted rules at the
   same effective specificity as the main-scoped originals so cover heading
   rules (.wp-block-cover h2 etc.) still win where they overlap. */
main p:not(.has-text-align-center),
:where(.wp-site-blocks > div.wp-block-group) p:not(.has-text-align-center),
footer p:not(.has-text-align-center) {
  max-width: 68ch;
}

main p.has-text-align-center,
:where(.wp-site-blocks > div.wp-block-group) p.has-text-align-center,
footer p.has-text-align-center,
.wp-block-cover p.has-text-align-center {
  max-width: 36em;
  margin-left: auto;
  margin-right: auto;
}

/* One heading weight and one display color for section headings. Important is
   required because headings carry inline font-weight from the site editor and
   WordPress global styles declare heading colors with !important. Cover
   (hero and CTA) headings keep their approved lighter weight. */
main h1,
main h2,
main h3,
:where(.wp-site-blocks > div.wp-block-group) h1,
:where(.wp-site-blocks > div.wp-block-group) h2,
:where(.wp-site-blocks > div.wp-block-group) h3 {
  font-weight: 700 !important;
}

.wp-block-cover h1 {
  font-weight: 500 !important;
}

/* Cover CTA and banner headings are section titles and follow the section
   weight; only the hero subtitle under a cover H1 keeps the light display
   weight so the subtitle never reads heavier than the title above it. */
.wp-block-cover h2.has-large-font-size {
  font-weight: 500 !important;
}

/* Size-specific tracking and leading (apple-design typography): display text
   tightens as it grows, body stays neutral. */
main h1,
main h2,
main h3,
:where(.wp-site-blocks > div.wp-block-group) h1,
:where(.wp-site-blocks > div.wp-block-group) h2,
:where(.wp-site-blocks > div.wp-block-group) h3 {
  letter-spacing: -0.015em;
}

main h1,
:where(.wp-site-blocks > div.wp-block-group) h1 {
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.wp-block-cover h1,
.wp-block-cover h2 {
  letter-spacing: -0.02em;
  line-height: 1.08;
}

/* The Meet the Founder display heading joins the navy section heading color
   (container class is the block layout id of that card). */
.wp-container-core-group-is-layout-aa2a43b6 h2,
.wp-container-core-group-is-layout-aa2a43b6 h3 {
  color: var(--bwh-navy) !important;
}

/* Events Calendar headings adopt the site type family. */
.tribe-events h1,
.tribe-events h2,
.tribe-events h3,
.tribe-common h1,
.tribe-common h2,
.tribe-common h3 {
  font-family: Nunito, sans-serif;
}

/* The About Us homepage block keeps a deliberate measure inside its wide
   group container. 36em, not ch: Nunito's zero is 0.6em, so a literal
   ch count lands about 15 percent wide (craft floor band 65 to 75ch). */
.wp-container-core-group-is-layout-e0948741 > p,
.wp-container-core-group-is-layout-e0948741 > h2 {
  max-width: 36em;
  margin-left: auto;
  margin-right: auto;
}

/* ==========================================================================
   3. Buttons (findings 17, 32)
   ========================================================================== */

/* Duplicated class name raises specificity to (0,2,0) so these base metrics
   beat both the theme rules (0,1,0) and the global-styles inline sheet that
   prints after every linked stylesheet. Core identity metrics carry
   !important because several buttons store per-block padding in inline
   styles from the site editor. */
.wp-element-button.wp-element-button,
.wp-block-button__link.wp-block-button__link,
.ff-btn-submit.ff-btn-submit {
  font-family: Nunito, sans-serif;
  font-size: 0.9375rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em;
  line-height: 1.2;
  min-height: 48px !important;
  padding: 14px 32px !important;
  border-radius: var(--bwh-radius-btn) !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* Exact properties only; transform gets the fast press curve. */
  transition:
    background-color var(--bwh-fast) var(--bwh-ease),
    color var(--bwh-fast) var(--bwh-ease),
    border-color var(--bwh-fast) var(--bwh-ease),
    box-shadow var(--bwh-fast) var(--bwh-ease),
    transform 140ms var(--bwh-ease);
  will-change: transform;
}

/* Hover only where a real pointer exists (no stuck hover on touch). */
@media (hover: hover) and (pointer: fine) {
  .wp-element-button.wp-element-button:not(.is-style-outline):hover,
  .wp-block-button__link.wp-block-button__link:not(.is-style-outline):hover {
    background-color: var(--bwh-purple-dark);
    transform: translateY(-1px);
    box-shadow: var(--bwh-shadow-btn);
  }

  /* Outline buttons keep their look; hover adds a faint tint of the text
     color instead of filling solid. */
  .wp-element-button.wp-element-button.is-style-outline:hover,
  .wp-block-button__link.wp-block-button__link.is-style-outline:hover {
    background-color: color-mix(in srgb, currentColor 12%, transparent);
    transform: translateY(-1px);
  }

  .ff-btn-submit.ff-btn-submit:hover {
    background-color: var(--bwh-purple-dark) !important;
    border-color: var(--bwh-purple-dark) !important;
    transform: translateY(-1px);
    box-shadow: var(--bwh-shadow-btn);
  }
}

/* Instant press feedback (emil-design-eng: buttons must feel responsive). */
.wp-element-button.wp-element-button:not(.is-style-outline):active,
.wp-block-button__link.wp-block-button__link:not(.is-style-outline):active,
.wp-element-button.wp-element-button.is-style-outline:active,
.wp-block-button__link.wp-block-button__link.is-style-outline:active,
.ff-btn-submit.ff-btn-submit:active {
  background-color: var(--bwh-purple-darker);
  transform: scale(0.97);
  transition-duration: 90ms;
  box-shadow: none;
}

/* Fluent Form submit joins the same system. */
.ff-btn-submit.ff-btn-submit {
  background-color: var(--bwh-purple) !important;
  border-color: var(--bwh-purple) !important;
  color: #ffffff !important;
}

/* ==========================================================================
   4. Header and navigation (findings 21, 32, 34, 24)
   ========================================================================== */

/* Compact, content-aligned header: the header row shares the 1140px column
   with every section below it instead of stretching edge to edge. */
.sticky-wrapper > #sticky-header,
.sticky-wrapper > .wp-block-group {
  max-width: var(--bwh-container);
  margin-left: auto;
  margin-right: auto;
  padding-top: 14px !important;
  padding-bottom: 14px !important;
}

@media (max-width: 767px) {
  .sticky-wrapper > #sticky-header,
  .sticky-wrapper > .wp-block-group {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
  }
}

/* Translucent material header (apple-design materials): content scrolls
   underneath a light frosted layer instead of a solid slab. */
.sticky-wrapper > #sticky-header,
.sticky-wrapper > .wp-block-group {
  background-color: rgba(255, 255, 255, 0.78) !important;
  -webkit-backdrop-filter: blur(18px) saturate(180%);
  backdrop-filter: blur(18px) saturate(180%);
}

@media (prefers-reduced-transparency: reduce) {
  .sticky-wrapper > #sticky-header,
  .sticky-wrapper > .wp-block-group {
    background-color: #ffffff !important;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

/* Logo sized for a compact header. */
.sticky-wrapper img.custom-logo,
.sticky-wrapper .wp-block-site-logo img {
  max-height: 44px;
  width: auto;
}

@media (max-width: 767px) {
  .sticky-wrapper img.custom-logo,
  .sticky-wrapper .wp-block-site-logo img {
    max-height: 38px;
  }
}

/* Navigation: tighter spacing, smaller confident type, consistent case. */
.wp-block-navigation__container,
.wp-block-navigation__responsive-container .wp-block-navigation__container {
  gap: 1.75rem;
}

nav .wp-block-navigation-item__content,
nav .wp-block-navigation-item__content:visited {
  text-transform: capitalize;
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}

/* One hover treatment: brand purple plus an underline that draws in from
   the left on the strong ease-out curve. */
nav a.wp-block-navigation-item__content {
  position: relative;
  padding-top: 10px;
  padding-bottom: 10px;
  transition: color var(--bwh-fast) var(--bwh-ease);
}

nav a.wp-block-navigation-item__content::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 4px;
  height: 2px;
  background: var(--bwh-purple);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--bwh-fast) var(--bwh-ease);
}

nav a.wp-block-navigation-item__content:hover,
nav a.wp-block-navigation-item__content:focus-visible {
  color: var(--bwh-purple);
}

nav a.wp-block-navigation-item__content:hover::after {
  transform: scaleX(1);
}

/* Current page marker. */
nav a.wp-block-navigation-item__content[aria-current="page"] {
  color: var(--bwh-purple);
}

nav a.wp-block-navigation-item__content[aria-current="page"]::after {
  transform: scaleX(1);
}

/* The sticky header gains a soft scroll-edge separation once the page moves
   (no hard divider; shadow lives on the element the sticky library pins). */
.sticky-wrapper,
#sticky-header {
  transition: box-shadow var(--bwh-fast) var(--bwh-ease);
}

.bwh-scrolled {
  box-shadow:
    0 1px 0 rgba(17, 17, 17, 0.05),
    0 12px 32px -16px rgba(17, 17, 17, 0.18);
}

/* Round-4b: the theme pins an off-palette hairline ring on
   `div#sticky-header` (rgba(0,0,0,.05) 0 0 0 1px) which outranks the
   class-based .bwh-scrolled rule above, so the scrolled elevation never   actually rendered. Re-state both states with ID-plus-class selectors:   the resting ring keeps its exact look on the ink token, and the scrolled   state gets the raised token for real. */
div#sticky-header {
  box-shadow: 0 0 0 1px rgba(17, 17, 17, 0.05);
}

div#sticky-header.bwh-scrolled {
  box-shadow: var(--bwh-shadow-raised);
}

/* Header CTA keeps a comfortable tap target on small screens. */
.sticky-wrapper .wp-element-button,
.sticky-wrapper .wp-block-button__link {
  min-height: 44px !important;
  padding-top: 10px !important;
  padding-bottom: 10px !important;
  padding-left: 26px !important;
  padding-right: 26px !important;
}

/* Mobile navigation panel: frosted material, comfortable rows. */
.wp-block-navigation__responsive-container.is-menu-open {
  background-color: rgba(255, 255, 255, 0.92) !important;
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
}

@media (prefers-reduced-transparency: reduce) {
  .wp-block-navigation__responsive-container.is-menu-open {
    background-color: #ffffff !important;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

@media (max-width: 767px) {
  .wp-block-navigation__responsive-container.is-menu-open
    a.wp-block-navigation-item__content {
    min-height: 48px;
    font-size: 1.125rem;
    padding-top: 6px;
    padding-bottom: 6px;
  }

  .wp-block-navigation__responsive-container.is-menu-open
    a.wp-block-navigation-item__content::after {
    bottom: 8px;
  }
}

/* ==========================================================================
   5. Hero and cover contrast
   ========================================================================== */

/* Covers without the theme's dim layer (the homepage hero) get a real scrim
   so white copy and buttons hold contrast over any part of the photo. Two
   gradients: vertical for overall dimming, horizontal because the hero copy
   sits on the left. Applied above the photo, below the content. */
.wp-block-cover:not(.has-background-dim)::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(
      100deg,
      rgba(8, 4, 16, 0.72) 0%,
      rgba(8, 4, 16, 0.5) 42%,
      rgba(8, 4, 16, 0.3) 100%
    ),
    linear-gradient(
      180deg,
      rgba(8, 4, 16, 0.35) 0%,
      rgba(8, 4, 16, 0.18) 45%,
      rgba(8, 4, 16, 0.42) 100%
    );
}

.wp-block-cover > .wp-block-cover__inner-container {
  position: relative;
  z-index: 2;
}

/* Hero display type: larger, tighter, confident. */
.wp-block-cover h1 {
  font-size: clamp(2.5rem, 5vw, 4rem) !important;
  line-height: 1.06 !important;
  text-wrap: balance;
}

.wp-block-cover p {
  text-shadow: 0 1px 2px rgba(8, 4, 16, 0.35);
}

.wp-block-cover h1,
.wp-block-cover h2 {
  text-shadow: 0 2px 8px rgba(8, 4, 16, 0.35);
}

/* ==========================================================================
   6. Section rhythm and containers (findings 10, 11, 12)
   ========================================================================== */

/* Top-level sections converge on one vertical rhythm at every breakpoint.
   Inline padding on these section groups is overridden on purpose so the
   rhythm is defined in exactly one place. The blog and search content rail
   declares its own spacing (40px margin, no vertical padding) and now sits
   under <main> after the landmark pass, so it carries .bwh-own-rhythm and is
   exempt from the shared override. */
@media (min-width: 1024px) {
  main > .wp-block-group[style*="padding"]:not(.bwh-own-rhythm),
  .wp-site-blocks > div.wp-block-group[style*="padding"] {
    padding-top: var(--bwh-space-section) !important;
    padding-bottom: var(--bwh-space-section) !important;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  main > .wp-block-group[style*="padding"]:not(.bwh-own-rhythm),
  .wp-site-blocks > div.wp-block-group[style*="padding"] {
    padding-top: var(--bwh-space-section-tablet) !important;
    padding-bottom: var(--bwh-space-section-tablet) !important;
  }
}

@media (max-width: 767px) {
  main > .wp-block-group[style*="padding"]:not(.bwh-own-rhythm),
  .wp-site-blocks > div.wp-block-group[style*="padding"] {
    padding-top: var(--bwh-space-section-mobile) !important;
    padding-bottom: var(--bwh-space-section-mobile) !important;
  }
}

/* The events archive now renders its content inside the wrapper <main>, and
   WordPress gives every child of a .is-layout-flow container a 1.2rem
   (19.2px) top margin. That block gap did not exist before the landmark pass
   (the archive measured 1388px tall at 1440), and unlike the section groups
   the Events Calendar block carries no inline margin to pin it, so the gap is
   removed here. */
main > .tribe-block {
  margin-block-start: 0;
}

/* Full-bleed cover sections align their content to the same 1140px column as
   the rest of the site. */
.wp-block-cover__inner-container.has-global-padding {
  max-width: var(--bwh-container) !important;
}

/* ==========================================================================
   7. Homepage specific fixes (findings 14, 15) and icon treatment
   ========================================================================== */

/* The founder card content gets breathing room, a deliberate surface
   treatment, and its button row aligns with the left-aligned copy. */
.wp-container-core-group-is-layout-aa2a43b6 {
  padding: clamp(24px, 3.5vw, 44px) !important;
  background: var(--bwh-surface);
  border-radius: 16px;
  box-shadow: var(--bwh-shadow-soft);
}

.wp-container-core-group-is-layout-aa2a43b6 .wp-block-buttons {
  justify-content: flex-start !important;
}

.wp-container-core-group-is-layout-aa2a43b6 p {
  max-width: 62ch;
}

/* Clip-art feature icons (viral-marketing, investment, promotion,
 * connection, eye, purpose, woman) are tinted to one brand purple so the
 * set reads as a deliberate icon system instead of mixed stock art. */
img[src*="viral-marketing"],
img[src*="investment1"],
img[src*="promotion.png"],
img[src*="connection-"],
img[src*="eye-"],
img[src*="purpose-"],
img[src*="woman-"] {
  filter: grayscale(1) sepia(1) hue-rotate(228deg) saturate(3.4) brightness(0.92);
}

/* Editorial photos share one corner treatment wherever they appear. */
main figure img,
main .wp-block-image img,
main .wp-block-post-featured-image img,
:where(.wp-site-blocks > div.wp-block-group) figure img,
:where(.wp-site-blocks > div.wp-block-group) .wp-block-image img,
:where(.wp-site-blocks > div.wp-block-group) .wp-block-post-featured-image img {
  border-radius: var(--bwh-radius-img);
}

/* ==========================================================================
   8. Gallery (finding 28, presentation per section 11 of the brief)
   ========================================================================== */

/* Robo Gallery tiles: one proportion, consistent gap, gentle hover. */
.robo_gallery.rbs-imges-container {
  gap: 20px;
}

.robo_gallery .rbs-img {
  border-radius: var(--bwh-radius-gallery);
  overflow: hidden;
}

.robo_gallery img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--bwh-radius-gallery);
}

@media (hover: hover) and (pointer: fine) {
  .robo_gallery .rbs-img-image {
    transition: transform 250ms var(--bwh-ease);
  }

  .robo_gallery .rbs-img:hover .rbs-img-image {
    transform: scale(1.02);
  }

  .robo_gallery .rbs-img:hover img {
    filter: brightness(1.04);
  }
}

/* ==========================================================================
   9. Events page overflow and typography (findings 23, 9)
   ========================================================================== */

.tribe-events-calendar-latest-past__event,
.tribe-common-g-row {
  box-sizing: border-box;
  max-width: 100%;
}

/* ==========================================================================
   10. Touch targets (finding 24)
   ========================================================================== */

/* Footer and menu text links: bigger hit area without changing the visual
   rhythm (padding compensated by negative margin). */
footer p a,
footer li a,
footer .wp-block-navigation a {
  display: inline-block;
  padding-top: 10px;
  padding-bottom: 10px;
  margin-top: -10px;
  margin-bottom: -10px;
}

footer .wp-block-social-links .wp-social-link a {
  margin: 0;
  padding: 10px;
}

footer .wp-block-social-links .wp-social-link {
  width: 44px;
  height: 44px;
}

/* ==========================================================================
   11. Focus and accessibility (findings 6, 20)
   ========================================================================== */

:where(a, button, input, textarea, select, [tabindex]):focus-visible {
  outline: 2px solid var(--bwh-purple);
  outline-offset: 2px;
  border-radius: 4px;
}

.wp-block-cover :where(a, button):focus-visible,
footer :where(a, button):focus-visible {
  outline-color: #ffffff !important;
}

/* One on-purple text color (finding 20). */
.wp-block-cover,
footer {
  --bwh-on-surface: #ffffff;
}

/* Screen reader text for JS-injected page headings. */
.screen-reader-text {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  word-wrap: normal !important;
}

/* ==========================================================================
   12. Motion (finding 33) with reduced-motion support
   ========================================================================== */

/* Applied by refine.js only when IntersectionObserver is available and the
   user has not asked for reduced motion, so content is never hidden without
   a guaranteed reveal. Strong ease-out: entrances start fast and settle. */
.bwh-reveal-init {
  opacity: 0;
  transform: translateY(var(--bwh-travel));
}

.bwh-reveal-in {
  opacity: 1;
  transform: none;
  transition:
    opacity 450ms var(--bwh-ease),
    transform 450ms var(--bwh-ease);
}

/* ==========================================================================
   13. AOS entrance tuning (finding 35)

   The animations-for-blocks plugin drives 4 elements with data-aos="slide-up"
   at 1950-2000ms over a full-height (100%) slide, which reads as slow and,
   before it settles, slides the Our Story block across the About Us heading
   (up to 60px of overlap on tall viewports). The plugin's rules are not
   !important, so this later sheet wins cleanly:
   same entrance, ~6x faster, a subtle 28px travel that never overlaps, and
   the plugin already disables itself under prefers-reduced-motion (verified).
   ========================================================================== */

[data-aos][data-aos] {
  transition-duration: var(--bwh-dur-reveal) !important;
}

[data-aos="slide-up"] {
  transform: translate3d(0, var(--bwh-travel), 0) !important;
}

[data-aos="slide-up"].aos-animate {
  transform: none !important;
}

@media (prefers-reduced-motion: reduce) {
  [data-aos][data-aos] {
    transition: none !important;
  }

  [data-aos] {
    transform: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .bwh-reveal-init,
  .bwh-reveal-in {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .wp-element-button.wp-element-button:hover,
  .wp-block-button__link.wp-block-button__link:hover,
  .ff-btn-submit.ff-btn-submit:hover,
  .wp-element-button.wp-element-button:active,
  .wp-block-button__link.wp-block-button__link:active,
  .ff-btn-submit.ff-btn-submit:active {
    transform: none;
  }

  .robo_gallery .rbs-img:hover .rbs-img-image {
    transform: none;
  }
}

/* ==========================================================================
   14. Why Join image-led card track (findings 37, 44, 45)
   ========================================================================== */

/* F37: this section's constrained children carry a 1440px max-width from
   WordPress generated layout output while every other homepage section sits
   in the shared 1140px column. Force them back onto the column. The :has()
   anchor matches only the Why Join section, the one block that contains the
   clip-art icons. Browsers without :has() drop the whole selector and keep
   today's width. */
main > .wp-block-group:has(img[src*="viral-marketing"]) > .wp-block-group,
main > .wp-block-group:has(img[src*="viral-marketing"]) > .wp-block-buttons {
  max-width: var(--bwh-container) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* F44: the row was nowrap with three equal cards, which crushed headings
   mid-word at 375px ("Busine ss Growt h"). Recast as a scroll-snap track:
   three-up on desktop (fills the column exactly), two-up on tablet, and one
   card plus a peeking neighbour on phones so the swipe is discoverable. */
.wp-block-group.is-nowrap:has(img[src*="viral-marketing"]) {
  display: flex !important;
  flex-wrap: nowrap;
  gap: 24px !important;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding-bottom: 4px;
}

.wp-block-group.is-nowrap:has(img[src*="viral-marketing"])::-webkit-scrollbar {
  display: none;
}

.wp-block-group.is-nowrap:has(img[src*="viral-marketing"]) > .wp-block-group {
  flex: 0 0 calc((100% - 48px) / 3);
  min-width: 0;
  scroll-snap-align: start;
}

@media (max-width: 1023px) {
  .wp-block-group.is-nowrap:has(img[src*="viral-marketing"]) > .wp-block-group {
    flex-basis: calc((100% - 24px) / 2);
  }
}

@media (max-width: 767px) {
  .wp-block-group.is-nowrap:has(img[src*="viral-marketing"]) > .wp-block-group {
    flex-basis: 84%;
  }
}

/* F45: cards become image-led. refine.js prepends a real photograph
   (.bwh-card-media) and hides the 51px clip-art icon figure; if the script
   never runs, the original cards stay as they are. Card padding moves onto
   the content so the photo bleeds edge to edge under the card radius. */
.wp-block-group.is-nowrap:has(img[src*="viral-marketing"]) > .wp-block-group {
  padding: 0 !important;
  border-color: rgba(17, 17, 17, 0.16) !important;
  border-radius: var(--bwh-radius-md) !important;
  background: var(--bwh-surface);
  display: flex;
  flex-direction: column;
}

.bwh-card-media {
  margin: 0;
  overflow: hidden;
  border-radius: var(--bwh-radius-md) var(--bwh-radius-md) 0 0;
}

.bwh-card-media img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 0 !important;
  transition: transform var(--bwh-dur-base) var(--bwh-ease);
}

.wp-block-group.is-nowrap:has(img[src*="viral-marketing"]) > .wp-block-group > h2 {
  margin: 0;
  padding: 24px 24px 0;
  font-size: var(--bwh-fs-card);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.01em;
  text-align: center;
}

.wp-block-group.is-nowrap:has(img[src*="viral-marketing"]) > .wp-block-group > p {
  margin: 0;
  padding: 12px 24px 0;
  font-size: 16px;
  line-height: 1.6;
  max-width: none;
  text-align: center;
}

.wp-block-group.is-nowrap:has(img[src*="viral-marketing"]) > .wp-block-group > p:last-child {
  margin-top: auto;
  padding-top: 16px;
  padding-bottom: 24px;
}

.wp-block-group.is-nowrap:has(img[src*="viral-marketing"]) > .wp-block-group > p a {
  font-weight: 600;
}

/* Motion language: photo zoom and border tint on pointer devices only,
   never under reduced motion. */
@media (hover: hover) and (pointer: fine) and
  (prefers-reduced-motion: no-preference) {
  .wp-block-group.is-nowrap:has(img[src*="viral-marketing"]) > .wp-block-group:hover {
    border-color: var(--bwh-purple) !important;
  }

  .wp-block-group.is-nowrap:has(img[src*="viral-marketing"]) > .wp-block-group:hover .bwh-card-media img {
    transform: scale(1.04);
  }
}

@media (max-width: 767px) {
  .wp-block-group.is-nowrap:has(img[src*="viral-marketing"]) > .wp-block-group > h2 {
    font-size: var(--bwh-fs-card);
    padding-top: 20px;
  }

  .wp-block-group.is-nowrap:has(img[src*="viral-marketing"]) > .wp-block-group > p {
    font-size: 15px;
    padding-left: 20px;
    padding-right: 20px;
  }
}

/* ==========================================================================
   15. Homepage About Us image-led split (user request)
   ========================================================================== */

/* The block renders a centered heading and paragraph under a 137px spacer,
   floating in dead space (screenshot 4 of the brief). refine.js wraps the
   copy in .bwh-about-copy, marks the group with .bwh-about-split and
   appends a photo from the media library; this rule turns it into a
   two-column split: copy left-aligned on the column, image opposite.
   Without JS the block stays exactly as it is today. */
.bwh-about-split {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(28px, 4vw, 64px);
  align-items: center;
  /* The original 137px spacer is hidden below; this restores a measured
     gap to the Story / Mission / Vision columns above (was 0px on mobile). */
  margin-top: clamp(48px, 5vw, 72px) !important;
  /* Round-4: the block also carries an inline 60px tail stacked on top of
     the two section paddings it already sits between - a 172px hole on
     phones where every other boundary measures 112 (56 + 56). Rhythm
     alone defines the gap now. */
  margin-bottom: 0 !important;
}

/* Copy column: normal flow so any number of paragraphs stack cleanly. */
.bwh-about-copy {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

.bwh-about-copy > .wp-block-spacer {
  display: none;
}

.bwh-about-copy > h2 {
  text-align: left !important;
  max-width: none !important;
  margin: 0 !important;
}

.bwh-about-copy > p {
  text-align: left !important;
  max-width: 36em !important;
  margin: 0 !important;
  line-height: 1.7;
}

.bwh-about-split > figure.bwh-about-media {
  margin: 0;
}

.bwh-about-split figure.bwh-about-media img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--bwh-radius-md);
}

@media (max-width: 767px) {
  .bwh-about-split {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
  }
}

/* ==========================================================================
   16. Story / Mission / Vision numbered progression
   ========================================================================== */

/* The homepage "Our Story / Our Mission / Our Vision" column gets a shared
   numbered progression (01, 02, 03) and a hairline rule so the three blocks
   read as one system instead of three stacked cards. The selector targets
   the unique layout container of that grid (verified unique on the site). */
.wp-container-core-group-is-layout-916c7fde {
  counter-reset: bwh-item;
}

.wp-container-core-group-is-layout-916c7fde > .wp-block-group {
  counter-increment: bwh-item;
  border-top: 1px solid var(--bwh-line);
  padding-top: 24px;
}

.wp-container-core-group-is-layout-916c7fde > .wp-block-group::before {
  content: "0" counter(bwh-item);
  display: block;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--bwh-purple);
  margin-bottom: 10px;
}

/* Round-4 polish of the section the client knows best: sub-headings step
   up to the display scale with tight tracking (the preset class measures
   21.008px at 1440 - fluid, so it gets a fluid override), numerals gain
   a touch more presence, and body copy opens to the same 1.7 leading as
   the About split beside it. Phones pin to a single column so the numbered
   progression always stacks regardless of how the layout id regenerates. */
.wp-container-core-group-is-layout-916c7fde > .wp-block-group > h2.wp-block-heading {
  font-size: var(--bwh-fs-card) !important;
  line-height: 1.25 !important;
  letter-spacing: -0.015em;
}

.wp-container-core-group-is-layout-916c7fde > .wp-block-group::before {
  font-size: 14px;
  margin-bottom: 12px;
}

.wp-container-core-group-is-layout-916c7fde p {
  line-height: 1.7;
}

@media (max-width: 767px) {
  .wp-container-core-group-is-layout-916c7fde {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

/* ==========================================================================
   17. WOW + animate.css convergence (finding 42)
   ========================================================================== */

/* Two motion systems ran in parallel: AOS (tuned to the tokens in section
   13) and WOW/animate.css at 1s ease with travel equal to the full element
   height, plus a 1s delay on the programs hero. Bind both animate.css
   naming schemes (v3 .animated.fadeInUp, v4 .animate__*) to one reveal:
   the shared duration, easing and 16px travel, with no animation ever
   delaying access to content. */
.animated,
.animate__animated {
  animation-duration: var(--bwh-dur-reveal) !important;
  animation-timing-function: var(--bwh-ease) !important;
  animation-delay: 0ms !important;
}

.animated.fadeInUp,
.animate__animated.animate__fadeInUp {
  animation-name: bwh-fade-up !important;
}

.animated.zoomIn,
.animate__animated.animate__zoomIn {
  animation-name: bwh-zoom-soft !important;
}

@keyframes bwh-fade-up {
  from {
    opacity: 0;
    transform: translate3d(0, var(--bwh-travel), 0);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes bwh-zoom-soft {
  from {
    opacity: 0;
    transform: scale(0.96);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* WOW hides managed elements until they scroll into view; under reduced
   motion everything is shown immediately and nothing animates. */
@media (prefers-reduced-motion: reduce) {
  .animated,
  .animate__animated,
  [class*="animate__"] {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    visibility: visible !important;
  }

  /* The name-bound pairs above outrank the shorthand on specificity, so
     bind them off explicitly: computed animation-name becomes none. */
  .animated.fadeInUp,
  .animated.zoomIn,
  .animate__animated.animate__fadeInUp,
  .animate__animated.animate__zoomIn {
    animation-name: none !important;
  }
}

/* ==========================================================================
   18. Radius and color stragglers (findings 38, 40)
   ========================================================================== */

/* Radius: every remaining value outside the scale, mapped to its nearest
   token. Fluent Forms inputs (7px), blog more-link (6px), cover images
   with an inline 10px radius, and photographs carrying inline radii. */
.ff-el-form-control {
  border-radius: var(--bwh-radius-sm) !important;
}

.wp-block-post-excerpt__more-link {
  /* Round-4: audit2 still measured 6px - the theme rule outranks this
     one, so raise the declaration. */
  border-radius: var(--bwh-radius-sm) !important;
}

.wp-block-cover[style*="border-radius"] {
  border-radius: var(--bwh-radius-lg) !important;
}

img[style*="border-radius"] {
  border-radius: var(--bwh-radius-img) !important;
}

/* Color: off-palette text mapped to tokens. Tribe notice copy
   (rgb(20,24,39) -> ink), the featured badge blue (rgb(51,74,255) ->
   purple), search field text (rgb(0,0,0) -> ink), and button text at
   #fcfcfc / #f9f9f9 pulled to the pure white token. The tribe rule targets
   only classless content divs so notice icon color coding is untouched. */
.tribe-events-c-messages__message div:not([class]) {
  color: var(--bwh-ink);
}

[class*="featured-text"] {
  color: var(--bwh-purple) !important;
}

.wp-block-search__input {
  color: var(--bwh-ink) !important;
}

.wp-block-button__link.has-base-color,
.wp-element-button.has-base-color {
  color: var(--bwh-on-dark) !important;
}

/* ==========================================================================
   19. Touch targets part two (finding 43)
   ========================================================================== */

/* Navigation links measured 43x38 and 51x38 on phones; the guideline is
   44px in both axes. Center the label inside a 44px box, border-box so the
   existing vertical padding is absorbed rather than added to. */
nav a.wp-block-navigation-item__content {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  min-width: 44px;
}

/* Inline body links (Learn More in the cards, the selar.co link in the
   founder card) measured 81x22 and 164x22. Grow the hit area to 44px tall
   without shifting the line box, same technique as the footer links. */
main p a:not(.wp-element-button):not(.wp-block-button__link),
:where(.wp-site-blocks > div.wp-block-group)
  p
  a:not(.wp-element-button):not(.wp-block-button__link) {
  display: inline-block;
  padding-top: 11px;
  padding-bottom: 11px;
  margin-top: -11px;
  margin-bottom: -11px;
}

/* The skip link measures 1x1 while hidden, which is correct, but it must
   appear as a real, tappable target when focused. */
.skip-link:focus,
.skip-link:focus-visible {
  position: fixed !important;
  top: 12px;
  left: 12px;
  z-index: 100000;
  width: auto;
  height: auto;
  clip: auto !important;
  clip-path: none !important;
  padding: 12px 20px;
  margin: 0;
  background: var(--bwh-surface);
  color: var(--bwh-purple);
  border-radius: var(--bwh-radius-sm);
  box-shadow: var(--bwh-shadow-float);
  font-weight: 700;
  text-decoration: none;
}

/* ==========================================================================
   20. Events and contact token alignment (round-3 audit)
   ========================================================================== */

/* The Events Calendar paints its accent as #334aff (46 SVG parts, the
   featured date line and the view-selector button) through its own custom
   properties. Re-point them at the brand tokens so every Tribe surface
   repaints from one place. Doubled classes out-specify Tribe's own
   .tribe-events definitions regardless of stylesheet order. */
.tribe-events.tribe-events,
.tribe-common.tribe-common {
  --tec-color-accent-primary: var(--bwh-purple);
  --tec-color-accent-primary-hover: var(--bwh-purple-dark);
  --tec-color-text-primary: var(--bwh-ink);
  --tec-color-link-primary: var(--bwh-ink);
}

/* Direct patches for the parts that hardcode the blue instead of reading the
   variable: the featured date rail and the view-selector icon button. */
.tribe-events-calendar-latest-past__event-date-tag-datetime::after,
.tribe-events-c-view-selector__button::before {
  background: var(--bwh-purple) !important;
}

/* Single-event template: the subscribe dropdown and the Google Maps link
   hardcode #334aff and sit partly outside the .tribe-events scope, so the
   variable re-point above never reaches them. The blue lives on the button
   wrapper and flows into the icons through currentColor, so the wrapper,
   the label and the icon geometry all get pinned. SVG presentation
   attributes lose to any CSS rule, so these win the cascade. */
.tribe-events-gmap,
.tribe-events-c-subscribe-dropdown__button,
.tribe-events-c-subscribe-dropdown__button svg,
.tribe-events-c-subscribe-dropdown__button path,
.tribe-events-c-subscribe-dropdown__button-text,
.tribe-events-c-subscribe-dropdown__button-text svg,
.tribe-events-c-subscribe-dropdown__button-text path,
.tribe-events-gmap svg,
.tribe-events-gmap path {
  color: var(--bwh-purple) !important;
  fill: var(--bwh-purple) !important;
  stroke: var(--bwh-purple) !important;
}

/* Off-token 4px corners map onto the sm step of the radius scale. */
.tribe-events-c-messages__message,
.tribe-events-c-view-selector__list-item-link,
.tribe-events-c-view-selector__content,
.tribe-common-c-btn-border-small,
[class*="tribe-events-c-subscribe-dropdown"] {
  border-radius: var(--bwh-radius-sm) !important;
}

/* The empty-state notice read as default plugin gray; give it a quiet
   brand tint and token text instead. */
.tribe-events-c-messages__message--notice {
  background: rgba(127, 31, 166, 0.06) !important;
  color: var(--bwh-ink) !important;
  font-size: 15px !important;
  padding: 16px 20px !important;
}

/* Event card copy measured 14px throughout (finding: "texts too compacted").
   Lift the meta line to the supporting step, the description to body, open
   the vertical gaps, and keep the title where it is. */
.tribe-events-calendar-latest-past__event-datetime-wrapper,
.tribe-events-calendar-latest-past__event-datetime-wrapper * {
  font-size: 15px !important;
}

.tribe-events-calendar-latest-past__event-datetime-wrapper {
  margin-bottom: 20px !important;
}

.tribe-events-calendar-latest-past__event-title {
  margin-bottom: 16px !important;
}

.tribe-events-calendar-latest-past__event-venue,
.tribe-events-calendar-latest-past__event-venue * {
  font-size: 15px !important;
  line-height: 1.6 !important;
}

.tribe-events-calendar-latest-past__event-venue {
  margin-bottom: 20px !important;
}

.tribe-events-calendar-latest-past__event-description,
.tribe-events-calendar-latest-past__event-description p {
  font-size: 16px !important;
  line-height: 1.7 !important;
}

.tribe-events-calendar-latest-past__event-description {
  margin-top: 24px !important;
  color: var(--bwh-ink) !important;
}

/* Tribe's container runs a 160px bottom tail that no other page has; join
   the shared 96 / 72 / 56 rhythm. Horizontal metrics stay untouched (its
   content already lands on the 1140 column). The single-event template is a
   separate container (40/20 padding, 1048px) - it joins the rhythm and the
   shared column as well. */
@media (min-width: 1024px) {
  .tribe-events-l-container,
  .tribe-events-pg-template {
    padding-top: var(--bwh-space-section) !important;
    padding-bottom: var(--bwh-space-section) !important;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .tribe-events-l-container,
  .tribe-events-pg-template {
    padding-top: var(--bwh-space-section-tablet) !important;
    padding-bottom: var(--bwh-space-section-tablet) !important;
  }
}

@media (max-width: 767px) {
  .tribe-events-l-container,
  .tribe-events-pg-template {
    padding-top: var(--bwh-space-section-mobile) !important;
    padding-bottom: var(--bwh-space-section-mobile) !important;
  }
}

/* The single-event template caps at 1048px, leaving its content a full
   half-column narrower than every other page. Grow it to the shared 1140
   column (plus its own 20px side padding). */
.tribe-events-pg-template {
  max-width: calc(var(--bwh-container) + 40px) !important;
}

/* Contact: the editor highlight "Contact Us" carries inline #01a4ef, the one
   remaining off-palette text color on the page (F40). Any inline-colored
   mark becomes brand purple. */
main mark.has-inline-color,
:where(.wp-site-blocks > div.wp-block-group) mark.has-inline-color {
  color: var(--bwh-purple) !important;
}

/* Gutenify sections store their padding in the block class, not an inline
   style, so the section-rhythm rule in section 6 never matched them.
   Bring both contact sections onto the shared rhythm. */
@media (min-width: 1024px) {
  .wp-site-blocks [class*="gutenify-section-"] {
    padding-top: var(--bwh-space-section) !important;
    padding-bottom: var(--bwh-space-section) !important;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .wp-site-blocks [class*="gutenify-section-"] {
    padding-top: var(--bwh-space-section-tablet) !important;
    padding-bottom: var(--bwh-space-section-tablet) !important;
  }
}

@media (max-width: 767px) {
  .wp-site-blocks [class*="gutenify-section-"] {
    padding-top: var(--bwh-space-section-mobile) !important;
    padding-bottom: var(--bwh-space-section-mobile) !important;
  }
}

/* Fluent form controls: typed text, placeholders and borders join the
   ink / muted / line tokens. The single-class rule lost the cascade to
   Fluent's own stylesheet (verified: computed stayed rgb(96, 98, 102)), so
   raise specificity the same way the button rules do and pin the values. */
.ff-el-form-control.ff-el-form-control {
  color: var(--bwh-ink) !important;
  border-color: var(--bwh-line) !important;
}

.ff-el-form-control.ff-el-form-control::placeholder {
  color: var(--bwh-muted) !important;
}

/* ==========================================================================
   21. Why Join track scroll affordance and keyboard access
   ========================================================================== */

/* refine.js marks the track .bwh-why-track and toggles the state classes
   from scroll position. Each state fades only the edge that still has
   content behind it, so the hint appears exactly where more cards live and
   disappears at the ends. Masks are visual only; scrolling is untouched. */
.bwh-why-track.has-scroll-right {
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 56px), transparent);
  mask-image: linear-gradient(to right, #000 calc(100% - 56px), transparent);
}

.bwh-why-track.has-scroll-left {
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 56px);
  mask-image: linear-gradient(to right, transparent 0, #000 56px);
}

.bwh-why-track.has-scroll-left.has-scroll-right {
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0,
    #000 56px,
    #000 calc(100% - 56px),
    transparent 100%
  );
  mask-image: linear-gradient(
    to right,
    transparent 0,
    #000 56px,
    #000 calc(100% - 56px),
    transparent 100%
  );
}

/* The track only becomes focusable when it actually scrolls (refine.js adds
   and removes tabindex), so keyboard focus always lands on something that
   responds. Give that focus state a clear brand ring on the whole rail. */
.bwh-why-track:focus-visible {
  outline: 2px solid var(--bwh-purple) !important;
  outline-offset: 6px;
  border-radius: var(--bwh-radius-md);
}

/* ==========================================================================
   22. Cover dim layers onto the palette (round-4)
   ========================================================================== */

/* The hero's dim layer is an inline #002b59, the About page's photo wash
   is a slate rgb(82,86,101), and the Programs hero dims with orange
   #ff820d - three off-palette colors painting the three most visible
   overlays on the site (verified across all eight pages). Re-point each at
   the token it stands for: the slate and the hero navy land on --bwh-navy;
   the orange dim-90 is the only dim-90 without a palette class, so the
   :not() pair below reaches exactly it and lands it on purple (white copy
   on purple holds contrast; white on #ff820d did not). Layers at dim-0
   have opacity 0, so clearing their stray colors changes nothing visually
   but leaves the palette audit clean. */
.wp-block-cover__background.has-background-dim-20,
.wp-block-cover__background.has-accent-background-color {
  background-color: var(--bwh-navy) !important;
}

.wp-block-cover__background.has-background-dim-90:not(
    .has-primary-background-color
  ):not(.has-accent-background-color) {
  background-color: var(--bwh-purple) !important;
}

.wp-block-cover__background.has-background-dim-0 {
  background-color: transparent !important;
}

/* ==========================================================================
   23. About value cards: identity hues, calm surface (round-4)
   ========================================================================== */

/* The four "what we stand for" cards paint full-bleed green / gold /
   magenta / orange (#2cac61, #c2b100, #d93dd2, #ff820d inline), which
   clashes with the purple-navy system and buries the copy. refine.js reads
   each card's painted hue and publishes it as custom properties; the card
   then keeps coding its value by color - as a 10% tint of its own hue with
   a 35% tint border - while the icon badge keeps the full-strength hue as
   the accent. Without JS the cards stay exactly as they are today. */
.bwh-value-card {
  background: var(--bwh-vc-surface) !important;
  border-color: var(--bwh-vc-line) !important;
  color: var(--bwh-ink);
}

.bwh-value-card h3,
.bwh-value-card p {
  color: var(--bwh-ink);
}

/* ==========================================================================
   24. Fluent conversational form token alignment (round-4)
   ========================================================================== */

/* The getting-started wizard hardcodes #0445af everywhere: typed text,
   borders, the 1px underline shadow, the nav segment and both halves of
   the progress bar. Inputs get the same boxed treatment as every other
   form on the site (line border, sm radius, ink text, 44px floor); the nav
   segment becomes brand purple (its labels are already white); progress
   track and fill join the purple ramp. */
.ffc_question .f-answer input:not([type="checkbox"]):not([type="radio"]),
.ffc_question .f-answer textarea,
.ffc_question .f-answer select {
  color: var(--bwh-ink) !important;
  background-color: var(--bwh-surface) !important;
  border: 1px solid var(--bwh-line) !important;
  box-shadow: none !important;
  border-radius: var(--bwh-radius-sm) !important;
  box-sizing: border-box;
  min-height: 44px;
  padding: 10px 14px;
}

.ffc_question .f-answer input:focus,
.ffc_question .f-answer textarea:focus,
.ffc_question .f-answer select:focus {
  border-color: var(--bwh-purple) !important;
}

.vff-footer .f-nav {
  background: var(--bwh-purple) !important;
  border-radius: 0 var(--bwh-radius-sm) var(--bwh-radius-sm) 0 !important;
  padding: 8px !important;
}

.vff-footer .footer-inner-wrap {
  align-items: center;
  border-radius: var(--bwh-radius-sm) !important;
  box-shadow: var(--bwh-shadow-raised) !important;
}

.vff-footer .f-progress-bar {
  background: rgba(127, 31, 166, 0.25) !important;
  border-radius: var(--bwh-radius-pill) !important;
}

.vff-footer .f-progress-bar-inner {
  background: var(--bwh-purple) !important;
}

/* Prev / Next / Powered-by measured 23x20 - give them a real 44px target
   inside the nav segment (the segment grows with them). */
.vff-footer .f-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 14px;
}

/* Round-4b: the form's supporting text sits at rgb(25,25,25) and
   rgba(25,25,25,0.7) - off-token near-blacks. Copy goes to ink, tagline   and help text to the muted token. The ID scope keeps this inside the   Fluent widget. */
#ffc_app_instance_1 span,
#ffc_app_instance_1 b,
#ffc_app_instance_1 strong {
  color: var(--bwh-ink) !important;
}

#ffc_app_instance_1 .f-tagline,
#ffc_app_instance_1 .f-help {
  color: var(--bwh-muted) !important;
}

/* ==========================================================================
   25. Radius and shadow stragglers, round-4 (audit2)
   ========================================================================== */

/* Blog cards measured 10px and the search shell 14px - one step off the
   scale; the gallery's image tiles carry a heavy rgba(34,25,25,.4) drop
   shadow and its load-more button a raw pair; the gutenify columns ship
   rgba(0,0,0,.2) 6px 6px 9px. Every value maps onto the radius and
   shadow tokens. */
.wp-block-group.post-block {
  border-radius: var(--bwh-radius-md) !important;
}

.wp-block-search__inside-wrapper {
  border-radius: var(--bwh-radius-md) !important;
}

.rbs-img-container,
.rbs-imges-load-more,
.wp-block-column.column-has-radius.has-base-2-background-color {
  box-shadow: var(--bwh-shadow-raised) !important;
}

/* Round-4b residuals found by the 40-run matrix: */
/* The theme's product-card shadow (rgba(100,100,111,.2) 0 7px 29px)
   sits outside the shadow scale. */
.products-block-post-template li {
  box-shadow: var(--bwh-shadow-raised) !important;
}

/* Button labels carry an inline/class #fcfcfc instead of the pure-white
   token (60 hits across the matrix, including the search icon which
   inherits color). Same white, token value. */
.wp-block-button__link,
.wp-element-button {
  color: var(--bwh-on-dark) !important;
}

/* The Programs subtitle is inline #000000; ink is the system black. It   lives outside the main landmark on that page's template, so the   selector is deliberately unscoped beyond the paragraph itself. */
p.has-text-color[style*="color:#000000"],
p.has-text-color[style*="color: #000000"] {
  color: var(--bwh-ink) !important;
}

/* Blog's sidebar cards and the search input carry an editor-set inline
   10px - one step off the scale, mapped to md to match the post cards   beside them. The cover and img rules in section 18 keep precedence for   their own elements (higher specificity, also !important). */
[style*="border-radius:10px"],
[style*="border-radius: 10px"] {
  border-radius: var(--bwh-radius-md) !important;
}

/* ==========================================================================
   26. Tribe text color #141827 onto the ink token (audit2)
   ========================================================================== */

/* The Events Calendar resolves forty custom properties at :root to
   #141827 (rgb(20,24,39)) - a near-black outside the system that the
   audit flags on every Tribe surface. html:root out-specifies Tribe's
   :root declarations regardless of stylesheet order; alpha variants keep
   their exact opacity with the ink value. Form / outline actives are
   focus states and go purple, matching the site-wide focus ring. */
html:root {
  /* Solid ink. */
  --tec-color-accent-secondary: var(--bwh-ink);
  --tec-color-day-marker-current-month: var(--bwh-ink);
  --tec-color-day-marker-past-month: var(--bwh-ink);
  --tec-color-day-marker-past-month-active: var(--bwh-ink);
  --tec-color-day-marker-past-month-hover: var(--bwh-ink);
  --tec-color-day-marker-month: var(--bwh-ink);
  --tec-color-event-icon: var(--bwh-ink);
  --tec-color-icon-active: var(--bwh-ink);
  --tec-color-icon-events-bar-active: var(--bwh-ink);
  --tec-color-link-primary: var(--bwh-ink);
  --tec-color-text-primary: var(--bwh-ink);
  --tec-color-text-event-date: var(--bwh-ink);
  --tec-color-text-event-title: var(--bwh-ink);
  --tec-color-text-event-title-list: var(--bwh-ink);
  --tec-color-text-events-bar-input: var(--bwh-ink);
  --tec-color-text-events-title: var(--bwh-ink);
  --tec-color-text-events-title-day: var(--bwh-ink);
  --tec-color-text-events-title-latest-past: var(--bwh-ink);
  --tec-color-text-events-title-month-multiday: var(--bwh-ink);
  --tec-color-text-events-title-widget-list: var(--bwh-ink);
  --tec-color-text-view-selector-list-item: var(--bwh-ink);
  --tec-color-category-text: var(--bwh-ink);
  --tec-color-button-secondary: var(--bwh-ink);
  --tec-color-border-active: var(--bwh-ink);
  --tec-color-border-active-month-grid-hover: var(--bwh-ink);
  --tec-outline-color-default: var(--bwh-ink);

  /* Alpha variants: same opacity, ink value. */
  --tec-color-text-primary-light: #1111119e;
  --tec-color-button-secondary-hover: #111111cc;
  --tec-color-button-secondary-active: #111111e6;
  --tec-color-accent-secondary-hover: #111111cc;
  --tec-color-accent-secondary-active: #111111e6;
  --tec-color-text-view-selector-list-item-hover: #111111cc;
  --tec-color-button-secondary-background: #11111112;
  --tec-color-accent-secondary-background: #11111112;
  --tec-color-background-messages: #11111112;
  --tec-color-background-secondary-multiday: #1111113d;
  --tec-color-background-secondary-multiday-hover: #11111157;

  /* Focus states go purple, matching the site-wide ring. */
  --tec-outline-active-default: 2px solid var(--bwh-purple);
  --tec-form-color-border-active: var(--bwh-purple);
  --tec-form-color-border-default: var(--bwh-line);
}

/* ==========================================================================
   27. Touch targets part three (audit2)
   ========================================================================== */

/* Events toolbar: view-selector button 29-39px, prev/next carets 24px,
   Today 31px tall, datepicker 40px - all grow to the 44px guideline,
   border-box so existing padding is absorbed rather than added. */
.tribe-events-c-view-selector__button,
.tribe-events-c-top-bar__nav-link--prev,
.tribe-events-c-top-bar__nav-link--next,
.tribe-events-c-top-bar__today-button,
.tribe-events-c-top-bar__datepicker-button {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
}

.tribe-events-c-view-selector__list-item-link {
  display: flex;
  align-items: center;
  min-height: 44px;
}/* Event title links measured 23px tall on phones; pad the line box with
   a compensating negative margin so nothing around them moves. The gap   below the title (16px from section 20) comfortably absorbs the   extension, so the hit area never overlaps a neighbour. Tribe's own   anchor reset ties on specificity and loads late, so these declarations   are pinned. */
.tribe-events-calendar-latest-past__event-title-link,
.tribe-events-calendar-list__event-title-link {
  display: inline-block;
  padding-top: 11px !important;
  padding-bottom: 11px !important;
  margin-top: -11px !important;
  margin-bottom: -11px !important;
}

/* Single event: back link 17px tall, subscribe button-text 16px. The
   subscribe wrapper loses its vertical padding so the grown button keeps
   the pill at exactly 44px instead of inflating past it. */
.tribe-events-back a {
  display: inline-block;
  padding-top: 14px;
  padding-bottom: 14px;
  margin-top: -14px;
  margin-bottom: -14px;
}

.tribe-events-c-subscribe-dropdown__button {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.tribe-events-c-subscribe-dropdown__button-text {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

/* Comment form on the event page: inputs 19-22px tall, checkbox 13px.
   Boxed onto the line/radius tokens like every other form; the checkbox
   grows to 20px and takes the purple accent (its label is a full-size
   target already). */
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
  box-sizing: border-box;
  padding: 10px 14px;
  border: 1px solid var(--bwh-line) !important;
  border-radius: var(--bwh-radius-sm) !important;
}

.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"] {
  min-height: 44px;
}

.comment-form input[type="checkbox"] {
  width: 20px;
  height: 20px;
  accent-color: var(--bwh-purple);
}

/* Header on phones: logo 38px tall, hamburger 24px. */
#sticky-header .custom-logo-link {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

.wp-block-navigation__responsive-container-open,
.wp-block-navigation__responsive-container-close {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
}

/* Blog page title link measured 29x23 - same pad-and-compensate trick. */
.wp-block-post-title a {
  display: inline-block;
  padding-top: 11px;
  padding-bottom: 11px;
  margin-top: -11px;
  margin-bottom: -11px;
}

/* The founder bio's inline selar.co link keeps measuring 164x22 because   it lives in a paragraph the section-19 selectors do not reach - give it   the same pad-and-compensate treatment directly. */
a[href*="selar.co"] {
  display: inline-block;
  padding-top: 11px;
  padding-bottom: 11px;
  margin-top: -11px;
  margin-bottom: -11px;
}

/* ==========================================================================
   28. Mobile rhythm: split tail, cover heights, why-join peek (round-4)
   ========================================================================== */

/* Cover heights on phones: the Story photo runs 500px, the Programs band
   652px and the parallax CTA a full 1068px - over a screen and a half of
   background before a word is read. Cap everything except the hero (which
   opens the page full-bleed by design); the cap is a min-height floor, so   any cover whose content needs more still grows past it. The hero is a
   direct child of the main landmark without .has-parallax; the parallax   cover is matched explicitly because it shares that direct-child shape. */
@media (max-width: 767px) {
  main .wp-block-cover:not(#wp--skip-link--target > .wp-block-cover),
  main .wp-block-cover.has-parallax {
    min-height: 440px !important;
  }
}

/* The mobile peek was 30px of next card sitting entirely inside the 56px
   edge fade - a white sliver that read as a rendering bug. Give each card
   76% of the rail (~56px of peek at 375) and shorten the right fade to   32px so a solid slice of the neighbour card stays visible past the   gradient. Left fade is untouched. */
@media (max-width: 767px) {
  .wp-block-group.is-nowrap:has(img[src*="viral-marketing"]) > .wp-block-group {
    flex-basis: 76%;
  }

  .bwh-why-track.has-scroll-right {
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent);
    mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent);
  }

  .bwh-why-track.has-scroll-left.has-scroll-right {
    -webkit-mask-image: linear-gradient(
      to right,
      transparent 0,
      #000 56px,
      #000 calc(100% - 32px),
      transparent 100%
    );
    mask-image: linear-gradient(
      to right,
      transparent 0,
      #000 56px,
      #000 calc(100% - 32px),
      transparent 100%
    );
  }
}

/* ==========================================================================
   29. Purple uniformity: WP default leftovers onto brand tokens (round-5)
   ========================================================================== */

/* Round-5 purple audit verdict: only #7f1fa6 paints as purple anywhere on
   the live site (353 computed hits across all 8 pages; the magenta
   value-card badge and the social platform icons are deliberate identity
   colors; the 6/10/25/35% tinted surfaces are the same hue lightened on
   purpose). The brighter purples in the system are dormant WordPress
   defaults: vivid-purple #9b51e0, the vivid-cyan-blue-to-vivid-purple
   gradient (rgb(155,81,224)), plus core's purple-crush and nightshade
   gradients. None of them paint today (gradient count across pages: 0), but
   they stay selectable in the editor, so a future block could reintroduce
   an off-brand shade. Snap every dormant definition onto the brand ramp.
   :root:root outranks the inline global-styles :root by specificity, so
   declaration order stops mattering. */
:root:root {
  --wp--preset--color--vivid-purple: var(--bwh-purple);
  --wp--preset--color--accent-4: var(--bwh-navy);
  --wp--preset--color--link-color: var(--bwh-on-dark);
  --wp--preset--gradient--vivid-cyan-blue-to-vivid-purple:
    linear-gradient(135deg, var(--bwh-purple), var(--bwh-navy));
}

.has-purple-crush-gradient-background,
.has-nightshade-gradient-background {
  background: linear-gradient(135deg, var(--bwh-purple), var(--bwh-navy)) !important;
}

/* ==========================================================================
   30. Transition hygiene: the theme's transition:all replaced (round-5)
   ========================================================================== */

/* The gutentools news-ticker stylesheet loads AFTER this sheet and sets
   `a { transition: all 0.5s ease-in-out }`, so every link on the site
   animated every property for half a second: focus rings swept from ink to
   purple through muddy intermediate shades (probed rgb(85,26,108) at 320ms),
   and hover color changes lagged far past the 240ms motion scale.
   `html a` outranks the bare `a` (0,0,2 beats 0,0,1) no matter which sheet
   loads last, and the explicit property list keeps `all` from dragging
   layout properties into view transitions. Buttons and nav links keep
   their own section-3/section-4 declarations (higher specificity). */
html a,
a.wp-block-post-excerpt__more-link {
  transition-property:
    color, background-color, border-color, box-shadow, transform, opacity,
    text-decoration-color, outline-color;
  transition-duration: var(--bwh-fast);
  transition-timing-function: var(--bwh-ease);
}

/* ==========================================================================
   31. Micro animations: batch stagger, underline sweeps, card press (round-5)
   ========================================================================== */

/* (a) Staggered reveals: refine.js assigns a 60ms step per element that
   enters in the same observer batch (capped at four), so sibling headings,
   story blocks and figures cascade instead of popping in together. The
   delay clears right after the reveal, so it never delays later
   transitions. Decorative only per review-animations STANDARDS. */

/* (b) WOW columns (About value cards and any .wow grid row) cascade by
   position. Specificity (0,3,0) plus !important beats the section-17
   animation-delay floor of 0ms; reduced motion skips WOW entirely (17). */
@media (prefers-reduced-motion: no-preference) {
  .wp-block-column.wow:nth-child(2) {
    animation-delay: 70ms !important;
  }

  .wp-block-column.wow:nth-child(3) {
    animation-delay: 140ms !important;
  }

  .wp-block-column.wow:nth-child(4) {
    animation-delay: 210ms !important;
  }
}

/* (c) Link underline sweep: prose, post-title and footer text links grow a
   underline on hover by animating text-decoration-color only, so the
   padding-based touch-target tricks and line boxes never move. Color-only
   motion stays allowed under reduced motion. In forced-colors mode the
   decoration is forced visible, which is a free accessibility win. */
main p a:not(.wp-element-button):not(.wp-block-button__link),
:where(.wp-site-blocks > div.wp-block-group)
  p
  a:not(.wp-element-button):not(.wp-block-button__link),
main .wp-block-post-title a,
footer
  :where(a):not(.wp-social-link-anchor):not(.wp-element-button):not(.wp-block-button__link) {
  text-decoration-line: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
  transition:
    text-decoration-color var(--bwh-dur-base) var(--bwh-ease),
    color var(--bwh-fast) var(--bwh-ease);
}

@media (hover: hover) and (pointer: fine) {
  main p a:not(.wp-element-button):not(.wp-block-button__link):hover,
  :where(.wp-site-blocks > div.wp-block-group)
    p
    a:not(.wp-element-button):not(.wp-block-button__link):hover,
  main .wp-block-post-title a:hover,
  footer
    :where(a):not(.wp-social-link-anchor):not(.wp-element-button):not(.wp-block-button__link):hover {
    text-decoration-color: currentColor;
  }
}

/* (d) Gallery tile press feedback: the image zooms on hover (section 8),
   the tile itself now lifts and compresses on press, gated to real pointers
   and to no-preference motion per the accessibility rules in STANDARDS. */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .robo_gallery .rbs-img {
    transition:
      transform var(--bwh-dur-base) var(--bwh-ease),
      box-shadow var(--bwh-dur-base) var(--bwh-ease);
  }

  .robo_gallery .rbs-img:hover {
    transform: translateY(-3px);
  }

  .robo_gallery .rbs-img:active {
    transform: scale(0.985);
    transition-duration: var(--bwh-dur-press);
  }

  /* Query-loop cards (blog archive) lift as one unit. */
  main .wp-block-post-template > li {
    transition: transform var(--bwh-dur-base) var(--bwh-ease);
  }

  main .wp-block-post-template > li:hover {
    transform: translateY(-3px);
  }
}

/* ==========================================================================
   32. Focus ring unification (round-5)
   ========================================================================== */

/* Settled state verified across pages: the refine ring (2px purple, white
   on the cover and in the footer) is the only matching rule; the ink 3px
   readings in earlier probes were mid-animation frames caused by the 0.5s
   transition:all fixed in section 30. One real hole: the theme zeroes the
   search input's outline (`... .wp-block-search__input:focus { outline:
   none }` at specificity 0,1,1, which beats the base :where rule).
   Restore the ring at equal specificity; the later sheet wins. */
.wp-block-search__input:focus,
.wp-block-search__input:focus-visible {
  outline: 2px solid var(--bwh-purple);
  outline-offset: 2px;
}

/* ==========================================================================
   33. prefers-contrast: more (third user signal, apple-design section 14)
   ========================================================================== */

@media (prefers-contrast: more) {
  :root {
    --bwh-muted: #3d3d3d;
    --bwh-line: #8a8a8a;
  }

  /* Frosted material becomes a solid slab; the hairline becomes a hard
     defined edge. */
  .sticky-wrapper > #sticky-header,
  .sticky-wrapper > .wp-block-group {
    background-color: #ffffff !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    border-bottom: 1px solid var(--bwh-ink);
  }

  /* Value cards drop the tint for a solid surface plus a full-strength
     hue border (identity kept, edge unambiguous). */
  .bwh-value-card {
    background-color: #ffffff !important;
    border-width: 2px !important;
    border-color: var(--bwh-vc-hue) !important;
  }

  .tribe-events-c-messages__message--notice {
    background: #ffffff !important;
    border: 1px solid var(--bwh-ink);
  }

  /* Links get the third signal (underline stays visible, not transparent). */
  main p a:not(.wp-element-button):not(.wp-block-button__link),
  :where(.wp-site-blocks > div.wp-block-group)
    p
    a:not(.wp-element-button):not(.wp-block-button__link),
  main .wp-block-post-title a {
    text-decoration-color: currentColor;
  }

  :where(a, button, input, textarea, select, [tabindex]):focus-visible {
    outline-width: 3px;
  }
}

/* ==========================================================================
   34. Empty and error states: 404, search-empty, form messages (round-5)
   ========================================================================== */

/* Search submit measured #a4a4a4 on #f9f9f9 (2.3:1) on the 404 template and
   carried no brand at all; the input measured an off-scale 5.28px corner.
   The search button joins the primary button system, the input the radius
   scale. Double class beats the global-styles inline sheet that prints
   after this file. */
.wp-block-search__button.wp-block-search__button {
  background-color: var(--bwh-purple) !important;
  color: var(--bwh-on-dark) !important;
  border: none !important;
  border-radius: var(--bwh-radius-btn) !important;
  min-height: 44px;
}

@media (hover: hover) and (pointer: fine) {
  .wp-block-search__button.wp-block-search__button:hover {
    background-color: var(--bwh-purple-dark) !important;
  }
}

.wp-block-search__input {
  border-radius: var(--bwh-radius-sm) !important;
}

/* Empty search results shipped as bare default text (zero styling rules
   found site-wide). Give it a quiet dashed card, centered, muted, and
   refine.js appends a human hint line below it. */
body.search-no-results .wp-block-query-no-results {
  padding: 48px 32px;
  background: var(--bwh-surface-alt);
  border: 1px dashed var(--bwh-line);
  border-radius: var(--bwh-radius-lg);
  text-align: center;
}

body.search-no-results .wp-block-query-no-results p {
  color: var(--bwh-muted);
  font-size: 1.0625rem;
}

.bwh-empty-hint {
  color: var(--bwh-muted);
  font-size: 0.9375rem;
  margin-top: 10px;
}

/* Fluent form feedback was completely unstyled (no rule for success or
   error states existed in any loaded sheet; class vocabulary read from the
   plugin's own submission script). Success gets a purple-tinted card with a
   brand edge; any ff-namespaced error text gets the danger token; errored
   fields and the conversational form's invalid inputs get a danger border. */
.ff-message-success {
  background: rgba(127, 31, 166, 0.08) !important;
  border-left: 4px solid var(--bwh-purple) !important;
  color: var(--bwh-ink) !important;
  padding: 14px 18px !important;
  border-radius: var(--bwh-radius-md) !important;
  margin: 16px 0;
  font-size: 15px;
  line-height: 1.6;
}

[class*="ff-"][class*="error"]:not(.ff-el-is-error) {
  color: var(--bwh-danger);
  font-size: 0.875rem;
  line-height: 1.5;
}

.ff-el-is-error input:not([type="checkbox"]):not([type="radio"]),
.ff-el-is-error textarea,
.ff-el-is-error select,
input.f-invalid,
textarea.f-invalid,
select.f-invalid {
  border-color: var(--bwh-danger) !important;
}

/* ==========================================================================
   35. Mobile form spacing: conversational form dead space (round-6)
   ==========================================================================

   On viewports at or below 560px the Fluent conversational form reserves
   30px of section padding plus 60px of input padding above the first
   question, which reads as a blank slab between the header and the form.
   Tighten both on small screens so the first question sits close to the
   heading. Desktop spacing is untouched. */
@media (max-width: 560px) {
  .ffc_conv_wrapper .ff_conv_section_wrapper {
    padding: 16px 0 !important;
  }

  .ffc_conv_wrapper .ff_conv_section_wrapper .ff_conv_input,
  .ffc_conv_wrapper .ff_conv_app_frame .vff .ff_conv_section_wrapper .ff_conv_input {
    padding: 24px 18px !important;
  }

  .ffc_conv_wrapper .ffc_question .fh2 {
    font-size: 1.25rem;
  }

  /* The plugin footer (.vff-footer) is position:absolute pinned to the
     bottom of .vff (its containing block), and takes no space in the flow,
     so once the section padding above was tightened it sat on top of the
     input. Reserve its height inside .vff so the bar always clears the
     field. */
  .ffc_conv_wrapper .vff {
    padding-bottom: 44px !important;
  }
}

/* The plugin's "Powered by Fluent Forms" label paints ink (#111) and only
   passed contrast while the bar overlapped the white input at small widths.
   The bar is purple at every width, so this applies everywhere: on-dark
   token gives 7.9:1 against the purple against 2.4:1 for ink. The ID prefix
   matches the round-4b rule (#ffc_app_instance_1 b forces ink) and wins on
   order at equal specificity. */
#ffc_app_instance_1 .ffc_power,
#ffc_app_instance_1 .ffc_power > b {
  color: var(--bwh-on-dark) !important;
}

/* ==========================================================================
   36. Uniformity pass (design-uniformity iteration, Phase 7)
   Implements docs/design/BWH-DESIGN-SYSTEM.md: one section-title size and
   weight on every page, one card-title size, one card recipe, one radius
   family, cropped imagery, 16px body text at every viewport, and the
   remaining motion stragglers onto tokens. Evidence for each rule:
   docs/design/UNIFORMITY-GAP-ANALYSIS.md.
   ========================================================================== */

/* --- 36.1 Section titles: one size, one weight, everywhere ---------------- */
/* Bare element selector with !important is deliberate: section titles carry
   per-page inline font-size clamps from the site editor (20px to 32px on
   about and programs, global 42px preset on home and events) and three
   pages render no <main> for the scoped section-2 rules to catch. Headings
   that play other roles are excluded by their sanctioned markers: stat
   numbers, small CTA and post titles (inline 14px clamp), card-title preset
   classes, and the hero subtitle preset. Keep the selector on ONE line:
   whitespace between chained :not() groups parses as a descendant
   combinator and the rule silently stops matching anything. */
h2:not([style*="font-size:clamp(17.905px"]):not([style*="font-size:clamp(14px"]):not(.has-mdm-large-font-size):not(.has-medium-font-size):not(.has-large-font-size) {
  font-size: var(--bwh-fs-section) !important;
  font-weight: 700 !important;
  line-height: 1.15 !important;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

/* --- 36.2 Card titles: one size regardless of tag level ------------------- */
/* Live sources this replaces: preset classes (16.8px to 21px), inline
   clamps on h3 value cards and blog post titles (14px to 21px), and the
   bare preset fallback. Widget and event titles join the same tier. */
h2.has-mdm-large-font-size,
h2.has-medium-font-size,
h2[style*="font-size:clamp(14px"],
h3,
h4 {
  font-size: var(--bwh-fs-card) !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
  letter-spacing: -0.01em;
}

/* Headings keep one weight end to end: the UA bolder jump made <strong>
   inside a 700 heading render at 900, a weight outside the two-weight
   heading system (smoke suite caught this after the Phase 7 deploy). */
:where(h1, h2, h3, h4, h5, h6) :is(strong, b) {
  font-weight: inherit;
}

/* --- 36.3 Stat numbers: display tier, one size on every page -------------- */
/* 300+, 800+ (about) and 4+ (programs) share one inline clamp today; they
   step up from 28px to the stat token so numbers read as numbers. */
h2[style*="font-size:clamp(17.905px"] {
  font-size: var(--bwh-fs-stat) !important;
  line-height: 1.05 !important;
  letter-spacing: -0.02em;
}

/* --- 36.4 Body copy: 16px at every viewport ------------------------------- */
/* Theme global styles pin every paragraph to the sml-medium preset, which
   computes 13.01px at 375 and 14.8px at 834. Inline-styled paragraphs
   (lead-ins, labels, footer column titles) keep their own clamps. The
   empty-state hint keeps its supporting step by class exclusion. */
p:not([style*="font-size"]):not([class*="font-size"]):not(.bwh-empty-hint) {
  font-size: 16px !important;
}

/* --- 36.5 Card recipe: one radius, one padding, visible borders ----------- */
/* Bordered content cards (about value cards, programs persona cards,
   mission and vision cards, programs hue cards) converge on radius md and
   32px padding. Home why-join cards carry no background class, so the
   media-card padding from section 14 is untouched here. Hue borders on the
   identity cards stay; the near-white rgba(245,245,245) borders on white
   cards become the same visible line the home cards already use. */
.wp-block-group.has-border-color.has-background,
.wp-block-group.has-border-color.has-base-2-background-color {
  border-radius: var(--bwh-radius-md) !important;
  padding: 32px !important;
}

.wp-block-group.has-border-color.has-base-2-background-color {
  border-color: rgba(17, 17, 17, 0.16) !important;
}

/* Stat tiles and program media columns already use this class; radius 8
   moves to md so the whole site reads one radius family. White tiles drop
   the raised header shadow for the card-elevation token; transparent
   columns keep no shadow. */
.column-has-radius {
  border-radius: var(--bwh-radius-md) !important;
}

.column-has-radius.has-base-2-background-color {
  box-shadow: var(--bwh-shadow-soft) !important;
}

/* --- 36.6 Images: rounded crops never stretch ----------------------------- */
/* Every bordered content image on about, programs and contact computed
   object-fit: fill; the cover crop matches the reference-site habit and
   keeps aspect ratios honest when boxes resize. Logos and cover
   backgrounds are outside this selector and keep their fit. */
.has-custom-border img,
.tribe-events-calendar-latest-past__event-feature img {
  object-fit: cover;
}

/* --- 36.7 Events container joins the one-container rule ------------------- */
.tribe-common-l-container,
.tribe-events-l-container {
  max-width: var(--bwh-container) !important;
}

/* --- 36.8 Motion stragglers onto tokens ----------------------------------- */
/* Everything else on the site runs --bwh-fast/--bwh-ease; these were the
   measured leftovers (social icons 0.1s ease, form focus 0.15s ease-in-out,
   tribe buttons and titles 0.2s ease, gallery plus icon 0.2s ease, form
   progress bar 0.3s ease). */
.wp-social-link {
  transition: transform var(--bwh-fast) var(--bwh-ease) !important;
}

.ff-el-form-control {
  transition:
    border-color var(--bwh-fast) var(--bwh-ease),
    box-shadow var(--bwh-fast) var(--bwh-ease) !important;
}

.tribe-common-c-btn,
.tribe-common-c-btn-border-small,
.tribe-events-c-top-bar__today-button {
  transition:
    color var(--bwh-fast) var(--bwh-ease),
    border-color var(--bwh-fast) var(--bwh-ease),
    background-color var(--bwh-fast) var(--bwh-ease) !important;
}

.tribe-common-c-btn__clear,
.tribe-events-calendar-latest-past__event-title-link {
  transition:
    opacity var(--bwh-fast) var(--bwh-ease),
    border-color var(--bwh-fast) var(--bwh-ease) !important;
}

.fa-plus {
  transition:
    transform var(--bwh-fast) var(--bwh-ease),
    background-color var(--bwh-fast) var(--bwh-ease) !important;
}

.f-progress-bar-inner {
  transition: width var(--bwh-dur-base) var(--bwh-ease) !important;
}

/* --- 36.9 Mobile edge and cover budget ------------------------------------ */
@media (max-width: 781px) {
  .wp-block-cover .wp-block-cover__inner-container.has-global-padding {
    padding-left: 20px;
    padding-right: 20px;
  }
}

@media (max-width: 767px) {
  /* CTA covers carry 80px block padding inline from the editor; at phone
     sizes that is a third of the cover as dead space, and the CTA overran
     the 450px decorative-cover budget once body copy moved to 16px. The
     spacing scale's 48px step brings it back inside the budget. The hero
     (min-height:650px inline) keeps its approved 80px by exclusion. */
  .wp-block-cover[style*="padding-top:80px"]:not([style*="min-height:650px"]) {
    padding-top: 48px !important;
    padding-bottom: 48px !important;
  }
}

/* --- 36.10 Palette stragglers onto tokens -------------------------------- */
/* The getting-started wizard's own custom stylesheet (printed inline per
   form) paints its interactive chrome blue (#0445AF): labels, choice
   chips, matrix cells, upload dropzone, star rating, the round action
   button and the submit hover (#1a7efb). Section 24 already moved the
   inputs, nav segment and progress bar; this finishes the rest. Accent
   roles take brand purple, text roles take ink and muted. The doubled
   class prefix out-specifies the inline sheet at equal importance, so
   cascade order between the two sheets stops mattering. */
.ff_conv_app_3.ff_conv_app_3 .f-label-wrap,
.ff_conv_app_3.ff_conv_app_3 .f-answer {
  color: var(--bwh-ink) !important;
}

/* Typed text and placeholders: section 24's textarea rule ties with the
   form's inline sheet and loses on cascade order, and no rule covered
   ::placeholder, so both still computed blue after round-4. */
.ff_conv_app_3.ff_conv_app_3 .f-answer input,
.ff_conv_app_3.ff_conv_app_3 .f-answer textarea {
  color: var(--bwh-ink) !important;
}

.ff_conv_app_3.ff_conv_app_3 .f-answer input::placeholder,
.ff_conv_app_3.ff_conv_app_3 .f-answer textarea::placeholder {
  color: var(--bwh-muted) !important;
}

.ff_conv_app_3.ff_conv_app_3 .f-label-wrap .f-key,
.ff_conv_app_3.ff_conv_app_3 .f-label-wrap .f-key-hint {
  border-color: var(--bwh-purple) !important;
}

.ff_conv_app_3.ff_conv_app_3 .ffc-counter-div span,
.ff_conv_app_3.ff_conv_app_3 .ffc-counter-div .counter-icon-span svg,
.ff_conv_app_3.ff_conv_app_3 .ff_conv_input .f-info,
.ff_conv_app_3.ff_conv_app_3 .f-enter .f-enter-desc {
  color: var(--bwh-muted) !important;
  fill: var(--bwh-muted) !important;
}

.ff_conv_app_3.ff_conv_app_3 .text-success {
  color: var(--bwh-purple) !important;
}

.ff_conv_app_3.ff_conv_app_3 .f-answer .f-radios-wrap ul li {
  background-color: rgba(127, 31, 166, 0.1) !important;
  border: 1px solid var(--bwh-purple) !important;
}

.ff_conv_app_3.ff_conv_app_3 .f-answer .f-radios-wrap ul li:focus,
.ff_conv_app_3.ff_conv_app_3 .f-answer .f-radios-wrap ul li:hover {
  background-color: rgba(127, 31, 166, 0.3) !important;
}

.ff_conv_app_3.ff_conv_app_3 .f-answer .f-radios-wrap ul li.f-selected .f-key,
.ff_conv_app_3.ff_conv_app_3 .f-answer .f-radios-wrap ul li.f-selected .f-key-hint {
  background-color: var(--bwh-purple) !important;
}

.ff_conv_app_3.ff_conv_app_3 .f-answer .f-radios-wrap ul li.f-selected svg {
  fill: var(--bwh-purple) !important;
}

.ff_conv_app_3.ff_conv_app_3 .f-answer .f-matrix-table tbody td {
  background-color: rgba(127, 31, 166, 0.1) !important;
}

.ff_conv_app_3.ff_conv_app_3 .f-answer .f-matrix-table input {
  border-color: rgba(127, 31, 166, 0.8) !important;
}

.ff_conv_app_3.ff_conv_app_3 .f-answer .f-matrix-table input.f-radio-control:checked::after,
.ff_conv_app_3.ff_conv_app_3 .f-answer .f-matrix-table input.f-checkbox-control:checked {
  background-color: var(--bwh-purple) !important;
}

.ff_conv_app_3.ff_conv_app_3 .f-answer .f-matrix-table input:focus::before {
  border-color: var(--bwh-purple) !important;
}

.ff_conv_app_3.ff_conv_app_3 .f-answer .f-matrix-table tbody tr::after {
  border-right-color: var(--bwh-purple) !important;
}

.ff_conv_app_3.ff_conv_app_3 .f-answer .f-matrix-table .f-table-cell.f-row-cell {
  box-shadow: rgba(127, 31, 166, 0.1) 0 0 0 100vh inset !important;
}

.ff_conv_app_3.ff_conv_app_3 .f-answer .ff_file_upload_field_wrap,
.ff_conv_app_3.ff_conv_app_3 .f-answer .ff_file_upload_field_wrap:hover,
.ff_conv_app_3.ff_conv_app_3 .f-answer .ff_file_upload_field_wrap:focus-within {
  background-color: rgba(127, 31, 166, 0.1) !important;
  border-color: rgba(127, 31, 166, 0.8) !important;
}

.ff_conv_app_3.ff_conv_app_3 .f-answer .ff_file_upload_field_wrap:hover,
.ff_conv_app_3.ff_conv_app_3 .f-answer .ff_file_upload_field_wrap:focus-within {
  background-color: rgba(127, 31, 166, 0.3) !important;
}

.ff_conv_app_3.ff_conv_app_3 .f-answer .ff-upload-preview {
  border-color: rgba(127, 31, 166, 0.8) !important;
}

.ff_conv_app_3.ff_conv_app_3 .f-answer .ff-upload-preview .ff-upload-details,
.ff_conv_app_3.ff_conv_app_3 .f-answer .ff-upload-preview .ff-upload-details .ff-el-progress {
  border-left-color: rgba(127, 31, 166, 0.8) !important;
}

.ff_conv_app_3.ff_conv_app_3 .f-answer .ff-upload-preview .ff-upload-thumb {
  background-color: rgba(127, 31, 166, 0.3) !important;
}

.ff_conv_app_3.ff_conv_app_3 .f-answer .ff-upload-preview .ff-upload-details .ff-el-progress {
  background-color: rgba(127, 31, 166, 0.1) !important;
}

.ff_conv_app_3.ff_conv_app_3 .f-answer .ff-upload-preview .ff-upload-details .ff-el-progress .ff-el-progress-bar {
  background-color: var(--bwh-purple) !important;
}

/* Star rating: the widget reads its palette from custom properties with
   blue fallbacks; publishing purple values on the form root replaces the
   fallbacks without touching the plugin's own rule structure. */
.ff_conv_app_3 {
  --ff-rating-inactive-color: rgba(127, 31, 166, 0.25);
  --ff-rating-hover-color: rgba(127, 31, 166, 0.4);
  --ff-rating-active-color: #7f1fa6;
}

.ff_conv_app_3.ff_conv_app_3 .f-answer .f-star-wrap .f-star-field-wrap::before {
  background-color: var(--bwh-purple) !important;
}

.ff_conv_app_3.ff_conv_app_3 .f-answer .f-star-wrap .f-star-field-wrap.is-hovered .symbolFill {
  fill: rgba(127, 31, 166, 0.1) !important;
}

.ff_conv_app_3.ff_conv_app_3 .f-answer .f-star-wrap .f-star-field-wrap.is-selected .symbolFill,
.ff_conv_app_3.ff_conv_app_3 .f-answer .f-star-wrap .f-star-field-wrap .f-star-field .f-star-field-star .symbolOutline {
  fill: var(--bwh-purple) !important;
}

.ff_conv_app_3.ff_conv_app_3 .f-answer .f-star-wrap .f-star-field-wrap .f-star-field .f-star-field-rating {
  color: var(--bwh-purple) !important;
}

.ff_conv_app_3.ff_conv_app_3 .f-answer .f-payment-summary-wrap tbody td,
.ff_conv_app_3.ff_conv_app_3 .f-answer .f-payment-summary-wrap tfoot th {
  background-color: rgba(127, 31, 166, 0.1) !important;
}

.ff_conv_app_3.ff_conv_app_3 .f-answer .stripe-inline-holder {
  border-bottom: 1px solid var(--bwh-purple) !important;
}

.ff_conv_app_3.ff_conv_app_3 .f-answer .StripeElement--focus {
  border-bottom: 2.5px solid var(--bwh-purple) !important;
}

.ff_conv_app_3.ff_conv_app_3 .q-inner .o-btn-action,
.ff_conv_app_3.ff_conv_app_3 .q-inner .o-btn-action:hover {
  background-color: var(--bwh-purple) !important;
}

.ff_conv_app_3.ff_conv_app_3 .q-inner .o-btn-action:focus::after {
  box-shadow: var(--bwh-purple) 0 0 0 2px !important;
}

.ff_conv_app_3.ff_conv_app_3 .wpf_has_custom_css.ff-btn-submit:hover {
  border-color: var(--bwh-purple) !important;
  color: var(--bwh-purple) !important;
}

/* One neutral gray beyond ink: the contrast-2 preset (#636363) reads as a
   fifth gray in blog meta and the 404 surface. Collapsing the preset onto
   the muted token fixes every use in one place. */
:root {
  --wp--preset--color--contrast-2: #5d5d5d !important;
}

/* A dozen program and about paragraphs carry an inline #000000 that sits
   one step off the ink token; fold them back. */
p[style*="color:#000000"] {
  color: var(--bwh-ink) !important;
}

/* ==========================================================================
   37. Section redesign pass (uniformity iteration, Phase 7)
   Design judgment applied on top of the type-scale work in section 36:
   each rule below changes the composition of a section, not just its
   tokens. Spec: docs/design/BWH-DESIGN-SYSTEM.md.
   ========================================================================== */

/* --- 37.1 Story / Mission / Vision: one numbered ladder ------------------ */
/* The editor's 2-column grid stranded the short Mission copy and left a
   dead corner beside Vision while the image sat opposite. One column of
   three hairline-ruled rows balances the 40% image, keeps the 01/02/03
   grammar from section 16, and reads as a deliberate index rather than a
   ragged masonry. The override must be !important because WP bakes the
   grid definition into a per-page style block. */
.wp-container-core-group-is-layout-916c7fde {
  grid-template-columns: minmax(0, 1fr) !important;
  row-gap: 6px !important;
}

.wp-container-core-group-is-layout-916c7fde > .wp-block-group {
  padding-top: 26px;
  padding-bottom: 6px;
}

.wp-container-core-group-is-layout-916c7fde > .wp-block-group > p {
  max-width: 58ch;
  line-height: 1.7;
}

/* --- 37.2 Our Programs: index rows instead of a run-on list -------------- */
/* Right column beside the photo collage was bold-text runs alternating
   with paragraphs: no hierarchy, no rhythm, no scanability. Give it the
   same numbered grammar as the story ladder (01 to 04), hairline rules,
   one title size and a capped measure. The title h2 carries
   has-secondary-color and is excluded from the counter; the fourth head
   (has-medium-font-size) joins the counter. Layout id verified unique on
   the live home page. */
.wp-container-core-column-is-layout-f9cd94f0 {
  counter-reset: bwh-prog;
}

.wp-container-core-column-is-layout-f9cd94f0 > div.wp-block-group.is-nowrap,
.wp-container-core-column-is-layout-f9cd94f0 > h2.wp-block-heading.has-medium-font-size {
  counter-increment: bwh-prog;
  border-top: 1px solid var(--bwh-line);
  padding-top: 22px;
  margin-top: 30px;
}

.wp-container-core-column-is-layout-f9cd94f0 > div.wp-block-group.is-nowrap::before,
.wp-container-core-column-is-layout-f9cd94f0 > h2.wp-block-heading.has-medium-font-size::before {
  content: "0" counter(bwh-prog);
  display: block;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--bwh-purple);
  margin-bottom: 10px;
}

/* The div heads are flex containers already, so their number sits inline
   before the title; make the fourth head (an h2) match instead of stacking
   its number above. */
.wp-container-core-column-is-layout-f9cd94f0 > h2.wp-block-heading.has-medium-font-size {
  display: flex;
  align-items: baseline;
  gap: 14px;
}

.wp-container-core-column-is-layout-f9cd94f0 > h2.wp-block-heading.has-medium-font-size::before {
  margin-bottom: 0;
  flex: none;
}

.wp-container-core-column-is-layout-f9cd94f0 > div.wp-block-group.is-nowrap > p,
.wp-container-core-column-is-layout-f9cd94f0 > h2.wp-block-heading.has-medium-font-size {
  font-size: clamp(17px, 1.1vw, 19px) !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  letter-spacing: -0.01em;
}

/* Lead paragraph stays airy; item descriptions step back to muted at a
   capped measure so titles win the scan. */
.wp-container-core-column-is-layout-f9cd94f0 > p.wp-block-paragraph:first-of-type {
  font-size: clamp(17px, 1.15vw, 19px);
  line-height: 1.6;
  max-width: 56ch;
}

.wp-container-core-column-is-layout-f9cd94f0 > p.wp-block-paragraph:not(:first-of-type) {
  color: var(--bwh-muted);
  line-height: 1.65;
  max-width: 58ch;
  margin-top: 10px;
}

.wp-container-core-column-is-layout-f9cd94f0 > div.wp-block-buttons {
  margin-top: 8px;
}

/* --- 37.3 The CTA becomes the strongest action on the page --------------- */
/* "Become A Member Today" ended in an outline-only ghost button, the
   weakest treatment available, on the site's primary conversion cover.
   Solid white on the photo reads as the loudest object in the viewport;
   hover inverts to brand purple with the standard press feedback. The
   inline min-height marker uniquely identifies this cover (1 match on
   live). Overlay deepens a step so the headline keeps 4.5:1. */
.wp-block-cover[style*="min-height:450px"] .wp-block-cover__background {
  background-image: linear-gradient(180deg, rgba(23, 8, 33, 0.3), rgba(23, 8, 33, 0.55)) !important;
}

.wp-block-cover[style*="min-height:450px"] .wp-block-button__link {
  background: #ffffff !important;
  border-color: #ffffff !important;
  color: var(--bwh-purple) !important;
  padding: 14px 36px !important;
  font-weight: 700 !important;
  box-shadow: var(--bwh-shadow-btn);
  transition:
    transform var(--bwh-fast) var(--bwh-ease),
    background-color var(--bwh-fast) var(--bwh-ease),
    color var(--bwh-fast) var(--bwh-ease),
    border-color var(--bwh-fast) var(--bwh-ease),
    box-shadow var(--bwh-fast) var(--bwh-ease);
}

@media (hover: hover) and (pointer: fine) {
  .wp-block-cover[style*="min-height:450px"] .wp-block-button__link:hover {
    background: var(--bwh-purple) !important;
    border-color: var(--bwh-purple) !important;
    color: #ffffff !important;
    transform: translateY(-1px);
    box-shadow: var(--bwh-shadow-float);
  }
}

.wp-block-cover[style*="min-height:450px"] .wp-block-button__link:active {
  transform: scale(0.97);
  transition-duration: var(--bwh-dur-press);
}

/* --- 37.4 Founder card: kill the dead corner ---------------------------- */
/* The portrait ran ~700px tall against ~500px of bio, stretching the
   white card and stranding a void under the button. Cap the portrait with
   a face-safe crop and vertically center the text column so both halves
   finish together. */
.wp-block-cover .wp-block-columns.has-base-2-background-color {
  align-items: stretch;
}

.wp-block-cover .wp-block-columns.has-base-2-background-color > .wp-block-column:not(:has(img)) {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.wp-block-cover .wp-block-columns.has-base-2-background-color .wp-block-image img {
  width: 100%;
  height: clamp(440px, 44vw, 580px);
  object-fit: cover;
  object-position: center 18%;
}

/* --- 37.5 Page title on a titleless cover -------------------------------- */
/* The about page opens on a tall photo cover washed to 90% brand purple
   with no visible title: the only h1 is screen-reader text, so the first
   screen says nothing about where the visitor landed. refine.js places a
   visual title in the cover when (and only when) a cover sits at the top
   of a page whose h1 is hidden; the accessible name stays the sr h1 and
   the visual copy is aria-hidden. Centered to match the CTA cover's
   grammar; white on the 90% purple wash measures 7.1:1. */
.bwh-cover-title {
  font-size: clamp(34px, 4.6vw, 56px);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.02em;
  text-align: center;
  color: #ffffff;
  text-shadow: 0 2px 16px rgba(17, 17, 17, 0.35);
  margin: 0 0 12px;
}

/* ==========================================================================
   38. Taste pass: Impeccable craft-floor + Emil Kowalski skills
   Applied from the pbakaus/impeccable skill (craft-floor.md) and the
   emilkowalski/skills bundle (agents-with-taste typography and motion
   rules). Everything here stays inside the brand token set.
   ========================================================================== */

/* --- 38.1 Browser surfaces carry the palette ---------------------------- */
/* Craft floor: text selection, caret, and scrollbars ship with browser
   defaults that belong to no design system, and it is the cheapest signal
   that a page was built rather than assembled. Purple selection with white
   copy, purple caret, and a slim neutral scrollbar. */
::selection {
  background: var(--bwh-purple);
  color: #ffffff;
}

input,
textarea,
[contenteditable="true"] {
  caret-color: var(--bwh-purple);
}

html {
  scrollbar-color: var(--bwh-muted) transparent;
  scrollbar-width: thin;
}

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: #c9c9c9;
  background-clip: padding-box;
  border: 2px solid transparent;
  border-radius: 9999px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--bwh-muted);
  background-clip: padding-box;
}

/* --- 38.2 Outline buttons drop the sky-blue preset border ---------------- */
/* Live audit: buttons computing rgb(1, 164, 239) borders (the hero and
   about outline buttons via has-primary-border-color, and programs'
   Get Started with only contrast classes) are a leftover sky blue the
   gap analysis never saw because it sits on borders, not text (axe
   passes it, the Impeccable detector did not). currentColor makes every
   outline agree with its own label: white on the dark covers, ink or
   purple on light surfaces - one secondary-button recipe. */
.wp-block-button__link {
  border-color: currentColor !important;
}

/* --- 38.3 Tabular numerals on number tiers ------------------------------ */
/* Emil typography rule: digits in columns and stats align. Applies to the
   stat display tier (inline clamp markers), and the story and programs
   index numerals. */
[style*="font-size:clamp(17.905px"],
.wp-container-core-group-is-layout-916c7fde > .wp-block-group::before,
.wp-container-core-column-is-layout-f9cd94f0 > div.wp-block-group.is-nowrap::before,
.wp-container-core-column-is-layout-f9cd94f0 > h2.wp-block-heading.has-medium-font-size::before {
  font-variant-numeric: tabular-nums;
}

/* --- 38.4 Body measure: cap the run-on lines ----------------------------- */
/* Craft floor wants 65 to 75ch. Measured at 1440: about runs 99ch, home
   78ch, everything else already inside the band. The cap only bites where
   a paragraph has more room than a comfortable line wants; narrow columns
   are untouched. Expressed in em because Nunito's zero is 0.6em wide, so
   a literal 72ch lands at 691px (86 average chars); 36em is 72 average
   characters at 16px. Centered copy keeps its centering via auto margins
   (the CTA body rewraps and stays put). */
p {
  max-width: 36em;
}

p.has-text-align-center {
  margin-inline: auto;
}

/* ==========================================================================
   39. Conversion-page framing (critique P0/P1, join + contact)
   The join page is the nav CTA's destination and opened on a bare wizard;
   the contact form section stacked five 96px gutenify paddings around a
   centered heading and shipped two empty editor groups that inflated the
   page to a ~978px dead zone above the footer. UUID selectors are unique
   to the contact template (verified across all eight pages); the join
   rules scope to the become-a-member template class.
   ========================================================================== */

/* --- 39.1 Join: the CTA destination gets a cover and a card ------------ */
/* The tint separates page from card; refine.js places .bwh-join-cover
   above the wizard (textContent only) carrying the nav CTA's own words so
   the visitor sees where they landed before question one. */
body.page-template-wp-custom-template-become-a-member main {
  background: var(--bwh-surface-alt);
  padding-bottom: 72px;
}

.bwh-join-cover {
  padding: 56px 0 40px;
}

.bwh-join-eyebrow {
  color: var(--bwh-purple);
  font-size: 1.0625rem;
  font-weight: 700;
  margin: 0 0 10px;
  max-width: none;
}

.bwh-join-title {
  color: var(--bwh-ink);
  font-size: clamp(40px, 5.5vw, 64px);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.02em;
  margin: 0 0 12px;
}

.bwh-join-sub {
  color: var(--bwh-muted);
  font-size: 1.125rem;
  line-height: 1.5;
  margin: 0;
}

/* The wizard frame becomes a white card on the tint: 12px radius and the
   soft shadow token, overflow kept so the rail widget still clips. */
.ffc_conv_wrapper .ff_conv_app_frame {
  background: var(--bwh-surface) !important;
  border-radius: var(--bwh-radius-md);
  box-shadow: var(--bwh-shadow-soft);
  overflow: hidden;
}

/* Progress reads as status, not a shout: muted label on the brand rail.
   ID scope is required: the round-4b rule (#ffc_app_instance_1 span, ink,
   1,0,1) outranks the bare class (0,1,0) at equal !important, so the
   first version of this rule silently computed ink on the live label. */
#ffc_app_instance_1 .ffc_progress_label {
  color: var(--bwh-muted) !important;
  font-weight: 600;
}

/* --- 39.2 Contact: collapse the dead zone ------------------------------ */
/* Two empty editor groups (384px) sat below the map inside the right
   column, stretching both columns (align normal = stretch) and leaving
   ~973px of white under the form. They contain nothing. */
[class*="gutenify-section-8dd67000"],
[class*="gutenify-section-8dd47430"] {
  display: none !important;
}

/* Unequal columns take their natural heights instead of stretching to
   the tallest. Specificity note: the rhythm pass sets padding on every
   [class*=gutenify-section-] at .wp-site-blocks scope (0,2,0 + !important),
   and WP's inline block-supports sheet pins .wp-block-columns
   align-items:normal + !important. These selectors sit above both. */
.wp-site-blocks .wp-block-columns[class*="gutenify-section-d92fe080"] {
  align-items: flex-start !important;
  margin: 0 !important;
  padding: 0 0 var(--bwh-space-section) !important;
}

/* The two columns each carried a 96px top pad on top of the container's. */
.wp-site-blocks .wp-block-column[class*="gutenify-section-d92cfa50"],
.wp-site-blocks .wp-block-column[class*="gutenify-section-d92e0bc0"] {
  padding: 0 !important;
}

/* Map chain: three stacked 96px top paddings pushed the map 288px below
   the form. Zero the wrappers, keep one section rhythm below the map,
   and let the embed carry the site's 12px image radius. */
.wp-site-blocks .wp-block-group[class*="gutenify-section-8e115620"] {
  padding: 0 !important;
}

.wp-site-blocks .wp-block-group[class*="gutenify-section-8dd95630"] {
  padding: 0 0 var(--bwh-space-section) !important;
}

/* The wrapper also carries a gutenify-section-3aeb1a60 class, so the
   rhythm rule matches it too; two classes above its specificity. */
.wp-site-blocks .wp-block-gutenify-map.gutenify-block-map-wrapper {
  padding: 0 !important;
  border-radius: var(--bwh-radius-md);
  overflow: hidden;
}

/* --- 39.3 Contact: the heading joins the section-title system ---------- */
/* The h2 ships with a gutenify-section class of its own, so it carried
   96px of baked vertical padding (238px tall for one 40px line), 40px
   side margins and centering - a different philosophy from every other
   section title on the site. Left-aligned, untucked, 40/700 tier, one
   heading rhythm gap to the columns below. */
.wp-site-blocks .wp-block-heading[class*="gutenify-section-d92a6240"] {
  padding: 0 !important;
  text-align: left !important;
  margin: 0 0 48px !important;
}

/* ==========================================================================
   40. Single event: mobile containment (landmark pass follow-up)
   ========================================================================== */

/* The single-event page measured 443px of content width at a 375px viewport,
   and the same two nodes were responsible with the wrapper <main> removed, so
   the overflow predates the landmark work: the event photo is a full-size
   upload (1448px on the Market Day event) inside a 335px column, and the
   comment box takes its width from the cols attribute (423px). The body clips
   the overflow, which means the right edge of the comment field is simply
   unreachable on a phone. Both are contained to their column; height:auto
   keeps the photo's aspect ratio where the column is narrower than the file. */
.tribe-events-event-image img {
  max-width: 100%;
  height: auto;
}

.comment-form textarea {
  width: 100%;
}

/* ==========================================================================
   41. Footer redesign (design-system section 8)
   ========================================================================== */

/* 41.1 Dark surface. The footer group paints its background through
   WordPress's global-styles rule
   `.has-button-hover-color-background-color { background-color: <purple>
   !important }` at (0,1,0), and that inline sheet prints after every
   linked stylesheet, so the override needs both the higher specificity and
   its own !important: the doubled class lands at (0,3,1) and takes the
   tie. The text color moves onto the on-dark token so any child without an
   explicit preset color inherits white instead of the group's ink. */
footer .wp-block-group.has-button-hover-color-background-color.has-button-hover-color-background-color {
  background-color: var(--bwh-ink) !important;
  color: var(--bwh-on-dark);
}

/* 41.2 Structure: the four markup columns (brand, Quick Link, Organization,
   Contact Info) become one grid: brand block first, the three headed link
   groups after it, 4 tracks on desktop, 2 on tablet, one stacked group on
   phones, at the WP breakpoints design-system section 12 mandates. The
   editor's inline flex-basis is inert under grid; the columns' inline
   60px tail before the bottom bar is reset in 41.6, which owns the
   vertical rhythm. Display needs
   !important against the layout class sheet, everything else wins on
   specificity alone. */
footer .wp-block-columns {
  display: grid !important;
  grid-template-columns: minmax(0, 1.3fr) repeat(3, minmax(0, 1fr));
  column-gap: 40px;
  row-gap: 40px;
}

@media (max-width: 1024px) {
  footer .wp-block-columns {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 782px) {
  footer .wp-block-columns {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 24px;
  }
}

/* 41.3 Column headings: the markup already provides them ("Quick Link",
   "Organization", "Contact Info"), so design-system section 8.2 allows no
   refine.js invention here - they are restyled onto the label role:
   13/700, tracked, on-dark. The chained selector sits at (0,3,2), above
   the global-styles preset sheet; the 36.4 body rule already exempts these
   paragraphs through their font-size class. */
footer .wp-block-columns .wp-block-column > p.has-mdm-large-font-size {
  font-size: 13px !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
  letter-spacing: 0.06em;
  color: var(--bwh-on-dark) !important;
}

/* 41.4 Brand row: refine.js (initFooter) reuses the header's wordmark
   asset - a dark PNG that would disappear against the ink surface - on a
   white plate at the head of the brand block. The duplicate text name is
   suppressed only while the marker class is present, so a page without the
   script or without a logo asset keeps today's name exactly. content-box
   because the global reset would otherwise swallow the plate padding out
   of the declared image height. Radius stays on the scale (md) for the
   footer radius sweep. */
footer .bwh-footer-logo {
  box-sizing: content-box;
  display: block;
  width: auto;
  height: 48px;
  max-width: 100%;
  margin: 0 0 16px;
  padding: 10px 14px;
  background: var(--bwh-surface);
  border-radius: var(--bwh-radius-md);
}

footer .bwh-footer-brand-with-logo > p:first-of-type {
  display: none;
}

/* 41.5 Bottom bar: the template renders an empty centered group after the
   columns as its slot. refine.js writes the copyright line (site name and
   current year, both existing values) with textContent and flags the slot;
   the 1px rgba divider rides on that flag, so a no-JS page never shows a
   rule under nothing. padding-top must out-rank the slot's inline
   padding-top:0, so it carries !important; the copy rule sits at (0,3,2)
   to clear the 36.4 body step (15px is the supporting role). */
footer .wp-block-group.bwh-footer-bar {
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  padding-top: 24px !important;
  text-align: center;
}

footer .wp-block-group.bwh-footer-bar p.bwh-footer-copy {
  /* auto margins: the section-2 68ch measure would otherwise left-anchor
     the box and "center" the line off-center on wide viewports. */
  margin: 0 auto !important;
  font-size: 15px !important;
  line-height: 1.5 !important;
  color: rgba(255, 255, 255, 0.72);
}

/* 41.6 Vertical rhythm. The markup stacked two debts on top of the row's
   own padding: an inline margin-bottom:60px on the columns plus the
   row's 64px bottom padding opened a 124px void above the divider, while
   the bar's inline padding-bottom:0 left the copyright flush against the
   footer's bottom edge. The block read as leftover space instead of a
   closing bar. Both inline declarations beat any stylesheet rule, so
   each reset carries !important. Ownership then splits once: the row
   closes its own content, and the bar owns the space around the divider
   and the copyright. The bar rules only apply where refine.js has
   flagged the slot, so a page without the script keeps the row's bottom
   padding as its closing space instead of going flush.

   Measured: desktop 430px to 386px (64 top, 40 to the divider, 24 under
   it, 40 below the copyright); phones go from a 19.5px top edge - the
   5vw inline spacing-40 var - to 40px, with the same tail removed. */
footer .pg-footer-center-row {
  padding-bottom: 40px !important;
}

footer .wp-block-columns {
  margin-bottom: 0 !important;
}

footer .wp-block-group.bwh-footer-bar {
  padding-bottom: 40px !important;
}

@media (max-width: 782px) {
  footer .pg-footer-center-row {
    padding-top: 40px !important;
    padding-bottom: 32px !important;
  }

  footer .wp-block-group.bwh-footer-bar {
    padding-bottom: 32px !important;
  }
}

/* ==========================================================================
   42. Mobile navigation drawer
   ==========================================================================

   The header row and the drawer are two different controls: section 4 styles
   the desktop row, this section styles what the burger opens. Measured broken
   at 390x844 on 2026-10-01:

   1. The panel is position:fixed, but its great-grandparent (the sticky
      header group) carries backdrop-filter: blur(18px). A filter makes that
      header the containing block for fixed descendants, so inset:0 resolved
      against the 72px header instead of the viewport: the open panel measured
      390x64 on a 844px tall screen.
   2. The close button is positioned against that collapsed box, so it landed
      at y=-48, above the viewport, where no finger could reach it.
   3. Rows kept the header's right justification (all right edges at x=337)
      and spilled past the collapsed panel onto the hero.

   The build is a right-hand sheet: it owns the full viewport height, slides
   in on the drawer curve, staggers its rows, and carries a real circular
   close control. The header's backdrop filter is dropped only while the
   modal is open, which is the only moment it breaks anything. */

:root {
  /* iOS-like drawer curve on enter, quick ease-in on exit: the sheet leaves
     faster than it arrives (emil-design-eng, asymmetric enter/exit). */
  --bwh-ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
  --bwh-ease-in: cubic-bezier(0.4, 0, 1, 1);
  --bwh-drawer-width: min(86vw, 360px);
}

/* 42.1 Containing-block repair. Removing the filter while the modal is open
   hands fixed positioning back to the viewport. The exiting class extends the
   same repair past the moment core drops has-modal-open: without it the
   filter returns mid-slide, the fixed container collapses to the 64px header
   (its content strip to 14px), and the exit renders as a stray chip. */
html.has-modal-open .sticky-wrapper .wp-block-group.has-base-2-background-color,
html.has-modal-open div#sticky-header,
html.bwh-drawer-exiting .sticky-wrapper .wp-block-group.has-base-2-background-color,
html.bwh-drawer-exiting div#sticky-header {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

/* 42.0 The drawer furniture is injected into the responsive container, which
   on desktop IS the inline nav (not a hidden modal). Without this it renders
   as a duplicate logo and button in the header. Show it only on mobile. */
.bwh-drawer-brand,
.bwh-drawer-foot {
  display: none;
}

/* 599px boundary: core hides the hamburger at min-width 600, and from 600
   up the responsive container IS the inline nav. Every drawer rule must
   stop here or it blanks the only navigation in the 600-767 range. */
@media (max-width: 599px) {
  /* 42.2 Core hides a closed panel with display:none, which would cut the
     slide-out short. Keep it mounted and inert instead: visibility hides it,
     pointer-events keeps the page tappable, and the delayed visibility flip
     lets the 200ms exit finish. */
  .wp-block-navigation__responsive-container:not(.has-modal-open) {
    display: block !important;
    visibility: hidden;
    pointer-events: none;
    overflow: hidden;
    transition: visibility 0s linear 220ms;
  }

  /* 42.3 Scrim: a dimmed page behind the sheet, not the old white frost.
     The !important outranks the section 4 frosted-panel rule. */
  .wp-block-navigation__responsive-container.has-modal-open {
    z-index: 100000;
    overflow: hidden;
    background-color: rgba(10, 6, 20, 0.55) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    transition: background-color var(--bwh-fast) var(--bwh-ease);
  }

  /* 42.4 Sheet geometry: pinned to the right edge, full height, sliding on
     transform only so the motion stays on the compositor. */
  .wp-block-navigation__responsive-close {
    position: absolute;
    inset: 0;
    display: flex;
    justify-content: flex-end;
  }

  .wp-block-navigation__responsive-dialog {
    position: relative;
    display: flex;
    flex-direction: column;
    width: var(--bwh-drawer-width);
    max-width: 100%;
    height: 100%;
    margin: 0;
    padding:
      calc(14px + env(safe-area-inset-top)) 0
      calc(14px + env(safe-area-inset-bottom));
    background: var(--bwh-surface);
    border-radius: var(--bwh-radius-lg) 0 0 var(--bwh-radius-lg);
    box-shadow: -24px 0 60px -30px rgba(8, 4, 16, 0.6);
    overflow: hidden;
    transform: translate3d(100%, 0, 0);
    transition: transform 200ms var(--bwh-ease-in);
    will-change: transform;
  }

  .wp-block-navigation__responsive-container.has-modal-open
    .wp-block-navigation__responsive-dialog {
    transform: translate3d(0, 0, 0);
    transition: transform 280ms var(--bwh-ease-drawer);
  }

  /* 42.5 Close control: a 44px circle (the touch guideline), brand purple on
     hover, and the glyph rotates a quarter turn so the state change reads. */
  .wp-block-navigation__responsive-container-close {
    position: absolute;
    top: calc(12px + env(safe-area-inset-top));
    right: 14px;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid var(--bwh-line);
    border-radius: 999px;
    background: var(--bwh-surface);
    color: var(--bwh-ink);
    cursor: pointer;
    transition:
      transform var(--bwh-dur-press) var(--bwh-ease),
      background-color var(--bwh-fast) var(--bwh-ease),
      border-color var(--bwh-fast) var(--bwh-ease),
      color var(--bwh-fast) var(--bwh-ease);
  }

  .wp-block-navigation__responsive-container-close svg {
    width: 20px;
    height: 20px;
    transition: transform var(--bwh-dur-base) var(--bwh-ease);
  }

  .wp-block-navigation__responsive-container-close:active {
    transform: scale(0.94);
  }

  @media (hover: hover) and (pointer: fine) {
    .wp-block-navigation__responsive-container-close:hover {
      background: var(--bwh-purple);
      border-color: var(--bwh-purple);
      color: #ffffff;
    }

    .wp-block-navigation__responsive-container-close:hover svg {
      transform: rotate(90deg);
    }
  }

  /* 42.6 Rows: left aligned, full width, one tap target each, hairline
     separators, and no header underline (that rule belongs to the desktop
     row). */
  .wp-block-navigation__responsive-container
    .wp-block-navigation__responsive-container-content {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding: 6px 14px 8px;
  }

  /* The header builds its list with items-justified-right, which computes to
     align-items: flex-end in this column flexbox: rows shrink to their label
     and hug the right edge. Inside the drawer the list must read as a menu,
     so every row stretches full width and starts at the left margin. */
  .wp-block-navigation__responsive-dialog .wp-block-navigation__container {
    gap: 0;
    width: 100%;
    padding: 0;
    align-items: stretch;
    justify-content: flex-start;
  }

  .wp-block-navigation__responsive-dialog .wp-block-navigation__container > li {
    width: 100%;
    align-items: stretch;
    justify-content: flex-start;
    border-bottom: 1px solid rgba(17, 17, 17, 0.06);
    opacity: 0;
    transform: translateY(10px);
    transition:
      opacity var(--bwh-dur-base) var(--bwh-ease),
      transform var(--bwh-dur-base) var(--bwh-ease);
  }

  .wp-block-navigation__responsive-dialog
    .wp-block-navigation__container > li:last-child {
    border-bottom: 0;
  }

  .wp-block-navigation__responsive-container.has-modal-open
    .wp-block-navigation__responsive-dialog .wp-block-navigation__container > li {
    opacity: 1;
    transform: none;
  }

  /* Cascade: 40ms apart, short enough that the list never feels queued
     (emil-design-eng, stagger 30-80ms). Delays apply only in the open state,
     so rows fade together on the way out. */
  .wp-block-navigation__responsive-container.has-modal-open
    .wp-block-navigation__responsive-dialog
    .wp-block-navigation__container
    > li:nth-child(1) { transition-delay: 50ms; }
  .wp-block-navigation__responsive-container.has-modal-open
    .wp-block-navigation__responsive-dialog
    .wp-block-navigation__container
    > li:nth-child(2) { transition-delay: 90ms; }
  .wp-block-navigation__responsive-container.has-modal-open
    .wp-block-navigation__responsive-dialog
    .wp-block-navigation__container
    > li:nth-child(3) { transition-delay: 130ms; }
  .wp-block-navigation__responsive-container.has-modal-open
    .wp-block-navigation__responsive-dialog
    .wp-block-navigation__container
    > li:nth-child(4) { transition-delay: 170ms; }
  .wp-block-navigation__responsive-container.has-modal-open
    .wp-block-navigation__responsive-dialog
    .wp-block-navigation__container
    > li:nth-child(5) { transition-delay: 210ms; }
  .wp-block-navigation__responsive-container.has-modal-open
    .wp-block-navigation__responsive-dialog
    .wp-block-navigation__container
    > li:nth-child(6) { transition-delay: 250ms; }
  .wp-block-navigation__responsive-container.has-modal-open
    .wp-block-navigation__responsive-dialog
    .wp-block-navigation__container
    > li:nth-child(n + 7) { transition-delay: 290ms; }

  .wp-block-navigation__responsive-container
    .wp-block-navigation__responsive-dialog
    a.wp-block-navigation-item__content {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    min-height: 54px;
    padding: 0 16px;
    border-radius: var(--bwh-radius-md);
    font-size: 1.1875rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--bwh-ink);
    text-transform: capitalize;
    background: transparent;
    transition:
      background-color var(--bwh-fast) var(--bwh-ease),
      color var(--bwh-fast) var(--bwh-ease),
      transform var(--bwh-fast) var(--bwh-ease);
  }

  /* The desktop row draws a scaleX underline; inside the drawer that would
     double the hairline divider, so it is retired here. */
  .wp-block-navigation__responsive-container
    .wp-block-navigation__responsive-dialog
    a.wp-block-navigation-item__content::after {
    display: none;
  }

  /* Where the visitor already stands: brand tint plus a 3px rail. */
  .wp-block-navigation__responsive-container
    .wp-block-navigation__responsive-dialog
    a.wp-block-navigation-item__content[aria-current="page"] {
    color: var(--bwh-purple);
    background: rgba(127, 31, 166, 0.07);
    box-shadow: inset 3px 0 0 var(--bwh-purple);
  }

  @media (hover: hover) and (pointer: fine) {
    .wp-block-navigation__responsive-container
      .wp-block-navigation__responsive-dialog
      a.wp-block-navigation-item__content:hover {
      color: var(--bwh-purple);
      background: rgba(127, 31, 166, 0.06);
      transform: translateX(4px);
    }
  }

  .wp-block-navigation__responsive-container
    .wp-block-navigation__responsive-dialog
    a.wp-block-navigation-item__content:active {
    transform: scale(0.99);
    transition-duration: var(--bwh-dur-press);
  }

  /* 42.7 Furniture injected by refine.js initMobileDrawer(): the brand row
     keeps the identity at the top, the footer holds one call to action. */
  .bwh-drawer-brand {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: 0 68px 8px 18px;
  }

  .bwh-drawer-brand img {
    max-height: 34px;
    width: auto;
  }

  .bwh-drawer-foot {
    display: block;
    padding: 14px 18px calc(4px + env(safe-area-inset-bottom));
    border-top: 1px solid rgba(17, 17, 17, 0.06);
  }

  .bwh-drawer-foot .wp-block-button,
  .bwh-drawer-foot .wp-block-buttons {
    width: 100%;
  }

  .bwh-drawer-foot .wp-block-button__link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 50px;
    text-align: center;
  }

  /* 42.8 Reduced motion: the sheet still appears and disappears, it simply
     stops travelling, and the rows stop staggering (movement removed, state
     kept). */
  @media (prefers-reduced-motion: reduce) {
    .wp-block-navigation__responsive-dialog,
    .wp-block-navigation__responsive-container.has-modal-open
      .wp-block-navigation__responsive-dialog {
      transform: none !important;
      transition: none !important;
    }

    .wp-block-navigation__responsive-dialog
      .wp-block-navigation__container > li,
    .wp-block-navigation__responsive-container.has-modal-open
      .wp-block-navigation__responsive-dialog
      .wp-block-navigation__container > li {
      opacity: 1;
      transform: none;
      transition: none;
    }

    .wp-block-navigation__responsive-container-close svg {
      transition: none;
    }
  }
}

/* ==========================================================================
   43. Founder card: type, measure and rhythm
   ==========================================================================

   The cover-wide text shadows from section 5 exist for white copy over
   photography. The founder card is a white plate inside the same cover, so
   those shadows read as a smudge behind every letter (measured:
   0 2px 8px rgba(8,4,16,.35) on the heading, 0 1px 2px on body copy).

   The stacked paddings also ate the measure: cover 16.8px + wrapper
   31.24px + card 24px per side left the body column 246px wide at 390px,
   about 30 characters, which is why the block read as text crammed into a
   box. Those three insets collapse to 0 / 16 / 18 on phones, giving the
   same card a 322px measure (about 44 characters) and a shorter block. */

.wp-block-cover .wp-block-columns.has-base-2-background-color h1,
.wp-block-cover .wp-block-columns.has-base-2-background-color h2,
.wp-block-cover .wp-block-columns.has-base-2-background-color h3,
.wp-block-cover .wp-block-columns.has-base-2-background-color h4,
.wp-block-cover .wp-block-columns.has-base-2-background-color p,
.wp-block-cover .wp-block-columns.has-base-2-background-color li,
.wp-block-cover .wp-block-columns.has-base-2-background-color a {
  text-shadow: none !important;
}

@media (max-width: 767px) {
  /* Measure first: remove the two outer insets, keep 16px of gutter so the
     plate still floats on the purple. */
  .wp-block-cover:has(.wp-block-columns.has-base-2-background-color) {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .wp-block-cover:has(.wp-block-columns.has-base-2-background-color)
    > .wp-block-cover__inner-container
    > .wp-block-group.has-global-padding {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  .wp-block-cover:has(.wp-block-columns.has-base-2-background-color)
    .wp-block-column
    > .wp-block-group.has-global-padding {
    padding: 20px 18px !important;
  }

  /* Type: a two-line heading needs air, and body copy needs a rhythm that
     survives a narrow column. */
  .wp-block-cover:has(.wp-block-columns.has-base-2-background-color)
    .wp-block-column
    h2 {
    font-size: 1.5rem !important;
    line-height: 1.2 !important;
    margin-bottom: 12px !important;
  }

  .wp-block-cover:has(.wp-block-columns.has-base-2-background-color)
    .wp-block-column
    p {
    font-size: 1rem;
    line-height: 1.6;
    margin-top: 0 !important;
    margin-bottom: 14px !important;
  }

  .wp-block-cover:has(.wp-block-columns.has-base-2-background-color)
    .wp-block-column
    p:last-of-type {
    margin-bottom: 0 !important;
  }
}

/* ==========================================================================
   44. Desktop navigation rhythm
   ==========================================================================

   Measured at 1440: six links, each 44px tall, 28px apart, centred on the
   72px bar, join button at x=1165. Two details read cheap at that size:
   15px is small for a primary nav, and the draw-in underline was positioned
   4px off the padded 44px box, which puts it about 8px under the label
   instead of optically attached to it. Both are corrected without touching
   the hover or current-page logic from section 4. */

@media (min-width: 768px) {
  nav .wp-block-navigation-item__content,
  nav .wp-block-navigation-item__content:visited {
    font-size: 1rem;
    letter-spacing: -0.005em;
  }

  nav a.wp-block-navigation-item__content::after {
    bottom: 9px;
  }
}

/* 44b. The 600-767 single-band range

   Between 600 and 767 core hides the hamburger and shows logo, inline nav
   and the Join Us button in one space-between row, but the full set of six
   labels (447px at the 15px type) plus the logo, the button and the 19.2px
   layout gap demanded more than the 576px row could hold. Flex shrank the
   logo and wrapped the list, so the header stood 136px tall with the last
   two labels on a second row. Five dials come in together so the whole set
   fits on one 64px band: layout gap 12, logo capped at 30px tall (it
   rendered at about 31px here anyway once shrunk), labels at 14px with a
   14px list gap, and 16px of horizontal padding on the header button. The
   button keeps its 44px tap height, the drawer below 600 and the 16px
   desktop type above 768 are untouched. */
@media (min-width: 600px) and (max-width: 767px) {
  .sticky-wrapper .wp-block-group.is-content-justification-space-between {
    gap: 12px !important;
  }

  .sticky-wrapper .wp-block-site-logo img {
    max-height: 30px;
  }

  .wp-block-navigation__responsive-container .wp-block-navigation__container {
    gap: 14px !important;
  }

  nav .wp-block-navigation-item__content,
  nav .wp-block-navigation-item__content:visited {
    font-size: 14px;
  }

  .sticky-wrapper .wp-block-button__link {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}

/* ==========================================================================
   45. About page icon + text callout: stack on narrow screens
   ==========================================================================

   The About intro is a nowrap flex row: a 70px decorative figure beside a
   text group. At 390px the figure and its gap eat the line, leaving the
   paragraph a 245px measure with 89px of dead space to its left. Below the
   tablet breakpoint the row stacks, so the figure sits above the copy and
   the text reclaims the full card width (334px). Scoped with :has(> figure)
   so only this callout matches; no other base-2 flex row exists on the site. */

@media (max-width: 767px) {
  .wp-block-group.has-base-2-background-color.is-nowrap:has(> figure.wp-block-image) {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  .wp-block-group.has-base-2-background-color.is-nowrap:has(> figure.wp-block-image)
    > figure.wp-block-image {
    margin: 0;
  }

  .wp-block-group.has-base-2-background-color.is-nowrap:has(> figure.wp-block-image)
    > .wp-block-group {
    width: 100%;
  }
}