/* ==========================================================================
   Manelisi Technologies — design system
   Navy editorial. Brand CI: Navy #06153D · Blue #2563EB · Deep #163C8C
   ========================================================================== */

@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('fonts/plus-jakarta-sans-latin-wght-normal.woff2') format('woff2-variations');
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/montserrat-latin-400-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/montserrat-latin-500-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/montserrat-latin-600-normal.woff2') format('woff2');
}

/* --------------------------------------------------------------- tokens --- */
:root {
  --navy:        #06153D;
  --navy-800:    #0A1C4C;
  --navy-700:    #0E255F;
  --deep:        #163C8C;
  --blue:        #2563EB;
  --blue-400:    #4C82F5;
  --blue-200:    #A9BEEC;
  --graphite:    #2D2D2D;
  --slate:       #4A4A4A;
  --paper:       #FFFFFF;
  --ice:         #F5F7FC;
  --ice-200:     #E7ECF7;
  --line-light:  #DFE5F1;

  --on-navy:        #FFFFFF;
  --on-navy-soft:   rgba(255,255,255,.68);
  --on-navy-faint:  rgba(255,255,255,.62);
  --hair-navy:      rgba(255,255,255,.13);
  --hair-navy-soft: rgba(255,255,255,.07);

  --ink:        #06153D;          /* CI navy — headings on light surfaces */
  --ink-soft:   #2D2D2D;          /* CI graphite — supporting text */
  --ink-faint:  #63697A;          /* graphite tint — labels, meta (AA on white + ice) */
  --accent-sm:  #8FB2FB;   /* small accent text on the deep gradient */

  --display: 'Plus Jakarta Sans', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --label:   'Montserrat', 'Segoe UI', system-ui, sans-serif;

  /* Type scale. Every size on the site comes from this list. Body copy has
     exactly three steps, and labels have two, which is what keeps eight pages
     looking like one document. Display sizes live in .d1 to .d4 below. */
  --fs-body:  clamp(1rem, .38vw + .92rem, 1.075rem);   /* running text        */
  --fs-sm:    0.9625rem;                               /* card and table text */
  --fs-xs:    0.8125rem;                               /* meta, footnotes     */
  --fs-label: 0.6875rem;                               /* eyebrows, labels    */
  --fs-label-sm: 0.625rem;                             /* the smallest label  */

  /* Label tracking. Two values, not seven. */
  --track-label: .2em;
  --track-tight: .12em;

  --gut:  clamp(1.25rem, 4.4vw, 4.5rem);
  --maxw: 84rem;
  --rail: 3.25rem;              /* left spine width on desktop */

  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
}

/* --------------------------------------------------------------- reset ---- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
/* The header is fixed, so an in-page anchor would otherwise land underneath it.
   scroll-padding-top is the one-line fix and it applies to keyboard focus jumps
   as well as clicks. */
html { scroll-padding-top: 6.5rem; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--navy);
  color: var(--ink);
  font-family: var(--display);
  font-weight: 400;
  font-size: var(--fs-body);
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, svg, canvas { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1,h2,h3,h4,h5 { margin: 0; font-weight: 800; letter-spacing: -.028em; word-spacing: .055em; line-height: 1.03; }
p { margin: 0; }
hr { border: 0; border-top: 1px solid var(--line-light); margin: 0; }
::selection { background: var(--blue); color: #fff; }

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

/* ------------------------------------------------------------ utilities --- */
.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gut);
}
.only-lg { display: none; }
@media (min-width: 1080px) { .only-lg { display: block; } }

.eyebrow {
  font-family: var(--label);
  font-weight: 600;
  font-size: var(--fs-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
}
.mono-num {
  font-family: var(--label);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

/* Display scale */
.d1 { font-size: clamp(2.6rem, 6.4vw, 5.4rem); line-height: .99; letter-spacing: -.038em; word-spacing: .06em; }
.d2 { font-size: clamp(2.1rem, 4.4vw, 3.6rem); line-height: 1.03; letter-spacing: -.032em; word-spacing: .06em; }
.d3 { font-size: clamp(1.45rem, 2.1vw, 1.95rem); line-height: 1.14; letter-spacing: -.024em; font-weight: 800; }
.d4 { font-size: clamp(1.15rem, 1.2vw, 1.3rem); line-height: 1.28; letter-spacing: -.018em; font-weight: 700; }

.lede {
  font-size: clamp(1.075rem, .7vw + .92rem, 1.375rem);
  line-height: 1.55;
  font-weight: 400;
  letter-spacing: -.012em;
}
.measure    { max-width: 34ch; }
.measure-md { max-width: 48ch; }
.measure-lg { max-width: 62ch; }

/* Surfaces */
.s-navy  { background: var(--navy);  color: var(--on-navy); }
.s-deep  { background: linear-gradient(158deg, #06153D 0%, #0B2159 52%, #163C8C 100%); color: var(--on-navy); }
.s-paper { background: var(--paper); color: var(--ink); }
.s-ice   { background: var(--ice);   color: var(--ink); }

section { position: relative; }
.pad    { padding-block: clamp(4.5rem, 9vw, 9rem); }
.pad-sm { padding-block: clamp(3rem, 5.5vw, 5rem); }

/* Hairline grid, used on dark surfaces */
.grid-lines {
  position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(90deg, var(--hair-navy-soft) 1px, transparent 1px);
  background-size: calc(100% / 6) 100%;
  opacity: .9;
  mask-image: linear-gradient(180deg, transparent, #000 18%, #000 82%, transparent);
}

/* ---------------------------------------------------------- section head -- */
.shead { display: grid; gap: clamp(1.25rem, 2vw, 2rem); }
.shead-top {
  display: flex; align-items: baseline; gap: 1.15rem;
  padding-bottom: .9rem;
  border-bottom: 1px solid var(--line-light);
}
.s-navy .shead-top, .s-deep .shead-top { border-color: var(--hair-navy); }
.shead-num {
  font-family: var(--label); font-weight: 600; font-size: var(--fs-label);
  letter-spacing: var(--track-label); color: var(--blue);
  font-variant-numeric: tabular-nums;
}
.s-navy .shead-num, .s-deep .shead-num { color: var(--blue-400); }
.shead-label { flex: 1; }
.shead-label .eyebrow { color: var(--ink-faint); }
.s-navy .shead-label .eyebrow, .s-deep .shead-label .eyebrow { color: var(--on-navy-faint); }

.shead-body { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
@media (min-width: 940px) {
  .shead-body { grid-template-columns: minmax(0,1.05fr) minmax(0,.85fr); gap: clamp(2rem,4vw,4.5rem); align-items: end; }
}
.shead-body p { color: var(--ink-soft); }
.s-navy .shead-body p, .s-deep .shead-body p { color: var(--on-navy-soft); }

/* ---------------------------------------------------------------- links --- */
.btn {
  --bg: var(--blue); --fg: #fff; --bd: var(--blue);
  display: inline-flex; align-items: center; gap: .7rem;
  padding: .95rem 1.5rem;
  background: var(--bg); color: var(--fg);
  border: 1px solid var(--bd);
  font-family: var(--label); font-weight: 600;
  font-size: var(--fs-label); letter-spacing: var(--track-tight); text-transform: uppercase;
  transition: background .35s var(--ease), border-color .35s var(--ease), color .35s var(--ease), transform .35s var(--ease);
  will-change: transform;
}
.btn:hover { background: var(--deep); border-color: var(--deep); transform: translateY(-2px); }
.btn .arw { transition: transform .4s var(--ease-out); }
.btn:hover .arw { transform: translateX(5px); }

.btn-ghost { --bg: transparent; --fg: var(--on-navy); --bd: var(--hair-navy); }
.btn-ghost:hover { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.34); }
.btn-outline { --bg: transparent; --fg: var(--ink); --bd: var(--line-light); }
.btn-outline:hover { background: var(--navy); border-color: var(--navy); color: #fff; }

.tlink {
  display: inline-flex; align-items: center; gap: .6rem;
  font-family: var(--label); font-weight: 600;
  font-size: var(--fs-label); letter-spacing: var(--track-tight); text-transform: uppercase;
  color: var(--blue);
  padding-bottom: .35rem;
  border-bottom: 1px solid currentColor;
  transition: gap .35s var(--ease-out), color .3s var(--ease);
}
.tlink:hover { gap: 1.05rem; }
.s-navy .tlink, .s-deep .tlink { color: var(--blue-200); }
.s-navy .tlink:hover, .s-deep .tlink:hover { color: #fff; }

.btn-row { display: flex; flex-wrap: wrap; gap: .85rem; }

/* --------------------------------------------------------------- header --- */
.hdr {
  position: fixed; inset: 0 0 auto; z-index: 90;
  background: transparent;
  transition: background .45s var(--ease), border-color .45s var(--ease), backdrop-filter .45s;
  border-bottom: 1px solid transparent;
}
.hdr-in {
  display: flex; align-items: center; gap: 1.5rem;
  height: 5.25rem;
  transition: height .45s var(--ease);
}
.hdr.is-stuck {
  background: rgba(6,21,61,.86);
  backdrop-filter: saturate(150%) blur(14px);
  -webkit-backdrop-filter: saturate(150%) blur(14px);
  border-bottom-color: var(--hair-navy);
}
.hdr.is-stuck .hdr-in { height: 4.35rem; }

.brand { display: flex; align-items: center; flex: none; }
/* CI minimum digital size is 180px wide; the compact lockup is 4.86:1,
   so never let the height fall below 2.32rem (~181px). */
.brand img { height: 2.32rem; width: auto; transition: height .45s var(--ease); }
@media (min-width: 640px) { .brand img { height: 2.5rem; } }
.hdr.is-stuck .brand img { height: 2.32rem; }

.nav { display: none; margin-left: auto; align-items: center; gap: clamp(1.1rem, 2vw, 2.15rem); }
@media (min-width: 1080px) { .nav { display: flex; } }
.nav a {
  position: relative;
  font-family: var(--label); font-weight: 500;
  font-size: var(--fs-label); letter-spacing: var(--track-tight); text-transform: uppercase;
  color: var(--on-navy-soft);
  padding-block: .4rem;
  transition: color .3s var(--ease);
}
.nav a::after {
  content: ''; position: absolute; left: 0; bottom: 0;
  width: 100%; height: 1px; background: var(--blue-400);
  transform: scaleX(0); transform-origin: left;
  transition: transform .4s var(--ease-out);
}
.nav a:hover { color: #fff; }
.nav a:hover::after, .nav a[aria-current="page"]::after { transform: scaleX(1); }
.nav a[aria-current="page"] { color: #fff; }
.hdr .btn { padding: .72rem 1.15rem; font-size: var(--fs-label); }
/* .nav-cta is a two-line stack: see the profiling wizard block at the end. */

.burger {
  margin-left: auto; display: inline-flex; flex-direction: column; justify-content: center; gap: 5px;
  width: 2.75rem; height: 2.75rem; padding: 0 .55rem;
  background: none; border: 1px solid var(--hair-navy); cursor: pointer;
}
@media (min-width: 1080px) { .burger { display: none; } }
.burger span { display: block; height: 1px; background: #fff; transition: transform .35s var(--ease), opacity .25s; }
body.menu-open .burger span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
body.menu-open .burger span:nth-child(2) { opacity: 0; }
body.menu-open .burger span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* mobile drawer */
.drawer {
  position: fixed; inset: 0; z-index: 85;
  background: var(--navy);
  padding: 6.5rem var(--gut) 2.5rem;
  display: flex; flex-direction: column; gap: 2rem;
  transform: translateY(-100%);
  transition: transform .55s var(--ease-out);
  overflow-y: auto;
}
body.menu-open .drawer { transform: translateY(0); }
body.menu-open { overflow: hidden; }
@media (min-width: 1080px) { .drawer { display: none; } }
.drawer nav { display: grid; }
.drawer nav a {
  font-size: clamp(1.6rem, 8vw, 2.4rem); font-weight: 800; letter-spacing: -.03em;
  color: #fff; padding: .7rem 0;
  border-bottom: 1px solid var(--hair-navy);
  display: flex; align-items: baseline; gap: 1rem;
}
.drawer nav a span { font-family: var(--label); font-size: var(--fs-label-sm); font-weight: 600; letter-spacing: var(--track-label); color: var(--blue-400); }
.drawer-foot { color: var(--on-navy-soft); font-size: var(--fs-sm); display: grid; gap: .35rem; }
.drawer-foot a:hover { color: #fff; }

/* ----------------------------------------------------------------- hero --- */
.hero { position: relative; overflow: hidden; background: var(--navy); color: #fff; }
.hero-bg { position: absolute; inset: 0; pointer-events: none; }
.hero-bg::before {
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(64% 52% at 76% 8%, rgba(37,99,235,.34), transparent 62%),
    radial-gradient(48% 44% at 4% 92%, rgba(22,60,140,.42), transparent 66%),
    linear-gradient(168deg, #06153D 0%, #081A48 46%, #0C2360 100%);
}
.hero-bg canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .9; }
.hero-in {
  position: relative;
  padding-top: clamp(8rem, 15vh, 11.5rem);
  padding-bottom: clamp(3.5rem, 7vw, 6rem);
  min-height: min(100svh, 54rem);
  display: flex; flex-direction: column; justify-content: flex-end;
}
.hero h1 { margin-bottom: 1.5rem; }
.hero h1 em { font-style: normal; color: var(--blue-400); }
.hero .lede { color: var(--on-navy-soft); max-width: 46ch; margin-bottom: 2.35rem; }
.hero-top { display: flex; align-items: center; gap: 1rem; margin-bottom: clamp(1.75rem, 4vw, 3.25rem); }
.hero-top .eyebrow { color: var(--on-navy-faint); }
.hero-top .rule { flex: 1; height: 1px; background: var(--hair-navy); }

/* vertical brand spine */
.spine {
  position: absolute; left: 0; top: 0; bottom: 0; width: var(--rail);
  display: none; align-items: center; justify-content: center;
  border-right: 1px solid var(--hair-navy-soft);
}
@media (min-width: 1180px) { .spine { display: flex; } }
.spine span {
  writing-mode: vertical-rl; transform: rotate(180deg);
  font-family: var(--label); font-weight: 500;
  font-size: var(--fs-label-sm); letter-spacing: var(--track-tight); text-transform: uppercase;
  color: rgba(255,255,255,.5); white-space: nowrap;
}

/* scroll cue */
.cue { display: flex; align-items: center; gap: .8rem; margin-top: clamp(2.5rem,5vw,4rem); color: var(--on-navy-faint); }
.cue .eyebrow { font-size: var(--fs-label-sm); }
.cue i {
  display: block; width: 2.5rem; height: 1px; background: rgba(255,255,255,.34); position: relative; overflow: hidden;
}
.cue i::after {
  content: ''; position: absolute; inset: 0; background: var(--blue-400);
  animation: cue 2.6s var(--ease) infinite;
}
@keyframes cue { 0% { transform: translateX(-100%); } 60%,100% { transform: translateX(100%); } }

/* --------------------------------------------------------------- ledger --- */
/* numeric stat band */
.stats { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); }
@media (min-width: 900px) { .stats { grid-template-columns: repeat(4, minmax(0,1fr)); } }
.stat {
  padding: clamp(1.6rem,3vw,2.5rem) clamp(1rem,2vw,1.75rem);
  border-top: 1px solid var(--hair-navy);
  border-right: 1px solid var(--hair-navy);
}
.stat:nth-child(2n) { border-right: 0; }
@media (min-width: 900px) {
  .stat:nth-child(2n) { border-right: 1px solid var(--hair-navy); }
  .stat:last-child { border-right: 0; }
}
/* The one big-number style on the site. .pmeta-n on the profiling hero shares it
   rather than adding a second: the type inventory is what keeps eight pages
   looking like one document, and a lone 300-weight numeral broke that. */
.stat-n, .pmeta-n {
  font-size: clamp(2.4rem, 4.6vw, 3.75rem); font-weight: 800; letter-spacing: -.05em;
  line-height: 1; color: #fff; font-variant-numeric: tabular-nums;
}
.stat-n sup { font-size: .38em; vertical-align: .95em; margin-left: .1em; color: var(--blue-400); font-weight: 700; }
.stat-l { margin-top: .8rem; color: var(--on-navy-soft); font-size: var(--fs-sm); line-height: 1.45; }

/* accordion ledger (pillars) */
.ledger { border-top: 1px solid var(--line-light); }
.s-navy .ledger, .s-deep .ledger { border-color: var(--hair-navy); }
.lrow { border-bottom: 1px solid var(--line-light); }
.s-navy .lrow, .s-deep .lrow { border-color: var(--hair-navy); }
.lbtn {
  width: 100%; background: none; border: 0; cursor: pointer; text-align: left;
  display: grid; grid-template-columns: auto 1fr auto; align-items: center;
  gap: clamp(.9rem, 2.4vw, 2.25rem);
  padding: clamp(1.15rem, 2.2vw, 1.85rem) 0;
  transition: padding-left .45s var(--ease-out), color .3s var(--ease);
}
.lbtn:hover { padding-left: clamp(.4rem, 1.2vw, 1.1rem); }
.lnum {
  font-family: var(--label); font-weight: 600; font-size: var(--fs-label); letter-spacing: var(--track-label);
  color: var(--ink-faint); font-variant-numeric: tabular-nums;
}
.s-navy .lnum { color: var(--on-navy-faint); }
.lbtn:hover .lnum, .lrow.open .lnum { color: var(--blue); }
.s-navy .lbtn:hover .lnum, .s-navy .lrow.open .lnum { color: var(--blue-400); }
.ltitle { font-size: clamp(1.2rem, 2.1vw, 1.75rem); font-weight: 700; letter-spacing: -.018em; word-spacing: .05em; line-height: 1.15; }
.lplus { position: relative; width: 1.05rem; height: 1.05rem; flex: none; }
.lplus::before, .lplus::after {
  content: ''; position: absolute; inset: 50% 0 auto; height: 1px; background: currentColor;
  transition: transform .45s var(--ease-out), opacity .3s;
  opacity: .55;
}
.lplus::after { transform: rotate(90deg); }
.lrow.open .lplus::after { transform: rotate(0deg); opacity: 0; }
.lrow.open .lplus::before { opacity: 1; }
.lbody {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows .55s var(--ease-out);
}
.lrow.open .lbody { grid-template-rows: 1fr; }
.lbody > div { overflow: hidden; }
.lbody-in {
  display: grid; gap: 1.25rem clamp(2rem,4vw,4rem);
  padding: 0 0 clamp(1.5rem,2.6vw,2.35rem) 0;
  color: var(--ink-soft);
}
@media (min-width: 860px) {
  .lbody-in { grid-template-columns: minmax(0,1fr) minmax(0,1fr); padding-left: clamp(2.6rem,6vw,7rem); }
}
.s-navy .lbody-in { color: var(--on-navy-soft); }
.taglist { display: flex; flex-wrap: wrap; gap: .45rem; }
.tag {
  font-family: var(--label); font-weight: 500; font-size: var(--fs-label); letter-spacing: var(--track-tight);
  text-transform: uppercase; color: var(--ink-soft);
  padding: .42rem .72rem; border: 1px solid var(--line-light);
}
.s-navy .tag, .s-deep .tag { color: var(--on-navy-soft); border-color: var(--hair-navy); }

/* ---------------------------------------------------------------- cards --- */
.cards { display: grid; gap: 1px; background: var(--line-light); border: 1px solid var(--line-light); }
@media (min-width: 760px)  { .cards.c2 { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (min-width: 760px)  { .cards.c3 { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (min-width: 1060px) { .cards.c3 { grid-template-columns: repeat(3, minmax(0,1fr)); } }
.card {
  background: var(--paper);
  padding: clamp(1.6rem, 2.6vw, 2.4rem);
  display: flex; flex-direction: column; gap: .9rem;
  transition: background .4s var(--ease), transform .4s var(--ease);
}
.card:hover { background: var(--ice); }
.card .ic { color: var(--blue); margin-bottom: .35rem; }
.card p { color: var(--ink-soft); font-size: var(--fs-sm); }
.card .kicker {
  font-family: var(--label); font-weight: 600; font-size: var(--fs-label-sm); letter-spacing: var(--track-label);
  text-transform: uppercase; color: var(--blue);
}

.cards.on-navy { background: var(--hair-navy); border-color: var(--hair-navy); }
.cards.on-navy .card { background: var(--navy); color: #fff; }
.cards.on-navy .card:hover { background: #081C4E; }
.cards.on-navy .card p { color: var(--on-navy-soft); }
.cards.on-navy .card .ic, .cards.on-navy .card .kicker { color: var(--blue-400); }

/* feature list with hairline numbers */
.flist { display: grid; gap: 0; border-top: 1px solid var(--line-light); }
.s-navy .flist, .s-deep .flist { border-color: var(--hair-navy); }
.fitem {
  display: grid; gap: .55rem clamp(1.5rem,3vw,3rem);
  padding: clamp(1.4rem,2.4vw,2rem) 0;
  border-bottom: 1px solid var(--line-light);
}
.s-navy .fitem, .s-deep .fitem { border-color: var(--hair-navy); }
@media (min-width: 820px) {
  .fitem { grid-template-columns: 4.5rem minmax(0,15rem) minmax(0,1fr); align-items: start; }
}
.fitem .n { font-family: var(--label); font-weight: 600; font-size: var(--fs-label); letter-spacing: var(--track-label); color: var(--blue); padding-top: .35rem; }
.s-navy .fitem .n, .s-deep .fitem .n { color: var(--blue-400); }
.fitem h3 { font-size: clamp(1.05rem,1.4vw,1.25rem); font-weight: 700; letter-spacing: -.02em; line-height: 1.25; }
.fitem p { color: var(--ink-soft); font-size: var(--fs-sm); }
.s-navy .fitem p, .s-deep .fitem p { color: var(--on-navy-soft); }

/* ------------------------------------------------------------- method ----- */
.method { display: grid; gap: 1px; background: var(--hair-navy); }
@media (min-width: 760px)  { .method { grid-template-columns: repeat(5, minmax(0,1fr)); } }
.mstep {
  background: var(--navy); padding: clamp(1.5rem,2.4vw,2.1rem) clamp(1.15rem,1.8vw,1.6rem);
  display: flex; flex-direction: column; gap: .85rem; min-height: 13rem;
  position: relative; overflow: hidden;
  transition: background .45s var(--ease);
}
.mstep::before {
  content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 2px;
  background: var(--blue); transform: scaleX(0); transform-origin: left;
  transition: transform .6s var(--ease-out);
}
.mstep:hover::before { transform: scaleX(1); }
.mstep:hover { background: #081C4E; }
.mstep .n { font-family: var(--label); font-weight: 600; font-size: var(--fs-label-sm); letter-spacing: var(--track-label); color: var(--blue-400); }
.mstep h3 { font-size: var(--fs-label); font-weight: 600; letter-spacing: var(--track-tight); text-transform: uppercase; font-family: var(--label); word-spacing: normal; }
.mstep p { color: var(--on-navy-soft); font-size: var(--fs-sm); line-height: 1.5; }

/* ---------------------------------------------------------------- quote --- */
.quote { display: grid; gap: 2rem; }
.quote blockquote {
  margin: 0;
  font-size: clamp(1.5rem, 3.1vw, 2.6rem); font-weight: 700; line-height: 1.2; letter-spacing: -.03em;
}
.quote blockquote span { color: var(--blue-400); }
.quote figcaption { color: var(--on-navy-faint); font-family: var(--label); font-weight: 500; font-size: var(--fs-label); letter-spacing: var(--track-label); text-transform: uppercase; }

/* ------------------------------------------------------------- cta band --- */
.cta {
  display: grid; gap: 2rem clamp(2rem,5vw,5rem); align-items: center;
}
@media (min-width: 940px) { .cta { grid-template-columns: minmax(0,1.15fr) minmax(0,.85fr); } }
.cta h2 { color: #fff; }
.cta p { color: var(--on-navy-soft); }

/* --------------------------------------------------------------- footer --- */
.ftr { background: #030C25; color: var(--on-navy-soft); padding-block: clamp(3.25rem,6vw,5rem) 2rem; }
.ftr-grid { display: grid; gap: 2.75rem; }
@media (min-width: 900px) { .ftr-grid { grid-template-columns: minmax(0,1.35fr) repeat(3, minmax(0,.7fr)); gap: clamp(2rem,4vw,4rem); } }
.ftr img.logo { height: 2.35rem; width: auto; margin-bottom: 1.5rem; }
.ftr .ftr-h { font-family: var(--label); font-weight: 600; font-size: var(--fs-label); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--on-navy-faint); margin-bottom: 1.15rem; }
.ftr li + li { margin-top: .6rem; }
.ftr a:hover { color: #fff; }
.ftr .small { font-size: var(--fs-sm); }
.ftr-btm {
  margin-top: clamp(2.5rem,5vw,4rem); padding-top: 1.6rem; border-top: 1px solid var(--hair-navy);
  display: flex; flex-wrap: wrap; gap: .85rem 2rem; align-items: center; justify-content: space-between;
  font-size: var(--fs-xs); color: var(--on-navy-faint);
}
.ftr-tag {
  font-family: var(--label); font-weight: 500; font-size: var(--fs-label-sm);
  letter-spacing: var(--track-tight); line-height: 2;
  text-transform: uppercase; color: rgba(255,255,255,.52);
}

/* ------------------------------------------------------------ page hero --- */
.phero { position: relative; overflow: hidden; background: var(--navy); color: #fff; }
.phero-in {
  position: relative;
  padding-top: clamp(7.5rem, 13vh, 10rem);
  padding-bottom: clamp(3rem, 6vw, 5rem);
}
.phero h1 { margin-bottom: 1.35rem; }
.phero .lede { color: var(--on-navy-soft); max-width: 52ch; }
.crumb { display: flex; align-items: center; gap: .7rem; margin-bottom: clamp(1.75rem,4vw,3rem); }
.crumb .eyebrow { color: var(--on-navy-faint); }
.crumb .cur { color: var(--blue-400); }
.crumb .sep { color: rgba(255,255,255,.5); }

/* ------------------------------------------------------------ split art --- */
.split { display: grid; gap: clamp(2rem,4vw,4.5rem); align-items: start; }
@media (min-width: 940px) { .split { grid-template-columns: minmax(0,1fr) minmax(0,1fr); } }
@media (min-width: 940px) { .split.wide-left { grid-template-columns: minmax(0,1.2fr) minmax(0,.8fr); } }
.sticky { position: sticky; top: 7rem; }

/* from → to */
.shift { display: grid; gap: 1px; background: var(--hair-navy); border: 1px solid var(--hair-navy); }
@media (min-width: 760px) { .shift { grid-template-columns: 1fr 1fr; } }
.shift > div { background: var(--navy); padding: clamp(1.6rem,2.8vw,2.4rem); }
.shift .to { background: linear-gradient(150deg, #0C2360, #163C8C); }
.shift .eyebrow { color: var(--on-navy-faint); margin-bottom: 1rem; display: block; }
.shift .to .eyebrow { color: var(--blue-200); }
.shift p { color: #fff; font-size: clamp(1.1rem,1.7vw,1.4rem); font-weight: 700; letter-spacing: -.022em; line-height: 1.24; }

/* checklist */
.checks { display: grid; gap: .9rem; }
.checks li { display: grid; grid-template-columns: 1.1rem 1fr; gap: .85rem; align-items: start; color: var(--ink-soft); }
.s-navy .checks li, .s-deep .checks li { color: var(--on-navy-soft); }
.checks svg { color: var(--blue); margin-top: .42rem; }
.s-navy .checks svg, .s-deep .checks svg { color: var(--blue-400); }
.checks b { color: var(--ink); font-weight: 700; }
.s-navy .checks b, .s-deep .checks b { color: #fff; }

/* map / footprint */
.pins { display: grid; gap: 1px; background: var(--line-light); border: 1px solid var(--line-light); }
@media (min-width: 620px) { .pins { grid-template-columns: repeat(2,minmax(0,1fr)); } }
/* Three columns rather than five: there are six countries, so five columns left
   one stranded on a row of its own, and the longest name (Democratic Republic of
   the Congo) needs the width anyway. */
@media (min-width: 980px) { .pins { grid-template-columns: repeat(3,minmax(0,1fr)); } }
.pin { background: var(--paper); padding: clamp(1.25rem,2vw,1.75rem); display: grid; gap: .4rem; }
.pin .c { font-weight: 800; letter-spacing: -.02em; font-size: var(--fs-body); }
.pin .r { font-family: var(--label); font-weight: 500; font-size: var(--fs-label-sm); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--ink-faint); }

/* --------------------------------------------------------------- table ---- */
.tbl { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.tbl th, .tbl td { text-align: left; padding: 1.05rem 1rem; border-bottom: 1px solid var(--line-light); vertical-align: top; }
.tbl th {
  font-family: var(--label); font-weight: 600; font-size: var(--fs-label-sm); letter-spacing: var(--track-label);
  text-transform: uppercase; color: var(--ink-faint); border-bottom-color: var(--ink-faint);
}
.tbl td:first-child { font-weight: 700; color: var(--ink); }
.tbl td { color: var(--ink-soft); }
.tbl tr:hover td { background: var(--ice); }
.tbl-wrap { overflow-x: auto; }

/* ---------------------------------------------------------------- forms --- */
.form { display: grid; gap: 1.15rem; }
.f2 { display: grid; gap: 1.15rem; }
@media (min-width: 620px) { .f2 { grid-template-columns: 1fr 1fr; } }
.field { display: grid; gap: .5rem; }
.field label {
  font-family: var(--label); font-weight: 600; font-size: var(--fs-label-sm); letter-spacing: var(--track-label);
  text-transform: uppercase; color: var(--on-navy-faint);
}
.field input, .field select, .field textarea {
  font-family: var(--display); font-size: var(--fs-body); color: #fff;
  background: rgba(255,255,255,.045);
  border: 1px solid var(--hair-navy);
  padding: .9rem 1rem;
  transition: border-color .3s var(--ease), background .3s var(--ease);
  width: 100%;
}
.field textarea { min-height: 8.5rem; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--blue-400); background: rgba(255,255,255,.075);
}
.field input::placeholder, .field textarea::placeholder { color: rgba(255,255,255,.32); }
.field select option { background: var(--navy); color: #fff; }
.form .note { font-size: var(--fs-xs); color: var(--on-navy-faint); }
.form-msg { font-size: var(--fs-sm); padding: .9rem 1rem; border: 1px solid var(--hair-navy); display: none; }
.form-msg.show { display: block; }
.form-msg.ok { border-color: rgba(76,130,245,.6); background: rgba(37,99,235,.14); color: #fff; }
.form-msg.err { border-color: rgba(255,140,140,.5); background: rgba(255,90,90,.12); color: #FFD9D9; }

/* contact detail rows */
.crows { display: grid; }
.crow {
  display: grid; gap: .3rem clamp(1.5rem,3vw,3rem);
  padding: clamp(1.15rem,2vw,1.6rem) 0; border-bottom: 1px solid var(--hair-navy);
}
@media (min-width: 640px) { .crow { grid-template-columns: 9rem minmax(0,1fr); align-items: baseline; } }
.crow dt { font-family: var(--label); font-weight: 600; font-size: var(--fs-label-sm); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--on-navy-faint); }
.crow dd { margin: 0; color: #fff; font-size: var(--fs-body); }
.crow dd a { border-bottom: 1px solid rgba(255,255,255,.24); transition: border-color .3s; }
.crow dd a:hover { border-color: var(--blue-400); }

/* --------------------------------------------------------------- reveal --- */
[data-rv] { opacity: 0; transform: translateY(22px); }
[data-rv].in {
  opacity: 1; transform: none;
  transition: opacity .9s var(--ease-out), transform .9s var(--ease-out);
  transition-delay: var(--d, 0ms);
}
@media (prefers-reduced-motion: reduce) {
  [data-rv] { opacity: 1; transform: none; }
}

/* scroll progress hairline */
.prog { position: fixed; top: 0; left: 0; height: 2px; background: var(--blue); z-index: 95; width: 0; }

/* skip link */
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: #fff; color: var(--navy); padding: .75rem 1.15rem;
  font-family: var(--label); font-size: var(--fs-label); letter-spacing: var(--track-tight); text-transform: uppercase; font-weight: 600;
}
.skip:focus { left: .75rem; top: .75rem; }

/* trailing tile that closes an odd grid row */
.card.card-more {
  background: var(--ice); justify-content: space-between;
  border: 0;
}
.card.card-more:hover { background: var(--ice-200); }
.cards.on-navy .card.card-more { background: #081C4E; }
.cards.on-navy .card.card-more:hover { background: #0A2360; }
.card.card-more .d4 { color: inherit; }


.card-more .tlink { align-self: start; }

/* --- small accent text on the deep gradient needs a lighter blue (AA) ----- */
.s-deep .shead-num,
.s-deep .fitem .n,
.s-deep .lnum,
.s-deep .card .kicker,
.s-deep .checks svg,
.s-deep .tlink { color: var(--accent-sm); }
.s-deep .quote blockquote span { color: #BFD2FD; }

/* ==========================================================================
   Photography
   Every photograph is pre-rendered as a navy duotone (see tools/make-images.py)
   so it cannot fight the palette. Text never sits on bare image: a navy scrim
   always sits between, sized so every overlay pair still passes AA.
   ========================================================================== */

/* --- atmospheric backdrop inside a hero ---------------------------------- */
.hero-photo, .phero-photo {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  mix-blend-mode: screen;
  pointer-events: none;
}
.hero-photo {
  opacity: .58;
  -webkit-mask-image: linear-gradient(102deg, transparent 4%, rgba(0,0,0,.45) 40%, #000 82%);
          mask-image: linear-gradient(102deg, transparent 4%, rgba(0,0,0,.45) 40%, #000 82%);
}
.phero-photo {
  opacity: .40;
  -webkit-mask-image: linear-gradient(100deg, transparent 10%, rgba(0,0,0,.4) 52%, #000 92%);
          mask-image: linear-gradient(100deg, transparent 10%, rgba(0,0,0,.4) 52%, #000 92%);
}
.phero-bg { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }

/* --- full-bleed image band ----------------------------------------------- */
.band {
  position: relative; isolation: isolate;
  background: var(--navy); color: #fff;
  overflow: hidden;
}
.band-img {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center 42%;
}
.band::after {                       /* the scrim that guarantees legibility */
  content: ''; position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(96deg,
      rgba(4,13,42,.92) 0%,
      rgba(5,17,50,.80) 30%,
      rgba(6,21,61,.44) 62%,
      rgba(6,21,61,.14) 100%),
    linear-gradient(180deg, rgba(3,11,34,.42) 0%, transparent 38%, rgba(3,11,34,.38) 100%);
}
/* Prose in a band is held to the left, where the scrim is at its heaviest.
   Structural children (grids, pin rows) are left alone — constraining those
   cramps them. Verified empirically by band-contrast.js, which samples the
   rendered pixels behind every text node rather than trusting the CSS. */
@media (min-width: 940px) {
  .band-in > .quote,
  .band-in > p,
  .band-in > .lede { max-width: 62%; }
}
/* Bands whose content runs the full width need an even scrim rather than a
   left-weighted one. */
.band-wide::after {
  background:
    linear-gradient(96deg, rgba(4,13,42,.93) 0%, rgba(5,17,50,.88) 42%, rgba(6,21,61,.74) 100%),
    linear-gradient(180deg, rgba(3,11,34,.5) 0%, transparent 40%, rgba(3,11,34,.45) 100%) !important;
}
@media (max-width: 760px) {
  .band::after {
    background:
      linear-gradient(180deg, rgba(4,14,44,.9) 0%, rgba(5,17,50,.86) 45%, rgba(4,14,44,.93) 100%);
  }
}
.band .grid-lines { z-index: 2; }
.band-in { position: relative; z-index: 3; }

/* --- pins on a dark surface ---------------------------------------------- */
.pins.on-dark { background: var(--hair-navy); border-color: var(--hair-navy); }
.pins.on-dark .pin { background: rgba(4,13,40,.55); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
.pins.on-dark .pin .c { color: #fff; }
.pins.on-dark .pin .r { color: var(--on-navy-faint); }

/* --- capability figure --------------------------------------------------- */
.capfig {
  position: relative; margin: clamp(1.85rem, 3vw, 2.6rem) 0 0;
  overflow: hidden;
  border: 1px solid var(--line-light);
  background: var(--navy);
}
.s-ice .capfig { border-color: var(--ice-200); }
.capfig img {
  display: block; width: 100%; height: auto; aspect-ratio: 3 / 2;
  object-fit: cover;
  transform: scale(1.001);
  transition: transform 1.1s var(--ease-out), opacity .8s var(--ease);
}
.capfig:hover img { transform: scale(1.045); }
.capfig::after {                     /* thin blue edge light, ties to the mark */
  content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 2px;
  background: linear-gradient(90deg, var(--blue), rgba(37,99,235,0));
  transform: scaleX(0); transform-origin: left;
  transition: transform .8s var(--ease-out);
}
.capfig:hover::after { transform: scaleX(1); }
.capfig figcaption {
  position: absolute; left: 0; bottom: 0; right: 0;
  padding: 2.4rem 1.35rem .95rem;
  font-family: var(--label); font-weight: 500;
  font-size: var(--fs-label-sm); letter-spacing: var(--track-label); text-transform: uppercase;
  color: rgba(255,255,255,.82);
  background: linear-gradient(180deg, transparent, rgba(3,11,34,.85));
}

@media (prefers-reduced-motion: reduce) {
  .capfig img, .capfig::after { transition: none; }
  .capfig:hover img { transform: none; }
}

/* --------------------------------------------------------------------------
   A .band is a dark surface, so it needs every on-dark override that .s-navy
   and .s-deep get. Without this, .shead-body p inherits graphite (#2D2D2D)
   and lands dark-on-dark. Accents step up to --accent-sm because a photograph
   lifts the background above what --blue-400 can hold at AA.
   -------------------------------------------------------------------------- */
.band h1, .band h2, .band h3, .band h4 { color: #fff; }
.band .shead-top { border-color: var(--hair-navy); }
.band .shead-num { color: var(--accent-sm); }
.band .eyebrow,
.band .shead-label .eyebrow { color: rgba(255,255,255,.80); }
.band .shead-body p,
.band .lede,
.band p { color: rgba(255,255,255,.80); }
.band .tlink { color: var(--accent-sm); }
.band .tlink:hover { color: #fff; }
.band .checks li { color: rgba(255,255,255,.80); }
.band .checks svg { color: var(--accent-sm); }
.band .checks b { color: #fff; }
.band .flist, .band .fitem,
.band .ledger, .band .lrow { border-color: var(--hair-navy); }
.band .fitem .n { color: var(--accent-sm); }
.band .fitem p, .band .lbody-in { color: rgba(255,255,255,.80); }
.band .lnum { color: rgba(255,255,255,.72); }
.band .tag { color: rgba(255,255,255,.80); border-color: var(--hair-navy); }
.band .quote blockquote span { color: #BFD2FD; }
.band .quote figcaption { color: rgba(255,255,255,.74); }

/* The breadcrumb accent sits over the hero backdrop photograph, which lifts
   the navy just enough to push --blue-400 under 4.5:1. */
.crumb .cur { color: var(--accent-sm); }

/* ------------------------------------------------------- footer social ---- */
.ftr-social {
  display: flex; flex-wrap: wrap; gap: .55rem;
  margin-top: clamp(2.25rem, 4vw, 3.25rem);
}
.ftr-social a {
  display: inline-flex; align-items: center; gap: .6rem;
  padding: .6rem .95rem;
  border: 1px solid var(--hair-navy);
  font-family: var(--label); font-weight: 500;
  font-size: var(--fs-label); letter-spacing: var(--track-tight); text-transform: uppercase;
  color: rgba(255,255,255,.74);
  transition: color .3s var(--ease), border-color .3s var(--ease), background .3s var(--ease);
}
.ftr-social a:hover {
  color: #fff; border-color: rgba(255,255,255,.36); background: rgba(255,255,255,.05);
}
.ftr-social svg { flex: none; }

/* reCAPTCHA legal line + widget on the dark form */
.form .note.legal { max-width: 56ch; line-height: 1.55; }
.form .note.legal a { color: var(--blue-200); border-bottom: 1px solid rgba(169,190,236,.4); }
.form .note.legal a:hover { color: #fff; border-color: #fff; }
.g-recaptcha { min-height: 78px; }

/* ==========================================================================
   Utilities
   These exist so no page has to carry an inline font-size or colour. Every
   type size on the site comes from the .d1–.d4 / .lede / body / .eyebrow
   scale, and every text colour comes from the surface it sits on.
   ========================================================================== */

/* Vertical rhythm between a section head and the block beneath it */
.stack-sm { margin-top: 1.5rem; }
.stack    { margin-top: clamp(2rem, 4vw, 3rem); }
.stack-lg { margin-top: clamp(2.25rem, 4vw, 3.25rem); }
.stack-xl { margin-top: clamp(2.5rem, 5vw, 4rem); }
.stack-cta { margin-top: 2.35rem; }

/* A run of body paragraphs. Colour follows the surface, spacing is uniform. */
.prose { display: grid; gap: 1.1rem; color: var(--ink-soft); }
.s-navy .prose, .s-deep .prose, .band .prose, .phero .prose {
  color: rgba(255,255,255,.80);
}
.prose > * { max-width: 64ch; }

/* Accent eyebrow: picks the readable accent for its surface automatically */
.eyebrow-accent { color: var(--blue); }
.s-navy .eyebrow-accent, .s-deep .eyebrow-accent, .band .eyebrow-accent,
.phero .eyebrow-accent { color: var(--accent-sm); }

/* A quiet single line of qualifying text, e.g. a footnote under a card grid */
.note-line { font-size: var(--fs-sm); line-height: 1.6; color: var(--ink-faint); }
.s-navy .note-line, .s-deep .note-line, .band .note-line { color: rgba(255,255,255,.70); }

/* The icon that heads a capability or sector block */
.ic-lead { color: var(--blue); margin-bottom: 1.25rem; }
.s-navy .ic-lead, .s-deep .ic-lead, .band .ic-lead { color: var(--accent-sm); }

/* Heading immediately under an eyebrow */
.hd-sub { margin-top: 1.25rem; }

/* A long statement set at heading size. Lighter than a heading on purpose:
   at 400 a forty-word sentence reads, at 800 it shouts. */
.statement { color: #fff; margin-top: 1.35rem; font-weight: 500; letter-spacing: -.018em; line-height: 1.24; }

/* Address block: body size, looser leading for a postal address */
.addr { line-height: 1.65; }

/* Centre a short hero vertically, used by the 404 page */
.center-block {
  min-height: 58svh; display: flex; flex-direction: column; justify-content: center;
}

/* Visually hidden but available to screen readers */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ==========================================================================
   Logo walls
   Partner and client marks keep their own colours, so each brand's identity
   stays intact. They sit on white tiles for that reason: a duotone or a
   knockout would misrepresent someone else's logo.
   ========================================================================== */
.wall {
  display: grid;
  background: var(--paper);
  /* Separators are drawn by each tile's right and bottom border rather than by
     a grid gap over a tinted background. With a gap, the leftover cells on the
     last row show that background and read as a grey block, which is what
     happens the moment your logo count is not a multiple of the column count. */
  border-top: 1px solid var(--line-light);
  border-left: 1px solid var(--line-light);
  grid-template-columns: repeat(2, minmax(0,1fr));
}
@media (min-width: 560px)  { .wall { grid-template-columns: repeat(3, minmax(0,1fr)); } }
@media (min-width: 980px)  { .wall { grid-template-columns: repeat(4, minmax(0,1fr)); } }

.wall li {
  border-right: 1px solid var(--line-light);
  border-bottom: 1px solid var(--line-light);
  display: grid; place-items: center;
  padding: clamp(1.25rem, 2vw, 1.85rem) clamp(1rem, 1.4vw, 1.25rem);
  min-height: 7.25rem;
  transition: background .35s var(--ease);
}
.wall li:hover { background: var(--ice); }
.wall img {
  /* Each file is trimmed to its own mark, so height sizes the logo itself
     rather than a padded canvas around it. */
  width: auto; height: auto; max-width: 100%;
  max-height: 3.1rem;
  /* Logos arrive at wildly different weights, so they are held back a touch at
     rest and come to full strength on hover. Calms the wall without altering
     any brand's colours. */
  opacity: .9;
  filter: saturate(.95);
  transition: opacity .35s var(--ease), filter .35s var(--ease);
}
.wall li:hover img { opacity: 1; filter: none; }
@media (min-width: 980px) { .wall img { max-height: 3.5rem; } }

/* Partner marks are mostly wide wordmarks, so they get fewer, wider tiles. */
.wall-wide { grid-template-columns: repeat(2, minmax(0,1fr)); }
@media (min-width: 700px)  { .wall-wide { grid-template-columns: repeat(3, minmax(0,1fr)); } }
@media (min-width: 1080px) { .wall-wide { grid-template-columns: repeat(5, minmax(0,1fr)); } }

@media (prefers-reduced-motion: reduce) {
  .wall img { transition: none; }
}

/* Honeypot field: off-screen rather than display:none, because some bots skip
   hidden inputs and we want them to fill it in. */
.trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form-actions { align-items: center; gap: 1.35rem; }

/* A table whose first row is a spanning caption-style header */
.tbl thead th[colspan] {
  color: var(--ink-faint);
  border-bottom-color: var(--ink-faint);
}

/* ------------------------------------------------------------ phase rail --- */
/* The five delivery phases, named only. The descriptions live on the method
   page: the home page introduces, it does not restate. */
.phaserail {
  display: grid; gap: 1px;
  background: var(--hair-navy);
  border-block: 1px solid var(--hair-navy);
  counter-reset: phase;
}
/* Six stages now, not five. A hardcoded five-column grid left the sixth item
   alone on a second row beside a large empty cell. Two rows of three, then six
   across once there is room for them. */
@media (min-width: 620px)  { .phaserail { grid-template-columns: repeat(3, minmax(0,1fr)); } }
@media (min-width: 1080px) { .phaserail { grid-template-columns: repeat(6, minmax(0,1fr)); } }
.phaserail li {
  background: var(--navy);
  display: flex; align-items: baseline; gap: .9rem;
  padding: clamp(1.15rem, 2vw, 1.6rem) clamp(1rem, 1.6vw, 1.5rem);
  position: relative; overflow: hidden;
  transition: background .4s var(--ease);
}
.phaserail li::before {
  content: ''; position: absolute; inset: 0 auto 0 0; width: 2px;
  background: var(--blue);
  transform: scaleY(0); transform-origin: top;
  transition: transform .5s var(--ease-out);
}
.phaserail li:hover { background: #081C4E; }
.phaserail li:hover::before { transform: scaleY(1); }
.phaserail .n {
  font-family: var(--label); font-weight: 600; font-size: var(--fs-label);
  letter-spacing: var(--track-tight); color: var(--blue-400);
  font-variant-numeric: tabular-nums; flex: none;
}
.phaserail .p {
  font-family: var(--label); font-weight: 600; font-size: var(--fs-label);
  letter-spacing: var(--track-tight); text-transform: uppercase; color: #fff;
}
@media (prefers-reduced-motion: reduce) { .phaserail li::before { transition: none; } }

/* Generated lattice behind an interior page hero. Sits lower than the
   photographic backdrop on the home page, because it is line art rather than
   tone and reads as louder at the same opacity. */
.phero-graphic {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: .85;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(100deg, transparent 4%, rgba(0,0,0,.5) 46%, #000 88%);
          mask-image: linear-gradient(100deg, transparent 4%, rgba(0,0,0,.5) 46%, #000 88%);
}

/* ==========================================================================
   Company profiling wizard  (profile.html)
   Sixty-one questions is a lot to ask of anyone, so the form is built to feel
   short: one step visible at a time, options as targets rather than tick boxes,
   and progress stated in words as well as drawn as a bar. The controls here are
   the light-surface counterparts of the navy .field styles above.
   ========================================================================== */

/* The `hidden` attribute is only display:none in the UA stylesheet, so ANY author
   rule that sets display beats it. .wz-step is display:grid and the buttons are
   display:inline-flex, which is precisely that collision: without this line every
   step and every navigation button renders at once and there is no wizard.
   The noscript overrides in profile.html carry higher specificity, so the
   no-JavaScript fallback still shows every step. */
[hidden] { display: none !important; }

/* The header's single call to action is the profiler. */
.nav-cta { display: none; }
@media (min-width: 1080px) { .nav-cta { display: inline-flex; } }

.drawer-cta { display: grid; justify-items: stretch; }
@media (min-width: 520px) { .drawer-cta { justify-items: start; } }

/* hero meta */
.pmeta {
  display: flex; flex-wrap: wrap; gap: clamp(1.75rem, 4vw, 3.75rem);
  margin-top: clamp(2rem, 3.5vw, 3rem);
}
.pmeta > div { display: grid; gap: .2rem; }
/* size, weight and tracking come from .stat-n above */
.pmeta-n { font-family: var(--display); display: block; }
.pmeta > div > span:last-child {
  font-family: var(--label); font-weight: 600; font-size: var(--fs-label);
  letter-spacing: var(--track-label); text-transform: uppercase; color: var(--on-navy-faint);
}

.pnote { border-top: 1px solid var(--line-light); padding-top: clamp(1.75rem, 3vw, 2.5rem); }

/* layout: the step rail sits in the left spine on wide screens */
.wz-wrap { display: grid; gap: clamp(2rem, 4vw, 4rem); align-items: start; }
@media (min-width: 1080px) {
  .wz-wrap { grid-template-columns: 15rem minmax(0, 1fr); }
  .wz-rail { position: sticky; top: 7.5rem; }
}

.wz-rail { display: none; list-style: none; margin: 0; padding: 0; }
@media (min-width: 1080px) { .wz-rail { display: grid; gap: .1rem; } }
.wz-rail li {
  display: grid; grid-template-columns: 2.1rem 1fr; align-items: baseline; gap: .5rem;
  padding: .6rem 0 .6rem .8rem;
  border-left: 2px solid var(--line-light);
  transition: border-color .35s var(--ease), color .35s var(--ease);
}
.wz-rail .dot-n {
  font-family: var(--label); font-weight: 600; font-size: var(--fs-label-sm);
  letter-spacing: var(--track-label); color: var(--ink-faint); font-variant-numeric: tabular-nums;
}
.wz-rail .dot-t {
  font-family: var(--label); font-weight: 500; font-size: var(--fs-label);
  letter-spacing: var(--track-tight); text-transform: uppercase; color: var(--ink-faint);
}
.wz-rail li.done { border-left-color: var(--blue-400); }
.wz-rail li.done .dot-n, .wz-rail li.done .dot-t { color: var(--ink-soft); }
.wz-rail li.cur { border-left-color: var(--blue); }
/* Colour and the rail marker carry "you are here", the same way the nav's
   aria-current state does. Bumping the weight as well would add two type styles
   to the site for one word of emphasis. */
.wz-rail li.cur .dot-n, .wz-rail li.cur .dot-t { color: var(--ink); }

/* progress */
.wz { display: grid; gap: clamp(1.75rem, 3vw, 2.5rem); }
.wz-bar { height: 2px; background: var(--ice-200); overflow: hidden; }
.wz-bar > i {
  display: block; height: 100%; background: var(--blue);
  transition: width .5s var(--ease-out);
}
.wz-count {
  font-family: var(--label); font-weight: 500; font-size: var(--fs-label);
  letter-spacing: var(--track-label); text-transform: uppercase; color: var(--ink-faint);
  margin: -1.25rem 0 0; display: flex; flex-wrap: wrap; gap: .9rem; align-items: baseline;
}
.wz-count b { color: var(--ink); font-weight: inherit; font-variant-numeric: tabular-nums; }
.wz-saved { color: var(--blue); }

/* a step */
.wz-step { border: 0; margin: 0; padding: 0; min-width: 0; display: grid; gap: clamp(1.75rem, 3vw, 2.5rem); }
.wz-head { display: grid; grid-template-columns: auto 1fr; gap: clamp(1rem, 2vw, 1.75rem); align-items: start; }
.wz-num {
  font-family: var(--label); font-weight: 600; font-size: var(--fs-label);
  letter-spacing: var(--track-label); color: var(--blue);
  font-variant-numeric: tabular-nums; padding-top: .5rem;
}
.wz-blurb { color: var(--ink-soft); font-size: var(--fs-sm); margin-top: .6rem; max-width: 58ch; }
.wz-fields { display: grid; gap: clamp(1.9rem, 3vw, 2.6rem); }

/* a question */
.wq { display: grid; gap: .85rem; }
.wq-label {
  font-family: var(--display); font-weight: 600; font-size: var(--fs-body);
  line-height: 1.45; color: var(--ink); max-width: 62ch;
}
.wq-label em { font-style: normal; color: var(--blue); }
.wq-help { font-size: var(--fs-xs); line-height: 1.6; color: var(--ink-faint); max-width: 66ch; margin: -.45rem 0 0; }
.wq-err { font-size: var(--fs-xs); color: #B3261E; margin: 0; display: none; }
.wq.invalid .wq-err { display: block; }

.wq input[type="text"], .wq input[type="email"], .wq input[type="tel"],
.wq select, .wq textarea {
  font-family: var(--display); font-size: var(--fs-body); color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line-light);
  padding: .85rem 1rem; width: 100%; max-width: 34rem;
  transition: border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.wq textarea { min-height: 7.5rem; max-width: 46rem; resize: vertical; line-height: 1.6; }
.wq input:focus, .wq select:focus, .wq textarea:focus {
  outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(37,99,235,.12);
}
.wq input::placeholder, .wq textarea::placeholder { color: #9AA1B4; }
.wq.invalid input, .wq.invalid select, .wq.invalid textarea { border-color: #B3261E; }

/* options as targets, not tick boxes */
.opts { display: grid; gap: .4rem; max-width: 46rem; }
@media (min-width: 760px) { .opts-multi { grid-template-columns: 1fr 1fr; } }
.opt {
  display: grid; grid-template-columns: 1.05rem 1fr; gap: .8rem; align-items: start;
  padding: .8rem .95rem;
  border: 1px solid var(--line-light); background: var(--paper);
  cursor: pointer;
  transition: border-color .25s var(--ease), background .25s var(--ease);
  position: relative;
}
.opt:hover { border-color: var(--blue-400); background: var(--ice); }
.opt input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.opt-box {
  width: 1.05rem; height: 1.05rem; margin-top: .12rem;
  border: 1px solid #A9B0C4; background: var(--paper);
  flex: none; position: relative;
  transition: border-color .2s var(--ease), background .2s var(--ease);
}
/* Round for a single choice, square for many: the shape has to tell the visitor
   whether picking one answer replaces the last. A checkbox group is
   class="opts opts-multi", so plain `.opts` would have made both round. */
.opts:not(.opts-multi) .opt-box { border-radius: 50%; }
.opt-box::after {
  content: ''; position: absolute; inset: 3px;
  background: var(--paper); opacity: 0;
  transition: opacity .2s var(--ease);
}
.opts:not(.opts-multi) .opt-box::after { border-radius: 50%; }
/* A tick rather than a smaller square inside a square, which reads as a nested
   box. Drawn from two borders on a rotated element so it needs no image. */
.opts-multi .opt-box::after {
  inset: auto; top: .12rem; left: .28rem;
  width: .3rem; height: .55rem;
  background: none;
  border: solid #fff; border-width: 0 2px 2px 0;
  transform: rotate(42deg);
}
.opt-t { font-size: var(--fs-sm); line-height: 1.5; color: var(--ink-soft); }
.opt:has(input:checked) { border-color: var(--blue); background: rgba(37,99,235,.05); }
.opt:has(input:checked) .opt-box { border-color: var(--blue); background: var(--blue); }
.opt:has(input:checked) .opt-box::after { opacity: 1; }
.opt:has(input:checked) .opt-t { color: var(--ink); font-weight: 600; }
.opt:has(input:focus-visible) { outline: 2px solid var(--blue); outline-offset: 2px; }
/* :has() is widely supported now; this keeps older engines legible via JS. */
.opt.on { border-color: var(--blue); background: rgba(37,99,235,.05); }
.opt.on .opt-box { border-color: var(--blue); background: var(--blue); }
.opt.on .opt-box::after { opacity: 1; }
.opt.on .opt-t { color: var(--ink); font-weight: 600; }
.wq.invalid .opts { outline: 1px solid rgba(179,38,30,.45); outline-offset: .5rem; }

/* review step */
.wz-review { display: grid; gap: 1.5rem; }
.wz-rgroup { border-top: 1px solid var(--line-light); padding-top: 1.1rem; }
.wz-rgroup h3 {
  font-family: var(--label); font-weight: 600; font-size: var(--fs-label);
  letter-spacing: var(--track-label); text-transform: uppercase; color: var(--ink-faint);
  margin: 0 0 .85rem;
}
.wz-rlist { display: grid; gap: .55rem; margin: 0; }
.wz-rlist > div { display: grid; gap: .2rem .0rem; }
@media (min-width: 700px) {
  .wz-rlist > div { grid-template-columns: minmax(0, 20rem) minmax(0, 1fr); gap: 1.5rem; }
}
.wz-rlist dt { font-size: var(--fs-sm); color: var(--ink-faint); }
.wz-rlist dd { margin: 0; font-size: var(--fs-sm); color: var(--ink); font-weight: 600; }
.wz-rlist dd.blank { color: #9AA1B4; font-weight: 400; font-style: italic; }
.wz-redit {
  margin-top: .9rem; background: none; border: 0; padding: 0; cursor: pointer;
  font-family: var(--label); font-weight: 600; font-size: var(--fs-label);
  letter-spacing: var(--track-tight); text-transform: uppercase; color: var(--blue);
  border-bottom: 1px solid currentColor;
}
.wz-redit:hover { color: var(--deep); }

/* navigation */
.wz-nav {
  display: flex; flex-wrap: wrap; gap: .85rem; align-items: center;
  border-top: 1px solid var(--line-light); padding-top: clamp(1.5rem, 2.5vw, 2rem);
}
.wz-clear {
  margin-left: auto; background: none; border: 0; padding: .5rem 0; cursor: pointer;
  font-family: var(--label); font-weight: 500; font-size: var(--fs-label);
  letter-spacing: var(--track-tight); text-transform: uppercase; color: var(--ink-faint);
}
.wz-clear:hover { color: #B3261E; }
.wz .btn[disabled] { opacity: .55; cursor: not-allowed; transform: none; }

/* messages on a light surface */
.wz .form-msg { border-color: var(--line-light); color: var(--ink-soft); }
.wz .form-msg.ok { border-color: rgba(37,99,235,.45); background: rgba(37,99,235,.06); color: var(--ink); }
.wz .form-msg.err { border-color: rgba(179,38,30,.5); background: rgba(179,38,30,.05); color: #8C1D18; }
.wz .note.legal { max-width: 60ch; line-height: 1.55; color: var(--ink-faint); font-size: var(--fs-xs); }
.wz .note.legal a { color: var(--blue); border-bottom: 1px solid rgba(37,99,235,.35); }
.wz .note.legal a:hover { border-color: var(--blue); }

/* the thank-you that replaces the form on success */
.wz-done { display: grid; gap: 1.25rem; max-width: 62ch; }
.wz-done h2 { margin: 0; }
.wz-done p { color: var(--ink-soft); }

@media (prefers-reduced-motion: reduce) {
  .wz-bar > i, .opt, .wz-rail li { transition: none; }
}
.wz-wrap-done { grid-template-columns: 1fr !important; }
.wz-done:focus { outline: none; }

/* The alternative route on the contact page: same offer, different front door. */
.aside-alt {
  border-top: 1px solid var(--hair-navy);
  padding-top: clamp(1.5rem, 2.5vw, 2rem);
  display: grid; gap: .85rem; justify-items: start;
}
.aside-alt .small { color: var(--on-navy-soft); max-width: 42ch; }

/* ==========================================================================
   Legal pages  (privacy.html, terms.html)
   Long-form, numbered, and quieter than the rest of the site: nobody arrives
   here to be sold to. A sticky contents rail on wide screens because these are
   documents people jump around in rather than read start to finish.
   ========================================================================== */

.legal-wrap { display: grid; gap: clamp(2rem, 4vw, 4rem); align-items: start; }
@media (min-width: 1080px) {
  .legal-wrap { grid-template-columns: 16rem minmax(0, 1fr); }
  .legal-toc { position: sticky; top: 7.5rem; }
}

.legal-toc { display: none; }
@media (min-width: 1080px) { .legal-toc { display: block; } }
.legal-toc p {
  font-family: var(--label); font-weight: 600; font-size: var(--fs-label);
  letter-spacing: var(--track-label); text-transform: uppercase; color: var(--ink-faint);
  margin: 0 0 .9rem;
}
.legal-toc ol { list-style: none; margin: 0; padding: 0; display: grid; gap: .1rem; counter-reset: toc; }
.legal-toc li { counter-increment: toc; }
.legal-toc a {
  display: grid; grid-template-columns: 1.8rem 1fr; gap: .45rem;
  padding: .42rem 0 .42rem .8rem;
  border-left: 2px solid var(--line-light);
  font-size: var(--fs-sm); line-height: 1.4; color: var(--ink-faint);
  transition: border-color .3s var(--ease), color .3s var(--ease);
}
.legal-toc a::before {
  content: counter(toc, decimal-leading-zero);
  font-family: var(--label); font-weight: 600; font-size: var(--fs-label-sm);
  letter-spacing: var(--track-label); font-variant-numeric: tabular-nums;
}
.legal-toc a:hover { border-left-color: var(--blue); color: var(--ink); }

.legal { display: grid; gap: clamp(2.5rem, 4vw, 3.5rem); counter-reset: sec; }
.legal-sec { counter-increment: sec; scroll-margin-top: 7rem; display: grid; gap: 1.1rem; }
.legal-sec > h2 {
  display: grid; grid-template-columns: auto 1fr; gap: clamp(.9rem, 2vw, 1.5rem);
  align-items: baseline; margin: 0;
  padding-top: clamp(1.5rem, 2.5vw, 2rem);
  border-top: 1px solid var(--line-light);
}
.legal-sec > h2::before {
  content: counter(sec, decimal-leading-zero);
  font-family: var(--label); font-weight: 600; font-size: var(--fs-label);
  letter-spacing: var(--track-label); color: var(--blue);
  font-variant-numeric: tabular-nums;
}
.legal-sec p, .legal-sec li { color: var(--ink-soft); }
.legal-sec p, .legal-sec ul, .legal-sec ol, .legal-sec dl { max-width: 68ch; }
.legal-sec h3 {
  font-family: var(--display); font-weight: 700; font-size: var(--fs-body);
  letter-spacing: -.01em; color: var(--ink); margin: .6rem 0 -.35rem;
}
/* Not display:grid. Turning a <ul> into a grid container makes its children grid
   items rather than list items, which silently removes every bullet: the list
   still indents, so it looks deliberate, and a legal page full of unmarked
   indented paragraphs is genuinely harder to read. Margins do the spacing. */
.legal-sec ul { list-style: disc; padding-left: 1.35rem; margin: 0; }
.legal-sec ol { list-style: decimal; padding-left: 1.5rem; margin: 0; }
.legal-sec li { line-height: 1.65; }
.legal-sec li + li { margin-top: .55rem; }
.legal-sec li::marker { color: var(--blue); }
.legal-sec a { color: var(--blue); border-bottom: 1px solid rgba(37,99,235,.32); }
.legal-sec a:hover { border-bottom-color: var(--blue); }

/* definition-style rows, for "what we collect and why" */
.legal-rows { display: grid; gap: 0; max-width: 68ch; }
.legal-row {
  display: grid; gap: .3rem;
  padding: 1rem 0; border-bottom: 1px solid var(--line-light);
}
@media (min-width: 700px) {
  .legal-row { grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); gap: 1.5rem; }
}
.legal-row dt {
  font-family: var(--label); font-weight: 600; font-size: var(--fs-label);
  letter-spacing: var(--track-tight); text-transform: uppercase; color: var(--ink);
}
.legal-row dd { margin: 0; font-size: var(--fs-sm); line-height: 1.65; color: var(--ink-soft); }

.legal-meta {
  display: flex; flex-wrap: wrap; gap: .6rem 2rem;
  font-family: var(--label); font-weight: 500; font-size: var(--fs-label);
  letter-spacing: var(--track-label); text-transform: uppercase; color: var(--ink-faint);
  padding-bottom: clamp(1.5rem, 2.5vw, 2rem);
}
.legal-meta b { color: var(--ink); font-weight: 700; }

/* Unresolved placeholders. Loud on purpose: these pages must not go live with a
   stub still in them, and build.py refuses to finish quietly if any remain. */
/* Inherits its family, size and weight from whatever it sits inside. An em-based
   size here multiplied out into a different type style per context, which put
   three extra entries in the site's type inventory for a marker that is meant to
   disappear before launch. The background and the red rule are loud enough. */
.todo {
  background: #FFF3CD; color: #6B4E00;
  border-bottom: 2px solid #B3261E;
  padding: .05em .3em;
  font: inherit;
}
.legal-note {
  border: 1px solid #B3261E; border-left-width: 3px;
  background: rgba(179,38,30,.04);
  padding: clamp(1.1rem, 2vw, 1.5rem);
  display: grid; gap: .7rem; max-width: 68ch;
}
.legal-note p { color: var(--ink-soft); font-size: var(--fs-sm); line-height: 1.65; margin: 0; }
.legal-note strong { color: #8C1D18; }

/* Legal links in the footer's bottom rule, between the copyright and the origin
   line, so they are findable without competing with the navigation above. */
.ftr-legal { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; }
.ftr-legal a { color: var(--on-navy-faint); transition: color .3s var(--ease); }
.ftr-legal a:hover { color: #fff; }

/* Legal and utility pages, and the profiling page, do not need a full-height
   hero. On the profiling page the form is the point, so the hero gets out of
   its way rather than filling the first screen. */
.phero-short { min-height: auto; }
.phero-short .phero-in {
  padding-top: clamp(6.5rem, 10vh, 8rem);
  padding-bottom: clamp(2.25rem, 4vw, 3.25rem);
}
.phero-short .d2 { max-width: 24ch; }

/* Four short panels in a row, for "what you get" style summaries that used to
   be four paragraphs. */
.quad { display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); }
@media (min-width: 640px) { .quad { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1080px) { .quad { grid-template-columns: repeat(4, 1fr); } }
.quad > div { display: grid; gap: .6rem; align-content: start; padding-top: 1.1rem; border-top: 1px solid var(--hair-navy); }
.quad p { color: var(--on-navy-soft); font-size: var(--fs-sm); line-height: 1.6; }
.s-paper .quad > div { border-top-color: var(--line-light); }
.s-paper .quad p { color: var(--ink-soft); }

/* Section that leads straight into content with no top gap, used where a form
   follows the hero directly. */
.pad-top { padding-block: clamp(2rem, 4vw, 3.25rem) clamp(3.5rem, 7vw, 6rem); }

/* A centred eyebrow, for logo-wall section labels that need no heading. */
.center-x { text-align: center; }

/* Photograph beside a short titled list. */
.capband-fig { margin: 0; }
.capband-fig img { width: 100%; height: auto; display: block; }
.capband-list { display: grid; gap: 1.4rem; }
.capband-list h3 { margin: 0 0 .35rem; }
.capband-list p { color: var(--ink-soft); font-size: var(--fs-sm); line-height: 1.6; max-width: 52ch; }

/* Stats on a light surface. */
.stats-light .stat { border-color: var(--line-light); }
.stats-light .stat-n { color: var(--ink); }
.stats-light .stat-l { color: var(--ink-faint); }

/* Compact capability grid: the six pillars as cards rather than six full-bleed
   sections, which cut the page from roughly nine screens of scrolling to three. */
.pgrid { display: grid; gap: clamp(2rem, 3.5vw, 3rem); }
@media (min-width: 700px)  { .pgrid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1180px) { .pgrid { grid-template-columns: repeat(3, 1fr); } }
.pcell { display: grid; gap: .8rem; align-content: start; padding-top: 1.4rem; border-top: 1px solid var(--line-light); }
.pcell h3 { margin: 0; }
.pcell-lead { color: var(--ink-soft); font-size: var(--fs-sm); line-height: 1.6; }
.pcell .checks { margin-top: .25rem; }
.pcell .checks li { font-size: var(--fs-sm); }

/* Phase number on a method card, where the pillar cards use an icon instead. */
.pcell-n {
  font-family: var(--label); font-weight: 600; font-size: var(--fs-label);
  letter-spacing: var(--track-label); text-transform: uppercase; color: var(--blue);
  font-variant-numeric: tabular-nums;
}

/* Bands whose subject is people need a much lighter scrim than bands used as
   texture. At the default .92/.80 navy the faces vanish and the band reads as a
   flat rectangle, which defeats the reason for using a photograph of people.
   The text still sits on the left, where this gradient is heaviest. */
.band-people::after {
  background:
    linear-gradient(96deg,
      rgba(4,13,42,.93) 0%,
      rgba(5,17,50,.82) 36%,
      rgba(6,21,61,.52) 70%,
      rgba(6,21,61,.34) 100%),
    linear-gradient(180deg, rgba(3,11,34,.34) 0%, transparent 42%,
                    rgba(3,11,34,.30) 100%) !important;
}
@media (max-width: 760px) {
  .band-people::after {
    background:
      linear-gradient(180deg, rgba(4,14,44,.90) 0%, rgba(5,17,50,.62) 55%,
                      rgba(4,14,44,.72) 100%) !important;
  }
}

/* ==========================================================================
   Client carousel
   A continuously scrolling logo rail. The track holds the set twice and moves
   by exactly -50%, so the loop is seamless: at the restart the second copy sits
   where the first began. The duplicate is aria-hidden and its images have empty
   alt text, or every client name would be announced twice.
   ========================================================================== */

.carou { position: relative; }
.carou-mask {
  overflow: hidden;
  /* Fade the ends so logos enter and leave rather than being chopped off. */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.carou-track {
  display: flex; align-items: stretch;
  list-style: none; margin: 0; padding: 0;
  width: max-content;
  animation: carou-scroll var(--carou-dur, 40s) linear infinite;
}
.carou-track > li {
  flex: 0 0 auto;
  width: clamp(9.5rem, 15vw, 12.5rem);
  display: grid; place-items: center;
  padding: clamp(1.1rem, 2vw, 1.6rem) clamp(1rem, 2vw, 1.5rem);
  background: var(--paper);
  border-right: 1px solid var(--line-light);
}
.carou-track > li:first-child { border-left: 1px solid var(--line-light); }
.carou-track img {
  max-width: 100%; max-height: 3.1rem;
  width: auto; height: auto;
  object-fit: contain;
  /* The marks keep their own colours, so each brand's CI survives. A slight
     desaturation at rest stops twenty logos fighting each other, and it lifts
     on hover. */
  filter: saturate(.9);
  transition: filter .35s var(--ease), transform .35s var(--ease);
}
.carou-track > li:hover img { filter: saturate(1.06); transform: scale(1.04); }

@keyframes carou-scroll {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

/* Pause when someone is looking at a particular logo, or tabbing through. */
.carou:hover .carou-track,
.carou:focus-within .carou-track { animation-play-state: paused; }

/* No animation: it becomes an ordinary horizontal scroller the visitor drives.
   The duplicate half is hidden so the list is not repeated for no reason. */
@media (prefers-reduced-motion: reduce) {
  .carou-mask { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
  .carou-track { animation: none; }
  .carou-track > li[aria-hidden="true"] { display: none; }
}

/* ==========================================================================
   Capability cards  (services.html)
   Real cards with a tinted icon tile and a rule that draws in on hover.
   ========================================================================== */

.capx-grid { display: grid; gap: clamp(1.25rem, 2vw, 1.75rem); }
@media (min-width: 700px)  { .capx-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1180px) { .capx-grid { grid-template-columns: repeat(3, 1fr); } }

.capx {
  position: relative; overflow: hidden;
  display: grid; gap: .75rem; align-content: start;
  padding: clamp(1.5rem, 2.4vw, 2rem);
  background: var(--paper);
  border: 1px solid var(--line-light);
  transition: border-color .35s var(--ease), transform .35s var(--ease),
              box-shadow .35s var(--ease);
}
/* The photo variant, used on the services page only. The padding moves off the
   card and onto the body so the photograph can run to the card's edges, and the
   body keeps the gap the plain card had between its own children. */
.capx-photo { padding: 0; gap: 0; }
.capx-photo .capx-body {
  display: grid; gap: .75rem; align-content: start;
  padding: clamp(1.5rem, 2.4vw, 2rem);
}
.capx-fig { margin: 0; overflow: hidden; background: var(--navy); }
.capx-fig img {
  display: block; width: 100%; height: auto; aspect-ratio: 16 / 9;
  object-fit: cover;
  transform: scale(1.02);
  transition: transform .6s var(--ease-out);
}
.capx-photo:hover .capx-fig img { transform: scale(1.07); }
@media (prefers-reduced-motion: reduce) {
  .capx-fig img, .capx-photo:hover .capx-fig img { transition: none; transform: none; }
}
.capx:hover {
  border-color: rgba(37,99,235,.32);
  transform: translateY(-3px);
  box-shadow: 0 14px 34px -18px rgba(6,21,61,.30);
}
.capx-rule {
  position: absolute; left: 0; top: 0; bottom: 0; width: 2px;
  background: var(--blue);
  transform: scaleY(0); transform-origin: top;
  transition: transform .45s var(--ease-out);
}
.capx:hover .capx-rule { transform: scaleY(1); }

.capx-top { display: flex; align-items: center; justify-content: space-between; }
.capx-ic {
  display: grid; place-items: center;
  width: 3rem; height: 3rem;
  background: var(--ice); color: var(--blue);
  transition: background .35s var(--ease), color .35s var(--ease);
}
.capx:hover .capx-ic { background: var(--blue); color: #fff; }
.capx-n {
  font-family: var(--label); font-weight: 600; font-size: var(--fs-label);
  letter-spacing: var(--track-label); color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
}
.capx h3 { margin: .2rem 0 0; }
.capx-lead { color: var(--ink-soft); font-size: var(--fs-sm); line-height: 1.6; }
.capx-list { list-style: none; margin: .35rem 0 0; padding: 0; display: grid; gap: .45rem; }
.capx-list li {
  position: relative; padding-left: 1rem;
  font-size: var(--fs-xs); line-height: 1.55; color: var(--ink-faint);
}
.capx-list li::before {
  content: ''; position: absolute; left: 0; top: .52em;
  width: 4px; height: 4px; background: var(--blue-400);
}

/* ==========================================================================
   Industry cards  (industries.html)
   A large ghost numeral behind each card, which tints on hover. Different
   signature from the capability cards so the two pages do not read as one.
   ========================================================================== */

.indx-grid { display: grid; gap: 1px; background: var(--line-light); border: 1px solid var(--line-light); }
@media (min-width: 700px)  { .indx-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1180px) { .indx-grid { grid-template-columns: repeat(3, 1fr); } }

.indx {
  position: relative; overflow: hidden;
  display: grid; gap: .6rem; align-content: start;
  padding: clamp(1.6rem, 2.6vw, 2.25rem);
  background: var(--paper);
  transition: background .4s var(--ease);
}
.indx:hover { background: var(--ice); }
.indx-ghost {
  position: absolute; right: .35em; bottom: -.34em;
  font-family: var(--display); font-weight: 800; font-size: 7.5rem;
  line-height: 1; letter-spacing: -.05em;
  color: var(--ice-200);
  transition: color .4s var(--ease), transform .5s var(--ease-out);
  pointer-events: none;
}
.indx:hover .indx-ghost { color: rgba(37,99,235,.14); transform: translateY(-4px); }
.indx-ic { color: var(--blue); position: relative; }
.indx h3 { margin: .15rem 0 0; position: relative; }
/* The lede stops short of the ghost numeral in the bottom-right corner. Without
   the inset the last line of a three-line lede runs straight through the digit,
   which passes contrast but reads as an accident. */
.indx-lead { color: var(--ink-soft); font-size: var(--fs-sm); line-height: 1.6;
             position: relative; padding-right: 3.2rem; }
.indx-list { list-style: none; margin: .4rem 0 0; padding: 0; display: grid; gap: .4rem; position: relative; }
.indx-list li {
  font-size: var(--fs-xs); line-height: 1.5; color: var(--ink-faint);
  padding-top: .4rem; border-top: 1px solid var(--line-light);
}

/* ==========================================================================
   Phase timeline  (approach.html)
   A connecting rail with a numbered node per phase: horizontal from 1080px,
   vertical below. Five sequential steps is the one thing here that wants a
   timeline rather than a grid.
   ========================================================================== */

.tline { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; counter-reset: none; }
@media (min-width: 1080px) { .tline { grid-template-columns: repeat(5, 1fr); } }

/* align-content: start matters. Each .tstep is a grid item stretched to the row
   height, and a two-auto-row grid with default align-content distributes the
   spare height into the rows, which pushed the bodies down by different amounts
   and left the five phases visibly unaligned. */
.tstep { position: relative; display: grid; gap: 0; align-content: start; }

/* the rail */
.tstep::before {
  content: ''; position: absolute; background: var(--line-light);
  /* vertical on narrow screens */
  left: 1.05rem; top: 2.1rem; bottom: 0; width: 1px;
}
.tstep.tline-last::before { display: none; }
@media (min-width: 1080px) {
  .tstep::before {
    left: 2.1rem; right: 0; top: 1.05rem; bottom: auto; width: auto; height: 1px;
  }
}

.tstep-node {
  position: relative; z-index: 1;
  display: grid; place-items: center;
  width: 2.1rem; height: 2.1rem;
  border: 1px solid var(--blue); background: var(--paper); color: var(--blue);
  transition: background .35s var(--ease), color .35s var(--ease);
}
.tstep-node b {
  font-family: var(--label); font-weight: 600; font-size: var(--fs-label);
  letter-spacing: 0; font-variant-numeric: tabular-nums;
}
.tstep:hover .tstep-node { background: var(--blue); color: #fff; }

.tstep-body { padding: .9rem 0 2.25rem 3.1rem; display: grid; gap: .5rem; align-content: start; }
@media (min-width: 1080px) {
  .tstep-body { padding: 1.6rem clamp(1rem, 2vw, 1.75rem) 0 0; }
}
.tstep-ph {
  font-family: var(--label); font-weight: 600; font-size: var(--fs-label);
  letter-spacing: var(--track-label); text-transform: uppercase; color: var(--blue);
}
.tstep h3 { margin: 0; }
.tstep-lead { color: var(--ink-soft); font-size: var(--fs-sm); line-height: 1.6; }
.tstep-list { list-style: none; margin: .3rem 0 0; padding: 0; display: grid; gap: .4rem; }
.tstep-list li {
  position: relative; padding-left: .95rem;
  font-size: var(--fs-xs); line-height: 1.55; color: var(--ink-faint);
}
.tstep-list li::before {
  content: ''; position: absolute; left: 0; top: .5em;
  width: 4px; height: 4px; background: var(--blue-400);
}

@media (prefers-reduced-motion: reduce) {
  .capx, .capx-rule, .capx-ic, .indx, .indx-ghost, .tstep-node { transition: none; }
  .capx:hover { transform: none; }
}

/* A positioning line set large inside a band, where a full pull-quote would be
   too much furniture. */
.quote-lead {
  font-family: var(--display); font-weight: 300;
  font-size: clamp(1.5rem, 2.9vw, 2.4rem); line-height: 1.28;
  letter-spacing: -.02em; color: #fff; max-width: 30ch;
}

/* The productised engagements: a compact list where the duration carries as much
   weight as the name, because "2 to 3 weeks" is what makes it buyable. */
.eng-grid { display: grid; gap: 1px; background: var(--line-light);
            border: 1px solid var(--line-light); }
@media (min-width: 760px)  { .eng-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1180px) { .eng-grid { grid-template-columns: repeat(3, 1fr); } }
.eng { background: var(--paper); padding: clamp(1.4rem, 2.4vw, 1.9rem);
       display: grid; gap: .7rem; align-content: start;
       transition: background .35s var(--ease); }
.eng:hover { background: var(--ice); }
.eng-head { display: grid; gap: .45rem; }
.eng h3 { margin: 0; }
.eng-when {
  font-family: var(--label); font-weight: 600; font-size: var(--fs-label);
  letter-spacing: var(--track-label); text-transform: uppercase; color: var(--blue);
}
.eng p { color: var(--ink-soft); font-size: var(--fs-sm); line-height: 1.6;
         max-width: 54ch; }

/* ---------------------------------------------------------------------------
   Unfilled last rows
   ---------------------------------------------------------------------------
   Every card grid on the site paints its own 1px gaps by giving the container
   the line colour and each cell the paper colour. That is why an item count
   that does not divide by the column count is not merely empty space: the
   container colour shows through and reads as a broken cell.

   CSS cannot ask how many columns actually resolved, so each rule is bounded to
   the width range where that column count applies, and lets the last card take
   the rest of its row. Bounded ranges rather than cascade order, because a
   min-width-only rule for two columns also matches at three (item 15 is both
   2n+1 and 3n) and silently breaks the wider layout.

   Counts as at this build: engagements 7, verticals 3, partner-model cards 3,
   insight cards 6, partner logos 15. Change a count and re-run the sweep in
   /tmp/voidcheck2.js rather than assuming these still hold. */

/* Engagements: 7 items. */
@media (min-width: 760px) and (max-width: 1179px) {
  .eng-grid > .eng:last-child:nth-child(2n+1) { grid-column: span 2; }
}
@media (min-width: 1180px) {
  .eng-grid > .eng:last-child:nth-child(3n+1) { grid-column: span 3; }
  .eng-grid > .eng:last-child:nth-child(3n+2) { grid-column: span 2; }
}

/* Verticals: 3 items, two columns between 700 and 1179. */
@media (min-width: 700px) and (max-width: 1179px) {
  .indx-grid > .indx:last-child:nth-child(2n+1) { grid-column: span 2; }
}

/* Three-up card rows: 3 or 6 items, two columns between 760 and 1059. */
@media (min-width: 760px) and (max-width: 1059px) {
  .cards.c3 > :last-child:nth-child(2n+1) { grid-column: span 2; }
}

/* Logo wall: 15 items. Two columns below 700, and 3 and 5 both divide 15. */
@media (max-width: 699px) {
  .wall-wide > li:last-child:nth-child(2n+1) { grid-column: span 2; }
}

/* Case studies. Problem, then what was built, then what delivery involved, in a
   fixed order so three of them can be compared at a glance. */
.cs-list { display: grid; gap: clamp(2rem, 3.5vw, 3rem); }
.cs { border-top: 1px solid var(--line-light); padding-top: clamp(1.5rem, 2.5vw, 2rem); }
.cs-sector {
  font-family: var(--label); font-weight: 600; font-size: var(--fs-label);
  letter-spacing: var(--track-label); text-transform: uppercase; color: var(--blue);
}
.cs h3 { margin: .5rem 0 0; }
.cs-rows { display: grid; gap: 0; margin-top: 1.25rem; }
.cs-rows > div { display: grid; gap: .3rem; padding: .9rem 0; border-top: 1px solid var(--line-light); }
@media (min-width: 760px) {
  .cs-rows > div { grid-template-columns: minmax(0, 11rem) minmax(0, 1fr); gap: 1.5rem; }
}
.cs-rows dt {
  font-family: var(--label); font-weight: 600; font-size: var(--fs-label);
  letter-spacing: var(--track-tight); text-transform: uppercase; color: var(--ink-faint);
}
.cs-rows dd { margin: 0; font-size: var(--fs-sm); line-height: 1.65; color: var(--ink-soft); max-width: 64ch; }
.cs-rows dd ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; }
.cs-rows dd li { position: relative; padding-left: .95rem; }
.cs-rows dd li::before {
  content: ''; position: absolute; left: 0; top: .55em;
  width: 4px; height: 4px; background: var(--blue-400);
}

/* Five brief cards in a three-column grid leaves an empty cell on the second
   row. The brief variant carries no bullet list, so it is short enough to sit
   five across on a wide screen and three across below that. */
@media (min-width: 1180px) {
  .capx-grid:not(:has(.capx-list)) { grid-template-columns: repeat(5, 1fr); }
  .capx-grid:not(:has(.capx-list)) .capx { padding: clamp(1.2rem, 1.8vw, 1.5rem); }
}