/* Brand fonts (@font-face) + design tokens (:root) live in the shared
 * osborn-platform/assets/osborn-tokens.css (handle 'osborn-platform-tokens',
 * enqueued globally). This file consumes them via var() and must not redefine
 * them, so the homepage and Watch routes share one source of truth. */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 96px;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--bgea-sans);
  /* Normalize fallback x-height to the web font so the swap doesn't shift text. */
  font-size-adjust: from-font;
  font-size: 17px;
  line-height: 1.55;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

body.osborn-route-owns-css {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}

body.osborn-route-owns-css > #content {
  width: 100%;
  flex: 1 0 auto;
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  display: block;
  max-width: 100%;
}

button {
  font: inherit;
}

:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 4px;
}

.skip-link {
  position: fixed;
  top: 14px;
  left: 14px;
  z-index: 1000;
  padding: 10px 14px;
  background: var(--ink);
  color: var(--white);
  transform: translateY(-180%);
}

.skip-link:focus {
  transform: translateY(0);
}

.visually-hidden,
.nav-toggle,
.filter-input {
  position: absolute;
  overflow: hidden;
  width: 1px;
  height: 1px;
  padding: 0;
  border: 0;
  margin: -1px;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

.utility-bar {
  display: flex;
  justify-content: center;
  gap: 28px;
  padding: 8px 18px;
  margin: 0;
  margin-block: 0;
  background: var(--navy);
  color: var(--white);
  font-size: 0.84rem;
  list-style: none;
}

.utility-bar > li {
  position: relative;
  padding: 0;
  margin: 0;
  list-style: none;
}

.utility-bar > li::marker {
  content: "";
}

.utility-bar a {
  display: block;
  opacity: 0.92;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(247, 247, 243, 0.96);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(16px);
}

body.admin-bar {
  --osborn-admin-bar-height: var(--wp-admin--admin-bar--height, 32px);
}

body.admin-bar .site-header {
  top: var(--osborn-admin-bar-height);
}

.site-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: var(--max);
  min-height: 78px;
  margin: 0 auto;
  padding: 0 24px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  font-weight: 800;
  color: var(--navy);
}

.brand img {
  width: 156px;
  height: auto;
}

.brand span {
  padding-left: 12px;
  border-left: 1px solid var(--line);
  font-size: 0.95rem;
  text-transform: uppercase;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 0;
  margin: 0;
  margin-block: 0;
  font-weight: 700;
  list-style: none;
}

.nav-links > li {
  position: relative;
  padding: 0;
  margin: 0;
  list-style: none;
}

.nav-links > li::marker {
  content: "";
}

.nav-links a {
  position: relative;
  display: block;
  padding: 10px 0;
}

.nav-links a::after {
  position: absolute;
  right: 0;
  bottom: 3px;
  left: 0;
  height: 2px;
  background: var(--red);
  content: "";
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 180ms ease;
}

.nav-links a:hover::after,
.nav-links a:focus-visible::after {
  transform: scaleX(1);
}

.nav-links .give-link {
  padding: 10px 18px;
  background: var(--red);
  border-radius: var(--radius);
  color: var(--white);
}

.give-link::after {
  display: none;
}

.mobile-persistent-links {
  display: none;
  align-items: center;
  gap: 12px;
  padding: 0;
  margin: 0 0 0 auto;
  list-style: none;
}

.mobile-persistent-links > li {
  padding: 0;
  margin: 0;
  list-style: none;
}

.mobile-persistent-links > li::marker {
  content: "";
}

.menu-title-text {
  position: relative;
}

.menu-item-has-icon > a {
  display: inline-flex;
  align-items: center;
  gap: var(--osborn-menu-icon-spacing, 8px);
}

.nectar-menu-icon {
  flex: 0 0 auto;
  font-size: var(--osborn-menu-icon-size, 1em);
  line-height: 1;
}

.nectar-menu-icon-img {
  flex: 0 0 auto;
  width: var(--osborn-menu-icon-size, 20px);
  height: auto;
}

.osborn-menu-icon-above > a {
  align-items: flex-start;
  flex-direction: column;
}

.nav-links > .menu-item-btn-style-regular > a,
.utility-bar > .menu-item-btn-style-regular > a,
.mobile-persistent-links > .menu-item-btn-style-regular > a {
  padding: 10px 18px;
  background: var(--osborn-menu-button-bg, var(--red));
  border-radius: var(--radius);
  color: var(--osborn-menu-button-text, var(--white));
  text-align: center;
  transition: background-color 180ms ease, color 180ms ease;
}

.nav-links > .menu-item-btn-style-regular > a:hover,
.nav-links > .menu-item-btn-style-regular > a:focus-visible,
.utility-bar > .menu-item-btn-style-regular > a:hover,
.utility-bar > .menu-item-btn-style-regular > a:focus-visible,
.mobile-persistent-links > .menu-item-btn-style-regular > a:hover,
.mobile-persistent-links > .menu-item-btn-style-regular > a:focus-visible {
  background: var(--osborn-menu-button-bg-hover, var(--osborn-menu-button-bg, var(--red)));
  color: var(--osborn-menu-button-text-hover, var(--osborn-menu-button-text, var(--white)));
}

.nav-links > .menu-item-btn-style-border > a,
.utility-bar > .menu-item-btn-style-border > a,
.mobile-persistent-links > .menu-item-btn-style-border > a {
  padding: 9px 17px;
  border: 1px solid var(--osborn-menu-button-border, currentColor);
  border-radius: var(--radius);
  color: var(--osborn-menu-button-border-text, currentColor);
  text-align: center;
  transition: border-color 180ms ease, color 180ms ease;
}

.nav-links > .menu-item-btn-style-border > a:hover,
.nav-links > .menu-item-btn-style-border > a:focus-visible,
.utility-bar > .menu-item-btn-style-border > a:hover,
.utility-bar > .menu-item-btn-style-border > a:focus-visible,
.mobile-persistent-links > .menu-item-btn-style-border > a:hover,
.mobile-persistent-links > .menu-item-btn-style-border > a:focus-visible {
  border-color: var(--osborn-menu-button-border-hover, var(--osborn-menu-button-border, currentColor));
}

.nav-links > [class*="menu-item-btn-style"] > a::after,
.utility-bar > [class*="menu-item-btn-style"] > a::after,
.mobile-persistent-links > [class*="menu-item-btn-style"] > a::after {
  display: none;
}

.nectar-text-reveal-button {
  display: block;
  overflow: hidden;
  line-height: 1.3;
}

.nectar-text-reveal-button__text {
  position: relative;
  display: block;
  transition: transform 550ms cubic-bezier(0.25, 1, 0.33, 1);
}

.nectar-text-reveal-button__text::after {
  position: absolute;
  top: 115%;
  left: 0;
  content: attr(data-text);
}

.menu-item-hover-text-reveal > a:hover .nectar-text-reveal-button__text,
.menu-item-hover-text-reveal > a:focus-visible .nectar-text-reveal-button__text {
  transform: translateY(-115%);
}

.menu-item-hover-text-reveal-wave .char {
  display: inline-block;
  transition: transform 380ms cubic-bezier(0.25, 1, 0.33, 1);
  transition-delay: calc(var(--osborn-char-index, 0) * 22ms);
}

.menu-item-hover-text-reveal-wave > a:hover .char,
.menu-item-hover-text-reveal-wave > a:focus-visible .char {
  transform: translateY(-18%);
}

.submenu-toggle {
  display: none;
}

.nav-links .sub-menu,
.utility-bar .sub-menu,
.osborn-menu-megamenu {
  position: absolute;
  top: calc(100% + 8px);
  z-index: 120;
  min-width: 220px;
  padding: 12px;
  margin: 0;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  color: var(--ink);
  list-style: none;
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
  transition: opacity 160ms ease, transform 160ms ease;
}

.nav-links .sub-menu,
.nav-links .osborn-menu-megamenu {
  right: 0;
}

.utility-bar .sub-menu,
.utility-bar .osborn-menu-megamenu {
  left: 0;
}

.nav-links .sub-menu li,
.utility-bar .sub-menu li {
  padding: 0;
  margin: 0;
  list-style: none;
}

.nav-links .sub-menu a,
.utility-bar .sub-menu a {
  padding: 10px 12px;
  white-space: nowrap;
}

.nav-links li:hover > .sub-menu,
.nav-links li:focus-within > .sub-menu,
.nav-links li:hover > .osborn-menu-megamenu--desktop,
.nav-links li:focus-within > .osborn-menu-megamenu--desktop,
.utility-bar li:hover > .sub-menu,
.utility-bar li:focus-within > .sub-menu,
.utility-bar li:hover > .osborn-menu-megamenu--desktop,
.utility-bar li:focus-within > .osborn-menu-megamenu--desktop {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.nectar-megamenu-menu-item > .sub-menu,
.nectar-megamenu-menu-item > .osborn-menu-megamenu {
  width: min(760px, calc(100vw - 48px));
}

.osborn-menu-megamenu--mobile {
  display: none;
}

.menu-button {
  display: none;
  place-items: center;
  width: 46px;
  height: 46px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
  cursor: pointer;
}

.nav-toggle:focus-visible + .menu-button {
  outline: 3px solid var(--gold);
  outline-offset: 4px;
}

.menu-button span[aria-hidden="true"] {
  grid-area: 1 / 1;
  display: block;
  width: 20px;
  height: 2px;
  margin: 0;
  background: var(--ink);
  transition: transform 160ms ease;
}

.menu-button .visually-hidden {
  display: block;
}

.menu-button span:nth-of-type(2) {
  transform: translateY(-3.5px);
}

.menu-button span:nth-of-type(3) {
  transform: translateY(3.5px);
}

.nav-toggle:checked + .menu-button span:nth-of-type(2) {
  transform: rotate(45deg);
}

.nav-toggle:checked + .menu-button span:nth-of-type(3) {
  transform: rotate(-45deg);
}

.hero {
  position: relative;
  min-height: 76svh;
  /* The Pagefind panel is positioned below the search form. Keep it visible
     beyond the hero boundary so the following ticker cannot clip the results.
     Hero media is explicitly sized to this box and does not rely on overflow
     clipping for containment. */
  overflow: visible;
  background: var(--navy);
  color: var(--white);
}

.hero-image,
.hero-overlay {
  position: absolute;
  inset: 0;
}

.hero-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Right-anchored to match the video: LaDonna is at the right edge and the
     smiling man sits right-of-center, so on portrait/tablet crops keep the right
     side in view. Desktop crops vertically, so the horizontal anchor is a no-op
     there and the wide showcase framing is unchanged. */
  object-position: right 44%;
}

/* Adaptive hero preview injected immediately only for a positively fast,
   desktop-class connection. It sits above the static image and below the
   overlay gradient, then fades in after the first decoded video frame so the
   poster stays the LCP/fallback. ?hero_video=0 hard-disables the preview. */
.hero-video {
  position: absolute;
  /* The video is sized 4px smaller than the hero (box = hero - 4px) so the
     full-size static <img> poster stays the strictly-larger, earlier-painting
     LCP candidate — a decorative background video must never become the LCP.
     (Measured: a full-size video edged the poster out and pushed LCP ~3.5s ->
     ~4.8s.) The 4px gap is anchored to the LEFT and BOTTOM edges (top:0; right:0),
     where the hero-overlay gradient is darkest (left .91 / bottom .74 navy) and
     the poster can't be seen through it. The TOP and RIGHT edges — where the
     overlay is nearly clear — are now covered flush by the video, so the poster
     no longer bleeds through there as a visible slice.
     IMPORTANT: a <video> is a REPLACED element, so offsets alone do NOT stretch
     it — width/height MUST be explicit for object-fit: cover to engage (with auto
     it falls back to the intrinsic 1280x720 / 854x480 and the poster shows
     through the gap). */
  top: 0;
  right: 0;
  width: calc(100% - 4px);
  height: calc(100% - 4px);
  object-fit: cover;
  /* Right-anchored: LaDonna sits at the right edge of the frame, so on cropped
     (portrait/tablet) viewports keep the right side in view. */
  object-position: right 50%;
  opacity: 0;
  transition: opacity 0.8s ease;
  pointer-events: none;
}

.hero.hero-video-on .hero-video {
  opacity: 1;
}

@media (max-width: 1024px) {
  .hero-video {
    object-position: right 48%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-video {
    display: none !important;
  }
}

/* Also skip the decorative clip for explicit data-savers (the pay-per-MB
   audience). prefers-reduced-data ships in no UA on-by-default today, so this is
   a zero-cost forward-looking net layered on the Save-Data JS gate; the JS
   guard in hero-video.js prevents the fetch, this hides the element if injected. */
@media (prefers-reduced-data: reduce) {
  .hero-video {
    display: none !important;
  }
}

.hero-overlay {
  background:
    linear-gradient(
      90deg,
      rgba(13, 48, 71, 0.91),
      rgba(13, 48, 71, 0.58) 46%,
      rgba(13, 48, 71, 0.2)
    ),
    linear-gradient(0deg, rgba(13, 48, 71, 0.74), rgba(13, 48, 71, 0.08) 50%);
}

.hero-content {
  position: relative;
  z-index: 1;
  width: min(660px, calc(100% - 48px));
  padding: 96px 0 104px;
  margin-left: max(24px, calc((100vw - var(--max)) / 2 + 24px));
}

.eyebrow {
  margin: 0 0 14px;
  color: var(--gold);
  font-size: 0.78rem;
  font-weight: 900;
  text-transform: uppercase;
}

.hero h1,
.section-heading h2,
.watch-copy h2,
.leaders-copy h2,
.connect h2 {
  margin: 0;
  font-family: var(--bgea-serif);
  font-weight: 700;
  line-height: 1.05;
}

.hero h1 {
  max-width: 620px;
  font-size: 4.5rem;
}

.hero-copy {
  max-width: 560px;
  margin: 24px 0 0;
  color: rgba(255, 255, 255, 0.9);
  font-size: 1.2rem;
}

.hero-actions,
.connect-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 32px;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 12px 20px;
  border-radius: var(--radius);
  font-weight: 900;
  line-height: 1.1;
  transition: color 160ms ease;
}

.button-primary {
  --button-foreground: var(--white);
  background: var(--red);
  color: var(--button-foreground);
}

.button-secondary {
  --button-foreground: var(--navy);
  --button-hover-foreground: var(--red);
  background: var(--white);
  color: var(--button-foreground);
}

.button-outline {
  --button-foreground: var(--navy);
  border: 1px solid currentColor;
  color: var(--button-foreground);
}

/* Nectar's parent theme applies `a:hover { color: inherit }` with more
 * specificity than the resting variant classes above. Keep each button state
 * tied to its own accessible foreground instead of inheriting the surrounding
 * section color. Variants can opt into a distinct hover/press foreground. */
a.button:is(:visited, :focus) {
  color: var(--button-foreground, inherit);
}

a.button:is(:hover, :active) {
  color: var(--button-hover-foreground, var(--button-foreground, inherit));
}

.hero-feature {
  position: absolute;
  right: max(24px, calc((100vw - var(--max)) / 2 + 24px));
  bottom: 34px;
  z-index: 1;
  width: 340px;
  padding: 22px;
  background: rgba(255, 255, 255, 0.94);
  border-left: 5px solid var(--gold);
  border-radius: var(--radius);
  color: var(--ink);
  box-shadow: var(--shadow);
}

.hero-feature span,
.hero-feature a,
.watch-card p,
.feature-article p,
.article-list span,
.pathway span {
  font-size: 0.78rem;
  font-weight: 900;
  text-transform: uppercase;
}

.hero-feature strong {
  display: block;
  margin: 8px 0 12px;
  font-family: var(--bgea-serif);
  font-size: 1.35rem;
  line-height: 1.1;
}

.hero-feature a,
.watch-card a,
.feature-article a,
.leader-list a {
  color: var(--red);
  font-weight: 900;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

.ticker {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-bottom: 1px solid var(--line);
  background: var(--white);
}

.ticker a {
  min-height: 74px;
  padding: 18px 22px;
  border-right: 1px solid var(--line);
  color: var(--navy);
  font-weight: 900;
}

.ticker a:last-child {
  border-right: 0;
}

.section {
  max-width: var(--max);
  margin: 0 auto;
  padding: 86px 24px;
}

.section-heading {
  max-width: 720px;
  margin-bottom: 34px;
}

.section-heading h2,
.watch-copy h2,
.leaders-copy h2,
.connect h2 {
  font-size: 2.75rem;
  color: var(--navy);
}

.pathway-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.pathway {
  display: grid;
  grid-template-rows: 220px 1fr;
  overflow: hidden;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.pathway img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: var(--soft);
}

.pathway div {
  padding: 22px;
}

.pathway h3,
.watch-card h3,
.feature-article h3,
.leader-list h3 {
  margin: 4px 0 10px;
  font-family: var(--bgea-serif);
  line-height: 1.12;
}

.pathway h3 {
  font-size: 1.55rem;
}

.pathway p,
.watch-copy p,
.leaders-copy p {
  margin: 0;
  color: var(--muted);
}

.watch-panel {
  display: grid;
  grid-template-columns: 0.78fr 1.22fr;
  gap: 34px;
  max-width: none;
  padding-right: max(24px, calc((100vw - var(--max)) / 2 + 24px));
  padding-left: max(24px, calc((100vw - var(--max)) / 2 + 24px));
  background: var(--navy);
  color: var(--white);
}

.watch-copy {
  align-self: start;
  position: sticky;
  top: 112px;
}

.watch-copy h2 {
  color: var(--white);
}

.watch-copy p:not(.eyebrow) {
  margin-top: 18px;
  color: rgba(255, 255, 255, 0.82);
}

.watch-browser {
  grid-column: 2;
  display: grid;
  gap: 18px;
}

.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-self: start;
}

.filter-button {
  min-height: 42px;
  padding: 9px 15px;
  border: 1px solid rgba(255, 255, 255, 0.34);
  border-radius: var(--radius);
  background: transparent;
  color: var(--white);
  cursor: pointer;
  font-weight: 900;
  text-transform: uppercase;
}

.filter-button.is-active {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--ink);
}

.watch-browser:has(#filter-all:checked) .filter-button[for="filter-all"],
.watch-browser:has(#filter-evangelism:checked) .filter-button[for="filter-evangelism"],
.watch-browser:has(#filter-healing:checked) .filter-button[for="filter-healing"],
.watch-browser:has(#filter-training:checked) .filter-button[for="filter-training"] {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--ink);
}

.watch-browser:has(#filter-all:focus-visible) .filter-button[for="filter-all"],
.watch-browser:has(#filter-evangelism:focus-visible) .filter-button[for="filter-evangelism"],
.watch-browser:has(#filter-healing:focus-visible) .filter-button[for="filter-healing"],
.watch-browser:has(#filter-training:focus-visible) .filter-button[for="filter-training"] {
  outline: 3px solid var(--gold);
  outline-offset: 4px;
}

.watch-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}

.watch-card {
  overflow: hidden;
  background: var(--white);
  border-radius: var(--radius);
  color: var(--ink);
}

.watch-browser:has(#filter-evangelism:checked) .watch-card:not([data-category="evangelism"]),
.watch-browser:has(#filter-healing:checked) .watch-card:not([data-category="healing"]),
.watch-browser:has(#filter-training:checked) .watch-card:not([data-category="training"]) {
  display: none;
}

.watch-card img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: var(--soft);
}

.watch-card div {
  padding: 20px;
}

.watch-card p,
.feature-article p {
  margin: 0;
  color: var(--green);
}

.watch-card h3 {
  font-size: 1.35rem;
}

.browse {
  max-width: none;
  padding-right: max(24px, calc((100vw - var(--max)) / 2 + 24px));
  padding-left: max(24px, calc((100vw - var(--max)) / 2 + 24px));
  background: var(--soft);
}

.category-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}

.category-list a {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  min-height: 72px;
  padding: 22px;
  background: var(--white);
  color: var(--navy);
  font-weight: 900;
}

.category-list span {
  color: var(--red);
}

.article-layout {
  display: grid;
  grid-template-columns: 1.08fr 0.92fr;
  gap: 24px;
}

.feature-article {
  display: grid;
  grid-template-columns: 1fr 1fr;
  overflow: hidden;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.feature-article img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.feature-article div {
  padding: 28px;
}

.feature-article h3 {
  font-size: 2rem;
}

.article-list {
  display: grid;
  gap: 1px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--line);
}

.article-list a {
  display: grid;
  gap: 6px;
  min-height: 104px;
  padding: 22px;
  background: var(--white);
  color: var(--navy);
  font-family: var(--bgea-serif);
  font-size: 1.12rem;
  font-weight: 700;
  line-height: 1.18;
}

.article-list span {
  color: var(--muted);
  font-family: var(--bgea-sans);
}

.leaders {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 28px;
  border-top: 1px solid var(--line);
}

.leaders-copy p:not(.eyebrow) {
  margin-top: 18px;
}

.leader-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}

.leader-list article {
  display: grid;
  grid-template-columns: 96px 1fr;
  align-items: center;
  gap: 18px;
  padding: 20px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.leader-list img {
  width: 96px;
  height: 96px;
  object-fit: cover;
  border-radius: 50%;
}

.leader-list h3 {
  margin-bottom: 8px;
  font-size: 1.25rem;
}

.connect {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  max-width: none;
  padding-right: max(24px, calc((100vw - var(--max)) / 2 + 24px));
  padding-left: max(24px, calc((100vw - var(--max)) / 2 + 24px));
  background: var(--green);
  color: var(--white);
}

.connect h2 {
  max-width: 760px;
  color: var(--white);
}

.connect .button-outline {
  --button-foreground: var(--white);
  color: var(--button-foreground);
}

.site-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  padding: 30px max(24px, calc((100vw - var(--max)) / 2 + 24px));
  background: var(--ink);
  color: var(--white);
}

.footer-brand {
  font-family: var(--bgea-serif);
  font-size: 1.3rem;
  font-weight: 700;
}

.site-footer nav {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
}

@media (max-width: 980px) {
  /* Keep the mobile navigation attached to the viewport. A sticky header stops
   * sticking when opening the menu changes the document scroll container in
   * mobile Safari, which can move both the close button and panel offscreen. */
  html body {
    padding-top: 71px;
  }

  .site-header {
    position: fixed;
    right: 0;
    left: 0;
  }

  html:has(#nav-toggle:checked),
  body:has(#nav-toggle:checked) {
    overflow-y: hidden;
    overscroll-behavior: none;
  }

  .utility-bar {
    display: none;
  }

  .site-nav {
    gap: 12px;
    min-height: 70px;
  }

  .mobile-persistent-links {
    display: flex;
  }

  .mobile-persistent-links > li > a {
    padding: 8px 10px;
    font-size: 0.88rem;
    font-weight: 700;
  }

  .menu-button {
    display: grid;
    flex: 0 0 auto;
  }

  .nav-links {
    position: fixed;
    top: 70px;
    right: 0;
    left: 0;
    display: grid;
    gap: 0;
    max-height: calc(100vh - 70px);
    max-height: calc(100dvh - 70px);
    overflow-y: auto;
    padding: 12px 24px 24px;
    background: var(--paper);
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow);
    overscroll-behavior: contain;
    transform: translateY(-130%);
    transition: transform 180ms ease;
  }

  .nav-links > li {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
  }

  .nav-links > li > a {
    grid-column: 1;
  }

  .nav-links > .osborn-mobile-persistent-item {
    display: none;
  }

  body.admin-bar .nav-links {
    max-height: calc(100vh - 70px - var(--osborn-admin-bar-height));
    max-height: calc(100dvh - 70px - var(--osborn-admin-bar-height));
  }

  .nav-links a {
    padding: 16px 0;
    border-bottom: 1px solid var(--line);
  }

  .nav-links .give-link {
    margin-top: 14px;
    text-align: center;
  }

  .nav-links > .menu-item-btn-style-regular,
  .nav-links > .menu-item-btn-style-border {
    margin-top: 14px;
  }

  .nav-links > .menu-item-btn-style-regular > a,
  .nav-links > .menu-item-btn-style-border > a {
    grid-column: 1 / -1;
  }

  .nav-links .submenu-toggle {
    grid-column: 2;
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    padding: 0;
    border: 0;
    border-radius: var(--radius);
    margin-left: 8px;
    background: transparent;
    color: var(--ink);
    cursor: pointer;
  }

  .nav-links .submenu-toggle::before {
    width: 9px;
    height: 9px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    content: "";
    transform: translateY(-2px) rotate(45deg);
    transition: transform 160ms ease;
  }

  .nav-links .submenu-toggle[aria-expanded="true"]::before {
    transform: translateY(2px) rotate(225deg);
  }

  .nav-links .sub-menu,
  .nav-links .osborn-menu-megamenu {
    position: static;
    grid-column: 1 / -1;
    display: none;
    width: 100%;
    min-width: 0;
    padding: 8px 0 8px 18px;
    border: 0;
    border-left: 2px solid var(--gold);
    border-radius: 0;
    box-shadow: none;
    opacity: 1;
    pointer-events: auto;
    transform: none;
  }

  .nav-links .osborn-menu-megamenu--desktop {
    display: none;
  }

  .nav-links .osborn-menu-megamenu--mobile {
    display: none;
  }

  .nav-links li.osborn-submenu-open > .sub-menu,
  .nav-links li.osborn-submenu-open > .osborn-menu-megamenu--mobile,
  .nav-links li.osborn-submenu-open > .osborn-menu-megamenu--desktop:only-of-type {
    display: block;
  }

  .nav-links .sub-menu a {
    padding: 12px 0;
  }

  .hero {
    min-height: auto;
  }

  .hero-content {
    width: auto;
    margin: 0;
    padding: 72px 24px 40px;
  }

  .hero h1 {
    font-size: 3.25rem;
  }

  .hero-feature {
    position: relative;
    inset: auto;
    width: auto;
    margin: 0 24px 24px;
  }

  .ticker,
  .pathway-grid,
  .category-list,
  .article-layout,
  .leaders,
  .leader-list {
    grid-template-columns: 1fr;
  }

  .ticker a {
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .watch-panel {
    grid-template-columns: 1fr;
  }

  .nav-toggle:checked ~ .nav-links {
    transform: translateY(0);
  }

  .watch-copy,
  .watch-browser {
    grid-column: auto;
  }

  .watch-copy {
    position: static;
  }

  .connect,
  .site-footer {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (max-width: 782px) {
  /* WordPress makes its mobile toolbar absolute, so it scrolls away while a
   * fixed site header keeps the toolbar-sized offset. Keep the authenticated
   * toolbar fixed so the two pieces of chrome remain contiguous. */
  html #wpadminbar {
    position: fixed;
  }

  body.admin-bar {
    --osborn-admin-bar-height: var(--wp-admin--admin-bar--height, 46px);
  }
}

@media (max-width: 640px) {
  body {
    font-size: 16px;
  }

  .brand img {
    width: 126px;
  }

  .brand span {
    font-size: 0.82rem;
  }

  .hero h1 {
    font-size: 2.45rem;
  }

  .hero-copy {
    font-size: 1.05rem;
  }

  .section {
    padding-top: 62px;
    padding-bottom: 62px;
  }

  .section-heading h2,
  .watch-copy h2,
  .leaders-copy h2,
  .connect h2 {
    font-size: 2.05rem;
  }

  .pathway {
    grid-template-rows: 180px 1fr;
  }

  .watch-grid,
  .feature-article {
    grid-template-columns: 1fr;
  }

  .leader-list article {
    grid-template-columns: 72px 1fr;
  }

  .leader-list img {
    width: 72px;
    height: 72px;
  }

  .button,
  .hero-actions,
  .connect-actions {
    width: 100%;
  }
}

/* ===== Osborn Watch v3 additions (on top of the BGEA stylesheet) ===== */
.hero .eyebrow{color:#e8c074;} /* lighter gold for AAA contrast on navy */
.eyebrow-ink{color:var(--red);} /* readable eyebrow on light sections */

/* Dark homepage panels need their own label color. The generic ink eyebrow is
 * intentionally red on light surfaces, but the same red/muted cascade failed
 * WCAG contrast on navy and green. */
.watch-panel .eyebrow-ink,
.connect .eyebrow-ink {
  color: var(--gold-on-navy);
}

/* ===== Native Search + 404 routes =====
 * These two server-rendered fallbacks are fully owned by the Osborn child
 * theme. Keep their complete layout here so the asset gate can safely remove
 * Nectar's parent/component CSS on these routes. */
.osborn-search-page,
.osborn-not-found-page {
  background: var(--paper);
  color: var(--ink);
}

.osborn-route-hero {
  padding: 72px 24px 58px;
  background: var(--navy);
  color: var(--white);
}

.osborn-route-hero__inner {
  width: min(100%, 900px);
  margin: 0 auto;
}

.osborn-route-hero .eyebrow-ink {
  color: var(--gold-on-navy);
}

.osborn-route-hero h1,
.osborn-route-empty h1 {
  margin: 0;
  font-family: var(--bgea-serif);
  font-size: clamp(2.35rem, 7vw, 4.5rem);
  line-height: 1.02;
}

.osborn-native-search {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  width: min(100%, 680px);
  margin-top: 30px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
  box-shadow: var(--shadow);
}

.osborn-native-search input,
.osborn-native-search button {
  min-height: 50px;
  border: 0;
  border-radius: calc(var(--radius) - 2px);
  font: inherit;
}

.osborn-native-search input {
  min-width: 0;
  padding: 0 14px;
  background: transparent;
  color: var(--ink);
}

.osborn-native-search button {
  padding: 0 24px;
  background: var(--ink);
  color: var(--white);
  cursor: pointer;
  font-weight: 900;
}

.osborn-search-results {
  width: min(100%, var(--max));
  min-height: 42vh;
  margin: 0 auto;
  padding: 52px 24px 86px;
}

.osborn-search-results__count {
  margin: 0 0 24px;
  color: var(--muted);
  font-weight: 700;
}

.osborn-search-results__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.osborn-search-result {
  margin: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
  box-shadow: 0 10px 28px rgba(18, 33, 42, 0.08);
}

.osborn-search-result__link {
  display: flex;
  height: 100%;
  flex-direction: column;
  align-items: flex-start;
  padding: 26px;
}

.osborn-search-result__type {
  color: var(--red-strong);
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.osborn-search-result h2 {
  margin: 8px 0 12px;
  color: var(--navy);
  font-size: clamp(1.45rem, 3vw, 2rem);
  line-height: 1.12;
}

.osborn-search-result p {
  margin: 0 0 22px;
  color: var(--muted);
}

.osborn-search-result__cta {
  margin-top: auto;
  color: var(--red-strong);
  font-weight: 900;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

.osborn-search-page .navigation.pagination {
  margin-top: 38px;
}

.osborn-search-page .nav-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.osborn-search-page .page-numbers {
  display: inline-flex;
  min-width: 44px;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  padding: 8px 12px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--white);
  color: var(--navy);
  font-weight: 800;
}

.osborn-search-page .page-numbers.current {
  border-color: var(--navy);
  background: var(--navy);
  color: var(--white);
}

.osborn-route-empty {
  width: min(100%, 760px);
  margin: 0 auto;
  text-align: center;
}

.osborn-search-results > .osborn-route-empty {
  padding: 42px 0;
}

.osborn-route-empty h2 {
  margin: 0 0 12px;
  color: var(--navy);
  font-size: clamp(1.8rem, 4vw, 2.8rem);
}

.osborn-route-empty p {
  margin: 0 auto 26px;
  color: var(--muted);
}

.osborn-route-empty--404 {
  padding: clamp(76px, 13vw, 150px) 24px;
}

.osborn-route-empty--404 .eyebrow-ink {
  color: var(--red-strong);
}

.osborn-route-empty--404 .osborn-native-search {
  margin-right: auto;
  margin-left: auto;
}

.osborn-route-empty__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 26px;
}

@media (max-width: 700px) {
  .osborn-search-results__grid {
    grid-template-columns: 1fr;
  }

  .osborn-native-search {
    grid-template-columns: 1fr;
  }
}

/* No-JS search merged into the BGEA hero (tagline dropped) */
.hero-search{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;max-width:560px;margin:24px 0 0;padding:8px;background:rgba(255,255,255,.94);border:1px solid var(--line);border-radius:9px;box-shadow:var(--shadow);}
.hero-search input,.hero-search button{min-height:50px;border:0;border-radius:6px;font:inherit;}
.hero-search input{min-width:0;background:transparent;padding:0 12px;color:var(--ink);}
.hero-search button{background:var(--ink);color:#fff;font-weight:900;text-transform:uppercase;font-size:.8rem;letter-spacing:.02em;padding:0 20px;cursor:pointer;}
@media (max-width:640px){.hero-search{grid-template-columns:1fr;}}

@media (prefers-reduced-motion: reduce){*{animation-duration:.001ms!important;transition-duration:.001ms!important;scroll-behavior:auto!important;}}