/* ============================================================
   PAGE SECTIONS — INDEX.HTML
   ============================================================ */

/* ============================================================
   H1 · HOME HERO
   ============================================================ */

/* ── Hero section shell ──────────────────────────────────── */

.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  padding: 100px 0 80px;
}

/* ── Inner layout — 2 columns ────────────────────────────── */

.hero__inner {
  display: flex;
  align-items: center;
  gap: 64px;
  position: relative;
  z-index: 2;
  width: 100%;
}

/* ── Left column — text ──────────────────────────────────── */

.hero__content {
  flex: 0 0 55%;
  max-width: 55%;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.hero__pill {
  margin-bottom: 20px;
  align-self: flex-start;
}

.hero__heading {
  font-size: var(--fs-h1);
  font-weight: 700;
  color: var(--color-white);
  line-height: 1.1;
  margin-bottom: 24px;
  letter-spacing: -0.02em;
}

.hero__subheading {
  font-size: clamp(16px, 1.5vw, 19px);
  color: var(--color-muted);
  line-height: 1.7;
  margin-bottom: 36px;
  max-width: 52ch;
}

.hero__ctas {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}

.hero__trust {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-small);
  color: var(--color-muted);
  max-width: none;
  margin: 0;
}

.hero__trust i {
  color: var(--color-teal);
  font-size: 13px;
}

/* ── Right column — dashboard graphic ───────────────────── */

.hero__graphic {
  flex: 0 0 45%;
  max-width: 45%;
  position: relative;
}

/* ── Stagger fade-in-up animations ──────────────────────── */

.hero__content .fade-in-up:nth-child(1) { transition-delay: 0.1s; }
.hero__content .fade-in-up:nth-child(2) { transition-delay: 0.2s; }
.hero__content .fade-in-up:nth-child(3) { transition-delay: 0.3s; }
.hero__content .fade-in-up:nth-child(4) { transition-delay: 0.4s; }
.hero__content .fade-in-up:nth-child(5) { transition-delay: 0.5s; }
.hero__graphic.fade-in-up               { transition-delay: 0.45s; }

/* ── Dashboard mockup ────────────────────────────────────── */

.dashboard {
  background-color: var(--color-slate);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-float), 0 0 60px rgba(0,201,167,0.08);
}

/* Dashboard top bar */
.dashboard__header {
  display: flex;
  align-items: center;
  gap: 10px;
  background-color: var(--color-navy);
  padding: 12px 16px;
  border-bottom: 1px solid var(--color-border);
}

.dashboard__header-dots {
  display: flex;
  gap: 5px;
}

.dashboard__header-dots span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: var(--color-border-dark);
}

.dashboard__header-dots span:nth-child(1) { background-color: #FF6058; }
.dashboard__header-dots span:nth-child(2) { background-color: #FFBD2E; }
.dashboard__header-dots span:nth-child(3) { background-color: #28CA42; }

.dashboard__header-title {
  font-family: var(--font-label);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--color-muted);
  flex: 1;
  text-align: center;
  text-transform: uppercase;
}

.dashboard__header-badge {
  font-family: var(--font-label);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--color-navy);
  background-color: var(--color-teal);
  padding: 2px 8px;
  border-radius: var(--radius-full);
}

/* Metric cards */
.dashboard__metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background-color: var(--color-border);
  border-bottom: 1px solid var(--color-border);
}

.dashboard__metric {
  background-color: var(--color-slate);
  padding: 16px 14px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.dashboard__metric-value {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 22px;
  line-height: 1;
}

.dashboard__metric-label {
  font-family: var(--font-label);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-muted);
}

.dashboard__metric-trend {
  font-size: 11px;
  font-family: var(--font-body);
  margin-top: 2px;
}

.dashboard__metric-trend.up {
  color: #22C55E;
}

.dashboard__metric-trend.down {
  color: var(--color-error);
}

/* Bar chart */
.dashboard__chart-section {
  padding: 16px 16px 8px;
  border-bottom: 1px solid var(--color-border);
}

.dashboard__chart-label {
  font-family: var(--font-label);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-muted);
  margin-bottom: 12px;
}

.dashboard__bars {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  height: 80px;
}

.dashboard__bar-group {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  height: 100%;
  justify-content: flex-end;
}

.dashboard__bar-group span {
  font-family: var(--font-label);
  font-size: 9px;
  color: var(--color-muted);
  letter-spacing: 0.04em;
}

.dashboard__bar {
  width: 100%;
  height: var(--bar-h, 50%);
  background-color: rgba(0, 201, 167, 0.3);
  border-radius: 3px 3px 0 0;
  border-top: 2px solid rgba(0, 201, 167, 0.5);
  transition: height 1s ease;
}

.dashboard__bar--accent {
  background-color: rgba(0, 201, 167, 0.65);
  border-top-color: var(--color-teal);
}

/* Sparkline */
.dashboard__sparkline-section {
  padding: 14px 16px 8px;
  border-bottom: 1px solid var(--color-border);
}

.dashboard__sparkline {
  height: 60px;
}

.dashboard__sparkline svg {
  width: 100%;
  height: 100%;
}

/* Dashboard footer */
.dashboard__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
}

.dashboard__footer-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-family: var(--font-label);
  color: var(--color-muted);
  letter-spacing: 0.04em;
}

/* ── Decorative data nodes ───────────────────────────────── */

.hero__nodes {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  overflow: hidden;
}

.hero__node {
  position: absolute;
  border-radius: 50%;
  background-color: var(--color-teal);
  opacity: 0;
  animation: floatUp 6s ease-in-out infinite;
}

/* Individual node positions, sizes, delays */
.hero__node--1 {
  width: 8px; height: 8px;
  top: 15%; left: 8%;
  opacity: 0.2;
  animation-delay: 0s;
  animation-duration: 7s;
}
.hero__node--2 {
  width: 5px; height: 5px;
  top: 70%; left: 5%;
  opacity: 0.15;
  animation-delay: 1.2s;
  animation-duration: 9s;
  background-color: var(--color-blue);
}
.hero__node--3 {
  width: 12px; height: 12px;
  top: 25%; left: 92%;
  opacity: 0.18;
  animation-delay: 2s;
  animation-duration: 8s;
}
.hero__node--4 {
  width: 6px; height: 6px;
  top: 80%; left: 88%;
  opacity: 0.2;
  animation-delay: 0.5s;
  animation-duration: 6s;
  background-color: var(--color-blue);
}
.hero__node--5 {
  width: 9px; height: 9px;
  top: 55%; left: 50%;
  opacity: 0.1;
  animation-delay: 3s;
  animation-duration: 10s;
}
.hero__node--6 {
  width: 5px; height: 5px;
  top: 10%; left: 60%;
  opacity: 0.15;
  animation-delay: 1.8s;
  animation-duration: 7.5s;
}
.hero__node--7 {
  width: 7px; height: 7px;
  top: 88%; left: 42%;
  opacity: 0.12;
  animation-delay: 4s;
  animation-duration: 8.5s;
  background-color: var(--color-blue);
}

/* ── Waveform at bottom of hero ──────────────────────────── */

.hero__wave {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 80px;
  pointer-events: none;
  z-index: 1;
}

.hero__wave svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* ── Hero responsive ─────────────────────────────────────── */

@media (max-width: 1024px) {
  .hero__inner {
    gap: 40px;
  }

  .hero__content {
    flex: 0 0 52%;
    max-width: 52%;
  }

  .hero__graphic {
    flex: 0 0 48%;
    max-width: 48%;
  }
}

@media (max-width: 768px) {
  .hero {
    min-height: auto;
    padding: 80px 0 60px;
    align-items: flex-start;
  }

  .hero__inner {
    flex-direction: column;
    gap: 48px;
  }

  .hero__content,
  .hero__graphic {
    flex: 0 0 100%;
    max-width: 100%;
  }

  .hero__heading {
    font-size: clamp(32px, 8vw, 48px);
  }

  .hero__subheading {
    font-size: 16px;
  }

  .hero__ctas {
    flex-direction: column;
    align-items: stretch;
  }

  .hero__ctas .btn-primary,
  .hero__ctas .btn-secondary {
    width: 100%;
    justify-content: center;
  }
}

@media (max-width: 480px) {
  .hero {
    padding: 70px 0 48px;
  }

  .dashboard__metrics {
    grid-template-columns: repeat(3, 1fr);
  }

  .dashboard__metric-value {
    font-size: 17px;
  }
}

/* ============================================================
   H2 · HOME STATS COUNTER STRIP
   ============================================================ */

/* ── Section shell ───────────────────────────────────────── */

.stats-strip {
  position: relative;
  padding: 64px 0;
  border-top: 1px solid var(--color-border-dark);
  border-bottom: 1px solid var(--color-border-dark);
  overflow: hidden;
}

/* Subtle teal top glow line */
.stats-strip::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 320px;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    var(--color-teal),
    transparent
  );
  opacity: 0.5;
}

/* ── Inner layout — 4 items with dividers ────────────────── */

.stats-strip__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0;
  position: relative;
  z-index: 1;
}

/* ── Individual stat item ────────────────────────────────── */

.stats-strip__item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 8px 24px;
  gap: 6px;
}

/* ── Number row (number + suffix inline) ─────────────────── */

.stats-strip__number-row {
  display: flex;
  align-items: baseline;
  justify-content: center;
  line-height: 1;
  margin-bottom: 4px;
}

/* ── Animated counter number ─────────────────────────────── */

.stats-strip__number {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(40px, 4vw, 64px);
  color: var(--color-teal);
  line-height: 1;
  letter-spacing: -0.02em;
  /* Suffix (+ or %) is appended via JS as a data attribute,
     rendered as a ::after pseudo if provided via data-suffix  */
}

/* Suffix rendered alongside the number */
.stats-strip__number[data-suffix]::after {
  content: attr(data-suffix);
  font-size: 0.55em;
  font-weight: 700;
  color: var(--color-teal);
  margin-left: 2px;
  vertical-align: super;
  line-height: 0;
}

/* ── Label below number ──────────────────────────────────── */

.stats-strip__label {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: clamp(14px, 1.2vw, 17px);
  color: var(--color-white);
  letter-spacing: -0.01em;
  line-height: 1.3;
}

/* ── Sublabel — small descriptive line ───────────────────── */

.stats-strip__sublabel {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--color-muted);
  line-height: 1.5;
  max-width: 20ch;
}

/* ── Vertical dividers between stats ─────────────────────── */

.stats-strip__divider {
  width: 1px;
  height: 72px;
  background: linear-gradient(
    180deg,
    transparent,
    var(--color-teal),
    transparent
  );
  opacity: 0.25;
  flex-shrink: 0;
}

/* ── Stagger fade-in-up delays ───────────────────────────── */

.stats-strip__item:nth-child(1) { transition-delay: 0.05s; }
.stats-strip__item:nth-child(3) { transition-delay: 0.15s; }
.stats-strip__item:nth-child(5) { transition-delay: 0.25s; }
.stats-strip__item:nth-child(7) { transition-delay: 0.35s; }

/* ── Responsive ──────────────────────────────────────────── */

/* Tablet — tighten padding */
@media (max-width: 1024px) {
  .stats-strip__item {
    padding: 8px 16px;
  }

  .stats-strip__sublabel {
    display: none;
  }
}

/* Tablet portrait — 2 x 2 grid, hide vertical dividers */
@media (max-width: 768px) {
  .stats-strip {
    padding: 48px 0;
  }

  .stats-strip__inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px 16px;
  }

  .stats-strip__divider {
    display: none;
  }

  .stats-strip__item {
    padding: 8px 12px;
  }

  .stats-strip__sublabel {
    display: block;
  }
}

/* Mobile — keep 2 columns but tighter */
@media (max-width: 480px) {
  .stats-strip__inner {
    gap: 24px 8px;
  }

  .stats-strip__item {
    padding: 4px 8px;
  }

  .stats-strip__sublabel {
    display: none;
  }
}

/* ============================================================
   H3 · HOME SERVICES OVERVIEW
   ============================================================ */

/* ── Section header ──────────────────────────────────────── */

.services-overview__header {
  max-width: 680px;
  margin: 0 auto var(--space-xl);
}

.services-overview__subheading {
  font-size: clamp(15px, 1.3vw, 18px);
  color: var(--color-muted-light);
  line-height: 1.7;
  margin: var(--space-sm) auto 0;
  max-width: 58ch;
}

/* Override section-heading underline to centre on light bg */
.services-overview .section-heading::after {
  margin-left: auto;
  margin-right: auto;
}

/* ── Cards grid — 3 columns ──────────────────────────────── */

.services-overview__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-bottom: var(--space-xl);
}

/* ── Individual service card ─────────────────────────────── */

.svc-card {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 32px 28px;
  border-radius: var(--radius-md);
  position: relative;
  overflow: hidden;
}

/* Subtle teal corner accent */
.svc-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 3px;
  height: 0;
  background-color: var(--color-teal);
  border-radius: 0 0 3px 3px;
  transition: height var(--transition-slow);
}

.svc-card:hover::before {
  height: 100%;
}

/* ── Icon wrapper ────────────────────────────────────────── */

.svc-card__icon-wrap {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-md);
  background-color: var(--color-mint);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  transition: background-color var(--transition-base),
              transform var(--transition-base);
  flex-shrink: 0;
}

.svc-card:hover .svc-card__icon-wrap {
  background-color: var(--color-teal);
  transform: scale(1.05);
}

.svc-card__icon {
  font-size: 22px;
  color: var(--color-teal);
  transition: color var(--transition-base);
}

.svc-card:hover .svc-card__icon {
  color: var(--color-navy);
}

/* ── Card title ──────────────────────────────────────────── */

.svc-card__title {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 18px;
  color: var(--color-dark-text);
  margin-bottom: 12px;
  line-height: 1.3;
  transition: color var(--transition-fast);
}

.svc-card:hover .svc-card__title {
  color: var(--color-navy);
}

/* ── Card description ────────────────────────────────────── */

.svc-card__desc {
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--color-muted-light);
  line-height: 1.7;
  flex: 1;
  margin-bottom: 20px;
  max-width: none;
}

/* ── Learn more link ─────────────────────────────────────── */

.svc-card__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: var(--fs-small);
  color: var(--color-teal);
  text-decoration: none;
  transition: gap var(--transition-fast),
              color var(--transition-fast);
  margin-top: auto;
  align-self: flex-start;
}

.svc-card__link i {
  font-size: 11px;
  transition: transform var(--transition-fast);
}

.svc-card__link:hover {
  gap: 10px;
  color: #00b393;
}

.svc-card__link:hover i {
  transform: translateX(3px);
}

/* ── Bottom CTA ──────────────────────────────────────────── */

.services-overview__cta {
  margin-top: var(--space-sm);
}

/* ── Stagger fade-in-up delays for cards ─────────────────── */

.services-overview__grid .svc-card:nth-child(1) { transition-delay: 0.05s; }
.services-overview__grid .svc-card:nth-child(2) { transition-delay: 0.12s; }
.services-overview__grid .svc-card:nth-child(3) { transition-delay: 0.19s; }
.services-overview__grid .svc-card:nth-child(4) { transition-delay: 0.26s; }
.services-overview__grid .svc-card:nth-child(5) { transition-delay: 0.33s; }
.services-overview__grid .svc-card:nth-child(6) { transition-delay: 0.40s; }

/* ── Responsive ──────────────────────────────────────────── */

@media (max-width: 1024px) {
  .services-overview__grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
  }

  .svc-card {
    padding: 24px 20px;
  }
}

@media (max-width: 768px) {
  .services-overview__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }

  .services-overview__header {
    margin-bottom: var(--space-lg);
  }
}

@media (max-width: 480px) {
  .services-overview__grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .svc-card {
    padding: 24px 20px;
  }

  .svc-card__icon-wrap {
    width: 48px;
    height: 48px;
  }

  .svc-card__icon {
    font-size: 19px;
  }
}

/* ============================================================
   H4 · HOME — WHY VOXILYTICS
   ============================================================ */

/* ── Section inner — 2-column layout ────────────────────── */

.why-vox__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}

/* ── Left column ─────────────────────────────────────────── */

.why-vox__content {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.why-vox__content .tag-pill {
  align-self: flex-start;
  margin-bottom: 20px;
}

/* ── Section heading override for dark bg ────────────────── */

.why-vox__heading {
  color: var(--color-white);
  margin-bottom: 36px;
  line-height: 1.2;
}

/* ── Bullet list ─────────────────────────────────────────── */

.why-vox__bullets {
  display: flex;
  flex-direction: column;
  gap: 22px;
  margin-bottom: 40px;
}

/* Individual bullet row */
.why-vox__bullet {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

/* Teal check icon */
.why-vox__bullet-icon {
  color: var(--color-teal);
  font-size: 18px;
  flex-shrink: 0;
  margin-top: 2px;
}

/* Text block beside icon */
.why-vox__bullet-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.why-vox__bullet-text strong {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 15px;
  color: var(--color-white);
  line-height: 1.35;
}

.why-vox__bullet-text span {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--color-muted);
  line-height: 1.6;
}

/* ── CTA button ──────────────────────────────────────────── */

.why-vox__cta {
  align-self: flex-start;
}

/* ── Right column — feature tiles ───────────────────────── */

.why-vox__tiles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

/* Individual tile */
.why-vox__tile {
  background-color: var(--color-slate);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 24px 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
  cursor: default;
  transition: transform var(--transition-base),
              border-color var(--transition-base),
              box-shadow var(--transition-base),
              background-color var(--transition-base);
  position: relative;
  overflow: hidden;
}

/* Teal glow on hover */
.why-vox__tile:hover {
  transform: translateY(-4px);
  border-color: var(--color-teal);
  box-shadow: 0 8px 24px rgba(0, 201, 167, 0.15);
  background-color: rgba(0, 201, 167, 0.05);
}

/* Tile top accent bar on hover */
.why-vox__tile::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background-color: var(--color-teal);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--transition-base);
}

.why-vox__tile:hover::after {
  transform: scaleX(1);
}

/* Tile icon wrapper */
.why-vox__tile-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1.5px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 2px;
  transition: border-color var(--transition-base),
              background-color var(--transition-base);
}

.why-vox__tile-icon i {
  font-size: 18px;
  color: var(--color-teal);
  transition: color var(--transition-base);
}

.why-vox__tile:hover .why-vox__tile-icon {
  background-color: var(--color-teal);
  border-color: var(--color-teal);
}

.why-vox__tile:hover .why-vox__tile-icon i {
  color: var(--color-navy);
}

/* Tile label */
.why-vox__tile-label {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 13px;
  color: var(--color-white);
  line-height: 1.3;
  letter-spacing: -0.01em;
}

/* Tile sublabel */
.why-vox__tile-sub {
  font-family: var(--font-body);
  font-size: 11px;
  color: var(--color-muted);
  line-height: 1.4;
  letter-spacing: 0.01em;
}

/* ── Stagger delays — bullets ────────────────────────────── */

.why-vox__bullets .why-vox__bullet:nth-child(1) { transition-delay: 0.08s; }
.why-vox__bullets .why-vox__bullet:nth-child(2) { transition-delay: 0.16s; }
.why-vox__bullets .why-vox__bullet:nth-child(3) { transition-delay: 0.24s; }
.why-vox__bullets .why-vox__bullet:nth-child(4) { transition-delay: 0.32s; }
.why-vox__bullets .why-vox__bullet:nth-child(5) { transition-delay: 0.40s; }

/* ── Stagger delays — tiles ──────────────────────────────── */

.why-vox__tiles .why-vox__tile:nth-child(1) { transition-delay: 0.10s; }
.why-vox__tiles .why-vox__tile:nth-child(2) { transition-delay: 0.18s; }
.why-vox__tiles .why-vox__tile:nth-child(3) { transition-delay: 0.26s; }
.why-vox__tiles .why-vox__tile:nth-child(4) { transition-delay: 0.34s; }
.why-vox__tiles .why-vox__tile:nth-child(5) { transition-delay: 0.42s; }
.why-vox__tiles .why-vox__tile:nth-child(6) { transition-delay: 0.50s; }

/* ── Responsive ──────────────────────────────────────────── */

@media (max-width: 1024px) {
  .why-vox__inner {
    gap: 48px;
  }

  .why-vox__tiles {
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
  }

  .why-vox__tile {
    padding: 20px 12px;
  }
}

@media (max-width: 768px) {
  .why-vox__inner {
    grid-template-columns: 1fr;
    gap: 48px;
  }

  .why-vox__tiles {
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
  }

  .why-vox__heading br {
    display: none;
  }
}

@media (max-width: 480px) {
  .why-vox__tiles {
    grid-template-columns: repeat(2, 1fr);
  }

  .why-vox__bullet-text strong {
    font-size: 14px;
  }

  .why-vox__bullet-text span {
    font-size: 13px;
  }
}

/* ============================================================
   H5 · HOME — TESTIMONIALS
   ============================================================ */

/* ── Section header ──────────────────────────────────────── */

.testimonials__header {
  max-width: 640px;
  margin: 0 auto var(--space-xl);
}

.testimonials__subheading {
  font-size: clamp(15px, 1.3vw, 17px);
  color: var(--color-muted-light);
  line-height: 1.7;
  margin: var(--space-sm) auto 0;
  max-width: 52ch;
}

/* Centre teal underline */
.testimonials .section-heading::after {
  margin-left: auto;
  margin-right: auto;
}

/* ── Track wrapper — clips overflow on mobile ────────────── */

.testimonials__track-wrap {
  overflow: hidden;
  margin-bottom: var(--space-md);
}

/* ── Cards track — 3-column grid on desktop ──────────────── */

.testimonials__track {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── Individual testimonial card ─────────────────────────── */

.testi-card {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 36px 32px;
  position: relative;
  border-radius: var(--radius-md);
  border: 1px solid rgba(0, 0, 0, 0.07);
  background-color: var(--color-white);
  box-shadow: 0 2px 16px rgba(10, 22, 40, 0.06);
  transition: transform var(--transition-base),
              box-shadow var(--transition-base),
              border-color var(--transition-base);
}

.testi-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 40px rgba(10, 22, 40, 0.12);
  border-color: var(--color-teal);
}

/* ── Large decorative open-quote mark ────────────────────── */

.testi-card__quote-mark {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 72px;
  line-height: 0.7;
  color: var(--color-teal);
  opacity: 0.35;
  margin-bottom: 16px;
  user-select: none;
  flex-shrink: 0;
}

/* ── Star rating row ─────────────────────────────────────── */

.testi-card__stars {
  display: flex;
  gap: 4px;
  margin-bottom: 20px;
  flex-shrink: 0;
}

.testi-card__stars i {
  color: #F59E0B;
  font-size: 14px;
}

/* ── Quote text block ────────────────────────────────────── */

.testi-card__text {
  flex: 1;
  margin-bottom: 24px;
  border-left: none;
  padding-left: 0;
}

.testi-card__text p {
  font-family: var(--font-body);
  font-size: 15px;
  font-style: italic;
  color: var(--color-dark-text);
  line-height: 1.75;
  max-width: none;
  margin: 0;
}

/* ── Teal divider line ───────────────────────────────────── */

.testi-card__divider {
  height: 1px;
  background: linear-gradient(
    90deg,
    var(--color-teal),
    transparent
  );
  opacity: 0.3;
  margin-bottom: 20px;
  flex-shrink: 0;
}

/* ── Client info row ─────────────────────────────────────── */

.testi-card__client {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-shrink: 0;
}

/* Initials avatar circle */
.testi-card__avatar {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background-color: var(--color-teal);
  color: var(--color-navy);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  letter-spacing: 0.02em;
}

.testi-card__client-info {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

/* Client name */
.testi-card__name {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 15px;
  color: var(--color-dark-text);
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Role + company */
.testi-card__role {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--color-muted-light);
  line-height: 1.4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Dot navigation ──────────────────────────────────────── */

.testimonials__dots {
  display: none; /* shown only on mobile via media query */
  justify-content: center;
  gap: 8px;
  margin-bottom: var(--space-lg);
}

.testimonials__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: rgba(0, 201, 167, 0.25);
  border: none;
  cursor: pointer;
  padding: 0;
  min-height: auto;
  transition: background-color var(--transition-base),
              transform var(--transition-base),
              width var(--transition-base);
}

.testimonials__dot.is-active {
  background-color: var(--color-teal);
  width: 24px;
  border-radius: 4px;
}

/* ── Trust bar ───────────────────────────────────────────── */

.testimonials__trust {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  flex-wrap: wrap;
  margin-top: var(--space-xl);
  padding: 24px 32px;
  background-color: var(--color-white);
  border: 1px solid rgba(0, 0, 0, 0.07);
  border-radius: var(--radius-md);
  box-shadow: 0 2px 12px rgba(10, 22, 40, 0.05);
}

.testimonials__trust-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 28px;
  flex: 1;
  justify-content: center;
  min-width: 180px;
}

.testimonials__trust-item i {
  color: var(--color-teal);
  font-size: 17px;
  flex-shrink: 0;
}

.testimonials__trust-item span {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 14px;
  color: var(--color-dark-text);
  white-space: nowrap;
}

/* Vertical separator between trust items */
.testimonials__trust-sep {
  width: 1px;
  height: 28px;
  background-color: rgba(0, 0, 0, 0.1);
  flex-shrink: 0;
}

/* ── Stagger fade-in-up delays ───────────────────────────── */

.testimonials__track .testi-card:nth-child(1) { transition-delay: 0.08s; }
.testimonials__track .testi-card:nth-child(2) { transition-delay: 0.18s; }
.testimonials__track .testi-card:nth-child(3) { transition-delay: 0.28s; }

/* ── Responsive ──────────────────────────────────────────── */

@media (max-width: 1024px) {
  .testi-card {
    padding: 28px 24px;
  }

  .testi-card__quote-mark {
    font-size: 60px;
  }
}

@media (max-width: 768px) {
  /* Switch to single-card carousel on mobile */
  .testimonials__track-wrap {
    overflow: hidden;
  }

  .testimonials__track {
    grid-template-columns: repeat(3, 100%);
    gap: 0;
    /* JS controls translateX to show one card at a time */
  }

  .testi-card {
    padding: 28px 24px;
    /* Each card takes exactly 100% of the wrap width */
    width: 100%;
  }

  /* Show dot nav on mobile */
  .testimonials__dots {
    display: flex;
  }

  /* Hide trust bar separators on small screens */
  .testimonials__trust-sep {
    display: none;
  }

  .testimonials__trust {
    flex-direction: column;
    gap: 12px;
    padding: 20px 24px;
  }

  .testimonials__trust-item {
    justify-content: flex-start;
    padding: 4px 0;
    min-width: auto;
  }
}

@media (max-width: 480px) {
  .testimonials__header {
    margin-bottom: var(--space-lg);
  }

  .testi-card__quote-mark {
    font-size: 52px;
  }

  .testi-card__text p {
    font-size: 14px;
  }

  .testimonials__trust-item span {
    font-size: 13px;
    white-space: normal;
  }
}

/* ============================================================
   H6 · HOME — INTERNSHIP CTA BANNER
   ============================================================ */

/* ── Section shell ───────────────────────────────────────── */

.intern-banner {
  position: relative;
  overflow: hidden;
  padding: 80px 0 100px;
}

/* ── Inner layout — 2 columns ────────────────────────────── */

.intern-banner__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
  position: relative;
  z-index: 2;
}

/* ── Left column ─────────────────────────────────────────── */

.intern-banner__content {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.intern-banner__content .tag-pill--inverted {
  align-self: flex-start;
  margin-bottom: 20px;
}

/* ── Heading ─────────────────────────────────────────────── */

.intern-banner__heading {
  font-size: clamp(28px, 3vw, 44px);
  font-weight: 700;
  color: var(--color-navy);
  line-height: 1.15;
  margin-bottom: 20px;
  letter-spacing: -0.02em;
}

/* ── Description paragraph ───────────────────────────────── */

.intern-banner__desc {
  font-size: clamp(15px, 1.3vw, 17px);
  color: rgba(10, 22, 40, 0.72);
  line-height: 1.7;
  margin-bottom: 28px;
  max-width: 50ch;
}

/* ── Benefit pills row ───────────────────────────────────── */

.intern-banner__pills {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 32px;
}

/* Individual benefit pill */
.intern-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-label);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-navy);
  background-color: rgba(10, 22, 40, 0.1);
  border: 1px solid rgba(10, 22, 40, 0.18);
  border-radius: var(--radius-full);
  padding: 7px 16px;
  white-space: nowrap;
  transition: background-color var(--transition-fast),
              border-color var(--transition-fast);
}

.intern-pill:hover {
  background-color: rgba(10, 22, 40, 0.16);
  border-color: rgba(10, 22, 40, 0.3);
}

.intern-pill i {
  font-size: 11px;
  opacity: 0.8;
}

/* ── CTA button ──────────────────────────────────────────── */

.intern-banner__cta {
  align-self: flex-start;
}

/* ── Right column ────────────────────────────────────────── */

.intern-banner__info {
  display: flex;
  flex-direction: column;
  gap: 20px;
  position: relative;
}

/* ── Decorative SVG background ───────────────────────────── */

.intern-banner__graphic {
  position: absolute;
  top: 50%;
  right: -40px;
  transform: translateY(-50%);
  width: 320px;
  height: 280px;
  pointer-events: none;
  z-index: 0;
}

.intern-banner__svg {
  width: 100%;
  height: 100%;
  animation: floatUp 8s ease-in-out infinite;
}

/* ── Individual info row ─────────────────────────────────── */

.intern-info-row {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  background-color: rgba(10, 22, 40, 0.07);
  border: 1px solid rgba(10, 22, 40, 0.1);
  border-radius: var(--radius-md);
  padding: 18px 20px;
  position: relative;
  z-index: 1;
  transition: background-color var(--transition-base),
              border-color var(--transition-base),
              transform var(--transition-base);
}

.intern-info-row:hover {
  background-color: rgba(10, 22, 40, 0.12);
  border-color: rgba(10, 22, 40, 0.2);
  transform: translateX(4px);
}

/* Icon circle */
.intern-info-row__icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: rgba(10, 22, 40, 0.12);
  border: 1px solid rgba(10, 22, 40, 0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background-color var(--transition-base);
}

.intern-info-row__icon i {
  font-size: 16px;
  color: var(--color-navy);
}

.intern-info-row:hover .intern-info-row__icon {
  background-color: rgba(10, 22, 40, 0.2);
}

/* Text block */
.intern-info-row__text {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.intern-info-row__text strong {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 15px;
  color: var(--color-navy);
  line-height: 1.3;
}

.intern-info-row__text span {
  font-family: var(--font-body);
  font-size: 13px;
  color: rgba(10, 22, 40, 0.65);
  line-height: 1.5;
}

/* ── Bottom wave ─────────────────────────────────────────── */

.intern-banner__wave {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 48px;
  pointer-events: none;
  z-index: 1;
}

.intern-banner__wave svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* ── Stagger delays — left column ────────────────────────── */

.intern-banner__content .fade-in-up:nth-child(1) { transition-delay: 0.05s; }
.intern-banner__content .fade-in-up:nth-child(2) { transition-delay: 0.12s; }
.intern-banner__content .fade-in-up:nth-child(3) { transition-delay: 0.19s; }
.intern-banner__content .fade-in-up:nth-child(4) { transition-delay: 0.26s; }
.intern-banner__content .fade-in-up:nth-child(5) { transition-delay: 0.33s; }

/* ── Stagger delays — right column ──────────────────────── */

.intern-banner__info .intern-info-row:nth-child(2) { transition-delay: 0.10s; }
.intern-banner__info .intern-info-row:nth-child(3) { transition-delay: 0.18s; }
.intern-banner__info .intern-info-row:nth-child(4) { transition-delay: 0.26s; }
.intern-banner__info .intern-info-row:nth-child(5) { transition-delay: 0.34s; }

/* ── Responsive ──────────────────────────────────────────── */

@media (max-width: 1024px) {
  .intern-banner__inner {
    gap: 40px;
  }

  .intern-banner__graphic {
    width: 240px;
    height: 210px;
    right: -20px;
  }
}

@media (max-width: 768px) {
  .intern-banner {
    padding: 60px 0 80px;
  }

  .intern-banner__inner {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .intern-banner__heading br {
    display: none;
  }

  .intern-banner__desc {
    max-width: none;
  }

  .intern-banner__graphic {
    display: none;
  }

  .intern-banner__cta {
    width: 100%;
    justify-content: center;
  }
}

@media (max-width: 480px) {
  .intern-banner {
    padding: 48px 0 64px;
  }

  .intern-banner__pills {
    gap: 8px;
  }

  .intern-pill {
    font-size: 11px;
    padding: 6px 12px;
  }

  .intern-info-row {
    padding: 14px 16px;
  }
}

/* ============================================================
   PAGE SECTIONS — ABOUT.HTML
   ============================================================ */

/* ============================================================
   A1 · ABOUT — PAGE HERO
   ============================================================ */

/* ── Section shell ───────────────────────────────────────── */

.about-hero {
  position: relative;
  padding: 100px 0 80px;
  overflow: hidden;
  min-height: 72vh;
  display: flex;
  align-items: center;
}

/* ── Inner layout — centred column ──────────────────────── */

.about-hero__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 48px;
  position: relative;
  z-index: 2;
  width: 100%;
}

/* ── Hero text block ─────────────────────────────────────── */

.about-hero__content {
  max-width: 760px;
  width: 100%;
}

.about-hero__content .tag-pill {
  margin-bottom: 20px;
  display: inline-block;
}

/* ── H1 heading ──────────────────────────────────────────── */

.about-hero__heading {
  font-size: clamp(36px, 5vw, 68px);
  font-weight: 700;
  color: var(--color-white);
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin-bottom: 24px;
}

/* ── Subheading paragraph ────────────────────────────────── */

.about-hero__subheading {
  font-size: clamp(16px, 1.5vw, 19px);
  color: var(--color-muted);
  line-height: 1.75;
  max-width: 58ch;
  margin: 0 auto 36px;
}

/* ── Quick-link pills row ────────────────────────────────── */

.about-hero__links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}

.about-hero__quicklink {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-label);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-muted);
  background-color: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--color-border-dark);
  border-radius: var(--radius-full);
  padding: 8px 18px;
  text-decoration: none;
  transition: color var(--transition-fast),
              background-color var(--transition-fast),
              border-color var(--transition-fast),
              transform var(--transition-fast);
  white-space: nowrap;
}

.about-hero__quicklink i {
  font-size: 11px;
  color: var(--color-teal);
  flex-shrink: 0;
}

.about-hero__quicklink:hover {
  color: var(--color-white);
  background-color: rgba(0, 201, 167, 0.08);
  border-color: var(--color-border);
  transform: translateY(-2px);
}

/* ── Animated waveform block ─────────────────────────────── */

.about-hero__waveform {
  width: 100%;
  max-width: 900px;
  height: 80px;
  position: relative;
  overflow: hidden;
}

.about-hero__wave-svg {
  width: 200%;
  height: 100%;
  display: block;
  animation: waveMove 10s linear infinite;
}

/* ── Bottom fade gradient ────────────────────────────────── */

.about-hero__fade {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 120px;
  background: linear-gradient(
    to bottom,
    transparent,
    var(--color-navy)
  );
  pointer-events: none;
  z-index: 1;
}

/* ── Decorative data nodes ───────────────────────────────── */

.about-hero__nodes {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  overflow: hidden;
}

.about-hero__node {
  position: absolute;
  border-radius: 50%;
  background-color: var(--color-teal);
  animation: floatUp 7s ease-in-out infinite;
}

.about-hero__node--1 {
  width: 10px; height: 10px;
  top: 20%; left: 6%;
  opacity: 0.18;
  animation-duration: 8s;
  animation-delay: 0s;
}
.about-hero__node--2 {
  width: 6px; height: 6px;
  top: 60%; left: 10%;
  opacity: 0.12;
  animation-duration: 10s;
  animation-delay: 1.5s;
  background-color: var(--color-blue);
}
.about-hero__node--3 {
  width: 8px; height: 8px;
  top: 25%; left: 90%;
  opacity: 0.15;
  animation-duration: 9s;
  animation-delay: 0.8s;
}
.about-hero__node--4 {
  width: 5px; height: 5px;
  top: 70%; left: 85%;
  opacity: 0.12;
  animation-duration: 11s;
  animation-delay: 2.5s;
  background-color: var(--color-blue);
}
.about-hero__node--5 {
  width: 7px; height: 7px;
  top: 45%; left: 50%;
  opacity: 0.08;
  animation-duration: 13s;
  animation-delay: 3.5s;
}

/* ── Breadcrumb component ────────────────────────────────── */
/*
   Reusable across all inner pages.
   Always sits at the top of the hero, above the H1.
*/

.breadcrumb {
  width: 100%;
  display: flex;
  justify-content: center;
}

.breadcrumb__list {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
}

.breadcrumb__item {
  display: flex;
  align-items: center;
}

.breadcrumb__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-label);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-teal);
  text-decoration: none;
  transition: color var(--transition-fast),
              opacity var(--transition-fast);
}

.breadcrumb__link i {
  font-size: 11px;
}

.breadcrumb__link:hover {
  color: var(--color-white);
}

.breadcrumb__sep {
  font-size: 13px;
  color: var(--color-border);
  user-select: none;
  line-height: 1;
}

.breadcrumb__current {
  font-family: var(--font-label);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-muted);
}

/* ── Stagger fade-in-up delays ───────────────────────────── */

.about-hero__inner > .fade-in-up:nth-child(1) { transition-delay: 0.05s; }
.about-hero__content .fade-in-up:nth-child(1) { transition-delay: 0.10s; }
.about-hero__content .fade-in-up:nth-child(2) { transition-delay: 0.18s; }
.about-hero__content .fade-in-up:nth-child(3) { transition-delay: 0.26s; }
.about-hero__content .fade-in-up:nth-child(4) { transition-delay: 0.34s; }
.about-hero__inner > .fade-in-up:last-child   { transition-delay: 0.42s; }

/* ── Responsive ──────────────────────────────────────────── */

@media (max-width: 1024px) {
  .about-hero {
    min-height: 60vh;
    padding: 90px 0 70px;
  }
}

@media (max-width: 768px) {
  .about-hero {
    min-height: auto;
    padding: 80px 0 60px;
  }

  .about-hero__heading br {
    display: none;
  }

  .about-hero__subheading {
    font-size: 16px;
  }

  .about-hero__waveform {
    height: 60px;
  }

  .about-hero__links {
    gap: 8px;
  }

  .about-hero__quicklink {
    font-size: 11px;
    padding: 7px 14px;
  }
}

@media (max-width: 480px) {
  .about-hero {
    padding: 70px 0 48px;
  }

  .about-hero__links {
    flex-direction: column;
    align-items: center;
  }

  .about-hero__quicklink {
    width: 100%;
    justify-content: center;
    max-width: 240px;
  }
}

/* ============================================================
   A2 · ABOUT — MISSION & VISION
   ============================================================ */

/* ── 2-column grid ───────────────────────────────────────── */

.mission-vision__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  margin-bottom: var(--space-xl);
}

/* ── Mission / Vision card ───────────────────────────────── */

.mv-card {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 40px 36px;
  border-radius: var(--radius-md);
  border: 1px solid rgba(0, 0, 0, 0.07);
  background-color: var(--color-white);
  /* Teal left border accent from .card-accent in global.css */
  transition: transform var(--transition-base),
              box-shadow var(--transition-base);
}

.mv-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-card);
}

/* ── Top row — icon + pill ───────────────────────────────── */

.mv-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
}

/* Icon wrapper — teal variant (default) */
.mv-card__icon-wrap {
  width: 52px;
  height: 52px;
  border-radius: var(--radius-md);
  background-color: var(--color-mint);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background-color var(--transition-base),
              transform var(--transition-base);
}

.mv-card:hover .mv-card__icon-wrap {
  background-color: var(--color-teal);
  transform: scale(1.06) rotate(-4deg);
}

/* Icon — teal */
.mv-card__icon {
  font-size: 22px;
  color: var(--color-teal);
  transition: color var(--transition-base);
}

.mv-card:hover .mv-card__icon {
  color: var(--color-navy);
}

/* Icon wrapper — blue variant (vision card) */
.mv-card__icon-wrap--blue {
  background-color: rgba(21, 101, 200, 0.1);
}

.mv-card:hover .mv-card__icon-wrap--blue {
  background-color: var(--color-blue);
}

/* Icon — blue variant */
.mv-card__icon--blue {
  color: var(--color-blue);
}

.mv-card:hover .mv-card__icon--blue {
  color: var(--color-white);
}

/* ── Card heading ────────────────────────────────────────── */

.mv-card__heading {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(18px, 2vw, 24px);
  color: var(--color-dark-text);
  line-height: 1.25;
  margin-bottom: 18px;
  letter-spacing: -0.01em;
}

/* ── Body paragraphs ─────────────────────────────────────── */

.mv-card__body {
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--color-muted-light);
  line-height: 1.75;
  margin-bottom: 14px;
  max-width: none;
}

.mv-card__body:last-of-type {
  margin-bottom: 24px;
}

/* ── Pillar list ─────────────────────────────────────────── */

.mv-card__pillars {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: auto;
  padding-top: 20px;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
}

.mv-card__pillar {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--color-dark-text);
  line-height: 1.5;
}

.mv-card__pillar i {
  color: var(--color-teal);
  font-size: 8px;
  margin-top: 5px;
  flex-shrink: 0;
}

/* Vision card pillar dots use blue */
.mv-card:nth-child(2) .mv-card__pillar i {
  color: var(--color-blue);
}

/* ── Bottom stat bar ─────────────────────────────────────── */

.mv-stat-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: var(--color-white);
  border: 1px solid rgba(0, 0, 0, 0.07);
  border-radius: var(--radius-md);
  padding: 28px 40px;
  box-shadow: 0 2px 12px rgba(10, 22, 40, 0.05);
  gap: 0;
  flex-wrap: wrap;
}

/* Individual stat item */
.mv-stat-bar__item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 5px;
  padding: 4px 16px;
  min-width: 120px;
}

/* Stat value */
.mv-stat-bar__value {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(28px, 3vw, 40px);
  color: var(--color-teal);
  line-height: 1;
  letter-spacing: -0.02em;
}

/* Suffix (+, %, wd) */
.mv-stat-bar__suffix {
  font-size: 0.55em;
  font-weight: 700;
  color: var(--color-teal);
  margin-left: 2px;
  vertical-align: super;
  line-height: 0;
}

/* Stat label */
.mv-stat-bar__label {
  font-family: var(--font-label);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-muted-light);
  line-height: 1.4;
  max-width: 16ch;
  text-align: center;
}

/* Vertical dividers */
.mv-stat-bar__div {
  width: 1px;
  height: 48px;
  background: linear-gradient(
    180deg,
    transparent,
    rgba(0, 201, 167, 0.3),
    transparent
  );
  flex-shrink: 0;
}

/* ── Stagger fade-in-up delays ───────────────────────────── */

.mission-vision__grid .mv-card:nth-child(1) { transition-delay: 0.08s; }
.mission-vision__grid .mv-card:nth-child(2) { transition-delay: 0.18s; }
.mv-stat-bar.fade-in-up                     { transition-delay: 0.28s; }

/* ── Responsive ──────────────────────────────────────────── */

@media (max-width: 1024px) {
  .mv-card {
    padding: 32px 28px;
  }

  .mv-stat-bar {
    padding: 24px 28px;
  }
}

@media (max-width: 768px) {
  .mission-vision__grid {
    grid-template-columns: 1fr;
    gap: 20px;
    margin-bottom: var(--space-lg);
  }

  .mv-stat-bar {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px 0;
    padding: 24px 20px;
  }

  .mv-stat-bar__div {
    display: none;
  }

  .mv-stat-bar__item {
    min-width: auto;
    padding: 0 8px;
  }
}

@media (max-width: 480px) {
  .mv-card {
    padding: 28px 22px;
  }

  .mv-card__top {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .mv-stat-bar {
    grid-template-columns: 1fr 1fr;
  }

  .mv-stat-bar__label {
    font-size: 11px;
  }
}

/* ============================================================
   A3 · ABOUT — OUR STORY TIMELINE
   ============================================================ */

/* ── Section header ──────────────────────────────────────── */

.our-story__header {
  max-width: 600px;
  margin: 0 auto var(--space-xl);
}

.our-story__title {
  color: var(--color-white);
}

.our-story__title::after {
  margin-left: auto;
  margin-right: auto;
}

.our-story__subheading {
  font-size: clamp(15px, 1.3vw, 17px);
  color: var(--color-muted);
  line-height: 1.7;
  margin: var(--space-sm) auto 0;
  max-width: 52ch;
}

/* ── Timeline wrapper ────────────────────────────────────── */

.timeline {
  position: relative;
  max-width: 960px;
  margin: 0 auto;
  padding-bottom: 40px;
}

/* ── Central vertical line ───────────────────────────────── */

.timeline__line {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 2px;
  background-color: var(--color-border-dark);
  z-index: 0;
  overflow: hidden;
}

/* Animated teal fill that grows down as user scrolls */
.timeline__line-fill {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 0%;
  background: linear-gradient(
    180deg,
    var(--color-teal),
    rgba(0, 201, 167, 0.3)
  );
  transition: height 0.15s ease;
  border-radius: 2px;
}

/* ── Individual timeline entry ───────────────────────────── */

.timeline__entry {
  display: grid;
  grid-template-columns: 1fr 48px 1fr;
  align-items: start;
  gap: 0;
  margin-bottom: 56px;
  position: relative;
  z-index: 1;
}

/* Left entries: card in col 1, node in col 2, empty col 3 */
.timeline__entry--left .timeline__card {
  grid-column: 1;
  grid-row: 1;
  margin-right: 32px;
  text-align: right;
}

.timeline__entry--left .timeline__node {
  grid-column: 2;
  grid-row: 1;
}

/* Right entries: empty col 1, node in col 2, card in col 3 */
.timeline__entry--right .timeline__node {
  grid-column: 2;
  grid-row: 1;
}

.timeline__entry--right .timeline__card {
  grid-column: 3;
  grid-row: 1;
  margin-left: 32px;
  text-align: left;
}

/* ── Timeline card ───────────────────────────────────────── */

.timeline__card {
  background-color: var(--color-slate);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 28px 28px 22px;
  transition: transform var(--transition-base),
              border-color var(--transition-base),
              box-shadow var(--transition-base);
  position: relative;
}

.timeline__card:hover {
  transform: translateY(-4px);
  border-color: var(--color-teal);
  box-shadow: 0 8px 28px rgba(0, 201, 167, 0.1);
}

/* Connector arrow pointing toward the central line */
.timeline__entry--left .timeline__card::after {
  content: '';
  position: absolute;
  top: 28px;
  right: -10px;
  width: 0;
  height: 0;
  border-top: 9px solid transparent;
  border-bottom: 9px solid transparent;
  border-left: 10px solid var(--color-border);
  transition: border-left-color var(--transition-base);
}

.timeline__entry--left .timeline__card:hover::after {
  border-left-color: var(--color-teal);
}

.timeline__entry--right .timeline__card::before {
  content: '';
  position: absolute;
  top: 28px;
  left: -10px;
  width: 0;
  height: 0;
  border-top: 9px solid transparent;
  border-bottom: 9px solid transparent;
  border-right: 10px solid var(--color-border);
  transition: border-right-color var(--transition-base);
}

.timeline__entry--right .timeline__card:hover::before {
  border-right-color: var(--color-teal);
}

/* ── Card top row — year + quarter ───────────────────────── */

.timeline__card-top {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 10px;
}

/* Left cards: align right */
.timeline__entry--left .timeline__card-top {
  justify-content: flex-end;
}

/* Right cards: align left */
.timeline__entry--right .timeline__card-top {
  justify-content: flex-start;
}

.timeline__year {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 22px;
  color: var(--color-teal);
  line-height: 1;
  letter-spacing: -0.02em;
}

.timeline__quarter {
  font-family: var(--font-label);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-muted);
  line-height: 1;
}

/* ── Event title ─────────────────────────────────────────── */

.timeline__event-title {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: clamp(16px, 1.5vw, 20px);
  color: var(--color-white);
  line-height: 1.3;
  margin-bottom: 12px;
}

/* ── Description ─────────────────────────────────────────── */

.timeline__desc {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--color-muted);
  line-height: 1.75;
  margin-bottom: 18px;
  max-width: none;
}

.timeline__desc em {
  font-style: italic;
  color: var(--color-teal);
}

/* ── Card footer — tag pills ─────────────────────────────── */

.timeline__card-footer {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  border-top: 1px solid var(--color-border-dark);
  padding-top: 14px;
}

.timeline__entry--left .timeline__card-footer {
  justify-content: flex-end;
}

.timeline__entry--right .timeline__card-footer {
  justify-content: flex-start;
}

.timeline__tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-label);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-muted);
  background-color: rgba(0, 201, 167, 0.06);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  padding: 4px 10px;
  white-space: nowrap;
  transition: color var(--transition-fast),
              background-color var(--transition-fast),
              border-color var(--transition-fast);
}

.timeline__tag i {
  font-size: 9px;
  color: var(--color-teal);
  flex-shrink: 0;
}

.timeline__card:hover .timeline__tag {
  color: var(--color-teal);
  background-color: rgba(0, 201, 167, 0.1);
  border-color: rgba(0, 201, 167, 0.3);
}

/* ── Central node ────────────────────────────────────────── */

.timeline__node {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 22px;
  position: relative;
  z-index: 2;
}

/* Inner filled circle */
.timeline__node-inner {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background-color: var(--color-navy);
  border: 2px solid var(--color-teal);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-teal);
  font-size: 16px;
  position: relative;
  z-index: 2;
  transition: background-color var(--transition-base),
              color var(--transition-base),
              transform var(--transition-base),
              box-shadow var(--transition-base);
  flex-shrink: 0;
}

/* Outer ripple ring */
.timeline__node-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, calc(-50% + 22px));
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 2px solid var(--color-teal);
  opacity: 0;
  pointer-events: none;
}

/* Active node state — triggered by JS on scroll */
.timeline__entry.is-active .timeline__node-inner {
  background-color: var(--color-teal);
  color: var(--color-navy);
  transform: scale(1.12);
  box-shadow: 0 0 0 6px rgba(0, 201, 167, 0.15);
}

.timeline__entry.is-active .timeline__node-ring {
  animation: nodeRipple 1.2s ease-out forwards;
}

/* ── Future node ─────────────────────────────────────────── */

.timeline__future {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  position: relative;
  z-index: 1;
}

.timeline__future-node {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 2px dashed var(--color-border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-muted);
  font-size: 16px;
  background-color: var(--color-navy);
}

.timeline__future-label {
  font-family: var(--font-label);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-muted);
  max-width: none;
  margin: 0;
}

/* ── Stagger fade-in-up delays ───────────────────────────── */

.our-story__header.fade-in-up             { transition-delay: 0.05s; }
.timeline__entry:nth-child(2).fade-in-up  { transition-delay: 0.10s; }
.timeline__entry:nth-child(3).fade-in-up  { transition-delay: 0.18s; }
.timeline__entry:nth-child(4).fade-in-up  { transition-delay: 0.26s; }
.timeline__entry:nth-child(5).fade-in-up  { transition-delay: 0.34s; }
.timeline__future.fade-in-up              { transition-delay: 0.42s; }

/* ── Responsive ──────────────────────────────────────────── */

@media (max-width: 768px) {

  /* Collapse to single left-aligned column */
  .timeline__line {
    left: 22px;
    transform: none;
  }

  .timeline__entry {
    grid-template-columns: 48px 1fr;
    grid-template-rows: auto;
    gap: 0;
    margin-bottom: 40px;
  }

  /* Both entry types: node left, card right */
  .timeline__entry--left .timeline__card,
  .timeline__entry--right .timeline__card {
    grid-column: 2;
    grid-row: 1;
    text-align: left;
    margin-right: 0;
    margin-left: 16px;
  }

  .timeline__entry--left .timeline__node,
  .timeline__entry--right .timeline__node {
    grid-column: 1;
    grid-row: 1;
  }

  /* Remove left-card connector arrow on mobile */
  .timeline__entry--left .timeline__card::after {
    display: none;
  }

  /* Right-card arrow becomes left-pointing on mobile */
  .timeline__entry--right .timeline__card::before {
    display: block;
    left: -10px;
    top: 22px;
  }

  /* Consistent left arrow for all cards on mobile */
  .timeline__entry--left .timeline__card::before {
    content: '';
    position: absolute;
    top: 22px;
    left: -10px;
    width: 0;
    height: 0;
    border-top: 9px solid transparent;
    border-bottom: 9px solid transparent;
    border-right: 10px solid var(--color-border);
    transition: border-right-color var(--transition-base);
    display: block;
  }

  .timeline__entry--left .timeline__card:hover::before {
    border-right-color: var(--color-teal);
  }

  .timeline__entry--left .timeline__card-top,
  .timeline__entry--right .timeline__card-top {
    justify-content: flex-start;
  }

  .timeline__entry--left .timeline__card-footer,
  .timeline__entry--right .timeline__card-footer {
    justify-content: flex-start;
  }

  .timeline__future {
    margin-left: 22px;
    align-items: flex-start;
    flex-direction: row;
    gap: 16px;
  }

  .timeline__future-label {
    margin-top: 12px;
  }
}

@media (max-width: 480px) {
  .timeline__card {
    padding: 22px 18px 16px;
  }

  .timeline__node-inner {
    width: 38px;
    height: 38px;
    font-size: 14px;
  }
}

/* ============================================================
   A4 · ABOUT — CORE VALUES
   ============================================================ */

/* ── Section header ──────────────────────────────────────── */

.core-values__header {
  max-width: 640px;
  margin: 0 auto var(--space-xl);
}

.core-values__title::after {
  margin-left: auto;
  margin-right: auto;
}

.core-values__subheading {
  font-size: clamp(15px, 1.3vw, 17px);
  color: var(--color-muted-light);
  line-height: 1.7;
  margin: var(--space-sm) auto 0;
  max-width: 52ch;
}

/* ── Values grid — 2x2 ───────────────────────────────────── */

.core-values__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-bottom: var(--space-xl);
}

/* ── Individual value card ───────────────────────────────── */

.value-card {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 24px;
  padding: 36px 32px;
  border-radius: var(--radius-md);
  border: 1px solid rgba(0, 0, 0, 0.07);
  background-color: var(--color-white);
  position: relative;
  overflow: hidden;
  transition: transform var(--transition-base),
              box-shadow var(--transition-base),
              border-color var(--transition-base);
}

.value-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 16px 48px rgba(10, 22, 40, 0.1);
  border-color: var(--color-teal);
}

/* Decorative number watermark */
.value-card::before {
  content: attr(data-number);
  position: absolute;
  bottom: -12px;
  right: 16px;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 96px;
  color: rgba(0, 201, 167, 0.05);
  line-height: 1;
  pointer-events: none;
  user-select: none;
  transition: color var(--transition-slow);
}

.value-card:hover::before {
  color: rgba(0, 201, 167, 0.09);
}

/* ── Icon wrapper — large teal circle ───────────────────── */

.value-card__icon-wrap {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background-color: var(--color-mint);
  border: 2px solid rgba(0, 201, 167, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background-color var(--transition-base),
              border-color var(--transition-base),
              transform var(--transition-base),
              box-shadow var(--transition-base);
}

.value-card:hover .value-card__icon-wrap {
  background-color: var(--color-teal);
  border-color: var(--color-teal);
  transform: scale(1.08) rotate(-6deg);
  box-shadow: 0 8px 24px rgba(0, 201, 167, 0.3);
}

.value-card__icon {
  font-size: 26px;
  color: var(--color-teal);
  transition: color var(--transition-base),
              transform var(--transition-base);
}

.value-card:hover .value-card__icon {
  color: var(--color-navy);
  transform: scale(1.05);
}

/* ── Body — text content ─────────────────────────────────── */

.value-card__body {
  flex: 1;
  min-width: 0;
  position: relative;
}

/* Large muted number — decorative counter */
.value-card__number {
  font-family: var(--font-label);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-teal);
  opacity: 0.7;
  margin-bottom: 8px;
  line-height: 1;
}

/* Value title */
.value-card__title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(18px, 1.8vw, 22px);
  color: var(--color-dark-text);
  line-height: 1.2;
  margin-bottom: 14px;
  letter-spacing: -0.01em;
  transition: color var(--transition-fast);
}

.value-card:hover .value-card__title {
  color: var(--color-navy);
}

/* Description paragraphs */
.value-card__desc {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--color-muted-light);
  line-height: 1.75;
  margin-bottom: 12px;
  max-width: none;
}

.value-card__desc:last-of-type {
  margin-bottom: 18px;
}

/* ── Traits list ─────────────────────────────────────────── */

.value-card__traits {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 16px;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
}

.value-card__traits li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--color-dark-text);
  line-height: 1.5;
}

.value-card__traits li i {
  color: var(--color-teal);
  font-size: 12px;
  margin-top: 2px;
  flex-shrink: 0;
  transition: transform var(--transition-base);
}

.value-card:hover .value-card__traits li i {
  transform: scale(1.15);
}

/* ── Bottom CTA strip ────────────────────────────────────── */

.core-values__cta-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  background-color: var(--color-white);
  border: 1px solid rgba(0, 0, 0, 0.07);
  border-left: 4px solid var(--color-teal);
  border-radius: var(--radius-md);
  padding: 32px 40px;
  box-shadow: 0 2px 12px rgba(10, 22, 40, 0.05);
  flex-wrap: wrap;
}

.core-values__cta-text {
  flex: 1;
  min-width: 240px;
}

.core-values__cta-heading {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: clamp(16px, 1.5vw, 19px);
  color: var(--color-dark-text);
  line-height: 1.35;
  margin-bottom: 6px;
  max-width: none;
}

.core-values__cta-sub {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--color-muted-light);
  line-height: 1.6;
  max-width: none;
  margin: 0;
}

.core-values__cta-actions {
  display: flex;
  gap: 12px;
  flex-shrink: 0;
  flex-wrap: wrap;
}

/* ── Stagger fade-in-up delays ───────────────────────────── */

.core-values__header.fade-in-up              { transition-delay: 0.05s; }
.core-values__grid .value-card:nth-child(1)  { transition-delay: 0.10s; }
.core-values__grid .value-card:nth-child(2)  { transition-delay: 0.18s; }
.core-values__grid .value-card:nth-child(3)  { transition-delay: 0.26s; }
.core-values__grid .value-card:nth-child(4)  { transition-delay: 0.34s; }
.core-values__cta-strip.fade-in-up           { transition-delay: 0.42s; }

/* ── Responsive ──────────────────────────────────────────── */

@media (max-width: 1024px) {
  .value-card {
    padding: 28px 24px;
    gap: 20px;
  }

  .value-card__icon-wrap {
    width: 56px;
    height: 56px;
  }

  .value-card__icon {
    font-size: 22px;
  }
}

@media (max-width: 768px) {
  .core-values__grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .core-values__cta-strip {
    flex-direction: column;
    align-items: flex-start;
    padding: 28px 24px;
    gap: 20px;
  }

  .core-values__cta-actions {
    width: 100%;
  }

  .core-values__cta-actions .btn-primary,
  .core-values__cta-actions .btn-secondary {
    flex: 1;
    justify-content: center;
  }
}

@media (max-width: 480px) {
  .value-card {
    flex-direction: column;
    gap: 16px;
    padding: 24px 20px;
  }

  .value-card__icon-wrap {
    width: 52px;
    height: 52px;
  }

  .value-card__icon {
    font-size: 20px;
  }

  .value-card__number {
    display: none;
  }
}

/* ============================================================
   A5 · ABOUT — MEET THE TEAM
   ============================================================ */

/* ── Section header ──────────────────────────────────────── */

.meet-team__header {
  max-width: 680px;
  margin: 0 auto var(--space-xl);
}

.meet-team__title {
  color: var(--color-white);
}

.meet-team__title::after {
  margin-left: auto;
  margin-right: auto;
}

.meet-team__subheading {
  font-size: clamp(15px, 1.3vw, 17px);
  color: var(--color-muted);
  line-height: 1.7;
  margin: var(--space-sm) auto 0;
  max-width: 60ch;
}

/* ── Subsection divider label ────────────────────────────── */

.meet-team__subsection-label {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 40px;
  margin-top: var(--space-lg);
}

.meet-team__subsection-label:first-of-type {
  margin-top: 0;
}

.meet-team__subsection-label span {
  font-family: var(--font-label);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-teal);
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 7px;
  flex-shrink: 0;
}

.meet-team__subsection-label span i {
  font-size: 11px;
}

.meet-team__subsection-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    var(--color-border),
    transparent
  );
}

/* ── UK team grid — 4 columns ────────────────────────────── */

.meet-team__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-bottom: var(--space-xl);
}

/* ── Team card ───────────────────────────────────────────── */

.team-card {
  background-color: var(--color-slate);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 28px 22px 20px;
  display: flex;
  flex-direction: column;
  gap: 0;
  position: relative;
  transition: transform var(--transition-base),
              border-color var(--transition-base),
              box-shadow var(--transition-base);
}

.team-card:hover {
  transform: translateY(-5px);
  border-color: var(--color-teal);
  box-shadow: 0 12px 36px rgba(0, 201, 167, 0.12);
}

/* Founder badge */
.team-card__badge {
  position: absolute;
  top: 14px;
  right: 14px;
  font-family: var(--font-label);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: var(--radius-full);
}

.team-card__badge--founder {
  background-color: rgba(0, 201, 167, 0.12);
  color: var(--color-teal);
  border: 1px solid var(--color-border);
}

/* ── Avatar circle — colour variants ────────────────────── */

.team-card__avatar {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 18px;
  color: var(--color-navy);
  margin-bottom: 16px;
  flex-shrink: 0;
  border: 3px solid transparent;
  transition: transform var(--transition-base),
              box-shadow var(--transition-base);
}

.team-card:hover .team-card__avatar {
  transform: scale(1.06);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.2);
}

/* Teal avatar */
.team-card__avatar--teal {
  background-color: var(--color-teal);
  border-color: rgba(0, 201, 167, 0.3);
}

/* Blue avatar */
.team-card__avatar--blue {
  background-color: var(--color-blue);
  color: var(--color-white);
  border-color: rgba(21, 101, 200, 0.3);
}

/* Purple avatar */
.team-card__avatar--purple {
  background-color: #7C3AED;
  color: var(--color-white);
  border-color: rgba(124, 58, 237, 0.3);
}

/* Green avatar */
.team-card__avatar--green {
  background-color: #059669;
  color: var(--color-white);
  border-color: rgba(5, 150, 105, 0.3);
}

/* Orange avatar */
.team-card__avatar--orange {
  background-color: #D97706;
  color: var(--color-white);
  border-color: rgba(217, 119, 6, 0.3);
}

/* ── Card name ───────────────────────────────────────────── */

.team-card__name {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 16px;
  color: var(--color-white);
  line-height: 1.25;
  margin-bottom: 4px;
  transition: color var(--transition-fast);
}

.team-card:hover .team-card__name {
  color: var(--color-teal);
}

/* ── Card role ───────────────────────────────────────────── */

.team-card__role {
  font-family: var(--font-label);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--color-teal);
  line-height: 1.4;
  margin-bottom: 14px;
  display: block;
}

/* ── Qualifications ──────────────────────────────────────── */

.team-card__quals {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-bottom: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--color-border-dark);
}

.team-card__qual {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--color-muted);
  line-height: 1.5;
}

.team-card__qual i {
  color: var(--color-teal);
  font-size: 10px;
  margin-top: 3px;
  flex-shrink: 0;
}

/* ── Bio text ────────────────────────────────────────────── */

.team-card__bio {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--color-muted);
  line-height: 1.7;
  flex: 1;
  margin-bottom: 16px;
  max-width: none;
}

/* ── Card footer — tags + LinkedIn ──────────────────────── */

.team-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: auto;
}

.team-card__tags {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  flex: 1;
  min-width: 0;
}

.team-card__tags span {
  font-family: var(--font-label);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-muted);
  background-color: rgba(0, 201, 167, 0.06);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  padding: 3px 8px;
  white-space: nowrap;
  transition: color var(--transition-fast),
              background-color var(--transition-fast);
}

.team-card:hover .team-card__tags span {
  color: var(--color-teal);
  background-color: rgba(0, 201, 167, 0.1);
}

.team-card__linkedin {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-muted);
  font-size: 13px;
  flex-shrink: 0;
  transition: color var(--transition-fast),
              background-color var(--transition-fast),
              border-color var(--transition-fast);
  min-height: auto;
}

.team-card__linkedin:hover {
  color: var(--color-white);
  background-color: #0A66C2;
  border-color: #0A66C2;
}

/* ── International section intro ─────────────────────────── */

.meet-team__intl-intro {
  font-size: clamp(14px, 1.2vw, 16px);
  color: var(--color-muted);
  line-height: 1.7;
  max-width: 72ch;
  margin: -20px auto var(--space-lg);
  text-align: center;
}

/* ── International team grid ─────────────────────────────── */

.meet-team__intl-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-bottom: var(--space-xl);
}

/* ── International card ──────────────────────────────────── */

.intl-card {
  background-color: var(--color-slate);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 28px 24px 20px;
  display: flex;
  flex-direction: column;
  gap: 0;
  position: relative;
  transition: transform var(--transition-base),
              border-color var(--transition-base),
              box-shadow var(--transition-base);
}

.intl-card:hover {
  transform: translateY(-5px);
  border-color: var(--color-teal);
  box-shadow: 0 12px 36px rgba(0, 201, 167, 0.12);
}

/* Top row: avatar + flag + header info */
.intl-card__top {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 16px;
}

/* Avatar wrapper with flag badge */
.intl-card__avatar-wrap {
  position: relative;
  flex-shrink: 0;
}

.intl-card__avatar {
  width: 64px;
  height: 64px;
  font-size: 16px;
  margin-bottom: 0;
}

/* Flag emoji badge positioned bottom-right of avatar */
.intl-card__flag {
  position: absolute;
  bottom: -4px;
  right: -4px;
  font-size: 18px;
  line-height: 1;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.4));
}

.intl-card__header-info {
  flex: 1;
  min-width: 0;
  padding-top: 2px;
}

.intl-card__header-info .team-card__name {
  margin-bottom: 3px;
}

/* Region label */
.intl-card__region {
  display: flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--color-muted);
  margin-top: 4px;
  line-height: 1.4;
}

.intl-card__region i {
  color: var(--color-teal);
  font-size: 10px;
  flex-shrink: 0;
}

/* Country bar */
.intl-card__country-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  background-color: rgba(0, 201, 167, 0.05);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}

.intl-card__country-name {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-label);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.05em;
  color: var(--color-white);
}

.intl-card__country-name i {
  color: var(--color-teal);
  font-size: 10px;
}

.intl-card__since {
  font-family: var(--font-label);
  font-size: 10px;
  letter-spacing: 0.04em;
  color: var(--color-muted);
}

/* Responsibilities block */
.intl-card__responsibilities {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--color-border-dark);
  margin-bottom: 16px;
}

.intl-card__resp-label {
  display: block;
  font-family: var(--font-label);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--color-muted);
  margin-bottom: 8px;
}

.intl-card__responsibilities ul {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.intl-card__responsibilities li {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--color-muted);
  line-height: 1.5;
}

.intl-card__responsibilities li i {
  color: var(--color-teal);
  font-size: 10px;
  margin-top: 3px;
  flex-shrink: 0;
}

/* ── Join the team CTA ───────────────────────────────────── */

.meet-team__join {
  margin-top: var(--space-sm);
}

.meet-team__join-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  background-color: var(--color-slate);
  border: 1px solid var(--color-border);
  border-top: 3px solid var(--color-teal);
  border-radius: var(--radius-md);
  padding: 36px 40px;
  flex-wrap: wrap;
}

.meet-team__join-text {
  flex: 1;
  min-width: 240px;
}

.meet-team__join-heading {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: clamp(17px, 1.6vw, 21px);
  color: var(--color-white);
  line-height: 1.3;
  margin-bottom: 6px;
}

.meet-team__join-sub {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--color-muted);
  line-height: 1.6;
  max-width: none;
  margin: 0;
}

.meet-team__join-actions {
  display: flex;
  gap: 12px;
  flex-shrink: 0;
  flex-wrap: wrap;
}

/* ── Stagger delays — UK grid ────────────────────────────── */

.meet-team__grid .team-card:nth-child(1)  { transition-delay: 0.05s; }
.meet-team__grid .team-card:nth-child(2)  { transition-delay: 0.10s; }
.meet-team__grid .team-card:nth-child(3)  { transition-delay: 0.15s; }
.meet-team__grid .team-card:nth-child(4)  { transition-delay: 0.20s; }
.meet-team__grid .team-card:nth-child(5)  { transition-delay: 0.25s; }
.meet-team__grid .team-card:nth-child(6)  { transition-delay: 0.30s; }
.meet-team__grid .team-card:nth-child(7)  { transition-delay: 0.35s; }
.meet-team__grid .team-card:nth-child(8)  { transition-delay: 0.40s; }
.meet-team__grid .team-card:nth-child(9)  { transition-delay: 0.45s; }
.meet-team__grid .team-card:nth-child(10) { transition-delay: 0.50s; }

/* ── Stagger delays — international grid ─────────────────── */

.meet-team__intl-grid .intl-card:nth-child(1) { transition-delay: 0.08s; }
.meet-team__intl-grid .intl-card:nth-child(2) { transition-delay: 0.16s; }
.meet-team__intl-grid .intl-card:nth-child(3) { transition-delay: 0.24s; }

/* ── Responsive ──────────────────────────────────────────── */

@media (max-width: 1280px) {
  .meet-team__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 1024px) {
  .meet-team__grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
  }

  .meet-team__intl-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
  }

  .team-card {
    padding: 22px 18px 16px;
  }

  .team-card__avatar {
    width: 60px;
    height: 60px;
    font-size: 16px;
  }
}

@media (max-width: 768px) {
  .meet-team__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
  }

  .meet-team__intl-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .meet-team__subsection-label {
    gap: 10px;
  }

  .meet-team__subsection-label span {
    font-size: 11px;
  }

  .meet-team__join-inner {
    flex-direction: column;
    align-items: flex-start;
    padding: 28px 24px;
    gap: 20px;
  }

  .meet-team__join-actions {
    width: 100%;
  }

  .meet-team__join-actions .btn-primary,
  .meet-team__join-actions .btn-secondary {
    flex: 1;
    justify-content: center;
  }
}

@media (max-width: 480px) {
  .meet-team__grid {
    grid-template-columns: 1fr;
  }

  .team-card__bio {
    font-size: 12px;
  }

  .intl-card__country-bar {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }
}

/* ============================================================
   A6 · ABOUT — UK PRESENCE
   ============================================================ */

/* ── Section inner — 2-column layout ────────────────────── */

.uk-presence__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 72px;
  align-items: center;
  margin-bottom: var(--space-xl);
}

/* ── Left column ─────────────────────────────────────────── */

.uk-presence__content {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.uk-presence__content .tag-pill {
  align-self: flex-start;
  margin-bottom: 20px;
}

/* ── Heading ─────────────────────────────────────────────── */

.uk-presence__heading {
  color: var(--color-dark-text);
  margin-bottom: 24px;
  line-height: 1.15;
}

/* ── Body paragraphs ─────────────────────────────────────── */

.uk-presence__body {
  font-size: clamp(14px, 1.2vw, 16px);
  color: var(--color-muted-light);
  line-height: 1.75;
  margin-bottom: 16px;
  max-width: 58ch;
}

/* ── Location detail list ────────────────────────────────── */

.uk-presence__details {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: 24px 0 32px;
}

.uk-presence__detail {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

/* Icon circle */
.uk-presence__detail-icon {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background-color: var(--color-mint);
  border: 1px solid rgba(0, 201, 167, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background-color var(--transition-base),
              border-color var(--transition-base);
}

.uk-presence__detail-icon i {
  color: var(--color-teal);
  font-size: 14px;
}

.uk-presence__detail:hover .uk-presence__detail-icon {
  background-color: var(--color-teal);
  border-color: var(--color-teal);
}

.uk-presence__detail:hover .uk-presence__detail-icon i {
  color: var(--color-navy);
}

/* Text block */
.uk-presence__detail-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-top: 2px;
}

.uk-presence__detail-text strong {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 14px;
  color: var(--color-dark-text);
  line-height: 1.35;
}

.uk-presence__detail-text span {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--color-muted-light);
  line-height: 1.5;
}

/* ── CTA buttons ─────────────────────────────────────────── */

.uk-presence__cta {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

/* ── Right column — map wrapper ──────────────────────────── */

.uk-presence__map-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  position: relative;
}

/* ── UK map container ────────────────────────────────────── */

.uk-map {
  position: relative;
  width: 100%;
  max-width: 320px;
  margin: 0 auto;
}

/* SVG map */
.uk-map__svg {
  width: 100%;
  height: auto;
  display: block;
  filter: drop-shadow(0 8px 32px rgba(10, 22, 40, 0.12));
}

/* Land fill */
.uk-map__land {
  fill: var(--color-navy);
  stroke: var(--color-teal);
  stroke-width: 1.5;
  stroke-linejoin: round;
}

/* Leeds primary dot */
.uk-map__dot {
  fill: var(--color-teal);
  filter: drop-shadow(0 0 6px rgba(0, 201, 167, 0.8));
}

/* Secondary city dots */
.uk-map__dot-secondary {
  fill: var(--color-muted);
  opacity: 0.6;
}

/* City labels */
.uk-map__label {
  fill: var(--color-teal);
  letter-spacing: -0.01em;
}

.uk-map__label-secondary {
  fill: var(--color-muted);
  opacity: 0.7;
}

/* ── Ripple rings around Leeds dot ───────────────────────── */

.uk-map__ripple {
  fill: none;
  stroke: var(--color-teal);
  stroke-width: 1.5;
  opacity: 0;
}

.uk-map__ripple--1 {
  animation: mapRipple 2.4s ease-out 0s infinite;
}

.uk-map__ripple--2 {
  animation: mapRipple 2.4s ease-out 0.8s infinite;
}

.uk-map__ripple--3 {
  animation: mapRipple 2.4s ease-out 1.6s infinite;
}

/* ── Map info card overlay ───────────────────────────────── */

.uk-map__info-card {
  position: absolute;
  bottom: 80px;
  right: -16px;
  background-color: var(--color-white);
  border: 1px solid rgba(0, 201, 167, 0.3);
  border-radius: var(--radius-md);
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  box-shadow: 0 8px 24px rgba(10, 22, 40, 0.12);
  animation: floatUp 5s ease-in-out infinite;
  min-width: 190px;
}

.uk-map__info-icon {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background-color: var(--color-mint);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.uk-map__info-icon i {
  color: var(--color-teal);
  font-size: 15px;
}

.uk-map__info-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.uk-map__info-name {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 13px;
  color: var(--color-dark-text);
  line-height: 1.2;
}

.uk-map__info-location {
  font-family: var(--font-body);
  font-size: 11px;
  color: var(--color-muted-light);
  line-height: 1.3;
}

/* Live pulse indicator in the card */
.uk-map__info-pulse {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #22C55E;
  flex-shrink: 0;
  margin-left: auto;
  animation: infoPulse 2s ease-in-out infinite;
}

/* ── Map caption ─────────────────────────────────────────── */

.uk-presence__map-caption {
  font-family: var(--font-label);
  font-size: 11px;
  letter-spacing: 0.05em;
  color: var(--color-muted-light);
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  max-width: none;
  margin: 0;
}

.uk-presence__map-caption i {
  color: var(--color-teal);
  font-size: 11px;
}

/* ── Bottom stats bar ────────────────────────────────────── */

.uk-presence__stats {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: var(--color-white);
  border: 1px solid rgba(0, 0, 0, 0.07);
  border-top: 3px solid var(--color-teal);
  border-radius: var(--radius-md);
  padding: 28px 40px;
  box-shadow: 0 2px 12px rgba(10, 22, 40, 0.05);
  gap: 0;
  flex-wrap: wrap;
}

.uk-presence__stat {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 5px;
  padding: 4px 16px;
  min-width: 140px;
}

.uk-presence__stat-value {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(24px, 2.5vw, 36px);
  color: var(--color-teal);
  line-height: 1;
  letter-spacing: -0.02em;
}

.uk-presence__stat-label {
  font-family: var(--font-label);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-muted-light);
  line-height: 1.4;
  max-width: 16ch;
  text-align: center;
}

.uk-presence__stat-div {
  width: 1px;
  height: 44px;
  background: linear-gradient(
    180deg,
    transparent,
    rgba(0, 201, 167, 0.3),
    transparent
  );
  flex-shrink: 0;
}

/* ── Stagger delays ──────────────────────────────────────── */

.uk-presence__content .fade-in-up:nth-child(1)  { transition-delay: 0.05s; }
.uk-presence__content .fade-in-up:nth-child(2)  { transition-delay: 0.12s; }
.uk-presence__content .fade-in-up:nth-child(3)  { transition-delay: 0.19s; }
.uk-presence__content .fade-in-up:nth-child(4)  { transition-delay: 0.26s; }
.uk-presence__content .fade-in-up:nth-child(5)  { transition-delay: 0.33s; }
.uk-presence__content .fade-in-up:nth-child(6)  { transition-delay: 0.40s; }
.uk-presence__map-wrap.fade-in-up               { transition-delay: 0.22s; }
.uk-presence__stats.fade-in-up                  { transition-delay: 0.30s; }

/* ── Responsive ──────────────────────────────────────────── */

@media (max-width: 1024px) {
  .uk-presence__inner {
    gap: 48px;
  }

  .uk-map__info-card {
    right: 0;
    bottom: 60px;
  }
}

@media (max-width: 768px) {
  .uk-presence__inner {
    grid-template-columns: 1fr;
    gap: 40px;
    margin-bottom: var(--space-lg);
  }

  .uk-presence__heading br {
    display: none;
  }

  .uk-presence__body {
    max-width: none;
  }

  .uk-presence__cta {
    flex-direction: column;
  }

  .uk-presence__cta .btn-primary,
  .uk-presence__cta .btn-secondary {
    width: 100%;
    justify-content: center;
  }

  .uk-map {
    max-width: 260px;
  }

  .uk-map__info-card {
    position: relative;
    right: auto;
    bottom: auto;
    margin-top: 12px;
    animation: none;
    max-width: 240px;
  }

  .uk-presence__stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px 0;
    padding: 24px 20px;
  }

  .uk-presence__stat-div {
    display: none;
  }
}

@media (max-width: 480px) {
  .uk-presence__stats {
    grid-template-columns: 1fr 1fr;
  }

  .uk-presence__stat {
    padding: 4px 8px;
    min-width: auto;
  }

  .uk-presence__stat-value {
    font-size: 22px;
  }

  .uk-presence__detail-icon {
    width: 32px;
    height: 32px;
  }
}