/* ============================================================
   MARZAL LABS — SITE STYLESHEET
   Blocks from the section library, dressed in the enterprise
   Data/AI reference pattern: near-black on white, light display
   type, pill buttons, 20px cards.
   Every value goes through a token. Section rhythm is set once
   on .sec — never per block.
   ============================================================ */

/* ---------- BASE ---------- */

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

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + var(--s-5)); }

body {
  margin: 0;
  background: var(--c-paper);
  color: var(--c-body);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
}

/* Display type runs LIGHT at large sizes. This is the single most
   recognisable trait of the pattern — resist bolding the headlines. */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: var(--fw-display);
  color: var(--c-ink);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  margin: 0 0 var(--s-5);
  text-wrap: balance;
}
h1 { font-size: var(--fs-hero); }
h2 { font-size: var(--fs-h2); line-height: 1.28; }
h3 { font-size: var(--fs-h3); font-weight: var(--fw-strong); line-height: var(--lh-mid); }
h4 { font-size: var(--fs-h4); font-weight: var(--fw-strong); line-height: var(--lh-mid); letter-spacing: 0; }

p { margin: 0 0 var(--s-4); max-width: var(--measure-prose); }
p:last-child { margin-bottom: 0; }

a { color: inherit; }
img, svg { display: block; max-width: 100%; }
ul, ol { margin: 0; padding: 0; }
li { list-style: none; }

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

/* ---------- LAYOUT ---------- */

.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.wrap--wide { max-width: var(--wrap-wide); }
.wrap--narrow { max-width: 860px; }

.sec { padding-block: var(--sec-pad-block); }
.sec--tight { padding-block: calc(var(--sec-pad-block) * .6); }
.sec--alt { background: var(--c-paper-alt); }
.sec--ink { background: var(--c-surface-dark); color: var(--c-on-ink-soft); }
.sec--ink h1, .sec--ink h2, .sec--ink h3, .sec--ink h4 { color: var(--c-on-ink); }
.sec--ink .eyebrow { color: var(--c-accent-on-ink); }
.sec--ink .lede, .sec--ink p { color: var(--c-on-ink-soft); }
.sec--ink .btn-text { color: var(--c-accent-on-ink); }

/* The split head is gone — every section on every page now uses
   `.band-head`, defined with the homepage bands below. */

/* ---------- SECTION PANELS ----------
   Each section reads as its own object: a rounded, inset panel with a
   soft edge, rather than a full-bleed colour band butted against the
   next one. This is what gives the page a section-by-section rhythm. */

.sec--panel { padding-block: calc(var(--sec-pad-block) * .34); }
.sec--panel > .wrap {
  border-radius: var(--radius-panel);
  padding-block: clamp(2.75rem, 5.5vw, 5rem);
  padding-inline: clamp(1.5rem, 4vw, 4rem);
  background: var(--c-paper-alt);
}
.sec--panel.sec--ink { background: transparent; }
.sec--panel.sec--ink > .wrap { background: var(--c-surface-dark); }
.sec--panel.sec--outline > .wrap {
  background: var(--c-paper);
  border: var(--hairline) solid var(--c-border-strong);
}

/* Heroes and section bands meet the viewport cleanly, like the reference layout. */
.hero, .page-hero, .product-hero {
  border-radius: 0;
}

/* ---------- TYPE HELPERS ---------- */

.eyebrow {
  font-family: var(--font-body);
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-strong);
  text-transform: uppercase;
  letter-spacing: var(--ls-eyebrow);
  color: var(--c-accent);
  margin: 0 0 var(--s-4);
  display: flex; align-items: center;
}
.lede {
  font-size: var(--fs-lead);
  line-height: 1.6;
  color: var(--c-ink-soft);
  max-width: 62ch;
}
.small { font-size: var(--fs-sm); color: var(--c-ink-faint); }
.rule { height: 1px; background: var(--c-border); border: 0; margin: var(--s-7) 0; }

/* ---------- BUTTONS — two variants only ----------
   Filled inverts with the surface: ink on light, white on dark.
   That inversion is what keeps a single CTA legible everywhere. */

.btn {
  display: inline-flex; align-items: center; gap: var(--s-2);
  padding: 15px var(--s-6);
  background: var(--c-surface-dark); color: #fff;
  font-family: var(--font-body); font-size: var(--fs-sm);
  font-weight: 700; letter-spacing: .005em; text-decoration: none;
  border: 0; border-radius: var(--radius-btn); cursor: pointer;
  transition: background var(--dur-hover) var(--ease),
              transform var(--dur-hover) var(--ease);
}
.btn:hover { background: var(--c-accent); transform: translateY(-1px); }
.btn::after { content: "\2192"; }

.sec--ink .btn, .hero .btn, .page-hero .btn, .product-hero .btn, .cta-band .btn {
  background: #fff; color: var(--c-surface-dark);
}
.sec--ink .btn:hover, .hero .btn:hover, .page-hero .btn:hover,
.product-hero .btn:hover, .cta-band .btn:hover {
  background: var(--c-accent-on-ink); color: var(--c-surface-dark);
}

/* Ring variant — a pill inside a thin aurora border, for a CTA sitting on
   the hero or on a dark image panel where it has to read as the brightest
   object on the band. Two backgrounds, one clipped to the padding box and
   one to the border box: the border itself becomes the gradient, and the
   pill keeps its radius on every engine.

   Specificity is deliberately .btn.btn--ring — it has to outrank
   `.hero .btn` and `.sec--ink .btn` above. */
.btn.btn--ring {
  --ring-fill: var(--c-paper);
  background:
    linear-gradient(var(--ring-fill), var(--ring-fill)) padding-box,
    conic-gradient(from 200deg, var(--c-aurora-1), var(--c-aurora-2),
                   var(--c-aurora-3), var(--c-aurora-1)) border-box;
  border: 2px solid transparent;
  color: var(--c-ink);
}
.btn.btn--ring:hover { --ring-fill: var(--c-accent-on-ink); color: var(--c-surface-dark); }

.btn-text {
  display: inline-flex; align-items: center; gap: var(--s-2);
  color: var(--c-accent); font-size: var(--fs-sm); font-weight: var(--fw-strong);
  text-decoration: none;
}
.btn-text::after { content: "\2192"; transition: transform var(--dur-hover) var(--ease); }
.btn-text:hover::after { transform: translateX(3px); }

/* ---------- FOCUS — always visible ---------- */

:where(a, button, input, textarea, select, [tabindex]):focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: 3px;
  border-radius: 4px;
}
.sec--ink :where(a, button):focus-visible,
.site-footer :where(a, button):focus-visible,
.hero :where(a, button):focus-visible,
.page-hero :where(a, button):focus-visible,
.product-hero :where(a, button):focus-visible {
  outline-color: var(--c-accent-on-ink);
}

.skip {
  position: absolute; left: var(--s-4); top: -60px; z-index: 200;
  background: var(--c-surface-dark); color: #fff;
  padding: var(--s-3) var(--s-5); text-decoration: none; border-radius: var(--radius-btn);
  transition: top var(--dur-hover) var(--ease);
}
.skip:focus { top: var(--s-4); }

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

/* ---------- BRAND LOCK-UP ----------
   Mark image plus a live text wordmark, so the wordmark recolours
   with the surface instead of needing a second image file. */

.brand { display: inline-flex; align-items: center; gap: var(--s-3); text-decoration: none; }
.brand img { width: 36px; height: 36px; border-radius: 9px; }
/* Two mark files, one shown at a time — see header() in lib.py. The light
   mark only appears where the header is sitting on the hero. */
.site-header .brand__mark--light { display: none; }
.brand span {
  font-family: var(--font-display); font-size: 1.1875rem; font-weight: 600;
  letter-spacing: -0.015em; color: var(--c-ink); white-space: nowrap;
}
.site-footer .brand img { width: 42px; height: 42px; border-radius: 11px; }
.site-footer .brand span { color: #fff; font-size: 1.3125rem; }

/* The homepage used to override the section rhythm, the grid and the card
   here. It no longer emits any of those components, and the rhythm is now
   one value for the whole site (--sec-pad-block), so the overrides are
   gone rather than left to rot. */

/* ---------- COMPONENT DETAIL ----------
   Small classes that replaced inline style attributes. Nothing in the
   markup carries a style="" any more — every value resolves through the
   token scale so the pages stay in step with each other. */

.insight-card { padding: 0; overflow: hidden; }
.insight-card__body { padding: var(--s-6); }
.insight-card__body h3 { font-size: 1.25rem; }
.insight-card__body .btn-text { margin-top: var(--s-5); }
.insight-card__body .small { margin-top: var(--s-4); }

.contact-form { display: grid; gap: var(--s-5); }
.contact-address { font-style: normal; line-height: 1.9; }
.h3-size { font-size: var(--fs-h3); }

/* ---------- STORY PROSE ----------
   Three short paragraphs at a comfortable reading measure. No cards, no
   grid — the story is the only thing on this band. */

.story-prose { max-width: 74ch; }
.story-prose p { font-size: var(--fs-lead); line-height: 1.7; color: var(--c-body); }
.story-prose p + p { margin-top: var(--s-5); }
.story-prose__links { display: flex; flex-wrap: wrap; gap: var(--s-6); margin-top: var(--s-7); }

/* ---------- OUR STORY ----------
   Four numbered chapters. The number is a marker in the margin, not a
   badge, so the reading line stays unbroken. */

.story { display: grid; gap: var(--s-6); counter-reset: story; }
.story > li {
  display: grid; grid-template-columns: 4.5rem 1fr; gap: var(--s-5);
  padding-top: var(--s-5); border-top: var(--hairline) solid var(--c-border);
}
.story > li:first-child { padding-top: 0; border-top: 0; }
.story__num {
  font-family: var(--font-display); font-weight: var(--fw-display);
  font-size: 1.75rem; line-height: 1; color: var(--c-accent);
}
.story h3 { font-size: 1.25rem; margin-bottom: var(--s-3); max-width: 34ch; }
.story p { color: var(--c-ink-soft); max-width: 76ch; }

/* The TRUTH letters as a single row, teasing the values page. */
.truth-row { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--s-4); }
.truth-row li {
  display: flex; align-items: baseline; gap: var(--s-3);
  padding: var(--s-5); background: var(--c-paper-alt); border-radius: 14px;
  font-size: var(--fs-sm); font-weight: var(--fw-strong); color: var(--c-ink);
}
.truth-row span {
  font-family: var(--font-display); font-weight: var(--fw-display);
  font-size: 2rem; line-height: 1; color: var(--c-accent);
}

/* ---------- TRUTH VALUES ----------
   Five cards, one per letter. The letter is the mark, set large and light
   in the display face, so reading across the row spells the acronym. */

.value-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--s-4); }
.value-card {
  display: flex; flex-direction: column; gap: var(--s-4);
  padding: var(--s-6); background: var(--c-paper);
  border: var(--hairline) solid var(--c-border); border-radius: 16px;
  box-shadow: var(--shadow-card);
  transition: border-color var(--dur-hover) var(--ease),
              box-shadow var(--dur-hover) var(--ease),
              transform var(--dur-hover) var(--ease);
}
.value-card:hover {
  border-color: var(--c-accent); box-shadow: var(--shadow-lift); transform: translateY(-2px);
}
.value-card__letter {
  font-family: var(--font-display); font-weight: var(--fw-display);
  font-size: clamp(2.75rem, 4vw, 3.75rem); line-height: .85;
  color: var(--c-accent); letter-spacing: var(--ls-tight);
}
.value-card h3 { font-size: 1.125rem; line-height: 1.3; }
.value-card p { margin-top: auto; font-size: var(--fs-sm); color: var(--c-ink-soft); }

.capstrip-group { margin-bottom: var(--s-8); }
.capstrip-group h3 { margin-bottom: var(--s-5); }
.capstrip-group h3 a { text-decoration: none; }

.taxonomy--stack { grid-template-columns: 1fr; }
.card__h3--lg { font-size: 1.25rem; }
.note-after { margin-top: var(--s-8); }
.site-footer .note-after { margin-top: var(--s-5); }
.person__role--tight { margin-top: calc(var(--s-2) * -1); }
/* ---------- FOUNDATION BAND ----------
   Six tiles, each with its own icon and its index. Lives on the Data &
   Cloud Modernisation page — it is page-neutral CSS deliberately, since
   it started life on the homepage and may be reused. */

.foundation { background: var(--c-paper-alt); }
.foundation h2 { max-width: 22ch; margin-bottom: var(--s-4); }
.foundation .lede { max-width: 72ch; margin-bottom: var(--s-8); }
.foundation__grid {
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--s-3);
}
.foundation__grid article {
  display: flex; flex-direction: column; gap: var(--s-4);
  min-height: 11rem; padding: var(--s-5);
  background: var(--c-paper); border: var(--hairline) solid var(--c-border);
  border-radius: 14px;
}
.foundation__head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); }
.foundation__icon { flex: 0 0 auto; width: 26px; height: 26px; color: var(--c-accent); }
.foundation__num {
  font-size: var(--fs-xs); font-weight: 700; letter-spacing: var(--ls-eyebrow);
  color: var(--c-ink-faint);
}
.foundation__grid h3 { font-size: 1rem; line-height: 1.3; }
.foundation__grid p { margin-top: auto; font-size: var(--fs-xs); color: var(--c-ink-soft); }
.about-team-photos { background: var(--c-paper); padding-bottom: var(--s-5); }
.about-team-photos + .sec[aria-labelledby="s-team"] { padding-top: var(--s-5); }
.about-team-gallery { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-4); }
.about-team-gallery figure { margin: 0; }
.about-team-gallery img { width: 100%; height: clamp(10rem, 15vw, 13rem); object-fit: cover; border-radius: var(--radius-card); }
.about-team-gallery figcaption { margin-top: var(--s-3); font-family: var(--font-display); font-size: 1rem; color: var(--c-ink); }

/* ---------- 1. HEADER ON THE HERO ----------
   On pages that opt in with .chrome-on-hero the nav sits on the hero
   itself instead of in a white
   band above it, so the photograph, the aurora and the utility bar read
   as one field — which is the whole point of the hero treatment.

   The hero is pulled up under the sticky header rather than the header
   being taken out of flow, so its sticky behaviour is untouched. It
   flips to the normal white bar the moment the reader scrolls (site.js
   toggles .is-scrolled past 40px) or opens a mega menu, because the menu
   panel itself is white. */

.chrome-on-hero .hero,
.chrome-on-hero .brand-hero { margin-top: calc(-1 * var(--nav-h)); }
/* .home-page is kept as a body hook for page-specific work; it carries no
   rules of its own now that the homepage uses the shared components. */
.chrome-on-hero .site-header {
  background: transparent; backdrop-filter: none; border-bottom-color: transparent;
}
/* A fade under the chrome rather than a bar: the mark, the wordmark and the
   nav have to stay legible over all three slides, and slides two and three
   are bright behind the top-left corner. It sits at z-index -1 inside the
   header's own stacking context, so it covers the hero but never the nav. */
.chrome-on-hero .site-header::after {
  content: ""; position: absolute; inset: 0 0 auto 0; z-index: -1;
  height: calc(100% + 3rem); pointer-events: none;
  background: linear-gradient(180deg, rgba(0,7,26,.88) 0%, rgba(0,7,26,.62) 46%,
                                      rgba(0,7,26,.24) 78%, transparent 100%);
}
.chrome-on-hero .site-header .brand span,
.chrome-on-hero .site-header .nav__link,
.chrome-on-hero .site-header .nav__trigger,
.chrome-on-hero .site-header .drawer-toggle { color: var(--c-on-ink); }
.chrome-on-hero .site-header .brand__mark--ink { display: none; }
.chrome-on-hero .site-header .brand__mark--light { display: block; }
.chrome-on-hero .site-header .nav__link:hover,
.chrome-on-hero .site-header .nav__trigger:hover,
.chrome-on-hero .site-header .nav__trigger[aria-expanded="true"] {
  color: var(--c-on-ink); background: rgba(255,255,255,.14);
}
.chrome-on-hero .site-header__cta { background: var(--c-paper); color: var(--c-ink); }
.chrome-on-hero .site-header__cta:hover { background: var(--c-accent-on-ink); color: var(--c-surface-dark); }
.chrome-on-hero .site-header :where(a, button):focus-visible { outline-color: var(--c-accent-on-ink); }

.chrome-on-hero .site-header.is-scrolled,
.chrome-on-hero .site-header:has(.nav__trigger[aria-expanded="true"]) {
  background: rgba(255, 255, 255, .93); backdrop-filter: blur(12px);
}
/* The fade belongs to the on-hero state only — separate rules, because a
   :has() selector an engine cannot parse would take the .is-scrolled one
   down with it if they shared a comma list. */
.chrome-on-hero .site-header.is-scrolled::after { display: none; }
.chrome-on-hero .site-header:has(.nav__trigger[aria-expanded="true"])::after { display: none; }
.chrome-on-hero .site-header.is-scrolled .brand span,
.chrome-on-hero .site-header.is-scrolled .nav__link,
.chrome-on-hero .site-header.is-scrolled .nav__trigger,
.chrome-on-hero .site-header.is-scrolled .drawer-toggle,
.chrome-on-hero .site-header:has(.nav__trigger[aria-expanded="true"]) .brand span,
.chrome-on-hero .site-header:has(.nav__trigger[aria-expanded="true"]) .nav__link,
.chrome-on-hero .site-header:has(.nav__trigger[aria-expanded="true"]) .nav__trigger,
.chrome-on-hero .site-header:has(.nav__trigger[aria-expanded="true"]) .drawer-toggle {
  color: var(--c-ink);
}
.chrome-on-hero .site-header.is-scrolled .brand__mark--ink,
.chrome-on-hero .site-header:has(.nav__trigger[aria-expanded="true"]) .brand__mark--ink { display: block; }
.chrome-on-hero .site-header.is-scrolled .brand__mark--light,
.chrome-on-hero .site-header:has(.nav__trigger[aria-expanded="true"]) .brand__mark--light { display: none; }
.chrome-on-hero .site-header.is-scrolled .nav__link:hover,
.chrome-on-hero .site-header.is-scrolled .nav__trigger:hover,
.chrome-on-hero .site-header.is-scrolled .nav__trigger[aria-expanded="true"],
.chrome-on-hero .site-header:has(.nav__trigger[aria-expanded="true"]) .nav__trigger[aria-expanded="true"] {
  color: var(--c-accent); background: var(--c-accent-wash);
}
.chrome-on-hero .site-header.is-scrolled .site-header__cta {
  background: var(--c-surface-dark); color: #fff;
}
.chrome-on-hero .site-header.is-scrolled .site-header__cta:hover { background: var(--c-accent); color: #fff; }

/* ---------- 2. BAND HEAD ----------
   One head block for every band on the homepage: eyebrow, heading across
   the full measure, optional link underneath. No standfirst column — the
   heading owns the full width, which is the point. */

.band-head { margin-bottom: clamp(2rem, 4vw, 3.5rem); }
.band-head h2 { max-width: none; text-wrap: balance; }
.band-head .lede { margin-top: var(--s-5); max-width: 78ch; }
.band-head .btn-text { margin-top: var(--s-5); }

/* ---------- 3. WHO WE ARE ----------
   White band carrying a soft blue field, full-width heading, three stat
   cards beneath it. Used on the homepage and on partner pages. */

.who-band { position: relative; background: var(--c-paper); overflow: hidden; }
.who-band::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(54% 62% at 60% 54%, var(--c-wash-blue), transparent 70%),
    radial-gradient(42% 52% at 97% 6%, var(--c-wash-violet), transparent 72%);
}
.who-band > .wrap { position: relative; }

/* Two panels under the head: the statement on the left, the figures on the
   right. The heading above still runs the full measure. */
.who-panels {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); align-items: stretch;
}
.who-panel {
  display: flex; flex-direction: column; gap: var(--s-5);
  padding: clamp(1.75rem, 3vw, 2.75rem);
  border: var(--hairline) solid var(--c-border); border-radius: 18px;
  background: var(--c-paper); box-shadow: var(--shadow-card);
}
.who-panel--say .lede { margin: 0; max-width: 46ch; }
.who-panel--say .btn-text { margin-top: auto; }
.who-panel--show { gap: 0; justify-content: center; }
/* stats stacked under the statement when the right panel holds artwork */
.who-panel__stats { display: grid; }
.who-panel--say .who-panel__stats { margin-top: var(--s-2); }
.who-panel--say .btn-text { margin-top: auto; padding-top: var(--s-5); }
/* the artwork panel: centred, never cropped, no plate of its own since the
   band is already white */

/* The TRUTH artwork as a section in its own right: tinted band, full section
   padding and a head above it, so it separates from the who-band's paper
   rather than running on from it. */
.truth-band-sec { background: var(--c-paper-alt); }
.truth-band { display: grid; justify-items: center; gap: var(--s-5); margin: 0; }
/* The artwork's ground is knocked out to transparency, so the plate colour
   lives here rather than baked into the raster — the same blue and violet
   washes the who-band uses, over paper so the dark labels keep their
   contrast. Hairline, radius and shadow match the who-panels.

   No max-width: it fills the measure, so it lines up with the who-panels and
   every other card row on the page. The raster is 2373px wide, so there is
   headroom above the ~1195px it renders at. */
.truth-band img {
  display: block; width: 100%; height: auto;
  background:
    radial-gradient(52% 64% at 16% 20%, var(--c-wash-blue), transparent 70%),
    radial-gradient(48% 58% at 86% 82%, var(--c-wash-violet), transparent 72%),
    radial-gradient(40% 50% at 92% 10%, var(--c-accent-wash), transparent 74%),
    var(--c-paper);
  border: var(--hairline) solid var(--c-border); border-radius: 18px;
  box-shadow: var(--shadow-card);
}
.truth-band figcaption { font-size: var(--fs-sm); color: var(--c-ink-faint); text-align: center; }
.truth-band figcaption a { color: var(--c-accent); font-weight: var(--fw-strong); }

/* The TRUTH artwork on the values page: full measure, centred. Its text is
   converted to outlines, so the alt text carries the meaning. */
.truth-art { margin: 0; }
.truth-art img { display: block; width: 100%; height: auto; }
.who-panel__stat {
  display: grid; grid-template-columns: 6.5rem 1fr; gap: var(--s-5);
  align-items: baseline; padding-block: var(--s-5);
  border-top: var(--hairline) solid var(--c-border);
}
.who-panel__stat:first-child { border-top: 0; padding-top: 0; }
.who-panel__stat:last-child { padding-bottom: 0; }
.who-panel__stat strong {
  font-family: var(--font-display); font-weight: var(--fw-display);
  font-size: clamp(2.25rem, 3.4vw, 3rem); line-height: .9;
  letter-spacing: var(--ls-tight); color: var(--c-ink);
}
.who-panel__stat span {
  font-size: var(--fs-sm); font-weight: var(--fw-strong);
  line-height: var(--lh-mid); color: var(--c-ink);
}

/* ---------- 3. SERVICES & CAPABILITIES ----------
   One dark card per pillar. The photograph fades into the card's own
   surface, so the title and the capability lines sit on flat ink rather
   than on the image. */

.home-capabilities { background: var(--c-paper-alt); }
/* Four services alternating either side of a centre line — the pillars are
   a sequence you read top to bottom, and the line says so. Two columns with
   a named gap: the line sits at the centre of that gap, and each node is
   offset by half the gap plus its own radius, so the nodes land exactly on
   the line at any width. */
.svc-rail {
  --svc-gap: clamp(2rem, 4vw, 3.5rem);
  --svc-node: 2.75rem;
  position: relative; display: grid; grid-template-columns: 1fr 1fr;
  column-gap: var(--svc-gap); row-gap: clamp(2rem, 4vw, 3.5rem);
  align-items: center;
}
.svc-rail::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: 50%;
  width: var(--hairline); background: var(--c-border-strong); transform: translateX(-50%);
}
.svc-step { display: grid; position: relative; }
.svc-step:nth-child(odd)  { grid-column: 1; justify-items: end; }
.svc-step:nth-child(even) { grid-column: 2; justify-items: start; }
/* fill the column so all four cards are the same width */
.svc-card { width: 100%; }
.svc-step__node {
  position: absolute; top: 50%; z-index: 1;
  display: grid; place-items: center;
  width: var(--svc-node); height: var(--svc-node); border-radius: 50%;
  background: var(--c-paper); border: var(--hairline) solid var(--c-border-strong);
  font-family: var(--font-display); font-size: var(--fs-sm); font-weight: var(--fw-strong);
  color: var(--c-accent); transform: translateY(-50%);
}
.svc-step:nth-child(odd) .svc-step__node {
  right: calc(-1 * (var(--svc-gap) / 2 + var(--svc-node) / 2));
}
.svc-step:nth-child(even) .svc-step__node {
  left: calc(-1 * (var(--svc-gap) / 2 + var(--svc-node) / 2));
}

.svc-card {
  display: flex; flex-direction: column; overflow: hidden; max-width: 30rem;
  background: var(--c-surface-dark); border-radius: 16px; text-decoration: none;
  transition: transform var(--dur-hover) var(--ease), box-shadow var(--dur-hover) var(--ease);
}
.svc-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); }
.svc-card__media {
  position: relative; display: block; aspect-ratio: 16 / 9;
  min-height: 0; flex: 0 0 auto; overflow: hidden;
}
.svc-card__media img {
  position: absolute; inset: 0; display: block;
  width: 100%; height: 100%; object-fit: cover;
}
.svc-card__media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,7,26,.24) 0%, rgba(0,7,26,.72) 58%,
                                      var(--c-surface-dark) 96%);
}
.svc-card__body {
  position: relative; z-index: 1; margin-top: -12%;
  display: flex; flex-direction: column; gap: var(--s-5);
  padding: var(--s-6); flex: 1;
}
.svc-card h3 {
  color: var(--c-on-ink); font-size: 1.25rem; line-height: 1.22;
  letter-spacing: var(--ls-tight);
}
.svc-card__lines { display: grid; gap: var(--s-3); }
.svc-card__lines li {
  display: flex; align-items: flex-start; gap: var(--s-3);
  font-size: var(--fs-sm); line-height: var(--lh-mid); color: var(--c-on-ink-soft);
}
.svc-card__icon { flex: 0 0 auto; width: 21px; height: 21px; color: var(--c-accent-on-ink); }
.svc-card .btn-text { margin-top: auto; color: var(--c-accent-on-ink); }

/* ---------- 4. PLATFORM PARTNERSHIPS ----------
   A continuously running rail. The track is emitted twice and shifted by
   exactly half the viewport plus half a gap, so the loop has no seam.
   Hover or keyboard focus pauses it; reduced motion turns it into a
   plain horizontal scroller (see the reduced-motion block). */

/* A light band, because the vendor logo files are supplied on white and
   we do not knock their backgrounds out — a badly keyed logo is worse
   than no logo. */
.home-platforms { background: var(--c-paper); overflow: hidden; }
.home-platforms .band-head { margin-bottom: 0; }

.partner-marquee { margin-block: clamp(2rem, 4vw, 3.5rem); }
.partner-marquee__viewport {
  display: flex; gap: var(--s-4); width: max-content;
  animation: partner-marquee 48s linear infinite;
}
.partner-marquee:hover .partner-marquee__viewport,
.partner-marquee:focus-within .partner-marquee__viewport { animation-play-state: paused; }
.partner-marquee__track { display: flex; gap: var(--s-4); }
@keyframes partner-marquee { to { transform: translateX(calc(-50% - var(--s-2))); } }

/* Every logo is normalised into the same box and contained inside it, so
   a wide wordmark and a square mark carry the same optical weight. */
.partner-tile {
  display: grid; justify-items: center; align-content: center; gap: var(--s-4);
  width: 13.5rem; padding: var(--s-5) var(--s-4); border-radius: 14px;
  text-decoration: none;
  transition: transform var(--dur-hover) var(--ease);
}
.partner-tile img { width: 100%; height: 3.25rem; object-fit: contain; }
.partner-tile__name {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--fs-xs); font-weight: var(--fw-strong); color: var(--c-ink-faint);
  white-space: nowrap;
}
.partner-tile__name::after {
  content: "\2197"; font-weight: 400; opacity: .55;
  transition: transform var(--dur-hover) var(--ease), opacity var(--dur-hover) var(--ease);
}
.partner-tile:hover { transform: translateY(-2px); }
.partner-tile:hover .partner-tile__name { color: var(--c-accent); }
.partner-tile:hover .partner-tile__name::after { opacity: 1; transform: translate(2px, -2px); }

/* ---------- 5. OUR WORK ----------
   Dark band, industry tabs, one story per tab. Tabs are driven by the
   shared tablist controller in site.js — no page-specific script. */

.home-work { position: relative; background: var(--c-surface-dark); color: var(--c-on-ink-soft); overflow: hidden; }
.home-work::before {
  content: ""; position: absolute; left: -28%; top: -25%; width: 90%; height: 150%;
  pointer-events: none; filter: blur(38px);
  background:
    radial-gradient(38% 42% at 26% 26%, var(--c-aurora-veil-1), transparent 70%),
    radial-gradient(44% 46% at 10% 92%, var(--c-aurora-veil-2), transparent 72%);
}
.home-work > .wrap { position: relative; }
.work-head {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: var(--s-5); margin-bottom: clamp(2rem, 4vw, 3.5rem);
}
.work-head .eyebrow { margin: 0; color: var(--c-accent-on-ink); }
.work-tabs { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.work-tab {
  padding: 11px var(--s-5); cursor: pointer;
  background: transparent; color: var(--c-on-ink-soft);
  border: var(--hairline) solid transparent; border-radius: var(--radius-btn);
  font-family: var(--font-body); font-size: var(--fs-sm); font-weight: var(--fw-strong);
  transition: color var(--dur-hover) var(--ease), background var(--dur-hover) var(--ease),
              border-color var(--dur-hover) var(--ease);
}
.work-tab:hover { color: var(--c-on-ink); background: rgba(255,255,255,.07); }
.work-tab[aria-selected="true"] {
  color: var(--c-on-ink); background: rgba(255,255,255,.07);
  border-color: rgba(255,255,255,.55);
}

.work-panel {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 5rem); align-items: center;
}
.work-panel[hidden] { display: none; }
.work-panel__copy h3 {
  font-family: var(--font-display); font-weight: var(--fw-display);
  font-size: var(--fs-h2); line-height: 1.14; letter-spacing: var(--ls-tight);
  color: var(--c-on-ink); max-width: 22ch; margin-bottom: var(--s-5);
}
.work-panel__copy p { color: var(--c-on-ink-soft); max-width: 52ch; margin-bottom: var(--s-6); }
.work-panel__card {
  display: grid; gap: var(--s-4); padding: var(--s-4);
  background: rgba(255,255,255,.06);
  border: var(--hairline) solid var(--c-border-on-ink); border-radius: 20px;
}
.work-panel__media { overflow: hidden; border-radius: 14px; aspect-ratio: 16 / 10; }
.work-panel__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.work-panel__quote {
  display: grid; grid-template-columns: auto 1fr; gap: var(--s-2) var(--s-4);
  margin: 0; padding: var(--s-5); background: var(--c-surface-dark-2); border-radius: 14px;
}
.work-panel__quote > span {
  font-family: var(--font-display); font-size: 2.75rem; line-height: 1;
  margin-top: -.35em; color: var(--c-accent-on-ink);
}
.work-panel__quote p { margin: 0; font-size: var(--fs-sm); color: var(--c-on-ink); }
.work-panel__quote cite {
  grid-column: 2; font-style: normal; font-size: var(--fs-xs); color: var(--c-on-ink-faint);
}
.work-panel__stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4); }
.work-panel__stats div { padding: var(--s-5); background: var(--c-surface-dark-2); border-radius: 14px; }
.work-panel__stats strong {
  display: block; font-family: var(--font-display); font-weight: var(--fw-display);
  font-size: clamp(1.75rem, 2.8vw, 2.5rem); line-height: 1; color: var(--c-on-ink);
}
.work-panel__stats span {
  display: block; margin-top: var(--s-3); font-size: var(--fs-xs); color: var(--c-on-ink-soft);
}

/* ---------- 6. TRUSTED CLIENTS ----------
   STARR is the one client that has agreed to be named, so it is the one
   logo file. The rest are the descriptors the case studies use — we do
   not display a mark we have no permission to display. */

.home-clients { background: var(--c-paper); }
/* Marks only — no plate, no caption, no border. The logos carry it. */
.client-logos {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: clamp(2.5rem, 6vw, 5.5rem);
}
.client-logos img { height: 3.25rem; width: auto; max-width: 15rem; object-fit: contain; }

/* ---------- 7. THOUGHT LEADERSHIP ----------
   Placeholders, and they say so. No author, no date and no download
   until there is a document behind them. */

.home-thought { background: var(--c-paper-alt); }
/* The side stack matches the feature panel's height rather than floating
   at its natural size, so the band reads as two columns and not as one
   tall panel with two off-cuts beside it. */
/* min-width: 0 on the items — without it a grid item's min-content width
   becomes a floor and the band overflowed the viewport by 15px on a phone. */
.thought-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: var(--s-4); align-items: stretch; }
.thought-grid > *, .thought-side > *, .thought-card > *, .thought-feature > * { min-width: 0; }
.thought-feature h3, .thought-card h3, .thought-feature__cover b { overflow-wrap: break-word; }
.thought-feature, .thought-card {
  background: var(--c-paper); border: var(--hairline) solid var(--c-border);
  border-radius: 18px; box-shadow: var(--shadow-card);
}
.thought-feature { display: grid; gap: var(--s-6); padding: var(--s-4) var(--s-4) var(--s-6); }
.thought-feature__cover {
  display: grid; align-content: center; gap: var(--s-3);
  aspect-ratio: 16 / 9; padding: clamp(1.5rem, 4vw, 3rem); border-radius: 12px;
  background:
    radial-gradient(58% 70% at 82% 12%, var(--c-aurora-veil-2), transparent 70%),
    radial-gradient(52% 64% at 6% 96%, var(--c-aurora-veil-1), transparent 72%),
    linear-gradient(140deg, var(--c-surface-dark), var(--c-surface-dark-2));
}
.thought-feature__cover span {
  font-size: var(--fs-eyebrow); font-weight: var(--fw-strong);
  text-transform: uppercase; letter-spacing: var(--ls-eyebrow);
  color: var(--c-accent-on-ink);
}
.thought-feature__cover b {
  font-family: var(--font-display); font-weight: var(--fw-display);
  font-size: clamp(1.375rem, 2.4vw, 2rem); line-height: 1.2; color: var(--c-on-ink);
}
.thought-feature > div { padding-inline: var(--s-4); }
.thought-feature h3 { font-size: 1.375rem; max-width: 26ch; }
.thought-feature p { font-size: var(--fs-sm); color: var(--c-ink-soft); max-width: 52ch; }

.thought-side { display: grid; gap: var(--s-4); grid-auto-rows: 1fr; }
.thought-card {
  display: grid; grid-template-columns: 12rem 1fr; gap: var(--s-5);
  padding: var(--s-4); align-items: center;
}
.thought-card__thumb {
  aspect-ratio: 4 / 3; border-radius: 12px;
  background:
    radial-gradient(60% 70% at 20% 20%, var(--c-aurora-veil-1), transparent 72%),
    radial-gradient(60% 70% at 90% 90%, var(--c-aurora-veil-2), transparent 72%),
    linear-gradient(140deg, var(--c-surface-dark), var(--c-surface-dark-2));
}
.thought-card__kicker {
  display: block; margin-bottom: var(--s-3);
  font-size: var(--fs-xs); font-weight: var(--fw-strong);
  text-transform: uppercase; letter-spacing: var(--ls-eyebrow); color: var(--c-ink-faint);
}
.thought-card h3 { font-size: 1.125rem; line-height: 1.3; }
.thought-card p { margin-top: var(--s-3); font-size: var(--fs-sm); color: var(--c-ink-soft); }
.thought-flag {
  display: inline-flex; margin-top: var(--s-5); padding: 7px var(--s-4);
  background: var(--c-accent-wash); color: var(--c-accent);
  border-radius: var(--radius-chip); font-size: var(--fs-xs); font-weight: var(--fw-strong);
}

/* ---------- UTILITY BAR ---------- */

.utility-bar {
  background: var(--c-surface-dark);
  color: var(--c-on-ink-soft);
  font-size: var(--fs-xs);
  height: var(--util-h);
  display: flex; align-items: center;
}
.utility-bar .wrap { display: flex; justify-content: space-between; align-items: center; width: 100%; }
.utility-bar nav { display: flex; gap: var(--s-5); }
.utility-bar a { color: var(--c-on-ink-soft); text-decoration: none; }
.utility-bar a:hover { color: var(--c-accent-on-ink); }
.utility-bar__meta { color: var(--c-on-ink-soft); }

/* ---------- HEADER ---------- */

.site-header {
  position: sticky; top: 0; z-index: var(--z-header);
  background: rgba(255, 255, 255, .93);
  backdrop-filter: blur(12px);
  border-bottom: var(--hairline) solid transparent;
  transition: border-color var(--dur-hover) var(--ease);
}
.site-header.is-scrolled { border-bottom-color: var(--c-border); }
.site-header__inner { display: flex; align-items: center; gap: var(--s-6); height: var(--nav-h); }

.nav { margin-left: auto; }
.nav__list { display: flex; align-items: center; gap: var(--s-1); }
.nav__trigger, .nav__link {
  display: inline-flex; align-items: center; gap: 6px;
  background: none; border: 0; cursor: pointer;
  font-family: var(--font-body); font-size: var(--fs-sm); font-weight: var(--fw-mid);
  color: var(--c-ink); padding: var(--s-3) var(--s-4); text-decoration: none;
  border-radius: var(--radius-btn);
  transition: color var(--dur-hover) var(--ease), background var(--dur-hover) var(--ease);
}
.nav__trigger::after {
  content: ""; width: 5px; height: 5px; margin-top: -3px;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg); transition: transform var(--dur-hover) var(--ease); opacity: .5;
}
.nav__trigger[aria-expanded="true"]::after { transform: rotate(225deg) translate(-2px,-2px); }
.nav__trigger:hover, .nav__link:hover { color: var(--c-accent); background: var(--c-accent-wash); }
.nav__trigger[aria-expanded="true"] { color: var(--c-accent); background: var(--c-accent-wash); }
.nav__link[aria-current="page"] { color: var(--c-accent); }

.site-header__cta { flex: 0 0 auto; margin-left: var(--s-4); }

.drawer-toggle {
  display: none; margin-left: auto;
  width: 44px; height: 44px; background: none; border: 0; cursor: pointer;
  color: var(--c-ink);
}
.drawer-toggle span {
  display: block; height: 2px; background: currentColor; margin: 5px auto; width: 22px;
  border-radius: 2px;
  transition: transform var(--dur-hover) var(--ease), opacity var(--dur-hover) var(--ease);
}
.drawer-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.drawer-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.drawer-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------- MEGA MENU ---------- */

.mega {
  position: absolute; left: 0; right: 0; top: 100%;
  z-index: var(--z-mega);
  background: var(--c-paper);
  border-top: var(--hairline) solid var(--c-border);
  border-radius: 0 0 var(--radius-card) var(--radius-card);
  box-shadow: var(--shadow-lift);
}
.mega[hidden] { display: none; }
.mega__grid {
  display: grid; grid-template-columns: minmax(180px, .75fr) minmax(0, 2.1fr);
  gap: var(--s-7); padding-block: var(--s-5);
}
.mega__promise {
  font-family: var(--font-display); font-size: 1.125rem; font-weight: 400;
  line-height: var(--lh-mid); color: var(--c-ink-soft); max-width: 30ch;
}
/* Grouped panel — Products splits its items under Insurance and
   Diagnostics headings. One column of groups, each group a two-up grid. */
.mega__groups { display: grid; gap: var(--s-5); align-content: start; }
.mega__group-label {
  font-size: var(--fs-eyebrow); font-weight: var(--fw-strong);
  text-transform: uppercase; letter-spacing: var(--ls-eyebrow);
  color: var(--c-ink-faint); margin-bottom: var(--s-3);
  padding-bottom: var(--s-2); border-bottom: var(--hairline) solid var(--c-border);
}
.mega__rail .btn-text { margin-top: var(--s-5); }
.mega__items { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-2) var(--s-5); }
.mega__items a {
  display: block; text-decoration: none; padding: var(--s-4);
  border-radius: var(--radius-sm);
  transition: background var(--dur-hover) var(--ease);
}
.mega__items a:hover { background: var(--c-paper-alt); }
.mega__title { display: block; font-weight: var(--fw-strong); font-size: var(--fs-sm); color: var(--c-ink); margin-bottom: 3px; }
.mega__desc { display: block; font-size: var(--fs-xs); color: var(--c-ink-faint); line-height: var(--lh-mid); }

/* A partner row leads with the official wordmark instead of a text title.
   The assets are lockups of very different proportions — Google Cloud is
   nearly nine times as wide as it is tall, Azure five — so they are capped
   on both axes and contained, which keeps every mark on one optical
   baseline without distorting any of them. */
.mega__logo {
  height: 24px; width: auto; max-width: 182px;
  object-fit: contain; object-position: left center;
  margin-bottom: 5px;
  transition: opacity var(--dur-hover) var(--ease);
}
.mega__items a:hover .mega__logo { opacity: .72; }
.mega__promo {
  display: none;
}
.mega__promo .eyebrow { color: var(--c-accent-on-ink); }
.mega__promo h3 { font-size: 1.1875rem; color: #fff; }
.mega__promo p { font-size: var(--fs-xs); color: var(--c-on-ink-soft); margin-bottom: var(--s-4); }
.mega__promo .btn-text { color: var(--c-accent-on-ink); }
.nav__item { position: static; }

/* ---------- MOBILE DRAWER ---------- */

.drawer {
  position: fixed; inset: var(--nav-h) 0 0 0; z-index: var(--z-drawer);
  background: var(--c-paper); overflow-y: auto; padding: var(--s-5) 0 var(--s-9);
}
.drawer[hidden] { display: none; }
.drawer__group { border-bottom: var(--hairline) solid var(--c-border); }
.drawer__trigger {
  width: 100%; display: flex; justify-content: space-between; align-items: center;
  background: none; border: 0; cursor: pointer; text-align: left;
  font-family: var(--font-display); font-size: 1.25rem; font-weight: 600; color: var(--c-ink);
  padding: var(--s-5) 0;
}
.drawer__trigger::after { content: "+"; font-size: 1.25rem; color: var(--c-accent); }
.drawer__trigger[aria-expanded="true"]::after { content: "\2212"; }
.drawer__panel { padding-bottom: var(--s-5); }
.drawer__sublabel {
  margin: var(--s-4) 0 var(--s-1);
  font-size: var(--fs-eyebrow); font-weight: var(--fw-strong);
  text-transform: uppercase; letter-spacing: var(--ls-eyebrow); color: var(--c-ink-faint);
}
.drawer__sublabel:first-child { margin-top: var(--s-2); }
.drawer__panel[hidden] { display: none; }
.drawer__panel a { display: block; padding: var(--s-3) 0; text-decoration: none; font-size: var(--fs-sm); color: var(--c-ink-soft); }
.drawer__panel a:hover { color: var(--c-accent); }
.drawer__link {
  display: block; padding: var(--s-5) 0; text-decoration: none;
  font-family: var(--font-display); font-size: 1.25rem; font-weight: 600; color: var(--c-ink);
  border-bottom: var(--hairline) solid var(--c-border);
}
.drawer .btn { margin-top: var(--s-6); width: 100%; justify-content: center; }
body.is-locked { overflow: hidden; }

/* ---------- HERO ROTATOR ---------- */

/* Five layers, back to front:
     __wash    the aurora — colour, painted on the ink field itself
     __media   the photograph, its left edge masked away to nothing
     __blend   a vignette that seats the photo in the field
     __scrim   the readability floor under the copy
     __inner   the copy
   The mask is what does the real work: without it the photograph ends
   on a visible vertical seam and the headline sits on a grey box. */
.hero {
  position: relative; color: var(--c-on-ink-soft);
  /* Ink only shows for the moment before the photograph paints. */
  background: var(--c-surface-dark);
  min-height: 660px; height: 82vh; max-height: 880px;
  display: flex; align-items: flex-end; overflow: hidden; isolation: isolate;
  /* Where the visible band sits in a photograph taller than the frame.
     Lower the number to raise the picture, raise it to lower the picture. */
  --hero-focus: 16%;
}
.hero__slide {
  position: absolute; inset: 0; opacity: 0; visibility: hidden;
  /* Slides are out of flow, so the hero's own align-items cannot reach
     them — each slide bottom-aligns its own content. */
  display: flex; align-items: flex-end;
  transition: opacity var(--dur-slide) var(--ease), visibility var(--dur-slide);
}
.hero__slide.is-active { opacity: 1; visibility: visible; }
.hero__media { position: absolute; inset: 0; z-index: 1; }
.hero__media img {
  width: 100%; height: 100%; object-fit: cover;
  object-position: center var(--hero-focus);
}
/* Watermark sheen — a light diagonal band drawn across the photograph.
   It sits above the image and below the scrim, and it runs out before
   the bottom-left corner where the headline sits, so the copy keeps the
   dark field it needs. */
.hero__media::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(108deg,
              transparent 4%, var(--c-sheen-soft) 24%, var(--c-sheen) 46%,
              var(--c-sheen-soft) 66%, transparent 86%);
}
/* The only thing over the picture: a neutral gradient rising from the
   bottom edge, sized to the copy block rather than the whole frame. It
   carries no hue, so the photograph keeps its own colour. */
/* Three neutral gradients, each doing one job. Black only — no hue, so the
   photograph keeps its own colour. The first is the important one: the copy
   sits in the upper-left of the band, and without a bed there it lands on
   whatever the photograph happens to be doing. On the two daylight slides
   that was white text at 1.3:1. */
.hero__scrim {
  position: absolute; inset: 0; z-index: 3;
  background:
    /* the copy's bed */
    linear-gradient(96deg, rgba(0,0,0,.90) 0%, rgba(0,0,0,.84) 28%,
                           rgba(0,0,0,.50) 50%, rgba(0,0,0,.14) 72%, transparent 86%),
    /* footing for the CTA and the slide dots */
    linear-gradient(0deg, rgba(0,0,0,.48) 0%, rgba(0,0,0,.14) 30%, transparent 56%),
    /* bed for the header chrome */
    linear-gradient(180deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.22) 14%, transparent 28%);
}
.hero__inner { position: relative; z-index: 4; width: 100%; padding-bottom: var(--s-10); }
.hero__copy { max-width: none; }
/* The one credential that belongs on the hero, bottom right, quiet. */
.hero__mark {
  position: absolute; z-index: 4; right: var(--gutter); bottom: var(--s-9);
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-3) var(--s-5) var(--s-3) var(--s-3);
  background: rgba(255,255,255,.07); border: var(--hairline) solid var(--c-border-on-ink);
  border-radius: var(--radius-btn); backdrop-filter: blur(8px);
}
.hero__mark span {
  display: grid; font-size: var(--fs-xs); line-height: 1.3; color: var(--c-on-ink-faint);
}
.hero__mark b { color: var(--c-on-ink); font-weight: var(--fw-strong); }
.hero__title {
  font-family: var(--font-display); font-weight: var(--fw-display);
  font-size: clamp(2.25rem, 4.2vw, 3.5rem);
  line-height: 1.16; letter-spacing: var(--ls-tight);
  color: #fff; margin: 0 0 var(--s-5);
  /* Set on the headline itself so `ch` resolves against ITS font-size. */
  max-width: 28ch; text-wrap: balance;
}
.hero .eyebrow { color: var(--c-accent-on-ink); }
.hero__sub { font-size: var(--fs-lead); color: var(--c-on-ink-soft); max-width: 54ch; margin-bottom: var(--s-6); }
.hero__dots { position: absolute; z-index: 5; bottom: var(--s-7); left: 0; right: 0; }
.hero__dots .wrap { display: flex; gap: var(--s-3); align-items: center; justify-content: center; }
.hero__dot {
  width: 46px; height: 3px; padding: 0; border: 0; cursor: pointer; border-radius: 3px;
  background: rgba(255,255,255,.3);
  transition: background var(--dur-hover) var(--ease);
}
.hero__dot[aria-selected="true"] { background: var(--c-accent-on-ink); }
.hero__dot:hover { background: rgba(255,255,255,.62); }

/* ---------- BRAND HERO ----------
   Partner-page hero, same layer stack as the homepage rotator: aurora on
   the ink field, photograph masked so its left edge dissolves, vignette,
   scrim, copy. The partner's own lock-up sits above the headline. */

.brand-hero {
  position: relative; background: var(--c-surface-dark); color: var(--c-on-ink-soft);
  min-height: 660px; display: flex; align-items: center; overflow: hidden; isolation: isolate;
  --hero-mask: linear-gradient(96deg, transparent 15%, rgba(0,0,0,.16) 35%,
                                      rgba(0,0,0,.70) 55%, #000 72%);
}
.brand-hero__wash { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.brand-hero__wash::before {
  content: ""; position: absolute; left: -100%; top: -55%;
  width: 128%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(closest-side, transparent 60%,
              var(--c-aurora-veil-1) 71%, var(--c-aurora-veil-2) 82%, transparent 90%);
  filter: blur(22px);
}
.brand-hero__media { position: absolute; inset: 0; z-index: 1; }
.brand-hero__media img {
  width: 100%; height: 100%; object-fit: cover;
  filter: saturate(.9) brightness(.84);
  -webkit-mask-image: var(--hero-mask); mask-image: var(--hero-mask);
}
.brand-hero__blend {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background:
    radial-gradient(118% 96% at 88% 36%, transparent 34%, rgba(0,7,26,.70) 100%),
    linear-gradient(180deg, rgba(0,7,26,.52) 0%, transparent 26%);
}
.brand-hero__scrim {
  position: absolute; inset: 0; z-index: 3;
  background:
    linear-gradient(90deg, rgba(0,7,26,.90) 0%, rgba(0,7,26,.80) 42%,
                           rgba(0,7,26,.44) 64%, transparent 86%),
    linear-gradient(0deg,  rgba(0,7,26,.55) 0%, transparent 60%);
}
.brand-hero__inner {
  position: relative; z-index: 4; width: 100%;
  padding-block: calc(var(--nav-h) + var(--s-7)) var(--s-8);
}
/* Marzal Labs + partner on one light plate. Both marks are dark artwork on
   transparent, so a shared white plate is what makes them legible on the
   hero — neither logo is recoloured. */
.lockup {
  display: inline-flex; align-items: center; gap: clamp(1rem, 2vw, 1.5rem);
  margin-bottom: var(--s-6); padding: var(--s-4) var(--s-5);
  background: var(--c-paper); border-radius: 14px; box-shadow: var(--shadow-lift);
}
.lockup__mark { display: block; height: 32px; width: auto; }
.lockup__mark--partner { height: 26px; }
.lockup__rule { width: var(--hairline); height: 32px; background: var(--c-border-strong); }

/* The single-partner lock-up, still used where there is no pairing. */
.brand-hero__logo {
  display: block; height: 30px; width: auto; margin-bottom: var(--s-6);
  padding: var(--s-3) var(--s-4); border-radius: 10px;
  background: var(--c-paper); box-sizing: content-box;
}
.brand-hero h1 {
  color: #fff; max-width: 24ch; margin-bottom: var(--s-5);
  letter-spacing: var(--ls-tight);
}
.brand-hero__strap {
  font-size: var(--fs-lead); line-height: 1.6;
  color: var(--c-on-ink-soft); max-width: 62ch; margin-bottom: var(--s-6);
}
.brand-hero__cred {
  display: flex; align-items: center; gap: var(--s-3); margin-top: var(--s-6);
  font-size: var(--fs-xs); color: var(--c-on-ink-faint);
}
.brand-hero .breadcrumb { margin-bottom: var(--s-6); }

/* ---------- PAGE HERO ---------- */

.page-hero {
  position: relative; background: var(--c-surface-dark); color: var(--c-on-ink-soft);
  min-height: 470px; height: 62vh; max-height: 660px;
  display: flex; align-items: flex-end; overflow: hidden;
}
.page-hero__media { position: absolute; inset: 0; }
.page-hero__media img { width: 100%; height: 100%; object-fit: cover; }
.page-hero__scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(0,7,26,.94) 0%, rgba(0,7,26,.90) 40%,
                           rgba(0,7,26,.68) 60%, rgba(0,7,26,.10) 88%),
    linear-gradient(0deg,  rgba(0,7,26,.62) 0%, transparent 50%);
}
.page-hero__inner { position: relative; z-index: 2; width: 100%; padding-block: var(--s-8); }
.page-hero h1 { color: #fff; max-width: 26ch; margin-bottom: var(--s-5); }
.page-hero .eyebrow { color: var(--c-accent-on-ink); }
.page-hero__strap { font-size: var(--fs-lead); color: var(--c-on-ink-soft); max-width: 58ch; }
.page-hero__logos {
  display: flex; flex-wrap: wrap; gap: var(--s-3);
  margin-top: var(--s-7); padding-top: var(--s-6);
  border-top: var(--hairline) solid var(--c-border-on-ink);
}
.page-hero__logos li {
  font-size: var(--fs-xs); color: var(--c-on-ink-soft);
  border: var(--hairline) solid var(--c-border-on-ink);
  padding: 8px 16px; border-radius: var(--radius-chip);
}

.breadcrumb {
  font-size: var(--fs-xs); color: var(--c-on-ink-faint);
  display: flex; gap: var(--s-2); flex-wrap: wrap; margin-bottom: var(--s-6);
}
.breadcrumb a { color: var(--c-on-ink-soft); text-decoration: none; }
.breadcrumb a:hover { color: var(--c-accent-on-ink); }
.breadcrumb li::after { content: " /"; color: var(--c-on-ink-faint); }
.breadcrumb li:last-child::after { content: ""; }
.breadcrumb ol, .breadcrumb ul { display: flex; gap: var(--s-2); flex-wrap: wrap; }

/* ---------- PRODUCT HERO ---------- */

.product-hero {
  position: relative; background: var(--c-surface-dark); color: var(--c-on-ink-soft);
  overflow: hidden; padding-block: var(--s-9);
}
.product-hero__media { position: absolute; inset: 0; }
.product-hero__media img { width: 100%; height: 100%; object-fit: cover; opacity: .5; }
.product-hero__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(100deg, rgba(0,7,26,.94) 26%, rgba(0,7,26,.34) 100%);
}
.product-hero__inner { position: relative; z-index: 2; }
.product-hero h1 { color: #fff; max-width: 22ch; }
.product-hero .lede { color: var(--c-on-ink-soft); }
.logomark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 62px; height: 62px; margin-bottom: var(--s-5);
  border: var(--hairline) solid var(--c-accent-on-ink);
  border-radius: 16px;
  font-family: var(--font-display); font-size: 1.125rem; font-weight: 600;
  color: var(--c-accent-on-ink); background: rgba(95, 201, 182, .12);
}
.product-name {
  font-size: var(--fs-eyebrow); text-transform: uppercase;
  letter-spacing: var(--ls-eyebrow); font-weight: var(--fw-strong);
  color: var(--c-on-ink-soft); margin-bottom: var(--s-3);
}
.product-status {
  display: inline-block; margin-left: var(--s-3);
  font-size: var(--fs-eyebrow); letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase; font-weight: var(--fw-strong);
  padding: 4px 10px; border-radius: var(--radius-chip);
  border: var(--hairline) solid var(--c-accent-on-ink); color: var(--c-accent-on-ink);
}
.product-status--soon { border-color: var(--c-border-on-ink); color: var(--c-on-ink-soft); }
.product-hero__facts {
  display: flex; flex-wrap: wrap; gap: var(--s-8);
  margin-top: var(--s-7); padding-top: var(--s-6);
  border-top: var(--hairline) solid var(--c-border-on-ink);
}
.product-hero__facts div strong {
  display: block; font-family: var(--font-display); font-size: 2rem; font-weight: 400;
  color: #fff; line-height: 1.15;
}
.product-hero__facts div span { font-size: var(--fs-xs); color: var(--c-on-ink-soft); }

/* ---------- LEAD STATEMENT ---------- */

.lead-statement p {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(1.25rem, 2vw, 1.625rem); line-height: 1.55;
  max-width: var(--measure-prose); color: var(--c-ink);
}

/* ---------- SHIFT TWO COLUMN ---------- */

/* ---------- THE CHANGE (was: The Shift) ----------
   One card split by a rule rather than two panels with an arrow between
   them. The left half is where things stand, muted; the right half is what
   it takes, on ink. The tonal step is what carries the meaning, so the two
   halves cannot be mistaken for siblings, and a single node sits on the
   divide. `--onink` is the variant for bands that are already dark: there
   the halves swap, so the requirement is still the lighter of the two. */

.ledger {
  position: relative; display: grid; grid-template-columns: 1fr 1fr;
  border: var(--hairline) solid var(--c-border-strong);
  border-radius: 20px; overflow: hidden;
}
.ledger__side { padding: clamp(1.75rem, 3vw, 2.75rem); }
.ledger__side--now { background: var(--c-paper-alt); }
.ledger__side--next { background: var(--c-surface-dark); }
.ledger__chip {
  display: inline-block; margin-bottom: var(--s-5); padding: 6px var(--s-4);
  border-radius: var(--radius-chip);
  font-size: var(--fs-eyebrow); font-weight: var(--fw-strong);
  text-transform: uppercase; letter-spacing: var(--ls-eyebrow);
}
.ledger__side--now .ledger__chip { background: var(--c-border); color: var(--c-ink-soft); }
.ledger__side--next .ledger__chip { background: var(--c-accent); color: #fff; }
.ledger__side p { font-size: var(--fs-body); max-width: 46ch; }
.ledger__side--now p { color: var(--c-ink-soft); }
.ledger__side--next p { color: var(--c-on-ink); }
.ledger .thesis {
  font-family: var(--font-display); font-weight: var(--fw-display);
  font-size: 1.25rem; line-height: var(--lh-mid); max-width: 34ch;
}
.ledger__side--next .thesis { color: var(--c-on-ink); }
.ledger__side--now p + p { margin-top: var(--s-4); }
.ledger__list { display: grid; gap: var(--s-3); margin-top: var(--s-5); }
.ledger__list li { position: relative; padding-left: var(--s-6); font-size: var(--fs-sm); }
.ledger__list li::before {
  content: ""; position: absolute; left: 0; top: .55em;
  width: 10px; height: 2px; border-radius: 2px; background: currentColor; opacity: .55;
}
.ledger__side--now .ledger__list li { color: var(--c-ink-soft); }
.ledger__side--next .ledger__list li { color: var(--c-on-ink-soft); }
.ledger__node {
  position: absolute; left: 50%; top: 50%; z-index: 1;
  transform: translate(-50%, -50%);
  width: 46px; height: 46px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--c-accent); color: #fff; font-size: 1.125rem;
  box-shadow: 0 0 0 6px var(--c-paper);
}
.ledger--onink { border-color: var(--c-border-on-ink); }
.ledger--onink .ledger__side--now { background: var(--c-surface-dark-2); }
.ledger--onink .ledger__side--now .ledger__chip {
  background: var(--c-border-on-ink); color: var(--c-on-ink);
}
.ledger--onink .ledger__side--now p,
.ledger--onink .ledger__side--now .ledger__list li { color: var(--c-on-ink-soft); }
.ledger--onink .ledger__side--next { background: var(--c-paper); }
.ledger--onink .ledger__side--next p { color: var(--c-ink); }
.ledger--onink .ledger__side--next .ledger__list li { color: var(--c-ink-soft); }
.ledger--onink .ledger__node { box-shadow: 0 0 0 6px var(--c-surface-dark); }

/* ---------- CAPABILITY STRIP ----------
   A row of small icon tiles under the hero. Deliberately flat and even —
   it is a scannable list of what the pillar covers, not a card grid
   competing with the offerings section further down. */

.capstrip {
  display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--s-3);
}
/* Each box takes one of the six category hues: a wash behind it and the
   solid hue on its icon and its top rule. Six boxes, six hues, so a strip
   reads as a set of distinct capabilities rather than one grey block. The
   washes sit at 12-16 per cent, which keeps ink text well above 4.5:1. */
.capstrip li {
  display: flex; flex-direction: column; gap: var(--s-5);
  padding: var(--s-6) var(--s-5);
  background: var(--c-paper);
  border: var(--hairline) solid var(--c-border);
  border-top: 3px solid var(--cap-ink, var(--c-border-strong));
  border-radius: 14px; box-shadow: var(--shadow-card);
  font-size: var(--fs-sm); line-height: var(--lh-mid); color: var(--c-ink);
  font-weight: var(--fw-mid);
  transition: transform var(--dur-hover) var(--ease),
              box-shadow var(--dur-hover) var(--ease);
}
.capstrip li:nth-child(6n+1) { --cap-tint: var(--cat-3-wash); --cap-ink: var(--cat-3); }
.capstrip li:nth-child(6n+2) { --cap-tint: var(--cat-2-wash); --cap-ink: var(--cat-2); }
.capstrip li:nth-child(6n+3) { --cap-tint: var(--cat-4-wash); --cap-ink: var(--cat-4); }
.capstrip li:nth-child(6n+4) { --cap-tint: var(--cat-1-wash); --cap-ink: var(--cat-1); }
.capstrip li:nth-child(6n+5) { --cap-tint: var(--cat-5-wash); --cap-ink: var(--cat-5); }
.capstrip li:nth-child(6n+6) { --cap-tint: var(--cat-6-wash); --cap-ink: var(--cat-6); }
.capstrip li:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); }
/* The icon becomes a filled tile: the one place the colour goes solid. */
.capstrip .icon {
  flex: 0 0 auto; box-sizing: border-box;
  width: 46px; height: 46px; padding: 10px; border-radius: 13px;
  background: var(--cap-ink, var(--c-ink)); color: #fff;
  stroke-width: 1.8;
}
.capstrip li:hover .icon { transform: scale(1.04); }
.sec--ink .capstrip li {
  background: var(--c-surface-dark-2); color: var(--c-on-ink);
  border-color: var(--c-border-on-ink); box-shadow: none;
}
.sec--ink .capstrip .icon { color: #fff; }
.sec--ink .capstrip li { border-top-color: var(--c-accent-on-ink); }

/* ---------- THE SHIFT ----------
   Reality sits recessed and unbordered; the Gap is raised, bordered and
   carries the accent. The eye reads left-to-right as a move from the
   current state to the required one, helped by the chevron between them. */

/* ---------- OUTCOME STRIP ----------
   Icon, then the outcome phrase at display size, then the qualifier. The
   final tile carries a soft accent wash so the row resolves rather than
   just stopping. */

.outcomes { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-4); }
.outcome {
  padding: var(--s-6); border-radius: var(--radius-card);
  display: flex; flex-direction: column; gap: var(--s-4);
}
.outcome .icon { color: var(--c-ink); width: 30px; height: 30px; }
.outcome__figure {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(1.5rem, 2.3vw, 2rem); line-height: 1.15;
  letter-spacing: var(--ls-tight); color: var(--c-ink);
  /* Reserve two lines so the qualifiers underneath share a baseline
     whether the phrase wraps or not. */
  min-height: 2.3em;
}
.outcome__qual { font-size: var(--fs-sm); color: var(--c-ink-soft); margin-top: auto; }
.outcome--last {
  background: linear-gradient(150deg,
    color-mix(in srgb, var(--brand-accent-light) 26%, transparent) 0%,
    color-mix(in srgb, var(--cat-3) 10%, transparent) 55%,
    transparent 100%);
}
.sec--ink .outcome .icon, .sec--ink .outcome__figure { color: #fff; }
.sec--ink .outcome__qual { color: var(--c-on-ink-soft); }

/* ---------- CONTEXT PAIR ---------- */

.context-pair { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-8); }
.context-pair p { font-size: var(--fs-body); max-width: none; }

/* ---------- REALITY STACK ---------- */

.reality-stack li {
  padding: var(--s-6) 0; border-top: var(--hairline) solid var(--c-border);
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(1.25rem, 2.2vw, 1.75rem); line-height: var(--lh-mid);
  letter-spacing: var(--ls-tight); color: var(--c-ink); max-width: 36ch;
}
.reality-stack li:last-child { border-bottom: var(--hairline) solid var(--c-border); }
.reality-stack__consequence { margin-top: var(--s-7); }

/* ---------- GAP STATEMENT ---------- */

.gap-statement { max-width: 48ch; margin-inline: auto; text-align: center; }
.gap-statement .eyebrow { justify-content: center; }
.gap-statement p { max-width: none; }
.gap-statement .thesis {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(1.375rem, 2.6vw, 1.875rem); line-height: var(--lh-mid);
  letter-spacing: var(--ls-tight); color: var(--c-ink); margin-top: var(--s-6);
}

/* ---------- GRIDS & CARDS ---------- */

.grid { display: grid; gap: var(--s-5); }
.grid--auto { grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }

.card {
  display: flex; flex-direction: column;
  padding: var(--s-6);
  background: var(--c-paper);
  border: var(--hairline) solid var(--c-border-strong);
  border-radius: var(--radius-card);
  transition: border-color var(--dur-hover) var(--ease),
              box-shadow var(--dur-hover) var(--ease),
              transform var(--dur-hover) var(--ease);
}
.card:hover { border-color: var(--c-accent); box-shadow: var(--shadow-lift); transform: translateY(-2px); }
.sec--ink .card { background: var(--c-surface-dark-2); border-color: var(--c-border-on-ink); }
.sec--ink .card:hover { border-color: var(--c-accent-on-ink); }
.card p { max-width: var(--measure-card); font-size: var(--fs-sm); color: var(--c-ink-soft); }
/* The same small, faint byline as .blog-rows__meta, but wrapping: in a card
   the line has a third of the measure, and nowrap there forces the grid
   track wider than the wrap and pushes the last card off the page. */
.card__meta { font-size: var(--fs-xs); color: var(--c-ink-faint); }
.sec--ink .card__meta { color: var(--c-on-ink-soft); }
.sec--ink .card p { color: var(--c-on-ink-soft); }
.card h3, .card h4 { margin-bottom: var(--s-3); }
.card h3 { font-size: 1.1875rem; }
.card .btn-text { margin-top: auto; padding-top: var(--s-5); }
a.card { text-decoration: none; }

.card__media { margin: calc(var(--s-6) * -1) calc(var(--s-6) * -1) var(--s-5); }
.card__media img {
  width: 100%; height: 200px; object-fit: cover;
  border-radius: calc(var(--radius-card) - 1px) calc(var(--radius-card) - 1px) 0 0;
}

.card__num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--c-accent-wash); color: var(--c-accent);
  font-size: var(--fs-xs); font-weight: 700; margin-bottom: var(--s-4);
}
.sec--ink .card__num { background: rgba(95,201,182,.14); color: var(--c-accent-on-ink); }

/* pill sub-capabilities — colour used categorically */
.pills { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-5); }
.pills li {
  font-size: var(--fs-xs); padding: 6px 14px; border-radius: var(--radius-chip);
  background: var(--c-paper-alt); color: var(--c-ink-soft);
}
.pills li:nth-child(4n+1) { background: var(--cat-3-wash); color: var(--cat-3); }
.pills li:nth-child(4n+2) { background: var(--cat-2-wash); color: var(--cat-2); }
.pills li:nth-child(4n+3) { background: var(--cat-1-wash); color: var(--cat-1); }
.pills li:nth-child(4n+4) { background: var(--cat-4-wash); color: var(--cat-4); }

/* quantified bullets */
.proof-list { margin-top: var(--s-5); }
.proof-list li {
  position: relative; padding-left: var(--s-6); margin-bottom: var(--s-3);
  font-size: var(--fs-sm); color: var(--c-ink-soft); line-height: var(--lh-mid);
}
.proof-list li::before {
  content: ""; position: absolute; left: 0; top: 7px;
  width: 8px; height: 8px; border-radius: 50%; background: var(--c-accent);
}
.proof-list strong { color: var(--c-ink); font-weight: 600; }
.sec--ink .proof-list li { color: var(--c-on-ink-soft); }
.sec--ink .proof-list li::before { background: var(--c-accent-on-ink); }
.sec--ink .proof-list strong { color: #fff; }

/* ---------- CAPABILITY LIST (spec sheet) ---------- */

.capability-list { counter-reset: cap; }
.capability-list li {
  padding: var(--s-5) 0; border-bottom: var(--hairline) solid var(--c-border);
  font-family: var(--font-display); font-size: 1.25rem; font-weight: 400; color: var(--c-ink);
  display: flex; gap: var(--s-5); align-items: baseline; line-height: var(--lh-mid);
}
.capability-list li::before {
  content: counter(cap, decimal-leading-zero); counter-increment: cap;
  font-family: var(--font-body); font-size: var(--fs-xs); font-weight: 700;
  color: var(--c-accent); flex: 0 0 auto;
}
.sec--ink .capability-list li { border-bottom-color: var(--c-border-on-ink); color: #fff; }
.sec--ink .capability-list li::before { color: var(--c-accent-on-ink); }

/* ---------- APPROACH LIST ---------- */

.approach-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-7) var(--s-8); }
.approach-list > li { border-top: 2px solid var(--c-border-strong); padding-top: var(--s-5); }
.approach-list h3, .approach-list h4 { font-size: var(--fs-h4); margin-bottom: var(--s-3); }
.approach-list p { font-size: var(--fs-sm); color: var(--c-ink-soft); max-width: none; }
.sec--ink .approach-list > li { border-top-color: var(--c-border-on-ink); }
.sec--ink .approach-list p { color: var(--c-on-ink-soft); }

/* ---------- DIFFERENTIATOR LIST ---------- */

/* Numbered cards. The markup is untouched — the numerals come from a CSS
   counter — so every page carrying this list picks the new style up at
   once, and the copy is not edited to fit the layout. */
.differentiator-list {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-4); counter-reset: claim;
}
.differentiator-list > li {
  counter-increment: claim;
  display: grid; grid-template-columns: 2.75rem 1fr; gap: var(--s-2) var(--s-5);
  align-content: start; padding: var(--s-6);
  background: var(--c-paper); border: var(--hairline) solid var(--c-border);
  border-radius: 16px; box-shadow: var(--shadow-card);
  transition: border-color var(--dur-hover) var(--ease),
              box-shadow var(--dur-hover) var(--ease),
              transform var(--dur-hover) var(--ease);
}
.differentiator-list > li::before {
  content: counter(claim, decimal-leading-zero);
  grid-row: 1 / span 2;
  font-family: var(--font-display); font-weight: var(--fw-display);
  font-size: 1.875rem; line-height: .9; color: var(--c-accent);
}
.differentiator-list > li:hover {
  border-color: var(--c-accent); box-shadow: var(--shadow-lift); transform: translateY(-2px);
}
.differentiator-list b {
  font-family: var(--font-display); font-size: 1.25rem; font-weight: 500;
  letter-spacing: var(--ls-tight); line-height: var(--lh-mid);
  color: var(--c-ink); display: block; max-width: 38ch;
}
.differentiator-list p { font-size: var(--fs-sm); color: var(--c-ink-soft); }
/* Ink surfaces: same cards, inverted. */
.sec--ink .differentiator-list > li {
  background: var(--c-surface-dark-2); border-color: var(--c-border-on-ink); box-shadow: none;
}
.sec--ink .differentiator-list > li::before { color: var(--c-accent-on-ink); }
.sec--ink .differentiator-list b { color: #fff; }
.sec--ink .differentiator-list p { color: var(--c-on-ink-soft); }

/* ---------- ACCELERATOR TAXONOMY ---------- */

.chip-row {
  display: flex; gap: var(--s-2); overflow-x: auto; padding-bottom: var(--s-3);
  margin-bottom: var(--s-7); scrollbar-width: thin;
  -webkit-mask-image: linear-gradient(90deg, #000 93%, transparent);
          mask-image: linear-gradient(90deg, #000 93%, transparent);
}
.chip {
  flex: 0 0 auto; padding: 9px 18px;
  font-family: var(--font-body); font-size: var(--fs-sm); font-weight: var(--fw-mid);
  border: var(--hairline) solid var(--c-border-strong); border-radius: var(--radius-chip);
  background: transparent; color: var(--c-ink); cursor: pointer;
  transition: background var(--dur-hover) var(--ease), color var(--dur-hover) var(--ease),
              border-color var(--dur-hover) var(--ease);
}
.chip:hover { border-color: var(--c-accent); color: var(--c-accent); }
.chip[aria-pressed="true"] {
  background: var(--c-surface-dark); border-color: var(--c-surface-dark); color: #fff;
}
.taxonomy { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 0 var(--s-6); }
.taxonomy li { padding: var(--s-4) 0; border-bottom: var(--hairline) solid var(--c-border); font-size: var(--fs-sm); }
.taxonomy li[hidden] { display: none; }
.taxonomy strong { display: block; font-weight: 600; color: var(--c-ink); }
.taxonomy span { font-size: var(--fs-xs); color: var(--c-ink-faint); }
.taxonomy__empty { font-size: var(--fs-sm); color: var(--c-ink-faint); }

/* ---------- METRIC TILES ----------
   Figures run light and in ink, not in the accent. The size is
   the emphasis; colouring them as well is one signal too many. */

.tiles { display: grid; gap: var(--s-7); }
.tiles--3 { grid-template-columns: repeat(3, 1fr); }
.tiles--4 { grid-template-columns: repeat(4, 1fr); }
.tile__figure {
  display: block; font-family: var(--font-display); font-size: var(--fs-metric);
  font-weight: 400; line-height: 1.15; letter-spacing: -0.02em; color: var(--c-ink);
}
.tile__unit { display: block; font-weight: 600; margin-top: var(--s-3); font-size: var(--fs-sm); color: var(--c-ink); }
.tile__qual { display: block; font-size: var(--fs-xs); color: var(--c-ink-faint); margin-top: var(--s-2); line-height: var(--lh-mid); }
.sec--ink .tile__figure, .sec--ink .tile__unit { color: #fff; }
.sec--ink .tile__qual { color: var(--c-on-ink-soft); }

/* ---------- FRAMEWORK BAND ---------- */

.framework { display: grid; grid-template-columns: 1.1fr 1fr; gap: var(--s-8); align-items: start; }

/* ---------- PARTNER RAIL ---------- */

/* A grid, not a grow-flex row. With flex: 1 1 200px a short last row
   stretched its items to fill the width — at 900px the tenth partner became
   a single tile 789px wide. A grid keeps every tile the same size whatever
   the count. */
.partner-rail {
  display: grid; gap: var(--s-3);
  grid-template-columns: repeat(auto-fill, minmax(11.5rem, 1fr));
}
.partner-rail li {
  border: var(--hairline) solid var(--c-border-strong); border-radius: var(--radius-sm);
  padding: var(--s-5);
  transition: border-color var(--dur-hover) var(--ease);
}
.partner-rail li:hover { border-color: var(--c-accent); }
.partner-rail strong { display: block; font-family: var(--font-display); font-size: 1.0625rem; font-weight: 600; color: var(--c-ink); }
.partner-rail span { font-size: var(--fs-xs); color: var(--c-ink-faint); }
.sec--ink .partner-rail li { border-color: var(--c-border-on-ink); }
.sec--ink .partner-rail strong { color: #fff; }
.sec--ink .partner-rail span { color: var(--c-on-ink-soft); }

/* ---------- CLIENT WALL ---------- */

/* Each card is a photograph with the descriptor laid over it. The card
   carries its own dark ground, so it reads the same on a light band as on
   an ink one and the copy never depends on how bright the photo is. */
.client-wall {
  display: grid; gap: var(--s-4);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
}
.client-wall li {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; flex-direction: column; justify-content: flex-end;
  min-height: 208px; padding: var(--s-6);
  border-radius: var(--radius-card);
  background: var(--c-surface-dark);
}
.client-wall__media {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover;
  transition: transform var(--dur-slide) var(--ease);
}
.client-wall li::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg, rgba(0, 7, 26, .50) 0%, rgba(0, 7, 26, .80) 52%,
                    rgba(0, 7, 26, .92) 100%);
}
.client-wall li:hover .client-wall__media { transform: scale(1.04); }
.client-wall strong {
  display: block; font-family: var(--font-display); font-size: 1.0625rem;
  font-weight: 500; color: var(--c-on-ink); margin-bottom: var(--s-3);
  line-height: var(--lh-mid);
}
.client-wall span {
  align-self: flex-start;
  font-size: var(--fs-xs); font-weight: 600;
  background: rgba(95, 201, 182, .16); color: var(--c-accent-on-ink);
  padding: 5px 12px; border-radius: var(--radius-chip);
}

/* ---------- CASE TABS ---------- */

.tabs { display: flex; gap: var(--s-2); overflow-x: auto; margin-bottom: var(--s-8); padding-bottom: var(--s-2); }
.tab {
  flex: 0 0 auto; cursor: pointer;
  font-family: var(--font-body); font-size: var(--fs-sm); font-weight: var(--fw-mid);
  color: var(--c-on-ink-soft); padding: 10px 20px; border-radius: var(--radius-chip);
  background: transparent; border: var(--hairline) solid var(--c-border-on-ink);
  transition: color var(--dur-hover) var(--ease), background var(--dur-hover) var(--ease),
              border-color var(--dur-hover) var(--ease);
}
.tab:hover { color: #fff; border-color: rgba(255,255,255,.4); }
.tab[aria-selected="true"] { background: #fff; color: var(--c-surface-dark); border-color: #fff; font-weight: 600; }
.tabpanel[hidden] { display: none; }
.tabpanel { display: grid; grid-template-columns: 1.35fr 1fr; gap: var(--s-8); align-items: start; }
.tabpanel h3 { font-size: clamp(1.5rem, 2.6vw, 2rem); font-weight: 400; max-width: 21ch; }
.quote-block { border-left: 2px solid var(--c-accent-on-ink); padding-left: var(--s-5); }
.quote-block__mark { font-family: var(--font-display); font-size: 3rem; line-height: .7; color: var(--c-accent-on-ink); display: block; margin-bottom: var(--s-4); }
.quote-block p { font-size: var(--fs-sm); }
.quote-block__who { font-size: var(--fs-xs); color: var(--c-on-ink-soft); }
.tabpanel__metrics { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-6); margin-top: var(--s-7); }

/* ---------- CASE CAROUSEL ---------- */

.case-carousel { display: grid; grid-template-columns: 1.5fr 1fr; gap: var(--s-5); align-items: start; }
.case-feature { display: block; text-decoration: none; }
.case-feature img {
  width: 100%; height: 320px; object-fit: cover;
  border-radius: var(--radius-card) var(--radius-card) 0 0;
}
.case-feature .card { border-radius: 0 0 var(--radius-card) var(--radius-card); border-top: 0; }
.case-collapsed { display: grid; gap: var(--s-3); }
.case-collapsed a {
  display: block; text-decoration: none; padding: var(--s-5);
  border: var(--hairline) solid var(--c-border-strong); border-radius: var(--radius-card);
  transition: border-color var(--dur-hover) var(--ease), box-shadow var(--dur-hover) var(--ease),
              transform var(--dur-hover) var(--ease);
}
.case-collapsed a:hover { border-color: var(--c-accent); box-shadow: var(--shadow-lift); transform: translateY(-2px); }
.case-collapsed h3, .case-collapsed h4 { margin-bottom: var(--s-3); font-size: 1.0625rem; }
.case-collapsed .btn-text { font-size: var(--fs-xs); }
.sec--ink .case-collapsed a { border-color: var(--c-border-on-ink); }

/* ---------- INSIGHT FEATURE / BLOG ROWS ---------- */

.insight-feature { display: grid; grid-template-columns: 1fr 1.2fr; gap: var(--s-8); align-items: start; }
.insight-card img {
  width: 100%; height: 260px; object-fit: cover;
  border-radius: calc(var(--radius-card) - 1px) calc(var(--radius-card) - 1px) 0 0;
}
.blog-rows li { border-top: var(--hairline) solid var(--c-border); }
.blog-rows li:last-child { border-bottom: var(--hairline) solid var(--c-border); }
.blog-rows a {
  display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-5);
  padding: var(--s-5) 0; text-decoration: none;
  transition: color var(--dur-hover) var(--ease);
}
.blog-rows a:hover { color: var(--c-accent); }
.blog-rows h3, .blog-rows h4 { margin: 0; max-width: 44ch; font-size: 1.125rem; font-weight: 500; }
.blog-rows__meta { font-size: var(--fs-xs); color: var(--c-ink-faint); white-space: nowrap; }
.sec--ink .blog-rows li { border-top-color: var(--c-border-on-ink); }
.sec--ink .blog-rows li:last-child { border-bottom-color: var(--c-border-on-ink); }
.sec--ink .blog-rows__meta { color: var(--c-on-ink-soft); }

/* ---------- OBJECTION HANDLER ---------- */

.objection { max-width: 54ch; margin-bottom: var(--s-8); }

/* ---------- CASE STUDY PAGE ---------- */

.at-a-glance { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-4); }
.at-a-glance div {
  padding: var(--s-5) var(--s-6);
  border: var(--hairline) solid var(--c-border-strong); border-radius: var(--radius-card);
}
.at-a-glance dt {
  font-size: var(--fs-eyebrow); text-transform: uppercase; font-weight: 600;
  letter-spacing: var(--ls-eyebrow); color: var(--c-accent); margin-bottom: var(--s-2);
}
.at-a-glance dd { margin: 0; font-weight: 600; font-size: var(--fs-sm); color: var(--c-ink); }

.phases { counter-reset: ph; display: grid; gap: var(--s-6); }
.phases > li {
  display: grid; grid-template-columns: 52px 1fr; gap: var(--s-5);
  padding-top: var(--s-6); border-top: var(--hairline) solid var(--c-border);
}
.phases > li::before {
  content: counter(ph, decimal-leading-zero); counter-increment: ph;
  display: flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--c-accent-wash); color: var(--c-accent);
  font-size: var(--fs-xs); font-weight: 700;
}
.phases h3, .phases h4 { font-size: var(--fs-h4); margin-bottom: var(--s-3); }
.phases p { font-size: var(--fs-sm); color: var(--c-ink-soft); }

.arch { overflow-x: auto; padding-bottom: var(--s-4); }
.arch__layer {
  display: grid; grid-template-columns: 180px 1fr; gap: var(--s-5);
  padding: var(--s-5) 0; border-top: var(--hairline) solid var(--c-border-on-ink);
  min-width: 660px; align-items: start;
}
.arch__layer:last-child { border-bottom: var(--hairline) solid var(--c-border-on-ink); }
.arch__name {
  font-size: var(--fs-xs); letter-spacing: var(--ls-eyebrow); text-transform: uppercase;
  font-weight: 600; color: var(--c-accent-on-ink);
}
.arch__nodes { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.arch__nodes li {
  font-size: var(--fs-xs); padding: 7px 14px; border-radius: var(--radius-chip);
  border: var(--hairline) solid var(--c-border-on-ink); color: var(--c-on-ink-soft);
}

.gate-form { display: grid; gap: var(--s-4); max-width: 480px; }

/* ---------- FORMS ---------- */

.field { display: grid; gap: var(--s-2); }
.field label { font-size: var(--fs-sm); font-weight: 600; color: var(--c-ink); }
.field input, .field textarea, .field select {
  font-family: var(--font-body); font-size: var(--fs-body);
  padding: 13px var(--s-5);
  border: var(--hairline) solid var(--c-border-strong); border-radius: var(--radius-sm);
  background: var(--c-paper); color: var(--c-body); width: 100%;
}
.field input:focus, .field textarea:focus { border-color: var(--c-accent); }
.field .hint { font-size: var(--fs-xs); color: var(--c-ink-faint); }
.contact-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: var(--s-9); align-items: start; }
.form-note { font-size: var(--fs-xs); color: var(--c-ink-faint); }

/* ---------- CTA BAND ---------- */

.cta-band { background: var(--c-surface-dark); color: var(--c-on-ink-soft); }
.cta-band__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--s-8); flex-wrap: wrap; }
.cta-band h2 { font-size: clamp(1.625rem, 3vw, 2.375rem); color: #fff; max-width: 27ch; margin: 0; }

/* ---------- FOOTER ---------- */

.site-footer { background: var(--c-surface-dark); color: var(--c-on-ink-soft); padding-block: var(--s-9) var(--s-6); font-size: var(--fs-sm); }
.site-footer a { color: var(--c-on-ink-soft); text-decoration: none; }
.site-footer a:hover { color: var(--c-accent-on-ink); }
.site-footer__top { display: grid; grid-template-columns: 1fr 2.2fr; gap: var(--s-9); }
.site-footer__brand .brand { margin-bottom: var(--s-5); }
.site-footer__brand p { font-size: var(--fs-sm); color: var(--c-on-ink-soft); margin-bottom: var(--s-5); max-width: 36ch; }
.site-footer__brand address { font-style: normal; font-size: var(--fs-xs); color: var(--c-on-ink-soft); line-height: 1.9; margin-top: var(--s-4); }
.site-footer__cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-6); }
.site-footer__cols h3 {
  font-size: var(--fs-eyebrow); font-weight: 600; text-transform: uppercase;
  letter-spacing: var(--ls-eyebrow); color: var(--c-accent-on-ink); margin-bottom: var(--s-4);
}
.site-footer__cols li { margin-bottom: var(--s-3); font-size: var(--fs-xs); }
.site-footer__legal {
  display: flex; justify-content: space-between; gap: var(--s-5); flex-wrap: wrap;
  margin-top: var(--s-8); padding-top: var(--s-5);
  border-top: var(--hairline) solid var(--c-border-on-ink);
  font-size: var(--fs-xs); color: var(--c-on-ink-soft);
}
.site-footer__legal ul { display: flex; gap: var(--s-5); flex-wrap: wrap; }

/* Credentials — a real badge image plus factual text lozenges. */
.credentials {
  display: flex; align-items: center; gap: var(--s-6); flex-wrap: wrap;
  margin-top: var(--s-6); padding-top: var(--s-6);
  border-top: var(--hairline) solid var(--c-border-on-ink);
}
.credentials img { height: 72px; width: auto; }
.credentials ul { display: flex; gap: var(--s-2); flex-wrap: wrap; }
.credentials li {
  font-size: var(--fs-xs); color: var(--c-on-ink-soft);
  border: var(--hairline) solid var(--c-border-on-ink);
  padding: 7px 14px; border-radius: var(--radius-chip);
}

/* ---------- PROSE (legal pages) ---------- */

.prose h2 { font-size: 1.625rem; margin-top: var(--s-8); }
.prose h3 { font-size: 1.125rem; margin-top: var(--s-6); }
.prose p, .prose li { color: var(--c-ink-soft); }
.prose ul { margin: 0 0 var(--s-4); }
.prose ul li { position: relative; padding-left: var(--s-6); margin-bottom: var(--s-2); max-width: var(--measure-prose); }
.prose ul li::before { content: ""; position: absolute; left: 0; top: 10px; width: 8px; height: 8px; border-radius: 50%; background: var(--c-accent); }

/* ---------- SCROLL REVEAL ----------
   Hidden only when JS is running (`.js` is set by an inline script
   in the head). Never hide content behind a script that might not run. */

.js .reveal { opacity: 0; transform: translateY(12px); }
.js .reveal.is-in {
  opacity: 1; transform: none;
  transition: opacity var(--dur-reveal) var(--ease), transform var(--dur-reveal) var(--ease);
}

/* ---------- TRUST STRIP ---------- */

.trust {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-4);
  margin-top: var(--s-6);
}
.trust__item {
  display: flex; flex-direction: column; align-items: flex-start;
  gap: var(--s-4); justify-content: center;
  padding: var(--s-6);
  background: var(--c-paper); border: var(--hairline) solid var(--c-border-strong);
  border-radius: var(--radius-card);
  transition: border-color var(--dur-hover) var(--ease), box-shadow var(--dur-hover) var(--ease);
}
.trust__item:hover { border-color: var(--c-accent); box-shadow: var(--shadow-lift); }
.trust__item img { height: 42px; width: auto; object-fit: contain; }
.trust__item--badge img { height: 62px; }
.trust__label {
  font-family: var(--font-display); font-size: 1.0625rem; font-weight: 600; color: var(--c-ink);
}
.trust__note { font-size: var(--fs-xs); color: var(--c-ink-faint); }

/* ---------- TEAM ---------- */

.person {
  display: flex; flex-direction: column;
  background: var(--c-paper); border: var(--hairline) solid var(--c-border-strong);
  border-radius: var(--radius-card); overflow: hidden;
  transition: border-color var(--dur-hover) var(--ease), box-shadow var(--dur-hover) var(--ease),
              transform var(--dur-hover) var(--ease);
}
.person:hover { border-color: var(--c-accent); box-shadow: var(--shadow-lift); transform: translateY(-2px); }
.person img { width: 100%; aspect-ratio: 1 / 1; height: auto; object-fit: cover; }
.person__body { padding: var(--s-6); display: flex; flex-direction: column; flex: 1; }
.person__body h3 { font-size: 1.125rem; margin-bottom: var(--s-1); }
.person__role {
  font-size: var(--fs-eyebrow); text-transform: uppercase; letter-spacing: var(--ls-eyebrow);
  font-weight: 600; color: var(--c-accent); margin-bottom: var(--s-4);
}
.person__body p { font-size: var(--fs-xs); color: var(--c-ink-soft); max-width: none; }
.person .pills { margin-top: auto; padding-top: var(--s-5); }

/* ---------- FOUNDER QUOTE ---------- */

.pullquote { max-width: 46ch; margin-inline: auto; text-align: center; }
.pullquote__mark {
  font-family: var(--font-display); font-size: 4rem; line-height: .6;
  color: var(--c-accent-on-ink); display: block; margin-bottom: var(--s-6);
}
.pullquote p {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(1.375rem, 2.6vw, 1.875rem); line-height: var(--lh-mid);
  color: #fff; max-width: none; margin-bottom: var(--s-6);
}
.pullquote cite { font-style: normal; font-size: var(--fs-sm); color: var(--c-on-ink-soft); }
.pullquote cite b { display: block; color: #fff; font-weight: 600; }

/* ---------- DATABRICKS PLATFORM STACK ---------- */

/* The stack beside its diagram: heading and layers left, diagram right.
   The band stays blue throughout. The diagram is dark artwork on a
   transparent background, so it gets a light plate inside the blue — laid
   straight onto the blue it measured 1.3:1 and could not be read; on white
   it is 11.7:1.

   Both columns stretch to the same height so the plate reads as a panel
   rather than a stray image, and the layer list is rows-with-a-rule rather
   than four boxed cards, which takes about a third off the left column. */
.stack-split {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 4vw, 3.5rem); align-items: stretch;
}
.stack-copy { display: flex; flex-direction: column; }
.stack-copy .band-head { margin-bottom: clamp(1.5rem, 2.5vw, 2rem); }
.stack-copy .stack { flex: 1; align-content: start; }

.stack-panel {
  display: flex; flex-direction: column; gap: var(--s-5);
  margin: 0; padding: clamp(1.25rem, 2vw, 1.75rem);
  background: var(--c-paper); border-radius: 18px;
  border: var(--hairline) solid rgba(255,255,255,.10);
  box-shadow: var(--shadow-lift);
}
.stack-panel img {
  display: block; flex: 1; min-height: 0;
  width: 100%; height: 100%; object-fit: contain;
}
.stack-panel figcaption {
  order: 2;
  font-size: var(--fs-xs); color: var(--c-ink-faint); text-align: center;
  padding-block: var(--s-3); border-block: var(--hairline) solid var(--c-border);
}
/* A second diagram fills the plate below the caption, which was white space
   left over once both columns were levelled. */
.stack-panel__second { order: 3; display: flex; flex: 1; min-height: 0; }
.stack-panel__second img { width: 100%; height: 100%; object-fit: contain; }

.stack { display: grid; gap: 0; }
.stack > li {
  display: grid; grid-template-columns: 3rem 1fr; gap: var(--s-4);
  align-items: baseline; padding-block: var(--s-5);
  border-top: var(--hairline) solid var(--c-border-on-ink);
}
.stack > li:first-child { border-top: 0; padding-top: 0; }
.stack > li:last-child { padding-bottom: 0; }
.stack__num {
  font-family: var(--font-display); font-size: 1.375rem; font-weight: var(--fw-display);
  color: var(--c-accent-on-ink); line-height: 1;
}
.stack h3 { font-size: 1.0625rem; margin-bottom: var(--s-2); }
.stack p { font-size: var(--fs-sm); max-width: 46ch; color: var(--c-on-ink-soft); }

/* ---------- HOW WE WORK: STAGES AND MATRIX ----------
   Three tall panels, then the same three stages as the columns of a matrix.
   The matrix is a real table: it is tabular data, and a table is what reads
   correctly to a screen reader and prints properly. */

.stage-grid { display: grid; gap: var(--s-4); grid-template-columns: repeat(3, minmax(0, 1fr)); }
.stage {
  display: flex; flex-direction: column; gap: var(--s-5);
  padding: clamp(1.5rem, 2.5vw, 2.25rem);
  background: var(--c-paper); border: var(--hairline) solid var(--c-border);
  border-radius: 18px; box-shadow: var(--shadow-card);
}
.stage__head { display: flex; align-items: center; justify-content: space-between; }
.stage__icon { width: 28px; height: 28px; color: var(--c-accent); }
.stage__num {
  font-family: var(--font-display); font-weight: var(--fw-display);
  font-size: 1.75rem; line-height: 1; color: var(--c-ink-faint);
}
.stage h3 { font-size: 1.3125rem; letter-spacing: var(--ls-tight); }
.stage__claim {
  font-size: var(--fs-sm); font-weight: var(--fw-strong); color: var(--c-accent);
  padding-bottom: var(--s-5); border-bottom: var(--hairline) solid var(--c-border);
}
.stage__steps { display: grid; gap: var(--s-5); margin-top: auto; counter-reset: step; }
.stage__steps li { counter-increment: step; display: grid; gap: var(--s-2); }
.stage__steps b {
  display: block; font-size: var(--fs-sm); color: var(--c-ink);
}
.stage__steps b::before {
  content: counter(step) ". "; color: var(--c-accent); font-weight: var(--fw-strong);
}
.stage__steps p { font-size: var(--fs-xs); color: var(--c-ink-soft); }

.matrix-scroll { overflow-x: auto; }
.stage-matrix { width: 100%; border-collapse: collapse; text-align: left; }
.stage-matrix th, .stage-matrix td {
  padding: var(--s-5); vertical-align: top;
  border-bottom: var(--hairline) solid var(--c-border);
}
.stage-matrix thead th {
  font-family: var(--font-display); font-size: 1.0625rem; font-weight: var(--fw-mid);
  color: var(--c-ink); border-bottom: 2px solid var(--c-border-strong);
}
.stage-matrix thead th span {
  display: block; font-family: var(--font-body); font-size: var(--fs-xs);
  font-weight: var(--fw-strong); letter-spacing: var(--ls-eyebrow); color: var(--c-accent);
  margin-bottom: var(--s-2);
}
.stage-matrix tbody th {
  width: 11rem; font-size: var(--fs-sm); font-weight: var(--fw-strong); color: var(--c-ink);
  white-space: nowrap;
}
.stage-matrix td { font-size: var(--fs-sm); color: var(--c-ink-soft); min-width: 15rem; }
.stage-matrix tbody tr:last-child th, .stage-matrix tbody tr:last-child td { border-bottom: 0; }

/* ---------- SERVICE PANELS ----------
   The five Databricks engagements in one row: auto-fit means five across on
   a wide screen, then four, three, two and one as it narrows, without a
   breakpoint for each step. */

/* ---------- TRADEMARK / ATTRIBUTION ---------- */

.attribution {
  border-top: var(--hairline) solid var(--c-border);
  padding-top: var(--s-6); margin-top: var(--s-8);
}
.attribution p { font-size: var(--fs-xs); color: var(--c-ink-faint); max-width: 90ch; }

/* ============================================================
   SERVICE RAIL
   A category panel on the left, the services it contains as a card
   grid on the right. Carried by Data Management & Assurance, whose
   named services are what buyers actually search for.

   The panel is the section head: eyebrow, title, promise, one CTA.
   Nothing sits above it, which is why the rail owns the wide wrap.
   ============================================================ */

.rail {
  display: grid;
  grid-template-columns: minmax(0, 360px) minmax(0, 1fr);
  gap: clamp(1.25rem, 2.4vw, 2.25rem);
  align-items: start;
}

.rail-stack { display: grid; gap: clamp(2.5rem, 5vw, 4.5rem); margin-top: var(--s-8); }

/* ---- The gradient panel ---- */

.rail__panel {
  position: sticky; top: calc(var(--nav-h) + var(--s-4));
  overflow: hidden;
  padding: clamp(1.75rem, 2.8vw, 2.75rem);
  border-radius: var(--radius-card);
  color: var(--c-on-ink);
  background:
    radial-gradient(120% 95% at 92% 96%, var(--c-aurora-veil-3), transparent 58%),
    radial-gradient(115% 85% at 82% 8%,  var(--c-aurora-veil-2), transparent 60%),
    linear-gradient(148deg, var(--c-aurora-1) 0%, var(--c-aurora-2) 56%, var(--c-aurora-3) 100%);
}
/* A dot field, masked to a soft disc — the aurora's texture, not a
   second decorative language. Sits under the copy, never over it. */
.rail__panel::before {
  content: ""; position: absolute; inset: -28% -22% auto auto;
  width: 460px; height: 460px; pointer-events: none; opacity: .34;
  background-image: radial-gradient(rgba(255, 255, 255, .85) 1px, transparent 1.2px);
  background-size: 11px 11px;
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 12%, transparent 66%);
          mask-image: radial-gradient(circle at 50% 50%, #000 12%, transparent 66%);
}
.rail__panel > * { position: relative; z-index: 1; }

.rail__panel .eyebrow { color: rgba(255, 255, 255, .82); margin-bottom: var(--s-3); }

.rail__panel :is(h2, h3) {
  font-family: var(--font-display);
  font-size: clamp(1.625rem, 2.2vw, 2.125rem);
  font-weight: var(--fw-strong);
  line-height: 1.16; letter-spacing: var(--ls-tight);
  text-transform: uppercase;
  color: var(--c-on-ink);
  margin: 0 0 var(--s-5);
}
.rail__panel :is(h2, h3)::after {
  content: ""; display: block;
  width: 64px; height: 3px; margin-top: var(--s-5);
  background: var(--c-on-ink);
}
.rail__panel :is(h2, h3) .rail__thin { display: block; font-weight: var(--fw-display); opacity: .86; }
.rail__panel p {
  color: var(--c-on-ink-soft);
  font-size: var(--fs-sm); line-height: var(--lh-body);
  margin-bottom: var(--s-6);
}

/* Outline pill on the gradient. `.btn` adds an arrow by default; this
   variant is a destination, not a next step, so it loses it. */
.rail__panel .btn.btn--ghost {
  background: transparent; color: var(--c-on-ink);
  border: 1.5px solid rgba(255, 255, 255, .72);
  padding: 13px var(--s-6);
  font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: var(--ls-eyebrow);
}
.rail__panel .btn.btn--ghost::after { content: none; }
.rail__panel .btn.btn--ghost:hover {
  background: var(--c-paper); color: var(--c-surface-dark); border-color: var(--c-paper);
}

/* ---- The card grid ---- */

.rail__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(.875rem, 1.4vw, 1.375rem);
}

.rail-card {
  position: relative;
  display: flex; flex-direction: column;
  padding: clamp(1.375rem, 2vw, 1.875rem);
  background: var(--c-paper);
  border: var(--hairline) solid var(--c-border);
  border-radius: var(--radius-card);
  transition: border-color var(--dur-hover) var(--ease),
              box-shadow var(--dur-hover) var(--ease),
              transform var(--dur-hover) var(--ease);
}
/* The bracket. It sits on the border, not inside it, so the 1px card
   edge runs underneath rather than doubling up against it. */
.rail-card::before {
  content: ""; position: absolute; left: -1px; top: -1px;
  width: 86px; height: 56px; pointer-events: none;
  border-top: 4px solid var(--rail-mark);
  border-left: 4px solid var(--rail-mark);
  border-top-left-radius: var(--radius-card);
}
.rail-card--a { --rail-mark: var(--c-accent); }
.rail-card--b { --rail-mark: var(--cat-1); }
.rail-card:hover {
  border-color: var(--c-border-strong);
  box-shadow: var(--shadow-lift);
  transform: translateY(-2px);
}

.rail-card__num {
  position: absolute; top: clamp(1rem, 1.5vw, 1.25rem); right: clamp(1.25rem, 1.8vw, 1.5rem);
  font-family: var(--font-mono); font-size: var(--fs-xs); font-weight: var(--fw-strong);
  letter-spacing: var(--ls-eyebrow); color: var(--rail-mark);
}
.rail-card:has(.rail-card__num) :is(h3, h4) { padding-right: var(--s-7); }

.rail-card :is(h3, h4) {
  font-family: var(--font-display);
  font-size: 1.3125rem; line-height: 1.24;
  font-weight: var(--fw-strong); letter-spacing: var(--ls-tight);
  color: var(--c-ink);
  margin: 0 0 var(--s-5);
}
.rail-card :is(h3, h4) .rail__thin { display: block; font-weight: var(--fw-display); color: var(--c-ink-soft); }
.rail-card :is(h3, h4) strong { font-weight: var(--fw-strong); }
.rail-card :is(h3, h4)::after {
  content: ""; display: block;
  width: 46px; height: 2px; margin-top: var(--s-4);
  background: var(--c-ink);
}
.rail-card p {
  font-size: var(--fs-sm); line-height: var(--lh-body);
  color: var(--c-body); max-width: var(--measure-card);
}
.rail-card .proof-list { margin-top: var(--s-4); }
.rail-card__pills { margin-top: auto; padding-top: var(--s-6); }

.rail-card__more {
  display: inline-flex; align-items: center; gap: var(--s-2);
  margin-top: auto; padding-top: var(--s-6);
  font-size: var(--fs-xs); font-weight: var(--fw-strong);
  text-transform: uppercase; letter-spacing: var(--ls-eyebrow);
  color: var(--c-ink-faint); text-decoration: none;
}
.rail-card__more::after { content: "\2192"; transition: transform var(--dur-hover) var(--ease); }
.rail-card:hover .rail-card__more { color: var(--c-accent); }
.rail-card__more:hover::after { transform: translateX(3px); }

/* ============================================================
   RESPONSIVE — 640 stack · 900 nav to drawer · 1275 max
   ============================================================ */

/* Six nav items plus a CTA need room. Tighten them below 1200px, and hand
   over to the drawer at 1100px — under that the row overflowed by up to
   127px once the About menu was added. The utility bar stays until 900px. */
@media (max-width: 1200px) {
  .nav__trigger, .nav__link { padding-inline: var(--s-3); }
  .site-header__cta { padding-inline: var(--s-5); margin-left: var(--s-3); }
}
@media (max-width: 1100px) {
  .nav, .site-header__cta { display: none; }
  .drawer-toggle { display: block; }
}

@media (max-width: 1080px) {
  .rail { grid-template-columns: 1fr; }
  .rail__panel { position: static; }
  .rail__panel p { max-width: 62ch; }
  .mega__grid { grid-template-columns: 1fr 1.8fr; }
  .mega__promo { display: none; }
  .site-footer__top { grid-template-columns: 1fr; gap: var(--s-8); }

  .value-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .thought-grid { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
  .utility-bar, .nav, .site-header__cta { display: none; }
  .drawer-toggle { display: block; }
  .grid--4, .grid--3 { grid-template-columns: repeat(2, 1fr); }
  .tiles--4 { grid-template-columns: repeat(2, 1fr); }
  .approach-list { grid-template-columns: 1fr; }
  .tabpanel, .case-carousel, .insight-feature, .contact-grid, .framework { grid-template-columns: 1fr; }
  .at-a-glance { grid-template-columns: repeat(2, 1fr); }
  .context-pair { grid-template-columns: 1fr; gap: var(--s-6); }
  .site-footer__cols { grid-template-columns: repeat(2, 1fr); }
  .trust { grid-template-columns: repeat(2, 1fr); }
  .capstrip { grid-template-columns: repeat(3, 1fr); }
  .foundation__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .about-team-gallery { grid-template-columns: repeat(2, 1fr); }
  .client-logos, .value-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .svc-rail { grid-template-columns: 1fr; column-gap: 0; padding-left: var(--s-8); }
  .svc-rail::before { left: calc(var(--s-8) / 2); transform: none; }
  .svc-step:nth-child(odd), .svc-step:nth-child(even) { grid-column: 1; justify-items: stretch; }
  .svc-step:nth-child(odd) .svc-step__node,
  .svc-step:nth-child(even) .svc-step__node {
    left: calc(-1 * (var(--s-8) / 2 + var(--svc-node) / 2)); right: auto;
  }
  .svc-card { max-width: none; }
  .truth-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .differentiator-list { grid-template-columns: 1fr; }
  .story > li { grid-template-columns: 1fr; gap: var(--s-3); }
  .work-panel, .who-panels, .stack-split { grid-template-columns: 1fr; gap: var(--s-4); }
  .stage-grid { grid-template-columns: 1fr; }
  .work-head { align-items: flex-start; }
  .svc-card__body { margin-top: -8%; }
  .outcomes { grid-template-columns: repeat(2, 1fr); }
  .stack > li { grid-template-columns: 1fr; gap: var(--s-3); }
  .ledger { grid-template-columns: 1fr; }
  .ledger__node { transform: translate(-50%, -50%) rotate(90deg); }
  .hero { min-height: 560px; height: auto; padding-top: var(--s-9); }
  .chrome-on-hero .hero { padding-top: calc(var(--nav-h) + var(--s-6)); }
  .hero__slide { position: relative; display: none; }
  .hero__slide.is-active { display: block; }
  .hero__inner { padding-block: var(--s-8) var(--s-10); }
  .hero__copy { max-width: none; }
}

@media (max-width: 640px) {
  .rail__grid { grid-template-columns: 1fr; }
  .grid--4, .grid--3, .grid--2, .grid--auto { grid-template-columns: 1fr; }
  .tiles--3, .tiles--4 { grid-template-columns: 1fr; gap: var(--s-6); }
  .at-a-glance, .site-footer__cols { grid-template-columns: 1fr; }
  .trust { grid-template-columns: 1fr; }
  .capstrip { grid-template-columns: repeat(2, 1fr); }
  .foundation__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .about-team-gallery { grid-template-columns: 1fr 1fr; }
  .client-logos, .value-grid, .truth-row { grid-template-columns: 1fr; }
  .who-panel__stat { grid-template-columns: 1fr; gap: var(--s-2); }
  .thought-card { grid-template-columns: 1fr; }
  .thought-card__thumb { aspect-ratio: 16 / 9; }
  .hero__mark { display: none; }
  .outcomes { grid-template-columns: 1fr; }
  :root { --radius-panel: 0; }
  .taxonomy { grid-template-columns: 1fr; }
  .page-hero { min-height: 420px; }
  .product-hero__facts { gap: var(--s-5); }
  .brand span { font-size: 1.0625rem; }
}

/* ---------- REDUCED MOTION ---------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .js .reveal { opacity: 1; transform: none; }
  html { scroll-behavior: auto; }
  /* The marquee stops moving and becomes a rail the reader drives. The
     global animation kill above would otherwise leave the track parked
     at its end position, showing the duplicated half. */
  .partner-marquee { overflow-x: auto; }
  .partner-marquee__viewport { animation: none !important; transform: none !important; }
  .partner-marquee__track[aria-hidden="true"] { display: none; }
}

/* ---------- PRINT ---------- */

@media print {
  .site-header, .utility-bar, .drawer, .hero__dots, .cta-band { display: none; }
  body { background: #fff; color: #000; }
}