/* ===================================================================
   AQUA DC — Brand Override Layer
   Loaded after style.css to rebrand the Softec template.
   =================================================================== */

/* ── 1. FONTS ─────────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,300;12..96,400;12..96,500;12..96,600;12..96,700;12..96,800;12..96,900&family=Google+Sans+Flex:wght@100..900&display=swap');

/* ── 2. BRAND VARIABLES ───────────────────────────────────────────── */
:root {
  /* AQUA DC palette */
  --aqua-coral:     #e0393c;
  --aqua-teal:      #1d9bd5;
  --aqua-gold:      #f9b72e;
  --aqua-lavender:  #963f94;
  --aqua-green:     #64b64b;
  --aqua-orange:    #f2812e;
  --aqua-navy:      #0d1140;
  --aqua-navy-deep: #06081c;

  /* Override Softec theme variables → AQUA DC equivalents */
  --tp-ff-body:          'Google Sans Flex', sans-serif;
  --tp-ff-heading:       'Bricolage Grotesque', sans-serif;
  --tp-common-black:     #0d1140;
  --tp-heading-primary:  #0d1140;
  --tp-common-blue-4:    #e0393c;   /* primary CTA → coral */
  --tp-common-blue:      #1d9bd5;   /* interactive → teal  */
  --tp-common-blue-3:    #963f94;   /* accent → lavender   */
  --tp-common-blue-2:    #0a0e3d;   /* deep accent → navy  */
  --tp-theme-1:          #1d9bd5;   /* theme accent → teal */
  --tp-theme-2:          #f9b72e;   /* secondary → gold    */
  --tp-theme-3:          #e0393c;   /* highlight → coral   */
}

/* ── 2b. BODY FONT ────────────────────────────────────────────────── */
body, p, li, td, th, input, textarea, select, button {
  font-family: 'Google Sans Flex', sans-serif !important;
}


/* ── 4. ABOUT-BANNER (hero depth effect) ─────────────────────────── */
.about-banner {
  background-color: var(--aqua-navy) !important;
}
.about-img-title {
  color: var(--aqua-navy) !important;
}

/* ── 5. HARDCODED COLOR OVERRIDES ─────────────────────────────────── */
[style*="#600EE4"],
[style*="600EE4"] { color: var(--aqua-coral) !important; }

.tp-input-field input:focus {
  box-shadow: 0px 1px 2px 1px rgba(32,33,36,0.06), inset 0 0 0 2px var(--aqua-teal) !important;
}

/* ── 6. NAV — FROSTED GLASS ───────────────────────────────────────── */

/* At rest: gradient from solid white (left third) feathering to clear */
.header-bottom__area {
  background: linear-gradient(to right, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0.9) 25%, rgba(255,255,255,0.3) 35%) !important;
  border-bottom: none !important;
  -webkit-backdrop-filter: blur(18px) saturate(180%) !important;
  backdrop-filter: blur(18px) saturate(180%) !important;
}

/* Scrolled/sticky: same gradient, slightly more fill on the fade */
.header-sticky {
  background: linear-gradient(to right, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0.9) 25%, rgba(255,255,255,0.3) 35%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(200%) !important;
  backdrop-filter: blur(20px) saturate(200%) !important;
  box-shadow: none !important;
  border-bottom: none !important;
}

/* Nav links always dark navy */
.header-bottom__main-menu-4 nav ul li a,
.header-bottom__main-menu-inner nav ul li a {
  color: var(--aqua-navy) !important;
}
.header-bottom__main-menu-4 nav ul > li:hover > a,
.header-bottom__main-menu-inner nav ul > li:hover > a {
  color: var(--aqua-navy) !important;
}

/* Donate button on white nav — visible outlined style */
.header-bottom__btn .tp-btn-white {
  border: 1.5px solid rgba(13,17,64,0.18) !important;
  color: var(--aqua-navy) !important;
  background: transparent !important;
}
.header-bottom__btn .tp-btn-white:hover {
  background: var(--aqua-coral) !important;
  border-color: var(--aqua-coral) !important;
  color: #fff !important;
}
.header-bottom__btn .tp-btn-white .white-text {
  color: inherit !important;
}

/* Hamburger bar on white nav */
.header-bottom__bar {
  box-shadow: rgba(0,0,0,0.04) 0px 1px 4px 0px, rgba(27,31,35,0.12) 0px 0px 0px 1px !important;
}

/* Logo text treatment (text-only logo fallback) */
.aqua-logo-text {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 900;
  font-size: 1.5rem;
  letter-spacing: -0.03em;
  color: var(--aqua-navy);
  text-decoration: none;
  line-height: 1;
}
.aqua-logo-text .accent { color: var(--aqua-coral); }
.aqua-logo-sub {
  display: block;
  font-size: 0.55rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(13,17,64,0.45);
  margin-top: 2px;
}

/* ── 7. BUTTON COLORS ─────────────────────────────────────────────── */
.tp-btn {
  background-color: var(--aqua-coral) !important;
}
.tp-btn:hover { background-color: #c42d30 !important; }

.tp-btn-white {
  color: var(--aqua-navy) !important;
}

/* ── 8. TYPOGRAPHY ────────────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6,
.tp-hero__hero-title,
.tp-section-title,
.about-banner-title,
.about-img-title {
  font-family: 'Bricolage Grotesque', sans-serif !important;
}

.tp-section-subtitle {
  color: var(--aqua-teal) !important;
}

/* ── 9. TOP-LEVEL HERO — SHIFT CANVAS EFFECT ─────────────────────── */
.about-banner { background: #07082a !important; }

#effect-box {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
#shift {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
#shift canvas {
  position: absolute;
  top: 0;
  left: 0;
  filter: brightness(1.8);
}
/* Keep text above the canvas */
.about-banner .container { position: relative; z-index: 2; }

/* ── 9c. HOME HERO — BOXED SHIFT EFFECT ───────────────────────────── */
/* Wrapper sits inside .tp-hero__bg (position:relative, border-radius:30px)
   Top bleeds above the box so the upper rounded corners are hidden off-screen.
   Bottom extends into the feature section below. */

/* Hide the original gradient background — shift effect replaces it */
.tp-hero__bg > .tp-hero-bg {
  background: transparent !important;
  opacity: 0 !important;
}

/* Kill the navy fill on the hero card — the effect box IS the visual card */
.tp-hero__area .tp-hero__bg {
  background-color: transparent !important;
}

#home-effect-box {
  position: absolute;
  top: -120px;      /* bleed above — hides top rounded corners */
  left: 2.5%;
  right: 2.5%;
  bottom: 50px;
  border-radius: 30px;
  overflow: hidden;
  background: #07082a;
  z-index: 0;
  pointer-events: none;
}
#home-effect-box #shift {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
/* CSS-scale the canvas to fill the full box height — stretches the
   viewport-height render to cover the extended dark card area */
#home-effect-box #shift canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100% !important;
  height: 100% !important;
  filter: brightness(1.8);
}
/* Keep hero content above the canvas */
.tp-hero__bg .container,
.tp-hero__bg .tp-hero-shape { position: relative; z-index: 2; }
.tp-hero-bg-single { z-index: 1 !important; }

/* ── 9b. DARK BG SECTIONS ─────────────────────────────────────────── */
[style*="background: #600EE4"],
[style*="background:#600EE4"],
[style*="background-color: #600EE4"],
[style*="background-color:#600EE4"] {
  background-color: var(--aqua-navy) !important;
}

/* ── 10. FOOTER ────────────────────────────────────────────────────── */
.tp-footer__widget-title { font-family: 'Bricolage Grotesque', sans-serif !important; }

/* ── 11. SVG LOGO — FULL COLOR ON WHITE NAV ───────────────────────── */
/* No filter: show the full-color SVG on the white nav background */
.aqua-nav-logo {
  height: 38px;
  width: auto;
  display: block;
  filter: none;
}

/* Offcanvas panel is dark — invert logo to white there */
.tpoffcanvas__logo .aqua-nav-logo {
  filter: brightness(0) invert(1);
  height: 42px;
}

/* ── 12. NAV SPACING — fit 6 items on one line ────────────────────── */
.header-bottom__main-menu-4 ul > li > a,
.header-bottom__main-menu-inner ul > li > a {
  padding-left: 11px !important;
  padding-right: 11px !important;
  font-size: 0.875rem !important;
  font-weight: 600 !important;
  letter-spacing: 0em !important;
}

/* ── 13. SIX-COLOR NAV UNDERLINES + SUBMENU COLORS ───────────────── */
/*
  Order: 1(purple) · 2(red) · 3(orange) · 4(yellow) · 5(green) · 6(blue)
  Each top-level item's ::before underline, ::after glow, hover link color,
  and all submenu item hover colors share the same brand color.
*/

/* 1 — purple */
.header-bottom__main-menu-4 nav ul > li:nth-child(1)::before,
.header-bottom__main-menu-inner nav ul > li:nth-child(1)::before {
  background-color: var(--aqua-lavender) !important;
}
.header-bottom__main-menu-4 nav ul > li:nth-child(1)::after,
.header-bottom__main-menu-inner nav ul > li:nth-child(1)::after {
  background: linear-gradient(180deg, rgba(146,72,144,0) 0%, rgba(146,72,144,0.13) 100%) !important;
  filter: drop-shadow(0px 2px 0px var(--aqua-lavender)) !important;
}
.header-bottom__main-menu-4 nav ul > li:nth-child(1):hover > a,
.header-bottom__main-menu-inner nav ul > li:nth-child(1):hover > a {
  color: var(--aqua-navy) !important;
}
.header-bottom__main-menu-4 nav ul > li:nth-child(1) .submenu li:hover > a,
.header-bottom__main-menu-inner nav ul > li:nth-child(1) .submenu li:hover > a {
  color: var(--aqua-navy) !important;
}
.header-bottom__main-menu-4 nav ul > li:nth-child(1) .submenu li a::after,
.header-bottom__main-menu-inner nav ul > li:nth-child(1) .submenu li a::after {
  background-color: var(--aqua-lavender) !important;
}

/* 2 — red */
.header-bottom__main-menu-4 nav ul > li:nth-child(2)::before,
.header-bottom__main-menu-inner nav ul > li:nth-child(2)::before {
  background-color: var(--aqua-coral) !important;
}
.header-bottom__main-menu-4 nav ul > li:nth-child(2)::after,
.header-bottom__main-menu-inner nav ul > li:nth-child(2)::after {
  background: linear-gradient(180deg, rgba(207,66,68,0) 0%, rgba(207,66,68,0.13) 100%) !important;
  filter: drop-shadow(0px 2px 0px var(--aqua-coral)) !important;
}
.header-bottom__main-menu-4 nav ul > li:nth-child(2):hover > a,
.header-bottom__main-menu-inner nav ul > li:nth-child(2):hover > a {
  color: var(--aqua-navy) !important;
}
.header-bottom__main-menu-4 nav ul > li:nth-child(2) .submenu li:hover > a,
.header-bottom__main-menu-inner nav ul > li:nth-child(2) .submenu li:hover > a {
  color: var(--aqua-navy) !important;
}
.header-bottom__main-menu-4 nav ul > li:nth-child(2) .submenu li a::after,
.header-bottom__main-menu-inner nav ul > li:nth-child(2) .submenu li a::after {
  background-color: var(--aqua-coral) !important;
}

/* 3 — orange */
.header-bottom__main-menu-4 nav ul > li:nth-child(3)::before,
.header-bottom__main-menu-inner nav ul > li:nth-child(3)::before {
  background-color: var(--aqua-orange) !important;
}
.header-bottom__main-menu-4 nav ul > li:nth-child(3)::after,
.header-bottom__main-menu-inner nav ul > li:nth-child(3)::after {
  background: linear-gradient(180deg, rgba(226,131,60,0) 0%, rgba(226,131,60,0.13) 100%) !important;
  filter: drop-shadow(0px 2px 0px var(--aqua-orange)) !important;
}
.header-bottom__main-menu-4 nav ul > li:nth-child(3):hover > a,
.header-bottom__main-menu-inner nav ul > li:nth-child(3):hover > a {
  color: var(--aqua-navy) !important;
}
.header-bottom__main-menu-4 nav ul > li:nth-child(3) .submenu li:hover > a,
.header-bottom__main-menu-inner nav ul > li:nth-child(3) .submenu li:hover > a {
  color: var(--aqua-navy) !important;
}
.header-bottom__main-menu-4 nav ul > li:nth-child(3) .submenu li a::after,
.header-bottom__main-menu-inner nav ul > li:nth-child(3) .submenu li a::after {
  background-color: var(--aqua-orange) !important;
}

/* 4 — yellow */
.header-bottom__main-menu-4 nav ul > li:nth-child(4)::before,
.header-bottom__main-menu-inner nav ul > li:nth-child(4)::before {
  background-color: var(--aqua-gold) !important;
}
.header-bottom__main-menu-4 nav ul > li:nth-child(4)::after,
.header-bottom__main-menu-inner nav ul > li:nth-child(4)::after {
  background: linear-gradient(180deg, rgba(235,179,63,0) 0%, rgba(235,179,63,0.13) 100%) !important;
  filter: drop-shadow(0px 2px 0px var(--aqua-gold)) !important;
}
.header-bottom__main-menu-4 nav ul > li:nth-child(4):hover > a,
.header-bottom__main-menu-inner nav ul > li:nth-child(4):hover > a {
  color: var(--aqua-navy) !important;
}
.header-bottom__main-menu-4 nav ul > li:nth-child(4) .submenu li:hover > a,
.header-bottom__main-menu-inner nav ul > li:nth-child(4) .submenu li:hover > a {
  color: var(--aqua-navy) !important;
}
.header-bottom__main-menu-4 nav ul > li:nth-child(4) .submenu li a::after,
.header-bottom__main-menu-inner nav ul > li:nth-child(4) .submenu li a::after {
  background-color: var(--aqua-gold) !important;
}

/* 5 — green */
.header-bottom__main-menu-4 nav ul > li:nth-child(5)::before,
.header-bottom__main-menu-inner nav ul > li:nth-child(5)::before {
  background-color: var(--aqua-green) !important;
}
.header-bottom__main-menu-4 nav ul > li:nth-child(5)::after,
.header-bottom__main-menu-inner nav ul > li:nth-child(5)::after {
  background: linear-gradient(180deg, rgba(103,173,82,0) 0%, rgba(103,173,82,0.13) 100%) !important;
  filter: drop-shadow(0px 2px 0px var(--aqua-green)) !important;
}
.header-bottom__main-menu-4 nav ul > li:nth-child(5):hover > a,
.header-bottom__main-menu-inner nav ul > li:nth-child(5):hover > a {
  color: var(--aqua-navy) !important;
}
.header-bottom__main-menu-4 nav ul > li:nth-child(5) .submenu li:hover > a,
.header-bottom__main-menu-inner nav ul > li:nth-child(5) .submenu li:hover > a {
  color: var(--aqua-navy) !important;
}
.header-bottom__main-menu-4 nav ul > li:nth-child(5) .submenu li a::after,
.header-bottom__main-menu-inner nav ul > li:nth-child(5) .submenu li a::after {
  background-color: var(--aqua-green) !important;
}

/* 6 — blue */
.header-bottom__main-menu-4 nav ul > li:nth-child(6)::before,
.header-bottom__main-menu-inner nav ul > li:nth-child(6)::before {
  background-color: var(--aqua-teal) !important;
}
.header-bottom__main-menu-4 nav ul > li:nth-child(6)::after,
.header-bottom__main-menu-inner nav ul > li:nth-child(6)::after {
  background: linear-gradient(180deg, rgba(44,152,201,0) 0%, rgba(44,152,201,0.13) 100%) !important;
  filter: drop-shadow(0px 2px 0px var(--aqua-teal)) !important;
}
.header-bottom__main-menu-4 nav ul > li:nth-child(6):hover > a,
.header-bottom__main-menu-inner nav ul > li:nth-child(6):hover > a {
  color: var(--aqua-navy) !important;
}
.header-bottom__main-menu-4 nav ul > li:nth-child(6) .submenu li:hover > a,
.header-bottom__main-menu-inner nav ul > li:nth-child(6) .submenu li:hover > a {
  color: var(--aqua-navy) !important;
}
.header-bottom__main-menu-4 nav ul > li:nth-child(6) .submenu li a::after,
.header-bottom__main-menu-inner nav ul > li:nth-child(6) .submenu li a::after {
  background-color: var(--aqua-teal) !important;
}

/* ── 14. SERVICE-SM CARDS — fix text overflow ─────────────────────── */
.tp-service-sm-content {
  margin-bottom: 0 !important;
}
.tp-service-sm-title {
  font-size: 17px !important;
  line-height: 1.5 !important;
  padding-bottom: 12px !important;
}

/* ── 14b. HEADER IMAGE — scroll-driven left blur ─────────────────── */
.about-img-height::before {
  content: '';
  position: absolute;
  inset: 0;
  -webkit-backdrop-filter: blur(var(--header-blur, 0px));
  backdrop-filter: blur(var(--header-blur, 0px));
  -webkit-mask-image: linear-gradient(to right, black 0%, black 35%, transparent 100%);
  mask-image: linear-gradient(to right, black 0%, black 35%, transparent 100%);
  z-index: 1;
  pointer-events: none;
}
/* Brightening overlay — same mask and cadence as blur */
.about-img-height::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, var(--header-bright, 0));
  -webkit-mask-image: linear-gradient(to right, black 0%, black 35%, transparent 100%);
  mask-image: linear-gradient(to right, black 0%, black 35%, transparent 100%);
  z-index: 1;
  pointer-events: none;
}
/* Keep title text above both effect layers */
.about-img-content {
  position: relative;
  z-index: 2;
}

/* ── 15. HERO THUMB + ABOUT SUB-IMAGES ───────────────────────────── */
.tp-hero__thumb {
  overflow: hidden;
  border-radius: 12px;
}
.tp-hero__thumb img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}
/* Main large hero thumb — fill full wrapper width */
.tp-hero__thumb-wrapper .tp-hero__thumb {
  height: 420px !important;
}

/* About sub-images — scale down to half natural size */
.tp-about__sub-img-1 img,
.tp-about__sub-img-2 img {
  width: 160px !important;
  height: auto !important;
}
.tp-about__sub-img-1 {
  left: calc(42% + 100px) !important;
  bottom: calc(-37% + 20px) !important;
}

/* ── 16. RANK CARD NUMBERS — display font, boldest weight ─────────── */
.tp-rank__number span,
.tp-rank__number i {
  font-family: 'Bricolage Grotesque', sans-serif !important;
  font-weight: 900 !important;
}

/* Gradient overlay via ::before so opacity can be transitioned */
.tp-rank__item {
  position: relative !important;
  overflow: hidden !important;
}
.tp-rank__item::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  border-radius: inherit !important;
  background: linear-gradient(16.46deg, #5956E9 11.15%, #9B99FF 99.48%) !important;
  opacity: 0 !important;
  transition: opacity 0.6s ease !important;
  z-index: 0 !important;
  pointer-events: none !important;
}
.tp-rank__item.active::before,
.tp-rank__item:not(.active):hover::before {
  opacity: 1 !important;
}

/* All card content sits above the pseudo-element */
.tp-rank__item > * {
  position: relative !important;
  z-index: 1 !important;
}

/* Gradient text fill on white (non-active) cards */
.tp-rank__item:not(.active) .tp-rank__number span,
.tp-rank__item:not(.active) .tp-rank__number i {
  background: linear-gradient(16.46deg, #5956E9 11.15%, #9B99FF 99.48%);
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
}

/* Active/hover: numbers and labels turn white */
.tp-rank__item.active .tp-rank__number span,
.tp-rank__item.active .tp-rank__number i,
.tp-rank__item:not(.active):hover .tp-rank__number span,
.tp-rank__item:not(.active):hover .tp-rank__number i {
  background: none !important;
  -webkit-background-clip: unset !important;
  background-clip: unset !important;
  -webkit-text-fill-color: #fff !important;
  color: #fff !important;
}
.tp-rank__item.active .tp-rank__company-info strong,
.tp-rank__item.active .tp-rank__company-info span,
.tp-rank__item:not(.active):hover .tp-rank__company-info strong,
.tp-rank__item:not(.active):hover .tp-rank__company-info span {
  color: rgba(255, 255, 255, 0.9) !important;
}

/* Label and caption line breaks */
.tp-rank__company-info strong {
  display: block !important;
  font-weight: 600 !important;
  font-size: 1rem !important;
  color: var(--tp-heading-primary) !important;
}
.tp-rank__company-info span {
  display: block !important;
}

/* ── 17. PROJECT SLIDER — constrain thumb images + content padding ── */
.tp-project__thumb {
  width: 280px !important;
  min-width: 280px !important;
  align-self: stretch !important;
  overflow: hidden !important;
  border-radius: 20px 0 0 20px !important;
  flex-shrink: 0 !important;
}
.tp-project__thumb img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}
.tp-project__content {
  padding-top: 36px !important;
  padding-bottom: 36px !important;
}

/* ── 18. TESTIMONIAL NAV — first-name pills ─────────────────────────── */
.aqua-testi-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 32px;
}
.aqua-testi-pill {
  display: inline-block;
  padding: 8px 24px;
  border-radius: 999px;
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 0.88rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  cursor: pointer;
  border: none;
  box-shadow: 0 0 0 2px rgba(99, 96, 243, 0.35);
  background: transparent;
  color: #6360f3;
  transition: background 0.2s, color 0.2s, box-shadow 0.2s;
  white-space: nowrap;
  line-height: 1.4;
  user-select: none;
}
.aqua-testi-pill.active {
  background: linear-gradient(16.46deg, #5956E9 11.15%, #9B99FF 99.48%);
  box-shadow: none;
  color: #fff;
}


/* ── 20. PARTNER CARDS ── */
.aqua-partner-card {
  background: #fff;
  border: 1.5px solid #e8e8f0;
  border-radius: 16px;
  padding: 2rem 1.75rem 1.5rem;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  transition: box-shadow 0.25s ease, transform 0.25s ease, border-color 0.25s ease;
}
.aqua-partner-card:hover {
  box-shadow: 0 8px 32px rgba(89, 86, 233, 0.13);
  transform: translateY(-4px);
  border-color: rgba(99, 96, 243, 0.3);
}
.aqua-partner-card__logo {
  width: 96px;
  height: 96px;
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.25rem;
  background: #f5f5f9;
  flex-shrink: 0;
}
.aqua-partner-card__logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 6px;
}
.aqua-partner-card__name {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 700;
  font-size: 1rem;
  color: var(--aqua-navy);
  margin-bottom: 0.75rem;
}
.aqua-partner-card__desc {
  font-size: 0.85rem;
  color: #5f6168;
  line-height: 1.65;
  flex-grow: 1;
  margin-bottom: 1rem;
}
.aqua-partner-card__link {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--aqua-lavender);
  font-family: 'Bricolage Grotesque', sans-serif;
  margin-top: auto;
}

/* ── 19. AMBIENT HEADER — shift-canvas breadcrumb (matches about-banner) ── */
.aqua-ambient-header {
  background-color: #07082a;
}
.aqua-ambient-header .breadcrumb__title,
.aqua-ambient-header .breadcrumb__text p {
  color: #fff !important;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.35);
}