/* ==========================================================================
   MPOW, Mwanza Prosthetics & Orthotics Workshop
   Classic design system | Palette: Dark Blue · Blue · Red
   ========================================================================== */

/* ---------- 1. Design Tokens ---------- */
:root {
  /* Brand */
  --navy: #0a2540;
  --navy-900: #071a2e;
  --navy-800: #0f3355;
  --navy-700: #164066;
  --blue: #1565d8;
  --blue-600: #1156bd;
  --blue-300: #7db0f0;
  --blue-50: #eef5ff;
  --red: #c81d25;
  --red-600: #a8161d;
  --red-300: #f0918f;
  --red-50: #fdeeee;

  /* Neutrals */
  --ink: #17212e;
  --body: #4a5b6d;
  --muted: #7b8a9c;
  --line: #e3e9f0;
  --cream: #f7f9fc;
  --white: #ffffff;

  /* Type: a classic high-contrast serif for display, a neutral workhorse
     sans for reading/UI, and an old-style serif for quotes and numerals. */
  --font-display: "Playfair Display", "Times New Roman", Georgia, serif;
  --font-body: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-quote: "Cormorant Garamond", "Playfair Display", Georgia, serif;

  /* Shape & depth */
  --r-sm: 6px;
  --r-md: 12px;
  --r-lg: 20px;
  --r-xl: 28px;
  --sh-sm: 0 2px 8px rgba(10, 37, 64, .06);
  --sh-md: 0 10px 30px rgba(10, 37, 64, .09);
  --sh-lg: 0 22px 60px rgba(10, 37, 64, .14);
  --sh-red: 0 14px 34px rgba(200, 29, 37, .28);

  /* Rhythm */
  --sec-y: clamp(64px, 8vw, 110px);
  --container: 1200px;
  --ease: cubic-bezier(.22, .61, .36, 1);
}

/* ---------- 2. Base ---------- */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  /* clears the 84px sticky bar when jumping to an anchor */
  scroll-padding-top: 104px;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.75;
  color: var(--body);
  background: var(--white);
  /* `clip` contains the pre-animation `translateX` reveal offsets without
     creating a scroll container, so the sticky navbar keeps working.
     `hidden` is only a fallback for browsers without `clip` support. */
  overflow-x: hidden;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
  font-optical-sizing: auto;
}

body.nav-open { overflow: hidden; }

/* Fluid display scale. Tracking opens up as the size comes down, which is what
   keeps a large serif looking refined rather than cramped. */
h1, h2, h3, h4, h5, h6, .display-font {
  font-family: var(--font-display);
  color: var(--navy);
  font-weight: 700;
  line-height: 1.16;
  letter-spacing: -.015em;
  text-wrap: balance;
}

h1 { font-size: clamp(2.05rem, 4.4vw, 3.4rem); line-height: 1.1; letter-spacing: -.022em; }
h2 { font-size: clamp(1.65rem, 3.1vw, 2.55rem); line-height: 1.15; letter-spacing: -.018em; }
h3 { font-size: clamp(1.28rem, 1.9vw, 1.6rem); line-height: 1.28; letter-spacing: -.01em; }
h4 { font-size: 1.16rem; line-height: 1.34; letter-spacing: -.005em; }
h5 { font-size: 1.04rem; line-height: 1.4; letter-spacing: 0; }
h6 {
  font-family: var(--font-body);
  font-size: .82rem;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
}

p { margin-bottom: 1.1rem; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

a { color: var(--blue); text-decoration: none; transition: color .25s var(--ease); }
a:hover { color: var(--red); }

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

::selection { background: var(--red); color: #fff; }

/* Scrollbar */
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: var(--cream); }
::-webkit-scrollbar-thumb {
  background: linear-gradient(var(--navy), var(--blue));
  border-radius: 20px;
  border: 2px solid var(--cream);
}

/* Accessibility */
:focus-visible {
  outline: 3px solid var(--blue-300);
  outline-offset: 3px;
  border-radius: 3px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 2000;
  background: var(--red);
  color: #fff;
  padding: .8rem 1.4rem;
  font-weight: 600;
  border-radius: 0 0 var(--r-sm) 0;
}
.skip-link:focus { left: 0; color: #fff; }

.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

/* ---------- 3. Layout helpers ---------- */
.container-x { width: min(100% - 2.5rem, var(--container)); margin-inline: auto; }

.section { padding-block: var(--sec-y); position: relative; }
.section-sm { padding-block: clamp(48px, 6vw, 76px); }
.section-tint { background: var(--cream); }

.section-dark {
  background:
    radial-gradient(1000px 500px at 12% 0%, rgba(21, 101, 216, .30), transparent 60%),
    radial-gradient(800px 480px at 100% 100%, rgba(200, 29, 37, .22), transparent 60%),
    linear-gradient(160deg, var(--navy-900), var(--navy) 55%, var(--navy-800));
  color: rgba(255, 255, 255, .84);
}
.section-dark h1, .section-dark h2, .section-dark h3, .section-dark h4 { color: #fff; }
.section-dark .eyebrow { color: var(--red-300); }
.section-dark .lead { color: rgba(255, 255, 255, .8); }

/* Decorative hairlines */
.rule {
  width: 74px; height: 3px;
  background: var(--red);
  border-radius: 3px;
  margin-block: 1.15rem;
}
.rule.center { margin-inline: auto; }

/* ---------- 4. Section headings ---------- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  font-family: var(--font-body);
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: .35rem;
}
.eyebrow::before {
  content: "";
  width: 30px; height: 2px;
  background: currentColor;
  border-radius: 2px;
}
.eyebrow.no-line::before { display: none; }

.section-head { max-width: 720px; margin-bottom: clamp(34px, 4vw, 56px); }
.section-head.center { margin-inline: auto; text-align: center; }
.section-head.center .eyebrow { justify-content: center; }
.section-head p { font-size: 1.06rem; margin-top: 1rem; }

.lead {
  font-size: 1.1rem;
  line-height: 1.78;
  color: var(--body);
  text-wrap: pretty;
}

.text-red { color: var(--red) !important; }
.text-blue { color: var(--blue) !important; }
.text-navy { color: var(--navy) !important; }
.fw-semi { font-weight: 600; }

/* ---------- 5. Buttons ---------- */
.btn {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: .84rem;
  letter-spacing: .09em;
  text-transform: uppercase;
  border-radius: 999px;
  padding: .82rem 1.75rem;
  border: 2px solid transparent;
  transition: all .3s var(--ease);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  position: relative;
  z-index: 0;
  overflow: hidden;
  text-align: center;
}
.btn::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--navy);
  transform: translateY(101%);
  transition: transform .38s var(--ease);
  z-index: -1;
}
.btn > * { position: relative; z-index: 1; }

.btn-primary {
  background: var(--red);
  color: #fff;
  box-shadow: var(--sh-red);
}
.btn-primary:hover { color: #fff; transform: translateY(-3px); box-shadow: 0 18px 40px rgba(200, 29, 37, .38); }

.btn-navy { background: var(--navy); color: #fff; }
.btn-navy:hover { color: #fff; transform: translateY(-3px); }

.btn-blue { background: var(--blue); color: #fff; }
.btn-blue:hover { color: #fff; transform: translateY(-3px); }

.btn-outline {
  background: transparent;
  border-color: var(--navy);
  color: var(--navy);
}
.btn-outline::after { background: var(--red); }
.btn-outline:hover { color: #fff; border-color: var(--red); transform: translateY(-3px); }

.btn-ghost-light {
  background: transparent;
  border-color: rgba(255, 255, 255, .55);
  color: #fff;
}
.btn-ghost-light::after { background: var(--red); }
.btn-ghost-light:hover { color: #fff; border-color: var(--red); transform: translateY(-3px); }

.btn-sm { padding: .58rem 1.2rem; font-size: .74rem; }
.btn-lg { padding: 1rem 2.1rem; font-size: .9rem; }

/* Text link with arrow */
.link-arrow {
  font-weight: 600;
  font-size: .84rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--navy);
  display: inline-flex;
  align-items: center;
  gap: .5rem;
}
.link-arrow i { transition: transform .3s var(--ease); color: var(--red); }
.link-arrow:hover { color: var(--red); }
.link-arrow:hover i { transform: translateX(6px); }

/* ---------- 6. Top utility bar ---------- */
.topbar {
  background: var(--navy-900);
  color: rgba(255, 255, 255, .72);
  font-size: .8rem;
  border-bottom: 1px solid rgba(255, 255, 255, .07);
}
.topbar a { color: rgba(255, 255, 255, .85); }
.topbar a:hover { color: #fff; }
.topbar .tb-item { display: inline-flex; align-items: center; gap: .45rem; }
.topbar .tb-item i { color: var(--red-300); font-size: .95rem; }
.topbar .tb-social a {
  width: 30px; height: 30px;
  display: grid; place-items: center;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 50%;
  font-size: .82rem;
  transition: all .25s var(--ease);
}
.topbar .tb-social a:hover { background: var(--red); border-color: var(--red); color: #fff; transform: translateY(-2px); }

/* Language switcher */
.topbar .lang-toggle {
  display: inline-flex; align-items: center; gap: .45rem;
  min-height: 30px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 999px;
  color: rgba(255, 255, 255, .85);
  font-size: .8rem;
  line-height: 1;
  padding: .34rem .7rem;
  transition: all .25s var(--ease);
}
.topbar .lang-toggle:hover,
.topbar .lang-toggle:focus-visible,
.topbar .lang-toggle[aria-expanded="true"] {
  background: var(--red);
  border-color: var(--red);
  color: #fff;
}
.topbar .lang-toggle::after { margin-left: .1rem; opacity: .7; }
.topbar .flag-svg {
  display: block;
  width: 20px; height: 13px;
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .25);
  flex: none;
}
.topbar .lang-menu { min-width: 168px; padding: .35rem; }
.topbar .lang-menu .lang-item {
  display: flex; align-items: center; gap: .6rem;
  border-radius: var(--r-sm);
  padding: .5rem .6rem;
  font-size: .84rem;
  gap: .6rem;
}
.topbar .lang-menu .lang-item:hover { background: var(--blue-50); color: var(--navy); }
.topbar .lang-menu .lang-item.active,
.topbar .lang-menu .lang-item[aria-current="true"] {
  background: var(--blue-50);
  color: var(--navy);
  font-weight: 600;
}
.topbar .lang-menu .lang-item.active .flag-svg { box-shadow: 0 0 0 1px var(--blue); }

@media (max-width: 991.98px) {
  .topbar .tb-hide { display: none; }
  /* 44px-style touch target on small screens */
  .topbar .tb-social a { width: 36px; height: 36px; font-size: .95rem; }
  .topbar .lang-toggle { min-height: 36px; padding: .45rem .8rem; }
}
/* Below 400px the name would crowd the address and phone lines, so the flag
   carries the meaning on its own and the button stays a compact target. */
@media (max-width: 399.98px) {
  .topbar .lang-toggle-name { display: none; }
  .topbar .lang-toggle { padding: .45rem .55rem; }
}

/* ---------- 7. Navbar ---------- */
.navbar-shell {
  position: sticky;
  top: 0;
  z-index: 1030;
  background: rgba(255, 255, 255, .94);
  backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid var(--line);
  transition: box-shadow .35s var(--ease), background .35s var(--ease);
}
.navbar-shell.is-stuck { box-shadow: 0 10px 34px rgba(10, 37, 64, .11); background: rgba(255, 255, 255, .985); }

/* Hairline accent + reading-progress rule along the bottom of the bar */
.navbar-shell::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 2px;
  background: linear-gradient(90deg, var(--navy) 0%, var(--blue) 45%, var(--red) 100%);
  opacity: .85;
  transform: scaleX(var(--progress, 0));
  transform-origin: 0 50%;
  transition: transform .12s linear;
}

.navbar {
  padding-block: .9rem;
  min-height: 84px;
  transition: padding .35s var(--ease), min-height .35s var(--ease);
}
.navbar-shell.is-stuck .navbar { padding-block: .55rem; min-height: 68px; }

/* --- Brand --- */
.brand {
  display: flex;
  align-items: center;
  gap: .9rem;
  flex-shrink: 0;
  transition: transform .35s var(--ease);
}
.brand:hover { transform: translateX(2px); }
.brand img { height: 56px; width: auto; transition: height .35s var(--ease); }
.navbar-shell.is-stuck .brand img { height: 48px; }
.brand-txt { line-height: 1.15; display: block; }
.brand-name {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.06rem;
  color: var(--navy);
  letter-spacing: -.005em;
  line-height: 1.18;
  white-space: nowrap;
}
.brand-sub {
  display: block;
  font-family: var(--font-body);
  font-size: .63rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--red);
  font-weight: 700;
  margin-top: .2rem;
  white-space: nowrap;
}

/* --- Links --- */
.navbar-nav { gap: .3rem; }

.nav-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-family: var(--font-body);
  font-size: .9rem;
  font-weight: 600;
  letter-spacing: .015em;
  color: var(--navy);
  padding: .62rem .92rem !important;
  border-radius: 10px;
  white-space: nowrap;
  transition: color .25s var(--ease), background-color .25s var(--ease);
}
.nav-link::after {
  content: "";
  position: absolute;
  left: 50%; bottom: .2rem;
  height: 2px; width: 0;
  background: var(--red);
  border-radius: 2px;
  transform: translateX(-50%);
  transition: width .32s var(--ease);
}
.nav-link:hover { color: var(--blue); background: rgba(21, 101, 216, .06); }
.nav-link:hover::after { width: calc(100% - 1.84rem); }
.nav-link.active { color: var(--navy); background: rgba(21, 101, 216, .09); }
.nav-link.active::after { width: calc(100% - 1.84rem); }
.nav-link:focus-visible { background: rgba(21, 101, 216, .09); }
.dropdown-toggle::after {
  margin-left: .1rem;
  border-top-color: currentColor;
  opacity: .5;
  transition: transform .25s var(--ease), opacity .25s var(--ease);
}
.dropdown-toggle:hover::after,
.dropdown-toggle:focus::after { opacity: 1; }
.dropdown.show .dropdown-toggle::after,
.dropdown-toggle[aria-expanded="true"]::after { transform: rotate(180deg); opacity: 1; }

/* --- Dropdown --- */
.dropdown-menu {
  border: none;
  border-radius: 14px;
  box-shadow: 0 24px 60px rgba(10, 37, 64, .18);
  padding: .55rem;
  min-width: 302px;
  margin-top: .55rem !important;
  border-top: 3px solid var(--red);
  animation: ddIn .28s var(--ease);
}
@keyframes ddIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.dropdown-item {
  border-radius: 9px;
  padding: .62rem .85rem;
  font-family: var(--font-body);
  font-size: .875rem;
  font-weight: 500;
  line-height: 1.4;
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: .7rem;
  transition: background-color .2s var(--ease), color .2s var(--ease), padding-left .2s var(--ease);
}
.dropdown-item i { color: var(--blue); font-size: .95rem; flex-shrink: 0; transition: color .2s var(--ease); }
.dropdown-item:hover,
.dropdown-item:focus { background: var(--blue-50); color: var(--blue); padding-left: 1.05rem; }
.dropdown-item:hover i,
.dropdown-item:focus i { color: var(--red); }
.dropdown-divider { border-color: var(--line); margin: .4rem .5rem; opacity: 1; }

/* --- About sub navigation ---
   A long index needs grouping and a clear "you are here", otherwise nine
   flat links read as a wall and nobody can tell which section is open. */
.about-menu {
  min-width: 340px;
  padding: .5rem .5rem .6rem;
  border: 1px solid var(--line);
  border-top: 3px solid var(--red);
  border-radius: 16px;
  box-shadow: 0 26px 60px rgba(10, 37, 64, .2), 0 2px 8px rgba(10, 37, 64, .06);
  /* Nine items plus three labels is a tall panel. `--about-menu-max` is set by
     initAboutSubnav() to the room actually left under the navbar, because the
     navbar is sticky and starts well down the page on some pages (the gallery
     sits around 215px in), where a plain vh cap pushes the last items off the
     bottom of the screen. The vh value is only the pre-script fallback. */
  max-height: var(--about-menu-max, min(80vh, 660px));
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(21, 101, 216, .32) transparent;
}
.about-menu::-webkit-scrollbar { width: 9px; }
.about-menu::-webkit-scrollbar-track { background: transparent; }
.about-menu::-webkit-scrollbar-thumb {
  background: rgba(21, 101, 216, .28);
  border: 2px solid var(--white);
  border-radius: 99px;
}
.about-menu::-webkit-scrollbar-thumb:hover { background: rgba(21, 101, 216, .5); }

/* Caption at the top of the panel. */
.about-menu .dropdown-head {
  padding: .45rem .8rem .4rem;
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--red);
  white-space: nowrap;
}

/* Hairline plus a label that starts each block of links. */
.about-menu .dropdown-group {
  position: relative;
  margin: .45rem .35rem .3rem;
  padding: .5rem .45rem .1rem;
  border-top: 1px solid var(--line);
  font-size: .64rem;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: #78889c;
  white-space: nowrap;
}
.about-menu .dropdown-group::before {
  content: "";
  position: absolute;
  top: -.5px;
  left: .45rem;
  width: 26px;
  height: 2px;
  border-radius: 2px;
  background: var(--blue);
}

.about-menu .dropdown-item {
  position: relative;
  padding: .58rem .8rem .58rem 1.35rem;
  font-size: .875rem;
  font-weight: 500;
  gap: .7rem;
}
/* Accent rail that grows on hover, focus and for the current section. */
.about-menu .dropdown-item::before {
  content: "";
  position: absolute;
  left: .5rem;
  top: 50%;
  width: 3px;
  height: 0;
  border-radius: 3px;
  background: var(--red);
  transform: translateY(-50%);
  transition: height .22s var(--ease);
}
.about-menu .dropdown-item:hover::before,
.about-menu .dropdown-item:focus-visible::before,
.about-menu .dropdown-item.is-current::before { height: 58%; }

/* The section you are actually looking at. */
.about-menu .dropdown-item.is-current {
  background: rgba(21, 101, 216, .1);
  color: var(--navy);
  font-weight: 600;
  box-shadow: inset 0 0 0 1px rgba(21, 101, 216, .16);
}
.about-menu .dropdown-item.is-current i { color: var(--red); }

/* Chevron follows the menu state, whether opened by hover or by click. */
.navbar-nav .dropdown:hover > .dropdown-toggle::after,
.navbar-nav .dropdown:focus-within > .dropdown-toggle::after { opacity: 1; }
.navbar-nav .dropdown:hover > .dropdown-toggle,
.navbar-nav .dropdown:focus-within > .dropdown-toggle { color: var(--blue); }

/* --- Toggler --- */
.navbar-toggler {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: .55rem .7rem;
  color: var(--navy);
  transition: background-color .25s var(--ease), border-color .25s var(--ease);
}
.navbar-toggler:hover { background: var(--blue-50); border-color: rgba(21, 101, 216, .3); }
.navbar-toggler:focus { box-shadow: none; }
.navbar-toggler i { font-size: 1.65rem; line-height: 1; display: block; }

/* --- Nav CTA --- */
.btn-cta-nav {
  background: var(--red);
  color: #fff;
  font-size: .78rem;
  letter-spacing: .07em;
  padding: .72rem 1.5rem;
  margin-left: .6rem;
  box-shadow: 0 8px 20px rgba(200, 29, 37, .3);
}
.btn-cta-nav:hover { background: var(--red-600); color: #fff; transform: translateY(-2px); }

/* --- Responsive --- */
@media (max-width: 1199.98px) {
  /* Keep brand + 6 links + CTA on one line inside the narrower container. */
  .brand-name { font-size: .95rem; }
  .nav-link { font-size: .855rem; padding: .58rem .62rem !important; }
  .nav-link:hover::after,
  .nav-link.active::after { width: calc(100% - 1.24rem); }
  .navbar-nav { gap: .22rem; }
  .btn-cta-nav { font-size: .74rem; padding: .66rem 1.05rem; margin-left: .3rem; }
}
@media (max-width: 991.98px) {
  .navbar { min-height: 0; padding-block: .7rem; }
  .navbar-shell.is-stuck .navbar { padding-block: .7rem; min-height: 0; }
  .brand img, .navbar-shell.is-stuck .brand img { height: 48px; }

  .navbar-collapse {
    background: var(--white);
    margin-top: .85rem;
    border: 1px solid var(--line);
    border-radius: 16px;
    box-shadow: 0 24px 60px rgba(10, 37, 64, .16);
    padding: .6rem .75rem 1rem;
    max-height: 74vh;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .navbar-nav { gap: .1rem; }
  .nav-link {
    padding: .82rem .9rem !important;
    border-radius: 10px;
    font-size: .95rem;
    border-bottom: 1px solid var(--line);
  }
  .nav-link::after { display: none; }
  .nav-link:hover, .nav-link.active { background: var(--blue-50); }
  .nav-link.active { color: var(--red); box-shadow: inset 3px 0 0 var(--red); border-radius: 0 10px 10px 0; }

  .dropdown-menu {
    box-shadow: none;
    border: 0;
    border-left: 2px solid rgba(21, 101, 216, .18);
    background: var(--cream);
    border-radius: 0 10px 10px 0;
    margin: .35rem 0 .5rem .8rem;
    padding: .4rem;
    min-width: 0;
    animation: none;
  }

  /* Group labels and the scroll cap matter more here, where the panel is
     inside an already scrolling menu. */
  .about-menu {
    padding: .3rem .3rem .45rem;
    border-left: 2px solid rgba(21, 101, 216, .28);
    max-height: none;
    overflow: visible;
  }
  .about-menu .dropdown-head { padding: .4rem .7rem .3rem; }
  .about-menu .dropdown-group { margin: .35rem .25rem .25rem; padding: .45rem .35rem .05rem; }
  /* Comfortable thumb height on a touch screen. */
  .about-menu .dropdown-item { padding: .82rem .8rem .82rem 1.3rem; font-size: .925rem; }
  .about-menu .dropdown-item::before { left: .45rem; }
  .dropdown-item { padding: .72rem .8rem; font-size: .9rem; }
  .btn-cta-nav { width: 100%; justify-content: center; margin: 1rem 0 .2rem; padding: .85rem 1.5rem; }
}
@media (max-width: 575.98px) {
  .brand img, .navbar-shell.is-stuck .brand img { height: 42px; }
  .brand { gap: .7rem; }
  .brand-name { font-size: .88rem; }
  .brand-sub { font-size: .55rem; letter-spacing: .16em; margin-top: .14rem; }
}

/* ---------- 8. Page hero (inner pages) ---------- */
.page-hero {
  position: relative;
  padding-block: clamp(70px, 9vw, 118px);
  background-color: var(--navy);
  background-image:
    url("../img/hero-pattern.svg"),
    radial-gradient(1000px 520px at 10% 0%, rgba(21, 101, 216, .40), transparent 62%),
    radial-gradient(820px 500px at 100% 100%, rgba(200, 29, 37, .28), transparent 62%),
    linear-gradient(160deg, var(--navy-900), var(--navy) 60%, var(--navy-800));
  background-size: 130px 130px, auto, auto, auto;
  background-position: center;
  background-repeat: repeat, no-repeat, no-repeat, no-repeat;
  color: #fff;
  overflow: hidden;
  text-align: center;
}
.page-hero::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 90px;
  background: var(--white);
  clip-path: ellipse(75% 100% at 50% 100%);
}
.page-hero .container-x { position: relative; z-index: 2; }
.page-hero h1 { color: #fff; margin-bottom: .6rem; }
.page-hero p { color: rgba(255, 255, 255, .8); max-width: 720px; margin-inline: auto; font-size: 1.08rem; }

/* Compact hero for pages whose banner carries only a short line of text */
.page-hero-compact { padding-block: clamp(36px, 3.8vw, 50px); }
.page-hero-compact::after { height: 44px; }
.page-hero-compact .crumbs { margin-bottom: .45rem; font-size: .72rem; }
.page-hero-compact h1 {
  font-size: clamp(1.65rem, 1.02rem + 1.8vw, 2.3rem);
  margin-bottom: .3rem;
}
.page-hero-compact p {
  font-size: .92rem;
  line-height: 1.55;
  max-width: 560px;
}
.page-hero-compact .divider-ornament { display: none; }
.page-hero-compact .btn { margin-top: .9rem; padding: .5rem 1.1rem; font-size: .78rem; }

.crumbs {
  font-size: .78rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .6);
  margin-bottom: 1rem;
}
.crumbs a { color: var(--blue-300); }
.crumbs a:hover { color: #fff; }
.crumbs .sep { margin-inline: .5rem; color: var(--red-300); }

/* ---------- 9. Home hero carousel ---------- */
.hero {
  position: relative;
  background: var(--navy-900);
  overflow: hidden;
}
/* Do NOT set `display` here: Bootstrap relies on `display: none` to hide inactive
   slides. Vertical centring lives on the inner `.container-x` instead. */
.hero .carousel-item { min-height: min(88vh, 760px); }
.hero-slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transform: scale(1.06);
  transition: transform 8s linear;
}
.carousel-item.active .hero-slide { transform: scale(1); }
.hero-slide::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(100deg, rgba(7, 26, 46, .95) 0%, rgba(10, 37, 64, .84) 42%, rgba(10, 37, 64, .35) 78%),
    linear-gradient(0deg, rgba(200, 29, 37, .18), transparent 55%);
}
.hero .container-x {
  position: relative;
  z-index: 3;
  min-height: min(88vh, 760px);
  display: flex;
  align-items: center;
  padding-block: clamp(72px, 8vh, 120px);
}
.hero-copy { max-width: 820px; color: rgba(255, 255, 255, .82); }
.hero-copy h1 { color: #fff; margin-bottom: 1rem; font-size: clamp(2.1rem, 4.3vw, 3.3rem); }
.hero-copy h1 em { font-style: italic; color: var(--blue-300); }
.hero-copy p { font-size: 1.12rem; max-width: 640px; }

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .22);
  backdrop-filter: blur(6px);
  color: #fff;
  padding: .45rem 1.1rem .45rem .5rem;
  border-radius: 999px;
  font-size: .76rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  margin-bottom: 1.4rem;
}
.hero-badge span.dot {
  width: 26px; height: 26px;
  display: grid; place-items: center;
  background: var(--red);
  border-radius: 50%;
  font-size: .8rem;
}

.hero-actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.9rem; }

.hero-float-card {
  position: absolute;
  right: clamp(1rem, 4vw, 4rem);
  bottom: clamp(1.5rem, 5vw, 4rem);
  z-index: 4;
  background: rgba(255, 255, 255, .96);
  border-radius: var(--r-lg);
  padding: 1.4rem 1.6rem;
  box-shadow: var(--sh-lg);
  border-left: 4px solid var(--red);
  max-width: 290px;
  display: none;
}
.hero-float-card h4 { font-size: 1.05rem; margin-bottom: .25rem; }
.hero-float-card p { font-size: .85rem; color: var(--muted); margin: 0; }
.hero-float-card .hfc-top { display: flex; align-items: center; gap: .6rem; margin-bottom: .5rem; }
.hero-float-card .hfc-icon {
  width: 38px; height: 38px;
  border-radius: 10px;
  display: grid; place-items: center;
  background: var(--blue-50);
  color: var(--blue);
}
@media (min-width: 992px) { .hero-float-card { display: block; } }

.hero .carousel-indicators { margin-bottom: 1.4rem; gap: .4rem; }
.hero .carousel-indicators [data-bs-target] {
  width: 34px; height: 4px;
  border: none;
  border-radius: 4px;
  background: rgba(255, 255, 255, .4);
  opacity: 1;
  margin-inline: 3px;
  transition: all .3s var(--ease);
}
.hero .carousel-indicators .active { background: var(--red); width: 54px; }
.hero .carousel-control-prev, .hero .carousel-control-next { width: 8%; opacity: .55; }
.hero .carousel-control-prev:hover, .hero .carousel-control-next:hover { opacity: 1; }
.hero .carousel-control-prev-icon, .hero .carousel-control-next-icon {
  width: 46px; height: 46px;
  background-size: 42%;
  border: 1px solid rgba(255, 255, 255, .3);
  border-radius: 50%;
}
@media (max-width: 767.98px) {
  .hero .carousel-item,
  .hero .carousel-item > .container-x { min-height: 78vh; }
  .hero .carousel-control-prev, .hero .carousel-control-next { display: none; }
}

/* Marquee strip */
.marquee-strip {
  background: var(--red);
  color: #fff;
  padding-block: .7rem;
  overflow: hidden;
  white-space: nowrap;
}
.marquee-strip .mq-track {
  display: inline-block;
  animation: mq 32s linear infinite;
}
.marquee-strip span {
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  margin-inline: 1.4rem;
}
.marquee-strip i { margin-inline: 1.4rem; opacity: .7; }
@keyframes mq { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---------- 10. Cards ---------- */
.card-soft {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  height: 100%;
  transition: all .4s var(--ease);
  position: relative;
}
.card-soft:hover {
  transform: translateY(-8px);
  box-shadow: var(--sh-lg);
  border-color: transparent;
}
.card-soft .card-body { padding: 1.7rem 1.6rem; }

.card-media { position: relative; overflow: hidden; background: var(--navy); }
.card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); display: block; }
.card-soft:hover .card-media img { transform: scale(1.07); }
.card-media.ratio-4x3 { aspect-ratio: 4 / 3; }
.card-media.ratio-16x9 { aspect-ratio: 16 / 9; }
.card-media.ratio-1x1 { aspect-ratio: 1 / 1; }

.card-tag {
  position: absolute;
  top: 1rem; left: 1rem;
  background: var(--red);
  color: #fff;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: .35rem .85rem;
  border-radius: 999px;
  z-index: 2;
}
.card-tag.blue { background: var(--blue); }

.card-body h3 { margin-bottom: .55rem; }
.card-body p { font-size: .94rem; }
.card-foot {
  margin-top: 1.1rem;
  padding-top: 1rem;
  border-top: 1px dashed var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

/* Icon card (pillar) */
.icon-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 2.1rem 1.8rem;
  height: 100%;
  position: relative;
  overflow: hidden;
  transition: all .4s var(--ease);
}
.icon-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: linear-gradient(90deg, var(--red), var(--blue));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .45s var(--ease);
}
.icon-card:hover { transform: translateY(-8px); box-shadow: var(--sh-lg); border-color: transparent; }
.icon-card:hover::before { transform: scaleX(1); }

.icon-badge {
  width: 62px; height: 62px;
  border-radius: 18px;
  display: grid; place-items: center;
  font-size: 1.6rem;
  margin-bottom: 1.2rem;
  background: var(--blue-50);
  color: var(--blue);
  transition: all .4s var(--ease);
}
.icon-card:hover .icon-badge { background: var(--red); color: #fff; transform: rotate(-6deg); }
.icon-badge.red { background: var(--red-50); color: var(--red); }
.icon-badge.navy { background: rgba(10, 37, 64, .07); color: var(--navy); }

.icon-card h3 { font-size: 1.32rem; }
.icon-card p { font-size: .95rem; }

/* Dark icon card */
.section-dark .icon-card {
  background: rgba(255, 255, 255, .05);
  border-color: rgba(255, 255, 255, .12);
  backdrop-filter: blur(6px);
}
.section-dark .icon-card h3 { color: #fff; }
.section-dark .icon-card p { color: rgba(255, 255, 255, .74); }
.section-dark .icon-badge { background: rgba(255, 255, 255, .1); color: #fff; }
.section-dark .icon-card:hover .icon-badge { background: var(--red); }

/* ---------- 11. Split feature block ---------- */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.split.reverse .split-media { order: 2; }
@media (max-width: 991.98px) {
  .split { grid-template-columns: 1fr; gap: 2.2rem; }
  .split.reverse .split-media { order: 0; }
}

.frame {
  position: relative;
  border-radius: var(--r-lg);
  background: var(--navy);
  box-shadow: var(--sh-lg);
  isolation: isolate;
  z-index: 0;
}
.frame img {
  width: 100%;
  display: block;
  border-radius: var(--r-lg);
}
.frame::before {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: var(--r-lg);
  pointer-events: none;
  z-index: 2;
}
.frame-accent {
  position: absolute;
  inset: auto -20px -20px auto;
  width: 58%; height: 58%;
  border: 3px solid var(--red);
  border-radius: var(--r-lg);
  z-index: -1;
}
/* The accent deliberately bleeds 20px past the frame, which pushes past the
   viewport once the frame sits in the outer split column. Only keep it where
   there is genuinely room. */
@media (max-width: 1399.98px) { .frame-accent { display: none; } }
.frame-badge {
  position: absolute;
  left: -18px; bottom: -18px;
  background: var(--white);
  border-radius: var(--r-md);
  box-shadow: var(--sh-md);
  padding: 1rem 1.3rem;
  display: flex;
  align-items: center;
  gap: .8rem;
  z-index: 3;
}
.frame-badge .n {
  font-family: var(--font-display);
  font-size: 1.9rem;
  font-weight: 700;
  color: var(--red);
  line-height: 1;
}
.frame-badge small { font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); display: block; }
@media (max-width: 575.98px) {
  .frame-accent { display: none; }
  .frame-badge { left: 12px; bottom: 12px; padding: .7rem 1rem; }
}

.check-list { list-style: none; padding: 0; margin: 1.4rem 0 0; }
.check-list li {
  position: relative;
  padding-left: 2.1rem;
  margin-bottom: .75rem;
  font-size: .96rem;
}
.check-list li::before {
  content: "\f26e"; /* bootstrap icon check2-circle */
  font-family: "bootstrap-icons";
  position: absolute;
  left: 0; top: .1rem;
  color: var(--red);
  font-size: 1.05rem;
}
.section-dark .check-list li { color: rgba(255, 255, 255, .82); }

/* ---------- 12. Stats ---------- */
.stats-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
@media (max-width: 991.98px) { .stats-row { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 575.98px) { .stats-row { grid-template-columns: 1fr; } }

.stat {
  background: var(--white);
  padding: 2rem 1.4rem;
  text-align: center;
  transition: background .3s var(--ease);
}
.stat:hover { background: var(--blue-50); }
.stat .num {
  font-family: var(--font-quote);
  font-size: clamp(2.6rem, 4.6vw, 3.4rem);
  font-weight: 600;
  color: var(--navy);
  line-height: 1;
  letter-spacing: -.01em;
  display: block;
}
.stat .num .suf { color: var(--red); }
.stat .lbl {
  font-size: .74rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: .6rem;
  display: block;
  font-weight: 600;
}

.section-dark .stats-row { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .12); }
.section-dark .stat { background: transparent; }
.section-dark .stat:hover { background: rgba(255, 255, 255, .05); }
.section-dark .stat .num { color: #fff; }
.section-dark .stat .lbl { color: rgba(255, 255, 255, .6); }

/* ---------- 13. Process steps ---------- */
.steps { position: relative; display: grid; grid-template-columns: repeat(5, 1fr); gap: 1.4rem; }
.steps::before {
  content: "";
  position: absolute;
  top: 27px; left: 6%; right: 6%;
  height: 2px;
  background: repeating-linear-gradient(90deg, var(--blue) 0 10px, transparent 10px 18px);
  opacity: .35;
  z-index: 0;
}
@media (max-width: 991.98px) {
  .steps { grid-template-columns: repeat(2, 1fr); }
  .steps::before { display: none; }
}
@media (max-width: 575.98px) { .steps { grid-template-columns: 1fr; } }

.step { position: relative; z-index: 1; text-align: center; }
.step .n {
  width: 56px; height: 56px;
  margin: 0 auto 1.1rem;
  border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(140deg, var(--blue), var(--navy));
  box-shadow: 0 0 0 7px var(--white), 0 8px 20px rgba(10, 37, 64, .18);
  position: relative;
  transition: all .35s var(--ease);
}
.step:hover .n { background: linear-gradient(140deg, var(--red), var(--red-600)); transform: scale(1.08); }
.section-dark .step .n { box-shadow: 0 0 0 7px #0d2c4d, 0 8px 20px rgba(0, 0, 0, .3); }
.step h4 { font-size: 1.08rem; margin-bottom: .4rem; }
.step p { font-size: .89rem; color: var(--body); }
.section-dark .step p { color: rgba(255, 255, 255, .7); }

/* Vertical timeline */
.timeline { position: relative; padding-left: 0; }
.timeline::before {
  content: "";
  position: absolute;
  left: 21px; top: 8px; bottom: 8px;
  width: 2px;
  background: linear-gradient(var(--red), var(--blue));
  opacity: .3;
}
.tl-item { position: relative; padding-left: 66px; padding-bottom: 2.6rem; }
.tl-item:last-child { padding-bottom: 0; }
.tl-item .dot {
  position: absolute;
  left: 0; top: 0;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--white);
  border: 2px solid var(--blue);
  color: var(--blue);
  display: grid; place-items: center;
  font-size: 1.1rem;
  z-index: 1;
  transition: all .35s var(--ease);
}
.tl-item:hover .dot { background: var(--red); border-color: var(--red); color: #fff; transform: scale(1.06); }
.tl-year {
  display: inline-block;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: .3rem;
}
.tl-item h3 { font-size: 1.28rem; margin-bottom: .5rem; }
.tl-item p { font-size: .95rem; }

/* ---------- 14. Feature / spec list ---------- */
.spec-list { list-style: none; padding: 0; margin: 1.2rem 0 0; }
.spec-list li {
  display: flex;
  gap: .7rem;
  align-items: flex-start;
  padding: .5rem 0;
  font-size: .94rem;
  border-bottom: 1px dashed rgba(255, 255, 255, .16);
}
.spec-list li:last-child { border-bottom: none; }
.spec-list i { color: var(--red-300); margin-top: .28rem; }
.section-light-spec .spec-list li { border-bottom-color: var(--line); }
.section-light-spec .spec-list i { color: var(--red); }

.chip {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  background: var(--blue-50);
  color: var(--navy);
  border: 1px solid rgba(21, 101, 216, .16);
  border-radius: 999px;
  padding: .3rem .85rem;
  font-size: .78rem;
  font-weight: 600;
  margin: .25rem .3rem .25rem 0;
}
.chip i { color: var(--blue); }
.chip.red { background: var(--red-50); border-color: rgba(200, 29, 37, .18); }
.chip.red i { color: var(--red); }

/* ---------- 15. Team ---------- */
.team-card { text-align: center; }
.team-card .card-media { aspect-ratio: 1 / 1.12; }
.team-card .card-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(10, 37, 64, .55), transparent 55%);
  opacity: 0;
  transition: opacity .4s var(--ease);
}
.team-card:hover .card-media::after { opacity: 1; }
.team-card .role {
  display: inline-block;
  margin-top: .9rem;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--red);
}
.team-card h3 { font-size: 1.2rem; margin: .35rem 0 .6rem; }
.team-card p { font-size: .88rem; color: var(--body); }
.team-card .card-body { padding: 0 1.5rem 1.7rem; }

/* ---------- 16. Testimonials ---------- */
.quote-card {
  background: var(--white);
  border-radius: var(--r-lg);
  padding: 2.2rem 2rem;
  box-shadow: var(--sh-md);
  position: relative;
  border: 1px solid var(--line);
}
.quote-card .qm {
  position: absolute;
  top: -22px; left: 26px;
  width: 52px; height: 52px;
  border-radius: 50%;
  background: var(--red);
  color: #fff;
  display: grid; place-items: center;
  font-size: 1.5rem;
  box-shadow: var(--sh-red);
}
.quote-card p {
  font-family: var(--font-quote);
  font-style: italic;
  font-size: 1.32rem;
  color: var(--navy);
  line-height: 1.55;
  letter-spacing: .002em;
}
.quote-card .who { display: flex; align-items: center; gap: .9rem; margin-top: 1.4rem; padding-top: 1.2rem; border-top: 1px solid var(--line); }
.quote-card .av {
  width: 46px; height: 46px;
  border-radius: 50%;
  background: linear-gradient(140deg, var(--blue), var(--navy));
  color: #fff;
  display: grid; place-items: center;
  font-weight: 700;
  font-size: 1rem;
}
.quote-card .who small { display: block; color: var(--muted); font-size: .78rem; }

.testi .carousel-indicators { position: static; margin: 1.8rem 0 0; gap: .35rem; }
.testi .carousel-indicators [data-bs-target] {
  width: 10px; height: 10px;
  border: none;
  border-radius: 50%;
  background: var(--line);
  opacity: 1;
  margin-inline: 3px;
  transition: all .3s var(--ease);
}
.testi .carousel-indicators .active { background: var(--red); width: 30px; border-radius: 10px; }

/* ---------- 16b. Testimonials popup ---------- */
/* The carousel can now show a real photo, so the avatar has to clip one. */
.quote-card .av { overflow: hidden; padding: 0; }
.quote-card .av img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Big photo on the in-page carousel card, bleeding to the card edges and
   clamped so a tall portrait or tiny landscape never dominates the slide. */
.quote-card .q-photo {
  margin: -2.2rem -2rem 1.4rem;
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  overflow: hidden;
  background: var(--navy);
}
.quote-card .q-photo img {
  width: 100%;
  height: clamp(220px, 38vh, 340px);
  object-fit: cover;
  display: block;
}
@media (max-width: 575.98px) {
  .quote-card .q-photo { height: 220px; }
  .quote-card .q-photo img { height: 220px; }
}

/* Floating quote icon, parked between back-to-top and WhatsApp. */
.fab.tsti {
  background: linear-gradient(140deg, var(--navy), var(--blue));
  border: none;
  cursor: pointer;
  padding: 0;
  font-family: inherit;
}
.fab.tsti:hover { background: linear-gradient(140deg, var(--navy), var(--blue)); }
.fab-count {
  position: absolute;
  top: -3px;
  right: -3px;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--red);
  color: #fff;
  font-size: .66rem;
  font-weight: 700;
  line-height: 20px;
  text-align: center;
  box-shadow: 0 2px 6px rgba(10, 37, 64, .3);
  border: 2px solid #fff;
}

/* Wide enough that three cards sit side by side on a desktop: 1040px minus
   the 1.9rem body padding leaves 979px, and three 280px columns plus the two
   1.1rem gaps need 875px. Anything narrower drops to two per row. */
.tst-modal .modal-dialog { max-width: 1040px; }
.tst-modal .modal-content {
  border: none;
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--sh-lg);
}
.tst-modal .modal-header {
  align-items: flex-start;
  gap: 1rem;
  background: linear-gradient(135deg, var(--navy), var(--blue));
  color: #fff;
  border: none;
  padding: 1.8rem 1.9rem 1.5rem;
}
.tst-modal-eyebrow {
  display: block;
  font-family: var(--font-body);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .72);
  margin-bottom: .45rem;
}
.tst-modal .modal-title {
  font-family: var(--font-display);
  font-size: 1.6rem;
  line-height: 1.2;
  color: #fff;
  margin: 0;
}
.tst-modal .modal-body { padding: 1.9rem; background: #f7fafd; }
.tst-modal .modal-footer {
  background: #fff;
  border: none;
  padding: 1rem 1.9rem;
  justify-content: space-between;
}
.tst-modal-cta {
  font-family: var(--font-body);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--navy);
  text-decoration: none;
  border-bottom: 2px solid var(--red);
  padding-bottom: 2px;
}
.tst-modal-cta:hover { color: var(--red); }

/* auto-fit rather than auto-fill: with two testimonials the spare track
   collapses and the cards stretch to fill the dialog instead of leaving a
   hole on the right. */
.tst-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.1rem;
}
.tst-card {
  position: relative;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 1.7rem 1.5rem 1.4rem;
  box-shadow: var(--sh-md);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.tst-card:hover { transform: translateY(-4px); box-shadow: var(--sh-lg); }
.tst-quote {
  position: absolute;
  top: -16px;
  left: 20px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--red);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 1.05rem;
  box-shadow: var(--sh-red);
}
.tst-card blockquote {
  font-family: var(--font-quote);
  font-style: italic;
  font-size: 1.04rem;
  line-height: 1.6;
  color: var(--navy);
  margin: 0 0 1.1rem;
}
.tst-who {
  display: flex;
  align-items: center;
  gap: .8rem;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
}
.tst-who strong { display: block; color: var(--navy); font-size: .95rem; }
.tst-who small { display: block; color: var(--muted); font-size: .78rem; }
.tst-av {
  flex: none;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  overflow: hidden;
  background: linear-gradient(140deg, var(--blue), var(--navy));
  color: #fff;
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 1rem;
}
.tst-av img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* An uploaded photo is the star of the card: it bleeds to the card's top
   corners and shows large, so every visitor can see it. Cards without a
   photo keep the compact initials avatar below. */
.tst-photo {
  margin: -1.7rem -1.5rem 1.1rem;
  border-radius: var(--r-md) var(--r-md) 0 0;
  overflow: hidden;
  background: var(--navy);
}
.tst-photo img {
  width: 100%;
  height: 230px;
  object-fit: cover;
  display: block;
}

@media (max-width: 576px) {
  .tst-modal .modal-header { padding: 1.4rem 1.2rem 1.2rem; }
  .tst-modal .modal-title { font-size: 1.28rem; }
  .tst-modal .modal-body { padding: 1.4rem 1.1rem; }
  .tst-modal .modal-footer { padding: .9rem 1.2rem; }
  .tst-grid { grid-template-columns: 1fr; }
  .tst-card { padding: 1.5rem 1.2rem 1.2rem; }
  .tst-photo { margin: -1.5rem -1.2rem 1rem; height: 200px; }
  .tst-photo img { height: 200px; }
}

/* ---------- 17. Partners ---------- */
.partner-strip {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1rem;
  align-items: center;
}
@media (max-width: 991.98px) { .partner-strip { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 575.98px) { .partner-strip { grid-template-columns: repeat(2, 1fr); } }

.partner {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  min-height: 132px;
  padding: .875rem .75rem .75rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .625rem;
  transition: all .35s var(--ease);
}

/* The logo sits in its own fixed height box. Giving the image a percentage
   height against an auto sized parent let it size itself from the intrinsic
   width instead, so square logos grew to 153px and spilled out of the tile.
   Bounding the box and letting the image fit inside keeps every logo inside. */
.partner-logo {
  width: 100%;
  height: 58px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.partner img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

.partner-name {
  font-size: .7rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: .04em;
  text-align: center;
  color: var(--body);
  overflow-wrap: anywhere;
  hyphens: auto;
}

.partner:hover {
  transform: translateY(-5px);
  box-shadow: var(--sh-md);
  border-color: var(--blue-300);
}
.partner:hover .partner-name { color: var(--blue-600); }

/* ---------- 18. Video cards ---------- */
.video-card { position: relative; border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--sh-md); display: block; background: var(--navy); }
.video-card img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; transition: transform .6s var(--ease); }
.video-card:hover img { transform: scale(1.06); }
.video-card .play {
  position: absolute;
  inset: 0;
  display: grid; place-items: center;
}
.video-card .play span {
  width: 62px; height: 62px;
  border-radius: 50%;
  background: rgba(200, 29, 37, .92);
  color: #fff;
  display: grid; place-items: center;
  font-size: 1.4rem;
  box-shadow: 0 0 0 0 rgba(200, 29, 37, .55);
  transition: all .35s var(--ease);
}
.video-card:hover .play span { transform: scale(1.1); box-shadow: 0 0 0 14px rgba(200, 29, 37, .22); }
.video-card .cap {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 2.4rem 1.1rem .95rem;
  background: linear-gradient(0deg, rgba(7, 26, 46, .92), transparent);
  color: #fff;
}
.video-card .cap h4 { color: #fff; font-size: 1rem; margin: 0 0 .2rem; }
.video-card .cap small { color: rgba(255, 255, 255, .7); font-size: .76rem; }

/* ---------- 19. Gallery ---------- */
.filter-bar { display: flex; flex-wrap: wrap; gap: .55rem; justify-content: center; }
.filter-btn {
  background: var(--white);
  border: 1px solid var(--line);
  color: var(--navy);
  border-radius: 999px;
  padding: .5rem 1.25rem;
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  transition: all .3s var(--ease);
}
.filter-btn:hover { border-color: var(--blue); color: var(--blue); }
.filter-btn.active { background: var(--navy); border-color: var(--navy); color: #fff; box-shadow: var(--sh-md); }
.filter-btn .cnt {
  display: inline-block;
  margin-left: .4rem;
  padding: 0 .38rem;
  border-radius: 999px;
  background: rgba(10, 37, 64, .08);
  font-size: .72rem;
  font-weight: 700;
  line-height: 1.5;
  vertical-align: 1px;
}
.filter-btn.active .cnt { background: rgba(255, 255, 255, .22); }

/* Visually hidden but available to screen readers */
.visually-hidden,
.visually-hidden-focusable:not(:focus):not(:focus-within) {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.gallery-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
@media (max-width: 1199.98px) { .gallery-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 767.98px) { .gallery-grid { grid-template-columns: repeat(2, 1fr); gap: .7rem; } }
@media (max-width: 420px) { .gallery-grid { grid-template-columns: 1fr; } }

.g-item {
  position: relative;
  border-radius: var(--r-md);
  overflow: hidden;
  display: block;
  aspect-ratio: 1 / 1;
  background: var(--navy);
  box-shadow: var(--sh-sm);
}
.g-item.tall { grid-row: span 2; aspect-ratio: 1 / 2.04; }
.g-item.wide { grid-column: span 2; aspect-ratio: 2 / 1; }
.g-item img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease), filter .4s var(--ease); }
.g-item:hover img { transform: scale(1.08); }
.g-item .ov {
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(7, 26, 46, .92), rgba(7, 26, 46, .12) 65%);
  opacity: 0;
  transition: opacity .35s var(--ease);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 1.1rem;
  color: #fff;
}
.g-item:hover .ov { opacity: 1; }
.g-item .ov .ic {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--red);
  display: grid; place-items: center;
  margin-bottom: .6rem;
  transform: translateY(10px);
  opacity: 0;
  transition: all .35s var(--ease);
}
.g-item:hover .ov .ic { transform: none; opacity: 1; }
.g-item .ov h5 { color: #fff; font-family: var(--font-display); font-size: 1rem; margin: 0; }
.g-item .ov small { color: var(--blue-300); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; }
.g-item.hide { display: none; }

/* Lightbox */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: rgba(5, 15, 26, .95);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  backdrop-filter: blur(4px);
}
.lightbox.show { display: flex; animation: lbIn .3s var(--ease); }
@keyframes lbIn { from { opacity: 0; } to { opacity: 1; } }
.lightbox figure { max-width: min(1000px, 100%); text-align: center; margin: 0; }
.lightbox img {
  max-width: 100%;
  max-height: 78vh;
  object-fit: contain;
  border-radius: var(--r-md);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .6);
}
.lightbox figcaption { color: #fff; margin-top: 1rem; font-family: var(--font-display); font-size: 1.05rem; }
.lightbox figcaption small { display: block; font-family: var(--font-body); color: var(--blue-300); font-size: .76rem; letter-spacing: .14em; text-transform: uppercase; margin-top: .3rem; }
.lb-btn {
  position: absolute;
  width: 48px; height: 48px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .25);
  background: rgba(255, 255, 255, .08);
  color: #fff;
  font-size: 1.3rem;
  display: grid; place-items: center;
  transition: all .25s var(--ease);
}
.lb-btn:hover { background: var(--red); border-color: var(--red); }
.lb-close { top: 1.4rem; right: 1.4rem; }
.lb-prev { left: 1.4rem; top: 50%; transform: translateY(-50%); }
.lb-next { right: 1.4rem; top: 50%; transform: translateY(-50%); }
@media (max-width: 575.98px) {
  .lb-prev { left: .5rem; }
  .lb-next { right: .5rem; }
  .lb-close { top: .7rem; right: .7rem; }
  .lb-btn { width: 40px; height: 40px; font-size: 1.1rem; }
}

/* ---------- 20. Forms ---------- */
.form-card {
  background: var(--white);
  border-radius: var(--r-xl);
  padding: clamp(1.6rem, 3vw, 2.6rem);
  box-shadow: var(--sh-lg);
  border-top: 4px solid var(--red);
}

.form-label {
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--navy);
  margin-bottom: .4rem;
}
.form-label .req { color: var(--red); }

.form-control, .form-select {
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: .8rem 1rem;
  font-size: .94rem;
  color: var(--ink);
  background: var(--cream);
  transition: all .25s var(--ease);
}
.form-control:focus, .form-select:focus {
  background: var(--white);
  border-color: var(--blue);
  box-shadow: 0 0 0 4px rgba(21, 101, 216, .12);
}
.form-control::placeholder { color: #a9b6c4; }
textarea.form-control { min-height: 150px; resize: vertical; }
.form-control.is-invalid, .form-select.is-invalid { border-color: var(--red); background: var(--red-50); }
.form-control.is-invalid:focus { box-shadow: 0 0 0 4px rgba(200, 29, 37, .12); }
.invalid-feedback { font-size: .78rem; color: var(--red); font-weight: 600; }

.form-note { font-size: .8rem; color: var(--muted); }
.form-check-input:checked { background-color: var(--red); border-color: var(--red); }
.form-check-input:focus { box-shadow: 0 0 0 4px rgba(200, 29, 37, .15); border-color: var(--red); }
.form-check-label { font-size: .85rem; }

/* ---------- 20.1 Contact form (compact, icon fields) ---------- */
.form-card--tight { padding: clamp(1.3rem, 2.2vw, 1.9rem); }

.contact-form .form-label { font-size: .7rem; margin-bottom: .3rem; letter-spacing: .08em; }
.contact-form .form-note { font-size: .75rem; }

.cf-group + .cf-group {
  margin-top: 1.05rem;
  padding-top: 1.05rem;
  border-top: 1px dashed var(--line);
}
.cf-group-title {
  display: inline-block;
  margin-bottom: .65rem;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--blue);
}

.cf-field { position: relative; }
.cf-ic {
  position: absolute;
  left: .7rem;
  top: 50%;
  z-index: 2;
  transform: translateY(-50%);
  font-size: .8rem;
  color: #9db0c4;
  pointer-events: none;
  transition: color .25s var(--ease);
}
.cf-field:focus-within .cf-ic { color: var(--blue); }
.cf-field:has(.is-invalid) .cf-ic { color: var(--red); }
.cf-field--area .cf-ic { top: .72rem; transform: none; }

.contact-form .form-control,
.contact-form .form-select {
  padding: .5rem .8rem .5rem 2.2rem;
  font-size: .88rem;
  background: var(--white);
  border-color: var(--line);
}
.contact-form .form-select { padding-right: 2rem; }
.contact-form textarea.form-control { min-height: 98px; padding-top: .62rem; }
.contact-form .form-control:hover,
.contact-form .form-select:hover { border-color: #c6d5e4; }

.contact-form .form-check { padding-left: 1.5rem; }
.contact-form .form-check-input { width: 1.05rem; height: 1.05rem; margin-top: .22rem; }
.contact-form .form-check-label { font-size: .8rem; line-height: 1.5; }

.contact-form .btn-primary {
  padding: .58rem 1.3rem;
  font-size: .86rem;
  letter-spacing: .02em;
}

.alert-box {
  display: none;
  border-radius: var(--r-md);
  padding: 1rem 1.2rem;
  font-size: .9rem;
  font-weight: 500;
  margin-bottom: 1.2rem;
  border-left: 4px solid;
}
.alert-box.show { display: block; animation: ddIn .35s var(--ease); }
.alert-box.ok { background: #e8f7ef; border-color: #1e9e5a; color: #14663c; }
.alert-box.err { background: var(--red-50); border-color: var(--red); color: var(--red-600); }

/* ---------- 21. Info cards / contact ---------- */
.info-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-left: 4px solid var(--blue);
  border-radius: var(--r-md);
  padding: 1.4rem 1.5rem;
  height: 100%;
  transition: all .35s var(--ease);
}
.info-card:hover { transform: translateY(-5px); box-shadow: var(--sh-md); border-left-color: var(--red); }
.info-card .ic {
  width: 44px; height: 44px;
  border-radius: 12px;
  display: grid; place-items: center;
  background: var(--blue-50);
  color: var(--blue);
  font-size: 1.15rem;
  margin-bottom: .9rem;
  transition: all .3s var(--ease);
}
.info-card:hover .ic { background: var(--red); color: #fff; }
.info-card h5 { font-size: 1.02rem; margin-bottom: .35rem; }
.info-card p, .info-card a { font-size: .9rem; margin: 0; display: block; }
.info-card a { color: var(--navy); font-weight: 600; }
.info-card a:hover { color: var(--red); }

.hours-list { list-style: none; padding: 0; margin: 0; }
.hours-list li {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: .65rem 0;
  border-bottom: 1px dashed var(--line);
  font-size: .9rem;
}
.hours-list li:last-child { border-bottom: none; }
.hours-list li strong { color: var(--navy); font-weight: 600; }
.hours-list li.closed strong, .hours-list li.closed span:last-child { color: var(--red); }
.hours-list li.today { background: var(--blue-50); border-radius: var(--r-sm); padding-inline: .6rem; }

.map-wrap { border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--sh-md); border: 1px solid var(--line); }
.map-wrap iframe { width: 100%; height: 420px; border: 0; display: block; }
@media (max-width: 767.98px) { .map-wrap iframe { height: 320px; } }
.map-wrap--sm iframe { height: 300px; }
@media (max-width: 767.98px) { .map-wrap--sm iframe { height: 230px; } }

/* ---------- 22. CTA band ---------- */
.cta-band {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(115deg, var(--navy) 0%, var(--navy-800) 55%, var(--blue) 100%);
  color: #fff;
  padding-block: clamp(2.6rem, 5vw, 4rem);
}
.cta-band::before {
  content: "";
  position: absolute;
  right: -80px; top: -80px;
  width: 340px; height: 340px;
  border-radius: 50%;
  background: rgba(200, 29, 37, .28);
  filter: blur(4px);
}
.cta-band::after {
  content: "";
  position: absolute;
  left: 12%; bottom: -120px;
  width: 260px; height: 260px;
  border: 2px solid rgba(255, 255, 255, .12);
  border-radius: 50%;
}
.cta-band .container-x { position: relative; z-index: 2; }
.cta-band h2 { color: #fff; }
.cta-band p { color: rgba(255, 255, 255, .82); }

/* ---------- 23. Newsletter ---------- */
.news-wrap {
  background: var(--white);
  border-radius: var(--r-xl);
  padding: clamp(1.6rem, 3vw, 2.4rem);
  box-shadow: var(--sh-lg);
  border: 1px solid var(--line);
  position: relative;
  overflow: hidden;
}
.news-wrap::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 5px;
  background: linear-gradient(var(--red), var(--blue));
}
/* Newsletter form: large input with the Notify Me button underneath */
.news-form { display: block; }
.news-label {
  display: block;
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--navy);
  margin-bottom: .5rem;
}
.news-field { position: relative; }
.news-field-icon {
  position: absolute;
  left: 1.05rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--blue);
  font-size: 1.05rem;
  pointer-events: none;
  z-index: 2;
}
.news-form .form-control {
  border-radius: var(--r-lg);
  padding: 1.05rem 1.15rem 1.05rem 3rem;
  font-size: 1.02rem;
  min-height: 58px;
  border-width: 2px;
  border-color: var(--line);
  box-shadow: 0 2px 10px rgba(10, 37, 64, .05);
  transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}
.news-form .form-control::placeholder { color: rgba(10, 37, 64, .42); }
.news-form .form-control:hover { border-color: rgba(21, 101, 216, .45); }
.news-form .form-control:focus {
  outline: none;
  border-color: var(--blue);
  background: var(--white);
  box-shadow: 0 0 0 4px rgba(21, 101, 216, .14);
}
.news-form .form-control.is-invalid { border-color: var(--red); background: #fff8f8; }
.news-form .form-control.is-invalid:focus { box-shadow: 0 0 0 4px rgba(200, 29, 37, .14); }

.news-btn {
  width: 100%;
  margin-top: .85rem;
  min-height: 56px;
  font-size: .95rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  border-radius: var(--r-lg);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  box-shadow: 0 10px 22px rgba(200, 29, 37, .22);
  transition: transform .16s ease, box-shadow .16s ease, filter .16s ease;
}
.news-btn:hover { transform: translateY(-2px); box-shadow: 0 14px 28px rgba(200, 29, 37, .3); filter: brightness(1.05); }
.news-btn:active { transform: translateY(0); }
.news-btn:disabled { opacity: .7; transform: none; cursor: wait; }
.news-btn i { font-size: 1.05rem; }

.news-note {
  margin: .85rem 0 0;
  font-size: .78rem;
  line-height: 1.5;
  color: rgba(10, 37, 64, .55);
  text-align: center;
}
.news-note i { color: var(--blue); margin-right: .2rem; }

@media (max-width: 575.98px) {
  .news-form .form-control { min-height: 54px; font-size: 1rem; padding-left: 2.8rem; }
  .news-btn { min-height: 52px; font-size: .88rem; }
}

/* ---------- 24. Footer ---------- */
.site-footer { background: var(--navy-900); color: rgba(255, 255, 255, .68); font-size: .92rem; }
.footer-main { padding-block: clamp(2.8rem, 5vw, 4.2rem); }
.footer-brand img { height: 62px; }
.footer-brand p { margin-top: 1.1rem; max-width: 330px; font-size: .9rem; }
.site-footer h5 {
  color: #fff;
  font-family: var(--font-body);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  margin-bottom: 1.2rem;
  position: relative;
  padding-bottom: .7rem;
}
.site-footer h5::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 34px; height: 2px;
  background: var(--red);
  border-radius: 2px;
}
.footer-links { list-style: none; padding: 0; margin: 0; }
.footer-links li { margin-bottom: .6rem; }
.footer-links a {
  color: rgba(255, 255, 255, .68);
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  transition: all .25s var(--ease);
  font-size: .9rem;
}
.footer-links a::before {
  content: "\f285"; /* bootstrap icon chevron-right */
  font-family: "bootstrap-icons";
  color: var(--red-300);
  font-size: .7rem;
  transition: transform .25s var(--ease);
}
.footer-links a:hover { color: #fff; transform: translateX(5px); }

.footer-contact li { display: flex; gap: .7rem; margin-bottom: .9rem; font-size: .9rem; align-items: flex-start; }
.footer-contact i { color: var(--red-300); margin-top: .3rem; flex-shrink: 0; }
.footer-contact a { color: rgba(255, 255, 255, .68); }
.footer-contact a:hover { color: #fff; }

.social-row { display: flex; gap: .55rem; margin-top: 1.2rem; }
.social-row a {
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .18);
  display: grid; place-items: center;
  color: rgba(255, 255, 255, .78);
  transition: all .3s var(--ease);
}
.social-row a:hover { background: var(--red); border-color: var(--red); color: #fff; transform: translateY(-3px); }

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, .1);
  padding-block: 1.2rem;
  font-size: .84rem;
  display: flex;
  flex-wrap: wrap;
  gap: .6rem 1.4rem;
  justify-content: space-between;
  align-items: center;
}
.footer-bottom a { color: rgba(255, 255, 255, .68); }
.footer-bottom a:hover { color: #fff; }
.footer-legal { display: flex; flex-wrap: wrap; gap: 1.2rem; }

/* ---------- 25. Floating actions ---------- */
.fab-stack {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 1040;
  display: flex;
  flex-direction: column-reverse;
  gap: .7rem;
}
.fab {
  width: 52px; height: 52px;
  border-radius: 50%;
  display: grid; place-items: center;
  color: #fff;
  font-size: 1.3rem;
  box-shadow: var(--sh-md);
  transition: all .3s var(--ease);
  position: relative;
}
.fab:hover { transform: translateY(-4px) scale(1.05); color: #fff; }
.fab.wa { background: #1faa54; }
.fab.wa::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid #1faa54;
  animation: pulse 2.4s ease-out infinite;
}
@keyframes pulse { 0% { transform: scale(1); opacity: .8; } 100% { transform: scale(1.7); opacity: 0; } }
.fab.top { background: var(--navy); opacity: 0; visibility: hidden; }
.fab.top.show { opacity: 1; visibility: visible; }
.fab.top:hover { background: var(--red); }

@media (max-width: 575.98px) {
  .fab { width: 46px; height: 46px; font-size: 1.15rem; }
  .fab-stack { right: 12px; bottom: 12px; }
}

/* ---------- 26. Scroll reveal ----------
   The hidden state is gated behind .js (set by an inline head script) so
   content is always visible when JavaScript is unavailable.            */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .8s var(--ease), transform .8s var(--ease);
  will-change: opacity, transform;
}
.js [data-reveal="left"] { transform: translateX(-34px); }
.js [data-reveal="right"] { transform: translateX(34px); }
.js [data-reveal="zoom"] { transform: scale(.94); }
.js [data-reveal].in { opacity: 1; transform: none; }

/* The container is capped at 1200px, so below ~1280px there is only the 20px
   page gutter beside it - a 34px horizontal offset would overflow. Fall back to
   a vertical entrance there. */
@media (max-width: 1279.98px) {
  .js [data-reveal="left"],
  .js [data-reveal="right"] { transform: translateY(26px); }
}

/* On phones the container gutter is only ~20px, so a horizontal offset would
   push the element past the viewport and create a sideways scroll. */
@media (max-width: 767.98px) {
  /* Bootstrap's `g-5` gutter is 3rem, which gives .row 1.5rem negative side
     margins - wider than the container gutter, so it bleeds off-screen. */
  .container-x .row.g-5,
  .container-x .row.gx-5 { --bs-gutter-x: 2.25rem; }
}

/* The same bleed reaches narrow desktops. `g-lg-5` switches on at 992px and
   gives .row 24px negative side margins, which is wider than the ~20px the
   container leaves free, so a 4px sideways scrollbar appears from 992 to 1200. */
@media (min-width: 992px) and (max-width: 1199.98px) {
  .container-x .row.g-lg-5,
  .container-x .row.gx-lg-5 { --bs-gutter-x: 2.25rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .js [data-reveal] { opacity: 1 !important; transform: none !important; }
  .hero-slide { transform: none; }
}

/* ---------- 27. Misc components ---------- */
.divider-ornament {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .8rem;
  margin-block: 1rem;
  color: var(--red);
}
.divider-ornament::before, .divider-ornament::after {
  content: "";
  width: 70px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--red));
}
.divider-ornament::after { background: linear-gradient(90deg, var(--red), transparent); }

.pill-badge {
  display: inline-block;
  background: var(--red-50);
  color: var(--red);
  border-radius: 999px;
  padding: .3rem .95rem;
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.pill-badge.blue { background: var(--blue-50); color: var(--blue); }

.callout {
  background: var(--blue-50);
  border-left: 4px solid var(--blue);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  padding: 1.3rem 1.5rem;
  font-size: .95rem;
}
.callout.red { background: var(--red-50); border-left-color: var(--red); }
.section-dark .callout { background: rgba(255, 255, 255, .07); border-left-color: var(--red); color: rgba(255, 255, 255, .85); }

.note-quote {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.22rem;
  color: var(--navy);
  line-height: 1.6;
  padding-left: 1.4rem;
  border-left: 3px solid var(--red);
}
.section-dark .note-quote { color: #fff; }

.mini-title {
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: .5rem;
}
.section-dark .mini-title { color: var(--blue-300); }

.img-zoom { overflow: hidden; border-radius: var(--r-md); }
.img-zoom img { transition: transform .7s var(--ease); display: block; width: 100%; }
.img-zoom:hover img { transform: scale(1.06); }

.accordion-item {
  border: 1px solid var(--line) !important;
  border-radius: var(--r-md) !important;
  margin-bottom: .8rem;
  overflow: hidden;
  background: var(--white);
}
.accordion-button {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--navy);
  padding: 1.15rem 1.3rem;
  background: var(--white);
}
.accordion-button:not(.collapsed) { background: var(--navy); color: #fff; box-shadow: none; }
.accordion-button:focus { box-shadow: none; border-color: transparent; }
.accordion-button::after {
  background-image: none;
  content: "\f64d"; /* bootstrap icon chevron-down */
  font-family: "bootstrap-icons";
  font-size: 1rem;
  color: var(--red);
  transition: transform .3s var(--ease);
}
.accordion-button:not(.collapsed)::after { color: #fff; transform: rotate(180deg); }
.accordion-body { padding: 1.2rem 1.3rem; font-size: .95rem; }

/* ---------- 28. Print ---------- */
@media print {
  .navbar-shell, .topbar, .fab-stack, .footer-bottom, .hero .carousel-control-prev, .hero .carousel-control-next { display: none !important; }
  body { color: #000; }
}