/* ==========================================================================
   GEMIS — site stylesheet
   Layout, type scale and colour system follow the corporate design reference
   supplied in 9aa8ebe7527e496406f633d6e4496d2a.webp.

   Used by index.html, about.html and services.html. The pages still on the
   earlier dark design (work, managem, wastemart, brand-studio, privacy, 404)
   continue to load style.css and are unaffected by anything in here.
   ========================================================================== */

@font-face {
  font-family: 'Archivo Var';
  src: url('../fonts/archivo-latin-wdth-normal.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-stretch: 62.5% 125%;
  font-display: swap;
}

:root {
  /* ── colour: the hero photograph is the source ───────────────────────
     Every ground and ink below is sampled from, or derived from, the
     steel-blue sky in assets/img/home/hero-bg.jpg (#96bbd5 in the open,
     #09263f under the scrim). The indigo that used to sit beside it is gone. */
  --paper:        #f3f4f6;   /* body ground: the sky's grey, at 96% light */
  --paper-2:      #fafbfc;   /* lifted ground for cards and quiet bands */
  --wash:         #e6edf4;   /* the sky, at a whisper */
  --white:        #ffffff;
  --ink:          #121a26;   /* blue-black, not neutral black */
  --ink-2:        #4b5563;   /* 6.4:1 on --wash, the darkest ground it sits on */
  --ink-3:        #5c6675;   /* 4.9:1 on --wash */
  --navy:         #16395e;   /* the sky under the hero scrim, mid */
  --navy-deep:    #0b2642;   /* the sky under the hero scrim, deep — dark bands */
  --blue:         #2a5c8a;   /* the open sky, darkened to 5.9:1 on --wash */
  --steel:        #96bbd5;   /* the open sky, as sampled */
  --cta-navy:     var(--navy-deep);
  --rule:         #d9dee5;
  --rule-soft:    #e4e8ee;
  --chip:         #e6eaf0;

  --shell:        1360px;
  --gutter:       clamp(20px, 4vw, 56px);
  --ease:         cubic-bezier(.22, .61, .36, 1);

  /* ── type scale: eight steps, nothing in between ──────────────────────
     Page title → section title → lead → title → name → copy → small → eyebrow. */
  --fs-hero:      clamp(38px, 4.4vw, 64px);     /* h1, one per page */
  --fs-display:   clamp(28px, 3vw, 44px);       /* h2 section titles */
  --fs-lead:      clamp(22px, 2.1vw, 30px);     /* large card names, wordmarks */
  --fs-title:     clamp(18px, 1.4vw, 21px);     /* h3 card and item titles */
  --fs-name:      clamp(16px, 1.1vw, 17px);     /* names, ledes */
  --fs-copy:      clamp(14.5px, 1vw, 15.5px);   /* body and component copy — one size */
  --fs-small:     clamp(13px, .9vw, 13.5px);    /* metas, chips, notes */
  --fs-label:     var(--fs-small);              /* uppercase labels share the small step */
  --fs-eyebrow:   clamp(11px, .8vw, 12px);      /* eyebrows */
  --fs-stat:      clamp(36px, 3.6vw, 52px);     /* figures */
  --fs-quote:     clamp(26px, 3vw, 44px);       /* pull quotes */

  /* ── rhythm ──────────────────────────────────────────────────────────── */
  --hero-top:     clamp(120px, 15vh, 184px);
  --hero-bottom:  clamp(48px, 6vh, 80px);
  --sec-y:        clamp(72px, 8vw, 112px);      /* every section, both edges */
  --sec-y-s:      clamp(44px, 5vw, 68px);       /* the short proof strip */
  --head-gap:     clamp(28px, 3.6vw, 48px);     /* under a section header */
  --card-pad:     clamp(18px, 2vw, 24px);       /* inside a card */
  --card-gap:     clamp(14px, 1.6vw, 20px);     /* between cards */
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: 'Archivo Var', 'Helvetica Neue', Arial, sans-serif;
  font-size: clamp(14.5px, 1.02vw, 15.5px);
  line-height: 1.66;
  font-weight: 400;
  letter-spacing: .002em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }

h1, h2, h3, h4 {
  margin: 0;
  font-weight: 400;
  letter-spacing: -.021em;
  line-height: 1.1;
}

.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--navy); color: #fff; padding: 12px 18px;
}
.skip-link:focus { left: 12px; top: 12px; }

/* ── shared type ─────────────────────────────────────────────────────── */

.eyebrow {
  margin: 0 0 18px;
  font-size: var(--fs-eyebrow);
  letter-spacing: .10em;
  text-transform: uppercase;
  color: var(--navy);
  font-weight: 500;
}
.eyebrow--light { color: rgba(255,255,255,.86); }

.display {
  font-size: var(--fs-display);
  line-height: 1.12;
  letter-spacing: -.026em;
}

.lede {
  margin: 0;
  color: var(--ink-2);
  max-width: 62ch;
}

/* text link with the reference's underline + ↗ */
.arrow-link {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding-bottom: 7px;
  border-bottom: 1px solid currentColor;
  font-size: var(--fs-copy);
  letter-spacing: -.005em;
  transition: opacity .3s var(--ease);
}
.arrow-link svg { width: 11px; height: 11px; transition: transform .35s var(--ease); }
.arrow-link:hover { opacity: .68; }
.arrow-link:hover svg { transform: translate(3px, -3px); }

/* faint plotted dot-grid used in the reference's margins */
.dotgrid {
  position: absolute;
  background-image: radial-gradient(rgba(22,57,94,.19) 1px, transparent 1px);
  background-size: 17px 17px;
  pointer-events: none;
}

/* ── scroll reveal ───────────────────────────────────────────────────── */

[data-reveal] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .85s var(--ease), transform .85s var(--ease);
  transition-delay: var(--d, 0ms);
}
[data-reveal].is-in { opacity: 1; transform: none; }

/* ══════════════════════════════════════════════════════════════════════
   HEADER
   ══════════════════════════════════════════════════════════════════════ */

.nav {
  position: fixed;
  inset: 0 0 auto;
  z-index: 90;
  padding-block: clamp(18px, 2vw, 28px);
  transition: background .4s var(--ease), padding .4s var(--ease), box-shadow .4s var(--ease);
}
.nav__in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* The logo is a single traced sprite filled with currentColor, so it simply
   inherits whatever colour its context sets — white over the dark hero and
   photographic bands, navy on paper. */
.logo {
  display: block;
  width: auto;
  height: 100%;
  fill: currentColor;
}

.nav__logo {
  position: relative;
  z-index: 2;
  display: block;
  height: clamp(26px, 2.1vw, 32px);
  color: #fff;
  transition: color .4s var(--ease);
}
.nav__logo .logo { filter: drop-shadow(0 1px 2px rgba(4, 20, 38, .28)); }
.nav.is-stuck .nav__logo .logo,
.nav.is-mega .nav__logo .logo { filter: none; }
.nav__drawer { display: contents; }

.nav__links {
  display: flex;
  align-items: center;
  gap: clamp(20px, 2.6vw, 40px);
  margin: 0; padding: 0; list-style: none;
}
.nav__links > li > a {
  position: relative;
  font-size: var(--fs-copy);
  color: rgba(255,255,255,.92);
  transition: color .4s var(--ease), opacity .3s var(--ease);
}
.nav__links > li > a::after {
  content: '';
  position: absolute; left: 0; bottom: -5px;
  width: 100%; height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .4s var(--ease);
}
.nav__links > li > a:hover::after { transform: scaleX(1); transform-origin: left; }

/* solid state once scrolled past the hero */
.nav.is-stuck {
  background: rgba(243,244,246,.93);
  backdrop-filter: saturate(1.6) blur(14px);
  box-shadow: 0 1px 0 var(--rule);
  padding-block: 14px;
}
/* Pages whose hero is light (the about split hero) need the bar solid from
   the start — a white wordmark on paper is invisible, and the nav spans both
   the paper and image halves, so no single transparent treatment works. */
.nav--solid,
.nav--solid.is-stuck {           /* .is-stuck would otherwise win on specificity */
  background: var(--paper);
  backdrop-filter: none;
  box-shadow: 0 1px 0 var(--rule);
}
.nav--solid .nav__logo { color: var(--navy); }
.nav--solid .nav__logo .logo { filter: none; }
.nav--solid .nav__links > li > a,
.nav--solid .nav__trigger { color: var(--ink); }
.nav--solid .nav__burger span { background: var(--ink); }

/* The open panel is paper, so the bar above it must be too — otherwise the
   logo and links sit navy-on-blue. Padding is left alone so the panel, which
   hangs off the bar's bottom edge, does not jump as it opens. */
.nav.is-mega {
  background: var(--paper);
  backdrop-filter: none;
  box-shadow: none;
}
.nav.is-stuck .nav__logo,
.nav.is-mega .nav__logo { color: var(--navy); }
.nav.is-stuck .nav__links > li > a, .nav.is-stuck .nav__trigger,
.nav.is-mega .nav__links > li > a, .nav.is-mega .nav__trigger { color: var(--ink); }
.nav.is-stuck .nav__burger span,
.nav.is-mega .nav__burger span { background: var(--ink); }

.nav__burger {
  position: relative;
  z-index: 2;
  display: none;
  width: 42px; height: 42px;
  margin-right: -9px;
  padding: 0;
  background: none; border: 0;
  cursor: pointer;
}
.nav__burger span {
  display: block;
  width: 22px; height: 1.5px;
  margin: 5px auto;
  background: #fff;
  transition: transform .35s var(--ease), opacity .25s var(--ease), background .4s var(--ease);
}
.nav.is-open .nav__burger span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav.is-open .nav__burger span:nth-child(2) { opacity: 0; }
.nav.is-open .nav__burger span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* ══════════════════════════════════════════════════════════════════════
   PRODUCTS MEGA MENU
   Expands under the header on hover (pointer) or click/keyboard, in the
   manner of accenture.com's top-level menus.
   ══════════════════════════════════════════════════════════════════════ */

.nav__item--mega { position: static; }

.nav__trigger {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0;
  border: 0;
  background: none;
  font-size: var(--fs-copy);
  line-height: inherit;
  color: rgba(255,255,255,.92);
  cursor: pointer;
  transition: color .4s var(--ease);
}
.nav__chev { width: 10px; height: 6px; transition: transform .35s var(--ease); }
.nav__item--mega[data-open] .nav__chev { transform: rotate(180deg); }

.nav__trigger::after {
  content: '';
  position: absolute; left: 0; bottom: -5px;
  width: 100%; height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .4s var(--ease);
}
.nav__item--mega[data-open] .nav__trigger::after,
.nav__trigger:hover::after { transform: scaleX(1); transform-origin: left; }

.mega {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--paper);
  border-top: 1px solid var(--rule-soft);
  box-shadow: 0 28px 44px -30px rgba(10, 18, 38, .34);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: opacity .34s var(--ease), transform .34s var(--ease), visibility .34s;
}
.mega.is-open { opacity: 1; visibility: visible; transform: none; }

.mega__in { padding-block: clamp(30px, 3.4vw, 48px) clamp(32px, 3.6vw, 52px); }

.mega__head {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: clamp(24px, 4vw, 64px);
  align-items: baseline;
  padding-bottom: clamp(22px, 2.6vw, 34px);
  margin-bottom: clamp(24px, 2.8vw, 38px);
  border-bottom: 1px solid var(--rule-soft);
}
.mega__head .eyebrow { margin: 0; }
.mega__lede { margin: 0; max-width: 78ch; color: var(--ink-2); font-size: var(--fs-copy); }

.mega__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 2.6vw, 40px);
}

.prod { display: flex; flex-direction: column; }
.prod__body { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; }
.prod__media {
  display: block;
  overflow: hidden;
  margin-bottom: clamp(12px, 1.4vw, 16px);
  background: #e2e7ed;
}
.prod__media img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  transition: transform .7s var(--ease);
}
.prod:hover .prod__media img { transform: scale(1.04); }

.prod__name {
  margin: 0 0 10px;
  font-size: var(--fs-title);
  letter-spacing: -.018em;
  color: var(--ink);
}
.prod__desc {
  margin: 0 0 clamp(12px, 1.4vw, 16px);
  font-size: var(--fs-small);
  line-height: 1.62;
  color: var(--ink-2);
}
.prod__cta {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 9px;
  margin-top: auto;
  padding: 11px 20px;
  border: 1px solid var(--navy);
  border-radius: 999px;
  font-size: var(--fs-small);
  color: var(--navy);
  transition: background .35s var(--ease), color .35s var(--ease);
}
.prod__cta svg { width: 11px; height: 11px; transition: transform .35s var(--ease); }
.prod__cta:hover { background: var(--navy); color: #fff; }
.prod__cta:hover svg { transform: translate(3px, -3px); }

/* ══════════════════════════════════════════════════════════════════════
   HERO
   ══════════════════════════════════════════════════════════════════════ */

.hero {
  position: relative;
  isolation: isolate;
  min-height: clamp(600px, 92vh, 940px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: var(--hero-top);
  padding-bottom: var(--hero-bottom);
  overflow: hidden;
  color: #fff;
}
.hero__bg {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
}
/* scrim: keeps the white headline legible over the light-blue artwork */
.hero::before {
  content: '';
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(103deg, rgba(9,38,68,.80) 0%, rgba(11,44,78,.55) 38%, rgba(20,66,104,.16) 66%, rgba(20,66,104,0) 88%),
    linear-gradient(to bottom, rgba(8,32,58,.45) 0%, rgba(8,32,58,0) 26%, rgba(8,32,58,0) 62%, rgba(8,32,58,.42) 100%);
}
.hero__in { position: relative; width: 100%; }

.hero__title {
  margin: 0 0 clamp(20px, 2.4vw, 30px);
  font-size: var(--fs-hero);
  line-height: 1.07;
  letter-spacing: -.032em;
  max-width: 21ch;
}
.hero__copy {
  margin: 0 0 clamp(30px, 4vw, 50px);
  max-width: 46ch;
  color: rgba(255,255,255,.9);
  font-size: var(--fs-copy);
}
.hero .arrow-link { color: #fff; }

.hero__partners {
  margin-top: clamp(46px, 7vh, 96px);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 14px;
  text-align: right;
}
.hero__partners > span {
  font-size: var(--fs-small);
  color: rgba(255,255,255,.88);
  letter-spacing: .01em;
}
.hero__logos {
  display: flex;
  align-items: center;
  gap: clamp(20px, 3vw, 46px);
  flex-wrap: wrap;
  justify-content: flex-end;
}
.hero__logos span {
  font-size: var(--fs-copy);
  font-weight: 500;
  letter-spacing: .005em;
  color: rgba(255,255,255,.95);
  white-space: nowrap;
}

/* ══════════════════════════════════════════════════════════════════════
   ABOUT
   ══════════════════════════════════════════════════════════════════════ */

.about { position: relative; padding-top: clamp(70px, 9vw, 122px); overflow: hidden; }
.about .dotgrid { top: 0; left: 0; width: 42%; height: 330px; opacity: .5;
  -webkit-mask-image: linear-gradient(160deg, #000, transparent 72%);
          mask-image: linear-gradient(160deg, #000, transparent 72%); }

.about__grid {
  position: relative;
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: clamp(32px, 5vw, 76px);
  align-items: start;
}
.about__title { max-width: 18ch; }
.about__side { padding-top: clamp(4px, 1.4vw, 22px); }

.stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(18px, 2.4vw, 34px);
  margin-top: clamp(40px, 5.5vw, 74px);
}
.stat__n {
  display: block;
  font-size: var(--fs-stat);
  line-height: 1;
  letter-spacing: -.035em;
  color: var(--navy);
}
.stat__n sup {
  font-size: .42em;
  top: -.86em;
  margin-left: .04em;
  letter-spacing: 0;
}
.stat__l {
  display: block;
  margin-top: 14px;
  font-size: var(--fs-small);
  line-height: 1.42;
  color: var(--ink);
  max-width: 20ch;
}

.about__band {
  margin-top: clamp(40px, 5.5vw, 76px);
  width: 100%;
  height: auto;
  aspect-ratio: 2000 / 860;
  object-fit: cover;
}

/* ══════════════════════════════════════════════════════════════════════
   WHAT WE DO
   ══════════════════════════════════════════════════════════════════════ */

.what { position: relative; padding-top: clamp(72px, 9vw, 126px); overflow: hidden; }
.what .dotgrid { right: 0; bottom: 9%; width: 16%; height: 320px; opacity: .55;
  -webkit-mask-image: linear-gradient(300deg, #000, transparent 78%);
          mask-image: linear-gradient(300deg, #000, transparent 78%); }

.what__head {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 28px;
  padding-bottom: var(--head-gap);
}

.rows { position: relative; margin: 0; padding: 0; list-style: none; }
.row {
  display: grid;
  grid-template-columns: .85fr 1.15fr 2.25fr;
  gap: clamp(16px, 2.5vw, 40px);
  padding: clamp(26px, 3.2vw, 44px) 0;
  border-top: 1px solid var(--rule);
}
.rows .row:last-child { border-bottom: 1px solid var(--rule); }
.row__n {
  font-size: var(--fs-copy);
  color: var(--navy);
  letter-spacing: .01em;
}
.row__name {
  font-size: var(--fs-copy);
  font-weight: 500;
  letter-spacing: .045em;
  text-transform: uppercase;
  color: var(--navy);
  line-height: 1.38;
}
.row__body p { margin: 0 0 clamp(18px, 2.2vw, 30px); color: var(--ink-2); max-width: 68ch; }

.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.chips li {
  padding: 7px 13px;
  background: var(--chip);
  font-size: var(--fs-small);
  line-height: 1.3;
  color: #4a4b4e;
  white-space: nowrap;
}

/* ══════════════════════════════════════════════════════════════════════
   VALUES
   ══════════════════════════════════════════════════════════════════════ */

.values { padding-top: clamp(72px, 9vw, 126px); }
.values__head {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: clamp(28px, 5vw, 76px);
  align-items: end;
  padding-bottom: var(--head-gap);
}
.values__head .display { max-width: 16ch; }

.cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--card-gap);
}
.card {
  display: flex;
  flex-direction: column;
  padding: var(--card-pad);
  border: 1px solid var(--rule-soft);
  background: var(--paper-2);
  transition: border-color .45s var(--ease), background .45s var(--ease), transform .45s var(--ease);
}
.card:hover { border-color: #c9d1db; background: #fff; transform: translateY(-4px); }
.card__icon {
  display: grid;
  place-items: center;
  width: 42px; height: 42px;
  background: rgba(22,57,94,.055);
  color: var(--navy);
}
.card__icon svg { width: 20px; height: 20px; }
.card__t {
  margin: 18px 0 8px;
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: .045em;
  text-transform: uppercase;
  color: var(--navy);
  line-height: 1.4;
}
.card p { margin: 0; font-size: var(--fs-copy); color: var(--ink-2); }

/* ══════════════════════════════════════════════════════════════════════
   LEADERSHIP BAND
   ══════════════════════════════════════════════════════════════════════ */

.lead {
  position: relative;
  isolation: isolate;
  margin-top: clamp(72px, 9vw, 126px);
  padding-block: clamp(58px, 7.5vw, 104px);
  min-height: clamp(470px, 46vw, 660px);
  display: flex;
  align-items: center;
  overflow: hidden;
  color: #fff;
  background: var(--navy-deep);
}
.lead::before {
  content: '';
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(100deg, rgba(5,26,48,.94) 0%, rgba(6,32,58,.86) 34%, rgba(8,40,72,.44) 62%, rgba(8,40,72,.12) 88%),
    linear-gradient(to bottom, rgba(4,20,38,.30), rgba(4,20,38,0) 34%);
}
.lead__in { width: 100%; }
.lead__title { max-width: 21ch; margin-bottom: clamp(26px, 3.4vw, 44px); }
.lead__cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 25ch));
  gap: clamp(24px, 3.4vw, 50px);
  margin-bottom: clamp(40px, 6vw, 82px);
}
.lead__cols p { margin: 0; color: rgba(255,255,255,.9); font-size: var(--fs-copy); }
.lead .arrow-link { color: #fff; }

/* ══════════════════════════════════════════════════════════════════════
   WORK
   ══════════════════════════════════════════════════════════════════════ */

.work { position: relative; padding-top: clamp(72px, 9vw, 126px); padding-bottom: clamp(70px, 9vw, 120px); overflow: hidden; }
.work .dotgrid { left: 0; top: 8%; width: 14%; height: 420px; opacity: .45;
  -webkit-mask-image: linear-gradient(30deg, #000, transparent 74%);
          mask-image: linear-gradient(30deg, #000, transparent 74%); }
.work__head {
  position: relative;
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: clamp(28px, 5vw, 76px);
  align-items: end;
  padding-bottom: var(--head-gap);
}

.stories {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(26px, 3.4vw, 52px);
}
.story { display: flex; flex-direction: column; }
.story__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 16px 0 18px;
  border-top: 1px solid var(--rule);
}
.story__plus { color: var(--ink-3); font-size: 15px; line-height: 1; }
.story__k {
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: .045em;
  text-transform: uppercase;
  color: var(--navy);
  text-align: right;
}
.story__img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: #e2e7ed;
  transition: transform .7s var(--ease);
}
.story__frame { overflow: hidden; }
.story:hover .story__img { transform: scale(1.035); }
.story p { margin: clamp(14px, 1.6vw, 20px) 0 clamp(14px, 1.6vw, 20px); color: var(--ink-2); }
.story .chips { margin-bottom: 22px; }
.story .arrow-link { align-self: flex-start; margin-top: auto; color: var(--navy); }

/* ══════════════════════════════════════════════════════════════════════
   CTA
   ══════════════════════════════════════════════════════════════════════ */

.cta {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: clamp(70px, 9vw, 124px);
  text-align: center;
  color: #fff;
  background: var(--cta-navy);
}
.cta::before {
  content: '';
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(8,34,62,.72), rgba(22,57,94,.62));
}
.cta .dotgrid {
  z-index: -1;
  top: 12%; height: 76%;
  width: 13%;
  background-image: radial-gradient(rgba(255,255,255,.26) 1px, transparent 1px);
}
.cta .dotgrid--l { left: 2%; }
.cta .dotgrid--r { right: 2%; }

.cta__t {
  margin: 0 auto 18px;
  font-size: var(--fs-display);
  letter-spacing: -.028em;
  max-width: 20ch;
}
.cta__s {
  margin: 0 auto clamp(30px, 3.6vw, 44px);
  max-width: 54ch;
  color: rgba(255,255,255,.86);
  font-size: var(--fs-copy);
}

.cta__form {
  display: flex;
  align-items: center;
  gap: 6px;
  width: min(100%, 460px);
  margin-inline: auto;
  padding: 6px;
  background: #fff;
  border-radius: 999px;
}
.cta__form input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 12px 20px;
  border: 0;
  background: none;
  font: inherit;
  font-size: 14.5px;
  color: var(--ink);
}
.cta__form input::placeholder { color: #8b8c90; }
.cta__form input:focus { outline: 2px solid rgba(22,57,94,.35); outline-offset: 2px; border-radius: 999px; }
.cta__form button {
  flex: 0 0 auto;
  padding: 12px 26px;
  border: 0;
  border-radius: 999px;
  background: var(--navy-deep);
  color: #fff;
  font-size: 14.5px;
  cursor: pointer;
  transition: background .35s var(--ease), transform .35s var(--ease);
}
.cta__form button:hover { background: #061a30; transform: translateY(-1px); }
.cta__note { margin: 16px 0 0; font-size: 12.5px; color: rgba(255,255,255,.62); }

/* ══════════════════════════════════════════════════════════════════════
   FOOTER
   ══════════════════════════════════════════════════════════════════════ */

.foot { background: var(--paper); padding-top: clamp(52px, 6.5vw, 84px); }
.foot__grid {
  display: grid;
  grid-template-columns: 1.7fr 1fr 1fr 1fr;
  gap: clamp(28px, 4vw, 60px);
  padding-bottom: clamp(46px, 6vw, 78px);
}
.foot__logo {
  display: block;
  height: clamp(30px, 2.4vw, 36px);
  margin-bottom: 20px;
  color: var(--navy);
}
.foot__blurb { margin: 0 0 20px; max-width: 34ch; font-size: var(--fs-copy); color: var(--ink-2); }
.foot__addr { margin: 0; font-style: normal; font-size: var(--fs-copy); color: var(--ink-2); }
.foot__addr a:hover { color: var(--navy); }

.foot__col h2 {
  margin: 0 0 18px;
  font-size: var(--fs-copy);
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -.005em;
}
.foot__col ul { margin: 0; padding: 0; list-style: none; }
.foot__col li + li { margin-top: 11px; }
.foot__col a {
  font-size: var(--fs-copy);
  color: var(--ink-3);
  transition: color .3s var(--ease);
}
.foot__col a:hover { color: var(--ink); }

.foot__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding-block: 24px 30px;
  border-top: 1px solid var(--rule-soft);
}
.foot__bar p { margin: 0; font-size: var(--fs-small); color: var(--ink-2); }
.foot__social { display: flex; gap: 16px; }
.foot__social a { display: grid; place-items: center; width: 26px; height: 26px; color: var(--ink); transition: opacity .3s var(--ease); }
.foot__social a:hover { opacity: .55; }
.foot__social svg { width: 17px; height: 17px; }

/* ══════════════════════════════════════════════════════════════════════
   INTERIOR PAGES — about.html, services.html
   ══════════════════════════════════════════════════════════════════════ */

/* shorter hero than the home page's */
.hero--page { min-height: clamp(460px, 68vh, 660px); }
.hero--page .hero__title { max-width: 19ch; }

.hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(20px, 3.2vw, 56px);
  margin-top: clamp(38px, 5.5vh, 74px);
  padding-top: clamp(20px, 2.4vw, 28px);
  border-top: 1px solid rgba(255,255,255,.24);
}
.hero__meta div { min-width: 0; }
.hero__meta dt {
  margin: 0 0 5px;
  font-size: var(--fs-eyebrow);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255,255,255,.62);
}
.hero__meta dd {
  margin: 0;
  font-size: var(--fs-small);
  color: #fff;
}

/* section header shared by the interior pages */
.sec {
  position: relative;
  padding-top: clamp(70px, 9vw, 122px);
  /* clip, not hidden: hidden would make this a scroll container and break
     position:sticky for the filter rail and the about page's sticky aside */
  overflow: clip;
}
.sec--tight { padding-top: clamp(56px, 7vw, 92px); }
.sec__head {
  position: relative;
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: clamp(28px, 5vw, 76px);
  align-items: end;
  padding-bottom: var(--head-gap);
}
.sec__head .display { max-width: 17ch; }

/* problem → outcome pairs (services) */
.pairs { margin: 0; padding: 0; list-style: none; }
.pair {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: clamp(14px, 2.4vw, 40px);
  padding: clamp(18px, 2.1vw, 26px) 0;
  border-top: 1px solid var(--rule);
}
.pairs .pair:last-child { border-bottom: 1px solid var(--rule); }
.pair__from { color: var(--ink-2); font-size: var(--fs-copy); }
.pair__arrow { color: var(--ink-3); font-size: 14px; line-height: 1; }
.pair__to {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: var(--fs-copy);
  color: var(--navy);
}
.pair__to svg { flex: 0 0 auto; width: 15px; height: 15px; }

/* numbered process steps */
.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--rule-soft);
  border-left: 1px solid var(--rule-soft);
}
.step {
  padding: var(--card-pad);
  border-right: 1px solid var(--rule-soft);
  border-bottom: 1px solid var(--rule-soft);
}
.step__n {
  display: block;
  margin-bottom: clamp(14px, 1.6vw, 20px);
  font-size: clamp(24px, 2.2vw, 32px);
  line-height: 1;
  letter-spacing: -.03em;
  color: var(--navy);
  opacity: .42;
}
.step__t {
  margin: 0 0 10px;
  font-size: var(--fs-small);
  font-weight: 500;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--navy);
  line-height: 1.4;
}
.step p { margin: 0; font-size: var(--fs-copy); color: var(--ink-2); }

/* labelled capability chip groups */
.groups {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(24px, 3vw, 48px);
}
.group { padding-top: var(--card-pad); border-top: 1px solid var(--rule); }
.group h3 {
  margin: 0 0 clamp(16px, 1.8vw, 22px);
  font-size: var(--fs-small);
  font-weight: 500;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--navy);
}

/* team grid — lives on the about page */
.people {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border: 1px solid var(--rule-soft);
  border-bottom: 0;
}
.person {
  padding: var(--card-pad);
  border-right: 1px solid var(--rule-soft);
  border-bottom: 1px solid var(--rule-soft);
}
.person:nth-child(3n) { border-right: 0; }
.person__face {
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 5;
  margin-bottom: clamp(16px, 1.8vw, 24px);
  background: linear-gradient(158deg, #e3e9f0 0%, #cbd6e2 52%, #b8c6d6 100%);
  color: var(--navy);
  font-size: clamp(30px, 3vw, 44px);
  font-weight: 500;
  transition: filter .5s var(--ease);
}
.person:hover .person__face { filter: brightness(1.05) saturate(1.1); }
.person__n { margin: 0 0 5px; font-size: var(--fs-name); letter-spacing: -.012em; }
.person__r { margin: 0; font-size: var(--fs-small); color: var(--ink-3); line-height: 1.45; }

/* tail spacing before the CTA band */
.sec--last { padding-bottom: clamp(70px, 9vw, 120px); }

/* ══════════════════════════════════════════════════════════════════════
   PAGE-SPECIFIC LAYOUTS
   The home page owns the full-bleed hero / numbered rows / card-grid kit.
   About and Services use the same palette, type and spacing scale but their
   own structures, so the three pages do not read as one template.
   ══════════════════════════════════════════════════════════════════════ */

/* ── split hero (about) — type on paper, image panel to the right ────── */
.shero {
  position: relative;
  /* the solid header overlays the top of the image panel */
  display: grid;
  grid-template-columns: 1.02fr .98fr;
  align-items: stretch;
  min-height: clamp(520px, 82vh, 780px);
  background: var(--paper);
  overflow: hidden;
}
.shero__type {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(120px, 15vh, 180px) clamp(28px, 4vw, 64px) clamp(44px, 6vh, 76px) var(--gutter);
  max-width: calc(var(--shell) / 2 + var(--gutter));
  margin-left: auto;
}
.shero__title {
  margin: 0 0 clamp(20px, 2.4vw, 30px);
  font-size: var(--fs-hero);
  line-height: 1.08;
  letter-spacing: -.03em;
  max-width: 15ch;
}
.shero__copy { margin: 0 0 clamp(28px, 3.4vw, 40px); max-width: 44ch; color: var(--ink-2); }

.shero__panel { position: relative; isolation: isolate; overflow: hidden; }
.shero__panel img {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%;
  object-fit: cover;
}
.shero__panel::after {
  content: '';
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(196deg, rgba(6,30,56,.34), rgba(6,30,56,.06) 52%, rgba(6,30,56,.42));
}
.shero__facts {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: rgba(255,255,255,.22);
}
.shero__fact { padding: var(--card-pad); background: rgba(8,32,58,.58); backdrop-filter: blur(6px); }
.shero__fact dt {
  margin: 0 0 6px;
  font-size: var(--fs-eyebrow);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255,255,255,.66);
}
.shero__fact dd { margin: 0; font-size: var(--fs-label); color: #fff; line-height: 1.4; }

/* ── timeline (about) ────────────────────────────────────────────────── */
.tl { position: relative; margin: 0; padding: 0; list-style: none; }
.tl::before {
  content: '';
  position: absolute;
  left: 0; right: 0; top: 7px;
  height: 1px;
  background: var(--rule);
}
.tl { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(16px, 2.4vw, 34px); }
.tl__item { position: relative; padding-top: 30px; }
.tl__item::before {
  content: '';
  position: absolute; left: 0; top: 3px;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--navy);
}
.tl__year {
  display: block;
  margin-bottom: 10px;
  font-size: var(--fs-title);
  letter-spacing: -.02em;
  color: var(--navy);
}
.tl__t {
  margin: 0 0 8px;
  font-size: var(--fs-small);
  font-weight: 500;
  letter-spacing: .045em;
  text-transform: uppercase;
  color: var(--ink);
}
.tl__item p { margin: 0; font-size: var(--fs-small); color: var(--ink-2); }

/* ── sticky aside + scrolling list (about) ───────────────────────────── */
.stik { display: grid; grid-template-columns: .82fr 1.18fr; gap: clamp(28px, 5vw, 80px); }
.stik__aside { position: sticky; top: clamp(92px, 12vh, 124px); align-self: start; }
.stik__aside .display { max-width: 12ch; }
.stik__aside p { margin: clamp(16px, 2vw, 24px) 0 0; color: var(--ink-2); max-width: 34ch; }

.dlist { margin: 0; padding: 0; list-style: none; }
.dlist li {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: clamp(12px, 1.6vw, 22px);
  padding: clamp(18px, 2.1vw, 26px) 0;
  border-bottom: 1px solid var(--rule);
}
.dlist li:first-child { border-top: 1px solid var(--rule); }
.dlist b {
  font-size: var(--fs-small);
  font-weight: 400;
  color: var(--navy);
  padding-top: 2px;
}
.dlist h3 {
  margin: 0 0 6px;
  font-size: var(--fs-name);
  letter-spacing: -.014em;
  color: var(--ink);
}
.dlist p { margin: 0; font-size: var(--fs-copy); color: var(--ink-2); max-width: 58ch; }

/* ── oversized pull quote (about) ────────────────────────────────────── */
.quote {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  margin-top: clamp(70px, 9vw, 120px);
  padding-block: clamp(72px, 10vw, 132px);
  background: var(--navy-deep);
  color: #fff;
}
.quote .dotgrid {
  z-index: -1;
  top: 10%; height: 80%; width: 12%; right: 3%;
  background-image: radial-gradient(rgba(255,255,255,.24) 1px, transparent 1px);
}
.quote blockquote {
  margin: 0;
  max-width: 24ch;
  font-size: var(--fs-quote);
  line-height: 1.16;
  letter-spacing: -.028em;
}
.quote__by {
  margin: clamp(26px, 3vw, 38px) 0 0;
  font-size: var(--fs-small);
  color: rgba(255,255,255,.62);
}

/* ── staggered roster (about) ────────────────────────────────────────── */
.roster {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 3vw, 48px) clamp(18px, 2.6vw, 40px);
}
.roster > *:nth-child(3n+2) { margin-top: clamp(28px, 4vw, 64px); }
.roster > *:nth-child(3n+3) { margin-top: clamp(56px, 8vw, 128px); }
.mate__face {
  display: grid;
  place-items: center;
  aspect-ratio: 1 / 1;
  margin-bottom: clamp(14px, 1.6vw, 20px);
  background: linear-gradient(158deg, #e3e9f0, #c6d2df);
  color: var(--navy);
  font-size: clamp(30px, 3vw, 44px);
  font-weight: 500;
  transition: filter .5s var(--ease);
}
.mate:hover .mate__face { filter: brightness(1.06); }
.mate__n { margin: 0 0 4px; font-size: var(--fs-name); letter-spacing: -.012em; }
.mate__r { margin: 0; font-size: var(--fs-small); color: var(--ink-3); line-height: 1.45; }

/* ── index hero (services) — headline plus a jump list ───────────────── */
.ihero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-top: var(--hero-top);
  padding-bottom: var(--hero-bottom);
  color: #fff;
}
.ihero__bg { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.ihero::before {
  content: '';
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(108deg, rgba(7,32,58,.88) 0%, rgba(9,40,72,.64) 46%, rgba(12,52,90,.22) 78%, rgba(12,52,90,.05) 100%),
    linear-gradient(to bottom, rgba(6,26,48,.42), rgba(6,26,48,0) 30%);
}
.ihero__grid {
  display: grid;
  grid-template-columns: 1.08fr .92fr;
  gap: clamp(32px, 5vw, 82px);
  align-items: end;
}
.ihero__title {
  margin: 0 0 clamp(18px, 2.2vw, 28px);
  font-size: var(--fs-hero);
  line-height: 1.07;
  letter-spacing: -.032em;
  max-width: 15ch;
}
.ihero__copy { margin: 0; max-width: 44ch; color: rgba(255,255,255,.9); }

.jump { margin: 0; padding: 0; list-style: none; column-count: 2; column-gap: clamp(18px, 2.4vw, 34px); }
.jump li { break-inside: avoid; }
.jump a {
  display: grid;
  grid-template-columns: 26px 1fr;
  gap: 8px;
  padding: 9px 0;
  border-bottom: 1px solid rgba(255,255,255,.2);
  font-size: var(--fs-small);
  color: rgba(255,255,255,.84);
  transition: color .3s var(--ease), border-color .3s var(--ease);
}
.jump a:hover { color: #fff; border-color: rgba(255,255,255,.6); }
.jump span { color: rgba(255,255,255,.5); }

/* ── accordion (services) ────────────────────────────────────────────── */
.acc { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--rule); }
.acc__item { border-bottom: 1px solid var(--rule); }
.acc__btn {
  display: grid;
  grid-template-columns: 58px 1fr 34px;
  align-items: center;
  gap: clamp(12px, 2vw, 28px);
  width: 100%;
  padding: clamp(20px, 2.4vw, 30px) 0;
  border: 0;
  background: none;
  text-align: left;
  cursor: pointer;
  transition: opacity .3s var(--ease);
}
.acc__btn:hover { opacity: .62; }
.acc__n { font-size: var(--fs-small); color: var(--navy); }
.acc__name {
  margin: 0;
  font-size: var(--fs-title);
  font-weight: 400;
  letter-spacing: -.02em;
  color: var(--ink);
}
.acc__sign { position: relative; justify-self: end; width: 16px; height: 16px; }
.acc__sign::before,
.acc__sign::after {
  content: '';
  position: absolute; left: 50%; top: 50%;
  width: 15px; height: 1.4px;
  margin: -.7px 0 0 -7.5px;
  background: var(--navy);
  transition: transform .4s var(--ease);
}
.acc__sign::after { transform: rotate(90deg); }
.acc__item[data-open] .acc__sign::after { transform: rotate(0deg); }

.acc__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .45s var(--ease);
}
.acc__item[data-open] .acc__panel { grid-template-rows: 1fr; }
.acc__inner { overflow: hidden; }
.acc__body {
  display: grid;
  grid-template-columns: 58px 1fr;
  gap: clamp(12px, 2vw, 28px);
  padding-bottom: clamp(24px, 2.8vw, 36px);
}
.acc__body > div { grid-column: 2; max-width: 72ch; }
.acc__body p { margin: 0 0 clamp(16px, 2vw, 24px); color: var(--ink-2); }

/* ── horizontal stepper (services) ───────────────────────────────────── */
.stepper {
  position: relative;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: clamp(12px, 1.8vw, 26px);
  margin: 0; padding: 0; list-style: none;
}
.stepper::before {
  content: '';
  position: absolute; left: 0; right: 0; top: 13px;
  height: 1px;
  background: var(--rule);
}
.stp { position: relative; padding-top: 30px; }
.stp::before {
  content: '';
  position: absolute; left: 0; top: 7px;
  width: 13px; height: 13px;
  border: 1px solid var(--navy);
  border-radius: 50%;
  background: var(--paper);
  transition: background .4s var(--ease);
}
.stp:hover::before { background: var(--navy); }
.stp__n {
  position: absolute; top: 0; left: 22px;
  font-size: var(--fs-eyebrow);
  letter-spacing: .09em;
  color: var(--ink-3);
}
.stp__t {
  margin: 0 0 9px;
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: .035em;
  text-transform: uppercase;
  color: var(--navy);
  line-height: 1.36;
}
.stp p { margin: 0; font-size: var(--fs-small); color: var(--ink-2); }

/* ── spec list (services) ────────────────────────────────────────────── */
.spec { margin: 0; padding: 0; }
.spec__row {
  display: grid;
  grid-template-columns: .9fr 1.1fr 1.4fr;
  gap: clamp(14px, 2.4vw, 40px);
  align-items: baseline;
  padding: clamp(18px, 2.2vw, 28px) 0;
  border-top: 1px solid var(--rule);
}
.spec__row:last-of-type { border-bottom: 1px solid var(--rule); }
.spec__k {
  margin: 0;
  font-size: var(--fs-small);
  font-weight: 500;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--navy);
}
.spec__v { margin: 0; font-size: var(--fs-name); letter-spacing: -.014em; color: var(--ink); }
.spec__d { margin: 0; font-size: var(--fs-copy); color: var(--ink-2); }

/* ══════════════════════════════════════════════════════════════════════
   WORK PAGE
   Type-led hero, a filtered asymmetric grid, CSS browser frames for the
   web projects that have no photography, and a campaigns table.
   ══════════════════════════════════════════════════════════════════════ */

.whero {
  padding-top: var(--hero-top);
  padding-bottom: var(--hero-bottom);
  background: var(--paper);
}
.whero__title {
  margin: 0 0 clamp(22px, 2.6vw, 34px);
  font-size: var(--fs-hero);
  line-height: 1.06;
  letter-spacing: -.032em;
  max-width: 18ch;
}
.whero__row {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: clamp(24px, 4vw, 64px);
  align-items: end;
}
.whero__row p { margin: 0; color: var(--ink-2); max-width: 52ch; }
.whero__credit {
  display: flex;
  flex-direction: column;
  gap: 6px;
  justify-self: end;
  text-align: right;
}
.whero__credit span {
  font-size: var(--fs-eyebrow);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.whero__credit a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  justify-content: flex-end;
  font-size: var(--fs-copy);
  color: var(--navy);
  letter-spacing: -.014em;
}
.whero__credit svg { flex: 0 0 auto; width: 11px; height: 11px; transition: transform .35s var(--ease); }
.whero__credit a:hover svg { transform: translate(3px, -3px); }
.whero__credit a:hover { opacity: .66; }

/* client marquee */
.mq {
  margin-top: clamp(40px, 5.5vh, 72px);
  padding-block: clamp(16px, 1.8vw, 22px);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.mq__track {
  display: flex;
  width: max-content;
  gap: clamp(30px, 4vw, 60px);
  animation: mq 34s linear infinite;
}
.mq__track span {
  display: flex;
  align-items: center;
  gap: clamp(30px, 4vw, 60px);
  font-size: var(--fs-copy);
  letter-spacing: -.01em;
  color: var(--ink-2);
  white-space: nowrap;
}
.mq__track span::after { content: '·'; color: var(--ink-3); }
@keyframes mq { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .mq__track { animation: none; } }

/* filter rail */
.filters {
  position: sticky;
  top: clamp(52px, 6.4vh, 60px);
  z-index: 40;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-block: clamp(14px, 1.6vw, 20px);
  margin-bottom: clamp(24px, 3vw, 40px);
  background: var(--paper);
  border-bottom: 1px solid var(--rule-soft);
}
.filters button {
  padding: 8px 15px;
  border: 1px solid var(--rule);
  border-radius: 999px;
  background: none;
  font-size: var(--fs-small);
  color: var(--ink-2);
  cursor: pointer;
  transition: color .3s var(--ease), border-color .3s var(--ease), background .3s var(--ease);
}
.filters button:hover { border-color: var(--ink-3); color: var(--ink); }
.filters button[aria-pressed="true"] { background: var(--navy); border-color: var(--navy); color: #fff; }
.filters__count { margin-left: auto; align-self: center; font-size: var(--fs-small); color: var(--ink-3); }

/* asymmetric project grid */
.grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: clamp(22px, 3vw, 46px) clamp(18px, 2.4vw, 36px);
}
.tile { grid-column: span 3; display: flex; flex-direction: column; }
.tile--wide { grid-column: span 6; }
.tile--third { grid-column: span 2; }
.tile[hidden] { display: none; }

.tile__media {
  position: relative;
  overflow: hidden;
  margin-bottom: clamp(14px, 1.7vw, 20px);
  background: #e2e7ed;
  aspect-ratio: 4 / 3;
}
.tile--wide .tile__media { aspect-ratio: 21 / 9; }
.tile__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.tile:hover .tile__media img { transform: scale(1.035); }

.tile__cat {
  margin: 0 0 8px;
  font-size: var(--fs-eyebrow);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--navy);
}
.tile__name {
  margin: 0 0 8px;
  font-size: var(--fs-title);
  letter-spacing: -.02em;
  color: var(--ink);
}
.tile__desc { margin: 0 0 12px; font-size: var(--fs-copy); color: var(--ink-2); max-width: 56ch; }
.tile__tags {
  margin: 0 0 14px;
  font-size: var(--fs-small);
  color: var(--ink-3);
  letter-spacing: .01em;
}
.tile .arrow-link { align-self: flex-start; margin-top: auto; color: var(--navy); font-size: var(--fs-small); }

/* browser frame for web projects with no photography */
.frame {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  background: var(--navy-deep);
  color: #fff;
}
.frame__bar {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 9px 12px;
  background: rgba(255,255,255,.07);
  border-bottom: 1px solid rgba(255,255,255,.1);
}
.frame__dot { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,.28); }
.frame__url {
  margin-left: 8px;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.09);
  font-size: 10.5px;
  color: rgba(255,255,255,.7);
  letter-spacing: .01em;
}
.frame__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(16px, 2.4vw, 32px);
}
.frame__nav {
  display: flex;
  gap: clamp(12px, 1.6vw, 22px);
  margin-bottom: auto;
  font-size: var(--fs-eyebrow);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(255,255,255,.5);
}
.frame__h {
  margin: 0 0 10px;
  font-size: var(--fs-title);
  line-height: 1.08;
  letter-spacing: -.028em;
  color: #fff;
}
.frame__p {
  margin: 0;
  max-width: 42ch;
  font-size: var(--fs-small);
  line-height: 1.55;
  color: rgba(255,255,255,.66);
}
.frame--light { background: var(--paper-2); color: var(--ink); }
.frame--light .frame__bar { background: rgba(22,57,94,.05); border-bottom-color: var(--rule-soft); }
.frame--light .frame__dot { background: rgba(22,57,94,.2); }
.frame--light .frame__url { background: rgba(22,57,94,.07); color: var(--ink-3); }
.frame--light .frame__nav { color: var(--ink-3); }
.frame--light .frame__h { color: var(--ink); }
.frame--light .frame__p { color: var(--ink-2); }

.tile__more svg { width: 11px; height: 11px; }
.tile__more {
  grid-column: 1 / -1;
  padding: clamp(24px, 3vw, 40px) 0 0;
  border-top: 1px solid var(--rule);
  text-align: center;
  color: var(--ink-3);
  font-size: var(--fs-copy);
}

/* campaigns table */
.tbl { width: 100%; border-collapse: collapse; }
.tbl caption { text-align: left; padding-bottom: clamp(18px, 2.2vw, 28px); color: var(--ink-2); font-size: var(--fs-copy); }
.tbl th {
  padding: 0 0 12px;
  border-bottom: 1px solid var(--rule);
  text-align: left;
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.tbl td { padding: clamp(15px, 1.7vw, 21px) 0; border-bottom: 1px solid var(--rule-soft); vertical-align: baseline; }
.tbl tbody tr { transition: background .3s var(--ease); }
.tbl tbody tr:hover { background: rgba(22,57,94,.028); }
.tbl__acct { font-size: var(--fs-name); letter-spacing: -.014em; color: var(--ink); }
.tbl__acct a { display: inline-flex; align-items: center; gap: 8px; }
.tbl__acct a:hover { color: var(--navy); }
.tbl__acct svg { width: 10px; height: 10px; opacity: .5; }
.tbl__at { display: block; margin-top: 3px; font-size: var(--fs-small); color: var(--ink-3); }
.tbl td:not(:first-child) { font-size: var(--fs-small); color: var(--ink-2); }

/* disciplines */
.disc { margin: 0; padding: 0; }
.disc__row {
  display: grid;
  grid-template-columns: .7fr 2fr;
  gap: clamp(14px, 2.4vw, 44px);
  padding: clamp(18px, 2.2vw, 28px) 0;
  border-top: 1px solid var(--rule);
}
.disc__row:last-of-type { border-bottom: 1px solid var(--rule); }
.disc__k { margin: 0; font-size: var(--fs-title); letter-spacing: -.02em; color: var(--ink); }
.disc__v { margin: 0; font-size: var(--fs-small); color: var(--ink-2); }

/* ══════════════════════════════════════════════════════════════════════
   CASE STUDY PAGES — managem.html, wastemart.html
   These two are the same content type, so they share a kit. It is distinct
   from the home / about / services / work kits, not from each other.
   ══════════════════════════════════════════════════════════════════════ */

.chero {
  position: relative;
  isolation: isolate;
  overflow: clip;
  padding-top: var(--hero-top);
  padding-bottom: var(--hero-bottom);
  background: var(--navy-deep);
  color: #fff;
  text-align: center;
}
.chero .dotgrid {
  z-index: -1;
  top: 12%; height: 76%; width: 12%;
  background-image: radial-gradient(rgba(255,255,255,.22) 1px, transparent 1px);
}
.chero .dotgrid--l { left: 3%; }
.chero .dotgrid--r { right: 3%; }
.chero__kicker {
  margin: 0 0 clamp(16px, 2vw, 24px);
  font-size: var(--fs-eyebrow);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255,255,255,.66);
}
.chero__title {
  margin: 0 auto clamp(20px, 2.4vw, 30px);
  max-width: 17ch;
  font-size: var(--fs-hero);
  line-height: 1.07;
  letter-spacing: -.032em;
}
.chero__copy {
  margin: 0 auto clamp(30px, 4vw, 46px);
  max-width: 56ch;
  color: rgba(255,255,255,.86);
  font-size: var(--fs-copy);
}
.chero .arrow-link { color: #fff; }

.chero__meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(20px, 3.4vw, 64px);
  margin-top: clamp(40px, 6vh, 78px);
  padding-top: clamp(22px, 2.6vw, 32px);
  border-top: 1px solid rgba(255,255,255,.2);
}
.chero__meta div { text-align: center; }
.chero__meta dt {
  margin: 0 0 6px;
  font-size: var(--fs-eyebrow);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255,255,255,.56);
}
.chero__meta dd { margin: 0; font-size: var(--fs-copy); color: #fff; }

/* the hero image straddles the boundary into the page below */
.cshot { margin-top: clamp(-70px, -6vw, -40px); position: relative; z-index: 1; }
.cshot img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  box-shadow: 0 40px 70px -46px rgba(8, 18, 40, .55);
}

/* chapter blocks */
.chap { padding-top: clamp(64px, 8.5vw, 112px); }
.chap__head {
  display: grid;
  grid-template-columns: .82fr 1.18fr;
  gap: clamp(24px, 4.5vw, 72px);
  align-items: start;
}
.chap__label {
  margin: 0;
  font-size: var(--fs-eyebrow);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--navy);
  padding-top: 8px;
  border-top: 1px solid var(--navy);
  display: inline-block;
}
.chap__title {
  margin: 0 0 clamp(16px, 2vw, 24px);
  font-size: var(--fs-display);
  line-height: 1.12;
  letter-spacing: -.026em;
  max-width: 20ch;
}
.chap__body { margin: 0; color: var(--ink-2); max-width: 62ch; }
.chap__note {
  margin: clamp(18px, 2.2vw, 26px) 0 0;
  font-size: var(--fs-small);
  color: var(--ink-3);
  font-style: italic;
}

/* numbered module grid */
.mods {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  margin: clamp(32px, 4vw, 54px) 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--rule-soft);
  border-left: 1px solid var(--rule-soft);
}
.mod {
  padding: var(--card-pad);
  border-right: 1px solid var(--rule-soft);
  border-bottom: 1px solid var(--rule-soft);
  transition: background .4s var(--ease);
}
.mod:hover { background: var(--paper-2); }
.mod__n {
  display: block;
  margin-bottom: clamp(14px, 1.6vw, 20px);
  font-size: var(--fs-eyebrow);
  letter-spacing: .08em;
  color: var(--ink-3);
}
.mod__t {
  margin: 0 0 8px;
  font-size: var(--fs-copy);
  font-weight: 500;
  letter-spacing: -.008em;
  color: var(--navy);
}
.mod p { margin: 0; font-size: var(--fs-small); color: var(--ink-2); }

/* before → after shifts */
.shift { margin: clamp(30px, 4vw, 52px) 0 0; padding: 0; list-style: none; }
.shift li {
  display: grid;
  grid-template-columns: 1fr 40px 1fr;
  align-items: center;
  gap: clamp(12px, 2vw, 30px);
  padding: clamp(16px, 2vw, 24px) 0;
  border-top: 1px solid var(--rule);
}
.shift li:last-child { border-bottom: 1px solid var(--rule); }
.shift b {
  font-weight: 400;
  font-size: var(--fs-copy);
  letter-spacing: -.014em;
  color: var(--ink-3);
  text-decoration: line-through;
  text-decoration-color: rgba(133,134,138,.5);
}
.shift span { justify-self: center; color: var(--ink-3); font-size: 14px; }
.shift em {
  font-style: normal;
  font-size: var(--fs-copy);
  letter-spacing: -.014em;
  color: var(--navy);
}

/* closing statement band */
.endnote {
  margin-top: clamp(70px, 9vw, 120px);
  padding-block: clamp(66px, 9vw, 118px);
  background: var(--navy-deep);
  color: #fff;
  position: relative;
  isolation: isolate;
  overflow: clip;
}
.endnote .dotgrid {
  z-index: -1; right: 4%; top: 14%; height: 72%; width: 11%;
  background-image: radial-gradient(rgba(255,255,255,.2) 1px, transparent 1px);
}
.endnote h2 {
  margin: 0 0 clamp(20px, 2.4vw, 30px);
  max-width: 16ch;
  font-size: var(--fs-display);
  line-height: 1.08;
  letter-spacing: -.03em;
}
.endnote p { margin: 0 0 clamp(30px, 3.6vw, 44px); max-width: 58ch; color: rgba(255,255,255,.84); }
.endnote .arrow-link { color: #fff; }

/* ══════════════════════════════════════════════════════════════════════
   LEGAL PAGE — privacy.html
   ══════════════════════════════════════════════════════════════════════ */

.legal { padding-top: var(--hero-top); padding-bottom: clamp(70px, 9vw, 118px); }
.legal__head { padding-bottom: clamp(30px, 4vw, 52px); border-bottom: 1px solid var(--rule); }
.legal__title {
  margin: 0;
  font-size: var(--fs-hero);
  line-height: 1.1;
  letter-spacing: -.028em;
  max-width: 18ch;
}
.legal__note {
  display: block;
  margin: clamp(20px, 2.4vw, 30px) 0 0;
  padding: 14px 18px;
  border-left: 3px solid var(--navy);
  background: var(--paper-2);
  font-size: var(--fs-small);
  color: var(--ink-2);
}
.legal__grid {
  display: grid;
  grid-template-columns: .62fr 1.38fr;
  gap: clamp(28px, 5vw, 80px);
  padding-top: clamp(32px, 4vw, 54px);
}
.legal__toc { position: sticky; top: clamp(92px, 12vh, 122px); align-self: start; }
.legal__toc p {
  margin: 0 0 14px;
  font-size: var(--fs-eyebrow);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.legal__toc ol { margin: 0; padding: 0; list-style: none; counter-reset: toc; }
.legal__toc li { counter-increment: toc; }
.legal__toc a {
  display: grid;
  grid-template-columns: 26px 1fr;
  gap: 6px;
  padding: 7px 0;
  font-size: var(--fs-small);
  color: var(--ink-2);
  transition: color .3s var(--ease);
}
.legal__toc a::before { content: counter(toc, decimal-leading-zero); color: var(--ink-3); }
.legal__toc a:hover { color: var(--navy); }

.legal__body h2 {
  margin: clamp(30px, 3.6vw, 46px) 0 12px;
  font-size: var(--fs-title);
  letter-spacing: -.018em;
  color: var(--ink);
}
.legal__body section:first-child h2 { margin-top: 0; }
.legal__body p { margin: 0 0 14px; color: var(--ink-2); max-width: 68ch; }
.legal__body a { color: var(--navy); text-decoration: underline; text-underline-offset: 3px; }
.legal__foot {
  margin-top: clamp(34px, 4vw, 54px);
  padding-top: clamp(20px, 2.4vw, 30px);
  border-top: 1px solid var(--rule);
  font-size: var(--fs-small);
  color: var(--ink-3);
  font-style: normal;
}

/* ══════════════════════════════════════════════════════════════════════
   404
   ══════════════════════════════════════════════════════════════════════ */

.oops {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  min-height: 78vh;
  padding-top: var(--hero-top);
  padding-bottom: var(--hero-bottom);
}
.oops__code {
  margin: 0 0 clamp(18px, 2.2vw, 28px);
  font-size: var(--fs-eyebrow);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--navy);
}
.oops__title {
  margin: 0 0 clamp(20px, 2.4vw, 30px);
  font-size: var(--fs-hero);
  line-height: 1.02;
  letter-spacing: -.035em;
  max-width: 14ch;
}
.oops p { margin: 0 0 clamp(30px, 3.6vw, 42px); max-width: 48ch; color: var(--ink-2); }
.oops__links { display: flex; flex-wrap: wrap; gap: clamp(16px, 2.4vw, 36px); }

/* ══════════════════════════════════════════════════════════════════════
   CONTACT PAGE
   Working layout: the enquiry form sits beside the details rather than
   below a hero, so the page opens on the thing it exists to do.
   ══════════════════════════════════════════════════════════════════════ */

.ctc { padding-top: var(--hero-top); padding-bottom: clamp(66px, 9vw, 112px); }
.ctc__grid {
  display: grid;
  grid-template-columns: .88fr 1.12fr;
  gap: clamp(32px, 5vw, 84px);
  align-items: start;
}
.ctc__title {
  margin: 0 0 clamp(18px, 2.2vw, 26px);
  font-size: var(--fs-hero);
  line-height: 1.1;
  letter-spacing: -.028em;
  max-width: 14ch;
}
.ctc__lede { margin: 0 0 clamp(32px, 4vw, 48px); color: var(--ink-2); max-width: 42ch; }

.ctc__block { padding-top: var(--card-pad); border-top: 1px solid var(--rule); }
.ctc__block + .ctc__block { margin-top: clamp(20px, 2.4vw, 30px); }
.ctc__block h2 {
  margin: 0 0 12px;
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.ctc__block p, .ctc__block address {
  margin: 0;
  font-style: normal;
  font-size: var(--fs-copy);
  line-height: 1.6;
  color: var(--ink);
}
.ctc__block a { color: var(--navy); }
.ctc__block a:hover { opacity: .66; }
.ctc__block span { display: block; margin-top: 4px; font-size: var(--fs-small); color: var(--ink-3); }

/* form */
.form {
  padding: clamp(24px, 3vw, 40px);
  border: 1px solid var(--rule-soft);
  background: var(--paper-2);
}
.form__rows { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(16px, 1.9vw, 24px); }
.field { display: flex; flex-direction: column; gap: 7px; }
.field--wide { grid-column: 1 / -1; }
.field label {
  font-size: var(--fs-small);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.field label em { font-style: normal; color: var(--navy); }
.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--rule);
  border-radius: 0;
  background: #fff;
  font: inherit;
  font-size: var(--fs-copy);
  color: var(--ink);
  transition: border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.field textarea { min-height: 140px; resize: vertical; }
.field select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6' fill='none' stroke='%231f2557' stroke-width='1.4'%3E%3Cpath d='M1 1.5 5 5 9 1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 10px 6px;
  padding-right: 36px;
}
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--navy);
  box-shadow: 0 0 0 3px rgba(22,57,94,.12);
}
.field input:invalid:not(:placeholder-shown),
.field textarea:invalid:not(:placeholder-shown) { border-color: #b4453a; }

.consent {
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: 11px;
  align-items: start;
  margin-top: clamp(20px, 2.4vw, 28px);
  padding-top: clamp(18px, 2.2vw, 26px);
  border-top: 1px solid var(--rule-soft);
}
.consent input { width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--navy); }
.consent label { font-size: var(--fs-small); line-height: 1.55; color: var(--ink-2); }
.consent a { color: var(--navy); text-decoration: underline; text-underline-offset: 3px; }

.form__send {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: clamp(22px, 2.6vw, 30px);
  padding: 14px 28px;
  border: 0;
  border-radius: 999px;
  background: var(--navy-deep);
  color: #fff;
  font: inherit;
  font-size: var(--fs-copy);
  cursor: pointer;
  transition: background .35s var(--ease), transform .35s var(--ease);
}
.form__send svg { width: 11px; height: 11px; transition: transform .35s var(--ease); }
.form__send:hover { background: #061a30; transform: translateY(-1px); }
.form__send:hover svg { transform: translate(3px, -3px); }
.form__note { margin: 14px 0 0; font-size: var(--fs-small); color: var(--ink-3); max-width: 54ch; }

/* what happens next */
.next {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--rule-soft);
  border-left: 1px solid var(--rule-soft);
}
.next li {
  padding: var(--card-pad);
  border-right: 1px solid var(--rule-soft);
  border-bottom: 1px solid var(--rule-soft);
}
.next__n {
  display: block;
  margin-bottom: clamp(14px, 1.6vw, 20px);
  font-size: var(--fs-eyebrow);
  letter-spacing: .08em;
  color: var(--ink-3);
}
.next__t {
  margin: 0 0 8px;
  font-size: var(--fs-copy);
  font-weight: 500;
  color: var(--navy);
}
.next li p { margin: 0; font-size: var(--fs-small); color: var(--ink-2); }

/* ══════════════════════════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════════════════════════ */

@media (max-width: 1080px) {
  .cards { grid-template-columns: repeat(2, 1fr); }
  .foot__grid { grid-template-columns: 1fr 1fr; }
  .foot__brand { grid-column: 1 / -1; }
  .cta .dotgrid { display: none; }
}

@media (max-width: 900px) {
  .nav__burger { display: block; }
  .nav__drawer {
    display: block;
    position: fixed;
    inset: 0 0 auto;
    max-height: 100vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: clamp(86px, 13vh, 112px) var(--gutter) 34px;
    background: var(--paper);
    box-shadow: 0 20px 40px -28px rgba(0,0,0,.4);
    transform: translateY(-102%);
    transition: transform .55s var(--ease);
    visibility: hidden;
  }
  .nav.is-open .nav__drawer { transform: none; visibility: visible; }

  .nav__links {
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    padding: 0;
  }
  /* the open panel is light, so the wordmark and burger must flip to ink */
  .nav.is-open .nav__logo { color: var(--navy); }
  .nav.is-open .nav__burger span { background: var(--ink); }
  .nav__links > li > a { color: var(--ink); font-size: 19px; padding-block: 9px; }
  .nav__links > li > a::after { display: none; }

  /* Products becomes an in-panel accordion on small screens */
  .nav__item--mega { position: static; width: 100%; }
  .nav__trigger {
    width: 100%;
    justify-content: space-between;
    padding-block: 9px;
    font-size: 19px;
    color: var(--ink);
  }
  .nav__trigger::after { display: none; }

  .mega {
    position: static;
    display: none;
    opacity: 1;
    visibility: visible;
    transform: none;
    background: none;
    border-top: 0;
    box-shadow: none;
    transition: none;
  }
  .mega.is-open { display: block; }
  .mega__in { padding: 14px 0 18px; }
  .mega__head { display: none; }
  .mega__grid { grid-template-columns: 1fr; gap: 20px; }

  .prod { flex-direction: row; gap: 14px; align-items: flex-start; }
  .prod__media { flex: 0 0 96px; margin-bottom: 0; }
  .prod__body { flex: 1 1 auto; min-width: 0; }
  .prod__name { font-size: 16px; margin-bottom: 6px; }
  .prod__desc { margin-bottom: 12px; font-size: 13px; line-height: 1.5; }
  .prod__cta { padding: 8px 15px; font-size: 12.5px; }

  .about__grid,
  .values__head,
  .work__head { grid-template-columns: 1fr; }
  .about__title, .values__head .display, .lead__title { max-width: 22ch; }

  .row { grid-template-columns: 44px 1fr; row-gap: 6px; }
  .row__body { grid-column: 2; }

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

  .ctc__grid { grid-template-columns: 1fr; }
  .ctc__title { max-width: 20ch; }
  .next { grid-template-columns: 1fr; }

  .chap__head { grid-template-columns: 1fr; gap: 14px; }
  .chap__title { max-width: 22ch; }
  .mods { grid-template-columns: repeat(2, 1fr); }
  .legal__grid { grid-template-columns: 1fr; }
  .legal__toc { position: static; }

  .whero__row { grid-template-columns: 1fr; }
  .whero__credit { justify-self: start; text-align: left; }
  .grid { grid-template-columns: repeat(4, 1fr); }
  .tile, .tile--third { grid-column: span 2; }
  .tile--wide { grid-column: span 4; }
  .disc__row { grid-template-columns: 1fr; gap: 6px; }

  .shero { grid-template-columns: 1fr; min-height: 0; }
  .shero__type { max-width: none; margin: 0; padding: clamp(108px,14vh,150px) var(--gutter) clamp(36px,5vh,54px); }
  .shero__title { max-width: 20ch; }
  .shero__panel { min-height: 46vh; }

  .tl { grid-template-columns: repeat(2, 1fr); }
  .stik { grid-template-columns: 1fr; }
  .stik__aside { position: static; }
  .stik__aside .display, .quote blockquote { max-width: 20ch; }

  .roster { grid-template-columns: repeat(2, 1fr); }
  .roster > *:nth-child(3n+2), .roster > *:nth-child(3n+3) { margin-top: 0; }
  .roster > *:nth-child(2n) { margin-top: clamp(24px, 4vw, 48px); }

  .ihero__grid { grid-template-columns: 1fr; align-items: start; }
  .stepper { grid-template-columns: repeat(3, 1fr); row-gap: clamp(26px,4vw,42px); }
  .stepper::before { display: none; }
  .spec__row { grid-template-columns: 1fr; gap: 8px; }
  .sec__head { grid-template-columns: 1fr; }
  .sec__head .display { max-width: 22ch; }
  .steps { grid-template-columns: repeat(2, 1fr); }
  .people { grid-template-columns: repeat(2, 1fr); }
  .person:nth-child(3n) { border-right: 1px solid var(--rule-soft); }
  .person:nth-child(2n) { border-right: 0; }
  .groups { grid-template-columns: 1fr; }
  .pair { grid-template-columns: 1fr; gap: 6px; }
  .pair__arrow { display: none; }
  .lead__cols { grid-template-columns: 1fr; }
  .hero__partners { align-items: flex-start; text-align: left; }
  .hero__logos { justify-content: flex-start; }
}

@media (max-width: 620px) {
  .stats { grid-template-columns: 1fr 1fr; row-gap: 30px; }
  .cards { grid-template-columns: 1fr; }
  .form { padding: 20px 16px; }
  .form__rows { grid-template-columns: 1fr; }
  .mods { grid-template-columns: 1fr; }
  .shift li { grid-template-columns: 1fr; gap: 4px; }
  .shift span { justify-self: start; }
  .chero__meta { gap: 18px 26px; }
  .cshot { margin-top: -24px; }
  .grid { grid-template-columns: 1fr; }
  .tile, .tile--third, .tile--wide { grid-column: span 1; }
  .tile--wide .tile__media { aspect-ratio: 4 / 3; }
  .filters__count { display: none; }
  .tbl thead { display: none; }
  .tbl tr { display: grid; gap: 2px; padding-block: 14px; border-bottom: 1px solid var(--rule-soft); }
  .tbl td { padding: 0; border: 0; }
  .tl { grid-template-columns: 1fr; }
  .tl::before { display: none; }
  .tl__item { padding-top: 0; padding-left: 24px; }
  .tl__item::before { top: 8px; }
  .roster { grid-template-columns: 1fr; }
  .roster > * { margin-top: 0 !important; }
  .jump { column-count: 1; }
  .stepper { grid-template-columns: 1fr; }
  /* keep the facts a compact strip rather than a stack that swallows the image */
  .shero__facts { grid-template-columns: repeat(3, 1fr); }
  .shero__fact { padding: 12px 10px; }
  .shero__fact dt { font-size: 9.5px; letter-spacing: .07em; }
  .shero__fact dd { font-size: 11.5px; line-height: 1.3; }
  .shero__panel { min-height: 52vh; }
  .acc__btn { grid-template-columns: 34px 1fr 24px; }
  .acc__body { grid-template-columns: 34px 1fr; }
  .steps { grid-template-columns: 1fr; }
  .people { grid-template-columns: 1fr; }
  .person { border-right: 0 !important; }
  .hero__meta { gap: 18px 28px; }
  .card__icon { margin-bottom: 20px; }
  .foot__grid { grid-template-columns: 1fr; }
  .foot__bar { flex-direction: column; align-items: flex-start; }
  .cta__form { flex-wrap: wrap; border-radius: 14px; }
  .cta__form input { flex-basis: 100%; text-align: center; }
  .cta__form button { flex: 1 1 auto; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
  [data-reveal] { opacity: 1; transform: none; }
}

/* ══════════════════════════════════════════════════════════════════════
   ACCESSIBILITY ADDITIONS
   The only CSS added under the no-visual-change constraint: a focus-visible
   ring in the existing brand accent, a visually-hidden utility, and a
   reduced-motion block. No colours, type, spacing or components changed.
   ══════════════════════════════════════════════════════════════════════ */

/* WCAG 2.2 SC 2.4.11 (Focus Not Obscured). The header is fixed, so a fragment
   jump — or the skip link — otherwise lands its target underneath it; on the
   Industries rows the heading ended up above the fold entirely. This changes
   only where the browser stops scrolling. Nothing on the page moves. */
html { scroll-padding-top: 104px; }

/* visually hidden, still announced */
.vh {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Keyboard focus ring, drawn in the existing --navy accent. Outline only, so
   it adds nothing to layout and never shows for pointer users. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--navy);
  outline-offset: 3px;
  border-radius: 2px;
}
.hero a:focus-visible,
.lead a:focus-visible,
.quote a:focus-visible,
.cta a:focus-visible,
.cta button:focus-visible,
.endnote a:focus-visible,
.chero a:focus-visible,
.ihero a:focus-visible {
  outline-color: #fff;
}

@media (prefers-reduced-motion: reduce) {
  .mq__track { animation: none !important; }
  .tile__media img,
  .story__img,
  .prod__media img { transition: none !important; }
}

/* ══════════════════════════════════════════════════════════════════════
   SECTION RHYTHM AND BANDS

   Sections used to carry padding on their top edge only, and every one of
   them was transparent — so a page read as one unbroken white sheet with
   its blocks pressed together. Padding is symmetric now, and consecutive
   sections alternate across four light grounds, with one dark band and one
   full-bleed photographic strip breaking the run on the longer pages.
   ══════════════════════════════════════════════════════════════════════ */

:root {
  --warm: var(--paper-2);   /* retired: a warm ground has no place beside the sky */
}

/* ── rhythm: space on both edges, not just the top ───────────────────── */
.sec,
.about,
.what,
.values,
.work,
.chap { padding-top: var(--sec-y); padding-bottom: var(--sec-y); }

.sec--last { padding-bottom: var(--sec-y); }
.sec--tight { padding-bottom: calc(var(--sec-y) * .62); }

/* the first band under a hero needs a little less, the hero already breathes */
.hero + .band,
.shero + .band,
.ihero + .band,
.whero + .band,
.chero + .band { padding-top: calc(var(--sec-y) * .86); }

/* ── grounds ─────────────────────────────────────────────────────────── */
.band { position: relative; }
.band-tint { background-color: var(--paper-2); }
.band-wash { background-color: var(--wash); }
.band-warm { background-color: var(--warm); }

/* a hairline wherever two sections share a ground, so the seam still reads */
.band-rule { border-top: 1px solid var(--rule-soft); }


/* ── one dark band per long page, so the scroll is not all light ─────── */
.band-ink { background: var(--navy-deep); color: #fff; }
.band-ink .eyebrow { color: rgba(255,255,255,.72); }
.band-ink .display,
.band-ink h2,
.band-ink h3 { color: #fff; }
.band-ink p,
.band-ink .lede { color: rgba(255,255,255,.82); }
.band-ink .stat { border-color: rgba(255,255,255,.18); }
.band-ink .stat__n { color: #fff; }
.band-ink .stat__l { color: rgba(255,255,255,.72); }
.band-ink a { color: #fff; }
.band-ink .dotgrid {
  background-image: radial-gradient(rgba(255,255,255,.18) 1px, transparent 1px);
}

/* ── a full-bleed photographic strip, to break a long light run ──────── */
.strip {
  position: relative;
  isolation: isolate;
  overflow: clip;
  display: grid;
  align-items: end;
  min-height: clamp(280px, 32vw, 440px);
  background: var(--navy-deep);
}
.strip__img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.strip::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(10,16,40,.22) 0%, rgba(10,16,40,.44) 46%, rgba(10,16,40,.78) 100%);
}
.strip .shell { padding-block: clamp(34px, 4.4vw, 58px); }
.strip__k {
  margin: 0;
  max-width: 24ch;
  color: #fff;
  font-size: clamp(22px, 2.4vw, 36px);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -.025em;
}
.strip__sub {
  margin: clamp(10px, 1.2vw, 16px) 0 0;
  max-width: 50ch;
  color: rgba(255,255,255,.82);
  font-size: var(--fs-copy);
}
.strip a:focus-visible { outline-color: #fff; }

/* ══════════════════════════════════════════════════════════════════════
   WHY IT MATTERS — the ledger
   The band was a flat navy rectangle with three figures floating in it. It
   keeps the same colours and the same three figures; what is new is depth
   (one low-contrast glow, the dot grid inverted) and a hairline cell
   structure that lets the numbers sit on something.

   Everything here is scoped to .impact / .ledger. .stat and .stats are used
   only by this page, but the scope keeps the intent obvious.
   ══════════════════════════════════════════════════════════════════════ */

.impact { position: relative; overflow: hidden; }

/* One wide, very low-contrast glow. No new hue — it is the brand navy lifted. */
.impact__glow {
  position: absolute;
  top: -40%;
  right: -12%;
  width: min(880px, 70vw);
  aspect-ratio: 1;
  pointer-events: none;
  background: radial-gradient(circle, rgba(42,92,138,.20), rgba(42,92,138,0) 68%);
}

/* the dot grid the light bands already carry, inverted for the dark one */
.dotgrid--light { background-image: radial-gradient(rgba(255,255,255,.13) 1px, transparent 1px); }
.impact .dotgrid {
  left: 0;
  bottom: -30px;
  width: 44%;
  height: 290px;
  opacity: .9;
  -webkit-mask-image: linear-gradient(55deg, #000, transparent 74%);
          mask-image: linear-gradient(55deg, #000, transparent 74%);
}

.impact .shell { position: relative; }

.ledger {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin: clamp(38px, 4.6vw, 64px) 0 0;
  padding: 0;
  list-style: none;
}

.ledger__item {
  position: relative;
  padding: clamp(22px, 2.4vw, 32px) clamp(20px, 2.4vw, 34px) clamp(22px, 2.6vw, 34px);
  transition: background .5s var(--ease);
}
/* the first figure lines up with the heading above it, the last with the edge */
.ledger__item:first-child { padding-left: 0; }
.ledger__item:last-child  { padding-right: 0; }
.ledger__item + .ledger__item { border-left: 1px solid rgba(255,255,255,.15); }
.ledger__item:hover { background: rgba(255,255,255,.035); }

/* the rule over each cell, and the accent that draws along it */
.ledger__rule {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: rgba(255,255,255,.2);
}
.ledger__rule::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 0;
  background: #fff;
  transition: width 1.1s var(--ease);
  transition-delay: calc(var(--d, 0ms) + 280ms);
}
/* .is-in is what the reveal sweep adds; without JS the accent simply never
   draws and the plain hairline is what remains, which is the point of it. */
.ledger__item.is-in .ledger__rule::after { width: 34%; }
.ledger__item:hover .ledger__rule::after { width: 100%; transition-delay: 0ms; }

.ledger__i {
  display: block;
  margin-bottom: clamp(22px, 3vw, 40px);
  font-size: var(--fs-eyebrow);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(255,255,255,.5);
}

/* the figures carry the section now, so they are allowed to be big */
.ledger .stat__n {
  font-size: clamp(46px, 5.6vw, 88px);
  letter-spacing: -.042em;
  color: #fff;
}
.ledger .stat__l {
  margin-top: clamp(12px, 1.5vw, 18px);
  max-width: 21ch;
  color: rgba(255,255,255,.76);
}

/* ══════════════════════════════════════════════════════════════════════
   WHAT WE DO — the index
   Four rows that were a number, a small uppercase name and a paragraph, with
   two thirds of every row empty. The content is unchanged; the numeral now
   carries the left column at display size, the name is a title rather than a
   label, and each rule draws a navy tick on reveal that runs the full row on
   hover.

   Scoped to .rows--svc: industries.html uses .rows/.row too and is untouched.
   ══════════════════════════════════════════════════════════════════════ */

.rows--svc .row {
  position: relative;
  /* numeral · name and copy · capabilities. The two-column version left the
     right third of every row empty, which is what the old layout did too. */
  grid-template-columns: clamp(78px, 8.6vw, 148px) minmax(0, 1.08fr) minmax(0, 1fr);
  gap: clamp(18px, 3vw, 54px);
  align-items: start;
  padding: clamp(30px, 3.6vw, 52px) 0;
  transition: background .5s var(--ease);
}
.rows--svc .row:hover { background: rgba(255,255,255,.5); }

/* the navy tick under each rule: a short mark on reveal, the full width on hover */
.rows--svc .row::after {
  content: '';
  position: absolute;
  top: -1px;
  left: 0;
  width: 0;
  height: 1px;
  background: var(--navy);
  transition: width 1s var(--ease);
  transition-delay: calc(var(--d, 0ms) + 220ms);
}
.rows--svc .row.is-in::after { width: clamp(54px, 7vw, 116px); }
.rows--svc .row:hover::after { width: 100%; transition-delay: 0ms; }

/* An outline numeral that fills on hover. text-stroke is not universal, so the
   solid low-opacity colour is the base and the outline is the enhancement —
   otherwise an unsupporting browser would paint it transparent on transparent. */
.rows--svc .row__n {
  font-size: clamp(38px, 5vw, 84px);
  line-height: .82;
  font-weight: 300;
  letter-spacing: -.04em;
  color: rgba(22,57,94,.55);
  transition: color .5s var(--ease);
}
@supports (-webkit-text-stroke: 1px #000) {
  .rows--svc .row__n {
    color: transparent;
    -webkit-text-stroke: 1px rgba(22,57,94,.55);
    transition: color .5s var(--ease), -webkit-text-stroke-color .5s var(--ease);
  }
  .rows--svc .row:hover .row__n { -webkit-text-stroke-color: transparent; }
}
.rows--svc .row:hover .row__n { color: var(--navy); }

/* the name was a 13px uppercase label doing a title's job */
.rows--svc .row__name {
  margin: 0 0 clamp(10px, 1.3vw, 16px);
  font-size: var(--fs-title);
  font-weight: 500;
  letter-spacing: -.018em;
  text-transform: none;
  line-height: 1.22;
  color: var(--ink);
}
.rows--svc .row__body p { margin: 0; max-width: 62ch; }

/* In its own column the capability list can be exactly that — a ruled list,
   rather than four grey boxes that read as disabled buttons. */
.rows--svc .chips {
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  padding-top: 3px;
}
.rows--svc .chips li {
  padding: clamp(8px, 1vw, 11px) 0;
  background: transparent;
  border-top: 1px solid var(--rule);
  color: var(--ink-2);
  white-space: normal;
  transition: border-color .45s var(--ease), color .45s var(--ease);
}
.rows--svc .row:hover .chips li { border-color: #c9d1db; color: var(--ink); }

@media (max-width: 900px) {
  /* the ledger stacks, so the cell divider has to become a rule above */
  .ledger { grid-template-columns: 1fr; }
  .ledger__item { padding: clamp(18px,3vw,24px) 0 clamp(22px,3.4vw,30px); }
  .ledger__item + .ledger__item { border-left: 0; }
  .ledger__i { margin-bottom: clamp(14px,2.4vw,20px); }
  .ledger .stat__l { max-width: 32ch; }

  /* .row drops to 44px 1fr at this width, which the display numeral overflows.
     The capability list comes back under the copy, and back to wrapped chips —
     a ruled list reads as a column, and there is no column left to read. */
  .rows--svc .row { grid-template-columns: clamp(52px,11vw,72px) minmax(0,1fr); row-gap: clamp(14px,2.4vw,20px); }
  .rows--svc .row__body,
  .rows--svc .chips { grid-column: 2; }
  .rows--svc .row__n { font-size: clamp(30px,7vw,48px); }
  .rows--svc .chips { flex-direction: row; flex-wrap: wrap; gap: 8px; padding-top: 0; }
  .rows--svc .chips li { padding: 7px 13px; border: 1px solid var(--rule); white-space: nowrap; }
}

/* ══════════════════════════════════════════════════════════════════════
   SERVICES ACCORDION — the homepage index language
   The nine disciplines keep their accordion, because nine open rows is a
   very long page and one-at-a-time keeps the list scannable. What changes
   is the dress: the same display-size outline numeral, title weight, navy
   tick and ruled capability list as .rows--svc on the home page.

   Scoped to .acc, which only services.html carries, and whose nine .chips
   lists are the only ones on that page.
   ══════════════════════════════════════════════════════════════════════ */

.acc__item { position: relative; transition: background .5s var(--ease); }
.acc__item:hover { background: rgba(255,255,255,.5); }

/* the navy tick: a short mark on reveal, the full rule when open or hovered */
.acc__item::after {
  content: '';
  position: absolute;
  top: -1px;
  left: 0;
  width: 0;
  height: 1px;
  background: var(--navy);
  transition: width 1s var(--ease);
  transition-delay: calc(var(--d, 0ms) + 220ms);
}
.acc__item.is-in::after { width: clamp(54px, 7vw, 116px); }
.acc__item:hover::after,
.acc__item[data-open]::after { width: 100%; transition-delay: 0ms; }

.acc__btn {
  grid-template-columns: clamp(78px, 8.6vw, 148px) 1fr 34px;
  gap: clamp(18px, 3vw, 54px);
  padding: clamp(24px, 2.8vw, 38px) 0;
}
.acc__btn:hover { opacity: 1; }   /* the row wash is the hover state now */

/* Same outline numeral as the home page, built the same way round: the solid
   colour is the base and the stroke is the enhancement, so a browser without
   -webkit-text-stroke paints a visible numeral rather than nothing. */
.acc__n {
  font-size: clamp(38px, 5vw, 84px);
  line-height: .82;
  font-weight: 300;
  letter-spacing: -.04em;
  color: rgba(22,57,94,.55);
  transition: color .5s var(--ease);
}
@supports (-webkit-text-stroke: 1px #000) {
  .acc__n {
    color: transparent;
    -webkit-text-stroke: 1px rgba(22,57,94,.55);
    transition: color .5s var(--ease), -webkit-text-stroke-color .5s var(--ease);
  }
  .acc__item:hover .acc__n,
  .acc__item[data-open] .acc__n { -webkit-text-stroke-color: transparent; }
}
.acc__item:hover .acc__n,
.acc__item[data-open] .acc__n { color: var(--navy); }

.acc__name { font-weight: 500; letter-spacing: -.018em; line-height: 1.22; }

/* the panel lines its copy up under the title, capabilities in a third column */
.acc__body {
  grid-template-columns: clamp(78px, 8.6vw, 148px) minmax(0, 1.08fr) minmax(0, 1fr);
  gap: clamp(18px, 3vw, 54px);
  padding-bottom: clamp(28px, 3.2vw, 44px);
}
.acc__body > div { grid-column: 2; max-width: 62ch; }
.acc__body > .chips { grid-column: 3; }
.acc__body p { margin: 0; }

.acc .chips { flex-direction: column; align-items: stretch; gap: 0; padding-top: 3px; }
.acc .chips li {
  padding: clamp(8px, 1vw, 11px) 0;
  background: transparent;
  border-top: 1px solid var(--rule);
  color: var(--ink-2);
  white-space: normal;
  transition: border-color .45s var(--ease), color .45s var(--ease);
}
.acc__item:hover .chips li { border-color: #c9d1db; color: var(--ink); }

@media (max-width: 900px) {
  .acc__btn { grid-template-columns: clamp(52px,11vw,72px) 1fr 28px; gap: clamp(14px,2.4vw,22px); }
  .acc__n { font-size: clamp(30px,7vw,48px); }
  /* the third column has nowhere to go, so capabilities sit under the copy */
  .acc__body { grid-template-columns: clamp(52px,11vw,72px) minmax(0,1fr); gap: clamp(14px,2.4vw,22px); row-gap: clamp(14px,2.4vw,20px); }
  .acc__body > div,
  .acc__body > .chips { grid-column: 2; }
  .acc .chips { flex-direction: row; flex-wrap: wrap; gap: 8px; padding-top: 0; }
  .acc .chips li { padding: 7px 13px; border: 1px solid var(--rule); white-space: nowrap; }
}

@media (max-width: 620px) {
  .acc__btn { grid-template-columns: clamp(40px,13vw,54px) 1fr 24px; }
  .acc__body { grid-template-columns: clamp(40px,13vw,54px) minmax(0,1fr); }
  .acc__n { font-size: clamp(26px,8vw,38px); }
}

/* ══════════════════════════════════════════════════════════════════════
   GEMIS STORIES — Phase 1 globals
   ══════════════════════════════════════════════════════════════════════ */

/* Solutions carries four cards where Products carried three. */
.mega__grid--4 { grid-template-columns: repeat(4, 1fr); gap: clamp(16px, 1.8vw, 28px); }
.mega__grid--4 .prod__name { font-size: var(--fs-name); }
.mega__grid--4 .prod__desc { font-size: var(--fs-small); }

@media (max-width: 1080px) {
  .mega__grid--4 { grid-template-columns: repeat(2, 1fr); }
}

/* ── unconfirmed facts ────────────────────────────────────────────────
   Every value that is not yet confirmed is wrapped in .tbc so a reviewer can
   see all of them at a glance, and scripts/check-tbc.mjs can count them. The
   marker is deliberately visible: this styling is what stops the branch being
   mistaken for finished work. */
.tbc {
  border-bottom: 1px dashed currentColor;
  text-decoration: none;
}
.tbc::after {
  content: 'TBC';
  display: inline-block;
  margin-left: .35em;
  padding: .12em .42em;
  border-radius: 3px;
  background: var(--navy);
  color: #fff;
  font-size: .62em;
  font-weight: 600;
  letter-spacing: .06em;
  vertical-align: super;
  line-height: 1.4;
}
.band-ink .tbc::after,
.strip .tbc::after { background: #fff; color: var(--navy-deep); }

/* A missing image. Never a stock photo and never a generated face. */
.img-tbc {
  display: grid;
  place-items: center;
  aspect-ratio: 16 / 10;
  background: var(--paper-2);
  border: 1px dashed var(--rule);
  color: var(--ink-3);
  font-size: var(--fs-small);
  letter-spacing: .04em;
  text-transform: uppercase;
}
.img-tbc--square { aspect-ratio: 1; }
.img-tbc--wide { aspect-ratio: 16 / 9; }
.band-ink .img-tbc {
  background: rgba(255,255,255,.05);
  border-color: rgba(255,255,255,.22);
  color: rgba(255,255,255,.72);
}

/* ══════════════════════════════════════════════════════════════════════
   GEMIS STORIES — Phase 2, the homepage sections
   Built from the tokens already in this file: --navy, --navy-deep, --paper,
   --rule, the --fs-* scale and the band classes. No new colours or fonts.
   ══════════════════════════════════════════════════════════════════════ */

/* 01 — the hero now carries two actions instead of one */
.hero__ctas { display: flex; flex-wrap: wrap; gap: clamp(18px, 3vw, 44px); align-items: center; }
.arrow-link--quiet { opacity: .78; }
.arrow-link--quiet:hover { opacity: 1; }

/* 02 — proof strip */
.proof { padding-top: clamp(44px, 5vw, 72px); padding-bottom: clamp(44px, 5vw, 72px); }
.proof__line {
  margin: 0 0 clamp(28px, 3.4vw, 44px);
  font-size: var(--fs-name);
  font-weight: 500;
  letter-spacing: .02em;
  color: var(--ink-2);
}
.proof__logos {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(20px, 3vw, 48px);
  margin: 0 0 clamp(30px, 3.6vw, 48px);
  padding: 0;
  list-style: none;
}
.proof__client { display: flex; flex-direction: column; gap: 12px; }
.proof__client .img-tbc { max-width: 240px; }
.proof__name { font-size: var(--fs-title); font-weight: 500; letter-spacing: -.015em; color: var(--ink); }
.proof__since { font-size: var(--fs-small); color: var(--ink-3); }
.proof__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 10px clamp(18px, 2.4vw, 34px);
  margin: 0;
  padding: clamp(18px, 2.2vw, 26px) 0 0;
  border-top: 1px solid var(--rule);
  list-style: none;
  font-size: var(--fs-small);
  color: var(--ink-2);
}
.proof__facts li + li { position: relative; }
.proof__facts li + li::before {
  content: '·';
  position: absolute;
  left: clamp(-11px, -1.2vw, -17px);
  color: var(--ink-3);
}

/* 06 — the four routes reuse .card, without the icon slot */
.cards--ways .card { display: flex; flex-direction: column; gap: 10px; }
.cards--ways .card .arrow-link { margin-top: auto; padding-top: clamp(14px, 1.8vw, 20px); }

/* 07 — how we engage */
.engage__steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(18px, 2.4vw, 36px);
  margin: 0 0 clamp(28px, 3.4vw, 44px);
  padding: 0;
  list-style: none;
}
.engage__step { padding-top: clamp(16px, 2vw, 22px); border-top: 1px solid var(--rule); }
.engage__n {
  display: block;
  margin-bottom: clamp(14px, 2vw, 22px);
  font-size: var(--fs-small);
  color: var(--navy);
  letter-spacing: .04em;
}
.engage__t { margin: 0 0 8px; font-size: var(--fs-title); font-weight: 500; letter-spacing: -.018em; color: var(--ink); }
.engage__step p { margin: 0; font-size: var(--fs-copy); line-height: 1.5; color: var(--ink-2); }
/* Evolve carries the weight: the relationship starts at go-live */
.engage__step--last { border-top-color: var(--navy); }
.engage__step--last .engage__t { color: var(--navy); }

/* 05 — ManaGEM origin */
.origin__grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: clamp(32px, 5vw, 76px);
  align-items: center;
}
.origin__ctas { margin-top: clamp(22px, 2.8vw, 34px); }
.origin__aside { display: flex; flex-direction: column; gap: clamp(18px, 2.4vw, 28px); }
.origin__shot { width: 100%; height: auto; border: 1px solid var(--rule); }

@media (max-width: 900px) {
  .proof__logos { grid-template-columns: 1fr; gap: 26px; }
  .engage__steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .origin__grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .engage__steps { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════════════════════════════════════
   GEMIS STORIES — the timeline, the video player and the endorsement card
   The markup is a plain <ol> and reads top to bottom with no JavaScript and
   no CSS. Everything below is presentation over that.
   ══════════════════════════════════════════════════════════════════════ */

/* Three quiet accents drawn from the brand navy. Colour is never the only
   marker — each thread also carries its client name as text, and each founding
   card carries a "Founding client" label. */
:root {
  --thread-sbs-waterproofing: #16395e;
  --thread-homeassist:        #2a5c8a;
  --thread-wastemart:         #5f8fb5;
}

.stl { position: relative; }
.stl__skip {
  display: inline-block;
  margin-bottom: clamp(24px, 3vw, 40px);
  font-size: var(--fs-small);
  color: var(--ink-2);
  border-bottom: 1px solid var(--rule);
  padding-bottom: 3px;
}
.stl__skip:hover { color: var(--ink); border-bottom-color: var(--navy); }

.stl__frame { position: relative; display: grid; grid-template-columns: minmax(150px, .24fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 64px); }

/* the three unbroken lines: the visual proof of "partners built to stay" */
.stl__threads {
  position: sticky;
  top: clamp(90px, 12vh, 130px);
  align-self: start;
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.stl__thread { position: relative; padding-left: 18px; font-size: var(--fs-small); color: var(--ink-2); }
.stl__thread::before {
  content: '';
  position: absolute;
  left: 0;
  top: .55em;
  width: 10px;
  height: 2px;
  background: var(--thread, var(--navy));
}
.stl__thread[data-thread="sbs-waterproofing"] { --thread: var(--thread-sbs-waterproofing); }
.stl__thread[data-thread="homeassist"]        { --thread: var(--thread-homeassist); }
.stl__thread[data-thread="wastemart"]         { --thread: var(--thread-wastemart); }

.stl__list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: clamp(30px, 4vw, 56px); }

.stl__item {
  position: relative;
  padding: clamp(24px, 3vw, 40px) 0 0;
  border-top: 1px solid var(--rule);
}
/* a founding client's card carries its thread colour as a left edge */
.stl__item--founding { padding-left: clamp(18px, 2.2vw, 30px); border-left: 3px solid var(--thread, var(--navy)); }
.stl__item--founding[data-thread="sbs-waterproofing"] { --thread: var(--thread-sbs-waterproofing); }
.stl__item--founding[data-thread="homeassist"]        { --thread: var(--thread-homeassist); }
.stl__item--founding[data-thread="wastemart"]         { --thread: var(--thread-wastemart); }
/* ManaGEM branches off the SBS thread */
.stl__item--product { padding-left: clamp(18px, 2.2vw, 30px); border-left: 3px dashed var(--thread-sbs-waterproofing); }
.stl__item--today { border-top-width: 2px; border-top-color: var(--navy); }

.stl__period {
  margin: 0 0 10px;
  font-size: var(--fs-small);
  letter-spacing: .04em;
  color: var(--navy);
}
.stl__client {
  margin: 0 0 6px;
  font-size: var(--fs-display);
  font-weight: 600;
  letter-spacing: -.035em;
  line-height: 1.04;
  color: var(--ink);
}
.stl__thread-label {
  display: inline-block;
  margin-left: 12px;
  padding: 3px 9px;
  border: 1px solid var(--rule);
  border-radius: 999px;
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-2);
  vertical-align: middle;
}
.stl__headline { margin: 0 0 10px; font-size: var(--fs-title); font-weight: 500; letter-spacing: -.018em; color: var(--ink); }
.stl__challenge { margin: 0 0 clamp(18px, 2.2vw, 26px); max-width: 62ch; color: var(--ink-2); }
.stl__cta { margin: clamp(16px, 2vw, 22px) 0 0; }
.stl__item--founding .stl__media { display: grid; grid-template-columns: 1.5fr 1fr; gap: clamp(18px, 2.4vw, 32px); align-items: start; }
.stl__endo { margin-top: clamp(18px, 2.2vw, 26px); }

/* ── the video ─────────────────────────────────────────────────────────
   Poster first. preload="none" means not one byte of video is fetched until
   the visitor presses play. */
.vid { margin: 0; }
.vid__el {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  background: var(--navy-deep);
  border: 1px solid var(--rule);
}
.vid__cap { margin-top: clamp(12px, 1.6vw, 18px); }
.vid__summary { margin: 0 0 10px; max-width: 70ch; font-size: var(--fs-copy); line-height: 1.5; color: var(--ink-2); }
.vid__transcript { margin: 0 0 8px; }
.vid__transcript > summary {
  cursor: pointer;
  font-size: var(--fs-small);
  color: var(--navy);
  padding: 4px 0;
}
.vid__transcript > summary:focus-visible { outline: 2px solid var(--navy); outline-offset: 3px; }
.vid__transcript p { margin: 10px 0 0; max-width: 72ch; font-size: var(--fs-copy); line-height: 1.6; color: var(--ink-2); }
.vid__meta { margin: 0; font-size: var(--fs-eyebrow); letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); }

/* ── the endorsement card ──────────────────────────────────────────────
   Never carries a quote that has not been approved. Until a line arrives it
   says so, visibly. */
.endo {
  margin: 0;
  padding: clamp(18px, 2.2vw, 26px);
  background: var(--paper-2);
  border: 1px solid var(--rule);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.endo__portrait { width: 64px; height: 64px; font-size: var(--fs-small); letter-spacing: .06em; }
.endo__line { margin: 0; }
.endo__line p {
  margin: 0;
  font-size: var(--fs-title);
  font-style: italic;
  line-height: 1.34;
  letter-spacing: -.012em;
  color: var(--ink);
}
.endo__by { display: flex; flex-direction: column; gap: 2px; font-size: var(--fs-small); color: var(--ink-2); }
.endo__name { font-weight: 600; color: var(--ink); }
.endo__since { color: var(--ink-3); }

@media (max-width: 900px) {
  /* the threads column has nowhere to go; the coloured left edge on each
     founding card carries the same information, with its text label */
  .stl__frame { grid-template-columns: 1fr; gap: 0; }
  .stl__threads { position: static; flex-direction: row; flex-wrap: wrap; gap: 10px 20px; margin-bottom: clamp(22px, 3vw, 30px); }
  .stl__item--founding .stl__media { grid-template-columns: 1fr; }
}
/* the thread the reader is currently inside */
.stl__thread.is-current { color: var(--ink); font-weight: 600; }
.stl__thread.is-current::before { height: 3px; }

/* ══════════════════════════════════════════════════════════════════════
   GEMIS STORIES — Our Work, the story pages, Solutions and Our Story
   ══════════════════════════════════════════════════════════════════════ */

/* Our Work */
.wk__founders { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: clamp(20px,2.6vw,36px); }
.wk__founder { display: flex; flex-direction: column; gap: 10px; }
.wk__fname { margin: 0; font-size: var(--fs-title); font-weight: 600; letter-spacing: -.02em; color: var(--ink); }
.wk__fsince, .wk__period { margin: 0; font-size: var(--fs-small); color: var(--navy); }
.wk__fline, .wk__line { margin: 0; font-size: var(--fs-copy); line-height: 1.45; color: var(--ink-2); }

.wk__filters { display: flex; flex-wrap: wrap; gap: clamp(16px,2.2vw,32px); margin: 0 0 clamp(24px,3vw,36px); }
.wk__fieldset { border: 0; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.wk__fieldset legend { float: left; width: 100%; margin-bottom: 8px; font-size: var(--fs-eyebrow); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.wk__fieldset button {
  padding: 7px 14px; border: 1px solid var(--rule); border-radius: 999px;
  background: transparent; color: var(--ink-2); font: inherit; font-size: var(--fs-small);
  cursor: pointer; transition: border-color .3s var(--ease), color .3s var(--ease), background .3s var(--ease);
}
.wk__fieldset button:hover { border-color: var(--navy); color: var(--ink); }
.wk__fieldset button[aria-pressed="true"] { background: var(--navy); border-color: var(--navy); color: #fff; }

.wk__grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: clamp(22px,2.8vw,40px); }
.wk__card { display: flex; flex-direction: column; gap: 10px; }
.wk__card[hidden] { display: none; }
.wk__media { display: block; overflow: hidden; border: 1px solid var(--rule); }
.wk__media img { display: block; width: 100%; height: auto; }
.wk__name { margin: 0; font-size: var(--fs-title); font-weight: 600; letter-spacing: -.02em; color: var(--ink); }
.wk__grid--quiet { margin-top: clamp(16px,2vw,22px); opacity: .9; }
.wk__card--unclassified { padding: clamp(14px,1.8vw,20px); border: 1px dashed var(--rule); }
.wk__sub { margin: clamp(40px,5vw,66px) 0 6px; font-size: var(--fs-title); font-weight: 600; color: var(--ink); }
.wk__subnote { margin: 0 0 clamp(12px,1.6vw,18px); max-width: 68ch; font-size: var(--fs-copy); color: var(--ink-2); }
.wk__more { margin: clamp(30px,4vw,48px) 0 0; font-size: var(--fs-copy); color: var(--ink-2); }

/* story pages */
.story__meta { display: flex; flex-wrap: wrap; gap: clamp(20px,3vw,48px); margin: clamp(24px,3vw,36px) 0 0; }
.story__meta div { display: flex; flex-direction: column; gap: 4px; }
.story__meta dt { font-size: var(--fs-eyebrow); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.story__meta dd { margin: 0; font-size: var(--fs-copy); color: var(--ink); }
.story__prose p { max-width: 68ch; margin: 0 0 clamp(12px,1.6vw,18px); color: var(--ink-2); }
.story__build { display: grid; grid-template-columns: 1.4fr 1fr; gap: clamp(24px,3vw,48px); align-items: start; }
.story__caps { margin: 0; padding: 0; list-style: none; }
.story__caps li { padding: clamp(9px,1.1vw,13px) 0; border-top: 1px solid var(--rule); font-size: var(--fs-copy); line-height: 1.45; color: var(--ink-2); }
.story__tech { margin: clamp(20px,2.6vw,30px) 0 0; font-size: var(--fs-small); letter-spacing: .03em; color: var(--ink-3); }
.story__metric { font-size: var(--fs-title); font-weight: 500; color: var(--ink); }
.story__metric-note { font-size: var(--fs-small); font-weight: 400; color: var(--ink-3); }
.story__next { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px,4vw,64px); }

/* Solutions */
.sol__grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: clamp(24px,3.2vw,48px); }
.sol__card { display: flex; flex-direction: column; gap: 12px; padding-top: clamp(18px,2.2vw,26px); border-top: 1px solid var(--rule); }
.sol__name { margin: 0; font-size: var(--fs-display); font-weight: 600; letter-spacing: -.035em; line-height: 1.05; color: var(--ink); }
.sol__body { margin: 0; max-width: 56ch; color: var(--ink-2); }

/* Our Story */
.hist__clients { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: clamp(20px,2.6vw,40px); margin: clamp(24px,3vw,40px) 0 0; padding: 0; list-style: none; }
.hist__client { display: flex; flex-direction: column; gap: 8px; padding-top: clamp(14px,1.8vw,20px); border-top: 1px solid var(--rule); }
.hist__client h3 { margin: 0; font-size: var(--fs-title); font-weight: 600; letter-spacing: -.02em; color: var(--ink); }
.hist__client p { margin: 0; font-size: var(--fs-copy); color: var(--ink-2); }

/* the stack row, moved off the homepage */
.stack__row { display: flex; flex-wrap: wrap; gap: 10px 22px; margin: clamp(20px,2.6vw,32px) 0 0; padding: 0; list-style: none; font-size: var(--fs-small); color: var(--ink-2); }
.svc__proof { margin: clamp(12px,1.6vw,18px) 0 0; }

@media (max-width: 900px) {
  .wk__founders, .wk__grid, .hist__clients { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .story__build, .story__next, .sol__grid { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .wk__founders, .wk__grid, .hist__clients { grid-template-columns: 1fr; }
}

/* .story__meta sits on .chero, which is navy-deep — the light-band ink colours
   it inherited were 1.07:1 there. Matches .chero__meta, which solved this first. */
.chero .story__meta dt { color: rgba(255,255,255,.66); }
.chero .story__meta dd { color: #fff; }
.chero .story__meta .tbc::after { background: #fff; color: var(--navy-deep); }

/* ══════════════════════════════════════════════════════════════════════
   PUBLISH-SAFE MODE
   The live build shows nothing unconfirmed: no "TBC", no "Endorsement to
   follow", no "Image TBC", and no empty gap where one of them used to be.
   Each hideable placeholder ships with a fallback that is what visitors
   actually see, so the layout reads as finished rather than unfinished.

   Adding ?review=1 to any URL flips it: the placeholders come back with
   their dashed underline and TBC pill, so outstanding items stay visible
   to reviewers. This is CSS-only, so the live state is correct even with
   no JavaScript — the review state is the one that needs it.
   ══════════════════════════════════════════════════════════════════════ */

/* live: the placeholder is gone and its fallback stands in */
.unconfirmed { display: none; }
.confirmed-fallback { display: contents; }

/* live: an inline unconfirmed value simply is not rendered */
.tbc { display: none; }

/* review: the placeholders return, the fallbacks step aside */
.review .unconfirmed { display: block; }
.review .confirmed-fallback { display: none; }
.review .tbc { display: inline; }

/* a client's name set as a wordmark, where no logo file exists */
.client-mark {
  display: inline-block;
  font-size: var(--fs-title);
  font-weight: 600;
  letter-spacing: -.03em;
  color: var(--navy);
}
.band-ink .client-mark, .chero .client-mark { color: #fff; }

/* With no endorsement card, a founding card's video takes the full width.
   That is the default, so the live build needs no JavaScript to look right. */
.stl__item--founding .stl__media { display: block; }
.review .stl__item--founding .stl__media {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: clamp(18px, 2.4vw, 32px);
  align-items: start;
}
@media (max-width: 900px) {
  .review .stl__item--founding .stl__media { grid-template-columns: 1fr; }
}

/* the review banner, so nobody mistakes a review URL for the live site */
.review-flag {
  position: sticky;
  top: 0;
  z-index: 60;
  padding: 7px 16px;
  background: var(--navy);
  color: #fff;
  font-size: var(--fs-small);
  text-align: center;
}
/* the wordmark standing in for a founder-card logo carries that card's heading weight */
.client-mark--lg { font-size: var(--fs-display); letter-spacing: -.035em; line-height: 1.05; }

/* ══════════════════════════════════════════════════════════════════════
   TIDY — one system for the whole corporate site
   The layers above were written page by page, and each one brought its own
   section padding, its own heading sizes and its own ground colour. This
   block is the single place those decisions are now made:

     · colour   — the tokens at the top of the file, all taken from the hero
     · type     — eight steps; every heading on the site resolves to one
     · rhythm   — every section carries --sec-y on both edges, no more, no less
     · grounds  — paper → wash → paper → tint, one dark band, then the footer
     · heroes   — every page opens the same way: the hero photograph under
                  the same scrim, type set left, one h1

   Rules here are written at the same specificity as the ones they replace
   and simply come later, so nothing needs !important.
   ══════════════════════════════════════════════════════════════════════ */

/* ── type ─────────────────────────────────────────────────────────────── */
body { font-size: var(--fs-copy); }
.lede { font-size: var(--fs-name); }
.eyebrow { margin-bottom: 14px; letter-spacing: .10em; }
.chero__kicker { margin-bottom: 14px; font-size: var(--fs-eyebrow); font-weight: 500; letter-spacing: .10em; }

/* a section title leads straight into its content, unless it sits in a
   header row that already carries the gap */
.display { margin-bottom: var(--head-gap); }
.sec__head .display,
.values__head .display,
.what__head .display,
.chap__head .display { margin-bottom: 0; }
.origin .display,
.endnote .display { margin-bottom: clamp(16px, 2vw, 24px); }
.ctc__title { font-size: var(--fs-display); margin-bottom: clamp(16px, 2vw, 24px); }
h1.ctc__title { font-size: var(--fs-hero); }

/* every h3 that titles a card, a step or an item is one size and one weight */
.card__t,
.engage__t,
.stl__headline,
.wk__name,
.hist__client h3,
.next__t,
.acc__name,
.row__name,
.proof__name { font-size: var(--fs-title); font-weight: 500; letter-spacing: -.018em; line-height: 1.25; text-transform: none; color: var(--ink); }
.card__t { margin: 16px 0 8px; }
.cards--ways .card__t { margin-top: 0; }
.stp__t,
.step__t,
.group h3,
.tl__t { font-size: var(--fs-name); font-weight: 500; letter-spacing: -.012em; line-height: 1.3; text-transform: none; color: var(--ink); }
.stp p, .step p, .next li p, .tl__item p { font-size: var(--fs-copy); }

/* the large names: a client wordmark, a solution, a timeline entry */
.client-mark--lg,
.sol__name,
.stl__client { font-size: var(--fs-lead); font-weight: 600; letter-spacing: -.025em; line-height: 1.1; }
.wk__fname { font-size: var(--fs-lead); }
.endo__line p { font-size: var(--fs-name); }

/* the decorative numerals stay decorative: large, but not larger than a title */
.acc__n,
.rows--svc .row__n { font-size: clamp(30px, 3.4vw, 52px); }
@media (max-width: 900px) { .acc__n, .rows--svc .row__n { font-size: clamp(26px, 5vw, 40px); } }

/* ── rhythm ───────────────────────────────────────────────────────────── */
main > section,
.sec, .sec--tight, .sec--last,
.about, .what, .values, .work, .chap, .ctc, .endnote, .legal,
.proof, .stl, .origin, .ways, .engage, .wk, .sol { padding-top: var(--sec-y); padding-bottom: var(--sec-y); }

/* the one exception: the proof strip is a line and three names, not a chapter */
.proof, .hero + .proof { padding-top: var(--sec-y-s); padding-bottom: var(--sec-y-s); }

/* a page that opens on a light section still needs to clear the fixed bar */
main > .ctc:first-child,
main > .legal:first-child { padding-top: var(--hero-top); }

/* heroes keep their own measure */
.hero { padding-top: var(--hero-top); padding-bottom: var(--hero-bottom); }
.chero, .ihero { padding-top: var(--hero-top); padding-bottom: clamp(52px, 6.5vw, 88px); }
.hero + .band, .shero + .band, .ihero + .band, .whero + .band, .chero + .band { padding-top: var(--sec-y); }

/* the closing band used to carry a top margin as well, which left a strip of
   bare page between it and the section above — the gap read as a mistake */
.endnote { margin-top: 0; }

/* the section header row: title left, lede right, both on the same baseline */
.sec__head,
.values__head,
.what__head { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(28px, 5vw, 72px); align-items: end; padding-bottom: var(--head-gap); }
.sec__head .lede,
.values__head .lede,
.what__head .lede { max-width: 46ch; }
@media (max-width: 900px) {
  .sec__head, .values__head, .what__head { grid-template-columns: 1fr; gap: 18px; }
}

/* lists that followed a title used to bring their own top margin on top of
   the title's; the title now owns that space */
.stats, .hist__clients, .stack__row, .mods { margin-top: 0; }

/* ── grounds ──────────────────────────────────────────────────────────── */
.band-warm { background-color: var(--paper-2); }
/* paper footer under a paper section: a hairline so the seam still reads */
.foot { border-top: 1px solid var(--rule-soft); }
.band-ink + .foot, .endnote + .foot { border-top: 0; }

/* ── page heroes: the same sky as the home page, type set left ────────── */
.chero {
  text-align: left;
  background: var(--navy-deep) url('../img/home/hero-bg.jpg') center / cover no-repeat;
}
.chero::before {
  content: '';
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(100deg, rgba(8,34,62,.94) 0%, rgba(8,34,62,.88) 46%, rgba(8,34,62,.62) 100%),
    linear-gradient(to bottom, rgba(8,34,62,.5) 0%, rgba(8,34,62,0) 30%, rgba(8,34,62,0) 70%, rgba(8,34,62,.45) 100%);
}
.chero .dotgrid { display: none; }
.chero__title { margin-left: 0; margin-right: 0; max-width: 18ch; }
.chero__copy { margin-left: 0; margin-right: 0; max-width: 52ch; font-size: var(--fs-name); color: rgba(255,255,255,.88); }
.chero__meta { justify-content: flex-start; }
.chero__meta div { text-align: left; }
.chero .story__meta { margin-top: clamp(32px, 4vw, 48px); padding-top: clamp(20px, 2.4vw, 28px); border-top: 1px solid rgba(255,255,255,.2); }
.chero .story__meta dt { color: rgba(255,255,255,.72); }
.hero__copy { font-size: var(--fs-name); }

/* ── components that were out of step ────────────────────────────────── */
/* the founders row reads as three ruled columns, like every other item row */
.wk__founder { padding-top: clamp(16px, 2vw, 22px); border-top: 1px solid var(--rule); }
.wk__fsince { margin: 0; font-size: var(--fs-small); color: var(--ink-3); }
.wk__fline { margin: 0; color: var(--ink-2); }
.wk__founder .arrow-link { margin-top: 6px; align-self: flex-start; }

/* the team grid sat in a staggered cascade that read as misalignment */
.roster > *:nth-child(3n+2),
.roster > *:nth-child(3n+3) { margin-top: 0; }
.mate__face { aspect-ratio: 4 / 5; }

/* the four route cards share the card kit; the arrow sits on the baseline */
.cards--ways .card { background: var(--paper-2); }

/* numbered process and next-step grids: the numeral is quiet, the title leads */
.stp__n, .next__n, .engage__n { color: var(--blue); }

/* every control looks clickable */
button, summary, [role="button"] { cursor: pointer; }

/* the accordion row wash on a paper ground */
.acc__item:hover { background: var(--paper-2); }

/* contact page: the enquiry card sits on the lifted ground */
.ctc .form { background: var(--paper-2); }

/* the team: a compact row per person — initials as an avatar beside the name,
   not a photograph-sized block with two letters in it */
.roster { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(18px, 2.2vw, 28px) clamp(18px, 2.6vw, 40px); }
.mate { display: grid; grid-template-columns: 64px minmax(0, 1fr); grid-template-rows: auto auto; gap: 4px 16px; align-items: start; padding-top: clamp(14px, 1.8vw, 20px); border-top: 1px solid var(--rule); }
.mate__face { grid-row: 1 / 3; }
.mate__n, .mate__r { grid-column: 2; }
.mate__n { margin: 0; padding-top: 10px; }
.mate__face { width: 64px; aspect-ratio: 1 / 1; margin: 0; border-radius: 50%; font-size: var(--fs-title); font-weight: 500; letter-spacing: .02em; }
@media (max-width: 900px) { .roster { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .roster { grid-template-columns: 1fr; } }

/* a link inside running copy is underlined, so it never depends on colour alone */
main p > a:not([class]) { color: var(--navy); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
main p > a:not([class]):hover { color: var(--blue); }

/* ══════════════════════════════════════════════════════════════════════
   RESTRUCTURE — navigation drop-downs, the homepage sections, the service,
   product and article pages. All on the design system above.
   ══════════════════════════════════════════════════════════════════════ */

/* ── nav: the Solutions drop-down is a list of nine, three across ──────── */
.mega__svcs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px 28px; margin: 0; padding: 0; list-style: none; }
.msvc { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 12px; align-items: start; padding: 10px 10px 10px 8px; border-radius: 6px; transition: background .3s var(--ease); }
.msvc:hover { background: var(--wash); }
.msvc__icon { display: grid; place-items: center; width: 36px; height: 36px; background: var(--wash); color: var(--navy); border-radius: 6px; }
.msvc:hover .msvc__icon { background: var(--navy); color: #fff; }
.msvc__icon svg { width: 18px; height: 18px; }
.msvc__body { display: flex; flex-direction: column; gap: 2px; }
.msvc__name { font-size: var(--fs-copy); font-weight: 500; color: var(--ink); letter-spacing: -.01em; }
.msvc__line { font-size: var(--fs-small); color: var(--ink-3); line-height: 1.4; }
@media (max-width: 900px) {
  .mega__svcs { grid-template-columns: 1fr; gap: 0; }
  .msvc { padding-inline: 0; }
  .msvc:hover { background: none; }
}

/* ── photographic grounds derived from the hero ──────────────────────── */
.band-photo { position: relative; isolation: isolate; overflow: clip; background-size: cover; background-position: center; }
.band-photo::before { content: ''; position: absolute; inset: 0; z-index: -1; }
.band-photo--soft { background-image: url('../img/bg/sky-soft.jpg'); }
.band-photo--soft::before { background: linear-gradient(180deg, rgba(243,244,246,.92), rgba(243,244,246,.78)); }
.band-photo--deep { background-image: url('../img/bg/sky-deep.jpg'); background-color: var(--navy-deep); }
.band-photo--deep::before { background: linear-gradient(100deg, rgba(8,34,62,.94) 0%, rgba(8,34,62,.86) 55%, rgba(8,34,62,.7) 100%); }
.band-photo--wide { background-image: url('../img/bg/sky-wide.jpg'); background-color: var(--navy-deep); }
.band-photo--wide::before { background: linear-gradient(100deg, rgba(8,34,62,.95) 0%, rgba(8,34,62,.86) 50%, rgba(8,34,62,.72) 100%); }
.band-ink.band-photo .lede { color: rgba(255,255,255,.82); }

/* ── 02 trust: centred stats, a line, and the wordmark marquee ───────── */
.trust { text-align: center; }
.trust__stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(18px, 2.4vw, 34px); margin: 0 auto clamp(40px, 5vw, 64px); padding: 0; list-style: none; max-width: 1040px; }
.trust__stats .stat { padding-top: clamp(14px, 1.8vw, 20px); border-top: 1px solid var(--rule); }
.trust__stats .stat__l { margin-inline: auto; }
.trust__line { margin: 0 0 clamp(22px, 2.8vw, 36px); font-size: var(--fs-eyebrow); font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.marquee { position: relative; display: flex; overflow: hidden; gap: 0; -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.marquee__track { display: flex; flex: 0 0 auto; align-items: center; gap: clamp(36px, 5vw, 80px); margin: 0; padding: 0 clamp(18px, 2.5vw, 40px) 0 0; list-style: none; animation: marquee 32s linear infinite; }
.marquee__item { white-space: nowrap; }
.marquee .client-mark { font-size: var(--fs-lead); font-weight: 600; letter-spacing: -.025em; color: var(--navy); opacity: .85; }
.marquee:hover .marquee__track { animation-play-state: paused; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(calc(-100% - 0px)); } }
@media (prefers-reduced-motion: reduce) {
  .marquee { flex-wrap: wrap; justify-content: center; -webkit-mask-image: none; mask-image: none; }
  .marquee__track { animation: none; flex-wrap: wrap; justify-content: center; }
  .marquee__track[aria-hidden="true"] { display: none; }
}
@media (max-width: 900px) { .trust__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ── 03 solutions: nine tiles, the first one leads ───────────────────── */
.svcs__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--card-gap); }
.svc { position: relative; display: flex; flex-direction: column; gap: 8px; min-height: 230px; padding: var(--card-pad); background: var(--paper-2); border: 1px solid var(--rule-soft); color: var(--ink); transition: transform .45s var(--ease), border-color .45s var(--ease), box-shadow .45s var(--ease); }
.svc:hover { transform: translateY(-4px); border-color: var(--navy); box-shadow: 0 24px 40px -32px rgba(8,34,62,.5); }
.svc__n { position: absolute; top: var(--card-pad); right: var(--card-pad); font-size: var(--fs-small); letter-spacing: .06em; color: var(--ink-3); }
.svc__icon { display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: auto; background: var(--wash); color: var(--navy); border-radius: 8px; transition: background .4s var(--ease), color .4s var(--ease); }
.svc:hover .svc__icon { background: var(--navy); color: #fff; }
.svc__icon svg { width: 22px; height: 22px; }
.svc__name { margin-top: clamp(22px, 3vw, 40px); font-size: var(--fs-title); font-weight: 500; letter-spacing: -.018em; line-height: 1.25; }
.svc__line { font-size: var(--fs-copy); line-height: 1.5; color: var(--ink-2); }
.svc__go { display: inline-grid; place-items: center; width: 28px; height: 28px; margin-top: 6px; border: 1px solid var(--rule); border-radius: 50%; color: var(--navy); transition: background .4s var(--ease), color .4s var(--ease), border-color .4s var(--ease); }
.svc__go svg { width: 11px; height: 11px; transition: transform .35s var(--ease); }
.svc:hover .svc__go { background: var(--navy); border-color: var(--navy); color: #fff; }
.svc:hover .svc__go svg { transform: translate(2px, -2px); }
.svc--lead { grid-column: span 2; background: var(--navy-deep) url('../img/bg/sky-flip.jpg') center / cover; color: #fff; border-color: transparent; }
.svc--lead::before { content: ''; position: absolute; inset: 0; background: linear-gradient(100deg, rgba(8,34,62,.94), rgba(8,34,62,.72)); }
.svc--lead > * { position: relative; }
.svc--lead .svc__n { color: rgba(255,255,255,.7); }
.svc--lead .svc__icon { background: rgba(255,255,255,.14); color: #fff; }
.svc--lead .svc__line { color: rgba(255,255,255,.86); max-width: 46ch; }
.svc--lead .svc__go { border-color: rgba(255,255,255,.4); color: #fff; }
.svc--lead:hover .svc__go, .svc--lead:hover .svc__icon { background: #fff; color: var(--navy); border-color: #fff; }
.svcs__all { margin: clamp(26px, 3vw, 40px) 0 0; }
.svcs .svc:focus-visible { outline-offset: 3px; }
@media (max-width: 1080px) { .svcs__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px) { .svcs__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .svc { min-height: 0; } .svc--lead { grid-column: 1 / -1; } }
@media (max-width: 480px) { .svcs__grid { grid-template-columns: 1fr; } }

/* ── 04 stories: a rail of names and a stage that shows one card ─────── */
.built .sec__head .display { color: #fff; }
.built .eyebrow { color: rgba(255,255,255,.72); }
.stories__frame { display: grid; grid-template-columns: minmax(200px, .3fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 64px); align-items: start; }
.stories__rail { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; border-top: 1px solid rgba(255,255,255,.16); }
.stories__tab { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 2px 12px; width: 100%; padding: 12px 0; border: 0; border-bottom: 1px solid rgba(255,255,255,.12); background: none; color: rgba(255,255,255,.72); text-align: left; cursor: pointer; transition: color .3s var(--ease), padding-left .35s var(--ease); }
.stories__tab:hover { color: #fff; }
.stories__tab[aria-pressed="true"] { color: #fff; padding-left: 6px; }
.stories__tab-n { grid-row: 1 / 3; font-size: var(--fs-small); letter-spacing: .06em; color: rgba(255,255,255,.5); padding-top: 3px; }
.stories__tab[aria-pressed="true"] .stories__tab-n { color: var(--steel); }
.stories__tab-name { font-size: var(--fs-copy); font-weight: 500; letter-spacing: -.01em; }
.stories__tab-p { font-size: var(--fs-small); color: rgba(255,255,255,.52); }
.stories__tab:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

.stories__stage { position: relative; }
.stories__list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: clamp(24px, 3vw, 40px); }
.sty { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(20px, 3vw, 44px); align-items: center; padding: clamp(18px, 2.2vw, 28px); background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); backdrop-filter: blur(6px); }
.sty--today { grid-template-columns: 1fr; }
.sty__media { display: block; overflow: hidden; border: 1px solid rgba(255,255,255,.18); }
.sty__media img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; transition: transform .6s var(--ease); }
.sty:hover .sty__media img { transform: scale(1.03); }
.sty__body { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.sty__period { margin: 0; font-size: var(--fs-small); letter-spacing: .04em; color: var(--steel); }
.sty__client { margin: 0; font-size: var(--fs-lead); font-weight: 600; letter-spacing: -.025em; line-height: 1.1; color: #fff; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.sty__tag { display: inline-block; padding: 3px 9px; border: 1px solid rgba(255,255,255,.3); border-radius: 999px; font-size: var(--fs-eyebrow); font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.8); }
.sty__headline { margin: 0; font-size: var(--fs-title); font-weight: 500; letter-spacing: -.018em; color: #fff; }
.sty__challenge { margin: 0; color: rgba(255,255,255,.78); }
.sty__outcome { margin: 4px 0 6px; padding: 10px 14px; border-left: 2px solid var(--steel); font-size: var(--fs-copy); color: #fff; }
.sty__outcome span { display: block; margin-bottom: 2px; font-size: var(--fs-eyebrow); letter-spacing: .1em; text-transform: uppercase; color: var(--steel); }
.sty .arrow-link { color: #fff; align-self: flex-start; }

/* the live stage: one card visible, the others parked above and below */
.stories--live .stories__list { display: block; position: relative; height: var(--stage-h, auto); overflow: hidden; }
.stories--live .sty { position: absolute; inset: 0 0 auto; opacity: 0; visibility: hidden; transform: translateY(40px); transition: opacity .6s var(--ease), transform .7s var(--ease), visibility 0s linear .7s; }
.stories--live .sty.is-active { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.stories--live .sty.is-above { transform: translateY(-40px); }
.stories__ctl { display: flex; align-items: center; gap: 10px; margin-top: clamp(16px, 2vw, 24px); }
.stories__btn { display: grid; place-items: center; width: 38px; height: 38px; padding: 0; border: 1px solid rgba(255,255,255,.3); border-radius: 50%; background: none; color: #fff; cursor: pointer; transition: background .3s var(--ease), border-color .3s var(--ease); }
.stories__btn svg { width: 13px; height: 13px; }
.stories__btn:hover { background: rgba(255,255,255,.12); border-color: #fff; }
.stories__btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.stories__btn.is-paused svg { display: none; }
.stories__btn.is-paused::before { content: ''; width: 0; height: 0; border-style: solid; border-width: 6px 0 6px 10px; border-color: transparent transparent transparent #fff; margin-left: 2px; }
.stories__count { margin-left: 6px; font-size: var(--fs-small); color: rgba(255,255,255,.7); }
.stories__count b { font-weight: 600; color: #fff; }
.stories__bar { flex: 1 1 auto; height: 2px; margin-left: 10px; background: rgba(255,255,255,.18); overflow: hidden; }
.stories__bar i { display: block; height: 100%; width: 100%; background: var(--steel); transform: scaleX(0); transform-origin: left; }
.stories__bar.is-running i { animation: storybar 7s linear forwards; }
@keyframes storybar { to { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) {
  .stories--live .sty { transition: none; }
  .stories__bar { display: none; }
}
@media (max-width: 1080px) { .stories__frame { grid-template-columns: 1fr; } .stories__rail { flex-direction: row; flex-wrap: wrap; gap: 0 18px; border-top: 0; margin-bottom: 20px; } .stories__tab { width: auto; grid-template-columns: auto; padding: 8px 0; border-bottom: 2px solid transparent; } .stories__tab[aria-pressed="true"] { padding-left: 0; border-bottom-color: var(--steel); } .stories__tab-n, .stories__tab-p { display: none; } }
@media (max-width: 760px) { .sty { grid-template-columns: 1fr; } }

/* ── 06 testimonials: a snapping track of cards ──────────────────────── */
.testi__nav { display: flex; gap: 10px; justify-content: flex-end; }
.testi__btn { display: grid; place-items: center; width: 42px; height: 42px; padding: 0; border: 1px solid var(--rule); border-radius: 50%; background: var(--paper-2); color: var(--navy); cursor: pointer; transition: background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease); }
.testi__btn svg { width: 13px; height: 13px; }
.testi__btn:hover { background: var(--navy); border-color: var(--navy); color: #fff; }
.testi__track { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 2 * var(--card-gap)) / 3); gap: var(--card-gap); margin: 0; padding: 4px 0 8px; list-style: none; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -ms-overflow-style: none; }
.testi__track::-webkit-scrollbar { display: none; }
.tcard { position: relative; display: flex; flex-direction: column; gap: 14px; padding: clamp(22px, 2.6vw, 32px); background: var(--paper-2); border: 1px solid var(--rule-soft); scroll-snap-align: start; transition: transform .45s var(--ease), box-shadow .45s var(--ease); }
.tcard:hover { transform: translateY(-4px); box-shadow: 0 24px 40px -32px rgba(8,34,62,.45); }
.tcard__mark { position: absolute; top: 6px; right: 18px; font-size: 92px; line-height: 1; font-weight: 600; color: var(--wash); pointer-events: none; }
.tcard__stars { display: flex; gap: 3px; margin: 0; }
.tcard__stars svg { width: 15px; height: 15px; fill: var(--blue); }
.tcard__q { margin: 0; }
.tcard__q p { margin: 0; font-size: var(--fs-name); line-height: 1.5; letter-spacing: -.008em; color: var(--ink); }
.tcard__by { display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 12px; align-items: center; margin: auto 0 0; padding-top: 14px; border-top: 1px solid var(--rule-soft); font-size: var(--fs-small); color: var(--ink-3); line-height: 1.45; }
.tcard__by strong { font-weight: 600; color: var(--ink); }
.tcard__face { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: linear-gradient(158deg, #e3e9f0, #c6d2df); color: var(--navy); font-size: var(--fs-small); font-weight: 600; letter-spacing: .04em; }
.testi__dots { display: flex; justify-content: center; gap: 8px; margin-top: clamp(18px, 2vw, 26px); }
.testi__dot { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 50%; background: var(--rule); cursor: pointer; transition: background .3s var(--ease), transform .3s var(--ease); }
.testi__dot[aria-pressed="true"] { background: var(--navy); transform: scale(1.3); }
.testi__dot:focus-visible { outline: 2px solid var(--navy); outline-offset: 3px; }
@media (max-width: 1080px) { .testi__track { grid-auto-columns: calc((100% - var(--card-gap)) / 2); } }
@media (max-width: 700px) { .testi__track { grid-auto-columns: 88%; } }

/* ── 07 news: three posts ────────────────────────────────────────────── */
.news__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 2.6vw, 36px); }
.news__grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 920px; }
.post { display: flex; flex-direction: column; gap: 0; background: var(--paper-2); border: 1px solid var(--rule-soft); transition: transform .45s var(--ease), box-shadow .45s var(--ease); }
.post:hover { transform: translateY(-4px); box-shadow: 0 24px 40px -32px rgba(8,34,62,.45); }
.post__media { position: relative; display: block; overflow: hidden; }
.post__media img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; transition: transform .6s var(--ease); }
.post:hover .post__media img { transform: scale(1.04); }
.post__tag { position: absolute; top: 14px; left: 14px; padding: 5px 10px; background: rgba(255,255,255,.92); color: var(--navy); font-size: var(--fs-eyebrow); font-weight: 500; letter-spacing: .08em; text-transform: uppercase; }
.post__body { display: flex; flex-direction: column; gap: 10px; flex: 1 1 auto; padding: var(--card-pad); }
.post__meta { margin: 0; font-size: var(--fs-small); color: var(--ink-3); }
.post__t { margin: 0; font-size: var(--fs-title); font-weight: 500; letter-spacing: -.018em; line-height: 1.25; }
.post__t a:hover { color: var(--navy); }
.post__x { margin: 0; font-size: var(--fs-copy); color: var(--ink-2); }
.post__body .arrow-link { margin-top: auto; align-self: flex-start; padding-top: 10px; }
.news .sec__head .lede .arrow-link { display: inline-flex; margin-left: 6px; }
@media (max-width: 900px) { .news__grid, .news__grid--2 { grid-template-columns: 1fr; max-width: 560px; } }

/* ── 08 get started: the brief on the left, the form card on the right ── */
.go__grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(32px, 5vw, 84px); align-items: start; }
.go .eyebrow { color: rgba(255,255,255,.72); }
.go .display { color: #fff; margin-bottom: clamp(16px, 2vw, 24px); }
.go__steps { margin: clamp(26px, 3vw, 40px) 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 0; border-top: 1px solid rgba(255,255,255,.16); }
.go__steps li { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 12px; padding: 16px 0; border-bottom: 1px solid rgba(255,255,255,.12); }
.go__n { font-size: var(--fs-small); letter-spacing: .06em; color: var(--steel); padding-top: 3px; }
.go__steps strong { display: block; margin-bottom: 4px; font-weight: 500; color: #fff; }
.go__steps p { margin: 0; font-size: var(--fs-copy); color: rgba(255,255,255,.76); }
.go__contact { margin-top: clamp(22px, 2.6vw, 32px); display: flex; flex-direction: column; gap: 8px; }
.go__contact p { margin: 0; display: grid; grid-template-columns: 90px minmax(0, 1fr); gap: 12px; font-size: var(--fs-copy); color: #fff; }
.go__contact span { font-size: var(--fs-eyebrow); letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.6); padding-top: 3px; }
.go__contact a { color: #fff; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(255,255,255,.4); }
.go__contact a:hover { text-decoration-color: #fff; }
.go .form { background: #fff; border-color: transparent; box-shadow: 0 40px 70px -40px rgba(0,0,0,.6); }
.go .form a:focus-visible, .go .form button:focus-visible { outline-color: var(--navy); }
@media (max-width: 1000px) { .go__grid { grid-template-columns: 1fr; } }

/* ── service pages ───────────────────────────────────────────────────── */
.caps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 clamp(20px, 2.6vw, 40px); margin: 0; padding: 0; list-style: none; }
.caps li { padding: clamp(12px, 1.4vw, 16px) 0 clamp(12px, 1.4vw, 16px) 26px; position: relative; border-top: 1px solid var(--rule); font-size: var(--fs-copy); color: var(--ink); }
.caps li::before { content: ''; position: absolute; left: 0; top: calc(50% - 5px); width: 10px; height: 10px; border-radius: 50%; background: var(--navy); }
.why { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(22px, 3vw, 48px); }
.why__col { padding-top: clamp(16px, 2vw, 22px); border-top: 1px solid var(--navy); }
.why__t { margin: 0 0 10px; font-size: var(--fs-title); font-weight: 500; letter-spacing: -.018em; color: var(--ink); }
.why__col p { margin: 0; color: var(--ink-2); }
.pf { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(22px, 3vw, 48px); align-items: center; padding: clamp(18px, 2.2vw, 28px); background: var(--paper-2); border: 1px solid var(--rule-soft); }
.pf__media { display: block; overflow: hidden; border: 1px solid var(--rule); }
.pf__media img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.pf__body { display: flex; flex-direction: column; gap: 10px; }
.pf .sty__period { color: var(--blue); }
.pf .sty__client, .pf .sty__headline { color: var(--ink); }
.pf .sty__challenge { color: var(--ink-2); }
.pf .arrow-link { align-self: flex-start; color: var(--ink); }
.more { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.more__link { display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: var(--paper-2); border: 1px solid var(--rule-soft); font-size: var(--fs-copy); font-weight: 500; color: var(--ink); transition: border-color .3s var(--ease), transform .3s var(--ease); }
.more__link:hover { border-color: var(--navy); transform: translateY(-2px); }
.more__icon { display: grid; place-items: center; flex: 0 0 32px; width: 32px; height: 32px; background: var(--wash); color: var(--navy); border-radius: 6px; }
.more__icon svg { width: 16px; height: 16px; }
@media (max-width: 1000px) { .caps, .why { grid-template-columns: 1fr 1fr; } .more { grid-template-columns: 1fr 1fr; } }
@media (max-width: 760px) { .caps, .why, .pf { grid-template-columns: 1fr; } }

/* ── products page ───────────────────────────────────────────────────── */
.pcards { display: flex; flex-direction: column; gap: clamp(26px, 3.4vw, 48px); }
.pcard { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(22px, 3.4vw, 56px); align-items: center; padding: clamp(18px, 2.2vw, 28px); background: var(--paper-2); border: 1px solid var(--rule-soft); }
.pcard:nth-child(even) .pcard__media { order: 2; }
.pcard__media { display: block; overflow: hidden; border: 1px solid var(--rule); }
.pcard__media img { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; transition: transform .6s var(--ease); }
.pcard:hover .pcard__media img { transform: scale(1.03); }
.pcard__body { display: flex; flex-direction: column; gap: 10px; }
.pcard__body .eyebrow { margin-bottom: 0; }
.pcard__name { margin: 0; font-size: var(--fs-lead); font-weight: 600; letter-spacing: -.025em; line-height: 1.1; }
.pcard__short { margin: 0; font-size: var(--fs-title); font-weight: 500; letter-spacing: -.015em; color: var(--ink); }
.pcard__copy { margin: 0 0 6px; color: var(--ink-2); max-width: 52ch; }
.pcard .arrow-link { align-self: flex-start; }
@media (max-width: 800px) { .pcard { grid-template-columns: 1fr; } .pcard:nth-child(even) .pcard__media { order: 0; } }

/* ── article pages ───────────────────────────────────────────────────── */
.art__meta { margin: clamp(18px, 2.2vw, 28px) 0 0; font-size: var(--fs-small); color: rgba(255,255,255,.7); }
.art__in { max-width: 860px; }
.art__cover { margin: calc(-1 * var(--sec-y) + clamp(28px, 3.5vw, 48px)) 0 clamp(28px, 3.5vw, 48px); }
.art__cover img { width: 100%; height: auto; aspect-ratio: 21 / 9; object-fit: cover; border: 1px solid var(--rule); }
.art__body { max-width: 68ch; }
.art__body h2 { margin: clamp(30px, 3.6vw, 48px) 0 12px; font-size: var(--fs-lead); font-weight: 600; letter-spacing: -.025em; line-height: 1.15; }
.art__body h2:first-child { margin-top: 0; }
.art__body p { margin: 0 0 16px; font-size: var(--fs-name); line-height: 1.7; color: var(--ink-2); }
.art__body ol { margin: 0 0 16px; padding-left: 22px; }
.art__body li { margin: 0 0 10px; font-size: var(--fs-name); line-height: 1.6; color: var(--ink-2); padding-left: 4px; }
.art__body li::marker { color: var(--navy); font-weight: 600; }
/* links inside the dark get-started band: white in the brief, navy in the white form card */
.go__contact p > a { color: #fff; }
.go .form a { color: var(--navy); text-decoration: underline; text-underline-offset: 3px; }
.go .form a:hover { color: var(--blue); }
/* the drop-down head: label, lede and the "all" link on one line */
.mega__head { grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; }
.mega__head .arrow-link { justify-self: end; }
@media (max-width: 900px) { .mega__head { display: none; } }
/* quiet links still clear 4.5:1 on every ground; dots have a 24px target */
a.arrow-link--quiet { color: var(--ink-2); opacity: 1; }
a.arrow-link--quiet:hover { color: var(--ink); opacity: 1; }
.testi__dot { position: relative; width: 24px; height: 24px; background: none; }
.testi__dot::before { content: ''; position: absolute; inset: 8px; border-radius: 50%; background: var(--rule); transition: background .3s var(--ease), transform .3s var(--ease); }
.testi__dot[aria-pressed="true"] { transform: none; }
.testi__dot[aria-pressed="true"]::before { background: var(--navy); transform: scale(1.3); }
.testi__track:focus-visible { outline: 2px solid var(--navy); outline-offset: 4px; }

/* ══════════════════════════════════════════════════════════════════════
   DESIGN REFERENCES — the four screenshots the owner supplied on 21 Oct
   (kept in qa/design-refs/):
   the about/stats split, the numbered "What we do" rows, the deep-blue
   photographic band, and the ruled news features. Same tokens throughout.
   ══════════════════════════════════════════════════════════════════════ */

/* the faint plus-grid that sits in a corner of each reference */
.plusgrid { position: relative; }
.plusgrid::after {
  content: '';
  position: absolute; z-index: 0; pointer-events: none;
  top: 0; left: 0; width: clamp(160px, 22vw, 300px); height: clamp(220px, 30vw, 380px);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26'%3E%3Cpath d='M13 9.5v7M9.5 13h7' stroke='%2316395e' stroke-opacity='.26' stroke-width='1'/%3E%3C/svg%3E");
  -webkit-mask-image: linear-gradient(135deg, #000 30%, transparent 100%);
  mask-image: linear-gradient(135deg, #000 30%, transparent 100%);
}
.plusgrid--br::after { top: auto; left: auto; right: 0; bottom: 0; -webkit-mask-image: linear-gradient(315deg, #000 30%, transparent 100%); mask-image: linear-gradient(315deg, #000 30%, transparent 100%); }
.plusgrid--tr::after { left: auto; right: 0; -webkit-mask-image: linear-gradient(225deg, #000 30%, transparent 100%); mask-image: linear-gradient(225deg, #000 30%, transparent 100%); }
.plusgrid > .shell { position: relative; z-index: 1; }

/* ── 02 about / trust: headline left, copy and figures right ─────────── */
.trust { text-align: left; }
.trust__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 80px); align-items: end; }
.trust__lead .display { margin-bottom: 0; max-width: 17ch; }
.trust__body { display: flex; flex-direction: column; gap: clamp(28px, 3.6vw, 52px); }
.trust__copy { margin: 0; max-width: 54ch; color: var(--ink-2); }
.trust__stats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(18px, 2.4vw, 34px); margin: 0; max-width: none; }
.trust__stats .stat { padding-top: 0; border-top: 0; text-align: left; }
.trust__stats .stat__n { font-size: clamp(34px, 3.4vw, 50px); font-weight: 300; letter-spacing: -.03em; }
.trust__stats .stat__l { margin: 10px 0 0; max-width: 16ch; font-size: var(--fs-small); color: var(--ink-2); }
.trust .marquee { margin-top: clamp(40px, 5vw, 72px); padding-top: clamp(22px, 2.8vw, 36px); border-top: 1px solid var(--rule); }
.trust__line { display: none; }
@media (max-width: 900px) { .trust__grid { grid-template-columns: 1fr; gap: 22px; } }
@media (max-width: 560px) { .trust__stats { grid-template-columns: 1fr 1fr; } }

/* ── 03 what we do: numbered rows ────────────────────────────────────── */
.svcs__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; padding-bottom: clamp(18px, 2.2vw, 28px); }
.svcs__head .display { margin-bottom: 0; }
.srows { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--rule); }
.srow { display: grid; grid-template-columns: 72px minmax(0, .9fr) minmax(0, 1.6fr); gap: clamp(18px, 3vw, 48px); padding: clamp(26px, 3vw, 40px) 0; border-bottom: 1px solid var(--rule); transition: background .4s var(--ease); }
.srow__n { font-size: var(--fs-copy); font-style: italic; letter-spacing: .02em; color: var(--ink-2); padding-top: 2px; }
.srow__name { margin: 0; font-size: var(--fs-small); font-weight: 500; letter-spacing: .08em; text-transform: uppercase; line-height: 1.5; color: var(--ink); padding-top: 1px; }
.srow__name a { position: relative; }
.srow__name a::after { content: ''; position: absolute; left: 0; bottom: -3px; width: 100%; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform .4s var(--ease); }
.srow:hover .srow__name a::after { transform: scaleX(1); transform-origin: left; }
.srow__body { display: flex; flex-direction: column; gap: 16px; }
.srow__body p { margin: 0; max-width: 68ch; color: var(--ink-2); }
.srow__chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.srow__chips li { padding: 6px 11px; background: var(--chip); font-size: var(--fs-small); color: var(--ink-2); white-space: nowrap; }
.srow__go { align-self: flex-start; }
@media (max-width: 900px) { .srow { grid-template-columns: 48px minmax(0, 1fr); } .srow__body { grid-column: 2; } }
@media (max-width: 560px) { .srow { grid-template-columns: 1fr; gap: 10px; } .srow__body { grid-column: 1; } }

/* ── 05 how we work: the deep-blue band with the photograph on the right ─ */
.led { position: relative; isolation: isolate; overflow: clip; min-height: clamp(480px, 56vw, 640px); display: flex; align-items: center; background: var(--navy-deep); padding-top: var(--sec-y); padding-bottom: var(--sec-y); }
.led__bg { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 78% 50%; }
.led::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(95deg, rgba(8,34,62,.96) 0%, rgba(8,34,62,.9) 42%, rgba(8,34,62,.45) 70%, rgba(8,34,62,.2) 100%); }
.led::after { content: ''; position: absolute; z-index: -1; left: 0; bottom: 0; width: clamp(160px, 22vw, 300px); height: clamp(220px, 30vw, 380px); pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26'%3E%3Cpath d='M13 9.5v7M9.5 13h7' stroke='%23ffffff' stroke-opacity='.18' stroke-width='1'/%3E%3C/svg%3E"); -webkit-mask-image: linear-gradient(45deg, #000 30%, transparent 100%); mask-image: linear-gradient(45deg, #000 30%, transparent 100%); }
.led__in { position: relative; width: 100%; }
.led .eyebrow { color: rgba(255,255,255,.78); }
.led .display { color: #fff; max-width: 16ch; margin-bottom: clamp(22px, 2.8vw, 36px); }
.led__cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(20px, 3vw, 44px); max-width: 760px; margin-bottom: clamp(36px, 5vw, 72px); }
.led__cols p { margin: 0; font-size: var(--fs-copy); line-height: 1.6; color: rgba(255,255,255,.84); }
.led .arrow-link { color: #fff; }
@media (max-width: 760px) { .led__cols { grid-template-columns: 1fr; } .led::before { background: linear-gradient(180deg, rgba(8,34,62,.96) 0%, rgba(8,34,62,.9) 70%, rgba(8,34,62,.6) 100%); } }

/* ── 07 news: ruled features ─────────────────────────────────────────── */
.post { background: none; border: 0; gap: 0; }
.post:hover { transform: none; box-shadow: none; }
.post__t { margin: 0; padding: 14px 0; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--rule); font-size: var(--fs-small); font-weight: 500; letter-spacing: .06em; text-transform: uppercase; line-height: 1.45; }
.post__t a { display: flex; justify-content: space-between; gap: 18px; color: var(--ink); }
.post__t a > span:last-child { text-align: right; }
.post__plus { flex: 0 0 auto; font-weight: 400; font-size: var(--fs-name); line-height: 1; color: var(--ink-2); transition: transform .4s var(--ease); }
.post:hover .post__plus { transform: rotate(90deg); }
.post__media { margin: clamp(18px, 2.2vw, 28px) 0 clamp(16px, 2vw, 24px); }
.post__media img { aspect-ratio: 3 / 2; }
.post__meta { margin: 0 0 10px; font-size: var(--fs-small); color: var(--ink-3); }
.post__tag { position: static; padding: 0; background: none; color: var(--navy); font-size: inherit; letter-spacing: .04em; }
.post__x { margin: 0 0 16px; color: var(--ink-2); }
.post__chips { display: flex; flex-wrap: wrap; gap: 8px; margin: auto 0 0; padding: 0; list-style: none; }
.post__chips li { padding: 6px 11px; background: var(--chip); font-size: var(--fs-small); color: var(--ink-2); }

/* ══════════════════════════════════════════════════════════════════════
   THE SAME LOOK EVERYWHERE — the reference kit (ruled numbered rows, ruled
   features, the photographic band, the plus-grid) applied to every page.
   ══════════════════════════════════════════════════════════════════════ */

/* every closing band is the photographic band */
.endnote { background: var(--navy-deep) url('../img/home/hero-bg.jpg') 78% 50% / cover no-repeat; min-height: clamp(380px, 42vw, 520px); display: flex; align-items: center; }
.endnote::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(95deg, rgba(8,34,62,.96) 0%, rgba(8,34,62,.9) 42%, rgba(8,34,62,.45) 70%, rgba(8,34,62,.2) 100%); }
.endnote::after { content: ''; position: absolute; z-index: -1; left: 0; bottom: 0; width: clamp(160px, 22vw, 300px); height: clamp(220px, 30vw, 380px); pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26'%3E%3Cpath d='M13 9.5v7M9.5 13h7' stroke='%23ffffff' stroke-opacity='.18' stroke-width='1'/%3E%3C/svg%3E"); -webkit-mask-image: linear-gradient(45deg, #000 30%, transparent 100%); mask-image: linear-gradient(45deg, #000 30%, transparent 100%); }
.endnote .dotgrid { display: none; }
.endnote .shell { position: relative; width: 100%; }
.endnote .eyebrow { color: rgba(255,255,255,.78); }
.endnote .display { max-width: 16ch; }
.endnote p { color: rgba(255,255,255,.84); max-width: 48ch; }
.story__next { gap: clamp(28px, 4vw, 64px); max-width: 980px; }
@media (max-width: 760px) { .endnote::before { background: linear-gradient(180deg, rgba(8,34,62,.96) 0%, rgba(8,34,62,.9) 70%, rgba(8,34,62,.6) 100%); } }

/* page heroes carry the same white plus-grid in the corner */
.chero::after { content: ''; position: absolute; z-index: -1; left: 0; bottom: 0; width: clamp(160px, 22vw, 300px); height: clamp(180px, 24vw, 300px); pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26'%3E%3Cpath d='M13 9.5v7M9.5 13h7' stroke='%23ffffff' stroke-opacity='.16' stroke-width='1'/%3E%3C/svg%3E"); -webkit-mask-image: linear-gradient(45deg, #000 30%, transparent 100%); mask-image: linear-gradient(45deg, #000 30%, transparent 100%); }
.chero .shell { position: relative; }

/* the plus-grid on a dark band is white */
.band-ink.plusgrid::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26'%3E%3Cpath d='M13 9.5v7M9.5 13h7' stroke='%23ffffff' stroke-opacity='.18' stroke-width='1'/%3E%3C/svg%3E"); }

/* the numbered rows wherever a list is ordered: steps, founders, reasons */
.srow__name a { color: inherit; }
.srow__chips { margin-top: 2px; }
.srows .srow:last-child { border-bottom: 1px solid var(--rule); }
.band-ink .srows, .band-ink .srow { border-color: rgba(255,255,255,.18); }

/* the ruled features wherever items carry an image: case studies, products */
.feats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 2.6vw, 36px); }
.feats--1 { grid-template-columns: minmax(0, 1fr); }
.feats--1 .post { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 clamp(22px, 3vw, 48px); align-items: start; }
.feats--1 .post__t { grid-column: 1 / -1; }
.feats--1 .post__media { grid-row: 2 / 6; margin-bottom: 0; }
.feats--1 .post__meta { margin-top: clamp(18px, 2.2vw, 28px); }
.feats .post[hidden] { display: none; }
@media (max-width: 900px) { .feats { grid-template-columns: 1fr; max-width: 560px; } .feats--1 { max-width: none; } .feats--1 .post { grid-template-columns: 1fr; } .feats--1 .post__media { grid-row: auto; } }

/* the ruled link list: the other solutions on a service page */
.rlist { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(24px, 3vw, 48px); margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--ink); }
.rlist li { border-bottom: 1px solid var(--rule); }
.rlist a { display: flex; justify-content: space-between; gap: 18px; padding: 14px 0; font-size: var(--fs-small); font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--ink); transition: color .3s var(--ease); }
.rlist a:hover { color: var(--navy); }
.rlist a > span:last-child { text-align: right; }
.rlist a:hover .post__plus { transform: rotate(90deg); }
@media (max-width: 620px) { .rlist { grid-template-columns: 1fr; } }

/* the contact page's enquiry section takes the same plus-grid */
.ctc.plusgrid::after { top: var(--hero-top); }
/* case-study and product features keep the full frame of their image */
.feats .post__media img { aspect-ratio: 16 / 9; }
.post .arrow-link { margin-top: 14px; align-self: flex-start; color: var(--ink); }

/* ── FAQs on the service pages: ruled rows that open, no JavaScript needed ── */
.faq { border-top: 1px solid var(--ink); }
.faq__item { border-bottom: 1px solid var(--rule); }
.faq__q { display: grid; grid-template-columns: 48px minmax(0, 1fr) 24px; gap: 16px; align-items: start; padding: clamp(16px, 2vw, 22px) 0; cursor: pointer; list-style: none; font-size: var(--fs-title); font-weight: 500; letter-spacing: -.018em; line-height: 1.3; color: var(--ink); transition: color .3s var(--ease); }
.faq__q::-webkit-details-marker { display: none; }
.faq__q:hover { color: var(--navy); }
.faq__q:focus-visible { outline: 2px solid var(--navy); outline-offset: 4px; }
.faq__n { font-size: var(--fs-copy); font-style: italic; color: var(--ink-2); padding-top: 3px; }
.faq__q .post__plus { justify-self: end; padding-top: 4px; }
.faq__item[open] .faq__q .post__plus { transform: rotate(45deg); }
.faq__a { padding: 0 0 clamp(18px, 2.2vw, 26px) 64px; }
.faq__a p { margin: 0; max-width: 68ch; color: var(--ink-2); }
@media (max-width: 620px) { .faq__q { grid-template-columns: minmax(0, 1fr) 24px; } .faq__n { display: none; } .faq__a { padding-left: 0; } }
/* belt and braces: a closed question never shows its answer, whatever the engine does with <details> */
.faq__item:not([open]) > .faq__a { display: none; }

/* ── client logos in the marquee: the supplied marks, one height, one grey ── */
.marquee__item img { display: block; height: 56px; width: auto; max-width: none; opacity: .9; transition: opacity .3s var(--ease); }
.marquee__item:hover img { opacity: 1; }
.marquee__track { gap: clamp(44px, 6vw, 96px); align-items: center; }
@media (max-width: 620px) { .marquee__item img { height: 40px; } }

/* the pill button, for the one call to action that is a button rather than a link */
.btn { display: inline-flex; align-items: center; gap: 10px; margin-top: clamp(22px, 2.6vw, 30px); padding: 13px 26px; border-radius: 999px; background: var(--navy-deep); color: #fff; font-size: var(--fs-copy); font-weight: 500; transition: background .3s var(--ease), transform .3s var(--ease); }
.btn svg { width: 11px; height: 11px; transition: transform .35s var(--ease); }
.btn:hover { background: var(--navy); transform: translateY(-1px); }
.btn:hover svg { transform: translate(3px, -3px); }
.btn:focus-visible { outline: 2px solid var(--navy); outline-offset: 3px; }

/* the Microsoft partnership line under the hero's calls to action */
.hero__partner { display: inline-grid; grid-template-columns: 22px minmax(0, 1fr); gap: 14px; align-items: center; margin: clamp(32px, 4vw, 52px) 0 0; padding: 12px 18px 12px 14px; border: 1px solid rgba(255,255,255,.28); border-radius: 8px; background: rgba(8,34,62,.35); backdrop-filter: blur(6px); font-size: var(--fs-small); line-height: 1.4; color: rgba(255,255,255,.82); }
.hero__partner svg { width: 22px; height: 22px; }
.hero__partner strong { display: block; font-weight: 600; font-size: var(--fs-copy); color: #fff; letter-spacing: -.005em; }

/* ══════════════════════════════════════════════════════════════════════
   POLISH — the hero partnership on the right, smaller uniform logos, a wider
   measure so content fills the page, and a white ground for Solutions.
   ══════════════════════════════════════════════════════════════════════ */

/* the shell runs wider and the long-form measures follow, so the page no
   longer leaves empty margins on wide screens */
:root { --shell: 1560px; --gutter: clamp(20px, 3.4vw, 52px); }
.trust__copy { max-width: 64ch; }
.sec__head .lede, .values__head .lede, .what__head .lede { max-width: 56ch; }
.srow__body p { max-width: 80ch; }
.srow { grid-template-columns: 72px minmax(0, .8fr) minmax(0, 1.8fr); }
.led__cols { max-width: 880px; }
.art__in { max-width: 980px; }
.art__body { max-width: 76ch; }
.story__next { max-width: 1120px; }
.endnote p { max-width: 56ch; }
.chero__copy { max-width: 60ch; }
.hero__copy { max-width: 52ch; }

/* the hero: text on the left, the partnership on the right, both on the
   same baseline; no card, just the mark and two lines with a little air */
.hero__in { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: clamp(28px, 4vw, 72px); align-items: end; }
.hero__text { min-width: 0; }
.hero__partner { display: grid; grid-template-columns: 26px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 14px; row-gap: 6px; align-items: center; margin: 0; padding: 0; border: 0; background: none; backdrop-filter: none; text-align: left; }
.hero__partner svg { grid-row: 1 / 3; width: 26px; height: 26px; align-self: center; }
.hero__partner-name { font-size: var(--fs-name); font-weight: 600; letter-spacing: -.005em; color: #fff; line-height: 1.2; }
.hero__partner-line { font-size: var(--fs-small); color: rgba(255,255,255,.78); line-height: 1.4; }
@media (max-width: 900px) { .hero__in { grid-template-columns: 1fr; } .hero__partner { margin-top: clamp(28px, 5vw, 44px); } }

/* client logos: every mark sits in the same box, so none dominates */
.marquee__item img { height: 36px; width: 128px; max-width: 128px; object-fit: contain; opacity: .85; }
.marquee__track { gap: clamp(36px, 4.5vw, 72px); }
@media (max-width: 620px) { .marquee__item img { height: 30px; width: 104px; max-width: 104px; } }

/* Solutions & Expertise on pure white */
.svcs { background-color: #fff; }
.svcs .srow__chips li { background: var(--wash); }

/* ══════════════════════════════════════════════════════════════════════
   STORIES PANEL — "Built together. Still working." after the owner's
   stories-panel reference (qa/design-refs/stories-panel.png): intro and
   the client list on the left, one story's visual and copy on the right,
   two actions per story, the video opening in an overlay. The ground is the
   hero photograph rather than the near-black of the reference.
   ══════════════════════════════════════════════════════════════════════ */
.built { position: relative; isolation: isolate; overflow: clip; background: var(--navy-deep); }
.built__bg { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 60% 50%; }
.built::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(100deg, rgba(8,34,62,.94) 0%, rgba(8,34,62,.86) 40%, rgba(8,34,62,.62) 72%, rgba(8,34,62,.48) 100%), linear-gradient(to bottom, rgba(8,34,62,.5) 0%, rgba(8,34,62,0) 30%, rgba(8,34,62,0) 70%, rgba(8,34,62,.4) 100%); }
.built .shell { position: relative; }

.stories__frame { grid-template-columns: minmax(280px, .38fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 88px); align-items: start; }
.stories__intro { position: relative; }
.stories__intro .lede { margin-bottom: clamp(20px, 2.4vw, 30px); max-width: 40ch; }
.stories__all { margin-top: 0; }
.btn--light { background: #fff; color: var(--navy-deep); }
.btn--light:hover { background: var(--wash); color: var(--navy-deep); }
.btn--ghost { background: none; color: #fff; border: 1px solid rgba(255,255,255,.4); }
.btn--ghost:hover { background: rgba(255,255,255,.12); border-color: #fff; }
.btn--ghost svg, .btn--light svg { width: 11px; height: 11px; }
.btn--ghost:focus-visible, .btn--light:focus-visible { outline-color: #fff; }

/* the client list: a left bar marks the active one, an arrow appears on hover */
.stories__rail { margin-top: clamp(28px, 3.4vw, 44px); border-top: 1px solid rgba(255,255,255,.16); }
.stories__tab { grid-template-columns: minmax(0, 1fr) 18px; gap: 2px 12px; padding: 13px 0 13px 14px; border-left: 2px solid transparent; transition: color .3s var(--ease), border-color .3s var(--ease), background .3s var(--ease); }
.stories__tab:hover { background: rgba(255,255,255,.05); }
.stories__tab[aria-pressed="true"] { padding-left: 14px; border-left-color: #fff; color: #fff; }
.stories__tab-name { font-size: var(--fs-name); }
.stories__tab-go { grid-row: 1 / 3; align-self: center; opacity: 0; transform: translateX(-6px); transition: opacity .3s var(--ease), transform .3s var(--ease); }
.stories__tab-go svg { width: 12px; height: 12px; }
.stories__tab:hover .stories__tab-go, .stories__tab[aria-pressed="true"] .stories__tab-go { opacity: 1; transform: none; }

/* the story: the visual in a bordered panel, copy and two actions beneath */
.sty { display: flex; flex-direction: column; gap: clamp(18px, 2.2vw, 26px); padding: 0; background: none; border: 0; backdrop-filter: none; }
.sty__panel { position: relative; overflow: hidden; border: 1px solid rgba(255,255,255,.22); background: rgba(8,34,62,.5); aspect-ratio: 16 / 9; }
.sty__panel::before, .sty__panel::after { content: '+'; position: absolute; z-index: 2; font-size: 14px; line-height: 1; color: rgba(255,255,255,.7); }
.sty__panel::before { top: -7px; left: -4px; }
.sty__panel::after { top: -7px; right: -4px; }
.sty__poster { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s var(--ease); }
.sty:hover .sty__poster { transform: scale(1.02); }
.sty__play { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; }
.sty__play svg { width: 72px; height: 72px; padding: 24px; border-radius: 50%; background: rgba(8,34,62,.72); border: 1px solid rgba(255,255,255,.5); backdrop-filter: blur(4px); box-sizing: border-box; transition: transform .35s var(--ease), background .35s var(--ease); }
.sty__play:hover svg { transform: scale(1.08); background: var(--navy); }
.sty__play:focus-visible { outline: 2px solid #fff; outline-offset: -6px; }
.sty__len { position: absolute; right: 14px; bottom: 12px; padding: 4px 9px; background: rgba(8,34,62,.72); border: 1px solid rgba(255,255,255,.25); font-size: var(--fs-eyebrow); letter-spacing: .06em; color: #fff; }
.sty__panel--today { display: grid; place-items: center; padding: 24px; }
.sty__big { margin: 0; font-size: var(--fs-display); font-weight: 500; letter-spacing: -.026em; color: #fff; text-align: center; }
.sty__period { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.sty__client { display: block; font-size: var(--fs-title); font-weight: 500; letter-spacing: -.018em; line-height: 1.3; }
.sty__sep { color: rgba(255,255,255,.5); }
.sty__challenge strong { color: #fff; font-weight: 500; }
.sty__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 4px; }
.sty__actions .btn { margin-top: 0; }
.stories--live .sty { inset: 0 0 auto; }
@media (max-width: 1080px) { .stories__frame { grid-template-columns: 1fr; } .stories__rail { flex-direction: column; gap: 0; border-top: 1px solid rgba(255,255,255,.16); margin-bottom: clamp(20px, 3vw, 32px); } .stories__tab { width: 100%; grid-template-columns: minmax(0, 1fr) 18px; padding: 11px 0 11px 14px; border-bottom: 1px solid rgba(255,255,255,.12); } .stories__tab[aria-pressed="true"] { border-bottom-color: rgba(255,255,255,.12); } .stories__tab-p { display: block; } }

/* the overlay */
.vmodal { width: min(1120px, 92vw); max-width: none; padding: 0; border: 0; background: #000; color: #fff; box-shadow: 0 40px 90px -30px rgba(0,0,0,.8); }
.vmodal::backdrop { background: rgba(4,16,32,.86); backdrop-filter: blur(4px); }
.vmodal__video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; background: #000; }
.vmodal__title { margin: 0; padding: 12px 18px; font-size: var(--fs-small); color: rgba(255,255,255,.78); background: var(--navy-deep); }
.vmodal__close { position: absolute; top: 10px; right: 10px; z-index: 2; display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 1px solid rgba(255,255,255,.4); border-radius: 50%; background: rgba(8,34,62,.8); color: #fff; cursor: pointer; }
.vmodal__close svg { width: 14px; height: 14px; }
.vmodal__close:hover { background: var(--navy); }
.vmodal__close:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
html.has-modal { overflow: hidden; }
/* the light pill keeps its navy text on the dark band; the tab's arrow takes the second column */
.band-ink .btn--light, .built .btn--light { color: var(--navy-deep); }
.stories__tab-name, .stories__tab-p { grid-column: 1; }
.stories__tab-go { grid-column: 2; }
/* on wide screens the story stays level with the list as the list runs longer */
@media (min-width: 1081px) { .stories__stage { position: sticky; top: 96px; } }
/* the row columns collapse on small screens (the wide-measure rule above is desktop-only) */
@media (max-width: 900px) { .srow { grid-template-columns: 48px minmax(0, 1fr); } .srow__body { grid-column: 2; } }
@media (max-width: 560px) { .srow { grid-template-columns: 1fr; gap: 10px; } .srow__body { grid-column: 1; } }

/* ══════════════════════════════════════════════════════════════════════
   STORIES PANEL, AS THE REFERENCE — qa/design-refs/stories-panel.png,
   reproduced: the dark ground, the ruled top edge with its two plus marks,
   the blue glow at the head of the left column, the vertical divider, the
   bordered button with its arrow box, the list with its active bar, and the
   bordered panel on a faint grid (holding the video) with a bold line and
   grey copy beneath. Only the content differs.
   ══════════════════════════════════════════════════════════════════════ */
.built { position: relative; isolation: isolate; overflow: clip; background: #0b0c0f; color: #fff; padding-top: 0; padding-bottom: 0; }
.built::before, .built::after { content: none; }
.built__bg { display: none; }
.built > .shell { max-width: none; padding: 0; }
.stories__frame { position: relative; display: grid; grid-template-columns: minmax(300px, 36%) minmax(0, 1fr); gap: 0; align-items: stretch; border-top: 1px solid rgba(255,255,255,.14); margin-top: clamp(40px, 5vw, 64px); }
.stories__frame::before, .stories__frame::after { content: '+'; position: absolute; top: -9px; font-size: 15px; line-height: 1; font-weight: 300; color: rgba(255,255,255,.7); z-index: 2; }
.stories__frame::before { left: calc(var(--gutter) - 4px); }
.stories__frame::after { right: calc(var(--gutter) - 4px); }

/* left column */
.stories__intro { position: relative; padding: clamp(96px, 11vw, 150px) clamp(16px, 2vw, 28px) clamp(28px, 3vw, 40px) var(--gutter); border-right: 1px solid rgba(255,255,255,.14); }
.stories__glow { position: absolute; top: 0; left: 0; right: 0; height: clamp(120px, 16vw, 200px); background: linear-gradient(180deg, #6fb4ef 0%, #3d7fc9 32%, rgba(16,40,72,.4) 72%, transparent 100%); pointer-events: none; }
.stories__title { position: relative; margin: 0 0 clamp(18px, 2vw, 26px); font-size: clamp(30px, 2.6vw, 38px); font-weight: 500; letter-spacing: -.02em; line-height: 1.12; color: #fff; }
.stories__lede { margin: 0 0 clamp(22px, 2.6vw, 34px); max-width: 36ch; font-size: var(--fs-copy); line-height: 1.55; color: rgba(255,255,255,.62); }
.stories__cta { display: inline-grid; grid-template-columns: minmax(0, 1fr) 30px; gap: 14px; align-items: center; padding: 7px 8px 7px 16px; border: 1px solid rgba(255,255,255,.22); border-radius: 8px; background: #121318; color: #fff; font-size: var(--fs-copy); transition: border-color .3s var(--ease), background .3s var(--ease); }
.stories__cta:hover { border-color: rgba(255,255,255,.55); background: #171920; }
.stories__cta-go { display: grid; place-items: center; width: 30px; height: 30px; border: 1px solid rgba(255,255,255,.22); border-radius: 6px; background: #0b0c0f; }
.stories__cta-go svg { width: 12px; height: 12px; }
.stories__cta:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.stories__rail { margin: clamp(26px, 3vw, 40px) 0 0; padding: 0; border: 0; }
.stories__tab { grid-template-columns: minmax(0, 1fr) 16px; gap: 0 12px; padding: 11px 0 11px 10px; border: 0; border-left: 2px solid transparent; background: none; color: rgba(255,255,255,.62); font-size: var(--fs-copy); transition: color .3s var(--ease), border-color .3s var(--ease); }
.stories__tab:hover { background: none; color: #fff; }
.stories__tab[aria-pressed="true"] { padding-left: 10px; border-left-color: #fff; color: #fff; }
.stories__tab-name { grid-column: 1; font-size: var(--fs-copy); font-weight: 400; }
.stories__tab-p { display: none; }
.stories__tab-go { grid-column: 2; grid-row: 1; align-self: center; opacity: 0; transform: translateX(-6px); transition: opacity .3s var(--ease), transform .3s var(--ease); }
.stories__tab-go svg { width: 12px; height: 12px; }
.stories__tab[aria-pressed="true"] .stories__tab-go { opacity: 1; transform: none; }

/* right column */
.stories__stage { position: static; padding: clamp(96px, 11vw, 150px) var(--gutter) clamp(28px, 3vw, 40px) clamp(20px, 2.4vw, 34px); }
.sty { display: flex; flex-direction: column; gap: 0; padding: 0; background: none; border: 0; }
.sty__panel { position: relative; overflow: hidden; border: 1px solid rgba(255,255,255,.12); border-radius: 6px; background: #0f1014 repeating-linear-gradient(45deg, rgba(255,255,255,.035) 0 1px, transparent 1px 28px), repeating-linear-gradient(-45deg, rgba(255,255,255,.035) 0 1px, transparent 1px 28px); aspect-ratio: 16 / 9; margin-bottom: clamp(18px, 2.2vw, 28px); }
.sty__panel::before, .sty__panel::after { content: none; }
.sty__video { display: block; width: 100%; height: 100%; object-fit: cover; background: #0f1014; }
.sty__panel--today { display: grid; place-items: center; padding: 24px; }
.sty__big { margin: 0; font-size: var(--fs-display); font-weight: 500; letter-spacing: -.026em; color: #fff; text-align: center; }
.sty__title { margin: 0 0 8px; font-size: var(--fs-name); font-weight: 600; letter-spacing: -.01em; line-height: 1.35; color: #fff; }
.sty__copy { margin: 0; max-width: 74ch; font-size: var(--fs-copy); line-height: 1.55; color: rgba(255,255,255,.62); }
.sty__copy a { color: #fff; white-space: nowrap; }
.sty__copy a:hover { text-decoration: underline; text-underline-offset: 3px; }
.stories--live .sty { inset: 0 0 auto; }
.stories__ctl { margin-top: clamp(18px, 2vw, 26px); }
.stories__btn { width: 32px; height: 32px; border-color: rgba(255,255,255,.22); }
.stories__btn svg { width: 11px; height: 11px; }
.stories__bar { background: rgba(255,255,255,.12); }
.stories__bar i { background: #6fb4ef; }
@media (min-width: 1081px) { .stories__stage { position: static; top: auto; } }
@media (max-width: 1080px) {
  .stories__frame { grid-template-columns: 1fr; }
  .stories__intro { border-right: 0; border-bottom: 1px solid rgba(255,255,255,.14); padding-right: var(--gutter); }
  .stories__stage { padding-top: clamp(28px, 4vw, 40px); padding-left: var(--gutter); }
  .stories__rail { flex-direction: column; margin-bottom: 0; border-top: 0; }
  .stories__tab { width: 100%; padding: 11px 0 11px 10px; border-bottom: 0; }
  .stories__tab[aria-pressed="true"] { border-bottom-color: transparent; }
}
.sty, .sty__title, .sty__copy { text-align: left; margin-left: 0; margin-right: 0; }
.sty__link { color: #fff; white-space: nowrap; border-bottom: 1px solid rgba(255,255,255,.35); }
.sty__link:hover { border-bottom-color: #fff; }
.stories__frame::before, .stories__frame::after { color: #fff; font-size: 17px; }
.sty { align-items: stretch; }

/* ══════════════════════════════════════════════════════════════════════
   HARMONY PASS — the stories panel on the hero photograph and inside the
   shell; the horizontal timeline (qa/design-refs/timeline.png) in the
   site's blues; "Client stories" (qa/design-refs/testimonials.png); and the
   ruled, plus-marked section header the references share, everywhere.
   ══════════════════════════════════════════════════════════════════════ */

/* ── the stories panel: hero photograph instead of black, shell-aligned ── */
.built { background: var(--navy-deep); padding-top: var(--sec-y); padding-bottom: var(--sec-y); }
.built__bg { display: block; position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 60% 50%; }
.built::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(100deg, rgba(8,34,62,.94) 0%, rgba(8,34,62,.88) 45%, rgba(8,34,62,.7) 75%, rgba(8,34,62,.58) 100%), linear-gradient(to bottom, rgba(8,34,62,.5) 0%, rgba(8,34,62,0) 30%, rgba(8,34,62,0) 70%, rgba(8,34,62,.4) 100%); }
.built > .shell { max-width: var(--shell); padding-inline: var(--gutter); }
.stories__frame { margin-top: 0; border-top: 1px solid rgba(255,255,255,.22); border-bottom: 1px solid rgba(255,255,255,.22); }
.stories__frame::before { left: -4px; }
.stories__frame::after { right: -4px; }
.stories__frame::before, .stories__frame::after { top: -9px; }
.stories__intro { padding: clamp(80px, 9vw, 130px) clamp(16px, 2vw, 28px) clamp(28px, 3vw, 40px) 0; border-right-color: rgba(255,255,255,.22); }
.stories__glow { right: clamp(16px, 2vw, 28px); background: linear-gradient(180deg, #8fc3f3 0%, #4a8cd4 30%, rgba(42,92,138,.35) 70%, transparent 100%); }
.stories__stage { padding: clamp(80px, 9vw, 130px) 0 clamp(28px, 3vw, 40px) clamp(20px, 2.4vw, 34px); }
.stories__cta { background: rgba(8,34,62,.55); border-color: rgba(255,255,255,.3); }
.stories__cta:hover { background: rgba(8,34,62,.8); }
.stories__cta-go { background: rgba(8,34,62,.7); border-color: rgba(255,255,255,.3); }
.stories__lede, .stories__tab, .sty__copy { color: rgba(255,255,255,.74); }
.sty__panel { background-color: rgba(8,34,62,.55); border-color: rgba(255,255,255,.22); }
.sty__video { background: rgba(8,34,62,.4); }
.stories__bar i { background: #8fc3f3; }
@media (max-width: 1080px) { .stories__intro { padding-right: 0; border-bottom-color: rgba(255,255,255,.22); } .stories__glow { right: 0; } .stories__stage { padding-left: 0; } }

/* ── the ruled, plus-marked header both references share ─────────────── */
.sec__head { position: relative; border-bottom: 1px solid var(--rule); padding-bottom: clamp(26px, 3.2vw, 40px); margin-bottom: clamp(28px, 3.6vw, 48px); }
.sec__head::after { content: '+'; position: absolute; left: 50%; bottom: -10px; transform: translateX(-50%); font-size: 17px; line-height: 1; font-weight: 300; color: var(--ink-3); background: inherit; }
.band-ink .sec__head { border-bottom-color: rgba(255,255,255,.22); }
.band-ink .sec__head::after { color: rgba(255,255,255,.7); }
.svcs__head { border-bottom: 0; }

/* ── the horizontal timeline ─────────────────────────────────────────── */
.tline { --disc: 96px; position: relative; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: clamp(14px, 1.8vw, 28px); margin: 0; padding: 0; list-style: none; }
.tline::before { content: ''; position: absolute; left: calc(100% / var(--n) / 2); right: calc(100% / var(--n) / 2); top: calc(var(--disc) / 2); height: 2px; background: var(--rule); z-index: 0; }
.tline::after { content: ''; position: absolute; left: calc(100% / var(--n) / 2); right: calc(100% / var(--n) / 2); top: calc(var(--disc) / 2); height: 2px; background: var(--navy); transform: scaleX(0); transform-origin: left; transition: transform 1.6s var(--ease) .2s; z-index: 0; }
.tline.is-drawn::after { transform: scaleX(1); }
.tline__step { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; }
.tline__disc { display: grid; place-content: center; justify-items: center; width: var(--disc); height: var(--disc); border-radius: 50%; background: #fff; box-shadow: 0 10px 24px -12px rgba(8,34,62,.5), inset 0 0 0 1px var(--rule); color: var(--navy); transform: scale(.4); opacity: 0; transition: transform .6s var(--ease), opacity .6s var(--ease); transition-delay: calc(.25s + var(--i) * .35s); }
.tline__disc b { font-size: 30px; font-weight: 500; letter-spacing: -.03em; line-height: 1; }
.tline__disc i { margin-top: 4px; font-size: 10px; font-style: normal; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
.tline.is-drawn .tline__disc { transform: none; opacity: 1; }
.tline__plate { position: relative; width: 100%; margin-top: 26px; padding: clamp(18px, 2vw, 24px) clamp(18px, 2vw, 26px) clamp(18px, 2vw, 24px) 52px; border-radius: 10px; background: var(--plate, var(--navy)); color: #fff; opacity: 0; transform: translateY(16px); transition: transform .6s var(--ease), opacity .6s var(--ease); transition-delay: calc(.45s + var(--i) * .35s); min-height: 150px; }
.tline__plate::before { content: ''; position: absolute; top: -12px; left: 50%; width: 24px; height: 24px; border-radius: 4px; background: inherit; transform: translateX(-50%) rotate(45deg); }
.tline.is-drawn .tline__plate { opacity: 1; transform: none; }
.tline__chev { position: absolute; left: 18px; top: calc(clamp(18px, 2vw, 24px) + 1px); display: grid; place-items: center; width: 22px; height: 22px; color: inherit; opacity: .85; }
.tline__chev svg { width: 14px; height: 14px; }
.tline__t { margin: 0 0 8px; font-size: var(--fs-small); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; line-height: 1.4; color: inherit; }
.tline__c { margin: 0; font-size: var(--fs-copy); line-height: 1.5; color: inherit; opacity: .9; }
.tline__step:nth-child(1) { --plate: #0b2642; }
.tline__step:nth-child(2) { --plate: #16395e; }
.tline__step:nth-child(3) { --plate: #2a5c8a; }
.tline__step:nth-child(4) { --plate: #3d7fc9; }
.tline__step:nth-child(5) { --plate: #5f8fb5; }
.tline__step:nth-child(6) { --plate: #7fa6c8; }
.tline__step:nth-child(5) .tline__plate, .tline__step:nth-child(6) .tline__plate { color: var(--ink); }
.tline__step:nth-child(5) .tline__disc b, .tline__step:nth-child(6) .tline__disc b { color: var(--blue); }
.band-ink .tline::before { background: rgba(255,255,255,.2); }
.band-ink .tline::after { background: #8fc3f3; }
@media (prefers-reduced-motion: reduce) { .tline::after, .tline__disc, .tline__plate { transition: none; } }
@media (max-width: 1080px) { .tline--6 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .tline--6::before, .tline--6::after { display: none; } }
@media (max-width: 760px) {
  .tline, .tline--6 { grid-template-columns: 1fr; gap: 18px; --disc: 72px; }
  .tline::before, .tline::after { display: none; }
  .tline__step { flex-direction: row; align-items: flex-start; gap: 16px; }
  .tline__disc { flex: 0 0 var(--disc); }
  .tline__disc b { font-size: 24px; }
  .tline__plate { margin-top: 0; min-height: 0; }
  .tline__plate::before { top: 24px; left: -8px; transform: rotate(45deg); }
}

/* ── client stories ──────────────────────────────────────────────────── */
.testi { background: linear-gradient(180deg, #fff 0%, var(--paper) 40%); }
.cs__head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 64px); align-items: start; padding-bottom: clamp(36px, 5vw, 72px); border-bottom: 1px solid var(--rule); position: relative; }
.cs__head::after { content: '+'; position: absolute; left: 50%; bottom: -10px; transform: translateX(-50%); font-size: 17px; line-height: 1; font-weight: 300; color: var(--ink-3); }
.cs__title { margin: 0; font-size: clamp(44px, 5.6vw, 84px); font-weight: 400; letter-spacing: -.035em; line-height: 1; color: var(--ink); }
.cs__lede { margin: 10px 0 0; max-width: 24ch; font-size: var(--fs-copy); line-height: 1.5; color: var(--ink-2); }
.cs { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 64px); align-items: stretch; padding-top: clamp(48px, 6vw, 88px); }
.cs__side { display: flex; flex-direction: column; justify-content: space-between; gap: clamp(40px, 6vw, 96px); }
.cs__rail { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 4px; }
.cs__tab { display: inline-flex; align-items: center; gap: 12px; padding: 6px 0; border: 0; background: none; font-size: var(--fs-small); font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); opacity: .55; cursor: pointer; text-align: left; transition: opacity .3s var(--ease), color .3s var(--ease); }
.cs__tab:hover { opacity: 1; }
.cs__tab[aria-pressed="true"] { opacity: 1; color: var(--ink); }
.cs__tab-go { display: inline-grid; place-items: center; opacity: 0; transform: translateX(-6px); transition: opacity .3s var(--ease), transform .3s var(--ease); }
.cs__tab-go svg { width: 12px; height: 12px; }
.cs__tab[aria-pressed="true"] .cs__tab-go { opacity: 1; transform: none; }
.cs__tab:focus-visible { outline: 2px solid var(--navy); outline-offset: 3px; }
.cs__ctl { display: flex; }
.cs__btn { display: grid; place-items: center; width: 74px; height: 74px; padding: 0; border: 1px solid var(--rule); background: none; color: var(--ink-2); cursor: pointer; transition: background .3s var(--ease), color .3s var(--ease); }
.cs__btn + .cs__btn { border-left: 0; }
.cs__btn svg { width: 18px; height: 18px; }
.cs__btn:hover { background: #fff; color: var(--ink); }
.cs__btn:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }
.cs__main { display: flex; flex-direction: column; justify-content: space-between; gap: clamp(32px, 4vw, 56px); }
.cs__list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: clamp(28px, 4vw, 56px); }
.cs__item { display: flex; flex-direction: column; gap: clamp(36px, 5vw, 72px); }
.cs__q { margin: 0; }
.cs__q p { margin: 0; font-size: clamp(22px, 2.2vw, 32px); font-weight: 400; letter-spacing: -.022em; line-height: 1.3; color: var(--ink); }
.cs__by { display: grid; grid-template-columns: 76px minmax(0, 1fr) auto; gap: 0 22px; align-items: center; margin: 0; }
.cs__face { display: grid; place-items: center; width: 76px; height: 76px; background: linear-gradient(158deg, #e3e9f0, #c6d2df); color: var(--navy); font-size: var(--fs-name); font-weight: 600; letter-spacing: .04em; }
.cs__who { display: flex; flex-direction: column; gap: 2px; font-size: var(--fs-copy); color: var(--ink-3); }
.cs__who strong { font-weight: 500; color: var(--ink); }
.cs__stars { display: inline-flex; gap: 3px; }
.cs__stars svg { width: 14px; height: 14px; fill: var(--blue); }
.cs__more { align-self: flex-start; padding-bottom: 8px; border-bottom: 1px solid var(--ink); font-size: var(--fs-small); font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--ink); }
.cs__more span { margin-left: 44px; }
.cs__more:hover { color: var(--navy); border-color: var(--navy); }
.cs.is-live .cs__list { position: relative; height: var(--stage-h, auto); overflow: hidden; }
.cs.is-live .cs__item { position: absolute; inset: 0 0 auto; opacity: 0; visibility: hidden; transform: translateY(16px); transition: opacity .5s var(--ease), transform .5s var(--ease), visibility 0s linear .5s; }
.cs.is-live .cs__item.is-active { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
@media (prefers-reduced-motion: reduce) { .cs.is-live .cs__item { transition: none; } }
@media (max-width: 900px) { .cs__head, .cs { grid-template-columns: 1fr; } .cs__lede { max-width: 44ch; } .cs__side { gap: 24px; } .cs__rail { flex-direction: row; flex-wrap: wrap; gap: 6px 18px; } .cs__btn { width: 56px; height: 56px; } .cs__by { grid-template-columns: 56px minmax(0, 1fr); } .cs__face { width: 56px; height: 56px; } .cs__stars { grid-column: 2; } }

/* the stories panel's stage classes, generalised */
.stories__frame.is-live .stories__list { display: block; position: relative; height: var(--stage-h, auto); overflow: hidden; }
.stories__frame.is-live .sty { position: absolute; inset: 0 0 auto; opacity: 0; visibility: hidden; transform: translateY(40px); transition: opacity .6s var(--ease), transform .7s var(--ease), visibility 0s linear .7s; }
.stories__frame.is-live .sty.is-active { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.stories__frame.is-live .sty.is-above { transform: translateY(-40px); }
@media (prefers-reduced-motion: reduce) { .stories__frame.is-live .sty { transition: none; } }

/* ══════════════════════════════════════════════════════════════════════
   THE WAVES — the owner's background images (assets/img/bg/waves.jpg and
   waves-alpha.webp) replace every navy ground. Each wave band drifts slowly
   (the photograph pans, the transparent wave floats over it); under reduced
   motion both stand still. Type on these grounds is ink, not white.
   ══════════════════════════════════════════════════════════════════════ */
.wave, .chero, .endnote, .go, .built, .band-ink, .convert {
  position: relative; isolation: isolate; overflow: clip; color: var(--ink);
  background: #e9f1f8 url('../img/bg/waves.jpg') 50% 50% / cover no-repeat;
  animation: wavepan 48s ease-in-out infinite alternate;
}
.wave::before, .chero::before, .endnote::before, .go::before, .built::before, .band-ink::before, .convert::before {
  content: ''; position: absolute; inset: -6% -6%; z-index: -1; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(255,255,255,.62) 0%, rgba(255,255,255,.44) 55%, rgba(255,255,255,.58) 100%),
    url('../img/bg/waves-alpha.webp') 100% 100% / 62% auto no-repeat;
  animation: wavefloat 36s ease-in-out infinite alternate;
}
.chero::after, .endnote::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26'%3E%3Cpath d='M13 9.5v7M9.5 13h7' stroke='%2316395e' stroke-opacity='.3' stroke-width='1'/%3E%3C/svg%3E"); }
.built__bg, .led__bg { display: none; }
@keyframes wavepan { from { background-position: 42% 50%; } to { background-position: 58% 50%; } }
@keyframes wavefloat { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(-2.5%, 2%, 0) scale(1.05); } }
@media (prefers-reduced-motion: reduce) { .wave, .chero, .endnote, .go, .built, .band-ink, .convert, .wave::before, .chero::before, .endnote::before, .go::before, .built::before, .band-ink::before, .convert::before { animation: none; } }

/* ink on the waves */
.chero .eyebrow, .endnote .eyebrow, .go .eyebrow, .built .eyebrow, .band-ink .eyebrow, .convert .eyebrow, .chero__kicker { color: var(--navy); }
.chero .display, .endnote .display, .go .display, .band-ink .display, .band-ink h2, .band-ink h3, .convert .display, .chero__title, .endnote h2 { color: var(--ink); }
.chero p, .endnote p, .go p, .band-ink p, .convert p, .chero__copy, .endnote .lede, .go .lede, .band-ink .lede { color: var(--ink-2); }
.chero a, .endnote a, .band-ink a, .convert a, .chero .arrow-link, .endnote .arrow-link, .convert .arrow-link { color: var(--ink); }
.chero__meta { border-top-color: var(--rule); }
.chero__meta dt, .chero .story__meta dt { color: var(--ink-3); }
.chero__meta dd, .chero .story__meta dd { color: var(--ink); }
.chero .story__meta { border-top-color: var(--rule); }
.chero .story__meta .tbc::after { background: var(--navy); color: #fff; }
.band-ink .client-mark, .chero .client-mark { color: var(--navy); }
.art__meta { color: var(--ink-3); }
.band-ink .stat { border-color: var(--rule); }
.band-ink .stat__n { color: var(--navy); }
.band-ink .stat__l { color: var(--ink-2); }
.band-ink .srows, .band-ink .srow { border-color: var(--rule); }
.band-ink .sec__head { border-bottom-color: var(--rule); }
.band-ink .sec__head::after { color: var(--ink-3); }
.band-ink .tline::before { background: var(--rule); }
.band-ink .tline::after { background: var(--navy); }
.endnote a:focus-visible, .chero a:focus-visible, .go a:focus-visible, .built a:focus-visible, .built button:focus-visible { outline-color: var(--navy); }
.hero a:focus-visible { outline-color: #fff; }

/* the get-started band */
.go__steps { border-top-color: var(--rule); }
.go__steps li { border-bottom-color: var(--rule); }
.go__n { color: var(--blue); }
.go__steps strong { color: var(--ink); }
.go__steps p { color: var(--ink-2); }
.go__contact p { color: var(--ink); }
.go__contact span { color: var(--ink-3); }
.go__contact a, .go__contact p > a { color: var(--navy); text-decoration-color: rgba(22,57,94,.4); }
.go .form { box-shadow: 0 30px 60px -40px rgba(8,34,62,.45); border: 1px solid var(--rule-soft); }
.band-ink.band-photo .lede { color: var(--ink-2); }

/* the stories panel on the waves */
.built > .shell { position: relative; }
.stories__frame { border-top-color: var(--ink); border-bottom-color: var(--rule); }
.stories__frame::before, .stories__frame::after { color: var(--ink); }
.stories__intro { border-right-color: var(--rule); }
.stories__glow { background: linear-gradient(180deg, rgba(111,180,239,.75) 0%, rgba(61,127,201,.45) 35%, rgba(42,92,138,.12) 70%, transparent 100%); }
.stories__title, .sty__title, .sty__big, .stories__tab[aria-pressed="true"], .stories__tab:hover { color: var(--ink); }
.stories__lede, .sty__copy, .stories__tab, .stories__count { color: var(--ink-2); }
.stories__cta { background: #fff; border-color: var(--rule); color: var(--ink); }
.stories__cta:hover { background: #fff; border-color: var(--navy); }
.stories__cta-go { background: var(--paper); border-color: var(--rule); color: var(--ink); }
.stories__tab[aria-pressed="true"] { border-left-color: var(--navy); }
.sty__panel { background-color: #fff; border-color: var(--rule); }
.sty__video { background: #fff; }
.sty__link { color: var(--navy); border-bottom-color: rgba(22,57,94,.4); }
.sty__link:hover { border-bottom-color: var(--navy); }
.stories__btn { border-color: var(--rule); color: var(--ink); background: #fff; }
.stories__btn:hover { background: var(--wash); border-color: var(--navy); }
.stories__btn.is-paused::before { border-color: transparent transparent transparent var(--ink); }
.stories__count b { color: var(--ink); }
.stories__bar { background: var(--rule); }
.stories__bar i { background: var(--navy); }
.stories__tab:focus-visible, .stories__btn:focus-visible { outline-color: var(--navy); }
.btn--light { background: var(--navy-deep); color: #fff; }
.btn--light:hover { background: var(--navy); color: #fff; }
.btn--ghost { color: var(--ink); border-color: var(--rule); background: #fff; }
.btn--ghost:hover { background: var(--wash); border-color: var(--navy); color: var(--ink); }
.btn--sm { padding: 10px 18px; font-size: var(--fs-small); gap: 8px; }
.btn--sm svg { width: 10px; height: 10px; }

/* ── the hero's Microsoft partnership, in the bottom corner ───────────── */
.hero { position: relative; }
.hero__in { display: block; }
.hero__partner { position: absolute; z-index: 2; right: max(var(--gutter), calc((100% - var(--shell)) / 2 + var(--gutter))); bottom: clamp(26px, 3.6vw, 44px); grid-template-columns: 44px minmax(0, 1fr); grid-template-rows: 22px 22px; column-gap: 14px; row-gap: 0; align-items: center; }
.hero__partner svg { width: 44px; height: 44px; grid-row: 1 / 3; }
.hero__partner-name, .hero__partner-line { font-size: var(--fs-copy); line-height: 22px; letter-spacing: -.005em; }
.hero__partner-name { font-weight: 600; color: #fff; }
.hero__partner-line { font-weight: 400; color: rgba(255,255,255,.82); }
@media (max-width: 900px) { .hero__partner { position: static; margin-top: clamp(28px, 5vw, 44px); } }

/* ── the timeline keeps moving: a runner on the line, discs that breathe, plates that float ── */
.tline__runner { position: absolute; z-index: 2; top: calc(var(--disc) / 2 - 6px); left: calc(100% / var(--n) / 2); width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; background: var(--navy); box-shadow: 0 0 0 6px rgba(22,57,94,.14); opacity: 0; }
.tline.is-drawn .tline__runner { opacity: 1; animation: tlrun 7s cubic-bezier(.45,0,.25,1) 2s infinite alternate; }
@keyframes tlrun { from { left: calc(100% / var(--n) / 2); } to { left: calc(100% - 100% / var(--n) / 2); } }
.tline.is-drawn .tline__disc { animation: tlbreathe 4.5s ease-in-out calc(1.6s + var(--i) * .5s) infinite; }
@keyframes tlbreathe { 0%, 100% { box-shadow: 0 10px 24px -12px rgba(8,34,62,.5), inset 0 0 0 1px var(--rule), 0 0 0 0 rgba(22,57,94,.18); } 50% { box-shadow: 0 14px 28px -12px rgba(8,34,62,.55), inset 0 0 0 1px var(--navy), 0 0 0 10px rgba(22,57,94,0); } }
.tline.is-drawn .tline__plate { animation: tlfloat 6s ease-in-out calc(1.8s + var(--i) * .6s) infinite; }
@keyframes tlfloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
.tline__plate:hover { transform: translateY(-5px); }
.tline__chev svg { transition: transform .4s var(--ease); }
.tline__plate:hover .tline__chev svg { transform: translateX(3px); }
@media (prefers-reduced-motion: reduce) { .tline.is-drawn .tline__runner, .tline.is-drawn .tline__disc, .tline.is-drawn .tline__plate { animation: none; } }
@media (max-width: 760px) { .tline__runner { display: none; } }

/* ── Case Studies ─────────────────────────────────────────────────────── */
.cshero__in { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(28px, 5vw, 80px); align-items: center; }
.cshero .chero__title { max-width: 16ch; }
.cshero__ctas { display: flex; flex-wrap: wrap; align-items: center; gap: clamp(16px, 2.4vw, 32px); margin-top: clamp(22px, 2.8vw, 34px); }
.cshero__ctas .btn { margin-top: 0; }
.cshero__comp { position: relative; aspect-ratio: 4 / 3; }
.cshero__shot { position: absolute; width: 62%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border: 1px solid var(--rule); background: #fff; box-shadow: 0 30px 60px -36px rgba(8,34,62,.5); animation: shotfloat 9s ease-in-out infinite alternate; }
.cshero__shot--1 { left: 0; top: 6%; animation-delay: -2s; }
.cshero__shot--2 { right: 0; top: 0; animation-delay: -5s; }
.cshero__shot--3 { left: 18%; bottom: 0; width: 66%; z-index: 2; animation-delay: -8s; }
@keyframes shotfloat { from { transform: translateY(0); } to { transform: translateY(-10px); } }
@media (prefers-reduced-motion: reduce) { .cshero__shot { animation: none; } }
.csstats { padding-top: var(--sec-y-s); padding-bottom: var(--sec-y-s); border-bottom: 1px solid var(--rule); }
.csstats__row { grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; max-width: none; text-align: left; }
.csstats__row .stat { padding-top: 0; border-top: 0; text-align: left; }
.csstats__row .stat__n { font-size: clamp(34px, 3.4vw, 50px); font-weight: 300; letter-spacing: -.03em; }
.csstats__row .stat__l { margin: 10px 0 0; max-width: 18ch; font-size: var(--fs-small); color: var(--ink-2); }
.featured__grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 64px); align-items: center; }
.featured__visual { position: relative; overflow: hidden; border: 1px solid var(--rule); background: #fff; aspect-ratio: 16 / 9; }
.featured__visual img { width: 100%; height: 100%; object-fit: cover; display: block; }
.featured__play { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; }
.featured__play svg { width: 76px; height: 76px; padding: 26px; box-sizing: border-box; border-radius: 50%; background: rgba(8,34,62,.78); border: 1px solid rgba(255,255,255,.5); backdrop-filter: blur(4px); transition: transform .35s var(--ease), background .35s var(--ease); }
.featured__play:hover svg { transform: scale(1.08); background: var(--navy); }
.featured__play:focus-visible { outline: 2px solid var(--navy); outline-offset: -6px; }
.featured__len { position: absolute; right: 14px; bottom: 12px; padding: 4px 9px; background: rgba(8,34,62,.78); font-size: var(--fs-eyebrow); letter-spacing: .06em; color: #fff; }
.featured__facts { margin: 0; display: flex; flex-direction: column; gap: clamp(16px, 2vw, 22px); }
.featured__facts > div { padding-top: 14px; border-top: 1px solid var(--rule); }
.featured__facts dt { margin: 0 0 4px; font-size: var(--fs-eyebrow); font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--navy); }
.featured__facts dd { margin: 0; color: var(--ink-2); }
.featured__actions { display: flex; flex-wrap: wrap; gap: 12px; border-top: 0 !important; padding-top: 4px !important; }
.featured__actions .btn { margin-top: 0; }
.cscards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(18px, 2.4vw, 32px); }
.cscard { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--rule-soft); border-radius: 10px; overflow: hidden; transition: transform .45s var(--ease), box-shadow .45s var(--ease), border-color .45s var(--ease); }
.cscard:hover { transform: translateY(-5px); border-color: var(--rule); box-shadow: 0 28px 48px -34px rgba(8,34,62,.5); }
.cscard[hidden] { display: none; }
.cscard__media { position: relative; display: block; overflow: hidden; border-bottom: 1px solid var(--rule-soft); }
.cscard__media img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; display: block; transition: transform .6s var(--ease); }
.cscard:hover .cscard__media img { transform: scale(1.04); }
.cscard__len { position: absolute; right: 12px; bottom: 10px; padding: 3px 8px; background: rgba(8,34,62,.78); font-size: var(--fs-eyebrow); letter-spacing: .06em; color: #fff; }
.cscard__body { display: flex; flex-direction: column; gap: 6px; flex: 1 1 auto; padding: clamp(18px, 2vw, 24px); }
.cscard__tag { margin: 0 0 4px; font-size: var(--fs-eyebrow); font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--navy); }
.cscard__name { margin: 0; font-size: var(--fs-title); font-weight: 600; letter-spacing: -.02em; line-height: 1.2; color: var(--ink); }
.cscard__line { margin: 0 0 10px; color: var(--ink-2); }
.cscard__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; padding-top: 6px; }
.cscard__actions .btn { margin-top: 0; }
.convert { padding-top: var(--sec-y); padding-bottom: var(--sec-y); }
.convert__in { position: relative; max-width: 880px; }
.convert .display { max-width: 20ch; margin-bottom: clamp(16px, 2vw, 24px); }
.convert .lede { max-width: 54ch; }
.convert__ctas { display: flex; flex-wrap: wrap; align-items: center; gap: clamp(16px, 2.4vw, 32px); margin-top: clamp(22px, 2.8vw, 34px); }
.convert__ctas .btn { margin-top: 0; }
@media (max-width: 1000px) { .cscards { grid-template-columns: repeat(2, minmax(0, 1fr)); } .featured__grid { grid-template-columns: 1fr; } }
@media (max-width: 900px) { .cshero__in { grid-template-columns: 1fr; } .cshero__comp { max-width: 560px; } .csstats__row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .cscards { grid-template-columns: 1fr; } }
.featured__grid { grid-template-areas: "visual facts" "visual actions"; grid-template-rows: auto auto; align-items: start; }
.featured__visual { grid-area: visual; align-self: center; }
.featured__facts { grid-area: facts; }
.featured__actions { grid-area: actions; padding-top: 18px !important; }
@media (max-width: 1000px) { .featured__grid { grid-template-areas: "visual" "facts" "actions"; } }
/* pill buttons keep white type on every light ground; the solid bar sits on a white ground */
.chero .btn, .convert .btn, .endnote .btn, .go .btn, .built .btn, .band-ink .btn, .wave .btn { color: #fff; }
.chero .btn--ghost, .convert .btn--ghost, .endnote .btn--ghost, .go .btn--ghost, .built .btn--ghost, .band-ink .btn--ghost, .wave .btn--ghost { color: var(--ink); }
.nav--solid, .nav--solid.is-stuck { background: rgba(255,255,255,.92); backdrop-filter: saturate(1.4) blur(12px); }

/* ══════════════════════════════════════════════════════════════════════
   THE HERO PHOTOGRAPH, THROUGHOUT — the home hero's image is the ground of
   every band that is not paper; only the gradient over it changes. It pans
   slowly and the gradient breathes; both still under reduced motion.
   ══════════════════════════════════════════════════════════════════════ */
.wave, .chero, .endnote, .go, .built, .band-ink, .convert {
  color: #fff;
  background: var(--navy-deep) url('../img/home/hero-bg.jpg') 50% 50% / cover no-repeat;
  animation: heropan 52s ease-in-out infinite alternate;
}
.wave::before, .chero::before, .endnote::before, .go::before, .built::before, .band-ink::before, .convert::before {
  inset: 0; background: var(--scrim); animation: scrimbreathe 18s ease-in-out infinite alternate;
}
/* the gradients: the hero's own for page heroes; a bottom-heavy one for closing bands;
   a left-heavy one for the panels that carry a form or a list on the left */
.chero { --scrim: linear-gradient(103deg, rgba(9,38,68,.86) 0%, rgba(11,44,78,.66) 38%, rgba(20,66,104,.34) 66%, rgba(20,66,104,.22) 100%), linear-gradient(to bottom, rgba(8,32,58,.45) 0%, rgba(8,32,58,0) 26%, rgba(8,32,58,0) 62%, rgba(8,32,58,.42) 100%); }
.endnote, .convert { --scrim: linear-gradient(to bottom, rgba(8,34,62,.5) 0%, rgba(8,34,62,.72) 50%, rgba(8,34,62,.9) 100%), linear-gradient(103deg, rgba(9,38,68,.5) 0%, rgba(9,38,68,0) 70%); }
.go, .built { --scrim: linear-gradient(100deg, rgba(8,34,62,.92) 0%, rgba(8,34,62,.84) 45%, rgba(8,34,62,.6) 75%, rgba(8,34,62,.42) 100%), linear-gradient(to bottom, rgba(8,32,58,.4) 0%, rgba(8,32,58,0) 30%, rgba(8,32,58,0) 70%, rgba(8,32,58,.4) 100%); }
.band-ink { --scrim: radial-gradient(120% 80% at 80% 20%, rgba(20,66,104,.3) 0%, rgba(8,34,62,.86) 60%, rgba(8,34,62,.94) 100%); }
@keyframes heropan { from { background-position: 44% 50%; } to { background-position: 56% 50%; } }
@keyframes scrimbreathe { from { opacity: 1; } to { opacity: .86; } }
@media (prefers-reduced-motion: reduce) { .wave, .chero, .endnote, .go, .built, .band-ink, .convert, .wave::before, .chero::before, .endnote::before, .go::before, .built::before, .band-ink::before, .convert::before { animation: none; } }
.chero::after, .endnote::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26'%3E%3Cpath d='M13 9.5v7M9.5 13h7' stroke='%23ffffff' stroke-opacity='.16' stroke-width='1'/%3E%3C/svg%3E"); }

/* white type on the photograph */
.chero .eyebrow, .endnote .eyebrow, .go .eyebrow, .built .eyebrow, .band-ink .eyebrow, .convert .eyebrow, .chero__kicker { color: rgba(255,255,255,.78); }
.chero .display, .endnote .display, .go .display, .band-ink .display, .band-ink h2, .band-ink h3, .convert .display, .chero__title, .endnote h2 { color: #fff; }
.chero p, .endnote p, .go p, .band-ink p, .convert p, .chero__copy, .endnote .lede, .go .lede, .band-ink .lede, .convert .lede { color: rgba(255,255,255,.84); }
.chero a, .endnote a, .band-ink a, .convert a, .chero .arrow-link, .endnote .arrow-link, .convert .arrow-link, .go__contact p > a, .go__contact a { color: #fff; }
.chero__meta { border-top-color: rgba(255,255,255,.2); }
.chero__meta dt, .chero .story__meta dt { color: rgba(255,255,255,.7); }
.chero__meta dd, .chero .story__meta dd { color: #fff; }
.chero .story__meta { border-top-color: rgba(255,255,255,.2); }
.band-ink .client-mark, .chero .client-mark { color: #fff; }
.art__meta { color: rgba(255,255,255,.7); }
.band-ink .stat { border-color: rgba(255,255,255,.18); }
.band-ink .stat__n { color: #fff; }
.band-ink .stat__l { color: rgba(255,255,255,.76); }
.band-ink .srows, .band-ink .srow { border-color: rgba(255,255,255,.2); }
.band-ink .sec__head { border-bottom-color: rgba(255,255,255,.22); }
.band-ink .sec__head::after { color: rgba(255,255,255,.7); }
.band-ink .tline::before { background: rgba(255,255,255,.22); }
.band-ink .tline::after { background: #8fc3f3; }
.endnote a:focus-visible, .chero a:focus-visible, .go a:focus-visible, .built a:focus-visible, .built button:focus-visible, .convert a:focus-visible { outline-color: #fff; }
.go__steps { border-top-color: rgba(255,255,255,.2); }
.go__steps li { border-bottom-color: rgba(255,255,255,.14); }
.go__n { color: #8fc3f3; }
.go__steps strong { color: #fff; }
.go__steps p { color: rgba(255,255,255,.78); }
.go__contact p { color: #fff; }
.go__contact span { color: rgba(255,255,255,.64); }
.go__contact a { text-decoration-color: rgba(255,255,255,.4); }
.go .form { box-shadow: 0 40px 70px -40px rgba(0,0,0,.6); border: 0; }
.stories__frame { border-top-color: rgba(255,255,255,.3); border-bottom-color: rgba(255,255,255,.2); }
.stories__frame::before, .stories__frame::after { color: #fff; }
.stories__intro { border-right-color: rgba(255,255,255,.2); }
.stories__glow { background: linear-gradient(180deg, rgba(143,195,243,.85) 0%, rgba(74,140,212,.5) 35%, rgba(42,92,138,.15) 70%, transparent 100%); }
.stories__title, .sty__title, .sty__big, .stories__tab[aria-pressed="true"], .stories__tab:hover, .stories__count b { color: #fff; }
.stories__lede, .sty__copy, .stories__tab, .stories__count { color: rgba(255,255,255,.76); }
.stories__cta { background: rgba(8,34,62,.5); border-color: rgba(255,255,255,.32); color: #fff; }
.stories__cta:hover { background: rgba(8,34,62,.75); border-color: #fff; }
.stories__cta-go { background: rgba(8,34,62,.7); border-color: rgba(255,255,255,.32); color: #fff; }
.stories__tab[aria-pressed="true"] { border-left-color: #fff; }
.sty__panel { background-color: rgba(8,34,62,.5); border-color: rgba(255,255,255,.24); }
.sty__video { background: rgba(8,34,62,.4); }
.sty__link { color: #fff; border-bottom-color: rgba(255,255,255,.4); }
.sty__link:hover { border-bottom-color: #fff; }
.stories__btn { border-color: rgba(255,255,255,.32); color: #fff; background: none; }
.stories__btn:hover { background: rgba(255,255,255,.12); border-color: #fff; }
.stories__btn.is-paused::before { border-color: transparent transparent transparent #fff; }
.stories__bar { background: rgba(255,255,255,.18); }
.stories__bar i { background: #8fc3f3; }
.stories__tab:focus-visible, .stories__btn:focus-visible { outline-color: #fff; }
.btn--light { background: #fff; color: var(--navy-deep); }
.btn--light:hover { background: var(--wash); color: var(--navy-deep); }
.chero .btn, .convert .btn, .endnote .btn, .go .btn, .built .btn, .band-ink .btn, .wave .btn { background: #fff; color: var(--navy-deep); }
.chero .btn:hover, .convert .btn:hover, .endnote .btn:hover, .go .btn:hover, .built .btn:hover, .band-ink .btn:hover, .wave .btn:hover { background: var(--wash); color: var(--navy-deep); }
.chero .btn--ghost, .convert .btn--ghost, .endnote .btn--ghost, .go .btn--ghost, .built .btn--ghost, .band-ink .btn--ghost, .wave .btn--ghost { background: none; color: #fff; border-color: rgba(255,255,255,.4); }
.chero .btn--ghost:hover { background: rgba(255,255,255,.12); border-color: #fff; color: #fff; }
.nav--solid, .nav--solid.is-stuck { background: rgba(243,244,246,.93); }
/* the bar over a photograph hero is transparent again until scrolled */
.nav--photo { background: none; backdrop-filter: none; box-shadow: none; }
.nav--photo .nav__logo { color: #fff; }
.nav--photo .nav__links > li > a, .nav--photo .nav__trigger { color: rgba(255,255,255,.92); }
.nav--photo .nav__burger span { background: #fff; }
.nav--photo.is-stuck { background: rgba(243,244,246,.93); backdrop-filter: saturate(1.6) blur(14px); box-shadow: 0 1px 0 var(--rule); }
.nav--photo.is-stuck .nav__logo, .nav--photo.is-mega .nav__logo, .nav--photo.is-open .nav__logo { color: var(--navy); }
.nav--photo.is-stuck .nav__links > li > a, .nav--photo.is-stuck .nav__trigger, .nav--photo.is-mega .nav__links > li > a, .nav--photo.is-mega .nav__trigger { color: var(--ink); }
.nav--photo.is-stuck .nav__burger span, .nav--photo.is-open .nav__burger span { background: var(--ink); }

/* ── the case studies page: filter behind a button; three figures ───── */
.wk__bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 0 0 clamp(20px, 2.6vw, 32px); }
.wk__count { margin: 0; font-size: var(--fs-small); color: var(--ink-3); }
.wkf { position: relative; }
.wkf__btn { display: inline-flex; align-items: center; gap: 10px; padding: 10px 16px; border: 1px solid var(--rule); border-radius: 999px; background: #fff; font-size: var(--fs-copy); font-weight: 500; color: var(--ink); cursor: pointer; list-style: none; transition: border-color .3s var(--ease), background .3s var(--ease); }
.wkf__btn::-webkit-details-marker { display: none; }
.wkf__btn:hover, .wkf[open] .wkf__btn { border-color: var(--navy); }
.wkf__btn:focus-visible { outline: 2px solid var(--navy); outline-offset: 3px; }
.wkf__btn svg { width: 18px; height: 18px; }
.wkf__count { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--navy); color: #fff; font-size: 11px; font-weight: 600; }
.wkf__panel { position: absolute; z-index: 20; top: calc(100% + 10px); left: 0; width: min(560px, calc(100vw - 2 * var(--gutter))); padding: clamp(18px, 2vw, 24px); background: #fff; border: 1px solid var(--rule); border-radius: 12px; box-shadow: 0 30px 60px -30px rgba(8,34,62,.4); display: flex; flex-direction: column; gap: 18px; }
.wkf__panel .wk__fieldset legend { float: none; margin-bottom: 10px; }
.wkf__clear { align-self: flex-start; padding: 0; border: 0; background: none; font-size: var(--fs-small); color: var(--navy); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.csstats__row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 620px) { .csstats__row { grid-template-columns: 1fr 1fr; } }

/* ── the individual case study ────────────────────────────────────────── */
.cshero--story .cshero__in { grid-template-columns: minmax(0, 1fr) minmax(0, .9fr); }
.cshero__headline { margin: 0 0 14px; font-size: var(--fs-lead); font-weight: 500; letter-spacing: -.022em; line-height: 1.2; color: #fff; }
.cshero__status { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 6px; padding: 8px 14px 8px 12px; border: 1px solid rgba(255,255,255,.3); border-radius: 999px; font-size: var(--fs-small); font-weight: 500; color: #fff; }
.cshero__dot { width: 8px; height: 8px; border-radius: 50%; background: #7fe3a4; box-shadow: 0 0 0 4px rgba(127,227,164,.22); }
.cshero__visual { position: relative; overflow: hidden; border: 1px solid rgba(255,255,255,.3); background: #fff; aspect-ratio: 16 / 9; box-shadow: 0 40px 80px -40px rgba(0,0,0,.6); }
.cshero__visual img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ov__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(18px, 2.4vw, 32px); margin: 0; }
.ov__item { padding-top: 14px; border-top: 1px solid var(--ink); }
.ov__item dt { margin: 0 0 6px; font-size: var(--fs-eyebrow); font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--navy); }
.ov__item dd { margin: 0; color: var(--ink-2); }
.story__prose--wide { max-width: none; column-count: 2; column-gap: clamp(28px, 4vw, 64px); }
.story__prose--wide p { max-width: none; break-inside: avoid; }
.caps--1 { grid-template-columns: 1fr; gap: 0; }
.caps--1 li { font-weight: 500; }
.appr { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(24px, 4vw, 64px); align-items: start; }
.appr .story__prose--wide { column-count: 1; }
.out__cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: clamp(22px, 3vw, 48px); }
.out__col { padding-top: 16px; border-top: 1px solid var(--navy); }
.out__h { margin: 0 0 12px; font-size: var(--fs-small); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--navy); }
.out__list { margin: 0; padding: 0; list-style: none; }
.out__list li { position: relative; padding: 8px 0 8px 22px; border-top: 1px solid var(--rule-soft); color: var(--ink-2); }
.out__list li::before { content: ''; position: absolute; left: 0; top: 15px; width: 9px; height: 9px; border-radius: 50%; background: var(--navy); }
.out .story__tech { margin-top: clamp(24px, 3vw, 40px); }
.out .unconfirmed { margin-top: clamp(24px, 3vw, 40px); }
.cscards--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 980px; }
@media (max-width: 1000px) { .ov__grid { grid-template-columns: 1fr 1fr; } .appr { grid-template-columns: 1fr; } }
@media (max-width: 760px) { .cshero--story .cshero__in { grid-template-columns: 1fr; } .ov__grid, .cscards--2 { grid-template-columns: 1fr; } .story__prose--wide { column-count: 1; } }
/* the get-started lede and contact links stay white over the photograph */
.go .lede, .band-ink.band-photo .lede { color: rgba(255,255,255,.84); }
.go .go__contact p > a:not([class]), .go .go__contact a { color: #fff; text-decoration-color: rgba(255,255,255,.4); }
.go .go__contact a:hover { text-decoration-color: #fff; }
/* the three founding clients on the stories panel carry their tag and a mark */
.stories__tab--founding { grid-template-rows: auto auto; }
.stories__tab--founding .stories__tab-p { display: block; grid-column: 1; margin-top: 2px; font-size: var(--fs-eyebrow); letter-spacing: .06em; text-transform: uppercase; color: rgba(255,255,255,.58); }
.stories__tab--founding .stories__tab-p::before { content: ""; display: inline-block; width: 6px; height: 6px; margin: 0 8px 1px 0; border-radius: 50%; background: #fff; opacity: .7; }
.stories__tab--founding[aria-pressed="true"] .stories__tab-p { color: rgba(255,255,255,.82); }
.stories__tab--founding .stories__tab-go { grid-row: 1 / span 2; }
@media (max-width: 1080px) { .stories__tab--founding .stories__tab-p { display: block; } }

/* ══════════════════════════════════════════════════════════════════════
   CASE-STUDY-LED REDESIGN — the evidence kit. Components the homepage, the
   index and every case study share: the proposition hero's support line, the
   selected-projects grid, the workflow diagram, the capability map, the
   walkthrough rows, the decision cards, the credibility block and the richer
   case card. All of it on the existing tokens.
   ══════════════════════════════════════════════════════════════════════ */
/* the hero: the proposition leads, the brand promise supports it */
.hero__tag { display: inline-flex; align-items: center; gap: 12px; margin: 0 0 clamp(14px, 1.6vw, 20px); font-size: var(--fs-small); font-weight: 500; letter-spacing: .02em; color: rgba(255,255,255,.82); }
.hero__tag::before { content: ''; width: 28px; height: 1px; background: rgba(255,255,255,.55); }
.hero .hero__title { max-width: 15ch; }
.hero__ctas .btn { margin-top: 0; }

/* selected projects: one wide card, two narrow, the same card throughout */
.sel { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(18px, 2.4vw, 32px); }
.cscard--wide { grid-column: span 2; }
.cscard--wide .cscard__media img { aspect-ratio: 21 / 9; }
.cscard__meta { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 16px; margin: 6px 0 4px; padding-top: 10px; border-top: 1px solid var(--rule-soft); }
.cscard__meta > div { min-width: 0; }
.cscard__meta dt { margin: 0 0 2px; font-size: var(--fs-eyebrow); font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.cscard__meta dd { margin: 0; font-size: var(--fs-small); color: var(--ink-2); }
.cscard__chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 8px; padding: 0; list-style: none; }
.cscard__chips li { padding: 4px 10px; border: 1px solid var(--rule); border-radius: 999px; font-size: var(--fs-eyebrow); letter-spacing: .04em; color: var(--ink-2); }
@media (max-width: 620px) { .sel { grid-template-columns: 1fr; } .cscard--wide { grid-column: auto; } .cscard--wide .cscard__media img { aspect-ratio: 16 / 9; } .cscard__meta { grid-template-columns: 1fr; } }

/* the thinking: a workflow as a chain of steps, drawn from the case study */
.think { display: grid; gap: clamp(28px, 4vw, 56px); }
.think__item { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(20px, 3vw, 48px); align-items: start; padding-top: clamp(20px, 2.6vw, 32px); border-top: 1px solid var(--rule); }
.think__item:first-child { border-top: 0; padding-top: 0; }
.think__kicker { margin: 0 0 8px; font-size: var(--fs-eyebrow); font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--navy); }
.think__t { margin: 0 0 10px; font-size: var(--fs-title); font-weight: 600; letter-spacing: -.02em; line-height: 1.2; color: var(--ink); }
.think__c { margin: 0 0 14px; color: var(--ink-2); max-width: 46ch; }
.flow { display: grid; grid-template-columns: repeat(var(--n, 6), minmax(0, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
/* beside a column of copy there is room for three across; the full-width band takes all six */
.think .flow { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.think .flow__step:nth-child(3n)::after { display: none; }
@media (max-width: 1100px) { .flow { grid-template-columns: repeat(3, minmax(0, 1fr)); } .flow__step:nth-child(3n)::after { display: none; } }
.flow__step { position: relative; display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 14px 14px 16px; border: 1px solid var(--rule); border-radius: 10px; background: #fff; }
.flow__step::after { content: ''; position: absolute; right: -10px; top: 50%; width: 10px; height: 1px; background: var(--rule); }
.flow__step:last-child::after { display: none; }
.flow__n { font-size: var(--fs-eyebrow); font-weight: 600; letter-spacing: .1em; color: var(--navy); }
.flow__t { font-size: var(--fs-small); font-weight: 600; letter-spacing: -.01em; line-height: 1.25; color: var(--ink); }
.flow__c { font-size: var(--fs-small); line-height: 1.45; color: var(--ink-2); }
.band-wash .flow__step, .band-tint .flow__step { background: #fff; }
@media (max-width: 1000px) { .think__item { grid-template-columns: 1fr; } }
@media (max-width: 760px) { .flow, .think .flow { grid-template-columns: 1fr; gap: 0; } .flow__step { border-radius: 0; border-top: 0; } .flow__step:first-child { border-top: 1px solid var(--rule); border-radius: 10px 10px 0 0; } .flow__step:last-child { border-radius: 0 0 10px 10px; } .flow__step::after { display: none; } }

/* capabilities demonstrated through projects: ruled rows whose chips are links */
.srow__links { margin: 10px 0 0; display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: var(--fs-small); }
.capmap .srow__chips li { padding: 0; border: 0; background: none; }
.capmap .srow__chips li a { display: inline-block; padding: 5px 12px; border: 1px solid var(--rule); border-radius: 999px; font-size: var(--fs-eyebrow); letter-spacing: .04em; color: var(--ink); text-decoration: none; transition: border-color .3s var(--ease), background .3s var(--ease); }
.capmap .srow__chips li a:hover { border-color: var(--navy); background: var(--wash); }
.capmap .srow__chips li a:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }

/* the walkthrough: a still from the video and what it shows, alternating sides */
.walk { display: grid; gap: clamp(28px, 4vw, 56px); margin: 0; padding: 0; list-style: none; }
.walk__row { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(20px, 3vw, 48px); align-items: center; }
.walk__row:nth-child(even) .walk__fig { order: 2; }
.walk__fig { margin: 0; }
.walk__fig img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border: 1px solid var(--rule); background: #fff; }
.walk__src { margin: 8px 0 0; font-size: var(--fs-eyebrow); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.walk__n { display: block; margin: 0 0 8px; font-size: var(--fs-eyebrow); font-weight: 600; letter-spacing: .1em; color: var(--navy); }
.walk__t { margin: 0 0 10px; font-size: var(--fs-title); font-weight: 600; letter-spacing: -.02em; line-height: 1.2; color: var(--ink); }
.walk__c { margin: 0; color: var(--ink-2); max-width: 44ch; }
@media (max-width: 760px) { .walk__row { grid-template-columns: 1fr; } .walk__row:nth-child(even) .walk__fig { order: 0; } }

/* key decisions: four labelled parts each */
.decs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(18px, 2.4vw, 32px); margin: 0; padding: 0; list-style: none; }
.dec { padding: clamp(18px, 2.2vw, 28px); border: 1px solid var(--rule); border-radius: 10px; background: #fff; }
.dec__l { margin: 0; display: grid; gap: 12px; }
.dec__l > div { padding-top: 10px; border-top: 1px solid var(--rule-soft); }
.dec__l > div:first-child { padding-top: 0; border-top: 0; }
.dec__l dt { margin: 0 0 3px; font-size: var(--fs-eyebrow); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--navy); }
.dec__l dd { margin: 0; font-size: var(--fs-small); line-height: 1.55; color: var(--ink-2); }
.dec__l > div:nth-child(2) dd { font-size: var(--fs-copy); font-weight: 500; color: var(--ink); }
@media (max-width: 760px) { .decs { grid-template-columns: 1fr; } }

/* the discovery basis and the validation record: plain, honest lists */
.rec { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: clamp(22px, 3vw, 48px); }
.rec__col { padding-top: 16px; border-top: 1px solid var(--navy); }
.rec__col--quiet { border-top-color: var(--rule); }
.rec__col--quiet .out__h { color: var(--ink-3); }
.rec__col--quiet .out__list li::before { background: var(--rule); }

/* company credibility: a short statement and the facts beside it */
.cred { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(24px, 4vw, 64px); align-items: start; }
.cred__facts { margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 14px 24px; }
.cred__facts > div { padding-top: 12px; border-top: 1px solid var(--rule); }
.cred__facts dt { margin: 0 0 3px; font-size: var(--fs-eyebrow); font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--navy); }
.cred__facts dd { margin: 0; font-size: var(--fs-small); color: var(--ink-2); }
@media (max-width: 900px) { .cred { grid-template-columns: 1fr; } }
@media (max-width: 480px) { .cred__facts { grid-template-columns: 1fr; } }

/* the partnership proof strip: three confirmed figures over the logo marquee */
.proof .trust__stats { margin-bottom: clamp(22px, 3vw, 36px); }
.proof__note { margin: 0 0 clamp(18px, 2.4vw, 28px); font-size: var(--fs-small); color: var(--ink-3); }

/* the related rows and the index reuse the card; the index also needs three across */
.cscards .cscard__meta { grid-template-columns: 1fr; }
@media (min-width: 1200px) { .cscards .cscard__meta { grid-template-columns: 1fr 1fr; } }

/* the diagram beneath a video or prose block keeps its distance */
.story__flow { margin-top: clamp(28px, 4vw, 48px); }
.story__flow .out__h { margin-bottom: 14px; }

/* ── selected work: the site's header, equal cards on a horizontal travel pinned to the
   viewport (two to a screen on desktop; a grid on tablets and phones), and the
   scroll-linked transition statement. Pure white. ───────────────────────────── */
.selw { position: relative; background: #fff; }
.selw .shell .sec__head { margin-bottom: 0; }
/* the cards: one structure, one height per row */
.selw__track { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(22px, 3vw, 44px); margin: 0 auto; padding: clamp(28px, 3.6vw, 48px) var(--gutter) 0; max-width: var(--shell); box-sizing: border-box; list-style: none; }
.selw__card { display: flex; flex-direction: column; min-width: 0; background: #fff; border: 1px solid var(--rule-soft); border-radius: 10px; overflow: hidden; transition: transform .45s var(--ease), box-shadow .45s var(--ease), border-color .45s var(--ease); }
.selw__card:hover { transform: translateY(-4px); border-color: var(--rule); box-shadow: 0 28px 48px -34px rgba(8,34,62,.45); }
.selw__media { position: relative; overflow: hidden; border-bottom: 1px solid var(--rule-soft); background: var(--paper-2); }
.selw__media img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; transition: transform .7s var(--ease); }
.selw__card:hover .selw__media img { transform: scale(1.03); }
.selw__play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: inline-flex; color: #fff; text-decoration: none; z-index: 2; border-radius: 50%; }
.selw__play svg { width: 68px; height: 68px; padding: 23px; box-sizing: border-box; border-radius: 50%; background: rgba(8,34,62,.78); border: 1px solid rgba(255,255,255,.5); backdrop-filter: blur(4px); transition: transform .35s var(--ease), background .35s var(--ease); }
.selw__play span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.selw__play:hover svg { transform: scale(1.08); background: var(--navy); }
.selw__play:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }
.selw__len { position: absolute; right: 14px; bottom: 12px; z-index: 2; padding: 4px 9px; background: rgba(8,34,62,.78); font-size: var(--fs-eyebrow); letter-spacing: .06em; color: #fff; }
.selw__body { display: flex; flex-direction: column; flex: 1 1 auto; gap: 6px; padding: clamp(18px, 2.2vw, 28px); }
.selw__tag { margin: 0 0 2px; font-size: var(--fs-eyebrow); font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--navy); }
.selw__name { margin: 0; font-size: var(--fs-title); font-weight: 600; letter-spacing: -.02em; line-height: 1.2; }
.selw__name a { color: var(--ink); text-decoration: none; }
.selw__name a:hover { color: var(--navy); }
.selw__line { margin: 0; max-width: 52ch; color: var(--ink-2); }
.selw__go { margin-top: auto; padding-top: 14px; align-self: flex-start; }
@media (max-width: 620px) { .selw__track { grid-template-columns: 1fr; } .selw__play svg { width: 58px; height: 58px; padding: 19px; } }
/* pinned (home.js, wide screens, motion allowed): the band is as tall as the track is wide,
   the viewport-high pin holds one row, and the row travels with the page scroll */
.selw__travel.is-pinned .selw__pin { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; display: flex; align-items: center; }
.selw__travel.is-pinned .selw__track { display: flex; align-items: stretch; width: max-content; max-width: none; margin: 0; gap: clamp(22px, 3vw, 44px); padding: 0 var(--gutter); will-change: transform; --shell-side: max(var(--gutter), calc((100vw - var(--shell)) / 2)); padding-left: var(--shell-side); padding-right: var(--shell-side); }
.selw__travel.is-pinned .selw__card { flex: 0 0 var(--card-w); width: var(--card-w); --card-w: min(calc((100vw - 2 * var(--shell-side) - clamp(22px, 3vw, 44px)) / 2), calc((100vh - 160px) * 1.2), calc((100svh - 160px) * 1.2)); }
@media (max-width: 1100px) { .selw__travel.is-pinned .selw__card { --card-w: min(calc(100vw - 2 * var(--shell-side)), calc((100vh - 160px) * 1.2), 760px); } }
.selw__travel.is-pinned .selw__card[data-reveal] { transform: translateX(32px); }
.selw__travel.is-pinned .selw__card[data-reveal].is-in { transform: none; }
.selw__travel.is-pinned .selw__card:hover { transform: translateY(-4px); }
/* the transition statement: small as it arrives, full size at the centre, a held beat, then released */
.selw__out { position: relative; margin-top: clamp(40px, 6vw, 88px); }
.selw__out-pin { display: grid; place-items: center; align-content: center; gap: clamp(16px, 2vw, 24px); padding: clamp(32px, 5vw, 64px) var(--gutter); text-align: center; }
.selw__statement { margin: 0; max-width: 20ch; font-size: clamp(28px, 4.2vw, 64px); font-weight: 400; letter-spacing: -.03em; line-height: 1.1; color: var(--ink); transform-origin: 50% 50%; }
.selw__out.is-scaling { height: 200vh; height: 200svh; margin-top: 0; }
.selw__out.is-scaling .selw__out-pin { position: sticky; top: 0; height: 100vh; height: 100svh; box-sizing: border-box; }
.selw__out.is-scaling .selw__statement { transform: scale(var(--s, .42)); opacity: var(--o, .6); will-change: transform, opacity; }
.selw__out.is-scaling .selw__out-link { opacity: var(--l, 0); transform: translateY(calc((1 - var(--l, 0)) * 12px)); transition: none; }
/* the overall-thinking rows: the pattern first, then "seen in" chips */
.story__flow--top { margin: 0 0 clamp(28px, 4vw, 48px); }
.srow__seen { margin: 12px 0 6px !important; font-size: var(--fs-eyebrow); font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.band-wash .flow__step { background: #fff; }

/* ── In their words: three cards on the site's grid; the card as it was ── */
.words__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(18px, 2.4vw, 32px); }
.words__item { min-width: 0; display: flex; }
.words__item .endo { flex: 1 1 auto; }
.endo__label { margin: 0; font-size: var(--fs-eyebrow); font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--navy); }
.endo__portrait--initials { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--wash); color: var(--navy); font-size: var(--fs-small); font-weight: 600; letter-spacing: .06em; }
.endo__co { color: var(--ink-2); }
.endo__go { margin-top: auto; padding-top: 6px; align-self: flex-start; }
.origin__where { margin: 0 0 10px; font-size: var(--fs-small); color: var(--ink-3); }
.chap__words { max-width: 720px; margin-top: clamp(24px, 3vw, 40px); }
.out__words { margin-top: clamp(24px, 3vw, 40px); max-width: 720px; }
@media (max-width: 900px) { .words__grid { grid-template-columns: 1fr; } }

/* ══════════════════════════════════════════════════════════════════════
   THE OPERATING LOGIC — four principles, one line. A dark editorial band:
   the hero photograph under a near-black graphite scrim, warm-white and
   silver type, the site's light blue as the one accent, fine technical
   rules and index numbers. Wide screens: an asymmetric two-by-two with a
   continuous line drawn through the four index nodes on scroll. Narrow
   screens: a vertical spine. Static and complete without JavaScript.
   ══════════════════════════════════════════════════════════════════════ */
.op { --op-ink: #f3efe8; --op-silver: #aeb4bc; --op-mute: #6f7782; --op-rule: rgba(255,255,255,.14); --op-accent: #8fc3f3; --scrim: linear-gradient(180deg, rgba(10,13,18,.93) 0%, rgba(12,16,22,.96) 50%, rgba(10,13,18,.98) 100%); color: var(--op-ink); padding-top: var(--sec-y); padding-bottom: 0; }
.op::after { content: none; }
.op__in { position: relative; }
/* opening */
.op__open { position: relative; padding-bottom: clamp(40px, 6vw, 96px); }
.op__label { display: inline-flex; align-items: center; gap: 14px; margin: 0 0 clamp(22px, 3vw, 40px); font-size: 11px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--op-silver); }
.op__label::before { content: ''; width: 34px; height: 1px; background: var(--op-accent); }
.op__label span { color: var(--op-mute); }
.op__title { margin: 0; max-width: 11ch; font-size: clamp(44px, 7.2vw, 118px); font-weight: 300; letter-spacing: -.04em; line-height: .96; color: var(--op-ink); }
.op__title .op__t1 { display: block; color: var(--op-silver); font-weight: 300; }
.op__title .op__t2 { display: block; }
.op__title em { font-style: normal; font-weight: 500; color: var(--op-accent); }
/* the field and the line */
.op__field { position: relative; }
.op__line { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 0; }
.op__line path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.op__line-base { stroke: var(--op-rule); stroke-width: 1; }
.op__line-draw { stroke: var(--op-accent); stroke-width: 1.25; stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--p, 0)); opacity: .9; }
.op__grid { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(56px, 7vw, 120px) clamp(32px, 5vw, 80px); margin: 0; padding: 0; list-style: none; }
.op__item { position: relative; display: grid; grid-template-rows: auto auto auto auto 1fr; gap: 0; min-width: 0; padding-left: 36px; }
.op__item--1 { grid-column: 1 / span 7; }
.op__item--2 { grid-column: 8 / span 5; padding-top: clamp(40px, 6vw, 96px); }
.op__item--3 { grid-column: 1 / span 5; }
.op__item--4 { grid-column: 6 / span 7; padding-top: clamp(40px, 6vw, 96px); }
.op__node { position: absolute; left: 0; top: 14px; width: 11px; height: 11px; border-radius: 50%; border: 1px solid var(--op-silver); background: #0c1016; transition: border-color .4s var(--ease), box-shadow .4s var(--ease), background .4s var(--ease); z-index: 2; }
.op__node::after { content: ''; position: absolute; inset: 3px; border-radius: 50%; background: var(--op-accent); opacity: 0; transition: opacity .4s var(--ease); }
.op__item.is-active .op__node { border-color: var(--op-accent); box-shadow: 0 0 0 6px rgba(143,195,243,.12); }
.op__item.is-active .op__node::after { opacity: 1; }
.op__ghost { position: absolute; right: 0; top: -.18em; font-size: clamp(96px, 12vw, 200px); font-weight: 200; letter-spacing: -.06em; line-height: 1; color: rgba(255,255,255,.045); pointer-events: none; user-select: none; }
.op__head { display: flex; align-items: center; gap: 14px; margin-bottom: clamp(16px, 2vw, 26px); }
.op__index { font-size: 12px; font-weight: 500; letter-spacing: .22em; color: var(--op-accent); }
.op__rule { flex: 1 1 auto; height: 1px; background: var(--op-rule); max-width: 120px; }
.op__statement { margin: 0 0 clamp(14px, 1.8vw, 22px); max-width: 16ch; font-size: clamp(26px, 2.6vw, 40px); font-weight: 500; letter-spacing: -.028em; line-height: 1.12; color: var(--op-ink); }
.op__copy { margin: 0 0 clamp(18px, 2.2vw, 28px); max-width: 44ch; font-size: var(--fs-copy); line-height: 1.6; color: var(--op-silver); }
.op__seen { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px 18px; }
.op__seen-label { font-size: 11px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--op-mute); }
.op__seen-list { display: flex; flex-wrap: wrap; gap: 8px 0; margin: 0; padding: 0; list-style: none; }
.op__seen-list li { display: flex; align-items: baseline; }
.op__seen-list li + li::before { content: ''; width: 1px; height: 12px; margin: 0 14px; background: var(--op-rule); align-self: center; }
.op__seen-list a { position: relative; font-size: var(--fs-small); font-weight: 500; color: var(--op-ink); text-decoration: none; padding-bottom: 3px; border-bottom: 1px solid rgba(255,255,255,.28); transition: border-color .3s var(--ease), color .3s var(--ease); }
.op__seen-list a:hover { color: var(--op-accent); border-bottom-color: var(--op-accent); }
.op__seen-list a:focus-visible { outline: 2px solid var(--op-accent); outline-offset: 4px; }
/* the motif: fine lines, silver at rest, accent and resolved when active */
.op__motif-wrap { margin-top: clamp(26px, 3vw, 40px); align-self: end; justify-self: end; width: min(220px, 100%); color: var(--op-silver); opacity: .7; transition: opacity .5s var(--ease), color .5s var(--ease); }
.op__item--1 .op__motif-wrap, .op__item--3 .op__motif-wrap { justify-self: start; }
.op__item.is-active .op__motif-wrap { opacity: 1; color: var(--op-ink); }
.op__motif { display: block; width: 100%; height: auto; }
.op__motif .m-field, .op__motif .m-record, .op__motif .m-layer { stroke-opacity: .55; }
.op__motif .m-grid, .op__motif .m-rows, .op__motif .m-marks, .op__motif .m-ticks { stroke-opacity: .28; }
.op__motif .m-dot { opacity: .9; }
.op__motif .m-dot--b, .op__motif .m-out, .op__motif .m-gap, .op__motif .m-join, .op__motif .m-ring, .op__motif .m-state--on, .op__motif .m-b { transition: opacity .6s var(--ease), stroke-dashoffset .9s var(--ease), stroke .6s var(--ease), transform .9s var(--ease); }
/* 01 — the line breaks in the field and reconnects when active */
.op__motif .m-gap { stroke-dasharray: 43; stroke-dashoffset: 43; stroke: var(--op-accent); }
.op__motif .m-out, .op__motif .m-dot--b { opacity: .25; }
.op__item.is-active .m-gap { stroke-dashoffset: 0; }
.op__item.is-active .m-out, .op__item.is-active .m-dot--b { opacity: 1; }
/* 02 — the point travels into the record; offline becomes synced */
.op__motif .m-point { transition: transform .9s var(--ease), fill .6s var(--ease); }
.op__motif .m-ring { opacity: .6; transition: opacity .6s var(--ease); }
.op__motif .m-state--on { opacity: 0; }
.op__item.is-active .m-point { transform: translateX(72px); fill: var(--op-accent); stroke: var(--op-accent); }
.op__item.is-active .m-ring { opacity: 0; }
.op__item.is-active .m-state--off { opacity: 0; }
.op__item.is-active .m-state--on { opacity: 1; fill: var(--op-accent); }
/* 03 — the second path joins the first */
.op__motif .m-b { stroke-dasharray: 130; stroke-dashoffset: 130; }
.op__motif .m-join { opacity: .35; }
.op__item.is-active .m-b { stroke-dashoffset: 0; stroke: var(--op-accent); }
.op__item.is-active .m-join { opacity: 1; stroke: var(--op-accent); }
/* 04 — the layers extend from the earlier outline */
.op__motif .m-layer { transition: opacity .7s var(--ease), transform .9s var(--ease); transform-origin: 14px 110px; }
.op__motif .m-layer--2, .op__motif .m-layer--3, .op__motif .m-layer--4 { opacity: .18; transform: translate(-6px, 6px); }
.op__item.is-active .m-layer--2 { opacity: .7; transform: none; transition-delay: .05s; }
.op__item.is-active .m-layer--3 { opacity: .85; transform: none; transition-delay: .18s; }
.op__item.is-active .m-layer--4 { opacity: 1; transform: none; stroke: var(--op-accent); transition-delay: .32s; }
/* the ending: the line resolves to one point, then the Discovery band */
.op__end { position: relative; display: grid; justify-items: center; gap: 0; margin-top: clamp(40px, 6vw, 96px); }
.op__end-line { display: block; width: 1px; height: clamp(40px, 6vw, 88px); background: linear-gradient(180deg, var(--op-rule), var(--op-accent)); transform-origin: top; transform: scaleY(var(--pe, 0)); }
.op__end-node { display: block; width: 9px; height: 9px; border-radius: 50%; background: var(--op-accent); box-shadow: 0 0 0 8px rgba(143,195,243,.12); opacity: var(--pe, 0); }
/* the insights footer */
.op__foot { display: flex; flex-wrap: wrap; align-items: baseline; gap: 14px 28px; margin-top: clamp(36px, 5vw, 72px); padding: clamp(24px, 3vw, 36px) 0 var(--sec-y); border-top: 1px solid var(--op-rule); }
.op__foot-label { margin: 0; font-size: 11px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--op-mute); }
.op__reads { display: flex; flex-wrap: wrap; gap: 10px 0; margin: 0; padding: 0; list-style: none; }
.op__reads li { display: flex; align-items: baseline; }
.op__reads li + li::before { content: ''; width: 1px; height: 12px; margin: 0 20px; background: var(--op-rule); align-self: center; }
.op__reads a { font-size: var(--fs-small); color: var(--op-silver); text-decoration: none; padding-bottom: 3px; border-bottom: 1px solid transparent; transition: color .3s var(--ease), border-color .3s var(--ease); }
.op__reads a:hover { color: var(--op-ink); border-bottom-color: var(--op-accent); }
.op__reads a:focus-visible { outline: 2px solid var(--op-accent); outline-offset: 4px; }
/* reveals inside the band keep to one direction */
.op [data-reveal] { transform: translateY(14px); }
.op [data-reveal].is-in { transform: none; }
/* laptop and tablet: a balanced two-column, smaller display, no ghost numerals */
@media (max-width: 1280px) { .op__item--1, .op__item--3 { grid-column: 1 / span 6; } .op__item--2, .op__item--4 { grid-column: 7 / span 6; } .op__item--2, .op__item--4 { padding-top: clamp(32px, 5vw, 64px); } .op__ghost { font-size: clamp(80px, 10vw, 140px); } }
/* narrow: a single column on a vertical spine; the SVG line gives way to it */
@media (max-width: 900px) {
  .op__grid { grid-template-columns: 1fr; gap: clamp(44px, 8vw, 64px); }
  .op__grid::before { content: ''; position: absolute; left: 5px; top: 14px; bottom: 0; width: 1px; background: var(--op-rule); }
  .op__grid::after { content: ''; position: absolute; left: 5px; top: 14px; bottom: 0; width: 1px; background: var(--op-accent); transform-origin: top; transform: scaleY(var(--p, 0)); }
  .op__item, .op__item--1, .op__item--2, .op__item--3, .op__item--4 { grid-column: auto; padding-top: 0; padding-left: 32px; }
  .op__line { display: none; }
  .op__ghost { display: none; }
  .op__motif-wrap, .op__item--1 .op__motif-wrap, .op__item--3 .op__motif-wrap { justify-self: start; width: min(200px, 100%); margin-top: 22px; }
  .op__title { font-size: clamp(40px, 11vw, 64px); max-width: none; }
  .op__statement { max-width: none; font-size: clamp(24px, 6vw, 32px); }
  .op__end { justify-items: start; padding-left: 5px; }
  .op__foot { flex-direction: column; align-items: flex-start; }
  .op__reads { flex-direction: column; gap: 10px; }
  .op__reads li + li::before { content: none; }
}
/* reduced motion: everything resolved and still */
@media (prefers-reduced-motion: reduce) {
  .op__line-draw { stroke-dashoffset: 0; }
  .op__end-line { transform: none; } .op__end-node { opacity: 1; }
  .op__grid::after { transform: none; }
  .op__item .op__node { border-color: var(--op-accent); } .op__item .op__node::after { opacity: 1; }
  .op__motif .m-gap { stroke-dashoffset: 0; } .op__motif .m-out, .op__motif .m-dot--b { opacity: 1; }
  .op__motif .m-point { transform: translateX(72px); } .op__motif .m-ring, .op__motif .m-state--off { opacity: 0; } .op__motif .m-state--on { opacity: 1; }
  .op__motif .m-b { stroke-dashoffset: 0; } .op__motif .m-join { opacity: 1; }
  .op__motif .m-layer--2, .op__motif .m-layer--3, .op__motif .m-layer--4 { opacity: .85; transform: none; }
  .op__motif *, .op__node, .op__motif-wrap { transition: none !important; }
}

/* ── the owner's harmony pass ─────────────────────────────────────────────
   The menu reads in the brand navy once the bar is stuck or solid, on every
   page; the Selected work cards take the navy of the buttons with white type;
   The operating logic uses the site's type steps like every other section. */
.nav.is-stuck .nav__links > li > a, .nav.is-stuck .nav__trigger,
.nav.is-mega .nav__links > li > a, .nav.is-mega .nav__trigger,
.nav--solid .nav__links > li > a, .nav--solid .nav__trigger,
.nav--photo.is-stuck .nav__links > li > a, .nav--photo.is-stuck .nav__trigger,
.nav--photo.is-mega .nav__links > li > a, .nav--photo.is-mega .nav__trigger { color: var(--navy); }
.nav__links > li > a::after { background: var(--navy); }
@media (max-width: 1080px) { .nav__links > li > a, .nav__trigger, .nav.is-open .nav__links > li > a { color: var(--navy); } }
/* Selected work: navy cards, white type, the light blue for the small label */
.selw__card { background: var(--navy-deep); border-color: transparent; color: #fff; }
.selw__card:hover { border-color: transparent; box-shadow: 0 30px 50px -30px rgba(8,34,62,.6); }
.selw__media { border-bottom-color: rgba(255,255,255,.12); }
.selw__tag { color: #8fc3f3; }
.selw__name a { color: #fff; }
.selw__name a:hover { color: #8fc3f3; }
.selw__line { color: rgba(255,255,255,.8); }
.selw__card .arrow-link, .selw__card .arrow-link--quiet { color: #fff; }
.selw__card .arrow-link:hover { color: #8fc3f3; }
.selw__card .arrow-link:focus-visible { outline-color: #fff; }
/* The operating logic on the site's type steps */
.op__label { font-size: var(--fs-eyebrow); letter-spacing: .10em; font-weight: 500; margin-bottom: 18px; }
.op__title { font-size: var(--fs-display); font-weight: 400; letter-spacing: -.026em; line-height: 1.12; max-width: 22ch; }
.op__title .op__t1, .op__title .op__t2 { display: inline; color: var(--op-ink); font-weight: 400; }
.op__title em { font-weight: 500; }
.op__open { padding-bottom: clamp(32px, 4vw, 56px); }
.op__statement { font-size: var(--fs-lead); font-weight: 500; letter-spacing: -.022em; line-height: 1.18; max-width: 22ch; }
.op__copy { font-size: var(--fs-copy); }
.op__index, .op__seen-label, .op__foot-label { font-size: var(--fs-eyebrow); letter-spacing: .10em; }
.op__ghost { font-size: clamp(56px, 6vw, 96px); top: -.1em; }
.op__grid { gap: clamp(44px, 5vw, 80px) clamp(32px, 5vw, 80px); }
.op__item--2, .op__item--4 { padding-top: clamp(28px, 4vw, 56px); }
@media (max-width: 900px) { .op__title { font-size: var(--fs-display); } .op__statement { font-size: var(--fs-lead); } }
/* In their words, as the Client stories stage: the names on the left, one quotation at a time */
.words .cs__who span { display: block; }
.words .cs__since { color: var(--ink-3); }
.words .cs__more { margin-top: 8px; }

/* ── the owner's second harmony pass ─────────────────────────────────────
   Selected work cards back to white; The operating logic on the site's navy
   ground (the standard band-ink scrim over the photograph); the transition
   statement pins at its own height so it leaves only a section's spacing
   behind it; Client stories follows the statement. */
.selw__card { background: #fff; border-color: var(--rule-soft); color: var(--ink); }
.selw__card:hover { border-color: var(--rule); box-shadow: 0 28px 48px -34px rgba(8,34,62,.45); }
.selw__media { border-bottom-color: var(--rule-soft); }
.selw__tag { color: var(--navy); }
.selw__name a { color: var(--ink); }
.selw__name a:hover { color: var(--navy); }
.selw__line { color: var(--ink-2); }
.selw__card .arrow-link, .selw__card .arrow-link--quiet { color: var(--ink); }
.selw__card .arrow-link:hover { color: var(--navy); }
.selw__card .arrow-link:focus-visible { outline-color: var(--navy); }
/* the statement: a pin as tall as itself, centred by its own height */
.selw__out.is-scaling { height: 150vh; height: 150svh; }
.selw__out.is-scaling .selw__out-pin { position: sticky; top: calc(50vh - var(--pinh, 160px) / 2); top: calc(50svh - var(--pinh, 160px) / 2); height: auto; }
.selw__out { margin-bottom: 0; }
/* The operating logic on navy */
.op { --scrim: radial-gradient(120% 80% at 80% 20%, rgba(20,66,104,.3) 0%, rgba(8,34,62,.86) 60%, rgba(8,34,62,.94) 100%); --op-ink: #fff; --op-silver: rgba(255,255,255,.78); --op-mute: rgba(255,255,255,.56); --op-rule: rgba(255,255,255,.18); }
.op__node { background: var(--navy-deep); }
.op__ghost { color: rgba(255,255,255,.06); }
.op__title { font-size: var(--fs-display); line-height: 1.12; letter-spacing: -.026em; font-weight: 400; }
.op__title .op__t1 { color: rgba(255,255,255,.72); }
.op__seen-list a { border-bottom-color: rgba(255,255,255,.34); }
.cs__pending { font-style: italic; color: var(--ink-3); }
.cs__label { margin-bottom: 18px; }
/* the statement leaves one section's spacing behind it, like every other section:
   the band's own bottom padding moves into the pin, so when the pin releases the
   distance from the statement to the next section is exactly --sec-y
   (main > section sets the rhythm, so the selector matches its weight) */
main > section.selw { padding-bottom: 0; }
.selw__out-pin { padding-bottom: var(--sec-y); box-sizing: content-box; }
.selw__out.is-scaling .selw__out-pin { padding-top: var(--sec-y); }

/* ── the owner's third harmony pass ─────────────────────────────────────
   1. The menu bar turns the brand navy the moment the page scrolls (and when
      a drop-down is open), with the wordmark and links in white.
   2. The closing bands — Get started on the home, the conversion band on
      the case study pages, the endnote on the service and story pages — are
      white, so every page ends paper → the navy footer.
   3. The footer is navy with white type, and its columns are Solutions /
      Products / Company; the privacy policy sits on the legal line. */

/* 1. the navy bar */
.nav.is-stuck, .nav--photo.is-stuck, .nav--solid.is-stuck,
.nav.is-mega, .nav--photo.is-mega, .nav--solid.is-mega {
  background: var(--navy-deep);
  backdrop-filter: none;
  box-shadow: 0 1px 0 rgba(255,255,255,.08);
}
.nav.is-stuck .nav__logo, .nav.is-mega .nav__logo,
.nav--photo.is-stuck .nav__logo, .nav--photo.is-mega .nav__logo,
.nav--solid.is-stuck .nav__logo, .nav--solid.is-mega .nav__logo { color: #fff; }
.nav.is-stuck .nav__links > li > a, .nav.is-stuck .nav__trigger,
.nav.is-mega .nav__links > li > a, .nav.is-mega .nav__trigger,
.nav--photo.is-stuck .nav__links > li > a, .nav--photo.is-stuck .nav__trigger,
.nav--photo.is-mega .nav__links > li > a, .nav--photo.is-mega .nav__trigger,
.nav--solid.is-stuck .nav__links > li > a, .nav--solid.is-stuck .nav__trigger,
.nav--solid.is-mega .nav__links > li > a, .nav--solid.is-mega .nav__trigger { color: #fff; }
.nav.is-stuck .nav__links > li > a::after, .nav.is-mega .nav__links > li > a::after,
.nav.is-stuck .nav__trigger::after, .nav.is-mega .nav__trigger::after { background: #fff; }
.nav.is-stuck .nav__burger span, .nav.is-mega .nav__burger span,
.nav--photo.is-stuck .nav__burger span, .nav--solid.is-stuck .nav__burger span { background: #fff; }
.nav.is-stuck .nav__logo .logo, .nav.is-mega .nav__logo .logo { filter: none; }
/* the open drop-down hangs off the navy bar in paper, as before */
.nav.is-mega .mega { border-top-color: transparent; }
/* small screens: the drawer is paper and slides under the bar, so an open
   bar goes clear and its wordmark and burger read navy on the drawer */
@media (max-width: 900px) {
  .nav.is-open, .nav.is-stuck.is-open, .nav--photo.is-stuck.is-open, .nav--solid.is-stuck.is-open { background: none; box-shadow: none; }
  .nav.is-open .nav__logo, .nav.is-stuck.is-open .nav__logo, .nav--photo.is-stuck.is-open .nav__logo { color: var(--navy); }
  .nav.is-open .nav__burger span, .nav.is-stuck.is-open .nav__burger span, .nav--photo.is-stuck.is-open .nav__burger span { background: var(--ink); }
  .nav.is-stuck .nav__links > li > a, .nav.is-stuck .nav__trigger,
  .nav--photo.is-stuck .nav__links > li > a, .nav--photo.is-stuck .nav__trigger,
  .nav--solid.is-stuck .nav__links > li > a, .nav--solid.is-stuck .nav__trigger { color: var(--navy); }
}

/* 2. the closing bands on paper */
.go, .convert, .endnote {
  color: var(--ink);
  background: #fff;
  animation: none;
}
.go::before, .convert::before, .endnote::before, .endnote::after { content: none; }
.go .eyebrow, .convert .eyebrow, .endnote .eyebrow { color: var(--navy); }
.go .display, .convert .display, .endnote .display, .endnote h2 { color: var(--ink); }
.go p, .convert p, .endnote p, .go .lede, .convert .lede, .endnote .lede { color: var(--ink-2); }
.go a, .convert a, .endnote a, .convert .arrow-link, .endnote .arrow-link { color: var(--ink); }
.go__steps { border-top-color: var(--rule); }
.go__steps li { border-bottom-color: var(--rule-soft); }
.go__steps strong { color: var(--ink); }
.go__steps p { color: var(--ink-2); }
.go__n { color: var(--navy); }
.go__contact p { color: var(--ink); }
.go__contact span { color: var(--ink-3); }
.go .go__contact p > a:not([class]), .go .go__contact a { color: var(--navy); text-decoration-color: rgba(22,57,94,.35); }
.go .go__contact a:hover { text-decoration-color: var(--navy); }
.go .form { background: var(--paper); border: 1px solid var(--rule-soft); box-shadow: 0 30px 60px -40px rgba(8,34,62,.35); }
.go .tbc::after { background: var(--navy); color: #fff; }
.go .btn, .convert .btn, .endnote .btn { background: var(--navy-deep); color: #fff; }
.go .btn:hover, .convert .btn:hover, .endnote .btn:hover { background: var(--navy); color: #fff; }
.go .btn--ghost, .convert .btn--ghost, .endnote .btn--ghost { background: none; color: var(--ink); border-color: var(--rule); }
.go .btn--ghost:hover, .convert .btn--ghost:hover, .endnote .btn--ghost:hover { background: var(--paper-2); border-color: var(--ink); }
.endnote { margin-top: 0; }
/* the band before the footer keeps its own bottom rhythm; the footer draws the edge */
.go + .foot, .convert + .foot, .endnote + .foot { border-top: 0; }

/* 3. the navy footer */
.foot { background: var(--navy-deep); color: #fff; border-top: 0; }
.foot__logo { color: #fff; }
.foot__blurb, .foot__addr { color: rgba(255,255,255,.76); }
.foot__addr a { color: #fff; }
.foot__addr a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.foot__col h2 { color: #fff; }
.foot__col a { color: rgba(255,255,255,.72); }
.foot__col a:hover { color: #fff; }
.foot__bar { border-top-color: rgba(255,255,255,.14); }
.foot__bar p { color: rgba(255,255,255,.62); }
.foot__legal { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 22px; }
.foot__legal p { margin: 0; font-size: var(--fs-small); color: rgba(255,255,255,.62); }
.foot__legal a { font-size: var(--fs-small); color: rgba(255,255,255,.72); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(255,255,255,.3); }
.foot__legal a:hover { color: #fff; text-decoration-color: #fff; }
.foot__social a { color: #fff; }
.foot a:focus-visible { outline-color: #fff; }
/* the travel's inertia reaches the pictures: each card's picture drifts
   against the direction of travel as the card crosses the screen (--hs-d, set
   by home.js from the card's position) and leans with the speed (--hs-v) */
.selw__travel.is-pinned .selw__media img {
  transform: translateX(calc(var(--hs-d, 0) * -4%)) skewX(calc(var(--hs-v, 0) * -1.6deg)) scale(1.1);
  transition: none;
  will-change: transform;
}
.selw__travel.is-pinned .selw__card:hover .selw__media img { transform: translateX(calc(var(--hs-d, 0) * -4%)) skewX(calc(var(--hs-v, 0) * -1.6deg)) scale(1.13); }

/* ── FOOTER — ported from the efferd footer-3 block ──────────────────────
   The block's structure (brand column, four link sections, the last with
   icons; a gradient hairline; a centred legal line), its top glow and its
   blur-and-rise reveal, expanded from the block's 1024px cap to the site's
   shell width, on the navy ground with white type. */
.foot {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  margin-top: 0;
  padding-top: clamp(56px, 7vw, 96px);
  border-top: 1px solid rgba(255,255,255,.1);
  border-radius: clamp(28px, 4vw, 48px) clamp(28px, 4vw, 48px) 0 0;
  background: var(--navy-deep);
  color: #fff;
}
.foot::before { content: ''; position: absolute; inset: 0; z-index: -1; background: radial-gradient(35% 128px at 50% 0%, rgba(255,255,255,.12), transparent); }
.foot__glow { position: absolute; top: 0; left: 50%; width: 33%; height: 2px; transform: translate(-50%, -50%); border-radius: 999px; background: rgba(255,255,255,.35); filter: blur(2px); }
.foot__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: clamp(32px, 4vw, 64px); padding-bottom: clamp(44px, 5vw, 72px); }
.foot__brand { grid-column: auto; }
.foot__logo { height: clamp(30px, 2.4vw, 36px); margin-bottom: 22px; color: #fff; }
.foot__blurb { max-width: 34ch; margin: 0 0 18px; font-size: var(--fs-copy); color: rgba(255,255,255,.72); }
.foot__addr { font-size: var(--fs-copy); color: rgba(255,255,255,.72); }
.foot__addr a { color: #fff; }
.foot__cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(24px, 3vw, 40px); }
.foot__col h2 { margin: 0 0 16px; font-size: var(--fs-small); font-weight: 500; letter-spacing: 0; color: #fff; }
.foot__col ul { margin: 0; padding: 0; list-style: none; }
.foot__col li + li { margin-top: 9px; }
.foot__col a { display: inline-flex; align-items: center; gap: 7px; font-size: var(--fs-copy); color: rgba(255,255,255,.72); transition: color .25s var(--ease); }
.foot__col a:hover { color: #fff; }
.foot__col a svg { width: 14px; height: 14px; flex: none; }
.foot__rule { height: 1px; width: 100%; background: linear-gradient(to right, transparent, rgba(255,255,255,.26), transparent); }
.foot__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 22px; padding: 22px 0 28px; border-top: 0; }
.foot__bar p { margin: 0; font-size: var(--fs-small); color: rgba(255,255,255,.62); }
.foot__bar a { font-size: var(--fs-small); color: rgba(255,255,255,.72); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(255,255,255,.3); }
.foot__bar a:hover { color: #fff; text-decoration-color: #fff; }
.foot a:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
/* the block's reveal: blur(4px), 8px above, transparent → in place over .8s,
   each section a tenth of a second after the last; only once scripts run,
   never under reduced motion */
.has-js .foot [data-reveal] { filter: blur(4px); transform: translateY(-8px); transition: opacity .8s var(--ease), transform .8s var(--ease), filter .8s var(--ease); transition-delay: var(--d, 0ms); }
.has-js .foot [data-reveal].is-in { filter: none; transform: none; }
@media (prefers-reduced-motion: reduce) { .has-js .foot [data-reveal] { filter: none; transform: none; opacity: 1; } }
@media (max-width: 1080px) {
  .foot__grid { grid-template-columns: 1fr; gap: clamp(36px, 5vw, 48px); }
  .foot__brand { grid-column: auto; }
}
@media (max-width: 767px) { .foot__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 24px; } }
@media (max-width: 620px) { .foot__bar { flex-direction: row; align-items: center; justify-content: center; text-align: center; } }

/* ── footer: tighter ──────────────────────────────────────────────────── */
.foot { padding-top: clamp(40px, 5vw, 64px); }
.foot__grid { gap: clamp(28px, 3.5vw, 56px); padding-bottom: clamp(28px, 3.5vw, 44px); }
.foot__logo { margin-bottom: 16px; }
.foot__blurb { margin-bottom: 12px; }
.foot__col h2 { margin-bottom: 12px; }
.foot__col li + li { margin-top: 7px; }
.foot__bar { padding: 16px 0 20px; }
@media (max-width: 1080px) { .foot__grid { gap: clamp(28px, 4vw, 36px); } }
@media (max-width: 767px) { .foot__cols { gap: 24px 20px; } }

/* ── OPERATING PRINCIPLES — a sticky index and a ruled list ──────────────
   Left: label, statement, one large index numeral that follows the reading
   line. Right: the four principles as numbered ruled rows. The live row is
   full white, the others recede; hover lifts any row. Everything is static
   and fully legible without JavaScript, under reduced motion and on narrow
   screens. Ground: the standard navy band. */
.prin { --prin-ink: #fff; --prin-silver: rgba(255,255,255,.72); --prin-mute: rgba(255,255,255,.5); --prin-rule: rgba(255,255,255,.16); color: var(--prin-ink); }
.prin__in { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(40px, 6vw, 112px); row-gap: clamp(40px, 5vw, 72px); align-items: start; }
.prin__side { align-self: stretch; }
.prin__sticky { position: sticky; top: clamp(88px, 12vh, 128px); }
.prin__label { margin: 0 0 clamp(18px, 2vw, 26px); font-size: var(--fs-eyebrow); font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--prin-silver); }
.prin__label span { margin: 0 .4em; color: var(--prin-mute); }
.prin__title { margin: 0; max-width: 14ch; font-size: var(--fs-display); font-weight: 400; line-height: 1.08; letter-spacing: -.028em; color: var(--prin-ink); }
.prin__index { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 20px; align-items: end; margin-top: clamp(36px, 5vw, 72px); }
.prin__nums { position: relative; grid-row: 1 / 3; display: block; width: 2.2ch; height: 1em; font-size: clamp(64px, 8vw, 128px); font-weight: 300; line-height: 1; letter-spacing: -.04em; color: var(--prin-ink); font-variant-numeric: tabular-nums; }
.prin__num { position: absolute; inset: 0; opacity: 0; transform: translateY(10px); transition: opacity .5s var(--ease), transform .5s var(--ease); }
.prin__num.is-on { opacity: 1; transform: none; }
.prin__ticks { display: flex; gap: 6px; align-self: end; padding-bottom: 10px; }
.prin__tick { display: block; width: 28px; height: 2px; background: var(--prin-rule); transition: background .4s var(--ease); }
.prin__tick.is-on { background: var(--prin-ink); }
.prin__of { align-self: start; font-size: var(--fs-small); letter-spacing: .06em; color: var(--prin-mute); }
.prin__list { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--prin-rule); }
.prin__row { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 16px; padding: clamp(28px, 3vw, 40px) 0; border-bottom: 1px solid var(--prin-rule); transition: opacity .5s var(--ease); }
.prin__n { padding-top: .55em; font-size: var(--fs-small); letter-spacing: .08em; color: var(--prin-mute); font-variant-numeric: tabular-nums; transition: color .4s var(--ease); }
.prin__row.is-active .prin__n { color: var(--prin-ink); }
.prin__body { display: flex; flex-direction: column; gap: 14px; }
.prin__statement { margin: 0; max-width: 22ch; font-size: var(--fs-title); font-weight: 400; line-height: 1.18; letter-spacing: -.018em; color: var(--prin-ink); }
.prin__copy { margin: 0; max-width: 54ch; font-size: var(--fs-copy); line-height: 1.6; color: var(--prin-silver); }
.prin__seen { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; margin: 4px 0 0; font-size: var(--fs-small); color: var(--prin-silver); }
.prin__seen-label { font-size: var(--fs-eyebrow); font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--prin-mute); }
.prin__seen-list { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0; padding: 0; list-style: none; }
.prin__seen-list a { color: var(--prin-ink); border-bottom: 1px solid rgba(255,255,255,.3); transition: border-color .3s var(--ease); }
.prin__seen-list a:hover { border-bottom-color: #fff; }
.prin__seen-list a:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
/* the live row: only once scripts run on a wide screen, and never under reduced motion */
.prin.is-live .prin__row { opacity: .5; }
.prin.is-live .prin__row.is-active, .prin.is-live .prin__row:hover, .prin.is-live .prin__row:focus-within { opacity: 1; }
.prin__foot { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(40px, 6vw, 112px); padding-top: clamp(24px, 3vw, 36px); border-top: 1px solid var(--prin-rule); }
.prin__foot-label { margin: 0; font-size: var(--fs-small); color: var(--prin-mute); }
.prin__reads { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none; }
.prin__reads a { font-size: var(--fs-copy); color: var(--prin-ink); border-bottom: 1px solid rgba(255,255,255,.3); transition: border-color .3s var(--ease); }
.prin__reads a:hover { border-bottom-color: #fff; }
.prin__reads a:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
@media (max-width: 1000px) {
  .prin__in, .prin__foot { grid-template-columns: 1fr; }
  .prin__sticky { position: static; }
  .prin__index { display: none; }
  .prin__title { max-width: 18ch; }
  .prin.is-live .prin__row { opacity: 1; }
  .prin__foot { row-gap: 14px; }
}
@media (max-width: 620px) {
  .prin__row { grid-template-columns: 40px minmax(0, 1fr); gap: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .prin.is-live .prin__row { opacity: 1; }
  .prin__num, .prin__tick, .prin__row, .prin__n { transition: none; }
}

/* ── hero titles on two lines ──────────────────────────────────────────────
   Every page hero's title breaks once, where build-stories.two_lines() puts
   the <br class="h1-br">; the width cap that used to wrap them to three or
   four lines is lifted. Under 620px the break is dropped and the title wraps
   naturally. */
.chero__title, .cshero .chero__title, .ctc__title { max-width: none; }
.chero__title { text-wrap: nowrap; white-space: nowrap; }
@media (max-width: 620px) { .h1-br { display: none; } .chero__title { white-space: normal; text-wrap: balance; } }
@media (max-width: 1000px) { .chero__title { font-size: clamp(34px, 6.2vw, var(--fs-hero)); } }

/* ── how GEMIS approaches projects: the four stages as a ledger ────────────
   One ruled line, four columns separated by hairlines: a light numeral, the
   stage on the title step, the copy. The rule above draws in on reveal. */
.stages { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--rule); }
.stages::after { content: ''; position: absolute; left: 0; top: -1px; width: 100%; height: 1px; background: var(--navy); transform: scaleX(0); transform-origin: left; transition: transform 1.4s var(--ease) .2s; }
.stages.is-in::after { transform: scaleX(1); }
.stage { padding: clamp(28px, 3vw, 44px) clamp(18px, 2.2vw, 36px) clamp(28px, 3vw, 44px) 0; border-right: 1px solid var(--rule-soft); }
.stage + .stage { padding-left: clamp(18px, 2.2vw, 36px); }
.stage:last-child { border-right: 0; padding-right: 0; }
.stage__n { display: block; margin-bottom: clamp(22px, 3vw, 44px); font-size: clamp(40px, 4.2vw, 64px); font-weight: 300; line-height: 1; letter-spacing: -.04em; color: var(--navy); font-variant-numeric: tabular-nums; }
.stage__name { margin: 0 0 12px; font-size: var(--fs-title); font-weight: 400; line-height: 1.15; letter-spacing: -.018em; color: var(--ink); }
.stage__copy { margin: 0; max-width: 30ch; font-size: var(--fs-copy); line-height: 1.6; color: var(--ink-2); }
@media (max-width: 900px) {
  .stages { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stage:nth-child(2n) { border-right: 0; padding-right: 0; }
  .stage:nth-child(2n + 1) { padding-left: 0; }
  .stage:nth-child(n + 3) { border-top: 1px solid var(--rule-soft); }
}
@media (max-width: 560px) {
  .stages { grid-template-columns: 1fr; }
  .stage, .stage + .stage { border-right: 0; padding-left: 0; padding-right: 0; border-top: 1px solid var(--rule-soft); }
  .stage:first-child { border-top: 0; }
  .stage__n { margin-bottom: 16px; }
}
@media (prefers-reduced-motion: reduce) { .stages::after { transform: none; transition: none; } }

/* ── the conversion band, centred ───────────────────────────────────────── */
.convert__in { margin: 0 auto; text-align: center; }
.convert .eyebrow, .convert .display, .convert .lede { margin-left: auto; margin-right: auto; }
.convert__ctas { justify-content: center; }

/* ══════════════════════════════════════════════════════════════════════
   SOLUTIONS — the directory and the nine service pages
   (scripts/build-solutions.py; content in scripts/solutions.py)
   One family, not one template: every page shares the hero, the type
   steps and the rule weights; each chooses its own sequence of sections
   and its own hero drawing. Motion: hero lines draw in on load (CSS only),
   tracks and bars draw on reveal; everything is static under reduced
   motion and fully readable without JavaScript.
   ══════════════════════════════════════════════════════════════════════ */

/* ── hero: breadcrumb, label + headline, copy left, drawing right ──── */
.svh .shell { position: relative; }
.svh__crumbs ol { display: flex; flex-wrap: wrap; gap: 0 10px; margin: 0 0 clamp(18px, 2vw, 26px); padding: 0; list-style: none; font-size: var(--fs-eyebrow); font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.78); }
.svh__crumbs li + li::before { content: '/'; margin-right: 10px; color: rgba(255,255,255,.45); }
.svh__crumbs a { color: #fff; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: rgba(255,255,255,.35); }
.svh__crumbs a:hover { text-decoration-color: #fff; }
.svh__crumbs a:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.svh__n { font-variant-numeric: tabular-nums; color: #fff; }
.svh__title { margin-bottom: clamp(26px, 3vw, 40px); }
.svh__label { display: block; margin-bottom: clamp(12px, 1.4vw, 18px); font-size: var(--fs-name); font-weight: 500; letter-spacing: .01em; line-height: 1.3; color: #8fc3f3; white-space: normal; }
.svh__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(32px, 5vw, 88px); align-items: start; }
.svh__copy .chero__copy { margin-left: 0; max-width: 52ch; }
.svh__visual { margin: 0; justify-self: end; width: 100%; max-width: 580px; color: #fff; }
.svh--dir .svh__visual { max-width: 600px; }

/* the drawings */
.dg { display: block; width: 100%; height: auto; overflow: visible; }
.dg rect, .dg circle, .dg path { stroke: rgba(255,255,255,.72); }
.dg .dg-a { stroke: #8fc3f3; }
.dg .dg-dim { stroke: rgba(255,255,255,.4); }
.dg .dg-dash, .dg .dg-dashbox { stroke-dasharray: 4 5; }
.dg path.dg-dash { stroke-dasharray: .028 .03; }
.dg .dg-fill { fill: rgba(11,38,66,.62); }
.dg .dg-solid { fill: rgba(143,195,243,.82); stroke: none; }
.dg .dg-old { fill: none; stroke: rgba(255,255,255,.7); }
.dg circle[fill="currentColor"] { stroke: none; fill: #fff; }
.dg text { stroke: none; fill: rgba(255,255,255,.84); font-family: inherit; font-size: 11.5px; letter-spacing: .01em; }
.dg .dg-h { fill: #fff; font-weight: 500; font-size: 12.5px; }
.dg .dg-s { font-size: 10.5px; fill: rgba(255,255,255,.7); }
.dg .dg-k { font-size: 10px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; fill: rgba(255,255,255,.62); }
.dg .dg-l { stroke-dasharray: 1; stroke-dashoffset: 1; animation: dgdraw 1.3s var(--ease) forwards; animation-delay: calc(.4s + var(--i, 0) * .09s); }
.dg path.dg-l.dg-dash { stroke-dashoffset: 0; opacity: 0; animation: dgfade .7s var(--ease) forwards; animation-delay: calc(.4s + var(--i, 0) * .09s); }
.dg .dg-n { opacity: 0; animation: dgfade .7s var(--ease) forwards; animation-delay: calc(.25s + var(--i, 0) * .09s); }
.dg text { opacity: 0; animation: dgfade .8s var(--ease) .7s forwards; }
@keyframes dgdraw { to { stroke-dashoffset: 0; } }
@keyframes dgfade { to { opacity: var(--o, 1); } }
@media (prefers-reduced-motion: reduce) {
  .dg .dg-l, .dg .dg-n, .dg text, .dg path.dg-l.dg-dash { animation: none; opacity: var(--o, 1); stroke-dashoffset: 0; }
}
@media (max-width: 1000px) {
  .svh__grid { grid-template-columns: 1fr; align-items: start; }
  .svh__visual { justify-self: start; max-width: 520px; }
}
@media (max-width: 560px) { .svh__visual { display: none; } }

/* ── the situation ─────────────────────────────────────────────────── */
.sp__in { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 112px); align-items: start; }
.sp__head .display { max-width: 14ch; }
.sp__statement { margin: 0 0 clamp(30px, 3.6vw, 48px); max-width: 34ch; font-size: var(--fs-lead); font-weight: 400; line-height: 1.32; letter-spacing: -.015em; color: var(--ink); }
.sp__signs-label { margin: 0 0 14px; font-size: var(--fs-eyebrow); font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.sp__signs ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(20px, 3vw, 40px); margin: 0; padding: 0; list-style: none; }
.sp__signs li { position: relative; padding: 16px 0 16px 26px; border-top: 1px solid var(--rule); font-size: var(--fs-copy); line-height: 1.5; color: var(--ink-2); }
.sp__signs li::before { content: ''; position: absolute; left: 0; top: 26px; width: 12px; height: 1px; background: var(--navy); }
@media (max-width: 900px) { .sp__in { grid-template-columns: 1fr; } .sp__signs ul { grid-template-columns: 1fr; } }

/* ── what GEMIS delivers ───────────────────────────────────────────── */
.sd__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(30px, 3.4vw, 48px) clamp(24px, 3vw, 44px); margin: 0; padding: 0; list-style: none; }
.sd__item { padding-top: 18px; border-top: 1px solid var(--rule); }
.sd__n { display: block; font-size: var(--fs-small); color: var(--ink-3); font-variant-numeric: tabular-nums; }
.sd__name { margin: 12px 0 8px; font-size: var(--fs-title); font-weight: 500; letter-spacing: -.012em; line-height: 1.25; color: var(--ink); }
.sd__text { margin: 0; max-width: 38ch; font-size: var(--fs-copy); line-height: 1.6; color: var(--ink-2); }
@media (max-width: 1000px) { .sd__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .sd__list { grid-template-columns: 1fr; } }

/* ── approach: a track that draws, shared with the directory's sequence ── */
.trk, .tog__track { position: relative; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: clamp(16px, 2vw, 32px); margin: 0; padding: 0; list-style: none; }
.trk::before, .tog__track::before, .trk::after, .tog__track::after { content: ''; position: absolute; left: 0; right: 0; top: 18px; height: 1px; background: var(--rule); }
.trk::after, .tog__track::after { background: var(--navy); height: 2px; top: 17.5px; transform: scaleX(0); transform-origin: left; transition: transform 1.6s var(--ease) .15s; }
.trk.is-in::after, .tog__track.is-in::after { transform: scaleX(1); }
.trk__step, .tog__step { position: relative; z-index: 1; padding-top: 0; }
.trk__dot { display: inline-grid; place-items: center; width: 36px; height: 36px; margin-bottom: clamp(18px, 2vw, 26px); border-radius: 50%; border: 1px solid var(--navy); background: var(--paper); font-size: var(--fs-small); font-variant-numeric: tabular-nums; color: var(--navy); }
.band-wash .trk__dot { background: var(--wash); }
.band-tint .trk__dot { background: var(--paper-2); }
.trk__name, .tog__name { margin: 0 0 8px; font-size: var(--fs-title); font-weight: 500; letter-spacing: -.012em; color: var(--ink); }
.trk__copy, .tog__copy { margin: 0; max-width: 30ch; font-size: var(--fs-copy); line-height: 1.55; color: var(--ink-2); }
.tog__dot { display: block; width: 12px; height: 12px; margin: 12px 0 clamp(22px, 2.4vw, 30px); border-radius: 50%; background: var(--navy); box-shadow: 0 0 0 6px var(--wash); }
.tog__links { display: flex; flex-direction: column; gap: 8px; margin: 18px 0 0; padding: 14px 0 0; list-style: none; border-top: 1px solid rgba(18,26,38,.14); }
.tog__links a { font-size: var(--fs-small); color: var(--navy); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(22,57,94,.3); }
.tog__links a:hover { text-decoration-color: var(--navy); }
@media (max-width: 1000px) {
  .trk, .tog__track { grid-template-columns: 1fr; gap: 0; }
  .trk::before, .tog__track::before { left: 17.5px; right: auto; top: 0; bottom: 0; width: 1px; height: auto; }
  .trk::after, .tog__track::after { left: 17px; right: auto; top: 0; bottom: 0; width: 2px; height: auto; transform: scaleY(0); transform-origin: top; }
  .trk.is-in::after, .tog__track.is-in::after { transform: scaleY(1); }
  .trk__step, .tog__step { padding: 0 0 clamp(26px, 4vw, 34px) 60px; }
  .trk__dot { position: absolute; left: 0; top: -4px; margin: 0; }
  .tog__dot { position: absolute; left: 12px; top: 6px; margin: 0; }
  .trk__copy, .tog__copy { max-width: 52ch; }
}
@media (prefers-reduced-motion: reduce) { .trk::after, .tog__track::after { transform: none; transition: none; } }

/* ── approach: frames of increasing fidelity (UX) ──────────────────── */
.frm { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 24px); margin: 0; padding: 0; list-style: none; }
.frm__step { position: relative; padding: clamp(22px, 2.2vw, 30px); background: #fff; border: 1px dashed #b8c3d1; border-radius: 6px; }
.frm__step:nth-child(3) { border-style: solid; border-color: var(--rule); }
.frm__step:nth-child(4) { border-style: solid; border-color: var(--rule); box-shadow: inset 0 3px 0 var(--navy); }
.frm__glyph { display: block; width: 60px; height: 46px; margin-bottom: 22px; color: var(--navy); }
.frm__n { display: block; font-size: var(--fs-small); color: var(--ink-3); font-variant-numeric: tabular-nums; }
.frm__name { margin: 8px 0; font-size: var(--fs-title); font-weight: 500; color: var(--ink); }
.frm__copy { margin: 0; font-size: var(--fs-copy); line-height: 1.55; color: var(--ink-2); }
@media (max-width: 1000px) { .frm { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .frm { grid-template-columns: 1fr; } }

/* ── approach: a cycle (support) ───────────────────────────────────── */
.lp__list { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(16px, 2vw, 32px); margin: 0 0 56px; padding: 0; list-style: none; }
.lp__list::before { content: ''; position: absolute; left: 18px; right: 18px; top: 18px; height: 1px; background: var(--navy); }
.lp__list::after { content: ''; position: absolute; left: 18px; right: 18px; bottom: -40px; height: 26px; border: 1px solid var(--navy); border-top: 0; border-radius: 0 0 22px 22px; }
.lp__step { position: relative; z-index: 1; }
.lp__n { display: inline-grid; place-items: center; width: 36px; height: 36px; margin-bottom: 22px; border-radius: 50%; background: var(--navy); color: #fff; font-size: var(--fs-small); font-variant-numeric: tabular-nums; }
.lp__name { margin: 0 0 8px; font-size: var(--fs-title); font-weight: 500; color: var(--ink); }
.lp__copy { margin: 0; max-width: 30ch; font-size: var(--fs-copy); line-height: 1.55; color: var(--ink-2); }
.lp__list > .lp__step:first-child::after { content: 'Repeats'; position: absolute; left: 30px; bottom: -50px; padding: 0 8px; font-size: var(--fs-eyebrow); font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--navy); background: var(--paper); }
.band-wash .lp__list > .lp__step:first-child::after { background: var(--wash); }
.band-tint .lp__list > .lp__step:first-child::after { background: var(--paper-2); }
@media (max-width: 900px) {
  .lp__list { grid-template-columns: 1fr; gap: 0; margin-bottom: 0; }
  .lp__list::before { left: 17.5px; right: auto; top: 18px; bottom: 18px; width: 1px; height: auto; }
  .lp__list::after { display: none; }
  .lp__step { padding: 0 0 28px 60px; }
  .lp__n { position: absolute; left: 0; top: -4px; margin: 0; }
  .lp__list > .lp__step:first-child::after { display: none; }
}

/* ── the comparison table ──────────────────────────────────────────── */
.scmp__table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.scmp__table th, .scmp__table td { padding: clamp(16px, 1.8vw, 22px) clamp(12px, 1.6vw, 24px) clamp(16px, 1.8vw, 22px) 0; text-align: left; vertical-align: top; border-bottom: 1px solid var(--rule); font-size: var(--fs-copy); line-height: 1.55; color: var(--ink-2); }
.scmp__table thead th { padding-top: 0; font-size: var(--fs-title); font-weight: 500; color: var(--ink); border-bottom: 1px solid var(--ink); }
.scmp__table thead th:last-child { color: var(--navy); }
.scmp__table thead td { border-bottom: 1px solid var(--ink); width: 20%; }
.scmp__table tbody th { font-size: var(--fs-eyebrow); font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); padding-top: calc(clamp(16px, 1.8vw, 22px) + 3px); }
.scmp__table tbody td:last-child { color: var(--ink); }
@media (max-width: 700px) {
  .scmp__table, .scmp__table tbody, .scmp__table tr, .scmp__table th, .scmp__table td { display: block; width: auto; }
  .scmp__table thead { display: none; }
  .scmp__table tr { padding: 18px 0; border-bottom: 1px solid var(--rule); }
  .scmp__table tr:first-child { border-top: 1px solid var(--ink); }
  .scmp__table th, .scmp__table td { border: 0; padding: 4px 0; }
  .scmp__table tbody th { padding: 0 0 8px; }
  .scmp__table td::before { content: attr(data-label); display: block; margin-top: 6px; font-size: var(--fs-small); font-weight: 500; color: var(--ink); }
}

/* ── kinds of system ───────────────────────────────────────────────── */
.skd__in { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 5vw, 96px); align-items: start; }
.skd__list { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; }
.skd__list li { padding: 11px 18px; border: 1px solid var(--rule); border-radius: 999px; background: #fff; font-size: var(--fs-copy); color: var(--ink); }
.skd__note { margin: 20px 0 0; max-width: 56ch; font-size: var(--fs-small); color: var(--ink-3); }
@media (max-width: 900px) { .skd__in { grid-template-columns: 1fr; } }

/* ── relationships by year (support) ───────────────────────────────── */
.stl__chart { --lab: clamp(200px, 26%, 320px); }
.stl__ticks { position: relative; height: 22px; margin: 0 0 6px var(--lab); padding: 0; list-style: none; border-bottom: 1px solid var(--rule); }
.stl__ticks li { position: absolute; left: calc(var(--x) * 100%); bottom: 6px; transform: translateX(-50%); font-size: var(--fs-small); color: var(--ink-3); font-variant-numeric: tabular-nums; }
.stl__ticks li:first-child { transform: none; }
.stl__ticks li:last-child { transform: translateX(-100%); color: var(--navy); font-weight: 500; }
.stl__rows { margin: 0; padding: 0; list-style: none; }
.stl__row { display: grid; grid-template-columns: var(--lab) minmax(0, 1fr); grid-template-rows: auto auto; align-items: center; column-gap: 0; padding: 18px 0; border-bottom: 1px solid var(--rule); }
.stl__name { grid-row: 1; font-size: var(--fs-title); font-weight: 500; color: var(--ink); }
.stl__name:hover { color: var(--navy); }
.stl__since { grid-row: 2; font-size: var(--fs-small); color: var(--ink-3); }
.stl__track { grid-column: 2; grid-row: 1 / 3; position: relative; height: 10px; border-radius: 999px; background: var(--rule-soft); }
.stl__bar { position: absolute; top: 0; bottom: 0; left: calc(var(--x) * 100%); right: 0; border-radius: 999px; background: var(--navy); transform: scaleX(0); transform-origin: left; transition: transform 1.4s var(--ease) .2s; }
.stl__bar::after { content: ''; position: absolute; right: -3px; top: 50%; width: 16px; height: 16px; margin-top: -8px; border-radius: 50%; background: var(--navy); box-shadow: 0 0 0 4px rgba(22,57,94,.16); }
.stl__row.is-in .stl__bar { transform: scaleX(1); }
@media (prefers-reduced-motion: reduce) { .stl__bar { transform: none; transition: none; } }
@media (max-width: 700px) {
  .stl__chart { --lab: 0px; }
  .stl__ticks { margin-left: 0; }
  .stl__ticks li:not(:first-child):not(:last-child) { display: none; }
  .stl__row { grid-template-columns: 1fr; row-gap: 6px; }
  .stl__track { grid-column: 1; grid-row: 3; margin-top: 10px; }
}

/* ── evidence modules ──────────────────────────────────────────────── */
.sev__note { margin: calc(-1 * clamp(10px, 1.6vw, 22px)) 0 clamp(24px, 3vw, 40px); max-width: 72ch; font-size: var(--fs-small); font-style: italic; color: var(--ink-3); }
.sev__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(36px, 4vw, 64px) clamp(24px, 3vw, 48px); }
.sev__item { display: flex; flex-direction: column; gap: 22px; }
.sev__item--lead { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(28px, 4vw, 64px); align-items: center; }
.sev__media { position: relative; margin: 0; }
.sev__media img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border: 1px solid var(--rule); border-radius: 4px; background: var(--paper-2); }
.sev__media figcaption { margin-top: 8px; font-size: var(--fs-small); color: var(--ink-3); }
.sev__play { position: absolute; left: 50%; top: calc(50% - 14px); transform: translate(-50%, -50%); display: inline-flex; border-radius: 50%; color: #fff; }
.sev__play svg { width: 64px; height: 64px; padding: 22px; box-sizing: border-box; border-radius: 50%; background: rgba(8,34,62,.82); border: 1px solid rgba(255,255,255,.5); transition: transform .35s var(--ease), background .35s var(--ease); }
.sev__play:hover svg { transform: scale(1.06); background: var(--navy); }
.sev__play:focus-visible { outline: 2px solid var(--navy); outline-offset: 4px; }
.sev__ctx { margin: 0 0 8px; font-size: var(--fs-eyebrow); font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.sev__name { margin: 0 0 12px; font-size: var(--fs-title); font-weight: 500; letter-spacing: -.015em; }
.sev__item--lead .sev__name { font-size: var(--fs-lead); font-weight: 400; }
.sev__name a { color: var(--ink); }
.sev__name a:hover { color: var(--navy); }
.sev__why { margin: 0 0 18px; max-width: 54ch; font-size: var(--fs-copy); line-height: 1.6; color: var(--ink-2); }
.sev__shows { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; margin: 0 0 18px; font-size: var(--fs-small); }
.sev__shows > span { font-size: var(--fs-eyebrow); font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.sev__shows ul { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 0; padding: 0; list-style: none; }
.sev__shows a { color: var(--navy); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(22,57,94,.3); }
.sev__meta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 24px; margin: 0 0 20px; padding-top: 14px; border-top: 1px solid var(--rule); }
.sev__meta dt { font-size: var(--fs-eyebrow); font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.sev__meta dd { margin: 4px 0 0; font-size: var(--fs-small); line-height: 1.5; color: var(--ink); }
.sev--one .sev__grid { grid-template-columns: 1fr; }
@media (max-width: 900px) {
  .sev__grid { grid-template-columns: 1fr; }
  .sev__item--lead { grid-template-columns: 1fr; gap: 22px; }
}

/* ── an endorsement, verbatim ──────────────────────────────────────── */
.sq__in { max-width: 980px; }
.sq__q { margin: 18px 0 clamp(22px, 2.6vw, 32px); }
.sq__q p { margin: 0; font-size: var(--fs-quote); font-weight: 300; line-height: 1.22; letter-spacing: -.02em; color: #fff; }
.sq__by { margin: 0 0 18px; font-size: var(--fs-copy); color: rgba(255,255,255,.78); }
.sq__by strong { display: block; font-weight: 500; color: #fff; }

/* ── related services ──────────────────────────────────────────────── */
.srel__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(24px, 3vw, 48px); margin: 0; padding: 0; list-style: none; }
.srel__link { display: grid; grid-template-columns: 28px minmax(0, 1fr) 20px; grid-template-rows: auto auto; column-gap: 16px; row-gap: 6px; padding: 22px 0; border-top: 1px solid var(--rule); color: inherit; }
.srel__list li:nth-last-child(-n + 2) .srel__link { border-bottom: 1px solid var(--rule); }
.srel__icon { grid-row: 1 / 3; width: 26px; height: 26px; color: var(--navy); }
.srel__icon svg { width: 100%; height: 100%; }
.srel__name { font-size: var(--fs-title); font-weight: 500; color: var(--ink); transition: color .3s var(--ease); }
.srel__why { grid-column: 2; font-size: var(--fs-copy); line-height: 1.5; color: var(--ink-2); }
.srel__go { grid-column: 3; grid-row: 1; align-self: center; color: var(--ink-2); transition: transform .35s var(--ease), color .3s var(--ease); }
.srel__go svg { width: 12px; height: 12px; }
.srel__link:hover .srel__name, .srel__link:hover .srel__go { color: var(--navy); }
.srel__link:hover .srel__go { transform: translate(3px, -3px); }
.srel__link:focus-visible { outline: 2px solid var(--navy); outline-offset: 4px; }
.srel__aside { margin: clamp(28px, 3vw, 40px) 0 0; padding: 18px 22px; border-left: 2px solid var(--navy); background: rgba(255,255,255,.7); font-size: var(--fs-copy); color: var(--ink-2); }
.srel__aside .arrow-link { margin-left: 6px; }
@media (max-width: 760px) {
  .srel__list { grid-template-columns: 1fr; }
  .srel__list li:nth-last-child(2) .srel__link { border-bottom: 0; }
}

/* ── the directory: one ruled index of nine ────────────────────────── */
.sdir__list { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--ink); }
.sdir__row { border-bottom: 1px solid var(--rule); }
.sdir__link { display: grid; grid-template-columns: 64px 32px minmax(0, 1.2fr) minmax(0, 1fr) 24px; gap: clamp(16px, 2.4vw, 36px); align-items: start; margin: 0 -14px; padding: clamp(22px, 2.4vw, 32px) 14px; color: inherit; border-radius: 4px; transition: background .35s var(--ease); }
.sdir__link:hover { background: var(--wash); }
.sdir__link:focus-visible { outline: 2px solid var(--navy); outline-offset: -2px; }
.sdir__n { font-size: var(--fs-lead); font-weight: 300; line-height: 1; letter-spacing: -.03em; color: var(--ink-3); font-variant-numeric: tabular-nums; transition: color .3s var(--ease); }
.sdir__link:hover .sdir__n { color: var(--navy); }
.sdir__icon { width: 26px; height: 26px; margin-top: 2px; color: var(--navy); }
.sdir__icon svg { width: 100%; height: 100%; }
.sdir__name { display: block; font-size: var(--fs-title); font-weight: 500; letter-spacing: -.012em; color: var(--ink); }
.sdir__what { display: block; margin-top: 8px; max-width: 46ch; font-size: var(--fs-copy); line-height: 1.55; color: var(--ink-2); }
.sdir__when { font-size: var(--fs-copy); line-height: 1.55; color: var(--ink-2); }
.sdir__when-label { display: block; margin-bottom: 6px; font-size: var(--fs-eyebrow); font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.sdir__go { align-self: center; color: var(--ink-2); transition: transform .35s var(--ease), color .3s var(--ease); }
.sdir__go svg { width: 13px; height: 13px; }
.sdir__link:hover .sdir__go { color: var(--navy); transform: translate(3px, -3px); }
@media (max-width: 900px) {
  .sdir__link { grid-template-columns: 44px minmax(0, 1fr) 18px; row-gap: 12px; }
  .sdir__icon { display: none; }
  .sdir__n { font-size: var(--fs-title); padding-top: 2px; }
  .sdir__when { grid-column: 2; grid-row: 2; }
  .sdir__go { grid-column: 3; grid-row: 1; align-self: start; padding-top: 4px; }
}

/* ── the directory: start from the problem ─────────────────────────── */
.path__list { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--ink); }
.path__row { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(16px, 3vw, 48px); align-items: baseline; padding: clamp(20px, 2.2vw, 28px) 0; border-bottom: 1px solid var(--rule); }
.path__problem { margin: 0; font-size: var(--fs-title); font-weight: 400; line-height: 1.35; letter-spacing: -.012em; color: var(--ink); }
.path__start { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 18px; }
.path__label { font-size: var(--fs-eyebrow); font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.path__start ul { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 0; padding: 0; list-style: none; }
@media (max-width: 760px) { .path__row { grid-template-columns: 1fr; } }

/* the stage ledger takes as many columns as there are stages */
.sa .stages { grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); }
@media (max-width: 1100px) {
  .sa .stages { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sa .stage { border-right: 1px solid var(--rule-soft); padding-left: clamp(18px, 2.2vw, 36px); padding-right: clamp(18px, 2.2vw, 36px); }
  .sa .stage:nth-child(2n) { border-right: 0; padding-right: 0; }
  .sa .stage:nth-child(2n + 1) { padding-left: 0; }
  .sa .stage:nth-child(n + 3) { border-top: 1px solid var(--rule-soft); }
}
@media (max-width: 560px) {
  .sa .stages { grid-template-columns: 1fr; }
  .sa .stage, .sa .stage:nth-child(2n), .sa .stage:nth-child(2n + 1) { border-right: 0; padding-left: 0; padding-right: 0; border-top: 1px solid var(--rule-soft); }
  .sa .stage:first-child { border-top: 0; }
}
/* link lists keep a 24px target on touch screens (WCAG 2.5.8) */
.tog__links a, .sev__shows a, .path__start a { display: inline-block; padding-block: 5px; }
.tog__links { gap: 2px; }

/* ══════════════════════════════════════════════════════════════════════
   BRAND v3 — the GEMIS design system (2026-10-28)
   Apple's web grammar on GEMIS navy: edge-to-edge tiles that alternate
   white, parchment and deep navy, each centred on a headline, a one-line
   tagline, two small pill CTAs and the product — a real interface from the
   case-study videos, resting on the tile with the system's single shadow.
   No gradients, no decorative chrome, no shadows on cards or type. Inter
   at 600 with tight tracking for headlines, 17px/400 for reading. One
   accent: the dark blue, for every link and every filled pill. The global
   nav is a slim navy bar; product and story pages add a frosted sub-nav.
   This block is last on purpose: it decides. Selectors carry :not(#_) to
   outweigh earlier layers without !important.
   ══════════════════════════════════════════════════════════════════════ */

@font-face {
  font-family: 'Inter Var';
  src: url('../fonts/inter-latin-opsz-normal.woff2') format('woff2-variations'),
       url('../fonts/inter-latin-opsz-normal.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
}

:root {
  /* the single accent — the dark blue */
  --primary: #16395e;  --primary-focus: #2a5c8a;  --primary-on-dark: #8fc1f5;
  /* surfaces */
  --canvas: #ffffff;  --parchment: #f5f5f7;  --pearl: #fafafc;
  --tile-1: #0b2642;  --tile-2: #0e2b4a;  --tile-3: #081d33;  --nav-bar: #071b31;
  /* text */
  --ink: #1d1d1f;  --ink-2: #424245;  --ink-3: #6e6e73;
  --on-dark: #ffffff;  --on-dark-muted: rgba(255, 255, 255, .72);
  /* lines, shape, the one shadow */
  --hairline: #e0e0e0;  --hairline-soft: rgba(0, 0, 0, .08);  --divider-soft: #f0f0f0;
  --r-sm: 8px;  --r-md: 11px;  --r-lg: 18px;  --r-pill: 9999px;
  --product-shadow: rgba(0, 0, 0, .22) 3px 5px 30px 0;
  /* the earlier tokens, remapped — every older component follows */
  --paper: #ffffff;  --paper-2: #f5f5f7;  --wash: #f5f5f7;
  --navy: #16395e;  --navy-deep: #0b2642;  --blue: #2a5c8a;  --steel: #8fc1f5;
  --rule: #e0e0e0;  --rule-soft: #ececef;  --chip: #f5f5f7;
  --shell: 1440px;  --gutter: clamp(20px, 3vw, 44px);
  --fs-hero: clamp(34px, 4.6vw, 56px);
  --fs-display: clamp(28px, 3.2vw, 40px);
  --fs-lead: clamp(21px, 2.1vw, 28px);
  --fs-title: 21px;
  --fs-name: 17px;
  --fs-copy: 17px;
  --fs-small: 14px;
  --fs-eyebrow: 14px;
  --fs-stat: clamp(40px, 4.2vw, 56px);
  --fs-quote: clamp(24px, 2.6vw, 34px);
  --sec-y: clamp(56px, 7vw, 80px);
  --sec-y-s: clamp(40px, 5vw, 56px);
  --hero-top: clamp(56px, 8vw, 96px);
  --hero-bottom: clamp(56px, 7vw, 80px);
  --head-gap: 16px;
  --card-pad: 24px;
}
html { scroll-padding-top: 112px; }
[id] { scroll-margin-top: 112px; }

/* ── type ──────────────────────────────────────────────────────────────── */
html, body { background: var(--canvas); }
body { font-family: 'Inter Var', system-ui, -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', sans-serif; font-weight: 400; font-size: 17px; line-height: 1.44; letter-spacing: -.022em; color: var(--ink); font-feature-settings: "ss03"; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
strong, b { font-weight: 600; }
:is(h1, h2, h3, h4, .display):not(#_) { font-family: inherit; font-weight: 600; color: var(--ink); }
:is(h1, .chero__title, .hero__title):not(#_) { font-size: var(--fs-hero); line-height: 1.07; letter-spacing: -.015em; font-weight: 600; }
:is(h2, .display):not(#_) { font-size: var(--fs-display); line-height: 1.1; letter-spacing: -.012em; }
h3:not(#_) { font-size: var(--fs-title); line-height: 1.19; letter-spacing: -.01em; }
.eyebrow:not(#_), .chero__kicker:not(#_), .hero__eyebrow, .cs__label:not(#_), .cscard__tag:not(#_), .post__tag:not(#_), .svh__label:not(#_) { font-size: var(--fs-small); font-weight: 600; letter-spacing: -.01em; text-transform: none; color: var(--ink-3); }
.lede:not(#_), .chero__copy:not(#_), .hero__copy:not(#_) { font-size: var(--fs-title); font-weight: 400; line-height: 1.38; letter-spacing: -.015em; color: var(--ink-2); }
p:not(#_) { line-height: 1.44; }
main p > a:not([class]) { color: var(--primary); text-decoration: underline; text-decoration-color: rgba(22, 57, 94, .35); text-underline-offset: 3px; }
main p > a:not([class]):hover { text-decoration-color: var(--primary); }
.stat__n, .stage__n, .sdir__n, .trk__dot, .lp__n, .frm__n, .sd__n, .faq__n, .srow__n, .stl__ticks, .prin__nums, .prin__n,
.tline__disc b, .svh__n, .cscard__meta dd, td, .tnum { font-feature-settings: "ss03", "tnum"; font-variant-numeric: tabular-nums; }

/* ── links and the two button grammars ─────────────────────────────────── */
.arrow-link:not(#_) { gap: 5px; padding-bottom: 0; border-bottom: 0; color: var(--primary); font-size: 17px; font-weight: 400; letter-spacing: -.022em; opacity: 1; transition: color .2s var(--ease); }
.arrow-link:not(#_):hover { color: var(--primary-focus); opacity: 1; text-decoration: underline; text-underline-offset: 3px; }
.arrow-link:not(#_) svg { width: 10px; height: 10px; }
.btn:not(#_) { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 11px 22px; border: 1px solid var(--primary); border-radius: var(--r-pill); background: var(--primary); color: #fff; font-size: 17px; font-weight: 400; line-height: 1; letter-spacing: -.022em; box-shadow: none; transform: none; transition: transform .18s var(--ease), background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease); }
.btn:not(#_):hover { background: var(--primary-focus); border-color: var(--primary-focus); color: #fff; transform: none; }
.btn:not(#_):active { transform: scale(.95); }
.btn:not(#_):focus-visible { outline: 2px solid var(--primary-focus); outline-offset: 2px; }
.btn:not(#_) svg { width: 10px; height: 10px; }
.btn--ghost:not(#_), .btn--light:not(#_) { background: transparent; color: var(--primary); border-color: var(--primary); }
.btn--ghost:not(#_):hover, .btn--light:not(#_):hover { background: var(--primary); color: #fff; }
.btn--sm:not(#_) { min-height: 36px; padding: 8px 15px; font-size: 14px; letter-spacing: -.016em; }
.form__send:not(#_) { min-height: 44px; padding: 11px 22px; border: 0; border-radius: var(--r-pill); background: var(--primary); color: #fff; font-size: 17px; font-weight: 400; letter-spacing: -.022em; transform: none; box-shadow: none; transition: transform .18s var(--ease), background .2s var(--ease); }
.form__send:not(#_):hover { background: var(--primary-focus); transform: none; }
.form__send:not(#_):active { transform: scale(.95); }
.form__send:not(#_):focus-visible { outline: 2px solid var(--primary-focus); outline-offset: 2px; }

/* ── the global nav: a slim navy bar, in flow and sticky ───────────────── */
.nav:not(#_), .nav.is-stuck:not(#_), .nav.is-mega:not(#_), .nav--solid:not(#_), .nav--photo:not(#_) { position: sticky; inset: auto; top: 0; z-index: 90; display: flex; align-items: center; height: 48px; padding-block: 0; background: var(--nav-bar); backdrop-filter: none; box-shadow: none; transition: none; }
.nav:not(#_) .nav__in { width: 100%; }
.nav:not(#_) .nav__logo { height: 22px; color: #fff; }
.nav:not(#_) .nav__logo .logo { filter: none; }
.nav:not(#_) .nav__links { gap: clamp(18px, 2.2vw, 34px); }
.nav:not(#_) .nav__links > li > a, .nav:not(#_) .nav__trigger { font-size: 13px; font-weight: 400; letter-spacing: -.01em; color: rgba(255, 255, 255, .86); transition: color .2s var(--ease); }
.nav:not(#_) .nav__links > li > a::after { display: none; }
.nav:not(#_) .nav__links > li > a:hover, .nav:not(#_) .nav__trigger:hover, .nav:not(#_) .nav__trigger[aria-expanded="true"] { color: #fff; }
.nav:not(#_) .nav__chev { opacity: .7; }
.nav:not(#_) .nav__burger span { background: #fff; }
.nav:not(#_) a:focus-visible, .nav:not(#_) button:focus-visible { outline: 2px solid var(--primary-on-dark); outline-offset: 2px; }
/* the flyout menus are navy sheets, in the manner of apple.com */
.mega:not(#_) { top: 48px; background: var(--nav-bar); border-top: 1px solid rgba(255, 255, 255, .08); box-shadow: none; color: #fff; }
.mega:not(#_) .mega__in { padding-block: clamp(32px, 3.6vw, 48px) clamp(36px, 4vw, 56px); }
.mega:not(#_) .mega__head { border-bottom-color: rgba(255, 255, 255, .12); }
.mega:not(#_) .eyebrow { color: rgba(255, 255, 255, .56); }
.mega:not(#_) .mega__lede { color: rgba(255, 255, 255, .72); font-size: 14px; }
.mega:not(#_) .arrow-link { color: var(--primary-on-dark); font-size: 14px; }
.mega:not(#_) .msvc { padding: 10px 10px 10px 0; border-radius: var(--r-sm); background: none; }
.mega:not(#_) .msvc:hover { background: none; }
.mega:not(#_) .msvc__icon { display: none; }
.mega:not(#_) .msvc { grid-template-columns: minmax(0, 1fr); }
.mega:not(#_) .msvc__name { font-size: 19px; font-weight: 600; letter-spacing: -.015em; color: #fff; transition: color .2s var(--ease); }
.mega:not(#_) .msvc:hover .msvc__name { color: var(--primary-on-dark); }
.mega:not(#_) .msvc__line { color: rgba(255, 255, 255, .6); font-size: 14px; }
.mega:not(#_) .prod { background: none; border: 0; }
.mega:not(#_) .prod__media { display: none; }
.mega:not(#_) .prod__name { font-size: 19px; font-weight: 600; letter-spacing: -.015em; color: #fff; }
.mega:not(#_) .prod__desc { color: rgba(255, 255, 255, .6); font-size: 14px; }
.mega:not(#_) .prod__cta { color: var(--primary-on-dark); font-size: 14px; }
.mega:not(#_) a:focus-visible { outline-color: var(--primary-on-dark); }
@media (max-width: 900px) {
  .nav:not(#_) .nav__drawer { padding-top: 64px; background: var(--nav-bar); box-shadow: none; }
  .nav.is-open:not(#_) .nav__logo { color: #fff; }
  .nav.is-open:not(#_) .nav__burger span { background: #fff; }
  .nav:not(#_) .nav__links > li > a, .nav:not(#_) .nav__trigger { color: #fff; font-size: 19px; font-weight: 600; letter-spacing: -.015em; }
  .nav:not(#_) .mega { position: static; background: none; border: 0; }
  .nav:not(#_) .msvc__name, .nav:not(#_) .prod__name { font-size: 17px; font-weight: 400; }
}

/* ── the frosted sub-nav on product and story pages ────────────────────── */
.subnav { position: sticky; top: 48px; z-index: 80; height: 52px; background: rgba(245, 245, 247, .8); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); border-bottom: 1px solid var(--hairline-soft); }
.subnav__in { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: 100%; }
.subnav__name { margin: 0; font-size: 21px; font-weight: 600; letter-spacing: -.015em; color: var(--ink); white-space: nowrap; }
.subnav__name a { color: inherit; }
.subnav__links { display: flex; align-items: center; gap: clamp(14px, 1.8vw, 28px); margin: 0; padding: 0; list-style: none; }
.subnav__links a { font-size: 14px; letter-spacing: -.013em; color: var(--ink); opacity: .8; transition: opacity .2s var(--ease); }
.subnav__links a:hover { opacity: 1; }
.subnav__cta:not(#_) { min-height: 28px; padding: 5px 12px; font-size: 12px; letter-spacing: -.007em; margin-left: 8px; }
.subnav__cta:not(#_) svg { width: 9px; height: 9px; }
@media (max-width: 900px) { .subnav__links li:not(:last-child) { display: none; } }
@media (max-width: 620px) { .subnav__name { font-size: 17px; } }

/* ── tiles: the colour change is the divider ───────────────────────────── */
section.band:not(.band-wash):not(.band-tint):not(.band-ink), .band:not(#_):not(.band-wash):not(.band-tint):not(.band-ink) { background-color: var(--canvas); }
.band-wash:not(#_), .band-tint:not(#_) { background-color: var(--parchment); }
.plusgrid:not(#_)::after, .dotgrid:not(#_) { display: none; }
.trust:not(#_) { background-color: var(--parchment); }
.words:not(#_) { background-color: var(--parchment); }
.go:not(#_) { background: var(--canvas); }
.go:not(#_) .form { padding: clamp(24px, 3vw, 40px); background: var(--canvas); border: 1px solid var(--hairline); border-radius: var(--r-lg); box-shadow: none; }
/* every section headline is a centred stack */
.sec__head:not(#_) { display: flex; flex-direction: column; align-items: center; gap: 0; max-width: 760px; margin: 0 auto clamp(36px, 4.4vw, 56px); padding-bottom: 0; border-bottom: 0; text-align: center; }
.sec__head:not(#_)::after { content: none; }
.sec__head:not(#_) > div { display: contents; }
.sec__head:not(#_) .eyebrow { order: 0; margin: 0 0 12px; }
.sec__head:not(#_) :is(h2, .display) { order: 1; max-width: none; margin: 0; }
.sec__head:not(#_) .lede { order: 2; max-width: 64ch; margin: 14px auto 0; }
.sec__head:not(#_) .arrow-link { order: 3; margin-top: 16px; }
.sec__head:not(#_) .sec__link, .sec__head:not(#_) .sec__aside { order: 3; margin-top: 16px; }
/* the deep-navy tiles */
:is(.band-ink, .prin, .sq, .built, .op, .convert, .endnote, .cshero--story, .chero--product):not(#_) { position: relative; isolation: isolate; overflow: hidden; background: var(--tile-1); color: #fff; animation: none; }
:is(.band-ink, .prin, .sq, .built, .op, .convert, .endnote, .cshero--story, .chero--product):not(#_)::before, :is(.band-ink, .prin, .sq, .built, .op, .convert, .endnote, .cshero--story, .chero--product):not(#_)::after { content: none; }
:is(.band-ink, .prin, .sq, .built, .op, .convert, .endnote, .cshero--story, .chero--product):not(#_) :is(h1, h2, h3, h4, .display, .chero__title, .cshero__headline, .stat__n) { color: #fff; }
:is(.band-ink, .prin, .sq, .built, .op, .convert, .endnote, .cshero--story, .chero--product):not(#_) :is(p, li, dd, dt, .lede, .chero__copy, .stat__l) { color: var(--on-dark-muted); }
:is(.band-ink, .prin, .sq, .built, .op, .convert, .endnote, .cshero--story, .chero--product):not(#_) :is(.eyebrow, .chero__kicker, .prin__label, .cs__label) { color: rgba(255, 255, 255, .6); }
:is(.band-ink, .prin, .sq, .built, .op, .convert, .endnote, .cshero--story, .chero--product):not(#_) :is(.arrow-link, a:not(.btn):not([class])) { color: var(--primary-on-dark); }
:is(.band-ink, .prin, .sq, .built, .op, .convert, .endnote, .cshero--story, .chero--product):not(#_) .arrow-link:hover { color: #fff; }
:is(.band-ink, .prin, .sq, .built, .op, .convert, .endnote, .cshero--story, .chero--product):not(#_) .btn { background: #fff; border-color: #fff; color: var(--primary); }
:is(.band-ink, .prin, .sq, .built, .op, .convert, .endnote, .cshero--story, .chero--product):not(#_) .btn:hover { background: var(--parchment); border-color: var(--parchment); color: var(--primary); }
:is(.band-ink, .prin, .sq, .built, .op, .convert, .endnote, .cshero--story, .chero--product):not(#_) .btn--ghost { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .7); }
:is(.band-ink, .prin, .sq, .built, .op, .convert, .endnote, .cshero--story, .chero--product):not(#_) .btn--ghost:hover { background: #fff; color: var(--primary); }
:is(.band-ink, .prin, .sq, .built, .op, .convert, .endnote, .cshero--story, .chero--product):not(#_) :is(a, button):focus-visible { outline-color: var(--primary-on-dark); }
.prin:not(#_) { --prin-silver: rgba(255, 255, 255, .74); --prin-mute: rgba(255, 255, 255, .56); --prin-rule: rgba(255, 255, 255, .14); }
.sq:not(#_) + .band, .band-ink:not(#_) + .band { border-top: 0; }
/* the closing tile: a centred invitation on navy */
:is(.convert, .endnote):not(#_) { padding-top: var(--sec-y); padding-bottom: var(--sec-y); min-height: 0; display: block; }
.convert:not(#_) .convert__in, .endnote:not(#_) > .shell { max-width: 820px; padding: 0; border-radius: 0; background: none; text-align: center; }
:is(.convert, .endnote):not(#_) :is(h2, .display) { max-width: none; margin-left: auto; margin-right: auto; }
:is(.convert, .endnote):not(#_) p { margin-left: auto; margin-right: auto; }
.endnote:not(#_) .arrow-link { color: var(--primary-on-dark); }
/* two navy tiles meet at the foot: a micro-step apart */
.endnote:not(#_) + .foot, .convert:not(#_) + .foot { background: var(--tile-3); }

/* ── heroes: a centred product tile ────────────────────────────────────── */
:is(.hero, .chero):not(#_) { min-height: 0; padding-top: var(--hero-top); padding-bottom: var(--hero-bottom); background: var(--canvas); color: var(--ink); text-align: center; animation: none; }
:is(.hero, .chero):not(#_)::before, :is(.hero, .chero):not(#_)::after { content: none; }
.hero__bg:not(#_) { display: none; }
.hero__grid, .chero__grid, .cshero__in, .svh__grid { display: flex; flex-direction: column; align-items: center; gap: 0; }
.hero__text, .chero__text, .cshero__text, .svh__copy { display: flex; flex-direction: column; align-items: center; max-width: 820px; }
:is(.hero, .chero):not(#_) .chero__kicker, .hero__eyebrow { margin: 0 0 14px; }
:is(.hero, .chero):not(#_) :is(h1, .chero__title, .hero__title) { max-width: none; margin: 0 0 14px; white-space: nowrap; }
:is(.hero, .chero):not(#_) :is(.hero__copy, .chero__copy) { max-width: 60ch; margin: 0 0 24px; }
.cshero__headline:not(#_) { margin: 0 0 10px; font-size: var(--fs-lead); font-weight: 400; line-height: 1.2; letter-spacing: -.015em; color: var(--ink); }
:is(.hero__ctas, .cshero__ctas):not(#_) { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px 24px; margin: 0; }
.hero__partner:not(#_) { position: static; display: inline-flex; align-items: center; gap: 10px; margin: 24px 0 0; padding: 6px 12px 6px 8px; border: 1px solid var(--hairline); border-radius: var(--r-pill); background: var(--canvas); }
.hero__partner:not(#_) svg { width: 14px; height: 14px; }
.hero__partner:not(#_) .hero__partner-line { font-size: 14px; letter-spacing: -.013em; color: var(--ink-2); }
.cshero__status:not(#_) { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 20px; padding: 5px 12px; border: 1px solid var(--hairline); border-radius: var(--r-pill); background: var(--canvas); font-size: 14px; letter-spacing: -.013em; color: var(--ink-2); }
.cshero--story:not(#_) .cshero__status { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .22); color: #fff; }
.cshero--story:not(#_) .cshero__headline { color: #fff; }
.cshero--story:not(#_) .cshero__dot { background: #34c759; box-shadow: none; }
:is(.hero__visual, .chero__visual, .cshero__visual):not(#_) { width: 100%; max-width: 980px; margin: clamp(40px, 5vw, 64px) auto 0; overflow: visible; border: 0; background: none; aspect-ratio: auto; box-shadow: none; }
/* the Solutions drawings sit in a white window on the tile */
.svh:not(#_) .svh__crumbs { justify-content: center; margin-bottom: 14px; }
.svh:not(#_) .svh__crumbs ol { justify-content: center; }
.svh:not(#_) .svh__title { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.svh:not(#_) .svh__visual { position: relative; width: 100%; max-width: 760px; margin: clamp(40px, 5vw, 64px) auto 0; padding: 48px 28px 28px; border: 1px solid var(--hairline); border-radius: var(--r-lg); background: var(--canvas); box-shadow: var(--product-shadow); color: var(--ink); }
.svh:not(#_) .svh__visual::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 30px; border-bottom: 1px solid var(--hairline); border-radius: var(--r-lg) var(--r-lg) 0 0; background: var(--parchment); }
.svh:not(#_) .svh__visual::after { content: ''; position: absolute; left: 16px; top: 11px; width: 8px; height: 8px; border-radius: 50%; background: #d2d2d7; box-shadow: 13px 0 0 #d2d2d7, 26px 0 0 #d2d2d7; }
.svh__crumbs:not(#_) a { color: var(--primary); text-decoration: none; }
.svh__crumbs:not(#_) li + li::before { color: var(--ink-3); }
.svh__n:not(#_) { color: var(--ink); }
.dg:not(#_) :is(rect, circle, path) { stroke: rgba(29, 29, 31, .6); }
.dg:not(#_) .dg-a { stroke: var(--primary); }
.dg:not(#_) .dg-dim { stroke: rgba(29, 29, 31, .25); }
.dg:not(#_) .dg-fill { fill: #fff; }
.dg:not(#_) .dg-solid { fill: var(--primary); stroke: none; }
.dg:not(#_) .dg-old { stroke: rgba(29, 29, 31, .55); }
.dg:not(#_) circle[fill="currentColor"] { fill: var(--primary); }
.dg:not(#_) text { fill: var(--ink-2); }
.dg:not(#_) .dg-h { fill: var(--ink); }
.dg:not(#_) .dg-s { fill: var(--ink-3); }
.dg:not(#_) .dg-k { fill: var(--primary); }
/* the other first sections that double as heroes */
:is(.ihero, .oops, .legal, .ctc#hero):not(#_) { position: relative; isolation: isolate; overflow: visible; padding-top: var(--hero-top); background: var(--canvas); color: var(--ink); }
.ihero__bg:not(#_), :is(.ihero, .oops):not(#_)::before { display: none; content: none; }
:is(.ihero, .oops, .legal, .ctc#hero):not(#_) :is(h1, .ihero__title, .oops__title, .legal__title, .ctc__title) { color: var(--ink); font-weight: 600; letter-spacing: -.015em; }
:is(.ihero, .oops, .legal, .ctc#hero):not(#_) :is(.ihero__copy, .ctc__lede, .legal__note, p) { color: var(--ink-2); }
:is(.ihero, .oops, .legal, .ctc#hero):not(#_) :is(.eyebrow, .eyebrow--light, .oops__code) { color: var(--ink-3); }
.ihero:not(#_) .ihero__grid { align-items: center; }
.ihero__title:not(#_) { max-width: none; }
.jump:not(#_) { padding: 20px 24px; border: 1px solid var(--hairline); border-radius: var(--r-lg); background: var(--canvas); box-shadow: none; }
.jump:not(#_) a { color: var(--ink); font-size: 14px; letter-spacing: -.013em; border-bottom-color: var(--divider-soft); }
.jump:not(#_) a:hover { color: var(--primary); border-color: var(--divider-soft); }
.jump:not(#_) span { color: var(--ink-3); }
.jump:not(#_) li:last-child a { border-bottom: 0; }
.ihero:not(#_) a:focus-visible { outline-color: var(--primary-focus); }
.ctc:not(#_) .form { padding: clamp(24px, 3vw, 40px); border: 1px solid var(--hairline); border-radius: var(--r-lg); background: var(--canvas); box-shadow: none; }
.legal__head:not(#_) { border-bottom-color: var(--hairline); }
.legal__toc:not(#_) a:hover { color: var(--primary); }
.oops:not(#_) { min-height: 60vh; }
@media (max-width: 620px) { :is(.hero, .chero):not(#_) :is(h1, .chero__title, .hero__title) { white-space: normal; } }
@media (max-width: 419px) { :root { --fs-hero: 28px; } }

/* ── composites: real interfaces resting on the tile ───────────────────── */
.comp { position: relative; margin: 0; }
.comp .win, .comp .phn { overflow: hidden; background: #fff; box-shadow: var(--product-shadow); animation: none; }
.win { border-radius: var(--r-md); }
.win__bar { display: flex; align-items: center; gap: 6px; height: 28px; padding: 0 12px; border-bottom: 1px solid var(--hairline); background: var(--parchment); }
.win__bar i { width: 8px; height: 8px; border-radius: 50%; background: #d2d2d7; }
.win__bar span { margin-left: 8px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 11px; font-weight: 400; letter-spacing: 0; color: var(--ink-3); }
.win img, .phn img { display: block; width: 100%; height: auto; }
.phn { border-radius: 26px; }
.comp--2 { aspect-ratio: 16 / 8.6; }
.comp--2 .win { position: absolute; }
.comp--2 .win--1 { left: 0; top: 0; width: 72%; }
.comp--2 .win--2 { right: 0; top: 26%; width: 58%; }
.comp--2 .phn--1 { position: absolute; left: 5%; bottom: 0; width: 17%; }
.comp--1 { max-width: 820px; margin: 0 auto; }
.comp--1.comp--phone { padding: 0 10% 7% 0; }
.comp--1.comp--phone .phn--1 { position: absolute; right: 0; bottom: 0; width: 24%; }
.comp__note { display: block; margin: 20px auto 0; width: max-content; max-width: 100%; font-size: 12px; letter-spacing: -.007em; color: var(--ink-3); }
.comp--2 .comp__note { position: absolute; left: 0; right: 0; top: 100%; }
:is(.cshero--story, .chero--product):not(#_) .comp__note { color: rgba(255, 255, 255, .56); }
:is(.cshero--story, .chero--product):not(#_) .comp .win, :is(.cshero--story, .chero--product):not(#_) .comp .phn { box-shadow: rgba(0, 0, 0, .5) 3px 5px 30px 0; }
.hero__visual:not(#_) { margin-bottom: 40px; }
@media (max-width: 760px) {
  .comp--2 { aspect-ratio: auto; padding-bottom: 0; }
  .comp--2 .win--1 { position: relative; width: 100%; }
  .comp--2 .win--2 { display: none; }
  .comp--2 .phn--1 { left: auto; right: 0; bottom: -4%; width: 26%; }
  .comp--2 .comp__note { position: static; }
  .comp--1.comp--phone { padding: 0 12% 8% 0; }
  .hero__visual:not(#_) { margin-bottom: 0; }
}

/* ── cards: white, hairline, 18px — the store grammar ──────────────────── */
:is(.cscard, .selw__card, .frm__step, .flow__step, .dec, .rec, .endo, .sol__card, .sd__item, .prod, .post, .cs__main, .skd__list li, .tog__step, .path__row):not(#_) { background: var(--canvas); border: 1px solid var(--hairline); border-radius: var(--r-lg); box-shadow: none; }
:is(.cscard, .selw__card, .sol__card, .post, .prod):not(#_) { transition: none; transform: none; }
:is(.cscard, .selw__card, .sol__card, .post, .prod):not(#_):hover { box-shadow: none; transform: none; border-color: var(--hairline); }
:is(.cscard, .selw__card, .post, .prod):not(#_) { overflow: hidden; }
.sd__item:not(#_) { padding: var(--card-pad); border-top: 1px solid var(--hairline); }
.sol__card:not(#_) { padding: var(--card-pad); }
:is(.cscard__media, .selw__media, .post__media, .prod__media):not(#_) { border-bottom: 1px solid var(--hairline); background: var(--parchment); }
:is(.cscard__media, .selw__media) img { border-radius: 0; transform: none; }
:is(.cscard, .selw__card):not(#_):hover :is(.cscard__media, .selw__media) img { transform: none; }
:is(.cscard__body, .selw__body):not(#_) { padding: var(--card-pad); }
.cscard__name:not(#_), .selw__name:not(#_) { font-size: 21px; font-weight: 600; letter-spacing: -.015em; }
.cscard__line:not(#_) { color: var(--ink-2); }
.cscard__meta:not(#_) { border-top-color: var(--divider-soft); }
.cscard__meta:not(#_) dt { font-size: 12px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--ink-3); }
/* play controls: the translucent circular chip over imagery */
:is(.featured__play, .selw__play, .sev__play, .cscard__play):not(#_) svg { background: rgba(210, 210, 215, .64); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border: 0; box-shadow: none; color: var(--ink); }
:is(.featured__play, .selw__play, .sev__play, .cscard__play):not(#_):hover svg { background: rgba(245, 245, 247, .9); }
/* tags: quiet hairline pills */
:is(.chips li, .srow__chips li, .cscard__chips li, .post__chips li):not(#_) { padding: 4px 11px; border: 1px solid var(--hairline); border-radius: var(--r-pill); background: var(--canvas); color: var(--ink-2); font-size: 12px; font-weight: 400; letter-spacing: -.007em; }
.caps:not(#_) li { border-top-color: var(--hairline); font-weight: 400; }
.caps:not(#_) li::before { top: calc(50% - 4px); width: 8px; height: 8px; background: var(--primary); box-shadow: none; }
/* feature cards (.post): picture, then the title */
.post:not(#_) { padding: 0 0 var(--card-pad); }
.post:not(#_) .post__media { order: -1; margin: 0 0 20px; border-radius: 0; }
.post:not(#_) :is(.post__t, .post__meta, .post__x, .post__chips, .arrow-link) { margin-left: var(--card-pad); margin-right: var(--card-pad); }
.post__t:not(#_) { order: 0; margin-bottom: 8px; padding: 0; border: 0; font-size: 21px; font-weight: 600; letter-spacing: -.015em; text-transform: none; line-height: 1.19; }
.post__t:not(#_) a { display: block; color: var(--ink); }
.post__t:not(#_) a:hover { color: var(--primary); }
.post__t:not(#_) a > span:last-child { text-align: left; }
.post__plus:not(#_) { display: none; }
.post:not(#_) :is(.post__meta, .post__x, .post__chips, .arrow-link) { order: 1; }
.post:not(#_) .arrow-link { color: var(--primary); }
.post__media--mesh:not(#_) { display: block; aspect-ratio: 3 / 2; padding: 9% 9% 0; border-radius: 0; background: var(--parchment); }
.post__media--mesh .win { box-shadow: var(--product-shadow); transition: none; }
.post:hover .post__media--mesh .win { transform: none; }
.art__cover--mesh:not(#_) { margin: 0 0 clamp(36px, 4.5vw, 56px); padding: clamp(28px, 5vw, 64px) clamp(20px, 8vw, 128px) clamp(24px, 4vw, 48px); border-radius: var(--r-lg); background: var(--parchment); }
.art__cover--mesh .comp { max-width: 760px; margin: 0 auto; }
.art__cover--mesh .comp__note { position: static; background: none; padding: 0; }
.art__body:not(#_) h2 { font-weight: 600; letter-spacing: -.012em; }
.art__body:not(#_) li::marker { color: var(--primary); }

/* ── stats, the marquee, the quote stage ───────────────────────────────── */
.stat__n:not(#_) { font-weight: 600; font-size: var(--fs-stat); letter-spacing: -.02em; line-height: 1; color: var(--ink); }
.stat__n:not(#_) sup { color: var(--ink-3); font-weight: 400; }
.stat__l:not(#_) { color: var(--ink-3); font-size: 14px; letter-spacing: -.013em; }
.trust__stats:not(#_) .stat__n { font-weight: 600; letter-spacing: -.02em; }
.marquee .client-mark:not(#_) { color: var(--ink-3); font-weight: 600; opacity: 1; transition: color .2s var(--ease); }
.marquee .client-mark:not(#_):hover { color: var(--ink); }
.cs__head:not(#_) { border-bottom: 0; padding-bottom: 0; display: flex; flex-direction: column; align-items: center; text-align: center; }
.cs__head:not(#_)::after { content: none; }
.cs__head:not(#_) .cs__lede { max-width: 48ch; margin: 12px auto 0; }
.cs__title:not(#_) { font-size: var(--fs-display); font-weight: 600; letter-spacing: -.012em; }
.cs__main:not(#_) { padding: clamp(28px, 3.6vw, 48px); }
.cs__q:not(#_) p { font-size: var(--fs-quote); font-weight: 400; letter-spacing: -.015em; line-height: 1.25; }
.cs__face:not(#_) { border-radius: 50%; background: var(--parchment); color: var(--primary); font-weight: 600; }
.cs__tab[aria-pressed="true"]:not(#_) { color: var(--primary); }
.cs__ctl:not(#_) { gap: 10px; }
.cs__btn:not(#_) { width: 44px; height: 44px; border: 0; border-radius: 50%; background: rgba(210, 210, 215, .64); color: var(--ink); box-shadow: none; transition: transform .18s var(--ease), background .2s var(--ease); }
.cs__btn:not(#_) + .cs__btn { border-left: 0; }
.cs__btn:not(#_):hover { background: #e8e8ed; color: var(--ink); }
.cs__btn:not(#_):active { transform: scale(.95); }
.cs__btn:not(#_) svg { width: 16px; height: 16px; }

/* ── forms, FAQ, timelines, the dark surfaces' type ────────────────────── */
.field:not(#_) label { font-size: 14px; font-weight: 400; letter-spacing: -.013em; text-transform: none; color: var(--ink-2); }
.field:not(#_) :is(input, select, textarea) { min-height: 44px; padding: 10px 14px; border: 1px solid #d2d2d7; border-radius: var(--r-md); background: var(--canvas); font: inherit; font-size: 17px; letter-spacing: -.022em; color: var(--ink); box-shadow: none; }
.field:not(#_) :is(input, select, textarea):focus { border-color: var(--primary-focus); box-shadow: 0 0 0 3px rgba(42, 92, 138, .25); outline: none; }
.faq:not(#_) { border-top: 1px solid var(--hairline); }
.faq__q:not(#_) { font-weight: 600; letter-spacing: -.012em; }
.faq__q:not(#_):hover { color: var(--primary); }
.faq__item:not(#_) .post__plus { color: var(--ink); }
.tline__step:nth-child(1) { --plate: #0b2642; }
.tline__step:nth-child(2) { --plate: #10304f; }
.tline__step:nth-child(3) { --plate: #16395e; }
.tline__step:nth-child(4) { --plate: #1e4a75; }
.tline__step:nth-child(5) { --plate: #2a5c8a; }
.tline__step:nth-child(6) { --plate: #3a6f9f; }
.tline__plate:not(#_) { border-radius: var(--r-lg); }
.tline__plate:not(#_) :is(h3, .tline__t, p, .tline__c) { color: #fff; }
.tline__disc:not(#_) { box-shadow: none; border: 1px solid var(--hairline); color: var(--primary); }
:is(.band-ink, .prin, .sq, .built, .op):not(#_) .stat__n { color: #fff; }
:is(.band-ink, .prin, .sq, .built, .op):not(#_) .stat__n sup { color: rgba(255, 255, 255, .56); }
:is(.band-ink, .prin, .sq, .built, .op):not(#_) .stat__l { color: rgba(255, 255, 255, .72); }
.srow__n:not(#_), .sdir__n:not(#_), .stage__n:not(#_) { font-weight: 600; color: var(--ink-3); }
.msvc__icon:not(#_), .sdir__icon:not(#_), .srel__icon:not(#_), .svc__icon:not(#_) { display: inline-grid; place-items: center; width: 36px; height: 36px; padding: 8px; box-sizing: border-box; border-radius: var(--r-sm); background: var(--parchment); color: var(--primary); }

/* ── the footer: the deepest navy tile ─────────────────────────────────── */
.foot:not(#_) { background: var(--tile-1); color: var(--on-dark-muted); border-top: 0; border-radius: 0; padding-top: clamp(48px, 6vw, 64px); }
.foot:not(#_)::before { content: none; }
.foot:not(#_) .foot__glow { display: none; }
.foot:not(#_) .foot__logo { color: #fff; }
.foot:not(#_) :is(.foot__blurb, .foot__addr) { color: var(--on-dark-muted); font-size: 14px; letter-spacing: -.013em; }
.foot:not(#_) .foot__addr a { color: #fff; }
.foot:not(#_) .foot__col h2 { color: #fff; font-size: 14px; font-weight: 600; letter-spacing: -.013em; }
.foot:not(#_) .foot__col li + li { margin-top: 0; }
.foot:not(#_) .foot__col a { color: var(--on-dark-muted); font-size: 14px; font-weight: 400; letter-spacing: -.013em; line-height: 2.2; }
.foot:not(#_) .foot__col a:hover, .foot:not(#_) .foot__addr a:hover { color: #fff; }
.foot:not(#_) .foot__rule { background: rgba(255, 255, 255, .12); }
.foot:not(#_) .foot__bar p { color: rgba(255, 255, 255, .5); font-size: 12px; letter-spacing: -.007em; }
.foot:not(#_) .foot__bar a { color: var(--on-dark-muted); font-size: 12px; text-decoration-color: rgba(255, 255, 255, .3); }
.foot:not(#_) .foot__bar a:hover { color: #fff; }
.foot:not(#_) a:focus-visible { outline-color: var(--primary-on-dark); }
@media (prefers-reduced-motion: reduce) { .btn:not(#_):active, .form__send:not(#_):active, .cs__btn:not(#_):active { transform: none; } }

/* ── v3 adjustments after the first build ──────────────────────────────── */
/* the story and ManaGEM heroes are navy product tiles; this outranks the light-hero rule above */
:is(.cshero--story, .chero--product):not(#_):not(#_) { background: var(--tile-1); color: #fff; }
:is(.cshero--story, .chero--product):not(#_):not(#_) :is(h1, .chero__title, .cshero__headline) { color: #fff; }
:is(.cshero--story, .chero--product):not(#_):not(#_) :is(.chero__copy, p) { color: var(--on-dark-muted); }
:is(.cshero--story, .chero--product):not(#_):not(#_) .chero__kicker { color: rgba(255, 255, 255, .6); }
:is(.cshero--story, .chero--product):not(#_):not(#_) .cshero__status { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .22); color: #fff; }
/* a navy hero meets the sub-nav's frosted parchment: the sub-nav over it is navy too */
.subnav:has(+ .cshero--story), .subnav:has(+ .chero--product), .subnav:has(+ * + .cshero--story) { background: rgba(11, 38, 66, .82); border-bottom-color: rgba(255, 255, 255, .12); }
.subnav:has(+ .cshero--story) :is(.subnav__name, .subnav__links a), .subnav:has(+ .chero--product) :is(.subnav__name, .subnav__links a), .subnav:has(+ * + .cshero--story) :is(.subnav__name, .subnav__links a) { color: #fff; }
.subnav:has(+ .cshero--story) .subnav__cta:not(#_), .subnav:has(+ .chero--product) .subnav__cta:not(#_), .subnav:has(+ * + .cshero--story) .subnav__cta:not(#_) { background: #fff; border-color: #fff; color: var(--primary); }
/* contact page: the block labels are captions, not headlines */
.ctc__block:not(#_) h2 { font-size: 14px; font-weight: 600; letter-spacing: -.013em; text-transform: none; color: var(--ink-3); }
.ctc__block:not(#_) { border-top-color: var(--hairline); }
.ctc__block:not(#_) a { color: var(--primary); }
:is(.svcs__head, .what__head, .sidx__head, .exp__head):not(#_) { display: flex; flex-direction: column; align-items: center; gap: 0; max-width: 760px; margin: 0 auto clamp(36px, 4.4vw, 56px); padding-bottom: 0; border-bottom: 0; text-align: center; }
:is(.svcs__head, .what__head, .sidx__head, .exp__head):not(#_)::after { content: none; }
:is(.svcs__head, .what__head, .sidx__head, .exp__head):not(#_) > div { display: contents; }
:is(.svcs__head, .what__head, .sidx__head, .exp__head):not(#_) .eyebrow { order: 0; margin: 0 0 12px; }
:is(.svcs__head, .what__head, .sidx__head, .exp__head):not(#_) :is(h2, .display) { order: 1; max-width: none; margin: 0; }
:is(.svcs__head, .what__head, .sidx__head, .exp__head):not(#_) .lede { order: 2; max-width: 64ch; margin: 14px auto 0; }
:is(.svcs__head, .what__head, .sidx__head, .exp__head):not(#_) .arrow-link { order: 3; margin-top: 16px; }
.selw__statement:not(#_) { font-size: clamp(28px, 3.6vw, 48px); font-weight: 600; letter-spacing: -.015em; line-height: 1.1; max-width: 22ch; }
.subnav__name:not(#_) a { color: inherit; text-decoration: none; }
.subnav:has(+ .cshero--story) .subnav__name:not(#_) a, .subnav:has(+ .chero--product) .subnav__name:not(#_) a, .subnav:has(+ * + .cshero--story) .subnav__name:not(#_) a { color: #fff; }
.subnav__cta:not(#_) { white-space: nowrap; flex: 0 0 auto; }
.subnav__links { flex: 0 0 auto; }
.subnav__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
/* anything else inside a section head (a capability list, a note) follows the title */
:is(.sec__head, .svcs__head, .what__head, .sidx__head, .exp__head):not(#_) > :not(.eyebrow):not(h2):not(.display):not(.lede):not(.arrow-link):not(div) { order: 4; margin-top: 20px; }
.sec__head:not(#_) .caps { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 28px; width: auto; }
.sec__head:not(#_) .caps li { border-top: 0; padding: 4px 0 4px 18px; font-size: 14px; letter-spacing: -.013em; color: var(--ink-2); }
.sec__head:not(#_) .caps li::before { width: 6px; height: 6px; top: calc(50% - 3px); }
.svh__crumbs:not(#_), .svh__crumbs:not(#_) ol, .svh__crumbs:not(#_) li { font-size: 14px; font-weight: 400; letter-spacing: -.013em; text-transform: none; color: var(--ink-3); }
.nav:not(#_) .nav__logo { height: 24px; }
@media (max-width: 620px) {
  .lede:not(#_), .chero__copy:not(#_), .hero__copy:not(#_) { font-size: 17px; line-height: 1.44; letter-spacing: -.022em; }
  .cshero__headline:not(#_) { font-size: 21px; }
  :is(.hero, .chero):not(#_) .chero__kicker, .hero__eyebrow { font-size: 13px; }
}
@media (max-width: 760px) {
  .comp--2.comp--phone { padding-bottom: 12%; }
  .comp--2 .phn--1 { bottom: 0; }
  .comp--2.comp--phone .comp__note, .comp--1.comp--phone .comp__note { margin-left: 0; margin-right: auto; padding-right: 30%; text-align: left; }
}
.subnav__links:not(#_) a.btn { opacity: 1; }
/* the resting principle rows stay readable at 4.5:1 on the navy tile */
.prin.is-live:not(#_) .prin__row { opacity: .72; }
.prin:not(#_) .prin__n { color: rgba(255, 255, 255, .72); }
.prin:not(#_) .prin__seen-label, .prin:not(#_) .prin__seen { color: rgba(255, 255, 255, .72); }

/* ══════════════════════════════════════════════════════════════════════
   HOME v4 — the owner's reference (2026-10-28), home page only
   Midnight navy and white. Stepped blocks that overlap the field, huge
   light uppercase section words with a numbered badge, giant numerals,
   "+" lists on hairlines, pictograms as vertical hatch lines, a carousel
   with a counter, statements with a hanging first line. Montserrat (OFL,
   self-hosted). Every rule is scoped to .hx; the bar and the footer are
   untouched.
   ══════════════════════════════════════════════════════════════════════ */
@font-face {
  font-family: 'Montserrat';
  src: url('../fonts/montserrat-latin.woff2') format('woff2-variations'), url('../fonts/montserrat-latin.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
}
.hx { --hxn: #0a1230; --hxn-2: #0d1636; --hxw: #ffffff; --hxm: rgba(255, 255, 255, .62); --hxl: rgba(255, 255, 255, .16); --hxil: rgba(10, 18, 48, .14); --hxim: rgba(10, 18, 48, .64);
  position: relative; padding: 0; font-family: 'Montserrat', 'Inter Var', system-ui, sans-serif; font-weight: 400; font-size: 14px; line-height: 1.6; letter-spacing: 0; color: var(--hxn); background: var(--hxw); }
.hx p { margin: 0; line-height: 1.6; letter-spacing: 0; }
.hx h1, .hx h2, .hx h3 { margin: 0; font-family: inherit; font-weight: 300; letter-spacing: 0; color: inherit; }
.hx a { color: inherit; text-decoration: none; }
.hx a:focus-visible, .hx button:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
.hx .shell { position: relative; }
.hx-label { margin: 0; font-size: 11px; font-weight: 500; line-height: 1.5; letter-spacing: .16em; text-transform: uppercase; }
.hx-badge { display: inline-grid; place-items: center; width: 22px; height: 22px; border: 1px solid currentColor; border-radius: 50%; font-size: 10px; font-weight: 500; line-height: 1; letter-spacing: 0; }
.hx-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 15px 26px; border: 1px solid currentColor; border-radius: 0; background: transparent; color: inherit; font-family: inherit; font-size: 11px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; line-height: 1; cursor: pointer; transition: background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease); }
.hx-btn--light { background: var(--hxw); border-color: var(--hxw); color: var(--hxn); }
.hx-btn--light:hover { background: transparent; color: var(--hxw); }
.hx-btn--ghost { border-color: currentColor; }
.hx-btn--ghost:hover { background: currentColor; }
.hx-btn--ghost:hover { color: var(--hxw); }
.hx-prin .hx-btn--ghost:hover, .hx-state .hx-btn--ghost:hover, .hx-hero .hx-btn--ghost:hover, .hx-svc .hx-btn--ghost:hover, .hx-go .hx-btn--ghost:hover { background: var(--hxw); color: var(--hxn); }
.hx-btn--ink { background: var(--hxn); border-color: var(--hxn); color: var(--hxw); }
.hx-btn--ink:hover { background: transparent; color: var(--hxn); }
.hx-circle { display: inline-grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid var(--hxl); border-radius: 50%; background: rgba(255, 255, 255, .06); color: var(--hxw); font-family: inherit; font-size: 20px; font-weight: 300; line-height: 1; cursor: pointer; transition: background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease); }
.hx-circle svg { width: 12px; height: 12px; }
.hx-circle:hover { background: var(--hxw); color: var(--hxn); border-color: var(--hxw); }
.hx-circle:disabled { opacity: .3; cursor: default; }
.hx-circle:disabled:hover { background: rgba(255, 255, 255, .06); color: var(--hxw); border-color: var(--hxl); }
/* the pictograms: a silhouette filled with vertical hatch lines */
.hx-picto { display: block; width: 120px; height: 120px; fill: url(#hxHatchN); }
.hx-picto--w { fill: url(#hxHatchW); }
.hx-picto--n { fill: url(#hxHatchN); }
.hx-picto--lg { width: 160px; height: 160px; }
/* the section opener */
.hx-open__row { display: grid; grid-template-columns: minmax(0, auto) minmax(0, 1fr); gap: 20px clamp(24px, 4vw, 64px); align-items: end; }
.hx-open__block { position: relative; display: inline-flex; align-items: flex-start; gap: clamp(14px, 2vw, 28px); padding: clamp(22px, 3vw, 40px) clamp(28px, 4vw, 64px) clamp(22px, 3vw, 40px) 0; background: var(--hxw); color: var(--hxn); }
.hx-open__block--ink { background: var(--hxn); color: var(--hxw); padding-left: clamp(24px, 3vw, 44px); }
.hx-open__block--flush { padding-left: 0; }
.hx-open__word { font-size: clamp(40px, 7vw, 96px); font-weight: 300; line-height: 1; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; }
.hx-open__block .hx-badge { margin-top: .4em; }
.hx-open__aside { max-width: 30ch; padding-bottom: clamp(30px, 4vw, 52px); text-align: right; justify-self: end; opacity: .72; }
.hx-open__copy { max-width: 60ch; margin-top: clamp(20px, 2.6vw, 36px); font-size: 15px; line-height: 1.7; }
/* the "+" list on hairlines */
.hx-plus { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--hxl); }
.hx-plus li { border-bottom: 1px solid var(--hxl); }
.hx-plus li > a, .hx-plus li > .hx-plus__mark { display: grid; }
.hx-plus li > a { grid-template-columns: 28px minmax(0, 1fr); gap: 4px 14px; align-items: center; padding: 18px 0; color: inherit; transition: color .25s var(--ease); }
.hx-plus__mark { display: inline-grid; place-items: center; width: 22px; height: 22px; border: 1px solid currentColor; border-radius: 50%; font-size: 14px; font-weight: 300; line-height: 1; opacity: .7; transition: background .25s var(--ease), color .25s var(--ease), opacity .25s var(--ease); }
.hx-plus__t { font-size: 12px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; }
.hx-plus__meta { grid-column: 2; opacity: .6; }
.hx-plus__sub { grid-column: 2; font-size: 13px; line-height: 1.6; opacity: .72; letter-spacing: 0; text-transform: none; }
.hx-plus li > a:hover .hx-plus__mark, .hx-plus li > a.is-on .hx-plus__mark, .hx-plus li > a:focus-visible .hx-plus__mark { background: currentColor; opacity: 1; }
.hx-plus li > a:hover .hx-plus__mark, .hx-plus li > a.is-on .hx-plus__mark { color: var(--hxw); }
.hx-plus--ink { border-top-color: var(--hxil); }
.hx-plus--ink li { border-bottom-color: var(--hxil); }
.hx-plus--ink li > a:hover .hx-plus__mark, .hx-plus--ink li > a.is-on .hx-plus__mark { background: var(--hxn); color: var(--hxw); }
.hx-plus--2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 clamp(24px, 4vw, 56px); border-top: 0; }
.hx-plus--2 li { border-top: 1px solid var(--hxl); border-bottom: 0; }
.hx-plus--steps li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 6px 14px; align-items: center; padding: 18px 0; }
.hx-plus--steps .hx-plus__mark { background: var(--hxw); color: var(--hxn); opacity: 1; }
/* reveals slide in from the left, as the reference's blocks do */
.hx [data-reveal] { transform: translateX(-18px); }
.hx [data-reveal].is-in { transform: none; }
.hx .hx-open__aside[data-reveal] { transform: translateX(18px); }
.hx .hx-open__aside[data-reveal].is-in { transform: none; }

/* ── 01 · the opener ───────────────────────────────────────────────────── */
.hx-hero { min-height: calc(100vh - 48px); min-height: calc(100svh - 48px); background: var(--hxn); color: var(--hxw); overflow: hidden; isolation: isolate; }
.hx-hero__field { position: absolute; inset: 0; z-index: 0; }
.hx-hero__hatch { position: absolute; inset: 0; background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .055) 0 1px, transparent 1px 7px); -webkit-mask-image: radial-gradient(70% 90% at 72% 56%, #000 20%, transparent 100%); mask-image: radial-gradient(70% 90% at 72% 56%, #000 20%, transparent 100%); }
.hx-cluster { position: absolute; right: clamp(0px, 6vw, 120px); top: 50%; width: clamp(360px, 46vw, 760px); height: auto; transform: translateY(-46%); }
.hx-cluster__l { animation: hx-drift 14s ease-in-out infinite alternate; transform-box: fill-box; transform-origin: center; }
.hx-cluster__l--2 { animation-duration: 18s; animation-delay: -6s; }
.hx-cluster__l--3 { animation-duration: 22s; animation-delay: -11s; }
@keyframes hx-drift { from { transform: translate(0, 0); } to { transform: translate(-10px, 8px); } }
.hx-streak { position: absolute; left: -20%; width: 42%; height: 1px; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .55), transparent); transform: rotate(-32deg); transform-origin: left center; animation: hx-streak 16s linear infinite; opacity: .8; }
.hx-streak--1 { top: 78%; }
.hx-streak--2 { top: 96%; animation-duration: 23s; animation-delay: -9s; width: 30%; }
.hx-streak--3 { top: 70%; animation-duration: 20s; animation-delay: -4s; }
@keyframes hx-streak { from { transform: translateX(-10%) rotate(-32deg); } to { transform: translateX(260%) rotate(-32deg); } }
.hx-hero__strip { position: relative; z-index: 2; height: 52px; background: var(--hxw); color: var(--hxn); }
.hx-hero__strip-in { display: flex; align-items: center; justify-content: flex-end; height: 100%; }
.hx-hero__strip-label { opacity: .7; }
.hx-hero__block { position: relative; z-index: 2; width: min(52%, 720px); padding: clamp(28px, 4vw, 56px) clamp(28px, 5vw, 80px) clamp(28px, 3.4vw, 48px) var(--gutter); background: var(--hxw); color: var(--hxn); }
.hx-hero__block::after { content: ''; position: absolute; left: 100%; top: 0; width: clamp(40px, 6vw, 96px); height: clamp(40px, 5vw, 72px); background: var(--hxw); }
.hx-hero__word { position: relative; margin: 0; font-size: clamp(56px, 8.6vw, 128px); font-weight: 300; line-height: 1; letter-spacing: .16em; text-transform: uppercase; }
.hx-hero__dot { position: absolute; right: -.18em; bottom: .08em; width: .13em; height: .13em; border-radius: 50%; background: currentColor; }
.hx-hero__sub { margin-top: 18px; opacity: .6; }
.hx-hero__tag { position: absolute; z-index: 2; right: var(--gutter); top: calc(52px + clamp(28px, 4vw, 56px)); max-width: 40%; text-align: right; }
.hx-hero__h1 { font-weight: 500; color: var(--hxw); }
.hx-hero__foot { position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; padding: clamp(28px, 4vw, 56px) 0; }
.hx-hero__foot-in { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 20px clamp(24px, 4vw, 64px); align-items: end; }
.hx-hero__copy { grid-column: 1; max-width: 44ch; font-size: 13px; line-height: 1.7; color: var(--hxm); }
.hx-hero__ctas { grid-column: 1; display: flex; flex-wrap: wrap; gap: 12px 16px; }
.hx-scroll { grid-column: 2; grid-row: 1 / 3; align-self: end; display: block; width: 1px; height: 72px; background: var(--hxl); overflow: hidden; }
.hx-scroll span { display: block; width: 100%; height: 40%; background: var(--hxw); animation: hx-scroll 2.4s ease-in-out infinite; }
@keyframes hx-scroll { from { transform: translateY(-100%); } to { transform: translateY(260%); } }

/* ── 02 · the statement ────────────────────────────────────────────────── */
.hx-state { padding: clamp(64px, 9vw, 128px) 0; background: var(--hxn); color: var(--hxw); }
.hx-state__head { display: flex; align-items: center; gap: 20px; margin-bottom: clamp(28px, 4vw, 56px); }
.hx-state__head .hx-label { opacity: .7; }
.hx-statement { font-size: clamp(22px, 3.1vw, 42px); font-weight: 400; line-height: 1.22; letter-spacing: .01em; text-transform: uppercase; text-indent: 38%; }
.hx-state__row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: clamp(28px, 5vw, 96px); align-items: center; margin-top: clamp(40px, 6vw, 88px); }
.hx-state__obj { margin: 0; display: flex; justify-content: center; }
.hx-state__copy { display: flex; flex-direction: column; gap: 16px; max-width: 54ch; font-size: 14px; line-height: 1.75; color: var(--hxm); }
.hx-state__copy .hx-btn { align-self: flex-start; margin-top: 10px; color: var(--hxw); }

/* ── 03 · the numbers ──────────────────────────────────────────────────── */
.hx-num { padding: clamp(40px, 6vw, 80px) 0 clamp(40px, 5vw, 64px); }
.hx-num__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; }
.hx-num__cell { display: flex; flex-direction: column; justify-content: space-between; min-height: clamp(180px, 22vw, 300px); padding: 0 clamp(16px, 2.4vw, 36px); border-left: 1px solid var(--hxil); }
.hx-num__cell:first-child { padding-left: 0; border-left: 0; }
.hx-num__cell .hx-label { max-width: 20ch; opacity: .72; }
.hx-num__n { align-self: flex-end; }
.hx-num .stat__n:not(#_) { font-family: inherit; font-size: clamp(64px, 9vw, 150px); font-weight: 300; line-height: .9; letter-spacing: -.02em; color: var(--hxn); font-variant-numeric: tabular-nums; }
.hx-num .stat__n:not(#_) sup { font-size: .32em; font-weight: 300; vertical-align: top; margin-left: .04em; color: var(--hxn); opacity: .6; }
.hx-logos { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 24px clamp(24px, 4vw, 64px); align-items: center; margin-top: clamp(40px, 5vw, 64px); padding-top: 28px; border-top: 1px solid var(--hxil); }
.hx-logos .hx-label { opacity: .6; }
.hx-logos__row { display: flex; flex-wrap: wrap; align-items: center; gap: 18px clamp(24px, 3vw, 44px); margin: 0; padding: 0; list-style: none; }
.hx-logos__row img { display: block; height: 30px; width: auto; opacity: .55; filter: grayscale(1) contrast(1.1); transition: opacity .25s var(--ease); }
.hx-logos__row img:hover { opacity: .9; }

/* ── 04 · Solutions ────────────────────────────────────────────────────── */
.hx-open { background: var(--hxn); color: var(--hxw); overflow: hidden; }
.hx-open__field { position: relative; height: clamp(220px, 34vw, 440px); background: var(--hxn-2); overflow: hidden; }
.hx-dots { position: absolute; inset: 0; background: radial-gradient(rgba(255, 255, 255, .28) 1px, transparent 1.4px) 0 0 / 18px 18px; -webkit-mask-image: radial-gradient(80% 100% at 60% 50%, #000 30%, transparent 100%); mask-image: radial-gradient(80% 100% at 60% 50%, #000 30%, transparent 100%); animation: hx-dots 40s linear infinite; }
@keyframes hx-dots { from { background-position: 0 0; } to { background-position: 180px 0; } }
.hx-open__in { padding-bottom: clamp(48px, 6vw, 88px); }
.hx-open--sol .hx-open__block { margin-top: calc(-1 * clamp(52px, 7vw, 108px)); }
.hx-open--sol .hx-open__block::before { content: ''; position: absolute; left: calc(-1 * var(--gutter)); top: 0; bottom: 0; width: var(--gutter); background: var(--hxw); }
.hx-open--sol .hx-open__copy { color: var(--hxm); }
.hx-svc { padding: 0 0 clamp(56px, 8vw, 112px); background: var(--hxn); color: var(--hxw); }
.hx-svc__grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(28px, 5vw, 80px); align-items: start; }
.hx-svc__card { position: relative; display: flex; flex-direction: column; min-height: clamp(360px, 36vw, 520px); padding: clamp(22px, 3vw, 36px); background: var(--hxw); color: var(--hxn); clip-path: polygon(0 0, 68% 0, 68% 12%, 100% 12%, 100% 100%, 0 100%); }
.hx-svc__name { max-width: 22ch; }
.hx-svc__pic { display: flex; align-items: center; justify-content: center; flex: 1 1 auto; padding: 24px 0; transition: opacity .16s var(--ease), transform .16s var(--ease); }
.hx-svc__pic.is-swapping { opacity: 0; transform: translateY(6px); }
.hx-svc__line { max-width: 34ch; margin-bottom: 20px; font-size: 13px; line-height: 1.6; color: var(--hxim); }
.hx-svc__card .hx-btn { align-self: flex-start; }
.hx-svc__all { margin-top: clamp(28px, 4vw, 48px); }

/* ── 05 · Case studies ─────────────────────────────────────────────────── */
.hx-cases { padding: clamp(56px, 8vw, 112px) 0 clamp(56px, 7vw, 96px); background: var(--hxw); color: var(--hxn); }
.hx-cases .hx-open__aside { color: var(--hxn); }
.hx-rail { margin-top: clamp(28px, 4vw, 48px); color: var(--hxw); }
.hx-rail__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; color: var(--hxn); }
.hx-rail__count { font-size: 12px; opacity: .7; }
.hx-rail__ctl { display: flex; gap: 10px; }
.hx-rail__ctl .hx-circle { border-color: var(--hxil); background: transparent; color: var(--hxn); }
.hx-rail__ctl .hx-circle:hover { background: var(--hxn); color: var(--hxw); border-color: var(--hxn); }
.hx-rail__ctl .hx-circle:disabled:hover { background: transparent; color: var(--hxn); border-color: var(--hxil); }
.hx-rail__track { display: grid; grid-auto-flow: column; grid-auto-columns: calc((min(100vw, var(--shell)) - 2 * var(--gutter) - 2 * 16px) / 3); gap: 16px; margin: 0; padding: 0 max(var(--gutter), calc((100vw - var(--shell)) / 2 + var(--gutter))); list-style: none; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-left: max(var(--gutter), calc((100vw - var(--shell)) / 2 + var(--gutter))); scrollbar-width: none; }
.hx-rail__track::-webkit-scrollbar { display: none; }
.hx-tile { position: relative; display: flex; flex-direction: column; min-height: clamp(340px, 30vw, 440px); padding: clamp(20px, 2.4vw, 30px); background: var(--hxn); color: var(--hxw); scroll-snap-align: start; clip-path: polygon(0 0, 74% 0, 74% 11%, 100% 11%, 100% 100%, 0 100%); }
.hx-tile__ind { max-width: 24ch; opacity: .6; }
.hx-tile__name { margin: auto 0 10px; font-size: clamp(24px, 2.2vw, 32px); font-weight: 300; line-height: 1.1; letter-spacing: .04em; text-transform: uppercase; }
.hx-tile__name a:hover { opacity: .75; }
.hx-tile__line { font-size: 13px; line-height: 1.5; }
.hx-tile__out { margin-top: 8px; font-size: 12px; line-height: 1.6; color: var(--hxm); }
.hx-tile__foot { display: flex; gap: 10px; margin-top: 22px; }
.hx-tile__foot .hx-circle svg { width: 10px; height: 10px; }
.hx-rail__all { margin-top: clamp(28px, 4vw, 48px); }

/* ── 06 · In their words (the shared stage, restyled) ──────────────────── */
.hx-words:not(#_) { padding: clamp(56px, 8vw, 112px) 0; background: var(--hxw); color: var(--hxn); }
.hx-words:not(#_) .cs__head { display: flex; align-items: center; gap: 20px; margin-bottom: clamp(28px, 4vw, 48px); padding: 0; border: 0; text-align: left; }
.hx-words:not(#_) .cs__head::after { content: none; }
.hx-words:not(#_) .cs__title { font-family: inherit; font-size: 11px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; line-height: 1.5; color: var(--hxn); opacity: .7; }
.hx-words:not(#_) .cs__lede { max-width: none; margin: 0; padding-left: 20px; border-left: 1px solid var(--hxil); font-family: inherit; font-size: 12px; line-height: 1.6; color: var(--hxim); }
.hx-words:not(#_) .cs { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 2fr); gap: clamp(24px, 5vw, 96px); padding-top: 0; }
.hx-words:not(#_) .cs__rail { gap: 0; border-top: 1px solid var(--hxil); }
.hx-words:not(#_) .cs__rail li { border-bottom: 1px solid var(--hxil); }
.hx-words:not(#_) .cs__tab { width: 100%; justify-content: space-between; padding: 16px 0; font-family: inherit; font-size: 12px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--hxn); opacity: .45; }
.hx-words:not(#_) .cs__tab[aria-pressed="true"], .hx-words:not(#_) .cs__tab:hover { opacity: 1; color: var(--hxn); }
.hx-words:not(#_) .cs__main { padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
.hx-words:not(#_) .cs__label { display: none; }
.hx-words:not(#_) .cs__q p { font-family: inherit; font-size: clamp(18px, 2.1vw, 28px); font-weight: 400; line-height: 1.3; letter-spacing: .01em; text-transform: uppercase; text-indent: 28%; color: var(--hxn); }
.hx-words:not(#_) .cs__by { grid-template-columns: auto minmax(0, 1fr); gap: 0 18px; margin-top: 28px; }
.hx-words:not(#_) .cs__face { width: 44px; height: 44px; border: 1px solid var(--hxil); border-radius: 50%; background: none; font-family: inherit; font-size: 11px; font-weight: 500; letter-spacing: .1em; color: var(--hxn); }
.hx-words:not(#_) .cs__who { font-family: inherit; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--hxim); }
.hx-words:not(#_) .cs__who strong { font-weight: 500; color: var(--hxn); }
.hx-words:not(#_) .cs__more { font-family: inherit; font-size: 11px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--hxn); }
.hx-words:not(#_) .cs__ctl { gap: 10px; }
.hx-words:not(#_) .cs__btn { width: 44px; height: 44px; border: 1px solid var(--hxil); border-radius: 50%; background: transparent; color: var(--hxn); box-shadow: none; }
.hx-words:not(#_) .cs__btn:hover { background: var(--hxn); color: var(--hxw); border-color: var(--hxn); }
.hx-words:not(#_) .cs__item { gap: 0; }

/* ── 07 · the principles ───────────────────────────────────────────────── */
.hx-prin { padding: clamp(56px, 8vw, 112px) 0; background: var(--hxw); color: var(--hxn); }
.hx-prin .hx-open__aside { color: var(--hxn); }
.hx-prin__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin: clamp(28px, 4vw, 48px) 0 0; padding: 0; list-style: none; }
.hx-blk { position: relative; display: flex; flex-direction: column; min-height: clamp(360px, 32vw, 460px); padding: clamp(22px, 3vw, 36px); background: var(--hxn); color: var(--hxw); clip-path: polygon(0 0, 62% 0, 62% 12%, 100% 12%, 100% 100%, 0 100%); }
.hx-blk__n { opacity: .6; }
.hx-blk__t { max-width: 22ch; margin-top: 8px; font-size: 16px; font-weight: 500; line-height: 1.35; letter-spacing: .06em; text-transform: uppercase; }
.hx-blk__pic { display: flex; align-items: center; justify-content: center; flex: 1 1 auto; padding: 28px 0; }
.hx-blk__copy { max-width: 46ch; font-size: 13px; line-height: 1.65; color: var(--hxm); }
.hx-blk__seen { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; margin-top: 16px; font-size: 12px; }
.hx-blk__seen .hx-label { opacity: .6; }
.hx-blk__seen a { border-bottom: 1px solid var(--hxl); transition: border-color .25s var(--ease); }
.hx-blk__seen a:hover { border-color: var(--hxw); }

/* ── 08 · our thinking ─────────────────────────────────────────────────── */
.hx-think { padding: 0 0 clamp(56px, 8vw, 112px); background: var(--hxw); color: var(--hxn); }
.hx-think__grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(28px, 5vw, 96px); align-items: start; padding-top: clamp(40px, 5vw, 64px); border-top: 1px solid var(--hxil); }
.hx-think__head { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }
.hx-think__head .hx-label { opacity: .7; }
.hx-think__t { max-width: 20ch; font-size: clamp(22px, 2.4vw, 32px); font-weight: 300; line-height: 1.2; letter-spacing: .03em; text-transform: uppercase; }
.hx-think .hx-plus li > a { padding: 20px 0; }

/* ── 09 · the enquiry ──────────────────────────────────────────────────── */
.hx-go { padding: clamp(56px, 8vw, 112px) 0; background: var(--hxn); color: var(--hxw); }
.hx-go__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: clamp(32px, 5vw, 96px); align-items: start; }
.hx-go .hx-open__block--ink { padding-top: 0; padding-right: 0; }
.hx-go__lede { max-width: 44ch; margin-top: clamp(20px, 2.6vw, 32px); font-size: 14px; line-height: 1.7; color: var(--hxm); }
.hx-go .hx-plus--steps { margin-top: clamp(24px, 3vw, 40px); }
.hx-go__contact { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px 18px; align-items: baseline; margin-top: clamp(24px, 3vw, 36px); font-size: 13px; }
.hx-go__contact .hx-label { opacity: .6; }
.hx-go__contact a { border-bottom: 1px solid var(--hxl); }
.hx-go__panel { padding: clamp(24px, 3vw, 40px); background: var(--hxw); color: var(--hxn); clip-path: polygon(0 0, 72% 0, 72% 9%, 100% 9%, 100% 100%, 0 100%); }
.hx-go__panel .form { padding: clamp(12px, 2vw, 24px) 0 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
.hx-go__panel .field:not(#_) label { font-family: inherit; font-size: 11px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--hxn); }
.hx-go__panel .field:not(#_) :is(input, select, textarea) { border: 0; border-bottom: 1px solid var(--hxil); border-radius: 0; padding: 10px 0; font-family: inherit; font-size: 14px; letter-spacing: 0; color: var(--hxn); box-shadow: none; }
.hx-go__panel .field:not(#_) :is(input, select, textarea):focus { border-color: var(--hxn); box-shadow: none; }
.hx-go__panel .consent label, .hx-go__panel .form__note { font-family: inherit; font-size: 12px; line-height: 1.6; color: var(--hxim); }
.hx-go__panel .consent a, .hx-go__panel .form__note a { color: var(--hxn); text-decoration: underline; text-underline-offset: 3px; }
.hx-go__panel .form__send:not(#_) { margin-top: 24px; min-height: 48px; padding: 15px 26px; border: 1px solid var(--hxn); border-radius: 0; background: var(--hxn); color: var(--hxw); font-family: inherit; font-size: 11px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; transform: none; }
.hx-go__panel .form__send:not(#_):hover { background: transparent; color: var(--hxn); transform: none; }

/* ── responsive ────────────────────────────────────────────────────────── */
@media (max-width: 1000px) {
  .hx-svc__grid, .hx-go__grid, .hx-think__grid, .hx-state__row { grid-template-columns: 1fr; }
  .hx-words:not(#_) .cs { grid-template-columns: 1fr; }
  .hx-rail__track { grid-auto-columns: calc((100vw - 2 * var(--gutter) - 16px) / 2); }
  .hx-hero__tag { max-width: 44%; }
}
@media (max-width: 760px) {
  .hx-open__row { grid-template-columns: 1fr; align-items: start; }
  .hx-open__aside { text-align: left; justify-self: start; padding-bottom: 0; }
  .hx-open__word { white-space: normal; }
  .hx-plus--2 { grid-template-columns: 1fr; }
  .hx-plus--2 li:first-child { border-top: 1px solid var(--hxl); }
  .hx-prin__grid { grid-template-columns: 1fr; }
  .hx-num__grid { grid-template-columns: 1fr; }
  .hx-num__cell { flex-direction: row; align-items: flex-end; justify-content: space-between; gap: 16px; min-height: 0; padding: 20px 0; border-left: 0; border-top: 1px solid var(--hxil); }
  .hx-num__cell:first-child { border-top: 0; }
  .hx-num .stat__n:not(#_) { font-size: 64px; }
  .hx-rail__track { grid-auto-columns: calc(100vw - 2 * var(--gutter) - 24px); }
  .hx-hero { min-height: 0; }
  .hx-hero__block { width: 78%; }
  .hx-hero__word { font-size: clamp(44px, 14vw, 72px); }
  .hx-hero__tag { position: static; max-width: none; margin: 28px var(--gutter) 0; text-align: left; }
  .hx-hero__foot { position: static; padding: 28px 0 36px; }
  .hx-hero__foot-in { grid-template-columns: 1fr; }
  .hx-scroll { display: none; }
  .hx-cluster { right: -20%; top: auto; bottom: -8%; width: 120%; transform: none; opacity: .5; }
  .hx-hero__hatch { -webkit-mask-image: none; mask-image: none; }
  .hx-statement { text-indent: 18%; }
  .hx-words:not(#_) .cs__q p { text-indent: 12%; }
  .hx-logos { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .hx-cluster__l, .hx-streak, .hx-dots, .hx-scroll span { animation: none; }
  .hx [data-reveal] { transform: none; }
}
/* the home block outranks the site-wide heading, link and button rules */
.hx :is(h1, h2, h3):not(#_):not(#_) { font-family: inherit; color: inherit; }
.hx .hx-hero__h1:not(#_):not(#_) { font-size: 11px; font-weight: 500; line-height: 1.6; letter-spacing: .16em; text-transform: uppercase; color: var(--hxw); }
.hx .hx-open__word:not(#_):not(#_) { font-size: clamp(40px, 7vw, 96px); font-weight: 300; line-height: 1; letter-spacing: .04em; text-transform: uppercase; }
.hx .hx-statement:not(#_):not(#_) { font-size: clamp(22px, 3.1vw, 42px); font-weight: 400; line-height: 1.22; letter-spacing: .01em; text-transform: uppercase; }
.hx .hx-tile__name:not(#_):not(#_) { font-size: clamp(24px, 2.2vw, 32px); font-weight: 300; line-height: 1.1; letter-spacing: .04em; text-transform: uppercase; }
.hx .hx-blk__t:not(#_):not(#_) { font-size: 16px; font-weight: 500; line-height: 1.35; letter-spacing: .06em; text-transform: uppercase; }
.hx .hx-think__t:not(#_):not(#_) { font-size: clamp(22px, 2.4vw, 32px); font-weight: 300; line-height: 1.2; letter-spacing: .03em; text-transform: uppercase; }
.hx-words:not(#_):not(#_) .cs__title { font-size: 11px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; line-height: 1.5; color: var(--hxn); opacity: .7; }
.hx p > a:not(#_), .hx .hx-blk__seen a:not(#_), .hx .hx-go__contact a:not(#_) { color: inherit; text-decoration: none; }
.hx .hx-blk__seen a:not(#_), .hx .hx-go__contact a:not(#_) { border-bottom: 1px solid var(--hxl); }
.hx .hx-btn:not(#_) { color: inherit; }
.hx .hx-btn--light:not(#_) { background: var(--hxw); border-color: var(--hxw); color: var(--hxn); }
.hx .hx-btn--light:not(#_):hover { background: transparent; color: var(--hxw); }
.hx .hx-btn--ink:not(#_) { background: var(--hxn); border-color: var(--hxn); color: var(--hxw); }
.hx .hx-btn--ink:not(#_):hover { background: transparent; color: var(--hxn); }
.hx .hx-btn--ghost:not(#_) { background: transparent; border-color: currentColor; color: inherit; }
.hx-hero .hx-btn--ghost:not(#_):hover, .hx-state .hx-btn--ghost:not(#_):hover, .hx-svc .hx-btn--ghost:not(#_):hover { background: var(--hxw); border-color: var(--hxw); color: var(--hxn); }
.hx .hx-circle:not(#_) { color: var(--hxw); }
.hx .hx-rail__ctl .hx-circle:not(#_) { color: var(--hxn); }
.hx .hx-rail__ctl .hx-circle:not(#_):hover { color: var(--hxw); }
.hx .hx-circle:not(#_):hover { color: var(--hxn); }
.hx .hx-rail__ctl .hx-circle:not(#_):disabled:hover { color: var(--hxn); }
/* the pictograms read as silhouettes: finer lines, larger */
.hx-picto { width: 150px; height: 150px; }
.hx-picto--lg { width: 190px; height: 190px; }
@media (max-width: 760px) { .hx-picto { width: 120px; height: 120px; } .hx-picto--lg { width: 150px; height: 150px; } .hx .hx-hero__h1:not(#_):not(#_) { color: var(--hxw); } }
.hx-words:not(#_):not(#_) .cs__tab { opacity: .62; }
@media (max-width: 760px) {
  .hx-open__block { max-width: 100%; box-sizing: border-box; padding-right: clamp(16px, 5vw, 40px); }
  .hx .hx-open__word:not(#_):not(#_) { font-size: clamp(32px, 11vw, 56px); overflow-wrap: anywhere; }
}
@media (max-width: 400px) { .hx-open__block--ink { padding-left: 16px; } }

/* ── HOME v4, second pass: the owner's notes ───────────────────────────── */
/* the page fills the screen: no shell cap on the home, gutters only */
.hx .shell:not(#_) { max-width: none; padding-inline: clamp(20px, 3.2vw, 64px); }
/* tighter tracking and gaps on labels, buttons and lists */
.hx-label { letter-spacing: .12em; }
.hx .hx-btn:not(#_) { min-height: 46px; padding: 14px 24px; gap: 8px; letter-spacing: .12em; }
.hx-plus__t { letter-spacing: .1em; }
.hx-plus li > a { padding: 15px 0; gap: 4px 12px; }
.hx-plus--steps li { padding: 15px 0; }
.hx-plus__sub { line-height: 1.55; }
.hx-hero__word { letter-spacing: .12em; }
.hx .hx-open__word:not(#_):not(#_) { letter-spacing: .03em; }
.hx .hx-hero__h1:not(#_):not(#_) { letter-spacing: .12em; line-height: 1.7; }
.hx-hero__copy { font-size: 14px; line-height: 1.65; max-width: 46ch; }
.hx-hero__ctas { gap: 12px; }
.hx-hero { min-height: 0; }
.hx-hero__foot { position: relative; padding: clamp(40px, 6vw, 96px) 0 clamp(32px, 4vw, 56px); }
.hx-hero__block { padding-top: clamp(24px, 3.4vw, 48px); padding-bottom: clamp(24px, 3vw, 40px); }
.hx-hero__sub { margin-top: 14px; }
.hx-cluster { top: 44%; }
.hx-state { padding: clamp(56px, 7vw, 96px) 0; }
.hx-state__head { margin-bottom: clamp(22px, 3vw, 40px); }
.hx-state__row { margin-top: clamp(32px, 5vw, 64px); }
.hx-state__copy { gap: 12px; line-height: 1.65; }
.hx-num { padding: clamp(32px, 5vw, 64px) 0 clamp(32px, 4vw, 48px); }
.hx-num__cell { min-height: clamp(160px, 18vw, 240px); }
.hx-open__copy { margin-top: clamp(16px, 2vw, 28px); line-height: 1.65; }
.hx-open__in { padding-bottom: clamp(36px, 5vw, 64px); }
.hx-svc { padding-bottom: clamp(48px, 6vw, 88px); }
.hx-svc__all { margin-top: clamp(22px, 3vw, 36px); }
.hx-cases { padding: clamp(48px, 7vw, 96px) 0 clamp(48px, 6vw, 80px); }
.hx-rail { margin-top: clamp(22px, 3vw, 36px); }
.hx-rail__all { margin-top: clamp(22px, 3vw, 36px); }
.hx-prin { padding: clamp(48px, 7vw, 96px) 0; }
.hx-prin__grid { margin-top: clamp(22px, 3vw, 36px); gap: 16px; }
.hx-blk { min-height: clamp(320px, 28vw, 400px); }
.hx-blk__copy { line-height: 1.6; }
.hx-think { padding-bottom: clamp(48px, 7vw, 96px); }
.hx-think__grid { padding-top: clamp(32px, 4vw, 48px); }
.hx-go { padding: clamp(48px, 7vw, 96px) 0; }
.hx-go__lede { margin-top: clamp(16px, 2vw, 24px); line-height: 1.65; }
.hx-go .hx-plus--steps { margin-top: clamp(18px, 2.4vw, 28px); }
.hx-go__contact { margin-top: clamp(18px, 2.4vw, 28px); }
/* the client marks slide right to left */
.hx-marquee { margin: 0; }
.hx-marquee .marquee__track { gap: clamp(40px, 5vw, 80px); padding-right: clamp(40px, 5vw, 80px); animation-duration: 36s; }
.hx-marquee .marquee__item img { height: 32px; opacity: .55; filter: grayscale(1) contrast(1.1); }
.hx-marquee .marquee__item:hover img { opacity: .9; }
.hx-logos { grid-template-columns: auto minmax(0, 1fr); gap: 20px clamp(20px, 3vw, 48px); margin-top: clamp(28px, 4vw, 48px); padding-top: 22px; }
@media (prefers-reduced-motion: reduce) { .hx-marquee .marquee__track { animation: none; } .hx-marquee .marquee__track[aria-hidden] { display: none; } }
/* the carousel at full width */
.hx-rail__track { padding-inline: clamp(20px, 3.2vw, 64px); scroll-padding-left: clamp(20px, 3.2vw, 64px); grid-auto-columns: calc((100% - 2 * 16px) / 3); }
/* the case tiles carry their video: the still, a hover preview, the play chip */
.hx-tile { min-height: 0; padding: 0; clip-path: polygon(0 0, 70% 0, 70% 9%, 100% 9%, 100% 100%, 0 100%); }
.hx-tile__media { position: relative; aspect-ratio: 16 / 9; margin-top: 9%; overflow: hidden; background: var(--hxn-2); }
.hx-tile__media img, .hx-tile__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.hx-tile__video { opacity: 0; transition: opacity .4s var(--ease); }
.hx-tile__media.is-playing .hx-tile__video { opacity: 1; }
.hx-tile__play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 52px; height: 52px; background: rgba(10, 18, 48, .55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); border-color: rgba(255, 255, 255, .5); }
.hx-tile__play svg { width: 12px; height: 12px; }
.hx-tile__len { position: absolute; right: 12px; bottom: 10px; padding: 3px 8px; background: rgba(10, 18, 48, .7); font-size: 10px; }
.hx-tile__body { display: flex; flex-direction: column; flex: 1 1 auto; padding: clamp(18px, 2vw, 26px); }
.hx .hx-tile__name:not(#_):not(#_) { margin: 8px 0 8px; font-size: clamp(20px, 1.7vw, 26px); }
.hx-tile__more { display: inline-flex; align-items: center; gap: 12px; margin-top: 18px; color: var(--hxw); }
.hx-tile__more .hx-plus__mark { opacity: 1; }
.hx-tile__more:hover .hx-plus__mark { background: var(--hxw); color: var(--hxn); }
/* In their words, reworked: navy, a rail of voices with a running bar, the quotation large */
.hx-words:not(#_):not(#_) { padding: clamp(48px, 7vw, 96px) 0; background: var(--hxn); color: var(--hxw); }
.hx-words .hx-open__aside { max-width: 40ch; color: var(--hxw); }
.hx-words__stage { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.6fr); gap: clamp(28px, 5vw, 96px); align-items: start; margin-top: clamp(28px, 4vw, 48px); }
.hx-words__rail { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--hxl); }
.hx-words__rail li { border-bottom: 1px solid var(--hxl); }
.hx-words__tab { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 2px 12px; width: 100%; padding: 16px 0; border: 0; background: none; color: var(--hxw); font-family: inherit; text-align: left; cursor: pointer; opacity: .5; transition: opacity .3s var(--ease); }
.hx-words__tab:hover, .hx-words__tab[aria-pressed="true"] { opacity: 1; }
.hx-words__n { grid-row: 1 / 3; padding-top: 3px; }
.hx-words__who { font-size: 14px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; }
.hx-words__co { opacity: .7; }
.hx-words__ctl { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 18px; align-items: center; margin-top: 22px; }
.hx-words__bar { display: block; height: 1px; background: var(--hxl); overflow: hidden; }
.hx-words__bar span { display: block; height: 100%; width: 100%; background: var(--hxw); transform: scaleX(0); transform-origin: left; }
.hx-words__bar span.is-running { animation: hx-bar 6s linear forwards; }
@keyframes hx-bar { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.hx-words__btns { display: flex; gap: 10px; }
.hx-words__main { position: relative; padding: clamp(24px, 3vw, 48px) 0 0 clamp(24px, 4vw, 72px); }
.hx-words__mark { position: absolute; left: 0; top: 0; width: clamp(80px, 9vw, 140px); height: auto; opacity: .35; }
.hx-words__list { position: relative; margin: 0; padding: 0; list-style: none; }
.hx-words__item { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; }
.is-staged .hx-words__item { position: absolute; left: 0; top: 0; width: 100%; opacity: 0; pointer-events: none; transition: opacity .6s var(--ease), transform .6s var(--ease); transform: translateY(10px); }
.is-staged .hx-words__item.is-current { position: relative; opacity: 1; pointer-events: auto; transform: none; }
.hx-words__q { margin: 0; }
.hx-words__q p { font-size: clamp(22px, 2.6vw, 38px); font-weight: 300; line-height: 1.25; letter-spacing: .01em; text-transform: uppercase; text-indent: 22%; color: var(--hxw); }
.hx-words__by { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0 16px; align-items: center; margin: 0; }
.hx-words__face { display: inline-grid; place-items: center; width: 46px; height: 46px; border: 1px solid var(--hxl); border-radius: 50%; font-size: 11px; font-weight: 500; letter-spacing: .1em; }
.hx-words__sig { display: flex; flex-direction: column; gap: 3px; }
.hx-words__sig strong { font-size: 13px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; }
.hx-words__sig .hx-label { opacity: .6; }
.hx-words__more { color: var(--hxw); }
.hx-words .cs__pending { font-style: italic; text-transform: none; }
@media (max-width: 1000px) { .hx-words__stage { grid-template-columns: 1fr; } .hx-words__main { padding-left: 0; padding-top: clamp(72px, 12vw, 120px); } }
@media (max-width: 760px) { .hx-words__q p { text-indent: 10%; } .hx-rail__track { grid-auto-columns: calc(100% - 24px); } .hx-tile__media { margin-top: 0; } .hx-tile { clip-path: none; } }
@media (max-width: 1000px) and (min-width: 761px) { .hx-rail__track { grid-auto-columns: calc((100% - 16px) / 2); } }
@media (prefers-reduced-motion: reduce) { .hx-words__bar span.is-running { animation: none; transform: scaleX(1); } .is-staged .hx-words__item { transition: none; } }
/* the bar spans the full width with the home page's content */
.is-home .nav:not(#_) .shell { max-width: none; padding-inline: clamp(20px, 3.2vw, 64px); }
.is-home .mega:not(#_) .shell { max-width: none; padding-inline: clamp(20px, 3.2vw, 64px); }
/* the quotation mark sits above the quotation, not behind it */
.hx-words__main { padding: clamp(84px, 9vw, 132px) 0 0 0; }
.hx-words__mark { top: 0; left: 0; }
@media (max-width: 1000px) { .hx-words__main { padding-top: clamp(84px, 12vw, 120px); } }
.hx-words__tab { opacity: .62; }
.hx-words__co { opacity: .85; }

/* ── HOME v4, third pass: the headline in the block, the partnership, spacing, motion ── */
.hx-hero__title { position: relative; display: block; margin: 0; font-size: clamp(30px, 3.9vw, 62px); font-weight: 300; line-height: 1.08; letter-spacing: .05em; text-transform: uppercase; color: var(--hxn); }
.hx .hx-hero__title:not(#_):not(#_) { font-size: clamp(30px, 3.9vw, 62px); font-weight: 300; line-height: 1.08; letter-spacing: .05em; text-transform: uppercase; color: var(--hxn); }
.hx-hero__title .hx-hero__dot { position: static; display: inline-block; width: .16em; height: .16em; margin-left: .3em; vertical-align: baseline; }
.hx-hero__block { width: min(58%, 880px); }
.hx-hero__sub { margin-top: 18px; }
.hx-hero__ms { display: inline-flex; align-items: center; gap: 12px; max-width: 46%; padding: 10px 14px 10px 12px; border: 1px solid var(--hxl); background: rgba(255, 255, 255, .04); color: var(--hxw); text-align: left; }
.hx-hero__ms-mark { flex: 0 0 auto; width: 18px; height: 18px; }
.hx-hero__ms-line { color: var(--hxw); }
/* the headline's lines rise in turn */
.hx-rise { display: inline-block; opacity: 0; transform: translateY(.5em); transition: opacity .7s var(--ease), transform .7s var(--ease); transition-delay: calc(.25s + var(--i, 0) * .14s); }
.is-in .hx-rise { opacity: 1; transform: none; }
/* Solutions: air above the paragraph, and in the panel */
.hx-open--sol .hx-open__copy { margin-top: clamp(32px, 4.5vw, 64px); }
.hx-open__in { padding-bottom: clamp(48px, 6vw, 96px); }
.hx-svc__grid { gap: clamp(32px, 5vw, 96px); align-items: center; }
.hx-svc__card { padding: clamp(28px, 3.4vw, 48px); min-height: clamp(380px, 38vw, 560px); }
.hx-svc__line { margin: 8px 0 24px; }
.hx-plus--2 li > a { padding: 18px 0; }
.hx-tile__body { padding: clamp(22px, 2.6vw, 34px); }
.hx-tile__out { margin-top: 10px; }
.hx-tile__more { margin-top: 22px; }
.hx-blk { padding: clamp(26px, 3.2vw, 44px); }
/* motion: the scroll moves the fields, the blocks wipe in, the tiles lift */
[data-px] { transform: translate3d(0, var(--px, 0px), 0); will-change: transform; }
.hx-state__obj[data-px] { transform: translate3d(0, var(--px, 0px), 0); }
.hx-words__mark-wrap { position: absolute; left: 0; top: 0; display: block; }
.hx-words__mark { position: static; }
.hx .hx-open__block[data-reveal] { transform: none; clip-path: inset(0 100% 0 0); transition: clip-path .9s var(--ease), opacity .4s var(--ease); }
.hx .hx-open__block[data-reveal].is-in { clip-path: inset(0 0 0 0); }
.hx .hx-hero__block[data-reveal] { transform: none; clip-path: inset(0 100% 0 0); transition: clip-path 1s var(--ease), opacity .4s var(--ease); }
.hx .hx-hero__block[data-reveal].is-in { clip-path: inset(0 0 0 0); }
.hx .hx-statement[data-reveal] { transform: translateY(14px); filter: blur(6px); transition: opacity .8s var(--ease), transform .8s var(--ease), filter .8s var(--ease); }
.hx .hx-statement[data-reveal].is-in { transform: none; filter: none; }
.hx .hx-svc__card[data-reveal], .hx .hx-go__panel[data-reveal] { transform: translateY(24px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.hx .hx-svc__card[data-reveal].is-in, .hx .hx-go__panel[data-reveal].is-in { transform: none; }
.hx .hx-tile[data-reveal] { transform: translateY(28px); transition: opacity .7s var(--ease), transform .7s var(--ease); transition-delay: var(--d, 0ms); }
.hx .hx-tile[data-reveal].is-in { transform: none; }
.hx .hx-blk[data-reveal] { transform: translateY(28px) scale(.985); transition: opacity .7s var(--ease), transform .7s var(--ease); transition-delay: var(--d, 0ms); }
.hx .hx-blk[data-reveal].is-in { transform: none; }
.hx .hx-num__cell[data-reveal] { transform: translateY(18px); transition-delay: var(--d, 0ms); }
.hx-tile { transition: transform .45s var(--ease); }
.hx-tile:hover { transform: translateY(-6px); }
.hx-tile__media img { transition: transform .8s var(--ease); }
.hx-tile:hover .hx-tile__media img { transform: scale(1.04); }
.hx-blk { transition: transform .45s var(--ease); }
.hx-blk:hover { transform: translateY(-4px); }
.hx-blk:hover .hx-picto, .hx-svc__card:hover .hx-picto { animation: hx-shimmer 1.6s ease-in-out infinite; }
@keyframes hx-shimmer { 0%, 100% { opacity: 1; transform: translateY(0); } 50% { opacity: .55; transform: translateY(-4px); } }
.hx-state__obj .hx-picto { animation: hx-float 7s ease-in-out infinite; }
@keyframes hx-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
.hx-plus li > a { transition: color .25s var(--ease), padding-left .3s var(--ease); }
.hx-plus li > a:hover { padding-left: 6px; }
.hx-logos__row img, .hx-marquee .marquee__item img { transition: opacity .3s var(--ease), transform .3s var(--ease); }
.hx-marquee .marquee__item img:hover { transform: translateY(-2px); }
@media (max-width: 760px) {
  .hx-hero__block { width: 100%; }
  .hx .hx-hero__title:not(#_):not(#_) { font-size: clamp(28px, 8.4vw, 36px); }
  .hx-hero__ms { max-width: none; margin: 24px var(--gutter) 0; }
  .hx-tile:hover, .hx-blk:hover { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  [data-px] { transform: none !important; }
  .hx .hx-open__block[data-reveal], .hx .hx-hero__block[data-reveal] { clip-path: none; }
  .hx .hx-statement[data-reveal] { filter: none; transform: none; }
  .hx-rise { opacity: 1; transform: none; transition: none; }
  .hx-state__obj .hx-picto, .hx-blk:hover .hx-picto, .hx-svc__card:hover .hx-picto { animation: none; }
  .hx-tile, .hx-blk { transition: none; }
}
/* the headline's two lines stay two lines */
.hx-hero__block { width: min(68%, 1040px); }
.hx .hx-hero__title:not(#_):not(#_) { font-size: clamp(26px, 3.25vw, 50px); letter-spacing: .04em; }
@media (min-width: 761px) { .hx-rise { white-space: nowrap; } }
@media (max-width: 760px) { .hx-hero__block { width: 100%; } .hx .hx-hero__title:not(#_):not(#_) { font-size: clamp(26px, 7.6vw, 34px); } }
.hx-hero__block { width: min(64%, 1000px); }
.hx-hero__ms { max-width: min(30%, 440px); top: calc(52px + clamp(40px, 5vw, 72px) + 18px); flex-wrap: wrap; row-gap: 6px; }
@media (max-width: 760px) { .hx-hero__ms { max-width: none; position: static; } }
.hx-hero__ms { flex-wrap: nowrap; align-items: flex-start; }
.hx-hero__ms-mark { margin-top: 1px; }

/* ══════════════════════════════════════════════════════════════════════
   SITE v4 — the reference language on every page (2026-10-28)
   The home's grammar carried across the site: Montserrat, midnight navy
   and white tiles, uppercase light headings, "+" lists on hairlines,
   stepped blocks, hatch pictograms, square uppercase buttons. Every page
   opens on hero_block() (.hx-phero). The bar and the flyouts are untouched.
   Doubled :not(#_):not(#_) outranks the v3 layer beneath.
   ══════════════════════════════════════════════════════════════════════ */
:root { --svn: #0a1230; --svn-2: #0d1636; --svw: #ffffff; --svl: rgba(255, 255, 255, .16); --svil: rgba(10, 18, 48, .14); --svm: rgba(255, 255, 255, .66); --svim: rgba(10, 18, 48, .66); }
html, body { background: var(--svw); }
body:not(#_) { font-family: 'Montserrat', 'Inter Var', system-ui, sans-serif; font-weight: 400; font-size: 14px; line-height: 1.6; letter-spacing: 0; color: var(--svn); font-feature-settings: normal; }
.shell:not(#_) { max-width: none; padding-inline: clamp(20px, 3.2vw, 64px); }
.nav:not(#_) .shell, .mega:not(#_) .shell { max-width: none; padding-inline: clamp(20px, 3.2vw, 64px); }
main p:not(#_) { line-height: 1.65; letter-spacing: 0; }
main :is(h1, h2, h3, h4, .display):not(#_):not(#_) { font-family: inherit; font-weight: 300; letter-spacing: .03em; text-transform: uppercase; color: inherit; }
main :is(h2, .display):not(#_):not(#_) { font-size: clamp(24px, 2.8vw, 42px); line-height: 1.12; }
main h3:not(#_):not(#_) { font-size: 14px; font-weight: 500; letter-spacing: .08em; line-height: 1.45; }
main h4:not(#_):not(#_) { font-size: 12px; font-weight: 500; letter-spacing: .1em; }
:is(.eyebrow, .chero__kicker, .cs__label, .cscard__tag, .post__tag, .svh__label, .srow__n, .sdir__n, .stage__n, .faq__n, .sd__n, .frm__n, .lp__n, .prin__label, .tline__t, .stl__ticks li, .cscard__meta dt, .post__meta, .art__meta, .wkf__label, .sev__ctx, .sev__note, .svh__crumbs, .legal__toc p, .go__n, .foot__col h2):not(#_):not(#_) { font-family: inherit; font-size: 11px; font-weight: 500; line-height: 1.5; letter-spacing: .12em; text-transform: uppercase; color: inherit; opacity: .72; }
.lede:not(#_):not(#_), .chero__copy:not(#_):not(#_) { font-family: inherit; font-size: 14px; font-weight: 400; line-height: 1.7; letter-spacing: 0; color: inherit; opacity: .78; }
main p > a:not([class]):not(#_) { color: inherit; text-decoration: underline; text-decoration-color: currentColor; text-underline-offset: 3px; }
/* tiles: white and midnight, the colour change the divider */
main > section:not(.hx):not(#_) { padding-top: clamp(48px, 7vw, 96px); padding-bottom: clamp(48px, 7vw, 96px); }
main > section:not(.hx):not(.band-wash):not(.band-tint):not(.band-ink):not(.sq):not(.convert):not(.endnote):not(.prin):not(.go):not(.words):not(.built):not(#_) { background: var(--svw); color: var(--svn); }
main > :is(.band-wash, .band-tint, .band-ink, .sq, .convert, .endnote, .prin, .go, .words, .built):not(.hx):not(#_):not(#_) { background: var(--svn); color: var(--svw); }
main > :is(.band-wash, .band-tint, .band-ink, .sq, .convert, .endnote, .prin, .go, .words, .built):not(.hx):not(#_):not(#_) :is(h1, h2, h3, h4, .display, p, li, dd, dt, .lede, .stat__n, .stat__l) { color: var(--svw); }
main > :is(.band-wash, .band-tint, .band-ink, .sq, .convert, .endnote, .prin, .go, .words, .built):not(.hx):not(#_):not(#_) :is(a:not(.btn), .arrow-link) { color: var(--svw); }
.plusgrid:not(#_)::after, .dotgrid:not(#_), .sec__head:not(#_)::after { display: none; content: none; }
/* section heads: the label and the uppercase light title left, the lede right, a hairline beneath */
:is(.sec__head, .svcs__head, .what__head, .sidx__head, .exp__head, .sp__head, .cs__head):not(#_):not(#_) { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 16px clamp(24px, 5vw, 96px); align-items: end; max-width: none; margin: 0 0 clamp(28px, 4vw, 48px); padding: 0 0 clamp(18px, 2.4vw, 28px); border-bottom: 1px solid currentColor; text-align: left; }
:is(.sec__head, .svcs__head, .what__head, .sidx__head, .exp__head, .sp__head, .cs__head):not(#_):not(#_) { border-bottom-color: var(--svil); }
main > :is(.band-wash, .band-tint, .band-ink, .sq):not(#_) :is(.sec__head, .svcs__head, .what__head, .sidx__head, .exp__head, .sp__head, .cs__head) { border-bottom-color: var(--svl); }
:is(.sec__head, .svcs__head, .what__head, .sidx__head, .exp__head, .sp__head, .cs__head):not(#_):not(#_) > div { display: block; }
:is(.sec__head, .svcs__head, .what__head, .sidx__head, .exp__head, .sp__head, .cs__head):not(#_):not(#_) .eyebrow { margin: 0 0 12px; }
:is(.sec__head, .svcs__head, .what__head, .sidx__head, .exp__head, .sp__head, .cs__head):not(#_):not(#_) :is(h2, .display, .cs__title) { margin: 0; max-width: 22ch; }
:is(.sec__head, .svcs__head, .what__head, .sidx__head, .exp__head, .sp__head, .cs__head):not(#_):not(#_) :is(.lede, .cs__lede) { max-width: 52ch; margin: 0; }
:is(.sec__head, .svcs__head, .what__head, .sidx__head, .exp__head, .sp__head, .cs__head):not(#_):not(#_) > :not(div):not(h2):not(.display):not(.lede):not(.cs__lede):not(.cs__title):not(.eyebrow) { grid-column: 1 / -1; }
.sp__in:not(#_) { display: block; }
.sp__head:not(#_):not(#_) { margin-bottom: clamp(24px, 3vw, 40px); }
/* buttons and links: square, uppercase, tracked */
.btn:not(#_):not(#_), .form__send:not(#_):not(#_) { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 14px 24px; border: 1px solid currentColor; border-radius: 0; background: var(--svn); color: var(--svw); font-family: inherit; font-size: 11px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; line-height: 1; box-shadow: none; transform: none; transition: background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease); }
.btn:not(#_):not(#_) { border-color: var(--svn); }
.btn:not(#_):not(#_):hover, .form__send:not(#_):not(#_):hover { background: transparent; color: var(--svn); transform: none; }
.btn:not(#_):not(#_):active { transform: none; }
:is(.btn--ghost, .btn--light):not(#_):not(#_) { background: transparent; color: var(--svn); border-color: var(--svn); }
:is(.btn--ghost, .btn--light):not(#_):not(#_):hover { background: var(--svn); color: var(--svw); }
main > :is(.band-wash, .band-tint, .band-ink, .sq, .convert, .endnote, .prin, .go, .words):not(#_) .btn:not(#_) { background: var(--svw); color: var(--svn); border-color: var(--svw); }
main > :is(.band-wash, .band-tint, .band-ink, .sq, .convert, .endnote, .prin, .go, .words):not(#_) .btn:not(#_):hover { background: transparent; color: var(--svw); }
main > :is(.band-wash, .band-tint, .band-ink, .sq, .convert, .endnote, .prin, .go, .words):not(#_) :is(.btn--ghost, .btn--light):not(#_) { background: transparent; color: var(--svw); border-color: rgba(255, 255, 255, .7); }
main > :is(.band-wash, .band-tint, .band-ink, .sq, .convert, .endnote, .prin, .go, .words):not(#_) :is(.btn--ghost, .btn--light):not(#_):hover { background: var(--svw); color: var(--svn); }
.btn--sm:not(#_):not(#_) { min-height: 38px; padding: 10px 16px; font-size: 10px; }
.btn:not(#_) svg, .arrow-link:not(#_) svg { width: 10px; height: 10px; }
.arrow-link:not(#_):not(#_) { gap: 8px; padding-bottom: 0; border-bottom: 0; font-family: inherit; font-size: 11px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: inherit; opacity: 1; text-decoration: none; }
.arrow-link:not(#_):not(#_):hover { opacity: .7; text-decoration: none; }
/* the page opener (hero_block) */
.hx-hero__kicker { margin: 0 0 14px; opacity: .7; }
.hx-phero__foot { position: relative; padding: clamp(32px, 5vw, 72px) 0 clamp(32px, 4vw, 56px); }
.hx-phero__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 96px); align-items: end; }
.hx-phero__lead { display: flex; flex-direction: column; gap: 22px; }
.hx-phero__visual { position: relative; justify-self: end; width: 100%; max-width: 720px; }
.hx-phero__picto { display: flex; justify-content: flex-end; padding-right: clamp(20px, 6vw, 120px); }
.hx-picto--xl { width: clamp(180px, 22vw, 320px); height: clamp(180px, 22vw, 320px); opacity: .9; }
.hx-phero .hx-hero__ms { background: rgba(255, 255, 255, .04); }
.hx-hero__status .cshero__dot { width: 8px; height: 8px; border-radius: 50%; background: #34c759; }
.hx-phero--draw .hx-phero__grid { align-items: start; }
.hx-phero .svh__visual:not(#_):not(#_) { position: relative; width: 100%; max-width: 720px; margin: 0; padding: 48px 28px 28px; border: 0; border-radius: 0; background: var(--svw); box-shadow: none; color: var(--svn); clip-path: polygon(0 0, 70% 0, 70% 9%, 100% 9%, 100% 100%, 0 100%); }
.hx-phero .svh__visual:not(#_):not(#_)::before, .hx-phero .svh__visual:not(#_):not(#_)::after { content: none; }
.hx-phero .svh__crumbs:not(#_):not(#_) { margin: 0; color: var(--svn); opacity: .7; }
.hx-phero .svh__crumbs:not(#_):not(#_) a { color: inherit; text-decoration: none; }
.hx-jump { margin-top: 22px; }
.hx-jump .jump:not(#_):not(#_) { padding: 0; border: 0; background: none; box-shadow: none; column-count: 2; column-gap: 24px; }
.hx-jump .jump:not(#_):not(#_) a { grid-template-columns: 32px 1fr; padding: 12px 0; border-bottom: 1px solid var(--svl); color: var(--svw); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; }
.hx-jump .jump:not(#_):not(#_) span { color: var(--svw); opacity: .6; }
/* the video block (story and ManaGEM openers) */
.hx-vid { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--svn-2); border: 1px solid var(--svl); }
.hx-vid img, .hx-vid__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.hx-vid__video { opacity: 0; transition: opacity .4s var(--ease); }
.hx-vid.is-playing .hx-vid__video { opacity: 1; }
.hx-vid__play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 56px; height: 56px; background: rgba(10, 18, 48, .55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); border-color: rgba(255, 255, 255, .5); }
.hx-vid__play svg { width: 12px; height: 12px; }
.hx-vid__len { position: absolute; right: 12px; bottom: 10px; padding: 3px 8px; background: rgba(10, 18, 48, .7); font-size: 10px; }
/* the sub-nav: a navy strip with tracked labels */
.subnav:not(#_):not(#_) { height: 48px; background: rgba(10, 18, 48, .92); border-bottom: 1px solid var(--svl); color: var(--svw); }
.subnav__name:not(#_):not(#_), .subnav__name:not(#_):not(#_) a { font-size: 12px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--svw); }
.subnav__links:not(#_) a { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--svw); opacity: .72; }
.subnav__cta:not(#_):not(#_) { min-height: 30px; padding: 8px 14px; border: 1px solid var(--svw); border-radius: 0; background: var(--svw); color: var(--svn); font-size: 10px; letter-spacing: .12em; }
.subnav__cta:not(#_):not(#_):hover { background: transparent; color: var(--svw); }
/* cards: navy stepped blocks on white tiles, white blocks on navy tiles */
.band:not(.band-wash):not(.band-tint):not(.band-ink):not(#_) :is(.cscard, .post, .dec, .flow__step, .sd__item, .sol__card, .frm__step, .rec, .endo, .tog__step, .path__row, .skd__list li, .prod, .mate, .srel__item, .kind, .tline__plate):not(#_) { background: var(--svn); color: var(--svw); border: 0; border-radius: 0; box-shadow: none; }
.band:not(.band-wash):not(.band-tint):not(.band-ink):not(#_) :is(.cscard, .post, .dec, .flow__step, .sd__item, .sol__card, .frm__step, .rec, .endo, .tog__step, .path__row, .skd__list li, .prod, .mate, .srel__item, .kind):not(#_) :is(h3, h4, p, li, dd, dt, a:not(.btn), .arrow-link, .cscard__meta dd, .post__x, .post__meta) { color: var(--svw); }
main > :is(.band-wash, .band-tint, .band-ink, .sq):not(#_) :is(.cscard, .post, .dec, .flow__step, .sd__item, .sol__card, .frm__step, .rec, .endo, .tog__step, .path__row, .skd__list li, .prod, .mate, .srel__item, .kind):not(#_) { background: var(--svw); color: var(--svn); border: 0; border-radius: 0; box-shadow: none; }
main > :is(.band-wash, .band-tint, .band-ink, .sq):not(#_) :is(.cscard, .post, .dec, .flow__step, .sd__item, .sol__card, .frm__step, .rec, .endo, .tog__step, .path__row, .skd__list li, .prod, .mate, .srel__item, .kind):not(#_) :is(h3, h4, p, li, dd, dt, a:not(.btn), .arrow-link, .cscard__meta dd, .post__x, .post__meta, .stat__n) { color: var(--svn); }
:is(.cscard, .post, .dec, .sd__item, .sol__card, .frm__step, .tline__plate):not(#_):not(#_) { clip-path: polygon(0 0, 70% 0, 70% 9%, 100% 9%, 100% 100%, 0 100%); }
:is(.dec, .sd__item, .sol__card, .frm__step, .rec, .endo, .flow__step, .tog__step):not(#_):not(#_) { padding: clamp(24px, 3vw, 40px) clamp(20px, 2.6vw, 32px) clamp(22px, 2.6vw, 32px); }
.dec:not(#_):not(#_) { padding-top: clamp(32px, 4vw, 52px); }
:is(.cscard, .selw__card, .sol__card, .post, .prod):not(#_):not(#_):hover { transform: translateY(-4px); box-shadow: none; border-color: transparent; }
:is(.cscard, .post, .prod):not(#_):not(#_) { transition: transform .45s var(--ease); }
.cscard__media:not(#_):not(#_) { margin-top: 9%; border: 0; background: var(--svn-2); }
.cscard__body:not(#_):not(#_) { padding: clamp(20px, 2.4vw, 30px); }
.cscard__name:not(#_):not(#_) { font-size: clamp(20px, 1.7vw, 26px); font-weight: 300; letter-spacing: .04em; text-transform: uppercase; line-height: 1.1; }
.cscard__line:not(#_) { font-size: 13px; }
.cscard__meta:not(#_):not(#_) { border-top-color: var(--svl); }
.cscard__meta:not(#_):not(#_) dd { font-size: 12px; opacity: .8; }
.cscard__actions:not(#_) .btn { background: transparent; color: var(--svw); border-color: rgba(255, 255, 255, .7); }
.cscard__actions:not(#_) .btn:hover { background: var(--svw); color: var(--svn); }
.cscard__actions:not(#_) .btn--ghost { border-color: rgba(255, 255, 255, .4); }
:is(.chips li, .srow__chips li, .cscard__chips li, .post__chips li):not(#_):not(#_) { padding: 4px 10px; border: 1px solid currentColor; border-radius: 0; background: transparent; color: inherit; font-size: 10px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; opacity: .8; }
:is(.featured__play, .selw__play, .sev__play, .cscard__play):not(#_):not(#_) svg { background: rgba(10, 18, 48, .55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); border: 1px solid rgba(255, 255, 255, .5); border-radius: 50%; color: var(--svw); box-shadow: none; }
/* feature cards with a pictogram (products, insights) */
.post:not(#_):not(#_) { display: flex; flex-direction: column; min-height: 380px; padding: clamp(24px, 3vw, 40px); overflow: visible; }
.post:not(#_):not(#_) :is(.post__t, .post__meta, .post__x, .post__chips, .arrow-link) { margin-left: 0; margin-right: 0; }
.post:not(#_):not(#_) .post__meta { order: 0; margin: 0 0 12px; }
.post:not(#_):not(#_) .post__media { order: 1; display: flex; align-items: center; justify-content: center; flex: 1 1 auto; margin: 0; padding: 24px 0; border: 0; background: none; aspect-ratio: auto; }
.post:not(#_):not(#_) .post__t { order: 2; margin: 0 0 10px; font-size: 18px; font-weight: 300; letter-spacing: .04em; text-transform: uppercase; line-height: 1.2; }
.post:not(#_):not(#_) .post__t a { display: block; color: inherit; }
.post:not(#_):not(#_) .post__t a:hover { opacity: .75; color: inherit; }
.post:not(#_):not(#_) .post__x { order: 3; font-size: 13px; opacity: .85; }
.post:not(#_):not(#_) .post__chips { order: 4; margin-top: 14px; }
.post:not(#_):not(#_) .arrow-link { order: 5; margin-top: 18px; }
.post__media--picto .hx-picto { width: 120px; height: 120px; }
.feats:not(#_) { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
/* lists: ruled rows, "+" markers, numerals as labels */
.srow:not(#_):not(#_) { border-top-color: var(--svil); padding-block: 22px; }
main > :is(.band-wash, .band-tint, .band-ink):not(#_) .srow:not(#_) { border-top-color: var(--svl); }
.srow__name:not(#_):not(#_) { font-size: 14px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; }
.caps:not(#_):not(#_) li { padding-left: 34px; border-top-color: var(--svil); font-size: 13px; }
main > :is(.band-wash, .band-tint, .band-ink):not(#_) .caps:not(#_) li { border-top-color: var(--svl); }
.caps:not(#_):not(#_) li::before { content: '+'; top: calc(50% - 11px); width: 22px; height: 22px; border: 1px solid currentColor; border-radius: 50%; background: none; box-shadow: none; font-size: 14px; line-height: 20px; text-align: center; font-weight: 300; opacity: .7; }
.faq:not(#_):not(#_) { border-top-color: var(--svl); }
main > .band:not(.band-wash):not(.band-tint):not(#_) .faq:not(#_) { border-top-color: var(--svil); }
.faq__q:not(#_):not(#_) { font-family: inherit; font-size: 13px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; }
.faq__item:not(#_):not(#_) { border-bottom: 1px solid var(--svil); }
main > :is(.band-wash, .band-tint):not(#_) .faq__item:not(#_) { border-bottom-color: var(--svl); }
.stat__n:not(#_):not(#_) { font-family: inherit; font-weight: 300; font-size: clamp(48px, 6vw, 96px); letter-spacing: -.01em; line-height: .95; }
.stat__n:not(#_):not(#_) sup { font-size: .34em; font-weight: 300; opacity: .6; color: inherit; }
.stat__l:not(#_):not(#_) { font-size: 11px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; opacity: .7; color: inherit; }
.trust__stats:not(#_) .stat { border-top: 1px solid currentColor; padding-top: 16px; }
.tline__plate:not(#_):not(#_) { background: var(--svn); color: var(--svw); border-radius: 0; }
.tline__plate:not(#_):not(#_) :is(h3, .tline__t, p, .tline__c) { color: var(--svw); }
.tline__disc:not(#_):not(#_) { border: 1px solid currentColor; box-shadow: none; background: transparent; color: inherit; font-family: inherit; font-weight: 300; }
.tline__line:not(#_) { background: var(--svil); }
/* story chapters: the stills in navy frames, the flow steps as blocks */
.walk__fig:not(#_):not(#_) img { border: 1px solid var(--svl); border-radius: 0; }
.walk__src:not(#_) { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; opacity: .6; }
.flow__step:not(#_):not(#_)::after { background: currentColor; opacity: .3; }
/* forms */
.field:not(#_):not(#_) label { font-family: inherit; font-size: 11px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: inherit; }
.field:not(#_):not(#_) :is(input, select, textarea) { border: 0; border-bottom: 1px solid var(--svil); border-radius: 0; padding: 10px 0; background: transparent; font-family: inherit; font-size: 14px; letter-spacing: 0; color: var(--svn); box-shadow: none; }
.field:not(#_):not(#_) :is(input, select, textarea):focus { border-color: var(--svn); box-shadow: none; }
.ctc:not(#_):not(#_) .form, .go:not(#_):not(#_) .form { padding: clamp(24px, 3vw, 40px); border: 0; border-radius: 0; background: var(--svw); color: var(--svn); box-shadow: none; clip-path: polygon(0 0, 72% 0, 72% 9%, 100% 9%, 100% 100%, 0 100%); }
.ctc:not(#_):not(#_) .form { padding-top: clamp(36px, 4vw, 56px); }
.ctc__block:not(#_):not(#_) { border-top-color: var(--svil); }
.ctc__block:not(#_):not(#_) h2 { font-size: 11px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; opacity: .7; }
.ctc__title:not(#_):not(#_) { font-size: clamp(24px, 2.8vw, 42px); }
.consent:not(#_) label, .form__note:not(#_) { font-family: inherit; font-size: 12px; }
/* the closing tiles and the footer */
:is(.convert, .endnote):not(#_):not(#_) { padding-top: clamp(56px, 8vw, 112px); padding-bottom: clamp(56px, 8vw, 112px); }
.convert:not(#_):not(#_) .convert__in, .endnote:not(#_):not(#_) > .shell { max-width: none; text-align: left; }
:is(.convert, .endnote):not(#_):not(#_) :is(h2, .display) { max-width: 20ch; margin-left: 0; margin-right: 0; font-size: clamp(28px, 3.6vw, 56px); }
:is(.convert, .endnote):not(#_):not(#_) p { margin-left: 0; margin-right: 0; max-width: 54ch; }
.foot:not(#_):not(#_) { background: var(--svn); font-family: inherit; }
.foot:not(#_):not(#_) .foot__col h2 { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; }
.foot:not(#_):not(#_) .foot__col a, .foot:not(#_):not(#_) :is(.foot__blurb, .foot__addr) { font-size: 13px; }
.foot:not(#_):not(#_) .foot__bar p, .foot:not(#_):not(#_) .foot__bar a { font-size: 11px; letter-spacing: .06em; }
/* the article */
.art__body:not(#_):not(#_) { max-width: 72ch; }
.art__body:not(#_):not(#_) h2 { font-size: clamp(20px, 2vw, 28px); margin-top: clamp(28px, 3.4vw, 44px); }
.art__body:not(#_):not(#_) :is(p, li) { font-size: 15px; line-height: 1.75; }
/* the legal page */
.legal--body:not(#_) { padding-top: clamp(40px, 5vw, 64px); }
.legal__head:not(#_):not(#_) { padding-bottom: 20px; border-bottom-color: var(--svil); }
.legal__note:not(#_) { display: block; padding: 12px 16px; border: 1px solid var(--svil); font-size: 12px; font-weight: 500; }
.legal__toc:not(#_) a { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
.legal__body:not(#_) h2 { font-size: clamp(18px, 1.8vw, 24px); }
/* the Case Studies page's In their words (the shared stage) */
.words:not(.hx):not(#_):not(#_) .cs { grid-template-columns: minmax(0, .8fr) minmax(0, 1.6fr); }
.words:not(.hx):not(#_):not(#_) .cs__main { padding: 0; background: none; border: 0; box-shadow: none; }
.words:not(.hx):not(#_):not(#_) .cs__tab { font-family: inherit; font-size: 12px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--svw); opacity: .62; }
.words:not(.hx):not(#_):not(#_) .cs__tab[aria-pressed="true"], .words:not(.hx):not(#_):not(#_) .cs__tab:hover { opacity: 1; color: var(--svw); }
.words:not(.hx):not(#_):not(#_) .cs__label { display: none; }
.words:not(.hx):not(#_):not(#_) .cs__q p { font-family: inherit; font-size: clamp(20px, 2.4vw, 34px); font-weight: 300; line-height: 1.28; letter-spacing: .01em; text-transform: uppercase; text-indent: 22%; color: var(--svw); }
.words:not(.hx):not(#_):not(#_) .cs__face { border: 1px solid var(--svl); border-radius: 50%; background: none; color: var(--svw); font-family: inherit; font-size: 11px; font-weight: 500; }
.words:not(.hx):not(#_):not(#_) .cs__who { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--svm); }
.words:not(.hx):not(#_):not(#_) .cs__who strong { color: var(--svw); }
.words:not(.hx):not(#_):not(#_) .cs__more { font-size: 11px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--svw); }
.words:not(.hx):not(#_):not(#_) .cs__btn { border: 1px solid var(--svl); border-radius: 50%; background: transparent; color: var(--svw); }
.words:not(.hx):not(#_):not(#_) .cs__btn:hover { background: var(--svw); color: var(--svn); }
/* the Solutions page components */
.sdir__n:not(#_):not(#_), .sd__n:not(#_):not(#_), .frm__n:not(#_):not(#_), .stage__n:not(#_):not(#_) { font-family: inherit; font-size: 11px; font-weight: 500; letter-spacing: .12em; }
:is(.msvc__icon, .sdir__icon, .srel__icon, .svc__icon):not(#_):not(#_) { border: 1px solid currentColor; border-radius: 50%; background: transparent; color: inherit; opacity: .8; }
.dg:not(#_):not(#_) :is(rect, circle, path) { stroke: rgba(10, 18, 48, .6); }
.dg:not(#_):not(#_) .dg-a { stroke: var(--svn); }
.dg:not(#_):not(#_) .dg-solid { fill: var(--svn); }
.dg:not(#_):not(#_) circle[fill="currentColor"] { fill: var(--svn); }
.dg:not(#_):not(#_) text { fill: var(--svn); }
.dg:not(#_):not(#_) .dg-k { fill: var(--svn); }
.tog__links:not(#_) a, .sev__shows:not(#_) a, .path__start:not(#_) a { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; }
/* no JavaScript: nothing stays clipped or blurred */
html:not(.has-js) [data-reveal] { clip-path: none !important; filter: none !important; }
html:not(.has-js) .hx-rise { opacity: 1 !important; transform: none !important; }
@media (max-width: 1000px) { .hx-phero__grid { grid-template-columns: 1fr; } .hx-phero__visual { justify-self: stretch; max-width: none; } .hx-phero__picto { justify-content: center; padding: 0; } }
@media (max-width: 760px) {
  :is(.sec__head, .svcs__head, .what__head, .sidx__head, .exp__head, .sp__head, .cs__head):not(#_):not(#_) { grid-template-columns: 1fr; align-items: start; }
  .hx-jump .jump:not(#_):not(#_) { column-count: 1; }
  .post:not(#_):not(#_) { min-height: 0; }
}

/* ── SITE v4 · second pass: what the first screenshots showed ──────────── */
/* long titles wrap inside the block instead of running out of it */
.hx-phero .hx-hero__block { width: min(72%, 1120px); }
.hx-phero .hx-rise { white-space: normal; }
.hx-phero .hx-hero__title:not(#_):not(#_) { font-size: clamp(24px, 2.7vw, 42px); text-wrap: balance; }
@media (max-width: 760px) { .hx-phero .hx-hero__block { width: 100%; } .hx-phero .hx-hero__title:not(#_):not(#_) { font-size: clamp(24px, 7vw, 32px); } }
/* the status tag: one line, its own width */
.hx-phero .hx-hero__tag { max-width: 44%; }
.hx-phero .hx-hero__ms { max-width: none; white-space: nowrap; }
.hx-hero__strip-label:is(nav) ol:not(#_) { margin: 0; color: inherit; font-size: inherit; letter-spacing: inherit; }
.hx-hero__strip-label:is(nav) a:not(#_) { color: inherit; text-decoration: none; }
.hx-hero__strip-label:is(nav) li + li::before { color: inherit; opacity: .5; }
/* text inside the cards follows the card, whatever element carries it */
.band:not(.band-wash):not(.band-tint):not(.band-ink):not(#_) :is(.cscard, .post, .dec, .flow__step, .sd__item, .sol__card, .frm__step, .rec, .endo, .tog__step, .path__row, .skd__list li, .prod, .mate, .srel__item, .kind, .tline__plate):not(#_) :is(span, strong, b, em, i, small, time, summary, .flow__n, .flow__t, .flow__c, .mate__n, .mate__r, .endo__who, .endo__q, .rec__t, .rec__c) { color: inherit; }
main > :is(.band-wash, .band-tint, .band-ink, .sq):not(#_) :is(.cscard, .post, .dec, .flow__step, .sd__item, .sol__card, .frm__step, .rec, .endo, .tog__step, .path__row, .skd__list li, .prod, .mate, .srel__item, .kind):not(#_) :is(span:not(.cshero__dot), strong, b, em, i, small, time, summary, .flow__n, .flow__t, .flow__c, .endo__who, .endo__q, .rec__t, .rec__c) { color: inherit; }
.flow__step:not(#_):not(#_) :is(.flow__n, .flow__t, .flow__c) { color: inherit; }
.flow__step:not(#_):not(#_) .flow__n { font-size: 11px; font-weight: 500; letter-spacing: .12em; opacity: .7; }
.flow__step:not(#_):not(#_) .flow__t { font-size: 14px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; }
.flow__step:not(#_):not(#_) .flow__c { font-size: 13px; opacity: .85; }
/* the questions on a navy tile */
main > :is(.band-wash, .band-tint, .band-ink, .sq):not(#_) :is(.faq__q, .faq__n, .faq__text, .faq__a p, .post__plus):not(#_):not(#_) { color: var(--svw); }
main > :is(.band-wash, .band-tint, .band-ink, .sq):not(#_) .faq__q:not(#_):not(#_):hover { color: var(--svw); opacity: .8; }
main > :is(.band-wash, .band-tint, .band-ink, .sq):not(#_) .faq__a:not(#_) p { color: var(--svw); opacity: .85; }
.faq__n:not(#_):not(#_) { font-style: normal; padding-top: 2px; }
/* the content clears the notch cut into the top of every stepped block */
:is(.post, .sd__item, .sol__card, .frm__step):not(#_):not(#_) { padding-top: clamp(44px, 5vw, 64px); }
.tline__plate:not(#_):not(#_) { padding-top: 40px; }
.tline__chev:not(#_):not(#_) { top: 41px; }
.tline__plate:not(#_):not(#_) .tline__t { font-size: 13px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; opacity: 1; }
.tline__plate:not(#_):not(#_) .tline__c { font-size: 13px; }
/* the closing tiles: the title left, the copy and the actions right, inside the gutter */
.convert:not(#_):not(#_) .convert__in, .endnote:not(#_):not(#_) > .shell { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 20px clamp(24px, 5vw, 96px); align-items: end; padding-inline: clamp(20px, 3.2vw, 64px); }
.convert:not(#_):not(#_) .convert__in > .eyebrow { grid-column: 1; grid-row: 1; margin: 0; }
:is(.convert, .endnote):not(#_):not(#_) :is(h2, .display) { grid-column: 1; max-width: 18ch; margin: 0; font-size: clamp(26px, 3vw, 46px); line-height: 1.1; }
:is(.convert, .endnote):not(#_):not(#_) :is(p.lede, p:not(.eyebrow)) { grid-column: 2; margin: 0; max-width: 48ch; }
:is(.convert, .endnote):not(#_):not(#_) :is(.convert__ctas, .endnote__ctas, .arrow-link) { grid-column: 2; justify-content: flex-start; justify-self: start; margin-top: 8px; }
.convert:not(#_):not(#_) .convert__ctas { flex-wrap: wrap; gap: 14px 24px; }
@media (max-width: 760px) {
  .convert:not(#_):not(#_) .convert__in, .endnote:not(#_):not(#_) > .shell { grid-template-columns: 1fr; }
  :is(.convert, .endnote):not(#_):not(#_) :is(h2, .display, p, .convert__ctas, .endnote__ctas, .arrow-link) { grid-column: 1; }
}
/* the stats are a list without markers */
.stats:not(#_), .trust__stats:not(#_), .csstats__row:not(#_) { list-style: none; padding-left: 0; }
/* the people */
.mate:not(#_):not(#_) { grid-template-columns: 52px minmax(0, 1fr); gap: 2px 18px; padding: clamp(28px, 3vw, 40px) clamp(20px, 2.4vw, 28px) clamp(22px, 2.4vw, 28px); border: 0; clip-path: polygon(0 0, 70% 0, 70% 9%, 100% 9%, 100% 100%, 0 100%); }
.mate__face:not(#_):not(#_) { width: 52px; height: 52px; aspect-ratio: 1; border: 1px solid var(--svl); border-radius: 50%; background: transparent; color: var(--svw); font-family: inherit; font-size: 12px; font-weight: 500; letter-spacing: .06em; display: grid; place-items: center; filter: none; }
.mate__n:not(#_):not(#_) { align-self: end; font-size: 14px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; }
.mate__r:not(#_):not(#_) { font-size: 12px; opacity: .75; }
/* the statement tile (Industries) */
.stmt:not(#_):not(#_) { padding-top: clamp(64px, 9vw, 128px); padding-bottom: clamp(64px, 9vw, 128px); }
.stmt__in:not(#_) { max-width: none; }
.stmt__q:not(#_):not(#_) { max-width: 24ch; margin: 18px 0 0; font-size: clamp(26px, 3.4vw, 52px); font-weight: 300; line-height: 1.12; letter-spacing: .03em; text-transform: uppercase; text-indent: 12%; }
.stmt__sub:not(#_):not(#_) { max-width: 52ch; margin: 22px 0 0; font-size: 14px; opacity: .78; }
/* the endorsement on a white tile is a navy block too */
.endo:not(#_):not(#_) { clip-path: polygon(0 0, 70% 0, 70% 9%, 100% 9%, 100% 100%, 0 100%); padding-top: clamp(44px, 5vw, 64px); }
.endo__label:not(#_):not(#_) { font-size: 11px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; opacity: .72; }
.endo__portrait:not(#_):not(#_) { border: 1px solid currentColor; border-radius: 50%; background: transparent; color: inherit; font-family: inherit; font-size: 12px; font-weight: 500; box-shadow: none; }
/* contrast and small widths, from the audit */
.hx-phero:not(#_) { overflow: hidden; }
.hx-phero .svh__crumbs:not(#_):not(#_) { opacity: 1; }
.hx-hero__strip-label:not(#_):not(#_) { color: var(--svn); opacity: .72; }
main > :is(.band-wash, .band-tint, .band-ink, .sq, .words):not(#_) :is(summary, .walk__src, .walk__n, .walk__t, .walk__c, .cs__since, .trans__sum, details > summary):not(#_):not(#_) { color: var(--svw); }
main > :is(.band-wash, .band-tint, .band-ink, .sq):not(#_) :is(.walk__src, .walk__n):not(#_):not(#_) { opacity: .8; }
.walk__src:not(#_):not(#_) { color: inherit; opacity: .72; }
.walk__n:not(#_):not(#_) { color: inherit; opacity: .72; }
.words:not(.hx):not(#_):not(#_) .cs__since { color: var(--svm); }
.subnav__name:not(#_):not(#_), .subnav__name:not(#_):not(#_) a { letter-spacing: .08em; }
@media (max-width: 620px) { .subnav__name:not(#_):not(#_) { white-space: normal; font-size: 10px; line-height: 1.25; letter-spacing: .06em; } }
main > :is(.band-wash, .band-tint, .band-ink, .sq):not(#_) :is(th, td, caption, figcaption):not(#_):not(#_) { color: var(--svw); }
.sev__media:not(#_):not(#_) figcaption { color: inherit; opacity: .72; }
.subnav__name:not(#_):not(#_) { flex: 1 1 auto; min-width: 0; max-width: none; }
.words:not(.hx):not(#_) { overflow-x: clip; }
@media (max-width: 620px) { .subnav__cta:not(#_):not(#_) { padding: 6px 10px; font-size: 9px; } .subnav__links:not(#_) { gap: 8px; } }
main > :is(.band-wash, .band-tint, .band-ink, .sq):not(#_) :is(.srel__why, .srel__name, .srel__go, .srel__link):not(#_):not(#_) { color: var(--svw); }
@media (max-width: 620px) { .subnav__name:not(#_):not(#_) a { white-space: inherit; overflow-wrap: anywhere; } }
.srel__aside:not(#_):not(#_) { border-left-color: currentColor; background: transparent; padding: 18px 0 0; border-left: 0; border-top: 1px solid var(--svl); color: inherit; }
main > :is(.band-wash, .band-tint, .band-ink, .sq):not(#_) :is(.stl__since, .stl__ticks li, .stl__name, .stl__what):not(#_):not(#_) { color: var(--svw); }
.stl__since:not(#_):not(#_) { color: inherit; opacity: .75; }

/* ── HOME · the section heads in the site's pattern (2026-10-28) ────────── */
.hx .hx-sec:not(#_):not(#_) { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 16px clamp(24px, 5vw, 96px); align-items: end; margin: 0 0 clamp(28px, 4vw, 48px); padding: 0 0 clamp(18px, 2.4vw, 28px); border-bottom: 1px solid var(--svil); }
.hx .hx-sec--ink:not(#_):not(#_) { border-bottom-color: var(--svl); }
.hx .hx-sec--stack:not(#_):not(#_) { grid-template-columns: 1fr; align-items: start; }
.hx .hx-sec__k:not(#_):not(#_) { margin: 0 0 12px; opacity: .72; }
.hx .hx-sec__t:not(#_):not(#_) { margin: 0; max-width: 24ch; font-size: clamp(24px, 2.8vw, 42px); font-weight: 300; line-height: 1.12; letter-spacing: .03em; text-transform: uppercase; text-indent: 0; }
.hx .hx-sec__r:not(#_) { display: flex; flex-direction: column; gap: 18px; align-items: flex-start; }
.hx .hx-sec__lede:not(#_):not(#_) { max-width: 52ch; margin: 0; font-size: 14px; line-height: 1.7; opacity: .78; }
.hx .hx-sec[data-reveal] { transform: translateY(14px); }
.hx .hx-sec[data-reveal].is-in { transform: none; }
.hx-state .hx-sec { margin-bottom: clamp(32px, 4vw, 56px); }
.hx-state__row { align-items: center; }
.hx-svc:not(#_) { padding-top: clamp(48px, 7vw, 96px); }
.hx-think:not(#_) { padding-top: clamp(48px, 7vw, 96px); }
.hx-think__in .hx-sec { margin-bottom: 0; }
.hx-think .hx-plus--ink:not(#_) { margin-top: 0; }
.hx-go__intro .hx-sec { margin-bottom: 0; }
@media (max-width: 760px) { .hx .hx-sec:not(#_):not(#_) { grid-template-columns: 1fr; align-items: start; } }

/* ── the flyouts: a pictogram on every discipline, the product images back ── */
.mega:not(#_):not(#_) .msvc { grid-template-columns: 44px minmax(0, 1fr); gap: 14px; align-items: start; }
.mega:not(#_):not(#_) .msvc__icon { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid rgba(255, 255, 255, .18); border-radius: 0; background: transparent; color: #fff; transition: border-color .25s var(--ease); }
.mega:not(#_):not(#_) .msvc:hover .msvc__icon { border-color: rgba(255, 255, 255, .6); background: transparent; }
.mega:not(#_):not(#_) .msvc__icon .hx-picto { width: 26px; height: 26px; }
.mega:not(#_):not(#_) .prod__media { display: block; position: relative; margin: 0 0 16px; aspect-ratio: 16 / 10; overflow: hidden; border: 1px solid rgba(255, 255, 255, .18); border-radius: 0; background: #0d1636; clip-path: polygon(0 0, 70% 0, 70% 9%, 100% 9%, 100% 100%, 0 100%); }
.mega:not(#_):not(#_) .prod__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s var(--ease); }
.mega:not(#_):not(#_) .prod:hover .prod__media img { transform: scale(1.04); }
@media (max-width: 900px) {
  .nav:not(#_) .msvc__icon { width: 36px; height: 36px; }
  .nav:not(#_) .msvc__icon .hx-picto { width: 22px; height: 22px; }
  .nav:not(#_) .prod__media { flex: 0 0 112px; aspect-ratio: 16 / 10; margin: 0 14px 0 0; }
}
@media (prefers-reduced-motion: reduce) { .mega:not(#_):not(#_) .prod:hover .prod__media img { transform: none; } }
.hx-state .hx-sec__t:not(#_):not(#_) { max-width: 30ch; }
main > :is(.band-wash, .band-tint, .band-ink, .sq):not(#_) :is(.row__n, .row__t, .row__h):not(#_):not(#_) { color: var(--svw); }
.legal__toc:not(#_):not(#_) p { opacity: .82; }