:root {
  /* ─── Brand blues ─────────────────────────────────────────────── */
  --faa-blue:        #2D689E;   /* blue-600 — CAPABILITY (primary) */
  --faa-blue-light:  #4E96C1;   /* blue-500 — ACCENT */
  --faa-highlight:   #7FC2E1;   /* blue-300 — HIGHLIGHT */
  --faa-blue-50:     #E8F2F9;   /* blue-50  — SURFACE */

  /* ─── Neutrals — canonical 8-step gray palette ───────────────── */
  --faa-white:       #FFFFFF;
  --faa-gray-50:     #F8FAFC;   /* lightest surface tint */
  --faa-gray-100:    #F1F5F9;   /* hairline / subtle bg */
  --faa-gray-200:    #E2E8F0;   /* borders */
  --faa-gray-400:    #94A3B8;   /* muted / secondary text */
  --faa-gray-600:    #475569;   /* body text */
  --faa-gray-800:    #1E293B;   /* dark surfaces */
  --faa-gray-900:    #0F172A;   /* deepest */

  /* ─── Semantic aliases for dark surfaces ─────────────────────── */
  --faa-navy:        var(--faa-gray-800);
  --faa-navy-deep:   var(--faa-gray-900);
}
html {
  scroll-behavior: smooth;
  scroll-padding-top: 104px;
}
body {
  font-family: 'Source Serif 4', 'Source Serif Pro', Georgia, 'Times New Roman', serif;
  color: var(--faa-gray-600);
  background: var(--faa-white);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Skip-to-main-content link — visible only when focused via keyboard.
   WCAG 2.4.1 Bypass Blocks. */
.skip-link {
  position: absolute;
  top: -100px;
  left: 16px;
  z-index: 100;
  padding: 12px 18px;
  background: var(--faa-navy);
  color: var(--faa-white);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  border-radius: 4px;
  transition: top 180ms ease-out;
}
.skip-link:focus {
  top: 16px;
  outline: 2px solid var(--faa-blue);
  outline-offset: 2px;
}
h1, h2, h3, h4 { color: var(--faa-navy); }
.h1 { font-size: clamp(36px, 5.2vw, 64px); font-weight: 600; letter-spacing: -0.02em; line-height: 1.08; }
.h2 { font-size: clamp(28px, 3.4vw, 40px); font-weight: 600; letter-spacing: -0.015em; line-height: 1.18; }
.eyebrow { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.12em; }
.body-lg { font-size: 18px; line-height: 1.6; }
.body { font-size: 16px; line-height: 1.6; }

/* CTA buttons
   ----------
   Frontier Signal CTA system. The primary button uses a blue->cyan
   gradient with a subtle cyan rim, a soft glow shadow, a right-side
   angled "signal" wedge, and a moderate 10px radius — the same
   treatment that originated on the /ai-frontiers/ hero CTA, now
   applied site-wide for consistency. Existing button sizes
   (44px .btn height, .mobile-header-cta compact size, etc.) are
   preserved — only the visual treatment is unified. */

/* Shared CTA design tokens. Centralized so the gradient, rim, and
   glow can be tuned once and propagated to every primary CTA
   variant (global .btn-primary, .mobile-header-cta, .mobile-menu-cta,
   and the page-scoped .hero-cta-frontier). */
:root {
  --faa-cta-radius: 10px;
  --faa-cta-bg: linear-gradient(135deg, #0b5f9f 0%, #0d75bd 52%, #11a4c2 100%);
  --faa-cta-bg-hover: linear-gradient(135deg, #0c69ad 0%, #0f81cf 52%, #14b6d6 100%);
  --faa-cta-border: rgba(88, 214, 238, 0.55);
  --faa-cta-border-hover: rgba(134, 232, 255, 0.92);
  --faa-cta-text: #ffffff;
  --faa-cta-shadow: 0 12px 28px rgba(0, 35, 80, 0.28), 0 0 18px rgba(17, 164, 194, 0.16);
  --faa-cta-shadow-hover: 0 18px 38px rgba(0, 35, 80, 0.38), 0 0 26px rgba(17, 164, 194, 0.28);
  --faa-cta-focus: rgba(156, 207, 243, 0.95);
}

.btn { display: inline-flex; align-items: center; justify-content: center; height: 44px; padding: 0 20px; font-size: 14px; font-weight: 600; border-radius: var(--faa-cta-radius); transition: all 180ms ease-out; letter-spacing: 0.01em; white-space: nowrap; }

/* Primary CTA — the Frontier Signal treatment.
   isolation: isolate is required so the ::before and ::after layers
   stack under the label (via z-index: -1) but don't punch through
   the parent's stacking context. overflow: hidden clips the wedge
   to the rounded corners. */
.btn-primary {
  position: relative;
  background: var(--faa-cta-bg);
  color: var(--faa-cta-text);
  border: 1px solid var(--faa-cta-border);
  box-shadow: var(--faa-cta-shadow);
  overflow: hidden;
  isolation: isolate;
  text-decoration: none;
}
.btn-primary:hover {
  background: var(--faa-cta-bg-hover);
  border-color: var(--faa-cta-border-hover);
  box-shadow: var(--faa-cta-shadow-hover);
  transform: translateY(-2px);
  color: var(--faa-cta-text);
}
.btn-primary:focus-visible {
  outline: 3px solid var(--faa-cta-focus);
  outline-offset: 4px;
}
/* Right-side angled signal accent — a brighter cyan-blue wedge
   clipped at the top-left so the label always reads cleanly over
   the darker left side of the gradient. width: clamp() so the wedge
   scales with the button instead of dominating short labels. */
.btn-primary::after {
  content: "";
  position: absolute;
  top: 0;
  right: -1px;
  width: clamp(44px, 22%, 78px);
  height: 100%;
  background: linear-gradient(135deg, rgba(32, 205, 230, 0.72), rgba(36, 130, 204, 0.58));
  clip-path: polygon(34% 0, 100% 0, 100% 100%, 0 100%);
  z-index: -1;
  pointer-events: none;
}
/* Diagonal highlight that sweeps left -> right on hover. Subtle
   "signal" cue, no JS required. */
.btn-primary::before {
  content: "";
  position: absolute;
  inset: -2px;
  background:
    radial-gradient(circle at 18% 24%, rgba(255, 255, 255, 0.22), transparent 36%),
    linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.16), transparent);
  opacity: 0.45;
  transform: translateX(-40%);
  transition: transform 280ms ease, opacity 280ms ease;
  z-index: -1;
  pointer-events: none;
}
.btn-primary:hover::before {
  transform: translateX(22%);
  opacity: 0.7;
}

.btn-outline-navy { background: transparent; color: var(--faa-navy); border: 1px solid var(--faa-navy); }
.btn-outline-navy:hover { background: var(--faa-navy); color: var(--faa-white); }
.btn-outline-white { background: transparent; color: var(--faa-white); border: 1px solid var(--faa-white); }
.btn-outline-white:hover { background: var(--faa-white); color: var(--faa-navy); }
.btn-on-blue { background: var(--faa-white); color: var(--faa-navy); border: 1px solid var(--faa-white); }
.btn-on-blue:hover { background: var(--faa-navy); color: var(--faa-white); border-color: var(--faa-navy); }

/* Card */
.card {
  border: 1px solid var(--faa-gray-100);
  border-radius: 4px;
  background: var(--faa-white);
  transition: all 180ms ease-out;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.card:hover {
  border-color: var(--faa-blue);
  background: var(--faa-blue-50);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(30,41,59,0.08);
}
.card-image {
  aspect-ratio: 16 / 9;
  background: var(--faa-gray-100);
  position: relative;
  overflow: hidden;
}
.card-image::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    repeating-linear-gradient(135deg, transparent 0 14px, rgba(30,41,59,0.025) 14px 15px);
}
.card-image img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform 500ms ease-out;
  will-change: transform;
}
.card:hover .card-image img {
  transform: scale(1.04);
}
.pill {
  position: absolute; top: 12px; right: 12px;
  background: var(--faa-white);
  border: 1px solid var(--faa-navy);
  color: var(--faa-navy);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 4px 8px;
  border-radius: 2px;
}
.kicker { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.12em; color: var(--faa-navy); }

/* Methodology numeral */
.method-num {
  width: 56px; height: 56px;
  border: 1px solid var(--faa-navy);
  color: var(--faa-blue);
  font-weight: 600;
  font-size: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  letter-spacing: 0.02em;
}

/* ─────────────────────────────────────────────────────────────────
   Foundation Sequence Band — home page transition section that sits
   between the hero carousel and the white methodology block. Deep
   navy surface with a thin FAA-blue accent rule along the top,
   three numbered methodology cards in a row at desktop / stacked at
   mobile, plus a single restrained "See the methodology" text link.

   The band exists to add color and visual rhythm between two large
   editorial sections — it should read as a confident executive
   checkpoint, not a marketing banner. Imagery is pure
   typography + color + thin rules; no icons, no illustrations.
───────────────────────────────────────────────────────────────── */
.foundation-sequence-band {
  position: relative;
  background: var(--faa-navy);
  color: var(--faa-white);
  /* Top accent rule in FAA blue — signals the section identity
     without needing a heavy header treatment. */
  border-top: 3px solid var(--faa-blue);
}
.foundation-sequence-band__inner {
  /* container-faa already supplies horizontal padding and
     max-width; here we just add the vertical rhythm. */
  padding-top: 56px;
  padding-bottom: 56px;
}
@media (min-width: 1024px) {
  .foundation-sequence-band__inner {
    padding-top: 80px;
    padding-bottom: 80px;
  }
}
.foundation-sequence-band__copy {
  max-width: 880px;
  margin: 0 auto;
  text-align: center;
}
.foundation-sequence-band__eyebrow {
  margin: 0 0 14px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--faa-blue);
  line-height: 1.3;
}
.foundation-sequence-band__headline {
  margin: 0;
  font-size: clamp(24px, 3.2vw, 36px);
  font-weight: 600;
  line-height: 1.18;
  letter-spacing: -0.015em;
  color: var(--faa-white);
}
.foundation-sequence-band__body {
  margin: 18px 0 0;
  font-size: 16px;
  line-height: 1.6;
  /* Soft blue-gray for supporting copy so it reads as secondary
     against the white headline above. */
  color: rgba(255, 255, 255, 0.78);
}
@media (min-width: 1024px) {
  .foundation-sequence-band__body {
    font-size: 17px;
    margin-top: 20px;
  }
}

.foundation-sequence-band__cards {
  list-style: none;
  margin: 36px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}
@media (min-width: 768px) {
  .foundation-sequence-band__cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin-top: 44px;
  }
}
@media (min-width: 1280px) {
  .foundation-sequence-band__cards {
    gap: 20px;
    margin-top: 52px;
  }
}

.foundation-sequence-card {
  position: relative;
  padding: 22px 22px 24px;
  /* Lift the card off the navy surface with a slightly lighter
     translucent fill + a faint 1px rule. Holds together as a
     premium executive card without competing with the headline. */
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 6px;
  transition: border-color 200ms ease-out, background-color 200ms ease-out, transform 220ms ease-out;
}
.foundation-sequence-card:hover,
.foundation-sequence-card:focus-within {
  border-color: rgba(86, 156, 214, 0.55);
  background: rgba(255, 255, 255, 0.06);
  transform: translateY(-1px);
}
/* Stretched link — makes the entire card a single tap/click target
   without nesting interactive elements. The anchor carries the href
   + aria-label, then expands invisibly to cover the card via
   position:absolute + inset:0. The :focus-visible ring renders on
   the anchor itself so keyboard users get a clear outline around
   the card. */
.foundation-sequence-card__link {
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: 6px;
  /* No visible content — the visible card label is rendered by the
     sibling <h3>. aria-label on the anchor provides the accessible
     name. */
  text-decoration: none;
  /* Hide any accidental text that lands inside the anchor without
     affecting hit testing. */
  font-size: 0;
  color: transparent;
}
.foundation-sequence-card__link:focus-visible {
  outline: 2px solid rgba(86, 156, 214, 0.95);
  outline-offset: 3px;
}
.foundation-sequence-card__num {
  display: inline-block;
  font-family: 'Source Serif 4', 'Source Serif Pro', Georgia, serif;
  font-size: 24px;
  font-weight: 600;
  color: var(--faa-blue);
  line-height: 1;
  margin-bottom: 10px;
  letter-spacing: 0;
}
@media (min-width: 1024px) {
  .foundation-sequence-card__num {
    font-size: 28px;
    margin-bottom: 12px;
  }
}
.foundation-sequence-card__title {
  margin: 0 0 6px;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--faa-white);
  letter-spacing: -0.005em;
}
@media (min-width: 1024px) {
  .foundation-sequence-card__title {
    font-size: 18px;
  }
}
.foundation-sequence-card__copy {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.72);
}

.foundation-sequence-band__cta {
  display: inline-flex;
  align-items: center;
  margin: 28px auto 0;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--faa-blue);
  text-decoration: none;
  transition: color 180ms ease-out;
  /* Center the CTA under the cards block; .copy block above is
     also centered so the band reads as a single column of
     centered content. */
  text-align: center;
  width: max-content;
  max-width: 100%;
}
.foundation-sequence-band__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.foundation-sequence-band__cta:hover,
.foundation-sequence-band__cta:focus-visible {
  color: var(--faa-white);
}
.foundation-sequence-band__cta:focus-visible {
  outline: 2px solid var(--faa-blue);
  outline-offset: 4px;
  border-radius: 2px;
}
@media (min-width: 1024px) {
  .foundation-sequence-band__cta {
    margin-top: 36px;
    font-size: 15px;
  }
}

/* ─────────────────────────────────────────────────────────────────
   Foundation Sequence cards — image-backed variant.
   Used on the homepage Foundation Before AI band to upgrade the
   flat dark cards to colorful image-backed tiles. The image fills
   the card behind the content; a dark bottom-up gradient overlay
   keeps the number/title/copy readable while letting the image
   carry the section's visual energy.
───────────────────────────────────────────────────────────────── */
.foundation-sequence-band__cards--image {
  /* Override the band cards grid for the image variant — taller
     rows so the imagery actually has surface to breathe on. */
  gap: 16px;
}
@media (min-width: 768px) {
  .foundation-sequence-band__cards--image {
    gap: 20px;
  }
}
.foundation-sequence-card--image {
  /* Layered card: image at z:0, gradient at z:1, content at z:2.
     min-height creates the editorial portrait/landscape feel on
     desktop; the content sits flush at the bottom. */
  padding: 0;
  min-height: 280px;
  display: flex;
  align-items: stretch;
  /* Override the translucent white wash from the base card — the
     image carries the surface treatment now. Solid navy fallback
     in case the image fails to load. */
  background: #0b1728;
  border-radius: 10px;
  overflow: hidden;
  /* Extend the base card's transition to include box-shadow so the
     hover glow animates smoothly with the lift. */
  transition: border-color 220ms ease-out, transform 220ms ease-out, box-shadow 220ms ease-out;
}
@media (min-width: 1024px) {
  .foundation-sequence-card--image {
    min-height: 320px;
  }
}
.foundation-sequence-card--image .foundation-sequence-card__image {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}
.foundation-sequence-card--image .foundation-sequence-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Slight saturation + contrast bump unifies the three different
     methodology photos under a single editorial tone. */
  filter: saturate(1.05) contrast(1.04);
  transform: scale(1.03);
  transition: transform 260ms ease-out, filter 260ms ease-out;
}
/* Bottom-up gradient overlay so the white text reads cleanly over
   the imagery without darkening the top of the image where the
   subject usually sits. */
.foundation-sequence-card--image::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(180deg,
      rgba(5, 15, 32, 0.16) 0%,
      rgba(5, 15, 32, 0.62) 52%,
      rgba(5, 15, 32, 0.94) 100%),
    linear-gradient(90deg,
      rgba(5, 15, 32, 0.30),
      transparent 60%);
  pointer-events: none;
}
.foundation-sequence-card--image .foundation-sequence-card__content {
  position: relative;
  z-index: 2;
  align-self: end;
  width: 100%;
  padding: 22px 22px 24px;
}
.foundation-sequence-card--image .foundation-sequence-card__num {
  /* Override the base card's navy left-rule num — over imagery the
     cyan-blue reads more clearly than --faa-blue against varied
     photo backgrounds. */
  color: #7fd4ff;
  margin-bottom: 8px;
}
.foundation-sequence-card--image .foundation-sequence-card__title {
  color: var(--faa-white);
  /* Subtle text shadow for AA contrast over any image region the
     gradient doesn't fully darken. */
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}
.foundation-sequence-card--image .foundation-sequence-card__copy {
  color: rgba(255, 255, 255, 0.82);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.30);
}
.foundation-sequence-card--image .foundation-sequence-card__cta {
  display: inline-flex;
  align-items: center;
  margin-top: 14px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #7fd4ff;
  transition: color 180ms ease;
}
.foundation-sequence-card--image .foundation-sequence-card__cta .arrow {
  display: inline-block;
  transition: transform 180ms ease;
  margin-left: 2px;
}
/* Hover — lift the card, brighten + zoom the image, slide the CTA
   arrow right a touch. Stretched-link pattern already covers the
   click target via the .foundation-sequence-card__link sibling. */
.foundation-sequence-card--image:hover,
.foundation-sequence-card--image:focus-within {
  transform: translateY(-4px);
  border-color: rgba(127, 212, 255, 0.50);
  box-shadow: 0 22px 50px rgba(0, 0, 0, 0.32), 0 0 26px rgba(40, 170, 210, 0.14);
}
.foundation-sequence-card--image:hover .foundation-sequence-card__image img,
.foundation-sequence-card--image:focus-within .foundation-sequence-card__image img {
  transform: scale(1.08);
  filter: saturate(1.16) contrast(1.06);
}
.foundation-sequence-card--image:hover .foundation-sequence-card__cta .arrow,
.foundation-sequence-card--image:focus-within .foundation-sequence-card__cta .arrow {
  transform: translateX(3px);
}

/* ─────────────────────────────────────────────────────────────────
   Homepage FAA Methodology section — two-column executive layout.
   Replaces the previous single-column text-heavy intro with a
   balanced left-copy / right-sequence-panel composition. The right
   panel is a dark navy gradient card with the three numbered steps
   stacked vertically, mirroring the methodology sequence visually
   while keeping the body copy lean and outcome-focused on the left.
───────────────────────────────────────────────────────────────── */
/* Bottom padding override for the homepage methodology section. The
   inline padding-bottom: 0 used previously made the outcome chips at
   the end of the left column visually collide with the dark
   Foundation Sequence band that follows. This restores a moderate
   bottom gap (smaller than the section-y default 96px so the
   white -> dark transition still reads as deliberate, but large
   enough to give the chips real breathing room above the next
   section). */
.home-methodology-section__container {
  padding-bottom: clamp(48px, 5vw, 72px);
}

.home-methodology-inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(36px, 5vw, 72px);
  align-items: start;
}
@media (min-width: 1024px) {
  .home-methodology-inner {
    grid-template-columns: minmax(0, 1.05fr) minmax(360px, 0.95fr);
    gap: clamp(48px, 6vw, 88px);
    /* align-items: start (inherited) — both columns share the same
       top edge, so the dark sequence card aligns flush with the
       eyebrow on the left rather than vertically centering against
       the longer left column and floating awkwardly in the middle. */
    align-items: start;
  }
}
.home-methodology-copy {
  max-width: 640px;
}
.home-methodology-copy h2 {
  /* Tighter letter-spacing than the global .h2 default for an
     executive editorial feel on this hero-of-second-fold headline. */
  letter-spacing: -0.025em;
}
.home-methodology-outcomes {
  margin-top: clamp(28px, 3vw, 40px);
}
.home-methodology-outcomes__label {
  margin: 0 0 12px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--faa-navy);
}
.home-methodology-outcomes__chips {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  /* All six chips fit on a single row at desktop widths. Falls back
     to wrap on narrower viewports where the left column is too tight. */
  flex-wrap: wrap;
  gap: 6px 7px;
}
.home-methodology-outcomes__chips li {
  display: inline-flex;
  align-items: center;
  padding: 5px 11px;
  font-size: 12px;
  font-weight: 600;
  color: var(--faa-navy);
  background: linear-gradient(180deg, rgba(247, 251, 255, 1) 0%, rgba(234, 243, 250, 0.95) 100%);
  border: 1px solid rgba(45, 104, 158, 0.18);
  border-radius: 999px;
  letter-spacing: 0.005em;
  white-space: nowrap;
}
@media (min-width: 1024px) {
  /* Force the six outcome chips onto a single row at desktop widths.
     The left column at this size has ~570px+ of content width which
     comfortably holds all six chips at the compact sizing above. */
  .home-methodology-outcomes__chips {
    flex-wrap: nowrap;
  }
}

/* Right-side methodology sequence panel — dark navy card with the
   three numbered steps stacked vertically. Each step is its own
   link so users can jump directly into the pillar pages from this
   panel. */
.home-methodology-sequence {
  position: relative;
  display: grid;
  gap: 12px;
  padding: clamp(20px, 2.6vw, 30px);
  border-radius: 16px;
  background:
    radial-gradient(circle at 90% 10%, rgba(40, 170, 210, 0.22), transparent 32%),
    linear-gradient(135deg, #07172c 0%, #102b49 58%, #163d61 100%);
  box-shadow:
    0 24px 60px rgba(8, 24, 46, 0.18),
    inset 0 0 0 1px rgba(255, 255, 255, 0.07);
  overflow: hidden;
  isolation: isolate;
}
.home-methodology-sequence::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.04), transparent 42%),
    radial-gradient(circle at 18% 82%, rgba(127, 212, 255, 0.14), transparent 32%);
  pointer-events: none;
}
.home-methodology-step {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 16px;
  row-gap: 4px;
  align-items: start;
  padding: 16px 18px;
  border-radius: 10px;
  text-decoration: none;
  color: var(--faa-white);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.10);
  transition: transform 180ms ease, background 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}
.home-methodology-step:hover,
.home-methodology-step:focus-visible {
  transform: translateY(-2px);
  background: rgba(255, 255, 255, 0.09);
  border-color: rgba(127, 212, 255, 0.48);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.18);
}
.home-methodology-step:focus-visible {
  outline: 2px solid rgba(127, 212, 255, 0.92);
  outline-offset: 3px;
}
.home-methodology-step__num {
  grid-row: span 2;
  font-family: 'Source Serif 4', 'Source Serif Pro', Georgia, serif;
  font-size: 22px;
  font-weight: 600;
  line-height: 1;
  color: #7fd4ff;
  letter-spacing: 0;
}
.home-methodology-step__label {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.25;
  color: var(--faa-white);
  letter-spacing: -0.005em;
}
.home-methodology-step__copy {
  font-size: 13px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.72);
}

/* ─────────────────────────────────────────────────────────────────
   Engagement Model section (homepage "How to Engage")
   Editorial pathway: three large horizontal panels representing the
   diagnose → execute → scale sequence. Alternating image/copy
   columns on desktop, single-column vertical pathway on mobile, with
   a thin vertical connector running behind the cards to reinforce
   the sequence. Step 02 (90-Day AI Execution Sprint) is visually
   emphasized as the Core Execution Engagement with a blue top rule,
   soft shadow, and an inline editorial label.

   Replaces the previous 3-up .engagement-grid/.engagement-card card
   layout — stronger differentiation from the methodology, industry,
   and insights card grids elsewhere on the home page.
───────────────────────────────────────────────────────────────── */
.engagement-pathway {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 28px;
  position: relative;
}
@media (min-width: 768px) {
  .engagement-pathway { gap: 40px; }
}
@media (min-width: 1024px) {
  .engagement-pathway { gap: 56px; }
}
/* Vertical connector running down the center of the pathway, behind
   the cards. Visible only in the gaps between steps — cards sit at
   z-index 1 with white backgrounds so the line reads as a
   progression spine. */
.engagement-pathway::before {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--faa-gray-200);
  z-index: 0;
  pointer-events: none;
}

.engagement-step {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr;
  background: var(--faa-white);
  border: 1px solid var(--faa-gray-100);
  border-radius: 4px;
}
@media (min-width: 1024px) {
  .engagement-step {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: stretch;
  }
  /* Alternating layout: image LEFT on 01 + 03, image RIGHT on 02
     (the featured Core Execution Engagement, anchoring the middle of
     the pathway with the inverse rhythm). */
  .engagement-step--02 .engagement-step__media { order: 2; }
  .engagement-step--02 .engagement-step__content { order: 1; }
}

.engagement-step__media {
  margin: 0;
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  min-height: 220px;
  background: var(--faa-gray-100);
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
}
@media (min-width: 1024px) {
  .engagement-step__media {
    aspect-ratio: auto;
    min-height: 380px;
    border-top-right-radius: 0;
    border-bottom-left-radius: 4px;
  }
  /* On step 02 the image sits on the right, so swap the rounded
     corners to follow that edge. */
  .engagement-step--02 .engagement-step__media {
    border-bottom-left-radius: 0;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
  }
}
.engagement-step__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform 600ms ease-out;
}
/* Focal-point biasing per CEP guidance. */
.engagement-step--01 .engagement-step__media img { object-position: center 35%; }
.engagement-step--02 .engagement-step__media img { object-position: center 60%; }
.engagement-step--03 .engagement-step__media img { object-position: center center; }
.engagement-step:hover .engagement-step__media img,
.engagement-step:focus-within .engagement-step__media img {
  transform: scale(1.03);
}

.engagement-step__content {
  padding: 28px 28px 32px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  justify-content: center;
}
@media (min-width: 1024px) {
  .engagement-step__content {
    padding: 44px 48px;
    gap: 14px;
  }
}
@media (min-width: 1280px) {
  .engagement-step__content {
    padding: 56px 64px;
  }
}

.engagement-step__header {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 2px;
}
.engagement-step__num {
  font-family: 'Source Serif 4', 'Source Serif Pro', Georgia, serif;
  font-size: 30px;
  font-weight: 600;
  color: var(--faa-blue);
  line-height: 1;
}
@media (min-width: 1024px) {
  .engagement-step__num { font-size: 36px; }
}
.engagement-step__phase {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--faa-gray-600);
  line-height: 1;
}
.engagement-step__featured-label {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--faa-blue);
  line-height: 1;
}

.engagement-step__title {
  margin: 4px 0 0;
  font-size: 24px;
  font-weight: 600;
  line-height: 1.22;
  color: var(--faa-navy);
  letter-spacing: -0.01em;
}
@media (min-width: 1024px) {
  .engagement-step__title { font-size: 28px; }
}
.engagement-step__title a {
  color: inherit;
  text-decoration: none;
  transition: color 180ms ease-out;
}
.engagement-step__title a:hover,
.engagement-step__title a:focus-visible {
  color: var(--faa-blue);
}

.engagement-step__lede {
  margin: 0;
  font-size: 16px;
  line-height: 1.6;
  color: var(--faa-gray-600);
}

.engagement-step__list {
  margin: 4px 0 0;
  padding-left: 18px;
  font-size: 15px;
  line-height: 1.65;
  color: var(--faa-gray-600);
}
.engagement-step__list li {
  margin-bottom: 4px;
}
.engagement-step__list li:last-child {
  margin-bottom: 0;
}

.engagement-step__cta {
  margin-top: 10px;
  align-self: flex-start;
}
/* Stretched-link pattern — make the entire .engagement-step tile a
   single click target. The CTA's ::after pseudo absolutely covers the
   whole card. Pseudo positioning looks up to the nearest positioned
   ancestor; .engagement-step already has position: relative so the
   pseudo stretches to fill it. The CTA itself stays position: static
   on purpose — if it were positioned, the pseudo would only cover
   the CTA's own text box. The pseudo is transparent so the inline
   text and arrow stay visible underneath. Clicks anywhere on the
   tile fire the CTA link's href because pseudos forward pointer
   events to their generating element. */
.engagement-step {
  cursor: pointer;
}
.engagement-step__cta::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}
/* With the stretched pseudo capturing pointer events, the title <a>
   no longer triggers its own :hover when the mouse is over the
   title's text region (the pseudo is on top). Tie the title's
   color-shift to the parent card's hover/focus-within instead so
   hovering anywhere on the tile still produces the engagement signal. */
.engagement-step:hover .engagement-step__title a,
.engagement-step:focus-within .engagement-step__title a {
  color: var(--faa-blue);
}

/* Featured 02: subtle blue top rule + soft shadow. Reads as 'the
   primary engagement,' not a pricing upsell. */
.engagement-step--featured {
  border-top: 3px solid var(--faa-blue);
  box-shadow: 0 6px 22px rgba(15, 23, 42, 0.08);
}

/* Editorial guidance line under the pathway. Centered, restrained
   color, with subtle inline link styling. */
.engagement-guidance {
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  color: var(--faa-gray-600);
  font-size: 15px;
  line-height: 1.65;
}
.engagement-guidance a {
  color: var(--faa-blue);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  transition: color 180ms ease-out;
}
.engagement-guidance a:hover {
  color: var(--faa-navy);
}

/* Hero carousel — EY-style 4-slide feature */
.hero-carousel {
  position: relative;
  width: 100%;
  /* Hero height tightened from 760px down toward the B2B consulting
     standard (560–700px). At 1080p this used to consume the entire
     fold; now it leaves ~300px of next-section preview visible. */
  min-height: 680px;
  background: var(--faa-navy);
  overflow: hidden;
  isolation: isolate;
}
@media (min-width: 1024px) {
  .hero-carousel { min-height: 680px; }
}
.hero-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 600ms ease-out;
  pointer-events: none;
}
.hero-slide.is-active {
  opacity: 1;
  pointer-events: auto;
  z-index: 1;
}
.hero-slide-image {
  position: absolute;
  inset: 0;
  background-color: var(--faa-navy-deep);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
/* Distinct placeholder treatments per slide so the four slides feel different */
.hero-slide[data-slide="0"] .hero-slide-image[data-placeholder="true"] {
  background-image:
    radial-gradient(60% 80% at 25% 30%, rgba(45,104,158,0.55), transparent 65%),
    radial-gradient(50% 70% at 78% 70%, rgba(78,150,193,0.35), transparent 70%),
    linear-gradient(180deg, var(--faa-navy-deep) 0%, var(--faa-navy) 60%, #334155 100%);
}
.hero-slide[data-slide="1"] .hero-slide-image[data-placeholder="true"] {
  background-image:
    radial-gradient(70% 90% at 75% 30%, rgba(78,150,193,0.45), transparent 70%),
    radial-gradient(40% 60% at 20% 80%, rgba(45,104,158,0.40), transparent 70%),
    linear-gradient(160deg, #334155 0%, var(--faa-navy-deep) 100%);
}
.hero-slide[data-slide="2"] .hero-slide-image[data-placeholder="true"] {
  background-image:
    radial-gradient(55% 75% at 50% 25%, rgba(45,104,158,0.50), transparent 65%),
    radial-gradient(45% 65% at 30% 80%, rgba(78,150,193,0.30), transparent 70%),
    linear-gradient(200deg, var(--faa-navy-deep) 0%, var(--faa-navy) 100%);
}
.hero-slide[data-slide="3"] .hero-slide-image[data-placeholder="true"] {
  background-image:
    radial-gradient(60% 80% at 80% 60%, rgba(78,150,193,0.42), transparent 70%),
    radial-gradient(45% 60% at 25% 25%, rgba(45,104,158,0.35), transparent 70%),
    linear-gradient(180deg, var(--faa-navy) 0%, var(--faa-navy-deep) 100%);
}
.hero-slide-image[data-placeholder="true"]::after {
  content: "";
  position: absolute; inset: 0;
  background-image: repeating-linear-gradient(135deg, transparent 0 22px, rgba(255,255,255,0.025) 22px 23px);
}
/* Darkening gradient overlay for text legibility */
.hero-slide-overlay {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(15,23,42,0.12) 0%, rgba(15,23,42,0.40) 60%, rgba(15,23,42,0.85) 100%),
    linear-gradient(90deg, rgba(15,23,42,0.78) 0%, rgba(15,23,42,0.58) 38%, rgba(15,23,42,0.16) 56%, transparent 74%);
}
.hero-slide-content {
  position: relative;
  z-index: 1;
  height: 100%;
  min-height: inherit;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: 72px;
  padding-bottom: 128px;
}
@media (min-width: 1024px) {
  .hero-slide-content { padding-top: 88px; padding-bottom: 126px; }
}
.hero-text-block {
  position: relative;
  padding-left: 24px;
  /* Mobile/tablet: respect the container's content width. The previous
     rule used min(34vw, 500px) which evaluated to ~127px on a 375px
     phone viewport — too narrow, forcing the headline to wrap word by
     word. width: 100% + max-width: 500px keeps the block readable on
     every breakpoint without overflowing the container. */
  width: 100%;
  max-width: 500px;
}
@media (min-width: 1024px) {
  /* Desktop: re-enable the editorial negative margin-left shift so the
     hero text block sits in the page-hero's quiet left zone. */
  .hero-text-block { margin-left: clamp(-96px, -4vw, -44px); }
}
.hero-text-block::before {
  content: "";
  position: absolute;
  left: 0; top: 6px; bottom: 6px;
  width: 3px;
  background: var(--faa-highlight);
}
.hero-headline {
  color: var(--faa-white);
  font-size: clamp(34px, 4vw, 56px);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.08;
  max-width: 100%;
}
.hero-dek {
  color: rgba(255,255,255,0.92);
  /* Bumped from clamp(13, 0.95vw, 15) to clamp(15, 1.1vw, 17) so
     hero body copy lands in the executive-readable range (17–20px
     is industry standard for hero deks). Line-height pulled back
     from 1.5 to 1.45 so the increased size doesn't drive hero
     height up — readable but compact. */
  font-size: clamp(15px, 1.1vw, 17px);
  line-height: 1.45;
  max-width: 100%;
  margin-top: 16px;
}
.hero-subhead {
  color: rgba(255,255,255,0.92);
  font-size: clamp(15px, 1.1vw, 18px);
  line-height: 1.35;
  font-weight: 600;
  margin-top: 16px;
}
.hero-dek p {
  margin: 0 0 9px;
}
.hero-dek p:last-child {
  margin-bottom: 0;
}
@media (min-width: 1280px) {
  .hero-text-block {
    width: min(33vw, 520px);
    max-width: 520px;
    margin-left: clamp(-104px, -5vw, -56px);
  }
}
@media (max-width: 1023px) {
  .hero-carousel {
    min-height: 820px;
  }
  .hero-slide-content {
    padding-top: 64px;
    padding-bottom: 140px;
  }
  .hero-text-block {
    width: min(82vw, 620px);
    max-width: 620px;
    margin-left: 0;
  }
  .hero-headline {
    max-width: 16ch;
  }
}
@media (max-width: 640px) {
  .hero-carousel {
    min-height: 880px;
  }
  .hero-dek {
    font-size: 14px;
    line-height: 1.45;
  }
  .hero-dek p {
    margin-bottom: 10px;
  }
}
@media (min-width: 1024px) and (max-width: 1180px) {
  .hero-text-block {
    width: min(34vw, 430px);
    max-width: 430px;
    margin-left: clamp(-56px, -3vw, -32px);
  }
}

/* Carousel arrows */
.hero-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 4;
  width: 40px;
  height: 64px;
  background: rgba(15,23,42,0.55);
  border: 1px solid rgba(255,255,255,0.15);
  color: var(--faa-white);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 180ms ease-out, border-color 180ms ease-out;
}
.hero-arrow:hover {
  background: rgba(15,23,42,0.85);
  border-color: rgba(255,255,255,0.35);
}
.hero-arrow.prev { left: 0; }
.hero-arrow.next { right: 0; }
.hero-arrow svg { width: 18px; height: 18px; }
@media (min-width: 768px) {
  .hero-arrow { width: 48px; height: 72px; }
}

/* Bottom slide-tab nav */
.hero-tabs {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 3;
  border-top: 1px solid rgba(255,255,255,0.10);
  background: linear-gradient(180deg, transparent 0%, rgba(15,23,42,0.35) 100%);
}
.hero-tabs-inner {
  display: flex;
  gap: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.hero-tabs-inner::-webkit-scrollbar { display: none; }
.hero-tab {
  flex: 0 0 auto;
  background: transparent;
  border: 0;
  color: rgba(255,255,255,0.55);
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.01em;
  padding: 18px 22px 16px;
  cursor: pointer;
  white-space: nowrap;
  border-bottom: 3px solid transparent;
  transition: color 180ms ease-out, border-color 180ms ease-out;
  text-align: center;
}
@media (min-width: 768px) {
  .hero-tab { font-size: 15px; padding: 22px 28px 18px; flex: 1 1 0; }
}
.hero-tab:hover { color: rgba(255,255,255,0.9); }
.hero-tab.is-active {
  color: var(--faa-white);
  border-bottom-color: var(--faa-highlight);
}

@media (prefers-reduced-motion: reduce) {
  .hero-slide { transition: none; }
}

/* Sub-nav active state */
.subnav-link {
  position: relative;
  color: var(--faa-white);
  font-size: 14px;
  font-weight: 500;
  height: 48px;
  display: inline-flex;
  align-items: center;
  padding: 0 4px;
  transition: color 180ms ease-out;
}
.subnav-link::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: transparent;
  transition: background 180ms ease-out;
}
.subnav-link:hover { color: var(--faa-blue-light); }
.subnav-link.active { color: var(--faa-white); }
.subnav-link.active::after { background: var(--faa-blue-light); }

/* Primary nav block — clamp-based responsive spacing.
   The HTML uses `mx-6 gap-6` (24px each side, 24px between items)
   which is too tight on wide screens (Home crowds the logo, the
   utility cluster crowds About). Higher specificity than the
   Tailwind utilities so we override the left+right margins AND
   the inter-link gap with clamp() values that scale with the
   viewport. The nav only renders at >=1280px (`hidden xl:flex`),
   so the clamp range is tuned for desktop widths. */
#site-header nav[aria-label="Primary"] {
  margin-left: clamp(32px, 4vw, 56px);
  margin-right: clamp(24px, 3vw, 44px);
  gap: clamp(18px, 1.7vw, 30px);
}
@media (max-width: 1366px) {
  /* Narrow desktop — tighten the inter-link gap a touch so the six
     primary links + right utility cluster never wrap. */
  #site-header nav[aria-label="Primary"] {
    margin-left: clamp(24px, 3vw, 40px);
    margin-right: clamp(16px, 2vw, 28px);
    gap: clamp(14px, 1.4vw, 22px);
  }
}
/* Caret on dropdown triggers — small extra breathing room between
   the label text and the caret arrow. The .utilnav-link gap:6px
   already handles base spacing; this nudge prevents the caret from
   visually fusing with the last letter at certain font weights. */
.utilnav-link .caret {
  margin-left: 1px;
}

/* Utility nav links */
.utilnav-link {
  position: relative;
  color: var(--faa-navy);
  font-size: 13px;
  font-weight: 500;
  transition: color 180ms ease-out;
  height: 96px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: 0;
  cursor: pointer;
  padding: 0;
  font-family: inherit;
  white-space: nowrap;
}
.utilnav-link:hover { color: var(--faa-blue); }
.utilnav-link .caret {
  width: 8px; height: 8px;
  transition: transform 180ms ease-out;
  color: currentColor;
}
.utilnav-link[aria-expanded="true"] {
  color: var(--faa-blue);
}
.utilnav-link[aria-expanded="true"]::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 2px;
  background: var(--faa-blue);
}
.utilnav-link[aria-expanded="true"] .caret {
  transform: rotate(180deg);
}
/* Active-page indicator on primary nav */
.utilnav-link[aria-current="page"] { color: var(--faa-blue); }
.utilnav-link[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 2px;
  background: var(--faa-blue);
}

.mobile-menu-toggle {
  width: 40px;
  height: 40px;
  margin-left: 12px;
  border: 1px solid var(--faa-gray-200);
  border-radius: 4px;
  background: var(--faa-white);
  color: var(--faa-navy);
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  cursor: pointer;
}
.mobile-menu-toggle span {
  width: 18px;
  height: 1px;
  background: currentColor;
  display: block;
}
.mobile-menu-panel {
  display: none;
  position: absolute;
  left: 0;
  right: 0;
  top: 96px;
  z-index: 70;
  background: var(--faa-white);
  border-top: 1px solid var(--faa-gray-100);
  border-bottom: 1px solid var(--faa-gray-200);
  box-shadow: 0 14px 24px rgba(15,23,42,0.08);
  padding: 10px 24px 18px;
  /* Cap the panel at the available viewport height (below the 96px
     sticky header) and let it scroll internally when the menu has
     more items than fit. Without this, the content overflows below
     the fold with no way to reach it — the page itself can't scroll
     because the header (and this absolutely-positioned panel) sits
     on top of everything. Use dynamic-viewport-height (dvh) so the
     panel adjusts as iOS Safari's URL bar shows/hides; vh is the
     fallback for older browsers. -webkit-overflow-scrolling: touch
     enables momentum scroll on legacy iOS. */
  max-height: calc(100vh - 96px);
  max-height: calc(100dvh - 96px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
.mobile-menu-panel[data-open="true"] {
  display: grid;
}
.mobile-menu-panel a {
  /* Explicit block so anchors nested inside .mobile-menu-section
     (Methodology + AI Training groups) stack vertically. Top-level
     panel anchors already behaved block-like because the panel is
     a grid container, but section-nested anchors are inline by
     default and were running together on one line. */
  display: block;
  color: var(--faa-navy);
  font-size: 16px;
  font-weight: 500;
  padding: 13px 0;
  border-bottom: 1px solid var(--faa-gray-100);
}
.mobile-menu-panel > a:last-child {
  border-bottom: 0;
}
/* Inside a section group (Methodology / AI Training), every nested
   link keeps its own bottom divider — including the last anchor in
   the section. The section wrapper itself adds no extra padding or
   border, so the rhythm of dividers matches top-level items above
   and below and the last item in each section (e.g. "AI Workforce
   Development") aligns visually with the rest. */
.mobile-menu-section a {
  border-bottom: 1px solid var(--faa-gray-100);
}
.mobile-menu-panel .mobile-menu-cta {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin-top: 12px;
  padding: 14px 16px;
  /* Shares the Frontier Signal treatment with the rest of the CTA
     system. Full-width inside the hamburger panel so we keep the
     wedge accent suppressed (a polygon doesn't look right under a
     full-width pill on small screens). */
  background: var(--faa-cta-bg);
  color: var(--faa-cta-text);
  font-weight: 600;
  font-size: 15px;
  border: 1px solid var(--faa-cta-border);
  border-radius: var(--faa-cta-radius);
  text-align: center;
  text-decoration: none;
  box-shadow: 0 10px 22px rgba(0, 35, 80, 0.24), 0 0 14px rgba(17, 164, 194, 0.18);
  transition: background 180ms ease-out, border-color 180ms ease-out, box-shadow 180ms ease-out;
}
.mobile-menu-panel .mobile-menu-cta:hover,
.mobile-menu-panel .mobile-menu-cta:focus-visible {
  background: var(--faa-cta-bg-hover);
  border-color: var(--faa-cta-border-hover);
  color: var(--faa-cta-text);
  box-shadow: 0 14px 28px rgba(0, 35, 80, 0.32), 0 0 18px rgba(17, 164, 194, 0.26);
}
.mobile-menu-panel .mobile-menu-cta:focus-visible {
  outline: 2px solid var(--faa-cta-focus);
  outline-offset: 2px;
}
@media (min-width: 1280px) {
  .mobile-menu-toggle,
  .mobile-menu-panel {
    display: none !important;
  }
}
/* Header CTA: hide on mobile (the `.btn` rule's display:inline-flex
   beats Tailwind's `.hidden`, so add a header-scoped override). */
@media (max-width: 639px) {
  #site-header .btn-primary {
    display: none;
  }
}

.subscribe-status {
  margin-top: 12px;
  color: var(--faa-blue);
  font-size: 13px;
}

/* Mega menu panel */
.mega-menu {
  position: absolute;
  left: 0; right: 0; top: 96px;
  background: var(--faa-white);
  border-top: 1px solid var(--faa-gray-100);
  border-bottom: 1px solid var(--faa-gray-100);
  box-shadow: 0 12px 24px rgba(30,41,59,0.06);
  display: none;
  z-index: 60;
}
.mega-menu[data-open="true"] { display: block; }
.mega-menu-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 36px 24px 40px;
}
@media (min-width: 768px) {
  .mega-menu-inner { padding: 40px 48px 48px; }
}
.mega-menu h4 {
  color: var(--faa-navy);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin-bottom: 24px;
}
.mega-menu h4 a {
  color: inherit;
  text-decoration: none;
  transition: color 180ms ease-out;
}
.mega-menu h4 a:hover,
.mega-menu h4 a:focus-visible {
  color: var(--faa-blue);
}
.mega-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 32px;
}
@media (min-width: 768px) {
  /* 10 industries laid out as a 5×2 grid for visual symmetry. */
  .mega-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 18px 28px; }
}
.mega-grid-3 {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: 24px 48px;
}
@media (min-width: 768px) {
  .mega-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px 48px; }
}
.mega-group-heading {
  color: var(--faa-blue);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--faa-gray-200);
}
/* ─────────────────────────────────────────────────────────────────
   Methodology mega-menu — card-style layout that replaces the three
   top-level methodology nav links with a single "Methodology" entry.
   Two-group layout: three numbered methodology pillar cards on the
   left, a single enablement card (AI Training & Workforce Development)
   on the right, visually distinguished from the pillars so it does
   not read as a fourth methodology step.
───────────────────────────────────────────────────────────────── */
.mega-method-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
}
@media (min-width: 1024px) {
  .mega-method-layout {
    grid-template-columns: minmax(0, 3fr) minmax(0, 1.25fr);
    gap: 48px;
    align-items: stretch;
  }
}
.mega-method-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}
@media (min-width: 768px) {
  .mega-method-cards {
    gap: 16px;
  }
  /* Three-card layout — Methodology mega-menu (Data Curation /
     Workflow / AI Design pillars). */
  .mega-method-cards--three {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  /* Two-card layout — AI Training mega-menu (Bootcamp / Workforce
     Development). */
  .mega-method-cards--two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
/* Backward compatibility: keep the old scoped selector in case any
   page still references the .mega-method-core wrapper structure. */
.mega-method-core .mega-method-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin-top: 14px;
}
@media (min-width: 768px) {
  .mega-method-core .mega-method-cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
  }
}
.mega-method-enablement {
  display: flex;
  flex-direction: column;
}
.mega-method-enablement .mega-method-card {
  margin-top: 14px;
  flex: 1;
}
.mega-method-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px 18px;
  border: 1px solid var(--faa-gray-100);
  border-radius: 4px;
  background: var(--faa-white);
  transition: border-color 180ms ease-out, background 180ms ease-out;
  text-decoration: none;
}
.mega-method-card:hover,
.mega-method-card:focus-visible {
  border-color: var(--faa-blue);
  background: var(--faa-blue-50);
}
.mega-method-num {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--faa-blue);
  text-transform: uppercase;
}
.mega-method-title {
  color: var(--faa-navy);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.3;
}
.mega-method-dek {
  color: var(--faa-gray-600);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.45;
}
/* Enablement variant: left blue accent + softer background tint to
   signal "separate offering, not a methodology step." */
.mega-method-card--enablement {
  border-left: 3px solid var(--faa-blue);
  padding-left: 17px;
  background: var(--faa-gray-50);
}
.mega-method-card--enablement:hover,
.mega-method-card--enablement:focus-visible {
  background: var(--faa-blue-50);
}

/* ─────────────────────────────────────────────────────────────────
   Methodology pillar mega-menu — side-by-side image + copy layout.
   Three horizontal cards stacked vertically inside the dropdown.
   Each card: photographic thumbnail on the left (~38%), executive
   copy on the right (~62%). Replaces the prior full-card image-
   with-overlay treatment so the photography reads clearly and the
   copy is no longer washed out by a gradient.
   Used only by the Methodology dropdown — AI Training still uses
   the .mega-method-cards/.mega-method-card pattern above.
───────────────────────────────────────────────────────────────── */
.mega-pillar-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}
.mega-pillar-card {
  display: grid;
  grid-template-columns: 1fr;
  overflow: hidden;
  text-decoration: none;
  background: var(--faa-white);
  border: 1px solid var(--faa-gray-100);
  border-radius: 8px;
  transition: transform 220ms ease-out, border-color 200ms ease-out, box-shadow 220ms ease-out;
}
@media (min-width: 768px) {
  .mega-pillar-card {
    /* Image ~38% / content ~62% — within the design spec's 34-42%
       / 58-66% range. */
    grid-template-columns: 38% minmax(0, 1fr);
    align-items: stretch;
    /* Equalize card heights across the three pillars so the image
       aspect ratios match even though the copy lengths differ. */
    min-height: 200px;
  }
}
@media (min-width: 1280px) {
  .mega-pillar-card {
    min-height: 220px;
  }
}
.mega-pillar-card__image {
  position: relative;
  aspect-ratio: 16 / 10;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transition: transform 600ms ease-out;
  /* Photographs stand on their own — no overlay wash. The slight
     border-right keeps a hairline between image and copy at the
     seam. */
  border-right: 1px solid var(--faa-gray-100);
}
@media (min-width: 768px) {
  .mega-pillar-card__image {
    /* Stretch to card height on desktop so image and copy column
       are always equal-height. */
    aspect-ratio: auto;
    min-height: 160px;
  }
}
@media (min-width: 1280px) {
  .mega-pillar-card__image { min-height: 180px; }
}
/* Drop the previous gradient wash — image is no longer text-bearing. */
.mega-pillar-card__image::after {
  display: none;
}
.mega-pillar-card__content {
  padding: 18px 22px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  justify-content: center;
}
@media (min-width: 1024px) {
  .mega-pillar-card__content {
    padding: 22px 28px;
    gap: 8px;
  }
}
.mega-pillar-card__num {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--faa-blue);
}
.mega-pillar-card__title {
  margin: 0;
  color: var(--faa-navy);
  font-size: 19px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.01em;
  transition: color 200ms ease-out;
}
@media (min-width: 1280px) {
  .mega-pillar-card__title { font-size: 21px; }
}
.mega-pillar-card__dek {
  margin: 0;
  color: var(--faa-gray-700);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
}
.mega-pillar-card__copy {
  margin: 0;
  max-width: 56ch;
  color: var(--faa-gray-600);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.5;
}
@media (max-width: 1023px) {
  .mega-pillar-card__copy { display: none; }
}
.mega-pillar-card:hover,
.mega-pillar-card:focus-visible {
  border-color: var(--faa-blue);
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.08);
  transform: translateY(-1px);
}
.mega-pillar-card:hover .mega-pillar-card__title,
.mega-pillar-card:focus-visible .mega-pillar-card__title {
  color: var(--faa-blue);
}
.mega-pillar-card:hover .mega-pillar-card__image,
.mega-pillar-card:focus-visible .mega-pillar-card__image {
  transform: scale(1.03);
}
.mega-pillar-card:focus-visible {
  outline: 2px solid var(--faa-blue);
  outline-offset: 2px;
}
.mega-pillar-card--01 .mega-pillar-card__image {
  background-image: url('/assets/navigation/methodology/methodology-data-curation-governance.webp');
}
.mega-pillar-card--02 .mega-pillar-card__image {
  background-image: url('/assets/navigation/methodology/methodology-workflow-optimization.webp');
}
.mega-pillar-card--03 .mega-pillar-card__image {
  background-image: url('/assets/navigation/methodology/methodology-ai-design-implementation.webp');
}

/* ─────────────────────────────────────────────────────────────────
   AI Training mega-menu — image-backed card variant.
   Same visual language as the Methodology pillar cards (image
   bleeding to the bottom under a soft white wash, content sitting
   on top) but two columns instead of three, so each card is wider
   relative to its height. Used only by the AI Training dropdown.
───────────────────────────────────────────────────────────────── */
.mega-ai-training-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
@media (min-width: 768px) {
  .mega-ai-training-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
    border: 1px solid var(--faa-gray-100);
    border-radius: 8px;
    overflow: hidden;
    background: var(--faa-white);
  }
}
.mega-ai-training-card {
  position: relative;
  display: block;
  overflow: hidden;
  min-height: 380px;
  text-decoration: none;
  background: var(--faa-white);
  transition: transform 220ms ease-out;
  isolation: isolate;
}
@media (min-width: 1280px) {
  .mega-ai-training-card { min-height: 420px; }
}
@media (min-width: 1536px) {
  .mega-ai-training-card { min-height: 460px; }
}
@media (min-width: 768px) {
  .mega-ai-training-card + .mega-ai-training-card {
    border-left: 1px solid var(--faa-gray-100);
  }
}
.mega-ai-training-card__image {
  position: absolute;
  inset: 0;
  z-index: 1;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transition: transform 600ms ease-out;
}
/* Wash extended into the lower-middle so the content block (now
   pinned at ~52% from the top) sits on a strong white backdrop.
   Above ~55% the image reads clearly — mirrors the Methodology
   dropdown treatment for visual family. */
.mega-ai-training-card__image::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(255, 255, 255, 0.94) 0%,
    rgba(255, 255, 255, 0.90) 40%,
    rgba(255, 255, 255, 0.72) 55%,
    rgba(255, 255, 255, 0.20) 75%,
    rgba(255, 255, 255, 0.00) 100%
  );
}
/* Content pinned at a fixed offset from the top of the card so the
   Foundations / Applied labels align across both cards, with image
   showing in the upper ~52% of the tile. */
.mega-ai-training-card__content {
  position: absolute;
  left: 0;
  right: 0;
  top: 52%;
  bottom: auto;
  z-index: 2;
  padding: 0 32px 28px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
@media (min-width: 1280px) {
  .mega-ai-training-card__content { padding: 0 44px 32px; gap: 10px; }
}
.mega-ai-training-card__num {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--faa-blue);
}
.mega-ai-training-card__title {
  margin: 0;
  color: var(--faa-navy);
  font-size: clamp(22px, 1.6vw, 28px);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.01em;
  transition: color 200ms ease-out;
}
.mega-ai-training-card__dek {
  margin: 0;
  max-width: 44ch;
  color: var(--faa-gray-700);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.5;
}
.mega-ai-training-card:hover .mega-ai-training-card__title,
.mega-ai-training-card:focus-visible .mega-ai-training-card__title {
  color: var(--faa-blue);
}
.mega-ai-training-card:hover .mega-ai-training-card__image,
.mega-ai-training-card:focus-visible .mega-ai-training-card__image {
  transform: scale(1.03);
}
.mega-ai-training-card:focus-visible {
  outline: 2px solid var(--faa-blue);
  outline-offset: -2px;
}
.mega-ai-training-card--bootcamp .mega-ai-training-card__image {
  background-image: url('/assets/navigation/ai-training/ai-training-bootcamp.webp');
}
.mega-ai-training-card--workforce .mega-ai-training-card__image {
  background-image: url('/assets/navigation/ai-training/ai-training-workforce-development.webp');
}

/* ─────────────────────────────────────────────────────────────────
   Industries mega-menu — image-backed tile grid.
   Replaces the previous .mega-grid / .mega-link text-only layout.
   Reuses the homepage industry card .webp images as faint
   backgrounds so the dropdown visually echoes the homepage section
   while staying compact enough for nav.
───────────────────────────────────────────────────────────────── */
.mega-industry-tiles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
@media (min-width: 768px) {
  .mega-industry-tiles {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 14px;
  }
}
.mega-industry-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 130px;
  padding: 16px 18px;
  border: 1px solid var(--faa-gray-100);
  border-radius: 6px;
  background-color: var(--faa-white);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  text-decoration: none;
  overflow: hidden;
  isolation: isolate;
  transition: border-color 180ms ease-out, transform 180ms ease-out,
              box-shadow 180ms ease-out;
}
@media (min-width: 1280px) {
  .mega-industry-tile { min-height: 150px; padding: 18px 20px; }
}
/* Soft white wash so the photo reads as atmosphere, not noise.
   Sits above the background image but below the text content. */
.mega-industry-tile::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.94) 0%,
    rgba(255, 255, 255, 0.86) 100%
  );
  z-index: 1;
  transition: background 180ms ease-out;
}
.mega-industry-tile__title,
.mega-industry-tile__meta {
  position: relative;
  z-index: 2;
}
.mega-industry-tile__title {
  color: var(--faa-navy);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.005em;
  transition: color 180ms ease-out;
}
.mega-industry-tile__meta {
  color: var(--faa-gray-700);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;
}
.mega-industry-tile:hover,
.mega-industry-tile:focus-visible {
  border-color: var(--faa-blue);
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.08);
}
.mega-industry-tile:hover::before,
.mega-industry-tile:focus-visible::before {
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.86) 0%,
    rgba(255, 255, 255, 0.74) 100%
  );
}
.mega-industry-tile:hover .mega-industry-tile__title,
.mega-industry-tile:focus-visible .mega-industry-tile__title {
  color: var(--faa-blue);
}
.mega-industry-tile:focus-visible {
  outline: 2px solid var(--faa-blue);
  outline-offset: -2px;
}
/* Per-industry image bindings — reuses the homepage industry card
   .webp files already in /assets/. */
.mega-industry-tile--manufacturing {
  background-image: url('/assets/homepage-industry-manufacturing-industrial-production.webp');
}
.mega-industry-tile--eci {
  background-image: url('/assets/homepage-industry-engineering-construction-infrastructure.webp');
}
.mega-industry-tile--logistics {
  background-image: url('/assets/homepage-industry-transportation-logistics.webp');
}
.mega-industry-tile--energy {
  background-image: url('/assets/homepage-industry-energy-natural-resources.webp');
}
.mega-industry-tile--distribution {
  background-image: url('/assets/homepage-industry-distribution-wholesale.webp');
}
.mega-industry-tile--equipment {
  background-image: url('/assets/homepage-industry-industrial-equipment.webp');
}
.mega-industry-tile--specialty {
  background-image: url('/assets/homepage-industry-specialty-manufacturing.webp');
}
.mega-industry-tile--professional {
  background-image: url('/assets/homepage-industry-professional-technical-services.webp');
}
.mega-industry-tile--financial {
  background-image: url('/assets/homepage-industry-financial-services-banking.webp');
}
.mega-industry-tile--ai-data {
  background-image: url('/assets/homepage-industry-ai-data-it-systems.webp');
}

/* ─────────────────────────────────────────────────────────────────
   "Where We Work" mega-menu — premium variant.
   Adds a left strategic context panel + tinted gradient surface +
   slightly more visible photos + an arrow cue on hover. All scoped
   under .mega-menu--industries so the Methodology / AI Training /
   AI Perspectives mega-menus keep their existing white treatment.
───────────────────────────────────────────────────────────────── */
.mega-menu.mega-menu--industries {
  /* Premium tinted surface — soft vertical gradient + a corner
     radial cyan accent that picks up the FAA blue/cyan palette
     without competing with the tiles. */
  background:
    radial-gradient(circle at 18% 8%, rgba(61, 150, 210, 0.10), transparent 32%),
    linear-gradient(180deg, #f8fbff 0%, #edf4fa 100%);
  border-top: 1px solid rgba(42, 111, 170, 0.20);
  border-bottom: 1px solid rgba(42, 111, 170, 0.16);
  box-shadow: 0 30px 80px rgba(10, 25, 45, 0.18);
}
.mega-menu--industries .mega-menu-inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
  align-items: start;
}
@media (min-width: 900px) {
  .mega-menu--industries .mega-menu-inner {
    /* Left panel ~28% of inner width, tiles fill the rest. */
    grid-template-columns: minmax(240px, 0.32fr) 1fr;
    gap: clamp(32px, 4vw, 56px);
  }
}

/* Left strategic context panel — explains the category instead of
   asking the user to infer it from a flat sitemap. On desktop it
   becomes a slightly elevated card with a subtle border + inner
   highlight, giving the dropdown two distinct visual zones. */
.mega-menu-context {
  padding-top: 2px;
}
@media (min-width: 900px) {
  .mega-menu-context {
    padding: 24px 24px 22px;
    border-radius: 14px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.86), rgba(239, 247, 253, 0.78));
    border: 1px solid rgba(42, 111, 170, 0.16);
    box-shadow:
      0 14px 36px rgba(8, 24, 46, 0.06),
      inset 0 0 0 1px rgba(255, 255, 255, 0.62);
  }
}
.mega-menu-context__eyebrow {
  margin: 0 0 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--faa-blue);
}
/* New: editorial heading between eyebrow and body copy. Frames the
   left panel as a strategic positioning statement, not just a
   sitemap intro. */
.mega-menu-context__heading {
  margin: 0 0 12px;
  font-size: clamp(18px, 1.4vw, 22px);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--faa-navy);
}
.mega-menu-context__copy {
  margin: 0 0 18px;
  max-width: 340px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--faa-gray-700);
}
.mega-menu-context__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--faa-blue);
  text-decoration: none;
  transition: color 180ms ease;
}
.mega-menu-context__link:hover {
  color: var(--faa-navy);
  text-decoration: underline;
  text-underline-offset: 4px;
}
.mega-menu-context__link:focus-visible {
  outline: 2px solid var(--faa-blue);
  outline-offset: 4px;
  border-radius: 2px;
}

/* Right tile grid — fewer columns inside the upgraded menu so the
   tiles breathe alongside the context panel. The base
   .mega-industry-tiles still uses 5 columns site-wide (e.g. the
   homepage "Where We Work" section), but the dropdown now caps at
   4 columns on wide screens. */
.mega-menu--industries .mega-industry-tiles {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 900px) {
  .mega-menu--industries .mega-industry-tiles {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (min-width: 1200px) {
  .mega-menu--industries .mega-industry-tiles {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* Tile enhancements inside the upgraded menu — slightly larger
   radius, premium light shadow, more visible photo (less opaque
   white wash), and a bigger hover lift. */
.mega-menu--industries .mega-industry-tile {
  border-color: rgba(42, 111, 170, 0.16);
  border-radius: 10px;
  background-color: rgba(255, 255, 255, 0.92);
  box-shadow: 0 4px 14px rgba(15, 35, 60, 0.05);
}
.mega-menu--industries .mega-industry-tile::before {
  /* Lower opacity so the underlying industry photo reads more
     clearly without overpowering the title/meta text on top. */
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.86) 0%,
    rgba(255, 255, 255, 0.78) 100%
  );
}
.mega-menu--industries .mega-industry-tile:hover,
.mega-menu--industries .mega-industry-tile:focus-visible {
  transform: translateY(-3px);
  border-color: rgba(42, 111, 170, 0.50);
  box-shadow: 0 16px 36px rgba(15, 35, 60, 0.14);
}
.mega-menu--industries .mega-industry-tile:hover::before,
.mega-menu--industries .mega-industry-tile:focus-visible::before {
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.72) 0%,
    rgba(255, 255, 255, 0.62) 100%
  );
}
/* Arrow cue — pseudo element (no markup change required since the
   tile's ::after wasn't previously used). Hidden until hover so the
   default calm density is preserved. */
.mega-menu--industries .mega-industry-tile::after {
  content: "\2192"; /* → */
  position: absolute;
  right: 14px;
  bottom: 10px;
  z-index: 2;
  font-size: 14px;
  font-weight: 700;
  color: var(--faa-blue);
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity 180ms ease, transform 180ms ease;
  pointer-events: none;
}
.mega-menu--industries .mega-industry-tile:hover::after,
.mega-menu--industries .mega-industry-tile:focus-visible::after {
  opacity: 1;
  transform: translateX(0);
}

@media (max-width: 899px) {
  /* Narrow desktop / tablet — stack the context panel above the
     grid and drop the copy max-width constraint. (The mobile
     hamburger menu uses a separate panel, so these rules apply
     only when the dropdown itself is visible on a narrow window.) */
  .mega-menu-context__copy {
    max-width: none;
  }
  .mega-menu-context {
    padding: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
  }
}

/* Bottom insight strip — sits below the tile grid, spans the full
   width of the inner grid via `grid-column: 1 / -1`. Dark navy
   gradient band with a cyan link, mirroring the FAA brand accent
   and visually anchoring the bottom of the dropdown. */
.mega-menu-insight-strip {
  grid-column: 1 / -1;
  margin-top: clamp(18px, 2vw, 28px);
  padding: 16px 22px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  background: linear-gradient(90deg, rgba(7, 23, 44, 0.96), rgba(16, 55, 88, 0.92));
  border: 1px solid rgba(127, 212, 255, 0.18);
  box-shadow: 0 16px 36px rgba(8, 24, 46, 0.10);
}
.mega-menu-insight-strip__copy {
  margin: 0;
  color: rgba(255, 255, 255, 0.82);
  font-size: 14px;
  line-height: 1.5;
}
.mega-menu-insight-strip__link {
  flex: 0 0 auto;
  color: #7fd4ff;
  text-decoration: none;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.01em;
  white-space: nowrap;
  transition: color 180ms ease;
}
.mega-menu-insight-strip__link:hover {
  color: var(--faa-white);
}
.mega-menu-insight-strip__link:focus-visible {
  outline: 2px solid #7fd4ff;
  outline-offset: 3px;
  border-radius: 2px;
}
@media (max-width: 767px) {
  /* Stack the strip on mobile so the long methodology link doesn't
     squeeze the copy into a single tight line. */
  .mega-menu-insight-strip {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
  }
  .mega-menu-insight-strip__link {
    white-space: normal;
  }
}

/* Mobile menu section group — used to label the four methodology
   destinations under a single "Methodology" eyebrow heading inside
   the hamburger panel. Keeps the panel flat (no nested collapse) so
   every destination is one tap away. The section itself adds no
   padding/margin/border — the eyebrow label provides the grouping
   and each anchor's own bottom divider maintains an even rhythm
   that matches top-level items above and below. */
.mobile-menu-section {
  display: block;
}
.mobile-menu-label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--faa-navy);
  padding: 8px 0 4px;
  opacity: 0.7;
}

.mega-link {
  color: var(--faa-navy);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.4;
  padding: 6px 0;
  transition: color 180ms ease-out;
  display: block;
}
.mega-link:hover { color: var(--faa-blue); }
.mega-link .mega-link-dek {
  display: block;
  color: var(--faa-gray-400);
  font-size: 13px;
  font-weight: 400;
  margin-top: 2px;
  line-height: 1.45;
}

/* Read link */
.read-link {
  color: var(--faa-blue);
  font-size: 14px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: color 180ms ease-out;
}
.card:hover .read-link { text-decoration: underline; }

.linkedin-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 1px solid var(--faa-gray-200);
  border-radius: 3px;
  color: var(--faa-blue);
  transition: color 180ms ease-out, border-color 180ms ease-out, background 180ms ease-out;
}
.linkedin-link:hover {
  color: var(--faa-white);
  border-color: var(--faa-blue);
  background: var(--faa-blue);
}
.linkedin-link svg {
  width: 14px;
  height: 14px;
}
.footer-social-link {
  color: rgba(255,255,255,0.72);
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.footer-social-link:hover {
  color: var(--faa-white);
}
.footer-social-link svg {
  width: 14px;
  height: 14px;
}

/* Footer attribution: in-house build line that sits as a centered
   top row inside the navy footer, above the logo / copyright / legal
   nav row. Visible but secondary — same color/size language as the
   copyright text below it, just lower opacity and centered. No new
   fonts, no new colors. */
.footer-attribution {
  margin: 0 0 24px;
  color: rgba(255,255,255,0.55);
  font-size: 12px;
  line-height: 1.55;
  text-align: center;
  letter-spacing: 0.01em;
}
@media (min-width: 768px) {
  .footer-attribution { margin-bottom: 28px; }
}

/* Cookie consent */
.cookie-consent {
  position: fixed;
  left: 24px;
  right: 24px;
  bottom: 24px;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  padding: 22px 24px;
  background: var(--faa-navy);
  color: var(--faa-white);
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: 0 20px 50px rgba(15,23,42,0.28);
}
.cookie-consent__copy { max-width: 780px; }
.cookie-consent__copy h2 {
  margin: 0 0 8px;
  color: var(--faa-white);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.25;
}
.cookie-consent__copy p {
  margin: 0;
  color: rgba(255,255,255,0.72);
  font-size: 14px;
  line-height: 1.55;
}
.cookie-consent__copy a {
  color: var(--faa-white);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.cookie-consent__actions,
.cookie-modal__actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}
.cookie-consent__button {
  height: 42px;
  padding: 0 18px;
  border-radius: 4px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  transition: background 160ms ease-out, border-color 160ms ease-out, color 160ms ease-out;
}
.cookie-consent__button:focus-visible,
.cookie-modal__close:focus-visible,
.cookie-preference--toggle input:focus-visible + .cookie-toggle {
  outline: 2px solid var(--faa-blue-light);
  outline-offset: 3px;
}
.cookie-consent__button--primary {
  background: var(--faa-blue);
  border: 1px solid var(--faa-blue);
  color: var(--faa-white);
}
.cookie-consent__button--primary:hover {
  background: var(--faa-blue-dark);
  border-color: var(--faa-blue-dark);
}
.cookie-consent__button--secondary {
  background: transparent;
  border: 1px solid rgba(255,255,255,0.35);
  color: var(--faa-white);
}
.cookie-consent__button--secondary:hover {
  border-color: var(--faa-white);
  background: rgba(255,255,255,0.08);
}
.cookie-modal {
  position: fixed;
  inset: 0;
  z-index: 110;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(15,23,42,0.56);
}
.cookie-modal__panel {
  width: min(620px, 100%);
  background: var(--faa-white);
  border: 1px solid var(--faa-gray-100);
  box-shadow: 0 28px 70px rgba(15,23,42,0.25);
  padding: 28px;
  color: var(--faa-navy);
}
.cookie-modal__header {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 16px;
}
.cookie-modal__eyebrow {
  margin: 0 0 6px;
  color: var(--faa-blue);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}
.cookie-modal__header h2 {
  margin: 0;
  color: var(--faa-navy);
  font-size: 26px;
  line-height: 1.2;
  font-weight: 600;
}
.cookie-modal__close {
  width: 36px;
  height: 36px;
  border: 1px solid var(--faa-gray-200);
  color: var(--faa-navy);
  background: var(--faa-white);
  font-size: 24px;
  line-height: 1;
}
.cookie-modal__intro {
  margin: 0 0 20px;
  color: var(--faa-gray-600);
  font-size: 15px;
  line-height: 1.55;
}
.cookie-preference {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 18px 0;
  border-top: 1px solid var(--faa-gray-100);
}
.cookie-preference h3 {
  margin: 0 0 5px;
  color: var(--faa-navy);
  font-size: 16px;
  font-weight: 600;
}
.cookie-preference p {
  margin: 0;
  color: var(--faa-gray-600);
  font-size: 14px;
  line-height: 1.45;
}
.cookie-preference__status {
  flex-shrink: 0;
  color: var(--faa-blue);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.cookie-preference--toggle {
  cursor: pointer;
}
.cookie-preference--toggle input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.cookie-toggle {
  position: relative;
  width: 48px;
  height: 26px;
  flex-shrink: 0;
  border: 1px solid var(--faa-gray-300);
  background: var(--faa-gray-100);
  transition: background 160ms ease-out, border-color 160ms ease-out;
}
.cookie-toggle::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  background: var(--faa-white);
  border: 1px solid var(--faa-gray-300);
  transition: transform 160ms ease-out;
}
.cookie-preference--toggle input:checked + .cookie-toggle {
  background: var(--faa-blue);
  border-color: var(--faa-blue);
}
.cookie-preference--toggle input:checked + .cookie-toggle::after {
  transform: translateX(22px);
}
.cookie-modal__actions {
  justify-content: flex-end;
  padding-top: 20px;
  border-top: 1px solid var(--faa-gray-100);
}
.cookie-modal__actions .cookie-consent__button--secondary {
  border-color: var(--faa-gray-300);
  color: var(--faa-navy);
}
.cookie-modal__actions .cookie-consent__button--secondary:hover {
  border-color: var(--faa-navy);
  background: var(--faa-gray-50);
}
@media (max-width: 767px) {
  .cookie-consent {
    left: 14px;
    right: 14px;
    bottom: 14px;
    flex-direction: column;
    align-items: stretch;
    gap: 18px;
    padding: 20px;
  }
  .cookie-consent__actions,
  .cookie-modal__actions {
    width: 100%;
    flex-direction: column;
    align-items: stretch;
  }
  .cookie-consent__button { width: 100%; }
  .cookie-modal {
    align-items: flex-end;
    padding: 14px;
  }
  .cookie-modal__panel { padding: 22px; }
  .cookie-modal__header h2 { font-size: 22px; }
}

/* Focus rings */
a:focus-visible, button:focus-visible, input:focus-visible {
  outline: 2px solid var(--faa-blue);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Subnav scroll on mobile */
.subnav-scroll::-webkit-scrollbar { display: none; }
.subnav-scroll { scrollbar-width: none; }

/* Image placeholder labels */
.img-label {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  color: var(--faa-gray-400);
  letter-spacing: 0.04em;
}

/* Insight detail pages */
.insight-detail-hero {
  background: var(--faa-gray-50);
  border-bottom: 1px solid var(--faa-gray-100);
  padding: 72px 0 56px;
}
.insight-detail-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  color: var(--faa-navy);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.insight-detail-meta span {
  border: 1px solid var(--faa-gray-200);
  background: var(--faa-white);
  padding: 8px 10px;
}
.insight-detail-title {
  max-width: 920px;
  color: var(--faa-navy);
  font-family: "Source Serif 4", Georgia, serif;
  font-size: clamp(40px, 5vw, 72px);
  line-height: 0.98;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.insight-detail-excerpt {
  max-width: 780px;
  color: var(--faa-gray-600);
  font-size: 19px;
  line-height: 1.55;
}
.insight-detail-layout {
  padding-top: 56px;
  padding-bottom: 88px;
}
.insight-detail-image {
  aspect-ratio: 16 / 9;
  background: var(--faa-gray-100);
  border: 1px solid var(--faa-gray-100);
  overflow: hidden;
  margin: 0 0 56px;
}
.insight-detail-image img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
}
.insight-detail-body {
  max-width: 760px;
  color: var(--faa-navy);
}
.insight-detail-body p {
  margin: 0 0 22px;
  color: var(--faa-gray-700);
  font-size: 18px;
  line-height: 1.72;
}
.insight-detail-body h2 {
  margin: 48px 0 18px;
  color: var(--faa-navy);
  font-size: 30px;
  line-height: 1.16;
  font-weight: 600;
}
.insight-detail-body h3 {
  margin: 34px 0 12px;
  color: var(--faa-navy);
  font-size: 20px;
  line-height: 1.25;
  font-weight: 700;
}
  .insight-detail-body ul,
  .insight-detail-body ol {
    margin: 0 0 28px 20px;
    color: var(--faa-gray-700);
    font-size: 18px;
    line-height: 1.7;
  }
  .insight-detail-body ul {
    list-style: disc;
  }
  .insight-detail-body ol {
    list-style: decimal;
  }
.insight-detail-body li {
  margin: 7px 0;
}
.insight-detail-body strong {
  color: var(--faa-navy);
  font-weight: 700;
}

/* Optional editorial byline directly under an insight's H1 in the
   hero. Quiet, restrained — sits between the title and the excerpt
   without competing with either. Only used when an article has a
   named author; existing insights without an explicit byline are
   unaffected. */
.insight-detail-byline {
  color: rgba(255,255,255,0.7);
  font-size: 14px;
  line-height: 1.5;
  letter-spacing: 0.01em;
}

/* Inline FAQ block at the end of a long-form insight article. Reuses
   the article body's color/size language so it reads as part of the
   piece, not a separate widget — but uses semantic <dl><dt><dd> so
   FAQPage JSON-LD on the page can mirror visible content exactly. */
.insight-detail-body .insight-detail-faq {
  margin: 24px 0 0;
  border-top: 1px solid var(--faa-gray-100);
  padding-top: 8px;
}
.insight-detail-body .insight-detail-faq dt {
  color: var(--faa-navy);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.4;
  margin-top: 24px;
}
.insight-detail-body .insight-detail-faq dd {
  margin: 10px 0 0;
  color: var(--faa-gray-600);
  font-size: 16px;
  line-height: 1.65;
}

.insight-article-cta {
  margin-top: 44px;
  padding-top: 34px;
  border-top: 1px solid var(--faa-gray-100);
}

/* ─────────────────────────────────────────────────────────────────
   About page — "How We Work" methodology section.
   Upgrades the previous three-card row into a sequenced operating
   model: two-column header (headline left, explanatory paragraph
   right), three connected sequence cards with outcome labels, and
   a richer methodology-statement callout below.
   Scoped under .about-methodology so the homepage and pillar pages
   keep their existing card treatments.
───────────────────────────────────────────────────────────────── */
.about-methodology {
  /* Soft blue-tinted band differentiates the section from the white
     content around it without going dark — keeps the About page
     light/executive overall. */
  background:
    radial-gradient(circle at 12% 10%, rgba(45, 104, 158, 0.06), transparent 30%),
    linear-gradient(180deg, #f7fafd 0%, #eef4fa 100%);
  border-top: 1px solid rgba(45, 104, 158, 0.10);
  border-bottom: 1px solid rgba(45, 104, 158, 0.10);
}

/* Two-column header — left-aligned eyebrow + headline, right-aligned
   explanatory paragraph. Stacks on narrow viewports. */
.about-methodology__header {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  margin-bottom: clamp(40px, 5vw, 64px);
}
@media (min-width: 900px) {
  .about-methodology__header {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    gap: clamp(40px, 6vw, 88px);
    align-items: end;
  }
}
.about-methodology__eyebrow {
  margin: 0;
  color: var(--faa-navy);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.about-methodology__title {
  margin: 12px 0 0;
  color: var(--faa-navy);
  font-size: clamp(28px, 3.4vw, 40px);
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.18;
}
.about-methodology__lede {
  margin: 0;
  color: var(--faa-gray-700);
  font-size: 17px;
  line-height: 1.62;
  max-width: 56ch;
}

/* Sequence card grid. The <ol> resets the default numbering since
   each card carries its own visible number badge. On desktop the
   ::before pseudo on the grid draws a faint horizontal connector
   line between the cards, reinforcing the "sequence" reading. */
.about-methodology__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  position: relative;
}
@media (min-width: 1024px) {
  .about-methodology__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(20px, 2.4vw, 32px);
  }
  /* Faint connector line crossing the cards horizontally at the
     number-badge height. Sits behind the cards via z-index: 0.
     Hidden on smaller viewports where cards stack. */
  .about-methodology__grid::before {
    content: "";
    position: absolute;
    top: 64px;
    left: 8%;
    right: 8%;
    height: 1px;
    background: linear-gradient(90deg,
      transparent 0%,
      rgba(45, 104, 158, 0.30) 12%,
      rgba(45, 104, 158, 0.30) 88%,
      transparent 100%);
    z-index: 0;
    pointer-events: none;
  }
}
.about-methodology__grid > li {
  position: relative;
  z-index: 1;
  display: flex;
}
.about-methodology-card {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 28px 26px 26px;
  background: var(--faa-white);
  border: 1px solid rgba(45, 104, 158, 0.18);
  border-top: 3px solid var(--faa-blue);
  border-radius: 6px;
  box-shadow:
    0 1px 0 rgba(15, 23, 42, 0.04),
    0 8px 24px rgba(15, 35, 60, 0.06);
  text-decoration: none;
  color: inherit;
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}
.about-methodology-card:hover,
.about-methodology-card:focus-visible {
  transform: translateY(-3px);
  border-color: rgba(45, 104, 158, 0.40);
  box-shadow:
    0 14px 30px rgba(15, 35, 60, 0.10),
    0 0 0 1px rgba(45, 104, 158, 0.16);
}
.about-methodology-card:focus-visible {
  outline: 2px solid var(--faa-blue);
  outline-offset: 4px;
}
.about-methodology-card__number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 6px;
  background: linear-gradient(180deg, rgba(247, 251, 255, 1), rgba(232, 242, 251, 1));
  border: 1px solid rgba(45, 104, 158, 0.22);
  color: var(--faa-blue);
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1;
}
.about-methodology-card__title {
  margin: 22px 0 0;
  color: var(--faa-navy);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.005em;
  line-height: 1.25;
}
.about-methodology-card__copy {
  margin: 12px 0 0;
  color: var(--faa-gray-700);
  font-size: 15px;
  line-height: 1.62;
}
.about-methodology-card__outcome {
  margin: 18px 0 0;
  padding: 10px 12px;
  background: rgba(45, 104, 158, 0.07);
  border-left: 2px solid var(--faa-blue);
  border-radius: 0 4px 4px 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.about-methodology-card__outcome-label {
  color: var(--faa-blue);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.about-methodology-card__outcome-text {
  color: var(--faa-navy);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
}
.about-methodology-card__link {
  margin-top: auto;
  padding-top: 18px;
  color: var(--faa-blue);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.01em;
}
.about-methodology-card:hover .about-methodology-card__link,
.about-methodology-card:focus-visible .about-methodology-card__link {
  color: var(--faa-navy);
}

/* Bottom methodology-statement callout — sits below the cards.
   Two-column on desktop (quote + supporting copy on the left, CTA
   on the right), stacks on mobile. */
.about-methodology-callout {
  margin-top: clamp(36px, 5vw, 56px);
  padding: clamp(24px, 3vw, 36px);
  background: var(--faa-white);
  border: 1px solid rgba(45, 104, 158, 0.16);
  border-left: 4px solid var(--faa-blue);
  border-radius: 6px;
  box-shadow: 0 10px 28px rgba(15, 35, 60, 0.06);
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}
@media (min-width: 900px) {
  .about-methodology-callout {
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    gap: clamp(28px, 4vw, 56px);
    align-items: center;
  }
}
.about-methodology-callout__copy {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.about-methodology-callout__quote {
  margin: 0;
  color: var(--faa-navy);
  font-size: clamp(20px, 2.2vw, 26px);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.01em;
}
.about-methodology-callout__support {
  margin: 0;
  color: var(--faa-gray-700);
  font-size: 15px;
  line-height: 1.62;
  max-width: 60ch;
}
.about-methodology-callout__cta {
  display: inline-flex;
  align-items: center;
  align-self: start;
  padding: 12px 18px;
  background: var(--faa-cta-bg);
  color: var(--faa-cta-text);
  border: 1px solid var(--faa-cta-border);
  border-radius: var(--faa-cta-radius);
  box-shadow: 0 10px 22px rgba(0, 35, 80, 0.18), 0 0 14px rgba(17, 164, 194, 0.14);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-decoration: none;
  white-space: nowrap;
  transition: background 180ms ease, transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}
.about-methodology-callout__cta:hover {
  background: var(--faa-cta-bg-hover);
  border-color: var(--faa-cta-border-hover);
  transform: translateY(-2px);
  box-shadow: 0 14px 28px rgba(0, 35, 80, 0.24), 0 0 18px rgba(17, 164, 194, 0.22);
}
.about-methodology-callout__cta:focus-visible {
  outline: 3px solid var(--faa-cta-focus);
  outline-offset: 4px;
}
@media (min-width: 900px) {
  .about-methodology-callout__cta {
    justify-self: end;
  }
}

/* ─────────────────────────────────────────────────────────────────
   About page — Operating Charter (Mission, Vision, Values).
   Sits between the Thesis section and Leadership Perspective. Built
   as an "operating charter" rather than a conventional 3-card values
   row: Mission and Vision read as anchored editorial statements with
   serif typography, then eight numbered operating principles arrange
   in a 4x2 grid that visually echoes the methodology sequence pattern.
───────────────────────────────────────────────────────────────── */
.about-charter {
  /* Subtle blue-tinted band so this section reads as a distinct
     editorial zone — visually different from the white Thesis above
     and the gray Leadership below without being heavy. */
  background:
    radial-gradient(circle at 88% 10%, rgba(45, 104, 158, 0.06), transparent 32%),
    linear-gradient(180deg, #f7fafd 0%, #eef4fa 100%);
  border-top: 1px solid rgba(45, 104, 158, 0.10);
  border-bottom: 1px solid rgba(45, 104, 158, 0.10);
}

/* Centered editorial header. The eyebrow, title, and lede sit on
   their own vertical rhythm — frames the rest of the section. */
.about-charter__header {
  max-width: 880px;
  margin: 0 auto clamp(40px, 5vw, 64px);
  text-align: center;
}
.about-charter__eyebrow {
  margin: 0;
  color: var(--faa-blue);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.about-charter__title {
  margin: 14px 0 0;
  color: var(--faa-navy);
  font-size: clamp(28px, 3.4vw, 40px);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.15;
}
.about-charter__lede {
  margin: 18px auto 0;
  max-width: 760px;
  color: var(--faa-gray-700);
  font-size: 17px;
  line-height: 1.62;
}

/* Mission + Vision pillars — two anchored statements side-by-side on
   desktop, stacked on mobile. Each pillar is a white card with a
   navy left rule + the editorial statement set in serif italic. */
.about-charter__pillars {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  margin-bottom: clamp(48px, 6vw, 72px);
}
@media (min-width: 900px) {
  .about-charter__pillars {
    grid-template-columns: 1fr 1fr;
    gap: clamp(24px, 3vw, 36px);
  }
}
.about-charter-pillar {
  position: relative;
  padding: clamp(26px, 3vw, 36px) clamp(24px, 3vw, 32px);
  background: var(--faa-white);
  border: 1px solid rgba(45, 104, 158, 0.16);
  border-left: 4px solid var(--faa-blue);
  border-radius: 6px;
  box-shadow:
    0 1px 0 rgba(15, 23, 42, 0.03),
    0 10px 28px rgba(15, 35, 60, 0.06);
}
.about-charter-pillar__label {
  margin: 0 0 14px;
  color: var(--faa-blue);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.about-charter-pillar__statement {
  margin: 0;
  color: var(--faa-navy);
  /* Source Serif italic for the anchored statement — feels like an
     editorial commitment, not marketing copy. */
  font-family: 'Source Serif 4', 'Source Serif Pro', Georgia, serif;
  font-size: clamp(20px, 2.2vw, 26px);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.005em;
}
.about-charter-pillar__support {
  margin: 18px 0 0;
  color: var(--faa-gray-700);
  font-size: 15px;
  line-height: 1.62;
}

/* Values — eight operating principles. 4x2 grid on desktop, 2x4 on
   tablet, 1x8 stack on mobile. Each value carries a small serif
   number badge, a strong title, and a single-line description. */
.about-charter__values {
  margin-top: 8px;
}
.about-charter__values-header {
  margin: 0 0 clamp(24px, 3vw, 32px);
  text-align: center;
}
.about-charter__values-eyebrow {
  margin: 0;
  color: var(--faa-navy);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.about-charter__values-heading {
  margin: 10px 0 0;
  color: var(--faa-navy);
  font-size: clamp(22px, 2.6vw, 30px);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.015em;
}
.about-charter-values {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  counter-reset: charter-value;
}
@media (min-width: 768px) {
  .about-charter-values {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
  }
}
@media (min-width: 1280px) {
  .about-charter-values {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
  }
}
.about-charter-value {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 22px 22px 24px;
  background: var(--faa-white);
  border: 1px solid rgba(45, 104, 158, 0.14);
  border-top: 2px solid var(--faa-blue);
  border-radius: 6px;
  box-shadow: 0 6px 18px rgba(15, 35, 60, 0.04);
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}
.about-charter-value:hover {
  transform: translateY(-2px);
  border-color: rgba(45, 104, 158, 0.35);
  box-shadow: 0 12px 28px rgba(15, 35, 60, 0.08);
}
.about-charter-value__num {
  display: inline-block;
  margin: 0 0 12px;
  color: var(--faa-blue);
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 20px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0;
}
.about-charter-value__title {
  margin: 0 0 8px;
  color: var(--faa-navy);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.005em;
}
.about-charter-value__copy {
  margin: 0;
  color: var(--faa-gray-700);
  font-size: 14px;
  line-height: 1.55;
}

/* Optional supporting copy that sits above the CTA buttons. Used on
   long-form insights that frame the CTA with an executive lede
   before the action row. */
.insight-article-cta__lede {
  margin: 0 0 22px;
  color: var(--faa-gray-700);
  font-size: 17px;
  line-height: 1.62;
  max-width: 60ch;
}
.insight-article-cta__buttons {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px 22px;
}
.insight-article-cta__secondary {
  color: var(--faa-blue);
  font-size: 14px;
  font-weight: 600;
}

/* Inline Key Questions / Executive FAQ section near the bottom of a
   long-form insight article. Sits inside .insight-detail-body so it
   inherits article width + typography, but uses a light-tinted card
   with a navy left rule to read as a distinct AEO/FAQ block — both
   for human readers and for the FAQPage JSON-LD that mirrors it. */
.insight-key-questions {
  margin: 56px 0 24px;
  padding: 28px 28px 12px;
  background: linear-gradient(180deg, rgba(247, 251, 255, 0.95), rgba(238, 245, 251, 0.85));
  border-left: 3px solid var(--faa-blue);
  border-radius: 6px;
}
.insight-key-questions__eyebrow {
  margin: 0 0 8px;
  color: var(--faa-blue);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.insight-key-questions__heading {
  margin: 0 0 22px;
  color: var(--faa-navy);
  font-size: 22px;
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: -0.005em;
}
.insight-key-questions__list {
  margin: 0;
}
.insight-key-questions__item {
  padding: 16px 0;
  border-bottom: 1px solid rgba(45, 104, 158, 0.16);
}
.insight-key-questions__item:last-of-type {
  border-bottom: 0;
  padding-bottom: 12px;
}
.insight-key-questions__item dt {
  margin: 0 0 8px;
  color: var(--faa-navy);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.35;
}
.insight-key-questions__item dd {
  margin: 0;
  color: var(--faa-gray-700);
  font-size: 15px;
  line-height: 1.6;
}
@media (max-width: 767px) {
  .insight-key-questions {
    padding: 22px 18px 6px;
  }
}
/* Article hero image — sits inside the .insight-detail-hero block
   between the meta row and the H1 title. Used on long-form executive
   guides where the photo establishes the subject visually before the
   headline reads. Constrained max-height on desktop so it does not
   dominate the hero; aspect-ratio fallback keeps the cell sized
   correctly on legacy browsers. Eager-loaded because it sits above
   the fold and is part of the LCP path. */
.insight-hero-image {
  margin: 28px 0 4px;
  aspect-ratio: 16 / 9;
  min-height: 220px;
  overflow: hidden;
  border-radius: 4px;
  background: var(--faa-gray-100);
}
@media (min-width: 1024px) {
  .insight-hero-image {
    aspect-ratio: 21 / 9;
    max-height: 420px;
    min-height: 320px;
    margin: 32px 0 8px;
  }
}
.insight-hero-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* Capital Decisions executive guide — page-specific blocks layered
   on top of the insight-detail-* base. Adds a stronger CTA pair on
   the hero, an executive-question pull style for the framework
   sections, a 3-column Readiness Scorecard (green/yellow/red), and
   a final CTA block with an objective/owner/next-step meta list.
   Used only on /insights/capital-decisions/. */
.capital-hero-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.capital-hero-ctas .btn {
  font-size: 14px;
}

/* Executive question callout — pulls the "what to ask" question
   underneath each framework step out of the body flow with a left
   rule and a small uppercase label. Restrained — meant to feel
   like a margin note, not a banner. */
.capital-executive-question {
  margin: 24px 0;
  padding: 14px 0 14px 18px;
  border-left: 3px solid var(--faa-blue);
  color: var(--faa-navy);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.55;
}
.capital-executive-question__label {
  display: block;
  margin-bottom: 4px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--faa-blue);
}

/* AI Investment Readiness Scorecard — 3 cards (green/yellow/red).
   Stacks on mobile, 3 columns on desktop. Each card uses its signal
   color as the top accent rule and a matching color tint behind the
   signal label. No traffic-light-only hierarchy; the signal label is
   also real text so screen readers and color-blind users get the
   information without relying on hue. */
.capital-scorecard {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin: 28px 0;
}
@media (min-width: 1024px) {
  .capital-scorecard {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
  }
}
.capital-scorecard__card {
  padding: 22px 22px 24px;
  background: var(--faa-white);
  border: 1px solid var(--faa-gray-200);
  border-radius: 4px;
  border-top: 4px solid var(--faa-gray-400);
}
.capital-scorecard__card--green { border-top-color: #2e8b57; }
.capital-scorecard__card--yellow { border-top-color: #c79a2e; }
.capital-scorecard__card--red { border-top-color: #b3493d; }
.capital-scorecard__signal {
  display: inline-block;
  margin-bottom: 12px;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border-radius: 2px;
  line-height: 1;
}
.capital-scorecard__card--green .capital-scorecard__signal {
  background: rgba(46, 139, 87, 0.12);
  color: #2e8b57;
}
.capital-scorecard__card--yellow .capital-scorecard__signal {
  background: rgba(199, 154, 46, 0.14);
  color: #8a6a14;
}
.capital-scorecard__card--red .capital-scorecard__signal {
  background: rgba(179, 73, 61, 0.12);
  color: #b3493d;
}
.capital-scorecard__lede {
  margin: 0 0 10px;
  color: var(--faa-navy);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.45;
}
/* Lede typography is inherited from .insight-detail-body p (font-size
   18px, line-height 1.72) which has higher specificity than the
   single-class .capital-scorecard__lede above. Override with a
   compound selector so the min-height fires correctly.

   In the narrow 194px scorecard columns at desktop, the three ledes
   wrap to different line counts: Green and Red wrap to 2 lines each
   (~62px), Yellow wraps to 4 lines (~124px) because its copy is
   roughly twice as long. Without intervention, the Yellow column's
   first bullet sits ~62px lower than the other two, making the row
   of first bullets read jagged.

   Reserve 4 lines of vertical space on desktop so all three ledes
   occupy the same height block and the first bullet aligns across
   columns. Green and Red carry empty space below their lede text;
   the bullets line up — which is what the visual rhythm requires.
   Stacked mobile layout has no alignment concern. */
@media (min-width: 1024px) {
  .insight-detail-body p.capital-scorecard__lede {
    min-height: calc(4 * 1.72em);
  }
}
.capital-scorecard__list {
  margin: 0;
  padding-left: 18px;
  color: var(--faa-gray-700);
  font-size: 15px;
  line-height: 1.6;
}
.capital-scorecard__list li {
  margin-bottom: 4px;
}
.capital-scorecard__list li:last-child {
  margin-bottom: 0;
}

/* Capital Decisions final CTA block — extends .insight-article-cta
   with a heading, a meta list (Objective / Owner / Next step /
   Timeline / Business impact), and a stacked CTA pair. */
.capital-final-cta__title {
  margin: 0 0 14px;
  font-size: 24px;
  font-weight: 600;
  color: var(--faa-navy);
  line-height: 1.25;
  letter-spacing: -0.01em;
}
@media (min-width: 1024px) {
  .capital-final-cta__title { font-size: 28px; }
}
.capital-final-cta__lede {
  margin: 0 0 22px;
  color: var(--faa-gray-600);
  font-size: 16px;
  line-height: 1.6;
}
.capital-final-cta__meta {
  margin: 0 0 26px;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}
@media (min-width: 768px) {
  .capital-final-cta__meta {
    grid-template-columns: 140px 1fr;
    gap: 12px 24px;
  }
  .capital-final-cta__meta > div {
    display: contents;
  }
}
.capital-final-cta__meta dt {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--faa-navy);
  line-height: 1.4;
}
.capital-final-cta__meta dd {
  margin: 0;
  color: var(--faa-gray-700);
  font-size: 15px;
  line-height: 1.55;
}
.capital-final-cta__meta dd a {
  color: var(--faa-blue);
  font-weight: 600;
}
.capital-final-cta__buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* Byline shown on insight cards on /insights/. Sits between the
   <h3> title and the description paragraph. Premium editorial
   feel — small, muted gray-600, slight letter-spacing, doesn't
   compete with the title. Persists through Topic / Format filter
   changes because the cards are static HTML (the filter only
   toggles display via the data-card-* attributes). */
.insight-card-author {
  margin: 0;
  color: var(--faa-gray-600);
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: 0.02em;
}

/* Article-level byline on insight detail pages. Sits between the
   hero <figure class="insight-detail-image"> and the <article>
   body, on the white body background — distinct from the existing
   .insight-detail-byline class which is white-on-dark and lives
   inside the hero section. Premium editorial treatment: small navy
   author + middot + lighter date, with a hairline rule below to
   separate it from the first paragraph of the article. */
.insight-article-byline {
  margin: 4px 0 28px;
  padding: 0 0 18px;
  border-bottom: 1px solid var(--faa-gray-100);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--faa-navy);
  line-height: 1.45;
  max-width: 760px;
}
.insight-article-byline__sep {
  margin: 0 8px;
  color: var(--faa-gray-400);
  font-weight: 400;
}
.insight-article-byline__date {
  color: var(--faa-gray-600);
  font-weight: 500;
}

/* Italicized footer paragraph at the end of an article body
   (e.g. "Foundation AI Advisory works with..."). Visually separated
   from the body with a hairline rule and a softer gray, marking the
   transition from article voice to firm voice. */
.insight-detail-footer-note {
  margin-top: 36px;
  padding-top: 24px;
  border-top: 1px solid var(--faa-gray-100);
  color: var(--faa-gray-600);
  font-size: 15px;
  line-height: 1.6;
}
.insight-detail-footer-note em {
  font-style: italic;
}
.insight-audio {
  margin: 0 0 42px;
  padding: 24px;
  border: 1px solid var(--faa-gray-100);
  background: var(--faa-gray-50);
}
.insight-audio audio {
  display: block;
  width: 100%;
}
.insight-content-image {
  margin: 40px 0 36px;
}
.insight-content-image img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}
.insight-content-image figcaption {
  margin-top: 14px;
  margin-bottom: 36px;
  color: var(--faa-gray-500);
  font-size: 16px;
  line-height: 1.5;
}
.insight-video-hero {
  background: var(--faa-gray-50);
  border-bottom: 1px solid var(--faa-gray-100);
  padding: 72px 0 56px;
}
.insight-video-wrap {
  width: 100%;
  max-width: 980px;
  margin: 0 0 56px;
  background: var(--faa-navy);
}
.insight-video {
  width: 100%;
  height: auto;
  display: block;
}
.insight-takeaways {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-top: 24px;
}
.insight-takeaways section {
  border: 1px solid var(--faa-gray-100);
  background: var(--faa-gray-50);
  padding: 22px;
}
.insight-takeaways h3 {
  margin: 0 0 10px;
}
.insight-takeaways p {
  margin-bottom: 0;
  font-size: 16px;
  line-height: 1.6;
}
.insight-video-cta {
  background: var(--faa-blue);
  color: var(--faa-white);
  padding: 72px 0;
}
.insight-video-cta-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 40px;
  align-items: center;
}
.insight-video-cta h2 {
  margin-top: 12px;
  color: var(--faa-white);
  font-size: clamp(30px, 4vw, 46px);
  line-height: 1.1;
  font-weight: 600;
}
.insight-video-cta p {
  max-width: 680px;
  margin-top: 18px;
  color: rgba(255,255,255,0.84);
  font-size: 17px;
  line-height: 1.6;
}
@media (max-width: 820px) {
  .insight-takeaways,
  .insight-video-cta-inner {
    grid-template-columns: 1fr;
  }
}

/* Foundations field series */
/* Article-intro: white-themed text section that sits between the
   full-bleed image (at the top) and the article body — same light
   theme as the hub intro. */
.foundations-article-intro {
  background: var(--faa-white);
  color: var(--faa-gray-600);
  padding: 64px 0 32px;
}
.foundations-article-intro .read-link            { color: var(--faa-blue); }
.foundations-article-intro .foundations-meta span{ color: var(--faa-gray-400); border-color: var(--faa-gray-200); }
.foundations-article-intro .foundations-h1       { color: var(--faa-navy); }
.foundations-article-intro .foundations-article-subhead { color: var(--faa-gray-600); }

/* ─── Foundations Series Hub — image-led, light theme ─────────────── */
/* Section 1: full-bleed architecture image, edge-to-edge of the viewport,
   with subtle Ken Burns drift. */
.foundations-hub-image-section {
  width: 100%;
  background: var(--faa-navy); /* fallback while image loads */
  overflow: hidden;
}
.foundations-hub-image {
  display: block;
  width: 100%;
  height: auto;
  max-height: 460px;
  object-fit: cover;
  object-position: center center;
  will-change: transform;
  animation: foundationsHubImageDrift 30s ease-in-out infinite alternate;
}
@media (max-width: 767px) {
  .foundations-hub-image { max-height: 260px; }
}
@keyframes foundationsHubImageDrift {
  0%   { transform: scale(1.00); }
  100% { transform: scale(1.04); }
}
@media (prefers-reduced-motion: reduce) {
  .foundations-hub-image { animation: none; }
}

/* Section 2: hub intro — white bg, navy/gray text. Lives directly below
   the full-bleed image section. */
.foundations-hub-intro {
  background: var(--faa-white);
  color: var(--faa-gray-600);
  padding: 88px 0 56px;
}
.foundations-hub-intro .eyebrow            { color: var(--faa-blue); }
.foundations-hub-intro .foundations-h1     { color: var(--faa-navy); }
.foundations-hub-intro .foundations-lede   { color: var(--faa-gray-600); }
.foundations-hub-intro .foundations-hub-panel        { border-left-color: var(--faa-blue-light); }
.foundations-hub-intro .foundations-hub-panel span   { color: var(--faa-gray-400); }
.foundations-hub-intro .foundations-hub-panel strong { color: var(--faa-navy); }

/* Section 3: context block (between intro and the 5-Part card grid). */
.foundations-hub-context {
  background: var(--faa-white);
  padding: 0 0 64px;
}
.foundations-context-lede {
  max-width: 880px;
  margin: 0 auto;
  color: var(--faa-gray-600);
  font-size: 18px;
  line-height: 1.65;
}
.foundations-context-lede + .foundations-context-lede {
  margin-top: 20px;
}
.foundations-hub-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(280px, 0.65fr);
  gap: 72px;
  align-items: end;
}
.foundations-h1 {
  margin-top: 22px;
  max-width: 980px;
  font-family: "Source Serif 4", Georgia, serif;
  font-size: clamp(42px, 6vw, 82px);
  line-height: 0.98;
  font-weight: 600;
  letter-spacing: -0.015em;
}
.foundations-lede,
.foundations-article-subhead {
  max-width: 760px;
  margin-top: 24px;
  color: rgba(255,255,255,0.84);
  font-size: 19px;
  line-height: 1.62;
}
.foundations-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 34px;
}
.foundations-hub-panel {
  border-left: 3px solid var(--faa-highlight);
  padding: 28px 0 28px 28px;
}
.foundations-hub-panel span,
.foundations-meta span,
.foundations-series-card span,
.foundations-series-card small,
.foundations-series-nav span,
.foundations-final-cta .eyebrow {
  display: block;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 12px;
  font-weight: 700;
}
.foundations-hub-panel span {
  color: rgba(255,255,255,0.68);
}
.foundations-hub-panel strong {
  display: block;
  margin-top: 12px;
  color: var(--faa-white);
  font-size: 24px;
  line-height: 1.25;
  font-weight: 600;
}
.foundations-card-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 18px;
}
.foundations-series-card {
  min-height: 360px;
  display: flex;
  flex-direction: column;
  padding: 28px;
  border: 1px solid var(--faa-gray-100);
  background: var(--faa-white);
  color: var(--faa-navy);
  transition: border-color 180ms ease-out, transform 180ms ease-out, box-shadow 180ms ease-out;
}
.foundations-series-card:hover {
  border-color: var(--faa-blue);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(30,41,59,0.08);
}
.foundations-series-card span {
  color: var(--faa-blue);
}
.foundations-series-card small {
  margin-top: 18px;
  color: var(--faa-gray-500);
}
.foundations-series-card h2 {
  margin-top: 24px;
  color: var(--faa-navy);
  font-size: 24px;
  line-height: 1.18;
  font-weight: 600;
}
.foundations-series-card p {
  margin-top: 18px;
  color: var(--faa-gray-600);
  font-size: 15px;
  line-height: 1.6;
}
.foundations-series-card strong {
  margin-top: auto;
  color: var(--faa-blue);
  font-size: 14px;
  font-weight: 700;
}
.foundations-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 34px;
}
.foundations-meta span {
  color: var(--faa-white);
  border: 1px solid rgba(255,255,255,0.25);
  padding: 8px 10px;
}
.foundations-article-layout {
  padding-top: 56px;
  padding-bottom: 88px;
}
.foundations-hero-image {
  margin: 0 0 56px;
  border-radius: 6px;
  overflow: hidden;
  background: var(--faa-navy);
  border: 1px solid rgba(15,23,42,0.10);
}
.foundations-hero-image img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 520px;
  object-fit: contain;
  background: var(--faa-navy);
}
.foundations-hero-image.is-missing::after {
  content: "FOUNDATIONS FIELD SERIES";
  min-height: 360px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.70);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
}
.foundations-body {
  max-width: 760px;
  color: var(--faa-navy);
}
.foundations-body p {
  margin: 0 0 22px;
  color: var(--faa-gray-700);
  font-size: 18px;
  line-height: 1.72;
}
.foundations-body blockquote {
  margin: 46px 0;
  padding: 8px 0 8px 28px;
  border-left: 3px solid var(--faa-highlight);
  color: var(--faa-navy);
  font-family: "Source Serif 4", Georgia, serif;
  font-size: clamp(30px, 4vw, 46px);
  line-height: 1.12;
  font-weight: 600;
}
.foundations-operator-box,
.foundations-diagnostic {
  margin: 48px 0 0;
  padding: 30px;
  border: 1px solid var(--faa-gray-100);
  background: var(--faa-gray-50);
}
.foundations-operator-box h2,
.foundations-diagnostic h2 {
  color: var(--faa-navy);
  font-size: 24px;
  line-height: 1.2;
  font-weight: 600;
}
.foundations-operator-box p {
  margin-top: 16px;
}
.foundations-diagnostic ul {
  margin: 20px 0 24px 20px;
  color: var(--faa-gray-700);
  font-size: 17px;
  line-height: 1.7;
  list-style: disc;
}
.foundations-diagnostic li {
  margin: 8px 0;
}
.foundations-article-cta {
  margin-top: 44px;
}
.foundations-series-nav {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-top: 56px;
}
.foundations-series-nav a {
  border: 1px solid var(--faa-gray-100);
  padding: 22px;
  color: var(--faa-navy);
}
.foundations-series-nav a:hover {
  border-color: var(--faa-blue);
}
.foundations-series-nav span {
  color: var(--faa-gray-500);
}
.foundations-series-nav strong {
  display: block;
  margin-top: 10px;
  font-size: 18px;
  line-height: 1.35;
  font-weight: 600;
}
.foundations-final-cta {
  background: var(--faa-blue);
  color: var(--faa-white);
  padding: 72px 0;
}
.foundations-cta-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 40px;
  align-items: center;
}
.foundations-final-cta h2 {
  margin-top: 12px;
  color: var(--faa-white);
  font-size: clamp(30px, 4vw, 46px);
  line-height: 1.1;
  font-weight: 600;
}
.foundations-final-cta p {
  max-width: 720px;
  margin-top: 18px;
  color: rgba(255,255,255,0.84);
  font-size: 17px;
  line-height: 1.6;
}
@media (max-width: 1180px) {
  .foundations-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 900px) {
  .foundations-hub-grid,
  .foundations-cta-inner,
  .foundations-series-nav {
    grid-template-columns: 1fr;
  }
  .foundations-card-grid {
    grid-template-columns: 1fr;
  }
  .foundations-hub-hero,
  .foundations-article-hero {
    padding: 64px 0 56px;
  }
}

/* Page-level FAQ block (used on pillar + engagement pages). Body-text
   sized; renders as a content section inside the standard container. */
.page-faq { margin-top: 32px; }
.page-faq-item {
  padding: 24px 0;
  border-bottom: 1px solid var(--faa-gray-200);
}
.page-faq-item:last-of-type { border-bottom: 0; padding-bottom: 8px; }
.page-faq dt {
  color: var(--faa-navy);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: -0.005em;
}
.page-faq dd {
  margin: 12px 0 0;
  color: var(--faa-gray-600);
  font-size: 16px;
  line-height: 1.65;
}

/* Methodology section — two-column intro layout (narrative + AEO panel) */
.methodology-intro-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
}
@media (min-width: 1024px) {
  .methodology-intro-grid {
    grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
    gap: 72px;
    align-items: start;
  }
}
.methodology-intro-text { max-width: 720px; }
.methodology-aeo {
  border-left: 2px solid var(--faa-blue);
  padding: 4px 0 4px 28px;
  /* Sticky so the answer panel stays in view while the user reads down
     the longer left-column narrative. */
  position: sticky;
  top: 116px;
}
@media (max-width: 1023px) {
  .methodology-aeo {
    position: static;
    border-left: 0;
    border-top: 2px solid var(--faa-blue);
    padding: 28px 0 0;
  }
}
/* Standalone variant — used on the homepage where the Executive
   Answers panel sits as its own full-width section directly under
   the Foundation Sequence band (not in the usual two-column
   methodology-intro-grid). Drops the sticky position and the
   left-rule treatment (which only reads cleanly alongside a tall
   left column of narrative), and uses the same top-border accent
   on all viewports. */
.methodology-aeo--standalone {
  position: static;
  border-left: 0;
  border-top: 2px solid var(--faa-blue);
  padding: 28px 0 0;
  max-width: 880px;
}
.methodology-aeo .aeo-heading {
  color: var(--faa-navy);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.25;
  margin-top: 12px;
}
.methodology-aeo .aeo-lede {
  color: var(--faa-gray-600);
  font-size: 16px;
  line-height: 1.6;
  margin-top: 16px;
}
.methodology-aeo .aeo-faq {
  margin: 28px 0 0;
}
.methodology-aeo .aeo-faq-item {
  padding: 16px 0;
  border-bottom: 1px solid var(--faa-gray-100);
}
.methodology-aeo .aeo-faq-item:last-of-type { border-bottom: 0; padding-bottom: 8px; }
.methodology-aeo dt {
  color: var(--faa-navy);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;
}
.methodology-aeo dd {
  margin: 8px 0 0;
  color: var(--faa-gray-600);
  font-size: 14px;
  line-height: 1.55;
}
.methodology-aeo dd a {
  color: var(--faa-blue);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  transition: color 180ms ease-out;
}
.methodology-aeo dd a:hover {
  color: var(--faa-navy);
}
.methodology-aeo .aeo-cta {
  display: inline-block;
  margin-top: 8px;
  font-size: 15px;
  font-weight: 600;
}
.methodology-aeo .aeo-closing {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--faa-gray-100);
  color: var(--faa-gray-600);
  font-size: 14px;
  line-height: 1.55;
  font-style: italic;
}

/* "Where AI Can Create Value" use-case block — sits inside the Executive
   Answer left column on industry pages between body copy and CTA. */
.aeo-usecases {
  margin-top: 36px;
  padding-top: 28px;
  border-top: 1px solid var(--faa-gray-100);
}
.aeo-usecases .kicker {
  display: block;
  margin-bottom: 14px;
}
.aeo-usecase-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px 32px;
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 640px) {
  .aeo-usecase-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.aeo-usecase-list li {
  position: relative;
  padding: 4px 0 4px 18px;
  color: var(--faa-gray-600);
  font-size: 15px;
  line-height: 1.5;
}
.aeo-usecase-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 12px;
  width: 8px;
  height: 1px;
  background: var(--faa-blue);
}

/* Industry tile with background image (homepage "By Industry" grid). */
.industry-card {
  position: relative;
  isolation: isolate;
}
.industry-card-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: -1;
  opacity: 0.22;
  transition: opacity 220ms ease-out, transform 600ms ease-out;
  pointer-events: none;
}
/* Subtle white wash to lift the image off pure white card surface and
   keep body copy readable; the wash sits above the image but below content. */
.industry-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0.85) 100%);
  z-index: -1;
  pointer-events: none;
  transition: opacity 220ms ease-out;
}
.industry-card:hover .industry-card-bg {
  opacity: 0.32;
  transform: scale(1.03);
}
.industry-card:hover::before {
  opacity: 0.85;
}
/* Card hover state already lifts + adds blue border via .card:hover; the
   blue-50 background tint there is hidden behind the image, which is fine. */

/* Container */
.container-faa { max-width: 1280px; margin: 0 auto; padding-left: 24px; padding-right: 24px; }
@media (min-width: 768px) {
  .container-faa { padding-left: 48px; padding-right: 48px; }
}

/* Section padding */
.section-y { padding-top: 56px; padding-bottom: 56px; }
@media (min-width: 1024px) {
  .section-y { padding-top: 96px; padding-bottom: 96px; }
}

/* Featured series */
.foundations-series-visual {
  display: grid;
  gap: 16px;
}

.foundations-series-thumbnail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.featured-thumb {
  aspect-ratio: 1 / 1;
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 4px;
  position: relative;
  overflow: hidden;
}
.featured-thumb::before {
  content: "";
  position: absolute; inset: 0;
  background-image: repeating-linear-gradient(135deg, transparent 0 16px, rgba(255,255,255,0.06) 16px 17px);
}

.featured-thumb-primary {
  aspect-ratio: 16 / 9;
}

.featured-thumb.has-image {
  background: rgba(8, 24, 45, 0.26);
}

.featured-thumb.has-image::before {
  display: none;
}

.featured-thumb img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

@media (max-width: 520px) {
  .foundations-series-thumbnail-grid {
    grid-template-columns: 1fr;
  }
}

/* In-action image is slightly larger 16:9 */
.in-action-image { aspect-ratio: 16 / 9; }

/* Filter bar (AI Advisory page) */
.filter-bar {
  position: sticky;
  top: 97px;
  z-index: 20;
  background: var(--faa-white);
  border-bottom: 1px solid var(--faa-gray-200);
}
.filter-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 10px 0;
}
.filter-row + .filter-row {
  border-top: 1px solid var(--faa-gray-100);
}
.filter-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--faa-gray-400);
  margin-right: 6px;
  min-width: 60px;
}
.filter-chip {
  display: inline-flex;
  align-items: center;
  height: 30px;
  padding: 0 12px;
  border: 1px solid var(--faa-gray-200);
  background: transparent;
  color: var(--faa-gray-600);
  font-size: 13px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  border-radius: 2px;
  transition: all 180ms ease-out;
  white-space: nowrap;
}
.filter-chip:hover {
  border-color: var(--faa-navy);
  color: var(--faa-navy);
}
.filter-chip.is-active {
  background: var(--faa-navy);
  border-color: var(--faa-navy);
  color: var(--faa-white);
}

/* Pillar card — wide horizontal layout (number + content + visual) */
.pillar-card {
  display: grid;
  grid-template-columns: 120px 1fr 38%;
  /* Longhand on purpose — the shorthand `background:` resets
     background-image to none, which under iOS Safari's style
     recovery can fight the mobile-only background-image override
     defined later in this file. Setting color-only avoids that. */
  background-color: var(--faa-white);
  border: 1px solid var(--faa-gray-200);
  text-decoration: none;
  transition: border-color 220ms ease-out, transform 220ms ease-out, box-shadow 220ms ease-out;
  overflow: hidden;
  align-items: stretch;
  min-height: 240px;
}
.pillar-card:hover {
  border-color: var(--faa-blue);
  /* Longhand — same reason as the base rule above. */
  background-color: var(--faa-blue-50);
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(15,23,42,0.08);
}
.pillar-card-num {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 12px;
  font-family: 'Source Serif 4', 'Source Serif Pro', Georgia, serif;
  font-size: 52px;
  font-weight: 600;
  color: var(--faa-blue);
  border-right: 1px solid var(--faa-gray-200);
  letter-spacing: 0;
  line-height: 1;
}
.pillar-card-num::before {
  content: "Pillar";
  display: block;
  font-family: 'Source Serif 4', 'Source Serif Pro', Georgia, serif;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--faa-gray-400);
  margin-bottom: 14px;
  line-height: 1;
}
.pillar-card-body {
  display: flex;
  flex-direction: column;
  padding: 40px 44px;
  min-width: 0;
}
/* Swapped typography on the home pillar cards: the pillar category
   name (.kicker — DATA CURATION & GOVERNANCE etc.) is the dominant
   headline, and the descriptive title below it (.pillar-card-headline
   — "The Foundation of Reliable AI" etc.) is the small-caps subtitle.
   Inverts the conventional small-eyebrow / big-title hierarchy on
   purpose so the pillar identity reads first and loudest.

   These rules apply only inside .pillar-card-body, so other uses of
   .kicker elsewhere on the site are unaffected. */
.pillar-card-body .kicker {
  margin-bottom: 10px;
  color: var(--faa-navy);
  font-size: clamp(22px, 2.2vw, 28px);
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.2;
  text-transform: none;
}
.pillar-card-headline {
  color: var(--faa-navy);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  line-height: 1.4;
  text-transform: uppercase;
}
.pillar-card-dek {
  color: var(--faa-gray-600);
  font-size: 16px;
  line-height: 1.6;
  margin-top: 14px;
  max-width: 56ch;
}
.pillar-card-body .read-link {
  margin-top: auto;
  padding-top: 24px;
  transition: color 220ms ease-out;
}
.pillar-card-body .read-link .arrow {
  display: inline-block;
  transition: transform 220ms ease-out;
}
.pillar-card:hover .read-link {
  color: var(--faa-navy);
}
.pillar-card:hover .read-link .arrow {
  transform: translateX(5px);
}
.pillar-card-visual {
  position: relative;
  overflow: hidden;
  background: var(--faa-gray-100);
  border-left: 1px solid var(--faa-gray-200);
  min-height: 240px;
}
.pillar-card-visual img {
  /* The home page pillars now share the bright, daylit methodology
     dropdown photographs. No exposure correction needed — the
     previous brightness(1.32) recipe was tuned for the dark
     cinematic shots we retired and would wash these images out.
     A barely-there 1.02 nudge keeps them feeling consistent with
     the rest of the site without flattening contrast. */
  filter: brightness(1.02);
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform 600ms ease-out, filter 300ms ease-out;
  will-change: transform;
}
.pillar-card-visual::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(15,23,42,0) 60%, rgba(15,23,42,0.08) 100%);
  pointer-events: none;
  transition: background 300ms ease-out;
}
.pillar-card:hover .pillar-card-visual img {
  transform: scale(1.04);
  /* Hover keeps the image bright and adds a subtle saturation lift
     for engagement — no aggressive brightness change because the
     base treatment is already near the natural exposure. */
  filter: brightness(1.04) saturate(1.08);
}
.pillar-card:hover .pillar-card-visual::after {
  background: linear-gradient(180deg, rgba(15,23,42,0) 50%, rgba(15,23,42,0.16) 100%);
}

/* Tablet + mobile: stack visual under content, number stays inline with body */
@media (max-width: 1023px) {
  .pillar-card {
    grid-template-columns: 80px 1fr;
    grid-template-rows: auto auto;
    grid-template-areas:
      "num body"
      "visual visual";
  }
  .pillar-card-num {
    grid-area: num;
    padding: 28px 12px;
    font-size: 26px;
    border-right: 1px solid var(--faa-gray-200);
  }
  .pillar-card-body {
    grid-area: body;
    padding: 28px 24px;
  }
  .pillar-card-visual {
    grid-area: visual;
    aspect-ratio: 16 / 7;
    min-height: 0;
    border-left: 0;
    border-top: 1px solid var(--faa-gray-200);
  }
}

/* Mobile (<=767px): stack the home pillar visual ABOVE the body so
   the home page pillar cards behave like the insights article cards
   on mobile — image first, then number + content beneath. Replaces
   an earlier treatment that painted the Methodology dropdown image
   as a washed-out card background; that read as too soft, so it has
   been removed.

   The image shown is the home page pillar visual itself
   (homepage-pillar-*.webp), already lightened by the .pillar-card-
   visual img filter so the cinematic shots feel open on small
   screens too. */
@media (max-width: 767px) {
  .pillar-card.pillar-card--data,
  .pillar-card.pillar-card--workflow,
  .pillar-card.pillar-card--ai {
    background-color: var(--faa-white);
    /* Full-bleed card: extend beyond the .container-faa 24px padding
       with simple negative margins so the card hits the screen edges.
       The previous width: 100vw + calc() approach worked in Chrome
       but failed inside iOS Safari flex columns — the flex parent
       constrained the child despite the vw declaration. Plain
       negative margins always win because they don't depend on the
       child's own width being expanded. */
    margin-left: -24px;
    margin-right: -24px;
    border-left: 0;
    border-right: 0;
    border-radius: 0;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    grid-template-areas:
      "visual"
      "body";
    position: relative;
  }
  /* Repurpose .pillar-card-num as a "PILLAR 0X" pill badge anchored
     to the top-right corner of the image. The element already carries
     the number ("01"/"02"/"03") as its text and "PILLAR" as a
     ::before pseudo-element; reset the column styles and re-style as
     an inline pill so both pieces read as a single horizontal label. */
  .pillar-card.pillar-card--data .pillar-card-num,
  .pillar-card.pillar-card--workflow .pillar-card-num,
  .pillar-card.pillar-card--ai .pillar-card-num {
    display: inline-flex;
    flex-direction: row;
    align-items: baseline;
    gap: 6px;
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 3;
    padding: 7px 12px;
    background: var(--faa-white);
    border: 0;
    border-radius: 2px;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08);
    font-family: inherit;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--faa-navy);
    line-height: 1;
  }
  .pillar-card.pillar-card--data .pillar-card-num::before,
  .pillar-card.pillar-card--workflow .pillar-card-num::before,
  .pillar-card.pillar-card--ai .pillar-card-num::before {
    content: "Pillar";
    display: inline;
    font-family: inherit;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--faa-navy);
    line-height: 1;
    margin: 0;
    padding: 0;
  }
  /* Body padding on mobile — single column, no left rail, so the
     standard horizontal gutter is reasonable. */
  .pillar-card.pillar-card--data .pillar-card-body,
  .pillar-card.pillar-card--workflow .pillar-card-body,
  .pillar-card.pillar-card--ai .pillar-card-body {
    grid-area: body;
    padding: 24px 24px 28px;
  }
  /* Restore the .pillar-card-visual on mobile and place it on top.
     The base 1023px breakpoint already sized this 16:7; tweak to
     16:9 for mobile so the image reads taller relative to the
     narrower card width.

     Use BOTH aspect-ratio and an explicit min-height (180px) so the
     cell always has height even on mobile browsers where
     aspect-ratio fails to compute on grid items with min-height: 0
     (observed on Chrome Android and older iOS Safari). With both
     declarations, modern browsers use the aspect-ratio intrinsic
     height; legacy browsers fall back to the 180px floor. */
  .pillar-card.pillar-card--data .pillar-card-visual,
  .pillar-card.pillar-card--workflow .pillar-card-visual,
  .pillar-card.pillar-card--ai .pillar-card-visual {
    display: block;
    grid-area: visual;
    aspect-ratio: 16 / 9;
    min-height: 180px;
    border-left: 0;
    border-top: 0;
    border-bottom: 1px solid var(--faa-gray-200);
  }
  /* Body typography stays slightly heavier than desktop for mobile
     readability — same treatment the earlier washed-background
     version used, kept because it scans well on phones regardless
     of background. */
  .pillar-card.pillar-card--data .pillar-card-body .kicker,
  .pillar-card.pillar-card--workflow .pillar-card-body .kicker,
  .pillar-card.pillar-card--ai .pillar-card-body .kicker {
    color: var(--faa-navy);
    font-weight: 700;
  }
  .pillar-card.pillar-card--data .pillar-card-headline,
  .pillar-card.pillar-card--workflow .pillar-card-headline,
  .pillar-card.pillar-card--ai .pillar-card-headline {
    color: var(--faa-navy);
    font-weight: 700;
  }
  .pillar-card.pillar-card--data .pillar-card-dek,
  .pillar-card.pillar-card--workflow .pillar-card-dek,
  .pillar-card.pillar-card--ai .pillar-card-dek {
    color: var(--faa-gray-700);
    font-weight: 500;
  }
  .pillar-card.pillar-card--data .pillar-card-body .read-link,
  .pillar-card.pillar-card--workflow .pillar-card-body .read-link,
  .pillar-card.pillar-card--ai .pillar-card-body .read-link {
    color: var(--faa-blue);
    font-weight: 700;
  }
}

/* Simple page hero (non-carousel) */
.page-hero {
  position: relative;
  background: var(--faa-navy);
  overflow: hidden;
  isolation: isolate;
}
/* Methodology page family (foundation, operations, agentic-ai) — uniform
   hero height. The tallest natural content of the three lands ~800px with
   default padding; min-height equalizes the shorter pages, and column flex
   + justify-content:center vertically centers content inside the band. */
.methodology-hero {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
@media (min-width: 1024px) {
  /* Pillar / landing hero height tightened from 800px to 640px —
     the previous value put the hero at 899px actual, consuming the
     entire 1080p fold (nav 97 + hero 899 = 996 of 1080 visible).
     640px brings FAA squarely into the consulting-industry standard
     (McKinsey/Bain/Accenture run 560–680px on inner pages). The
     16:7-ish hero band now leaves real estate for the next section
     to peek above the fold, which pulls readers downward. */
  .methodology-hero { min-height: 640px; }
}

/* Hero proof list — small caps-anchored list under the dek paragraphs
   on methodology heroes; restrained, dark-surface treatment that keeps
   the hero feeling editorial, not feature-marketing. */
.hero-proof-list {
  list-style: none;
  margin: 24px 0 0;
  padding: 18px 0 0;
  border-top: 1px solid rgba(255,255,255,0.14);
  display: grid;
  gap: 10px;
}
.hero-proof-list li {
  position: relative;
  padding-left: 22px;
  color: rgba(255,255,255,0.86);
  font-size: 14px;
  line-height: 1.5;
}
.hero-proof-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 11px;
  width: 12px;
  height: 1px;
  background: var(--faa-blue-light);
}
.hero-trust-line {
  margin-top: 18px;
  color: rgba(255,255,255,0.6);
  font-size: 13px;
  line-height: 1.5;
  font-style: italic;
  max-width: 56ch;
}

/* Outcomes strip — executive outcome band between hero and Executive
   Answer on the foundation methodology page. A subtle gray-50 surface
   with hairline rules top and bottom frames it as an intentional
   transition. Two-line editorial label on the left; outcomes locked
   to a 3-column x 2-row grid at >=768px so items group coherently
   rather than stretching thinly across the page width. */
.outcomes-strip {
  background: var(--faa-gray-50);
  border-top: 1px solid var(--faa-gray-100);
  border-bottom: 1px solid var(--faa-gray-100);
}
.outcomes-strip-inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  padding: 24px 0;
}
@media (min-width: 1024px) {
  .outcomes-strip-inner {
    grid-template-columns: minmax(0, 240px) minmax(0, 1fr);
    gap: 56px;
    align-items: start;
    padding: 28px 0;
  }
}
.outcomes-strip-label {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.outcomes-strip-label-primary {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--faa-navy);
  line-height: 1.3;
}
.outcomes-strip-label-secondary {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--faa-gray-600);
  line-height: 1.4;
}
.outcomes-strip-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 24px;
  row-gap: 10px;
}
@media (min-width: 768px) {
  .outcomes-strip-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: 32px;
    row-gap: 12px;
  }
}
/* Deliberately NOT expanding to 6 columns on >=1280px — keeping a
   3 x 2 block keeps the outcomes grouped as a single coherent
   component rather than scattering them across the full page width. */
.outcomes-strip-list li {
  position: relative;
  padding-left: 16px;
  color: var(--faa-gray-700);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.45;
}
.outcomes-strip-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  width: 8px;
  height: 1px;
  background: var(--faa-blue);
}

/* AI Workforce Development section — spacing refinements for executive
   readability. The content was readable but visually cramped: intro
   paragraphs too tight, the Format and Outcomes columns too close to
   each other on desktop, bullet rows packed, and the Topics
   subsection starting too soon after the bullets. These rules add
   intentional breathing room without changing the design system,
   font scale, or color palette. */
#workforce-development .body-lg + .body-lg {
  /* Intro paragraphs: 24px between them instead of Tailwind's 16px
     (mt-4). Loosens the rhythm without enlarging type. */
  margin-top: 24px;
}
.workforce-positioning {
  /* The Key Positioning callout. Background, border-left, and
     border-radius remain on the element as inline styles so the
     existing visual treatment is preserved; the class adds
     padding, max-width, and margin-top. (mt-10 is not in the
     static Tailwind build, so the margin lives here.) */
  margin-top: 36px;
  padding: 30px 34px;
  max-width: 920px;
}
@media (max-width: 639px) {
  .workforce-positioning {
    padding: 24px 22px;
  }
}
.workforce-detail-grid {
  /* Replaces the previous .grid .grid-cols-1 .lg:grid-cols-2 .gap-10
     combo on the Format / Outcomes block. Generous column gap on
     desktop so the two lists read as deliberate, parallel components
     rather than a cramped table. */
  display: grid;
  grid-template-columns: 1fr;
  gap: 36px;
}
@media (min-width: 1024px) {
  .workforce-detail-grid {
    grid-template-columns: 1fr 1fr;
    column-gap: 80px;
    row-gap: 0;
  }
}
.workforce-detail-grid > div > ul > li {
  /* Slightly more breathing room between bullets than Tailwind's py-2
     (8px) — 10px feels more editorial without becoming wasteful. */
  padding-top: 10px;
  padding-bottom: 10px;
}
.workforce-topics {
  /* Generous transition into the question-card grid below. Replaces
     the previous mt-14 (56px) inline utility. */
  margin-top: 72px;
}
@media (max-width: 767px) {
  .workforce-topics {
    margin-top: 56px;
  }
}

/* Workforce Development Topics — question-card grid on the AI Training
   page. Editorial FAQ feel: small eyebrow + h3 + lead-in, then an
   ordered list of numbered question cards in 1/2/3 columns. Each card
   uses an h4 inside an <ol><li>, which gives answer engines clean,
   scannable question content and keeps the visual rhythm restrained
   (white surface, hairline border, blue top accent, muted number,
   navy question). No hover state — these are content cards, not
   links. */
.workforce-topics-h3 {
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.22;
  color: var(--faa-navy);
}
@media (min-width: 1024px) {
  .workforce-topics-h3 { font-size: 26px; }
}
.workforce-topics-intro {
  max-width: 760px;
  font-size: 16px;
  line-height: 1.55;
  color: var(--faa-gray-600);
}
.workforce-topic-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  counter-reset: workforce-topic;
}
@media (min-width: 768px) {
  .workforce-topic-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
  }
}
@media (min-width: 1024px) {
  .workforce-topic-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
  }
}
.workforce-topic-card {
  position: relative;
  padding: 20px 22px 22px;
  background: var(--faa-white);
  border: 1px solid var(--faa-gray-200);
  border-top: 3px solid var(--faa-blue);
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.workforce-topic-number {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--faa-blue);
  line-height: 1;
}
.workforce-topic-q {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.45;
  color: var(--faa-navy);
}

/* Common Data Problems grid — sits below the Executive Answer on the
   foundation page. Restrained card treatment, blue top rule, navy
   title, body-text dek. No icons. */
.data-problems-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}
@media (min-width: 768px) {
  .data-problems-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
}
@media (min-width: 1024px) {
  .data-problems-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
}
.data-problem-card {
  position: relative;
  padding: 24px 0 0;
  border-top: 2px solid var(--faa-blue);
}
.data-problem-card__title {
  color: var(--faa-navy);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.005em;
  line-height: 1.35;
  margin: 0;
}
.data-problem-card__dek {
  color: var(--faa-gray-600);
  font-size: 15px;
  line-height: 1.6;
  margin: 12px 0 0;
}

/* Methodology hero text block — positioned in the LEFT zone of the
   viewport on all three methodology pages so the text sits centered
   between the left edge of the hero image and the busy zone of each
   background composition. The calc escapes the centered .container-faa
   at >=1280px viewports so the block's left edge sits ~7% from the
   viewport edge regardless of how wide the browser is. At <1280, the
   max() term collapses to 0 and the block sits inside the container's
   left padding, which renders the same way. */
.methodology-hero .hero-text-block {
  /* Mobile/tablet: fill the container's content width (which already has
     left/right padding from .container-faa). The previous clamp floor of
     420px was wider than common phone viewports (320-414px), causing
     horizontal overflow that .page-hero { overflow: hidden } then clipped
     — visible as the headline being cut off on the right edge of mobile
     screens. width: 100% + max-width: 540px keeps the block inside the
     container at every breakpoint. */
  width: 100%;
  max-width: 540px;
  margin-left: 0;
}
@media (min-width: 1024px) {
  .methodology-hero .hero-text-block {
    width: 540px;
    margin-left: calc(7vw - 48px - max(0px, (100vw - 1280px) / 2));
  }
}
.page-hero-image {
  position: absolute; inset: 0;
  background-color: var(--faa-navy-deep);
  background-size: cover;
  background-position: center;
}
.page-hero-overlay {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(15,23,42,0.20) 0%, rgba(15,23,42,0.55) 60%, rgba(15,23,42,0.85) 100%),
    linear-gradient(90deg, rgba(15,23,42,0.65) 0%, rgba(15,23,42,0.25) 45%, transparent 70%);
}

/* Industry detail-page hero: re-uses the homepage industry card image as a
   subtle, darkened background. The matching image is set per-page via an
   inline background-image on .page-hero-image (no duplicated darkened
   asset files). This rule strengthens the navy overlay so the white hero
   text — including the FAA blue 3px vertical accent on .hero-text-block —
   remains readable on every image, with a darker left zone (where the
   text sits) and a slightly more open right zone so the imagery is still
   visible but restrained.

   Structure used (existing .page-hero markup is preserved):
     <section class="page-hero industry-hero">
       <div class="page-hero-image" style="background-image: url('/assets/homepage-industry-*.webp')"></div>
       <div class="page-hero-overlay"></div>
       <div class="container-faa page-hero-content">...</div>
     </section>
*/
.industry-hero {
  background-color: var(--faa-navy-deep);
}
.industry-hero .page-hero-image {
  /* Constrain the image element to the right ~55% of the hero instead
     of full-bleed. With background-size: cover and the source images
     being roughly square (~1:1), filling the full ~3:1 hero width
     forces a heavy top/bottom crop — only the middle ~40% of each
     source image showed. Anchoring the image to a narrower right-side
     zone gives cover a less-wide box to fill, so the vertical crop
     drops to ~10% top + ~10% bottom — i.e., the middle ~80% of the
     source composition shows, matching the homepage card content. The
     left half of the hero stays solid navy for the headline. */
  inset: 0 0 0 auto;
  width: 55%;
  filter: saturate(0.85);
}
@media (max-width: 1023px) {
  /* Tablet: image takes more of the hero width since the viewport is
     narrower; cover-cropping behavior stays gentle because the box
     aspect is closer to the source's 1:1. */
  .industry-hero .page-hero-image {
    width: 70%;
  }
}
.industry-hero .page-hero-overlay {
  /* Heavy navy on the left text zone, sharp transition at the image
     boundary (~45%), then light over the image so the right side
     reads as a real photograph, not a tinted wash. */
  background:
    linear-gradient(90deg,
      rgba(8,18,36,0.94) 0%,
      rgba(8,18,36,0.88) 40%,
      rgba(8,18,36,0.45) 50%,
      rgba(8,18,36,0.20) 70%,
      rgba(8,18,36,0.08) 100%);
}
@media (max-width: 767px) {
  /* Mobile: viewport is too narrow for a side-by-side composition;
     restore full-bleed cover and use a top-down navy darken so the
     copy zone stays legible while the image fills the whole hero. */
  .industry-hero .page-hero-image {
    inset: 0;
    width: auto;
    background-position: 70% center;
  }
  .industry-hero .page-hero-overlay {
    background:
      linear-gradient(180deg,
        rgba(8,18,36,0.86) 0%,
        rgba(8,18,36,0.72) 55%,
        rgba(8,18,36,0.45) 100%);
  }
}

/* About page hero: Cleveland skyline / AI network composition. The image
   carries its visual weight on the right side (skyline + network lines),
   which lets a strong left-side navy gradient keep the hero copy fully
   legible while still showing the city imagery on the right. The
   .page-hero-image div carries the image (set inline per page) plus
   background-position: center right; this rule strengthens the overlay
   beyond the global .page-hero-overlay default. */
.about-hero {
  background-color: var(--faa-navy-deep);
}
.about-hero .page-hero-overlay {
  /* Lightened: left zone still holds enough navy for the white
     headline to read (~78–82%), middle transitions through, right
     zone opens up so the skyline shows in near-natural color.
     Vertical wash softened so the lower half of the image keeps
     its lights/reflections instead of fading into navy. */
  background:
    linear-gradient(90deg,
      rgba(8,18,36,0.82) 0%,
      rgba(8,18,36,0.62) 42%,
      rgba(8,18,36,0.20) 100%),
    linear-gradient(180deg,
      rgba(8,18,36,0.04) 0%,
      rgba(8,18,36,0.14) 65%,
      rgba(8,18,36,0.40) 100%);
}
@media (max-width: 767px) {
  /* Mobile: skyline crops aggressively at the right edge; pull the
     darken across the full width so the headline and dek do not have
     skyline detail behind them. */
  .about-hero .page-hero-image {
    background-position: 75% center;
  }
  .about-hero .page-hero-overlay {
    /* Mobile: text sits over the full width of the image since the
       hero stacks vertically. Keep a moderate wash everywhere
       (rather than the previous near-opaque 82–94%) so the skyline
       still reads as imagery. The lower-half wash protects the
       body copy from getting lost in the city lights. */
    background:
      linear-gradient(180deg,
        rgba(8,18,36,0.62) 0%,
        rgba(8,18,36,0.70) 55%,
        rgba(8,18,36,0.80) 100%),
      linear-gradient(90deg,
        rgba(8,18,36,0.55) 0%,
        rgba(8,18,36,0.48) 60%,
        rgba(8,18,36,0.40) 100%);
  }
}

/* AI Frontiers page hero — uses a custom AlphaFold-inspired ribbon
   image with its own dark navy negative space baked into the left
   half. The global .page-hero-overlay default is too heavy here (it
   was tuned for brighter abstract flow imagery), so we replace it
   with a lighter horizontal wash that just adds enough contrast over
   the already-dark left zone for the white headline to read, and
   stays nearly transparent over the colorful right half so the
   ribbon structures show in near-natural color. */
.ai-frontiers-hero .page-hero-overlay {
  background:
    linear-gradient(90deg,
      rgba(5, 15, 32, 0.78) 0%,
      rgba(5, 15, 32, 0.56) 34%,
      rgba(5, 15, 32, 0.22) 62%,
      rgba(5, 15, 32, 0.06) 100%);
}
@media (max-width: 1023px) {
  /* Mobile: hero stacks and text sits over the full image width, so
     swap the horizontal wash for a top-down wash that protects the
     headline and dek without burying the colorful ribbons in the
     lower portion of the frame. */
  .ai-frontiers-hero .page-hero-overlay {
    background:
      linear-gradient(180deg,
        rgba(5, 15, 32, 0.80) 0%,
        rgba(5, 15, 32, 0.62) 55%,
        rgba(5, 15, 32, 0.42) 100%);
  }
}

/* ─────────────────────────────────────────────────────────────────
   Industries page hero — full-width 10-image collage.
   Replaces the single .page-hero-image background with a 5x2 grid
   of the existing industry tile images, so the hero immediately
   communicates "FAA works across multiple operating environments."
   Scoped under .industries-hero-collage so the global .page-hero
   pattern stays untouched everywhere else.
───────────────────────────────────────────────────────────────── */
.industries-hero-collage .page-hero-collage {
  /* Sits in the same layered slot as .page-hero-image — absolute
     fill behind the overlay and content. Edge-to-edge by virtue
     of being outside .container-faa. */
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 0;
  background: var(--faa-navy-deep);
  z-index: 0;
}
.industries-hero-collage .page-hero-collage__cell {
  position: relative;
  overflow: hidden;
}
.industries-hero-collage .page-hero-collage__cell img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Slight desaturation + contrast bump unifies ten different
     industry photos under a single editorial tone. */
  filter: grayscale(10%) saturate(0.92) contrast(1.06);
  opacity: 0.86;
  transform: scale(1.04);
}
/* Per-cell object-position variation so the same-aspect images don't
   read as a flat grid — each cell crops to a slightly different
   focal point for editorial rhythm. */
.industries-hero-collage .page-hero-collage__cell:nth-child(2) img { object-position: 55% center; }
.industries-hero-collage .page-hero-collage__cell:nth-child(3) img { object-position: center 45%; }
.industries-hero-collage .page-hero-collage__cell:nth-child(4) img { object-position: 60% center; }
.industries-hero-collage .page-hero-collage__cell:nth-child(6) img { object-position: 45% center; transform: scale(1.08); }
.industries-hero-collage .page-hero-collage__cell:nth-child(7) img { object-position: center 60%; }
.industries-hero-collage .page-hero-collage__cell:nth-child(9) img { object-position: 60% 40%; transform: scale(1.08); }
.industries-hero-collage .page-hero-collage__cell:nth-child(10) img { object-position: 40% center; }
/* Stronger left-side overlay so the white hero copy reads cleanly
   over whatever images land in the left columns. Replaces the
   global .page-hero-overlay default which was tuned for a single
   abstract flow image — too gentle for ten colorful photos. */
.industries-hero-collage .page-hero-overlay {
  background:
    linear-gradient(90deg,
      rgba(5, 15, 32, 0.94) 0%,
      rgba(5, 15, 32, 0.86) 30%,
      rgba(5, 15, 32, 0.62) 58%,
      rgba(5, 15, 32, 0.42) 100%),
    linear-gradient(180deg,
      rgba(5, 15, 32, 0.20) 0%,
      rgba(5, 15, 32, 0.58) 100%);
}
/* Subtle cyan tint layer to tie the collage to FAA's blue/cyan
   accent palette without making the hero feel SaaS-flashy. */
.industries-hero-collage::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(circle at 78% 18%, rgba(45, 166, 214, 0.16), transparent 36%),
    linear-gradient(90deg, rgba(17, 164, 194, 0.06), transparent 55%);
  pointer-events: none;
}
@media (max-width: 1023px) {
  /* Tablet — drop to 4-column grid so cells remain photographic, not
     postage-stamp sized. */
  .industries-hero-collage .page-hero-collage {
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(3, 1fr);
  }
  /* Hide the last 2 images on this tighter grid (8 cells now). The
     hero copy carries the meaning; the collage is decorative. */
  .industries-hero-collage .page-hero-collage__cell:nth-child(n+9) {
    display: none;
  }
}
@media (max-width: 767px) {
  /* Mobile — 2-col x 3-row collage with 6 of the 10 images. Keeps
     the visual rhythm without making the hero too tall or busy
     above the fold on phones. */
  .industries-hero-collage .page-hero-collage {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(3, 1fr);
  }
  .industries-hero-collage .page-hero-collage__cell:nth-child(n+7) {
    display: none;
  }
  .industries-hero-collage .page-hero-collage__cell img {
    opacity: 0.62;
  }
  /* Vertical top-down wash on mobile since the hero stacks and text
     sits across the full image width, not just the left side. */
  .industries-hero-collage .page-hero-overlay {
    background:
      linear-gradient(180deg,
        rgba(5, 15, 32, 0.92) 0%,
        rgba(5, 15, 32, 0.80) 45%,
        rgba(5, 15, 32, 0.62) 100%);
  }
}

/* AI Frontiers hero CTA — "Frontier Signal" treatment.
   Page-scoped under .ai-frontiers-hero so this premium blue/cyan
   gradient button only appears here. Pairs visually with the
   AlphaFold-inspired ribbon image: the gradient picks up the same
   blue→cyan range as the ribbons on the right side of the hero,
   making the CTA feel native to the frontier theme rather than the
   default flat navy primary button used elsewhere.
   Built on .btn.btn-primary so the base layout (display, font,
   padding) is inherited; we override the visual treatment only. */
.ai-frontiers-hero .hero-cta-frontier {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  min-height: 54px;
  padding: 0 22px;
  border-radius: 10px;
  border: 1px solid rgba(88, 214, 238, 0.55);
  background:
    linear-gradient(135deg, #0b5f9f 0%, #0d75bd 52%, #11a4c2 100%);
  color: #ffffff;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-decoration: none;
  box-shadow:
    0 14px 32px rgba(0, 35, 80, 0.32),
    0 0 22px rgba(17, 164, 194, 0.18);
  overflow: hidden;
  isolation: isolate;
  transition:
    transform 180ms ease,
    box-shadow 180ms ease,
    border-color 180ms ease;
}
/* Right-side angled signal accent — a subtle cyan-skewed wedge that
   reads as a "frontier" cue without crossing into SaaS gimmick
   territory. clip-path keeps it tight to the right edge so the
   label always reads cleanly over the deeper navy on the left. */
.ai-frontiers-hero .hero-cta-frontier::after {
  content: "";
  position: absolute;
  top: 0;
  right: -1px;
  width: 78px;
  height: 100%;
  background:
    linear-gradient(135deg,
      rgba(32, 205, 230, 0.72),
      rgba(36, 130, 204, 0.58));
  clip-path: polygon(34% 0, 100% 0, 100% 100%, 0 100%);
  z-index: -1;
  pointer-events: none;
}
/* Soft diagonal highlight that sweeps right on hover. Sits below
   the label/icon via z-index: -1 + isolation on the parent. */
.ai-frontiers-hero .hero-cta-frontier::before {
  content: "";
  position: absolute;
  inset: -2px;
  background:
    radial-gradient(circle at 18% 24%, rgba(255, 255, 255, 0.26), transparent 36%),
    linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.18), transparent);
  opacity: 0.5;
  transform: translateX(-40%);
  transition: transform 280ms ease, opacity 280ms ease;
  z-index: -1;
  pointer-events: none;
}
.ai-frontiers-hero .hero-cta-frontier:hover {
  transform: translateY(-2px);
  border-color: rgba(134, 232, 255, 0.92);
  /* Re-declare the gradient on hover so the .btn-primary:hover
     fallback (background: var(--faa-navy)) can't take over via
     cascade-order tiebreak. Slightly brighter mid-stop for the
     lift cue. */
  background:
    linear-gradient(135deg, #0c69ad 0%, #0f81cf 52%, #14b6d6 100%);
  box-shadow:
    0 20px 44px rgba(0, 35, 80, 0.42),
    0 0 30px rgba(17, 164, 194, 0.32);
}
.ai-frontiers-hero .hero-cta-frontier:hover::before {
  transform: translateX(22%);
  opacity: 0.7;
}
.ai-frontiers-hero .hero-cta-frontier:focus-visible {
  outline: 3px solid rgba(156, 207, 243, 0.95);
  outline-offset: 4px;
}
/* Label + icon both need z-index > 0 so they sit above the ::before
   and ::after layers. */
.ai-frontiers-hero .hero-cta-frontier .hero-cta-label,
.ai-frontiers-hero .hero-cta-frontier .hero-cta-icon {
  position: relative;
  z-index: 1;
}
.ai-frontiers-hero .hero-cta-frontier .hero-cta-icon {
  font-size: 1.05em;
  line-height: 1;
  transform: translateY(-1px);
  transition: transform 200ms ease;
}
.ai-frontiers-hero .hero-cta-frontier:hover .hero-cta-icon {
  transform: translate(2px, -3px);
}
@media (max-width: 767px) {
  .ai-frontiers-hero .hero-cta-frontier {
    min-height: 50px;
    padding: 0 18px;
    border-radius: 9px;
    font-size: 15px;
    max-width: 100%;
  }
  .ai-frontiers-hero .hero-cta-frontier::after {
    width: 64px;
  }
}

/* AI Frontiers — "Family Medical Lineage as an AI Baseline" subsection.
   Editorial extension of Frontier 01 (Lineage). Sits on the parent
   section's gray-50 surface as a slightly elevated white card with a
   navy left rule so it reads as a focused subsection rather than a
   new top-level section. Privacy-aware editorial framing — no
   medical product cues, no clinical iconography. */
.medical-lineage-subsection {
  margin-top: clamp(56px, 7vw, 88px);
  padding: clamp(28px, 4vw, 44px);
  background: var(--faa-white);
  border-left: 3px solid var(--faa-blue);
  border-radius: 4px;
  /* Subtle lift to differentiate from the gray-50 parent surface
     without competing with FAA's restrained editorial look. */
  box-shadow: 0 1px 0 rgba(15, 23, 42, 0.04), 0 6px 18px rgba(15, 23, 42, 0.04);
}
.medical-lineage-subsection__heading {
  margin: 12px 0 0;
  color: var(--faa-navy);
  font-size: clamp(22px, 2.6vw, 30px);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.01em;
}
.medical-lineage-subsection__quote {
  margin: clamp(28px, 4vw, 40px) 0 0;
  padding: 6px 0 6px 22px;
  border-left: 2px solid rgba(45, 104, 158, 0.55);
  /* Serif voice for the pull-quote so it reads as editorial commentary
     rather than another body paragraph. */
  font-family: 'Source Serif 4', 'Source Serif Pro', Georgia, serif;
  font-size: clamp(18px, 2vw, 22px);
  line-height: 1.5;
  font-style: italic;
  color: var(--faa-navy);
}
.medical-lineage-subsection__impact {
  margin-top: clamp(24px, 3vw, 32px);
  max-width: 60ch;
  color: var(--faa-gray-700);
  font-size: 15px;
  line-height: 1.6;
}
.medical-lineage-subsection__note {
  margin-top: 20px;
  padding-top: 14px;
  border-top: 1px solid var(--faa-gray-100);
  /* --faa-gray-400 is the FAA "muted / secondary text" token, ideal
     for a small editorial disclaimer that should read as a note,
     not a competing piece of body copy. */
  color: var(--faa-gray-400);
  font-size: 13px;
  line-height: 1.55;
  font-style: italic;
}
@media (max-width: 767px) {
  .medical-lineage-subsection {
    padding: 24px 20px;
  }
  .medical-lineage-subsection__quote {
    padding-left: 16px;
  }
}

/* AI Decision Questions page — primary-content Q&A treatment.
   Reuses the FAQ <dl>/<dt>/<dd> semantics already used by the
   methodology AEO panel, but at body-text scale and full-content
   width so 20 Q&A pairs read as an editorial document, not a sidebar.
   Also includes a horizontal section index that sits between the intro
   and the first question group. */
.decisions-index {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 22px;
}
.decisions-index-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--faa-navy);
}
.decisions-index a {
  font-size: 14px;
  color: var(--faa-gray-600);
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
  transition: color 180ms ease-out, border-color 180ms ease-out;
}
.decisions-index a:hover,
.decisions-index a:focus-visible {
  color: var(--faa-navy);
  border-bottom-color: var(--faa-blue);
}
.decisions-group {
  max-width: 880px;
}
.decisions-group-header {
  margin-bottom: 36px;
}
@media (min-width: 1024px) {
  .decisions-group-header { margin-bottom: 48px; }
}
.decisions-faq {
  margin: 0;
  border-top: 1px solid var(--faa-gray-200);
}
.decisions-faq-item {
  padding: 28px 0;
  border-bottom: 1px solid var(--faa-gray-100);
}
@media (min-width: 1024px) {
  .decisions-faq-item { padding: 32px 0; }
}
.decisions-faq dt {
  color: var(--faa-navy);
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.005em;
  line-height: 1.35;
}
@media (min-width: 1024px) {
  .decisions-faq dt { font-size: 21px; }
}
.decisions-faq dd {
  margin: 14px 0 0;
  color: var(--faa-gray-600);
  font-size: 16px;
  line-height: 1.65;
}
.decisions-faq dd p {
  margin: 0 0 12px;
}
.decisions-faq dd p:last-child {
  margin-bottom: 0;
}
.decisions-faq dd a {
  color: var(--faa-blue);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}
.decisions-faq dd a:hover {
  color: var(--faa-navy);
}

/* Methodology pillar heroes (Data Curation, Workflow Optimization,
   AI Design & Implementation): each image carries its visual
   weight on the right (data architecture grid / highway flow /
   team-around-a-decision-table), which leaves the left zone of
   the hero as the natural place for copy. Mirrors the homepage
   carousel hero pattern — clamp-based fluid scaling so the text
   slides leftward smoothly as the viewport widens, with no sharp
   breakpoint snap.
   Vertical centering is already handled by .methodology-hero's
   flex / justify-content: center / min-height: 800px. */

/* Inside .methodology-hero (which is display:flex; flex-direction:column),
   the auto horizontal margins on .container-faa collapse the container
   to content width instead of letting it stretch to its max-width. Force
   it to behave like normal block flow so the centered 1280px container
   re-establishes — without this, every downstream margin-left calc
   measures from a shrunken container and the text ends up far right of
   the intended position. */
.methodology-hero > .container-faa {
  width: 100%;
  align-self: stretch;
}

@media (min-width: 1024px) {
  .foundation-hero .hero-text-block,
  .operations-hero .hero-text-block,
  .agentic-ai-hero .hero-text-block {
    /* Width scales: ~370px on a 1024 laptop, capping at 520px once
       the viewport can hold it. */
    width: min(38vw, 520px);
    max-width: 520px;
    /* Pulls the text leftward as the viewport widens. Math:
         target text-left = (0.4*W - text_width) / 2
         container_content_left = max(24, (W - 1280)/2 + 48)
         margin = target - container_content_left
       Clamped between 0 (so text never drifts into the container at
       small widths) and -420 (so on 3K+ monitors the text doesn't
       slide off the left edge). */
    margin-left: clamp(-420px, calc(-30vw + 352px), 0px);
  }
}

.foundation-hero .page-hero-overlay {
  /* Strengthen the navy on the left where copy now sits and let the
     right open up so the data architecture grid still reads as the
     primary imagery. */
  background:
    linear-gradient(90deg,
      rgba(8,18,36,0.94) 0%,
      rgba(8,18,36,0.88) 30%,
      rgba(8,18,36,0.55) 50%,
      rgba(8,18,36,0.25) 80%,
      rgba(8,18,36,0.15) 100%);
}

.applied-ai-hero {
  position: relative;
  overflow: hidden;
}
.applied-ai-hero .page-hero-image {
  display: none;
}
.applied-ai-hero::before {
  content: "";
  position: absolute;
  inset: -5%;
  z-index: 0;
  background-image: url('assets/global-page-hero-background-flow.webp');
  background-color: var(--faa-navy-deep);
  background-size: cover;
  background-position: center;
  transform: scale(1.04) translate3d(3%, -1%, 0);
  animation: appliedAiHeroDrift 28s ease-in-out infinite alternate;
  will-change: transform;
}
.applied-ai-hero .page-hero-overlay {
  z-index: 1;
  background:
    linear-gradient(180deg, rgba(15,23,42,0.24) 0%, rgba(15,23,42,0.58) 60%, rgba(15,23,42,0.88) 100%),
    linear-gradient(90deg, rgba(15,23,42,0.72) 0%, rgba(15,23,42,0.32) 46%, transparent 72%);
}
.applied-ai-hero .page-hero-content {
  z-index: 2;
}
@keyframes appliedAiHeroDrift {
  0% {
    transform: scale(1.04) translate3d(3%, -1%, 0);
  }
  42% {
    transform: scale(1.075) translate3d(-1.5%, 0.5%, 0);
  }
  100% {
    transform: scale(1.10) translate3d(-4.5%, 1.5%, 0);
  }
}
@media (max-width: 767px) {
  .applied-ai-hero::before {
    inset: -4%;
    animation-duration: 34s;
  }
}
@media (prefers-reduced-motion: reduce) {
  .applied-ai-hero::before {
    animation: none;
    transform: scale(1.04);
  }
}
.page-hero-content {
  position: relative;
  z-index: 1;
  padding-top: 64px;
  padding-bottom: 64px;
}
@media (min-width: 1024px) {
  /* Tightened from 120/120 to 80/80 — saves ~80px of vertical
     padding on every page-hero. Combined with the min-height
     reductions, this lands pillar heroes around 760–800px instead
     of 900+ on 1080p viewports. */
  .page-hero-content { padding-top: 80px; padding-bottom: 80px; }
}


/* ─── Header layout: tighten whenever the primary nav is visible ─── */
/* Below xl (1280px) the nav is hidden and the button has the row to
   itself — no override needed. Once the nav appears, the full row
   competes for space inside the 1280px container; tighten nav gaps and
   shrink the CTA slightly so everything stays inside that container. */
@media (min-width: 1280px) {
  #site-header nav[aria-label="Primary"] {
    gap: 14px;
    margin-left: 16px;
    margin-right: 16px;
  }
  #site-header .btn-primary {
    padding: 0 14px;
    font-size: 13px;
  }
}

/* ─────────────────────────────────────────────────────────────────
   Methodology page — paired In Brief / Why It Matters cards.
   Two-column grid directly below the hero. Cards use the existing
   FAA card surface tokens with a soft FAA-blue tinted background
   so the pair reads as a single executive-summary unit, then stack
   cleanly on mobile.
───────────────────────────────────────────────────────────────── */
.methodology-summary-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  max-width: 1100px;
  margin: 0 auto;
}
@media (min-width: 900px) {
  .methodology-summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
  }
}
.methodology-summary-card {
  background: var(--faa-blue-50);
  border: 1px solid var(--faa-blue);
  border-radius: 8px;
  padding: 28px 28px 30px;
}
@media (min-width: 1280px) {
  .methodology-summary-card { padding: 36px 36px 36px; }
}
/* Slight visual distinction so the two cards don't look identical
   while still feeling like a matched pair: the Why card gets a
   warmer near-white surface (gray-50) so the In Brief card on
   blue tint reads as the primary summary and the Why card reads
   as supporting context. Matches the gray-50 / blue-50 alternation
   used elsewhere on the site. */
.methodology-summary-card--why {
  background: var(--faa-gray-50);
  border-color: var(--faa-gray-200);
}

/* ─────────────────────────────────────────────────────────────────
   Client Workspace utility access link in the header.
   Sits to the LEFT of the Business Systems Assessment CTA on
   desktop. Hidden under 1280px because the same destination is
   surfaced inside the mobile hamburger panel (nav.js).
   Reads as a utility access link — not as marketing nav.
───────────────────────────────────────────────────────────────── */
/* Site-header logo. Replaces the previous inline-style approach
   (height:48px;width:auto;max-width:none;display:block) with a
   class so we can size the logo responsively. On desktop the logo
   renders at its original 48px height; on mobile it scales down
   to 36px so the wordmark stops crowding the hamburger and the
   compact Assessment CTA in the same header row. Aspect ratio is
   preserved via width: auto — the image's natural ratio drives
   the proportional shrink. */
.site-header-logo {
  height: 48px;
  width: auto;
  max-width: none;
  display: block;
}
@media (max-width: 639px) {
  .site-header-logo {
    height: 36px;
  }
}

/* Mobile-only compact "Assessment" CTA in the site header. Sits
   between the (hidden-on-mobile) Client Workspace link and the
   (hidden-on-mobile) full "Business Systems Assessment" desktop
   button, so on small screens it's the only conversion button
   visible alongside the hamburger toggle. Hides at >=640px where
   the full desktop BSA button takes over.

   Links to the same mailto destination as the desktop BSA button
   so the mobile and desktop CTAs behave identically. */
.mobile-header-cta {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-right: 12px;
  padding: 8px 14px;
  /* Frontier Signal gradient — shared with the global .btn-primary so
     the mobile header CTA reads as part of the same CTA system. The
     wedge accent is suppressed here because the button is too
     compact (sub-32px tall) for the polygon to render cleanly. */
  background: var(--faa-cta-bg);
  color: var(--faa-cta-text);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  border: 1px solid var(--faa-cta-border);
  border-radius: var(--faa-cta-radius);
  white-space: nowrap;
  text-decoration: none;
  box-shadow: 0 6px 16px rgba(0, 35, 80, 0.22), 0 0 12px rgba(17, 164, 194, 0.16);
  transition: background 180ms ease-out, border-color 180ms ease-out, box-shadow 180ms ease-out, transform 180ms ease-out;
}
.mobile-header-cta:hover,
.mobile-header-cta:focus-visible {
  background: var(--faa-cta-bg-hover);
  border-color: var(--faa-cta-border-hover);
  color: var(--faa-cta-text);
  box-shadow: 0 8px 20px rgba(0, 35, 80, 0.30), 0 0 16px rgba(17, 164, 194, 0.26);
}
.mobile-header-cta:focus-visible {
  outline: 2px solid var(--faa-cta-focus);
  outline-offset: 2px;
}
@media (min-width: 640px) {
  .mobile-header-cta {
    display: none;
  }
}

.utility-access-link {
  display: none;
  align-items: center;
  gap: 6px;
  color: var(--faa-gray-600);
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  margin-right: 18px;
  padding: 6px 4px;
  transition: color 180ms ease-out;
}
@media (min-width: 1280px) {
  .utility-access-link { display: inline-flex; }
}
.utility-access-link svg {
  flex-shrink: 0;
  color: var(--faa-gray-400);
  transition: color 180ms ease-out;
}
.utility-access-link:hover,
.utility-access-link:focus-visible {
  color: var(--faa-navy);
}
.utility-access-link:hover svg,
.utility-access-link:focus-visible svg {
  color: var(--faa-blue);
}
.utility-access-link:focus-visible {
  outline: 2px solid var(--faa-blue);
  outline-offset: 4px;
  border-radius: 2px;
}
/* Mobile menu version of the same link — appears as a row inside
   the hamburger panel, with a small lock glyph. */
.mobile-menu-panel a.mobile-menu-workspace {
  display: flex;
  align-items: center;
  gap: 10px;
}
.mobile-menu-panel a.mobile-menu-workspace svg {
  flex-shrink: 0;
  color: var(--faa-gray-400);
}

/* ─────────────────────────────────────────────────────────────────
   AI Perspectives mega-menu (Insights) — editorial command center.
   Layout: a small positioning intro line spans the top of the
   dropdown, followed by a 3-column grid where the Featured column
   is the visual anchor (shaded panel), By Pillar sits in the middle
   with strong typography, and By Format reads as a secondary
   reference column.
───────────────────────────────────────────────────────────────── */
.mega-insights-intro {
  max-width: 760px;
  margin: 0 0 22px;
  color: var(--faa-gray-600);
  font-size: 14px;
  line-height: 1.55;
  font-style: italic;
}
@media (min-width: 768px) {
  .mega-insights-intro {
    margin-bottom: 26px;
  }
}

/* Featured column: shaded panel, blue border, anchoring weight. The
   visual anchor for the dropdown — the first thing the eye lands on.
   Adds a small "Start here" eyebrow chip above the heading so the
   featured zone reads as a guided entry point rather than just
   another column of links. */
.mega-insights-featured {
  position: relative;
  background: var(--faa-blue-50);
  border: 1px solid var(--faa-blue);
  border-radius: 8px;
  padding: 22px 22px 20px;
}
.mega-insights-featured__eyebrow {
  display: inline-block;
  margin-bottom: 8px;
  padding: 4px 10px;
  background: var(--faa-blue);
  color: var(--faa-white);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border-radius: 2px;
  line-height: 1;
}
.mega-insights-featured .mega-group-heading {
  margin-top: 0;
  color: var(--faa-blue);
  border-bottom-color: rgba(45, 104, 158, 0.22);
}
.mega-insights-featured .mega-link {
  /* The Featured column sits on a tinted background, so links
     don't need the gray-on-white hover wash — they get a slight
     navy intensification on hover instead. */
  color: var(--faa-navy);
  font-weight: 600;
}
.mega-insights-featured .mega-link .mega-link-dek {
  color: var(--faa-gray-600);
  font-weight: 500;
}
/* Primary featured link: AI Frontiers — slightly stronger weight
   and a thin left rule so it reads as the headline pick rather
   than just the first item in the list. */
.mega-insights-featured__primary {
  position: relative;
  padding-left: 12px;
  border-left: 2px solid var(--faa-blue);
  margin-left: -2px;
}
/* Hub link with arrow — bottom of the featured column, styled like
   a small inline CTA so the call to the full hub is unmistakable. */
.mega-insights-featured__hub {
  display: flex;
  align-items: baseline;
  gap: 6px;
  flex-wrap: wrap;
}
.mega-insights-featured__arrow {
  display: inline-block;
  color: var(--faa-blue);
  transition: transform 180ms ease-out;
}
.mega-insights-featured__hub:hover .mega-insights-featured__arrow,
.mega-insights-featured__hub:focus-visible .mega-insights-featured__arrow {
  transform: translateX(2px);
}

/* Align the BY BUSINESS FOUNDATION and BY FORMAT column headings
   with the FEATURED PERSPECTIVE heading inside the featured card.
   The featured card has 22px padding + a ~18px "Start here" chip +
   8px margin-bottom = ~48px of vertical offset before its
   .mega-group-heading appears. Add that same offset to the two
   right-column headings on desktop so all three column headers
   land on the same horizontal line. The "Start here" chip stays
   in the featured card; it visually sits above the row of
   aligned headers. */
@media (min-width: 768px) {
  .mega-insights-pillars > .mega-group-heading,
  .mega-insights-format > .mega-group-heading {
    margin-top: 55px;
  }
}

/* By Business Foundation column: the methodology pillars get a
   numbered marker treatment (01/02/03) so the sequence reads at a
   glance. Number sits in a small serif badge; body text wraps to
   the right. */
.mega-insights-pillar {
  display: flex;
  align-items: baseline;
  gap: 12px;
}
.mega-insights-pillar__num {
  font-family: 'Source Serif 4', 'Source Serif Pro', Georgia, serif;
  font-size: 16px;
  font-weight: 600;
  color: var(--faa-blue);
  line-height: 1;
  letter-spacing: 0;
  flex-shrink: 0;
  min-width: 22px;
}
.mega-insights-pillar__body {
  display: block;
  flex: 1;
  color: inherit;
}

/* By Format column: arrange the six format links into a 2-column
   mini-grid so the column reads as a compact reference panel rather
   than a tall vertical list. Visually quieter than the other two
   columns. */
.mega-insights-format .mega-group-heading {
  color: var(--faa-gray-600);
}
.mega-insights-format__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px 16px;
}
@media (min-width: 1024px) {
  .mega-insights-format__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.mega-insights-format .mega-link {
  color: var(--faa-gray-700);
}
.mega-insights-format .mega-link .mega-link-dek {
  color: var(--faa-gray-400);
  font-size: 12px;
}

/* Bottom CTA strip — slim editorial navigation footer spanning the
   full dropdown width. Hairline rule separates it from the three
   columns above. */
.mega-insights-footer {
  margin-top: 24px;
  padding-top: 18px;
  border-top: 1px solid var(--faa-gray-100);
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-start;
}
@media (min-width: 768px) {
  .mega-insights-footer {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin-top: 28px;
  }
}
.mega-insights-footer__copy {
  margin: 0;
  color: var(--faa-gray-600);
  font-size: 13px;
  line-height: 1.55;
  max-width: 64ch;
}
.mega-insights-footer__cta {
  flex-shrink: 0;
  color: var(--faa-blue);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  letter-spacing: 0.04em;
  transition: color 180ms ease-out;
  white-space: nowrap;
}
.mega-insights-footer__cta:hover,
.mega-insights-footer__cta:focus-visible {
  color: var(--faa-navy);
}

/* ─────────────────────────────────────────────────────────────────
   Client Workspace placeholder login page — two-column layout.
   Uses explicit named classes rather than Tailwind grid-cols-12 /
   col-span-6 utilities because col-span-6 isn't compiled into
   tailwind-static.css (the static build only includes classes
   that were detected in source; col-span-3/9 are compiled but 6
   was not). Named classes guarantee the layout renders correctly
   regardless of which Tailwind variants happened to be tree-shaken.
───────────────────────────────────────────────────────────────── */
.client-workspace-section {
  padding-top: clamp(56px, 7vw, 96px);
  padding-bottom: clamp(56px, 7vw, 96px);
}
.client-workspace-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  align-items: start;
}
@media (min-width: 900px) {
  .client-workspace-grid {
    grid-template-columns: minmax(0, 1fr) minmax(360px, 440px);
    gap: clamp(40px, 5vw, 80px);
  }
}
.client-workspace-copy {
  max-width: 640px;
}
.client-workspace-copy p {
  max-width: 56ch;
}
.client-workspace-login-card {
  width: 100%;
  max-width: 440px;
  justify-self: stretch;
}
@media (min-width: 900px) {
  .client-workspace-login-card {
    justify-self: end;
  }
}