@charset "UTF-8";
/* =========================================================
   SpareMinds Consulting Services — Homepage Styles
   Brand colors: Navy #0A0E27 (deep) / #455A8A (accent navy)
                 Red #E61919 / White #FFFFFF
   ========================================================= */

:root {
  --navy-deep: #0A0E27;
  --navy: #455A8A;
  --red: #E61919;
  --red-dark: #C71414;
  --white: #FFFFFF;
  --bg-alt: #F5F6FA;
  --text: #1A1D29;
  --muted: #5B6472;
  --border: #E4E6EF;
  --green: #1E9E5A;

  --container-width: 1180px;
  --radius: 10px;
  --shadow-sm: 0 2px 10px rgba(10, 14, 39, 0.06);
  --shadow-md: 0 10px 30px rgba(10, 14, 39, 0.10);
}

* { box-sizing: border-box; }

/* Skip navigation link — visually hidden until focused */
.skip-link {
  position: absolute;
  top: -100px;
  left: 16px;
  z-index: 9999;
  background: var(--red);
  color: var(--white);
  padding: 12px 24px;
  border-radius: var(--radius);
  font-weight: 700;
  font-size: 15px;
  text-decoration: none;
  transition: top 0.15s ease;
}
.skip-link:focus {
  top: 12px;
  outline: 3px solid var(--navy);
  outline-offset: 2px;
}

html { scroll-behavior: smooth; }

html {
  overflow-x: hidden;
}

body {
  margin: 0;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
  color: var(--text);
  line-height: 1.6;
  background: var(--white);
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }

a { color: inherit; text-decoration: none; }

.container {
  width: 100%;
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 24px 24px;
}

h1, h2, h3, h4 {
  font-weight: 800;
  line-height: 1.2;
  margin: 0;
  color: var(--text);
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 28px;
  border-radius: 8px;
  font-weight: 700;
  font-size: 15px;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease, color 0.15s ease;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); }

.btn-primary {
  background: var(--red);
  color: var(--white);
  box-shadow: 0 6px 16px rgba(230, 25, 25, 0.28);
}
.btn-primary:hover { background: var(--red-dark); }

.btn-outline {
  background: transparent;
  color: var(--text);
  border-color: var(--border);
}
.btn-outline:hover { border-color: var(--navy); color: var(--navy); }

/* outline variant for use on the dark navy CTA band */
.btn-outline-light {
  color: var(--white);
  border-color: rgba(255,255,255,0.35);
}
.btn-outline-light:hover { border-color: var(--white); color: var(--white); background: rgba(255,255,255,0.08); }

.btn-sm { padding: 10px 20px; font-size: 14px; }
.btn-block { width: 100%; }

/* plain text link styled like an action — used on expertise cards */
.btn-text {
  margin: 14px 0 0;
  display: inline-flex;
  color: var(--red);
  font-family: inherit;
  text-shadow: 0 0 black;
  transition: transform 0.15s ease, color 0.15s ease;
}
.btn-text:hover {
  transform: translateY(-1px);
  color: var(--navy);
}
.btn-find-jobs {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: linear-gradient(135deg, #d31422, #232537);
    color: #ffffff;
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    font-weight: 600;
    font-size: 16px;
    letter-spacing: 0.5px;
    padding: 5px 12px;
    border: none;
    border-radius: 50px;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(37, 99, 235, 0.4);
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    margin-top: 20px;
}

/* ---------- Header ---------- */
.site-header {
  position: fixed ;         /* Pins the element to its parent container */ 
  top: 0;
  z-index: 100;
  background: var(--navy-deep);
  /* border-bottom: 1px solid rgba(255,255,255,0.08); */
    width: 100%;
    /* height: 60px; */
    background: linear-gradient(225deg, #232538 22%, #232530 39%, #e41321 64%, rgba(69, 86, 138, 0.35) 61%, #232530 46%, #232530 95%, #ff1e27 92%, #232537 98%, #232537 120%, #242538 100%);
    background-size: 100% 100%;
    border-bottom: 1px solid #151b3f; 
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 92px;
  gap: 24px;
}

/* Brand lockup.
   The maple leaf is the original logo.png artwork, cropped to the leaf and left
   pixel-for-pixel unchanged. The wordmark is set in live text because the source
   PNG clips the final "s" of "SpareMinds" against its right edge.

   Every ratio below is measured off the original PNG (leaf height 576px = 1 unit):
     line 1  cap height 147, x-height 110, stem 28.5  -> Inter 600, size 0.345
     line 2  cap height  88, x-height  68, stem 11    -> Inter 400, size 0.207
     baseline-to-baseline 149, leaf-to-text gap 77
   x-height/cap is 0.748 and 0.773, matching Inter's 0.743 - the same
   Helvetica-class grotesque the original artwork used. gap: calc(var(--logo-h) * 0.134); */
/* Image-based brand logo (replaces CSS leaf+wordmark version) */
img.brand-logo {
  height: var(--logo-h, 56px);
  width: auto;
  vertical-align: middle;
  display: inline-block;
}

.brand { display: flex; align-items: center; --logo-h: 56px important; }

.brand-leaf {
  flex: none;
  height: var(--logo-h);
  width: calc(var(--logo-h) * 1.052); /* 606x576 leaf crop from logo.png */
  background: url("assets/logo.png") no-repeat left center / auto 100%;
}

.brand-word {
  display: flex;
  flex-direction: column;
  line-height: 1;
  white-space: nowrap;
}
.brand-name {
  font-size: calc(var(--logo-h) * 0.345);
  font-weight: 600;
  letter-spacing: -0.025em;
  color: var(--white);
}
.brand-tag {
  font-size: calc(var(--logo-h) * 0.207);
  font-weight: 400;
  letter-spacing: -0.015em;
  color: var(--white);
  margin-top: calc(var(--logo-h) * 0.042);
}

.main-nav {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 auto;
  background: #0a0e27;
  border: 1px solid #334155;
  padding: 6px 30px;
  border-radius: 70px;
}
.main-nav a {
  color: #E7E9F5;
  font-weight: 600;
  font-size: 14px;
  padding: 8px 2px;
  border-bottom: 2px solid transparent;
  transition: color 0.15s ease, border-color 0.15s ease;
  text-transform: uppercase; font-size: 13px; letter-spacing: 1.2px; color: var(--white); font-weight: 700;
}
.main-nav a:hover { color: var(--white); border-color: var(--red); }
/* marks the current page on multi-page nav (About Us) */
.main-nav a.active { color: var(--red); 
  /* border-color: var(--red);  */
}

/* active state for Specialties toggle — mirrors .main-nav a.active */
.nav-dropdown-toggle.is-active {
  color: var(--red);
  /* border-color: var(--red); */
}

.header-actions { display: flex; align-items: center; gap: 16px; }

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 34px;
  height: 34px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
}
.nav-toggle span {
  display: block;
  height: 2px;
  width: 100%;
  background: var(--white);
  border-radius: 2px;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.nav-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity: 0; }
.nav-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  padding: 92px 0 88px;
  min-height: 65vh;
  width: 100%;
  overflow-x: hidden;
  background-color: #0B0F19;
  background-image:
    linear-gradient(to bottom, #0B0F19 0%, #0F172A 40%, #1E293B 100%);
}

/* Subtle dark-mode dot matrix grid */
.hero-bg-pattern {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at 1px 1px, rgba(30,41,59,0.7) 1px, transparent 0);
  background-size: 28px 28px;
  opacity: 0.6;
  pointer-events: none;
}

/* Grid pattern with radial mask fade (virtuousskill.com style) */
.hero-grid {
  position: absolute;
  inset: 0;
  z-index: 1;
  background-image:
    linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 44px 44px;
  -webkit-mask-image: radial-gradient(circle, #000 20%, transparent 80%);
  mask-image: radial-gradient(circle, #000 20%, transparent 80%);
  pointer-events: none;
}

/* Gradient orbs */
.hero-orbs {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
}
.hero-orb--1,
.hero-orb--2,
.hero-orb--3 {
  position: absolute;
  border-radius: 50%;
  filter: blur(120px);
  will-change: transform;
}
.hero-orb--1 {
  width: 560px; height: 560px; top: -180px; right: -140px;
  background: radial-gradient(circle, rgba(230,25,25,0.30) 0%, transparent 68%);
  animation: heroOrbFloat1 18s ease-in-out infinite alternate;
}
.hero-orb--2 {
  width: 640px; height: 640px; top: -100px; left: -200px;
  background: radial-gradient(circle, rgba(69,90,138,0.35) 0%, transparent 65%);
  animation: heroOrbFloat2 22s ease-in-out infinite alternate;
}
.hero-orb--3 {
  width: 500px; height: 500px; bottom: -180px; left: 33%;
  background: radial-gradient(circle, rgba(14,165,233,0.25) 0%, transparent 60%);
  animation: heroOrbFloat3 20s ease-in-out infinite alternate;
}
@keyframes heroOrbFloat1 {
  0%   { transform: translate(0, 0) scale(1); }
  50%  { transform: translate(-40px, 30px) scale(1.06); }
  100% { transform: translate(20px, -20px) scale(0.97); }
}
@keyframes heroOrbFloat2 {
  0%   { transform: translate(0, 0) scale(1); }
  50%  { transform: translate(30px, -40px) scale(0.95); }
  100% { transform: translate(-30px, 20px) scale(1.08); }
}
@keyframes heroOrbFloat3 {
  0%   { transform: translate(0, 0) scale(1); }
  50%  { transform: translate(35px, -25px) scale(1.04); }
  100% { transform: translate(-25px, 35px) scale(0.98); }
}

/* Neural particle network canvas */
.hero-canvas-wrap {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}
.hero-canvas-wrap canvas {
  display: block;
  width: 100% !important;
  height: 100% !important;
}

/* Footer particle network */
.footer-canvas-wrap {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}
.footer-canvas-wrap canvas {
  display: block;
  width: 100% !important;
  height: 100% !important;
}

.hero-inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 56px;
  align-items: center;
}

/* Hero-specific badge (dark mode) */
.hero .badge-pill {
  background: rgba(30, 41, 59, 0.6);
  border: 1px solid #334155;
  box-shadow: none;
  color: #E2E8F0;
}

.badge-pill {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  background: var(--white);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  border-radius: 999px;
  padding: 10px 18px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 28px;
}
.badge-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--navy);
  flex-shrink: 0;
}

.hero h1,
.page-hero h1 {
  font-size: clamp(36px, 5vw, 46px);
  letter-spacing: -0.5px;
  margin-bottom: 22px;
  color: #FFFFFF;
}


.hero-lead {
  font-size: 17px;
  color: #94A3B8;
  max-width: 46ch;
  margin-bottom: 32px;
}

.hero-ctas { display: flex; gap: 16px; flex-wrap: wrap; }

/* Ambient glow behind the dashboard card (animated) */
@keyframes pulseGlow {
  0%   { transform: translate(0, 0) scale(1); }
  50%  { transform: translate(8px, -6px) scale(1.12); }
  100% { transform: translate(-6px, 4px) scale(1.15); }
}

.hero-art::before {
  content: '';
  position: absolute;
  inset: -60px;
  background: radial-gradient(circle at 70% 30%, rgba(14,165,233,0.18) 0%, transparent 60%),
              radial-gradient(circle at 30% 70%, rgba(168,85,247,0.15) 0%, transparent 65%);
  filter: blur(80px);
  opacity: 0.9;
  z-index: -1;
  pointer-events: none;
  border-radius: inherit;
  animation: pulseGlow 10s ease-in-out infinite alternate;
}

.hero-art {
  position: relative;
  border-radius: 18px;
  overflow: visible;
  box-shadow: 0 20px 60px rgba(0,0,0,0.5), 0 0 0 1px rgba(51,65,85,0.4);
}

/* =========================================================
   Dashboard card (hero section) — all styles extracted from
   inline HTML so they are fully responsive.
   ========================================================= */

.dash-card {
  background: #1E293B;
  border: 1px solid #334155;
  border-radius: 18px;
  overflow: hidden;
  position: relative;
  z-index: 2;
  padding: 28px 24px 20px;
  color: #fff;
  font-family: 'Inter', sans-serif;
}

.dash-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 20px;
}
.dash-bar svg { flex-shrink: 0; }
.dash-bar-title {
  font-size: 12px;
  font-weight: 600;
  color: #C9CDE0;
  letter-spacing: 0.5px;
}
.dash-bar-sep {
  flex: 1;
  height: 1px;
  background: rgba(255,255,255,0.08);
  margin-left: 6px;
}
.dash-live {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 10.5px;
  color: #4ade80;
  font-weight: 600;
}
.dash-dot--green {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #4ade80;
  box-shadow: 0 0 6px #4ade80;
  animation: pulse 2s infinite;
}

.dash-row {
  display: grid;
  margin-bottom: 14px;
}
.dash-row--metrics {
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.dash-row--wide {
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.dash-metric {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 10px;
  padding: 14px 12px;
}
.dash-metric-head {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
}
.dash-metric-head svg { flex-shrink: 0; }
.dash-metric-label {
  font-size: 9.5px;
  color: #C9CDE0;
  font-weight: 600;
  letter-spacing: 0.4px;
  text-transform: uppercase;
}
.dash-metric-val {
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  line-height: 1.3;
}

.dash-ability {
  background: rgba(230,25,25,0.06);
  border: 1px solid rgba(230,25,25,0.15);
  border-radius: 10px;
  padding: 12px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.dash-ability svg { flex-shrink: 0; }
.dash-ability-text {
  font-size: 11.5px;
  font-weight: 600;
  color: #fff;
  line-height: 1.4;
}

.hero .btn-outline {
  color: #FFFFFF;
  border-color: #334155;
  background: transparent;
}
.hero .btn-outline:hover {
  border-color: #475569;
  background: rgba(255,255,255,0.05);
}

.hero-svg { width: 100%; height: auto; display: block; }

@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.85); }
}

/* Hero capability ticker — full-width bg, boxed text */
.hero-ticker {
  position: relative;
  overflow-x: hidden;
  white-space: nowrap;
  margin-top: 48px;
  border-top: 1px solid rgba(51,65,85,0.25);
  padding-top: 24px;
  z-index: 3; /* above hero-inner content & background layers */
}
.hero-ticker-inner {
  width: 100%;
  max-width: var(--container-width);
  margin: 0 auto;
  overflow-x: hidden;
}
.hero-ticker-track {
  display: inline-flex;
  gap: 32px;
  animation: marquee 30s linear infinite;
}
.hero-ticker:hover .hero-ticker-track {
  animation-play-state: paused;
}
.ticker-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  color: #94A3B8;
  white-space: nowrap;
  flex-shrink: 0;
}
.ticker-item svg {
  flex-shrink: 0;
}

@keyframes marquee {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.section-alt { background: var(--bg-alt); }

/* anchor targets clear the 92px sticky header */
main[id],
section[id] { scroll-margin-top: 60px; }

/* small category label that sits above every section heading */
.section-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 16px;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--navy);
}
.section-eyebrow::before {
  content: "";
  width: 30px;
  height: 2px;
  border-radius: 2px;
  background: var(--red);
  flex-shrink: 0;
}
.section-eyebrow.center { display: flex; justify-content: center; }
.section-eyebrow.light { color: #C9CDE0; }

.section-title {
  font-size: clamp(24px, 3vw, 30px);
  margin-bottom: 44px;
  letter-spacing: -0.3px;
}
.section-title.center { text-align: center; }

.section-lead {
  color: var(--muted);
  font-size: clamp(15px, 2vw, 16.5px);
  margin-top: -28px;
  margin-bottom: 44px;
}
.section-lead.center { text-align: justify; }

/* ---------- Icon badge ---------- */
.icon-badge {
  width: 52px;
  height: 52px;
  border-radius: 12px;
  background: rgba(230,25,25,0.08);
  color: var(--red);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}
.icon-badge svg { width: 26px; height: 26px; }
.icon-badge.sm {
  width: 44px; height: 44px; border-radius: 10px; margin-bottom: 16px;
  background: linear-gradient(135deg, #FFEAEA 0%, #FFF5F5 100%);
}
.icon-badge.sm svg { width: 22px; height: 22px; stroke: var(--red); }

/* ---------- Core services ---------- */
.services-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px;
}
.service-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 34px 32px;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.service-card:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); }
.service-card h3 { font-size: 20px; margin-bottom: 10px; }
.service-card p { color: var(--muted); margin: 0; font-size: 15px; }

.service-features {
  list-style-type: none;
  padding: 0;
  margin: 20px 0 0 0;
  text-align: left;
}
.service-features li {
  position: relative;
  padding-left: 20px;
  margin-bottom: 10px;
  font-size: 0.95rem;
  line-height: 1.4;
  color: var(--muted);
  opacity: 0;
  transform: translateX(-14px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.services-grid.in-view .service-features li { opacity: 1; transform: translateX(0); }
.services-grid.in-view .service-features li:nth-child(1) { transition-delay: 0.05s; }
.services-grid.in-view .service-features li:nth-child(2) { transition-delay: 0.15s; }
.services-grid.in-view .service-features li:nth-child(3) { transition-delay: 0.25s; }
.services-grid.in-view .service-features li:nth-child(4) { transition-delay: 0.35s; }

/* custom minimal bullet, matched to the brand red used across icons/accents */
.service-features li::before {
  content: "•";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--red);
  font-weight: bold;
}

/* ---------- Expertise grid (floating cards with red shed) ---------- */
.expertise-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
}

.expertise-card {
  position: relative;
  background: var(--white);
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: 24px;
  padding: 32px 28px;
  box-shadow: 0 2px 8px rgba(10,14,39,0.03),
              0 16px 40px rgba(10,14,39,0.07);
  transition: box-shadow 0.35s ease, transform 0.35s ease;
}

/* Right-edge red shed glow — ambient warmth */
.expertise-card::after {
  content: '';
  position: absolute;
  top: -30%;
  right: -80px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(230,25,25,0.10) 0%, transparent 65%);
  filter: blur(48px);
  pointer-events: none;
  z-index: -1;
  opacity: 0.5;
  transition: opacity 0.35s ease, transform 0.35s ease;
}

/* Float state on hover */
.expertise-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 4px 12px rgba(10,14,39,0.04),
              0 28px 56px rgba(10,14,39,0.11);
}

.expertise-card:hover::after {
  opacity: 0.9;
  transform: translateX(-8px) scale(1.3);
}

.expertise-card h3 { font-size: 16.5px; margin-bottom: 8px; }
.expertise-card p { color: var(--muted); margin: 0; font-size: 13.5px; line-height: 1.55; }

/* ---------- Talent intelligence (match diagram) ---------- */
.talent-intel { overflow: hidden; }

.ti-grid {
  --ti-gap: 36px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--ti-gap);
}

.ti-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 26px 26px 22px;
  box-shadow: var(--shadow-sm);
  opacity: 0;
  transition: opacity 0.65s ease, transform 0.65s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.25s ease;
}
.ti-card--candidate { transform: translateX(-34px); }
.ti-card--requirement { transform: translateX(34px); }
.ti-grid.in-view .ti-card { opacity: 1; transform: translateX(0); }
.ti-card:hover { box-shadow: var(--shadow-md); }

.ti-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}
.ti-tag {
  display: inline-flex;
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(69, 90, 138, 0.10);
  color: var(--navy);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.ti-tag--alt { background: rgba(230, 25, 25, 0.09); color: var(--red); }
.ti-note { font-size: 12px; font-weight: 600; color: var(--muted); }

.ti-card h3 { font-size: 18px; margin-bottom: 6px; }
.ti-meta { color: var(--muted); font-size: 13.5px; margin: 0 0 18px; }

.ti-chips {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.ti-chip {
  padding: 6px 12px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg-alt);
  color: var(--muted);
  font-size: 12.5px;
  font-weight: 600;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}
.ti-chip.is-match {
  background: rgba(69, 90, 138, 0.08);
  border-color: rgba(69, 90, 138, 0.28);
  color: var(--navy);
}
.ti-grid.in-view .ti-chip { opacity: 1; transform: translateY(0); }
.ti-grid.in-view .ti-chip:nth-child(1) { transition-delay: 0.40s; }
.ti-grid.in-view .ti-chip:nth-child(2) { transition-delay: 0.48s; }
.ti-grid.in-view .ti-chip:nth-child(3) { transition-delay: 0.56s; }
.ti-grid.in-view .ti-chip:nth-child(4) { transition-delay: 0.64s; }
.ti-grid.in-view .ti-chip:nth-child(5) { transition-delay: 0.72s; }

/* match node: scales in, then the ring sweeps to the score */
.ti-node {
  position: relative;
  z-index: 1;
  width: 150px;
  height: 150px;
  flex-shrink: 0;
  opacity: 0;
  transform: scale(0.82);
  transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
  transition-delay: 0.3s;
}
.ti-grid.in-view .ti-node { opacity: 1; transform: scale(1); }

.ti-ring { width: 100%; height: 100%; display: block; transform: rotate(-90deg); }
.ti-ring-track { fill: none; stroke: var(--border); stroke-width: 7; }
.ti-ring-fill {
  fill: none;
  stroke: url(#tiRingGrad);
  stroke-width: 7;
  stroke-linecap: round;
  /* circumference of r=54 is 339.3; offset 27.1 leaves 92% drawn */
  stroke-dasharray: 339.3;
  stroke-dashoffset: 339.3;
  transition: stroke-dashoffset 1.4s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: 0.45s;
}
.ti-grid.in-view .ti-ring-fill { stroke-dashoffset: 27.1; }

.ti-node-inner {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  text-align: center;
}
.ti-score { font-size: 30px; font-weight: 800; line-height: 1; color: var(--navy-deep); }
.ti-node-label {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1.1px;
  line-height: 1.35;
  text-transform: uppercase;
  color: var(--muted);
}

/* connectors: both sides draw inward, toward the match node */
.ti-node::before,
.ti-node::after {
  content: "";
  position: absolute;
  top: 50%;
  margin-top: -1px;
  width: var(--ti-gap);
  height: 2px;
  border-radius: 2px;
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: 0.15s;
}
.ti-node::before {
  right: 100%;
  background: linear-gradient(90deg, var(--border), var(--navy));
  transform: scaleX(0);
  transform-origin: left center;
}
.ti-node::after {
  left: 100%;
  background: linear-gradient(270deg, var(--border), var(--red));
  transform: scaleX(0);
  transform-origin: right center;
}
.ti-grid.in-view .ti-node::before,
.ti-grid.in-view .ti-node::after { transform: scaleX(1); }

/* ---------- How we deliver (pipeline stepper) ---------- */
.delivery {
  background: linear-gradient(180deg, var(--white) 0%, #FAFBFE 100%);
  border-top: 1px solid var(--border);
}

.pipeline {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
}

.pipeline-step {
  position: relative;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.pipeline.in-view .pipeline-step { opacity: 1; transform: translateY(0); }

/* connector track + animated fill between nodes */
.pipeline-step:not(:last-child)::before,
.pipeline-step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 27px;
  left: 56px;
  width: calc(100% - 36px);
  height: 2px;
  border-radius: 2px;
}
.pipeline-step:not(:last-child)::before { background: var(--border); }
.pipeline-step:not(:last-child)::after {
  background: linear-gradient(90deg, var(--navy), var(--red));
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}
.pipeline.in-view .pipeline-step::after { transform: scaleX(1); }

.step-node {
  position: relative;
  z-index: 1;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--white);
  border: 2px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 22px;
  transition: background 0.25s ease, border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}
.step-num {
  font-weight: 800;
  font-size: 16px;
  color: var(--navy);
  transition: color 0.25s ease;
}

.pipeline-step:hover .step-node,
.pipeline-step:focus-within .step-node {
  background: var(--red);
  border-color: var(--red);
  transform: scale(1.08);
  box-shadow: 0 10px 24px rgba(230, 25, 25, 0.3);
}
.pipeline-step:hover .step-num,
.pipeline-step:focus-within .step-num { color: var(--white); }
.pipeline-step:hover .step-body h3 { color: var(--navy); }

.step-label {
  display: block;
  margin-bottom: 8px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--red);
}
.step-body h3 { font-size: 16.5px; margin-bottom: 8px; transition: color 0.25s ease; }
.step-body p { color: var(--muted); margin: 0; font-size: 13.5px; line-height: 1.55; }

/* staggered reveal: cards first, then the connector drawing toward the next node */
.pipeline.in-view .pipeline-step:nth-child(1) { transition-delay: 0.05s; }
.pipeline.in-view .pipeline-step:nth-child(2) { transition-delay: 0.17s; }
.pipeline.in-view .pipeline-step:nth-child(3) { transition-delay: 0.29s; }
.pipeline.in-view .pipeline-step:nth-child(4) { transition-delay: 0.41s; }
.pipeline.in-view .pipeline-step:nth-child(5) { transition-delay: 0.53s; }

.pipeline.in-view .pipeline-step:nth-child(1)::after { transition-delay: 0.30s; }
.pipeline.in-view .pipeline-step:nth-child(2)::after { transition-delay: 0.42s; }
.pipeline.in-view .pipeline-step:nth-child(3)::after { transition-delay: 0.54s; }
.pipeline.in-view .pipeline-step:nth-child(4)::after { transition-delay: 0.66s; }

/* ---------- About ---------- */
.about-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}
.about-copy p { color: var(--muted); font-size: 15px; margin: 18px 0 26px; }
.about-copy p.section-eyebrow {font-size: 11.5px;}
p.sub_text {
    margin: 0 0 20px 0;
}

.check-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.check-list li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: 600;
  font-size: 15px;
  opacity: 0;
  transform: translateX(-22px);
  transition: opacity 0.55s ease, transform 0.55s ease;
}
.check-list.in-view li { opacity: 1; transform: translateX(0); }
.check-list.in-view li:nth-child(1) { transition-delay: 0.05s; }
.check-list.in-view li:nth-child(2) { transition-delay: 0.15s; }
.check-list.in-view li:nth-child(3) { transition-delay: 0.25s; }
.check-list.in-view li:nth-child(4) { transition-delay: 0.35s; }
.check-list.in-view li:nth-child(5) { transition-delay: 0.45s; }
.check-icon {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: rgba(30,158,90,0.12);
  color: var(--green);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  flex-shrink: 0;
}

.about-media { border-radius: 18px; overflow: hidden; box-shadow: var(--shadow-md); }
.about-svg { width: 100%; height: auto; display: block; }

/* ---------- Diversity banner ---------- */
.diversity-banner {
  background: var(--navy-deep);
  color: var(--white);
  padding: 80px 0;
  text-align: center;
}
.diversity-banner h2 {
  color: var(--white);
  font-size: 26px;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 22px;
}
.diversity-banner p {
  max-width: 760px;
  margin: 0 auto;
  color: #C9CDE0;
  font-size: 16px;
  line-height: 1.75;
}

/* ---------- Contact ---------- */
.contact-form {
  max-width: 620px;
  margin: 0 auto;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 40px;
  box-shadow: var(--shadow-sm);
}
.form-field { margin-bottom: 22px; }
.form-field label {
  display: block;
  font-weight: 700;
  font-size: 14px;
  margin-bottom: 8px;
}
.form-field input,
.form-field textarea {
  width: 100%;
  padding: 13px 16px;
  border-radius: 8px;
  border: 1px solid var(--border);
  font-family: inherit;
  font-size: 15px;
  color: var(--text);
  background: var(--white);
  resize: vertical;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.form-field input:focus,
.form-field textarea:focus {
  outline: none;
  border-color: var(--navy);
  box-shadow: 0 0 0 3px rgba(69,90,138,0.15);
}
.form-field input.invalid,
.form-field textarea.invalid { border-color: var(--red); }
.field-error {
  display: block;
  color: var(--red);
  font-size: 12.5px;
  margin-top: 6px;
  min-height: 15px;
}
.form-status {
  text-align: center;
  font-weight: 600;
  font-size: 14px;
  margin: 18px 0 0;
  min-height: 20px;
}
.form-status.success { color: var(--green); }
.form-status.error { color: var(--red); }

/* ---------- Footer ---------- */
.site-footer {
  position: relative;
  background: var(--navy-deep);
  color: #C9CDE0;
  padding: 64px 0 0;
  overflow: hidden;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr 1fr;
  gap: 32px;
  padding-bottom: 48px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.footer-brand .brand { --logo-h: 40px; margin-bottom: 16px; }
.footer-brand img.brand-logo { display: block; margin-bottom: 24px; }
.footer-brand p { font-size: 13.5px; line-height: 1.7; color: #9BA1C0; }
.footer-brand .footer-contact { margin-top: 20px; }
.footer-brand .footer-contact p { margin: 0 0 10px; font-size: 14.5px; }

.footer-contact p { margin: 0 0 10px; font-size: 14.5px; }
.footer-contact a:hover { color: var(--white); }
.footer-contact .fc-row { display: flex; align-items: center; gap: 8px; }
.footer-contact .fc-icon { width: 16px; height: 16px; flex-shrink: 0; stroke: #C9CDE0; fill: none; }

.footer-links h4, .footer-legal h4 {
  color: var(--white); 
  border-bottom: 2px solid transparent;
  border-color: var(--red);
  font-size: 14px;
  padding-bottom:10px;
  margin-bottom: 10px;
  letter-spacing: 0.3px;
  text-transform: uppercase;
}
.footer-links a, .footer-legal a {
  display: block;
  font-size: 14px;
  margin-bottom: 10px;
  color: #C9CDE0;
  font-weight: 600;
}
.footer-links a:hover, .footer-legal a:hover { color: var(--red); }

/* Centered copyright row below grid */
.footer-bottom {
  text-align: center;
  font-size: 13.5px;
  line-height: 1.7;
  color: #9BA1C0;
  padding: 28px 0 40px;
}

.site-footer { padding-bottom: 40px; }

/* ---------- Floating capability-statement CTA ---------- */
.floating-cta {
  position: fixed;
  right: 32px;
  bottom: 28px;
  z-index: 500;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--red);
  color: var(--white);
  font-weight: 700;
  font-size: 14.5px;
  padding: 14px 22px;
  border-radius: 999px;
  box-shadow: 0 12px 28px rgba(230, 25, 25, 0.38);
  transition: bottom 0.25s ease, right 0.25s ease, transform 0.18s ease, box-shadow 0.18s ease;
}
.floating-cta svg { width: 18px; height: 18px; flex-shrink: 0; }
.floating-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 34px rgba(230, 25, 25, 0.46);
}

/* ---------- Legal modal (Privacy Policy / Terms / Compliance) ---------- */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(10, 14, 39, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0.2s ease;
}
.modal-overlay.open { opacity: 1; visibility: visible; }
body.modal-open { overflow: hidden; }

.modal {
  background: var(--white);
  border-radius: var(--radius);
  max-width: 560px;
  width: 100%;
  max-height: 82vh;
  overflow-y: auto;
  padding: 40px 36px 36px;
  position: relative;
  box-shadow: var(--shadow-md);
  transform: translateY(16px) scale(0.98);
  transition: transform 0.25s ease;
}
.modal-overlay.open .modal { transform: translateY(0) scale(1); }

.modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: none;
  background: var(--bg-alt);
  color: var(--muted);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease, color 0.15s ease;
}
.modal-close:hover { background: var(--border); color: var(--text); }

.modal-body h2 { font-size: 22px; margin-bottom: 6px; }
.modal-body .modal-updated {
  display: block;
  color: var(--muted);
  font-size: 13px;
  margin-bottom: 22px;
}
.modal-body h3 { font-size: 15px; margin: 22px 0 8px; }
.modal-body p, .modal-body li { color: var(--muted); font-size: 14.5px; line-height: 1.65; }
.modal-body ul { margin: 0; padding-left: 20px; }
.modal-body a { color: var(--navy); font-weight: 600; text-decoration: underline; }

@media (max-width: 760px) {
  .modal { padding: 32px 22px 28px; max-height: 86vh; }
}

@media (prefers-reduced-motion: reduce) {
  .modal-overlay, .modal { transition: none; }
}

/* =========================================================
   About Us page (about.html)
   ========================================================= */

/* ---------- Page hero ---------- */
.page-hero {
  position: relative;
  background: linear-gradient(160deg, #0A0E27 0%, #1B2450 62%, #2A3560 100%);
  color: var(--white);
  padding: 88px 0 96px;
  overflow: hidden;
}

/* Grid pattern with radial mask fade (virtuousskill.com style) */
.page-hero-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 44px 44px;
  -webkit-mask-image: radial-gradient(circle, #000 20%, transparent 80%);
  mask-image: radial-gradient(circle, #000 20%, transparent 80%);
  pointer-events: none;
}

/* Gradient orbs — virtuousskill.com style (3 large blurred blobs) */
.page-hero-orbs {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.page-hero-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(120px);
  will-change: transform;
}
.page-hero-orb--1 {
  width: 560px; height: 560px; top: -180px; right: -140px;
  background: radial-gradient(circle, rgba(230,25,25,0.30) 0%, transparent 68%);
  animation: orbFloat1 18s ease-in-out infinite alternate;
}
.page-hero-orb--2 {
  width: 640px; height: 640px; top: -100px; left: -200px;
  background: radial-gradient(circle, rgba(69,90,138,0.35) 0%, transparent 65%);
  animation: orbFloat2 22s ease-in-out infinite alternate;
}
.page-hero-orb--3 {
  width: 500px; height: 500px; bottom: -180px; left: 33%;
  background: radial-gradient(circle, rgba(14,165,233,0.25) 0%, transparent 60%);
  animation: orbFloat3 20s ease-in-out infinite alternate;
}

@keyframes orbFloat1 {
  0%   { transform: translate(0, 0) scale(1); }
  50%  { transform: translate(-40px, 30px) scale(1.06); }
  100% { transform: translate(20px, -20px) scale(0.97); }
}
@keyframes orbFloat2 {
  0%   { transform: translate(0, 0) scale(1); }
  50%  { transform: translate(30px, -40px) scale(0.95); }
  100% { transform: translate(-30px, 20px) scale(1.08); }
}
@keyframes orbFloat3 {
  0%   { transform: translate(0, 0) scale(1); }
  50%  { transform: translate(35px, -25px) scale(1.04); }
  100% { transform: translate(-25px, 35px) scale(0.98); }
}

/* Neural particle network canvas */
.page-hero-canvas-wrap {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.page-hero-canvas-wrap canvas {
  display: block;
  width: 100% !important;
  height: 100% !important;
}

.page-hero-inner { position: relative; }

.breadcrumb {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 26px;
  font-size: 13px;
  font-weight: 600;
  color: #9BA1C0;
}
.breadcrumb a { color: #C9CDE0; border-bottom: 1px solid transparent; transition: color 0.2s ease, border-color 0.2s ease; }
.breadcrumb a:hover { color: var(--white); border-color: var(--red); }
.breadcrumb [aria-current] { color: var(--white); }

/* badge-pill on a dark background */
.badge-pill--light {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.16);
  box-shadow: none;
  color: #C9CDE0;
}
.badge-pill--light .badge-dot { background: var(--red); }

.page-hero-lead {
  font-size: clamp(15px, 2vw, 17.5px);
  line-height: 1.75;
  color: #C9CDE0;
  margin: 0;
  max-width: 62ch;
}

/* ---------- Founding principles list ---------- */
.principle-list {
  list-style: none;
  margin: 30px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.principle-list li { display: flex; align-items: flex-start; gap: 16px; }
.principle-marker {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: rgba(69, 90, 138, 0.10);
  color: var(--navy);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.5px;
}
.principle-list h3 { font-size: 16px; margin-bottom: 5px; }
.principle-list p { color: var(--muted); font-size: 14.5px; line-height: 1.6; margin: 0; }

/* ---------- Leadership ---------- */
.leadership-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 60px;
  align-items: center;
}
.leadership-copy p { color: var(--muted); font-size: 16px; margin: 18px 0 26px; }
.leadership-copy .check-list { margin-top: 30px; }

.inline-link-note {
  margin: 28px 0 0;
  font-size: 14.5px;
  color: var(--muted);
}
.inline-link-note a {
  color: var(--navy);
  font-weight: 700;
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease;
}
.inline-link-note a:hover { border-color: var(--red); }

.leader-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 18px;
  box-shadow: var(--shadow-md);
  padding: 40px 32px 34px;
  text-align: center;
}
.leader-monogram { width: 132px; margin: 0 auto 22px; }
.leader-monogram svg { width: 100%; height: auto; display: block; }
.leader-card h3 { font-size: 22px; margin-bottom: 6px; }
.leader-role {
  margin: 0;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--navy);
}
.leader-divider {
  display: block;
  width: 46px;
  height: 2px;
  border-radius: 2px;
  background: var(--red);
  margin: 22px auto;
}
.leader-scope { color: var(--muted); font-size: 14.5px; line-height: 1.65; margin: 0 0 22px; }
.leader-tags {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}
.leader-tags li {
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--muted);
}

/* ---------- CEO quote band ---------- */
.quote-band {
  position: relative;
  background: var(--navy-deep);
  color: var(--white);
  padding: 88px 0;
  overflow: hidden;
  background: linear-gradient(225deg, #232538 24%, #232530 1%, #e41321 71%, rgba(69, 86, 138, 0.35) 71%, #232530 40%, #232530 88%, #ff1e27 100%, #232537 98%, #232537 116%, #242538 100%);
  background-size: 100% 100%;
}
.quote-band::before {
  content: "";
  position: absolute;
  left: -140px;
  bottom: -180px;
  width: 420px;
  height: 420px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(69,90,138,0.45) 0%, rgba(69,90,138,0) 70%);
  pointer-events: none;
}
.quote-inner { position: relative; max-width: 840px; text-align: center; }
.quote-figure { margin: 0; }
.quote-mark {
  display: block;
  font-size: 76px;
  font-weight: 800;
  line-height: 0.6;
  color: var(--red);
  margin-bottom: 18px;
}
.quote-band blockquote {
  margin: 0 0 30px;
  font-size: 20px;
  line-height: 1.72;
  color: #E7E9F3;
  font-weight: 500;
}
.quote-band figcaption { display: flex; flex-direction: column; gap: 5px; }
.quote-name { font-size: 15.5px; font-weight: 800; color: var(--white); }
.quote-title {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  color: #9BA1C0;
}

/* ---------- Why SpareMinds value cards ---------- */
.value-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
}
.value-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 34px 30px;
  box-shadow: var(--shadow-sm);
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease, box-shadow 0.25s ease;
}
.value-grid.in-view .value-card { opacity: 1; transform: translateY(0); }
.value-grid.in-view .value-card:nth-child(1) { transition-delay: 0.05s; }
.value-grid.in-view .value-card:nth-child(2) { transition-delay: 0.17s; }
.value-grid.in-view .value-card:nth-child(3) { transition-delay: 0.29s; }
.value-card:hover { box-shadow: var(--shadow-md); }
.value-card h3 { font-size: 18px; margin-bottom: 10px; }
.value-card p { color: var(--muted); font-size: 14.5px; line-height: 1.65; margin: 0; }

/* ---------- Closing CTA band ---------- */
.cta-band {
  background: var(--bg-alt);
  border-top: 1px solid var(--border);
  padding: 64px 0;
}
.cta-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  flex-wrap: wrap;
}
.cta-copy h2 { font-size: 26px; letter-spacing: -0.3px; margin-bottom: 10px; }
.cta-copy p { color: var(--muted); font-size: 15.5px; margin: 0; max-width: 52ch; }
.cta-actions { display: flex; gap: 14px; flex-wrap: wrap; }
/* the CTA band sits on a light surface, so the light outline needs re-tinting */
.cta-band .btn-outline-light { color: var(--text); border-color: var(--border); }
.cta-band .btn-outline-light:hover { border-color: var(--navy); color: var(--navy); background: transparent; }
.cta-band .btn-outline-light-white { color: var(--white); border-color: var(--border); }


/* =========================================================
   Responsive
   ========================================================= */

/* Five nav links stop fitting beside the logo and Contact button
   below ~1000px, so the header collapses to the hamburger here */
@media (max-width: 1000px) {
  .main-nav { display: none; }
  .nav-toggle { display: flex; }
}

/* Hide standalone Contact CTA when nav becomes mobile — it's inside the panel now */
@media (max-width: 1000px) {
  .header-actions .btn-primary { display: none; }
}

/* ---------- Mobile Side-Panel Overlay + Panel ---------- */
.mobile-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  z-index: 99;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.mobile-nav-panel {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 420px;
  max-width: 85vw;
  background: var(--navy-deep);
  z-index: 100;
  transform: translateX(-100%);
  transition: transform 0.3s ease;
  overflow-y: auto;
  border-right: 1px solid rgba(255,255,255,0.08);
}

@media (prefers-reduced-motion: reduce) {
  .mobile-overlay { transition: none; }
  .mobile-nav-panel { transition: none; }
  .mob-chevron { transition: none; }
  .mob-accordion-content a,
  .mob-accordion-toggle,
  .mobile-nav-links > a { transition: none; }
}

.mobile-nav-panel.open {
  transform: translateX(0);
}

.mobile-overlay.open {
  opacity: 1;
  visibility: visible;
}

/* Nav inner layout */
.mobile-nav-inner {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 20px 24px 24px;
  overflow-y: auto;
}

.mobile-nav-links {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* Direct nav links */
.mobile-nav-links > a {
  color: #E7E9F5;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  padding: 14px 0;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  transition: color 0.15s ease, padding-left 0.15s ease;
  text-decoration: none;
}

.mobile-nav-links > a:hover,
.mobile-nav-links > a.active {
  color: var(--red);
  padding-left: 8px;
}

/* Accordion items */
.mob-accordion {
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

.mob-accordion-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 14px 0;
  background: transparent;
  border: none;
  color: var(--white);
  font-family: inherit;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 0.15s ease, padding-left 0.15s ease;
  text-align: left;
}

.mob-accordion-toggle:hover {
  color: var(--red);
  padding-left: 8px;
}

/* Chevron rotation */
.mob-chevron {
  width: 16px;
  height: 16px;
  flex: none;
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
  transition: transform 0.3s ease;
}

.mob-accordion-toggle.is-active .mob-chevron {
  transform: rotate(180deg);
}

/* Accordion content (collapsed by default) */
.mob-accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease;
}

@media (prefers-reduced-motion: reduce) {
  .mob-accordion-content { transition: none; }
}

.mob-accordion-content.open {
  max-height: 600px;
}

/* Links inside accordion */
.mob-accordion-content a {
  display: block;
  color: #B0B6CC;
  font-size: 13.5px;
  padding: 10px 0 10px 16px;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  transition: color 0.15s ease, padding-left 0.15s ease;
  text-decoration: none;
}

.mob-accordion-content a:hover {
  color: var(--white);
  padding-left: 24px;
}

/* Sticky CTA footer */
.mobile-nav-cta {
  margin-top: 24px;
  flex: none;
}

.mobile-nav-cta .btn-primary {
  display: block;
  width: 100%;
  text-align: center;
  border-radius: 8px;
  padding: 16px 0;
  font-size: 14px;
  letter-spacing: 1.2px;
}

@media (max-width: 980px) {
  /* Text above visual on narrow screens — user sees value prop first */
  .hero-copy { order: -1; }
  .hero-inner {
    grid-template-columns: 1fr;
    gap: 28px;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow-x: hidden;
  }

  /* Prevent dashboard card from overflowing its container on narrow viewports */
  .hero-art {
    max-height: 340px;
    overflow: hidden;
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  /* Dashboard responsive at ≤980px: collapse metrics grid to 2-col, tighten padding */
  .dash-row--metrics { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .dash-card { padding: 22px 18px 16px; }
  .about-grid { grid-template-columns: 1fr; }
  .about-media { order: -1; }
  .expertise-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr 1fr; }

  /* About page: leadership card drops below the copy */
  .leadership-grid { grid-template-columns: 1fr; gap: 44px; }
  .leader-card { max-width: 460px; margin: 0 auto; }
  .value-grid { grid-template-columns: 1fr; }

  /* match diagram stacks; connectors rotate to vertical */
  .ti-grid { grid-template-columns: 1fr; justify-items: center; }
  .ti-card { width: 100%; }
  .ti-card--candidate,
  .ti-card--requirement { transform: translateY(20px); }
  .ti-grid.in-view .ti-card { transform: translateY(0); }

  .ti-node::before,
  .ti-node::after {
    top: auto;
    right: auto;
    left: 50%;
    margin-top: 0;
    margin-left: -1px;
    width: 2px;
    height: var(--ti-gap);
  }
  .ti-node::before {
    bottom: 100%;
    background: linear-gradient(180deg, var(--border), var(--navy));
    transform: scaleY(0);
    transform-origin: top center;
  }
  .ti-node::after {
    top: 100%;
    background: linear-gradient(0deg, var(--border), var(--red));
    transform: scaleY(0);
    transform-origin: bottom center;
  }
  .ti-grid.in-view .ti-node::before,
  .ti-grid.in-view .ti-node::after { transform: scaleY(1); }

  /* pipeline flips from a horizontal stepper to a vertical timeline */
  .pipeline { grid-template-columns: 1fr; gap: 0; }
  .pipeline-step {
    display: grid;
    grid-template-columns: 56px 1fr;
    column-gap: 22px;
    padding-bottom: 32px;
  }
  .step-node { margin-bottom: 0; }
  .pipeline-step:not(:last-child)::before,
  .pipeline-step:not(:last-child)::after {
    top: 56px;
    left: 27px;
    width: 2px;
    height: calc(100% - 56px);
  }
  .pipeline-step:not(:last-child)::after {
    background: linear-gradient(180deg, var(--navy), var(--red));
    transform: scaleY(0);
    transform-origin: top center;
  }
  .pipeline.in-view .pipeline-step::after { transform: scaleY(1); }
}

@media (max-width: 760px) {
  /* Allow hero to grow beyond viewport on very small phones */
  .hero { min-height: auto; }

  /* Dashboard responsive at ≤760px: collapse metrics to 1-col, tightest padding */
  .dash-card { padding: 16px 14px 12px; border-radius: 12px; }
  .dash-row--metrics { grid-template-columns: 1fr; gap: 8px; }
  .dash-metric { padding: 10px; }
  .dash-metric-head svg { width: 12px; height: 12px; }
  .dash-metric-label { font-size: 8.5px; letter-spacing: 0.3px; }
  .dash-metric-val { font-size: 12px; }
  .dash-bar-title { font-size: 11px; }
  .dash-ability { padding: 10px 12px; }
  .dash-ability svg { width: 16px; height: 16px; }
  .dash-ability-text { font-size: 10.5px; }

  /* Reduce spacing between hero-media and hero-copy in stacked mode */
  .hero-inner { gap: 20px; }

  /* Make the dashboard card scrollable internally on mobile */
  .hero-art { max-height: 300px; overflow-y: auto; width: 100%; max-width: 100%; min-width: 0; }

  .header-actions .btn-sm { display: none; }

  .hero { padding: 48px 0 64px; }
  .section { padding: 64px 0; }

  /* About page */
  .page-hero { padding: 56px 0 64px; }
  .page-hero-lead { font-size: 16px; }
  .leader-card { padding: 32px 24px 28px; }
  .leader-monogram { width: 108px; }
  .quote-band { padding: 64px 0; }
  .quote-band blockquote { font-size: 17px; }
  .quote-mark { font-size: 60px; }
  .value-card { padding: 28px 22px; }
  .cta-band { padding: 48px 0; }
  .cta-copy h2 { font-size: 22px; }
  .cta-actions .btn { flex: 1 1 100%; }

  .services-grid { grid-template-columns: 1fr; }
  .service-card { padding: 26px 22px; }
  .service-card h3 { font-size: 18px; }
  .service-features li { font-size: 0.9rem; }
  .expertise-grid { grid-template-columns: 1fr; }

  .ti-grid { --ti-gap: 28px; }
  .ti-node { width: 124px; height: 124px; }
  .ti-score { font-size: 25px; }
  .ti-card { padding: 22px 20px 20px; }
  .ti-card h3 { font-size: 16.5px; }
  .ti-card-head { flex-wrap: wrap; }

  .pipeline-step { grid-template-columns: 48px 1fr; column-gap: 18px; padding-bottom: 28px; }
  .step-node { width: 48px; height: 48px; }
  .step-num { font-size: 14px; }
  .pipeline-step:not(:last-child)::before,
  .pipeline-step:not(:last-child)::after {
    top: 48px;
    left: 23px;
    height: calc(100% - 48px);
  }

  .contact-form { padding: 28px 22px; }

  .footer-grid { grid-template-columns: 1fr; gap: 32px; }

  .floating-cta {
    right: 16px;
    bottom: 16px;
    padding: 0;
    width: 52px;
    height: 52px;
    justify-content: center;
  }
  .floating-cta span { display: none; }
  .floating-cta svg { width: 22px; height: 22px; }
  .hero-ticker { margin-top: 32px; padding-top: 18px; }
  .hero-ticker-track { gap: 24px; font-size: 13px; }
}

/* =========================================================
   Reduced motion — show every animated element in its final
   state (AODA / WCAG 2.3.3). Must stay last so it wins.
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  .pipeline .pipeline-step,
  .pipeline.in-view .pipeline-step {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .pipeline .pipeline-step::after,
  .pipeline.in-view .pipeline-step::after {
    transform: none;
    transition: none;
  }

  .check-list li,
  .check-list.in-view li {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .ti-grid .ti-card,
  .ti-grid.in-view .ti-card,
  .ti-grid .ti-chip,
  .ti-grid.in-view .ti-chip,
  .ti-grid .ti-node,
  .ti-grid.in-view .ti-node {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .ti-grid .ti-node::before,
  .ti-grid .ti-node::after,
  .ti-grid.in-view .ti-node::before,
  .ti-grid.in-view .ti-node::after {
    transform: none;
    transition: none;
  }
  .ti-grid .ti-ring-fill,
  .ti-grid.in-view .ti-ring-fill {
    stroke-dashoffset: 27.1;
    transition: none;
  }

  .btn:hover,
  .service-card:hover,
  .expertise-card:hover,
  .floating-cta:hover,
  .pipeline-step:hover .step-node { transform: none; }

  .services-grid .service-features li,
  .services-grid.in-view .service-features li {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .value-grid .value-card,
  .value-grid.in-view .value-card {
    opacity: 1;
    transform: none;
    transition: none;
  }
}
/* ---------- Contact ---------- */
.contact-info-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin: 40px 0 8px;
}
.contact-info-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px 26px;
  text-align: center;
  box-shadow: var(--shadow-sm);
}
.contact-info-card .icon-badge { margin: 0 auto 14px; }
.contact-info-card h3 { font-size: 15px; margin-bottom: 8px; }
.contact-info-card p, .contact-info-card a {
  font-size: 14.5px;
  color: var(--muted);
  line-height: 1.6;
}
.contact-info-card a:hover { color: var(--navy); }

.request-type-toggle {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 28px;
}
.request-option { position: relative; cursor: pointer; display: block; }
.request-option input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}
.request-option-inner {
  display: block;
  padding: 18px 20px;
  border: 2px solid var(--border);
  border-radius: var(--radius);
  transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}
.request-option-inner strong { display: block; font-size: 15.5px; margin-bottom: 4px; }
.request-option-inner small { color: var(--muted); font-size: 13px; }
.request-option:has(input:checked) .request-option-inner {
  border-color: var(--red);
  background: rgba(230,25,25,0.04);
  box-shadow: 0 0 0 3px rgba(230,25,25,0.08);
}
.request-option:has(input:focus-visible) .request-option-inner {
  outline: 2px solid var(--navy);
  outline-offset: 2px;
}

.optional-tag { color: var(--muted); font-weight: 400; }

.conditional-fields { overflow: hidden; }

.form-field select {
  width: 100%;
  padding: 13px 16px;
  border-radius: 8px;
  border: 1px solid var(--border);
  font-family: inherit;
  font-size: 15px;
  color: var(--text);
  background: var(--white);
}
.form-field select:focus {
  outline: none;
  border-color: var(--navy);
  box-shadow: 0 0 0 3px rgba(69,90,138,0.15);
}

.file-field input[type="file"] { position: absolute; opacity: 0; width: 1px; height: 1px; }
.file-drop {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 16px;
  border: 1.5px dashed var(--border);
  border-radius: 8px;
  color: var(--muted);
  font-size: 14.5px;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.file-drop:hover { border-color: var(--navy); color: var(--navy); }
.file-drop svg { width: 18px; height: 18px; flex-shrink: 0; }
.file-drop.has-file { border-style: solid; border-color: var(--green); color: var(--text); }

.contact-form {
  max-width: 620px;
  margin: 0 auto;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 40px;
  box-shadow: var(--shadow-sm);
}
.form-field { margin-bottom: 22px; }
.form-field label {
  display: block;
  font-weight: 700;
  font-size: 14px;
  margin-bottom: 8px;
}
.form-field input,
.form-field textarea {
  width: 100%;
  padding: 13px 16px;
  border-radius: 8px;
  border: 1px solid var(--border);
  font-family: inherit;
  font-size: 15px;
  color: var(--text);
  background: var(--white);
  resize: vertical;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.form-field input:focus,
.form-field textarea:focus {
  outline: none;
  border-color: var(--navy);
  box-shadow: 0 0 0 3px rgba(69,90,138,0.15);
}
.form-field input.invalid,
.form-field textarea.invalid { border-color: var(--red); }
.field-error {
  display: block;
  color: var(--red);
  font-size: 12.5px;
  margin-top: 6px;
  min-height: 15px;
}
.form-status {
  text-align: center;
  font-weight: 600;
  font-size: 14px;
  margin: 18px 0 0;
  min-height: 20px;
}
.form-status.success { color: var(--green); }
.form-status.error { color: var(--red); }

/* ---------- Overview ---------- */
.overview-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  align-items: start;
}
.overview-copy p { color: var(--muted); font-size: 16px; margin: 0 0 20px; }
.overview-copy h3 { font-size: 19px; margin: 8px 0 18px; }
.overview-grid { margin-bottom: 56px; }
.check-list.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 24px;
}
.check-list.two-col li { font-size: 14.5px; }

.check-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.check-list li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: 600;
  font-size: 15px;
  opacity: 0;
  transform: translateX(-22px);
  transition: opacity 0.55s ease, transform 0.55s ease;
}
.check-list li {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.check-list.in-view li {
    opacity: 1;
    transform: translateY(0);
}
.check-list.in-view li { opacity: 1; transform: translateX(0); }
.check-list.in-view li:nth-child(1) { transition-delay: 0.05s; }
.check-list.in-view li:nth-child(2) { transition-delay: 0.15s; }
.check-list.in-view li:nth-child(3) { transition-delay: 0.25s; }
.check-list.in-view li:nth-child(4) { transition-delay: 0.35s; }
.check-list.in-view li:nth-child(5) { transition-delay: 0.45s; }
.check-list.in-view li:nth-child(6) { transition-delay: 0.55s; }
.check-list.in-view li:nth-child(7) { transition-delay: 0.65s; }
.check-list.in-view li:nth-child(8) { transition-delay: 0.75s; }
.check-list.in-view li:nth-child(9) { transition-delay: 0.85s; }
.check-list.in-view li:nth-child(10) { transition-delay: 0.95s; }
.check-list.in-view li:nth-child(11) { transition-delay: 1.05s; }
.check-list.in-view li:nth-child(12) { transition-delay: 1.15s; }
.check-icon {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: rgba(30,158,90,0.12);
  color: var(--green);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  flex-shrink: 0;
}

.about-media { border-radius: 18px; overflow: hidden; box-shadow: var(--shadow-md); }
.about-svg { width: 100%; height: auto; display: block; }
/* ---------- FAQ accordion ---------- */
      .faq-list {
        max-width: 780px; margin: 0 auto; display: flex; flex-direction: column; gap: 0;
      }
 .faq-item { border-top: 1px solid var(--border); }
      .faq-question {
        width: 100%; background: none; border: none; cursor: pointer;
   display: flex; align-items: center; justify-content: space-between; gap: 20px;
        padding: 22px 4px; text-align: left; font-family: inherit; font-size: 16px; font-weight: 700; color: var(--text);
        transition: color 0.2s ease;
 }
      .faq-question:hover { color: var(--navy); }
      .faq-icon { width: 20px; height: 20px; flex-shrink: 0; transition: transform 0.3s ease; }
      .faq-question[aria-expanded="true"] .faq-icon { transform: rotate(180deg); }
    .faq-answer {
        max-height: 0; overflow: hidden; transition: max-height 0.4s ease, padding 0.3s ease;
      }
      .faq-answer.open { max-height: 300px; padding-bottom: 12px; }
    .faq-answer p { color: var(--muted); font-size: 14.5px; line-height: 1.65; margin: 0; }
/* =========================================================
   Services page (services.html)
   ========================================================= */

/* ---------- Engagement models grid ---------- */
.engagement-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.engagement-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 34px 30px 30px;
  box-shadow: var(--shadow-sm);
  position: relative;
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease, transform 0.6s ease, box-shadow 0.25s ease;
}
.engagement-grid.in-view .engagement-card { opacity: 1; transform: translateY(0); }
.engagement-grid.in-view .engagement-card:nth-child(1) { transition-delay: 0.05s; }
.engagement-grid.in-view .engagement-card:nth-child(2) { transition-delay: 0.17s; }
.engagement-grid.in-view .engagement-card:nth-child(3) { transition-delay: 0.29s; }
.engagement-card:hover { box-shadow: var(--shadow-md); transform: translateY(-3px) !important; }
.engagement-card h3 { font-size: 18px; margin-bottom: 10px; }
.engagement-card > p { color: var(--muted); font-size: 14.5px; line-height: 1.65; margin: 0 0 18px; }

.card-label {
  position: absolute; top: -1px; right: 20px;
  background: var(--red); color: var(--white);
  font-size: 10.5px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase;
  padding: 6px 14px; border-radius: 0 0 8px 8px;
}
.engagement-card--featured {
  border-color: var(--red);
  box-shadow: 0 2px 16px rgba(230,25,25,0.10);
}

.engagement-benefits {
  list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px;
}
.engagement-benefits li {
  font-size: 13.5px; color: var(--muted); line-height: 1.55; position: relative;
  padding-left: 20px; opacity: 0; transform: translateX(-12px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}
.engagement-grid.in-view .engagement-benefits li { opacity: 1; transform: translateX(0); }
.engagement-grid.in-view .engagement-card:nth-child(1) .engagement-benefits li { transition-delay: 0.35s; }
.engagement-grid.in-view .engagement-card:nth-child(2) .engagement-benefits li { transition-delay: 0.47s; }
.engagement-grid.in-view .engagement-card:nth-child(3) .engagement-benefits li { transition-delay: 0.59s; }
.engagement-benefits li::before {
  content: "\2713"; position: absolute; left: 0; color: var(--red); font-weight: 700;
}

/* ---------- Process grid ---------- */
.process-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
}
.process-step {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.process-grid.in-view .process-step { opacity: 1; transform: translateY(0); }
.process-grid.in-view .process-step:nth-child(1) { transition-delay: 0.05s; }
.process-grid.in-view .process-step:nth-child(2) { transition-delay: 0.17s; }
.process-grid.in-view .process-step:nth-child(3) { transition-delay: 0.29s; }
.process-grid.in-view .process-step:nth-child(4) { transition-delay: 0.41s; }

.step-number {
  font-size: 36px; font-weight: 800; line-height: 1; margin-bottom: 18px;
  background: linear-gradient(135deg, var(--navy), var(--red));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
}
.process-step h3 { font-size: 17px; margin-bottom: 8px; }
.process-step p { color: var(--muted); font-size: 14px; line-height: 1.6; margin: 0; }

/* ---------- Expertise grid (wide variant) ---------- */
.expertise-grid-wide {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.role-card {
  position: relative;
  background: var(--white);
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: 24px;
  padding: 32px 28px;
  box-shadow: 0 2px 8px rgba(10,14,39,0.03),
              0 16px 40px rgba(10,14,39,0.07);
  transition: box-shadow 0.35s ease, transform 0.35s ease;
}

/* Right-edge red shed glow — ambient warmth */
.role-card::after {
  content: '';
  position: absolute;
  top: -30%;
  right: -80px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(230,25,25,0.10) 0%, transparent 65%);
  filter: blur(48px);
  pointer-events: none;
  z-index: -1;
  opacity: 0.5;
  transition: opacity 0.35s ease, transform 0.35s ease;
}

/* Float state on hover */
.role-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 4px 12px rgba(10,14,39,0.04),
              0 28px 56px rgba(10,14,39,0.11);
}

.role-card:hover::after {
  opacity: 0.9;
  transform: translateX(-8px) scale(1.3);
}

.role-card h3 { font-size: 16.5px; margin-bottom: 8px; }
.role-card p { color: var(--muted); font-size: 13.5px; line-height: 1.55; margin: 0; }

/* ---------- Value cards (wide variant) ---------- */
.value-grid-wide {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
}
.value-card-wide {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 32px 28px;
  box-shadow: var(--shadow-sm);
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease, box-shadow 0.25s ease;
}
.value-grid-wide.in-view .value-card-wide { opacity: 1; transform: translateY(0); }
.value-grid-wide.in-view .value-card-wide:nth-child(1) { transition-delay: 0.05s; }
.value-grid-wide.in-view .value-card-wide:nth-child(2) { transition-delay: 0.14s; }
.value-grid-wide.in-view .value-card-wide:nth-child(3) { transition-delay: 0.23s; }
.value-grid-wide.in-view .value-card-wide:nth-child(4) { transition-delay: 0.32s; }
.value-grid-wide.in-view .value-card-wide:nth-child(5) { transition-delay: 0.41s; }
.value-grid-wide.in-view .value-card-wide:nth-child(6) { transition-delay: 0.50s; }
.value-card-wide:hover { box-shadow: var(--shadow-md); }
.value-card-wide h3 { font-size: 17px; margin-bottom: 8px; }
.value-card-wide p { color: var(--muted); font-size: 14.5px; line-height: 1.65; margin: 0; }

/* ---------- FAQ accordion ---------- */
.faq-list {
  max-width: 780px; margin: 0 auto; display: flex; flex-direction: column; gap: 0;
}
.faq-item { border-top: 1px solid var(--border); }
.faq-question {
  width: 100%; background: none; border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 22px 4px; text-align: left; font-family: inherit; font-size: 16px; font-weight: 700; color: var(--text);
  transition: color 0.2s ease;
}
.faq-question:hover { color: var(--navy); }
.faq-icon { width: 20px; height: 20px; flex-shrink: 0; transition: transform 0.3s ease; }
.faq-question[aria-expanded="true"] .faq-icon { transform: rotate(180deg); }
.faq-answer {
  max-height: 0; overflow: hidden; transition: max-height 0.4s ease, padding 0.3s ease;
}
.faq-answer.open { max-height: 300px; padding-bottom: 12px; }
.faq-answer p { color: var(--muted); font-size: 14.5px; line-height: 1.65; margin: 0; }

/* ---------- Responsive overrides for services page ---------- */

@media (max-width: 980px) {
  .engagement-grid,
  .expertise-grid-wide,
  .value-grid-wide { grid-template-columns: repeat(2, 1fr); }
  .process-grid { grid-template-columns: repeat(2, 1fr); gap: 32px; }
}

@media (max-width: 760px) {
  .engagement-grid,
  .expertise-grid-wide,
  .value-grid-wide { grid-template-columns: 1fr; }
  .process-grid { grid-template-columns: 1fr; gap: 24px; }
  .cta-inner { flex-direction: column; text-align: center; }
  .faq-question { font-size: 15px; padding: 18px 0; }
}

/* ---------- Reduced motion for services page ---------- */
@media (prefers-reduced-motion: reduce) {
  .engagement-card,
  .engagement-grid.in-view .engagement-card,
  .process-step,
  .process-grid.in-view .process-step,
  .value-card-wide,
  .value-grid-wide.in-view .value-card-wide,
  .engagement-benefits li,
  .engagement-grid.in-view .engagement-benefits li {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* =========================================================
   Process page (process.html)
   ========================================================= */

/* ---------- Process split layout (StackIT-style two-column) ---------- */
.process-split { padding-bottom: 0; }
.process-split-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
}
.process-panel { padding-top: 8px; }
.process-panel--secondary { border-left: 1px solid var(--border); padding-left: 32px; }

/* ---------- StackIT-style numbered process list ---------- */
.stackit-process-list {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: stackit-step;
}
.stackit-step {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  counter-increment: stackit-step;
  padding: 24px 0;
  border-bottom: 1px solid var(--border);
  opacity: 0;
  transform: translateX(-16px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.process-split.in-view .stackit-step { opacity: 1; transform: translateX(0); }

/* stagger */
.stackit-process-list > li:nth-child(1) { transition-delay: 0.05s; }
.stackit-process-list > li:nth-child(2) { transition-delay: 0.14s; }
.stackit-process-list > li:nth-child(3) { transition-delay: 0.23s; }
.stackit-process-list > li:nth-child(4) { transition-delay: 0.32s; }
.stackit-process-list > li:nth-child(5) { transition-delay: 0.41s; }
.stackit-process-list > li:nth-child(6) { transition-delay: 0.50s; }

.step-num-badge {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--navy);
  color: var(--white);
  font-size: 18px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
/* connector line between steps */
.stackit-step:not(:last-child) .step-num-badge::after {
  content: "";
  position: absolute;
  bottom: calc(100% + 24px);
  left: 50%;
  width: 2px;
  height: 24px;
  background: var(--border);
  transform: translateX(-50%);
}
.step-num-badge--red { background: var(--red); }

.step-body-text h3 { font-size: 16.5px; margin-bottom: 6px; }
.step-body-text p { color: var(--muted); font-size: 14px; line-height: 1.6; margin: 0; }

/* ---------- Policy / Compliance banner ---------- */
.policy-band {
  background: var(--navy-deep);
  color: var(--white);
  padding: 72px 0;
  text-align: center;
}
.policy-band h2 {
  color: var(--white);
  font-size: 28px;
  margin-bottom: 12px;
}
.policy-band > .container > p {
  color: #C9CDE0;
  font-size: 15.5px;
  max-width: 600px;
  margin: 0 auto 48px;
}

.policy-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin-top: 40px;
}
.policy-item {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: #E7E9F3;
  font-size: 14px;
  font-weight: 600;
  border: 1px solid rgba(10, 14, 39, 0.07);
  border-radius: 20px 2px;
  padding: 7px;
}
.policy-item svg {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  color: var(--red);
}

/* ---- policy-grid items on light backgrounds (Challenge sections) ---- */
.section .policy-item {
  color: var(--text);
}
.section .policy-item svg {
  stroke: var(--red);
}

/* ---------- Dark CTA band ---------- */
.cta-band--dark {
  background: linear-gradient(180deg, var(--navy-deep) 0%, #1B2450 100%);
  border-top: 1px solid rgba(255,255,255,0.08);
}
.cta-band--dark .cta-copy h2 { color: var(--white); }
.cta-band--dark .cta-copy p { color: #C9CDE0; }

/* ---------- Flip Cards (Why SpareMinds) ---------- */

.flip-card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

.flip-card {
  height: 220px;
  perspective: 900px;
  cursor: pointer;
}

.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  transform-style: preserve-3d;
}

.flip-card:hover .flip-card-inner,
.flip-card.flipped .flip-card-inner {
  transform: rotateY(180deg);
}

.flip-card-front,
.flip-card-back {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 28px;
  text-align: center;
  overflow: hidden;
}

.flip-card-front {
  box-shadow: 0 2px 8px rgba(10,14,39,0.03), 0 16px 40px rgba(10,14,39,0.07);
  overflow: hidden;
}

.card-full-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: initial;
}

.flip-card:hover .card-full-image {
  transform: scale(1.05);
  transition: transform 0.4s ease;
}

.flip-card-back {
  background: linear-gradient(145deg, #2D1E81 0%, var(--navy-deep) 100%);
  color: var(--white);
  transform: rotateY(180deg);
  box-shadow: 0 2px 8px rgba(10,14,39,0.05), 0 20px 48px rgba(45,30,129,0.15);
  justify-content: center;
  gap: 16px;
}

.back-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 17px;
  color: var(--white);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.35;
  margin: 0;
}

.back-icon {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  stroke-width: 1.8;
}

.flip-card-back p {
  font-size: 14px;
  line-height: 1.65;
  color: #D6D8EA;
  margin: 0;
}

/* ---------- Responsive ---------- */

@media (max-width: 1060px) {
  .process-split-inner {
    grid-template-columns: 1fr;
    gap: 48px;
  }
  .process-panel--secondary {
    border-left: none;
    border-top: 1px solid var(--border);
    padding-left: 0;
    padding-top: 32px;
  }
}

@media (max-width: 980px) {
  .policy-grid { grid-template-columns: repeat(2, 1fr); gap: 24px; }
}

@media (max-width: 760px) {
  .process-split-inner { gap: 36px; }
  .step-num-badge { width: 40px; height: 40px; font-size: 15px; }
  .stackit-step { gap: 16px; padding: 20px 0; }
  .policy-grid { grid-template-columns: 1fr; gap: 20px; }
  .policy-band h2 { font-size: 22px; }
  .policy-item { justify-content: flex-start; }
  .cta-band--dark { padding: 56px 0; }
  .flip-card-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
  .flip-card { height: 200px; }
}

@media (max-width: 540px) {
  .flip-card-grid { grid-template-columns: 1fr; }
  .flip-card { height: 220px; }
}

/* ---------- Reduced motion for process page ---------- */
@media (prefers-reduced-motion: reduce) {
  .stackit-step,
  .process-split.in-view .stackit-step {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* =========================================================
   Specialties Mega-Menu Dropdown
   ========================================================= */

.nav-dropdown {
  position: relative;
}

.nav-dropdown-toggle {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 8px 6px;
  background: transparent;
  border: none;
  color: #E7E9F5;
  font-family: inherit;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: color 0.15s ease, border-color 0.15s ease;
  text-transform: uppercase; font-size: 13px; letter-spacing: 1.2px; color: var(--white); font-weight: 700;
}
.nav-dropdown-toggle:hover {
  color: var(--white);
  border-color: var(--red);
}

.nav-chevron {
  width: 12px;
  height: 12px;
  transition: transform 0.3s ease;
}

/* ---- Dropdown panel (desktop hover) ---- */
.megamenu {
  position: absolute;
  top: calc(100% + 4px);
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  width: 720px;
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: 0 20px 60px rgba(10, 14, 39, 0.25);
  border: 1px solid var(--border);
  padding: 28px 32px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
  z-index: 101;
}

/* Safety-net overlay — invisible layer extending 24px around the megamenu panel.
   This is what actually receives pointer events when the cursor hovers near (but not yet on) the visible panel. */
.megamenu::after {
  content: '';
  position: absolute;
  inset: -24px;
  z-index: -1;
}

/* Default: hide all megamenus (covers both non-hovered dropdowns AND inactive ones) */
.nav-dropdown > .megamenu {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Show only the direct child megamenu when its parent nav-dropdown is hovered */
.nav-dropdown:hover > .megamenu {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: translateX(-50%) translateY(0) !important;
  transition-delay: 0s; /* instant show — no flicker when mouse re-enters */
}

/* Grace period on hover exit — delay the fade so cursor can cross the gap freely */
.nav-dropdown:not(:hover) > .megamenu {
  transition-delay: 0.15s;
}

/* Rotate chevron on open */
.nav-dropdown:hover .nav-chevron,
.nav-dropdown.is-open .nav-chevron {
  transform: rotate(180deg);
}

/* Show megamenu when dropdown has is-open class (mobile/touch) */
.nav-dropdown.is-open > .megamenu {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: translateX(-50%) translateY(0) !important;
}

/* Bottom arrow */
.megamenu::before {
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-bottom: 6px solid var(--white);
}

/* Keep pointer over the gap between toggle and panel */
.nav-dropdown::before {
  content: '';
  position: absolute;
  top: -12px;
  left: -12px;
  right: -12px;
  height: 20px;
}

.megamenu-inner {
  display: flex;
  gap: 32px;
}

/* ---- Left preview column ---- */
.megamenu-preview {
  flex: none;
  width: 240px;
  padding-right: 24px;
  border-right: 1px solid var(--border);
}

.megamenu-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 8px;
}

.megamenu-desc {
  font-size: 13px;
  line-height: 1.6;
  color: var(--muted);
  margin: 0;
}

/* ---- Right grid column ---- */
.megamenu-grid {
  flex: 1;
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 16px;
}

.megamenu-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 8px;
  border: 1px solid transparent;
  transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
  text-decoration: none;
  color: var(--text);
  position: relative;
}

.megamenu-item:hover {
  border-color: var(--border);
  background: var(--bg-alt);
  box-shadow: var(--shadow-sm);
}

/* Icon circle */
.megamenu-icon {
  flex: none;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  /* background: linear-gradient(135deg, #fff 0%, var(--bg-alt) 100%); */
  background: rgba(69,90,138,0.35);
  border: 1px solid var(--border);
}

.megamenu-icon svg {
  width: 18px;
  height: 18px;
  stroke: var(--navy);
  stroke-width: 2;
}

/* Content */
.megamenu-content h4 {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 3px;
}

.megamenu-content span {
  font-size: 10px;
  line-height: inherit;
  color: var(--muted);
  text-transform:capitalize;
  font-weight: 100;  
}

/* ---- "New" badge ---- */
.megamenu-badge {
  position: absolute;
  top: -8px;
  right: -4px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  background: var(--red);
  color: var(--white);
  padding: 2px 8px;
  border-radius: 4px;
  display: block;
}

/* .megamenu-item--new {
  border-color: rgba(230, 25, 25, 0.15);
  background: linear-gradient(to right, rgba(230, 25, 25, 0.03), transparent);
} */

/* .megamenu-item--new:hover {
  border-color: rgba(230, 25, 25, 0.3);
  background: linear-gradient(to right, rgba(230, 25, 25, 0.06), transparent);
} */

/* ---- Responsive overrides ---- */

@media (max-width: 980px) {
  .megamenu {
    width: calc(100vw - 48px);
    max-width: 600px;
  }
  .megamenu-preview {
    width: 200px;
  }
  .megamenu-grid {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  }
}

@media (max-width: 760px) {
  /* Mobile: always hidden, toggled by button */
  .megamenu {
    position: absolute;
    top: calc(100% + 4px);
    left: 50%;
    right: auto;
    bottom: auto;
    width: min(calc(100vw - 32px), 600px);
    max-width: none;
    height: auto;
    max-height: 80vh;
    overflow-y: auto;
    transform: translateX(-50%) translateY(0);
    opacity: 1 !important;
    visibility: visible !important;
    padding: 20px 16px;
    z-index: 99;
  }

  .nav-dropdown.open .megamenu {
    visibility: visible;
  }

  .megamenu::before {
    display: none;
  }

  .megamenu-inner {
    flex-direction: column;
    gap: 16px;
  }

  .megamenu-preview {
    width: 100%;
    padding-right: 0;
    padding-bottom: 16px;
    border-right: none;
    border-bottom: 1px solid var(--border);
  }

  .megamenu-grid {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  /* Hide mega-menu by default in mobile nav */
  .nav-dropdown {
    display: block;
  }

  .main-nav.open > .megamenu,
  .nav-dropdown:not(.is-open) > .megamenu {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
  }

  .main-nav.open > .nav-dropdown.is-open > .megamenu,
  .nav-dropdown.is-open > .megamenu {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }

  .nav-dropdown-toggle {
    padding-left: 0;
  }
}

@media (max-width: 540px) {
  .megamenu {
    max-height: 90vh;
  }
}

/* ---- "New" badge ---- */
.megamenu-badge {
  position: absolute;
  top: -8px;
  right: -4px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  background: var(--red);
  color: var(--white);
  padding: 2px 8px;
  border-radius: 4px;
  display: block;
}

@media (max-width: 980px) {
  .megamenu-grid {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  }
}

/* =========================================================
   Careers page (careers.html) — Virtuousskill-inspired layout
   ========================================================= */

/* ---- Focus domain pills (hero badge strip) ---- */
.careers-focus-domains {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 36px;
}
.focus-domain-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(30, 41, 59, 0.6);
  border: 1px solid #334155;
  border-radius: 999px;
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 600;
  color: #E2E8F0;
}
.focus-domain-pill svg {
  width: 18px;
  height: 18px;
  stroke: var(--red);
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}

/* ---- Trust / credentials band ---- */
.careers-trust-band {
  background: var(--bg-alt);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 32px 0;
}
.trust-grid {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 40px;
  flex-wrap: wrap;
}
.trust-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 600;
  color: var(--muted);
  white-space: nowrap;
}
.trust-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: rgba(69, 90, 138, 0.10);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.trust-icon svg {
  width: 18px;
  height: 18px;
  stroke: var(--navy);
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---- Disciplines grid (practice areas) ---- */
.disciplines-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.discipline-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 36px 28px;
  box-shadow: var(--shadow-sm);
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
  outline: none;
}
.discipline-card:hover,
.discipline-card:focus-visible {
  box-shadow: var(--shadow-md);
  border-color: var(--navy);
  transform: translateY(-2px);
}
.discipline-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: rgba(230, 25, 25, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}
.discipline-icon svg {
  width: 26px;
  height: 26px;
  stroke: var(--red);
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.discipline-card h3 { font-size: 18px; margin-bottom: 10px; color: var(--text); }
.discipline-card p { color: var(--muted); font-size: 14.5px; line-height: 1.65; margin-bottom: 18px; }
.discipline-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.discipline-tags li {
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 4px 12px;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
}

/* ---- Popular searches keyword grid ---- */
.careers-popular {
  padding: 72px 0;
  background: var(--white);
}
.careers-popular-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.popular-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}
.popular-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 600;
  color: var(--muted);
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}
.popular-tag:hover {
  border-color: var(--navy);
  color: var(--navy);
  background: rgba(69, 90, 138, 0.05);
}
.popular-tag svg {
  width: 14px;
  height: 14px;
  stroke: currentColor;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.5;
  flex-shrink: 0;
}

/* ---- Open roles card placeholder ---- */
.open-roles-card {
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 48px 40px;
  text-align: center;
}

/* =========================================================
   Careers page responsive overrides
   ========================================================= */

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

@media (max-width: 760px) {
  .trust-grid { gap: 24px; }
  .trust-item { font-size: 13.5px; }
}

@media (max-width: 540px) {
  .disciplines-grid { grid-template-columns: 1fr; }
  .careers-focus-domains { gap: 8px; }
  .focus-domain-pill { font-size: 13px; padding: 8px 16px; }
}

/* ---- Careers page reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  .discipline-card {
    transition: none;
    transform: none !important;
  }
  .popular-tag {
    transition: none;
    transform: none !important;
  }
}