/* Arising Media: Sections CSS (home, service, location, static, blog) */

/* ============================================================================
   0. DESIGN TOKENS
   ========================================================================== */

:root {
  --am-sec-pad-y: 240px;
  --am-sec-pad-y-sm: 144px;
  --am-container-max: 1200px;
  --am-h2-size: clamp(2rem, 4vw, 3.25rem);
  --am-body-lh: 1.65;
  --am-section-divider: 1px solid rgba(0,0,0,0.13);
}

.am-section--light + .am-section--light,
.am-section--white + .am-section--white,
.am-section--light + .am-section--white,
.am-section--white + .am-section--light {
  border-top: var(--am-section-divider);
}

.am-section {
  padding: var(--am-sec-pad-y) 0;
  position: relative;
  z-index: 1;
}

@media (max-width: 768px) {
  .am-section {
    padding: var(--am-sec-pad-y-sm) 0;
  }
}

.am-section .container {
  max-width: var(--am-container-max);
  position: relative;
  z-index: 2;
}

/* Dark sections elevate above adjacent light sections */
.am-section--navy,
.am-section--graphite,
.am-section--slate,
.am-section--cobalt,
.am-section--cobalt-deep {
  z-index: 2;
}

/* Depth shadow: light sections cast a subtle downward shadow */
.am-section--white,
.am-section--light,
.am-section--stone,
.am-section--mist {
  box-shadow: 0 8px 32px rgba(0,0,0,0.06);
}

.am-section h2 {
  font-size: var(--am-h2-size);
  line-height: 1.15;
}

.am-section p,
.am-section li {
  line-height: var(--am-body-lh);
}

/* ============================================================================
   1. EYEBROW
   ========================================================================== */

.am-eyebrow {
  display: block;
  font-size: var(--fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--accent-lit);
  margin-bottom: var(--sp-3);
}

/* WCAG fix: --accent-lit #5d78c9 fails 4.5:1 on dark sections (3.86:1 navy) and light sections
   (3.89:1 ice, 4.20:1 white). Override per surface context.
   Dark surfaces: #94b0c9 (--color-muted-on-dark) = 7.20:1 on navy, 6.24:1 on slate (PASS).
   Cobalt surfaces: rgba(255,255,255,0.92) = 4.89:1 on #1B6CB3, 6.57:1 on #145796 (PASS).
   Light surfaces: #1d4ed8 = 6.70:1 on white, 6.19:1 on ice (PASS). */
.am-section--navy .am-eyebrow,
.am-section--slate .am-eyebrow,
.am-section--graphite .am-eyebrow,
.am-section--lead-magnet .am-eyebrow,
.am-section--use-cases .am-eyebrow,
.am-section--next-steps .am-eyebrow,
.am-tab-panel .am-eyebrow,
.am-tab-bar-wrap .am-eyebrow,
.am-pill-tabs-wrap .am-eyebrow { color: var(--color-muted-on-dark); }

.am-section--cobalt .am-eyebrow,
.am-section--cobalt-deep .am-eyebrow,
.am-section--roi-band .am-eyebrow { color: rgba(255,255,255,0.92); }

.am-section--white .am-eyebrow,
.am-section--light .am-eyebrow,
.am-section--stone .am-eyebrow,
.am-section--mist .am-eyebrow,
.am-section--alt .am-eyebrow,
.am-section--resources-helper .am-eyebrow { color: #1d4ed8; }

.am-eyebrow--dim {
  opacity: 0.6;
}

/* ============================================================================
   2. SECTION BASE
   ========================================================================== */

.am-section {
  background: var(--bg);
  color: var(--text);
}

/* Dark section variants: default token set (white text on dark) */
.am-section--graphite {
  background: var(--color-graphite);
}

.am-section--slate {
  background: var(--color-slate);
}

.am-section--navy {
  background: var(--color-navy);
}

/* Light section variants: override tokens for dark text on light bg */
.am-section--white {
  background: #ffffff;
  --bg: #ffffff;
  --text: #1a2535;
  --text-strong: #0f1826;
  --text-mute: #4a5568;
  --line: rgba(0,0,0,0.08);
  color: #1a2535;
}

.am-section--light {
  background: var(--color-ice);
  --bg: var(--color-ice);
  --text: #1a2535;
  --text-strong: #0f1826;
  --text-mute: #4a5568;
  --line: rgba(0,0,0,0.08);
  color: #1a2535;
}

.am-section--stone {
  background: var(--color-stone);
  --bg: var(--color-stone);
  --text: #1a2535;
  --text-strong: #0f1826;
  --text-mute: #4a5568;
  --line: rgba(0,0,0,0.08);
  color: #1a2535;
}

.am-section--mist {
  background: var(--color-mist);
  --bg: var(--color-mist);
  --text: #1a2535;
  --text-strong: #0f1826;
  --text-mute: #4a5568;
  --line: rgba(0,0,0,0.08);
  color: #1a2535;
}

.am-section--alt {
  background: var(--color-stone);
  --bg: var(--color-stone);
  --text: #1a2535;
  --text-strong: #0f1826;
  --text-mute: #4a5568;
  --line: rgba(0,0,0,0.08);
  color: #1a2535;
}

.am-section--cobalt {
  background: var(--color-blue-cobalt);
  color: #ffffff;
  --text: #ffffff;
  --text-strong: #ffffff;
  --text-mute: rgba(255,255,255,0.75);
  --line: rgba(255,255,255,0.15);
}

/* WCAG fix: rgba(255,255,255,0.85) = 4.43:1 on #1B6CB3 (FAIL 4.5:1).
   rgba(255,255,255,0.92) = 4.89:1 on #1B6CB3 (PASS). */
.am-section--cobalt p {
  color: rgba(255,255,255,0.92);
}

/* WCAG fix: rgba(255,255,255,0.75) = 3.81:1 on #1B6CB3 (FAIL 4.5:1).
   rgba(255,255,255,0.92) = 4.89:1 on #1B6CB3 (PASS). */
.am-section--cobalt .am-section-lede {
  color: rgba(255,255,255,0.92);
}

.am-section--cobalt-deep {
  background: var(--color-cobalt-deep);
  color: #ffffff;
  --text: #ffffff;
  --text-strong: #ffffff;
  --text-mute: rgba(255,255,255,0.75);
  --line: rgba(255,255,255,0.15);
}

.am-section--cobalt-deep p {
  color: rgba(255,255,255,0.85);
}

.am-section--cobalt-deep .am-section-lede {
  color: rgba(255,255,255,0.75);
}

.am-section-head {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 80px;
}

.am-section-head--left {
  text-align: left;
  margin-left: 0;
}

.am-section-head--stats {
  text-align: left;
  margin-bottom: var(--sp-8);
}

.am-section-lede {
  font-size: var(--fs-md);
  color: var(--text-mute);
  margin-top: var(--sp-3);
  line-height: 1.65;
}

.am-section h2 {
  font-size: clamp(1.75rem, 3.5vw, 3rem);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text-strong);
  line-height: 1.15;
}

.am-section h3 {
  color: var(--text-strong);
}

.am-container--narrow {
  max-width: 720px;
  margin-inline: auto;
}

/* ============================================================================
   3. HERO
   ========================================================================== */

/* ============================================================================
   AM CANVAS GRADIENT (signature hero/dark-band background)
   Layered radial mesh: cobalt + indigo + emerald blobs over near-black with a
   faint dot grid and a soft bottom fade into the next section. Reuse this same
   stack on any dark CTA band by adding the .am-canvas class.
   Tokens:
     --canvas-ink: #05070d         base
     --canvas-blob-1: cobalt 32% at 20% 30%
     --canvas-blob-2: indigo 22% at 85% 20%
     --canvas-blob-3: emerald 16% at 60% 95%
     --canvas-grid: 32px white-1% dot
     --canvas-fade: linear bottom 70%->100% to base
   ========================================================================== */
.am-hero, .am-canvas {
  position: relative;
  background: #05070d;
  background-image:
    radial-gradient(ellipse 70% 60% at 20% 30%, rgba(37,99,235,0.32) 0%, transparent 60%),
    radial-gradient(ellipse 60% 55% at 85% 20%, rgba(99,102,241,0.22) 0%, transparent 65%),
    radial-gradient(ellipse 80% 60% at 60% 95%, rgba(16,185,129,0.16) 0%, transparent 70%),
    radial-gradient(circle at 50% 50%, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 100% 100%, 100% 100%, 100% 100%, 32px 32px;
  overflow: hidden;
}
.am-hero {
  display: flex;
  align-items: center;
  padding: 120px 0;
  min-height: 380px;
}
.am-hero::after, .am-canvas::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 0%, transparent 70%, #05070d 100%);
  pointer-events: none; z-index: 1;
}
.am-hero--full {
  min-height: 440px;
  padding: 140px 0;
}

.am-hero--service {
  min-height: 480px;
}

.am-hero--blog     { min-height: 420px; padding: 150px 0; }
.am-hero--magazine { min-height: 520px; padding: 180px 0; }
.am-hero--minimal  { min-height: 380px; padding: 120px 0; }

.am-hero::before {
  display: none;
}

.am-hero .container {
  position: relative;
  z-index: 2;
}

.am-hero-canvas {
  display: none;
}

.am-hero-h1 {
  font-size: clamp(2.5rem, 5vw, 4rem);
  font-weight: 700;
  letter-spacing: -0.025em;
  color: #ffffff;
  line-height: 1.1;
  max-width: 18ch;
  margin-bottom: var(--sp-5);
}

.am-hero-h1--xl {
  font-size: clamp(2.75rem, 6vw, 5rem);
}

.am-hero-lede {
  font-size: clamp(1rem, 1.5vw, 1.25rem);
  line-height: 1.6;
  color: rgba(255,255,255,0.78);
  margin-bottom: var(--sp-8);
}

.am-hero-lede--constrained {
  max-width: 52ch;
}

.am-hero-actions {
  display: flex;
  gap: var(--sp-4);
  flex-wrap: wrap;
  align-items: center;
}

/* Hero content wrapper: single-column copy block */
.am-hero-copy {
  max-width: 720px;
  display: flex;
  flex-direction: column;
}

/* Hero split layout: left copy + right visual (home page) */
.am-hero-split:not(:has(.am-hero-image)) { grid-template-columns: 1fr; }
.am-hero-split:not(:has(.am-hero-image)) .am-hero-visual,
.am-hero-split:not(:has(.am-hero-image)) .am-hero-placeholder { display: none; }
.am-hero-split:not(:has(.am-hero-image)) .am-hero-copy { max-width: 920px; }
.am-hero-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-16);
  align-items: center;
}
.am-hero-split .am-hero-copy {
  max-width: none;
}
.am-hero-visual {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.am-hero-tiles {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  width: 100%;
  max-width: 520px;
}
.am-hero-tile {
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 8px;
  padding: var(--sp-6) var(--sp-5);
}
.am-hero-tile--marketing { border-top: 3px solid #4a8fe8; }
.am-hero-tile--web       { border-top: 3px solid #34b86a; }
.am-hero-tile--it        { border-top: 3px solid #9d71f5; }
.am-hero-tile--ai        { border-top: 3px solid #f0944e; }
.am-hero-tile-cat {
  display: block;
  font-size: var(--fs-sm);
  font-weight: 700;
  color: #ffffff;
  letter-spacing: 0.01em;
  margin-bottom: 6px;
}
.am-hero-tile-desc {
  font-size: var(--fs-xs);
  /* raised from 0.62 (3.9:1 FAIL) to 0.72 (5.1:1 PASS) on #05070d */
  color: rgba(255,255,255,0.72);
  line-height: 1.45;
  margin: 0;
}
@media (max-width: 767px) {
  .am-hero-split { grid-template-columns: 1fr; }
  .am-hero-visual { display: none; }
  .am-split-img-content { padding: 64px 32px; }
}

/* --compact: shorter padding for inner pages */
.am-hero--compact {
  padding: 108px 0;
  min-height: 0;
}

/* --dark: explicit dark bg (same as base, used on location/static templates) */
.am-hero--dark {
  background: #09090f;
}

/* --service: full-bleed bg image overlay */
.am-hero--service {
  position: relative;
}
.am-hero-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  z-index: 0;
}
.am-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(9,9,15,0.88) 40%, rgba(9,9,15,0.55));
  z-index: 1;
}

/* --has-bg: increase overlay when bg image present */
.am-hero--has-bg .am-hero-h1 {
  color: #ffffff;
}

/* Hero feature panel (service template variation B) */
.am-hero-feature {
  display: flex;
  gap: var(--sp-4);
  flex-wrap: wrap;
  margin-top: var(--sp-6);
}
.am-hero-feature-item {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--radius);
  padding: var(--sp-3) var(--sp-5);
  font-size: var(--fs-xs);
  color: rgba(255,255,255,0.75);
}

/* Location badge */
.am-hero-badge {
  display: inline-block;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-lit);
  margin-bottom: var(--sp-3);
}

/* ============================================================================
   4. INDUSTRIES STRIP
   ========================================================================== */

/* Dark band with a faint AM Ribbon wash -- ties this section into the same depth
   language as the hero/journey instead of sitting as a flat white leftover between
   two sections that both have real depth. See .planning/design-system.md "AM Ribbon". */
.am-industries-strip {
  padding: 32px 0;
  background: #ffffff;
  overflow: hidden;
}
.am-industries-strip .am-eyebrow { color: var(--color-body); }
.am-strip-label {
  font-size: var(--fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  color: #1a2a4a;
  margin-bottom: var(--sp-4);
  text-align: center;
}

.am-industries-track {
  display: flex;
  gap: var(--sp-3);
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: 2px;
  -webkit-overflow-scrolling: touch;
}

.am-industries-track::-webkit-scrollbar {
  display: none;
}

.am-industry-tag {
  flex-shrink: 0;
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  border: none;
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--color-body);
  white-space: nowrap;
  transition: color var(--dur) var(--ease), background var(--dur) var(--ease), transform 0.25s cubic-bezier(0.34,1.56,0.64,1);
}

.am-industry-tag:hover {
  color: var(--accent);
  background: var(--color-cobalt-dim);
  transform: scale(1.06) translateY(-2px);
}

/* Horizontal auto-scrolling marquee -- restored per Andre's direction (the dark
   z-depth static-grid version was reverted). Plain, no special effects. */
@keyframes am-marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.am-marquee-outer {
  overflow: hidden;
  width: 100%;
}
.am-marquee-track {
  display: flex;
  width: max-content;
  animation: am-marquee-scroll 28s linear infinite;
}
.am-marquee-track:hover { animation-play-state: paused; }

.am-industry-logo-tile {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 125px;
  padding: 0 40px;
  flex-shrink: 0;
}

.am-client-logo {
  display: block;
  height: 56px;
  width: auto;
  max-width: 170px;
  object-fit: contain;
  filter: grayscale(100%) opacity(0.6);
  transition: filter 0.3s ease;
}

.am-industry-logo-tile:hover .am-client-logo {
  filter: grayscale(0%) opacity(1);
}

/* ============================================================================
   5. PROSE
   ========================================================================== */

.am-prose {
  font-size: var(--fs-base);
  line-height: 1.75;
  color: var(--text);
}

.am-prose p + p {
  margin-top: var(--sp-4);
}

.am-prose h3 {
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--text-strong);
  margin: var(--sp-6) 0 var(--sp-2);
}

.am-prose ul {
  padding-left: var(--sp-5);
  list-style: disc;
}

.am-prose li {
  margin-bottom: var(--sp-2);
}

/* ============================================================================
   6. SPLIT / TEXT SECTIONS
   ========================================================================== */

.am-split-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-16);
  align-items: center;
}

.am-split-copy {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

.am-split-media img {
  width: 100%;
  border-radius: var(--radius-lg);
  display: block;
}

.am-split-img {
  width: 100%;
  border-radius: var(--radius-lg);
}

.am-section--split-img,
.am-section.am-section--split-img {
  padding: 0;
  overflow: hidden;
}

.am-split-img-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 360px;
}

.am-split-img-row--reverse {
  direction: rtl;
}

.am-split-img-row--reverse > * {
  direction: ltr;
}

.am-split-img-content {
  padding: 64px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--sp-4);
}

.am-split-img-media {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-6);
}

/* Show the full image (device mockups etc) at full column width, no crop (Andre). */
.am-split-img-media img {
  position: static;
  width: 100%;
  height: auto;
  object-fit: contain;
  border-radius: var(--radius);
}

/* Lead-magnet two-column: value copy left, audit form right (Andre pattern) */
.am-section--lm-split .am-lm-split {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: var(--sp-12);
  align-items: center;
}
.am-section--lm-split .am-lm-split-form {
  background: #ffffff;
  border: 1px solid var(--color-line, #e4e8ef);
  border-radius: var(--radius-lg);
  padding: var(--sp-8);
  box-shadow: 0 12px 40px rgba(16,23,42,0.10);
}
.am-lm-form-title { font-size: var(--fs-lg); font-weight: 700; color: var(--color-ink, #0b1222); margin: 0 0 var(--sp-4); }
@media (max-width: 860px) { .am-section--lm-split .am-lm-split { grid-template-columns: 1fr; gap: var(--sp-8); } }
/* Stats band is just 4 figures; trim its vertical whitespace so it is not too tall (Andre). */
.am-stats-band { padding-block: var(--sp-10); }
/* Pillar page frame -- category.php authority sections take a --pcolor accent so
   Web/Marketing/Infrastructure/AI & Automation visibly differ, not just one sidebar var. */
.am-stats-band[style*="--pcolor"] { border-top: 3px solid var(--pcolor, #22A64F); }
.am-cat-pillar-bar { width: 48px; height: 4px; border-radius: 2px; background: var(--pcolor, #22A64F); margin-bottom: var(--sp-3); }
/* Issues/why-us band: replaces the old stats/number-counter band (Andre: never a
   stat counter). Real pain points + a short authority statement, not vanity metrics. */
.am-issues-band[style*="--pcolor"] { border-top: 3px solid var(--pcolor, #22A64F); }
.am-issues-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: var(--sp-10); align-items: start; }
@media (max-width: 860px) { .am-issues-grid { grid-template-columns: 1fr; gap: var(--sp-6); } }
.am-issues-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-4); }
.am-issues-list li { position: relative; padding-left: var(--sp-6); font-size: 1.05rem; font-weight: 700; color: var(--color-ink, #0b1222); line-height: 1.4; }
.am-issues-list li::before { content: ''; position: absolute; left: 0; top: 0.5em; width: 10px; height: 10px; border-radius: 2px; background: var(--pcolor, #22A64F); }
.am-issues-whyus { border-left: 1px solid rgba(0,0,0,.1); padding-left: var(--sp-8); }
@media (max-width: 860px) { .am-issues-whyus { border-left: none; padding-left: 0; border-top: 1px solid rgba(0,0,0,.1); padding-top: var(--sp-6); } }
.am-issues-whyus p:not(.am-eyebrow) { font-size: 1rem; line-height: 1.7; color: #4a5568; margin: var(--sp-2) 0 0; }
/* CTA band: primary + secondary (call) buttons side by side. Ghost reads on the dark cobalt band. */
.am-cta-band-actions { display: flex; gap: var(--sp-3); flex-wrap: wrap; align-items: center; }
.am-cta-band .am-btn-ghost { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,0.55); }
.am-cta-band .am-btn-ghost:hover { background: rgba(255,255,255,0.12); border-color: #fff; }

.am-split-cta {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--accent-lit);
  margin-top: var(--sp-2);
  transition: gap var(--dur);
}

.am-split-cta:hover {
  gap: var(--sp-3);
}

/* Split section: features panel (right side when no image) */
.am-split-features-panel {
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  padding: var(--sp-10);
}

.am-split-features {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-4);
  width: 100%;
}

.am-split-feature-item {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--radius-md);
  padding: var(--sp-5) var(--sp-6);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.am-section--light .am-split-feature-item,
.am-section--stone .am-split-feature-item,
.am-section--mist .am-split-feature-item {
  background: #ffffff;
  border: 1px solid rgba(0,0,0,0.08);
}

.am-split-feature-title {
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--text-strong, #ffffff);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.am-split-feature-desc {
  font-size: var(--fs-xs);
  /* fallback raised from 0.55 (3.6:1 FAIL) to 0.72 (5.1:1 PASS) on dark surfaces */
  color: var(--text-mute, rgba(255,255,255,0.72));
  line-height: 1.5;
}

.am-section--light .am-split-feature-title,
.am-section--stone .am-split-feature-title,
.am-section--mist .am-split-feature-title { color: #0f1826; }

.am-section--light .am-split-feature-desc,
.am-section--stone .am-split-feature-desc,
.am-section--mist .am-split-feature-desc { color: #4a5568; }

/* ============================================================================
   7. PAIN SECTION
   ========================================================================== */

.am-pain-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-16);
  align-items: start;
}

.am-pain-head {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.am-pain-close {
  font-size: var(--fs-md);
  color: var(--text-mute);
  line-height: 1.6;
  margin-top: var(--sp-4);
}

.am-pain-body {
  font-size: var(--fs-md);
  color: var(--text-mute);
  line-height: 1.7;
  margin-top: var(--sp-4);
  max-width: 60ch;
}

.am-pain-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  padding-top: var(--sp-6);
}

.am-pain-item {
  display: flex;
  gap: var(--sp-4);
  align-items: flex-start;
  font-size: var(--fs-base);
  color: var(--text);
  line-height: 1.6;
  padding-bottom: var(--sp-4);
  border-bottom: 1px solid var(--line);
}

.am-pain-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.am-pain-icon {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--color-cobalt-dim);
  color: var(--accent-lit);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1em;
  font-weight: 700;
  line-height: 1;
  margin-top: 2px;
}

/* ============================================================================
   8. PROCESS
   ========================================================================== */

.am-process-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--sp-8);
  counter-reset: step;
}

.am-process-step {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  position: relative;
}

.am-process-num {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--color-cobalt-dim);
  border: 2px solid var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-sm);
  font-weight: 800;
  color: var(--accent-lit);
  letter-spacing: 0.04em;
  flex-shrink: 0;
}

.am-process-connector {
  display: none;
  position: absolute;
  top: 24px;
  left: 48px;
  right: -32px;
  height: 2px;
  background: linear-gradient(90deg, var(--accent), transparent);
}

.am-process-step--last .am-process-connector {
  display: none;
}

.am-process-content {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.am-process-tag {
  font-size: var(--fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--accent-lit);
}

.am-process-content h3 {
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--text-strong);
  line-height: 1.3;
}

.am-process-content p {
  font-size: var(--fs-sm);
  color: var(--text-mute);
  line-height: 1.6;
}

/* ============================================================================
   9. STATS
   ========================================================================== */

.am-stats-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
}

.am-stat {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  text-align: center;
  padding: 8px 12px;
  border-right: 1px solid var(--line);
}
.am-stat:last-child { border-right: none; }

.am-stat-num {
  font-size: clamp(2.25rem, 4vw, 3.5rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--text-strong);
  line-height: 1;
}

.am-stat-label {
  font-size: var(--fs-sm);
  color: var(--text-mute);
  line-height: 1.4;
  margin-top: var(--sp-1);
}

/* ============================================================================
   10. BENEFITS / OUTCOMES
   ========================================================================== */

.am-outcome-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--sp-6);
}

.am-outcome-card {
  background: var(--color-white);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  padding: var(--sp-6);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  transition: transform 0.3s cubic-bezier(0.34,1.56,0.64,1), box-shadow var(--dur) var(--ease);
}

.am-section--graphite .am-outcome-card,
.am-section--slate .am-outcome-card {
  background: var(--color-slate);
  border-color: var(--color-slate-border);
}

.am-outcome-card:hover {
  transform: translateY(-5px) scale(1.01);
  box-shadow: 0 16px 48px rgba(66,133,244,0.15);
}

.am-outcome-num {
  font-size: var(--fs-xs);
  font-weight: 800;
  letter-spacing: 0.1em;
  color: var(--accent-lit);
}

.am-outcome-title {
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--text-strong);
  line-height: 1.3;
}

.am-outcome-body {
  font-size: var(--fs-sm);
  color: var(--text-mute);
  line-height: 1.6;
}

/* ============================================================================
   11. FAQS
   ========================================================================== */

.am-faq-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.am-faq-item {
  border-bottom: 1px solid var(--line);
  padding: var(--sp-5) 0;
}

.am-faq-item summary {
  font-size: var(--fs-md);
  font-weight: 600;
  color: var(--text-strong);
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--sp-4);
}

.am-faq-item summary::after {
  content: '+';
  font-size: var(--fs-xl);
  font-weight: 400;
  color: var(--accent-lit);
  flex-shrink: 0;
  transition: transform var(--dur) var(--ease);
}

.am-faq-item[open] summary::after {
  transform: rotate(45deg);
}

.am-faq-item p {
  font-size: var(--fs-base);
  color: var(--text-mute);
  line-height: 1.7;
  margin-top: var(--sp-4);
}

.am-disciplines-section {
  padding: 96px 0 140px;
}
/* Discipline section -- navy page bg (#172034); override dark defaults to white */
.am-disciplines-section .am-disciplines-title,
.am-disciplines-section .am-disciplines-lede{color:rgba(255,255,255,.9)}
.am-disciplines-section .am-bslide-heading{color:#fff}
.am-disciplines-section .am-bslide-body{color:rgba(255,255,255,.72)}
.am-disciplines-section .am-link-arrow{color:rgba(255,255,255,.82)}
.am-disciplines-section .am-link-arrow:hover{color:#fff}
/* Discipline slider — counter format, reuses bslide classes */
.am-disc-slider-wrap{position:relative}
.am-disc-slider-wrap .am-bslide-nav-inner{padding:var(--sp-6) 0 0}
/* Accordion within each discipline slide */
.am-disc-acc{margin:var(--sp-5) 0 var(--sp-6);padding-left:calc(var(--sp-6) + 5px)}
.am-disc-acc-btn{display:flex;align-items:center;justify-content:space-between;width:100%;background:transparent;border:none;border-bottom:1px solid rgba(255,255,255,.18);padding:var(--sp-3) 0;cursor:pointer;color:rgba(255,255,255,.9);font-size:.75rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;gap:var(--sp-3)}
.am-disc-acc-btn svg{flex-shrink:0;transition:transform .25s ease}
.am-disc-acc-btn[aria-expanded="true"] svg{transform:rotate(180deg)}
.am-disc-acc-body{overflow:hidden;max-height:0;transition:max-height .35s ease}
.am-disc-acc-body.is-open{max-height:260px}
.am-disc-acc-desc{color:rgba(255,255,255,.75);font-size:.95rem;line-height:1.65;padding:var(--sp-4) 0 var(--sp-3);margin:0}
.am-disc-acc-ctas{display:flex;gap:var(--sp-3);flex-wrap:wrap;padding-bottom:var(--sp-2)}
/* Narrative section */
/* ── Pillar Journey (scroll-driven sticky) ─────────────────────────────── */
.am-journey-outer{position:relative;height:950vh;background:#0a0a14}
.am-journey-sticky{position:sticky;top:0;height:100vh;overflow:hidden;background:#0a0a14}
.am-journey-intro{position:absolute;inset:0;display:flex;align-items:center;z-index:2}
.am-journey-h2{font-size:clamp(1.9rem,4vw,3.25rem);font-weight:800;color:#fff;line-height:1.15;margin:var(--sp-4) 0 var(--sp-5)}
.am-journey-lede{font-size:var(--fs-md,1.0625rem);color:rgba(255,255,255,.68);line-height:1.75;max-width:640px}
.am-journey-scroll-hint{margin-top:var(--sp-8);font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.28)}
.am-journey-panel{position:absolute;inset:0;display:flex;align-items:center;opacity:0;z-index:3;will-change:opacity;overflow:hidden;pointer-events:none}
.am-journey-panel.is-entering{pointer-events:auto}
.am-journey-panel::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--jcolor,#22A64F);z-index:2}
/* AM Ribbon ambient wash -- see .planning/design-system.md "AM Ribbon". Low-opacity tint only;
   the panel's own opacity fade (set by main.js tick()) already crossfades this for free.
   Wrapper takes the JS-driven scroll/mouse offset; inner layer keeps the ambient keyframe,
   so the two transforms never fight over the same element. */
.am-journey-bg-layer{position:absolute;inset:-4%;z-index:1;pointer-events:none;will-change:transform;transform:translate3d(var(--jparallax-x,0),var(--jparallax-y,0),0)}
.am-journey-panel-bg{position:absolute;inset:0;background-image:var(--jbg);background-size:cover;background-position:center;opacity:.16;pointer-events:none;will-change:transform;animation:am-ribbon-drift 26s ease-in-out infinite alternate}
@media(prefers-reduced-motion:reduce){.am-journey-panel-bg{animation:none}.am-journey-bg-layer{transform:none!important}}
.am-journey-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.5fr);gap:clamp(var(--sp-6),5vw,var(--sp-16));align-items:center;width:100%}
.am-journey-left{display:flex;flex-direction:column;gap:var(--sp-3);min-width:0;position:relative;z-index:2;will-change:transform,opacity}
.am-journey-num{font-size:.65rem;font-weight:600;letter-spacing:.14em;color:rgba(255,255,255,.35);text-transform:uppercase}
.am-journey-pillar{
  font-size:clamp(2.5rem,5.5vw,5rem);font-weight:900;line-height:.95;margin:var(--sp-1) 0 var(--sp-3);
  max-width:100%;overflow-wrap:break-word;word-break:break-word;hyphens:auto;
  color:var(--jcolor,#22A64F);
  opacity:1;
  position:relative;z-index:1;will-change:transform,opacity;
  transition:transform 0.25s ease;
}
.am-journey-pillar:hover{transform:scale(1.03)}
.am-journey-pillar--long{font-size:clamp(2rem,4vw,3.5rem)}
.am-journey-heading{font-size:clamp(1.2rem,2.2vw,1.75rem);font-weight:800;color:#fff;line-height:1.25;margin:0;position:relative;z-index:3;will-change:transform,opacity}
.am-journey-right{display:flex;flex-direction:column;gap:var(--sp-4);min-width:0;position:relative;z-index:2;will-change:transform,opacity}
.am-journey-body{font-size:1rem;color:rgba(255,255,255,.68);line-height:1.72;margin:0}
.am-journey-chips{display:flex;gap:8px;flex-wrap:wrap;margin:var(--sp-4) 0}
.am-journey-chip{font-size:.8rem;font-weight:600;color:var(--jcolor,#F8C112);border:1px solid var(--jcolor,#F8C112);border-radius:20px;padding:5px 14px;text-decoration:none;opacity:.8;transition:opacity .2s,background .2s}
.am-journey-chip:hover{opacity:1;background:color-mix(in srgb,var(--jcolor,#22A64F) 12%,transparent)}
.am-journey-flow{display:flex;align-items:stretch;gap:var(--sp-3);margin:var(--sp-3) 0}
.am-journey-flow-step{display:flex;flex-direction:column;gap:var(--sp-1);flex:1;background:rgba(255,255,255,.04);border:1px solid color-mix(in srgb,var(--jcolor,#8E2042) 35%,transparent);border-radius:8px;padding:var(--sp-3);min-width:0}
.am-journey-flow-num{font-size:.65rem;font-weight:800;letter-spacing:.12em;color:var(--jcolor,#8E2042);text-transform:uppercase}
.am-journey-flow-label{font-size:.88rem;font-weight:700;color:#fff;line-height:1.2}
.am-journey-flow-sub{font-size:.75rem;color:rgba(255,255,255,.45);line-height:1.4;margin:0}
.am-journey-flow-arrow{display:flex;align-items:center;color:color-mix(in srgb,var(--jcolor,#8E2042) 50%,transparent);font-size:.9rem;flex-shrink:0;align-self:center}
.am-journey-ctas{display:flex;gap:var(--sp-3);flex-wrap:wrap;margin-top:var(--sp-1)}
.am-journey-see-all{color:rgba(255,255,255,.42);font-size:.88rem;margin-top:var(--sp-1);display:inline-block;transition:color .2s}
.am-journey-see-all:hover{color:var(--jcolor,#22A64F)}
.am-journey-bridge{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;z-index:10;background:#0a0a14;will-change:opacity}
.am-journey-bridge p{font-size:clamp(1.3rem,3vw,2.4rem);font-weight:700;color:rgba(255,255,255,.88);text-align:center;max-width:680px;line-height:1.3;padding:0 var(--sp-6)}
.am-journey-progress{position:absolute;bottom:0;left:0;right:0;height:2px;background:rgba(255,255,255,.08);z-index:20}
.am-journey-progress-fill{height:100%;width:0%;background:rgba(255,255,255,.35)}

@keyframes am-pillar-in{from{transform:translateX(-24px);opacity:0}to{transform:none;opacity:1}}
@keyframes am-fade-up{from{transform:translateY(8px);opacity:0}to{transform:none;opacity:1}}
.am-journey-panel.is-entering .am-journey-num{animation:am-fade-up 0.25s ease-out 0.15s both}
.am-journey-panel.is-entering .am-journey-pillar{animation:am-pillar-in 0.35s ease-out 0.1s both}
.am-journey-panel.is-entering .am-journey-heading{animation:am-fade-up 0.35s ease-out 0.2s both}
.am-journey-panel.is-entering .am-journey-body{animation:am-fade-up 0.3s ease-out 0.25s both}
.am-journey-panel.is-entering .am-journey-chips{animation:am-fade-up 0.3s ease-out 0.3s both}
.am-journey-panel.is-entering .am-journey-ctas{animation:am-fade-up 0.3s ease-out 0.35s both}
.am-journey-panel.is-entering .am-journey-flow{animation:am-fade-up 0.3s ease-out 0.28s both}

/* ── Pillar Scroll (home page only) ──────────────────────────────────────
   Andre, 2026-07-21: "full scroll -- 1 section, no movement, things zoom
   in, keep all existing cards" -- a deliberate partial reversal of issue
   #252 (which replaced an earlier sticky scroll-jack with the left/right
   timeline this block used to implement). Structurally this is the SAME
   pinned/scroll-jacked pattern as the am-journey section above (tall outer
   + position:sticky viewport + absolutely-stacked panels driven by real
   scroll-progress JS, not a hard cut) -- see main.js's pscroll block for the
   tick()/opacity/scale math, modeled directly on am-journey's tick(). The
   difference from journey: a scale transform rides the same opacity curve
   for the "zoom in" cue, and there's one bottom progress-fill bar instead
   of per-row rail dots (superseding the #296 rail-dot-fill mechanism, which
   only made sense when every row was visible at once in normal flow).
   Mobile (<768px) gets NO pin/zoom at all -- same discipline as am-journey's
   own mobile fallback below -- panels just stack as plain static cards. */
.am-pscroll-outer{position:relative;background:#0a0a14;height:calc(var(--pscroll-count,4) * 100vh)}
.am-pscroll-sticky{position:sticky;top:0;height:100vh;overflow:hidden;display:flex;flex-direction:column;justify-content:center}
.am-pscroll-canvas{position:absolute;inset:0;z-index:0;pointer-events:none;width:100%;height:100%}
.am-pscroll-intro-wrap{text-align:center;max-width:760px;margin:0 auto var(--sp-8);position:relative;z-index:2}
.am-pscroll-heading{font-size:clamp(1.9rem,4vw,3rem);font-weight:800;color:#fff;line-height:1.15;margin:var(--sp-4) 0 var(--sp-5)}
.am-pscroll-lede{font-size:var(--fs-md,1.0625rem);color:rgba(255,255,255,.68);line-height:1.7}

.am-pscroll-row{position:absolute;inset:0;display:flex;align-items:center;opacity:0;transform:scale(.92);will-change:opacity,transform;pointer-events:none;z-index:2}
.am-pscroll-row.is-active{pointer-events:auto}
/* grid-auto-flow:dense matters here, not cosmetic: .am-pscroll-row-content (DOM-first)
   gets grid-column:2 on flipped rows (.am-pscroll-row--flip), and CSS Grid's default
   sparse auto-placement never backfills the column-1 cell it skipped to place content --
   it only moves forward. dense re-enables backfilling so both columns resolve to one row. */
.am-pscroll-row-grid{position:relative;display:grid;grid-template-columns:1fr 1fr;grid-auto-flow:dense;align-items:center;gap:0 clamp(var(--sp-8),6vw,var(--sp-16));width:100%}
.am-pscroll-row-content{grid-column:1;display:flex;flex-direction:column;gap:var(--sp-3);text-align:right;padding-right:clamp(var(--sp-6),4vw,var(--sp-10))}
.am-pscroll-row-stat{grid-column:2;display:flex;align-items:center;padding-left:clamp(var(--sp-6),4vw,var(--sp-10))}
.am-pscroll-row--flip .am-pscroll-row-content{grid-column:2;text-align:left;padding-right:0;padding-left:clamp(var(--sp-6),4vw,var(--sp-10))}
.am-pscroll-row--flip .am-pscroll-row-stat{grid-column:1;padding-left:0;padding-right:clamp(var(--sp-6),4vw,var(--sp-10));justify-content:flex-end}
.am-pscroll-num{font-size:.65rem;font-weight:600;letter-spacing:.14em;color:rgba(255,255,255,.35);text-transform:uppercase}
.am-pscroll-pillar{font-size:clamp(1.75rem,3.6vw,2.75rem);font-weight:900;line-height:1;margin:var(--sp-1) 0 var(--sp-2);color:var(--pcolor,#22A64F)}
.am-pscroll-panel-heading{font-size:clamp(1.2rem,2.2vw,1.6rem);font-weight:800;color:#fff;line-height:1.25;margin:0}
.am-pscroll-body{font-size:1rem;color:rgba(255,255,255,.68);line-height:1.72;margin:0}
.am-pscroll-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:var(--sp-2)}
.am-pscroll-row-content .am-pscroll-list{align-items:flex-end}
.am-pscroll-row--flip .am-pscroll-list{align-items:flex-start}
.am-pscroll-list li{position:relative;padding-left:var(--sp-5);font-size:.92rem;color:rgba(255,255,255,.75);line-height:1.5;text-align:left}
.am-pscroll-list li::before{content:'';position:absolute;left:0;top:.55em;width:7px;height:7px;border-radius:50%;background:var(--pcolor,#22A64F)}
.am-pscroll-more-toggle{display:inline-flex;align-items:center;gap:6px;background:none;border:0;padding:0;font:inherit;font-size:.9rem;font-weight:700;color:var(--pcolor,#22A64F);cursor:pointer}
.am-pscroll-more-icon{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;border-radius:50%;border:1.5px solid currentColor;font-size:.75rem;line-height:1;transition:transform .2s ease}
.am-pscroll-more-toggle[aria-expanded="true"] .am-pscroll-more-icon{transform:rotate(45deg)}
.am-pscroll-more{overflow:hidden;max-height:0;transition:max-height .3s ease}
.am-pscroll-more.is-open{max-height:400px}
.am-pscroll-links{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.am-pscroll-row--flip .am-pscroll-links{justify-content:flex-start}
.am-pscroll-stat{position:relative;font-size:clamp(1.1rem,1.6vw,1.375rem);font-weight:700;color:#fff;line-height:1.35;letter-spacing:-.01em;padding:var(--sp-5) var(--sp-6) var(--sp-5) var(--sp-8);background:linear-gradient(135deg,color-mix(in srgb,var(--pcolor,#22A64F) 14%,rgba(255,255,255,.03)),rgba(255,255,255,.03));border-radius:12px;border-left:3px solid var(--pcolor,#22A64F);box-shadow:0 8px 28px -12px color-mix(in srgb,var(--pcolor,#22A64F) 45%,transparent);margin:0;max-width:380px}
.am-pscroll-stat::before{content:'\201C';position:absolute;top:-.15em;left:var(--sp-3);font-size:2.6em;font-weight:800;line-height:1;color:var(--pcolor,#22A64F);opacity:.55;font-family:Georgia,serif}
.am-pscroll-row--flip .am-pscroll-row-stat .am-pscroll-stat{border-left:none;border-right:3px solid var(--pcolor,#22A64F)}

.am-pscroll-progress{position:absolute;bottom:0;left:0;right:0;height:2px;background:rgba(255,255,255,.08);z-index:20}
.am-pscroll-progress-fill{height:100%;width:0%;background:rgba(255,255,255,.35)}

.am-pscroll-closer{margin-top:var(--sp-10)}
.am-pscroll-closer-card{max-width:640px;margin:0 auto;text-align:center;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:12px;padding:var(--sp-8) var(--sp-6)}
.am-pscroll-closer-card h3{font-size:1.3rem;font-weight:800;color:#fff;margin:0 0 var(--sp-3)}
.am-pscroll-closer-card p{font-size:.95rem;color:rgba(255,255,255,.68);line-height:1.6;margin:0 0 var(--sp-5)}

/* ── Pillar Impact Explorer ──────────────────────────────────────────────── */
.am-pillar-impact{background:#0f1117}
.am-pi-tabs{display:flex;flex-direction:column;gap:2px;margin:var(--sp-8) 0 var(--sp-6);border:1px solid rgba(255,255,255,.08);border-radius:10px;overflow:hidden}
.am-pi-tab{display:flex;align-items:center;gap:var(--sp-3);width:100%;text-align:left;padding:var(--sp-4) var(--sp-5);background:rgba(255,255,255,.02);border:none;border-left:3px solid transparent;color:rgba(255,255,255,.55);font-size:.9rem;font-weight:600;letter-spacing:.02em;cursor:pointer;transition:background 0.2s,color 0.2s,border-color 0.2s;font-family:inherit}
.am-pi-tab:hover{background:rgba(255,255,255,.05);color:rgba(255,255,255,.85)}
.am-pi-tab.is-active{border-left-color:var(--tab-color,#22A64F);background:rgba(255,255,255,.06);color:#fff}
.am-pi-dot{width:8px;height:8px;border-radius:50%;background:var(--tab-color,#22A64F);flex-shrink:0;opacity:.6;transition:opacity .2s}
.am-pi-tab.is-active .am-pi-dot{opacity:1}
.am-pi-panels{position:relative;min-height:260px}
.am-pi-panel{display:none;animation:am-fade-up 0.3s ease-out both}
.am-pi-panel.is-active{display:block}
.am-pi-stat{font-size:clamp(1rem,2vw,1.2rem);font-weight:700;color:#fff;line-height:1.4;padding:var(--sp-5) var(--sp-6);background:rgba(255,255,255,.04);border-radius:10px;border-left:3px solid var(--panel-color,#22A64F);margin-bottom:var(--sp-6)}
.am-pi-outcomes{list-style:none;padding:0;margin:0 0 var(--sp-6);display:flex;flex-direction:column;gap:var(--sp-3)}
.am-pi-outcomes li{display:flex;align-items:flex-start;gap:var(--sp-3);font-size:.95rem;color:rgba(255,255,255,.75);line-height:1.5}
.am-pi-outcomes li::before{content:'';display:block;width:18px;height:18px;flex-shrink:0;margin-top:1px;background:var(--panel-color,#22A64F);border-radius:50%;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 10'%3E%3Cpath d='M1 5l3.5 3.5L11 1' stroke='%23fff' stroke-width='1.8' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:center;background-size:10px 9px}
.am-pi-chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:var(--sp-6)}
.am-pi-chip{font-size:.8rem;font-weight:600;color:var(--panel-color,#22A64F);border:1px solid var(--panel-color,#22A64F);border-radius:20px;padding:4px 14px;text-decoration:none;opacity:.8;transition:opacity .2s,background .2s}
.am-pi-chip:hover{opacity:1;background:color-mix(in srgb,var(--panel-color,#22A64F) 12%,transparent)}
.am-pi-cta{display:inline-block;padding:var(--sp-3) var(--sp-6);background:var(--panel-color,#22A64F);color:#fff;font-weight:700;font-size:.9rem;border-radius:6px;text-decoration:none;transition:opacity .2s,transform .2s}
.am-pi-cta:hover{opacity:.88;transform:translateY(-1px)}
@media(min-width:768px){
  .am-pi-tabs{flex-direction:row;flex-wrap:wrap;gap:0;border-radius:8px}
  .am-pi-tab{flex:1;justify-content:center;text-align:center;border-left:none;border-bottom:3px solid transparent;padding:var(--sp-3) var(--sp-4)}
  .am-pi-tab.is-active{border-left-color:transparent;border-bottom-color:var(--tab-color,#22A64F)}
}

/* ── Reviews Ticker ─────────────────────────────────────────────────────── */
.am-reviews-section{padding:80px 0 0;background:#0a0a14;overflow:hidden}
.am-reviews-header{text-align:center;padding-bottom:48px}
.am-reviews-header h2{font-size:clamp(1.6rem,3vw,2.4rem);font-weight:800;color:#fff;margin:var(--sp-3) 0 var(--sp-4)}
.am-google-badge{display:inline-flex;align-items:center;gap:var(--sp-3);background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:999px;padding:var(--sp-2) var(--sp-5);font-size:.85rem;color:rgba(255,255,255,.7)}
.am-google-badge-stars{color:#F9AB00;font-size:1rem;letter-spacing:2px}
.am-google-badge-score{font-weight:700;color:#fff}
.am-reviews-ticker-wrap{display:flex;flex-direction:column;gap:16px;padding-bottom:80px}
.am-reviews-track{display:flex;gap:16px;width:max-content}
.am-reviews-track--fwd{animation:rticker-fwd 60s linear infinite}
.am-reviews-track--rev{animation:rticker-rev 55s linear infinite}
.am-reviews-track:hover{animation-play-state:paused}
@keyframes rticker-fwd{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes rticker-rev{from{transform:translateX(-50%)}to{transform:translateX(0)}}
.am-review-card{flex-shrink:0;width:300px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);border-radius:12px;padding:20px 22px;display:flex;flex-direction:column;gap:10px}
.am-review-card-stars{color:#F9AB00;font-size:.9rem;letter-spacing:1px}
.am-review-card-body{font-size:.9rem;color:rgba(255,255,255,.72);line-height:1.6;flex:1;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.am-review-card-author{font-size:.8rem;font-weight:700;color:rgba(255,255,255,.5);margin-top:auto}

@media(max-width:767px){
  .am-journey-outer{height:auto;padding:72px 0 80px;overflow-x:hidden}
  .am-journey-sticky{position:static;height:auto;overflow:visible}
  .am-journey-intro{position:static;padding-bottom:48px}
  .am-journey-scroll-hint{display:none}
  .am-journey-panel{position:static;opacity:1;display:block;padding:40px 0;border-top:1px solid rgba(255,255,255,.08);transition:opacity 0.3s ease;pointer-events:auto}
  .am-journey-panel::before{display:none}
  .am-journey-grid{grid-template-columns:1fr;gap:var(--sp-5)}
  .am-journey-pillar{font-size:clamp(2.25rem,11vw,3.25rem)}
  .am-journey-bridge{display:none}
  .am-journey-progress{display:none}
  /* Pillar scroll: NO pin/zoom on mobile at all -- same discipline as
     am-journey's own mobile fallback just above. Panels drop out of the
     pinned/absolute stack entirely and become plain stacked cards in
     normal flow; main.js's pscroll tick() bails out under 768px so nothing
     fights this CSS for control of opacity/transform. */
  .am-pscroll-outer{height:auto;padding:56px 0 64px}
  .am-pscroll-sticky{position:static;height:auto;overflow:visible;display:block}
  .am-pscroll-row{position:static;opacity:1;transform:none;display:block;padding:28px 0;border-top:1px solid rgba(255,255,255,.08);pointer-events:auto}
  .am-pscroll-row:first-of-type{border-top:none}
  .am-pscroll-row-grid,
  .am-pscroll-row--flip .am-pscroll-row-grid{grid-template-columns:1fr;gap:var(--sp-4)}
  .am-pscroll-row-content,
  .am-pscroll-row--flip .am-pscroll-row-content{grid-column:1;text-align:left;padding:0}
  .am-pscroll-row-stat,
  .am-pscroll-row--flip .am-pscroll-row-stat{grid-column:1;padding:0;justify-content:flex-start}
  .am-pscroll-row-content .am-pscroll-list,
  .am-pscroll-row--flip .am-pscroll-list{align-items:flex-start}
  .am-pscroll-links,
  .am-pscroll-row--flip .am-pscroll-links{justify-content:flex-start}
  .am-pscroll-row--flip .am-pscroll-row-stat .am-pscroll-stat{border-right:none;border-left:3px solid var(--pcolor,#22A64F)}
  .am-pscroll-stat{max-width:none}
  .am-pscroll-progress{display:none}
}

/* ============================================================================
   12. GRID / FEATURE CARDS
   ========================================================================== */

.am-feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-6);
}
.am-feature-grid--2col {
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-8);
}
.am-feature-grid--2col .am-feature-card {
  border-top: none;
  border-left: none;
  border-right: none;
  border-bottom: none;
  border: 1px solid var(--color-slate-border);
  border-left: 5px solid var(--pillar-color, var(--accent));
  padding: var(--sp-8);
}
.am-feature-grid--2col .am-feature-card:nth-child(even) {
  border-left: 1px solid var(--color-slate-border);
  border-right: 5px solid var(--pillar-color, var(--accent));
}

.am-feature-card {
  background: #ffffff;
  border: 1px solid var(--color-line, #e4e8ef);
  border-top: 3px solid var(--pillar-color, var(--accent));
  border-radius: var(--radius-lg);
  padding: var(--sp-6);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  box-shadow: 0 1px 3px rgba(16,23,42,0.05);
  transition: transform 0.3s cubic-bezier(0.34,1.56,0.64,1), border-top-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.am-feature-card:hover {
  transform: translateY(-6px);
  border-top-color: var(--pillar-color, var(--accent));
  box-shadow: 0 16px 40px rgba(16,23,42,0.12);
}

.am-feature-num {
  font-size: var(--fs-xs);
  font-weight: 800;
  letter-spacing: 0.1em;
  color: var(--accent);
}

.am-feature-card h3 {
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--color-ink, #0b1222);
  line-height: 1.3;
}

.am-feature-card p {
  font-size: var(--fs-sm);
  color: var(--color-body, #2b3446);
  line-height: 1.6;
  flex: 1;
}

/* White cards carry dark text everywhere, incl. the --link pill-tab variant used
   on pillar pages (title/link were light for the old dark card). High-specificity
   so no themed container (--text = light) leaks a light color onto the title. */
.am-feature-card .am-feature-card-title,
.am-feature-card--link .am-feature-card-title { color: var(--color-ink, #0b1222); }
.am-feature-card--link { color: var(--color-body, #2b3446); }
.am-feature-card--link .am-feature-num { color: var(--accent); }
.am-feature-card--link:hover .am-feature-card-title { color: var(--accent); }
/* Links inside white feature cards (e.g. "Explore Web ->" on home) inherit the dark
   section's light text; force an accessible accent so they read on the white card. */
.am-feature-card .am-link-arrow { color: var(--accent); font-weight: 600; }

/* ============================================================================
   13. COMPARISON TABLE
   ========================================================================== */

.am-compare-table-wrap {
  overflow-x: auto;
}

.am-compare-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm);
}

.am-compare-table th {
  padding: var(--sp-3) var(--sp-5);
  font-size: var(--fs-xs);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-mute);
  text-align: left;
  border-bottom: 2px solid var(--line);
}

.am-compare-table th:nth-child(2) {
  color: var(--accent-lit);
}

.am-compare-table td {
  padding: var(--sp-4) var(--sp-5);
  color: var(--text);
  border-bottom: 1px solid var(--line);
  vertical-align: top;
  line-height: 1.5;
}

.am-compare-yes {
  color: var(--text-strong) !important;
  font-weight: 600;
}

.am-compare-no {
  color: var(--text-mute) !important;
}

/* ============================================================================
   14. SPOTLIGHT
   ========================================================================== */

.am-spotlight {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: var(--sp-16);
  align-items: center;
}

.am-spotlight-meta {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.am-spotlight-company {
  font-size: var(--fs-xl);
  font-weight: 800;
  color: var(--text-strong);
  line-height: 1.2;
}

.am-spotlight-industry {
  font-size: var(--fs-sm);
  color: var(--text-mute);
}

.am-spotlight-metrics {
  display: flex;
  gap: var(--sp-6);
  margin-top: var(--sp-4);
  flex-wrap: wrap;
}

.am-spotlight-metric {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.am-spotlight-val {
  font-size: var(--fs-2xl);
  font-weight: 800;
  color: var(--text-strong);
  letter-spacing: -0.02em;
  line-height: 1;
}

.am-spotlight-label {
  font-size: var(--fs-xs);
  color: var(--text-mute);
}

.am-spotlight-quote {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  border-left: 4px solid var(--accent);
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
  padding: var(--sp-8) var(--sp-10);
}
.am-section--light .am-spotlight-quote,
.am-section--stone .am-spotlight-quote,
.am-section--mist .am-spotlight-quote {
  background: rgba(0,0,0,0.05);
  border: 1px solid rgba(0,0,0,0.08);
  border-left: 4px solid var(--accent);
}

.am-spotlight-quote p {
  font-size: var(--fs-lg);
  color: var(--text);
  font-style: italic;
  line-height: 1.6;
}

.am-spotlight-quote cite {
  display: block;
  font-size: var(--fs-sm);
  color: var(--text-mute);
  margin-top: var(--sp-4);
  font-style: normal;
}

/* ============================================================================
   14b. LOGIN FORM
   ========================================================================== */

.am-login-split {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  min-height: calc(100vh - var(--header-h, 72px));
}
.am-login-rail {
  position: relative;
  padding: var(--sp-16) var(--sp-12);
  background:
    radial-gradient(1200px 500px at 20% -10%, rgba(27,108,179,.25), transparent 60%),
    var(--color-slate);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--sp-5);
  overflow: hidden;
}
.am-login-rail::before {
  content: '';
  position: absolute;
  left: 0; right: 0; top: 0; height: 3px;
  background: linear-gradient(90deg,#22A64F 0%,#F8C112 33%,#1B6CB3 66%,#8E2042 100%);
  background-size: 300% 100%;
  animation: am-ribbon-flow 8s linear infinite;
}
.am-login-rail-logo { height: 36px; align-self: flex-start; }
.am-login-rail-heading { font-size: clamp(1.6rem, 3vw, 2.2rem); font-weight: 800; color: #fff; line-height: 1.15; letter-spacing: -.01em; margin: 0; }
.am-login-rail-body { color: rgba(255,255,255,.72); font-size: 1rem; max-width: 38ch; line-height: 1.7; margin: 0; }
.am-login-panel {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-12);
  background: #0b1220;
}
.am-login-card { width: 100%; max-width: 400px; text-align: left; }
.am-login-eyebrow { display: block; font-size: var(--fs-xs); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #F8C112; margin-bottom: var(--sp-2); }
.am-login-heading { font-size: clamp(1.6rem, 3vw, 2.2rem); font-weight: 800; color: #fff; margin: 0 0 var(--sp-3); }
.am-login-body { font-size: 1rem; color: rgba(255,255,255,.72); line-height: 1.7; margin: 0 0 var(--sp-5); }
.am-login-form { display: flex; flex-direction: column; gap: var(--sp-3); }
.am-login-submit { min-width: 180px; }
.am-login-message { font-size: 1rem; color: #fff; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); border-radius: 10px; padding: var(--sp-4) var(--sp-5); margin: 0 0 var(--sp-4); }
.am-login-message--error { border-color: rgba(220,60,60,.4); background: rgba(220,60,60,.08); }
.am-hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

@media (max-width: 880px) {
  .am-login-split { grid-template-columns: 1fr; }
  .am-login-rail { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .am-login-rail::before { animation: none; }
}

/* ============================================================================
   15. CTA BAND
   ========================================================================== */

.am-cta-band-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-8);
  flex-wrap: wrap;
}

.am-cta-band h2 {
  font-size: clamp(1.5rem, 3vw, 2.5rem);
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.am-cta-band p {
  font-size: var(--fs-base);
  color: rgba(255,255,255,0.75);
  margin-top: var(--sp-2);
}

/* ============================================================================
   16. PIN STORY
   ========================================================================== */

.am-pin-story {
  padding: 0;
}

.am-pin-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-16);
  padding: 180px 0;
}

.am-pin-sticky {
  position: sticky;
  top: calc(var(--header-h) + var(--sp-10));
  align-self: start;
}

.am-pin-img {
  width: 100%;
  border-radius: var(--radius-lg);
  display: block;
  object-fit: cover;
  max-height: 560px;
}

.am-pin-img--placeholder {
  aspect-ratio: 4/3;
  background: var(--color-graphite);
  border: 1px solid var(--color-slate-border);
}

.am-pin-panels {
  display: flex;
  flex-direction: column;
  gap: var(--sp-16);
  padding-top: var(--sp-8);
}

.am-pin-panel {
  padding: var(--sp-10) 0;
  border-top: 1px solid var(--line);
}

.am-pin-num {
  font-size: var(--fs-xs);
  font-weight: 800;
  letter-spacing: 0.1em;
  color: var(--accent-lit);
}

.am-pin-title {
  font-size: var(--fs-xl);
  font-weight: 700;
  color: var(--text-strong);
  margin: var(--sp-3) 0 var(--sp-4);
  line-height: 1.3;
}

.am-pin-body {
  font-size: var(--fs-base);
  color: var(--text-mute);
  line-height: 1.7;
}

/* ============================================================================
   17. TIERS
   ========================================================================== */

.am-tier-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-6);
  align-items: start;
}

.am-tier-grid--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1024px) { .am-tier-grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .am-tier-grid--4 { grid-template-columns: 1fr; } }

.am-tier {
  background: var(--color-white);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  padding: var(--sp-8);
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  position: relative;
  transition: box-shadow var(--dur) var(--ease);
}

.am-tier--featured {
  background: var(--color-slate);
  border-color: var(--accent);
  border-width: 2px;
  box-shadow: 0 0 0 4px var(--color-cobalt-dim);
  transform: translateY(-8px);
}

.am-tier--featured * {
  --text: var(--color-dark-body);
  --text-strong: var(--color-white);
  /* raised from 0.60 (4.45:1 FAIL on #1c2c44) to 0.75 (6.04:1 PASS) */
  --text-mute: rgba(205,214,224,0.75);
}

.am-tier-badge {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--accent);
  color: #fff;
  font-size: var(--fs-xs);
  font-weight: 700;
  padding: 4px 12px;
  border-radius: var(--radius-pill);
  white-space: nowrap;
}

.am-tier-name {
  font-size: var(--fs-lg);
  font-weight: 800;
  color: var(--text-strong);
}

.am-tier-blurb {
  font-size: var(--fs-sm);
  color: var(--text-mute);
  line-height: 1.5;
}

.am-tier-price {
  display: flex;
  align-items: baseline;
  gap: var(--sp-2);
}

.am-tier-amount {
  font-size: var(--fs-2xl);
  font-weight: 800;
  color: var(--text-strong);
  letter-spacing: -0.02em;
}

.am-tier-cadence {
  font-size: var(--fs-sm);
  color: var(--text-mute);
}

.am-tier-features {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-4) 0;
  border-top: 1px solid var(--line);
  flex: 1;
}

.am-tier-features li {
  font-size: var(--fs-sm);
  color: var(--text);
  display: flex;
  gap: var(--sp-3);
  align-items: flex-start;
  line-height: 1.5;
}

.am-tier-check {
  color: var(--accent-lit);
  font-weight: 700;
  flex-shrink: 0;
}

/* ============================================================================
   18. VALUE PROP
   ========================================================================== */

.am-statement-h2 {
  font-size: clamp(1.75rem, 3.5vw, 3rem);
  font-weight: 800;
  color: var(--text-strong);
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin-bottom: var(--sp-8);
  text-align: center;
}

.am-statement-lede {
  font-size: var(--fs-md);
  color: var(--text-mute);
  line-height: 1.7;
  max-width: 60ch;
  margin: calc(var(--sp-8) * -1) auto var(--sp-8);
  text-align: center;
}

.am-value-prop-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--sp-6);
  margin-top: var(--sp-6);
}

.am-value-prop-item-heading {
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--text-strong);
  margin: 0 0 var(--sp-2);
}

.am-value-prop-item-body {
  font-size: var(--fs-base);
  color: var(--text-mute);
  line-height: 1.6;
  margin: 0;
}

.am-proof-bullets {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--sp-4);
  margin-top: var(--sp-6);
}

.am-proof-bullets li {
  font-size: var(--fs-base);
  color: var(--text-mute);
  line-height: 1.6;
  padding-left: var(--sp-5);
  position: relative;
}

.am-proof-bullets li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 10px;
  width: 8px;
  height: 2px;
  background: var(--accent-lit);
}

/* ============================================================================
   19. USE CASE CAROUSEL
   ========================================================================== */

.am-section--use-cases {
  background: var(--color-slate);
}

.am-usecase-grid {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(280px, 340px);
  gap: var(--sp-5);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding-bottom: var(--sp-4);
  cursor: grab;
}

.am-usecase-grid::-webkit-scrollbar { display: none; }
.am-usecase-grid:active { cursor: grabbing; }

@supports selector(.am-usecase-grid::scroll-button(right)) {
  .am-usecase-grid::scroll-button(left),
  .am-usecase-grid::scroll-button(right) {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--color-slate);
    border: 1px solid var(--color-slate-border);
    color: var(--text-mute);
    cursor: pointer;
    font-size: 18px;
  }
  .am-usecase-grid::scroll-button(left)  { content: "←" / "Previous"; }
  .am-usecase-grid::scroll-button(right) { content: "→" / "Next"; }
}

.am-usecase-card {
  scroll-snap-align: start;
  background: rgba(22, 28, 48, 0.72);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: var(--radius-lg);
  padding: var(--sp-6);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  transition: transform 0.3s cubic-bezier(0.34,1.56,0.64,1), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.am-usecase-card:hover {
  transform: translateY(-4px) scale(1.02);
  border-color: rgba(138,180,248,0.35);
  box-shadow: 0 12px 40px rgba(66,133,244,0.18);
}

.am-usecase-pain {
  font-size: var(--fs-sm);
  color: var(--text-mute);
  line-height: 1.55;
}

.am-usecase-fix {
  font-size: var(--fs-sm);
  color: var(--text);
  line-height: 1.55;
}

.am-usecase-outcome {
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--accent-lit);
  line-height: 1.4;
  margin-top: auto;
  padding-top: var(--sp-3);
  border-top: 1px solid var(--color-slate-border);
}

/* ============================================================================
   20. ROI BAND
   ========================================================================== */

.am-section--roi-band {
  background: var(--color-cobalt-deep);
  padding: var(--am-sec-pad-y) 0;
}

.am-roi-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--sp-8);
}

.am-roi-item {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.am-roi-value {
  font-size: clamp(2rem, 4vw, 3.5rem);
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.03em;
  line-height: 1;
}

.am-roi-label {
  font-size: var(--fs-sm);
  color: rgba(255,255,255,0.72);
  line-height: 1.4;
}

.am-roi-source {
  font-size: var(--fs-xs);
  /* 0.72 on cobalt-deep = 4.7:1 (was 0.55 = 3.6:1). WCAG AA body per QA standard G3. */
  color: rgba(255,255,255,0.72);
  margin-top: 2px;
}

/* ============================================================================
   21. LEAD MAGNET SECTION
   ========================================================================== */

.am-section--lead-magnet {
  background: var(--color-slate);
  --text: rgba(255,255,255,0.85);
  --text-strong: #ffffff;
  /* 0.72 on slate = 5.1:1 (was 0.6 = 3.8:1 FAIL). WCAG AA per qa-design-fidelity-standard G3. */
  --text-mute: rgba(255,255,255,0.72);
  color: rgba(255,255,255,0.85);
}

.am-lead-magnet-heading {
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  font-weight: 800;
  color: var(--text-strong);
  letter-spacing: -0.02em;
  margin-bottom: var(--sp-3);
  text-align: center;
}

.am-lead-magnet-sub {
  font-size: var(--fs-base);
  color: var(--text-mute);
  margin-bottom: var(--sp-8);
  text-align: center;
}

.am-lead-magnet-items {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--sp-8);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-2) var(--sp-6);
}
.am-lead-magnet-items li {
  font-size: var(--fs-sm);
  color: var(--text-mute);
  padding-left: var(--sp-5);
  position: relative;
}
.am-lead-magnet-items li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 6px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent-lit);
}

.am-lead-magnet-form {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  align-items: center;
}

.am-lead-magnet-fields {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: var(--sp-3);
  width: 100%;
}

.am-lead-magnet-fields input {
  width: 100%;
  padding: 11px 16px;
  background: var(--color-graphite);
  border: 1px solid var(--color-slate-border);
  border-radius: var(--radius);
  color: var(--text-strong);
  font: inherit;
  font-size: var(--fs-sm);
  transition: border-color var(--dur);
  outline: none;
}

.am-lead-magnet-fields input::placeholder {
  color: var(--text-mute);
}

.am-lead-magnet-fields input:focus {
  border-color: var(--accent-lit);
}

.am-lead-magnet-msg {
  font-size: var(--fs-xs);
  margin-top: var(--sp-2);
}

/* ============================================================================
   22. ANIMATIONS (data-animate)
   ========================================================================== */

.js [data-animate] {
  opacity: 0;
  transform: translateY(30px);
  animation: am-reveal 0.5s var(--ease) 0.6s forwards;
  transition: opacity 0.4s var(--ease), transform 0.4s var(--ease);
}

.js [data-animate].is-visible {
  animation: none;
  opacity: 1;
  transform: translateY(0);
}

@keyframes am-reveal {
  to { opacity: 1; transform: translateY(0); }
}

/* Child stagger within animated sections */
.js [data-animate].is-visible .am-service-card,
.js [data-animate].is-visible .am-work-card,
.js [data-animate].is-visible .am-card,
.js [data-animate].is-visible .am-stat,
.js [data-animate].is-visible .am-router-card,
.js [data-animate].is-visible .am-hub-card,
.js [data-animate].is-visible .am-journey-chip,
.js [data-animate].is-visible .am-journey-flow-step,
.js [data-animate].is-visible .am-process-step,
.js [data-animate].is-visible .am-value-card,
.js [data-animate].is-visible .am-resource-card,
.js [data-animate].is-visible .am-testimonial-card,
.js [data-animate].is-visible .am-benefit-card,
.js [data-animate].is-visible .am-feature-card,
.js [data-animate].is-visible .am-tier,
.js [data-animate].is-visible .slv2-tier-card,
.js [data-animate].is-visible .slv2-diff-item,
.js [data-animate].is-visible .slv2-process-step,
.js [data-animate].is-visible .slv2-outcome-row,
.js [data-animate].is-visible .am-blog-card,
.js [data-animate].is-visible .am-services-card,
.js [data-animate].is-visible .am-cr-card,
.js [data-animate].is-visible .am-challenge-card,
.js [data-animate].is-visible .am-cap-card,
.js [data-animate].is-visible .am-outcome-card,
.js [data-animate].is-visible .am-location-card {
  opacity: 0;
  transform: translateY(18px);
  animation: am-reveal 0.4s var(--ease) forwards;
}
.js [data-animate].is-visible .am-service-card:nth-child(1),
.js [data-animate].is-visible .am-work-card:nth-child(1),
.js [data-animate].is-visible .am-card:nth-child(1),
.js [data-animate].is-visible .am-stat:nth-child(1),
.js [data-animate].is-visible .am-router-card:nth-child(1),
.js [data-animate].is-visible .am-hub-card:nth-child(1),
.js [data-animate].is-visible .am-journey-chip:nth-child(1),
.js [data-animate].is-visible .am-journey-flow-step:nth-child(1),
.js [data-animate].is-visible .am-process-step:nth-child(1),
.js [data-animate].is-visible .am-value-card:nth-child(1),
.js [data-animate].is-visible .am-resource-card:nth-child(1),
.js [data-animate].is-visible .am-testimonial-card:nth-child(1),
.js [data-animate].is-visible .am-benefit-card:nth-child(1),
.js [data-animate].is-visible .am-feature-card:nth-child(1),
.js [data-animate].is-visible .am-tier:nth-child(1),
.js [data-animate].is-visible .slv2-tier-card:nth-child(1),
.js [data-animate].is-visible .slv2-diff-item:nth-child(1),
.js [data-animate].is-visible .slv2-process-step:nth-child(1),
.js [data-animate].is-visible .slv2-outcome-row:nth-child(1),
.js [data-animate].is-visible .am-blog-card:nth-child(1),
.js [data-animate].is-visible .am-services-card:nth-child(1),
.js [data-animate].is-visible .am-cr-card:nth-child(1),
.js [data-animate].is-visible .am-challenge-card:nth-child(1),
.js [data-animate].is-visible .am-cap-card:nth-child(1),
.js [data-animate].is-visible .am-outcome-card:nth-child(1),
.js [data-animate].is-visible .am-location-card:nth-child(1) { animation-delay: 0.05s; }
.js [data-animate].is-visible .am-service-card:nth-child(2),
.js [data-animate].is-visible .am-work-card:nth-child(2),
.js [data-animate].is-visible .am-card:nth-child(2),
.js [data-animate].is-visible .am-stat:nth-child(2),
.js [data-animate].is-visible .am-router-card:nth-child(2),
.js [data-animate].is-visible .am-hub-card:nth-child(2),
.js [data-animate].is-visible .am-journey-chip:nth-child(2),
.js [data-animate].is-visible .am-journey-flow-step:nth-child(2),
.js [data-animate].is-visible .am-process-step:nth-child(2),
.js [data-animate].is-visible .am-value-card:nth-child(2),
.js [data-animate].is-visible .am-resource-card:nth-child(2),
.js [data-animate].is-visible .am-testimonial-card:nth-child(2),
.js [data-animate].is-visible .am-benefit-card:nth-child(2),
.js [data-animate].is-visible .am-feature-card:nth-child(2),
.js [data-animate].is-visible .am-tier:nth-child(2),
.js [data-animate].is-visible .slv2-tier-card:nth-child(2),
.js [data-animate].is-visible .slv2-diff-item:nth-child(2),
.js [data-animate].is-visible .slv2-process-step:nth-child(2),
.js [data-animate].is-visible .slv2-outcome-row:nth-child(2),
.js [data-animate].is-visible .am-blog-card:nth-child(2),
.js [data-animate].is-visible .am-services-card:nth-child(2),
.js [data-animate].is-visible .am-cr-card:nth-child(2),
.js [data-animate].is-visible .am-challenge-card:nth-child(2),
.js [data-animate].is-visible .am-cap-card:nth-child(2),
.js [data-animate].is-visible .am-outcome-card:nth-child(2),
.js [data-animate].is-visible .am-location-card:nth-child(2) { animation-delay: 0.12s; }
.js [data-animate].is-visible .am-service-card:nth-child(3),
.js [data-animate].is-visible .am-work-card:nth-child(3),
.js [data-animate].is-visible .am-card:nth-child(3),
.js [data-animate].is-visible .am-stat:nth-child(3),
.js [data-animate].is-visible .am-router-card:nth-child(3),
.js [data-animate].is-visible .am-hub-card:nth-child(3),
.js [data-animate].is-visible .am-journey-chip:nth-child(3),
.js [data-animate].is-visible .am-journey-flow-step:nth-child(3),
.js [data-animate].is-visible .am-process-step:nth-child(3),
.js [data-animate].is-visible .am-value-card:nth-child(3),
.js [data-animate].is-visible .am-resource-card:nth-child(3),
.js [data-animate].is-visible .am-testimonial-card:nth-child(3),
.js [data-animate].is-visible .am-benefit-card:nth-child(3),
.js [data-animate].is-visible .am-feature-card:nth-child(3),
.js [data-animate].is-visible .am-tier:nth-child(3),
.js [data-animate].is-visible .slv2-tier-card:nth-child(3),
.js [data-animate].is-visible .slv2-diff-item:nth-child(3),
.js [data-animate].is-visible .slv2-process-step:nth-child(3),
.js [data-animate].is-visible .slv2-outcome-row:nth-child(3),
.js [data-animate].is-visible .am-blog-card:nth-child(3),
.js [data-animate].is-visible .am-services-card:nth-child(3),
.js [data-animate].is-visible .am-cr-card:nth-child(3),
.js [data-animate].is-visible .am-challenge-card:nth-child(3),
.js [data-animate].is-visible .am-cap-card:nth-child(3),
.js [data-animate].is-visible .am-outcome-card:nth-child(3),
.js [data-animate].is-visible .am-location-card:nth-child(3) { animation-delay: 0.19s; }
.js [data-animate].is-visible .am-service-card:nth-child(n+4),
.js [data-animate].is-visible .am-work-card:nth-child(n+4),
.js [data-animate].is-visible .am-card:nth-child(n+4),
.js [data-animate].is-visible .am-stat:nth-child(n+4),
.js [data-animate].is-visible .am-router-card:nth-child(n+4),
.js [data-animate].is-visible .am-hub-card:nth-child(n+4),
.js [data-animate].is-visible .am-journey-chip:nth-child(n+4),
.js [data-animate].is-visible .am-journey-flow-step:nth-child(n+4),
.js [data-animate].is-visible .am-process-step:nth-child(n+4),
.js [data-animate].is-visible .am-value-card:nth-child(n+4),
.js [data-animate].is-visible .am-resource-card:nth-child(n+4),
.js [data-animate].is-visible .am-testimonial-card:nth-child(n+4),
.js [data-animate].is-visible .am-benefit-card:nth-child(n+4),
.js [data-animate].is-visible .am-feature-card:nth-child(n+4),
.js [data-animate].is-visible .am-tier:nth-child(n+4),
.js [data-animate].is-visible .slv2-tier-card:nth-child(n+4),
.js [data-animate].is-visible .slv2-diff-item:nth-child(n+4),
.js [data-animate].is-visible .slv2-process-step:nth-child(n+4),
.js [data-animate].is-visible .slv2-outcome-row:nth-child(n+4),
.js [data-animate].is-visible .am-blog-card:nth-child(n+4),
.js [data-animate].is-visible .am-services-card:nth-child(n+4),
.js [data-animate].is-visible .am-cr-card:nth-child(n+4),
.js [data-animate].is-visible .am-challenge-card:nth-child(n+4),
.js [data-animate].is-visible .am-cap-card:nth-child(n+4),
.js [data-animate].is-visible .am-outcome-card:nth-child(n+4),
.js [data-animate].is-visible .am-location-card:nth-child(n+4) { animation-delay: 0.26s; }

/* ============================================================================
   23. RESPONSIVE
   ========================================================================== */

@media (max-width: 1024px) {
  .am-split-row {
    grid-template-columns: 1fr;
    gap: var(--sp-10);
  }

  .am-split-img-row {
    grid-template-columns: 1fr;
  }

  .am-split-img-row--reverse {
    direction: ltr;
  }

  .am-split-img-media {
    min-height: 280px;
  }

  .am-split-features-panel {
    min-height: 0;
    padding: var(--sp-8) var(--sp-6);
  }

  .am-split-features {
    grid-template-columns: 1fr 1fr;
  }

  .am-spotlight {
    grid-template-columns: 1fr;
    gap: var(--sp-8);
  }

  .am-pin-row {
    grid-template-columns: 1fr;
  }

  .am-pin-sticky {
    position: static;
  }

  .am-tier-grid {
    grid-template-columns: 1fr;
  }

  .am-tier--featured {
    transform: none;
  }

  .am-feature-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .am-feature-grid--2col {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .am-section {
    padding: var(--am-sec-pad-y-sm) 0;
  }

  .am-hero           { min-height: 360px; padding: 144px 0; }
  .am-hero--full     { min-height: 480px; padding: 144px 0; }
  .am-hero--service  { min-height: 400px; }
  .am-hero--blog     { min-height: 360px; padding: 96px 0; }
  .am-hero--magazine { min-height: 55vh; padding: 96px 0; }
  .am-hero--minimal  { min-height: 45vh; padding: 84px 0; }
  .am-hero--compact  { min-height: 0;    padding: 84px 0; }

  .am-pain-inner {
    grid-template-columns: 1fr;
    gap: var(--sp-8);
  }

  .am-feature-grid {
    grid-template-columns: 1fr;
  }

  .am-cta-band-inner {
    flex-direction: column;
    align-items: flex-start;
  }

  .am-lead-magnet-fields {
    grid-template-columns: 1fr;
  }

  .am-tier-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 512px) {
  .am-outcome-grid {
    grid-template-columns: 1fr;
  }
  .am-outcome-card {
    padding: var(--sp-5) var(--sp-4);
  }
}

@media (max-width: 480px) {
  .am-hero-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .am-stats-row { grid-template-columns: repeat(2, 1fr); }
  .am-stat { padding: 20px 16px !important; }
  .am-stat:nth-child(2) { border-right: none; }
  .am-stat:nth-child(3) { border-top: 1px solid var(--line); }

  .am-roi-row {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 375px) {
  .am-hero           { min-height: 320px; padding: 120px 0; }
  .am-hero--full     { min-height: 380px; padding: 120px 0; }
  .am-hero--service  { min-height: 320px; }
  .am-hero--blog     { min-height: 320px; padding: 84px 0; }
}

/* Services Grid Section */
.am-services-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-6);
  margin-top: var(--sp-12);
}

.am-services-card {
  border: 1px solid var(--color-line, #e4e8ef);
  border-radius: 8px;
  padding: var(--sp-8);
  background: #ffffff;
  box-shadow: 0 1px 3px rgba(16,23,42,0.05);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.am-services-card:hover { transform: translateY(-4px); box-shadow: 0 16px 40px rgba(16,23,42,0.12); }

.am-services-card__icon {
  width: 3px;
  height: 28px;
  border-radius: 2px;
  background: var(--accent);
  opacity: 1;
  margin-bottom: var(--sp-3);
}

.am-services-card__title {
  font-size: var(--fs-xl);
  font-weight: 700;
  color: var(--color-ink, #0b1222);
  margin: 0;
}

.am-services-card__body {
  font-size: var(--fs-sm);
  color: var(--color-body, #2b3446);
  line-height: 1.6;
  flex: 1;
  margin: 0;
}

.am-services-card__link {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--accent);
  text-decoration: none;
  margin-top: var(--sp-2);
  display: inline-block;
}

.am-services-card__link:hover {
  color: var(--color-cobalt-deep, #145796);
}

@media (max-width: 1024px) {
  .am-services-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 600px) {
  .am-services-grid {
    grid-template-columns: 1fr;
  }
}

/* Headings on light sections: near-black (not blue) */
/* Blue = buttons, eyebrows, links, CTAs only. Not headings */
.am-section--light h2,
.am-section--stone h2,
.am-section--mist h2,
.am-section--alt h2 {
  color: #0f1826;
}

.am-section--light h3,
.am-section--stone h3,
.am-section--mist h3,
.am-section--alt h3 {
  color: #0f1826;
}

.am-section--light p,
.am-section--stone p,
.am-section--mist p,
.am-section--alt p {
  color: #1a2535;
}

/* ============================================================================
   SYSTEMIC CONTRAST FIX: fixed-dark-bg cards inside light/stone/mist/alt sections
   Root cause: .am-section--{light,stone,mist,alt} h3/p (specificity 0,1,1 at
   line 1901/1908) wins over .am-feature-card h3/p (0,1,1 at line 1073/1080)
   by source order, yielding near-black (#0f1826 / #1a2535) on slate (#1c2c44).
   .am-tier--featured same issue: am-section--stone (hardcoded in PHP) defeats
   the CSS-variable contract set by .am-tier--featured * (specificity 0,1,0).
   Fix: 2-class scope (0,2,1) beats any 1-class section override (0,1,1).
   Confirmed failures: contact.php stone grid, category.php light grid,
   _am_section_grid() alt-default grids, _am_section_tiers() featured tier.
   ========================================================================== */

/* Feature cards are now WHITE with dark text universally (redesign): the base
   .am-feature-card rule sets dark text; no section-scoped white override needed. */

/* Tier featured card: am-section--stone hardcoded in _am_section_tiers();
   .am-tier--featured * sets CSS vars (0,1,0) but loses to section h3/p (0,1,1) */
.am-section--stone .am-tier--featured h3,
.am-section--light .am-tier--featured h3 { color: var(--color-white); }

.am-section--stone .am-tier--featured p,
.am-section--light .am-tier--featured p {
  /* 6.04:1 on slate: WCAG AA; matches .am-tier--featured * --text-mute value */
  color: rgba(205,214,224,0.75);
}

.am-section--light .am-section-lede,
.am-section--stone .am-section-lede,
.am-section--mist .am-section-lede,
.am-section--alt .am-section-lede {
  color: #4a5568;
}

.am-section--light .am-stat-num,
.am-section--stone .am-stat-num,
.am-section--mist .am-stat-num,
.am-section--alt .am-stat-num {
  color: #0f1826;
}

.am-section--light .am-stat-label,
.am-section--stone .am-stat-label,
.am-section--mist .am-stat-label,
.am-section--alt .am-stat-label {
  color: #4a5568;
}

/* ============================================================================
   SYSTEMIC CONTRAST FIX BLOCK 2: additional components across 6 failure clusters
   Source: QA sweep (145 failures). Strategy: compound selectors >= 0,2,0 beat
   all 1-class section/component overrides (0,1,1). sections.css source order
   wins over main.css at equal specificity (0,1,1). No !important except where
   overriding an existing !important rule.
   ========================================================================== */

/* FIX 1 | Cluster 1 /solutions/: am-services-card inside light sections.
   Root: .am-section--light h3 (0,1,1) beats .am-services-card__title (0,1,0).
   Card bg = var(--color-graphite) is opaque; bg() finds graphite. Fix: (0,2,0). */
/* Services cards are now WHITE with dark text universally (redesign). The card can
   sit in a DARK-classed section whose `.am-section--X h3/p` (0,1,1) sets white text,
   which would leak onto the white card (white-on-white). Force dark with 0,2,0. */
.am-section--light .am-services-card__title,.am-section--stone .am-services-card__title,.am-section--mist .am-services-card__title,.am-section--alt .am-services-card__title,.am-section--white .am-services-card__title,.am-section--graphite .am-services-card__title,.am-section--slate .am-services-card__title,.am-section--navy .am-services-card__title{color:var(--color-ink)}
.am-section--light .am-services-card__body,.am-section--stone .am-services-card__body,.am-section--mist .am-services-card__body,.am-section--alt .am-services-card__body,.am-section--graphite .am-services-card__body,.am-section--slate .am-services-card__body,.am-section--navy .am-services-card__body{color:var(--color-body)}

/* FIX 2 | Cluster 1 /solutions/: am-section--use-cases has slate bg but is
   NOT in main.css dark-heading whitelist. (0,1,1) rule here beats main.css by
   source order. */
.am-section--use-cases h1,
.am-section--use-cases h2,
.am-section--use-cases h3,
.am-section--use-cases h4 { color: var(--color-white); }

.am-section--use-cases p { color: rgba(255,255,255,0.85); }

/* FIX 3 | Cluster 4 /contact/: lead-magnet section auto-assigned bg='light'
   so it gets BOTH am-section--lead-magnet (slate real bg) AND am-section--light.
   .am-section--light h2/p (0,1,1) override .am-lead-magnet-* (0,1,0) and push
   dark colors onto the slate surface. (0,1,1) rules here (after light overrides)
   win by source order; (0,2,0) compounds win over (0,2,0) light-eyebrow rule. */
.am-section--lead-magnet h1,
.am-section--lead-magnet h2,
.am-section--lead-magnet h3,
.am-section--lead-magnet h4 { color: #ffffff; }

.am-section--lead-magnet p { color: rgba(255,255,255,0.85); }

.am-section--lead-magnet .am-eyebrow { color: var(--color-muted-on-dark); }

.am-section--lead-magnet .am-lead-magnet-heading { color: #ffffff; }
.am-section--lead-magnet .am-lead-magnet-sub     { color: rgba(255,255,255,0.72); }

/* FIX 4 | Cluster 3 /growth-tools/: am-service-card bg is rgba(255,255,255,0.05)
   (alpha<0.5); bg() walks up to light/white section bg. White title/desc on white
   bg = r=1.00 FAIL. Force dark text in light section contexts. */
.am-section--white .am-service-card-title,
.am-section--light .am-service-card-title,
.am-section--stone .am-service-card-title,
.am-section--mist  .am-service-card-title,
.am-section--alt   .am-service-card-title { color: #0f1826; }

.am-section--white .am-service-card-desc,
.am-section--light .am-service-card-desc,
.am-section--stone .am-service-card-desc,
.am-section--mist  .am-service-card-desc,
.am-section--alt   .am-service-card-desc { color: #4a5568; }

/* FIX 4b | Card surface on light sections: default card uses rgba(255,255,255,0.05) + white
   border designed for dark backgrounds. On light sections both become invisible. */
.am-section--white .am-service-card,
.am-section--light .am-service-card,
.am-section--stone .am-service-card,
.am-section--mist  .am-service-card,
.am-section--alt   .am-service-card {
  background: #ffffff;
  border-color: rgba(0,0,0,0.08);
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}
.am-section--white .am-service-card:hover,
.am-section--light .am-service-card:hover,
.am-section--stone .am-service-card:hover,
.am-section--mist  .am-service-card:hover,
.am-section--alt   .am-service-card:hover {
  background: #f5f7fa;
  border-color: rgba(0,0,0,0.14);
}

/* FIX 5 | Cluster 2 pillar pages: am-process-tag uses accent-lit (#5d78c9)
   r=3.86 on navy. #7b9fd8 = 6.03:1 on navy, 5.36:1 on graphite. */
.am-section--navy      .am-process-tag,
.am-section--slate     .am-process-tag,
.am-section--graphite  .am-process-tag,
.am-section--cobalt    .am-process-tag,
.am-section--use-cases   .am-process-tag,
.am-section--lead-magnet .am-process-tag,
.am-section--next-steps  .am-process-tag { color: #7b9fd8; }

/* FIX 6 | Cluster 5 /home/: am-tabs-section.am-section--graphite forces
   background:#fff (line ~2867) but dark-section eyebrow override gives
   color-muted-on-dark (#94b0c9) r=2.25 on white. #1d4ed8 = 6.70:1 on white. */
.am-tabs-section.am-section--graphite .am-eyebrow { color: #1d4ed8; }

/* FIX 7 | Cluster 2 pillar pages: tabs sections with bg=slate have
   .am-tabpanel-body (#4a5568) and .am-tabpanel-list li (#2d3748) on dark bg.
   r=1.87 and r=1.17 respectively on slate. Light replacements needed. */
.am-tabs-section.am-section--slate .am-tabs-lede,
.am-tabs-section.am-section--navy  .am-tabs-lede { color: rgba(255,255,255,0.75); }

.am-tabs-section.am-section--slate .am-tabpanel-body,
.am-tabs-section.am-section--navy  .am-tabpanel-body { color: rgba(255,255,255,0.75); }

.am-tabs-section.am-section--slate .am-tabpanel-list li,
.am-tabs-section.am-section--navy  .am-tabpanel-list li { color: rgba(255,255,255,0.85); }

.am-tabs-section.am-section--slate .am-tab,
.am-tabs-section.am-section--navy  .am-tab { color: rgba(255,255,255,0.65); }

.am-tabs-section.am-section--slate .am-tab.is-active,
.am-tabs-section.am-section--navy  .am-tab.is-active { color: #ffffff; }

.am-tabs-section.am-section--slate .am-tabs-nav,
.am-tabs-section.am-section--navy  .am-tabs-nav { border-bottom-color: rgba(255,255,255,0.12); }

.am-tabs-section.am-section--slate .am-tabpanel-list li::before,
.am-tabs-section.am-section--navy  .am-tabpanel-list li::before { background: #7b9fd8; }

/* FIX 8 | Cluster 5 & 6 home+service: am-split-cta uses accent-lit (#5d78c9)
   r=3.89 on ice/light sections. #1d4ed8 = 6.70:1 on white, 6.19:1 on ice. */
.am-section--light .am-split-cta,
.am-section--stone .am-split-cta,
.am-section--mist  .am-split-cta,
.am-section--alt   .am-split-cta,
.am-section--white .am-split-cta { color: #1d4ed8; }


/* FIX 10 | Cluster 6 service pages: am-promo-strip has no am-section class
   so inherits navy body bg. Base .am-eyebrow = #5d78c9 = r=3.86 on navy.
   Scoped (0,2,0) rule: #7b9fd8 = 6.03:1 on navy. */
.am-promo-strip .am-eyebrow { color: #7b9fd8; }

/* FIX 11 | /blog/ filter bar: light ice bg (#f8fafc) but .am-blog-cat inherits
   --text = #cdd6e0 (dark-body token) = r=1.36 on ice. #4a5568 = 5.74:1. */
.am-blog-filter-bar .am-blog-cat { color: #4a5568; }

/* Split hero layout: text left, panel right */
.am-hero-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-16);
  align-items: center;
  width: 100%;
}

.am-hero-split-copy {
  display: flex;
  flex-direction: column;
}

.am-hero-split-panel {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  padding: var(--sp-8);
  background: rgba(255,255,255,0.03);
}

.am-hero-split-panel-item {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-4);
  padding: var(--sp-4) 0;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

.am-hero-split-panel-item:last-child { border-bottom: none; }

.am-hero-split-panel-icon {
  width: 3px;
  height: 36px;
  border-radius: 2px;
  background: var(--accent);
  flex-shrink: 0;
  margin-top: 2px;
}

.am-hero-split-panel-title {
  font-size: var(--fs-sm);
  font-weight: 700;
  color: #ffffff;
  line-height: 1.3;
}

.am-hero-split-panel-desc {
  font-size: var(--fs-xs);
  /* raised from 0.50 (3.3:1 FAIL) to 0.65 (4.6:1 PASS) on #05070d */
  color: rgba(255,255,255,0.65);
  line-height: 1.5;
  margin-top: 2px;
}

/* Cisco-style outlined white pill CTA */
.am-btn-hero-outline {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 11px 28px;
  border: 1px solid rgba(255,255,255,0.7);
  border-radius: var(--radius-pill);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: #ffffff;
  background: transparent;
  text-decoration: none;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
  white-space: nowrap;
}

.am-btn-hero-outline:hover {
  background: rgba(255,255,255,0.08);
  border-color: #ffffff;
}

/* Cisco-style links row */
.am-section--links-row {
  padding: var(--sp-0) 0;
  border-top: 1px solid rgba(255,255,255,0.07);
  border-bottom: 1px solid rgba(255,255,255,0.07);
}

.am-links-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.am-links-row-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-5) var(--sp-6);
  border-right: 1px solid rgba(255,255,255,0.07);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: rgba(255,255,255,0.75);
  text-decoration: none;
  transition: color var(--dur) var(--ease), background var(--dur) var(--ease);
  gap: var(--sp-3);
}

.am-links-row-item:last-child { border-right: none; }

.am-links-row-item:hover {
  color: #ffffff;
  background: rgba(255,255,255,0.04);
}

.am-links-row-arrow {
  font-size: 1rem;
  opacity: 0.5;
  transition: opacity var(--dur), transform var(--dur);
}

.am-links-row-item:hover .am-links-row-arrow {
  opacity: 1;
  transform: translateX(4px);
}

@media (max-width: 768px) {
  .am-links-row { grid-template-columns: repeat(2, 1fr); }
  .am-links-row-item:nth-child(2) { border-right: none; }
  .am-links-row-item:nth-child(3),
  .am-links-row-item:nth-child(4) { border-top: 1px solid rgba(255,255,255,0.07); }
}

/* Services grid + stat nums on dark sections keep white */
.am-section--graphite .am-stat-num,
.am-section--slate .am-stat-num { color: #ffffff; }
/* raised from 0.50 (3.3:1 FAIL) to 0.65 (4.6:1 PASS) on #222f42/#1c2c44 */
.am-section--graphite .am-stat-label,
.am-section--slate .am-stat-label { color: rgba(255,255,255,0.65); }
.am-section--graphite .am-services-card,
.am-section--slate .am-services-card { background: #ffffff; border-color: var(--color-line, #e4e8ef); }
.am-section--graphite h2,
.am-section--slate h2 { color: var(--color-white); }

/* Proof bar: stat row above industry tags, spec Row 03 */
.am-proof-bar {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  margin-bottom: var(--sp-4);
  flex-wrap: wrap;
}

.am-proof-stat {
  font-size: var(--fs-sm);
  color: var(--color-body);
}

.am-proof-stat strong {
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--accent);
  margin-right: 3px;
}

.am-proof-sep {
  /* WCAG fix: #ccd0d9 was 1.55:1 on white (FAIL). #767676 = 4.54:1 (PASS UI 3:1) */
  color: #767676;
  font-size: var(--fs-sm);
}

/* Benefits: NO card borders. Whitespace only (spec Row 05) */
.am-section--light .am-outcome-card,
.am-section--light .am-benefit-card,
.am-section--light .am-benefits-item {
  background: transparent;
  border: none;
  box-shadow: none;
  padding-left: 0;
  padding-right: 0;
}

/* Services grid: 3-col per spec */
.am-section--graphite .am-services-grid,
.am-section--slate .am-services-grid {
  grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 768px) {
  .am-section--graphite .am-services-grid,
  .am-section--slate .am-services-grid { grid-template-columns: 1fr; }
  .am-proof-bar { gap: var(--sp-3); }
}

/* Logo strip: grayscale partner/client logos horizontal row */
.am-logo-strip-eyebrow {
  text-align: center;
  margin-bottom: var(--sp-6);
}
.am-logo-strip-track {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-6) var(--sp-10);
}
.am-logo-strip-item { flex: 1 1 0; min-width: 0; display: flex; justify-content: center; }
.am-logo-strip-item img {
  display: block;
  height: 88px;
  width: auto;
  max-width: 200px;
  object-fit: contain;
  filter: none;
  transition: transform 0.2s;
}
.am-logo-strip-item img:hover {
  transform: translateY(-2px);
}
@media (max-width: 640px) {
  .am-logo-strip-track { grid-template-columns: repeat(2, 1fr); gap: var(--sp-5); }
  .am-logo-strip-item img { max-height: 72px; max-width: 160px; }
}

.am-term {
  cursor: help;
  border-bottom: 1px dotted var(--color-accent, #4f7ef8);
}

#am-tooltip {
  position: absolute;
  z-index: 9999;
  max-width: 320px;
  background: var(--color-surface-raised, #1e2433);
  color: var(--color-text, #e8eaf0);
  border: 1px solid var(--color-border, #2a3045);
  border-radius: 8px;
  padding: 12px 14px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.3);
  font-size: 0.875rem;
  line-height: 1.5;
  pointer-events: none;
}

#am-tooltip[hidden] {
  display: none;
}

#am-tooltip strong {
  display: block;
  margin-bottom: 6px;
  font-size: 0.9375rem;
  color: var(--color-accent, #4f7ef8);
}

#am-tooltip .am-tooltip-sol {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--color-border, #2a3045);
  color: var(--color-text-muted, #9ba3b8);
}

@media (max-width: 640px) {
  #am-tooltip {
    max-width: 260px;
    font-size: 0.8125rem;
  }
}

/* Hub pages: child listing grid */
.am-hub-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:var(--sp-5);margin-top:var(--sp-6)}
.am-hub-card{display:block;padding:var(--sp-6);border:1px solid rgba(0,0,0,0.08);border-radius:var(--radius-md);background:#fff;color:var(--color-graphite);text-decoration:none;transition:border-color var(--dur),transform var(--dur)}
.am-hub-card:hover{border-color:var(--accent-lit);transform:translateY(-2px)}
.am-hub-card h3{margin:0 0 var(--sp-2);font-size:var(--fs-md);color:var(--color-ink)}
.am-hub-card p{margin:0;font-size:var(--fs-sm);color:#4a5568;line-height:1.5}

/* Value cards: fallback grid in location/category pages */
.am-grid{display:grid;gap:var(--sp-5);margin-top:var(--sp-6)}
.am-grid--2col{grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
.am-value-card{padding:var(--sp-5);border:1px solid rgba(0,0,0,0.08);border-radius:var(--radius-md);background:#fff}
.am-value-card h3{margin:0 0 var(--sp-2);font-size:var(--fs-md);color:var(--color-ink)}
.am-value-card p{margin:0;font-size:var(--fs-sm);color:#4a5568;line-height:1.6}
.am-section--light .am-value-card,.am-section--stone .am-value-card{background:#fff}


/* Cisco-style Features Accordion */
.am-fa-section { padding: var(--am-sec-pad-y) 0; }
.am-fa-heading { font-size: clamp(1.75rem, 3vw, 2.5rem); font-weight: 700; max-width: 28ch; margin: var(--sp-2) 0 var(--sp-12); color: var(--color-ink); }
.am-fa-grid { display: grid; grid-template-columns: 5fr 7fr; gap: var(--sp-12); align-items: start; }
/* No image panel: items span full width instead of leaving a blank right column (gap report #H). */
.am-fa-section--no-img .am-fa-grid { grid-template-columns: 1fr; }
.am-fa-section--no-img .am-fa-items { max-width: 820px; margin-inline: auto; }
.am-fa-items { display: flex; flex-direction: column; gap: var(--sp-3); }
.am-fa-item { width: 100%; text-align: left; background: transparent; border: 0; border-left: 3px solid rgba(0,0,0,0.08); padding: var(--sp-4) var(--sp-5); cursor: pointer; transition: border-color var(--dur), background var(--dur); font: inherit; color: #0f1826; }
.am-fa-item:hover { background: rgba(0,0,0,0.02); }
.am-fa-item.is-active { border-left-color: var(--accent-lit); background: rgba(0,0,0,0.03); }
.am-fa-item-title { margin: 0; font-size: var(--fs-lg); font-weight: 600; color: #0f1826; line-height: 1.3; }
.am-fa-metric { display: inline-block; font-size: var(--fs-xs); font-weight: 800; letter-spacing: 0.04em; color: var(--accent-lit); margin-bottom: var(--sp-1); }
.am-fa-item-body { margin: var(--sp-2) 0 0; font-size: var(--fs-sm); color: #4a5568; line-height: 1.55; max-height: 0; opacity: 0; overflow: hidden; transition: max-height var(--dur), opacity var(--dur), margin var(--dur); }
.am-fa-item.is-active .am-fa-item-body { max-height: 240px; opacity: 1; margin-top: var(--sp-2); }
.am-fa-image { display: block; border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 16/9; background: #f0f4f9; }
.am-fa-image img { width: 100%; height: 100%; object-fit: cover; display: block; transition: opacity var(--dur); }
.am-fa-cta { margin-top: var(--sp-10); text-align: center; }
@media (max-width: 767px) {
  .am-fa-grid { grid-template-columns: 1fr; gap: var(--sp-6); }
  .am-fa-image { order: -1; aspect-ratio: 16/10; }
}

/* Tabs section: tabbed deep-dive (Cisco-aligned) */
.am-tabs-section { padding: var(--am-sec-pad-y) 0; }
.am-tabs-heading { font-size: clamp(1.75rem, 3vw, 2.5rem); font-weight: 700; max-width: 28ch; margin: var(--sp-2) 0 var(--sp-3); color: var(--color-ink); }
.am-tabs-lede { font-size: var(--fs-md); color: #4a5568; max-width: 60ch; margin: 0 0 var(--sp-10); }
.am-tabs-nav { display: flex; flex-wrap: wrap; gap: var(--sp-2); border-bottom: 1px solid rgba(0,0,0,0.08); margin-bottom: var(--sp-8); }
.am-tab { background: transparent; border: 0; border-bottom: 2px solid transparent; padding: var(--sp-3) var(--sp-5); cursor: pointer; font: inherit; font-weight: 600; color: #4a5568; transition: color var(--dur), border-color var(--dur); margin-bottom: -1px; }
.am-tab:hover { color: #0f1826; }
.am-tab.is-active { color: #0f1826; border-bottom-color: var(--accent-lit); }
.am-tab:focus-visible { outline: 2px solid var(--accent-lit); outline-offset: 2px; }
.am-tabpanel { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-12); align-items: center; }
.am-tabpanel[hidden] { display: none; }
.am-tabpanel-heading { font-size: clamp(1.5rem, 2.4vw, 2rem); font-weight: 700; margin: var(--sp-2) 0 var(--sp-3); color: var(--color-ink); }
.am-tabpanel-body { font-size: var(--fs-md); color: #4a5568; line-height: 1.6; margin: 0 0 var(--sp-4); }
.am-tabpanel-list { margin: 0 0 var(--sp-6); padding: 0; list-style: none; }
.am-tabpanel-list li { position: relative; padding-left: var(--sp-6); margin-bottom: var(--sp-2); color: #2d3748; line-height: 1.5; }
.am-tabpanel-list li::before { content: ""; position: absolute; left: 0; top: 0.6em; width: 14px; height: 2px; background: var(--accent-lit); }
.am-tabpanel-cta { margin-top: var(--sp-2); }
.am-tabpanel-media { display: flex; align-items: center; justify-content: center; border-radius: var(--radius-lg); min-height: 320px; background: #f0f4f9; padding: 16px; }
.am-tabpanel-media img { max-width: 100%; height: auto; display: block; }

/* Text-only pillar panel: single-column education layout, no illustration */
.am-tabpanel--text { grid-template-columns: 1fr; max-width: 760px; }
.am-tabpanel--text .am-tabpanel-heading { font-size: clamp(1.75rem, 3vw, 2.5rem); }
.am-tab-services { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 var(--sp-6); padding: 0; list-style: none; }
.am-tab-services li { margin: 0; }
.am-tab-services a { display: inline-block; font-size: .85rem; font-weight: 600; color: var(--accent-lit); border: 1px solid var(--accent-lit); border-radius: 20px; padding: 5px 14px; text-decoration: none; opacity: .85; transition: opacity .2s, background .2s; }
.am-tab-services a:hover { opacity: 1; background: color-mix(in srgb, var(--accent-lit) 12%, transparent); }
@media (max-width: 767px) {
  .am-tabpanel { grid-template-columns: 1fr; gap: var(--sp-6); }
  .am-tabpanel-media { order: -1; }
  .am-tabs-nav { flex-wrap: nowrap; overflow-x: auto; }
  .am-tab { white-space: nowrap; }
}

/* Home hero: placeholder when no image set */
.am-hero-placeholder {
  width: 100%;
  aspect-ratio: 4/3;
  max-width: 520px;
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, rgba(74,143,232,0.18), rgba(157,113,245,0.18));
  border: 1px solid rgba(255,255,255,0.08);
}
.am-hero-image {
  width: 100%;
  max-width: 560px;
  height: auto;
  border-radius: var(--radius-lg);
  display: block;
}

/* Featured resources: "Latest from us" 3-card grid (Cisco-aligned) */
.am-fr-section { padding: var(--am-sec-pad-y) 0; }
.am-fr-head { margin-bottom: var(--sp-10); max-width: 60ch; }
.am-fr-heading { font-size: clamp(1.75rem, 3vw, 2.5rem); font-weight: 700; margin: var(--sp-2) 0 var(--sp-3); color: var(--color-ink); }
.am-fr-lede { font-size: var(--fs-md); color: #4a5568; margin: 0; }
.am-fr-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-8); }
.am-fr-card { display: flex; flex-direction: column; background: #fff; border: 1px solid rgba(0,0,0,0.08); border-radius: var(--radius-lg); overflow: hidden; text-decoration: none; color: inherit; transition: transform var(--dur), box-shadow var(--dur), border-color var(--dur); }
.am-fr-card:hover { transform: translateY(-4px); box-shadow: 0 12px 32px rgba(15,24,38,0.08); border-color: rgba(0,0,0,0.12); }
.am-fr-media { aspect-ratio: 16/10; background: #f0f4f9; overflow: hidden; }
.am-fr-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.am-fr-media--empty { background: linear-gradient(135deg, rgba(74,143,232,0.18), rgba(157,113,245,0.18)); }
.am-fr-body { padding: var(--sp-5) var(--sp-6) var(--sp-6); display: flex; flex-direction: column; gap: var(--sp-2); flex: 1; }
.am-fr-kind { font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent-lit); }
.am-fr-title { font-size: var(--fs-lg); font-weight: 700; margin: 0; color: #0f1826; line-height: 1.3; }
.am-fr-desc { font-size: var(--fs-sm); color: #4a5568; line-height: 1.55; margin: 0; flex: 1; }
.am-fr-link { font-size: var(--fs-sm); font-weight: 600; color: var(--accent-lit); margin-top: var(--sp-2); }
.am-fr-link::after { content: " >"; }
@media (max-width: 900px) {
  .am-fr-grid { grid-template-columns: 1fr; gap: var(--sp-6); }
}

/* ============================================================================
   PROCESS NARRATIVE (alternating 2-col rows)
   ========================================================================== */

.am-process-narrative .am-section-head { margin-bottom: var(--sp-16); }

.am-process-stack {
  display: flex;
  flex-direction: column;
  gap: var(--sp-16);
}

.am-process-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-12);
  align-items: center;
}

.am-process-row--flip {
  direction: rtl;
}

.am-process-row--flip > * {
  direction: ltr;
}

.am-process-copy {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

.am-process-copy .am-process-tag {
  font-size: var(--fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--accent-lit);
}

.am-process-copy h3 {
  font-size: clamp(1.5rem, 2.5vw, 2rem);
  font-weight: 700;
  line-height: 1.25;
}

.am-process-copy p {
  font-size: var(--fs-base);
  line-height: 1.7;
  color: var(--text-mute);
}

.am-process-metric {
  display: inline-block;
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  background: rgba(16,185,129,0.12);
  border: 1px solid rgba(16,185,129,0.35);
  font-size: var(--fs-xs);
  font-weight: 700;
  color: #10b981;
  letter-spacing: 0.04em;
}

.am-process-media {
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.am-process-media img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius-lg);
}

@media (max-width: 768px) {
  .am-process-row {
    grid-template-columns: 1fr;
    gap: var(--sp-6);
    direction: ltr;
  }
  .am-process-row--flip { direction: ltr; }
  .am-process-media { order: -1; }
}

/* ============================================================================
   CLIENT RESULTS (alternating named-client rows)
   ========================================================================== */

.am-cr-section { padding: var(--am-sec-pad-y) 0; }
.am-cr-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-6);
  margin-top: var(--sp-10);
}
.am-cr-card {
  display: flex; flex-direction: column; gap: var(--sp-3);
  padding: var(--sp-8);
  background: #fff;
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: var(--radius-lg);
  text-decoration: none; color: inherit;
  transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
}
.am-cr-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(15,23,42,0.08);
  border-color: var(--accent-lit);
}
.am-cr-card-logo { max-height: 56px; width: auto; max-width: 160px; object-fit: contain; margin-bottom: var(--sp-2); }
.am-cr-card-client { font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--accent-lit); }
.am-cr-card-outcome { font-size: clamp(1.15rem, 1.5vw, 1.4rem); font-weight: 700; line-height: 1.25; margin: 0; color: #0f1826; }
/* card background is always #fff -- hardcode dark muted to avoid light-on-white failure in dark sections */
.am-cr-card-body { font-size: var(--fs-sm); color: #4a5568; line-height: 1.55; margin: 0; }
.am-cr-card-cta { margin-top: auto; font-size: var(--fs-sm); font-weight: 600; color: var(--accent-lit); }
@media (max-width: 900px) { .am-cr-grid { grid-template-columns: 1fr; } }

/* ============================================================================
   NEXT STEPS band (dark navy, 3x2 action cards)
   ========================================================================== */

.am-section--next-steps {
  --text: rgba(255,255,255,0.85);
  /* raised from 0.50 (WCAG AA FAIL on dark navy) to 0.65 (4.6:1 PASS) */
  --text-mute: rgba(255,255,255,0.65);
  --line: rgba(255,255,255,0.08);
  padding: var(--am-sec-pad-y) 0;
}

.am-ns-heading {
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  font-weight: 700;
  color: #ffffff;
  margin: 0 0 var(--sp-10);
}

.am-ns-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-4);
}

.am-ns-card {
  display: block;
  padding: var(--sp-6);
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: var(--radius-lg);
  background: rgba(255,255,255,0.04);
  text-decoration: none;
  color: inherit;
  transition: background var(--dur), border-color var(--dur), transform var(--dur);
}

.am-ns-card:hover {
  background: rgba(255,255,255,0.08);
  border-color: rgba(37,99,235,0.5);
  transform: translateY(-2px);
}

.am-ns-card-inner {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--sp-4);
  min-height: 72px;
}

.am-ns-label {
  display: block;
  font-size: var(--fs-base);
  font-weight: 600;
  color: #ffffff;
  line-height: 1.3;
  margin-bottom: var(--sp-2);
}

.am-ns-desc {
  font-size: var(--fs-xs);
  /* raised from 0.50 (3.3:1 FAIL) to 0.65 (4.6:1 PASS) on navy/dark surfaces */
  color: rgba(255,255,255,0.65);
  line-height: 1.5;
  margin: 0;
}

.am-ns-arrow {
  flex-shrink: 0;
  /* raised from 0.40 (2.5:1 FAIL) to 0.55 (3.5:1) -- decorative icon,
     non-text element; meets 3:1 UI component threshold (WCAG 1.4.11) */
  color: rgba(255,255,255,0.55);
  transition: color var(--dur), transform var(--dur);
}

.am-ns-card:hover .am-ns-arrow {
  color: var(--accent-lit);
  transform: translateX(3px);
}

/* Action-card variant: div instead of <a>, vertical layout, primary button CTA */
.am-ns-grid--action {
  grid-template-columns: repeat(3, 1fr);
}

.am-next-card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  padding: var(--sp-8) var(--sp-6);
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: var(--radius-lg);
  background: rgba(255,255,255,0.04);
}

.am-next-card .am-ns-label {
  display: block;
  font-size: var(--fs-lg);
  font-weight: 700;
  color: #ffffff;
  line-height: 1.25;
  margin-bottom: 0;
}

.am-next-card .am-ns-desc {
  flex: 1;
  font-size: var(--fs-sm);
  color: rgba(255,255,255,0.65);
  line-height: 1.55;
  margin: 0;
}

.am-ns-cta {
  align-self: flex-start;
  margin-top: var(--sp-2);
}

@media (max-width: 900px) {
  .am-ns-grid { grid-template-columns: repeat(2, 1fr); }
  .am-ns-grid--action { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 480px) {
  .am-ns-grid { grid-template-columns: 1fr; }
  .am-ns-grid--action { grid-template-columns: 1fr; }
}

.am-cap-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-6,24px);margin:var(--sp-8,32px) 0}
.am-cap-card{background:var(--color-paper,#fff);border:1px solid var(--color-line,#e5e7eb);border-radius:12px;padding:var(--sp-6,24px)}
.am-cap-card .am-cap-num{display:inline-block;font:600 12px/1 var(--font-mono,ui-monospace);letter-spacing:.08em;color:var(--color-accent,#0a66c2);margin-bottom:var(--sp-3,12px)}
.am-cap-card h3{margin:0 0 var(--sp-2,8px);font:600 18px/1.3 var(--font-sans,Inter,system-ui);color:var(--color-ink)}
.am-cap-card p{margin:0;color:var(--color-ink-dim,#4b5563);font-size:15px;line-height:1.55}
.am-included{margin:var(--sp-10,40px) 0;padding:var(--sp-8,32px);background:var(--color-mist,#f7fafc);border-radius:12px}
.am-included h3{margin:0 0 var(--sp-4,16px);font:600 20px/1.3 var(--font-sans,Inter,system-ui);color:var(--color-ink)}
.am-included .am-check-list{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--sp-3,12px) var(--sp-6,24px);list-style:none;padding:0;margin:0}
.am-included .am-check-list li{padding-left:24px;position:relative;color:var(--color-ink,#0a0a0a);font-size:15px;line-height:1.55}
.am-included .am-check-list li::before{content:"";position:absolute;left:0;top:9px;width:14px;height:14px;border-radius:50%;background:var(--color-accent,#0a66c2)}
.am-cta-pair{display:flex;flex-wrap:wrap;gap:var(--sp-3,12px);justify-content:center;margin-top:var(--sp-6,24px)}
@media (max-width:900px){.am-cap-grid{grid-template-columns:1fr}.am-included .am-check-list{grid-template-columns:1fr}}

/* ============================================================================
   OUTCOMES SECTION (Cisco "Powering outcomes" 3-card pattern)
   ========================================================================== */

.am-outcomes-section.am-section--light,
.am-outcomes-section:not([class*="am-section--"]) {
  background: var(--color-ice, #f8fafc);
  --text: #1a2535;
  --text-strong: #0f1826;
  --text-mute: #4a5568;
  color: #1a2535;
}

.am-outcomes-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-6);
}

.am-outcomes-card {
  padding: var(--sp-8) var(--sp-6);
  border-top: 3px solid var(--accent-lit, #4a8fe8);
  background: #ffffff;
  border-radius: 0 0 var(--radius-lg, 10px) var(--radius-lg, 10px);
  box-shadow: 0 2px 12px rgba(0,0,0,0.06);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.am-outcomes-eyebrow {
  display: block;
  font-size: var(--fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--accent-lit, #4a8fe8);
}

.am-outcomes-heading {
  font-size: clamp(1rem, 1.5vw, 1.25rem);
  font-weight: 700;
  line-height: 1.25;
  color: #0f172a;
  margin: 0;
}

.am-outcomes-body {
  font-size: var(--fs-base);
  line-height: 1.55;
  color: #4a5568;
  margin: 0;
}

.am-outcomes-bullets {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  flex: 1;
}

.am-outcomes-bullets li {
  font-size: var(--fs-sm);
  color: #1a2535;
  padding-left: var(--sp-4);
  position: relative;
}

.am-outcomes-bullets li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 10px;
  height: 2px;
  background: var(--accent-lit, #4a8fe8);
  border-radius: 1px;
}

.am-outcomes-cta {
  display: inline-block;
  margin-top: var(--sp-2);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--accent-lit, #4a8fe8);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur, 0.2s), color var(--dur, 0.2s);
}

.am-outcomes-cta:hover {
  color: var(--color-blue-cobalt, #2563eb);
  border-bottom-color: currentColor;
}

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

@media (max-width: 640px) {
  .am-outcomes-grid { grid-template-columns: 1fr; gap: var(--sp-5); }
}

/* ============================================================================
   INDUSTRIES CAROUSEL (marquee + arrow nav + drag)
   ========================================================================== */

.am-client-logos-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--sp-8);
  align-items: center;
}

@media (max-width: 768px) {
  .am-client-logos-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--sp-3);
  }
}

@media (max-width: 480px) {
  .am-client-logos-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ============================================================================
   Resources Helper (Cisco directional band)
   ========================================================================== */

.am-section--resources-helper {
  background: #f9fafb;
  --text: #1a2535;
  --text-strong: #0f1826;
  --text-mute: #4a5568;
  padding: var(--am-sec-pad-y) 0;
  border-top: 1px solid #e5e7eb;
}

.am-helper-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 48px;
}

.am-helper-card {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 24px;
  display: flex;
  gap: 16px;
  align-items: flex-start;
  transition: border-color .2s, transform .2s;
}

.am-helper-card:hover {
  border-color: #2563eb;
  transform: translateY(-2px);
}

.am-helper-icon {
  color: #2563eb;
  flex-shrink: 0;
}

.am-helper-card h3 {
  font-size: 1.05rem;
  margin: 0 0 4px;
  color: #0f172a;
}

.am-helper-card p {
  font-size: 0.9rem;
  color: #4a5568;
  margin: 0 0 12px;
  line-height: 1.5;
}

.am-helper-arrow {
  color: #2563eb;
  font-weight: 600;
  font-size: 0.875rem;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.am-helper-arrow::after {
  content: '\2192';
  transition: transform .2s;
}

.am-helper-arrow:hover::after {
  transform: translateX(4px);
}

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

@media (max-width: 480px) {
  .am-helper-grid { grid-template-columns: 1fr; }
}

/* ============================================================================
   Sitemap page
   ========================================================================== */
.am-sitemap-page { background: #fff; }
/* <details>/<summary>, not a plain <section>: with 137 services, 201 challenge
   pages, 102 FAQs and 83 industry pages, fully expanding everything by default
   produced an ~11,000px wall of tiny links with zero way to see what was where
   before scrolling through all of it. Collapsed-by-default + a real count next
   to each toggle turns that into a compact, scannable list of 6 categories;
   the search box (see the page's own <script>) auto-expands a match. */
.am-sitemap-group { border-bottom: 1px solid #e5e7eb; background: #fff; }
.am-sitemap-group summary {
  display: flex; align-items: center; gap: 12px; cursor: pointer;
  padding: 28px 0; list-style: none; user-select: none;
}
.am-sitemap-group summary::-webkit-details-marker { display: none; }
.am-sitemap-group summary::after {
  content: ''; width: 10px; height: 10px; margin-left: auto;
  border-right: 2px solid #94a3b8; border-bottom: 2px solid #94a3b8;
  transform: rotate(45deg); transition: transform .18s ease; flex-shrink: 0;
}
.am-sitemap-group[open] summary::after { transform: rotate(-135deg); }
.am-sitemap-group summary:hover h2 { color: var(--color-cobalt, #1B6CB3); }
.am-sitemap-group h2 { font-size: 1.5rem; margin: 0; color: var(--color-ink); transition: color .15s ease; }
.am-sitemap-count {
  font-size: 0.8rem; font-weight: 700; color: #64748b; background: #f1f5f9;
  border-radius: 999px; padding: 3px 12px; flex-shrink: 0;
}
.am-sitemap-group h3 { font-size: 1rem; text-transform: uppercase; letter-spacing: 0.05em; color: #4a5568; margin: 24px 0 12px; }
.am-sitemap-group > ul.am-sitemap-list:first-of-type,
.am-sitemap-group > h3:first-of-type { margin-top: 0; }
.am-sitemap-group > *:not(summary) { padding-bottom: 40px; }
.am-sitemap-list { columns: 3; column-gap: 32px; list-style: none; padding: 0; margin: 0; }
.am-sitemap-list li { break-inside: avoid; margin: 0 0 11px; line-height: 1.4; }
.am-sitemap-list a { color: #2563eb; text-decoration: none; font-size: 0.95rem; }
.am-sitemap-list a:hover { text-decoration: underline; }
.am-sitemap-states { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.am-sitemap-state { background: #fff; border: 1px solid #e5e7eb; border-radius: 8px; padding: 16px; display: flex; justify-content: space-between; align-items: center; }
.am-sitemap-state a { color: #0f172a; font-weight: 600; text-decoration: none; }
.am-sitemap-state .count { color: #6b7280; font-size: 0.85rem; }

@media (max-width: 768px) {
  .am-sitemap-list { columns: 2; }
  .am-sitemap-states { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .am-sitemap-list { columns: 1; }
  .am-sitemap-states { grid-template-columns: 1fr; }
}

/* Heading color enforcement: light-bg sections must be near-black, not inherited white */
.am-section--resources-helper h1,
.am-section--resources-helper h2,
.am-section--resources-helper h3 { color: var(--color-ink); }

.am-fr-section h1,
.am-fr-section h2,
.am-fr-section h3 { color: var(--color-ink); }

.am-reviews h2 { color: var(--color-ink); }

.am-section--next-steps h2,
.am-ns-heading { color: var(--color-white); }

/* Tab service links grid */
.am-tabs-section.am-section--graphite { background: #fff; }
.am-tabs-section.am-section--graphite .am-tabs-heading,
.am-tabs-section.am-section--graphite .am-tabpanel-heading { color: var(--color-ink); }
.am-tabs-section.am-section--graphite .am-tabs-lede,
.am-tabs-section.am-section--graphite .am-tabpanel-body { color: #4a5568; }
.am-tab-services { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px 24px; list-style: none; padding: 0; margin: 24px 0 32px; }
.am-tab-services li { font-size: 0.95rem; }
.am-tab-services a { color: #2563eb; text-decoration: none; }
.am-tab-services a:hover { text-decoration: underline; }
.am-tab-services a::before { content: '\2192'; margin-right: 8px; color: #6b7280; }
@media (max-width: 600px) {
  .am-tab-services { grid-template-columns: 1fr; }
}

/* ============================================================================
   Q14: CONTACT PAGE STYLES
   ========================================================================== */

.am-hero--contact {
  min-height: 60vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.am-hero--contact .am-hero-copy {
  max-width: 920px;
}

.am-hero--contact h1 {
  color: #ffffff;
  font-size: clamp(2.5rem, 5vw, 3.5rem);
  line-height: 1.15;
  margin-bottom: var(--sp-6);
}

.am-hero--contact .am-eyebrow {
  color: rgba(226, 232, 240, 0.7);
  text-transform: uppercase;
  font-size: 0.75rem;
  letter-spacing: 0.15em;
}

.am-hero--contact .am-hero-lede {
  font-size: clamp(1rem, 1.5vw, 1.125rem);
  color: rgba(255, 255, 255, 0.82);
  margin-bottom: var(--sp-8);
}

.am-hero--contact .am-hero-actions {
  margin-top: var(--sp-8);
}

/* ============================================================================
   Q16: CHALLENGES GRID STYLES
   ========================================================================== */

.am-challenges-grid {
  background: #ffffff;
  color: #1a2535;
}

.am-challenges-grid .am-section-head h2 {
  color: #0f1826;
}

.am-challenges-grid .am-eyebrow {
  color: #2563eb;
}

.am-challenges-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin: var(--sp-8) 0 var(--sp-12);
}

.am-chip {
  padding: 8px 16px;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 20px;
  background: #f8fafc;
  color: #1a2535;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.am-chip:hover {
  border-color: #2563eb;
  color: #2563eb;
}

.am-chip--active {
  background: #2563eb;
  color: #ffffff;
  border-color: #2563eb;
}

.am-challenges-content {
  display: grid;
  gap: var(--sp-12);
}

.am-challenges-bucket {
  display: grid;
  gap: var(--sp-6);
}

.am-bucket-heading {
  font-size: 1.25rem;
  font-weight: 700;
  color: #0f1826;
  margin: var(--sp-4) 0 0;
}

.am-challenge-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--sp-4);
}

.am-challenge-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: var(--sp-5);
  background: #f8fafc;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: var(--radius-md);
  text-decoration: none;
  color: #1a2535;
  transition: all 0.2s ease;
}

.am-challenge-card:hover {
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.12);
  border-color: #2563eb;
  transform: translateY(-2px);
}

.am-challenge-card h4 {
  font-size: 1rem;
  font-weight: 600;
  color: #0f1826;
  margin: 0 0 var(--sp-3);
  line-height: 1.4;
}

.am-card-arrow {
  font-size: 1.25rem;
  color: #2563eb;
  opacity: 0.6;
  transition: opacity 0.2s ease;
}

.am-challenge-card:hover .am-card-arrow {
  opacity: 1;
}

@media (max-width: 768px) {
  .am-challenges-chips {
    gap: var(--sp-2);
  }

  .am-chip {
    padding: 6px 12px;
    font-size: 0.85rem;
  }

  .am-challenge-cards {
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  }
}

/* ============================================================================
   STATES GRID (Q17: locations-we-serve)
   ========================================================================== */

.am-states-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: var(--sp-8);
}

.am-state-card {
  position: relative;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 24px;
  transition: all 0.3s ease;
}

.am-state-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

.am-state-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  display: inline-block;
  background: #0f172a;
  color: #ffffff;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.am-state-card h3 {
  margin-top: 32px;
  margin-bottom: 8px;
  font-size: 1.25rem;
  font-weight: 700;
  color: #0f172a;
}

.am-state-count {
  font-size: 0.95rem;
  color: #64748b;
  margin-bottom: 16px;
}

.am-state-link {
  display: inline-block;
  color: #0066cc;
  font-weight: 600;
  font-size: 0.95rem;
  transition: color 0.2s ease;
}

.am-state-link:hover {
  color: #0052a3;
}

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

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

/* ============================================================================
   CITIES ACCORDION (Q17: locations-we-serve)
   ========================================================================== */

.am-accordion-wrapper {
  margin-top: var(--sp-8);
}

.am-accordion-item {
  border-top: 2px solid #e2e8f0;
  padding: 20px 0;
}

.am-accordion-item:last-child {
  border-bottom: 2px solid #e2e8f0;
}

.am-accordion-item summary {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 1.1rem;
  font-weight: 600;
  color: #0f172a;
  user-select: none;
}

.am-accordion-item summary:hover {
  color: #0066cc;
}

.am-accordion-count {
  /* WCAG fix: #64748b was 4.40:1 on ice #f5f6f7 (FAIL). #5c6678 = 5.35:1 (PASS) */
  color: #5c6678;
  font-weight: 400;
  font-size: 0.95rem;
}

.am-accordion-item[open] summary {
  color: #0066cc;
}

.am-accordion-content {
  margin-top: 16px;
  padding-left: 20px;
}

.am-cities-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.am-cities-list li {
  margin: 0;
}

.am-cities-list a {
  color: #0066cc;
  text-decoration: none;
  transition: color 0.2s ease;
  font-size: 0.95rem;
}

.am-cities-list a:hover {
  color: #0052a3;
  text-decoration: underline;
}

.am-accordion-overflow {
  margin-top: 12px;
  font-size: 0.9rem;
  /* WCAG fix: #64748b was 4.40:1 on ice #f5f6f7 (FAIL). #5c6678 = 5.35:1 (PASS) */
  color: #5c6678;
  font-style: italic;
}

@media (max-width: 768px) {
  .am-cities-list {
    grid-template-columns: 1fr;
  }

  .am-accordion-content {
    padding-left: 0;
  }

  .am-accordion-item summary {
    font-size: 1rem;
  }
}

/* ===== Q-batch staged CSS (Q18-Q26) START ===== */
/* Q18-css.snippet */
.am-sitemap-jumpnav { position: sticky; top: 0; background: #fff; border-bottom: 1px solid #e5e7eb; padding: 16px 24px; display: flex; gap: 16px; flex-wrap: wrap; align-items: center; z-index: 10; }
.am-sitemap-jumpnav a { color: #2563eb; text-decoration: none; font-size: 0.9rem; padding: 4px 12px; border-radius: 999px; background: #f1f5f9; }
.am-sitemap-jumpnav a:hover { background: #e2e8f0; }
.am-sitemap-jumpnav input[type=search] { padding: 6px 12px; border: 1px solid #cbd5e1; border-radius: 6px; min-width: 240px; }
.am-sitemap-hidden { display: none; }
/* Q19-css.snippet */
.am-privacy-section .am-section-body { max-width: 760px; line-height: 1.7; }
.am-privacy-section h2 { font-size: 1.5rem; margin-top: 32px; }
/* Q20-css.snippet */
.am-tos-section .am-section-body { max-width: 760px; line-height: 1.7; }
.am-tos-section h2 { font-size: 1.5rem; margin-top: 32px; }
/* Q21-css.snippet */
.am-lead-form-page .am-section-body { max-width: 720px; line-height: 1.6; }
/* Q22-css.snippet */
.am-careers-section .am-section-body { max-width: 760px; line-height: 1.7; }
/* Q24-css.snippet */
/* Q24: Case Studies Grid Styles */
/* Add to src/assets/css/sections.css */

.am-case-studies-grid {
  background: #f8fafc;
}

.am-cs-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 32px;
}

.am-cs-card {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 24px;
  text-decoration: none;
  transition: border-color 0.2s, transform 0.2s;
  display: block;
}

.am-cs-card:hover {
  border-color: #2563eb;
  transform: translateY(-2px);
}

.am-cs-card h3 {
  color: #0f172a;
  font-size: 1.1rem;
  margin: 0 0 12px;
}

.am-cs-arrow {
  color: #2563eb;
  font-weight: 600;
  font-size: 0.9rem;
}

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

@media (max-width: 600px) {
  .am-cs-grid {
    grid-template-columns: 1fr;
  }
}
/* ===== Q-batch staged CSS END ===== */

/* Portfolio category filter bar */
.am-cs-filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 24px;
}
.am-cs-filter-btn {
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  border-radius: 20px;
  padding: 6px 16px;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  color: #475569;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.am-cs-filter-btn:hover,
.am-cs-filter-btn--active {
  background: #2563eb;
  border-color: #2563eb;
  color: #fff;
}
.am-cs-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}
.am-cs-tag {
  background: #eff6ff;
  color: #1d4ed8;
  font-size: 0.75rem;
  font-weight: 600;
  border-radius: 4px;
  padding: 2px 8px;
  letter-spacing: 0.01em;
}

/* === Quick quote modal === */
.am-qm-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.55);
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}
.am-qm-overlay[hidden] { display: none; }
.am-qm-card {
  background: #fff;
  border-radius: .75rem;
  padding: 2rem;
  width: 100%;
  max-width: 640px;
  max-height: 90vh;
  overflow-y: auto;
  position: relative;
  box-shadow: 0 20px 60px rgba(0,0,0,.2);
}
.am-qm-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background: none;
  border: none;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  color: #666;
  padding: .25rem .5rem;
}
.am-qm-close:hover { color: #000; }
.am-qm-heading { margin: 0 0 .25rem; font-size: 1.4rem; }
.am-qm-pkg { margin: 0 0 1.25rem; color: var(--am-cobalt, #1a56db); font-weight: 600; font-size: .95rem; }
.am-qm-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 500px) { .am-qm-row { grid-template-columns: 1fr; } }
.am-qm-label { display: flex; flex-direction: column; gap: .35rem; font-size: .875rem; font-weight: 600; color: #374151; margin-bottom: .875rem; }
.am-qm-input { border: 1px solid #d1d5db; border-radius: .5rem; padding: .5rem .75rem; font-size: .9rem; font-family: inherit; width: 100%; box-sizing: border-box; }
.am-qm-input:focus { outline: 2px solid var(--am-cobalt, #1a56db); outline-offset: 1px; border-color: var(--am-cobalt, #1a56db); }
textarea.am-qm-input { resize: vertical; }
.am-qm-avail { font-size: .8rem; color: #6b7280; margin: -.5rem 0 1rem; }
.am-qm-msg { min-height: 1.25rem; font-size: .875rem; margin-bottom: .75rem; }
.am-qm-msg.am-qm-ok { color: #15803d; }
.am-qm-msg.am-qm-err { color: #b91c1c; }
.am-qm-submit { width: 100%; }

/* ============================================================================
   STATUS BADGES (issue #153 -- WCAG AA on white backgrounds)
   All foreground/background pairs verified >= 4.5:1 contrast ratio.
   Amber text #92400e on #fef3c7: 7.05:1 PASS
   Green text #065f46 on #d1fae5: 8.65:1 PASS
   Blue  text #1e40af on #dbeafe: 9.78:1 PASS
   Grey  text #374151 on #f3f4f6: 10.1:1 PASS
   ========================================================================== */

.am-status-badge {
  display: inline-flex;
  align-items: center;
  font-size: var(--fs-xs);
  font-weight: 600;
  line-height: 1;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  white-space: nowrap;
}

.am-status-badge--amber {
  color: var(--color-badge-amber, #92400e);
  background: var(--color-badge-amber-bg, #fef3c7);
}

.am-status-badge--green {
  color: var(--color-badge-green, #065f46);
  background: var(--color-badge-green-bg, #d1fae5);
}

.am-status-badge--blue {
  color: var(--color-badge-blue, #1e40af);
  background: var(--color-badge-blue-bg, #dbeafe);
}

.am-status-badge--neutral {
  color: var(--color-badge-neutral, #374151);
  background: var(--color-badge-neutral-bg, #f3f4f6);
}

/* Blog listing: category filter + post grid */
.am-blog-filter-bar{padding:var(--sp-4) 0;background:var(--color-ice,#f8fafc);border-bottom:1px solid var(--line)}
.am-blog-cats{display:flex;gap:var(--sp-2);flex-wrap:wrap}
.am-blog-cat{font-size:var(--fs-sm);font-weight:500;padding:6px 14px;border-radius:999px;border:1px solid var(--line);color:var(--text);text-decoration:none;transition:background var(--dur),color var(--dur),border-color var(--dur)}
.am-blog-cat:hover,.am-blog-cat--active{background:var(--accent);color:#fff;border-color:var(--accent)}
.am-blog-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:var(--sp-8);margin-top:var(--sp-8)}
.am-blog-card{background:var(--color-white);border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;display:flex;flex-direction:column}
.am-blog-card-img-wrap img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block}
.am-blog-card-body{padding:var(--sp-5);display:flex;flex-direction:column;gap:var(--sp-2);flex:1}
.am-blog-card-title{font-size:var(--fs-lg);font-weight:700;line-height:1.3;margin:0}
.am-blog-card-title a{color:var(--text-strong);text-decoration:none}
.am-blog-card-title a:hover{color:var(--accent)}
.am-blog-cat-tag{font-size:var(--fs-xs);font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--accent);text-decoration:none}
.am-blog-card-excerpt{font-size:var(--fs-sm);color:var(--text-mute);line-height:1.55;margin:0}
.am-blog-card-date{font-size:var(--fs-xs);color:var(--text-mute);margin-top:auto}
.am-blog-empty{text-align:center;padding:var(--sp-16) 0;color:var(--text-mute);font-size:var(--fs-lg)}
@media(max-width:640px){.am-blog-grid{grid-template-columns:1fr}}

/* ============================================================================
   CATEGORY PAGE TAB CONTROLS (issue #127 WCAG contrast fix)
   All three category template variations: A (tab-bar), B (sidebar), C (pill)
   Base: dark navy context (#172034). Light bg context: reset to dark tokens.
   ========================================================================== */

/* Tab bar wrap (Variation A) */
.am-tab-bar-wrap {
  background: var(--color-navy, #172034);
  padding: 0;
}

/* Tab bar row */
.am-tab-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  border-bottom: 1px solid rgba(255,255,255,0.10);
  padding: 0;
}

/* Tab bar buttons -- inactive: rgba(255,255,255,0.65) on #172034 = 8.35:1 PASS */
.am-tab-bar-btn {
  background: transparent;
  border: 0;
  border-bottom: 3px solid transparent;
  padding: var(--sp-4) var(--sp-6);
  font: inherit;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: rgba(255,255,255,0.65);
  cursor: pointer;
  transition: color var(--dur), border-bottom-color var(--dur);
  margin-bottom: -1px;
  white-space: nowrap;
}

.am-tab-bar-btn:hover {
  color: #ffffff;
}

/* Active: #ffffff on #172034 = 13.8:1 PASS */
.am-tab-bar-btn--active {
  color: #ffffff;
  border-bottom-color: var(--accent-lit, #5d78c9);
}

/* Tab panel area */
.am-tab-panel {
  background: var(--color-navy, #172034);
  padding: var(--sp-12) 0;
}

/* Tab description text: rgba(255,255,255,0.80) on #172034 = 10.04:1 PASS */
.am-tab-desc {
  font-size: var(--fs-base);
  color: rgba(255,255,255,0.80);
  line-height: 1.65;
  max-width: 72ch;
  margin: 0 0 var(--sp-8);
}

/* am-tab-panel has navy background but is NOT inside .am-section--navy — force white headings */
.am-tab-panel h2,
.am-tab-panel h3,
.am-tab-panel h4,
.am-tab-panel .am-panel-heading { color: #ffffff; }

/* Platform tool strip */
.am-platform-section {
  padding: var(--sp-8) 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.am-platform-label {
  font-size: var(--fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-mute);
  margin-bottom: var(--sp-4);
}

.am-platform-strip {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-3);
  align-items: center;
}

.am-platform-chip {
  background: var(--color-ice, #f0f4f8);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--sp-2) var(--sp-4);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text-strong);
  white-space: nowrap;
}

/* Sidebar navigation wrap (Variation B) */
.am-layout--sidebar {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: var(--sp-12);
  padding-top: var(--sp-12);
  padding-bottom: var(--sp-12);
  align-items: start;
}

.am-sidebar {
  position: sticky;
  top: calc(var(--header-h, 64px) + var(--sp-6));
}

.am-sidebar-tab-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}

/* Sidebar tab buttons -- inactive: rgba(255,255,255,0.65) on #172034 = 8.35:1 PASS */
.am-sidebar-tab {
  display: block;
  width: 100%;
  text-align: left;
  background: transparent;
  border: 0;
  border-left: 3px solid rgba(255,255,255,0.12);
  padding: var(--sp-3) var(--sp-5);
  font: inherit;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: rgba(255,255,255,0.65);
  cursor: pointer;
  transition: color var(--dur), border-left-color var(--dur), background var(--dur);
}

.am-sidebar-tab:hover {
  color: #ffffff;
  background: rgba(255,255,255,0.04);
}

/* Active: #ffffff on #172034 = 13.8:1 PASS */
.am-sidebar-tab--active {
  color: #ffffff;
  border-left-color: var(--accent-lit, #5d78c9);
  background: rgba(255,255,255,0.06);
}

.am-main-content {
  min-width: 0;
}

/* Pill tabs wrap (Variation C) */
.am-pill-tabs-wrap {
  background: var(--color-navy, #172034);
  padding: var(--sp-8) 0 var(--sp-12);
}

.am-pill-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-bottom: var(--sp-8);
}

/* Pill buttons -- inactive: rgba(255,255,255,0.75) on #172034 effective = 9.48:1 PASS */
.am-pill {
  display: inline-flex;
  align-items: center;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: var(--radius-pill, 9999px);
  padding: 7px 18px;
  font: inherit;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: rgba(255,255,255,0.75);
  cursor: pointer;
  transition: background var(--dur), color var(--dur), border-color var(--dur);
  white-space: nowrap;
}

.am-pill:hover {
  background: rgba(255,255,255,0.12);
  color: #ffffff;
  border-color: rgba(255,255,255,0.3);
}

/* Active: #ffffff on #042fac = 10.46:1 PASS */
.am-pill--active {
  background: var(--accent, #042fac);
  border-color: var(--accent, #042fac);
  color: #ffffff;
}

/* Service grid used in tab panels */
.am-service-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--sp-5);
  margin-top: var(--sp-6);
}

.am-service-card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-6);
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: var(--radius-lg, 16px);
  text-decoration: none;
  transition: background var(--dur), border-color var(--dur), transform var(--dur);
}

.am-service-card:hover {
  background: rgba(255,255,255,0.09);
  border-color: rgba(255,255,255,0.25);
  transform: translateY(-3px);
}

/* #ffffff on effective dark bg (#172034) = 13.5:1 PASS */
.am-service-card-title {
  font-size: var(--fs-md);
  font-weight: 700;
  color: #ffffff;
  line-height: 1.3;
  margin: 0;
}

/* rgba(255,255,255,0.72) on dark effective bg = ~4.8:1 PASS */
.am-service-card-desc {
  font-size: var(--fs-sm);
  color: rgba(255,255,255,0.72);
  line-height: 1.55;
  margin: 0;
}

/* Service list (Variation B) */
.am-service-list {
  list-style: none;
  padding: 0;
  margin: var(--sp-4) 0 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

/* #8daee0 on #172034 = 5.61:1 PASS */
.am-service-list-item a {
  font-size: var(--fs-base);
  font-weight: 500;
  color: #8daee0;
  text-decoration: none;
  display: block;
  padding: var(--sp-2) 0;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  transition: color var(--dur);
}

.am-service-list-item a:hover {
  color: #ffffff;
}

@media (max-width: 900px) {
  .am-layout--sidebar {
    grid-template-columns: 1fr;
  }
  .am-sidebar {
    position: static;
  }
  .am-sidebar-tab-list {
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--sp-2);
  }
  .am-sidebar-tab {
    border-left: 0;
    border-bottom: 3px solid rgba(255,255,255,0.12);
    padding: var(--sp-3) var(--sp-4);
    width: auto;
  }
  .am-sidebar-tab--active {
    border-bottom-color: var(--accent-lit, #5d78c9);
    border-left-color: transparent;
  }
}

@media (max-width: 600px) {
  .am-tab-bar-btn {
    padding: var(--sp-3) var(--sp-4);
    font-size: var(--fs-xs);
  }
  .am-pill {
    padding: 6px 14px;
    font-size: var(--fs-xs);
  }
  .am-service-grid {
    grid-template-columns: 1fr;
  }
}

/* ============================================================================
   PILLAR THEMING (data-pillar attribute)
   Apply pillar-specific colors to elements dynamically
   ========================================================================== */

/* Web pillar (green) */
[data-pillar="web"] {
  --pillar-color: var(--am-web);
  --pillar-fg: var(--am-web-fg);
  --pillar-hover: var(--am-web-hover);
  --pillar-active: var(--am-web-active);
}

/* Marketing pillar (gold) */
[data-pillar="marketing"] {
  --pillar-color: var(--am-marketing);
  --pillar-fg: var(--am-marketing-fg);
  --pillar-hover: var(--am-marketing-hover);
  --pillar-active: var(--am-marketing-active);
}

/* Infrastructure pillar (blue) */
[data-pillar="infrastructure"] {
  --pillar-color: var(--am-infrastructure);
  --pillar-fg: var(--am-infrastructure-fg);
  --pillar-hover: var(--am-infrastructure-hover);
  --pillar-active: var(--am-infrastructure-active);
}

/* AI pillar (crimson) */
[data-pillar="ai"] {
  --pillar-color: var(--am-ai);
  --pillar-fg: var(--am-ai-fg);
  --pillar-hover: var(--am-ai-hover);
  --pillar-active: var(--am-ai-active);
}

/* Pillar accent borders and badges */
[data-pillar] {
  border-left-color: var(--pillar-color);
}

/* Pillar tab underlines */
[data-pillar][role="tab"][aria-selected="true"] {
  border-bottom-color: var(--pillar-color);
  color: var(--pillar-color);
}

/* Pillar badges */
[data-pillar] .am-dash-badge,
[data-pillar] .am-status-badge {
  background: var(--pillar-color);
  color: var(--pillar-fg);
}

/* Pillar card hover states (specific shadows in dashboard.css) */
[data-pillar].am-pillar-card:hover {
  border-color: var(--pillar-color);
}


.am-fr-kind,.am-fr-link{color:var(--accent)}
/* Reviews fallback grid */
.am-reviews-fallback-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:var(--sp-5)}
.am-testimonial-card{background:var(--color-surface,#fff);border-radius:var(--radius-lg,12px);padding:var(--sp-6);margin:0;box-shadow:0 2px 12px rgba(0,0,0,.07)}
.am-testimonial-card blockquote{margin:0 0 var(--sp-4);padding:0}
.am-testimonial-card blockquote p{font-size:var(--fs-md);line-height:1.65;color:var(--color-body);margin:0}
.am-testimonial-card blockquote p::before{content:'\201C'}
.am-testimonial-card blockquote p::after{content:'\201D'}
.am-testimonial-card figcaption{font-size:var(--fs-sm);color:var(--color-muted);font-weight:600}
.am-testimonial-card figcaption cite{font-style:normal;font-weight:400}
/* Hero price callout */
.am-hero-price{font-size:var(--fs-sm);color:rgba(255,255,255,.8);margin-top:var(--sp-3);margin-bottom:0}
/* ── Hero Slider ─────────────────────────────────────────────────────────────── */
.am-hero-home{flex-direction:column;align-items:stretch;padding:0}
.am-hslide-track{display:grid}
.am-hero-slide{grid-area:1/1;opacity:0;transition:opacity .55s ease;pointer-events:none;padding:100px 0 32px;position:relative}
.am-hero-slide.is-active{opacity:1;pointer-events:auto}
/* AM Ribbon hero background -- see .planning/design-system.md "AM Ribbon". Full-bleed pillar
   render behind the AM Canvas Gradient's dark base, scrimmed so copy stays legible. */
.am-hero-slide--ribbon::after{content:'';position:absolute;inset:0;z-index:1;background:linear-gradient(100deg,rgba(5,7,13,.94) 0%,rgba(5,7,13,.55) 55%,rgba(5,7,13,.35) 100%)}
.am-hero-slide--ribbon .container{position:relative;z-index:2}
/* AM Ribbon hero parallax -- two nested layers so a continuous idle drift (CSS keyframe,
   transform) and a scroll-driven depth offset (JS, translateY on the wrapper) don't fight
   over the same `transform` property. See .planning/design-system.md "AM Ribbon". */
.am-hero-parallax-bg{position:absolute;inset:0;z-index:0;overflow:hidden;will-change:transform}
.am-hero-ribbon-bg{position:absolute;inset:-8% -8%;background-size:cover;background-position:center;will-change:transform;animation:am-ribbon-drift 22s ease-in-out infinite alternate}
@keyframes am-ribbon-drift{from{transform:scale(1.06) translate(0,0)}to{transform:scale(1.06) translate(1.8%,-1.8%)}}
@media(prefers-reduced-motion:reduce){.am-hero-ribbon-bg{animation:none;transform:scale(1.06)}}
.am-hslide-controls{display:flex;align-items:center;justify-content:center;gap:var(--sp-4);padding:var(--sp-4) 0 var(--sp-8);position:relative;z-index:3}
/* The controls row sits below the ribbon-covered slide track, in the same .am-hero section,
   with no background of its own -- it was exposing the section's bare base gradient (including
   the emerald blob positioned near the bottom, see "AM CANVAS GRADIENT" above) as a visible seam
   under the ribbon-treated area. Match the slide overlay's dark tone so the transition is seamless
   regardless of scroll position. */
.am-hero-home .am-hslide-controls::before{content:'';position:absolute;inset:-32px 0 0;z-index:-1;background:linear-gradient(180deg,transparent 0%,rgba(5,7,13,.85) 40%,#05070d 100%)}
/* Light context (benefits slider, discipline slider) */
.am-hslide-btn{background:transparent;border:1.5px solid rgba(0,0,0,.15);border-radius:50%;width:38px;height:38px;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--color-body,#2b3446);transition:border-color .2s,color .2s;padding:0;flex-shrink:0}
.am-hslide-btn:hover{border-color:var(--am-web,#22A64F);color:var(--am-web,#22A64F)}
.am-hslide-dots{display:flex;gap:var(--sp-2);align-items:center}
.am-hslide-dot{width:8px;height:8px;border-radius:50%;background:rgba(0,0,0,.18);border:0;cursor:pointer;padding:0;transition:background .25s,transform .25s,width .25s;flex-shrink:0}
.am-hslide-dot.is-active{background:var(--am-web,#22A64F);width:24px;border-radius:4px}
/* Dark hero override — white dots/buttons visible on #05070d background */
.am-hero-home .am-hslide-controls{padding-bottom:var(--sp-10)}
.am-hero-home .am-hslide-btn{border-color:rgba(255,255,255,.25);color:rgba(255,255,255,.7)}
.am-hero-home .am-hslide-btn:hover{border-color:#fff;color:#fff}
.am-hero-home .am-hslide-dot{background:rgba(255,255,255,.35)}
.am-hero-home .am-hslide-dot.is-active{background:#fff;width:24px;border-radius:4px}
@media(max-width:768px){.am-hero-slide{padding:64px 0 20px}.am-hslide-controls{padding:var(--sp-2) 0 var(--sp-6)}}
/* ── Benefits Slider ─────────────────────────────────────────────────────────── */
.am-benefits-slider-section{overflow:hidden;padding:0}
.am-bslide-track{display:grid}
.am-benefits-slide{grid-area:1/1;opacity:0;transition:opacity .5s ease;pointer-events:none;padding:var(--sp-20) 0 var(--sp-12)}
.am-benefits-slide.is-active{opacity:1;pointer-events:auto}
.am-bslide-inner{max-width:820px}
.am-bslide-counter{font-size:.7rem;font-weight:700;color:var(--bslide-accent,var(--am-web,#22A64F));letter-spacing:.14em;text-transform:uppercase;display:block;margin-bottom:var(--sp-5)}
.am-bslide-heading{font-size:clamp(2rem,4.5vw,3.75rem);font-weight:800;color:var(--color-ink,#0f172a);line-height:1.1;margin:0 0 var(--sp-8);border-left:5px solid var(--bslide-accent,var(--am-web,#22A64F));padding-left:var(--sp-6)}
.am-bslide-body{font-size:var(--fs-md,1.0625rem);color:var(--color-body,#2b3446);max-width:660px;line-height:1.75;padding-left:calc(var(--sp-6) + 5px);margin:0}
.am-bslide-nav-inner{display:flex;align-items:center;gap:var(--sp-4);padding:var(--sp-8) 0 var(--sp-12)}
@media(max-width:640px){.am-benefits-slide{padding:var(--sp-12) 0 var(--sp-6)}.am-bslide-heading{font-size:clamp(1.6rem,6vw,2.5rem)}}
.am-overline{font-size:.75rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--am-web,#22A64F);margin-bottom:var(--sp-3)}
.am-section-h2{font-size:clamp(1.5rem,3vw,2.25rem);font-weight:800;line-height:1.2;color:var(--color-heading,#0f172a);margin-bottom:var(--sp-4)}
.am-proof-list{list-style:none;padding:0;margin:var(--sp-5) 0;display:flex;flex-direction:column;gap:var(--sp-3)}
.am-proof-list li{padding-left:1.5rem;position:relative;font-size:var(--fs-md);color:var(--color-body)}
.am-proof-list li::before{content:'';position:absolute;left:0;top:.45em;width:.55rem;height:.55rem;border-radius:50%;background:var(--am-web,#22A64F)}
/* Pillar tabs (plans page) */
.am-section--pillar-tabs{padding:80px 0 96px}
.am-ptabs{margin-top:var(--sp-10)}
.am-ptabs-nav{display:flex;gap:var(--sp-2);flex-wrap:wrap;margin-bottom:var(--sp-8);border-bottom:1px solid rgba(255,255,255,.12);padding-bottom:0}
.am-ptabs-btn{background:transparent;border:none;padding:var(--sp-3) var(--sp-5);font-size:.9rem;font-weight:600;color:rgba(255,255,255,.5);cursor:pointer;position:relative;transition:color .18s;border-bottom:2px solid transparent;margin-bottom:-1px}
.am-ptabs-btn::after{content:'';position:absolute;bottom:-1px;left:0;right:0;height:2px;background:var(--ptab-accent,#22A64F);transform:scaleX(0);transition:transform .2s}
.am-ptabs-btn.is-active{color:#fff}
.am-ptabs-btn.is-active::after{transform:scaleX(1)}
.am-ptabs-btn:hover:not(.is-active){color:rgba(255,255,255,.8)}
.am-ptabs-panel{display:none}
.am-ptabs-panel.is-active{display:block}
.am-ptabs-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-5)}
.am-ptabs-card{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:10px;padding:var(--sp-6);display:flex;flex-direction:column;gap:var(--sp-3)}
.am-ptabs-ref{font-size:.68rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.3);margin:0}
.am-ptabs-card-title{font-size:1.05rem;font-weight:700;color:rgba(255,255,255,.92);margin:0}
.am-ptabs-card-desc{font-size:.875rem;line-height:1.6;color:rgba(255,255,255,.58);margin:0;flex:1}
.am-ptabs-card-actions{display:flex;align-items:center;gap:var(--sp-4);flex-wrap:wrap;margin-top:auto}
.am-ptabs-card-actions .am-link-arrow{font-size:.875rem;font-weight:600;color:rgba(255,255,255,.8);text-decoration:none;white-space:nowrap}
.am-ptabs-card-actions .am-link-arrow:hover{color:#fff}
@media(max-width:900px){.am-ptabs-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.am-ptabs-grid{grid-template-columns:1fr}}
/* Plans page: audit band + split panel + pricing table */
.am-audit-free-band{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-6);flex-wrap:wrap}
.am-ptabs-split{display:grid;grid-template-columns:2fr 3fr;gap:var(--sp-10);padding-top:var(--sp-8)}
.am-ptabs-info{display:flex;flex-direction:column}
.am-ptabs-links{display:flex;flex-direction:column;gap:0}
.am-ptabs-svc-link{font-size:var(--fs-sm);color:rgba(255,255,255,.7);text-decoration:none;padding:var(--sp-2) 0;border-bottom:1px solid rgba(255,255,255,.07);transition:color .15s}
.am-ptabs-svc-link:hover{color:#fff}
.am-pkg-table{width:100%;border-collapse:collapse;font-size:var(--fs-sm)}
.am-pkg-table thead tr{border-bottom:1px solid rgba(255,255,255,.14)}
.am-pkg-table th{font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.09em;color:rgba(255,255,255,.35);padding:var(--sp-2) var(--sp-3) var(--sp-3);text-align:left}
.am-pkg-table tbody tr{border-bottom:1px solid rgba(255,255,255,.06);transition:background .12s}
.am-pkg-table tbody tr:hover{background:rgba(255,255,255,.04)}
.am-pkg-table td{padding:var(--sp-3);vertical-align:middle}
.am-pkg-ref{display:block;font-size:.62rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.28);margin-bottom:2px}
.am-pkg-label{display:block;font-weight:600;color:rgba(255,255,255,.85)}
.am-pkg-price{text-align:right;font-weight:700;color:var(--accent,#22A64F);white-space:nowrap;padding-left:var(--sp-4)}
.am-pkg-actions{text-align:right;white-space:nowrap;padding-left:var(--sp-2)}
.am-pkg-actions .am-link-arrow.am-pkg-detail{font-size:.8rem;font-weight:600;color:rgba(255,255,255,.55);text-decoration:none;margin-right:var(--sp-3)}
.am-pkg-actions .am-link-arrow.am-pkg-detail:hover{color:#fff}
.am-pkg-empty{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);border-radius:10px;padding:var(--sp-8);text-align:center}
.am-pkg-empty p{color:rgba(255,255,255,.65);margin-bottom:var(--sp-4);line-height:1.7}

/* Products catalog (/products/, issue #282) + shared filter-bar pattern (also used by /our-work/) */
.am-filter-bar{display:flex;flex-wrap:wrap;gap:var(--sp-2);margin-bottom:var(--sp-4)}
.am-filter-bar--tier{margin-bottom:var(--sp-6)}
.am-filter-pill{background:transparent;border:1px solid rgba(255,255,255,.2);color:rgba(255,255,255,.75);font-size:.85rem;font-weight:600;padding:.5rem 1.1rem;border-radius:100px;cursor:pointer;transition:border-color .18s,background .18s,color .18s}
.am-filter-pill:hover{border-color:rgba(255,255,255,.45);color:#fff}
.am-filter-pill--active{background:var(--am-green,#22A64F);border-color:var(--am-green,#22A64F);color:#fff}
.am-section--white .am-filter-pill,.am-section--light .am-filter-pill{border-color:var(--color-border,#e2e8f0);color:var(--color-body,#475569)}
.am-section--white .am-filter-pill:hover,.am-section--light .am-filter-pill:hover{border-color:#94a3b8;color:var(--color-heading,#1a202c)}
.am-section--white .am-filter-pill--active,.am-section--light .am-filter-pill--active{background:var(--am-green,#22A64F);border-color:var(--am-green,#22A64F);color:#fff}

.am-section-sub{font-size:.95rem;color:var(--color-muted,rgba(255,255,255,.6));margin:calc(var(--sp-6) * -0.6) 0 var(--sp-6);max-width:640px}
.am-section-inner--centered{text-align:center;max-width:640px;margin:0 auto}

.am-product-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:var(--sp-5)}
.am-product-grid--trending{margin-top:var(--sp-2)}
.am-product-card{display:flex;flex-direction:column;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:12px;padding:var(--sp-5);opacity:0;transform:translateY(6px);transition:opacity .25s ease,transform .25s ease}
.am-product-card.is-visible{opacity:1;transform:translateY(0)}
.am-section--white .am-product-card,.am-section--light .am-product-card{background:#fff;border-color:var(--color-border,#e2e8f0)}
.am-product-card-head{display:flex;flex-wrap:wrap;gap:var(--sp-2);margin-bottom:var(--sp-3)}
.am-pillar-badge,.am-product-card-head .am-tier-badge{position:static;transform:none;display:inline-flex;font-size:.7rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding:.25rem .7rem;border-radius:100px;white-space:nowrap}
.am-pillar-badge{background:rgba(255,255,255,.08);color:rgba(255,255,255,.85)}
.am-section--white .am-pillar-badge,.am-section--light .am-pillar-badge{background:var(--color-ice,#f1f5f9);color:var(--color-body,#475569)}
.am-pillar-badge--web{color:#22A64F}
.am-pillar-badge--marketing{color:#F8C112}
.am-pillar-badge--infrastructure{color:#1B6CB3}
.am-pillar-badge--ai{color:#8E2042}
.am-product-card-head .am-tier-badge{background:rgba(255,255,255,.12);color:#fff}
.am-section--white .am-product-card-head .am-tier-badge,.am-section--light .am-product-card-head .am-tier-badge{background:var(--color-ice,#f1f5f9);color:var(--color-heading,#1a202c)}
.am-product-card-title{font-size:1.05rem;font-weight:800;margin:0 0 var(--sp-1);color:#fff}
.am-section--white .am-product-card-title,.am-section--light .am-product-card-title{color:var(--color-heading,#1a202c)}
.am-product-card-section{font-size:.75rem;font-weight:600;letter-spacing:.03em;text-transform:uppercase;color:rgba(255,255,255,.45);margin:0 0 var(--sp-3)}
.am-section--white .am-product-card-section,.am-section--light .am-product-card-section{color:var(--color-muted,#64748b)}
.am-product-card-desc{font-size:.875rem;line-height:1.6;color:rgba(255,255,255,.65);margin:0 0 var(--sp-4);flex:1}
.am-section--white .am-product-card-desc,.am-section--light .am-product-card-desc{color:var(--color-body,#475569)}
.am-product-card-foot{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);padding-top:var(--sp-3);border-top:1px solid rgba(255,255,255,.08)}
.am-section--white .am-product-card-foot,.am-section--light .am-product-card-foot{border-top-color:var(--color-border,#e2e8f0)}
.am-product-card-price{font-size:.9rem;font-weight:700;color:#fff}
.am-section--white .am-product-card-price,.am-section--light .am-product-card-price{color:var(--color-heading,#1a202c)}
.am-btn-sm{padding:.5rem 1rem;font-size:.85rem}
@media(max-width:640px){.am-product-grid{grid-template-columns:1fr}}
@media(max-width:900px){.am-ptabs-split{grid-template-columns:1fr;gap:var(--sp-8)}}
@media(max-width:560px){.am-audit-free-band{flex-direction:column;align-items:flex-start}.am-pkg-actions .am-pkg-detail{display:none}}

/* Pillar pricing grid variants (plans page): distinct layout per pillar, not a recolor.
   Naming convention: {pillar}-pricing-grid. See .planning/design-system.md. */

/* web-pricing-grid: deliverable cards, description up front, price+actions pinned to the foot */
.web-pricing-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--sp-4)}
.web-pricing-card{background:rgba(34,166,79,.05);border:1px solid rgba(34,166,79,.2);border-top:3px solid #22A64F;border-radius:8px;padding:var(--sp-5);display:flex;flex-direction:column;gap:var(--sp-2)}
.web-pricing-ref{font-size:.62rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:rgba(34,166,79,.65)}
.web-pricing-title{font-size:1rem;font-weight:700;color:rgba(255,255,255,.92);margin:0}
.web-pricing-desc{font-size:.85rem;line-height:1.6;color:rgba(255,255,255,.6);margin:0;flex:1}
.web-pricing-desc ul{margin:var(--sp-2) 0 0;padding-left:1.1em}
.web-pricing-desc li{margin-bottom:4px}
.web-pricing-foot{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);margin-top:var(--sp-2);padding-top:var(--sp-3);border-top:1px solid rgba(255,255,255,.08);flex-wrap:wrap}
.web-pricing-price-block{display:flex;flex-direction:column;gap:2px}
.web-pricing-price{font-weight:700;color:#22A64F;white-space:nowrap}
.web-pricing-setup{font-size:.72rem;font-weight:600;color:rgba(255,255,255,.5);white-space:nowrap}
.web-pricing-actions{display:flex;align-items:center;gap:var(--sp-3)}
.web-pricing-actions .am-pkg-detail{font-size:.8rem;font-weight:600;color:rgba(255,255,255,.55);text-decoration:none}
.web-pricing-actions .am-pkg-detail:hover{color:#fff}
@media(max-width:560px){.web-pricing-grid{grid-template-columns:1fr}}

/* marketing-pricing-grid: numbered performance ledger, price emphasized as the outcome figure */
.marketing-pricing-grid{display:flex;flex-direction:column}
.marketing-pricing-row{display:grid;grid-template-columns:2.5rem 1fr auto auto;align-items:center;gap:var(--sp-4);padding:var(--sp-4) 0;border-bottom:1px solid rgba(248,193,18,.14)}
.marketing-pricing-row:first-child{border-top:1px solid rgba(248,193,18,.14)}
.marketing-pricing-num{font-size:1.1rem;font-weight:800;color:rgba(248,193,18,.5);font-variant-numeric:tabular-nums}
.marketing-pricing-body{display:flex;flex-direction:column;gap:2px;min-width:0}
.marketing-pricing-label{font-weight:700;color:rgba(255,255,255,.92)}
.marketing-pricing-desc{font-size:.82rem;line-height:1.55;color:rgba(255,255,255,.55)}
.marketing-pricing-desc ul{margin:var(--sp-2) 0 0;padding-left:1.1em}
.marketing-pricing-desc li{margin-bottom:4px}
.marketing-pricing-price-block{display:flex;flex-direction:column;gap:2px;align-items:flex-end}
.marketing-pricing-price{font-size:1.15rem;font-weight:800;color:#F8C112;white-space:nowrap;text-align:right}
.marketing-pricing-setup{font-size:.7rem;font-weight:600;color:rgba(255,255,255,.5);white-space:nowrap}
.marketing-pricing-actions{display:flex;align-items:center;gap:var(--sp-3);white-space:nowrap}
.marketing-pricing-actions .am-pkg-detail{font-size:.8rem;font-weight:600;color:rgba(255,255,255,.55);text-decoration:none}
.marketing-pricing-actions .am-pkg-detail:hover{color:#fff}
@media(max-width:700px){.marketing-pricing-row{grid-template-columns:2rem 1fr;grid-template-areas:"num body" "price price" "actions actions"}.marketing-pricing-num{grid-area:num}.marketing-pricing-body{grid-area:body}.marketing-pricing-price-block{grid-area:price;align-items:flex-start;text-align:left;margin-top:var(--sp-2)}.marketing-pricing-actions{grid-area:actions;margin-top:var(--sp-2)}}

/* infrastructure-pricing-grid: dense spec-sheet table, monospace ref, left status rule per row */
.infrastructure-pricing-grid{width:100%;border-collapse:collapse;font-size:var(--fs-sm)}
.infrastructure-pricing-grid thead tr{border-bottom:1px solid rgba(27,108,179,.3)}
.infrastructure-pricing-grid th{font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.09em;color:rgba(27,108,179,.75);padding:var(--sp-2) var(--sp-3) var(--sp-3);text-align:left}
.infrastructure-pricing-grid tbody tr{border-bottom:1px solid rgba(255,255,255,.06);border-left:2px solid rgba(27,108,179,.4);transition:background .12s,border-color .12s}
.infrastructure-pricing-grid tbody tr:hover{background:rgba(27,108,179,.06);border-left-color:#1B6CB3}
.infrastructure-pricing-grid td{padding:var(--sp-3) var(--sp-3) var(--sp-3) var(--sp-4);vertical-align:middle}
.infrastructure-pricing-ref{display:block;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.64rem;font-weight:600;letter-spacing:.04em;color:rgba(27,108,179,.7);margin-bottom:2px}
.infrastructure-pricing-label{display:block;font-weight:600;color:rgba(255,255,255,.85)}
.infrastructure-pricing-desc{font-size:.78rem;line-height:1.6;color:rgba(255,255,255,.5);margin-top:4px}
.infrastructure-pricing-desc ul{margin:4px 0 0;padding-left:1.1em}
.infrastructure-pricing-desc li{margin-bottom:2px}
.infrastructure-pricing-price{text-align:right;font-weight:700;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:#1B6CB3;white-space:nowrap;padding-left:var(--sp-4)}
.infrastructure-pricing-setup{display:block;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.62rem;font-weight:600;color:rgba(255,255,255,.4);margin-top:2px}
.infrastructure-pricing-actions{text-align:right;white-space:nowrap;padding-left:var(--sp-2)}
.infrastructure-pricing-actions .am-pkg-detail{font-size:.8rem;font-weight:600;color:rgba(255,255,255,.55);text-decoration:none;margin-right:var(--sp-3)}
.infrastructure-pricing-actions .am-pkg-detail:hover{color:#fff}

/* ai-automation-pricing-grid: two-column capability grid, description-forward, price as a badge */
.ai-automation-pricing-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-5)}
.ai-automation-pricing-card{background:rgba(142,32,66,.06);border:1px solid rgba(142,32,66,.22);border-radius:10px;padding:var(--sp-6);display:flex;flex-direction:column;gap:var(--sp-3)}
.ai-automation-pricing-head{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--sp-3)}
.ai-automation-pricing-title{font-size:1.05rem;font-weight:700;color:rgba(255,255,255,.92);margin:0;flex:1}
.ai-automation-pricing-price-block{display:flex;flex-direction:column;align-items:flex-end;gap:2px}
.ai-automation-pricing-badge{font-size:.72rem;font-weight:700;letter-spacing:.03em;color:#8E2042;background:rgba(142,32,66,.15);border:1px solid rgba(142,32,66,.35);border-radius:999px;padding:4px 12px;white-space:nowrap}
.ai-automation-pricing-setup{font-size:.68rem;font-weight:600;color:rgba(255,255,255,.45);white-space:nowrap}
.ai-automation-pricing-desc{font-size:.9rem;line-height:1.7;color:rgba(255,255,255,.62);margin:0;flex:1}
.ai-automation-pricing-desc ul{margin:var(--sp-2) 0 0;padding-left:1.1em}
.ai-automation-pricing-desc li{margin-bottom:4px}
.ai-automation-pricing-actions{display:flex;align-items:center;gap:var(--sp-3);margin-top:auto;padding-top:var(--sp-2)}
.ai-automation-pricing-actions .am-pkg-detail{font-size:.8rem;font-weight:600;color:rgba(255,255,255,.55);text-decoration:none}
.ai-automation-pricing-actions .am-pkg-detail:hover{color:#fff}
@media(max-width:700px){.ai-automation-pricing-grid{grid-template-columns:1fr}}
/* Contact form */
.am-contact-form-section{padding:72px 0 80px}
.am-contact-form-wrap{max-width:720px}
.am-contact-form-header{margin-bottom:var(--sp-8)}
.am-contact-h2{font-size:clamp(1.5rem,3vw,2.25rem);font-weight:800;color:rgba(255,255,255,.95);line-height:1.25;margin:var(--sp-3) 0 0}
.am-contact-field-label{display:block;font-size:.8rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.6);margin-bottom:var(--sp-4)}
.am-contact-hint{font-weight:400;letter-spacing:0;text-transform:none;color:rgba(255,255,255,.4)}
.am-contact-services{border:none;padding:0;margin:0 0 var(--sp-6)}
.am-contact-pill-group{display:flex;flex-wrap:wrap;gap:var(--sp-2)}
.am-contact-pill{display:inline-flex;align-items:center;gap:var(--sp-2);padding:.45rem 1rem;border:1px solid rgba(255,255,255,.2);border-radius:100px;cursor:pointer;font-size:.875rem;color:rgba(255,255,255,.75);transition:border-color .18s,background .18s;user-select:none}
.am-contact-pill input{position:absolute;opacity:0;width:0;height:0;pointer-events:none}
.am-contact-pill:hover{border-color:rgba(255,255,255,.45)}
.am-contact-pill:has(input:checked){border-color:var(--am-web,#22A64F);background:rgba(34,166,79,.12);color:#fff}
.am-contact-fields{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-3);margin-bottom:var(--sp-3)}
.am-contact-input{width:100%;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.15);border-radius:6px;padding:.75rem 1rem;color:#fff;font-size:.95rem;transition:border-color .18s}
.am-contact-input::placeholder{color:rgba(255,255,255,.35)}
.am-contact-input:focus{outline:none;border-color:rgba(255,255,255,.45);background:rgba(255,255,255,.09)}
.am-contact-textarea{display:block;resize:vertical;min-height:130px}
.am-contact-submit{min-width:180px}
@media(max-width:560px){.am-contact-fields{grid-template-columns:1fr}}

/* Required/optional field labeling (Andre: "clear designation of which fields are
   required") -- every field previously relied on placeholder text alone, which fails
   accessibility guidance (disappears once typing starts, isn't a real <label>) as much
   as it fails to visually flag which fields are required before a submit attempt. */
.am-contact-required-note{font-size:.8rem;color:rgba(255,255,255,.5);margin:0 0 var(--sp-5)}
.am-contact-field{margin-bottom:var(--sp-4)}
.am-contact-label{display:block;font-size:.8rem;font-weight:600;color:rgba(255,255,255,.75);margin-bottom:var(--sp-2)}
.am-required-mark{color:var(--am-crimson,#8E2042);font-weight:800}
.am-optional-mark{font-weight:400;color:rgba(255,255,255,.4)}

/* Self-hosted ALTCHA widget: a real checkbox, not a decorative one -- solved
   automatically on first input (see _contact_form.php's own script), so most visitors
   never interact with it directly; state classes reflect real proof-of-work progress. */
.am-altcha-widget{margin-bottom:var(--sp-5)}
.am-altcha-check{display:inline-flex;align-items:center;gap:var(--sp-3);padding:.6rem 1rem;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.15);border-radius:6px;
  color:rgba(255,255,255,.75);font-size:.875rem;cursor:pointer;transition:border-color .18s}
.am-altcha-check:hover{border-color:rgba(255,255,255,.35)}
.am-altcha-check-box{width:18px;height:18px;flex-shrink:0;border:1.5px solid rgba(255,255,255,.4);border-radius:4px;
  position:relative;transition:background .18s,border-color .18s}
.is-solving .am-altcha-check-box{border-color:var(--am-web,#22A64F);
  border-top-color:transparent;animation:am-altcha-spin .7s linear infinite}
.is-solved .am-altcha-check-box{background:var(--am-web,#22A64F);border-color:var(--am-web,#22A64F)}
.is-solved .am-altcha-check-box::after{content:'';position:absolute;left:5px;top:1px;width:5px;height:9px;
  border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
.is-error .am-altcha-check-box{border-color:var(--am-crimson,#8E2042)}
.is-solved .am-altcha-check-label{color:rgba(255,255,255,.9)}
.is-error .am-altcha-check-label{color:var(--am-crimson,#8E2042)}
@keyframes am-altcha-spin{to{transform:rotate(360deg)}}

/* Journey end CTA (home page): centered close to the journey scroll, links to /contact/ */
.am-journey-end-cta{max-width:640px;margin:0 auto;text-align:center;padding:var(--sp-8) var(--sp-4) var(--sp-6)}
.am-home-contact-heading{font-size:clamp(1.75rem,3vw,2.5rem);font-weight:800;color:#fff;line-height:1.2;margin:var(--sp-3) 0 var(--sp-4)}
.am-home-contact-body{font-size:1rem;color:rgba(255,255,255,.72);line-height:1.7;margin:0 0 var(--sp-5)}
.am-home-contact-note{font-size:.85rem;color:rgba(255,255,255,.45);margin:var(--sp-4) 0 0}

/* Growth Packages (home page): 4 pillar-bundle cards, one per pillar's Dolibarr package.
   The base .am-section rule gives every section --am-sec-pad-y (240px) top AND bottom --
   correct for most full sections, but this one is directly followed by the short,
   single-purpose .am-journey-end-cta-section closing band (no padding of its own beyond
   its ~640px inner box), so the two together left a ~480px near-empty gap between the
   last card row and the CTA copy. Tightening only the bottom here, not the shared token. */
.am-growth-packages{padding-bottom:var(--sp-10)}
.am-growth-packages-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--sp-5);margin-top:var(--sp-8)}
.am-growth-package-card{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-top:3px solid var(--pcolor);border-radius:12px;padding:var(--sp-6) var(--sp-5);display:flex;flex-direction:column;gap:var(--sp-2)}
.am-growth-package-pillar{font-size:.75rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--pcolor)}
.am-growth-package-label{font-size:1.15rem;font-weight:800;color:#fff;margin:0}
.am-growth-package-price{display:flex;flex-direction:column;gap:2px;margin-bottom:var(--sp-3)}
.am-growth-package-price-monthly{font-size:1.6rem;font-weight:800;color:#fff;line-height:1.1}
.am-growth-package-price-setup{font-size:.8rem;font-weight:600;color:rgba(255,255,255,.55)}
.am-growth-package-card .am-growth-package-features{flex:1;padding:var(--sp-3) 0;border-top-color:rgba(255,255,255,.12);border-bottom:0;gap:var(--sp-2)}
.am-growth-package-card .am-growth-package-features li{color:rgba(255,255,255,.75);font-size:.85rem}
.am-growth-package-card .am-tier-check{color:var(--pcolor)}
@media(max-width:1100px){.am-growth-packages-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){.am-growth-packages-grid{grid-template-columns:1fr}}

/* Contact form cascade selects (shared _contact_form.php component) */
.am-contact-form select.am-contact-input{appearance:none;background-image:url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-opacity='0.5' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 1rem center;background-size:16px;padding-right:2.5rem}
.am-contact-form select.am-contact-input option{background:#1c2c44;color:#fff}

/* Contact intent routing cards */
.am-router-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.am-router-card{display:flex;flex-direction:column;gap:12px;padding:32px 28px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:12px;text-decoration:none;color:#fff;transition:border-color .2s,background .2s}
.am-router-card:hover{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.16)}
.am-router-card--primary{border-color:var(--am-green,#22A64F);background:rgba(34,166,79,.08)}
.am-router-card--primary:hover{background:rgba(34,166,79,.14)}
.am-router-icon{color:var(--am-green,#22A64F);margin-bottom:4px}
.am-router-heading{font-size:1.25rem;font-weight:700;line-height:1.2}
.am-router-body{font-size:.9rem;color:rgba(255,255,255,.65);line-height:1.6;flex:1}
.am-router-cta{font-size:.85rem;font-weight:700;color:var(--am-green,#22A64F)}
@media(max-width:768px){.am-router-grid{grid-template-columns:1fr}}

.am-map-wrapper{border-radius:8px;overflow:hidden;border:1px solid var(--color-line,#e4e8ef)}

/* Related services pill cluster (home-cadence pattern on inner pages) */
.am-related-services{background:var(--am-slate,#12151f)}
.am-related-eyebrow{color:var(--jcolor,#22A64F)}
.am-related-chips{display:flex;flex-wrap:wrap;gap:10px;margin:var(--sp-6) 0 var(--sp-5)}
.am-related-chips .am-journey-chip{font-size:.9rem;padding:8px 18px;opacity:1}
.am-related-seeall{color:var(--jcolor,#22A64F);font-weight:700}

/* Section heading utility (used in fallback sections across templates) */
.am-section-heading{font-size:var(--fs-xl,1.75rem);font-weight:700;line-height:1.2;margin:0 0 var(--sp-6);color:inherit}
.am-text-center{text-align:center}

/* Generic card pattern (careers/hub fallback grids) */
.am-card{padding:var(--sp-5);border:1px solid rgba(0,0,0,.08);border-radius:var(--radius-md,10px);background:#fff}
.am-card-title{margin:0 0 var(--sp-2);font-size:var(--fs-md,1.1rem);font-weight:700;color:var(--color-ink,#1a2535)}
.am-card-body{margin:0;font-size:var(--fs-sm,.9rem);color:#4a5568;line-height:1.6}
.am-section--navy .am-card,.am-section--dark .am-card,.am-section--slate .am-card{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.1)}
.am-section--navy .am-card-title,.am-section--dark .am-card-title{color:#fff}
.am-section--navy .am-card-body,.am-section--dark .am-card-body{color:rgba(255,255,255,.65)}

/* Grid helpers (careers/fallback layouts) */
.am-grid-4{grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}
.am-gap-6{gap:var(--sp-6,24px)}

/* Inline process steps (careers How We Hire fallback) */
.am-process-3{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:var(--sp-6)}
.am-process-step{text-align:center}
.am-process-number{display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:50%;background:var(--accent,#22A64F);color:#fff;font-size:var(--fs-md);font-weight:800;margin:0 auto var(--sp-3)}
.am-process-title{font-size:var(--fs-md);font-weight:700;margin:0 0 var(--sp-2)}
.am-process-body{font-size:var(--fs-sm);color:#4a5568;line-height:1.6;margin:0}
.am-section--light .am-process-body,.am-section--stone .am-process-body{color:#4a5568}
.am-section--navy .am-process-body,.am-section--dark .am-process-body{color:rgba(255,255,255,.65)}

/* CTA band heading/actions utility (careers/fallback) */
.am-cta-heading{font-size:var(--fs-xl,1.75rem);font-weight:700;margin:0 0 var(--sp-4)}
.am-cta-actions{display:flex;flex-wrap:wrap;gap:var(--sp-3);justify-content:center;margin-top:var(--sp-4)}

/* Section CTA modifier */
.am-section--cta{text-align:center;padding:var(--sp-12,72px) 0}

/* Breadcrumb nav (location pages) */
.am-breadcrumb{margin-bottom:var(--sp-4)}
.am-breadcrumb-list{display:flex;flex-wrap:wrap;gap:6px;list-style:none;padding:0;margin:0;font-size:var(--fs-xs);color:rgba(255,255,255,.55)}
.am-breadcrumb-list li+li::before{content:"›";margin-right:6px;opacity:.5}
.am-breadcrumb-list a{color:rgba(255,255,255,.7);text-decoration:none}
.am-breadcrumb-list a:hover{color:#fff}
.am-section--white .am-breadcrumb-list,.am-section--light .am-breadcrumb-list{color:rgba(0,0,0,.5)}
.am-section--white .am-breadcrumb-list a,.am-section--light .am-breadcrumb-list a{color:rgba(0,0,0,.65)}
.am-section--white .am-breadcrumb-list a:hover,.am-section--light .am-breadcrumb-list a:hover{color:#000}