/* ==========================================================================
   Quantum Executive — 2026 design system
   Shared by index.html and client-results.html
   ========================================================================== */

/* ---------- Tokens ---------- */
:root {
  /* Color */
  --ink: #0a0e16;
  --ink-2: #111723;
  --ink-3: #1a2231;
  --paper: #ffffff;
  --mist: #f3f4f7;
  --mist-2: #e9ebf0;
  --text: #0a0e16;
  --muted: #566070;
  --muted-2: #7b8494;
  --on-dark: #ffffff;
  --on-dark-muted: rgba(255, 255, 255, 0.66);
  --on-dark-faint: rgba(255, 255, 255, 0.12);
  --accent: #2f80ed;           /* Quantum Executive blue */
  --accent-strong: #1b6ad6;
  --accent-soft: #e7f0fd;
  --accent-glow: #6aa8ff;
  --line: rgba(10, 14, 22, 0.09);
  --line-dark: rgba(255, 255, 255, 0.1);
  --danger: #d93b3b;
  --success: #1f9d63;

  /* Type */
  --font: "Inter Tight", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --fs-display: clamp(2.75rem, 1.35rem + 5.6vw, 6.25rem);
  --fs-h1: clamp(2.5rem, 1.5rem + 4vw, 5rem);
  --fs-h2: clamp(2rem, 1.4rem + 2.4vw, 3.5rem);
  --fs-h3: clamp(1.3rem, 1.15rem + 0.55vw, 1.625rem);
  --fs-lead: clamp(1.0625rem, 1rem + 0.35vw, 1.3125rem);
  --fs-body: 1.0625rem;
  --fs-small: 0.9375rem;
  --fs-label: 0.8125rem;
  --fs-stat: clamp(3.25rem, 2rem + 4.6vw, 6rem);
  --lh-tight: 1.02;
  --lh-snug: 1.15;
  --lh-body: 1.65;
  --track-display: -0.045em;
  --track-heading: -0.03em;

  /* Space (4px base) */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 96px;
  --section: clamp(56px, 2.25rem + 3.5vw, 104px);
  --gutter: clamp(16px, 4vw, 40px);
  --container: 1280px;
  --header-h: 88px;
  --frame-gap: clamp(6px, 0.9vw, 14px);

  /* Shape */
  --r-sm: 12px;
  --r-md: 20px;
  --r-lg: 28px;
  --r-xl: clamp(24px, 3vw, 40px);
  --r-pill: 999px;

  /* Elevation */
  --shadow-sm: 0 1px 2px rgba(10, 14, 22, 0.05), 0 2px 8px rgba(10, 14, 22, 0.04);
  --shadow-md: 0 10px 30px -12px rgba(10, 14, 22, 0.18);
  --shadow-lg: 0 30px 70px -30px rgba(10, 14, 22, 0.35);

  /* Motion */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --t-fast: 180ms;
  --t-med: 420ms;
  --t-slow: 800ms;
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 8px);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--text);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
  text-rendering: optimizeLegibility;
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
button { font: inherit; color: inherit; }
h1, h2, h3, h4, p, ul, ol { margin: 0; }
ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }

::selection { background: var(--accent); color: #fff; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 6px;
}

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

.skip-link {
  position: absolute;
  left: 16px; top: -60px;
  z-index: 200;
  padding: 10px 16px;
  background: var(--accent);
  color: #fff;
  border-radius: var(--r-pill);
  font-weight: 600;
  text-decoration: none;
  transition: top var(--t-fast) var(--ease);
}
.skip-link:focus { top: 16px; }

.container {
  width: 100%;
  max-width: calc(var(--container) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: var(--section); position: relative; }
.section--mist { background: var(--mist); }
.section--ink { background: var(--ink); color: var(--on-dark); }

/* ---------- Typography ---------- */
.display {
  font-size: var(--fs-display);
  line-height: var(--lh-tight);
  letter-spacing: var(--track-display);
  font-weight: 600;
}
.h1 { font-size: var(--fs-h1); line-height: var(--lh-tight); letter-spacing: var(--track-display); font-weight: 600; }
.h2 { font-size: var(--fs-h2); line-height: 1.06; letter-spacing: var(--track-heading); font-weight: 500; }
.h3 { font-size: var(--fs-h3); line-height: 1.2; letter-spacing: -0.02em; font-weight: 600; }
.lead { font-size: var(--fs-lead); line-height: 1.55; color: var(--muted); font-weight: 450; }
.section--ink .lead,
.on-dark .lead { color: var(--on-dark-muted); }
.muted { color: var(--muted); }
.accent-text { color: var(--accent); }

/* Section badge: a small glass eyebrow that anchors each section header.
   Light sections get neutral dark-tinted glass; dark sections get translucent light glass. */
.label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  width: fit-content;
  padding: 7px 14px 7px 11px;
  border-radius: var(--r-pill);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  line-height: 1.2;
  text-transform: uppercase;
  color: #3a4456;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.75) 0%, rgba(255, 255, 255, 0.35) 100%),
    rgba(10, 14, 22, 0.035);
  border: 1px solid rgba(10, 14, 22, 0.08);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 1px 2px rgba(10, 14, 22, 0.04),
    0 6px 16px -10px rgba(10, 14, 22, 0.18);
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
}
.label::before {
  content: "";
  width: 7px; height: 7px;
  flex: none;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px rgba(47, 128, 237, 0.16), 0 0 10px rgba(47, 128, 237, 0.45);
}
.section--ink .label,
.on-dark .label,
.cta-band .label {
  color: rgba(235, 242, 255, 0.86);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.09) 0%, rgba(255, 255, 255, 0.03) 100%),
    rgba(8, 12, 20, 0.3);
  border-color: rgba(255, 255, 255, 0.13);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 10px 26px -14px rgba(0, 0, 0, 0.6);
}
.section--ink .label::before,
.on-dark .label::before,
.cta-band .label::before { box-shadow: 0 0 0 3px rgba(47, 128, 237, 0.25), 0 0 12px rgba(106, 168, 255, 0.7); }

/* Standard header rhythm: badge → heading → supporting copy */
.label + :is(h1, h2, .h1, .h2, .display) { margin-top: clamp(16px, 1.5vw, 22px); }
/* Deliberate desktop line breaks in headings; balanced wrapping takes over on small screens */
.hb { display: none; }
@media (min-width: 700px) { .hb { display: inline; } }

/* Section header: centred single column — badge → heading → supporting copy */
.section-head {
  display: grid;
  justify-items: center;
  gap: clamp(14px, 1.6vw, 20px);
  max-width: 820px;
  margin: 0 auto clamp(36px, 4.5vw, 60px);
  text-align: center;
}
.section-head .h2 { max-width: none; text-wrap: balance; }
.section-head .lead { max-width: 58ch; font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem); line-height: 1.6; text-wrap: pretty; }
/* A section's call to action sits after its content, centred */
.section-foot { display: flex; justify-content: center; margin-top: clamp(28px, 3.5vw, 44px); }

/* ---------- Buttons ---------- */
.btn {
  --btn-bg: var(--accent);
  --btn-fg: #fff;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 6px 8px 6px 24px;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-decoration: none;
  cursor: pointer;
  isolation: isolate;
  overflow: hidden;
  transition: transform var(--t-fast) var(--ease), background-color var(--t-med) var(--ease),
    box-shadow var(--t-med) var(--ease), color var(--t-med) var(--ease);
  white-space: nowrap;
}
.btn:hover { background: var(--accent-strong); box-shadow: 0 12px 30px -12px rgba(47, 128, 237, 0.7); }
.btn:active { transform: scale(0.98); }

.btn__icon {
  display: grid;
  place-items: center;
  width: 38px; height: 38px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
  flex: none;
  overflow: hidden;
}
.btn__icon svg {
  width: 16px; height: 16px;
  transition: transform var(--t-med) var(--ease);
}
.btn:hover .btn__icon svg { transform: translateX(3px) rotate(0deg); }

.btn--light { --btn-bg: #fff; --btn-fg: var(--ink); }
.btn--light .btn__icon { background: var(--accent); color: #fff; }
.btn--light:hover { background: #fff; box-shadow: 0 12px 30px -12px rgba(0, 0, 0, 0.5); }

.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: currentColor;
  padding: 6px 24px;
  box-shadow: inset 0 0 0 1px currentColor;
}
.btn--ghost:hover { background: rgba(255, 255, 255, 0.1); box-shadow: inset 0 0 0 1px currentColor; }
.btn--ghost-dark { --btn-fg: var(--ink); box-shadow: inset 0 0 0 1px var(--line); background: #fff; padding: 6px 24px; }
.btn--ghost-dark:hover { background: var(--mist); box-shadow: inset 0 0 0 1px rgba(10,14,22,.18); }

.btn--dark { --btn-bg: var(--ink); }
.btn--dark:hover { background: var(--ink-3); box-shadow: 0 12px 30px -12px rgba(0,0,0,.5); }

.btn--sm { min-height: 44px; font-size: 0.9375rem; padding-left: 20px; }
.btn--sm .btn__icon { width: 32px; height: 32px; }
.btn--block { width: 100%; }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  color: var(--accent);
  text-decoration: none;
}
.link-arrow svg { width: 16px; height: 16px; transition: transform var(--t-med) var(--ease); }
.link-arrow:hover svg { transform: translateX(4px); }

/* ---------- Header / navigation ---------- */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  padding-top: calc(var(--frame-gap) + 8px);
  pointer-events: none;
  transition: padding var(--t-med) var(--ease);
}
.site-header.is-scrolled { padding-top: 10px; }

.nav {
  pointer-events: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-5);
  max-width: 1120px;
  margin-inline: auto;
  width: calc(100% - var(--gutter) * 2);
  padding: 8px 8px 8px 24px;
  border-radius: var(--r-pill);
  background: rgba(10, 14, 22, 0.38);
  border: 1px solid rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  transition: background-color var(--t-med) var(--ease), box-shadow var(--t-med) var(--ease),
    border-color var(--t-med) var(--ease);
}
.site-header.is-scrolled .nav {
  background: rgba(10, 14, 22, 0.82);
  box-shadow: 0 18px 40px -20px rgba(0, 0, 0, 0.55);
}

.nav__brand {
  position: relative;
  display: inline-flex;
  align-items: center;
  flex: none;
  padding-right: 6px;
}
.nav__brand img { height: 36px; width: auto; }

.nav__links {
  display: flex;
  align-items: center;
  gap: 4px;
  list-style: none;
  padding: 0;
  margin: 0;
}
.nav__links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 16px;
  border-radius: var(--r-pill);
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.9375rem;
  font-weight: 500;
  text-decoration: none;
  transition: color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease);
}
.nav__links a:hover,
.nav__links a[aria-current="page"] { color: #fff; background: rgba(255, 255, 255, 0.1); }

.nav__cta { flex: none; }

.nav__toggle {
  display: none;
  width: 44px; height: 44px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  cursor: pointer;
  position: relative;
}
.nav__toggle span {
  position: absolute;
  left: 13px; right: 13px;
  height: 2px;
  background: #fff;
  border-radius: 2px;
  transition: transform var(--t-med) var(--ease), opacity var(--t-fast);
}
.nav__toggle span:nth-child(1) { top: 16px; }
.nav__toggle span:nth-child(2) { top: 21px; }
.nav__toggle span:nth-child(3) { top: 26px; }
.nav__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav__toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

.nav-panel {
  pointer-events: auto;
  display: none;
}

@media (max-width: 1023px) {
  .nav { padding-left: 18px; }
  .nav__links,
  .nav__cta { display: none; }
  .nav__toggle { display: block; }

  .nav-panel {
    display: block;
    width: calc(100% - var(--gutter) * 2);
    margin: 8px auto 0;
    padding: 12px;
    border-radius: var(--r-lg);
    background: rgba(10, 14, 22, 0.94);
    border: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow: var(--shadow-lg);
    opacity: 0;
    transform: translateY(-8px) scale(0.98);
    visibility: hidden;
    transition: opacity var(--t-med) var(--ease), transform var(--t-med) var(--ease), visibility 0s linear var(--t-med);
  }
  .nav-panel.is-open {
    opacity: 1;
    transform: none;
    visibility: visible;
    transition: opacity var(--t-med) var(--ease), transform var(--t-med) var(--ease);
  }
  .nav-panel ul { list-style: none; padding: 0; margin: 0 0 12px; }
  .nav-panel li a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 14px;
    border-radius: var(--r-sm);
    color: #fff;
    font-size: 1.25rem;
    font-weight: 500;
    letter-spacing: -0.02em;
    text-decoration: none;
    border-bottom: 1px solid var(--line-dark);
  }
  .nav-panel li:last-child a { border-bottom: 0; }
  .nav-panel li a:hover { background: rgba(255, 255, 255, 0.06); }
  .nav-panel .btn { width: 100%; }
}

/* ---------- Hero (home) ---------- */
/* The frame is inset by --frame-gap on all four sides and sized to the
   viewport minus both gaps, so the white margin is equal on every side. */
.hero {
  position: relative;
  padding: var(--frame-gap);
  background: var(--paper);
}
.hero__frame {
  --mx: 50%;
  --my: 45%;
  --px: 0;
  --py: 0;
  --sy: 0px;
  position: relative;
  min-height: max(600px, calc(100svh - var(--frame-gap) * 2));
  border-radius: var(--r-xl);
  overflow: hidden;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  isolation: isolate;
  background: var(--ink);
}
.hero__media {
  position: absolute;
  inset: -6% -2% -2% -2%;
  z-index: -3;
  transform: translate3d(calc(var(--px) * -14px), calc(var(--sy) + var(--py) * -10px), 0);
  transition: transform 1.2s var(--ease);
  will-change: transform;
}
.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 55% 40%;
  transform: scale(1.08);
  animation: hero-zoom 2.4s var(--ease) forwards;
}
@keyframes hero-zoom { to { transform: scale(1); } }

/* Tint: same recipe as the Client Results opener (.page-hero__frame::before);
   its left-side darkening becomes a centred pocket because this copy is centred. */
.hero__frame::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    linear-gradient(0deg, rgba(8, 12, 20, 0.95) 0%, rgba(8, 12, 20, 0.7) 45%, rgba(8, 12, 20, 0.25) 100%),
    radial-gradient(65% 55% at 50% 50%, rgba(8, 12, 20, 0.5) 0%, rgba(8, 12, 20, 0.18) 60%, rgba(8, 12, 20, 0) 100%);
}

/* Decorative layer: cursor glow, fine grid, orbit ring echoing the logo. */
.hero__fx {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
}
.hero__glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(520px circle at var(--mx) var(--my), rgba(255, 244, 230, 0.13), rgba(255, 255, 255, 0.04) 45%, transparent 70%);
  mix-blend-mode: soft-light;
  opacity: 0;
  transition: opacity var(--t-slow) var(--ease);
}
.hero__frame.is-pointer .hero__glow { opacity: 1; }
.hero__grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
  background-size: 72px 72px;
  background-position: center;
  -webkit-mask-image: radial-gradient(50% 55% at var(--mx) var(--my), #000 0%, transparent 100%);
  mask-image: radial-gradient(50% 55% at var(--mx) var(--my), #000 0%, transparent 100%);
  opacity: 0.7;
}
.hero__orbit {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(1180px, 118%);
  aspect-ratio: 3 / 1;
  border-radius: 50%;
  transform: translate(-50%, -50%) rotate(-8deg);
}
.hero__orbit::before,
.hero__orbit-ring {
  content: "";
  position: absolute;
  border-radius: 50%;
  border: 1px solid transparent;
  -webkit-mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0) border-box;
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0) border-box;
  mask-composite: exclude;
}
.hero__orbit::before {
  inset: 0;
  background: linear-gradient(100deg, rgba(255, 255, 255, 0) 4%, rgba(255, 255, 255, 0.42) 28%, rgba(255, 255, 255, 0.08) 52%, rgba(255, 255, 255, 0.3) 78%, rgba(255, 255, 255, 0) 97%) border-box;
}
.hero__orbit-ring {
  inset: 14%;
  background: linear-gradient(260deg, rgba(255, 255, 255, 0) 8%, rgba(255, 255, 255, 0.22) 38%, rgba(255, 255, 255, 0.04) 70%, rgba(255, 255, 255, 0) 95%) border-box;
}
.hero__orbit::after {
  /* a small satellite travelling the ring */
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent-glow);
  box-shadow: 0 0 14px 4px rgba(106, 168, 255, 0.55);
  offset-path: ellipse(50% 50% at 50% 50%);
  offset-rotate: 0deg;
  animation: orbit 26s linear infinite;
}
@supports not (offset-path: ellipse(50% 50% at 50% 50%)) {
  .hero__orbit::after { display: none; }
}
@keyframes orbit {
  from { offset-distance: 0%; }
  to { offset-distance: 100%; }
}

.hero__content {
  width: 100%;
  max-width: 1080px;
  padding: calc(var(--header-h) + clamp(8px, 3svh, 32px)) clamp(20px, 5vw, 72px) clamp(24px, 6svh, 72px);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  width: fit-content;
  padding: 8px 16px 8px 10px;
  border-radius: var(--r-pill);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.09) 0%, rgba(255, 255, 255, 0.02) 100%),
    rgba(8, 12, 20, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    inset 0 -1px 0 rgba(0, 0, 0, 0.18),
    0 14px 34px -16px rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  font-size: var(--fs-small);
  font-weight: 500;
  color: rgba(255, 255, 255, 0.92);
}
.hero__eyebrow .dot {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 12px rgba(47, 128, 237, 0.55);
  display: grid;
  place-items: center;
}
.hero__eyebrow .dot::after {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #fff;
  animation: pulse 2.4s var(--ease) infinite;
}
@keyframes pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.6); opacity: 0.6; }
}

.hero__title {
  max-width: 14ch;
  margin-top: clamp(12px, 2.6svh, 32px);
  font-size: min(var(--fs-display), 10.5svh);
  text-wrap: balance;
  text-shadow: 0 2px 34px rgba(0, 0, 0, 0.32);
}
.hero__title em {
  font-style: normal;
  background: linear-gradient(100deg, #9cc6ff 0%, var(--accent-glow) 45%, #4d95f5 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: none;
}
.hero__sub {
  max-width: 46ch;
  margin-top: clamp(12px, 2.4svh, 28px);
  color: rgba(255, 255, 255, 0.88);
  font-size: min(var(--fs-lead), max(1rem, 2.5svh));
  line-height: 1.55;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35), 0 1px 18px rgba(0, 0, 0, 0.5);
}
/* Secondary action shares the glass material */
.hero .btn--ghost {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.09) 0%, rgba(255, 255, 255, 0.02) 100%),
    rgba(8, 12, 20, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    inset 0 -1px 0 rgba(0, 0, 0, 0.18),
    0 14px 34px -16px rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
}
.hero .btn--ghost:hover {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0.04) 100%),
    rgba(8, 12, 20, 0.26);
  border-color: rgba(255, 255, 255, 0.24);
}
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: clamp(16px, 3.4svh, 36px);
}

.hero__stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  width: min(100%, 620px);
  margin-top: clamp(20px, 5svh, 56px);
  gap: 0;
  border-radius: var(--r-md);
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.09) 0%, rgba(255, 255, 255, 0.02) 100%),
    rgba(8, 12, 20, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    inset 0 -1px 0 rgba(0, 0, 0, 0.18),
    0 14px 34px -16px rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
}
.hero__stat {
  padding: clamp(10px, 2svh, 18px) 20px;
}
.hero__stat + .hero__stat { border-left: 1px solid rgba(255, 255, 255, 0.1); }
.hero__stat strong {
  display: block;
  font-size: min(clamp(1.625rem, 1.2rem + 1.4vw, 2.25rem), max(1.375rem, 4svh));
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.1;
}
.hero__stat span { font-size: 0.875rem; color: rgba(255, 255, 255, 0.74); }

.hero__scroll {
  position: absolute;
  left: 50%;
  bottom: clamp(16px, 2.4vw, 28px);
  transform: translateX(-50%);
  display: grid;
  justify-items: center;
  gap: 8px;
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  transition: color var(--t-fast) var(--ease);
}
.hero__scroll:hover { color: #fff; }
.hero__scroll i {
  position: relative;
  width: 1px;
  height: 34px;
  background: rgba(255, 255, 255, 0.2);
  overflow: hidden;
}
.hero__scroll i::after {
  content: "";
  position: absolute;
  left: 0; top: 0;
  width: 1px; height: 12px;
  background: #fff;
  animation: scroll-cue 2.2s var(--ease-in-out) infinite;
}
@keyframes scroll-cue {
  0% { transform: translateY(-12px); }
  100% { transform: translateY(34px); }
}
/* Short laptop viewports: tighten the stack so it fits without growing the frame. */
@media (min-width: 561px) and (max-height: 720px) {
  .hero__content { padding-top: calc(var(--header-h) + 4px); padding-bottom: 20px; }
  .hero__eyebrow { padding-block: 5px; }
  .hero__title { font-size: min(var(--fs-display), 9.4svh); }
  .hero__sub { line-height: 1.45; }
  .hero__stat span { font-size: 0.8125rem; }
}
/* The cue only shows when there is room for it below the stats. */
@media (max-height: 1000px), (max-width: 560px) {
  .hero__scroll { display: none; }
}

@media (max-width: 560px) {
  .hero__eyebrow { gap: 8px; padding: 6px 12px 6px 7px; font-size: 0.75rem; text-align: left; }
  .hero__eyebrow .dot { width: 18px; height: 18px; flex: none; }
  .hero__stats { grid-template-columns: 1fr 1fr 1fr; }
  .hero__stat { padding: 14px 12px; }
  .hero__stat span { font-size: 0.75rem; line-height: 1.3; display: block; }
  .hero__orbit { width: 180%; }
}

/* ---------- Page hero (client results) ---------- */
.page-hero { padding: var(--frame-gap); }
.page-hero__frame {
  position: relative;
  border-radius: var(--r-xl);
  overflow: hidden;
  color: #fff;
  isolation: isolate;
  background: var(--ink);
  padding: calc(var(--header-h) + clamp(56px, 8vw, 120px)) clamp(20px, 5vw, 72px) clamp(32px, 4vw, 56px);
}
.page-hero__frame > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 35%;
  z-index: -2;
  transform: scale(1.06);
  animation: hero-zoom 2.4s var(--ease) forwards;
}
.page-hero__frame::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(0deg, rgba(8, 12, 20, 0.95) 0%, rgba(8, 12, 20, 0.7) 45%, rgba(8, 12, 20, 0.25) 100%),
    linear-gradient(90deg, rgba(8, 12, 20, 0.6) 0%, rgba(8, 12, 20, 0) 70%);
}
.page-hero__grid { display: grid; gap: var(--s-7); align-items: end; }
.page-hero__title { max-width: 11ch; }
.page-hero .lead { color: rgba(255, 255, 255, 0.8); max-width: 44ch; margin-top: var(--s-5); }
.page-hero__facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  border-radius: var(--r-md);
  overflow: hidden;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.page-hero__facts > li { padding: 18px 20px; background: rgba(10, 14, 22, 0.4); min-width: 0; }
.page-hero__facts strong { display: block; font-size: clamp(1.5rem, 1.1rem + 1.2vw, 2.125rem); letter-spacing: -0.03em; font-weight: 600; line-height: 1.1; }
.page-hero__facts span { font-size: 0.8125rem; color: rgba(255, 255, 255, 0.7); line-height: 1.35; display: block; margin-top: 4px; }

.case-index {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: clamp(32px, 4vw, 48px);
  padding-top: clamp(24px, 3vw, 32px);
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  list-style: none;
  padding-left: 0;
}
.case-index a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 40px;
  padding: 6px 16px 6px 8px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: #fff;
  text-decoration: none;
  font-size: 0.875rem;
  font-weight: 500;
  transition: background-color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.case-index a:hover { background: rgba(255, 255, 255, 0.16); border-color: rgba(255, 255, 255, 0.3); }
.case-index a span {
  display: grid;
  place-items: center;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--accent);
  font-size: 0.75rem;
  font-weight: 600;
}
@media (min-width: 1024px) {
  .page-hero__grid { grid-template-columns: 1.2fr minmax(0, 500px); gap: var(--s-8); }
}
@media (max-width: 560px) {
  .page-hero__facts > li { padding: 14px 12px; }
}

/* ---------- Expandable (shared) ---------- */
.expand {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows var(--t-slow) var(--ease), opacity var(--t-med) var(--ease);
}
.expand > .expand__inner { overflow: hidden; min-height: 0; }
.js .expand[data-collapsed] { grid-template-rows: 0fr; opacity: 0; }

.toggle {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  font-weight: 600;
  font-size: var(--fs-small);
  letter-spacing: -0.01em;
  color: inherit;
}
.toggle__icon {
  position: relative;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
  flex: none;
  transition: background-color var(--t-fast) var(--ease), transform var(--t-med) var(--ease);
}
.toggle__icon::before,
.toggle__icon::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 12px; height: 2px;
  margin: -1px 0 0 -6px;
  border-radius: 2px;
  background: currentColor;
  transition: transform var(--t-med) var(--ease);
}
.toggle__icon::after { transform: rotate(90deg); }
.toggle[aria-expanded="true"] .toggle__icon { transform: rotate(180deg); }
.toggle[aria-expanded="true"] .toggle__icon::after { transform: rotate(0deg); }
.toggle:hover .toggle__icon { background: var(--accent); color: #fff; }
.on-dark .toggle__icon { background: rgba(255, 255, 255, 0.1); color: #fff; }
.on-dark .toggle:hover .toggle__icon { background: var(--accent); }
.toggle .when-open { display: none; }
.toggle[aria-expanded="true"] .when-open { display: inline; }
.toggle[aria-expanded="true"] .when-closed { display: none; }

/* Rich text inside expandables */
.prose { display: grid; gap: 14px; color: var(--muted); font-size: var(--fs-body); }
.prose p,
.prose li { color: inherit; }
.prose strong { color: var(--text); font-weight: 600; }
.prose h4 {
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text);
  margin-top: 8px;
}
.prose ul { list-style: none; padding: 0; display: grid; gap: 8px; }
.prose ul li { position: relative; padding-left: 28px; }
.prose ul li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.3em;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--accent-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%232f80ed' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 8.5l2.5 2.5L12 5.5'/%3E%3C/svg%3E") center / 12px no-repeat;
}
.prose ol { padding-left: 1.4em; display: grid; gap: 12px; }
.prose ol ol { margin-top: 8px; gap: 6px; }
.prose ol li::marker { color: var(--accent); font-weight: 600; }
.prose i { color: var(--text); font-style: normal; font-weight: 600; }
.on-dark .prose { color: var(--on-dark-muted); }
.on-dark .prose strong,
.on-dark .prose h4,
.on-dark .prose i { color: #fff; }
.on-dark .prose ul li::before {
  background-color: rgba(47, 128, 237, 0.22);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%236aa8ff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 8.5l2.5 2.5L12 5.5'/%3E%3C/svg%3E");
}
.on-dark .prose ol li::marker { color: var(--accent-glow); }

/* ---------- Services (3 x 2 grid, one viewport on large screens) ---------- */
/* On large screens the section is sized to one viewport; the fixed nav floats over its
   top padding, so an anchor jump aligns the section top with the viewport top.
   Below 1100px it is an ordinary section using the shared rhythm. */
@media (min-width: 1100px) {
  .services-section {
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-top: calc(var(--header-h) + clamp(4px, 2svh, 32px));
    padding-bottom: clamp(24px, 4svh, 80px);
    scroll-margin-top: calc(-1 * (var(--header-h) + 8px));
  }
}
.services-section .section-head { gap: clamp(10px, 1.6svh, 18px); margin-bottom: clamp(18px, 3svh, 40px); }
.services-section .section-foot { margin-top: clamp(14px, 2.4svh, 32px); }
.services-section .section-head { max-width: none; }
.services-section .section-head .lead { max-width: none; font-size: clamp(1rem, 0.95rem + 0.2vw, 1.0625rem); text-wrap: balance; }
/* short laptop screens: tighten so the whole section stays on one screen */
@media (min-width: 1100px) and (max-height: 920px) {
  .services-section { padding-top: calc(var(--header-h) + 2px); padding-bottom: 14px; }
  .service__icon { width: 42px; height: 42px; border-radius: 12px; }
  .service__foot { margin-top: 10px; padding-top: 6px; }
  .service__foot .toggle { min-height: 32px; }
  .services-section .section-head { gap: 8px; margin-bottom: 14px; }
  .services-grid { gap: 12px; }
  .service { padding-block: 14px; }
  .services-section .section-foot { margin-top: 12px; }
}
.services-section .section-head .h2 { font-size: min(var(--fs-h2), max(2rem, 5.2svh)); }

.services-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr;
  /* Cards keep their own height: expanding one never stretches its row-mates. */
  align-items: start;
}
@media (min-width: 700px) {
  .services-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1100px) {
  .services-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.service {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(18px, 1.7vw, 22px);
  border-radius: var(--r-lg);
  background: var(--paper);
  border: 1px solid var(--line);
  transition: transform var(--t-med) var(--ease), box-shadow var(--t-med) var(--ease), border-color var(--t-med) var(--ease);
}
.service:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: transparent; }
.service.is-open { box-shadow: var(--shadow-md); border-color: transparent; }

.service__head {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 14px;
}
.service__icon {
  display: grid;
  place-items: center;
  width: 48px; height: 48px;
  border-radius: 14px;
  background: var(--ink);
  flex: none;
  transition: background-color var(--t-med) var(--ease), transform var(--t-med) var(--ease);
}
.service__icon img { width: 24px; height: 24px; filter: brightness(0) invert(1); }
.service:hover .service__icon { background: var(--accent); transform: rotate(-6deg); }
.service__num {
  align-self: start;
  font-size: var(--fs-label);
  font-weight: 600;
  color: var(--muted-2);
  font-variant-numeric: tabular-nums;
}
.service__title {
  font-size: clamp(1.125rem, 1rem + 0.4vw, 1.3125rem);
  line-height: 1.2;
  /* reserve two lines so every collapsed card is the same height */
  min-height: 2.4em;
  display: flex;
  align-items: center;
}
.service__lead {
  margin-top: 12px;
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.55;
  min-height: calc(1.55em * 3);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
}
/* Short desktop screens: two-line intros keep the whole grid in one viewport. */
@media (min-width: 1100px) and (max-height: 820px) {
  .service__lead { -webkit-line-clamp: 2; line-clamp: 2; min-height: calc(1.55em * 2); }
}
/* Open cards show the full intro. */
.service.is-open .service__lead { -webkit-line-clamp: unset; line-clamp: none; display: block; }
.service .expand__inner > .prose { padding-top: 16px; padding-bottom: 8px; font-size: 1rem; }
.service .prose .btn { justify-self: start; margin-top: 8px; }
.service__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 12px;
  padding-top: 8px;
  border-top: 1px solid var(--line);
}
.service__foot .toggle { min-height: 36px; }
.service__foot .toggle__icon { width: 32px; height: 32px; }

/* Fractional CIO/CTO: same size as its peers, slightly more emphasis. */
.service--highlight {
  background:
    radial-gradient(70% 90px at 50% 0%, rgba(47, 128, 237, 0.1), rgba(47, 128, 237, 0) 100%),
    linear-gradient(180deg, #f3f8ff 0%, #ffffff 60%);
  border-color: rgba(47, 128, 237, 0.35);
  box-shadow: 0 16px 40px -24px rgba(47, 128, 237, 0.55);
}
/* accent edge: sits on the card's own border and follows its rounded corners */
.service--highlight::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  border-top: 2px solid transparent;
  background: linear-gradient(90deg, rgba(47, 128, 237, 0) 2%, var(--accent) 24%, var(--accent-glow) 50%, var(--accent) 76%, rgba(47, 128, 237, 0) 98%) border-box;
  -webkit-mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0) border-box;
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0) border-box;
  mask-composite: exclude;
  pointer-events: none;
}
.service--highlight .service__icon { background: var(--accent); }
.service--highlight .service__num { color: var(--accent); }
.service--highlight:hover { border-color: rgba(47, 128, 237, 0.5); box-shadow: 0 22px 50px -24px rgba(47, 128, 237, 0.6); }
.service__badge {
  display: inline-flex;
  align-items: center;
  padding: 5px 10px;
  border-radius: var(--r-pill);
  background: var(--accent-soft);
  color: var(--accent-strong);
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
}

/* ---------- Results preview (home) ---------- */
.results {
  overflow: hidden;
}
.results::before {
  content: "";
  position: absolute;
  top: -200px; right: -200px;
  width: 700px; height: 700px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(47, 128, 237, 0.28) 0%, rgba(47, 128, 237, 0) 65%);
  pointer-events: none;
}
.results-grid {
  display: grid;
  gap: 16px;
}
@media (min-width: 1024px) {
  .results-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 20px; }
}
.results-media {
  position: relative;
  min-height: 420px;
  border-radius: var(--r-lg);
  overflow: hidden;
  isolation: isolate;
}
.results-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
  transition: transform 1.2s var(--ease);
}
.results-media:hover img { transform: scale(1.04); }
.results-media::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(0deg, rgba(8, 12, 20, 0.9) 0%, rgba(8, 12, 20, 0.2) 55%, rgba(8, 12, 20, 0.05) 100%);
}
.results-media__card {
  position: absolute;
  left: 20px; right: 20px; bottom: 20px;
  padding: 22px 24px;
  border-radius: var(--r-md);
  background: rgba(10, 14, 22, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  display: flex;
  gap: 20px;
  align-items: center;
}
.results-media__card strong {
  font-size: clamp(2.75rem, 2rem + 2.4vw, 4rem);
  font-weight: 600;
  letter-spacing: -0.05em;
  line-height: 1;
  color: #fff;
}
.results-media__card p { color: var(--on-dark-muted); font-size: var(--fs-small); line-height: 1.45; }
.results-media__card p b { color: #fff; font-weight: 600; }

.case-links { display: grid; gap: 12px; list-style: none; padding: 0; margin: 0; }
.case-link {
  display: grid;
  grid-template-columns: 120px 1fr auto;
  gap: 24px;
  align-items: center;
  padding: clamp(20px, 2.4vw, 28px);
  border-radius: var(--r-lg);
  background: var(--ink-2);
  border: 1px solid var(--line-dark);
  text-decoration: none;
  color: #fff;
  transition: background-color var(--t-med) var(--ease), border-color var(--t-med) var(--ease), transform var(--t-med) var(--ease);
}
.case-link:hover { background: var(--ink-3); border-color: rgba(106, 168, 255, 0.4); transform: translateX(4px); }
.case-link__metric {
  min-width: 0;
  padding-right: 20px;
  border-right: 1px solid var(--line-dark);
  font-size: clamp(1.75rem, 1.3rem + 1.4vw, 2.5rem);
  font-weight: 600;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--accent-glow);
}
.case-link__metric small { display: block; font-size: 0.75rem; letter-spacing: 0; font-weight: 500; line-height: 1.35; color: var(--on-dark-muted); margin-top: 8px; }
.case-link__title { font-size: var(--fs-h3); font-weight: 600; letter-spacing: -0.02em; line-height: 1.2; }
.case-link__goal { color: var(--on-dark-muted); font-size: var(--fs-small); margin-top: 6px; line-height: 1.5; }
.case-link__arrow {
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 1px solid var(--line-dark);
  transition: background-color var(--t-med) var(--ease), border-color var(--t-med) var(--ease), transform var(--t-med) var(--ease);
}
.case-link__arrow svg { width: 16px; height: 16px; }
.case-link:hover .case-link__arrow { background: var(--accent); border-color: var(--accent); transform: rotate(-45deg); }
@media (max-width: 560px) {
  .case-link { grid-template-columns: 1fr auto; gap: 14px; }
  .case-link__metric { grid-column: 1 / -1; padding-right: 0; border-right: 0; }
  .results-media { min-height: 360px; }
  .results-media__card { flex-direction: column; align-items: flex-start; gap: 10px; left: 12px; right: 12px; bottom: 12px; }
}

/* ---------- Marquee ---------- */
.marquee {
  margin-top: clamp(64px, 8vw, 120px);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.marquee__track {
  display: flex;
  width: max-content;
  animation: marquee 48s linear infinite;
}
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__group {
  display: flex;
  align-items: center;
  gap: clamp(24px, 3vw, 48px);
  padding-right: clamp(24px, 3vw, 48px);
  list-style: none;
  margin: 0;
  padding-left: 0;
}
.marquee__group li {
  display: flex;
  align-items: center;
  gap: clamp(24px, 3vw, 48px);
  font-size: clamp(2.25rem, 1.4rem + 3.6vw, 5rem);
  font-weight: 600;
  letter-spacing: -0.045em;
  line-height: 1.1;
  white-space: nowrap;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255, 255, 255, 0.35);
}
.marquee__group li:nth-child(odd) { color: #fff; -webkit-text-stroke: 0; }
.marquee__group li::after {
  content: "";
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--accent);
  flex: none;
}
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------- About (infographic) ---------- */


.about-layout {
  display: grid;
  gap: 16px;
}
.about-layout > *,
.about-board > * { min-width: 0; }
@media (min-width: 1024px) {
  .about-layout {
    grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.5fr);
    gap: 20px;
    align-items: stretch;
  }
}

/* Portrait: gradient hairline border, soft blue glow, floating tag. */
.about-portrait {
  position: relative;
  margin: 0;
  isolation: isolate;
}
.about-portrait::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 12% -4% -4% 10%;
  border-radius: var(--r-xl);
  background: radial-gradient(60% 60% at 60% 60%, rgba(47, 128, 237, 0.55), rgba(106, 168, 255, 0.2) 55%, transparent 80%);
  filter: blur(36px);
  opacity: 0.7;
  pointer-events: none;
}
.about-portrait__media {
  position: relative;
  height: 100%;
  min-height: 420px;
  padding: 2px;
  border-radius: var(--r-xl);
  background: linear-gradient(155deg, #9cc6ff 0%, var(--accent) 28%, rgba(47, 128, 237, 0.12) 55%, rgba(10, 14, 22, 0.2) 75%, var(--accent-glow) 100%);
  box-shadow: 0 30px 60px -30px rgba(27, 106, 214, 0.55);
}
.about-portrait__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 12%;
  border-radius: calc(var(--r-xl) - 2px);
  background: #151515;
}
.about-portrait__media::after {
  content: "";
  position: absolute;
  inset: 2px;
  border-radius: calc(var(--r-xl) - 2px);
  background:
    linear-gradient(0deg, rgba(8, 12, 20, 0.88) 0%, rgba(8, 12, 20, 0) 42%),
    linear-gradient(200deg, rgba(47, 128, 237, 0.22) 0%, rgba(47, 128, 237, 0) 35%);
  pointer-events: none;
}
.about-portrait__tag {
  position: absolute;
  z-index: 1;
  top: 18px;
  left: 18px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px 8px 10px;
  border-radius: var(--r-pill);
  background: linear-gradient(120deg, var(--accent-strong), var(--accent) 55%, var(--accent-glow));
  color: #fff;
  font-size: 0.8125rem;
  font-weight: 600;
  box-shadow: 0 10px 24px -10px rgba(27, 106, 214, 0.8), inset 0 0 0 1px rgba(255, 255, 255, 0.2);
}
.about-portrait__tag svg { width: 16px; height: 16px; }
.about-portrait__caption {
  position: absolute;
  z-index: 1;
  left: clamp(18px, 2vw, 26px);
  right: clamp(18px, 2vw, 26px);
  bottom: clamp(18px, 2vw, 26px);
  color: #fff;
}
.about-portrait__caption blockquote {
  margin: 0 0 14px;
  font-size: clamp(1.25rem, 1rem + 0.8vw, 1.625rem);
  font-weight: 500;
  letter-spacing: -0.025em;
  line-height: 1.2;
}
.about-portrait__caption .who {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  font-size: 0.875rem;
}
.about-portrait__caption .who b { font-weight: 600; }

/* Board of metrics */
.about-board {
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr;
}
@media (min-width: 720px) {
  .about-board { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .metric--feature { grid-column: 1 / -1; }
}

.metric {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: clamp(20px, 2.2vw, 30px);
  border-radius: var(--r-lg);
  background: var(--mist);
  border: 1px solid var(--line);
}
.metric__head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 14px; }
/* padding/margin pair keeps the last glyph inside the clipped gradient box */
.metric__num,
.cta-band__title span,
.footer-wordmark { padding-right: 0.08em; margin-right: -0.08em; }
.metric__num {
  font-size: clamp(3rem, 2.2rem + 2.6vw, 4.5rem);
  font-weight: 600;
  letter-spacing: -0.055em;
  line-height: 0.95;
  font-variant-numeric: tabular-nums;
  background: linear-gradient(180deg, var(--ink) 35%, #3c4a61 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.metric__label {
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
}
.metric__text { color: var(--muted); font-size: 0.9375rem; line-height: 1.6; }

/* Featured growth card */
.metric--feature {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(80% 120% at 100% 0%, rgba(47, 128, 237, 0.42) 0%, rgba(47, 128, 237, 0) 60%),
    radial-gradient(60% 80% at 0% 100%, rgba(106, 168, 255, 0.12) 0%, rgba(106, 168, 255, 0) 60%),
    var(--ink);
  border-color: transparent;
  color: #fff;
}
.metric--feature .metric__num {
  background: linear-gradient(180deg, #ffffff 30%, #9cc6ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  font-size: clamp(3.5rem, 2.4rem + 3.4vw, 5.5rem);
}
.metric--feature .metric__label { color: var(--accent-glow); }
.metric--feature .metric__text { color: var(--on-dark-muted); max-width: 72ch; }
.metric--feature .link-arrow { color: var(--accent-glow); align-self: flex-start; }
.metric__top { display: grid; gap: 20px; }
@media (min-width: 900px) {
  .metric__top { grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: clamp(24px, 3vw, 48px); }
  .metric--feature .metric__head { flex-direction: column; align-items: flex-start; }
}
.metric__subs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--line-dark);
  overflow: hidden;
}
.metric__subs li { padding: 16px 18px; min-width: 0; }
.metric__subs li + li { border-left: 1px solid var(--line-dark); }
.metric__subs strong {
  display: block;
  font-size: clamp(1.375rem, 1.1rem + 0.9vw, 1.875rem);
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1.1;
}
.metric__subs span { display: block; margin-top: 4px; font-size: 0.8125rem; color: var(--on-dark-muted); line-height: 1.35; }

/* Approach pillars */
.metric__group { margin-top: auto; display: grid; gap: 10px; min-width: 0; }
.metric__group-label { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted-2); }
.metric .pillars { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
@media (max-width: 340px) { .metric .pillars { grid-template-columns: 1fr; } }
.pillars li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: var(--r-sm);
  background: var(--paper);
  border: 1px solid var(--line);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.25;
  color: var(--text);
}
.pillars svg {
  width: 30px; height: 30px;
  padding: 6px;
  flex: none;
  border-radius: 9px;
  background: var(--accent-soft);
  color: var(--accent);
}

/* Awards timeline: dots on a connecting rail */
.metric .timeline {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0 0 0 26px;
  display: grid;
  gap: 12px;
}
.timeline::before {
  content: "";
  position: absolute;
  left: 7px;
  top: 8px;
  bottom: 8px;
  width: 2px;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--accent), rgba(47, 128, 237, 0.15));
}
.timeline li { position: relative; display: grid; gap: 2px; }
.timeline li::before {
  content: "";
  position: absolute;
  left: -26px;
  top: 3px;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--paper);
  border: 2px solid var(--accent);
  box-shadow: 0 0 0 4px var(--mist);
}
.timeline__year {
  width: fit-content;
  padding: 2px 8px;
  border-radius: var(--r-pill);
  background: var(--accent-soft);
  color: var(--accent-strong);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.timeline__text { font-size: 0.9375rem; font-weight: 600; line-height: 1.35; color: var(--text); }

@media (max-width: 1023px) {
  .about-portrait__media { height: auto; min-height: 0; aspect-ratio: 4 / 3; }
  .about-portrait__media img { object-position: 50% 18%; }
}
@media (max-width: 560px) {
  .about-portrait__media { aspect-ratio: 4 / 5; }
  .metric__subs li { padding: 12px 10px; }
  .pillars li { padding: 8px 10px; gap: 8px; font-size: 0.8125rem; }
  .pillars svg { width: 26px; height: 26px; padding: 5px; }
}

/* ---------- Testimonials (looping carousel, one viewport) ---------- */
.testimonials-section {
  position: relative;
  padding-block: var(--section);
  background: var(--ink);
  color: #fff;
  overflow: hidden;
  isolation: isolate;
}
.testimonials-section::before,
.testimonials-section::after {
  content: "";
  position: absolute;
  z-index: -1;
  border-radius: 50%;
  pointer-events: none;
}
.testimonials-section::before {
  width: 900px; height: 900px;
  left: -300px; top: -420px;
  background: radial-gradient(circle, rgba(47, 128, 237, 0.26) 0%, rgba(47, 128, 237, 0) 65%);
}
.testimonials-section::after {
  width: 700px; height: 700px;
  right: -260px; bottom: -380px;
  background: radial-gradient(circle, rgba(106, 168, 255, 0.14) 0%, rgba(106, 168, 255, 0) 65%);
}

.testimonials-head {
  display: grid;
  justify-items: center;
  gap: clamp(12px, 1.6svh, 20px);
  text-align: center;
  margin-bottom: clamp(16px, 3.4svh, 48px);
}
.testimonials-head .h2 { text-wrap: balance; font-size: min(var(--fs-h2), max(1.875rem, 5.2svh)); }


/* Controls */
.carousel__controls { display: flex; justify-content: center; align-items: center; gap: 10px; margin-top: clamp(10px, 2svh, 28px); }
.carousel__btn {
  display: grid;
  place-items: center;
  width: 52px; height: 52px;
  border-radius: 50%;
  border: 1px solid var(--line-dark);
  background: rgba(255, 255, 255, 0.04);
  color: #fff;
  cursor: pointer;
  transition: background-color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.carousel__btn svg { width: 18px; height: 18px; }
.carousel__btn:hover { background: var(--accent); border-color: var(--accent); }
.carousel__btn:active { transform: scale(0.94); }
/* Track */
.carousel { position: relative; }
.carousel__viewport {
  overflow: hidden;
  padding-block: 8px 12px;
  touch-action: pan-y;
  cursor: grab;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 clamp(24px, 6vw, 120px), #000 calc(100% - clamp(24px, 6vw, 120px)), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 clamp(24px, 6vw, 120px), #000 calc(100% - clamp(24px, 6vw, 120px)), transparent 100%);
}
.carousel__viewport.is-dragging { cursor: grabbing; }
.carousel__viewport.is-dragging .tcard { pointer-events: none; }
.carousel__track {
  --gap: clamp(14px, 1.6vw, 22px);
  display: flex;
  align-items: flex-start;   /* cards keep their own height: only the opened one grows */
  gap: var(--gap);
  margin: 0;
  padding: 0 0 0 var(--gutter);
  list-style: none;
  will-change: transform;
}

/* Card */
.tcard {
  flex: none;
  width: clamp(290px, 30vw, 440px);
  border-radius: var(--r-lg);
  padding: 1px;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.04) 45%, rgba(47, 128, 237, 0.35));
  transition: transform var(--t-med) var(--ease), background var(--t-med) var(--ease), box-shadow var(--t-med) var(--ease);
  user-select: none;
}
.tcard:hover { transform: translateY(-4px); background: linear-gradient(160deg, rgba(106, 168, 255, 0.7), rgba(255, 255, 255, 0.06) 45%, rgba(47, 128, 237, 0.7)); box-shadow: 0 30px 60px -30px rgba(47, 128, 237, 0.6); }
.tcard.is-open { background: linear-gradient(160deg, var(--accent-glow), rgba(255, 255, 255, 0.06) 45%, var(--accent)); }
.tcard__inner {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: clamp(22px, 2.2vw, 30px);
  border-radius: calc(var(--r-lg) - 1px);
  background:
    radial-gradient(120% 80% at 100% 0%, rgba(47, 128, 237, 0.18) 0%, rgba(47, 128, 237, 0) 55%),
    #0f1522;
}
.tcard__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.tcard__mark { width: 34px; height: 34px; color: var(--accent-glow); }
.tcard__tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.tcard__tags li {
  padding: 4px 10px;
  border-radius: var(--r-pill);
  background: rgba(106, 168, 255, 0.1);
  border: 1px solid rgba(106, 168, 255, 0.22);
  font-size: 0.75rem;
  font-weight: 500;
  color: rgba(214, 228, 255, 0.9);
  white-space: nowrap;
}
.tcard__pull {
  font-size: clamp(1.25rem, 1.05rem + 0.6vw, 1.625rem);
  font-weight: 500;
  letter-spacing: -0.025em;
  line-height: 1.28;
  color: #fff;
  min-height: calc(1.28em * 4);   /* equal collapsed heights */
  text-wrap: pretty;
}
/* Full testimonial scrolls inside the card so the section stays within one viewport. */
.tcard__full {
  margin: 0;
  display: grid;
  gap: 12px;
  /* viewport-derived so an open card never pushes the section past one screen */
  max-height: clamp(150px, calc(100svh - 604px), 420px);
  overflow-y: auto;
  padding-right: 8px;
  color: var(--on-dark-muted);
  font-size: 0.9375rem;
  line-height: 1.6;
  user-select: text;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(106, 168, 255, 0.5) transparent;
}
.tcard__full::-webkit-scrollbar { width: 6px; }
.tcard__full::-webkit-scrollbar-thumb { background: rgba(106, 168, 255, 0.45); border-radius: 6px; }
/* The full text already contains the pull quote, so it steps aside when open. */
.tcard.is-open .tcard__pull { display: none; }
.tcard__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 14px;
  padding-top: 18px;
  border-top: 1px solid var(--line-dark);
}
.tcard__foot img {
  width: 48px; height: 48px;
  border-radius: 50%;
  object-fit: cover;
  flex: none;
  box-shadow: 0 0 0 2px #0f1522, 0 0 0 3px rgba(106, 168, 255, 0.5);
}
.tcard__who { flex: 1 1 140px; min-width: 0; }
.tcard__who b { display: block; font-weight: 600; letter-spacing: -0.01em; }
.tcard__who span { display: block; font-size: 0.875rem; color: var(--on-dark-muted); line-height: 1.35; }
.tcard .toggle { color: #fff; }
.tcard .toggle__icon { background: rgba(255, 255, 255, 0.1); color: #fff; }
.tcard .toggle:hover .toggle__icon { background: var(--accent); }

@media (min-width: 1100px) {
  .testimonials-section {
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-top: calc(var(--header-h) + clamp(4px, 2.4svh, 32px));
    padding-bottom: clamp(16px, 3svh, 56px);
    scroll-margin-top: calc(-1 * (var(--header-h) + 8px));
  }
}
@media (min-width: 1100px) and (max-height: 740px) {
  .testimonials-section { padding-top: calc(var(--header-h) + 4px); padding-bottom: 24px; }
}
@media (max-width: 560px) {
  .testimonials-head { gap: 10px; margin-bottom: 14px; }
  .carousel__btn { width: 46px; height: 46px; }
  .tcard { width: min(82vw, 340px); }
  .tcard__pull { min-height: 0; }
}

/* ---------- Contact (light, shared by both pages) ---------- */
.contact-section {
  position: relative;
  padding-block: var(--section);
  background: var(--mist);
  overflow: hidden;
  isolation: isolate;
}
/* Soft blue glows sit behind the form card only. */
.contact-section::before,
.contact-section::after {
  content: "";
  position: absolute;
  z-index: -1;
  border-radius: 50%;
  pointer-events: none;
}
.contact-section::before {
  width: 720px; height: 720px;
  right: -180px; top: -220px;
  background: radial-gradient(circle, rgba(47, 128, 237, 0.16) 0%, rgba(47, 128, 237, 0) 65%);
}
.contact-section::after {
  width: 560px; height: 560px;
  right: 22%; bottom: -320px;
  background: radial-gradient(circle, rgba(106, 168, 255, 0.14) 0%, rgba(106, 168, 255, 0) 65%);
}

.contact-layout {
  display: grid;
  gap: clamp(32px, 5vw, 80px);
  align-items: center;
}
@media (min-width: 1024px) {
  .contact-layout { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); }
}

/* Intro column: same heading system as every other section */
.contact-intro .h2 { text-wrap: balance; }

.contact-intro__text {
  margin-top: 18px;
  max-width: 44ch;
  font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
  line-height: 1.6;
  color: var(--muted);
}
.contact-intro__text strong { display: block; margin-bottom: 6px; color: var(--accent-strong); font-weight: 600; font-size: 1.0625rem; }

/* What happens next: a numbered rail */
.contact-intro .contact-steps {
  position: relative;
  list-style: none;
  margin: clamp(24px, 3vw, 36px) 0 0;
  padding: 0;
  display: grid;
  gap: 18px;
  max-width: 440px;
}
.contact-steps::before {
  content: "";
  position: absolute;
  left: 15px;
  top: 16px;
  bottom: 16px;
  width: 2px;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--accent), rgba(47, 128, 237, 0.15));
}
.contact-steps li { position: relative; display: grid; grid-template-columns: 32px 1fr; gap: 14px; align-items: start; }
.contact-steps li > span {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--paper);
  border: 2px solid var(--accent);
  color: var(--accent-strong);
  font-size: 0.8125rem;
  font-weight: 700;
  box-shadow: 0 0 0 4px var(--mist);
}
.contact-steps b { display: block; font-size: 1rem; font-weight: 600; color: var(--text); line-height: 1.35; padding-top: 5px; }
.contact-steps small { display: block; margin-top: 2px; font-size: 0.875rem; color: var(--muted); line-height: 1.45; }

/* Secondary option: LinkedIn, set apart with an "or" divider */
.contact-or {
  display: flex;
  align-items: center;
  gap: 14px;
  max-width: 440px;
  margin-top: clamp(24px, 3vw, 32px);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted-2);
}
.contact-or::before,
.contact-or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.contact-alt {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 16px;
  max-width: 440px;
  margin-top: 16px;
}
.contact-alt > span { font-size: var(--fs-small); color: var(--muted); }
.btn-linkedin {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 46px;
  padding: 6px 16px 6px 6px;
  border-radius: var(--r-pill);
  background: #0a66c2;
  color: #fff;
  font-size: 0.9375rem;
  font-weight: 600;
  text-decoration: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 10px 24px -12px rgba(10, 102, 194, 0.8);
  transition: background-color var(--t-fast) var(--ease), transform var(--t-med) var(--ease), box-shadow var(--t-med) var(--ease);
}
.btn-linkedin__icon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #fff;
  color: #0a66c2;
}
.btn-linkedin__icon svg { width: 16px; height: 16px; }
.btn-linkedin > svg { width: 14px; height: 14px; transition: transform var(--t-med) var(--ease); }
.btn-linkedin:hover,
.btn-linkedin:focus-visible {
  background: #0958a8;
  transform: translateY(-2px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 16px 30px -12px rgba(10, 102, 194, 0.9);
}
.btn-linkedin:hover > svg { transform: translate(2px, -2px); }

/* Form card: white surface, gradient hairline border, soft blue lift */
.form-shell {
  position: relative;
  padding: 1px;
  border-radius: var(--r-xl);
  background: linear-gradient(145deg, rgba(106, 168, 255, 0.9), rgba(47, 128, 237, 0.15) 35%, rgba(10, 14, 22, 0.06) 65%, rgba(47, 128, 237, 0.55));
  box-shadow: 0 40px 80px -40px rgba(27, 106, 214, 0.45), 0 2px 6px rgba(10, 14, 22, 0.04);
}
.form-card {
  position: relative;
  padding: clamp(22px, 3vw, 40px);
  border-radius: calc(var(--r-xl) - 1px);
  background:
    radial-gradient(70% 110px at 50% 0%, rgba(47, 128, 237, 0.07), rgba(47, 128, 237, 0) 100%),
    var(--paper);
  color: var(--text);
  overflow: hidden;
}
/* accent edge: follows the card's rounded top and fades into the hairline border */
.form-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border-top: 3px solid transparent;
  background: linear-gradient(90deg, rgba(47, 128, 237, 0) 2%, var(--accent) 24%, var(--accent-glow) 50%, var(--accent) 76%, rgba(47, 128, 237, 0) 98%) border-box;
  -webkit-mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0) border-box;
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0) border-box;
  mask-composite: exclude;
  pointer-events: none;
}
.form-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin-bottom: clamp(18px, 2vw, 24px);
}
.form-card__title {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: -0.02em;
}
.form-card__title svg {
  width: 40px; height: 40px;
  padding: 10px;
  border-radius: 12px;
  background: var(--accent-soft);
  color: var(--accent);
}

.form-grid { display: grid; gap: 12px; }
@media (min-width: 640px) {
  .form-grid { grid-template-columns: 1fr 1fr; }
  .field--full { grid-column: 1 / -1; }
}
.field { position: relative; }
.field input,
.field textarea {
  width: 100%;
  min-height: 56px;
  padding: 24px 16px 8px;
  border: 1px solid var(--mist-2);
  border-radius: var(--r-sm);
  background: var(--mist);
  font: inherit;
  font-size: 1rem;
  color: var(--text);
  transition: border-color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
  -webkit-appearance: none;
  appearance: none;
}
.field textarea { min-height: 116px; resize: vertical; line-height: 1.5; }
.field input:hover,
.field textarea:hover { border-color: #cfd4dd; background: #f7f8fa; }
.field input:focus,
.field textarea:focus {
  outline: none;
  background: #fff;
  border-color: var(--accent);
  box-shadow: 0 0 0 4px rgba(47, 128, 237, 0.14);
}
.field label {
  position: absolute;
  left: 17px;
  top: 17px;
  max-width: calc(100% - 34px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 1rem;
  color: var(--muted);
  pointer-events: none;
  transform-origin: left top;
  transition: transform var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.field label .req { color: var(--accent); }
.field input:focus + label,
.field input:not(:placeholder-shown) + label,
.field textarea:focus + label,
.field textarea:not(:placeholder-shown) + label {
  transform: translateY(-10px) scale(0.78);
  color: var(--accent);
}
.field .invalid-feedback {
  display: none;
  margin-top: 6px;
  padding-left: 4px;
  font-size: 0.8125rem;
  color: var(--danger);
}
.was-validated .field input:invalid,
.was-validated .field textarea:invalid { border-color: var(--danger); background: #fff7f7; }
.was-validated .field input:invalid ~ .invalid-feedback,
.was-validated .field textarea:invalid ~ .invalid-feedback { display: block; }
.was-validated .field input:invalid + label,
.was-validated .field textarea:invalid + label { color: var(--danger); }

.form-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 18px;
}
.form-note { font-size: 0.875rem; color: var(--muted); }
.form-note span { color: var(--accent); }
#submit-btn {
  background: linear-gradient(110deg, var(--accent-strong) 0%, var(--accent) 55%, #4d95f5 100%);
  box-shadow: 0 14px 30px -14px rgba(27, 106, 214, 0.8);
}
#submit-btn:hover { filter: brightness(1.06); box-shadow: 0 18px 36px -14px rgba(27, 106, 214, 0.9); }
#submit-btn.disabled { opacity: 0.7; pointer-events: none; }
.loader {
  width: 16px; height: 16px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.4);
  border-top-color: #fff;
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.contact-success,
.contact-error {
  margin-bottom: 16px;
  padding: 14px 18px;
  border-radius: var(--r-sm);
  font-weight: 500;
  font-size: var(--fs-small);
}
.contact-success { background: #e8f7ef; color: #11683f; }
.contact-error { background: #fdecec; color: #a12424; }



/* ---------- Footer ---------- */
.site-footer {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-top: clamp(48px, 5vw, 72px);
  background:
    radial-gradient(60% 50% at 0% 0%, rgba(47, 128, 237, 0.14) 0%, rgba(47, 128, 237, 0) 70%),
    var(--ink);
  color: var(--on-dark-muted);
}
/* blue gradient hairline across the top edge */
.site-footer::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, rgba(47, 128, 237, 0) 0%, rgba(106, 168, 255, 0.7) 30%, rgba(47, 128, 237, 0.9) 50%, rgba(106, 168, 255, 0.7) 70%, rgba(47, 128, 237, 0) 100%);
}

/* Decorative layer: light rising behind the wordmark */
.footer-fx { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.footer-fx__glow {
  position: absolute;
  left: 50%;
  bottom: -32%;
  width: min(1400px, 140%);
  height: 70%;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(47, 128, 237, 0.42) 0%, rgba(47, 128, 237, 0.16) 45%, rgba(47, 128, 237, 0) 100%);
  filter: blur(10px);
  animation: footer-breathe 9s var(--ease-in-out) infinite alternate;
}
@keyframes footer-breathe {
  from { opacity: 0.75; transform: translateX(-50%) scale(0.96); }
  to { opacity: 1; transform: translateX(-50%) scale(1.04); }
}
/* Top row */
.footer-top {
  display: grid;
  gap: 32px 48px;
  padding-bottom: clamp(28px, 3vw, 40px);
}
@media (min-width: 600px) {
  .footer-top { grid-template-columns: minmax(0, 1fr) auto auto; column-gap: clamp(32px, 6vw, 96px); align-items: start; }
}
.footer-brand img { height: 44px; width: auto; filter: drop-shadow(0 0 10px rgba(160, 200, 255, 0.3)); }
.footer-brand p {
  margin-top: var(--s-5);
  max-width: 36ch;
  font-size: 1rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.62);
}

/* Column headers use the site's dot-label language */
.footer-col h2 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.9);
}
.footer-col h2::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 4px rgba(47, 128, 237, 0.2), 0 0 12px rgba(106, 168, 255, 0.7);
}
.footer-col ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 2px 28px; }
/* Explore links sit in a compact 2 × 2 grid */
nav.footer-col ul { grid-template-columns: repeat(2, max-content); }
/* tablet: brand | links | connect in one row — links stack to make room */
@media (min-width: 600px) and (max-width: 1099px) {
  nav.footer-col ul { grid-template-columns: max-content; }
}
/* phone: brand on its own row, then links and connect spread across the full width */
@media (max-width: 599px) {
  .footer-brand p { max-width: none; }
  nav.footer-col ul { grid-template-columns: 1fr 1fr; }
  .footer-col--connect ul { display: flex; flex-wrap: wrap; }
}

/* Explore links: larger, gradient underline draws in, arrow slides in */
.footer-col a {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 40px;
  width: fit-content;
  color: rgba(255, 255, 255, 0.72);
  font-size: 1.0625rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  text-decoration: none;
  transition: color var(--t-fast) var(--ease), transform var(--t-med) var(--ease);
}
.footer-col a:not(.footer-chip):not(.footer-cta) {
  background: linear-gradient(90deg, var(--accent), var(--accent-glow)) left calc(100% - 6px) / 0 1px no-repeat;
  transition: color var(--t-fast) var(--ease), background-size var(--t-med) var(--ease), padding var(--t-med) var(--ease);
}
.footer-col a:not(.footer-chip):not(.footer-cta)::after {
  content: "";
  width: 14px;
  height: 14px;
  opacity: 0;
  transform: translateX(-6px);
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8h10M9 4l4 4-4 4'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8h10M9 4l4 4-4 4'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: opacity var(--t-fast) var(--ease), transform var(--t-med) var(--ease);
}
.footer-col a:not(.footer-chip):not(.footer-cta):hover,
.footer-col a:not(.footer-chip):not(.footer-cta):focus-visible {
  color: #fff;
  background-size: calc(100% - 24px) 1px;
}
.footer-col a:not(.footer-chip):not(.footer-cta):hover::after,
.footer-col a:not(.footer-chip):not(.footer-cta):focus-visible::after {
  opacity: 1;
  transform: none;
  color: var(--accent-glow);
}
.footer-col a[aria-current="page"] { color: #fff; }
.footer-col a[aria-current="page"]:not(:hover) { background-size: calc(100% - 24px) 1px; }

/* Connect: glass chip + gradient pill */
.footer-col--connect ul { gap: 12px; }
.footer-col .footer-chip,
.footer-col .footer-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 6px 16px 6px 8px;
  border-radius: var(--r-pill);
  font-size: 1rem;
  font-weight: 600;
}
.footer-col .footer-chip {
  color: #fff;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.02) 100%),
    rgba(8, 12, 20, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 10px 26px -14px rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(12px) saturate(150%);
  -webkit-backdrop-filter: blur(12px) saturate(150%);
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-med) var(--ease), transform var(--t-med) var(--ease);
}
.footer-chip__icon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent-strong), var(--accent-glow));
  color: #fff;
}
.footer-chip__icon svg { width: 16px; height: 16px; }
.footer-chip > svg { width: 14px; height: 14px; color: var(--accent-glow); transition: transform var(--t-med) var(--ease); }
.footer-chip:hover,
.footer-chip:focus-visible {
  border-color: rgba(106, 168, 255, 0.45);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 0 0 4px rgba(47, 128, 237, 0.12), 0 14px 30px -14px rgba(47, 128, 237, 0.6);
  transform: translateY(-2px);
}
.footer-chip:hover > svg { transform: translate(2px, -2px); }

.footer-col .footer-cta {
  padding: 6px 8px 6px 20px;
  color: #fff;
  background: linear-gradient(110deg, var(--accent-strong) 0%, var(--accent) 55%, #5a9df7 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 14px 30px -14px rgba(47, 128, 237, 0.85);
  transition: box-shadow var(--t-med) var(--ease), transform var(--t-med) var(--ease);
}
.footer-cta__icon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
}
.footer-cta__icon svg { width: 15px; height: 15px; transition: transform var(--t-med) var(--ease); }
.footer-cta:hover,
.footer-cta:focus-visible {
  transform: translateY(-2px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 20px 40px -14px rgba(47, 128, 237, 1);
}
.footer-cta:hover .footer-cta__icon svg { transform: translateX(3px); }

/* Bottom bar */
.footer-bottom {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
  padding-block: 22px;
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.55);
}
.footer-bottom::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.12), rgba(106, 168, 255, 0.35) 50%, rgba(255, 255, 255, 0.12));
}
.footer-backtop {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: rgba(255, 255, 255, 0.72);
  font-weight: 500;
  text-decoration: none;
  transition: color var(--t-fast) var(--ease);
}
.footer-backtop__icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.02) 100%),
    rgba(8, 12, 20, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-med) var(--ease), transform var(--t-med) var(--ease);
}
.footer-backtop__icon svg { width: 16px; height: 16px; }
.footer-backtop:hover,
.footer-backtop:focus-visible { color: #fff; }
.footer-backtop:hover .footer-backtop__icon,
.footer-backtop:focus-visible .footer-backtop__icon {
  transform: translateY(-3px);
  border-color: rgba(106, 168, 255, 0.5);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 0 18px rgba(47, 128, 237, 0.55);
}

/* Wordmark: same fading-letter effect, now lit from below by the blue glow */
.footer-wordmark {
  position: relative;
  font-size: clamp(2.5rem, 10.4vw, 11rem);
  font-weight: 600;
  letter-spacing: -0.06em;
  line-height: 0.8;
  white-space: nowrap;
  text-align: center;
  color: transparent;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.2) 0%, rgba(190, 215, 255, 0.1) 45%, rgba(106, 168, 255, 0.02) 90%);
  -webkit-background-clip: text;
  background-clip: text;
  user-select: none;
  margin-top: clamp(4px, 1vw, 12px);
  margin-bottom: -0.08em;
}

@media (max-width: 560px) {
  .footer-bottom { flex-direction: column-reverse; align-items: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
  .footer-fx__glow { animation: none; }
}

/* ---------- Client results: case archive ---------- */
/* Six equal cards, each telling the same four-step story:
   What we did → What changed → By how much → Why it matters. */
.cases-grid {
  display: grid;
  gap: 20px;
  grid-template-columns: 1fr;
  align-items: start;           /* opening one case never stretches its neighbour */
}
@media (min-width: 1200px) {
  .cases-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.case {
  container-type: inline-size;
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: clamp(22px, 3vw, 40px);
  border-radius: var(--r-lg);
  background: var(--paper);
  border: 1px solid var(--line);
  scroll-margin-top: calc(var(--header-h) + 16px);
  transition: box-shadow var(--t-med) var(--ease), border-color var(--t-med) var(--ease);
}
.case:hover,
.case.is-open { box-shadow: var(--shadow-md); border-color: transparent; }

/* Header */
.case__meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.case__num {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.case__num b {
  display: grid;
  place-items: center;
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--ink);
  color: #fff;
  letter-spacing: 0;
  font-size: 0.8125rem;
}
.case__industry {
  padding: 5px 12px;
  border-radius: var(--r-pill);
  background: var(--mist);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--muted);
  white-space: nowrap;
}
.case__title {
  font-size: clamp(1.5rem, 1.2rem + 1vw, 2.125rem);
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1.1;
}
.case__goal {
  margin-top: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  align-items: baseline;
  font-size: var(--fs-small);
  line-height: 1.5;
}
.case__goal strong { font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.case__goal span { color: var(--accent); font-weight: 600; }

/* Story rail */
.case .story {
  position: relative;
  list-style: none;
  margin: 26px 0 0;
  padding: 0 0 0 38px;
  display: grid;
  gap: 22px;
}
.story::before {
  content: "";
  position: absolute;
  left: 11px;
  top: 12px;
  bottom: 12px;
  width: 2px;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--mist-2), var(--accent) 55%, var(--accent-glow));
}
.story__step { position: relative; min-width: 0; }
.story__label {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.story__label span {
  position: absolute;
  left: -38px;
  display: grid;
  place-items: center;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--paper);
  border: 2px solid var(--mist-2);
  color: var(--muted);
  font-size: 0.6875rem;
  letter-spacing: 0;
}
.story__step:nth-child(3) .story__label,
.story__step:nth-child(4) .story__label { color: var(--accent-strong); }
.story__step:nth-child(3) .story__label span,
.story__step:nth-child(4) .story__label span { border-color: var(--accent); background: var(--accent); color: #fff; }

/* 1 · What we did */
.tags { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.case .tags li {
  padding: 5px 11px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line);
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--text);
}

/* 2 · What changed: before → after */
.shift { display: grid; gap: 8px; }
.shift__side p { font-size: var(--fs-small); line-height: 1.5; color: var(--muted); }
.shift__side--after p { color: var(--text); font-weight: 500; }
.shift__tag {
  display: inline-block;
  margin-bottom: 4px;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted-2);
}
.shift__side--after .shift__tag { color: var(--accent); }
.shift__arrow {
  display: grid;
  place-items: center;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
  transform: rotate(90deg);
}
.shift__arrow svg { width: 14px; height: 14px; }
@container (min-width: 520px) {
  .shift { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 16px; align-items: center; }
  .shift__arrow { transform: none; }
}

/* 3 · By how much: key result + supporting numbers */
.kpi {
  display: grid;
  gap: 6px 20px;
  align-items: center;
  padding: 18px 20px;
  border-radius: var(--r-md);
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(47, 128, 237, 0.14), rgba(47, 128, 237, 0) 60%),
    var(--accent-soft);
  border-left: 3px solid var(--accent);
}
@container (min-width: 440px) {
  .kpi { grid-template-columns: auto minmax(0, 1fr); }
}
.kpi__value {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: clamp(2.5rem, 1.9rem + 2vw, 3.5rem);
  font-weight: 600;
  letter-spacing: -0.05em;
  line-height: 1;
  color: var(--ink);
  white-space: nowrap;
}
.kpi__unit { font-size: 1rem; font-weight: 600; letter-spacing: -0.01em; color: var(--accent-strong); }
.kpi__meaning { min-width: 0; padding-left: 0; }
@container (min-width: 440px) {
  .kpi__meaning { padding-left: 20px; border-left: 1px solid rgba(47, 128, 237, 0.25); }
}
.kpi__measure { font-size: 1rem; font-weight: 600; line-height: 1.35; color: var(--text); }
.kpi__context { margin-top: 2px; font-size: 0.875rem; color: var(--muted); line-height: 1.4; }

.support {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  display: grid;
  gap: 10px;
}
@container (min-width: 440px) {
  .support { grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 0; }
  .support li + li { border-left: 1px solid var(--line); }
  .support li { padding: 0 16px; }
  .support li:first-child { padding-left: 0; }
}
.support li { min-width: 0; }
.support strong {
  display: block;
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.25;
  color: var(--ink);
}
.support span { display: block; margin-top: 2px; font-size: 0.8125rem; line-height: 1.4; color: var(--muted); }

/* 4 · Why it matters */
.story__impact {
  font-size: 1.0625rem;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: -0.01em;
  color: var(--text);
}

/* Full story + footer */
.case__full-label {
  margin-top: 26px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.case .expand__inner > .prose { padding-top: 12px; }
.case__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 26px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}

@media (max-width: 560px) {
  .case__meta { flex-wrap: wrap; }
  .case .story { padding-left: 34px; gap: 20px; }
  .story::before { left: 10px; }
  .story__label span { left: -34px; width: 22px; height: 22px; }
  .kpi { padding: 16px; }
}

/* CTA band — dark closing moment, built from the homepage hero's language */
.cta-band {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  place-items: center;
  min-height: clamp(460px, 62svh, 640px);
  margin-top: clamp(56px, 7vw, 112px);
  padding: clamp(56px, 8vw, 112px) clamp(20px, 5vw, 72px);
  border-radius: var(--r-xl);
  background: var(--ink);
  color: #fff;
  text-align: center;
  box-shadow: 0 50px 100px -50px rgba(10, 14, 22, 0.7), 0 0 0 1px rgba(255, 255, 255, 0.04) inset;
}

/* Layer 1: mountain photo (same as the hero), faded into the dark */
.cta-band__bg {
  position: absolute;
  inset: 0;
  z-index: -4;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 70%;
  opacity: 0.4;
  filter: saturate(0.85);
}
/* Layer 2: scrim — dark centre for legibility, blue glows at the edges */
.cta-band::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -3;
  background:
    radial-gradient(55% 60% at 50% 48%, rgba(8, 12, 20, 0.78) 0%, rgba(8, 12, 20, 0.55) 60%, rgba(8, 12, 20, 0.2) 100%),
    radial-gradient(45% 55% at 12% 0%, rgba(47, 128, 237, 0.45) 0%, rgba(47, 128, 237, 0) 70%),
    radial-gradient(40% 50% at 92% 100%, rgba(106, 168, 255, 0.35) 0%, rgba(106, 168, 255, 0) 70%),
    linear-gradient(180deg, rgba(10, 14, 22, 0.55) 0%, rgba(10, 14, 22, 0.2) 45%, rgba(10, 14, 22, 0.85) 100%);
}
/* Layer 3: slowly drifting glow for a little life */
.cta-band::after {
  content: "";
  position: absolute;
  z-index: -2;
  width: 620px;
  height: 620px;
  left: 50%;
  top: 50%;
  margin: -310px 0 0 -310px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(47, 128, 237, 0.32) 0%, rgba(47, 128, 237, 0) 62%);
  animation: cta-drift 14s var(--ease-in-out) infinite alternate;
  pointer-events: none;
}
@keyframes cta-drift {
  0% { transform: translate(-18%, -8%) scale(0.9); }
  100% { transform: translate(18%, 10%) scale(1.1); }
}

/* Layer 4: grid + orbit rings (echo the logo and the homepage hero) */
.cta-band__fx { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.cta-band__grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 64px 64px;
  background-position: center;
  -webkit-mask-image: radial-gradient(50% 60% at 50% 50%, #000 0%, transparent 100%);
  mask-image: radial-gradient(50% 60% at 50% 50%, #000 0%, transparent 100%);
}
.cta-band__orbit {
  position: absolute;
  left: 50%;
  top: 50%;
  aspect-ratio: 3 / 1;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 50%;
}
.cta-band__orbit--a { width: min(1100px, 130%); transform: translate(-50%, -50%) rotate(-9deg); }
.cta-band__orbit--b { width: min(760px, 95%); transform: translate(-50%, -50%) rotate(7deg); border-color: rgba(106, 168, 255, 0.22); }
.cta-band__orbit::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent-glow);
  box-shadow: 0 0 16px 5px rgba(106, 168, 255, 0.6);
  offset-path: ellipse(50% 50% at 50% 50%);
  offset-rotate: 0deg;
  animation: orbit 22s linear infinite;
}
.cta-band__orbit--b::after { width: 6px; height: 6px; animation-duration: 16s; animation-direction: reverse; background: #fff; }
@supports not (offset-path: ellipse(50% 50% at 50% 50%)) {
  .cta-band__orbit::after { display: none; }
}

/* Content */
.cta-band__content {
  position: relative;
  display: grid;
  justify-items: center;
  max-width: 820px;
}
.cta-band .label { color: rgba(255, 255, 255, 0.8); }
.cta-band .label::before { box-shadow: 0 0 0 4px rgba(47, 128, 237, 0.3); }
.cta-band__title {
  margin-top: clamp(18px, 2vw, 26px);
  font-size: clamp(2.25rem, 1.3rem + 3.6vw, 4.5rem);
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: var(--track-display);
  text-wrap: balance;
  text-shadow: 0 2px 40px rgba(8, 12, 20, 0.4);
}
.cta-band__title span {
  background: linear-gradient(100deg, #9cc6ff 0%, var(--accent-glow) 45%, #4d95f5 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: none;
}
.cta-band__text {
  margin-top: clamp(16px, 2vw, 24px);
  max-width: 46ch;
  font-size: var(--fs-lead);
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.78);
  text-wrap: balance;
}

/* Primary CTA: large gradient pill, pulsing halo, shine sweep on hover */
.btn--cta {
  min-height: 64px;
  margin-top: clamp(28px, 3.4vw, 44px);
  padding: 8px 8px 8px 32px;
  gap: 16px;
  font-size: 1.125rem;
  background: linear-gradient(110deg, var(--accent-strong) 0%, var(--accent) 50%, #5a9df7 100%);
  box-shadow:
    0 20px 44px -16px rgba(47, 128, 237, 0.9),
    0 0 0 1px rgba(255, 255, 255, 0.18) inset;
  overflow: visible;
}
.btn--cta .btn__icon {
  width: 48px;
  height: 48px;
  background: #fff;
  color: var(--accent-strong);
  transition: transform var(--t-med) var(--ease);
}
.btn--cta .btn__icon svg { width: 18px; height: 18px; }
.btn--cta::before {
  /* halo that breathes around the button */
  content: "";
  position: absolute;
  inset: -6px;
  z-index: -1;
  border-radius: inherit;
  border: 1px solid rgba(106, 168, 255, 0.55);
  animation: cta-halo 2.8s var(--ease) infinite;
  pointer-events: none;
}
@keyframes cta-halo {
  0% { opacity: 0.9; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.14, 1.4); }
}
.btn--cta::after {
  /* light sweep across the face on hover */
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, 0.35) 50%, transparent 70%) no-repeat;
  background-size: 250% 100%;
  background-position: 150% 0;
  pointer-events: none;
}
.btn--cta:hover {
  background: linear-gradient(110deg, var(--accent-strong) 0%, var(--accent) 50%, #5a9df7 100%);
  transform: translateY(-2px);
  box-shadow:
    0 28px 56px -18px rgba(47, 128, 237, 1),
    0 0 0 1px rgba(255, 255, 255, 0.28) inset;
}
.btn--cta:hover::after { background-position: -50% 0; transition: background-position 0.9s var(--ease); }
.btn--cta:hover .btn__icon { transform: translateX(3px); }
.btn--cta:hover .btn__icon svg { transform: none; }
.btn--cta:active { transform: translateY(0) scale(0.98); }
.btn--cta:focus-visible { outline: 2px solid #fff; outline-offset: 5px; }

@media (max-width: 560px) {
  .cta-band { min-height: 0; }
  .cta-band__orbit--a { width: 190%; }
  .cta-band__orbit--b { width: 140%; }
}
@media (prefers-reduced-motion: reduce) {
  .cta-band::after,
  .btn--cta::before,
  .cta-band__orbit::after { animation: none; }
  .btn--cta::before { display: none; }
}

/* ---------- Reveal animations ---------- */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--t-slow) var(--ease), transform var(--t-slow) var(--ease);
  transition-delay: var(--delay, 0ms);
}
.js [data-reveal="fade"] { transform: none; }
.js [data-reveal="scale"] { transform: scale(0.96); }
.js [data-reveal="clip"] {
  opacity: 1;
  transform: none;
  clip-path: inset(12% 6% 12% 6% round var(--r-xl));
  transition: clip-path 1.2s var(--ease);
}
.js [data-reveal].is-visible { opacity: 1; transform: none; }
.js [data-reveal="clip"].is-visible { clip-path: inset(0 0 0 0 round var(--r-xl)); }

.hero [data-hero] {
  opacity: 0;
  transform: translateY(28px);
  animation: rise 1s var(--ease) forwards;
  animation-delay: var(--delay, 0ms);
}
@keyframes rise { to { opacity: 1; transform: none; } }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
  }
  .marquee__track { animation: none; }
  .hero__media { transform: none !important; }
  .hero__glow,
  .hero__orbit::after,
  .hero__scroll i::after { display: none; }
  .js [data-reveal] { opacity: 1; transform: none; clip-path: none; }
}