/* ==========================================================================
   BioAlliance theme
   Every value here traces to tokens/design-tokens.json. Colors come from the
   theme.json presets so the editor and the front end cannot drift apart.
   ========================================================================== */

:root {
  --bas-navy: var(--wp--preset--color--navy, #12284B);
  --bas-navy-800: var(--wp--preset--color--navy-800, #0C1E3A);
  --bas-navy-900: var(--wp--preset--color--navy-900, #091830);
  --bas-navy-550: var(--wp--preset--color--navy-550, #16315A);
  --bas-navy-350: var(--wp--preset--color--navy-350, #2F4A73);
  --bas-lb: var(--wp--preset--color--light-blue, #5BC0DE);
  --bas-lb-d: var(--wp--preset--color--light-blue-d, #297891);
  --bas-green: var(--wp--preset--color--green, #52C47A);
  --bas-green-d: var(--wp--preset--color--green-d, #348552);
  --bas-purple: var(--wp--preset--color--purple, #6B3FA0);
  --bas-gray: var(--wp--preset--color--gray, #C0C0C0);
  --bas-ink: var(--wp--preset--color--ink, #1B2A3D);
  --bas-ink-600: var(--wp--preset--color--ink-600, #4A5D70);
  --bas-muted: var(--wp--preset--color--muted, #617488);
  --bas-on-dark: var(--wp--preset--color--on-dark, #A9C2D6);
  --bas-on-dark-soft: var(--wp--preset--color--on-dark-soft, #9FB6C8);
  --bas-deep-teal: var(--wp--preset--color--deep-teal, #06283A);
  --bas-line: var(--wp--preset--color--line, #E1EBF1);
  --bas-tint: var(--wp--preset--color--tint, #EAF5FA);
  --bas-green-tint: var(--wp--preset--color--green-tint, #EAF7EF);
  --bas-alt: var(--wp--preset--color--page-alt, #F5F8FB);
  --bas-white: #fff;

  --bas-grad: linear-gradient(120deg, #5BC0DE, #52C47A);

  --bas-max: 1180px;
  --bas-gutter: 20px;

  --bas-r-btn: 6px;
  --bas-r-card: 14px;
  --bas-r-panel: 16px;
  --bas-r-tile: 12px;
  --bas-r-large: 18px;

  --bas-sh-card: 0 6px 18px rgba(18, 40, 75, .05);
  --bas-sh-card-h: 0 16px 36px rgba(18, 40, 75, .12);
  --bas-sh-tile: 0 10px 26px rgba(18, 40, 75, .14);
  --bas-sh-panel: 0 16px 44px rgba(18, 40, 75, .10);
  --bas-sh-btn: 0 6px 18px rgba(0, 0, 0, .18);
  --bas-sh-header: 0 2px 14px rgba(9, 24, 48, .28);

  --bas-dur: 200ms;
  --bas-ease: cubic-bezier(.4, 0, .2, 1);

  --bas-header-h: 118px;
}

@media (min-width: 768px) { :root { --bas-gutter: 32px; } }
@media (min-width: 1000px) { :root { --bas-gutter: 48px; } }

/* Local metric-matched fallback so swapping in Poppins does not shift layout. */
@font-face {
  font-family: 'Poppins Fallback';
  src: local('Arial');
  size-adjust: 112%;
  ascent-override: 95%;
  descent-override: 32%;
  line-gap-override: 0%;
}

/* --------------------------------------------------------------- base ---- */

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

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--bas-header-h) + 16px); }

body {
  margin: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg, video { max-width: 100%; height: auto; }

:where(h1, h2, h3, h4, h5, h6) { text-wrap: balance; }
:where(p, li) { text-wrap: pretty; }

/* Focus. Visible on every interactive element, on light and dark grounds. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--bas-lb);
  outline-offset: 2px;
  border-radius: 3px;
}
.bas-dark :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible,
.bas-hero :where(a, button):focus-visible {
  outline-color: #fff;
}

.bas-skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 999;
  background: var(--bas-navy);
  color: #fff;
  padding: 14px 22px;
  border-radius: 0 0 var(--bas-r-btn) 0;
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
}
.bas-skip:focus { left: 0; }

.screen-reader-text {
  border: 0; clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden;
  padding: 0; position: absolute; width: 1px; white-space: nowrap;
}
.screen-reader-text:focus {
  clip-path: none; height: auto; width: auto; padding: 14px 22px;
  background: var(--bas-navy); color: #fff; z-index: 999;
}

/* -------------------------------------------------------------- layout ---- */

.bas-wrap {
  max-width: var(--bas-max);
  margin-inline: auto;
  padding-inline: var(--bas-gutter);
  width: 100%;
}
.bas-wrap--narrow { max-width: 820px; }
.bas-wrap--prose { max-width: 760px; }

.bas-section { padding-block: clamp(48px, 7vw, 74px); position: relative; }
.bas-section--tight { padding-block: clamp(34px, 5vw, 54px); }
.bas-section--alt { background: var(--bas-alt); }
.bas-section--tint { background: var(--bas-tint); }
.bas-section--dark { background: var(--bas-navy); color: #fff; }
.bas-section--darker { background: var(--bas-navy-800); color: #fff; }
.bas-section--dark :where(h1, h2, h3, h4, h5, h6) { color: #fff; }
.bas-section--darker :where(h1, h2, h3, h4, h5, h6) { color: #fff; }
.bas-section--dark p, .bas-section--darker p { color: var(--bas-on-dark); }

.bas-lead { max-width: 760px; margin-bottom: clamp(26px, 3vw, 38px); }
.bas-lead > * + * { margin-top: 12px; }

/* .bas-wrap is a flow container, so its direct children run full width. Prose gets an
   explicit measure; grids, bands, and tables stay full width on purpose. */
.bas-wrap > p,
.bas-wrap > .wp-block-paragraph,
.bas-wrap > .wp-block-list { max-width: 72ch; }
.bas-wrap > .wp-block-group:not(.bas-hero__grid) > p { max-width: 72ch; }
.bas-wrap > h2, .bas-wrap > h3 { max-width: 28ch; }
.bas-wrap .bas-lead h2 { max-width: 26ch; }
/* text-wrap: balance does the line breaking; the measure only stops a heading running the
   full 1180px. Too tight a measure forces breaks like "Why Diagnosis Must / Come Before". */

.bas-sublead { font-size: 16px; color: var(--bas-muted); line-height: 1.7; }
.bas-section--dark .bas-sublead,
.bas-section--darker .bas-sublead { color: var(--bas-on-dark); }

/* eyebrow keyline */
.bas-kt {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 11px; letter-spacing: 2.5px; text-transform: uppercase;
  color: var(--bas-lb-d); font-weight: 600; margin: 0 0 14px;
}
.bas-kt::after { content: ""; width: 30px; height: 1.5px; background: currentColor; }
.bas-section--dark .bas-kt,
.bas-section--darker .bas-kt,
.bas-hero .bas-kt { color: var(--bas-lb); }

h2.bas-h2, .bas-h2 {
  font-size: var(--wp--preset--font-size--title, clamp(26px, 2vw + 1rem, 34px));
  font-weight: 700; letter-spacing: -.4px; line-height: 1.15; margin: 0;
  color: var(--bas-navy);
}

/* Belt and braces on the heading scale. theme.json sets these through :root :where(h1),
   which any block-level rule can outrank, so the scale is restated at a specificity the
   page markup cannot beat. */
.bas h1, .bas .wp-block-heading.is-h1 { font-size: var(--wp--preset--font-size--display, clamp(34px, 5vw, 48px)); line-height: 1.08; letter-spacing: -.5px; font-weight: 700; }
.bas h2 { font-size: var(--wp--preset--font-size--title, clamp(26px, 3vw, 34px)); line-height: 1.15; letter-spacing: -.4px; font-weight: 700; }
.bas h3 { font-size: var(--wp--preset--font-size--subtitle, clamp(19px, 2vw, 21px)); line-height: 1.3; font-weight: 700; }
.bas h4 { font-size: var(--wp--preset--font-size--card, clamp(16px, 1.6vw, 18px)); line-height: 1.3; font-weight: 700; }

/* ------------------------------------------------------------- buttons ---- */

.bas-btn,
.wp-block-button__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 14px 22px;
  border-radius: var(--bas-r-btn);
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: .2px;
  line-height: 1.25;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform var(--bas-dur) var(--bas-ease),
              box-shadow var(--bas-dur) var(--bas-ease),
              background-color var(--bas-dur) var(--bas-ease),
              border-color var(--bas-dur) var(--bas-ease),
              color var(--bas-dur) var(--bas-ease);
}
.bas-btn:hover, .wp-block-button__link:hover { transform: translateY(-1px); box-shadow: var(--bas-sh-btn); }
.bas-btn:active, .wp-block-button__link:active { transform: translateY(0); }

.bas-btn--primary { background: var(--bas-navy); color: #fff; border-color: var(--bas-navy-350); }
.bas-btn--primary:visited { color: #fff; }
.bas-btn--primary:hover { background: var(--bas-navy-800); color: #fff; }

.bas-btn--secondary { background: var(--bas-lb); color: var(--bas-navy); }
.bas-btn--secondary:hover { background: var(--bas-lb-d); color: var(--bas-navy); }

.bas-btn--tertiary { background: var(--bas-green); color: #08311D; }
.bas-btn--tertiary:hover { background: var(--bas-green-d); color: #08311D; }

.bas-btn--outline { background: transparent; color: var(--bas-lb-d); border-color: var(--bas-lb); border-width: 1.6px; }
.bas-btn--outline:hover { background: var(--bas-tint); color: var(--bas-navy); }

.bas-btn--text {
  background: transparent; color: var(--bas-navy); min-height: 44px;
  padding: 10px 2px; border: 0; border-bottom: 1px solid rgba(18, 40, 75, .35);
  border-radius: 0; font-weight: 500;
}
.bas-btn--text:hover { border-bottom-color: var(--bas-lb); box-shadow: none; transform: none; color: var(--bas-lb-d); }

/* on dark grounds */
.bas-dark .bas-btn--primary,
.bas-hero .bas-btn--primary,
.bas-section--dark .bas-btn--primary,
.bas-section--darker .bas-btn--primary { background: #fff; color: var(--bas-navy); border-color: transparent; }
.bas-dark .bas-btn--primary:hover,
.bas-hero .bas-btn--primary:hover,
.bas-section--dark .bas-btn--primary:hover,
.bas-section--darker .bas-btn--primary:hover { background: #D6E6F2; color: var(--bas-navy); }

.bas-dark .bas-btn--outline,
.bas-hero .bas-btn--outline,
.bas-section--dark .bas-btn--outline,
.bas-section--darker .bas-btn--outline { color: var(--bas-lb); }
.bas-dark .bas-btn--outline:hover,
.bas-hero .bas-btn--outline:hover,
.bas-section--dark .bas-btn--outline:hover,
.bas-section--darker .bas-btn--outline:hover { background: rgba(91, 192, 222, .14); color: #fff; }

.bas-dark .bas-btn--text,
.bas-hero .bas-btn--text,
.bas-section--dark .bas-btn--text,
.bas-section--darker .bas-btn--text { color: #fff; border-bottom-color: rgba(255, 255, 255, .4); }
.bas-dark .bas-btn--text:hover,
.bas-hero .bas-btn--text:hover { color: var(--bas-lb); border-bottom-color: var(--bas-lb); }

.bas-ctas { display: flex; gap: 13px; align-items: center; flex-wrap: wrap; margin-top: 28px; }

@media (max-width: 560px) {
  .bas-ctas { gap: 10px; }
  .bas-ctas > .bas-btn:not(.bas-btn--text) { width: 100%; }
}

/* --------------------------------------------------------------- header --- */

.bas-header { position: relative; z-index: 60; }

.bas-topbar {
  background: var(--bas-navy-900);
  color: var(--bas-on-dark-soft);
  font-size: 12px;
  transition: max-height var(--bas-dur) var(--bas-ease), opacity 140ms linear;
  /* Tall enough for the two rows the contact details wrap onto below 560px. Clamping this to a
     single row silently hid the phone number and the LinkedIn link on mobile. */
  max-height: 96px;
  overflow: hidden;
}
@media (min-width: 560px) { .bas-topbar { max-height: 44px; } }
.bas-topbar .bas-wrap { display: flex; justify-content: flex-end; gap: 8px 22px; padding-block: 9px; flex-wrap: wrap; }
@media (max-width: 559px) { .bas-topbar .bas-wrap { justify-content: center; font-size: 11.5px; } }
.bas-topbar a { color: var(--bas-on-dark-soft); text-decoration: none; display: inline-flex; align-items: center; gap: 6px; min-height: 26px; }
.bas-topbar a:hover { color: var(--bas-lb); text-decoration: underline; }
.bas-topbar svg { width: 15px; height: 15px; fill: currentColor; }

.bas-nav { background: var(--bas-navy); color: #fff; }

/* Nine nav items plus two pinned CTAs do not fit on one line until roughly 1600px, so below
   that the header wraps to two rows inside one navy band: logo and both pinned CTAs on the
   first line, the full nav on the second. Nothing is ever truncated, no label is shortened,
   and both CTAs stay pinned top right at every width. */
.bas-nav > .bas-wrap,
.bas-topbar > .bas-wrap { max-width: 1560px; }
.bas-nav > .bas-wrap {
  display: flex; align-items: center; gap: 20px; padding-block: 14px;
  flex-wrap: wrap; row-gap: 4px;
}
.bas-primary { order: 3; flex: 1 0 100%; }
@media (min-width: 1600px) { .bas-primary { order: 0; flex: 0 1 auto; } }
@media (min-width: 1100px) and (max-width: 1599px) {
  .bas-nav > .bas-wrap { padding-block: 12px 4px; }
  .bas-primary { border-top: 1px solid rgba(255, 255, 255, .09); margin-top: 4px; padding-top: 2px; }
  .bas-menu { justify-content: flex-start; }
  .bas-menu > li > a { padding: 11px 0; }
}

.bas-logo { display: inline-flex; align-items: center; flex: 0 0 auto; }
.bas-logoplate {
  background: #fff; border-radius: 6px; padding: 4px 7px;
  display: inline-flex; align-items: center; box-shadow: 0 2px 9px rgba(0, 0, 0, .16);
}
.bas-logoplate img { height: 30px; width: auto; display: block; }

.bas-menu { display: none; list-style: none; margin: 0; padding: 0; gap: 15px; align-items: center; }
@media (min-width: 1100px) { .bas-menu { display: flex; } }
@media (min-width: 1360px) { .bas-menu { gap: 20px; } }

.bas-menu > li { position: relative; }
.bas-menu > li > a {
  display: inline-flex; align-items: center; gap: 5px;
  color: #D4DEEB; font-size: 13px; font-weight: 500; text-decoration: none;
  padding: 8px 0; position: relative; white-space: nowrap;
}
.bas-menu > li > a:hover { color: #fff; text-decoration: none; }
.bas-menu > li.is-current > a { color: #fff; }
.bas-menu > li > a:focus-visible { outline-offset: 4px; }
.bas-menu > li.is-current > a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: var(--bas-item-accent, var(--bas-lb));
}
.bas-menu > li.has-children > a::after {
  content: ""; width: 0; height: 0; margin-left: 2px;
  border-left: 3.5px solid transparent; border-right: 3.5px solid transparent;
  border-top: 4px solid currentColor; position: static; background: none;
  transition: transform var(--bas-dur) var(--bas-ease);
}
.bas-menu > li.has-children.is-current > a::after { border-top-color: currentColor; }

.bas-new {
  font-size: 8px; background: var(--bas-green); color: #08311D; border-radius: 3px;
  padding: 2px 4px; letter-spacing: .5px; font-weight: 700; vertical-align: super;
  text-transform: uppercase;
}

.bas-submenu {
  position: absolute; top: calc(100% + 10px); left: -14px; min-width: 236px;
  background: #fff; border-radius: 10px; padding: 8px; margin: 0; list-style: none;
  box-shadow: 0 18px 40px rgba(9, 24, 48, .22); border: 1px solid var(--bas-line);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity 160ms linear, transform 160ms var(--bas-ease), visibility 160ms;
  z-index: 70;
}
.bas-submenu::before { content: ""; position: absolute; top: -10px; left: 0; right: 0; height: 10px; }
.bas-menu > li:hover > .bas-submenu,
.bas-menu > li:focus-within > .bas-submenu { opacity: 1; visibility: visible; transform: translateY(0); }
.bas-submenu a {
  display: block; padding: 10px 12px; border-radius: 6px;
  color: var(--bas-navy); font-size: 13px; font-weight: 500; text-decoration: none;
}
.bas-submenu a:hover { background: var(--bas-tint); color: var(--bas-navy); text-decoration: none; }

.bas-hcta { margin-left: auto; display: none; gap: 10px; flex: 0 0 auto; }
@media (min-width: 1100px) { .bas-hcta { display: flex; } }
.bas-hcta .bas-btn { min-height: 44px; padding: 11px 16px; font-size: 12.5px; white-space: nowrap; }
@media (min-width: 1360px) { .bas-hcta .bas-btn { padding: 11px 18px; } }

.bas-burger {
  margin-left: auto; display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; border-radius: 8px; background: transparent;
  border: 1.5px solid var(--bas-navy-350); color: #fff; cursor: pointer; padding: 0;
}
@media (min-width: 1100px) { .bas-burger { display: none; } }
.bas-burger span { display: block; width: 20px; height: 2px; background: #fff; position: relative; transition: background 120ms linear; }
.bas-burger span::before, .bas-burger span::after {
  content: ""; position: absolute; left: 0; width: 20px; height: 2px; background: #fff;
  transition: transform var(--bas-dur) var(--bas-ease), top var(--bas-dur) var(--bas-ease);
}
.bas-burger span::before { top: -6px; }
.bas-burger span::after { top: 6px; }
.bas-burger[aria-expanded="true"] span { background: transparent; }
.bas-burger[aria-expanded="true"] span::before { top: 0; transform: rotate(45deg); }
.bas-burger[aria-expanded="true"] span::after { top: 0; transform: rotate(-45deg); }

/* sticky collapse */
/* The top bar must leave the flow completely. max-height alone keeps its vertical padding,
   which left 44px of dead header above the content and made the document taller when stuck. */
.bas-header.is-stuck .bas-topbar {
  max-height: 0; opacity: 0; padding-block: 0; border: 0; overflow: hidden;
}
.bas-header.is-stuck .bas-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 80; box-shadow: var(--bas-sh-header);
}
.bas-header.is-stuck .bas-hcta .bas-btn--secondary { display: none; }
body.bas-stuck { padding-top: var(--bas-header-h); }

/* mobile panel */
.bas-mobile {
  display: none; background: var(--bas-navy); border-top: 1px solid var(--bas-navy-350);
  max-height: calc(100vh - 120px); overflow-y: auto;
}
.bas-mobile.is-open { display: block; }
@media (min-width: 1100px) { .bas-mobile, .bas-mobile.is-open { display: none; } }
.bas-mobile ul { list-style: none; margin: 0; padding: 0; }
.bas-mobile > .bas-wrap { padding-block: 10px 22px; }
.bas-mobile .bas-m-item { border-bottom: 1px solid rgba(255, 255, 255, .09); }
.bas-mobile .bas-m-row { display: flex; align-items: stretch; }
.bas-mobile .bas-m-row > a {
  flex: 1; display: flex; align-items: center; min-height: 52px;
  color: #fff; font-size: 15px; font-weight: 500; text-decoration: none;
}
.bas-mobile .bas-m-toggle {
  width: 52px; min-height: 52px; background: transparent; border: 0; color: var(--bas-lb);
  cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
}
.bas-mobile .bas-m-toggle svg { width: 14px; height: 14px; transition: transform var(--bas-dur) var(--bas-ease); }
.bas-mobile .bas-m-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.bas-mobile .bas-m-sub { display: none; padding: 0 0 12px 14px; }
.bas-mobile .bas-m-sub.is-open { display: block; }
.bas-mobile .bas-m-sub a {
  display: flex; align-items: center; min-height: 44px;
  color: var(--bas-on-dark); font-size: 14px; text-decoration: none;
}
.bas-mobile .bas-m-sub a:hover { color: var(--bas-lb); }
.bas-mobile .bas-m-ctas { display: grid; gap: 10px; margin-top: 20px; }
.bas-mobile .bas-m-ctas .bas-btn { width: 100%; }

/* ---------------------------------------------------------------- hero ---- */

.bas-hero {
  position: relative; overflow: hidden; color: #fff;
  background:
    radial-gradient(900px 500px at 78% 18%, rgba(91, 192, 222, .20), transparent 60%),
    radial-gradient(700px 600px at 12% 95%, rgba(82, 196, 122, .12), transparent 55%),
    linear-gradient(160deg, #0E2244 0%, #12284B 55%, #0C1E3A 100%);
}
.bas-hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px);
  background-size: 46px 46px;
  -webkit-mask-image: radial-gradient(700px 400px at 70% 30%, #000, transparent 75%);
  mask-image: radial-gradient(700px 400px at 70% 30%, #000, transparent 75%);
}
.bas-hero__media {
  position: absolute; inset: 0; object-fit: cover; width: 100%; height: 100%;
  opacity: .30; mix-blend-mode: screen; pointer-events: none;
}
.bas-hero > .bas-wrap { position: relative; z-index: 2; padding-block: clamp(52px, 7vw, 84px) clamp(56px, 8vw, 92px); }
.bas-hero__grid { display: grid; gap: 30px; align-items: center; }
@media (min-width: 1000px) { .bas-hero__grid { grid-template-columns: 1.15fr .85fr; } }

.bas-hero h1 { color: #fff; margin: 0 0 20px; }
.bas-hero .bas-hero__sub { font-size: clamp(16px, 1.2vw + .5rem, 19px); font-weight: 600; color: #D6E6F2; margin: 0 0 16px; line-height: 1.45; }
.bas-hero p { font-size: 15px; color: var(--bas-on-dark); max-width: 58ch; margin: 0 0 10px; line-height: 1.75; }
.bas-hero .bas-hero__link { margin-top: 22px; display: inline-block; }

.bas-hero--compact > .bas-wrap { padding-block: clamp(44px, 5.5vw, 66px); }
.bas-hero--install { background: linear-gradient(135deg, #0C1E3A, #12284B); }
.bas-hero--install::before { opacity: .6; }
.bas-hero--install h1 .bas-hl {
  background: var(--bas-grad);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.bas-hero h1 .bas-hl-blue { color: var(--bas-lb); }
.bas-band { height: 5px; background: var(--bas-grad); }

/* hero infrastructure motif */
.bas-motif { position: relative; height: 330px; display: none; }
@media (min-width: 1000px) { .bas-motif { display: block; } }
.bas-motif__layer {
  position: absolute; left: 50%; transform: translateX(-50%); width: min(280px, 100%);
  border-radius: 14px; padding: 14px 18px; color: #fff; font-weight: 600; font-size: 13px;
  display: flex; align-items: center; gap: 12px; box-shadow: 0 18px 40px rgba(0, 0, 0, .35);
}
.bas-motif__layer .bas-motif__b {
  width: 26px; height: 26px; border-radius: 7px; display: flex; align-items: center;
  justify-content: center; font-size: 11px; font-weight: 700; background: rgba(255, 255, 255, .18);
}
.bas-motif__layer .bas-motif__tag { margin-left: auto; font-size: 9px; font-weight: 700; letter-spacing: .5px; opacity: .85; }
.bas-motif__l1 { top: 6px; background: rgba(18, 40, 75, .92); border: 1px solid #2B4A73; }
.bas-motif__l2 { top: 70px; background: linear-gradient(120deg, rgba(91, 192, 222, .95), rgba(82, 196, 122, .92)); color: #08263A; }
.bas-motif__l2 .bas-motif__b { background: rgba(255, 255, 255, .35); }
.bas-motif__l3 { top: 134px; background: rgba(91, 192, 222, .92); color: #06283A; }
.bas-motif__l3 .bas-motif__b { background: rgba(255, 255, 255, .35); }
.bas-motif__l4 { top: 198px; background: rgba(82, 196, 122, .92); color: #08311D; }
.bas-motif__l4 .bas-motif__b { background: rgba(255, 255, 255, .35); }
.bas-motif__l5 { top: 262px; background: rgba(107, 63, 160, .92); }

/* -------------------------------------------------------- stage tiles ----- */

.bas-stages { display: grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width: 560px) { .bas-stages { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .bas-stages { grid-template-columns: repeat(5, 1fr); } }

.bas-stage {
  position: relative; overflow: hidden; border-radius: var(--bas-r-card);
  padding: 22px 18px 20px; color: #fff; min-height: 208px;
  display: flex; flex-direction: column; box-shadow: var(--bas-sh-tile);
  text-decoration: none;
  transition: transform var(--bas-dur) var(--bas-ease), box-shadow var(--bas-dur) var(--bas-ease);
}
.bas-stage:hover, .bas-stage:focus-visible { transform: translateY(-4px); box-shadow: 0 20px 42px rgba(18, 40, 75, .26); text-decoration: none; }
.bas-stage__num { font-size: 12px; font-weight: 700; letter-spacing: 1px; color: currentColor; }
.bas-stage__ic {
  width: 40px; height: 40px; border-radius: 10px; background: rgba(255, 255, 255, .16);
  margin: 12px 0 14px; display: flex; align-items: center; justify-content: center;
}
.bas-stage__ic svg { width: 20px; height: 20px; }
.bas-stage h3 { font-size: 18px; font-weight: 700; margin: 0 0 8px; color: inherit; }
.bas-stage p { font-size: 12.5px; line-height: 1.55; margin: 0; color: inherit; }
.bas-stage__reveal {
  max-height: 0; opacity: 0; overflow: hidden; margin: 0;
  transition: max-height var(--bas-dur) var(--bas-ease), opacity var(--bas-dur) var(--bas-ease), margin var(--bas-dur) var(--bas-ease);
}
.bas-stage:hover .bas-stage__reveal,
.bas-stage:focus-within .bas-stage__reveal { max-height: 180px; opacity: 1; margin-top: 10px; }
.bas-stage__arw { margin-top: auto; padding-top: 14px; font-size: 18px; opacity: .9; line-height: 1; }
.bas-stage__new {
  position: absolute; top: 16px; right: 14px; background: var(--bas-navy-800); color: #fff;
  font-size: 8px; font-weight: 700; letter-spacing: .6px; padding: 3px 7px; border-radius: 4px;
}

.bas-stage--diagnose { background: linear-gradient(160deg, #1B3A66, #12284B); }
.bas-stage--install { background: var(--bas-grad); color: #06283A; }
.bas-stage--install .bas-stage__ic { background: rgba(255, 255, 255, .32); }
.bas-stage--install h3 { color: #06283A; }
.bas-stage--signal { background: linear-gradient(160deg, #5BC0DE, #3AA6C8); color: #06283A; }
.bas-stage--signal .bas-stage__ic { background: rgba(255, 255, 255, .32); }
.bas-stage--signal h3 { color: #06283A; }
.bas-stage--activate { background: linear-gradient(160deg, #29864D, #206B3C); }
.bas-stage--activate .bas-stage__ic { background: rgba(255, 255, 255, .3); }
.bas-stage--compound { background: linear-gradient(160deg, #7D4FB3, #5D3590); }

/* ------------------------------------------------------------- cards ----- */

.bas-grid { display: grid; gap: 18px; }
.bas-grid--2 { grid-template-columns: 1fr; }
.bas-grid--3 { grid-template-columns: 1fr; }
.bas-grid--4 { grid-template-columns: 1fr; }
@media (min-width: 700px) {
  .bas-grid--2 { grid-template-columns: 1fr 1fr; }
  .bas-grid--3 { grid-template-columns: 1fr 1fr; }
  .bas-grid--4 { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1000px) {
  .bas-grid--3 { grid-template-columns: repeat(3, 1fr); }
  .bas-grid--4 { grid-template-columns: repeat(4, 1fr); }
}

.bas-card {
  background: #fff; border: 1px solid var(--bas-line); border-radius: var(--bas-r-card);
  padding: 24px 24px 22px; border-top: 3px solid var(--bas-lb);
  box-shadow: var(--bas-sh-card); display: flex; flex-direction: column;
  transition: transform var(--bas-dur) var(--bas-ease), box-shadow var(--bas-dur) var(--bas-ease);
}
.bas-card:hover { transform: translateY(-3px); box-shadow: var(--bas-sh-card-h); }
.bas-card__tag { font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--bas-lb-d); font-weight: 700; }
/* A translucent card sitting on a dark ground needs the on-dark text scale. This is opt in:
   a normal white card inside a dark section keeps the light scale, because its own background
   is still white. Applying it to every card in a dark section was a 1.8:1 regression. */
.bas-card--on-dark {
  background: rgba(255, 255, 255, .05);
  border-color: rgba(255, 255, 255, .14);
  color: #fff;
}
.bas-card.bas-card--on-dark .bas-card__tag { color: var(--bas-lb); }
.bas-card.bas-card--on-dark p { color: var(--bas-on-dark); }
.bas-card.bas-card--on-dark h2,
.bas-card.bas-card--on-dark h3 { color: #fff; }
.bas-card.bas-card--on-dark .bas-card__ln { color: var(--bas-lb); }
.bas-card.bas-card--on-dark .bas-card__anchor { color: #fff; border-left-color: var(--bas-lb); }

/* A button inside post content is still a link, so the element level link color wins on
   specificity. The anchor form of each button variant restates its own color. */
a.bas-btn--primary { color: #fff; }
a.bas-btn--secondary { color: var(--bas-navy); }
a.bas-btn--tertiary { color: #08311D; }
a.bas-btn--outline { color: var(--bas-lb-d); }
.bas-section--dark a.bas-btn--primary,
.bas-section--darker a.bas-btn--primary,
.bas-hero a.bas-btn--primary { color: var(--bas-navy); }
.bas-section--dark a.bas-btn--outline,
.bas-section--darker a.bas-btn--outline,
.bas-hero a.bas-btn--outline { color: var(--bas-lb); }
/* Core's link styles set a hover and focus color on every anchor, which would turn a navy
   button's label navy on navy. Every anchor button restates its color in all states. */
a.bas-btn--primary, a.bas-btn--primary:hover, a.bas-btn--primary:focus,
a.bas-btn--primary:active, a.bas-btn--primary:visited { color: #fff; }
a.bas-btn--secondary, a.bas-btn--secondary:hover, a.bas-btn--secondary:focus,
a.bas-btn--secondary:active, a.bas-btn--secondary:visited { color: var(--bas-navy); }
a.bas-btn--tertiary, a.bas-btn--tertiary:hover, a.bas-btn--tertiary:focus,
a.bas-btn--tertiary:active, a.bas-btn--tertiary:visited { color: #08311D; }
a.bas-btn--outline, a.bas-btn--outline:visited { color: var(--bas-lb-d); }
a.bas-btn--outline:hover, a.bas-btn--outline:focus { color: var(--bas-navy); }
.bas-section--dark a.bas-btn--primary, .bas-section--dark a.bas-btn--primary:hover,
.bas-section--darker a.bas-btn--primary, .bas-section--darker a.bas-btn--primary:hover,
.bas-hero a.bas-btn--primary, .bas-hero a.bas-btn--primary:hover { color: var(--bas-navy); }
.bas-section--dark a.bas-btn--outline, .bas-section--dark a.bas-btn--outline:hover,
.bas-section--darker a.bas-btn--outline, .bas-section--darker a.bas-btn--outline:hover,
.bas-hero a.bas-btn--outline, .bas-hero a.bas-btn--outline:hover { color: var(--bas-lb); }
.bas-section--dark a.bas-btn--outline:hover,
.bas-section--darker a.bas-btn--outline:hover,
.bas-hero a.bas-btn--outline:hover { color: #fff; }
a.bas-btn:hover, a.bas-btn:focus { text-decoration: none; }
.bas-card h3 { font-size: 21px; font-weight: 700; color: var(--bas-navy); margin: 8px 0; }
.bas-card p { font-size: 13.5px; color: var(--bas-ink-600); line-height: 1.6; margin: 0; }
.bas-card__anchor {
  margin-top: 14px; font-size: 12.5px; font-style: italic; color: var(--bas-navy);
  border-left: 3px solid var(--bas-lb); padding-left: 11px; line-height: 1.45;
}
.bas-card__ln { margin-top: auto; padding-top: 16px; font-size: 13px; font-weight: 600; color: var(--bas-lb-d); text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }
.bas-card__ln:hover { color: var(--bas-navy); gap: 10px; }
.bas-card__media { margin: -24px -24px 18px; border-radius: 11px 11px 0 0; overflow: hidden; aspect-ratio: 3 / 2; }
.bas-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 0; }

.bas-card--green { border-top-color: var(--bas-green); }
.bas-card--green .bas-card__tag { color: var(--bas-green-d); }
.bas-card--purple { border-top-color: var(--bas-purple); }
.bas-card--purple .bas-card__tag { color: var(--bas-purple); }
.bas-card--navy { border-top-color: var(--bas-navy); }
/* A white card inside an Install gradient border. The layer order matters: the first
   background image paints on top, so the white fill must be listed first and clipped to the
   padding box, with the gradient beneath it clipped to the border box. Reversed, the gradient
   covered the whole card and body copy measured 3.09:1 against it. */
.bas-card--install {
  border: 3px solid transparent;
  background-image: linear-gradient(#fff, #fff), var(--bas-grad);
  background-origin: border-box;
  background-clip: padding-box, border-box;
}

.bas-card__req {
  margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--bas-line);
  font-size: 11.5px; color: var(--bas-muted); font-weight: 600;
}

/* --------------------------------------------------------- stat bar ------ */

.bas-statbar {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0;
  background: var(--bas-navy-800); border-radius: var(--bas-r-tile); overflow: hidden;
  margin-bottom: 34px;
}
@media (min-width: 900px) { .bas-statbar { grid-template-columns: repeat(4, 1fr); } }
.bas-statbar__s { padding: 22px 20px; border-right: 1px solid rgba(255, 255, 255, .08); border-bottom: 1px solid rgba(255, 255, 255, .08); }
.bas-statbar__s:last-child { border-right: none; }
@media (min-width: 900px) { .bas-statbar__s { border-bottom: none; } }
.bas-statbar__v { display: block; font-size: clamp(24px, 2.2vw, 30px); font-weight: 700; color: var(--bas-lb); line-height: 1.05; }
.bas-statbar__l { display: block; font-size: 11.5px; color: #9FC0D6; margin-top: 9px; line-height: 1.45; }

.bas-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (min-width: 900px) { .bas-stats { grid-template-columns: repeat(5, 1fr); } }
.bas-stat { padding: 22px 18px; background: #fff; border: 1px solid var(--bas-line); border-radius: var(--bas-r-tile); border-left: 3px solid var(--bas-lb); }
.bas-stat__v { display: block; font-size: clamp(28px, 2.6vw, 38px); font-weight: 700; color: var(--bas-navy); line-height: 1; }
.bas-stat__l { display: block; font-size: 12px; color: var(--bas-muted); margin-top: 9px; line-height: 1.45; }
.bas-section--dark .bas-stat, .bas-section--darker .bas-stat { background: rgba(255, 255, 255, .05); border-color: rgba(255, 255, 255, .12); }
.bas-section--dark .bas-stat__v, .bas-section--darker .bas-stat__v { color: var(--bas-lb); }
.bas-section--dark .bas-stat__l, .bas-section--darker .bas-stat__l { color: #9FC0D6; }

/* ---------------------------------------------------------- pillars ------ */

.bas-pillars { display: grid; gap: 13px; grid-template-columns: 1fr; }
@media (min-width: 560px) { .bas-pillars { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .bas-pillars { grid-template-columns: repeat(5, 1fr); } }
.bas-pillar { border-radius: var(--bas-r-tile); padding: 18px 15px; color: #fff; min-height: 150px; }
.bas-pillar__n { font-size: 11px; color: #fff; font-weight: 700; letter-spacing: 1px; }
.bas-pillar h3, .bas-pillar h4 { font-size: 14.5px; font-weight: 700; margin: 9px 0 7px; line-height: 1.2; color: #fff; }
.bas-pillar p { font-size: 11.5px; line-height: 1.45; margin: 0; color: #fff; }
.bas-pillar--1 { background: #16315A; }
.bas-pillar--2 { background: #277F9F; }
.bas-pillar--3 { background: #348552; }
.bas-pillar--4 { background: #5D3590; }
.bas-pillar--5 { background: #16315A; }

.bas-cmr {
  background: #fff; border: 2px solid var(--bas-navy); border-radius: var(--bas-r-tile);
  padding: 20px 26px; display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
}
.bas-cmr__big { font-size: clamp(30px, 3vw, 38px); font-weight: 700; color: var(--bas-navy); line-height: 1; }
.bas-cmr__tx { font-size: 14px; color: var(--bas-ink); font-weight: 600; }
.bas-cmr__tx span { display: block; font-weight: 400; color: var(--bas-muted); font-size: 12.5px; margin-top: 3px; }

/* --------------------------------------------------- anchor strip -------- */

.bas-anchor {
  background: var(--bas-tint); border-left: 4px solid var(--bas-lb);
  border-radius: 0 10px 10px 0; padding: 18px 22px; color: var(--bas-navy);
  font-weight: 700; font-size: clamp(14px, 1vw + .5rem, 16px); line-height: 1.5;
}
.bas-anchor small { display: block; font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--bas-lb-d); font-weight: 700; margin-bottom: 7px; }
.bas-section--dark .bas-anchor, .bas-section--darker .bas-anchor, .bas-hero .bas-anchor {
  background: rgba(91, 192, 222, .10); border-left-color: var(--bas-lb); color: #fff;
}
.bas-section--dark .bas-anchor small, .bas-section--darker .bas-anchor small, .bas-hero .bas-anchor small { color: var(--bas-lb); }
.bas-anchor--green { border-left-color: var(--bas-green); background: var(--bas-green-tint); }
.bas-anchor--green small { color: #2A6E44; }   /* 5.2:1 on the green tint ground */
.bas-anchor--install { border-left: 0; border-top: 4px solid transparent; position: relative; }
.bas-anchor--install::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--bas-grad); border-radius: 2px 0 0 2px; }

/* -------------------------------------------------------- checklists ----- */

.bas-recv { display: grid; grid-template-columns: 1fr; gap: 10px 26px; }
@media (min-width: 760px) { .bas-recv { grid-template-columns: 1fr 1fr; } }
.bas-recv__r { display: flex; gap: 11px; font-size: 13.5px; color: #3A4D60; align-items: flex-start; line-height: 1.6; }
.bas-recv__r::before { content: ""; flex: 0 0 auto; width: 16px; height: 16px; margin-top: 3px; border-radius: 50%; background: var(--bas-green-tint); box-shadow: inset 0 0 0 1.5px var(--bas-green); }
.bas-section--dark .bas-recv__r, .bas-section--darker .bas-recv__r { color: var(--bas-on-dark); }
.bas-section--dark .bas-recv__r::before, .bas-section--darker .bas-recv__r::before { background: rgba(82, 196, 122, .18); }

.bas-numlist { display: grid; gap: 14px; grid-template-columns: 1fr; counter-reset: bas-n; }
@media (min-width: 700px) { .bas-numlist { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .bas-numlist--4 { grid-template-columns: repeat(4, 1fr); } }
.bas-numlist__i {
  background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .12);
  border-radius: var(--bas-r-tile); padding: 18px;
}
.bas-section:not(.bas-section--dark):not(.bas-section--darker) .bas-numlist__i { background: #fff; border-color: var(--bas-line); box-shadow: var(--bas-sh-card); }
.bas-numlist__n {
  width: 30px; height: 30px; border-radius: 8px; display: flex; align-items: center;
  justify-content: center; font-weight: 700; font-size: 13px; color: #fff; margin-bottom: 12px;
}
.bas-numlist__i p { font-size: 12.5px; line-height: 1.55; margin: 0; }
.bas-section--dark .bas-numlist__i p, .bas-section--darker .bas-numlist__i p { color: #C2D6E4; }
.bas-n--navy { background: var(--bas-navy); }
.bas-n--lb { background: var(--bas-lb); color: #06283A !important; }
.bas-n--green { background: var(--bas-green); color: #08311D !important; }
.bas-n--purple { background: var(--bas-purple); }
.bas-n--install { background: var(--bas-grad); color: #06283A !important; }

/* ------------------------------------------------------- spec card ------- */

.bas-speccard {
  background: rgba(255, 255, 255, .06); border: 1px solid rgba(91, 192, 222, .4);
  border-radius: var(--bas-r-card); padding: 24px;
}
.bas-speccard__tag {
  display: inline-block; background: var(--bas-grad); color: #06283A; font-size: 10px;
  font-weight: 700; letter-spacing: 1px; padding: 4px 10px; border-radius: 5px; text-transform: uppercase;
}
.bas-speccard h3, .bas-speccard h4 { font-size: 18px; font-weight: 700; margin: 12px 0 8px; color: #fff; }
.bas-speccard ul { list-style: none; margin: 0; padding: 0; }
.bas-speccard li {
  font-size: 12.5px; color: #BCD3E3; padding: 8px 0 8px 18px; position: relative;
  border-bottom: 1px solid rgba(255, 255, 255, .07); line-height: 1.5;
}
.bas-speccard li:last-child { border-bottom: 0; }
.bas-speccard li::before { content: ""; position: absolute; left: 0; top: 14px; width: 6px; height: 6px; border-radius: 50%; background: var(--bas-green); }

/* ---------------------------------------------------------- two col ------ */

.bas-two { display: grid; gap: 30px; align-items: start; }
.bas-two--center { align-items: center; }
@media (min-width: 1000px) { .bas-two { grid-template-columns: 1.15fr .85fr; } }
.bas-two--even { grid-template-columns: 1fr; }
@media (min-width: 1000px) { .bas-two--even { grid-template-columns: 1fr 1fr; } }
.bas-two--flip { grid-template-columns: 1fr; }
@media (min-width: 1000px) { .bas-two--flip { grid-template-columns: .85fr 1.15fr; } }
.bas-two__media img { width: 100%; border-radius: var(--bas-r-card); display: block; }

/* ------------------------------------------------------------ chips ------ */

.bas-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.bas-chip {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px;
  padding: 11px 18px; border-radius: 22px; background: #fff;
  border: 1px solid var(--bas-line); color: var(--bas-navy);
  font-size: 13px; font-weight: 600; text-decoration: none;
  transition: border-color var(--bas-dur) var(--bas-ease), background var(--bas-dur) var(--bas-ease);
}
.bas-chip:hover { border-color: var(--bas-lb); background: var(--bas-tint); text-decoration: none; }
/* A chip on a dark ground, but never one sitting inside a white card on that ground: the
   Re-Score Pending chip on the case study cards measured 1.00:1, white on white. */
.bas-section--dark .bas-chip, .bas-section--darker .bas-chip { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .16); color: #fff; }
.bas-section--dark .bas-chip:hover, .bas-section--darker .bas-chip:hover { border-color: var(--bas-lb); background: rgba(91, 192, 222, .14); }
.bas-section--dark .bas-card:not(.bas-card--on-dark) .bas-chip,
.bas-section--darker .bas-card:not(.bas-card--on-dark) .bas-chip {
  background: #fff; border-color: var(--bas-line); color: var(--bas-navy);
}
.bas-section--dark .bas-card:not(.bas-card--on-dark) .bas-chip--pending,
.bas-section--darker .bas-card:not(.bas-card--on-dark) .bas-chip--pending {
  border-color: var(--bas-gray); color: var(--bas-muted);
}
.bas-chip--pending { background: #fff; border-color: var(--bas-gray); color: var(--bas-muted); font-weight: 600; }

/* ------------------------------------------------------- logo strip ------ */

.bas-logos { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: clamp(24px, 5vw, 56px); }
.bas-logos img { height: 34px; width: auto; opacity: .62; transition: opacity var(--bas-dur) var(--bas-ease); }
.bas-logos img:hover { opacity: 1; }
.bas-section--dark .bas-logos img, .bas-section--darker .bas-logos img { filter: brightness(0) invert(1); opacity: .5; }

/* ------------------------------------------------------ testimonial ------ */

.bas-carousel { position: relative; }
.bas-carousel__track { display: grid; }
.bas-quote {
  grid-area: 1 / 1; background: var(--bas-navy); color: #fff; border-radius: var(--bas-r-large);
  padding: clamp(26px, 4vw, 40px); position: relative; overflow: hidden;
  opacity: 0; visibility: hidden; transition: opacity 320ms var(--bas-ease);
}
.bas-quote.is-active { opacity: 1; visibility: visible; }
.bas-quote::before { content: ""; position: absolute; inset: 0; background: radial-gradient(340px 220px at 88% 8%, rgba(91, 192, 222, .22), transparent 62%); }
.bas-quote__mark { position: relative; font-size: 40px; line-height: 1; color: var(--bas-lb); font-weight: 700; }
.bas-quote blockquote { position: relative; margin: 12px 0 0; padding: 0; border: 0; font-size: clamp(15px, 1.2vw + .5rem, 19px); font-weight: 500; line-height: 1.6; color: #fff; }
.bas-quote__by { position: relative; margin: 20px 0 0; font-size: 12.5px; color: var(--bas-lb); font-weight: 600; }
.bas-quote__by span { display: block; color: #9FC0D6; font-weight: 400; margin-top: 3px; }
.bas-carousel__dots { display: flex; gap: 8px; justify-content: center; margin-top: 20px; }
.bas-carousel__dot {
  width: 34px; height: 4px; border-radius: 2px; background: var(--bas-line); border: 0; padding: 0;
  cursor: pointer; transition: background var(--bas-dur) var(--bas-ease);
}
.bas-carousel__dot::after { content: ""; display: block; height: 44px; margin-top: -20px; }
.bas-carousel__dot.is-active { background: var(--bas-lb); }
.bas-carousel__dot:focus-visible { outline-offset: 6px; }

/* ------------------------------------------------------------ tables ----- */

.bas-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--bas-r-tile); border: 1px solid var(--bas-line); }
.bas-table { width: 100%; border-collapse: collapse; font-size: 13.5px; min-width: 620px; background: #fff; }
.bas-table th {
  background: var(--bas-navy); color: #fff; text-align: left; padding: 14px 16px;
  font-size: 11.5px; letter-spacing: 1px; text-transform: uppercase; font-weight: 700;
}
.bas-table td { padding: 14px 16px; border-bottom: 1px solid var(--bas-line); color: var(--bas-ink-600); vertical-align: top; line-height: 1.6; }
.bas-table tbody tr:nth-child(even) { background: var(--bas-alt); }
.bas-table tbody tr:last-child td { border-bottom: 0; }
.bas-table td strong, .bas-table td b { color: var(--bas-navy); }

/* --------------------------------------------------------------- faq ----- */

.bas-faq { border: 1px solid var(--bas-line); border-radius: var(--bas-r-card); overflow: hidden; background: #fff; }
.bas-faq__i { border-bottom: 1px solid var(--bas-line); }
.bas-faq__i:last-child { border-bottom: 0; }
.bas-faq__q {
  width: 100%; text-align: left; background: transparent; border: 0; cursor: pointer;
  padding: 20px 52px 20px 22px; font-family: inherit; font-size: 15px; font-weight: 600;
  color: var(--bas-navy); position: relative; min-height: 60px; line-height: 1.45;
}
.bas-faq__q::after {
  content: ""; position: absolute; right: 22px; top: 50%; width: 10px; height: 10px;
  border-right: 2px solid var(--bas-lb-d); border-bottom: 2px solid var(--bas-lb-d);
  transform: translateY(-70%) rotate(45deg); transition: transform var(--bas-dur) var(--bas-ease);
}
.bas-faq__q[aria-expanded="true"]::after { transform: translateY(-30%) rotate(-135deg); }
.bas-faq__q:hover { background: var(--bas-alt); }
.bas-faq__a { padding: 0 22px; max-height: 0; overflow: hidden; transition: max-height var(--bas-dur) var(--bas-ease), padding var(--bas-dur) var(--bas-ease); }
.bas-faq__a.is-open { padding: 0 22px 22px; max-height: 900px; }
.bas-faq__a p { font-size: 14px; color: var(--bas-ink-600); line-height: 1.7; margin: 0; }
.bas-faq__a p + p { margin-top: 12px; }

/* ---------------------------------------------------------- prose -------- */

.bas-prose { max-width: 760px; }
.bas-prose > * + * { margin-top: 18px; }
.bas-prose h2 { margin-top: 42px; font-size: clamp(22px, 1.6vw + .6rem, 26px); }
.bas-prose h3 { margin-top: 30px; font-size: 18px; }
.bas-prose p, .bas-prose li { font-size: 15px; line-height: 1.7; color: var(--bas-ink-600); }
.bas-prose ul, .bas-prose ol { padding-left: 22px; }
.bas-prose li + li { margin-top: 8px; }
.bas-prose strong { color: var(--bas-navy); }
.bas-prose a:not(.bas-btn) { color: var(--bas-lb-d); }   /* a button in post content keeps its own color */

.bas-notice {
  border: 1px solid var(--bas-gray); background: var(--bas-alt); border-left: 4px solid var(--bas-gray);
  border-radius: 0 8px 8px 0; padding: 14px 18px; font-size: 13px; color: var(--bas-muted);
  margin-bottom: 30px;
}
.bas-notice strong { color: var(--bas-navy); display: block; margin-bottom: 3px; font-size: 12px; letter-spacing: .5px; text-transform: uppercase; }

/* -------------------------------------------------------- page head ----- */

.bas-pagehead { background: var(--bas-navy); color: #fff; position: relative; overflow: hidden; }
.bas-pagehead::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(700px 380px at 82% 12%, rgba(91, 192, 222, .18), transparent 62%);
}
.bas-pagehead > .bas-wrap { position: relative; padding-block: clamp(44px, 6vw, 68px); }
.bas-pagehead h1 { color: #fff; margin: 0; }
.bas-pagehead p { color: var(--bas-on-dark); margin: 14px 0 0; max-width: 62ch; font-size: 15px; }

.bas-crumbs { font-size: 12px; color: var(--bas-on-dark-soft); margin-bottom: 16px; }
.bas-crumbs a { color: var(--bas-on-dark-soft); text-decoration: none; }
.bas-crumbs a:hover { color: var(--bas-lb); text-decoration: underline; }
.bas-crumbs span { opacity: .5; margin: 0 7px; }

/* ------------------------------------------------------------ footer ----- */

.bas-footer { background: var(--bas-navy-900); color: var(--bas-on-dark-soft); padding-top: 54px; }
.bas-footer__cols { display: grid; gap: 30px; padding-bottom: 34px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .bas-footer__cols { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .bas-footer__cols { grid-template-columns: 1.5fr 1fr 1fr 1fr 1.2fr; gap: 26px; } }
.bas-footer h2 { color: #fff; font-size: 13px; font-weight: 600; margin: 0 0 14px; letter-spacing: .5px; }
.bas-footer ul { list-style: none; margin: 0; padding: 0; }
.bas-footer a { display: inline-block; color: var(--bas-on-dark-soft); text-decoration: none; font-size: 12.5px; padding: 5px 0; }
.bas-footer a:hover { color: var(--bas-lb); text-decoration: underline; }
.bas-footer__tag { font-size: 12.5px; line-height: 1.6; margin: 14px 0 0; color: var(--bas-on-dark-soft); }
.bas-footer__logo { background: #fff; border-radius: 6px; padding: 4px 6px; display: inline-flex; }
.bas-footer__logo img { height: 52px; width: auto; display: block; }
.bas-footer__contact li { font-size: 12.5px; padding: 5px 0; line-height: 1.5; }

.bas-subscribe { border-top: 1px solid #22375C; border-bottom: 1px solid #22375C; padding-block: 26px; }
.bas-subscribe__grid { display: grid; gap: 18px; align-items: center; }
@media (min-width: 860px) { .bas-subscribe__grid { grid-template-columns: 1fr auto; } }
.bas-subscribe p { margin: 0; font-size: 13.5px; color: #fff; font-weight: 500; }
.bas-subscribe small { display: block; color: var(--bas-on-dark-soft); font-weight: 400; font-size: 12px; margin-top: 4px; }
/* The field and its button sit on one line. Wrapping dropped the button underneath the
   input, which read as a broken form rather than a deliberate stack. */
.bas-subscribe__form { display: flex; gap: 10px; flex-wrap: nowrap; align-items: stretch; }
.bas-subscribe__form .bas-btn { flex: 0 0 auto; white-space: nowrap; min-height: 46px; }
@media (max-width: 520px) { .bas-subscribe__form { flex-wrap: wrap; } }
.bas-subscribe input[type="email"] {
  flex: 1 1 220px; min-width: 0; min-height: 46px; background: #0F1F3A; border: 1px solid #2C4A72;
  border-radius: 6px; padding: 10px 14px; color: #fff; font-family: inherit; font-size: 13px;
}
.bas-subscribe input::placeholder { color: #6F86A0; }
.bas-subscribe input:focus { border-color: var(--bas-lb); outline: 3px solid rgba(91, 192, 222, .35); outline-offset: 0; }

.bas-footer__bottom {
  padding-block: 18px; display: flex; justify-content: space-between; gap: 14px;
  flex-wrap: wrap; font-size: 11.5px; color: #7891AB;
}
.bas-footer__bottom a { color: #7891AB; font-size: 11.5px; padding: 2px 0; }
.bas-footer__accent { height: 6px; background: var(--bas-lb); width: 100%; }

/* ---------------------------------------------------------- utilities ---- */

.bas-hidden { display: none !important; }
.bas-mt-0 { margin-top: 0 !important; }
.bas-center { text-align: center; }
.bas-center .bas-lead { margin-inline: auto; }
.bas-center .bas-kt { justify-content: center; }
.bas-divider { display: block; width: 100%; height: clamp(90px, 12vw, 150px); object-fit: cover; }

.bas-eyebrow-badge {
  display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 20px;
  background: rgba(91, 192, 222, .14); border: 1px solid rgba(91, 192, 222, .34);
  color: var(--bas-lb); font-size: 11px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase;
}

.bas-badges { display: flex; flex-wrap: wrap; gap: 10px 22px; list-style: none; margin: 0; padding: 0; }
.bas-badges li { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 600; color: var(--bas-navy); }
.bas-badges li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--bas-green); }
.bas-section--dark .bas-badges li, .bas-hero .bas-badges li { color: #fff; }

/* --------------------------------------------------- reduced motion ------ */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .bas-btn:hover, .wp-block-button__link:hover,
  .bas-card:hover, .bas-stage:hover { transform: none; }
  .bas-stage__reveal { max-height: 180px; opacity: 1; margin-top: 10px; }
}

/* --------------------------------------------------------------- print --- */

@media print {
  .bas-header, .bas-footer, .bas-mobile, .bas-carousel__dots { display: none !important; }
  body { color: #000; }
  .bas-hero, .bas-section--dark, .bas-section--darker { background: #fff !important; color: #000 !important; }
  .bas-hero h1, .bas-section--dark h2 { color: #000 !important; }
}

/* The results gap cards sit directly under the page h1, so their titles are h2 elements
   styled to the card title scale rather than h3s that would skip a heading level. */
.bas-card .bas-card__h {
  font-size: var(--wp--preset--font-size--subtitle, 21px);
  font-weight: 700; color: var(--bas-navy); margin: 8px 0; line-height: 1.3;
}

/* The activation cards carry a four item bullet list from the Content Master. */
.bas-card__bullets { list-style: none; margin: 14px 0 0; padding: 0; }
.bas-card__bullets li {
  position: relative; padding: 5px 0 5px 18px; font-size: 12.5px;
  color: var(--bas-ink-600); line-height: 1.5;
}
.bas-card__bullets li::before {
  content: ""; position: absolute; left: 0; top: 12px;
  width: 6px; height: 6px; border-radius: 50%; background: var(--bas-green);
}
.bas-card.bas-card--on-dark .bas-card__bullets li { color: var(--bas-on-dark); }

/* A run of labelled definitions, used where the Content Master pairs a bold label with a
   sentence. Reads as structure rather than as a wall of paragraphs. */
.bas-defgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 26px 0 0; }
.bas-defgrid__i {
  padding: 20px 22px; background: #fff; border: 1px solid var(--bas-line);
  border-left: 3px solid var(--bas-lb); border-radius: var(--bas-r-card);
  box-shadow: var(--bas-sh-card);
}
.bas-defgrid__i h3 {
  font-size: 14px; font-weight: 600; letter-spacing: .01em;
  margin: 0 0 7px; color: var(--bas-navy); line-height: 1.35;
}
.bas-defgrid__i p { margin: 0; font-size: 13.5px; line-height: 1.62; color: var(--bas-ink-600); }
.bas-defgrid__i:nth-child(4n+2) { border-left-color: var(--bas-green); }
.bas-defgrid__i:nth-child(4n+3) { border-left-color: var(--bas-purple); }
.bas-defgrid__i:nth-child(4n+4) { border-left-color: var(--bas-navy); }
.bas-section--dark .bas-defgrid__i {
  background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .14);
  box-shadow: none;
}
.bas-section--dark .bas-defgrid__i h3 { color: #fff; }
.bas-section--dark .bas-defgrid__i p { color: var(--bas-on-dark); }
@media (max-width: 780px) { .bas-defgrid { grid-template-columns: 1fr; } }

/* The engine band's heading, and the opening lede a hero did not take. */
.bas-saq__h { font-size: 26px; line-height: 1.22; margin: 6px 0 14px; color: var(--bas-navy); }
.bas-lede {
  font-size: 18px; line-height: 1.62; color: var(--bas-ink-700);
  max-width: 780px; margin: 0 0 14px;
}
.bas-section--dark .bas-lede { color: var(--bas-on-dark); }
@media (max-width: 780px) { .bas-lede { font-size: 16px; } .bas-saq__h { font-size: 21px; } }

/* ------------------------------------------------ section seams and accent --

   WordPress applies its 22px block gap to every top level child of the entry content. Each
   band already carries 74px of its own padding, so that gap contributed nothing but a white
   sliver of page background between two colored bands, visible wherever the two grounds
   differed and most obvious under the header and around a divider image.

   The seams close, and the two places that read as deliberate breaks get the same 5px Light
   Blue rule the footer already uses. */

/* Scoped to bands only. A blog post puts its paragraphs and headings directly in the entry
   content, and resetting every child flattened that prose into an unreadable wall. A band is
   always a <section> or the separator image; prose never is. */
.entry-content > section,
.entry-content > img.bas-divider { margin-top: 0 !important; margin-bottom: 0 !important; }

/* Under the site header, above the first band. */
main.wp-block-group { margin-top: 0 !important; border-top: 5px solid var(--bas-lb); }

/* The full bleed separator image, and the rule that closes it. */
.bas-divider {
  margin: 0 !important;
  border-bottom: 5px solid var(--bas-lb);
}

/* ------------------------------------------------------ stat overflow ------

   A stat value is a number, but nothing structurally guarantees it. A single long value used
   to push the whole grid wider than the viewport and scroll the page sideways. The value now
   shrinks and wraps inside its own cell instead. */

.bas-stat__v,
.bas-statgrid__v {
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: break-word;
  font-size: clamp(22px, 2.4vw, var(--wp--preset--font-size--stat, 40px));
  line-height: 1.1;
}
.bas-stat, .bas-statgrid__i, .bas-statbar__i { min-width: 0; overflow: hidden; }
.bas-statgrid, .bas-statbar { max-width: 100%; }

/* Jump navigation for the consolidated Revenue Activation page, CO-11. Three programs that were
   separate URLs are now anchored sections, so the reader needs a route to each from the top. */
.bas-jump { display: flex; flex-wrap: wrap; gap: 10px; }
.bas-jump a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 10px 20px;
  border-radius: 22px; background: #fff; border: 1px solid var(--bas-line);
  color: var(--bas-navy); font-size: 13.5px; font-weight: 600; text-decoration: none;
  transition: border-color var(--bas-dur) var(--bas-ease), background var(--bas-dur) var(--bas-ease);
}
.bas-jump a:hover { border-color: var(--bas-lb); background: rgba(91, 192, 222, .10); }
.bas-jump a:focus-visible { outline: 3px solid var(--bas-lb); outline-offset: 2px; }
.bas-section--flush { padding-block: 22px; }
.bas-section--dark .bas-jump a, .bas-section--darker .bas-jump a {
  background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .16); color: #fff;
}

/* Strategic Partner cards, CO-14. The grid holds one, two or three entries without a break. */
.bas-partner__mark { margin-bottom: 14px; }
.bas-partner__mark img {
  max-height: 46px; width: auto; display: block; background: #fff;
  border-radius: 6px; padding: 6px 10px;
}