/* Arcadia additions — site-wide component styles.
   Loaded on every page after the Webflow stylesheet, so component-level
   changes here apply wherever the component is used. */

/* CTA content buttons (footer nav + home APPLY/SUPPORT panel)
   Hover: teal background, label scales up slightly, the angled-i arrow
   rotates 45° to point right, arrow shifts to parchment for contrast. */
.cta_content-item.content_button {
  position: relative;
  transition: background-color 0.35s ease;
}
.cta_content-item.content_button .cta-content_link {
  position: static; /* lets the stretched hit-area cover the whole cell */
  /* Guarantee a minimum gap between the label and the angled-i arrow so long
     words (SUPPORT / PARTNER) never touch the arrow on narrow panel columns
     (Pia, home panel feedback). Works alongside justify-content: space-between. */
  gap: 0.75rem;
}
.cta_content-item.content_button .cta-content_link::after {
  content: '';
  position: absolute;
  inset: 0;
  cursor: pointer;
}
.cta_content-item.content_button .cta-content_link > div:first-child {
  transition: transform 0.35s ease;
  transform-origin: left center;
}
.cta_content-item.content_button .icon_accent,
.cta_content-item.content_button .icon-color-accent {
  transition: transform 0.35s ease, color 0.35s ease;
}
.cta_content-item.content_button:hover {
  background-color: #259591;
}
.cta_content-item.content_button:hover .cta-content_link > div:first-child {
  transform: scale(1.04);
}
.cta_content-item.content_button:hover .icon_accent,
.cta_content-item.content_button:hover .icon-color-accent {
  transform: rotate(45deg);
  color: #fff7f2;
}

@media (prefers-reduced-motion: reduce) {
  .cta_content-item.content_button,
  .cta_content-item.content_button .cta-content_link > div:first-child,
  .cta_content-item.content_button .icon_accent {
    transition: none;
  }
  .cta_content-item.content_button:hover .cta-content_link > div:first-child {
    transform: none;
  }
}

/* Webflow staging badge — injected at runtime by webflow.js; not wanted on
   our self-hosted build. */
.w-webflow-badge {
  display: none !important;
}

/* Mission tagline — moved out of hero copy per Pia 2026-06-18; sits in its
   own quiet band below the hero photo + diagonal mask, above the CTA row.
   Uppercase Oswald to match brand voice, generous breathing room. */
.mission-tagline {
  text-align: center;
  padding: clamp(1.5rem, 4vh, 3rem) 0 clamp(1rem, 3vh, 2rem);
  background: #1b1b1b;
  /* The diagonal mask above is an SVG triangle whose bottom edge lands on a
     fractional device pixel, so that last row renders part-transparent. The
     hero heading is fixed and scrolls behind it, and its white letter-tops
     show through that row as a dotted line (Pia, 6 Aug and again 16 Sep).
     Pulling this solid band up two pixels covers the seam. Same colour as
     the mask, so nothing moves visually. */
  margin-top: -2px;
}
.mission-tagline p {
  font-family: Oswald, sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: clamp(0.85rem, 1.1vw, 1rem);
  color: #FFF7F2;
  margin: 0;
  font-weight: 500;
}

/* Nav dropdown (ABOUT) — dark brand panel, Oswald uppercase items, teal
   row-fill hover matching the CTA buttons, slide-down entrance. Edges are
   straight (per Pia 2026-06-18 — the angled-bottom edge read as messy). */
.navbar_dropdown-list.w-dropdown-list {
  background-color: #1b1b1b;
  min-width: 12rem;
  width: max-content;
  padding: 0.5rem 0;
  border: none;
}
.navbar_dropdown-list.w-dropdown-list.w--open {
  animation: arcadia-dropdown-in 0.28s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes arcadia-dropdown-in {
  from { opacity: 0; transform: translateY(-0.5rem); }
  to { opacity: 1; transform: translateY(0); }
}
.navbar_dropdown-link.w-dropdown-link {
  font-family: Oswald, sans-serif;
  text-transform: uppercase;
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0.03em;
  color: #fff7f2;
  padding: 0.8rem 1.4rem;
  transition: background-color 0.2s ease, padding-left 0.2s ease;
}
.navbar_dropdown-link.w-dropdown-link:hover,
.navbar_dropdown-link.w-dropdown-link:focus-visible {
  background-color: #259591;
  color: #fff7f2;
  padding-left: 1.8rem;
}
.navbar_dropdown-link.w-dropdown-link.w--current {
  color: #259591;
}
.navbar_dropdown-link.w-dropdown-link.w--current:hover {
  color: #fff7f2;
}
@media (prefers-reduced-motion: reduce) {
  .navbar_dropdown-list.w-dropdown-list.w--open { animation: none; }
  .navbar_dropdown-link.w-dropdown-link { transition: none; }
}

/* ---------- Accessibility widget + preference effects ---------- */
.a11y-widget {
  position: fixed;
  bottom: 1.25rem;
  left: 1.25rem;
  z-index: 9999;
  font-family: 'Public Sans', sans-serif;
}
.a11y-widget_toggle {
  width: 3.25rem;
  height: 3.25rem;
  border-radius: 50%;
  border: 2px solid #fff7f2;
  background: #259591;
  color: #fff7f2;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 18px rgba(27, 27, 27, 0.35);
  transition: transform 0.2s ease, background-color 0.2s ease;
}
.a11y-widget_toggle:hover { transform: scale(1.06); }
.a11y-widget_toggle:focus-visible,
.a11y-widget_option:focus-visible,
.a11y-widget_reset:focus-visible {
  outline: 3px solid #b6533e;
  outline-offset: 2px;
}
.a11y-widget_panel {
  position: absolute;
  bottom: 4rem;
  left: 0;
  width: 19rem;
  background: #1b1b1b;
  color: #fff7f2;
  padding: 1rem 1rem 1.4rem;
  box-shadow: 0 10px 35px rgba(27, 27, 27, 0.4);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 0.8rem), 0 100%);
}
.a11y-widget_title {
  font-family: Oswald, sans-serif;
  text-transform: uppercase;
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  margin-bottom: 0.6rem;
}
.a11y-widget_option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  width: 100%;
  background: none;
  border: 0;
  border-top: 1px solid rgba(255, 247, 242, 0.15);
  color: inherit;
  text-align: left;
  padding: 0.55rem 0.2rem;
  cursor: pointer;
  font: inherit;
}
.a11y-widget_label { display: block; font-size: 0.92rem; font-weight: 600; }
.a11y-widget_hint { display: block; font-size: 0.76rem; color: rgba(255, 247, 242, 0.65); }
.a11y-widget_switch {
  flex: 0 0 auto;
  width: 2.1rem;
  height: 1.15rem;
  border-radius: 1rem;
  background: rgba(255, 247, 242, 0.25);
  position: relative;
  transition: background-color 0.2s ease;
}
.a11y-widget_switch::after {
  content: '';
  position: absolute;
  top: 0.12rem;
  left: 0.14rem;
  width: 0.9rem;
  height: 0.9rem;
  border-radius: 50%;
  background: #fff7f2;
  transition: transform 0.2s ease;
}
.a11y-widget_option[aria-checked='true'] .a11y-widget_switch { background: #259591; }
.a11y-widget_option[aria-checked='true'] .a11y-widget_switch::after { transform: translateX(0.85rem); }
.a11y-widget_reset {
  margin-top: 0.8rem;
  background: none;
  border: 1px solid rgba(255, 247, 242, 0.4);
  color: inherit;
  font: inherit;
  font-size: 0.8rem;
  padding: 0.35rem 0.9rem;
  cursor: pointer;
}
.a11y-widget_reset:hover { border-color: #259591; color: #259591; }

/* preference effects */
html.a11y-text { font-size: 125%; }
html.a11y-contrast body { color: #000; }
html.a11y-contrast .text-color-white,
html.a11y-contrast [class*='color-scheme-4'] { color: #fff; }
html.a11y-contrast .a11y-widget_hint { color: #fff7f2; }
html.a11y-readable body,
html.a11y-readable p,
html.a11y-readable a,
html.a11y-readable div {
  font-family: Verdana, 'Public Sans', sans-serif !important;
  letter-spacing: 0.02em;
  word-spacing: 0.08em;
}
html.a11y-readable p { line-height: 1.8; }
html.a11y-motion *,
html.a11y-motion *::before,
html.a11y-motion *::after {
  animation-duration: 0.01ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.01ms !important;
}

/* Executive Leadership photo panel (leadership page) */
.leadership_grid_image {
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  transition: opacity 0.3s ease;
}

/* Executive Leadership photo panel stays in view while the list scrolls */
.leadership_grid_image-wrapper {
  position: sticky;
  top: 5.5rem;
  align-self: flex-start;
}

/* ---------- Forum: CMS article cards + article pages ---------- */
.arcadia-forum-card { cursor: pointer; }
.arcadia-forum-card .forum_list-item_content-image {
  background-color: #f0eae0;
  background-size: cover;
  background-position: center;
  min-height: 9rem;
  transition: transform 0.35s ease;
}
.arcadia-forum-card:hover .forum_list-item_content-image { transform: scale(1.02); }
.arcadia-forum-card:hover .text-size-regular { color: #259591; }
.forum_filter-item { cursor: pointer; }
.forum_filter-item.is-active { color: #259591; }

.arcadia-article_section { padding-top: 2rem; }
/* centred editorial column — header, hero and body all share one axis */
.arcadia-article_header {
  max-width: 46rem;
  margin: 0 auto;
  padding: clamp(6.5rem, 10vw, 8.5rem) 0 0;
  text-align: center;
}
.arcadia-article_back {
  display: inline-block;
  font-family: Oswald, sans-serif;
  text-transform: uppercase;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: #b6533e;
  margin-bottom: 2.2rem;
}
.arcadia-article_back:hover { color: #259591; }
.arcadia-article_meta {
  display: flex;
  justify-content: center;
  align-items: baseline;
  gap: 1rem;
  font-family: Oswald, sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.8rem;
  color: rgba(27, 27, 27, 0.55);
}
.arcadia-article_tag {
  font-weight: 600;
  letter-spacing: 0.14em;
  color: #259591;
}
.arcadia-article_title {
  font-size: clamp(2.4rem, 5vw, 3.75rem);
  line-height: 1.05;
  margin: 1rem 0 1.2rem;
}
.arcadia-article_dek {
  display: none;
}
.arcadia-article_byline {
  font-family: Oswald, sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.8rem;
  color: rgba(27, 27, 27, 0.6);
}
/* header divider — subtle rule replacing the parallelogram motif */
.arcadia-article_header::after {
  content: "";
  display: block;
  width: 3rem;
  height: 2px;
  margin: 2rem auto 0;
  background: rgba(27, 27, 27, 0.2);
}
.arcadia-article_hero {
  width: 100%;
  max-width: 58rem;
  max-height: 32rem;
  object-fit: cover;
  display: block;
  border-radius: 6px;
  margin: clamp(2rem, 4vw, 3rem) auto;
}
.arcadia-article_body {
  max-width: 42rem;
  margin: 0 auto;
  font-size: 1.1rem;
  line-height: 1.75;
  padding: 0.5rem 0 2rem;
  text-align: left;
}
.arcadia-article_body p { margin: 0 0 1.2rem; }
.arcadia-article_body h2, .arcadia-article_body h3 { margin: 2.4rem 0 0.8rem; line-height: 1.15; }
.arcadia-article_body a { color: #259591; text-decoration: underline; text-underline-offset: 3px; }
.arcadia-article_body blockquote {
  border: 0;
  border-top: 1px solid rgba(37, 149, 145, 0.45);
  border-bottom: 1px solid rgba(37, 149, 145, 0.45);
  margin: 2.4rem auto;
  padding: 1.4rem 0.5rem;
  font-style: italic;
  font-size: 1.3rem;
  line-height: 1.55;
  max-width: 34rem;
  text-align: center;
}
.arcadia-article_end {
  text-align: center;
  padding-bottom: clamp(3.5rem, 6vw, 5rem);
}
.arcadia-article_end .arcadia-article_back { margin-bottom: 0; }

/* filter pills: active state must stay legible on the teal pill */
.forum_filter-item.is-active {
  background-color: #1b1b1b !important;
  color: #fff7f2 !important;
}

/* forum pagination */
.arcadia-pagination {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  justify-content: center;
  padding: 2.5rem 0 1rem;
}
.arcadia-pagination_btn {
  font-family: Oswald, sans-serif;
  font-size: 0.95rem;
  font-weight: 600;
  min-width: 2.4rem;
  height: 2.4rem;
  padding: 0 0.6rem;
  border: 1px solid rgba(27, 27, 27, 0.25);
  background: transparent;
  color: #1b1b1b;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.arcadia-pagination_btn:hover:not(:disabled) {
  background: #259591;
  color: #fff7f2;
  border-color: #259591;
}
.arcadia-pagination_btn.is-current {
  background: #1b1b1b;
  color: #fff7f2;
  border-color: #1b1b1b;
}
.arcadia-pagination_btn:disabled { opacity: 0.35; cursor: default; }

/* ── The nav chrome ────────────────────────────────────────────────────
   .navbar_wrapper already contains BOTH the announcement banner and the
   nav bar, so it is the natural unit to pin: one element, one transform,
   one height. It was absolute (out of flow, overlaying the hero), so
   switching it to fixed changes no layout anywhere -- nothing ever
   reserved space for it and nothing needs a spacer now.
   Its live height is published as --arcadia-chrome-h by
   arcadia-nav-scroll.js for anything that has to sit clear of it. */
.navbar_wrapper.w-nav {
  position: fixed !important;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9000;
  transition: transform 0.32s cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* Nav logo slot: static spacer so the row never reflows when the scripts
   promote the SVG to position:fixed. Sizes match the JS resting state —
   natural 75px SVG × RESTING_SCALE (2.0 desktop / 1.4 mobile), height from
   the 60:16 viewBox. The scripts no longer write these. */
.navbar_logo-link-menu,
.navbar3_logo-link {
  width: 150px;
  min-width: 150px;
  height: 40px;
}
@media (max-width: 767px) {
  .navbar_logo-link-menu,
  .navbar3_logo-link {
    width: 105px;
    min-width: 105px;
    height: 28px;
  }
}

/* Hero Stories cards */
.hero-stories_card-link { transition: color 0.2s ease; }
.hero-stories_card-link:hover { color: #b6533e; }
a.text-color-accent:hover { color: #b6533e; }
/* Story photos: 1.91:1 landscape, biased toward faces. The source URLs are
   requested at w_1146,h_600,al_t so we're not centre-cropping a square —
   two stacked centre crops were eating heads. (Selector is scoped: these
   classes only occur on hero-stories.html.) */
.offering-perks_card-image .header19_image {
  aspect-ratio: 1.91 / 1;
  object-fit: cover;
  object-position: 50% 25%;
}

/* Hero scroll: the headline switches to parchment exactly where the rising
   image overlaps it. A parchment clone of each text block sits on top,
   clipped per-frame along the image's top edge (arcadia-hero-overlap.js). */
.arcadia-hero-clone {
  position: absolute;
  inset: 0;
  margin: 0;
  color: #fff7f2 !important;
  pointer-events: none;
  clip-path: inset(100% 0 0 0);
}

/* Pillar photo cards: black gradient behind the copy for readability */
.leadership-cards_item {
  position: relative;
}
.leadership-cards_item::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    100deg,
    rgba(0, 0, 0, 0.75) 0%,
    rgba(0, 0, 0, 0.45) 40%,
    rgba(0, 0, 0, 0) 72%
  );
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
  z-index: 1;
}
/* Hero Stories cards: at rest just the name (big) over the photo; on
   hover/focus the gradient fades in, the body copy appears and the name
   shrinks back to label size */
.leadership-cards_item::after {
  opacity: 0;
}
.leadership-cards_item:hover::after,
.leadership-cards_item:focus-within::after {
  opacity: 1;
}
/* 3-up card row as a real grid. Replaces the flex + width:33.333%!important
   arrangement, which only fitted because flex silently shrank the items
   (3 × 33.333% + 2 × 1rem gap > 100%). */
.leadership-cards_row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}
.leadership-cards_row .leadership-cards_item {
  /* !important guards against Webflow IX2 runtime inline widths; the grid
     track does the actual sizing */
  width: auto !important;
  height: auto !important;
  overflow: hidden;
}
.leadership-cards_item .leadership-cards_content {
  opacity: 1 !important;
}
.leadership-cards_item .leadership-cards_title {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.35s ease, transform 0.35s ease;
}
.leadership-cards_item:hover .leadership-cards_title,
.leadership-cards_item:focus-within .leadership-cards_title {
  opacity: 1;
  transform: none;
}
.leadership-cards_link .text-size-regular {
  font-size: 2.4rem;
  line-height: 1.05;
  text-shadow: 0 1px 28px rgba(0, 0, 0, 0.45);
  transition: font-size 0.35s ease;
}
.leadership-cards_item:hover .leadership-cards_link .text-size-regular,
.leadership-cards_item:focus-within .leadership-cards_link .text-size-regular {
  font-size: 1.25rem;
}
.leadership-cards_link svg {
  width: 0.55em;
  height: 0.55em;
  flex: 0 0 auto;
}
.leadership-cards_item .leadership-cards_image {
  transition: transform 0.45s ease;
}
.leadership-cards_item:hover .leadership-cards_image {
  transform: scale(1.03);
}
/* the dev's IX2 hover interaction dims every card via .image-overlay-layer
   inline opacity — our per-card gradient replaces it */
.leadership-cards_item .image-overlay-layer {
  opacity: 0 !important;
}
.leadership-cards_item .leadership-cards_image-wrapper {
  opacity: 1 !important;
}
/* touch devices: no hover — show everything */
@media (hover: none) {
  .leadership-cards_item::after { opacity: 1; }
  .leadership-cards_item .leadership-cards_title { opacity: 1; transform: none; }
  .leadership-cards_link .text-size-regular { font-size: 1.25rem; }
}
.leadership-cards_item .leadership-cards_content {
  position: relative;
  z-index: 2;
}

/* Home pillars: horizontal scroll track (replaces the wipe stack) */
.arcadia-h-scroll {
  overflow: hidden;
  height: 100%;
}
.arcadia-h-scroll .swiper-wrapper {
  display: flex !important;
  flex-flow: row nowrap !important;
  gap: 0 !important;
  height: 100%;
  will-change: transform;
}
.arcadia-h-scroll .swiper-slide {
  position: relative;
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.arcadia-h-scroll .swiper-background {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.arcadia-h-scroll .swiper-background_image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.arcadia-h-scroll .swiper-container {
  position: relative;
  z-index: 1;
  height: 100%;
}
.arcadia-h-scroll .swiper-pagination {
  display: none;
}

/* Stats: numbers sit on their baseline at the row bottom — the font's
   line-box padding is trimmed and commas/descenders hang below the line */
.stats_grid {
  align-items: end;
}
.stats_grid_column-left {
  align-items: end;
}
.stats_text-highlight {
  line-height: 1;
  text-box: trim-end alphabetic;
}

/* Hero Stories section header */
.stats_header-grid.arcadia-stories-header {
  display: flex !important;
  flex-direction: row !important;
  align-items: baseline;
  justify-content: space-between;
  gap: 2rem;
}
.arcadia-stories-header_link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: Oswald, sans-serif;
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: #fff7f2;
}
.arcadia-stories-header_link svg { color: #259591; transition: transform 0.3s ease; }
.arcadia-stories-header_link:hover svg { transform: rotate(45deg); }

/* ---- pillar section variants (preview pages) ---- */
.arcadia-pillar_header { padding: clamp(3rem,6vw,5rem) 0 clamp(2rem,4vw,3rem); }
.arcadia-pillar_header .heading-style-h3 { max-width: none; }

/* A: stacked angled bands */
.arcadia-band {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 78vh;
  overflow: hidden;
  clip-path: polygon(0 4.5vw, 100% 0, 100% 100%, 0 100%); /* rises right, like the i-dot */
  margin-top: -4.5vw;
}
.arcadia-band:first-of-type { margin-top: 0; }
.arcadia-band_bg { position: absolute; inset: 0; background-size: cover; background-position: center; transition: transform .5s ease; }
.arcadia-band:hover .arcadia-band_bg { transform: scale(1.02); }
.arcadia-band::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(100deg, rgba(0,0,0,.72) 0%, rgba(0,0,0,.4) 42%, rgba(0,0,0,0) 75%);
}
.arcadia-band_content { position: relative; z-index: 1; padding: clamp(2rem,5vw,4rem); padding-top: 7vw; max-width: 44rem; color: #fff7f2; }
.arcadia-band_content h3 { font-size: clamp(2rem,3.4vw,3.2rem); line-height: 1.02; margin: 0 0 1rem; text-transform: uppercase; }
.arcadia-band_content p { font-size: 1.15rem; line-height: 1.5; margin: 0 0 1.4rem; }
.arcadia-band_cta { display: inline-flex; align-items: center; gap: .5rem; font-family: Oswald, sans-serif; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; }
.arcadia-band_cta svg { width: 1em; height: 1em; color: #259591; transition: transform .3s ease; }
.arcadia-band:hover .arcadia-band_cta svg { transform: rotate(45deg); }

/* C: sticky split */
.arcadia-split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem,4vw,4rem); }
.arcadia-split_media { position: sticky; top: 0; height: 100svh; display: flex; align-items: center; }
.arcadia-split_media-inner {
  position: relative;
  width: 100%;
  max-height: 88svh;
  aspect-ratio: 2.9 / 4.861; /* the logo i-dot: vertical sides, 37deg top/bottom */
  clip-path: polygon(0 44.7%, 100% 0, 100% 55.3%, 0 100%);
  overflow: hidden;
}
.arcadia-split_media-inner img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .45s ease; }
.arcadia-split_media-inner img.is-active { opacity: 1; }
.arcadia-split_item { min-height: 88svh; display: flex; flex-direction: column; justify-content: center; color: #fff7f2; }
.arcadia-split_item h3 { font-size: clamp(1.8rem,2.8vw,2.6rem); line-height: 1.05; margin: 0 0 1rem; text-transform: uppercase; }
.arcadia-split_item p { font-size: 1.15rem; line-height: 1.5; margin: 0 0 1.4rem; max-width: 30rem; }

/* /our-work open rows */
.owr-rows { border-top: 1px solid rgba(27,27,27,.15); }
.owr-row { display: grid; grid-template-columns: 16rem 1fr; gap: 1.5rem; padding: 1.1rem 0; border-bottom: 1px solid rgba(27,27,27,.15); }
.owr-row p { margin: 0; }
.owr-row_title { font-family: Oswald, sans-serif; font-weight: 600; text-transform: uppercase; letter-spacing: .02em; }
/* owr-row titles are real <h2>s now (build-offerings.py) — keep the row's
   inherited body size, not the Webflow h2 element size */
h2.owr-row_title { font-size: inherit; line-height: inherit; margin: 0; }

/* /our-work: sticky vertical tab rail with a clear active state */
.program_tabs {
  position: sticky;
  top: 6rem;
  align-self: flex-start;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.6rem;
}
.program_tabs_link {
  position: relative;
  padding-left: 1.1rem;
  opacity: 0.45;
  border-left: 3px solid transparent;
  transform-origin: left center;
  transition: opacity 0.25s ease, border-color 0.25s ease, color 0.25s ease,
    transform 0.3s ease;
}
.program_tabs_link:hover { opacity: 0.8; }
.program_tabs_link.w--current {
  opacity: 1;
  color: #259591;
  border-left-color: #259591;
  transform: scale(1.18);
}

/* Leadership: bios always open, vertical scroll (no accordions/pin) */
.section_leadership-team .accordion2_bottom,
.section_leadership-directors-sticky .accordion2_bottom {
  height: auto !important;
}
.section_leadership-team .leadership_content-icon,
.section_leadership-directors-sticky .leadership_content-icon {
  display: none;
}
.section_leadership-team .accordion2_top,
.section_leadership-directors-sticky .accordion2_top {
  cursor: default;
}

/* /our-work: views stack and scroll; breathing room between programmes */
.program_views {
  display: flex;
  flex-direction: column;
  gap: clamp(4rem, 8vw, 7rem);
}
.program_content {
  scroll-margin-top: 7rem;
}

/* Leadership: the diagonal above the footer lost its colour context when
   the board section was de-pinned — it must be brand black into the footer */
.sticky-leadership-diagonal-mask {
  color: #1b1b1b;
  background-color: #fff; /* continues the white board section above */
}
.sticky-leadership-diagonal-mask svg {
  display: block;
}

/* Forum: get to the content faster — shorter hero scroll track and a
   compact intro band instead of a full-viewport section */
.section_forum-header {
  height: 140svh !important;
  min-height: 0 !important;
}
.section_forum-header + .section_after-hero_layout {
  min-height: 0 !important;
  height: auto !important;
}
.section_forum-header + .section_after-hero_layout .padding-section-xlarge,
.section_forum-header + .section_after-hero_layout .padding-section-large {
  padding-top: clamp(3rem, 6vw, 5rem);
  padding-bottom: clamp(3rem, 6vw, 5rem);
}

/* ---- Forum front page ---- */
.arcadia-masthead {
  background: #fff;
  color: #1b1b1b;
  padding: clamp(7rem, 12vw, 10rem) 0 clamp(3rem, 5vw, 4rem);
}
.arcadia-masthead_title {
  font-size: clamp(3.2rem, 9vw, 8rem);
  line-height: 0.95;
  margin: 0 0 1rem;
  display: flex;
  align-items: baseline;
  gap: 0.12em;
}
.arcadia-masthead .container-large { max-width: 64rem; }
.arcadia-masthead_dot {
  width: 0.42em;
  aspect-ratio: 2.9 / 4.861;
  background: #259591;
  clip-path: polygon(0 44.7%, 100% 0, 100% 55.3%, 0 100%);
  flex: 0 0 auto;
  transform: translateY(-0.02em);
}
.arcadia-masthead_dek {
  font-size: clamp(1.05rem, 1.5vw, 1.3rem);
  max-width: 38rem;
  margin: 0;
  opacity: 0.85;
}

.arcadia-grid_section {
  background: #fff;
  padding-bottom: clamp(3rem, 6vw, 5rem);
}

.arcadia-manifesto { background: #1b1b1b; color: #fff7f2; padding: clamp(4rem, 8vw, 6rem) 0; }
.arcadia-manifesto_text { font-size: clamp(1.15rem, 1.8vw, 1.5rem); line-height: 1.6; max-width: 52rem; margin: 0; }


/* footer credit */
.arcadia-credit {
  font-size: 0.8rem;
  opacity: 0.55;
  transition: opacity 0.25s ease;
}
.arcadia-credit:hover { opacity: 1; }

/* forum list: narrower reading column so titles and thumbnails connect */
.arcadia-grid_section .container-large {
  max-width: 64rem;
}

/* ---- offering detail pages ---- */
.arcadia-off_hero {
  background: #fff;
  /* Nav is absolutely positioned over this hero, so the top padding has to
     clear it (~165px at desktop) before it buys any visible breathing room. */
  padding: clamp(13rem, 21vw, 18.5rem) 0 clamp(1.5rem, 2.5vw, 2rem);
}
.arcadia-off_hero .container-large,
.arcadia-off_body .container-large {
  max-width: 56rem;
}
.arcadia-off_back {
  display: inline-block;
  font-family: Oswald, sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 2.2rem;
  opacity: 0.55;
}
.arcadia-off_back:hover { opacity: 1; }
.arcadia-off_kicker {
  font-family: Oswald, sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: #b6533e;
  margin-bottom: 0.6rem;
}
.arcadia-off_title {
  font-size: clamp(2.4rem, 5vw, 4.2rem);
  line-height: 0.98;
  margin: 0 0 clamp(1.6rem, 2.6vw, 2.4rem);
}
.arcadia-off_dek {
  font-size: clamp(1.05rem, 1.45vw, 1.25rem);
  line-height: 1.55;
  max-width: 42rem;
  margin: 0;
}
.arcadia-off_body {
  background: #fff;
  padding: clamp(1.5rem, 2.5vw, 2rem) 0 clamp(3.5rem, 6vw, 5rem);
}
.arcadia-off_intro {
  font-size: 1.1rem !important;
  line-height: 1.6 !important;
  margin: 0 0 1rem;
  max-width: 42rem;
}
.arcadia-off_rows { margin-top: 2.2rem; }
.arcadia-off_quote {
  margin: 2.6rem 0 0;
  padding-left: 1.4rem;
  border-left: 3px solid #b6533e;
  max-width: 42rem;
}
.arcadia-off_quote p { font-size: 1.15rem; line-height: 1.55; margin: 0 0 0.7rem; }
.arcadia-off_quote cite { font-style: normal; opacity: 0.6; }
.arcadia-manifesto .container-large { max-width: 56rem; }
.arcadia-off_cta {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: 1.4rem;
  font-family: Oswald, sans-serif;
  font-weight: 600;
  font-size: 1.15rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: #fff7f2;
  border: 1px solid rgba(255, 247, 242, 0.4);
  padding: 0.8rem 1.4rem;
  transition: border-color 0.25s ease, background-color 0.25s ease;
}
.arcadia-off_cta:hover { border-color: #259591; background: rgba(37, 149, 145, 0.18); }
.arcadia-off_cta svg { width: 1em; height: 1em; color: #259591; transition: transform 0.3s ease; }
.arcadia-off_cta:hover svg { transform: rotate(45deg); }

/* ---- mobile rules for Arcadia components (breakpoints match Webflow's 991/767) ---- */
@media (max-width: 991px) {
  /* leadership photo panel: grid stacks, sticky panel would overlap bios */
  .leadership_grid_image-wrapper {
    position: static;
  }
  /* our-work rail: above the content when stacked, not sticky over it */
  .program_tabs {
    position: static;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 1rem 1.4rem;
    margin-bottom: 1.5rem;
  }
}
@media (max-width: 767px) {
  /* title/copy rows stack */
  .owr-row {
    grid-template-columns: 1fr;
    gap: 0.3rem;
  }
  /* hero stories header wraps */
  .stats_header-grid.arcadia-stories-header {
    flex-wrap: wrap;
    gap: 0.8rem;
  }
  /* resources toolbar: search full width when wrapped */
  .arcadia-forum-tools,
  .arcadia-forum-tools .forum_filter-wrapper,
  .arcadia-forum-tools input {
    width: 100%;
    max-width: 100%;
  }
  /* story cards stack on phones */
  .leadership-cards_row {
    grid-template-columns: 1fr;
  }
  .leadership-cards_item .leadership-cards_title {
    opacity: 1;
    transform: none;
  }
  .leadership-cards_item::after { opacity: 1; }
  .leadership-cards_link .text-size-regular { font-size: 1.25rem; }
  /* pillar card copy size on small screens */
  .leadership-cards_title { font-size: 1.1rem; }
  /* offering pages: tighter heroes */
  .arcadia-off_title { font-size: clamp(2rem, 9vw, 2.6rem); }
  /* contact email rows can run long */
  .contact_list-item_text { word-break: break-all; }
  /* footer CTAs: tighten so they're not 18rem-tall empty boxes when stacked */
  .cta_content-item.content_button {
    min-height: auto;
    padding: 1.1rem 1.5rem;
    gap: 0.4rem;
  }
  .cta_content-item.content_button .cta_content-item_text {
    font-size: 0.85rem;
  }
  .cta-content_link { font-size: 2.25rem; }
}
@media (max-width: 479px) {
  /* same fix overrides Webflow's 18rem floor at the small-phone breakpoint */
  .cta_content-item.content_button { min-height: auto; }
  /* a11y widget: smaller target on phones so it covers less text near the bottom */
  .a11y-widget { bottom: 0.9rem; left: 0.9rem; }
  .a11y-widget_toggle { width: 2.6rem; height: 2.6rem; }
  .a11y-widget_toggle svg { width: 20px; height: 20px; }
  .a11y-widget_panel {
    width: calc(100vw - 1.8rem);
    max-width: 19rem;
    bottom: 3.4rem;
  }
  /* breathing room so the toggle does not cover footer credit / last paragraph */
  .footer16_bottom-wrapper { padding-bottom: 3rem; }
}

/* about page */
.arcadia-about_intro { padding: clamp(4rem, 8vw, 7rem) 0; }
.arcadia-about_story, .arcadia-about_values { padding: clamp(2rem, 4vw, 3.5rem) 0; }
.arcadia-about_col h2 { margin-bottom: 1.4rem; }
.arcadia-about_stats { padding-bottom: clamp(3rem, 6vw, 5rem); }

/* nav logo 1.5x */
.navbar3_logo {
  transform: scale(1.5);
  transform-origin: center;
}

/* about: the dark handoff section cuts its own angled bottom edge and
   slides over the pinned hero (the hero's last ~100svh of pin is a
   static hold — anim completes at 58% of the 250% pin) */
.arcadia-about_handoff {
  padding-bottom: 13vw;
  margin-top: -100svh;
  position: relative;
  z-index: 2;
}
.arcadia-about_handoff::after {
  /* parchment wedge painted on the section (a clip-path cut exposed the
     teal hero parked behind); rises right, like the i-dot */
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 11vw;
  background: #fff7f2;
  clip-path: polygon(0 100%, 100% 0, 100% 100%);
}

/* about: breathing room around the EXPLORE INCIGHT. closer */
.arcadia-about_values + .section_leadership-cards {
  padding-top: clamp(4rem, 8vw, 7rem);
  padding-bottom: clamp(4rem, 8vw, 7rem);
}

/* ---- angled seam audit fixes (2026-06-11) ----
   The dev's mask divs depend on Webflow-runtime sizing and render as
   flat seams or dead space in the static mirror. Broken ones are
   hidden and replaced with owned wedges (rising right, per the i-dot). */

/* support: white wedge over a parchment page -> parchment */
.forum-mask-top { color: #fff7f2; }


/* reduce-motion: static fallbacks so nothing is blank or unreachable */
html.a11y-motion .section-hero_transition {
  height: auto !important;
  min-height: 100svh;
}
html.a11y-motion .arcadia-h-scroll .swiper-wrapper {
  flex-direction: column !important;
  transform: none !important;
  gap: 2rem !important;
}
html.a11y-motion .arcadia-h-scroll .swiper-slide {
  width: 100% !important;
}
html.a11y-motion [data-highlight-text],
html.a11y-motion [data-highlight-text] * {
  opacity: 1 !important;
  color: inherit !important;
}
/* 61353's reduced path leaves the word spans at inline opacity 0 */
html.a11y-motion .about_hero-content-title [data-word] {
  opacity: 1 !important;
}

/* ----------------------------------------------------------------------
   Pia/Scott review pass (2026-06-29) — #4, #14, #18/#19, #20, #26
   ---------------------------------------------------------------------- */

/* The nav logo is just the nav logo now, on every page. There used to be a
   big persistent wordmark pinned to <body> that hid this SVG and stood in
   for it, and a second rule that handed the slot back when the bar pinned --
   two different wordmarks at two different sizes, swapping on scroll
   (Joseph, 17 Sep: "there are multiple logos, so they appear and reappear on
   scroll"). One logo, one size, one position, no swap. */

/* #14 — Shift home hero photo up so "MOVING THE WORLD..." sits over the photo
   with more of the big-picture composition visible. Pia 2026-06-25.
   The home hero uses [data-hero-section] with a media layer + content overlay.
   We crop the top by raising object-position, and reduce the gap above content. */
[data-hero-section] [data-hero-media] img,
[data-hero-section] [data-hero-media] video,
[data-hero-section] .header_hero-image-wrapper img {
  object-position: 50% 18% !important;
}
[data-hero-section] [data-hero-content] {
  padding-top: clamp(2rem, 4vh, 4rem);
}
/* Hero copy stays black — the photo sits below the headline in this layout,
   not behind it, so white-on-photo would have rendered white-on-parchment.
   If/when the hero is restructured to overlap the photo, revisit. */

/* #18 + #19 — About: name-meaning breakout (INSIGHT / INCITE).
   Sits under the hero h1, two columns, mirrors the artefacts style. */
.arcadia-name-meaning {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.5rem, 3vw, 3rem);
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
  align-items: start;
}
.arcadia-name-meaning_col {
  text-align: center;
  padding: clamp(1rem, 2vw, 1.5rem);
  border-top: 2px solid rgba(255,247,242,0.3);
}
.arcadia-name-meaning_word {
  font-family: Oswald, sans-serif;
  font-weight: 600;
  letter-spacing: 0.08em;
  font-size: clamp(1.5rem, 3vw, 2.5rem);
  color: #259591;
  margin: 0 0 0.5rem 0;
}
.arcadia-name-meaning_def {
  font-family: 'Public Sans', sans-serif;
  font-style: italic;
  font-size: clamp(0.95rem, 1.1vw, 1.05rem);
  margin: 0 0 0.75rem 0;
  opacity: 0.85;
}
.arcadia-name-meaning_outcome {
  font-family: Oswald, sans-serif;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-size: clamp(0.85rem, 1vw, 0.95rem);
  margin: 0;
}
@media (max-width: 640px) {
  .arcadia-name-meaning { grid-template-columns: 1fr; gap: 1rem; }
}

/* #20 — About: explicit vision band above the mission section. */
.arcadia-about_vision {
  padding: clamp(2.5rem, 5vw, 4rem) 0;
  background: #fff7f2;
}
.arcadia-vision_eyebrow {
  font-family: Oswald, sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: clamp(0.8rem, 0.95vw, 0.9rem);
  color: #259591;
  margin-bottom: 0.5rem;
}
.arcadia-vision_heading {
  max-width: 28ch;
  line-height: 1.15;
}

/* #26 — Leadership cards: kill the hover/animation on photos.
   Photos are static beside each name. Pia 2026-06-24. */
.leadership-accordion_component .leadership_image,
.leadership_accordion-top .leadership_image,
.section_leadership-cards img,
.leadership-accordion_component img {
  transform: none !important;
  transition: none !important;
  filter: none !important;
}
.leadership-accordion_component:hover .leadership_image,
.leadership-accordion_component:hover img,
.leadership_accordion-top:hover img {
  transform: none !important;
  filter: none !important;
  opacity: 1 !important;
}

/* ----------------------------------------------------------------------
   ABOUT mega menu (2026-06-29) — replaces the two side-by-side ABOUT
   + OFFERINGS dropdowns. Single ABOUT trigger opens a 2-column panel:
     Column 1: INCIGHT (Our Leaders / Our Partners / News / History)
     Column 2: Offerings (Disability Awareness Programs / Scholars /
              Job Fairs / Career Readiness Workshops / Forum /
              Disability Roundtables)
   ---------------------------------------------------------------------- */
/* The trigger wrapper needs its OWN stacking context above the hero so
   the open panel paints over later sibling sections (hero, content). */
.arcadia-mega-trigger {
  position: relative;
  z-index: 100;
}
.arcadia-mega-trigger:hover,
.arcadia-mega-trigger:focus-within,
.arcadia-mega-trigger.w--open {
  z-index: 10000;
}
/* Lift the whole navbar into a higher stacking context than the hero's
   sticky transition wrapper. The hero's .section-transition_sticky is a
   fixed-position element with z-index auto that punches through the
   navbar otherwise. */
.navbar_component {
  position: relative;
  z-index: 9000;
}
/* Belt + braces: when the mega panel is open (via :has on the wrapper),
   force the hero's persistent-logo sticky overlay to back off so the
   wordmark doesn't show through. */
body:has(.arcadia-mega-trigger:hover) .section-transition_sticky,
body:has(.arcadia-mega-trigger:focus-within) .section-transition_sticky,
body:has(.arcadia-mega-flyout.w--open) .section-transition_sticky {
  z-index: -1 !important;
}

/* Full-width panel that drops down right below the ABOUT trigger and
   spans the viewport width. We stay with Webflow's default position:absolute
   (top:100% of the .navbar_menu-dropdown wrapper) and break out of the
   wrapper horizontally via 100vw + a left offset computed at runtime
   (--arcadia-mega-left, set by arcadia-mega-position.js below). */
.arcadia-mega-flyout.w-dropdown-list {
  position: absolute !important;
  top: 100% !important;
  left: var(--arcadia-mega-left, 0) !important;
  right: auto !important;
  width: 100vw !important;
  max-width: 100vw !important;
  min-width: 0 !important;
  padding: 0 !important;
  background-color: #1b1b1b;
  color: #fff7f2;
  box-shadow: 0 24px 60px rgba(0,0,0,0.35);
  border: none;
  transform: none !important;
  margin: 0 !important;
  overflow: visible !important;
  z-index: 9999;
}
.arcadia-mega-flyout.w-dropdown-list.w--open,
.arcadia-mega-trigger:hover .arcadia-mega-flyout.w-dropdown-list,
.arcadia-mega-trigger:focus-within .arcadia-mega-flyout.w-dropdown-list {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  height: auto !important;
}
.arcadia-mega_inner {
  max-width: 1400px;
  margin: 0 auto;
  padding: clamp(2rem, 3.5vw, 3rem) clamp(1.5rem, 4vw, 4rem);
  display: grid;
  grid-template-columns: minmax(220px, 280px) 1fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}
/* Primary list (Our Leaders / Our Partners / News / History / Offerings) */
.arcadia-mega_primary {
  display: flex;
  flex-direction: column;
  gap: 0;
}
/* Offerings trigger — same look as a primary link, with a chevron + teal
   hover state. Sits inside the primary list as the last item. */
.arcadia-mega_offerings-trigger {
  font-family: 'Public Sans', sans-serif;
  font-weight: 500;
  font-size: clamp(0.9rem, 1vw, 1rem);
  color: #fff7f2;
  padding: 0.55rem 0.75rem;
  margin: 0 -0.75rem;
  border-radius: 2px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  transition: background-color 0.2s ease, color 0.2s ease, padding-left 0.2s ease;
  line-height: 1.3;
}
.arcadia-mega_chev {
  font-family: Oswald, sans-serif;
  font-size: 1.1em;
  line-height: 1;
  opacity: 0.6;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.arcadia-mega_offerings-trigger:hover,
.arcadia-mega_offerings-trigger:focus-visible,
.arcadia-mega_inner:has(.arcadia-mega_secondary:hover) .arcadia-mega_offerings-trigger {
  background-color: #259591;
  color: #fff7f2;
  padding-left: 1rem;
}
.arcadia-mega_offerings-trigger:hover .arcadia-mega_chev,
.arcadia-mega_offerings-trigger:focus-visible .arcadia-mega_chev,
.arcadia-mega_inner:has(.arcadia-mega_secondary:hover) .arcadia-mega_chev {
  opacity: 1;
  transform: translateX(2px);
}
/* The secondary panel — sibling of primary in the grid. Hidden by default,
   revealed when the Offerings trigger is hovered/focused. Uses :has() so
   the hover sync works without JS. Stays visible while the cursor is on
   the secondary itself, so the user can click the children. */
.arcadia-mega_secondary {
  display: flex;
  flex-direction: column;
  min-width: 280px;
  visibility: hidden;
  opacity: 0;
  transform: translateX(-8px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0.2s;
  padding-left: clamp(1.5rem, 2.5vw, 2.5rem);
  border-left: 1px solid rgba(255,247,242,0.15);
}
.arcadia-mega_secondary-heading {
  font-family: Oswald, sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: clamp(0.75rem, 0.9vw, 0.85rem);
  color: #259591;
  margin-bottom: 0.85rem;
  padding-bottom: 0.65rem;
  border-bottom: 1px solid rgba(255,247,242,0.18);
}
.arcadia-mega_inner:has(.arcadia-mega_offerings-trigger:hover) .arcadia-mega_secondary,
.arcadia-mega_inner:has(.arcadia-mega_offerings-trigger:focus-visible) .arcadia-mega_secondary,
.arcadia-mega_inner:has(.arcadia-mega_secondary:hover) .arcadia-mega_secondary,
.arcadia-mega_inner:has(.arcadia-mega_secondary:focus-within) .arcadia-mega_secondary {
  visibility: visible;
  opacity: 1;
  transform: translateX(0);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0s;
}
/* Mega-menu link styling (shared by both primary and secondary lists) */
.arcadia-mega_link.w-dropdown-link {
  font-family: 'Public Sans', sans-serif;
  font-weight: 500;
  font-size: clamp(0.9rem, 1vw, 1rem);
  color: #fff7f2;
  padding: 0.55rem 0.75rem;
  margin: 0 -0.75rem;
  text-decoration: none;
  border-radius: 2px;
  transition: background-color 0.2s ease, color 0.2s ease, padding-left 0.2s ease;
  line-height: 1.3;
  white-space: normal;
}
.arcadia-mega_link.w-dropdown-link:hover,
.arcadia-mega_link.w-dropdown-link:focus-visible {
  background-color: #259591;
  color: #fff7f2;
  padding-left: 1rem;
}
.arcadia-mega_link.w-dropdown-link[href="#"] {
  opacity: 0.6;
  cursor: default;
}
.arcadia-mega_link.w-dropdown-link[href="#"]:hover {
  background-color: rgba(37,149,145,0.25);
  opacity: 0.9;
}

/* Narrow viewports: drop the fly-out; show all offerings inline beneath
   the Offerings label. The full-width panel still spans the viewport. */
@media (max-width: 880px) {
  .arcadia-mega_inner {
    grid-template-columns: 1fr;
    gap: 1rem;
    padding: 1.5rem;
  }
  .arcadia-mega_secondary {
    position: static;
    visibility: visible;
    opacity: 1;
    transform: none;
    min-width: 0;
    padding-left: 0.75rem;
    margin-top: 0.25rem;
    border-left: 2px solid rgba(37,149,145,0.4);
  }
  .arcadia-mega_chev { display: none; }
}

/* ----------------------------------------------------------------------
   Insight Forum tag filter bar (2026-06-29) — sits above the article
   grid on /incight-forum. Toggles visibility of cards based on the
   `data-category` attribute Webflow already emits. First step of the
   parent-collection / Stories-Understanding-News-History taxonomy. */
.arcadia-forum-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin: 0 0 clamp(2rem, 3vw, 3rem);
  padding-bottom: 1rem;
  border-bottom: 1px solid rgba(27,27,27,0.12);
}
.arcadia-forum-filter {
  font-family: Oswald, sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: clamp(0.75rem, 0.9vw, 0.85rem);
  font-weight: 500;
  padding: 0.55rem 1.1rem;
  background: transparent;
  color: #1B1B1B;
  border: 1px solid rgba(27,27,27,0.18);
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.arcadia-forum-filter:hover,
.arcadia-forum-filter:focus-visible {
  background: rgba(37,149,145,0.12);
  border-color: #259591;
  color: #259591;
  outline: none;
}
.arcadia-forum-filter.is-active {
  background: #259591;
  color: #FFF7F2;
  border-color: #259591;
}

/* ----------------------------------------------------------------------
   Event banner restored 2026-06-29 (was removed site-wide 12 Jun in
   commit 41fc496). Sits above the navbar. Loads in AFTER the intro
   animations settle — fades + slides down once body.arcadia-banner-ready
   is set by arcadia-event-banner.js. Click X to dismiss.
   Brand-accent teal (#259591) matches the "INCIGHT green line" Pia
   referenced in comment #10.
   ---------------------------------------------------------------------- */
.arcadia-event-banner {
  background-color: #259591;
  color: #fff7f2;
  position: relative;
  z-index: 8500;  /* under the open dropdowns (9999) but above the hero */
  /* Initial state: collapsed + invisible. Held off until intro completes. */
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: opacity 0.5s ease, max-height 0.5s ease;
}
.arcadia-event-banner .banner10_content-wrapper {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding: 0.6rem 0;
  justify-content: center;
}
.arcadia-event-banner .banner10_content {
  flex: 0 1 auto;
  text-align: center;
}
.arcadia-event-banner_link {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  color: inherit;
  text-decoration: none;
  transition: gap 0.2s ease;
}
.arcadia-event-banner_link:hover,
.arcadia-event-banner_link:focus-visible {
  text-decoration: underline;
  text-underline-offset: 4px;
  gap: 0.85rem;
  outline: none;
}
.arcadia-event-banner_arrow {
  font-family: Oswald, sans-serif;
  font-size: 1.05em;
  line-height: 1;
  transform: translateY(-1px);
}
.arcadia-event-banner .text-size-tiny {
  font-family: Oswald, sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: clamp(0.75rem, 0.9vw, 0.85rem);
  font-weight: 500;
  color: #fff7f2;
  margin: 0;
}
.arcadia-event-banner_close {
  position: absolute;
  right: clamp(0.75rem, 1.5vw, 1.25rem);
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: 0;
  width: 2rem;
  height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #fff7f2;
  padding: 0;
  border-radius: 50%;
  transition: background-color 0.2s ease;
}
.arcadia-event-banner_close:hover,
.arcadia-event-banner_close:focus-visible {
  background-color: rgba(255, 247, 242, 0.18);
  outline: none;
}
.arcadia-event-banner_close .icon-embed-small {
  width: 1rem;
  height: 1rem;
}

/* Reveal once intro animations have settled. */
body.arcadia-banner-ready .arcadia-event-banner {
  max-height: 4rem;
  opacity: 1;
}
/* Smooth dismissal animation when the X is clicked. */
body.arcadia-banner-dismissed .arcadia-event-banner {
  max-height: 0;
  opacity: 0;
}
/* Repeat page views in the same session: the reveal already played once, so
   render the banner pre-expanded with no transition. Without this the banner
   pushes the whole nav down ~1s after every page load — the menu "jumping"
   Pia flagged. The html class is set in <head> before first paint. */
html.arcadia-banner-instant .arcadia-event-banner {
  transition: none;
  max-height: 4rem;
  opacity: 1;
}
/* Keep the dismissal animation smooth even on pre-expanded pages. */
html.arcadia-banner-instant body.arcadia-banner-dismissed .arcadia-event-banner {
  transition: opacity 0.5s ease, max-height 0.5s ease;
  max-height: 0;
  opacity: 0;
}

@media (max-width: 640px) {
  .arcadia-event-banner .text-size-tiny {
    font-size: 0.7rem;
    letter-spacing: 0.08em;
  }
  .arcadia-event-banner .banner10_content-wrapper {
    padding: 0.5rem 2.5rem 0.5rem 1rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .arcadia-event-banner,
  body.arcadia-banner-ready .arcadia-event-banner,
  body.arcadia-banner-dismissed .arcadia-event-banner {
    transition: none;
  }
}

/* Hide the placeholder decorative images spilling into the offerings gallery section (they were being clipped by the parchment mask) */
.organization-image-1,
.organization-image-2 {
  display: none !important;
}

/* ============================================================
 * About hero — B1 aesthetic (parchment centred manifesto with
 * skewed terracotta divider between INSIGHT and INCITE rows)
 * Chosen 2026-07-10 for /about hero landing.
 * ============================================================ */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.arcadia-about_hero-b1 {
  /* Matches the baked-in background of the name-meaning hero image so it
     reads as one full-bleed surface. */
  background: #FEF6F3;
  color: #1B1B1B;
  padding: clamp(4rem, 8vw, 7rem) 0 clamp(3rem, 6vw, 5rem);
}

.arcadia-about_hero-b1 .b1_block {
  max-width: 880px;
  margin: 0 auto;
  text-align: center;
}

.arcadia-about_hero-b1 .b1_hero-image {
  display: block;
  width: 100%;
  height: auto;
  margin: 0 auto;
}

.arcadia-about_hero-b1 .b1_row {
  padding: clamp(2rem, 4vw, 3rem) 0;
  position: relative;
}

.arcadia-about_hero-b1 .b1_row + .b1_row::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 0;
  width: clamp(120px, 25vw, 220px);
  height: 14px;
  background: #B6533E;
  transform: translateX(-50%) skewX(-37deg);
}

.arcadia-about_hero-b1 .b1_word {
  font-family: Oswald, sans-serif;
  font-weight: 600;
  font-size: clamp(2.5rem, 6vw, 5rem);
  letter-spacing: -0.02em;
  line-height: 1;
  color: #1B1B1B;
  margin: 0 0 0.75rem;
}

.arcadia-about_hero-b1 .b1_def {
  font-family: 'Public Sans', sans-serif;
  font-style: italic;
  font-size: clamp(1rem, 1.4vw, 1.25rem);
  opacity: 0.7;
  margin: 0 auto 1.25rem;
  max-width: 40ch;
}

.arcadia-about_hero-b1 .b1_outcome {
  font-family: Oswald, sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.32em;
  font-size: clamp(1rem, 1.5vw, 1.25rem);
  font-weight: 600;
  color: #259591;
  margin: 0;
}


/* B1 hero replaces the old teal parked-hero design, so kill the overlap
   pull and the parchment wedge — they belong to the pre-B1 layout. */
.arcadia-about_hero-b1 + .arcadia-about_handoff,
body:has(.arcadia-about_hero-b1) .arcadia-about_handoff {
  margin-top: 0 !important;
}
.arcadia-about_hero-b1 + .arcadia-about_handoff::after,
body:has(.arcadia-about_hero-b1) .arcadia-about_handoff::after {
  content: none !important;
}

/* /about B1 hero — nav on parchment: force nav items dark and unlock the
   persistent logo from viewport-fixed to page-static so it scrolls away. */
body:has(.arcadia-about_hero-b1) :is(
  .navbar_link,
  .navbar_menu-dropdown,
  .navbar_dropdown-toggle,
  .navbar_menu-button
) {
  color: #1B1B1B !important;
}
/* Article body copy is left-aligned (Joseph 2026-07-10, reverses the
   earlier centred-copy request); blockquotes render as centred pull-quotes. */

/* ============================================================
 * Resources hub — view toggle (list/grid) + improved list view
 * 2026-07-10 per Joseph. Titles now dominant; grid is 3-col.
 * ============================================================ */
.arcadia-forum-viewtoggle {
  display: inline-flex;
  gap: 0;
  border: 1px solid rgba(27,27,27,0.15);
  border-radius: 999px;
  padding: 0.25rem;
  flex: 0 0 auto;
}

/* one toolbar row: filter pills left, search + view toggle right */
.arcadia-forum-toolbar {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: clamp(1.75rem, 3vw, 2.5rem);
  padding-bottom: 1.25rem;
  border-bottom: 1px solid rgba(27,27,27,0.12);
}
.arcadia-forum-toolbar .arcadia-forum-filters {
  margin: 0;
  padding: 0;
  border: 0;
  flex: 1 1 auto;
}
.arcadia-forum-tools {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-left: auto;
  flex: 0 1 auto;
}
.arcadia-forum-tools .w-form { margin: 0; }
.arcadia-forum-tools .forum_filter-wrapper { max-width: 14rem; }
.arcadia-forum-tools input {
  height: 2.7rem;
  margin-bottom: 0;
  background: rgba(27, 27, 27, 0.04);
  border-color: rgba(27, 27, 27, 0.25);
  color: #1b1b1b;
}
.arcadia-forum-tools input::placeholder { color: rgba(27, 27, 27, 0.45); }

/* featured lead story */
.arcadia-featured {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: center;
  margin: 0 0 clamp(2.5rem, 5vw, 4rem);
}
.arcadia-featured_kicker {
  display: flex;
  align-items: baseline;
  gap: 0.9rem;
  font-family: Oswald, sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 0.75rem;
  color: rgba(27, 27, 27, 0.55);
}
.arcadia-featured_kicker span {
  color: #b6533e;
  font-weight: 600;
}
.arcadia-featured_title {
  font-family: Oswald, sans-serif;
  font-weight: 600;
  font-size: clamp(2rem, 4vw, 3.25rem);
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: #1b1b1b;
  margin: 0.9rem 0 1rem;
  transition: color 0.2s ease;
}
.arcadia-featured:hover .arcadia-featured_title { color: #259591; }
.arcadia-featured_dek {
  font-size: 1.05rem;
  line-height: 1.6;
  color: rgba(27, 27, 27, 0.72);
  max-width: 34rem;
  margin: 0 0 1.2rem;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.arcadia-featured_date {
  font-family: Oswald, sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.8rem;
  opacity: 0.55;
}
.arcadia-featured_image {
  aspect-ratio: 16 / 10;
  background-size: cover;
  background-position: center;
  background-color: #9ab9ad;
  /* angled-i slope, rising rightward — the site's transition motif */
  clip-path: polygon(0 4.5%, 100% 0, 100% 95.5%, 0 100%);
}
@media (max-width: 900px) {
  .arcadia-featured { grid-template-columns: 1fr; gap: 1.25rem; }
  .arcadia-featured_image { order: -1; }
}
.arcadia-forum-view {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: transparent;
  border: 0;
  padding: 0.4rem 0.85rem;
  border-radius: 999px;
  font-family: Oswald, sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.75rem;
  color: #1B1B1B;
  cursor: pointer;
  transition: background .2s;
}
.arcadia-forum-view:hover { background: rgba(37,149,145,0.12); }
.arcadia-forum-view.is-active { background: #259591; color: #FFF7F2; }
.arcadia-forum-view svg { flex: none; }

/* --- List view: bigger, dominant title ------------------------------- */
#forum-posts[data-view="list"] .arcadia-forum-card {
  align-items: center;
  grid-template-columns: minmax(0, 1fr) 9rem;
  column-gap: clamp(1.25rem, 3vw, 2.25rem);
  padding: 1.1rem 0;
}
#forum-posts[data-view="list"] .forum_list-item_content-left {
  max-width: none;
  gap: 0.9rem;
}
#forum-posts[data-view="list"] .forum_content_subtitle {
  font-family: Oswald, sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 0.75rem;
  color: #259591;
  margin-bottom: 0.35rem;
}
#forum-posts[data-view="list"] .arcadia-forum-card .text-size-regular {
  font-family: Oswald, sans-serif;
  font-weight: 600;
  font-size: clamp(1.3rem, 2vw, 1.75rem);
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: #1B1B1B;
  margin: 0;
}
#forum-posts[data-view="list"] .forum_content_date {
  font-family: Oswald, sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.8rem;
  opacity: 0.6;
}
#forum-posts[data-view="list"] .forum_list-item_content-image {
  min-width: 0;
  min-height: 0;
  width: 100%;
  height: auto;
  aspect-ratio: 3/2;
  border-radius: 4px;
}

/* Card thumbnails are real <img> elements inside the sized wrapper divs
   (build-forum.py) — fill the wrapper, keep its radius. */
.forum_list-item_content-image img,
.arcadia-rel_thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: inherit;
}
/* Card titles are real <h3>s wearing the same utility classes; neutralise
   the Webflow h3 element styling (Oswald/uppercase) they'd otherwise get. */
.arcadia-forum-card h3 {
  font-family: inherit;
  letter-spacing: inherit;
  text-transform: none;
  line-height: inherit;
  margin: 0;
}

/* --- Grid view: 3-col uniform tiles ---------------------------------- */
#forum-posts[data-view="grid"] {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(0.75rem, 1.5vw, 1.25rem);
  align-items: stretch;
}
#forum-posts[data-view="grid"] .arcadia-forum-card {
  display: grid !important;
  grid-template-rows: auto 1fr;
  padding: 0 !important;
  border: 0 !important;
  gap: 0.5rem;
  height: auto;
  min-height: 0;
  align-items: start;
}
/* Image sits row 1, content row 2. Enforce consistent aspect + no overflow. */
#forum-posts[data-view="grid"] .forum_list-item_content-image {
  grid-row: 1;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 4 / 3;
  background-size: cover;
  background-position: center;
  background-color: #E8E4DC;
  border-radius: 6px;
  min-width: 0;
  margin: 0 !important;
}
#forum-posts[data-view="grid"] .forum_list-item_content-left {
  grid-row: 2;
  display: flex !important;
  flex-direction: column !important;
  gap: 0.25rem;
  padding: 0.15rem 0.15rem 0 !important;
  width: 100% !important;
  align-items: stretch !important;
}
#forum-posts[data-view="grid"] .forum_content_left {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  flex: 1;
}
#forum-posts[data-view="grid"] .forum_content_subtitle {
  font-family: Oswald, sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 0.7rem;
  font-weight: 600;
  color: #259591;
  margin: 0;
}
#forum-posts[data-view="grid"] .arcadia-forum-card .text-size-regular {
  font-family: Oswald, sans-serif;
  font-weight: 600;
  font-size: clamp(1.1rem, 1.4vw, 1.35rem);
  line-height: 1.2;
  letter-spacing: -0.005em;
  color: #1B1B1B;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
#forum-posts[data-view="grid"] .forum_content_date {
  font-family: Oswald, sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.7rem;
  opacity: 0.55;
  margin-top: 0.2rem;
}

@media (max-width: 900px) {
  #forum-posts[data-view="grid"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  #forum-posts[data-view="grid"] { grid-template-columns: 1fr; }
  #forum-posts[data-view="list"] .arcadia-forum-card { grid-template-columns: minmax(0, 1fr) 7.5rem; }
}

/* ---- 2026-07-10 design polish ---- */
/* Parallelogram is divider only, not motif — hide from masthead h1 (Pia). */
.arcadia-masthead_dot { display: none; }
/* Featured card dek — many imported articles have huge deks; clamp to 3 lines. */
.arcadia-featured_dek {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* (Article pages used to hide the persistent stand-in here; there is no
   stand-in any more -- every page uses the nav's own logo.) */

/* ============================================================
 * Article layout v2 — Ardens-style (2026-07-13)
 * Big centred headline → full-width meta strip → full-bleed hero
 * → narrow left body → bar-quote → Keep Reading cards.
 * ============================================================ */
.arcadia-article_header {
  max-width: 52rem;
  padding-bottom: clamp(1.5rem, 3vw, 2.5rem);
}
.arcadia-article_header::after { content: none; }
.arcadia-article_title {
  font-size: clamp(2.6rem, 6vw, 4.5rem);
  letter-spacing: -0.01em;
}
/* Meta strip: date | category | read time spread across the row */
.arcadia-article_metarow {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  margin-top: clamp(2rem, 4vw, 3rem);
  font-family: Oswald, sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.8rem;
  color: rgba(27, 27, 27, 0.55);
}
.arcadia-article_metarow .arcadia-article_tag { color: #259591; font-weight: 600; }

/* Full-bleed hero */
.arcadia-article_hero-bleed {
  width: 100%;
  margin: 0 0 clamp(2.5rem, 5vw, 4rem);
}
.arcadia-article_hero-bleed img {
  width: 100%;
  height: clamp(20rem, 55vh, 34rem);
  object-fit: cover;
  display: block;
}

/* Quote: left accent bar + display type (replaces centred italic rules) */
.arcadia-article_body blockquote {
  border: 0;
  border-left: 4px solid #B6533E;
  margin: 2.6rem 0;
  padding: 0.4rem 0 0.4rem 1.5rem;
  font-family: Oswald, sans-serif;
  font-style: normal;
  font-weight: 600;
  text-transform: uppercase;
  font-size: clamp(1.35rem, 2.2vw, 1.75rem);
  line-height: 1.3;
  letter-spacing: 0.01em;
  max-width: none;
  text-align: left;
  color: #1B1B1B;
}

/* Keep Reading */
.arcadia-related {
  max-width: 52rem;
  margin: clamp(3rem, 6vw, 5rem) auto 0;
  border-top: 1px solid rgba(27, 27, 27, 0.15);
  padding: clamp(2rem, 4vw, 3rem) 0 clamp(3rem, 5vw, 4rem);
}
.arcadia-related_head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 1.8rem;
}
.arcadia-related_head h2 {
  font-family: Oswald, sans-serif;
  text-transform: uppercase;
  font-size: 1.2rem;
  letter-spacing: 0.1em;
  margin: 0;
}
.arcadia-related_head a {
  font-family: Oswald, sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.85rem;
  color: #B6533E;
}
.arcadia-related_head a:hover { color: #259591; }
.arcadia-related_grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.5rem, 3vw, 2.5rem);
}
.arcadia-rel_card {
  display: grid;
  grid-template-columns: 7rem minmax(0, 1fr);
  gap: 1rem;
  align-items: center;
  text-decoration: none;
  color: inherit;
}
.arcadia-rel_thumb {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 8px;
  background-color: #f0eae0;
  background-size: cover;
  background-position: center;
}
.arcadia-rel_kicker {
  font-family: Oswald, sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.7rem;
  color: rgba(27, 27, 27, 0.55);
  margin-bottom: 0.35rem;
}
.arcadia-rel_title {
  font-family: Oswald, sans-serif;
  font-weight: 600;
  font-size: 1.15rem;
  line-height: 1.25;
  margin: 0;
  color: #1B1B1B;
}
.arcadia-rel_card:hover .arcadia-rel_title { color: #259591; }

@media (max-width: 640px) {
  .arcadia-related_grid { grid-template-columns: 1fr; }
}
.arcadia-article_body blockquote em { font-style: normal; }

/* ============================================================
 * Article motion (Ardens-style, 2026-07-13) — pairs with
 * assets/js/arcadia-article-motion.js. All rules gated behind
 * html.arcadia-art-motion so no-JS/reduced-motion stays static.
 * ============================================================ */
@keyframes artRise {
  from { opacity: 0; transform: translateY(26px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Load stagger: back link → title → byline → meta strip → hero */
html.arcadia-art-motion .arcadia-article_header > * {
  animation: artRise 0.7s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}
html.arcadia-art-motion .arcadia-article_header > :nth-child(1) { animation-delay: 0.05s; }
html.arcadia-art-motion .arcadia-article_header > :nth-child(2) { animation-delay: 0.15s; }
html.arcadia-art-motion .arcadia-article_header > :nth-child(3) { animation-delay: 0.28s; }
html.arcadia-art-motion .arcadia-article_header > :nth-child(4) { animation-delay: 0.38s; }
html.arcadia-art-motion .arcadia-article_hero-bleed {
  animation: artRise 0.9s cubic-bezier(0.22, 0.61, 0.36, 1) 0.45s both;
}

/* Scroll reveal for body blocks + Keep Reading */
html.arcadia-art-motion .art-reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.65s cubic-bezier(0.22, 0.61, 0.36, 1),
              transform 0.65s cubic-bezier(0.22, 0.61, 0.36, 1);
}
html.arcadia-art-motion .art-reveal.is-in {
  opacity: 1;
  transform: translateY(0);
}

/* Ardens-style slow scale on related thumbs */
.arcadia-rel_thumb {
  overflow: hidden;
  transition: transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.arcadia-rel_card:hover .arcadia-rel_thumb { transform: scale(1.04); }
/* If the a11y widget enables reduced motion after load, force everything visible */
html.a11y-motion .art-reveal,
html.a11y-motion .arcadia-article_header > *,
html.a11y-motion .arcadia-article_hero-bleed {
  opacity: 1 !important;
  transform: none !important;
  animation: none !important;
  transition: none !important;
}

/* Article pages show the real in-nav logo — centre the glyph on the page,
   not on its (asymmetric) flex slot. */
body:has(.arcadia-article_section) .navbar_menu { position: relative; }
body:has(.arcadia-article_section) .navbar_logo-link-menu {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  justify-content: center;
  align-items: center;
  width: auto !important;
  min-width: 0 !important;
}

/* ============================================================
 * Resources hub — R1 "Editorial Front Page" (picked 2026-07-13)
 * Narrow 58rem column, masthead with ink rule + filter pills,
 * lead story image-left, compact thumb rows.
 * ============================================================ */
.arcadia-masthead .container-large,
.section_forum-posts .container-large {
  max-width: 58rem !important;
}
.arcadia-masthead { padding: clamp(5rem, 9vw, 7rem) 0 0; }
.arcadia-masthead_row {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 2rem;
  border-bottom: 3px solid #1B1B1B;
  padding-bottom: 1.2rem;
  flex-wrap: wrap;
}
.arcadia-masthead_title {
  font-family: Oswald, sans-serif;
  font-weight: 600;
  font-size: clamp(2.6rem, 5vw, 4rem) !important;
  line-height: 0.95;
  letter-spacing: -0.01em;
  /* This rule used to zero the margin, cancelling the 1rem set above and
     leaving the dek sitting directly under the headline. */
  margin: 0 0 clamp(0.75rem, 1.4vw, 1.15rem);
}
.arcadia-masthead_dek {
  font-size: 0.95rem;
  opacity: 0.6;
  margin: 0.3rem 0 0;
}
/* Toolbar lives in the masthead now: pills + search + toggle, right-aligned */
.arcadia-forum-toolbar {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.8rem;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}
.arcadia-forum-filters { gap: 0.5rem; }
.arcadia-forum-filter {
  font-family: Oswald, sans-serif;
  text-transform: uppercase;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  padding: 0.45rem 1rem !important;
  border: 1px solid rgba(27,27,27,0.25) !important;
  border-radius: 999px !important;
  background: transparent !important;
  color: #1B1B1B !important;
}
.arcadia-forum-filter.is-active {
  background: #1B1B1B !important;
  color: #FFF7F2 !important;
  border-color: #1B1B1B !important;
}
.arcadia-forum-tools { display: flex; align-items: center; gap: 0.8rem; }
.arcadia-forum-tools .form_input {
  height: 2.3rem;
  border-radius: 999px;
  font-size: 0.85rem;
}
/* Lead story — image left, text right */
#forum-featured-slot .arcadia-featured {
  display: grid !important;
  grid-template-columns: 1.25fr 1fr;
  gap: clamp(1.5rem, 3vw, 3rem);
  align-items: center;
  padding: 2rem 0 2.4rem;
  border-bottom: 1px solid rgba(27,27,27,0.15);
}
#forum-featured-slot .arcadia-featured_image {
  order: -1;
  aspect-ratio: 16 / 10;
  width: 100%;
  height: auto !important;
  min-height: 0 !important;
  border-radius: 10px;
  background-size: cover;
  background-position: center;
}
#forum-featured-slot .arcadia-featured_kicker {
  font-family: Oswald, sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 0.72rem;
  color: #259591;
  font-weight: 600;
}
#forum-featured-slot .arcadia-featured_kicker span { color: #B6533E; margin-right: 0.6rem; }
#forum-featured-slot .arcadia-featured_title {
  font-family: Oswald, sans-serif;
  font-weight: 600;
  font-size: clamp(1.8rem, 3.2vw, 2.6rem);
  line-height: 1.05;
  text-transform: none;
  margin: 0.5rem 0 0.8rem;
  color: #1B1B1B;
}
#forum-featured-slot .arcadia-featured:hover .arcadia-featured_title { color: #259591; }
#forum-featured-slot .arcadia-featured_dek {
  font-size: 1rem;
  line-height: 1.6;
  opacity: 0.75;
  margin: 0 0 1rem;
}
#forum-featured-slot .arcadia-featured_date {
  font-family: Oswald, sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.72rem;
  opacity: 0.5;
}
/* List rows — square thumb left, kicker+title centre, date right */
#forum-posts[data-view="list"] .arcadia-forum-card {
  grid-template-columns: 11rem minmax(0, 1fr) !important;
  column-gap: 1.5rem;
  padding: 1.15rem 0 !important;
  align-items: center;
}
#forum-posts[data-view="list"] .forum_list-item_content-image {
  grid-column: 1;
  grid-row: 1;
  width: 11rem !important;
  aspect-ratio: 16 / 10 !important;
  border-radius: 8px;
}
#forum-posts[data-view="list"] .forum_list-item_content-left {
  grid-column: 2;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 1.4rem;
  width: 100%;
}
#forum-posts[data-view="list"] .arcadia-forum-card .text-size-regular {
  font-size: 1.35rem !important;
  line-height: 1.15;
}
@media (max-width: 700px) {
  .arcadia-masthead_row { align-items: flex-start; flex-direction: column; }
  .arcadia-forum-toolbar { align-items: flex-start; }
  #forum-featured-slot .arcadia-featured { grid-template-columns: 1fr; }
  #forum-posts[data-view="list"] .forum_list-item_content-left { grid-template-columns: 1fr; gap: 0.3rem; }
}
/* R1 polish: clean rounded lead image (kill the legacy i-dot clip),
   and no floating logo colliding with the editorial column */
#forum-featured-slot .arcadia-featured_image { clip-path: none !important; }
body:has(.arcadia-masthead) .navbar_menu { position: relative; }
body:has(.arcadia-masthead) .navbar_logo-link-menu {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  justify-content: center;
  align-items: center;
  width: auto !important;
  min-width: 0 !important;
}
/* R1 final trim: no search/toggle; more air above the masthead */
.arcadia-masthead { padding-top: clamp(8rem, 14vw, 12rem) !important; }
.arcadia-forum-toolbar { flex-direction: row; align-items: flex-end; }
/* Tighten featured→list gap */
#forum-featured-slot .arcadia-featured { padding-bottom: 1.8rem !important; }
#forum-posts { margin-top: 0 !important; padding-top: 0 !important; }

/* ============================================================
 * Certificate-program CTA band on home (8 Jul call: front-facing
 * entry point for the Disability Awareness Leader Certificate Program)
 * ============================================================ */
.arcadia-cert-cta {
  background: #FFF7F2;
  color: #1B1B1B;
  padding: clamp(3rem, 6vw, 5rem) 0;
  border-top: 1px solid rgba(27,27,27,0.12);
}
.arcadia-cert-cta_inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: clamp(1.5rem, 4vw, 4rem);
  flex-wrap: wrap;
}
.arcadia-cert-cta_kicker {
  font-family: Oswald, sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-size: 0.75rem;
  font-weight: 600;
  color: #B6533E;
  margin-bottom: 0.6rem;
}
.arcadia-cert-cta_title {
  font-family: Oswald, sans-serif;
  font-weight: 600;
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  line-height: 1.05;
  margin: 0 0 0.6rem;
  max-width: 34ch;
}
.arcadia-cert-cta_line {
  font-size: 1rem;
  line-height: 1.6;
  opacity: 0.75;
  margin: 0;
  max-width: 52ch;
}
.arcadia-cert-cta_btn {
  flex: none;
  font-family: Oswald, sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.95rem;
  font-weight: 600;
  background: #259591;
  color: #FFF7F2;
  padding: 1rem 1.8rem;
  transition: background 0.25s ease, transform 0.25s ease;
}
.arcadia-cert-cta_btn:hover { background: #1B1B1B; transform: translateY(-2px); }

/* Sponsor logo wall — Partners page (Scott review #111) */
.section_sponsors{background-color:#fff;}
.arcadia-sponsor-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:3rem 3.5rem;align-items:center;justify-items:center;}
.arcadia-sponsor-logo{display:flex;align-items:center;justify-content:center;}
.arcadia-sponsor-logo img{max-height:3.75rem;width:auto;max-width:100%;object-fit:contain;}
/* The grid caps by height, so a portrait or square mark ends up half the
   width of a wordmark at the same cap - Rebel Clothing is a Diamond sponsor
   and was rendering as the smallest logo on the page. Give tall marks more
   height so they carry comparable visual weight. */
.arcadia-sponsor-logo.is-tall img{max-height:5.5rem;}
@media (max-width:767px){
  .arcadia-sponsor-grid{grid-template-columns:repeat(2,1fr);gap:2rem;}
  .arcadia-sponsor-logo img{max-height:3rem;}
}

/* Support page: compact stat strip + scholar story cards */
.arcadia-support_statstrip { padding: clamp(4rem, 8vw, 7rem) 0; }
.statstrip_kicker { font-family: Oswald, sans-serif; font-weight: 600; font-size: 1rem; letter-spacing: .06em; text-align: center; margin-bottom: clamp(1.5rem, 3vw, 2.5rem); }
.statstrip_grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; text-align: center; }
.statstrip_number { font-family: Oswald, sans-serif; font-weight: 700; font-size: clamp(2.4rem, 4vw, 3.6rem); line-height: 1; color: #099090; }
.statstrip_label { font-size: .95rem; margin-top: .6rem; }
@media (max-width: 767px) {
  .statstrip_grid { grid-template-columns: repeat(2, 1fr); }
}

.support-give_block { margin-top: clamp(3rem, 6vw, 5rem); scroll-margin-top: 6rem; }
.support-give_cta { display: inline-block; margin-top: 1rem; margin-right: 1.75rem; color: #099090; font-weight: 600; text-decoration: none; }
.support-give_cta:hover { text-decoration: underline; }

.arcadia-support_give, .arcadia-support_ways { padding: clamp(4rem, 8vw, 7rem) 0; }
.arcadia-support_give .owr-rows, .arcadia-support_ways .owr-rows { margin-top: clamp(2rem, 4vw, 3rem); }
.arcadia-support_cta { padding-top: clamp(4rem, 8vw, 7rem); padding-bottom: 0; }
.arcadia-support_ways .heading-style-h3, .arcadia-support_give .heading-style-h3 { margin-bottom: clamp(1rem, 2vw, 1.75rem); }

.arcadia-support_cards, .arcadia-cards_padded { padding-bottom: clamp(3rem, 6vw, 5rem); }

/* Keep post-hero sections above the pinned hero cover (it overhangs ~150svh) */
.arcadia-support_statstrip, .arcadia-support_give, .arcadia-support_ways, .arcadia-cert-cta {
  position: relative; z-index: 3; background-color: #FFF7F2;
}
.arcadia-support_cards { position: relative; z-index: 3; }

/* ── Leadership: give each member clear vertical ownership ──────────────
   The sticky photo panel (leadership-photos.js) follows whichever member
   block is nearest the viewport centre. At the previous ~270px block
   height three members were on screen at once, so the photo committed to
   one person while you were reading another — "who is who" was ambiguous
   (Joseph, 2026-09-07). Each block now claims enough height that one
   member owns the centre band at a time, and the name binds to its OWN
   bio via asymmetric padding rather than sitting equidistant between two.
   Scoped to .section_leadership-team so the directors/board sections and
   every other accordion on the site are untouched. */
.section_leadership-team .leadership-accordion_component {
  min-height: 52vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding-top: 3.2rem;
}
/* Last member ends tight: trailing dead space would unstick the photo
   panel early and leave an empty column at the foot of the list. */
.section_leadership-team .leadership-accordion_component:last-child {
  min-height: 0;
  padding-bottom: 2rem;
}
.section_leadership-team .leadership_content-item {
  padding-top: 0;
  padding-bottom: 1.1rem;
}
.section_leadership-team .leadership_member-position {
  font-size: 1rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--_primitives---opacity--white-40);
  opacity: 1;
  margin-bottom: .55rem;
}
.section_leadership-team .leadership_accordion-top {
  align-items: flex-end;
}
@media (max-width: 991px) {
  .section_leadership-team .leadership-accordion_component { min-height: 0; }
  .section_leadership-team .leadership_content-item { padding-top: 2.5rem; }
}

/* ── Home: below-hero sections must be opaque and above the hero ────────
   Written when a big wordmark sat at z-index 1 and these sections had to
   cover it as they scrolled over the sticky hero (Joseph, 2026-09-07).
   The wordmark is gone, but the rules stay: several of these sat at
   z-index 1/3 and the two stats sections had no background of their own,
   so the body cream showed through the sticky hero regardless. */
body:not(.is-logo-intro) .section_hero-after,
body:not(.is-logo-intro) .section_expect,
body:not(.is-logo-intro) .arcadia-cert-cta,
body:not(.is-logo-intro) .section_leadership-cards {
  position: relative;
  z-index: 5;
}
body:not(.is-logo-intro) .section_home-stats,
body:not(.is-logo-intro) .section_after-stats {
  background-color: #FFF7F2;
}

/* ── Nav logo slot ──────────────────────────────────────────────────────
   The slot used to be a dead spacer with pointer-events:none, because the
   floating wordmark was the real home link and a second, offset click
   target in the nav was confusing (Joseph, 2026-09-07). With one logo
   living in the slot, the slot is the link again. */

/* ── Nav row: one grid definition for every page ────────────────────────
   This rule previously lived ONLY in index.html's inline <style>, so the
   home page laid its nav out as a locked 5-column grid while every other
   page fell back to flex — the nav was visibly wider/narrower depending
   which page you were on (Joseph, 2026-09-08). Desktop only: below 992px
   the Webflow hamburger takes over and we must not force the link row to
   show. Not gated on .is-logo-intro — the row has to be this grid from
   first paint or it flips flex→grid when the intro ends and jumps. */
@media (min-width: 992px) {
  .navbar_menu.scaling-nav_panel {
    display: grid !important;
    grid-template-columns: 1fr 1fr auto 1fr 1fr;
    align-items: center;
    justify-items: center;
  }
}

/* ── Masthead + article pages: use the same nav grid as everywhere else ──
   Those pages hide the persistent stand-in and show the real nav logo, and
   they centred it with position:absolute back when the nav row was flex and
   had no guaranteed centre slot. With the grid rule above now applied site
   wide, the "auto" track IS dead centre — but an absolutely positioned grid
   item is out of flow, so that track collapsed to ~0 and the four links
   landed at different x positions than on every other page (measured
   [165,494,720,946] vs [161,484,956,1279]). On desktop, put the logo back in
   its grid cell so the nav row is identical everywhere. Below 992px the
   hamburger takes over and the original absolute centring still applies. */
@media (min-width: 992px) {
  body:has(.arcadia-article_section) .navbar_logo-link-menu,
  body:has(.arcadia-masthead) .navbar_logo-link-menu {
    position: static;
    transform: none;
    width: 150px !important;
    min-width: 150px !important;
  }
}

/* ==========================================================================
   ACCESSIBILITY — WCAG 2.1 AA colour contrast
   --------------------------------------------------------------------------
   The inherited Webflow build sets secondary text with very low alpha tokens
   (white-20/white-40, neutral-darkest-40) and low `opacity`, which land
   between 1.5:1 and 3.8:1 against their backgrounds. AA wants 4.5:1 for body
   text and 3:1 for large text.

   Every value below was measured against its real composited background and
   targets roughly 5:1 — enough headroom to stay compliant, not so much that
   the muted hierarchy collapses into full-strength text.

   The brand teal #259591 is 3.63:1 on white, so it cannot carry small text.
   --brand-teal-accessible (#1A7B77) is the same hue at 5.07:1 on white and
   4.79:1 on cream. #259591 is still fine for large display type (3:1 bar)
   and is deliberately left alone there.
   ========================================================================== */

:root {
  --brand-teal: #259591;
  --brand-teal-accessible: #1A7B77;  /* small text + button fills */
  --a11y-on-dark: rgba(255, 255, 255, 0.50);      /* 5.19:1 on #1b1b1b */
  --a11y-on-dark-teal: rgba(255, 255, 255, 0.62); /* 5.01:1 on #064846 */
  --a11y-muted-on-light: rgba(0, 5, 4, 0.59);     /* 5.31:1 on #ffffff */
  --a11y-muted-on-light-lg: rgba(0, 5, 4, 0.47);  /* 3.48:1 — large text only */
}

/* --- secondary text on the near-black ground (#1b1b1b) --- */
.cta38_link-text-small,
.contact_list-item_subtitle { color: var(--a11y-on-dark); }
.cta_content-item_text { opacity: 1; color: var(--a11y-on-dark); }
.arcadia-credit { opacity: 1; color: rgba(244, 244, 244, 0.62); }
.arcadia-credit:hover { opacity: 1; color: #f4f4f4; }

/* --- leadership positions: white ground and dark-teal ground --- */
.section_leadership-team .leadership_member-position,
.leadership_member-position { color: var(--a11y-on-dark-teal); opacity: 1; }
.leadership_member-position.text-opacity-40 { color: var(--a11y-muted-on-light); }

/* --- muted subtitles on light grounds --- */
/* 16.2px is not WCAG "large text", so the large-text token (3.48:1) does not
   apply here — use the body-text token. */
.hero-stories_content_subtitle { color: var(--a11y-muted-on-light); }
.arcadia-featured_dek,
.arcadia-featured_kicker { color: var(--a11y-muted-on-light); }
#forum-featured-slot .arcadia-featured_dek { opacity: 1; color: var(--a11y-muted-on-light); }
.arcadia-featured_date { opacity: 1; color: var(--a11y-muted-on-light); }
#forum-featured-slot .arcadia-featured_date { opacity: 1; color: var(--a11y-muted-on-light); }

/* --- article dates were #b1aeae at 55% opacity = 1.51:1, effectively invisible --- */
.forum_content_date,
#forum-posts[data-view="list"] .forum_content_date,
#forum-posts[data-view="grid"] .forum_content_date { color: #6e6b6b; opacity: 1; }

/* --- teal used as small text --- */
.forum_content_subtitle,
#forum-posts[data-view="list"] .forum_content_subtitle,
#forum-posts[data-view="grid"] .forum_content_subtitle,
#forum-featured-slot .arcadia-featured_kicker,
.arcadia-vision_eyebrow,
.support-give_cta,
.statstrip_number,
.arcadia-article_back:hover,
.arcadia-rel_card:hover .arcadia-rel_title { color: var(--brand-teal-accessible); }

/* --- white-on-teal button fills were 3.63:1 --- */
/* .is-alternate buttons carry dark ink, which is already 5.65:1 on #259591 and would
   DROP to 4.05:1 on the darker teal — so they deliberately keep the original brand fill. */
.button:not(.is-secondary):not(.is-link):not(.is-alternate),
.w-button:not(.is-secondary):not(.is-link):not(.is-alternate) { background-color: var(--brand-teal-accessible); }
.button.is-alternate, .w-button.is-alternate { background-color: var(--brand-teal); }

/* --- footer credit: the parent .footer16_credit-text sets opacity .5, which dragged the
       Arcadia credit link to 2.65:1 no matter what colour the link itself carried --- */
.footer16_credit-text { opacity: 1; color: rgba(244, 244, 244, 0.62); }

/* --- remaining muted text on light grounds --- */
.arcadia-rel_kicker { color: rgba(27, 27, 27, 0.66); }
.hof-list_num { opacity: 1; color: rgba(27, 27, 27, 0.66); }
.golf-meta_label, .golf-meta_note, .golf-placeholder { opacity: 1; color: rgba(27, 27, 27, 0.66); }

/* --------------------------------------------------------------------------
   Teal used as SMALL TEXT, or as a fill behind small text.
   axe cannot trigger :hover / :focus-visible / .is-active headlessly, so these
   never showed up in the audit — but a mouse or keyboard user meets every one
   of them. #259591 is 3.63:1 against white and 3.43:1 against cream, so it
   fails AA in both directions here.

   Teal used decoratively (icons, arrows, large display type, the diagonal
   motifs) stays #259591 — 3.63:1 clears the 3:1 bar for graphics and large
   text, and the brand mark should not drift.
   -------------------------------------------------------------------------- */

/* teal as text */
.arcadia-article_tag,
.arcadia-article_metarow .arcadia-article_tag,
.arcadia-article_body a,
.forum_filter-item.is-active,
.navbar_dropdown-link.w-dropdown-link.w--current,
.arcadia-mega_secondary-heading,
.arcadia-name-meaning_word,
.arcadia-about_hero-b1 .b1_outcome,
.program_tabs_link.w--current,
.arcadia-forum-card:hover .text-size-regular,
.arcadia-related_head a:hover,
.arcadia-featured:hover .arcadia-featured_title,
#forum-featured-slot .arcadia-featured:hover .arcadia-featured_title,
.a11y-widget_reset:hover,
.arcadia-forum-filter:focus-visible { color: var(--brand-teal-accessible); }

.a11y-widget_reset:hover,
.arcadia-forum-filter:focus-visible,
.arcadia-off_cta:hover { border-color: var(--brand-teal-accessible); }

/* teal as a fill behind small text — cream on #259591 is 3.43:1 */
.arcadia-event-banner,
.arcadia-forum-filter.is-active,
.cta_content-item.content_button:hover,
.arcadia-pagination_btn:hover:not(:disabled),
.navbar_dropdown-link.w-dropdown-link:focus-visible,
.arcadia-mega_link.w-dropdown-link:focus-visible,
.arcadia-mega_container:has(.arcadia-mega_secondary:hover) .arcadia-mega_offerings-trigger { background-color: var(--brand-teal-accessible); }
.arcadia-forum-filter.is-active,
.arcadia-pagination_btn:hover:not(:disabled) { border-color: var(--brand-teal-accessible); }

/* Article byline + meta row sat at rgba(27,27,27,.6) = 4.45:1 on the cream ground —
   a hair under AA. Only visible with reduced motion on, since the reveal animation
   otherwise keeps them transparent when a scanner looks. */
.arcadia-article_byline,
.arcadia-article_metarow { color: rgba(27, 27, 27, 0.66); }

/* Remaining light-on-teal fills — cream (#fff7f2) on #259591 is 3.42:1.
   The a11y widget toggle is a control, so it moves too. */
.a11y-widget_toggle,
.arcadia-forum-view.is-active,
.arcadia-cert-cta_btn { background-color: var(--brand-teal-accessible); }

/* --------------------------------------------------------------------------
   WCAG 2.2 SC 2.5.8 — Target Size (Minimum), 24x24 CSS px.
   Caught by a Playwright device pass, not by axe: the earlier audit ran
   wcag2a/wcag2aa/wcag21a/wcag21aa tags, and target size is a 2.2 criterion.

   These links are all height-limited rather than narrow — the clickable box is
   just the line box, 17-21px tall. Footer nav sat at 20-21px, the legal link at
   18-19px, and the gala banner link at 17-19px on every page.

   Fixed with padding plus an equal negative margin, so the hit area grows to
   28px while the element occupies exactly the same space in flow — no visual
   change to the footer or banner. For the banner link, which is already
   inline-flex, min-height does the same job more directly.
   -------------------------------------------------------------------------- */

.footer16_link,
.footer16_legal-link {
  padding-block: 4px;
  margin-block: -4px;
}

.arcadia-event-banner_link { min-height: 24px; }

/* --------------------------------------------------------------------------
   WCAG 2.4.1 Bypass Blocks (Level A) — skip link.
   There was no skip link on any page, so a keyboard or switch user had to tab
   through the announcement banner, the logo and every nav dropdown before
   reaching content, on every single page. Roughly 15 stops before the first
   heading.

   Hidden until focused, then pinned top-left above everything.
   -------------------------------------------------------------------------- */
.arcadia-skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100000;
  padding: 0.75rem 1.25rem;
  background: #1b1b1b;
  color: #fff7f2;
  font-family: Oswald, sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.9rem;
  text-decoration: none;
  border-radius: 0 0 4px 0;
}
.arcadia-skip-link:focus {
  left: 0;
  outline: 3px solid var(--brand-teal-accessible);
  outline-offset: 2px;
}
/* the skip target should not draw a focus ring when jumped to */
#main-content:focus { outline: none; }

/* --------------------------------------------------------------------------
   WCAG 2.4.7 Focus Visible (AA) — keyboard focus indicators.
   Found by tabbing every page with Playwright rather than by axe, which cannot
   evaluate focus styles.

   Three gaps:
   - .banner10_close-button had no focus rule at all, on every page.
   - .form_input relied on a border-colour change alone, and on :focus rather
     than :focus-visible. A 1px border shifting to near-black on a light border
     is not a clear indicator, and it fails the WCAG 2.2 focus-appearance bar.
   - .arcadia-forum-filter sets outline:none and signals focus only with a faint
     background tint.

   :focus-visible only, so mouse users see no change.
   -------------------------------------------------------------------------- */
.banner10_close-button:focus-visible,
.arcadia-forum-filter:focus-visible,
.arcadia-forum-view:focus-visible,
.arcadia-pagination_btn:focus-visible,
.form_input:focus-visible,
select.form_input:focus-visible,
textarea.form_input:focus-visible,
.button:focus-visible,
.w-button:focus-visible {
  outline: 3px solid var(--brand-teal-accessible);
  outline-offset: 2px;
}

/* On the near-black grounds the teal ring is too low-contrast against the
   background itself, so those get a light ring instead. */
.color-scheme-4 .button:focus-visible,
.color-scheme-4 .w-button:focus-visible,
.banner10_close-button:focus-visible {
  outline-color: #fff7f2;
}

/* History page body — merged copy from the Arcadia Merge doc (Sept 2026) */
.arcadia-history_body .arcadia-off_dek { margin: 0 0 1.4rem; max-width: 46rem; }
.arcadia-history_h2 {
  font-family: Oswald, sans-serif;
  font-size: clamp(1.5rem, 2.8vw, 2rem);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  margin: 2.6rem 0 1rem;
}
.arcadia-history_list { margin: 0 0 2rem; padding-left: 1.2rem; max-width: 46rem; }
.arcadia-history_list li { margin-bottom: 0.7rem; line-height: 1.55; }


/* (Offerings, hero-stories and contact pages used to opt out of the big
   floating wordmark one by one -- Joseph asked for the inline nav logo four
   times in review. Every page does it that way now, so the opt-outs are
   gone.) */

/* Nav logo was sitting 35px left of centre on the inline-logo pages.
   .navbar_logo-link-menu is display:block, so the 80px SVG aligned flush
   left inside the 150px link and then scaled 1.5x about its own centre.
   .navbar3_logo-link already centres its child this way. */
.navbar_logo-link-menu {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Footer links: grey at rest, white on hover (Joseph, review Sept 2026) */
.footer16_link {
  color: rgba(255, 247, 242, 0.62);
  transition: color .18s ease;
}
.footer16_link:hover,
.footer16_link:focus-visible {
  color: #FFF7F2;
}
.footer16_legal-link {
  transition: opacity .18s ease, color .18s ease;
}
.footer16_legal-link:hover,
.footer16_legal-link:focus-visible {
  opacity: 1;
  color: #FFF7F2;
}

/* Crossfade layer for the leadership photo panel (leadership-photos.js) */
.leadership_grid_image { position: relative; }
.leadership_grid_image-fade {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  opacity: 0;
  pointer-events: none;
}

/* Board of Directors: heading stays in view while the member list scrolls,
   mirroring the Leaders photo panel (Joseph, review Sept 2026). */
.board-of-directors .leadership_grid_title {
  position: sticky;
  top: 5.5rem;
  align-self: flex-start;
}

/* Leadership diagonal: the SVG scaled to its 1440x284 viewBox, which is
   ~11 degrees at ANY width - shallow enough to read as horizontal
   (Joseph, review Sept 2026). preserveAspectRatio="none" lets it stretch
   vertically; 34vw puts the edge near 19 degrees.
   Height grew by 34 - 19.72 = 14.28vw, so pull `top` up by that much to
   keep the bottom edge where it was, and cancel the growth with a
   matching negative margin so nothing below shifts. */
.leadership-diagonal-mask svg {
  display: block;
  width: 100%;
  height: 26vw;
}
.leadership-diagonal-mask {
  /* The mask is the FIRST child of .section_leadership-team and is pulled up
     over the hero photo. Webflow's `top: -16.9rem` did not equal the SVG's
     height, so the triangle's bottom-left vertex landed ~12px BELOW the
     section's top edge. For that 12px the boundary between photo and green
     was the section's flat top, not the diagonal - a horizontal step ~50px
     wide at the left edge (Joseph, 14 Sept: "there needs to be zero overlap").
     Tying `top` to the same 26vw as the SVG puts the vertex exactly on the
     section edge; the extra 1px is deliberate, so sub-pixel rounding can
     never open a gap and let the photo bleed through as a hairline.
     margin-bottom keeps the flow height at Webflow's original 19.72vw. */
  top: calc(-26vw + 1px);
  margin-bottom: -6.28vw;
}

/* The three diagonals all fill with `currentColor`, and each has to read as
   the block it flows into. This one was on the deep-sea-green-dark token
   (#054845) while .section_leadership-team is #064846 - one step apart, but
   it is a full-width edge, so match it exactly. */
.leadership-diagonal-mask { color: #064846; }

/* Same defect, same fix, on the other two masks. Webflow pushed the white
   directors diagonal 0.5rem past its section, which put a ~36px flat step at
   the left edge; the footer diagonal sat at exactly 0, which risks the
   opposite - a hairline of the cream page behind. 1px both ways. */
/* The SVG is inline by default, so the div that holds it is ~6px taller than
   the artwork (baseline leading). That dead band is transparent, so the green
   section behind showed as a bar under the white diagonal. Collapse it, then
   the 1px offset actually lands where it is meant to. */
.leadership-directors-mask svg,
.sticky-leadership-diagonal-mask svg { display: block; }
.leadership-directors-mask,
.sticky-leadership-diagonal-mask { line-height: 0; }

.leadership-directors-mask { bottom: -1px; }
.sticky-leadership-diagonal-mask { top: 1px; }

/* The wordmark should pass BEHIND the rising diagonal, as it does on home
   (Joseph, review Sept 2026). The stand-in is fixed at z-index 1100 on the
   body, so the mask has to clear that — and its section traps it at z-index 1,
   hence lifting both. The mask takes no pointer events, so the nav underneath
   stays clickable where they overlap. */
.leadership-diagonal-mask { pointer-events: none; }
/* Raising the mask could never work: .section_hero-after opens a stacking
   context at z-index 5, so everything inside is capped there against the
   body-level wordmark at 1100. Drop the wordmark below that context on this
   page instead - the same trick home uses. */
/* Story cards: the base .header19_image rule sets height:100%, which defeats
   aspect-ratio (it only applies when height is auto). Photos happen to be
   1.91:1 so they looked right; the team-proxy.svg placeholder on Karen
   Gaffney's card stretched taller and threw the row out of alignment
   (Joseph, review Sept 2026). */
.offering-perks_card-image .header19_image {
  height: auto;
}
/* More room around each story, closer to the article pages */
.hero_stories-card_item {
  padding-block: clamp(2.5rem, 5vw, 4.5rem);
}

/* Hero Stories statement: pin it while the cards section scrolls up over it,
   rather than letting it scroll away (Joseph, review Sept 2026).
   The statement sits in a dark band; the cards section needs an opaque
   background and a higher layer so it wipes cleanly over the top. */
.section_stories-after-hero .section_after-hero_layout,
.section_after-hero_layout.section_stories-after-hero {
  position: sticky;
  top: 0;
  z-index: 1;
}
.section_stories-potential {
  position: relative;
  z-index: 2;
  background-color: #FFF7F2;
}

/* Offerings detail hero image (Joseph, review Sept 2026 — "we need images
   on these pages"). */
.arcadia-off_hero-image {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 7;
  object-fit: cover;
  border-radius: var(--_ui-styles---radius--large, 12px);
  margin-top: clamp(1.8rem, 3vw, 2.8rem);
}

/* ==========================================================================
   Hero Stories — featured films (Scott, Jake, Margaret)
   ========================================================================== */
.story-films { margin-bottom: clamp(4rem, 8vw, 7.5rem); }

/* Wider and a touch tighter than it was: this heading carried the three-word
   "In their own words" and now carries a full sentence (Joseph, 17 Sep). */
.story-films_head { max-width: 52rem; margin: 0 0 clamp(2.5rem, 4vw, 4rem); }
.story-films_eyebrow {
  font-family: Oswald, sans-serif; text-transform: uppercase;
  letter-spacing: .3em; font-size: .75rem; color: #B6533E; margin-bottom: 1rem;
}
.story-films_title {
  font-family: Oswald, sans-serif; text-transform: uppercase; font-weight: 600;
  font-size: clamp(1.75rem, 4vw, 3rem); line-height: 1.05; letter-spacing: -.01em;
  margin: 0; color: #1B1B1B; text-wrap: balance;
}
.story-films_dek { margin: 0; font-size: 1.0625rem; line-height: 1.55; color: rgba(27,27,27,.72); }

.story-films_grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.5rem, 2.6vw, 2.75rem); align-items: start;
}

.story-film { display: flex; flex-direction: column; }

/* media well */
.story-film_media {
  position: relative; display: block; width: 100%; padding: 0; border: 0;
  margin: 0 0 1.5rem; aspect-ratio: 16 / 9; overflow: hidden; cursor: pointer;
  background: #1B1B1B; border-radius: 2px; -webkit-appearance: none; appearance: none;
}
.story-film_poster {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .6s cubic-bezier(.2,.7,.3,1), filter .35s ease;
}
.story-film_media:hover .story-film_poster,
.story-film_media:focus-visible .story-film_poster { transform: scale(1.035); filter: brightness(.9); }
.story-film_media:focus-visible { outline: 3px solid #259591; outline-offset: 3px; }

.story-film_play {
  position: absolute; inset: 0; margin: auto; width: 4.25rem; height: 4.25rem;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; background: rgba(255,247,242,.92); color: #B6533E;
  transition: transform .3s cubic-bezier(.2,.7,.3,1), background-color .3s ease;
  pointer-events: none;
}
.story-film_play svg { width: 1.9rem; height: 1.9rem; margin-left: .18rem; }
.story-film_media:hover .story-film_play,
.story-film_media:focus-visible .story-film_play { transform: scale(1.08); background: #FFF7F2; }

.story-film_time {
  position: absolute; right: .75rem; bottom: .75rem; pointer-events: none;
  font-family: Oswald, sans-serif; font-size: .75rem; letter-spacing: .06em;
  padding: .25rem .5rem; border-radius: 2px;
  background: rgba(27,27,27,.72); color: #FFF7F2;
}

/* iframe swapped in on click */
.story-film_media.is-playing { cursor: default; }
.story-film_media.is-playing .story-film_play,
.story-film_media.is-playing .story-film_time,
.story-film_media.is-playing .story-film_poster { display: none; }
.story-film_media iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* copy */
.story-film_role {
  font-family: Oswald, sans-serif; text-transform: uppercase;
  letter-spacing: .16em; font-size: .7rem; color: #1F7D7A; margin-bottom: .6rem;
}
.story-film_name {
  font-family: Oswald, sans-serif; text-transform: uppercase; font-weight: 600;
  font-size: clamp(1.4rem, 2vw, 1.75rem); line-height: 1.05; margin: 0 0 1rem; color: #1B1B1B;
}
.story-film_quote {
  margin: 0 0 1rem; padding: 0 0 0 1rem; border-left: 2px solid #B6533E;
  font-size: 1.0625rem; line-height: 1.45; font-style: italic; color: #1B1B1B;
}
.story-film_note { margin: 0; font-size: .9375rem; line-height: 1.6; color: rgba(27,27,27,.72); }

/* divider into the secondary cards */
.story-films_divider {
  border-top: 1px solid rgba(27,27,27,.14);
  padding-top: clamp(2rem, 3.5vw, 3rem);
  margin-bottom: clamp(2.5rem, 4vw, 3.5rem);
}
.story-films_more {
  font-family: Oswald, sans-serif; text-transform: uppercase; font-weight: 600;
  letter-spacing: .02em; font-size: clamp(1.5rem, 3vw, 2.25rem); line-height: 1;
  margin: 0; color: #1B1B1B;
}

@media (max-width: 991px) {
  .story-films_grid { grid-template-columns: repeat(2, 1fr); }
  .story-films_grid .story-film:last-child { grid-column: 1 / -1; max-width: 32rem; }
}
@media (max-width: 767px) {
  .story-films_grid { grid-template-columns: 1fr; }
  .story-films_grid .story-film:last-child { grid-column: auto; max-width: none; }
  .story-film_play { width: 3.5rem; height: 3.5rem; }
  .story-film_play svg { width: 1.5rem; height: 1.5rem; }
}
@media (prefers-reduced-motion: reduce) {
  .story-film_poster, .story-film_play { transition: none; }
  .story-film_media:hover .story-film_poster { transform: none; }
}

/* ==========================================================================
   Accessibility pass (2026-09-11)
   ========================================================================== */

/* The OFFERINGS toggle holds a real link, so a11y.js strips Webflow's
   role="button"/tabindex from it. Keyboard users then reach the link itself —
   open the menu on focus so they can see where it leads. */
.navbar_menu-dropdown:focus-within .navbar_dropdown-list {
  display: block;
  opacity: 1;
  transform: none;
}

/* Visible keyboard focus everywhere — Webflow's export ships none. */
a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible {
  outline: 3px solid #259591;
  outline-offset: 2px;
  border-radius: 2px;
}

/* The Support hero is rust (#B6533E) and the nav sits transparently on top of
   it. The inherited near-black nav text is 4.2:1 there — cream is 4.62:1. */
body:has(.section_support-header) .navbar_menu .navbar_link,
body:has(.section_support-header) .navbar_menu .navbar_dropdown-toggle,
body:has(.section_support-header) .navbar_menu .navbar_dropdown-toggle > div,
body:has(.section_support-header) .navbar_menu .navbar_dropdown-toggle-link {
  color: #FFF7F2;
}

/* ==========================================================================
   Vercel review round (2026-09-11)
   ========================================================================== */

/* Hero Stories cards: the item is a flex row with the arrow pushed to the far
   edge by space-between, but the grid inside was capped at max-width 64rem.
   On a wide monitor that left ~500px of dead space between the copy and the
   arrow. Let the grid take the room instead, so the card lines up with the
   films grid and the dividers above and below it. */
.hero_stories-card_item > .w-layout-grid.hero_stories-card_content {
  flex: 1 1 auto;
  min-width: 0;
  max-width: none;
}

/* Article hero: was a direct child of the section at full viewport width,
   while the header sits on a 46rem axis and the body on 42rem. Pull it onto
   the same axis as the header — despite the class name, it no longer bleeds. */
.arcadia-article_hero-bleed {
  max-width: 46rem;
  margin-inline: auto;
  padding-inline: 1.25rem;
}

/* /leadership overflowed horizontally on phones — 954px of document inside a
   390px viewport. Two causes: .leadership-accordion_component carries a hard
   min-width of 20.625rem (330px), and grid/flex children default to
   min-width:auto so they refuse to shrink below their content. Webflow's
   tablet breakpoint is 991px, so the release has to reach that far. */
@media (max-width: 991px) {
  .leadership-accordion_component {
    min-width: 0;
  }
  .leadership_grid_content,
  .leadership_grid_content > *,
  .leadership_grid_members-list,
  .leadership_grid_members-list > *,
  .leadership_accordion-top,
  .accordion2_top {
    min-width: 0;
  }
  .leadership_grid_content .max-width-small {
    max-width: 100%;
  }
  /* The accordion header row is flex-wrap:nowrap, so the name and role items
     ran off the side rather than stacking. */
  .leadership_accordion-top,
  .accordion2_top {
    flex-wrap: wrap;
  }
  .leadership_content-item,
  .leadership_member-position,
  .leadership_accordion-top .heading-style-h5 {
    min-width: 0;
    overflow-wrap: anywhere;
  }
}

/* Career & Life Vitality accordion image is an 800x1200 portrait dropped into a
   2.9/2.4 landscape box. Centred, the crop lands on Scott's chest and cuts his
   head off. Bias it up so both faces are in frame, keeping enough headroom for
   the clip-path that slices 12% off the top-left. */
.acc_media img[src*="home-portrait"] {
  object-position: center 10%;
}

/* Trademark glyph. Pia asked for the TM at a quarter of the body text
   (16 Sep). superscript default is ~0.83em, so set it explicitly and lift it
   rather than letting <sup> shift the line box. */
.tm {
  font-size: 0.25em;
  vertical-align: super;
  line-height: 0;
  letter-spacing: 0;
}

/* Jada and JD were supplied pre-cropped at 1.91:1 with the tops of their heads
   already cut off, so no object-position could recover them (Pia, 17 Sep).
   Both cards now point at the full 900x1200 portraits and let cover crop
   them; these anchor the visible band on the face rather than the middle. */
img[src*="090702b889044cd2bb604ec963cc0702-15cd63"] { object-position: 50% 18% !important; }
img[src*="30a482fd467e4d79bd25b801b37a9669-d231e0"] { object-position: 50% 14% !important; }

/* Hide-on-scroll nav (Joseph, 15 Sep call).

   Scroll down a fair way and the whole chrome -- banner and bar together --
   slides up out of the way; the smallest upward nudge brings it back. The
   asymmetry is deliberate: symmetric thresholds feel twitchy.

   The transform goes on .navbar_wrapper, NOT .navbar_component. The home
   page's intro logo is a position:fixed SVG that lives inside
   .navbar_component, and any transformed ancestor turns a fixed descendant
   into an absolute one -- so transforming the inner bar snapped the
   wordmark into the bar instead of leaving it on the viewport. For the same
   reason there is no will-change here: will-change:transform creates that
   containing block permanently, even at rest. */
body.nav-hidden .navbar_wrapper.w-nav { transform: translateY(-100%); }
/* An open dropdown or mega panel must never be left hanging off a bar that
   has slid away. */
body.nav-hidden .navbar_wrapper.w-nav:has(.w-dropdown-list.w--open) { transform: none; }
@media (prefers-reduced-motion: reduce) {
  .navbar_wrapper.w-nav { transition: none; }
}

/* ── The nav is white, always (Joseph, 17 Sep) ──────────────────────────
   The bar used to be transparent and gain a cream ground only past 140px
   of scroll, with the hero recolouring its text to cream while it sat over
   media. That meant a visible state change mid-scroll, a contrast problem
   over every dark band, and two colour systems fighting over the same
   links. An opaque ground at all times removes all three: nothing about
   the bar changes as you scroll except whether it is on screen.
   #FFF7F2 is the site's white -- the page ground -- so the bar is seamless
   over cream sections and reads as a solid band over photos and dark
   bands. */
.navbar_component {
  background: #FFF7F2;
  box-shadow: 0 1px 0 rgba(27, 27, 27, 0.08);
}
/* Offerings detail pages are pure white where the bar sits, not the usual
   cream, so the parchment bar read as a different, warmer band sitting on a
   white page (Joseph, 17 Sep). Match the page. Further down these pages turn
   near-black, where a white bar reads as a deliberate solid the same way the
   cream one did. .arcadia-off_hero is only on the six detail pages --
   offerings.html itself uses the cream home header and is left alone. */
body:has(.arcadia-off_hero) .navbar_component {
  background: #FFFFFF;
}
/* ...and the bar's contents are dark on it, always. The home hero forces
   the whole nav chrome to cream while the hero sits over media
   (--hero-content-color-expanded, !important), which was right when the bar
   was transparent over the photo and is cream-on-cream now. Same weight is
   needed to win, so: !important, deliberately. */
.navbar_component .navbar_dropdown-toggle,
.navbar_component .navbar_dropdown-toggle > div,
.navbar_component .navbar_dropdown-toggle-link,
.navbar_component .navbar3_logo,
.navbar_component .navbar-menu-button,
.navbar_component .navbar_menu-button { color: #1B1B1B !important; }
/* The hero rules reach the top-level links through
   `:is([data-home-hero-nav][...], html:has([data-hero-section][...]), ...)
    .navbar_menu.scaling-nav_panel > :is(.navbar_link, ...)`.
   :is() and :has() take the specificity of their most specific argument, so
   that scores (0,5,1) -- a dead tie with the obvious override here. A tie
   goes to whichever comes later, and those rules live in index.html's inline
   <style>, which the browser reads after this file: STORIES, SUPPORT and the
   logo stayed cream-on-cream while ABOUT and OFFERINGS (matched on their
   inner .navbar_dropdown-toggle, which those rules never name) went dark.
   `html body` and the repeated `.navbar_component.navbar_component` buy the
   specificity to break the tie without changing which elements match. */
html body .navbar_component.navbar_component .navbar_menu.scaling-nav_panel > .navbar_link,
html body .navbar_component.navbar_component .navbar_menu.scaling-nav_panel > .navbar_menu-dropdown,
html body .navbar_component.navbar_component .navbar_menu.scaling-nav_panel > .navbar_logo-link-menu,
html body .navbar_component.navbar_component .navbar_menu.scaling-nav_panel > .navbar3_logo-link-menu,
html body .navbar_component.navbar_component .navbar_logo-wrapper .navbar3_logo-link,
html body .navbar_component.navbar_component .navbar_logo-wrapper .navbar_logo-link { color: #1B1B1B !important; }