/* ==========================================================
   Train 2 Health — component styles
   Extracted from the up-to-date snippets in "New Website/Code"
   ========================================================== */

/* ─────────────────────────────────────────────────────────
   Sticky Header (New Sticky Headers/Sticky Header V1)
   ───────────────────────────────────────────────────────── */
.sticky-header {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 1000;
}
.sticky-header.stuck {
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

/* main-header handles background only */
.main-header {
  background: rgba(0, 29, 61, 0);
  transition: background 0.25s ease;
}
.main-header.menu-open {
  background: rgba(0, 29, 61, 1) !important;
}

/* Inner wrapper provides the relative positioning context */
.header-inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 72px;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 1.25rem;
}

.header-logo img {
  height: 52px;
  width: auto;
  display: block;
}

.header-nav ul {
  list-style: none;
  display: flex;
  gap: 1.4rem;
  align-items: center;
  margin: 0;
  padding: 0;
}

/* Base styles for text links only — the Book Now button (a.btn) keeps its own
   .btn styling, so it is excluded here (otherwise these rules would override
   the button's padding and hover colour). */
.header-nav a:not(.btn) {
  color: var(--cream);
  font-family: var(--font-head);
  font-weight: 500;
  font-size: 1rem;
  padding: 0.35rem 0;
  transition: color var(--transition);
  text-decoration: none;
}

/* Hover changes the text colour only — no underline / yellow highlight bar */
.header-nav a:not(.btn):hover,
.header-nav .dropdown-toggle:hover,
.header-nav a:not(.btn)[aria-current="page"] {
  color: var(--gold);
}

/* Courses dropdown (desktop) */
.header-nav li.has-dropdown {
  position: relative;
}
.header-nav .dropdown-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  background: none;
  border: none;
  cursor: pointer;
  font: inherit;
  color: var(--cream);
  padding: 0.35rem 0;
  line-height: 1;
  transition: color var(--transition);
}
.header-nav .dropdown-toggle .chev {
  width: 9px;
  height: 9px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform var(--transition);
}
.header-nav li.has-dropdown.open .dropdown-toggle .chev,
.header-nav li.has-dropdown:hover .dropdown-toggle .chev {
  transform: rotate(-135deg);
}
.header-nav .dropdown-menu {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(6px);
  min-width: 300px;
  background: var(--navy-900);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
  padding: 0.5rem;
  list-style: none;
  display: block;
  opacity: 0;
  pointer-events: none;
  /* delay before hiding gives a grace period to move the mouse onto the menu */
  transition: opacity var(--transition) 0.5s;
}
.header-nav .dropdown-menu li {
  display: block;
}
.header-nav li.has-dropdown:hover .dropdown-menu,
.header-nav li.has-dropdown.open .dropdown-menu {
  opacity: 1;
  pointer-events: auto;
  transition-delay: 0s;
}
.header-nav .dropdown-menu a {
  padding: 0.55rem 0.85rem;
  border-bottom: none;
  border-radius: var(--radius-xs);
  font-weight: 400;
  white-space: nowrap;
}
/* Hover changes the text colour only — no yellow background highlight */
.header-nav .dropdown-menu a:hover { color: var(--gold); }
.header-nav .dropdown-menu .dropdown-divider {
  height: 1px;
  background: rgba(255, 252, 242, 0.15);
  margin: 0.4rem 0.4rem;
}

.menu-button-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  width: 42px;
  height: 42px;
  position: relative;
}
.menu-button-toggle span,
.menu-button-toggle span::before,
.menu-button-toggle span::after {
  content: "";
  display: block;
  position: absolute;
  left: 8px;
  width: 26px;
  height: 3px;
  border-radius: 2px;
  background: var(--cream);
  transition: transform 0.2s, opacity 0.2s;
}
.menu-button-toggle span { top: 20px; }
.menu-button-toggle span::before { top: -8px; left: 0; }
.menu-button-toggle span::after { top: 8px; left: 0; }
.menu-button-toggle[aria-expanded="true"] span { background: transparent; }
.menu-button-toggle[aria-expanded="true"] span::before { transform: translateY(8px) rotate(45deg); }
.menu-button-toggle[aria-expanded="true"] span::after { transform: translateY(-8px) rotate(-45deg); }

/* Mobile menu overlays page content, doesn't push it */
.mobile-menu {
  display: none;
  overflow: hidden;
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  z-index: 999;
  background: rgba(0, 29, 61, 1);
  box-shadow: var(--shadow-md);
}
.mobile-menu.is-open {
  display: block;
}

.mobile-menu a {
  display: block;
  padding: 0.85rem 1.5rem;
  color: var(--cream);
  font-family: var(--font-head);
  font-weight: 500;
  text-align: left;
  text-decoration: none;
}
.mobile-menu a:hover { color: var(--gold); }

.mobile-menu .mobile-submenu a {
  padding-left: 2.5rem;
  font-size: 1rem;
  font-weight: 400;
}

/* Collapsible "Courses" section (mobile/tablet) — collapsed by default */
.mobile-dropdown-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background: none;
  border: none;
  cursor: pointer;
  font: inherit;
  padding: 0.85rem 1.5rem;
  color: var(--cream);
  font-family: var(--font-head);
  font-weight: 500;
  text-align: left;
}
.mobile-dropdown-toggle .chev {
  width: 9px;
  height: 9px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform var(--transition);
  flex-shrink: 0;
}
.mobile-has-dropdown.open .mobile-dropdown-toggle .chev {
  transform: rotate(-135deg);
}
.mobile-has-dropdown .mobile-submenu {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}
.mobile-has-dropdown.open .mobile-submenu {
  max-height: 500px;
}

.mobile-menu .mobile-book-now {
  margin: 0.5rem 1.5rem 0.25rem;
  width: calc(100% - 3rem);
}

/* Each direct child starts off-screen to the left */
.mobile-menu > * {
  transform: translateX(-100%);
  opacity: 0;
  transition: transform 0.35s ease, opacity 0.2s ease;
}

/* When menu is open, slide items in */
.mobile-menu.is-open > * {
  transform: translateX(0);
  opacity: 1;
}

/* Staggered delays — covers up to 8 items */
.mobile-menu.is-open > *:nth-child(1) { transition-delay: 0.00s; }
.mobile-menu.is-open > *:nth-child(2) { transition-delay: 0.07s; }
.mobile-menu.is-open > *:nth-child(3) { transition-delay: 0.14s; }
.mobile-menu.is-open > *:nth-child(4) { transition-delay: 0.21s; }
.mobile-menu.is-open > *:nth-child(5) { transition-delay: 0.28s; }
.mobile-menu.is-open > *:nth-child(6) { transition-delay: 0.35s; }
.mobile-menu.is-open > *:nth-child(7) { transition-delay: 0.42s; }
.mobile-menu.is-open > *:nth-child(8) { transition-delay: 0.49s; }

/* On close, reverse the stagger — last item exits first */
.mobile-menu:not(.is-open) > *:nth-child(1) { transition-delay: 0.49s; }
.mobile-menu:not(.is-open) > *:nth-child(2) { transition-delay: 0.42s; }
.mobile-menu:not(.is-open) > *:nth-child(3) { transition-delay: 0.35s; }
.mobile-menu:not(.is-open) > *:nth-child(4) { transition-delay: 0.28s; }
.mobile-menu:not(.is-open) > *:nth-child(5) { transition-delay: 0.21s; }
.mobile-menu:not(.is-open) > *:nth-child(6) { transition-delay: 0.14s; }
.mobile-menu:not(.is-open) > *:nth-child(7) { transition-delay: 0.07s; }
.mobile-menu:not(.is-open) > *:nth-child(8) { transition-delay: 0.00s; }

.header-book-now {
  padding: 0.5rem 1.1rem;
}

/* Individual course detail pages — intro laid out as a plain two-column
   block (copy + image/bullets) rather than crammed into a single card, so the
   description, bullets and pricing all get room to breathe. */
.course-detail-intro {
  display: flex;
  align-items: flex-start;
  gap: var(--space-12);
  max-width: 1000px;
  margin: var(--space-8) auto 0;
}
.course-detail-copy {
  flex: 6 1 0%;
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}
.course-detail-who h4 {
  font-size: var(--fs-h4);
  margin-bottom: var(--space-2);
}
.course-detail-side {
  flex: 4 1 0%;
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}
.course-detail-media {
  border-radius: var(--radius-card);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.course-detail-media img { width: 100%; height: 220px; object-fit: cover; display: block; }

.course-detail-list {
  list-style: none;
  padding-left: 0;
  margin: 0;
  color: var(--ink);
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.course-detail-list li {
  position: relative;
  padding-left: 1.75rem;
  line-height: 1.55;
}
.course-detail-tick {
  font-family: 'Material Symbols Outlined';
  position: absolute;
  left: 0;
  top: 0.1em;
  color: var(--green-500);
  font-size: 1.2rem;
  font-variation-settings: 'FILL' 1;
}

.course-detail-pricing {
  max-width: 480px;
  margin: 0 auto;
  text-align: center;
}
.course-detail-pricing h4 {
  font-size: var(--fs-h4);
  margin-bottom: var(--space-4);
}
.course-detail-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  margin-top: 0.75rem;
}
.course-enquire-line { color: var(--slate-600); }
.course-enquire-link {
  text-decoration: underline;
  text-underline-offset: 2px;
  font-weight: 600;
}

@media (max-width: 700px) {
  .course-detail-intro { flex-direction: column; align-items: stretch; }
}

@media (max-width: 900px) {
  .header-nav { display: none; }
  .menu-button-toggle { display: block; }
}

/* ─────────────────────────────────────────────────────────
   Animated Image Grid hero (Home Hero / About Hero)
   ───────────────────────────────────────────────────────── */
.ig-wrap {
  width: 100%;
  height: 60vw;
  overflow: hidden;
  line-height: 0;
  position: relative;
}

.ig-overlay {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: var(--ig-overlay-color);
  z-index: 100;
  pointer-events: none;
}

@media (max-width: 768px) {
  .ig-wrap {
    height: 199.98vw;
  }

  .ig-wrap .ig-row--desktop .ig-cell {
    width: 33.33vw;
    height: 33.33vw;
  }

  .ig-wrap .ig-row--mobile .ig-cell {
    width: 33.33vw;
    height: 33.33vw;
  }
}

.ig-wrap .ig-row {
  display: flex;
  position: relative;
  width: 100%;
  height: 20vw;
}

/* ── Desktop: 5 columns ── */
.ig-wrap .ig-row--desktop .ig-cell {
  position: relative;
  width: 20vw;
  height: 20vw;
  flex-shrink: 0;
}
.ig-wrap .ig-row--desktop .ig-cell img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  box-shadow: var(--shadow-sm);
}

/* ── Mobile: 3 columns ── */
.ig-wrap .ig-row--mobile .ig-cell {
  position: relative;
  width: 33.33vw;
  height: 33.33vw;
  flex-shrink: 0;
}
.ig-wrap .ig-row--mobile .ig-cell img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  box-shadow: var(--shadow-sm);
}

.ig-wrap .ig-row--desktop {
  display: flex;
}

.ig-wrap .ig-row--mobile {
  display: none;
}

@media (max-width: 768px) {
  .ig-wrap .ig-row {
    height: 33.33vw;
  }

  .ig-wrap .ig-row--desktop {
    display: none !important;
  }
  .ig-wrap .ig-row--mobile {
    display: flex !important;
  }
}

/* Hero copy that sits on top of the image grid */
.ig-hero-content {
  position: absolute;
  inset: 0;
  z-index: 110;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 1.5rem;
  line-height: 1.5;
  pointer-events: none;
}
.ig-hero-content > * { pointer-events: auto; }
.ig-hero-content h1 {
  color: var(--cream);
  font-size: var(--fs-h1);
  /* Sitewide text-wrap token — see --text-wrap in style.css */
  max-width: var(--text-wrap);
}
.ig-hero-content h1 .accent { color: var(--gold); }
.ig-hero-content p {
  color: var(--cream);
  font-size: clamp(1rem, 1.6vw, 1.2rem);
  max-width: var(--text-wrap);
  margin: 1.2rem 0 2rem;
}
.ig-hero-cta { display: flex; gap: 1rem; flex-wrap: wrap; justify-content: center; }

/* ─────────────────────────────────────────────────────────
   Sliding Logos (Sliding Logos V4)
   ───────────────────────────────────────────────────────── */
.ls-outer {
  overflow: hidden;
  width: 100%;
  box-sizing: border-box;
  background: var(--teal-500);
  display: flex;
  align-items: center;
  margin-top: var(--space-12);
  /* height is set by JS via --ls-container-h and --ls-logo-h */
  height: var(--ls-container-h, 10vh);
}

.ls-track {
  display: flex;
  align-items: center;
  /* animation is injected by JS once group width is known */
}

.ls-group {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  gap: var(--ls-gap, 4rem);
  /* extra padding so gap appears on both sides of the whole strip */
  padding: 0 calc(var(--ls-gap, 4rem) / 2);
}

.ls-group img {
  height: var(--ls-logo-h, 8vh);
  width: auto;
  object-fit: contain;
  display: block;
  flex-shrink: 0;
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
              filter    0.35s ease;
  filter: drop-shadow(0 0 0 transparent);
}

.ls-group img:hover {
  transform: scale(1.06);
  filter: drop-shadow(0 4px 10px rgba(0, 29, 61, 0.15));
  cursor: pointer;
}

@keyframes ls-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(var(--ls-dist, -800px)); }
}

/* ─────────────────────────────────────────────────────────
   Course Carousel (Courses Carousel Current)
   ───────────────────────────────────────────────────────── */
.cc-outer *, .cc-outer *::before, .cc-outer *::after {
  box-sizing: border-box;
}
.cc-outer {
  width: 100%;
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  overflow: visible;
}

.cc-viewport {
  overflow: hidden;
  position: relative;
  /* Extra vertical padding so the card shadow (which extends above and below
     the card) is not clipped by overflow:hidden — bottom is larger to clear
     the shadow's downward offset. Sized for --shadow-card-hover's reach. */
  padding-top: 1.25rem;
  padding-bottom: 2rem;
}

.cc-track {
  display: flex;
  align-items: stretch;
  will-change: transform;
}

.cc-slide {
  flex-shrink: 0;
  transition: box-shadow 0.3s ease;
  overflow: visible;
  padding: 0.5rem;
}

.cc-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: visible;
  position: relative; /* lets the hover z-index bump (see courses-carousel.js) lift the shadow above the next card */
  transition: box-shadow 0.3s ease;
}

.cc-img-wrap {
  position: relative;
  width: 100%;
  flex-shrink: 0;
  overflow: hidden;
}
.cc-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.cc-img-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cc-tags {
  position: absolute;
  top: 10px;
  left: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  z-index: 2;
  pointer-events: none;
}
.cc-tag {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  transition: box-shadow 0.22s ease;
}

.cc-content {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.cc-heading {
  /* The global H3 rule is also used by .course-list-body h3. */
  margin: 0;
}
.cc-desc {
  flex-grow: 1;
  margin: 0;
}
.course-list-body ul,
.cc-desc ul {
  padding-left: 1.2rem;
  color: var(--slate-600);
}
.course-list-body li,
.cc-desc li {
  margin-bottom: 0.375rem;
}
.cc-btn-wrap { margin-top: auto; }
.cc-btn {
  display: inline-block;
  text-decoration: none;
  font-family: var(--font-body);
  font-weight: 600;
  letter-spacing: 0.3px;
  cursor: pointer;
  transition: background 0.22s ease, color 0.22s ease,
              transform 0.18s ease, box-shadow 0.22s ease,
              border-color 0.22s ease;
}
.cc-btn:hover { transform: translateY(-2px); }

.cc-nav {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.875rem;
}

/* Edge hover arrows — shown when the pointer is over the left/right third of the viewport */
.cc-edge-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 29, 61, 0.55);
  color: var(--bg-alt);
  z-index: 5;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease, background 0.25s ease;
}
.cc-edge-arrow.visible {
  opacity: 1;
  pointer-events: auto;
}
.cc-edge-arrow:hover {
  background: rgba(0, 29, 61, 0.8);
}
.cc-edge-arrow svg {
  width: 18px;
  height: 18px;
}
.cc-edge-prev { left: 12px; }
.cc-edge-next { right: 12px; }

.cc-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.22s ease, color 0.22s ease,
              border-color 0.22s ease, box-shadow 0.22s ease,
              transform 0.18s ease;
}
.cc-arrow:hover { transform: scale(1.08); }

.cc-dots {
  display: flex;
  align-items: center;
  gap: 0.4375rem;
}
.cc-dot {
  cursor: pointer;
  padding: 0;
  transition: background 0.22s ease, width 0.22s ease,
              border-radius 0.22s ease, opacity 0.22s ease,
              border-color 0.22s ease, box-shadow 0.22s ease;
  border: none;
}

/* Smooth resize transitions — only while .cc-resizing is active */
.cc-resizing .cc-viewport {
  transition: margin 0.38s ease, width 0.38s ease !important;
}
.cc-resizing .cc-img-wrap {
  transition: height 0.38s ease !important;
}
.cc-resizing .cc-card {
  transition: transform 0.28s ease, box-shadow 0.28s ease,
              border-radius 0.38s ease !important;
}
.cc-resizing .cc-content {
  transition: padding 0.38s ease !important;
}
.cc-resizing .cc-heading {
  transition: font-size 0.38s ease !important;
}
.cc-resizing .cc-desc {
  transition: font-size 0.38s ease !important;
}
.cc-resizing .cc-btn {
  transition: background 0.22s ease, color 0.22s ease,
              padding 0.38s ease, font-size 0.38s ease,
              border-radius 0.38s ease !important;
}
.cc-resizing .cc-arrow {
  transition: width 0.38s ease, height 0.38s ease,
              border-radius 0.38s ease, padding 0.38s ease !important;
}
.cc-resizing .cc-dot {
  transition: background 0.22s ease, width 0.38s ease,
              height 0.38s ease, border-radius 0.38s ease !important;
}
.cc-resizing .cc-nav {
  transition: margin-top 0.38s ease !important;
}
.cc-resizing .cc-track {
  transition: transform 0.38s ease, padding-left 0.38s ease !important;
}

/* ─────────────────────────────────────────────────────────
   Course List (alternating-side cards, courses.html / e-learning.html)
   ───────────────────────────────────────────────────────── */
.course-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
}

.course-list-card {
  display: flex;
  align-items: stretch;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: box-shadow 0.3s ease;
}
.course-list-card:hover {
  box-shadow: var(--shadow-md);
}
.course-list-card--reverse { flex-direction: row-reverse; }

/* No intrinsic height of its own (image is absolutely positioned inside) —
   so align-items:stretch on .course-list-card sizes this to match the text
   side's height rather than the image's own aspect ratio dictating the row
   height, per CLAUDE.md's card-sizing rule for these list cards. */
.course-list-media {
  flex: 0 0 38%;
  position: relative;
  overflow: hidden;
}
.course-list-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.course-list-body {
  flex: 1;
  padding: var(--space-8);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-3);
}
.course-list-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}
.course-list-body h3 { margin: 0; }
.course-list-body ul {
  padding-left: 1.2rem;
  color: var(--slate-600);
}
.course-list-body li { margin-bottom: 0.375rem; }

/* Distinct box for in-house group pricing — kept visually separate from
   the tick-bullet feature list above it, rather than living as just
   another <li> in that list. */
.course-list-pricebox {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: var(--space-3) var(--space-4);
  color: var(--ink);
}
.course-list-pricebox-label {
  display: block;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--teal-500);
  margin-bottom: 0.3rem;
}
.course-list-actions {
  display: flex;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin-top: var(--space-2);
}

@media (max-width: 700px) {
  .course-list-card,
  .course-list-card--reverse { flex-direction: column; }
  /* flex-basis (not the height property) is what the flex layout algorithm
     actually sizes a flex item by — .course-list-media's base rule sets
     flex: 0 0 38%, and that basis has to be overridden here too, not just
     height, or it wins: in a column flex container with an indefinite-height
     parent, a percentage basis collapses to content-based auto sizing, and
     since the img inside is position:absolute (contributes 0 to content
     height), the container silently collapses to 0px and the image vanishes. */
  .course-list-media { flex: 0 0 20vh; height: 20vh; }
}

/* ─────────────────────────────────────────────────────────
   Reviews Carousel (Reviews Carousel — home page)
   ───────────────────────────────────────────────────────── */
.animated-carousel-wrap {
  --card-accent: #fffcf2;
  font-family: Inter, system-ui, sans-serif;
  padding: 0;
  margin: 2.25rem 0 0;
  width: 100vw;
  overflow: hidden;
}

.carousel-container {
  position: relative;
  width: 100vw;
  height: 55vh;
  overflow: hidden;
  margin: 0;
  /* Same fix as .cc-viewport: reserve room above/below the card for its own
     box-shadow to bleed into, otherwise overflow:hidden clips it almost
     entirely since the card sits centred with barely any vertical margin.
     Deliberately content-box (not border-box — the box-sizing: border-box
     universal reset in style.css would otherwise make this padding eat into
     the 55vh card area instead of adding to it, clipping the card itself at
     the top). Sized for --shadow-card-hover's reach. */
  box-sizing: content-box;
  padding: 1.5rem 0 4rem;
}

.carousel-track {
  position: relative;
  width: 100%;
  height: 100%;
}

.card-shell {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  /* Shadow lives here, not on .carousel-card below — that element has
     overflow:hidden (needed to clip its background photo + gradient to the
     rounded corners), and overflow:hidden on an element clips its OWN
     box-shadow too, since a shadow paints outside the border box. This
     shell has no overflow set, so the shadow renders unclipped. Same split
     the course carousel already uses: .cc-card (shadow, overflow:visible)
     vs the nested .cc-img-wrap (overflow:hidden, image only). Value is set
     inline by js/reviews-carousel.js (mouseenter/mouseleave); CSS only
     owns the transition + radius so there's one source of truth. */
  border-radius: var(--radius);
  transition:
    left   0.6s cubic-bezier(0.4, 0, 0.2, 1),
    width  0.6s cubic-bezier(0.4, 0, 0.2, 1),
    height 0.6s cubic-bezier(0.4, 0, 0.2, 1),
    opacity 0.3s ease,
    box-shadow 0.3s ease;
  cursor: pointer;
}

.carousel-card {
  position: relative;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  border-radius: var(--radius);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  pointer-events: auto;
}

/* Legibility gradient over the background photo. Twice the card's own
   height so it can slide as a single transform (which animates smoothly)
   instead of crossfading two gradients (which is needed elsewhere because
   background-to-background doesn't transition — see .testimonial-card::after).
   Gradient is transparent at the top of the element, 50%-opaque at its
   middle, and fully opaque at its bottom. At rest the element's top half
   is on screen: clear top → 50%-opaque bottom. On hover it slides up by
   half its own height (= one full card height) to show the bottom half:
   50%-opaque top → fully opaque bottom — the midpoint that sat at the
   card's bottom edge at rest is now at its top edge, and the animation
   (0.9s, slow enough to actually see) is what reads as the dark band
   sweeping up the card. */
.carousel-card::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 200%;
  background: linear-gradient(to bottom,
    rgba(0, 29, 61, 0)   0%,
    rgba(0, 29, 61, 0) 15%,
    rgba(0, 29, 61, 0.5) 25%,
    rgba(0, 29, 61, 0.8) 40%,
    rgba(0, 29, 61, 0.9) 50%,
    rgba(0, 29, 61, 0.9)   100%);
  transform: translateY(0);
  transition: transform 0.9s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 1;
  pointer-events: none;
}
.carousel-card:hover::before {
  transform: translateY(-50%);
}

.card-content {
  padding: 1.5rem;
  color: var(--bg-alt);
  position: absolute;
  inset: 0;
  z-index: 2;
  height: 100%;
}

/* At rest, rating/text/name sit grouped near the bottom of the card. On
   hover the rating rises to 10% from the top and the text recentres in the
   middle of the card — both driven purely by `top`/`transform` on elements
   that are absolutely positioned in both states, so the move animates and
   the footer (divider + name) never gets pushed around by the growing text.
   Unlike .testimonial-card (one fixed 50vh height), this carousel has 3
   different shell heights (30/40/50vh), so the rest position is expressed
   as a fixed pixel gap from the bottom via calc(100% - Npx) rather than a
   flat percentage — otherwise the same top:68%/58% that works at 50vh
   overlaps the footer on the shorter 30vh/40vh side cards. */
.card-spacer-top { display: none; }

.card-text-wrap {
  position: absolute;
  left: 24px;
  right: 24px;
  top: calc(100% - 175px);
  bottom: 90px; /* hard floor matching the hover state — clipped text is
                   always cut off right at the card-footer's white divider
                   line, both at rest and mid-collapse */
  max-height: 6rem; /* 4 lines at 1rem / line-height 1.5 */
  display: flex;
  align-items: flex-start;
  overflow: hidden;
  /* max-height delayed on the way back down so the revealed words (see
     .card-text .rt-word--hidden) finish their 0.4s opacity fade-out before
     the container clips them — otherwise the text looked like it vanished
     instantly instead of fading. The hover rule below re-declares this
     transition with no delay so growth on hover-in is immediate. */
  transition: top 0.55s cubic-bezier(0.4, 0, 0.2, 1),
              max-height 0.55s cubic-bezier(0.4, 0, 0.2, 1) 0.4s;
}
/* Anchored a fixed distance below the rating (which sits at top:10% on
   hover) rather than vertically centred via translateY(-50%) — centring
   based on the box's own (growing) height let long reviews creep up far
   enough to overlap the rating row above them. `bottom` is an unanimated
   hard floor so even on the smallest (30vh) side-card shells, growth can
   never reach into the footer — max-height is the one thing that actually
   animates the grow. */
.carousel-card:hover .card-text-wrap {
  top: calc(10% + 52px);
  bottom: 90px;
  max-height: 14rem;
  transition: top 0.55s cubic-bezier(0.4, 0, 0.2, 1),
              max-height 0.55s cubic-bezier(0.4, 0, 0.2, 1);
}
.card-text-wrap .card-text { width: 100%; }

@media (max-width: 900px) {
  .card-content { padding: 1rem; }
  .card-text-wrap,
  .card-rating,
  .card-footer { left: 16px; right: 16px; }
  .card-footer { bottom: 16px; }
}

.card-rating {
  position: absolute;
  left: 24px;
  right: 24px;
  top: calc(100% - 205px);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  color: #fffcf2;
  transition: top 0.55s cubic-bezier(0.4, 0, 0.2, 1);
}
.carousel-card:hover .card-rating { top: 10%; }

.rating-divider {
  flex: 1;
  height: 1px;
  background-color: #fffcf2;
}

/* On the reviews carousel and testimonial grid cards, the divider lines
   either side of the stars are hidden at rest and draw in on hover —
   each line grows from its outer edge (screen side) in toward the stars,
   via a scaleX transform anchored at the outer transform-origin. The
   modal's rating divider (.t2h-modal-rating) is unaffected — it's an
   always-open detail view, not a hoverable card. */
.card-rating .rating-divider,
.testimonial-rating .rating-divider {
  transform: scaleX(0);
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.card-rating .rating-divider:first-child,
.testimonial-rating .rating-divider:first-child {
  transform-origin: left;
}
.card-rating .rating-divider:last-child,
.testimonial-rating .rating-divider:last-child {
  transform-origin: right;
}
.carousel-card:hover .card-rating .rating-divider,
.testimonial-card:hover .testimonial-rating .rating-divider {
  transform: scaleX(1);
}

.card-stars {
  font-size: 1.125rem;
  color: #ffc300;
  letter-spacing: 2px;
  display: flex;
  gap: 0.25rem;
}

.star {
  font-size: 1.125rem;
}

.card-text {
  font-size: 1rem;
  line-height: 1.5;
  margin-bottom: 0.75rem;
  font-weight: 400;
}

/* Words already visible within the 4-line boundary are untouched (always
   opacity:1, never animated). Only words beyond that boundary — the ones
   the growing .card-text-wrap newly uncovers — get marked .rt-word--hidden
   by JS and fade in individually, staggered via an inline transition-delay
   so they cascade left-to-right, line by line, instead of popping in as a
   block. The reveal itself comes purely from .card-text-wrap's max-height
   transition above; nothing here needs to jump discretely. */
.card-text .rt-word--hidden {
  opacity: 0;
  transition: opacity 0.4s ease var(--hide-delay, 0ms);
}

.carousel-card:hover .card-text .rt-word--hidden {
  opacity: 1;
  transition: opacity 0.4s ease var(--reveal-delay, 0ms);
}

.card-footer {
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 24px;
  display: flex;
  flex-direction: column;
}

.card-divider {
  height: 1px;
  background-color: #FFFCF280;
  margin-bottom: 0.75rem;
}

.card-name {
  font-size: 1rem;
  font-weight: 600;
  color: var(--card-accent);
  text-align: right;
}

.card-company {
  font-size: 1rem;
  color: var(--card-accent);
  margin-top: 0.125rem;
  text-align: right;
}

/* Nav buttons */
.review-button {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 50px;
  height: 50px;
  background: #6496c84d;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 50;
  transition: opacity 0.3s ease, background 0.3s ease, box-shadow 0.3s ease;
  opacity: 0;
  pointer-events: none;
}

.review-button.visible {
  opacity: 0.8;
  pointer-events: auto;
}

.review-button.visible:hover {
  opacity: 0.95;
  background: #6496c8f2;
  box-shadow: 0 4px 16px #00000033;
}

.review-button.visible:active {
  transform: translateY(-50%) scale(0.95);
}

@media (max-width: 768px) {
  .review-button {
    opacity: 0.8 !important;
    pointer-events: auto !important;
  }
  .review-button:hover {
    opacity: 0.95 !important;
    background: #6496c8f2 !important;
  }
}

.carousel-nav-button-left  { left: 16px; }
.carousel-nav-button-right { right: 16px; }

.review-button svg {
  width: 24px;
  height: 24px;
  stroke: var(--card-accent);
  stroke-width: 2;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ─────────────────────────────────────────────────────────
   FAQ Accordion (Home FAQs — per-page accordions)
   ───────────────────────────────────────────────────────── */
.t2h-faq-wrap * { box-sizing: border-box; }
/* Excludes .btn so the category filter pills keep the sitewide button padding
   instead of being zeroed out by this reset (same selector specificity, and
   this file loads after style.css, so it would otherwise win). */
.t2h-faq-wrap *:not(.btn) { margin: 0; padding: 0; }

.t2h-accordion {
  border-radius: var(--radius-card);
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-md);
  background: var(--surface);
}

.t2h-item {
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  transition: background 0.15s;
}

.t2h-item:last-child { border-bottom: none; }
.t2h-item:hover { background: var(--bg); }
.t2h-item.open { background: var(--bg); }

.t2h-item .t2h-question {
  width: 100%;
  background: none;
  border: none;
  padding: 1.125rem 1.75rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  cursor: pointer;
  text-align: left;
  font-family: var(--font-head);
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--navy-mid);
  transition: color 0.15s;
}

.t2h-question:hover { color: var(--teal-500); }
.t2h-item.open .t2h-question { color: var(--navy-700); }
.t2h-item.open .t2h-question:hover { color: var(--teal-500); }

.t2h-chevron {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: currentColor;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: transform 0.3s, background 0.12s;
}

.t2h-item.open .t2h-chevron { transform: rotate(180deg); }

.t2h-chevron svg { width: 16px; height: 16px; }
.t2h-chevron svg path { stroke: var(--cream) !important; }

/* Hover/open accent is the sitewide gold, same pattern as .btn--primary's
   hover fill (gold background, dark navy icon) — kept off the question text
   itself since yellow text on the white FAQ surface fails WCAG AA (see
   CLAUDE.md). */
.t2h-question:hover .t2h-chevron,
.t2h-item.open .t2h-chevron {
  background: var(--gold-500);
}
.t2h-question:hover .t2h-chevron svg path,
.t2h-item.open .t2h-chevron svg path { stroke: var(--navy-900) !important; }

.t2h-answer-wrap {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease;
}

.t2h-item .t2h-answer {
  padding: 0 1.75rem 1.25rem;
  font-size: 1rem;
  line-height: 1.75;
  color: var(--slate-600);
  border-top: 1px solid var(--line);
  padding-top: 0.875rem;
}

.t2h-item .t2h-answer ul { padding-left: 1.25rem; margin-top: 0.5rem; }
.t2h-item .t2h-answer ul li { margin-bottom: 0.25rem; }

.t2h-answer a {
  color: var(--teal) !important;
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color 0.2s;
}

.t2h-answer a:hover {
  color: var(--teal-600) !important;
}

/* Always opacity:1 — it never disappears on its own. When closed it's
   already fully hidden because .t2h-answer-wrap clips it to max-height:0
   along with the answer text, so the two vanish together via the exact
   same mechanism (not two independently-timed rules that could drift). The
   fade-in below only plays on open, from a genuinely-invisible starting
   point (zero-height container), so it never visibly fades OUT on close. */
.t2h-accent-bar {
  width: 3px;
  border-radius: 2px;
  background: var(--icon-bg, var(--gold));
  align-self: stretch;
  flex-shrink: 0;
  opacity: 1;
}

.t2h-item.open .t2h-accent-bar {
  animation: t2h-accentFadeIn 0.35s ease;
}

@keyframes t2h-accentFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.t2h-answer-inner { display: flex; gap: 0.875rem; }

@media (max-width: 600px) {
  .t2h-item .t2h-question { padding: 1.125rem 1.25rem; gap: 0.875rem; font-size: 1rem; }
  .t2h-item .t2h-answer { padding: 0 1.25rem 1.25rem; padding-top: 0.875rem; }
  .t2h-chevron { width: 28px; height: 28px; }
}

/* ─────────────────────────────────────────────────────────
   Testimonials Grid (Testimonials Body)
   ───────────────────────────────────────────────────────── */
.testimonials-container {
  max-width: 1200px;
  margin: 0 auto;
}

.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2.5rem;
  padding: 0 1.25rem;
}

.testimonial-card {
  background-color: #f5f5f5;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  transition: box-shadow 0.3s ease;
  position: relative;
  height: 50vh;
  background-size: cover;
  background-position: center;
}

.testimonial-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(to top, #001d3d, #001d3dC0, #001d3d00);
  z-index: 1;
}

/* `background` (gradient-to-gradient) doesn't actually transition in
   browsers, it snaps, so this crossfades in a second copy of the gradient
   with the dark colour extended to the top via opacity instead, which does
   animate smoothly. (.carousel-card::before uses a transform-based slide
   for the same effect instead, since a single gradient can animate via
   transform without the crossfade trick.) */
/* Uniformly dark (not fading lighter toward the top) so the hover state
   reads the same as .carousel-card:hover::before — that one's translated
   gradient band is 0.9 opacity across its whole visible height, whereas an
   earlier version of this gradient faded to 0.5 at the top and left the
   photo visibly readable there. */
.testimonial-card::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(to top, #001d3d, #001d3dE6, #001d3dE6);
  z-index: 1;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
}
.testimonial-card:hover::after {
  opacity: 1;
}

.testimonial-card:hover {
  box-shadow: var(--shadow-card-hover);
  /* Bigger hover shadow now reaches past the grid gap into the next row —
     lift above it so the shadow doesn't get clipped behind that card. */
  z-index: 2;
}

.testimonial-content {
  padding: 1.25rem;
  position: absolute;
  inset: 0;
  z-index: 2;
  height: 100%;
}

/* At rest, rating/text/footer sit grouped near the bottom of the card. On
   hover the rating rises to 10% from the top and the text recentres in the
   middle of the card — both driven purely by `top`/`transform` on elements
   that are absolutely positioned in both states, so the move animates. */
.testimonial-spacer-top { display: none; }

.testimonial-text-wrap {
  position: absolute;
  left: 20px;
  right: 20px;
  top: 68%;
  bottom: 90px; /* hard floor matching the hover state — clipped text is
                   always cut off right at the testimonial-footer's white
                   divider line, both at rest and mid-collapse */
  max-height: 6.75rem; /* 4 lines at 1.125rem / line-height 1.5 */
  display: flex;
  align-items: flex-start;
  overflow: hidden;
  /* See matching comment on .card-text-wrap — delay lets the fading-out
     words finish before the container clips them. */
  transition: top 0.55s cubic-bezier(0.4, 0, 0.2, 1),
              max-height 0.55s cubic-bezier(0.4, 0, 0.2, 1) 0.4s;
}
/* Anchored below the rating (top:10% on hover) instead of vertically
   centred via translateY(-50%) — see the matching comment on
   .carousel-card:hover .card-text-wrap for why centring on the box's own
   growing height overlapped the rating row for longer reviews. `bottom` is
   an unanimated hard floor keeping growth clear of the footer. */
.testimonial-card:hover .testimonial-text-wrap {
  top: calc(10% + 56px);
  bottom: 90px;
  max-height: 14rem;
  transition: top 0.55s cubic-bezier(0.4, 0, 0.2, 1),
              max-height 0.55s cubic-bezier(0.4, 0, 0.2, 1);
}
.testimonial-text-wrap .testimonial-text { width: 100%; }

.testimonial-rating {
  position: absolute;
  left: 20px;
  right: 20px;
  top: 58%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  color: #fffcf2;
  transition: top 0.55s cubic-bezier(0.4, 0, 0.2, 1);
}
.testimonial-card:hover .testimonial-rating {
  top: 10%;
}

.rating-stars {
  display: flex;
  gap: 0.25rem;
}

.testimonial-rating .star,
.rating-stars .star {
  font-size: 1.5rem;
  color: #ffc300;
}

.testimonial-text {
  font-size: 1.125rem;
  line-height: 1.5;
  color: #fffcf2;
  margin-bottom: 0.9375rem;
}

/* Same word-level reveal as the reviews carousel — see .card-text .rt-word--hidden.
   The reveal itself comes from .testimonial-text-wrap's max-height transition
   above, not a discrete line-clamp jump. */
.testimonial-text .rt-word--hidden {
  opacity: 0;
  transition: opacity 0.4s ease var(--hide-delay, 0ms);
}

.testimonial-card:hover .testimonial-text .rt-word--hidden {
  opacity: 1;
  transition: opacity 0.4s ease var(--reveal-delay, 0ms);
}

.testimonial-footer {
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: 20px;
  display: flex;
  flex-direction: column;
}

.testimonial-divider {
  height: 1px;
  background-color: #FFFCF280;
  margin-bottom: 0.75rem;
}

.testimonial-author {
  font-weight: 600;
  color: #fffcf2;
  font-size: 1rem;
}

.testimonial-company {
  font-size: 1rem;
  color: #fffcf2;
  margin-top: 0.125rem;
}

@media (max-width: 768px) {
  .testimonials-grid {
    grid-template-columns: 1fr;
  }

  .testimonial-card {
    width: 80vw;
    margin: 0 auto;
  }

  .testimonial-content {
    padding: 1.125rem;
  }

  .testimonial-author,
  .testimonial-company {
    text-align: center;
  }
}

@media (max-width: 480px) {
  .testimonials-grid {
    padding: 0;
  }
}

/* ─────────────────────────────────────────────────────────
   Floating Testimonials Hero (Testimonials Hero)
   ───────────────────────────────────────────────────────── */
:root {
  --t2h-floating-star-size: 1rem;    /* Star size on floating moving cards */
  --t2h-modal-star-size: 1.5rem;     /* Star size on modal card */
}

/* Scrolls normally with the page — not fixed/pinned behind the content
   that follows it, and not transparent. */
.t2h-testimonials-section {
  width: 100%;
  height: 100vh;
  overflow: hidden;
  background: radial-gradient(#003566, #001D3D);
  position: relative;
  z-index: 0;
  display: grid;
  box-shadow: none;
  filter: none;
}

.t2h-testimonials-section * {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.t2h-testimonials-background {
  grid-area: 1 / 1;
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  pointer-events: auto;
}

/* Hero copy overlaid on the floating-card background via CSS Grid stacking
   (not position:absolute), vertically centred, fully opaque. */
.t2h-hero-copy {
  grid-area: 1 / 1;
  align-self: center;
  justify-self: center;
  z-index: 98;
  text-align: center;
  padding: 0 1.5rem;
  pointer-events: none;
}
.t2h-hero-copy > * { pointer-events: auto; }
.t2h-hero-copy h1,
.t2h-hero-copy p { max-width: var(--text-wrap); margin-left: auto; margin-right: auto; }

.t2h-floating-testimonial {
  position: absolute;
  width: 20vw;
  background: linear-gradient(135deg, rgba(0, 53, 102, 0.6) 0%, rgba(0, 29, 61, 0.6) 100%);
  border: 2px solid rgba(31, 122, 140, 0.8);
  border-radius: var(--radius-lg);
  cursor: pointer;
  opacity: 0;
  display: flex;
  flex-direction: row;
  backdrop-filter: blur(10px);
  font-family: var(--font-body);
  color: var(--cream);
  transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease, opacity 0.3s ease;
  overflow: hidden;
  pointer-events: auto;
  z-index: 99;
}

.t2h-floating-testimonial:hover {
  border-color: var(--gold);
  box-shadow: 0 0 18px rgba(255, 195, 0, 0.2);
  transform: scale(1.03);
}

.t2h-floating-testimonial.t2h-card-active {
  border-color: var(--gold) !important;
  box-shadow: 0 0 18px rgba(255, 195, 0, 0.2) !important;
  opacity: 0.35 !important;
  transform: none !important;
}

.t2h-testimonial-image {
  width: 50%;
  /* Let flexbox stretch (default align-items) fill the row's actual height —
     a percentage height here doesn't resolve because the card's own height
     is content-driven, which was leaving the image short of the full card. */
  align-self: stretch;
  object-fit: cover;
  flex-shrink: 0;
}

.t2h-testimonial-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0.75rem 0.9375rem;
  gap: 0;
  min-width: 0;
}

.t2h-testimonial-rating {
  display: flex;
  gap: 0.1875rem;
  justify-content: center;
  margin-bottom: 0.375rem;
}

.t2h-testimonial-text {
  /* Decorative background card, not primary content — intentionally below
     the sitewide 1rem floor so it reads as texture rather than a paragraph. */
  font-size: 0.75rem;
  line-height: 1.4;
  color: #FFFCF2;
  font-style: italic;
  text-align: left;
  word-wrap: break-word;
  overflow-wrap: break-word;
  word-break: break-word;
  margin-bottom: 0.375rem;
  /* Shortened/cut off like the reviews carousel — click the card to read
     the full testimonial in the popup */
  display: -webkit-box;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

.t2h-testimonial-name {
  font-family: var(--font-head);
  font-size: 1rem;
  font-weight: 600;
  color: #FFFCF2;
  text-align: right;
  word-wrap: break-word;
  overflow-wrap: break-word;
  word-break: break-word;
  margin-bottom: 0.125rem;
}

.t2h-testimonial-company {
  font-family: var(--font-body);
  font-size: 1rem;
  color: #FFFCF2;
  text-align: right;
  word-wrap: break-word;
  overflow-wrap: break-word;
  word-break: break-word;
}

/* Long text card variant — wider for reviews exceeding 30vh */
.t2h-floating-testimonial.t2h-long-text {
  width: 40vw;
}

.t2h-floating-testimonial.t2h-long-text .t2h-testimonial-image {
  width: 33.33%;
}

@media (max-width: 768px) {
  .t2h-floating-testimonial.t2h-long-text {
    width: 50vw;
  }

  .t2h-floating-testimonial.t2h-long-text .t2h-testimonial-image {
    width: 33.33%;
  }
}

.t2h-testimonials-section .star,
.t2h-modal .star {
  color: #ffc300;
  line-height: 1;
}

/* Floating card stars */
.t2h-testimonial-rating .star {
  font-size: var(--t2h-floating-star-size, 1rem) !important;
}

/* Modal card stars */
.t2h-modal-rating .star {
  font-size: var(--t2h-modal-star-size, 1.5rem) !important;
}

@keyframes t2h-cardFadeIn {
  from { opacity: 0; }
  to   { opacity: 0.35; }
}

@keyframes t2h-cardFadeOut {
  from { opacity: 0.35; }
  to   { opacity: 0; }
}

.t2h-modal {
  display: none;
  position: fixed;
  z-index: 999999;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  animation: t2h-fadeIn 0.3s ease;
  pointer-events: auto;
}

.t2h-modal-content {
  background-size: cover;
  background-position: center;
  position: relative;
  height: 70vh;
  width: 90%;
  max-width: 700px;
  margin: 5% auto;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  animation: t2h-slideIn 0.3s ease;
  font-family: var(--font-body);
  pointer-events: auto;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.t2h-modal-content::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(to top, #001d3d, #001d3dC0, #001d3d00);
  z-index: 1;
}

.t2h-modal-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.9375rem;
  z-index: 2;
  position: relative;
}

.t2h-modal-image {
  display: none;
}

.t2h-modal-info {
  text-align: center;
}

.t2h-modal-info h2 {
  font-family: var(--font-head);
  color: var(--cream);
  margin: 0;
  font-size: var(--fs-h3);
}

.t2h-modal-company {
  font-size: 1rem;
  color: #FFFCF2;
  margin-top: 0.25rem;
}

.t2h-modal-rating {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  color: #FFFCF2;
  margin-bottom: 0.75rem;
}

.t2h-modal .rating-divider {
  flex: 0 0 40px;
  height: 1px;
  background-color: #FFFCF2;
}

.t2h-testimonial-divider {
  height: 1px;
  background-color: #FFFCF280;
  width: 100%;
  margin-bottom: 0.75rem;
}

.t2h-modal-text {
  font-size: 1rem;
  line-height: 1.6;
  color: #FFFCF2;
  font-style: italic;
  margin: 0 0 0.75rem 0;
  z-index: 2;
  position: relative;
}

.t2h-close-button {
  display: block;
  margin: 0 auto;
  z-index: 2;
  position: relative;
}

@keyframes t2h-fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes t2h-slideIn {
  from { transform: translateY(-50px); opacity: 0; }
  to   { transform: translateY(0);     opacity: 1; }
}

@media (min-width: 769px) and (max-width: 1024px) {
  .t2h-floating-testimonial { width: 30vw; }
}

@media (max-width: 768px) {
  .t2h-testimonials-section { height: 100vh; }
  .t2h-floating-testimonial { width: 40vw; font-size: 1rem; }
  .t2h-testimonial-image { width: 33.33%; }
  .t2h-modal-content { width: 95%; padding: 1.5625rem; margin-top: 25%; }
}

/* ---------- About page narrative bands ---------- */
/* .about-band-stack is the sticky containing block for the bands below —
   without it, each .about-band's containing block would be <main>, which
   spans the rest of the page, so the last band would never release and
   would permanently cover every section after it. isolation:isolate also
   keeps the bands' z-index (1–4) scoped to this group, so they can never
   paint above unrelated site chrome (header, modals, dropdowns) that sits
   in its own stacking context elsewhere on the page. */
.about-band-stack {
  position: relative;
  isolation: isolate;
}

/* Sticky-stack scroll effect: each band pins to the top of the viewport as
   it's reached, so the next band scrolls down over it rather than the page
   just scrolling past — a rising stack of cards. Requires an ascending
   z-index down the DOM (later band = higher stacking) so each new band
   paints above the one it's covering; position:sticky (not fixed) is what
   lets it release once the following band takes over. */
.about-band {
  position: sticky;
  top: 0;
  overflow: hidden;
  padding: clamp(3.5rem, 9vw, 6.75rem) 0;
  text-align: center;
  min-height: 100vh;
}
.about-band--navy   { z-index: 1; }
.about-band--teal   { z-index: 2; }
.about-band--maroon { z-index: 3; }
.about-band--amber  { z-index: 4; }
.about-band--green  { z-index: 5; }
.about-band h2 { color: var(--bg-alt); margin-bottom: 1.1rem; }
.about-band p { color: var(--bg-alt); }
.about-band .container { position: relative; z-index: 1; }

.about-band__icon { color: var(--bg-alt); line-height: 1; margin-bottom: 1rem; }
.about-band__icon svg { width: 2.5rem; height: 2.5rem; display: block; fill: currentColor; }

.about-band__content {
  max-width: 720px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.1rem;
}
.about-band__content p { max-width: 620px; }

.about-band__quote {
  font-family: var(--font-head);
  font-style: italic;
  font-weight: 600;
  font-size: var(--fs-h3);
  color: var(--bg-alt);
  max-width: 620px;
}

.about-band--navy { background: var(--navy-700); }
.about-band--teal { background: var(--teal-500); }
.about-band--maroon { background: var(--maroon-700); }
.about-band--green { background: var(--green-500); }

.about-band--teal .team-grid { margin-top: 1rem; width: 100%; }
.about-band--teal .team-card { text-align: center; }