/*
  Chiwara Language Solutions — Site Stylesheet
  Hand-authored design system (tokens + utilities), no build step required.
  Fonts: Lora (serif display) + Public Sans (body/UI — designed for U.S.
  civic/government use, reinforcing institutional trust)
  Direction: a genuine classic navy (#1E3A5F) — deeper and more saturated
  than the indigo-slate it replaces, which read as washed-out rather than
  confident — paired with a neon mint (#6CF3B1) sampled directly from a
  BlackStar Film Festival program guide. Both colors are equal brand
  colors, not primary/secondary: navy marks the client path (Request an
  Interpreter), mint marks the interpreter path (Become an Interpreter),
  carried through buttons, CTA cards, and section accents. Global-facing:
  no city-specific branding.
*/

/* ---------------------------------- */
/* Design tokens                      */
/* ---------------------------------- */
:root {
  /* Color: classic-navy scale (#1E3A5F). Passes AA both as white-on-navy
     (buttons, dark sections) and as navy-on-white (links, eyebrows,
     icons, headings) — see README. */
  --navy-950: #14263E;
  --navy-900: #1E3A5F;
  --navy-800: #425A79;
  --navy-700: #667992;
  --blue-100: #E8EBEF;

  /* Color: neon mint, sampled from a BlackStar Film Festival program
     guide photo (#6CF3B1) — equal-weight second brand color (interpreter
     path), not a light accent. Against this darker navy it clears WCAG
     AA at every text size, including small labels — see README. */
  --mint-100: #D6FCE9;
  --mint-200: #6CF3B1;

  /* Color: neutrals — clean, cool near-white (not warm "paper") */
  --cream-50: #F7F8FC;
  --cream-100: #ECEFF9;
  --cream-200: #DCE1F2;
  --bone-card: #FFFFFF;
  --ink-900: #14172B;
  --ink-700: #454A5E;
  --ink-600: #454A5E;
  --ink-400: #767C93;
  --border: #DCE1F2;
  --border-dark: rgba(255,255,255,0.14);
  --white: #FFFFFF;

  /* Status */
  --success-600: #1E7D4C;
  --success-100: #DEF3E7;
  --error-600: #B3261E;
  --error-100: #FBE6E4;

  /* Semantic */
  --color-bg: var(--cream-50);
  --color-surface: var(--bone-card);
  --color-text: var(--ink-900);
  --color-text-muted: var(--ink-600);
  --color-primary: var(--navy-900);
  --color-accent: var(--navy-900);
  --color-accent-hover: var(--navy-800);
  --color-ring: var(--navy-900);
  --color-ring-on-dark: var(--mint-200);

  /* Typography */
  --font-display: 'Lora', Georgia, ui-serif, serif;
  --font-body: 'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: var(--font-body);

  /* Spacing scale */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;
  --space-10: 8rem;

  /* Radii & shadow */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 24px;
  --radius-full: 999px;
  --shadow-sm: 0 1px 2px rgba(23, 20, 18, 0.05), 0 1px 3px rgba(23, 20, 18, 0.07);
  --shadow-md: 0 8px 20px rgba(23, 20, 18, 0.08);
  --shadow-lg: 0 16px 40px rgba(23, 20, 18, 0.12);

  --container-max: 1200px;
  --transition: 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------------------------------- */
/* Reset & base                       */
/* ---------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

body, h1, h2, h3, h4, p, figure, blockquote, dl, dd, ul, ol {
  margin: 0;
}
ul, ol { padding: 0; list-style: none; }
img, picture, svg { display: block; max-width: 100%; }
button, input, textarea, select { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }

body {
  font-family: var(--font-body);
  background: var(--color-bg);
  color: var(--color-text);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--navy-900);
  line-height: 1.12;
  font-weight: 600;
  letter-spacing: -0.01em;
}

h1 { font-size: clamp(2.25rem, 1.6rem + 3vw, 3.75rem); font-weight: 500; }
h2 { font-size: clamp(1.75rem, 1.45rem + 1.6vw, 2.75rem); }
h3 { font-size: clamp(1.25rem, 1.1rem + 0.8vw, 1.625rem); }
h4 { font-size: 1.125rem; font-family: var(--font-body); font-weight: 700; }

h1 em, h2 em, h3 em {
  font-style: italic;
  font-weight: 500;
  color: var(--navy-900);
}
.hero-photo em, .section-navy em, .page-hero em, .dual-cta-card em {
  color: var(--mint-200);
}

p { color: var(--color-text-muted); }
.lede { font-size: clamp(1.05rem, 1rem + 0.3vw, 1.25rem); color: var(--color-text-muted); }

.prose p + p { margin-top: var(--space-4); }
.max-prose { max-width: 65ch; }

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:visible-focus,
select:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--color-ring);
  outline-offset: 2px;
  border-radius: 4px;
}
.hero-photo :focus-visible,
.section-navy :focus-visible,
.page-hero :focus-visible,
.dual-cta-card.client :focus-visible {
  outline-color: var(--color-ring-on-dark);
}

/* Author display rules (e.g. .btn's inline-flex) would otherwise override
   the hidden attribute used by the multi-step form. */
[hidden] { display: none !important; }

/* Skip link */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--navy-900);
  color: var(--white);
  padding: var(--space-3) var(--space-5);
  z-index: 1000;
  border-radius: 0 0 var(--radius-sm) 0;
  font-weight: 600;
}
.skip-link:focus {
  left: 0;
}

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

/* ---------------------------------- */
/* Layout                             */
/* ---------------------------------- */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--space-5);
}
@media (min-width: 768px) {
  .container { padding-inline: var(--space-6); }
}

.section { padding-block: var(--space-8); }
.section-sm { padding-block: var(--space-7); }
.section-lg { padding-block: var(--space-9); }

.section-head { max-width: 46rem; margin-bottom: var(--space-7); }
.section-head.center { margin-inline: auto; text-align: center; }
@media (min-width: 900px) {
  .section-head.offset { margin-left: 12%; }
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: 700;
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--navy-900);
  margin-bottom: var(--space-3);
}
.eyebrow::before {
  content: "";
  width: 22px;
  height: 2px;
  background: var(--navy-900);
  display: inline-block;
}

.grid { display: grid; gap: var(--space-6); }
.grid-2 { grid-template-columns: 1fr; }
.grid-3 { grid-template-columns: 1fr; }
.grid-4 { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 640px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 768px) {
  .grid-2 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1024px) {
  .grid-4 { grid-template-columns: repeat(4, 1fr); }
}

.flex { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }
.gap-4 { gap: var(--space-4); }
.flex-wrap { flex-wrap: wrap; }
.text-center { text-align: center; }

/* ---------------------------------- */
/* Buttons                            */
/* ---------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 0.9rem 1.6rem;
  min-height: 48px;
  border-radius: var(--radius-full);
  font-weight: 700;
  font-size: 0.9375rem;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform var(--transition), background var(--transition), color var(--transition), border-color var(--transition), box-shadow var(--transition);
  white-space: nowrap;
}
.btn svg { width: 18px; height: 18px; flex-shrink: 0; }
.btn:active { transform: translateY(1px); }

.btn-primary {
  background: var(--navy-900);
  color: var(--white);
  box-shadow: var(--shadow-sm);
}
.btn-primary:hover { background: var(--navy-800); box-shadow: var(--shadow-md); transform: translateY(-1px); }

.btn-secondary {
  background: var(--navy-900);
  color: var(--white);
}
.btn-secondary:hover { background: var(--navy-800); }

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

.btn-outline-light {
  background: transparent;
  color: var(--white);
  border-color: rgba(255,255,255,0.5);
}
.btn-outline-light:hover { background: var(--white); color: var(--navy-900); border-color: var(--white); }

/* Interpreter-path brand color — mint, equal weight to navy's client-path
   buttons, never white text (fails contrast against mint-200). */
.btn-mint {
  background: var(--mint-200);
  color: var(--navy-950);
  box-shadow: var(--shadow-sm);
}
.btn-mint:hover { background: #5FD69C; box-shadow: var(--shadow-md); transform: translateY(-1px); }

.btn-block { width: 100%; }
.btn-lg { padding: 1.05rem 2rem; font-size: 1rem; }

/* ---------------------------------- */
/* Header / Nav                       */
/* ---------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(251, 248, 243, 0.88);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}
.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 76px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 2px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.375rem;
  letter-spacing: -0.02em;
  color: var(--navy-900);
  flex-shrink: 0;
  white-space: nowrap;
}
.brand:hover { color: var(--navy-900); }
.brand-dot { color: var(--navy-900); }
.brand-lg { font-size: 1.625rem; }
.brand-tag {
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--ink-400);
  margin-top: var(--space-2);
}

.main-nav {
  display: none;
  align-items: center;
  gap: var(--space-5);
  flex-shrink: 1;
  min-width: 0;
}
.main-nav a {
  font-weight: 600;
  font-size: 0.9125rem;
  color: var(--ink-700);
  padding: var(--space-2) 0;
  border-bottom: 2px solid transparent;
  transition: color var(--transition), border-color var(--transition);
  white-space: nowrap;
}
.main-nav a:hover, .main-nav a[aria-current="page"] {
  color: var(--navy-900);
  border-color: var(--navy-900);
}

.header-actions { display: flex; align-items: center; gap: var(--space-4); flex-shrink: 0; }
.header-actions > a.btn-primary { display: none; }
.header-phone {
  display: none;
  align-items: center;
  gap: var(--space-2);
  font-weight: 700;
  font-size: 0.9125rem;
  color: var(--navy-900);
  white-space: nowrap;
  flex-shrink: 0;
}
.header-phone svg { width: 18px; height: 18px; color: var(--navy-900); flex-shrink: 0; }

.nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--white);
  cursor: pointer;
}
.nav-toggle svg { width: 22px; height: 22px; }
.nav-toggle .icon-close { display: none; }
.nav-toggle[aria-expanded="true"] .icon-open { display: none; }
.nav-toggle[aria-expanded="true"] .icon-close { display: block; }

.mobile-nav {
  display: none;
  flex-direction: column;
  gap: var(--space-1);
  background: var(--cream-50);
  border-bottom: 1px solid var(--border);
  padding: var(--space-4) var(--space-5) var(--space-6);
}
.mobile-nav.is-open { display: flex; }
.mobile-nav a:not(.btn) {
  padding: var(--space-3) var(--space-2);
  font-weight: 600;
  border-radius: var(--radius-sm);
  color: var(--ink-700);
}
.mobile-nav a[aria-current="page"] { color: var(--navy-900); background: var(--blue-100); }
.mobile-nav .btn { margin-top: var(--space-3); }
.mobile-nav .header-phone { display: flex; padding: var(--space-3) var(--space-2); }

@media (min-width: 1180px) {
  .main-nav { display: flex; }
  .header-phone { display: flex; }
  .header-actions > a.btn-primary { display: inline-flex; }
  .nav-toggle { display: none; }
  .mobile-nav { display: none !important; }
}

/* ---------------------------------- */
/* Hero — photography-forward         */
/* ---------------------------------- */
.hero-photo {
  position: relative;
  z-index: 0;
  overflow: hidden;
  background-color: var(--navy-950);
  background-size: cover;
  background-position: center;
  padding-block: var(--space-9) var(--space-8);
  color: var(--white);
}
/* Mobile crops are much taller/narrower than desktop, so a desktop-tuned
   background-position often lands on empty texture instead of a face —
   re-aim per hero photo rather than reusing one position at every width. */
.hero-photo--home { background-position: center 30%; }
@media (max-width: 639px) {
  .hero-photo--home { background-position: center 22%; }
}
/* Loop-fade video — shared by every autoplaying looped video on the site.
   JS dips opacity to 0 right at the loop boundary (see main.js), masking
   the native <video loop> hard cut. */
.loop-fade-video {
  opacity: 1;
  transition: opacity 0.6s ease;
}
.loop-fade-video.is-looping { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  .loop-fade-video { display: none; }
}
/* Hero video — sits behind the scrim/content, autoplays for motion-OK
   users. Under reduced motion it's hidden entirely and the section's own
   background-image (a still frame from the same clip) shows instead, so
   every visitor sees the same scene either way. */
.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
  z-index: -1;
}
@media (max-width: 639px) {
  .hero-video { object-position: center 22%; }
}
.hero-photo::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, rgba(12,17,36,0.95) 0%, rgba(12,17,36,0.82) 42%, rgba(12,17,36,0.46) 100%);
  z-index: 0;
}
.hero-photo .container { position: relative; z-index: 1; }
.hero-photo .eyebrow { color: var(--mint-200); }
.hero-photo .eyebrow::before { background: var(--mint-200); }
.hero-photo h1 {
  color: var(--white);
  max-width: 15ch;
  font-size: clamp(2.75rem, 1.9rem + 4.6vw, 6.5rem);
  line-height: 0.97;
  letter-spacing: -0.03em;
  margin-bottom: var(--space-6);
}
.hero-ghost-word {
  position: absolute;
  top: 46%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(7rem, 4rem + 22vw, 26rem);
  color: rgba(255,255,255,0.05);
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
  z-index: 0;
  line-height: 1;
  letter-spacing: -0.02em;
}
.hero-photo .lede { color: rgba(255,255,255,0.85); max-width: 48ch; margin-bottom: var(--space-6); }
.hero-photo .breadcrumb { color: rgba(255,255,255,0.6); }
.hero-photo .breadcrumb a:hover { color: var(--white); }

/* Compact photo hero for inner pages (Become an Interpreter, etc.) */
.hero-photo.compact { padding-block: var(--space-8) var(--space-7); }
.hero-photo.compact h1 { max-width: 17ch; font-size: clamp(2.25rem, 1.7rem + 3.2vw, 4.5rem); }
.hero-eyebrow-badges { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-7); }
.hero-ctas { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-bottom: var(--space-6); }

/* Multilingual welcome row */
.greet-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6);
  border-top: 1px solid rgba(255,255,255,0.16);
  padding-top: var(--space-5);
  max-width: 46rem;
}
.greet-item { display: flex; flex-direction: column; gap: 2px; }
.greet-word { font-family: var(--font-display); font-weight: 700; font-size: 1.125rem; color: var(--white); }
.greet-lang { font-size: 0.75rem; letter-spacing: 0.04em; color: rgba(255,255,255,0.55); }

/* Bracket-corner stat cards */
.stat-card-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
}
@media (min-width: 768px) { .stat-card-row { grid-template-columns: repeat(4, 1fr); } }
.stat-card {
  position: relative;
  background: var(--white);
  padding: var(--space-5) var(--space-4);
}
.stat-card::before, .stat-card::after {
  content: "";
  position: absolute;
  width: 16px; height: 16px;
  border-color: var(--navy-900);
}
.stat-card::before { top: -1px; left: -1px; border-top: 2px solid; border-left: 2px solid; }
.stat-card::after { bottom: -1px; right: -1px; border-bottom: 2px solid; border-right: 2px solid; }
.stat-card .num { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.125rem); color: var(--navy-900); line-height: 1.1; }
.stat-card .label { font-size: 0.8125rem; color: var(--ink-600); margin-top: var(--space-2); }

/* Trust strip — prior-client logos on the dark section, muted/grayscale by
   default so they blend into the navy rather than compete with it, full
   color on hover/focus as a quiet reveal. */
.logo-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
}
@media (min-width: 640px) { .logo-row { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .logo-row { grid-template-columns: repeat(6, 1fr); } }
.logo-card {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4) var(--space-5);
  height: 84px;
}
.logo-card img {
  max-height: 42px;
  max-width: 100%;
  width: auto;
  object-fit: contain;
  filter: invert(1) grayscale(1) brightness(1.7);
  opacity: 0.5;
  transition: filter var(--transition), opacity var(--transition);
}
.logo-card:hover img,
.logo-card:focus-within img {
  filter: none;
  opacity: 1;
}
.trust-strip .trust-disclaimer { font-size: 0.75rem; color: rgba(251,248,243,0.72); margin-top: var(--space-5); }

/* ---------------------------------- */
/* Badges / pills / chips             */
/* ---------------------------------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-full);
  font-size: 0.8125rem;
  font-weight: 700;
  background: var(--white);
  border: 1px solid var(--border);
  color: var(--ink-700);
}
.badge svg { width: 16px; height: 16px; color: var(--navy-900); flex-shrink: 0; }

.chip {
  display: inline-flex;
  align-items: center;
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-full);
  background: var(--white);
  border: 1px solid var(--border);
  font-weight: 700;
  font-size: 0.9375rem;
  color: var(--navy-900);
  transition: border-color var(--transition), background var(--transition), color var(--transition), transform var(--transition), box-shadow var(--transition);
}
.chip:hover { background: var(--navy-900); color: var(--white); border-color: var(--navy-900); box-shadow: var(--shadow-sm); transform: translateY(-2px); }
.chip.chip-muted { background: var(--cream-100); color: var(--ink-600); font-weight: 600; border-style: dashed; }
.chip.chip-muted:hover { background: var(--cream-200); color: var(--ink-600); border-color: var(--border); }
/* Denser on mobile — these are decorative labels, not tap targets, so they
   don't need 44px-button padding. Full-size chips at 375px fit 1-2 per
   row and turn a 16-language list into a very long scroll. */
@media (max-width: 479px) {
  .chip { padding: var(--space-2) var(--space-3); font-size: 0.8125rem; }
  .lang-chip-list { gap: var(--space-2); }
}
.chip .iso { font-weight: 500; font-size: 0.75rem; color: var(--navy-900); margin-left: var(--space-2); }
.chip:hover .iso { color: var(--white); }
.chip.chip-muted .iso { color: var(--ink-400); }

/* Language region cards */
.lang-region-grid { display: grid; gap: var(--space-5); }
@media (min-width: 900px) { .lang-region-grid { grid-template-columns: 1.15fr 0.85fr; } }
.lang-region-card {
  border-radius: var(--radius-lg);
  padding: var(--space-6);
}
.lang-region-card.primary { background: var(--navy-900); color: var(--white); }
.lang-region-card.primary p { color: rgba(255,255,255,0.7); }
.lang-region-card.secondary { background: var(--cream-100); border: 1px solid var(--border); }
.lang-region-label {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mint-200);
  margin-bottom: var(--space-2);
  display: block;
}
.lang-region-card.secondary .lang-region-label { color: var(--navy-900); }
.lang-region-card h3 { margin-bottom: var(--space-4); }
.lang-region-card.primary h3 { color: var(--white); }
.lang-chip-list { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.lang-region-card.primary .chip { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.16); color: var(--white); }
.lang-region-card.primary .chip:hover { background: var(--white); border-color: var(--white); color: var(--navy-900); }
.lang-region-card.primary .chip .iso { color: var(--mint-200); }
.lang-region-card.primary .chip:hover .iso { color: var(--navy-900); }

/* Illustrative example callout (why-human section) */
.example-callout {
  position: relative;
  padding: var(--space-6) 0 var(--space-7);
  margin-bottom: var(--space-8);
  max-width: 68rem;
}
.example-callout::before {
  content: "\201C";
  position: absolute;
  top: -3.2rem;
  left: -0.5rem;
  font-family: var(--font-display);
  font-size: 11rem;
  font-weight: 500;
  color: rgba(255,255,255,0.08);
  line-height: 1;
  pointer-events: none;
}
.example-callout .label {
  display: block;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mint-200);
  margin-bottom: var(--space-4);
}
.example-callout p { position: relative; color: rgba(255,255,255,0.92); font-family: var(--font-display); font-style: italic; font-size: clamp(1.3125rem, 1.1rem + 1vw, 1.875rem); line-height: 1.42; max-width: 46ch; }
.example-callout p + p { margin-top: var(--space-4); }
.example-callout strong { color: var(--white); font-style: normal; font-family: var(--font-body); display: block; margin-top: var(--space-4); font-size: 1.0625rem; font-weight: 500; }
.example-callout .attribution { display: block; margin-top: var(--space-5); font-family: var(--font-mono); font-style: normal; font-size: 0.75rem; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(255,255,255,0.5); }

/* Numbered editorial list — manifesto-style, replaces repetitive card grids */
.manifesto-list { border-top: 1px solid rgba(255,255,255,0.14); }
.manifesto-item {
  display: grid;
  grid-template-columns: 52px 1fr;
  grid-template-areas: "num heading" "num body";
  column-gap: var(--space-5);
  row-gap: var(--space-2);
  padding: var(--space-6) var(--space-4);
  margin-inline: calc(var(--space-4) * -1);
  border-bottom: 1px solid rgba(255,255,255,0.14);
  border-radius: var(--radius-sm);
  transition: background var(--transition);
}
.manifesto-num {
  grid-area: num;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.75rem, 1.4rem + 1.4vw, 2.75rem);
  color: rgba(255,255,255,0.18);
  line-height: 1;
  transition: color var(--transition), transform var(--transition);
}
/* The reason itself brightens rather than the whole row jumping — reads
   as "this one's lit up" instead of a generic card-lift. */
.manifesto-item:hover { background: rgba(255,255,255,0.04); }
.manifesto-item:hover .manifesto-num { color: var(--mint-200); transform: translateX(2px); }
.manifesto-item h3 { grid-area: heading; margin-bottom: 0; color: var(--white); }
.manifesto-item p { grid-area: body; margin-bottom: 0; max-width: 62ch; }
@media (min-width: 820px) {
  .manifesto-item {
    grid-template-columns: 84px 320px 1fr;
    grid-template-areas: "num heading body";
    align-items: baseline;
    column-gap: var(--space-7);
  }
  .manifesto-num { font-size: clamp(2rem, 1.5rem + 1.6vw, 3rem); }
}

/* Signature tagline mark */
.tagline-mark {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: 1.0625rem;
  color: var(--white);
  margin-top: var(--space-6);
}
.tagline-mark::before { content: ""; width: 30px; height: 1px; background: var(--mint-200); flex-shrink: 0; }
.tagline-mark.on-light { color: var(--navy-900); }
.tagline-mark.on-light::before { background: var(--navy-900); }

/* ---------------------------------- */
/* Cards                              */
/* ---------------------------------- */
.card {
  background: var(--color-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-6);
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.card-hover:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: transparent; }

.icon-tile {
  width: 52px; height: 52px;
  border-radius: var(--radius-sm);
  background: var(--blue-100);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: var(--space-4);
  transition: background var(--transition), transform var(--transition);
}
.icon-tile svg { width: 26px; height: 26px; color: var(--navy-900); transition: color var(--transition), transform var(--transition); }
.icon-tile.navy { background: rgba(255,255,255,0.12); }
.icon-tile.navy svg { color: var(--mint-200); }
/* Icon tiles invert on card hover — a small, deliberate payoff for the
   interaction rather than a plain lift with nothing else moving. */
.card-hover:hover .icon-tile { background: var(--navy-900); }
.card-hover:hover .icon-tile svg { color: var(--mint-200); }
.card-hover:hover .icon-tile.navy { background: var(--mint-200); }
.card-hover:hover .icon-tile.navy svg { color: var(--navy-900); }

.card h3 { margin-bottom: var(--space-2); }
.card p { margin-bottom: 0; }

/* Service-mode cards (Phone/Video/On request): the supporting paragraph
   in each one mostly repeats what the section lede already says. On
   mobile that's three full cards of near-duplicate copy — collapse to a
   compact icon+label row instead of hiding it entirely, so the modes are
   still scannable without re-explaining themselves three times. */
@media (max-width: 767px) {
  .service-modes { display: flex; flex-direction: row; flex-wrap: wrap; gap: var(--space-3); }
  .service-modes .card { flex: 1 1 auto; padding: var(--space-3); display: flex; flex-direction: row; align-items: center; gap: var(--space-3); }
  .service-modes .icon-tile { width: 36px; height: 36px; margin-bottom: 0; flex-shrink: 0; }
  .service-modes .icon-tile svg { width: 18px; height: 18px; }
  .service-modes h3 { font-size: 0.9375rem; margin-bottom: 0; }
  .service-modes .card p { display: none; }
}

.check-list { display: flex; flex-direction: column; gap: var(--space-3); }
.check-list li { display: flex; gap: var(--space-3); align-items: flex-start; color: var(--color-text-muted); }
.check-list svg { width: 20px; height: 20px; color: var(--navy-900); flex-shrink: 0; margin-top: 2px; }

/* ---------------------------------- */
/* Dark / navy sections                */
/* ---------------------------------- */
.section-navy {
  background: var(--navy-900);
  color: var(--cream-50);
  position: relative;
  overflow: hidden;
}
.section-navy h2, .section-navy h3, .section-navy h4 { color: var(--white); }
.section-navy p { color: rgba(251,248,243,0.72); }
.section-navy .card {
  background: rgba(255,255,255,0.05);
  border-color: rgba(255,255,255,0.12);
}
.section-navy .card p { color: rgba(251,248,243,0.72); }
.section-navy .check-list li { color: rgba(251,248,243,0.85); }
.section-navy .check-list svg { color: var(--mint-200); }
.section-navy .eyebrow { color: var(--mint-200); }
.section-navy .eyebrow::before { background: var(--mint-200); }

.section-tint {
  background: var(--cream-100);
}

/* ---------------------------------- */
/* Stat strip                         */
/* ---------------------------------- */
.stat-strip {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  padding-block: var(--space-6);
}
@media (min-width: 640px) { .stat-strip { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .stat-strip { grid-template-columns: repeat(4, 1fr); } }
.stat-item { display: flex; align-items: flex-start; gap: var(--space-3); }
.stat-item svg { width: 28px; height: 28px; color: var(--mint-200); flex-shrink: 0; margin-top: 2px; }
.stat-title { font-weight: 700; color: var(--white); font-size: 1rem; margin-bottom: 2px; }
.stat-sub { font-size: 0.875rem; color: rgba(251,248,243,0.65); }

/* ---------------------------------- */
/* CTA band                           */
/* ---------------------------------- */
.cta-band {
  background: var(--navy-900);
  border-radius: var(--radius-lg);
  padding: var(--space-8) var(--space-6);
  text-align: center;
  color: var(--white);
  position: relative;
  overflow: hidden;
}
.cta-band h2 { color: var(--white); margin-bottom: var(--space-3); }
.cta-band p { color: rgba(255,255,255,0.88); max-width: 42rem; margin-inline: auto; margin-bottom: var(--space-6); }
.cta-band .hero-ctas { justify-content: center; margin-bottom: 0; }
.cta-band .btn-primary { background: var(--white); color: var(--navy-900); }
.cta-band .btn-primary:hover { background: var(--cream-100); color: var(--navy-800); }

.dual-cta-grid { display: grid; gap: var(--space-5); }
@media (min-width: 768px) { .dual-cta-grid { grid-template-columns: repeat(2, 1fr); } }
.dual-cta-card {
  border-radius: var(--radius-lg);
  padding: var(--space-7);
  color: var(--white);
  position: relative;
  overflow: hidden;
}
.dual-cta-card.client { background: var(--navy-900); }
/* A navy button on the navy card disappears — invert it for this card. */
.dual-cta-card.client .btn-primary { background: var(--white); color: var(--navy-900); }
.dual-cta-card.client .btn-primary:hover { background: var(--cream-50); }
.dual-cta-card.interpreter { background: var(--mint-100); }
.dual-cta-card h3 { color: var(--white); font-family: var(--font-display); font-size: 1.5rem; margin-bottom: var(--space-3); }
.dual-cta-card p { color: rgba(255,255,255,0.85); margin-bottom: var(--space-5); }
.dual-cta-card.interpreter h3, .dual-cta-card.interpreter p { color: var(--navy-950); }
.dual-cta-card.interpreter p { opacity: 0.82; }
.dual-cta-card.interpreter .icon-tile { background: rgba(20,38,62,0.1); }
.dual-cta-card.interpreter .icon-tile svg { color: var(--navy-950); }
.dual-cta-card.interpreter .btn-secondary { background: var(--navy-950); }
.dual-cta-card.interpreter .btn-secondary:hover { background: var(--navy-900); }

/* ---------------------------------- */
/* Forms                              */
/* ---------------------------------- */
.form-card {
  background: var(--color-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: var(--shadow-sm);
}
@media (min-width: 768px) { .form-card { padding: var(--space-8); } }

.form-step-legend {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--border);
}
.form-step-legend:not(:first-child) { margin-top: var(--space-8); }
.form-step-legend .num {
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--navy-900);
  color: var(--white);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.875rem;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.form-step-legend h3 { margin: 0; font-size: 1.125rem; }
.field-subheading { font-weight: 700; font-size: 0.8125rem; color: var(--ink-600); text-transform: uppercase; letter-spacing: 0.04em; margin: var(--space-4) 0 var(--space-2); }
.field-subheading:first-child { margin-top: 0; }
.select[multiple] { height: auto; padding: var(--space-2); }
.select[multiple] optgroup { font-weight: 700; color: var(--navy-900); font-style: normal; }
.select[multiple] option { padding: var(--space-2); font-weight: 400; }

.field { margin-bottom: var(--space-5); }
.field label {
  display: block;
  font-weight: 700;
  font-size: 0.875rem;
  color: var(--navy-900);
  margin-bottom: var(--space-2);
}
.field .hint { font-size: 0.8125rem; color: var(--ink-600); margin-top: var(--space-2); }
.field-required::after { content: " *"; color: var(--navy-900); }

.input, .textarea, .select {
  width: 100%;
  padding: 0.85rem 1rem;
  min-height: 48px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--white);
  color: var(--color-text);
  transition: border-color var(--transition), box-shadow var(--transition);
}
.textarea { min-height: 120px; resize: vertical; }
.input:hover, .textarea:hover, .select:hover { border-color: var(--ink-400); }
.input:focus, .textarea:focus, .select:focus {
  outline: none;
  border-color: var(--navy-900);
  box-shadow: 0 0 0 3px var(--blue-100);
}
.select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%234B4E58' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  padding-right: 2.75rem;
}

.field-row { display: grid; gap: var(--space-4); grid-template-columns: 1fr; }
@media (min-width: 640px) { .field-row.cols-2 { grid-template-columns: 1fr 1fr; } }
@media (min-width: 640px) { .field-row.cols-3 { grid-template-columns: repeat(3, 1fr); } }

.checkbox-group, .radio-group { display: flex; flex-direction: column; gap: var(--space-3); }
.checkbox-row {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: border-color var(--transition), background var(--transition);
}
.checkbox-row:hover { border-color: var(--navy-900); background: var(--blue-100); }
.checkbox-row input { margin-top: 3px; width: 18px; height: 18px; accent-color: var(--navy-900); flex-shrink: 0; }
.checkbox-row.consent { align-items: flex-start; }
.checkbox-row.consent input { margin-top: 4px; }
.checkbox-row.consent span { font-size: 0.875rem; color: var(--color-text-muted); }

.file-input {
  border: 1.5px dashed var(--border);
  border-radius: var(--radius-sm);
  padding: var(--space-5);
  text-align: center;
  background: var(--cream-100);
}
.file-input input { width: 100%; }

.form-status {
  display: none;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-5);
  font-weight: 600;
  font-size: 0.9375rem;
}
.form-status svg { width: 20px; height: 20px; flex-shrink: 0; }
.form-status.is-visible { display: flex; }
.form-status.success { background: var(--success-100); color: var(--success-600); }
.form-status.error { background: var(--error-100); color: var(--error-600); }
.form-status.loading { background: var(--cream-100); color: var(--ink-700); }

.spinner {
  width: 18px; height: 18px;
  border: 2.5px solid rgba(255,255,255,0.4);
  border-top-color: var(--white);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  display: none;
}
@keyframes spin { to { transform: rotate(360deg); } }
.btn.is-loading .spinner { display: inline-block; }
.btn.is-loading .btn-label { opacity: 0.85; }
.btn[disabled] { cursor: not-allowed; opacity: 0.85; }

/* ---------------------------------- */
/* Language marquee — continuous ticker for a global, expansive feel */
/* ---------------------------------- */
.lang-marquee {
  overflow: hidden;
  background: var(--navy-900);
  padding-block: var(--space-4);
  border-block: 1px solid rgba(255,255,255,0.1);
}
.lang-marquee-track {
  display: flex;
  width: max-content;
  animation: marquee-scroll 38s linear infinite;
}
.lang-marquee-set { display: flex; align-items: center; flex-shrink: 0; }
.lang-marquee-track span {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.125rem, 1rem + 0.7vw, 1.5rem);
  color: rgba(255,255,255,0.5);
  white-space: nowrap;
  padding-inline: var(--space-5);
  position: relative;
}
.lang-marquee-track span::after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--mint-200);
}
@keyframes marquee-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .lang-marquee-track { animation: none; }
  .lang-marquee { overflow-x: auto; }
}
.lang-marquee:hover .lang-marquee-track { animation-play-state: paused; }

/* ---------------------------------- */
/* Accordion (FAQ)                    */
/* ---------------------------------- */
.accordion-item {
  border-bottom: 1px solid var(--border);
}
.accordion-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-5) 0;
  background: none;
  border: none;
  text-align: left;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.0625rem;
  color: var(--navy-900);
  cursor: pointer;
}
.accordion-trigger svg { width: 22px; height: 22px; color: var(--navy-900); flex-shrink: 0; transition: transform var(--transition); }
.accordion-trigger[aria-expanded="true"] svg { transform: rotate(45deg); }
.accordion-panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height 260ms ease;
}
.accordion-panel-inner { padding-bottom: var(--space-5); }
.accordion-panel-inner p { margin: 0; }

/* ---------------------------------- */
/* Steps                              */
/* ---------------------------------- */
.steps { display: grid; gap: var(--space-6); counter-reset: step; }
@media (min-width: 768px) { .steps.cols-3 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 768px) { .steps.cols-4 { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 700px) and (max-width: 1023px) { .steps.cols-5 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .steps.cols-5 { grid-template-columns: repeat(5, 1fr); } }
.step { position: relative; padding-left: var(--space-7); }
.step-number {
  position: absolute;
  left: 0; top: 0;
  width: 42px; height: 42px;
  border-radius: 50%;
  background: var(--navy-900);
  color: var(--white);
  font-family: var(--font-display);
  font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.05rem;
  transition: transform var(--transition), box-shadow var(--transition);
  box-shadow: 0 0 0 0 rgba(108,243,177,0);
}
.section-navy .step-number { background: var(--white); color: var(--navy-900); }
/* A step "arrives" on hover rather than the whole card lifting — the
   number nudges forward and picks up a soft mint ring, like it's been
   tapped. */
.step:hover .step-number { transform: scale(1.08); box-shadow: 0 0 0 5px rgba(108,243,177,0.35); }
.step h4 { margin-bottom: var(--space-2); }

/* ---------------------------------- */
/* Quote / pillar strip               */
/* ---------------------------------- */
.pillar-row { display: grid; gap: var(--space-5); }
@media (min-width: 640px) { .pillar-row { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .pillar-row { grid-template-columns: repeat(5, 1fr); } }
.pillar { text-align: center; padding: var(--space-4); }
.pillar svg { width: 30px; height: 30px; color: var(--navy-900); margin-inline: auto var(--space-3); }
.pillar h4 { font-family: var(--font-display); font-size: 1.05rem; margin-bottom: var(--space-2); }
.pillar p { font-size: 0.875rem; margin: 0; }

/* ---------------------------------- */
/* Footer                             */
/* ---------------------------------- */
/* Light mint band, dark text — matches the AHA reference's footer inversion */
.site-footer {
  background: var(--mint-100);
  color: rgba(20,38,62,0.72);
  padding-block: var(--space-8) var(--space-6);
}
.footer-grid {
  display: grid;
  gap: var(--space-7);
  grid-template-columns: 1fr;
  padding-bottom: var(--space-7);
  border-bottom: 1px solid rgba(20,38,62,0.14);
}
@media (min-width: 768px) {
  .footer-grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; }
}
.footer-brand .brand { color: var(--navy-950); margin-bottom: var(--space-4); }
.footer-brand .brand-dot { color: var(--navy-950); }
.footer-brand p { max-width: 32ch; font-size: 0.9375rem; }
.footer-heading {
  color: var(--navy-950);
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: var(--space-4);
}
.footer-tag {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  color: var(--navy-950);
  margin-top: var(--space-4);
  font-size: 1.0625rem;
}
.footer-links { display: flex; flex-direction: column; gap: var(--space-3); }
.footer-links a { font-size: 0.9375rem; transition: color var(--transition); }
@media (max-width: 767px) {
  .footer-links { gap: 0; }
  .footer-links a, .footer-contact a { display: inline-flex; align-items: center; min-height: 44px; }
}
.footer-links a:hover { color: var(--navy-950); }
.footer-contact { display: flex; flex-direction: column; gap: var(--space-3); font-size: 0.9375rem; }
.footer-contact li { display: flex; align-items: flex-start; gap: var(--space-3); }
.footer-contact svg { width: 18px; height: 18px; color: var(--navy-950); flex-shrink: 0; margin-top: 2px; }
.footer-contact a:hover { color: var(--navy-950); }

.footer-social { display: flex; gap: var(--space-3); margin-top: var(--space-4); }
.footer-social a {
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(20,38,62,0.55);
  color: var(--navy-950);
  display: flex; align-items: center; justify-content: center;
  transition: background var(--transition), border-color var(--transition);
}
.footer-social a:hover { background: rgba(20,38,62,0.1); border-color: rgba(20,38,62,0.75); }
.footer-social svg { width: 17px; height: 17px; }

.footer-bottom {
  padding-top: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  font-size: 0.8125rem;
}
@media (min-width: 768px) {
  .footer-bottom { flex-direction: row; align-items: center; justify-content: space-between; }
}
.footer-legal { display: flex; gap: var(--space-5); flex-wrap: wrap; }
.footer-legal a:hover { color: var(--navy-950); }
.footer-compliance {
  max-width: 68ch;
  font-size: 0.8125rem;
  line-height: 1.7;
  color: rgba(20,38,62,0.72);
  margin-top: var(--space-5);
}

/* Oversized closing wordmark — confident sign-off, not a repeated logo */
.footer-signoff {
  overflow: hidden;
  padding-top: var(--space-8);
  margin-top: var(--space-7);
  border-top: 1px solid rgba(20,38,62,0.12);
}
.footer-signoff span {
  display: block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(3.5rem, 2rem + 11vw, 11rem);
  line-height: 0.85;
  letter-spacing: -0.03em;
  color: rgba(20,38,62,0.1);
  white-space: nowrap;
}

/* ---------------------------------- */
/* Signature motion: greeting cycle    */
/* ---------------------------------- */
/* The one piece of motion on the site. On the home hero the giant ghost
   word cycles through the five greetings and the matching greeting in the
   row below lights up mint (see main.js). Everything else simply appears. */
.hero-ghost-word { transition: opacity 600ms ease; }
.hero-ghost-word.is-swapping { opacity: 0; }
.greet-word { transition: color 600ms ease; }
.greet-item.is-active .greet-word { color: var(--mint-200); }

/* ---------------------------------- */
/* Service modes (home "What we do")   */
/* ---------------------------------- */
.mode-list { border-top: 1px solid var(--border); }
.mode-row {
  display: grid;
  grid-template-columns: 52px 1fr;
  gap: var(--space-4);
  align-items: start;
  padding-block: var(--space-5);
  border-bottom: 1px solid var(--border);
}
.mode-row h3 { font-size: 1.25rem; margin-bottom: var(--space-1); }
.mode-row p { margin: 0; }

/* ---------------------------------- */
/* Language showcase                   */
/* ---------------------------------- */
.lang-showcase-list {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: clamp(1.25rem, 0.5rem + 2.5vw, 3rem);
  row-gap: var(--space-2);
  margin-bottom: var(--space-8);
}
.lang-showcase-list li {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2.25rem, 1.4rem + 4vw, 5rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--white);
}
.lang-showcase-list li:nth-child(even) { font-style: italic; font-weight: 500; color: var(--mint-200); }
.lang-showcase-more {
  display: grid;
  gap: var(--space-5);
  border-top: 1px solid rgba(255,255,255,0.16);
  padding-top: var(--space-6);
}
@media (min-width: 900px) { .lang-showcase-more { grid-template-columns: 1fr 1.4fr; gap: var(--space-8); } }
.lang-showcase-more h3 { font-size: 1.375rem; margin-bottom: var(--space-2); }
.lang-showcase-secondary {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 1rem + 1vw, 1.75rem);
  line-height: 1.5;
  color: rgba(251,248,243,0.85);
}
.lang-showcase-secondary a { color: var(--mint-200); text-decoration: underline; text-underline-offset: 4px; }

/* ---------------------------------- */
/* Form groups, chips & steps          */
/* ---------------------------------- */
fieldset.field { border: 0; padding: 0; margin-inline: 0; min-width: 0; }
.field > legend {
  display: block;
  padding: 0;
  font-weight: 700;
  font-size: 0.875rem;
  color: var(--navy-900);
  margin-bottom: var(--space-2);
}

/* Checkbox chips — a lighter-weight alternative to full checkbox rows for
   long pick-lists (the "other languages" picker). */
.chip-check-list { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.chip-check { position: relative; }
.chip-check input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.chip-check span {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 var(--space-4);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-full);
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--ink-700);
  background: var(--white);
  cursor: pointer;
  transition: border-color var(--transition), background var(--transition), color var(--transition);
}
.chip-check span:hover { border-color: var(--navy-900); }
.chip-check input:checked + span { background: var(--navy-900); border-color: var(--navy-900); color: var(--white); }
.chip-check input:checked + span::before { content: "\2713"; margin-right: var(--space-2); color: var(--mint-200); }
.chip-check input:focus-visible + span { outline: 3px solid var(--color-ring); outline-offset: 2px; }

.region-picker { border: 1.5px solid var(--border); border-radius: var(--radius-sm); background: var(--white); }
.region-picker + .region-picker { margin-top: var(--space-2); }
.region-picker summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 48px;
  padding: 0 var(--space-4);
  font-weight: 700;
  font-size: 0.9375rem;
  color: var(--navy-900);
  cursor: pointer;
  list-style: none;
}
.region-picker summary::-webkit-details-marker { display: none; }
.region-picker summary::after { content: "+"; font-size: 1.25rem; font-weight: 500; }
.region-picker[open] summary::after { content: "\2212"; }
.region-picker .chip-check-list { padding: 0 var(--space-4) var(--space-4); }
.region-count { white-space: nowrap; margin-left: auto; margin-right: var(--space-3); font-size: 0.8125rem; font-weight: 600; color: var(--ink-600); }

/* Multi-step form (enhanced by main.js; without JS every step shows). */
.form-progress { margin-bottom: var(--space-6); }
.form-progress-label { display: flex; justify-content: space-between; font-size: 0.875rem; font-weight: 700; color: var(--navy-900); margin-bottom: var(--space-2); }
.form-progress-label span:last-child { color: var(--ink-600); font-weight: 600; }
.form-progress-bar { height: 6px; border-radius: var(--radius-full); background: var(--blue-100); overflow: hidden; }
.form-progress-bar span { display: block; height: 100%; background: var(--navy-900); border-radius: inherit; transition: width 300ms ease; }
.form-step-nav { display: flex; gap: var(--space-3); justify-content: space-between; margin-top: var(--space-6); }
.form-step-nav .btn:only-child { margin-left: auto; }
.form-step-legend:focus { outline: none; }

/* ---------------------------------- */
/* Simple page header (inner pages)   */
/* ---------------------------------- */
.page-hero {
  background: var(--navy-900);
  color: var(--white);
  padding-block: var(--space-8) var(--space-7);
  position: relative;
  overflow: hidden;
}
.page-hero::after {
  content: "";
  position: absolute;
  width: 420px; height: 420px;
  border-radius: 50%;
  background: var(--navy-900);
  opacity: 0.4;
  top: -200px; right: -140px;
}
.page-hero .container { position: relative; z-index: 1; }
.page-hero h1 { color: var(--white); max-width: 17ch; font-size: clamp(2.25rem, 1.7rem + 3.2vw, 4.5rem); line-height: 0.98; letter-spacing: -0.03em; }
.page-hero .lede { color: rgba(251,248,243,0.78); max-width: 50ch; margin-top: var(--space-4); }
.breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 0.8125rem;
  font-weight: 600;
  color: rgba(251,248,243,0.65);
  margin-bottom: var(--space-5);
}
.breadcrumb a:hover { color: var(--white); }

/* Anchor tab nav for who-we-serve */
.tab-nav {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
  padding: var(--space-5) 0;
  border-bottom: 1px solid var(--border);
  margin-bottom: var(--space-8);
  position: sticky;
  top: 76px;
  background: var(--color-bg);
  z-index: 10;
}
.tab-nav a {
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-full);
  font-weight: 700;
  font-size: 0.875rem;
  border: 1.5px solid var(--border);
  color: var(--ink-700);
  transition: all var(--transition);
}
.tab-nav a:hover { border-color: var(--navy-900); color: var(--navy-900); }

.audience-block { padding-block: var(--space-8); border-bottom: 1px solid var(--border); scroll-margin-top: 140px; }
.audience-block:last-child { border-bottom: none; }
.audience-grid { display: grid; gap: var(--space-7); align-items: start; }
@media (min-width: 1024px) { .audience-grid { grid-template-columns: 0.85fr 1.15fr; } }
.audience-icon-badge {
  width: 64px; height: 64px;
  border-radius: var(--radius-md);
  background: var(--navy-900);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: var(--space-5);
}
.audience-icon-badge svg { width: 32px; height: 32px; color: var(--mint-200); }

/* Photo panel — real photography above the icon badge in audience/story blocks.
   A consistent low-opacity navy wash (::after, multiply blend) sits on every
   photo so images pulled from different sources — different lighting, white
   balance, generations — read as one brand's photography instead of a stock
   assortment. */
.audience-visual { position: relative; margin-bottom: var(--space-8); }
.audience-photo {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  filter: saturate(0.92) contrast(1.04);
}
.audience-visual::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--radius-lg);
  background: var(--navy-900);
  mix-blend-mode: multiply;
  opacity: 0.1;
  pointer-events: none;
}
/* Reach panel — a looping video used in place of a photo where the point
   is global reach/connection rather than a specific person or place. */
.reach-panel {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  background-color: var(--navy-950);
  background-size: cover;
  background-position: center;
}
.reach-panel video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.audience-visual .audience-icon-badge {
  position: absolute;
  bottom: 20px;
  left: 20px;
  margin-bottom: 0;
  background: rgba(20,38,62,0.82);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: var(--shadow-lg);
}

/* Utility spacing */
.mt-2 { margin-top: var(--space-2); }
.mt-3 { margin-top: var(--space-3); }
.mt-4 { margin-top: var(--space-4); }
.mt-5 { margin-top: var(--space-5); }
.mt-6 { margin-top: var(--space-6); }
.mb-0 { margin-bottom: 0; }
.mb-3 { margin-bottom: var(--space-3); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-5 { margin-bottom: var(--space-5); }
.mb-6 { margin-bottom: var(--space-6); }

/* Deliberate line breaks: hidden on narrow screens (let the headline wrap
   naturally where every word counts), shown from tablet width up where
   there's room to control the break intentionally. */
.br-desktop { display: none; }
@media (min-width: 640px) { .br-desktop { display: block; } }

/* 404 */
.error-page {
  min-height: 60vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding-block: var(--space-9);
}
.error-page .eyebrow { justify-content: center; }
.error-page .eyebrow::before { display: none; }