/* KBI main — variant B (mathflat-style; footer from v2). Loads after main.css; reuses its header, mega menu, drawer, orgs marquee. */

.b-page { --ink: #111318; --sub: #4b5263; --soft: #f4f6fa; --line: #e6e9f0; --navy: #233d7f; background: #fff; color: var(--ink); }
.b-grad { background: var(--grad-brand); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }

/* ---------- pills (buttons) ---------- */
.b-pill { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 52px; padding: 0 28px; border-radius: 12px;
  font: 700 16px/1 var(--font-sans); letter-spacing: -0.01em; white-space: nowrap; border: 1px solid transparent;
  transition: background-position .45s ease, background-color .2s, color .2s, box-shadow .3s, transform .2s; }
.b-pill svg { width: 18px; height: 18px; }
.b-pill:active { transform: translateY(1px); }
.b-pill--grad { color: #fff; background: var(--grad-brand); background-size: 170% 100%; background-position: 0 50%; box-shadow: 0 10px 24px rgba(63,131,237,.28); }
.b-pill--grad:hover { background-position: 100% 50%; }
.b-pill--line { color: var(--ink); background: #fff; border-color: var(--line); }
.b-pill--line:hover { background: var(--soft); }
.b-pill--dark { color: #fff; background: var(--ink); }
.b-pill--dark:hover { background: #2a2e38; }
.b-pill--glass { color: #fff; background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.35); backdrop-filter: blur(6px); }
.b-pill--glass:hover { background: rgba(255,255,255,.22); }
.b-pill--sm { height: 40px; padding: 0 18px; font-size: 14px; border-radius: 10px; }

/* header CTA (desktop only, the drawer handles phones) */
.b-header-cta { display: none; height: 42px; padding: 0 20px; font-size: 15px; border-radius: 10px; }
@media (min-width: 1024px) { .b-header-cta { display: inline-flex; } }

/* ---------- section heads ---------- */
.b-sec { padding-block: 64px; }
@media (min-width: 768px) { .b-sec { padding-block: 96px; } }
.b-sec--tight { padding-top: 24px; }
@media (min-width: 1024px) { .b-sec { padding-block: 140px; } .b-sec--tight { padding-top: 40px; } }
.b-head { margin-bottom: 48px; }
.b-head--center { text-align: center; }
.b-head__kicker { margin: 0 0 12px; font: 500 18px/1.5 var(--font-sans); color: var(--sub); }
.b-head h2 { margin: 0; font: 700 32px/1.35 var(--font-sans); letter-spacing: -0.035em; color: var(--ink); word-break: keep-all; }
@media (min-width: 1024px) { .b-head { margin-bottom: 64px; } .b-head h2 { font-size: 46px; } .b-head__kicker { font-size: 20px; } }
.b-under { position: relative; display: inline-block; }

/* ---------- 1. hero ---------- */
.b-hero { padding: 56px 0 0; }
.b-hero__top { display: grid; gap: 24px; align-items: end; }
.b-hero__title { margin: 0; font: 700 38px/1.28 var(--font-sans); letter-spacing: -0.04em; color: var(--ink); word-break: keep-all; }
.b-hero__side p { margin: 0; font: 400 17px/1.7 var(--font-sans); color: var(--sub); }
.b-hero__side b { color: var(--ink); font-weight: 600; }
.b-hero__btns { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.b-hero__media { margin: 40px 0 0; border-radius: 24px; overflow: hidden; aspect-ratio: 16 / 9; background: var(--soft); }
.b-hero__media img { width: 100%; height: 100%; object-fit: cover; display: block; animation: b-settle 1.8s cubic-bezier(.2,.7,.2,1) both; }
@keyframes b-settle { from { transform: scale(1.06); } to { transform: scale(1); } }
@media (min-width: 1024px) {
  .b-hero { padding-top: 88px; }
  .b-hero__top { grid-template-columns: 1.15fr 1fr; gap: 48px; }
  .b-hero__title { font-size: 60px; }
  .b-hero__side { justify-self: end; }
  .b-hero__media { margin-top: 64px; border-radius: 32px; aspect-ratio: 21 / 9; }
}

/* ---------- 2. carousel: big cards that peek past the container ---------- */
.b-carousel { position: relative; }
/* centered, infinite carousel: JS positions the track with translateX so the current card is centred
   and neighbours peek on both sides; a cloned set on each side makes the loop seamless */
.b-carousel { overflow: hidden; }
.b-carousel__track { --gap: 20px; --slide-w: min(86vw, 1040px); display: flex; gap: var(--gap); margin: 0; padding: 0; list-style: none;
  touch-action: pan-y; user-select: none; will-change: transform; }
.b-carousel__track.is-animating { transition: transform .65s cubic-bezier(.4, 0, .2, 1); }
.b-carousel__track.is-dragging { cursor: grabbing; }
.b-slide { position: relative; flex: 0 0 var(--slide-w); display: grid; overflow: hidden; border-radius: 28px; color: #fff; min-height: 420px; }
/* photo fills the whole card over the gradient ground, at reduced opacity, fading out under the text
   (bottom on phones where text sits low, left on desktop where text sits left) */
.b-slide img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .45;
  -webkit-mask-image: linear-gradient(0deg, transparent 0%, transparent 30%, #000 75%); mask-image: linear-gradient(0deg, transparent 0%, transparent 30%, #000 75%);
  transform: scale(1.02); transition: transform 1.2s cubic-bezier(.2,.7,.2,1), opacity .6s; }
.b-slide:hover img { transform: scale(1.06); opacity: .55; }
.b-slide__text { position: relative; z-index: 1; align-self: end; max-width: 440px; padding: 36px; }
.b-slide__tag { display: inline-block; margin: 0 0 14px; padding: 6px 12px; border-radius: 999px; background: rgba(255,255,255,.18); font: 600 14px/1 var(--font-sans); }
.b-slide h3 { margin: 0 0 12px; font: 700 30px/1.3 var(--font-sans); letter-spacing: -0.035em; }
.b-slide__text > p:not(.b-slide__tag) { margin: 0; font: 400 16px/1.65 var(--font-sans); color: rgba(255,255,255,.85); }
.b-slide__more { display: inline-flex; align-items: center; gap: 6px; margin-top: 22px; font: 700 15px/1 var(--font-sans); color: #fff; }
.b-slide__more svg { width: 18px; height: 18px; transition: transform .2s; }
.b-slide__more:hover svg { transform: translateX(3px); }
.b-slide--blue   { background: linear-gradient(135deg, #3f83ed 0%, #2353c9 100%); }
.b-slide--violet { background: linear-gradient(135deg, #8b67e6 0%, #5a3fc4 100%); }
.b-slide--sky    { background: linear-gradient(135deg, #4fb6f4 0%, #2f7ee0 100%); }
.b-slide--navy   { background: linear-gradient(135deg, #233d7f 0%, #111c3d 100%); }
.b-slide--mint   { background: linear-gradient(135deg, #36b3a8 0%, #1e7f8c 100%); }
.b-carousel__nav { display: flex; justify-content: center; gap: 10px; margin-top: 24px; }
.b-round { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--line); background: #fff; color: var(--ink); cursor: pointer; transition: background-color .2s, color .2s, border-color .2s; }
.b-round svg { width: 20px; height: 20px; }
.b-round:hover:not(:disabled) { background: var(--ink); color: #fff; border-color: var(--ink); }
.b-round:disabled { opacity: .35; cursor: default; }
@media (min-width: 1024px) {
  .b-carousel__track { --gap: 24px; }
  .b-slide { min-height: 520px; }
  .b-slide__text { padding: 56px; }
  .b-slide h3 { font-size: 42px; }
  .b-slide img { -webkit-mask-image: linear-gradient(90deg, transparent 0%, transparent 22%, #000 68%); mask-image: linear-gradient(90deg, transparent 0%, transparent 22%, #000 68%); }
  .b-slide__text { align-self: center; }
}

/* ---------- 3. 14 public-interest projects: sticky title + numbered two-column list ---------- */
.b-purpose { background: var(--soft); }
.b-purpose__grid { display: grid; gap: 40px; }
.b-purpose__head h2 { margin: 0; font: 700 34px/1.25 var(--font-sans); letter-spacing: -0.04em; color: var(--ink); }
.b-purpose__head > p:not(.b-head__kicker) { margin: 18px 0 28px; font: 400 16px/1.7 var(--font-sans); color: var(--sub); }
.b-purpose__list { display: grid; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.b-purpose__list li { display: grid; grid-template-columns: 40px 1fr; gap: 12px; align-items: baseline; padding: 18px 4px; border-bottom: 1px solid var(--line);
  font: 500 16px/1.55 var(--font-sans); color: var(--ink); word-break: keep-all; }
.b-purpose__list span { font: 700 14px/1 var(--font-sans); color: #3f83ed; font-variant-numeric: tabular-nums; }
@media (min-width: 1024px) {
  .b-purpose__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 2.2fr); gap: 72px; align-items: start; }
  .b-purpose__head { position: sticky; top: 120px; }
  .b-purpose__head h2 { font-size: 48px; }
  .b-purpose__list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 40px; }
  .b-purpose__list li { padding: 22px 4px; font-size: 17px; }
}

/* ---------- 4. dark stats ---------- */
.b-stats { position: relative; overflow: hidden; padding-block: 110px; background: #0b0f1c; color: #fff; text-align: center; }
.b-stats::before { content: ""; position: absolute; inset: auto -10% -60% -10%; height: 120%; background: radial-gradient(closest-side, rgba(63,131,237,.35), rgba(151,94,229,.18) 50%, transparent 75%); pointer-events: none; }
.b-stats h2 { position: relative; margin: 0 0 64px; font: 700 32px/1.4 var(--font-sans); letter-spacing: -0.035em; }
.b-stats__list { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px 16px; margin: 0; padding: 0; list-style: none; }
.b-stats__list strong { display: flex; justify-content: center; align-items: center; font: 800 48px/1 var(--font-sans); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.b-stats__list strong > span:first-child:not([data-count]):not(:last-of-type) { font-size: .55em; font-weight: 700; margin-right: 6px; }
.b-stats__list sup { font-size: .42em; font-weight: 700; margin-left: 6px; vertical-align: baseline; line-height: 1; color: #8fb4ff; }   /* unit centred on the number */
.b-stats__list li > span { display: block; margin-top: 14px; font: 400 15px/1.5 var(--font-sans); color: #a9b2c7; }
.b-stats__sub { font-size: inherit; }
@media (max-width: 1023px) { .b-stats__sub { font-size: 13px; letter-spacing: -0.02em; } }
@media (min-width: 1024px) {
  .b-stats { padding-block: 150px; }
  .b-stats h2 { font-size: 46px; margin-bottom: 88px; }
  .b-stats__list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .b-stats__list strong { font-size: 76px; }
  .b-stats__list li > span { font-size: 17px; }
}

/* ---------- 5. steps ---------- */
.b-steps { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; counter-reset: s; }
.b-steps li { padding: 28px; border-radius: 22px; background: var(--soft); transition: background-color .3s, transform .3s; }
.b-steps li:hover { background: #eef3fd; transform: translateY(-4px); }
.b-steps span { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: #fff; font: 800 15px/1 var(--font-sans); color: #3f83ed; box-shadow: 0 6px 16px rgba(17,19,24,.06); }
.b-steps h3 { margin: 22px 0 8px; font: 700 20px/1.4 var(--font-sans); letter-spacing: -0.02em; }
.b-steps p { margin: 0; font: 400 15px/1.6 var(--font-sans); color: var(--sub); }
@media (min-width: 768px) { .b-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .b-steps { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; } .b-steps li { min-height: 240px; } }

/* ---------- 6. collage + news ---------- */
.b-collage-sec { padding-top: 0; }   /* follows the process section directly; its bottom padding is the gap */
@media (min-width: 1024px) { .b-collage-sec { padding-top: 40px; } }
.b-news { max-width: 880px; margin: 0 auto; padding: 8px 28px 16px; border: 1px solid var(--line); border-radius: 24px; background: #fff; }
.b-news__head { display: flex; justify-content: space-between; align-items: center; padding: 20px 0 12px; }
.b-news__head h3 { margin: 0; font: 700 20px/1.4 var(--font-sans); }
.b-news__head a { display: inline-flex; align-items: center; gap: 4px; font: 600 14px/1 var(--font-sans); color: var(--sub); }
.b-news__head a svg { width: 16px; height: 16px; }
.b-news ul { margin: 0; padding: 0; list-style: none; }
.b-news li a { display: flex; align-items: center; gap: 12px; padding: 16px 0; border-top: 1px solid var(--line); }
.b-news li b { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 500 16px/1.5 var(--font-sans); color: var(--ink); }
.b-news li a:hover b { color: #3f83ed; }
.b-news time { flex: none; font: 400 14px/1 var(--font-sans); color: #7a8295; font-variant-numeric: tabular-nums; }
.b-badge { flex: none; padding: 5px 10px; border-radius: 999px; background: var(--ink); color: #fff; font: 600 12px/1 var(--font-sans); }
.b-badge--line { background: #fff; color: var(--sub); border: 1px solid var(--line); }

/* orgs marquee (reused from main.css) sits on white here */
.b-page .orgs { padding-top: 24px; }

/* ---------- 8. full-bleed photo CTA ---------- */
.b-cta { position: relative; isolation: isolate; overflow: hidden; padding-block: 140px; color: #fff; text-align: center; }
.b-cta > img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.b-cta::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(8,12,28,.55), rgba(8,12,28,.82)); }
.b-cta h2 { margin: 0; font: 700 34px/1.35 var(--font-sans); letter-spacing: -0.035em; }
.b-cta p { margin: 20px 0 0; font: 400 17px/1.7 var(--font-sans); color: rgba(255,255,255,.82); }
.b-cta__btns { justify-content: center; margin-top: 36px; }
@media (min-width: 1024px) { .b-cta { padding-block: 200px; } .b-cta h2 { font-size: 52px; } .b-cta p { font-size: 19px; } }

/* ---------- footer: navy + oversized wordmark ---------- */
.b-footer { background: var(--navy); color: #c3cbe0; padding-top: 72px; overflow: hidden; }
.b-footer__top { display: grid; gap: 40px; padding-bottom: 44px; border-bottom: 1px solid rgba(255,255,255,.16); }
.b-footer__logo { height: 35px; width: auto; }
.b-footer__map { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 24px; }
.b-footer__map h3 { margin: 0 0 14px; font: 700 15px/1.4 var(--font-sans); color: #fff; }
.b-footer__map ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 9px; }
.b-footer__map a { font: 400 14px/1.4 var(--font-sans); color: #c3cbe0; }
.b-footer__map a:hover { color: #fff; }
.b-footer__bottom { display: grid; gap: 16px; padding-top: 28px; font: 400 14px/1.8 var(--font-sans); }
.b-footer__bottom p { margin: 0; }
.b-footer__links { display: flex; gap: 20px; margin: 0; padding: 0; list-style: none; }
.b-footer__links a { color: #c3cbe0; }
.b-footer__links b { color: #fff; }
.b-footer__word { margin: 48px 0 0; font: 800 clamp(34px, 8.4vw, 124px)/.85 var(--font-sans); letter-spacing: -0.05em; white-space: nowrap;
  color: transparent; -webkit-text-stroke: 1px rgba(255,255,255,.22); }
.b-footer__copy { margin: 18px 0 0; padding-bottom: 28px; font: 400 13px/1 var(--font-sans); color: #93a3cc; }
.b-footer :focus-visible { outline-color: #fff; }
@media (min-width: 1024px) {
  .b-footer__top { grid-template-columns: 240px 1fr; }
  .b-footer__map { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .b-footer__bottom { grid-template-columns: 1fr auto; }
}

/* ---------- floating consult bar ---------- */
.b-float { position: fixed; left: 50%; bottom: calc(env(safe-area-inset-bottom, 0px) + 20px); z-index: 40; display: flex; align-items: center; gap: 16px;
  padding: 10px 10px 10px 22px; border-radius: 16px; background: rgba(17,19,24,.88); color: #fff; backdrop-filter: blur(12px);
  box-shadow: 0 16px 40px rgba(17,19,24,.25); transform: translate(-50%, 0); transition: transform .4s cubic-bezier(.2,.7,.2,1), opacity .3s; white-space: nowrap; }
.b-float.is-hidden { transform: translate(-50%, 140%); opacity: 0; pointer-events: none; }
.b-float p { margin: 0; display: flex; gap: 10px; font: 400 14px/1 var(--font-sans); }
.b-float p span { color: #9fb8ff; font-weight: 700; font-variant-numeric: tabular-nums; }
.b-float button { display: grid; place-items: center; width: 32px; height: 32px; border: 0; border-radius: 8px; background: transparent; color: #aab; cursor: pointer; }
.b-float button:hover { background: rgba(255,255,255,.1); color: #fff; }
.b-float button svg { width: 18px; height: 18px; }
/* phones: full-width bar (12px inset); label stacked above the number */
@media (max-width: 767px) {
  .b-float { left: 12px; right: 12px; bottom: calc(env(safe-area-inset-bottom, 0px) + 12px); gap: 12px; padding: 12px 10px 12px 20px;
    border-radius: 16px; transform: none; }
  .b-float.is-hidden { transform: translateY(140%); }
  .b-float p { flex: 1; min-width: 0; flex-direction: column; gap: 6px; }
  .b-float p b { font-size: 13px; font-weight: 500; color: rgba(255,255,255,.72); }
  .b-float p span { font-size: 17px; }
}

/* ---------- reveal on scroll (content is visible without JS; JS adds the motion) ---------- */
.js .reveal { opacity: 0; transform: translateY(24px); transition: opacity .8s ease, transform .8s cubic-bezier(.2,.7,.2,1); }
.js .reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; transition: none; }
  .b-hero__media img { animation: none; }
  .b-slide img, .b-tile img { transition: none; }
}

/* line break used only on phones */
.br-m { display: none; }
@media (max-width: 1023px) { .br-m { display: inline; } }

/* ---------- full-screen video hero ---------- */
.b-hero--video { position: relative; isolation: isolate; display: flex; align-items: center; justify-content: center;
  min-height: 100vh; min-height: 100svh; padding: 120px 0 96px; overflow: hidden; background: #0b0f1c; color: #fff; text-align: center; }
.b-hero__video { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover;
  filter: blur(2px); transform: scale(1.02); }   /* soft, frosted video; the scale hides the blurred (transparent) edges */
/* first frame behind the video, so phones never show an empty grey box while it loads */
.b-hero--video { background: #0b0f1c url(/assets/img/hero-poster.jpg) center / cover no-repeat; }
/* iOS draws a big play button while loading or when autoplay is blocked (Low Power Mode); the video is decorative */
.b-hero__video::-webkit-media-controls,
.b-hero__video::-webkit-media-controls-start-playback-button,
.b-hero__video::-webkit-media-controls-overlay-play-button { display: none !important; -webkit-appearance: none; }
.b-hero--video::before { content: ""; position: absolute; inset: 0; z-index: -1;   /* dim: darker at top (header) and bottom */
  background: linear-gradient(180deg, rgba(6,10,24,.62) 0%, rgba(6,10,24,.45) 40%, rgba(6,10,24,.6) 100%);}
.b-hero__center { display: flex; flex-direction: column; align-items: center; }
.b-hero--video .b-hero__title { color: #fff; text-shadow: 0 2px 24px rgba(0,0,0,.25); font-size: 30px; line-height: 1.3; }
@media (min-width: 768px) { .b-hero--video .b-hero__title { font-size: 40px; } }
.b-hero__lead { margin: 24px 0 0; font: 400 17px/1.7 var(--font-sans); color: rgba(255,255,255,.86); }
.b-hero--video .b-hero__btns { justify-content: center; margin-top: 36px; }
.b-pill--glass { color: #fff; background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.45); backdrop-filter: blur(6px); }
.b-pill--glass:hover { background: rgba(255,255,255,.2); }
/* scroll cue: two stacked chevrons (static) */
.b-hero__scroll { position: absolute; left: 50%; bottom: 24px; width: 40px; height: 40px; margin-left: -20px; display: grid; place-items: center; color: #fff; }
.b-hero__scroll svg { width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
.b-hero__scroll .c1 { opacity: .45; }
.br-d { display: none; }
@media (min-width: 768px) { .br-d { display: inline; } }
@media (min-width: 1024px) {
  .b-hero--video .b-hero__title { font-size: 50px; line-height: 1.28; }
  .b-hero__lead { font-size: 18px; }
}

/* ---------- header over the video: transparent at the top, white once scrolled (.is-solid) or while in use ----------
   "In use" = keyboard focus inside it (:focus-visible), or the pointer over it on devices that really hover.
   Touch screens are left out of :hover on purpose: a tap leaves a sticky :hover behind, and closing the
   drawer returns focus to the menu button — both used to leave the header stuck white at the top. */
.b-page .b-header--overlay { position: fixed; left: 0; right: 0; top: 0; --bar-dur: .3s; --mega-dur: .4s;
  background: transparent; transition: background-color var(--bar-dur) ease var(--mega-dur), box-shadow var(--bar-dur) ease var(--mega-dur); }
.b-header--overlay .kbi-header__logo { position: relative; display: block; }
.b-header--overlay .kbi-header__logo .logo-white { position: absolute; left: 0; top: 0; opacity: 0; }
.b-header--overlay :is(.kbi-header__logo img, .kbi-gnb > li > a, .header-menu, .b-header-cta) {
  transition: opacity var(--bar-dur) ease var(--mega-dur), color var(--bar-dur) ease var(--mega-dur), background-color var(--bar-dur) ease var(--mega-dur); }

/* transparent look: not scrolled and no keyboard focus inside */
.b-header--overlay:not(.is-solid):not(:has(:focus-visible)) .logo-color { opacity: 0; }
.b-header--overlay:not(.is-solid):not(:has(:focus-visible)) .logo-white { opacity: 1; }
.b-header--overlay:not(.is-solid):not(:has(:focus-visible)) .kbi-gnb > li > a { color: #fff; }
.b-header--overlay:not(.is-solid):not(:has(:focus-visible)) .header-menu { color: #fff; background: transparent; }
.b-header--overlay:not(.is-solid):not(:has(:focus-visible)) .b-header-cta { background: #fff; color: #111318; }
/* solid look */
.b-page .b-header--overlay:is(.is-solid, :has(:focus-visible)) { background: #fff; transition-delay: 0s; }
.b-header--overlay:is(.is-solid, :has(:focus-visible)) :is(.kbi-header__logo img, .kbi-gnb > li > a, .header-menu, .b-header-cta) { transition-delay: 0s; }

/* real hover (mouse/trackpad) also turns it solid — restores the default (white-bar) colours */
@media (hover: hover) and (pointer: fine) {
  .b-page .b-header--overlay:hover { background: #fff; transition-delay: 0s; }
  .b-page .b-header--overlay:hover :is(.kbi-header__logo img, .kbi-gnb > li > a, .header-menu, .b-header-cta) { transition-delay: 0s; }
  .b-page .b-header--overlay:hover .logo-color { opacity: 1; }
  .b-page .b-header--overlay:hover .logo-white { opacity: 0; }
  .b-page .b-header--overlay:hover .kbi-gnb > li > a { color: var(--navy); }
  .b-page .b-header--overlay:hover .kbi-gnb > li > a:hover { color: var(--blue); }
  .b-page .b-header--overlay:hover .header-menu { color: var(--navy); }
  .b-page .b-header--overlay:hover .b-header-cta { background: #111318; color: #fff; }
}