:root {
  --bg: #000000;
  --surface: rgba(20, 24, 36, 0.62);
  --surface-strong: #0c0e18;
  --surface-dark: #0b1f4a;
  --surface-darker: #060f2c;
  --text: #e6edf7;
  --text-soft: #a5b0c4;
  --line: rgba(100, 180, 255, 0.2);
  --accent: #22d0ea;
  --accent-strong: #4aa4ff;
  --accent-deep: #6fe0ff;
  --accent-soft: rgba(34, 208, 234, 0.14);
  --gold: #8fa1ff;
  --ink: #ffffff;
  --shadow: 0 30px 90px rgba(0, 0, 0, 0.6);
  --shadow-lg: 0 50px 140px rgba(0, 0, 0, 0.8);
  --radius: 28px;
  --radius-sm: 18px;
  --max-width: 1200px;
  --ring-gradient: conic-gradient(from 180deg at 50% 50%,
    #1e86ee 0deg,
    #22d0ea 90deg,
    #2f3ad8 210deg,
    #1e86ee 360deg);
  --brand-gradient: linear-gradient(135deg, #2f3ad8 0%, #1e86ee 45%, #22d0ea 100%);
  /* Darker ramp for surfaces that carry white text (keeps contrast at 4.5:1 or better) */
  --brand-gradient-ui: linear-gradient(135deg, #2f3ad8 0%, #1a5fd0 55%, #0b6fa8 100%);
  --brand-gradient-soft: linear-gradient(135deg,
    rgba(47, 58, 216, 0.12),
    rgba(30, 134, 238, 0.1),
    rgba(34, 208, 234, 0.12));
}

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

html {
  scroll-behavior: smooth;
  /* In-page jumps land below the sticky header (script.js measures it into --header-h) */
  scroll-padding-top: calc(var(--header-h, 5.6rem) + 0.75rem);
  /* Keep decorative glows (e.g. the hero orb) from widening the page on phones */
  overflow-x: clip;
}

body {
  margin: 0;
  min-width: 320px;
  background: #000000;
  color: var(--text);
  font-family: "Poppins", "Avenir Next", "Segoe UI", "Helvetica Neue", sans-serif;
  line-height: 1.6;
  overflow-x: clip;
}

/* Subtle grid + noise layer */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
  background-size: 120px 120px;
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.55), transparent 82%);
  pointer-events: none;
  z-index: 0;
}

/* Floating aurora blobs in the background */
body::after {
  content: "";
  display: none;
}

@keyframes aurora-drift {
  0% { transform: translate3d(0, 0, 0); }
  50% { transform: translate3d(-2%, 2%, 0); }
  100% { transform: translate3d(2%, -1%, 0); }
}

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

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

button {
  font: inherit;
}

.site-shell {
  position: relative;
  z-index: 1;
}

.site-header,
.hero,
.section,
.site-footer {
  width: min(calc(100% - 2rem), var(--max-width));
  margin-inline: auto;
}

/* ==========================
   HEADER
   ========================== */
.site-header {
  position: sticky;
  top: 0.8rem;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1rem;
  padding: 0.75rem 0.5rem 0.75rem 1rem;
  backdrop-filter: blur(22px) saturate(1.3);
  -webkit-backdrop-filter: blur(22px) saturate(1.3);
  /* Almost opaque: nav text keeps 4.5:1 even over the light logo rails */
  background: rgba(14, 18, 28, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.06) inset,
    0 20px 50px rgba(0, 0, 0, 0.5);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
  min-width: 0;
}

.brand-logo {
  display: block;
  flex: none;
  width: 3rem;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 6px 14px rgba(30, 134, 238, 0.28));
  transition: transform 320ms ease;
}

.brand:hover .brand-logo {
  transform: rotate(-6deg) scale(1.04);
}

.brand-copy {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}

.brand-copy strong,
h1,
h2,
h3 {
  font-family: "Poppins", "Avenir Next", "Segoe UI", "Helvetica Neue", sans-serif;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.brand-copy strong {
  font-size: 1.5rem;
  font-weight: 700;
  background: var(--brand-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.brand-copy span {
  color: var(--text-soft);
  font-size: 0.9rem;
  letter-spacing: 0.02em;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 1.4rem;
  color: var(--text-soft);
  font-weight: 500;
}

.site-nav a {
  position: relative;
  padding: 0.3rem 0;
  transition: color 200ms ease;
}

.site-nav a:not(.nav-cta)::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 2px;
  background: var(--brand-gradient);
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1);
}

.site-nav a:not(.nav-cta):hover,
.site-nav a:not(.nav-cta):focus-visible {
  color: var(--ink);
}

.site-nav a:not(.nav-cta):hover::after,
.site-nav a:not(.nav-cta):focus-visible::after {
  transform: scaleX(1);
}

.nav-cta {
  padding: 0.85rem 2.6rem !important;
  border-radius: 999px;
  background: var(--brand-gradient-ui);
  color: #ffffff;
  font-size: 0.9rem;
  box-shadow: 0 10px 26px rgba(30, 70, 196, 0.35);
  transition: transform 200ms ease, box-shadow 200ms ease;
  white-space: nowrap;
  margin-right: 0.3rem;
}

.nav-cta:hover,
.nav-cta:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 16px 36px rgba(30, 70, 196, 0.45);
}

.nav-toggle {
  display: none;
  padding: 0.65rem 0.9rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(20, 24, 36, 0.8);
  color: var(--text);
  cursor: pointer;
}

/* ==========================
   HERO
   ========================== */
.hero {
  position: relative;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 2rem;
  align-items: start;
  padding: 5rem 0 2rem;
}

/* Decorative realistic earth orb behind hero */
.hero::before {
  content: "";
  position: absolute;
  top: -2rem;
  right: -8rem;
  width: 36rem;
  height: 36rem;
  border-radius: 50%;
  pointer-events: none;
  z-index: -1;
  background:
    /* Sphere shading overlay (terminator + specular) */
    radial-gradient(circle at 35% 35%, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0) 28%),
    radial-gradient(circle at 50% 50%, transparent 45%, rgba(4,12,40,0.55) 100%),
    /* Equirectangular earth texture, tiled horizontally, mapped onto the sphere */
    url("assets/earth-texture.jpg");
  background-repeat: no-repeat, no-repeat, repeat-x;
  background-size: cover, cover, auto 100%;
  background-position: center, center, 0% center;
  box-shadow:
    inset -3rem -4rem 8rem rgba(4, 12, 40, 0.65),
    inset 2rem 2rem 5rem rgba(255, 255, 255, 0.06),
    0 0 5rem rgba(110, 190, 255, 0.4),
    0 0 12rem rgba(34, 120, 220, 0.3);
}

/* Atmosphere halo */
.hero::after {
  content: "";
  position: absolute;
  top: -4rem;
  right: -10rem;
  width: 40rem;
  height: 40rem;
  border-radius: 50%;
  pointer-events: none;
  z-index: -2;
  background: radial-gradient(circle, rgba(140, 200, 255, 0.25) 44%, rgba(110, 180, 255, 0.1) 50%, transparent 58%);
  filter: blur(6px);
}

.hero-copy,
.hero-panel,
.section,
.site-footer {
  position: relative;
}

.hero-copy,
.hero-panel {
  display: grid;
  align-content: start;
}

h1 {
  margin: 0;
  max-width: 12ch;
  font-size: clamp(3rem, 6.2vw, 5.8rem);
  line-height: 1.02;
  color: var(--ink);
  letter-spacing: 0;
  word-spacing: 0.02em;
}

h1 .accent-word {
  background: var(--brand-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-style: italic;
  display: inline-block;
  padding: 0 0.15em 0.05em;
  margin: 0 -0.05em;
  line-height: 1.08;
}

.lede {
  max-width: 62ch;
  margin: 1.6rem 0 0;
  font-size: 1.1rem;
  color: var(--text-soft);
  text-wrap: pretty;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
}

.hero-actions {
  margin-top: 2rem;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  min-height: 3rem;
  padding: 0.85rem 1.35rem;
  border-radius: 999px;
  cursor: pointer;
  font-weight: 600;
  transition:
    transform 220ms cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 220ms ease,
    background 220ms ease;
}

.button svg {
  transition: transform 220ms ease;
}

.button:hover svg,
.button:focus-visible svg {
  transform: translateX(3px);
}

.button:hover,
.button:focus-visible {
  transform: translateY(-2px);
}

.button:focus-visible,
.nav-toggle:focus-visible {
  outline: 2px solid var(--accent-strong);
  outline-offset: 2px;
}

.site-nav a:focus-visible {
  outline: 2px solid var(--accent-strong);
  outline-offset: 3px;
  border-radius: 4px;
}

.button-primary {
  background: var(--brand-gradient-ui);
  color: #ffffff;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.4) inset,
    0 14px 30px rgba(30, 70, 196, 0.35);
}

.button-primary:hover,
.button-primary:focus-visible {
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.5) inset,
    0 20px 42px rgba(30, 70, 196, 0.48);
}

.button-secondary {
  background: rgba(20, 24, 36, 0.7);
  border: 1px solid rgba(100, 180, 255, 0.25);
  color: var(--text);
  backdrop-filter: blur(12px);
}

.button-secondary:hover,
.button-secondary:focus-visible {
  background: rgba(30, 40, 60, 0.9);
  border-color: rgba(100, 180, 255, 0.45);
  box-shadow: 0 12px 30px rgba(30, 134, 238, 0.25);
}

.hero-highlights {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 1rem;
}

.hero-highlights article,
.service-card,
.engagement-card,
.journey-card,
.contact-panel,
.panel-surface {
  position: relative;
  background: var(--surface);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.hero-highlights article {
  padding: 1.3rem 1.35rem;
  overflow: hidden;
  transition: transform 260ms ease, box-shadow 260ms ease;
}

.hero-highlights article:hover {
  transform: translateY(-3px);
  box-shadow: 0 32px 80px rgba(0, 0, 0, 0.6);
  border-color: rgba(100, 180, 255, 0.28);
}

.hero-highlights p {
  margin: 0;
  color: var(--text-soft);
}

.hero-panel {
  display: grid;
  gap: 1rem;
  align-content: start;
}

/* Dark glass panel with wave motif */
.panel-surface {
  position: relative;
  overflow: hidden;
  padding: 1.7rem;
  background:
    linear-gradient(160deg, rgba(4, 17, 47, 0.97), rgba(18, 70, 196, 0.92)),
    radial-gradient(circle at top right, rgba(34, 208, 234, 0.28), transparent 40%);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.06) inset,
    0 30px 80px rgba(4, 17, 47, 0.3);
}

/* Flowing striation backdrop inspired by the logo */
.panel-surface::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    28deg,
    transparent 0 5px,
    rgba(34, 208, 234, 0.06) 5px 6px
  );
  mask-image: radial-gradient(ellipse 90% 60% at 85% 30%, #000 0%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse 90% 60% at 85% 30%, #000 0%, transparent 70%);
  pointer-events: none;
}

.panel-surface::after {
  content: "";
  position: absolute;
  inset: auto -18% -24% auto;
  width: 280px;
  height: 280px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(34, 208, 234, 0.42), transparent 62%);
  pointer-events: none;
}

.panel-surface > * {
  position: relative;
  z-index: 1;
}

.signal-list {
  display: grid;
  gap: 0.9rem;
  margin-top: 0.3rem;
}

.signal-list article {
  position: relative;
  padding: 0.95rem 1rem 0.95rem 1.2rem;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 16px;
  transition: background 240ms ease;
}

.signal-list article:hover {
  background: rgba(255, 255, 255, 0.07);
}

.signal-list h3,
.signal-list h2 {
  margin: 0 0 0.3rem;
  font-size: 1.18rem;
  color: #ffffff;
}

.signal-list p,
.panel-metrics span {
  margin: 0;
  color: rgba(255, 255, 255, 0.82);
}

.panel-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.9rem;
  margin-top: 1.3rem;
}

.panel-metrics div {
  position: relative;
  padding-top: 0.95rem;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.panel-metrics strong {
  display: block;
  margin-bottom: 0.3rem;
  font-size: 0.95rem;
  color: #ffffff;
}

.tech-label {
  margin: 0.2rem 0 0;
  color: var(--text-soft);
  font-size: 0.92rem;
  font-weight: 500;
}

.tech-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.tech-chips li {
  padding: 0.42rem 0.9rem;
  border-radius: 999px;
  background: rgba(20, 24, 36, 0.72);
  border: 1px solid rgba(100, 180, 255, 0.22);
  color: #cfe0ff;
  font-size: 0.84rem;
  font-weight: 500;
  line-height: 1.3;
  transition: border-color 220ms ease, color 220ms ease, background 220ms ease;
}

.tech-chips li:hover {
  border-color: rgba(34, 208, 234, 0.6);
  background: rgba(34, 208, 234, 0.1);
  color: #ffffff;
}

/* ==========================
   SECTIONS
   ========================== */
.section {
  padding: 4rem 0;
}

#services .section-heading,
#delivery .section-heading,
#stack .section-heading,
#engagements .section-heading {
  grid-template-columns: 1fr;
}

#services .section-heading h2,
#delivery .section-heading h2,
#stack .section-heading h2,
#engagements .section-heading h2 {
  max-width: none;
}

#services .section-support,
#delivery .section-support,
#stack .section-support,
#engagements .section-support {
  max-width: none;
  justify-self: start;
}

.section-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 430px);
  gap: 0.9rem 1.6rem;
  align-items: start;
}

.section-heading h2 {
  margin: 0;
  max-width: 16ch;
  font-size: clamp(2.2rem, 4.2vw, 3.9rem);
  line-height: 0.98;
  letter-spacing: -0.03em;
  color: var(--ink);
  text-wrap: balance;
}

.section-slate .section-heading h2,
.section-ink .section-heading h2 {
  color: #ffffff;
}

.section-support,
.section-copy {
  margin: 0;
  color: var(--text-soft);
  font-size: 1.04rem;
  text-wrap: pretty;
}

.section-support {
  max-width: 38ch;
  align-self: start;
  justify-self: end;
}

/* ==========================
   SERVICES CAROUSEL
   ========================== */
.services-carousel {
  margin-top: 1.6rem;
}

.services-grid,
.engagement-grid,
.journey-grid {
  display: grid;
  gap: 1rem;
}

.services-grid {
  grid-auto-flow: column;
  grid-auto-columns: minmax(19rem, 23rem);
  grid-template-columns: none;
  align-items: stretch;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 0.75rem 0.15rem 1.25rem;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.services-grid::-webkit-scrollbar {
  display: none;
  height: 0;
  width: 0;
}

.services-grid::-webkit-scrollbar-thumb {
  background: transparent;
}

.services-grid::-webkit-scrollbar-track {
  background: transparent;
}

.services-grid:focus-visible {
  outline: 2px solid var(--accent-strong);
  outline-offset: 0.25rem;
}

.service-card {
  position: relative;
  padding: 1.6rem 1.5rem;
  height: 100%;
  overflow: visible;
  background: rgba(18, 22, 34, 0.88);
  /* Hairline brand-tinted border gives definition without a shadow band */
  border: 1px solid rgba(100, 180, 255, 0.18);
  box-shadow: none;
  transition:
    transform 260ms cubic-bezier(0.22, 1, 0.36, 1),
    border-color 260ms ease,
    box-shadow 260ms ease;
}

.service-card:hover {
  transform: translateY(-4px);
  border-color: rgba(100, 180, 255, 0.45);
  box-shadow: 0 18px 40px -8px rgba(30, 134, 238, 0.4);
}

/* Tag chips inside cards */
/* Absorb the trailing letter-spacing overhang so text sits truly centered */

/* Card outcome line */

/* Edge fade masks on carousel track */
.services-carousel {
  position: relative;
}
.services-carousel::before,
.services-carousel::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  /* Narrower than the card padding, so the fade never covers card text */
  width: 1.25rem;
  pointer-events: none;
  z-index: 2;
  transition: opacity 200ms ease;
}
.services-carousel::before { left: 0; background: linear-gradient(90deg, rgba(0,0,0,1), rgba(0,0,0,0)); }
.services-carousel::after  { right: 0; background: linear-gradient(270deg, rgba(0,0,0,1), rgba(0,0,0,0)); }

/* No fade on a side the track cannot scroll toward, so the first and last cards show their full border */
.services-carousel.is-at-start::before,
.services-carousel.is-at-end::after {
  opacity: 0;
}

/* Firefox leaves a grid's end padding out of the scroll range; a margin keeps the last card's border inside */
.services-grid > .service-card:last-child {
  margin-inline-end: 0.15rem;
}

/* On phones one card fills the track, so an edge fade would only cover its border */
@media (width <= 560px) {
  .services-carousel::before,
  .services-carousel::after {
    display: none;
  }
}

/* Gradient halo on service card hover */
.service-card::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: var(--brand-gradient);
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  opacity: 0;
  transition: opacity 260ms ease;
  pointer-events: none;
}

.service-card:hover,
.engagement-card:hover,
.journey-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

.service-card:hover::before {
  opacity: 1;
}

.service-card h3,
.journey-card h3,
.deliverables-strip h3,
.engagement-card h3,
.contact-panel h2 {
  margin: 0 0 0.7rem;
  font-size: 1.45rem;
  line-height: 1.1;
  color: var(--ink);
  letter-spacing: -0.02em;
}

.service-card p,
.journey-card p,
.engagement-card p,
.contact-panel p,
.site-footer p {
  margin: 0;
  color: var(--text-soft);
}

.service-card ul {
  margin: 1.1rem 0 0;
  padding: 0;
  list-style: none;
  color: var(--text);
}

.service-card ul li {
  position: relative;
  padding-left: 1.4rem;
}

.service-card ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.58em;
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
  background: var(--brand-gradient);
  box-shadow: 0 0 0 3px rgba(30, 134, 238, 0.12);
}

.service-card ul li + li {
  margin-top: 0.6rem;
}

/* Ensure tag-chip list items don't inherit bullet padding */

/* Extra space between chips and the card title */
/* ==========================
   DELIVERY / SLATE SECTION
   ========================== */
.section-slate {
  position: relative;
  margin-top: 1rem;
  border-radius: 44px;
  background:
    linear-gradient(135deg, rgba(4, 17, 47, 0.97), rgba(18, 70, 196, 0.92)),
    radial-gradient(circle at top right, rgba(34, 208, 234, 0.22), transparent 36%);
  color: #ffffff;
  padding: 3.6rem 2rem;
  /* clip, not hidden: this box must not become a scroll container, or the
     scroll-driven journey animation binds to it and never moves */
  overflow: hidden;
  overflow: clip;
}

/* Decorative flowing wave backdrop */
.section-slate::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(-30deg, transparent 0 6px, rgba(34, 208, 234, 0.05) 6px 7px),
    radial-gradient(800px 400px at 10% 120%, rgba(47, 58, 216, 0.4), transparent 60%);
  mask-image: radial-gradient(ellipse 90% 80% at 100% 0%, #000, transparent 60%);
  -webkit-mask-image: radial-gradient(ellipse 90% 80% at 100% 0%, #000, transparent 60%);
  pointer-events: none;
}

.section-slate > * { position: relative; z-index: 1; }

.section-slate .section-heading h2,
.section-ink .section-heading h2,
.section-slate .journey-card h3,
.section-ink .engagement-card h3 {
  color: #ffffff;
}

.section-slate .section-support,
.section-ink .section-support {
  color: rgba(255, 255, 255, 0.82);
}

.section-slate p,
.section-slate span,
.section-slate strong,
.section-ink p,
.section-ink span,
.section-ink strong {
  color: rgba(255, 255, 255, 0.9);
}

.section-slate .journey-card,
.deliverables-strip div,
.section-ink .engagement-card {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: none;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* ==========================
   JOURNEY GRID (enhanced)
   ========================== */
.journey-grid {
  --journey-col-gap: 1.75rem;
  --journey-row-gap: 2.25rem;
  --journey-line: #b5f7ff;
  --journey-line-soft: rgba(181, 247, 255, 0.28);
  --journey-arrow-thickness: 4px;
  --journey-arrow-head: 0.78rem;
  position: relative;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: var(--journey-col-gap);
  row-gap: var(--journey-row-gap);
  margin-top: 1.75rem;
}

.journey-card {
  position: relative;
  overflow: visible;
  padding: 1.5rem;
  border-radius: var(--radius-sm);
}

.journey-card:nth-child(4) {
  grid-column: 3;
  grid-row: 2;
}
.journey-card:nth-child(5) {
  grid-column: 2;
  grid-row: 2;
}
.journey-card:nth-child(6) {
  grid-column: 1;
  grid-row: 2;
}

.journey-card:nth-child(1)::before,
.journey-card:nth-child(2)::before,
.journey-card:nth-child(4)::before,
.journey-card:nth-child(5)::before {
  content: "";
  position: absolute;
  top: 50%;
  width: calc(var(--journey-col-gap) - 0.4rem);
  height: var(--journey-arrow-thickness);
  color: var(--journey-line-soft);
  background: currentColor;
  border-radius: 999px;
  transform: translateY(-50%);
}

.journey-card:nth-child(1)::after,
.journey-card:nth-child(2)::after,
.journey-card:nth-child(4)::after,
.journey-card:nth-child(5)::after {
  content: "";
  position: absolute;
  top: 50%;
  color: var(--journey-line-soft);
  transform: translateY(-50%);
}

.journey-card:nth-child(1)::before,
.journey-card:nth-child(2)::before {
  left: calc(100% + 0.2rem);
}
.journey-card:nth-child(1)::after,
.journey-card:nth-child(2)::after {
  left: calc(100% + var(--journey-col-gap) - var(--journey-arrow-head));
  border-left: var(--journey-arrow-head) solid currentColor;
  border-top: calc(var(--journey-arrow-head) * 0.62) solid transparent;
  border-bottom: calc(var(--journey-arrow-head) * 0.62) solid transparent;
}
.journey-card:nth-child(4)::before,
.journey-card:nth-child(5)::before {
  left: calc(-1 * var(--journey-col-gap) + 0.2rem);
}
.journey-card:nth-child(4)::after,
.journey-card:nth-child(5)::after {
  left: calc(-1 * var(--journey-col-gap) - 0.02rem);
  border-right: var(--journey-arrow-head) solid currentColor;
  border-top: calc(var(--journey-arrow-head) * 0.62) solid transparent;
  border-bottom: calc(var(--journey-arrow-head) * 0.62) solid transparent;
}
.journey-card:nth-child(3)::before {
  content: "";
  position: absolute;
  top: calc(100% + 0.18rem);
  left: 50%;
  width: var(--journey-arrow-thickness);
  height: calc(var(--journey-row-gap) - 0.3rem);
  color: var(--journey-line-soft);
  background: currentColor;
  border-radius: 999px;
  transform: translateX(-50%);
}
.journey-card:nth-child(3)::after {
  content: "";
  position: absolute;
  top: calc(100% + var(--journey-row-gap) - var(--journey-arrow-head) + 0.08rem);
  left: 50%;
  color: var(--journey-line-soft);
  transform: translateX(-50%);
  border-top: var(--journey-arrow-head) solid currentColor;
  border-left: calc(var(--journey-arrow-head) * 0.62) solid transparent;
  border-right: calc(var(--journey-arrow-head) * 0.62) solid transparent;
}

.journey-card span {
  display: inline-grid;
  place-items: center;
  width: 2.4rem;
  height: 2.4rem;
  margin-bottom: 0.85rem;
  border-radius: 999px;
  background: rgba(34, 208, 234, 0.18);
  color: #ffffff;
  font-family: "Poppins", "Avenir Next", "Segoe UI", "Helvetica Neue", sans-serif;
  font-size: 0.95rem;
  font-weight: 700;
  border: 1px solid rgba(181, 247, 255, 0.3);
}

.deliverables-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 1.8rem;
}

.deliverables-strip div {
  padding: 1.3rem;
  border-radius: var(--radius-sm);
}

.deliverables-strip h3 {
  color: #ffffff;
  font-size: 1.2rem;
}

/* ==========================
   ENGAGEMENT (ink) SECTION
   ========================== */
.section-clients {
  padding-top: 2.5rem;
  padding-bottom: 1.2rem;
}

#contact.section {
  padding-top: 1.2rem;
}

.customer-frame {
  position: relative;
  overflow: hidden;
  padding: 2rem 1.75rem;
  border-radius: 44px;
  background:
    linear-gradient(145deg, rgba(4, 17, 47, 0.97), rgba(18, 70, 196, 0.94)),
    radial-gradient(circle at top right, rgba(34, 208, 234, 0.22), transparent 36%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: var(--shadow-lg);
  color: #ffffff;
}

.customer-frame::before {
  content: "";
  position: absolute;
  inset: -10% auto auto 74%;
  width: 260px;
  height: 260px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(34, 208, 234, 0.26), transparent 66%);
  pointer-events: none;
}

.customer-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    32deg,
    transparent 0 7px,
    rgba(34, 208, 234, 0.04) 7px 8px
  );
  mask-image: radial-gradient(ellipse 70% 60% at 10% 20%, #000 0%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 10% 20%, #000 0%, transparent 70%);
  pointer-events: none;
}

.customer-heading,
.customer-rails {
  position: relative;
  z-index: 1;
}

.customer-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 420px);
  gap: 0.9rem 1.6rem;
  align-items: start;
}

.customer-heading h2 {
  margin: 0;
  max-width: 14ch;
  color: #ffffff;
  font-size: clamp(2.1rem, 4vw, 3.5rem);
  line-height: 0.98;
  letter-spacing: -0.03em;
  text-wrap: balance;
}

.customer-heading .section-copy {
  max-width: 40ch;
  justify-self: end;
  color: rgba(255, 255, 255, 0.82);
}

.section-clients .customer-heading {
  grid-template-columns: 1fr;
}

.section-clients .customer-heading h2,
.section-clients .customer-heading .section-copy {
  max-width: none;
}

.section-clients .customer-heading .section-copy {
  justify-self: start;
}

.customer-rails {
  display: grid;
  gap: 0.9rem;
  margin-top: 1.75rem;
}

.customer-marquee {
  display: flex;
  gap: 0.85rem;
  overflow: hidden;
  width: 100%;
  padding: 0.9rem;
  border-radius: 30px;
  background: #f4f7fb;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset;
  mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}

.customer-track {
  display: flex;
  flex: none;
  width: max-content;
  gap: 0.85rem;
  animation: customer-scroll 48s linear infinite;
}

.customer-marquee-reverse .customer-track {
  animation-direction: reverse;
  animation-duration: 52s;
}

.customer-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 10rem !important;
  height: 4rem !important;
  padding: 0.4rem 0.6rem;
  border-radius: 22px;
  background: transparent;
  border: 1px solid transparent;
  transition: background 240ms ease, border-color 240ms ease;
}

.customer-badge:hover {
  background: rgba(30, 134, 238, 0.06);
  border-color: rgba(30, 134, 238, 0.14);
}

.customer-badge img {
  width: auto !important;
  height: auto !important;
  max-width: 100% !important;
  max-height: 3rem !important;
  object-fit: contain;
  object-position: center;
  filter: none;
  opacity: 1;
  transition: filter 240ms ease, opacity 240ms ease;
}

.customer-badge:hover img {
  filter: none;
  opacity: 1;
}

@keyframes customer-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(calc(-100% - 0.85rem)); }
}

.section-ink {
  position: relative;
  margin-top: 1rem;
  border-radius: 44px;
  background:
    linear-gradient(180deg, rgba(4, 17, 47, 0.97), rgba(10, 32, 80, 0.97)),
    radial-gradient(circle at top left, rgba(34, 208, 234, 0.2), transparent 36%);
  color: #ffffff;
  padding: 3.6rem 2rem;
  overflow: hidden;
}

.section-ink::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    -28deg,
    transparent 0 8px,
    rgba(34, 208, 234, 0.04) 8px 9px
  );
  mask-image: radial-gradient(ellipse 70% 60% at 90% 100%, #000 0%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 90% 100%, #000 0%, transparent 70%);
  pointer-events: none;
}

.section-ink > * { position: relative; z-index: 1; }

.engagement-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 1.9rem;
}

.engagement-card {
  padding: 1.7rem 1.6rem;
  position: relative;
  overflow: hidden;
}

/* ==========================
   CONTACT
   ========================== */
.contact-panel {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  align-items: start;
  gap: 1.8rem;
  padding: 2rem 1.9rem;
  position: relative;
  /* clip, not hidden: must not become a scroll container (scroll-driven arrow below) */
  overflow: hidden;
  overflow: clip;
}

.contact-panel::before {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  padding: 2px;
  background: var(--brand-gradient);
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  opacity: 0.35;
  pointer-events: none;
}

.contact-panel::after {
  content: "";
  position: absolute;
  top: -60%;
  right: -10%;
  width: 340px;
  height: 340px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(34, 208, 234, 0.22), transparent 65%);
  pointer-events: none;
}

.contact-panel > * { position: relative; z-index: 1; }

.contact-copy {
  grid-column: 1;
  grid-row: 1;
}

.contact-copy h2 {
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  line-height: 1.05;
}

.contact-copy .button {
  margin-top: 1.3rem;
}

.contact-points {
  grid-column: 2;
  grid-row: 1;
  display: grid;
  gap: 0.8rem;
  align-content: start;
}

.contact-points div {
  padding: 1.1rem 1.15rem;
  border-radius: var(--radius-sm);
  background: rgba(20, 24, 36, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition: transform 220ms ease, box-shadow 220ms ease;
}

.contact-points div:hover {
  transform: translateY(-2px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6);
  border-color: rgba(100, 180, 255, 0.3);
}

.contact-points strong {
  display: block;
  margin-bottom: 0.35rem;
  color: var(--ink);
}

/* ==========================
   FOOTER
   ========================== */
.site-footer {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.35rem;
  padding: 3rem 0 3.5rem;
  color: var(--text-soft);
  font-size: 0.94rem;
  text-align: center;
}

.site-footer p {
  margin: 0;
  line-height: 1.6;
}

.site-footer p:first-child {
  font-family: inherit;
  font-weight: 400;
  color: var(--text-soft);
  font-size: 0.85rem;
  letter-spacing: 0;
  min-width: 0;
}

.site-footer p:last-child {
  font-size: 0.85rem;
}

.js [data-reveal]:not(.is-revealed) {
  opacity: 0;
  transform: translateY(1.5rem);
}

[data-reveal] {
  transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1), transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

/* ==========================
   TEXT SPLIT ANIMATION (word-by-word fade-up)
   ========================== */
[data-split-text] .split-word {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.8em);
  transition: opacity 0.55s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: var(--split-delay, 0ms);
  will-change: opacity, transform;
}

[data-split-text].is-revealed .split-word,
.is-revealed [data-split-text] .split-word {
  opacity: 1;
  transform: translateY(0);
}

/* ==========================
   STAGGERED CHILDREN REVEAL
   ========================== */
.js [data-stagger] > * {
  opacity: 0;
  transform: translateY(1.25rem);
  transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: var(--stagger-delay, 0ms);
}

[data-stagger].is-revealed > * {
  opacity: 1;
  transform: translateY(0);
}

/* ==========================
   PRIMARY BUTTON SHIMMER SWEEP
   ========================== */
.button-primary,
.nav-cta {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.button-primary::before,
.nav-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    110deg,
    transparent 30%,
    rgba(255, 255, 255, 0.35) 50%,
    transparent 70%
  );
  transform: translateX(-120%);
  transition: transform 720ms cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
  z-index: -1;
}

.button-primary:hover::before,
.button-primary:focus-visible::before,
.nav-cta:hover::before,
.nav-cta:focus-visible::before {
  transform: translateX(120%);
}

/* ==========================
   EYEBROW GRADIENT SWEEP (animated, light sections only)
   ========================== */
/* ==========================
   ENHANCED CARD HOVER
   ========================== */
.service-card,
.engagement-card {
  transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 320ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity 180ms ease;
}

.service-card:hover,
.engagement-card:hover {
  transform: translateY(-6px) scale(1.01);
  box-shadow: 0 40px 80px rgba(17, 33, 49, 0.2);
}

/* ==========================
   HERO HIGHLIGHT TITLES
   ========================== */
.hero-highlights h3 {
  margin: 0 0 0.4rem;
  font-size: 1.08rem;
  line-height: 1.25;
  color: var(--ink);
}

/* Pause the logo rails while they are off screen, hovered, focused, or paused by the visitor.
   Hover and focus count only on the logo strips, not on the Pause/Play button beside them. */
.is-paused .customer-track,
.is-user-paused .customer-track,
.customer-marquee:hover .customer-track,
.customer-marquee:focus-within .customer-track {
  animation-play-state: paused;
}

/* Hovering either strip pauses both (kept in its own rule so browsers without :has() still read the one above) */
.customer-rails:has(.customer-marquee:hover) .customer-track {
  animation-play-state: paused;
}

.marquee-toggle {
  justify-self: end;
  padding: 0.35rem 0.8rem;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 999px;
  background: rgba(4, 17, 47, 0.5);
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.78rem;
  font-weight: 500;
  cursor: pointer;
}

.marquee-toggle:hover {
  border-color: rgba(160, 230, 255, 0.5);
  color: #ffffff;
}

.marquee-toggle:focus-visible {
  outline: 2px solid var(--accent-strong);
  outline-offset: 2px;
}

/* ==========================
   SOLUTION STACK (scroll-driven exploded view)
   Geometry: each slab is a 200x144 isometric SVG (top face 200x116, 14 units thick).
   --e (0..1) is how far the stack has exploded; JS drives it from scroll position.
   ========================== */
.stack-scroller {
  --e: 1;
  --units: 7;
  --gx: 0.27;
  --slab-w: clamp(180px, calc((100vh - var(--header-h, 5.6rem) - 9.5rem) / 2.25), min(290px, 25vw));
  --tag-room: 10rem;
  position: relative;
  margin-top: 2rem;
}

.stack-scroller.is-interactive {
  --slab-w: min(290px, 25vw, calc((100vh - var(--header-h, 5.6rem) - 9.5rem) / 2.25));
  --slab-w: min(290px, 25vw, calc((100svh - var(--header-h, 5.6rem) - 9.5rem) / 2.25));
  height: calc(100vh + var(--units) * 62vh);
  height: calc(100svh + var(--units) * 62svh);
}

.is-interactive .stack-stage {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  padding: calc(var(--header-h, 5.6rem) + 0.9rem) 0 1.1rem;
}

.stack-frame {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  align-items: center;
  gap: 1.5rem 2.5rem;
  padding: 2rem 2.4rem;
  border-radius: 40px;
  background:
    radial-gradient(circle at 18% 30%, rgba(34, 208, 234, 0.16), transparent 42%),
    radial-gradient(circle at 90% 110%, rgba(47, 58, 216, 0.4), transparent 50%),
    linear-gradient(150deg, rgba(4, 17, 47, 0.98), rgba(12, 42, 118, 0.94));
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  overflow: clip;
}

.is-interactive .stack-frame {
  height: 100%;
}

/* Sticky stage: the diagram gets whatever height the panel leaves, and the slabs scale to fit it */
@supports (container-type: size) {
  .is-interactive .stack-frame {
    grid-template-rows: minmax(0, 1fr);
  }

  .stack-scroller.is-interactive .stack-visual {
    container-type: size;
    align-self: stretch;
    min-height: 0;
  }

  .is-interactive .stack-scene {
    --slab-w: max(96px, min(var(--slab-cap, 290px),
      calc(100cqw - var(--tag-room) - 1rem),
      calc((100cqh - 2.6rem) / (0.87 + 4 * (0.07 + var(--gx))))));
  }
}

/* Isometric grid backdrop behind the stack */
.stack-frame::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(30deg, rgba(120, 200, 255, 0.07) 0 1px, transparent 1px 34px),
    repeating-linear-gradient(-30deg, rgba(120, 200, 255, 0.07) 0 1px, transparent 1px 34px);
  mask-image: radial-gradient(ellipse 55% 70% at 28% 50%, #000 0%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 55% 70% at 28% 50%, #000 0%, transparent 75%);
  pointer-events: none;
}

.stack-frame > * {
  position: relative;
  z-index: 1;
}

.stack-visual {
  display: grid;
  place-items: center;
  min-height: 0;
}

.js .stack-visual {
  min-height: calc(var(--slab-w) * (0.87 + 4 * (0.07 + var(--gx))) + 2.6rem);
}

html:not(.js) .stack-visual {
  display: none;
}

.stack-scene {
  --gap: calc(var(--slab-w) * (0.07 + var(--gx) * var(--e)));
  --off: calc(var(--slab-w) * var(--gx) * -2 * (1 - var(--e)));
  /* How far the security wrap's top sits below its fully exploded height.
     The wrap keeps one fixed height and its top parts move by --wt with transforms,
     so scrolling through the explode never triggers a layout. */
  --wt: calc(var(--slab-w) * var(--gx) * 4 * (1 - var(--e)));
  position: relative;
  width: var(--slab-w);
  height: calc(var(--slab-w) * (0.87 + 4 * (0.07 + var(--gx))) + 2.6rem);
  margin-right: var(--tag-room);
}

/* Slabs and their labels share one vertical offset per layer (--i = 1 at the bottom) */
.stack-slab,
.stack-tag {
  --stack-y: calc(var(--off) - (var(--i, 1) - 1) * var(--gap));
}

.stack-slab {
  position: absolute;
  left: 0;
  bottom: calc(var(--slab-w) * 0.08);
  width: var(--slab-w);
  aspect-ratio: 200 / 144;
  translate: 0 var(--stack-y);
  transition:
    transform 520ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity 420ms ease,
    filter 420ms ease;
}

.stack-slab svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.stack-slab[data-layer="1"] { --top: #2b3cc0; --left: #121a5c; --right: #1b268a; --top-hi: #3a50e6; }
.stack-slab[data-layer="2"] { --top: #2553d2; --left: #0f2b72; --right: #173f9f; --top-hi: #3368f0; }
.stack-slab[data-layer="3"] { --top: #1e6ddc; --left: #0c377c; --right: #1452ad; --top-hi: #2d86f5; }
.stack-slab[data-layer="4"] { --top: #1a8ee2; --left: #0a4884; --right: #1068b5; --top-hi: #2aa7f5; }
.stack-slab[data-layer="5"] { --top: #1bb0e3; --left: #0a5980; --right: #1086b3; --top-hi: #34cdf2; }

.slab-top { fill: var(--top); transition: fill 420ms ease; }
.slab-left { fill: var(--left); }
.slab-right { fill: var(--right); }
.slab-sheen { fill: url(#slab-sheen); }
.slab-rim { fill: none; stroke: rgba(170, 235, 255, 0.75); stroke-width: 1.2; stroke-linejoin: round; }
.slab-rim-front { fill: none; stroke: rgba(170, 235, 255, 0.28); stroke-width: 1; stroke-linejoin: round; }
.art-line { fill: none; stroke: rgba(210, 245, 255, 0.7); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.art-dash { fill: none; stroke: rgba(210, 245, 255, 0.55); stroke-width: 1.2; stroke-dasharray: 3 4; }
.art-tile { fill: rgba(210, 245, 255, 0.16); stroke: rgba(210, 245, 255, 0.5); stroke-width: 0.8; }
.art-tile-hi { fill: rgba(111, 224, 255, 0.45); stroke: rgba(230, 250, 255, 0.85); stroke-width: 0.8; }
.art-top { fill: rgba(225, 248, 255, 0.85); }
.art-side-l { fill: rgba(150, 215, 255, 0.45); }
.art-side-r { fill: rgba(120, 190, 250, 0.6); }
.art-dot { fill: #6fe0ff; }

.stack-slab.is-active {
  transform: translateY(calc(var(--slab-w) * -0.06));
  filter: drop-shadow(0 0 22px rgba(34, 208, 234, 0.55));
}

.stack-slab.is-active .slab-top {
  fill: var(--top-hi);
}

.stack-scene[data-mode="layer"] .stack-slab:not(.is-active) {
  opacity: 0.3;
}

/* Security & compliance: a glass box wrapped around every slab */
.stack-wrap {
  --dh: calc(var(--slab-w) * 0.325);
  position: absolute;
  left: calc(var(--slab-w) * -0.06);
  bottom: calc(var(--slab-w) * 0.005);
  width: calc(var(--slab-w) * 1.12);
  height: calc(4 * var(--slab-w) * (0.07 + var(--gx)) + var(--slab-w) * 0.86);
  translate: 0 var(--off);
  opacity: calc(0.25 + 0.45 * var(--e));
  pointer-events: none;
  transition: opacity 420ms ease;
}

.wrap-face,
.wrap-edge,
.wrap-cap {
  position: absolute;
}

.wrap-face {
  inset: 0;
  transition: opacity 420ms ease;
}

.wrap-face-l {
  clip-path: polygon(0 calc(var(--dh) + var(--wt)), 50% calc(var(--dh) * 2 + var(--wt)), 50% 100%, 0 calc(100% - var(--dh)));
  background: linear-gradient(180deg, rgba(34, 208, 234, 0.1), rgba(34, 208, 234, 0.02)) 0 100% / 100% calc(100% - var(--wt)) no-repeat;
}

.wrap-face-r {
  clip-path: polygon(50% calc(var(--dh) * 2 + var(--wt)), 100% calc(var(--dh) + var(--wt)), 100% calc(100% - var(--dh)), 50% 100%);
  background: linear-gradient(180deg, rgba(74, 164, 255, 0.12), rgba(74, 164, 255, 0.02)) 0 100% / 100% calc(100% - var(--wt)) no-repeat;
}

.wrap-face-t {
  clip-path: polygon(50% 0, 100% var(--dh), 50% calc(var(--dh) * 2), 0 var(--dh));
  background: rgba(160, 230, 255, 0.05);
  translate: 0 var(--wt);
}

.wrap-edge {
  width: 1.5px;
  background: rgba(160, 230, 255, 0.55);
  transition: box-shadow 420ms ease, background 420ms ease;
}

.wrap-edge-l { left: 0; top: var(--dh); bottom: var(--dh); }
.wrap-edge-r { right: 0; top: var(--dh); bottom: var(--dh); }
.wrap-edge-f { left: calc(50% - 0.75px); top: calc(var(--dh) * 2); bottom: 0; }

/* Solid edges shorten from the bottom as the stack closes: (H - 2 * dh) / (full H - 2 * dh), with dh = 0.325 */
.wrap-edge-l,
.wrap-edge-r,
.wrap-edge-f {
  transform-origin: 50% 100%;
  scale: 1 calc((0.49 + 4 * var(--gx) * var(--e)) / (0.49 + 4 * var(--gx)));
}
.wrap-edge-b {
  left: calc(50% - 0.75px);
  top: 0;
  bottom: calc(var(--dh) * 2);
  background: repeating-linear-gradient(180deg, rgba(160, 230, 255, 0.45) 0 6px, transparent 6px 12px);
  /* Dashed, so it is trimmed and moved rather than scaled */
  clip-path: inset(0 0 var(--wt) 0);
  translate: 0 var(--wt);
}

.wrap-cap {
  left: 0;
  width: 100%;
  height: calc(var(--dh) * 2);
  overflow: visible;
}

.wrap-cap-top { top: 0; translate: 0 var(--wt); }
.wrap-cap-bottom { bottom: 0; }

.wrap-cap polyline,
.wrap-cap polygon {
  fill: none;
  stroke: rgba(160, 230, 255, 0.6);
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
  stroke-linejoin: round;
}

.wrap-cap .is-dashed {
  stroke: rgba(160, 230, 255, 0.4);
  stroke-dasharray: 5 6;
}

.stack-scene[data-mode="layer"] .stack-wrap {
  opacity: 0.22;
}

.stack-scene[data-mode="wrap"] .stack-wrap {
  opacity: 1;
}

.stack-scene[data-mode="wrap"] .wrap-edge:not(.wrap-edge-b) {
  background: #b5f7ff;
  box-shadow: 0 0 12px rgba(34, 208, 234, 0.9);
}

.stack-scene[data-mode="wrap"] .wrap-cap polyline:not(.is-dashed),
.stack-scene[data-mode="wrap"] .wrap-cap polygon {
  stroke: #b5f7ff;
}

.stack-scene[data-mode="wrap"] .wrap-face-l,
.stack-scene[data-mode="wrap"] .wrap-face-r {
  background-image: linear-gradient(180deg,
    rgba(34, 208, 234, 0.04) 0%,
    rgba(34, 208, 234, 0.3) 45%,
    rgba(34, 208, 234, 0.04) 55%,
    rgba(34, 208, 234, 0.08) 100%);
  background-position: 0 0;
  background-size: 100% 260%;
  /* Plays once each time the Security step opens */
  animation: wrap-scan 1.6s ease-out 1 both;
}

.stack-scene[data-mode="wrap"] .wrap-face-t {
  background: rgba(160, 230, 255, 0.14);
}

@keyframes wrap-scan {
  0% { background-position: 0 100%; }
  100% { background-position: 0 0%; }
}

/* Labels beside each slab */
.stack-tag {
  position: absolute;
  left: calc(var(--slab-w) * 1.03);
  bottom: calc(var(--slab-w) * 0.44);
  translate: 0 var(--stack-y);
  transform: translateY(50%);
  display: flex;
  align-items: center;
  gap: 0.45rem;
  white-space: nowrap;
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1;
  pointer-events: none;
  transition:
    transform 520ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity 420ms ease,
    color 420ms ease;
}

.stack-tag::before {
  content: "";
  width: 1.6rem;
  height: 1px;
  background: rgba(160, 230, 255, 0.5);
  transition: background 420ms ease, width 420ms ease;
}

.stack-tag b {
  color: var(--accent);
  font-weight: 700;
  letter-spacing: 0.04em;
}

.stack-tag.is-active {
  transform: translateY(calc(50% - var(--slab-w) * 0.06));
  color: #ffffff;
}

.stack-tag.is-active::before {
  width: 2.2rem;
  background: #b5f7ff;
}

.stack-scene[data-mode="layer"] .stack-tag:not(.is-active) {
  opacity: 0.35;
}

.stack-tag-wrap {
  left: calc(var(--slab-w) * 0.5);
  bottom: calc(var(--slab-w) * 0.87 + 4 * var(--slab-w) * (0.07 + var(--gx)) + 0.6rem);
  translate: 0 calc(var(--off) + var(--wt));
  transform: translateX(-50%);
  padding: 0.38rem 0.75rem;
  border-radius: 999px;
  border: 1px solid rgba(160, 230, 255, 0.28);
  background: rgba(4, 17, 47, 0.7);
}

.stack-tag-wrap::before {
  content: none;
}

.stack-tag-wrap svg {
  width: 0.9rem;
  height: 0.9rem;
  color: var(--accent);
}

.stack-tag-wrap.is-active {
  transform: translateX(-50%);
  border-color: #b5f7ff;
  box-shadow: 0 0 18px rgba(34, 208, 234, 0.45);
}

/* Description panel */
.stack-panel {
  display: grid;
  gap: 1.3rem;
  align-content: center;
  min-width: 0;
}

.stack-details {
  display: grid;
  gap: 1.8rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.stack-detail-overview {
  display: none;
}

.is-interactive .stack-details {
  gap: 0;
}

.is-interactive .stack-detail {
  grid-area: 1 / 1;
  opacity: 0;
  transform: translateY(0.9rem);
  pointer-events: none;
  transition:
    opacity 380ms ease,
    transform 480ms cubic-bezier(0.22, 1, 0.36, 1);
}

.is-interactive .stack-detail-overview {
  display: block;
}

.is-interactive .stack-detail.is-active {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.stack-detail h3 {
  margin: 0 0 0.6rem;
  font-size: clamp(1.45rem, 2.3vw, 2.05rem);
  line-height: 1.1;
  color: #ffffff;
}

.stack-detail p {
  margin: 0;
  color: rgba(255, 255, 255, 0.84);
  text-wrap: pretty;
}

.stack-detail ul {
  display: grid;
  gap: 0.55rem;
  margin: 1.05rem 0 0;
  padding: 0;
  list-style: none;
}

.stack-detail li {
  position: relative;
  padding-left: 1.45rem;
  color: #e6edf7;
}

/* Small isometric diamond bullet */
.stack-detail li::before {
  content: "";
  position: absolute;
  left: 0.1rem;
  top: 0.5em;
  width: 0.62rem;
  height: 0.62rem;
  background: var(--brand-gradient);
  transform: scaleY(0.58) rotate(45deg);
}

.stack-hint {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1.2rem !important;
  color: var(--accent) !important;
  font-size: 0.9rem;
  font-weight: 600;
}

/* Layer rail + progress */
.stack-nav {
  display: none;
  gap: 0.8rem;
}

.is-interactive .stack-nav {
  display: grid;
}

.stack-progress {
  height: 3px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  overflow: hidden;
}

.stack-progress span {
  display: block;
  height: 100%;
  background: var(--brand-gradient);
  transform-origin: left center;
  transform: scaleX(var(--p, 0));
}

.stack-rail {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.stack-rail button {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.42rem 0.75rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.04);
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.76rem;
  font-weight: 600;
  line-height: 1.1;
  cursor: pointer;
  transition: background 220ms ease, color 220ms ease, border-color 220ms ease;
}

.stack-rail button b {
  color: var(--accent);
}

.stack-rail button em {
  font-style: normal;
}

.stack-rail button:hover {
  color: #ffffff;
  border-color: rgba(160, 230, 255, 0.4);
}

.stack-rail button:focus-visible,
.stack-skip:focus-visible {
  outline: 2px solid var(--accent-strong);
  outline-offset: 2px;
}

.stack-rail button[aria-current="step"] {
  background: var(--brand-gradient-ui);
  border-color: transparent;
  color: #ffffff;
}

.stack-rail button[aria-current="step"] b {
  color: #ffffff;
}

/* Same pill as the logo strip's pause button (.marquee-toggle) */
.stack-skip {
  display: none;
  align-items: center;
  gap: 0.4rem;
  position: absolute;
  top: 1.05rem;
  right: 1.4rem;
  z-index: 2;
  padding: 0.35rem 0.8rem;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 999px;
  background: rgba(4, 17, 47, 0.5);
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.78rem;
  font-weight: 500;
}

.stack-skip:hover {
  border-color: rgba(160, 230, 255, 0.5);
  color: #ffffff;
}

.is-interactive .stack-skip {
  display: inline-flex;
}

/* ==========================
   RESPONSIVE
   ========================== */
@media (max-width: 1080px) {
  .hero,
  .contact-panel {
    grid-template-columns: 1fr;
  }

  .contact-copy,
  .contact-points {
    grid-column: auto;
    grid-row: auto;
  }

  .section-heading,
  .customer-heading {
    grid-template-columns: 1fr;
  }

  .services-grid,
  .journey-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .journey-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    --journey-col-gap: 1rem;
    --journey-row-gap: 1.9rem;
  }

  .services-grid {
    grid-template-columns: none;
    grid-auto-columns: minmax(18rem, 24rem);
  }

  .panel-metrics,
  .deliverables-strip {
    grid-template-columns: 1fr;
  }

  h1 {
    max-width: 14ch;
  }

  .section-support {
    max-width: none;
    justify-self: start;
  }

  .customer-heading .section-copy {
    max-width: none;
    justify-self: start;
  }

}

@media (max-width: 820px) {
  /* The orb sits behind the text in one column; fade it so the text stays readable */
  .hero::before,
  .hero::after {
    opacity: 0.22;
  }

  /* Over the faded orb, start the gradient word lighter so it keeps 3:1 */
  h1 .accent-word {
    background-image: linear-gradient(135deg, #4aa4ff 0%, #22d0ea 100%);
  }

  .site-header {
    align-items: center;
    flex-wrap: wrap;
    border-radius: 28px;
  }

  .nav-toggle {
    display: inline-flex;
  }

  .site-nav {
    display: none;
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    padding-top: 0.4rem;
  }

  .site-nav.is-open {
    display: flex;
  }

  .nav-cta {
    text-align: center;
  }

  .services-grid,
  .engagement-grid,
  .journey-grid,
  .hero-highlights {
    grid-template-columns: 1fr;
  }

  .services-grid {
    grid-template-columns: none;
    grid-auto-columns: minmax(17rem, 82vw);
  }

  .journey-grid {
    grid-template-columns: 1fr;
    row-gap: 1.45rem;
  }

  .journey-card:nth-child(4),
  .journey-card:nth-child(5),
  .journey-card:nth-child(6) {
    grid-column: auto;
    grid-row: auto;
  }

  .journey-card::before,
  .journey-card::after {
    content: none;
  }

  .journey-card:not(:last-child)::before {
    content: "";
    position: absolute;
    top: calc(100% + 0.18rem);
    left: 50%;
    width: var(--journey-arrow-thickness);
    height: 1rem;
    color: var(--journey-line-soft);
    background: currentColor;
    border-radius: 999px;
    transform: translateX(-50%);
  }

  .journey-card:not(:last-child)::after {
    content: "";
    position: absolute;
    top: calc(100% + 1.02rem);
    left: 50%;
    color: var(--journey-line-soft);
    transform: translateX(-50%);
    border-top: var(--journey-arrow-head) solid currentColor;
    border-left: calc(var(--journey-arrow-head) * 0.62) solid transparent;
    border-right: calc(var(--journey-arrow-head) * 0.62) solid transparent;
  }

  .section,
  .site-footer {
    width: min(calc(100% - 1.2rem), var(--max-width));
  }

  .section-slate,
  .section-ink {
    padding-inline: 1.25rem;
  }

  .customer-frame {
    padding: 1.4rem;
  }

  .customer-badge {
    width: 9rem;
    height: 3.6rem;
  }

  .customer-badge img {
    max-height: 2.6rem;
  }
}

@media (max-width: 560px) {
  .site-header {
    column-gap: 0.5rem;
    margin-top: 0.7rem;
    padding: 0.75rem 0.85rem;
  }

  .hero {
    padding-top: 3.2rem;
    gap: 1.6rem;
  }

  .brand-copy strong {
    font-size: 1.25rem;
  }

  .brand-copy span {
    font-size: 0.86rem;
  }

  h1 {
    font-size: clamp(2.5rem, 11vw, 3.2rem);
    line-height: 1.12;
  }

  .hero-actions {
    flex-direction: column;
  }

  .button {
    width: 100%;
  }

  .panel-surface,
  .service-card,
  .engagement-card,
  .journey-card,
  .contact-panel,
  .customer-frame {
    padding: 1.2rem;
  }

  .customer-rails {
    margin-top: 1.25rem;
  }

  .customer-marquee {
    padding: 0.7rem;
  }

  .customer-badge {
    width: 8rem;
    height: 3.2rem;
    padding: 0.35rem 0.5rem;
  }

  .customer-badge img {
    max-height: 2.2rem;
  }

  .services-grid {
    grid-auto-columns: minmax(16.25rem, 84vw);
  }

  .lede {
    font-size: 1rem;
  }

  .site-footer {
    padding-bottom: 2rem;
  }
}

@media (max-width: 374px) {
  /* Keep the brand and the Menu button on one row */
  .brand {
    gap: 0.6rem;
  }

  .brand-logo {
    width: 2.5rem;
  }

  /* Give the Typical Projects drawings enough width for 12px labels */
  .section-ink {
    padding-inline: 0.75rem;
  }
}

/* Static stack (reduced motion / short screens): keep the diagram beside the list */
@media (min-width: 821px) and (min-height: 560px) {
  .stack-scroller:not(.is-interactive) .stack-frame {
    align-items: start;
  }

  .stack-scroller:not(.is-interactive) .stack-visual {
    position: sticky;
    top: calc(var(--header-h, 5.6rem) + 1rem);
  }
}

/* Tablet header: keep nav labels on one line */
@media (min-width: 821px) and (max-width: 1080px) {
  .site-nav {
    gap: 1rem;
    font-size: 0.92rem;
  }

  .site-nav a {
    white-space: nowrap;
  }

  .nav-cta {
    padding: 0.75rem 1.25rem !important;
  }
}

/* Narrow tablets: the full nav does not fit beside the brand, so use the phone menu */
@media (min-width: 821px) and (max-width: 940px) {
  .site-header {
    align-items: center;
    flex-wrap: wrap;
    border-radius: 28px;
  }

  .nav-toggle {
    display: inline-flex;
  }

  .site-nav {
    display: none;
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    padding-top: 0.4rem;
  }

  .site-nav.is-open {
    display: flex;
  }

  .nav-cta {
    text-align: center;
  }
}

/* Open menu (phones and narrow tablets): never taller than the screen. The header is
   sticky, so the menu scrolls inside itself. The 0.5rem padding, taken back by a
   negative margin, keeps focus rings and the button shadow inside the scroll box
   without moving the links. */
@media (max-width: 940px) {
  .site-nav.is-open {
    width: calc(100% + 1rem);
    margin: 0 -0.5rem -0.5rem;
    padding: 0.4rem 0.5rem 0.5rem;
    max-height: calc(100vh - var(--header-h, 5.6rem) - 0.5rem);
    max-height: calc(100dvh - var(--header-h, 5.6rem) - 0.5rem);
    overflow-y: auto;
  }
}

/* Solution stack: tablet and phone layouts */
@media (max-width: 1080px) {
  .stack-scroller {
    --tag-room: 8.4rem;
  }

  .stack-frame {
    gap: 1.25rem 1.5rem;
    padding: 1.6rem 1.6rem;
  }

  .stack-tag {
    font-size: 0.74rem;
  }

  .stack-tag::before {
    width: 1.1rem;
  }
}

@media (max-width: 820px) {
  .stack-scroller {
    --gx: 0.14;
    --tag-room: 7.6rem;
    --slab-cap: clamp(200px, 40vw, 260px);
    --slab-w: min(200px, 46vw);
  }

  .stack-scroller.is-interactive {
    --slab-w: min(200px, 44vw, calc((100vh - var(--header-h, 5.6rem) - 21rem) / 1.75));
    --slab-w: min(200px, 44vw, calc((100svh - var(--header-h, 5.6rem) - 21rem) / 1.75));
    height: calc(100vh + var(--units) * 50vh);
    height: calc(100svh + var(--units) * 50svh);
  }

  .stack-frame {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.9rem;
    padding: 1.15rem 1.1rem 1.2rem;
    border-radius: 28px;
  }

  .is-interactive .stack-frame {
    grid-template-rows: minmax(0, 1fr) auto;
    align-items: stretch;
  }

  .is-interactive .stack-visual {
    min-height: 0;
  }

  .stack-frame::before {
    mask-image: radial-gradient(ellipse 80% 45% at 50% 30%, #000 0%, transparent 75%);
    -webkit-mask-image: radial-gradient(ellipse 80% 45% at 50% 30%, #000 0%, transparent 75%);
  }

  .stack-tag {
    gap: 0.3rem;
    font-size: 0.7rem;
  }

  .stack-tag::before {
    width: 0.75rem;
  }

  .stack-tag.is-active::before {
    width: 1.05rem;
  }

  .stack-tag-wrap {
    padding: 0.3rem 0.6rem;
  }

  .stack-detail h3 {
    font-size: 1.3rem;
  }

  .is-interactive .stack-detail p {
    font-size: 0.92rem;
    line-height: 1.5;
  }

  .stack-rail button {
    padding: 0.4rem 0.62rem;
  }

  .stack-rail button em {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .stack-skip {
    top: 0.65rem;
    right: 1rem;
  }
}

/* Short phones: keep the bullets for screen readers, but give the space to the diagram */
@media (max-width: 820px) and (max-height: 860px) {
  .is-interactive .stack-detail ul {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
}

/* Logo rails without motion (reduced motion, or no JS to fill the loop copies): one
   still row you can scroll on phones and tablets, a wrapped grid on wider screens.
   The loop copy and the pause button have no job here. */
html:not(.js) .customer-track {
  animation: none;
}

html:not(.js) .customer-marquee {
  mask-image: none;
  -webkit-mask-image: none;
  overflow-x: auto;
  overscroll-behavior-x: contain;
}

html:not(.js) .customer-track[aria-hidden="true"],
html:not(.js) .marquee-toggle {
  display: none;
}

@media (width > 820px) {
  html:not(.js) .customer-marquee {
    overflow-x: visible;
    flex-wrap: wrap;
    justify-content: center;
  }

  html:not(.js) .customer-track {
    flex: 1 1 100%;
    min-width: 0;
    width: auto;
    flex-wrap: wrap;
    justify-content: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .customer-marquee {
    mask-image: none;
    -webkit-mask-image: none;
    overflow-x: auto;
    overscroll-behavior-x: contain;
  }

  .customer-track[aria-hidden="true"],
  .marquee-toggle {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) and (width > 820px) {
  .customer-marquee {
    overflow-x: visible;
    flex-wrap: wrap;
    justify-content: center;
  }

  .customer-track {
    flex: 1 1 100%;
    min-width: 0;
    width: auto;
    flex-wrap: wrap;
    justify-content: center;
  }

  /* Services never pin here: show all six cards as a grid instead of a hidden-scrollbar row */
  .services-grid {
    grid-auto-flow: row;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
    overflow: visible;
  }

  .services-carousel::before,
  .services-carousel::after {
    content: none;
  }
}

/* ==========================
   SCROLL-DRIVEN ANIMATIONS
   Native CSS scroll timelines. Rules outside the gate are the finished, static look
   (used by Firefox, older browsers and reduced motion). Inside the gate, keyframes
   describe the "before" look, so an inactive timeline always shows finished content.
   Keep this block after the journey rules above: it must win over their
   equal-specificity connector styles.
   ========================== */

/* Nav: highlight the link for the section in view (set by script.js) */
.site-nav a[aria-current]:not(.nav-cta) {
  color: var(--ink);
}

.site-nav a[aria-current]:not(.nav-cta)::after {
  transform: scaleX(1);
}

/* Services: snap cards to the track edge; one full card per view on phones */
.services-grid {
  scroll-snap-type: x proximity;
  scroll-padding-inline: 0.15rem;
}

.service-card {
  scroll-snap-align: start;
}

@media (width <= 820px) {
  .services-grid {
    grid-auto-columns: min(100%, 23rem);
  }
}

/* How We Work: a glow layer per step (hidden until the scroll animation uses it) */
.journey-card {
  isolation: isolate;
}

.journey-glow {
  position: absolute;
  inset: -1px;
  z-index: -1;
  border-radius: inherit;
  border: 1px solid rgba(181, 247, 255, 0.92);
  background: rgba(255, 255, 255, 0.09);
  box-shadow:
    0 0 0 1px rgba(181, 247, 255, 0.16),
    0 0 1.15rem rgba(181, 247, 255, 0.24);
  opacity: 0;
  pointer-events: none;
}

/* Contact: "What to Bring" leads to "What You Get" */
.contact-points {
  gap: 0.55rem;
}

.contact-points > div {
  position: relative;
}

.contact-flow {
  position: relative;
  justify-self: center;
  width: 3px;
  height: 1.1rem;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(181, 247, 255, 0.35), #b5f7ff);
  transform-origin: 50% 0;
}

.contact-flow::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 100%;
  translate: -50% -2px;
  border-top: 0.5rem solid #b5f7ff;
  border-left: 0.34rem solid transparent;
  border-right: 0.34rem solid transparent;
}

.contact-points > div:last-child::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  border: 1px solid rgba(34, 208, 234, 0.55);
  box-shadow: 0 0 1.2rem rgba(34, 208, 234, 0.18);
  pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) and (view-timeline-name: --t) and (animation-range: cover 0% cover 100%) and (overflow: clip) {
    @keyframes j-glow {
      0% { opacity: 0; }
      20%, 70% { opacity: 1; }
      100% { opacity: 0.3; }
    }

    @keyframes j-fill {
      from { opacity: 0; }
    }

    @keyframes j-pop {
      0%, 100% { scale: 1; }
      50% { scale: 1.14; }
    }

    @keyframes j-draw-x {
      from { background-size: 0% 100%; }
    }

    @keyframes j-draw-y {
      from { background-size: 100% 0%; }
    }

    @keyframes j-head {
      from { color: var(--journey-line-soft); }
    }

    /* Opacity only: scaling the cards would move their scroll-snap points and soften their text */
    @keyframes svc-in {
      from { opacity: 0.72; }
      to { opacity: 1; }
    }

    @keyframes svc-out {
      from { opacity: 1; }
      to { opacity: 0.72; }
    }

    @keyframes flow-draw {
      from { scale: 1 0; }
    }

    @keyframes flow-fade {
      from { opacity: 0; }
    }

    @keyframes orb-recede {
      to { translate: 0 5rem; scale: 0.88; opacity: 0.5; }
    }

    /* ---- Hero: the orb sinks and shrinks as you scroll away (desktop only; on
       smaller screens it sits behind the text) ---- */
    @media (width > 1080px) {
      .hero::before,
      .hero::after {
        animation: orb-recede linear both;
        animation-timeline: scroll(root);
        animation-range: 0px 70vh;
      }
    }

    /* ---- How We Work: scrolling walks through the six steps ---- */
    .journey-glow {
      opacity: 0.3;
      animation: j-glow linear both;
    }

    .journey-card > span {
      position: relative;
      isolation: isolate;
      animation: j-pop linear both;
    }

    .journey-card > span::before {
      content: "";
      position: absolute;
      inset: -1px;
      z-index: -1;
      border-radius: inherit;
      background: var(--brand-gradient-ui);
      box-shadow: 0 0 0 1px rgba(181, 247, 255, 0.45);
      animation: j-fill linear both;
    }

    /* Desktop: one timeline for the whole snake (1 → 2 → 3, down, 4 ← 5 ← 6) */
    @media (width > 820px) {
      .journey-grid {
        view-timeline-name: --journey;
        view-timeline-axis: block;
        view-timeline-inset: 5rem 0px;
      }

      .journey-glow,
      .journey-card > span,
      .journey-card > span::before {
        animation-timeline: --journey;
      }

      .journey-card:nth-child(1) .journey-glow { animation-range: cover 16% cover 23.5%; }
      .journey-card:nth-child(2) .journey-glow { animation-range: cover 23.5% cover 31%; }
      .journey-card:nth-child(3) .journey-glow { animation-range: cover 31% cover 38.5%; }
      .journey-card:nth-child(4) .journey-glow { animation-range: cover 38.5% cover 46%; }
      .journey-card:nth-child(5) .journey-glow { animation-range: cover 46% cover 53.5%; }
      .journey-card:nth-child(6) .journey-glow { animation-range: cover 53.5% cover 61%; }

      .journey-card:nth-child(1) > span,
      .journey-card:nth-child(1) > span::before { animation-range: cover 16% cover 19%; }
      .journey-card:nth-child(2) > span,
      .journey-card:nth-child(2) > span::before { animation-range: cover 23.5% cover 26.5%; }
      .journey-card:nth-child(3) > span,
      .journey-card:nth-child(3) > span::before { animation-range: cover 31% cover 34%; }
      .journey-card:nth-child(4) > span,
      .journey-card:nth-child(4) > span::before { animation-range: cover 38.5% cover 41.5%; }
      .journey-card:nth-child(5) > span,
      .journey-card:nth-child(5) > span::before { animation-range: cover 46% cover 49%; }
      .journey-card:nth-child(6) > span,
      .journey-card:nth-child(6) > span::before { animation-range: cover 53.5% cover 56.5%; }

      /* Connectors: the bright line draws from the finished step toward the next one.
         Shorthand, timeline and range stay in one rule so the shorthand can't reset the range. */
      .journey-card:nth-child(1)::before {
        background: linear-gradient(var(--journey-line), var(--journey-line)) left center / 100% 100% no-repeat var(--journey-line-soft);
        opacity: 1;
        box-shadow: none;
        animation: j-draw-x linear both;
        animation-timeline: --journey;
        animation-range: cover 20% cover 23%;
      }

      .journey-card:nth-child(2)::before {
        background: linear-gradient(var(--journey-line), var(--journey-line)) left center / 100% 100% no-repeat var(--journey-line-soft);
        opacity: 1;
        box-shadow: none;
        animation: j-draw-x linear both;
        animation-timeline: --journey;
        animation-range: cover 27.5% cover 30.5%;
      }

      .journey-card:nth-child(3)::before {
        background: linear-gradient(var(--journey-line), var(--journey-line)) center top / 100% 100% no-repeat var(--journey-line-soft);
        opacity: 1;
        box-shadow: none;
        animation: j-draw-y linear both;
        animation-timeline: --journey;
        animation-range: cover 35% cover 38%;
      }

      .journey-card:nth-child(4)::before {
        background: linear-gradient(var(--journey-line), var(--journey-line)) right center / 100% 100% no-repeat var(--journey-line-soft);
        opacity: 1;
        box-shadow: none;
        animation: j-draw-x linear both;
        animation-timeline: --journey;
        animation-range: cover 42.5% cover 45.5%;
      }

      .journey-card:nth-child(5)::before {
        background: linear-gradient(var(--journey-line), var(--journey-line)) right center / 100% 100% no-repeat var(--journey-line-soft);
        opacity: 1;
        box-shadow: none;
        animation: j-draw-x linear both;
        animation-timeline: --journey;
        animation-range: cover 50% cover 53%;
      }

      .journey-card:nth-child(-n+5)::after {
        color: var(--journey-line);
        opacity: 1;
        filter: none;
      }

      .journey-card:nth-child(1)::after { animation: j-head linear both; animation-timeline: --journey; animation-range: cover 22.5% cover 23.5%; }
      .journey-card:nth-child(2)::after { animation: j-head linear both; animation-timeline: --journey; animation-range: cover 30% cover 31%; }
      .journey-card:nth-child(3)::after { animation: j-head linear both; animation-timeline: --journey; animation-range: cover 37.5% cover 38.5%; }
      .journey-card:nth-child(4)::after { animation: j-head linear both; animation-timeline: --journey; animation-range: cover 45% cover 46%; }
      .journey-card:nth-child(5)::after { animation: j-head linear both; animation-timeline: --journey; animation-range: cover 52.5% cover 53.5%; }
    }

    /* Phones and portrait tablets: one column, each card follows its own position */
    @media (width <= 820px) {
      .journey-card {
        view-timeline-name: --step;
        view-timeline-axis: block;
        view-timeline-inset: 5rem 0px;
      }

      .journey-glow {
        animation-timeline: --step;
        animation-range: cover 30% cover 55%;
      }

      .journey-card > span,
      .journey-card > span::before {
        animation-timeline: --step;
        animation-range: cover 30% cover 34%;
      }

      .journey-card:not(:last-child)::before {
        background: linear-gradient(var(--journey-line), var(--journey-line)) center top / 100% 100% no-repeat var(--journey-line-soft);
        opacity: 1;
        box-shadow: none;
        animation: j-draw-y linear both;
        animation-timeline: --step;
        animation-range: cover 47% cover 53%;
      }

      .journey-card:not(:last-child)::after {
        color: var(--journey-line);
        opacity: 1;
        filter: none;
        animation: j-head linear both;
        animation-timeline: --step;
        animation-range: cover 52% cover 55%;
      }
    }

    /* ---- Services: cards sliding out of the carousel dim ---- */
    .js .services-grid > .service-card[data-reveal]:not(.is-revealed) {
      opacity: 1;
      transform: none;
    }

    .services-grid > .service-card {
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
      animation: svc-in linear both, svc-out linear forwards;
      animation-timeline: view(inline), view(inline);
      animation-range: entry 0% entry 70%, exit 30% exit 100%;
    }

    /* ---- Contact: the arrow draws itself as the boxes come into view ---- */
    .contact-points {
      view-timeline-name: --bring;
      view-timeline-axis: block;
    }

    .contact-flow {
      animation: flow-draw linear both;
      animation-timeline: --bring;
      animation-range: entry 30% entry 85%;
    }

    .contact-flow::after {
      animation: flow-fade linear both;
      animation-timeline: --bring;
      animation-range: entry 75% entry 90%;
    }

    .contact-points > div:last-child::after {
      animation: flow-fade linear both;
      animation-timeline: --bring;
      animation-range: entry 85% entry 100%;
    }
  }
}

/* ==========================
   SERVICES: SCROLL THROUGH THE CARDS
   script.js pins the filters and carousel (.is-pinned) when they fit on screen and
   motion is allowed. Scrolling then highlights one card at a time and glides it
   into view. Otherwise the carousel works as a normal horizontal scroller.
   ========================== */
.services-progress {
  display: none;
}

/* Wider cards wrap less, so a whole card fits on screen while the carousel is pinned */
@media (width > 820px) {
  .services-grid {
    grid-auto-columns: min(100%, 27rem);
  }

  /* Too short to pin: show a thin scrollbar, so a mouse can reach every card */
  .services-scroller:not(.is-pinned) .services-grid {
    scrollbar-width: thin;
    scrollbar-color: rgba(100, 180, 255, 0.45) transparent;
  }

  .services-scroller:not(.is-pinned) .services-grid::-webkit-scrollbar {
    display: block;
    height: 8px;
  }

  .services-scroller:not(.is-pinned) .services-grid::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: rgba(100, 180, 255, 0.45);
  }
}

.services-scroller.is-pinned {
  height: calc(100vh + 6 * 42vh);
  height: calc(100svh + 6 * 42svh);
}

.services-scroller.is-pinned .services-stage {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  padding: calc(var(--header-h, 5.6rem) + 0.4rem) 0 1rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.services-scroller.is-pinned .services-carousel {
  margin-top: 0;
}

.services-scroller.is-pinned .services-grid {
  overflow-x: hidden;
  scroll-snap-type: none;
}

/* 0.72 keeps the dimmed cards' text at 4.5:1 */
.services-scroller.is-pinned .service-card {
  animation: none;
  opacity: 0.72;
  transition:
    opacity 450ms ease,
    transform 450ms cubic-bezier(0.22, 1, 0.36, 1),
    border-color 450ms ease,
    box-shadow 450ms ease;
}

.services-scroller.is-pinned .service-card.is-current {
  opacity: 1;
  transform: translateY(-6px);
  border-color: rgba(100, 180, 255, 0.5);
  box-shadow: 0 22px 48px -12px rgba(30, 134, 238, 0.55);
}

.services-scroller.is-pinned .service-card.is-current::before {
  opacity: 1;
}

.services-scroller.is-pinned .services-progress {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  width: min(100%, 26rem);
  margin: 0.4rem auto 0;
  color: var(--text-soft);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.06em;
}

.services-count b {
  color: var(--ink);
}

.services-count i {
  font-style: normal;
}

.services-bar {
  flex: 1;
  height: 3px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  overflow: hidden;
}

.services-bar span {
  display: block;
  height: 100%;
  background: var(--brand-gradient);
  transform-origin: left center;
  transform: scaleX(var(--p, 0));
}


/* ===== smartart/icons/style.css ===== */
/* ==========================
   SMART-ART: ICONS
   One inline SVG sprite (inserted right after <body>) and two building blocks:
   .ico       a 20px line icon that takes its color from `color`
   .ico-tile  a 40px rounded tile that holds a 22px icon
   Surfaces: dark service cards (default), the blue slate section (journey steps and
   deliverables) and the contact boxes. Icons are static: no motion, so nothing here
   depends on JS or on the reduced-motion setting.
   ========================== */

/* The sprite only holds <symbol>s. Keep it out of layout without display:none. */
.ico-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
  pointer-events: none;
}

.ico {
  display: inline-block;
  flex: none;
  width: 20px;
  height: 20px;
  color: var(--accent);
  vertical-align: middle;
  pointer-events: none;
}

/* Tile: default look is for dark surfaces (service cards) */
.ico-tile {
  display: grid;
  place-items: center;
  flex: none;
  box-sizing: border-box;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: rgba(34, 208, 234, 0.1);
  border: 1px solid rgba(100, 180, 255, 0.25);
  color: var(--accent);
  transition:
    background-color 260ms ease,
    border-color 260ms ease;
}

.ico-tile > .ico {
  width: 22px;
  height: 22px;
  color: inherit;
}

/* Tile on the blue slate section: pale cyan reads better than the accent on royal blue */
.ico-tile--slate,
.section-slate .ico-tile {
  background: rgba(181, 247, 255, 0.08);
  border-color: rgba(181, 247, 255, 0.3);
  color: rgba(181, 247, 255, 0.95);
}

/* ---- Services: the tile sits in the card's top-right corner, level with the
   title's first line (same corner as the How We Work icons). Floated so it shares
   the title's first two lines instead of adding a row: the cards stay short
   enough for the pinned carousel, and the title keeps a clean left edge. ---- */
.service-card > .ico-tile {
  float: right;
  margin: 0.2rem 0 0.4rem 0.9rem;
}

.service-card:hover > .ico-tile,
.services-scroller.is-pinned .service-card.is-current > .ico-tile {
  background: rgba(34, 208, 234, 0.16);
  border-color: rgba(34, 208, 234, 0.5);
}

/* ---- How We Work: a quiet icon in the top-right corner, level with the step number ---- */
.journey-card > .ico {
  position: absolute;
  top: 2rem;
  right: 1.5rem;
  width: 22px;
  height: 22px;
  color: rgba(181, 247, 255, 0.85);
}

/* ---- Deliverables: tile left of the title, title centered on the tile.
   styles.css gives every div in the strip card padding, a border and a blur,
   so reset those for the tile. ---- */
.deliverables-strip .ico-tile {
  float: left;
  margin: 0 0.85rem 0 0;
  padding: 0;
  border-radius: 12px;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.deliverables-strip .ico-tile + h3 {
  display: flex;
  align-items: center;
  min-height: 40px;
}

/* ---- Contact: a 20px icon on the title line ---- */
.contact-points .ico {
  margin: -0.2em 0.5rem 0 0;
  vertical-align: middle;
}

@media (max-width: 560px) {
  .journey-card > .ico {
    top: 1.7rem;
    right: 1.2rem;
  }
}

/* Windows high-contrast and other forced-color modes */
@media (forced-colors: active) {
  .ico,
  .ico-tile,
  .ico-tile > .ico,
  .journey-card > .ico {
    color: CanvasText;
  }

  .ico-tile {
    border-color: CanvasText;
  }
}


/* ===== smartart/hero/style.css ===== */
/* ==========================
   HERO SMART-ART
   A. Service Model panel: a vertical workflow (Advisory, then Delivery, then Operations)
      with icon tiles and connectors, plus small icons on the three panel metrics.
   B. Hero highlight cards: one small conceptual visual per card (hub, roadmap, monthly cycle).
   The finished drawing is the default look. The "before" look lives only in the
   prefers-reduced-motion: no-preference block at the end of this file; script.js adds
   .is-drawn to each .viz once, when 35% of it is on screen.
   ========================== */

/* ---------- A. Service Model workflow ---------- */
/* The tile sits beside each title; the paragraph keeps its full width, so no line wraps
   change and the panel stays the same height as before. */
.signal-list.signal-list--flow {
  --flow-tile: 40px;
  --flow-pad-top: 0.95rem;    /* site value for article padding-top */
  --flow-pad-left: 0.8rem;    /* tile inset: about the same on the top and left */
  --flow-tile-shift: -0.25rem; /* centers the tile on the title text */
  --flow-gap: 0.9rem;         /* site value for the .signal-list gap */
}

/* Only the left padding changes (1.2rem to 0.8rem). That makes the text column wider,
   never narrower, so no paragraph gains a line. */
.signal-list.signal-list--flow > article {
  padding-left: var(--flow-pad-left);
  display: grid;
  grid-template-columns: var(--flow-tile) minmax(0, 1fr);
  column-gap: 0.75rem;
  align-items: center;
}

.signal-list--flow > article > h3,
.signal-list--flow > article > h2 {
  grid-column: 2;
}

.signal-list--flow > article > p {
  grid-column: 1 / -1;
}

.signal-list--flow .ico-tile {
  grid-column: 1;
  grid-row: 1;
  align-self: start;
  display: grid;
  place-items: center;
  width: var(--flow-tile);
  height: var(--flow-tile);
  /* Equal negative margins keep the title row at its old height */
  margin-block: var(--flow-tile-shift);
  border-radius: 12px;
  background: rgba(34, 208, 234, 0.1);
  border: 1px solid rgba(100, 180, 255, 0.25);
  color: var(--accent);
}

.signal-list--flow .ico-tile .ico {
  width: 22px;
  height: 22px;
}

/* Icon stroke style, repeated here in scope so these icons look right even if the
   shared .ico rules load later or change */
.signal-list--flow .ico-tile .ico,
.panel-metrics .ico-title .ico {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Connector: leaves the bottom of one step and points into the next step's tile.
   It sits under the tile column, below the last line of text, so it never crosses text. */
.signal-list--flow .viz.viz--hero-link {
  position: absolute;
  z-index: 1;
  top: calc(100% - 0.6rem);
  bottom: calc(4px - var(--flow-gap) - var(--flow-pad-top) - var(--flow-tile-shift));
  left: calc(var(--flow-pad-left) + var(--flow-tile) / 2 - 5px);
  width: 10px;
  height: auto;
  margin: 0;
  aspect-ratio: auto;
  pointer-events: none;
}

.signal-list--flow .viz--hero-link::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 5px;
  left: 4px;
  width: 2px;
  border-radius: 1px;
  background: linear-gradient(180deg, rgba(34, 208, 234, 0), var(--accent) 55%);
  transform-origin: 50% 0;
  transition: transform 900ms cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: calc(var(--viz-delay, 0) * 90ms);
}

.signal-list--flow .viz--hero-link::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 10px;
  height: 7px;
  background: var(--accent);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  transition:
    opacity 300ms ease,
    transform 300ms cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: calc((var(--viz-delay, 0) + 4) * 90ms);
}

/* Draw order: Advisory to Delivery first, then Delivery to Operations.
   Beside the hero copy (wide screens) both connectors start together, so the second waits longer. */
.signal-list--flow > article:nth-child(1) .viz--hero-link {
  --viz-delay: 3;
}

.signal-list--flow > article:nth-child(2) .viz--hero-link {
  --viz-delay: 7;
}

@media (max-width: 1080px) {
  .signal-list--flow > article:nth-child(1) .viz--hero-link {
    --viz-delay: 1;
  }

  .signal-list--flow > article:nth-child(2) .viz--hero-link {
    --viz-delay: 4;
  }
}

/* Panel metrics: a 20px icon before each title */
.panel-metrics .ico-title {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.panel-metrics .ico-title .ico {
  flex: none;
  width: 20px;
  height: 20px;
  color: var(--accent-deep);
}

/* ---------- B. Hero highlight visuals ---------- */
.hero-highlights .viz--hero-hub,
.hero-highlights .viz--hero-gantt,
.hero-highlights .viz--hero-cycle {
  margin: 0 0 1rem;
  padding: 0.65rem 0.75rem;
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(255, 255, 255, 0.07);
}

.viz--hero-hub > svg,
.viz--hero-cycle > svg,
.viz--hero-gantt .viz__canvas {
  display: block;
  width: 100%;
  max-width: 22rem;
  margin-inline: auto;
}

.viz--hero-hub svg,
.viz--hero-gantt svg,
.viz--hero-cycle svg {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 320 / 90;
  overflow: visible;
}

/* Shared drawing primitives (scoped to these three visuals).
   Delays add --stagger-delay, which script.js sets on each .hero-highlights card
   ([data-stagger]), so each drawing starts with its own card's fade-in. The Typical
   Projects diagrams use the same formula. */
.viz--hero-hub .viz__link,
.viz--hero-gantt .viz__bar {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
  transition:
    stroke-dashoffset 900ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity 300ms ease;
  transition-delay: calc(var(--stagger-delay, 0ms) + var(--viz-delay, 0) * 90ms);
}

/* Card 1: neutral hub linked to three different platforms.
   Stroke weights follow the shared diagram system: connectors 1.5, outlined shapes 1.5
   (small, icon-like shapes), hairline halos 1. */
.viz--hero-hub .viz__link {
  stroke: var(--accent);
  stroke-width: 1.5;
}

.viz--hero-hub .viz__hub {
  transform-box: fill-box;
  transform-origin: center;
  transition:
    opacity 300ms ease,
    transform 300ms cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: var(--stagger-delay, 0ms);
}

.viz--hero-hub .viz__hub-halo {
  fill: none;
  stroke: rgba(34, 208, 234, 0.35);
  stroke-width: 1;
}

.viz--hero-hub .viz__hub-ring {
  fill: rgba(34, 208, 234, 0.12);
  stroke: var(--accent);
  stroke-width: 1.5;
}

.viz--hero-hub .viz__hub-core {
  fill: var(--accent);
}

.viz--hero-hub .viz__node {
  fill: rgba(255, 255, 255, 0.06);
  stroke: var(--text-soft);
  stroke-width: 1.5;
  stroke-linejoin: round;
  transform-box: fill-box;
  transform-origin: center;
  transition:
    opacity 300ms ease,
    transform 300ms cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: calc(var(--stagger-delay, 0ms) + var(--viz-delay, 0) * 90ms);
}

/* Card 2: mini roadmap (three phases across 12 / 24 / 36 months) */
.viz--hero-gantt .viz__canvas {
  position: relative;
  container-type: inline-size;
}

.viz--hero-gantt .viz__grid {
  fill: none;
  stroke: rgba(230, 237, 247, 0.22);
  stroke-width: 1;
  stroke-dasharray: 2 3;
}

.viz--hero-gantt .viz__axis {
  fill: none;
  stroke: rgba(230, 237, 247, 0.55);
  stroke-width: 1.25;
  stroke-linecap: round;
}

.viz--hero-gantt .viz__bar {
  stroke-width: 10;
}

.viz--hero-gantt .viz__bar--1 {
  stroke: var(--accent);
}

.viz--hero-gantt .viz__bar--2 {
  stroke: var(--accent-strong);
}

.viz--hero-gantt .viz__bar--3 {
  stroke: var(--gold);
}

/* Month labels are HTML (not SVG text) so they stay 12px at every card width */
.viz--hero-gantt .viz__ticks {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.viz--hero-gantt .viz__tick {
  position: absolute;
  top: calc(64 / 90 * 100%);
  left: calc(var(--x) / 320 * 100%);
  transform: translateX(-50%);
  color: var(--text-soft);
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.viz--hero-gantt .viz__tick--title {
  transform: none;
}

/* "Illustrative" note, top right, clear of the bars and gridlines */
.viz--hero-gantt .viz__tick--note {
  top: 0;
  transform: translateX(-100%);
  color: rgba(255, 255, 255, 0.58);
}

@container (max-width: 230px) {
  .viz--hero-gantt .viz__tick--title {
    display: none;
  }
}

/* Card 3: monthly cycle (12 months around a loop) */
.viz--hero-cycle .viz__track {
  fill: none;
  stroke: rgba(230, 237, 247, 0.4);
  stroke-width: 1.25;
  stroke-linecap: round;
}

.viz--hero-cycle .viz__slot {
  fill: rgba(255, 255, 255, 0.04);
  stroke: rgba(230, 237, 247, 0.55);
  stroke-width: 1.25;
}

.viz--hero-cycle .viz__dot {
  fill: var(--accent);
  transform-box: fill-box;
  transform-origin: center;
  transition:
    opacity 300ms ease,
    transform 300ms cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: calc(var(--stagger-delay, 0ms) + var(--viz-delay, 0) * 90ms);
}

.viz--hero-cycle .viz__return {
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: opacity 300ms ease;
  transition-delay: calc(var(--stagger-delay, 0ms) + var(--viz-delay, 0) * 90ms);
}

/* ---------- Motion: the "before" look (only when motion is allowed and JS runs) ---------- */
@media (prefers-reduced-motion: no-preference) {
  .js .viz.viz--hero-link:not(.is-drawn)::before {
    transform: scaleY(0);
  }

  .js .viz.viz--hero-link:not(.is-drawn)::after {
    opacity: 0;
    transform: translateY(-4px);
  }

  .js .viz--hero-hub:not(.is-drawn) .viz__hub {
    opacity: 0;
    transform: scale(0.7);
  }

  .js .viz--hero-hub:not(.is-drawn) .viz__link,
  .js .viz--hero-gantt:not(.is-drawn) .viz__bar {
    stroke-dashoffset: 1;
    opacity: 0;
  }

  .js .viz--hero-hub:not(.is-drawn) .viz__node {
    opacity: 0.3;
    transform: scale(0.85);
  }

  .js .viz--hero-cycle:not(.is-drawn) .viz__dot {
    opacity: 0;
    transform: scale(0.4);
  }

  .js .viz--hero-cycle:not(.is-drawn) .viz__return {
    opacity: 0;
  }
}


/* ===== smartart/projects-a/style.css ===== */
/* ==========================
   TYPICAL PROJECTS: CARD DIAGRAMS (projects-a)
   Three diagrams, each the first child of an .engagement-card in #engagements:
   card 1 in-country private cloud (topology), card 4 container platform (cluster),
   card 5 platform decision (flowchart).
   The default CSS is the finished drawing (reduced motion, no JS). The "before" look
   lives only in the motion block at the end of this file.
   ========================== */

/* Frame: the same quiet inset panel as the projects-b charts (same padding, radius, colors,
   max-width and phone padding), so all six panels are the same height and the h3s line up
   across each row. The drawing keeps a steady size (and label size) in wide and narrow cards.
   Change both files together. */
.viz--residency,
.viz--cluster,
.viz--decision {
  margin: 0 0 1.25rem;
  padding: 0.85rem 0.5rem;
  border-radius: var(--radius-sm);
  background: rgba(4, 17, 47, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

/* Phones: give the drawing every pixel of width, so labels stay at 12px or more
   (same rule as the projects-b charts, so all six panels keep the same height) */
@media (max-width: 560px) {
  .viz--residency,
  .viz--cluster,
  .viz--decision {
    padding-inline: 0.2rem;
  }
}

:is(.viz--residency, .viz--cluster, .viz--decision) > svg {
  display: block;
  width: 100%;
  max-width: 21.5rem;
  height: auto;
  aspect-ratio: 320 / 140;
  margin-inline: auto;
  overflow: visible;
}

/* ---- Text ---- */
:is(.viz--residency, .viz--cluster, .viz--decision) .viz__label {
  font-family: inherit;
  font-size: 14.5px;
  font-weight: 500;
  fill: var(--text-soft);
}

:is(.viz--residency, .viz--cluster, .viz--decision) .viz__label--key {
  fill: var(--ink);
}

:is(.viz--residency, .viz--cluster, .viz--decision) .viz__label--strong {
  font-weight: 600;
  fill: var(--ink);
}

/* ---- Shapes ----
   Neutral: structure. Cyan: the point of the story. Blue: the platform's control.
   Lavender dashed: a boundary or a team's own space. */
:is(.viz--residency, .viz--cluster, .viz--decision) .viz__box {
  fill: rgba(255, 255, 255, 0.06);
  stroke: rgba(230, 237, 247, 0.55);
  stroke-width: 1.25;
  stroke-linejoin: round;
}

:is(.viz--residency, .viz--cluster, .viz--decision) .viz__box--accent {
  fill: rgba(34, 208, 234, 0.1);
  stroke: var(--accent);
}

:is(.viz--residency, .viz--cluster, .viz--decision) .viz__box--strong {
  fill: rgba(74, 164, 255, 0.1);
  stroke: var(--accent-strong);
}

:is(.viz--residency, .viz--cluster) .viz__area {
  fill: rgba(143, 161, 255, 0.06);
  stroke: var(--gold);
  stroke-width: 1.25;
  stroke-dasharray: 5 4;
}

.viz--residency .viz__area--boundary {
  fill: rgba(143, 161, 255, 0.035);
}

/* Rack details (card 1) */
.viz--residency .viz__unit {
  fill: none;
  stroke: rgba(230, 237, 247, 0.4);
  stroke-width: 1;
}

.viz--residency .viz__unit--pilot {
  fill: rgba(34, 208, 234, 0.14);
  stroke: var(--accent);
}

.viz--residency .viz__bay {
  fill: none;
  stroke: rgba(230, 237, 247, 0.4);
  stroke-width: 1;
  stroke-linecap: round;
}

.viz--residency .viz__led {
  fill: var(--accent);
}

.viz--residency .viz__pill {
  fill: rgba(34, 208, 234, 0.12);
  stroke: var(--accent);
  stroke-width: 1.25;
}

/* Container blocks on worker nodes (card 4) */
.viz--cluster .viz__block {
  fill: rgba(34, 208, 234, 0.16);
  stroke: var(--accent);
  stroke-width: 1;
}

/* ---- Connectors ----
   The line stops just inside the arrowhead's base; the arrowhead rides on its own
   short .viz__tip path, so it can appear when the line arrives. */
:is(.viz--residency, .viz--cluster, .viz--decision) .viz__link {
  fill: none;
  stroke-width: 1.5;
  stroke-linecap: butt;
  stroke-linejoin: round;
}

:is(.viz--residency, .viz--cluster, .viz--decision) .viz__link--accent {
  stroke: var(--accent);
}

:is(.viz--residency, .viz--cluster, .viz--decision) .viz__link--soft {
  stroke: rgba(230, 237, 247, 0.55);
}

:is(.viz--residency, .viz--cluster, .viz--decision) .viz__tip {
  fill: none;
  stroke: none;
}

:is(.viz--residency, .viz--cluster, .viz--decision) .viz__head {
  fill: rgba(230, 237, 247, 0.55);
}

:is(.viz--residency, .viz--cluster, .viz--decision) .viz__head--accent {
  fill: var(--accent);
}

/* ---- Windows high contrast: keep every shape and label visible ---- */
@media (forced-colors: active) {
  :is(.viz--residency, .viz--cluster, .viz--decision) :is(.viz__box, .viz__area, .viz__unit, .viz__bay, .viz__pill, .viz__block, .viz__link) {
    stroke: CanvasText;
  }

  :is(.viz--residency, .viz--cluster, .viz--decision) :is(.viz__box, .viz__area, .viz__unit, .viz__pill, .viz__block) {
    fill: Canvas;
  }

  :is(.viz--residency, .viz--cluster, .viz--decision) :is(.viz__label, .viz__head, .viz__led) {
    fill: CanvasText;
  }
}

/* ---- Motion: nodes fade in, connectors draw in, arrowheads land when the line arrives.
   --stagger-delay is set on each card by script.js ([data-stagger]); adding it keeps the
   drawing in step with the card's own fade-in. Longest sequence: about 1.4s. ---- */
@media (prefers-reduced-motion: no-preference) {
  :is(.viz--residency, .viz--cluster, .viz--decision) .viz__node {
    transform-box: fill-box;
    transform-origin: center;
    transition:
      opacity 300ms ease,
      transform 300ms cubic-bezier(0.22, 1, 0.36, 1);
    transition-delay: calc(var(--stagger-delay, 0ms) + var(--viz-delay, 0) * 90ms);
  }

  :is(.viz--residency, .viz--cluster, .viz--decision) .viz__link {
    stroke-dasharray: 1;
    stroke-dashoffset: 0;
    transition:
      stroke-dashoffset 900ms cubic-bezier(0.22, 1, 0.36, 1),
      opacity 0s;
    transition-delay: calc(var(--stagger-delay, 0ms) + var(--viz-delay, 0) * 90ms);
  }

  :is(.viz--residency, .viz--cluster, .viz--decision) .viz__tip {
    transition: opacity 300ms ease;
    transition-delay: calc(var(--stagger-delay, 0ms) + var(--viz-delay, 0) * 90ms + 480ms);
  }

  .js .viz:is(.viz--residency, .viz--cluster, .viz--decision):not(.is-drawn) .viz__node {
    opacity: 0;
    transform: translateY(4px);
  }

  /* opacity 0 as well, so no line end shows before its draw starts */
  .js .viz:is(.viz--residency, .viz--cluster, .viz--decision):not(.is-drawn) .viz__link {
    stroke-dashoffset: 1;
    opacity: 0;
  }

  .js .viz:is(.viz--residency, .viz--cluster, .viz--decision):not(.is-drawn) .viz__tip {
    opacity: 0;
  }
}


/* ===== smartart/projects-b/style.css ===== */
/* ==========================
   TYPICAL PROJECTS: CARD CHARTS (projects-b)
   Three illustrative charts, each the first child of an .engagement-card in #engagements:
   card 2 upgrade stability (line), card 3 capacity forecast (line), card 6 risk matrix.
   The default CSS is the finished drawing (reduced motion, no JS). The "before" look
   lives only in the motion block at the end of this file.
   ========================== */

/* Frame: a quiet inset panel. The chart keeps a steady size (and label size) in wide
   and narrow cards, centred in the panel.
   Shared with projects-a (.viz--residency, .viz--cluster, .viz--decision): same padding,
   radius, colors, max-width and phone padding, so the six panels are the same height and
   the h3s line up across each row. Change both files together. */
.viz--upgrade-stability,
.viz--capacity-forecast,
.viz--risk-matrix {
  position: relative;
  container-type: inline-size;
  margin: 0 0 1.25rem;
  padding: 0.85rem 0.5rem;
  border-radius: var(--radius-sm);
  background: rgba(4, 17, 47, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

/* Phones: give the chart every pixel of width, so labels stay at 12px or more */
@media (max-width: 560px) {
  .viz--upgrade-stability,
  .viz--capacity-forecast,
  .viz--risk-matrix {
    padding-inline: 0.2rem;
  }
}

:is(.viz--upgrade-stability, .viz--capacity-forecast, .viz--risk-matrix) .viz__plot {
  display: block;
  width: 100%;
  max-width: 21.5rem;
  height: auto;
  aspect-ratio: 320 / 140;
  margin-inline: auto;
  overflow: visible;
}

/* "Illustrative" sits on the chart's bottom line, at the left, opposite the axis word
   ("Time" / "Impact"). It is positioned out of flow, so the panel height does not depend
   on it: its baseline sits 8 viewBox units (2.5% of the chart width) above the chart's
   bottom edge, at x = 8. 3.8px is the distance from the baseline to the bottom of a
   16px line box of 12px Poppins. Browsers without container units drop the calc()
   lines and keep the plain fallback: the panel's bottom-left corner. */
:is(.viz--upgrade-stability, .viz--capacity-forecast, .viz--risk-matrix) .viz__caption {
  position: absolute;
  left: 0.75rem;
  bottom: 0.3rem;
  left: calc(50% - min(100cqi, 21.5rem) / 2 + 0.025 * min(100cqi, 21.5rem));
  bottom: calc(0.85rem + 0.025 * min(100cqi, 21.5rem) - 3.8px);
  margin: 0;
  color: rgba(255, 255, 255, 0.58);
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  white-space: nowrap;
  pointer-events: none;
}

/* ---- Shared marks ---- */
:is(.viz--upgrade-stability, .viz--capacity-forecast, .viz--risk-matrix) .viz__label {
  font-family: inherit;
  font-size: 14.5px;
  font-weight: 500;
  fill: var(--text-soft);
}

:is(.viz--upgrade-stability, .viz--capacity-forecast, .viz--risk-matrix) .viz__label--strong {
  font-weight: 600;
  fill: var(--ink);
}

:is(.viz--upgrade-stability, .viz--capacity-forecast) .viz__grid {
  fill: none;
  stroke: rgba(255, 255, 255, 0.07);
  stroke-width: 1;
}

:is(.viz--upgrade-stability, .viz--capacity-forecast, .viz--risk-matrix) .viz__axis {
  fill: none;
  stroke: rgba(230, 237, 247, 0.55);
  stroke-width: 1.25;
  stroke-linecap: round;
  stroke-linejoin: round;
}

:is(.viz--upgrade-stability, .viz--capacity-forecast) .viz__line {
  fill: none;
  stroke-width: 2.25;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
}

:is(.viz--upgrade-stability, .viz--capacity-forecast) .viz__line--muted {
  stroke: rgba(230, 237, 247, 0.55);
}

:is(.viz--upgrade-stability, .viz--capacity-forecast) .viz__line--accent {
  stroke: var(--accent);
}

:is(.viz--upgrade-stability, .viz--capacity-forecast) .viz__stop--top {
  stop-color: var(--accent);
  stop-opacity: 0.2;
}

:is(.viz--upgrade-stability, .viz--capacity-forecast) .viz__stop--bottom {
  stop-color: var(--accent);
  stop-opacity: 0;
}

/* Event markers: dashed and neutral for what happened, solid cyan for our action */
:is(.viz--upgrade-stability, .viz--capacity-forecast) .viz__marker-line {
  fill: none;
  stroke: rgba(230, 237, 247, 0.55);
  stroke-width: 1.25;
  stroke-dasharray: 3 4;
}

:is(.viz--upgrade-stability, .viz--capacity-forecast) .viz__marker--accent .viz__marker-line {
  stroke: var(--accent);
  stroke-width: 1.5;
  stroke-dasharray: none;
}

:is(.viz--upgrade-stability, .viz--capacity-forecast) .viz__dot {
  fill: var(--accent);
}

:is(.viz--upgrade-stability, .viz--capacity-forecast) .viz__halo {
  fill: var(--accent);
  fill-opacity: 0.16;
  stroke: var(--accent);
  stroke-opacity: 0.5;
  stroke-width: 1;
}

:is(.viz--upgrade-stability, .viz--capacity-forecast, .viz--risk-matrix) .viz__pop {
  transform-box: fill-box;
  transform-origin: center;
}

/* ---- Card 2: upgrade stability ---- */
.viz--upgrade-stability .viz__band {
  fill: var(--gold);
  fill-opacity: 0.09;
}

/* ---- Card 3: capacity forecast ---- */
.viz--capacity-forecast .viz__limit {
  fill: none;
  stroke: rgba(230, 237, 247, 0.7);
  stroke-width: 1.75;
}

.viz--capacity-forecast .viz__forecast {
  fill: none;
  stroke: var(--accent-strong);
  stroke-width: 2.25;
  stroke-linecap: round;
  stroke-dasharray: 3.5 5;
}

/* Mask stroke that uncovers the dashed forecast (white = visible) */
.viz--capacity-forecast .viz__reveal {
  fill: none;
  stroke: white;
  stroke-width: 10;
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
}

.viz--capacity-forecast .viz__now {
  fill: var(--accent);
  stroke: var(--surface-darker);
  stroke-width: 1.5;
}

.viz--capacity-forecast .viz__limit-hit {
  fill: var(--surface-darker);
  stroke: var(--gold);
  stroke-width: 1.75;
}

/* ---- Card 6: risk matrix ---- */
.viz--risk-matrix .viz__cell,
.viz--risk-matrix .viz__swatch {
  fill: var(--accent-strong);
  stroke: rgba(230, 237, 247, 0.14);
  stroke-width: 1;
}

.viz--risk-matrix .viz__badge {
  fill: var(--surface-darker);
  stroke: var(--accent);
  stroke-width: 1.25;
}

.viz--risk-matrix .viz__check {
  fill: none;
  stroke: var(--accent);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.viz--risk-matrix .viz__divider {
  fill: none;
  stroke: rgba(255, 255, 255, 0.1);
  stroke-width: 1;
}

/* ---- Motion: lines draw in once, markers and checks follow in order.
   --stagger-delay is set on each card by script.js ([data-stagger]); adding it keeps the
   drawing in step with the card's own fade-in. ---- */
@media (prefers-reduced-motion: no-preference) {
  :is(.viz--upgrade-stability, .viz--capacity-forecast) .viz__draw {
    transition:
      stroke-dashoffset 900ms cubic-bezier(0.22, 1, 0.36, 1),
      opacity 0s;
    transition-delay: calc(var(--stagger-delay, 0ms) + var(--viz-delay, 0) * 90ms);
  }

  :is(.viz--upgrade-stability, .viz--capacity-forecast, .viz--risk-matrix) .viz__fade {
    transition: opacity 300ms ease;
    transition-delay: calc(var(--stagger-delay, 0ms) + var(--viz-delay, 0) * 90ms);
  }

  :is(.viz--upgrade-stability, .viz--capacity-forecast, .viz--risk-matrix) .viz__pop {
    transition:
      opacity 300ms ease,
      transform 300ms cubic-bezier(0.22, 1, 0.36, 1);
    transition-delay: calc(var(--stagger-delay, 0ms) + var(--viz-delay, 0) * 90ms);
  }

  /* opacity 0 as well, so round line caps leave no dot before the draw starts */
  .js :is(.viz--upgrade-stability, .viz--capacity-forecast):not(.is-drawn) .viz__draw {
    stroke-dashoffset: 1;
    opacity: 0;
  }

  .js :is(.viz--upgrade-stability, .viz--capacity-forecast, .viz--risk-matrix):not(.is-drawn) .viz__fade {
    opacity: 0;
  }

  .js :is(.viz--upgrade-stability, .viz--capacity-forecast, .viz--risk-matrix):not(.is-drawn) .viz__pop {
    opacity: 0;
    transform: scale(0.4);
  }
}


/* ===== smartart/handover/style.css ===== */
/* ==========================
   HOW WE WORK: HANDOVER CHART
   A box under .deliverables-strip in #delivery. Text on the left, chart on the right
   (stacked on phones). The chart shows the share of work moving from NexaOrb to
   the client's team across the six steps. Default CSS is the finished drawing; the
   "before" look lives only in the motion block at the end of this file.
   ========================== */

/* Box: same surface as the .deliverables-strip boxes above it */
.handover {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.35rem;
  margin-top: 1rem;
  padding: 1.3rem;
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.handover__copy h3 {
  margin: 0 0 0.7rem;
  color: var(--ink);
  font-size: 1.45rem;
  line-height: 1.15;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.handover__copy p {
  margin: 0;
  max-width: 40ch;
  color: rgba(255, 255, 255, 0.9);
  text-wrap: pretty;
}

/* Desktop and landscape tablets: text about 40%, chart about 60% */
@media (min-width: 821px) {
  .handover {
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
    gap: 2.5rem;
    align-items: center;
  }

  .handover__copy {
    padding-left: 0.2rem;
  }
}

/* ---- Chart ---- */
.viz--handover {
  container: viz-handover / inline-size;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "legend caption"
    "plot plot"
    "axis axis";
  align-items: center;
  gap: 0.8rem 1rem;
  margin: 0;
  min-width: 0;
}

/* Phones: the legend and the uppercase caption no longer fit on one row (the chart is
   about 287px wide at 390), so the caption moves under the step labels, at the left,
   and the legend keeps one row. */
@media (max-width: 420px) {
  .viz--handover {
    grid-template-areas:
      "legend legend"
      "plot plot"
      "axis axis"
      "caption caption";
  }
}

.viz--handover .viz__legend {
  grid-area: legend;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1.15rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.viz--handover .viz__key {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.3;
  white-space: nowrap;
}

.viz--handover .viz__swatch {
  flex: none;
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 3px;
}

.viz--handover .viz__key--fdc .viz__swatch {
  background: rgba(143, 161, 255, 0.22);
  border: 1.5px solid var(--gold);
}

.viz--handover .viz__key--team .viz__swatch {
  background: rgba(34, 208, 234, 0.32);
  border: 1.5px solid var(--accent);
}

/* Same type as the "Illustrative" captions on the Typical Projects charts (12px, 500,
   uppercase, 0.07em tracking). The color is lighter here to keep 4.5:1 on the brighter slate. */
.viz--handover .viz__caption {
  grid-area: caption;
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.viz--handover .viz__stage {
  grid-area: plot;
  position: relative;
  min-width: 0;
}

.viz--handover .viz__plot {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 320 / 140;
}

/* Step markers sit in an overlay with no viewBox: positions are percentages of the
   chart (x / 320, y / 140), sizes are pixels, so markers stay the same size at any width */
.viz--handover .viz__marks {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.viz--handover .viz__panel {
  fill: rgba(255, 255, 255, 0.04);
}

.viz--handover .viz__grid {
  fill: none;
  stroke: rgba(255, 255, 255, 0.16);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

/* Band fills are kept light so this large chart stays as calm as the smaller panels
   around it; the white line and the legend carry the reading. */
.viz--handover .viz__area--fdc {
  fill: var(--gold);
  fill-opacity: 0.18;
}

.viz--handover .viz__area--team {
  fill: var(--accent);
  fill-opacity: 0.28;
}

/* The line where the work passes from NexaOrb to your team */
.viz--handover .viz__line {
  fill: none;
  stroke: var(--ink);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.viz--handover .viz__node {
  fill: var(--accent);
  stroke: var(--ink);
  stroke-width: 2.5;
}

/* Step labels sit under the six gridlines (column centers of a 6-column grid) */
.viz--handover .viz__axis {
  grid-area: axis;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
  text-align: center;
}

.viz--handover .viz__tick-num {
  color: var(--ink);
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.02em;
}

/* Step names only where there is room for them (about 72px per step) */
.viz--handover .viz__tick-name {
  display: none;
  margin-top: 0.2rem;
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.2;
}

@container viz-handover (min-width: 27rem) {
  .viz--handover .viz__tick-name {
    display: block;
  }
}

/* ---- Motion: the bands and line are revealed left to right once, then the step
   markers appear in order. Two nested groups slide in opposite directions, so the
   clip window moves across while the drawing itself stays still. ---- */
@media (prefers-reduced-motion: no-preference) {
  .viz--handover .viz__wipe,
  .viz--handover .viz__wipe-inner {
    transition: transform 900ms cubic-bezier(0.22, 1, 0.36, 1);
  }

  .viz--handover .viz__node {
    transition: opacity 300ms ease;
    transition-delay: calc(var(--viz-delay, 0) * 90ms);
  }

  .js .viz--handover:not(.is-drawn) .viz__wipe {
    transform: translateX(-320px);
  }

  .js .viz--handover:not(.is-drawn) .viz__wipe-inner {
    transform: translateX(320px);
  }

  .js .viz--handover:not(.is-drawn) .viz__node {
    opacity: 0;
  }
}