/* ==========================================================================
   SA Consulting — "Executive Clarity" design system
   Hand-written vanilla CSS.
   ========================================================================== */

/* ---------- Design tokens ---------- */
:root {
  /* Brand / primary */
  --primary: #000000;
  --on-primary: #ffffff;
  --primary-container: #001a41;   /* navy */
  --on-primary-container: #6f84b0;
  --primary-fixed: #d8e2ff;
  --primary-fixed-dim: #b2c6f7;
  --inverse-primary: #b2c6f7;

  /* Secondary (professional / sky blue) */
  --secondary: #0061a5;
  --on-secondary: #ffffff;
  --secondary-container: #0095f8;  /* sky / bright */
  --on-secondary-container: #002b4e;
  --secondary-fixed: #d2e4ff;
  --secondary-fixed-dim: #9fcaff;
  --on-secondary-fixed: #001d36;
  --on-secondary-fixed-variant: #00497e;

  /* Convenience aliases used throughout the markup */
  --navy: #001a41;
  --sky: #0095f8;
  --cool-white: #f4f7f9;

  /* Surfaces / background */
  --background: #f9f9fc;
  --on-background: #1a1c1e;
  --surface: #f9f9fc;
  --surface-container-lowest: #ffffff;
  --surface-container-low: #f3f3f6;
  --surface-container: #eeeef0;
  --surface-container-high: #e8e8ea;
  --surface-container-highest: #e2e2e5;
  --surface-variant: #e2e2e5;
  --on-surface: #1a1c1e;
  --on-surface-variant: #44474e;

  /* Inverse (footer / dark sections) */
  --inverse-surface: #2f3133;
  --inverse-on-surface: #f0f0f3;

  /* Lines / status */
  --outline: #75777f;
  --outline-variant: #c5c6cf;
  --error: #ba1a1a;

  /* Radius scale */
  --radius-sm: 4px;
  --radius: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-2xl: 32px;
  --radius-full: 9999px;

  /* Layout */
  --container-max: 1280px;
  --gutter: 24px;
  --margin-mobile: 16px;
  --margin-tablet: 32px;
  --margin-desktop: 64px;

  /* Elevation */
  --shadow: 0px 4px 20px rgba(0, 26, 65, 0.1);
  --shadow-lg: 0px 12px 40px rgba(0, 26, 65, 0.15);

  --font: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* ---------- Reset / base ---------- */
*,
*::before,
*::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.5;
  color: var(--on-surface);
  background: var(--background);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
ul { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4, p { margin: 0; }
:focus-visible { outline: 2px solid var(--secondary); outline-offset: 2px; }

/* Material Symbols sizing */
.material-symbols-outlined {
  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
  line-height: 1;
  user-select: none;
}

/* ---------- Typography scale ---------- */
.h-xl { font-size: 48px; line-height: 56px; font-weight: 700; letter-spacing: -0.02em; }
.h-lg { font-size: 32px; line-height: 40px; font-weight: 700; letter-spacing: -0.01em; }
.h-md { font-size: 24px; line-height: 32px; font-weight: 600; }
.h-sm { font-size: 20px; line-height: 28px; font-weight: 700; }
.body-lg { font-size: 18px; line-height: 28px; font-weight: 400; }
.body-md { font-size: 16px; line-height: 24px; font-weight: 400; }
.body-sm { font-size: 14px; line-height: 20px; font-weight: 400; }
.label-md {
  font-size: 12px; line-height: 16px; font-weight: 600;
  letter-spacing: 0.05em; text-transform: uppercase;
}

@media (max-width: 640px) {
  .h-xl { font-size: 34px; line-height: 42px; }
  .h-lg { font-size: 28px; line-height: 36px; }
}

/* Colour helpers */
.text-secondary { color: var(--secondary); }
.text-navy { color: var(--navy); }
.text-muted { color: var(--on-surface-variant); }
.text-white { color: var(--on-primary); }
.text-center { text-align: center; }

/* The recurring "eyebrow" kicker above headings */
.eyebrow {
  display: inline-block;
  color: var(--secondary);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin-bottom: 16px;
}

/* Pill / chip */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: var(--radius-full);
  background: var(--secondary-fixed);
  color: var(--on-secondary-container);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* ---------- Layout ---------- */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--margin-mobile);
}
@media (min-width: 768px) { .container { padding-inline: var(--margin-tablet); } }
@media (min-width: 1024px) { .container { padding-inline: var(--margin-desktop); } }

.section { padding-block: 96px; }
.section--sm { padding-block: 64px; }
@media (max-width: 640px) { .section { padding-block: 64px; } }

/* Background helpers for full-bleed sections */
.bg-surface { background: var(--surface); }
.bg-surface-low { background: var(--surface-container-low); }
.bg-surface-container { background: var(--surface-container); }
.bg-cool-white { background: var(--cool-white); }
.bg-navy { background: var(--navy); color: var(--on-primary); }
.bg-white { background: #fff; }

.shadow { box-shadow: var(--shadow); }
.shadow-lg { box-shadow: var(--shadow-lg); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 24px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-weight: 600;
  font-size: 14px;
  line-height: 1;
  transition: transform .15s ease, background-color .2s ease, color .2s ease, border-color .2s ease;
  white-space: nowrap;
}
.btn .material-symbols-outlined { font-size: 18px; }
.btn--lg { padding: 16px 32px; font-size: 16px; border-radius: var(--radius-md); }

.btn--primary { background: var(--primary-container); color: var(--on-primary); }
.btn--primary:hover { background: var(--secondary); }

.btn--sky { background: var(--secondary-container); color: var(--on-primary); }
.btn--sky:hover { background: #0085e0; }

.btn--secondary { background: var(--secondary); color: var(--on-primary); }
.btn--secondary:hover { background: #00558f; }

.btn--outline { background: transparent; border-color: var(--outline-variant); color: var(--navy); }
.btn--outline:hover { background: rgba(0, 26, 65, 0.04); }

/* On dark backgrounds */
.btn--ghost-light { background: transparent; border-color: rgba(255, 255, 255, 0.3); color: var(--on-primary); }
.btn--ghost-light:hover { background: rgba(255, 255, 255, 0.1); }

.btn:active { transform: scale(0.97); }

/* ---------- Header / nav ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(249, 250, 252, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--outline-variant);
  transition: box-shadow .3s ease;
}
.site-header.is-scrolled { box-shadow: var(--shadow); }

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 104px;
}
.nav__logo img { height: 88px; width: auto; }
@media (max-width: 480px) {
  .nav { height: 84px; }
  .nav__logo img { height: 68px; }
}

.nav__links {
  display: none;
  align-items: center;
  gap: 32px;
}
.nav__link {
  color: var(--on-surface-variant);
  font-size: 16px;
  transition: color .2s ease;
}
.nav__link:hover { color: var(--secondary); }
.nav__link.is-active {
  color: var(--secondary);
  font-weight: 600;
  border-bottom: 2px solid var(--secondary);
  padding-bottom: 4px;
}

/* Products dropdown */
.nav__dropdown { position: relative; }
.nav__dropdown-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: none;
  border: none;
  color: var(--on-surface-variant);
  font-size: 16px;
  padding: 0;
  transition: color .2s ease;
}
.nav__dropdown-btn .material-symbols-outlined { font-size: 18px; }
.nav__dropdown:hover .nav__dropdown-btn { color: var(--secondary); }
.nav__dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  padding-top: 12px;
  min-width: 180px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: all .2s ease;
}
.nav__dropdown:hover .nav__dropdown-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.nav__dropdown-menu ul {
  background: var(--surface-container-lowest);
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: 8px;
}
.nav__dropdown-menu a {
  display: block;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  font-weight: 600;
  color: var(--on-surface);
  transition: background .2s ease, color .2s ease;
}
.nav__dropdown-menu a:hover { background: var(--surface-container-low); color: var(--secondary); }

.nav__actions { display: flex; align-items: center; gap: 12px; }
.nav__cta { display: none; }

.nav__toggle {
  display: inline-flex;
  background: none;
  border: none;
  padding: 8px;
  color: var(--on-surface);
}

/* Mobile quick-contact popover (hidden on desktop, where the Contact Us button shows) */
.nav__contact { position: relative; display: inline-flex; }
.nav__contact-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
  background: none;
  border: none;
  color: var(--on-surface);
  transition: background-color .2s ease, color .2s ease;
}
.nav__contact-btn .material-symbols-outlined { font-size: 24px; }
.nav__contact-btn:hover,
.nav__contact-btn[aria-expanded="true"] {
  background: var(--surface-container);
  color: var(--secondary);
}
.nav__contact-pop {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  display: none;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: var(--navy);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  z-index: 60;
}
.nav__contact-pop.is-open { display: flex; animation: contact-pop-in .18s ease; }
.nav__contact-pop::before {
  content: "";
  position: absolute;
  top: -5px;
  right: 15px;
  width: 12px;
  height: 12px;
  background: var(--navy);
  border-radius: 2px;
  transform: rotate(45deg);
}
.nav__contact-pop a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  transition: background-color .2s ease, transform .2s ease;
}
.nav__contact-pop a:hover { background: var(--secondary-container); transform: translateY(-2px); }
.nav__contact-pop svg { width: 20px; height: 20px; fill: currentColor; }
.nav__contact-pop .material-symbols-outlined { font-size: 22px; }
@keyframes contact-pop-in { from { opacity: 0; transform: translateY(-6px) scale(.96); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .nav__contact-pop.is-open { animation: none; } }

@media (min-width: 1024px) {
  .nav__links { display: flex; }
  .nav__cta { display: inline-flex; }
  .nav__toggle { display: none; }
  .nav__contact { display: none; }
}

/* Mobile menu */
.mobile-menu {
  display: none;
  flex-direction: column;
  gap: 4px;
  padding: 16px var(--margin-mobile) 24px;
  background: var(--surface-container-lowest);
  border-bottom: 1px solid var(--outline-variant);
}
.mobile-menu.is-open { display: flex; }
.mobile-menu a {
  padding: 12px 8px;
  font-size: 18px;
  font-weight: 600;
  color: var(--on-surface);
  border-radius: var(--radius);
}
.mobile-menu a:hover { background: var(--surface-container-low); color: var(--secondary); }
.mobile-menu .btn { margin-top: 8px; }
/* Keep the Contact Us button's own colors — the generic .mobile-menu a rule
   above must not override its label to dark text (unreadable on navy). */
.mobile-menu a.btn--primary { color: var(--on-primary); }
.mobile-menu a.btn--primary:hover { color: var(--on-primary); background: var(--secondary); }
@media (min-width: 1024px) { .mobile-menu { display: none !important; } }

/* ---------- Hero ---------- */
.hero-gradient { background: linear-gradient(135deg, #f9f9fc 0%, #d8e2ff 100%); }

.hero {
  position: relative;
  overflow: hidden;
}
.hero--image {
  min-height: 85vh;
  display: flex;
  align-items: center;
  background: var(--navy);
}
.hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.4;
}
.hero__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--navy) 0%, rgba(0, 26, 65, 0.8) 45%, rgba(0, 26, 65, 0.2) 100%);
}
.hero__content { position: relative; z-index: 2; }

/* ---------- Generic grid helpers ---------- */
.grid { display: grid; gap: var(--gutter); }
.two-col { display: grid; gap: 64px; align-items: center; }
@media (min-width: 768px) { .two-col { grid-template-columns: 1fr 1fr; } }
.stack > * + * { margin-top: 16px; }
.stack-lg > * + * { margin-top: 24px; }

/* ---------- Cards ---------- */
.card {
  background: var(--surface-container-lowest);
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-xl);
  padding: 32px;
  box-shadow: var(--shadow);
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.card--hover:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: var(--secondary);
}

/* Icon badge (rounded square with a Material icon) */
.icon-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: var(--radius-lg);
  background: var(--secondary-fixed);
  color: var(--secondary);
  margin-bottom: 24px;
  transition: transform .3s ease;
}
.icon-badge .material-symbols-outlined { font-size: 30px; }
.card--hover:hover .icon-badge { transform: scale(1.1); }
.icon-badge--sm { width: 44px; height: 44px; border-radius: var(--radius); margin-bottom: 0; }
.icon-badge--sm .material-symbols-outlined { font-size: 24px; }

/* Feature row (icon + text) */
.feature { display: flex; gap: 16px; align-items: flex-start; }
.feature__icon {
  flex-shrink: 0;
  color: var(--secondary);
  background: var(--secondary-fixed);
  padding: 8px;
  border-radius: var(--radius);
}

/* ---------- Stats ---------- */
.stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--gutter);
  text-align: center;
}
@media (min-width: 768px) { .stats { grid-template-columns: repeat(4, 1fr); } }
.stat__value { font-size: 32px; line-height: 40px; font-weight: 700; color: var(--secondary); }
.stat__label { font-size: 14px; color: var(--on-surface-variant); margin-top: 4px; }

/* ---------- Split services comparison (home) ---------- */
.split { display: grid; }
@media (min-width: 1024px) { .split { grid-template-columns: 1fr 1fr; } }
.split__panel { padding: 96px var(--margin-mobile); }
@media (min-width: 768px) { .split__panel { padding-inline: var(--margin-desktop); } }
.split__panel--navy { background: var(--navy); color: var(--on-primary); }
.split__panel--light { background: var(--surface-container); color: var(--navy); }
.split__inner { max-width: 560px; }
.split__panel--navy .split__inner { margin-left: auto; }
.split__panel--light .split__inner { margin-right: auto; }

.heading-bar { display: flex; align-items: center; gap: 16px; margin-bottom: 24px; }
.heading-bar__rule { width: 6px; height: 40px; border-radius: var(--radius-full); background: var(--secondary); }
.heading-bar__rule--navy { background: var(--navy); }

/* List item card used inside split panels */
.detail-item {
  display: flex;
  gap: 24px;
  padding: 24px;
  border-radius: var(--radius-lg);
  transition: background .3s ease, border-color .3s ease;
}
.detail-item .material-symbols-outlined { font-size: 30px; flex-shrink: 0; }
.detail-item--dark {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.detail-item--dark:hover { background: rgba(255, 255, 255, 0.1); }
.detail-item--dark .material-symbols-outlined { color: var(--secondary-fixed-dim); }
.detail-item--light {
  background: #fff;
  border: 1px solid rgba(197, 198, 207, 0.4);
  box-shadow: var(--shadow);
}
.detail-item--light:hover { border-color: var(--navy); }
.detail-item--light .material-symbols-outlined { color: var(--navy); }
.detail-item h4 { font-weight: 700; margin-bottom: 8px; }

/* Workflow band */
.band {
  background: var(--secondary-container);
  color: var(--on-primary);
  padding-block: 32px;
}
.band__inner {
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: flex-start;
}
@media (min-width: 768px) { .band__inner { flex-direction: row; align-items: center; justify-content: space-between; } }

/* ---------- Operational support (3-up navy panel) ---------- */
.panel-navy {
  background: var(--navy);
  border-radius: var(--radius-2xl);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}
.panel-navy__grid { display: grid; grid-template-columns: 1fr; }
@media (min-width: 768px) { .panel-navy__grid { grid-template-columns: repeat(3, 1fr); } }
.panel-navy__cell {
  padding: 40px;
  text-align: center;
  color: var(--on-primary);
  display: flex;
  flex-direction: column;
  align-items: center;
}
.panel-navy__cell + .panel-navy__cell { border-top: 1px solid rgba(255, 255, 255, 0.1); }
@media (min-width: 768px) {
  .panel-navy__cell + .panel-navy__cell { border-top: none; border-left: 1px solid rgba(255, 255, 255, 0.1); }
}
.panel-navy__cell .icon-badge { background: rgba(255, 255, 255, 0.1); color: var(--on-primary); }

/* ---------- Bento (expertise) ---------- */
.bento { display: grid; grid-template-columns: 1fr; gap: var(--gutter); }
@media (min-width: 768px) { .bento { grid-template-columns: repeat(12, 1fr); } }
.bento__card {
  position: relative;
  min-height: 400px;
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow);
}
.bento__card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .6s ease;
}
.bento__card:hover img { transform: scale(1.05); }
.bento__card-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 26, 65, 0.92) 0%, rgba(0, 26, 65, 0.35) 50%, transparent 100%);
}
.bento__card-body {
  position: absolute;
  inset: auto 0 0 0;
  padding: 32px;
  color: var(--on-primary);
}
.bento__card-body .material-symbols-outlined { font-size: 32px; margin-bottom: 12px; display: block; color: var(--secondary-fixed-dim); }
.bento__card-desc {
  margin-top: 8px;
  max-width: 460px;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .4s ease, transform .4s ease;
}
.bento__card:hover .bento__card-desc { opacity: 1; transform: translateY(0); }
@media (min-width: 768px) {
  .col-4 { grid-column: span 4; }
  .col-5 { grid-column: span 5; }
  .col-7 { grid-column: span 7; }
  .col-8 { grid-column: span 8; }
}

/* ---------- Glass card (expertise CTA) ---------- */
.glass-card {
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-lg);
}

/* ---------- CTA blocks ---------- */
.cta-box {
  position: relative;
  overflow: hidden;
  background: var(--primary-container);
  border-radius: var(--radius-2xl);
  padding: 80px 32px;
  text-align: center;
  color: var(--on-primary);
}
.cta-box__dots {
  position: absolute;
  inset: 0;
  opacity: 0.1;
  pointer-events: none;
  background-image: radial-gradient(#6f84b0 1px, transparent 1px);
  background-size: 24px 24px;
}
.cta-box > * { position: relative; z-index: 1; }

/* Decorative concentric rings */
.rings {
  position: absolute;
  top: 0;
  right: 0;
  width: 50%;
  height: 100%;
  opacity: 0.1;
  pointer-events: none;
  color: #fff;
}

/* ---------- Media figure ---------- */
.figure {
  position: relative;
  border-radius: var(--radius-2xl);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}
.figure--tall { height: 500px; }
.figure img { width: 100%; height: 100%; object-fit: cover; }
.figure__caption {
  position: absolute;
  inset: auto 0 0 0;
  padding: 32px;
  color: var(--on-primary);
  background: linear-gradient(to top, rgba(0, 26, 65, 0.7), transparent);
}

/* ---------- Sector mini-cards ---------- */
.sector-card {
  padding: 32px;
  background: var(--cool-white);
  border: 1px solid rgba(197, 198, 207, 0.4);
  border-radius: var(--radius-lg);
  transition: border-color .25s ease, transform .25s ease;
}
.sector-card:hover { border-color: var(--secondary); transform: translateY(-2px); }
.sector-card .material-symbols-outlined { font-size: 32px; color: var(--secondary); margin-bottom: 16px; display: block; }
.sector-card h3 { font-weight: 700; color: var(--navy); font-size: 18px; }

/* Same minimal box, now with a photo background + readable scrim */
.sector-card--img {
  position: relative;
  overflow: hidden;
  min-height: 196px;
  border-color: transparent;
  background-color: var(--navy);
  background-size: cover;
  background-position: center;
}
.sector-card--img::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0, 26, 65, 0.74) 0%, rgba(0, 26, 65, 0.42) 50%, rgba(0, 26, 65, 0.66) 100%);
  transition: background .25s ease;
}
.sector-card--img > * { position: relative; z-index: 1; }
.sector-card--img .material-symbols-outlined { color: var(--secondary-fixed-dim); }
.sector-card--img h3 { color: #fff; }
.sector-card--img:hover { transform: translateY(-2px); }
.sector-card--img:hover::before { background: linear-gradient(to bottom, rgba(0, 26, 65, 0.6) 0%, rgba(0, 26, 65, 0.28) 50%, rgba(0, 26, 65, 0.55) 100%); }

/* ---------- Footer ---------- */
.site-footer {
  background: var(--inverse-surface);
  color: var(--inverse-on-surface);
  padding-block: 80px 40px;
}
.footer__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
}
@media (min-width: 768px) {
  .footer__grid { grid-template-columns: 2fr 1fr 1fr 2fr; gap: var(--gutter); }
}
.footer__brand { font-size: 20px; font-weight: 700; color: var(--on-primary); margin-bottom: 16px; }
.footer p, .footer__col a { color: rgba(226, 226, 229, 0.8); }
.footer__col h4 { color: var(--on-primary); margin-bottom: 20px; }
.footer__col a { display: inline-block; padding-block: 4px; transition: color .2s ease; }
.footer__col a:hover { color: var(--on-primary); }
.footer__social { display: flex; gap: 12px; margin-top: 24px; }
.footer__social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
  background: rgba(226, 226, 229, 0.1);
  transition: background .2s ease;
}
.footer__social a:hover { background: var(--secondary); }
.footer__social svg { width: 20px; height: 20px; fill: currentColor; }
.footer__newsletter { display: flex; margin-top: 8px; }
.footer__newsletter input {
  flex: 1;
  min-width: 0;
  border: none;
  background: rgba(226, 226, 229, 0.1);
  color: var(--on-primary);
  padding: 12px 16px;
  border-radius: var(--radius) 0 0 var(--radius);
}
.footer__newsletter input::placeholder { color: rgba(240, 240, 243, 0.5); }
.footer__newsletter input:focus { outline: none; box-shadow: inset 0 0 0 1px var(--secondary); }
.footer__newsletter button {
  background: var(--secondary);
  color: var(--on-primary);
  border: none;
  padding: 0 16px;
  border-radius: 0 var(--radius) var(--radius) 0;
  display: inline-flex;
  align-items: center;
}
.footer__newsletter button:hover { background: #00558f; }
.footer__bottom {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 64px;
  padding-top: 32px;
  border-top: 1px solid rgba(226, 226, 229, 0.1);
  color: rgba(226, 226, 229, 0.6);
  font-size: 14px;
}
.footer__bottom a { color: rgba(226, 226, 229, 0.6); }
.footer__bottom a:hover { color: var(--on-primary); }
@media (min-width: 768px) {
  .footer__bottom { flex-direction: row; justify-content: space-between; align-items: center; }
}
.footer__bottom-links { display: flex; gap: 32px; }

/* ---------- Forms ---------- */
.field { margin-bottom: 20px; }
.field label {
  display: block;
  margin-bottom: 8px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--on-surface-variant);
}
.field input,
.field textarea {
  width: 100%;
  padding: 12px 16px;
  font-family: inherit;
  font-size: 16px;
  color: var(--on-surface);
  background: #fff;
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius);
  transition: border-color .2s ease, box-shadow .2s ease;
}
.field textarea { resize: vertical; min-height: 120px; }
.field input:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--secondary-container);
  box-shadow: 0 0 0 2px rgba(0, 149, 248, 0.25);
}
.field--invalid input,
.field--invalid textarea { border-color: var(--error); }
.field__error {
  display: none;
  margin-top: 6px;
  font-size: 13px;
  color: var(--error);
}
.field--invalid .field__error { display: block; }

.form-success {
  display: none;
  padding: 16px;
  border-radius: var(--radius);
  background: var(--secondary-fixed);
  color: var(--on-secondary-container);
  font-weight: 600;
}
.form-success.is-visible { display: block; }

.form-error {
  display: none;
  padding: 16px;
  border-radius: var(--radius);
  background: #fdecec;
  color: var(--error);
  font-weight: 600;
}
.form-error.is-visible { display: block; }

/* Honeypot — present in the DOM for bots, hidden from people */
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

/* Disabled / "Sending…" button state */
.btn[disabled] { opacity: .6; pointer-events: none; }

/* ---------- Contact panel ----------
   Static two-column card on the contact page. Keeps the modal__ class
   names from the original design; there is no actual modal on the site. */
.modal__dialog {
  position: relative;
  z-index: 1;
  max-width: 960px;
  margin: 24px auto;
  max-height: calc(100vh - 48px);
  overflow: auto;
  background: var(--surface-container-lowest);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  display: grid;
  grid-template-columns: 1fr;
}
@media (min-width: 768px) { .modal__dialog { grid-template-columns: 1fr 1fr; } }
.modal__aside {
  background: var(--navy);
  color: var(--on-primary);
  padding: 40px;
}
.modal__body { padding: 40px; position: relative; }
.contact-method { display: flex; gap: 16px; align-items: flex-start; margin-top: 24px; }
.contact-method .material-symbols-outlined { color: var(--secondary-fixed-dim); }

/* Social handles inside the "Get in Touch" panel */
.modal__social { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; margin-top: 32px; }
.modal__social a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 18px 8px 14px;
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.1);
  color: var(--on-primary);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.01em;
  transition: background .2s ease, transform .2s ease;
}
.modal__social a:hover { background: var(--secondary-container); transform: translateY(-2px); }
.modal__social svg { width: 18px; height: 18px; fill: currentColor; flex: none; }

/* ---------- Scroll-reveal animation ---------- */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s ease; }
.reveal.is-visible { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}

/* ---------- Experience: world map (network style) ---------- */
.exp-map-wrap {
  position: relative;
  max-width: none;
  margin: 40px auto 0;
  background: var(--navy);
  background-image: linear-gradient(150deg, #1d5ba6 0%, #0d3a73 38%, #06213f 100%);
  border-radius: var(--radius-2xl);
  padding: 40px 32px;
  box-shadow: var(--shadow-lg);
}
@media (max-width: 640px) { .exp-map-wrap { padding: 20px 16px; } }
.exp-map {
  width: 100%;
  height: auto;
  display: block;
  overflow: hidden;
}
/* Solid, softly glowing continents (no pattern) */
.exp-map__land {
  fill: rgba(208, 228, 255, 0.10);
  stroke: rgba(214, 230, 255, 0.55);
  stroke-width: 0.5;
  stroke-linejoin: round;
}

/* Constellation network between pins — bright white lines */
.map-link {
  fill: none;
  stroke: #ffffff;
  stroke-width: 1;
  stroke-opacity: 0.7;
  stroke-linecap: round;
  stroke-dasharray: 900;
  stroke-dashoffset: 900;
}
.exp-map-wrap.is-visible .map-link {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 1.1s ease;
  transition-delay: calc(.4s + var(--i) * .08s);
}

/* Pins sit in the SVG coordinate space; the entry transform lives on the
   inner mark group so it pivots on the dot, not the (taller) label box. */
.map-pin { opacity: 0; transition: opacity .5s ease; cursor: pointer; }
.map-pin__mark {
  transform: translateY(-10px) scale(0.4);
  transform-box: fill-box;
  transform-origin: center;
  transition: transform .55s cubic-bezier(.34, 1.56, .64, 1);
}
.exp-map-wrap.is-visible .map-pin {
  opacity: 1;
  transition-delay: calc(var(--i) * .12s);
}
.exp-map-wrap.is-visible .map-pin__mark {
  transform: none;
  transition-delay: calc(var(--i) * .12s);
}
.map-pin__ring {
  fill: none;
  stroke: var(--sky);
  stroke-width: 1.4;
  transform-box: fill-box;
  transform-origin: center;
  opacity: 0;
}
.exp-map-wrap.is-visible .map-pin__ring {
  animation: pin-pulse 2.8s ease-out infinite;
  animation-delay: calc(var(--i) * .12s + .55s);
}
.map-pin__dot { fill: var(--sky); filter: drop-shadow(0 0 5px rgba(0, 149, 248, 0.9)); }
.map-pin__core { fill: #fff; }

/* Hover: lift the pin and reveal its label */
.map-pin:hover .map-pin__dot,
.map-pin.is-active .map-pin__dot { fill: var(--navy); }
.map-pin__label {
  font-family: var(--font);
  font-weight: 700;
  font-size: 13px;
  fill: #ffffff;
  text-anchor: middle;
  paint-order: stroke;
  stroke: rgba(0, 26, 65, 0.85);
  stroke-width: 4;
  opacity: 0;
  transition: opacity .2s ease;
  pointer-events: none;
}
.map-pin:hover .map-pin__label,
.map-pin.is-active .map-pin__label { opacity: 1; }

@keyframes pin-pulse {
  0%   { transform: scale(0.7); opacity: .65; }
  70%  { transform: scale(3); opacity: 0; }
  100% { transform: scale(3); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .map-pin { opacity: 1; transition: none; }
  .map-pin__mark { transform: none; transition: none; }
  .exp-map-wrap.is-visible .map-pin,
  .exp-map-wrap.is-visible .map-pin__mark { transition-delay: 0s; }
  .map-pin__ring { display: none; }
  .map-link { stroke-dashoffset: 0; transition: none; }
}

/* Decorative blurred blobs */
.blob { position: absolute; border-radius: var(--radius-full); filter: blur(48px); pointer-events: none; }

/* ===== Our Method — programme baseline (home) ===== */
.method { position: relative; overflow: hidden; }
.method__paper {
  position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(0,26,65,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,26,65,0.05) 1px, transparent 1px);
  background-size: 32px 32px;
  -webkit-mask-image: radial-gradient(ellipse at 50% 0%, #000 30%, transparent 72%);
          mask-image: radial-gradient(ellipse at 50% 0%, #000 30%, transparent 72%);
}
.method > .container { position: relative; z-index: 1; }

.method__head { max-width: 760px; margin-bottom: 64px; }
.method__kicker {
  display: inline-block; margin-bottom: 16px;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--secondary);
}
.method__head h2 { margin-bottom: 16px; }

/* measured baseline + phase graduations */
.method__track { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 2px solid rgba(0,26,65,0.18); }
.method__phase {
  position: relative; padding: 28px 28px 4px;
  border-left: 1px solid rgba(0,26,65,0.10);
  transition: background-color .25s ease;
}
.method__phase:first-child { border-left: none; padding-left: 0; }
.method__phase::before {
  content: ""; position: absolute; top: -2px; left: 28px;
  width: 2px; height: 14px; background: var(--secondary); transition: height .25s ease;
}
.method__phase:first-child::before { left: 0; }
.method__phase:hover { background: rgba(0,97,165,0.045); }
.method__phase:hover::before { height: 22px; }
.method__index {
  display: block; margin-bottom: 18px;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 12px; letter-spacing: 0.12em; color: rgba(0,26,65,0.45);
}
.method__index b { color: var(--secondary); font-weight: 700; }
.method__phase h3 { font-size: 24px; font-weight: 800; letter-spacing: -0.01em; color: var(--navy); margin-bottom: 10px; }
.method__phase > p { font-size: 14px; line-height: 1.65; color: var(--on-surface-variant); margin-bottom: 22px; }
.method__stage { border-top: 1px solid rgba(0,26,65,0.10); padding-top: 16px; }
.method__stage-label {
  display: block; margin-bottom: 10px;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(0,26,65,0.55);
}
.method__stage ul { list-style: none; margin: 0; padding: 0; }
.method__stage li { font-size: 13px; color: var(--on-surface-variant); padding: 5px 0; }
.method__stage li::before { content: "—"; color: var(--secondary); margin-right: 8px; }

/* outcomes — closing baseline summary */
.method__outcomes {
  margin-top: 48px; padding-top: 28px; border-top: 2px solid rgba(0,26,65,0.18);
  display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px;
}
.method__outcomes-label {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--navy); font-weight: 700;
}
.method__outcomes ul { display: flex; flex-wrap: wrap; gap: 14px 28px; list-style: none; margin: 0; padding: 0; }
.method__outcomes li { display: inline-flex; align-items: center; gap: 9px; font-size: 14px; font-weight: 600; color: var(--navy); }
.method__outcomes li::before {
  content: ""; flex: none; width: 18px; height: 18px; border-radius: 50%;
  background: rgba(0,97,165,0.12) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230061a5' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 11px no-repeat;
}

@media (max-width: 900px) {
  .method__head { margin-bottom: 48px; }
  .method__track { grid-template-columns: repeat(2, 1fr); border-top: none; }
  .method__phase { border-left: none; padding: 28px 0 4px; border-top: 2px solid rgba(0,26,65,0.18); }
  .method__phase::before { left: 0; }
}
@media (max-width: 560px) {
  .method__track { grid-template-columns: 1fr; }
  .method__outcomes { align-items: flex-start; }
}

/* ===== Advisory model band (home) ===== */
.advisory { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 40px; align-items: center; }
.advisory__lead { max-width: 320px; font-size: 15px; line-height: 1.6; color: var(--on-surface-variant); }
.advisory__item { padding-left: 40px; border-left: 1px solid var(--outline-variant); }
.advisory__item h3 { font-size: 20px; font-weight: 800; letter-spacing: -0.01em; color: var(--navy); margin-bottom: 8px; }
.advisory__item span {
  display: block; font-size: 11px; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--secondary);
}
@media (max-width: 860px) {
  .advisory { grid-template-columns: repeat(3, 1fr); gap: 28px 32px; }
  .advisory__lead { grid-column: 1 / -1; max-width: none; }
  .advisory__item { padding-left: 24px; }
  .advisory__item:first-of-type { border-left: none; padding-left: 0; }
}
@media (max-width: 520px) {
  .advisory { grid-template-columns: 1fr; gap: 0; }
  .advisory__lead { margin-bottom: 8px; }
  .advisory__item { border-left: none; padding: 16px 0 0; border-top: 1px solid var(--outline-variant); }
}

/* ===== Heading word reveal (scroll-in) ===== */
.reveal-text .rw {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.5em);
  transition: opacity .5s ease, transform .55s cubic-bezier(.2, .7, .2, 1);
  transition-delay: calc(var(--i, 0) * 40ms);
  will-change: opacity, transform;
}
.reveal-text.is-revealed .rw { opacity: 1; transform: none; }
.reveal-text--block {
  opacity: 0; transform: translateY(16px);
  transition: opacity .6s ease, transform .6s cubic-bezier(.2, .7, .2, 1);
}
.reveal-text--block.is-revealed { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal-text .rw, .reveal-text--block { opacity: 1; transform: none; transition: none; }
}

/* ===== Smooth anchor scrolling ===== */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* ===== Services page — sticky stream nav, numbered headers, staggered cards ===== */
.svc-nav {
  position: sticky; top: 104px; z-index: 40;
  background: rgba(249, 250, 252, 0.9);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--outline-variant);
}
.svc-nav__inner { display: flex; gap: 8px; overflow-x: auto; padding: 14px 0; scrollbar-width: none; }
.svc-nav__inner::-webkit-scrollbar { display: none; }
.svc-nav a {
  flex: none; display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 16px; border-radius: 999px; white-space: nowrap;
  font-size: 13px; font-weight: 600; color: var(--on-surface-variant);
  border: 1px solid var(--outline-variant); background: #fff;
  transition: color .2s ease, background-color .2s ease, border-color .2s ease;
}
.svc-nav a span { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 11px; color: var(--secondary); }
.svc-nav a:hover { border-color: var(--secondary); color: var(--navy); }
.svc-nav a.is-active { background: var(--navy); border-color: var(--navy); color: #fff; }
.svc-nav a.is-active span { color: #4ea3ff; }
.svc-section { scroll-margin-top: 184px; }

.svc-head { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 16px; margin-bottom: 16px; }
.svc-head__no { font: 700 14px/1 ui-monospace, "SF Mono", Menlo, monospace; letter-spacing: 0.1em; color: var(--secondary); }
.svc-head h2 { margin: 0; }
.svc-head__count {
  margin-left: auto;
  font: 700 11px/1 ui-monospace, "SF Mono", Menlo, monospace;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--secondary);
  background: var(--secondary-fixed); padding: 6px 12px; border-radius: 999px;
}

/* staggered reveal for grids (JS sets --i; gated on .js so content shows without JS) */
.js .reveal-stagger > * {
  opacity: 0; transform: translateY(20px);
  transition: opacity .5s ease, transform .55s cubic-bezier(.2, .7, .2, 1);
  transition-delay: calc(var(--i, 0) * 60ms);
}
.js .reveal-stagger.is-revealed > * { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js .reveal-stagger > * { opacity: 1; transform: none; transition: none; }
}

@media (max-width: 480px) {
  .svc-nav { top: 84px; }
  .svc-section { scroll-margin-top: 150px; }
}

/* ===== FAQ accordion (contact) ===== */
.faq__item {
  background: #fff;
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow);
  margin-bottom: 16px;
  overflow: hidden;
  transition: border-color .25s ease, box-shadow .25s ease;
}
.faq__item.is-open { border-color: var(--secondary); box-shadow: var(--shadow-lg); }
.faq__q {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 24px 28px; background: none; border: 0; cursor: pointer; text-align: left;
  font-family: inherit; font-size: 17px; font-weight: 700; color: var(--navy);
}
.faq__icon { flex: none; color: var(--secondary); font-size: 26px; transition: transform .3s ease; }
.faq__item.is-open .faq__icon { transform: rotate(180deg); }
.faq__q:focus-visible { outline: 2px solid var(--secondary); outline-offset: -2px; }
.faq__a { max-height: 0; overflow: hidden; transition: max-height .35s ease; }
.faq__a p { margin: 0; padding: 0 28px 24px; }
@media (prefers-reduced-motion: reduce) {
  .faq__a, .faq__icon { transition: none; }
}

/* ==========================================================================
   Mobile refinements
   Everything above is mobile-first/responsive already; this block only
   tightens vertical rhythm and a few touch-specific details on phones.
   Desktop (>=768px) is untouched.
   ========================================================================== */
@media (max-width: 640px) {
  /* Stacked split panels carried 96px top+bottom each — too long on a phone */
  .split__panel { padding-block: 56px; }
  .cta-box { padding: 56px 24px; }
  .figure--tall { height: 360px; }

  /* Bento descriptions are hover-only; phones have no hover, so reveal them */
  .bento__card-desc { opacity: 1; transform: none; }
  .bento__card-body { padding: 24px; }
}

@media (max-width: 480px) {
  .section { padding-block: 56px; }
  .card { padding: 24px; }
  .panel-navy__cell { padding: 32px 24px; }
  .cta-box { padding: 48px 20px; }

  /* Equal, full-width hero CTAs — larger, consistent tap targets */
  .hero .btn--lg { flex: 1 1 100%; }
}

/* ===== Experience map — interactive detail panel + country legend ===== */
.exp-panel {
  margin-top: 28px;
  padding-top: 28px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}
.exp-panel__detail { min-height: 92px; margin-bottom: 24px; }
.exp-country { display: none; gap: 18px; align-items: flex-start; }
.exp-country.is-active { display: flex; animation: exp-fade .35s ease; }
.exp-country__icon {
  flex: none; font-size: 32px; color: var(--sky);
  background: rgba(0, 149, 248, 0.14);
  width: 56px; height: 56px; border-radius: var(--radius-lg);
  display: inline-flex; align-items: center; justify-content: center;
}
.exp-country h3 {
  display: inline-block; font-size: 22px; font-weight: 800; letter-spacing: -0.01em;
  color: #fff; margin-bottom: 10px; padding-bottom: 8px;
  border-bottom: 2px solid var(--sky);
}
.exp-country p { color: rgba(255, 255, 255, 0.82); font-size: 15px; line-height: 1.6; max-width: 640px; }
@keyframes exp-fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.exp-legend { display: flex; flex-wrap: wrap; gap: 12px; }
.exp-chip {
  flex: none; border-radius: var(--radius-full);
  border: 1px solid rgba(255, 255, 255, 0.32);
  background: rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.85);
  padding: 10px 22px; font: 600 14px/1 var(--font); cursor: pointer;
  transition: color .2s ease, border-color .2s ease, background-color .2s ease, transform .15s ease;
}
.exp-chip:hover { color: #fff; border-color: var(--secondary-fixed-dim); }
.exp-chip:focus-visible { outline: 2px solid var(--sky); outline-offset: 2px; }
.exp-chip.is-active {
  color: #fff; border-color: var(--sky);
  background: rgba(0, 149, 248, 0.2);
  box-shadow: inset 0 0 0 1px var(--sky);
}
.exp-chip:active { transform: scale(0.97); }

@media (prefers-reduced-motion: reduce) {
  .exp-country.is-active { animation: none; }
}
@media (max-width: 560px) {
  .exp-country__icon { width: 44px; height: 44px; font-size: 26px; }
  .exp-country h3 { font-size: 19px; }
  .exp-chip { padding: 9px 16px; font-size: 13px; }
}

/* ===== AML core workflow — animated document pipeline ===== */
.flow { position: relative; }
.flow__steps {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px;
  position: relative; z-index: 1;
}
.flow__step { display: flex; flex-direction: column; align-items: center; text-align: center; }
.flow__node {
  width: 72px; height: 72px; flex: none; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--surface-container-lowest);
  border: 1px solid var(--outline-variant);
  box-shadow: var(--shadow); color: var(--secondary);
  transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease, color .3s ease;
}
.flow__node .material-symbols-outlined { font-size: 34px; }
.flow__step:hover .flow__node {
  transform: translateY(-4px); border-color: var(--secondary);
  box-shadow: var(--shadow-lg); color: var(--secondary-container);
}
.flow__num {
  margin-top: 18px; font: 700 12px/1 ui-monospace, "SF Mono", Menlo, monospace;
  letter-spacing: 0.18em; color: var(--secondary);
}
.flow__title { font-size: 20px; font-weight: 800; letter-spacing: -0.01em; color: var(--navy); margin: 8px 0; }
.flow__desc { font-size: 14px; line-height: 1.6; color: var(--on-surface-variant); max-width: 250px; }

/* connector behind the nodes, with a sky beam flowing left -> right */
.flow__track {
  position: absolute; top: 36px; left: 12.5%; right: 12.5%; height: 3px;
  background: var(--outline-variant); border-radius: 3px; overflow: hidden; z-index: 0;
}
.flow__track::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent 0%, var(--secondary-container) 50%, transparent 100%);
  background-size: 40% 100%; background-repeat: no-repeat;
  animation: flow-beam 2.4s linear infinite;
}
@keyframes flow-beam { 0% { background-position: -40% 0; } 100% { background-position: 140% 0; } }

@media (prefers-reduced-motion: reduce) {
  .flow__track::after { animation: none; }
}

/* Mobile: left-rail timeline — node in a left column, text to the right, so
   the connector runs down beside the text instead of through it. */
@media (max-width: 768px) {
  .flow__track { display: none; }
  .flow__steps { grid-template-columns: 1fr; gap: 0; }
  .flow__step {
    position: relative;
    display: grid;
    grid-template-columns: 72px 1fr;
    grid-template-rows: auto auto auto;
    column-gap: 20px;
    align-items: start;
    text-align: left;
    padding-bottom: 40px;
  }
  .flow__step:last-child { padding-bottom: 0; }
  .flow__node { grid-column: 1; grid-row: 1 / 4; }
  .flow__num { grid-column: 2; grid-row: 1; margin-top: 6px; }
  .flow__title { grid-column: 2; grid-row: 2; margin: 4px 0; }
  .flow__desc { grid-column: 2; grid-row: 3; max-width: none; }
  .flow__step:not(:last-child)::after {
    content: ""; position: absolute; top: 72px; bottom: 0; left: 36px;
    width: 2px; transform: translateX(-50%); background: var(--outline-variant);
  }
}