/* ==========================================================================
   TMA — design tokens
   Font strategy: system font stack (Engineering Review Decisions #12 note) —
   no self-hosted webfont files exist yet from TMA's brand kit, so we use the
   OS-native sans stack. This has zero network cost and no FOIT/FOUT at all,
   which already satisfies the font-loading performance goal; swap in a
   self-hosted brand typeface (font-display: swap + preload, both already
   wired below) once TMA supplies real font files.
   ========================================================================== */

:root {
  --color-navy: #002081;
  --color-navy-dark: #001a68;
  --color-white: #ffffff;
  /* Text/foregrounds on surfaces that are always navy or a photo (hero,
     footer, navy sections) — kept as its own token, separate from
     --color-white, on purpose: a since-removed auto dark-mode variant used
     to redefine --color-white per prefers-color-scheme, which flipped these
     to near-black on a fixed-navy background (real bug, found via a live
     screenshot). The site's design has one canonical light look with no
     dark variant, so dark-mode auto-switching was removed entirely rather
     than chasing every element this touched — see git history. */
  --color-on-dark: #ffffff;
  --color-accent: #ff8500; /* decorative / on-navy / non-text UI only */
  /* Was a separate AA-compliant #b25d00 (4.71:1 on white) — client direction
     is to use the one vivid brand orange everywhere, including text on
     white, accepting the WCAG AA contrast tradeoff site-wide (already the
     precedent on the homepage's .dna-eyebrow/.dna-italic — see
     tests/a11y.spec.js's KNOWN_AA_EXCEPTIONS, expanded accordingly). */
  --color-accent-text-on-light: #ff8500;
  --color-text: #14161f;
  --color-text-muted: #5a5f72;
  --color-border: #e2e4ec;
  --color-bg-light: #f6f7fb;

  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2rem;
  --space-5: 3rem;
  --space-6: 4rem;
  --space-7: 6rem;

  --radius: 4px;
  --max-width: 1200px;

  --focus-ring: 3px solid var(--color-accent);
}

/* ==========================================================================
   Reset
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
/* Backstop against any single element (an un-wrapping headline, a
   carousel track, etc.) silently forcing the whole page to scroll
   sideways on narrow screens — components that intentionally need their
   own horizontal scroll (the services tabs, the work rail, the marquee)
   already scope overflow-x to themselves, not the page. */
html, body { overflow-x: hidden; max-width: 100%; }
body {
  margin: 0;
  font-family: var(--font-sans);
  color: var(--color-text);
  background: var(--color-white);
  line-height: 1.5;
}
img { max-width: 100%; display: block; }
/* Browser default for <figure> is margin: 1em 40px — never reset until now.
   That 40px horizontal margin (80px per card) was the actual cause of the
   DNA cards looking "too far apart" and misaligned at narrower widths: it
   stacked on top of the intended 14px grid gap, and the last card's right
   margin pushed it past the container edge once space got tight. */
figure { margin: 0; }
a { color: inherit; }
button { font-family: inherit; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

:focus-visible {
  outline: var(--focus-ring);
  outline-offset: 2px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--color-navy);
  color: var(--color-on-dark);
  padding: var(--space-2) var(--space-3);
  z-index: 1000;
}
.skip-link:focus {
  left: var(--space-2);
  top: var(--space-2);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ==========================================================================
   Layout primitives
   ========================================================================== */

.container {
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: var(--space-3);
}

.section { padding-block: var(--space-6); }
.section--navy { background: var(--color-navy); color: var(--color-on-dark); }
.section--light { background: var(--color-bg-light); }

.grid { display: grid; gap: var(--space-3); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }

/* ==========================================================================
   Typography
   ========================================================================== */

h1, h2, h3, h4 { font-weight: 800; line-height: 1.1; margin: 0 0 var(--space-2); }
h1 { font-size: clamp(2rem, 5vw, 3.5rem); letter-spacing: -0.02em; }
h2 { font-size: clamp(1.5rem, 3.5vw, 2.5rem); letter-spacing: -0.01em; }
h3 { font-size: 1.25rem; }
p { margin: 0 0 var(--space-2); color: var(--color-text-muted); }
.section--navy p { color: rgba(255, 255, 255, 0.75); }

.eyebrow {
  display: inline-block;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.85rem;
  color: var(--color-accent-text-on-light);
  margin-bottom: var(--space-1);
}
.section--navy .eyebrow { color: var(--color-accent); }

.text-accent-on-light { color: var(--color-accent-text-on-light); }
.text-accent-on-navy { color: var(--color-accent); }

/* ==========================================================================
   Buttons & links
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.75em 1.5em;
  border-radius: var(--radius);
  font-weight: 700;
  text-decoration: none;
  border: 2px solid transparent;
  cursor: pointer;
  min-height: 44px;
}
/* Orange-to-navy gradient sweep + lift on hover, matching the source
   design's [data-btn] treatment — applies to every primary button site-wide
   per client direction. .btn__arrow (where a button has a trailing arrow
   glyph) slides right in step with the sweep. */
/* A sliding background-position window (the source design's literal
   technique) left a hairline sliver of the "wrong" color at each edge on
   narrow buttons — a rounding artifact of the 200%-wide gradient window.
   A straight opacity crossfade between two flat layers is mathematically
   incapable of that: at any point there's just the base layer plus 0-100%
   of the overlay, never a partial window into a wider image. */
.btn--primary {
  position: relative;
  isolation: isolate; /* gives ::before's z-index:-1 a stacking context
    scoped to this button, so the gradient layer sits behind the button's
    own text/arrow but can't bleed behind unrelated page content */
  background: var(--color-accent);
  color: #fff;
  transition: transform 200ms cubic-bezier(.4, 0, .2, 1), box-shadow 200ms cubic-bezier(.4, 0, .2, 1);
}
.btn--primary::before {
  content: "";
  position: absolute;
  /* .btn has a 2px transparent border; inset:0 on an absolute child only
     reaches the padding edge (inside that border), leaving the button's
     own solid-orange background permanently visible as a 2px frame that
     never transitions — that's the "orange edge" that kept showing
     through the navy gradient. -2px extends this overlay out to cover
     the border area too, so nothing is left uncovered. */
  inset: -2px;
  border-radius: inherit;
  /* Plain 2-stop, pure-horizontal blend — no middle stop, no angle off
     90deg. Kept deliberately this simple after two rounds of a hairline
     edge artifact showing up with a mid-stop/off-axis version. */
  background: linear-gradient(90deg, var(--color-accent) 0%, var(--color-navy) 100%);
  opacity: 0;
  transition: opacity 420ms ease;
  z-index: -1;
}
.btn--primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(0, 16, 52, .28);
}
.btn--primary:hover::before { opacity: 1; }
.btn__arrow { display: inline-block; transition: transform 260ms cubic-bezier(.2, .8, .2, 1); }
.btn--primary:hover .btn__arrow { transform: translateX(5px); }
.btn--outline { border-color: currentColor; background: transparent; }
.link-underline { text-decoration: underline; text-underline-offset: 3px; }

/* Sliding orange underline for every body-text link site-wide, per client
   direction — everything except buttons and icon-only/logo links (those
   aren't "body text" links and have their own hover treatment). */
a:not(.btn):not(.card):not(.site-header__logo):not(.footer-social a):not(.hero__cue):not(.nav-desktop a):not(.nav-mobile-panel a):not(.brands-grid__item a):not(.about-hello__link):not(.work-card):not(.nav-ai-badge) {
  background-image: linear-gradient(var(--color-accent), var(--color-accent));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 2px;
  padding-bottom: 2px;
  transition: background-size 320ms cubic-bezier(.2, .8, .2, 1);
}
a:not(.btn):not(.card):not(.site-header__logo):not(.footer-social a):not(.hero__cue):not(.nav-desktop a):not(.nav-mobile-panel a):not(.brands-grid__item a):not(.about-hello__link):not(.work-card):not(.nav-ai-badge):hover {
  background-size: 100% 2px;
}

/* ==========================================================================
   Header / navigation (progressive enhancement)
   Mobile menu works with zero JS via <details>/<summary>; nav.js only
   upgrades it to close-on-outside-click / Esc, never required for basic use.
   ========================================================================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--color-white);
  border-bottom: 1px solid var(--color-border);
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: var(--space-2);
}
/* Groups nav-desktop + the AI Audit badge + the mobile toggle together so
   .site-header__inner's space-between only ever sees two items (logo,
   this group) regardless of which nav variant the breakpoint shows —
   otherwise a 3rd always-visible child would split space-between three
   ways and shove the badge away from the nav it's meant to sit beside. */
.site-header__nav-group { display: flex; align-items: center; gap: var(--space-3); }
.site-header__logo { display: flex; align-items: center; gap: 0.6em; }
.site-header__logo img { height: 32px; width: auto; }
.site-header__logo-transparent { display: none; }

/* Homepage-only: transparent nav floating over the hero photo, solidifying
   to the standard white header once the hero has scrolled past (see
   homepage.js — every other page keeps the plain always-solid header
   above, untouched). */
.has-hero-nav .site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  background: transparent;
  border-bottom-color: transparent;
  transition: background 650ms cubic-bezier(.4, 0, .2, 1) 60ms, box-shadow 650ms cubic-bezier(.4, 0, .2, 1) 60ms, border-color 650ms cubic-bezier(.4, 0, .2, 1) 60ms;
}
.has-hero-nav .site-header__logo-transparent { display: block; }
.has-hero-nav .site-header__logo-solid { display: none; }
.has-hero-nav .nav-desktop a,
.has-hero-nav .nav-desktop a[aria-current="page"],
.has-hero-nav .nav-mobile-toggle { color: #fff; }

.has-hero-nav .site-header--scrolled {
  background: var(--color-white);
  border-bottom-color: var(--color-border);
  box-shadow: 0 2px 18px rgba(0, 16, 52, 0.12);
}
.has-hero-nav .site-header--scrolled .site-header__logo-transparent { display: none; }
.has-hero-nav .site-header--scrolled .site-header__logo-solid { display: block; }
.has-hero-nav .site-header--scrolled .nav-desktop a,
.has-hero-nav .site-header--scrolled .nav-mobile-toggle { color: var(--color-navy); }
.has-hero-nav .site-header--scrolled .nav-desktop a[aria-current="page"] { color: var(--color-accent); }

@media (prefers-reduced-motion: reduce) {
  .has-hero-nav .site-header { transition: none; }
}

.nav-desktop { display: none; }
.nav-desktop ul { list-style: none; display: flex; gap: var(--space-4); margin: 0; padding: 0; }
.nav-desktop a {
  text-decoration: none;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  min-height: 44px; /* clickable area meets touch-target guidance without
    inflating the visual text size */
  color: var(--color-navy);
  transition: color 200ms ease;
}
/* Sliding orange underline "draws in" on hover — done via a background-image
   sized to the inner label span (not the 44px touch-target box) so it sits
   snug under the text rather than at the bottom of the taller click area. */
.nav-link-label {
  background-image: linear-gradient(var(--color-accent), var(--color-accent));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 2px;
  padding-bottom: 4px;
  transition: background-size 320ms cubic-bezier(.2, .8, .2, 1);
}
.nav-desktop a:hover .nav-link-label,
.nav-desktop a[aria-current="page"] .nav-link-label {
  background-size: 100% 2px;
}
.nav-desktop a[aria-current="page"] { color: var(--color-accent); }
.nav-desktop a:hover { color: var(--color-accent); }

/* Self-contained filled pill — deliberately doesn't use the plain nav
   links' color-swap rules (transparent-over-hero vs solid header), since
   its own background already keeps it legible in both states. */
.nav-ai-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  white-space: nowrap;
  background: var(--color-accent);
  /* Same deep purple as .hero__ai's "AI" — deliberate one-off accent per
     client request; ~6:1 contrast on the orange background. */
  color: #3b0764;
  font-weight: 700;
  font-size: .85rem;
  padding: .5em 1em;
  border-radius: 99px;
  text-decoration: none;
  transition: transform 200ms ease, box-shadow 200ms ease;
}
.nav-ai-badge:hover { transform: translateY(-1px); box-shadow: 0 8px 18px rgba(255, 133, 0, .4); color: #3b0764; }

.nav-mobile-toggle {
  /* <details><summary> IS the toggle — this is just the summary's visible label */
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.5em;
  font-weight: 700;
  min-height: 44px;
  padding-inline: var(--space-1);
}
.nav-mobile-toggle::-webkit-details-marker { display: none; }
/* .site-header is always itself positioned (sticky, or fixed on the
   hero-nav homepage) so this resolves its containing block to the whole
   header bar, not just the <details> — a full-width dropdown rather than
   a narrow one anchored under the hamburger. Without an explicit
   background here it had none at all: the menu's links rendered as plain
   text directly over whatever was behind the header (the hero photo, on
   the homepage), unreadable and looking like a rendering glitch rather
   than a menu. */
.nav-mobile-panel {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--color-white);
  box-shadow: 0 16px 32px rgba(0, 16, 52, .2);
  max-height: calc(100vh - 100%);
  overflow-y: auto;
}
.nav-mobile-panel ul {
  list-style: none;
  margin: 0;
  padding: var(--space-2) 0;
  border-top: 1px solid var(--color-border);
}
.nav-mobile-panel a {
  display: block;
  padding: var(--space-2) var(--space-3);
  color: var(--color-navy);
  text-decoration: none;
  font-weight: 600;
  min-height: 44px;
}
.nav-mobile-panel a[aria-current="page"] { color: var(--color-accent); }
.nav-mobile-panel a:hover { color: var(--color-accent); }

@media (min-width: 1024px) {
  .nav-desktop { display: block; }
  .nav-mobile { display: none; }
}

/* ==========================================================================
   Hero
   ========================================================================== */

.hero {
  position: relative;
  color: var(--color-on-dark);
  background: var(--color-navy);
  height: min(100vh, 900px);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
}
.hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
/* The video is an enhancement over the always-present photo (see
   homepage.js) — skipped entirely on narrow viewports, slow connections, or
   prefers-reduced-motion, so the photo is what most visitors actually see. */
.hero__bg-video {
  opacity: 0;
  transition: opacity 600ms ease;
}
.hero__bg-video.is-playing { opacity: 1; }
.hero__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 32, 129, .62) 0%, rgba(0, 32, 129, .72) 55%, rgba(0, 32, 129, .78) 100%);
}
.hero__dots {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, .13) 1px, transparent 1px);
  background-size: 22px 22px;
  opacity: .5;
}
.hero__progress {
  position: absolute;
  left: 0; bottom: 0;
  height: 4px;
  width: 0%;
  background: var(--color-accent);
}
.hero__content { position: relative; z-index: 1; padding-inline: var(--space-3); }
.hero__headline { margin: 0; font-size: clamp(2.25rem, 6vw, 4.5rem); line-height: 1.06; letter-spacing: -0.02em; }
.hero__row { display: flex; flex-wrap: wrap; gap: 0.35em; justify-content: center; align-items: baseline; }
/* Rotator: a hidden sizer (in normal flow) reserves the box's height and
   gives it a sane width before JS runs (or with JS off) — same idea as
   .about-hello__rotator. homepage.js drives the crossfade itself (toggling
   .is-active) and sets the container's exact pixel width in that same tick,
   so the fade and the resize are always perfectly in sync (a CSS
   animation-delay clock and a JS setInterval clock drift apart from each
   other — this keeps everything on one single timer instead). That also
   means "IN THE AGE OF" always sits one space after the rotating word,
   regardless of how long it is. With JS off, only the first word (marked
   up with .is-active already) ever shows — a static, correct fallback. */
.hero__rotator { position: relative; display: inline-block; text-align: left; overflow: hidden; transition: width 400ms ease; }
.hero__rotator-sizer { visibility: hidden; white-space: nowrap; }
.hero__rotator-word {
  position: absolute;
  inset-inline-start: 0;
  top: 0;
  white-space: nowrap;
  opacity: 0;
  color: var(--color-accent);
  transition: opacity 500ms ease;
}
.hero__rotator-word.is-active { opacity: 1; }
.hero__ai {
  display: inline-block;
  background: var(--color-accent);
  /* Deep purple, not a brand token — deliberate one-off accent per client
     request; ~6:1 contrast on the orange background, comfortably AA. */
  color: #3b0764;
  padding-inline: .15em;
  margin-inline: -.15em;
}
.hero__cue {
  position: absolute;
  left: 0; right: 0; bottom: 52px;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  color: var(--color-on-dark);
  font-weight: 700;
  font-size: 0.9rem;
  text-decoration: none;
}
.hero__cue:hover { color: var(--color-accent); }
.hero__cue svg { transition: transform 200ms ease; }
.hero__cue:hover svg { transform: translateY(4px); }

/* ==========================================================================
   Cards
   ========================================================================== */

.card {
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: var(--space-3);
  background: var(--color-white);
}
/* A .card always has a white/light background, even when nested inside a
   .section--navy — without this, ".section--navy p" (white-on-navy body
   text) leaks in and renders invisible white-on-white text (Careers page
   bug, found rebuilding that page against the source design). */
.section--navy .card p { color: var(--color-text-muted); }
.card img,
.card picture img {
  aspect-ratio: 4 / 3;
  object-fit: cover;
  width: 100%;
  height: auto; /* the img's explicit width/height attributes (from
    eleventy-img) otherwise win over aspect-ratio, since aspect-ratio only
    fills in a dimension that's actually auto */
  border-radius: var(--radius);
}
.card--stat .card__value { font-size: 2rem; font-weight: 800; color: var(--color-navy); }
.section--navy .card--stat .card__value { color: var(--color-on-dark); }

/* Full-bleed, edge-to-edge 3-col grid (no gutters) — matches the source
   design, which runs this grid the full width of the viewport rather than
   inside the site's normal 1200px .container. */
.pillar-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  background: var(--color-navy);
}
@media (max-width: 767px) {
  .pillar-grid { grid-template-columns: 1fr; }
}

/* Each of the 6 service tiles now carries its own title + description (see
   site.serviceDetails), which is what actually differentiates them
   (design-review FINDING-002 originally patched this with a numbered index
   before real per-service copy existed). Description reveals on hover for
   pointer users; data-svc-tile is also focusable/clickable (homepage.js)
   so keyboard and touch users get the same content without relying on
   :hover. */
/* No longer a forced square (client reverted that call) — a simple
   min-height instead. .pillar-tile__inner still absolutely overlays it,
   so the reveal-on-hover still can't grow the tile; min-height just sets
   what its height actually is. */
.pillar-tile {
  position: relative;
  min-height: 320px;
  color: var(--color-on-dark);
  background: #0e2f9a;
  overflow: hidden;
  cursor: pointer;
}
.pillar-tile__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  object-fit: cover;
  object-position: center;
  filter: grayscale(1) contrast(1.05);
}
.pillar-tile__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(160deg, rgba(0, 22, 94, .88) 0%, rgba(0, 22, 94, .88) 62%, rgba(255, 133, 0, .88) 100%);
}
/* Orange coverage grows ~10% on hover — gradients don't transition
   reliably via the background shorthand, so this crossfades a second,
   more-orange copy in on top instead. */
.pillar-tile__scrim::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg, rgba(0, 22, 94, .88) 0%, rgba(0, 22, 94, .88) 52%, rgba(255, 133, 0, .88) 100%);
  opacity: 0;
  transition: opacity 900ms cubic-bezier(.2, .8, .2, 1);
}
.pillar-tile:hover .pillar-tile__scrim::after,
.pillar-tile:focus-visible .pillar-tile__scrim::after,
.pillar-tile.is-open .pillar-tile__scrim::after {
  opacity: 1;
}
/* Title + description live in normal flow inside this absolutely
   positioned, fixed-size layer — flex + justify-content:center means the
   whole group re-centers (title shifts up) as the description reveals,
   instead of the description overlaying a title fixed in place. */
.pillar-tile__inner {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: var(--space-4);
  text-align: center;
}
.pillar-tile__title {
  margin: 0;
  font-weight: 800;
  text-transform: uppercase;
  font-size: clamp(1.35rem, 1.8vw, 1.75rem);
  line-height: 1.25;
  transition: color 900ms cubic-bezier(.2, .8, .2, 1);
}
.pillar-tile__desc {
  margin: 0;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  font-size: 0.95rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.9);
  transition: opacity 900ms cubic-bezier(.2, .8, .2, 1), max-height 900ms cubic-bezier(.2, .8, .2, 1);
}
.pillar-tile:hover .pillar-tile__desc,
.pillar-tile:focus-visible .pillar-tile__desc,
.pillar-tile.is-open .pillar-tile__desc {
  max-height: 200px;
  opacity: 1;
}
.pillar-tile:hover .pillar-tile__title,
.pillar-tile:focus-visible .pillar-tile__title,
.pillar-tile.is-open .pillar-tile__title {
  color: var(--color-accent);
}

/* ==========================================================================
   Filters (progressive enhancement: with JS off, all items show, no filter
   chips control visibility — see filters.js)
   ========================================================================== */

/* Without JS the filter bar is hidden entirely and every item is simply
   visible by default (nothing hides them) — this is what makes filters
   degrade gracefully instead of breaking (see Constraints, filters.js). */
.no-js .filter-bar { display: none; }
.filter-bar { display: flex; flex-wrap: wrap; gap: var(--space-1); margin-bottom: var(--space-4); }
.filter-chip {
  border: 1px solid var(--color-border);
  background: var(--color-white);
  border-radius: 999px;
  padding: 0.5em 1.1em;
  font-weight: 600;
  cursor: pointer;
  min-height: 44px;
}
.filter-chip[aria-pressed="true"] {
  background: var(--color-navy);
  color: var(--color-on-dark);
  border-color: var(--color-navy);
}
.filter-empty-state {
  padding: var(--space-4);
  text-align: center;
  color: var(--color-text-muted);
  display: none;
}
.filter-empty-state.is-visible { display: block; }

/* ==========================================================================
   Forms
   ========================================================================== */

.form-field { margin-bottom: var(--space-3); }
.form-field label { display: block; font-weight: 700; margin-bottom: 0.4em; }
.form-field input[type="text"],
.form-field input[type="email"],
.form-field select,
.form-field textarea {
  width: 100%;
  padding: 0.75em;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  font: inherit;
  min-height: 44px;
}
.form-field textarea { min-height: 120px; }

/* Honeypot: visually hidden AND out of the accessibility tree + tab order,
   so a screen-reader user can never trigger it (Engineering Review
   Decisions — honeypot a11y requirement). */
.form-honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.contact-fallback {
  margin-top: var(--space-4);
  padding: var(--space-3);
  background: var(--color-bg-light);
  border-radius: var(--radius);
}

/* ==========================================================================
   Footer
   ========================================================================== */

.site-footer {
  background: var(--color-navy);
  color: rgba(255, 255, 255, 0.8);
  padding-block: var(--space-5);
}
.site-footer a {
  color: var(--color-on-dark);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

.footer-contact-link svg { margin-right: .6em; flex: 0 0 auto; }

.footer-social { display: flex; gap: 14px; list-style: none; margin: 0 0 var(--space-3); padding: 0; }
.footer-social a {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--color-on-dark);
  color: var(--color-navy);
  justify-content: center;
  transition: transform 200ms ease;
}
.footer-social a:hover { transform: translateY(-2px); text-decoration: none; }
.footer-social img { width: 20px; height: 20px; object-fit: contain; }

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  margin-top: var(--space-5);
  padding-top: var(--space-3);
  border-top: 1px solid rgba(255, 255, 255, 0.24);
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.85rem;
}
.footer-tagline { letter-spacing: 0.08em; text-transform: uppercase; }

/* ==========================================================================
   Homepage — design refresh (see design-reference/TMA Homepage.dc.html)
   ========================================================================== */

.dna-section { position: relative; padding-bottom: 0; }
/* Kept as h2 (the hero above already has the page's one h1) but sized up to
   read as a bold statement headline, per client request ("looks too small"). */
.dna-heading { color: var(--color-navy); font-size: clamp(2.25rem, 4.5vw, 3.75rem); }
/* Same documented WCAG AA exception as .dna-italic (see tests/a11y.spec.js)
   — vivid brand orange per client direction, even smaller than large-text
   here so the gap is bigger (2.43:1 vs. the 4.5:1 small-text minimum). */
.dna-eyebrow { color: var(--color-accent); }
/* Vivid brand orange per explicit client direction, matching the source
   design exactly — accepted as a documented WCAG AA exception (2.43:1 on
   white, fails the 3:1 large-text minimum) rather than the site's usual
   AA-safe --color-accent-text-on-light. See tests/a11y.spec.js. */
.dna-italic { font-style: italic; color: var(--color-accent); }

/* Cards deliberately straddle the white section above and the navy strip
   below (matches the source design) — the backdrop covers only the
   bottom half of the wrap, and the cards sit on top spanning both. */
.dna-cards-wrap { position: relative; margin-top: var(--space-6); }
.dna-cards-backdrop { position: absolute; left: 0; right: 0; bottom: 0; height: 50%; background: var(--color-navy); }
/* Dedicated grid (not the shared .grid--3) — that one collapses to fewer
   columns via auto-fit before the true mobile breakpoint, which dropped the
   3rd card onto its own row on tablet-ish widths. Stay 3-across at every
   width down to 767px, where it switches to a single stacked column. */
.dna-cards {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin-top: 0;
  padding-block: var(--space-4);
}
@media (max-width: 767px) {
  .dna-cards { grid-template-columns: 1fr; }
}
/* Source design uses a fixed 330px card height (not the 4:3 ratio the rest
   of the site's .card img uses) — override it here so these 3 photos read
   as the large, deliberate feature images the design intends. */
/* The real cause of the "cards look too far apart" complaint: this figure
   had no explicit width, and a grid item containing a percentage-width
   replaced element (the img) doesn't reliably stretch to fill its column
   — the browser falls back to sizing the img from its own intrinsic
   aspect ratio instead, so each card rendered ~80px narrower than its
   374px column and just sat there with dead space on either side (not
   an actual `gap` problem — gap was already tight at 14px). Forcing
   width:100% here makes the figure genuinely fill the column. */
.dna-card { width: 100%; padding: 0; border: none; border-radius: 16px; box-shadow: 0 10px 30px rgba(0, 16, 52, .22); overflow: hidden; }
.dna-card img,
.dna-card picture img {
  aspect-ratio: auto;
  height: clamp(220px, 24vw, 330px);
  width: 100%;
  object-fit: cover;
  transition: transform 500ms cubic-bezier(.2, .8, .2, 1);
}
.dna-card:hover img,
.dna-card:hover picture img { transform: scale(1.12); }

.solve-headline { font-size: clamp(1.75rem, 4.5vw, 2.75rem); }
.solve-word {
  display: inline-block;
  color: var(--color-accent);
  background-image: linear-gradient(var(--color-accent), var(--color-accent));
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 0% 100%;
  padding-inline: 0.15em;
  margin-inline: -0.15em;
  animation: wordHighlight 3.6s cubic-bezier(.4, 0, .2, 1) infinite;
}
@keyframes wordHighlight {
  0% { background-size: 0% 100%; color: var(--color-accent); }
  6%, 22% { background-size: 100% 100%; color: var(--color-navy); }
  30%, 100% { background-size: 0% 100%; color: var(--color-accent); }
}
.solve-headline__rest { color: var(--color-on-dark); font-weight: normal; }

.our-work-section { background: linear-gradient(180deg, var(--color-accent) 0%, #ff9526 55%, #ffb765 100%); padding-bottom: 0; }
.our-work-eyebrow { color: var(--color-navy); text-transform: none; letter-spacing: normal; font-size: clamp(1.75rem, 4.5vw, 2.75rem); font-weight: 800; }
.our-work-headline { margin: 0; font-size: clamp(1.75rem, 4.5vw, 2.75rem); color: var(--color-on-dark); }
/* Typewriter reveal — text clips in character-by-character, holds, then
   clips back out, on loop; a blinking caret bar tracks the reveal edge.
   Neutralized under prefers-reduced-motion by the site's global reset
   (shows the full line immediately, no motion). */
.typewriter {
  position: relative;
  display: inline-block;
  white-space: nowrap;
  vertical-align: bottom;
}
.typewriter__text {
  display: inline-block;
  animation: typeClip 9s steps(37, end) infinite;
}
.typewriter__caret {
  position: absolute;
  top: 12%;
  bottom: 12%;
  width: 3px;
  background: currentColor;
  animation: typeCaret 9s steps(37, end) infinite, caretBlink 900ms step-end infinite;
}
@keyframes typeClip {
  0%   { clip-path: inset(0 100% 0 0); }
  30%  { clip-path: inset(0 0 0 0); }
  88%  { clip-path: inset(0 0 0 0); }
  97%  { clip-path: inset(0 100% 0 0); }
  100% { clip-path: inset(0 100% 0 0); }
}
@keyframes typeCaret {
  0%   { left: 0; }
  30%  { left: 100%; }
  88%  { left: 100%; }
  97%  { left: 0; }
  100% { left: 0; }
}
@keyframes caretBlink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
/* The nowrap + character-clip reveal only works as a single line — on a
   narrow phone the full 37-character headline can't fit at any legible
   font-size, and nowrap was forcing the whole page to scroll sideways to
   show it (this is what "have to drag the screen to see the menu" turned
   out to be: not a nav bug, the whole page was wider than the viewport).
   Below the same mobile breakpoint used elsewhere in this file, just show
   the full line as normal wrapping static text instead. */
@media (max-width: 767px) {
  .typewriter { white-space: normal; }
  .typewriter__text { animation: none; }
  .typewriter__caret { display: none; }
}

.reel {
  position: relative;
  width: 100%;
  height: min(74vh, 620px);
  min-height: 420px;
  overflow: hidden;
  background: var(--color-navy-dark);
  margin-top: var(--space-4);
}
/* Slides sit side by side and the track itself translates — a real slide
   transition (homepage.js sets the transform), not a cross-fade. */
.reel__track {
  position: relative;
  display: flex;
  width: 100%;
  height: 100%;
  transition: transform 700ms cubic-bezier(.2, .8, .2, 1);
}
.reel__slide { position: relative; flex: 0 0 100%; height: 100%; }
.reel__slide-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.reel__slide-scrim {
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(0, 20, 72, .9) 0%, rgba(0, 20, 72, .68) 44%, rgba(0, 20, 72, .16) 78%, rgba(0, 20, 72, .06) 100%);
}
.reel__overlay {
  position: absolute; inset: 0; z-index: 2;
  display: flex; flex-direction: column; justify-content: flex-end;
  gap: var(--space-3);
  padding: 0 clamp(24px, 6vw, 92px) clamp(32px, 5vw, 60px);
  box-sizing: border-box;
  pointer-events: none;
}
/* Stats/text panels cross-fade+rise on slide change (homepage.js swaps
   .is-active) — absolutely positioned so the swap never shifts layout. */
.reel__stats { position: relative; min-height: clamp(76px, 8vw, 118px); }
.reel__text { position: relative; }
.reel__stats-group,
.reel__text-group {
  position: absolute;
  inset: 0 auto auto 0;
  width: 100%;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 380ms ease, transform 380ms ease;
  pointer-events: none;
}
.reel__stats-group { display: flex; flex-wrap: wrap; gap: clamp(24px, 5vw, 72px); }
.reel__stats-group.is-active,
.reel__text-group.is-active {
  position: relative;
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.reel__stat-label { color: rgba(255, 255, 255, .82); font-size: clamp(14px, 1.2vw, 18px); }
.reel__stat-value { color: var(--color-accent); font-size: clamp(1.95rem, 4.5vw, 3.25rem); font-weight: 800; line-height: 1.05; }
.reel__title { margin: 0; color: var(--color-on-dark); font-weight: 700; font-size: clamp(18px, 1.6vw, 24px); line-height: 1.5; max-width: 46ch; }
.reel__dots { display: flex; gap: 10px; margin-top: 20px; pointer-events: auto; }
.reel__dot {
  position: relative;
  width: 12px; height: 4px; padding: 0; border: none; border-radius: 2px;
  background: rgba(255, 255, 255, .35);
  cursor: pointer;
  transition: width 320ms ease, background 320ms ease;
}
/* Visual pip stays 4px tall (matches design); invisible pseudo-element
   pads the actual hit area out to the site's 44px touch-target minimum. */
.reel__dot::before {
  content: "";
  position: absolute;
  inset: -20px -4px;
}
.reel__dot.is-active { width: 34px; background: var(--color-accent); }
.reel__arrow {
  position: absolute; z-index: 3; top: 50%; transform: translateY(-50%);
  width: 52px; height: 52px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(255, 255, 255, .4); border-radius: 50%;
  background: rgba(0, 20, 72, .32);
  cursor: pointer;
  transition: background 200ms ease, border-color 200ms ease;
}
.reel__arrow:hover { background: var(--color-accent); border-color: var(--color-accent); }
.reel__arrow--prev { left: clamp(12px, 2.4vw, 30px); }
.reel__arrow--next { right: clamp(12px, 2.4vw, 30px); }

.brands-heading { text-align: center; text-transform: uppercase; font-size: clamp(1.5rem, 3.5vw, 2.5rem); color: var(--color-navy); }
.brands-grid {
  list-style: none;
  margin: var(--space-4) 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}
.brands-grid__item {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 20%;
  max-width: 20%;
  height: min(76px, calc(3.5vw + 27px));
  box-sizing: border-box;
  padding: 14px 8px;
}
.brands-grid__item img {
  max-width: min(150px, 76%);
  max-height: min(44px, calc(3.5vw - 5px));
  width: auto;
  height: auto;
  object-fit: contain;
  transition: transform 200ms cubic-bezier(.2, .8, .2, 1);
}
.brands-grid__item img:hover { transform: scale(1.14); }

.brands-marquee { display: none; }
@media (max-width: 767px) {
  .brands-grid { display: none; }
  .brands-marquee { display: block; margin-top: var(--space-4); }
}

.mobius-band {
  position: relative;
  height: clamp(360px, 42vw, 640px);
  background: linear-gradient(160deg, var(--color-navy) 0%, #001034 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  text-align: center;
  padding-inline: var(--space-3);
}
.mobius-band__mark {
  position: absolute;
  left: 50%; top: 50%;
  width: min(70vw, 620px);
  transform: translate(-50%, -50%);
  opacity: 0.12;
  pointer-events: none;
  transition: opacity 500ms ease;
}
.mobius-band__mark img { width: 100%; height: auto; }
/* The real 3D strip (mobius-mount.js) renders into this layer; the static
   faded mark above is the fallback until (or unless) it mounts. */
.mobius-band__3d {
  position: absolute;
  inset: 0;
  z-index: 1;
}
.mobius-band--3d-ready .mobius-band__mark { opacity: 0; }
.mobius-band__text {
  z-index: 2;
  position: relative;
  margin: 0;
  max-width: 900px;
  color: var(--color-on-dark);
  text-transform: uppercase;
  font-size: clamp(2.25rem, 4.5vw, 3.75rem);
  font-weight: 800;
  line-height: 1.15;
}
.mobius-band__text span {
  display: block;
  margin-top: 14px;
  text-transform: none;
  color: var(--color-accent);
  font-size: clamp(0.9rem, 1.25vw, 1.15rem);
  font-weight: normal;
  letter-spacing: 0.06em;
}

.project-cta { text-align: center; }
.project-cta h2 { color: var(--color-navy); text-transform: uppercase; }

@media (prefers-reduced-motion: reduce) {
  .solve-word { animation: none; background-size: 100% 100%; color: var(--color-navy); }
}

/* ==========================================================================
   Draft banner (Insights preview pages)
   ========================================================================== */

.draft-banner {
  background: #fff3cd;
  color: #664d03;
  border: 1px solid #ffe69c;
  padding: var(--space-2) var(--space-3);
  font-weight: 700;
  text-align: center;
}

/* Contact page: confirms which role a candidate is applying for, set by
   contact-form.js from the ?role= param on the "Apply" link (QA ISSUE-001). */
.info-banner {
  background: var(--color-bg-light);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: var(--space-2) var(--space-3);
  font-weight: 600;
  margin-bottom: var(--space-3);
}
.info-banner[hidden] { display: none; }

/* ==========================================================================
   About page
   ========================================================================== */

.about-hero {
  position: relative;
  min-height: 560px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  background: var(--color-navy);
  color: var(--color-on-dark);
  overflow: hidden;
  padding-top: var(--space-7);
}
.about-hero .eyebrow { color: var(--color-accent); }
.about-hero__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 32, 129, .88) 0%, rgba(0, 32, 129, .78) 45%, rgba(0, 32, 129, .9) 72%, rgba(255, 133, 0, .9) 100%);
}
.about-hero__content {
  position: relative;
  z-index: 1;
  max-width: var(--max-width);
  margin-inline: auto;
  width: 100%;
  padding-inline: var(--space-3);
  padding-bottom: var(--space-6);
}
.about-hero__headline { margin: var(--space-3) 0 var(--space-5); max-width: 900px; font-size: clamp(2.5rem, 6.5vw, 5.5rem); line-height: 1.03; letter-spacing: -0.02em; text-transform: uppercase; }
/* Shared staggered word-highlight sweep — an orange box fills in behind
   each word in turn (animation-delay staggers them), used on the About
   hero ("Born in Asia. Built for the world.") and the homepage hero. */
.word-highlight {
  display: inline-block;
  color: #fff;
  background-image: linear-gradient(var(--color-accent), var(--color-accent));
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 0% 100%;
  padding-inline: .15em;
  margin-inline: -.15em;
  animation: wordHighlight 4.8s cubic-bezier(.4, 0, .2, 1) infinite;
}
@keyframes wordHighlight {
  0% { background-size: 0% 100%; color: #fff; }
  5%, 16% { background-size: 100% 100%; color: var(--color-navy); }
  22%, 100% { background-size: 0% 100%; color: #fff; }
}
.about-hero__intro {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding-top: var(--space-4);
  border-top: 1px solid rgba(255, 255, 255, .3);
}
.about-hero__intro svg { flex: 0 0 auto; margin-top: .2em; }
.about-hero__intro p { margin: 0; max-width: 660px; color: #fff; }

.about-metrics {
  background-color: var(--color-white);
  background-image: linear-gradient(0deg, var(--color-navy) 0%, var(--color-navy) 10%, rgba(0, 32, 129, 0) 60%);
  padding-block: var(--space-7) var(--space-6);
}
.about-metrics__grid { margin-top: var(--space-6); }
.about-section-heading { color: var(--color-navy); text-transform: uppercase; }
.about-metric { display: flex; flex-direction: column; gap: var(--space-1); padding-top: var(--space-3); border-top: 1px solid rgba(255, 255, 255, .55); }
.about-metric__row { display: flex; align-items: baseline; gap: var(--space-2); flex-wrap: wrap; }
.about-metric__value { color: var(--color-accent); font-size: clamp(2.1rem, 3vw, 2.9rem); font-weight: 800; letter-spacing: -1px; }
.about-metric__label { color: #fff; font-size: .9rem; }
.about-metric__note { margin: 0; color: #fff; font-size: .9rem; }

.about-pillars__eyebrow { display: block; padding-bottom: var(--space-2); border-bottom: 1px solid var(--color-border); margin-bottom: var(--space-4); color: var(--color-accent); }
.about-pillars { display: flex; flex-direction: column; gap: var(--space-4); margin-top: var(--space-4); }
.about-pillars__item { display: flex; gap: var(--space-3); align-items: flex-start; }
.about-pillars__dot { flex: 0 0 auto; width: 14px; height: 14px; margin-top: .4em; background: var(--color-accent); }
.about-pillars-media { position: relative; height: 520px; background: var(--color-bg-light); overflow: hidden; }
.about-pillars-media__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.about-founder {
  background-color: var(--color-navy);
  background-image: radial-gradient(ellipse 82% 78% at -4% 110%, rgba(255, 133, 0, .9) 0%, rgba(255, 133, 0, .5) 32%, rgba(255, 133, 0, .18) 58%, rgba(0, 32, 129, 0) 82%);
  color: var(--color-on-dark);
  overflow: hidden;
}
/* Grid (not .container) on purpose — the portrait needs to bleed flush to
   every edge of the section, not sit inside the site's usual gutter or the
   section's own padding. The vertical breathing room the section used to
   get from padding-block lives on .about-founder__text instead, and
   align-items:stretch (the grid default) makes the image column's height
   track that padded text height — so the photo fills edge-to-edge on all
   four sides while the heading still lines up with its top. */
/* A photo and a paragraph never reliably match heights at every viewport —
   forcing the columns to the same width didn't help (the text still needed
   more room than the image to avoid heavy wrapping). align-items:center
   is what actually fixes the look: whatever height difference is left
   splits evenly above/below instead of dumping it as one lump under the
   (shorter) image. */
.about-founder__grid {
  display: grid;
  grid-template-columns: minmax(0, 570px) minmax(0, 700px);
  justify-content: center;
  align-items: center;
  gap: var(--space-5);
}
/* A fixed aspect-ratio (not align-items:stretch to the text column) is what
   keeps the crop predictable — stretching to match the text's height meant
   a longer line-wrap on a wider/narrower screen silently forced object-fit:
   cover to zoom in harder to fill that taller box. 4/5 is close to the
   source photo's own ~1.1:1, so cover only needs a moderate side-crop. */
/* No cropping: the image sits in normal flow at its full width and lets
   height follow the source photo's own ratio, so the shoulders never get
   cut off at the sides — it just renders shorter instead. padding-top is
   real reserved space (not a crop) for headroom above the head. */
.about-founder__portrait-wrap { padding-top: 32px; }
.about-founder__portrait-wrap img,
.about-founder__portrait-wrap picture img { width: 100%; height: auto; display: block; }
.about-founder__text { max-width: 640px; padding: var(--space-5) var(--space-3) var(--space-5) var(--space-4); }
.about-founder__heading { color: var(--color-accent); text-transform: uppercase; }
.about-founder__quote { max-width: 560px; color: #fff; font-size: 1.2rem; line-height: 1.85; }
/* align-items:flex-start stops these children being stretched to the full
   column width by the default flex cross-axis stretch — without it the
   LinkedIn link's hover underline (sized to its own box, not its text)
   drew all the way across the column. */
.about-founder__meta { display: flex; flex-direction: column; align-items: flex-start; gap: .4rem; padding-top: var(--space-3); border-top: 1px solid rgba(255, 255, 255, .35); }
.about-founder__name { font-size: 1.35rem; font-weight: 800; }
.about-founder__role { font-weight: 700; }
.about-founder__org { color: rgba(255, 255, 255, .8); }
.about-founder__linkedin { margin-top: .5rem; color: var(--color-accent); font-size: .9rem; font-weight: 700; letter-spacing: .08em; text-decoration: none; }
.about-founder__linkedin:hover { color: #fff; }
@media (max-width: 767px) {
  .about-founder__grid { grid-template-columns: 1fr; }
  .about-founder__text { max-width: none; padding: var(--space-6) var(--space-3); }
}

.about-team-grid { display: grid; gap: var(--space-3); grid-template-columns: repeat(2, 1fr); }
.about-team__header { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-4); }
.about-team__join { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--color-navy); font-weight: 700; text-decoration: none; }
.about-team__join:hover { color: var(--color-accent); }
.about-team__photo { position: relative; aspect-ratio: 3 / 4; background: var(--color-bg-light); overflow: hidden; border-radius: 10px; }
.about-team__photo img,
.about-team__photo picture img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; aspect-ratio: auto; border-radius: 10px; transition: transform 450ms cubic-bezier(.2, .8, .2, 1); }
.about-team__photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 100% 100%, rgba(255, 133, 0, .65) 0%, rgba(255, 133, 0, 0) 62%);
  opacity: 0;
  transition: opacity 450ms ease;
  pointer-events: none;
}
.about-team__photo:hover img,
.about-team__photo:hover picture img { transform: scale(1.08); }
.about-team__photo:hover::after { opacity: 1; }
.about-team__name { display: block; margin-top: var(--space-2); color: var(--color-navy); font-weight: 700; line-height: 1.3; }
.about-team__role { display: block; margin-top: .2rem; color: var(--color-text-muted); font-size: .95rem; line-height: 1.4; }
@media (min-width: 640px) { .about-team-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .about-team-grid { grid-template-columns: repeat(5, 1fr); } }

.about-hello { text-align: center; }
.about-hello__eyebrow { color: var(--color-accent); }
/* display:block (not inline-block) so this always drops to its own line
   below the eyebrow above it, regardless of how much horizontal room the
   eyebrow's inline-block box leaves on wide viewports. */
.about-hello__link { display: block; text-align: center; color: var(--color-navy); font-size: clamp(3rem, 8.4vw, 8rem); line-height: 1.05; font-weight: 800; letter-spacing: -.03em; text-decoration: none; }
.about-hello__link:hover { color: var(--color-accent); }
.about-hello__say { display: block; }
.about-hello__rotator { position: relative; display: block; height: 1.1em; overflow: hidden; }
.about-hello__word {
  position: absolute;
  inset-inline: 0;
  top: 0;
  opacity: 0;
  animation: aboutHelloRotate 13.2s ease-in-out infinite;
}
@keyframes aboutHelloRotate {
  0% { opacity: 0; }
  3% { opacity: 1; }
  11% { opacity: 1; }
  14% { opacity: 0; }
  100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .word-highlight, .about-hello__word { animation: none !important; }
  .word-highlight { color: #fff; }
  .about-hello__word { opacity: 0; }
  .about-hello__word:first-child { opacity: 1; }
}

/* ==========================================================================
   Careers page
   ========================================================================== */

.careers-hero { position: relative; background: var(--color-navy); overflow: hidden; }
.careers-hero__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 32, 129, .78) 0%, rgba(0, 32, 129, .6) 60%, rgba(0, 32, 129, .72) 100%);
}
.careers-hero__content {
  position: relative;
  z-index: 1;
  max-width: var(--max-width);
  margin-inline: auto;
  padding: var(--space-7) var(--space-3) var(--space-7);
}
.careers-hero__title { margin: 0 0 var(--space-4); color: #fff; font-size: clamp(2.5rem, 6.5vw, 5.5rem); line-height: 1.06; letter-spacing: -0.02em; text-transform: uppercase; }
.careers-hero__card { margin-top: var(--space-5); max-width: 900px; background: #fff; padding: var(--space-5) var(--space-4); }
.careers-hero__lead { color: var(--color-navy); font-size: 1.3rem; line-height: 1.7; font-weight: 600; }

.careers-eyebrow { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-4); }
.careers-eyebrow span:first-child { color: var(--color-navy); font-size: 1.35rem; font-style: italic; letter-spacing: .04em; }
.careers-eyebrow__rule { display: block; width: 96px; height: 3px; background: var(--color-accent); }
.careers-heading { color: var(--color-navy); font-size: 1.9rem; line-height: 1.25; }

/* ==========================================================================
   Open Roles page
   ========================================================================== */

.roles-hero { background: var(--color-navy); padding-block: var(--space-6); }
.roles-search {
  display: block;
  width: 100%;
  max-width: 640px;
  margin: var(--space-3) 0 var(--space-4);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  font-size: 1rem;
  font-family: inherit;
}
.roles-search:focus { outline: var(--focus-ring); outline-offset: 2px; }
.roles-stat {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2);
  padding: var(--space-4) 0;
  margin: var(--space-4) 0;
  border-block: 1px solid var(--color-border);
}
.roles-stat__value { color: var(--color-accent-text-on-light); font-size: clamp(2.5rem, 5vw, 3.5rem); font-weight: 800; }
.roles-stat__label { color: var(--color-text-muted); font-size: 1.05rem; }

/* ==========================================================================
   Role detail page
   ========================================================================== */

.role-body-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 320px); gap: var(--space-6); align-items: start; margin-top: var(--space-6); }
.role-article { max-width: 720px; }
.role-article h2 { color: var(--color-navy); font-size: clamp(1.5rem, 3vw, 2rem); margin: var(--space-6) 0 var(--space-3); }
.role-article h2:first-child { margin-top: 0; }
.role-article p { font-size: 1.05rem; line-height: 1.8; }
.role-facts { margin: var(--space-4) 0; padding: var(--space-3) 0; border-block: 1px solid var(--color-border); display: flex; flex-direction: column; gap: var(--space-2); }
.role-facts dt { color: var(--color-accent-text-on-light); font-size: .8rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; display: inline-block; min-width: 160px; }
.role-facts dd { margin: 0; display: inline; color: var(--color-navy); font-weight: 600; }
.role-requirements { padding-left: 1.25em; display: flex; flex-direction: column; gap: var(--space-2); }
.role-requirements li { font-size: 1.05rem; line-height: 1.6; }

.role-apply-card {
  position: sticky;
  top: 110px;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-white);
}
.role-apply-card h3 { color: var(--color-navy); margin: 0; }
.role-apply-card__btn { display: flex; align-items: center; justify-content: center; gap: .5em; width: 100%; }
.role-apply-card__linkedin-icon { width: 1.1em; height: 1.1em; border-radius: 2px; }

@media (max-width: 860px) {
  .role-body-grid { grid-template-columns: 1fr; }
  .role-apply-card { position: static; }
}

/* ==========================================================================
   Role apply form
   ========================================================================== */

#apply {
  scroll-margin-top: 110px;
  background: linear-gradient(0deg, var(--color-accent) 0%, #fff 85%);
}

/* Light card, rounded pill-style fields — this form intentionally departs
   from the site's navy contact-form card per a supplied reference design. */
.role-apply-form-card {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: 14px;
  padding: var(--space-5);
}

.role-apply-success { text-align: center; }
.role-apply-success h2 { color: var(--color-navy); margin-top: 0; }

.role-apply-form .form-field label {
  font-weight: 700;
  font-size: 0.95rem;
}

/* 2-column layout once there's room past tablet — short fields (name,
   LinkedIn, personal site) pair up side by side; email, cover letter, CV
   upload and the submit row stay full-width via .form-field--full. */
@media (min-width: 768px) {
  .role-apply-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 var(--space-3);
  }
  .role-apply-form .form-field--full,
  .role-apply-form > p,
  .role-apply-form > button {
    grid-column: 1 / -1;
  }
}
.role-apply-form input[type="text"],
.role-apply-form input[type="email"],
.role-apply-form input[type="url"],
.role-apply-form textarea,
.role-apply-form .file-drop,
.role-apply-form .input-prefix-group {
  border-radius: 10px;
  border-color: var(--color-border);
}
.role-apply-form input[type="text"]::placeholder,
.role-apply-form input[type="email"]::placeholder,
.role-apply-form textarea::placeholder {
  color: #a6a9b8;
}

.input-prefix-group {
  display: flex;
  align-items: stretch;
  border: 1px solid var(--color-border);
  overflow: hidden;
  background: var(--color-white);
}
.input-prefix-group:focus-within { outline: var(--focus-ring); outline-offset: 2px; }
.input-prefix-group__prefix {
  display: flex;
  align-items: center;
  padding: 0 0.9em;
  color: var(--color-text-muted);
  background: var(--color-bg-light);
  border-right: 1px solid var(--color-border);
  white-space: nowrap;
  font-size: 0.95rem;
}
.input-prefix-group input {
  flex: 1;
  min-width: 0;
  border: none !important;
  border-radius: 0 !important;
  outline: none;
}
.input-prefix-group input:focus { outline: none; }

p.form-error {
  margin: 0.4em 0 0;
  font-size: 0.875rem;
  font-weight: 600;
  color: #d13c3c;
}
.form-error[hidden] { display: none; }

.form-field input.is-invalid,
.form-field textarea.is-invalid {
  border-color: #d13c3c;
}

.file-drop {
  position: relative;
  border: 2px dashed var(--color-border);
  border-radius: var(--radius);
  padding: var(--space-4);
  text-align: center;
  background: var(--color-bg-light);
  transition: border-color 150ms ease, background 150ms ease;
}
.file-drop:focus-visible { outline: var(--focus-ring); outline-offset: 4px; }
.file-drop.is-dragover { border-color: var(--color-accent); background: rgba(255, 133, 0, 0.08); }
.file-drop.is-invalid { border-color: #d13c3c; }
.file-drop__input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
  z-index: 1;
}
.file-drop__prompt { pointer-events: none; }
.file-drop__icon { margin: 0 auto var(--space-2); color: var(--color-text-muted); display: block; }
.file-drop__prompt p { margin: 0; color: var(--color-text); }
.file-drop__browse { text-decoration: underline; text-underline-offset: 3px; color: var(--color-accent-text-on-light); }
.file-drop__hint { margin-top: 0.4em !important; font-size: 0.85rem; color: var(--color-text-muted) !important; }
.file-drop__selected {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-weight: 600;
  color: var(--color-text);
}
.file-drop__remove {
  position: relative;
  z-index: 2;
  border: none;
  background: var(--color-border);
  color: var(--color-text);
  width: 24px;
  height: 24px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
  flex-shrink: 0;
}

/* ==========================================================================
   Contact page
   ========================================================================== */

/* Form-first: the enquiry form sits beside the headline in the first screen
   rather than below a 480px map, so the page's primary action needs no
   scroll. Replaces the earlier hero-map layout, whose absolutely positioned
   HQ card also overflowed its fixed-height frame on mobile and painted over
   the heading and the first two form fields. */
.contact-hero {
  background:
    radial-gradient(circle at 12% 15%, rgba(255, 133, 0, .18) 0%, transparent 46%),
    radial-gradient(circle at 90% 85%, rgba(20, 60, 170, .85) 0%, transparent 55%),
    var(--color-navy);
  color: var(--color-on-dark);
  padding-block: var(--space-7);
}
.contact-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: var(--space-6);
  /* Centred, not top-aligned: the form card is much taller than the
     headline column, and aligning to the top left a large dead space under
     the contact details rather than balanced margins either side. */
  align-items: center;
}
.contact-hero__eyebrow { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-3); }
.contact-hero__eyebrow span:first-child { color: var(--color-accent); font-size: 1.4rem; font-style: italic; letter-spacing: .04em; }
.contact-hero__rule { display: block; width: 96px; height: 3px; background: var(--color-accent); }
.contact-hero__title {
  color: var(--color-on-dark);
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  line-height: 1.06;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  margin-bottom: var(--space-3);
}
.contact-hero__lead { color: rgba(255, 255, 255, .8); font-size: 1.15rem; line-height: 1.7; max-width: 34em; }

/* The direct email/phone route out of the form. Keeps the .contact-fallback
   class the a11y and contact-form specs assert on, but the light-gray box it
   used to need is gone — it sits on navy now, so it reads as white text over
   a rule instead of a card inside a card. */
.contact-fallback {
  background: none;
  margin-top: var(--space-5);
  padding: var(--space-4) 0 0;
  border-top: 1px solid rgba(255, 255, 255, .25);
}
.contact-fallback__label {
  color: var(--color-accent);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  font-size: .8rem;
  margin-bottom: var(--space-2);
}
.contact-direct__row { display: flex; align-items: center; gap: .7em; margin-bottom: .5em; font-size: 1.05rem; }
.contact-direct__icon { color: var(--color-accent); font-size: 1.1em; line-height: 1; }
.contact-fallback p { color: var(--color-on-dark); }
.contact-fallback a { color: var(--color-on-dark); font-weight: 600; }
.contact-fallback a:hover { color: var(--color-accent); }

.contact-social {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-3);
  list-style: none;
  margin: var(--space-3) 0 0;
  padding: 0;
  font-size: .9rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.contact-social a { color: rgba(255, 255, 255, .75); }
.contact-social a:hover { color: var(--color-accent); }

.contact-form-card {
  background: var(--color-white);
  border-radius: 14px;
  padding: var(--space-5);
  box-shadow: 0 24px 60px rgba(0, 10, 44, .38);
  color: var(--color-text);
}
.contact-form-card .form-field label,
.contact-form-card legend { font-size: .95rem; }
.contact-form-card input[type="text"],
.contact-form-card input[type="email"],
.contact-form-card select,
.contact-form-card textarea { border-radius: 10px; }
.contact-form-card textarea::placeholder { color: #a6a9b8; }
.contact-form__consent { font-size: .85rem; margin-bottom: var(--space-3); }
.service-pills-field { border: none; padding: 0; min-width: 0; }
.service-pills-field legend { font-weight: 700; margin-bottom: .6em; padding: 0; }

/* Two columns once there's room past tablet — name/email and company/budget
   pair up; everything wide (services, message, consent, submit) spans both
   via .form-field--full or by being a direct non-.form-field child. */
@media (min-width: 768px) {
  .contact-form { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--space-3); }
  .contact-form .form-field--full,
  .contact-form > p,
  .contact-form > button { grid-column: 1 / -1; }
  /* A grid item stretches by default — without this the submit button ran
     the full width of the card, which reads as a banner rather than a
     button and matches nothing else on the site. */
  .contact-form > button { justify-self: start; }
}

/* Selectable pills instead of raw browser checkboxes. The input keeps its
   box and its place in the tab order (opacity:0, not display:none) so
   keyboard and screen-reader behaviour is exactly a checkbox group's. */
.service-pills { display: flex; flex-wrap: wrap; gap: .5rem; }
.service-pill { position: relative; display: inline-flex; margin: 0; font-weight: 400; }
.service-pill input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.service-pill span {
  display: block;
  padding: .55em 1.1em;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  font-size: .9rem;
  font-weight: 600;
  color: var(--color-text-muted);
  transition: background 160ms ease, border-color 160ms ease, color 160ms ease;
}
.service-pill:hover span { border-color: var(--color-accent); color: var(--color-text); }
.service-pill input:checked + span {
  background: var(--color-navy);
  border-color: var(--color-navy);
  color: var(--color-on-dark);
}
.service-pill input:focus-visible + span { outline: var(--focus-ring); outline-offset: 2px; }

/* Replaces the form card in place on a successful send — same box, so the
   column doesn't collapse and the page doesn't jump. */
.contact-success { text-align: center; }
.contact-success h2 { color: var(--color-navy); margin-top: 0; }
.contact-success .btn { margin-top: var(--space-2); border-color: var(--color-navy); color: var(--color-navy); }

.contact-offices { background: var(--color-bg-light); padding-block: var(--space-6); }
.contact-offices__heading { color: var(--color-navy); margin-bottom: var(--space-4); }
.contact-offices__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--space-3); }
.office-card {
  display: flex;
  flex-direction: column;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-top: 4px solid var(--color-accent);
  border-radius: 10px;
  padding: var(--space-4);
  overflow: hidden;
}
.office-card h3 { color: var(--color-navy); margin-bottom: var(--space-3); }
.office-card p { font-size: .95rem; }
.office-card__img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 5 / 6;
  object-fit: cover;
  border-radius: 8px;
  background: var(--color-bg-light);
  box-shadow: 0 16px 32px rgba(0, 10, 44, .18);
  transition: transform 350ms cubic-bezier(.2, .8, .2, 1);
}
.office-card:hover .office-card__img { transform: scale(1.03); }
.contact-hq-card__label {
  display: block;
  color: var(--color-accent-text-on-light);
  font-weight: 700;
  text-transform: uppercase;
  font-size: .8rem;
  letter-spacing: .06em;
  margin-bottom: .4rem;
}

/* Slim band, not a hero. Nothing is positioned over it, so there is no
   fixed-height box for an overflowing child to escape from. */
.contact-map-band { background: var(--color-navy); }
.contact-map-band__frame { height: 340px; }
.contact-map-band iframe { width: 100%; height: 100%; border: 0; display: block; }

@media (max-width: 900px) {
  .contact-hero__grid { grid-template-columns: 1fr; gap: var(--space-5); }
}
@media (max-width: 600px) {
  .contact-hero { padding-block: var(--space-5); }
  .contact-form-card { padding: var(--space-4); }
  .contact-map-band__frame { height: 240px; }
}

/* ==========================================================================
   Services page
   ========================================================================== */

.services-hero { padding-block: var(--space-7); }
.services-hero__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .9fr); gap: var(--space-6); align-items: start; }
.services-eyebrow { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-3); }
.services-eyebrow span:first-child { color: var(--color-navy); font-size: 1.4rem; font-style: italic; letter-spacing: .04em; }
.services-eyebrow__rule { display: block; width: 96px; height: 3px; background: var(--color-accent); }
.services-hero__title { color: var(--color-navy); font-size: clamp(2.5rem, 6.5vw, 5.5rem); line-height: 1.06; letter-spacing: -0.02em; text-transform: uppercase; margin-bottom: var(--space-4); }
.services-hero__lead { max-width: 640px; font-size: 1.2rem; line-height: 1.7; }
.services-hero__media { position: relative; height: 720px; border-radius: 14px; overflow: hidden; box-shadow: 0 14px 40px rgba(0, 16, 52, .18); }
.services-hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.services-catalogue { background: var(--color-navy); padding-block: var(--space-7); overflow: hidden; }
.services-catalogue__heading { margin: 0 0 var(--space-5); text-align: center; color: #fff; font-size: clamp(1.75rem, 3.5vw, 2.75rem); letter-spacing: -0.02em; }
.services-tabs-wrap { border-bottom: 1px solid rgba(255, 255, 255, .22); }
.services-tabs { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); max-width: var(--max-width); margin-inline: auto; padding-inline: var(--space-3); }
.services-tab {
  background: transparent;
  border: none;
  border-bottom: 3px solid transparent;
  margin-bottom: -1px;
  padding: 0 0 var(--space-2);
  color: rgba(255, 255, 255, .6);
  font-family: inherit;
  font-size: .95rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 200ms ease;
}
.services-tab.is-active { color: var(--color-accent); border-bottom-color: var(--color-accent); }
.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--space-4);
  margin-top: var(--space-5);
}
.service-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  background: #fff;
  border-radius: 10px;
  border-top: 4px solid var(--color-accent);
  padding: var(--space-4);
  box-shadow: 0 14px 34px rgba(0, 8, 40, .28);
}
/* Author-stylesheet display:flex above otherwise wins over the browser's
   own [hidden]{display:none} UA-stylesheet rule (author origin beats user
   agent regardless of matching specificity) — without this, JS setting
   .hidden on a filtered-out card had no visible effect. */
.service-card[hidden] { display: none; }
.service-card__category { margin-bottom: 0; }
.service-card__title { margin: 0; color: var(--color-navy); font-size: 1.5rem; line-height: 1.18; letter-spacing: -0.01em; }
.service-card__copy { margin: 0; color: var(--color-text-muted); font-size: .95rem; line-height: 1.7; }
.service-card__actions { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); margin-top: auto; padding-top: var(--space-1); }
.service-card__link { color: var(--color-navy); font-size: .95rem; font-weight: 700; text-decoration: none; }
.service-card__link:hover { color: var(--color-accent-text-on-light); }

.services-brands { padding-block: var(--space-6); overflow: hidden; }
.services-brands__header { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-5); }
.services-brands__header span:first-child { color: var(--color-navy); font-size: 1.3rem; letter-spacing: .04em; }
.services-brands__rule { display: block; width: 84px; height: 3px; background: var(--color-accent); }
.marquee { position: relative; width: 100%; overflow: hidden; }
.marquee__track { display: flex; width: max-content; align-items: center; animation: tma-marquee 42s linear infinite; }
@media (prefers-reduced-motion: reduce) { .marquee__track { animation: none; overflow-x: auto; } }
@keyframes tma-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.marquee__slot { flex: 0 0 auto; width: 150px; height: 80px; margin-right: var(--space-6); display: flex; align-items: center; justify-content: center; }
.marquee__logo { max-width: 130px; max-height: 48px; width: auto; height: auto; object-fit: contain; transition: transform 200ms ease; }
.marquee__slot:hover .marquee__logo { transform: scale(1.14); }

.services-crisis { background: var(--color-accent); padding-block: var(--space-5); }
.services-crisis__inner { display: flex; flex-direction: column; gap: var(--space-2); }
.services-crisis__eyebrow { color: var(--color-navy); font-size: .8rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.services-crisis__lead { color: var(--color-navy); font-size: 1.2rem; }
.services-crisis__phone { align-self: flex-start; color: var(--color-navy); font-size: clamp(1.75rem, 4.5vw, 3.25rem); font-weight: 800; letter-spacing: -0.02em; text-decoration: none; }
.services-crisis__phone:hover { opacity: .8; }

@media (max-width: 900px) {
  .services-hero__grid { grid-template-columns: 1fr; }
  .services-hero__media { height: 420px; }
}

/* ==========================================================================
   Our Work page
   ========================================================================== */

.work-hero { padding-block: var(--space-7); }
.work-hero__eyebrow { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-3); }
.work-hero__eyebrow span:first-child { font-size: 1.35rem; letter-spacing: .04em; }
.work-hero__rule { display: block; width: 96px; height: 3px; background: var(--color-accent); }
.work-hero__title { color: var(--color-accent); font-size: clamp(2.5rem, 6.5vw, 5.5rem); line-height: 1.06; text-transform: uppercase; letter-spacing: -0.02em; margin-bottom: var(--space-2); }
.work-hero__subtitle { font-size: 1.6rem; color: #fff; margin-bottom: var(--space-5); }

.work-rail-wrap { position: relative; margin-bottom: var(--space-2); }
.work-rail { display: flex; gap: var(--space-2); overflow-x: auto; scrollbar-width: none; padding: 2px 64px 12px 0; cursor: grab; }
.work-rail::-webkit-scrollbar { display: none; }
.work-rail__pill {
  flex: 0 0 auto;
  padding: .6em 1.2em;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .3);
  background: transparent;
  color: rgba(255, 255, 255, .75);
  font-family: inherit;
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  transition: border-color 200ms ease, color 200ms ease;
}
.work-rail__pill:hover { color: #fff; border-color: rgba(255, 255, 255, .7); }
.work-rail__pill.is-active { border-color: var(--color-accent); color: #fff; }
.work-rail__fade {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 12px;
  width: 96px;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(0, 32, 129, 0) 0%, rgba(0, 32, 129, .85) 62%, var(--color-navy) 100%);
}
.work-count { color: rgba(255, 255, 255, .6); font-size: .95rem; margin-bottom: var(--space-4); }
.work-hero .filter-empty-state { color: rgba(255, 255, 255, .7); }

.work-card { position: relative; display: block; aspect-ratio: 1 / 1; overflow: hidden; background: #0e2f9a; text-decoration: none; }
.work-card[hidden] { display: none; }
.work-card__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 500ms cubic-bezier(.2, .8, .2, 1); }
.work-card:hover .work-card__img { transform: scale(1.06); }
.work-card__scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 16, 52, 0) 40%, rgba(0, 16, 52, .88) 100%); }
.work-card__body { position: absolute; left: 0; right: 0; bottom: 0; padding: var(--space-3); display: flex; flex-direction: column; gap: .3rem; }
.work-card__title { margin: 0; color: #fff; font-size: 1.3rem; line-height: 1.2; text-shadow: 0 2px 12px rgba(0, 10, 40, .5); }
.work-card__brand { color: rgba(255, 255, 255, .85); font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; }
.work-card__cta {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  color: #fff;
  font-size: .85rem;
  font-weight: 700;
  text-decoration: none;
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 250ms ease, transform 250ms ease;
}
.work-card:hover .work-card__cta { opacity: 1; transform: translateY(0); }

/* ==========================================================================
   Case study detail page
   ========================================================================== */

.case-eyebrow { display: flex; align-items: center; gap: var(--space-2); margin-top: var(--space-4); }
.case-eyebrow__dot { display: block; width: 9px; height: 9px; background: var(--color-accent); }
.case-eyebrow .eyebrow { margin-bottom: 0; }
.case-brand { color: var(--color-accent-text-on-light); font-size: 1.25rem; font-weight: 800; letter-spacing: .02em; }

.case-jumpnav {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--space-4);
  margin-top: var(--space-5);
  padding-top: var(--space-1);
  border-top: 2px solid var(--color-navy);
}
.case-jumpnav a {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  padding: var(--space-3) 0;
  color: var(--color-navy);
  font-weight: 700;
}
.case-jumpnav a:hover { color: var(--color-accent-text-on-light); }

.case-hero-grid { display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr); gap: var(--space-6); align-items: start; margin-top: var(--space-5); }
.case-hero-grid__img { aspect-ratio: 16 / 10; width: 100%; height: auto; object-fit: cover; object-position: center; border-radius: var(--radius); background: var(--color-bg-light); }
.case-hero-grid__img--top { object-position: top; }
.case-hero-grid__metrics { grid-template-columns: 1fr; gap: 0; }
.case-hero-grid__metrics .card--stat { border: none; border-radius: 0; border-top: 1px solid var(--color-border); padding: var(--space-3) 0; background: transparent; }
.case-hero-grid__metrics .card--stat .card__value { font-size: 2.4rem; }

.case-body-grid { display: grid; grid-template-columns: minmax(0, 280px) minmax(0, 1fr); gap: var(--space-6); align-items: start; margin-top: var(--space-6); }
.case-sidebar { position: sticky; top: 110px; display: flex; flex-direction: column; gap: var(--space-3); padding-top: var(--space-4); border-top: 1px solid var(--color-border); }
.case-sidebar dl { margin: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.case-sidebar dt { color: var(--color-accent-text-on-light); font-size: .8rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; margin-bottom: .4rem; }
.case-sidebar dd { margin: 0; color: var(--color-navy); }
.case-sidebar__cta { align-self: flex-start; padding-bottom: .5rem; border-bottom: 1px solid var(--color-border); color: var(--color-navy); font-weight: 600; }
.case-sidebar__cta:hover { color: var(--color-accent-text-on-light); }

.case-article { max-width: 820px; }
.case-article h2 { color: var(--color-navy); font-size: clamp(1.75rem, 3.5vw, 2.5rem); text-transform: uppercase; letter-spacing: -0.01em; margin: var(--space-6) 0 var(--space-3); }
.case-article h2:first-child { margin-top: 0; }
.case-article > p { max-width: 720px; font-size: 1.1rem; line-height: 1.85; }
.case-results { display: flex; flex-direction: column; }
.case-results__row { display: flex; align-items: baseline; gap: var(--space-3); padding: var(--space-3) 0; border-bottom: 1px solid var(--color-border); }
.case-results__value { color: var(--color-accent-text-on-light); font-size: 1.9rem; font-weight: 800; letter-spacing: -0.02em; }
.case-gallery__item { margin: 0; }
.case-gallery__item figcaption { margin-top: var(--space-2); color: var(--color-text-muted); font-size: .85rem; }

@media (max-width: 900px) {
  .case-hero-grid,
  .case-body-grid { grid-template-columns: 1fr; }
  .case-sidebar { position: static; }
}

/* ==========================================================================
   Insights page
   ========================================================================== */

.insights-hero { background: var(--color-navy); padding: var(--space-7) 0 var(--space-6); }
.insights-hero__title { color: #fff; font-size: clamp(2.5rem, 6.5vw, 5.5rem); line-height: 1.06; text-transform: uppercase; letter-spacing: -0.02em; margin-bottom: var(--space-3); }
.insights-hero__lead { max-width: 620px; color: rgba(255, 255, 255, .9); font-size: 1.25rem; line-height: 1.6; }
.insights-hero__linkedin { display: inline-flex; align-items: center; gap: var(--space-2); margin-top: var(--space-3); color: #fff; font-weight: 700; text-decoration: none; }
.insights-hero__linkedin:hover { color: var(--color-accent); }
.insights-hero__linkedin img { width: 34px; height: 34px; padding: 5px; box-sizing: border-box; border-radius: 50%; background: #fff; object-fit: contain; }

.insights-main { padding-block: var(--space-7); }
.insights-section-label {
  display: block;
  padding-top: var(--space-3);
  margin-bottom: var(--space-5);
  border-top: 1px solid var(--color-border);
  color: var(--color-navy);
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.insights-featured__kicker { display: block; margin-bottom: var(--space-3); color: var(--color-text-muted); }
.insights-featured { display: grid; grid-template-columns: minmax(0, max-content) minmax(0, 1fr); gap: var(--space-6); align-items: start; margin-bottom: var(--space-7); }
.insights-featured__img { display: block; width: auto; height: auto; max-width: 100%; max-height: 460px; background: var(--color-bg-light); }
.insights-featured__title { color: var(--color-navy); font-size: clamp(1.75rem, 3.5vw, 2.75rem); line-height: 1.14; letter-spacing: -0.02em; margin-bottom: var(--space-3); }
.insights-featured__title a { text-decoration: none; }
.insights-featured__title a:hover { color: var(--color-accent-text-on-light); }
.insights-featured__dek { font-size: 1rem; line-height: 1.8; margin-bottom: var(--space-4); }
.insights-featured__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); }
.insights-featured__contact { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--color-navy); font-weight: 700; text-decoration: none; background: none; border: none; padding: 0; font-size: 1rem; cursor: pointer; }
.insights-featured__contact:hover { color: var(--color-accent-text-on-light); }

.insights-carousel-header { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-4); }
.insights-carousel-header .insights-section-label { padding-top: 0; margin-bottom: 0; border-top: none; }
.insights-carousel__arrows { display: flex; gap: var(--space-2); flex: 0 0 auto; }
.insights-carousel__arrow {
  width: 44px; height: 44px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--color-border);
  border-radius: 50%;
  background: #fff;
  color: var(--color-navy);
  cursor: pointer;
  transition: background 200ms ease, border-color 200ms ease, color 200ms ease;
}
.insights-carousel__arrow:hover { background: var(--color-navy); border-color: var(--color-navy); color: #fff; }
.insights-carousel__arrow:disabled { opacity: .35; cursor: default; pointer-events: none; }

.insights-grid {
  display: flex;
  gap: var(--space-4);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scroll-behavior: smooth;
  margin: var(--space-5) 0 var(--space-6);
  padding-bottom: var(--space-2);
  scrollbar-width: none;
}
.insights-grid::-webkit-scrollbar { display: none; }
.insights-card { display: flex; flex-direction: column; gap: var(--space-2); flex: 0 0 clamp(260px, 30vw, 320px); scroll-snap-align: start; }
.insights-card__img { aspect-ratio: 16 / 9; width: 100%; height: auto; object-fit: cover; background: var(--color-bg-light); }
.insights-card__placeholder { aspect-ratio: 16 / 9; width: 100%; display: flex; align-items: center; justify-content: center; background: var(--color-bg-light); border: 1px solid var(--color-border); }
.insights-card__placeholder img { width: 48px; height: 48px; object-fit: contain; opacity: .3; }
.insights-card__category { color: var(--color-text-muted); font-size: .85rem; }
.insights-card__title { margin: 0; color: var(--color-navy); font-size: 1.3rem; line-height: 1.28; }
.insights-card__title a { text-decoration: none; }
.insights-card__title a:hover { color: var(--color-accent-text-on-light); }
.insights-card__dek { margin: 0; font-size: 1rem; line-height: 1.75; }
.insights-card__download {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: auto;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
  font-family: inherit;
  color: var(--color-navy);
  font-size: 1rem;
  font-weight: 700;
}
.insights-card__download:hover { color: var(--color-accent-text-on-light); }

.insight-pov {
  margin: 0;
  padding-left: var(--space-4);
  border-left: 3px solid var(--color-accent);
  font-size: 1.2rem;
  line-height: 1.6;
  font-style: italic;
  color: var(--color-text);
}

.insights-related { background: var(--color-navy); padding: var(--space-7) 0; border-bottom: 5px solid var(--color-accent); }
.insights-related__header { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-5); }
.insights-related__header h2 { margin: 0; color: #fff; font-size: clamp(1.75rem, 3.5vw, 2.75rem); letter-spacing: -0.02em; }
.insights-related__header a { display: inline-flex; align-items: center; gap: var(--space-2); color: #fff; font-weight: 700; text-decoration: none; }
.insights-related__header a:hover { color: var(--color-accent); }
.insights-related__card { display: flex; flex-direction: column; background: #0a2a92; border-radius: 14px; overflow: hidden; }
.insights-related__img { aspect-ratio: 16 / 10; width: 100%; height: auto; object-fit: cover; display: block; }
.insights-related__body { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); padding: var(--space-4); }
.insights-related__body span { color: var(--color-accent); font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.insights-related__body h3 { margin: 0; color: #fff; font-size: 1.3rem; line-height: 1.3; }
.insights-related__body a { display: inline-flex; align-items: center; gap: var(--space-2); margin-top: var(--space-1); color: #fff; font-weight: 700; text-decoration: none; }
.insights-related__body a:hover { color: var(--color-accent); }

.insights-gate { position: fixed; inset: 0; z-index: 120; display: flex; align-items: center; justify-content: center; padding: var(--space-3); background: rgba(0, 16, 52, .72); }
.insights-gate[hidden] { display: none; }
.insights-gate__dialog { position: relative; width: 100%; max-width: 520px; background: #fff; border-radius: 16px; box-shadow: 0 30px 80px rgba(0, 10, 44, .4); overflow: hidden; }
.insights-gate__dialog::before { content: ""; display: block; height: 5px; background: var(--color-accent); }
.insights-gate__close {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 0;
  cursor: pointer;
  color: var(--color-navy);
  font-size: 1.5rem;
  line-height: 1;
}
.insights-gate__close:hover { color: var(--color-accent); }
.insights-gate__body { padding: var(--space-5); }
.insights-gate__eyebrow { display: block; margin-bottom: var(--space-2); color: var(--color-navy); font-size: .75rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.insights-gate__title { margin: 0 0 var(--space-2); color: var(--color-navy); font-size: 1.5rem; line-height: 1.22; letter-spacing: -0.01em; }
.insights-gate__body > p { margin: 0 0 var(--space-4); }
.insights-gate__body form { display: flex; flex-direction: column; gap: var(--space-3); }
.insights-gate__body label { display: flex; flex-direction: column; gap: .4rem; color: var(--color-navy); font-size: .8rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.insights-gate__body input {
  width: 100%;
  box-sizing: border-box;
  padding: .8em .9em;
  font-family: inherit;
  font-size: 1rem;
  color: var(--color-navy);
  background: var(--color-bg-light);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
}
.insights-gate__body input:focus { outline: none; border-color: var(--color-accent); background: #fff; }
.insights-gate__disclaimer { color: var(--color-text-muted); font-size: .8rem; line-height: 1.6; text-transform: none; font-weight: 400; letter-spacing: normal; }

/* Services page "talk to our team" popup — same overlay/dialog treatment as
   .insights-gate, but the form itself reuses .form-field (contact.njk's own
   styling) since it carries the full contact-form field set (checkboxes,
   select, textarea), not just two text inputs. */
.services-inquiry { position: fixed; inset: 0; z-index: 120; display: flex; align-items: center; justify-content: center; padding: var(--space-3); background: rgba(0, 16, 52, .72); overflow-y: auto; }
.services-inquiry[hidden] { display: none; }
.services-inquiry__dialog { position: relative; width: 100%; max-width: 560px; margin: auto; background: #fff; border-radius: 16px; box-shadow: 0 30px 80px rgba(0, 10, 44, .4); overflow: hidden; }
.services-inquiry__dialog::before { content: ""; display: block; height: 5px; background: var(--color-accent); }
.services-inquiry__close {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 0;
  cursor: pointer;
  color: var(--color-navy);
  font-size: 1.5rem;
  line-height: 1;
}
.services-inquiry__close:hover { color: var(--color-accent); }
.services-inquiry__body { padding: var(--space-5); max-height: 85vh; overflow-y: auto; }
.services-inquiry__eyebrow { display: block; margin-bottom: var(--space-2); color: var(--color-navy); font-size: .75rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.services-inquiry__title { margin: 0 0 var(--space-2); color: var(--color-navy); font-size: 1.5rem; line-height: 1.22; letter-spacing: -0.01em; }
.services-inquiry__body > p { margin: 0 0 var(--space-4); }
.services-inquiry__success { text-align: center; padding: var(--space-4) 0; }

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

.work-gate { position: fixed; inset: 0; z-index: 130; display: flex; align-items: center; justify-content: center; padding: var(--space-3); background: rgba(0, 16, 52, .68); }
.work-gate[hidden] { display: none; }
.work-gate__home {
  display: inline-block;
  margin-bottom: var(--space-3);
  color: var(--color-text-muted);
  font-weight: 600;
  font-size: .9rem;
}
.work-gate__home:hover { color: var(--color-accent-text-on-light); }
body.has-work-gate { position: fixed; overflow: hidden; width: 100%; }
.work-gate__dialog { position: relative; width: 100%; max-width: 480px; background: #fff; border-radius: 16px; box-shadow: 0 30px 80px rgba(0, 10, 44, .4); overflow: hidden; }
.work-gate__dialog::before { content: ""; display: block; height: 5px; background: var(--color-accent); }
.work-gate__body { padding: var(--space-5); }
.work-gate__eyebrow { display: block; margin-bottom: var(--space-2); color: var(--color-navy); font-size: .75rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.work-gate__title { margin: 0 0 var(--space-2); color: var(--color-navy); font-size: 1.5rem; line-height: 1.22; letter-spacing: -0.01em; }
.work-gate__body > p { margin: 0 0 var(--space-4); }
.work-gate__body form { display: flex; flex-direction: column; gap: var(--space-3); }
.work-gate__body label { display: flex; flex-direction: column; gap: .4rem; color: var(--color-navy); font-size: .8rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.work-gate__body input {
  width: 100%;
  box-sizing: border-box;
  padding: .8em .9em;
  font-family: inherit;
  font-size: 1rem;
  color: var(--color-navy);
  background: var(--color-bg-light);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
}
.work-gate__body input:focus { outline: none; border-color: var(--color-accent); background: #fff; }
.work-gate__disclaimer { color: var(--color-text-muted); font-size: .8rem; line-height: 1.6; text-transform: none; font-weight: 400; letter-spacing: normal; }

/* ==========================================================================
   AI Visibility Audit page
   ========================================================================== */

.aiv-hero { padding-block: var(--space-7); }
.aiv-hero__grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: var(--space-6); align-items: start; }
.aiv-eyebrow { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-3); }
.aiv-eyebrow span:first-child { color: var(--color-navy); font-size: 1.1rem; font-style: italic; letter-spacing: .04em; }
.aiv-eyebrow__rule { display: block; width: 84px; height: 3px; background: var(--color-accent); }
.aiv-hero__title { color: var(--color-navy); font-size: clamp(2.25rem, 5vw, 3.75rem); line-height: 1.08; letter-spacing: -0.02em; margin-bottom: var(--space-4); }
.aiv-hero__lead { max-width: 56ch; font-size: 1.15rem; line-height: 1.7; margin-bottom: var(--space-4); }
.aiv-hero__platforms { background: var(--color-bg-light); border: 1px solid var(--color-border); border-radius: 12px; padding: var(--space-4); }
.aiv-hero__platforms-label { display: block; font-size: .8rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--color-text-muted); margin-bottom: var(--space-2); }
.aiv-platform-list { list-style: none; margin: 0 0 var(--space-3); padding: 0; display: flex; flex-direction: column; gap: .5rem; }
.aiv-platform-list li { font-weight: 700; color: var(--color-navy); padding-left: 1.4em; position: relative; }
.aiv-platform-list li::before { content: "✓"; position: absolute; left: 0; color: var(--color-accent-text-on-light); font-weight: 800; }
.aiv-hero__honesty { margin: 0; font-size: .88rem; color: var(--color-text-muted); border-top: 1px solid var(--color-border); padding-top: var(--space-3); }

.aiv-demo { padding-block: var(--space-7); }
.aiv-demo__heading { font-size: clamp(1.75rem, 3.5vw, 2.5rem); margin: var(--space-2) 0 var(--space-2); }
.aiv-demo__lead { max-width: 62ch; margin-bottom: var(--space-5); }
.aiv-demo__panel { background: #0e2f9a; border-radius: 16px; padding: var(--space-5); box-shadow: 0 24px 60px rgba(0, 8, 40, .35); }
.aiv-form__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0 var(--space-4); }
.aiv-demo__panel .form-field label { color: #fff; }
.aiv-demo__panel .form-field input {
  width: 100%;
  box-sizing: border-box;
  padding: .8em .9em;
  font-family: inherit;
  font-size: 1rem;
  color: var(--color-navy);
  background: #fff;
  border: 1px solid rgba(255, 255, 255, .3);
  border-radius: var(--radius);
}

.aiv-processing__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); max-width: 480px; margin-inline: auto; }
.aiv-processing__list li {
  display: flex;
  align-items: center;
  gap: .8rem;
  color: rgba(255, 255, 255, .55);
  font-weight: 600;
  transition: color 300ms ease;
}
.aiv-processing__list li::before {
  content: "";
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, .3);
  transition: border-color 300ms ease, background 300ms ease;
}
.aiv-processing__list li[data-status="active"] { color: #fff; }
.aiv-processing__list li[data-status="active"]::before { border-color: var(--color-accent); border-top-color: transparent; animation: aivSpin 700ms linear infinite; }
.aiv-processing__list li[data-status="done"] { color: rgba(255, 255, 255, .85); }
.aiv-processing__list li[data-status="done"]::before { border-color: var(--color-accent); background: var(--color-accent); }
@keyframes aivSpin { to { transform: rotate(360deg); } }

.aiv-demo-badge {
  display: inline-block;
  margin-bottom: var(--space-4);
  padding: .3rem .8rem;
  border-radius: 99px;
  background: rgba(255, 133, 0, .16);
  border: 1px solid rgba(255, 133, 0, .5);
  color: var(--color-accent);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.aiv-chip {
  display: inline-flex;
  align-items: center;
  margin-top: .5rem;
  padding: .3rem .75rem;
  border-radius: 99px;
  background: rgba(255, 133, 0, .16);
  border: 1px solid rgba(255, 133, 0, .5);
  color: var(--color-accent);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .03em;
}
.aiv-score-row { display: flex; align-items: center; gap: var(--space-4); margin-bottom: var(--space-5); flex-wrap: wrap; }
.aiv-score-ring {
  width: 120px; height: 120px; border-radius: 50%; flex: 0 0 auto;
  background: conic-gradient(var(--color-accent) calc(var(--pct, 0) * 1%), rgba(255, 255, 255, .22) 0);
  display: flex; align-items: center; justify-content: center;
  transition: background 700ms ease;
}
.aiv-score-ring__inner {
  width: 96px; height: 96px; border-radius: 50%; background: var(--color-navy-dark);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.aiv-score-ring__inner b { font-size: 2rem; line-height: 1; color: #fff; }
.aiv-score-ring__inner small { font-size: .68rem; color: rgba(255, 255, 255, .6); }
.aiv-score-label { display: block; color: #fff; font-weight: 700; font-size: 1.1rem; }

.aiv-sov { margin-bottom: var(--space-5); }
.aiv-sov h3 { color: #fff; font-size: 1.05rem; margin-bottom: var(--space-3); }
.aiv-sov__bars { display: flex; flex-direction: column; gap: var(--space-2); }
.aiv-sov__row { display: flex; align-items: center; gap: var(--space-3); }
.aiv-sov__row-label { flex: 0 0 140px; color: rgba(255, 255, 255, .85); font-size: .9rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aiv-sov__row-track { flex: 1 1 auto; height: 22px; border-radius: 4px; background: rgba(255, 255, 255, .15); overflow: hidden; }
.aiv-sov__row-fill { display: block; height: 100%; border-radius: 4px; background: var(--color-accent); width: 0; transition: width 900ms cubic-bezier(.2, .8, .2, 1); }
.aiv-sov__row.is-brand .aiv-sov__row-fill { background: #fff; }
.aiv-sov__row-value { flex: 0 0 42px; text-align: right; font-weight: 700; color: #fff; font-size: .9rem; }

.aiv-findings { margin-bottom: var(--space-5); }
.aiv-findings .service-card__copy { color: var(--color-text-muted); }
.aiv-recs h3 { color: #fff; font-size: 1.05rem; margin-bottom: var(--space-3); }
.aiv-recs ol { margin: 0; padding-left: 1.3rem; color: rgba(255, 255, 255, .88); }
.aiv-recs li { margin-bottom: .6rem; line-height: 1.6; }
.aiv-results__cta { text-align: center; margin-top: var(--space-5); padding-top: var(--space-4); border-top: 1px solid rgba(255, 255, 255, .2); }
.aiv-results__cta p { color: #fff; font-size: 1.1rem; margin-bottom: var(--space-3); }

.aiv-cta { padding-block: var(--space-7); }

/* Homepage teaser — an ambient, non-interactive preview of the /ai-visibility/
   demo. The rotator below reuses the same staggered-crossfade technique as
   .about-hello__word / .word-highlight (own keyframes, since the timing and
   word count differ), just to give the card some life without requiring a
   click; the score/bar beside it is a fixed illustrative snapshot, not a
   second live-animating engine to maintain. */
.aiv-teaser { padding-block: var(--space-7); }
.aiv-teaser__grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: var(--space-6); align-items: center; }
.aiv-teaser__lead { font-size: 1.1rem; line-height: 1.7; max-width: 52ch; margin: var(--space-3) 0 var(--space-4); }
.aiv-teaser__preview { background: var(--color-navy); border-radius: 16px; padding: var(--space-5); box-shadow: 0 20px 50px rgba(0, 16, 52, .25); }
.aiv-teaser__badge {
  display: inline-block;
  margin-bottom: var(--space-4);
  padding: .28rem .75rem;
  border-radius: 99px;
  background: rgba(255, 133, 0, .16);
  border: 1px solid rgba(255, 133, 0, .5);
  color: var(--color-accent);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.aiv-teaser__rotator { position: relative; height: 1.6em; overflow: hidden; margin-bottom: var(--space-4); }
.aiv-teaser__rotator-word {
  position: absolute;
  inset-inline: 0;
  top: 0;
  opacity: 0;
  color: #fff;
  font-weight: 700;
  animation: aivTeaserRotate 9.6s ease-in-out infinite;
}
@keyframes aivTeaserRotate {
  0% { opacity: 0; }
  4% { opacity: 1; }
  21% { opacity: 1; }
  25% { opacity: 0; }
  100% { opacity: 0; }
}
.aiv-teaser__sample { display: flex; align-items: center; gap: var(--space-3); border-top: 1px solid rgba(255, 255, 255, .2); padding-top: var(--space-4); }
.aiv-teaser__sample b { font-size: 1.8rem; color: #fff; }
.aiv-teaser__sample small { color: rgba(255, 255, 255, .6); white-space: nowrap; }
.aiv-teaser__sample-bar { flex: 1 1 auto; height: 10px; border-radius: 99px; background: rgba(255, 255, 255, .15); overflow: hidden; }
.aiv-teaser__sample-bar i { display: block; height: 100%; width: 61%; background: var(--color-accent); border-radius: 99px; }
@media (prefers-reduced-motion: reduce) {
  .aiv-teaser__rotator-word { animation: none !important; opacity: 0; }
  .aiv-teaser__rotator-word:first-child { opacity: 1; }
}
@media (max-width: 900px) {
  .aiv-teaser__grid { grid-template-columns: 1fr; }
  .aiv-hero__grid { grid-template-columns: 1fr; }
}

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

@media (min-width: 768px) {
  .grid--2 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .grid--3 { grid-template-columns: repeat(3, 1fr); }
}