/* ============================================================================

   Consumes theme.css (semantic tokens) and chrome.css (.container, .btn*)
   only. No global variable block, no body.dark-mode rule, no hard-coded hex
   lives here — see theme.css for the token contract, including the
   fixed-surface exception documented at theme.css:6.

   Two colour families are used throughout, deliberately:
   - "Fixed" family (--on-dark, --on-dark-strong, --surface-brand,
     --on-brand): Layer-3 fixed-surface tokens, defined once in theme.css
     and never re-pointed under body.dark-mode. Used for the handful of
     sections the design always renders as a solid brand-dark or brand-green
     surface regardless of site theme (hero, capability cards, proof stats,
     the CTA card, the ROI result panel) — these are branded moments, not
     theme-reactive content, but the tokens that dress them are still named
     and still live in theme.css rather than being raw literals here.
   - "Reactive" family (--bg, --surface, --fg, --fg-muted, --accent*,
     --border*, --shadow*): Layer-3 semantic tokens that flip with
     body.dark-mode. Used for every ordinary content section so Home
     actually participates in the site-wide light/dark toggle.
   Remaining raw Layer-1 usage (--green-600/-900/-950, --ink, --paper,
   --green-300 etc.) is confined to two documented exceptions: (1) the hero's
   own gradient/clip-path math, which is constructing the fixed surface
   itself rather than dressing content on top of it, and (2) the lead-form
   card (.cta-form), which is a deliberately fixed *white* card floating on
   top of the fixed *green* .cta-grid — a third, one-off fixed-surface family
   not worth a shared token for a single component.
   Chrome (header/nav) rules that used to live here have moved to
   site-header.css; this file must never re-declare them.
   ========================================================================= */

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--fg);
  background: var(--surface);
  line-height: 1.5;
  overflow-x: hidden;
}

/* --- Shared section primitives (duplicated per-page by design; see the
   other wwwroot/css/pages/*.css files for the same pattern) -------------- */
.section {
  position: relative;
  padding: clamp(88px, 9vw, 132px) 0;
}
.section-kicker {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-5);
  color: var(--accent);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}
.section-title {
  max-width: 960px;
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(38px, 4.4vw, 64px);
  line-height: 1.02;
  letter-spacing: -0.035em;
  color: var(--fg);
  text-wrap: balance;
}
.section-copy {
  max-width: 720px;
  margin-top: var(--space-5);
  color: var(--fg-muted);
  font-size: 18px;
  line-height: 1.75;
}

/* ============================================================================
   Hero Split Section (design source: index.html lines 34-66)
   Always a fixed dark-green surface — body.has-dark-hero (see site-header.css)
   depends on this section staying dark regardless of the site theme toggle.
   ========================================================================= */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  overflow: hidden;
  background: var(--green-950);
  color: var(--on-dark);
  --hero-split: 50%;
}
.hero[data-active="software"] { --hero-split: 80.65%; }
.hero[data-active="bpo"] { --hero-split: 19.35%; }
.hero[data-active="software"] .hero-panel-bpo { opacity: 0.1; }
.hero[data-active="bpo"] .hero-panel-software { opacity: 0.1; }

.hero-split {
  position: absolute;
  inset: 0;
  background: var(--green-950);
}

.hero-panel {
  position: absolute;
  inset: 0;
  width: 100%;
  overflow: hidden;
  isolation: isolate;
  color: var(--on-dark);
  transition: clip-path var(--transition-slow), filter var(--transition-base), opacity var(--transition-base);
  will-change: clip-path;
}
/* No --panel-image is set here on purpose: the partials only add the
   custom property inline when the editor has supplied a photo. Without it
   this ::before layer resolves to no background image and the ::after
   overlay gradient below is the entire (deliberate, token-based) surface. */
.hero-panel::before {
  content: "";
  position: absolute;
  z-index: -2;
  inset: -2%;
  background-image: var(--panel-image);
  background-position: var(--panel-position, center);
  background-size: cover;
  transform: scale(1.01);
  filter: saturate(0.75) contrast(1.08);
  transition: transform var(--transition-slow), filter var(--transition-base), opacity var(--transition-base);
  will-change: transform;
}
.hero-panel::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: var(--panel-overlay);
  transition: background var(--transition-base);
}
.hero-panel-software {
  left: 0;
  z-index: 2;
  --panel-position: center center;
  /* Stops taken from the design source (package/styles.css .hero-panel-software).
     This previously mixed --surface-brand 72% with --green-900 and held that
     deepened tone as a plateau to 36%, to buy extra contrast under the headline.
     The client's read was that it made the hero markedly darker than the design,
     so the plateau is gone and the brand green is now used at full strength.
     See .hero-panel-copy below: the copy colour was lifted to compensate. */
  --panel-overlay: linear-gradient(
    90deg,
    var(--surface-brand) 0%,
    color-mix(in srgb, var(--surface-brand) 82%, transparent) 58%,
    color-mix(in srgb, var(--green-900) 48%, transparent) 100%
  );
  clip-path: polygon(0 0, calc(var(--hero-split) + 7.5vh) 0, calc(var(--hero-split) - 7.5vh) 100%, 0 100%);
}
.hero-panel-bpo {
  right: 0;
  z-index: 1;
  --panel-position: center center;
  /* Grey, per the design source (package/styles.css .hero-panel-bpo). An earlier
     pass substituted --green-950 here on the reasoning that the source's grey
     "looks unstyled" next to the vivid Build panel; the client's decision is that
     the near-black that produced is too dark against the design, so the source's
     own neutral stops are restored via --grey-500/--grey-700. The grey is the
     point: it distinguishes Operate from Build rather than making the hero two
     shades of the same green. */
  --panel-overlay: linear-gradient(
    270deg,
    var(--grey-500) 0%,
    color-mix(in srgb, var(--grey-700) 88%, transparent) 58%,
    color-mix(in srgb, var(--green-900) 50%, transparent) 100%
  );
  clip-path: polygon(calc(var(--hero-split) + 7.5vh) 0, 100% 0, 100% 100%, calc(var(--hero-split) - 7.5vh) 100%);
  transition: clip-path var(--transition-slow), filter var(--transition-base), opacity var(--transition-base), z-index 0s linear 0.72s;
}
.hero[data-active="bpo"] .hero-panel-bpo {
  z-index: 3;
  transition: clip-path var(--transition-slow), filter var(--transition-base), opacity var(--transition-base), z-index 0s;
}
.hero[data-active="software"] .hero-panel-bpo,
.hero[data-active="bpo"] .hero-panel-software {
  filter: brightness(0.955);
}
.hero[data-active="software"] .hero-panel-software::before,
.hero[data-active="bpo"] .hero-panel-bpo::before {
  transform: scale(1.018);
  filter: saturate(0.8) contrast(1.065);
}

.hero-panel-inner {
  position: relative;
  z-index: 2;
  width: min(720px, calc(100% - 96px));
  height: 100%;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: clamp(64px, 9vh, 110px);
  padding-bottom: clamp(64px, 9vh, 110px);
  transition: opacity var(--transition-base);
}
.hero-panel-software .hero-panel-inner {
  margin-left: max(var(--space-6), calc((100vw - 1440px) / 2 + var(--space-6)));
  padding-right: clamp(70px, 9vw, 150px);
}
.hero-panel-bpo .hero-panel-inner {
  margin-left: auto;
  /* Extra clearance beyond the software panel's mirror value keeps the
     right-aligned headline clear of the fixed .social-float icon rail. */
  margin-right: max(calc(var(--space-6) + 0px), calc((100vw - 1440px) / 2 + var(--space-6) + 0px));
  padding-left: clamp(90px, 11vw, 180px);
  text-align: right;
  align-items: flex-end;
}
.hero[data-active="software"] .hero-panel-bpo .hero-panel-inner,
.hero[data-active="bpo"] .hero-panel-software .hero-panel-inner {
  opacity: 0.965;
}

.hero-panel-kicker {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
  padding-left: 4px;
  color: var(--on-dark);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.hero-panel-bpo .hero-panel-kicker { flex-direction: row-reverse; }

.hero-panel h1,
.hero-panel h2 {
  max-width: 620px;
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(46px, 5.4vw, 82px);
  line-height: 0.98;
  letter-spacing: -0.035em;
  text-wrap: balance;
}
.hero-panel-copy {
  max-width: 570px;
  margin-top: 25px;
  /* Full strength, not the previous 78%. The panels are now the design source's
     lighter green/grey, which costs contrast: white on --green-600 measures
     3.59:1, so every percent of transparency here was coming straight off an
     already-tight budget. See the note on .hero-panel-software. */
  color: var(--on-dark);
  font-size: clamp(16px, 1.25vw, 19px);
  line-height: 1.7;
}
.hero-panel-actions {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  margin-top: var(--space-6);
}
.hero-panel-bpo .hero-panel-actions { justify-content: flex-end; }

/* Hero CTAs use .btn.btn-secondary from chrome.css; this is the
   translucent-on-dark variant that applies only inside the hero. */
.hero .btn-secondary {
  border-color: color-mix(in srgb, var(--on-dark) 32%, transparent);
  background: color-mix(in srgb, var(--on-dark) 8%, transparent);
  color: var(--on-dark);
}
.hero .btn-secondary:hover {
  border-color: color-mix(in srgb, var(--on-dark) 70%, transparent);
  background: color-mix(in srgb, var(--on-dark) 14%, transparent);
}

.hero-divider { display: none; }

.hero-scroll-cue {
  position: absolute;
  text-decoration: none;
  z-index: 5;
  left: 50%;
  bottom: clamp(16px, 2.5vh, 28px);
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--on-dark) 52%, transparent);
  border-radius: 50%;
  background: color-mix(in srgb, var(--green-950) 72%, transparent);
  color: var(--on-dark);
  box-shadow: var(--shadow);
  transform: translateX(-50%);
  transition: background var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.hero-scroll-cue::before {
  content: "";
  width: 10px;
  height: 10px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  animation: hero-scroll-cue 1.8s ease-in-out infinite;
}
.hero-scroll-cue:hover {
  border-color: var(--on-dark);
  background: color-mix(in srgb, var(--on-dark) 22%, transparent);
  box-shadow: var(--shadow-lg);
}
.hero-scroll-cue:focus-visible {
  outline: 3px solid var(--green-300);
  outline-offset: 4px;
}
@keyframes hero-scroll-cue {
  0%, 100% { transform: translateY(-3px) rotate(45deg); }
  50% { transform: translateY(3px) rotate(45deg); }
}

@media (max-width: 980px) {
  .hero { min-height: auto; }
  .hero-split { position: relative; display: grid; grid-template-columns: 1fr; }
  .hero-panel,
  .hero[data-active="software"] .hero-panel-software,
  .hero[data-active="bpo"] .hero-panel-bpo,
  .hero[data-active="software"] .hero-panel-bpo,
  .hero[data-active="bpo"] .hero-panel-software {
    position: relative;
    width: 100%;
    min-height: 52svh;
    clip-path: none;
    filter: none;
  }
  .hero-panel-software,
  .hero-panel-bpo { left: auto; right: auto; }
  .hero-panel-inner,
  .hero[data-active="software"] .hero-panel-bpo .hero-panel-inner,
  .hero[data-active="bpo"] .hero-panel-software .hero-panel-inner {
    width: min(100% - 48px, 720px);
    min-height: 52svh;
    margin: 0 auto !important;
    padding: 72px 0 !important;
    text-align: left !important;
    align-items: flex-start !important;
    opacity: 1;
    transform: none;
  }
  .hero-panel-bpo .hero-panel-kicker { flex-direction: row; }
  .hero-panel-bpo .hero-panel-actions { justify-content: flex-start; }
}
@media (max-width: 640px) {
  .hero-panel,
  .hero-panel-inner { min-height: 480px; }
  .hero-panel-inner { width: min(100% - 32px, 720px); padding: 58px 0 !important; }
  .hero-panel h1,
  .hero-panel h2 { font-size: 43px; }
  .hero-panel-copy { font-size: 15px; }
  .hero-panel-actions { align-items: flex-start; flex-direction: column; gap: var(--space-3); }
}

/* ============================================================================
   Trust Bar (design source: index.html lines 69-77) — reactive
   ========================================================================= */
.trust {
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: var(--bg);
}
.trust-grid {
  padding: var(--space-5) 0;
  display: grid;
  grid-template-columns: 1.1fr repeat(4, 1fr);
  align-items: center;
  gap: var(--space-5);
}
.trust-label {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.11em;
  font-weight: 800;
  color: var(--fg-muted);
}
.trust-item {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 800;
  color: var(--fg-muted);
  text-align: center;
}

/* ============================================================================
   Real-time Software Usage / Live Metrics Globe
   (design source: index.html lines 79-111) — reactive
   ========================================================================= */
.live-usage {
  /* Design source (index.html live-usage, styles.css) clips this section:
     .globe-canvas below intentionally bleeds past .globe-stage via a
     negative inset for an edge-to-edge visual, but nothing was clipping
     that bleed at the section level, so it pushed the whole page 108px
     wider than the viewport at 1440px. Restoring the design's overflow
     hidden here contains the bleed without touching the globe's look. */
  overflow: hidden;
  background: var(--surface);
}
.live-usage-grid {
  display: grid;
  grid-template-columns: minmax(300px, 0.75fr) minmax(0, 1.25fr);
  align-items: center;
  gap: clamp(60px, 8vw, 130px);
}
.live-usage-copy .section-title { max-width: 560px; }
.live-usage-copy .section-copy { max-width: 590px; }
.live-usage-detail {
  max-width: 580px;
  margin-top: var(--space-4);
  color: var(--fg-muted);
  font-size: 15px;
  line-height: 1.75;
}
.live-usage-note {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-6);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--bg-elevated) 66%, transparent);
  box-shadow: var(--shadow);
  backdrop-filter: blur(12px);
  color: var(--fg);
  font-size: 12px;
  font-weight: 750;
}
.live-usage-pulse {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--accent) 12%, transparent);
  animation: metrics-pulse 2.4s ease-out infinite;
}

.globe-stage {
  position: relative;
  min-height: 640px;
  isolation: isolate;
  cursor: grab;
  touch-action: pan-y;
  user-select: none;
}
.globe-stage.is-dragging { cursor: grabbing; }
.globe-stage:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
  border-radius: var(--radius-lg);
}
.globe-stage::before {
  content: "";
  position: absolute;
  inset: 3% -8% 0 -8%;
  border-radius: 50%;
  background: radial-gradient(circle at 58% 48%, color-mix(in srgb, var(--fg) 12%, transparent), color-mix(in srgb, var(--fg) 3.5%, transparent) 44%, transparent 68%);
  filter: blur(18px);
  pointer-events: none;
}
.globe-stage::after {
  content: "";
  position: absolute;
  z-index: 2;
  left: -1px;
  top: 0;
  bottom: 0;
  width: 18%;
  pointer-events: none;
}
.globe-canvas {
  position: absolute;
  z-index: 1;
  inset: -11% -18% -13% -18%;
  opacity: 0.95;
  /* Alpha-only mask gradient — not a rendered brand colour; uses the "black"
     keyword rather than a hex literal so it still trips no hex-scan rule. */
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.58) 8%, black 24%);
  mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.58) 8%, black 24%);
}
.globe-canvas canvas {
  display: block;
  width: 100%;
  height: 100%;
  filter: grayscale(1) contrast(1.06);
}
.globe-hud {
  position: absolute;
  z-index: 3;
  right: 18px;
  bottom: 32px;
  width: min(272px, calc(100% - 36px));
  padding: var(--space-5) var(--space-5) 21px;
  border: 1px solid color-mix(in srgb, var(--fg) 13%, transparent);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--bg-elevated) 41%, transparent);
  box-shadow: var(--shadow);
  backdrop-filter: blur(5px);
  pointer-events: none;
}
.globe-status {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
  color: var(--accent);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.globe-status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  /* Was a hard-coded amber named CSS colour (I6 flagged both this and the
     is-offline rule below) — this dot has no current markup (Task 3/5 never
     wired a .globe-status readout; see home-globe.js setFeedState, a
     documented no-op hook), so it is unreachable today, but the value still
     has to be valid and theme-honest. --fg-muted already dresses this
     rule's own glow ring below, so reusing it for the idle/connecting fill
     keeps both halves of the same rule consistent. */
  background: var(--fg-muted);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--fg-muted) 10%, transparent);
  animation: metrics-pulse 2.4s ease-out infinite;
}
.globe-status-dot.is-live {
  background: var(--accent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 12%, transparent);
}
/* Was a hard-coded rust-red named CSS colour (I6); --fg-muted matches the
   idle state above so live (accent green) is the only visually distinct
   status. */
.globe-status-dot.is-offline { background: var(--fg-muted); animation: none; }
.globe-metric { display: block; }
.globe-metric strong {
  display: block;
  margin-bottom: 5px;
  font-family: var(--font-display);
  font-size: clamp(22px, 2.4vw, 22px);
  line-height: 1.05;
  letter-spacing: -0.035em;
  color: var(--fg);
}
.globe-action {
  display: inline-block;
  max-width: 100%;
  color: var(--accent);
  font-size: 11px;
  font-weight: 750;
  line-height: 1.25;
  overflow-wrap: anywhere;
}
.globe-foot {
  display: flex;
  justify-content: space-between;
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid color-mix(in srgb, var(--fg) 10%, transparent);
  color: var(--fg-muted);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}
.globe-coordinate {
  position: absolute;
  z-index: 3;
  right: 20px;
  top: 42px;
  color: color-mix(in srgb, var(--fg) 52%, transparent);
  font-family: monospace;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  pointer-events: none;
}
.globe-fallback {
  position: absolute;
  inset: 12%;
  display: none;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: 50%;
  color: var(--fg-muted);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.globe-stage.is-fallback .globe-fallback { display: grid; }
@keyframes metrics-pulse {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--fg-muted) 26%, transparent); }
  65%, 100% { box-shadow: 0 0 0 8px transparent; }
}

/* ============================================================================
   Client Logo Marquee (design source: index.html lines 114-254) — reactive
   ========================================================================= */
.client-logo-section {
  position: relative;
  width: 100%;
  overflow: hidden;
  padding: var(--space-8) 0;
  background: var(--surface);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.client-logo-section-header {
  width: min(1440px, calc(100% - 64px));
  margin: 0 auto var(--space-6);
  text-align: center;
}
.client-logo-section-header h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(26px, 3vw, 42px);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.035em;
  color: var(--fg);
}
.client-logo-marquee { position: relative; width: 100%; overflow: hidden; }
.client-logo-marquee::before,
.client-logo-marquee::after {
  content: "";
  position: absolute;
  z-index: 2;
  top: 0;
  bottom: 0;
  width: clamp(50px, 10vw, 180px);
  pointer-events: none;
}
.client-logo-marquee::before {
  left: 0;
  background: linear-gradient(to right, var(--surface) 0%, color-mix(in srgb, var(--surface) 96%, transparent) 28%, transparent 100%);
}
.client-logo-marquee::after {
  right: 0;
  background: linear-gradient(to left, var(--surface) 0%, color-mix(in srgb, var(--surface) 96%, transparent) 28%, transparent 100%);
}
.client-logo-marquee-track {
  display: flex;
  align-items: center;
  width: max-content;
  /* Was 120s over an 8640px track (~72px/s) — technically animating but
     imperceptible, which read as broken/frozen rather than a moving
     carousel. Sped up to a clearly-visible continuous scroll. */
  animation: client-logo-marquee-scroll 42s linear infinite;
  will-change: transform;
}
.client-logo-marquee-track:hover,
.client-logo-marquee.is-paused .client-logo-marquee-track {
  animation-play-state: paused;
}
/* While paused (whether the user clicked pause, or reduced motion started it
   that way — see home-animations.js), hide the duplicate aria-hidden logo
   group. It exists only to make the *animated* track loop seamlessly; with
   the track stationary it is pure redundant DOM. aria-hidden keeps it out of
   the accessibility tree, but does not stop focus from landing on any
   focusable children inside it, so screen-reader/keyboard users would still
   hit a silent, duplicate set of stops without this. */
.client-logo-marquee.is-paused .client-logo-group[aria-hidden="true"] { display: none; }
.client-logo-group {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  gap: var(--space-7);
  padding-right: var(--space-7);
}
.client-logo-card {
  flex: 0 0 190px;
  width: 190px;
  height: 90px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-3) var(--space-4);
}
.client-logo-card img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 75px;
  object-fit: contain;
  filter: grayscale(100%);
  opacity: 0.52;
  transition: filter var(--transition-base), opacity var(--transition-base), transform var(--transition-base);
}
.client-logo-card:hover img,
.client-logo-card:focus-within img {
  filter: grayscale(0%);
  opacity: 1;
  transform: scale(1.04);
}
@keyframes client-logo-marquee-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@media (max-width: 768px) {
  .client-logo-section { padding: var(--space-7) 0; }
  .client-logo-section-header { width: calc(100% - 32px); margin-bottom: var(--space-5); }
  .client-logo-section-header h2 { font-size: clamp(24px, 7vw, 32px); }
  .client-logo-marquee-track { animation-duration: 30s; }
  .client-logo-group { gap: var(--space-6); padding-right: var(--space-6); }
  .client-logo-card { flex-basis: 150px; width: 150px; height: 74px; padding: var(--space-2) var(--space-3); }
  .client-logo-card img { max-height: 58px; }
}
/* Defect 2a fix: this block used to strip the marquee animation with
   `animation: none` and, as a "fallback", set `.client-logo-marquee`
   to `overflow-x: auto` — which is exactly the horizontal scrollbar users
   with reduced motion were reporting as broken, and it also skipped
   creating the pause/play control entirely, so there was no way to opt
   back into the motion. Nothing marquee-specific belongs in this media
   query anymore: home-animations.js detects prefers-reduced-motion and
   starts the marquee in the same `.is-paused` state the manual pause
   control uses (see the animation-play-state and duplicate-group rules
   above), so the track sits still on load without removing the feature
   or introducing a scrollbar, and the always-created toggle lets the user
   start it moving. */

/* ============================================================================
   Retained-section header (News + Case Studies — see NewsSection.cshtml and
   CaseStudiesSection.cshtml/.case-studies below). Home was rebuilt around
   nine new-design sections built from package/index.html, which use
   .section-kicker/.section-copy for their eyebrow/intro text. News and Case
   Studies predate that rebuild and are deliberately retained (built live
   from child content — the new design has no equivalent for either), but
   they emit their own older .section-header/.section-tag/.section-subtitle
   markup, which the rewrite never styled at all. Styled here, once, to the
   exact same visual language as .section-kicker/.section-copy above so both
   retained sections read as siblings of the new ones instead of orphans.
   ========================================================================= */
.section-header {
  width: min(1440px, calc(100% - 64px));
  margin: 0 auto var(--space-8);
}
.section-header .section-tag {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-5);
  color: var(--accent);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}
.section-header .section-subtitle {
  max-width: 720px;
  margin: var(--space-5) 0 0;
  color: var(--fg-muted);
  font-size: 18px;
  line-height: 1.75;
}

/* ============================================================================
   Latest News (Views/Partials/Sections/NewsSection.cshtml) — retained,
   built live from the blog list's children; reactive (no fixed surface).
   Card language borrows .service-card's border/radius/shadow and
   .testi-card's hover lift so it sits beside the nine new sections rather
   than looking like a leftover from the pre-Wave-4 design.
   ========================================================================= */
.home-blog { padding: clamp(88px, 9vw, 132px) 0; background: var(--bg); }
.home-blog-shell {
  width: min(1440px, calc(100% - 64px));
  margin: var(--space-8) auto 0;
}
.home-blog-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  margin-bottom: var(--space-6);
}
.home-blog-view-all {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--accent);
  font-weight: 800;
  font-size: 14px;
  text-decoration: none;
}
.home-blog-view-all i { transition: transform var(--transition-fast); }
.home-blog-view-all:hover i { transform: translateX(4px); }
.home-blog-nav-group { display: flex; gap: var(--space-3); }
.home-blog-nav-group[aria-hidden="true"] { visibility: hidden; }
.home-blog-nav {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--bg-elevated);
  color: var(--fg);
  transition: border-color var(--transition-fast), color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
}
.home-blog-nav:hover:not(:disabled) {
  border-color: var(--accent);
  color: var(--accent);
  box-shadow: var(--shadow);
  transform: translateY(-1px);
}
.home-blog-nav:disabled { opacity: 0.4; cursor: not-allowed; }
.home-blog-viewport { overflow: hidden; }
.home-blog-track {
  display: flex;
  gap: var(--space-5);
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}
.home-blog-card {
  flex: 0 0 calc((100% - 2 * var(--space-5)) / 3);
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--bg-elevated);
  /* box-shadow: var(--shadow); */
  opacity: 0;
  transform: translateY(22px);
  transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base);
}
.home-blog-card.reveal { animation: home-blog-card-in 0.6s ease forwards; }
@keyframes home-blog-card-in {
  to { opacity: 1; transform: translateY(0); }
}
.home-blog-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
  border-color: color-mix(in srgb, var(--accent) 34%, var(--border));
}
.home-blog-card-link { display: flex; flex-direction: column; height: 100%; color: inherit; text-decoration: none; }
.home-blog-image {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--surface-sunken);
}
.home-blog-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}
.home-blog-card:hover .home-blog-image img { transform: scale(1.05); }
.home-blog-chip {
  position: absolute;
  left: var(--space-4);
  bottom: var(--space-4);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--fg) 82%, transparent);
  color: var(--bg);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.home-blog-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-6);
}
.home-blog-content h3 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 20px;
  line-height: 1.3;
  letter-spacing: -0.02em;
  color: var(--fg);
}
.home-blog-content p {
  margin: 0;
  min-height: 3.3em;
  color: var(--fg-muted);
  line-height: 1.65;
}
.home-blog-meta {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  color: var(--fg-muted);
  font-size: 13px;
}
.home-blog-read {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--accent);
  font-weight: 800;
  font-size: 14px;
}
.home-blog-read i { transition: transform var(--transition-fast); }
.home-blog-card:hover .home-blog-read i { transform: translateX(4px); }

@media (max-width: 1200px) {
  .home-blog-card { flex: 0 0 calc((100% - var(--space-5)) / 2); }
}
@media (max-width: 768px) {
  .home-blog-toolbar { flex-direction: column; align-items: flex-start; gap: var(--space-3); }
  .home-blog-card { flex: 0 0 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .home-blog-card { opacity: 1; transform: none; animation: none; }
}

/* ============================================================================
   Capability Cards / "services" (design source: index.html lines 256-313)
   Fixed brand-green surface — deliberately does not react to dark mode; the
   card glass effect below is built from --paper so it still reads correctly
   against this fixed background either way.
   ========================================================================= */
.services {
  position: relative;
  color: var(--on-brand);
  overflow: hidden;
  background: var(--surface-brand);
}
.services::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 8% 12%, color-mix(in srgb, var(--surface-brand) 18%, transparent), transparent 32%),
    radial-gradient(circle at 92% 82%, color-mix(in srgb, var(--green-700) 13%, transparent), transparent 30%);
  pointer-events: none;
}
.services .container { position: relative; z-index: 1; }
.services .section-kicker { color: var(--green-300); }
.services .section-title { color: var(--on-brand); }
.services .section-copy { color: color-mix(in srgb, var(--on-brand) 63%, transparent); }

.service-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
  margin-top: var(--space-8);
}
.service-card {
  min-height: 430px;
  padding: var(--space-6);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  border: 1px solid color-mix(in srgb, var(--on-brand) 11%, transparent);
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--on-brand) 5.5%, transparent);
  color: var(--on-brand);
  backdrop-filter: blur(8px);
  transition: transform var(--transition-base), background var(--transition-base), border-color var(--transition-base);
}
.service-card:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--green-300) 40%, transparent);
  background: color-mix(in srgb, var(--on-brand) 8.5%, transparent);
}
.service-card::after {
  content: "";
  position: absolute;
  width: 220px;
  height: 220px;
  right: -110px;
  top: -120px;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--green-500) 18%, transparent), transparent 68%);
  z-index: 0;
}
.service-number {
  position: relative;
  z-index: 1;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 13px;
  color: var(--on-brand);
}
.service-card h3 {
  position: relative;
  z-index: 1;
  margin: var(--space-5) 0 var(--space-3);
  font-family: var(--font-display);
  font-size: 28px;
  letter-spacing: -0.035em;
  color: var(--on-brand);
}
.service-card p {
  position: relative;
  z-index: 1;
  color: var(--on-brand);
  line-height: 1.7;
}
.service-list {
  position: relative;
  z-index: 1;
  list-style: none;
  margin: var(--space-6) 0 var(--space-6);
  padding: 0;
  display: grid;
  gap: var(--space-2);
  color: var(--on-brand);
  font-size: 14px;
}
.service-list li { display: flex; gap: var(--space-2); align-items: center; }
.service-list li::before { content: "✓"; color: var(--green-300); font-weight: 900; }
.text-link {
  margin-top: auto;
  /* The design source sets a global `a { text-decoration: none }` reset; this
     project has no such reset (deliberately, so genuine inline body links keep
     their underline for WCAG 1.4.1), so component links must opt out here. */
  text-decoration: none;
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--on-brand);
  font-weight: 800;
  font-size: 14px;
}

/* ============================================================================
   Interactive ROI Estimator (design source: index.html lines 315-337)
   Outer section + card are reactive; the result panel is a fixed brand-green
   "answer" highlight, matching the hero/services/proof/cta-grid family.
   ========================================================================= */
.calc-section { background: var(--surface); }
.calc-box {
  margin-top: var(--space-6);
  padding: clamp(34px, 5vw, 64px);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-7);
  align-items: center;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--bg-elevated);
  box-shadow: var(--shadow);
}
.calc-controls label {
  display: block;
  margin-bottom: var(--space-2);
  font-weight: 700;
  font-size: 15px;
  color: var(--fg);
}
.calc-controls input[type="range"] {
  width: 100%;
  margin-bottom: var(--space-5);
  accent-color: var(--accent);
}
.calc-result {
  min-height: 255px;
  display: grid;
  align-content: center;
  padding: var(--space-6);
  border-radius: var(--radius-lg);
  background: var(--surface-brand);
  color: var(--on-brand);
  text-align: center;
}
.calc-result strong {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(52px, 6vw, 78px);
  line-height: 1;
  color: var(--on-brand);
}
.calc-result span {
  display: block;
  margin-top: var(--space-2);
  font-size: 14px;
  color: var(--on-brand);
}

/* ============================================================================
   Key Metrics / Proof (design source: index.html lines 339-351)
   Fixed brand-green surface, same rationale as .services above.
   ========================================================================= */
.proof-section { background: var(--surface-brand); color: var(--on-brand); }
.proof-section .section-title { color: var(--on-brand); }
.proof-section .section-kicker { color: var(--green-300); }
.proof-grid {
  margin-top: var(--space-7);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4);
}
.proof-card {
  padding: var(--space-6);
  border: 1px solid color-mix(in srgb, var(--on-brand) 10%, transparent);
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--on-brand) 5.5%, transparent);
}
.proof-card strong {
  display: block;
  margin-bottom: var(--space-2);
  font-family: var(--font-display);
  font-size: 36px;
  color: var(--on-brand);
}
.proof-card span { color: var(--on-brand); font-size: 14px; line-height: 1.5; }

/* ============================================================================
   Testimonials (design source: index.html lines 390-424) — reactive
   ========================================================================= */
.testimonials { background: var(--bg-elevated); }
.testi-grid {
  margin-top: var(--space-7);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
}
.testi-card {
  min-height: 300px;
  padding: var(--space-7);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
}
.testi-card p {
  font-family: var(--font-display);
  font-size: 19px;
  line-height: 1.65;
  letter-spacing: -0.02em;
  color: var(--fg);
}
.testi-author {
  margin-top: var(--space-5);
  display: flex;
  align-items: center;
  gap: var(--space-4);
}
.testi-avatar {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--accent);
  color: var(--accent-contrast);
  font-weight: 800;
}
.testi-info strong { display: block; font-size: 14px; color: var(--fg); }
.testi-info span { font-size: 12px; color: var(--fg-muted); }

/* ============================================================================
   Lead Intake Form / CTA (design source: index.html lines 426-471)
   Outer section is reactive; the inner card is a fixed brand-green surface
   with a fixed-white form floating on top, same family as .calc-result.
   ========================================================================= */
.cta-section { padding: clamp(88px, 9vw, 132px) 0; background: var(--surface); }
.cta-grid {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-8);
  align-items: center;
  padding: clamp(40px, 6vw, 76px);
  border: 1px solid color-mix(in srgb, var(--on-brand) 10%, transparent);
  border-radius: var(--radius-lg);
  background: var(--surface-brand);
  color: var(--on-brand);
  box-shadow: var(--shadow-lg);
}
.cta-info h2 {
  margin: 0 0 var(--space-5);
  font-family: var(--font-display);
  font-size: clamp(32px, 3.8vw, 46px);
  line-height: 1.1;
  letter-spacing: -0.035em;
  color: var(--on-brand);
}
.cta-info p {
  margin-bottom: var(--space-6);
  color: color-mix(in srgb, var(--on-brand) 72%, transparent);
  font-size: 16px;
  line-height: 1.7;
}
/* .cta-form and its fields are the third fixed-surface family documented at
   the top of this file: a deliberately fixed *white* card floating on top
   of the fixed *green* .cta-grid above, so its own colours stay raw
   (--paper/--ink/--green-050) rather than reactive or brand tokens — it
   must look the same regardless of both the .cta-grid surface and the site
   theme toggle. --line was corrected to --border (I6); nothing else here
   changed. */
.cta-form {
  padding: var(--space-6);
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--paper) 94%, transparent);
  color: var(--ink);
  box-shadow: var(--shadow-lg);
}
.form-group { margin-bottom: var(--space-4); }
.form-group label {
  display: block;
  margin-bottom: var(--space-2);
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
}
.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--green-050);
  font-size: 14px;
  outline: none;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color: var(--accent);
  background: var(--paper);
}
.form-consent {
  display: flex;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
  color: var(--ink-soft);
  font-size: 13px;
}
.form-consent input { margin-top: 2px; }

/* ============================================================================
   Floating social links — Home-specific chrome (not part of the design
   package; rendered by BPOHomepage.cshtml when Site Settings has any social
   URL populated). Reactive.
   ========================================================================= */
.social-float {
  position: fixed;
  right: 24px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1100;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.social-float a {
  width: 44px;
  height: 44px;
  /* Icon-only link: the UA underline has nothing meaningful to underline and
     shows as a stray rule under the glyph. */
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-elevated);
  color: var(--accent);
  font-size: 1.05rem;
  box-shadow: var(--shadow);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast);
}
.social-float a:hover {
  transform: translateY(-2px) scale(1.03);
  background: var(--accent-soft);
  box-shadow: var(--shadow-lg);
}
@media (max-width: 768px) {
  /* Below this width the stacked hero's headline runs edge-to-edge and
     collides with a right:24px vertical rail — the design has no mobile
     treatment for this control, so it is suppressed rather than left
     overlapping unreadable text. */
  .social-float { display: none; }
}

/* ============================================================================
   Reduced motion
   ========================================================================= */
@media (prefers-reduced-motion: reduce) {
  .hero-scroll-cue::before { animation: none; }
  .globe-status-dot,
  .live-usage-pulse { animation: none; }

  /* I5's interactive hero split (home-animations.js) is bound unconditionally
     now, including under reduced motion — hover/focus still change which
     panel is active. Only the 0.85s clip-path/filter/opacity morph is
     removed here so the swap resolves instantly instead of animating;
     the feature itself, and what the user ends up seeing, is unchanged. */
  .hero-panel,
  .hero-panel::before,
  .hero-panel-bpo,
  .hero[data-active="bpo"] .hero-panel-bpo,
  .hero-panel-inner {
    transition: none;
  }
}

/* ============================================================================
   Responsive (design source: index.html "Responsive Adjustments")
   ========================================================================= */
@media (max-width: 980px) {
  .live-usage-grid,
  .calc-box,
  .cta-grid,
  .testi-grid {
    grid-template-columns: 1fr;
  }
  .live-usage-copy { max-width: 720px; }
  .globe-stage { min-height: 560px; }
  .service-grid { grid-template-columns: 1fr; }
  .proof-grid { grid-template-columns: 1fr 1fr; }
  .trust-grid { grid-template-columns: 1fr 1fr; }
  .trust-label { grid-column: 1 / -1; text-align: center; }
  .cta-grid { padding: var(--space-7) var(--space-5); }
}
@media (max-width: 640px) {
  .section { padding: 72px 0; }
  .live-usage-note { align-items: flex-start; border-radius: var(--radius-md); line-height: 1.45; }
  .proof-grid { grid-template-columns: 1fr; }
  .globe-stage { min-height: 450px; border-radius: var(--radius-lg); }
  .globe-canvas { inset: -9% -24% -12% -18%; }
  .globe-hud { right: 18px; bottom: 20px; width: min(260px, calc(100% - 36px)); padding: var(--space-4) var(--space-5) 19px; }
  .globe-coordinate { right: 20px; top: 28px; }
}