@font-face {
  font-family: "EB Garamond";
  src:
    url("/assets/fonts/eb-garamond-400.woff2?v=1e351607") format("woff2"),
    url("/assets/fonts/eb-garamond-400.ttf?v=934aa932") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "EB Garamond";
  src:
    url("/assets/fonts/eb-garamond-500.woff2?v=797fe434") format("woff2"),
    url("/assets/fonts/eb-garamond-500.ttf?v=45fad23d") format("truetype");
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}

@font-face {
  font-family: "Instrument Sans";
  src:
    url("/assets/fonts/instrument-sans-400.woff2?v=f5b726fb") format("woff2"),
    url("/assets/fonts/instrument-sans-400.ttf?v=01689ad0") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Instrument Sans";
  src:
    url("/assets/fonts/instrument-sans-500.woff2?v=0b3b16fd") format("woff2"),
    url("/assets/fonts/instrument-sans-500.ttf?v=a7bcb84c") format("truetype");
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}

:root {
  --color-mist: #b6ced5;
  --color-mist-soft: #c8dbe0;
  --color-mist-bright: #dce8eb;
  --color-mist-ink: #14202b;
  --color-mist-muted: #52666e;
  --color-mist-line: rgba(7, 11, 18, 0.18);
  --shell: min(1280px, calc(100vw - 64px));
  --header-height: 77px;
  --ease-ive: cubic-bezier(0.22, 1, 0.36, 1);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  min-width: 280px;
  margin: 0;
  overflow-x: hidden;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.55;
}

body.menu-open {
  overflow: hidden;
}

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

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

button {
  border: 0;
}

a,
button,
summary {
  touch-action: manipulation;
}

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

h1,
h2,
h3,
p,
ol,
ul,
dl,
dd {
  margin-top: 0;
}

::selection {
  background: color-mix(in srgb, var(--color-accent) 32%, transparent);
}

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

[hidden] {
  display: none !important;
}

.shell {
  width: var(--shell);
  margin-inline: auto;
}

.page {
  position: relative;
}

.page-grain {
  position: fixed;
  z-index: 200;
  inset: 0;
  opacity: 0.035;
  pointer-events: none;
  background-repeat: repeat;
  background-size: 160px 160px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns=%22http://www.w3.org/2000/svg%22 width=%22160%22 height=%22160%22><filter id=%22n%22><feTurbulence type=%22fractalNoise%22 baseFrequency=%220.85%22 numOctaves=%222%22/></filter><rect width=%22160%22 height=%22160%22 filter=%22url(%23n)%22/></svg>");
}

.skip-link {
  position: fixed;
  z-index: 400;
  top: 8px;
  left: 8px;
  padding: 10px 14px;
  transform: translateY(-150%);
  background: var(--color-neutral-100);
  color: var(--color-bg);
  border-radius: var(--radius-sm);
}

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

.site-header {
  position: sticky;
  z-index: 100;
  top: 0;
  min-height: var(--header-height);
  background: var(--color-bg-veil);
  border-bottom: 1px solid var(--color-divider);
  backdrop-filter: blur(14px) saturate(140%);
}

.site-header__inner {
  min-height: var(--header-height);
  display: grid;
  grid-template-columns: minmax(260px, 1fr) auto minmax(130px, 1fr);
  align-items: center;
  gap: 28px;
}

.brand {
  display: inline-flex;
  width: max-content;
  align-items: center;
}

.brand__picture {
  display: flex;
  align-items: center;
}

.brand__logo {
  width: 132px;
  height: auto;
}

.primary-nav {
  display: flex;
  align-items: center;
  gap: 30px;
  color: var(--color-neutral-300);
  font-size: 14px;
  letter-spacing: -0.005em;
}

.primary-nav a {
  position: relative;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  padding-block: 8px;
  transition: color 180ms ease;
}

.primary-nav a::after {
  position: absolute;
  right: 0;
  bottom: 2px;
  left: 0;
  height: 1px;
  content: "";
  transform: scaleX(0);
  transform-origin: right;
  background: var(--color-accent-300);
  transition: transform 220ms var(--ease-ive);
}

.primary-nav a:hover,
.primary-nav a[aria-current="page"] {
  color: var(--color-text);
}

.primary-nav a:hover::after,
.primary-nav a[aria-current="page"]::after {
  transform: scaleX(1);
  transform-origin: left;
}

.header-cta {
  justify-self: end;
}

.menu-button {
  min-width: 44px;
  min-height: 44px;
  display: none;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: transparent;
  cursor: pointer;
}

.menu-button i {
  position: relative;
  width: 22px;
  height: 1px;
  background: currentColor;
  transition: transform 220ms var(--ease-ive);
}

.menu-button i::after {
  position: absolute;
  top: 6px;
  left: 0;
  width: 22px;
  height: 1px;
  content: "";
  background: currentColor;
  transition: transform 220ms var(--ease-ive);
}

.menu-button[aria-expanded="true"] i {
  transform: translateY(3px) rotate(45deg);
}

.menu-button[aria-expanded="true"] i::after {
  transform: translateY(-6px) rotate(-90deg);
}

.button {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  padding: 11px 20px;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  transition:
    transform 240ms var(--ease-ive),
    border-color 180ms ease,
    background-color 180ms ease,
    color 180ms ease;
}

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

.button--light {
  background: var(--color-neutral-100);
  color: var(--color-bg);
  box-shadow: var(--shadow-sm);
}

.button--light:hover {
  background: var(--color-neutral-200);
}

.button--outline {
  border-color: var(--color-edge);
  color: var(--color-neutral-300);
  backdrop-filter: blur(6px);
}

.button--outline:hover {
  border-color: var(--color-neutral-400);
  color: var(--color-text);
}

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

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

.eyebrow {
  display: block;
  margin-bottom: 12px;
  color: var(--color-neutral-500);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.13em;
  line-height: 1.25;
  text-transform: uppercase;
}

.eyebrow--ink {
  color: rgba(7, 11, 18, 0.62);
}

.section {
  position: relative;
  padding-block: 128px;
}

.section--mist {
  background: var(--color-mist);
  color: var(--color-mist-ink);
}

.section-title {
  max-width: 920px;
  margin-bottom: 12px;
  font-family: var(--font-heading);
  font-size: clamp(46px, 5vw, 70px);
  font-weight: 400;
  letter-spacing: -0.016em;
  line-height: 0.98;
  text-wrap: pretty;
}

.hero-copy h1,
.section-title,
.cred-title,
.service-section h2,
.contact-band h2,
.portfolio-panel__lead h3 {
  overflow-wrap: anywhere;
}

.section-title--ink {
  color: var(--color-mist-ink);
}

.section-intro {
  max-width: 660px;
  margin-bottom: 40px;
  color: var(--color-neutral-500);
  font-size: 17px;
  letter-spacing: -0.008em;
}

.section-intro--ink {
  color: var(--color-mist-muted);
}

.home-hero {
  position: relative;
  overflow: hidden;
}

.hero-glow {
  position: absolute;
  top: -280px;
  left: 50%;
  width: 1000px;
  height: 680px;
  transform: translateX(-50%);
  pointer-events: none;
  background: radial-gradient(circle, color-mix(in srgb, var(--color-accent) 18%, transparent), transparent 68%);
}

.home-hero__grid {
  position: relative;
  min-height: 740px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 56px;
  padding-block: 104px 116px;
}

.hero-copy h1 {
  margin: 20px 0;
  font-family: var(--font-heading);
  font-size: clamp(58px, 5vw, 72px);
  font-weight: 400;
  letter-spacing: -0.016em;
  line-height: 0.98;
  text-wrap: pretty;
}

.hero-copy .lede {
  max-width: 540px;
  margin-bottom: 32px;
  color: var(--color-neutral-300);
  font-size: 18px;
  letter-spacing: -0.008em;
  text-wrap: pretty;
}

.product-frame {
  position: relative;
  padding: 22px;
  background: var(--color-surface);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  backdrop-filter: blur(10px);
}

.product-frame::before {
  position: absolute;
  top: 8px;
  left: 50%;
  width: 42px;
  height: 2px;
  content: "";
  transform: translateX(-50%);
  background: var(--color-neutral-800);
  border-radius: 999px;
}

.product-frame__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.005em;
}

.live-label {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--color-neutral-500);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.live-label i {
  width: 5px;
  height: 5px;
  background: var(--color-accent-400);
  border-radius: 50%;
  box-shadow: 0 0 10px color-mix(in srgb, var(--color-accent) 60%, transparent);
  animation: pulse 2.4s ease-in-out infinite;
}

.ops-panel__body {
  display: grid;
  grid-template-columns: 164px 1fr;
  gap: 14px;
}

.ops-sites {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ops-sites span {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px 13px;
  background: var(--color-surface-2);
  color: var(--color-neutral-500);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  font-size: 13px;
  letter-spacing: -0.005em;
}

.ops-sites i {
  width: 5px;
  height: 5px;
  background: var(--color-neutral-700);
  border-radius: 50%;
}

.ops-sites .is-live {
  color: var(--color-text);
}

.ops-sites .is-live i {
  background: var(--color-accent-400);
}

.ops-data {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.ops-metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.ops-metrics span {
  min-width: 0;
  padding: 13px;
  background: var(--color-surface-2);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}

.ops-metrics strong {
  display: block;
  font-size: 20px;
  font-weight: 500;
  letter-spacing: -0.04em;
}

.ops-metrics small {
  display: block;
  overflow: hidden;
  color: var(--color-neutral-500);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.traffic-chart {
  position: relative;
  overflow: hidden;
  min-height: 126px;
  padding: 15px;
  background: var(--color-well);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}

.traffic-chart small {
  position: relative;
  color: var(--color-neutral-600);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.traffic-bars {
  position: relative;
  height: 74px;
  display: flex;
  align-items: flex-end;
  gap: 5px;
  margin-top: 10px;
}

.traffic-bars i {
  flex: 1;
  background: var(--color-bar);
  border-radius: 2px;
}

.traffic-bars i:nth-child(1) { height: 40%; }
.traffic-bars i:nth-child(2) { height: 58%; }
.traffic-bars i:nth-child(3) { height: 46%; }
.traffic-bars i:nth-child(4) { height: 72%; }
.traffic-bars i:nth-child(5) { height: 88%; }
.traffic-bars i:nth-child(6) { height: 64%; }
.traffic-bars i:nth-child(7) { height: 52%; }
.traffic-bars i:nth-child(8) { height: 78%; }
.traffic-bars i:nth-child(9) { height: 44%; }
.traffic-bars i:nth-child(10) { height: 60%; }
.traffic-bars i:nth-child(11) { height: 36%; }
.traffic-bars i:nth-child(12) { height: 50%; }

.traffic-bars .is-active {
  background: var(--color-accent-400);
}

.frame-note {
  margin: 14px 0 0;
  color: var(--color-neutral-600);
  font-size: 12px;
  letter-spacing: -0.003em;
}

.need-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}

.need-card {
  min-height: 244px;
  display: flex;
  flex-direction: column;
  padding: 22px;
  background: color-mix(in srgb, var(--color-mist-bright) 52%, transparent);
  border: 1px solid var(--color-mist-line);
  border-radius: var(--radius-lg);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.18);
  transition:
    transform 260ms var(--ease-ive),
    background-color 260ms ease,
    border-color 260ms ease;
}

.need-card:hover {
  transform: translateY(-3px);
  background: var(--color-mist-soft);
  border-color: rgba(7, 11, 18, 0.34);
}

.need-card > span {
  align-self: flex-start;
  padding: 4px 11px;
  border: 1px solid var(--color-mist-line);
  border-radius: 999px;
  color: var(--color-mist-muted);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.need-card h3 {
  margin: 22px 0 10px;
  color: var(--color-mist-ink);
  font-size: 20px;
  font-weight: 500;
  letter-spacing: -0.022em;
  line-height: 1.16;
}

.need-card p {
  margin: auto 0 0;
  color: var(--color-mist-muted);
  font-size: 14px;
  letter-spacing: -0.005em;
}

.portfolio-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 38px 0 18px;
}

.portfolio-tabs button {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 18px;
  background: var(--color-surface);
  border: 1px solid var(--color-divider);
  border-radius: 999px;
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  transition:
    border-color 220ms ease,
    background-color 220ms ease;
}

.portfolio-tabs button:hover,
.portfolio-tabs button[aria-selected="true"] {
  background: var(--color-surface-2);
  border-color: var(--color-accent-500);
}

.portfolio-tabs i {
  width: 5px;
  height: 5px;
  background: var(--color-neutral-700);
  border-radius: 50%;
}

.portfolio-tabs button[aria-selected="true"] i {
  background: var(--color-neutral-100);
}

.portfolio-tabs span {
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.008em;
}

.portfolio-tabs small {
  color: var(--color-neutral-600);
  font-size: 12px;
}

.portfolio-panel {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: 350px 1fr;
  gap: 44px;
  padding: 34px;
  background: var(--area-ground);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}

.area-net,
.portfolio-panel.area-net {
  --area-ground: var(--color-area-net);
}

.area-sec,
.portfolio-panel.area-sec {
  --area-ground: var(--color-area-sec);
}

.area-collab,
.portfolio-panel.area-collab {
  --area-ground: var(--color-area-collab);
}

.area-compute,
.portfolio-panel.area-compute {
  --area-ground: var(--color-area-compute);
}

.area-cloud,
.portfolio-panel.area-cloud {
  --area-ground: var(--color-area-cloud);
}

.area-power,
.portfolio-panel.area-power {
  --area-ground: var(--color-area-power);
}

.portfolio-panel::after {
  position: absolute;
  inset: 0;
  content: "";
  pointer-events: none;
  background: linear-gradient(180deg, var(--color-divider), transparent 40%, rgba(0, 0, 0, 0.18));
}

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

.portfolio-panel__lead h3 {
  margin: 0 0 14px;
  font-family: var(--font-heading);
  font-size: 40px;
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.05;
}

.portfolio-panel__lead > p:not(.eyebrow) {
  margin-bottom: 24px;
  color: var(--color-neutral-300);
  font-size: 15px;
  letter-spacing: -0.006em;
}

.portfolio-panel__services {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}

.portfolio-panel__services a {
  position: relative;
  min-height: 146px;
  display: flex;
  flex-direction: column;
  padding: 16px 42px 16px 18px;
  background: var(--color-bg);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  transition:
    background-color 220ms ease,
    border-color 220ms ease,
    transform 220ms var(--ease-ive);
}

.portfolio-panel__services a:hover {
  transform: translateY(-2px);
  background: var(--color-surface);
  border-color: var(--color-neutral-600);
}

.portfolio-panel__services strong {
  margin-bottom: 5px;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.012em;
}

.portfolio-panel__services span {
  display: -webkit-box;
  overflow: hidden;
  color: var(--color-neutral-500);
  font-size: 13px;
  letter-spacing: -0.004em;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.portfolio-panel__services i {
  position: absolute;
  top: 16px;
  right: 18px;
  color: var(--color-neutral-500);
  font-style: normal;
}

.build-run__grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 80px;
  align-items: start;
}

.service-rows {
  border-top: 1px solid var(--color-mist-line);
}

.service-rows a {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 18px 0;
  border-bottom: 1px solid var(--color-mist-line);
  color: var(--color-mist-ink);
  transition: padding 220ms var(--ease-ive);
}

.service-rows a:hover {
  padding-inline: 10px;
}

.service-rows strong {
  font-weight: 500;
  letter-spacing: -0.01em;
}

.service-rows span {
  color: var(--color-mist-muted);
  font-size: 14px;
}

.proof-heading {
  display: grid;
  grid-template-columns: 1fr 0.55fr;
  gap: 90px;
  align-items: end;
  margin-bottom: 70px;
}

.proof-heading .section-title {
  margin: 0;
}

.proof-heading > p {
  margin: 0 0 8px;
  color: var(--color-neutral-400);
  font-size: 17px;
  letter-spacing: -0.008em;
}

.proof-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--color-divider);
  border-bottom: 1px solid var(--color-divider);
  list-style: none;
}

.proof-grid li {
  min-height: 240px;
  padding: 24px;
  border-right: 1px solid var(--color-divider);
}

.proof-grid li:first-child {
  padding-left: 0;
}

.proof-grid li:last-child {
  border-right: 0;
}

.proof-grid span {
  display: block;
  margin-bottom: 72px;
  color: var(--color-neutral-600);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

.proof-grid strong {
  display: block;
  margin-bottom: 8px;
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.012em;
}

.proof-grid p {
  margin: 0;
  color: var(--color-neutral-500);
  font-size: 13px;
}

.proof-grid em {
  display: block;
  margin-top: 10px;
  color: var(--color-neutral-600);
  font-size: 11px;
  font-style: normal;
  letter-spacing: 0.01em;
}

.proof .cred-groups {
  margin-top: 40px;
}

.proof-note {
  margin: 20px 0 0;
  color: var(--color-neutral-500);
  font-size: 13px;
}

.engagement-detail {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 48px;
  margin-top: 48px;
  padding-top: 40px;
  border-top: 1px solid var(--color-divider);
}

.engagement-detail__col > h3 {
  margin: 0 0 18px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-neutral-600);
}

@media (max-width: 860px) {
  .engagement-detail {
    grid-template-columns: 1fr;
    gap: 36px;
  }
}

.contact-band {
  position: relative;
  background: var(--color-section);
  box-shadow: var(--shadow-sm);
  scroll-margin-top: 120px;
}

.contact-band__inner {
  min-height: 310px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 48px;
  padding-block: 88px;
}

.contact-band h2 {
  max-width: 720px;
  margin: 0 0 12px;
  font-family: var(--font-heading);
  font-size: clamp(42px, 4vw, 56px);
  font-weight: 400;
  letter-spacing: -0.014em;
  line-height: 1.02;
  text-wrap: pretty;
}

.contact-band p {
  max-width: 650px;
  margin: 0;
  color: var(--color-neutral-300);
  font-size: 17px;
  letter-spacing: -0.008em;
}

.site-footer {
  border-top: 1px solid var(--color-divider);
}

.site-footer__inner {
  min-height: 130px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  color: var(--color-neutral-600);
  font-size: 13px;
  letter-spacing: -0.003em;
  flex-wrap: wrap;
  gap: 8px 28px;
}

.site-footer a:hover {
  color: var(--color-text);
}

.service-hero {
  position: relative;
  overflow: hidden;
}

.area-ground {
  position: absolute;
  inset: 0;
  background: var(--area-ground);
}

.area-ground::after {
  position: absolute;
  inset: 0;
  content: "";
  background: linear-gradient(180deg, var(--color-divider), transparent 42%, var(--color-bg-scrim));
}

.service-hero__inner {
  position: relative;
  padding: 34px 0 88px;
}

.breadcrumbs {
  margin-bottom: 34px;
}

.breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 0;
  color: var(--color-neutral-400);
  font-size: 13px;
  letter-spacing: -0.004em;
  list-style: none;
}

.breadcrumbs li {
  display: flex;
  align-items: center;
  gap: 10px;
}

.breadcrumbs li:not(:last-child)::after {
  content: "/";
  opacity: 0.4;
}

.breadcrumbs a:hover {
  color: var(--color-text);
}

.breadcrumbs a,
.breadcrumbs [aria-current="page"] {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

.breadcrumbs [aria-current="page"] {
  color: var(--color-text);
}

.service-hero__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
}

.service-hero .hero-copy h1 {
  font-size: clamp(54px, 4.6vw, 66px);
}

.process-frame {
  min-width: 0;
}

.process-visual {
  min-width: 0;
}

.process-rail {
  width: 100%;
  height: auto;
  overflow: visible;
}

.process-rail__base {
  stroke: var(--color-neutral-700);
  stroke-width: 2;
}

.process-rail__signal {
  stroke: var(--color-accent-300);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 10 12;
  opacity: 0.5;
  animation: signalTravel 12s linear infinite;
}

.process-symbol__disc {
  fill: var(--color-well);
  stroke: var(--color-divider);
  stroke-width: 2;
}

.process-symbol__ring {
  fill: none;
  stroke: var(--color-accent-300);
  stroke-width: 1.5;
  opacity: 0.26;
  animation: symbolRing 7.5s ease-in-out infinite;
}

.process-symbol--two .process-symbol__ring {
  animation-delay: 2.5s;
}

.process-symbol--three .process-symbol__ring {
  animation-delay: 5s;
}

.process-symbol__core {
  fill: none;
  stroke: var(--color-neutral-100);
  stroke-width: 1.8;
}

.process-symbol__icon {
  fill: none;
  stroke: var(--color-neutral-100);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.process-symbol__badge {
  fill: var(--color-accent-200);
}

.process-symbol text {
  fill: var(--color-bg);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  text-anchor: middle;
}

.process-labels {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 34px;
  margin: 4px 0 0;
  padding: 0;
  list-style: none;
}

.process-labels li {
  min-width: 0;
  text-align: center;
}

.process-labels span {
  display: block;
  margin-bottom: 7px;
  color: var(--color-neutral-600);
  font-size: 11px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.section.section--slim {
  padding-block: 54px;
}

.sibling-nav {
  padding: 12px 0 78px;
}

.ms-subhead {
  margin-top: 46px;
}

.ms-note--top,
.ms-note--after,
.ms-faq {
  margin-top: 24px;
}

.ms-crosslink {
  margin-bottom: 24px;
}

.process-labels strong {
  display: block;
  max-width: 190px;
  margin-inline: auto;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.012em;
  line-height: 1.25;
  text-wrap: balance;
}

.process-labels em {
  display: block;
  max-width: 200px;
  margin: 7px auto 0;
  color: var(--color-neutral-500);
  font-size: 11px;
  font-style: normal;
  letter-spacing: 0.1em;
  line-height: 1.45;
  overflow-wrap: anywhere;
  text-transform: uppercase;
}

.process-frame .frame-note {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--color-neutral-400);
}

.process-frame .frame-note i {
  width: 5px;
  height: 5px;
  flex: 0 0 auto;
  background: var(--color-neutral-100);
  border-radius: 50%;
  box-shadow: 0 0 10px color-mix(in srgb, var(--color-accent) 55%, transparent);
  animation: pulse 2.4s ease-in-out infinite;
}

.section-nav {
  position: sticky;
  z-index: 80;
  top: var(--header-height);
  background: var(--color-bg-veil-strong);
  border-bottom: 1px solid var(--color-divider);
  backdrop-filter: blur(14px) saturate(140%);
}

.section-nav__inner {
  min-height: 50px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}

.section-nav__inner > div {
  display: flex;
  gap: 26px;
  color: var(--color-neutral-500);
  font-size: 13px;
  letter-spacing: -0.004em;
}

.section-nav a {
  position: relative;
  padding-block: 15px;
}

.section-nav a::after {
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 1px;
  content: "";
  transform: scaleX(0);
  background: var(--color-accent-300);
  transition: transform 200ms var(--ease-ive);
}

.section-nav a:hover,
.section-nav a.is-current {
  color: var(--color-text);
}

.section-nav a.is-current::after {
  transform: scaleX(1);
}

.section-nav__inner > span {
  color: var(--color-neutral-600);
  font-size: 12px;
}

.service-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 80px;
  align-items: start;
  padding-top: 116px;
}

.service-section {
  padding-bottom: 96px;
  scroll-margin-top: 150px;
}

.service-section h2 {
  margin: 0 0 20px;
  font-family: var(--font-heading);
  font-size: 42px;
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.05;
}

.service-section .answer {
  max-width: 720px;
  margin-bottom: 28px;
  color: var(--color-neutral-300);
  font-size: 19px;
  letter-spacing: -0.008em;
  text-wrap: pretty;
}

.numbered-list {
  margin: 0;
  padding: 0;
  border-bottom: 1px solid var(--color-divider);
  list-style: none;
}

.numbered-list li {
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 16px;
  padding: 15px 0;
  border-top: 1px solid var(--color-divider);
}

.numbered-list span {
  color: var(--color-neutral-600);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

.numbered-list p {
  margin: 0;
  color: var(--color-neutral-300);
  letter-spacing: -0.006em;
}

.fit-list {
  border-bottom: 1px solid var(--color-divider);
}

.fit-list article {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 24px;
  padding: 17px 0;
  border-top: 1px solid var(--color-divider);
}

.fit-list h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.012em;
}

.fit-list p {
  margin: 0;
  color: var(--color-neutral-500);
  letter-spacing: -0.005em;
}

.outcome-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.outcome-grid article {
  min-height: 148px;
  padding: 20px;
  background: var(--color-surface);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.outcome-grid h3 {
  margin: 0 0 8px;
  font-size: 27px;
  font-weight: 500;
  letter-spacing: -0.04em;
  line-height: 1.05;
}

.outcome-grid p {
  margin: 0;
  color: var(--color-neutral-500);
  font-size: 13.5px;
  letter-spacing: -0.004em;
}

.delivery-list {
  margin: 0;
  padding: 0;
  border-bottom: 1px solid var(--color-divider);
  list-style: none;
}

.delivery-list li {
  display: grid;
  grid-template-columns: 88px 220px 1fr;
  gap: 20px;
  align-items: baseline;
  padding: 18px 0;
  border-top: 1px solid var(--color-divider);
}

.delivery-list span {
  color: var(--color-neutral-600);
  font-size: 11px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.delivery-list h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.012em;
}

.delivery-list p {
  margin: 0;
  color: var(--color-neutral-500);
  letter-spacing: -0.005em;
}

.faq-list {
  border-bottom: 1px solid var(--color-divider);
}

.faq-list details {
  border-top: 1px solid var(--color-divider);
}

.faq-list summary {
  min-height: 68px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  cursor: pointer;
  font-weight: 500;
  letter-spacing: -0.01em;
  list-style: none;
}

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

.faq-list summary i {
  color: var(--color-neutral-500);
  font-size: 20px;
  font-style: normal;
  font-weight: 400;
  transition: transform 200ms var(--ease-ive);
}

.faq-list details[open] summary i {
  transform: rotate(45deg);
}

.faq-list details > p {
  max-width: 680px;
  margin: -4px 0 24px;
  color: var(--color-neutral-400);
}

.service-aside {
  position: sticky;
  top: 148px;
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.glance-card {
  padding: 20px;
  background: var(--color-surface);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}

.glance-card dl {
  margin: 0 0 18px;
}

.glance-card dl div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 0;
  border-top: 1px solid var(--color-divider);
  font-size: 13.5px;
}

.glance-card dt {
  color: var(--color-neutral-500);
}

.glance-card dd {
  max-width: 150px;
  margin: 0;
  font-weight: 500;
  text-align: right;
}

.aside-related {
  display: flex;
  flex-direction: column;
}

.aside-related > .eyebrow {
  margin-bottom: 10px;
}

.aside-related a {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 0;
  border-top: 1px solid var(--color-divider);
  font-size: 14px;
}

.aside-related a:last-child {
  border-bottom: 1px solid var(--color-divider);
}

.aside-related i {
  color: var(--color-neutral-600);
  font-style: normal;
}

.sibling-nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 24px 0 128px;
}

.sibling-nav a {
  min-height: 180px;
  display: flex;
  flex-direction: column;
  padding: 22px;
  background: var(--color-surface);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition:
    background-color 220ms ease,
    border-color 220ms ease,
    transform 220ms var(--ease-ive);
}

.sibling-nav a:hover {
  transform: translateY(-2px);
  background: var(--color-accent-900);
  border-color: var(--color-neutral-600);
}

.sibling-nav a:last-child {
  align-items: flex-end;
  text-align: right;
}

.sibling-nav span {
  color: var(--color-neutral-600);
  font-size: 11px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.sibling-nav strong {
  margin: 8px 0 5px;
  font-size: 20px;
  font-weight: 500;
  letter-spacing: -0.022em;
}

.sibling-nav p {
  max-width: 470px;
  margin: 0;
  color: var(--color-neutral-500);
  font-size: 14px;
  letter-spacing: -0.005em;
}

.area-hero .hero-copy h1 {
  font-size: clamp(48px, 4.2vw, 62px);
}

.area-services {
  scroll-margin-top: 90px;
}

.area-service-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  border-top: 1px solid var(--color-mist-line);
}

.area-service-grid a {
  position: relative;
  min-height: 230px;
  display: grid;
  grid-template-columns: 42px 1fr;
  align-content: start;
  padding: 28px 70px 28px 0;
  border-right: 1px solid var(--color-mist-line);
  border-bottom: 1px solid var(--color-mist-line);
  color: var(--color-mist-ink);
  transition: padding 220ms var(--ease-ive);
}

.area-service-grid a:nth-child(even) {
  padding-left: 28px;
  border-right: 0;
}

.area-service-grid a:hover {
  padding-inline-start: 12px;
}

.area-service-grid a:nth-child(even):hover {
  padding-inline-start: 40px;
}

.area-service-grid > a > span {
  color: var(--color-mist-muted);
  font-size: 11px;
}

.area-service-grid h3 {
  margin: 0 0 12px;
  font-size: 26px;
  font-weight: 500;
  letter-spacing: -0.025em;
  line-height: 1.05;
}

.area-service-grid p {
  grid-column: 2;
  margin: 0;
  color: var(--color-mist-muted);
  font-size: 14px;
}

.area-service-grid i {
  position: absolute;
  top: 28px;
  right: 22px;
  font-style: normal;
}

.area-method {
  padding-bottom: 150px;
}

@keyframes pulse {
  0%,
  100% {
    opacity: 0.32;
    transform: scale(0.9);
  }
  50% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes signalTravel {
  to {
    stroke-dashoffset: -44;
  }
}

@keyframes symbolRing {
  0%,
  18%,
  100% {
    opacity: 0.24;
    transform: scale(1);
  }
  8% {
    opacity: 1;
    transform: scale(1.08);
  }
}

@media (max-width: 1120px) {
  :root {
    --shell: min(100% - 48px, 980px);
  }

  .site-header__inner {
    grid-template-columns: 1fr auto;
  }

  .primary-nav {
    display: none;
  }

  .header-cta {
    display: none;
  }

  .menu-button {
    display: flex;
  }

  .primary-nav.is-open {
    position: fixed;
    z-index: 120;
    inset: var(--header-height) 0 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 50px 24px;
    background: var(--color-bg);
  }

  .primary-nav.is-open a {
    padding: 18px 0;
    border-bottom: 1px solid var(--color-divider);
    font-family: var(--font-heading);
    font-size: 36px;
  }

  .home-hero__grid,
  .service-hero__grid {
    grid-template-columns: minmax(0, 0.86fr) minmax(460px, 1.14fr);
    gap: 36px;
  }

  .hero-copy h1 {
    font-size: 56px;
  }

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

  .portfolio-panel {
    grid-template-columns: 300px 1fr;
    gap: 28px;
  }

  .service-layout {
    grid-template-columns: minmax(0, 1fr) 280px;
    gap: 48px;
  }

  .process-labels {
    gap: 20px;
  }
}

@media (max-width: 900px) {
  :root {
    --shell: calc(100% - 40px);
  }

  .section {
    padding-block: 96px;
  }

  .home-hero__grid,
  .service-hero__grid {
    grid-template-columns: 1fr;
  }

  .home-hero__grid {
    padding-block: 84px;
  }

  .service-hero__inner {
    padding-bottom: 72px;
  }

  .hero-copy h1,
  .service-hero .hero-copy h1,
  .area-hero .hero-copy h1 {
    max-width: 760px;
    font-size: clamp(52px, 9vw, 68px);
  }

  .hero-copy .lede {
    max-width: 680px;
  }

  .product-frame {
    max-width: 720px;
  }

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

  .portfolio-panel__lead {
    max-width: 620px;
  }

  .build-run__grid,
  .proof-heading {
    grid-template-columns: 1fr;
    gap: 44px;
  }

  .proof-heading {
    margin-bottom: 50px;
  }

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

  .proof-grid li:nth-child(2) {
    border-right: 0;
  }

  .proof-grid li:nth-child(-n + 2) {
    border-bottom: 1px solid var(--color-divider);
  }

  .proof-grid li:nth-child(3) {
    padding-left: 0;
  }

  .contact-band__inner {
    align-items: flex-start;
    flex-direction: column;
  }

  .section-nav__inner > span {
    display: none;
  }

  .service-layout {
    grid-template-columns: 1fr;
    padding-top: 86px;
  }

  .service-aside {
    position: static;
    display: grid;
    grid-template-columns: 1fr 1fr;
    margin-bottom: 80px;
  }

  .area-service-grid a {
    min-height: 250px;
  }
}

@media (max-width: 680px) {
  :root {
    --shell: calc(100% - 32px);
    --header-height: 70px;
  }

  body {
    font-size: 15px;
  }

  .site-header__inner {
    min-height: var(--header-height);
  }

  .brand__logo {
    width: 112px;
  }

  .section {
    padding-block: 78px;
  }

  .section-title {
    font-size: 46px;
  }

  .home-hero__grid {
    min-height: 0;
    padding-block: 64px 76px;
  }

  .hero-copy h1,
  .service-hero .hero-copy h1,
  .area-hero .hero-copy h1 {
    font-size: clamp(44px, 13vw, 58px);
  }

  .hero-copy .lede {
    font-size: 16px;
  }

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

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

  .product-frame {
    padding: 16px;
  }

  .ops-panel__body {
    grid-template-columns: 1fr;
  }

  .ops-sites {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }

  .ops-sites span:last-child {
    grid-column: 1 / -1;
  }

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

  .need-card {
    min-height: 210px;
  }

  .portfolio-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 6px;
    scrollbar-width: none;
  }

  .portfolio-tabs::-webkit-scrollbar {
    display: none;
  }

  .portfolio-tabs button {
    flex: 0 0 auto;
  }

  .portfolio-panel {
    padding: 22px;
  }

  .portfolio-panel__services {
    grid-template-columns: 1fr;
  }

  .portfolio-panel__services a {
    min-height: 130px;
  }

  .service-rows a {
    align-items: flex-start;
    flex-direction: column;
    gap: 4px;
  }

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

  .proof-grid li {
    min-height: 190px;
    padding-inline: 0;
    border-right: 0;
    border-bottom: 1px solid var(--color-divider);
  }

  .proof-grid li:last-child {
    border-bottom: 0;
  }

  .proof-grid span {
    margin-bottom: 46px;
  }

  .contact-band__inner {
    min-height: 0;
    padding-block: 72px;
  }

  .site-footer__inner {
    align-items: flex-start;
    flex-direction: column;
    justify-content: center;
    gap: 8px;
  }

  .breadcrumbs {
    overflow-x: auto;
    padding-bottom: 4px;
    scrollbar-width: none;
  }

  .breadcrumbs ol {
    flex-wrap: nowrap;
    width: max-content;
  }

  .process-rail {
    display: none;
  }

  .process-labels {
    display: block;
    margin-top: 8px;
    border-left: 1px solid var(--color-neutral-700);
  }

  .process-labels li {
    position: relative;
    padding: 4px 0 30px 34px;
    text-align: left;
  }

  .process-labels li:last-child {
    padding-bottom: 4px;
  }

  .process-labels li::before {
    position: absolute;
    top: 8px;
    left: -5px;
    width: 9px;
    height: 9px;
    content: "";
    background: var(--color-well);
    border: 1px solid var(--color-accent-300);
    border-radius: 50%;
    box-shadow: 0 0 0 5px var(--color-surface);
  }

  .process-labels strong,
  .process-labels em {
    max-width: none;
    margin-inline: 0;
  }

  .section-nav {
    top: var(--header-height);
    overflow-x: auto;
    scrollbar-width: none;
  }

  .section-nav__inner {
    width: max-content;
    min-width: 100%;
    padding-inline: 16px;
  }

  .section-nav__inner > div {
    gap: 20px;
  }

  .service-layout {
    padding-top: 72px;
  }

  .service-section {
    padding-bottom: 76px;
  }

  .service-section h2 {
    font-size: 38px;
  }

  .fit-list article {
    grid-template-columns: 1fr;
    gap: 6px;
  }

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

  .delivery-list li {
    grid-template-columns: 70px 1fr;
  }

  .delivery-list p {
    grid-column: 2;
  }

  .service-aside {
    grid-template-columns: 1fr;
  }

  .sibling-nav {
    grid-template-columns: 1fr;
    padding-bottom: 80px;
  }

  .sibling-nav a:last-child {
    align-items: flex-start;
    text-align: left;
  }

  .area-service-grid {
    grid-template-columns: 1fr;
  }

  .area-service-grid a,
  .area-service-grid a:nth-child(even) {
    min-height: 210px;
    padding: 24px 58px 24px 0;
    border-right: 0;
  }

  .area-service-grid a:nth-child(even):hover,
  .area-service-grid a:hover {
    padding-inline-start: 10px;
  }
}

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

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

@media print {
  .site-header,
  .section-nav,
  .contact-band,
  .site-footer,
  .page-grain,
  .button-row {
    display: none !important;
  }

  body,
  .service-hero,
  .section {
    background: #fff !important;
    color: #000 !important;
  }

  .area-ground {
    display: none;
  }

  .service-layout,
  .service-hero__grid {
    display: block;
  }

  .product-frame,
  .service-aside {
    margin-block: 24px;
    break-inside: avoid;
  }
}

/* Guided infrastructure orientation — conversation map */
.orientation {
  --orientation-ink: #0a141f;
  --orientation-surface: #111f2c;
  --orientation-panel: #f8f8f4;
  --orientation-text: #17242b;
  --orientation-muted: #60717a;
  --orientation-line: rgba(23, 36, 43, 0.15);
  --orientation-blue: var(--color-cds-blue, #2586d8);
  --orientation-blue-deep: var(--color-cds-blue-deep, #176fb9);
  position: relative;
  overflow: clip;
  padding-block: 82px 88px;
  background:
    radial-gradient(circle at 10% 10%, rgba(37, 134, 216, 0.12), transparent 28%),
    radial-gradient(circle at 92% 84%, rgba(95, 149, 125, 0.12), transparent 30%),
    linear-gradient(145deg, #f4f4ef 0%, #e8ebe7 100%);
  color: var(--orientation-text);
  border-block: 1px solid rgba(23, 36, 43, 0.12);
}

.orientation::before {
  position: absolute;
  width: 480px;
  height: 480px;
  top: -270px;
  right: 8vw;
  content: "";
  border: 1px solid rgba(23, 36, 43, 0.08);
  border-radius: 50%;
  pointer-events: none;
}

.orientation__mast {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(300px, 0.75fr);
  align-items: end;
  gap: clamp(54px, 8vw, 126px);
  margin-bottom: 34px;
}

.orientation__heading h2 {
  max-width: 820px;
  margin: 0;
  font-family: var(--font-heading);
  font-size: clamp(58px, 6vw, 90px);
  font-weight: 400;
  letter-spacing: -0.048em;
  line-height: 0.94;
}

.orientation__promise > p:first-child {
  max-width: 470px;
  margin-bottom: 24px;
  color: var(--orientation-muted);
  font-size: 16px;
  line-height: 1.7;
}

.orientation__privacy {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0;
  color: #41545d;
  font-size: 12px;
  font-weight: 500;
}

.orientation__privacy i {
  width: 8px;
  height: 8px;
  background: #5f957d;
  border: 2px solid #e8ebe7;
  border-radius: 50%;
  box-shadow: 0 0 0 1px #5f957d;
}

.orientation-frame {
  position: relative;
  z-index: 1;
  overflow: hidden;
  background: var(--orientation-ink);
  border: 1px solid rgba(23, 36, 43, 0.22);
  border-radius: 18px;
  box-shadow: 0 40px 100px -60px rgba(7, 11, 18, 0.72);
}

.orientation-frame__top {
  min-height: 84px;
  display: grid;
  grid-template-columns: minmax(200px, 1fr) auto 66px;
  align-items: center;
  gap: 28px;
  padding: 0 30px;
  color: var(--color-text);
  background: rgba(7, 17, 27, 0.92);
  border-bottom: 1px solid rgba(238, 242, 247, 0.12);
}

.orientation-frame__top > div {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 3px;
}

.orientation-frame__label {
  color: var(--color-neutral-500);
  font-size: 11px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.orientation-frame__top strong {
  overflow: hidden;
  color: var(--color-neutral-200);
  font-size: 13px;
  font-weight: 400;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.orientation-stepper {
  display: flex;
  align-items: center;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.orientation-stepper li {
  position: relative;
  min-width: 112px;
  display: grid;
  grid-template-columns: 26px 1fr;
  align-items: center;
  color: var(--color-neutral-600);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: color 240ms ease;
}

.orientation-stepper li:not(:last-child)::after {
  position: absolute;
  width: 26px;
  height: 1px;
  right: 9px;
  content: "";
  background: var(--color-neutral-800);
}

.orientation-stepper span {
  font-variant-numeric: tabular-nums;
}

.orientation-stepper b {
  font-weight: 500;
}

.orientation-stepper .is-current,
.orientation-stepper .is-complete {
  color: var(--color-neutral-200);
}

.orientation-stepper .is-current span {
  color: var(--color-accent-300);
}

.orientation-stepper .is-complete span {
  color: #8dbca6;
}

.orientation-progress {
  display: none;
  color: var(--color-neutral-300);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.1em;
  text-align: right;
}

.orientation-workspace {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(440px, 39%);
}

.orientation-stage {
  position: relative;
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding: 30px;
  color: var(--color-neutral-300);
  background:
    radial-gradient(circle at 50% 46%, rgba(37, 134, 216, 0.16), transparent 29%),
    linear-gradient(145deg, #132534 0%, var(--orientation-ink) 70%);
  border-right: 1px solid rgba(238, 242, 247, 0.12);
  isolation: isolate;
}

.orientation-stage::before {
  position: absolute;
  z-index: -1;
  inset: 0;
  content: "";
  background:
    linear-gradient(90deg, rgba(238, 242, 247, 0.035) 1px, transparent 1px),
    linear-gradient(rgba(238, 242, 247, 0.035) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: linear-gradient(to bottom, black 20%, transparent 92%);
}

.signal-field {
  position: relative;
  min-height: 400px;
  flex: 1;
}

.signal-field::before,
.signal-field::after {
  position: absolute;
  top: 50%;
  left: 50%;
  content: "";
  border: 1px solid rgba(238, 242, 247, 0.1);
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

.signal-field::before {
  width: min(430px, 66%);
  aspect-ratio: 1;
}

.signal-field::after {
  width: min(590px, 88%);
  aspect-ratio: 1;
  border-style: dashed;
  opacity: 0.52;
}

.signal-core {
  position: absolute;
  z-index: 3;
  width: 178px;
  min-height: 178px;
  top: 50%;
  left: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 24px;
  transform: translate(-50%, -50%);
  background: rgba(14, 30, 43, 0.94);
  border: 1px solid rgba(142, 197, 245, 0.38);
  border-radius: 50%;
  box-shadow: 0 0 0 14px rgba(37, 134, 216, 0.05), 0 24px 70px rgba(0, 0, 0, 0.36);
  text-align: center;
}

.signal-core i {
  width: 18px;
  height: 18px;
  margin-bottom: 16px;
  transform: rotate(45deg);
  border: 1px solid var(--color-accent-300);
  box-shadow: 0 0 24px rgba(77, 155, 232, 0.44);
}

.signal-core span {
  margin-bottom: 5px;
  color: var(--color-neutral-500);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.signal-core strong {
  max-width: 126px;
  color: var(--color-neutral-200);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.35;
}

.signal-node {
  position: absolute;
  z-index: 2;
  min-width: 150px;
  display: grid;
  grid-template-columns: 28px 1fr;
  column-gap: 11px;
  padding: 14px;
  color: var(--color-neutral-500);
  background: rgba(10, 20, 31, 0.76);
  border: 1px solid rgba(238, 242, 247, 0.12);
  border-radius: 10px;
  opacity: 0.64;
  transition: opacity 280ms ease, border-color 280ms ease, transform 320ms var(--ease-ive), background 280ms ease;
}

.signal-node i {
  grid-row: 1 / 3;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  color: var(--color-neutral-500);
  border: 1px solid rgba(238, 242, 247, 0.18);
  border-radius: 50%;
  font-size: 11px;
  font-style: normal;
}

.signal-node span {
  color: var(--color-neutral-300);
  font-size: 12px;
}

.signal-node small {
  font-size: 11px;
  letter-spacing: 0.04em;
}

.signal-node--people { top: 9%; left: 8%; }
.signal-node--applications { top: 9%; right: 8%; }
.signal-node--sites { right: 8%; bottom: 8%; }
.signal-node--cloud { bottom: 8%; left: 8%; }

.signal-node.is-live {
  color: var(--color-neutral-400);
  opacity: 1;
  transform: translateY(-2px);
}

.signal-node.is-focus {
  background: rgba(20, 47, 67, 0.94);
  border-color: rgba(142, 197, 245, 0.7);
  box-shadow: 0 18px 48px -30px rgba(37, 134, 216, 0.72);
}

.signal-node.is-focus i {
  color: var(--color-accent-300);
  border-color: var(--color-accent-300);
}

.signal-line {
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 50%;
  height: 1px;
  width: 29%;
  background: linear-gradient(90deg, rgba(142, 197, 245, 0.48), transparent);
  opacity: 0.26;
  transform-origin: left;
  transition: opacity 280ms ease, background 280ms ease;
}

.signal-line--people { transform: rotate(218deg); }
.signal-line--applications { transform: rotate(322deg); }
.signal-line--sites { transform: rotate(38deg); }
.signal-line--cloud { transform: rotate(142deg); }

.signal-field[data-env] .signal-line { opacity: 0.62; }
.signal-field.is-resolved .signal-line {
  opacity: 1;
  background: linear-gradient(90deg, var(--color-accent-300), rgba(142, 197, 245, 0.08));
}

/* Resolution reads as convergence: the four paths brighten toward the core
   one after another, then the core ignites. The delays live only under
   .is-resolved, so leaving the resolved state reverts immediately —
   entrances are sequenced, exits are not. */
.signal-field.is-resolved .signal-line--people { transition-delay: 0ms; }
.signal-field.is-resolved .signal-line--applications { transition-delay: 80ms; }
.signal-field.is-resolved .signal-line--sites { transition-delay: 160ms; }
.signal-field.is-resolved .signal-line--cloud { transition-delay: 240ms; }

.signal-core {
  transition: border-color 280ms ease, box-shadow 420ms var(--ease-ive);
}

.signal-field.is-resolved .signal-core {
  border-color: var(--color-accent-300);
  box-shadow: 0 0 0 14px rgba(37, 134, 216, 0.08), 0 0 80px rgba(37, 134, 216, 0.2);
  transition-delay: 300ms;
}

.orientation-readout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin: 0;
  border-top: 1px solid rgba(238, 242, 247, 0.12);
  border-bottom: 1px solid rgba(238, 242, 247, 0.12);
}

.orientation-readout div {
  min-width: 0;
  padding: 15px 0;
}

.orientation-readout div + div {
  padding-left: 22px;
  border-left: 1px solid rgba(238, 242, 247, 0.12);
}

.orientation-readout dt {
  margin-bottom: 3px;
  color: var(--color-neutral-500);
  font-size: 11px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.orientation-readout dd {
  overflow: hidden;
  margin: 0;
  color: var(--color-neutral-300);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.orientation-stage__caption {
  margin: 14px 0 0;
  color: var(--color-neutral-500);
  font-size: 11px;
  line-height: 1.5;
}

.orientation-panel {
  position: relative;
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding: clamp(38px, 3.4vw, 52px) clamp(34px, 3.4vw, 50px) 30px;
  scroll-margin-top: calc(var(--header-height) + 12px);
  background: var(--orientation-panel);
}

.orientation-screen {
  animation: orientation-enter 440ms var(--ease-ive) both;
}

.orientation-screen h3 {
  max-width: 460px;
  margin: 0 0 16px;
  font-family: var(--font-heading);
  font-size: clamp(39px, 3.25vw, 50px);
  font-weight: 400;
  letter-spacing: -0.038em;
  line-height: 0.98;
}

.orientation-screen h3:focus { outline: 0; }

.orientation-kicker {
  margin: 0 0 28px;
  color: var(--orientation-blue-deep);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.orientation-help {
  max-width: 440px;
  margin-bottom: 25px;
  color: var(--orientation-muted);
  font-size: 13px;
  line-height: 1.62;
}

.orientation-options { display: grid; }

.orientation-options button {
  position: relative;
  width: 100%;
  color: #31454d;
  background: transparent;
  cursor: pointer;
  text-align: left;
}

.orientation-options--environment {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.orientation-options--environment button {
  min-height: 116px;
  display: grid;
  grid-template-columns: 27px 1fr;
  gap: 12px;
  padding: 18px 16px;
  background: #ffffff;
  border: 1px solid rgba(23, 36, 43, 0.14);
  border-radius: 10px;
  transition: border-color 200ms ease, background 200ms ease, transform 240ms var(--ease-ive);
}

.orientation-options--environment button:hover {
  transform: translateY(-2px);
  background: #f4f8fa;
  border-color: rgba(37, 134, 216, 0.42);
}

.orientation-options--environment button.is-selected {
  background: #edf6fd;
  border-color: var(--orientation-blue);
  box-shadow: 0 0 0 1px rgba(37, 134, 216, 0.18) inset;
}

.orientation-options--environment button::after {
  position: absolute;
  width: 18px;
  height: 18px;
  top: 13px;
  right: 13px;
  content: "✓";
  display: grid;
  place-items: center;
  color: white;
  background: var(--orientation-blue-deep);
  border-radius: 50%;
  font-size: 11px;
  opacity: 0;
  transform: scale(0.65);
  transition: opacity 180ms ease, transform 240ms var(--ease-ive);
}

.orientation-options--environment button.is-selected::after {
  opacity: 1;
  transform: scale(1);
}

.orientation-options--environment button > i {
  color: var(--orientation-blue-deep);
  font-size: 11px;
  font-style: normal;
  letter-spacing: 0.08em;
}

.orientation-options--environment button > span {
  display: flex;
  min-width: 0;
  flex-direction: column;
}

.orientation-options--environment strong {
  max-width: 150px;
  margin-bottom: 7px;
  padding-right: 10px;
  color: var(--orientation-text);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.32;
}

.orientation-options--environment small {
  color: var(--orientation-muted);
  font-size: 11px;
  line-height: 1.4;
}

.orientation-options--symptoms {
  border-top: 1px solid var(--orientation-line);
}

.orientation-options--symptoms button {
  min-height: 50px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 11px 4px;
  border-bottom: 1px solid var(--orientation-line);
  font-size: 12px;
  transition: color 180ms ease, padding 220ms var(--ease-ive);
}

.orientation-options--symptoms button:hover { padding-left: 9px; }

.orientation-options--symptoms button i {
  position: relative;
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  border: 1px solid rgba(23, 36, 43, 0.32);
  border-radius: 50%;
  transition: background 200ms ease, border-color 200ms ease, transform 220ms ease;
}

.orientation-options--symptoms button i::after {
  position: absolute;
  width: 6px;
  height: 3px;
  top: 5px;
  left: 5px;
  content: "";
  border-bottom: 1.5px solid white;
  border-left: 1.5px solid white;
  opacity: 0;
  transform: rotate(-45deg);
}

.orientation-options--symptoms button.is-selected i {
  background: var(--orientation-blue-deep);
  border-color: var(--orientation-blue-deep);
}

.orientation-options--symptoms button.is-selected i::after { opacity: 1; }

.orientation-selection {
  margin: 13px 0 0;
  color: var(--orientation-muted);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.orientation.is-at-limit .orientation-selection {
  animation: orientation-limit 420ms ease;
  color: #b44942;
}

.orientation-controls {
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-top: 26px;
}

.orientation-next { min-width: 136px; margin-left: auto; }

.orientation .button--light {
  color: #ffffff;
  background: var(--orientation-blue-deep);
  box-shadow: 0 16px 32px -22px rgba(23, 111, 185, 0.72);
}

.orientation .button--light:hover { background: #125d9f; }

.orientation-next:disabled {
  color: #829098;
  background: rgba(23, 36, 43, 0.08);
  box-shadow: none;
  cursor: not-allowed;
}

.orientation-back,
.orientation-restart {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 0;
  color: var(--orientation-muted);
  background: transparent;
  cursor: pointer;
  font-size: 12px;
}

.orientation-result__summary {
  max-width: 460px;
  margin: 0 0 20px;
  color: #31454d;
  font-size: 13px;
  line-height: 1.62;
}

.orientation-result ol {
  margin: 0 0 18px;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--orientation-line);
}

.orientation-result li {
  min-height: 49px;
  display: grid;
  grid-template-columns: 32px 1fr;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid var(--orientation-line);
}

.orientation-result li span {
  color: var(--orientation-blue-deep);
  font-family: var(--font-heading);
  font-size: 16px;
}

.orientation-result li strong { font-size: 12px; font-weight: 400; }

.orientation-disclaimer {
  margin-bottom: 18px;
  color: var(--orientation-muted);
  font-size: 11px;
  line-height: 1.55;
}

.orientation-result__actions {
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  gap: 16px;
}

.orientation-brief {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  padding-block: 4px;
  color: #31454d;
  font-size: 11px;
}

.orientation-brief span { display: inline-block; margin-left: 4px; transition: transform 200ms ease; }
.orientation-brief:hover span { transform: translate(2px, -2px); }

.orientation-noscript {
  margin: 0;
  padding: 16px 24px;
  color: var(--color-neutral-300);
  border-top: 1px solid rgba(238, 242, 247, 0.12);
  font-size: 12px;
}

.orientation-noscript a { color: var(--color-accent-300); text-decoration: underline; }

@keyframes orientation-enter {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes orientation-limit {
  25%, 75% { transform: translateX(-3px); }
  50% { transform: translateX(3px); }
}

@media (max-width: 1120px) {
  .orientation { padding-block: 72px 78px; }
  .orientation__mast { grid-template-columns: 1fr; align-items: start; gap: 28px; }
  .orientation__promise > p:first-child { max-width: 620px; }
  .orientation-workspace { grid-template-columns: minmax(0, 1fr) 430px; }
  .signal-node--people, .signal-node--cloud { left: 2%; }
  .signal-node--applications, .signal-node--sites { right: 2%; }
}

@media (max-width: 900px) {
  .orientation-frame__top { grid-template-columns: 1fr auto; }
  .orientation-stepper { display: none; }
  .orientation-progress { display: block; }
  .orientation-workspace { grid-template-columns: 1fr; }
  .orientation-stage { border-right: 0; border-bottom: 1px solid rgba(238, 242, 247, 0.12); }
  .signal-field { min-height: 350px; }
}

@media (max-width: 680px) {
  .orientation { padding-block: 52px 58px; }
  .orientation__mast { gap: 18px; margin-bottom: 28px; }
  .orientation__heading h2 { font-size: clamp(46px, 13vw, 58px); }
  .orientation__promise > p:first-child { margin-bottom: 18px; font-size: 14px; }
  .orientation-frame { width: calc(100% - 20px); border-radius: 12px; }
  .orientation-frame__top { min-height: 70px; padding-inline: 18px; }
  .orientation-frame__top strong { max-width: 210px; }
  .orientation-stage { padding: 18px; }
  .signal-field { min-height: 270px; }
  .signal-field::before { width: 60%; }
  .signal-field::after { width: 86%; }
  .signal-core { width: 126px; min-height: 126px; padding: 15px; }
  .signal-core i { width: 14px; height: 14px; margin-bottom: 11px; }
  .signal-core span { font-size: 7px; }
  .signal-core strong { max-width: 98px; font-size: 11px; }
  .signal-node { min-width: 106px; grid-template-columns: 22px 1fr; gap: 7px; padding: 9px; }
  .signal-node i { width: 22px; height: 22px; font-size: 7px; }
  .signal-node span { font-size: 11px; }
  .signal-node small { display: none; }
  .signal-node--people { top: 3%; left: 0; }
  .signal-node--applications { top: 3%; right: 0; }
  .signal-node--sites { right: 0; bottom: 3%; }
  .signal-node--cloud { bottom: 3%; left: 0; }
  .orientation-readout { grid-template-columns: 1fr; }
  .orientation-readout div { padding-block: 11px; }
  .orientation-readout div + div { padding-left: 0; border-top: 1px solid rgba(238, 242, 247, 0.12); border-left: 0; }
  .orientation-stage__caption { font-size: 11px; }
  .orientation-panel { padding: 30px 20px 24px; }
  .orientation-screen h3 { font-size: 39px; }
  .orientation-kicker { margin-bottom: 23px; }
  .orientation-options--environment button { min-height: 112px; padding: 15px 13px; }
  .orientation-options--environment strong { font-size: 13px; }
  .orientation-result__actions { align-items: stretch; }
  .orientation-result__actions .button { width: 100%; }
  .orientation-brief { text-align: center; }
}

@media (hover: none) {
  .orientation-options--environment button:hover { transform: none; }
  .orientation-options--symptoms button:hover { padding-left: 4px; }
}

@media (prefers-reduced-motion: reduce) {
  .orientation-screen { animation: none; }
  .signal-node, .signal-line, .signal-core { transition: none; }
}

@media print {
  .orientation { display: none; }
}

/* Mineral editorial colour system */
:root {
  --color-ink: #08111b;
  --color-deep-slate: #111d28;
  --color-cds-blue: #2586d8;
  --color-cds-blue-deep: #176fb9;
  --color-cds-blue-soft: #eaf5ff;
  --color-porcelain: #f1f2ee;
  --color-warm-paper: #e8e7e1;
  --color-graphite: #202a32;
  --color-copy-muted: #627078;
  --color-mineral-sky: #9fbccb;
  --color-smoked-plum: #b59fac;
  --color-eucalyptus: #9fb5a8;
  --color-titanium: #adb6bc;
  --color-periwinkle: #aaafc8;
  --color-champagne: #c5ad86;
  --color-copper: #c98f72;
  --light-line: rgba(32, 42, 50, 0.14);
  --light-line-strong: rgba(32, 42, 50, 0.24);
}

.area-net,
.portfolio-panel.area-net {
  --portfolio-tone: var(--color-mineral-sky);
  --portfolio-deep: #142532;
  --portfolio-paper: #e4ebeb;
}

.area-sec,
.portfolio-panel.area-sec {
  --portfolio-tone: var(--color-smoked-plum);
  --portfolio-deep: #291c27;
  --portfolio-paper: #ebe4e6;
}

.area-collab,
.portfolio-panel.area-collab {
  --portfolio-tone: var(--color-eucalyptus);
  --portfolio-deep: #172820;
  --portfolio-paper: #e3e9e3;
}

.area-compute,
.portfolio-panel.area-compute {
  --portfolio-tone: var(--color-titanium);
  --portfolio-deep: #202830;
  --portfolio-paper: #e5e8e8;
}

.area-cloud,
.portfolio-panel.area-cloud {
  --portfolio-tone: var(--color-periwinkle);
  --portfolio-deep: #202139;
  --portfolio-paper: #e6e5ec;
}

.area-power,
.portfolio-panel.area-power {
  --portfolio-tone: var(--color-champagne);
  --portfolio-deep: #2d2619;
  --portfolio-paper: #ece7de;
}

body {
  background: var(--color-ink);
}

main > section[id] {
  scroll-margin-top: calc(var(--header-height) + 18px);
}

.home-hero {
  color: var(--color-ink);
  background:
    radial-gradient(circle at 78% 24%, rgba(182, 218, 247, 0.24), transparent 30%),
    radial-gradient(circle at 32% 78%, rgba(20, 90, 155, 0.22), transparent 36%),
    linear-gradient(145deg, #2586d8 0%, #176fb9 46%, #0d4f8d 100%);
}

.home-hero .eyebrow {
  color: rgba(8, 17, 27, 0.56);
}

.home-hero .hero-copy h1 {
  color: var(--color-graphite);
}

.home-hero .hero-copy .lede {
  color: rgba(8, 17, 27, 0.72);
}

.home-hero .button--light {
  color: #ffffff;
  background: var(--color-ink);
}

.home-hero .button--light:hover {
  background: var(--color-graphite);
}

.home-hero .button--outline {
  color: var(--color-ink);
  border-color: rgba(8, 17, 27, 0.34);
}

.home-hero .button--outline:hover {
  color: #ffffff;
  background: rgba(8, 17, 27, 0.92);
  border-color: rgba(8, 17, 27, 0.92);
}

.home-hero .product-frame {
  color: var(--color-text);
}

.hero-glow {
  background: radial-gradient(
    ellipse,
    color-mix(in srgb, var(--color-mineral-sky) 16%, transparent),
    transparent 68%
  );
}

.start-section {
  color: var(--color-graphite);
  background:
    radial-gradient(circle at 92% 4%, rgba(159, 188, 203, 0.2), transparent 23%),
    var(--color-porcelain);
}

.start-section .section-title--ink,
.start-section .need-card h3 {
  color: var(--color-graphite);
}

.start-section .section-intro--ink,
.start-section .need-card p {
  color: var(--color-copy-muted);
}

.start-section .eyebrow--ink {
  color: rgba(32, 42, 50, 0.64);
}

.need-card {
  --need-tone: var(--color-mineral-sky);
  position: relative;
  overflow: hidden;
  background: rgba(255, 255, 252, 0.68);
  border-color: var(--light-line);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.42) inset,
    0 24px 54px -42px rgba(32, 42, 50, 0.35);
}

.need-card:nth-child(2) {
  --need-tone: var(--color-smoked-plum);
}

.need-card:nth-child(3) {
  --need-tone: var(--color-eucalyptus);
}

.need-card:nth-child(4) {
  --need-tone: var(--color-titanium);
}

.need-card::before {
  position: absolute;
  width: 82%;
  height: 80%;
  top: -54%;
  right: -28%;
  content: "";
  background: radial-gradient(circle, color-mix(in srgb, var(--need-tone) 42%, transparent), transparent 68%);
  border-radius: 50%;
  opacity: 0.62;
  pointer-events: none;
}

.need-card > * {
  position: relative;
}

.need-card:hover {
  background: rgba(255, 255, 252, 0.92);
  border-color: color-mix(in srgb, var(--need-tone) 58%, var(--light-line));
}

.need-card > span {
  color: color-mix(in srgb, var(--need-tone) 68%, var(--color-graphite));
  border-color: color-mix(in srgb, var(--need-tone) 55%, var(--light-line));
}

.portfolio {
  color: var(--color-graphite);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.18), transparent 18%),
    var(--color-warm-paper);
}

.portfolio .section-title {
  color: var(--color-graphite);
}

.portfolio .section-intro,
.portfolio .eyebrow {
  color: var(--color-copy-muted);
}

.portfolio-tabs button {
  --tab-tone: var(--color-titanium);
  color: var(--color-graphite);
  background: rgba(248, 248, 244, 0.56);
  border-color: var(--light-line);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.54) inset;
}

.portfolio-tabs button[data-area-tab="net"] {
  --tab-tone: var(--color-mineral-sky);
}

.portfolio-tabs button[data-area-tab="sec"] {
  --tab-tone: var(--color-smoked-plum);
}

.portfolio-tabs button[data-area-tab="collab"] {
  --tab-tone: var(--color-eucalyptus);
}

.portfolio-tabs button[data-area-tab="compute"] {
  --tab-tone: var(--color-titanium);
}

.portfolio-tabs button[data-area-tab="cloud"] {
  --tab-tone: var(--color-periwinkle);
}

.portfolio-tabs button[data-area-tab="power"] {
  --tab-tone: var(--color-champagne);
}

.portfolio-tabs button:hover {
  background: color-mix(in srgb, var(--tab-tone) 18%, var(--color-porcelain));
  border-color: color-mix(in srgb, var(--tab-tone) 66%, var(--light-line));
}

.portfolio-tabs button[aria-selected="true"] {
  color: var(--color-graphite);
  background: color-mix(in srgb, var(--tab-tone) 40%, var(--color-porcelain));
  border-color: color-mix(in srgb, var(--tab-tone) 78%, var(--color-graphite));
}

.portfolio-tabs i,
.portfolio-tabs button[aria-selected="true"] i {
  background: color-mix(in srgb, var(--tab-tone) 72%, var(--color-graphite));
}

.portfolio-tabs small {
  color: rgba(32, 42, 50, 0.58);
}

.portfolio-panel {
  color: var(--color-graphite);
  background:
    radial-gradient(circle at 14% 18%, color-mix(in srgb, var(--portfolio-tone) 34%, transparent), transparent 28%),
    color-mix(in srgb, var(--portfolio-tone) 18%, var(--color-porcelain));
  border-color: color-mix(in srgb, var(--portfolio-tone) 42%, var(--light-line));
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.48) inset,
    0 34px 72px -52px rgba(32, 42, 50, 0.45);
}

.portfolio-panel::after {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.22), transparent 42%, rgba(32, 42, 50, 0.04));
}

.portfolio-panel .eyebrow,
.portfolio-panel__lead > p:not(.eyebrow) {
  color: color-mix(in srgb, var(--portfolio-tone) 44%, var(--color-graphite));
}

.portfolio-panel .button--outline {
  color: var(--color-graphite);
  border-color: color-mix(in srgb, var(--portfolio-tone) 44%, var(--color-graphite));
}

.portfolio-panel .button--outline:hover {
  color: var(--color-ink);
  background: rgba(255, 255, 252, 0.48);
}

.portfolio-panel__services a {
  color: var(--color-graphite);
  background: rgba(250, 250, 247, 0.68);
  border-color: color-mix(in srgb, var(--portfolio-tone) 32%, var(--light-line));
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.52) inset;
}

.portfolio-panel__services a:hover {
  background: rgba(255, 255, 252, 0.95);
  border-color: color-mix(in srgb, var(--portfolio-tone) 44%, var(--color-graphite));
}

.portfolio-panel__services span,
.portfolio-panel__services i {
  color: var(--color-copy-muted);
}

.build-run {
  color: var(--color-graphite);
  background:
    radial-gradient(circle at 12% 30%, rgba(159, 181, 168, 0.38), transparent 28%),
    #dce3dc;
}

.build-run .section-title--ink {
  color: var(--color-graphite);
}

.build-run .section-intro--ink,
.build-run .eyebrow--ink {
  color: color-mix(in srgb, var(--color-eucalyptus) 54%, var(--color-graphite));
}

.build-run .service-rows {
  border-color: var(--light-line);
}

.build-run .service-rows a {
  color: var(--color-graphite);
  border-color: var(--light-line);
}

.build-run .service-rows a:hover {
  color: var(--color-ink);
  background: rgba(255, 255, 252, 0.24);
}

.build-run .service-rows span {
  color: var(--color-copy-muted);
}

.proof {
  color: var(--color-graphite);
  background:
    linear-gradient(90deg, transparent, rgba(197, 173, 134, 0.08), transparent),
    var(--color-porcelain);
}

.proof .section-title {
  color: var(--color-graphite);
}

.proof .eyebrow,
.proof-heading > p,
.proof-grid p {
  color: var(--color-copy-muted);
}

.proof-grid {
  border-color: var(--light-line);
}

.proof-grid li {
  border-color: var(--light-line);
}

.proof-grid span {
  color: color-mix(in srgb, var(--color-champagne) 76%, var(--color-graphite));
}

.contact-band {
  overflow: hidden;
  background:
    radial-gradient(circle at 78% 110%, rgba(77, 155, 232, 0.16), transparent 32%),
    var(--color-deep-slate);
}

.contact-band::before {
  position: absolute;
  height: 1px;
  top: 0;
  right: 0;
  left: 0;
  content: "";
  background: linear-gradient(90deg, transparent, var(--portfolio-tone, var(--color-mineral-sky)), var(--color-mist), transparent);
  opacity: 0.7;
}

.area-ground {
  background:
    radial-gradient(circle at 74% 34%, color-mix(in srgb, var(--portfolio-tone) 18%, transparent), transparent 28%),
    radial-gradient(circle at 20% 80%, color-mix(in srgb, var(--portfolio-tone) 8%, transparent), transparent 34%),
    linear-gradient(145deg, var(--portfolio-deep), var(--color-ink) 72%);
}

.process-frame {
  background: color-mix(in srgb, var(--portfolio-deep) 58%, var(--color-deep-slate));
  border-color: color-mix(in srgb, var(--portfolio-tone) 28%, var(--color-divider));
}

.process-symbol__ring,
.process-symbol__core,
.process-symbol__icon,
.process-rail__signal {
  stroke: var(--portfolio-tone);
}

.process-symbol__disc {
  fill: color-mix(in srgb, var(--portfolio-tone) 10%, var(--color-well));
}

.page--area .area-services {
  color: var(--color-graphite);
  background:
    radial-gradient(circle at 90% 8%, color-mix(in srgb, var(--portfolio-tone) 26%, transparent), transparent 24%),
    var(--portfolio-paper);
}

.page--area .area-services .section-title--ink {
  color: var(--color-graphite);
}

.page--area .area-services .section-intro--ink,
.page--area .area-services .eyebrow--ink {
  color: color-mix(in srgb, var(--portfolio-tone) 44%, var(--color-graphite));
}

.page--area .area-service-grid {
  border-color: var(--light-line);
}

.page--area .area-service-grid a {
  color: var(--color-graphite);
  border-color: var(--light-line);
}

.page--area .area-service-grid a:hover {
  background: rgba(255, 255, 252, 0.2);
}

.page--area .area-service-grid > a > span,
.page--area .area-service-grid p {
  color: var(--color-copy-muted);
}

.page--area .area-service-grid i {
  color: color-mix(in srgb, var(--portfolio-tone) 44%, var(--color-graphite));
}

.page--area .area-method {
  color: var(--color-graphite);
  background: var(--color-porcelain);
}

.page--area .area-method .section-title {
  color: var(--color-graphite);
}

.page--area .area-method .eyebrow,
.page--area .area-method .proof-heading > p,
.page--area .area-method .proof-grid p {
  color: var(--color-copy-muted);
}

.page--area .area-method .proof-grid,
.page--area .area-method .proof-grid li {
  border-color: var(--light-line);
}

.page--area .area-method .proof-grid span {
  color: color-mix(in srgb, var(--portfolio-tone) 44%, var(--color-graphite));
}

.page--service main {
  background: var(--color-porcelain);
}

.page--service .service-hero,
.page--service .section-nav,
.page--service .contact-band {
  color: var(--color-text);
}

.page--service .service-layout,
.page--service .sibling-nav {
  color: var(--color-graphite);
}

.page--service .service-section .eyebrow,
.page--service .aside-related .eyebrow {
  color: color-mix(in srgb, var(--portfolio-tone) 44%, var(--color-graphite));
}

.page--service .service-section .answer,
.page--service .numbered-list p,
.page--service .fit-list p,
.page--service .outcome-grid p,
.page--service .delivery-list p,
.page--service .faq-list details > p,
.page--service .aside-related a,
.page--service .sibling-nav p {
  color: var(--color-copy-muted);
}

.page--service .numbered-list,
.page--service .numbered-list li,
.page--service .fit-list,
.page--service .fit-list article,
.page--service .delivery-list,
.page--service .delivery-list li,
.page--service .faq-list,
.page--service .faq-list details,
.page--service .aside-related a {
  border-color: var(--light-line);
}

.page--service .numbered-list span,
.page--service .delivery-list span,
.page--service .faq-list summary i,
.page--service .aside-related i,
.page--service .sibling-nav span {
  color: color-mix(in srgb, var(--portfolio-tone) 44%, var(--color-graphite));
}

.page--service .outcome-grid article {
  background:
    radial-gradient(circle at 100% 0, color-mix(in srgb, var(--portfolio-tone) 18%, transparent), transparent 44%),
    rgba(255, 255, 252, 0.7);
  border-color: color-mix(in srgb, var(--portfolio-tone) 34%, var(--light-line));
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.72) inset,
    0 24px 54px -48px rgba(32, 42, 50, 0.38);
}

.page--service .glance-card {
  color: var(--color-text);
  background:
    radial-gradient(circle at 100% 0, color-mix(in srgb, var(--portfolio-tone) 18%, transparent), transparent 42%),
    color-mix(in srgb, var(--portfolio-deep) 64%, var(--color-deep-slate));
  border-color: color-mix(in srgb, var(--portfolio-tone) 26%, var(--color-divider));
}

.page--service .glance-card dl div {
  border-color: rgba(238, 242, 247, 0.1);
}

.page--service .glance-card dt {
  color: var(--color-neutral-500);
}

.page--service .sibling-nav a {
  color: var(--color-graphite);
  background:
    linear-gradient(145deg, rgba(255, 255, 252, 0.74), transparent),
    color-mix(in srgb, var(--portfolio-tone) 12%, var(--color-porcelain));
  border-color: color-mix(in srgb, var(--portfolio-tone) 32%, var(--light-line));
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.62) inset;
}

.page--service .sibling-nav a:hover {
  color: var(--color-graphite);
  background: color-mix(in srgb, var(--portfolio-tone) 22%, var(--color-porcelain));
  border-color: color-mix(in srgb, var(--portfolio-tone) 44%, var(--color-graphite));
}

.page--service .service-aside .button--light {
  background: var(--color-porcelain);
  color: var(--color-ink);
}

.page--service .service-section h2,
.page--service .fit-list h3,
.page--service .outcome-grid h3,
.page--service .delivery-list h3,
.page--service .faq-list summary,
.page--service .sibling-nav strong {
  color: var(--color-graphite);
}

@media (max-width: 680px) {
  .portfolio-panel {
    background:
      radial-gradient(circle at 78% 4%, color-mix(in srgb, var(--portfolio-tone) 32%, transparent), transparent 24%),
      color-mix(in srgb, var(--portfolio-tone) 16%, var(--color-porcelain));
  }

  .page--service .glance-card {
    background:
      radial-gradient(circle at 100% 0, color-mix(in srgb, var(--portfolio-tone) 18%, transparent), transparent 44%),
      var(--portfolio-deep);
  }
}

/* ── Managed services ─────────────────────────────────────────────────────
   A fourth engagement mode alongside the six portfolio areas. Copper was the
   one tone left unclaimed in the mineral system; it reads as "operated"
   rather than "built" without adding a hue to the palette. */

.area-managed {
  --portfolio-tone: var(--color-copper);
  --portfolio-deep: #2b1d17;
  --portfolio-paper: #ece3de;
}

.page--managed main > section[id],
.page--managed .service-section {
  scroll-margin-top: calc(var(--header-height) + 70px);
}

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

/* A light section on a page whose shell is otherwise ink. Mirrors the
   .page--area .area-method treatment so the two never disagree. */
.ms-paper {
  color: var(--color-graphite);
  background:
    radial-gradient(circle at 88% 6%, color-mix(in srgb, var(--portfolio-tone) 20%, transparent), transparent 26%),
    var(--color-porcelain);
}

.ms-paper .section-title,
.ms-paper .section-title--ink,
.ms-paper .delivery-list h3,
.ms-paper .proof-grid strong,
.ms-paper h3 {
  color: var(--color-graphite);
}

.ms-paper .eyebrow,
.ms-paper .eyebrow--ink {
  color: color-mix(in srgb, var(--portfolio-tone) 44%, var(--color-graphite));
}

.ms-paper .section-intro,
.ms-paper .section-intro--ink,
.ms-paper .proof-heading > p,
.ms-paper .proof-grid p,
.ms-paper .delivery-list p,
.ms-paper .numbered-list p {
  color: var(--color-copy-muted);
}

.ms-paper .proof-grid,
.ms-paper .proof-grid li,
.ms-paper .delivery-list,
.ms-paper .delivery-list li,
.ms-paper .numbered-list,
.ms-paper .numbered-list li {
  border-color: var(--light-line);
}

.ms-paper .proof-grid span,
.ms-paper .delivery-list span,
.ms-paper .numbered-list span {
  color: color-mix(in srgb, var(--portfolio-tone) 44%, var(--color-graphite));
}

/* Service inclusion tables. The brochure's qualifiers ("Optional / Tiered",
   "License-dependent", "As per SLA") carry commercial meaning, so every cell
   states its own words — no glyph stands in for a condition. */
/* The service-content column is a grid item; without min-width:0 it inherits
   an automatic minimum from the table's min-width and blows the grid wider
   than the viewport at mobile. */
.service-content {
  min-width: 0;
}

.ms-table-scroll {
  position: relative;
  max-width: 100%;
  overflow-x: auto;
  background: var(--color-surface);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  -webkit-overflow-scrolling: touch;
}

.ms-table {
  width: 100%;
  min-width: 540px;
  border-collapse: collapse;
  font-size: 14px;
  text-align: left;
}

.ms-table caption {
  padding: 16px 20px 0;
  color: var(--color-neutral-500);
  font-size: 12px;
  letter-spacing: 0.11em;
  text-align: left;
  text-transform: uppercase;
}

.ms-table th,
.ms-table td {
  padding: 13px 20px;
  border-bottom: 1px solid var(--color-divider);
  vertical-align: top;
}

.ms-table thead th {
  color: var(--color-neutral-500);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
}

.ms-table tbody th {
  color: var(--color-text);
  font-weight: 400;
  letter-spacing: -0.008em;
}

.ms-table td {
  color: var(--color-neutral-300);
  white-space: nowrap;
}

.ms-table tbody tr:last-child th,
.ms-table tbody tr:last-child td {
  border-bottom: 0;
}

.ms-table thead th:not(:first-child),
.ms-table td {
  width: 1%;
}

/* position:relative is load-bearing: .ms-sr is absolutely positioned, and
   without a positioned parent its containing block is the initial containing
   block — it then escapes the table's scroll container and widens the page. */
.ms-state {
  position: relative;
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
}

.ms-state::before {
  width: 6px;
  height: 6px;
  flex: 0 0 auto;
  content: "";
  border-radius: 50%;
  background: var(--color-accent-300);
  transform: translateY(-1px);
}

.ms-state--conditional::before {
  background: transparent;
  box-shadow: 0 0 0 1px var(--color-neutral-500) inset;
}

.ms-state--none {
  color: var(--color-neutral-600);
}

.ms-state--none::before {
  display: none;
}

/* Light contexts: the ms-paper sections and the three service pages. */
.ms-paper .ms-table-scroll,
.page--service .ms-table-scroll {
  background: rgba(255, 255, 252, 0.72);
  border-color: color-mix(in srgb, var(--portfolio-tone) 30%, var(--light-line));
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.7) inset,
    0 24px 54px -48px rgba(32, 42, 50, 0.38);
}

.ms-paper .ms-table caption,
.page--service .ms-table caption,
.ms-paper .ms-table thead th,
.page--service .ms-table thead th {
  color: color-mix(in srgb, var(--portfolio-tone) 44%, var(--color-graphite));
}

.ms-paper .ms-table th,
.ms-paper .ms-table td,
.page--service .ms-table th,
.page--service .ms-table td {
  border-color: var(--light-line);
}

.ms-paper .ms-table tbody th,
.page--service .ms-table tbody th {
  color: var(--color-graphite);
}

.ms-paper .ms-table td,
.page--service .ms-table td {
  color: var(--color-copy-muted);
}

.ms-paper .ms-state::before,
.page--service .ms-state::before {
  background: var(--color-cds-blue-deep);
}

.ms-paper .ms-state--conditional::before,
.page--service .ms-state--conditional::before {
  background: transparent;
  box-shadow: 0 0 0 1px var(--color-copy-muted) inset;
}

.ms-paper .ms-state--none,
.page--service .ms-state--none {
  color: color-mix(in srgb, var(--color-copy-muted) 78%, transparent);
}

/* Paper variants for the two components ms-paper never had to carry before
   the hub's calm-banding pass: outcome cards and FAQ rows. Mirrors the
   page--service light treatment so hub and leaf pages read as one family. */
.ms-paper .outcome-grid article {
  background:
    radial-gradient(circle at 100% 0, color-mix(in srgb, var(--portfolio-tone) 18%, transparent), transparent 44%),
    rgba(255, 255, 252, 0.7);
  border-color: color-mix(in srgb, var(--portfolio-tone) 34%, var(--light-line));
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.72) inset,
    0 24px 54px -48px rgba(32, 42, 50, 0.38);
}

.ms-paper .outcome-grid p {
  color: var(--color-copy-muted);
}

/* The 2026 layer paints .outcome-grid h3 near-white for ink sections; that
   rule sits later in the file, so the paper variant needs matching
   specificity, same as .page--service does for the leaf pages. */
.ms-paper .outcome-grid h3 {
  color: var(--color-graphite);
}

.ms-paper .faq-list {
  border-color: var(--light-line);
}

.ms-paper .faq-list details {
  border-color: var(--light-line);
}

.ms-paper .faq-list summary {
  color: var(--color-graphite);
}

.ms-paper .faq-list summary i {
  color: color-mix(in srgb, var(--portfolio-tone) 44%, var(--color-graphite));
}

.ms-paper .faq-list details > p {
  color: var(--color-copy-muted);
}

/* The "What's included" reveals: reference detail one deliberate click away.
   Lists inside a details row need the breathing room the summary row skips. */
.ms-reveal {
  margin-top: 54px;
}

.ms-reveal details > ol {
  margin: 8px 0 34px;
}

.ms-reveal details > p {
  margin: -2px 0 8px;
}

/* The services section's compact trust block — seven one-line claims in the
   credentials-row voice instead of two sections of cards. */
.ms-why {
  margin-top: 54px;
  padding-top: 44px;
  border-top: 1px solid var(--light-line);
}

/* ── Tier comparison ──────────────────────────────────────────────────────
   Three tiers as one matrix rather than three lists. The lists could not be
   compared: each named different capabilities, every row carried a tick, and
   the reader had to merge three columns mentally to learn what the top tier
   contained. Here one axis holds the capabilities, the ticks finally mean
   something, and the band rows show where each group is unlocked. */
.ms-table--tiers thead th:not(.ms-col-prose) {
  min-width: 148px;
  text-align: left;
  vertical-align: bottom;
}

.ms-table--tiers thead th strong {
  display: block;
  color: var(--color-graphite);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.01em;
  text-transform: none;
}

.ms-table--tiers thead th span {
  display: block;
  margin-top: 3px;
  color: var(--color-copy-muted);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.06em;
}

.ms-table--tiers .ms-table__band th {
  padding-top: 26px;
  background: transparent;
  border-bottom-color: color-mix(in srgb, var(--portfolio-tone) 42%, var(--light-line));
}

.ms-table--tiers .ms-table__band strong {
  color: var(--color-graphite);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.ms-table--tiers .ms-table__band span {
  margin-left: 12px;
  color: var(--color-copy-muted);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
}

.ms-table--tiers tbody tr:first-child th {
  padding-top: 14px;
}

/* The marker carries the meaning here — "Included" thirty times is noise in a
   matrix — so the word is kept for screen readers and the dot is enlarged to
   read as a deliberate mark rather than a bullet left over from a list. */
.ms-table--tiers .ms-state::before {
  width: 9px;
  height: 9px;
}

.ms-table--tiers .ms-state--none {
  font-size: 15px;
}

/* Rows here hold a short label and a marker, not prose, so they do not need
   the reading-table rhythm the reporting and inclusion tables use. */
.ms-table--tiers tbody th,
.ms-table--tiers tbody td {
  padding-block: 10px;
}

.ms-table--tiers .ms-table__band th {
  padding-block: 22px 8px;
}

/* On a phone the mode sub-labels ("Operate + optimise + assure") are what push
   the matrix past the viewport. The band rows already say where each group is
   unlocked, so dropping them lets all three tiers fit side by side — a
   comparison table you cannot see all of is not a comparison. */
@media (max-width: 680px) {
  /* Release the shared 540px table floor: this one has no prose column to
     protect, so it can fit the viewport instead of scrolling. */
  /* Fixed layout so the declared widths win: with auto layout the header
     words ("Advanced", "Premium") set the column width and push the matrix
     back over the viewport. */
  .ms-table--tiers {
    min-width: 0;
    width: 100%;
    table-layout: fixed;
  }

  .ms-table--tiers .ms-col-prose { width: 43%; }

  .ms-table--tiers thead th span { display: none; }

  .ms-table--tiers thead th:not(.ms-col-prose) {
    min-width: 0;
    width: 19%;
    text-align: center;
  }

  .ms-table--tiers thead th strong { font-size: 13px; }

  .ms-table--tiers tbody td {
    width: 19%;
    text-align: center;
  }

  .ms-table--tiers tbody td .ms-state { justify-content: center; }

  .ms-table--tiers tbody th,
  .ms-table--tiers tbody td { padding-inline: 8px; }

  .ms-table--tiers tbody th { font-size: 13px; }
}

/* ── Area hero ether ──────────────────────────────────────────────────────
   Same treatment as the homepage, adapted to a two-column hero: the field
   sits behind and around the operating-model panel rather than filling open
   space, so it reads as atmosphere the panel is standing in. Lower opacity
   than the homepage for exactly that reason — there is content on top of it. */
.area-hero__ether {
  position: absolute;
  z-index: 0;
  inset: -12% -8% -12% 30%;
  overflow: hidden;
  opacity: 0.62;
  pointer-events: none;
  -webkit-mask-image: radial-gradient(ellipse at 60% 46%, #000 0 36%, transparent 78%);
  mask-image: radial-gradient(ellipse at 60% 46%, #000 0 36%, transparent 78%);
  mix-blend-mode: screen;
}

/* Keeps the headline column at full contrast while the field glows to its
   right. Without it the copy sits on moving colour. */
.area-hero__veil {
  position: absolute;
  z-index: 1;
  inset: 0;
  pointer-events: none;
  /* Mixed from the area's own deep tone, so the veil is cool over Networking
     and warm over Managed rather than one hard-coded brown everywhere. */
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--portfolio-deep, #0e0a08) 94%, transparent) 0%,
    color-mix(in srgb, var(--portfolio-deep, #0e0a08) 74%, transparent) 38%,
    color-mix(in srgb, var(--portfolio-deep, #0e0a08) 18%, transparent) 76%,
    color-mix(in srgb, var(--portfolio-deep, #0e0a08) 8%, transparent) 100%
  );
}

.area-hero .service-hero__inner {
  position: relative;
  z-index: 2;
}

@media (max-width: 900px) {
  .area-hero__ether {
    inset: -8% -14% 22% -6%;
    opacity: 0.42;
  }

  .area-hero__veil {
    background: linear-gradient(
      180deg,
      rgba(14, 10, 8, 0.86) 0%,
      rgba(14, 10, 8, 0.62) 46%,
      rgba(14, 10, 8, 0.34) 100%
    );
  }
}

@media (prefers-reduced-motion: reduce) {
  .area-hero__ether { opacity: 0.2; }
}

/* The orientation result offers the managed operating model beside whichever
   pathway was produced — never as a pathway of its own, which is what the
   six-domains-plus-one-operating-model taxonomy means in practice. */
.orientation-managed {
  margin: 18px 0 14px;
  padding-top: 16px;
  border-top: 1px solid var(--light-line);
  color: var(--color-copy-muted);
  font-size: 14px;
}

.orientation-managed a {
  color: var(--color-cds-blue-deep);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.orientation-managed[hidden] {
  display: none;
}

/* Commercial packaging. Three equal cards — the brochure names no
   recommended tier, so none is visually promoted. */
.ms-tiers {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 26px;
}

.ms-tier {
  display: flex;
  flex-direction: column;
  padding: 24px;
  background:
    radial-gradient(circle at 100% 0, color-mix(in srgb, var(--portfolio-tone) 16%, transparent), transparent 46%),
    rgba(255, 255, 252, 0.72);
  border: 1px solid color-mix(in srgb, var(--portfolio-tone) 32%, var(--light-line));
  border-radius: var(--radius-lg);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.72) inset,
    0 24px 54px -48px rgba(32, 42, 50, 0.38);
}

.ms-tier h3 {
  margin: 0 0 4px;
  font-family: var(--font-heading);
  font-size: 34px;
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1;
}

.ms-tier__mode {
  display: block;
  margin-bottom: 14px;
  color: color-mix(in srgb, var(--portfolio-tone) 44%, var(--color-graphite));
  font-size: 12px;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.ms-tier > p {
  margin: 0 0 18px;
  color: var(--color-copy-muted);
  font-size: 14px;
  letter-spacing: -0.005em;
}

.ms-tier ul {
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--light-line);
  list-style: none;
}

.ms-tier li {
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: 10px;
  padding: 11px 0;
  border-bottom: 1px solid var(--light-line);
  color: var(--color-graphite);
  font-size: 14px;
  letter-spacing: -0.006em;
}

.ms-tier li i {
  color: var(--color-cds-blue-deep);
  font-size: 13px;
  font-style: normal;
  line-height: 1.6;
}

/* Block, not flex: these notes carry inline links, and a flex container turns
   the text after an <a> into its own item with a gap in front of it. */
.ms-note {
  display: block;
  margin: 0 0 26px;
  color: var(--color-copy-muted);
  font-size: 13.5px;
  letter-spacing: -0.004em;
}

.ms-note strong {
  color: var(--color-graphite);
  font-weight: 500;
}

.ms-note a {
  color: var(--color-cds-blue-deep);
  border-bottom: 1px solid color-mix(in srgb, var(--color-cds-blue-deep) 40%, transparent);
  transition: border-color 180ms ease;
}

.ms-note a:hover {
  border-color: var(--color-cds-blue-deep);
}

/* Onboarding outputs — labels, not claims. */
.ms-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ms-tags li {
  padding: 7px 13px;
  border: 1px solid color-mix(in srgb, var(--portfolio-tone) 40%, var(--light-line));
  border-radius: 999px;
  color: var(--color-graphite);
  font-size: 13px;
  letter-spacing: -0.004em;
}

/* The cross-link between what CDS builds and what CDS runs. */
.ms-crosslink {
  display: grid;
  grid-template-areas:
    "kicker icon"
    "label  icon";
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 0 20px;
  margin-bottom: 34px;
  padding: 18px 22px;
  background: color-mix(in srgb, var(--portfolio-tone) 12%, var(--color-porcelain));
  border: 1px solid color-mix(in srgb, var(--portfolio-tone) 34%, var(--light-line));
  border-radius: var(--radius-md);
  color: var(--color-graphite);
  transition: border-color 200ms var(--ease-ive), background 200ms var(--ease-ive);
}

.ms-crosslink:hover {
  background: color-mix(in srgb, var(--portfolio-tone) 22%, var(--color-porcelain));
  border-color: color-mix(in srgb, var(--portfolio-tone) 44%, var(--color-graphite));
}

.ms-crosslink span {
  grid-area: kicker;
  display: block;
  margin-bottom: 3px;
  color: color-mix(in srgb, var(--portfolio-tone) 44%, var(--color-graphite));
  font-size: 11px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.ms-crosslink strong {
  grid-area: label;
  font-weight: 500;
  letter-spacing: -0.01em;
}

.ms-crosslink i {
  grid-area: icon;
  color: color-mix(in srgb, var(--portfolio-tone) 44%, var(--color-graphite));
  font-size: 18px;
  font-style: normal;
}

.page--managed .service-section .ms-table-scroll,
.page--managed .service-section .ms-tiers {
  margin-top: 26px;
}

@media (max-width: 1120px) {
  .ms-tiers {
    gap: 10px;
  }

  .ms-tier {
    padding: 20px;
  }

  .ms-tier h3 {
    font-size: 30px;
  }
}

@media (max-width: 900px) {
  .ms-tiers {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 680px) {
  .ms-table th,
  .ms-table td {
    padding: 12px 16px;
  }

  .ms-table caption {
    padding: 14px 16px 0;
  }

  .ms-crosslink {
    grid-template-areas:
      "kicker"
      "label";
    grid-template-columns: 1fr;
  }

  .ms-crosslink i {
    display: none;
  }
}

/* Utilities for the managed-services pages. Declared here rather than inline:
   the site ships style-src 'self', so a style attribute would be blocked. */
.ms-subhead {
  margin: 70px 0 12px;
  font-size: 34px;
}

.ms-note--top {
  margin-top: 34px;
}

.ms-note--after {
  margin: 34px 0 0;
}

.ms-eyebrow--spaced {
  margin-top: 46px;
}

.ms-faq {
  max-width: 860px;
  margin-top: 34px;
}

/* A prose column in an inclusion table wraps; a state column never does. */
.ms-table .ms-col-prose {
  width: auto;
  white-space: normal;
}

/* Two-column tables whose second column is prose, not a state. Without an
   explicit split the row header claims the width and the prose column
   collapses into a ribbon. */
.ms-table--prose tbody th,
.ms-table--prose thead th:first-child {
  width: 34%;
}

.ms-table--prose .ms-col-prose {
  width: 66%;
}

.ms-paper .button--light {
  color: #ffffff;
  background: var(--color-ink);
}

.ms-paper .button--light:hover {
  background: var(--color-graphite);
}

@media (max-width: 680px) {
  .ms-subhead {
    margin-top: 54px;
    font-size: 28px;
  }
}

/* ── Company / contact ────────────────────────────────────────────────────
   A neutral tone for pages that are about CDS rather than about a portfolio
   area. Titanium is the least-saturated hue in the mineral system, which is
   what a contact page wants. */

.area-company {
  --portfolio-tone: var(--color-titanium);
  --portfolio-deep: #1b222a;
  --portfolio-paper: #e7eaec;
}

/* A section that carries proof rather than argument — shorter than a full
   .section so it reads as a band under the hero, not a chapter. */
.section--slim {
  padding-block: 64px;
}

.cred-title {
  max-width: 760px;
  margin: 0 0 34px;
  font-family: var(--font-heading);
  font-size: clamp(28px, 3.4vw, 38px);
  font-weight: 400;
  letter-spacing: -0.014em;
  line-height: 1.08;
  text-wrap: pretty;
}

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

.cred-group > h3 {
  margin: 0 0 4px;
  color: color-mix(in srgb, var(--portfolio-tone) 44%, var(--color-graphite));
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.cred-list {
  margin: 0;
  padding: 0;
  border-bottom: 1px solid var(--light-line);
  list-style: none;
}

.cred-list li {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: 20px;
  align-items: baseline;
  padding: 14px 0;
  border-top: 1px solid var(--light-line);
}

.cred-list strong {
  color: var(--color-graphite);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.012em;
}

.cred-list span {
  color: var(--color-copy-muted);
  font-size: 13.5px;
  letter-spacing: -0.004em;
}

/* The same list on an ink ground — used on the contact page's full list. */
.section:not(.ms-paper) > .shell > .cred-groups .cred-group > h3,
.section:not(.ms-paper) .cred-groups .cred-group > h3 {
  color: color-mix(in srgb, var(--portfolio-tone) 70%, var(--color-neutral-300));
}

.section:not(.ms-paper) .cred-list,
.section:not(.ms-paper) .cred-list li {
  border-color: var(--color-divider);
}

.section:not(.ms-paper) .cred-list strong {
  color: var(--color-text);
}

.section:not(.ms-paper) .cred-list span {
  color: var(--color-neutral-500);
}

.section:not(.ms-paper) .cred-title {
  color: var(--color-text);
}

/* ── Offices ──────────────────────────────────────────────────────────── */
.office-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.office-card {
  display: flex;
  flex-direction: column;
  padding: 24px;
  background:
    radial-gradient(circle at 100% 0, color-mix(in srgb, var(--portfolio-tone) 18%, transparent), transparent 46%),
    rgba(255, 255, 252, 0.72);
  border: 1px solid color-mix(in srgb, var(--portfolio-tone) 32%, var(--light-line));
  border-radius: var(--radius-lg);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.72) inset,
    0 24px 54px -48px rgba(32, 42, 50, 0.38);
}

.office-card__label {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.office-card h3 {
  margin: 0;
  font-family: var(--font-heading);
  font-size: 30px;
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1;
}

.office-card__tag {
  padding: 4px 9px;
  border: 1px solid color-mix(in srgb, var(--portfolio-tone) 46%, var(--light-line));
  border-radius: 999px;
  color: color-mix(in srgb, var(--portfolio-tone) 44%, var(--color-graphite));
  font-size: 11px;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  white-space: nowrap;
}

.office-card address {
  margin: 0 0 16px;
  color: var(--color-copy-muted);
  font-size: 14px;
  font-style: normal;
  letter-spacing: -0.004em;
  line-height: 1.55;
}

.office-card dl {
  margin: auto 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--light-line);
}

.office-card dl div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 7px 0;
}

.office-card dt {
  color: color-mix(in srgb, var(--portfolio-tone) 44%, var(--color-graphite));
  font-size: 11px;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.office-card dd {
  margin: 0;
  color: var(--color-graphite);
  font-size: 14px;
  letter-spacing: -0.006em;
  text-align: right;
  overflow-wrap: anywhere;
}

.office-card dd a {
  border-bottom: 1px solid color-mix(in srgb, var(--portfolio-tone) 50%, transparent);
  transition: border-color 180ms ease;
}

.office-card dd a:hover {
  border-color: var(--color-graphite);
}

@media (max-width: 900px) {
  .cred-groups {
    grid-template-columns: 1fr;
    gap: 30px;
  }

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

@media (max-width: 680px) {
  .section--slim {
    padding-block: 52px;
  }

  .cred-list li {
    grid-template-columns: 1fr;
    gap: 3px;
  }

  .office-card {
    padding: 20px;
  }

  .office-card h3 {
    font-size: 26px;
  }

  .office-card dl div {
    align-items: flex-start;
    flex-direction: column;
    gap: 2px;
  }

  .office-card dd {
    text-align: left;
  }
}

/* ── Motion ───────────────────────────────────────────────────────────────
   Reveal targets are hidden ONLY when all three hold:
     · motion-init.js ran         (.js-motion on <html>)
     · motion.js marked them      ([data-reveal])
     · the reader has not asked for reduced motion
   Miss any one and the page renders complete and static. The attribute is
   removed once each animation finishes, so hover transitions on the same
   elements are never left fighting a WAAPI fill. */

@media (prefers-reduced-motion: no-preference) {
  .js-motion [data-reveal] {
    opacity: 0;
    will-change: transform, opacity;
  }
}

/* Controls should acknowledge a press. Cheap, compositor-only, and it makes
   the whole surface feel less like a document and more like software. */
.button,
.area-service-grid a,
.need-card,
.service-rows a,
.sibling-nav a,
.ms-crosslink,
.office-card {
  transition:
    transform 260ms var(--ease-ive),
    border-color 200ms ease,
    background-color 200ms ease,
    color 200ms ease,
    box-shadow 260ms var(--ease-ive);
}

.button:active {
  transform: translateY(0) scale(0.985);
  transition-duration: 90ms;
}

.office-card:hover,
.ms-tier:hover {
  border-color: color-mix(in srgb, var(--portfolio-tone) 58%, var(--light-line));
  transform: translateY(-2px);
}

.ms-tier {
  transition:
    transform 260ms var(--ease-ive),
    border-color 200ms ease;
}

/* The card grids lift as a set rather than jumping. */
.outcome-grid article {
  transition:
    transform 260ms var(--ease-ive),
    border-color 200ms ease;
}

.outcome-grid article:hover {
  transform: translateY(-2px);
}

/* The six-area switcher swaps in place: the incoming panel rises as one
   piece. Enter-only — removing [hidden] restarts the animation each time,
   and an exit animation would only make the reader wait. */
@media (prefers-reduced-motion: no-preference) {
  .portfolio-panel:not([hidden]) {
    animation: panel-enter 220ms var(--ease-ive);
  }
}

@keyframes panel-enter {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
}

/* FAQ rows should open with intent, not snap. The answer slides open where
   the engine supports ::details-content sizing (Chromium); everywhere else
   this whole block is inert and rows open instantly, exactly as before.
   interpolate-size lets height animate to auto; it is opt-in and inherited. */
@media (prefers-reduced-motion: no-preference) {
  .faq-list details {
    interpolate-size: allow-keywords;
  }

  .faq-list details::details-content {
    height: 0;
    overflow: clip;
    opacity: 0;
    transform: translateY(-4px);
    transition:
      height 180ms var(--ease-ive),
      opacity 140ms ease,
      transform 180ms var(--ease-ive),
      content-visibility 180ms allow-discrete;
  }

  .faq-list details[open]::details-content {
    height: auto;
    opacity: 1;
    transform: none;
    transition-duration: 240ms, 200ms, 240ms, 240ms;
  }
}

.faq-list summary {
  transition: color 180ms ease;
}

.faq-list summary:hover {
  color: var(--color-accent-400);
}

.page--service .faq-list summary:hover,
.ms-paper .faq-list summary:hover {
  color: var(--color-cds-blue-deep);
}

/* Reduced motion: strip every decorative loop and every transform. The base
   sheet already zeroes durations; this also stops the infinite keyframes,
   which duration-zeroing alone does not. */
@media (prefers-reduced-motion: reduce) {
  .live-label i,
  .frame-note i,
  .process-rail__signal,
  .process-symbol__ring,
  .hero-glow {
    animation: none !important;
  }

  .button:active,
  .office-card:hover,
  .ms-tier:hover,
  .outcome-grid article:hover,
  .area-service-grid a:hover,
  .need-card:hover,
  .sibling-nav a:hover,
  .ms-crosslink:hover,
  .button:hover {
    transform: none !important;
  }

  .js-motion [data-reveal] {
    opacity: 1 !important;
  }
}

/* The mobile menu is the only full-screen state change on small viewports;
   it should arrive, not teleport. Enter-only for the same reason as the
   portfolio panels: the panel leaves by display:none, and delaying that to
   play an exit would make closing feel slower than it is. */
@media (max-width: 1120px) and (prefers-reduced-motion: no-preference) {
  .primary-nav.is-open {
    animation: menu-enter 240ms var(--ease-ive);
  }

  .primary-nav.is-open a {
    animation: menu-link-enter 320ms var(--ease-ive) backwards;
  }

  .primary-nav.is-open a:nth-child(1) { animation-delay: 40ms; }
  .primary-nav.is-open a:nth-child(2) { animation-delay: 70ms; }
  .primary-nav.is-open a:nth-child(3) { animation-delay: 100ms; }
  .primary-nav.is-open a:nth-child(4) { animation-delay: 130ms; }
  .primary-nav.is-open a:nth-child(n + 5) { animation-delay: 160ms; }
}

@keyframes menu-enter {
  from {
    opacity: 0;
  }
}

@keyframes menu-link-enter {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
}

/* Touch browsers can retain a synthetic :hover state after a tap. Prevent
   cards and chooser controls from appearing permanently shifted after use. */
@media (hover: none) {
  .button:hover,
  .need-card:hover,
  .portfolio-panel__services a:hover,
  .area-service-grid a:hover,
  .office-card:hover,
  .ms-tier:hover,
  .outcome-grid article:hover,
  .sibling-nav a:hover,
  .ms-crosslink:hover,
  .orientation-options--environment button:hover {
    transform: none;
  }

  .orientation-options--symptoms button:hover:not(:disabled) {
    padding-left: 4px;
  }

  .area-service-grid a:hover,
  .area-service-grid a:nth-child(even):hover {
    padding-inline-start: 0;
  }
}

/* Studio credit — quiet by design. Muted like the rest of the footer row,
   with only the wordmark bolded. Craftsmanship, not advertising. */
.studio-credit {
  color: inherit;
  font-weight: 700;
  transition: color 180ms ease;
}

.studio-credit:hover {
  color: var(--color-text);
}

@media (max-width: 680px) {
  .site-footer__inner {
    gap: 6px;
  }
}

/* Small labels that sit on the process frame and the sticky section nav land
   at 4.33-4.48:1 with neutral-600 — under the 4.5 floor for text this size.
   Both backdrops are lighter than the page ground the neutral ramp was tuned
   against, so they need one step up. */
.process-labels span,
.section-nav__inner > span,
.section-nav__inner > div {
  color: var(--color-neutral-400);
}

.section-nav a:hover,
.section-nav a.is-current {
  color: var(--color-text);
}

/* Two small-text colours on near-white panels fell under 4.5:1 at their size:
   the orientation kicker (cds-blue on white, 3.83) and the portfolio tab
   counters (graphite at 58% alpha, 3.39). Both are content, not decoration.
   The disabled "next" arrow is left alone — WCAG exempts inactive controls. */
.orientation-kicker {
  color: var(--color-cds-blue-deep);
}

.portfolio-tabs small {
  color: rgba(32, 42, 50, 0.78);
}

/* Hero substrate — one schematic motif per area.
   These replaced a single Canva-generated network mesh: it was the same
   triangulated blob on every page, and at 74.6K it cost twelve times what all
   eight of these cost together. Each motif is drawn in the stylesheet's own
   language — 45/90 degree runs, hairline strokes, lit nodes — so networking
   reads as routed paths, security as nested perimeters, power as a conditioned
   waveform on a distribution bus.
   Applied as a mask, so the fill is var(--portfolio-tone) and one file works on
   both the ink hero and any lighter ground. */
.area-ground::before {
  position: absolute;
  inset: 0;
  content: "";
  background: var(--portfolio-tone);
  opacity: 0.22;
  pointer-events: none;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  /* Bottom-right, sized so its upper half falls behind the process card and
     the rest reads in the open band beneath it — the motif appears to continue
     behind the card rather than sitting in a gap. */
  -webkit-mask-position: right 3% bottom 4%;
  mask-position: right 3% bottom 4%;
  -webkit-mask-size: auto 54%;
  mask-size: auto 54%;
}

.area-net .area-ground::before {
  -webkit-mask-image: url("/assets/brand/motifs/net.svg?v=d0fe0982");
  mask-image: url("/assets/brand/motifs/net.svg?v=d0fe0982");
}

.area-sec .area-ground::before {
  -webkit-mask-image: url("/assets/brand/motifs/sec.svg?v=630f46a7");
  mask-image: url("/assets/brand/motifs/sec.svg?v=630f46a7");
}

.area-collab .area-ground::before {
  -webkit-mask-image: url("/assets/brand/motifs/collab.svg?v=c430e872");
  mask-image: url("/assets/brand/motifs/collab.svg?v=c430e872");
}

.area-compute .area-ground::before {
  -webkit-mask-image: url("/assets/brand/motifs/compute.svg?v=5e4f6695");
  mask-image: url("/assets/brand/motifs/compute.svg?v=5e4f6695");
}

.area-cloud .area-ground::before {
  -webkit-mask-image: url("/assets/brand/motifs/cloud.svg?v=cc7a949b");
  mask-image: url("/assets/brand/motifs/cloud.svg?v=cc7a949b");
}

.area-power .area-ground::before {
  -webkit-mask-image: url("/assets/brand/motifs/power.svg?v=34da9328");
  mask-image: url("/assets/brand/motifs/power.svg?v=34da9328");
}

.area-managed .area-ground::before {
  -webkit-mask-image: url("/assets/brand/motifs/managed.svg?v=c57229fb");
  mask-image: url("/assets/brand/motifs/managed.svg?v=c57229fb");
}

.area-company .area-ground::before {
  -webkit-mask-image: url("/assets/brand/motifs/company.svg?v=987aa0e7");
  mask-image: url("/assets/brand/motifs/company.svg?v=987aa0e7");
}

@media (max-width: 900px) {
  .area-ground::before {
    opacity: 0.1;
    -webkit-mask-position: right -18% top 64%;
    mask-position: right -18% top 64%;
  }
}

@media (max-width: 680px) {
  .area-ground::before {
    display: block;
    opacity: 0.1;
    -webkit-mask-position: right -150px top 32%;
    mask-position: right -150px top 32%;
    -webkit-mask-size: auto 40%;
    mask-size: auto 40%;
  }
}

/* Keep the authored area diagrams visible in browsers that do not implement
   CSS masking. The SVGs already use white strokes, so a quiet background-image
   fallback preserves the composition without affecting foreground contrast. */
@supports not ((-webkit-mask-image: url("")) or (mask-image: url(""))) {
  .area-ground::before {
    background-color: transparent;
    background-repeat: no-repeat;
    background-position: right 3% bottom 4%;
    background-size: auto 54%;
  }

  .area-net .area-ground::before { background-image: url("/assets/brand/motifs/net.svg?v=d0fe0982"); }
  .area-sec .area-ground::before { background-image: url("/assets/brand/motifs/sec.svg?v=630f46a7"); }
  .area-collab .area-ground::before { background-image: url("/assets/brand/motifs/collab.svg?v=c430e872"); }
  .area-compute .area-ground::before { background-image: url("/assets/brand/motifs/compute.svg?v=5e4f6695"); }
  .area-cloud .area-ground::before { background-image: url("/assets/brand/motifs/cloud.svg?v=cc7a949b"); }
  .area-power .area-ground::before { background-image: url("/assets/brand/motifs/power.svg?v=34da9328"); }
  .area-managed .area-ground::before { background-image: url("/assets/brand/motifs/managed.svg?v=c57229fb"); }
  .area-company .area-ground::before { background-image: url("/assets/brand/motifs/company.svg?v=987aa0e7"); }
}

/* Enterprise system 2026 — one operating language across every page. */
:root {
  --font-heading: "Instrument Sans", system-ui, sans-serif;
  --shell: min(1380px, calc(100vw - 72px));
  --header-height: 92px;
  /* Where the sticky section nav tucks in: the header pill's bottom edge
     (padding-top + pill min-height), NOT --header-height. Sticking at
     --header-height leaves a see-through strip between pill and bar that
     page text scrolls through. Keep in step with .site-header metrics. */
  --subnav-top: 78px;
  --enterprise-card-radius: 12px;
  --enterprise-panel-radius: 16px;
  --enterprise-control-radius: 999px;
  --system-blue: #51a8ff;
  --system-cyan: #78e1ff;
  --system-ink: #050910;
  --system-panel: #0b1420;
  --system-line: rgba(166, 205, 236, 0.14);
  --system-line-strong: rgba(166, 205, 236, 0.28);
}

body {
  background:
    radial-gradient(circle at 50% -20%, rgba(38, 128, 212, 0.1), transparent 32%),
    var(--system-ink);
}

.page-grain {
  opacity: 0.018;
}

.site-header {
  top: 0;
  min-height: var(--header-height);
  padding-top: 12px;
  background: linear-gradient(to bottom, rgba(5, 9, 16, 0.92), rgba(5, 9, 16, 0));
  border: 0;
  backdrop-filter: none;
}

.site-header__inner {
  min-height: 66px;
  grid-template-columns: minmax(200px, 1fr) auto minmax(145px, 1fr);
  gap: 30px;
  padding: 0 12px 0 20px;
  background: rgba(9, 17, 27, 0.82);
  border: 1px solid var(--system-line);
  border-radius: 16px;
  box-shadow: 0 24px 60px -38px rgba(0, 0, 0, 0.9);
  backdrop-filter: blur(22px) saturate(150%);
}

/* backdrop-filter makes this pill the containing block for any fixed
   descendant, which traps the open mobile menu inside a 66px bar and clips
   it at the pill's radius. While the menu is open the pill sits behind an
   opaque overlay, so the blur is invisible anyway: suspend it so the menu's
   position: fixed resolves against the viewport again. */
body.menu-open .site-header__inner {
  backdrop-filter: none;
}


.brand__logo {
  width: 118px;
}

.primary-nav {
  gap: clamp(18px, 2.1vw, 34px);
  color: #9ba9b8;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.02em;
}

.primary-nav a::after {
  right: auto;
  bottom: 0;
  left: 50%;
  width: 18px;
  height: 2px;
  transform: translateX(-50%) scaleX(0);
  background: var(--system-blue);
  border-radius: 99px;
  box-shadow: 0 0 14px rgba(81, 168, 255, 0.8);
}

.primary-nav a:hover::after,
.primary-nav a[aria-current="page"]::after {
  transform: translateX(-50%) scaleX(1);
}

.button {
  min-height: 46px;
  padding: 12px 21px;
  border-radius: var(--enterprise-control-radius);
  font-size: 13px;
  letter-spacing: 0.01em;
}

/* Flat fill, not a gradient. Gradients on this system belong to atmosphere —
   the hero field, the area grounds, the surface tints that stand in for
   shadows — never to a control. The value is the old ramp's midpoint, so the
   button keeps its weight in the palette without the sheen. */
.button--light,
.orientation .button--light {
  color: #04101a;
  background: #cfe9fb;
  border-color: rgba(255, 255, 255, 0.68);
  box-shadow: 0 16px 38px -22px rgba(81, 168, 255, 0.9);
}

.button--light:hover,
.orientation .button--light:hover {
  background: #ffffff;
  box-shadow: 0 18px 44px -20px rgba(81, 168, 255, 0.96);
}

.header-cta {
  min-height: 40px;
  padding-inline: 17px;
}

.button--outline {
  color: #c5d0dc;
  background: rgba(255, 255, 255, 0.025);
  border-color: rgba(166, 205, 236, 0.28);
}

.button--outline:hover {
  color: #ffffff;
  background: rgba(81, 168, 255, 0.08);
  border-color: rgba(111, 188, 255, 0.65);
}

.eyebrow {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 16px;
  color: #8091a3;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.19em;
}

.eyebrow::before {
  width: 5px;
  height: 5px;
  flex: 0 0 auto;
  content: "";
  background: currentColor;
  border-radius: 50%;
}

.section {
  padding-block: clamp(68px, 6vw, 88px);
}

.section-title {
  max-width: 1020px;
  margin-bottom: 20px;
  font-family: var(--font-heading);
  font-size: clamp(46px, 5.2vw, 76px);
  font-weight: 400;
  letter-spacing: -0.052em;
  line-height: 0.98;
}

.cred-title {
  max-width: 840px;
  margin-bottom: 34px;
  font-family: var(--font-heading);
  font-size: clamp(38px, 4vw, 54px);
  font-weight: 400;
  letter-spacing: -0.045em;
  line-height: 1;
}

.section-intro {
  max-width: 730px;
  margin-bottom: 40px;
  color: #8797a7;
  font-size: 17px;
  line-height: 1.65;
}

.home-hero {
  min-height: 680px;
  color: #edf5fc;
  background:
    linear-gradient(90deg, rgba(128, 190, 237, 0.055) 1px, transparent 1px),
    linear-gradient(rgba(128, 190, 237, 0.055) 1px, transparent 1px),
    radial-gradient(circle at 72% 44%, rgba(41, 145, 240, 0.2), transparent 25%),
    radial-gradient(circle at 22% 80%, rgba(21, 89, 153, 0.18), transparent 30%),
    linear-gradient(145deg, #08111c 0%, #050910 72%);
  background-size: 72px 72px, 72px 72px, auto, auto, auto;
}

.home-hero::before {
  position: absolute;
  width: min(720px, 60vw);
  aspect-ratio: 1;
  right: -14%;
  bottom: -48%;
  content: "";
  border: 1px solid rgba(101, 185, 255, 0.12);
  border-radius: 50%;
  box-shadow:
    0 0 0 90px rgba(101, 185, 255, 0.025),
    0 0 0 180px rgba(101, 185, 255, 0.018);
  pointer-events: none;
}

.home-hero__grid {
  min-height: 640px;
  grid-template-columns: minmax(0, 1.08fr) minmax(480px, 0.92fr);
  gap: clamp(52px, 7vw, 112px);
  padding-block: clamp(62px, 6vw, 90px) 74px;
}

.home-hero .eyebrow {
  color: #74bfff;
}

.hero-copy h1,
.home-hero .hero-copy h1,
.service-hero .hero-copy h1,
.area-hero .hero-copy h1 {
  max-width: 880px;
  margin: 0 0 26px;
  color: #f1f7fb;
  font-family: var(--font-heading);
  font-size: clamp(60px, 6vw, 88px);
  font-weight: 400;
  letter-spacing: -0.063em;
  line-height: 0.94;
}

.home-hero .hero-copy .lede,
.hero-copy .lede {
  max-width: 650px;
  margin-bottom: 34px;
  color: #9dadbd;
  font-size: clamp(16px, 1.35vw, 19px);
  line-height: 1.6;
}

.hero-proofline {
  max-width: 610px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin: 38px 0 0;
  padding: 0;
  border-top: 1px solid var(--system-line);
}

.hero-proofline div {
  padding: 18px 18px 0 0;
}

.hero-proofline div + div {
  padding-left: 18px;
  border-left: 1px solid var(--system-line);
}

.hero-proofline dt {
  color: #6f8193;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.hero-proofline dd {
  margin: 4px 0 0;
  color: #d8e5ef;
  font-size: 13px;
  font-weight: 500;
}

.home-hero .product-frame,
.product-frame {
  padding: 18px;
  background:
    linear-gradient(180deg, rgba(18, 33, 49, 0.96), rgba(7, 14, 23, 0.97));
  border-color: rgba(128, 190, 237, 0.22);
  border-radius: 12px;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.025) inset,
    0 42px 100px -48px rgba(0, 0, 0, 0.95),
    0 0 80px -46px rgba(69, 158, 237, 0.58);
}

/* Hero light lift — the ink ground stays, but the first viewport carries
   more internal light: the NOC panel's surfaces step up one level (scoped
   custom properties, hero only) and the glow carries a little further, so
   the opening reads deep rather than heavy. */
.home-hero {
  --color-surface-2: #1d2a39;
  --color-well: #111b27;
}

.home-hero .hero-glow {
  background: radial-gradient(ellipse, rgba(81, 168, 255, 0.22), transparent 66%);
}

.home-hero .product-frame {
  background: linear-gradient(180deg, rgba(25, 43, 61, 0.96), rgba(10, 19, 30, 0.97));
}

.home-hero .button--light {
  color: #04101a;
  background: linear-gradient(135deg, #eef8ff, #a9d9ff);
  border-color: rgba(255, 255, 255, 0.68);
}

.home-hero .button--outline {
  color: #c5d0dc;
  background: rgba(255, 255, 255, 0.025);
  border-color: rgba(166, 205, 236, 0.28);
}

.home-hero .button--outline:hover {
  color: #ffffff;
  background: rgba(81, 168, 255, 0.08);
  border-color: rgba(111, 188, 255, 0.65);
}

.product-frame::before {
  width: 6px;
  height: 6px;
  top: 21px;
  left: 18px;
  transform: none;
  background: #72d69d;
  border-radius: 50%;
  box-shadow: 0 0 13px rgba(114, 214, 157, 0.8);
}

.product-frame__top {
  min-height: 30px;
  margin: 0 0 14px;
  padding: 0 4px 12px 17px;
  color: #b7c6d4;
  border-bottom: 1px solid var(--system-line);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.capability-rail {
  position: relative;
  z-index: 2;
  color: #aebdca;
  background: #07101a;
  border-block: 1px solid var(--system-line);
}

.capability-rail__inner {
  min-height: 68px;
  display: flex;
  align-items: center;
  gap: clamp(22px, 3vw, 48px);
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-snap-type: inline proximity;
  scrollbar-width: none;
}

.capability-rail__inner::-webkit-scrollbar { display: none; }

.capability-rail span,
.capability-rail a {
  flex: 0 0 auto;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.capability-rail span {
  margin-right: auto;
  color: #708396;
}

.capability-rail a {
  position: relative;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  color: #c1ced9;
  scroll-snap-align: start;
}

.capability-rail a::before {
  width: 4px;
  height: 4px;
  display: inline-block;
  margin: 0 9px 2px 0;
  content: "";
  background: #4ea8f5;
  border-radius: 50%;
  box-shadow: 0 0 10px rgba(78, 168, 245, 0.7);
}

.start-section,
.portfolio,
.proof,
.page--area .area-services,
.ms-paper {
  color: #15222d;
  background:
    linear-gradient(90deg, rgba(28, 61, 84, 0.035) 1px, transparent 1px),
    #f2f5f5;
  background-size: 96px 100%;
}

.start-section .section-title--ink,
.portfolio .section-title,
.proof .section-title,
.page--area .area-services .section-title--ink,
.ms-paper .section-title--ink,
.build-run .section-title--ink {
  color: #111d27;
}

.need-grid {
  gap: 1px;
  overflow: hidden;
  background: rgba(25, 54, 73, 0.14);
  border: 1px solid rgba(25, 54, 73, 0.14);
  border-radius: var(--enterprise-panel-radius);
}

.need-card {
  min-height: 238px;
  padding: 28px;
  background: rgba(252, 253, 253, 0.94);
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.need-card::before {
  width: 160px;
  height: 160px;
  top: auto;
  right: -55px;
  bottom: -85px;
  background: radial-gradient(circle, color-mix(in srgb, var(--need-tone) 48%, transparent), transparent 69%);
}

.need-card > span {
  width: max-content;
  padding: 5px 8px;
  border: 1px solid color-mix(in srgb, var(--need-tone) 50%, rgba(25, 54, 73, 0.15));
  border-radius: 5px;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.need-card h3 {
  max-width: 290px;
  margin-top: auto;
  font-family: var(--font-heading);
  font-size: 24px;
  letter-spacing: -0.035em;
}

.need-card p {
  margin: 10px 0 0;
}

.need-card:hover {
  z-index: 2;
  transform: translateY(-4px);
  background: #ffffff;
  box-shadow: 0 22px 54px -38px rgba(8, 26, 39, 0.72);
}

.need-card:focus-visible,
.portfolio-tabs button:focus-visible,
.section-nav a:focus-visible {
  z-index: 3;
  outline-offset: -4px;
}

.portfolio-tabs {
  gap: 6px;
  margin-bottom: 14px;
  padding: 6px;
  background: rgba(19, 42, 57, 0.06);
  border: 1px solid rgba(19, 42, 57, 0.12);
  border-radius: 12px;
}

.portfolio-tabs button {
  min-height: 58px;
  flex: 1 1 0;
  justify-content: center;
  border: 0;
  border-radius: 8px;
  box-shadow: none;
}

.portfolio-tabs button[aria-selected="true"] {
  background: #ffffff;
  box-shadow: 0 12px 30px -24px rgba(10, 28, 41, 0.8);
}

.portfolio-panel {
  min-height: 470px;
  grid-template-columns: minmax(280px, 0.72fr) minmax(0, 1.28fr);
  padding: clamp(34px, 4vw, 60px);
  border-radius: var(--enterprise-panel-radius);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.18) inset;
}

.portfolio-panel__lead h3 {
  font-family: var(--font-heading);
  font-size: clamp(48px, 5vw, 70px);
  letter-spacing: -0.055em;
}

.portfolio-panel__services {
  gap: 7px;
}

.portfolio-panel__services a {
  min-height: 88px;
  padding: 17px 46px 17px 18px;
  border-radius: var(--enterprise-card-radius);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.035) inset;
}

.portfolio-panel__services strong {
  min-height: 2.5em;
}

.portfolio-panel__services a:last-child:nth-child(odd) {
  grid-column: 1 / -1;
}

.portfolio-panel--single {
  min-height: 400px;
}

.portfolio-panel__services--single {
  align-self: start;
}

.portfolio-panel__services--single a {
  min-height: 150px;
}

.build-run {
  color: #e9f2f8;
  background:
    radial-gradient(circle at 14% 26%, rgba(54, 153, 235, 0.18), transparent 25%),
    linear-gradient(145deg, #0d1b28, #071019 72%);
}

.build-run .section-title--ink { color: #eef6fb; }
.build-run .section-intro--ink,
.build-run .eyebrow--ink { color: #8da0b1; }

.build-run .service-rows a {
  padding: 19px 0;
  color: #d8e4ed;
  border-color: var(--system-line);
}

.build-run .service-rows a:hover {
  padding-inline: 14px;
  color: #ffffff;
  background: rgba(81, 168, 255, 0.07);
}

.proof-grid {
  overflow: hidden;
  border: 1px solid rgba(25, 54, 73, 0.14);
  border-radius: var(--enterprise-panel-radius);
}

.proof-grid li {
  min-height: 190px;
  display: flex;
  flex-direction: column;
  padding: 26px;
  background: rgba(255, 255, 255, 0.52);
}

.proof-grid strong {
  margin-top: auto;
  font-family: var(--font-heading);
  font-size: 25px;
  letter-spacing: -0.035em;
}

.service-hero {
  min-height: 0;
  background: #07101a;
}

.service-hero__inner {
  padding: 22px 0 72px;
}

.service-hero__grid {
  min-height: 460px;
  grid-template-columns: minmax(0, 1.02fr) minmax(500px, 0.98fr);
  gap: clamp(50px, 6vw, 94px);
}

.service-hero__grid > .hero-copy:only-child {
  grid-column: 1 / -1;
  max-width: 900px;
}

.service-hero .hero-copy h1,
.area-hero .hero-copy h1 {
  font-size: clamp(50px, 4.6vw, 70px);
}

.breadcrumbs {
  margin-bottom: 32px;
}

.breadcrumbs ol {
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.process-frame {
  overflow: hidden;
}

.process-visual {
  padding: 8px 4px 4px;
}

.process-labels {
  gap: 12px;
  margin-top: 10px;
}

.process-labels li {
  min-height: 88px;
  padding: 14px 10px;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(166, 205, 236, 0.1);
  border-radius: 8px;
}

.process-labels strong {
  color: #dbe6ef;
  font-size: 13px;
}

.section-nav {
  top: var(--subnav-top, var(--header-height));
  /* The managed hub scrolls over alternating ink and paper bands, so its bar
     stays dark like the header pill — but as glass, not a slab: light bands
     glow through the blur instead of dead-ending against 90% ink. */
  background: rgba(7, 14, 22, 0.78);
  border-color: var(--system-line);
  backdrop-filter: blur(24px) saturate(140%);
}

/* Service pages run light below the hero; the ink bar reads as a foreign
   slab against porcelain. Same glass, flipped to the light ramp. Managed
   pages stay dark — their whole page is ink. */
.page--service .section-nav {
  background: rgba(241, 242, 238, 0.88);
  border-color: var(--light-line);
}

.page--service .section-nav__inner > div,
.page--service .section-nav__inner > span {
  color: var(--color-copy-muted);
}

.page--service .section-nav a:hover,
.page--service .section-nav a.is-current {
  color: var(--color-graphite);
}

.page--service .section-nav a::after {
  background: var(--color-cds-blue-deep);
}

.section-nav__inner {
  min-height: 56px;
}

.section-nav__inner > div {
  gap: clamp(18px, 2.4vw, 34px);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.service-layout {
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: clamp(56px, 8vw, 120px);
  padding-top: 72px;
}

.service-section {
  position: relative;
  padding: 0 0 64px;
}

.service-section::before {
  width: 34px;
  height: 1px;
  display: block;
  margin-bottom: 20px;
  content: "";
  background: linear-gradient(90deg, var(--system-blue), transparent);
}

.service-section h2 {
  margin-bottom: 24px;
  font-family: var(--font-heading);
  font-size: clamp(38px, 4vw, 54px);
  letter-spacing: -0.045em;
}

.service-section .answer {
  color: #a9b6c2;
  font-size: 19px;
  line-height: 1.65;
}

.outcome-grid {
  gap: 8px;
}

.outcome-grid article {
  min-height: 150px;
  padding: 23px;
  background:
    linear-gradient(145deg, rgba(18, 31, 45, 0.98), rgba(9, 17, 27, 0.98));
  border-color: var(--system-line);
  border-radius: var(--enterprise-card-radius);
  box-shadow: none;
}

.outcome-grid article:hover {
  border-color: rgba(81, 168, 255, 0.42);
  box-shadow: 0 18px 44px -34px rgba(81, 168, 255, 0.55);
}

.outcome-grid h3 {
  color: #edf5fb;
  font-size: 22px;
}

.outcome-grid article:last-child:nth-child(odd) {
  grid-column: 1 / -1;
}

.glance-card {
  overflow: hidden;
  padding: 22px;
  background:
    linear-gradient(145deg, rgba(19, 35, 51, 0.98), rgba(8, 16, 25, 0.98));
  border-color: rgba(111, 188, 255, 0.28);
  border-radius: var(--enterprise-card-radius);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.035) inset;
}

.glance-card::before {
  width: 100%;
  height: 2px;
  display: block;
  margin: -22px 0 20px;
  content: "";
  background: linear-gradient(90deg, var(--system-blue), transparent 70%);
}

.area-service-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  border: 0;
}

.area-service-grid a,
.area-service-grid a:nth-child(even) {
  min-height: 220px;
  padding: 26px 64px 26px 26px;
  background: rgba(255, 255, 255, 0.56);
  border: 1px solid rgba(25, 54, 73, 0.14);
  border-radius: var(--enterprise-card-radius);
  box-shadow: none;
}

.area-service-grid a:hover,
.area-service-grid a:nth-child(even):hover {
  padding-inline-start: 26px;
  transform: translateY(-4px);
  background: rgba(255, 255, 255, 0.92);
  border-color: color-mix(in srgb, var(--portfolio-tone) 66%, rgba(25, 54, 73, 0.18));
  box-shadow: 0 22px 46px -38px rgba(14, 38, 53, 0.8);
}

.area-service-grid h3 {
  min-height: 2.1em;
  font-family: var(--font-heading);
  font-size: 25px;
  letter-spacing: -0.035em;
}

.area-service-grid a:last-child:nth-child(odd) {
  grid-column: 1 / -1;
}

.area-service-grid a:last-child:nth-child(odd) p {
  max-width: 72ch;
}

.sibling-nav a:last-child {
  align-items: flex-start;
  text-align: left;
}

.sibling-nav a:only-child {
  grid-column: 1 / -1;
  align-items: flex-start;
  text-align: left;
}

.office-card,
.ms-tier {
  border-radius: var(--enterprise-card-radius);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.62) inset;
}

.ms-table-scroll,
.sibling-nav a {
  border-radius: var(--enterprise-card-radius);
  box-shadow: none;
}

.ms-table-scroll:focus-visible {
  outline-color: var(--system-blue);
  outline-offset: 3px;
}

.section-title.ms-subhead {
  max-width: none;
  margin: 46px 0 14px;
  font-size: 34px;
  letter-spacing: -0.025em;
  line-height: 1.08;
}

.contact-band {
  padding-block: clamp(64px, 6vw, 86px);
  background:
    linear-gradient(90deg, rgba(91, 174, 245, 0.06) 1px, transparent 1px),
    radial-gradient(circle at 76% 120%, rgba(54, 153, 235, 0.22), transparent 34%),
    #07111b;
  background-size: 88px 100%, auto, auto;
  box-shadow: none;
}

.contact-band__inner {
  min-height: 0;
  align-items: center;
  padding-block: 0;
}

.contact-band h2 {
  max-width: 760px;
  font-family: var(--font-heading);
  font-size: clamp(40px, 4.3vw, 62px);
  letter-spacing: -0.052em;
}

.site-footer {
  padding-block: 22px;
  background: #04080d;
  border-color: var(--system-line);
}

.site-footer__inner {
  min-height: 0;
  color: #718292;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.site-footer a {
  min-height: 28px;
  display: inline-flex;
  align-items: center;
}

/* Refero-informed editorial headers: pair the large statement with its
   explanation instead of stacking both into a narrow column. Content grids
   then return to the full shell, preserving one common alignment edge. */
.start-section > .shell,
.portfolio > .shell,
.area-services > .shell,
#offices > .shell {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(280px, 0.65fr);
  column-gap: clamp(48px, 7vw, 108px);
}

.start-section > .shell > .eyebrow,
.portfolio > .shell > .eyebrow,
.area-services > .shell > .eyebrow,
#offices > .shell > .eyebrow,
.start-section > .shell > .need-grid,
.portfolio > .shell > .portfolio-tabs,
.portfolio > .shell > .portfolio-panels,
.area-services > .shell > .area-service-grid,
#offices > .shell > .office-grid {
  grid-column: 1 / -1;
}

.start-section > .shell > .section-title,
.portfolio > .shell > .section-title,
.area-services > .shell > .section-title,
#offices > .shell > .section-title {
  grid-column: 1;
  margin-bottom: 38px;
}

.start-section > .shell > .section-intro,
.portfolio > .shell > .section-intro,
.area-services > .shell > .section-intro,
#offices > .shell > .section-intro {
  grid-column: 2;
  align-self: end;
  margin-bottom: 38px;
}

.portfolio > .shell > .portfolio-tabs {
  margin-top: 0;
}

/* The managed-services hub uses the same statement/explanation rhythm as the
   landing and portfolio pages. Every subsequent evidence block spans the
   complete shell, so tables and service tiers never inherit a narrow column. */
.page--managed.page--area .section > .shell {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(280px, 0.65fr);
  column-gap: clamp(48px, 7vw, 108px);
}

.page--managed.page--area .section > .shell > * {
  grid-column: 1 / -1;
}

.page--managed.page--area .section > .shell > h2.section-title {
  grid-column: 1;
  margin-bottom: 38px;
}

.page--managed.page--area .section > .shell > h2.section-title + .section-intro {
  grid-column: 2;
  align-self: end;
  margin-bottom: 38px;
}

@media (max-width: 1280px) {
  .area-hero .service-hero__grid {
    min-height: auto;
    grid-template-columns: 1fr;
  }

  .area-hero .product-frame {
    max-width: 820px;
  }
}

@media (max-width: 1120px) {
  :root {
    --shell: min(100% - 48px, 1040px);
    --header-height: 84px;
    --subnav-top: 73px; /* 9px header padding + 64px pill */
  }

  .site-header { padding-top: 9px; }
  .site-header__inner { min-height: 64px; grid-template-columns: 1fr auto; }
  .primary-nav.is-open {
    inset: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 104px 30px 40px;
    /* Solid ink, not the 0.98 page token: on a full-screen overlay the
       alpha lets the hero's display type ghost through the menu. */
    background: rgb(5, 9, 16);
  }
  .primary-nav.is-open a { font-family: var(--font-heading); font-size: clamp(30px, 7vw, 48px); letter-spacing: -0.04em; }
  .menu-button { position: relative; z-index: 130; }
  .home-hero__grid,
  .service-hero__grid { grid-template-columns: 1fr; }
  .home-hero__grid { padding-top: 68px; }
  .home-hero .product-frame,
  .service-hero .product-frame { max-width: 820px; }
  .service-hero__grid { min-height: auto; }
  .service-hero { min-height: 0; }
  .service-layout { grid-template-columns: minmax(0, 1fr) 300px; gap: 54px; }
  .service-section { padding-left: 0; }
  .section-nav__inner {
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scroll-snap-type: inline proximity;
    scrollbar-width: none;
  }
  .section-nav__inner::-webkit-scrollbar { display: none; }
  .section-nav__inner > div { flex: 0 0 auto; }
  .section-nav a { white-space: nowrap; scroll-snap-align: start; }
}

@media (max-width: 1024px) {
  .service-layout {
    grid-template-columns: 1fr;
    padding-top: 70px;
  }

  .service-aside {
    position: static;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    margin-bottom: 70px;
  }

  .service-aside > :only-child {
    grid-column: 1 / -1;
  }
}

@media (max-width: 900px) {
  .home-hero { min-height: 0; }
  .home-hero__grid { min-height: 0; padding-block: 68px 74px; }
  .capability-rail span { margin-right: 20px; }
  .portfolio-panel { min-height: 0; grid-template-columns: 1fr; }
  .service-layout { grid-template-columns: 1fr; padding-top: 70px; }
  .service-section { padding-left: 0; }
  .service-aside { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .section-nav { top: var(--subnav-top, var(--header-height)); }
  /* The hidden-scrollbar strip gives no hint that more anchors exist off the
     right edge. Fade the edge; the trailing padding lets the last item scroll
     clear of the fade at full scroll. Caption span is already hidden here. */
  .section-nav__inner {
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 44px), transparent);
    mask-image: linear-gradient(90deg, #000 calc(100% - 44px), transparent);
  }
  .section-nav__inner > div { padding-right: 48px; }
  .contact-band__inner { align-items: flex-start; }
  .start-section > .shell,
  .portfolio > .shell,
  .area-services > .shell,
  #offices > .shell,
  .page--managed.page--area .section > .shell { display: block; }
  .start-section > .shell > .section-title,
  .portfolio > .shell > .section-title,
  .area-services > .shell > .section-title,
  #offices > .shell > .section-title { margin-bottom: 20px; }
  .start-section > .shell > .section-intro,
  .portfolio > .shell > .section-intro,
  .area-services > .shell > .section-intro,
  #offices > .shell > .section-intro,
  .page--managed.page--area .section > .shell > h2.section-title + .section-intro { margin-bottom: 38px; }
  .page--managed.page--area .section > .shell > h2.section-title { margin-bottom: 20px; }
}

@media (max-width: 680px) {
  :root {
    --shell: calc(100% - 28px);
    --header-height: 78px;
    --subnav-top: 67px; /* 7px header padding + 60px pill */
  }

  .site-header { padding-top: 7px; }
  .site-header__inner { min-height: 60px; padding-inline: 16px; border-radius: 12px; }
  .brand__logo { width: 104px; }
  .menu-button { font-size: 12px; }
  .section { padding-block: 54px; }
  .section-title { font-size: clamp(40px, 12vw, 52px); }
  .cred-title { font-size: clamp(36px, 10vw, 46px); }
  .home-hero__grid { padding-block: 48px 58px; }
  .hero-copy h1,
  .home-hero .hero-copy h1,
  .service-hero .hero-copy h1,
  .area-hero .hero-copy h1 { font-size: clamp(44px, 13vw, 58px); line-height: 0.96; }
  .hero-proofline { margin-top: 36px; }
  .hero-proofline div { padding-right: 8px; }
  .hero-proofline div + div { padding-left: 10px; }
  .hero-proofline dd { font-size: 11px; }
  .capability-rail__inner { min-height: 58px; gap: 24px; }
  .capability-rail span { display: none; }
  .need-grid { border-radius: 12px; }
  .need-card { min-height: 220px; }
  .portfolio-tabs { margin-inline: -14px; padding-inline: 14px; background: transparent; border: 0; border-radius: 0; }
  /* Same affordance as the section nav: the sixth tab exists — say so. */
  .portfolio-tabs {
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent);
    mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent);
  }
  .portfolio-tabs::after { content: ""; flex: 0 0 34px; }
  .portfolio-tabs,
  .section-nav__inner {
    overscroll-behavior-inline: contain;
    scroll-snap-type: inline proximity;
  }
  .portfolio-tabs button { min-width: 132px; flex: 0 0 auto; }
  .portfolio-tabs button,
  .section-nav a { scroll-snap-align: start; }
  .portfolio-panel { padding: 24px; }
  .portfolio-panel__lead h3 { font-size: clamp(40px, 12vw, 48px); }
  .service-hero__inner { padding-bottom: 52px; }
  .service-hero__grid { gap: 44px; }
  .process-labels { grid-template-columns: 1fr; }
  .process-labels li { min-height: 0; text-align: left; }
  .process-labels strong,
  .process-labels em { max-width: none; margin-inline: 0; }
  .process-rail { display: none; }
  /* One scroller, at every width: the inner scrolls, the bar never does.
     The older layer made the bar scroll a max-content inner here, which put
     the inner's right edge (and the overflow fade) off-screen. */
  .section-nav { overflow-x: visible; }
  .section-nav__inner { width: var(--shell); min-width: 0; overflow-x: auto; scrollbar-width: none; }
  .section-nav__inner > div { flex: 0 0 auto; }
  .service-section { padding: 0 0 52px; }
  .service-section::before { display: none; }
  .service-section h2 { font-size: 38px; }
  .service-aside { grid-template-columns: 1fr; }
  .area-service-grid { grid-template-columns: 1fr; }
  .area-service-grid a,
  .area-service-grid a:nth-child(even) { min-height: 220px; }
  .area-service-grid h3,
  .portfolio-panel__services strong { min-height: 0; }
  .section-title.ms-subhead { margin-top: 38px; font-size: 28px; }
  .proof-grid li { min-height: 190px; }
  .contact-band__inner { gap: 34px; }
  .site-footer__inner { align-items: flex-start; text-transform: none; letter-spacing: 0.01em; }
  .section.section--slim { padding-block: 46px; }
  .sibling-nav { padding-bottom: 58px; }
  .ms-subhead { margin-top: 38px; }
}

@media (max-width: 360px) {
  :root { --shell: calc(100% - 20px); }
  .site-header__inner { padding-inline: 12px; }
  .brand__logo { width: 92px; }
  .primary-nav.is-open { padding: 88px 18px 28px; }
  .primary-nav.is-open a { padding-block: 13px; font-size: 28px; }
  .hero-copy h1,
  .home-hero .hero-copy h1,
  .service-hero .hero-copy h1,
  .area-hero .hero-copy h1 { font-size: clamp(38px, 12vw, 43px); }
  .section-title { font-size: clamp(36px, 11.5vw, 40px); }
  .cred-title { font-size: clamp(34px, 10.5vw, 38px); }
  .contact-band h2 { font-size: 36px; }
  .service-section h2 { font-size: 34px; }
  .home-hero .product-frame,
  .product-frame { padding: 14px; }
  .ops-sites { grid-template-columns: 1fr; }
  .ops-sites span:last-child { grid-column: auto; }
  .portfolio-panel { padding: 18px; }
  .orientation-frame { width: calc(100% - 12px); }
  .orientation__heading h2 { font-size: 40px; }
  .orientation-screen h3 { font-size: 34px; }
  .orientation-options--environment { grid-template-columns: 1fr; }
  .orientation-options--environment button { min-height: 88px; }
}

@media (max-width: 1120px) and (max-height: 560px) {
  .primary-nav.is-open { padding: 76px 22px 24px; }
  .primary-nav.is-open a { padding-block: 9px; font-size: clamp(24px, 6vw, 32px); }
}

@media (min-width: 1121px) and (max-height: 800px) {
  .home-hero { min-height: 620px; }
  .home-hero__grid { min-height: 600px; padding-block: 44px 56px; }
}

@media (hover: none) {
  .need-card:hover,
  .area-service-grid a:hover,
  .area-service-grid a:nth-child(even):hover {
    transform: none;
  }
}

@media (prefers-contrast: more) {
  .site-header__inner,
  .product-frame,
  .orientation-frame,
  .need-grid,
  .portfolio-panel,
  .glance-card,
  .outcome-grid article,
  .area-service-grid a {
    border-color: currentColor;
  }

  .eyebrow,
  .section-intro,
  .hero-copy .lede,
  .frame-note,
  .site-footer__inner {
    color: currentColor;
  }
}

@media (forced-colors: active) {
  .button,
  .portfolio-tabs button,
  .orientation-options button,
  .need-card,
  .area-service-grid a {
    border: 1px solid ButtonText;
  }

  .portfolio-tabs button[aria-selected="true"],
  .orientation-options button[aria-pressed="true"] {
    outline: 3px solid Highlight;
    outline-offset: -4px;
  }

  .live-label i,
  .capability-rail a::before,
  .product-frame::before {
    background: Highlight;
  }
}

/* Liquid hero treatment — the fluid is an atmosphere, not a second interface. */
.home-hero {
  position: relative;
  isolation: isolate;
  min-height: 720px;
  overflow: clip;
  background:
    linear-gradient(90deg, rgba(128, 190, 237, 0.035) 1px, transparent 1px),
    linear-gradient(rgba(128, 190, 237, 0.035) 1px, transparent 1px),
    radial-gradient(circle at 74% 42%, rgba(77, 155, 232, 0.16), transparent 36%),
    linear-gradient(140deg, #0a1725 0%, #0c2030 52%, #07111b 100%);
  background-size: 72px 72px, 72px 72px, auto, auto;
}

.home-hero::before {
  z-index: 0;
  opacity: 0.55;
}

.home-hero__ether {
  position: absolute;
  z-index: 0;
  inset: -10% -10% -10% 20%;
  width: auto;
  height: auto;
  overflow: hidden;
  opacity: 0.78;
  pointer-events: none;
  background:
    radial-gradient(
      ellipse at 68% 44%,
      rgba(198, 236, 255, 0.20),
      transparent 48%
    ),
    radial-gradient(
      circle at 82% 60%,
      rgba(37, 134, 216, 0.22),
      transparent 42%
    );
  -webkit-mask-image: radial-gradient(
    ellipse at 68% 48%,
    #000 0 36%,
    transparent 80%
  );
  mask-image: radial-gradient(
    ellipse at 68% 48%,
    #000 0 36%,
    transparent 80%
  );
  mix-blend-mode: screen;
}

.liquid-ether-container canvas {
  display: block;
  width: 100%;
  height: 100%;
  /* The renderer now loads after page load, so the canvas arrives late; fade
     it in rather than letting it pop over the settled hero. Reduced motion
     zeroes this duration globally. */
  opacity: 0;
  transition: opacity 700ms var(--ease-ive);
}

.liquid-ether-container[data-liquid-state="ready"] canvas {
  opacity: 1;
}

.home-hero__ether[data-liquid-state="fallback"] {
  opacity: 0.25;
  background: radial-gradient(
    ellipse at 70% 44%,
    rgba(109, 188, 242, 0.32),
    transparent 64%
  );
}

.home-hero__veil {
  position: absolute;
  z-index: 1;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    rgba(7, 17, 27, 0.92) 0%,
    rgba(7, 17, 27, 0.70) 35%,
    rgba(7, 17, 27, 0.18) 74%,
    rgba(7, 17, 27, 0.10) 100%
  );
}

.home-hero .hero-glow {
  z-index: 1;
  opacity: 0.28;
}

.home-hero__grid {
  position: relative;
  z-index: 2;
  min-height: 720px;
  grid-template-columns: minmax(0, 840px);
  align-items: center;
  padding-block: 86px 82px;
}

.home-hero .hero-copy {
  max-width: 840px;
}

.home-hero .hero-copy h1 {
  max-width: 820px;
  margin-bottom: 28px;
  color: #f4f9fd;
  font-family: "EB Garamond", Georgia, serif;
  font-size: 82px;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 0.98;
  text-wrap: balance;
}

.home-hero .eyebrow {
  color: #a9ddff;
  font-size: 11px;
  letter-spacing: 0.15em;
}

.home-hero .hero-copy .lede {
  max-width: 620px;
  margin-bottom: 36px;
  color: #bfd0dd;
  font-size: 18px;
  line-height: 1.65;
}

.home-hero .button--light {
  color: #071522;
  background: #d2ecfd;
  border-color: rgba(255, 255, 255, 0.72);
  box-shadow: 0 14px 34px -22px rgba(117, 196, 246, 0.9);
}

.home-hero .button--light:hover {
  color: #06111b;
  background: #ffffff;
}

.home-hero .button--outline {
  color: #e0edf6;
  background: rgba(7, 17, 27, 0.18);
  border-color: rgba(169, 221, 255, 0.42);
}

.home-hero .button--outline:hover {
  color: #ffffff;
  background: rgba(109, 188, 242, 0.14);
  border-color: rgba(181, 229, 255, 0.82);
}

.home-hero .hero-proofline {
  max-width: 620px;
  margin-top: 46px;
  border-top-color: rgba(183, 218, 240, 0.22);
}

.home-hero .hero-proofline div + div {
  border-left-color: rgba(183, 218, 240, 0.22);
}

.home-hero .hero-proofline dt {
  color: #8da6b8;
  font-size: 11px;
  letter-spacing: 0.14em;
}

.home-hero .hero-proofline dd {
  color: #e2eef6;
  font-size: 14px;
}

@media (max-width: 1120px) {
  .home-hero {
    min-height: 660px;
  }

  .home-hero__ether {
    inset: -8% -18% -8% 8%;
    opacity: 0.48;
  }

  .home-hero__grid {
    min-height: 660px;
    grid-template-columns: minmax(0, 760px);
    padding-block: 78px 72px;
  }

  .home-hero .hero-copy h1 {
    font-size: 64px;
  }
}

@media (max-width: 680px) {
  .home-hero {
    min-height: 640px;
  }

  .home-hero__ether {
    inset: -8% -16% -4% -12%;
    opacity: 0.56;
    -webkit-mask-image: radial-gradient(
      ellipse at 62% 42%,
      #000 0 30%,
      transparent 76%
    );
    mask-image: radial-gradient(
      ellipse at 62% 42%,
      #000 0 30%,
      transparent 76%
    );
  }

  .home-hero__veil {
    background: linear-gradient(
      90deg,
      rgba(7, 17, 27, 0.91) 0%,
      rgba(7, 17, 27, 0.72) 58%,
      rgba(7, 17, 27, 0.30) 100%
    );
  }

  .home-hero__grid {
    min-height: 640px;
    grid-template-columns: 1fr;
    padding-block: 64px 58px;
  }

  .home-hero .hero-copy h1 {
    max-width: 620px;
    font-size: 52px;
    line-height: 1.01;
  }

  .home-hero .hero-copy .lede {
    max-width: 540px;
    font-size: 16px;
  }

  .home-hero .hero-proofline {
    margin-top: 38px;
  }
}

@media (max-width: 360px) {
  .home-hero .hero-copy h1 {
    font-size: 44px;
  }

  .home-hero .hero-proofline dd {
    font-size: 12px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .home-hero__ether {
    opacity: 0.18;
  }
}

/* ── CDS cinematic hero video ──────────────────────────────────────────── */
.home-hero {
  background: #071522;
}

.cds-vortex-video {
  position: absolute;
  z-index: 0;
  inset: 0;
  overflow: hidden;
  background: #071522 url("/assets/hero/cds-cosmic-hero-4k.webp?v=e1917afe") center / cover no-repeat;
  pointer-events: none;
}

.cds-vortex-video__media {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  opacity: 0;
  transition: opacity 450ms var(--ease-ive);
}

.cds-vortex-video[data-cds-video-state="playing"] .cds-vortex-video__media {
  opacity: 1;
}

.home-hero__veil {
  z-index: 1;
  background:
    linear-gradient(90deg, rgba(5, 13, 24, 0.93) 0%, rgba(5, 13, 24, 0.77) 27%, rgba(5, 13, 24, 0.25) 63%, rgba(5, 13, 24, 0.06) 100%),
    linear-gradient(180deg, rgba(5, 13, 24, 0.16), rgba(5, 13, 24, 0.02) 46%, rgba(5, 13, 24, 0.22));
}

.home-hero .hero-glow {
  z-index: 1;
  opacity: 0.12;
}

@media (max-width: 680px) {
  .cds-vortex-video__media {
    object-position: 69% center;
  }

  .home-hero__veil {
    background:
      linear-gradient(90deg, rgba(5, 13, 24, 0.94) 0%, rgba(5, 13, 24, 0.82) 54%, rgba(5, 13, 24, 0.24) 100%),
      linear-gradient(180deg, rgba(5, 13, 24, 0.18), rgba(5, 13, 24, 0.18));
  }
}

@media (prefers-reduced-motion: reduce) {
  .cds-vortex-video__media {
    opacity: 0 !important;
  }
}

/* ── Blur Text headline ─────────────────────────────────────────────────── */
.blur-text {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  row-gap: 0;
  column-gap: 0;
}

.blur-text__word {
  display: inline-block;
  /* `pre`, not `nowrap`: each word carries its own trailing space and that
     space must not be collapsed away. See blur-text.js. */
  white-space: pre;
  will-change: transform, filter, opacity;
}

@media (prefers-reduced-motion: reduce) {
  .blur-text__word {
    opacity: 1 !important;
    filter: none !important;
    transform: none !important;
  }
}


/* Leadership feature - a light editorial composition for the founders. */
.leadership-section {
  position: relative;
  overflow: visible;
  padding-block: 112px;
  color: #18222c;
  background: #f5f2ef;
}

.leadership-section::before {
  display: none;
}

.leadership-feature {
  display: grid;
  grid-template-columns: minmax(0, 0.88fr) minmax(0, 1.12fr);
  gap: clamp(54px, 6.5vw, 102px);
  align-items: center;
}

.leadership-visual {
  position: relative;
  min-width: 0;
  min-height: 620px;
  isolation: isolate;
}

.leadership-portrait {
  position: absolute;
  margin: 0;
}

.leadership-portrait--primary {
  inset: 0 42px 0 0;
  z-index: 1;
}

.leadership-portrait__frame {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border: 1px solid rgba(25, 38, 50, 0.1);
  border-radius: 26px;
  background: #fffdfb;
  box-shadow: 0 28px 70px -40px rgba(20, 31, 42, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.7) inset;
}

.leadership-portrait__frame::after {
  position: absolute;
  z-index: 2;
  inset: 1px;
  content: "";
  pointer-events: none;
  border: 1px solid rgba(255, 255, 255, 0.58);
  border-radius: 25px;
}

.leadership-portrait__frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 50%;
  filter: grayscale(0.96) contrast(1.05) brightness(1.04);
  transform: scale(1.002);
  transition: filter 360ms ease, transform 650ms var(--ease-ive);
}

.leadership-portrait--secondary {
  right: -4px;
  bottom: 28px;
  z-index: 4;
  width: clamp(148px, 33%, 214px);
  height: clamp(214px, 42%, 292px);
  transform: rotate(3deg);
}

.leadership-portrait--secondary .leadership-portrait__frame {
  border: 8px solid #fffdfb;
  border-radius: 18px;
  box-shadow: 0 24px 55px -28px rgba(20, 31, 42, 0.46), 0 0 0 1px rgba(25, 38, 50, 0.1);
}

.leadership-portrait--secondary .leadership-portrait__frame::after {
  inset: 7px;
  border-radius: 11px;
}

.leadership-portrait--secondary .leadership-portrait__frame img {
  object-position: center 50%;
}

.leadership-portrait__meta {
  position: absolute;
  z-index: 6;
  bottom: 24px;
  left: 24px;
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: calc(100% - 210px);
  padding: 12px 16px;
  border: 1px solid rgba(255, 255, 255, 0.72);
  border-radius: 12px;
  color: #333c45;
  background: rgba(255, 253, 251, 0.84);
  box-shadow: 0 14px 30px -18px rgba(20, 31, 42, 0.48);
  font-size: 12px;
  line-height: 1.2;
  backdrop-filter: blur(18px);
}

.leadership-portrait__meta span {
  color: #69727b;
}

.leadership-portrait__meta strong {
  color: #1a232b;
  font-weight: 500;
}

.leadership-experience {
  position: absolute;
  z-index: 7;
  top: 34px;
  right: 12px;
  width: 150px;
  padding: 20px 18px 18px;
  border: 1px solid rgba(255, 255, 255, 0.72);
  border-radius: 21px;
  color: #fff;
  background: #2a4f78;
  box-shadow: 0 24px 48px -26px rgba(18, 52, 87, 0.74), 0 0 0 1px rgba(13, 37, 62, 0.08);
}

.leadership-experience strong {
  display: block;
  font-family: var(--font-heading);
  font-size: 50px;
  font-weight: 400;
  letter-spacing: -0.03em;
  line-height: 0.9;
}

.leadership-experience span {
  display: block;
  max-width: 90px;
  margin-top: 12px;
  color: rgba(255, 255, 255, 0.78);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.1em;
  line-height: 1.35;
  text-transform: uppercase;
}

.leadership-copy {
  min-width: 0;
  max-width: 700px;
  padding-top: 2px;
}

.leadership-kicker {
  margin: 0 0 22px;
  color: #255784;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  line-height: 1.3;
  text-transform: uppercase;
}

.leadership-copy h2 {
  max-width: 700px;
  margin: 0 0 24px;
  color: #171c22;
  font-family: var(--font-heading);
  font-size: clamp(48px, 4.3vw, 70px);
  font-weight: 400;
  letter-spacing: -0.016em;
  line-height: 0.94;
  text-wrap: pretty;
}

.leadership-summary {
  max-width: 630px;
  margin: 0;
  color: #5b626a;
  font-size: 17px;
  letter-spacing: -0.006em;
  line-height: 1.62;
  text-wrap: pretty;
}

.leadership-focus-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 16px;
  margin: 32px 0 0;
  padding: 0;
  list-style: none;
}

.leadership-focus-card {
  position: relative;
  display: flex;
  min-height: 132px;
  flex-direction: column;
  justify-content: space-between;
  padding: 18px 20px 17px;
  border: 1px solid rgba(23, 38, 51, 0.17);
  border-radius: 12px;
  background: rgba(255, 253, 251, 0.72);
  box-shadow: 0 14px 32px -25px rgba(22, 31, 40, 0.5);
  transition: border-color 220ms ease, box-shadow 220ms ease, transform 220ms ease;
}

.leadership-focus-card::before {
  display: block;
  width: 32px;
  height: 2px;
  margin-bottom: 16px;
  content: "";
  background: #1b4169;
}

.leadership-focus-card > span {
  position: absolute;
  top: 17px;
  right: 18px;
  color: #8a939b;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.1em;
}

.leadership-focus-card strong {
  color: #363e46;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.25;
}

.leadership-focus-card p {
  max-width: 270px;
  margin: 8px 0 0;
  color: #747b81;
  font-size: 12px;
  line-height: 1.4;
}

.leadership-founder-strip {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  margin-top: 28px;
  padding-top: 18px;
  border-top: 1px solid rgba(23, 38, 51, 0.17);
}

.leadership-founder-strip > div {
  min-width: 0;
}

.leadership-founder-strip > div + div {
  padding-left: 24px;
  border-left: 1px solid rgba(23, 38, 51, 0.14);
}

.leadership-founder-strip span {
  display: block;
  margin-bottom: 6px;
  color: #6f7880;
  font-size: 11px;
  letter-spacing: 0.1em;
  line-height: 1.2;
  text-transform: uppercase;
}

.leadership-founder-strip strong {
  color: #1d2c38;
  font-size: 15px;
  font-weight: 500;
}

@media (hover: hover) and (pointer: fine) {
  .leadership-focus-card:hover {
    border-color: rgba(35, 88, 132, 0.42);
    box-shadow: 0 20px 38px -26px rgba(35, 88, 132, 0.35);
    transform: translateY(-2px);
  }

  .leadership-portrait__frame:hover img {
    filter: grayscale(0.9) contrast(1.06) brightness(1.04);
    transform: scale(1.018);
  }
}

/* ── Homepage leadership: stack below 1121px ─────────────────────────────
   In the two-column grid the photo column drops under ~440px below 1120px
   and under ~300px below 980px; the founder captions then wrap and their
   icon buttons clip at the card edge (worst at 768px). Stack the section:
   full-width founder cards above the copy, the arrangement the phone layout
   already uses. Desktop (>1120px) keeps the side-by-side composition. */
@media (max-width: 1120px) {
  .leadership-feature {
    display: block;
  }

  .leadership-visual {
    min-height: 0;
    margin-bottom: 54px;
  }
}

@media (max-width: 980px) {
  .leadership-section {
    padding-block: 88px;
  }

  .leadership-portrait__meta {
    left: 16px;
    bottom: 18px;
    max-width: calc(100% - 145px);
    padding: 10px 12px;
    font-size: 11px;
  }

  .leadership-experience {
    top: 22px;
    right: 4px;
    width: 126px;
    padding: 16px 14px 15px;
  }

  .leadership-experience strong {
    font-size: 42px;
  }

  .leadership-copy h2 {
    font-size: clamp(44px, 5.2vw, 60px);
  }

  .leadership-summary {
    font-size: 15px;
  }
}

@media (max-width: 720px) {
  .leadership-section {
    padding-block: 72px;
  }

  .leadership-feature {
    display: block;
  }

  .leadership-visual {
    width: calc(100% - 12px);
    min-height: min(126vw, 540px);
    margin: 0 auto 58px;
  }

  .leadership-portrait--primary {
    inset: 0 24px 0 0;
  }

  .leadership-portrait--secondary {
    right: -2px;
    bottom: 18px;
    width: 132px;
    height: 190px;
  }

  .leadership-portrait--secondary .leadership-portrait__frame {
    border-width: 6px;
    border-radius: 15px;
  }

  .leadership-portrait--secondary .leadership-portrait__frame::after {
    inset: 5px;
    border-radius: 9px;
  }

  .leadership-portrait__meta {
    left: 14px;
    bottom: 14px;
    max-width: calc(100% - 150px);
  }

  .leadership-experience {
    top: 18px;
    right: 2px;
    width: 116px;
    padding: 14px 12px 13px;
    border-radius: 17px;
  }

  .leadership-experience strong {
    font-size: 38px;
  }

  .leadership-experience span {
    margin-top: 9px;
    font-size: 11px;
  }

  .leadership-copy h2 {
    max-width: 570px;
    margin-bottom: 20px;
    font-size: clamp(46px, 12vw, 62px);
  }

  .leadership-summary {
    font-size: 16px;
  }

  .leadership-focus-list {
    grid-template-columns: 1fr;
    gap: 10px;
    margin-top: 28px;
  }

  .leadership-focus-card {
    min-height: 112px;
  }

  .leadership-founder-strip {
    gap: 14px;
    margin-top: 24px;
  }

  .leadership-founder-strip > div + div {
    padding-left: 14px;
  }

  .leadership-founder-strip strong {
    font-size: 13px;
  }
}

@media (max-width: 370px) {
  .leadership-founder-strip {
    grid-template-columns: 1fr;
  }

  .leadership-founder-strip > div + div {
    padding-top: 14px;
    padding-left: 0;
    border-top: 1px solid rgba(23, 38, 51, 0.14);
    border-left: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .leadership-portrait__frame img,
  .leadership-focus-card {
    transition: none;
  }
}

/* Leadership duo - equal founder portraits beside the shared expertise story. */
.leadership-visual {
  min-height: 594px;
}

.leadership-founder-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  height: 100%;
}

.leadership-founder-card {
  min-width: 0;
}

.leadership-founder-card__frame {
  position: relative;
  height: 594px;
  overflow: hidden;
  border: 1px solid rgba(25, 38, 50, 0.12);
  border-radius: 22px;
  background: #fffdfb;
  box-shadow: 0 26px 66px -40px rgba(20, 31, 42, 0.42), 0 0 0 1px rgba(255, 255, 255, 0.68) inset;
}

.leadership-founder-card__frame::after {
  position: absolute;
  z-index: 2;
  inset: 1px;
  content: "";
  pointer-events: none;
  border: 1px solid rgba(255, 255, 255, 0.56);
  border-radius: 21px;
}

.leadership-founder-card__frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 50%;
  filter: grayscale(0.96) contrast(1.05) brightness(1.04);
  transform: scale(1.002);
  transition: filter 360ms ease, transform 650ms var(--ease-ive);
}

.leadership-founder-card:first-child .leadership-founder-card__frame img {
  /* Art-direction: bias the crop toward the lower part of the photo. Was
     translateY(-10%), which shifts the crop even when cover fits by height
     (narrow cards) and cut the head off below ~800px. object-position only
     applies where vertical overflow exists, so narrow layouts keep the full
     headroom while the desktop composition stays the same. */
  object-position: center 69%;
}

.leadership-founder-card__caption {
  position: absolute;
  z-index: 4;
  right: 14px;
  bottom: 14px;
  left: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 62px;
  padding: 10px 10px 10px 13px;
  border: 1px solid rgba(255, 255, 255, 0.72);
  border-radius: 13px;
  color: #26323d;
  background: rgba(255, 253, 251, 0.86);
  box-shadow: 0 15px 30px -20px rgba(20, 31, 42, 0.52);
  backdrop-filter: blur(18px);
}

.leadership-founder-card__caption span {
  display: block;
  margin-bottom: 4px;
  color: #68737c;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.1em;
  line-height: 1.2;
  text-transform: uppercase;
}

.leadership-founder-card__caption strong {
  display: block;
  color: #1d2831;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.15;
  white-space: nowrap;
}

.leadership-social-links {
  display: flex;
  flex: 0 0 auto;
  gap: 5px;
}

.leadership-social-links a {
  position: relative;
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  color: #234e77;
  border: 1px solid rgba(35, 78, 119, 0.3);
  border-radius: 50%;
  transition: color 180ms ease, background 180ms ease, border-color 180ms ease, transform 180ms ease;
}

.leadership-social-links svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.5;
}

.leadership-social-links a::after {
  position: absolute;
  right: 0;
  bottom: calc(100% + 8px);
  padding: 5px 7px;
  content: attr(data-tooltip);
  color: #fff;
  background: #1d344c;
  border-radius: 5px;
  font-size: 11px;
  letter-spacing: 0.02em;
  line-height: 1;
  opacity: 0;
  pointer-events: none;
  transform: translateY(3px);
  transition: opacity 160ms ease, transform 160ms ease;
  white-space: nowrap;
}

.leadership-social-links a:hover,
.leadership-social-links a:focus-visible {
  color: #fff;
  background: #234e77;
  border-color: #234e77;
  transform: translateY(-1px);
}

.leadership-social-links a:hover::after,
.leadership-social-links a:focus-visible::after {
  opacity: 1;
  transform: translateY(0);
}

.leadership-copy__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 22px;
}

.leadership-copy__head .leadership-kicker {
  margin: 0;
}

.leadership-copy__head .leadership-experience {
  position: static;
  display: inline-flex;
  width: auto;
  flex: 0 0 auto;
  align-items: center;
  gap: 9px;
  padding: 9px 12px 9px 13px;
  border-radius: 11px;
  box-shadow: 0 16px 32px -22px rgba(18, 52, 87, 0.7);
}

.leadership-copy__head .leadership-experience strong {
  font-size: 29px;
  letter-spacing: -0.02em;
  line-height: 0.9;
}

.leadership-copy__head .leadership-experience span {
  max-width: none;
  margin: 0;
  font-size: 8px;
  line-height: 1.2;
}

@media (hover: hover) and (pointer: fine) {
  .leadership-founder-card__frame:hover img {
    filter: grayscale(0.9) contrast(1.06) brightness(1.04);
    transform: scale(1.018);
  }

  .leadership-founder-card:first-child .leadership-founder-card__frame:hover img {
    transform: translateY(-10%) scale(1.018);
  }
}

@media (max-width: 980px) {
  .leadership-visual {
    min-height: 560px;
  }

  .leadership-founder-card__frame {
    height: 560px;
  }

  .leadership-copy__head .leadership-experience {
    width: auto;
    padding: 9px 11px;
  }
}

@media (max-width: 720px) {
  .leadership-visual {
    width: 100%;
    min-height: 0;
    margin-bottom: 62px;
  }

  .leadership-founder-grid {
    grid-template-columns: 1fr;
    gap: 14px;
    height: auto;
  }

  .leadership-founder-card__frame {
    height: min(116vw, 430px);
  }

  /* Narrow frames crop these seated portraits vertically. Keep the top of
     the photo (the heads and their natural headroom) and give up the chair
     bottom instead — at 320px a centre crop puts hair on the frame edge. */
  .leadership-founder-card__frame img,
  .leadership-founder-card:first-child .leadership-founder-card__frame img {
    object-position: center 8%;
    border-radius: 20px;
  }

  .leadership-founder-card__frame::after {
    border-radius: 19px;
  }

  .leadership-founder-card__caption {
    right: 12px;
    bottom: 12px;
    left: 12px;
  }

  .leadership-copy__head {
    margin-bottom: 20px;
  }

  .leadership-copy__head .leadership-experience {
    width: auto;
    padding: 8px 10px;
    border-radius: 10px;
  }

  .leadership-copy__head .leadership-experience strong {
    font-size: 27px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .leadership-founder-card__frame img,
  .leadership-social-links a {
    transition: none;
  }
}

/* Compact delivery sequence: one continuous band with a deliberate, even rhythm. */
.proof {
  padding-block: clamp(54px, 4.6vw, 70px);
}

.proof-heading {
  margin-bottom: clamp(32px, 3vw, 44px);
}

.proof-grid {
  background: rgba(255, 255, 255, 0.38);
  border-color: rgba(28, 61, 84, 0.2);
  border-radius: 8px;
  box-shadow: 0 18px 44px -40px rgba(18, 38, 53, 0.62);
}

.proof .proof-grid li {
  min-height: 166px;
  padding: 25px 28px 24px;
  background: transparent;
  border-color: rgba(28, 61, 84, 0.16);
  transition: background-color 260ms ease, box-shadow 260ms ease;
}

.proof-grid li:nth-child(1) { --proof-tone: 90, 163, 210; }
.proof-grid li:nth-child(2) { --proof-tone: 147, 128, 170; }
.proof-grid li:nth-child(3) { --proof-tone: 99, 157, 141; }
.proof-grid li:nth-child(4) { --proof-tone: 114, 140, 158; }

.proof-grid span {
  width: max-content;
  margin-bottom: 25px;
  padding: 5px 8px;
  color: rgb(var(--proof-tone));
  border: 1px solid rgba(var(--proof-tone), 0.42);
  border-radius: 5px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.13em;
  line-height: 1;
}

.proof-grid strong {
  margin: 0;
  color: #1c2933;
  font-family: var(--font-body);
  font-size: 23px;
  font-weight: 500;
  letter-spacing: -0.025em;
  line-height: 1.12;
}

.proof-grid p {
  max-width: 290px;
  margin-top: 13px;
  font-size: 13px;
  line-height: 1.55;
}

@media (hover: hover) and (pointer: fine) {
  .proof-grid li:hover {
    background-color: rgba(var(--proof-tone), 0.075);
    box-shadow: inset 0 2px 0 rgba(var(--proof-tone), 0.52);
  }
}

@media (max-width: 900px) {
  .proof .proof-grid li {
    min-height: 158px;
    padding: 23px 24px;
  }
}

@media (max-width: 680px) {
  .proof {
    padding-block: 48px;
  }

  .proof-heading {
    gap: 24px;
    margin-bottom: 30px;
  }

  .proof .proof-grid li {
    min-height: 0;
    padding: 22px 20px 23px;
  }

  .proof-grid span {
    margin-bottom: 18px;
  }

  .proof-grid p {
    max-width: none;
  }
}

/* ── Narrative spine (managed services) ───────────────────────────────────
   The page was one rhythm repeated seven times: heading, intro, grid of
   cards. Content changed, form never did, so nothing told the reader where
   they were. Three act bands now mark the turns — the case, the service, the
   operation — and the middle act runs on ink so the page alternates ground
   rather than reading as one long slab. */
.ms-act {
  padding-block: 78px 26px;
  /* Matches .ms-paper exactly — ruled ground and all — so the band reads as
     the top of the act it introduces, not a slab laid on top of it. */
  color: #15222d;
  background:
    linear-gradient(90deg, rgba(28, 61, 84, 0.035) 1px, transparent 1px),
    #f2f5f5;
  background-size: 96px 100%;
}

.ms-act--ink {
  color: var(--color-text);
  background: var(--system-ink);
}

.ms-act__inner {
  display: grid;
  grid-template-columns: minmax(0, auto) minmax(0, 1fr);
  gap: 10px 34px;
  align-items: baseline;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--light-line);
}

.ms-act--ink .ms-act__inner {
  border-bottom-color: var(--system-line);
}

.ms-act__num {
  color: color-mix(in srgb, var(--portfolio-tone) 62%, var(--color-graphite));
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.ms-act--ink .ms-act__num {
  color: var(--portfolio-tone);
}

.ms-act__title {
  grid-column: 2;
  grid-row: 1;
  margin: 0;
  color: var(--color-graphite);
  font-family: var(--font-heading);
  font-size: clamp(30px, 4vw, 46px);
  font-weight: 400;
  letter-spacing: -0.03em;
  line-height: 1.02;
}

.ms-act--ink .ms-act__title {
  color: var(--color-text);
}

.ms-act__thesis {
  grid-column: 2;
  max-width: 620px;
  margin: 0;
  color: var(--color-copy-muted);
  font-size: 15px;
}

.ms-act--ink .ms-act__thesis {
  color: var(--color-neutral-400);
}

/* The five-stage transition is this page's signature moment, so it gets the
   one interaction: a real tablist, horizontal on desktop, that reveals a
   stage without moving anything around it. */
.ms-stages {
  margin-top: 42px;
}

.ms-stages__track {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1px;
  overflow: hidden;
  background: var(--light-line);
  border: 1px solid var(--light-line);
  border-radius: 12px;
}

.ms-stages__track button {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 96px;
  padding: 20px 18px;
  color: var(--color-copy-muted);
  background: rgba(255, 255, 252, 0.72);
  border: 0;
  cursor: pointer;
  text-align: left;
  transition: background 200ms ease, color 200ms ease;
}

.ms-stages__track button:hover {
  background: #ffffff;
  color: var(--color-graphite);
}

.ms-stages__track button[aria-selected="true"] {
  color: var(--color-graphite);
  background: #ffffff;
  box-shadow: inset 0 3px 0 0 var(--portfolio-tone);
}

.ms-stages__track button:focus-visible {
  outline: 2px solid var(--color-cds-blue-deep);
  outline-offset: -3px;
}

.ms-stage__num {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
}

.ms-stage__name {
  font-size: 17px;
  font-weight: 500;
  letter-spacing: -0.01em;
}

.ms-stage__panel {
  padding: 26px 4px 0;
}

.ms-stage__panel[hidden] {
  display: none;
}

.ms-stage__lead {
  max-width: 640px;
  margin: 0;
  color: var(--color-copy-muted);
  font-size: 17px;
  line-height: 1.6;
}

@media (max-width: 900px) {
  .ms-act { padding-block: 56px 20px; }
  .ms-act__inner { grid-template-columns: 1fr; gap: 8px; }
  .ms-act__title, .ms-act__thesis { grid-column: 1; }
  .ms-act__title { grid-row: auto; }

  /* Stacked, because five stage labels cannot share a phone's width without
     truncating the one thing that identifies them. */
  .ms-stages__track { grid-template-columns: 1fr; }
  .ms-stages__track button { min-height: 0; flex-direction: row; align-items: baseline; gap: 14px; }
  .ms-stages__track button[aria-selected="true"] { box-shadow: inset 3px 0 0 0 var(--portfolio-tone); }
}

/* ── Managed services: close the dead space ───────────────────────────────
   Measured before touching anything: an act band ended with 26px, the next
   section opened with 86.4px, so every act title sat 112px away from the
   heading it introduces — three times over — and two sections inside one act
   were separated by 173px of nothing. Section padding is sized for sections
   that stand alone; inside an act they are already grouped, so they do not
   need to argue for their own separation. */
.page--managed .ms-act {
  padding-block: 44px 20px;
}

.page--managed .ms-act + .section,
.page--managed .ms-act + .section--slim {
  padding-top: 30px;
}

.page--managed .section + .section {
  padding-top: 42px;
}

.page--managed .section + .ms-act {
  padding-top: 30px;
}

.page--managed .section:last-of-type {
  padding-bottom: 64px;
}

/* Three items belong in three columns. The two-column fallback left the third
   card spanning the full width as a wide, short stub — the shape that reads as
   dead space rather than as a card. */
.page--managed #services .area-service-grid,
.page--managed #governance .outcome-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.page--managed #governance .outcome-grid article:last-child:nth-child(odd),
.page--managed #services .area-service-grid a:last-child:nth-child(odd) {
  grid-column: auto;
}

@media (max-width: 1024px) {
  .page--managed #services .area-service-grid,
  .page--managed #governance .outcome-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .page--managed #governance .outcome-grid article:last-child:nth-child(odd),
  .page--managed #services .area-service-grid a:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }
}

@media (max-width: 760px) {
  .page--managed #services .area-service-grid,
  .page--managed #governance .outcome-grid {
    grid-template-columns: 1fr;
  }

  .page--managed .ms-act { padding-block: 34px 16px; }
  .page--managed .ms-act + .section,
  .page--managed .ms-act + .section--slim { padding-top: 24px; }
  .page--managed .section + .section { padding-top: 34px; }
}

/* ── Core inclusions as one operating model ───────────────────────────────
   Six short lines were carrying six large cards in two columns, which is how
   a page ends up with more chrome than content. The heading claims ONE
   operating model, so this reads as one specification: term left, definition
   right, hairline between. Same idiom as the reporting pack and the tier
   matrix, so the page speaks a single data language. */
.ms-model {
  margin: 26px 0 0;
  border-top: 1px solid var(--system-line);
}

.ms-model__row {
  display: grid;
  grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
  gap: 12px 48px;
  padding: 20px 0;
  border-bottom: 1px solid var(--system-line);
}

.ms-model dt {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin: 0;
  color: var(--color-text);
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.01em;
}

.ms-model__num {
  color: var(--portfolio-tone);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
}

.ms-model dd {
  max-width: 68ch;
  margin: 0;
  color: var(--color-neutral-400);
  font-size: 15px;
  line-height: 1.6;
}

/* Paper variant, in case the act ground is ever flipped back. */
.ms-paper .ms-model { border-top-color: var(--light-line); }
.ms-paper .ms-model__row { border-bottom-color: var(--light-line); }
.ms-paper .ms-model dt { color: var(--color-graphite); }
.ms-paper .ms-model dd { color: var(--color-copy-muted); }

@media (max-width: 760px) {
  .ms-model { margin-top: 30px; }
  .ms-model__row { grid-template-columns: 1fr; gap: 6px; padding: 16px 0; }
  .ms-model dt { font-size: 17px; }
  .ms-model dd { font-size: 14.5px; }
}

/* ── About overview: story, capability and proof ───────────────────────── */
.page--about { --about-line: rgba(238,242,247,.16); --about-signal: #8ec5f5; }
.about-hero { position: relative; overflow: hidden; min-height: 690px; background: var(--color-bg); }
.about-hero::after { position: absolute; inset: 0; content: ""; pointer-events: none; background: linear-gradient(90deg, rgba(7,11,18,.98) 0%, rgba(7,11,18,.82) 48%, rgba(7,11,18,.35) 100%), radial-gradient(circle at 78% 46%, rgba(77,155,232,.14), transparent 31%); }
.about-hero .service-hero__inner { position: relative; z-index: 2; min-height: 690px; display: flex; align-items: center; }
.about-hero .hero-copy { max-width: 720px; }
.about-hero .hero-copy h1 { max-width: 690px; font-size: clamp(52px, 7.2vw, 104px); line-height: .91; letter-spacing: -.055em; }
.about-hero .lede { max-width: 570px; }
.about-capability-line { max-width: 520px; color: var(--color-neutral-400); font-size: 11px; letter-spacing: .13em; line-height: 1.7; text-transform: uppercase; }
.about-hero__field { position: absolute; z-index: 1; top: 50%; right: max(5vw, 50px); width: min(44vw, 620px); height: 460px; transform: translateY(-50%); opacity: .9; }
.about-hero__field::before, .about-hero__field::after { position: absolute; content: ""; background: linear-gradient(90deg, transparent, var(--about-line), transparent); }
.about-hero__field::before { top: 50%; left: 8%; width: 84%; height: 1px; }
.about-hero__field::after { top: 7%; left: 50%; width: 1px; height: 86%; background: linear-gradient(180deg, transparent, var(--about-line), transparent); }
.about-node, .about-core { position: absolute; display: grid; place-items: center; color: var(--color-neutral-400); font-size: 11px; letter-spacing: .11em; text-transform: uppercase; }
.about-node::before { width: 8px; height: 8px; margin-bottom: 10px; content: ""; border: 1px solid var(--about-signal); border-radius: 50%; box-shadow: 0 0 0 7px rgba(142,197,245,.08), 0 0 25px rgba(142,197,245,.3); }
.about-node { width: 130px; }
.about-node--cloud { top: 7%; left: calc(50% - 65px); }
.about-node--security { top: calc(50% - 19px); left: 0; }
.about-node--network { top: calc(50% - 19px); right: 0; }
.about-node--compute { bottom: 22%; left: calc(50% - 65px); }
.about-node--data { bottom: 5%; left: calc(50% - 65px); }
.about-node--power { bottom: -1%; left: calc(50% - 65px); }
.about-core { top: calc(50% - 44px); left: calc(50% - 62px); width: 124px; height: 88px; color: var(--color-text); border: 1px solid var(--about-signal); background: rgba(16,23,34,.84); box-shadow: 0 0 40px rgba(77,155,232,.18); font-family: var(--font-heading); font-size: 31px; letter-spacing: -.03em; text-transform: none; }
.about-core small { display: block; margin-top: -25px; color: var(--color-neutral-500); font-family: var(--font-body); font-size: 8px; letter-spacing: .1em; text-transform: uppercase; }
.about-proof { background: var(--color-mist); color: var(--color-mist-ink); }
.about-proof__grid { display: grid; grid-template-columns: repeat(4, 1fr); border-left: 1px solid var(--color-mist-line); }
.about-proof__grid > div { min-height: 142px; padding: 25px 24px; border-right: 1px solid var(--color-mist-line); }
.about-proof span, .about-proof small { display: block; color: var(--color-mist-muted); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; }
.about-proof strong { display: block; margin: 12px 0 4px; font-family: var(--font-heading); font-size: 35px; font-weight: 400; letter-spacing: -.03em; }
.about-proof small { font-size: 10px; letter-spacing: .02em; text-transform: none; }
.about-section { background: var(--color-mist-soft); color: var(--color-mist-ink); }
.about-editorial { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(300px, .9fr); gap: 12%; align-items: start; }
.about-editorial__copy { max-width: 560px; padding-top: 58px; color: var(--color-mist-muted); font-size: 18px; line-height: 1.65; }
.about-editorial__copy p { margin-bottom: 24px; }
.text-link { display: inline-flex; gap: 9px; align-items: center; color: inherit; border-bottom: 1px solid currentColor; font-size: 13px; font-weight: 500; padding-bottom: 4px; }
.text-link span { transition: transform 180ms var(--ease-ive); }
.text-link:hover span { transform: translate(3px, -3px); }
.about-section-head { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(280px, .9fr); gap: 12%; align-items: end; margin-bottom: 46px; }
.about-section-head .section-intro { margin: 0; }
.about-journey { background: var(--color-section); }
.about-timeline { position: relative; display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; margin: 0; padding: 26px 0 0; list-style: none; border-top: 1px solid var(--about-line); }
.about-timeline::before { position: absolute; top: -4px; left: 0; width: 8px; height: 8px; content: ""; border: 1px solid var(--about-signal); border-radius: 50%; background: var(--color-section); box-shadow: 0 0 0 5px rgba(142,197,245,.08); }
.about-timeline li { position: relative; min-height: 190px; padding: 0 22px; border-right: 1px solid var(--about-line); }
.about-timeline li:first-child { padding-left: 0; }
.about-timeline li:last-child { border-right: 0; }
.about-timeline li::before { position: absolute; top: -30px; left: 22px; width: 7px; height: 7px; content: ""; border: 1px solid var(--about-signal); border-radius: 50%; background: var(--color-section); }
.about-timeline li:first-child::before { left: 0; }
.about-timeline span, .about-reason-grid span, .about-trust-grid span { display: block; color: var(--color-accent-300); font-size: 10px; font-weight: 500; letter-spacing: .13em; text-transform: uppercase; }
.about-timeline h3 { margin: 25px 0 10px; font-family: var(--font-heading); font-size: 29px; font-weight: 400; line-height: 1; }
.about-timeline p { max-width: 190px; margin: 0; color: var(--color-neutral-400); font-size: 13px; line-height: 1.55; }
.about-timeline--three { grid-template-columns: repeat(3, 1fr); }
.about-timeline--three p { max-width: 320px; }
.about-journey__link { display: inline-block; margin-top: 30px; }
.about-stack-section { background: var(--color-bg); }
.about-stack { max-width: 950px; margin-inline: auto; border: 1px solid var(--about-line); }
.about-stack a { display: flex; min-height: 66px; align-items: center; justify-content: space-between; gap: 28px; padding: 14px 24px; color: var(--color-text); border-bottom: 1px solid var(--about-line); transition: background 180ms ease, padding 180ms var(--ease-ive); }
.about-stack a:last-child { border-bottom: 0; }
.about-stack a:hover { padding-left: 30px; background: var(--color-surface); }
.about-stack b { font-family: var(--font-heading); font-size: 25px; font-weight: 400; }
.about-stack span { color: var(--color-neutral-500); font-size: 13px; text-align: right; }
.about-reasons { background: var(--color-surface); }
.about-reason-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; margin: 0; padding: 0; list-style: none; background: var(--about-line); }
.about-reason-grid li { min-height: 220px; padding: 25px; background: var(--color-surface); }
.about-reason-grid h3 { max-width: 220px; margin: 32px 0 12px; font-family: var(--font-heading); font-size: 27px; font-weight: 400; line-height: 1; }
.about-reason-grid p { max-width: 270px; margin: 0; color: var(--color-neutral-400); font-size: 13px; }
.about-leadership { background: var(--color-area-collab); }
.about-leadership__grid { display: grid; grid-template-columns: minmax(260px, .72fr) minmax(420px, 1.28fr); gap: 8%; align-items: start; }
.about-leadership .section-intro { max-width: 400px; margin: 24px 0; }
.about-portraits { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.about-portraits figure { margin: 0; }
.about-portraits figure:first-child { margin-top: 68px; }
.about-portraits img { width: 100%; aspect-ratio: .72; object-fit: cover; object-position: center top; filter: saturate(.75); }
.about-portraits figcaption { display: flex; flex-direction: column; gap: 3px; padding-top: 12px; }
.about-portraits strong { font-family: var(--font-heading); font-size: 25px; font-weight: 400; }
.about-portraits span { color: var(--color-neutral-400); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.about-proof-section { background: var(--color-mist-soft); color: var(--color-mist-ink); }
.about-proof-columns { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--color-mist-line); }
.about-proof-columns article { min-height: 275px; padding: 24px; background: rgba(255,255,255,.18); }
.about-proof-columns article > span { color: var(--color-mist-muted); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; }
.about-proof-columns h3 { margin: 28px 0 12px; font-family: var(--font-heading); font-size: 29px; font-weight: 400; }
.about-proof-columns p { min-height: 85px; color: var(--color-mist-muted); font-size: 14px; }
.about-trust { background: var(--color-bg); }
.about-trust__inner { display: grid; grid-template-columns: .75fr 1.25fr; gap: 8%; align-items: start; }
.about-trust-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--about-line); }
.about-trust-grid a { min-height: 150px; padding: 22px; background: var(--color-surface); transition: background 180ms ease; }
.about-trust-grid a:hover { background: var(--color-surface-2); }
.about-trust-grid strong, .about-trust-grid small { display: block; }
.about-trust-grid strong { margin: 23px 0 8px; font-family: var(--font-heading); font-size: 25px; font-weight: 400; }
.about-trust-grid small { color: var(--color-neutral-500); font-size: 12px; }

@media (max-width: 900px) {
  .about-hero__field { right: -7%; width: 58vw; opacity: .55; }
  .about-editorial, .about-section-head, .about-leadership__grid, .about-trust__inner { grid-template-columns: 1fr; gap: 28px; }
  .about-editorial__copy { padding-top: 0; }
  .about-section-head { margin-bottom: 30px; }
  .about-timeline { grid-template-columns: 1fr; gap: 0; padding: 0 0 0 26px; border-top: 0; border-left: 1px solid var(--about-line); }
  .about-timeline::before { top: 0; left: -4px; }
  .about-timeline li, .about-timeline li:first-child { min-height: 0; padding: 0 0 36px 28px; border-right: 0; }
  .about-timeline li::before, .about-timeline li:first-child::before { top: 0; left: -30px; }
  .about-timeline h3 { margin-top: 16px; }
  .about-timeline p { max-width: 420px; }
  .about-portraits { max-width: 600px; }
  .about-subpage-links { gap: 0 12px; padding-top: 8px; }
  .about-subpage-links a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 8px; margin: 0 -8px; }
}
@media (max-width: 680px) {
  .about-hero, .about-hero .service-hero__inner { min-height: 640px; }
  .about-hero .hero-copy h1 { font-size: clamp(48px, 15vw, 72px); }
  .about-hero__field { top: 25%; right: -25%; width: 100vw; transform: none; opacity: .3; }
  .about-proof__grid { grid-template-columns: 1fr 1fr; }
  .about-proof__grid > div { min-height: 120px; padding: 18px 14px; }
  .about-proof strong { font-size: 28px; }
  .about-reason-grid, .about-proof-columns { grid-template-columns: 1fr; }
  .about-reason-grid li { min-height: 0; padding: 20px; }
  .about-reason-grid h3 { margin-top: 22px; }
  .about-stack a { display: block; padding: 18px; }
  .about-stack a:hover { padding-left: 18px; }
  .about-stack span { display: block; margin-top: 7px; text-align: left; }
  .about-portraits { gap: 10px; }
  .about-portraits figure:first-child { margin-top: 35px; }
  .about-portraits strong { font-size: 20px; }
  .about-trust-grid { grid-template-columns: 1fr; }
  .about-trust-grid a { min-height: 120px; }
}

/* About refinement: make the visual system feel active, measured and editorial. */
.about-hero__field { background-image: linear-gradient(rgba(142,197,245,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(142,197,245,.05) 1px, transparent 1px); background-size: 52px 52px; mask-image: radial-gradient(circle at center, black 20%, transparent 78%); }
.about-hero__field::before { width: 92%; left: 4%; background: linear-gradient(90deg, transparent 0%, var(--about-line) 20%, var(--about-signal) 50%, var(--about-line) 80%, transparent 100%); }
.about-hero__field::after { height: 92%; top: 4%; background: linear-gradient(180deg, transparent 0%, var(--about-line) 20%, var(--about-signal) 50%, var(--about-line) 80%, transparent 100%); }
.about-signal { position: absolute; z-index: 3; width: 5px; height: 5px; border-radius: 50%; background: var(--color-accent-200); box-shadow: 0 0 0 5px rgba(142,197,245,.08), 0 0 18px var(--about-signal); }
.about-signal--one { top: 50%; left: 8%; }
.about-signal--two { top: 7%; left: 50%; }
.about-signal--three { top: 50%; right: 8%; }
.about-signal--four { bottom: 7%; left: 50%; }
.about-connection { position: absolute; z-index: 0; display: block; opacity: .18; background: linear-gradient(90deg, transparent, var(--about-signal), transparent); transform-origin: left center; }
.about-connection--security { top: 50%; left: 8%; width: 42%; height: 1px; }
.about-connection--network { top: 50%; right: 8%; width: 42%; height: 1px; transform-origin: right center; }
.about-connection--cloud { top: 7%; left: calc(50% - .5px); width: 1px; height: 43%; background: linear-gradient(180deg, transparent, var(--about-signal), transparent); transform-origin: center top; }
.about-connection--compute { top: 50%; left: calc(50% - .5px); width: 1px; height: 28%; background: linear-gradient(180deg, var(--about-signal), transparent); transform-origin: center top; }
.about-connection--data { top: 50%; left: calc(50% - .5px); width: 1px; height: 45%; background: linear-gradient(180deg, var(--about-signal), transparent); transform-origin: center top; }
.about-connection--power { top: 50%; left: calc(50% - .5px); width: 1px; height: 51%; background: linear-gradient(180deg, var(--about-signal), transparent); transform-origin: center top; }
.about-node { transition: color 220ms ease, transform 220ms var(--ease-ive); }
.about-hero__field:hover .about-node { color: var(--color-text); transform: scale(1.04); }
.about-hero__field:hover .about-core { box-shadow: 0 0 60px rgba(77,155,232,.32); }
.about-leadership { position: relative; overflow: hidden; }
.about-leadership::before { position: absolute; right: -8%; bottom: -30%; width: 46vw; height: 90%; content: ""; border: 1px solid rgba(142,197,245,.13); border-radius: 50%; transform: rotate(-18deg); pointer-events: none; }
.about-leadership__grid { position: relative; z-index: 1; }
.about-leadership-note { max-width: 300px; margin-top: 70px; padding-top: 16px; border-top: 1px solid rgba(238,242,247,.18); }
.about-leadership-note span, .about-leadership-note small { display: block; color: var(--color-accent-300); font-size: 10px; letter-spacing: .13em; text-transform: uppercase; }
.about-leadership-note strong { display: block; margin: 15px 0 9px; color: var(--color-text); font-family: var(--font-heading); font-size: 25px; font-weight: 400; line-height: 1.05; }
.about-leadership-note small { color: var(--color-neutral-500); letter-spacing: .02em; text-transform: none; }
.about-portraits { align-items: start; }
.about-portrait { position: relative; }
.about-portrait--primary { margin-top: 0 !important; }
.about-portrait--secondary { margin-top: 128px !important; }
.about-portrait__image { position: relative; overflow: hidden; aspect-ratio: .78; background: #b8b1a7; box-shadow: 0 22px 50px rgba(0,0,0,.26); }
.about-portrait__image::after { position: absolute; inset: 0; content: ""; background: linear-gradient(180deg, transparent 62%, rgba(7,11,18,.56)), linear-gradient(135deg, rgba(77,155,232,.12), transparent 44%); pointer-events: none; mix-blend-mode: multiply; }
.about-portrait__image img { width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; object-position: center top; filter: saturate(.78) contrast(1.06); transition: transform 700ms var(--ease-ive), filter 350ms ease; }
.about-portrait:hover .about-portrait__image img { transform: scale(1.035); filter: saturate(1) contrast(1.04); }
.about-portrait__image > span { position: absolute; z-index: 1; top: 14px; right: 14px; color: white; font-size: 10px; letter-spacing: .12em; }
.about-portraits figcaption { padding-top: 16px; }
.about-portraits strong { font-size: 27px; }
.about-portraits span { letter-spacing: .12em; }
.about-timeline li, .about-stack a, .about-reason-grid li, .about-proof-columns article, .about-trust-grid a, .about-portrait { transition: transform 400ms var(--ease-ive), opacity 400ms ease, background 180ms ease; }
.about-stack a::after { content: "↗"; color: var(--color-accent-300); font-size: 18px; opacity: .5; transition: transform 220ms var(--ease-ive), opacity 220ms ease; }
.about-stack a:hover::after { opacity: 1; transform: translate(3px, -3px); }
.about-reason-grid li:hover { background: var(--color-surface-2); transform: translateY(-3px); }
.about-proof-columns article:hover { background: rgba(255,255,255,.38); transform: translateY(-3px); }
.about-trust-grid a:hover { transform: translateY(-3px); }
@media (prefers-reduced-motion: reduce) {
  .about-signal { animation: none; }
  .about-portrait__image img, .about-node, .about-stack a, .about-reason-grid li, .about-proof-columns article, .about-trust-grid a { transition: none; }
}
@media (max-width: 680px) {
  .about-leadership-note { margin-top: 42px; }
  .about-portrait--secondary { margin-top: 72px !important; }
  .about-portrait__image { aspect-ratio: .82; }
  .about-signal--one, .about-signal--three { display: none; }
}

/* About hero pivot: editorial provenance over technical spectacle. */
.about-hero .service-hero__inner { display: flex; }
.about-hero__layout { display: grid; grid-template-columns: minmax(0, .94fr) minmax(420px, 1.06fr); gap: 8%; align-items: center; width: 100%; }
.about-hero__media { position: relative; min-height: 520px; }
.about-hero__image { position: absolute; overflow: hidden; background: #b66f41; box-shadow: 0 32px 80px rgba(0,0,0,.36); }
.about-hero__image img { display: block; width: 100%; height: 100%; object-fit: cover; filter: saturate(.78) contrast(1.08); transition: transform 900ms var(--ease-ive), filter 400ms ease; }
.about-hero__image--large img { object-position: center top; }
.about-hero__image--small img { object-position: center top; }
.about-hero__image::after { position: absolute; inset: 0; content: ""; background: linear-gradient(180deg, transparent 55%, rgba(7,11,18,.48)), linear-gradient(135deg, rgba(7,11,18,.15), transparent 52%); pointer-events: none; }
.about-hero__image:hover img { transform: scale(1.045); filter: saturate(1) contrast(1.04); }
.about-hero__image span { position: absolute; z-index: 1; top: 14px; right: 16px; color: rgba(255,255,255,.86); font-size: 10px; letter-spacing: .14em; }
.about-hero__image--large { top: 0; right: 17%; width: 67%; height: 450px; }
.about-hero__image--small { right: 0; bottom: 0; width: 41%; height: 255px; border: 8px solid var(--color-bg); }
.about-hero__caption { position: absolute; bottom: 16px; left: 0; display: flex; flex-direction: column; gap: 6px; padding-left: 15px; border-left: 1px solid var(--color-accent-300); }
.about-hero__caption span, .about-hero__caption strong { display: block; }
.about-hero__caption span { color: var(--color-accent-300); font-size: 10px; letter-spacing: .13em; text-transform: uppercase; }
.about-hero__caption strong { color: var(--color-text); font-family: var(--font-heading); font-size: 22px; font-weight: 400; }
.about-hero__line { position: absolute; top: 14%; right: 8%; width: 1px; height: 72%; opacity: .42; background: linear-gradient(180deg, transparent, var(--color-accent-300) 22%, var(--color-accent-300) 78%, transparent); transform-origin: center top; }
.about-hero__line::before, .about-hero__line::after { position: absolute; left: -3px; width: 7px; height: 7px; content: ""; border: 1px solid var(--color-accent-300); border-radius: 50%; background: var(--color-bg); }
.about-hero__line::before { top: 22%; }
.about-hero__line::after { bottom: 22%; }
.about-hero .hero-copy { position: relative; z-index: 2; }
.about-hero .hero-copy h1 { max-width: 570px; }
@media (max-width: 900px) {
  .about-hero__layout { grid-template-columns: 1fr; gap: 42px; }
  .about-hero__media { width: min(100%, 600px); min-height: 460px; margin-left: auto; }
  .about-hero .service-hero__inner { padding-block: 80px 60px; }
}
@media (max-width: 680px) {
  .about-hero__media { min-height: 390px; }
  .about-hero__image--large { right: 12%; width: 72%; height: 330px; }
  .about-hero__image--small { width: 44%; height: 190px; border-width: 5px; }
  .about-hero__caption { bottom: 2px; }
  .about-hero__line { right: 5%; height: 78%; }
}

/* About ecosystem pages: same enterprise system, with a more formal reading rhythm. */
.company-hero { background: var(--color-bg); }
.company-hero .service-hero__inner { min-height: 420px; display: flex; align-items: center; }
.company-hero .service-hero__grid { min-height: 0; }
.company-hero .service-hero__grid, .company-hero .hero-copy { width: 100%; min-width: 0; max-width: 100%; }
.company-hero .hero-copy { max-width: 780px; }
.company-hero .hero-copy h1 { max-width: 760px; font-size: clamp(52px, 7vw, 96px); line-height: .93; letter-spacing: -.055em; }
.company-paper { background: var(--color-mist-soft); color: var(--color-mist-ink); }
.company-dark { background: var(--color-section); }
.company-heading { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(280px, .9fr); gap: 10%; align-items: start; }
.company-heading .section-intro { margin: 0; }
.company-copy { color: var(--color-neutral-400); font-size: 16px; line-height: 1.65; }
.company-copy > :last-child, .company-paper .section-intro:last-child, .company-dark .section-intro:last-child { margin-bottom: 0; }
/* Story: the heading rides beside the timeline instead of leaving the right
   half of a 1200px section empty; sticky keeps the context in view while the
   eras scroll. */
.company-split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 44px 84px; align-items: start; }
.company-split .company-heading { position: sticky; top: 108px; grid-template-columns: 1fr; gap: 22px; }
.company-copy h3 { margin: 0 0 6px; color: var(--color-text); font-family: var(--font-heading); font-size: 28px; font-weight: 400; }
.company-copy h3:not(:first-child) { margin-top: 26px; }
.company-copy--ink { color: var(--color-mist-muted); }
.company-copy--ink h3 { color: var(--color-mist-ink); }
.company-note { color: var(--color-accent-300); font-size: 12px; letter-spacing: .05em; }
.company-vertical-timeline { position: relative; margin: 0; padding: 0 0 0 42px; list-style: none; border-left: 1px solid var(--color-mist-line); }
.company-vertical-timeline::before { position: absolute; top: 0; left: -4px; width: 7px; height: 7px; content: ""; border: 1px solid var(--color-cds-blue, #4d9be8); border-radius: 50%; background: var(--color-mist-soft); }
.company-vertical-timeline li { position: relative; padding: 0 0 48px; }
.company-vertical-timeline li::before { position: absolute; top: 3px; left: -46px; width: 7px; height: 7px; content: ""; border: 1px solid var(--color-cds-blue, #4d9be8); border-radius: 50%; background: var(--color-mist-soft); }
.company-vertical-timeline li:last-child { padding-bottom: 0; }
.company-vertical-timeline span, .company-evidence-grid span, .company-story-grid span, .career-role-list span, .trust-grid span { display: block; color: var(--color-cds-blue, #2b7fd4); font-size: 10px; font-weight: 500; letter-spacing: .13em; text-transform: uppercase; }
.company-vertical-timeline h3 { margin: 14px 0 8px; color: var(--color-mist-ink); font-family: var(--font-heading); font-size: 32px; font-weight: 400; }
.company-vertical-timeline p { max-width: 620px; margin: 0; color: var(--color-mist-muted); font-size: 15px; }
.company-leaders { background: var(--color-area-collab); }
.company-leader-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.company-leader-grid article { display: grid; grid-template-columns: minmax(180px, .8fr) minmax(0, 1fr); gap: 24px; padding: 18px; border: 1px solid var(--about-line); background: rgba(7,11,18,.18); }
.company-leader-image { overflow: hidden; aspect-ratio: .82; background: #b66f41; }
.company-leader-image img { width: 100%; height: 100%; object-fit: cover; object-position: center top; filter: saturate(.78); transition: transform 650ms var(--ease-ive), filter 300ms ease; }
.company-leader-grid article:hover img { transform: scale(1.04); filter: saturate(1); }
.company-leader-meta { align-self: end; padding-bottom: 4px; }
.company-leader-meta span { color: var(--color-accent-300); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; }
.company-leader-meta h3 { margin: 14px 0 12px; color: var(--color-text); font-family: var(--font-heading); font-size: 34px; font-weight: 400; line-height: 1; }
.company-leader-meta p { margin-bottom: 22px; color: var(--color-neutral-400); font-size: 13px; }
.company-evidence-grid, .company-story-grid, .career-role-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--color-mist-line); }
.trust-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--color-mist-line); }
.company-evidence-grid article, .company-story-grid article { min-height: 245px; padding: 24px; background: rgba(255,255,255,.22); }
.company-evidence-grid h3, .company-story-grid h3 { margin: 30px 0 12px; color: var(--color-mist-ink); font-family: var(--font-heading); font-size: 29px; font-weight: 400; }
.company-evidence-grid p, .company-story-grid p { min-height: 80px; margin-bottom: 22px; color: var(--color-mist-muted); font-size: 14px; }
.company-evidence-grid strong, .company-story-grid strong { display: block; color: var(--color-mist-muted); font-size: 11px; letter-spacing: .04em; }
.trust-grid { background: var(--color-mist-line); }
.trust-grid article { min-height: 220px; padding: 24px; background: rgba(255,255,255,.23); }
.trust-grid h3 { margin: 31px 0 12px; color: var(--color-mist-ink); font-family: var(--font-heading); font-size: 29px; font-weight: 400; }
.trust-grid p { min-height: 58px; color: var(--color-mist-muted); font-size: 14px; }
.trust-grid strong { color: var(--color-mist-muted); font-size: 11px; letter-spacing: .04em; }
.career-domain-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--color-mist-line); }
.career-domain-grid span { padding: 22px; color: var(--color-mist-ink); background: rgba(255,255,255,.23); font-family: var(--font-heading); font-size: 23px; }
.career-role-list { grid-template-columns: repeat(3, minmax(0, 1fr)); background: var(--about-line); }
.career-role-list article { min-height: 250px; padding: 24px; background: var(--color-surface); }
.career-role-list h3 { margin: 30px 0 12px; color: var(--color-text); font-family: var(--font-heading); font-size: 29px; font-weight: 400; line-height: 1; }
.career-role-list p { min-height: 70px; color: var(--color-neutral-400); font-size: 14px; }
.career-role-list strong { color: var(--color-neutral-500); font-size: 11px; letter-spacing: .03em; }
.career-role-placeholder { border: 1px dashed var(--color-accent-500); background: var(--color-accent-900) !important; }
.about-delivery { background: var(--color-area-compute); }
.about-delivery-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--about-line); }
.about-delivery-grid a { min-height: 210px; padding: 24px; background: var(--color-surface); transition: transform 220ms var(--ease-ive), background 180ms ease; }
.about-delivery-grid a:hover { background: var(--color-surface-2); transform: translateY(-3px); }
.about-delivery-grid span { color: var(--color-accent-300); font-size: 10px; letter-spacing: .12em; }
.about-delivery-grid h3 { margin: 28px 0 10px; color: var(--color-text); font-family: var(--font-heading); font-size: 27px; font-weight: 400; }
.about-delivery-grid p { color: var(--color-neutral-400); font-size: 13px; }
.about-delivery-flow { display: flex; justify-content: center; gap: 18px; margin-top: 28px; color: var(--color-neutral-300); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; }
.about-delivery-flow i { color: var(--color-accent-300); font-style: normal; }
.about-subpage-links { display: flex; flex-wrap: wrap; gap: 12px 20px; margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--about-line); }
.about-subpage-links a { color: var(--color-neutral-400); font-size: 12px; }
.about-subpage-links a:hover { color: var(--color-text); }
.about-trust__link { margin-top: 30px; color: var(--color-neutral-300); }
@media (max-width: 1024px) {
  .company-leader-grid article { grid-template-columns: 1fr; }
  .company-leader-meta { align-self: start; }
  .career-domain-grid { grid-template-columns: repeat(2, 1fr); }
  .company-split { grid-template-columns: 1fr; }
  .company-split .company-heading { position: static; }
}
@media (max-width: 760px) {
  .company-hero .service-hero__inner { width: var(--shell); min-width: 0; min-height: 440px; }
  .company-hero .service-hero__grid { display: grid; grid-template-columns: minmax(0, 1fr); width: 100%; min-width: 0; }
  .company-hero .service-hero__grid > .hero-copy:only-child,
  .company-hero .hero-copy { width: 100%; min-width: 0; max-width: calc(100vw - 28px) !important; }
  .company-hero .hero-copy h1 { width: 100%; max-width: 350px !important; font-size: clamp(36px, 10vw, 42px); line-height: .96; white-space: normal !important; overflow-wrap: anywhere; }
  .company-hero .hero-copy .lede { width: 100%; max-width: 350px !important; font-size: 15px; white-space: normal !important; overflow-wrap: anywhere; }
  .company-heading { grid-template-columns: 1fr; gap: 22px; }
  .company-heading > *, .company-copy, .company-heading .section-intro { width: 100%; min-width: 0; max-width: 350px !important; overflow-wrap: anywhere; }
  .company-heading .section-title { font-size: clamp(40px, 11vw, 46px); }
  .company-evidence-grid, .company-story-grid, .trust-grid, .career-role-list, .about-delivery-grid { grid-template-columns: 1fr; }
  .company-leader-grid { grid-template-columns: 1fr; }
  .company-leader-grid article { grid-template-columns: minmax(120px, .65fr) minmax(0, 1fr); gap: 16px; }
  .company-leader-meta h3 { font-size: 27px; }
  .about-delivery-flow { flex-wrap: wrap; justify-content: flex-start; gap: 9px 14px; }
}
@media (max-width: 520px) {
  .career-domain-grid { grid-template-columns: 1fr; }
  .company-leader-grid article { grid-template-columns: 1fr; }
}


/* ── Credential lists on a paper ground ───────────────────────────────────
   The `.section:not(.ms-paper) .cred-list` block above paints this list for
   the contact page's ink band, where --color-text is near-white. The
   homepage Why-CDS section and the service hubs' engagement detail sit on
   paper, so they need the paper colours back. Specificity matches the ink
   rules and this comes later, so it wins. */
.section.proof .cred-list,
.section.proof .cred-list li,
.section .engagement-detail .cred-list,
.section .engagement-detail .cred-list li {
  border-color: var(--light-line);
}

.section.proof .cred-list strong,
.section .engagement-detail .cred-list strong {
  color: var(--color-graphite);
}

.section.proof .cred-list span,
.section .engagement-detail .cred-list span {
  color: var(--color-copy-muted);
}

.section.proof .cred-groups .cred-group > h3 {
  color: color-mix(in srgb, var(--portfolio-tone) 44%, var(--color-graphite));
}

/* ── Mobile tap-area floor ────────────────────────────────────────────────
   Small inline links measured 16-28px tall at 375px against the 44px
   delivery-standard floor. Two mechanics, chosen by display type:
   - inline links: vertical padding paints outside the line box, so the hit
     area grows with zero layout shift;
   - inline-flex / inline-block / grid links: padding grows the box, so the
     matching negative margin hands the space back to the layout while the
     border-box (the hit target) keeps it. */
@media (max-width: 720px) {
  main p a:not(.button),
  main dl a {
    padding-block: 13px;
  }

  /* Fixed-size links (inline-flex with min-heights, 28px icon circles):
     an absolutely positioned pseudo-element extends the hit area with zero
     layout or visual impact — padding tricks fight their min-heights. */
  .text-link,
  .site-footer a:not(.button),
  .leadership-founder-card__caption a {
    position: relative;
  }

  .text-link::after,
  .site-footer a:not(.button)::after,
  .leadership-founder-card__caption a::after {
    position: absolute;
    inset: -9px 0;
    content: "";
  }
}