/* ============================================
   CSS RESET + BASE STYLES
   ============================================
   Imported by components that need a clean baseline.
   Scoped to :host since components run in Shadow DOM.
   ============================================ */

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: var(--text-primary);
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-default);
}

a:not([class]):hover {
  color: var(--blue-primary);
}

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
}

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

/* ============================================
   HERO STANDARD (C01 — NO PCB FLOW)
   ============================================
   Textured light background with gradient wash.
   Centered text layout, stats bar at bottom.
   Reference: D19 Option B prototype, lines 523-1190
*/

.HeroStandard-module__hero--BDRJP {
  position: relative;
  padding: 120px 0 0;
  /* 2026-04-28: Light variant per Two-Container Rule. Whitish at top
     fading to Cool Steel hint at bottom — lets brand-blue ambient blobs
     read as faint atmosphere without washing out content above. */
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.96) 0%,
    rgba(244, 248, 253, 0.92) 100%
  );
  overflow: visible;
  min-height: 100vh;
  text-align: center;
}

/* Ambient-home override (2026-05-12 PM): on the home page the body
   serves as the canvas for the z-index:-1 AmbientBackground layer.
   Drop the section's opaque gradient so the canvas + ambient show
   through. Content (text, buttons, stat bar) remains in front. */
body[data-ambient-home] .HeroStandard-module__hero--BDRJP {
  background: transparent;
}

/* Dot-grid texture overlay — REMOVED 2026-04-21.
   The galaxy-wisp AmbientBackground component now provides the page
   texture. Keeping the ::before rule empty so the bottom-fade ::after
   remains unchanged. */

/* 2026-04-28: Bottom fade REMOVED.
   It was painting a 80-120px Cool Steel light strip below the hero (and
   below the dark stat bar). When the next section was Dark (CORR), this
   strip created a visible light-on-dark seam between two dark surfaces.
   The dark stat bar already provides a hard visual edge to the hero;
   no fade needed. */

.HeroStandard-module__container--kUMG1 {
  position: relative;
  z-index: 1;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--container-padding);
}

.HeroStandard-module__heroInner--Ge9mD {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.HeroStandard-module__heroHeadline--E1CSW {
  font-size: var(--display-size);
  font-weight: var(--display-weight);
  line-height: var(--display-line-height);
  letter-spacing: -0.025em;
  color: var(--text-primary);
  margin-bottom: 24px;
  max-width: 880px;
  /* text-wrap: balance distributes copy across lines for visually
     balanced wrapping. Fixes the "AI-" hyphen-hangs-at-line-end issue
     where the natural break landed mid-compound-word. */
  text-wrap: balance;
}

.HeroStandard-module__heroSubhead--hILTS {
  font-size: 22px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: -0.01em;
  color: var(--blue-primary, #0072B5);
  margin-bottom: 20px;
  max-width: 720px;
}

.HeroStandard-module__heroLead--e9IYX {
  font-size: 18px;
  font-weight: 400;
  line-height: 1.6;
  color: var(--text-secondary);
  margin-bottom: 32px;
  max-width: 640px;
}

/* CTA button group */
.HeroStandard-module__heroCtas--nLFLg {
  display: flex;
  gap: 12px;
  justify-content: center;
  margin-bottom: 56px;
  flex-wrap: wrap;
}

.HeroStandard-module__btnPrimary--jHZJp,
.HeroStandard-module__btnSecondary--N4CqJ {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-body);
  font-size: 17px;
  padding: 16px 36px;
  border-radius: 100px;
  transition: background var(--duration-fast) var(--ease-hover),
              transform var(--duration-fast) var(--ease-hover),
              border-color var(--duration-fast) var(--ease-hover),
              box-shadow var(--duration-fast) var(--ease-hover);
  border: none;
  cursor: pointer;
  text-decoration: none;
  letter-spacing: 0.01em;
  font-weight: 600;
}

.HeroStandard-module__btnPrimary--jHZJp {
  background: var(--cta-orange);
  color: var(--text-inverse);
  font-weight: 600;
}

.HeroStandard-module__btnPrimary--jHZJp:hover {
  background: var(--cta-orange-hover);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(255, 106, 20, 0.25);
}

.HeroStandard-module__btnPrimary--jHZJp:active {
  transform: scale(0.98);
  box-shadow: 0 1px 4px rgba(255, 106, 20, 0.2);
}

.HeroStandard-module__btnPrimary--jHZJp:focus-visible {
  outline: 2px solid var(--blue-primary, #0072B5);
  outline-offset: 2px;
}

.HeroStandard-module__btnSecondary--N4CqJ {
  /* 2026-05-12 PM: was `background: transparent`. With AmbientBackground
     now at z-index: -1 (true backdrop), a transparent outline button
     reveals ambient pixels through the button surface and breaks the
     illusion that the ambient is behind content. Solid white bg occludes
     the ambient inside the button while keeping the same visual look on
     light sections (where the section bg is also white-ish). */
  background: #FFFFFF;
  color: var(--text-primary);
  font-weight: 500;
  border: 1.5px solid var(--border-muted);
}

.HeroStandard-module__btnSecondary--N4CqJ:hover {
  border-color: var(--text-primary);
  background: rgba(0, 0, 0, 0.04);
}

.HeroStandard-module__btnSecondary--N4CqJ:active {
  transform: scale(0.98);
}

.HeroStandard-module__btnSecondary--N4CqJ:focus-visible {
  outline: 2px solid var(--blue-primary, #0072B5);
  outline-offset: 2px;
}

/* Stats bar — FULL-WIDTH band below the hero content.
   2026-04-28 (revised): flipped from Dark to LIGHT per Cameron — the
   stats bar now reads as part of the Hero (same Light bg), eliminating
   the persistent dark→dark gap problem with the CORR section below.
   Stats stand out via heavier typography + brand-primary number color
   + a subtle hairline divider above. The Light section flows into the
   Dark CORR section cleanly, no awkward dark→dark transition. */
.HeroStandard-module__heroStatsBar--GHber {
  position: relative;
  margin-top: 56px;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  width: 100vw;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.96) 0%,
    rgba(244, 248, 253, 0.92) 100%
  );
  /* 2026-04-29: Equal top/bottom padding. Was 48 / 32, which left the
     bottom feeling longer than the top. Cameron flagged the asymmetry. */
  padding: 40px 0;
  overflow: hidden;
  z-index: 2;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
}

/* Ambient-home override (2026-05-12 PM): heroStatsBar is a full-bleed
   band (100vw, negative margins to escape container), not a card. On
   home it would paint an opaque stripe across the textured backdrop —
   killing the "ambient as continuous background" effect. Drop the
   gradient so the canvas + ambient show through; the hairline border
   above still demarcates the stats row from the hero copy. */
body[data-ambient-home] .HeroStandard-module__heroStatsBar--GHber {
  background: transparent;
}

.HeroStandard-module__heroStats--vc6kA {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--container-padding);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 32px;
  width: 100%;
}

.HeroStandard-module__heroStat--UBaLu {
  text-align: center;
  position: relative;
}

/* 2026-04-28 (revised): Stat treatment for the new LIGHT stats bar.
   Numbers are heavier (800 weight) and use --blue-primary so they pop
   against the whitish bg without going dark/dull. Labels are tighter
   and use --text-secondary for legibility. */
.HeroStandard-module__heroStatValue--PiiP7 {
  font-size: 52px;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
  margin-bottom: 12px;
  color: var(--blue-primary, #0072B5);
}

.HeroStandard-module__heroStatLabel--qppjD {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  line-height: 1.4;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

@media (max-width: 768px) {
  /* 2026-04-29: Trim padding alongside stat-value scale-down so the bar
     stays proportional. Was 40/40 with 36px values — too generous when
     stats are small. */
  .HeroStandard-module__heroStatsBar--GHber { padding: 24px 0; }
  .HeroStandard-module__heroStatValue--PiiP7 { font-size: 36px; }
}

/* Brand-gradient text accent for hero headlines — used by {braced} segments */
.HeroStandard-module__heroAccent--ymT8q {
  background: linear-gradient(135deg, #009CDE 0%, #004C97 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  padding-right: 2px; /* avoid right-edge clipping of italic/serif glyphs */
}

/* ============================================
   SERVICE VARIANT
   ============================================
   Compact hero for service pages (MDR, etc.).
   No min-height, adjusted padding, proof strip,
   larger standalone stats (no bar container).
*/

.HeroStandard-module__hero-service--QJFIR {
  min-height: auto;
  /* 2026-04-30: bottom reduced 72→40 per Cameron. Header overlays the
     top 64px so visible top is ~32px; old symmetric 96/72 created a
     too-large bottom "chin" before the next section. */
  padding: 96px 0 40px;
}

.HeroStandard-module__hero-service--QJFIR::after {
  display: none;
}

/* Proof strip — SLA commitment pills */
.HeroStandard-module__proof-strip--ZUMi2 {
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 48px;
}

.HeroStandard-module__proof-item--JLrRa {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--bg-white);
  border: 1px solid var(--border-light);
  border-radius: 100px;
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-primary);
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
  transition: border-color var(--duration-fast) var(--ease-default),
              box-shadow var(--duration-fast) var(--ease-default);
}

.HeroStandard-module__proof-item--JLrRa:hover {
  border-color: var(--blue-primary, #0072B5);
  box-shadow: 0 2px 8px rgba(0,156,222,0.08);
}

.HeroStandard-module__proof-icon--wn1fl {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  color: var(--blue-primary, #0072B5);
  display: flex;
  align-items: center;
  justify-content: center;
}

.HeroStandard-module__proof-icon--wn1fl svg {
  width: 20px;
  height: 20px;
}

/* Large stats (service variant) — full-width band matching homepage style.
   2026-04-28 (revised): flipped from charcoal to LIGHT to match the
   updated .heroStatsBar treatment. Numbers in --blue-primary, labels in
   --text-secondary. */
.HeroStandard-module__hero-stats-large--DgrRw {
  position: relative;
  margin-top: 56px;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  width: 100vw;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.96) 0%,
    rgba(244, 248, 253, 0.92) 100%
  );
  /* 2026-04-29: Equal top/bottom padding to match .heroStatsBar. */
  padding: 40px 0;
  overflow: hidden;
  z-index: 2;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
}

.HeroStandard-module__hero-stats-large--DgrRw .HeroStandard-module__heroStats--vc6kA {
  padding-top: 0;
}

.HeroStandard-module__hero-stats-large--DgrRw .HeroStandard-module__heroStatValue--PiiP7 {
  font-size: 52px;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
  margin-bottom: 12px;
  color: var(--blue-primary, #0072B5);
}

.HeroStandard-module__hero-stats-large--DgrRw .HeroStandard-module__heroStatLabel--qppjD {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  line-height: 1.4;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-top: 0;
}

/* Service variant responsive */
@media (max-width: 767px) {
  .HeroStandard-module__hero-service--QJFIR {
    /* 2026-04-30: bottom reduced 48→24 per Cameron — header overlap is
       relatively bigger on phone, so the chin was 6x visible top. */
    padding: 72px 0 24px;
  }

  .HeroStandard-module__proof-strip--ZUMi2 {
    flex-direction: column;
    align-items: center;
  }

  .HeroStandard-module__proof-item--JLrRa {
    width: 100%;
    max-width: 320px;
    justify-content: center;
  }

  .HeroStandard-module__hero-stats-large--DgrRw {
    padding: 40px 0;
  }

  .HeroStandard-module__hero-stats-large--DgrRw .HeroStandard-module__heroStatValue--PiiP7 {
    font-size: 36px;
  }
}

/* Optional visual slot for children.
   2026-04-29: margin-top was 48px which left a strip of LIGHT hero bg
   between the stat bar (light) and the dark CorrIntegrationFlow that
   sits in this slot. The visible result was "stat bar floating above
   a sizable empty gap before the next dark section starts." Setting
   margin-top to 0 lets the dark CIF bg meet the stat bar bottom edge
   with no light-on-light dead space. The CIF still has its own internal
   top padding for breathing room under the dark bg. */
.HeroStandard-module__heroVisual--des1b {
  position: relative;
  z-index: 1;
  margin-top: 0;
}

/* Tablet adjustments */
@media (max-width: 1199px) {
  .HeroStandard-module__hero--BDRJP {
    /* 2026-04-30: bottom reduced from --section-pad-tablet (64) to 32 */
    padding: calc(var(--section-pad-tablet) + 48px) 0 32px;
  }

  .HeroStandard-module__heroHeadline--E1CSW {
    margin-bottom: 20px;
  }

  .HeroStandard-module__heroSubhead--hILTS {
    font-size: 20px;
    margin-bottom: 16px;
  }

  .HeroStandard-module__heroLead--e9IYX {
    margin-bottom: 28px;
  }

  .HeroStandard-module__heroCtas--nLFLg {
    margin-bottom: 48px;
  }

  .HeroStandard-module__heroStats--vc6kA {
    gap: 24px;
  }

  .HeroStandard-module__heroStatValue--PiiP7 {
    font-size: 24px;
  }

  .HeroStandard-module__heroStatLabel--qppjD {
    font-size: 12px;
  }

  /* 2026-04-29: Stat values shrink from 52px → 24px at this breakpoint
     but the bar's 40/40 padding stayed the same, leaving a "huge chin"
     under tiny stats. Drop padding to 24/24 so the bar tightens with
     the type. Same fix applies to .hero-stats-large (service variant). */
  .HeroStandard-module__heroStatsBar--GHber,
  .HeroStandard-module__hero-stats-large--DgrRw {
    padding: 24px 0;
  }
}

/* Mobile adjustments */
@media (max-width: 767px) {
  .HeroStandard-module__hero--BDRJP {
    /* 2026-04-30: bottom reduced from --section-pad-mobile (48) to 24 */
    padding: calc(var(--section-pad-mobile) + 40px) 0 24px;
  }

  .HeroStandard-module__heroHeadline--E1CSW {
    margin-bottom: 16px;
  }

  .HeroStandard-module__heroSubhead--hILTS {
    font-size: 18px;
    margin-bottom: 14px;
  }

  .HeroStandard-module__heroLead--e9IYX {
    font-size: 16px;
    margin-bottom: 24px;
  }

  .HeroStandard-module__heroCtas--nLFLg {
    flex-direction: column;
    gap: 8px;
    margin-bottom: 40px;
  }

  .HeroStandard-module__btnPrimary--jHZJp,
  .HeroStandard-module__btnSecondary--N4CqJ {
    width: 100%;
    padding: 12px 24px;
  }

  .HeroStandard-module__heroStats--vc6kA {
    grid-template-columns: 1fr;
    gap: 24px;
    /* padding-top removed 2026-04-29 — the stat bar's own padding now
       handles spacing. Stacking padding-top here on top of the bar's
       padding was part of why the chin felt too big on small screens. */
  }

  /* 2026-04-29: Pull the bar in tighter for single-column mobile stack
     so 4 small stats don't sit in a tall band of empty navy. */
  .HeroStandard-module__heroStatsBar--GHber,
  .HeroStandard-module__hero-stats-large--DgrRw {
    padding: 20px 0;
  }

  .HeroStandard-module__heroStatValue--PiiP7 {
    font-size: 20px;
  }

  .HeroStandard-module__heroStatLabel--qppjD {
    font-size: 12px;
  }

  .HeroStandard-module__heroVisual--des1b {
    margin-top: 0;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .HeroStandard-module__btnPrimary--jHZJp,
  .HeroStandard-module__btnSecondary--N4CqJ {
    transition: none;
  }

  .HeroStandard-module__btnPrimary--jHZJp:hover {
    transform: none;
  }

  .HeroStandard-module__hero--BDRJP::after {
    background: none;
  }
}