/* =========================================================
   TOKENS
   These map cleanly to ACF Options fields (colours/fonts) later.
========================================================= */
:root{
  --navy:        #0e1b3d;
  --navy-light:  #16274f;
  --gold:        #f2a91e;
  --gold-dark:   #d99000;
  --red:         #e2413a;
  --green:       #2f855a;
  --blue:        #2b6cb0;
  --teal:        #1f7a6c;
  --purple:      #6b3fa0;
  --cream:       #ffffff;
  --off-white:   #f4f6fb;
  --text-dark:   #1a1a2e;
  --text-muted:  #5c6376;

  --font-display: 'Archivo Black', 'Poppins', sans-serif;
  --font-body:    'Poppins', sans-serif;

  --radius-lg: 20px;
  --radius-md: 14px;
  --radius-sm: 10px;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

*{ box-sizing: border-box; }

body{
  font-family: var(--font-body);
  color: var(--text-dark);
  background: var(--cream);
}

a{ text-decoration: none; }

.container{ max-width: 1280px; }

/* =========================================================
   SCROLL-REVEAL ANIMATION SYSTEM
   Base state = mobile-first "already visible" fallback (no JS).
   JS adds .is-visible on intersection; CSS transitions the rest.
========================================================= */
.reveal{
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
  will-change: opacity, transform;
}
.reveal.is-visible{
  opacity: 1;
  transform: translateY(0);
}
.reveal-fade{
  opacity: 0;
  transition: opacity 0.8s var(--ease);
}
.reveal-fade.is-visible{ opacity: 1; }

.reveal-scale{
  opacity: 0;
  transform: scale(0.92);
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
}
.reveal-scale.is-visible{ opacity: 1; transform: scale(1); }

/* Stagger children of a reveal group (topic icons, pathway cards, footer cols) */
.reveal-stagger > *{
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
}
.reveal-stagger.is-visible > *{ opacity: 1; transform: translateY(0); }
.reveal-stagger.is-visible > *:nth-child(1){ transition-delay: 0.05s; }
.reveal-stagger.is-visible > *:nth-child(2){ transition-delay: 0.12s; }
.reveal-stagger.is-visible > *:nth-child(3){ transition-delay: 0.19s; }
.reveal-stagger.is-visible > *:nth-child(4){ transition-delay: 0.26s; }
.reveal-stagger.is-visible > *:nth-child(5){ transition-delay: 0.33s; }
.reveal-stagger.is-visible > *:nth-child(6){ transition-delay: 0.40s; }

@media (prefers-reduced-motion: reduce){
  .reveal, .reveal-fade, .reveal-scale, .reveal-stagger > *{
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  *{ scroll-behavior: auto !important; }
}

html{ scroll-behavior: smooth; }

/* =========================================================
   HEADER
========================================================= */
.site-header{
  background: var(--navy);
  padding: 0.6rem 0;
  position: sticky;
  top: 0;
  z-index: 1000;
  transition: background 0.35s var(--ease), padding 0.35s var(--ease), box-shadow 0.35s var(--ease), backdrop-filter 0.35s var(--ease);
}
.site-header.is-scrolled{
  background: rgba(14,27,61,0.9);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  padding: 0.35rem 0;
  box-shadow: 0 8px 30px rgba(0,0,0,0.25);
}
.navbar-brand{ padding: 0; }

/* --- Custom animated hamburger / close icon --- */
.navbar-toggler{
  border: none;
  padding: 0;
  background: transparent;
  box-shadow: none !important;
  width: 28px;
  height: 22px;
  line-height: 0;
}
.navbar-toggler:focus{ box-shadow: none; outline: none; }
.hamburger{
  position: relative;
  display: inline-block;
  width: 26px;
  height: 18px;
}
.hamburger__line{
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background: #fff;
  transition: transform 0.35s var(--ease), opacity 0.25s var(--ease), top 0.35s var(--ease), width 0.35s var(--ease);
}
.hamburger__line--top{ top: 0; width: 65%; }
.hamburger__line--mid{ top: 8px; width: 100%; }
.hamburger__line--bottom{ top: 16px; width: 65%; }

/* Morph into an X when the menu is open (Bootstrap toggles
   aria-expanded automatically, so no extra JS is needed here) */
.navbar-toggler[aria-expanded="true"] .hamburger__line--top{
  top: 8px;
  width: 100%;
  transform: rotate(45deg);
}
.navbar-toggler[aria-expanded="true"] .hamburger__line--mid{
  opacity: 0;
  transform: translateX(-8px);
}
.navbar-toggler[aria-expanded="true"] .hamburger__line--bottom{
  top: 8px;
  width: 100%;
  transform: rotate(-45deg);
}

.site-logo{
  height: 42px;
  width: auto;
  display: block;
  transition: transform 0.35s var(--ease);
}
.navbar-brand:hover .site-logo{ transform: scale(1.04); }

.footer-main .site-logo{ height: 56px; }

.navbar-nav{ position: relative; }
.nav-indicator{
  position: absolute;
  bottom: -2px;
  height: 2px;
  border-radius: 2px;
  background: var(--gold);
  opacity: 0;
  pointer-events: none;
  transition: left 0.3s var(--ease), width 0.3s var(--ease), opacity 0.25s var(--ease);
}
.navbar-nav:hover .nav-indicator{ opacity: 1; }

.navbar-nav .nav-link{
  position: relative;
  color: rgba(255,255,255,0.85);
  font-weight: 500;
  font-size: 0.95rem;
  padding: 0.5rem 0.9rem;
  transition: color 0.25s var(--ease);
}
/* The underline sits under just the text label, not the whole link —
   otherwise it stretches to include the dropdown chevron on parent
   items, making it wider/misaligned compared to plain nav-links. */
.navbar-nav .nav-link__label{ position: relative; }
.navbar-nav .nav-link__label::after{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -0.35rem;
  height: 2px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s var(--ease);
}
.navbar-nav .nav-link:hover{ color: var(--gold); }
.navbar-nav .nav-link.active{ color: var(--gold); }
.navbar-nav .nav-link.active .nav-link__label::after{ transform: scaleX(1); }

/* Bootstrap's navbar CSS applies --bs-navbar-active-color (a dark
   color by default, since our <nav> doesn't use .navbar-dark) to
   the toggle link whenever its parent .dropdown gets Bootstrap's
   .show state — this keeps it matching the rest of the nav. */
.navbar-nav .show > .nav-link,
.navbar-nav .nav-link.show{
  color: rgba(255,255,255,0.85);
}

/* --- Dropdown: hover-to-open (desktop) with no dead gap between
     the trigger link and the panel. Plain, simple text items —
     kept intentionally close to Bootstrap's own defaults so this
     translates directly to a standard WordPress + Bootstrap menu
     later (no custom per-item icon/tagline fields required). ---*/
.dropdown-menu{
  background: #fff;
  border-radius: 10px;
  border: none;
  box-shadow: 0 20px 45px rgba(14,27,61,0.2);
  padding: 0.6rem;
  min-width: 300px;
}
.dropdown-item{
  padding: 0.6rem 0.9rem;
  border-radius: 8px;
  color: var(--navy);
  font-size: 0.92rem;
  transition: background 0.2s var(--ease), color 0.2s var(--ease);
}
.dropdown-item:hover,
.dropdown-item:focus,
.dropdown-item.active{
  background: var(--off-white);
  color: var(--navy);
}

/* Mega-menu items (icon + title + tagline) inside .dropdown-menu */
.dropdown-item.mega-item{
  display: flex;
  align-items: flex-start;
  gap: 0.9rem;
  padding: 0.65rem 0.6rem;
  border-radius: 10px;
  color: inherit;
  white-space: normal;
  transition: background 0.2s var(--ease);
}
.dropdown-item.mega-item:hover,
.dropdown-item.mega-item.active{ background: var(--off-white); color: inherit; }
.mega-item__icon{
  width: 42px;
  height: 42px;
  border-radius: 10px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.05rem;
}
.mega-item__title{
  font-weight: 700;
  font-size: 0.88rem;
  color: var(--navy);
  margin-bottom: 0.1rem;
}
.mega-item__tagline{
  font-size: 0.78rem;
  color: var(--text-muted);
}

/* Chevron after dropdown-toggle parent links (real icon elements
   in the HTML, not a CSS ::after — more reliable rendering than a
   Unicode/Genericons content trick). Two separate icons swapped
   per breakpoint instead of rotating one, to avoid any rotation-
   direction ambiguity: a right chevron on mobile (rotates to
   point down when that section is expanded), a down chevron on
   desktop (always pointing down, next to the link text). */
.dropdown-arrow{
  color: #fff;
  font-size: 0.75rem;
  transition: transform 0.3s var(--ease), color 0.25s var(--ease);
}
.dropdown-arrow--desktop{ display: none; }
.dropdown-toggle[aria-expanded="true"] .dropdown-arrow--mobile{ transform: rotate(90deg); }

/* Bootstrap's .dropdown-toggle adds its own caret via ::after —
   redundant with our own <i class="bi bi-chevron-*"> icons, so
   suppress it. Only gold the chevron when the active page is a
   sub-menu item under this toggle (.active-parent) — not when this
   toggle itself is the current page. */
.navbar-nav .dropdown-toggle::after{ display: none; }
.navbar-nav .dropdown-toggle.active-parent .dropdown-arrow{ color: var(--gold); }

@media (min-width: 992px){
  .dropdown-arrow--mobile{ display: none; }
  .dropdown-arrow--desktop{ display: inline-block; }
}

@media (min-width: 992px){
  .navbar-nav .nav-item.dropdown{ position: relative; }
  .navbar-nav .dropdown-menu{
    position: absolute;
    top: 100%;
    left: 0;
    right: auto;
    transform: translateY(-8px);
    margin: 0 !important;
    margin-top: 0.4rem !important;
    display: flex;
    flex-direction: column;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.25s var(--ease), transform 0.25s var(--ease), visibility 0.25s;
  }
  .navbar-nav .nav-item.dropdown:hover .dropdown-menu,
  .navbar-nav .nav-item.dropdown .dropdown-menu.show{
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
  }
}

@media (max-width: 991.98px){
  .navbar-nav .dropdown-toggle{
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
  }
  .dropdown-menu{
    box-shadow: none;
    border-radius: 0;
    margin: 0.5rem -0.75rem 0;
    width: calc(100% + 1.5rem);
    max-width: none;
  }
}

.btn-contact{
  background: transparent;
  color: #fff;
  font-weight: 600;
  border-radius: 50px;
  padding: 0.5rem 1.3rem;
  border: 1.5px solid var(--gold);
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin-top: 1rem;
  transition: background 0.25s var(--ease), color 0.25s var(--ease), transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.btn-contact:hover{
  background: var(--gold);
  color: var(--navy);
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(242,169,30,0.35);
}

/* =========================================================
   HERO
========================================================= */
.hero{
  background: var(--navy);
  padding: 3rem 0 2.5rem;
  position: relative;
  overflow: hidden;
}
.hero--dramatic{ background: transparent; padding: 0; margin: 0; overflow: hidden; }

/* =========================================================
   HERO — dramatic photo variant (full width)
   A full-bleed panel: photo fading into navy, an overlapping
   heading, three CTA cards (contained to the standard site
   width), and side quick-link decorations anchored to the
   viewport edges.
========================================================= */
.hero-dramatic{
  background: var(--navy);
  overflow: hidden;
  position: relative;
  width: 100%;
}

.hero-dramatic__inner{
  position: relative;
  z-index: 1;
}

/* The photo now acts as the dominant visual for the whole hero —
   tall enough to fill most of the section — while still sitting
   inside the standard container width (not full-bleed). Left and
   right edges fade into the navy background via a mask, instead
   of a separate blurred backdrop layer. */
.hero-dramatic__photo{
  position: relative;
  height: 760px;
  width: 130%;
  margin-left: -15%;
  margin-top: 0;
  border-radius: var(--radius-lg);
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  overflow: hidden;
}
.hero-dramatic__photo img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 25%;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, black 28%, black 72%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, black 28%, black 72%, transparent 100%);
}
.hero-dramatic__photo::after{
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 65% 55% at 50% 0%, rgba(14,27,61,0.85) 0%, rgba(14,27,61,0.45) 45%, rgba(14,27,61,0) 75%),
    linear-gradient(180deg,
      var(--navy) 0%,
      rgba(14,27,61,0.92) 5%,
      rgba(14,27,61,0.78) 10%,
      rgba(14,27,61,0.6) 16%,
      rgba(14,27,61,0.4) 23%,
      rgba(14,27,61,0.22) 31%,
      rgba(14,27,61,0.1) 40%,
      rgba(14,27,61,0.02) 50%,
      rgba(14,27,61,0) 58%,
      rgba(14,27,61,0.12) 70%,
      rgba(14,27,61,0.4) 84%,
      var(--navy) 100%
    );
}
.hero-dramatic__glow{
  position: absolute;
  left: 50%;
  top: 35%;
  transform: translate(-50%,-50%);
  width: 70%;
  height: 70%;
  background: radial-gradient(circle, rgba(242,169,30,0.3), transparent 65%);
  z-index: 1;
  pointer-events: none;
}

.hero-dramatic__heading-wrap{
  position: relative;
  z-index: 3;
  text-align: center;
  margin-top: -190px;
  padding: 0 2rem;
}
.hero-dramatic__heading-wrap h1{
  font-family: var(--font-body);
  font-weight: 800;
  color: #fff;
  font-size: clamp(2rem, 5vw, 3rem);
  line-height: 1.2;
  margin-bottom: 0.9rem;
  text-shadow: 0 4px 20px rgba(0,0,0,0.4);
}
.hero-dramatic__heading-wrap h1 .accent{ color: var(--gold); }
.hero-dramatic__heading-wrap p{
  color: rgba(255,255,255,0.75);
  font-size: 1rem;
  max-width: 32rem;
  margin: 0 auto;
}

.hero-dramatic__cards{
  position: relative;
  z-index: 3;
  display: flex;
  gap: 0.9rem;
  padding: 2.25rem 2rem 4rem;
  flex-wrap: wrap;
  justify-content: center;
}
.dramatic-card{
  background: linear-gradient(135deg, rgba(43,108,176,0.16), rgba(43,108,176,0.04) 60%);
  border: 1px solid rgba(43,108,176,0.35);
  border-radius: 12px;
  padding: 1rem 1.25rem;
  min-width: 200px;
  max-width: 400px;
  flex: 0 1 400px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  text-decoration: none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 8px 20px rgba(43,108,176,0.12);
  transition: background 0.25s var(--ease), border-color 0.25s var(--ease), transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.dramatic-card:hover{
  background: linear-gradient(135deg, rgba(43,108,176,0.28), rgba(43,108,176,0.08) 60%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), 0 12px 28px rgba(43,108,176,0.22);
  border-color: rgba(242,169,30,0.4);
  transform: translateY(-3px);
}
.dramatic-card__title{ color: #fff; font-weight: 700; font-size: 0.95rem; margin-bottom: 0.2rem; }
.dramatic-card__tag{ color: var(--gold); font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; }
.dramatic-card i{ color: var(--gold); font-size: 1.1rem; transition: transform 0.25s var(--ease); flex-shrink: 0; }
.dramatic-card:hover i{ transform: translate(3px,-3px); }

@media (max-width: 767.98px){
  .hero-dramatic__photo{ height: 400px; width: 100%; margin-left: 0; }
  .hero-dramatic__heading-wrap{ margin-top: -90px; padding: 0 1.25rem; }
  .hero-dramatic__cards{ padding: 1.75rem 1.25rem 2.5rem; }
  .dramatic-card{ min-width: 100%; max-width: 100%; }
  .topics{ padding: 3rem 0; }
  .pathway{ padding: 3rem 0; }
}

.hero__heading{
  font-family: var(--font-display);
  font-size: 2.1rem;
  line-height: 1.08;
  color: #fff;
  text-transform: uppercase;
  margin-bottom: 1.1rem;
}
.hero__heading--accent{ color: var(--gold); }
.hero__tagline{
  display: inline-block;
  margin-bottom: 1.1rem;
}
.hero__tagline span{
  background: var(--red);
  color: #fff;
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: 0.95rem;
  padding: 0.35rem 0.9rem;
  display: inline-block;
  transform: rotate(-1deg);
  border-radius: 3px;
}
.hero__body{
  color: rgba(255,255,255,0.8);
  font-size: 1rem;
  max-width: 480px;
  margin-bottom: 1.5rem;
}

.btn-cta, .btn-outline-cta{
  transition: background 0.25s var(--ease), color 0.25s var(--ease),
              transform 0.25s var(--ease), box-shadow 0.25s var(--ease), border-color 0.25s var(--ease);
}
.btn-cta{
  background: var(--blue);
  color: #fff;
  font-weight: 700;
  border-radius: 8px;
  border: none;
  padding: 0.8rem 1.6rem;
}
.btn-cta:hover{
  background: #2f7bc4;
  color: #fff;
  transform: translateY(-3px);
  box-shadow: 0 10px 20px rgba(43,108,176,0.4);
}
.btn-cta i{ transition: transform 0.25s var(--ease); display: inline-block; }
.btn-cta:hover i{ transform: translateX(4px); }

.btn-outline-cta{
  background: transparent;
  color: #fff;
  font-weight: 600;
  border: 2px solid rgba(255,255,255,0.5);
  border-radius: 8px;
  padding: 0.8rem 1.6rem;
}
.btn-outline-cta:hover{
  background: #fff;
  color: var(--navy);
  border-color:#fff;
  transform: translateY(-3px);
}

.hero__badges{
  color: rgba(255,255,255,0.85);
  font-size: 0.9rem;
  font-weight: 500;
}
.hero__badges i{ color: var(--gold); margin-right: 0.4rem; }

.hero__image-wrap{
  position: relative;
}
.hero__image{
  border-radius: var(--radius-lg);
  width: 100%;
  object-fit: cover;
  aspect-ratio: 4/3;
  transition: transform 0.6s var(--ease);
}
.hero__image-wrap:hover .hero__image{ transform: scale(1.02); }

.hero__video-wrap{
  position: relative;
}
.hero__video{
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 4/3;
  cursor: pointer;
  background: var(--navy);
}
.hero__video-thumb{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--ease);
}
.hero__video-wrap:hover .hero__video-thumb{ transform: scale(1.04); }
.hero__video-overlay{
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(14,27,61,0.15), rgba(14,27,61,0.45));
  transition: background 0.3s var(--ease);
}
.hero__video:hover .hero__video-overlay{ background: linear-gradient(180deg, rgba(14,27,61,0.1), rgba(14,27,61,0.3)); }
.hero__video-play{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background: rgba(255,255,255,0.95);
  color: var(--navy);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.7rem;
  padding-left: 4px;
  box-shadow: 0 12px 30px rgba(0,0,0,0.3);
  transition: transform 0.3s var(--ease), background 0.3s var(--ease);
}
.hero__video-play::before{
  content: "";
  position: absolute;
  inset: -14px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.5);
  animation: heroPlayPulse 2.4s ease-out infinite;
}
@keyframes heroPlayPulse{
  0%{ transform: scale(0.85); opacity: 0.8; }
  100%{ transform: scale(1.25); opacity: 0; }
}
.hero__video:hover .hero__video-play{
  transform: translate(-50%, -50%) scale(1.08);
  background: var(--gold);
  color: var(--navy);
}
.hero__video iframe{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.hero__icon{
  position: absolute;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  box-shadow: 0 8px 20px rgba(0,0,0,0.25);
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
  animation: float 4s ease-in-out infinite;
  z-index: 2;
}
.hero__icon:hover{
  transform: scale(1.15) rotate(-6deg);
  box-shadow: 0 12px 24px rgba(0,0,0,0.35);
}
.hero__icon--idea{ top: -6%; left: 8%; color: var(--gold); animation-delay: 0s; }
.hero__icon--growth{ top: -8%; right: 30%; color: var(--red); animation-delay: 0.6s; }
.hero__icon--money{ top: 6%; right: -4%; color: var(--green); animation-delay: 1.2s; }
.hero__icon--target{ bottom: 12%; right: -5%; color: var(--blue); animation-delay: 1.8s; }

@keyframes float{
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}
@media (prefers-reduced-motion: reduce){
  .hero__icon{ animation: none; }
}

/* =========================================================
   TOPICS / FEATURE ICONS ("What We Help You Build")
========================================================= */
.topics{ padding: 4.5rem 0; }

/* Generic background modifiers — reusable on any section, not just .topics. */
.bg--white{ background: var(--cream); }
.bg--offwhite{ background: var(--off-white); }
.bg--navy{ background: var(--navy); }
.bg--navy .build-eyebrow{ color: var(--gold); }
.bg--navy .build-heading{ color: #fff; }
.bg--navy .build-heading .muted{ color: rgba(255,255,255,0.55); }
.bg--navy .build-icons-row::before{ border-top-color: rgba(255,255,255,0.2); }
.bg--navy .build-item__stem{ border-left-color: rgba(255,255,255,0.25); }
.bg--navy .build-item__node{ box-shadow: 0 0 0 8px rgba(14,27,61,0.75), 0 14px 28px -8px var(--node-glow, rgba(0,0,0,0.35)); }

.build-eyebrow{
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.8rem;
  color: var(--blue);
  margin-bottom: 1rem;
}
.build-eyebrow .dot{
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--blue);
  display: inline-block;
}
.build-heading{
  font-family: var(--font-body);
  font-weight: 800;
  font-size: clamp(1.7rem, 4vw, 2.4rem);
  color: var(--navy);
  line-height: 1.3;
  max-width: 42rem;
  margin: 0 auto 3.5rem;
}
.build-heading .accent{ color: var(--blue); }
.build-heading .muted{ color: #9aa1b1; display: block; }

/* Contextual spacing overrides — build-heading's default 3.5rem
   bottom margin is sized for the icons section; these two reuse
   the same eyebrow/heading styling but need tighter spacing since
   their layout already provides its own gap. */
.pathway .build-heading{ margin-bottom: 2.5rem; }
.mosaic-content .build-heading{ margin-bottom: 0.2rem; }
.mosaic-content .build-eyebrow,
.pathway .build-eyebrow{ justify-content: center; }

.build-icons-row{
  position: relative;
  margin-bottom: 1.75rem;
}
@media (max-width: 991.98px){
  /* Below 992px, JS moves each .build-item card into its matching
     icon column (see script.js), so the original cards grid is
     left empty and hidden here. */
  .build-row{ display: none; }
  .build-icons-row [class*="col-"]{ margin-bottom: 1.1rem; }
  .build-icons-row [class*="col-"] .build-item{ margin-top: 1.1rem; height: auto; }
  .build-icons-row [class*="col-"] .build-item__card{ height: auto; min-height: 150px; }
}
@media (min-width: 992px){
  .build-icons-row::before{
    content: "";
    position: absolute;
    top: 50%;
    left: 12%;
    right: 12%;
    transform: translateY(-50%);
    border-top: 2px dashed #d7deea;
    z-index: 0;
  }
}
.build-icons-row [class*="col-"]{ position: relative; }

.build-item__node{
  position: relative;
  z-index: 1;
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  box-shadow: 0 0 0 8px rgba(255,255,255,0.75), 0 14px 28px -8px var(--node-glow, rgba(14,27,61,0.18));
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
.build-item__node--green{ --node-glow: rgba(47,133,90,0.35); }
.build-item__node--red{ --node-glow: rgba(226,65,58,0.35); }
.build-item__node--blue{ --node-glow: rgba(43,108,176,0.35); }
.build-item__node--gold{ --node-glow: rgba(217,144,0,0.35); }
.build-item__node--teal{ --node-glow: rgba(31,122,108,0.35); }
.build-item__node--purple{ --node-glow: rgba(107,63,160,0.35); }

.build-item__icon{
  width: 54px;
  height: 54px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  color: #fff;
  transition: transform 0.35s var(--ease);
}
.build-item__icon--green{ background: var(--green); }
.build-item__icon--red{ background: var(--red); }
.build-item__icon--blue{ background: var(--blue); }
.build-item__icon--gold{ background: var(--gold-dark); }
.build-item__icon--teal{ background: var(--teal); }
.build-item__icon--purple{ background: var(--purple); }

.build-item__stem{
  display: block;
  width: 0;
  height: 20px;
  margin: 0 auto;
  border-left: 2px dotted #cfd6e4;
  position: relative;
  z-index: 1;
}
.build-item__dot{
  display: block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin: 0 auto;
  position: relative;
  z-index: 1;
  transition: transform 0.25s ease;
}
.build-item__dot--green{ background: var(--green); }
.build-item__dot--red{ background: var(--red); }
.build-item__dot--blue{ background: var(--blue); }
.build-item__dot--gold{ background: var(--gold-dark); }
.build-item__dot--teal{ background: var(--teal); }
.build-item__dot--purple{ background: var(--purple); }

/* Hover effect 1: the small dot blinks when the box OR the icon is
   hovered. Native :hover covers hovering the icon directly; the
   .is-hovered class is toggled by JS when the paired card (in the
   separate row below) is hovered instead, so either side works. */
.build-icons-row [class*="col-"]:hover .build-item__node,
.build-icons-row [class*="col-"].is-hovered .build-item__node{
  transform: scale(1.07);
}
.build-icons-row [class*="col-"]:hover .build-item__icon,
.build-icons-row [class*="col-"].is-hovered .build-item__icon{
  transform: scale(1.06);
}
.build-icons-row [class*="col-"]:hover .build-item__dot,
.build-icons-row [class*="col-"].is-hovered .build-item__dot{
  animation: buildDotBlink 0.9s ease-in-out infinite;
}
@keyframes buildDotBlink{
  0%, 100%{ opacity: 1; transform: scale(1); }
  50%{ opacity: 0.25; transform: scale(1.5); }
}

.build-row{ position: relative; }
.build-item{ position: relative; height: 100%; }
.build-item__card{
  background: #fff;
  border-radius: var(--radius-md);
  padding: 1.75rem 1.25rem 1.6rem;
  height: 100%;
  box-shadow: 0 10px 26px rgba(14,27,61,0.06);
  position: relative;
  overflow: hidden;
  text-align: center;
  transition: box-shadow 0.35s var(--ease), transform 0.35s var(--ease);
}
.build-item__card h3{
  font-family: var(--font-display);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--navy);
  margin-bottom: 0.6rem;
}
.build-item__card p{
  font-size: 0.82rem;
  color: var(--text-muted);
  margin-bottom: 0;
}

/* Hover effect 2: the coloured underline appears at the bottom of the
   box. Native :hover covers hovering the card directly; .is-hovered
   is toggled by JS when the paired icon (in the row above) is
   hovered instead. */
.build-item:hover .build-item__card,
.build-item.is-hovered .build-item__card{
  box-shadow: 0 20px 38px rgba(14,27,61,0.12);
  transform: translateY(-4px);
}
.build-item__line{
  position: absolute;
  left: 1.25rem;
  right: 1.25rem;
  bottom: 0;
  height: 3px;
  border-radius: 3px 3px 0 0;
  transform: scaleX(0);
  opacity: 0;
  transition: transform 0.35s var(--ease), opacity 0.35s var(--ease);
}
.build-item:hover .build-item__line,
.build-item.is-hovered .build-item__line{
  transform: scaleX(1);
  opacity: 1;
}
.build-item__line--green{ background: var(--green); }
.build-item__line--red{ background: var(--red); }
.build-item__line--blue{ background: var(--blue); }
.build-item__line--gold{ background: var(--gold-dark); }
.build-item__line--teal{ background: var(--teal); }
.build-item__line--purple{ background: var(--purple); }

@media (max-width: 767.98px){
  .build-item__node{ width: 64px; height: 64px; }
  .build-item__icon{ width: 46px; height: 46px; font-size: 1.15rem; }
}



/* =========================================================
   SUCCESS STORIES / PATHWAY
   Modeled on zoom.com's "Customer Stories" homepage section:
   one large featured panel + a row of thumbnails that switch it.
========================================================= */
.pathway{ padding: 4.5rem 0; }

.section-eyebrow{
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.8rem;
  color: var(--blue);
  margin-bottom: 0.75rem;
}

.pathway-filmstrip{
  display: flex;
  gap: 14px;
  min-height: 480px;
}
.filmstrip-panel{
  position: relative;
  flex: 0 0 auto;
  width: 11%;
  min-height: 480px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  cursor: pointer;
  transition: width 0.65s var(--ease);
}
.filmstrip-panel.expanded{
  width: 67%;
  cursor: default;
}
.filmstrip-panel__bg{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}
.filmstrip-panel:hover .filmstrip-panel__bg{ transform: scale(1.06); }
.filmstrip-panel__overlay{
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, rgba(14,27,61,0.35) 0%, rgba(14,27,61,0.35) 100%);
  transition: background 0.5s ease;
}
.filmstrip-panel.expanded .filmstrip-panel__overlay{
  background: linear-gradient(100deg, rgba(14,27,61,0.93) 32%, rgba(14,27,61,0.6) 65%, rgba(14,27,61,0.2) 100%);
}

/* Peek label — visible only on the narrow, unexpanded strips */
.filmstrip-panel__peek-label{
  position: absolute;
  left: 1rem;
  bottom: 1.1rem;
  right: 1rem;
  display: flex;
  align-items: center;
  gap: 0.55rem;
  color: #fff;
  font-weight: 700;
  font-size: 0.85rem;
  opacity: 1;
  visibility: visible;
  transition: opacity 0.3s ease 0.15s, visibility 0.3s ease 0.15s;
  z-index: 1;
}
.filmstrip-panel.expanded .filmstrip-panel__peek-label{
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0.2s ease;
}
.filmstrip-panel__peek-icon{
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255,255,255,0.2);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  flex-shrink: 0;
}

/* Full content — visible only on the expanded panel */
.filmstrip-panel__content{
  position: absolute;
  inset: 0;
  padding: 2.75rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  color: #fff;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s ease, visibility 0.35s ease;
  z-index: 1;
}
.filmstrip-panel.expanded .filmstrip-panel__content{
  opacity: 1;
  visibility: visible;
  transition: opacity 0.4s ease 0.2s, visibility 0.4s ease 0.2s;
}
.filmstrip-panel__icon{
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: rgba(255,255,255,0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 1.25rem;
  flex-shrink: 0;
}
.filmstrip-panel__bottom{ max-width: 30rem; padding-right: 5rem; }
.filmstrip-panel__bottom h3{
  font-family: var(--font-body);
  font-weight: 800;
  font-size: clamp(1.4rem, 2.4vw, 1.8rem);
  line-height: 1.28;
  margin-bottom: 1rem;
}
.filmstrip-panel__quote{
  font-size: 0.98rem;
  color: rgba(255,255,255,0.85);
  line-height: 1.6;
  margin-bottom: 0.9rem;
}
.filmstrip-panel__link{
  color: #fff;
  font-weight: 600;
  font-size: 0.9rem;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  border-bottom: 2px solid var(--gold);
  padding-bottom: 0.2rem;
  transition: gap 0.25s var(--ease);
}
.filmstrip-panel__link:hover{ gap: 0.65rem; color: #fff; }

/* Decorative circular "read more" echo, bottom-right of the expanded panel */
.filmstrip-panel__arrow{
  position: absolute;
  bottom: 2rem;
  right: 2rem;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #fff;
  color: var(--navy);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
  opacity: 0;
  visibility: hidden;
  transform: scale(0.85);
  transition: opacity 0.3s ease 0.2s, visibility 0.3s ease 0.2s, transform 0.3s ease 0.2s, background 0.2s ease;
  z-index: 1;
}
.filmstrip-panel.expanded .filmstrip-panel__arrow{
  opacity: 1;
  visibility: visible;
  transform: scale(1);
}
.filmstrip-panel__arrow:hover{ background: var(--off-white); }

@media (max-width: 767.98px){
  .pathway-filmstrip{ flex-direction: column; gap: 10px; min-height: 0; }
  .filmstrip-panel{ width: 100%; min-height: 76px; }
  .filmstrip-panel.expanded{ width: 100%; min-height: 460px; }
  .filmstrip-panel__bottom{ padding-right: 0; max-width: 100%; }
  .filmstrip-panel__peek-label{ bottom: 50%; transform: translateY(50%); left: 1.25rem; }
  .filmstrip-panel__content{ padding: 2rem 1.5rem; }
  .filmstrip-panel__arrow{ bottom: 1.5rem; right: 1.5rem; width: 46px; height: 46px; }
}

/* =========================================================
   READINESS CHECK
========================================================= */
.readiness__panel{
  padding: 2rem 1.25rem;
}
.phone-parallax{
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 1.5rem 0 2.5rem;
}
.phone-mockup{
  position: relative;
  background: linear-gradient(160deg, #1e2f52, var(--navy) 45%, #0a1530);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 34px;
  padding: 26px 12px 20px;
  box-shadow: 0 20px 40px rgba(0,0,0,0.18), inset 0 0 0 1px rgba(255,255,255,0.05), inset 0 1px 2px rgba(255,255,255,0.12);
  transition: box-shadow 0.4s var(--ease);
  will-change: transform;
  flex-shrink: 0;
}
.phone-mockup:hover{ box-shadow: 0 26px 50px rgba(0,0,0,0.24), inset 0 0 0 1px rgba(255,255,255,0.06); }

/* Speaker/camera notch */
.phone-mockup__notch{
  position: absolute;
  top: 11px;
  left: 50%;
  transform: translateX(-50%);
  width: 44px;
  height: 5px;
  border-radius: 4px;
  background: rgba(255,255,255,0.14);
  z-index: 2;
}
/* Home indicator bar */
.phone-mockup__home{
  position: absolute;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
  width: 54px;
  height: 4px;
  border-radius: 4px;
  background: rgba(255,255,255,0.2);
  z-index: 2;
}
/* Side buttons (power / volume) */
.phone-mockup__btn{
  position: absolute;
  background: linear-gradient(180deg, #2c3d63, #101a30);
  border-radius: 2px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.3);
}
.phone-mockup__btn--power{ right: -2px; top: 92px; width: 3px; height: 46px; }
.phone-mockup__btn--vol-up{ left: -2px; top: 72px; width: 3px; height: 26px; }
.phone-mockup__btn--vol-down{ left: -2px; top: 104px; width: 3px; height: 26px; }

.phone-mockup--left{
  position: relative;
  z-index: 1;
  margin-top: 4.5rem;
  transform: translateY(var(--parallax-y-left, 0px));
}
.phone-mockup--right{
  position: relative;
  z-index: 2;
  margin-left: -1.75rem;
  transform: translateY(var(--parallax-y-right, 0px));
}

.phone-mockup__screen{
  background: #fff;
  border-radius: 20px;
  padding: 1.6rem 1.35rem;
  width: 200px;
  min-height: 300px;
  text-align: left;
}
.phone-mockup__label{
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-bottom: 0.25rem;
  text-align: center;
}
.phone-mockup__score{
  font-family: var(--font-display);
  font-size: 2.2rem;
  color: var(--green);
  text-align: center;
}
.phone-mockup__hint{
  font-size: 0.75rem;
  color: var(--green);
  text-align: center;
  margin-bottom: 1.25rem;
}
.phone-mockup__bars .bar{ margin-bottom: 0.7rem; }
.phone-mockup__bars span{ font-size: 0.7rem; color: var(--text-muted); }
.bar-track{
  background: #e9ecf2;
  border-radius: 6px;
  height: 6px;
  overflow: hidden;
  margin-top: 3px;
}
.bar-fill{
  height: 100%;
  border-radius: 6px;
  width: 0;
  transition: width 1.1s var(--ease);
}
.phone-mockup__bars.is-visible .bar-fill{ width: var(--target-width, 100%); }

/* --- "How ready are you?" companion screen --- */
.phone-mockup__screen--check{
  display: flex;
  flex-direction: column;
  height: 300px;
  min-height: 0;
  overflow: hidden;
}
.check__heading{
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 0.82rem;
  line-height: 1.22;
  color: var(--navy);
  margin-bottom: 0.35rem;
}
.check__heading .accent{ color: var(--gold-dark); }
.check__body{
  font-size: 0.56rem;
  line-height: 1.4;
  color: var(--text-muted);
  margin-bottom: 0.55rem;
}
.check__btn{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  background: var(--gold);
  color: var(--navy);
  font-weight: 700;
  font-size: 0.62rem;
  border-radius: 50px;
  padding: 0.46rem 0.5rem;
  margin-bottom: 0.6rem;
  flex-shrink: 0;
}
.check__grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.4rem;
}
.check__card{
  background: #fff;
  border: 1px solid #eef0f5;
  border-radius: 12px;
  padding: 0.5rem 0.3rem;
  text-align: center;
  box-shadow: 0 4px 10px rgba(14,27,61,0.04);
}
.check__card-icon{
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 0.72rem;
  margin: 0 auto 0.3rem;
}
.check__card span:last-child{
  font-size: 0.54rem;
  font-weight: 700;
  color: var(--navy);
  line-height: 1.05;
}

@media (max-width: 575.98px){
  .phone-parallax{ padding-bottom: 1.5rem; }
  .phone-mockup__screen{ width: 168px; min-height: 260px; padding: 1.3rem 1.1rem; }
  .phone-mockup__screen--check{ height: 260px; padding: 1.1rem 0.9rem; }
  .phone-mockup--left{ margin-top: 3rem; }
  .phone-mockup--right{ margin-left: -1.25rem; }
  .bar--independent{ display: none; }
  .bar--wellbeing{ display: none; }
}
@media (min-width: 576px){
  .bar--wellbeing{ display: none; }
}

.readiness__title{
  font-family: var(--font-display);
  font-size: 1.5rem;
  text-transform: uppercase;
  margin-bottom: 0.75rem;
}
.readiness__body{ color: var(--text-muted); margin-bottom: 1rem; }
.readiness__list li{
  font-size: 0.95rem;
  margin-bottom: 0.5rem;
  transition: transform 0.25s var(--ease);
}
.readiness__list li:hover{ transform: translateX(4px); }
.readiness__list i{ color: var(--blue); margin-right: 0.5rem; }
.btn-readiness{
  background: var(--navy);
  color: #fff;
  font-weight: 600;
  border-radius: 8px;
  padding: 0.8rem 1.5rem;
  display: inline-block;
  transition: background 0.25s var(--ease), transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.btn-readiness i{ transition: transform 0.25s var(--ease); display: inline-block; }
.btn-readiness:hover i{ transform: translateX(4px); }
.btn-readiness:hover{
  background: var(--navy-light);
  color:#fff;
  transform: translateY(-3px);
  box-shadow: 0 10px 20px rgba(14,27,61,0.3);
}
.readiness__note{
  color: var(--navy);
  font-style: italic;
  font-size: 0.9rem;
  font-weight: 600;
}

.bg--navy .readiness__title{ color: #fff; }
.bg--navy .readiness__body{ color: rgba(255,255,255,0.72); }
.bg--navy .readiness__list li{ color: rgba(255,255,255,0.85); }
.bg--navy .readiness__note{ color: #fff; }
.bg--navy .btn-readiness{ background: var(--gold); color: var(--navy); }
.bg--navy .btn-readiness:hover{ background: #ffbb33; color: var(--navy); box-shadow: 0 10px 20px rgba(0,0,0,0.3); }

/* =========================================================
   TESTIMONIALS PHOTO MOSAIC
   Staggered photo columns behind a centered text panel, with a
   compact single-row version on mobile. Photos are dimmed
   slightly by default and reveal to full colour/clarity on
   hover — the hovered card rises above the white overlay wash
   (and above the mobile top-fade) via z-index so it never looks
   grayed out.
========================================================= */
.testimonial-mosaic{ overflow: hidden; }
.mosaic-panel{
  padding: 3.5rem 2rem 3rem;
  position: relative;
  overflow: hidden;
}

/* Desktop photo mosaic */
.mosaic{
  display: flex;
  justify-content: center;
  gap: 14px;
  padding: 0 1rem;
  position: relative;
}
.mosaic-col{
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 100px;
}
.mosaic-col.offset{ margin-top: 90px; }
.mosaic-col.offset-lg{ margin-top: 0; }
.mosaic-card{
  border-radius: 16px;
  overflow: hidden;
  aspect-ratio: 3/3.7;
  box-shadow: 0 14px 26px rgba(14,27,61,0.12);
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
  position: relative;
  z-index: 1;
}
.mosaic-card:hover{
  transform: translateY(-6px) scale(1.03);
  box-shadow: 0 20px 34px rgba(14,27,61,0.24);
  z-index: 5; /* rise above the white overlay wash so it reads fully clear */
}
.mosaic-card img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: grayscale(18%) brightness(0.96);
  transition: filter 0.35s var(--ease);
}
.mosaic-card:hover img{ filter: grayscale(0%) brightness(1); }
.mosaic-card.ghost{ visibility: hidden; }

.mosaic-fade{
  position: absolute;
  top: 0;
  bottom: 0;
  width: 120px;
  z-index: 3;
  pointer-events: none;
}
.mosaic-fade--l{ left: 0; background: linear-gradient(90deg, #fff, rgba(255,255,255,0)); }
.mosaic-fade--r{ right: 0; background: linear-gradient(270deg, #fff, rgba(255,255,255,0)); }

/* Centered text overlay */
.mosaic-overlay{
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 4;
  pointer-events: none;
}
.mosaic-overlay::before{
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 75% at 50% 55%, rgba(255,255,255,0.97) 45%, rgba(255,255,255,0) 100%);
}
.mosaic-content{
  position: relative;
  text-align: center;
  max-width: 32rem;
  pointer-events: auto;
}
.mosaic-body{
  color: var(--text-muted);
  font-size: 0.95rem;
  margin: 1rem 0 1.5rem;
}

/* Mobile: single staggered row of photos above the text */
.mosaic-mobile-row{ display: none; }

@media (max-width: 767.98px){
  .mosaic{ display: none; }
  .mosaic-overlay{
    position: relative;
    flex-direction: column;
  }
  .mosaic-overlay::before{ display: none; }
  .mosaic-panel{ padding: 2rem 1.25rem 2.5rem; }

  .mosaic-mobile-row{
    display: flex;
    justify-content: center;
    gap: 8px;
    position: relative;
    padding-top: 0.5rem;
    margin-bottom: 1.5rem;
  }
  .mosaic-mobile-row .mosaic-col{ width: 15%; gap: 0; }
  .mosaic-mobile-row .mosaic-col.offset{ margin-top: 46px; }
  .mosaic-mobile-row .mosaic-col.offset-lg{ margin-top: 0; }
  .mosaic-mobile-row .mosaic-card{
    aspect-ratio: 3/3.6;
    border-radius: 10px;
  }
  .mosaic-mobile-row .mosaic-card:hover{
    z-index: 3; /* rise above the top fade (z-index:2) so it reveals fully clear */
    transform: translateY(-3px) scale(1.04);
  }

  /* Fade the tops of the taller columns into the white background,
     like the photos are emerging from behind the top edge */
  .mosaic-mobile-fade{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 34px;
    background: linear-gradient(#fff, rgba(255,255,255,0));
    z-index: 2;
    pointer-events: none;
  }
}

/* =========================================================
   GET INVOLVED CTA
   Light background (rather than navy) so it stays visually
   distinct from the navy footer directly beneath it. Reuses the
   same .build-eyebrow / .build-heading / .btn-readiness
   components used elsewhere on the homepage for consistency.
========================================================= */
.bottom-cta.bg--offwhite{ background: linear-gradient(155deg, var(--off-white), #fdf8ef 65%); }
.bottom-cta-panel{
  padding: 4rem 3rem;
  position: relative;
  overflow: hidden;
}

.involved-row{
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 2.5rem;
  position: relative;
}

/* Photo cluster: one main photo + a smaller overlapping accent
   photo, with a floating icon badge — echoes the hero image's
   floating-icon treatment elsewhere on the homepage. */
.photo-cluster{
  position: relative;
  flex-shrink: 0;
  width: 340px;
  margin: 0 auto;
}
.photo-cluster__main{
  border-radius: var(--radius-md);
  overflow: hidden;
  aspect-ratio: 4/3.2;
  box-shadow: 0 20px 45px rgba(14,27,61,0.18);
}
.photo-cluster__main img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s var(--ease);
}
.photo-cluster:hover .photo-cluster__main img{ transform: scale(1.05); }

.photo-cluster__accent{
  position: absolute;
  width: 140px;
  aspect-ratio: 4/3.4;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 4px solid #fff;
  box-shadow: 0 14px 30px rgba(14,27,61,0.2);
  right: -30px;
  bottom: -30px;
  z-index: 2;
}
.photo-cluster__accent img{ width: 100%; height: 100%; object-fit: cover; display: block; }

.photo-cluster__badge{
  position: absolute;
  top: -18px;
  left: -18px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  color: var(--red);
  box-shadow: 0 10px 22px rgba(14,27,61,0.15);
  z-index: 3;
  animation: float 4s ease-in-out infinite;
}

.bottom-cta-content{ flex: 1; position: relative; }
.involved-heading{ margin-bottom: 1rem; max-width: none; }
.involved-heading .accent{ color: var(--blue); }
.involved-body{
  color: var(--text-muted);
  font-size: 1.02rem;
  line-height: 1.6;
  max-width: 51rem;
  margin: 0 auto 2rem;
}
.involved-btn-row{ display: flex; justify-content: center; gap: 1rem; flex-wrap: wrap; }
.btn-involved-outline{
  background: transparent;
  color: var(--navy);
  font-weight: 600;
  border-radius: 8px;
  padding: 0.78rem 1.5rem;
  border: 1.5px solid #d7ddea;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  transition: background 0.25s var(--ease), border-color 0.25s var(--ease), transform 0.25s var(--ease);
}
.btn-involved-outline:hover{
  background: #fff;
  border-color: var(--navy);
  color: var(--navy);
  transform: translateY(-3px);
}

.bg--navy .involved-body{ color: rgba(255,255,255,0.72); }
.bg--navy .btn-involved-outline{ color: #fff; border-color: rgba(255,255,255,0.35); }
.bg--navy .btn-involved-outline:hover{ background: rgba(255,255,255,0.1); border-color: #fff; color: #fff; }

@media (max-width: 991.98px){
  .bottom-cta-panel{ padding: 3rem 1.5rem; }
  .photo-cluster{ width: 260px; }
  .photo-cluster__accent{ width: 110px; right: -16px; bottom: -16px; }
}

/* =========================================================
   FLOATING CTA BANNER
   A gold gradient card with a diamond pattern texture that
   floats over the boundary between the previous section and the
   footer, using negative margins + z-index to overlap both.
========================================================= */
.floating-cta-wrap{
  position: relative;
  z-index: 10;
  margin-top: -2rem;
  margin-bottom: -2rem;
}
.floating-cta{
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, var(--blue), #163f6e);
  border-radius: var(--radius-lg);
  padding: 1.75rem 2rem;
  text-align: center;
  box-shadow: 0 30px 60px rgba(14,27,61,0.35);
}
.floating-cta h2{
  position: relative;
  font-family: var(--font-body);
  font-weight: 800;
  font-size: clamp(1.6rem, 3.2vw, 2.1rem);
  color: #fff;
  margin-bottom: 0.85rem;
}
.floating-cta p{
  position: relative;
  color: rgba(255,255,255,0.72);
  font-size: 0.98rem;
  max-width: 32rem;
  margin: 0 auto 1.75rem;
}
.floating-cta__btns{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.85rem;
  flex-wrap: wrap;
}
.btn-floating-dark{
  background: var(--gold);
  color: var(--navy);
  font-weight: 700;
  border-radius: 50px;
  padding: 0.7rem 1.75rem;
  font-size: 0.9rem;
  transition: background 0.25s var(--ease), transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.btn-floating-dark:hover{
  background: #ffb733;
  color: var(--navy);
  transform: translateY(-3px);
  box-shadow: 0 10px 20px rgba(242,169,30,0.35);
}
.btn-floating-light{
  background: transparent;
  color: #fff;
  font-weight: 700;
  border: 1.5px solid rgba(255,255,255,0.4);
  border-radius: 50px;
  padding: 0.7rem 1.75rem;
  font-size: 0.9rem;
  transition: background 0.25s var(--ease), transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.btn-floating-light:hover{
  background: #fff;
  color: var(--navy);
  transform: translateY(-3px);
  box-shadow: 0 10px 20px rgba(14,27,61,0.15);
}

.floating-cta__icon{
  position: absolute;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 1.3rem;
  box-shadow: 0 10px 22px rgba(14,27,61,0.25);
  z-index: 1;
  animation: float 4s ease-in-out infinite;
}
.floating-cta__icon--top{
  top: 1.75rem;
  right: 2.25rem;
  background: var(--teal);
}
.floating-cta__icon--bottom{
  bottom: 1.75rem;
  left: 2.25rem;
  background: var(--purple);
  animation-delay: 1s;
}

@media (max-width: 767.98px){
  .floating-cta-wrap{ margin-top: -1.5rem; margin-bottom: -1.5rem; }
  .floating-cta{ padding: 1.5rem 1.5rem; }
  .footer-main{ padding-top: 4.5rem; }
  .floating-cta__icon{ width: 42px; height: 42px; font-size: 1.1rem; }
  .floating-cta__icon--top{ top: 1.25rem; right: 1.25rem; }
  .floating-cta__icon--bottom{ bottom: 1.25rem; left: 1.25rem; }
}

/* =========================================================
   FOOTER
========================================================= */
.site-footer{ background: var(--navy); color: rgba(255,255,255,0.8); }
.footer-main{ padding-top: 6rem; }
.newsletter{ border-bottom: 1px solid rgba(255,255,255,0.1); }
.newsletter__icon{
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--blue);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  flex-shrink: 0;
}
.newsletter__title{ color: #fff; font-size: 1.1rem; font-weight: 700; }
.newsletter__text{ font-size: 0.85rem; }
.newsletter__form .form-control{
  border-radius: 8px 0 0 8px;
  border: none;
  padding: 0.65rem 1rem;
  transition: box-shadow 0.25s var(--ease);
}
.newsletter__form .form-control:focus{
  box-shadow: 0 0 0 3px rgba(242,169,30,0.4);
}
.btn-subscribe{
  background: var(--red);
  color: #fff;
  border-radius: 0 8px 8px 0;
  font-weight: 600;
  padding: 0.65rem 1.3rem;
  transition: background 0.25s var(--ease), transform 0.25s var(--ease);
}
.btn-subscribe:hover{ background: #c93129; color:#fff; }
.follow-us__label{ font-size: 0.85rem; color: rgba(255,255,255,0.7); }
.social-icon{
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--red);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
  transition: background 0.25s var(--ease), color 0.25s var(--ease), transform 0.25s var(--ease);
}
.social-icon:hover{
  background: var(--gold);
  color: var(--navy);
  transform: translateY(-3px);
}
.social-icon--sm{
  width: 30px;
  height: 30px;
  font-size: 0.85rem;
}

.footer-about{ font-size: 0.85rem; color: rgba(255,255,255,0.65); max-width: 320px; }
@media (max-width: 991.98px){
  .footer-about{ max-width: 460px; }
}
.footer-nav-col{ flex: 0 0 auto; min-width: 110px; }
@media (max-width: 575.98px){
  .footer-nav-cols{ justify-content: flex-start !important; gap: 2rem 3rem !important; }
}
.footer-col-title{
  color: #fff;
  font-size: 0.95rem;
  font-weight: 700;
  margin-bottom: 1rem;
}
.footer-links li{ margin-bottom: 0.5rem; }
.footer-links a{
  color: rgba(255,255,255,0.65);
  font-size: 0.85rem;
  position: relative;
  transition: color 0.25s var(--ease), padding-left 0.25s var(--ease);
}
.footer-links a:hover{ color: var(--gold); padding-left: 4px; }
.footer-bottom{
  background: #0a1530;
  font-size: 0.8rem;
  color: rgba(255,255,255,0.5);
}
.footer-bottom__row{
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
}
.footer-bottom__social{
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.footer-bottom__social-label{
  font-size: 0.8rem;
  color: rgba(255,255,255,0.5);
  margin-right: 0.3rem;
}
@media (max-width: 575.98px){
  .footer-bottom__row{ flex-direction: column; text-align: center; }
}

/* =========================================================
   START HERE — PAGE HERO
   Variant of .hero with an underline accent under the heading;
   badges re-use the homepage's .hero__badges component.
========================================================= */
.page-hero{
  background: var(--navy);
  padding: 1.75rem 0 2.5rem;
  position: relative;
  overflow: hidden;
}

.page-hero__heading{
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 2.1rem;
  line-height: 1.15;
  color: #fff;
  margin-bottom: 0.9rem;
}
.page-hero__underline{
  display: block;
  width: 64px;
  height: 4px;
  background: var(--gold);
  border-radius: 3px;
  margin-bottom: 1.25rem;
}
.page-hero__body{
  color: rgba(255,255,255,0.8);
  font-size: 1rem;
  margin-bottom: 1.75rem;
}

/* =========================================================
   SECTION EYEBROW
   Small centered heading + short underline, reused above
   the steps, starting points, and other section intros.
========================================================= */
.section-eyebrow{ margin-bottom: 2rem; }
.section-eyebrow h2{
  font-family: var(--font-display);
  color: var(--navy);
  text-transform: uppercase;
  font-size: 1.15rem;
  letter-spacing: 0.5px;
  margin-bottom: 0.6rem;
}
.section-eyebrow__underline{
  display: inline-block;
  width: 48px;
  height: 3px;
  background: var(--blue);
  border-radius: 3px;
}

/* =========================================================
   STEPS — "Your Journey in 4 Simple Steps"
========================================================= */
.steps__row{
  display: flex;
  flex-direction: column;
  gap: 2rem;
}
.steps__item{
  text-align: center;
  max-width: 260px;
  margin: 0 auto;
  transition: transform 0.3s var(--ease);
}
.steps__item:hover{ transform: translateY(-4px); }
.steps__icon{
  width: 64px;
  height: 64px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 1.5rem;
  margin-bottom: 0.9rem;
  box-shadow: 0 8px 18px rgba(0,0,0,0.15);
  transition: transform 0.3s var(--ease);
}
.steps__item:hover .steps__icon{ transform: scale(1.08); }
.steps__icon--blue{ background: var(--blue); }
.steps__icon--red{ background: var(--red); }
.steps__icon--gold{ background: var(--gold); }
.steps__icon--green{ background: var(--green); }
.steps__item h3{
  font-size: 1rem;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 0.4rem;
}
.steps__item p{
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-bottom: 0;
}
.steps__connector{
  display: none;
}

/* =========================================================
   POPULAR STARTING POINTS
========================================================= */
.start-card{
  background: #fff;
  border-radius: var(--radius-md);
  overflow: hidden;
  height: 100%;
  box-shadow: 0 8px 24px rgba(14,27,61,0.08);
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
.start-card:hover{
  transform: translateY(-6px);
  box-shadow: 0 18px 34px rgba(14,27,61,0.16);
}
.start-card__media{
  position: relative;
  aspect-ratio: 4/3;
  overflow: hidden;
}
.start-card__media img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s var(--ease);
}
.start-card:hover .start-card__media img{ transform: scale(1.06); }
.start-card__icon{
  position: absolute;
  top: 10px;
  left: 10px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 1rem;
  box-shadow: 0 6px 14px rgba(0,0,0,0.25);
}
.start-card__icon--blue{ background: var(--blue); }
.start-card__icon--red{ background: var(--red); }
.start-card__icon--gold{ background: var(--gold-dark); }
.start-card__icon--green{ background: var(--green); }
.start-card__body{ padding: 1.1rem 1rem 1.3rem; }
.start-card__body h3{
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 0.4rem;
}
.start-card__body p{
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-bottom: 0.75rem;
}
.start-card__body a{
  color: var(--blue);
  font-weight: 600;
  font-size: 0.82rem;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  transition: gap 0.2s var(--ease), color 0.2s var(--ease);
}
.start-card__body a:hover{ color: var(--navy); gap: 0.5rem; }

/* =========================================================
   WHO IS THIS FOR
========================================================= */
.who-for__panel{
  background: var(--off-white);
  border-radius: var(--radius-lg);
  padding: 2rem 1.5rem;
}
.who-for__panel h2{
  font-family: var(--font-display);
  color: var(--navy);
  font-size: 1.3rem;
  text-transform: uppercase;
  margin-bottom: 0.6rem;
}
.who-for__panel p{
  color: var(--text-muted);
  font-size: 0.9rem;
  margin-bottom: 0;
}
.who-for__list{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.25rem;
}
.who-for__item{
  text-align: center;
  transition: transform 0.3s var(--ease);
}
.who-for__item:hover{ transform: translateY(-4px); }
.who-for__icon{
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  margin-bottom: 0.5rem;
  transition: transform 0.3s var(--ease);
}
.who-for__item:hover .who-for__icon{ transform: scale(1.1); }
.who-for__icon--blue{ background: rgba(43,108,176,0.15); color: var(--blue); }
.who-for__icon--red{ background: rgba(226,65,58,0.15); color: var(--red); }
.who-for__icon--gold{ background: rgba(217,144,0,0.15); color: var(--gold-dark); }
.who-for__icon--green{ background: rgba(47,133,90,0.15); color: var(--green); }
.who-for__item span:last-child{
  display: block;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--navy);
}

/* =========================================================
   NEED HELP NOW BANNER
========================================================= */
.help-banner{
  background: #fdecc4;
  border-radius: var(--radius-lg);
  padding: 1.75rem 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.25rem;
}
.help-banner__icon{
  font-size: 2.2rem;
  color: var(--gold-dark);
  flex-shrink: 0;
}
.help-banner__text h2{
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 0.4rem;
}
.help-banner__text p{
  font-size: 0.88rem;
  color: var(--text-muted);
  margin-bottom: 0;
}
.btn-help{
  background: var(--navy);
  color: #fff;
  font-weight: 600;
  border-radius: 8px;
  padding: 0.75rem 1.4rem;
  white-space: nowrap;
  transition: background 0.25s var(--ease), transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.btn-help i{ margin-left: 0.35rem; transition: transform 0.25s var(--ease); display: inline-block; }
.btn-help:hover{
  background: var(--navy-light);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 10px 20px rgba(14,27,61,0.25);
}
.btn-help:hover i{ transform: translateX(4px); }

/* =========================================================
   COURSE FILTERS
========================================================= */
.course-filters{
  display: flex;
  gap: 0.6rem;
  overflow-x: auto;
  padding: 0.5rem 0;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.course-filters::-webkit-scrollbar{ display: none; }
.filter-pill{
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 1.1rem;
  border-radius: 999px;
  border: 1.5px solid #e2e6f0;
  background: #fff;
  color: var(--text-dark);
  font-weight: 600;
  font-size: 0.82rem;
  white-space: nowrap;
  transition: border-color 0.25s var(--ease), background 0.25s var(--ease),
              color 0.25s var(--ease), transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.filter-pill i{ font-size: 0.95rem; }
.filter-pill:hover{
  border-color: var(--blue);
  transform: translateY(-2px);
  box-shadow: 0 6px 14px rgba(14,27,61,0.08);
}
.filter-pill.active{
  background: var(--navy);
  border-color: var(--navy);
  color: #fff;
}
.filter-pill.active .filter-pill__icon{ color: #fff !important; }

/* =========================================================
   COURSE GRID / COURSE CARD
========================================================= */
.course-col{ transition: opacity 0.3s var(--ease), transform 0.3s var(--ease); }
.course-col.is-hidden{
  display: none;
}
.course-card{
  background: #fff;
  border-radius: var(--radius-md);
  overflow: hidden;
  height: 100%;
  box-shadow: 0 8px 24px rgba(14,27,61,0.08);
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
  position: relative;
}
.course-card:hover{
  transform: translateY(-6px);
  box-shadow: 0 18px 34px rgba(14,27,61,0.16);
}
.course-card__media{ position: relative; }
.course-card__media img{
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  display: block;
  transition: transform 0.5s var(--ease);
}
.course-card:hover .course-card__media img{ transform: scale(1.06); }
.course-card__icon{
  position: absolute;
  bottom: -22px;
  left: 14px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 1.1rem;
  border: 3px solid #fff;
  box-shadow: 0 6px 14px rgba(0,0,0,0.2);
  transition: transform 0.3s var(--ease);
  z-index: 1;
}
.course-card:hover .course-card__icon{ transform: scale(1.1) rotate(-6deg); }
.course-card__icon--green{ background: var(--green); }
.course-card__icon--red{ background: var(--red); }
.course-card__icon--blue{ background: var(--blue); }
.course-card__icon--gold{ background: var(--gold-dark); }
.course-card__icon--teal{ background: var(--teal); }
.course-card__icon--purple{ background: var(--purple); }
.course-card__body{ padding: 2rem 1rem 1.1rem; }
.course-card__body h3{
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 0.35rem;
}
.course-card__body p{
  font-size: 0.78rem;
  color: var(--text-muted);
  margin-bottom: 0.9rem;
  min-height: 2.2em;
}
.course-card__footer{
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.course-card__price{
  font-weight: 700;
  color: var(--navy);
  font-size: 0.95rem;
}
.course-card__footer a{
  color: var(--blue);
  font-weight: 600;
  font-size: 0.78rem;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  transition: gap 0.2s var(--ease), color 0.2s var(--ease);
}
.course-card__footer a:hover{ color: var(--navy); gap: 0.5rem; }
.course-grid__empty{ padding: 2rem 0; }

/* =========================================================
   MOBILE-FIRST BREAKPOINTS
   Base rules above target small phones (<576px).
   Each query below only ADDS/ENHANCES for larger viewports.
========================================================= */

/* Small devices (≥576px) */
@media (min-width: 576px){
  .hero__heading{ font-size: 2.5rem; }
  .page-hero__heading{ font-size: 2.4rem; }
  .who-for__list{ grid-template-columns: repeat(4, 1fr); }
  .help-banner{ flex-direction: row; align-items: center; }
  .help-banner__text{ flex: 1; }
  .btn-help{ margin-left: auto; }
}

/* Tablets (≥768px) */
@media (min-width: 768px){
  .site-header{ padding: 0.75rem 0; }
  .hero{ padding: 3.75rem 0 3rem; }
  .hero--dramatic{ padding: 0; }
  .hero__heading{ font-size: 2.9rem; }
  .hero__body{ font-size: 1rem; }
  .hero__icon{ width: 50px; height: 50px; font-size: 1.25rem; }
  .readiness__panel{ padding: 2.5rem 1.75rem; }
  .readiness__title{ font-size: 1.65rem; }

  .page-hero{ padding: 2.25rem 0 3rem; }
  .page-hero__heading{ font-size: 2.7rem; }

  .section-eyebrow h2{ font-size: 1.3rem; }

  .steps__row{
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
  }
  .steps__connector{
    display: flex;
    align-items: center;
    justify-content: center;
    color: #cbd2e0;
    font-size: 1.1rem;
    margin-top: 32px;
    background-image: linear-gradient(to right, #cbd2e0 0, #cbd2e0 4px, transparent 4px, transparent 9px);
    background-repeat: repeat-x;
    background-size: 9px 2px;
    background-position: center;
    width: 40px;
  }

  .who-for__panel{ padding: 2.5rem 2rem; }
}

/* Desktops (≥992px) */
@media (min-width: 992px){
  .btn-contact{ margin-top: 0; }
  .navbar-nav .nav-link{ font-size: 0.95rem; }
  .hero{ padding: 4.5rem 0 3.5rem; }
  .hero--dramatic{ padding: 0; }
  .hero__heading{ font-size: clamp(2.8rem, 4vw, 3.4rem); }
  .hero__tagline span{ font-size: 1.1rem; }
  .hero__body{ font-size: 1.05rem; }
  .hero__icon{ width: 56px; height: 56px; font-size: 1.4rem; }
  .hero-dramatic__cards{ padding-bottom: 6.5rem; }
  .readiness__panel{ padding: 3rem 2rem; }
  .readiness__title{ font-size: 1.8rem; }

  .page-hero{ padding: 2.75rem 0 3.5rem; }
  .page-hero__heading{ font-size: 3.1rem; }
  .page-hero__body{ font-size: 1.05rem; }

  .section-eyebrow h2{ font-size: 1.5rem; }
  .steps__icon{ width: 72px; height: 72px; font-size: 1.7rem; }
  .steps__item h3{ font-size: 1.05rem; }
  .steps__connector{ width: 56px; margin-top: 36px; }

  .course-card__body{ padding: 2.25rem 1.25rem 1.4rem; }
  .course-card__body h3{ font-size: 1.05rem; }
  .course-card__body p{ font-size: 0.85rem; }
}

/* Large desktops (≥1200px) */
@media (min-width: 1200px){
  .container{ padding-left: 2rem; padding-right: 2rem; }
}

/* =========================================================
   RESOURCES PAGE
========================================================= */

/* --- Resource cards --- */
.resource-col{ transition: opacity 0.3s var(--ease), transform 0.3s var(--ease); }
.resource-col.is-hidden{ display: none; }
.resource-card{
  background: #fff;
  border-radius: var(--radius-md);
  padding: 1.85rem 1.5rem 1.6rem;
  height: 100%;
  box-shadow: 0 8px 24px rgba(14,27,61,0.08);
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
  position: relative;
}
.resource-card:hover{
  transform: translateY(-6px);
  box-shadow: 0 18px 34px rgba(14,27,61,0.16);
}
.resource-card__icon{
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  margin-bottom: 1.1rem;
  transition: transform 0.3s var(--ease);
}
.resource-card:hover .resource-card__icon{ transform: scale(1.08) rotate(-6deg); }
.resource-card__icon--green{ background: rgba(47,133,90,0.12); color: var(--green); }
.resource-card__icon--purple{ background: rgba(107,63,160,0.12); color: var(--purple); }
.resource-card__icon--gold{ background: rgba(217,144,0,0.12); color: var(--gold-dark); }
.resource-card__icon--blue{ background: rgba(43,108,176,0.12); color: var(--blue); }
.resource-card h3{
  font-size: 1rem;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 0.4rem;
}
.resource-card p{
  font-size: 0.82rem;
  color: var(--text-muted);
  margin-bottom: 1.25rem;
  min-height: 2.3em;
}
.resource-card__link{
  color: var(--blue);
  font-weight: 600;
  font-size: 0.82rem;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  transition: gap 0.2s var(--ease), color 0.2s var(--ease);
}
.resource-card__link:hover{ color: var(--navy); gap: 0.5rem; }
.resource-card__tag{
  position: absolute;
  bottom: 1.4rem;
  right: 1.4rem;
  font-size: 0.64rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0.25rem 0.65rem;
  border-radius: 999px;
}
.resource-card__tag--guide{ background: rgba(47,133,90,0.12); color: var(--green); }
.resource-card__tag--tool{ background: rgba(107,63,160,0.12); color: var(--purple); }
.resource-card__tag--checklist{ background: rgba(217,144,0,0.12); color: var(--gold-dark); }
.resource-card__tag--video{ background: rgba(43,108,176,0.12); color: var(--blue); }

/* --- "Can't find what you need?" suggestion banner --- */
.suggest-banner{
  background: rgba(43,108,176,0.08);
  border-radius: var(--radius-lg);
  padding: 1.75rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
}
.suggest-banner__left{
  display: flex;
  align-items: center;
  gap: 1.1rem;
}
.suggest-banner__icon{
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 2px solid var(--blue);
  color: var(--blue);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  flex-shrink: 0;
}
.suggest-banner h2{
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--blue);
  margin-bottom: 0.3rem;
}
.suggest-banner p{
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-bottom: 0;
}
.btn-suggest{
  background: var(--navy);
  color: #fff;
  font-weight: 600;
  border-radius: 8px;
  padding: 0.75rem 1.4rem;
  white-space: nowrap;
  transition: background 0.25s var(--ease), transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.btn-suggest i{ margin-left: 0.35rem; transition: transform 0.25s var(--ease); display: inline-block; }
.btn-suggest:hover{
  background: var(--navy-light);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 10px 20px rgba(14,27,61,0.25);
}
.btn-suggest:hover i{ transform: translateX(4px); }

/* --- Featured organisations / popular guides header row --- */
.org-strip__header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1.75rem;
}
.org-strip__header h2{
  font-family: var(--font-display);
  color: var(--navy);
  text-transform: uppercase;
  font-size: 1.05rem;
  letter-spacing: 0.5px;
  margin: 0;
}
.org-strip__header a{
  color: var(--blue);
  font-weight: 600;
  font-size: 0.85rem;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  transition: gap 0.2s var(--ease), color 0.2s var(--ease);
}
.org-strip__header a:hover{ color: var(--navy); gap: 0.5rem; }

/* --- Organisation cards --- */
.org-card{
  text-align: center;
  padding: 0.5rem;
  transition: transform 0.3s var(--ease);
}
.org-card:hover{ transform: translateY(-4px); }
.org-card__logo{
  font-family: var(--font-display);
  font-size: 0.95rem;
  line-height: 1.2;
  color: var(--navy);
  min-height: 2.6em;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.75rem;
}
.org-card p{
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-bottom: 0.6rem;
  min-height: 2.4em;
}
.org-card a{
  color: var(--blue);
  font-weight: 600;
  font-size: 0.8rem;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  transition: gap 0.2s var(--ease), color 0.2s var(--ease);
}
.org-card a:hover{ color: var(--navy); gap: 0.5rem; }

/* --- Video cards (Popular Guides & Videos) --- */
.video-card{
  background: #fff;
  border-radius: var(--radius-md);
  overflow: hidden;
  height: 100%;
  box-shadow: 0 8px 24px rgba(14,27,61,0.08);
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
.video-card:hover{
  transform: translateY(-6px);
  box-shadow: 0 18px 34px rgba(14,27,61,0.16);
}
.video-card__media{
  position: relative;
  aspect-ratio: 4/3;
  overflow: hidden;
}
.video-card__media img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s var(--ease);
}
.video-card:hover .video-card__media img{ transform: scale(1.06); }
.video-card__play{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(255,255,255,0.92);
  color: var(--navy);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  transition: transform 0.3s var(--ease), background 0.3s var(--ease);
}
.video-card:hover .video-card__play{
  transform: translate(-50%,-50%) scale(1.12);
  background: #fff;
}
.video-card__duration{
  position: absolute;
  bottom: 0.6rem;
  right: 0.6rem;
  background: rgba(14,27,61,0.85);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 600;
  padding: 0.15rem 0.5rem;
  border-radius: 4px;
}
.video-card__body{ padding: 1.1rem 1.1rem 1.3rem; }
.video-card__body h3{
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 0.4rem;
}
.video-card__body p{
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-bottom: 0.9rem;
  min-height: 2.2em;
}
.video-card__footer{
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.video-card__footer a{
  color: var(--blue);
  font-weight: 600;
  font-size: 0.8rem;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  transition: gap 0.2s var(--ease), color 0.2s var(--ease);
}
.video-card__footer a:hover{ color: var(--navy); gap: 0.5rem; }
.video-card__tag{
  font-size: 0.64rem;
  font-weight: 700;
  text-transform: uppercase;
  background: rgba(43,108,176,0.12);
  color: var(--blue);
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
}

@media (max-width: 767.98px){
  .suggest-banner{ flex-direction: column; align-items: stretch; text-align: center; }
  .suggest-banner__left{ flex-direction: column; text-align: center; }
}

/* =========================================================
   BLOG PAGE
========================================================= */

/* --- Featured article cards --- */
.article-card{
  display: block;
  background: #fff;
  border-radius: var(--radius-md);
  overflow: hidden;
  height: 100%;
  box-shadow: 0 8px 24px rgba(14,27,61,0.08);
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
  text-decoration: none;
  color: inherit;
}
.article-card:hover{
  transform: translateY(-6px);
  box-shadow: 0 18px 34px rgba(14,27,61,0.16);
  color: inherit;
}
.article-card__media{
  position: relative;
  aspect-ratio: 4/3;
  overflow: hidden;
}
.article-card__media img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s var(--ease);
}
.article-card:hover .article-card__media img{ transform: scale(1.06); }
.article-card__category{
  position: absolute;
  top: 0.85rem;
  left: 0.85rem;
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: #fff;
  padding: 0.3rem 0.7rem;
  border-radius: 6px;
}
.article-card__body{ padding: 1.25rem 1.25rem 1.4rem; }
.article-card__body h3{
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 0.5rem;
  line-height: 1.3;
}
.article-card__body p{
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-bottom: 1rem;
  min-height: 2.3em;
}
.article-card__meta{
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.78rem;
  color: var(--text-muted);
}
.article-card__meta .dot{
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--text-muted);
  display: inline-block;
}

/* --- Latest article rows --- */
.article-col{ transition: opacity 0.3s var(--ease); }
.article-col.is-hidden{ display: none; }
.article-row{
  display: flex;
  gap: 1.25rem;
  padding: 1.25rem 0;
  border-bottom: 1px solid #eceef4;
  text-decoration: none;
  color: inherit;
}
.col-lg-6.article-col:nth-child(-n+2) .article-row{ border-top: 1px solid #eceef4; }
.article-row__media{
  width: 140px;
  height: 105px;
  flex-shrink: 0;
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.article-row__media img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s var(--ease);
}
.article-row:hover .article-row__media img{ transform: scale(1.08); }
.article-row__category{
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-bottom: 0.3rem;
  display: inline-block;
}
.article-row h3{
  font-size: 0.98rem;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 0.35rem;
  line-height: 1.3;
  transition: color 0.2s var(--ease);
}
.article-row:hover h3{ color: var(--blue); }
.article-row p{
  font-size: 0.83rem;
  color: var(--text-muted);
  margin-bottom: 0.5rem;
}
.article-row__meta{
  font-size: 0.76rem;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 0.35rem;
}
.article-row__meta .dot{
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--text-muted);
  display: inline-block;
}

/* --- Pagination --- */
.blog-pagination{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}
.blog-pagination button,
.blog-pagination a,
.blog-pagination span.active{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 8px;
  border: 1px solid #e2e6f0;
  background: #fff;
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--navy);
  transition: border-color 0.2s var(--ease), color 0.2s var(--ease), background 0.2s var(--ease);
}
.blog-pagination a:hover{ border-color: var(--blue); color: var(--blue); }
.blog-pagination button.active,
.blog-pagination a.active,
.blog-pagination span.active{
  background: var(--blue);
  border-color: var(--blue);
  color: #fff;
}
.blog-pagination .dots{
  color: var(--text-muted);
  font-size: 0.9rem;
  padding: 0 0.25rem;
}

@media (max-width: 767.98px){
  .article-row{ flex-direction: column; }
  .article-row__media{ width: 100%; height: 180px; }
}

/* =========================================================
   SINGLE BLOG POST
========================================================= */

/* --- Breadcrumb bar --- */
.post-breadcrumb{
  background: var(--blue);
  padding: 0.75rem 0;
}
.post-breadcrumb__trail{
  font-size: 0.85rem;
  color: rgba(255,255,255,0.85);
  margin: 0;
}
.post-breadcrumb__trail a{
  color: rgba(255,255,255,0.85);
  text-decoration: none;
  transition: color 0.2s var(--ease);
}
.post-breadcrumb__trail a:hover{ color: #fff; }
.post-breadcrumb__trail i{
  font-size: 0.62rem;
  color: rgba(255,255,255,0.55);
  margin: 0 0.55rem;
}
.post-breadcrumb__trail span{ color: #fff; font-weight: 500; }

/* --- Post header --- */
.post-main{ padding: 3rem 0 5rem; }
.post-category{
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #fff;
  padding: 0.35rem 0.8rem;
  border-radius: 6px;
  margin-bottom: 1rem;
}
.post-title{
  font-family: var(--font-body);
  font-weight: 800;
  font-size: clamp(1.7rem, 3.5vw, 2.3rem);
  line-height: 1.2;
  color: var(--navy);
  margin-bottom: 1rem;
}
.post-meta{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.5rem;
  font-size: 0.85rem;
  color: var(--text-muted);
  padding-bottom: 1.75rem;
  border-bottom: 1px solid #e9ecf2;
  margin-bottom: 1.75rem;
}
.post-meta span{ display: inline-flex; align-items: center; gap: 0.4rem; }
.post-meta i{ color: var(--blue); }

/* --- Post body typography --- */
.post-body p{
  font-size: 1rem;
  color: var(--text-dark);
  line-height: 1.75;
  margin-bottom: 1.25rem;
}
.post-body h2{
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1.35rem;
  color: var(--navy);
  margin: 2.25rem 0 1rem;
}
.post-checklist{
  list-style: none;
  padding: 0;
  margin: 0 0 1.25rem;
}
.post-checklist li{
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  font-size: 1rem;
  color: var(--text-dark);
  margin-bottom: 0.6rem;
}
.post-checklist i{ color: var(--blue); margin-top: 0.2rem; }

/* --- Callout boxes --- */
.post-callout{
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  border-radius: var(--radius-sm);
  padding: 1.25rem 1.4rem;
  margin: 1.5rem 0;
}
.post-callout__icon{
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 1.05rem;
  flex-shrink: 0;
}
.post-callout p{ font-size: 0.92rem; margin: 0; color: var(--text-dark); }
.post-callout p strong{ color: var(--navy); }
.post-callout--tip{ background: rgba(43,108,176,0.08); }
.post-callout--tip .post-callout__icon{ background: var(--blue); }
.post-callout--remember{ background: rgba(242,169,30,0.14); }
.post-callout--remember .post-callout__icon{ background: var(--gold); color: var(--navy); }

/* --- Budget rule rings --- */
.rule-rings{
  display: flex;
  gap: 2.5rem;
  flex-wrap: wrap;
  margin: 1.5rem 0 1.75rem;
}
.rule-ring{ text-align: center; }
.rule-ring__circle{
  width: 96px;
  height: 96px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  background: conic-gradient(var(--ring-color, var(--blue)) 0%, #e9ecf2 0%);
  transition: background 1.1s var(--ease);
}
.rule-rings.is-visible .rule-ring__circle{
  background: conic-gradient(var(--ring-color, var(--blue)) var(--pct, 0%), #e9ecf2 0);
}
.rule-ring__circle::before{
  content: "";
  position: absolute;
  inset: 8px;
  background: #fff;
  border-radius: 50%;
}
.rule-ring__circle span{
  position: relative;
  z-index: 1;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--ring-color, var(--blue));
}
.rule-ring__label{
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--navy);
  margin-top: 0.6rem;
}

/* --- Share row --- */
.post-share{ margin-top: 2.5rem; }
.post-share__label{
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 0.75rem;
}
.share-icon{
  width: 38px;
  height: 38px;
  border-radius: 50%;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.share-icon:hover{ transform: translateY(-3px); box-shadow: 0 10px 18px rgba(14,27,61,0.2); color: #fff; }

/* --- Sidebar widgets --- */
.post-sidebar{ display: flex; flex-direction: column; gap: 1.75rem; }
.sidebar-widget{
  background: #fff;
  border: 1px solid #e9ecf2;
  border-radius: var(--radius-md);
  padding: 1.5rem;
}
.sidebar-widget h3{
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 1.1rem;
}

/* Categories list */
.category-list{ list-style: none; padding: 0; margin: 0; }
.category-list li{
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6rem 0;
  border-bottom: 1px solid #f1f2f6;
}
.category-list li:last-child{ border-bottom: none; }
.category-list a{
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex: 1;
  text-decoration: none;
  color: var(--text-dark);
  font-size: 0.9rem;
  font-weight: 500;
  transition: color 0.2s var(--ease);
}
.category-list a:hover{ color: var(--blue); }
.category-list a.is-active{ color: var(--navy); font-weight: 700; }
.category-list__icon{
  width: 30px;
  height: 30px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 0.85rem;
  flex-shrink: 0;
}
.category-list__count{
  font-size: 0.8rem;
  color: var(--text-muted);
  font-weight: 600;
}

/* Related articles (compact rows) */
.related-article{
  display: flex;
  gap: 0.9rem;
  text-decoration: none;
  color: inherit;
  padding: 0.85rem 0;
  border-bottom: 1px solid #f1f2f6;
}
.related-article:first-child{ padding-top: 0; }
.related-article:last-child{ border-bottom: none; padding-bottom: 0; }
.related-article__media{
  width: 72px;
  height: 60px;
  flex-shrink: 0;
  border-radius: 8px;
  overflow: hidden;
}
.related-article__media img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s var(--ease);
}
.related-article:hover .related-article__media img{ transform: scale(1.08); }
.related-article__category{
  display: inline-block;
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 0.15rem 0.5rem;
  border-radius: 5px;
  margin-bottom: 0.3rem;
}
.related-article h4{
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--navy);
  line-height: 1.3;
  margin-bottom: 0.3rem;
  transition: color 0.2s var(--ease);
}
.related-article:hover h4{ color: var(--blue); }
.related-article__meta{
  font-size: 0.72rem;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 0.3rem;
}
.related-article__meta .dot{
  width: 3px; height: 3px; border-radius: 50%;
  background: var(--text-muted);
  display: inline-block;
}

/* Inbox widget (sidebar variant) */
.sidebar-inbox{
  background: linear-gradient(160deg, rgba(43,108,176,0.08), rgba(107,63,160,0.08));
  border: 1px solid rgba(43,108,176,0.15);
  border-radius: var(--radius-md);
  padding: 1.75rem;
  position: relative;
  overflow: hidden;
}
.sidebar-inbox__icon{
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--blue);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  margin-bottom: 1rem;
}
.sidebar-inbox h3{
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 0.5rem;
}
.sidebar-inbox p{
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-bottom: 1.25rem;
}
.sidebar-inbox input{
  width: 100%;
  border-radius: 8px;
  border: 1px solid #d7ddea;
  padding: 0.65rem 1rem;
  font-size: 0.88rem;
  margin-bottom: 0.75rem;
}
.sidebar-inbox input:focus{ outline: none; border-color: var(--blue); }
.sidebar-inbox button{
  width: 100%;
  background: var(--blue);
  color: #fff;
  border: none;
  border-radius: 8px;
  font-weight: 700;
  padding: 0.7rem;
  transition: background 0.2s var(--ease);
}
.sidebar-inbox button:hover{ background: #235a94; }
.sidebar-inbox__paper{
  position: absolute;
  bottom: 0.75rem;
  right: 1rem;
  font-size: 1.6rem;
  color: var(--blue);
  opacity: 0.5;
  transform: rotate(15deg);
}

@media (max-width: 991.98px){
  .post-sidebar{ margin-top: 3rem; }
}

/* --- Post thumbnail (above title) --- */
.post-thumbnail{
  border-radius: var(--radius-md);
  overflow: hidden;
  aspect-ratio: 16/8;
  margin-bottom: 1.75rem;
}
.post-thumbnail img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* =========================================================
   TESTIMONIALS MODULE (flexible content panel)
   Badge / heading / body / CTA that sit centered over the photo
   mosaic in template-parts/modules/testimonials.php. The mosaic
   grid itself (.mosaic / .mosaic-col / .mosaic-card / .mosaic-fade
   / .mosaic-overlay / .mosaic-content / .mosaic-body / mobile row)
   is already defined above under TESTIMONIALS PHOTO MOSAIC — these
   are just the pieces that block was missing. .testimonial-mosaic
   takes its background from the shared .bg--white / .bg--offwhite
   / .bg--navy utility classes, same as the other flexible content
   panels.
========================================================= */
.mosaic-heading{
  font-family: var(--font-body);
  font-weight: 800;
  font-size: clamp(1.6rem, 3.5vw, 2.1rem);
  color: var(--navy);
  line-height: 1.2;
  margin-bottom: 0.2rem;
}
.mosaic-heading .muted{ color: #9aa1b1; display: block; }

.bg--navy .mosaic-heading{ color: #fff; }
.bg--navy .mosaic-body{ color: rgba(255,255,255,0.72); }
.bg--navy .mosaic-overlay::before{ background: radial-gradient(ellipse 60% 75% at 50% 55%, rgba(14,27,61,0.97) 45%, rgba(14,27,61,0) 100%); }
.bg--navy .mosaic-fade--l{ background: linear-gradient(90deg, var(--navy), rgba(14,27,61,0)); }
.bg--navy .mosaic-fade--r{ background: linear-gradient(270deg, var(--navy), rgba(14,27,61,0)); }
.bg--navy .mosaic-mobile-fade{ background: linear-gradient(var(--navy), rgba(14,27,61,0)); }

.bg--offwhite .mosaic-overlay::before{ background: radial-gradient(ellipse 60% 75% at 50% 55%, rgba(244,246,251,0.97) 45%, rgba(244,246,251,0) 100%); }
.bg--offwhite .mosaic-fade--l{ background: linear-gradient(90deg, var(--off-white), rgba(244,246,251,0)); }
.bg--offwhite .mosaic-fade--r{ background: linear-gradient(270deg, var(--off-white), rgba(244,246,251,0)); }
.bg--offwhite .mosaic-mobile-fade{ background: linear-gradient(var(--off-white), rgba(244,246,251,0)); }

/* =========================================================
   SEARCH RESULTS
   Used by search.php. Result cards reuse .article-row (same
   as the Blog page's Latest Articles) and pagination reuses
   .blog-pagination — only the header/form/empty state below
   are new.
========================================================= */
.search-results__header{ margin-bottom: 2.5rem; max-width: 640px; }
.search-results__title{
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.6rem, 3.5vw, 2.1rem);
  color: var(--navy);
  margin-bottom: 0.5rem;
}
.search-results__count{ color: var(--text-muted); font-size: 0.9rem; margin-bottom: 1.5rem; }
.search-results__form{ display: flex; gap: 0.6rem; }
.search-results__input{
  flex: 1;
  border-radius: 8px;
  border: 1px solid #d7ddea;
  padding: 0.7rem 1rem;
  font-size: 0.95rem;
}
.search-results__input:focus{ outline: none; border-color: var(--blue); }
.search-results__submit{
  background: var(--navy);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 0 1.2rem;
  transition: background 0.2s var(--ease);
}
.search-results__submit:hover{ background: var(--navy-light); }
.search-results__empty{ color: var(--text-muted); padding: 2.5rem 0; }
.search-results__empty a{ color: var(--blue); font-weight: 600; }

/* --- Compact search form, "Latest Articles" header row (blog) ---
   Starts collapsed to just the icon button; clicking it (see
   js\script.js) adds .is-open, sliding the input open to its left
   while the button itself stays put on the right (flex-end). --- */
.latest-articles__search{
  display: flex;
  align-items: center;
  justify-content: flex-end;
  background: #fff;
  border: 1px solid #d7ddea;
  border-radius: 999px;
  padding: 0.3rem;
  transition: border-color 0.3s var(--ease);
}
.latest-articles__search-input{
  width: 0;
  min-width: 0;
  border: none;
  background: transparent;
  font-size: 0.9rem;
  color: var(--text-dark);
  opacity: 0;
  transition: width 0.3s var(--ease), opacity 0.25s var(--ease), margin 0.3s var(--ease), padding 0.3s var(--ease);
}
.latest-articles__search-input:focus{ outline: none; }
.latest-articles__search.is-open .latest-articles__search-input{
  width: 200px;
  opacity: 1;
  margin-right: 0.5rem;
  padding-left: 0.9rem;
}
.latest-articles__search-submit{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 50%;
  background: var(--navy);
  color: #fff;
  transition: background 0.2s var(--ease);
}
.latest-articles__search-submit:hover{ background: var(--navy-light); }

/* Offsets the #latest-articles anchor jump (topic filter pills link
   here) so the sticky header doesn't cover the section heading. */
#latest-articles{ scroll-margin-top: 100px; }

@media (max-width: 575.98px){
  .latest-articles__search.is-open .latest-articles__search-input{ width: 250px; }
}

/* On mobile, keep the search pinned top-right of the header row
   instead of wrapping below the heading — it's fine for it to sit
   over the heading text, including once it opens. */
@media (max-width: 767.98px){
  .latest-articles .org-strip__header{ position: relative; }
  .latest-articles .latest-articles__search{
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
  }
}

/* =========================================================
   CONTACT PANEL
   Full-bleed dark photo behind the whole section (not just a top
   strip), heading/intro/secondary-contact on the left, a dark-
   styled form on the right — no floating white card. The parallax
   uses the same CSS-var + transform technique as .phone-parallax
   (see js/script.js) rather than background-attachment:fixed,
   which doesn't work on iOS Safari.
========================================================= */
.contact-panel{
  position: relative;
  overflow: hidden;
  padding: clamp(4rem, 8vw, 6rem) 0;
}
.contact-panel__hero{
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.contact-panel__hero-bg{
  position: absolute;
  top: -15%;
  left: 0;
  right: 0;
  height: 130%;
  background-size: cover;
  background-position: center;
  background-color: var(--navy);
  transform: translateY(var(--parallax-y, 0px));
  will-change: transform;
}
.contact-panel__scrim{
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(14,27,61,0.94) 0%, rgba(14,27,61,0.82) 32%, rgba(14,27,61,0.45) 62%, rgba(14,27,61,0.15) 100%);
}
.contact-panel > .container{ position: relative; z-index: 2; }

.contact-panel__heading{
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.9rem, 3.6vw, 2.6rem);
  line-height: 1.15;
  color: #fff;
  margin-bottom: 1rem;
}
.contact-panel__intro{ color: rgba(255,255,255,0.72); font-size: 0.98rem; line-height: 1.7; max-width: 26rem; margin-bottom: 2rem; }

.contact-panel__secondary{ display: flex; align-items: center; gap: 1rem; }
.contact-panel__secondary-icon{
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: var(--gold);
  color: var(--navy);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  flex: none;
}
.contact-panel__secondary-copy{ display: flex; flex-direction: column; gap: 0.1rem; }
.contact-panel__secondary-label{ color: rgba(255,255,255,0.65); font-size: 0.85rem; }
.contact-panel__secondary-link{ color: #fff; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.contact-panel__secondary-link:hover{ color: var(--gold); }

.contact-form-wrap .form-row{ display: flex; gap: 1rem; margin-bottom: 1rem; }
.contact-form-wrap .form-row > *{ flex: 1; min-width: 0; }
.contact-form-wrap input:not([type="submit"]),
.contact-form-wrap textarea{
  width: 100%;
  border: 1px solid #d7ddea;
  border-radius: 8px;
  padding: 0.85rem 1.1rem;
  font-size: 0.92rem;
  font-family: var(--font-body);
  color: var(--text-dark);
  background: #fff;
}
.contact-form-wrap input:not([type="submit"]):focus,
.contact-form-wrap textarea:focus{ outline: none; border-color: var(--blue); }
.contact-form-wrap textarea{ min-height: 140px; resize: vertical; margin-bottom: 1rem; }
.contact-form__footer{
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
  margin-top: 0.5rem;
  position: relative;
}

/* Dark variant — used by the Contact panel, which always sits on
   a dark photo (no light-background option for this component). */
.contact-form-wrap--dark input:not([type="submit"]),
.contact-form-wrap--dark textarea{
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.28);
  color: #fff;
}
.contact-form-wrap--dark input::placeholder,
.contact-form-wrap--dark textarea::placeholder{ color: rgba(255,255,255,0.55); }
.contact-form-wrap--dark input:not([type="submit"]):focus,
.contact-form-wrap--dark textarea:focus{ border-color: var(--gold); }
.contact-form-wrap--dark .contact-form__privacy{
  color: rgba(255,255,255,0.6);
  font-size: 0.82rem;
  line-height: 1.5;
  max-width: 360px;
  margin: 0;
}
.contact-form-wrap--dark .contact-form__submit{
  background: var(--gold);
  color: var(--navy);
  border: none;
  border-radius: 8px;
  padding: 0.85rem 1.75rem;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  flex: none;
  transition: background 0.2s var(--ease), transform 0.2s var(--ease);
}
.contact-form-wrap--dark .contact-form__submit:hover{ background: #ffbb33; transform: translateY(-2px); }

/* CF7 injects <span class="wpcf7-spinner"> right after the submit
   button for the loading state. It's visibility:hidden when idle but
   still takes up flex layout space as a 3rd item, throwing off
   justify-content — take it out of the flex flow. */
.contact-form__footer .wpcf7-spinner{
  position: absolute;
  margin-left: 0.5rem;
}

@media (max-width: 575.98px){
  .contact-form-wrap .form-row{ flex-direction: column; gap: 1rem; }
}

/* =========================================================
   FAQ PANEL
   Left side is either heading+body+contact link, or a
   .photo-cluster (reuses the Get Involved panel's component).
   Right side is a Bootstrap accordion, restyled to a flat,
   borderless list matching the site rather than Bootstrap's
   boxed default look.
========================================================= */
.faq-panel{ padding: clamp(3.5rem, 6vw, 5.5rem) 0; }
.faq-panel__heading{
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  line-height: 1.1;
  color: var(--navy);
  margin-bottom: 1rem;
}
.faq-panel__body{ color: var(--text-muted); font-size: 1rem; line-height: 1.7; margin-bottom: 1.5rem; max-width: 26rem; }
.faq-panel__contact{
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--navy);
  transition: color 0.2s var(--ease);
}
.faq-panel__contact:hover{ color: var(--blue); }
.faq-panel__contact-emoji{ font-size: 1.2rem; }

.faq-panel__photo-caption{
  margin: 2.5rem 0 0;
  font-size: 0.92rem;
  color: var(--text-muted);
  line-height: 1.55;
  max-width: 340px;
}
.faq-panel__photo-caption a{ color: var(--blue); font-weight: 600; text-decoration: none; }
.faq-panel__photo-caption a:hover{ text-decoration: underline; }

/* --- Full-width variant: heading/body centered above the accordion,
   which spans the full row instead of sharing it with a left column. --- */
.faq-panel__head{ max-width: 46rem; margin: 0 auto 2.5rem; }
.faq-panel__head .build-heading{ margin-bottom: 0.75rem; }
.faq-panel__body-centered{
  color: var(--text-muted);
  font-size: 1rem;
  line-height: 1.65;
  margin: 0.75rem 0 0;
}
.faq-accordion--full{ max-width: 900px; margin: 0 auto; }

.faq-accordion{
  --bs-accordion-border-width: 0;
  --bs-accordion-btn-focus-border-color: transparent;
  --bs-accordion-btn-focus-box-shadow: none;
  --bs-accordion-active-bg: transparent;
  --bs-accordion-btn-bg: transparent;
  --bs-accordion-active-color: var(--navy);
  --bs-accordion-color: var(--navy);
}
.faq-accordion .accordion-item{ background: transparent; border: none; border-bottom: 1px solid #e5e8f0; }
.faq-accordion .accordion-item:last-child{ border-bottom: none; }
.faq-accordion .accordion-button{
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1.02rem;
  color: var(--navy);
  padding: 1.25rem 0;
  box-shadow: none;
}
.faq-accordion .accordion-body{
  padding: 0 2.5rem 1.5rem 0;
  color: var(--text-muted);
  font-size: 0.95rem;
  line-height: 1.7;
}

/* Navy background contrast — the accordion's colours (and Bootstrap's
   own dark chevron icon) are tuned for a light background by default. */
.bg--navy .faq-panel__body-centered,
.bg--navy .faq-panel__body{ color: rgba(255,255,255,0.72); }
.bg--navy .faq-panel__photo-caption{ color: rgba(255,255,255,0.6); }
.bg--navy .faq-accordion{ --bs-accordion-active-color: #fff; --bs-accordion-color: #fff; }
.bg--navy .faq-accordion .accordion-item{ border-bottom-color: rgba(255,255,255,0.15); }
.bg--navy .faq-accordion .accordion-button{ color: #fff; }
.bg--navy .faq-accordion .accordion-button::after{ filter: invert(1) brightness(2); }
.bg--navy .faq-accordion .accordion-body{ color: rgba(255,255,255,0.65); }

.faq-panel__footer{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2.5rem;
  margin-top: 3.5rem;
  padding-top: 2rem;
  border-top: 1px solid #e5e8f0;
  font-size: 0.92rem;
  color: var(--text-dark);
}
.faq-panel__footer-item i{ color: var(--blue); margin-right: 0.4rem; }
.bg--navy .faq-panel__footer{ border-top-color: rgba(255,255,255,0.15); color: rgba(255,255,255,0.85); }
.faq-panel__footer-item a{ color: var(--navy); font-weight: 700; text-decoration: underline; margin-left: 0.3rem; }

@media (max-width: 575.98px){
  .faq-accordion .accordion-body{ padding-right: 0; }
  .faq-panel__footer{ gap: 1.25rem; text-align: center; }
}

/* =========================================================
   VIDEO PANEL
   A single large click-to-play video (reuses .hero__video from
   the Page Hero) with a floating speech-bubble callout.
========================================================= */
.video-panel{ padding: clamp(3.5rem, 6vw, 5.5rem) 0; }
.video-panel__frame{
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
}
.video-panel__frame .hero__video{ aspect-ratio: 16/9; }
.video-panel__bubble{
  position: absolute;
  top: -34px;
  left: 8%;
  z-index: 3;
  background: #fff;
  color: var(--text-dark);
  border-radius: var(--radius-md) var(--radius-md) var(--radius-md) 4px;
  padding: 1rem 1.25rem;
  max-width: 260px;
  box-shadow: 0 14px 30px rgba(14,27,61,0.18);
  opacity: 1;
  transition: opacity 0.3s var(--ease), visibility 0.3s var(--ease);
}
.video-panel__frame.is-playing .video-panel__bubble{
  opacity: 0;
  visibility: hidden;
}
.video-panel__bubble p{ margin: 0; font-size: 0.9rem; line-height: 1.5; color: var(--text-dark); }
.video-panel__bubble::after{
  content: "";
  position: absolute;
  width: 16px;
  height: 16px;
  background: #fff;
  bottom: -6px;
  left: 24px;
  transform: rotate(45deg);
  border-radius: 0 0 4px 0;
}

@media (max-width: 575.98px){
  .video-panel__bubble{ top: -24px; left: 5%; max-width: 200px; padding: 0.85rem 1rem; }
  .video-panel__bubble p{ font-size: 0.82rem; }
}

/* =========================================================
   SUCCESS STORIES
   Portfolio-style card grid: stat badges up top, title/tags
   over a bottom scrim, a circular action button (link or video
   popup). Each card's photo has a slow continuous zoom so the
   grid feels alive without needing real video files per card.
========================================================= */
.success-stories__heading{ margin-bottom: 0.75rem; }
.success-stories__body{ color: var(--text-muted); font-size: 1rem; max-width: 40rem; margin: 0 auto 2.5rem; }

.success-story{
  position: relative;
  border-radius: var(--radius-md);
  overflow: hidden;
  aspect-ratio: 3/4;
  height: 100%;
  box-shadow: 0 14px 30px rgba(14,27,61,0.1);
}
.success-story__photo{ position: absolute; inset: 0; background: var(--navy); }
.success-story__photo img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  animation: successStoryZoom 14s ease-in-out infinite alternate;
}
@keyframes successStoryZoom{
  0%{ transform: scale(1); }
  100%{ transform: scale(1.1); }
}
@media (prefers-reduced-motion: reduce){
  .success-story__photo img{ animation: none; }
}
.success-story__scrim{
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(14,27,61,0.55) 0%, rgba(14,27,61,0) 30%, rgba(14,27,61,0) 55%, rgba(14,27,61,0.88) 100%);
  pointer-events: none;
}

.success-story__stats{
  position: absolute;
  top: 0.9rem;
  left: 0.9rem;
  right: 0.9rem;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.success-story__stat{
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  background: rgba(14,27,61,0.45);
  backdrop-filter: blur(6px);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 600;
  padding: 0.35rem 0.6rem;
  border-radius: 999px;
}
.success-story__stat i{ font-size: 0.75rem; }

.success-story__body{
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  padding: 1.1rem 1.1rem 1rem;
}
.success-story__index{ display: block; color: rgba(255,255,255,0.6); font-size: 0.8rem; font-weight: 600; margin-bottom: 0.3rem; }
.success-story__title{ color: #fff; font-size: 1.3rem; font-weight: 700; margin: 0 0 0.2rem; }
.success-story__subtitle{ color: rgba(255,255,255,0.75); font-size: 0.85rem; margin: 0 0 0.9rem; }
.success-story__footer{ display: flex; align-items: flex-end; justify-content: space-between; gap: 0.75rem; }
.success-story__tags{ display: flex; flex-wrap: wrap; gap: 0.4rem; }
.success-story__tag{
  background: rgba(255,255,255,0.14);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  padding: 0.35rem 0.65rem;
  border-radius: 999px;
}
.success-story__action{
  flex: none;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,0.16);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  transition: background 0.25s var(--ease), transform 0.25s var(--ease);
}
.success-story__action:hover{ background: var(--gold); color: var(--navy); transform: scale(1.08); }

/* Video / quote reveal states — opaque overlays that cover the
   whole card in place (no popup/modal). */
.success-story__video,
.success-story__quote-panel{
  position: absolute;
  inset: 0;
  z-index: 5;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s var(--ease);
}
.success-story.is-playing .success-story__video,
.success-story.is-quote-open .success-story__quote-panel{ opacity: 1; pointer-events: auto; }

.success-story__video{ background: #000; }
.success-story__video iframe{ width: 100%; height: 100%; border: 0; }

.success-story__quote-panel{
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.9rem;
  padding: 1.75rem;
  background: linear-gradient(155deg, var(--navy), var(--navy-light));
}
.success-story__quote-mark{ font-size: 1.8rem; color: var(--gold); }
.success-story__quote-text{ color: #fff; font-size: 0.96rem; line-height: 1.62; margin: 0; }
.success-story__quote-name{ color: rgba(255,255,255,0.58); font-size: 0.76rem; font-weight: 600; }

.success-story__close{
  position: absolute;
  top: 0.6rem;
  right: 0.6rem;
  z-index: 6;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,0.16);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  cursor: pointer;
  transition: background 0.2s var(--ease);
}
.success-story__close:hover{ background: rgba(255,255,255,0.32); }

/* =========================================================
   STEPS
   A vertical zigzag timeline: a centred connector line with a dot
   per step, cards alternating left/right of it. Each step fades/
   slides in independently via .reveal as it scrolls into view
   (see js/script.js's IntersectionObserver) — not a single
   all-at-once reveal, since steps are spread far apart vertically.
========================================================= */
.steps-panel__head{ max-width: 34rem; margin: 0 auto 2.5rem; }
.steps-panel__head .build-heading{ margin-bottom: 0.75rem; }
.steps-panel__body{ color: var(--text-muted); font-size: 1rem; line-height: 1.65; margin: 0.75rem 0 0; }
.bg--navy .steps-panel__body{ color: rgba(255,255,255,0.72); }

.steps-panel__timeline{ position: relative; max-width: 900px; margin: 0 auto; padding: 1rem 0; }
.steps-panel__line{
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--blue);
  opacity: 0.35;
  transform: translateX(-50%);
}

.step{
  position: relative;
  display: grid;
  grid-template-columns: 1fr 60px 1fr;
  align-items: center;
  margin-bottom: 2.25rem;
}
.step:last-child{ margin-bottom: 0; }

.step__dot{
  grid-row: 1;
  grid-column: 2;
  justify-self: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--blue);
  box-shadow: 0 0 0 6px rgba(43,108,176,0.15);
  z-index: 1;
}

.step__card{
  grid-row: 1;
  position: relative;
  background: #fff;
  border-radius: var(--radius-md);
  box-shadow: 0 16px 34px rgba(14,27,61,0.08);
  padding: 1.35rem 1.75rem;
}
.step--right .step__card{ grid-column: 3; }
.step--left .step__card{ grid-column: 1; }

.step--right .step__card::before,
.step--left .step__card::before{
  content: "";
  position: absolute;
  top: 50%;
  margin-top: -7px;
  width: 14px;
  height: 14px;
  background: #fff;
  transform: rotate(45deg);
}
.step--right .step__card::before{ left: -6px; box-shadow: -3px 3px 6px rgba(14,27,61,0.04); }
.step--left .step__card::before{ right: -6px; box-shadow: 3px -3px 6px rgba(14,27,61,0.04); }

.step__number{
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 400;
  color: var(--blue);
  margin-right: 0.3rem;
}
.step__heading{
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.15rem;
  color: var(--navy);
  margin: 0 0 0.4rem;
}
.step__card .step__body{ color: var(--text-muted); font-size: 0.92rem; line-height: 1.55; margin: 0 0 0.85rem; }
.step__card .step__body:last-child{ margin-bottom: 0; }

.step__tags{ display: flex; flex-wrap: wrap; gap: 0.5rem; }
.step__tag{
  background: var(--off-white);
  color: var(--text-muted);
  font-size: 0.78rem;
  font-weight: 600;
  padding: 0.4rem 0.75rem;
  border-radius: 999px;
}
.step__tag--accent{ background: rgba(43,108,176,0.12); color: var(--blue); }

@media (max-width: 767.98px){
  .steps-panel__line{ left: 20px; }
  .step{ grid-template-columns: 40px 1fr; column-gap: 0.75rem; margin-bottom: 1.75rem; }
  .step__dot{ grid-column: 1; justify-self: start; margin-left: 13px; }
  .step--right .step__card,
  .step--left .step__card{ grid-column: 2; }
  .step--right .step__card::before,
  .step--left .step__card::before{ left: -6px; right: auto; box-shadow: -3px 3px 6px rgba(14,27,61,0.04); }
  .step__card{ padding: 1.4rem 1.5rem; }
}

/* =========================================================
   IMAGE AND TEXT BLOCK
   Two-column layout — left-aligned eyebrow/heading/body/button on one
   side, 1-3 photos on the other (see .image-text-block__photos below).
   image_position flips which side the photos sit on via Bootstrap's
   .flex-row-reverse rather than a bespoke CSS rule. The body field
   is plain HTML (Wysiwyg/Textarea) — any <ul><li> typed into it is
   styled as a checkmark list automatically, no separate bullets
   field needed. .photo-cluster__badge (floating circular icon) is
   reused as-is from the Get Involved / FAQ panels.
========================================================= */
.image-text-block__photos{ position: relative; }

/* 1 photo — shows at its own natural aspect ratio, never cropped. */
.image-text-block__photos--1{ max-width: 420px; }
.image-text-block__photos--1 .image-text-block__photo{
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 20px 45px rgba(14,27,61,0.18);
}
.image-text-block__photos--1 .image-text-block__photo img{
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}

/* 2 photos — side by side, equal columns. Never cropped: with only
   2 photos there's no "simple portrait" assumption to lean on (both
   slots just as likely to be a poster/infographic like the primary
   photo below), so each just sizes to its own natural ratio. */
.image-text-block__photos--2{
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: start;
  gap: 1rem;
}
.image-text-block__photos--2 .image-text-block__photo{
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 16px 34px rgba(14,27,61,0.14);
}
.image-text-block__photos--2 .image-text-block__photo img{
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}

/* 3 photos — one large photo left, two stacked right. The primary
   (large) photo stays uncropped for the same reason; the two smaller
   stacked photos are cropped to a clean 4/3 since they're expected
   to be simple portraits, not text-heavy graphics. */
.image-text-block__photos--3{
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 1rem;
  aspect-ratio: 4/3;
}
.image-text-block__photos--3 .image-text-block__photo--primary{ grid-row: 1 / 3; }

.image-text-block__photos--3 .image-text-block__photo{
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 16px 34px rgba(14,27,61,0.14);
}
.image-text-block__photos--3 .image-text-block__photo img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.image-text-block__photos--3 .image-text-block__photo--primary img{
  height: auto;
  object-fit: contain;
}

@media (max-width: 575.98px){
  .image-text-block__photos--2,
  .image-text-block__photos--3{
    grid-template-columns: 1fr;
    grid-template-rows: none;
    aspect-ratio: auto;
  }
  .image-text-block__photos--3 .image-text-block__photo--primary{ grid-row: auto; }
  .image-text-block__photos--3 .image-text-block__photo:not(.image-text-block__photo--primary){ aspect-ratio: 4/3; }
}

.image-text-block__content .build-heading{ margin: 0 0 1rem; max-width: none; }
.image-text-block__body{
  color: var(--text-muted);
  font-size: 1.02rem;
  line-height: 1.6;
  margin: 0 0 1.5rem;
}
.image-text-block__body p{ margin: 0 0 1rem; }
.image-text-block__body > :last-child{ margin-bottom: 0; }
.bg--navy .image-text-block__body{ color: rgba(255,255,255,0.72); }

.image-text-block__body ul{
  list-style: none;
  margin: 1.25rem 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}
.image-text-block__body ul li{
  position: relative;
  padding-left: 2.5rem;
  color: var(--text-dark);
  font-size: 0.98rem;
  line-height: 1.5;
}
.image-text-block__body ul li::before{
  content: "\2713";
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--off-white);
  color: var(--navy);
  font-size: 0.8rem;
  font-weight: 700;
}
.bg--navy .image-text-block__body ul li{ color: #fff; }
.bg--navy .image-text-block__body ul li::before{ background: rgba(255,255,255,0.12); color: #fff; }

/* =========================================================
   VIDEO STEPS
   4 portrait video previews. Muted/looping self-hosted <video>
   (not YouTube — needs to start playing instantly on hover, see
   js/script.js), poster frame shown until then. Title/text/link sit
   inside the frame over a bottom gradient scrim and fade in on
   hover — not a separate block, so the card never changes height.
========================================================= */
.video-steps__head{ max-width: 34rem; margin: 0 auto 2.5rem; }
.video-steps__head .build-heading{ margin-bottom: 0.75rem; }
.video-steps__body{ color: var(--text-muted); font-size: 1rem; line-height: 1.65; margin: 0; }
.bg--navy .video-steps__body{ color: rgba(255,255,255,0.72); }

.video-steps__grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
}

.video-steps__box{
  display: block;
  color: inherit;
  text-decoration: none;
}

.video-steps__frame{
  display: block;
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 9/16;
  background: var(--navy);
  box-shadow: 0 16px 34px rgba(14,27,61,0.12);
  transition: box-shadow 0.4s var(--ease), transform 0.4s var(--ease);
}
.video-steps__box:hover .video-steps__frame{
  box-shadow: 0 22px 44px rgba(14,27,61,0.2);
  transform: translateY(-4px);
}

.video-steps__video{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.video-steps__tag{
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  padding: 0.4rem 0.85rem;
  border-radius: 999px;
  background: rgba(255,255,255,0.82);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--navy);
}

.video-steps__reveal{
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 3rem 1.1rem 1.1rem;
  background: linear-gradient(0deg, rgba(14,27,61,0.92) 0%, rgba(14,27,61,0.6) 55%, rgba(14,27,61,0) 100%);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.4s var(--ease), transform 0.4s var(--ease);
}
.video-steps__box:hover .video-steps__reveal{
  opacity: 1;
  transform: translateY(0);
}
.video-steps__title{
  display: block;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.05rem;
  color: #fff;
  margin: 0 0 0.3rem;
}
.video-steps__text{
  display: block;
  font-size: 0.85rem;
  line-height: 1.45;
  color: rgba(255,255,255,0.78);
}
.video-steps__arrow{
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255,255,255,0.16);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  transition: background 0.3s var(--ease), color 0.3s var(--ease), transform 0.3s var(--ease);
}
.video-steps__box:hover .video-steps__arrow{ background: var(--gold); color: var(--navy); transform: translate(2px,-2px); }

@media (max-width: 991.98px){
  .video-steps__grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 575.98px){
  .video-steps__grid{ grid-template-columns: 1fr; max-width: 280px; margin: 0 auto; }
}

/* =========================================================
   404
========================================================= */
.error-404{ padding: clamp(4rem, 10vw, 7rem) 0; }
.error-404__inner{ max-width: 36rem; margin: 0 auto; }
.error-404__code{
  display: block;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(4rem, 12vw, 7rem);
  line-height: 1;
  color: var(--gold-dark);
  opacity: 0.9;
  margin-bottom: 0.5rem;
}
.error-404__heading{
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.7rem, 4vw, 2.4rem);
  color: var(--navy);
  line-height: 1.25;
  margin: 0 0 0.75rem;
}
.error-404__body{
  color: var(--text-muted);
  font-size: 1.02rem;
  line-height: 1.65;
  margin: 0 0 2rem;
}

.error-404__search{ max-width: 30rem; margin: 0 auto 2.5rem; }

.error-404__links{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem 1.75rem;
  margin-bottom: 2.5rem;
}
.error-404__links a{
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--navy);
  font-weight: 600;
  font-size: 0.95rem;
  transition: color 0.2s var(--ease);
}
.error-404__links a i{ color: var(--blue); }
.error-404__links a:hover{ color: var(--blue); }

.error-404__cta{ display: inline-flex; }

@media (max-width: 575.98px){
  .error-404__links{ gap: 1rem 1.25rem; }
}