/* =========================================================
   MURKEZ HOMEPAGE — STYLES
   Design tokens, layout, components, motion
   ========================================================= */

:root {
  /* --- Brand color system (client-supplied, 2026 update) --- */
  --navy: #0D1B4B;       /* Primary brand navy — nav text, headings, dark backgrounds */
  --blue: #00A8C6;       /* Primary cyan accent — links, icons, buttons, active states */
  --green: #3E8E63;      /* Secondary accent (limited use) */
  --bg: #F8FAFC;         /* Light section background */
  --white: #FFFFFF;
  --charcoal: #27313D;   /* Body text (dark alt) */
  --slate: #464F5C;      /* Body text (primary) */
  --blue-light: #E0F5FA; /* Light cyan tint — icon backgrounds, hover fills */
  --navy-mid: #1E4E7A;   /* Mid-tone navy (limited use) */
  --border: #E3E8EF;     /* Card borders, dividers */

  /* Reserved exclusively for hero emphasis text — not used anywhere else */
  --hero-accent: #18D4FF;
  /* Muted label text — ISO band, secondary labels */
  --muted-label: #667085;
  /* Muted metric labels — Client Success cards */
  --muted-metric: #8A9BB0;

  /* --- Tonal ramp derived from brand navy, for gradients/backgrounds --- */
  --navy-950: #050A1E;
  --navy-900: #081231;
  --navy-800: var(--navy);
  --navy-700: #14346C;
  --navy-600: var(--navy-mid);

  /* --- Legacy aliases (kept so the rest of the stylesheet resolves correctly) --- */
  --blue-500: var(--blue);
  --blue-600: var(--blue);
  --blue-700: var(--navy-mid);
  --cyan-400: var(--blue);
  --cyan-300: var(--blue);
  --off-white: var(--bg);
  --ink-900: var(--navy);
  --ink-700: var(--charcoal);
  --ink-500: var(--slate);
  --ink-400: var(--slate);
  --border-light: var(--border);

  /* --- Type --- */
  --font-display: 'Plus Jakarta Sans', sans-serif;
  --font-body: 'Inter', sans-serif;

  /* --- Layout --- */
  --container-w: 1280px;
  --radius-md: 14px;
  --radius-lg: 20px;

  /* --- Motion --- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 0.25s;
  --dur-med: 0.5s;
  --dur-slow: 1.2s;
}

/* =========================================================
   RESET
   ========================================================= */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: hidden; }
body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--ink-900);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  width: 100%;
}
img, svg { display: block; max-width: 100%; }
a { text-decoration: none; color: inherit; }
ul { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, p { margin: 0; }
button { font: inherit; cursor: pointer; }

.container {
  max-width: var(--container-w);
  margin: 0 auto;
  padding: 0 32px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

:focus-visible {
  outline: 2px solid var(--cyan-400);
  outline-offset: 3px;
  border-radius: 4px;
}

/* =========================================================
   SHARED — eyebrow, underline, buttons
   ========================================================= */
.eyebrow {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.14em;
  margin-bottom: 18px;
  position: relative;
  padding-bottom: 14px;
}
.eyebrow--dark { color: var(--blue-600); }
.eyebrow--light { color: var(--cyan-300); }
.eyebrow::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 46px;
  height: 2px;
  background: linear-gradient(90deg, currentColor, transparent);
  background-size: 200% 100%;
  animation: shimmer 3.5s ease-in-out infinite;
}

.underline {
  display: block;
  width: 60px;
  height: 3px;
  margin: 28px auto 0;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--cyan-400), transparent);
  background-size: 200% 100%;
}
.underline--shimmer { animation: shimmer 3.5s ease-in-out infinite; }

@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 15px 28px;
  border-radius: 8px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.01em;
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
  white-space: nowrap;
}
.btn--primary {
  background: linear-gradient(135deg, var(--blue-500), var(--blue-700));
  color: var(--white);
  border: 1px solid transparent;
  box-shadow: 0 8px 24px -8px rgba(0, 168, 198, 0.55);
}
.btn--primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px -8px rgba(0, 168, 198, 0.7);
}
.btn--ghost {
  background: transparent;
  color: var(--white);
  border: 1px solid rgba(255, 255, 255, 0.35);
}
.btn--ghost:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.6);
  transform: translateY(-2px);
}

/* =========================================================
   HERO SECTION
   ========================================================= */
.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  background-color: var(--navy);
  background-image:
    radial-gradient(48% 42% at 14% 8%, rgba(0, 168, 198, 0.11) 0%, rgba(0, 168, 198, 0.05) 45%, transparent 78%),
    radial-gradient(40% 38% at 86% 14%, rgba(24, 212, 255, 0.09) 0%, rgba(24, 212, 255, 0.04) 45%, transparent 78%),
    radial-gradient(46% 40% at 20% 92%, rgba(0, 168, 198, 0.08) 0%, rgba(0, 168, 198, 0.035) 45%, transparent 78%),
    radial-gradient(50% 44% at 84% 96%, rgba(24, 212, 255, 0.07) 0%, rgba(24, 212, 255, 0.03) 45%, transparent 78%);
  isolation: isolate;
}
/* Homepage only: hero fills the full viewport height, content
   vertically centered. Scoped to this modifier so About and
   Capabilities (which share the base .hero class) are unaffected. */
.hero--home {
  min-height: 100vh;
  justify-content: center;
}
/* Background image, same mirrored positioning as Why Murkez for visual
   consistency (source image's bright arc is top-right; flipped so it
   lands top-left). Sits behind the existing glow blobs and particles,
   which still render on top as before — image is additive, not a
   replacement of the existing layers. */
.hero--home::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: url('/assets/hero-bg.webp');
  background-size: cover;
  background-position: center;
  /* Un-flipped (source orientation): the image's bright arc sits top-right,
     away from the top-left nav logo, keeping the blue K legible. Slow,
     continuous, very subtle zoom in/out for an ambient parallax feel. */
  transform-origin: 50% 40%;   /* center X so the horizontal flip fully covers (no left band) */
  animation: heroZoom 24s ease-in-out infinite alternate;
}
@keyframes heroZoom {
  from { transform: scaleX(-1) scale(1); }
  to   { transform: scaleX(-1) scale(1.09); }
}
@media (prefers-reduced-motion: reduce) {
  .hero--home::before { animation: none; transform: scaleX(-1); }
}
.hero--home .hero__content {
  padding-top: 160px;
  padding-bottom: 120px;
}

/* Same navy tones as the base gradient, just eased continuously across the
   canvas in a seamless loop (returns to its start point, so no snap-back). */
@keyframes navyDrift {
  0%   { background-position: 0% 0%; }
  25%  { background-position: 38% 16%; }
  50%  { background-position: 14% 38%; }
  75%  { background-position: 42% 6%; }
  100% { background-position: 0% 0%; }
}

.hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

/* Ambient blobs — large, soft-edged, static (no motion). */
.hero__glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.14;
}
.hero__glow--1 {
  width: 420px;
  height: 380px;
  background: radial-gradient(circle, var(--blue) 0%, rgba(0, 168, 198, 0.7) 25%, rgba(0, 168, 198, 0.25) 50%, transparent 75%);
  top: -14%;
  left: 48%;
}
.hero__glow--2 {
  width: 360px;
  height: 340px;
  background: radial-gradient(circle, var(--hero-accent) 0%, rgba(24, 212, 255, 0.7) 25%, rgba(24, 212, 255, 0.25) 50%, transparent 75%);
  bottom: -16%;
  left: 2%;
}
.hero__glow--3 {
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, var(--blue) 0%, rgba(0, 168, 198, 0.7) 25%, rgba(0, 168, 198, 0.25) 50%, transparent 75%);
  top: 8%;
  right: -8%;
}
.hero__glow--4 {
  width: 280px;
  height: 260px;
  background: radial-gradient(circle, var(--hero-accent) 0%, rgba(24, 212, 255, 0.7) 25%, rgba(24, 212, 255, 0.25) 50%, transparent 75%);
  bottom: 4%;
  right: 22%;
}
.hero__glow--5 {
  width: 260px;
  height: 260px;
  background: radial-gradient(circle, var(--blue) 0%, rgba(0, 168, 198, 0.7) 25%, rgba(0, 168, 198, 0.25) 50%, transparent 75%);
  top: 42%;
  left: 24%;
}

.hero__particles {
  position: absolute;
  inset: 0;
}
.particle {
  position: absolute;
  width: 2.5px;
  height: 2.5px;
  border-radius: 50%;
  background: var(--cyan-300);
  opacity: 0.3;
  animation: particleFloat linear infinite;
}
@keyframes particleFloat {
  0% { transform: translateY(0) translateX(0); opacity: 0; }
  10% { opacity: 0.42; }
  90% { opacity: 0.26; }
  100% { transform: translateY(-100px) translateX(14px); opacity: 0; }
}

/* --- Sticky Site Nav (fixed to viewport, persists across all sections) ---
   Default state sits directly on the hero's own background — no fill, no
   blur, no border — so nav and hero read as one continuous surface. Once
   scrolled past the hero it swaps to a solid white bar (see .is-scrolled). */
.site-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 48px;
  background: transparent;
  border-bottom: none;
  box-shadow: none;
  transition: background var(--dur-med) var(--ease-out), padding var(--dur-med) var(--ease-out), box-shadow var(--dur-med) var(--ease-out);
}
.site-nav.is-scrolled {
  background: var(--white);
  padding-top: 16px;
  padding-bottom: 16px;
  box-shadow: 0 1px 0 var(--border-light), 0 12px 30px -18px rgba(13, 27, 75, 0.18);
}
.site-nav__logo {
  position: relative;
  display: block;
  width: 192px;
  height: 49px;
}
.site-nav__logo-img {
  position: absolute;
  top: 0;
  left: 0;
  height: 49px;
  width: auto;
  display: block;
  transition: opacity var(--dur-fast) var(--ease-out);
}
.site-nav__logo-img--dark { opacity: 0; }
.site-nav.is-scrolled .site-nav__logo-img--light { opacity: 0; }
.site-nav.is-scrolled .site-nav__logo-img--dark { opacity: 1; }
.nav__links {
  display: flex;
  align-items: center;
  gap: 36px;
}
.nav__links a {
  color: rgba(255, 255, 255, 0.85);
  font-size: 15px;
  font-weight: 500;
  position: relative;
  transition: color var(--dur-fast);
}
.nav__links a::after {
  content: '';
  position: absolute;
  left: 0; bottom: -6px;
  width: 0; height: 1px;
  background: var(--cyan-400);
  transition: width var(--dur-fast) var(--ease-out);
}
.nav__links a:hover { color: var(--white); }
.nav__links a:hover::after { width: 100%; }
.nav__links a.is-current { color: var(--white); }
.nav__links a.is-current::after { width: 100%; }
.site-nav.is-scrolled .nav__links a.is-current { color: var(--blue-600); }
.site-nav.is-scrolled .nav__links a { color: var(--ink-900); }
.site-nav.is-scrolled .nav__links a:hover { color: var(--blue-600); }

.nav__item--dropdown { position: relative; }
.nav__dropdown-trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: rgba(255, 255, 255, 0.85);
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  position: relative;
  transition: color var(--dur-fast);
}
.nav__dropdown-trigger svg { transition: transform var(--dur-fast) var(--ease-out); opacity: 0.7; }
.nav__dropdown-trigger::after {
  content: '';
  position: absolute;
  left: 0; bottom: -6px;
  width: 0; height: 1px;
  background: var(--cyan-400);
  transition: width var(--dur-fast) var(--ease-out);
}
.nav__item--dropdown:hover .nav__dropdown-trigger,
.nav__dropdown-trigger.is-current { color: var(--white); }
.nav__item--dropdown:hover .nav__dropdown-trigger::after,
.nav__dropdown-trigger.is-current::after { width: 100%; }
.nav__item--dropdown:hover .nav__dropdown-trigger svg { transform: rotate(180deg); }
.site-nav.is-scrolled .nav__dropdown-trigger { color: var(--ink-900); }
.site-nav.is-scrolled .nav__dropdown-trigger.is-current,
.site-nav.is-scrolled .nav__item--dropdown:hover .nav__dropdown-trigger { color: var(--blue-600); }

.nav__dropdown-menu {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  padding-top: 16px;
  min-width: 200px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--dur-fast) var(--ease-out), visibility var(--dur-fast);
  z-index: 40;
}
.nav__item--dropdown:hover .nav__dropdown-menu,
.nav__item--dropdown:focus-within .nav__dropdown-menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.nav__dropdown-panel {
  background: var(--white);
  border-radius: var(--radius-md);
  box-shadow: 0 24px 48px -16px rgba(7, 20, 60, 0.28), 0 4px 12px -4px rgba(7, 20, 60, 0.12);
  border: 1px solid var(--border);
  padding: 8px;
  margin: 0;
  list-style: none;
  transform: translateY(-6px);
  transition: transform var(--dur-fast) var(--ease-out);
}
.nav__item--dropdown:hover .nav__dropdown-panel,
.nav__item--dropdown:focus-within .nav__dropdown-panel {
  transform: translateY(0);
}
.nav__dropdown-panel li a {
  display: block;
  padding: 11px 16px;
  border-radius: 8px;
  color: var(--ink-900);
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  transition: background var(--dur-fast), color var(--dur-fast);
}
.nav__dropdown-panel li a:hover { background: var(--blue-light); color: var(--blue-600); }
.nav__dropdown-panel li a::after { display: none; }

.mobile-menu__group { display: flex; flex-direction: column; }
.mobile-menu__group-label {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-500);
  margin-top: 6px;
}
.mobile-menu__group-label.is-current { color: var(--blue-600); }
.mobile-menu__group a {
  border-left: 2px solid rgba(255, 255, 255, 0.14);
  margin-left: 2px;
  padding-left: 12px;
  font-size: 15px;
  padding-top: 11px;
  padding-bottom: 11px;
}
.mobile-menu__group a:not(:last-child) { border-bottom: none; }

.nav__cta {
  display: inline-flex;
  align-items: center;
  padding: 11px 22px;
  border-radius: 24px;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  background: var(--white);
  color: var(--navy);
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.nav__cta:hover { transform: translateY(-1px); }
.site-nav.is-scrolled .nav__cta {
  background: var(--navy);
  color: var(--white);
}

.nav__toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  padding: 14px;
  min-width: 44px;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  z-index: 4;
}
.nav__toggle span {
  width: 24px;
  height: 2px;
  background: var(--white);
  border-radius: 2px;
  transition: transform var(--dur-fast), opacity var(--dur-fast), background var(--dur-fast);
}
.site-nav.is-scrolled .nav__toggle span { background: var(--navy); }
.nav__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav__toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.mobile-menu {
  position: fixed;
  top: 0; right: 0;
  width: min(320px, 80vw);
  height: 100vh;
  background: var(--navy-900);
  border-left: 1px solid rgba(255,255,255,0.08);
  z-index: 250;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 100px 32px 32px;
  transform: translateX(100%);
  transition: transform var(--dur-med) var(--ease-out);
}
.mobile-menu.is-open { transform: translateX(0); }
.mobile-menu__close {
  position: absolute;
  top: 24px;
  right: 24px;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 8px;
  color: var(--white);
  cursor: pointer;
  transition: background var(--dur-fast), border-color var(--dur-fast);
}
.mobile-menu__close:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.3);
}
.mobile-menu a {
  color: var(--white);
  font-size: 17px;
  font-weight: 500;
  padding: 14px 0;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.mobile-menu a.is-current { color: var(--cyan-300); }
.mobile-menu__cta {
  margin-top: 20px;
  text-align: center;
  border: none;
  border-radius: 24px;
  background: var(--white);
  color: var(--navy) !important;
  font-weight: 600;
  padding: 14px 0 !important;
}

/* --- Hero content --- */
.hero__content {
  position: relative;
  z-index: 2;
  max-width: 1536px;
  margin: 0 auto;
  padding: 124px 48px 100px;
  width: 100%;
}
.hero__tagline {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.32em;
  color: var(--blue);
  margin-bottom: 40px;
  position: relative;
  padding-bottom: 16px;
  opacity: 0;
  animation: fadeUp 0.8s var(--ease-out) 0.1s forwards;
}
/* Shimmering accent underline (matches the site's eyebrow treatment). */
.hero__tagline::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 52px;
  height: 2px;
  background: linear-gradient(90deg, var(--blue), transparent);
  background-size: 200% 100%;
  animation: shimmer 3.5s ease-in-out infinite;
}
.hero__headline {
  font-family: var(--font-display);
  font-weight: 800;
  line-height: 1.12;
  font-size: clamp(38px, 6vw, 72px);
  background: linear-gradient(100deg, #7CE6FF, var(--hero-accent) 60%, #0FB8DE);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin-bottom: 20px;
  opacity: 0;
  animation: fadeUp 0.8s var(--ease-out) 0.1s forwards;
}
/* Shared: a static intro line above an accent/rotator line. Currently
   used by the About page hero ("Built by Operators."); kept in root
   since it's a reusable hero pattern, not page-specific. */
.hero__headline-static {
  display: block;
  font-size: clamp(22px, 2.6vw, 32px);
  font-weight: 400;
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: 6px;
  opacity: 0;
  animation: fadeUp 0.8s var(--ease-out) 0.25s forwards;
}

/* Homepage-only: plain H1 wrapper (no direct styling of its own —
   children below carry their own size/color/animation), so it can
   safely share the <h1> tag without colliding with .hero__headline,
   which Capabilities depends on for its own single-line treatment. */
.hero__title {
  font-family: var(--font-display);
  line-height: 1.15;
}
.hero__lead {
  display: block;
  font-size: clamp(28px, 3.6vw, 48px);
  font-weight: 500;
  color: rgba(255, 255, 255, 0.92);
  margin-bottom: 16px;
  opacity: 0;
  animation: fadeUp 0.8s var(--ease-out) 0.25s forwards;
}
/* Rotator: the accent line of the hero — italic, gradient — but sized
   close to .hero__lead rather than dramatically larger, per reference.
   Fixed min-height (sized to the tallest phrase) prevents layout shift
   or hero height change as words cross-fade in and out. */
.hero__rotator {
  position: relative;
  display: block;
  /*
   * Let the active desktop phrase define the complete width. The former
   * 20ch cap clipped the end of “Experienced Operators”.
   */
  width: max-content;
  max-width: none;
  min-height: clamp(36px, 4.8vw, 64px);
  overflow: visible;
  opacity: 0;
  animation: fadeUp 0.8s var(--ease-out) 0.4s forwards;
}
.rotator__word {
  position: absolute;
  left: 0; top: 0;
  font-family: var(--font-display);
  /* ~12% smaller than prior (48->42 ceiling) so it supports the headline
     rather than competing with it. */
  font-size: clamp(25px, 3.15vw, 42px);
  font-weight: 800;
  font-style: italic;
  font-synthesis: none;
  line-height: 1.2;
  /*
   * Give italic glyphs their own box and enough room for the trailing
   * overhang. This prevents letters such as the final “d” in
   * “Experienced” from being clipped by the hero viewport.
   */
  display: block;
  width: max-content;
  max-width: none;
  box-sizing: content-box;
  overflow: visible;
  padding-right: 0.4em;
  background: linear-gradient(100deg, #7CE6FF, var(--hero-accent) 60%, #0FB8DE);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  white-space: nowrap;
  opacity: 0;
  /* Fade only — no slide, scale, or positional movement. */
  transition: opacity 0.5s ease;
}
.rotator__word.is-active {
  position: relative;
  opacity: 1;
}



.hero__rotator-underline {
  margin: 44px 0 0;
  opacity: 0;
  animation: fadeUp 0.8s var(--ease-out) 0.5s forwards;
}

.hero__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  margin-top: 112px;
  opacity: 0;
  animation: fadeUp 0.8s var(--ease-out) 0.65s forwards;
}

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}

/* =========================================================
   PROVEN IMPACT AT SCALE
   ========================================================= */
.impact {
  position: relative;
  background: var(--white);
  padding: 0 0 88px;
}

.impact .container { padding-top: 72px; text-align: center; }
.impact__headline {
  font-family: var(--font-display);
  font-size: clamp(28px, 3.4vw, 42px);
  font-weight: 700;
  color: var(--ink-900);
  line-height: 1.25;
  margin-bottom: 56px;
}
.eyebrow--dark { display: inline-block; }
.impact .eyebrow { margin-left: auto; margin-right: auto; }
.impact .eyebrow::after { left: 50%; transform: translateX(-50%); }

.impact__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  align-items: start;
  gap: 24px;
  margin-bottom: 64px;
}
.impact__stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 12px;
  border-right: 1px solid var(--border-light);
}
.impact__stat:last-child { border-right: none; }
.impact__number {
  font-family: var(--font-display);
  /* Slightly reduced max size so the longer values (e.g. $4.2B+)
     don't read as visually heavier than short ones (e.g. 5) at
     the same character scale — keeps consistent visual weight
     across all five cards. */
  font-size: clamp(30px, 3.4vw, 44px);
  font-weight: 800;
  white-space: nowrap;
  background: linear-gradient(135deg, var(--blue-500), var(--blue-700));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  line-height: 1;
  margin-bottom: 14px;
}
.impact__label {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--muted-label);
  text-transform: uppercase;
  line-height: 1.5;
}

.impact__certification {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 48px;
  border-top: 1px solid var(--border-light);
}
.cert__icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 1px solid var(--border-light);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
  box-shadow: 0 6px 18px -8px rgba(0, 168, 198, 0.25);
}
.cert__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 19px;
  color: var(--ink-900);
  margin-bottom: 10px;
}
.cert__list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  justify-content: center;
}
.cert__badge {
  font-size: 13px;
  font-weight: 500;
  color: var(--muted-label);
  letter-spacing: 0.02em;
  white-space: nowrap;
  padding: 4px 10px;
  border: 1px solid var(--border-light);
  border-radius: 999px;
}

/* =========================================================
   CAPABILITIES SECTION
   ========================================================= */
.capabilities {
  background: var(--off-white);
  padding: 100px 0 90px;
  position: relative;
}
.capabilities .eyebrow { }
.capabilities__headline {
  font-family: var(--font-display);
  font-size: clamp(30px, 3.6vw, 44px);
  font-weight: 800;
  color: var(--ink-900);
  line-height: 1.2;
  margin-bottom: 18px;
  max-width: 640px;
}
.capabilities__intro {
  font-size: 17px;
  color: var(--ink-500);
  max-width: 520px;
  line-height: 1.6;
  margin-bottom: 56px;
}

.capabilities__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.cap-card {
  position: relative;
  background: var(--white);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  padding: 30px 26px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  overflow: hidden;
  transition: transform var(--dur-med) var(--ease-out), box-shadow var(--dur-med) var(--ease-out), border-color var(--dur-med) var(--ease-out);
}
.cap-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--navy-800), var(--navy-950) 70%);
  opacity: 0;
  transition: opacity var(--dur-med) var(--ease-out);
  z-index: 0;
}
.cap-card > * { position: relative; z-index: 1; }

.cap-card__icon {
  width: 46px;
  height: 46px;
  border-radius: 10px;
  background: var(--blue-light);
  color: var(--blue);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--dur-med) var(--ease-out), color var(--dur-med) var(--ease-out), box-shadow var(--dur-med) var(--ease-out);
}
.cap-card__title {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 700;
  color: var(--navy);
  transition: color var(--dur-med) var(--ease-out);
}
.cap-card__copy {
  font-size: 14.5px;
  color: var(--slate);
  line-height: 1.55;
  flex-grow: 1;
  transition: color var(--dur-med) var(--ease-out);
}
.cap-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 600;
  color: var(--blue);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity var(--dur-med) var(--ease-out), transform var(--dur-med) var(--ease-out);
}

.cap-card:hover,
.cap-card:focus-visible {
  transform: translateY(-6px);
  box-shadow: 0 20px 40px -16px rgba(7, 20, 60, 0.35);
  border-color: transparent;
}
.cap-card:hover::before,
.cap-card:focus-visible::before { opacity: 1; }
.cap-card:hover .cap-card__icon,
.cap-card:focus-visible .cap-card__icon {
  background: rgba(0, 168, 198, 0.18);
  color: #5FE0F5;
  box-shadow: 0 0 22px rgba(0, 168, 198, 0.4);
}
.cap-card:hover .cap-card__title,
.cap-card:focus-visible .cap-card__title { color: var(--white); }
.cap-card:hover .cap-card__copy,
.cap-card:focus-visible .cap-card__copy { color: rgba(255, 255, 255, 0.72); }
.cap-card:hover .cap-card__cta,
.cap-card:focus-visible .cap-card__cta { opacity: 1; transform: translateY(0); }

/* Inactive cards (no destination page yet) keep the static premium
   look but skip the dark hover-flip, since that treatment strongly
   implies clickability where none currently exists. */
.cap-card.is-inactive {
  cursor: default;
}
.cap-card.is-inactive:hover {
  transform: none;
  box-shadow: none;
  border-color: var(--border-light);
}
.cap-card.is-inactive:hover::before { opacity: 0; }
.cap-card.is-inactive:hover .cap-card__icon {
  background: var(--blue-light);
  color: var(--blue);
  box-shadow: none;
}
.cap-card.is-inactive:hover .cap-card__title { color: var(--navy); }
.cap-card.is-inactive:hover .cap-card__copy { color: var(--slate); }

/* Note: the "Data, AI & Intelligent Automation" card previously stayed dark
   permanently (matching the reference mockup). Per feedback it should behave
   exactly like every other card — white by default, dark only on :hover — so
   the dedicated "always-dark" override has been removed. */

.capabilities__footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 56px;
  font-size: 16px;
  color: var(--muted-label);
}
.capabilities__badge {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--border-light);
  display: flex;
  align-items: center;
  justify-content: center;
}
.capabilities__footer .highlight { color: var(--blue-600); font-weight: 600; }

/* =========================================================
   BRAND STATEMENT
   ========================================================= */
.brand-statement {
  background: var(--white);
  padding: 110px 0;
  text-align: center;
}
/* Capabilities page: match height of the navy quote section on Why Murkez
   (.brand-statement-navy uses 100px 24px vertical padding). */
.brand-statement--strategy { padding: 100px 24px; }
.brand-statement__headline {
  font-family: var(--font-display);
  font-size: clamp(26px, 3.4vw, 40px);
  font-weight: 700;
  line-height: 1.4;
}
.brand-statement__line { display: block; }
.brand-statement__line--dark { color: var(--ink-900); }
.brand-statement__line--accent {
  background: linear-gradient(90deg, var(--cyan-400), var(--blue-500));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* =========================================================
   CLIENT SUCCESS
   ========================================================= */
.client-success {
  background: radial-gradient(120% 100% at 85% 0%, var(--navy-700) 0%, var(--navy-900) 45%, var(--navy-950) 100%);
  padding: 100px 0 80px;
  color: var(--white);
}
.client-success__headline {
  font-family: var(--font-display);
  font-size: clamp(32px, 4vw, 46px);
  font-weight: 800;
  margin-bottom: 16px;
}
.client-success__intro {
  font-size: 17px;
  color: rgba(255, 255, 255, 0.65);
  max-width: 520px;
  line-height: 1.6;
  margin-bottom: 56px;
}

.client-success__grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 24px;
  margin-bottom: 56px;
}

.success-card {
  display: block;
  border-radius: var(--radius-lg);
  transition: transform var(--dur-med) var(--ease-out), box-shadow var(--dur-med) var(--ease-out), border-color var(--dur-med) var(--ease-out);
}

.success-card--featured {
  position: relative;
  background: linear-gradient(160deg, rgba(20, 40, 90, 0.55), rgba(4, 10, 28, 0.85));
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 40px;
  min-height: 420px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
}
.success-card--featured::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 30%, rgba(1, 6, 20, 0.9) 100%);
  z-index: 0;
}
.success-card--featured > * { position: relative; z-index: 1; }
.success-card__art {
  position: absolute;
  top: 28px;
  left: 28px;
  width: 62%;
  max-width: 520px;
  height: auto;
  opacity: 0.9;
  pointer-events: none;
}
.success-card--featured:hover {
  transform: translateY(-4px);
  box-shadow: 0 0 50px -10px rgba(0, 168, 198, 0.4);
  border-color: rgba(0, 168, 198, 0.35);
}
.success-card__badge {
  align-self: flex-start;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--cyan-300);
  background: rgba(0, 168, 198, 0.12);
  border: 1px solid rgba(0, 168, 198, 0.3);
  border-radius: 6px;
  padding: 6px 12px;
  margin-bottom: 34px;
}
.success-card__number {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(40px, 4.5vw, 56px);
  font-weight: 800;
  color: var(--cyan-300);
  line-height: 1;
  margin-bottom: 14px;
}
.success-card__metric-label {
  display: block;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--muted-metric);
  margin-bottom: 28px;
}
.success-card__title {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 700;
  color: var(--white);
  line-height: 1.3;
  margin-bottom: 18px;
}
.success-card__copy {
  font-size: 14.5px;
  color: rgba(255, 255, 255, 0.65);
  line-height: 1.6;
  margin-bottom: 0;
  max-width: 460px;
}

.success-card__stack {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.success-card--compact {
  position: relative;
  background: rgba(10, 22, 55, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 26px;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.success-card--compact:hover {
  transform: translateY(-3px);
  border-color: rgba(0, 168, 198, 0.35);
  box-shadow: 0 14px 34px -14px rgba(0, 168, 198, 0.45);
}
/* Inactive cards (no destination page yet) keep the same premium
   presentation but drop the hover-lift cue that would otherwise
   imply they're clickable. */
.success-card.is-inactive {
  cursor: default;
}
.success-card.is-inactive:hover {
  transform: none;
  box-shadow: none;
  border-color: rgba(255, 255, 255, 0.08);
}
.success-card__icon {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(0, 168, 198, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
}
.success-card__number--sm {
  font-size: 26px;
  margin-bottom: 4px;
}
.success-card__title--sm {
  font-size: 15.5px;
  font-weight: 600;
  margin-bottom: 0;
}

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer {
  position: relative;
  background: radial-gradient(160% 130% at 15% 0%, var(--navy-700) 0%, var(--navy-900) 42%, var(--navy-950) 100%);
  background-size: 220% 220%;
  animation: navyDrift 26s ease-in-out infinite;
  color: var(--white);
  overflow: hidden;
}
.site-footer__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.site-footer .hero__glow--1 { top: -20%; right: 5%; left: auto; }
.site-footer .hero__glow--2 { bottom: -20%; left: 10%; }

.footer-cta {
  position: relative;
  z-index: 1;
  text-align: center;
  padding: 110px 32px 90px;
  max-width: 760px;
  margin: 0 auto;
}
.footer-cta .eyebrow { margin-left: auto; margin-right: auto; }
.footer-cta .eyebrow::after { left: 50%; transform: translateX(-50%); }
.footer-cta__headline {
  font-family: var(--font-display);
  font-size: clamp(38px, 5vw, 60px);
  font-weight: 800;
  margin-bottom: 24px;
}
.footer-cta__copy {
  font-size: 17px;
  color: rgba(255, 255, 255, 0.65);
  line-height: 1.6;
  margin-bottom: 40px;
}
.footer-cta .hero__ctas { justify-content: center; margin-top: 0; opacity: 1; animation: none; }

.footer-columns {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 56px;
  max-width: 1120px;
  margin: 0 auto;
  padding: 72px 32px 64px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.footer-col__logo {
  display: inline-flex;
  align-items: center;
  margin-bottom: 16px;
}
.footer-col__desc {
  font-size: 15px;
  color: rgba(255, 255, 255, 0.55);
  line-height: 1.6;
  margin: 20px 0 24px;
  max-width: 280px;
}
.footer-col__contact {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.footer-col__contact li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 15px;
  color: rgba(255, 255, 255, 0.6);
  line-height: 1.55;
}
.footer-col__contact svg { flex-shrink: 0; margin-top: 2px; color: var(--cyan-300); }

.footer-col__heading {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--cyan-300);
  margin-bottom: 24px;
  position: relative;
  padding-bottom: 14px;
}
.footer-col__heading::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 28px;
  height: 2px;
  background: var(--cyan-400);
}
.footer-col ul { display: flex; flex-direction: column; gap: 16px; }
.footer-col__industries {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.footer-col ul li a {
  font-size: 16px;
  color: rgba(255, 255, 255, 0.7);
  transition: color var(--dur-fast), padding-left var(--dur-fast);
}
.footer-col ul li a:hover { color: var(--cyan-300); padding-left: 4px; }

.footer-col__socials {
  display: flex;
  gap: 12px;
  margin-bottom: 30px;
}
.footer-col__socials a {
  width: 42px;
  height: 42px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  transition: background var(--dur-fast), border-color var(--dur-fast), transform var(--dur-fast);
}
.footer-col__socials a:hover {
  background: var(--blue-600);
  border-color: var(--blue-600);
  transform: translateY(-2px);
}
.footer-col__socials svg { width: 18px; height: 18px; }
.footer-col__legal { gap: 12px; }
.footer-col__legal a { color: rgba(255, 255, 255, 0.6); font-size: 15px; }
.footer-col__legal a:hover { color: var(--cyan-300); }

.footer-bottom {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  padding: 26px 32px 40px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 13px;
  color: var(--muted-label);
}
.footer-bottom__iso {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}
.footer-bottom__icons {
  display: flex;
  gap: 16px;
  color: rgba(255, 255, 255, 0.3);
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 1100px) {
  .impact__grid { grid-template-columns: repeat(3, 1fr); row-gap: 40px; }
  .impact__stat:nth-child(3) { border-right: none; }
  .impact__stat:nth-child(4) {
    grid-column: 1 / -1;
    border-right: none;
    border-top: 1px solid var(--border-light);
    padding-top: 24px;
  }
  .capabilities__grid { grid-template-columns: repeat(2, 1fr); }
  .client-success__grid { grid-template-columns: 1fr; }
  .footer-columns { grid-template-columns: 1fr 1fr; }
  .footer-col--brand { grid-column: 1 / -1; }
}

@media (max-width: 860px) {
  .nav__links { display: none; }
  .nav__cta { display: none; }
  .nav__toggle { display: flex; }
  .site-nav { padding: 16px 24px; }
  .hero__content { padding: 96px 24px 80px; }
  .container { padding: 0 24px; }

  /* Card grids stack vertically on mobile instead of horizontal-scroll
     carousels. Desktop/tablet grid layouts above this breakpoint are
     untouched. */
  .impact__grid,
  .capabilities__grid,
  .success-card__stack {
    display: flex;
    flex-direction: column;
    align-items: center;
    grid-template-columns: none;
  }

  .impact__grid { gap: 32px; margin-bottom: 40px; width: 100%; }
  .impact__number { font-size: 32px; }
  .impact__stat {
    width: 100%;
    border-right: none !important;
    border-top: none !important;
    border-bottom: none !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  /* Swipe-hint arrow only made sense when this was a horizontal
     carousel; sections now stack vertically on mobile, so it's
     obsolete here and shouldn't float over stacked content. */
  .carousel-cue { display: none !important; }

  .capabilities__grid { gap: 16px; }
  .cap-card { width: 100%; }

  .success-card__stack { gap: 16px; }
  .success-card--compact { width: 100%; }

  .footer-columns { grid-template-columns: 1fr 1fr; padding: 48px 24px; }
  .footer-cta { padding: 56px 24px 64px; }
  .footer-bottom { flex-direction: column; align-items: flex-start; padding: 24px 24px 32px; }

  /*
   * The longest rotating phrase (“Experienced Operators”) wraps on
   * phones. Remove the desktop character-width restriction and reserve
   * a fixed 12px buffer for the italic overhang on every wrapped line.
   */
  .hero__rotator {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 84px;
    overflow: visible !important;
  }

  .rotator__word {
    display: block;
    width: max-content;
    max-width: calc(100% - 12px) !important;
    box-sizing: content-box;
    padding-right: 12px !important;
    overflow: visible !important;
    font-size: clamp(26px, 8vw, 34px);
    white-space: normal;
    line-height: 1.2;
  }

  /* These were fixed desktop values (44px / 112px) with no mobile
     override, pushing the CTA buttons below the fold on short phone
     viewports. */
  .hero__rotator-underline { margin-top: 24px; }
  .hero__ctas { margin-top: 40px; }
}

@media (max-width: 560px) {
  .hero__ctas, .footer-cta .hero__ctas { flex-direction: column; align-items: stretch; }
  .btn { justify-content: center; }
  .impact { padding-bottom: 64px; }
  .impact .container { padding-top: 48px; }
  .capabilities { padding: 72px 0 64px; }
  .brand-statement { padding: 72px 0; }
  .cs-transition { padding: 72px 0; }
  .client-success { padding: 72px 0 56px; }
  .footer-columns { grid-template-columns: 1fr; padding: 40px 24px; }
  .success-card--featured { padding: 28px; min-height: 360px; }
}

/* =========================================================
   INTRO SPLASH SCREEN (shows on every visit)
   Full-screen navy gate over the hero background. Visible by
   default (no hidden attribute, no pre-paint script needed).
   Dismisses only via the arrow button or a scroll gesture —
   not click-anywhere — so it doesn't disappear too eagerly.
   ========================================================= */
.splash {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 32px 24px;
  background-color: var(--navy);
  background-image: url('/assets/hero-bg.webp');
  background-size: cover;
  background-position: center;
  opacity: 1;
  transition: opacity 0.65s var(--ease-out);
}
/* Locks page scroll while the splash is up — JS toggles this on body */
body.splash-active { overflow: hidden; }
/* Fade-out state applied on interaction */
.splash.is-leaving { opacity: 0; }
/* Fully removed from the layer/interaction tree once faded */
.splash[hidden] { display: none; }

.splash__logo {
  width: 300px;
  max-width: 72vw;
  height: auto;
  margin-bottom: 64px;
  opacity: 0;
  animation: splashFadeUp 0.9s var(--ease-out) 0.15s forwards;
}
.splash__statement {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(20px, 3vw, 34px);
  line-height: 1.35;
  color: var(--white);
  max-width: 1100px;
  margin: 0 auto;
  opacity: 0;
  animation: splashFadeUp 0.9s var(--ease-out) 0.35s forwards;
}
.splash__statement .accent { color: var(--blue); }
/* Mobile: sentences flow as normal inline text and wrap wherever
   the viewport naturally breaks them. */
.splash__statement-line { display: inline; }
/* Tablet and up: force exactly one sentence per line. */
@media (min-width: 561px) {
  .splash__statement-line { display: block; }
}

.splash__value {
  margin-top: 44px;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: clamp(12px, 1.4vw, 15px);
  letter-spacing: 0.32em;
  color: var(--blue);
  text-transform: uppercase;
  opacity: 0;
  animation: splashFadeUp 0.9s var(--ease-out) 0.55s forwards;
}
.splash__value .sep {
  opacity: 0.5;
  margin: 0 6px;
  font-weight: 400;
}

.splash__arrow {
  margin-top: 76px;
  padding: 10px;
  border: none;
  background: none;
  color: var(--blue);
  cursor: pointer;
  opacity: 0;
  animation: splashFadeUp 0.9s var(--ease-out) 0.75s forwards,
             splashFloat 2.1s ease-in-out 1.6s infinite;
}
.splash__arrow:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 4px;
  border-radius: 50%;
}

@keyframes splashFadeUp {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes splashFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(10px); }
}

@media (prefers-reduced-motion: reduce) {
  .splash__logo, .splash__statement, .splash__value, .splash__arrow {
    animation: none;
    opacity: 1;
  }
}

@media (max-width: 560px) {
  .splash__logo { width: 220px; margin-bottom: 44px; }
  .splash__statement { font-size: clamp(19px, 6vw, 26px); }
  .splash__value { margin-top: 32px; letter-spacing: 0.24em; }
  .splash__arrow { margin-top: 52px; }
}

/* =========================================================
   CAPABILITY PAGES  (append-only — no rule above is modified)
   Reuses .hero, .impact, .brand-statement, .client-success,
   .success-card, nav & footer verbatim. New classes below only.
   ========================================================= */

/* --- Capability hero: reuses .hero + the homepage hero-bg.webp treatment --- */
.capability-hero {
  height: 78vh;
  justify-content: center;
}
/* Same mirrored hero-bg.webp as .hero--home, sitting behind the glow blobs
   and particles (image is additive, not a replacement of those layers). */
.capability-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: url('/assets/hero-bg.webp');
  background-size: cover;
  background-position: center;
  transform: scaleX(-1);
}
.capability-hero .hero__content {
  max-width: 1536px;
  padding-top: 150px;
  padding-bottom: 110px;
}
.capability-hero__title {
  font-family: var(--font-display);
  font-size: clamp(28px, 3.6vw, 48px);
  font-weight: 600;
  line-height: 1.12;
  color: var(--white);
  margin-bottom: 20px;
  opacity: 0;
  animation: fadeUp 0.8s var(--ease-out) 0.3s forwards;
}
.capability-hero__title .accent {
  background: linear-gradient(100deg, #7CE6FF, var(--hero-accent) 60%, #0FB8DE);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.capability-hero__lead {
  font-family: var(--font-body);
  font-size: clamp(17px, 1.8vw, 22px);
  color: rgba(255, 255, 255, 0.82);
  line-height: 1.55;
  max-width: 640px;
  opacity: 0;
  animation: fadeUp 0.8s var(--ease-out) 0.45s forwards;
}

/* --- Related Client Success: reuses .client-success shell + .success-card --- */
.related-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  max-width: 860px;
  margin: 0 auto;
}
.related-grid .success-card--compact {
  padding: 30px 60px 30px 30px;
}

@media (max-width: 860px) {
  .capability-hero { height: auto; min-height: auto; }
  .capability-hero .hero__content { padding-top: 120px; padding-bottom: 56px; }
  .related-grid .success-card--compact { padding: 26px 52px 26px 26px; }
}

/* =========================================================
   CLIENT SUCCESS  (append-only)
   Reuses hero, .impact, .success-card, nav & footer.
   ========================================================= */
.cs-stories { background: var(--off-white); padding: 100px 0 96px; }
.cs-view-all-wrap { text-align: center; }
.cs-view-all-wrap .btn { margin-top: 40px; }
.cs-view-all-wrap .btn--ghost {
  background: transparent;
  color: var(--navy);
  border: 1px solid var(--border);
}
.cs-view-all-wrap .btn--ghost:hover {
  background: var(--navy);
  color: var(--white);
  border-color: var(--navy);
}
.cs-stories__headline {
  font-family: var(--font-display);
  font-size: clamp(30px, 3.6vw, 44px);
  font-weight: 800;
  color: var(--ink-900);
  line-height: 1.2;
  margin-bottom: 32px;
}

/* Filter pills — same button/nav language */
.cs-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 40px;
}
.cs-filter__pill {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  color: var(--slate);
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 24px;
  padding: 10px 20px;
  transition: color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.cs-filter__pill:hover { color: var(--blue); border-color: var(--blue); transform: translateY(-1px); }
.cs-filter__pill.is-active {
  color: var(--white);
  background: linear-gradient(135deg, var(--blue-500), var(--blue-700));
  border-color: transparent;
  box-shadow: 0 8px 20px -8px rgba(0,168,198,0.5);
}

/* 3-col desktop grid of case-study cards */
.cs-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.cs-grid__empty { text-align: center; color: var(--muted-label); padding: 40px 0; font-size: 15px; }
.cs-viewmore-wrap { display: flex; justify-content: center; margin-top: 40px; }
.cs-viewmore-wrap .btn--ghost {
  color: var(--navy);
  border-color: var(--border);
}
.cs-viewmore-wrap .btn--ghost:hover {
  background: var(--blue-light);
  border-color: var(--blue);
  color: var(--blue-600);
}
.cs-stories__intro {
  font-size: 16px;
  color: var(--slate);
  max-width: 560px;
  margin-top: -12px;
  margin-bottom: 32px;
}
.cs-transition {
  background: var(--white);
  padding: 110px 0;
  text-align: center;
}
.cs-transition__text {
  font-family: var(--font-display);
  font-size: clamp(26px, 3.4vw, 40px);
  font-weight: 700;
  line-height: 1.4;
  color: var(--ink-900);
  max-width: 760px;
  margin: 0 auto;
}
.cs-transition__text .accent { color: var(--blue); font-weight: 700; }

/* Case-study card — light variant of .success-card */
.success-card--case {
  position: relative;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 26px 24px 20px;
  display: flex;
  flex-direction: column;
  min-height: 260px;
}
.success-card--case:hover {
  transform: translateY(-6px);
  border-color: rgba(0,168,198,0.35);
  box-shadow: 0 20px 40px -18px rgba(7,20,60,0.28);
}
.cs-card__tags {
  display: flex;
  align-self: flex-start;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}
.cs-card__tags .cs-card__tag { margin-bottom: 0; }
.cs-card__tag {
  align-self: flex-start;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--blue);
  background: var(--blue-light);
  border-radius: 6px;
  padding: 5px 10px;
  margin-bottom: 18px;
}
.success-card--case .success-card__number {
  color: transparent;
  background: linear-gradient(135deg, var(--blue-500), var(--blue-700));
  -webkit-background-clip: text;
  background-clip: text;
}
.success-card--case .success-card__metric-label { color: var(--muted-metric); margin-bottom: 16px; }
.success-card--case .success-card__title { color: var(--ink-900); margin-bottom: 10px; }
.cs-card__summary {
  font-size: 13.5px;
  color: var(--slate);
  line-height: 1.6;
  flex: 1;
  margin-bottom: 16px;
}
.cs-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--blue);
}
.success-card--case[hidden] { display: none; }
/* Image placeholder for the standalone grid (16:9, matches insight cards).
   Falls back to the branded gradient card body if no image file exists yet. */
.cs-card__media {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  margin: -26px -24px 18px;
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  background: linear-gradient(135deg, var(--blue-light), var(--border));
}
.cs-card__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--dur-slow) var(--ease-out);
}
.success-card--case:hover .cs-card__img { transform: scale(1.05); }

@media (max-width: 1100px) { .cs-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 680px)  { .cs-grid { grid-template-columns: 1fr; } .cs-stories { padding: 40px 0 48px; } }

/* =========================================================
   CAPABILITY PAGE CONTENT  (append-only)
   Perspective · Core Capabilities · Approach · Proven
   ========================================================= */
.cap-perspective { background: var(--navy); padding: 72px 0 60px; }
.cap-perspective__text {
  font-family: var(--font-display);
  max-width: 860px;
}
.cap-perspective__lead {
  display: block;
  font-size: clamp(22px, 2.6vw, 32px);
  font-weight: 500;
  line-height: 1.45;
  color: var(--white);
  margin-bottom: 12px;
}
.cap-perspective__rest {
  display: block;
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.72);
}
.cap-perspective__text .accent { color: var(--blue); }

.cap-caps { background: var(--white); padding: 64px 0; }
.cap-caps__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 40px;
}
.cap-group {
  position: relative;
  background: var(--white);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  padding: 28px 26px;
  overflow: hidden;
  transition: transform var(--dur-med) var(--ease-out), box-shadow var(--dur-med) var(--ease-out), border-color var(--dur-med) var(--ease-out);
}
.cap-group::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--navy-800), var(--navy-950) 70%);
  opacity: 0;
  transition: opacity var(--dur-med) var(--ease-out);
  z-index: 0;
}
.cap-group > * { position: relative; z-index: 1; }
.cap-group:hover,
.cap-group:focus-within {
  transform: translateY(-6px);
  box-shadow: 0 20px 40px -16px rgba(7, 20, 60, 0.35);
  border-color: transparent;
}
.cap-group:hover::before,
.cap-group:focus-within::before { opacity: 1; }
.cap-group__header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}
.cap-group__icon {
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  border-radius: 10px;
  background: var(--blue-light);
  color: var(--blue);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--dur-med) var(--ease-out), color var(--dur-med) var(--ease-out), box-shadow var(--dur-med) var(--ease-out);
}
.cap-group:hover .cap-group__icon,
.cap-group:focus-within .cap-group__icon {
  background: rgba(0, 168, 198, 0.18);
  color: #5FE0F5;
  box-shadow: 0 0 22px rgba(0, 168, 198, 0.4);
}
.cap-group__title {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
  transition: color var(--dur-med) var(--ease-out);
}
.cap-group:hover .cap-group__title,
.cap-group:focus-within .cap-group__title { color: var(--white); }
.cap-group__list { display: flex; flex-direction: column; gap: 11px; }
.cap-group__item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14.5px;
  color: var(--slate);
  line-height: 1.5;
  transition: color var(--dur-med) var(--ease-out);
}
.cap-group:hover .cap-group__item,
.cap-group:focus-within .cap-group__item { color: rgba(255, 255, 255, 0.72); }
.cap-group__item::before {
  content: '';
  flex: 0 0 auto;
  width: 6px; height: 6px;
  margin-top: 8px;
  border-radius: 50%;
  background: var(--blue);
}

.cap-approach { background: var(--white); padding: 64px 0; }

/* Capability sub-pages only: tighter section rhythm + fix the 3-stat
   impact grid (base .impact__grid is hardcoded to 5 columns for the
   homepage's 5 stats; sub-pages only have 3, which left them shoved
   left under a centered headline instead of evenly filling the row). */
.impact--capability { border-top: 1px solid var(--border); }
.impact--capability .container { padding-top: 56px; }
.impact--capability .impact__grid {
  grid-template-columns: repeat(3, 1fr);
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
}

/* Our Approach: vertical timeline (small circles, no numbers) replacing
   the earlier prose paragraph and, before that, the numbered step grid. */
.cap-timeline { position: relative; max-width: 760px; margin-top: 32px; }
.cap-timeline::before {
  content: '';
  position: absolute;
  left: 5px;
  top: 6px;
  bottom: 6px;
  width: 1px;
  background: var(--border);
}
.cap-timeline__item {
  position: relative;
  padding-left: 32px;
  margin-bottom: 24px;
}
.cap-timeline__item:last-child { margin-bottom: 0; }
.cap-timeline__dot {
  position: absolute;
  left: 0;
  top: 6px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--white);
  border: 2px solid var(--blue);
}
.cap-timeline__text { font-size: 15.5px; color: var(--charcoal); line-height: 1.6; }
.cap-approach__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 40px;
}
.cap-step {
  position: relative;
  padding: 26px 24px;
  background: var(--off-white);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}
.cap-step__num {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 800;
  color: var(--blue);
  margin-bottom: 12px;
}
.cap-step__text { font-size: 15px; color: var(--charcoal); line-height: 1.55; }

@media (max-width: 1100px) {
  .cap-caps__grid, .cap-approach__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 680px) {
  .cap-caps__grid, .cap-approach__grid { grid-template-columns: 1fr; }
  .cap-perspective, .cap-caps, .cap-approach { padding: 64px 0; }
}

/* Non-numeric capability proof metrics (e.g. "ISO 27001", "Reduced") — same
   gradient number styling, no count-up. */
.impact__number--static { font-size: clamp(26px, 3vw, 40px); }

/* =========================================================
   CLIENT SUCCESS — CASE STUDY DETAIL  (connected layout)
   Two-column: narrative timeline (left) + At a Glance rail (right)
   ========================================================= */
.case-body { background: var(--white); padding: 88px 0 96px; }
.case-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 64px;
  align-items: start;
}
.case-intro { margin-bottom: 8px; }

/* Executive takeaway — homepage display scale */
.case-exec {
  font-family: var(--font-display);
  font-size: clamp(26px, 3.2vw, 40px);
  font-weight: 700;
  line-height: 1.25;
  color: var(--ink-900);
  margin: 14px 0 40px;
  max-width: 760px;
}

/* Timeline spine connecting the story cards */
.case-track { position: relative; padding-left: 72px; }
.case-track::before {
  content: '';
  position: absolute;
  left: 27px; top: 8px; bottom: 8px;
  width: 2px;
  background: linear-gradient(180deg, var(--blue), rgba(0,168,198,0.25));
}
.case-node { position: relative; margin-bottom: 24px; }
.case-node:last-child { margin-bottom: 0; }
.case-node__num {
  position: absolute;
  left: -72px; top: 24px;
  width: 54px; height: 54px;
  border-radius: 50%;
  background: var(--white);
  border: 2px solid var(--blue);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 16px;
  color: var(--blue);
  z-index: 1;
}
.case-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-left: 3px solid var(--blue);
  border-radius: var(--radius-md);
  padding: 28px 30px;
  box-shadow: 0 10px 30px -20px rgba(7,20,60,0.25);
}
.case-card__label {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 16px;
}
.case-list { display: flex; flex-direction: column; gap: 12px; }
.case-list__item {
  display: flex; align-items: flex-start; gap: 12px;
  font-size: 16px; color: var(--slate); line-height: 1.55;
}
.case-list__item::before {
  content: ''; flex: 0 0 auto; width: 6px; height: 6px; margin-top: 8px;
  border-radius: 50%; background: var(--blue);
}

/* Outcome sits INSIDE the story flow (not a separate band) */
.case-card--outcome .case-outcome__num {
  font-family: var(--font-display);
  font-size: clamp(40px, 4.5vw, 56px);
  font-weight: 800;
  line-height: 1;
  margin-bottom: 10px;
  background: linear-gradient(135deg, var(--blue-500), var(--blue-700));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.case-card--outcome .case-outcome__desc { font-size: 15.5px; color: var(--slate); }

/* Murkez Perspective — navy accent card closing the story */
.case-perspective {
  margin-top: 24px;
  background: radial-gradient(140% 130% at 12% 0%, var(--navy-700) 0%, var(--navy-900) 45%, var(--navy-950) 100%);
  border-radius: var(--radius-md);
  padding: 40px 44px;
  color: var(--white);
}
/* Full-width variant: spans the whole page container (previously
   confined to the narrower case-main column), so its left/right edges
   now line up with the section above it (e.g. Executive Takeaway) for
   visual balance down the page. Navy card look kept as-is. */
.case-perspective--full { margin-top: 40px; }
.case-perspective__label {
  font-size: 13px; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--cyan-300); margin-bottom: 16px;
}
.case-perspective__text {
  font-family: var(--font-display);
  font-size: clamp(17px, 1.6vw, 20px);
  font-weight: 500;
  line-height: 1.5;
}

/* Right rail — At a Glance (sticky) */
.case-rail { position: sticky; top: 108px; }
.case-rail__eyebrow {
  font-size: 13px; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--blue);
  padding-bottom: 14px; margin-bottom: 4px; position: relative;
}
.case-rail__eyebrow::after {
  content: ''; position: absolute; left: 0; bottom: 0; width: 46px; height: 2px;
  background: linear-gradient(90deg, currentColor, transparent);
}
.case-meta__item {
  display: flex; align-items: center; gap: 16px;
  padding: 22px 0;
  border-bottom: 1px solid var(--border);
}
.case-meta__item:last-child { border-bottom: none; }
.case-meta__icon {
  flex: 0 0 auto; width: 48px; height: 48px; border-radius: 10px;
  background: var(--blue-light); color: var(--blue);
  display: flex; align-items: center; justify-content: center;
}
.case-meta__label { font-size: 13px; color: var(--muted-label); margin-bottom: 3px; }
.case-meta__value { font-family: var(--font-display); font-size: 16px; font-weight: 700; color: var(--ink-900); }
.case-meta__item--list { align-items: flex-start; }
.case-meta__item--list .case-meta__icon { margin-top: 2px; }
.case-meta__list { list-style: none; margin: 4px 0 0; padding: 0; }
.case-meta__list li {
  font-family: var(--font-display);
  font-size: 14.5px;
  font-weight: 600;
  color: var(--ink-900);
  line-height: 1.5;
}

.case-back { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--blue); margin-top: 48px; }

@media (max-width: 960px) {
  .case-layout { grid-template-columns: 1fr; gap: 48px; }
  .case-rail { position: static; }
}
@media (max-width: 620px) {
  .case-track { padding-left: 56px; }
  .case-track::before { left: 19px; }
  .case-node__num { left: -56px; width: 40px; height: 40px; font-size: 14px; }
  .case-body { padding: 56px 0 64px; }
  .case-perspective { padding: 32px 28px; }
}

/* Rail eyebrow now uses the shared .eyebrow .eyebrow--dark (shimmer). */
/* Align the rail down to the first story card (past the takeaway block). */
/* rail aligns naturally: takeaway is full-width above the columns */

.case-rail__sep {
  height: 1px;
  background: var(--border);
  margin: 28px 0 24px;
}
.case-rail__filter-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted-label);
  margin-bottom: 16px;
}
.case-rail__pills { display: flex; flex-wrap: wrap; gap: 8px; }
.case-rail__pill {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  color: var(--slate);
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 22px;
  padding: 8px 16px;
  transition: color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.case-rail__pill:hover { color: var(--blue); border-color: var(--blue); transform: translateY(-1px); }
.case-rail__pill.is-active {
  color: var(--white);
  background: linear-gradient(135deg, var(--blue-500), var(--blue-700));
  border-color: transparent;
  box-shadow: 0 8px 20px -8px rgba(0,168,198,0.5);
}

@media (max-width: 960px) {
  .case-rail { padding-top: 0; }
}


/* --- Extended case-study: situation para, business-impact para, multi-metric tile --- */
.case-situation {
  font-size: 16px;
  color: var(--slate);
  line-height: 1.6;
  margin-bottom: 16px;
}
.case-business {
  font-size: 16px;
  color: var(--slate);
  line-height: 1.6;
  margin-top: 16px;
}
/* Outcome tile holding multiple metrics: reduce size + thin separators */
.case-metrics {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 24px;
}
.case-metrics__item {
  flex: 1 1 0;
  min-width: 140px;
  padding: 0 20px 0 0;
  border-top: none;
  border-left: 1px solid var(--border);
  padding-left: 20px;
}
.case-metrics__item:first-child { border-left: none; padding-left: 0; }
@media (max-width: 640px) {
  .case-metrics { flex-direction: column; }
  .case-metrics__item { border-left: none; border-top: 1px solid var(--border); padding: 16px 0 0; }
  .case-metrics__item:first-child { border-top: none; padding-top: 0; }
}
.case-metrics__num {
  font-family: var(--font-display);
  font-weight: 800;
  line-height: 1;
  background: linear-gradient(135deg, var(--blue-500), var(--blue-700));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  margin-bottom: 6px;
}
.case-metrics__desc { font-size: 14px; color: var(--slate); line-height: 1.45; }
/* Font scales down as count grows */
.case-metrics--1 .case-metrics__num { font-size: clamp(40px, 4.5vw, 56px); }
.case-metrics--2 .case-metrics__num { font-size: 40px; }
.case-metrics--3 .case-metrics__num { font-size: 34px; }
.case-metrics--4 .case-metrics__num { font-size: 30px; }

/* Related Capabilities — same treatment as Browse by Area */
.case-rail__caps { display: flex; flex-wrap: wrap; gap: 8px; }
.case-rail__cap {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  color: var(--slate);
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 22px;
  padding: 8px 16px;
  transition: color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.case-rail__cap:hover {
  color: var(--white);
  background: linear-gradient(135deg, var(--blue-500), var(--blue-700));
  border-color: transparent;
  transform: translateY(-1px);
}

/* =========================================================
   HOMEPAGE REFINEMENTS (intro sequence, left-side motion,
   dark-section particles, symmetrical client-success grid)
   ========================================================= */

/* --- Intro handoff: hold nav + hero content until the splash finishes,
   then cross-fade. The splash logo fades out as the real nav logo fades
   in (a handoff, not a literal position-morph — reliable at every size). */
body.has-intro .site-nav { opacity: 0; pointer-events: none; }
body.has-intro .hero__tagline,
body.has-intro .hero__lead,
body.has-intro .hero__rotator,
body.has-intro .hero__rotator-underline,
body.has-intro .hero__ctas { animation-play-state: paused; }

body.intro-done .site-nav {
  opacity: 1;
  pointer-events: auto;
  transition: opacity 0.6s var(--ease-out);
}
body.intro-done .hero__tagline,
body.intro-done .hero__lead,
body.intro-done .hero__rotator,
body.intro-done .hero__rotator-underline,
body.intro-done .hero__ctas { animation-play-state: running; }

/* Splash uses the standard hero treatment (navy + hero-bg + glows +
   particles). Tame the glow behind the centered logo so the blue K reads. */
.splash__bg { position: absolute; inset: 0; z-index: 0; }
.splash .hero__glow { opacity: 0.10; }
.splash .hero__glow--1 { top: -6%; left: 62%; }   /* pulled off-centre, away from the logo */
.splash > .splash__logo,
.splash > .splash__statement { position: relative; z-index: 1; }

@media (prefers-reduced-motion: reduce) {
  body.has-intro .site-nav { opacity: 1; pointer-events: auto; }
  body.has-intro .hero__tagline,
  body.has-intro .hero__lead,
  body.has-intro .hero__rotator,
  body.has-intro .hero__rotator-underline,
  body.has-intro .hero__ctas { animation-play-state: running; }
}

/* --- Left-side hero balance: drifting orb + rising data dots --- */
.hero__orb {
  position: absolute;
  z-index: 0;
  width: 460px;
  height: 460px;
  left: 4%;
  top: 26%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0,168,198,0.26) 0%, rgba(0,168,198,0.10) 45%, transparent 72%);
  filter: blur(34px);
  pointer-events: none;
}
.hero__orb--drift { animation: orbDrift 22s ease-in-out infinite; }
@keyframes orbDrift {
  0%,100% { transform: translate(0,0) scale(1); }
  50%     { transform: translate(26px,-22px) scale(1.06); }
}
.hero__datadots { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.datadot {
  position: absolute;
  width: 3px; height: 3px;
  border-radius: 50%;
  background: var(--cyan-300);
  box-shadow: 0 0 5px rgba(0,168,198,0.45);
  opacity: 0.32;
  animation: dataRise linear infinite;
}
@keyframes dataRise {
  0%   { transform: translateY(24px); opacity: 0; }
  12%  { opacity: 0.38; }
  88%  { opacity: 0.24; }
  100% { transform: translateY(-150px); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .hero__orb--drift { animation: none; }
  .datadot { display: none; }
}

/* --- Particles inside dark sections (client success + footer) --- */
.client-success { position: relative; overflow: hidden; }
.client-success__bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.client-success .container { position: relative; z-index: 1; }
.client-success__bg .hero__particles,
.site-footer__bg .hero__particles { position: absolute; inset: 0; }

/* Thin gradient seam so Client Success and the footer (both dark) don't
   read as one continuous block. */
.client-success__seam {
  display: block;
  position: relative;
  z-index: 1;
  height: 1px;
  margin-top: 24px;
  background: linear-gradient(90deg, transparent, rgba(0,168,198,0.35) 50%, transparent);
}

/* --- Symmetrical 4-card client-success grid (homepage) --- */
.client-success__grid--four {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin-bottom: 40px;
  align-items: stretch;
}
.success-card--engagement {
  display: flex;
  flex-direction: column;
  background: rgba(10, 22, 55, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-lg);
  overflow: hidden;
  min-height: 100%;
}
.success-card--engagement:hover {
  transform: translateY(-4px);
  border-color: rgba(0, 168, 198, 0.35);
  box-shadow: 0 18px 40px -16px rgba(0, 168, 198, 0.45);
}
/* Image placeholder: branded cover art shows until a real photo is added */
.success-card__media {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  background:
    linear-gradient(135deg, rgba(0,168,198,0.16), rgba(8,18,49,0.65)),
    var(--navy-900);
  overflow: hidden;
}
.success-card__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur-slow) var(--ease-out);
}
.success-card--engagement:hover .success-card__img { transform: scale(1.05); }
.success-card__glyph {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(0, 168, 198, 0.55);
}
.success-card__img + .success-card__glyph { display: none; } /* hidden when a real image is present */
.success-card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 26px 24px 24px;
}
.success-card--engagement .success-card__number {
  font-size: clamp(28px, 2.4vw, 34px);
  margin-bottom: 8px;
}
.success-card--engagement .success-card__metric-label {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.82);
  margin-bottom: 16px;
}
.success-card--engagement .success-card__title {
  font-size: 17px;
  font-weight: 700;
  line-height: 1.34;
  margin-bottom: 18px;
  flex: 1;
}
.success-card--engagement .success-card__cta { margin-top: auto; }
.client-success__viewall {
  display: flex;
  justify-content: center;
  margin-bottom: 56px;
}
.client-success__viewall .btn--ghost { color: var(--cyan-300); border-color: rgba(0,168,198,0.4); }
.client-success__viewall .btn--ghost:hover { background: rgba(0,168,198,0.1); border-color: rgba(0,168,198,0.7); }

/* Responsive: 4 -> 2 -> 1 */
@media (max-width: 1100px) {
  .client-success__grid--four { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 860px) {
  .client-success__grid--four {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }
  .success-card--engagement { width: 100%; }
}

/* =========================================================
   CLIENT SUCCESS — DETAIL PAGE FEATURED IMAGE
   Mirrors the Insights article-featured pattern (21:9 hero,
   branded cover fallback until a real image file exists).
   ========================================================= */
.case-featured { margin-top: -40px; position: relative; z-index: 3; }
.case-featured__frame {
  position: relative;
  aspect-ratio: 21 / 9;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--border);
  box-shadow: 0 40px 80px -40px rgba(7, 20, 60, 0.55);
}
.case-featured__frame .cover {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--navy-800), var(--navy-950) 70%);
  z-index: 1;
}
.case-featured__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 2;
  display: block;
}
@media (max-width: 860px) {
  .case-featured__frame { aspect-ratio: 16 / 9; }
}

/* Capabilities sub-pages: "Our Approach" prose summary (replaces the
   previous 6-step numbered grid per client simplification request). */
.cap-approach__summary {
  font-size: 17px;
  line-height: 1.75;
  color: var(--slate);
  max-width: 780px;
}

/* =========================================================
   LEGAL PAGES (Privacy, Terms, Cookies)
   ========================================================= */
.hero--legal { min-height: 46vh; display: flex; align-items: center; }
.hero--legal .hero__content { padding: 140px 48px 60px; }
.legal-page { background: var(--white); padding: 90px 0 110px; }
.legal-page__container { max-width: 820px; }
.legal-page__updated {
  font-size: 13px;
  color: var(--muted-label);
  margin-bottom: 40px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--border);
}
.legal-section { margin-bottom: 36px; }
.legal-section__heading {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 700;
  color: var(--ink-900);
  margin-bottom: 12px;
}
.legal-section__body {
  font-size: 15.5px;
  color: var(--slate);
  line-height: 1.75;
  margin-bottom: 12px;
}
.legal-section__list {
  margin: 0 0 12px;
  padding-left: 22px;
  list-style: disc;
}
.legal-section__list li {
  font-size: 15.5px;
  color: var(--slate);
  line-height: 1.75;
  margin-bottom: 4px;
}
@media (max-width: 640px) {
  .hero--legal .hero__content { padding: 120px 24px 48px; }
  .legal-page { padding: 64px 0 72px; }
}

/* =========================================================
   MOBILE/TABLET RESPONSIVENESS FIXES
   ========================================================= */

/* --- Shared horizontal-scroll carousel: one card visible + arrow cue ---
   Applies to Impact stats, Capabilities cards, Client Success engagement
   cards, and About operational leadership cards (all mobile/tablet). */
.carousel-wrap { position: relative; }
.carousel-cue {
  position: absolute;
  top: 50%;
  right: 6px;
  transform: translateY(-50%);
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(0, 168, 198, 0.14);
  color: var(--blue);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 2;
  animation: cuePulse 1.8s ease-in-out infinite;
}
.carousel-cue--dark { background: rgba(255, 255, 255, 0.14); color: var(--white); }
@keyframes cuePulse {
  0%, 100% { transform: translateY(-50%) translateX(0); opacity: 0.85; }
  50% { transform: translateY(-50%) translateX(3px); opacity: 1; }
}
@media (min-width: 861px) { .carousel-cue { display: none; } }
@media (prefers-reduced-motion: reduce) { .carousel-cue { animation: none; } }

@media (max-width: 860px) {
  /* One card fully visible at rest, small peek of the next to hint scroll */
  .impact__stat { flex: 0 0 86%; }
  .cap-card { flex: 0 0 86%; }
  .success-card--engagement { flex: 0 0 86%; }
}

/* =========================================================
   HOMEPAGE HERO — RIGHT-SIDE VISUAL (Concept 5: Convergence)
   Complexity converging into simplicity, mirrors the left-side
   orb/data-dots treatment to balance the hero on desktop/laptop.
   ========================================================= */
.hero__visual--flux {
  position: absolute;
  right: 0;
  bottom: 4%;
  width: min(54vw, 1060px);
  height: min(80vh, 780px);
  z-index: 1;
  pointer-events: none;
  overflow: visible;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 15%, #000 93%, transparent 100%);
          mask-image: linear-gradient(to right, transparent 0, #000 15%, #000 93%, transparent 100%);
}
.hero__visual--flux .flux-svg { width: 100%; height: 100%; display: block; overflow: visible; }

@media (max-width: 1500px) { .hero__visual--flux { width: 50vw; } }
@media (max-width: 1400px) { .hero__visual--flux { width: 45vw; } }
@media (max-width: 1300px) { .hero__visual--flux { width: 41vw; } }
@media (max-width: 1120px) { .hero__visual--flux { width: 52vw; opacity: 0.75; } }
@media (max-width: 1024px) { .hero__visual--flux { width: 60vw; opacity: 0.7; } }
@media (max-width: 768px)  { .hero__visual--flux { display: none; } }

/* =========================================================
   INNER-PAGE HERO BADGE (Simplify. Solve. Scale.)
   Fills the space left by removed CTA buttons on inner pages
   that don't repeat the nav's CTA. Plain text, no border/fill,
   matches the homepage tagline exactly except SCALE in cyan.
   ========================================================= */
.hero__badge {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.32em;
  color: var(--white);
  margin-top: 40px;
}
.hero__badge .accent { color: var(--blue); }

/* =========================================================
   HERO DIAGRAM BRAND MARK (approved client update)
   Replaces the plain center dot in each hero flux diagram with
   the Murkez brand mark plus a soft pulsing cyan glow.
   ========================================================= */
.brandmark-glow {
  transform-box: fill-box;
  transform-origin: center;
  animation: brandmarkGlowPulse 4.5s ease-in-out infinite;
}
@keyframes brandmarkGlowPulse {
  0%, 100% { opacity: 0.55; transform: scale(0.94); }
  50%      { opacity: 0.95; transform: scale(1.08); }
}
.brandmark-in {
  opacity: 1;
}


/* =========================================================
   iOS / in-app-browser mobile navigation stability
   ========================================================= */
.mobile-menu[hidden] {
  display: none !important;
}

.nav__toggle {
  -webkit-appearance: none;
  appearance: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.nav__toggle span {
  flex: 0 0 auto;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transform: none;
  opacity: 1;
}

/* Keep the header control as a consistent hamburger. The off-canvas panel
   already has its own close button, so morphing the header icon is unnecessary
   and avoids an intermittent three-line/star rendering bug in iPhone Safari. */
.nav__toggle[aria-expanded="true"] span:nth-child(1),
.nav__toggle[aria-expanded="true"] span:nth-child(2),
.nav__toggle[aria-expanded="true"] span:nth-child(3) {
  transform: none !important;
  opacity: 1 !important;
}

.mobile-menu {
  height: 100vh;
  height: 100dvh;
  min-height: 100svh;
  max-height: 100dvh;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding-top: max(100px, calc(76px + env(safe-area-inset-top)));
  padding-right: max(32px, env(safe-area-inset-right));
  padding-bottom: max(32px, env(safe-area-inset-bottom));
}

.mobile-menu__close {
  top: max(24px, env(safe-area-inset-top));
  right: max(24px, env(safe-area-inset-right));
  -webkit-appearance: none;
  appearance: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

html.mobile-nav-open,
body.mobile-nav-open {
  overflow: hidden !important;
  overscroll-behavior: none;
}

body.mobile-nav-open {
  width: 100%;
}


/* =========================================================
   iPhone Safari instant mobile-menu response
   ========================================================= */
@media (max-width: 860px) {
  .mobile-menu {
    display: flex;
    visibility: hidden;
    pointer-events: none;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
    transition: transform 160ms cubic-bezier(0.16, 1, 0.3, 1), visibility 0s linear 160ms;
    -webkit-transition: -webkit-transform 160ms cubic-bezier(0.16, 1, 0.3, 1), visibility 0s linear 160ms;
    will-change: transform;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    contain: layout paint;
  }

  .mobile-menu.is-open {
    visibility: visible;
    pointer-events: auto;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    transition-delay: 0s;
    -webkit-transition-delay: 0s;
  }
}

/* =========================================================
   iOS-ONLY PERFORMANCE FIX (iPhone)
   Root cause of the reported "slow load" + "menu flickers
   open/closed" on iPhone: heavy filter:blur() glow blobs and a
   continuously-animated background-position gradient are costly
   for WebKit's compositor to paint/repaint, and that jank was
   making the mobile menu's open/close transition and its tap
   target feel unstable on iPhone specifically.

   Scoped narrowly so Android, iPad, and desktop are completely
   unaffected:
   - `-webkit-touch-callout` is unique to WebKit (Safari/iOS
     WebView), so this never matches Chrome/Firefox/Android.
   - `-webkit-touch-callout` is also recognized by desktop Safari
     even though it's a no-op there, so max-width: 600px is added
     as a second gate — this excludes desktop Safari and iPad
     (smallest iPad viewport is 744px+) while covering every
     iPhone size (largest iPhone viewport is 430px).
   ========================================================= */
@supports (-webkit-touch-callout: none) {
  @media (max-width: 600px) {
    /* Lighter blur radius = far cheaper to rasterize, same soft-glow look. */
    .hero__glow { filter: blur(36px); }
    .hero__orb { filter: blur(16px); }

    /* Freeze the footer's continuously-animated background-position —
       animating background-position isn't GPU-composited, so WebKit has
       to repaint the full gradient every frame indefinitely. */
    .site-footer { animation: none; background-position: 0% 0%; }
    .hero--home::before { animation: none; }

    /* Give the slide-in mobile menu its own GPU layer so the open/close
       transform transition doesn't compete with the above for a paint,
       which is what was producing the rapid appear/disappear flicker. */
    .mobile-menu {
      will-change: transform;
      -webkit-backface-visibility: hidden;
      transform: translateX(100%) translateZ(0);
    }
    .mobile-menu.is-open { transform: translateX(0) translateZ(0); }
  }
}


/* =========================================================
   MOBILE SPLASH + OUTSIDE-TAP MENU CLOSE (v7.0.3)
   Mobile-only presentation: keep the two brand statements on exactly two
   lines and scale the splash logo to leave balanced room on narrow phones.
   The backdrop occupies only the area outside the navigation panel and closes
   the menu when tapped, without changing the panel design.
   ========================================================= */
@media (max-width: 860px) {
  .splash__logo {
    width: min(54vw, 190px) !important;
    max-width: 190px !important;
    margin-bottom: 32px !important;
  }

  .splash__statement {
    width: calc(100vw - 24px) !important;
    max-width: none !important;
    padding-inline: 0 !important;
    font-size: clamp(14px, 4.4vw, 18.75px) !important;
    line-height: 1.62 !important;
    text-align: center !important;
  }

  .splash__statement-line {
    display: block !important;
    white-space: nowrap !important;
  }

  .mobile-menu-backdrop {
    position: fixed !important;
    inset: 0 !important;
    z-index: 249 !important;
    display: block !important;
    border: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    -webkit-tap-highlight-color: transparent !important;
    touch-action: manipulation !important;
  }

  .mobile-menu-backdrop.is-open {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }

  .mobile-menu {
    z-index: 250 !important;
  }
}

/* =========================================================
   EXPERIENCED OPERATORS — FINAL CROSS-BROWSER FIX V19

   Root cause:
   The heading requested only the normal Plus Jakarta Sans faces while
   applying font-style: italic in CSS. Safari synthesized the slant and
   used incorrect right-side glyph metrics, clipping the final “d”.

   index.html now requests the real Plus Jakarta Sans 800 italic face.
   font-synthesis:none prevents a browser from recreating fake italics.

   Desktop: Experienced Operators stays on one line.
   Mobile: Experienced and Operators are separate fixed lines.
   ========================================================= */
.hero--home .rotator__word {
  font-family: var(--font-display) !important;
  font-style: italic !important;
  font-weight: 800 !important;
  font-synthesis: none !important;
  overflow: visible !important;
}

.hero--home .rotator__word--experienced {
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: baseline !important;
  width: max-content !important;
  max-width: none !important;
  padding-inline-end: 0.35em !important;
  overflow: visible !important;
}

.hero--home .rotator__word--experienced .rotator__line {
  display: inline-block !important;
  width: auto !important;
  max-width: none !important;
  padding-inline-end: 0.2em !important;
  overflow: visible !important;
  font: inherit !important;
  font-synthesis: none !important;
}

.hero--home
  .rotator__word--experienced
  .rotator__line--operators::before {
  content: " ";
  white-space: pre;
}

@media (max-width: 860px) {
  .hero--home .hero__rotator {
    width: 100% !important;
    max-width: 100% !important;
    overflow: visible !important;
  }

  .hero--home .rotator__word--experienced {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    width: max-content !important;
    max-width: calc(100% - 20px) !important;
    padding-inline-end: 20px !important;
    overflow: visible !important;
    white-space: normal !important;
  }

  .hero--home .rotator__word--experienced .rotator__line {
    display: block !important;
    flex: 0 0 auto !important;
    width: max-content !important;
    max-width: none !important;
    padding-inline-end: 0.35em !important;
    overflow: visible !important;
    white-space: nowrap !important;
  }

  .hero--home
    .rotator__word--experienced
    .rotator__line--operators::before {
    content: "" !important;
  }
}

/*
 * WebKit fallback:
 * Use a solid cyan fill instead of transparent gradient clipping.
 * The real italic face remains active, so Safari receives correct glyph
 * metrics and no synthetic-slant clipping. Other browsers keep the gradient.
 */
@supports (-webkit-touch-callout: none) {
  .hero--home .rotator__word,
  .hero--home .rotator__word .rotator__line {
    background: none !important;
    -webkit-background-clip: border-box !important;
    background-clip: border-box !important;
    -webkit-text-fill-color: var(--hero-accent, #18d4ff) !important;
    color: var(--hero-accent, #18d4ff) !important;
    text-rendering: optimizeLegibility;
    transform: none !important;
  }
}