/* =============================================================================
   Agentic Labs — Design System / Authoritative Stylesheet
   Single CSS file. No frameworks, no @import. Fonts loaded via <link> in HTML.
   Sections:
     1.  Design tokens (:root)
     2.  Reset
     3.  Base elements
     4.  Accessibility helpers
     5.  Layout: container, section, grid
     6.  Typography utilities (eyebrow, body-lg, caption, mono)
     7.  Buttons
     8.  Navbar + mobile menu
     9.  Hero + stat strip
     10. Provenance tags
     11. Cards (service, case, testimonial, insight)
     11b. Services showcase (home)
     11c. Why Agentic Labs (home)
     12. Tags / pills
     13. Process
     14. Accordion
     15. Forms
     16. Footer
     17. Bands / utilities (cta-band, divider, reveal, badge, filter)
     17b. Help chat widget (floating)
     18. Motion (reveal keyframe helpers)
     19. Responsive breakpoints (991 / 767 / 479)
     20. Reduced motion
   ============================================================================= */

/* -----------------------------------------------------------------------------
   1. DESIGN TOKENS
   ----------------------------------------------------------------------------- */
:root {
  /* Brand palette */
  --al-navy-90: #032D60;   /* dark section bg, footer, headline ink */
  --al-navy-70: #05468F;   /* hover on navy */
  --al-blue-60: #0176D3;   /* brand/primary; white-on-blue = 4.64:1 (AA) */
  --al-blue-70: #0B5CAB;   /* link on tinted bg + button hover darken (~8%) */
  --al-blue-10: #EEF6FD;   /* tint: alt sections, card fills, hover bg */
  --al-ink-900: #16181D;   /* body text */
  --al-ink-500: #5C6470;   /* muted text / captions / labels (5.98:1 on white) */
  --al-border:  #E3E7ED;   /* dividers, borders, inputs */
  --al-surface: #F7F9FB;   /* alt-section bg */
  --al-white:   #FFFFFF;

  /* Category accents */
  --al-purple:      #7526E3; /* Agentforce / AI tags ONLY */
  --al-purple-70:   #5E1CB5; /* darkened purple text for AA on tint */
  --al-purple-tint: #F1E9FC; /* ~10% purple tint bg */
  --al-teal:        #03B4A7; /* Integration tags ONLY (never white text) */
  --al-teal-70:     #0A7268; /* darkened teal text for AA on tint (6.0:1) */
  --al-teal-tint:   #E5F7F5; /* ~10% teal tint bg */
  --al-navy-tint:   #E7EEF6; /* default-tag tint bg */

  /* Feedback */
  --al-success: #2E844A;
  --al-error:   #BA0517;
  --al-error-tint: #FCEBEC;

  /* Radii — sharp; pills are the only fully-rounded shape */
  --al-radius-btn:   4px;
  --al-radius-card:  8px;
  --al-radius-panel: 12px;
  --al-radius-pill:  999px;

  /* Spacing scale (base 4) */
  --al-space-1:  4px;
  --al-space-2:  8px;
  --al-space-3:  12px;
  --al-space-4:  16px;
  --al-space-5:  24px;
  --al-space-6:  32px;
  --al-space-7:  48px;
  --al-space-8:  64px;
  --al-space-9:  96px;
  --al-space-10: 128px;

  /* Layout */
  --al-container-max: 1280px;
  --al-container-pad: 64px;   /* desktop side padding */
  --al-section-pad:   80px;   /* desktop vertical rhythm */
  --al-navbar-h:      68px;   /* sticky navbar height — offsets full-viewport hero */

  /* Type families */
  --al-font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --al-font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Elevation */
  --al-shadow-hover: 0 8px 24px rgba(3, 45, 96, .12);

  /* Motion */
  --al-ease: cubic-bezier(.2, .6, .2, 1);
  --al-t-fast: 150ms;
  --al-t-reveal: 200ms;

  /* Primary-CTA hover: "shine sweep" (see §7 .al-btn--primary + §20 reduced-motion).
     Tunable per theme/variant; --al-btn-sheen kept at .18 so a full-white glint over
     the white label still clears AA (≥4.5:1) on blue-70 at the sweep's peak. */
  --al-t-sheen:           600ms;                       /* single unhurried sweep */
  --al-btn-lift:          -2px;                        /* hover rise toward cursor */
  --al-btn-sheen:         rgba(255, 255, 255, .18);    /* diagonal glint peak */
  --al-btn-shadow-press:  0 2px 8px rgba(3, 45, 96, .16); /* tighter pressed shadow */

  /* Immersive hero (home only) — animated background palette + timing.
     Gradient/scrim stops live here; the canvas particle field mirrors these
     brand hues in js/main.js (#7 initHeroCanvas). */
  --al-hero-navy:         #021B3A;              /* deepest base beneath the mesh */
  --al-hero-bloom-blue:   rgba(1, 118, 211, .40);   /* --al-blue-60 bloom */
  --al-hero-bloom-purple: rgba(117, 38, 227, .32);  /* --al-purple bloom (AI accent) */
  --al-hero-bloom-teal:   rgba(3, 180, 167, .24);   /* --al-teal bloom (integration accent) */
  --al-hero-scrim:        rgba(2, 15, 38, .58);      /* contrast scrim over the field */
  --al-hero-ink:          #D6E4F5;              /* body copy over the dark field (AA) */
  --al-hero-accent:       #8FD0FF;              /* eyebrow / ghost / labels over dark */
  --al-t-hero-drift:      24s;                  /* ambient gradient-mesh drift */

  /* Star field — shared decorative particle canvas injected onto every blue
     surface (js/main.js #7 initStarFields). One CSS opacity dims the INJECTED
     fields uniformly so text over navy stays legible; the home hero canvas is
     exempt (it has its own scrim). Verified worst case: 82%-white body copy
     directly over the brightest node core = 4.84:1 at .45 (passes AA). Lower to
     soften further, raise for more presence. */
  --al-star-field-opacity: .45;
}

/* -----------------------------------------------------------------------------
   2. RESET (modern, minimal)
   ----------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  min-height: 100vh;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img,
picture,
svg,
video,
canvas {
  display: block;
  max-width: 100%;
  height: auto;
}

input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
  background: none;
  border: none;
}

ul,
ol {
  list-style: none;
  padding: 0;
}

a {
  color: inherit;
  text-decoration: none;
}

/* -----------------------------------------------------------------------------
   3. BASE ELEMENTS
   ----------------------------------------------------------------------------- */
body {
  font-family: var(--al-font-sans);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.6;
  color: var(--al-ink-900);
  background-color: var(--al-white);
}

h1, h2, h3, h4, h5, h6 {
  color: var(--al-navy-90);
  font-family: var(--al-font-sans);
  line-height: 1.15;
  text-wrap: balance;
}

/* Type scale — desktop */
h1 { font-size: 56px; line-height: 1.1;  font-weight: 700; letter-spacing: -0.02em; }
h2 { font-size: 40px; line-height: 1.15; font-weight: 700; letter-spacing: -0.015em; }
h3 { font-size: 26px; line-height: 1.25; font-weight: 600; letter-spacing: -0.01em; }
h4 { font-size: 20px; line-height: 1.35; font-weight: 600; }

p { text-wrap: pretty; }

/* Body links: on white --al-blue-60 passes AA (4.64:1). */
a:not([class]) {
  color: var(--al-blue-60);
  text-decoration: underline;
  text-underline-offset: 2px;
}

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

strong, b { font-weight: 600; }

code, pre, kbd, samp {
  font-family: var(--al-font-mono);
  font-size: 0.9em;
}

hr {
  border: 0;
  border-top: 1px solid var(--al-border);
}

/* Visible focus — 2px outline offset 2px in brand blue */
:focus-visible {
  outline: 2px solid var(--al-blue-60);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Suppress default outline where :focus-visible is supported */
:focus:not(:focus-visible) {
  outline: none;
}

::selection {
  background: var(--al-blue-10);
  color: var(--al-navy-90);
}

/* -----------------------------------------------------------------------------
   4. ACCESSIBILITY HELPERS
   ----------------------------------------------------------------------------- */
.al-sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.al-skip-link {
  position: absolute;
  top: -100px;
  left: var(--al-space-4);
  z-index: 1000;
  padding: var(--al-space-3) var(--al-space-4);
  background: var(--al-blue-60);
  color: var(--al-white);
  font-family: var(--al-font-mono);
  font-size: 13px;
  font-weight: 500;
  border-radius: var(--al-radius-btn);
  transition: top var(--al-t-fast) var(--al-ease);
}

.al-skip-link:focus {
  top: var(--al-space-4);
  outline: 2px solid var(--al-white);
  outline-offset: 2px;
}

/* -----------------------------------------------------------------------------
   5. LAYOUT — container, section, grid
   ----------------------------------------------------------------------------- */
.al-container {
  width: 100%;
  max-width: var(--al-container-max);
  margin-inline: auto;
  padding-inline: var(--al-container-pad);
}

.al-section {
  padding-block: var(--al-section-pad);
}

.al-section--tint    { background-color: var(--al-blue-10); }
.al-section--surface { background-color: var(--al-surface); }

.al-section--navy {
  background-color: var(--al-navy-90);
  color: rgba(255, 255, 255, .82);
}
.al-section--navy h1,
.al-section--navy h2,
.al-section--navy h3,
.al-section--navy h4 { color: var(--al-white); }
.al-section--navy .al-eyebrow { color: #8FD0FF; }
.al-section--navy a:not([class]) { color: #8FD0FF; }

/* 12-col responsive grid helpers */
.al-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--al-space-6);
}

.al-grid--2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--al-space-6); }
.al-grid--3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--al-space-6); }
.al-grid--4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--al-space-6); }

/* -----------------------------------------------------------------------------
   6. TYPOGRAPHY UTILITIES
   ----------------------------------------------------------------------------- */
.al-eyebrow {
  display: inline-block;
  font-family: var(--al-font-sans);
  font-size: 20px;
  line-height: 1.4;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--al-blue-70);
  margin-bottom: var(--al-space-3);
}

.al-mono {
  font-family: var(--al-font-mono);
  font-weight: 500;
}

.al-body-lg {
  font-size: 18px;
  line-height: 1.6;
  font-weight: 400;
}

.al-caption {
  font-size: 14px;
  line-height: 1.5;
  font-weight: 400;
  color: var(--al-ink-500);
}

/* -----------------------------------------------------------------------------
   7. BUTTONS
   ----------------------------------------------------------------------------- */
.al-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--al-space-2);
  padding: 12px 20px;
  font-family: var(--al-font-sans);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  border: 1px solid transparent;
  border-radius: var(--al-radius-btn);
  cursor: pointer;
  transition: background-color var(--al-t-fast) var(--al-ease),
              border-color var(--al-t-fast) var(--al-ease),
              color var(--al-t-fast) var(--al-ease),
              box-shadow var(--al-t-fast) var(--al-ease),
              transform var(--al-t-fast) var(--al-ease);
}

.al-btn:focus-visible {
  outline: 2px solid var(--al-blue-60);
  outline-offset: 2px;
}

/* Primary CTA — "precision lift + sheen sweep" hover (see §20 for reduced-motion).
   Scoped to --primary so ghost/secondary variants never inherit the effect.
   position/overflow host the sheen mask; isolation:isolate gives the button its
   own stacking context so the z-index:-1 sheen paints ABOVE the fill but BELOW the
   label (which is inline text) — no wrapper span needed. The outward lift shadow is
   painted outside the border box and is NOT clipped by the element's own overflow. */
.al-btn--primary {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background-color: var(--al-blue-60);
  color: var(--al-white);
  border-color: var(--al-blue-60);
}
/* Sheen: a soft diagonal white glint parked off the left edge. Only transform
   animates (compositor-friendly); the base 0s transition snaps the reset while
   the band is off-screen, so hover-out leaves no reverse glint — a single sweep. */
.al-btn--primary::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(100deg,
              transparent 30%,
              var(--al-btn-sheen) 50%,
              transparent 70%);
  transform: translateX(-120%);
  transition: transform 0s;
}
.al-btn--primary:hover {
  background-color: var(--al-blue-70);
  border-color: var(--al-blue-70);
  transform: translateY(var(--al-btn-lift));
  box-shadow: var(--al-shadow-hover);
}
.al-btn--primary:hover::before {
  transform: translateX(120%);
  transition: transform var(--al-t-sheen) var(--al-ease);
}
/* Press: settle flat with a tighter shadow — tactile, not bouncy. */
.al-btn--primary:active {
  transform: translateY(0);
  box-shadow: var(--al-btn-shadow-press);
}

.al-btn--secondary {
  background-color: transparent;
  color: var(--al-ink-900);
  border-color: var(--al-ink-900);
}
.al-btn--secondary:hover {
  background-color: var(--al-blue-10);
  border-color: var(--al-navy-90);
  color: var(--al-navy-90);
}

.al-btn--ghost {
  background-color: transparent;
  color: var(--al-blue-70);
  border-color: transparent;
  padding-inline: 4px;
}
.al-btn--ghost:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.al-btn--lg {
  padding: 16px 28px;
  font-size: 18px;
}

/* Buttons inside navy sections keep contrast */
.al-section--navy .al-btn--secondary,
.al-footer .al-btn--secondary {
  color: var(--al-white);
  border-color: rgba(255, 255, 255, .55);
}
.al-section--navy .al-btn--secondary:hover,
.al-footer .al-btn--secondary:hover {
  background-color: rgba(255, 255, 255, .08);
  border-color: var(--al-white);
  color: var(--al-white);
}
.al-section--navy .al-btn--ghost,
.al-footer .al-btn--ghost { color: #8FD0FF; }

/* -----------------------------------------------------------------------------
   8. NAVBAR + MOBILE MENU
   ----------------------------------------------------------------------------- */
.al-navbar {
  position: sticky;
  top: 0;
  z-index: 100;
  background-color: rgba(255, 255, 255, .92);
  backdrop-filter: saturate(1.4) blur(8px);
  -webkit-backdrop-filter: saturate(1.4) blur(8px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--al-t-fast) var(--al-ease),
              box-shadow var(--al-t-fast) var(--al-ease);
}

.al-navbar.is-scrolled {
  border-bottom-color: var(--al-border);
  box-shadow: 0 1px 0 rgba(3, 45, 96, .04);
}

/* -----------------------------------------------------------------------------
   Navbar — "on hero" variant (home page). At rest the bar matches the animated
   banner (dark navy, frosted); on hover the whole bar flips to solid white.
   Logo, links and hamburger swap between light (rest) and dark (hover).
   ----------------------------------------------------------------------------- */
.al-navbar--on-hero {
  background-color: rgba(2, 27, 58, 0.82); /* --al-hero-navy @ 82% — blends with the banner */
  transition: background-color var(--al-t-fast) var(--al-ease),
              border-color var(--al-t-fast) var(--al-ease),
              box-shadow var(--al-t-fast) var(--al-ease);
}

/* Rest state: light foreground on the dark bar */
.al-navbar--on-hero .al-navbar__link            { color: rgba(255, 255, 255, 0.86); }
.al-navbar--on-hero .al-navbar__link:hover,
.al-navbar--on-hero .al-navbar__link.is-active  { color: #FFFFFF; }
.al-navbar--on-hero .al-navbar__link.is-active::after { background-color: var(--al-hero-accent); }
.al-navbar--on-hero .al-navbar__toggle span     { background-color: #FFFFFF; }
.al-navbar--on-hero .al-navbar__logo-img--dark  { display: none; }
.al-navbar--on-hero .al-navbar__logo-img--light { display: block; }

/* Hover: the bar turns solid white; foreground flips to dark (base look) */
.al-navbar--on-hero:hover {
  background-color: var(--al-white);
  border-bottom-color: var(--al-border);
  box-shadow: var(--al-shadow-hover);
}
.al-navbar--on-hero:hover .al-navbar__link                 { color: var(--al-ink-900); }
.al-navbar--on-hero:hover .al-navbar__link:hover,
.al-navbar--on-hero:hover .al-navbar__link.is-active       { color: var(--al-blue-70); }
.al-navbar--on-hero:hover .al-navbar__link.is-active::after { background-color: var(--al-blue-60); }
.al-navbar--on-hero:hover .al-navbar__toggle span          { background-color: var(--al-ink-900); }
.al-navbar--on-hero:hover .al-navbar__logo-img--light      { display: none; }
.al-navbar--on-hero:hover .al-navbar__logo-img--dark       { display: block; }

/* Mobile overlay menu keeps its white background, so its links stay dark even
   in on-hero mode (the light-text rule above must not apply inside it). */
.al-navbar--on-hero .al-mobile-menu .al-navbar__link           { color: var(--al-ink-900); }
.al-navbar--on-hero .al-mobile-menu .al-navbar__link.is-active { color: var(--al-blue-70); }

.al-navbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--al-space-6);
  width: 100%;
  max-width: var(--al-container-max);
  margin-inline: auto;
  padding: 16px var(--al-container-pad);
  min-height: 68px;
}

.al-navbar__logo {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
}
.al-navbar__logo img,
.al-navbar__logo svg {
  height: 28px;
  width: auto;
}

/* Dual logo: dark on white bar by default; on-hero rules flip to light. */
.al-navbar__logo-img--light { display: none; }
.al-navbar__logo-img--dark  { display: block; }

.al-navbar__links {
  display: flex;
  align-items: center;
  gap: var(--al-space-6);
  margin: 0;
}

.al-navbar__link {
  position: relative;
  font-size: 15px;
  font-weight: 500;
  color: var(--al-ink-900);
  padding: 6px 0;
  transition: color var(--al-t-fast) var(--al-ease);
}
.al-navbar__link:hover { color: var(--al-blue-70); }

.al-navbar__link.is-active { color: var(--al-blue-70); }
.al-navbar__link.is-active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 2px;
  background-color: var(--al-blue-60);
  border-radius: var(--al-radius-pill);
}

.al-navbar__cta {
  display: inline-flex;
  flex: 0 0 auto;
}

/* Hamburger — hidden on desktop, shown <=991px */
.al-navbar__toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 10px;
  border-radius: var(--al-radius-btn);
  flex: 0 0 auto;
}
.al-navbar__toggle span {
  display: block;
  width: 100%;
  height: 2px;
  background-color: var(--al-ink-900);
  border-radius: var(--al-radius-pill);
  transition: transform var(--al-t-fast) var(--al-ease),
              opacity var(--al-t-fast) var(--al-ease);
}
.al-navbar__toggle[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.al-navbar__toggle[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}
.al-navbar__toggle[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* Mobile full-screen overlay menu — hidden on desktop */
.al-mobile-menu {
  display: none;
  /* Positioned by explicit height, NOT bottom:0 — the navbar's backdrop-filter
     makes it the containing block for this fixed child, so a `bottom` would
     resolve to the 68px navbar box and collapse the panel. Height off the
     viewport keeps it full-screen regardless. */
  position: fixed;
  top: var(--al-navbar-h);
  left: 0;
  right: 0;
  height: calc(100vh - var(--al-navbar-h));
  height: calc(100dvh - var(--al-navbar-h));
  z-index: 99;
  background-color: var(--al-white);
  padding: var(--al-space-6) var(--al-space-5) var(--al-space-8);
  overflow-y: auto;
  flex-direction: column;
  gap: var(--al-space-2);
}
.al-mobile-menu.is-open { display: flex; }
/* Body scroll lock while the mobile menu is open (toggled by js/main.js). */
body.al-scroll-lock { overflow: hidden; }

.al-mobile-menu .al-navbar__link {
  font-size: 20px;
  font-weight: 600;
  padding: var(--al-space-4) 0;
  border-bottom: 1px solid var(--al-border);
}
.al-mobile-menu .al-navbar__link.is-active::after { display: none; }
.al-mobile-menu .al-btn {
  margin-top: var(--al-space-5);
  width: 100%;
}

/* -----------------------------------------------------------------------------
   9. HERO + STAT STRIP
   ----------------------------------------------------------------------------- */
.al-hero {
  padding-block: var(--al-section-pad);
}

.al-hero .al-container {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: var(--al-space-8);
  align-items: center;
}

.al-hero__content { max-width: 40ch; }

.al-hero__title {
  font-size: 56px;
  line-height: 1.1;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--al-navy-90);
  margin-bottom: var(--al-space-5);
}

.al-hero__sub {
  font-size: 18px;
  line-height: 1.6;
  color: var(--al-ink-900);
  margin-bottom: var(--al-space-6);
  max-width: 52ch;
}

.al-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--al-space-3);
  align-items: center;
}

.al-hero__media {
  width: 100%;
}
.al-hero__media img,
.al-hero__media svg {
  width: 100%;
  height: auto;
  border-radius: var(--al-radius-panel);
}

/* Stat strip */
.al-stat-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--al-space-6);
  margin-top: var(--al-space-8);
  padding-top: var(--al-space-7);
  border-top: 1px solid var(--al-border);
}

.al-stat-strip--3 { grid-template-columns: repeat(3, 1fr); }

.al-stat { display: flex; flex-direction: column; gap: var(--al-space-1); }

.al-stat__num {
  font-family: var(--al-font-sans);
  font-size: 30px;
  line-height: 1.1;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--al-navy-90);
  text-transform: uppercase;
}

.al-stat__label {
  font-family: var(--al-font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--al-ink-500);
}

.al-section--navy .al-stat__num   { color: var(--al-white); }
.al-section--navy .al-stat__label { color: #8FD0FF; }
.al-section--navy .al-stat-strip  { border-top-color: rgba(255, 255, 255, .18); }

/* ---- 9a. IMMERSIVE HERO (home page only) ---------------------------------
   Scoped entirely under .al-hero--immersive so the shared base .al-hero* rules
   (reused by services/approach/404/insights sub-elements) stay untouched.
   Layer order (own stacking context via `isolation`):
     ::before  gradient-mesh  (z 0)
     canvas    particle field (z 1)  — painted by initHeroCanvas()
     scrim     contrast wash  (z 2)
     content   text + stats   (z 3)
   The base gradient + scrim render a complete, legible hero even if JS/canvas
   never runs (progressive enhancement). */
.al-hero--immersive {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  /* Fill the viewport minus the sticky navbar; svh avoids mobile-chrome clip. */
  min-height: calc(100vh - var(--al-navbar-h));
  min-height: calc(100svh - var(--al-navbar-h));
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* Viewport-height-responsive spacing so the headline + stats always fit inside
     one screen (minus the navbar); shrinks on shorter viewports, capped on tall. */
  gap: clamp(20px, 4vh, 48px);
  padding-block: clamp(28px, 6vh, 80px) clamp(24px, 5vh, 56px);
  background-color: var(--al-hero-navy);
  color: var(--al-white);
}

/* Neutralise the shared 2-column hero grid — immersive stacks in one column. */
.al-hero--immersive .al-container { display: block; }

/* Drifting brand-gradient mesh. Oversized + insets so transform never bares an
   edge. Auto-frozen under prefers-reduced-motion (see §20). */
.al-hero--immersive::before {
  content: "";
  position: absolute;
  inset: -20%;
  z-index: 0;
  background:
    radial-gradient(38% 44% at 18% 22%, var(--al-hero-bloom-blue),   transparent 62%),
    radial-gradient(34% 40% at 82% 26%, var(--al-hero-bloom-purple), transparent 60%),
    radial-gradient(48% 52% at 66% 90%, var(--al-hero-bloom-teal),   transparent 64%);
  animation: al-hero-drift var(--al-t-hero-drift) var(--al-ease) infinite alternate;
  will-change: transform;
}

@keyframes al-hero-drift {
  from { transform: translate3d(-2%, -1%, 0) scale(1.02); }
  to   { transform: translate3d( 2%,  2%, 0) scale(1.08); }
}

/* Decorative particle-network canvas — aria-hidden, non-focusable. */
.al-hero__canvas {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
}

/* Contrast scrim: stronger toward the copy (left) and the stat strip (bottom),
   clearing on the right so the network stays visible. Guarantees AA text over
   every animation frame. */
.al-hero__scrim {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(100deg, var(--al-hero-scrim) 0%, rgba(2, 15, 38, .32) 52%, rgba(2, 15, 38, 0) 84%),
    linear-gradient(180deg, rgba(2, 15, 38, 0) 44%, rgba(2, 15, 38, .46) 100%);
}

/* Content layer sits above the field. */
.al-hero__inner,
.al-hero__foot {
  position: relative;
  z-index: 3;
  width: 100%;
}

/* Text theming over the dark field (light tokens; contrast verified). */
.al-hero--immersive .al-hero__content { max-width: 60ch; }
.al-hero--immersive .al-eyebrow       { color: var(--al-hero-accent); }
.al-hero--immersive .al-hero__title {
  color: var(--al-white);
  font-size: clamp(32px, 5.8vw, 64px);
}
.al-hero--immersive .al-hero__sub {
  color: var(--al-hero-ink);
  max-width: 56ch;
}

/* Secondary CTA + focus rings need light values on the dark field. */
.al-hero--immersive .al-btn--ghost         { color: var(--al-hero-accent); }
.al-hero--immersive .al-btn--ghost:hover   { color: #BCE2FF; }
.al-hero--immersive .al-btn:focus-visible,
.al-hero--immersive a:focus-visible        { outline-color: #BCE2FF; }

/* Stat strip inverted for the dark field (mirrors the .al-section--navy pattern). */
.al-hero--immersive .al-stat-strip  { margin-top: 0; padding-top: clamp(18px, 3vh, 40px); border-top-color: rgba(255, 255, 255, .18); }
.al-hero--immersive .al-stat__num   { color: var(--al-white); }
.al-hero--immersive .al-stat__label { color: var(--al-hero-accent); }

/* ---- 9a-i. PER-PAGE HERO ACCENTS -------------------------------------------
   Every immersive banner shares the identity in §9a; each page-specific modifier
   only re-weights the three brand blooms consumed by .al-hero--immersive::before,
   so one banner leans blue, another teal, another purple. Nothing else changes —
   navy base, particle canvas, scrim, type system and navbar stay shared. The
   matching particle-hue bias is opt-in per page via [data-hero-accent] (read by
   createStarField() in js/main.js); the CSS reweight below is the primary
   differentiator and stands alone if JS/canvas never runs. */
.al-hero--services {                    /* blue-dominant */
  --al-hero-bloom-blue:   rgba(1, 118, 211, .48);
  --al-hero-bloom-purple: rgba(117, 38, 227, .22);
  --al-hero-bloom-teal:   rgba(3, 180, 167, .16);
}
.al-hero--work {                        /* teal-dominant */
  --al-hero-bloom-blue:   rgba(1, 118, 211, .28);
  --al-hero-bloom-purple: rgba(117, 38, 227, .16);
  --al-hero-bloom-teal:   rgba(3, 180, 167, .42);
}
.al-hero--approach {                    /* purple-dominant */
  --al-hero-bloom-blue:   rgba(1, 118, 211, .24);
  --al-hero-bloom-purple: rgba(117, 38, 227, .46);
  --al-hero-bloom-teal:   rgba(3, 180, 167, .18);
}
.al-hero--contact {                     /* balanced blue + teal */
  --al-hero-bloom-blue:   rgba(1, 118, 211, .40);
  --al-hero-bloom-purple: rgba(117, 38, 227, .14);
  --al-hero-bloom-teal:   rgba(3, 180, 167, .36);
}
.al-hero--insights {                    /* editorial / mono — blooms dialed down */
  --al-hero-bloom-blue:   rgba(1, 118, 211, .22);
  --al-hero-bloom-purple: rgba(117, 38, 227, .12);
  --al-hero-bloom-teal:   rgba(3, 180, 167, .12);
}

/* Insights dateline chip — a small mono tag reinforcing the editorial voice. */
.al-hero__chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: var(--al-space-4);
  padding: 5px 12px;
  border: 1px solid rgba(143, 208, 255, .32);
  border-radius: var(--al-radius-pill);
  background: rgba(2, 15, 38, .32);
  font-family: var(--al-font-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--al-hero-accent);
}

/* ---- 9b. STAR FIELD (shared decorative particle field) ---------------------
   initStarFields() (js/main.js #7) injects a <canvas.al-star-field> as the first
   child of every non-hero blue surface. These rules host that canvas BEHIND the
   surface's content WITHOUT touching any content markup:
     - isolation:isolate turns each host into its own stacking context, so the
       canvas's negative z-index can't slip behind the host's navy background;
     - the canvas therefore paints in the "negative-z" slot — above the host
       background, below the in-flow content — so no per-wrapper z-index is
       needed (block copy in navy sections/footer AND flexed CTA-band content
       both paint above it);
     - overflow:hidden clips the field to the surface, incl. the CTA band's
       rounded corners; pointer-events:none keeps every control clickable.
   The home hero keeps its own .al-hero__canvas + scrim layering (§9a) and is NOT
   dimmed here, so it looks and behaves exactly as before. */
.al-section--navy,
.al-cta-band {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.al-star-field {
  position: absolute;
  inset: 0;
  z-index: -1;               /* behind content, above the host's navy background */
  width: 100%;
  height: 100%;
  pointer-events: none;      /* decorative: never intercept clicks or focus */
  background: transparent;   /* each surface's own navy shows through */
  opacity: var(--al-star-field-opacity);
}

/* Pages that opt out of the particle field (<body data-no-star-field>, e.g. case
   studies) get no injected canvas, so the CTA band would fall back to flat navy.
   Give it a static brand-bloom gradient instead — echoing the immersive hero's
   mesh (§9a) — so the surface still reads as a gradient, just without animation. */
[data-no-star-field] .al-cta-band {
  background-image:
    radial-gradient(58% 130% at 14% 16%, var(--al-hero-bloom-blue),   transparent 60%),
    radial-gradient(52% 130% at 88% 84%, var(--al-hero-bloom-purple), transparent 60%),
    radial-gradient(64% 150% at 72% 8%,  var(--al-hero-bloom-teal),   transparent 62%);
}

/* Same treatment for full-width navy sections when the particle field is off:
   a static brand-bloom gradient over the navy base (blooms tuned for a wide,
   tall section rather than the compact CTA band). Sits above the section's own
   navy background-color, below content — no markup change needed. */
[data-no-star-field] .al-section--navy {
  background-image:
    radial-gradient(40% 82% at 12% 18%, var(--al-hero-bloom-blue),   transparent 62%),
    radial-gradient(38% 78% at 90% 30%, var(--al-hero-bloom-purple), transparent 60%),
    radial-gradient(52% 96% at 72% 104%, var(--al-hero-bloom-teal),  transparent 64%);
}

/* -----------------------------------------------------------------------------
   10. PROVENANCE TAGS
   ----------------------------------------------------------------------------- */
.al-provenance {
  display: inline-flex;
  align-items: center;
  gap: var(--al-space-2);
  font-family: var(--al-font-mono);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--al-navy-90);
  background-color: var(--al-blue-10);
  border: 1px solid #CBE3F7;
  padding: 8px 14px;
  border-radius: var(--al-radius-pill);
}
.al-provenance::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: var(--al-radius-pill);
  background-color: var(--al-blue-60);
  flex: 0 0 auto;
}

.al-provenance--sm {
  font-size: 11px;
  padding: 4px 10px;
  color: var(--al-ink-500);
  background-color: var(--al-surface);
  border-color: var(--al-border);
}
.al-provenance--sm::before {
  width: 6px;
  height: 6px;
  background-color: var(--al-ink-500);
}

.al-section--navy .al-provenance {
  color: var(--al-white);
  background-color: rgba(255, 255, 255, .08);
  border-color: rgba(255, 255, 255, .22);
}

/* -----------------------------------------------------------------------------
   11. CARDS
   ----------------------------------------------------------------------------- */
.al-card {
  display: flex;
  flex-direction: column;
  background-color: var(--al-white);
  border: 1px solid var(--al-border);
  border-radius: var(--al-radius-card);
  padding: var(--al-space-6);
  transition: box-shadow var(--al-t-fast) var(--al-ease),
              transform var(--al-t-fast) var(--al-ease),
              border-color var(--al-t-fast) var(--al-ease);
}

/* Resting: border only, no shadow. Hover: lift + shadow. */
.al-card:hover {
  box-shadow: var(--al-shadow-hover);
  transform: translateY(-2px);
  border-color: #D3DDE9;
}

/* On tinted / surface sections keep cards on white so borders read */
.al-section--tint .al-card,
.al-section--surface .al-card {
  background-color: var(--al-white);
}

.al-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--al-radius-btn);
  background-color: var(--al-blue-10);
  color: var(--al-blue-70);
  margin-bottom: var(--al-space-4);
}
.al-card__icon svg { width: 22px; height: 22px; }

.al-card__eyebrow {
  font-family: var(--al-font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--al-blue-70);
  margin-bottom: var(--al-space-2);
}

.al-card__title {
  font-size: 20px;
  line-height: 1.35;
  font-weight: 600;
  color: var(--al-navy-90);
  margin-bottom: var(--al-space-2);
}

.al-card__body {
  font-size: 16px;
  line-height: 1.6;
  color: var(--al-ink-900);
  margin-bottom: var(--al-space-4);
}

.al-card__meta {
  font-size: 14px;
  color: var(--al-ink-500);
  margin-bottom: var(--al-space-2);
}

.al-card__stat {
  font-size: 32px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--al-navy-90);
  line-height: 1.1;
}

.al-card__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: auto;
  font-weight: 600;
  font-size: 15px;
  color: var(--al-blue-70);
  transition: gap var(--al-t-fast) var(--al-ease), color var(--al-t-fast) var(--al-ease);
}
.al-card__link:hover { gap: 10px; color: var(--al-blue-60); }
.al-card__link svg { width: 16px; height: 16px; }

.al-card__media {
  margin: calc(-1 * var(--al-space-6)) calc(-1 * var(--al-space-6)) var(--al-space-5);
  border-radius: var(--al-radius-card) var(--al-radius-card) 0 0;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background-color: var(--al-surface);
}
.al-card__media img,
.al-card__media svg {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Service card — accent top rule on hover */
.al-card--service .al-card__title { margin-top: 0; }

/* -----------------------------------------------------------------------------
   11b. SERVICES SHOWCASE (home)
   Single-row columns on a tinted field; capability points as chips.
   ----------------------------------------------------------------------------- */
.al-section--services {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background:
    radial-gradient(ellipse 70% 55% at 12% 0%, rgba(1, 118, 211, .16), transparent 60%),
    radial-gradient(ellipse 55% 45% at 90% 100%, rgba(3, 45, 96, .12), transparent 55%),
    linear-gradient(180deg, #D5E6F4 0%, #C9DCEF 45%, #DCE8F4 100%);
}

/* ---- Intro ---- */
.al-services__intro {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) auto;
  gap: var(--al-space-6);
  align-items: end;
  margin-bottom: var(--al-space-8);
}

.al-services__intro .al-eyebrow {
  color: var(--al-blue-70);
}

.al-services__intro h2 {
  color: var(--al-navy-90);
  margin-top: var(--al-space-2);
  max-width: 18ch;
  letter-spacing: -0.025em;
}

.al-services__lede {
  font-size: 17px;
  line-height: 1.6;
  color: var(--al-ink-500);
  max-width: 42ch;
  margin: 0;
  padding-bottom: 4px;
}

.al-services__intro .al-btn {
  justify-self: end;
  align-self: end;
}

/* ---- Four services in one row (navy panels) ---- */
.al-services__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--al-space-4);
}

.al-service {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 100%;
  padding: var(--al-space-6) var(--al-space-5);
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: var(--al-radius-panel);
  background: var(--al-navy-90);
  transition: background-color 280ms var(--al-ease);
}

.al-service:hover,
.al-service:focus-within {
  background: #021B3A;
  outline: none;
}

.al-service__eyebrow {
  display: block;
  font-family: var(--al-font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #8FD0FF;
  margin-bottom: var(--al-space-2);
  margin-top: var(--al-space-2);
}

.al-service__title {
  font-size: 20px;
  line-height: 1.25;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--al-white);
  margin-bottom: var(--al-space-3);
}

.al-service__body {
  font-size: 14px;
  line-height: 1.55;
  color: rgba(255, 255, 255, .78);
  margin-bottom: var(--al-space-5);
}

.al-service__list {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-top: auto;
  padding-top: var(--al-space-4);
  border-top: 1px solid rgba(255, 255, 255, .22);
}

.al-service__list li {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 10px 14px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.35;
  text-align: center;
  color: var(--al-white);
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: var(--al-radius-btn);
}

.al-service__list li::before {
  content: none;
}

.al-service__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: auto;
  font-weight: 600;
  font-size: 15px;
  color: var(--al-blue-70);
  transition: gap var(--al-t-fast) var(--al-ease), color var(--al-t-fast) var(--al-ease);
}

.al-service__link:hover {
  gap: 10px;
  color: var(--al-blue-60);
}

/* Foot strip (kept for other pages / future use) */
.al-services__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--al-space-6);
  flex-wrap: wrap;
  margin-top: var(--al-space-7);
  padding: var(--al-space-5) var(--al-space-6);
  border-radius: var(--al-radius-panel);
  border: 1px solid var(--al-border);
  background: var(--al-blue-10);
}

.al-services__foot-copy {
  max-width: 64ch;
}

.al-services__foot-label {
  font-family: var(--al-font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--al-blue-70);
  margin-bottom: var(--al-space-2);
}

.al-services__foot-copy p:last-child {
  font-size: 15px;
  line-height: 1.6;
  color: var(--al-ink-900);
}

/* Staggered reveal across the row */
.al-services__grid .al-reveal:nth-child(1) { transition-delay: 0ms; }
.al-services__grid .al-reveal:nth-child(2) { transition-delay: 50ms; }
.al-services__grid .al-reveal:nth-child(3) { transition-delay: 100ms; }
.al-services__grid .al-reveal:nth-child(4) { transition-delay: 150ms; }

/* -----------------------------------------------------------------------------
   11c. WHY AGENTIC LABS (home differentiators)
   Two-column intro + abstract CSS diagram; asymmetric featured middle card.
   Static navy — no star-field animation.
   ----------------------------------------------------------------------------- */
.al-section--why {
  position: relative;
  overflow: hidden;
  background-color: #021B3A;
  color: rgba(255, 255, 255, .86);
}

.al-why__atmosphere {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(ellipse 60% 50% at 8% 12%, rgba(1, 118, 211, .28), transparent 58%),
    radial-gradient(ellipse 50% 45% at 92% 18%, rgba(143, 208, 255, .12), transparent 55%),
    radial-gradient(ellipse 55% 50% at 70% 95%, rgba(3, 180, 167, .14), transparent 55%),
    linear-gradient(180deg, #021B3A 0%, var(--al-navy-90) 48%, #032850 100%);
}

.al-why__dot-grid {
  position: absolute;
  inset: 0;
  opacity: .35;
  background-image: radial-gradient(rgba(143, 208, 255, .22) 1px, transparent 1px);
  background-size: 22px 22px;
  mask-image: radial-gradient(ellipse 75% 65% at 50% 35%, #000 10%, transparent 72%);
  -webkit-mask-image: radial-gradient(ellipse 75% 65% at 50% 35%, #000 10%, transparent 72%);
}

.al-section--why > .al-container {
  position: relative;
  z-index: 1;
}

.al-section--why .al-eyebrow {
  color: #8FD0FF;
  margin-bottom: var(--al-space-3);
}

/* ---- Intro: copy + abstract visual ---- */
.al-why__intro {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(260px, .85fr);
  gap: var(--al-space-6) var(--al-space-7);
  align-items: center;
  margin-bottom: var(--al-space-6);
}

.al-why__intro-copy {
  max-width: 38rem;
}

.al-why__headline {
  color: var(--al-white);
  font-size: clamp(28px, 3.4vw, 40px);
  line-height: 1.18;
  font-weight: 700;
  letter-spacing: -0.02em;
  max-width: 16ch;
}

.al-why__em--ai {
  background: linear-gradient(120deg, #8FD0FF 0%, #5EB8F5 55%, #03B4A7 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.al-why__em--judgment {
  display: inline;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  background-image: linear-gradient(90deg, rgba(143, 208, 255, .55), rgba(3, 180, 167, .4));
  background-repeat: no-repeat;
  background-position: 0 92%;
  background-size: 100% 2px;
}

.al-why__lede {
  margin-top: var(--al-space-4);
  font-size: 16px;
  line-height: 1.6;
  color: rgba(214, 228, 245, .88);
  max-width: 46ch;
}

/* Abstract HTML/CSS visual — AI draft → human review */
.al-why__visual {
  display: flex;
  justify-content: flex-end;
}

.al-why__diagram {
  position: relative;
  width: 100%;
  max-width: 360px;
  padding: var(--al-space-5);
  border-radius: var(--al-radius-panel);
  border: 1px solid rgba(143, 208, 255, .18);
  background: rgba(255, 255, 255, .04);
  box-shadow:
    0 0 0 1px rgba(1, 118, 211, .08),
    0 18px 40px rgba(0, 0, 0, .28);
  overflow: hidden;
}

.al-why__diagram-rail {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.al-why__node {
  position: absolute;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #8FD0FF;
  box-shadow: 0 0 12px rgba(143, 208, 255, .55);
  opacity: .7;
}

.al-why__node--a { top: 18%; left: 12%; }
.al-why__node--b { top: 42%; right: 14%; background: #03B4A7; box-shadow: 0 0 12px rgba(3, 180, 167, .45); }
.al-why__node--c { bottom: 16%; left: 28%; width: 5px; height: 5px; opacity: .45; }

.al-why__link {
  position: absolute;
  top: 22%;
  left: 14%;
  width: 62%;
  height: 1px;
  background: linear-gradient(90deg, rgba(143, 208, 255, .35), transparent);
  transform: rotate(12deg);
  transform-origin: left center;
}

.al-why__diagram-panels {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: var(--al-space-3);
  align-items: stretch;
}

.al-why__pane {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: var(--al-space-4);
  border-radius: var(--al-radius-card);
  border: 1px solid rgba(255, 255, 255, .12);
  background: rgba(2, 27, 58, .45);
  min-height: 132px;
}

.al-why__pane--ai {
  border-color: rgba(143, 208, 255, .22);
  box-shadow: inset 0 0 24px rgba(1, 118, 211, .12);
}

.al-why__pane--human {
  border-color: rgba(3, 180, 167, .28);
  box-shadow: inset 0 0 24px rgba(3, 180, 167, .1);
}

.al-why__pane-label {
  font-family: var(--al-font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #8FD0FF;
  margin-bottom: 2px;
}

.al-why__pane--human .al-why__pane-label {
  color: #7FE0D8;
}

.al-why__code-line {
  display: block;
  height: 6px;
  border-radius: 2px;
  background: linear-gradient(90deg, rgba(143, 208, 255, .35), rgba(143, 208, 255, .08));
  width: 100%;
}

.al-why__code-line--short { width: 58%; }
.al-why__code-line--mid { width: 78%; }
.al-why__code-line--ok {
  background: linear-gradient(90deg, rgba(3, 180, 167, .45), rgba(3, 180, 167, .1));
}

.al-why__review {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 2px 0 4px;
  font-size: 12px;
  font-weight: 600;
  color: #7FE0D8;
}

.al-why__review svg {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
}

.al-why__pane-bridge {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding-inline: 2px;
  align-self: center;
}

.al-why__bridge-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #8FD0FF;
  opacity: .8;
}

.al-why__bridge-line {
  width: 22px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, #8FD0FF, #03B4A7);
  opacity: .75;
}

/* ---- Cards ---- */
.al-why__grid {
  display: grid;
  grid-template-columns: 1fr 1.12fr 1fr;
  gap: var(--al-space-4);
  align-items: start;
}

.al-why__card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: var(--al-space-5);
  background: rgba(255, 255, 255, .045);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: var(--al-radius-panel);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .18);
  transition:
    transform 250ms var(--al-ease),
    border-color 250ms var(--al-ease),
    box-shadow 250ms var(--al-ease),
    background-color 250ms var(--al-ease);
}

.al-why__card:hover {
  transform: translateY(-5px);
  border-color: rgba(143, 208, 255, .38);
  box-shadow:
    0 16px 36px rgba(0, 0, 0, .28),
    0 0 28px rgba(1, 118, 211, .16);
  background: rgba(255, 255, 255, .07);
}

.al-why__card--featured {
  padding: var(--al-space-6) var(--al-space-5);
  margin-top: -10px;
  background:
    linear-gradient(165deg, rgba(1, 118, 211, .18) 0%, rgba(255, 255, 255, .05) 55%, rgba(3, 180, 167, .08) 100%);
  border-color: rgba(143, 208, 255, .32);
  box-shadow:
    0 14px 36px rgba(0, 0, 0, .28),
    0 0 0 1px rgba(143, 208, 255, .08),
    0 0 40px rgba(1, 118, 211, .18);
}

.al-why__card--featured:hover {
  transform: translateY(-6px);
  border-color: rgba(143, 208, 255, .5);
  box-shadow:
    0 20px 44px rgba(0, 0, 0, .32),
    0 0 48px rgba(1, 118, 211, .24);
}

.al-why__card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: var(--al-space-4);
}

.al-why__num {
  font-family: var(--al-font-mono);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: rgba(143, 208, 255, .45);
  line-height: 1;
  padding-top: 6px;
}

.al-why__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: var(--al-radius-card);
  background: rgba(143, 208, 255, .1);
  border: 1px solid rgba(143, 208, 255, .22);
  color: #8FD0FF;
  box-shadow: 0 0 24px rgba(1, 118, 211, .12);
  transition: transform 250ms var(--al-ease);
}

.al-why__icon svg {
  width: 30px;
  height: 30px;
}

.al-why__card:hover .al-why__icon {
  transform: scale(1.05);
}

.al-why__card--featured .al-why__icon {
  width: 72px;
  height: 72px;
  background: rgba(143, 208, 255, .14);
  border-color: rgba(143, 208, 255, .35);
  box-shadow: 0 0 32px rgba(1, 118, 211, .22);
}

.al-why__card--featured .al-why__icon svg {
  width: 34px;
  height: 34px;
}

.al-why__label {
  display: block;
  font-family: var(--al-font-sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #8FD0FF;
  margin-bottom: var(--al-space-2);
}

.al-why__title {
  font-size: 20px;
  line-height: 1.25;
  font-weight: 600;
  color: var(--al-white);
  margin-bottom: var(--al-space-3);
}

.al-why__card--featured .al-why__title {
  font-size: 22px;
}

.al-why__body {
  font-size: 15px;
  line-height: 1.55;
  color: rgba(255, 255, 255, .78);
  margin-bottom: var(--al-space-4);
  max-width: 36ch;
}

.al-why__list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: var(--al-space-3);
  border-top: 1px solid rgba(255, 255, 255, .1);
  margin-top: auto;
}

.al-why__list li {
  position: relative;
  padding-left: 16px;
  font-size: 13px;
  line-height: 1.45;
  color: rgba(214, 228, 245, .88);
}

.al-why__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .5em;
  width: 7px;
  height: 2px;
  background: #8FD0FF;
}

.al-why__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--al-space-5);
  flex-wrap: wrap;
  margin-top: var(--al-space-6);
  padding-top: var(--al-space-5);
  border-top: 1px solid rgba(255, 255, 255, .1);
}

.al-why__foot p {
  font-size: 15px;
  color: rgba(214, 228, 245, .88);
  max-width: 42ch;
}

.al-section--why .al-btn--ghost {
  color: #8FD0FF;
}

.al-why__grid .al-reveal:nth-child(1) { transition-delay: 0ms; }
.al-why__grid .al-reveal:nth-child(2) { transition-delay: 70ms; }
.al-why__grid .al-reveal:nth-child(3) { transition-delay: 140ms; }

/* Case card — media cover + tag row + provenance */
.al-card--case { padding-top: var(--al-space-6); }
.al-card--case[hidden] { display: none; }

/* Testimonial card */
.al-card--testimonial {
  background-color: var(--al-surface);
  border-color: var(--al-border);
}
.al-card--testimonial:hover { transform: none; box-shadow: none; border-color: var(--al-border); }
.al-card--testimonial .al-card__body {
  font-size: 18px;
  line-height: 1.6;
  color: var(--al-ink-900);
}
.al-card--testimonial .al-card__meta {
  display: flex;
  align-items: center;
  gap: var(--al-space-3);
  margin-top: var(--al-space-2);
  margin-bottom: 0;
}
.al-card--testimonial .al-card__meta img,
.al-card--testimonial .al-card__meta svg {
  width: 40px;
  height: 40px;
  border-radius: var(--al-radius-pill);
  flex: 0 0 auto;
}

/* Insight card */
.al-card--insight .al-card__title {
  font-size: 22px;
  line-height: 1.3;
}

/* -----------------------------------------------------------------------------
   12. TAGS / PILLS  (accessible: tint bg + saturated same-hue text)
   ----------------------------------------------------------------------------- */
.al-tag-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--al-space-2);
  margin-bottom: var(--al-space-3);
}

.al-tag {
  display: inline-flex;
  align-items: center;
  font-family: var(--al-font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: var(--al-radius-pill);
  white-space: nowrap;
  /* default = navy/ink on navy tint */
  color: var(--al-navy-90);
  background-color: var(--al-navy-tint);
}

.al-tag--default {
  color: var(--al-navy-90);
  background-color: var(--al-navy-tint);
}

/* AI = purple text on ~10% purple tint (7.4:1 at #5E1CB5) */
.al-tag--ai {
  color: var(--al-purple-70);
  background-color: var(--al-purple-tint);
}

/* Integration = darkened teal text on ~10% teal tint (6.0:1 at #0A7268) */
.al-tag--integration {
  color: var(--al-teal-70);
  background-color: var(--al-teal-tint);
}

/* On navy sections, lift tag text/bg for contrast */
.al-section--navy .al-tag {
  color: var(--al-white);
  background-color: rgba(255, 255, 255, .12);
}
.al-section--navy .al-tag--ai {
  color: #C9A6F5;
  background-color: rgba(117, 38, 227, .22);
}
.al-section--navy .al-tag--integration {
  color: #7FE0D8;
  background-color: rgba(3, 180, 167, .22);
}

/* -----------------------------------------------------------------------------
   13. PROCESS
   ----------------------------------------------------------------------------- */
.al-process {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--al-space-6);
}

.al-process__item {
  display: flex;
  flex-direction: column;
  gap: var(--al-space-3);
  padding-top: var(--al-space-5);
  border-top: 2px solid var(--al-border);
}

.al-process__num {
  font-family: var(--al-font-mono);
  font-size: 40px;
  font-weight: 500;
  line-height: 1;
  color: var(--al-blue-60);
  letter-spacing: -0.01em;
}

.al-process__title {
  font-size: 20px;
  line-height: 1.35;
  font-weight: 600;
  color: var(--al-navy-90);
}

.al-process__body {
  font-size: 16px;
  line-height: 1.6;
  color: var(--al-ink-900);
}

.al-section--navy .al-process__item { border-top-color: rgba(255, 255, 255, .22); }
.al-section--navy .al-process__num   { color: #8FD0FF; }
.al-section--navy .al-process__body  { color: rgba(255, 255, 255, .82); }

/* ---- Loop variant (home “How we work”) ---- */
.al-section--process {
  position: relative;
  overflow: hidden;
  background-color: #E8F1F8;
  background-image:
    radial-gradient(ellipse 70% 55% at 0% 0%, rgba(1, 118, 211, .14), transparent 55%),
    radial-gradient(ellipse 55% 45% at 100% 10%, rgba(3, 180, 167, .10), transparent 50%),
    linear-gradient(180deg, #EAF3FA 0%, #F2F7FB 45%, #E8F1F8 100%);
}

.al-process__lede {
  margin-top: var(--al-space-3);
  font-size: 16px;
  line-height: 1.6;
  color: var(--al-ink-500);
  max-width: 48ch;
}

.al-process--loop {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--al-space-5);
  align-items: stretch;
}

.al-process--loop .al-process__step {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--al-space-4);
  min-height: 320px;
  padding: var(--al-space-7) var(--al-space-6);
  background: var(--al-white);
  border: 1px solid rgba(227, 231, 237, .95);
  border-radius: var(--al-radius-panel);
  box-shadow: 0 12px 32px rgba(3, 45, 96, .08);
  transition:
    transform 250ms var(--al-ease),
    border-color 250ms var(--al-ease),
    box-shadow 250ms var(--al-ease);
}

.al-process--loop .al-process__step:hover {
  transform: translateY(-5px);
  border-color: #C5D6E8;
  box-shadow: 0 18px 40px rgba(3, 45, 96, .12);
}

.al-process__badge {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--al-space-3);
  margin-bottom: var(--al-space-2);
}

.al-process__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: var(--al-radius-card);
  background: var(--al-blue-10);
  border: 1px solid #CBE3F7;
  color: var(--al-blue-70);
  transition: transform 250ms var(--al-ease);
}

.al-process__icon svg {
  width: 28px;
  height: 28px;
}

.al-process--loop .al-process__step:hover .al-process__icon {
  transform: scale(1.05);
}

.al-process--loop .al-process__num {
  font-size: 22px;
  font-weight: 500;
  color: var(--al-blue-60);
  opacity: .65;
}

.al-process--loop .al-process__title {
  font-size: 22px;
  line-height: 1.25;
  margin: 0;
}

.al-process--loop .al-process__body {
  font-size: 15px;
  line-height: 1.6;
  color: var(--al-ink-500);
  margin: 0;
  flex: 1;
}

/* Arrows between steps (desktop) */
.al-process__arrow {
  position: absolute;
  top: 54px;
  right: -24px;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 24px;
  color: var(--al-blue-60);
  pointer-events: none;
}

.al-process__arrow svg {
  width: 36px;
  height: 20px;
}

.al-process__arrow--loop {
  display: none; /* replaced by the return rail below */
}

/* Closing loop rail under the four steps */
.al-process__return {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: var(--al-space-4);
  margin-top: var(--al-space-3);
}

.al-process__return-line {
  flex: 1;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--al-blue-60), var(--al-teal), var(--al-blue-60));
  opacity: .4;
}

.al-process__return-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  padding: 10px 16px;
  border-radius: var(--al-radius-card);
  border: 1px solid rgba(255, 255, 255, .7);
  background: rgba(255, 255, 255, .85);
  color: var(--al-blue-70);
  font-family: var(--al-font-sans);
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  box-shadow: 0 6px 16px rgba(3, 45, 96, .06);
}

.al-process__return-label svg {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
}

.al-process--loop .al-process__step:nth-child(1) { transition-delay: 0ms; }
.al-process--loop .al-process__step:nth-child(2) { transition-delay: 60ms; }
.al-process--loop .al-process__step:nth-child(3) { transition-delay: 120ms; }
.al-process--loop .al-process__step:nth-child(4) { transition-delay: 180ms; }

/* -----------------------------------------------------------------------------
   14. ACCORDION
   ----------------------------------------------------------------------------- */
.al-accordion {
  border-top: 1px solid var(--al-border);
}

.al-accordion__item {
  border-bottom: 1px solid var(--al-border);
}

.al-accordion__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--al-space-4);
  width: 100%;
  padding: var(--al-space-5) 0;
  text-align: left;
  color: var(--al-navy-90);
  transition: color var(--al-t-fast) var(--al-ease);
}
.al-accordion__trigger:hover { color: var(--al-blue-70); }
.al-accordion__trigger:focus-visible {
  outline: 2px solid var(--al-blue-60);
  outline-offset: 2px;
}

.al-accordion__question {
  font-family: var(--al-font-sans);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.4;
}

.al-accordion__icon {
  position: relative;
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  transition: transform var(--al-t-fast) var(--al-ease);
}
/* Plus glyph drawn with pseudo-elements */
.al-accordion__icon::before,
.al-accordion__icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  background-color: currentColor;
  border-radius: var(--al-radius-pill);
  transition: opacity var(--al-t-fast) var(--al-ease),
              transform var(--al-t-fast) var(--al-ease);
}
.al-accordion__icon::before {
  width: 16px; height: 2px;
  transform: translate(-50%, -50%);
}
.al-accordion__icon::after {
  width: 2px; height: 16px;
  transform: translate(-50%, -50%);
}
/* Open state: hide vertical bar -> becomes minus; rotate wrapper for chevron-like motion */
.al-accordion__trigger[aria-expanded="true"] .al-accordion__icon::after { opacity: 0; }
.al-accordion__trigger[aria-expanded="true"] .al-accordion__icon { transform: rotate(180deg); }

.al-accordion__panel {
  overflow: hidden;
  max-height: 0;
  transition: max-height var(--al-t-reveal) var(--al-ease);
}
.al-accordion__answer {
  font-family: var(--al-font-sans);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.7;
  color: var(--al-ink-900);
  padding-bottom: var(--al-space-5);
  max-width: 68ch;
}

/* -----------------------------------------------------------------------------
   15. FORMS
   ----------------------------------------------------------------------------- */
.al-form {
  display: flex;
  flex-direction: column;
  gap: var(--al-space-5);
}

.al-field {
  display: flex;
  flex-direction: column;
  gap: var(--al-space-2);
}

.al-field__label {
  font-family: var(--al-font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--al-ink-500);
}

.al-field__input,
.al-field__textarea {
  width: 100%;
  padding: 12px 14px;
  font-family: var(--al-font-sans);
  font-size: 16px;
  line-height: 1.5;
  color: var(--al-ink-900);
  background-color: var(--al-white);
  border: 1px solid var(--al-border);
  border-radius: var(--al-radius-btn);
  transition: border-color var(--al-t-fast) var(--al-ease),
              box-shadow var(--al-t-fast) var(--al-ease);
}
.al-field__input::placeholder,
.al-field__textarea::placeholder { color: var(--al-ink-500); }

.al-field__textarea {
  min-height: 140px;
  resize: vertical;
}

.al-field__input:focus,
.al-field__textarea:focus {
  outline: none;
  border-color: var(--al-blue-60);
  box-shadow: 0 0 0 2px var(--al-blue-60);
}

.al-field.has-error .al-field__input,
.al-field.has-error .al-field__textarea {
  border-color: var(--al-error);
}
.al-field.has-error .al-field__input:focus,
.al-field.has-error .al-field__textarea:focus {
  box-shadow: 0 0 0 2px var(--al-error);
}

.al-field__error {
  display: none;
  font-size: 14px;
  line-height: 1.4;
  color: var(--al-error);
}
.al-field.has-error .al-field__error { display: block; }

/* Honeypot — off-screen, not display:none (some bots skip display:none fields). */
.al-hp {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.al-field--recaptcha {
  margin-bottom: var(--al-space-2);
}
.al-recaptcha {
  min-height: 78px;
}
.al-field--recaptcha.has-error .al-recaptcha {
  outline: 2px solid var(--al-error);
  outline-offset: 4px;
  border-radius: 4px;
}

/* Checkbox group */
.al-checkbox-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--al-space-3);
}

.al-checkbox {
  display: inline-flex;
  align-items: center;
  gap: var(--al-space-2);
  padding: 10px 14px;
  border: 1px solid var(--al-border);
  border-radius: var(--al-radius-btn);
  font-size: 15px;
  cursor: pointer;
  transition: border-color var(--al-t-fast) var(--al-ease),
              background-color var(--al-t-fast) var(--al-ease);
}
.al-checkbox:hover { border-color: var(--al-blue-60); background-color: var(--al-blue-10); }
.al-checkbox input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--al-blue-60);
  flex: 0 0 auto;
  cursor: pointer;
}
.al-checkbox:has(input:checked) {
  border-color: var(--al-blue-60);
  background-color: var(--al-blue-10);
  color: var(--al-navy-90);
}

/* Success / error blocks */
.al-form__success,
[data-form-success] {
  display: none;
  gap: var(--al-space-3);
  padding: var(--al-space-5);
  background-color: #EAF5EE;
  border: 1px solid #BFE0CB;
  border-radius: var(--al-radius-panel);
  color: var(--al-ink-900);
}
.al-form__success.is-visible,
[data-form-success].is-visible { display: flex; flex-direction: column; }
.al-form__success h3,
[data-form-success] h3 { color: var(--al-success); }
.al-form__success p,
[data-form-success] p { color: var(--al-ink-900); }

.al-form__error {
  display: none;
  padding: var(--al-space-4);
  background-color: var(--al-error-tint);
  border: 1px solid #F0C2C6;
  border-radius: var(--al-radius-btn);
  color: var(--al-error);
  font-size: 15px;
}
.al-form__error.is-visible { display: block; }

/* -----------------------------------------------------------------------------
   16. FOOTER
   ----------------------------------------------------------------------------- */
.al-footer {
  /* Static on-brand blooms over black — same look site-wide (no star-field here). */
  background-color: #000000;
  background-image:
    radial-gradient(80% 130% at 0% 0%, rgba(1, 118, 211, .30) 0%, rgba(1, 118, 211, 0) 60%),
    radial-gradient(80% 130% at 100% 0%, rgba(117, 38, 227, .24) 0%, rgba(117, 38, 227, 0) 60%);
  color: rgba(255, 255, 255, .72);
  padding-block: var(--al-space-9) var(--al-space-7);
}

.al-footer__grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr 1fr;
  gap: var(--al-space-7);
  padding-bottom: var(--al-space-8);
  border-bottom: 1px solid rgba(255, 255, 255, .14);
}

.al-footer__col {
  display: flex;
  flex-direction: column;
  gap: var(--al-space-3);
}

.al-footer__brand {
  display: flex;
  flex-direction: column;
  gap: var(--al-space-4);
  max-width: 32ch;
}
.al-footer__brand img,
.al-footer__brand svg { height: 28px; width: auto; }
.al-footer__brand p {
  font-size: 15px;
  line-height: 1.6;
  color: rgba(255, 255, 255, .68);
}

.al-footer__heading {
  font-family: var(--al-font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #8FD0FF;
  margin-bottom: var(--al-space-1);
}

.al-footer__link {
  font-size: 15px;
  color: rgba(255, 255, 255, .78);
  transition: color var(--al-t-fast) var(--al-ease);
  width: fit-content;
}
.al-footer__link:hover {
  color: var(--al-white);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.al-footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--al-space-4);
  flex-wrap: wrap;
  padding-top: var(--al-space-6);
}

.al-footer__legal {
  display: flex;
  gap: var(--al-space-5);
  flex-wrap: wrap;
  font-size: 14px;
  color: rgba(255, 255, 255, .6);
}
.al-footer__legal a { color: rgba(255, 255, 255, .78); }
.al-footer__legal a:hover { color: var(--al-white); text-decoration: underline; }

.al-footer__bottom > p { font-size: 14px; color: rgba(255, 255, 255, .6); }

/* -----------------------------------------------------------------------------
   17. BANDS / UTILITIES
   ----------------------------------------------------------------------------- */
.al-cta-band {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--al-space-7);
  flex-wrap: wrap;
  padding: var(--al-space-8);
  background-color: var(--al-navy-90);
  border-radius: var(--al-radius-panel);
  color: var(--al-white);
}
.al-cta-band h2,
.al-cta-band h3 { color: var(--al-white); margin-bottom: var(--al-space-2); }
.al-cta-band p { color: rgba(255, 255, 255, .82); max-width: 52ch; }
.al-cta-band .al-hero__actions,
.al-cta-band .al-cta-band__actions {
  display: flex;
  gap: var(--al-space-3);
  flex-wrap: wrap;
  flex: 0 0 auto;
}

.al-divider {
  height: 1px;
  border: 0;
  background-color: var(--al-border);
  margin-block: var(--al-space-8);
}
.al-section--navy .al-divider,
.al-footer .al-divider { background-color: rgba(255, 255, 255, .14); }

.al-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--al-font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--al-blue-70);
  background-color: var(--al-blue-10);
  border: 1px solid #CBE3F7;
  padding: 4px 10px;
  border-radius: var(--al-radius-pill);
}

/* Filter buttons (work index) */
.al-filter {
  display: flex;
  flex-wrap: wrap;
  gap: var(--al-space-2);
  margin-bottom: var(--al-space-7);
}

.al-filter__btn {
  font-family: var(--al-font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--al-ink-500);
  background-color: transparent;
  border: 1px solid var(--al-border);
  padding: 8px 14px;
  border-radius: var(--al-radius-pill);
  transition: color var(--al-t-fast) var(--al-ease),
              background-color var(--al-t-fast) var(--al-ease),
              border-color var(--al-t-fast) var(--al-ease);
}
.al-filter__btn:hover {
  color: var(--al-blue-70);
  border-color: var(--al-blue-60);
  background-color: var(--al-blue-10);
}
.al-filter__btn.is-active {
  color: var(--al-white);
  background-color: var(--al-blue-60);
  border-color: var(--al-blue-60);
}
.al-filter__btn:focus-visible {
  outline: 2px solid var(--al-blue-60);
  outline-offset: 2px;
}

/* Clear-all pill — revealed by JS only when 2+ filters are active. */
.al-filter__clear {
  margin-left: var(--al-space-2);
  color: var(--al-ink-500);
  border-color: var(--al-border);
  border-style: dashed;
}
.al-filter__clear[hidden] { display: none; }
.al-filter__clear:hover {
  color: var(--al-error);
  border-color: var(--al-error);
  background-color: var(--al-error-tint);
}
.al-filter__clear > span { margin-left: 2px; font-weight: 700; }

/* -----------------------------------------------------------------------------
   17b. HELP CHAT WIDGET (floating, bottom-right)
   Injected by initHelpChat() in js/main.js — no per-page HTML required.
   ----------------------------------------------------------------------------- */
.al-help {
  position: fixed;
  right: max(20px, env(safe-area-inset-right, 0px));
  bottom: max(20px, env(safe-area-inset-bottom, 0px));
  z-index: 1200;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--al-space-3);
  font-family: var(--al-font-sans);
}

.al-help__panel {
  width: min(340px, calc(100vw - 40px));
  background: var(--al-white);
  border: 1px solid var(--al-border);
  border-radius: var(--al-radius-panel);
  box-shadow: 0 16px 40px rgba(3, 45, 96, .18);
  overflow: hidden;
  transform-origin: bottom right;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px) scale(.96);
  pointer-events: none;
  transition:
    opacity 200ms var(--al-ease),
    transform 200ms var(--al-ease),
    visibility 0s linear 200ms;
}

.al-help.is-open .al-help__panel {
  opacity: 1;
  visibility: visible;
  transform: none;
  pointer-events: auto;
  transition:
    opacity 200ms var(--al-ease),
    transform 200ms var(--al-ease),
    visibility 0s linear 0s;
}

.al-help__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--al-space-3);
  padding: var(--al-space-4) var(--al-space-4) var(--al-space-4) var(--al-space-5);
  background: linear-gradient(135deg, var(--al-navy-90) 0%, var(--al-navy-70) 100%);
  color: var(--al-white);
}

.al-help__header-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.al-help__title {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--al-white);
}

.al-help__status {
  font-size: 12px;
  color: rgba(143, 208, 255, .95);
}

.al-help__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex: 0 0 auto;
  border-radius: var(--al-radius-btn);
  color: var(--al-white);
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .16);
  transition: background-color var(--al-t-fast) var(--al-ease);
}

.al-help__close:hover {
  background: rgba(255, 255, 255, .18);
}

.al-help__close svg {
  width: 16px;
  height: 16px;
}

.al-help__body {
  display: flex;
  flex-direction: column;
  gap: var(--al-space-4);
  padding: var(--al-space-5);
  background: var(--al-surface);
}

.al-help__bubble {
  align-self: flex-start;
  max-width: 100%;
  padding: var(--al-space-3) var(--al-space-4);
  background: var(--al-white);
  border: 1px solid var(--al-border);
  border-radius: var(--al-radius-card) var(--al-radius-card) var(--al-radius-card) 4px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--al-ink-900);
  box-shadow: 0 2px 8px rgba(3, 45, 96, .06);
}

.al-help__actions {
  display: flex;
  flex-direction: column;
  gap: var(--al-space-2);
}

.al-help__actions .al-btn {
  width: 100%;
  justify-content: center;
}

.al-help__launcher {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px 12px 14px;
  background: var(--al-blue-60);
  color: var(--al-white);
  border: 1px solid transparent;
  border-radius: var(--al-radius-card);
  box-shadow: 0 10px 28px rgba(1, 118, 211, .32);
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  transition:
    background-color var(--al-t-fast) var(--al-ease),
    transform var(--al-t-fast) var(--al-ease),
    box-shadow var(--al-t-fast) var(--al-ease);
}

.al-help__launcher:hover {
  background: var(--al-blue-70);
  transform: translateY(-2px);
  box-shadow: 0 14px 32px rgba(1, 118, 211, .38);
}

.al-help__launcher:focus-visible {
  outline: 2px solid var(--al-blue-60);
  outline-offset: 3px;
}

.al-help__launcher-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: var(--al-radius-btn);
  background: rgba(255, 255, 255, .16);
}

.al-help__launcher-icon svg {
  width: 16px;
  height: 16px;
}

.al-help__launcher-label--close {
  display: none;
}

.al-help.is-open .al-help__launcher-label--open {
  display: none;
}

.al-help.is-open .al-help__launcher-label--close {
  display: inline;
}

.al-help.is-open .al-help__launcher {
  background: var(--al-navy-90);
  box-shadow: 0 10px 28px rgba(3, 45, 96, .28);
}

@media (max-width: 479px) {
  .al-help {
    right: 12px;
    bottom: 12px;
    left: 12px;
    align-items: stretch;
  }

  .al-help__panel {
    width: 100%;
  }

  .al-help__launcher {
    align-self: flex-end;
  }
}

/* -----------------------------------------------------------------------------
   18. MOTION — scroll reveal
   ----------------------------------------------------------------------------- */
.al-reveal {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity var(--al-t-reveal) ease-out,
              transform var(--al-t-reveal) ease-out;
}
.al-reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* Hero stats: enter on PAGE LOAD (not scroll-triggered) so they render like the
   hero headline's .al-reveal — same 8px slide-up + fade + 200ms ease-out, with a
   ~60ms stagger, starting just after the headline settles. */
.al-hero__foot .al-stat {
  opacity: 0;
  transform: translateY(8px);
  animation: al-hero-stat-in var(--al-t-reveal) ease-out forwards;
}
.al-hero__foot .al-stat:nth-child(1) { animation-delay: 0.18s; }
.al-hero__foot .al-stat:nth-child(2) { animation-delay: 0.24s; }
.al-hero__foot .al-stat:nth-child(3) { animation-delay: 0.30s; }
.al-hero__foot .al-stat:nth-child(4) { animation-delay: 0.36s; }

@keyframes al-hero-stat-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

/* -----------------------------------------------------------------------------
   21. APPROACH PAGE
   Page-specific components for /approach. Reuses tokens + existing primitives
   (.al-section*, .al-card*, .al-process*, .al-accordion*, .al-tag*, .al-form*)
   wherever possible; only genuinely new structures get new classes here:
     .al-subnav      sticky secondary section-nav (pill look reused from filters)
     .al-week*       signature Mon–Fri "Week rail" (recurs in 04, 05, 07)
     .al-ap-card     peer card with a blue top accent rule (02)
     .al-ap-examine  audit "what we examine" 2-col row grid (03)
     .al-callout     tinted blue-10 callout panel (03, 05)
     .al-ap-timeline horizontal-on-desktop entry timeline (04)
     .al-note        bordered note strip (04)
     .al-checklist*  tick lists — blue on white, #8FD0FF on navy (05, 06, 09)
     .al-compare*    Human-dominant / AI-subordinate comparison (07)
     .al-gates       quality-gate strip with 2px blue top rules (07)
     .al-field__select  form select primitive (09 audit form)
   Responsive rules live in §19; reduced-motion rules in §20.
   ----------------------------------------------------------------------------- */

/* Anchor offset so section jumps clear BOTH sticky bars (navbar + sub-nav). */
:root { --al-subnav-h: 57px; }
.al-ap-anchor { scroll-margin-top: calc(var(--al-navbar-h) + var(--al-subnav-h) + 8px); }

/* ---- Sticky sub-nav ---- */
.al-subnav {
  position: sticky;
  top: var(--al-navbar-h);
  z-index: 90;                 /* below the navbar (z 100), above content */
  background-color: rgba(255, 255, 255, .92);
  backdrop-filter: saturate(1.4) blur(8px);
  -webkit-backdrop-filter: saturate(1.4) blur(8px);
  border-bottom: 1px solid var(--al-border);
  box-shadow: 0 8px 22px rgba(3, 45, 96, .06);
}
.al-subnav__inner {
  display: flex;
  gap: var(--al-space-2);
  overflow-x: auto;
  overflow-y: hidden;
  padding-block: var(--al-space-3);
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}
.al-subnav__link {
  flex: 0 0 auto;
  font-family: var(--al-font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--al-ink-500);
  background-color: transparent;
  border: 1px solid var(--al-border);
  padding: 8px 14px;
  border-radius: var(--al-radius-pill);
  transition: color var(--al-t-fast) var(--al-ease),
              background-color var(--al-t-fast) var(--al-ease),
              border-color var(--al-t-fast) var(--al-ease),
              box-shadow var(--al-t-fast) var(--al-ease),
              transform var(--al-t-fast) var(--al-ease);
}
.al-subnav__link:hover {
  color: var(--al-blue-70);
  border-color: var(--al-blue-60);
  background-color: var(--al-blue-10);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(1, 118, 211, .16);
}
.al-subnav__link.is-active {
  color: var(--al-white);
  border-color: transparent;
  background-image: linear-gradient(135deg, var(--al-blue-60), var(--al-blue-70));
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(1, 118, 211, .42),
              inset 0 1px 0 rgba(255, 255, 255, .25);
}
.al-subnav__link.is-active:hover {
  color: var(--al-white);
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(1, 118, 211, .5),
              inset 0 1px 0 rgba(255, 255, 255, .25);
}
.al-subnav__link:focus-visible {
  outline: 2px solid var(--al-blue-60);
  outline-offset: 2px;
}
/* Edge fades hint that the pill row scrolls horizontally (mobile: items >4 are
   off-screen). Toggled by initApproachNav based on scroll position. */
.al-subnav::before,
.al-subnav::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 40px;
  pointer-events: none;
  z-index: 1;
  opacity: 0;
  transition: opacity var(--al-t-fast) var(--al-ease);
}
.al-subnav::before { left: 0;  background: linear-gradient(90deg,  rgba(255, 255, 255, .95), rgba(255, 255, 255, 0)); }
.al-subnav::after  { right: 0; background: linear-gradient(270deg, rgba(255, 255, 255, .95), rgba(255, 255, 255, 0)); }
.al-subnav.is-scroll-left::before  { opacity: 1; }
.al-subnav.is-scroll-right::after  { opacity: 1; }

/* ---- 02: peer card with a blue top accent rule ---- */
.al-ap-card { border-top: 3px solid var(--al-blue-60); }

.al-ap-intro { align-items: start; gap: var(--al-space-8); }
.al-ap-intro h2 { letter-spacing: -0.02em; }

/* ---- Shared: mono sub-heading + block rhythm (03, 05, 07) ---- */
.al-ap-block { margin-top: var(--al-space-8); }
.al-ap-subhead {
  display: block;
  font-family: var(--al-font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--al-blue-70);
  margin-bottom: var(--al-space-5);
}

/* ---- 03: "What we examine" — 8 rows, 2-col, 2px top rule each ---- */
.al-ap-examine {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--al-space-5) var(--al-space-7);
}
.al-ap-examine__row {
  border-top: 2px solid var(--al-border);
  padding-top: var(--al-space-4);
}
.al-ap-examine__area {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--al-space-2);
  font-size: 16px;
  font-weight: 600;
  color: var(--al-navy-90);
}
.al-ap-examine__detail {
  display: block;
  margin-top: var(--al-space-2);
  font-size: 15px;
  line-height: 1.55;
  color: var(--al-ink-500);
}

/* ---- Callout panel (03 "no obligation", 05 "exposure") ---- */
.al-callout {
  background-color: var(--al-blue-10);
  border: 1px solid #CBE3F7;
  border-radius: var(--al-radius-panel);
  padding: var(--al-space-6);
}
.al-callout__kicker {
  display: block;
  font-family: var(--al-font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--al-blue-70);
  margin-bottom: var(--al-space-2);
}
.al-callout p { color: var(--al-ink-900); max-width: 78ch; }
.al-callout .al-checklist { margin: 0; }

/* ---- Signature: the Week rail (Mon–Fri strip) ---- */
.al-week {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  border: 1px solid var(--al-border);
  border-radius: var(--al-radius-card);
  overflow: hidden;
  background-color: var(--al-white);
}
.al-week__cell {
  display: flex;
  flex-direction: column;
  gap: var(--al-space-2);
  padding: var(--al-space-4);
  border-left: 1px solid var(--al-border);
  border-top: 2px solid transparent;   /* reserves the FRI accent's 2px slot */
}
.al-week__cell:first-child { border-left: 0; }
.al-week--compact .al-week__cell { padding: var(--al-space-3) var(--al-space-4); }
.al-week__day {
  font-family: var(--al-font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--al-ink-500);
}
.al-week__note {
  font-size: 13px;
  line-height: 1.45;
  color: var(--al-ink-900);
}
/* FRI "demo" cell: 2px blue top rule + an 8px blue demo dot. */
.al-week__cell--demo {
  border-top-color: var(--al-blue-60);
  background-color: var(--al-blue-10);
}
.al-week__cell--demo .al-week__day { color: var(--al-blue-70); }
.al-week__dot {
  width: 8px;
  height: 8px;
  border-radius: var(--al-radius-pill);
  background-color: var(--al-blue-60);
  flex: 0 0 auto;
}

/* Annotated Week rail wrapper (05) — white card frame. */
.al-week-card {
  background-color: var(--al-white);
  border: 1px solid var(--al-border);
  border-radius: var(--al-radius-panel);
  padding: var(--al-space-5);
  box-shadow: 0 8px 24px rgba(3, 45, 96, .06);
}
.al-week-card .al-week { border: 0; border-radius: 0; }
.al-week-card .al-week__cell:first-child { border-left: 0; }

/* MON → FRI inline tick (07 last quality gate) — echoes the Week rail. */
.al-week-tick {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: var(--al-space-3);
  padding: 4px 10px;
  border: 1px solid var(--al-border);
  border-radius: var(--al-radius-pill);
  background-color: var(--al-blue-10);
}
.al-week-tick__day {
  font-family: var(--al-font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--al-blue-70);
}
.al-week-tick__arrow { color: var(--al-blue-60); font-size: 12px; }

/* ---- 04: entry timeline (horizontal desktop / vertical mobile) ---- */
.al-ap-timeline {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--al-space-5);
  list-style: none;
  padding: 0;
  margin: 0 0 var(--al-space-8);
}
.al-ap-tl__node {
  position: relative;
  padding-top: var(--al-space-7);   /* room for the marker + connector */
}
/* Decorative connector line running through the marker row. */
.al-ap-tl__node::before {
  content: "";
  position: absolute;
  top: 10px;
  left: 0;
  right: 0;
  height: 2px;
  background-color: var(--al-border);
}
.al-ap-tl__node:first-child::before { left: 11px; }
.al-ap-tl__node:last-child::before { right: 11px; }
.al-ap-tl__marker {
  position: absolute;
  top: 0;
  left: 0;
  width: 22px;
  height: 22px;
  border-radius: var(--al-radius-pill);
  background-color: var(--al-blue-60);
  border: 2px solid var(--al-white);
  box-shadow: 0 0 0 2px var(--al-blue-60);
}
/* Ringed "demo" marker (Day 6 walkthrough). */
.al-ap-tl__marker--demo {
  background-color: var(--al-white);
  border-color: var(--al-blue-60);
  box-shadow: 0 0 0 2px var(--al-blue-60);
}
.al-ap-tl__day {
  display: block;
  font-family: var(--al-font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--al-blue-70);
  margin-bottom: var(--al-space-2);
}
.al-ap-tl__title {
  font-size: 18px;
  line-height: 1.3;
  font-weight: 600;
  color: var(--al-navy-90);
  margin-bottom: var(--al-space-2);
}
.al-ap-tl__body {
  font-size: 15px;
  line-height: 1.55;
  color: var(--al-ink-500);
}
.al-ap-tl__node .al-week { margin-top: var(--al-space-4); }

/* ---- Bordered note strip (04) ---- */
.al-note {
  border: 1px solid var(--al-border);
  border-radius: var(--al-radius-card);
  padding: var(--al-space-5) var(--al-space-6);
  background-color: var(--al-white);
}
.al-note__kicker {
  display: block;
  font-family: var(--al-font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--al-blue-70);
  margin-bottom: var(--al-space-2);
}
.al-note p { color: var(--al-ink-900); max-width: 82ch; }

/* ---- Checklists (05, 06, 09) ---- */
.al-checklist {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--al-space-3);
}
.al-checklist__item {
  position: relative;
  padding-left: 34px;
  font-size: 16px;
  line-height: 1.6;
  color: var(--al-ink-900);
}
.al-checklist__item::before {         /* tinted disc */
  content: "";
  position: absolute;
  left: 0;
  top: 2px;
  width: 22px;
  height: 22px;
  border-radius: var(--al-radius-pill);
  background-color: var(--al-blue-10);
}
.al-checklist__item::after {          /* check glyph drawn with borders */
  content: "";
  position: absolute;
  left: 8px;
  top: 6px;
  width: 6px;
  height: 11px;
  border: solid var(--al-blue-70);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
/* Divided variant (06 navy exit list). */
.al-checklist--divided .al-checklist__item {
  padding-top: var(--al-space-4);
  padding-bottom: var(--al-space-4);
  border-top: 1px solid var(--al-border);
}
.al-checklist--divided .al-checklist__item::before,
.al-checklist--divided .al-checklist__item::after {
  top: calc(var(--al-space-4) + 2px);
}
.al-checklist--divided .al-checklist__item::after { top: calc(var(--al-space-4) + 6px); }
.al-checklist--divided { gap: 0; }
.al-checklist--divided .al-checklist__item:first-child { border-top: 0; }

/* Navy theming (06): #8FD0FF checks, white text, translucent dividers. */
.al-section--navy .al-checklist__item { color: rgba(255, 255, 255, .9); }
.al-section--navy .al-checklist__item::before { background-color: rgba(143, 208, 255, .16); }
.al-section--navy .al-checklist__item::after { border-color: #8FD0FF; }
.al-section--navy .al-checklist--divided .al-checklist__item { border-top-color: rgba(255, 255, 255, .14); }
.al-section--navy .al-checklist--divided .al-checklist__item:first-child { border-top: 0; }

/* ---- 07: Human-dominant / AI-subordinate comparison ---- */
.al-compare {
  border: 1px solid var(--al-border);
  border-radius: var(--al-radius-card);
  overflow: hidden;
}
.al-compare__head,
.al-compare__row {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
}
.al-compare__col-head {
  padding: var(--al-space-4) var(--al-space-5);
  background-color: var(--al-surface);
}
.al-compare__col-head--human {
  border-left: 3px solid var(--al-blue-60);   /* blue accent bar: dominant */
  background-color: var(--al-blue-10);
}
.al-compare__col-head--ai { border-left: 1px solid var(--al-border); }
.al-compare__role {
  display: inline-flex;
  align-items: center;
  gap: var(--al-space-2);
  font-family: var(--al-font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--al-ink-500);
}
.al-compare__col-head--ai .al-compare__role { color: var(--al-purple-70); }
.al-compare__col-title {
  display: block;
  margin-top: 4px;
  font-size: 15px;
  font-weight: 600;
  color: var(--al-navy-90);
}
.al-compare__col-head--ai .al-compare__col-title { color: var(--al-ink-500); font-weight: 500; }
.al-compare__cell {
  padding: var(--al-space-4) var(--al-space-5);
  border-top: 1px solid var(--al-border);
  font-size: 15px;
  line-height: 1.5;
}
.al-compare__cell--human {
  border-left: 3px solid var(--al-blue-60);
  color: var(--al-ink-900);
  font-weight: 500;
}
.al-compare__cell--ai {
  border-left: 1px solid var(--al-border);
  color: var(--al-ink-500);
}
/* Per-cell role label — hidden on desktop (column heads carry the meaning),
   revealed on mobile when the pair stacks (see §19). */
.al-compare__cell-role {
  display: none;
  font-family: var(--al-font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--al-ink-500);
  margin-right: var(--al-space-2);
}

/* ---- 07: quality-gate strip, 2px blue top rule each ---- */
.al-gates {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--al-space-5);
}
.al-gate {
  border-top: 2px solid var(--al-blue-60);
  padding-top: var(--al-space-4);
  font-size: 15px;
  line-height: 1.5;
  color: var(--al-ink-900);
}

/* ---- 09: form select primitive (introduced for the audit form) ---- */
.al-field__select {
  width: 100%;
  padding: 12px 40px 12px 14px;
  font-family: var(--al-font-sans);
  font-size: 16px;
  line-height: 1.5;
  color: var(--al-ink-900);
  background-color: var(--al-white);
  border: 1px solid var(--al-border);
  border-radius: var(--al-radius-btn);
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  /* caret drawn as an SVG background so it matches the sharp brand look */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%235C6470' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  transition: border-color var(--al-t-fast) var(--al-ease),
              box-shadow var(--al-t-fast) var(--al-ease);
}
.al-field__select:focus {
  outline: none;
  border-color: var(--al-blue-60);
  box-shadow: 0 0 0 2px var(--al-blue-60);
}
.al-field.has-error .al-field__select { border-color: var(--al-error); }

/* ---- Reveal-triggered motion --------------------------------------------------
   Richer entrances for Approach content. These piggyback on the existing
   .al-reveal → .is-visible system (js/main.js #4): the element's RESTING state is
   the final, fully-visible one, and the animation only plays once .is-visible is
   added — so with JS off everything still renders normally, and the reduced-motion
   block (§20) neutralises every rule below. Per-item stagger uses a --d custom
   property so the shorthand can carry the delay without specificity fights. */
@keyframes al-ap-rise  { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes al-ap-pop   { 0% { opacity: 0; transform: scale(.4); } 60% { opacity: 1; transform: scale(1.08); } 100% { opacity: 1; transform: scale(1); } }
@keyframes al-ap-draw  { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes al-ap-check { 0% { opacity: 0; transform: rotate(45deg) scale(.2); } 55% { opacity: 1; } 100% { opacity: 1; transform: rotate(45deg) scale(1); } }
@keyframes al-ap-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(1, 118, 211, .5); } 50% { box-shadow: 0 0 0 9px rgba(1, 118, 211, 0); } }

/* Hero reassurance points — light check bullets over the dark field. */
.al-hero--approach .al-hero__points {
  display: flex;
  flex-wrap: wrap;
  gap: var(--al-space-3) var(--al-space-6);
  margin-top: var(--al-space-2);
}
.al-hero--approach .al-hero__points li {
  position: relative;
  padding-left: 26px;
  color: var(--al-hero-ink);
  font-size: 15px;
  line-height: 1.4;
}
.al-hero--approach .al-hero__points li::before {
  content: "";
  position: absolute;
  left: 3px;
  top: 4px;
  width: 11px;
  height: 6px;
  border-left: 2px solid var(--al-hero-accent);
  border-bottom: 2px solid var(--al-hero-accent);
  transform: rotate(-45deg);
}

/* Hero: stagger the headline stack in on load. */
.al-hero--approach .al-hero__content.is-visible > * { animation: al-ap-rise .6s var(--al-ease) var(--d, 0ms) both; }
.al-hero--approach .al-hero__content > *:nth-child(1) { --d: 40ms; }
.al-hero--approach .al-hero__content > *:nth-child(2) { --d: 130ms; }
.al-hero--approach .al-hero__content > *:nth-child(3) { --d: 230ms; }
.al-hero--approach .al-hero__content > *:nth-child(4) { --d: 330ms; }
.al-hero--approach .al-hero__content > *:nth-child(5) { --d: 430ms; }

/* 03 — "What we examine" rows rise in sequence. */
.al-ap-block.is-visible .al-ap-examine__row { animation: al-ap-rise .55s var(--al-ease) var(--d, 0ms) both; }
.al-ap-examine__row:nth-child(1) { --d: 0ms; }   .al-ap-examine__row:nth-child(2) { --d: 55ms; }
.al-ap-examine__row:nth-child(3) { --d: 110ms; } .al-ap-examine__row:nth-child(4) { --d: 165ms; }
.al-ap-examine__row:nth-child(5) { --d: 70ms; }  .al-ap-examine__row:nth-child(6) { --d: 125ms; }
.al-ap-examine__row:nth-child(7) { --d: 180ms; } .al-ap-examine__row:nth-child(8) { --d: 235ms; }

/* 04 — timeline: nodes rise, connector segments draw, the Day 6 demo marker pulses. */
.al-ap-timeline.is-visible .al-ap-tl__node { animation: al-ap-rise .55s var(--al-ease) var(--d, 0ms) both; }
.al-ap-tl__node:nth-child(1) { --d: 0ms; }   .al-ap-tl__node:nth-child(2) { --d: 110ms; }
.al-ap-tl__node:nth-child(3) { --d: 220ms; } .al-ap-tl__node:nth-child(4) { --d: 330ms; }
.al-ap-tl__node:nth-child(5) { --d: 440ms; }
.al-ap-tl__node::before { transform-origin: left center; }
.al-ap-timeline.is-visible .al-ap-tl__node::before { animation: al-ap-draw .6s var(--al-ease) calc(var(--d, 0ms) + 140ms) both; }
.al-ap-tl__marker--demo { animation: al-ap-pulse 2.2s var(--al-ease) infinite; }

/* Week-rail dots keep a gentle live pulse (the "Friday demo" beat). */
.al-week__dot { animation: al-ap-pulse 2.6s var(--al-ease) infinite; }

/* 05 — Week-rail card cells rise across Mon → Fri. */
.al-week-card.is-visible .al-week__cell { animation: al-ap-rise .5s var(--al-ease) var(--d, 0ms) both; }
.al-week-card .al-week__cell:nth-child(1) { --d: 0ms; }   .al-week-card .al-week__cell:nth-child(2) { --d: 80ms; }
.al-week-card .al-week__cell:nth-child(3) { --d: 160ms; } .al-week-card .al-week__cell:nth-child(4) { --d: 240ms; }
.al-week-card .al-week__cell:nth-child(5) { --d: 320ms; }

/* Checklists (05 how-a-week, 06 exit climax, 09 reassurance): rows rise, then the
   tinted disc pops and the check glyph draws in — the exit list is the payoff. */
.al-reveal.is-visible .al-checklist__item { animation: al-ap-rise .5s var(--al-ease) var(--d, 0ms) both; }
.al-reveal.is-visible .al-checklist__item::before { animation: al-ap-pop .5s var(--al-ease) calc(var(--d, 0ms) + 60ms) both; }
.al-reveal.is-visible .al-checklist__item::after  { animation: al-ap-check .5s var(--al-ease) calc(var(--d, 0ms) + 140ms) both; }
.al-checklist__item:nth-child(1) { --d: 0ms; }   .al-checklist__item:nth-child(2) { --d: 90ms; }
.al-checklist__item:nth-child(3) { --d: 180ms; } .al-checklist__item:nth-child(4) { --d: 270ms; }
.al-checklist__item:nth-child(5) { --d: 360ms; } .al-checklist__item:nth-child(6) { --d: 450ms; }

/* 07 — human/AI compare rows rise; quality-gate cards rise in sequence. */
.al-compare.is-visible .al-compare__row { animation: al-ap-rise .5s var(--al-ease) var(--d, 0ms) both; }
.al-compare__row:nth-of-type(1) { --d: 0ms; }   .al-compare__row:nth-of-type(2) { --d: 70ms; }
.al-compare__row:nth-of-type(3) { --d: 140ms; } .al-compare__row:nth-of-type(4) { --d: 210ms; }
.al-compare__row:nth-of-type(5) { --d: 280ms; } .al-compare__row:nth-of-type(6) { --d: 350ms; }
.al-ap-block.is-visible .al-gate { animation: al-ap-rise .5s var(--al-ease) var(--d, 0ms) both; }
.al-gate:nth-child(1) { --d: 0ms; }   .al-gate:nth-child(2) { --d: 80ms; }
.al-gate:nth-child(3) { --d: 160ms; } .al-gate:nth-child(4) { --d: 240ms; }
.al-gate:nth-child(5) { --d: 320ms; }

/* 08 — FAQ items rise in. */
.al-accordion.is-visible .al-accordion__item { animation: al-ap-rise .45s var(--al-ease) var(--d, 0ms) both; }
.al-accordion__item:nth-child(1) { --d: 0ms; }   .al-accordion__item:nth-child(2) { --d: 55ms; }
.al-accordion__item:nth-child(3) { --d: 110ms; } .al-accordion__item:nth-child(4) { --d: 165ms; }
.al-accordion__item:nth-child(5) { --d: 220ms; } .al-accordion__item:nth-child(6) { --d: 275ms; }
.al-accordion__item:nth-child(7) { --d: 330ms; } .al-accordion__item:nth-child(8) { --d: 385ms; }

/* ---- Richer contrast + interaction (Approach) ---------------------------------
   Adds depth (brand-tinted surfaces, elevation, accent bars, punchier gradients)
   and interaction (hover lift/glow + a live Week-rail sweep) on top of the base
   components. Idle animations are killed under reduced-motion in §20. */

/* Punchier hero mesh — more saturated blooms for a higher-contrast banner. */
.al-hero--approach {
  --al-hero-bloom-blue:   rgba(1, 118, 211, .55);
  --al-hero-bloom-purple: rgba(117, 38, 227, .48);
  --al-hero-bloom-teal:   rgba(3, 180, 167, .30);
}

/* Surface sections: a clear blue-gray tint (not near-white) + a faint brand bloom,
   so the light sections read as a distinct mid-tone tier between white and navy. */
.al-ap-anchor.al-section--surface {
  background-color: #E7EDF6;
  background-image:
    radial-gradient(58% 90% at 100% 0%, rgba(1, 118, 211, .07), transparent 60%),
    radial-gradient(48% 80% at 0% 100%, rgba(117, 38, 227, .05), transparent 62%);
}

/* Section sub-heads get a leading accent bar for rhythm + contrast. */
.al-ap-subhead { position: relative; padding-left: 22px; }
.al-ap-subhead::before {
  content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 14px; height: 2px;
  background: linear-gradient(90deg, var(--al-blue-60), var(--al-purple));
}

/* Cards: resting elevation, lively hover (lift + blue border + deeper shadow). */
.al-ap-card,
#approach-audit .al-card,
#approach-weekly .al-card {
  box-shadow: 0 2px 10px rgba(3, 45, 96, .04);
  transition: transform var(--al-t-fast) var(--al-ease),
              box-shadow var(--al-t-fast) var(--al-ease),
              border-color var(--al-t-fast) var(--al-ease);
}
.al-ap-card:hover,
#approach-audit .al-card:hover,
#approach-weekly .al-card:hover {
  transform: translateY(-4px);
  border-color: var(--al-blue-60);
  box-shadow: 0 16px 34px rgba(3, 45, 96, .14);
}
/* Peer card (02): the top accent brightens to a blue→purple gradient on hover. */
.al-ap-card { position: relative; }
.al-ap-card::after {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px;
  background: linear-gradient(90deg, var(--al-blue-60), var(--al-purple));
  opacity: 0; transition: opacity var(--al-t-fast) var(--al-ease);
}
.al-ap-card:hover::after { opacity: 1; }

/* Callout + note: vertical brand accent bar + a touch of gradient. */
.al-callout {
  position: relative;
  overflow: hidden;
  padding-left: calc(var(--al-space-6) + 6px);
  background-image: linear-gradient(120deg, var(--al-blue-10), rgba(238, 246, 253, .35));
}
.al-callout::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: linear-gradient(180deg, var(--al-blue-60), var(--al-purple));
}
.al-note {
  position: relative;
  padding-left: calc(var(--al-space-6) + 6px);
  transition: box-shadow var(--al-t-fast) var(--al-ease), transform var(--al-t-fast) var(--al-ease);
}
.al-note::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background-color: var(--al-blue-60);
}
.al-note:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(3, 45, 96, .08); }

/* Week-rail card: stronger elevation, subtle gradient, and a live "week" sweep. */
.al-week-card {
  box-shadow: 0 12px 30px rgba(3, 45, 96, .10);
  background-image: linear-gradient(180deg, #ffffff, #fbfdff);
}
.al-week-card .al-week { position: relative; }
.al-week-card .al-week::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 55%;
  pointer-events: none; z-index: 2;
  background: linear-gradient(90deg, transparent 0%, rgba(1, 118, 211, .13) 46%, rgba(117, 38, 227, .10) 54%, transparent 100%);
  transform: translateX(-120%);
  animation: al-week-sweep 5s var(--al-ease) infinite;
}
@keyframes al-week-sweep { 0% { transform: translateX(-120%); } 100% { transform: translateX(320%); } }

/* Timeline: soft glow on markers, pulsing demo marker keeps its ring, node hover. */
.al-ap-tl__marker { box-shadow: 0 0 0 2px var(--al-blue-60), 0 0 0 6px rgba(1, 118, 211, .16); }
.al-ap-tl__marker--demo { animation: al-ap-marker-pulse 2.2s var(--al-ease) infinite; }
@keyframes al-ap-marker-pulse {
  0%, 100% { box-shadow: 0 0 0 2px var(--al-blue-60), 0 0 0 0 rgba(1, 118, 211, .45); }
  50%      { box-shadow: 0 0 0 2px var(--al-blue-60), 0 0 0 10px rgba(1, 118, 211, 0); }
}
.al-ap-tl__node { transition: transform var(--al-t-fast) var(--al-ease); }
.al-ap-tl__node:hover { transform: translateY(-3px); }

/* Compare table: elevation + row hover highlight. */
.al-compare { box-shadow: 0 8px 24px rgba(3, 45, 96, .06); }
.al-compare__row { transition: background-color var(--al-t-fast) var(--al-ease); }
.al-compare__row:hover { background-color: rgba(1, 118, 211, .035); }

/* Quality-gate cards: hover lift. */
.al-gate { transition: transform var(--al-t-fast) var(--al-ease); }
.al-gate:hover { transform: translateY(-3px); }

/* 06 exit climax: richer gradient + a soft glow on the checkmarks. */
#approach-exit {
  --al-hero-bloom-blue:   rgba(1, 118, 211, .50);
  --al-hero-bloom-purple: rgba(117, 38, 227, .44);
  --al-hero-bloom-teal:   rgba(3, 180, 167, .28);
}
#approach-exit .al-checklist__item::after { filter: drop-shadow(0 0 4px rgba(143, 208, 255, .55)); }

/* 09 closing form: blue top accent + strong elevation to pull focus to conversion.
   On the navy section the white card lifts off the dark field. */
#approach-audit-form .al-card {
  border-top: 3px solid var(--al-blue-60);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .38);
}

/* ---- Dark-rhythm sections (04 Start + 09 Closing now navy) ---------------------
   The page opens dark (hero), breaks the long light stretch at 04, climaxes dark
   at 06, and closes dark at 09 — with the surface tier tinted in between. These
   sections get the same brand-bloom gradient as the exit (via the data-no-star
   -field navy rule) plus light-on-navy overrides for the timeline's own text. */
#approach-start {
  --al-hero-bloom-blue:   rgba(1, 118, 211, .42);
  --al-hero-bloom-purple: rgba(117, 38, 227, .36);
  --al-hero-bloom-teal:   rgba(3, 180, 167, .22);
}
#approach-audit-form {
  --al-hero-bloom-blue:   rgba(1, 118, 211, .38);
  --al-hero-bloom-purple: rgba(117, 38, 227, .34);
  --al-hero-bloom-teal:   rgba(3, 180, 167, .20);
}
/* Timeline text over navy (the Week-rail card + note stay white and pop). */
.al-section--navy .al-ap-tl__title { color: var(--al-white); }
.al-section--navy .al-ap-tl__body  { color: rgba(255, 255, 255, .72); }
.al-section--navy .al-ap-tl__day   { color: #8FD0FF; }
.al-section--navy .al-ap-tl__node::before { background-color: rgba(255, 255, 255, .22); }

/* -----------------------------------------------------------------------------
   19. RESPONSIVE — Webflow breakpoints
   ----------------------------------------------------------------------------- */

/* ---- Tablet: <=991px ---- */
@media (max-width: 991px) {
  :root {
    --al-container-pad: 40px;
    --al-section-pad: 64px;
  }

  /* Show hamburger, hide desktop nav links + inline CTA */
  .al-navbar__links,
  .al-navbar__cta { display: none; }
  .al-navbar__toggle { display: flex; }

  /* Grid collapse */
  .al-grid--3,
  .al-grid--4 { grid-template-columns: repeat(2, 1fr); }
  .al-grid { grid-template-columns: repeat(6, 1fr); }

  .al-process { grid-template-columns: repeat(2, 1fr); }
  .al-process--loop {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--al-space-5);
  }
  .al-process--loop .al-process__step { min-height: 280px; }
  .al-process--loop .al-process__step:nth-child(1) { grid-area: 1 / 1; }
  .al-process--loop .al-process__step:nth-child(2) { grid-area: 1 / 2; }
  .al-process--loop .al-process__step:nth-child(3) { grid-area: 2 / 2; }
  .al-process--loop .al-process__step:nth-child(4) { grid-area: 2 / 1; }
  .al-process--loop .al-process__return { grid-area: 3 / 1 / 4 / 3; }

  /* Reorient arrows for the 2×2 loop: → ↓ ← ↑ */
  .al-process--loop .al-process__step:nth-child(1) .al-process__arrow {
    display: flex;
    top: 50%;
    right: -18px;
    transform: translateY(-50%);
  }
  .al-process--loop .al-process__step:nth-child(2) .al-process__arrow {
    display: flex;
    top: auto;
    bottom: -18px;
    right: 50%;
    transform: translateX(50%) rotate(90deg);
  }
  .al-process--loop .al-process__step:nth-child(3) .al-process__arrow {
    display: flex;
    top: 50%;
    right: auto;
    left: -18px;
    transform: translateY(-50%) rotate(180deg);
  }
  .al-process--loop .al-process__step:nth-child(4) .al-process__arrow,
  .al-process--loop .al-process__arrow--loop {
    display: flex;
    top: -18px;
    bottom: auto;
    left: 50%;
    right: auto;
    transform: translateX(-50%) rotate(-90deg);
  }
  .al-process__return-label { white-space: normal; text-align: center; }
  .al-services__intro {
    grid-template-columns: 1fr;
    gap: var(--al-space-4);
    align-items: start;
  }
  .al-services__intro .al-btn {
    justify-self: start;
  }
  .al-services__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--al-space-4);
  }
  .al-service {
    padding: var(--al-space-5) var(--al-space-4);
  }
  .al-why__intro {
    grid-template-columns: 1fr;
    gap: var(--al-space-5);
    margin-bottom: var(--al-space-5);
  }
  .al-why__visual { justify-content: flex-start; }
  .al-why__diagram { max-width: 420px; }
  .al-why__grid { grid-template-columns: 1fr; }
  .al-why__card--featured { margin-top: 0; }
  .al-stat-strip { grid-template-columns: repeat(2, 1fr); gap: var(--al-space-5); }

  /* Hero stacks */
  .al-hero .al-container {
    grid-template-columns: 1fr;
    gap: var(--al-space-7);
  }
  .al-hero__content { max-width: none; }
  .al-hero__media { order: -1; max-width: 560px; }

  /* Footer */
  .al-footer__grid {
    grid-template-columns: 1fr 1fr 1fr;
    gap: var(--al-space-6);
  }
  .al-footer__brand { grid-column: 1 / -1; max-width: 40ch; }

  .al-cta-band { padding: var(--al-space-7); }

  /* ---- Approach page (tablet) ---- */
  .al-gates { grid-template-columns: repeat(2, 1fr); gap: var(--al-space-5); }

  /* Entry timeline flips to a vertical, left-connector list. */
  .al-ap-timeline { grid-template-columns: 1fr; gap: 0; }
  .al-ap-tl__node { padding-top: 0; padding-left: 40px; padding-bottom: var(--al-space-6); }
  .al-ap-tl__node::before {
    top: 0; bottom: 0; left: 10px; right: auto;
    width: 2px; height: auto;
  }
  .al-ap-tl__node:first-child::before { top: 11px; }
  .al-ap-tl__node:last-child::before { bottom: auto; height: 11px; }
  .al-ap-tl__node:last-child { padding-bottom: 0; }
}

/* ---- Mobile landscape: <=767px ---- */
@media (max-width: 767px) {
  :root {
    --al-container-pad: 24px;
    --al-section-pad: 48px;
  }

  /* Mobile type scale */
  h1, .al-hero__title { font-size: 34px; line-height: 1.15; }
  h2 { font-size: 28px; line-height: 1.2; }
  h3 { font-size: 22px; line-height: 1.3; }
  h4 { font-size: 18px; line-height: 1.4; }

  .al-eyebrow { font-size: 13px; }
  .al-body-lg, .al-hero__sub { font-size: 17px; }
  .al-caption { font-size: 13px; }
  .al-stat__num { font-size: 32px; }
  .al-card__stat { font-size: 28px; }

  .al-mobile-menu {
    top: var(--al-navbar-h);
    height: calc(100vh - var(--al-navbar-h));
    height: calc(100dvh - var(--al-navbar-h));
  }

  /* Grid stacks to single column */
  .al-grid,
  .al-grid--2,
  .al-grid--3,
  .al-grid--4 { grid-template-columns: 1fr; gap: var(--al-space-5); }

  .al-process { grid-template-columns: 1fr; gap: var(--al-space-5); }
  .al-process--loop {
    grid-template-columns: 1fr;
    gap: var(--al-space-4);
  }
  .al-process--loop .al-process__step {
    min-height: 0;
    padding: var(--al-space-6) var(--al-space-5);
  }
  .al-process--loop .al-process__step:nth-child(1),
  .al-process--loop .al-process__step:nth-child(2),
  .al-process--loop .al-process__step:nth-child(3),
  .al-process--loop .al-process__step:nth-child(4),
  .al-process--loop .al-process__return {
    grid-area: auto;
  }
  .al-process--loop .al-process__arrow {
    display: flex;
    top: auto;
    right: auto;
    left: 50%;
    bottom: -14px;
    transform: translateX(-50%) rotate(90deg);
  }
  .al-process--loop .al-process__step:nth-child(4) .al-process__arrow,
  .al-process--loop .al-process__arrow--loop {
    display: none;
  }
  .al-process__return {
    margin-top: var(--al-space-3);
    flex-direction: column;
  }
  .al-process__return-line { width: 2px; height: 20px; flex: 0 0 auto; }
  .al-services__grid {
    grid-template-columns: 1fr;
    gap: var(--al-space-4);
  }
  .al-services__intro { margin-bottom: var(--al-space-6); }
  .al-services__lede { font-size: 16px; }
  .al-services__intro h2 { max-width: none; }
  .al-service { padding: var(--al-space-5); }
  .al-service__title { font-size: 20px; }
  .al-services__foot {
    flex-direction: column;
    align-items: flex-start;
    padding: var(--al-space-5);
  }
  .al-why__card { padding: var(--al-space-5); }
  .al-why__card--featured { padding: var(--al-space-5); }
  .al-why__title { font-size: 19px; }
  .al-why__card--featured .al-why__title { font-size: 20px; }
  .al-why__headline { max-width: none; }
  .al-why__icon { width: 56px; height: 56px; }
  .al-why__icon svg { width: 26px; height: 26px; }
  .al-why__card--featured .al-why__icon { width: 60px; height: 60px; }
  .al-why__card--featured .al-why__icon svg { width: 28px; height: 28px; }
  .al-why__foot { flex-direction: column; align-items: flex-start; }

  /* CTA band + footer bottom stack */
  .al-cta-band {
    flex-direction: column;
    align-items: flex-start;
    padding: var(--al-space-6);
  }
  .al-footer__grid { grid-template-columns: 1fr 1fr; }
  .al-footer__bottom { flex-direction: column; align-items: flex-start; }

  .al-hero__actions .al-btn,
  .al-cta-band .al-btn { width: 100%; }
  .al-hero__actions { flex-direction: column; align-items: stretch; }

  /* Immersive hero: tighter vertical rhythm + gap on small screens */
  .al-hero--immersive {
    gap: var(--al-space-7);
    padding-block: var(--al-space-8) var(--al-space-7);
  }

  /* ---- Approach page (mobile) ---- */
  .al-ap-examine { grid-template-columns: 1fr; gap: var(--al-space-4); }
  .al-gates { grid-template-columns: 1fr; gap: var(--al-space-4); }

  /* Comparison: pairs stack (human still first in the DOM); column heads give
     way to per-cell role labels so each row stays self-describing. */
  .al-compare__head { display: none; }
  .al-compare__row { grid-template-columns: 1fr; }
  .al-compare__cell { border-left-width: 3px; }
  .al-compare__cell--ai { border-left-color: var(--al-border); }
  .al-compare__cell-role { display: inline-block; }

  /* Annotated Week rail scrolls horizontally rather than crushing its notes. */
  .al-week-card { overflow-x: auto; }
  .al-week-card .al-week { min-width: 560px; }

  /* Buttons + inputs go full-width to match the site's mobile form pattern. */
  .al-form .al-btn { width: 100%; }
  .al-subnav__link { scroll-snap-align: start; }
}

/* ---- Mobile portrait: <=479px ---- */
@media (max-width: 479px) {
  .al-stat-strip { grid-template-columns: 1fr; gap: var(--al-space-4); }
  .al-footer__grid { grid-template-columns: 1fr; }
  .al-card { padding: var(--al-space-5); }
  .al-card__media {
    margin: calc(-1 * var(--al-space-5)) calc(-1 * var(--al-space-5)) var(--al-space-4);
  }
  .al-checkbox-group { flex-direction: column; }
  .al-checkbox { width: 100%; }
}

/* -----------------------------------------------------------------------------
   20. REDUCED MOTION
   ----------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .al-reveal {
    opacity: 1;
    transform: none;
  }

  /* Hero stats stay visible with no entrance animation. */
  .al-hero__foot .al-stat {
    opacity: 1;
    transform: none;
    animation: none;
  }

  .al-card:hover { transform: none; }
  .al-card__link:hover { gap: 6px; }
  .al-cs-chip:hover { transform: none; }

  .al-service { transition: none; }
  .al-service__link:hover { gap: 6px; }
  .al-services__grid .al-reveal { transition-delay: 0ms; }

  .al-why__card:hover { transform: none; }
  .al-why__card:hover .al-why__icon { transform: none; }
  .al-why__card--featured:hover { transform: none; }
  .al-why__grid .al-reveal { transition-delay: 0ms; }

  .al-process--loop .al-process__step:hover { transform: none; }
  .al-process--loop .al-process__step:hover .al-process__icon { transform: none; }
  .al-process--loop .al-process__step { transition-delay: 0ms; }

  .al-help__panel,
  .al-help__launcher { transition: none; }
  .al-help__launcher:hover { transform: none; }

  /* Primary CTA: keep the blue-70 darken, drop the lift, press travel + sheen. */
  .al-btn--primary::before { display: none; }
  .al-btn--primary:hover,
  .al-btn--primary:active { transform: none; box-shadow: none; }

  /* Immersive hero: freeze the ambient gradient drift. The particle canvas is
     handled in JS — initHeroCanvas() paints one static frame and never starts
     the rAF loop when reduce is set. */
  .al-hero--immersive::before { animation: none; }

  /* Approach reveal-triggered motion: resting state is already the final visible
     one, so disabling every animation just shows content in place, no stagger. */
  .al-hero--approach .al-hero__content > *,
  .al-ap-examine__row,
  .al-ap-tl__node,
  .al-ap-tl__node::before,
  .al-ap-tl__marker--demo,
  .al-week__dot,
  .al-week-card .al-week__cell,
  .al-checklist__item,
  .al-checklist__item::before,
  .al-checklist__item::after,
  .al-compare__row,
  .al-gate,
  .al-accordion__item,
  .al-week-card .al-week::after { animation: none !important; }

  /* Keep the sweep overlay out of the way when frozen. */
  .al-week-card .al-week::after { display: none; }

  /* Hover lifts are user-initiated, but drop them for consistency with the site. */
  .al-ap-card:hover,
  .al-note:hover,
  .al-gate:hover,
  .al-ap-tl__node:hover,
  .al-subnav__link:hover { transform: none; }
}

/* =============================================================================
   CASE-STUDY CARDS — additive layer over the original design system.
   Appended last so it wins the cascade. Keeps the Case Studies card design
   (country/industry/work pills, circular flag, laptop illustration, outlined
   "View case study" button) while the rest of the site stays original.
   ============================================================================ */
.al-card--case { padding: 0; overflow: hidden; position: relative; padding-top: 0; }

.al-card--case .al-card__media {
  margin: 0;
  border-radius: 0;
  aspect-ratio: 5 / 4;
  background: linear-gradient(168deg, #1477e0 0%, #0e63c8 30%, #0a3b78 66%, #061627 100%);
  position: relative;
  overflow: hidden;
}

/* Pills — stacked top-left */
.al-card--case .al-case-pills {
  position: absolute; z-index: 2;
  top: clamp(1.25rem, 3vw, 2rem); left: clamp(1.25rem, 3vw, 2rem);
  display: flex; flex-direction: column; align-items: flex-start; gap: 12px;
  max-width: 62%;
}
.al-case-pill {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--al-font-sans); font-size: 1.02rem; font-weight: 600;
  line-height: 1.15; color: var(--al-white); text-transform: none; letter-spacing: 0;
  background: rgba(255,255,255,0.15);
  padding: 11px 22px; border-radius: var(--al-radius-pill);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.al-case-pill--country { background: rgba(255,255,255,0.22); font-weight: 700; padding-left: 8px; }
/* Specificity must beat the original `.al-card__media img` rule (0-1-1). */
.al-card--case .al-case-pill__flag {
  width: 30px; height: 30px; min-width: 30px; border-radius: 50%; flex: 0 0 30px;
  object-fit: cover; box-shadow: 0 0 0 2px rgba(255,255,255,0.55);
}

/* Laptop illustration — bleeds off the bottom-right */
.al-card--case .al-card__illus {
  position: absolute; z-index: 1; right: -6%; bottom: -7%;
  width: 62%; max-width: 380px; margin: 0; display: block;
}
.al-card--case .al-card__illus img { width: 100%; height: auto; display: block; object-fit: contain; }

/* Body below the panel */
.al-card--case .al-card__body-wrap {
  display: flex; flex-direction: column; gap: var(--al-space-4);
  padding: clamp(1.5rem, 2.5vw, 2rem); flex: 1;
}
.al-card--case .al-card__title { margin: 0; font-size: clamp(1.35rem, 2vw, 1.7rem); line-height: 1.2; color: var(--al-navy-90); }
.al-card--case .al-card__body { margin: 0; font-size: 16px; color: var(--al-ink-500); }

/* Outlined pill "View case study" button (Learn-More style) — rounded on purpose,
   distinct from the site's default sharp buttons. */
.al-btn--outline {
  margin-top: auto; align-self: flex-start;
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--al-font-sans); font-weight: 600; font-size: 15px;
  padding: 12px 26px; border-radius: var(--al-radius-pill);
  border: 1.5px solid var(--al-blue-60); background: transparent; color: var(--al-blue-60);
}
.al-btn--outline:hover { background: var(--al-blue-60); color: var(--al-white); gap: 12px; }

/* Case grid: 2-up */
@media (min-width: 768px) {
  .al-grid--cases { grid-template-columns: repeat(2, 1fr); }
}

/* Narrower 3-up homepage row: dial the big pieces down */
.al-grid--3 .al-case-pill { font-size: 0.86rem; padding: 8px 16px; }
.al-grid--3 .al-case-pill__flag { width: 24px; height: 24px; flex: 0 0 24px; }
.al-grid--3 .al-card__illus { width: 58%; }
.al-grid--3 .al-card--case .al-card__title { font-size: 20px; }

@media (max-width: 560px) {
  .al-card--case .al-card__media { aspect-ratio: 16 / 11; }
  .al-card--case .al-case-pills { max-width: 66%; }
  .al-card__illus { width: 58%; }
}

/* Case-study detail-page prose (Challenge / What we built / Outcome) */
.al-prose { max-width: 760px; }
.al-prose h2 { margin-top: var(--al-space-7); margin-bottom: var(--al-space-3); color: var(--al-navy-90); }
.al-prose h2:first-child { margin-top: 0; }
.al-prose p { color: var(--al-ink-900); margin-bottom: var(--al-space-4); }
.al-prose ul { display: flex; flex-direction: column; gap: var(--al-space-2); margin: 0 0 var(--al-space-4); padding-left: 1.15em; }
.al-prose li { color: var(--al-ink-900); line-height: 1.6; }

/* =============================================================================
   CASE-STUDY DETAIL PAGE (al-cs-*) — additive layer for the reusable case
   template (see case-studies/b2b-commerce-beverage-distributor.html).
   Prefixed al-cs-* to avoid collisions; token-based, light-theme only.
   All product mockups are pure HTML/CSS (no external requests) and decorative
   (aria-hidden in markup). Responsive rules live in the block at the end.
   ============================================================================ */

/* ---- 1. HERO: two-column over the immersive banner ------------------------ */
.al-cs-hero__grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: var(--al-space-8);
  align-items: center;
}
.al-cs-hero .al-hero__content { max-width: none; }
.al-cs-hero .al-hero__sub { max-width: 46ch; }

/* Keep the whole detail banner — including the "Start a similar project" CTA —
   within one viewport on laptop screens. The long case titles rendered up to
   64px and wrapped to ~6 lines, so content overflowed the 100svh hero and
   pushed the CTA below the fold. Trim the title scale + vertical rhythm so it
   fits; the hero still fills the screen via its min-height. */
.al-cs-hero { padding-block: clamp(20px, 4vh, 52px) clamp(20px, 4vh, 44px); }
.al-cs-hero .al-hero__title { font-size: clamp(28px, 3.8vw, 50px); line-height: 1.1; }
.al-cs-hero .al-hero__sub { font-size: clamp(15px, 1.4vw, 17px); }
.al-cs-hero .al-cs-meta { margin-bottom: var(--al-space-5); }

/* Breadcrumb over the dark hero */
.al-cs-breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--al-space-2);
  margin-bottom: var(--al-space-4);
  font-family: var(--al-font-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--al-hero-ink);
}
.al-cs-breadcrumb a { color: var(--al-hero-accent); }
.al-cs-breadcrumb a:hover { text-decoration: underline; text-underline-offset: 3px; }
.al-cs-breadcrumb__sep { color: rgba(214, 228, 245, .5); }

/* Glassy meta pills over the dark hero */
.al-cs-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--al-space-2);
  margin-bottom: var(--al-space-6);
}
.al-cs-meta__pill {
  display: inline-flex;
  align-items: center;
  gap: var(--al-space-2);
  padding: 7px 14px;
  font-size: 14px;
  font-weight: 500;
  color: var(--al-white);
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: var(--al-radius-pill);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.al-cs-meta__pill--country { padding-left: 6px; font-weight: 600; }
.al-cs-meta__flag {
  width: 26px; height: 26px; min-width: 26px; flex: 0 0 26px;
  border-radius: 50%; object-fit: cover;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, .5);
}

/* ---- 2. HERO MOCKUP: compliant storefront laptop ------------------------- */
.al-cs-hero__media { width: 100%; }
.al-cs-laptop {
  position: relative;
  width: 100%;
  max-width: 560px;
  margin-inline: auto;
  filter: drop-shadow(0 30px 60px rgba(2, 15, 38, .5));
}
.al-cs-laptop__screen {
  background: var(--al-white);
  border-radius: 12px 12px 3px 3px;
  border: 1px solid rgba(255, 255, 255, .5);
  overflow: hidden;
}
.al-cs-laptop__bar {
  display: flex;
  align-items: center;
  gap: var(--al-space-3);
  padding: 10px 14px;
  background: var(--al-surface);
  border-bottom: 1px solid var(--al-border);
}
.al-cs-laptop__dots { display: inline-flex; gap: 6px; }
.al-cs-laptop__dots i {
  width: 9px; height: 9px; border-radius: 50%;
  background: #D3DDE9; display: block;
}
.al-cs-laptop__url {
  flex: 1;
  padding: 4px 12px;
  font-family: var(--al-font-mono);
  font-size: 12px;
  color: var(--al-ink-500);
  background: var(--al-white);
  border: 1px solid var(--al-border);
  border-radius: var(--al-radius-pill);
  text-align: center;
}
.al-cs-laptop__viewport { padding: var(--al-space-4); background: var(--al-white); }
.al-cs-laptop__toolbar {
  display: flex;
  align-items: center;
  gap: var(--al-space-3);
  margin-bottom: var(--al-space-4);
}
.al-cs-laptop__reorder {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 600;
  color: var(--al-white);
  background: var(--al-teal-70);
  border-radius: var(--al-radius-btn);
}
.al-cs-laptop__search {
  flex: 1;
  height: 32px;
  background: var(--al-surface);
  border: 1px solid var(--al-border);
  border-radius: var(--al-radius-btn);
}
.al-cs-laptop__tiles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--al-space-3);
}
.al-cs-tile {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px;
  border: 1px solid var(--al-border);
  border-radius: var(--al-radius-card);
  background: var(--al-white);
}
.al-cs-tile__thumb {
  aspect-ratio: 4 / 3;
  border-radius: 5px;
  background: linear-gradient(150deg, var(--al-blue-10), #DCEBFA);
}
.al-cs-tile__price {
  font-family: var(--al-font-mono);
  font-size: 12px;
  font-weight: 500;
  color: var(--al-navy-90);
}
.al-cs-tile__row { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.al-cs-tile__stepper {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 8px;
  border: 1px solid var(--al-border);
  border-radius: var(--al-radius-pill);
  font-size: 12px;
  color: var(--al-ink-500);
}
.al-cs-tile__stepper b { color: var(--al-ink-900); font-weight: 600; }
.al-cs-tile__add {
  padding: 4px 12px;
  font-size: 12px;
  font-weight: 600;
  color: var(--al-white);
  background: var(--al-blue-60);
  border-radius: var(--al-radius-btn);
}
.al-cs-laptop__base {
  display: block;
  position: relative;
  width: 116%;
  height: 14px;
  margin: 0 -8%;
  background: linear-gradient(180deg, #E1E7EF, #BFCADA);
  border-radius: 0 0 16px 16px;
}
.al-cs-laptop__base::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 70px;
  height: 5px;
  background: #A9B6C8;
  border-radius: 0 0 6px 6px;
}
.al-cs-laptop__badge {
  position: absolute;
  left: -6%;
  bottom: 16%;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 600;
  color: var(--al-teal-70);
  background: var(--al-white);
  border: 1px solid var(--al-teal-tint);
  border-radius: var(--al-radius-pill);
  box-shadow: 0 8px 20px rgba(2, 15, 38, .18);
}
.al-cs-laptop__badge span { color: var(--al-teal); font-weight: 700; }

/* ---- 3. AT A GLANCE panel ------------------------------------------------- */
/* Wider + more prominent than the surrounding prose: break out of the
   container's side padding on both edges (using the same responsive
   --al-container-pad token so it stays in sync across breakpoints), and switch
   from the flat white card to an on-brand navy gradient. Text flips to light
   values for WCAG-AA over the dark gradient. */
.al-cs-glance {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--al-space-6);
  margin-inline: calc(-1 * var(--al-container-pad));
  padding: var(--al-space-8) var(--al-space-8);
  background:
    radial-gradient(120% 180% at 8% 0%, rgba(1, 118, 211, .55) 0%, rgba(1, 118, 211, 0) 60%),
    radial-gradient(120% 180% at 100% 100%, rgba(3, 180, 167, .38) 0%, rgba(3, 180, 167, 0) 58%),
    linear-gradient(150deg, #063A78 0%, var(--al-navy-90) 55%, #021F45 100%);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: var(--al-radius-panel);
  box-shadow: 0 24px 60px -28px rgba(2, 15, 38, .5);
}
.al-cs-glance__item + .al-cs-glance__item {
  border-left: 1px solid rgba(255, 255, 255, .16);
  padding-left: var(--al-space-6);
}
.al-cs-glance__label {
  display: block;
  margin-bottom: var(--al-space-2);
  font-family: var(--al-font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #8FD0FF;
}
.al-cs-glance__value {
  font-size: 17px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--al-white);
}
.al-cs-glance__note { margin-top: var(--al-space-5); }

/* ---- 4. NARRATIVE: numbered blocks --------------------------------------- */
.al-cs-narrative { display: flex; flex-direction: column; gap: var(--al-space-8); }
.al-cs-step {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: var(--al-space-7);
  padding-top: var(--al-space-6);
  border-top: 1px solid var(--al-border);
}
.al-cs-step__aside { display: flex; flex-direction: column; gap: var(--al-space-2); }
.al-cs-step__bar {
  width: 40px;
  height: 4px;
  border-radius: var(--al-radius-pill);
  background: var(--al-teal);
  margin-bottom: var(--al-space-2);
}
.al-cs-step__index {
  font-family: var(--al-font-mono);
  font-size: 28px;
  font-weight: 500;
  line-height: 1;
  color: var(--al-ink-500);
}
.al-cs-step__label {
  font-family: var(--al-font-mono);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--al-navy-90);
}
.al-cs-step__main { max-width: 62ch; }
.al-cs-step__head {
  font-size: 26px;
  line-height: 1.25;
  font-weight: 700;
  color: var(--al-blue-70);
  margin-bottom: var(--al-space-4);
}
.al-cs-step__main p { color: var(--al-ink-900); margin-bottom: var(--al-space-4); }
.al-cs-step__main p:last-child { margin-bottom: 0; }

.al-cs-checklist { display: flex; flex-direction: column; gap: var(--al-space-3); margin-top: var(--al-space-2); }
.al-cs-checklist li { display: flex; gap: var(--al-space-3); align-items: flex-start; line-height: 1.6; color: var(--al-ink-900); }
.al-cs-checklist__mark {
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
  margin-top: 1px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  color: var(--al-white);
  background: var(--al-teal-70);
  border-radius: 50%;
}

/* ---- 5. SOLUTION HIGHLIGHTS: capability cards ---------------------------- */
.al-cs-section-head { margin-bottom: var(--al-space-7); }
.al-cs-section-head h2 { max-width: 22ch; }
.al-cs-section-head--split {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--al-space-5);
  flex-wrap: wrap;
}
.al-cs-section-head__link { flex: 0 0 auto; white-space: nowrap; }

.al-cs-caps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--al-space-5);
}
.al-cs-cap {
  display: flex;
  flex-direction: column;
  gap: var(--al-space-2);
  padding: var(--al-space-5);
  background: var(--al-white);
  border: 1px solid var(--al-border);
  border-radius: var(--al-radius-card);
}
.al-cs-cap__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-bottom: var(--al-space-3);
  color: var(--al-teal-70);
  background: var(--al-teal-tint);
  border-radius: var(--al-radius-btn);
}
.al-cs-cap__icon svg { width: 22px; height: 22px; }
.al-cs-cap__title { font-size: 18px; line-height: 1.35; font-weight: 600; color: var(--al-navy-90); }
.al-cs-cap__body { font-size: 15px; line-height: 1.6; color: var(--al-ink-500); }

/* ---- 6. SPOTLIGHT: navy panel + reorder-flow vignette + quote ------------ */
.al-cs-spotlight {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: var(--al-space-8);
  align-items: center;
  padding: var(--al-space-8);
  background: var(--al-navy-90);
  border-radius: var(--al-radius-panel);
  color: var(--al-white);
}

.al-cs-flow {
  padding: var(--al-space-4);
  background: var(--al-white);
  border-radius: var(--al-radius-card);
  box-shadow: 0 20px 40px rgba(2, 15, 38, .35);
}
.al-cs-flow__tabs { display: flex; gap: var(--al-space-4); border-bottom: 1px solid var(--al-border); margin-bottom: var(--al-space-3); }
.al-cs-flow__tab {
  padding-bottom: 10px;
  font-size: 13px;
  font-weight: 600;
  color: var(--al-ink-500);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.al-cs-flow__tab.is-active { color: var(--al-teal-70); border-bottom-color: var(--al-teal); }
.al-cs-flow__rows { display: flex; flex-direction: column; }
.al-cs-flow__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--al-space-3);
  padding: var(--al-space-3) 0;
  border-bottom: 1px solid var(--al-border);
}
.al-cs-flow__info { display: flex; flex-direction: column; gap: 2px; }
.al-cs-flow__info b { font-size: 14px; font-weight: 600; color: var(--al-navy-90); }
.al-cs-flow__info em { font-style: normal; font-size: 12px; color: var(--al-ink-500); }
.al-cs-flow__btn {
  flex: 0 0 auto;
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 600;
  color: var(--al-white);
  background: var(--al-blue-60);
  border-radius: var(--al-radius-btn);
}
.al-cs-flow__note {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: var(--al-space-3);
  padding: 10px var(--al-space-3);
  font-size: 13px;
  font-weight: 500;
  color: var(--al-teal-70);
  background: var(--al-teal-tint);
  border-radius: var(--al-radius-btn);
}
.al-cs-flow__note span { font-weight: 700; }

.al-cs-quote { margin: 0; }
.al-cs-quote__text {
  margin: 0 0 var(--al-space-5);
  font-size: clamp(22px, 2.6vw, 30px);
  line-height: 1.35;
  font-weight: 500;
  color: var(--al-white);
  text-wrap: balance;
}
.al-cs-quote__text::before { content: "\201C"; color: var(--al-teal); margin-right: 2px; }
.al-cs-quote__text::after { content: "\201D"; color: var(--al-teal); }
.al-cs-quote__by {
  font-family: var(--al-font-mono);
  font-size: 13px;
  letter-spacing: 0.03em;
  color: var(--al-hero-accent);
}

/* ---- 7. TECH & STACK: chip strip ----------------------------------------- */
.al-cs-chips { display: flex; flex-wrap: wrap; gap: var(--al-space-3); }
.al-cs-chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 11px 18px 11px 14px;
  font-family: var(--al-font-mono);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--al-navy-90);
  background:
    linear-gradient(180deg, #F5FAFE 0%, var(--al-blue-10) 100%);
  border: 1px solid rgba(1, 118, 211, .22);
  border-radius: var(--al-radius-pill);
  box-shadow:
    0 1px 2px rgba(3, 45, 96, .05),
    inset 0 1px 0 rgba(255, 255, 255, .85);
  transition:
    transform var(--al-t-fast) var(--al-ease),
    border-color var(--al-t-fast) var(--al-ease),
    box-shadow var(--al-t-fast) var(--al-ease),
    background-color var(--al-t-fast) var(--al-ease);
}
.al-cs-chip::before {
  content: "";
  width: 7px;
  height: 7px;
  flex-shrink: 0;
  border-radius: 1.5px;
  background: var(--al-blue-60);
}
.al-cs-chip:hover {
  transform: translateY(-2px);
  border-color: rgba(1, 118, 211, .4);
  background:
    linear-gradient(180deg, var(--al-white) 0%, #E4F0FB 100%);
  box-shadow: 0 8px 20px rgba(3, 45, 96, .1);
}

/* ---- Responsive: case-study detail --------------------------------------- */
@media (max-width: 991px) {
  .al-cs-hero__grid { grid-template-columns: 1fr; gap: var(--al-space-7); }
  .al-cs-hero__media { order: -1; max-width: 520px; margin-inline: auto; }
  .al-cs-caps { grid-template-columns: repeat(2, 1fr); }
  .al-cs-glance { grid-template-columns: repeat(2, 1fr); gap: var(--al-space-5); padding: var(--al-space-6); }
  .al-cs-glance__item:nth-child(3) { border-left: 0; padding-left: 0; }
  .al-cs-glance__item + .al-cs-glance__item { border-left: 0; padding-left: 0; }
  .al-cs-glance__item:nth-child(even) { border-left: 1px solid rgba(255, 255, 255, .16); padding-left: var(--al-space-5); }
  .al-cs-spotlight { grid-template-columns: 1fr; gap: var(--al-space-7); padding: var(--al-space-7); }
}

@media (max-width: 767px) {
  .al-cs-step { grid-template-columns: 1fr; gap: var(--al-space-4); }
  .al-cs-step__aside { flex-direction: row; align-items: center; gap: var(--al-space-3); flex-wrap: wrap; }
  .al-cs-step__bar { margin-bottom: 0; }
  .al-cs-step__head { font-size: 22px; }
  .al-cs-caps { grid-template-columns: 1fr; }
  .al-cs-glance { grid-template-columns: 1fr; }
  .al-cs-glance__item + .al-cs-glance__item,
  .al-cs-glance__item:nth-child(even) { border-left: 0; padding-left: 0; }
  .al-cs-glance__item + .al-cs-glance__item { border-top: 1px solid rgba(255, 255, 255, .16); padding-top: var(--al-space-5); }
  .al-cs-section-head--split { align-items: flex-start; }
  .al-cs-laptop__tiles { gap: 8px; }
  .al-cs-quote__text { font-size: 21px; }
}

/* =============================================================================
   CASE-STUDY CARD REDESIGN v2 — per-industry gradient panels + HTML/CSS
   product screens inside an enlarged laptop, with a scroll-triggered
   "come alive" animation. Additive layer, appended last so it wins the
   cascade. Scoped to `.al-grid--cases` so the home 3-up (`.al-grid--3`) and
   any other reuse keep the original flat-SVG laptop untouched.
   Screens are decorative (aria-hidden); every status uses icon + text.
   ============================================================================= */

/* --- Panel: wider/shorter than the original 5/4, per the redesign ---------- */
.al-grid--cases .al-card--case .al-card__media { aspect-ratio: 15 / 8; }

/* Per-industry 4-stop gradients (168deg, bright top-left -> near-black) ----- */
.al-case--beverage   .al-card__media { background: linear-gradient(168deg,#F0A93B 0%,#D97A2B 30%,#8A3F1E 66%,#061627 100%); }
.al-case--field      .al-card__media { background: linear-gradient(168deg,#17B0A6 0%,#0E8C97 30%,#0A4E6E 66%,#061627 100%); }
.al-case--hospitality .al-card__media { background: linear-gradient(168deg,#E8C88B 0%,#B9925A 30%,#4A3A5E 66%,#061627 100%); }
.al-case--healthcare .al-card__media { background: linear-gradient(168deg,#3FB0E0 0%,#1E86C7 30%,#0A4877 66%,#061627 100%); }
.al-case--fintech    .al-card__media { background: linear-gradient(168deg,#7C5CE0 0%,#5433B8 30%,#2A2A6E 66%,#061627 100%); }
.al-case--auto       .al-card__media { background: linear-gradient(168deg,#5B7A99 0%,#33506F 30%,#1A2C44 66%,#061627 100%); }

/* Navy-scrim pills on the two LIGHT cards (amber, champagne) so white text
   keeps WCAG-AA over the bright top band. */
.al-case--beverage .al-case-pill,
.al-case--hospitality .al-case-pill { background: rgba(10,18,38,.45); border: 1px solid rgba(255,255,255,.30); }
.al-case--beverage .al-case-pill--country,
.al-case--hospitality .al-case-pill--country { background: rgba(10,18,38,.5); }
/* The other four keep the white-glass pill but gain the 1px inner border. */
.al-grid--cases .al-case-pill { border: 1px solid rgba(255,255,255,.30); }

/* --- Enlarged laptop, bleeding bottom-right -------------------------------- */
.al-grid--cases .al-card--case .al-card__illus {
  right: -4%; bottom: -6%; width: 70%; max-width: 440px;
  container-type: inline-size;              /* screen text scales with laptop */
}
/* Related grids on detail pages are 3-up (`.al-grid--3.al-grid--cases`) rather
   than the Portfolio's 2-up, so each card — and thus the container-query width
   driving the screen's `cqw` type — is narrower. Widen the laptop and drop the
   px cap for the 3-up case so the product screen reads at a legible size instead
   of collapsing to a nub. Additive; the 2-up Portfolio rule above is untouched. */
.al-grid--3.al-grid--cases .al-card--case .al-card__illus {
  width: 84%; max-width: none;
}
.al-laptop { display: block; position: relative; width: 100%; font-size: 2.7cqw; }
.al-laptop__bezel {
  display: block; position: relative; background: #1F2733;
  border-radius: 1.1em 1.1em 0 0; padding: .7em .7em .55em;
  box-shadow: 0 26px 55px -14px rgba(3,20,40,.55);
}
.al-laptop__screen {
  display: block; position: relative; aspect-ratio: 16 / 10.2;
  border-radius: .45em; overflow: hidden; background: #fff;
}
.al-laptop__base {
  display: block; height: .7em; margin: 0 -2.6em; border-radius: 0 0 .5em .5em;
  background: linear-gradient(#C9D0D8,#AEB7C1);
}
.al-laptop__base::after {
  content: ""; display: block; width: 16%; height: .28em; margin: .18em auto 0;
  border-radius: 0 0 .3em .3em; background: rgba(0,0,0,.14);
}

/* --- Shared screen scaffold ----------------------------------------------- */
.al-scr {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  font-family: var(--al-font-sans); font-size: 1em; line-height: 1.25;
  color: #16181D; background: #fff; overflow: hidden;
}
.al-scr__chrome {
  display: flex; align-items: center; gap: .6em;
  padding: .5em .7em; background: #F1F3F6; border-bottom: 1px solid #E3E7ED; flex: 0 0 auto;
}
.al-scr__dots { display: flex; gap: .34em; flex: 0 0 auto; }
.al-scr__dots i { width: .55em; height: .55em; border-radius: 50%; background: #D6DBE2; }
.al-scr__dots i:nth-child(1) { background: #FF5F57; }
.al-scr__dots i:nth-child(2) { background: #FEBC2E; }
.al-scr__dots i:nth-child(3) { background: #28C840; }
.al-scr__addr {
  flex: 1 1 auto; min-width: 0; background: #fff; border: 1px solid #E3E7ED;
  border-radius: .5em; padding: .22em .7em; font-family: var(--al-font-mono);
  font-size: .82em; color: #5C6470; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.al-scr__app {
  flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column;
  gap: .62em; padding: .82em .9em;
}
.al-scr__head { display: flex; align-items: center; justify-content: space-between; gap: .5em; }
.al-scr__brand { font-weight: 700; font-size: 1.02em; color: #032D60; white-space: nowrap; }

/* Screen primitives shared across cards */
.al-lbl { font-family: var(--al-font-mono); font-size: .66em; letter-spacing: .08em;
  text-transform: uppercase; color: #8A93A0; }
.al-muted { color: #5C6470; }
.al-mono  { font-family: var(--al-font-mono); }
.al-blue  { color: #0176D3; }
.al-scr .al-red { color: #BA0517; }
.al-chip {
  display: inline-flex; align-items: center; gap: .3em; font-size: .74em; font-weight: 600;
  padding: .22em .6em; border-radius: 999px; white-space: nowrap; border: 1px solid transparent;
}
.al-chip b { font-weight: 700; }
.al-chip--green  { background: #EAF6EE; color: #2E844A; }
.al-chip--amber  { background: #FDF3E4; color: #9A5A16; }
.al-chip--blue   { background: #EAF4FD; color: #0B5CAB; }
.al-chip--teal   { background: #E5F7F5; color: #0A7268; }
.al-chip--grey   { background: #EEF1F5; color: #5C6470; }
.al-chip--gold   { background: #F3E7CE; color: #6E5525; }
.al-scr-btn {
  align-self: flex-start; margin-top: auto; border: 0; border-radius: .45em;
  font-family: var(--al-font-sans); font-weight: 600; font-size: .82em;
  padding: .5em 1em; cursor: default; white-space: nowrap;
}
.al-scr-btn--blue { background: #0176D3; color: #fff; }
.al-scr-btn--gold { background: #B9925A; color: #16181D; }

/* Bar chart (flexbox). Bars grow from 0 -> --h when the card is revealed. */
.al-bars { display: flex; align-items: flex-end; gap: .34em; height: 100%; }
.al-bar {
  flex: 1 1 0; min-width: 0; height: var(--h,50%); border-radius: .18em .18em 0 0;
  background: #C4D2E4; transform: scaleY(0); transform-origin: bottom;
  transition: transform .7s var(--al-ease);
}
.al-bar--accent { background: #0176D3; }
.al-case--fintech .al-bar { background: #CBBEF2; }
.al-case--fintech .al-bar--accent { background: #5433B8; }
.al-card--case.is-visible .al-bar { transform: scaleY(1); }
.al-bar:nth-child(2) { transition-delay: .05s; }
.al-bar:nth-child(3) { transition-delay: .10s; }
.al-bar:nth-child(4) { transition-delay: .15s; }
.al-bar:nth-child(5) { transition-delay: .20s; }
.al-bar:nth-child(6) { transition-delay: .25s; }

/* Progress / charge bars. Fill sweeps left -> right on reveal. */
.al-prog { position: relative; height: .5em; border-radius: 999px; background: #E7ECF2; overflow: hidden; }
.al-prog__fill {
  position: absolute; inset: 0; width: var(--p,60%); border-radius: 999px;
  background: #0176D3; transform: scaleX(0); transform-origin: left;
  transition: transform .8s var(--al-ease);
}
.al-case--hospitality .al-prog__fill { background: #B9925A; }
.al-case--auto .al-prog__fill { background: #2E844A; }
.al-card--case.is-visible .al-prog__fill { transform: scaleX(1); }

/* --- 1. Beverage — B2B order pad ------------------------------------------ */
.al-bev__row1 { display: flex; gap: .7em; align-items: stretch; }
.al-panel { background: #F7F9FB; border: 1px solid #E3E7ED; border-radius: .4em; padding: .5em .55em; }
.al-bev__chart { flex: 1 1 62%; display: flex; flex-direction: column; gap: .35em; }
.al-bev__chart .al-bars { height: 3.2em; }
.al-bev__stat { flex: 1 1 38%; display: flex; flex-direction: column; justify-content: center; gap: .12em; }
.al-bignum { font-weight: 800; font-size: 1.5em; color: #032D60; letter-spacing: -.01em; }
.al-delta { font-size: .74em; font-weight: 600; color: #2E844A; }
.al-bev__line { display: flex; align-items: center; gap: .5em; font-size: .84em; }
.al-bev__line > :first-child { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.al-bev__line .al-blue { flex: 0 0 auto; font-family: var(--al-font-mono); font-size: .92em; }
.al-bev__tot { flex: 0 0 auto; font-weight: 700; font-family: var(--al-font-mono); }
.al-bev__sub { text-align: right; font-size: .9em; }
.al-bev__sub b { font-weight: 800; font-family: var(--al-font-mono); color: #032D60; }

/* --- 2. Field service — dispatch board + offline mobile card --------------- */
.al-fs__axis { display: flex; justify-content: space-between; font-family: var(--al-font-mono);
  font-size: .64em; color: #8A93A0; padding: 0 0 .1em; }
.al-fs__grid { position: relative; display: flex; flex-direction: column; gap: .4em; }
.al-fs__row { display: flex; align-items: center; gap: .5em; }
.al-fs__who { flex: 0 0 4.4em; font-size: .78em; font-weight: 600; white-space: nowrap; }
.al-fs__track { position: relative; flex: 1 1 auto; height: 1.35em; background: #F2F5F8;
  border-radius: .25em; overflow: hidden; }
.al-fs__bar { position: absolute; top: .18em; bottom: .18em; border-radius: .22em;
  display: flex; align-items: center; padding: 0 .4em; color: #fff; font-size: .64em; font-weight: 600;
  white-space: nowrap; overflow: hidden; transform: scaleX(0); transform-origin: left;
  transition: transform .6s var(--al-ease); }
.al-card--case.is-visible .al-fs__bar { transform: scaleX(1); }
.al-fs__bar--teal { background: #0E8C97; }
.al-fs__bar--blue { background: #0176D3; }
.al-fs__bar--amber { background: #D97A2B; }
.al-fs__bar--green { background: #2E844A; }
.al-fs__now { position: absolute; top: -.1em; bottom: -.1em; width: 0; border-left: 1.5px dashed #0176D3; z-index: 2; }
.al-fs__now::after { content: "now"; position: absolute; top: -1em; left: 50%; transform: translateX(-50%);
  font-family: var(--al-font-mono); font-size: .58em; color: #0176D3; }
.al-fs__strip { display: flex; align-items: center; gap: .5em; font-size: .78em; margin-top: .1em; }
.al-fs__strip b { font-family: var(--al-font-mono); }
.al-fs__mobile {
  position: absolute; right: .5em; bottom: .5em; width: 33%; z-index: 3;
  background: #fff; border: 1px solid #E3E7ED; border-radius: .5em;
  box-shadow: 0 10px 22px -8px rgba(3,20,40,.4); padding: .5em .55em;
  display: flex; flex-direction: column; gap: .28em;
}
.al-fs__mobile .al-mtitle { font-size: .78em; font-weight: 700; }
.al-fs__mobile .al-maddr { font-size: .66em; color: #5C6470; }
.al-fs__check { font-size: .68em; display: flex; align-items: center; gap: .3em; }
.al-fs__check--on { color: #2E844A; }
.al-fs__check--off { color: #A6AEB9; }
.al-fs__mobile .al-scr-btn { align-self: stretch; text-align: center; margin-top: .2em; font-size: .72em; padding: .35em; }

/* --- 3. Hospitality — guest portal ---------------------------------------- */
.al-hos__hero {
  display: flex; flex-direction: column; gap: .1em;
  position: relative; border-radius: .45em; overflow: hidden; padding: .7em .8em; color: #fff;
  background: linear-gradient(120deg,#B9925A 0%,#7A5E52 55%,#4A3A5E 100%);
}
.al-hos__hero .al-greet { font-weight: 700; font-size: 1.05em; }
.al-hos__hero .al-sub { font-size: .74em; opacity: .92; }
.al-hos__plat { position: absolute; top: .6em; right: .7em; }
.al-hos__pts { display: flex; align-items: center; gap: .5em; }
.al-hos__pts .al-prog { flex: 1 1 auto; }
.al-hos__pts .al-pct { font-weight: 700; font-size: .82em; color: #6E5525; }
.al-hos__cards { display: flex; gap: .55em; }
.al-hos__cc { flex: 1 1 0; min-width: 0; border: 1px solid #EADFC7; border-radius: .4em; padding: .5em .55em;
  display: flex; flex-direction: column; gap: .2em; }
.al-hos__cc .al-cc-t { font-size: .82em; font-weight: 700; }
.al-hos__cc .al-cc-m { font-size: .68em; color: #5C6470; }

/* --- 4. Healthcare — patient dashboard ------------------------------------ */
.al-hc__top { display: flex; gap: .7em; align-items: center; }
.al-ring { position: relative; flex: 0 0 auto; width: 4.1em; height: 4.1em; }
.al-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.al-ring__track { fill: none; stroke: #E1EAF2; stroke-width: 5; }
.al-ring__arc { fill: none; stroke: #0176D3; stroke-width: 5; stroke-linecap: round;
  stroke-dasharray: 100 100; stroke-dashoffset: 100; transition: stroke-dashoffset .9s var(--al-ease); }
.al-card--case.is-visible .al-ring__arc { stroke-dashoffset: var(--dash,13); }
.al-ring__num { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 1.25em; color: #032D60; }
.al-ring__cap { display: block; text-align: center; }
.al-hc__intake { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: .3em; }
.al-hc__pctrow { display: flex; align-items: center; gap: .5em; }
.al-hc__pctrow .al-prog { flex: 1 1 auto; }
.al-hc__pctrow .al-pct { font-weight: 700; font-size: .82em; color: #0B5CAB; }
.al-hc__chips { display: flex; gap: .4em; flex-wrap: wrap; }
.al-hc__vitals { display: flex; align-items: center; gap: .6em; background: #F7F9FB;
  border: 1px solid #E3E7ED; border-radius: .4em; padding: .45em .6em; }
.al-hc__vitals .al-vlab { display: flex; flex-direction: column; }
.al-hc__vitals .al-vlab b { font-family: var(--al-font-mono); font-weight: 700; font-size: .92em; }
.al-ecg { flex: 1 1 auto; height: 2em; }
.al-ecg path { fill: none; stroke: #E8536A; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 320; stroke-dashoffset: 320; transition: stroke-dashoffset 1.1s var(--al-ease); }
.al-card--case.is-visible .al-ecg path { stroke-dashoffset: 0; }
.al-hc__appt { display: flex; align-items: center; gap: .5em; border: 1px solid #E3E7ED; border-radius: .4em; padding: .4em .55em; }
.al-avatar { flex: 0 0 auto; width: 1.9em; height: 1.9em; border-radius: 50%; background: #EAF4FD;
  color: #0B5CAB; font-weight: 700; font-size: .72em; display: flex; align-items: center; justify-content: center; }
.al-hc__appt .al-ap-m { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.al-hc__appt .al-ap-m span { font-size: .66em; color: #5C6470; }
.al-hc__appt .al-ap-m b { font-size: .82em; font-weight: 700; }

/* --- 5. Fintech — sync + reconciliation ----------------------------------- */
.al-fin__dot { display: inline-block; width: .5em; height: .5em; border-radius: 50%; background: #03B4A7; }
.al-card--case.is-visible .al-fin__pulse .al-fin__dot { animation: al-fin-pulse 1.8s ease-in-out infinite; }
@keyframes al-fin-pulse { 0%,100% { box-shadow: 0 0 0 0 rgba(3,180,167,.5); } 50% { box-shadow: 0 0 0 .35em rgba(3,180,167,0); } }
.al-fin__diagram { display: flex; align-items: center; gap: .5em; }
.al-fin__tile { flex: 1 1 0; text-align: center; font-size: .78em; font-weight: 700; padding: .4em .3em;
  border-radius: .4em; border: 1px solid #E3E7ED; background: #F7F9FB; }
.al-fin__tile--sf { color: #0B5CAB; background: #EAF4FD; border-color: #CFE4F8; }
.al-fin__tile--xero { color: #0A7268; background: #E5F7F5; border-color: #CDEDE9; }
.al-fin__swap { flex: 0 0 auto; font-size: 1.1em; color: #5433B8; font-weight: 700; }
.al-fin__count { flex: 0 0 auto; font-size: .68em; color: #5C6470; text-align: left; line-height: 1.2; }
.al-fin__count b { display: block; font-family: var(--al-font-mono); color: #16181D; font-size: 1.05em; }
.al-tbl { display: flex; flex-direction: column; font-size: .74em; }
.al-tbl__r { display: flex; align-items: center; gap: .5em; padding: .22em 0; border-top: 1px solid #EEF1F5; }
.al-tbl__r--head { border-top: 0; color: #8A93A0; font-family: var(--al-font-mono); font-size: .86em; letter-spacing: .04em; }
.al-tbl__r > span:nth-child(1) { flex: 1 1 auto; font-family: var(--al-font-mono); }
.al-tbl__r > span:nth-child(2),
.al-tbl__r > span:nth-child(3) { flex: 0 0 3.6em; text-align: right; font-family: var(--al-font-mono); }
.al-tbl__r > span:nth-child(4) { flex: 0 0 auto; text-align: right; }
.al-fin__foot { display: flex; align-items: flex-end; gap: .7em; }
.al-fin__foot .al-bars { height: 2.6em; flex: 1 1 50%; }
.al-fin__foot .al-fr { flex: 1 1 50%; display: flex; flex-direction: column; gap: .1em; }
.al-fin__foot .al-fr b { font-weight: 800; font-size: 1.15em; color: #032D60; font-family: var(--al-font-mono); }

/* --- 6. Automotive — vehicle portal --------------------------------------- */
.al-auto__hero { display: flex; gap: .6em; background: #F7F9FB; border: 1px solid #E3E7ED;
  border-radius: .45em; padding: .5em; }
.al-auto__photo { flex: 0 0 40%; border-radius: .35em; overflow: hidden; aspect-ratio: 3 / 2; }
.al-auto__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.al-auto__info { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: .18em; }
.al-auto__plate { align-self: flex-start; font-family: var(--al-font-mono); font-weight: 700; font-size: .72em;
  background: #EEF1F5; border-radius: .25em; padding: .1em .45em; letter-spacing: .05em; }
.al-auto__km { font-weight: 800; font-size: 1.05em; font-family: var(--al-font-mono); color: #032D60; }
.al-auto__due { font-size: .68em; color: #5C6470; display: flex; align-items: center; gap: .3em; }
.al-auto__due i { width: .5em; height: .5em; border-radius: 50%; background: #BA0517; flex: 0 0 auto; }
.al-auto__charge { display: flex; align-items: center; gap: .4em; font-size: .68em; }
.al-auto__charge .al-prog { flex: 1 1 auto; height: .4em; }
.al-auto__tiles { display: flex; gap: .45em; }
.al-auto__tile { flex: 1 1 0; text-align: center; border: 1px solid #E3E7ED; border-radius: .4em;
  padding: .4em .2em; font-size: .68em; font-weight: 600; display: flex; flex-direction: column; align-items: center; gap: .15em; }
.al-auto__tile .al-ico { font-size: 1.1em; }
.al-auto__track { display: flex; flex-direction: column; gap: .3em; }
.al-auto__steps { position: relative; display: flex; justify-content: space-between; padding: 0 .3em; }
.al-auto__steps::before { content: ""; position: absolute; left: 1em; right: 1em; top: .45em; height: 2px; background: #E3E7ED; }
.al-auto__steps::after { content: ""; position: absolute; left: 1em; top: .45em; height: 2px; width: 0; background: #0176D3;
  transition: width .8s var(--al-ease); }
.al-card--case.is-visible .al-auto__steps::after { width: 42%; }
.al-auto__step { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: .2em; font-size: .64em; }
.al-auto__step i { width: .7em; height: .7em; border-radius: 50%; background: #C4D2E4; border: 2px solid #fff; box-shadow: 0 0 0 1px #C4D2E4; }
.al-auto__step--done i { background: #0176D3; box-shadow: 0 0 0 1px #0176D3; }
.al-auto__step--now i  { background: #0176D3; box-shadow: 0 0 0 1px #0176D3; }
.al-auto__step--now { font-weight: 700; color: #0B5CAB; }

/* --- 3-up (home) / narrow: hide the dense screens, fall back to clean panel -
   The home page keeps the original <img> laptop, so these v2 screens only ever
   render inside `.al-grid--cases`. Nothing to override for `.al-grid--3`. ---- */

/* --- Reduced motion: the global `*` rule (§20) already forces
   transition/animation durations to ~0, and initScrollReveal adds .is-visible
   immediately, so every screen paints in its final/filled state with no motion.
   No extra rules needed here. ------------------------------------------------ */

/* =============================================================================
   CASE-STUDY DETAIL HERO — reuse the redesigned card laptop + per-industry
   product screen (the exact `.al-laptop` block from /case-studies) on a
   gradient "stage" so the detail hero reads as the same design family as its
   card. Additive; light-theme; the whole media column is decorative
   (aria-hidden). Screen animations mirror the card's, but are gated on the hero
   media's own `.is-visible` (added by the .al-reveal system) since the hero
   laptop is NOT inside `.al-card--case`.
   ============================================================================= */

/* Gradient stage behind the laptop — echoes the card's media panel. */
.al-cs-stage {
  position: relative;
  border-radius: 22px;
  padding: clamp(1.75rem, 4vw, 2.75rem);
  overflow: hidden;
  box-shadow: 0 32px 70px -22px rgba(2, 15, 38, .7);
}
.al-cs-stage::after {                     /* 1px inner hairline for definition */
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); pointer-events: none;
}
/* Per-industry gradients — identical stops to the cards (see §CARD REDESIGN v2). */
.al-cs-stage--beverage    { background: linear-gradient(168deg,#F0A93B 0%,#D97A2B 30%,#8A3F1E 66%,#061627 100%); }
.al-cs-stage--field       { background: linear-gradient(168deg,#17B0A6 0%,#0E8C97 30%,#0A4E6E 66%,#061627 100%); }
.al-cs-stage--hospitality { background: linear-gradient(168deg,#E8C88B 0%,#B9925A 30%,#4A3A5E 66%,#061627 100%); }
.al-cs-stage--healthcare  { background: linear-gradient(168deg,#3FB0E0 0%,#1E86C7 30%,#0A4877 66%,#061627 100%); }
.al-cs-stage--fintech     { background: linear-gradient(168deg,#7C5CE0 0%,#5433B8 30%,#2A2A6E 66%,#061627 100%); }
.al-cs-stage--auto        { background: linear-gradient(168deg,#5B7A99 0%,#33506F 30%,#1A2C44 66%,#061627 100%); }

/* Query container that scales the laptop's cqw-based type. */
.al-cs-stage__laptop {
  container-type: inline-size;
  width: 100%; max-width: 460px; margin-inline: auto;
}
.al-cs-stage .al-laptop { width: 100%; }

/* Per-industry screen accents — the card scopes these to `.al-case--*`, which
   isn't present on the hero, so re-map them onto the stage to match the card. */
.al-cs-stage--hospitality .al-prog__fill { background: #B9925A; }
.al-cs-stage--auto .al-prog__fill { background: #2E844A; }
.al-cs-stage--fintech .al-bar { background: #CBBEF2; }
.al-cs-stage--fintech .al-bar--accent { background: #5433B8; }

/* Bring the reused card screens alive on the hero (mirror of the
   `.al-card--case.is-visible …` triggers, gated on this column's reveal). */
.al-cs-hero__media.is-visible .al-bar { transform: scaleY(1); }
.al-cs-hero__media.is-visible .al-prog__fill { transform: scaleX(1); }
.al-cs-hero__media.is-visible .al-fs__bar { transform: scaleX(1); }
.al-cs-hero__media.is-visible .al-ring__arc { stroke-dashoffset: var(--dash, 13); }
.al-cs-hero__media.is-visible .al-ecg path { stroke-dashoffset: 0; }
.al-cs-hero__media.is-visible .al-auto__steps::after { width: 42%; }
.al-cs-hero__media.is-visible .al-fin__pulse .al-fin__dot { animation: al-fin-pulse 1.8s ease-in-out infinite; }

/* =============================================================================
   SERVICES PAGE (al-sv-*) — additive layer for the redesigned /services.html.
   Prefixed al-sv-* to avoid collisions. Reuses existing tokens + the case-study
   screen primitives (.al-laptop / .al-scr / .al-chip / .al-prog / .al-bars).
   Three self-contained blocks:
     A. Connected-platform flow diagram (navy surface, animated pulse)
     B. Capability pillars — sticky rail navigator + six pillar blocks
     C. Pillar visual panels (stat / prog / bars / agent laptop) + responsive
   Accent discipline: teal = Data, blue = Sales/core, purple = Agentforce/AI,
   navy = practice work. Every animation degrades to a static frame under
   prefers-reduced-motion (see the block at the very end).
   ============================================================================= */

/* ---- A. CONNECTED PLATFORM ------------------------------------------------ */
.al-sv-platform__head { max-width: 60ch; }
.al-sv-platform__lede {
  margin-top: var(--al-space-4);
  font-size: 17px;
  line-height: 1.65;
  color: rgba(214, 228, 245, .90);   /* AA on navy */
  max-width: 62ch;
}

.al-sv-flow {
  display: flex;
  align-items: stretch;
  gap: var(--al-space-3);
  margin-top: var(--al-space-8);
}

.al-sv-node {
  --a: var(--al-blue-60);
  --a-light: #8FD0FF;
  flex: 1 1 0;
  min-width: 0;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--al-space-2);
  padding: var(--al-space-5) var(--al-space-5) var(--al-space-6);
  border-radius: var(--al-radius-panel);
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .14);
  box-shadow: 0 12px 32px rgba(0, 0, 0, .22);
  overflow: hidden;
}
.al-sv-node::before {                 /* accent top rule */
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 3px;
  background: var(--a);
}
.al-sv-node--data  { --a: var(--al-teal);    --a-light: #7FE0D8; }
.al-sv-node--sales { --a: var(--al-blue-60); --a-light: #8FD0FF; }
.al-sv-node--agent { --a: var(--al-purple);  --a-light: #C9A6F5; }

.al-sv-node__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  margin-bottom: var(--al-space-2);
  border-radius: var(--al-radius-card);
  color: var(--a-light);
  background: color-mix(in srgb, var(--a) 22%, transparent);
  border: 1px solid color-mix(in srgb, var(--a) 40%, transparent);
}
.al-sv-node__icon svg { width: 26px; height: 26px; }

.al-sv-node__step {
  font-family: var(--al-font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--a-light);
}
.al-sv-node__title {
  font-size: 22px;
  line-height: 1.2;
  font-weight: 700;
  color: var(--al-white);
}
.al-sv-node__desc {
  font-size: 15px;
  line-height: 1.55;
  color: rgba(214, 228, 245, .82);
}

/* Connector rail + travelling pulse (decorative) */
.al-sv-conn {
  flex: 0 1 56px;
  min-width: 28px;
  align-self: center;
  position: relative;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, rgba(143, 208, 255, .12), rgba(143, 208, 255, .45), rgba(143, 208, 255, .12));
}
.al-sv-conn::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 9px;
  height: 9px;
  margin-top: -4.5px;
  border-radius: 50%;
  background: #BCE2FF;
  box-shadow: 0 0 10px 1px rgba(143, 208, 255, .85);
  animation: al-sv-flow-x 2.6s var(--al-ease) infinite;
}
.al-sv-conn:nth-of-type(4)::after { animation-delay: 1.3s; } /* second connector offset */

@keyframes al-sv-flow-x {
  0%   { left: 0;    opacity: 0; }
  12%  { opacity: 1; }
  88%  { opacity: 1; }
  100% { left: 100%; opacity: 0; }
}

.al-sv-platform__foot {
  display: flex;
  align-items: flex-start;
  gap: var(--al-space-3);
  margin-top: var(--al-space-7);
  padding-top: var(--al-space-5);
  border-top: 1px solid rgba(255, 255, 255, .16);
  font-size: 15px;
  line-height: 1.6;
  color: rgba(214, 228, 245, .90);
  max-width: 74ch;
}
.al-sv-platform__foot-mark {
  flex: 0 0 auto;
  color: #8FD0FF;
  font-weight: 700;
}

/* ---- B. CAPABILITY PILLARS ------------------------------------------------ */
.al-sv-pillars {
  display: grid;
  grid-template-columns: 244px minmax(0, 1fr);
  gap: var(--al-space-8);
  align-items: start;
}

/* Sticky navigator */
.al-sv-rail {
  position: sticky;
  top: calc(var(--al-navbar-h) + var(--al-space-5));
  display: flex;
  flex-direction: column;
  gap: var(--al-space-3);
}
.al-sv-rail__label {
  font-family: var(--al-font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--al-ink-500);
  padding-left: var(--al-space-3);
}
.al-sv-rail__list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  border-left: 2px solid var(--al-border);
}
.al-sv-rail__link {
  display: flex;
  align-items: center;
  gap: var(--al-space-3);
  margin-left: -2px;                  /* overlap the list border */
  padding: 10px var(--al-space-3);
  border-left: 2px solid transparent;
  font-size: 15px;
  font-weight: 500;
  color: var(--al-ink-500);
  transition: color var(--al-t-fast) var(--al-ease),
              border-color var(--al-t-fast) var(--al-ease),
              background-color var(--al-t-fast) var(--al-ease);
}
.al-sv-rail__link:hover { color: var(--al-navy-90); }
.al-sv-rail__link.is-active {
  color: var(--al-navy-90);
  font-weight: 600;
  border-left-color: var(--al-blue-60);
  background: linear-gradient(90deg, var(--al-blue-10), transparent);
}
.al-sv-rail__dot {
  flex: 0 0 auto;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--al-ink-500);
  transition: transform var(--al-t-fast) var(--al-ease);
}
.al-sv-rail__link.is-active .al-sv-rail__dot { transform: scale(1.25); }
/* Per-pillar dot accents (order matches the pillar blocks) */
.al-sv-rail__list li:nth-child(1) .al-sv-rail__dot { background: var(--al-navy-70); }
.al-sv-rail__list li:nth-child(2) .al-sv-rail__dot { background: var(--al-blue-60); }
.al-sv-rail__list li:nth-child(3) .al-sv-rail__dot { background: var(--al-blue-60); }
.al-sv-rail__list li:nth-child(4) .al-sv-rail__dot { background: var(--al-purple); }
.al-sv-rail__list li:nth-child(5) .al-sv-rail__dot { background: var(--al-teal); }
.al-sv-rail__list li:nth-child(6) .al-sv-rail__dot { background: var(--al-navy-70); }
.al-sv-rail__cta { margin-top: var(--al-space-4); justify-content: center; }

/* Pillar blocks */
.al-sv-pillars__list {
  display: flex;
  flex-direction: column;
  gap: var(--al-space-8);
}
.al-sv-pillar {
  --sv: var(--al-blue-60);
  --sv-t: var(--al-blue-70);
  --sv-tint: var(--al-blue-10);
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: var(--al-space-7);
  align-items: start;
  scroll-margin-top: calc(var(--al-navbar-h) + var(--al-space-6));
  padding: var(--al-space-6) 0 var(--al-space-6) var(--al-space-6);
  border-top: 1px solid var(--al-border);
}
.al-sv-pillar::before {               /* accent left rule */
  content: "";
  position: absolute;
  left: 0;
  top: var(--al-space-6);
  width: 4px;
  height: 44px;
  border-radius: var(--al-radius-pill);
  background: var(--sv);
}
.al-sv-pillar--advisory { --sv: var(--al-navy-70); --sv-t: var(--al-navy-70); --sv-tint: var(--al-navy-tint); }
.al-sv-pillar--dev      { --sv: var(--al-blue-60); --sv-t: var(--al-blue-70); --sv-tint: var(--al-blue-10); }
.al-sv-pillar--sales    { --sv: var(--al-blue-60); --sv-t: var(--al-blue-70); --sv-tint: var(--al-blue-10); }
.al-sv-pillar--agent    { --sv: var(--al-purple);  --sv-t: var(--al-purple-70); --sv-tint: var(--al-purple-tint); }
.al-sv-pillar--data     { --sv: var(--al-teal);    --sv-t: var(--al-teal-70);   --sv-tint: var(--al-teal-tint); }
.al-sv-pillar--support  { --sv: var(--al-navy-70); --sv-t: var(--al-navy-70); --sv-tint: var(--al-navy-tint); }

.al-sv-pillar__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--al-space-2);
  font-family: var(--al-font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--sv-t);
  margin-bottom: var(--al-space-3);
}
.al-sv-pillar__idx {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 26px;
  padding: 2px 6px;
  border-radius: var(--al-radius-pill);
  background: var(--sv-tint);
  color: var(--sv-t);
  font-weight: 700;
}
.al-sv-pillar__title {
  font-size: 28px;
  line-height: 1.2;
  font-weight: 700;
  color: var(--al-navy-90);
  margin-bottom: var(--al-space-4);
}
.al-sv-pillar__lede {
  font-size: 16px;
  line-height: 1.65;
  color: var(--al-ink-900);
  margin-bottom: var(--al-space-5);
  max-width: 54ch;
}
.al-sv-pillar__list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--al-space-2) var(--al-space-5);
  margin-bottom: var(--al-space-5);
}
.al-sv-pillar__list li {
  position: relative;
  padding-left: 20px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--al-ink-900);
}
.al-sv-pillar__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .55em;
  width: 9px;
  height: 2px;
  border-radius: 2px;
  background: var(--sv);
}
.al-sv-pillar__rel { margin-top: var(--al-space-2); }
.al-sv-pillar__rel a { color: var(--sv-t); font-weight: 500; }
.al-sv-pillar__rel a:hover { text-decoration: underline; text-underline-offset: 2px; }

/* ---- C. PILLAR VISUAL PANELS ---------------------------------------------- */
.al-sv-pillar__aside { align-self: stretch; }

.al-sv-panel {
  display: flex;
  flex-direction: column;
  gap: var(--al-space-4);
  padding: var(--al-space-5);
  background: var(--al-white);
  border: 1px solid var(--al-border);
  border-radius: var(--al-radius-panel);
  box-shadow: 0 10px 28px rgba(3, 45, 96, .07);
}
.al-sv-panel__label {
  font-family: var(--al-font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--sv-t);
}
.al-sv-panel__cap {
  margin-top: auto;
  padding-top: var(--al-space-2);
  font-size: 13px;
  line-height: 1.5;
  color: var(--al-ink-500);
}

/* Big metric */
.al-sv-metric { display: flex; flex-direction: column; gap: 2px; }
.al-sv-metric--row { flex-direction: row; align-items: center; }
.al-sv-metric__num {
  font-size: 40px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--al-navy-90);
  font-variant-numeric: tabular-nums;
}
.al-sv-metric__cap {
  font-size: 14px;
  line-height: 1.4;
  color: var(--al-ink-500);
  max-width: 30ch;
}

/* Label + progress + value rows */
.al-sv-row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 6px var(--al-space-3);
}
.al-sv-row__label { font-size: 14px; color: var(--al-ink-900); }
.al-sv-row__val {
  grid-row: 1 / 2;
  grid-column: 2 / 3;
  font-family: var(--al-font-mono);
  font-size: 13px;
  font-weight: 700;
  color: var(--al-navy-90);
  text-align: right;
}
.al-sv-row .al-prog { grid-column: 1 / -1; }

/* Per-pillar accent for progress fills + bars (reuse case-study primitives) */
.al-sv-pillar--data  .al-prog__fill { background: var(--al-teal); }
.al-sv-pillar--data  .al-bar--accent { background: var(--al-teal); }
.al-sv-pillar--agent .al-prog__fill { background: var(--al-purple); }
.al-sv-pillar--agent .al-bar--accent { background: var(--al-purple); }

/* Reveal triggers — the panels aren't inside .al-card--case, so re-map the
   case-study screen animations onto this aside's own reveal (.al-reveal adds
   .is-visible; under reduced-motion it is added immediately -> filled frame). */
.al-sv-pillar__aside.is-visible .al-prog__fill { transform: scaleX(1); }
.al-sv-pillar__aside.is-visible .al-bar { transform: scaleY(1); }

/* Bars wrapper (gives .al-bars a height outside the cqw laptop context) */
.al-sv-barwrap { height: 84px; }
.al-sv-barwrap--sm { height: 52px; }
.al-sv-barwrap .al-bars { height: 100%; }
.al-sv-barwrap .al-bar { border-radius: 3px 3px 0 0; }

/* Architecture layer stack */
.al-sv-stack { display: flex; flex-direction: column; gap: 0; }
.al-sv-stack__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--al-space-3);
  padding: var(--al-space-3) var(--al-space-4);
  border: 1px solid var(--al-border);
  border-radius: var(--al-radius-card);
  background: var(--al-surface);
  font-size: 14px;
  font-weight: 600;
  color: var(--al-navy-90);
}
.al-sv-stack__row--core {
  background: var(--al-blue-10);
  border-color: #CBE3F7;
}
.al-sv-stack__chips { display: inline-flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; }
.al-sv-stack__flow {
  display: flex;
  justify-content: center;
  height: 16px;
}
.al-sv-stack__flowdot {
  width: 2px;
  height: 100%;
  background: linear-gradient(180deg, var(--al-border), var(--sv));
}

/* Data Cloud identity-merge row */
.al-sv-merge {
  display: flex;
  align-items: center;
  gap: var(--al-space-3);
  padding: var(--al-space-4);
  border: 1px solid var(--al-border);
  border-radius: var(--al-radius-card);
  background: var(--al-surface);
}
.al-sv-merge__srcs { display: inline-flex; flex-direction: column; gap: 4px; }
.al-sv-merge__arrow { color: var(--al-teal-70); font-weight: 700; font-size: 18px; }
.al-sv-merge__out { display: flex; flex-direction: column; gap: 2px; }
.al-sv-merge__out b { font-size: 16px; color: var(--al-navy-90); }

/* Agentforce laptop console */
.al-sv-laptop {
  container-type: inline-size;
  width: 100%;
  max-width: 440px;
  margin-inline: auto;
}
.al-sv-laptop .al-laptop { width: 100%; }
.al-sv-agent__dot {
  display: inline-block;
  width: .5em; height: .5em;
  border-radius: 50%;
  background: currentColor;
}
.al-sv-agent__msg {
  max-width: 88%;
  padding: .5em .7em;
  font-size: .82em;
  line-height: 1.4;
  border-radius: .6em;
}
.al-sv-agent__msg--user {
  align-self: flex-end;
  background: var(--al-blue-10);
  color: var(--al-navy-90);
  border-bottom-right-radius: .2em;
}
.al-sv-agent__msg--bot {
  align-self: flex-start;
  background: #F1F3F6;
  color: #16181D;
  border-bottom-left-radius: .2em;
}
.al-sv-agent__action {
  display: flex;
  flex-direction: column;
  gap: .3em;
  padding: .55em .65em;
  border: 1px solid #E5D7F8;
  border-left: 3px solid var(--al-purple);
  border-radius: .5em;
  background: #FBF8FF;
}
.al-sv-agent__arow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5em;
  font-size: .76em;
  color: var(--al-ink-500);
}
.al-sv-agent__guards { display: flex; flex-wrap: wrap; gap: .4em; }

/* Pillar reveal stagger */
.al-sv-pillar .al-sv-pillar__aside { transition-delay: 80ms; }

/* ---- RESPONSIVE ----------------------------------------------------------- */
@media (max-width: 991px) {
  .al-sv-flow { flex-direction: column; }
  .al-sv-conn {
    width: 2px;
    height: 44px;
    align-self: center;
    background: linear-gradient(180deg, rgba(143, 208, 255, .12), rgba(143, 208, 255, .45), rgba(143, 208, 255, .12));
  }
  .al-sv-conn::after {
    top: 0;
    left: 50%;
    margin-top: 0;
    margin-left: -4.5px;
    animation-name: al-sv-flow-y;
  }

  /* Rail becomes a horizontal chip strip above the pillars */
  .al-sv-pillars { grid-template-columns: 1fr; gap: var(--al-space-6); }
  .al-sv-rail {
    position: static;
    top: auto;
    gap: var(--al-space-3);
  }
  .al-sv-rail__label { padding-left: 0; }
  .al-sv-rail__list {
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--al-space-2);
    border-left: 0;
  }
  .al-sv-rail__link {
    margin-left: 0;
    padding: 8px 14px;
    border: 1px solid var(--al-border);
    border-radius: var(--al-radius-pill);
  }
  .al-sv-rail__link.is-active {
    border-color: var(--al-blue-60);
    background: var(--al-blue-10);
  }
  .al-sv-rail__cta { display: none; }  /* CTA already lives in the closing band */
}

@keyframes al-sv-flow-y {
  0%   { top: 0;    opacity: 0; }
  12%  { opacity: 1; }
  88%  { opacity: 1; }
  100% { top: 100%; opacity: 0; }
}

@media (max-width: 767px) {
  .al-sv-pillar {
    grid-template-columns: 1fr;
    gap: var(--al-space-5);
    padding-left: var(--al-space-5);
  }
  .al-sv-pillar__list { grid-template-columns: 1fr; }
  .al-sv-pillar__title { font-size: 24px; }
  .al-sv-pillar .al-sv-pillar__aside { transition-delay: 0ms; }
  .al-sv-node__title { font-size: 20px; }
}

/* ---- REDUCED MOTION ------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  /* Freeze the travelling pulse; leave the static gradient rail visible. */
  .al-sv-conn::after { animation: none; opacity: .9; left: 50%; margin-left: -4.5px; top: 50%; margin-top: -4.5px; }
  /* Fills / bars are set to their final frame immediately by initScrollReveal
     (.is-visible added at once), and the global reduced-motion rule zeroes the
     transition duration — so panels paint filled with no motion. */
}

/* =============================================================================
   SERVICES PAGE REDESIGN (al-sv-* v2) — additive layer for the approved
   /services.html rebuild. Replaces the old 3-node flow + sticky-rail pillars
   with: a layered platform stack (navy), a 7-card product grid + featured
   Agentforce showcase (surface), an engineering-practices row (white), and a
   grouped tech-&-stack chip panel (surface). Uses ONLY existing :root tokens and
   reuses the case-study screen primitives (.al-laptop / .al-scr / .al-cs-chip /
   .al-prog / .al-sv-agent__*). Accent discipline: purple = Agentforce/AI,
   teal = Data/Integration, blue = Sales/core, navy = practices. Every animation
   degrades to a static frame under prefers-reduced-motion (block at the end).
   ============================================================================= */

/* ---- Shared section head (surface/white sections 3–5) --------------------- */
.al-sv-head { max-width: 62ch; margin-bottom: var(--al-space-7); }
.al-sv-head__lede {
  margin-top: var(--al-space-3);
  font-size: 17px;
  line-height: 1.65;
  color: var(--al-ink-900);
  max-width: 60ch;
}

/* ---- SECTION 2: LAYERED PLATFORM STACK (navy) ----------------------------- */
.al-sv-layers {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  margin-top: var(--al-space-8);
}
.al-sv-layer {
  --la: #8FD0FF;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--al-space-3);
  padding: var(--al-space-5) var(--al-space-6);
  border-radius: var(--al-radius-panel);
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .14);
  box-shadow: 0 12px 32px rgba(0, 0, 0, .22);
  overflow: hidden;
}
.al-sv-layer::before {                /* accent edge */
  content: "";
  position: absolute;
  background: var(--la);
}
/* Top two tiers: accent LEFT edge */
.al-sv-layer--automate::before,
.al-sv-layer--act::before { left: 0; top: 0; bottom: 0; width: 4px; }
/* Base tier: teal TOP edge — the foundation slab everything rests on */
.al-sv-layer--foundation::before { left: 0; right: 0; top: 0; height: 4px; }

.al-sv-layer--automate   { --la: #C9A6F5; }   /* purple  · Agentforce/AI */
.al-sv-layer--act        { --la: #8FD0FF; }   /* blue    · products */
.al-sv-layer--foundation { --la: #7FE0D8; }   /* teal    · platform/integration */

.al-sv-layer__label {
  font-family: var(--al-font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--la);
}
.al-sv-layer__title {
  font-size: 22px;
  line-height: 1.2;
  font-weight: 700;
  color: var(--al-white);
}
.al-sv-layer__sub {
  font-size: 15px;
  line-height: 1.55;
  color: rgba(214, 228, 245, .82);
  max-width: 68ch;
}
.al-sv-layer__pills {
  display: flex;
  flex-wrap: wrap;
  gap: var(--al-space-2);
}
.al-sv-layer__pill {
  font-family: var(--al-font-mono);
  font-size: 13px;
  font-weight: 500;
  padding: 6px 14px;
  border-radius: var(--al-radius-pill);
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .18);
  color: rgba(214, 228, 245, .92);
}
/* Products tier: identical pills carry a subtle blue edge to echo the tier accent */
.al-sv-layer--act .al-sv-layer__pill { border-color: rgba(143, 208, 255, .30); }

/* Vertical connector rail + upward pulse-dot between tiers (decorative) */
.al-sv-rung {
  align-self: center;
  position: relative;
  width: 2px;
  height: 32px;
  border-radius: 2px;
  background: linear-gradient(180deg, rgba(143, 208, 255, .12), rgba(143, 208, 255, .45), rgba(143, 208, 255, .12));
}
.al-sv-rung::after {
  content: "";
  position: absolute;
  left: 50%;
  margin-left: -4.5px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #BCE2FF;
  box-shadow: 0 0 10px 1px rgba(143, 208, 255, .85);
  animation: al-sv-rise 2.6s var(--al-ease) infinite;
}
@keyframes al-sv-rise {
  0%   { top: 100%; opacity: 0; }   /* rise from the foundation upward */
  12%  { opacity: 1; }
  88%  { opacity: 1; }
  100% { top: 0;    opacity: 0; }
}

/* ---- SECTION 3: FEATURED SHOWCASE ----------------------------------------- */
.al-sv-feature {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--al-space-7);
  align-items: center;
  margin-bottom: var(--al-space-8);
  padding: var(--al-space-6);
  background: var(--al-white);
  border: 1px solid var(--al-border);
  border-radius: var(--al-radius-panel);
  box-shadow: 0 10px 28px rgba(3, 45, 96, .07);
}
.al-sv-feature__stage { min-width: 0; }
.al-sv-feature__aside {
  display: flex;
  flex-direction: column;
  gap: var(--al-space-4);
  min-width: 0;
}
.al-sv-feature__label {
  font-family: var(--al-font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--al-purple-70);
}
.al-sv-feature__desc {
  font-size: 16px;
  line-height: 1.6;
  color: var(--al-ink-900);
  max-width: 52ch;
}
/* Scope the Data Cloud tile inside the feature to teal (panel label + fill). */
.al-sv-panel--data { --sv-t: var(--al-teal-70); }
.al-sv-feature .al-prog__fill { background: var(--al-teal); }
/* The feature isn't a .al-card--case / .al-sv-pillar__aside, so re-map the
   case-study reveal trigger onto its own .al-reveal .is-visible state. */
.al-sv-feature.is-visible .al-prog__fill { transform: scaleX(1); }

/* ---- SECTION 3: PRODUCT CARD GRID ----------------------------------------- */
.al-sv-prod-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--al-space-5);
}
.al-sv-prod {
  --pa: var(--al-blue-60);
  --pa-t: var(--al-blue-70);
  --pa-tint: var(--al-blue-10);
  display: flex;
  flex-direction: column;
  gap: var(--al-space-3);
  padding: var(--al-space-5);
  background: var(--al-white);
  border: 1px solid var(--al-border);
  border-radius: var(--al-radius-card);
  /* Card is its own .al-reveal target: opacity carries the scroll-in fade (the
     base .al-reveal opacity transition would otherwise be clobbered by this
     shorthand), transform carries both the reveal slide and the hover lift, and
     box-shadow/border carry hover. Kept snappy so the staggered reveal reads
     smoothly and hover stays instant once the stagger delay is cleared (JS). */
  transition: opacity var(--al-t-reveal) ease-out,
              transform var(--al-t-fast) var(--al-ease),
              box-shadow var(--al-t-fast) var(--al-ease),
              border-color var(--al-t-fast) var(--al-ease);
}
.al-sv-prod:hover {
  box-shadow: var(--al-shadow-hover);
  transform: translateY(-2px);
  border-color: #D3DDE9;
}
.al-sv-prod--blue   { --pa: var(--al-blue-60); --pa-t: var(--al-blue-70);   --pa-tint: var(--al-blue-10); }
.al-sv-prod--teal   { --pa: var(--al-teal);    --pa-t: var(--al-teal-70);   --pa-tint: var(--al-teal-tint); }
.al-sv-prod--purple { --pa: var(--al-purple);  --pa-t: var(--al-purple-70); --pa-tint: var(--al-purple-tint); }

.al-sv-prod__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--al-radius-btn);
  background: var(--pa-tint);
  color: var(--pa-t);
}
.al-sv-prod__icon svg { width: 22px; height: 22px; }
.al-sv-prod__name {
  font-size: 20px;
  line-height: 1.3;
  font-weight: 600;
  color: var(--al-navy-90);
}
.al-sv-prod__desc {
  font-size: 15px;
  line-height: 1.55;
  color: var(--al-ink-900);
}
.al-sv-prod__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--al-space-2);
}
.al-sv-prod__rel {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: auto;
  padding-top: var(--al-space-2);
  font-size: 14px;
}
.al-sv-prod__rel a {
  color: var(--pa-t);
  font-weight: 500;
  width: fit-content;
}
.al-sv-prod__rel a:hover { text-decoration: underline; text-underline-offset: 2px; }

/* ---- Reusable chip modifiers: grey recolor + compact size ------------------
   Additive over .al-cs-chip (case-study tech strip). Base component untouched. */
.al-cs-chip--grey {
  color: var(--al-ink-900);
  background: linear-gradient(180deg, #FBFCFD 0%, #EEF1F5 100%);
  border-color: var(--al-border);
}
.al-cs-chip--grey::before { background: var(--al-ink-500); }
.al-cs-chip--grey:hover {
  border-color: #CBD3DD;
  background: linear-gradient(180deg, var(--al-white) 0%, #E7EBF0 100%);
}
.al-cs-chip--sm {
  font-size: 13px;
  padding: 6px 12px 6px 10px;
  gap: 7px;
}
.al-cs-chip--sm::before { width: 6px; height: 6px; }

/* Salesforce-palette accents for stack / tech chips */
.al-cs-chip--integration {
  color: var(--al-teal-70);
  background: linear-gradient(180deg, #F3FBFA 0%, var(--al-teal-tint) 100%);
  border-color: rgba(3, 180, 167, .28);
}
.al-cs-chip--integration::before { background: var(--al-teal); }
.al-cs-chip--integration:hover {
  border-color: rgba(3, 180, 167, .45);
  background: linear-gradient(180deg, var(--al-white) 0%, #D7F3F0 100%);
}
.al-cs-chip--ai {
  color: var(--al-purple-70);
  background: linear-gradient(180deg, #F8F3FD 0%, var(--al-purple-tint) 100%);
  border-color: rgba(117, 38, 227, .26);
}
.al-cs-chip--ai::before { background: var(--al-purple); }
.al-cs-chip--ai:hover {
  border-color: rgba(117, 38, 227, .42);
  background: linear-gradient(180deg, var(--al-white) 0%, #E9DBFA 100%);
}

/* Stack matrix: larger Salesforce-style chips */
.al-sv-stack-panel .al-cs-chips { gap: var(--al-space-3) var(--al-space-4); }
.al-sv-stack-panel .al-cs-chip {
  font-size: 18px;
  padding: 14px 22px 14px 16px;
  gap: 12px;
}
.al-sv-stack-panel .al-cs-chip::before {
  width: 8px;
  height: 8px;
}

/* ---- SECTION 4: ENGINEERING PRACTICES (white) ----------------------------- */
.al-sv-practice-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--al-space-5);
}
.al-sv-practice {
  display: flex;
  flex-direction: column;
  gap: var(--al-space-3);
  padding: var(--al-space-5);
  background: var(--al-white);
  border: 1px solid var(--al-border);
  border-radius: var(--al-radius-card);
}
.al-sv-practice__idx {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: flex-start;
  min-width: 30px;
  padding: 3px 8px;
  border-radius: var(--al-radius-btn);
  background: var(--al-navy-tint);
  color: var(--al-navy-70);
  font-family: var(--al-font-mono);
  font-size: 13px;
  font-weight: 500;
}
.al-sv-practice__title {
  font-size: 19px;
  line-height: 1.3;
  font-weight: 600;
  color: var(--al-navy-90);
}
.al-sv-practice__list {
  display: flex;
  flex-direction: column;
  gap: var(--al-space-2);
}
.al-sv-practice__list li {
  position: relative;
  padding-left: 18px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--al-ink-900);
}
.al-sv-practice__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .55em;
  width: 8px;
  height: 2px;
  border-radius: 2px;
  background: var(--al-blue-60);
}

/* ---- SECTION 5: GROUPED TECH & STACK PANEL (surface) ---------------------- */
.al-sv-stack-panel {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: var(--al-space-6) var(--al-space-7);
  background: var(--al-white);
  border: 1px solid var(--al-border);
  border-radius: var(--al-radius-panel);
  box-shadow: 0 10px 28px rgba(3, 45, 96, .06);
}
.al-sv-stack-group {
  display: flex;
  flex-direction: column;
  gap: var(--al-space-3);
  padding-block: var(--al-space-5);
}
.al-sv-stack-group + .al-sv-stack-group { border-top: 1px solid var(--al-border); }
.al-sv-stack-group:first-child { padding-top: 0; }
.al-sv-stack-group:last-child  { padding-bottom: 0; }
.al-sv-stack-group__label {
  font-family: var(--al-font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--al-ink-500);
}

/* ---- RESPONSIVE ----------------------------------------------------------- */
@media (max-width: 991px) {
  .al-sv-prod-grid      { grid-template-columns: repeat(2, 1fr); }
  .al-sv-practice-grid  { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767px) {
  .al-sv-feature { grid-template-columns: 1fr; gap: var(--al-space-6); }
  .al-sv-prod-grid { grid-template-columns: 1fr; }
  .al-sv-layer__title { font-size: 20px; }
  .al-sv-stack-panel { padding: var(--al-space-5) var(--al-space-5); }
}
@media (max-width: 479px) {
  .al-sv-practice-grid { grid-template-columns: 1fr; }
}

/* ---- REDUCED MOTION ------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  /* Freeze the upward pulse-dot at the rail's midpoint — leaves a static rail. */
  .al-sv-rung::after { animation: none; top: 50%; margin-top: -4.5px; opacity: .9; }
  /* Product-card hover lift is disabled (mirrors the global .al-card rule). */
  .al-sv-prod:hover { transform: none; }
  /* The feature's Match-confidence fill is set to its final frame immediately by
     initScrollReveal (.is-visible added at once); the global reduced-motion rule
     zeroes the transition, so it paints filled with no sweep. */
}

/* =============================================================================
   SERVICES PAGE — OPENER OVERRIDES (hero section removed)
   The immersive hero was removed; the layered platform section is now the page
   opener. These rules (a) make it fill the first viewport below the sticky
   navbar, (b) size the promoted <h1>, (c) compress internal spacing so the whole
   stack fits one screen on typical laptop heights, and (d) retire the removed
   product-card "Related work" links. All additive; tokens only.
   ============================================================================= */

/* The connected-platform section now carries the page's single <h1>. Keep it
   controlled (not the 56px global h1) so the stack fits the viewport. */
.al-sv-platform__head h1 {
  font-size: clamp(28px, 3.4vw, 40px);
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: -0.015em;
}

/* Compress the stack so head + three tiers + foot fit one screen. */
.al-sv-platform__lede { font-size: 16px; line-height: 1.6; max-width: 78ch; }
.al-sv-layers        { margin-top: var(--al-space-5); }
.al-sv-layer         { padding: var(--al-space-4) var(--al-space-5); gap: var(--al-space-2); }
.al-sv-rung          { height: 18px; }
.al-sv-platform__foot {
  margin-top: var(--al-space-4);
  padding-top: var(--al-space-4);
}

/* Fill the first viewport (below the 68px sticky navbar) and center the stack.
   Desktop/tablet only — on phones the stack flows naturally at its own height. */
@media (min-width: 768px) {
  .al-sv-platform {
    display: flex;
    align-items: center;
    min-height: calc(100svh - var(--al-navbar-h));
    padding-block: var(--al-space-6);
  }
  .al-sv-platform > .al-container { width: 100%; }
}

/* Case-study links were removed from the product cards. */
.al-sv-prod__rel { display: none; }

/* =============================================================================
   SERVICES — SECTION SWAP: LIGHT opener + DARK product showcase
   The connected-platform opener is now a LIGHT (white) section; the products
   section is the dark brand-gradient showcase with solid-navy cards that flip to
   white on hover. Page opts out of the particle field (<body data-no-star-field>)
   so both backgrounds are static CSS. Additive over the al-sv-* base rules above;
   tokens only. Every accent respects the -70 text tokens for AA.
   ============================================================================= */

/* ---- A. OPENER (connected platform) → LIGHT MODE ------------------------- */
.al-sv-platform { background: var(--al-white); }

/* Head + foot: dark heading, muted lede/foot on white. */
.al-sv-platform__lede      { color: var(--al-ink-500); }
.al-sv-platform__foot      { color: var(--al-ink-500); border-top-color: var(--al-border); }
.al-sv-platform__foot-mark { color: var(--al-blue-60); }

/* Tiles: glass → solid light cards with a soft shadow. */
.al-sv-layer {
  background: var(--al-white);
  border: 1px solid var(--al-border);
  box-shadow: 0 6px 20px rgba(3, 45, 96, .06);
}
/* Accent edge → full-strength brand token; label → AA -70 text token. */
.al-sv-layer--automate   { --la: var(--al-purple);  --la-text: var(--al-purple-70); }
.al-sv-layer--act        { --la: var(--al-blue-60); --la-text: var(--al-blue-70); }
.al-sv-layer--foundation { --la: var(--al-teal);    --la-text: var(--al-teal-70); }
.al-sv-layer__label { color: var(--la-text); }
.al-sv-layer__title { color: var(--al-navy-90); }
.al-sv-layer__sub   { color: var(--al-ink-500); }

/* Pills on light: foundation → grey surface; products → blue tint. */
.al-sv-layer__pill {
  background: var(--al-surface);
  border: 1px solid var(--al-border);
  color: var(--al-ink-900);
}
.al-sv-layer--act .al-sv-layer__pill {
  background: var(--al-blue-10);
  border-color: rgba(1, 118, 211, .22);
  color: var(--al-blue-70);
}

/* Connector rail + pulse → darker blue for visibility on white. */
.al-sv-rung {
  background: linear-gradient(180deg, rgba(1,118,211,.10), rgba(1,118,211,.42), rgba(1,118,211,.10));
}
.al-sv-rung::after {
  background: var(--al-blue-60);
  box-shadow: 0 0 8px 1px rgba(1, 118, 211, .5);
}

/* ---- B. PRODUCTS SHOWCASE → DARK BRAND GRADIENT -------------------------- */
.al-sv-products {
  background-color: var(--al-hero-navy);          /* #021B3A base */
  background-image:
    radial-gradient(1100px 640px at 10% -12%, rgba(1, 118, 211, .34), transparent 60%),
    radial-gradient(950px 640px at 104% 4%, rgba(117, 38, 227, .24), transparent 56%),
    radial-gradient(1050px 760px at 74% 116%, rgba(3, 180, 167, .18), transparent 58%);
  background-repeat: no-repeat;
  color: rgba(255, 255, 255, .82);
}
.al-sv-products .al-sv-head h2      { color: var(--al-white); }
.al-sv-products .al-sv-head__lede   { color: rgba(214, 228, 245, .90); }
.al-sv-products .al-eyebrow         { color: #8FD0FF; }

/* Product cards: solid navy at rest → flip to the white card on hover.
   All colour-carrying props transition so the flip is smooth. */
.al-sv-products .al-sv-prod {
  /* Same dark-glass fill as the featured block (.al-sv-products .al-sv-feature). */
  background: rgba(255, 255, 255, .05);
  border-color: rgba(255, 255, 255, .14);
  transition: opacity var(--al-t-reveal) ease-out,
              transform var(--al-t-fast) var(--al-ease),
              box-shadow var(--al-t-fast) var(--al-ease),
              border-color var(--al-t-fast) var(--al-ease),
              background-color var(--al-t-fast) var(--al-ease);
}
.al-sv-products .al-sv-prod__name { color: var(--al-white); }
.al-sv-products .al-sv-prod__desc { color: rgba(214, 228, 245, .82); }
.al-sv-products .al-sv-prod--blue   { --pa-light: #8FD0FF; }
.al-sv-products .al-sv-prod--teal   { --pa-light: #7FE0D8; }
.al-sv-products .al-sv-prod--purple { --pa-light: #C9A6F5; }
.al-sv-products .al-sv-prod__icon {
  background: color-mix(in srgb, var(--pa) 26%, transparent);
  color: var(--pa-light, #8FD0FF);
}
.al-sv-products .al-sv-prod .al-cs-chip--grey {
  color: rgba(214, 228, 245, .92);
  background: rgba(255, 255, 255, .06);
  border-color: rgba(255, 255, 255, .16);
}
.al-sv-products .al-sv-prod .al-cs-chip--grey::before { background: rgba(255, 255, 255, .5); }

/* Smooth colour flip of the inner bits */
.al-sv-products .al-sv-prod__name,
.al-sv-products .al-sv-prod__desc,
.al-sv-products .al-sv-prod__icon,
.al-sv-products .al-sv-prod .al-cs-chip--grey {
  transition: color var(--al-t-fast) var(--al-ease),
              background-color var(--al-t-fast) var(--al-ease),
              border-color var(--al-t-fast) var(--al-ease);
}

/* Hover: white card (the current light look) + keep the lift + shadow. */
.al-sv-products .al-sv-prod:hover {
  background: var(--al-white);
  border-color: rgba(255, 255, 255, .55);
  /* Even white halo (0 offset + spread) so the flipped-white card glows off the
     dark gradient — a crisp inner ring, a wide soft glow, and a navy drop shadow
     underneath for grounding/depth. */
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .45),
              0 0 40px 8px rgba(255, 255, 255, .32),
              0 16px 40px rgba(3, 45, 96, .30);
  transform: translateY(-2px);
}
.al-sv-products .al-sv-prod:hover .al-sv-prod__name { color: var(--al-navy-90); }
.al-sv-products .al-sv-prod:hover .al-sv-prod__desc { color: var(--al-ink-900); }
.al-sv-products .al-sv-prod:hover .al-sv-prod__icon { background: var(--pa-tint); color: var(--pa-t); }
.al-sv-products .al-sv-prod:hover .al-cs-chip--grey {
  color: var(--al-ink-900);
  background: linear-gradient(180deg, #FBFCFD 0%, #EEF1F5 100%);
  border-color: var(--al-border);
}
.al-sv-products .al-sv-prod:hover .al-cs-chip--grey::before { background: var(--al-ink-500); }

/* ---- C. FEATURED BLOCK on the gradient (dark glass) --------------------- */
.al-sv-products .al-sv-feature {
  background: rgba(255, 255, 255, .05);
  border-color: rgba(255, 255, 255, .14);
  box-shadow: 0 12px 32px rgba(0, 0, 0, .22);
}
.al-sv-products .al-sv-feature__label { color: #C9A6F5; }
.al-sv-products .al-sv-feature__desc  { color: rgba(214, 228, 245, .86); }
/* Data Cloud tile → dark glass */
.al-sv-products .al-sv-panel {
  background: rgba(255, 255, 255, .06);
  border-color: rgba(255, 255, 255, .16);
  box-shadow: none;
}
.al-sv-products .al-sv-panel__label   { color: #7FE0D8; }
.al-sv-products .al-sv-panel__cap     { color: rgba(214, 228, 245, .70); }
.al-sv-products .al-sv-metric__num    { color: var(--al-white); }
.al-sv-products .al-sv-metric__cap    { color: rgba(214, 228, 245, .72); }
.al-sv-products .al-sv-row__label     { color: rgba(214, 228, 245, .86); }
.al-sv-products .al-sv-row__val       { color: var(--al-white); }
.al-sv-products .al-sv-merge__arrow   { color: #7FE0D8; }
.al-sv-products .al-sv-merge__out b   { color: var(--al-white); }
.al-sv-products .al-sv-panel .al-lbl  { color: rgba(214, 228, 245, .78); }
/* Progress track + the merge tile chips → dark-glass variants */
.al-sv-products .al-sv-panel .al-prog { background: rgba(255, 255, 255, .12); }
.al-sv-products .al-sv-panel .al-chip--grey {
  color: rgba(214, 228, 245, .92);
  background: rgba(255, 255, 255, .06);
  border-color: rgba(255, 255, 255, .16);
}

/* =============================================================================
   SERVICES PAGE — APPROVED REBUILD (al-sv-* v3)  [ADDITIVE — appended last]
   Rebuild of /services.html around the approved independence-first structure:
     1. HERO         — light, expertise + credibility stat strip (.al-sv-hero)
     2. CAPABILITIES — 13 services as expandable accordion cards on the dark
                       brand-gradient showcase; dark-glass at rest, flip to the
                       white look on hover OR when expanded (.al-sv-cap*)
     3. HOW WE DELIVER — 6-step process timeline + engagement models (.al-sv-timeline,
                       .al-sv-callout, .al-sv-engage*)
     4. TECH & STACK — reuses the grouped chip panel (.al-sv-stack-*), 7 categories
     5. WHY US       — four proof cards (.al-sv-why-grid / .al-sv-whycard)
   Reuses existing tokens + primitives: .al-container/.al-section, .al-eyebrow,
   .al-btn, .al-stat-strip/[data-countup], .al-reveal, .al-accordion__trigger/
   __panel/__icon (initAccordion), .al-cs-chip(--grey/--sm), .al-cta-band.
   Accent discipline: purple = Agentforce/AI, teal = Data/Integration/Commerce,
   blue = core products/services. AA everywhere; every animation degrades to a
   static frame under prefers-reduced-motion (block at the end). Tokens only.
   ============================================================================= */

/* ---- 1. HERO (light) ------------------------------------------------------ */
.al-sv-hero {
  position: relative;
  overflow: hidden;
  background: var(--al-white);
  padding-block: var(--al-space-9) var(--al-space-8);
}
/* Subtle, legible brand-gradient wash (decorative, no canvas). */
.al-sv-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    radial-gradient(720px 380px at 12% -12%, rgba(1, 118, 211, .10), transparent 60%),
    radial-gradient(680px 420px at 100% 6%, rgba(117, 38, 227, .07), transparent 58%);
}
.al-sv-hero > .al-container { position: relative; z-index: 1; }
.al-sv-hero__inner { max-width: 62ch; }
.al-sv-hero__title {
  font-size: clamp(32px, 4.6vw, 52px);
  line-height: 1.08;
  letter-spacing: -0.02em;
  font-weight: 700;
  margin-bottom: var(--al-space-5);
}
.al-sv-hero__sub {
  font-size: 18px;
  line-height: 1.6;
  color: var(--al-ink-900);
  max-width: 70ch;
  margin-bottom: var(--al-space-6);
}
.al-sv-hero__actions { display: flex; flex-wrap: wrap; gap: var(--al-space-3); }

/* Fill the first viewport (below the 68px sticky navbar) and vertically centre
   the hero content — desktop/tablet only; on phones it flows at its own height. */
@media (min-width: 768px) {
  .al-sv-hero {
    display: flex;
    align-items: center;
    min-height: calc(100svh - var(--al-navbar-h));
    padding-block: var(--al-space-7);
  }
  .al-sv-hero > .al-container { width: 100%; }
}

/* On phones the hero also fills the device height, with the credibility stats
   pinned to the bottom edge so the screen reads as one unit ending on
   "100% Senior-built". Extra bottom padding clears the floating help button. */
@media (max-width: 767px) {
  .al-sv-hero {
    display: flex;
    flex-direction: column;
    min-height: calc(100svh - var(--al-navbar-h));
    min-height: calc(100dvh - var(--al-navbar-h));
    padding-block: var(--al-space-6) var(--al-space-8);
  }
  .al-sv-hero > .al-container {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: var(--al-space-6);
    width: 100%;
  }
  /* Compact the credibility stats into a 2×2 grid with tighter top spacing so all
     four fit on one screen (the global <=479 rule stacks them 1-col, too tall). */
  .al-sv-hero .al-stat-strip {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--al-space-4) var(--al-space-5);
    margin-top: var(--al-space-5);
    padding-top: var(--al-space-5);
  }
}

/* ---- 2. CAPABILITIES — sub-groups + accordion cards ----------------------- */
.al-sv-capgroups {
  display: flex;
  flex-direction: column;
  gap: var(--al-space-8);
}
.al-sv-capgroup__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--al-space-3);
  margin-bottom: var(--al-space-5);
  padding-bottom: var(--al-space-3);
  border-bottom: 1px solid rgba(255, 255, 255, .14);
}
.al-sv-capgroup__kicker {
  font-family: var(--al-font-mono);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #8FD0FF;
}
.al-sv-capgroup__count {
  font-family: var(--al-font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: rgba(214, 228, 245, .70);
}
.al-sv-capgrid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--al-space-5);
  align-items: start;
}

/* Card shell: dark-glass at rest (mirrors the product-showcase treatment). */
.al-sv-cap {
  --pa: var(--al-blue-60);
  --pa-t: var(--al-blue-70);
  --pa-tint: var(--al-blue-10);
  --pa-light: #8FD0FF;
  border-radius: var(--al-radius-card);
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .14);
  overflow: hidden;
  /* opacity carries the scroll-in fade; transform carries reveal slide + hover
     lift (kept at t-fast like .al-sv-prod); colour props carry the flip. */
  transition: opacity var(--al-t-reveal) ease-out,
              transform var(--al-t-fast) var(--al-ease),
              box-shadow var(--al-t-fast) var(--al-ease),
              border-color var(--al-t-fast) var(--al-ease),
              background-color var(--al-t-fast) var(--al-ease);
}
.al-sv-cap--blue   { --pa: var(--al-blue-60); --pa-t: var(--al-blue-70);   --pa-tint: var(--al-blue-10);   --pa-light: #8FD0FF; }
.al-sv-cap--teal   { --pa: var(--al-teal);    --pa-t: var(--al-teal-70);   --pa-tint: var(--al-teal-tint); --pa-light: #7FE0D8; }
.al-sv-cap--purple { --pa: var(--al-purple);  --pa-t: var(--al-purple-70); --pa-tint: var(--al-purple-tint); --pa-light: #C9A6F5; }

/* h3 wraps the trigger (ARIA APG pattern) — neutralise the global h3 type so the
   visual heading is .al-sv-cap__name. */
.al-sv-cap__heading {
  margin: 0;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  letter-spacing: normal;
  color: inherit;
}
/* Trigger: full-width header button (overrides the base .al-accordion__trigger). */
.al-sv-cap__trigger {
  display: flex;
  align-items: center;
  gap: var(--al-space-4);
  width: 100%;
  padding: var(--al-space-5);
  text-align: left;
}
.al-sv-cap__icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--al-radius-btn);
  background: color-mix(in srgb, var(--pa) 26%, transparent);
  color: var(--pa-light);
  transition: background-color var(--al-t-fast) var(--al-ease),
              color var(--al-t-fast) var(--al-ease);
}
.al-sv-cap__icon svg { width: 22px; height: 22px; }
.al-sv-cap__head { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.al-sv-cap__name {
  font-size: 18px;
  line-height: 1.3;
  font-weight: 600;
  color: var(--al-white);
  transition: color var(--al-t-fast) var(--al-ease);
}
.al-sv-cap__desc {
  font-size: 13.5px;
  line-height: 1.45;
  color: rgba(214, 228, 245, .82);
  transition: color var(--al-t-fast) var(--al-ease);
}
.al-sv-cap__trigger .al-accordion__icon {
  flex: 0 0 auto;
  color: var(--pa-light);
}

/* Panel: progressive enhancement — OPEN by default so content is readable if JS
   never runs; the synchronous `html.js` flag (set in <head>) collapses it before
   first paint when JS is present, and initAccordion then drives it. */
.al-sv-cap__panel { max-height: none; }
html.js .al-sv-cap__panel { max-height: 0; }
.al-sv-cap__panel-inner {
  display: flex;
  flex-direction: column;
  gap: var(--al-space-3);
  padding: 0 var(--al-space-5) var(--al-space-5);
}
.al-sv-cap__what {
  font-family: var(--al-font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--pa-light);
  transition: color var(--al-t-fast) var(--al-ease);
}
.al-sv-cap__list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--al-space-1) var(--al-space-4);
}
.al-sv-cap__list li {
  position: relative;
  padding-left: 16px;
  font-size: 13.5px;
  line-height: 1.5;
  color: rgba(214, 228, 245, .90);
  transition: color var(--al-t-fast) var(--al-ease);
}
.al-sv-cap__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .55em;
  width: 8px;
  height: 2px;
  border-radius: 2px;
  background: var(--pa-light);
  transition: background-color var(--al-t-fast) var(--al-ease);
}
.al-sv-cap__chips { margin-top: var(--al-space-1); }
.al-sv-cap__cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: fit-content;
  margin-top: var(--al-space-1);
  font-size: 14px;
  font-weight: 600;
  color: var(--pa-light);
  transition: color var(--al-t-fast) var(--al-ease);
}
.al-sv-cap__cta:hover { text-decoration: underline; text-underline-offset: 2px; }
.al-sv-cap__cta:focus-visible { outline: 2px solid var(--pa-light); outline-offset: 3px; border-radius: 2px; }

/* FLIP: white look on hover OR when the card's trigger is expanded. Panel copy is
   dual-legible — light on dark glass (rest / no-JS) and dark on the flipped-white
   card — so it reads in both states. */
.al-sv-cap:hover,
.al-sv-cap:has(.al-accordion__trigger[aria-expanded="true"]) {
  background: var(--al-white);
  border-color: rgba(255, 255, 255, .55);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .45),
              0 0 40px 8px rgba(255, 255, 255, .28),
              0 16px 40px rgba(3, 45, 96, .30);
}
.al-sv-cap:hover { transform: translateY(-2px); }

.al-sv-cap:hover .al-sv-cap__name,
.al-sv-cap:has(.al-accordion__trigger[aria-expanded="true"]) .al-sv-cap__name { color: var(--al-navy-90); }
.al-sv-cap:hover .al-sv-cap__desc,
.al-sv-cap:has(.al-accordion__trigger[aria-expanded="true"]) .al-sv-cap__desc { color: var(--al-ink-500); }
.al-sv-cap:hover .al-sv-cap__icon,
.al-sv-cap:has(.al-accordion__trigger[aria-expanded="true"]) .al-sv-cap__icon { background: var(--pa-tint); color: var(--pa-t); }
.al-sv-cap:hover .al-accordion__icon,
.al-sv-cap:has(.al-accordion__trigger[aria-expanded="true"]) .al-accordion__icon { color: var(--pa-t); }
.al-sv-cap:hover .al-sv-cap__what,
.al-sv-cap:has(.al-accordion__trigger[aria-expanded="true"]) .al-sv-cap__what { color: var(--pa-t); }
.al-sv-cap:hover .al-sv-cap__list li,
.al-sv-cap:has(.al-accordion__trigger[aria-expanded="true"]) .al-sv-cap__list li { color: var(--al-ink-900); }
.al-sv-cap:hover .al-sv-cap__list li::before,
.al-sv-cap:has(.al-accordion__trigger[aria-expanded="true"]) .al-sv-cap__list li::before { background: var(--pa); }
.al-sv-cap:hover .al-sv-cap__cta,
.al-sv-cap:has(.al-accordion__trigger[aria-expanded="true"]) .al-sv-cap__cta { color: var(--pa-t); }

/* ---- 3. HOW WE DELIVER — process timeline + engagement models (light) ----- */
.al-sv-timeline {
  position: relative;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--al-space-5);
  margin-top: var(--al-space-7);
}
/* Connecting rail behind the node row (horizontal on desktop). */
.al-sv-timeline::before {
  content: "";
  position: absolute;
  top: 21px;
  left: 21px;
  right: 21px;
  height: 2px;
  z-index: 0;
  background: linear-gradient(90deg, var(--al-blue-10), var(--al-blue-60), var(--al-blue-10));
}
.al-sv-step {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: var(--al-space-2);
}
.al-sv-step__node {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: var(--al-radius-pill);
  background: var(--al-white);
  border: 2px solid var(--al-blue-60);
  color: var(--al-blue-70);
  font-family: var(--al-font-mono);
  font-size: 14px;
  font-weight: 500;
}
.al-sv-step__name {
  font-size: 16px;
  font-weight: 600;
  color: var(--al-navy-90);
  line-height: 1.3;
}
.al-sv-step__desc {
  font-size: 14px;
  line-height: 1.5;
  color: var(--al-ink-500);
}

/* Differentiator callout */
.al-sv-callout {
  display: flex;
  align-items: flex-start;
  gap: var(--al-space-4);
  margin-top: var(--al-space-7);
  padding: var(--al-space-5) var(--al-space-6);
  background: var(--al-blue-10);
  border: 1px solid rgba(1, 118, 211, .22);
  border-left: 4px solid var(--al-blue-60);
  border-radius: var(--al-radius-panel);
}
.al-sv-callout__mark { flex: 0 0 auto; color: var(--al-blue-60); font-size: 20px; line-height: 1.4; }
.al-sv-callout p { font-size: 16px; line-height: 1.6; color: var(--al-ink-900); max-width: 82ch; }
.al-sv-callout strong { color: var(--al-navy-90); }

/* Engagement models */
.al-sv-engage-head {
  display: flex;
  align-items: baseline;
  gap: var(--al-space-3);
  flex-wrap: wrap;
  margin-top: var(--al-space-8);
  margin-bottom: var(--al-space-5);
}
.al-sv-engage-kicker { color: var(--al-blue-70); }   /* recolour the mono kicker for the light section */
.al-sv-engage-lede { font-size: 15px; color: var(--al-ink-500); }
.al-sv-engage-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--al-space-5);
}
.al-sv-engage {
  display: flex;
  flex-direction: column;
  gap: var(--al-space-2);
  padding: var(--al-space-5);
  background: var(--al-white);
  border: 1px solid var(--al-border);
  border-top: 3px solid var(--al-blue-60);
  border-radius: var(--al-radius-card);
  transition: transform var(--al-t-fast) var(--al-ease),
              box-shadow var(--al-t-fast) var(--al-ease);
}
.al-sv-engage:hover { transform: translateY(-2px); box-shadow: var(--al-shadow-hover); }
.al-sv-engage__name { font-size: 18px; font-weight: 600; color: var(--al-navy-90); line-height: 1.3; }
.al-sv-engage__desc { font-size: 14px; line-height: 1.5; color: var(--al-ink-500); }

/* ---- 5. WHY US — proof cards (light) -------------------------------------- */
.al-sv-why-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--al-space-5);
}
.al-sv-whycard {
  display: flex;
  flex-direction: column;
  gap: var(--al-space-3);
  padding: var(--al-space-5);
  background: var(--al-white);
  border: 1px solid var(--al-border);
  border-radius: var(--al-radius-card);
}
.al-sv-whycard__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--al-radius-btn);
  background: var(--al-blue-10);
  color: var(--al-blue-70);
}
.al-sv-whycard__icon svg { width: 22px; height: 22px; }
.al-sv-whycard__title { font-size: 18px; font-weight: 600; color: var(--al-navy-90); line-height: 1.3; }
.al-sv-whycard__desc { font-size: 15px; line-height: 1.55; color: var(--al-ink-500); }

/* ---- RESPONSIVE ----------------------------------------------------------- */
@media (max-width: 991px) {
  .al-sv-engage-grid { grid-template-columns: repeat(2, 1fr); }
  .al-sv-why-grid    { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767px) {
  .al-sv-capgrid { grid-template-columns: 1fr; }
  .al-sv-cap__list { grid-template-columns: 1fr; }

  /* Timeline → vertical rail with node beside each step. */
  .al-sv-timeline { grid-template-columns: 1fr; gap: var(--al-space-5); }
  .al-sv-timeline::before {
    top: 21px;
    bottom: 21px;
    left: 21px;
    right: auto;
    width: 2px;
    height: auto;
    background: linear-gradient(180deg, var(--al-blue-10), var(--al-blue-60), var(--al-blue-10));
  }
  .al-sv-step {
    display: grid;
    grid-template-columns: 42px 1fr;
    column-gap: var(--al-space-4);
    row-gap: 2px;
  }
  .al-sv-step__node { grid-column: 1; grid-row: 1; align-self: start; }
  .al-sv-step__name { grid-column: 2; grid-row: 1; align-self: center; }
  .al-sv-step__desc { grid-column: 2; grid-row: 2; }
}
@media (max-width: 479px) {
  .al-sv-engage-grid { grid-template-columns: 1fr; }
  .al-sv-why-grid    { grid-template-columns: 1fr; }
}

/* ---- REDUCED MOTION ------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  /* Flip is instant (global rule zeroes transition-duration); drop the hover lift. */
  .al-sv-cap:hover { transform: none; }
  .al-sv-engage:hover { transform: none; }
  /* Accordion panels: initAccordion opens/closes instantly via inline max-height;
     the `html.js` collapse still applies, so panels start closed and open with no
     animation. No timeline/stat animations to freeze here (reveal + count-ups are
     rendered to their final frame immediately by initScrollReveal under reduce). */
}

/* =============================================================================
   SERVICES — PROCESS TIMELINE ANIMATION (v2 — "stepper completing")
   The ::before rail becomes a faint STATIC TRACK that always holds the structure;
   a ::after coloured FILL sweeps along it (left→right desktop, top→bottom mobile),
   and each node LIGHTS UP in sequence as the fill reaches it — its number turning
   solid, its label rising in, with a soft one-shot ping. Driven by .is-visible on
   .al-sv-timeline (it carries .al-reveal). Structure survives with no JS (faint
   track + outline numbered nodes + visible labels); under prefers-reduced-motion
   everything snaps to the completed state (global rule zeroes transitions) and the
   ping is gated off.
   ============================================================================= */
/* Container carries no block fade — the fill + nodes carry the motion. */
.al-sv-timeline.al-reveal { opacity: 1; transform: none; }

/* Per-step index for a single calc-based stagger (fill sweeps ~0 → 1s). */
.al-sv-step { --i: 0; }
.al-sv-step:nth-child(2) { --i: 1; }
.al-sv-step:nth-child(3) { --i: 2; }
.al-sv-step:nth-child(4) { --i: 3; }
.al-sv-step:nth-child(5) { --i: 4; }
.al-sv-step:nth-child(6) { --i: 5; }

/* Rail: ::before is now a faint track; ::after is the coloured fill that grows. */
.al-sv-timeline::before { background: rgba(1, 118, 211, .16); }
.al-sv-timeline::after {
  content: "";
  position: absolute;
  z-index: 0;
  top: 21px;
  left: 21px;
  right: 21px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--al-blue-60), var(--al-purple));
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 1.3s var(--al-ease);
}
.al-sv-timeline.is-visible::after { transform: scaleX(1); }

/* Nodes light up in sequence — the default outline state stays valid with no JS. */
.al-sv-step__node {
  transition: background-color .45s var(--al-ease), border-color .45s var(--al-ease),
              color .45s var(--al-ease), box-shadow .45s var(--al-ease),
              transform .45s var(--al-ease);
  transition-delay: calc(var(--i, 0) * .2s);
}
.al-sv-timeline.is-visible .al-sv-step__node {
  background: var(--al-blue-60);
  border-color: var(--al-blue-60);
  color: #fff;
  transform: scale(1.06);
  box-shadow: 0 0 0 5px rgba(1, 118, 211, .12);
}

/* Labels rise in, staggered (JS only — fully visible without JS). */
html.js .al-sv-step__name,
html.js .al-sv-step__desc {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .5s var(--al-ease), transform .5s var(--al-ease);
  transition-delay: calc(var(--i, 0) * .2s);
}
.al-sv-timeline.is-visible .al-sv-step__name,
.al-sv-timeline.is-visible .al-sv-step__desc { opacity: 1; transform: none; }

/* One-shot ping ring as each node activates (motion-OK only). */
.al-sv-step__node::after {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: var(--al-radius-pill);
  border: 2px solid var(--al-blue-60);
  opacity: 0;
  pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
  .al-sv-timeline.is-visible .al-sv-step__node::after {
    animation: al-sv-node-ping .8s var(--al-ease) 1 both;
    animation-delay: calc(var(--i, 0) * .2s + .15s);
  }
}
@keyframes al-sv-node-ping {
  0%   { opacity: .55; transform: scale(.85); }
  100% { opacity: 0;   transform: scale(1.75); }
}

/* Mobile: the fill runs top→bottom to match the vertical rail. */
@media (max-width: 767px) {
  .al-sv-timeline::after {
    top: 21px;
    bottom: 21px;
    left: 21px;
    right: auto;
    width: 2px;
    height: auto;
    background: linear-gradient(180deg, var(--al-blue-60), var(--al-purple));
    transform: scaleY(0);
    transform-origin: center top;
  }
  .al-sv-timeline.is-visible::after { transform: scaleY(1); }
}

/* =============================================================================
   SERVICES — WHY US (enriched)
   Elevated proof cards on a soft brand-gradient wash: accent top-rule, gradient
   icon tile, hover lift. Overrides the flat .al-sv-whycard base above.
   ============================================================================= */
.al-sv-why { position: relative; overflow: hidden; }
.al-sv-why::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    radial-gradient(700px 380px at 6% -12%, rgba(1, 118, 211, .09), transparent 60%),
    radial-gradient(640px 400px at 100% 4%, rgba(117, 38, 227, .06), transparent 58%);
}
.al-sv-why > .al-container { position: relative; z-index: 1; }

.al-sv-whycard {
  position: relative;
  overflow: hidden;
  gap: var(--al-space-4);
  padding: var(--al-space-6) var(--al-space-5);
  border-radius: var(--al-radius-panel);
  box-shadow: 0 6px 18px rgba(3, 45, 96, .05);
  transition: transform var(--al-t-fast) var(--al-ease),
              box-shadow var(--al-t-fast) var(--al-ease),
              border-color var(--al-t-fast) var(--al-ease);
}
.al-sv-whycard::before {                 /* accent top-rule */
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--al-blue-60), var(--al-navy-70));
}
.al-sv-whycard__icon {
  width: 48px;
  height: 48px;
  border-radius: var(--al-radius-card);
  background: linear-gradient(150deg, var(--al-blue-60), var(--al-navy-90));
  color: #fff;
  box-shadow: 0 6px 16px rgba(1, 118, 211, .26);
}
.al-sv-whycard__icon svg { width: 24px; height: 24px; }
.al-sv-whycard__title { font-size: 19px; }
.al-sv-whycard:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 36px rgba(3, 45, 96, .13);
  border-color: #D3DDE9;
}
@media (prefers-reduced-motion: reduce) {
  .al-sv-whycard:hover { transform: none; }
}