/*
Theme Name: Inovantage
Theme URI: https://inovantage.co.uk
Author: Inovantage
Author URI: https://inovantage.co.uk
Description: Bespoke WordPress theme for Inovantage
Version: 2.2.0
Requires at least: 6.0
Requires PHP: 7.4
Tested up to: 6.6
License: Proprietary
License URI: https://inovantage.co.uk
Text Domain: inovantage
Tags: custom-menu, custom-logo, translation-ready, threaded-comments

Inovantage — digital systems that move UK businesses forward. This theme
carries the Inovantage blue technology palette, led by Luminous Cyan with
Electric Blue as the supporting technology colour, and preserves the approved
navigation, typography, section spacing,
hero illustrations, the homepage orbital hero, the Services orbital hero,
service cards, Solutions workflow illustrations, Articles & Guides content,
About content, company information, Facebook link and legal content from the
approved static website design.
*/

:root {
  /* Palette — the approved Inovantage blue technology system. Nothing outside
     this block should introduce a new colour literal. */
  --color-void-navy: #07121f;
  --color-deep-ocean: #0b1a2b;
  --color-cobalt-core: #0b3d9c;
  --color-electric-blue: #126bff;
  --color-luminous-cyan: #00e5ff;
  --color-glacier-ice: #e6f2ff;
  --color-silver-mist: #c9d6e6;
  --color-steel-blue: #1c2f4a;

  /* Semantic tokens. Components reference these, never the palette directly,
     so a surface can be retuned in one place. */
  --background-primary: var(--color-void-navy);
  --background-secondary: var(--color-deep-ocean);
  --surface-elevated: var(--color-steel-blue);
  --background-light: var(--color-glacier-ice);
  --text-primary: #ffffff;
  --text-secondary: var(--color-silver-mist);
  --text-muted: #93a6bc;
  --text-on-light: var(--color-void-navy);
  --text-body-on-light: var(--color-steel-blue);

  /* Brand hierarchy. Luminous Cyan is the identity colour and carries the
     primary emphasis; Electric Blue sits behind it as technological depth;
     Cobalt Core supports both. Navy remains the structural foundation. */
  --brand-primary: var(--color-luminous-cyan);
  --brand-secondary: var(--color-electric-blue);
  --accent: var(--brand-primary);
  --accent-hover: #5cf0ff;
  --accent-secondary: var(--brand-secondary);
  --accent-deep: var(--color-cobalt-core);
  --accent-highlight: var(--color-luminous-cyan);
  /* Label colour for anything filled with solid cyan. Cyan is too luminous to
     carry white text, so dark navy is the only accessible pairing. */
  --on-accent: var(--color-void-navy);

  --link: var(--color-glacier-ice);
  --link-hover: var(--color-luminous-cyan);
  --link-on-light: var(--color-cobalt-core);
  /* Cyan cannot be read as text on Glacier Ice, so light surfaces darken their
     links to Void Navy on hover instead of brightening them. */
  --link-on-light-hover: var(--color-void-navy);
  --border: rgba(201, 214, 230, 0.14);
  --border-strong: rgba(201, 214, 230, 0.28);
  --border-on-light: rgba(28, 47, 74, 0.16);
  --focus: var(--color-luminous-cyan);

  /* Cyan washes carry the primary emphasis: active states, primary hovers and
     highlight edges. */
  --accent-wash: rgba(0, 229, 255, 0.12);
  --accent-wash-soft: rgba(0, 229, 255, 0.07);
  --accent-line: rgba(0, 229, 255, 0.28);
  --accent-ring: rgba(0, 229, 255, 0.55);
  --accent-glow: rgba(0, 229, 255, 0.3);
  --highlight-wash: rgba(0, 229, 255, 0.2);

  /* Electric Blue keeps its own washes for depth, gradients, glows and the
     quieter card tints it is better suited to than cyan. */
  --secondary-wash: rgba(18, 107, 255, 0.14);
  --secondary-wash-soft: rgba(18, 107, 255, 0.08);
  --secondary-glow: rgba(18, 107, 255, 0.32);

  /* Short names for the two text colours and the surfaces, kept because they
     read better inside component rules than the longer semantic names. */
  --ink: var(--text-primary);
  --ink-soft: var(--text-secondary);
  --muted: var(--text-muted);
  --line: var(--border);
  --surface: var(--background-primary);
  --surface-soft: var(--background-secondary);
  --surface-dark: var(--color-deep-ocean);
  --grey: var(--color-silver-mist);
  --success: #3ddc97;
  --max-width: 1180px;
  --narrow-width: 840px;
  --radius-sm: 10px;
  --radius: 18px;
  --radius-lg: 28px;
  --shadow-sm: 0 10px 30px rgba(3, 9, 18, 0.34);
  --shadow: 0 24px 70px rgba(3, 9, 18, 0.46);
  --header-height: 92px;
  --section-space: clamp(26px, 4.2vw, 52px);
  --section-space-tight: clamp(24px, 4vw, 44px);
  --hero-space: clamp(22px, 3.4vw, 40px);
  --content-gap-lg: clamp(16px, 2vw, 26px);
  --content-gap-md: clamp(12px, 1.2vw, 20px);
  --footer-space: clamp(26px, 4vw, 46px);
}

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

html {
  scroll-behavior: smooth;
  text-size-adjust: 100%;
  font-size: clamp(16px, 15.4px + 0.3vw, 17px);
}

body {
  margin: 0;
  color: var(--ink);
  background: var(--surface);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 1rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

body.menu-open {
  overflow: hidden;
}

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

img {
  height: auto;
}

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

button,
a {
  -webkit-tap-highlight-color: transparent;
}

a {
  color: var(--link);
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.18em;
}

a:hover {
  color: var(--link-hover);
}

p,
h1,
h2,
h3,
h4,
ul,
ol,
figure,
blockquote {
  margin-top: 0;
}

h1,
h2,
h3,
h4 {
  color: var(--ink);
  font-weight: 760;
  line-height: 1.1;
  letter-spacing: -0.035em;
  text-wrap: balance;
}

h1 {
  font-size: clamp(2.125rem, 6.25vw, 4.25rem);
}

h2 {
  font-size: clamp(2rem, 4vw, 3.5rem);
}

h3 {
  font-size: clamp(1.2rem, 2vw, 1.55rem);
}

p {
  color: var(--ink-soft);
}

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

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 4px;
}

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

.skip-link {
  position: fixed;
  z-index: 9999;
  top: 12px;
  left: 12px;
  padding: 12px 16px;
  color: #fff;
  background: var(--ink);
  border-radius: 8px;
  transform: translateY(-150%);
}

.skip-link:focus {
  transform: translateY(0);
}

.container {
  width: min(calc(100% - 40px), var(--max-width));
  margin-inline: auto;
}

.container-narrow {
  width: min(calc(100% - 40px), var(--narrow-width));
  margin-inline: auto;
}

.container-article {
  width: min(calc(100% - 40px), 780px);
  margin-inline: auto;
}

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

.section-tight {
  padding-block: var(--section-space-tight);
}

.section-soft {
  background: var(--surface-soft);
}

/* Occasional light contrast surface. Long-form reading uses it so body copy
   stays comfortable rather than being set in light-on-dark for whole articles. */
.section-light {
  color: var(--text-body-on-light);
  background: var(--background-light);
}

.section-light h1,
.section-light h2,
.section-light h3,
.section-light h4,
.section-light strong {
  color: var(--text-on-light);
}

.section-light p,
.section-light li {
  color: var(--text-body-on-light);
}

.section-light a:not(.button) {
  color: var(--link-on-light);
}

.section-light a:not(.button):hover {
  color: var(--link-on-light-hover);
}

.section-light .eyebrow {
  color: var(--link-on-light);
}

/* Cyan is only 1.36:1 against Glacier Ice, so a cyan focus ring would be
   invisible here. Light surfaces take the Cobalt Core ring instead, at 8.56:1. */
.section-light :focus-visible {
  outline-color: var(--color-cobalt-core);
}

.section-light .button-secondary {
  color: var(--text-on-light);
  border-color: var(--color-steel-blue);
}

/* Cyan reads well as a wash behind dark text on a light surface, but not as a
   hairline, so the structural border stays Cobalt Core. */
.section-light .button-secondary:hover {
  color: var(--text-on-light);
  background: rgba(0, 229, 255, 0.16);
  border-color: var(--color-cobalt-core);
}

.section-dark {
  color: #fff;
  background:
    radial-gradient(circle at 15% 20%, rgba(11, 61, 156, 0.4), transparent 34%),
    radial-gradient(circle at 90% 80%, rgba(0, 229, 255, 0.18), transparent 32%),
    var(--surface-dark);
}

.section-dark h2,
.section-dark h3,
.section-dark p,
.section-dark li {
  color: #fff;
}

.section-dark p,
.section-dark li {
  color: rgba(255, 255, 255, 0.74);
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 18px;
  color: var(--accent);
  font-size: 0.78rem;
  font-weight: 780;
  letter-spacing: 0.14em;
  line-height: 1.2;
  text-transform: uppercase;
}

.eyebrow::before {
  width: 28px;
  height: 2px;
  content: "";
  background: currentColor;
}

.section-dark .eyebrow {
  color: var(--accent-highlight);
}

.lede {
  max-width: 720px;
  font-size: clamp(1.1rem, 1.8vw, 1.35rem);
  line-height: 1.65;
}

.section-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 36px;
  margin-bottom: var(--content-gap-lg);
}

.section-heading > div {
  max-width: 760px;
}

.section-heading h2 {
  margin-bottom: 0;
}

.section-heading p:last-child {
  max-width: 650px;
  margin-top: var(--content-gap-md);
  margin-bottom: 0;
}

.button-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 13px 22px;
  /* Solid cyan is far too luminous for white text, so the label is Void Navy:
     12.24:1 against #00E5FF, where white would be 1.54:1. */
  color: var(--on-accent);
  font-weight: 730;
  line-height: 1.1;
  text-decoration: none;
  background: var(--accent);
  border: 1px solid var(--accent);
  border-radius: 999px;
  box-shadow: 0 12px 30px rgba(0, 229, 255, 0.26);
  cursor: pointer;
  transition: transform 180ms ease, background 180ms ease, box-shadow 180ms ease;
}

/* Hover brightens the cyan and layers an Electric Blue glow underneath it, so
   the two brand colours read in their new order rather than swapping. */
.button:hover {
  color: var(--on-accent);
  background: var(--accent-hover);
  border-color: var(--accent-hover);
  box-shadow: 0 16px 34px rgba(0, 229, 255, 0.34), 0 10px 26px var(--secondary-glow);
  transform: translateY(-2px);
}

.button:active {
  transform: translateY(0);
}

.button-secondary {
  color: var(--link);
  background: transparent;
  border-color: rgba(201, 214, 230, 0.4);
  box-shadow: none;
}

.button-secondary:hover {
  color: #fff;
  background: var(--accent-wash);
  border-color: var(--accent);
  box-shadow: none;
}

.section-dark .button-secondary {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.35);
}

.section-dark .button-secondary:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.1);
}

.button-small {
  min-height: 46px;
  padding: 12px 20px;
  font-size: 1rem;
}

.text-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--accent);
  font-weight: 720;
  text-decoration: none;
}

.text-link svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
  transition: transform 180ms ease;
}

.text-link:hover svg {
  transform: translateX(4px);
}

.site-header {
  position: sticky;
  z-index: 1000;
  top: 0;
  height: var(--header-height);
  background: rgba(7, 18, 31, 0.92);
  border-bottom: 1px solid rgba(201, 214, 230, 0.12);
  backdrop-filter: blur(18px);
}

.header-inner {
  display: flex;
  height: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
}

.brand {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
}

/* The official wordmark is supplied on a fixed 2000x686 canvas whose artwork
   occupies the middle band, so it is sized by height against the header and
   left to derive its own width. These heights reproduce the footprint the
   previous logo occupied, so the header geometry is unchanged. */
.brand img {
  width: auto;
  height: clamp(58px, 6.4vw, 88px);
}

.primary-navigation {
  display: flex;
  align-items: center;
  gap: 24px;
}

.primary-navigation ul {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.primary-navigation li {
  margin: 0;
}

.primary-navigation li a {
  display: block;
  padding: 12px 14px;
  color: var(--text-secondary);
  font-size: 1rem;
  font-weight: 660;
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: 999px;
}

.primary-navigation li a:hover {
  color: #fff;
  background: rgba(201, 214, 230, 0.08);
}

/* The current page is marked with a restrained cyan wash, deliberately quieter
   than the primary call to action beside it — a tinted pill, never a solid one. */
.primary-navigation li a.is-current {
  color: var(--accent);
  background: var(--accent-wash);
  border-color: rgba(0, 229, 255, 0.25);
}

.menu-toggle {
  display: none;
  width: 46px;
  height: 46px;
  place-items: center;
  padding: 0;
  color: var(--text-primary);
  background: rgba(201, 214, 230, 0.08);
  border: 1px solid var(--border-strong);
  border-radius: 50%;
  cursor: pointer;
}

.menu-toggle svg {
  width: 23px;
  height: 23px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-width: 1.8;
}

.menu-close-icon {
  display: none;
}

.menu-toggle[aria-expanded="true"] .menu-open-icon {
  display: none;
}

.menu-toggle[aria-expanded="true"] .menu-close-icon {
  display: block;
}

.hero {
  position: relative;
  overflow: hidden;
  padding-block: var(--hero-space);
  background:
    linear-gradient(180deg, rgba(11, 26, 43, 0.9), rgba(7, 18, 31, 0)),
    repeating-linear-gradient(90deg, transparent 0, transparent 74px, rgba(18, 107, 255, 0.06) 75px),
    repeating-linear-gradient(0deg, transparent 0, transparent 74px, rgba(18, 107, 255, 0.06) 75px);
}

.hero::before {
  position: absolute;
  width: 560px;
  height: 560px;
  top: -310px;
  right: -180px;
  content: "";
  background: rgba(18, 107, 255, 0.18);
  border-radius: 50%;
  filter: blur(12px);
}

.hero-grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(390px, 0.92fr);
  align-items: center;
  gap: clamp(48px, 7vw, 92px);
}

.hero-copy h1 {
  max-width: 850px;
  margin-bottom: var(--content-gap-md);
}

.hero-copy h1 span {
  color: var(--accent);
}

.hero-copy > p:not(.eyebrow):not(.hero-proof) {
  max-width: 720px;
  margin-bottom: var(--content-gap-lg);
  font-size: clamp(1.12rem, 1.9vw, 1.36rem);
  line-height: 1.65;
}

.hero-proof {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin-top: 26px;
  margin-bottom: 0;
  color: var(--muted);
  font-size: 0.88rem;
  font-weight: 620;
}

.hero-proof span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.hero-proof span::before {
  width: 7px;
  height: 7px;
  content: "";
  background: var(--accent);
  border-radius: 50%;
}

/* Homepage hero: orbital artwork as an atmospheric background layer.
   --hero-x and --hero-y are the pointer position, -1 to 1, and --hero-active
   is 0 at rest and 1 while the pointer is inside. main.js interpolates all
   three each frame, so the artwork glides rather than snapping, and no CSS
   transition is needed. Only the artwork layer moves. */
.hero-orbital {
  --orbital-slate: var(--color-void-navy);
  --orbital-sky: var(--color-luminous-cyan);
  /* Lighter sky for the small uppercase eyebrow, which sits over the brightest
     part of the artwork once the layout stacks. */
  --orbital-sky-soft: var(--color-glacier-ice);
  --orbital-electric: var(--accent-secondary);
  --orbital-text: var(--color-glacier-ice);
  --hero-x: 0;
  --hero-y: 0;
  --hero-active: 0;
  /* Artwork size caps, as percentages of the media box: the first limits it by
     the box width, the second by the box height. The smaller one wins, so a
     tall window cannot grow the form until it reaches across the copy, and a
     short one cannot make it overflow. Breakpoints retune these two numbers. */
  --art-cap-w: 80;
  --art-cap-h: 142;
  display: grid;
  align-content: center;
  min-height: calc(100vh - var(--header-height));
  min-height: calc(100svh - var(--header-height));
  padding-block: clamp(44px, 4.6vw, 72px);
  color: var(--orbital-text);
  background: var(--orbital-slate);
  isolation: isolate;
}

.hero-orbital::before {
  content: none;
}

.hero-orbital-media {
  position: absolute;
  z-index: 0;
  inset: -26px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  overflow: hidden;
  pointer-events: none;
  container-type: size;
}

/* The artwork keeps its aspect ratio, so the orbital form is never squashed or
   cropped by object-fit. It is feathered on three edges — top, bottom and
   right — so it dissolves into the slate ground instead of ending on a line.
   The right feather is what lets it sit far enough left for the whole orbital
   form to stay inside the hero while still moving without revealing an edge.
   Browsers without mask-composite fall back to no feather, which is only ever
   a harder edge, never a broken layout. */
.hero-orbital-art {
  flex: none;
  max-width: none;
  width: auto;
  height: 82%;
  margin-right: 1%;
  transform:
    translate3d(calc(var(--hero-x) * 33px), calc(var(--hero-y) * 25px + var(--hero-active) * -7px), 0)
    rotate(calc(var(--hero-x) * 1.2deg))
    scale(calc(1.04 + var(--hero-active) * 0.02));
  will-change: transform;
  -webkit-mask-image:
    linear-gradient(180deg, transparent 0, #000 8%, #000 92%, transparent 100%),
    linear-gradient(90deg, #000 0, #000 96%, transparent 100%);
  mask-image:
    linear-gradient(180deg, transparent 0, #000 8%, #000 92%, transparent 100%),
    linear-gradient(90deg, #000 0, #000 96%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}

/* Deliberately more specific than the breakpoint rules below, so those only
   need to retune --art-cap-w / --art-cap-h rather than restate the sizing.
   Without container query units the height fallback above applies instead. */
@supports (width: 1cqw) {
  .hero-orbital .hero-orbital-art {
    width: min(calc(var(--art-cap-w) * 1cqw), calc(var(--art-cap-h) * 1cqh));
    height: auto;
  }
}

.hero-orbital-veil {
  position: absolute;
  z-index: 1;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(7, 18, 31, 0.97) 0%, rgba(7, 18, 31, 0.92) 30%, rgba(7, 18, 31, 0.56) 51%, rgba(7, 18, 31, 0.14) 74%, rgba(7, 18, 31, 0.03) 100%),
    linear-gradient(180deg, rgba(7, 18, 31, 0.5) 0%, rgba(7, 18, 31, 0) 22%, rgba(7, 18, 31, 0) 70%, rgba(7, 18, 31, 0.55) 100%);
}

.hero-orbital-inner {
  position: relative;
  z-index: 2;
}

.hero-orbital .hero-copy {
  max-width: min(470px, 42%);
}

.hero-orbital .eyebrow {
  color: var(--orbital-sky-soft);
}

.hero-orbital h1 {
  margin-bottom: var(--content-gap-md);
  font-size: clamp(2rem, 3.4vw, 3.05rem);
  color: #fff;
  text-shadow: 0 2px 26px rgba(4, 10, 18, 0.55);
}

.hero-orbital .hero-copy h1 span {
  color: var(--orbital-sky);
}

.hero-orbital .hero-copy > p:not(.eyebrow):not(.hero-proof) {
  max-width: 560px;
  color: rgba(214, 230, 246, 0.86);
  font-size: clamp(1.06rem, 1.5vw, 1.2rem);
}

.hero-orbital .hero-proof {
  color: rgba(198, 216, 235, 0.8);
}

.hero-orbital .hero-proof span::before {
  background: var(--orbital-sky);
  box-shadow: 0 0 0 4px rgba(0, 229, 255, 0.14);
}

.hero-orbital .button {
  background: var(--accent);
  border-color: var(--accent);
  box-shadow: 0 14px 34px rgba(0, 229, 255, 0.3), 0 10px 28px rgba(18, 107, 255, 0.28);
}

.hero-orbital .button:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
  box-shadow: 0 18px 40px rgba(0, 229, 255, 0.38), 0 12px 32px rgba(18, 107, 255, 0.36);
}

.hero-orbital .button-secondary {
  color: #eaf4ff;
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(201, 214, 230, 0.4);
  box-shadow: none;
}

.hero-orbital .button-secondary:hover {
  color: #fff;
  background: rgba(0, 229, 255, 0.16);
  border-color: var(--accent-ring);
  box-shadow: none;
}

.hero-orbital :focus-visible {
  outline-color: var(--focus);
}

.services-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
}

.service-card {
  position: relative;
  overflow: hidden;
  min-height: 340px;
  padding: clamp(28px, 4vw, 42px);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.service-card::after {
  position: absolute;
  width: 220px;
  height: 220px;
  right: -120px;
  bottom: -125px;
  content: "";
  background: var(--secondary-wash);
  border-radius: 50%;
  transition: transform 240ms ease;
}

.service-card:hover {
  border-color: var(--accent-ring);
  box-shadow: var(--shadow-sm), 0 0 34px -14px var(--accent-glow);
  transform: translateY(-4px);
}

.service-card:hover::after {
  transform: scale(1.18);
}

/* The icon is the card's primary accent, so it is cyan; the Electric Blue
   bloom behind the card (::after) stays as the depth layer. */
.service-icon {
  position: relative;
  z-index: 1;
  display: grid;
  width: 58px;
  height: 58px;
  place-items: center;
  margin-bottom: 30px;
  color: var(--accent);
  background: var(--accent-wash);
  border: 1px solid var(--accent-line);
  border-radius: 16px;
}

.service-icon svg {
  width: 29px;
  height: 29px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.55;
}

.service-card h3 {
  position: relative;
  z-index: 1;
  margin-bottom: 14px;
}

.service-card p {
  position: relative;
  z-index: 1;
  max-width: 520px;
  margin-bottom: 24px;
}

.service-card .text-link {
  position: relative;
  z-index: 1;
}

.outcome-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}

.outcome-card {
  padding: 28px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: var(--radius);
}

.outcome-card span {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  margin-bottom: 22px;
  color: var(--on-accent);
  font-size: 0.85rem;
  font-weight: 800;
  background: var(--accent);
  border-radius: 50%;
}

.outcome-card h3 {
  color: #fff;
  font-size: 1.12rem;
}

.outcome-card p {
  margin-bottom: 0;
  font-size: 0.92rem;
}

.process-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  counter-reset: process;
}

.process-card {
  position: relative;
  padding: 0 28px 0 0;
  counter-increment: process;
}

.process-card:not(:last-child)::after {
  position: absolute;
  width: calc(100% - 68px);
  height: 1px;
  top: 24px;
  left: 58px;
  content: "";
  background: linear-gradient(90deg, var(--accent), var(--line));
}

.process-number {
  position: relative;
  z-index: 1;
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  margin-bottom: 24px;
  color: var(--on-accent);
  font-weight: 800;
  background: var(--accent);
  border-radius: 50%;
  box-shadow: 0 0 0 8px var(--surface);
}

.process-number::before {
  content: counter(process, decimal-leading-zero);
}

.process-card h3 {
  margin-bottom: 12px;
}

.process-card p {
  margin-bottom: 0;
  font-size: 0.94rem;
}

.review-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  align-items: center;
  gap: clamp(48px, 8vw, 100px);
}

.review-copy h2 {
  margin-bottom: var(--content-gap-md);
}

.review-copy .button-row {
  margin-top: var(--content-gap-lg);
}

.approval-board {
  padding: clamp(24px, 4vw, 40px);
  background: var(--surface-elevated);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}

.approval-columns {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.approval-column {
  padding: 14px;
  background: var(--surface-soft);
  border-radius: 14px;
}

.approval-column h3 {
  margin-bottom: 14px;
  color: var(--muted);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.approval-item {
  padding: 13px;
  margin-bottom: 10px;
  background: var(--surface-elevated);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 4px 14px rgba(3, 9, 18, 0.3);
}

.approval-item:last-child {
  margin-bottom: 0;
}

.approval-item strong {
  display: block;
  margin-bottom: 5px;
  font-size: 0.78rem;
  line-height: 1.35;
}

.approval-item span {
  color: var(--muted);
  font-size: 0.68rem;
}

.approval-column.is-review {
  background: var(--secondary-wash);
}

.approval-column.is-ready {
  background: rgba(61, 220, 151, 0.14);
}

.insights-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}

.insight-card {
  display: flex;
  min-width: 0;
  flex-direction: column;
  overflow: hidden;
  background: var(--surface-elevated);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

.insight-card:hover {
  border-color: var(--accent-ring);
  box-shadow: var(--shadow-sm), 0 0 34px -14px var(--accent-glow);
  transform: translateY(-4px);
}

.insight-card-media {
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--secondary-wash);
  text-decoration: none;
}

.insight-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 320ms ease;
}

.insight-card:hover .insight-card-media img {
  transform: scale(1.035);
}

/* The article tile keeps its geometry, but the flat Electric Blue field is
   replaced by a dark base that deepens into cobalt and electric, with the node,
   its orbit ring and the connecting line rendered in cyan. Cyan is therefore
   the brightest thing in the tile and sits at its point of emphasis, rather
   than the whole block reading as one saturated colour. */
.insight-card-pattern {
  position: relative;
  display: grid;
  width: 100%;
  height: 100%;
  place-items: end start;
  padding: 24px;
  color: #fff;
  background:
    radial-gradient(circle at 82% 18%, rgba(0, 229, 255, 0.95) 0 8%, transparent 8.5%),
    radial-gradient(circle at 82% 18%, transparent 0 17%, rgba(0, 229, 255, 0.42) 17.5% 18.5%, transparent 19%),
    radial-gradient(circle at 82% 18%, rgba(0, 229, 255, 0.28), transparent 40%),
    linear-gradient(135deg, var(--background-secondary) 0%, var(--background-secondary) 28%, var(--accent-deep) 80%, var(--accent-secondary) 100%);
}

.insight-card-pattern::before,
.insight-card-pattern::after {
  position: absolute;
  content: "";
  background: rgba(0, 229, 255, 0.75);
}

.insight-card-pattern::before {
  width: 45%;
  height: 2px;
  top: 35%;
  right: 14%;
}

.insight-card-pattern::after {
  width: 10px;
  height: 10px;
  top: calc(35% - 4px);
  right: 14%;
  border: 2px solid var(--color-luminous-cyan);
  border-radius: 50%;
}

.insight-card-pattern span {
  position: relative;
  z-index: 1;
  font-size: 0.75rem;
  font-weight: 780;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.insight-card-body {
  display: flex;
  min-height: 285px;
  flex: 1;
  flex-direction: column;
  padding: 25px;
}

.insight-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  margin-bottom: 15px;
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 650;
}

.insight-meta span:first-child {
  color: var(--accent);
}

.insight-card h3 {
  margin-bottom: 13px;
  font-size: 1.25rem;
  line-height: 1.25;
}

.insight-card h3 a {
  color: var(--ink);
  text-decoration: none;
}

.insight-card h3 a::after {
  position: absolute;
  inset: 0;
  content: "";
}

.insight-card p {
  margin-bottom: 22px;
  font-size: 0.92rem;
}

.insight-card-body {
  position: relative;
}

.insight-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: auto;
  color: var(--muted);
  font-size: 0.78rem;
}

.insight-card-footer .text-link {
  font-size: 0.78rem;
}

.insight-card-footer .text-link svg {
  width: 15px;
  height: 15px;
}

.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-bottom: var(--content-gap-lg);
}

.filter-button {
  padding: 9px 14px;
  color: var(--ink-soft);
  font-size: 0.86rem;
  font-weight: 680;
  background: rgba(28, 47, 74, 0.66);
  border: 1px solid var(--line);
  border-radius: 999px;
  cursor: pointer;
}

.filter-button:hover,
.filter-button.is-active {
  color: var(--accent);
  background: var(--accent-wash);
  border-color: var(--accent-line);
}

.insight-card[hidden] {
  display: none;
}

.cta-panel {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 36px;
  padding: clamp(38px, 6vw, 70px);
  color: #fff;
  /* Was a single flat Electric Blue field. It is now a navy-to-cobalt depth
     gradient lit by an Electric Blue bloom and a brighter cyan one, so the
     panel reads as depth and the cyan call to action inside it leads. */
  background:
    radial-gradient(circle at 84% 14%, rgba(0, 229, 255, 0.26), transparent 32%),
    radial-gradient(circle at 6% 94%, rgba(18, 107, 255, 0.36), transparent 46%),
    linear-gradient(135deg, var(--background-secondary), var(--accent-deep));
  border-radius: var(--radius-lg);
  box-shadow: 0 30px 80px rgba(4, 26, 70, 0.5);
}

.cta-panel::after {
  position: absolute;
  width: 190px;
  height: 190px;
  right: -80px;
  bottom: -110px;
  content: "";
  border: 2px solid rgba(0, 229, 255, 0.3);
  border-radius: 50%;
}

.cta-panel h2,
.cta-panel p {
  position: relative;
  z-index: 1;
  color: #fff;
}

.cta-panel h2 {
  max-width: 760px;
  margin-bottom: 14px;
}

.cta-panel p {
  max-width: 640px;
  margin-bottom: 0;
  color: rgba(255, 255, 255, 0.82);
}

.cta-panel .button {
  position: relative;
  z-index: 1;
  color: var(--on-accent);
  background: var(--accent);
  border-color: var(--accent);
  box-shadow: none;
}

.cta-panel .button:hover {
  color: var(--on-accent);
  background: var(--accent-hover);
  border-color: var(--accent-hover);
}

.page-hero {
  position: relative;
  overflow: hidden;
  padding-block: var(--hero-space);
  background:
    radial-gradient(circle at 88% 8%, rgba(18, 107, 255, 0.22), transparent 30%),
    linear-gradient(180deg, var(--background-secondary), var(--background-primary));
}

.page-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(300px, 0.85fr);
  align-items: center;
  gap: clamp(32px, 5vw, 60px);
}

.page-hero h1 {
  max-width: 920px;
  margin-bottom: var(--content-gap-md);
}

.page-hero .lede {
  margin-bottom: 0;
}

.hero-aside {
  padding: 26px;
  background: rgba(28, 47, 74, 0.72);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  backdrop-filter: blur(12px);
}

.hero-aside p {
  margin-bottom: 0;
  font-size: 0.94rem;
}

.hero-aside strong {
  display: block;
  margin-bottom: 8px;
  color: var(--ink);
}

.page-hero-visual {
  display: flex;
  align-items: center;
  justify-content: center;
}

.page-hero-visual img {
  width: 100%;
  max-width: 460px;
  height: auto;
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 18px 34px rgba(3, 9, 18, 0.5));
  -webkit-mask-image: radial-gradient(circle farthest-corner at center, #000 55%, transparent 96%);
  mask-image: radial-gradient(circle farthest-corner at center, #000 55%, transparent 96%);
}

/* Services hero: four service cards travelling a slow elliptical orbit over the
   network artwork. The motion is a single CSS animation sampled around an
   ellipse, so the cards stay upright, and animation-play-state lets a hover or
   a focus freeze every card mid-orbit and resume from the same point. */
.services-hero {
  --svc-navy: var(--color-void-navy);
  --svc-cyan: var(--color-luminous-cyan);
  --svc-electric: var(--accent-secondary);
  --svc-text: var(--color-glacier-ice);
  --svc-eyebrow: var(--color-silver-mist);
  /* The orbit reaches into the page margin beside the container, which buys
     the radius the cards need to stay clear of one another. */
  --orbit-bleed: clamp(0px, calc(50vw - 614px), 92px);
  --orbit-rx: clamp(164px, 17.4vw, 256px);
  --orbit-ry: clamp(130px, 13.6vw, 172px);
  --orbit-card-w: clamp(196px, 14.4vw, 208px);
  --orbit-card-h: clamp(180px, 12.7vw, 183px);
  --orbit-duration: 32s;
  position: relative;
  display: grid;
  align-content: center;
  overflow: hidden;
  /* Header plus hero fills the opening viewport, using the same header
     variable the layout already relies on rather than fixed padding. */
  min-height: calc(100vh - var(--header-height));
  min-height: calc(100svh - var(--header-height));
  padding-block: clamp(40px, 4.2vw, 64px);
  color: var(--svc-text);
  background: var(--svc-navy);
  isolation: isolate;
}

/* The extra height goes into the rhythm between the copy elements, not into
   dead space around the block. */
.services-hero .eyebrow {
  margin-bottom: clamp(18px, 1.8vw, 26px);
}

.services-hero h1 {
  margin-bottom: clamp(16px, 1.7vw, 26px);
}

.services-hero .lede {
  margin-bottom: clamp(22px, 2.4vw, 36px);
}

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

.services-hero-art {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 62% 58%;
}

/* Keeps the artwork's dark navy behind the copy and its cyan network on the
   right, where the cards travel. */
.services-hero-veil {
  position: absolute;
  z-index: 1;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(7, 18, 31, 0.97) 0%, rgba(7, 18, 31, 0.88) 34%, rgba(7, 18, 31, 0.48) 55%, rgba(7, 18, 31, 0.12) 78%, rgba(7, 18, 31, 0.05) 100%),
    linear-gradient(180deg, rgba(7, 18, 31, 0.42) 0%, rgba(7, 18, 31, 0) 26%, rgba(7, 18, 31, 0) 70%, rgba(7, 18, 31, 0.5) 100%);
}

.services-hero-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 0.78fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(20px, 2.2vw, 34px);
}

.services-hero-copy {
  max-width: 560px;
}

.services-hero .eyebrow {
  color: var(--svc-eyebrow);
}

.services-hero h1 {
  max-width: none;
  margin-bottom: var(--content-gap-md);
  color: #fff;
  font-size: clamp(2rem, 3.3vw, 2.95rem);
  text-shadow: 0 2px 26px rgba(2, 8, 20, 0.55);
}

.services-hero h1 span {
  color: var(--svc-cyan);
}

.services-hero .lede {
  margin-bottom: var(--content-gap-lg);
  color: rgba(211, 228, 245, 0.88);
  font-size: clamp(1.04rem, 1.45vw, 1.18rem);
}

.services-hero .button {
  background: var(--accent);
  border-color: var(--accent);
  box-shadow: 0 14px 34px rgba(0, 229, 255, 0.3), 0 10px 28px rgba(18, 107, 255, 0.28);
}

.services-hero .button:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
  box-shadow: 0 18px 40px rgba(0, 229, 255, 0.38), 0 12px 32px rgba(18, 107, 255, 0.36);
}

.services-hero .button-secondary {
  color: #eaf4ff;
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(201, 214, 230, 0.4);
  box-shadow: none;
}

.services-hero .button-secondary:hover {
  color: #fff;
  background: rgba(0, 229, 255, 0.16);
  border-color: var(--accent-ring);
  box-shadow: none;
}

.services-hero :focus-visible {
  outline-color: var(--focus);
}

.services-orbit {
  position: relative;
  margin-right: calc(var(--orbit-bleed) * -1);
  min-height: calc(var(--orbit-ry) * 2 + var(--orbit-card-h));
}

.services-orbit::before {
  position: absolute;
  z-index: 0;
  inset: 0;
  content: "";
  background: radial-gradient(circle at 50% 50%, rgba(0, 229, 255, 0.1), transparent 62%);
  pointer-events: none;
}

.orbit-path {
  position: absolute;
  z-index: 0;
  top: 50%;
  left: 50%;
  width: calc(var(--orbit-rx) * 2);
  height: calc(var(--orbit-ry) * 2);
  overflow: visible;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.orbit-path ellipse {
  fill: none;
  stroke: rgba(0, 229, 255, 0.45);
  stroke-width: 1.2;
  stroke-dasharray: 5 10;
}

.orbit-slot {
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 50%;
  width: var(--orbit-card-w);
  height: var(--orbit-card-h);
  animation: services-orbit var(--orbit-duration) linear infinite;
  will-change: transform;
}

.orbit-slot-2 {
  animation-delay: calc(var(--orbit-duration) / -4);
}

.orbit-slot-3 {
  animation-delay: calc(var(--orbit-duration) / -2);
}

.orbit-slot-4 {
  animation-delay: calc(var(--orbit-duration) / -4 * 3);
}

/* A hovered or focused card freezes every card, so the link never moves out
   from under the pointer, and resumes from the same point on release. */
.services-orbit.is-paused .orbit-slot,
.services-orbit:focus-within .orbit-slot {
  animation-play-state: paused;
}

.orbit-slot:hover,
.orbit-slot:focus-within {
  z-index: 4;
}

.orbit-card {
  position: relative;
  display: flex;
  height: 100%;
  flex-direction: column;
  gap: 6px;
  padding: 15px 16px 16px;
  color: var(--svc-text);
  text-decoration: none;
  background: rgba(11, 26, 43, 0.9);
  border: 1px solid var(--accent-line);
  border-radius: 20px;
  box-shadow: 0 10px 30px rgba(3, 9, 18, 0.45);
  backdrop-filter: blur(10px);
  transition: transform 200ms ease, background 200ms ease, border-color 200ms ease, box-shadow 200ms ease;
}

/* Icon above the title, so the title always gets the card's full width and the
   long service names still wrap to two lines in the narrowest orbiting card. */
.orbit-card-head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}

.orbit-card-icon {
  display: inline-flex;
  width: 32px;
  height: 32px;
  flex: none;
  align-items: center;
  justify-content: center;
  color: var(--svc-cyan);
  background: rgba(0, 229, 255, 0.14);
  border: 1px solid var(--accent-line);
  border-radius: 10px;
}

.orbit-card-icon svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.7;
}

/* Sits in the corner so it costs the card no layout height. */
.orbit-card-index {
  position: absolute;
  top: 15px;
  right: 16px;
  color: rgba(0, 229, 255, 0.7);
  font-size: 0.7rem;
  font-weight: 780;
  letter-spacing: 0.12em;
}

.orbit-card-title {
  color: #fff;
  font-size: 0.95rem;
  font-weight: 740;
  letter-spacing: -0.01em;
  line-height: 1.25;
}

.orbit-card-text {
  color: rgba(202, 220, 238, 0.85);
  font-size: 0.8rem;
  line-height: 1.4;
}

/* The lifted card is edged in cyan; the Electric Blue bloom stays underneath it
   as the depth layer, so movement and geometry are untouched. */
.orbit-slot:hover .orbit-card,
.orbit-card:focus-visible {
  background: rgba(28, 47, 74, 0.94);
  border-color: var(--accent-ring);
  box-shadow: 0 16px 45px rgba(0, 229, 255, 0.24), 0 10px 34px rgba(18, 107, 255, 0.28);
  transform: translateY(-8px) scale(1.07);
}

@keyframes services-orbit {
  0% { transform: translate(calc(-50% + var(--orbit-rx) * 1.00000), calc(-50% + var(--orbit-ry) * 0.00000)); }
  4.16667% { transform: translate(calc(-50% + var(--orbit-rx) * 0.96593), calc(-50% + var(--orbit-ry) * 0.25882)); }
  8.33333% { transform: translate(calc(-50% + var(--orbit-rx) * 0.86603), calc(-50% + var(--orbit-ry) * 0.50000)); }
  12.5% { transform: translate(calc(-50% + var(--orbit-rx) * 0.70711), calc(-50% + var(--orbit-ry) * 0.70711)); }
  16.6667% { transform: translate(calc(-50% + var(--orbit-rx) * 0.50000), calc(-50% + var(--orbit-ry) * 0.86603)); }
  20.8333% { transform: translate(calc(-50% + var(--orbit-rx) * 0.25882), calc(-50% + var(--orbit-ry) * 0.96593)); }
  25% { transform: translate(calc(-50% + var(--orbit-rx) * 0.00000), calc(-50% + var(--orbit-ry) * 1.00000)); }
  29.1667% { transform: translate(calc(-50% + var(--orbit-rx) * -0.25882), calc(-50% + var(--orbit-ry) * 0.96593)); }
  33.3333% { transform: translate(calc(-50% + var(--orbit-rx) * -0.50000), calc(-50% + var(--orbit-ry) * 0.86603)); }
  37.5% { transform: translate(calc(-50% + var(--orbit-rx) * -0.70711), calc(-50% + var(--orbit-ry) * 0.70711)); }
  41.6667% { transform: translate(calc(-50% + var(--orbit-rx) * -0.86603), calc(-50% + var(--orbit-ry) * 0.50000)); }
  45.8333% { transform: translate(calc(-50% + var(--orbit-rx) * -0.96593), calc(-50% + var(--orbit-ry) * 0.25882)); }
  50% { transform: translate(calc(-50% + var(--orbit-rx) * -1.00000), calc(-50% + var(--orbit-ry) * 0.00000)); }
  54.1667% { transform: translate(calc(-50% + var(--orbit-rx) * -0.96593), calc(-50% + var(--orbit-ry) * -0.25882)); }
  58.3333% { transform: translate(calc(-50% + var(--orbit-rx) * -0.86603), calc(-50% + var(--orbit-ry) * -0.50000)); }
  62.5% { transform: translate(calc(-50% + var(--orbit-rx) * -0.70711), calc(-50% + var(--orbit-ry) * -0.70711)); }
  66.6667% { transform: translate(calc(-50% + var(--orbit-rx) * -0.50000), calc(-50% + var(--orbit-ry) * -0.86603)); }
  70.8333% { transform: translate(calc(-50% + var(--orbit-rx) * -0.25882), calc(-50% + var(--orbit-ry) * -0.96593)); }
  75% { transform: translate(calc(-50% + var(--orbit-rx) * -0.00000), calc(-50% + var(--orbit-ry) * -1.00000)); }
  79.1667% { transform: translate(calc(-50% + var(--orbit-rx) * 0.25882), calc(-50% + var(--orbit-ry) * -0.96593)); }
  83.3333% { transform: translate(calc(-50% + var(--orbit-rx) * 0.50000), calc(-50% + var(--orbit-ry) * -0.86603)); }
  87.5% { transform: translate(calc(-50% + var(--orbit-rx) * 0.70711), calc(-50% + var(--orbit-ry) * -0.70711)); }
  91.6667% { transform: translate(calc(-50% + var(--orbit-rx) * 0.86603), calc(-50% + var(--orbit-ry) * -0.50000)); }
  95.8333% { transform: translate(calc(-50% + var(--orbit-rx) * 0.96593), calc(-50% + var(--orbit-ry) * -0.25882)); }
  100% { transform: translate(calc(-50% + var(--orbit-rx) * 1.00000), calc(-50% + var(--orbit-ry) * -0.00000)); }
}

/* ------------------------------------------------------------------ *
 * Case studies hero
 *
 * A glowing cyan core with concentric rings sits behind four proof cards
 * that orbit it. The orbit reuses the sampled-ellipse keyframes above by
 * setting the same --orbit-* custom properties, so both heroes share one
 * animation and one set of responsive and reduced-motion cutovers.
 * --case-x / --case-y are the pointer position, -1 to 1, written once per
 * frame by main.js; --case-near rises as the pointer nears the core.
 * ------------------------------------------------------------------ */
.case-hero {
  --case-x: 0;
  --case-y: 0;
  --case-near: 0;
  --orbit-rx: clamp(172px, 18.2vw, 274px);
  --orbit-ry: clamp(112px, 11.6vw, 168px);
  --orbit-card-w: clamp(184px, 14.2vw, 216px);
  --orbit-card-h: clamp(96px, 7.4vw, 112px);
  --orbit-duration: 34s;
  position: relative;
  display: grid;
  align-content: center;
  overflow: hidden;
  /* Header plus hero fills the opening viewport, from the same header
     variable the layout already uses rather than fixed padding. */
  min-height: calc(100vh - var(--header-height));
  min-height: calc(100svh - var(--header-height));
  padding-block: clamp(38px, 4vw, 62px);
  background:
    radial-gradient(circle at 74% 46%, rgba(11, 61, 156, 0.34), transparent 46%),
    linear-gradient(180deg, var(--background-secondary), var(--background-primary));
}

.case-hero-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.04fr);
  align-items: center;
  gap: clamp(28px, 3.6vw, 56px);
}

.case-hero-copy {
  max-width: 620px;
}

/* Sized so "connected systems" holds one line in this column, which is what
   gives the three-line headline of the approved composition. */
.case-hero-copy h1 {
  margin-bottom: var(--content-gap-md);
  font-size: clamp(2.25rem, 3.72vw, 3.3rem);
  line-height: 1.05;
}

.case-hero-copy h1 span {
  color: var(--accent);
}

.case-hero-copy .lede {
  margin-bottom: clamp(20px, 2.2vw, 32px);
  color: rgba(211, 228, 245, 0.88);
  font-size: clamp(1.02rem, 1.4vw, 1.14rem);
}

/* Decorative field. It shares the orbit's coordinate space, so the core sits
   at the centre the cards turn around and the drawn path is the ring they
   actually travel. It alone carries the pointer parallax: the copy, the
   filters and the card links never move. */
.case-hero-field {
  position: absolute;
  z-index: 0;
  inset: 0;
  pointer-events: none;
  transform: translate3d(calc(var(--case-x) * 14px), calc(var(--case-y) * 11px), 0);
  transition: transform 120ms linear;
}

.case-core {
  position: absolute;
  top: 50%;
  left: 50%;
  width: calc(var(--orbit-ry) * 2.15);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
}

.case-core-glow {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, #ffffff 0 1.6%, transparent 2.4%),
    radial-gradient(circle at 50% 50%, rgba(0, 229, 255, 0.98) 0 4.6%, transparent 6%),
    radial-gradient(circle at 50% 50%, rgba(0, 229, 255, calc(0.4 + var(--case-near) * 0.2)), transparent 34%),
    radial-gradient(circle at 50% 50%, rgba(18, 107, 255, 0.34), transparent 62%);
}

.case-core-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  border: 1px solid rgba(0, 229, 255, calc(0.24 + var(--case-near) * 0.24));
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

.case-core-ring-1 { width: 17%; height: 17%; border-color: rgba(0, 229, 255, calc(0.68 + var(--case-near) * 0.3)); }
.case-core-ring-2 { width: 32%; height: 32%; border-color: rgba(0, 229, 255, calc(0.44 + var(--case-near) * 0.3)); }
.case-core-ring-3 { width: 50%; height: 50%; }
.case-core-ring-4 { width: 72%; height: 72%; border-style: dashed; }

/* Sized from the orbit radii, so the middle ellipse is exactly the path the
   cards travel and the other two sit inside and outside it for depth. */
.case-orbit-path {
  position: absolute;
  top: 50%;
  left: 50%;
  width: calc(var(--orbit-rx) * 2);
  height: calc(var(--orbit-ry) * 2);
  overflow: visible;
  transform: translate(-50%, -50%);
}

.case-orbit-path ellipse {
  fill: none;
  stroke: rgba(0, 229, 255, calc(0.34 + var(--case-near) * 0.26));
  stroke-width: 1.2;
  stroke-dasharray: 5 11;
}

.case-orbit-path-outer {
  stroke: rgba(0, 229, 255, calc(0.16 + var(--case-near) * 0.18));
  stroke-dasharray: 3 14;
}

.case-orbit-path-inner {
  stroke: rgba(18, 107, 255, calc(0.42 + var(--case-near) * 0.26));
  stroke-dasharray: 3 8;
}

/* Small connection points around the field. They brighten together as the
   pointer approaches, which reads as the network responding. */
.case-node {
  position: absolute;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 12px rgba(0, 229, 255, 0.8);
  opacity: calc(0.42 + var(--case-near) * 0.5);
}

.case-node-1 { top: 16%; left: 22%; }
.case-node-2 { top: 8%;  left: 62%; width: 5px; height: 5px; }
.case-node-3 { top: 34%; left: 8%;  width: 5px; height: 5px; }
.case-node-4 { top: 58%; left: 15%; }
.case-node-5 { top: 84%; left: 40%; width: 5px; height: 5px; }
.case-node-6 { top: 74%; left: 82%; }
.case-node-7 { top: 30%; left: 92%; width: 5px; height: 5px; }
.case-node-8 { top: 52%; left: 70%; width: 5px; height: 5px; }

.case-orbit {
  position: relative;
  z-index: 2;
  min-height: calc(var(--orbit-ry) * 2 + var(--orbit-card-h));
}

/* A hovered or focused card freezes every card, so the link never moves out
   from under the pointer, and resumes from the same point on release. */
.case-orbit.is-paused .orbit-slot,
.case-orbit:focus-within .orbit-slot {
  animation-play-state: paused;
}

.case-card {
  position: relative;
  display: flex;
  height: 100%;
  flex-direction: column;
  gap: 9px;
  padding: 14px 16px 15px;
  color: var(--color-glacier-ice);
  text-decoration: none;
  background: rgba(11, 26, 43, 0.9);
  border: 1px solid var(--accent-line);
  border-radius: 18px;
  box-shadow: 0 10px 30px rgba(3, 9, 18, 0.45);
  backdrop-filter: blur(10px);
  transition: transform 200ms ease, background 200ms ease, border-color 200ms ease, box-shadow 200ms ease;
}

.case-card-head {
  display: flex;
  align-items: center;
  gap: 10px;
}

.case-card-icon {
  display: inline-flex;
  width: 30px;
  height: 30px;
  flex: none;
  align-items: center;
  justify-content: center;
  color: var(--accent);
  background: rgba(0, 229, 255, 0.14);
  border: 1px solid var(--accent-line);
  border-radius: 9px;
}

.case-card-icon svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.7;
}

.case-card-tag {
  color: rgba(0, 229, 255, 0.85);
  font-size: 0.63rem;
  font-weight: 780;
  letter-spacing: 0.11em;
  line-height: 1.25;
  text-transform: uppercase;
}

.case-card-title {
  color: #fff;
  font-size: 0.9rem;
  font-weight: 730;
  letter-spacing: -0.01em;
  line-height: 1.3;
}

.case-card-action {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: auto;
  color: var(--color-silver-mist);
  font-size: 0.76rem;
  font-weight: 680;
}

.case-card-action svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
  transition: transform 180ms ease;
}

.orbit-slot:hover .case-card,
.case-card:focus-visible {
  background: rgba(28, 47, 74, 0.94);
  border-color: var(--accent-ring);
  box-shadow: 0 16px 45px rgba(0, 229, 255, 0.24), 0 10px 34px rgba(18, 107, 255, 0.28);
  transform: translateY(-8px) scale(1.07);
}

.orbit-slot:hover .case-card-action,
.case-card:focus-visible .case-card-action {
  color: var(--accent);
}

.orbit-slot:hover .case-card-action svg,
.case-card:focus-visible .case-card-action svg {
  transform: translateX(3px);
}

.case-scroll {
  position: absolute;
  z-index: 2;
  bottom: clamp(18px, 2.4vw, 34px);
  left: 50%;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--text-secondary);
  font-size: 0.82rem;
  font-weight: 620;
  text-decoration: none;
  transform: translateX(-50%);
}

.case-scroll:hover {
  color: var(--accent);
}

.case-scroll-mouse {
  position: relative;
  width: 19px;
  height: 30px;
  flex: none;
  border: 1.5px solid currentColor;
  border-radius: 11px;
}

.case-scroll-mouse::after {
  position: absolute;
  top: 6px;
  left: 50%;
  width: 3px;
  height: 6px;
  content: "";
  background: var(--accent);
  border-radius: 2px;
  transform: translateX(-50%);
  animation: case-scroll-hint 1.9s ease-in-out infinite;
}

@keyframes case-scroll-hint {
  0%, 100% { opacity: 1; transform: translate(-50%, 0); }
  55% { opacity: 0.25; transform: translate(-50%, 8px); }
}

/* Active category is a solid cyan pill, matching the approved reference.
   Cyan can only carry a dark label, so it takes --on-accent. */
.case-filter-bar {
  margin-bottom: 0;
}

.case-filter-bar .filter-button.is-active {
  color: var(--on-accent);
  background: var(--accent);
  border-color: var(--accent);
}

/* ------------------------------------------------------------------ *
 * Case studies page body
 * ------------------------------------------------------------------ */
.case-featured-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.74fr) minmax(0, 1.26fr);
  align-items: start;
  gap: clamp(32px, 4.4vw, 64px);
}

.case-study-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(268px, 1fr));
  gap: 20px;
}

.case-study-card {
  display: flex;
  min-width: 0;
  flex-direction: column;
  overflow: hidden;
  background: var(--surface-elevated);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

.case-study-card:hover {
  border-color: var(--accent-ring);
  box-shadow: var(--shadow-sm), 0 0 34px -14px var(--accent-glow);
  transform: translateY(-4px);
}

.case-study-card[hidden] {
  display: none;
}

.case-study-media {
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--secondary-wash);
  text-decoration: none;
}

.case-study-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.case-study-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 10px;
  padding: 22px;
}

.case-study-tag {
  margin: 0;
  color: var(--accent);
  font-size: 0.72rem;
  font-weight: 760;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.case-study-body h3 {
  margin-bottom: 0;
  font-size: 1.16rem;
}

.case-study-body h3 a {
  color: #fff;
  text-decoration: none;
}

.case-study-body p {
  margin-bottom: 0;
  font-size: 0.92rem;
}

.case-study-body .text-link {
  margin-top: auto;
  font-size: 0.88rem;
}

.case-outcome {
  color: var(--color-glacier-ice);
  font-weight: 650;
}

.case-metrics {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.case-metrics li {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 7px 12px;
  background: var(--accent-wash);
  border: 1px solid var(--accent-line);
  border-radius: 999px;
}

.case-metrics strong {
  color: var(--accent);
  font-size: 0.95rem;
}

.case-metrics span {
  color: var(--text-secondary);
  font-size: 0.78rem;
}

.case-metrics-lg {
  margin-top: var(--content-gap-md);
}

/* Shown until an approved client story exists. */
.case-empty {
  padding: clamp(28px, 4vw, 46px);
  background: var(--surface-elevated);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}

.case-empty h3 {
  margin-bottom: 14px;
  font-size: 1.32rem;
}

.case-empty p {
  max-width: 62ch;
  font-size: 0.96rem;
}

.case-empty-flow {
  display: grid;
  gap: 10px;
  margin: 0 0 26px;
  padding: 0;
  list-style: none;
  counter-reset: none;
}

.case-empty-flow li {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 11px 14px;
  color: var(--color-glacier-ice);
  font-size: 0.92rem;
  font-weight: 620;
  background: rgba(7, 18, 31, 0.5);
  border: 1px solid var(--line);
  border-radius: 12px;
}

.case-empty-flow li span {
  color: var(--accent);
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.1em;
}

.testimonial-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
}

.testimonial {
  margin: 0;
  padding: clamp(24px, 3vw, 34px);
  background: var(--surface-elevated);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
}

.testimonial blockquote {
  margin: 0 0 18px;
  padding: 0;
  border: 0;
}

.testimonial blockquote p {
  margin-bottom: 0;
  color: #fff;
  font-size: 1.04rem;
  line-height: 1.6;
}

.testimonial figcaption {
  display: flex;
  flex-direction: column;
  gap: 3px;
  color: var(--accent);
  font-size: 0.9rem;
  font-weight: 720;
}

.testimonial figcaption span {
  color: var(--text-secondary);
  font-size: 0.84rem;
  font-weight: 550;
}

.client-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(20px, 4vw, 54px);
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}

.client-strip li span {
  color: var(--text-secondary);
  font-size: 1.02rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.client-strip img {
  width: auto;
  height: 30px;
  opacity: 0.82;
}

.split-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  align-items: start;
  gap: clamp(48px, 8vw, 100px);
}

.split-grid.reverse {
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
}

.sticky-copy {
  position: sticky;
  top: calc(var(--header-height) + 32px);
}

.sticky-copy h2 {
  margin-bottom: 22px;
}

.feature-list {
  display: grid;
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.feature-list li {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 14px;
  padding: 20px;
  background: rgba(28, 47, 74, 0.66);
  border: 1px solid var(--line);
  border-radius: 14px;
}

.feature-list li svg {
  width: 25px;
  height: 25px;
  margin-top: 2px;
  fill: none;
  stroke: var(--accent);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

.feature-list strong,
.feature-list span {
  display: block;
}

.feature-list strong {
  margin-bottom: 4px;
}

.feature-list span {
  color: var(--muted);
  font-size: 0.91rem;
}

.card-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

.info-card {
  padding: 28px;
  background: var(--surface-elevated);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.info-card h3 {
  margin-bottom: 13px;
}

.info-card p:last-child,
.info-card ul:last-child {
  margin-bottom: 0;
}

.info-card ul {
  padding-left: 20px;
  color: var(--ink-soft);
}

.info-card li + li {
  margin-top: 7px;
}

.service-detail-hero {
  padding-block: var(--hero-space);
}

.service-detail-hero .hero-grid {
  grid-template-columns: minmax(0, 1.05fr) minmax(360px, 0.75fr);
}

.service-orbit {
  position: relative;
  display: grid;
  min-height: 420px;
  place-items: center;
}

.service-orbit::before,
.service-orbit::after {
  position: absolute;
  content: "";
  border: 1px solid rgba(0, 229, 255, 0.22);
  border-radius: 50%;
}

.service-orbit::before {
  width: 310px;
  height: 310px;
}

.service-orbit::after {
  width: 220px;
  height: 220px;
}

.orbit-core {
  position: relative;
  z-index: 2;
  display: grid;
  width: 120px;
  height: 120px;
  place-items: center;
  color: #fff;
  /* Orbital illumination stays Electric Blue: it reads as depth behind the
     cyan ring and tags around it, not as the identity colour. */
  background: var(--accent-secondary);
  border-radius: 34px;
  box-shadow: 0 28px 70px rgba(18, 107, 255, 0.34);
  transform: rotate(8deg);
}

.orbit-core svg {
  width: 54px;
  height: 54px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.35;
  transform: rotate(-8deg);
}

.orbit-tag {
  position: absolute;
  z-index: 3;
  padding: 9px 13px;
  color: var(--accent);
  font-size: 0.74rem;
  font-weight: 730;
  background: rgba(28, 47, 74, 0.66);
  border: 1px solid var(--accent-line);
  border-radius: 999px;
  box-shadow: var(--shadow-sm);
}

.orbit-tag-one {
  top: 58px;
  left: 20px;
}

.orbit-tag-two {
  top: 100px;
  right: 10px;
}

.orbit-tag-three {
  bottom: 74px;
  left: 8px;
}

.orbit-tag-four {
  right: 40px;
  bottom: 38px;
}

.faq-list {
  display: grid;
  gap: 12px;
}

.faq-item {
  padding: 0;
  background: var(--surface-elevated);
  border: 1px solid var(--line);
  border-radius: 14px;
}

.faq-item summary {
  position: relative;
  padding: 20px 56px 20px 22px;
  font-weight: 730;
  cursor: pointer;
  list-style: none;
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary::after {
  position: absolute;
  width: 26px;
  height: 26px;
  top: 18px;
  right: 20px;
  display: grid;
  place-items: center;
  content: "+";
  color: var(--accent);
  background: var(--accent-wash);
  border-radius: 50%;
}

.faq-item[open] summary::after {
  content: "−";
}

.faq-item div {
  padding: 0 22px 22px;
}

.faq-item p:last-child {
  margin-bottom: 0;
}

.blueprint-grid {
  display: grid;
  gap: 24px;
}

.blueprint {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  overflow: hidden;
  background: var(--surface-elevated);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}

.blueprint-visual {
  padding: clamp(28px, 4vw, 40px);
  background: var(--secondary-wash-soft);
  border-right: 1px solid var(--line);
}

.blueprint-label {
  display: inline-flex;
  margin-bottom: 22px;
  padding: 7px 10px;
  color: var(--accent);
  font-size: 0.7rem;
  font-weight: 760;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: rgba(28, 47, 74, 0.66);
  border: 1px solid var(--line);
  border-radius: 999px;
}

.workflow-rail {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.workflow-step {
  position: relative;
  display: grid;
  grid-template-columns: 34px 1fr;
  align-items: center;
  gap: 14px;
  padding-bottom: 18px;
}

.workflow-step:last-child {
  padding-bottom: 0;
}

.workflow-step:not(:last-child)::after {
  position: absolute;
  top: 34px;
  bottom: 0;
  left: 16px;
  width: 2px;
  content: "";
  background: var(--accent);
  opacity: 0.25;
}

.workflow-step-marker {
  position: relative;
  z-index: 1;
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  color: var(--on-accent);
  font-size: 0.85rem;
  font-weight: 800;
  background: var(--accent);
  border-radius: 50%;
  box-shadow: 0 0 0 4px var(--accent-wash-soft);
}

.workflow-step-card {
  padding: 12px 16px;
  color: var(--ink);
  font-size: 0.9rem;
  font-weight: 700;
  background: var(--surface-elevated);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
}

.blueprint-copy {
  padding: clamp(30px, 5vw, 54px);
}

.blueprint-copy h2 {
  margin-bottom: 18px;
  font-size: clamp(1.8rem, 3vw, 2.7rem);
}

.blueprint-copy > p {
  margin-bottom: 24px;
}

.blueprint-copy ul {
  margin: 0 0 26px;
  padding: 0;
  list-style: none;
}

.blueprint-copy li {
  position: relative;
  padding-left: 26px;
  color: var(--ink-soft);
}

.blueprint-copy li::before {
  position: absolute;
  width: 9px;
  height: 9px;
  top: 0.55em;
  left: 0;
  content: "";
  background: var(--accent);
  border-radius: 50%;
}

.blueprint-copy li + li {
  margin-top: 10px;
}

.values-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

.value-card {
  padding: 30px;
  background: var(--surface-elevated);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.value-card span {
  display: block;
  margin-bottom: 20px;
  color: var(--accent);
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.12em;
}

.value-card p:last-child {
  margin-bottom: 0;
}

.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr);
  align-items: start;
  gap: clamp(44px, 8vw, 90px);
}

.contact-details {
  position: sticky;
  top: calc(var(--header-height) + 32px);
}

.contact-details h2 {
  margin-bottom: 20px;
}

.contact-form {
  padding: clamp(26px, 5vw, 48px);
  background: var(--surface-elevated);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  margin-bottom: 26px;
}

.field {
  min-width: 0;
}

.field-full {
  grid-column: 1 / -1;
}

.field label {
  display: block;
  margin-bottom: 7px;
  color: var(--ink);
  font-size: 0.86rem;
  font-weight: 680;
}

.field input,
.field select,
.field textarea {
  width: 100%;
  min-height: 50px;
  padding: 12px 14px;
  color: var(--text-primary);
  background: rgba(11, 26, 43, 0.85);
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}

.field textarea {
  min-height: 170px;
  resize: vertical;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 4px rgba(0, 229, 255, 0.24);
}

.checkbox-field {
  display: grid;
  grid-template-columns: 20px 1fr;
  align-items: start;
  gap: 11px;
}

.checkbox-field input {
  width: 18px;
  min-height: 18px;
  margin-top: 4px;
  accent-color: var(--accent);
}

.checkbox-field label {
  margin: 0;
  color: var(--ink-soft);
  font-weight: 500;
}

.honeypot {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}

.form-note {
  margin: 16px 0 0;
  color: var(--muted);
  font-size: 0.78rem;
}

.legal-layout {
  display: grid;
  grid-template-columns: 240px minmax(0, 760px);
  align-items: start;
  justify-content: center;
  gap: 70px;
}

.legal-nav {
  position: sticky;
  top: calc(var(--header-height) + 28px);
  padding: 20px;
  background: var(--surface-soft);
  border-radius: 12px;
}

.legal-nav strong {
  display: block;
  margin-bottom: 10px;
  font-size: 0.83rem;
}

.legal-nav a {
  display: block;
  padding-block: 6px;
  color: var(--ink-soft);
  font-size: 0.88rem;
  text-decoration: none;
}

.legal-nav a:hover {
  color: var(--accent);
}

.prose {
  color: var(--ink-soft);
}

.prose > *:first-child {
  margin-top: 0;
}

.prose h2,
.prose h3,
.prose h4 {
  scroll-margin-top: calc(var(--header-height) + 30px);
}

.prose h2 {
  margin-top: 2.2em;
  margin-bottom: 0.7em;
  font-size: clamp(1.7rem, 3.5vw, 2.35rem);
}

.prose h3 {
  margin-top: 1.8em;
  margin-bottom: 0.65em;
  font-size: 1.35rem;
}

.prose p,
.prose li {
  font-size: 1.02rem;
  line-height: 1.78;
}

.prose ul,
.prose ol {
  padding-left: 1.35em;
}

.prose li + li {
  margin-top: 0.45em;
}

.prose blockquote {
  padding: 22px 26px;
  margin-block: 30px;
  color: var(--ink);
  background: var(--secondary-wash);
  border-left: 4px solid var(--accent);
  border-radius: 0 12px 12px 0;
}

.prose blockquote p:last-child {
  margin-bottom: 0;
}

.prose pre {
  overflow-x: auto;
  padding: 20px;
  color: var(--color-glacier-ice);
  background: var(--color-void-navy);
  border-radius: 12px;
}

.prose code {
  padding: 0.14em 0.35em;
  color: var(--link-hover);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.9em;
  background: var(--secondary-wash);
  border-radius: 5px;
}

.prose pre code {
  padding: 0;
  color: inherit;
  background: transparent;
}

.prose img {
  width: 100%;
  margin-block: 32px;
  border-radius: 14px;
}

/* Article bodies sit on the light surface, so the inline prose furniture needs
   its light-surface colours rather than the dark defaults. */
.section-light .prose {
  color: var(--text-body-on-light);
}

/* Cyan disappears against Glacier Ice, so the rule on a light surface keeps the
   secondary blue, which still reads at 4.26:1 as a non-text graphic. */
.section-light .prose blockquote {
  color: var(--text-on-light);
  background: rgba(0, 229, 255, 0.12);
  border-left-color: var(--accent-secondary);
}

.section-light .prose code {
  color: var(--link-on-light);
  background: rgba(18, 107, 255, 0.12);
}

.section-light .prose pre code {
  color: inherit;
}

.section-light .prose hr {
  border-top-color: var(--border-on-light);
}

.prose hr {
  margin-block: 48px;
  border: 0;
  border-top: 1px solid var(--line);
}

.article-hero {
  padding-block: var(--hero-space);
  background: linear-gradient(180deg, var(--background-secondary), var(--background-primary));
}

.back-link {
  display: inline-block;
  margin-bottom: 34px;
  color: var(--ink-soft);
  font-size: 0.88rem;
  font-weight: 650;
  text-decoration: none;
}

.article-hero h1 {
  margin-bottom: var(--content-gap-md);
  font-size: clamp(2.6rem, 6vw, 5.15rem);
}

.article-deck {
  max-width: 760px;
  margin-bottom: 20px;
  font-size: clamp(1.12rem, 2vw, 1.35rem);
}

.article-author {
  margin-bottom: 0;
  color: var(--muted);
  font-size: 0.9rem;
}

.article-hero-image {
  overflow: hidden;
  margin: 42px 0 0;
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}

.article-hero-image img {
  width: 100%;
  aspect-ratio: 16 / 8.5;
  object-fit: cover;
}

.article-section {
  padding-top: var(--hero-space);
}

.article-cta {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 24px;
  padding: 30px;
  margin-top: var(--section-space-tight);
  background: var(--secondary-wash);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.article-cta h2 {
  margin-bottom: 8px;
  font-size: 1.65rem;
}

.article-cta p:last-child {
  margin-bottom: 0;
}

.empty-state,
.success-state,
.not-found {
  text-align: center;
}

.success-state,
.not-found {
  min-height: 64vh;
  display: grid;
  place-items: center;
}

.state-card {
  max-width: 700px;
  padding: clamp(34px, 7vw, 70px);
  background: var(--surface-elevated);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.state-icon {
  display: grid;
  width: 72px;
  height: 72px;
  place-items: center;
  margin: 0 auto 26px;
  color: var(--on-accent);
  background: var(--accent);
  border-radius: 22px;
  transform: rotate(6deg);
}

.state-icon svg {
  width: 38px;
  height: 38px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
  transform: rotate(-6deg);
}

.state-card h1 {
  margin-bottom: 20px;
  font-size: clamp(2.4rem, 5vw, 4.2rem);
}

.site-footer {
  padding-top: var(--footer-space);
  color: var(--text-primary);
  background: var(--background-primary);
  border-top: 1px solid var(--border);
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.6fr repeat(3, 1fr);
  gap: clamp(34px, 6vw, 70px);
  padding-bottom: 56px;
}

.footer-brand img {
  width: auto;
  height: 78px;
  margin-bottom: 24px;
}

.footer-brand p {
  max-width: 320px;
  color: var(--text-secondary);
}

.footer-grid h2 {
  margin-bottom: 17px;
  color: #fff;
  font-size: 0.84rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.footer-grid ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.footer-grid li + li {
  margin-top: 9px;
}

.footer-grid a,
.footer-grid address span {
  color: var(--link);
  font-size: 0.9rem;
  font-style: normal;
  text-decoration: none;
}

.footer-grid a:hover {
  color: var(--link-hover);
}

.footer-grid address {
  display: grid;
  gap: 9px;
}

.footer-social {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 22px;
}

.footer-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  padding: 0;
  color: var(--text-primary);
  border: 1px solid var(--border-strong);
  border-radius: 50%;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.footer-social a:hover {
  color: var(--accent-highlight);
  background: var(--accent-wash);
  border-color: rgba(0, 229, 255, 0.45);
}

.footer-social a:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}

.social-icon {
  display: inline-flex;
  width: 24px;
  height: 24px;
}

.social-icon svg {
  width: 100%;
  height: 100%;
}

.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-block: 22px;
  border-top: 1px solid var(--border);
}

.footer-bottom p {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.78rem;
}

.footer-bottom > div {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
}

.footer-bottom a {
  color: var(--text-secondary);
  font-size: 0.78rem;
  text-decoration: none;
}

/* Below roughly 1240px the ellipse can no longer hold four readable cards clear
   of one another, so the hero switches to a controlled static arrangement rather
   than forcing the orbit into a frame that cannot take it. */
@media (max-width: 1240px) {
  .services-hero-grid {
    grid-template-columns: 1fr;
    gap: clamp(26px, 4vw, 40px);
  }

  .services-hero-copy {
    max-width: none;
  }

  /* No room to orbit reliably, so the cards settle into a stable grid and the
     decorative path is dropped. Every card keeps its link and hover state. */
  .services-orbit,
  .case-orbit {
    display: grid;
    min-height: 0;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
  }

  .services-orbit::before,
  .orbit-path {
    display: none;
  }

  /* Hero stacks to eyebrow, headline, supporting text, filters, then cards. */
  .case-hero {
    min-height: 0;
  }

  .case-hero-grid {
    grid-template-columns: 1fr;
    gap: clamp(26px, 4vw, 40px);
  }

  .case-hero-copy {
    max-width: none;
  }

  /* The field stays as atmosphere behind the stacked content rather than
     competing with it, and stops tracking the pointer. */
  .case-hero-field {
    top: 42%;
    right: -12%;
    width: min(88vw, 620px);
    opacity: 0.42;
    transform: translate3d(0, -50%, 0);
  }

  .case-featured-grid {
    grid-template-columns: 1fr;
  }

  .orbit-slot {
    position: static;
    width: auto;
    animation: none;
    transform: none;
  }

  .orbit-slot:hover .orbit-card,
  .orbit-card:focus-visible {
    transform: translateY(-5px) scale(1.02);
  }

  .services-orbit {
    margin-right: 0;
    height: auto;
  }

  .services-hero {
    min-height: 0;
  }

  /* Once the copy runs the full width it crosses the bright side of the
     artwork, so the veil flattens out and darkens rather than fading right. */
  .services-hero-veil {
    background:
      linear-gradient(90deg, rgba(7, 18, 31, 0.95) 0%, rgba(7, 18, 31, 0.88) 46%, rgba(7, 18, 31, 0.8) 100%),
      linear-gradient(180deg, rgba(7, 18, 31, 0.4) 0%, rgba(7, 18, 31, 0.15) 38%, rgba(7, 18, 31, 0.55) 100%);
  }

  .orbit-slot {
    height: auto;
  }
}

@media (max-width: 1040px) {
  :root {
    --header-height: 76px;
  }

  .menu-toggle {
    display: grid;
  }

  .primary-navigation {
    position: fixed;
    inset: var(--header-height) 0 auto;
    display: none;
    max-height: calc(100vh - var(--header-height));
    flex-direction: column;
    align-items: stretch;
    gap: 22px;
    padding: 24px 20px 32px;
    overflow-y: auto;
    background: var(--color-void-navy);
    border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
  }

  .primary-navigation.is-open {
    display: flex;
  }

  .primary-navigation ul {
    flex-direction: column;
    align-items: stretch;
  }

  .primary-navigation li a {
    padding: 14px 16px;
    font-size: 1rem;
  }

  .primary-navigation .button {
    width: 100%;
  }

  .hero-grid,
  .service-detail-hero .hero-grid {
    grid-template-columns: 1fr;
  }

  .hero-grid {
    gap: 42px;
  }

  /* Still a two-zone composition here, but the narrower frame needs a tighter
     copy column and a smaller artwork for the two to stay clear of each other. */
  .hero-orbital {
    --art-cap-w: 70;
    --art-cap-h: 120;
  }

  .hero-orbital .hero-copy {
    max-width: 420px;
  }

  .hero-orbital-art {
    height: 68%;
    margin-right: 2.6%;
  }

  .hero-orbital-veil {
    background:
      linear-gradient(90deg, rgba(7, 18, 31, 0.97) 0%, rgba(7, 18, 31, 0.92) 32%, rgba(7, 18, 31, 0.56) 58%, rgba(7, 18, 31, 0.14) 80%, rgba(7, 18, 31, 0.03) 100%),
      linear-gradient(180deg, rgba(7, 18, 31, 0.52) 0%, rgba(7, 18, 31, 0.06) 24%, rgba(7, 18, 31, 0.1) 68%, rgba(7, 18, 31, 0.6) 100%);
  }

  .page-hero-grid {
    grid-template-columns: minmax(0, 1fr) minmax(240px, 0.8fr);
    gap: 32px;
  }

  .page-hero-visual img {
    max-width: 360px;
  }

  .outcome-grid,
  .process-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px 18px;
  }

  .process-card:nth-child(2)::after,
  .process-card:last-child::after {
    display: none;
  }

  .review-grid,
  .split-grid,
  .split-grid.reverse,
  .contact-grid {
    grid-template-columns: 1fr;
  }

  .sticky-copy,
  .contact-details {
    position: static;
  }

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

  .insight-card:last-child:nth-child(odd) {
    grid-column: span 2;
  }

  .services-grid,
  .insights-grid,
  .blueprint-grid {
    gap: 20px;
  }

  .footer-grid {
    grid-template-columns: 1.4fr repeat(2, 1fr);
  }

  .footer-grid > div:last-child {
    grid-column: 2 / -1;
  }
}

/* Below roughly 900px the hero has no room for a side-by-side composition, so
   the artwork becomes a dimmed atmospheric wash sitting high in the frame and
   the copy runs the full width. Touch devices land here; they never animate
   because the script only reacts to mouse pointers. */
@media (max-width: 900px) {
  .hero-orbital {
    /* The width cap always wins here, so the wash keeps its approved scale
       whatever the viewport height. */
    --art-cap-w: 142;
    --art-cap-h: 400;
    min-height: clamp(360px, 58vh, 470px);
    padding-block: clamp(34px, 6.4vw, 56px);
  }

  .hero-orbital .hero-copy,
  .hero-orbital .hero-copy > p:not(.eyebrow):not(.hero-proof) {
    max-width: none;
  }

  .hero-orbital h1 {
    font-size: clamp(1.95rem, 5.6vw, 2.7rem);
  }

  .hero-orbital-media {
    align-items: flex-start;
  }

  .hero-orbital-art {
    width: 142%;
    height: auto;
    margin-top: -6%;
    margin-right: 0;
    opacity: 0.7;
    -webkit-mask-image: linear-gradient(180deg, #000 0, #000 66%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 0, #000 66%, transparent 100%);
  }

  .hero-orbital-veil {
    background:
      radial-gradient(128% 62% at 86% 2%, rgba(7, 18, 31, 0.28) 0%, rgba(7, 18, 31, 0.66) 46%, rgba(7, 18, 31, 0.88) 100%),
      linear-gradient(180deg, rgba(7, 18, 31, 0.42) 0%, rgba(7, 18, 31, 0.62) 42%, rgba(7, 18, 31, 0.86) 100%);
  }
}

@media (max-width: 760px) {
  .hero-orbital {
    --art-cap-w: 156;
  }

  .hero-orbital h1 {
    font-size: clamp(1.95rem, 8.4vw, 2.6rem);
  }

  .hero-orbital-art {
    width: 156%;
  }

  .page-hero-grid {
    grid-template-columns: 1fr;
    align-items: start;
    gap: 24px;
  }

  .page-hero-visual img {
    max-width: 320px;
    margin-inline: auto;
  }

  .container,
  .container-narrow,
  .container-article {
    width: min(calc(100% - 30px), var(--max-width));
  }

  .section-heading {
    align-items: start;
    flex-direction: column;
    gap: 20px;
  }

  #services .section-heading {
    margin-bottom: 22px;
  }

  #services .section-heading .eyebrow {
    margin-bottom: 14px;
  }

  #services .section-heading h2 {
    font-size: clamp(2rem, 7vw, 2.4rem);
    line-height: 1.08;
  }

  .services-grid,
  .outcome-grid,
  .process-grid,
  .insights-grid,
  .card-grid-3,
  .values-grid {
    grid-template-columns: 1fr;
  }

  .services-grid,
  .outcome-grid,
  .insights-grid,
  .card-grid-3,
  .values-grid,
  .blueprint-grid {
    gap: 16px;
  }

  .insight-card:last-child:nth-child(odd) {
    grid-column: auto;
  }

  .process-card {
    display: grid;
    grid-template-columns: 48px 1fr;
    gap: 18px;
    padding: 0;
  }

  .process-card:not(:last-child)::after {
    width: 1px;
    height: calc(100% - 35px);
    top: 54px;
    left: 24px;
    background: linear-gradient(180deg, var(--accent), var(--line));
  }

  .process-card:nth-child(2)::after {
    display: block;
  }

  .process-number {
    grid-row: 1 / span 2;
  }

  .process-card h3 {
    margin: 3px 0 8px;
  }

  .process-card p {
    grid-column: 2;
  }

  .approval-columns {
    grid-template-columns: 1fr;
  }

  .cta-panel {
    grid-template-columns: 1fr;
  }

  .service-orbit {
    min-height: 350px;
  }

  .service-orbit::before {
    width: 270px;
    height: 270px;
  }

  .service-orbit::after {
    width: 185px;
    height: 185px;
  }

  .blueprint {
    grid-template-columns: 1fr;
  }

  .blueprint-copy {
    order: 1;
  }

  .blueprint-visual {
    order: 2;
    border-right: 0;
    border-top: 1px solid var(--line);
  }

  .form-grid {
    grid-template-columns: 1fr;
  }

  .field-full {
    grid-column: auto;
  }

  .article-cta {
    grid-template-columns: 1fr;
  }

  .legal-layout {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .legal-nav {
    position: static;
  }

  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }

  .footer-brand {
    grid-column: 1 / -1;
  }

  .footer-grid > div:last-child {
    grid-column: 1 / -1;
  }

  .footer-bottom {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (max-width: 520px) {
  .services-orbit,
  .case-orbit {
    grid-template-columns: 1fr;
  }

  .brand img {
    height: 54px;
  }

  .button-row {
    align-items: stretch;
    flex-direction: column;
  }

  .button-row .button {
    width: 100%;
  }

  .orbit-tag-one {
    left: 0;
  }

  .orbit-tag-two {
    right: 0;
  }

  .orbit-tag-three {
    left: 0;
  }

  .orbit-tag-four {
    right: 0;
  }

  .footer-grid {
    grid-template-columns: 1fr;
  }

  .footer-brand,
  .footer-grid > div:last-child {
    grid-column: auto;
  }
}

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

  /* Homepage hero: keep the composition identical, but never move the artwork. */
  .hero-orbital-art {
    transform: none !important;
    transition: none !important;
    will-change: auto;
  }

  /* Services hero: no orbiting at all — the four cards sit in the same stable
     grid the narrow layout uses, keeping their links, hover and focus states. */
  .services-hero-grid {
    grid-template-columns: 1fr;
    gap: clamp(26px, 4vw, 40px);
  }

  .services-hero-copy {
    max-width: none;
  }

  .services-orbit,
  .case-orbit {
    display: grid;
    min-height: 0;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
  }

  .services-orbit::before,
  .orbit-path {
    display: none;
  }

  .orbit-slot {
    position: static;
    width: auto;
    animation: none !important;
    transform: none;
  }

  .orbit-slot:hover .orbit-card,
  .orbit-card:focus-visible {
    transform: translateY(-5px) scale(1.02);
  }

  /* No orbit, no pointer parallax: the field is pinned and the cards sit in
     a stable grid, keeping every link, label and hover state. */
  .case-hero {
    min-height: 0;
  }

  .case-hero-grid {
    grid-template-columns: 1fr;
  }

  .case-hero-copy {
    max-width: none;
  }

  .case-hero-field {
    top: 42%;
    right: -12%;
    width: min(88vw, 620px);
    opacity: 0.4;
    transform: translate3d(0, -50%, 0) !important;
  }

  .orbit-slot:hover .case-card,
  .case-card:focus-visible {
    transform: translateY(-5px) scale(1.02);
  }
}

/* =========================================================================
   ABOUT PAGE — one continuous editorial canvas.

   Every selector here is scoped under .about-canvas. No :root token is added
   or changed, and no other page is affected.

   CONTRAST GUARANTEE
   ------------------
   .about-field carries opacity: 0.26, which makes it a composite group: the
   plates, the display words and the grain are flattened together inside the
   group and then composited exactly once over the body's opaque Void Navy.
   The brightest pixel the group can physically emit is opaque #FFFFFF, so the
   brightest pixel the FIELD can paint - and the field is the backdrop for
   every run of flowed text on this page - is

       0.26 x #FFFFFF over #07121F  =  #475059,  relative luminance 0.0780

   Against that worst possible pixel:

       #FFFFFF   8.20:1   headings, card titles, strong
       #E6F2FF   7.23:1   ledes, quotes, secondary button label
       #C9D6E6   5.57:1   body copy, list items
       #00E5FF   5.33:1   labels, links, rules, focus ring
       #93A6BC   3.29:1   FAILS - --text-muted is neutralised below
       #126BFF   1.79:1   FAILS - never text or a visible border here

   The guarantee is frame independent: it holds for every frame the drift can
   produce, and for anything added inside the group later. 0.26 is the cap that
   keeps the least contrasty ink in use (cyan) above 5:1 while giving the field
   enough luminosity to read as depth. Raising it, or putting a blend mode on
   .about-field itself, breaks the proof.

   SCOPE. The cap bounds the field only. Components in .about-flow paint above
   it and are not multiplied by 0.26 - .button fills opaque #00E5FF, and the
   value card carries a cyan gradient edge. Those are governed by their own
   pairs (the button label is #07121F on #00E5FF, 12.24:1) and none of them
   carries text over a bright fill. Anything new that paints its own light
   surface under text must be checked separately; the table above does not
   cover it.
   ========================================================================= */

.about-canvas {
  position: relative;
  /* Neutralised page-wide so any inherited component that reaches for the
     muted ink lands on a compliant colour instead. */
  --muted: var(--color-silver-mist);
  --text-muted: var(--color-silver-mist);
  /* Pointer offset, -1..1, and scroll progress, 0..1, both written once per
     frame by main.js. Declared here so the page renders correctly with no JS. */
  --about-px: 0;
  --about-py: 0;
  --about-p: 0;
  /* MUST NOT receive transform, filter, perspective, backdrop-filter or
     contain: paint. Any of those would make it the containing block for the
     fixed field and pin the field to the document instead of the viewport. */
}

.about-flow {
  position: relative;
}

/* One editorial grid spans every movement. Rhythm comes from margin between
   movements, never from padding on a painted surface — that is what removes
   the section seams the previous layout had. */
.about-movement {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: clamp(14px, 1.8vw, 26px);
  row-gap: clamp(16px, 2vw, 30px);
  width: min(calc(100% - 40px), var(--max-width));
  margin-inline: auto;
  margin-block-start: clamp(80px, 11vh, 150px);
}

/* The gap between movements is deliberately uneven. An identical gap five
   times over rebuilds the section boundary out of rhythm alone, even with
   nothing painted, and a reader starts counting sections again. These run
   short, long, short, long-ish, so the page breathes instead of ticking. */
.about-story   { margin-block-start: clamp(52px, 6vh, 84px); }
.about-asks    { margin-block-start: clamp(92px, 13vh, 170px); }
.about-values  { margin-block-start: clamp(62px, 8vh, 108px); }
.about-stories { margin-block-start: clamp(104px, 15vh, 186px); }
.about-close   { margin-block-start: clamp(72px, 9.5vh, 128px); }

.about-overture {
  min-height: calc(100vh - var(--header-height));
  min-height: calc(100svh - var(--header-height));
  /* Set low in the opening screen rather than dead centre: centring leaves a
     full screen of void beneath the lede before the first movement arrives,
     which reads as a hero rather than as the first bar of a continuous page. */
  align-content: end;
  padding-block-end: clamp(72px, 12vh, 150px);
  margin-block-start: 0;
}

/* ---------- The field ---------------------------------------------------- */

.about-field {
  position: fixed;
  z-index: -1;
  inset: 0;
  overflow: hidden;
  opacity: 0.26;
  isolation: isolate;
  pointer-events: none;
  contain: paint;
  background:
    radial-gradient(150% 120% at 76% 8%, #123a54 0%, #0b2135 42%, #07121f 76%),
    var(--color-void-navy);
}

/* Each plate is a wide sheet of palette light cut by a fractal-noise mask.
   The mask is a static SVG rasterised once by the browser and then only ever
   transformed, so there is no per-frame filter cost. Because each plate's mask
   drifts at its own rate over its own light gradient, the visible cloud edges
   are re-cut continuously: the shapes change, not just their positions.
   Animation is limited to transform, which stays on the compositor. */
.about-plate {
  position: absolute;
  inset: -30%;
  background-repeat: no-repeat;
  -webkit-mask-repeat: repeat;
  mask-repeat: repeat;
  -webkit-mask-size: 130% 130%;
  mask-size: 130% 130%;
  backface-visibility: hidden;
  transform: translate3d(
    calc(var(--about-px) * var(--plate-amp-x, 0px)),
    calc(var(--about-py) * var(--plate-amp-y, 0px)),
    0);
}

/* Far: cobalt volume, the slow back wall. */
.about-plate-far {
  --plate-amp-x: 5px;
  --plate-amp-y: 4px;
  -webkit-mask-image: var(--about-noise-b);
  mask-image: var(--about-noise-b);
  background-image:
    radial-gradient(64% 54% at 22% 18%, rgba(11, 61, 156, 0.95), transparent 72%),
    radial-gradient(70% 58% at 84% 46%, rgba(11, 61, 156, 0.72), transparent 74%);
  animation: about-drift-far 96s ease-in-out infinite alternate;
}

/* Mid: electric blue body. */
.about-plate-mid {
  --plate-amp-x: 9px;
  --plate-amp-y: 7px;
  -webkit-mask-image: var(--about-noise-a);
  mask-image: var(--about-noise-a);
  background-image:
    radial-gradient(58% 50% at 70% 58%, rgba(18, 107, 255, 0.88), transparent 76%),
    radial-gradient(52% 44% at 26% 76%, rgba(18, 107, 255, 0.58), transparent 74%);
  animation: about-drift-mid 74s ease-in-out infinite alternate;
}

/* Near: cyan cores, the fastest and brightest layer. */
.about-plate-near {
  --plate-amp-x: 15px;
  --plate-amp-y: 11px;
  -webkit-mask-image: var(--about-noise-c);
  mask-image: var(--about-noise-c);
  background-image:
    radial-gradient(62% 52% at 36% 32%, rgba(0, 229, 255, 0.98), transparent 74%),
    radial-gradient(40% 34% at 78% 82%, rgba(0, 229, 255, 0.62), transparent 72%);
  animation: about-drift-near 58s ease-in-out infinite alternate;
}

.about-canvas {
  --about-noise-a: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='900'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.006' numOctaves='5' seed='7'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 1.3 0 0 0 -0.36'/%3E%3C/filter%3E%3Crect width='900' height='900' filter='url(%23n)'/%3E%3C/svg%3E");
  --about-noise-b: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='900'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.0036' numOctaves='4' seed='41'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 1.5 0 0 0 -0.5'/%3E%3C/filter%3E%3Crect width='900' height='900' filter='url(%23n)'/%3E%3C/svg%3E");
  --about-noise-c: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='900'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.0096' numOctaves='4' seed='91'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 1.2 0 0 0 -0.42'/%3E%3C/filter%3E%3Crect width='900' height='900' filter='url(%23n)'/%3E%3C/svg%3E");
}

@keyframes about-drift-far {
  from { transform: translate3d(-3%, -2%, 0) scale(1.02) rotate(0deg); }
  to   { transform: translate3d(3%, 3%, 0) scale(1.12) rotate(4deg); }
}

@keyframes about-drift-mid {
  from { transform: translate3d(3%, 3%, 0) scale(1.1) rotate(2deg); }
  to   { transform: translate3d(-4%, -3%, 0) scale(1.0) rotate(-5deg); }
}

@keyframes about-drift-near {
  from { transform: translate3d(-4%, 3%, 0) scale(1.16) rotate(-3deg); }
  to   { transform: translate3d(4%, -4%, 0) scale(1.02) rotate(5deg); }
}

/* Static grain. Never transformed, never animated: a static feTurbulence is
   rasterised once and cached. It exists to break the 8-bit banding that these
   very low composited luminances would otherwise show on large flat areas. */
.about-grain {
  position: absolute;
  inset: 0;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
}

/* ---------- Oversized display words -------------------------------------- */

/* They live inside the field group deliberately. Painted at high alpha here,
   they are still bounded by the one 0.26 cap, so there is a single number to
   prove rather than a second compositing path to reason about. Each is a word
   that appears verbatim in the approved copy of the movement it sits behind;
   nothing here is written for the effect. */
.about-marks {
  position: absolute;
  inset: 0;
}

.ed-mark {
  position: absolute;
  font-family: ui-serif, Georgia, "Times New Roman", serif;
  font-size: clamp(5rem, 15vw, 13.5rem);
  font-weight: 400;
  letter-spacing: -0.015em;
  line-height: 0.8;
  color: var(--color-glacier-ice);
  white-space: nowrap;
  /* Each word is pinned to a point on the scroll continuum: it sits centred
     when --about-p reaches its own anchor and is carried well off-screen either
     side of it, so one word at a time drifts through the field. --mark-lag
     below 1 means it travels more slowly than the copy beside it, which is what
     makes it read as depth rather than as a heading.

     The anchors below are the fallback. main.js measures where each movement
     actually sits and rewrites --mark-anchor on load and on resize, so a word
     stays with its movement instead of drifting into the gap between two of
     them when the layout reflows. */
  --mark-travel: 620vh;
  transform: translate3d(0, calc((var(--mark-anchor, 0) - var(--about-p)) * var(--mark-lag, 0.8) * var(--mark-travel)), 0);
}

.ed-mark-open    { top: 34%; right: -5vw;  --mark-anchor: 0.015; --mark-lag: 0.82; opacity: 0.44; }
.ed-mark-story   { top: 40%; left: -7vw;   --mark-anchor: 0.21;  --mark-lag: 0.9;  opacity: 0.48; }
.ed-mark-asks    { top: 46%; right: -13vw; --mark-anchor: 0.4;   --mark-lag: 0.86; opacity: 0.36; }
.ed-mark-values  { top: 38%; left: -4vw;   --mark-anchor: 0.59;  --mark-lag: 0.94; opacity: 0.42; }
.ed-mark-stories { top: 44%; right: -3vw;  --mark-anchor: 0.81;  --mark-lag: 0.88; opacity: 0.4; }
.ed-mark-close   { top: 42%; left: -2vw;   --mark-anchor: 0.97;  --mark-lag: 0.84; opacity: 0.34; }

/* ---------- Editorial typography ----------------------------------------- */

.ed-label {
  grid-column: 1 / span 3;
  margin: 0 0 4px;
  color: var(--accent);
  font-size: 0.78rem;
  font-weight: 780;
  letter-spacing: 0.14em;
  line-height: 1.2;
  text-transform: uppercase;
}

.ed-statement {
  grid-column: 4 / span 8;
  margin: 0;
  color: var(--text-primary);
  font-size: clamp(1.9rem, 3.5vw, 3.05rem);
  letter-spacing: -0.02em;
  line-height: 1.08;
}

.ed-statement-lead {
  font-size: clamp(2.3rem, 4.6vw, 4.1rem);
}

.ed-lede {
  grid-column: 4 / span 6;
  margin: 0;
  color: var(--color-glacier-ice);
  font-size: clamp(1.04rem, 1.5vw, 1.22rem);
  line-height: 1.62;
}

.ed-body {
  grid-column: 4 / span 6;
  display: grid;
  gap: 16px;
}

.ed-body p {
  margin: 0;
  color: var(--ink-soft);
}

.ed-subhead {
  grid-column: 4 / span 8;
  margin: clamp(14px, 2vw, 26px) 0 0;
  color: var(--text-primary);
  font-size: clamp(1.1rem, 1.6vw, 1.32rem);
}

.ed-action {
  grid-column: 4 / span 8;
  margin: clamp(10px, 1.4vw, 18px) 0 0;
}

/* Numbered practice list. The rule is a hairline between rows rather than a
   box around them, so nothing reads as a panel. */
.ed-enumeration {
  grid-column: 4 / span 7;
  display: grid;
  margin: 0;
  padding: 0;
  gap: 0;
  list-style: none;
}

.ed-enumeration li {
  display: grid;
  align-items: baseline;
  grid-template-columns: 46px minmax(0, 1fr);
  padding: 14px 0;
  border-top: 1px solid var(--border);
}

.ed-enumeration li:first-child {
  border-top: 0;
}

.ed-enumeration p {
  margin: 0;
  color: var(--ink-soft);
}

.ed-enum-index {
  color: var(--accent);
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.12em;
}

/* The four client asks: a ledger, not four cards. */
.ed-asks {
  grid-column: 4 / span 8;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(18px, 2.4vw, 34px) clamp(24px, 3.4vw, 52px);
  margin: clamp(8px, 1.2vw, 16px) 0 0;
  padding: 0;
  list-style: none;
}

.ed-ask {
  display: grid;
  gap: 6px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}

.ed-ask-index {
  color: var(--accent);
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.14em;
}

.ed-ask h3 {
  margin: 0;
  color: var(--text-primary);
  font-size: 1.06rem;
}

.ed-ask p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.94rem;
}

/* ---------- Value cards --------------------------------------------------- */

/* Held inside the same measure as the statements above them (which end at
   column 11) rather than running wider than every other block on the page — a
   wider band is what would make the values read as a panelled region inserted
   into the canvas. */
.value-stack {
  grid-column: 3 / span 9;
  display: grid;
  gap: clamp(22px, 3.4vw, 52px);
  margin: clamp(10px, 1.6vw, 22px) 0 0;
  padding: 0;
  list-style: none;
}

/* One wide card per value, stacked and alternately inset, so they read as
   elements floating in the field rather than a grid of dashboard tiles. The
   inset is kept at every width, only reduced: it is what stops six identical
   rectangles forming a column, and that matters most on the narrow screens
   where each card fills the most of the display. */
.value-stack > li:nth-child(odd)  { margin-inline-end: clamp(14px, 4vw, 64px); }
.value-stack > li:nth-child(even) { margin-inline-start: clamp(14px, 4vw, 64px); }

.value-brief {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 55fr) 1px minmax(0, 45fr);
  align-items: start;
  gap: clamp(18px, 2.6vw, 40px);
  padding: clamp(22px, 2.8vw, 38px);
  background: linear-gradient(158deg, rgba(11, 26, 43, 0.74) 0%, rgba(7, 18, 31, 0.56) 100%);
  border: 1px solid var(--accent-line);
  border-radius: var(--radius);
  transition: transform 220ms ease, border-color 220ms ease, box-shadow 220ms ease;
}

/* Thin gradient edge. The reference runs its border cyan to magenta; purple
   and magenta are retired here, so the equivalent is the brand's own two
   colour axis. The flat cyan border above stands where masking is absent. */
@supports ((mask-composite: exclude) or (-webkit-mask-composite: xor)) {
  .value-brief {
    border-color: transparent;
  }

  .value-brief::before {
    position: absolute;
    inset: 0;
    padding: 1px;
    content: "";
    background: linear-gradient(118deg, rgba(0, 229, 255, 0.78) 0%, rgba(18, 107, 255, 0.58) 54%, rgba(0, 229, 255, 0.14) 100%);
    border-radius: inherit;
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
  }
}

.value-body {
  min-width: 0;
}

/* A corner bracket drawn from two 1px borders, rotated per index. It fills the
   reference's small cyan icon slot without inventing six pictograms or six
   meanings, and adds no asset. */
.value-mark {
  display: block;
  width: 26px;
  height: 26px;
  margin-bottom: clamp(14px, 1.8vw, 22px);
  border-top: 1px solid var(--accent);
  border-left: 1px solid var(--accent);
  border-radius: 2px 0 0;
  transform: rotate(calc((var(--v-i) - 1) * 60deg));
  transition: transform 220ms ease;
}

.value-body h3 {
  margin: 0 0 10px;
  color: var(--text-primary);
  font-size: clamp(1.16rem, 1.9vw, 1.5rem);
}

.value-body p {
  margin: 0;
  color: var(--ink-soft);
}

/* The reference splits its card with a thin vertical rule. Here that rule is
   literally the "/" of the approved string "01 / USEFUL", promoted from a
   character to a divider. */
.value-rule {
  align-self: stretch;
  width: 1px;
  background: linear-gradient(180deg, transparent 0%, var(--accent-line) 16%, var(--accent-line) 84%, transparent 100%);
}

/* The right column carries the value's own index: the numeral takes the
   reference's bold label slot and the key word takes its statement slot. Both
   already exist in the approved copy, so nothing is written to fill it. */
.value-index {
  display: grid;
  align-content: start;
  gap: 8px;
  margin: 0;
  padding-top: 2px;
}

.value-index-num {
  color: var(--accent);
  font-size: clamp(2rem, 4vw, 3.1rem);
  font-weight: 760;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.03em;
  line-height: 0.9;
}

.value-index-word {
  color: var(--text-primary);
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.18em;
}

.value-brief:hover {
  border-color: var(--accent-ring);
  box-shadow: 0 16px 44px rgba(0, 229, 255, 0.16), 0 8px 26px rgba(18, 107, 255, 0.2);
  transform: translateY(-5px);
}

@supports ((mask-composite: exclude) or (-webkit-mask-composite: xor)) {
  .value-brief:hover {
    border-color: transparent;
  }

  .value-brief:hover::before {
    background: linear-gradient(118deg, rgba(0, 229, 255, 0.95) 0%, rgba(18, 107, 255, 0.7) 54%, rgba(0, 229, 255, 0.3) 100%);
  }
}

.value-brief:hover .value-mark {
  transform: rotate(calc((var(--v-i) - 1) * 60deg)) translate(2px, -2px);
}

/* ---------- Success stories ---------------------------------------------- */

/* No rule above this block. A cyan hairline directly under a heading is a
   section divider wherever it is drawn, and at tablet width it would run the
   full content measure. Separation here is space only. */
.about-stories-empty {
  grid-column: 4 / span 6;
  display: grid;
  gap: clamp(10px, 1.2vw, 16px);
  margin-top: clamp(18px, 2.4vw, 30px);
}

.about-stories-empty p {
  margin: 0;
  color: var(--ink-soft);
}

.about-stories-empty .ed-action {
  grid-column: auto;
  margin-top: 6px;
}

/* Populated state, in the same family as the value cards so the page reads as
   one system the moment approved quotes exist. */
.about-quotes {
  grid-column: 3 / span 9;
  display: grid;
  gap: clamp(22px, 3.4vw, 52px);
  margin-top: clamp(12px, 1.6vw, 22px);
}

/* Exactly the value card's treatment, alternately inset the same way. A 2px
   solid cyan edge here would be the strongest line on the page and would turn
   the success stories back into a boxed testimonials block the day the first
   approved quote lands. */
.about-quotes > :nth-child(odd)  { margin-inline-end: clamp(14px, 4vw, 64px); }
.about-quotes > :nth-child(even) { margin-inline-start: clamp(14px, 4vw, 64px); }

.about-quote {
  position: relative;
  margin: 0;
  padding: clamp(22px, 2.8vw, 38px);
  background: linear-gradient(158deg, rgba(11, 26, 43, 0.74) 0%, rgba(7, 18, 31, 0.56) 100%);
  border: 1px solid var(--accent-line);
  border-radius: var(--radius);
}

.about-quote blockquote {
  margin: 0 0 16px;
  padding: 0;
  border: 0;
  background: none;
}

.about-quote blockquote p {
  margin: 0;
  color: var(--color-glacier-ice);
  font-size: clamp(1.06rem, 1.8vw, 1.4rem);
  line-height: 1.5;
}

.about-quote figcaption {
  display: grid;
  gap: 3px;
}

.about-quote-author {
  color: var(--text-primary);
  font-weight: 700;
}

.about-quote-role {
  color: var(--ink-soft);
  font-size: 0.9rem;
}

/* ---------- Close and the dissolve into the footer ------------------------ */

/* An in-flow block paints above the negatively stacked field, so this gradient
   physically covers the field over the last stretch of the page and resolves to
   the footer's exact background colour. No seam, no global CSS change. */
/* The ramp is eased, not linear and not front-loaded. A three-stop gradient
   puts over half its alpha change into the first half of the band, which reads
   as an edge sweeping upward rather than as the canvas resolving; these stops
   approximate a smoothstep so no part of the band changes fast enough to draw
   a line. The band is also taller than the gap above it, so the resolution is
   longer than the pause that precedes it. */
.about-dissolve {
  height: clamp(230px, 30vh, 400px);
  margin-block-start: clamp(56px, 8vh, 104px);
  background: linear-gradient(
    180deg,
    rgba(7, 18, 31, 0) 0%,
    rgba(7, 18, 31, 0.04) 14%,
    rgba(7, 18, 31, 0.14) 28%,
    rgba(7, 18, 31, 0.31) 42%,
    rgba(7, 18, 31, 0.52) 56%,
    rgba(7, 18, 31, 0.72) 70%,
    rgba(7, 18, 31, 0.88) 82%,
    rgba(7, 18, 31, 0.97) 92%,
    var(--color-void-navy) 100%
  );
}

.about-canvas .button {
  box-shadow: 0 14px 34px rgba(0, 229, 255, 0.3), 0 10px 28px rgba(18, 107, 255, 0.28);
}

/* ---------- Scroll reveal ------------------------------------------------- */

/* Applied by JS only, and only once it has confirmed it can also remove it, so
   content is never hidden when scripting or IntersectionObserver is absent.

   The unit is one element, not one movement. Revealing a whole movement at
   once animates the page in six discrete blocks — the same six units the
   layout above spends its effort dissolving — and for the values that meant
   six tall cards appearing together. main.js marks each unit with
   data-ed-reveal and observes it individually, so the page resolves
   continuously as it is scrolled. --r-i staggers neighbours that happen to
   enter together, capped so a long list never runs a visible queue. */
.about-canvas.is-observed [data-ed-reveal] {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 620ms ease, transform 620ms ease;
  transition-delay: calc(min(var(--r-i, 0), 3) * 55ms);
}

.about-canvas.is-observed [data-ed-reveal].is-visible {
  opacity: 1;
  transform: none;
}

/* ---------- Responsive ---------------------------------------------------- */

@media (max-width: 1024px) {
  .ed-statement,
  .ed-lede,
  .ed-body,
  .ed-subhead,
  .ed-enumeration,
  .ed-asks,
  .ed-action,
  .about-stories-empty {
    grid-column: 1 / -1;
  }

  .ed-label {
    grid-column: 1 / -1;
  }

  .value-stack,
  .about-quotes {
    grid-column: 1 / -1;
  }

  .ed-mark {
    font-size: clamp(4rem, 17vw, 9rem);
  }
}

@media (max-width: 760px) {
  .about-movement {
    margin-block-start: clamp(56px, 9vh, 92px);
  }

  .about-overture {
    min-height: 0;
    padding-block-start: clamp(48px, 9vh, 88px);
  }

  .value-brief {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
  }

  /* The rule becomes horizontal so the index still reads as a separate field. */
  .value-rule {
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, var(--accent-line) 16%, var(--accent-line) 84%, transparent 100%);
  }

  .value-index {
    grid-auto-flow: column;
    align-items: baseline;
    justify-content: start;
    gap: 14px;
  }

  .value-index-num {
    font-size: 1.7rem;
  }

  .ed-asks {
    grid-template-columns: minmax(0, 1fr);
  }

  /* In one column each rule would span the full content measure with air above
     it, which is a section divider rather than a list hairline. The numerals
     already delimit the items. */
  .ed-ask {
    border-top: 0;
    padding-top: 0;
  }

  /* Three of the six words are dropped so each remaining one owns its
     movement instead of crowding a narrow screen. */
  .ed-mark-asks,
  .ed-mark-values,
  .ed-mark-close {
    display: none;
  }

  .ed-mark {
    font-size: clamp(3.4rem, 21vw, 6rem);
  }
}

/* ---------- Reduced motion ------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  .about-plate {
    animation: none;
    transform: none;
  }

  /* Pinning the words is not enough. With the scroll transform removed all six
     collapse onto their static offsets, overlapping in a band across the middle
     of the viewport for the whole page — the opposite of the one-word-at-a-time
     depth the moving version gives. One word is kept, the rest are dropped. */
  .ed-mark {
    transform: none;
  }

  .ed-mark:not(.ed-mark-open) {
    display: none;
  }

  .ed-mark-open {
    top: 32%;
    opacity: 0.4;
  }

  .about-canvas.is-observed [data-ed-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .value-brief:hover {
    transform: none;
  }
}

/* ---------------------------------------------------------------------------
   Global floating WhatsApp control

   A single fixed anchor, rendered site-wide by build.mjs (and by the theme's
   wp_footer hook) only when a WhatsApp number is configured. Its destination
   comes from the same builder as the footer social icon, so there is one
   number in one place.

   Stacking: 900 sits above ordinary page content, whose highest in-flow
   z-index is 4, but below the sticky header and the mobile navigation panel it
   contains (1000) and below the skip link (9999). A visitor opening the mobile
   menu or tabbing to the skip link therefore sees those over the button, which
   is the correct priority, and no part of this feature needs an escalating
   z-index to work.

   Contrast: Luminous Cyan on Void Navy is 13.1:1, far above the 3:1 that
   WCAG 1.4.11 asks of a graphical control, and the tooltip's Glacier Ice on
   Deep Ocean is 15.5:1.

   No JavaScript: the entrance, the hover and the tooltip are all CSS, and the
   destination is a plain outbound link, so the control needs no script, no
   dependency and no third-party embed — it sets no cookies and does not change
   what the cookie notice has to say.
   --------------------------------------------------------------------------- */

.wa-float {
  /* 56-62px desktop, dropping to 52px on small screens further down. */
  --wa-size: clamp(56px, 4vw, 62px);
  --wa-gap: clamp(22px, 2.2vw, 30px);
  --wa-glow: 0 10px 35px rgba(0, 229, 255, 0.16);
  --wa-glow-hover: 0 14px 40px rgba(0, 229, 255, 0.26), 0 6px 18px rgba(18, 107, 255, 0.2);
  position: fixed;
  z-index: 900;
  right: calc(var(--wa-gap) + env(safe-area-inset-right, 0px));
  bottom: calc(var(--wa-gap) + env(safe-area-inset-bottom, 0px));
  display: grid;
  place-items: center;
  /* The anchor is exactly the disc. The tooltip is positioned out of flow so
     it never enlarges the hit area into an invisible strip across the page. */
  width: var(--wa-size);
  height: var(--wa-size);
  border-radius: 50%;
  /* Under 350ms, and the control is clickable throughout: the animation only
     fades and lifts it, it never blocks the pointer. */
  animation: wa-float-in 320ms ease-out 120ms both;
}

.wa-float-disc {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  color: var(--accent);
  background: var(--color-void-navy);
  border: 1px solid var(--accent-ring);
  border-radius: 50%;
  box-shadow: var(--wa-glow);
  transition: transform 200ms ease, border-color 200ms ease, box-shadow 200ms ease, color 200ms ease;
}

.wa-float-disc svg {
  width: 56%;
  height: 56%;
  fill: currentColor;
  stroke: none;
}

.wa-float-tip {
  position: absolute;
  right: calc(100% + 12px);
  padding: 9px 14px;
  color: var(--color-glacier-ice);
  font-size: 0.82rem;
  font-weight: 560;
  line-height: 1.2;
  white-space: nowrap;
  background: var(--color-deep-ocean);
  border: 1px solid var(--accent-line);
  border-radius: 10px;
  box-shadow: var(--shadow-sm);
  opacity: 0;
  transform: translateX(6px);
  transition: opacity 200ms ease, transform 200ms ease;
  pointer-events: none;
}

.wa-float:hover .wa-float-disc,
.wa-float:focus-visible .wa-float-disc {
  color: var(--accent-hover);
  border-color: var(--accent);
  box-shadow: var(--wa-glow-hover);
  transform: translateY(-4px) scale(1.06);
}

.wa-float:hover .wa-float-tip,
.wa-float:focus-visible .wa-float-tip {
  opacity: 1;
  transform: translateX(0);
}

/* Keyboard users get the same cyan ring the rest of the site uses, and the
   tooltip above reveals on focus as well as hover, so nothing here depends on
   a pointer. */
.wa-float:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 4px;
}

@keyframes wa-float-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* The last footer row keeps its legal links clear of the button's corner, but
   only on pages that actually render one — with no number configured the
   footer is unchanged. */
body:has(.wa-float) .site-footer .footer-bottom {
  padding-bottom: calc(var(--wa-size, 62px) + 16px);
}

@media (min-width: 640px) {
  body:has(.wa-float) .site-footer .footer-bottom {
    padding-bottom: 22px;
    padding-right: calc(var(--wa-size, 62px) + 20px);
  }
}

/* Size follows the viewport, not the input device. Keeping these two concerns
   apart matters: a touchscreen laptop reports a coarse pointer at 1440px and
   should still get the desktop control, and a device that reports no hover at
   desktop width should not be handed a phone-sized button. */
@media (max-width: 760px) {
  .wa-float {
    --wa-size: 52px;
    --wa-gap: 20px;
  }
}

@media (max-width: 480px) {
  .wa-float {
    --wa-gap: 18px;
  }
}

/* The tooltip, by contrast, is purely a hover affordance, so it is suppressed
   by input capability rather than width. There is nothing to reveal it with on
   a touch device, and the accessible name carries the same wording anyway. */
@media (hover: none) {
  .wa-float-tip {
    display: none;
  }

  .wa-float:hover .wa-float-disc {
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .wa-float {
    animation: none;
  }

  .wa-float-disc {
    transition: border-color 200ms ease, box-shadow 200ms ease, color 200ms ease;
  }

  /* Hover still reads clearly through colour and glow; only the movement goes. */
  .wa-float:hover .wa-float-disc,
  .wa-float:focus-visible .wa-float-disc {
    transform: none;
  }

  .wa-float-tip {
    transition: none;
    transform: none;
  }
}

/* ------------------------------------------------------------------ *
 * Content-revision helpers.
 *
 * Small hooks for sections whose revised copy carries five or six items,
 * plus the section intro, list and tagline lines the new content needs.
 * No palette additions: everything references the existing tokens.
 * ------------------------------------------------------------------ */

.section-intro {
  max-width: 780px;
  margin-bottom: var(--content-gap-lg);
}

.section-intro p {
  color: var(--text-secondary);
}

.section-intro p:last-child {
  margin-bottom: 0;
}

/* Five- and six-card grids keep balanced rows instead of orphaning the
   final card; below 901px they inherit the standard grid collapse. */
@media (min-width: 901px) {
  .outcome-grid-5,
  .outcome-grid-6 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .process-grid-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .process-grid-5 .process-card {
    padding-right: 20px;
  }
}

@media (max-width: 900px) {
  /* In the two-column collapse of a five-stage process, the fourth card
     ends its row, so its connector line has nowhere to point. */
  .process-grid-5 .process-card:nth-child(4)::after {
    display: none;
  }
}

.card-grid-4 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

@media (max-width: 640px) {
  .card-grid-4 {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

.cta-panel p + p {
  margin-top: 10px;
}

.cta-panel .cta-tagline {
  margin-top: 16px;
  color: var(--accent);
  font-weight: 600;
}

.proof-note {
  font-size: 0.9rem;
  color: var(--text-muted);
}

.section-footnote {
  max-width: 720px;
  margin: 28px 0 0;
  color: var(--text-secondary);
}

.contact-help-list {
  display: grid;
  gap: 9px;
  margin: 0 0 18px;
  padding: 0;
  list-style: none;
}

.contact-help-list li {
  position: relative;
  padding-left: 22px;
  color: var(--text-secondary);
}

.contact-help-list li::before {
  position: absolute;
  top: 0.52em;
  left: 0;
  width: 8px;
  height: 8px;
  content: "";
  background: var(--accent);
  border-radius: 50%;
}

.contact-tagline {
  margin-top: 22px;
  color: var(--accent);
  font-weight: 600;
}

.ed-tagline {
  color: var(--accent);
  font-weight: 600;
}

/* The revised navigation labels are longer than the originals ("Articles &
   Guides", "Book a Consultation"), so keep each header item on one line and
   tighten the row slightly in the band just above the mobile-menu
   breakpoint. */
.primary-navigation li a,
.site-header .button {
  white-space: nowrap;
}

@media (min-width: 1041px) and (max-width: 1180px) {
  .header-inner {
    gap: 18px;
  }

  .primary-navigation {
    gap: 14px;
  }

  .primary-navigation ul {
    gap: 2px;
  }

  .primary-navigation li a {
    padding: 12px 10px;
    font-size: 0.95rem;
  }
}

@media (min-width: 1041px) and (max-width: 1100px) {
  .header-inner {
    gap: 12px;
  }

  .brand img {
    height: 60px;
  }

  .primary-navigation {
    gap: 10px;
  }

  .primary-navigation li a {
    padding: 12px 8px;
    font-size: 0.92rem;
  }
}

/* The Articles & Guides hero carries no image, so its copy sits in a single
   readable column instead of the two-column page-hero grid. */
.page-hero-solo {
  max-width: 840px;
}

.page-hero-solo .lede {
  max-width: 700px;
}

/* About page: the small side label optically floated a few pixels above the
   cap line of the statement beside it, because the statement's much larger
   type carries more internal leading. The columns already share a grid row,
   so the correction is a top offset that scales with the statement's own
   font-size clamp; the label and the statement then begin on the same
   horizontal line at every desktop width. Below 1024px the columns stack
   and the offset resets. */
.about-movement {
  align-items: start;
}

.about-movement > .ed-label {
  padding-top: calc(clamp(1.9rem, 3.5vw, 3.05rem) * 0.13);
}

.about-overture > .ed-label {
  padding-top: calc(clamp(2.3rem, 4.6vw, 4.1rem) * 0.13);
}

@media (max-width: 1024px) {
  .about-movement > .ed-label,
  .about-overture > .ed-label {
    padding-top: 0;
  }
}

/* Book a Growth Consultation hero. The copy leads on the left at roughly 53
   percent of the hero width and the orbital artwork answers on the right at
   roughly 47 percent, with both columns centred on the same axis. Source
   order is copy then image, so the mobile stack reads heading first without
   any ordering override. The artwork carries a
   baked-in navy background (the source has no alpha channel), so instead of
   the shared circular fade and drop shadow, its four edges dissolve into the
   continuous hero gradient through intersecting edge-fade masks; the orbital
   subject itself stays fully opaque and uncropped. */
.consult-hero-grid {
  align-items: center;
}

.consult-hero .page-hero-visual img {
  width: 100%;
  filter: none;
  -webkit-mask-image:
    linear-gradient(90deg, transparent 0%, #000 30%, #000 84%, transparent 99%),
    linear-gradient(180deg, transparent 0%, #000 11%, #000 82%, transparent 100%);
  mask-image:
    linear-gradient(90deg, transparent 0%, #000 30%, #000 84%, transparent 99%),
    linear-gradient(180deg, transparent 0%, #000 11%, #000 82%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}

@media (min-width: 901px) {
  .consult-hero-grid {
    grid-template-columns: minmax(0, 1.06fr) minmax(0, 0.94fr);
    gap: clamp(28px, 4vw, 52px);
  }

  .consult-hero .page-hero-visual img {
    max-width: 640px;
  }
}

@media (max-width: 900px) {
  .consult-hero-grid {
    grid-template-columns: 1fr;
    gap: 26px;
  }

  .consult-hero .page-hero-visual img {
    max-width: min(560px, 94%);
    margin-inline: auto;
  }
}

/* Client-experience cards on /case-studies/. The summaries are paraphrased
   client feedback, so they render as plain copy rather than blockquotes or
   quotation marks, with the client's name anchored to the card foot so the
   three cards keep a consistent shape. */
.client-experience {
  display: flex;
  flex-direction: column;
}

.client-experience .case-study-tag {
  margin-bottom: 12px;
}

.client-experience ul {
  margin-bottom: 20px;
}

.client-experience-name {
  margin-top: auto;
  padding-top: 14px;
  color: var(--text-primary);
  font-weight: 700;
  border-top: 1px solid var(--border);
}

.form-alert {
  padding: 16px 18px;
  margin-bottom: 22px;
  color: var(--accent);
  font-size: 0.92rem;
  font-weight: 620;
  background: var(--accent-wash);
  border: 1px solid var(--accent-line);
  border-radius: 12px;
}